HTML 5 & WebGL (Spanish Version)

39
HTML 5 y WebGL Irán Reyes Fleitas

description

A review about HTML 5 and WebGL

Transcript of HTML 5 & WebGL (Spanish Version)

Page 1: HTML 5 & WebGL (Spanish Version)

HTML 5 y WebGLIrán Reyes Fleitas

Page 2: HTML 5 & WebGL (Spanish Version)

HTML 5 y WebGL

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

• WebGL

Page 3: HTML 5 & WebGL (Spanish Version)

HTML 5 - Historia

• 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.

Page 4: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

App Nativas App WebHTML

DOM

CSSiPhone

Safari Opera Android Firefox

BlackBerry

Chrome

Page 5: HTML 5 & WebGL (Spanish Version)

HTML 5

Experiencia del usuario

App Nativas App WebHTML

DOM

CSS

GráficosAlmacenamientoVelocidad

Page 6: HTML 5 & WebGL (Spanish Version)

HTML 5 - Innovaciones

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 7: HTML 5 & WebGL (Spanish Version)

Elementos HTML5

HEADER

SECTION

ARTICLE

FOOTER ASIDE NAV

DIALOG FIGURE

Page 8: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 9: HTML 5 & WebGL (Spanish Version)

Formularios 2.0

<input type=“email” ><input type=“date”

><input

type=“month” ><input type=“week”

><input type=“time”

><input

type=“datetime”>

<input type=“search” ><input

type=“number”> <input type=“range” ><input type=“color” ><input type=“tel” ><input type=“url” >

Page 10: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 11: HTML 5 & WebGL (Spanish Version)

CSS3

ASIDE, HEADER, FOOTER, SECTION, ARTICLE y DIALOG

Nuevas pseudoclases

Embbeding Fonts

Background

Layout

Animaciones

Nuevos pseudoelementos

Color

Contexto

Page 12: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 13: HTML 5 & WebGL (Spanish Version)

Video y Audio

<div id=“flashContent”><object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“550” height=“400” id=“FlashVideo” align=“middle”><param name=“movie” value=“FlashVideo.swf”/><param name=“quality” value=“high”/><param name=“bgcolor” value=“#ffffff”/><param name=“play” value=“true”/><param name=“loop” value=“true”/><param name=“wmode” value=“window”/><param name=“scale” value=“showall”/><param name=“menu” value=“true”/><param name=“devicefont” value=“false”/><param name=“salign” value=“”/><param name=“allowScriptAccess” value= “sameDomain”/><!--[if !IE]>--> <object type=“application/x-shockwave-flash” data=“FlashVideo.swf” width=“550” height=“400”> <param name=“movie” value=“FlashVideo.swf”/>

Page 14: HTML 5 & WebGL (Spanish Version)

Video y Audio

<param name=“quality” value=“high”/><param name=“bgcolor” value=“#ffffff”/><param name=“play” value=“true”/><param name=“loop” value=“true”/><param name=“wmode” value=“window”/><param name=“scale” value=“showall”/><param name=“menu” value=“true”/><param name=“devicefont” value=“false”/><param name=“salign” value=“”/><param name=“allowScriptAccess” value=“sameDomain”/> <!--<![endif]--><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><!--[if !IE]>--> </object> <!--<![endif]--></object></div>

Page 15: HTML 5 & WebGL (Spanish Version)

Video y Audio

<video src=“myMovie.ogg”></video>

<video src=“google_main.mp4” autoplay controls></video>

<audio autoplay controls><source src="Mañana.mp3"></audio>

Page 16: HTML 5 & WebGL (Spanish Version)

Video y Audio - Formatos

Patentado Open-Source

VS

Page 17: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 18: HTML 5 & WebGL (Spanish Version)

Canvas y SVG

Flash Flex

SilverLight VML

Page 19: HTML 5 & WebGL (Spanish Version)

SVG

Scalable Vector Graphics (SVG)

Soporte:Firefox 1.5+

OperaNativo

Safari 3.1+ChromeNativoIEPlugin

Uso:<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>

Page 20: HTML 5 & WebGL (Spanish Version)

Canvas

Apple fue el que primero desarrollo esta tecnología para su Mac OSX Dashboard Widgets.

Soporte:Safari 1.3+

Firefox 1.5+Opera

9+ChromeNativo

Internet Explorer:Explorer

CanvasFlash Canvas

Page 21: HTML 5 & WebGL (Spanish Version)

Canvas - Código

<canvas id="Mycanvas" width="480" height="320"></canvas>

Paso 1:

function testCanvas() {var mycanvas = document.getElementById(‘Mycanvas’);

Paso 2:

if (mycanvas && mycanvas .getContext) {Paso 3:

var context = graphCanvas.getContext(‘2d’);Paso 4:

Pinta dentro del canvas lo que quieras con el objeto context

Paso 5:

Page 22: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 23: HTML 5 & WebGL (Spanish Version)

JavaScript 2.0

IE7

IE8

FF 3

.5

Chrom

e 3

Safa

ri 4

IE9

FF 3

.6

Chrom

e 4

Web

Kit

0

2

4

6

8

10

12

14

16

Tiempo

Page 24: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 25: HTML 5 & WebGL (Spanish Version)

Geolocalización

Page 26: HTML 5 & WebGL (Spanish Version)

Geolocalización

Page 27: HTML 5 & WebGL (Spanish Version)

Geolocalización - Código

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");}

Page 28: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 29: HTML 5 & WebGL (Spanish Version)

Datos Locales

Servidor localCaché para aplicaciones

Base de Datos

Page 30: HTML 5 & WebGL (Spanish Version)

Caché o Servidor Local

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

cache.manifest

<html>...<body manifest=“./cache.manifest”>...</body>...</html>

Page 31: HTML 5 & WebGL (Spanish Version)

Base de DatossessionStorage 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>

Page 32: HTML 5 & WebGL (Spanish Version)

HTML 5 - Evolución

Elementos HTML

Form 2.0

CSS3

Video y Audio

Canvas y SVG

JavaScript 2.0

Geolocalización

Datos Locales

Web workers

Page 33: HTML 5 & WebGL (Spanish Version)

Web workers

Soporte:Safari 4+

Firefox 3.5+Opera10.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();

Page 34: HTML 5 & WebGL (Spanish Version)

HTML 5 y WebGL

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

• WebGL

Page 35: HTML 5 & WebGL (Spanish Version)
Page 36: HTML 5 & WebGL (Spanish Version)

API’s ExperimentalesMozilla – Canvas3D

Google – O3D

Opera

Apple

Soporte Nativo

Mozilla – Firefox

Google – Chrome

Apple – Safari*

getContext(‘2D’)

getContext(‘moz-webgl’)getContext(‘webkit-3d’)

getContext(‘experimental-webgl’)

WebGL

Page 37: HTML 5 & WebGL (Spanish Version)

WebGL

Page 38: HTML 5 & WebGL (Spanish Version)

WebGL - 3D Shaders

Javascript OpenGL ES

• Estructura.HTML

• Estilos.CSS

• Lógica.JavaScript

• ShadersGLSL

Page 39: HTML 5 & WebGL (Spanish Version)

WebGL - Bibliotecas

•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.