Desarrollo front-end, estándares web, accesibilidad y más
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 27 de julio de 2009 en Accesibilidad, HTML, Javascript, flash
Etiquetas: Accesibilidad, flash
Es una buena práctica, sobretodo cuando se usan vídeos o animaciones flash que contengan sonido, el dejar la reproducción de la película en manos del usuario en vez de iniciarla automáticamente.
Las veces que esto se cumple se suele hacer colocando un control en la propia película flash, como un icono de Play o similar semitransparente.
El uso exclusivo de este método puede suponer un problema para usuarios de navegadores que no sean Internet Explorer y no utilicen ratón, ya que los flashes no pueden recibir el foco mediante teclado a no ser que se activen previamente con el ratón.
Incluir además unos enlaces en HTML para iniciar o detener la reproducción de Flash supondría una pequeña mejora de accesibilidad para estos usuarios.
Los pasos que hay que seguir para conseguirlo son:
HTML del flash
<object width="155" height="17" id="ejemplo-1" type="application/x-shockwave-flash" data="ejemplo.swf">
<param name="src" value="ejemplo.swf" />
<param name="play" value="false" />
</object>
Controles HTML (lo ideal para una degradación elegante sería pintarlos con Javascript, ya que sólo con Javascript habilitado pueden funcionar)
<ul id="controles-1">
<li><a href="#">Iniciar reproducción</a></li>
<li><a href="#">Pausar reproducción</a></li>
</ul>
Javascript
var control1 = document.getElementById('controles-1').getElementsByTagName('a');
control1[0].onclick = function(){
document.getElementById('ejemplo-1').Play();
return false;
}
control1[1].onclick = function(){
document.getElementById('ejemplo-1').StopPlay();
return false;
}
Demo
HTML del flash
<object width="165" height="48" id="ejemplo-2" type="application/x-shockwave-flash" data="ejemplo-2.swf">
<param name="src" value="ejemplo-2.swf" />
</object>
Javascript
En este caso, para iniciar o detener la animación tendremos que usar los métodos TPlay("ruta_a_linea_tiempo") y TStopPlay("ruta_a_linea_tiempo")
var control2 = document.getElementById('controles-2').getElementsByTagName('a');
control2[0].onclick = function(){
document.getElementById('ejemplo-2').TPlay("_root/mc_barra");
return false;
}
control2[1].onclick = function(){
document.getElementById('ejemplo-2').TStopPlay("_root/mc_barra");
return false;
}
Demo
Existen otros métodos predefinidos útiles para controlar la reproducción de una película Flash, como Rewind() o GotoFrame()
Aprovecho este post para recomendar un par de recursos que pueden sernos de gran utilidad a la hora de mejorar la accesibilidad de vídeo Flash (ya que por la página de recursos no se pasa ni GOOGLE):
Por kcmr, el 27 de julio de 2009 en Wordpress
Etiquetas: Wordpress
Varias veces había intentado sin éxito cambiar el orden de las páginas del menú superior mediante el campo Order en la administración.

Captura del campo Order en la administración de WordPress
Es lo que pasa cuando no se lee el manual de instrucciones…
Para que el valor asignado en este campo tenga efecto, basta con añadir el valor menu_order al parámetro sort_colum de la función wp_list_pages.
Quedaría así:
<?php wp_list_pages('sort_column=menu_order'); ?>
Y ya podemos ordenar la navegación como nos dé la gana.

Antes: navegación ordenada por ID

Ahora: navegación ordenada según el valor del campo Order de la admin
Más información en la documentación de wp_list_pages de WordPress
Por kcmr, el 3 de julio de 2009 en Ubuntu
Este es uno de los problemas que me he encontrado en mi iniciación en Ubuntu (hace cosa de un mes que lo estoy usando): no veía la forma de seleccionar varias opciones en un campo select de un formulario.

Ejemplo de varias opciones no contiguas seleccionadas
No he encontrado nada de información sobre esto en Internet, así que sospecho que puede ser un problema mío causado quizá por alguna combinación de teclas asignada a otra función. De todas formas, por si alguien se ha encontrado con este mismo problema, espero que esto le ayude. Hoy he descubierto por azar que la combinación de teclas para seleccionar varias opciones no contiguas de un campo select es Alt Gr (Alt derecho) + Ctrl + Click. Un poco incómodo para una persona diestra, la verdad.
Si alguien conoce otra forma de hacerlo, bienvenido sea su comentario.
Por kcmr, el 28 de junio de 2009 en Javascript
Etiquetas: Javascript, mootools
Si algo se echaba en falta en Mootools era la capacidad para poder ser usado sin conflicto junto con otras librerías que también hacen uso del dólar $, como permite jQuery con su jQuery.noConflict().
Desde la versión 1.2.3, lanzada este 19 de junio, Mootools ya implementa esta característica que han llamado Dolar Safe Mode.
A partir de ahora, podremos hacer uso de Mootools junto con otras librerías (cosa realmente no muy recomendable) usando document.id como alias para el acceso por ID ($(id)) y document.search para el acceso por selector CSS ($$(selector))
Desde el blog de Mootools nos recomiendan simplemente reemplazar los símbolos $ en los plugins por document.id o bien encapsular el plugin en una función anónima. Como comentaba en Javascript Module Pattern, el uso de funciones anónimas nos permite tener variables privadas. De esta forma, podemos asignar document.id a $ y evitar el reemplazo de todas las coincidencias.
Ejemplo de adaptación de un plugin usando una función anónima:
(function(){
var $ = document.id;
this.X = new Class({
...
});
})();
Más información sobre Dollar Safe Mode en el blog de Mootools.
Por kcmr, el 6 de junio de 2009 en Magento
Etiquetas: CMS, Magento, plataforma de comercio electrónico
Supongamos que tenemos dos grupos de usuarios en Magento, particulares y comercios, y queremos que para los usuarios de tipo comercio aparezca un literal específico delante del precio de los productos, como podría ser “PVP recomendado”.
En Active Codeline nos muestran la forma de obtener el grupo al que pertenece un usuario:
<?php
$roleId = Mage::getSingleton('customer/session')->getCustomerGroupId();
$role = Mage::getSingleton('customer/group')->load($roleId)->getData('customer_group_code');
$role = strtolower($role);
if($role == 'internal') {
echo 'Hello internal...';
}
?>
También nos podemos quedar simplemente con el ID del grupo:
<?php
$roleId = Mage::getSingleton('customer/session')->getCustomerGroupId();
?>
<p>
<?php if($roleId == 4): ?>
PVP recomendado <?php echo $this->getPriceHtml($_product) ?>
<?php else: ?>
<?php echo $this->getPriceHtml($_product) ?>
<?php endif; ?>
</p>
El ID del grupo de clientes se puede ver desde la administración en Clientes > Grupos de clientes.
Por kcmr, el 16 de abril de 2009 en Accesibilidad, Javascript, Usabilidad
Etiquetas: ajax, Javascript, RIA's, Usabilidad
Acabo de descubrir varios script que hacen posible, tanto la navegación “normal” mediante el botón volver del navegador, como el añadir páginas a los favoritos o marcadores en aplicaciones AJAX. Una solución a dos de los grandes problemas de usabilidad que presentan este tipo de aplicaciones.
Dejo cuatro enlaces rápidos:
It solves the typical “Back-Button” and “Ajax Bookmarks” problems for accessible browsing and a better usability in Rich Internet applications.