HTML5

HTML5
DIW – FRANCISCO COBERA NAVAS

1
2 ÍNDICE
 1. GUÍA DE ESTILO
 2. LENGUAJE DE MARCAS HTML
 3. HTML5
 4. ESTILOS
3 3. HTML 5
4 3. HTML 5
INTRODUCCIÓN
HTML5
HTML y el navegador web
5
HTML (Hyper Text Markup Language)

es el lenguaje usado para crear
documentos para la web
HTML define la estructura y el
diseño de una página web
Los visitantes de la web no ven el
código HTML, pero si su resultado a
través de un navegador web
El primer visor/editor de webs fue
creado por Tim Berners-Lee en 1992
EFA Moratalaz - LM – Capítulo 5

4
6
Versiones de HTML
Las versiones de HTML son fácilmente
diferenciables gracias a su cabecera
A esta cabecera se le denomina
Document Type Declaration o
DOCTYPE
Ejemplo de cabecera para una web
escrita en HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01//EN">
https://web.archive.org/

5
7
HTML 5
HTLM 5 fue publicado el 28 de octubre de 2014 como la 5ª revisión
del formato usado para construir páginas webs y aplicaciones
Algunas mejoras:
Capacidad para construir aplicaciones basadas en la web
Soporte para video y audio
Gráficos y efectos de estilo
Completo conjunto de APIs
Adaptable a cualquier dispositivo (escritorio, móvil, tablet, TV…)
Se añade semántica a la web
Se estructura la web para adaptarla a los nuevos diseños

6
8
El logo de HTML 5
El logo de HTML 5 fue presentado el 18 de enero de
2011, incluso antes de que fuera presentado el estándar
Este logo representa la piedra angular para la
construcción de una web moderna
Este logo no se utiliza para indicar que se ha construido
una web válida para HTML 5
En la web oficial se pueden utilizar diferentes diseños
del logo dependiendo de las tecnologías utilizadas para
la web

7
9
Buscando la simplicidad
HTML 5 se ha diseñado buscando la simplicidad
Nueva definición del doctype (Document Type Definition DTD)
Algunos atributos como type en los elementos <link> o <script> son
ahora opcionales
Las restricciones de sintaxis son menos estrictas que en XHTML
Se pueden omitir comillas en la mayoría de atributos
Uso de mayúsculas, minúsculas o mezcla
Nuevos elementos de estructura han sido añadidos teniendo en cuenta
lo que faltaba en otras versiones anteriores y era más demandado por
los desarrolladores
EFA Moratalaz - LM – Capítulo 5 8
10 Buscando la simplicidad
HTML 4.01 HTML 5

9
11
Nuevos elementos de estructura
La web ha ido evolucionando y los típicos elementos como listas,
párrafos, tablas, etc. se quedan cortos para los diseños actuales
Se demandan nuevas opciones como menús de navegación, paneles de
fichas, encabezados, pie de página, etc.
Estos elementos ya estaban siendo implementados en la web desde
hace tiempo, pero era necesario utilizar mucho código CSS y JavaScript
con los siguientes inconvenientes
id y class necesarios varían de un desarrollador a otro, de un país a otro, etc
El mismo id y class puede tener diferente comportamiento
Librerías JavaScript cada vez más pesadas y difíciles de mantener
La web no es soportada por el navegador, sino por sus librerías externas
10
12 Nuevos elementos de estructura
Durante la creación de HTML5, se

usó la herramienta de minera de
datos de Google sobre un billón
de páginas web para analizar los
id y los class más utilizados
Opera hizo algo similar sobre 3.5
millones de URLs

11
13
Finalmente, los 20 más populares entre varios de los análisis realizados
dio lugar a un conjunto nuevo de elementos para HTML 5
<header>
Introducción a “elementos de seccionado”: Un articulo, una sección, el
documento entero
<footer>
Contiene el pie del sitio web, de un largo <article>, o de una larga <section>
<nav>
Sección que contiene los links de navegación principales (dentro del documento o a
otras páginas)

