Internet Explorer detiene su caída

Después de varios meses de perder participación en el mercado de los navegadores Internet Explorer recuperó medio punto durante el mes de junio. No necesariamente es una tendencia porque pasa de vez en vez. Microsoft cree que este crecimiento se debe a la campaña publicitaria que empezó hace algunas semanas y enfatiza las características nuevas de IE8, sobre todo las de seguridad y velocidad.

IE6 en su funeral

¿Los funerales para IE6 habrán sido anticipados? Foto de CarlosWes vía Flickr.

Esto estaría muy bien porque, dentro de lo que cabe, IE8 es buen navegador. Es mucho menos inseguro que versiones anteriores y se compara muy bien con Firefox y Chrome en este sentido. También sigue CSS 2 muy conforme al estándar, lo cual es bastante bueno para quienes desarrollamos sitios.

Las malas noticias son que Internet Explorer 6 también ha detenido su caída e incluso ganó 0.01%. Aunque esto puede ser un error de medición de todos modos no augura nada bueno. Su participación es algo así del 17%, lo cual sigue siendo significativo y quiere decir que debemos seguir tomándolo en cuenta, junto con sus idiosincracias para mostrar páginas.

Lo malo es que parece que todos los que iban a abandonar IE6 ya lo abandonaron, los que quedan van a seguir con esa versión para largo. Son gente que trabaja en oficinas de gobierno o corporativos que necesitan mantener compatibilidad con sistemas propietarios, organizaciones o personas que no tienen dinero para actualizar sus equipos, o gente que tiene una versión pirateada de Windows XP y no piensa cambiarla o actualizarse por mucho tiempo a pesar de que la instalación de IE8 no requiere certificación de autenticidad y el muy sonado caso de Google y la brecha de seguridad en IE6. Pero, bueno, hay gente que nunca se va a enterar.

Más que nunca es necesario mantener una filosofía de mejoramiento progresivo cuando desarrolles un sitio. De este modo puedes tener una certeza razonable que el sitio se verá bien en navegadores viejos y mucho mejor en los nuevos y así no perder ningún visitante.

La iPad y el diseño web

Steve Jobs llamó a la nueva iPad “el aparato definitivo para navegar en la web”, algo así. Claro, está por verse que pasará pero lo más seguro es que la iPad se venda muy bien sobre todo en un segmento del mercado más o menos afluente y que de pronto se encontrará con que tiene en sus manos una nueva manera de acceder a la información de la red: desde cursos y videos de gatitos en Youtube, blogs, foros y aplicaciones en línea.

Todo esto tendrá un impacto en los diseñadores y desarrolladores de sitios. Aunque el iPad es un aparato muy flexible con una resolución generosa para un dispositivo portátil, no deja de ser más pequeña que un monitor normal en estos días. Además que se puede voltear para cambiar la orientación.

Por lo que hemos visto en el iPhone esto no será gran limitante pero de todos modos querrás hacer tu sitio adaptable a las diferentes resoluciones del iPad. Por ejemplo, aunque es posible que el iPad haga un zoom automático para meter la página en su pantalla conservando todas las proporciones, tal vez no quieras conservar las proporciones y sea más importante mantener un área con cierto ancho.

O tal vez quieras hacer ciertos elementos y contenido más prominentes en la pantalla del iPad de lo que son en una pantalla de escritorio. Esto implica diseños líquidos y flexibles, el diseñador tendrá que pensar en términos de distintas resoluciones y orientaciones. Es algo que algunos hacían hace un par de años pero con las nuevas funcionalidades de zoom se dejó de hacer. Ahora va a rescatarse.

Afortunadamente el iPad incluye un gran navegador con soporte para HTML5, CSS3 y JavaScript por lo que hacer estas cosas no representará gran dificultad técnica. De hecho, si eres de los que sigue las mejores prácticas de desarrollo web probablemente no tengas que hacer absolutamente nada.

Lo más complicado será cambiar la mentalidad del diseñador, sobre todo aquellos que no entienden bien el medio en que se están desenvolviendo. En más apuros estarán los diseñadores que no saben hacer sitios flexibles o que no se molestan en aprender html (esa cosa que sale cuando le aprietas en vista de código en el Dreamweaver). Si sus clientes se comienzan a dar cuenta que su sitio no se ve bien en el iPad (a ver si friegan igual que como cuando no se ve en IE6) muchos van a tener que ponerse al día de manera acelerada.

Más color de hormiga la tendrán los flasheros. Por flashero no me refiero a todos los desarrolladores de flash, sino nada más a los que todo lo hacen con flash sin consideración por la accesibilidad y usabilidad del sitio.

El iPad, hasta donde sabemos ahora, no soportará Flash. Así que si has hecho un sitio que sea puro Flash o que tenga elementos importantes, como la navegación, hecha en Flash, no se verá nada o será inutilizable para quienes tengan un iPad.

