Presentacion Desarrollo de Aplicaciones para Iphone

39
Julio Gorgé, Lemon Team Aplicaciones web para iPhone

description

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

Transcript of Presentacion Desarrollo de Aplicaciones para Iphone

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