HTML 5 & WebGL (Spanish Version)
of 39
/39
-
Upload
iran-reyes-fleitas -
Category
Science
-
view
130 -
download
4
Embed Size (px)
description
A review about HTML 5 and WebGL
Transcript of HTML 5 & WebGL (Spanish Version)
HTML 5 y WebGLIrán Reyes Fleitas
HTML 5 y WebGL
Temas:• HTML 5• Historia• Evolución de la Web• Tecnologías incluidas
• WebGL
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.
HTML 5 - Evolución
App Nativas App WebHTML
DOM
CSSiPhone
Safari Opera Android Firefox
BlackBerry
Chrome
HTML 5
Experiencia del usuario
App Nativas App WebHTML
DOM
CSS
GráficosAlmacenamientoVelocidad
HTML 5 - Innovaciones
Elementos HTML
Form 2.0
CSS3
Video y Audio
Canvas y SVG
JavaScript 2.0
Geolocalización
Datos Locales
Web workers
Elementos HTML5
HEADER
SECTION
ARTICLE
FOOTER ASIDE NAV
DIALOG FIGURE
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
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” >
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
CSS3
ASIDE, HEADER, FOOTER, SECTION, ARTICLE y DIALOG
Nuevas pseudoclases
Embbeding Fonts
Background
Layout
Animaciones
Nuevos pseudoelementos
Color
Contexto
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
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”/>
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>
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>
Video y Audio - Formatos
Patentado Open-Source
VS
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
Canvas y SVG
Flash Flex
SilverLight VML
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>
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
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:
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
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
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
Geolocalización
Geolocalización
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");}
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
Datos Locales
Servidor localCaché para aplicaciones
Base de Datos
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>
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>
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
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();
HTML 5 y WebGL
Temas:• HTML 5• Historia• Evolución de la Web• Tecnologías incluidas
• WebGL
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
WebGL
WebGL - 3D Shaders
Javascript OpenGL ES
• Estructura.HTML
• Estilos.CSS
• Lógica.JavaScript
• ShadersGLSL
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.