12
14
<article>
Contenido independiente, el cuál puede ser extraído de la web sin que penalice
su comprensión
Ejemplo: un artículo sobre Andres Iniesta en una web de noticias deportivas
<section>
Sección genérica usada para agrupar diferentes artículos para diferentes
propósitos
Ejemplo: una sección de fútbol con artículos sobre deportistas en una web de
noticias deportivas
<time>
Usado para marcar horas y fechas
13
<aside>
Sección con contenido no necesariamente relacionado con el tema principal,
pero que puede añadir información adicional
<figure> y <figcaption>
Usado para encapsular una figura (imagen, video, etc.) como un único ítem que
contiene una descripción asociada
<main>
Representa el contenido principal del cuerpo del documento
Se expone el contenido que directamente está relacionado con el tema central
de la web
Solo puede haber un elemento <main> en todo el documento
EFA Moratalaz - LM – Capítulo 5 14


15
17
Buenas prácticas en HTML 5
No está claro si un elemento <section> puede contener uno o varios
elementos <article> o si un elemento <article> puede contener uno o
varios elementos <section>
Ambas opciones son correctas

16
18
Los elementos <section>, <article>, <nav>, <header>, <footer> y
<aside> son llamados elementos de seccionado, porque dividen el
documento en partes semánticas
La especificación de HTML 5 dice que cada elemento de seccionado
debe tener un encabezado asociado (<h1>, <h2>, <h3> … )

17
19 Buenas prácticas en HTML 5

18
20
Trata de usar los elementos de seccionado, en vez de los de encabezado

19
21 Buenas prácticas en HTML 5
Este ejemplo es
semánticamente idéntico y
mucho más fácil de mantener
Atención: puede que aún
algunos navegadores no
implementen el algoritmo de
outline y traten todos los <h1>
como elementos principales del
documento

20
22
Todas estas prácticas ayudarán a tener una web más accesible
Se pueden utilizar herramientas para comprobar si los
elementos de seccionado están correctamente formados

21
23
Usar el elemento <main> para identificar el contenido principal
del documento
Es muy útil para que la tecnología de accesibilidad sepa cuál es
el contenido principal de la web
Existen un par de restricciones en su uso:
Solo puede existir un elemento <main> en el documento
No puede ser descendiente de los elementos de seccionado, <article>,
<aside>, <footer>, <header> o <nav>

22
24
Usar <h1> solo como encabezado de nivel superior y usar
<h2>…<h6> en los elementos de seccionado
Al validar este ejemplo en el validador del W3C se obtiene la
siguiente salida de warning:
“Consider using the h1 element as a top-level heading only (all h1
elements are treated as top-level headings by many screen readers and
other tools).”
Si se desea eliminar esos warning se deben sustituir los <h1> de
los elementos de seccionado por sus respectivos <h2> y <h3>

23
25
Otros elementos y atributos
Elementos <details> y <summary>
Sirven para mostrar una zona plegable en un documento HTML

24
26
Elemento <time>
Es usado para marcar la hora o duración en un documento HTML
La semántica que se añade a la web nos servirá en escenarios para
generar alertas para cumpleaños, añadir citas automáticas o eventos
Está compuesto de dos partes, la usada por los humanos y la usada
por las máquinas lectoras
Parte humana: elemento <time>
Parte máquina lectora: atributo datetime dentro del elemento <time>

25
27

26
28
El atributo datetime se utiliza para expresar una fecha/hora o duración
y pueden utilizarse diferentes formatos

27
29
Se puede usar el prefijo “P” para indicar periodos
<time datetime=“P4D”> (Periodo de cuatro días)
De forma similar se puede usar con “D” para días, “H” para horas, “M” para
minutos y “S” para segundos
Se usa “PT” para indicar una duración de mayor precisión
<time datetime=“PT4H6M12.55S”>
Si no se especifica el atributo datetime dentro de <time> las máquinas
lectoras también serán capaces de interpretar el contenido
<time>PT4H6M12.55S</time>
Es recomendable usar datetime para tener libertad en el formato mostrado
para los humanos
 <time datetime=“PT4H6M12.55S”>4 horas, 6 minutos, 12.55 segundos</time>
 <time datetime=“PT4H6M12.55S”>4:06:12.55</time>
