More Related Content Similar to Introduccion a HTML5 (20) More from Pablo Garaizar (20) Introduccion a HTML52. Agenda
● Breve historia de HTML5.
● ¿Qué es y qué no es HTML5?
● Novedades en...
● HTML
● CSS
● JS
● Soporte actual de HTML5
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
8. Web
Geolocation SQL File API
Database
WebGL SVG CSS3
The
Web Indexed Web
Workers Database sockets
API
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
20. <svg>
<svg id="flag" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
<rect id="redrect" width="300" height="100" fill="white" />
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;strokewidth:2"/>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
<polygon points="20,10 300,20, 170,50" fill="white" />
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
SVG
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
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
39. En la práctica, soportadas muchas cosas
http://www.findmebyip.com/litmus
44. <![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 ;-)
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