A lo mejor no te importa mucho, pero tus clientes van a estar perdiendo clientes y visitantes, así que no les va a agradar (ok, a los que se den cuenta), y finalmente te va a repercutir.

En las filas de Adobe no están nada contentos y culpan a Apple de la falta de soporte para Flash. No dudo que tengan parte de razón, sobre todo cuando señalan que el iPad no puede ser el dispositivo definitivo para navegar por la red si no soporta Flash.

Para bien o para mal Flash es parte importante de la red y pasará mucho tiempo antes que HTML5 alcance una presencia suficiente para desbancarlo (y que se desarrolle un IDE con el que los diseñadores puedan trabajar de un modo parecido a que lo hacen en Flash).

Adobe dice que no hay por que temer, la versión CS5 te permitirá crear una aplicación lista para iPhone simplemente haciendo click en “Save As…”, pero una aplicación no es un sitio web y habría que ver que tan bien se implementa esta característica.

Por lo pronto los fans de Flash están haciendo trinchera, pero si el iPad es tan exitoso como el iPod a mí me parece que no les quedará otra que admitir derrota y aprender estándares si no quieren ser arrollados por la Appleanadora.

El diseñador británico Andy Clarke está de acuerdo conmigo, por lo menos en la parte sobre el diseño líquido.

Video con HTML5

De hace mucho tiempo una de las cosas más latosas de hacer en la web ha sido la inclusión de video en una página. HTML 4 tiene una etiqueta para incluir elementos de multimedios: <object> que gracias a la estúpida implementación de Internet Explorer casi siempre tenemos que usarla junto con el obsoleto <embed> para que funcione bien.

Hasta ahora la reproducción de video ha dependido de que el usuario tenga un aditamento (plug-in) instalado en su navegador con la consecuente pérdida de desempeño y riesgos de seguridad. Además de tener que ir a otro sitio a instalarlo antes de poder ver el video.

El reproductor más utilizado es Flash, propiedad de Adobe que se puede decir que son los dueños del pandero cuando se trata de producir video en internet.

HTML5 introduce una nueva etiqueta para video que se llama ¡<video>! y que no depende de un plug-in. Peero sí depende de un decodificadorr.

La pelea grande está entre el decodificador patentado y propiedad de Apple llamado H.264 y el libre y exótico (por poco común) Ogg Theora. El primero es apoyado por Safari y Chrome (Google le pasa una lana a Apple para poder usarlo). Los otros navegadores grandes, Firefox y Opera, apuestan por el Ogg Theora porque no tienen que pagar nada para usarlo y tampoco los creadores de contenido tendrán que pagar nada.

No me acuerdo cual es el que apoya Internet Explorer pero como seguramente no van a introducir la etiqueta sino hasta el 2020 pues no importa. Y cuando lo hagan seguro la van a romper. Espero equivocarme, pero no me extrañaría mucho.

El caso es que hace unos días Youtube anunció que servirá páginas HTML5 con la etiqueta de video pero el formato H.264, seguido al poco tiempo por Vimeo y otros servicios. Esto deja fuera de la jugada a Firefox y Opera que tendrán que pagar el precio de entrada a Apple, formar alianzas con otros servicios, o arriesgarse a quedarse atrás en la competencia.

Aunque H.264 es un formato más avanzado, compacto y rápido que Ogg Theora, creo que no hay que perder de vista lo que esto puede significar para el futuro de los navegadores. De acuerdo, hasta ahora hemos dependido de otro formato propietario, el de Adobe, pero todos los navegadores dependían del mismo y necesitaban el plugin. Ahora, hay unos que tienen ventaja sobre los demás.

¿Contraatacarán Firefox y Opera o se rendirán? ¿Liberará Apple su formato? ¿Dirá algo el WHATWG? ¿Soportará Youtube Ogg Theora? No se pierda el próximo emocionante capítulo cuando salga.

En Bitelia también están tratando el tema: ¿Por qué la versión en HTML5 de Youtube no funciona en Firefox?

¿Qué harías si no tuvieras que soportar a Internet Explorer?

Esta pregunta se la hizo un desarrollador hace poco en Twitter, obviamente mi respuesta es “lo mismo, para eso está el mejoramiento progresivo”.

Parece que a mucha gente no le queda muy claro lo que se ha explicado antes en este augusto órgano blogueril: no es necesario olvidarse o apartarse de navegadores viejos o limitados cuando desarrollas un sitio.

A pesar de que algunos desarrolladores conocen el término “mejoramiento progresvio” no les queda muy clara la idea. Mejoramiento progresivo no es desarrollar para el mejor navegador, no es un ideal, una aspiración o una filosofía.

Mejoramiento progresivo es una técnica, una mejor práctica, para darle a cada usuario de un sitio la mejor experiencia posible de acuerdo a las capacidades de su navegador.

Lo voy a repetir en negritas: mejoramiento progresivo es una técnica para darle a cada usuario de un sitio la mejor experiencia posible de acuerdo a las capacidades de su navegador. Y debería añadir que de su dispositivo de navegación también.