28
30
Elemento <mark>
Es usado para marcar resaltar texto como lo haría un rotulador
Posibles usos:
Mostrar resultados de búsqueda con las palabras buscadas resaltadas
Resaltar partes importantes de un texto

29
31
Atributo download para el elemento <a>
Es usado para descargar un fichero con un nombre distinto al que
contiene en el servidor
Atributo translate
Es usado para limitar la traducción online de ciertas herramientas
como Google Translate en partes del documento que no desean ser
traducidas
Código fuente, nombres de calles, autores, trucos sobre videojuegos, etc.

30
32
Microdata
El objetivo principal de microdata es la optimización de los motores
de búsqueda, anidando metadatos en el contenido de la página.
Las máquinas lectoras son capaces de entender el contenido de la
web y el tema que se trata.
Existen tres opciones de proporcionar contenido leíble a las máquinas
lectoras
Microdata
HTML+RDFa
Microformats

31
33
Microdata
Esta información no es visible por los humanos, es pura información
semántica
Ejemplos de microdata:
Eventos
Perfil de una persona
Descripción de una organización
Ingredientes de una receta
Descripción de un producto
Localización geográfica
etc

32
34
Microdata
Los datos pueden ser procesados,
organizados, estructurados o
presentados en un contexto
Ejemplos:
Un navegador puede interpretar la
dirección y representarla en una
aplicación de mapa
Podría ser la dirección de un evento y su
información sería procesada por
aplicaciones de calendario
Etc.

33
l. <!DOCTYPE html>
2. <html>
Microdata
3. <head>
35 4 <meta charset=utf-8 />
. <title>Michel Buffa</title>
5 </head>
.
<body>
My name is Michel Buffa. And I'm a prcfessor/researcher at BS l..aboratorv in the south of France, uear 6.
<div itemscone itemtype="http://schema.org/Person">
the city of Nice. My email is : micbuffa@gmail.cmu. I live in the ciry of Biot, in a región named 7.
Alpes Maritimes r-1y name is <span itemprop="name ">Michel Buffa</ spari>,
8 And I "m a <span
.
Here is how this page will be seen by google: itemprop="job'::'itle">professor/researcher</span> at
9.
11. <a href=nhttp://www. i3s. unice. fr./I3S/""'
• Click to see... 10.
i t.emp r op=" af.filiation ..>I3S
12. Laboratory</a> in the south of France, near the city
of Nice. My
..... Person To-do correcto 6 13 email
.
{1) is: <span
Person 14. i temprop="email ">micbuffa@gmail.com</span>.
mame: Michei eurra 15 I live in the city of
. <span itemprop="address" itemscope
jobTitle: protessor/researcner
16. itemtype="httn://schema.orq/PostalAddress">
email: micbuffa@gmaiil.com
17. <span i t.emp r op=" addressLocali ty">Biot</ spari> 1 in
affiliatior [Orga11izatio11]: 18. a region named
n http:1/W\'M. es, un
toe.frll3S/ 19. <span itemp�op="addressRegion">Alpes
urt: [PostalAddlress]:
address
Maritimes</ span>
.a ddlressl ocal ity: Biot 20. </span>
a dld res sRe gi o Alpes 21. </div>
11: MariUmes 22. </body>
23. </html>

34
36
Microdata
Añadir microdata a una página HTML requiere solo de tres atributos:
Itemscope:
Define un objeto para el cuál se definen unas propiedades
Itemtype:
Especifica el vocabulario que se le puede aplicar al objeto anterior
Aparte de utilizar elementos semánticos para representar secciones, artículos,
encabezados, etc. se puede utilizar elementos para describir direcciones,
personas, productos, etc
Con microdata podemos crear un vocabulario propio o utilizar el disponible en
https://schema.org/
Se trabaja con propiedades que definen pares nombre/valor
35
37
Microdata
En este ejemplo se representa el vocabulario que define una persona

