Desarrollo front-end, estándares web, accesibilidad y más
Por kcmr, el 17 de noviembre de 2009 en Cajón de sastre, Mac
Etiquetas: mysql
Hace un tiempo publicaba un método para poder utilizar comandos SQL desde la consola de Windows, que consiste en añadir el directorio de MySQL a las variables de entorno del sistema.
En Mac se puede conseguir escribiendo lo siguiente en la consola:
Machine:~ user$ sudo su
Password: (tu contraseña...)
sh-3.2# echo '/usr/local/mysql/bin' >> /etc/paths.d/mysql
sh-3.2#
exit
La primera vez que hice esto funcionó, pero después de la actualización a Snow Leopard (realmente no sé si tiene algo que ver) me he encontrado con la sorpresa de que el directorio /usr/local/mysql no existe:
/usr/local/mysql no such file or directory
Para los que utilicen MAMP y se hayan encontrado con este mismo problema, esta solución es la que me ha funcionado (utilizar el directorio de MAMP):
sh-3.2# echo '/Applications/MAMP/Library/bin/mysql' >> /etc/paths.d/mysql
Por kcmr, el 18 de agosto de 2009 en Cajón de sastre, Photoshop
Hace una temporada que estoy usando Mac después de mi paso fugaz por Ubuntu, que murió repentinamente por causas desconocidas, y de “toda la vida” usando Windows. No voy a hablar de los pros de uno u otro, que sería tema para otro post, sino de algo que hasta ahora me había pasado desapercibido en PC: las diferencias de color entre los diseños (psd’s) y lo que se acaba viendo en el navegador.

Diferencia de color entre Photoshop y el navegador
Además de estas diferencias de color entre el navegador y el PSD, tenía otro problema bastante desesperante: en los degradados en Photoshop se apreciaban cambios bruscos de color similares a los que se pueden ver si guardamos un degradado como GIF de 8 colores :S
Estos problemas estaban causados por mis ajustes de color en Photoshop, que permanecían en su configuración por defecto (mal, muy mal hecho)
Después de rebuscar un poco en Internet y algún libro olvidado, he encontrado la combinación que mejor parece funcionar. Hay quien recomienda una de las configuraciones que trae Photoshop (Web/Internet en Europa) y quien recomienda crearse una nueva configuración personalizada. Yo me he quedado con esta última opción.
Podemos encontrar los ajustes de color en el menú Edición de Photoshop > Ajustes de Color.
En la ventana Ajustes de color, elegimos en el grupo Espacios de Trabajo las siguientes opciones:
Dentro del grupo Normas de gestión de color:

Ajustes de color personalizados en Photoshop
Sin ningún documento abierto, en el menú Vista > Ajuste de prueba seleccionamos Monitor RGB. Al abrir un documento marcamos en el menú Vista la opción Colores de prueba para asegurarnos de que los colores que estamos viendo en Photoshop coinciden con los que se verán en un navegador.
Aquí no acaba todo. A la hora de guardar para Web tendremos que desmarcar las opciones Incrustar perfil de color y Convertir en sRGB.

Opciones al guardar para Web
En este punto hay opiniones contrarias. Yo me he decantado por esta opción porque no todos los navegadores soportan perfiles de color en imágenes, lo que puede dar lugar a diferencias entre unos y otros.
Por kcmr, el 4 de agosto de 2009 en Cajón de sastre
Algo muy útil para aprender la sintaxis SQL o para otros fines como por ejemplo cargar archivos SQL de gran tamaño en Windows, es poder hacer consultas SQL mediante la consola (esa amigable ventana negra)
Tenemos dos opciones: en la consola, situarnos en el directorio donde esté la instalación de MySQL o bien añadir este directorio a las variables de entorno del sistema.
En Windows Vista encontramos las variables de entorno en Inicio > Panel de control > Sistema > Configuración avanzada del sistema.
En la ventana “Propiedades del sistema”, dentro de la pestaña “Opciones avanzadas” tenemos el botón “Variables de entorno”, en donde aparecen dos listados agrupados en “Variables de usuario” y “Variables de sistema”.
Dentro de “Variables de usuario”, editamos la variable PATH, donde añadimos el directorio de la instalación de MySQL. Si el valor no está vacío, separamos el nuevo valor del existente mediante un punto y coma.

