Descargar para leer sin conexión
![<div id=“flashContent”>
<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“550” height=“400”
id=“FlashVideo” align=“middle”>
<paramname=“movie” value=“FlashVideo.swf”/>
<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”/>
<!--[if !IE]>--> <object type=“application/x-shockwave-flash” data=“FlashVideo.swf”
width=“550” height=“400”>
<paramname=“movie” value=“FlashVideo.swf”/>](https://image.slidesharecdn.com/html5ywebglwww-140916141335-phpapp01/85/HTML-5-WebGL-Spanish-Version-13-320.jpg)
![<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”/> <!--<![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>](https://image.slidesharecdn.com/html5ywebglwww-140916141335-phpapp01/85/HTML-5-WebGL-Spanish-Version-14-320.jpg)
![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>](https://image.slidesharecdn.com/html5ywebglwww-140916141335-phpapp01/85/HTML-5-WebGL-Spanish-Version-31-320.jpg)
Subido porIran Reyes Fleitas
HTML 5 & WebGL (Spanish Version)
El documento describe la evolución de HTML5, incluyendo nuevos elementos como video, audio, canvas y geolocalización. También cubre tecnologías como CSS3, SVG, WebGL y trabajadores web que permiten crear aplicaciones web más ricas e interactivas.
Más contenido relacionado
HTML 5 & WebGL (Spanish Version)
- 1.
- 2. Temas: • HTML5 • Historia • Evolución de la Web • Tecnologías incluidas • WebGL
- 3. • HTML sepublica por primera vez en el 1991. • HTML 4.0 se introduce en 1997. • En el 2007, W3C y WHATWG comienza el desarrollo de HTML5.
- 4. App Nativas AppWeb HTML CSS DOM iPhone Safari Opera Android Firefox BlackBerry Chrome
- 5. Experiencia del usuario Velocidad Almacenamiento Gráficos App Nativas App Web HTML CSS DOM
- 6. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 7. HEADER SECTION ARTICLE FOOTER ASIDE NAV DIALOG FIGURE
- 8. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 9. <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” >
- 10. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 11. ASIDE, HEADER, FOOTER,SECTION, ARTICLE y DIALOG Nuevas pseudoclases Embbeding Fonts Background Layout Animaciones Nuevos pseudoelementos Color Contexto
- 12. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 13. <div id=“flashContent”> <objectclassid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“550” height=“400” id=“FlashVideo” align=“middle”> <paramname=“movie” value=“FlashVideo.swf”/> <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”/> <!--[if !IE]>--> <object type=“application/x-shockwave-flash” data=“FlashVideo.swf” width=“550” height=“400”> <paramname=“movie” value=“FlashVideo.swf”/>
- 14. <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”/> <!--<![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>
- 15. <video src=“myMovie.ogg”></video> <videosrc=“google_main.mp4” autoplay controls></video> <audio autoplay controls> <source src="Mañana.mp3"> </audio>
- 16.
- 17. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 19. 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>
- 20. Apple fue elque 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
- 21. <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
- 22. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 23. 16 14 12 10 8 6 4 2 0 Tiempo
- 24. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 27. 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"); }
- 28. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 29. Servidor local Cachépara aplicaciones Base de Datos
- 30. 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>
- 31. sessionStorage localStorage Losvalores 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>
- 32. Elementos HTML Form2.0 CSS3 Canvas y SVG Video y Audio Geolocalización JavaScript 2.0 Datos Locales Web workers
- 33. Safari 4+ Firefox3.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();
- 34. Temas: • HTML5 • Historia • Evolución de la Web • Tecnologías incluidas • WebGL
- 36. Mozilla – Canvas3D Google – O3D Opera Apple Mozilla – Firefox Google – Chrome Apple – Safari* getContext(‘2D’) getContext(‘moz-webgl’) getContext(‘webkit-3d’) getContext(‘experimental-webgl’)
- 38. HTML • Estructura. CSS • Estilos. JavaScript • Lógica. GLSL • Shaders
- 39. •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.
Notas del editor
- #4 Desde que se creó en el 1991, HTML a evolucionado desde simple texto a incluir imágenes y agregar CSS. Con la salida del HTML 4.0 el mercado comenzó un lento aprovechamiento de este estándar, pues las razones tecnológicas no acompañaban a HTML(conexiones lentas y el cambio a los nuevos medios). No obstante la Web no se estancó del todo y hoy en día tenemos computadoras realmente rápidas y un conjunto amplio de dispositivos que la usan y en cuanto la rapidez, actualmente podemos alcanzar mb/s. Todo conlleva a la conclusión de que podemos aprovechar mucho más las capacidades actuales de la red y estandarizar un grupo de tecnologías que se han creado con el pasar de los años. HTML 5 fue el resultado de esta estandarización. La meta con este estándar es que toda aplicación pueda correr en un navegador web sin necesidad de 2dos softwares. Según informan en la página de la organización WHATWG, HTML 5 se prevé esté listo como especificación de implementación recomendada en el 2012
- #5 iPhone nombrado “Invento del año” por la revista Times en el 2008(medio año después de su publicación) iPhone -> Canvas, app caché, SVG Tanto como el iPhone y el iPod ambos incluían uno de los navegadores mas avanzados(Safari) y este no era del todo una version reducida del original pues era capaz de vizualizar las web page de la misma manera que el buscador original. Para agregar conmoción al momento el safari incluia lo último en tecnologia Web, la cual MS IE no tenia y le faltaba un buen trecho para lograrla. Safari 4.0 -> Canvas, video, app caché, SVG Rediseña su interfaz y utiliza su nuevo motor de JS Nitro, el cual en pruebas de laboratorio era el mas rápido del mercado. (Muchas de estas pruebas se hacen con la herramienta SunSpider, la cual es un benchmark para JS). Opera 8 -> Canvas, video, geolocalización, SVG Android 1.5 -> Canvas, app caché, geolocalización, web workers Firefox 3.5b4 -> Canvas, video, app caché, geolocalización, web workers, SVG Chrome 2.0 -> Canvas, video, app caché, geolocalización, web workers, SVG RIM’s BlackBerry, Palm’s Pre -> Listos para aceptar los nuevos cambios.
- #6 Cada vez estamos más cerca del momento en el que todo sea Web, algunos visionarios comentan que en el futuro no necesitaríamos una máquina con grandes potencialidades sino solo una buena conexión y nos preguntamos, ¿Qué tan cerca estamos?, tenemos velocidad, de cierta manera almacenamiento y en cuanto a graficos, podemos lograr casi todo con 2das herramientas sacrificando el tiempo de renderizado. Con HTML 5 se busca mejorar estos aspectos “defectuosos” y lograr una “Web like Desktop”.
- #8 HEADER: Se incluye como etiqueta por el amplio uso en las paginas web actuales. SECTION: Describe el contenido de la página, agrupa, le da información semántica al código. ARTICLE: Igual. FOOTER: Se incluye como etiqueta por el amplio uso en las paginas web actuales. ASIDE: Describe el contenido de un tramo de la página sin formar parte de la misma. DIALOG: Nos permite identificar una conversación. FIGURE: Nos permite introducir una imagen y su leyenda. NAV: Agrupar e identificar un conjunto de links. MARK, TIME, METER, PROGRESS
- #10 Se le puede especificar a un campo input que es obligatorio(required) placeholder
- #12 Pseudoclases -> a:visited. Selection:Cuando se selecciona un rango del contenido de la web Lang. Pseudoelementos(new): Ayuda a controlar el aspecto de los elementos de la página. First-letter First-line Before After Uso: p::first-letter Fonts-> Con el HTML y CSS actual para incluir letras distintas a las por defecto, se tenia que escoger entre las familias de letras compatibles para todos lo sistemas predefinidos (Windows, Mac, Unix/Linux, etc) Ex: Times New Roman, Times, serif. Scalable vector graphic fonts Sombras Layout-> Crea columnas facilmente, sin tener que crear tablas complejas Color-> gradientes Background-> multiples background. Animaciones-> Transciciones Contexto-> la palabra media=“screen”, nos sirve para incluir diferentes estilos a diferentes tipos de medios. device-width:3200px
- #14 Hoy en día el centro del intercambio de información son los videos y esto se hace posible principalmente gracias a Adobe Flash. Pero publicar un video con Flash requiere convertirlo para poder verlo en un visor agregar un pedazo de código no tan grande como tan “feo”. Y tener el plugin de flash en el navegador del cliente. Veamos el código de flash
- #15 Los sitios web que manejan videos lo que hacen es dejarte subir el video y convertirtelo en el servidor, a lo que sigue la generación de un código automático para incluirlo en su web.
- #16 Un ejemplo de como incluir un video en HTML 5 seria: La etiqueta video tiene varios atributos por si se quiere personalizar. autoplay controls height y width loop Veamos como se ponen. El atributo controls lo que hace es que incluye una barra para el control del video, y vamos a notar en los ejemplos que esta barra luce diferentes en los navegadores, pues cada navegador utiliza diferentes motores para la reproducción de video. Para incluir un archivo de audio: Esta es otra manera de poner las etiquetas de video y audio.
- #17 En cuanto al formato del video, existen 2 codecs que están ganando soporte: H.264->MPEG4(MP4), es el formato de audio y video en los iphones, esta ampliamente usado por grandes companias, pero tiene un problema, esta patentado y debes pagar para utilizarlo. Ogg->En contraste a mp4, ogg(Theora video, Vorbis audio) es open-source. Vale resaltar que el mp4 tiene mejor calidad para resoluciones grandes, pero la diferencia no es tan grande. Si no tienes los programas para la conversion, existen sitios que te los convierten gratis: www.firefogg.org Los formatos de audio soportados hasta ahora son mp3, aac y ogg vorbis. OJO -> No todos los navegadores soportan todos los formatos, por ejemplo Firefox no soporta mp4 e IE no soporta ogg por lo que para asegurarnos que un video se reproduzca podemos poner varias fuentes para el video y el navegador detectara cual es que puede reproducir. <video autoplay controls> <source src=“sample.mp4”> <source src=“sample.ogv”> </video>
- #19 Hasta el momento actual HTML no nos brinda ninguna manera de pintar sobre la página y las imágenes que podemos incluir no se le pueden incorporar ningún tipo de animación pues son estáticas. La manera de lograr este tipo de cosas es con Flash, Flex, VML(recomendado por W3C) y Silverlight Vamos a hablar de ambos, empecemos por SVG
- #20 SVG es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados en formato XML y no es nuevo. A partir del 2001 se empezo a recomendar por la W3C y a partir de ese entonces todos los navegadores de forma distintas han creado mecanismos para soportar los graficos hechos con SVG
- #21 Canvas es un elemento del nuevo HTML 5 que permite el renderizado de imágenes y gráficos vectoriales de forma dinámica y sin ningún proceso intermedio. Como pueden observar la primera versión de iPhone utilizaba Safari 3.0 y fue unos de los precursores de esta tecnología pues en parte era capaz de utilizar sus provechos cambiándolos por los de Adobe Flash para el cual no se incluyo soporte. El objeto canvas puede ser accedido a traves de Javascript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes. En el IE todavía existen problemas de compatibilidad por lo que se pueden utilizar algunos controles como los vistos arriba para lograr el funcionamiento de este.
- #22 Paso 1: Declara la etiqueta dentro del HTML. Paso 2: Crea una función para definir el elemento CANVAS. Paso 3: Asegurémonos que el elemento CANVAS pertenece al HTML y que se encuentra dentro del DOM. Paso 4: Abrir un contexto bidimensional dentro del canvas
- #24 CSS3, SVG y Canvas, video, audio y demas novedades que nos trae HTML 5 por si solas no consumen todas las expectativas, para crear aplicaciones web análogas a las aplicaciones de escritorio en cuanto a rendimiento, gráficos y demás, necesitamos un poderoso lenguaje de programacion que saque provecho de todo lo que incluye HTML 5, la respuesta a esto es JavaScript. Actualmente las aplicaciones web no son tan poderosas como las de escritorio y la razón no está en JavaScript, está en cuan rapido el navegador interpreta JavaScript, mientras mas rápido esto pase mas sofisticadas y maravillosas serán los sitios y app web. Desde el 2009, los navegadores han comenzado una carrera por imponer nuevos record en cuanto a velocidad. Firefox, Safari, Google y Opera han estado constantemente en juego, dejando atrás al obsoleto IE8 hasta que con la salida del IE9 beta Microsoft entró de nuevo en el juego por la velocidad.
- #26 HTML 5 tendrá la capacidad de determinar con un alto grado de precisión la ubicación geográfica del usuario. Esto se haría principalmente en páginas que, a partir de la posición actual del usuario, pueden ofrecer diferentes clases de servicios relacionados con el área en cuestión. La foto de esta diapositiva esta un poco futurista no!!!, pero bueno pienso que no estemos muy lejos una vez logrado el HTML 5 como estándar para la web actual. Veamos algo mas terrenal
- #27 No hay duda que el mundo de la tecnología va hay hacia los móviles. Estos dispositivos necesitan saber donde se encuentran geograficamente y para satisfacer esta demanda HTML5 nos trae lo que necesitamos. Los teléfonos iPhones y Android ya vienen con geolocalización habilitada. Es interesante señalar que la tecnología para la localización no es solo a través del GPS o IP, sino tambien Wifi, por la amplia variedad de celulas de antenas wifi que existen. La tecnología se puede usar para la localización de servicios a una cierta vecindad de ubicación del usuario.
- #28 Conclusión: Puedes utilizar geolocalizacion para determinar donde es que estas utilizando tu navegador(es muy importante para los dispositivos mobiles).
- #30 Las cookies es el método tradicional para salvar datos localmente desde un sitio web. Con HTML 5 estos datos van a crecer considerablemente, ya que el nuevo estándar para el almacenamiento nos permite guadar masivamente datos. En vez de usar cookies, en HTML 5 se puede utilizar una suerte de caché para las aplicaciones web y una base de datos.
- #31 Caché o Servidor Local: El servidor local posee la función de almacenar, en forma local, los datos de las páginas webs, instalándose como una capa adicional entre el navegador y el servidor web, funcionando de una manera similar a la caché del navegador web. La idea tras esto es que se puede manejar la caché y por lo tanto decidir que se quiere guardar en caché.
- #32 La base de datos es el componente que permite almacenar datos que no corresponden a una página web o un elemento embebido de un sitio. El motor de base de datos empleado es SQLite y el objetivo de este componente es almacenar datos de una aplicación en forma persistente. Esta base de datos no puede ser accedida por otro sitio que no sea el autorizado por el usuario, y puede ser editada localmente en el computador donde se almacenan los datos. La inclusión de este componente permite, al desarrollador, disponer de un almacenamiento de tipo relacional en la máquina huésped, pero como es editable por el mismo, no debe almacenarse información de importancia para el sitio. Se usa SQLite entre otras cosas por la flexibilidad del sistema de tipos y su uso desde lenguajes de script dinámicos, en particular por JavaScript.
- #34 HTML 5 Web Worker nos provee la capacidad de que las aplicaciones web corran en background y típicamente en hilos separados por lo tanto HTML 5 Web Worker puede tomar ventajas de los CPU multinúcleos. Una aplicación de esta tecnologia en los navegadores actuales es que los script se corren en hilos distintos y le permite al navegador determinar cuando un hilo a consumido más tiempo de lo normal sin afectar la ejecución normal del navegador.
- #37 WebGL es una API para trabajar con gráficos 3d en la Web. Históricamente, varias compañías proveedoras de navegadores han trabajado en 3D APIs experimentales para JavaScript tales como … WebGL está camino a la estandarización tomando camino entre los navegadores y el grupo Khronos (Los responsables de OpenGL). Como se vio en diapositivas anteriores para obtener un contexto 2D en el canvas, llamábamos a la función getContext(‘2D’), como se puede esperar esto deja las puertas abiertas para otros tipos de contexto tales como 3D.
- #38 Como WebGL renderiza gráficos a través del objeto canvas, el cual es parte del doc. Se puede posicionar y transformar el 3D canvas tanto como el canvas común, incluyendo solaparse con video, texto y animaciones. Esto nos da idea que combinándose elementos como estos podemos crear HUDs(Head-Up Display):La información que en todo momento se muestra en pantalla durante la partida. En la figura se muestra una instancia del Quake II subido por Google creado en Javascript a través de WebGL Tengan en cuenta que los gráficos en la web son ideales pues los recursos puede que los tengas en otros sitios y lo único que debes hacer es incluir la URL.
- #39 La API lo que hace es actuar como puente entre JS y OpenGL Embedded System(Es una variante simplificada de OpenGL diseñada para dispositivos móviles tales como Android, iPhone, PSP3. ). Por lo tanto también usa el pipeline estandarizado en OpenGL, incluyendo los shaders. Los shaders implementados en WebGL están escritos en GL Shadding Languaje(GLSL). Por lo tanto podemos estructurar una aplicación HTML5 como:
- #40 Otras librerias para se encuentran ya en desarrollo para Escenas Gráficas, formato de archivos 3D como COLLADA y motores para el desarrollo de juegos.