En la imagen se ve un área de contacto en donde  se busca salir del esquema usual de formularios, rompiendo el orden y la importancia del mismo, ya que es gigante (ocupa toda el área del navegador).

Un detalle interesante es que existen dos páginas web, este diseño inusual (funciona como una presentación) y otra con un diseño tradicional, la idea es alternar entre una y otra para aprovechar la que genera mejor rendimiento.

Comenta

ivanmendoza 2011 - Bajo licencia Creative Commons By-NC-SA.

“IE can’t fade transparent .png’s properly, so that could be causing your problem”
— jQuery IE Fadein and Fadeout Opacity

Visto un Domingo a las 7:32 am.

FML.

Comenta

ivanmendoza 2011 - Bajo licencia Creative Commons By-NC-SA.

Cross browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es valido para cualquier navegador.

Aplica propiedades CSS3 por separado

El problema aparece cuando Internet Explorer (IE) comienza renderizar mal las propiedades de CSS3, un error poco común pero que si esta presente arruina los estilos del sitio web.

La solución fue eliminar las propiedades CSS3 para IE, algo que me quito tiempo porque las propiedades estaban repartidas entre muchas clases en diferentes lugares y la mayoría eran básicamente iguales. Por ejemplo, si quisiéramos un botón con gradiente azul, sombra y esquinas redondeadas usualmente lo haríamos de esta forma

(por demo sólo estoy aplicando estilos CSS en Firefox, por eso coloco “–moz” frente a la propiedad).

La solución y buen practica es usar un selector por cada propiedad CSS3 que desees usar, de esta forma:

¿Por qué?
Porque de esta forma la clase principal permanece valida para todos los navegadores y sí las propiedades CSS3 nos dieran problema las podríamos eliminar (reiniciar) simplemente haciendo esto (en una hoja de estilo adicional específicamente para IE, o el navegador que este dando el problema):

o sí utilizan Turbine (ver más abajo en recursos) podrían excluir esas propiedades de Internet Explorer, de la siguiente forma

Resalte en magenta la propiedad browser. Está funciona gracias a Turbine y la extensión Sniffer. Básicamente dice: “aplica esta clase en todos los navegadores excepto Internet Explorer”. Se puede elegir versión u otros navegadores, pero para ejemplo así esta bien.

En el caso de Internet Explorer y las esquinas redondeadas puedes usar el script DD_roundies sobre la clase conBordesRedondos4px para obtener los mismos resultados.

Recursos para usar CSS3

CSS3 aún no es terreno solido por lo que hay que tener cuidado al usarlo para mantener la compatibilidad, y para eso existen algunos recursos que te facilitan la tarea

• Turbine. Un framework en PHP para desarrollar CSS, acelera el desarrollo y optimiza el resultado final.
• Plugin CSS3: habilita las opciones CSS3 para utilizarlas según el estándar actual mientras que Turbine CSS se encarga de ajustar la sintaxis a cada navegador.  De esta forma sólo escribes una vez la propiedad.

  

• Plugin Sniffer: permite mostrar u ocultar estilos CSS según el navegador que visita la página, mejora su visualización y facilitando el cross-browsing. Recomiendo leer la documentación al respeto.
• Internet Explorer 9 (aún en beta) ya soporta parte del estándar CSS3.
• Pueden encontrar más información en el sitio web de desarrolladores de IE9.
• CSS3.info “todo lo que necesitas saber sobre CSS3”.
• Técnicas para conseguir propiedades CSS3 con jQuery por aNieto2K.
• Consejos para mejorar nuestro cross browsing por aNieto2k.
• Además de un lista sin fin de generadores de estilos CSS3
• CSS3 Generator. Genera código de varias propiedades CSS3 para Firefox, Webkit (Chrome, Safari, etc.) y estándar.
• CSS3 Please. En resumen es una especie de plantilla con estilos CSS3 predefinidos pero que podemos modificar escribiendo nuestros propios valores, por desgracia la apariencia no es muy agradable aunque eso no le quita lo útil.
• CSS3 Gradient Generator. Generador de gradientes utilizando CSS3, la interfaz es gráfica y muy fácil de usar.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

Espero las aprovechen tanto como puedan que lo valen.

“Designing with psychology in mind”

por Joshua Porter. 5 principios de la psicología que pueden ser usados al crear diseño web.

”Metrics-Driven Design”

por Joshua Porter. Una vista profunda al diseño orientado por métricas. ¿sirve? ¿no sirve? Vean la presentación.

A propósito de la presentación, pueden encontrar más información en Metrics-Driven Marketing Strategy, también presentación.

“Bootstrapping – use visualizations to create visualizations”

por Moritz Stefaner. Información en cantidades masivas ¿cómo organizarla? En la siguiente presentación obtendrán un vistazo a las decenas de formas de mostrar información incluyendo algunos tips para hacerlo.

Como debieron notar, dos de las presentaciones son de Joshua Porter, experto en experiencia de usuario (UX), mejor conocido por su blog (y actual nickname) Bokardo que es uno de los blogs recomendados, aunque últimamente actualice poco.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

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).


Un comentario

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

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?

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

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).

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

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

3 comentarios

ivanmendoza 2009 - Bajo licencia Creative Commons By-NC-SA.