34
HTML5
| Date post: | 16-Aug-2015 |
| Category: |
Documents |
| Upload: | sergi-hernando |
| View: | 54 times |
| Download: | 0 times |
HTML5
Sergi Hernando @ajoman
Sergi Hernando CTO Mobivery
Programación HTLM
Historia y Evolución
2.0, 3.2, 4.0
• 1999...
Historia y Evolución
5
• Lo nuevo
header, footer, article, sectioncanvas
audio, videoforms
local storage, geolocation APIsapplication cache
• Draft!
Historia y Evolución
Flash
Thoughts on FlashSteve Jobs, April 2010
•Open standards•Access to full web content•Reliability, security and performance•Battery life•Touch•Apps
Historia y Evolución
Flash
Adobe to More Aggressively Contribute to HTML5Danny Winokur, November 2011
•No more Flash Player for mobile•Package native apps with Abode AIR
Terminología
Mobile Web
• Sitio web tradicional adaptado a pantallas de menor tamaño y otras proporciones
• Se accede desde el navegador del dispositivo
Terminología
Webapp
• Aplicación en el dispositivo, como cualquier otra, pero implementada como un sitio web tradicional
• Multiplataforma
Terminología
App Híbrida
• Combinación de aplicación nativa, webapp y web móvil
• Ejemplo: barcode scanner
Desarrollo
Entornos y ContextosNativo vs. HTML5
Desarrollo
Entornos y ContextosMobile Web
<html/>
Desarrollo
Entornos y ContextosMobile Web
•Todas las características que ofrece HTML5
Desarrollo
Entornos y ContextosWebapp
<html/>
Desarrollo
Entornos y ContextosApp Híbrida
<html/>
<html/>
Desarrollo
Responsive Design
Estrategia Tecnológica
Lean
Real World
jQuery Mobile
<ul> <li> Pan </li></ul>
Real World
jQuery Mobile
<ul> <li> <a href=”pan.html”>Pan</a> </li></ul>
Real World
jQuery Mobile
<ul> <li> <a href=”#” onclick=”show_pan()”>Pan</a> </li></ul>
Real World
jQuery Mobile
<ul> <li style=”position:relative...”> <a href=”#” onclick=”show_pan()”>Pan</a> </li></ul>
Real World
jQuery Mobile
<ul data-role=”listview”> <li><a href=”pan.html”>Pan</a></li></ul>
Real World
jQuery Mobile
<ul data-role=”listview” data-filter=”true”> <li><a href=”pan.html”>Pan</a></li> <li><a href=”leche.html”>Leche</a></li> <li><a href=”huevos.html”>Huevos</a></li> <li><a href=”arroz.html”>Arroz</a></li> <li><a href=”lechuga.html>Lechuga</a></li></ul>
Real World
jQuery Mobile
<div data-role="page" data-theme="a" data-content-theme="a"> <ul data-role=”listview” data-filter=”true”> <li><a href=”pan.html”>Pan</a></li> <li><a href=”leche.html”>Leche</a></li> </ul></div>
Real World
jQuery Mobile
<!DOCTYPE html><html><body> <div data-role="page"> <div data-role=”content”> <ul data-role=”listview” data-filter=”true”> <li><a href=”pan.html”>Pan</a></li> </ul> </div> </div></body></html>
Otros frameworks
Enyo
• Versión 2.0 plataforma desarrollo WebOS
• Sólo JavaScript!
