Mostrando entradas con la etiqueta Código. Mostrar todas las entradas
Mostrando entradas con la etiqueta Código. Mostrar todas las entradas

miércoles, 20 de abril de 2016

Notas_Módulo 4_Importante escribir el código correcto

Comentarios 0


Internet Explorer 6 apareció en agosto de 2001 y resultó el peor navegador de la historia porque cumplía los estándares web como le daba la gana. Esto obligó a miles de desarrolladores web a invertir miles de horas para lograr que un sitio web fuese compatible con IE 6 y con el resto de navegadores que sí que cumplían los estándares.

Las principales causas por las que una página web no se ve igual en todos los navegadores son:
  • Fallos de los navegadores que pueden provocar errores.
  • Problemas de compatibilidad entre los navegadores que provocan diferencias de visulación.
  • Soporte de HTML por 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. 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.
  • Errores en el código HTML.
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.

 

Errores en el código HTML

Se debe comprobar siempre el código HTML de las páginas antes de publicarlas.
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.

Ante algunos errores los navegadores muestran el mismo comportamiento mientras que frente a otros errores hay diferencias importantes.
Este errático comportamientos de los navegadores frente a los errores de una página tiene su origen en el DOM, el Document Object Model. 

El DOM es una recomendación del World Wide Web Consortium, el W3C, el consorcio internacional que produce recomendaciones para la Web.

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos válidos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula.

En DOM, los documentos tienen una estructura lógica que es muy parecida a un árbol; para ser más preciso, es más bien como un "bosque" o una "arboleda", que puede contener más de un árbol. Cada documento contiene cero o un nodo doctype, un nodo de elemento de documento, y cero o más comentarios o instrucciones de tratamiento; el elemento del documento sirve como la raíz del árbol para el documento.

Ejemplo,


















Los rectángulos representan nodos de tipo elemento, mientras que los óvalos representan nodos de tipo texto. La raíz del árbol es la etiqueta <table>, que contiene un sólo hijo con la etiqueta <tbody>, el cual a su vez tiene dos hijos, los cuales a su vez también tienen dos hijos.

Para entender por qué los navegadores se comportan de diferente forma debemos comparar el
DOM que construye cada navegador a partir del código HTML de la página.

Los navegadores construyen un mismo DOM, un mismo árbol, a partir de un código HTML correcto, pero cuando el código contiene errores, cada navegador puede construir un árbol diferente.



Leer más »

viernes, 15 de abril de 2016

Notas_Módulo 4_HTML validación del código

Comentarios 0

Código HTML

HTML es un lenguaje que tiene su vocabulario y su gramática (reglas)
Los errores cometidos en HTML afectan a la visualización de la página, para detectar estos errores debemos hacer uso de la validación del código fuente de una página web.

El lenguaje HTML fue desarrollado por Tim BernersLee en el año 1990 tomando como base SGML.
Desde su nacimiento, el lenguaje HTML ha ido cambiando. Se han añadido y quitado etiquetas
y atributos, y el funcionamiento de algunas etiquetas ha ido cambiando con el paso del tiempo.


Versiones de HTML

A lo largo de los años, desde 1990, se han desarrollado varias versiones. Actualmente las versiones de HTML existentes son,
  • HTML 4.01
  • XHTML 1.0
  • HTML5 
  • HTML5.1 (10/03/16)


DOCTYPE y su valor

Antes de empezar a desarrollar una página web hay que decidir qué versión de HTML se va a utlizar.
Para indicar qué versión se utilizará, hay que usar la etiqueta <!DOCTYPE> al principio del código (lo primero que es registra en la página web). DOCTYPE debe ser la primera línea en tu código HTML.

El valor que se debe usar de DOCTYPE depende de la versión de HTML que se esté utilizando.
En este enlace de W3C, se puede ver una lista de las declaraciones de DOCTYPE recomendadas.

Si se usa la versión HTML4.01 hay que usar,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">

Si se usa la versión XHTML 1.0 hay que usar,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si se usa la versión HTML5 hay que usar,
<!DOCTYPE HTML>

Los tres DOCTYPES (strict/transitional/frameses) que aparecen en la versión de HTML 4.01 y en XHTML 1.0 son variantes que existen dentro de una misma versión Para una nueva página web solo se debe usar la variante estricta. Las otras variantes, la transicional y la de marcos (frameset) son necesarias cuando se realiza la migración de un sitio web con una versión antigua de HTML a una versión moderna y se necesitan conservar ciertas características desaconsejadas.

 

Validación del código fuente

Existen varias herramientas gratuitas disponibles online, aunque también existen otras herramientas más sofisticadas de pago.

Una muy buena es la herramienta oficial que ofrece el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web. Su servicio de validación es muy sencillo de utilizar y permite validar una página web,
  • Introduciendo su URL si la página está publicada en la Web
  • Se puede subir el fichero con el código fuente
  • Se puede copiar directamente el código fuente. 
Otros interesantes son el validador del Web Design Group, y el validator.nu o validator.nu (HTML5)

Si una página web se visualiza de distinta forma según el navegador se debe a que contiene errores, de ahí la importancia de validar el código.

Cuando validamos una página y nos muestra una serie de errores, se debe empezar a solucionarlos por el primero, porque es muy probable que una vez solucionados los primeros, se resuelvan algunos posteriores.


Leer más »