HTML Tour - Aplicaciones móviles multiplataforma

2,802 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,802
On SlideShare
0
From Embeds
0
Number of Embeds
2,109
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.
  • Crear proyecto básico con la template.
  • Mostrar cómo trabajar con el emulador y compartiendo web y mobile.
  • Enseñar emulador Android.
  • APIPost-buildevent
  • Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.Lightweight size and minimal image dependencies for speed.Modular architecture for creating custom builds that are optimized to only include the features needed for a particular application.HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and clean URLs through pushState.Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.Touch and mouse event support streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API. Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.Powerful theming framework and the ThemeRoller application make highly-branded experiences easy to build.Customizable bundles for even better perfomance can be built easily with the Download builder
  • Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.Compatible with all major mobile, tablet, e-reader & desktop platforms - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.Lightweight size and minimal image dependencies for speed.Modular architecture for creating custom builds that are optimized to only include the features needed for a particular application.HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and clean URLs through pushState.Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.Touch and mouse event support streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API. Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.Powerful theming framework and the ThemeRoller application make highly-branded experiences easy to build.Customizable bundles for even better perfomance can be built easily with the Download builder
  • HTML Tour - Aplicaciones móviles multiplataforma

    1. 1. Aplicaciones móviles multiplataforma
    2. 2. Contactos Gerard López glopez@plainconcepts.com Alejandro Hidalgo Ferández Web Team Leader ahidalgo@plainconcepts.com
    3. 3. Phonegap
    4. 4. Phonegap
    5. 5. API
    6. 6. Supported features
    7. 7. API sample
    8. 8. Plugins
    9. 9. Plugins
    10. 10. Desarrollo web
    11. 11. Emuladores
    12. 12. Phonegap build
    13. 13. Phonegap build
    14. 14. Remote debugging
    15. 15. Frameworks
    16. 16. jQuery Mobile • Construido en jQuery core • Compatible • Ligero • Modular • HTML5 • Progressive enhancement • Responsive design • Navegación Ajax • Acessibilidad y Touch • Personalizable
    17. 17. jQuery Mobile: Soporte • iOS • Android • Blackberry • Palm WebOS • Nokia/Symbian • Windows Phone 7 • MeeGo • Opera Mobile/Mini • Firefox Mobile • Kindle, • All modern browsers
    18. 18. Primer ejemplo
    19. 19. 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>
    20. 20. Demo
    21. 21. Eventos $(document).bind("mobileinit", function() { $.extend($.mobile, { $.mobile.defaultPageTransition = "fade"; $.mobile.loadingMessage="Fetching page...“ }); }); $("#pageBtn").click(function() { $.mobile.changePage("test2.html", {transition:"flip"}); });

    ×