Estándares curriculares, estándares de gestión escolar y estándares de desempeño docente
Repaso rápido a los nuevos estándares web
-
Upload
pablo-garaizar -
Category
Technology
-
view
6.541 -
download
0
description
Transcript of Repaso rápido a los nuevos estándares web
![Page 1: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/1.jpg)
REPASO RÁPIDO A LOS NUEVOS ESTÁNDARES WEBHTML5, CSS3 y las nuevas API de JavaScript
Pablo Garaizar SagarminagaBilboStack, 2012
Universidad de Deusto, Bilbao
![Page 2: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/2.jpg)
![Page 3: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/3.jpg)
![Page 4: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/4.jpg)
![Page 5: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/5.jpg)
![Page 6: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/6.jpg)
HTML5
![Page 7: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/7.jpg)
Source: David P. Heitmeyer, CSCI E-12 (Spring 2011), Harvard University
![Page 8: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/8.jpg)
Timed media
playback
Cross-document messaging
Microdata
Web Storage
Drag& drop
Document editing
Canvas 2D API
Browser history
MIME type and protocol
handler registration
![Page 9: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/9.jpg)
Web SQL
Database
WebRTC
File API
Websockets
Geolocation
WebWorkers
SVG CSS3WebGL
![Page 10: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/10.jpg)
CSS3JS
APIsHTML5
![Page 11: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/11.jpg)
Novedades
![Page 12: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/12.jpg)
En el marcado...
![Page 13: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/13.jpg)
![Page 15: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/15.jpg)
Declaración simplificada
<!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>
![Page 16: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/16.jpg)
Nueva estructura de documento
![Page 17: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/17.jpg)
Nueva cabecera
<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”>
![Page 18: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/18.jpg)
Etiquetas semánticas
<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>
![Page 19: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/19.jpg)
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>
![Page 20: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/20.jpg)
Multimedia
<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>
![Page 21: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/21.jpg)
Canvas
<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.
![Page 22: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/22.jpg)
SVG
<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>
![Page 23: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/23.jpg)
Formularios
<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...”/>
![Page 24: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/24.jpg)
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>
![Page 25: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/25.jpg)
Etiquetas interactivas
<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>
![Page 26: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/26.jpg)
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>
![Page 27: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/27.jpg)
Otras etiquetas
<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>
![Page 28: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/28.jpg)
![Page 29: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/29.jpg)
![Page 30: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/30.jpg)
En CSS3...
![Page 31: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/31.jpg)
Nuevos selectoreshttp://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
E[att^="val"]E[att$="val"]E[att*="val"]
E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-child
E:first-of-typeE:last-of-typeE:only-childE:only-of-type
E:emptyE:targetE:enabledE:disabledE:checkedE:selection
E:not(selector)E ~ F
![Page 32: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/32.jpg)
Transformacioneshttp://dev.w3.org/csswg/css3-transforms/
#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);}
![Page 33: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/33.jpg)
Transicioneshttp://www.w3.org/TR/css3-transitions/
div { transition-property: opacity; transition-delay: 0.5s; transition-duration: 2s; transition-timing-function: linear; opacity: 30%; }
div:hover { opacity: 100%; }
![Page 34: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/34.jpg)
Animacioneshttp://www.w3.org/TR/css3-animations/
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; }
}
![Page 35: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/35.jpg)
@font-facehttp://www.font-face.com
@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 }
![Page 36: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/36.jpg)
![Page 37: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/37.jpg)
El infierno de los prefijoshttp://www.sitepoint.com/opera-css3-webkit-prefix
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; }
![Page 38: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/38.jpg)
En JavaScript...
![Page 39: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/39.jpg)
Geolocalización
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+')');}
![Page 40: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/40.jpg)
Offline / online
function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status);}
Eventos nuevos:
window.ononlinewindow.onoffline
![Page 41: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/41.jpg)
Offline / online
function show_status() { var status = navigator.onLine ? 'Online' : 'Offline'; alert('You are '+status);}
Eventos nuevos:
window.ononlinewindow.onoffline
![Page 42: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/42.jpg)
Local Storage
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.
![Page 43: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/43.jpg)
Web History
history.pushState(json, title, url);
addEvent(window, 'popstate', function (event) { var data = event.state; //...});
![Page 44: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/44.jpg)
![Page 45: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/45.jpg)
Timing control for script-based animations
(RequestAnimationFrame)
Web Audio API / Audio Data APIFullscreen API
getUserMedia()Pointer Lock API
Server-Sent Events(EventSource)
WebRTCTimed track API(WebVTT, WebSRT)
![Page 46: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/46.jpg)
![Page 47: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/47.jpg)
Audio Data API + WebGL = insanehttp://videos.mozilla.org/serv/blizzard/audio-slideshow
![Page 48: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/48.jpg)
Y nueva sintaxis...
![Page 50: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/50.jpg)
Todo esto, ¿para cuándo?
![Page 51: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/51.jpg)
En teoría, HTML5 no será un estándar hasta 2022
![Page 52: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/52.jpg)
¿Qué hacemos hasta entonces?
![Page 53: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/53.jpg)
![Page 54: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/54.jpg)
Polyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 55: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/55.jpg)
Para saber más...
![Page 56: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/56.jpg)
W3Chttp://dev.w3.org/html5/spec/Overview.html
![Page 57: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/57.jpg)
WHATWGhttp://whatwg.org/html
![Page 58: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/58.jpg)
Dive into HTML5http://diveintohtml5.org/
![Page 59: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/59.jpg)
HTML5 Rockshttp://www.html5rocks.com
![Page 60: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/60.jpg)
Improving the Performance of your HTML5 Apphttp://www.html5rocks.com/tutorials/speed/html5/
![Page 61: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/61.jpg)
HTML 5 Demos and Exampleshttp://html5demos.com
![Page 62: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/62.jpg)
Muchas gracias ;-)
![Page 63: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/63.jpg)
Referencias● Dive into HTML5.● W3Schools.● IBM developer networks.● Quackit.● HTML5 Rocks.● HTML5 Demos and Examples.
![Page 64: Repaso rápido a los nuevos estándares web](https://reader033.fdocuments.ec/reader033/viewer/2022061300/54c551d34a795967088b45af/html5/thumbnails/64.jpg)
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