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

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

    View full-size 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 full-size 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
    [email protected]
    Meetup: http://bit.ly/1PpBGRo

    View full-size slide

  4. [email protected] Twitter/GitHub: stvansolano
    Patrocinadores y
    recursos para la
    Comunidad
    http://stvansolano.github.io/blog

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  15. ¿Qué es
    navegación?

    View full-size 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 full-size slide

  17. Aspectos a
    considerar
    Navigation Pages

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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
    [email protected]
    Meetup: http://bit.ly/1PpBGRo

    View full-size slide

  27. ¿Tienes preguntas?
    Escríbenos
    Twitter: @stvansolano
    [email protected]
    Special thanks to:
    @danhermes
    http://stvansolano.github.io/blog
    [email protected]
    Meetup: http://bit.ly/1PpBGRo

    View full-size slide