SlideShare a Scribd company logo
1 of 64
Download to read offline
REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEB
           HTML5, CSS3 y las nuevas API de JavaScript




                 Pablo Garaizar Sagarminaga
                       BilboStack, 2012
                 Universidad de Deusto, Bilbao
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
HTML5
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
Timed
Canvas                       Web
                 media
2D API           playback   Storage


 MIME type
and protocol                Document
  handler
                Microdata
                             editing
 registration




                  Cross-
Browser                      Drag
                document
 history        messaging   & drop
Web
Geolocation    SQL       File API
              Database




WebGL         SVG         CSS3




   Web                    Web
              WebRTC
 Workers                 sockets
JS
HTML5   CSS3
               APIs
Novedades
En el marcado...
Repaso rápido a los nuevos estándares web
http://www.w3.org/TR/html5-diff/
<!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" manifest="app.manifest">


<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
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
En CSS3...
E[att^="val"]
E[att$="val"]
E[att*="val"]
                                   E:empty
E:root
                                   E:target
E:nth-child(n)
                                   E:enabled
E:nth-last-child(n)
                                   E:disabled
E:nth-of-type(n)
                                   E:checked
E:nth-last-of-type(n)
                                   E:selection
E:last-child
                                   E:not(selector)
E:first-of-type
                                   E ~ F
E:last-of-type
E:only-child
E:only-of-type




                  Nuevos selectores
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
#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://dev.w3.org/csswg/css3-transforms/
div {
  transition-property: opacity;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-timing-function: linear;
  opacity: 30%;
}

div:hover {
  opacity: 100%;
}




                    Transiciones
            http://www.w3.org/TR/css3-transitions/
