Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

D02d96057c4cd905d60d14549b00db0d?s=128

Esteban Solano Granados

June 18, 2016
Tweet

More Decks by Esteban Solano Granados

Other Decks in Programming

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