Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

HTML5, CSS3 y móviles

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
css3
css3
Cargando en…3
×

Eche un vistazo a continuación

1 de 31 Anuncio
Anuncio

Más Contenido Relacionado

Similares a HTML5, CSS3 y móviles (20)

Anuncio

Más reciente (20)

Anuncio

HTML5, CSS3 y móviles

  1. 1. 1ª parte: HTML5, CSS3 y móviles Raúl Jiménez Ortega - raul@pidecurso.es @hhkaos | Hashtag: #pidecurso
  2. 2. ¿Quien soy? Y por qué os cuento esto. ● Emprendedor en: ○ GeoRemindMe! ○ PideCurso ● Desarrollador web desde 1999: ○ (X)HTML, HTML5, CSS 2.1, CSS3, Javascript, PHP, Python+Django, ExtJS, Blueprint, etc. #PIDECURSO
  3. 3. Hablaremos de... ● Móviles (en cifras) ● Herramientas / Frameworks: ○ LungoJS ○ PhoneGap o Apache Cordova #PIDECURSO
  4. 4. Móviles Pongamos a prueba nuestros conocimientos de la situación en España con 4 preguntas.
  5. 5. ¿Cuánto ha crecido la presencia smartphones en el último año? a) 10% b) 20% c) 30% d) 40% #PIDECURSO
  6. 6. ¿Cuánto ha crecido la presencia smartphones en el último año? a) 10% b) 20% c) 30% d) 40% Fuente IAB Spain: De 2008 a 2009 incrementó un 11% De 2009 a 2010 incrementó un 18% De 2010 a 2011 incrementó un 40% #PIDECURSO
  7. 7. ¿Qué % de la población Española tiene dispositivos móviles? a) 10% b) 15% c) 25% d) 30% #PIDECURSO
  8. 8. ¿Qué % de la población Española tiene dispositivos móviles? a) 10% b) 15% c) 25% d) 30% Fuente IAB Spain: 11.8 Millones de personas en España tienen dispositivos móviles con conexión a Internet #PIDECURSO
  9. 9. ¿Cuáles son los SOs más habituales en los smartphones? a) iOS, Android, BB, Windows Phone b) Android, iOS, BB, Windows Phone c) Android, iOS,Windows Phone, BB d) iOS, Android, Windows Phone, BB #PIDECURSO
  10. 10. ¿Cuáles son los SOs más habituales en los smartphones? a) iPhone, Android, BB, Windows Phone b) Android, iPhone, BB, Windows Phone c) Android, iPhone,Windows Phone, BB d) iPhone, Android, Windows Phone, BB Fuente IAB Spain: 38% Android 19% iPhone 12% Blackberry 07% Windows Mobile #PIDECURSO
  11. 11. ¿Qué sistema operativo está creando más empleo? a) Android b) iOS c) Blackberry d) Windows Mobile #PIDECURSO
  12. 12. ¿Qué sistema operativo está creando más empleo? a) Android b) iOS c) Blackberry d) Windows Mobile Fuente Trovit: 3.162 empleos de desarrollo móvil iPhone 58.9% y Android 41.1% #PIDECURSO
  13. 13. La gran pregunta ¿Desarrollo nativo, híbrido o web?
  14. 14. La respuesta obvia: DEPENDE Depende de: ● Necesidades: ○ Rendimiento ○ Funcionalidades ○ Urgencia ● Presupuesto ● Conocimientos ● Objetivo ● Etc.
  15. 15. Apps Nativas vs Híbradas vs Web Ventajas e inconvenientes Fuente: Worklight #PIDECURSO
  16. 16. Frameworks Herramientas para desarrollar aplicaciones web móvil con el mínimo esfuerzo.
  17. 17. LungoJS Desarrollo de aplicaciones web para dispositivos móviles con HTML5, CSS3 y JS
  18. 18. Framework LungoJS Webapps con HTML5, CSS3 y Javascript - Semántico - Multiplataforma: - iOS - Android - Blackberry - WebOS http://www.lungojs.com https://github.com/TapQuo/Lungo.js - Vectorizado Autor: - WebSQL, Orientación, Javier Jiménez CEO & Creative Geolocalización, etc. Leader in TapQuo Inc.
  19. 19. LungoJS vs jQuery Mobile Framworks para el desarrollo de webs móviles Características LungoJS jQuery Mobile Interfaz sensible nativa Sí No Semántico Sí No Plataformas soportadas 4 8 Tamaño 12KB 19KB Comunidad Reducida Amplia HTML5 y CSS3 Sí No Plugins Con Sugar Sí Soporte para plantillas Sí Sí Licencia Dual: GPL o MIT Dual: GPL o MIT
  20. 20. <section id="main"> Semántico <header data-title="Title of section"></header> <article id="first_article"></article> <article id="second_article" class="list"> <scroll id="main_scroll"> <ul> <li data-icon="user"> <strong>@soyjavi</strong> <small>Author of @Lungojs</small> </li> <li data-icon="user"> <strong>@pasku1</strong> <small>Contributor of @Lungojs</small> </li> ... </ul> </scroll> </article> <footer class="toolbar"> <nav> <a href="#first_article" class="article" data-icon="home"></a> <a href="#second_article" class="article" data-icon="user"></a> <!-- This link is to view a different section --> <a href="#second" class="section" data-icon="right"></a> </nav> </footer> </section>
  21. 21. Diseño sensible (Responsive design) Usa "CSS3 media queries"
  22. 22. Juego de iconos disponibles 48 iconos vectorizados
  23. 23. Elementos de interfaz ● Botones y colores ● Navegación ● Atributos ● Elementos de formulario ● Listas ● Eventos ● Scrolls #PIDECURSO
  24. 24. LungoJS API Application Programming Interface App: init,get DOM: Usa QuoJS Core: log, execute, bind, mix, Service: isOwnProperty, toType, toArray, Settings, get, post, json isMobile View: Data: Scroll, Template, Element set, get, remove, exists, Sql.init, Sql. select, Sql.insert, Sql.update, Sql. Router: drop, Sql.execute section, article, back #PIDECURSO
  25. 25. Ahora... ¡veamos un ejemplo!
  26. 26. PhoneGap/Cordova Empaquetador de aplicaciones web en aplicaciones nativas.
  27. 27. PhoneGap o Apache Cordova - API - Multiplataforma: - iPhone - Android - Blackberry - Windows Phone 7 - Bada - Symbian - webOS Autor: Adobe Systems Primera versión 2005
  28. 28. PhoneGap vs Titanium Frameworks móviles Características PhoneGap Titanium SDK propia Sí Sí Genera código nativo No Sí HTML, CSS, HTML, CSS, Lenguajes de desarrollo Javascript, PHP, Javascript Python & Ruby Rendimiento Baja Alto Plataformas soportadas 7 2 Documentación de la API Amplia Amplia Apache Public Licencia BSD Modificada License v2
  29. 29. Código de ejemplo - Geolocalización function loader() { var state = document.readyState; if (state == 'loaded' || state == 'complete') { run(); } else { if (navigator.userAgent.indexOf('Browzr') > -1) { setTimeout(run, 250); } else { document.addEventListener('deviceready',run,false); } } } function run() { var win = function(position) { var coords = position.coords; var url = "http://maps.google.com/maps/api/staticmap?center=" + coords.latitude + "," + coords.longitude + "&zoom=13&size=320x480&roadmap&key=GMapsAPIKey&sensor=true"; document.getElementById('map').setAttribute('src',url); }; var fail = function(e) { alert('Can't retrieve position.nError: ' + e); }; navigator.geolocation.getCurrentPosition(win, fail); }
  30. 30. Referencia de la API Funciones nativas accesibles - Acelerómetro - Eventos - Cámara - Ficheros - Capture - Geolocalización - Brújula - Media - Conexión de red - Notificaciones - Contactos - Almacenamiento - Dispositivo Leyenda de colores (soporte): Todas Casi todas Bastantes Algunas Pocas
  31. 31. ¡Veamos otro ejemplo!

×