Captura de la ventana Variables de entorno
La ruta al directorio de MySQL en WAMP, uno de los todo en uno más populares, es algo similar a C:\wamp\bin\mysql\mysql5.1.30\bin según la versión y dónde tengamos instalado WAMP Server.
De esta forma ya podemos loguearnos en MySQL mediante mysql -u root -p sin necesidad de escribir la ruta al directorio.

Mensaje de bienvenida de MySQL en la consola de Windows
MySQL desde la línea de comandos en Windows (la otra forma de hacerlo)
Por kcmr, el 1 de agosto de 2009 en Cajón de sastre, Personal
Etiquetas: ie
Mensaje de error obtenido durante la instalación de Internet Explorer 8 en Windows Vista (completamente original): “Internet Explorer 8 no es compatible con este sistema operativo.”

Captura del mensaje de error
Todavía estoy conmocionada.
Por kcmr, el 15 de febrero de 2009 en CSS, Cajón de sastre, Javascript
Etiquetas: fuentes, Javascript, tipografía
He encontrado este script para detectar si una fuente está disponible en un determinado navegador, que nos puede sacar de más de un apuro, por ejemplo, cuando decidimos correr el riesgo de usar Arial Narrow como fuente “casi de sistema”.
En la web no dejan claro el modo de uso. Para detectar una fuente en concreto, en este caso la Arial Narrow, se podría usar el siguiente código añadido al script:
function testFont(){
var inst = new Detector();
if(!(inst.test('Arial Narrow')[3])) // si la fuente no está disponible...
{
// añadimos una clase al body
document.body.className = 'nonarrow';
}
}
En la CSS tendríamos que añadir las reglas alternativas para los navegadores que no tienen la fuente disponible:
#menu{font-family: "Arial Narrow", arial, tahoma, helvetica, sans-serif; font-size: 1.3em;}
body.nonarrow #menu{font-size: 1.2em; word-spacing: -1px;} /* arréglelo como pueda */
Para los que usen jQuery acabo de descubrir otra solución basada sólo en Javascript.
Por kcmr, el 8 de febrero de 2009 en Accesibilidad, Cajón de sastre, HTML
Etiquetas: Accesibilidad, curiosidades
Si no teníamos suficiente con el típico debate sobre usar uno o varios encabezados de primer nivel, ahora tenemos otro para la colección: ¿H1 para el título principal de la página o para el logo del sitio?
La cosa llega al extremo de tener su propia web, en la que podemos ver los argumentos y votos dados a través de Twitter (me temo que nunca participaré.)
De momento va ganando la opinión de usar H1 para el título principal de la página. Yo comienzo a pensar que da un poco igual mientras se hayan hecho otras cosas bien, como usar un título (elemento <title>) descriptivo y una jerarquía de encabezados con sentido.
Por kcmr, el 3 de febrero de 2009 en Cajón de sastre, Javascript, Prototype
Etiquetas: framework javascript, Javascript, Prototype
Supongamos que tenemos las típicas capas emergentes que aparecen al lado de un enlace o icono de ayuda al clicarlo.

Ejemplo de capa emergente que aparece al hacer click sobre un icono de ayuda
Uno de nuestros objetivos es que estas capas siempre aparezcan en el área visible de la ventana del navegador, por lo que, según la posición del enlace que las muestra (más o menos cercano al final de la ventana), deberemos calcular su posición para evitar que puedan aparecer cortadas.

Ejemplo de capa cortada por la ventana del navegador
La librería Prototype nos ofrece unos cuantos métodos para que esta tarea sea más fácil, pero antes de darle demasiadas vueltas (yo por lo menos se las di…), lo mejor es hacerse un esquema.

