Introduccion a HTML5
Upcoming SlideShare
Loading in...5
×
 

Introduccion a HTML5

on

  • 10,825 views

Introducción rápida a HTML5, repasando brevemente la historia de HTML, qué APIs se añaden a HTML5, y qué avances en HTML, CSS y JavaScript rodean a este estándar.

Introducción rápida a HTML5, repasando brevemente la historia de HTML, qué APIs se añaden a HTML5, y qué avances en HTML, CSS y JavaScript rodean a este estándar.

Statistics

Views

Total Views
10,825
Views on SlideShare
9,412
Embed Views
1,413

Actions

Likes
11
Downloads
294
Comments
0

9 Embeds 1,413

http://educacion.creaciondemedios.com 1038
http://localhost 189
http://nandoweb.webcindario.com 125
http://tecnologiaswebs.com 45
http://enekopalencia.tumblr.com 7
http://192.168.1.113 6
http://twitter.com 1
http://paper.li 1
https://si0.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduccion a HTML5 Introduccion a HTML5 Presentation Transcript

  • INTRODUCCIÓN A Pablo Garaizar SagarminagaUniEncounter 2011, Eibar/Ermua
  • Agenda● Breve historia de HTML5.● ¿Qué es y qué no es HTML5?● Novedades en... ● HTML ● CSS ● JS● Soporte actual de HTML5
  • Breve historia...
  • Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
  • ¿Qué es...
  • TimedCanvas Web media2D API playback Storage MIME typeand protocol Document handler Microdata editing registration Cross-Browser Drag document history messaging & drop
  • ...y qué no es?
  • WebGeolocation SQL File API DatabaseWebGL SVG CSS3 The Web Indexed Web Workers Database sockets API
  • A pesar de esto...
  • JSHTML5 CSS3 APIs
  • Novedades
  • En HTML
  • <!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"><!DOCTYPE html> Declaración simplificada
  • Nueva estructura de documento
  • <html><html lang="en"><meta><meta http­equiv="Content­Type" content="text/html; charset=utf­8"><meta charset="utf­8" /><link><link rel=”stylesheet|alternate|icon|license|prefetch|nofollow|noreferrer|pingback|search|sidebar|tag”> Nueva cabecera
  • <time><time datetime="2011­03­17T17: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
  • <meter><p>G­force 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
  • <audio><audio src="music.mp3"    autoplay loop="3" controls preload /><video><video width="320" height="240" controls>  <source src="pr6.mp4"  type=video/mp4; codecs="avc1.42E01E, mp4a.40.2">  <source src="pr6.webm" type=video/webm; codecs="vp8, vorbis">  <source src="pr6.ogv"  type=video/ogg; codecs="theora, vorbis"></video> Multimedia
  • <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
  • <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;stroke­width: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
  • <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
  • <datalist><input type=”text” list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"></datalist><keygen><form action="signup.asp" method="post">  user: <input type="text" name="username" />  encryption: <keygen name="security" />  <input type="submit" /></form> Formularios
  • <menu> + <command><menu>  <command onclick="alert(first!)" label="Do 1st Command"/>  <command onclick="alert(second!)" label="Do 2nd Command"/>  <command onclick="alert(third!)" label="Do 3rd Command"/></menu><datagrid><datagrid>  <table ...></datagrid> Etiquetas interactivas
  • <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
  • <figure> + <figcaption><figure>  <img src=”fig1.jpg” title=”Graphic” />  <figcaption>Figure 1. Overall scores.</figcaption></figure><wbr><p>You can break the line here<wbr> or here<wbr>, or even here<wbr>.</p> Otras etiquetas
  • En CSS
  • E[att^=”val”]E[att$=”val”]E[att*=”val”] E:emptyE:root E:targetE:nth­child(n) E:enabledE:nth­last­child(n) E:disabledE:nth­of­type(n) E:checkedE:nth­last­of­type(n) E:selectionE:last­child E:not(selector)E:first­of­type E ~ FE:last­of­typeE:only­childE:only­of­type Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
  • border­radiusborder­top­left­radiusborder­top­right­radiusborder­bottom­right­radiusborder­bottom­left­radius­webkit­border­radius­webkit­border­top­left­radius­webkit­border­top­right­radius­webkit­border­bottom­right­radius­webkit­border­bottom­left­radius­moz­border­radius­moz­border­radius­topleft­moz­border­radius­topright­moz­border­radius­bottomright­moz­border­radius­bottomleft Bordes redondeados
  • #skew { transform:skew(35deg);}#scale { transform:scale(1,0.5);}#rotate { transform:rotate(45deg);}#translate { transform:translate(10px, 20px);}#rotate­skew­scale­translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);} Transformaciones http://css3.bradshawenterprises.com/
  • #id { ­webkit­transition: all 1s ease­in­out; ­moz­transition: all 1s ease­in­out; ­o­transition: all 1s ease­in­out; transition: all 1s ease­in­out;} Transiciones
  • @font­face {  font­family: <a­remote­font­name>;  src: <source> [,<source>]*;  [font­weight: <weight>];  [font­style: <style>];}@font­face {  font­family: "Bitstream Vera Serif Bold";  src: url("http://server.com/VeraSeBd.ttf");}   body { font­family: "Bitstream Vera Serif Bold", serif } @font-face http://www.font-face.com
  • En JS
  • function get_location() {  navigator.geolocation.getCurrentPosition(show_location);}function show_location(position) {  var latitude = position.coords.latitude;  var longitude = position.coords.longitude;  alert(You are here: (+latitude+,+longitude+));} Geolocalización
  • function show_status() {  var status = navigator.onLine ? Online : Offline;  alert(You are +status);}Eventos nuevos: window.ononline window.onoffline Offline / online
  • 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
  • history.pushState(json, title, url);addEvent(window, popstate, function (event) {  var data = event.state;  //...}); Web History
  • Todo esto, ¿para cuándo?
  • En teoría, HTML5 no será un estándar hasta 2022
  • En la práctica, soportadas muchas cosas http://www.findmebyip.com/litmus
  • Buena práctica: detectarfuncionalidades soportadas
  • function supports_canvas() {  return !!document.createElement(canvas).getContext;  //return Modernizr.canvas;}function supports_video() {  return !!document.createElement(video).canPlayType;  //return Modernizr.video;}function supports_ogg_theora_video() {  if (!supports_video()) { return false; }  var v = document.createElement("video");  return v.canPlayType(video/ogg; codecs="theora, vorbis");  //return Modernizr.video.ogg;} Detección de funcionalidades
  • Modernizrhttp://www.modernizr.com
  • ¿Y si no hay soporte? Polyfills
  • <!­­[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 ;-)
  • Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • Para saber más...
  • W3Chttp://dev.w3.org/html5/spec/Overview.html
  • WHATWGhttp://whatwg.org/html
  • Dive into HTML5 http://diveintohtml5.org/
  • HTML5 Rockshttp://www.html5rocks.com
  • Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
  • HTML 5 Demos and Examples http://html5demos.com
  • Muchas gracias ;-)
  • Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.
  • All images are property of their ownowners*, content is licensed under aCreative Commons by-sa 3.0 license * W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP