presentacion desarrollo de aplicaciones para iphone

39
Julio Gorgé, Lemon Team Aplicaciones web para iPhone

Upload: andres-karp

Post on 13-Dec-2014

3.719 views

Category:

Education


5 download

DESCRIPTION

Conferencia de ADWA sobre Desarrollo de Aplicaciones para Iphone por Julio Gorgé

TRANSCRIPT

Page 1: Presentacion Desarrollo de Aplicaciones para Iphone

Julio Gorgé, Lemon Team

Aplicaciones  webpara  iPhone

Page 2: Presentacion Desarrollo de Aplicaciones para Iphone

Contenidos✓ El  iPhone  mola

✓Web  apps

1. Frameworks2. Dashcode3. Diseño

Page 3: Presentacion Desarrollo de Aplicaciones para Iphone
Page 4: Presentacion Desarrollo de Aplicaciones para Iphone
Page 5: Presentacion Desarrollo de Aplicaciones para Iphone

el  iPhone  mola

Page 6: Presentacion Desarrollo de Aplicaciones para Iphone

75  Mventas  iPhone

Page 7: Presentacion Desarrollo de Aplicaciones para Iphone

iPhone  vs  Android

iPhone  

Android

2009

6.8  M

20.5  M

Page 8: Presentacion Desarrollo de Aplicaciones para Iphone

iPhone  vs  Android

iPhone  

Android

Q4  /  2009

4  M

7.3  M

Page 9: Presentacion Desarrollo de Aplicaciones para Iphone

Android  empieza    a  ser  

‘mainstream’…

Page 10: Presentacion Desarrollo de Aplicaciones para Iphone

✓Tecnologías  estándar

✓No  hace  falta  tener  un  Mac

✓No  solo  funcionan  en  iPhone

Web  apps:  ventajas

Page 11: Presentacion Desarrollo de Aplicaciones para Iphone

x Dependen  de  Safari

x No  se  ven  a  pantalla  completa

x Requieren  estar  ‘online’

Web  apps:  desventajas

hay  soluciones

Page 12: Presentacion Desarrollo de Aplicaciones para Iphone

Problema  1:

Web  apps  dependen  de  Safari

Page 13: Presentacion Desarrollo de Aplicaciones para Iphone
Page 14: Presentacion Desarrollo de Aplicaciones para Iphone

<head> <link rel="apple-touch-icon" href="iphoneCAMDirecto.png" /></head>

WEB  CLIP  ICON

Page 15: Presentacion Desarrollo de Aplicaciones para Iphone

Problema  2:

Web  apps  no  se  ven  a  pantalla  completa

Page 16: Presentacion Desarrollo de Aplicaciones para Iphone

Modo  pantalla  completa

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Page 18: Presentacion Desarrollo de Aplicaciones para Iphone

Problema  3:

Web  apps  requieren  conexión  permanente

Page 19: Presentacion Desarrollo de Aplicaciones para Iphone
Page 20: Presentacion Desarrollo de Aplicaciones para Iphone

<!DOCTYPE html><html manifest="demo.manifest">

CACHE MANIFESTimagenes/goatse.jpgimagenes/lemonparty.jpg

NETWORK:http://ejemplo.com/ruta/http://ejemplo.com/otra-ruta/

RECURSOS“CACHEADOS”

RECURSOS“NO CACHEADOS”

HTML5:  caché  offline

Page 21: Presentacion Desarrollo de Aplicaciones para Iphone

sessionStorage.setItem("key", "value" );

HTML5:  caché  offline

var value = sessionStorage.getItem("key")

sessionStorage.removeItem("key")

Page 22: Presentacion Desarrollo de Aplicaciones para Iphone

HTML5:  caché  offline

SQLite  desde  Javascript

var nombre = 'jaime';var color = 'rojo';

db.transaction( function (transaction) { transaction.executeSql("UPDATE gente set color=? where nombre=?;", [ color, nombre ]);

});

Page 23: Presentacion Desarrollo de Aplicaciones para Iphone

Web  app  frameworks

✓ jQTouch

✓ iWebkit

✓ iUI

Page 24: Presentacion Desarrollo de Aplicaciones para Iphone
Page 25: Presentacion Desarrollo de Aplicaciones para Iphone

iUI

Page 26: Presentacion Desarrollo de Aplicaciones para Iphone

Demo:  iUI

Page 27: Presentacion Desarrollo de Aplicaciones para Iphone

Demo:  jqTouch

Page 28: Presentacion Desarrollo de Aplicaciones para Iphone

Dashcode

Page 29: Presentacion Desarrollo de Aplicaciones para Iphone
Page 30: Presentacion Desarrollo de Aplicaciones para Iphone
Page 31: Presentacion Desarrollo de Aplicaciones para Iphone

Demo:  Dashcode

Page 32: Presentacion Desarrollo de Aplicaciones para Iphone

Consejos  de  diseño✓ Mejor  botones  que  enlaces  de  texto

✓ Suficiente  separación  entre  botones

✓ No  usar  menús  desplegables  ni  hovers!

✓ Tamaño  de  letra  grande

✓ Expandir  secciones  para  evitar  scrolling

✓ AJAX

Page 33: Presentacion Desarrollo de Aplicaciones para Iphone
Page 34: Presentacion Desarrollo de Aplicaciones para Iphone
Page 35: Presentacion Desarrollo de Aplicaciones para Iphone
Page 36: Presentacion Desarrollo de Aplicaciones para Iphone
Page 37: Presentacion Desarrollo de Aplicaciones para Iphone