Introduccion a HTML5
14 likes3,908 views
The document provides an overview of HTML5, including its history, key features, and new semantic elements. It covers advancements in multimedia handling, form elements, and CSS3 enhancements, as well as the importance of cross-browser support and feature detection. Additionally, it references various resources for further learning about HTML5 practices and improvements.
![E[att^=”val”]
E[att$=”val”]
E[att*=”val”]
E:empty
E:root E:target
E:nthchild(n) E:enabled
E:nthlastchild(n) E:disabled
E:nthoftype(n) E:checked
E:nthlastoftype(n) E:selection
E:lastchild
E:not(selector)
E:firstoftype E ~ F
E:lastoftype
E:onlychild
E:onlyoftype
Nuevos selectores
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/](https://image.slidesharecdn.com/introhtml5-110325054521-phpapp02/85/Introduccion-a-HTML5-27-320.jpg)
![@fontface {
fontfamily: <aremotefontname>;
src: <source> [,<source>]*;
[fontweight: <weight>];
[fontstyle: <style>];
}
@fontface {
fontfamily: "Bitstream Vera Serif Bold";
src: url("http://server.com/VeraSeBd.ttf");
}
body { fontfamily: "Bitstream Vera Serif Bold", serif }
@font-face
http://www.font-face.com](https://image.slidesharecdn.com/introhtml5-110325054521-phpapp02/85/Introduccion-a-HTML5-31-320.jpg)
![var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;
Algunos navegadores soportan Web SQL Database (WebDB), pero no está
estandarizado.
Local Storage](https://image.slidesharecdn.com/introhtml5-110325054521-phpapp02/85/Introduccion-a-HTML5-35-320.jpg)
![<![if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist," +
"details,figure,footer,header,hgroup,mark,menu,meter," +
"nav,output,progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]>
¿Polyqué? Polyfills ;-)](https://image.slidesharecdn.com/introhtml5-110325054521-phpapp02/85/Introduccion-a-HTML5-44-320.jpg)
Introduccion a HTML5
- 1. INTRODUCCIÓN A Pablo Garaizar Sagarminaga UniEncounter 2011, Eibar/Ermua
- 2. Agenda ● Breve historia de HTML5. ● ¿Qué es y qué no es HTML5? ● Novedades en... ● HTML ● CSS ● JS ● Soporte actual de HTML5
- 4. Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
- 5. ¿Qué es...
- 6. Timed Canvas Web media 2D API playback Storage MIME type and protocol Document handler Microdata editing registration Cross- Browser Drag document history messaging & drop
- 7. ...y qué no es?
- 8. Web Geolocation SQL File API Database WebGL SVG CSS3 The Web Indexed Web Workers Database sockets API
- 9. A pesar de esto...
- 10. JS HTML5 CSS3 APIs
- 11. Novedades
- 12. En HTML
- 14. Nueva estructura de documento
- 16. <time> <time datetime="20110317T17:59:37+01:00" pubdate> March 17, 2011 5:37pm GMT+1 </time> <mark> <p>This is <m>really important</m> to understand HTML5</p> Etiquetas semánticas
- 17. <meter> <p>Gforce is <meter value="9.2" min="0" max="19.6" low="9.5" high="10.3" optimum="9.8">9.2</meter>. </p> <progress> <p>Downloaded: <progress value="1534602" max="4603807">33%</progress> </p> Etiquetas semánticas
- 19. <canvas> <canvas id=”area” width=”320” height=”240”> </canvas> <script> function draw() { var area = document.getElementById("area"); var ctx = area.getContext("2d"); ctx.fillRect(50, 25, 150, 100); } </script> Se pueden hacer muchas cosas: rectángulos, círculos, elipses, caminos, texto, imágenes, gradientes, transformaciones. Canvas
- 21. <input> <input type="search" search box type="number" spinbox type="range" slider type="color" color picker type="tel" telephone number type="url" web address type="email" email address type="date|time|month|week|datetime" required autofocus placeholder=”Type here...” /> Formularios
- 24. <details> Dive into HTML5 <details open> <legend>Pilgrim, M. (2011)</legend> <p> Mark Pilgrim, Dive into HTML5, <a href=”http://diveintohtml5.org”>updated!</a>. </p> </details> Etiquetas interactivas
- 26. En CSS
- 27. E[att^=”val”] E[att$=”val”] E[att*=”val”] E:empty E:root E:target E:nthchild(n) E:enabled E:nthlastchild(n) E:disabled E:nthoftype(n) E:checked E:nthlastoftype(n) E:selection E:lastchild E:not(selector) E:firstoftype E ~ F E:lastoftype E:onlychild E:onlyoftype Nuevos selectores http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
- 29. #skew { transform:skew(35deg); } #scale { transform:scale(1,0.5); } #rotate { transform:rotate(45deg); } #translate { transform:translate(10px, 20px); } #rotateskewscaletranslate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); } Transformaciones http://css3.bradshawenterprises.com/
- 30. #id { webkittransition: all 1s easeinout; moztransition: all 1s easeinout; otransition: all 1s easeinout; transition: all 1s easeinout; } Transiciones
- 31. @fontface { fontfamily: <aremotefontname>; src: <source> [,<source>]*; [fontweight: <weight>]; [fontstyle: <style>]; } @fontface { fontfamily: "Bitstream Vera Serif Bold"; src: url("http://server.com/VeraSeBd.ttf"); } body { fontfamily: "Bitstream Vera Serif Bold", serif } @font-face http://www.font-face.com
- 32. En JS
- 34. function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status); } Eventos nuevos: window.ononline window.onoffline Offline / online
- 35. var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo); var foo = localStorage["bar"]; // ... localStorage["bar"] = foo; Algunos navegadores soportan Web SQL Database (WebDB), pero no está estandarizado. Local Storage
- 36. history.pushState(json, title, url); addEvent(window, 'popstate', function (event) { var data = event.state; //... }); Web History
- 37. Todo esto, ¿para cuándo?
- 38. En teoría, HTML5 no será un estándar hasta 2022
- 39. En la práctica, soportadas muchas cosas http://www.findmebyip.com/litmus
- 40. Buena práctica: detectar funcionalidades soportadas
- 43. ¿Y si no hay soporte? Polyfills
- 49. Dive into HTML5 http://diveintohtml5.org/
- 51. Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
- 52. HTML 5 Demos and Examples http://html5demos.com
- 54. Referencias ● Dive into HTML5. ● W3Schools. ● IBM developer networks. ● Quackit. ● HTML5 Rocks. ● HTML5 Demos and Examples.
- 55. All images are property of their own owners*, content is licensed under a Creative Commons by-sa 3.0 license * W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP