Diseño web al 100%: cerca, pero todavia no

No Comments

Con HTML5 y CSS3 cerca las limitaciones en diseño web ya no parecen importar, sin embargo, debemos aceptarlo: Los estándares web, y navegadores, no son capaces de ofrecer una revolución real en diseño web.

Con revolución no me refiero a vídeos codificados en VP8 o H.264 o a funciones drag&drop en mi navegador, que aunque útil no suponen una revolución en lo que a diseño [gráfico] web se refiere. Como diseñador gráfico puedes ver la limitación al diseñar para web versus el diseño para impresión, es decir, tienes un medio potente (Internet, PC, etc.) limitado por estándares (y navegadores) que no deja paso a herramientas de desarrollo adecuadas, como sucede con InDesign para producción editorial.

Actualmente no podemos hablar de textos justificados de la forma adecuada, manejo de perfiles de color (aunque FF y Safari hayan dado el primer paso), manipulación adecuada de kerning, o incluso uso de columnas de texto. Por supuesto existen "parches" javascript o soluciones propietarias de navegadores, pero no se ve demasiado movimiento en el campo de estándares.

Mientras tanto nos queda de consuelo que Safari y Firefox estan envueltos en una guerra de caracteristicas que está dando como resultado avances muy rápidos en este tema, para muestra les recomiendo leer sobre optimizeLegibility, FontDeck y Color Management(FF3).

10 años después: marquee

1 Comment

Twitter - Portada

10 años después una de las webs más populares en Internet aún imita a <marquee>.
¿Te parece si comenzamos a hablar de innovación?

CSS: Corregir la línea punteada fuera de lugar en los enlaces

3 Comments

Este será un tip rápido para corregir la línea punteada fuera de lugar en los enlaces y botones. El error lo he visto en Firefox aunque desconozco si también aparece en otros navegadores

linea-erronea

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

css-problema

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

css-solucion

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

linea-correcta