Diferencia entre revisiones de «Usuario:Lmorillas/modulo lenguajes de marcas/html5/presentacion»

De WikiEducator
Saltar a: navegación, buscar
 
Línea 48: Línea 48:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
   <!DOCTYPE html>
 
   <!DOCTYPE html>
−
 
+
   <head>
−
   <meta charset="utf-8" />
+
    <meta charset="utf-8" />
 +
    <link rel="stylesheet" href="style-original.css" />
 +
  </head>
 
</source>
 
</source>
 
|Title=Meta diferencias}}
 
|Title=Meta diferencias}}
Línea 62: Línea 64:
 
* http://html5gallery.com/
 
* http://html5gallery.com/
 
}}
 
}}
 +
 +
<source lang="html4strict">
 +
<!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>
 +
</source>

Última revisión de 09:25 18 abr 2013



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»