Jakob Nielsen comenta los problemas que genera alinear los elementos de un menú a la derecha.
Realmente interesante. La lectura se realiza de izquierda a derecha, con lo que la alineación a la derecha hace que el seguimiento de los menús sea más dificil para el usuario. Por otra parte, y aplicando lo mismo, recomienda que las palabras más importantes (una o dos) sean las primeras de la línea, par facilitar la comprensión.
Personalmente podríamos plantearnos poner la alineación a la derecha y utilizar sólo una palabra en cada item para simplificar la lectura. Pero la palabra sequiría empezando en la parte izquierda y seguiría siendo molesto de leer.
lunes, 28 de abril de 2008
Mitos y hechos del JPG
Interesantísimo artículo sobre el formáto JPG.
En el mismo se comentan algunas de las creencias generales sobre el formato. Comento algunas de las más interesantes (y puede que añada alguna cosa...).
Abrir, guardar, guardar como...
Abrir un JPG no produce perdidas. Cualquier acción que no implique el guardado de un JPG, no produce perdidas en el mismo.
Guardarlo si. Si lo guardamos repetidas veces en la misma sesión de trabajo, no se acumulan las perdidas. Si lo cerramos y lo abrimos antes de guardarlo si que se acumularán las pérdidas. La opción de Guardar como no es recomendable para renombrar el archivo, puesto que algunos programas recomprimen la imagen. En resumen, el JPG pierde calidad cada vez que es abierto-modificado-guardado.
NUNCA es conveniente utilizar el JPG como fuente original de material gráfico. Es mejor usarlo para obtener visualizaciones del trabajo donde la calidad no sea determinante. Aunque
Porcentaje de compresión y pérdidas
Los niveles de compresión NO son estandar. No se obtienen (mejor dicho, no tienen porqué obtenerse) los mismos resultados en programas distintos aplicando el mismo nivel. Una vez guardado un archivo con un nivel de compresión, se producen perdidas y esas perdidas NO son recuperables a partir del archivo resultado. Es decir, no podemos subir el nivel de calidad abriendo una imagen en JPG y guardándola con otro valor de compresión. Y como ya vimos en otro post, la calidad más alta sigue produciendo pérdidas.
Descarga y representación
Los JPG progresivos NO se descargan antes que los ordinarios. Lo que pasa es que se percibe antes de qué imagen se trata, por el tipo de carga. La representación de JPGs requiere mayor procesado, puesto que hay que decodificarlos. Esto es bastante obvio, si el JPG comprime, luego tendremos que descomprimir...
Cuando usar JPG
Por decirlo de alguna manera que sea sencilla de entender, el JPG es útil, y sus pérdidas aceptables, cuanto mayor número de colores existe en la imagen. Esto es, fotografías e ilustraciones con variaciones grandes de color como degradados y gradientes. Para las imágenes con pocos colores, los textos, los logotipos y similares no es práctico. En esos casos la distorsión puede llegar a perjudicar seriamente al visionado de la imagen.
En el mismo se comentan algunas de las creencias generales sobre el formato. Comento algunas de las más interesantes (y puede que añada alguna cosa...).
Abrir, guardar, guardar como...
Abrir un JPG no produce perdidas. Cualquier acción que no implique el guardado de un JPG, no produce perdidas en el mismo.
Guardarlo si. Si lo guardamos repetidas veces en la misma sesión de trabajo, no se acumulan las perdidas. Si lo cerramos y lo abrimos antes de guardarlo si que se acumularán las pérdidas. La opción de Guardar como no es recomendable para renombrar el archivo, puesto que algunos programas recomprimen la imagen. En resumen, el JPG pierde calidad cada vez que es abierto-modificado-guardado.
NUNCA es conveniente utilizar el JPG como fuente original de material gráfico. Es mejor usarlo para obtener visualizaciones del trabajo donde la calidad no sea determinante. Aunque
Porcentaje de compresión y pérdidas
Los niveles de compresión NO son estandar. No se obtienen (mejor dicho, no tienen porqué obtenerse) los mismos resultados en programas distintos aplicando el mismo nivel. Una vez guardado un archivo con un nivel de compresión, se producen perdidas y esas perdidas NO son recuperables a partir del archivo resultado. Es decir, no podemos subir el nivel de calidad abriendo una imagen en JPG y guardándola con otro valor de compresión. Y como ya vimos en otro post, la calidad más alta sigue produciendo pérdidas.
Descarga y representación
Los JPG progresivos NO se descargan antes que los ordinarios. Lo que pasa es que se percibe antes de qué imagen se trata, por el tipo de carga. La representación de JPGs requiere mayor procesado, puesto que hay que decodificarlos. Esto es bastante obvio, si el JPG comprime, luego tendremos que descomprimir...
Cuando usar JPG
Por decirlo de alguna manera que sea sencilla de entender, el JPG es útil, y sus pérdidas aceptables, cuanto mayor número de colores existe en la imagen. Esto es, fotografías e ilustraciones con variaciones grandes de color como degradados y gradientes. Para las imágenes con pocos colores, los textos, los logotipos y similares no es práctico. En esos casos la distorsión puede llegar a perjudicar seriamente al visionado de la imagen.
domingo, 27 de abril de 2008
Perdidas en el JPG
Todo el mundo (o todo el mundo que se dedica al diseño gráfico) sabe (o debería saber) que el formato JPG es un formato que tiene pérdidas. Lo que no todo el mundo sabe es que es un formato que SIEMPRE tiene pérdidas. Hay quien se piensa que si guardamos un JPG a su calidad máxima nos evitamos las pérdidas al coste de aumentar el tamaño del archivo hasta un punto en el que deja de ser práctico usar el JPG.
Bien, esto es un pequeño experimento que podéis realizar para comprobar que el JPG a máxima calidad tiene pérdidas.
Hacemos una imagen nueva, por ejemplo un cuadrado en el que rellenamos cada una de las mitades con un color. Por un lado tenemos el valor rgb (0,255,0) y por el otro el valor rgb (255,0,0). Es decir, verde y rojo.
Esta imagen es un PNG (sin pérdidas) del archivo que hemos creado. Si lo abrimos con un editor y comprobamos los colores, obtenemos los valores esperados. Ahora bien, si guardamos la misma imagen en formato JPG con la máxima calidad que nos permite el Photoshop, a primera vista no notamos nada raro... bueno. Si que notamos algo raro en el navegador y posiblemente en la vista previa del archivo y en su previsualización en la selección, pero si lo abrimos con el Photoshop parece que está completamente igual al original.
Si utilizamos la varita mágica con tolerancia 0 para ver si existe o no distorsión en la imagen... vemos que no aparece. Cada zona es completamente uniforme y no hay colores "intermedios" entre ellas. Pero no todo es como parece. Si usamos el selector de colores y comprobamos los valores nos llevaremos una sorpresa. Ahora son los valores rgb (0,255,1) y (254,0,0). ¡Pérdidas! Cierto es que son pérdidas asumibles, vamos, que no parece importar demasiado. Pero son pérdidas al fin y al cabo.
En cuanto a la compresión. El JPG ocupa unos 44kb y el PNG unos 52kb. Esto es que el JPG ocupa el 84% de lo que ocupa el PNG. En este caso nos ahorramos 12kb y los colores son uniformes... aunque no los originales. En otros casos habría que mirar que es lo que ocurre. :D
Si revisamos los valores de los colores con el selector de colores veremos que
Bien, esto es un pequeño experimento que podéis realizar para comprobar que el JPG a máxima calidad tiene pérdidas.
Hacemos una imagen nueva, por ejemplo un cuadrado en el que rellenamos cada una de las mitades con un color. Por un lado tenemos el valor rgb (0,255,0) y por el otro el valor rgb (255,0,0). Es decir, verde y rojo.
Esta imagen es un PNG (sin pérdidas) del archivo que hemos creado. Si lo abrimos con un editor y comprobamos los colores, obtenemos los valores esperados. Ahora bien, si guardamos la misma imagen en formato JPG con la máxima calidad que nos permite el Photoshop, a primera vista no notamos nada raro... bueno. Si que notamos algo raro en el navegador y posiblemente en la vista previa del archivo y en su previsualización en la selección, pero si lo abrimos con el Photoshop parece que está completamente igual al original.
Si utilizamos la varita mágica con tolerancia 0 para ver si existe o no distorsión en la imagen... vemos que no aparece. Cada zona es completamente uniforme y no hay colores "intermedios" entre ellas. Pero no todo es como parece. Si usamos el selector de colores y comprobamos los valores nos llevaremos una sorpresa. Ahora son los valores rgb (0,255,1) y (254,0,0). ¡Pérdidas! Cierto es que son pérdidas asumibles, vamos, que no parece importar demasiado. Pero son pérdidas al fin y al cabo.
En cuanto a la compresión. El JPG ocupa unos 44kb y el PNG unos 52kb. Esto es que el JPG ocupa el 84% de lo que ocupa el PNG. En este caso nos ahorramos 12kb y los colores son uniformes... aunque no los originales. En otros casos habría que mirar que es lo que ocurre. :D
Si revisamos los valores de los colores con el selector de colores veremos que
Guardar archivo de hoja de estilos como...
En las últimas semanas he impartido algunas clases en las que hemos realizado algunos ejercicios paso a paso. Y una de las cosas curiosas que, si bien no me quitaba el sueño porque se me olvidaba al acabar la clase, me mosqueaba cada vez que ocurría era el hecho de encontrarse con que el archivo de estilos que acabamos de asociar resulta llamarse "Sin Título.css" en luar del nombre que hemos escrito. El misterio fue resuelto en cuando tuve un ratito y me puse a comprobarlo. El problema viene con esta ventana:
El tema es que si escribimos el nombre del archivo css que queremos crear en la zona verde, automáticamente se actualiza el campo rojo. Pero si realizamos la operación a la inversa no ocurre lo mismo. Con lo que si sólo establecemos el nombre del archivo CSS en la parte superior y hacemos click en "Guardar", nuestro archivo se llamará "Sin título.css".
No se si es un bug del Dreamweaver CS3 propiamente dicho o no, el caso es que ahí queda el aviso. :D
El tema es que si escribimos el nombre del archivo css que queremos crear en la zona verde, automáticamente se actualiza el campo rojo. Pero si realizamos la operación a la inversa no ocurre lo mismo. Con lo que si sólo establecemos el nombre del archivo CSS en la parte superior y hacemos click en "Guardar", nuestro archivo se llamará "Sin título.css".
No se si es un bug del Dreamweaver CS3 propiamente dicho o no, el caso es que ahí queda el aviso. :D
Posicionamiento de menús
Jakob Nielsen, si no me equivoco, comentaba en uno de sus libros que la mayoría de los usuarios esperan encontrarse en las webs unos esquemas bastante concretos en cuanto a la disposición de la información. Un título en la parte superior, un menú (en el lateral izquierdo si es vertical y en la parte superior si es horizontal) y un área principal en la que se introduzcan los contenidos.
Si bien la distribución habitual puede ser alterada en ocasiones concretas para dar un poco más de versatilidad a los diseños, los resultados pueden ser catastróficos.
¿Y a qué viene esto? El motivo principal es una conversación que tuve con uno de mis alumnos de diseño web en la que analizamos una web que su empresa había contratado. Siguiendo unas nociones básicas de usabilidad, se había planteado el layout de la web de forma que se esperaba que la página web se situara siempre en el centro de la pantalla. El problema era que al calcular el alto del área de visibilidad se había planteado partiendo de alguna suposición incorrecta, quien sabe porqué. Si miramos las recomendaciones de Dreamweaver relacionadas con el área visible en la pantalla con, pongamos, una resolución mínima de 800x600 (Si bien se supone que el 80% de los internautas disponen de resoluciones superiores, se sigue recomendando no olvidarse de esta resolución (http://www.w3schools.com/browsers/browsers_stats.asp)) vemos que el tamaño vertical recomendado es de 420 pixels. En este caso alguien había decidido que si 600 era el alto máximo, con 500 y poco bastaría para la correcta visualización. El resultado... uno de los clientes había llamado a la empresa preguntando por los accesos a la web, dado que el menú le desaparecía por la parte inferior de la pantalla.
La verdad es que cualquier persona con dos dedos de frente, ante la falta de menús, se habría planteado la existencia de contenido en la parte oculta inferior de la ventana, sobre todo porque la barra de desplazamiento de la izquierda nos indicaría que se existe más información. Pero en cuanto a diseño y usabilidad NUNCA debemos asumir nada. Sobre todo en lo que se refiere a sitios comerciales. En este caso un cliente había contactado con la empresa para preguntar por los menús desaparecidos... ¿Cuantos clientes o posibles clientes no habrán hecho la llamada?
A 27 de Abril de 2008 la web de la que hablo es esta:
http://www.vicentegandia.com/
Me consta que la empresa está avisada de este comportamiento y de que lo cambiarán. Y por cierto, también quieren deshacerse de la animación de introducción y la "portada". Una mala práctica de la que hablaremos otro día. :D
Anexo: Otra cosa que está fatal en esa web es el enorme globo rojo que aparece sobre la elección de idioma y sobre el que no se puede hacer click. ¡Terrible!
Si bien la distribución habitual puede ser alterada en ocasiones concretas para dar un poco más de versatilidad a los diseños, los resultados pueden ser catastróficos.
¿Y a qué viene esto? El motivo principal es una conversación que tuve con uno de mis alumnos de diseño web en la que analizamos una web que su empresa había contratado. Siguiendo unas nociones básicas de usabilidad, se había planteado el layout de la web de forma que se esperaba que la página web se situara siempre en el centro de la pantalla. El problema era que al calcular el alto del área de visibilidad se había planteado partiendo de alguna suposición incorrecta, quien sabe porqué. Si miramos las recomendaciones de Dreamweaver relacionadas con el área visible en la pantalla con, pongamos, una resolución mínima de 800x600 (Si bien se supone que el 80% de los internautas disponen de resoluciones superiores, se sigue recomendando no olvidarse de esta resolución (http://www.w3schools.com/browsers/browsers_stats.asp)) vemos que el tamaño vertical recomendado es de 420 pixels. En este caso alguien había decidido que si 600 era el alto máximo, con 500 y poco bastaría para la correcta visualización. El resultado... uno de los clientes había llamado a la empresa preguntando por los accesos a la web, dado que el menú le desaparecía por la parte inferior de la pantalla.
La verdad es que cualquier persona con dos dedos de frente, ante la falta de menús, se habría planteado la existencia de contenido en la parte oculta inferior de la ventana, sobre todo porque la barra de desplazamiento de la izquierda nos indicaría que se existe más información. Pero en cuanto a diseño y usabilidad NUNCA debemos asumir nada. Sobre todo en lo que se refiere a sitios comerciales. En este caso un cliente había contactado con la empresa para preguntar por los menús desaparecidos... ¿Cuantos clientes o posibles clientes no habrán hecho la llamada?
A 27 de Abril de 2008 la web de la que hablo es esta:
http://www.vicentegandia.com/
Me consta que la empresa está avisada de este comportamiento y de que lo cambiarán. Y por cierto, también quieren deshacerse de la animación de introducción y la "portada". Una mala práctica de la que hablaremos otro día. :D
Anexo: Otra cosa que está fatal en esa web es el enorme globo rojo que aparece sobre la elección de idioma y sobre el que no se puede hacer click. ¡Terrible!
Suscribirse a:
Entradas (Atom)
Entradas
