1.
1ª parte: HTML5,
CSS3 y móviles
Raúl Jiménez Ortega - raul@pidecurso.es
@hhkaos | Hashtag: #pidecurso

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.
Hablaremos de...
● Móviles (en cifras)
● Herramientas / Frameworks:
○ LungoJS
○ PhoneGap o Apache Cordova
#PIDECURSO

4.
Móviles
Pongamos a prueba nuestros conocimientos
de la situación en España con 4 preguntas.

5.
¿Cuánto ha crecido la presencia
smartphones en el último año?
a) 10%
b) 20%
c) 30%
d) 40%
#PIDECURSO

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.
¿Qué % de la población Española
tiene dispositivos móviles?
a) 10%
b) 15%
c) 25%
d) 30%
#PIDECURSO

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.
¿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.
¿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.
¿Qué sistema operativo está
creando más empleo?
a) Android
b) iOS
c) Blackberry
d) Windows Mobile
#PIDECURSO

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.
La gran pregunta
¿Desarrollo nativo, híbrido o web?

14.
La respuesta obvia:
DEPENDE
Depende de:
● Necesidades:
○ Rendimiento
○ Funcionalidades
○ Urgencia
● Presupuesto
● Conocimientos
● Objetivo
● Etc.

15.
Apps Nativas vs Híbradas vs Web
Ventajas e inconvenientes
Fuente: Worklight #PIDECURSO

16.
Frameworks
Herramientas para desarrollar aplicaciones
web móvil con el mínimo esfuerzo.

17.
LungoJS
Desarrollo de aplicaciones web para
dispositivos móviles con HTML5, CSS3 y JS

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.
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.
<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.
Diseño sensible (Responsive
design)
Usa "CSS3 media queries"

22.
Juego de iconos disponibles
48 iconos vectorizados

23.
Elementos de interfaz
● Botones y colores
● Navegación
● Atributos
● Elementos de formulario
● Listas
● Eventos
● Scrolls
#PIDECURSO

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.
Ahora...
¡veamos un ejemplo!

26.
PhoneGap/Cordova
Empaquetador de aplicaciones web en
aplicaciones nativas.

27.
PhoneGap o Apache Cordova
- API
- Multiplataforma:
- iPhone
- Android
- Blackberry
- Windows Phone 7
- Bada
- Symbian
- webOS Autor:
Adobe Systems
Primera versión 2005

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.
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.
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.
¡Veamos otro ejemplo!