Progreso de lectura:

HTML5

html5

Eme

25 junio, 2020

ML5 es el sucesor de HTML y nosotros te lo vamos a contar.

Es un lenguaje de programación que debe reflejar las necesidades actuales.

Se trata del lenguaje sobre la que está construida toda la web y tanto si ya tienes experiencia en HTML y en desarrollo web en general como si es tu primera vez con este lenguaje, los 10 datos que te vamos a dar te van a ayudar muchísimo a comprender mejor.

 

1 ¿Qué es HTML?

 Son siglas de Hyper Text Markup Lenguaje o sea lenguaje de marcado de hipertexto, para comprender mejor debemos desmenuzar estas siglas.

En primer lugar hipertexto se refiere a un texto que contiene enlaces.

Vale decir que el texto plano es un texto que solamente puedes leerlo, pero un hipertexto es que texto que contiene fragmentos donde puedes hacer clíck en un navegador gráfico y te lleva a otro documento.

Esto permite que los documentos estén interconectados entre sí.

Esto es algo muy elemental pero es la base de la web y en su momento fue una completa revolución.

Marcado significa que HTML es un lenguaje que define la estructura de los documentos, es decir, en un documento indica que parte es el título, que parte es un párrafo, que parte es una lista, que parte es un subtitulo, que parte es un enlace etc…

Mientras que el lenguaje indica obviamente  que HTML es un lenguaje, no es un lenguaje de programación pero es un lenguaje, así que cuando alguien te diga que no lo es le puede decir ¿qué crees que significa la L en HTML?

 

2 HTML y la web nacieron juntos en 1989.

 Tim Berners-Lee era un científico de partículas en el CERN, la Organización Europea para la Investigación Nuclear.

Tim Berners-Lee como todo científico necesitaba acceder y compartir  documentos con otros profesionales, pero era un proceso bastante arduo, era algo muy técnico.

Entonces a el se le ocurrió la forma de simplificar este proceso a través del hipertexto, o sea, que los documentos mismos tengan enlaces que los conecten con otros y de esta manera todos los documentos estarían interconectados entre sí.

Siendo así, si yo estaba leyendo un documento y había una referencia hacia otra, me bastaba seguir ese enlace, en lugar de ir a un gran archivo y buscar ese otro documento, entonces empieza a trabajar en lo que sería HTML.

La primera versión de HTML tenía solo 18 etiquetas y en 1.990 se publica la primera página web de la historia.

En el año 1.993 el CERN libera HTML como un lenguaje libre de uso.

La web entonces es un conjunto de documentos HTML interconectados a través de enlaces alrededor de todo el mundo.

Por eso se le llama World Wide Web o red de alcance global.

Así que Tim Berners-Lee no es tan solo el creador de HTML sino también de la web

 

3 La Sintaxis de HTML es bastante sencilla.

Se trata de un lenguaje fácil de aprender ya. que su lenguaje de marcado se basa en etiquetas, etiquetas de apertura, de cierre y de contenido.

Entonces tu puedes tener una etiqueta Titulo </title> y una etiqueta de cierre Titulo <title> y lo que va dentro obviamente es el titulo.

Te das cuenta que es fácil aprender, entonces yo podría tener:

 

Html5-head-body-2-

Trabajaron juntos hasta el año 2.11.

Además las etiquetas pueden tener datos extra conocidos como atributos, y los atributos simplemente se indican con el nombre del atributo el signo de = y el valor de ese atributo, por ejemplo:

<a href=»https://www.prosutelsistemas.net»>ir a prosutelsistemas</a>  esto es un enlace que cuando haces click en el, te va a llevar a la página web de Prosutel Sistemas.

 

4 La W3C y HTML5.

Hace un momento comenté que la web se conocía también como WWW por World Wide Web, es decir red de alcance global y  fue una revolución.

Después del ordenador la siguiente revolución informática fue la web y hubo una guerra entre los navegadores, donde estaba Netscape Navigator por un lado e Internet Explorer por otro lado peleándose por el dominio de la web.

Más allá de las guerras, cada empresa implementaba el lenguaje a su particular modo.

Por eso en 1.994 y por ese motivo se crea W3C, es decir el consorcio que se encarga de velar por los estándares web para que las empresas los respeten.

Aunque ellos no tienen la potestad de obligar a que se respeten los estándares o de sancionar a las empresas, ellos simplemente dan la pauta.

Por ejemplo, sería como la Real Academia de la Lengua Española y el idioma Castellano, pone las reglas, pone el diccionario, dice como debe ser el idioma.

Pero finalmente la gente habla como mejor le parece o como se habla en su región, y la Real Academia no puede hacer nada al respecto.

Es más, cuando una forma de hablar se generaliza la Real Academia no tiene más remedio que añadirlo al diccionario y esto ocurre igual con W3C.

