Introducción a HTML5

De WikiEducator
Saltar a: navegación, buscar



Icon objectives.jpg

Presentacion html5

  • Muy compatible con lo que ya existe
    • Las nuevas características de marcado funcionan igual que las antiguas (alguna semántica ha cambiado)
    • Las nuevas APIs se basan en el mismo JavaScript y DOM
  • Nuevas y potentes características de HTML (validación de formularios, vídeo ...)
  • Más adecuado para escribir aplicaciones dinámicas
  • Tiene un algoritmo de interpretación claramente definido (todos los navegadores que implementen HTML5 crearán un mismo DOM a partir de un mismo marcado: interoperabilidad)



Icon objectives.jpg

Diferencias

  • Nuevos elementos semánticos. 
 <nav>, <header>, <footer> y <article>.
  • Nuevas características de formularios: selectores de fecha, deslizadores y validación en el cliente
  • Audio y vídeo nativos: <audio> y <video>
  • API de dibujo en Canvas: El elemento <canvas> (lienzo) y API asociada
  • Web Sockets: conexión continua entre un servidor y un cliente en un puerto específico y enviar datos en ambas direcciones hasta que el puerto se cierre.
  • Aplicaciones web offline: Los cachés de aplicación permiten guardar una copia de todos los elementos y archivos necesarios para ejecutar aplicaciones web localmente, y las bases de datos Web SQL permiten guardar una copia local de los datos de una aplicación web.
  • Almacenamiento Web.
  • Web workers: permiten crear procesos de fondo para hacerse cargo de parte del cálculo.
  • Geolocalización.
  • CSS3 no es parte de HTML5.



Icon objectives.jpg

Elementos estructurales

<header> (cabecera)
Se utiliza para contener la cabecera de un sitio.
<footer> (pie de página)
Contiene el pie de página de un sitio.
<nav>
Contiene la funcionalidad de navegación para la página.
<article> (artículo)
Contiene una pieza independiente de contenido, que tendría sentido sindicar como elemento RSS como, por ejemplo, una noticia.
<section> (sección)
Se utiliza bien para agrupar artículos en diferentes temas, bien para definir las diferentes secciones de un solo artículo.
se usa para marcar tiempos y fechas.
<aside> (aparte)
Define un bloque de contenido relacionado con el contenido principal que lo rodea, pero que no es esencial para el flujo del mismo.
<hgroup> (heading group, o grupo de encabezados)
Se utiliza para incluir más de un encabezado si quieres que cuente como un único encabezado en la estructura de encabezado de la página.
<figure> y <figcaption> (figura y cita de figura)
Se usan para encapsular una figura como un único elemento y contener el título de la figura, respectivamente.

</DIV>



Icon objectives.jpg

Meta diferencias

  <!DOCTYPE html>
  <head> 
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style-original.css" />
  </head>



Icon inter.gif

Recursos de la Web

Documentación

Ejemplos



<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Título</title>
   <link href="css/html5reset.css" rel="stylesheet" />
   <link href="css/style.css" rel="stylesheet" />
</head>
<body>
   <header>
      <hgroup>
         <h1>Cabecera en h1</h1>
         <h2>Subtítulo in h2</h2>
      </hgroup>
   </header>
   <nav>
      <ul>
         <li><a href="#">Opción de menú 1</a></li>
         <li><a href="#">Opción de menú 2</a></li>
         <li><a href="#">Opción de menú 3</a></li>
      </ul>
   </nav>
   <section>
      <article>
         <header>
            <h1>Artículo #1</h1>
         </header>
         <section>
            Este es el primer artículo. Está <mark>destacado</mark>.
         </section>
      </article>
      <article>
         <header>
            <h1>Artículo #2</h1>
         </header>
         <section>
            Este es el segundo artículo. Pueden ser posts de un blog, etc. 
         </section>
      </article>
   </section>
   <aside>
      <section>
         <h1>Links</h1>
         <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
         </ul>
      </section>
      <figure>
         <img width="85" height="85" 
            src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
            alt="Jennifer Marsman" />
         <figcaption>Jennifer Marsman</figcaption>
      </figure>
   </aside>
   <footer>Pie de página - Copyright 2011</footer>
</body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Lmorillas/modulo_lenguajes_de_marcas/html5/presentacion&oldid=12179»