36
38
Microdata
En el ejemplo anterior se pueden deducir que:
Una propiedad puede tener como valor un texto simple, URLs o incluso otra
propiedad que apunte a otro vocabulario
 Dentro del vocabulario Person se hace link a los vocabularios PostalAddress, Organization…
También puede existir herencia de vocabularios
 El vocabulario Person está heredando del vocabulario Thing
Los vocabularios y sus propiedades tienen mucha similitud con la orientación a
objetos, clases y atributos
Hay miles de vocabularios disponibles para elegir
Aunque si se necesita uno específico, se puede diseñar y añadir a la web que se
está desarrollando siempre indicando cuál es el espacio de nombres donde se
define el vocabulario

37
39
Microdata
Itemprop:
Sirve para definir el
contenido del elemento en
forma de propiedades
En el ejemplo se muestra

información de contacto
de una persona con
semántica adicional útil
para los motores de
búsqueda
38
40
Microdata
Ejemplo que muestra que
es posible anidar unos
tipos dentro de otros
Se ha utilizado el tipo
Country dentro del tipo
PostalAddress

39
41
Microdata
Algunos ejemplos de utilización de microdata en diferentes elementos
HTML

40
42 Ejemplos de webs bien estructuradas

41
43 3. HTML 5
MULTIMEDIA
44
El elemento <video>
El elemento <video> es uno de los dos
asesinos de Flash
Fue diseñado para eliminar los
horribles objetos Flash incrustados
en la web

43
45
El elemento <video>
El atributo controls indica que debe aparecer un panel con los
botones de play, pause, stop, volumen y barra de progreso
Se utilizan varios elementos <source> para añadir más
compatibilidad del video con el navegador web
La compatibilidad se mide por orden de aparición
Se puede utilizar CSS para modificar la apariencia del reproductor

44
46
El elemento <video>
No es posible usar <video> con videos de algunos sitios webs
populares como Youtube, Dailymotion, Vimeo, etc.
El motivo es la promoción y anuncios que se muestran en estos
sitios
En algunos de estos sitios se proporciona el código fuente a añadir
en la página web para incrustar el vídeo
Se puede utilizar un elemento <iframe> para incrustar este tipo de
videos

45
47
El elemento <video>
Algunos atributos interesantes:
preload=“none”
Si el video no debe comenzar a cargarse al entrar en la web
autoplay
Si el video comienza a reproducirse en cuanto se ha cargado el buffer
suficiente
poster=“url”
Elimina el cuadro negro inicial del video y lo sustituye por una imagen
loop
Si se llega al final del video se repetirá en modo bucle
46
48
El elemento <audio>
El elemento <audio> se utiliza para reproducir audio incrustado o
audio en streaming
Es muy similar al elemento <video>
Existe una “Web audio API” diseñada en Javascript para aplicaciones
de música con la posibilidad de introducir múltiples efectos de
sonido

47
49 El elemento <audio>

48
50
Subtítulos
El elemento <track> se utiliza para incluir subtítulos y sonidos de
ruidos como fuego, lluvia, pájaros, disparo de balas, etc

49
51
Subtítulos
El formato estándar de
subtítulos soportados
por HTML5 es WebVTT
(.vtt)
Los famosos subtítulos
en formato .srt no son
soportados de manera Se pueden incluir varios elementos <track>
con subtítulos de varios idiomas
nativa, pero pueden
convertirse a .vtt con El atributo default indica que los subtítulos
herramientas de se activan por defecto al reproducir el video
terceros
50
52
Subtítulos
Se pueden usar multitud de herramientas para subtitular videos
Se puede modificar el tamaño, el estilo, la posición y el color de los
caracteres mostrados para los subtítulos

51

HTML5

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5

Cargado por

Copyright:

Formatos disponibles

HTML5

DIW – FRANCISCO COBERA NAVAS

 2. LENGUAJE DE MARCAS HTML

HTML (Hyper Text Markup Language)

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

Durante la creación de HTML5, se

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5 14

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

En el ejemplo se muestra

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

EFA Moratalaz - LM – Capítulo 5

También podría gustarte