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:○ (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!