Aplicaciones	
  web
  para	
  iPhone
   Julio Gorgé, Lemon Team
Contenidos
✓ El	
  iPhone	
  mola
✓ Web	
  apps
   1. Frameworks
   2. Dashcode
   3. Diseño
el	
  iPhone	
  mola
ventas	
  iPhone

     75	
  M
iPhone	
  vs	
  Android
                                2009

 iPhone	
                  20.5	
  M
Android                ...
iPhone	
  vs	
  Android
                        Q4	
  /	
  2009

 iPhone	
                    7.3	
  M
Android            ...
Android	
  empieza	
  	
  
      a	
  ser	
  
 ‘mainstream’…
Web	
  apps:	
  ventajas
✓ Tecnologías	
  estándar
✓ No	
  hace	
  falta	
  tener	
  un	
  Mac
✓ No	
  solo	
  funcionan	
...
Web	
  apps:	
  desventajas
x Dependen	
  de	
  Safari
    hay	
  soluciones
x No	
  se	
  ven	
  a	
  pantalla	
  complet...
Problema	
  1:
Web	
  apps	
  dependen	
  
de	
  Safari
WEB	
  CLIP	
  ICON


<head>
	

 <link rel="apple-touch-icon" href="iphoneCAMDirecto.png" />
</head>
Problema	
  2:
Web	
  apps	
  no	
  se	
  ven	
  a	
  
pantalla	
  completa
Modo	
  pantalla	
  completa
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user...
Modo	
  pantalla	
  completa

http://webapp-net.com/Demo/Index.html
Problema	
  3:
Web	
  apps	
  requieren	
  
conexión	
  permanente
HTML5:	
  caché	
  offline
<!DOCTYPE html>
<html manifest="demo.manifest">


CACHE MANIFEST                  RECURSOS
imagen...
HTML5:	
  caché	
  offline

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


var value = sessionStorage.getItem("key")


sessionSt...
HTML5:	
  caché	
  offline
SQLite	
  desde	
  Javascript
var nombre = 'jaime';
var color = 'rojo';

 db.transaction(
   func...
Web	
  app	
  frameworks
       ✓ jQTouch
       ✓ iWebkit
       ✓ iUI
iUI
Demo:	
  iUI
Demo:	
  jqTouch
Dashcode
Demo:	
  Dashcode
Consejos	
  de	
  diseño
✓ Mejor	
  botones	
  que	
  enlaces	
  de	
  texto
✓ Suficiente	
  separación	
  entre	
  botones...
¿Preguntas?
      Julio Gorgé
  twitter.com/zaelsius
 www.lemonteam.com
Enlaces
developer.apple.com/iphone
HTML 5 offline application cache
code.google.com/p/iui
jqtouch.com
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
Upcoming SlideShare
Loading in …5
×

Presentacion Desarrollo de Aplicaciones para Iphone

4,454 views

Published on

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

Published in: Education, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,454
On SlideShare
0
From Embeds
0
Number of Embeds
971
Actions
Shares
0
Downloads
77
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Presentacion Desarrollo de Aplicaciones para Iphone

  1. 1. Aplicaciones  web para  iPhone Julio Gorgé, Lemon Team
  2. 2. Contenidos ✓ El  iPhone  mola ✓ Web  apps 1. Frameworks 2. Dashcode 3. Diseño
  3. 3. el  iPhone  mola
  4. 4. ventas  iPhone 75  M
  5. 5. iPhone  vs  Android 2009 iPhone   20.5  M Android 6.8  M
  6. 6. iPhone  vs  Android Q4  /  2009 iPhone   7.3  M Android 4  M
  7. 7. Android  empieza     a  ser   ‘mainstream’…
  8. 8. Web  apps:  ventajas ✓ Tecnologías  estándar ✓ No  hace  falta  tener  un  Mac ✓ No  solo  funcionan  en  iPhone
  9. 9. Web  apps:  desventajas x Dependen  de  Safari hay  soluciones x No  se  ven  a  pantalla  completa x Requieren  estar  ‘online’
  10. 10. Problema  1: Web  apps  dependen   de  Safari
  11. 11. WEB  CLIP  ICON <head> <link rel="apple-touch-icon" href="iphoneCAMDirecto.png" /> </head>
  12. 12. Problema  2: Web  apps  no  se  ven  a   pantalla  completa
  13. 13. 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" />
  14. 14. Modo  pantalla  completa http://webapp-net.com/Demo/Index.html
  15. 15. Problema  3: Web  apps  requieren   conexión  permanente
  16. 16. HTML5:  caché  offline <!DOCTYPE html> <html manifest="demo.manifest"> CACHE MANIFEST RECURSOS imagenes/goatse.jpg “CACHEADOS” imagenes/lemonparty.jpg NETWORK: http://ejemplo.com/ruta/ RECURSOS http://ejemplo.com/otra-ruta/ “NO CACHEADOS”
  17. 17. HTML5:  caché  offline sessionStorage.setItem("key", "value" ); var value = sessionStorage.getItem("key") sessionStorage.removeItem("key")
  18. 18. 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 ]); } );
  19. 19. Web  app  frameworks ✓ jQTouch ✓ iWebkit ✓ iUI
  20. 20. iUI
  21. 21. Demo:  iUI
  22. 22. Demo:  jqTouch
  23. 23. Dashcode
  24. 24. Demo:  Dashcode
  25. 25. 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
  26. 26. ¿Preguntas? Julio Gorgé twitter.com/zaelsius www.lemonteam.com
  27. 27. Enlaces developer.apple.com/iphone HTML 5 offline application cache code.google.com/p/iui jqtouch.com

×