Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML. Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8

1. Néstor Ramírez Salas
nramirez@businesstech.pe

2. AGENDA
HTML5
CSS3
1.
2.
3.
4.
5.
6.
7.
•
•
•
•
•
•
•
•
•
•
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés
Bordes
Sombras
Transparencias
Texto, transformaciones
Texto, tratamientos
Texto, 3D
Fondos
Pseudo elementos
Selectores
Filtros

3. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

4. HTML5
1. QUÉ ES
•
Es la nueva versión del lenguaje de marcación
HTML para desarrollo de páginas web.
•
Es un término que agrupa el uso de diversos
conceptos relacionados al desarrollo web,
como por ejemplo: animaciones, css3, jquery,
multimedia, ajax, etc.
Cuando vemos un sitio bonito, moderno, elegante,
con animaciones, sonido, video, etc… seguro que
pensamos: “Eso es html5”.
Ejemplo: animación en página web
http://www.southmountain.com.ar/

5. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

6. HTML5
2. NOVEDADES
•
Mejora en la Estructura, con etiquetas que
representan partes típicas de un página web.
•
Etiquetas para contenido específico como:
Video, Audio, Input (mail).
•
Canvas, dibujo y animaciones sin flash :)
•
Nuevas APIs para interfaz de usuario, el famoso
“drag and drop”, geolocalización, etc.
Ejemplo: rompecabeza
http://www.thisshell.com/

7. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

8. HTML5
3. VENTAJAS
•
•
•
•
Reproducción de juegos directamente en
el navegador.
Compatibilidad con dispositivos móviles.
Mejora en la web semántica,
programación y en el uso de javascript y
CSS3.
Presentación mejorada de contenido
multimedia, sin plugin NO flash :)
Ejemplo: juegos
http://www.f-i.com/html5/basketball/
http://buzz.jaysalvat.com/demo/

9. ¿Cuántos han visto este mensaje?

10. ¿Y este mensaje?

11. Y por último… :(

12. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

13. HTML5
4. WEB SEMÁNTICA
• <header>
Define la cabecera de la página.
• <nav>
Define la sección para el menú principal.
• <section>
Define una sección en la página.
• <article>
Especifica un contenido específico.
• <aside>
Define una sección para contenido secundario. Columna lateral.
• <footer>
Define la sección final de una página o una sección.

14. HTML5
4. WEB SEMÁNTICA
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>

15. HTML5
4. WEB SEMÁNTICA

16. HTML5
4. WEB SEMÁNTICA
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

17. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

18. HTML5
5. MULTIMEDIA
• <video>
<video src="movie.mp4" type="video/mp4" width="420" controls> </video>
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
</video>
• <audio>
<audio src="music.mp3" preload="auto" controls> </audio>
 controls
 autoplay
 loop
: Muestra los controles estándar de HTML5 para audio.
: Hace que el audio se reproduzca automáticamente.
: Hace que el audio se repita automáticamente.

19. HTML5
5. MULTIMEDIA
• <canvas>
<canvas id="b" width="300" height="225">
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</canvas>
Ejemplo
https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch
Info
http://diveintohtml5.info/canvas.html

20. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

21. HTML5
6. FORMULARIOS
nuevos tipos <
input>
• Search
• Url
<input type="search">
<input type="url">
• Tel
• Email
<input type="tel" pattern="S{5,10}">
<input required type="email">
• Number
• Color
<input required type="number">
<input type="color">

22. HTML5
6. FORMULARIOS
• Date
<input type="date" name="fecha">
• Month
<input type="month" name="mes">
• Week
<input type="week" name="semana">

23. AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.
Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Elementos para formularios
Enlaces de interés

24. HTML5
7. ENLACES DE INTERÉS
• Guía official
http://dev.w3.org/html5/html-author/
• Tester html5 para navegadores
http://beta.html5test.com/
• Ejemplos y tutorials online
http://playground.html5rocks.com/
• Información sobre canvas
http://diveintohtml5.info/canvas.html
• Librerías javascript para HTML5
http://artysmedia.blogspot.com/2012/07/librerias-javascript-para-html5.html

25. ¿ AÚN TENEMOS TIEMPO
PARA
VER EJEMPLOS
CSS3 ?

26. CSS3
•
•
•
•
•
•
Bordes
Sombras
Transparencias
Texto, transformaciones
Texto, tratamientos
Texto, 3D
•
•
•
•
Fondos
Pseudo elementos
Selectores
Filtros

27. APUESTO QUE
NO CONOCES AL
ÚLTIMO
PERSONAJE

28. EL ES…

29. Y EL ES…

30. Y ESTE SEÑOR ES…

31. ¿Y QUIÉN ES EL?

32. El creador de la WEB
http://es.wikipedia.org/wiki/Tim_Berners-Lee
http://evolutionofweb.appspot.com/

33. GRACIAS
Néstor Ramírez Salas
Drupal Front End Developer
nramirez@businesstech.pe
nramirezsalas@outlook.com.pe
nramirezsalas
nramirezsalas
994 736 607