HTML Tour - Aplicaciones móviles multiplataforma

23
Aplicaciones móviles multiplataforma

description

En esta sesión conoceremos la plataforma de desarrollo Phonegap, cuando nos puede interesar utilizarla y cuando no, veremos cómo podemos aprovechar nuestros conocimientos de HTML5, CSS y javascript para crear aplicaciones nativas en múltiples plataformas móviles y cómo tenemos acceso a interacción con el dispositivo (camera, geolocation, contacts, …). Para todo esto nos apoyaremos en el framework web, optimizado para gestos, jquerymobile. Write less, do more.

Transcript of HTML Tour - Aplicaciones móviles multiplataforma

Page 1: HTML Tour - Aplicaciones móviles multiplataforma

Aplicaciones móviles multiplataforma

Page 2: HTML Tour - Aplicaciones móviles multiplataforma

Contactos

Gerard Ló[email protected]

Alejandro Hidalgo FerándezWeb Team [email protected]

Page 3: HTML Tour - Aplicaciones móviles multiplataforma
Page 4: HTML Tour - Aplicaciones móviles multiplataforma

Phonegap

Write once, run everywhere

Native installers (Stores)

Use standard web

technologies

Page 5: HTML Tour - Aplicaciones móviles multiplataforma

Phonegap

Page 6: HTML Tour - Aplicaciones móviles multiplataforma

API

Page 7: HTML Tour - Aplicaciones móviles multiplataforma

Supported features

Page 8: HTML Tour - Aplicaciones móviles multiplataforma

API sample

Page 9: HTML Tour - Aplicaciones móviles multiplataforma

Plugins

Page 10: HTML Tour - Aplicaciones móviles multiplataforma

Plugins

Page 11: HTML Tour - Aplicaciones móviles multiplataforma
Page 12: HTML Tour - Aplicaciones móviles multiplataforma

Desarrollo web

Page 13: HTML Tour - Aplicaciones móviles multiplataforma

Emuladores

Page 14: HTML Tour - Aplicaciones móviles multiplataforma

Phonegap build

Page 15: HTML Tour - Aplicaciones móviles multiplataforma

Phonegap build

Page 16: HTML Tour - Aplicaciones móviles multiplataforma

Remote debugging

Page 17: HTML Tour - Aplicaciones móviles multiplataforma

Frameworks

Page 18: HTML Tour - Aplicaciones móviles multiplataforma

jQuery Mobile

• Construido en jQuery core• Compatible• Ligero• Modular• HTML5• Progressive enhancement• Responsive design• Navegación Ajax• Acessibilidad y Touch• Personalizable

Page 19: HTML Tour - Aplicaciones móviles multiplataforma

jQuery Mobile: Soporte

• iOS• Android• Blackberry• Palm WebOS• Nokia/Symbian • Windows Phone 7• MeeGo• Opera Mobile/Mini• Firefox Mobile• Kindle, • All modern browsers

Page 20: HTML Tour - Aplicaciones móviles multiplataforma

Primer ejemplo

Page 21: HTML Tour - Aplicaciones móviles multiplataforma

Controles

<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li>

<li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li>

</ul>

Page 22: HTML Tour - Aplicaciones móviles multiplataforma

Demo

Page 23: HTML Tour - Aplicaciones móviles multiplataforma

Eventos

$(document).bind("mobileinit", function() {$.extend($.mobile, {

$.mobile.defaultPageTransition = "fade";$.mobile.loadingMessage="Fetching page...“

});});

$("#pageBtn").click(function() {$.mobile.changePage("test2.html", {transition:"flip"});

});