El futuro del diseño web – web 2.0

Buceando por la red he encontrado esta presentación de Elliot Jay Stocks, procedente de una ponencia titulada “Destroy The Web 2.0 Look” que dió Elliot en el evento “Future of web design” en Nueva York. Ofrece una visión crítica y divertida sobre todo este fenómeno de la web 2.0 .

Desde un principio yo lo entendí como un concepto, una evolución en la forma de desarrollar aplicaciones web, que no tenía tanto que ver con el diseño, como con la limpieza de código y diseño, la orientación a servicios web, la accesibilidad, cumplir con los estándares w3c, etc., el auge de las redes sociales; Posteriormente llegue a pensar en que quizá estaba equivocado y que la web 2.0 se refería fundamentalmente a una revolución estética… Por ejemplo:

Aquí o aquí

Parece como si nadie fuese capaz de definir que es o en que consiste la web 2.0. La presentación de Elliot creo que arroja un poco de luz sobre esto, merece la pena dedicarle un minuto:

| View | Upload your own

Hack para que IE6 muestre bien las imágenes PNG

Un problema que se encuentra uno a veces es utilizar imagenes PNG (Protable Network Graphics) en tus diseños web, ya que no son totalmente soportados por navegadores más antíguos como Internet Explorer 6x. Las ventajas de utilizar PNG en lugar de GIF son varias. En este enlace se explica bastante bien y de manera resumida, este punto: http://www.w3.org/QA/Tips/png-gif

Por tanto, mirando al futuro y con la intención de hacer aplicaciones web de calidad, yo sólo uso PNG cuando quiero mostrar transperencias.

Existe un hack para hacer que Internet Explorer 6x, trate de manera adecuada este formato gráfico. Básicamente consiste en jugar con la característica de Internet Explorer de ser capaz de leer comentarios condicionales del tipo

<!--[If expression]> HTML <![endif]-->

Otros navegadores interpretarán esto como un comentario, por tanto con eso vamos a jugar. Este es el código que os propongo para tratar un PNG de manera diferente en función del navegador que lo visualiza:

Si el navegador es anterior a IE7, utilizamos un atributo de estilo sólo disponible para IE para mostrar la transparencia:

<!–[if lt IE 7]>

<DIV ID=”oDiv” STYLE=”position:relative; height:120px; width:316px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=’/imagenes/logo.png’, sizingMethod=’scale’);” >
</DIV>

<![endif]–>

Si es IE 7 o superior, mostramos la imagen normalmente, ya que éste tiene soporte para PNG:
<!–[if !lt IE 7]>

<img src=”imagenes/logo.png” alt=”Logo” height=”120″ width=”316″/>

<![endif]–>

El problema viene aquí. La forma de ocultar comentarios condicionales a IE que sea leído por otros navegadores es esta:
<!–[if !IE]>–>
<img src=”imagenes/logo.png” alt=”Logo” height=”120″ width=”316″/>

<!–<![endif]–>

Este último truco lo obtuve de Roger Johansson. Gracias Roger por el hack.