HTML5:¿Qué es HTML5?<br />Sergio Luján Mora<br />sergio.lujan@ua.es<br />HTML5-02<br />
Vídeo de esta presentación<br />Puedes ver esta presentación en vídeo:<br />http://www.youtube.com/watch?v=1hR7EtD6Bns<br />
HTML<br />CSS<br />DOM<br />Javascript<br />dhtml<br />
Dhtml<br />XHR<br />XML<br />JSON<br />ajax<br />
Geolocation<br />Cache<br />database<br />Web workers<br />Ajax<br />HTML5<br />CANVAS<br />SVG<br />HTML5<br />
<article><br /><aside><br /><audio><br /><datalist><br /><footer><br /><header><br /><hgroup><br /><meter><br /><nav><br /...
<canvas id="myDrawing" width="200" height="200"><p>Tunavegador no admite canvas.</p></canvas><br />vardrawingCanvas = docu...
<rect<br />    x="0" y="0" <br />    width="100" height="100" <br />    fill="blue" stroke="red" <br />    stroke-width="5...
navigator.geolocation.getCurrentPosition(<br />function(position) {  <br />varlat = position.coords.latitude;<br />varlon ...
CACHE MANIFEST<br />/static/stickies.html<br />/media/deleteButton.png<br />/media/deleteButtonPressed.png<br />/css/stick...
vardb = window.openDatabase("NoteTest", "1.0",<br />                                                           "Example DB...
<script><br />varworker = new Worker('worker.js');<br />worker.onmessage = function (event) {<br />      console.log('Resu...
Más información:<br />http://desarrolloweb.dlsi.ua.es/<br />sergio.lujan@ua.es<br />
Créditos de fotografías e imágenes:<br />http://www.sxc.hu/photo/1213666<br />http://www.w3.org/html/logo/<br />http://www...
Upcoming SlideShare
Loading in …5
×

HTML5: ¿Qué es HTML5?

3,447 views

Published on

Vídeo de la presentación: http://www.youtube.com/watch?v=1hR7EtD6Bns

HTML5: ¿Qué es HTML5? Tecnologías de la familia HTML5:
- HTML5
- Canvas
- SVG
- Geolocalización
- Caché
- Base de datos
- Web workers

Más información: http://desarrolloweb.dlsi.ua.es
Autor: Sergio Luján Mora, profesor de la Universidad de Alicante (http://www.ua.es)

Published in: Education
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,447
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5: ¿Qué es HTML5?

  1. 1. HTML5:¿Qué es HTML5?<br />Sergio Luján Mora<br />sergio.lujan@ua.es<br />HTML5-02<br />
  2. 2. Vídeo de esta presentación<br />Puedes ver esta presentación en vídeo:<br />http://www.youtube.com/watch?v=1hR7EtD6Bns<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9. HTML<br />CSS<br />DOM<br />Javascript<br />dhtml<br />
  10. 10. Dhtml<br />XHR<br />XML<br />JSON<br />ajax<br />
  11. 11. Geolocation<br />Cache<br />database<br />Web workers<br />Ajax<br />HTML5<br />CANVAS<br />SVG<br />HTML5<br />
  12. 12.
  13. 13. <article><br /><aside><br /><audio><br /><datalist><br /><footer><br /><header><br /><hgroup><br /><meter><br /><nav><br /><progress><br /><section><br /><time><br />
  14. 14. <canvas id="myDrawing" width="200" height="200"><p>Tunavegador no admite canvas.</p></canvas><br />vardrawingCanvas = document.getElementById('myDrawing');// Comprueba si el navegador admite canvasif(drawingCanvas.getContext) {// Inicializa el contexto de dibujo en 2 dimensionesvarcontext = drawingCanvas.getContext('2d');// Dibuja un arco<br />context.arc(100, 100, 50, 0, Math.PI*2, true);<br /><canvas><br /><canvas id="myDrawing" width="200" height="200"><p>Tunavegador no admite canvas.</p></canvas><br />
  15. 15.
  16. 16.
  17. 17. <rect<br /> x="0" y="0" <br /> width="100" height="100" <br /> fill="blue" stroke="red" <br /> stroke-width="5px" <br />rx="8" ry="8" <br /> id="myRect" class="chart" /><br />
  18. 18. navigator.geolocation.getCurrentPosition(<br />function(position) { <br />varlat = position.coords.latitude;<br />varlon = position.coords.longitude;<br />showLocation(lat, lon);<br /> } <br />);<br />
  19. 19. CACHE MANIFEST<br />/static/stickies.html<br />/media/deleteButton.png<br />/media/deleteButtonPressed.png<br />/css/stickies.css<br />/js/stickies.js<br /><bodymanifest="./cache.manifest"><br /></body><br />
  20. 20. vardb = window.openDatabase("NoteTest", "1.0",<br /> "Example DB", 200000);<br />functionsaveMe(id, text, timestamp, left, top, zIndex) {<br />db.transaction(<br />function (tx) {<br />tx.executeSql(<br /> "INSERT INTO WebKitStickyNotes "<br /> + "(id, note, timestamp, left, top, zindex) "<br /> + "VALUES (?, ?, ?, ?, ?, ?)", <br /> [id, text, timestamp, left, top, zIndex]);<br /> } <br /> ); <br />}<br />
  21. 21.
  22. 22. <script><br />varworker = new Worker('worker.js');<br />worker.onmessage = function (event) {<br /> console.log('Results: ' + event.data);<br />};<br /></script><br />
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30. Más información:<br />http://desarrolloweb.dlsi.ua.es/<br />sergio.lujan@ua.es<br />
  31. 31. Créditos de fotografías e imágenes:<br />http://www.sxc.hu/photo/1213666<br />http://www.w3.org/html/logo/<br />http://www.w3.org/Consortium/facts.html<br />http://dev.xguru.net/html5/src/html5timeline.png<br />http://www.sxc.hu/photo/1238327<br />

×