Download - HTML5, CSS3 y móviles
1ª parte: HTML5, CSS3 y móvilesRaúl Jiménez Ortega - [email protected]@hhkaos | Hashtag: #pidecurso
¿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
Hablaremos de...
● Móviles (en cifras)
● Herramientas / Frameworks: ○ LungoJS ○ PhoneGap o Apache Cordova
#PIDECURSO
MóvilesPongamos a prueba nuestros conocimientos de 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%d) 40%
#PIDECURSO
¿Cuánto ha crecido la presencia smartphones en el último año?
a) 10%b) 20%c) 30%d) 40%
#PIDECURSO
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
¿Qué % de la población Española tiene dispositivos móviles?
a) 10%b) 15%c) 25%d) 30%
#PIDECURSO
¿Qué % de la población Española tiene dispositivos móviles?
a) 10%b) 15%c) 25%d) 30%
#PIDECURSO
Fuente IAB Spain:11.8 Millones de personas en España tienen dispositivos móviles con conexión a Internet
#PIDECURSO
¿Cuáles son los SOs más habituales 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
¿Cuáles son los SOs más habituales en los smartphones?
a) iPhone, Android, BB, Windows Phoneb) Android, iPhone, BB, Windows Phonec) Android, iPhone,Windows Phone, BBd) iPhone, Android, Windows Phone, BB
#PIDECURSO
Fuente IAB Spain:38% Android19% iPhone 12% Blackberry 07% Windows Mobile
#PIDECURSO
¿Qué sistema operativo está creando más empleo?
#PIDECURSO
a) Androidb) iOSc) Blackberryd) Windows Mobile
¿Qué sistema operativo está creando más empleo?
#PIDECURSO
a) Androidb) iOSc) Blackberryd) Windows Mobile
Fuente Trovit:3.162 empleos de desarrollo móvil
iPhone 58.9% y Android 41.1%
¿Desarrollo nativo, híbrido o web?
La gran pregunta
La respuesta obvia:DEPENDE
Depende de:● Necesidades:
○ Rendimiento○ Funcionalidades○ Urgencia
● Presupuesto● Conocimientos● Objetivo● Etc.
Apps Nativas vs Híbradas vs WebVentajas e inconvenientes
#PIDECURSOFuente: Worklight
FrameworksHerramientas para desarrollar aplicaciones web móvil con el mínimo esfuerzo.
LungoJSDesarrollo de aplicaciones web para dispositivos móviles con HTML5, CSS3 y JS
Autor:Javier JiménezCEO & Creative Leader in TapQuo Inc.
Framework LungoJSWebapps con HTML5, CSS3 y Javascript
- Semántico- Multiplataforma:
- iOS- Android- Blackberry- WebOS
- Vectorizado- WebSQL, Orientación, Geolocalización, etc.
http://www.lungojs.comhttps://github.com/TapQuo/Lungo.js
LungoJS vs jQuery MobileFramworks 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
<section id="main"> <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>
Semántico
Diseño sensible (Responsive design)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#PIDECURSO
LungoJS APIApplication Programming Interface
App: init,get
Core: log, execute, bind, mix, isOwnProperty, toType, toArray, isMobile
Data:set, get, remove, exists, Sql.init, Sql.select, Sql.insert, Sql.update, Sql.drop, Sql.execute
DOM:Usa QuoJS
Service:Settings, get, post, json
View:Scroll, Template, Element
Router:section, article, back
#PIDECURSO
Ahora...
¡veamos un ejemplo!
PhoneGap/CordovaEmpaquetador de aplicaciones web en aplicaciones nativas.
Autor:Adobe SystemsPrimera versión 2005
PhoneGap o Apache Cordova
- API- Multiplataforma:
- iPhone- Android- Blackberry- Windows Phone 7- Bada- Symbian- webOS
PhoneGap vs TitaniumFrameworks móviles
Características PhoneGap Titanium
SDK propia Sí Sí
Genera código nativo No Sí
Lenguajes de desarrollo HTML, CSS, Javascript
HTML, CSS, Javascript, PHP, Python & Ruby
Rendimiento Baja Alto
Plataformas soportadas 7 2
Documentación de la API Amplia Amplia
Licencia BSD Modificada Apache Public License v2
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);}
Código de ejemplo - Geolocalización
Referencia de la APIFunciones nativas accesibles
- Acelerómetro- Cámara- Capture- Brújula- Conexión de red- Contactos- Dispositivo
- Eventos- Ficheros- Geolocalización- Media- Notificaciones- Almacenamiento
Leyenda de colores (soporte): Todas Casi todas Bastantes Algunas Pocas
¡Veamos otro ejemplo!