Con estos datos ya tenemos todo lo que necesitamos para saber si la capa emergente podrá mostrarse parcialmente fuera del área visible de la ventana del navegador. Paso a paso…
Una vez que sabemos cuándo va a aparecer cortada la capa emergente, podemos evitarlo modificando su posición top respecto al documento de la siguiente manera:
Posición top de la capa = altura área visible del navegador + altura del espacio no visible por encima del área visible – altura de la capa.
El código Javascript encargado de hacer todo esto sería:
// posicionTop se ha obtenido previamente mediante element.cumulativeOffset()[1]
// capa hace referencia a la capa emergente (element)
posicionarCapaEnAreaVisible: function(posicionTop, capa){
var posicionRespectoViewport = posicionTop - document.viewport.getScrollOffsets()[1] + capa.offsetHeight;
if(posicionRespectoViewport > document.viewport.getDimensions().height){
posicionTop = document.viewport.getDimensions().height + document.viewport.getScrollOffsets()[1] - capa.offsetHeight;
}
return posicionTop;
}
Supongo que habrá formas más sencillas de hacer lo mismo, y para quien lo quiera “listo para llevar”, siempre le puede echar un vistazo a las capas emergentes y tooltips personalizables de Prototip.
Por kcmr, el 22 de enero de 2009 en Cajón de sastre, Personal
Aun en el banquillo de los acusados es siempre interesante oír hablar de uno mismo. Durante los alegatos del Procurador y del abogado puedo decir que se habló mucho de mí y quizá más de mí que de mi crimen. ¿Eran muy diferentes, por otra parte, esos alegatos? El abogado levantaba los brazos y defendía mi culpabilidad, pero con excusas. El Procurador tendía las manos y denunciaba mi culpabilidad, pero sin excusas. Una cosa, empero, me molestaba vagamente. Pese a mis preocupaciones estaba a veces tentado de intervenir y el abogado me decía entonces: «Cállese, conviene más para la defensa.» En cierto modo parecían tratar el asunto prescindiendo de mí. Todo se desarrollaba sin mi intervención. Mi suerte se decidía sin pedirme la opinión. De vez en cuando sentía deseos de interrumpir a todos y decir: «Pero, al fin y al caso, ¿quién es el acusado? Es importante ser el acusado. Y yo tengo algo que decir.» Pero pensándolo bien no tenía nada que decir. Por otra parte, debo reconocer que el interés que uno encuentra en atraer la atención de la gente no dura mucho. Por ejemplo, el alegato del Procurador me fatigó muy pronto. Sólo me llamaron la atención o despertaron mi interés fragmentos, gestos o tiradas enteras, pero separadas del conjunto.
Si he comprendido bien, el fondo de su pensamiento es que yo había premeditado el crimen. Por lo menos, trató de demostrarlo. Como él mismo decía: «Lo probaré, señores, y lo probaré doblemente. Bajo la deslumbrante claridad de los hechos, en primer término, y en seguida, en la oscura iluminación que me proporcionará la psicología de esta alma criminal.» Resumió los hechos a partir de la muerte de mamá. Recordó mi insensibilidad, mi ignorancia sobre la edad de mamá, el baño del día siguiente con una mujer, el cine, Fernandel, y, por fin, el retorno con María. Necesité tiempo para comprenderle en ese momento porque decía «su amante» y para mí ella era María. Después se refirió a la historia de Raimundo. Me pareció que su manera de ver los hechos no carecía de claridad. Lo que decía era plausible. De acuerdo con Raimundo yo había escrito la carta que debía atraer a la amante y entregarla a los malos tratos de un hombre de «dudosa moralidad.» Yo había provocado en la playa a los adversarios de Raimundo. Este había resultado herido. Yo le había pedido el revólver. Había vuelto sólo para utilizarlo. Había abatido al árabe, tal como lo tenía proyectado. Había disparado una vez. Había esperado. Y «para estar seguro de que el trabajo estaba bien hecho», había disparado aún cuatro balas, serenamente, con el blanco asegurado, de una manera, en cierto modo, premeditada.
«Y bien, señores», dijo el Abogado General: «Acabo de reconstruir delante de ustedes el hilo de acontecimientos que condujo a este hombre a matar con pleno conocimiento de causa. Insisto en esto», dijo, «pues no se trata de un asesinato común, de un acto irreflexivo que ustedes podrían considerar atenuado por las circunstancias. Este hombre, señores, este hombre es inteligente. Ustedes le han oído, ¿no es cierto? Sabe contestar. Conoce el valor de las palabras. Y no es posible decir que ha actuado sin darse cuenta de lo que hacía».
Yo escuchaba y oía que se me juzgaba inteligente. Pero no comprendía bien cómo las cualidades de un hombre común podían convertirse en cargos aplastantes contra un culpable. Por lo menos, era esto lo que me chocaba y no escuché más al Procurador hasta el momento en que le oí decir: « ¿Acaso ha demostrado por lo menos arrepentimiento? Jamás, señores. Ni una sola vez en el curso de la instrucción este hombre ha parecido conmovido por su abominable crimen.» En ese momento se volvió hacia mí, me señaló con el dedo, y continuó abrumándome sin que pudiera comprender bien por qué. Sin duda no podía dejar de reconocer que tenía razón. No lamentaba mucho mi acto. Pero tanto encarnizamiento me asombraba. Hubiese querido tratar de explicarle cordialmente, casi con cariño, que nunca había podido sentir verdadero pesar por cosa alguna. Estaba absorbido siempre por lo que iba a suceder, por hoy o por mañana. Pero, naturalmente, en el estado en que se me había puesto, no podía hablar a nadie en este tono. No tenía derecho de mostrarme afectuoso, ni de tener buena voluntad.
Comentarios cerrados
Por kcmr, el 2 de noviembre de 2008 en Buenas ideas, Cajón de sastre, Utilidades
Etiquetas: CMS, gestor contenidos
¿Alguna vez te ha tocado hacer una web completamente estática para el conocido del amigo del primo de…? No es raro hacer una web muy pequeña, lo que antes se solía llamar un site presencial, para la que el “cliente” desea poder gestionar él mismo el contenido. En estos casos, usar un gestor de contenido suele ser un poco desproporcionado (“matar moscas a cañonazos”) y puede causar más problemas que soluciones. Incluso es posible que la web esté alojada en un servidor sin soporte para PHP u otros lenguajes de programación.
Hace poco encontré algo que me pareció una gran idea y la solución perfecta para estos casos. Se trata de CushyCMS. Un sistema de gestión del contenido que no requiere la instalación de ningún CMS. ¿Cómo? Simplemente proporcionamos los datos de acceso FTP al servidor y añadimos una clase a cada elemento de la página que queramos que sea editable, permitiendo así la modificación del contenido mediante un editor WYSIWYG. En el vídeo que aparece en la web de CushyCMS se puede ver claramente su funcionamiento.
Desde luego que este sistema tiene muchas limitaciones y por ejemplo, para poder editar una página, esta tiene que existir, es decir, no permite la creación de nuevas páginas, sólo su edición. Aun así, su sencillísimo uso, tanto para el desarrollador como para el editor, hace que sea una opción muy a tener en cuenta a la hora de gestionar el contenido de sitios pequeños.
Por kcmr, el 16 de agosto de 2008 en Cajón de sastre, Navegadores, Programas
Etiquetas: curiosidades, Navegadores
En el título de este post aparece Internet Explorer como una forma de llamar la atención. La verdad, es que la mayoría de los navegadores modernos, y no sólo Explorer, se identifican como Mozilla, lo que unicamente quiere decir que son posteriores a 1994.
Para saber el porqué de esta identificación, hay que remontarse a los tiempos en que los navegadores existentes en el mercado eran Mosaic y Netscape. En aquel momento Netscape era el más avanzado de los dos e incorporaba novedades como la etiqueta <center> o las cookies.