Presentación preparada para el webinario gratuito sobre HTML5 para el Centro de e-Learning de UTN-FRBA

1. Webinario Online
1
Introducción a HTML5
Docente: Gabriel Falcone

2. 2Webinario Online //
Un poco de historia
1989 – HTML 1.0, World Wide Web
1993 – HTML+
1994 – Se crea W3C
1995 – HTML 3.0
1997 – HTML 4.0
2004 – Comienza HTML 5.0
2014 – HTML 5.0 es oficial

3. 3Webinario Online //
Pero… ¿qué es HTML5?

4. 4Webinario Online //
Pero… ¿qué es HTML5?

5. 5Webinario Online //
Pero… ¿qué es HTML5?

6. 6Webinario Online //
Novedades en HTML5
Nuevos elementos estructurales
Nuevos elementos multimedia
Nuevos elementos gráficos
Mejoras en el manejo de formularios
Nuevas APIs

7. 7Webinario Online //
Nuevos elementos estructurales
<div class="header">...</div>
<header>...</header>
<div class="aside">...</div>
<aside>...</aside>

8. 8Webinario Online //
Nuevos elementos estructurales

9. 9Webinario Online //
Nuevos elementos multimedia
<video width="400" controls>
<source src=http://www.w3schools.com/html/mov_bbb.mp4
type="video/mp4">
</video>
http://jsbin.com/cogifo/edit?html,output

10. 10Webinario Online //
Nuevos elementos gráficos
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
https://jsbin.com/gezane/edit?html,output

11. 11Webinario Online //
Nuevos elementos gráficos
<canvas id="myCanvas" height="140" width="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.ellipse(200, 80, 100, 50, 0, 0, Math.PI*2);
ctx.fillStyle='yellow';
ctx.fill();
ctx.strokeStyle='purple';
ctx.lineWidth = 2;
ctx.stroke();
</script>
https://jsbin.com/hikiwu/edit?html,output

12. 12Webinario Online //
Mejora en el manejo de formularios
https://jsbin.com/bizeda/edit?html,output

13. 13Webinario Online //
Nuevas APIs
Geolocation
Web Storage
File
Cache
WebSockets
History
IndexedDB
https://jsbin.com/kesalu/edit?html,output
https://jsbin.com/niqoju/edit?html,output

14. 14Webinario Online //
¿Cómo es el curso?
•Videos y material de lectura
•Cada uno a su propio ritmo
•Una unidad por semana
•Reuniones virtuales con el instructor
•Actividades a realizar

15. 15Webinario Online //
¿Dónde obtengo más información?
http://www.sceu.frba.utn.edu.ar/e-learning/cursos-a-distancia/Certificaciones-
IT/Microsoft/MCSD-Web-Applications/MCSD-3A-70%E2%80%93480-
Programming-in-HTML5-with-JavaScript-and-CSS3/temario.html

16. 16Webinario Online //
¿Dónde obtengo más información?
http://bit.ly/1UE3Ywt

17. 17Webinario Online //
Muchas gracias