<HTML5>PresentaciĂłn</HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco / Temuco, diciembre de 2019
< El origen de HTML5 >
• Nace del XML (El XML es una adaptación del SGML (Standard Generalized Markup Language) en “los principios de la web”. En 1991 se crea y acepta HTML, de la mano de Tim Berners-Lee (científico inglés) mientras trabajaba para la Organización Europea para la Investigación Nuclear (CERN). quien es considerado el padre de la World Wide Web.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Cronología>
• En 1997 nace HTML4 publicado por el W3C como estándar de diseño web. • En 1999 nace XHTML 1.0 que extiende HTML4 • En 2001 se publica la nueva versión de XHTML, la 1.1 • En 2002 se prepara un borrador para una nueva versión de XHTML • En 2008 naceHTML5 como el sucesor de HTML4 y XHTML 1.1
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Principales características HTML5 > • Es un lenguaje de estructuración de documentos • Ha sido establecido como estándar de diseño web por el
W3C (Consorcio World Wide Web).
• NO es considerado un lenguaje de programación • Sobre HTML se desarrollan tecnologías para facilitar a
los usuarios el diseño de una web
• Es la base de cualquier página web actual, excepto páginas Flash (tecnología obsoleta).
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< HTML, XML, SGML… >
¿Qué cambió?
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Popularidad entre navegadores 2019 >
Fuente: https://www.pcworld.es/ <HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Principales editores de cĂłdigo 2019 >
Fuente: https://platzi.com/ <HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< La sintaxis y la estructura en html5 > En HTML4, el elemento principal para estructurar las páginas web era la famosa caja <div>. Con el elemento <div> es posible crear zonas de visualización de forma rectangular que identificamos con un id o una clase para luego darle formato con CSS. El problema de los <div>, y esta es una de las cosas que pretende solucionar HTML5, es que se distinguen unos de otros gracias a ese id o esa clase. Identificador que le habrá dado el diseñador web de turno y que obedecería a motivos variados y subjetivos (no estandarizados). Por esta razón, las cajas <div> no son semánticas. Muchas veces no nos aportan ningún dato sobre su contenido. En HTML5 se ha hecho especial hincapié también en la simplicidad.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< La nueva sintaxis en html5 > Ahora veremos como ha cambiado todo esto enHTML5. En HTML5 destaca sobretodo la simplicidad y la permisividad.
El doctype La primera línea de un documento corresponde a la DTD (Document Type Declaration) o declaración de tipo de documento y sirve para indicar que versión de lenguaje HTML se ha usado al escribirlo. En HTML5 esta declaración no puede ser más sencilla: <!DOCTYPE html>
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< La nueva sintaxis en html5 > El documento HTML En una página web, el elemento <html> indica el inicio del contenido HTML. En HTML sólo necesitas indicar el lenguaje de la pagina. Por ejemplo: <html lang=es> La codificación de los caracteres Es frecuente indicar qué codificación de caracteres se ha usado en una página web. Con HTML5 se simplifica con lo indispensable para que los navegadores puedan gestionarla correctamente. <meta charset="UTF-8" />
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< La nueva sintaxis en html5 > Los scripts Una vez más, se ha simplificado la declaración de scripts de la siguiente forma: <script src="unscript.js"></script> Los estilos CSS Seguimos con la simplificación. Ahora para la declaración de los estilos te bastará con: <link href="tuhojadeestilos.css" rel="stylesheet" /> La sintaxis de los elementos Las comillas en HTML5 pasan a ser facultativas para los valores de los atributos. Puedes escribirlos con comillas dobles, comillas simples o sin ellas. Estas tres sintaxis serían correctas: <div class="tuestilo"> <div class='tuestilo'> <div class=tuestilo> <HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< La nueva sintaxis en html5 > En los elementos HTML con una sola etiqueta de apertura como por ejemplo br o img ya no es necesario indicar el cierre del elemento usando /. Por ejemplo: <img src="tuimagen.jpg"> HTML5 permite el uso de mayúsculas y minúsculas indistintamente en la sintaxis de los elementos y atributos. De este modo, podrías declarar un script así: <SCRIPT src="TuJavascript.js"></script>
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la estructura en HTML5 > Con la llegada de HTML5 también llegaron nuevos elementos de estructura para mejorar la semántica. Esto es, dotar a estos elementos de un significado. ¿Cuáles son esos elementos? El elemento <header> El nuevo elemento <header> se utiliza para definir una zona de visualización para las cabeceras. Puedes definir cabeceras tanto a nivel de página como de una zona determinada (un artículo, un menú, etc…) De este modo, es posible tener una cabecera para toda la página que sería la típica cabecera en la parte alta de la página con un logo, un menu, etc… O puedes tener una cabecera para una zona determinada como por ejemplo un artículo, en el que la cabecera podría incluir el título, el autor y la fecha. <HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la estructura en HTML5 > El elemento <footer> Funciona de un modo muy parecido al <header>. Del mismo modo, es posible determinar un <footer> para toda la página o utilizarlo en diferentes secciones de la web como por ejemplo un sidebar o un artículo. A nivel de página sería la zona en la parte baja de la web, donde se suelen incluir datos de contacto, enlaces, etc… A nivel de zonas, y siguiendo con el ejemplo anterior, en el <footer> de un artículo es posible incluir por ejemplo la categoría a la que pertenece ese artículo o el autor si no se ha adjuntado en el <header>
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la estructura en HTML5 > El elemento <nav> Como su nombre ya deja intuir, el elemento <nav> sirve para definir una zona de navegación con vínculos. Lo que vendría a ser un menú de toda la vida. Este elemento esta pensado para la navegación principal de la web y para definir vínculos entre las diferentes páginas. El elemento <section> La función del elemento <section> es agrupar elementos relacionados entre sí. De este modo, podrás por ejemplo, agrupar dentro de un mismo elemento un contenido con su título y su pie de página. Los <div> La llegada de HTML5, no significa que se deba erradicar el uso de las cajas <div>. Todavía se usan y presentan gran utilidad. <HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la estructura en HTML5 > El elemento <article> El <article> sirve para definir un contenido autónomo e independiente, que pueda ser usado en otra parte de la web sin que por ello pierda su significado. A modo de ejemplo, se usaría el elemento <artícle> para un artículo de un blog o una noticia de un periódico o incluso un comentario de un blog. El elemento <aside> La función del elemento <aside> es mostrar un contenido relacionado al contenido al cuál esta vinculado. Puede tratarse de sidebars, zonas de widgets, complementos sobre un artículo, etc… En la mayoría de los casos un <aside> se ubicará en un lateral del contenido con el que están relacionados. Aunque no siempre será asi, primará la semántica sobre el orden, lo segundo se podrá trabajar con css.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la
estructura en HTML5 >
Estructura 1 <HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Los elementos de la
estructura en HTML5 >
Estructura 2 <HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Etiquetas HTML más usadas >
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Etiquetas HTML5 más usadas >
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Ids y clases en HTML, nombrando elementos > Se usan principalmente para vincular con css, podemos referirnos a una etiqueta concreta de nuestro documento HTML de dos formas: IDs: Una ID nos ayuda a referirnos a un ÚNICO elemento HTML; no se puede repetir un ID. Se utiliza añadiendo la propiedad id=»nombreID» en la etiqueta correspondiente. Por ejemplo: <p id="introduccion"> aquí va el párrafo de introducción</p>
Clases: Una clase es una especie de ID, que nos ayuda a referirnos a VARIOS elementos HTML. El funcionamiento es el mismo que los IDs, pero si podemos usar la misma clase en varias etiquetas HTML. Se utiliza añadiendo la propiedad class=»nombreClase» en la etiqueta correspondiente. <p class="parrafoResaltado"> aquí va el párrafo que queremos resaltar, puede haber varios.</p> <HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > HTML5 es muy permisivo a la hora de escribir código. Ofrece una gran flexibilidad y muy pocas restricciones. Lo cual, también puede ser un problema. Imaginemos un código en el que hayan trabajado dos o tres desarrolladores, con la permisividad de HTML5, si cada uno ha escrito el código a su manera, lo que tu veas al final, puede resultar un auténtico caos. Existen pautas que harán la vida mas fácil al escritor y a los desarrolladores que trabajen sobre el código.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Declara el DOCTYPE A través de la declaración del tipo de documento, o DOCTYPE, indicamos el estándar usado al construir un documento HTML. De esta forma, los navegadores que lean esta declaración interpretarán el documento con el lenguaje y versión definidos. Cabe destacar que, estando en 2017, no debemos usar un DOCTYPE obsoleto, y utilizar siempre la versión recomendada de HTML, que a día de hoy es HTML5. Mal (por usar versiones antiguas): <!DOCTYPE html>
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Cierra las etiquetas Una de las primeras cosas que se estudian cuando se está aprendiendo HTML es que las etiquetas deben cerrarse, y en el mismo orden en el que se abrieron. Cabe destacar que en HTML5 se introdujeron las etiquetas vacías (void tags en inglés) que son un caso especial que no necesitan etiqueta de cierre. <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones >
Usa minúsculas en los nombres de etiquetas, atributos y valores A pesar de no afectar al funcionamiento de la página, es una recomendación escribir siempre las etiquetas, atributos y valores en minúsculas, ya que mejora la legibilidad del código.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Usa el atributo ALT en imágenes Las imágenes deben incluir siempre dicho atributo, que proporciona, como su nombre indica, un texto alternativo a la imagen. Su uso mejora la accesibilidad ya que, por ejemplo, los lectores de pantalla se basan en este atributo para proporcionar un contexto a las imágenes. Dicho valor debe ser lo suficientemente descriptivo al contenido. Si la imagen no tiene ninguna relevancia (como un icono, por ejemplo), es recomendable seguir incluyendo el atributo, aunque esté vacío.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Usa una indentación consistente Esto es aplicable a cualquier lenguaje: un código con mala indentación o sin ella carece en gran medida de legibilidad. Indentar es utilizar espacios a la derecha de cada línea con el objetivo de mejorar la legibilidad del código, por lo que es un aspecto importante y que deberías tener siempre en cuenta al programar. En el modo de hacerlo tenemos varias opciones, mediante tabulaciones (Tab) o espacios (1, 2, o los que se prefieran). Esto ya es cuestión personal (yo personalmente prefiero Tabs), aunque podríamos tomar como referencia la guía de estilos de Google que recomienda dos espacios. Sea como sea (con tabulaciones, dos, tres espacios,…) lo importante es que sea consistente en todo el código.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Usa una indentaciĂłn consistente
<HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Separa el contenido de la presentación No uses estilos en línea. HTML es el contenido, y CSS proporciona la presentación visual de dicho contenido. No los mezcles. Al mezclarlos, se consiguen páginas más lentas, difíciles de leer y mantener. Tener el estilo y el contenido separado ayudará al equipo de desarrollo a realizar cambios y mantenimiento de una forma mucho más eficiente. Por ello, siempre es recomendable utilizar hojas de estilo externas, junto con clases para aplicar estilos según sea necesario.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Usa etiquetas semánticas y evita la divs Se podría definir Divitis como esa mala práctica de usar divs para organizar todo el contenido de la página. Aunque funciona, empeora la legibilidad y sobrecarga el código. Es más recomendable mantener nuestro código lo más limpio y reducido posible, reduciendo el uso de clases e id innecesarios para vincular estilos a un solo elemento. Para ello, podemos utilizar los elementos estructurales de HTML5 de forma adecuada, como: <HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Omite el valor de atributos booleanos Existen atributos en HTML conocidos como atributos booleanos. SegĂşn el estĂĄndar, y a pesar de lo que pueda parecer, estos atributos no admiten los valores true o false, se representan incluyendo (true) u omitiendo (false) su nombre. Son ejemplos de atributos booleanos: checked, selected, disabled, readonly...
Es por ello, que debemos usarlos correctamente y omitir siempre su valor.
<HTML5> JosĂŠ Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > Especifica la codificación de caracteres También de las más conocidas, especificar correctamente la codificación de caracteres nos permitirá la correcta visualización del contenido de nuestra página, incluyendo tildes y caracteres especiales como ñ, indicando al navegador cómo debe interpretarlos. Para especificarla, debemos añadir la siguiente línea al header de la página: <meta charset="UTF-8"/>
En este caso indicamos como sistema de codificación UTF-8 al ser el más extendido y usado.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco
< Recomendaciones > La última práctica que vamos a mencionar en este artículo es validar nuestro código para comprobar que cumple con los estándares. Y qué mejor forma para validarlo que usando la herramienta realizada por la misma organización que establece dichos estándares: W3C. Hay que tener en cuenta que no nos debemos obsesionar con el resultado, ya que no obtener la validación completa no quiere decir siempre que sea un mal código. Puedes comprobar el resultado de la validación de páginas como Google, Twitter o incluso GitHub para entender que tampoco son sitios perfectos.
<HTML5> José Miguel Pichihuencho Frontend Developer Everis Centers Temuco