Patrones de Navegación Móviles con Xamarin - Costa Rica Mobile Developers

Presentación del Code-Camp de Xamarin.Forms sobre Patrones de Navegación Móvil

Transcript

1. Patrones de Navegación Móvil
2. Nueva imagen Mobile CR Developers Más recursos, más móvil > Meetup: Mobile CR Developers > Apertura hacia otras tecnologías. o JavaScript. o Swift, Java. o Enfoques en otras formas de crear aplicaciones nativas http://stvansolano.github.io/blog Twitter: @stvansolano
3. • +9 años desarrollando • Desarrollo de apps web y entorno .Net • Senior Software Engineer, Xamarin MVP • Microsoft Certified Professional & MCSD: Web Apps • Full stack development, .Net, NodeJS, Angular, Mobile, entre otros. • Xamarin, Mono, Open Source. Sobre mí Esteban Solano Granados Senior Software Engineer http://stvansolano.github.io/blog stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo
4. stvansolano@outlook.com Twitter/GitHub: stvansolano Patrocinadores y recursos para la Comunidad http://stvansolano.github.io/blog
5. Avantica > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
6. Sobre Avantica • Empresa de origen 100% costarricense. • Sedes en Liberia, San Carlos, EEUU y Perú. • +20 años en el mercado de servicios de software a nivel nacional incluyendo banca, desarrollo, móviles y calidad de software. • Clientes a nivel nacional e internacional. • Beneficios: • Teletrabajo (1-3 días), vestimenta casual. • Flexibilidad de horarios. • Plan médico. • Espacios y actividades recreativas. > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
7. Agenda • Introducción • Tendencias del desarrollo móvil • Recap:Xamarin.Forms • Anatomía de Xamarin.Forms • Patrones de Navegación Móvi en detall • Rifa entre los asistentes. • Sesión código libre (Patrones de navegación) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
8. Interfaces de Usuario nativas Acceso a componentes nativos Desempeño Nativo Tendencias: Desarrollo de aplicaciones móviles > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
9. Enfoques de desarrollo móvil > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Desarrollo tradicional o en Silo (diferentes totalmente) • Desarrollo híbrido (WebView + código web) • Desarrollo multi-plataforma (Xamarin)
10. ¿Qué es Xamarin Forms? > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Standard Controls Flexible Layout Maps Navigation Custom Controls XAML Data Binding Styles + Triggers Framework multi plataforma para crear aplicaciones en • Android 4.0+ • iOS 6.1+ • Windows Phone 8.x • Windows 10 (UWP)
11. ¿Cuándo utilizar Xamarin Forms? > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Máxima re-utilización de código entre Android, iOS y Windows. • Apps rápidas enfocadas en entradas de datos y/o modo de pruebas de concepto. • Apps que requiren poca personalización de UI en cada plataforma (pixel-perfect). • Personalización vía Xamarin.Forms o en cada plataforma
12. Anatomía de una app Xamarin.Forms > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Application Arranque y eventos de la app Page Representa una pantalla de usuario
13. Page (Content) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Contiene un elemento Content (ContentView) el cual puede ser: • 1 control (Label, Button, Slider, etc) • 1 elemento que contiene otros elementos (StackLayout, Grid, etc)
14. La clase Application > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
15. ¿Qué es navegación?
16. ¿Qué es navegación? (II) Navegación: Efecto de llevar al usuario de un lugar a otro. Esto provee al usuario: • Un esqueleto o estructura de la aplicación. • Lo que necesita de una forma rápida y confidente.
17. Aspectos a considerar Navigation Pages
18. Navegación Jerárquica > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Se basa en una pila de navegación de adelante hacia atrás. • El usuario interactúa con una única mediante el botón “Atrás”
19. Modal > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Diálogo interruptivo. • Alerta, diálogo, popup • Puede contener elementos de cancelación, confirmación y negación. • Dos tipos: Caja o pantalla dedicada (atrás) Navigación Modal
20. Master-Detail (Navigation Drawer) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
21. Springboard (Trampolín) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Panel de acceso a otras opciones. • Usualmente modal • Elemento “Grid” o grilla.
22. Tabs (Tabular) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
23. Carrusel > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
24. Otros elementos > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Action sheets • Componentes de terceros. • Puede contener elementos de cancelación. • Navigation (Pila de navegación)
25. Xamarin Forms Navigation Patterns Navigation Pattern Xamarin.FormsClass Hierarchical NavigationPage Modal NavigationPage, alerts, andActionSheets Drill-down lists NavigationPage, ListView, and TableView Navigation drawer MasterDetailPage Tabs TabbedPage Springboard Images + gesture recognizers Carousel CarouselPage or CarouselView
26. Recursos adicionales Código fuente: https://github.com/stvansolano/xamarin-forms-navigation Snippets (snppts.io): http://snppts.io/latest Recurso: https://www.syntaxismyui.com http://stvansolano.github.io/blog stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo
27. ¿Tienes preguntas? Escríbenos Twitter: @stvansolano stvansolano@outlook.com Special thanks to: @danhermes http://stvansolano.github.io/blog stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo