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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. stvansolano@outlook.com Twitter/GitHub: stvansolano
   Patrocinadores y
   recursos para la
   Comunidad
   http://stvansolano.github.io/blog
   

   View Slide

5. Avantica
   > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

14. La clase
    Application
    > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
    

    View Slide

15. ¿Qué es
    navegación?
    

    View Slide

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.
    

    View Slide

17. Aspectos a
    considerar
    Navigation Pages
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

20. Master-Detail
    (Navigation
    Drawer)
    > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
    

    View Slide

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.
    

    View Slide

22. Tabs
    (Tabular)
    > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
    

    View Slide

23. Carrusel
    > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide