Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[1]
Introducción a HTML5

Publicidad

[1.1] el lenguaje HTML

[1.1.1]introducción

A finales de los años 80 se desarrolló el lenguaje de marcas SGML. Al final de esa década Tim Bernes Lee, científico británico que trabajaba en el CERN1, utilizó SGML para definir un nuevo lenguaje de etiquetas que llamó Hypertext Markup Language (lenguaje de marcado de hipertexto) para crear documentos transportables a través de Internet en los que fuera posible el hipertexto.

Se llama hipertexto a la posibilidad de que en un documento determinadas palabras marcadas de forma especial permitan abrir un documento relacionado con ellas; algo a lo que ahora estamos muy acostumbrados, pero que entonces era muy novedoso.

Además de HTML, el equipo de Tim Bernes Lee definió las bases del protocolo http de Internet, encargado de trasportar los documentos HTML y sus recursos asociados. La versión definitiva de http se realizó en el año 1999 por parte del organismo World Wide Web Consortium (W3C).

A pesar de tardar en ser aceptado, HTML fue un éxito rotundo y la causa indudable del éxito de Internet. Hoy en día casi todo en Internet se ve a través de documentos HTML que, popularmente, se denominan páginas web.

Inicialmente estos documentos se veían con ayuda de intérpretes de texto (como el antiguamente famoso Lynx de Unix) que reconocían el código HTML pero que tenían capacidad sólo de colorear el texto especial (como las negritas y cursivas por ejemplo) y remarcaban el hipertexto, sobre el cual la tecla tabulador permitía acceder de forma secuencial a todos los hipervínculos del documento.

Después el software mejoró y aparecieron ya los llamados navegadores con capacidad de interpretar el código HTML de forma más visual y cambiar el tipo de letra, colores, incorporar imágenes, sonido, etc. Es decir, realmente los documentos HTML se convirtieron en páginas web.

Lógicamente desde 1989 hasta nuestros días HTML ha mejorado. Entre sus avances fundamentales:

En la actualidad HTML sigue siendo el lenguaje fundamental de las páginas web, pero ahora Internet es la web; es decir, prácticamente todo en Internet se ve a través de una página web. Por eso hoy en día HTML es la capa superficial bajo la que se agolpan tecnologías muy diversas y muy distintas de HTML.

[1.1.2]historia de HTML

Se resaltan a continuación algunos de los eventos más importantes en la historia de HTML. Se indica el año y lo que ocurrió en él

Una aplicación web, es una aplicación creada usando como base el lenguaje HTML. Por lo tanto, se trata de una aplicación que se ejecuta en un navegador de Internet.

Las aplicaciones web utilizan lenguajes que apoyan la labor de HTML y que son traducibles por parte de los navegadores. Esencialmente las aplicaciones web actuales utilizan:

La transmisión de páginas web (que en definitiva son documentos HTML) se realiza mediante el protocolo http, que es parte de la pila de protocolos TCP/IP. Se trata de un protocolo basado en una comunicación petición-respuesta; de modo que un cliente (también llamado user agent, agente de usuario) realiza una petición de recurso indicando su dirección en Internet. La petición llegará a un servidor http (también llamado servidor web), el cual responde a dicha petición, bien transmitiendo al cliente el recurso solicitado o bien indicando un mensaje de error si el recurso no está disponible.

Los paquetes http que se intercambian entre el cliente y el servidor contienen una cabecera con información de control y luego el cuerpo. Este cuerpo es el código HTML en el caso de una página web, o la imagen, audio, etc. que se está transmitiendo.

En la Ilustración 2, se observa el paquete devuelto por el servidor web cuando recibe una petición http (de tipo GET) a la URL http://jorgesanchez.net. Se indica que la respuesta fue correcta (código 200, OK), la IP del servidor que responde, el tamaño del paquete, la fecha en la que expira, etc. Además se anexa la cabecera de la petición original (request headers) en la que se ve el navegador del usuario que hizo la petición, el lenguaje de su equipo, etc.

