Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[2]
Introducción al lenguaje HTML

Publicidad

[2.1] el lenguaje HTML

[2.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.

[2.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

[2.2] funcionamiento de las aplicaciones web

[2.2.1]HTML, CSS y JavaScript

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:

[2.2.2]protocolo http

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:

[2.2.3]front-end y back-end

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.

En la mayoría de aplicaciones web complejas, cuando un navegador requiere de dicha aplicación, el servidor necesita ejecutar acciones como: interpretar código del lado del servidor (por ejemplo en PHP o ASP.Net), pedir recursos a otros servidores (bases de datos, mapas, streaming de vídeo, etc.) o almacenar datos de sesión.

Estas acciones son totalmente opacas al usuario. Tras su ejecución, el navegador del usuario recibe código que sí es capaz de interpretar (normalmente HTML, CSS y JavaScript).

Esto implica que una aplicación web puede realizar tareas en el llamado lado del servidor. Es decir, tareas que se ejecutan en el servidor y cuyo código no podemos obtener. Por lo tanto, cuando se crea una aplicación web hay personas dedicadas a programar en código traducible en el lado del servidor y código en el lado del cliente,

El lado del servidor se asocia al desarrollo back-end, su programadores son denominados programadores back-end. Mientras que los profesionales encargados de la apariencia en el navegador, son llamados programadores front-end.

HTML es la tecnología dominante para programar el front-end. Por lo tanto este es un manual dedicado al front-end.

[2.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:

[2.4] normalización y estándares.
versiones de HTML

[2.4.1]guerra de navegadores

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).

Es importante conocer el uso de navegadores por parte de los usuarios, así el sitio w3schools (https://www.w3schools.com/browsers/) que posee 45 millones de visitas posee estas visitas en el momento de escribir estas líneas (Septiembre de 2018):

Sin embargo el sitio statcounter analiza más variedad de sitios para sus estadísticas. Están disponibles en http://gs.statcounter.com/ y ofrece estos otros datos de uso:

Finalmente netmarketshare (http://netmarketshare.com/), otro sitio reconocido de estadísticas, ofrece estos datos

Aunque parece claro el dominio de Chrome en todas las estadísticas, el resto de datos varían bastante. Por ello conviene examinar estadísticas sobre nuestros propios visitantes en nuestra página web. Herramientas como Google Analytics, Urchin u otras, nos ayudarán a conseguir información detallada al respecto y así tener en cuenta qué navegadores usan nuestros usuarios.

Por ejemplo mi propia página personal: jorgesanchez.net, es evidente que no es un buen marcador para conocer el uso mundial de los navegadores. Pero para mí es fundamental, ya que marca la realidad de los usuarios de esta página que es la que he de tener en cuenta.

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.

[2.4.2]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

La W3C decidió unirse a la WHATWG en 2008 para buscar un estándar. Actualmente HTML 5 ya es una recomendación oficial de la W3C que ha sustituido a WHATWG como organismo encargado de velar por el estándar.

HTML5 sigue una filosofía de “estándar vivo” en la que ya hay una recomendación de uso por su parte, pero que va cambiando continuamente según se consideran nuevas mejoras o la aparición de nuevas tecnologías; esta forma dinámica de utilizar las recomendaciones ha sido la clave del éxito de HTML 5 desde el año 2012 (especialmente gracias que los dispositivos Apple y Android siempre han manejado muy bien HTML 5).

Desde 2014 es la recomendación oficial de la W3C.

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).

[2.4.3]validar el código HTML

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 validar desde la línea de comandos, aunque esta opción cada vez se usa menos.

[2.4.4]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 CSS (versión 3) 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 soporta los elementos fundamentales de HTML5 y solo a partir e la 10 lo hace de una forma realmente comparable a la del resto de navegadores actuales. De hecho, o se recomienda a los usuarios actuales usar este navegador, salvo ara mostrar aplicaciones web realizadas hace años y que solo son compatibles con este, antaño dominante, navegador.

El nuevo navegador de Microsoft, Edge sí es más compatible. Los navegaY se percibe ue, general Chrome y Firefox son los que adoptan más rápido las nuevas normas y aportan más compatibilidad con HTML5, pero depende de propiedades. Otros navegadores como Safari y Opera reconocen también la inmensa mayoría de HTML5.

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.

[2.4.5]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 :

[2.4.6]publicación de páginas web

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.

Otra opción, más habitual hoy en día para los desarrolladores, es utilizar sistemas de control de versiones en la nube (el más conocido es GitHub) y descargar la última versión del código directamente al servidor web. Es decir, desde nuestro ordenador subimos la última versión de nuestro código al servidor en la nube y luego actualizamos el código en el servidor web.

¿qué es realmente HTML5?

A día de hoy HTML 5 es una tecnología muy requerida por las empresas de modo que es fácil encontrar ofertas de trabajo que buscan desarrolladores en HTML 5.

Un detalle importante es que cuando se habla de un desarrollador o desarrolladora HTML 5 no se hace referencia solo al lenguaje HTML sino también a las otras dos tecnologías frontend: CSS y JavaScript en sus versiones más compatible con el estándar 5 de HTML.


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