¿Quedó claro? ¿No? Bueno, aquí les va: Cada navegador tiene sus habilidades y carencias. Aunque se supone que deberían seguir los lineamientos de estandarización del W3C la mayoría no lo hace. Así es, la mayoría, ni IE, ni Firefox, ni Safari, siguen los lineamientos del W3C. Se acercan, a veces más a veces menos, pero por razones técnicas no es posible para todas las versiones implementar todos los lineamientos del CSS2 y menos de CSS3 que marca el W3C. Y no, no salgan con mamadas del Acid Test, esa es una prueba artificial, no porque el navegador pase el Acid Test significa necesariamente que cumple con el estándar.

Así que hay que establecer compromisos a la hora de desarrollar nuestro sitio. Estos tendrán que ver, entre otras cosas, con las limitaciones de cada navegador. Por ejemplo, Safari reconoce una buena cantidad de atributos de CSS3 que a Firefox ni le pasan por la cabeza, pero éste interpreta algunos que Opera no entiende. Pero para complicar las cosas Opera también interpreta algunas cosas mejor pero diferente a Firefox y Safari.

Lo que es más, el gran problema de Internet Explorer, que su modelo de cajas es diferente a lo que marca el W3C, tiene más sentido lógico que el del estándar. En el modelo estandarizado el ancho del margen, que va por fuera de la caja, se añade al ancho total de la caja como si estuviera en el interior. En IE, el margen se no afecta al ancho de la caja, tal como el tamaño de una caja en la vida real no cambia con lo lejos o cerca que esté de otra caja.

Sin embargo muchos desarrolladores, quienes de ahora en adelante serán designados con el mote de nenitas quejicas, siguen quejándose cual nenitas (¿ven?) de que Internet Explorer no los deja hacer lo que quieren.

¡Pamplinas! Los diseñadores y desarrolladores pueden hacer lo que quieran con un sitio siempre y cuando sepan usar las técnicas de mejoramiento progresivo. El  mayor truco consiste en crear una distribución y estilos lo más sencillos posibles para servirlos a navegadores antiguos o de texto. ¿Cómo saber si eres una nena quejica? Fácil ¿Pruebas tus sitios en Lynx? ¿No? Entonces eres una nena quejica.

Después de esto usas una hoja de estilos separados (servida mediante un hack, sí, pero es un hack bastante seguro) para navegadores modernos. Aquí le puedes meter todo lo que quieras de CSS2 y CSS3, los navegadores modernos ignorarán lo que no conozcan en vez de tratar de interpretarlo.

La otra mitad del truco está en usar javascript para cargar estilos dinámicamente, no haciendo “sniffing” sino checando cosas como el ancho de la ventana y probando las capacidades del motor de dibujo del navegador. De esta manera los dispositivos menos capaces, digamos un celular de hace cinco años, recibirán una versión sencilla del sitio, mientras que los más modernos podrán desplegar todo el sitio a lo ancho que les permita el monitor y con la vistosidad que sea capaz su motor de dibujo.

¿Qué hacer con navegadores que creen poder hacer las cosas bien pero que en realidad las hacen mal, o sea, IE6? Afortunadamente, y esto es uno de los más grandes aciertos de Microsoft, podemos usar comentarios condicionales no nada más para servir ciertas hojas de estilos a IE6, sino también para ocultárselos.

De este modo, nuestra hoja de estilos avanzada con el CSS3, png semitransparentes, elementos posicionados de manera absoluta, o flotados, IE6 no podrá ni verla, menos interpretarla. Lo va a hacer mal, así que para que le hacemos pasar vergüenzas. En vez de eso le damos otra hoja de estilos, que puede ser más sencilla o similar pero que IE6 pueda interpretar correctamente.

¿Se van a ver todos los sitios iguales? No. Pero para ahora ya sabemos que no es necesario que se vean igual. ¿Van a funcionar igual? No. En algunos el menú quedará en cierta posición, algunos tendrán más ayudas que otros. Tal vez en Firefox 3 usemos Ajax para cierta funcionalidad, pero la misma estará desactivada si accedes desde un celular con Windows Mobile 5.

¿Podrán todos los visitantes ver nuestro sitio? Sí ¿Podrán todos los visitantes navegar por nuestro sitio? Sí ¿Podrán todos los visitantes responder a nuestro llamado de acción? Sí. ¡Eso es lo que es importante! No si tal elemento tiene tal o cual color, o tal o cual tipografía. Lo siento mucho, diseñadores gráficos, pero lo importante es que los usuarios puedan acceder y usar el sitio.

La decisión es tuya: seguir siendo una nena quejica llorando porque tienes que darle soporte a IE6, o aprender a hacer sitios como se debe y darle rienda suelta a tu creatividad sin olvidar lo que verdaderamente es importante en cada sitio.