Además de la cabecera, el contenido de los paquetes http posee un cuerpo con el contenido del recurso que se solicitaba. Por ejemplo en el caso de haber solicitado una página web, el cuerpo contiene código HTML que el navegador podrá traducir.

El protocolo http sirve para transportar todo tipo de contenidos. De hecho, el código HTML de una página web hace referencia a otros archivos (imágenes, archivos CSS, etc.). Cuando el navegador detecta estas referencias, solicita al servidor web estos recursos. El navegador responderá con nuevos paquetes que contendrán (si está en su mano) el contenido solicitado.

El cliente (normalmente un navegador) será el encargado de mostrar el recurso siempre y cuando el navegador tenga la capacidad de hacerlo, ya que los navegadores pueden mostrar muchos formatos de contenido, pero por supuesto no todos.

Entre los recursos transmitidos por http que un navegador es capaz de reconocer están:

En este apartado se explica brevemente el funcionamiento de una aplicación web compleja. El único propósito es indicar que las aplicaciones web utilizan numerosas tecnologías.

A veces el cliente solicita recursos que deben de ser traducidos por el propio servidor web. Ejemplo de ello son las páginas PHP. Estas páginas contienen código HTML que puede incorporar código en formato PHP. Ese código no debe de ser traducido por los navegadores, por lo que el propio servidor web lo traducirá, normalmente convirtiéndolo a código resultante HTML.

El uso de lenguajes que se traducen en el lado del servidor (invisible para el usuario), se conoce como desarrollo back-end. El código que llega al cliente, visible para el usuario, es el front-end de la aplicación.

Casi todas las aplicaciones web tienen back-end y front-end. Este manual solo se refiere al lado del cliente. Es decir, al front-end.

[1.3] herramientas para crear aplicaciones en HTML

Para escribir código HTML bastaría con un editor de texto plano como el bloc de notas de Windows o vi de Linux/Unix. No obstante la escritura de HTML en este tipo de editores es incómoda ya que no proporcionan ayuda ni aceleran la escritura.

Además, los resultados se deben mostrar en un navegador o, aún mejor, probar en varios navegadores para comprobar problemas de compatibilidad (ya que hay elementos HTML que no son compatibles con todos los navegadores).

Así la lista de navegadores a instalar para probar nuestro código sería: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari y Opera. Por otro lado es interesante probar en dispositivos móviles o bien añadir plugins a nuestros navegadores que simulen la visualización de un móvil.

Para escribir el código lo ideal es trabajar mediante editores de código capaces de entender el lenguaje y colorear de diferente manera las etiquetas HTML para distinguirlas del texto normal y así trabajar mejor y que además incorporen herramientas que faciliten la edición.

Así tenemos las siguientes opciones:

Los programas capaces de traducir el código HTML y producir una salida en pantalla de los mismos son los navegadores (browsers en inglés). Se trata de un software gráfico que se inició con la creación de Mosaic a principios de los 90 y que ha continuado con otros muchos hasta ahora.

El más popular de los navegadores empezó siendo Netscape Navigator; pero a finales de los 90 se habló de una guerra de navegadores entre Internet Explorer de Microsoft y el propio Navigator de Netscape. Poco a poco Explorer (que apareció instalado por defecto en los sistemas Windows de forma gratuita) ganó la batalla. A principios del siglo XXI incluso se dio por zanjada la guerra.

En esos años ya apreció el problema fundamental de la falta de estandarización, ya que el código HTML que entendía Explorer, no era el mismo que entendía Navigator. A veces incluso los diseñadores hacían dos versiones de la misma página.

Con la guerra “supuestamente” terminada, los diseñadores fundamentalmente probaban las páginas web para Explorer. Pero Tras recoger la función Mozilla el código fuente de Navigator, lanzó un nuevo navegador llamado Firefox, comenzando una nueva guerra que se volvió más fuerte al aparecer también el navegador Chrome de Google, o Safari de Apple (sin olvidar al ya veterano Opera). La guerra continua, de hecho las cifras de uso de navegadores en el mundo en el momento de escribir estas líneas es la siguiente6:

Es interesante también acudir a la página de estadísticas de w3schools:
http://www.w3schools.com/browsers/, ya que llevan guardándolas desde el año 2002. Esto permite tener una visión de como ha evolucionado el uso de navegadores.

Aunque, hoy en día, Google Chrome parece el vencedor de esta última guerra de navegadores, lo cierto es que, con tantos tipos de dispositivos que navegan por Internet, no podemos saber qué navegador tienen los usuarios de nuestra página.

Con lo cual el problema sigue estando ahí. Hay diversos navegadores y, por lo tanto, debemos asegurarnos que nuestra página es compatible con ellos (el problema es mayor aún debido a la enorme diversidad de dispositivos capaces de navegar en la actualidad).

Además conviene, más allá de las estadísticas generales, disponer en nuestro sitio web de un analizador de nuestras visitas para conocer realmente nuestra audiencia y adaptar la aplicación web a ella.

[1.4.2]estandarización

Las incompatibilidades existentes en los navegadores han supuesto un problema desde el inicio de la web. La solución pasó por intentar estandarizar el lenguaje. Por ello, el propio Tim Bernes Lee fundó la World Wide Web Consortium (abreviado W3C) como organismo de estandarización del lenguaje HTML ante la industria. Este organismo se encarga de proponer estándares para el lenguaje HTML con la esperanza de que sea aceptado por los fabricantes de navegadores.

Con esta finalidad W3C trabaja con recomendaciones, a las que pone un número. Así ha habido HTML 2, HTML 3, HTML 4, etc. La W3C también se encarga de estandarizar otras tecnologías y lenguajes relacionados con HTML como CSS, JavaScript, SVG o el propio XML.

Las directrices de W3C son seguidas por la mayoría de navegadores aunque no al 100%, lo que sigue generando problemas a los creadores de páginas web. Por si fuera poco, este organismo ha perdido peso al apostar por XHTML, que es un HTML que usa las normas de XML y que ha perdido la batalla de ser el estándar definitivo en favor de HTML 5, que, inicialmente, no fue apoyado por este organismo.

[1.4.3]versiones de HTML

Los estándares que siguen en funcionamiento actualmente son los siguientes:

<html xmlns=”http://www.w3.org/1999/xhtml”xml:lang=”es”>

En el caso de XHTML 1.0 estricto, el DOCTYPE sería:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

La etiqueta raíz html sería igual que en la versión transicional

HTML 5 sigue creciendo y por ello (siguiendo la filosofía de estándar dinámico de la WHATWG) las páginas HTML 5 indican que usan esta versión de HTML mediante un DOCTYPE mucho más sencillo:

<!DOCTYPE html>
<html lang=”es”>

La etiqueta raíz HTML también es más sencilla que las usadas en XHTML (indicando simplemente el idioma).

Los navegadores no son estrictos con las normas HTML; es decir, aunque tengamos algunos fallos, van a ignorarlos en aras de mostrar la mejor versión del código que hagamos. A los navegadores les interesa hacer funcionar el código, sea válido o no.

Sin embargo, como creadores de páginas web, debemos cumplir las normas del lenguaje aprendiendo así realmente el lenguaje y además impidiendo que el navegador se equivoque al interpretar nuestros fallos. Además, hace que otros creadores de páginas comprendan el código perfectamente, facilitando el trabajo colaborativo.

El validador oficial de la W3C (http://validator.w3.org/) permite validar todas las versiones de HTML, incluida la versión 5.

Los errores graves se muestran en rojo y puede haber avisos (warnings) que son fallos leves, pero que hay que tener en cuenta.

Por otro lado, la mayor parte de los entornos de trabajo dispone de validador incorporado (en el propio entorno se marcan los fallos a la vez que escribimos el código) y algunos otros se puede instalar un plugin. También podemos instalar validadores en línea de comandos como el htmltidy, disponible en http://www.html-tidy.org/, que permiten

[1.4.5]compatibilidad entre navegadores

La tecnología dominante actualmente para crear páginas web es la que surge de HTML5 y que incluye el uso del lenguaje CSS3 y de JavaScript.

Aunque hoy en día casi todos los navegadores soportan HTML5, muchos (sobre todo si no están actualizados) no soportan todas las características. De hecho, como HTML5 está vivo y sigue introduciendo nuevas posibilidades, no hay ningún navegador que incluya todas las opciones.

Tradicionalmente, Internet Explorer no es un navegador respetuoso con HTML 5, de hecho sólo a partir de la versión 9 lo soporta y sólo en la 10 lo hace de una forma realmente comparable a la del resto de navegadores actuales. El nuevo navegador de Microsoft, Edge sí es más compatible (e incluso más veloz) y Chrome, Firefox, Safari y Opera reconocen lo fundamental de HTML5, pero difieren en su compatibilidad.

La página caniuse.com es la referencia más completa y utilizada para saber qué características de los lenguajes utilizados en las páginas web son soportadas en cada navegador.

Por otro lado, el sitio http://html5test.com/ realiza un test al navegador con el que entremos, para determinar el grado en el que soporta HTML 5 (le da una puntuación) y nos indica qué características cumple y cuáles no (hay que tener en cuenta que le tecnología HTML5 no solo se refiere al propio HTML sino al CSS y JavaScript relacionado, así como a otras tecnologías de uso con HTML).

Otra opción es http://fmbip.com/ que muestra las capacidades relacionadas con HTML5 que posee nuestro navegador.

Otra posibilidad interesante es utilizar la librería Modernizr (disponible en http://modernizr.com/) que permite a los desarrolladores en JavaScript detectar las características que tiene el navegador del usuario y actuar en consecuencia desde el propio código. Además gracias a su código podemos usar las etiquetas HTML semánticas (como article o section por ejemplo) que normalmente no manejan bien los navegadores incompatibles con HTML 5 (especialmente las versiones de Internet Explorer anteriores a la 9). Para usarla basta con descargarla y mediante una etiqueta script añadir su fichero JavaScript a nuestro código.

[1.4.6]referencias de ayuda

Ante tantos cambios e incompatibilidades, la situación es difícil para aprender. Por ello hay direcciones en Internet que nos ayudan a utilizar los distintos elementos HTML5 (incluso nos dicen su compatibilidad). Las más importantes son :

Se denomina sitio web al conjunto de páginas web y recursos de las mismas que contienen toda la información asociada a una determinada dirección de inicio en Internet.

Cuando una persona desea crear un nuevo sitio web, inicialmente le crea en su ordenador de trabajo y para ello debe crear una carpeta y en ella almacenar todas las páginas y recursos necesarios (imágenes, sonidos, vídeos, archivos auxiliares,…). Esa carpeta se deberá enviar al servidor web que hayamos contratado o del que dispongamos para publicar nuestra página en Internet.

Para ello normalmente se utiliza el protocolo de transmisión de ficheros conocido como FTP, aunque es posible que esa transmisión se haga con otros protocolos como WebDAV o RDS. Con copiar la carpeta en el sitio adecuado de nuestro servidor, la página estará publicada. Normalmente para ello se nos pide un usuario y contraseña que verifica que realmente somos los propietarios del espacio.

Hoy en día las herramientas avanzadas de creación de páginas web tienen capacidad para transmitir los ficheros al servidor usando cualquier protocolo.


1 Conseil Européen pour la Recherche Nucléaire, Consejo Europeo para la investigación nuclear. https://home.cern/

2 Premio Príncipe de Asturias 2002 junto a Lawrence Roberts, Robert Kahn y Vinton Cerf: considerados los padres de Internet

3 National Center for Supercomputing Applications, Centro Nacional de Estados Unidos de Supercomputación, creador de las primeras grandes redes de cálculo y supercomputadoras.

4 Internet Engineering Task Force, grupo que estandariza diferentes aspectos de Internet

6 Fuente: http://gs.statcounter.com/ , Julio 2014