HTML 5 & WebGL (Spanish Version)

Temas:
• HTML 5
• Historia
• Evolución de la Web
• Tecnologías incluidas
• WebGL

• HTML se publica por primera vez en el 1991.
• HTML 4.0 se introduce en 1997.
• En el 2007, W3C y WHATWG comienza el desarrollo
de HTML5.

App Nativas App Web
HTML
CSS
DOM
iPhone
Safari Opera Android Firefox
BlackBerry
Chrome

Experiencia del usuario
Velocidad Almacenamiento Gráficos
App Nativas App Web
HTML
CSS
DOM

Elementos
HTML
Form 2.0
CSS3
Canvas y SVG
Video y Audio
Geolocalización
JavaScript 2.0
Datos
Locales
Web
workers

HEADER SECTION ARTICLE
FOOTER ASIDE NAV
DIALOG FIGURE

ASIDE, HEADER, FOOTER, SECTION, ARTICLE y DIALOG
Nuevas pseudoclases
Embbeding Fonts
Background
Layout
Animaciones
Nuevos
pseudoelementos
Color
Contexto

<paramname=“quality” value=“high”/>
<paramname=“bgcolor” value=“#ffffff”/>
<paramname=“play” value=“true”/>
<paramname=“loop” value=“true”/>
<paramname=“wmode” value=“window”/>
<paramname=“scale” value=“showall”/>
<paramname=“menu” value=“true”/>
<paramname=“devicefont” value=“false”/>
<paramname=“salign” value=“”/>
<paramname=“allowScriptAccess” value=“sameDomain”/> 
<a href=“http://www.adobe.com/go/getflash”>
<img src=“http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif”
alt=“Get Adobe Flash player”/>
</a>
 </object> 
</object>
</div>

Scalable Vector Graphics (SVG)
Firefox 1.5+
Opera Nativo
Safari 3.1+
Chrome Nativo
IE Plugin
<svg width="200" height="200">
<rect x="20“ y="20"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="60" ry="60"
id="myRect"/>
</svg>

Apple fue el que primero desarrollo esta tecnología para su
Mac OSX Dashboard Widgets.
Safari 1.3+
Firefox 1.5+
Opera 9+
Chrome Nativo
Explorer Canvas
Flash Canvas

<canvas id="Mycanvas" width="480" height="320"></canvas>
function testCanvas() {
var mycanvas = document.getElementById(‘Mycanvas’);
if (mycanvas && mycanvas .getContext) {
var context = graphCanvas.getContext(‘2d’);
Pinta dentro del canvas lo que quieras con el objeto context

16
14
12
10
8
6
4
2
0
Tiempo

Function initialize()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(
function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat,lon);
}
)
}
else
alert("Your browser don't support geolocation");
}

Servidor local
Caché para aplicaciones
Base de Datos

cache.manifest
CACHE MANIFEST
/ static / index.html
/ static / logon.php
/ media / banner.png
/ media / chart.svg
/ css / ie6.css
/ css / browsers.css
/ js / jquery.js
/ js / banner.js
<html>
.
.
.
<body manifest=“./cache.manifest”>
.
.
.
</body>
.
.
.
</html>

sessionStorage localStorage
Los valores persisten mientras el navegador este abierto. Los valores persisten a lo largo de la vida de la página.
Los valores son visibles solamente dentro de la ventana o
pestaña
Los valores son visibles desde todas las ventanas y pestañas
creados por el mismo origen.
<article>
<section>
<ul id="previous"></ul>
</section>
<section>
<div>
<label for="local">localStorage:</label>
<input name="local" id="local" type="text">
</div>
</section>
</article>
<script>
function getStorage(type) {
var storage = window[type + 'Storage'],
delta = 0, li = document.createElement('li');
if (!window[type + 'Storage']) return;
if (storage.getItem('value')) {
li.innerHTML = type + 'Storage: ' + storage.getItem('value');
} else {
li.innerHTML = type + 'Storage is empty'; }
document.querySelector('#previous').appendChild(li);
}
getStorage('local');
addEvent(document.querySelector('#local'), 'keyup', function () {
localStorage.setItem('value', this.value);
localStorage.setItem('timestamp', (new Date()).getTime());
});
</script>

Safari 4+
Firefox 3.5+
Opera 10.6+
Chrome 3+
IE no soportado
<script>
var worker = new Worker('worker.js');
worker.onmessage = function(event){
console.log('Result: ' + event.data);
}
</script>
worker.js
function findPrimes(){
// ... algoritmo
postMessage(nextPrime);
}
findPrimes();

Mozilla – Canvas3D
Google – O3D
Opera
Apple
Mozilla – Firefox
Google – Chrome
Apple – Safari*
getContext(‘2D’)
getContext(‘moz-webgl’)
getContext(‘webkit-3d’)
getContext(‘experimental-webgl’)

HTML • Estructura.
CSS • Estilos.
JavaScript • Lógica.
GLSL • Shaders

•Processing.js http://processingjs.org/
Compatible: Firefox, Safari, Opera, Chrome, también con IE si utiliza ExplorerCanvas.
•Pre3d http://deanm.github.com/pre3d/
Motor de renderizado en 3D para JS.
•Burst Engine http://www.hyper-metrix.com/#Burst
Motor Open Source para la animación de vectores.
• Protovis http://vis.stanford.edu/protovis/
Biblioteca de Visualización.

HTML 5 & WebGL (Spanish Version)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Destacado

Destacado (20)

Similar a HTML 5 & WebGL (Spanish Version)

Similar a HTML 5 & WebGL (Spanish Version) (20)

Último

Último (20)

HTML 5 & WebGL (Spanish Version)

Notas del editor