Buenas prácticas para desarrollo web multinavegador

El día 16 de Diciembre de 2010, se celebró el REMIX 2010 en el Ilustre Colegio de Médicos de Madrid.

Alejandro Hidalgo realizó una sesión sobre buenas prácticas en el desarrollo de aplicaciones web multinavegador. Los principales problemas y los mejores consejos para no que nuestro código se adapte con facilidad a los nuevos navegadores y no tengamos sustos de última hora.

Y es que estamos en un mercado con muchos navegadores, con muchas versiones diferentes y con frecuentes actualizaciones. Durante esta sesión aprendimos a tomar las mejores decisiones para crear sitios web que funcionen de la misma forma en todos los navegadores.

Entre las técnicas que vimos durante la sesión se encuentran, la detección de capacidades en lugar de navegadores, utilización de Frameworks como Jquery y Modernizr, buenas prácticas en HTML y CSS, y muchas más.

Recordad:

- No os dejéis llevar por el corazón y pensar que vuestra web será visualizada por muchos navegadores. No os baséis sólo en vuestro favorito, recordad que programáis para mucha gente.

- Intentad basaros en los estándares para que vuestro código sea compatible en todos los navegadores.

- Intentad programar pensando en los últimos navegadores, y solucionar los posibles fallos en navegadores antiguos, con detección de capacidades.

- No os preocupéis por el DÓNDE sino por el POR QUÉ. No utilicéis detección por navegador, en vez de eso es recomendable usar detección por capacidades.

Además Alejandro mostró como Internet Explorer 9 hace más fácil crear sitios Web utilizando HTML interoperable, CSS y JavaScript.

URLs útiles:

http://ie.microsoft.com/testdrive/Default.html

http://msdn.com/ie

http://api.jquery.com/jQuery.browser/

http://www.modernizr.com/

El código fuente lo podéis descargar desde aquí:

Buenas prácticas para construir webs multinavegador.pptx

RemixDemo.zip

Aunque el proyecto que se encuentra en RemixDemo.zip sea de Visual Studio 2010, no os preocupéis sino tenéis Visual Studio 2010. Podéis abrir los ficheros HTML directamente para ver el código. En la carpeta js están las librerías para jQuery y Modernizr.

Los ficheros demo son:

· Index1.html – Ejemplo de Detección de navegador con fallos en IE9 y Firefox 3.5+.

· Index2.html – Ejemplo de Detección de capacidades sin fallos en IE9 y Firefox 3.5+.

· Ejemplo1.htm – Ejemplo de Detección de navegador donde IE9 utiliza attachEvent por error.

· Ejemplo2.htm – Ejemplo de Detección de capacidades donde IE9 utiliza correctamente el estándar addEventListener.

· Ie9.htm – Ejemplo de Detección de capacidades para el Pinned Mode de IE9.

Saludos y espero que este material os resulte útil.

Comparte este post:

Comentarios

# zulo800 said:

Los links de descarga del material están mal, no permiten la descarga.

Friday, April 1, 2011 10:45 AM
# zulo800 said:

Falsa alarma, era un error en la conexión.

Friday, April 1, 2011 10:48 AM