así que existe un tira y afloja entre la W3C y las empresas que hacen los navegadores y por supuesto los desarrolladores.

 

5 HTML5 llega en el 2004

Y HTML5 fue la revolución más grande de la web.

Resulta que HTML había avanzado hasta la versión 4.01 en el año 1.999 pero era un caos terrible.

Si tu vienes de la vieja escuela como yo, recordarás que existían 7 versiones de HTML y cada una de ellas con reglas y doctype diferentes.

La W3C tuvo la genial idea de unificar estas 7 versiones en una sola que se iba a llamar XHTML2 con lo cuál HTML como lenguaje estaba abocado a morir porque ya habían decidido no seguir más.

 

¿Qué ocurrió?

Un grupo de desarrolladores de Mozilla, Opera y Safari propusieron un borrador para una nueva versión, sin embargo la W3C lo rechazó.

En consecuencia estos desarrolladores crearon una nueva institución la WHATWG que significa Web Hypertext Application Technology Working Group.

Que viene a significar algo así como grupo de trabajo de tecnologías de aplicaciones web.

WHATWG inició el trabajo de la nueva versión porque no querían que pereciera y que surgiera XHTML2 en su lugar porque además tenía varios problemas.

 

¿Qué problemas tenía?

Una de las principales cosas a la que se oponían, era que XHTML2 no iba a tener compatibilidad total con las versiones anteriores de HTML, por lo que muchas páginas web iban a dejar de funcionar.

Así que después de un largo trabajo en el año 2.004 la WHATWG presenta las especificaciones de HTML5.

 

Y el mundo cambió con HTML5.

La web como la conoces hoy en día le debe mucho a este momento en el que se lanzó HTML5 en el año 2.007.

Como comenté anteriormente, la W3C no tuvo más remedio que tomar la especificación de WHATWG y continuar con el desarrollo de HTML y en el año 2.009 le dieron la estocada final a XHTML2 abandonando el proyecto de desarrollo por completo para siempre.

 

6 HTML5 es más que HTML ¿Cómo es posible?

Pues porque HTML es el lenguaje de marcado, sin embargo como ya explicamos anteriormente, son las empresas desarrolladoras de navegadores las que implementan finalmente HTML.

No obstante también integran otras características y para el lanzamiento de HTML también los navegadores habían alcanzado características y venían con nuevas APIs,

 

Por ejemplo:

Geolocalización, canvas para hacer dibujos en pantalla de JavaScrypt, soporte nativo para audio y vídeo etc..

Incluso CSS con sus nuevas características, como animaciones, 3D y otros efectos interesantes que se llamaron CSS3 (por marketing porque como versión nunca existió).

Entonces aunque técnicamente hablando HTML5 es la versión 5 del lenguaje de marcado, hay que recordar que en su lanzamiento se integraron otras muchas tecnologías.

 

Por lo cuál cuando escuches hablar de HTML5

También se pueden estar refiriendo a todos las tecnologías que vinieron con los navegadores y que permitieron que pudiéramos empezar a desarrollar aplicaciones web.

Es decir, aplicaciones completas que se ejecutan directamente en el navegador como si fuera una aplicación de escritorio, pero todo en tu navegador.

Si tu piensas en aplicaciones como Google Docs que prácticamente es un Office de escritorio pero en el navegador, entenderás a que me refiero con aplicaciones web, estas fueron posibles a partir de HTML5.

 

7 Los web component son el futuro de las webs.

Hasta este momento las etiquetas HTML son las que nos dice el estándar.

Nosotros no podemos no podemos crear nuevas etiquetas.

Es decir tu puedes escribir etiquetas en el código pero en el navegador no las va a interpretar, así que es lo mismo que nada.

Pero sería muy interesante poder a través de tecnologías web poder crear componentes encapsulados.

Por componentes me refiero a un trozo de HTML con CSS, con JavaScrypt y todo su comportamiento que pueda ser utilizado en proyectos.

Si has utilizado Angular, etc.. esta noción te sonará.

Este concepto es nativo de la web, el detalle es que los navegadores aun no lo soportan y todavía se encuentra en desarrollo.

Pero el futuro de la web es que tu puedas crear tus propios componentes por ejemplo:

Un menú, un acordeón, un formulario, encapsulado con código nativo y poder utilizarlos en cualquier proyecto.

 

Los web component están basados en 4 tecnologías:

1 Custom element (que puedes crear tus propios elementos a través de JavaScrypt y después utilizarlos como HTML de toda la vida).

2 Templates de HTML con la etiqueta de Templates de HTML tu puedes crear un marcado vacío y después llenarlo con JavaScrypt como si fuera un mixted.

3 Shadow DOM, es el DOM interno de los web component.

Por tanto, si tu creas un formulario como un web componet y lo metes en otro documento HTML.

El documento HTML tiene su DOM principal.