div {
  animation-name: diagonal-slide;
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes diagonal-slide {

    0% {
      left: 0;
      top: 0;
    }

    100% {
      left: 100px;
      top: 100px;
    }

}

                     Animaciones
            http://www.w3.org/TR/css3-animations/
@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
Repaso rápido a los nuevos estándares web
div {
  webkit-transition: opacity 2s linear;
  moz-transition: opacity 2s linear;
  ms-transition: opacity 2s linear;
  o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}




       El infierno de los prefijos
      http://www.sitepoint.com/opera-css3-webkit-prefix
En JavaScript...
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
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
Repaso rápido a los nuevos estándares web
Timing control for script-based
                              animations
                          (RequestAnimationFrame)


                                                      Web Audio API /
  Fullscreen API                                       Audio Data API



                                                          getUserMedia()
Pointer Lock API


                                                        WebRTC
     Timed track API
      (WebVTT, WebSRT)


                             Server-Sent Events
                                   (EventSource)
Repaso rápido a los nuevos estándares web
Audio Data API + WebGL = insane
  http://videos.mozilla.org/serv/blizzard/audio-slideshow
Y nueva sintaxis...
http://espadrine.github.com/New-In-A-Spec/es6/
Todo esto, ¿para cuándo?
En teoría, HTML5 no será un
   estándar hasta 2022
¿Qué hacemos hasta
    entonces?
Repaso rápido a los nuevos estándares web
Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Para saber más...
W3C
http://dev.w3.org/html5/spec/Overview.html
WHATWG
http://whatwg.org/html
Dive into HTML5
 http://diveintohtml5.org/
HTML5 Rocks
http://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 own
 owners*, content is licensed under a
Creative Commons by-sa 3.0 license




* W3C, WHATWG, Dive into HTML5, HTML5 Rocks, Modernizr, FindmebyIP, Troll.me,
                             Memegenerator.net

More Related Content

Viewers also liked

La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidades
La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidadesLa Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidades
La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidadesPablo Garaizar
 
El problema de parada y los castores laboriosos
El problema de parada y los castores laboriososEl problema de parada y los castores laboriosos
El problema de parada y los castores laboriososPablo Garaizar
 
Errores comunes en la visualización de datos y algunas soluciones
Errores comunes en la visualización de datos y algunas solucionesErrores comunes en la visualización de datos y algunas soluciones
Errores comunes en la visualización de datos y algunas solucionesPablo Garaizar
 
Introducción al cracking en GNU/Linux
Introducción al cracking en GNU/LinuxIntroducción al cracking en GNU/Linux
Introducción al cracking en GNU/Linuxguest45ed91
 
Introducción al Software Libre - ITSAS - GNU/Linux
Introducción al Software Libre - ITSAS - GNU/LinuxIntroducción al Software Libre - ITSAS - GNU/Linux
Introducción al Software Libre - ITSAS - GNU/LinuxPablo Garaizar
 
Introducción al Software Libre - ITSAS - Introducción
Introducción al Software Libre - ITSAS - IntroducciónIntroducción al Software Libre - ITSAS - Introducción
Introducción al Software Libre - ITSAS - IntroducciónPablo Garaizar
 
Introducción al Software Libre - ITSAS - Aplicaciones
Introducción al Software Libre - ITSAS - AplicacionesIntroducción al Software Libre - ITSAS - Aplicaciones
Introducción al Software Libre - ITSAS - AplicacionesPablo Garaizar
 
La cultura de la remezcla
La cultura de la remezclaLa cultura de la remezcla
La cultura de la remezclaPablo Garaizar
 
La cultura de la remezcla
La cultura de la remezclaLa cultura de la remezcla
La cultura de la remezclaPablo Garaizar
 
Kopia material osagarria
Kopia   material osagarriaKopia   material osagarria
Kopia material osagarriagabitxuluis
 
MATEMATIKA 5 SANTILLANA
MATEMATIKA 5  SANTILLANAMATEMATIKA 5  SANTILLANA
MATEMATIKA 5 SANTILLANAM M
 
MATEMÁTICAS 6º ANAYA
MATEMÁTICAS   6º  ANAYAMATEMÁTICAS   6º  ANAYA
MATEMÁTICAS 6º ANAYAM M
 
Seguridad en redes WiFi
Seguridad en redes WiFiSeguridad en redes WiFi
Seguridad en redes WiFiPablo Garaizar
 

Viewers also liked (18)

La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidades
La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidadesLa Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidades
La Web como plataforma de referencia: viejos ataques y nuevas vulnerabilidades
 
El problema de parada y los castores laboriosos
El problema de parada y los castores laboriososEl problema de parada y los castores laboriosos
El problema de parada y los castores laboriosos
 
Errores comunes en la visualización de datos y algunas soluciones
Errores comunes en la visualización de datos y algunas solucionesErrores comunes en la visualización de datos y algunas soluciones
Errores comunes en la visualización de datos y algunas soluciones
 
Introducción al cracking en GNU/Linux
Introducción al cracking en GNU/LinuxIntroducción al cracking en GNU/Linux
Introducción al cracking en GNU/Linux
 
Introducción al Software Libre - ITSAS - GNU/Linux
Introducción al Software Libre - ITSAS - GNU/LinuxIntroducción al Software Libre - ITSAS - GNU/Linux
Introducción al Software Libre - ITSAS - GNU/Linux
 
Introducción al Software Libre - ITSAS - Introducción
Introducción al Software Libre - ITSAS - IntroducciónIntroducción al Software Libre - ITSAS - Introducción
Introducción al Software Libre - ITSAS - Introducción
 
Introducción al Software Libre - ITSAS - Aplicaciones
Introducción al Software Libre - ITSAS - AplicacionesIntroducción al Software Libre - ITSAS - Aplicaciones
Introducción al Software Libre - ITSAS - Aplicaciones
 
La cultura de la remezcla
La cultura de la remezclaLa cultura de la remezcla
La cultura de la remezcla
 
La cultura de la remezcla
La cultura de la remezclaLa cultura de la remezcla
La cultura de la remezcla
 
Turing y la Segunda Guerra Mundial. Alan Turing Year
Turing y la Segunda Guerra Mundial. Alan Turing YearTuring y la Segunda Guerra Mundial. Alan Turing Year
Turing y la Segunda Guerra Mundial. Alan Turing Year
 
La máquina de Turing, Alan Turing Year
La máquina de Turing, Alan Turing YearLa máquina de Turing, Alan Turing Year
La máquina de Turing, Alan Turing Year
 
El problema de parada y los castores laboriosos. Alan Turing Year
El problema de parada y los castores laboriosos. Alan Turing Year El problema de parada y los castores laboriosos. Alan Turing Year
El problema de parada y los castores laboriosos. Alan Turing Year
 
Turing Test: «Can machines think?». Alan Turing Year
Turing Test: «Can machines think?». Alan Turing YearTuring Test: «Can machines think?». Alan Turing Year
Turing Test: «Can machines think?». Alan Turing Year
 
Kopia material osagarria
Kopia   material osagarriaKopia   material osagarria
Kopia material osagarria
 
MATEMATIKA 5 SANTILLANA
MATEMATIKA 5  SANTILLANAMATEMATIKA 5  SANTILLANA
MATEMATIKA 5 SANTILLANA
 
MATEMÁTICAS 6º ANAYA
MATEMÁTICAS   6º  ANAYAMATEMÁTICAS   6º  ANAYA
MATEMÁTICAS 6º ANAYA
 
Seguridad en VoIP
Seguridad en VoIPSeguridad en VoIP
Seguridad en VoIP
 
Seguridad en redes WiFi
Seguridad en redes WiFiSeguridad en redes WiFi
Seguridad en redes WiFi
 

Similar to Repaso rápido a los nuevos estándares web

Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortalJennifer Bourey
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyonddynamis
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Similar to Repaso rápido a los nuevos estándares web (20)

html5
html5html5
html5
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Html5 and css3
Html5 and css3Html5 and css3
Html5 and css3
 
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesignerHTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
HTML5 Intro
HTML5 IntroHTML5 Intro
HTML5 Intro
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 

More from Pablo Garaizar

De la robótica educativa al pensamiento computacional
De la robótica educativa al pensamiento computacionalDe la robótica educativa al pensamiento computacional
De la robótica educativa al pensamiento computacionalPablo Garaizar
 
¿Cómo se crea una experiencia lúdica?
¿Cómo se crea una experiencia lúdica?¿Cómo se crea una experiencia lúdica?
¿Cómo se crea una experiencia lúdica?Pablo Garaizar
 
Luces y sombras en el uso de la tecnología en clase
Luces y sombras en el uso de la tecnología en claseLuces y sombras en el uso de la tecnología en clase
Luces y sombras en el uso de la tecnología en clasePablo Garaizar
 
Aspectos psicológicos en el diseño de juegos de mesa
Aspectos psicológicos en el diseño de juegos de mesaAspectos psicológicos en el diseño de juegos de mesa
Aspectos psicológicos en el diseño de juegos de mesaPablo Garaizar
 
Educación basada en evidencias
Educación basada en evidenciasEducación basada en evidencias
Educación basada en evidenciasPablo Garaizar
 
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...Pablo Garaizar
 
Neurobollocks: el nuevo aceite de serpiente
Neurobollocks: el nuevo aceite de serpienteNeurobollocks: el nuevo aceite de serpiente
Neurobollocks: el nuevo aceite de serpientePablo Garaizar
 
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejor
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejorAlgunas cuestiones psicológicas que nos pueden ayudar a diseñar mejor
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejorPablo Garaizar
 
Identidad digital y feminismo
Identidad digital y feminismoIdentidad digital y feminismo
Identidad digital y feminismoPablo Garaizar
 
Decisiones tecnológicas, consecuencias ideológicas
Decisiones tecnológicas, consecuencias ideológicasDecisiones tecnológicas, consecuencias ideológicas
Decisiones tecnológicas, consecuencias ideológicasPablo Garaizar
 
Etica investigaciontecnologica2013
Etica investigaciontecnologica2013Etica investigaciontecnologica2013
Etica investigaciontecnologica2013Pablo Garaizar
 
Video-games 101: Unleashing the potential of students and teachers to create ...
Video-games 101: Unleashing the potential of students and teachers to create ...Video-games 101: Unleashing the potential of students and teachers to create ...
Video-games 101: Unleashing the potential of students and teachers to create ...Pablo Garaizar
 
Scratch Eguna: From Scratch Day to Scratch every day
Scratch Eguna: From Scratch Day to Scratch every dayScratch Eguna: From Scratch Day to Scratch every day
Scratch Eguna: From Scratch Day to Scratch every dayPablo Garaizar
 
Redes sociales en Internet: guía para madres y padres
Redes sociales en Internet: guía para madres y padresRedes sociales en Internet: guía para madres y padres
Redes sociales en Internet: guía para madres y padresPablo Garaizar
 
Introducción a las vulnerabilidades web
Introducción a las vulnerabilidades webIntroducción a las vulnerabilidades web
Introducción a las vulnerabilidades webPablo Garaizar
 
Las nuevas API de audio en HTML5
Las nuevas API de audio en HTML5Las nuevas API de audio en HTML5
Las nuevas API de audio en HTML5Pablo Garaizar
 
El acceso a las TIC y la justicia social
El acceso a las TIC y la justicia socialEl acceso a las TIC y la justicia social
El acceso a las TIC y la justicia socialPablo Garaizar
 
Aprendizaje y videojuegos
Aprendizaje y videojuegosAprendizaje y videojuegos
Aprendizaje y videojuegosPablo Garaizar
 
Una guía para entender Advanced Encryption Standard (AES) con muñecos de palo
Una guía para entender Advanced Encryption Standard (AES) con muñecos de paloUna guía para entender Advanced Encryption Standard (AES) con muñecos de palo
Una guía para entender Advanced Encryption Standard (AES) con muñecos de paloPablo Garaizar
 
Aprendices @ TEDxBilbao
Aprendices @ TEDxBilbaoAprendices @ TEDxBilbao
Aprendices @ TEDxBilbaoPablo Garaizar
 

More from Pablo Garaizar (20)

De la robótica educativa al pensamiento computacional
De la robótica educativa al pensamiento computacionalDe la robótica educativa al pensamiento computacional
De la robótica educativa al pensamiento computacional
 
¿Cómo se crea una experiencia lúdica?
¿Cómo se crea una experiencia lúdica?¿Cómo se crea una experiencia lúdica?
¿Cómo se crea una experiencia lúdica?
 
Luces y sombras en el uso de la tecnología en clase
Luces y sombras en el uso de la tecnología en claseLuces y sombras en el uso de la tecnología en clase
Luces y sombras en el uso de la tecnología en clase
 
Aspectos psicológicos en el diseño de juegos de mesa
Aspectos psicológicos en el diseño de juegos de mesaAspectos psicológicos en el diseño de juegos de mesa
Aspectos psicológicos en el diseño de juegos de mesa
 
Educación basada en evidencias
Educación basada en evidenciasEducación basada en evidencias
Educación basada en evidencias
 
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...
Neuromandangas: descubre cómo NO programarás mejor gracias a los últimos avan...
 
Neurobollocks: el nuevo aceite de serpiente
Neurobollocks: el nuevo aceite de serpienteNeurobollocks: el nuevo aceite de serpiente
Neurobollocks: el nuevo aceite de serpiente
 
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejor
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejorAlgunas cuestiones psicológicas que nos pueden ayudar a diseñar mejor
Algunas cuestiones psicológicas que nos pueden ayudar a diseñar mejor
 
Identidad digital y feminismo
Identidad digital y feminismoIdentidad digital y feminismo
Identidad digital y feminismo
 
Decisiones tecnológicas, consecuencias ideológicas
Decisiones tecnológicas, consecuencias ideológicasDecisiones tecnológicas, consecuencias ideológicas
Decisiones tecnológicas, consecuencias ideológicas
 
Etica investigaciontecnologica2013
Etica investigaciontecnologica2013Etica investigaciontecnologica2013
Etica investigaciontecnologica2013
 
Video-games 101: Unleashing the potential of students and teachers to create ...
Video-games 101: Unleashing the potential of students and teachers to create ...Video-games 101: Unleashing the potential of students and teachers to create ...
Video-games 101: Unleashing the potential of students and teachers to create ...
 
Scratch Eguna: From Scratch Day to Scratch every day
Scratch Eguna: From Scratch Day to Scratch every dayScratch Eguna: From Scratch Day to Scratch every day
Scratch Eguna: From Scratch Day to Scratch every day
 
Redes sociales en Internet: guía para madres y padres
Redes sociales en Internet: guía para madres y padresRedes sociales en Internet: guía para madres y padres
Redes sociales en Internet: guía para madres y padres
 
Introducción a las vulnerabilidades web
Introducción a las vulnerabilidades webIntroducción a las vulnerabilidades web
Introducción a las vulnerabilidades web
 
Las nuevas API de audio en HTML5
Las nuevas API de audio en HTML5Las nuevas API de audio en HTML5
Las nuevas API de audio en HTML5
 
El acceso a las TIC y la justicia social
El acceso a las TIC y la justicia socialEl acceso a las TIC y la justicia social
El acceso a las TIC y la justicia social
 
Aprendizaje y videojuegos
Aprendizaje y videojuegosAprendizaje y videojuegos
Aprendizaje y videojuegos
 
Una guía para entender Advanced Encryption Standard (AES) con muñecos de palo
Una guía para entender Advanced Encryption Standard (AES) con muñecos de paloUna guía para entender Advanced Encryption Standard (AES) con muñecos de palo
Una guía para entender Advanced Encryption Standard (AES) con muñecos de palo
 
Aprendices @ TEDxBilbao
Aprendices @ TEDxBilbaoAprendices @ TEDxBilbao
Aprendices @ TEDxBilbao
 

Recently uploaded

GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 

Recently uploaded (20)

GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 

Repaso rápido a los nuevos estándares web

  • 1. REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEB HTML5, CSS3 y las nuevas API de JavaScript Pablo Garaizar Sagarminaga BilboStack, 2012 Universidad de Deusto, Bilbao
  • 7. Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
  • 8. Timed Canvas Web media 2D API playback Storage MIME type and protocol Document handler Microdata editing registration Cross- Browser Drag document history messaging & drop
  • 9. Web Geolocation SQL File API Database WebGL SVG CSS3 Web Web WebRTC Workers sockets
  • 10. JS HTML5 CSS3 APIs
  • 15. <!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
  • 16. Nueva estructura de documento
  • 17. <html> <html lang="en" manifest="app.manifest"> <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
  • 18. <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
  • 19. <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
  • 20. <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
  • 21. <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
  • 22. <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
  • 23. <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. <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
  • 25. <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
  • 26. <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
  • 27. <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
  • 31. E[att^="val"] E[att$="val"] E[att*="val"] E:empty E:root E:target E:nth-child(n) E:enabled E:nth-last-child(n) E:disabled E:nth-of-type(n) E:checked E:nth-last-of-type(n) E:selection E:last-child E:not(selector) E:first-of-type E ~ F E:last-of-type E:only-child E:only-of-type Nuevos selectores http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
  • 32. #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://dev.w3.org/csswg/css3-transforms/
  • 33. div { transition-property: opacity; transition-delay: 0.5s; transition-duration: 2s; transition-timing-function: linear; opacity: 30%; } div:hover { opacity: 100%; } Transiciones http://www.w3.org/TR/css3-transitions/
  • 34. div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { 0% { left: 0; top: 0; } 100% { left: 100px; top: 100px; } } Animaciones http://www.w3.org/TR/css3-animations/
  • 35. @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
  • 37. div { webkit-transition: opacity 2s linear; moz-transition: opacity 2s linear; ms-transition: opacity 2s linear; o-transition: opacity 2s linear; transition: opacity 2s linear; } El infierno de los prefijos http://www.sitepoint.com/opera-css3-webkit-prefix
  • 39. 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
  • 40. function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status); } Eventos nuevos: window.ononline window.onoffline Offline / online
  • 41. function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status); } Eventos nuevos: window.ononline window.onoffline Offline / online
  • 42. 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
  • 43. history.pushState(json, title, url); addEvent(window, 'popstate', function (event) { var data = event.state; //... }); Web History
  • 45. Timing control for script-based animations (RequestAnimationFrame) Web Audio API / Fullscreen API Audio Data API getUserMedia() Pointer Lock API WebRTC Timed track API (WebVTT, WebSRT) Server-Sent Events (EventSource)
  • 47. Audio Data API + WebGL = insane http://videos.mozilla.org/serv/blizzard/audio-slideshow
  • 50. Todo esto, ¿para cuándo?
  • 51. En teoría, HTML5 no será un estándar hasta 2022
  • 52. ¿Qué hacemos hasta entonces?
  • 58. Dive into HTML5 http://diveintohtml5.org/
  • 60. Improving the Performance of your HTML5 App http://www.html5rocks.com/tutorials/speed/html5/
  • 61. HTML 5 Demos and Examples http://html5demos.com
  • 63. Referencias ● Dive into HTML5. ● W3Schools. ● IBM developer networks. ● Quackit. ● HTML5 Rocks. ● HTML5 Demos and Examples.
  • 64. 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, Troll.me, Memegenerator.net