Desarrollo web para móviles
-
Upload
coto -
Category
Technology
-
view
98 -
download
2
Transcript of Desarrollo web para móviles
![Page 1: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/1.jpg)
Desarrollo Web paraMóvilesMóviles
Rodrigo Augosto a.k.a. @coto
![Page 2: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/2.jpg)
El futuro es movil?
![Page 3: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/3.jpg)
Aplicaciones empotradas o web?
![Page 4: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/4.jpg)
El futuro es WEB Móvil y lo trae WebKit
![Page 5: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/5.jpg)
Veamos que nos ofrece el mercado!
![Page 6: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/6.jpg)
Y que problema tenemos?
InestableEn pañales Sólo un plugin*
![Page 7: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/7.jpg)
Ahora....critiquemos a jQuery Mobile?
![Page 8: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/8.jpg)
Acoplado a jQuery
......y Qué?
![Page 9: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/9.jpg)
Realmente es necesario tanto soporte?
![Page 10: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/10.jpg)
Pero no todo es malo... es jQuery!!
• Uso de roles.
• Uso de templates.
• Control de orientación (landscape - portrait)
![Page 11: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/11.jpg)
Pero no todo es malo... es jQuery!!
• Uso de dialogos.
• Touch events (tap, taphold, swipes).
• ¿¿ Nueva vista = Nueva URI ??
![Page 12: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/12.jpg)
Conclusión previa...
Hagamos un Framework!!
![Page 13: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/13.jpg)
La Base
Vista 1 Vista 2
Transición(ajax + effect)
![Page 14: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/14.jpg)
Flujo de transciciones
AjaxAjaxAjaxAjax
EffectEffectEffectEffect
callDataDataDataData
request
response
request
completeRender
![Page 15: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/15.jpg)
Uso de controladores
![Page 16: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/16.jpg)
![Page 17: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/17.jpg)
Y el inicio?
![Page 18: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/18.jpg)
Necesito HTML?
![Page 19: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/19.jpg)
y el AJAX?
![Page 20: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/20.jpg)
Un gran problema, una gran solución
AjaxAjaxAjaxAjax
EffectEffectEffectEffect
callDataDataDataData
request
response
request
completeRender
WARNINGDon’t call to
other view until last one has finished
![Page 21: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/21.jpg)
![Page 22: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/22.jpg)
![Page 23: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/23.jpg)
Consideraciones “únicas”
• Botón volver (transacciones incluidas).
![Page 24: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/24.jpg)
Consideraciones “únicas”
![Page 25: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/25.jpg)
Consideraciones “únicas”
• Manejo de Ajax previo renderView.
![Page 26: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/26.jpg)
Consideraciones “únicas”
![Page 27: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/27.jpg)
Finalmente les recomiendo un modelo
![Page 28: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/28.jpg)
DTO
Vista
Controlador
Modelo
Servicios
Extractores
![Page 29: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/29.jpg)
Un Extractor
![Page 30: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/30.jpg)
Conclusiones:JavaScript la lleva!
![Page 31: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/31.jpg)
Conclusiones, en serio:• WebKit tiende a ser el motor de layout
por defecto.
• JavaScript avanza a pasos agigantados para el soporte móvil.
![Page 32: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/32.jpg)
Conclusiones, en serio:• Los request si importan.
• Cuando TRY / CATCH no sirven, la orientación al prototipo sale al rescate.
![Page 33: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/33.jpg)
Conclusión Final• Se puede llevar el know-how a jQuery
Mobile (webkit oriented).
![Page 34: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/34.jpg)
Pendientes• Desligar de jQuery
• find();
• $();
• $.ajax();
• .attr();
![Page 35: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/35.jpg)
Pendientes• Botón volver del browser
• Hash en url (bookmark)
![Page 36: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/36.jpg)
Desarrollo web para móviles
Rodrigo Augosto (a.k.a. “@coto”)
Gracias!!!
![Page 37: Desarrollo web para móviles](https://reader030.fdocuments.es/reader030/viewer/2022032421/55a79f561a28ab4d438b4654/html5/thumbnails/37.jpg)
Desarrollo web para móviles
Rodrigo Augosto (a.k.a. “@coto”)
Preguntas??