En otras palabras, su estructura de documento y el componente tiene su propio DOM que no interfiere en el superior y se llama Shadow DOM.

Evidentemente hay métodos de llave Scrypt y pseudo clases de CSS para acceder a ese Shadow DOM.

4 Los imports de HTML, con lo cuál podemos a través de la etiqueta link traernos otro documento HTML en la que estamos actualmente.

Los navegadores todavía no soportan completamente los web componets y va a pasar algún tiempo más pero sin duda va a ser la gran revolución después de HTML.

 

8 Un buen código HTML te da mejor SEO.

Dicho de otra manera, obtener un mejor posicionamiento en Google.

 

¿Por qué?

Es simple, ya hemos mencionado anteriormente que HTML es un lenguaje que estructura los documentos y les da jerarquía, semántica.

Por consiguiente Google rastrea las páginas web y si tu código HTML es bueno, Google va a entender más y mejor cuál es el titulo, el contenido, las imágenes etc..

Efectivamente cuando se intenta mejorar el posicionamiento de una página web.

Uno de los primeros análisis que se hace es de HTML.

Entonces se buscan errores como páginas que no tengan por ejemplo titulo H1 o que lo tengan pero esté repetido, imágenes que no tengan el atributo Alt.

Alt indica de que se trata esta imagen para que Google entienda y la coloque en el Google Images.

Las páginas que no tengan la etiqueta Title, que no tengan meta descripción (que nos da una descripción para mostrar en las redes sociales y en Google, enlaces que apunten a direcciones equivocadas o/e inexistentes, o la misma estructura del contenido, o sea que exista la etiqueta Main, las secciones o subtitulos correspondientes.

Por este motivo, si te dedicas al marketing digital o quieres hacerlo también deberías aprender HTML, no solo para desarrollar la web.

 

9 HTML soporta Media Queries.

Son consultas a medios, para simplificarlo porque se trata de algo más complejo.

Media Queries es una consulta a la pantalla del dispositivo.

Le puede pregunta al dispositivo de que ancho es la pantalla, de que alto es la pantalla, si es vertical u horizontal etc.

Y según las respuestas que le de el dispositivo, nosotros podemos mostrar una cosa u otra.

Con CSS podemos hacer Media Queries a través de la red de la @media.

Gracias a JavaScrypt podemos hacer Media Queries a través del método Match Media.

Pero te sorprenderá saber que HTML también permite hacer Media Queries a través de la etiqueta <picture> .

Por lo tanto a través del atributo Media, nosotros podemos indicar que la imagen se va a mostrar en cada tamaño de pantalla sin necesidad de CSS ni de JavaScrypt.

 

10 Existen 2 versiones de HTML corriendo en paralelo ¿Cómo es posible?

Recordarás que la W3C es una institución que se encarga de definir los estándares, pero ellos querían eliminarlo pero entonces hizo su aparición la WHATWG para entonces crear HTML5.

Por un tiempo trabajaron juntos, cuando W3C se percató de su error y empezaron a trabajar en HTML, tomando el trabajo que había hecho la WHATWG, lo hicieron hasta el año 2.011 en que se divorciaron.

 

¿Por qué?

Porque la W3C tenía la obsesión de ponerle número al lenguaje 5.01; 5.02; 5.03 etc..

Para ellos estamos en HTML5.2 mientras que la WHATWG decía que no porque ponerle número al lenguaje indica que el desarrollo está terminado.

Y terminar un desarrollo monolítico tan grande es muy complicado, de hecho por eso CSS se partió en módulos.

Entonces la postura de WHATWG era tener un estándar vivo que no tenga números. Por lo que para ellos no hay HTML5 y le llaman Living Standar.

 

Ahora bien ¿Cuál de las dos versiones debemos hacer caso? ¿Cuál es la versión oficial?

Si nos ponemos institucionalistas y tradicionalistas podríamos decir que la W3C.

Sin embargo hay que recordar que la versión más aceptada por la comunidad de desarrolladores y la industria en general es la versión de la WHATWG .

De hecho en la especificación de la WHATWG comentan claramente que la versión de la W3C se basa en su trabajo para crear sus especificaciones.

Incluso dicen que la W3C republíca tal cuál el trabajo de la WHATWG  cosa que a ellos no les hace mucha gracia.

Existe una página que se llama caniuse.com donde podemos revisar la compatibilidad de los navegadores con las tecnologías web.

Entonces cuando revisas una tecnología web aparece un link a la documentación y esa documentación es siempre la de la WHATWG y no la de W3C.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0 comentarios

Quizás también te interese leer…

Blockchain

Blockchain

Seguro que habéis oído hablar sobre Blockchain Se trata de una palabra que casi siempre aparece asociada a Bitcoin, una criptomoneda. Blokchain es...

0 comentarios

Este sitio web utiliza cookies mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies