1ª parte: HTML5,CSS3 y móvilesRaúl Jiménez Ortega - raul@pidecurso.es@hhkaos | Hashtag: #pidecurso
¿Quien soy?Y por qué os cuento esto.● Emprendedor en:    ○ GeoRemindMe!    ○ PideCurso●   Desarrollador web desde 1999:   ...
Hablaremos de...● Móviles (en cifras)● Herramientas / Frameworks:  ○ LungoJS  ○ PhoneGap o Apache Cordova                 ...
MóvilesPongamos a prueba nuestros conocimientosde la situación en España con 4 preguntas.
¿Cuánto ha crecido la presencia smartphones en el último año?            a) 10%            b) 20%            c) 30%       ...
¿Cuánto ha crecido la presencia smartphones en el último año?               a) 10%               b) 20%               c) 3...
¿Qué % de la población Española  tiene dispositivos móviles?            a) 10%            b) 15%            c) 25%        ...
¿Qué % de la población Española  tiene dispositivos móviles?                   a) 10%                   b) 15%            ...
¿Cuáles son los SOs máshabituales en los smartphones?a) iOS, Android, BB, Windows Phoneb) Android, iOS, BB, Windows Phonec...
¿Cuáles son los SOs máshabituales en los smartphones? a) iPhone, Android, BB, Windows Phone b) Android, iPhone, BB, Window...
¿Qué sistema operativo está  creando más empleo?     a) Android     b) iOS     c) Blackberry     d) Windows Mobile        ...
¿Qué sistema operativo está  creando más empleo?       a) Android       b) iOS       c) Blackberry       d) Windows Mobile...
La gran pregunta¿Desarrollo nativo, híbrido o web?
La respuesta obvia:             DEPENDEDepende de:  ● Necesidades:      ○ Rendimiento      ○ Funcionalidades      ○ Urgenc...
Apps Nativas vs Híbradas vs WebVentajas e inconvenientesFuente: Worklight           #PIDECURSO
FrameworksHerramientas para desarrollar aplicacionesweb móvil con el mínimo esfuerzo.
LungoJSDesarrollo de aplicaciones web paradispositivos móviles con HTML5, CSS3 y JS
Framework LungoJSWebapps con HTML5, CSS3 y Javascript- Semántico- Multiplataforma:   - iOS   - Android   - Blackberry   - ...
LungoJS vs jQuery MobileFramworks para el desarrollo de webs móvilesCaracterísticas                LungoJS        jQuery M...
<section id="main">Semántico       <header data-title="Title of section"></header>               <article id="first_articl...
Diseño sensible (Responsivedesign)Usa "CSS3 media queries"
Juego de iconos disponibles48 iconos vectorizados
Elementos de interfaz● Botones y colores● Navegación● Atributos● Elementos de formulario● Listas● Eventos● Scrolls        ...
LungoJS APIApplication Programming Interface  App:  init,get                                   DOM:                       ...
Ahora...¡veamos un ejemplo!
PhoneGap/CordovaEmpaquetador de aplicaciones web enaplicaciones nativas.
PhoneGap o Apache Cordova- API- Multiplataforma:   - iPhone   - Android   - Blackberry   - Windows Phone 7   - Bada   - Sy...
PhoneGap vs TitaniumFrameworks móvilesCaracterísticas             PhoneGap          TitaniumSDK propia                    ...
Código de ejemplo - Geolocalizaciónfunction loader() {   var state = document.readyState;   if (state == loaded || state =...
Referencia de la APIFunciones nativas accesibles- Acelerómetro                            - Eventos- Cámara               ...
¡Veamos otro ejemplo!
Próxima SlideShare
Cargando en…5
×

HTML5, CSS3 y móviles

3.867 visualizaciones

Publicado el

Presentación utilizada por Raúl Jiménez durante la charla organizada el miércoles 14 de Marzo en el evento:
http://www.facebook.com/events/407523832597982/

Publicado en: Tecnología
0 comentarios
7 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
3.867
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
144
Comentarios
0
Recomendaciones
7
Insertados 0
No insertados

No hay notas en la diapositiva.

HTML5, CSS3 y móviles

  1. 1. 1ª parte: HTML5,CSS3 y móvilesRaú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óvilesPongamos a prueba nuestros conocimientosde 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áshabituales en los smartphones?a) iOS, Android, BB, Windows Phoneb) Android, iOS, BB, Windows Phonec) Android, iOS,Windows Phone, BBd) iOS, Android, Windows Phone, BB #PIDECURSO
  10. 10. ¿Cuáles son los SOs máshabituales 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: DEPENDEDepende de: ● Necesidades: ○ Rendimiento ○ Funcionalidades ○ Urgencia ● Presupuesto ● Conocimientos ● Objetivo ● Etc.
  15. 15. Apps Nativas vs Híbradas vs WebVentajas e inconvenientesFuente: Worklight #PIDECURSO
  16. 16. FrameworksHerramientas para desarrollar aplicacionesweb móvil con el mínimo esfuerzo.
  17. 17. LungoJSDesarrollo de aplicaciones web paradispositivos móviles con HTML5, CSS3 y JS
  18. 18. Framework LungoJSWebapps 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 MobileFramworks para el desarrollo de webs móvilesCaracterísticas LungoJS jQuery MobileInterfaz sensible nativa Sí NoSemántico Sí NoPlataformas soportadas 4 8Tamaño 12KB 19KBComunidad Reducida AmpliaHTML5 y CSS3 Sí NoPlugins 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 (Responsivedesign)Usa "CSS3 media queries"
  22. 22. Juego de iconos disponibles48 iconos vectorizados
  23. 23. Elementos de interfaz● Botones y colores● Navegación● Atributos● Elementos de formulario● Listas● Eventos● Scrolls #PIDECURSO
  24. 24. LungoJS APIApplication 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/CordovaEmpaquetador de aplicaciones web enaplicaciones 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 TitaniumFrameworks móvilesCaracterísticas PhoneGap TitaniumSDK propia Sí SíGenera código nativo No Sí HTML, CSS, HTML, CSS,Lenguajes de desarrollo Javascript, PHP, Javascript Python & RubyRendimiento Baja AltoPlataformas soportadas 7 2Documentación de la API Amplia Amplia Apache PublicLicencia BSD Modificada License v2
  29. 29. Código de ejemplo - Geolocalizaciónfunction 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(Cant retrieve position.nError: + e); }; navigator.geolocation.getCurrentPosition(win, fail);}
  30. 30. Referencia de la APIFunciones 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!

×