Академический Документы
Профессиональный Документы
Культура Документы
Gonzalo
Prez
@chalalo
Miguel Saez
@masaez
PAGE 3
http://theinsong.com/wayoutwars
Qu es HTML5?
HTML5 es el futuro de la Web
HTML5 no es (nicamente) un mensaje de Mercadotecnia
HTML5 no est completo, todava.
Mapa de HTML5
HTML
CSS
Web Apps
SVG
Geolocation
ECMA
HTML5 en IE9
CSS3
HTML5
New Markup
Elements
Canvas
Audio
Video
Local Storage
Cross-Window
Messaging
Text Selection
APIs
Parsing SVG in
HTML
2D Transforms
Border Radius
Box-Shadow
Fonts (WOFF)
Media Queries
Multiple
Backgrounds
Namespaces
Opacity
rgba(), hsl(),
hsla()
Selectors (IE8)
http://bit.ly/IE9Guide
SVG
Others
Shapes
Clipping,
Masking, and
Compositing
Transforms
Extensibility
Gradients
Interactivity
Linking and Views
Painting and
Colors
Paths
Text
Hardware Acceleration
beautyoftheweb.com ietestdrive.com
html5labs.com
Media
Canvas
Un boque de elementos que permiten a los desarrolladores
dibujar grficos 2D utilizando JavaScript.
Algunos mtodos para dibujar son: paths, boxes, circles, text and
rasterized images
<canvas id="myCanvas" width="200" height="200">
Tu navegador no soporta Canvas!
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
13
Soporte para:
DOM tenga acceso completo a los elementos SVG
Document structure, scripting, styling, paths, shapes, colors, transforms,
gradients, patterns, masking, clipping, markers, linking and views
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
14
HTML5 <video>
Soporte para el elemento <video> en HTML5
Formato Estndar de la Industria MPEG-4/H.264 video
El Video puede ser compuesto con cualquier otro elemento de la
pgina
Contenidos HTML, imgenes, grficos SVG
Aceleracin por Hardware, decodificacin basada en GPU
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<span>Sad Panda!<br />
Tu navegador no soporta video HTML!</span>
<! Puedes pegar Flash or Video Silverlight Aqu -->
</video>
15
HTML5 <audio>
http://html5beats.com
Atributos
16
Dispositivos
Geo-Localizacin
Permite que los sitios Web usen la ubicacin para mejorar los
servicios
Requiere el consentimiento del usuario
Navigator.geolocation.getCurrentPosition();
function getLocation() {
if (navigator.getlocation != undefined) {
navigator.getlocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords[accuracy];
var latitude = position.coords[latitude];
var longitude = position.coords[longitude];
}
19
Local Storage
Offline/Online Events
File & Blob APIs
IndexedDB
Sincronizacin de recursos va
XMLHttpRequest (XHR) y WebSockets
Conceptos de Mapeo
Concept
Relational DB
Database
Database
Database
Tables
ObjectStore contains
Javascript objects and keys
Query Mechanism
SQL
Cursor APIs
Joins
SQL
Application code
Lock database on
VERSION_CHANGE transaction
Lock objectStores on
READ_ONLY and READ_WRITE
transactions
Transaction Commits
Property Lookups
SQL
Filters
SQL
KeyRange APIs
Limitaciones en HTTP
HTTP es un protocolo request-reply
Modelos Actuales
Polling Peridico
Modelos Actuales
Long Polling
WebSockets
Tecnologa interoperable nueva, bajo
estandarizacin
Socket bidireccional Full Duplex
API Javascript W3C
Secure (SSL)
Alta performance
Conexiones cross dominio
await socket.SendAsync(outputBuffer,params);
}
Noticias: blogs.msdn.com/IE
Demostraciones: www.beautyoftheweb.com
Ejemplos Tcnicos: www.ietestdrive.com
HTML5 Labs: www.html5labs.com
Gonzalo Prez
MVP ASP.NET
@chalalo