4.16 HTML5: ¿Por qué es importante escribir código correcto? (1/3)
Objetivos:
En este vídeo se explican las principales causas por las que una página web no se ve igual en todos los navegadores:
- Fallos de los navegadores.
- Problemas de compatibilidad entre los navegadores.
- Soporte de HTML por los navegadores.
- Errores en el código HTML.
HTML es el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.
HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web.
Hay un momento en la vida de cualquier desarrollador web que se plantea la siguiente duda existencial:
Mi página web se ve bien en todos los navegadores, pero en Internet Explorer 6 se rompe. ¿Por qué?
Aunque hay desarrolladores web que se plantean el mismo problema pero al revés: Mi página web se ve bien en Internet Explorer 6, pero en el resto de navegadores se rompe.
¿Por qué?
Veamos un ejemplo real. Visitemos la página oficial del Colegio de Ingenieros de Caminos, Canales y Puertos de España. No voy a entrar a criticar ni el diseño ni la usabilidad de esta página web, porque podría estar horas y horas. Sólo voy a destacar dos elementos que me producen mucha grima. Tanto en la cabecera como en el pie de página podemos encontrar el aviso “Optimizado para Internet Explorer 6”.
¿Y cuál es el problema? Volvamos a ver como se muestra esta página web, en concreto en el navegador Internet Explorer 8. No es Internet Explorer 6, me deshice de él hace muchos años, pero podemos suponer que más o menos se mostrará igual, ya que ambos son primos hermanos. La página web se ve bien. Toda esta zona vacía desaprovechada se debe a que la página emplea un diseño fijo para 1024 pixels de ancho: no es un error, pero no es el mejor diseño que se puede realizar hoy en día.
Y así es como se muestra en Mozilla Firefox 3.6. Podemos notar que no se muestra igual: el contenido de la página aparece centrado respecto los límites izquierdo y derecho de la ventana del navegador. Eso no es problema, más bien al revés, esto es mucho mejor.
El problema importante es que el menú de navegación principal no está centrado respecto el contenido de la página. Aunque es un problema leve, este es el típico ejemplo de página web que se rompe. Aquí se puede aplicar la frase “Mi página web se ve bien en Internet Explorer 6, pero en el resto de navegadores se rompe”.
¿Cuál es la razón de que se rompa?
No me he puesto a buscar la razón, pero si vemos el código fuente, esta página web no tiene una única etiqueta HTML como indica el estándar del W3C.
Sino que tiene dos.
Tres.
¡Y hasta cuatro etiquetas HTML en la misma página! Lo diré en dos palabras, “im presionante”.
Los ingenieros de caminos, canales y puertos sabrán hacer muy bien los caminos, canales y puertos, pero las páginas web no es lo suyo. Que se las dejen a los verdaderos profesionales. O si se la ha hecho un informático, se la ha metido doblada.
Volviendo al tema de los navegadores, el afirmar que una página web está optimizada para Internet Explorer 6 es un tremendo error.
Internet Explorer 6 apareció en agosto de 2001 y se puede afirmar que hasta ahora ha sido el peor navegador de la historia, ya que cumplía los estándares web como le daba la gana. Ello obligó a miles de desarrolladores web a invertir miles de horas para lograr que un sitio web fuese compatible, por una lado con Internet Explorer 6 y, por otro lado con el resto de navegadores que sí que cumplían los estándares.
Desgraciadamente, todavía hoy, en marzo de 2011, aún podemos encontrar numerosas páginas web donde se muestran estos avisos de “página web optimizada para Internet Explorer”.
Internet Explorer 6 fue tan malo que incluso la propia Microsoft inició en marzo de 2011 la campaña “The Internet Explorer 6 Countdown” para que la gente dejase de usar este navegador. Según Microsoft, en febrero de 2011 el 12% de los usuarios a nivel mundial todavía usaban ese navegador. El objetivo de la campaña es que la gente deje de usar Internet Explorer 6 y así ahorrar horas de trabajo a los desarrolladores web.
Pero bueno, tampoco hay que echarle toda la culpa a Internet Explorer 6, ya que la frase “Mi página web se ve bien en todos los navegadores, pero en Internet Explorer 6 se rompe.” la podemos cambiar a “Mi página web se ve bien en todos los navegadores, pero en XYZ versión n se rompe.”
Vamos a ver las principales cuatro razones por las que una página web se puede visualizar de forma incorrecta en un navegador.
En primer lugar, los navegadores pueden tener fallos y en algunas situaciones pueden cometer errores.
Las diferencias de visualización de una página web también se pueden deber a problemas de compatibilidad entre los navegadores. La especificación de HTML proporciona reglas de cómo se deben interpretar y visualizar los diferentes elementos y atributos del lenguaje, pero en algunos casos existe espacio para la interpretación.
Por otro lado, el soporte para las nuevas etiquetas y atributos no es universal, por lo que puede ser que en algunos casos una página no se vea bien porque la página contiene alguna característica que no admite el navegador.
Por último, las páginas a veces no se ven bien porque existen errores en el código HTML de la página.
De estas cuatro posibles causas, las tres primeras están fuera del control de los desarrolladores web:
- Las dos primeras dependen de los fabricantes de los navegadores, como la empresa Microsoft o la organización Mozilla.
- La tercera depende en parte de los fabricantes, como es el caso de Microsoft que siempre ha tardado muchos años en actualizar sus navegadores y adecuarlos a los nuevos estándares, pero también depende de los usuarios cuando no se actualizan a los nuevos navegadores.
- La última causa depende de los desarrolladores web, de las personas que escriben el código HTML, y es lo que vamos a tratar en este videotutorial.
La especificación del lenguaje HTML establece claramente cómo se tiene que escribir el código HTML. El W3C proporciona un validador que permite comprobar si el código de una página es correcto, es decir, si se ajusta a la especificación de HTML. A pesar de existir herramientas como el validador del W3C, muchos de los desarrolladores web nunca comprueban el código de sus páginas web.
Los navegadores web son programas muy complejos y robustos que están preparados para manejar ciertos errores. Pero cada navegador los maneja de diferente forma, ya que la especificación de HTML no establece cómo se tiene que recuperar un navegador cuando encuentra un error en el código.
Por ejemplo, cuando no se cierra un párrafo, el navegador decide cerrarlo automáticamente cuando empieza un nuevo párrafo, ya que en las normas de HTML, un párrafo no puede contener otro párrafo.
Pero las situaciones de error pueden ser infinitas y pueden ser mucho más complicadas que la anterior. En este ejemplo la etiqueta <b> de negrita no ha sido cerrada. En HTML las etiquetas deben estar correctamente anidadas, así que el sitio correcto para ser cerrada es aquí. ¿Pero se comportan así todos los navegadores?
¿Hay algunos navegadores que cierran la etiqueta <b> en otro punto?
La respuesta a esta y otras preguntas similares la veremos en la próxima parte de este videotutorial, donde veremos cómo una página web sencilla se puede mostrar de diferente forma en diferentes navegadores por existir un pequeño error.
Y con esto finaliza este videotutorial sobre la importancia de escribir código HTML correcto.
Actividad
1
Respecto Internet Explorer 6, ¿qué se afirma en el vídeo?
2
De las posibles causas que hacen que una página web no se visualice correctamente, ¿cuál depende de los desarrolladores web?
No hay comentarios:
Publicar un comentario