Implementación del patrón MVVM con Prism

El patrón Model-View-ViewModel (MVVM) ayuda a separar de forma limpia la lógica de presentación y de negocios de la aplicación desde su interfaz de usuario (UI). Mantener una separación limpia entre la lógica de la aplicación y la interfaz de usuario ayuda a abordar numerosos problemas de desarrollo y diseño y puede hacer su aplicación mucho más fácil de probar, mantener y evolucionar. También puede mejorar enormemente las oportunidades de reutilización de código y permite a los desarrolladores y diseñadores de interfaces de usuario colaborar más fácilmente al desarrollar sus respectivas partes de la aplicación.

Utilizando el patrón MVVM, la interfaz de usuario de la aplicación y la presentación subyacente y la lógica empresarial se dividen en tres clases independientes: la vista, que encapsula la interfaz de usuario y la lógica de la interfaz de usuario; El modelo de vista, que encapsula la lógica y el estado de la presentación; Y el modelo, que encapsula la lógica empresarial y los datos de la aplicación.

Prism incluye ejemplos e implementaciones de referencia que muestran cómo implementar el patrón MVVM en una aplicación Xamarin Form. La Biblioteca Prism también proporciona características que pueden ayudarle a implementar el patrón en sus propias aplicaciones. Estas características incorporan las prácticas más comunes para implementar el patrón MVVM y están diseñadas para soportar la testeabilidad y para trabajar bien con Visual Studio.

Este Post proporciona una visión general del patrón MVVM y describe cómo implementar sus características fundamentales.

Responsabilidades y características de la clase

El patrón MVVM es una variante estrecha del patrón del modelo de presentación, optimizado para aprovechar algunas de las capacidades principales de Xamarin Form, como el enlace de datos, las plantillas de datos, los comandos y los comportamientos.

En el patrón MVVM, la vista encapsula la interfaz de usuario y cualquier lógica de interfaz de usuario, el modelo de vista encapsula la lógica y el estado de la presentación y el modelo encapsula la lógica empresarial y los datos. La vista interactúa con el modelo de vista a través de enlace de datos, comandos y eventos de notificación de cambios. El modelo de vista consulta, observa y coordina actualizaciones del modelo, convirtiendo, validando y agregando datos según sea necesario para mostrarlos en la vista.

La siguiente ilustración muestra las tres clases MVVM y su interacción.

Las clases MVVM y sus interacciones

Las clases MVVM y sus interacciones

Al igual que con todos los patrones de presentación separados, la clave para usar el patrón MVVM reside efectivamente en comprender la forma adecuada de factorizar el código de su aplicación en las clases correctas y en comprender las formas en que estas clases interactúan en varios escenarios. Las siguientes secciones describen las responsabilidades y características de cada una de las clases en el patrón MVVM.

La clase View

La responsabilidad de la vista es definir la estructura y la apariencia de lo que el usuario ve en la pantalla. Idealmente, el code-behind de una vista contiene sólo un constructor que llama al método InitializeComponent . En algunos casos, el code-behind puede contener código de lógica de interfaz de usuario que implementa comportamiento visual que es difícil o ineficiente para expresar en XAML (Extensible Application Markup Language), como animaciones complejas o cuando el código necesita manipular directamente elementos visuales que son Parte de la vista. No debe poner ningún código lógico en la vista que necesita para la prueba de unidad. Normalmente, el código lógico en el código de la vista posterior será probado a través de un enfoque de prueba de automatización de la interfaz de usuario.

En Xamarin Form, las expresiones de enlace de datos en la vista se evalúan en función de su contexto de datos. En MVVM, el contexto de datos de la vista se establece en el modelo de vista. El modelo de vista implementa propiedades y comandos a los que la vista puede enlazar y notifica la vista de cualquier cambio en el estado a través de eventos de notificación de cambios. Normalmente existe una relación uno a uno entre una vista y su modelo de vista.

Normalmente, las vistas son clases control- derivadas o UserControl- derivadas. Sin embargo, en algunos casos, la vista puede estar representada por una plantilla de datos, que especifica los elementos de la interfaz de usuario que se utilizarán para representar visualmente un objeto cuando se muestre. Mediante el uso de plantillas de datos, un diseñador visual puede definir fácilmente cómo se renderizará un modelo de vista o modificar su representación visual predeterminada sin cambiar el objeto subyacente ni el comportamiento del control que se utiliza para mostrarlo.

Las plantillas de datos pueden considerarse como vistas que no tienen ningún código por detrás. Están diseñados para enlazar a un tipo de modelo de vista específico cada vez que se requiere que se muestre en la interfaz de usuario. En tiempo de ejecución, la vista, tal como se define en la plantilla de datos, se instanciará automáticamente y su contexto de datos se establecerá en el modelo de vista correspondiente.

En Xamarin Form, puede asociar una plantilla de datos con un tipo de modelo de vista en el nivel de aplicación. Xamarin Form aplicará automáticamente la plantilla de datos a cualquier objeto de modelo de vista del tipo especificado cada vez que se muestren en la interfaz de usuario. Esto se conoce como plantilla de datos implícita. La plantilla de datos se puede definir en línea con el control que la utiliza o en un diccionario de recursos fuera de la vista principal y se agrupa declarativamente en el diccionario de recursos de la vista.

En resumen, la vista tiene las siguientes características clave:

  • La vista es un elemento visual, como una ventana, una página, un control de usuario o una plantilla de datos. La vista define los controles contenidos en la vista y su diseño visual y estilo.
  • La vista hace referencia al modelo de vista a través de su propiedad DataContext . Los controles de la vista están vinculados a las propiedades y comandos expuestos por el modelo de vista.
  • La vista puede personalizar el comportamiento de enlace de datos entre la vista y el modelo de vista. Por ejemplo, la vista puede utilizar convertidores de valores para formatear los datos que se mostrarán en la interfaz de usuario o puede utilizar reglas de validación para proporcionar validación adicional de datos de entrada al usuario.
  • La vista define y maneja el comportamiento visual de la interfaz de usuario, como animaciones o transiciones que pueden ser activadas a partir de un cambio de estado en el modelo de vista o mediante la interacción del usuario con la interfaz de usuario.
  • La clave de la vista puede definir la lógica de la interfaz de usuario para implementar un comportamiento visual que es difícil de expresar en XAML o que requiere referencias directas a los controles de interfaz de usuario específicos definidos en la vista.

La clase de modelo de vista

El modelo de vista en el patrón MVVM encapsula la lógica de presentación y los datos de la vista. No tiene referencia directa a la vista o ningún conocimiento sobre la implementación o el tipo específico de la vista. El modelo de vista implementa propiedades y comandos a los que la vista puede enlazar datos y notifica la vista de cualquier cambio de estado a través de eventos de notificación de cambios. Las propiedades y comandos que proporciona el modelo de vista definen la funcionalidad que ofrece la interfaz de usuario, pero la vista determina cómo se va a procesar dicha funcionalidad.

El modelo de vista es responsable de coordinar la interacción de la vista con cualquier clase de modelo que se requiera. Normalmente, existe una relación de uno a muchos entre el modelo de vista y las clases de modelo. El modelo de vista puede optar por exponer clases de modelo directamente a la vista para que los controles en la vista puedan enlazar datos directamente a ellos. En este caso, las clases de modelo deberán diseñarse para soportar la vinculación de datos y los eventos de notificación de cambios relevantes.

El modelo de vista puede convertir o manipular datos de modelo para que pueda ser consumido fácilmente por la vista. El modelo de vista puede definir propiedades adicionales para soportar específicamente la vista; Estas propiedades normalmente no forman parte del modelo (o no pueden añadirse). Por ejemplo, el modelo de vista puede combinar el valor de dos campos para facilitar la presentación de la vista, o puede calcular el número de caracteres restantes para la entrada de campos con una longitud máxima. El modelo de vista también puede implementar lógica de validación de datos para garantizar la coherencia de los datos.

El modelo de vista también puede definir estados lógicos que la vista puede utilizar para proporcionar cambios visuales en la interfaz de usuario. La vista puede definir cambios de diseño o estilo que reflejen el estado del modelo de vista. Por ejemplo, el modelo de vista puede definir un estado que indica que los datos se envían de forma asíncrona a un servicio web. La vista puede mostrar una animación durante este estado para proporcionar retroalimentación visual al usuario.

Normalmente, el modelo de vista definirá comandos o acciones que se pueden representar en la interfaz de usuario y que el usuario puede invocar. Un ejemplo común es cuando el modelo de vista proporciona un comando Enviar que permite al usuario enviar datos a un servicio web oa un repositorio de datos. La vista puede elegir representar ese comando con un botón para que el usuario pueda hacer clic en el botón para enviar los datos. Normalmente, cuando el comando no está disponible, su representación de interfaz de usuario asociada se deshabilita. Los comandos proporcionan una forma de encapsular las acciones del usuario y separarlas de forma clara de su representación visual en la interfaz de usuario.

En resumen, el modelo de vista tiene las siguientes características clave:

  • El modelo de vista es una clase no visual y no se deriva de ninguna clase base de Xamarin Form. Encapsula la lógica de presentación requerida para soportar un caso de uso o tarea de usuario en la aplicación. El modelo de vista es comprobable independientemente de la vista y el modelo.
  • Normalmente, el modelo de vista no hace referencia directa a la vista. Implementa propiedades y comandos a los que la vista puede enlazar datos. Notifica la vista de cualquier cambio de estado a través de eventos de notificación de cambios a través de las interfaces INotifyPropertyChanged e INotifyCollectionChanged .
  • El modelo de vista coordina la interacción de la vista con el modelo. Puede convertir o manipular datos para que pueda ser consumido fácilmente por la vista y puede implementar propiedades adicionales que pueden no estar presentes en el modelo. También puede implementar validación de datos a través de las interfaces IDataErrorInfo o INotifyDataErrorInfo .
  • El modelo de vista puede definir estados lógicos que la vista puede representar visualmente al usuario.
Gg405484.note (es-es, PandP.40) .gifNota:
Muchas veces, determinar dónde debe implementarse determinada funcionalidad no es obvia. La regla general es: Cualquier cosa relacionada con el aspecto visual específico de la interfaz de usuario en la pantalla y que podría volver a denominarse más tarde (incluso si actualmente no está planeando volver a diseñarlo) debe entrar en la vista; Cualquier cosa que sea importante para el comportamiento lógico de la aplicación debe entrar en el modelo de vista. Además, debido a que el modelo de vista no debe tener conocimiento explícito de los elementos visuales específicos de la vista, el código para manipular de forma programática elementos visuales dentro de la vista debe residir en el código de la vista o estar encapsulado en un comportamiento. Del mismo modo, el código para recuperar o manipular elementos de datos que se van a mostrar en la vista a través del enlace de datos debe residir en el modelo de vista.

La Clase Modelo

El modelo en el patrón MVVM encapsula la lógica empresarial y los datos. La lógica de negocio se define como cualquier lógica de aplicación que se ocupe de la recuperación y gestión de datos de aplicación y para asegurarse de que se imponen las reglas de negocio que garantizan la coherencia y la validez de los datos. Para maximizar las oportunidades de reutilización, los modelos no deben contener ningún comportamiento de uso específico de caso o de usuario específico de la tarea o la lógica de la aplicación.

Normalmente, el modelo representa el modelo de dominio del cliente para la aplicación. Puede definir estructuras de datos basadas en el modelo de datos de la aplicación y en cualquier lógica de validación y de negocio. El modelo también puede incluir el código para admitir el acceso a los datos y el almacenamiento en caché, aunque normalmente se emplea un repositorio o servicio de datos por separado. A menudo, el modelo y la capa de acceso a datos se generan como parte de una estrategia de acceso a datos o de servicio.

Normalmente, el modelo implementa las facilidades que hacen que sea fácil de enlazar a la vista. Esto generalmente significa que admite la notificación de propiedad y colección modificada a través de las interfaces INotifyPropertyChanged e INotifyCollectionChanged . Las clases de modelos que representan colecciones de objetos normalmente derivan de la clase ObservableCollection <T> , que proporciona una implementación de la interfaz INotifyCollectionChanged .

El modelo también puede admitir validación de datos y notificación de errores a través de las interfaces IDataErrorInfo (o INotifyDataErrorInfo ). Las interfaces IDataErrorInfo e INotifyDataErrorInfo permiten que el enlace de datos de Xamarin Form sea notificado cuando los valores cambian para que la interfaz de usuario pueda actualizarse. También permiten el soporte para la validación de datos y la generación de informes de errores en la capa de IU.

Gg405484.note (es-es, PandP.40) .gifNota:
¿Qué pasa si sus clases de modelo no implementan las interfaces requeridas? 
A veces necesitará trabajar con objetos de modelo que no implementen las interfaces INotifyPropertyChanged , INotifyCollectionChanged , IDataErrorInfo o INotifyDataErrorInfo . En esos casos, es posible que el modelo de vista necesite ajustar los objetos del modelo y exponer las propiedades necesarias a la vista. Los valores de estas propiedades serán proporcionados directamente por los objetos del modelo. El modelo de vista implementará las interfaces necesarias para las propiedades que expone para que la vista pueda enlazar datos fácilmente a ellas.

El modelo tiene las siguientes características clave:

  • Las clases de modelo son clases no visuales que encapsulan los datos y la lógica empresarial de la aplicación. Son responsables de gestionar los datos de la aplicación y de garantizar su coherencia y validez encapsulando las reglas empresariales y la lógica de validación de datos requeridas.
  • Las clases de modelo no hacen referencia directa a las clases de modelo de vista o vista y no tienen dependencia de cómo se implementan.
  • Las clases de modelo normalmente proporcionan eventos de notificación de cambio de propiedad y de colección a través de las interfaces INotifyPropertyChanged e INotifyCollectionChanged . Esto les permite ser fácilmente vinculados a los datos en la vista. Las clases de modelo que representan colecciones de objetos normalmente derivan de la clase ObservableCollection <T> .
  • Normalmente, las clases de modelo proporcionan validación de datos y notificación de errores a través de las interfaces IDataErrorInfo o INotifyDataErrorInfo .
  • Las clases de modelo suelen utilizarse conjuntamente con un servicio o repositorio que encapsula el acceso a los datos y el almacenamiento en caché.

Interacciones de clase

El patrón MVVM proporciona una separación clase entre la interfaz de usuario de su aplicación, su lógica de presentación y su lógica de negocio y datos, separándolos en clases separadas. Por lo tanto, al implementar MVVM, es importante que el código de la aplicación se aplique a las clases correctas, tal como se describe en la sección anterior.

La vista bien diseñada, el modelo de vista y las clases de modelo no sólo encapsularán el tipo correcto de código y comportamiento; También se diseñarán de modo que puedan interactuar fácilmente entre sí a través de enlaces de datos, comandos y interfaces de validación de datos.

Las interacciones entre la vista y su modelo de vista son quizás las más importantes a considerar, pero las interacciones entre las clases de modelo y el modelo de vista también son importantes. En las siguientes secciones se describen los distintos patrones de estas interacciones y se describe cómo diseñarlas cuando implementen el patrón MVVM en sus aplicaciones.

El enlace de datos

El enlace de datos desempeña un papel muy importante en el patrón MVVM. Xamarin Form proporciona poderosas capacidades de enlace de datos. Su modelo de vista y (idealmente) sus clases de modelo se deben diseñar para apoyar la vinculación de datos para que puedan aprovechar estas capacidades. Normalmente, esto significa que deben implementar las interfaces correctas.

El enlace de datos de Xamarin Form admite varios modos de vinculación de datos. Con vinculación de datos unidireccional, los controles de interfaz de usuario pueden enlazarse a un modelo de vista para que reflejen el valor de los datos subyacentes cuando se muestre la presentación. El enlace de datos bidireccional también actualizará automáticamente los datos subyacentes cuando el usuario lo modifique en la interfaz de usuario.

Para garantizar que la interfaz de usuario se mantiene actualizada cuando los datos cambian en el modelo de vista, debe implementar la interfaz de notificación de cambios adecuada. Si define propiedades que pueden ser datos enlazados, debe implementar la interfaz INotifyPropertyChanged . Si el modelo de vista representa una colección, debe implementar la interfaz INotifyCollectionChanged o derivar de la clase ObservableCollection <T> que proporciona una implementación de esta interfaz. Ambas interfaces definen un evento que se genera cada vez que se cambian los datos subyacentes. Todos los controles vinculados a datos se actualizarán automáticamente cuando se generen estos eventos.

En muchos casos, un modelo de vista definirá las propiedades que devuelven objetos (y que, a su vez, pueden definir propiedades que devuelven objetos adicionales). El enlace de datos de Xamarin Form

admite el enlace a propiedades anidadas a través de la propiedad Path . Por lo tanto, es muy común que el modelo de vista de una vista devuelva referencias a otras clases de modelo o modelo de vista. Todas las clases de modelo y modelo de vista accesibles a la vista deben implementar las interfaces INotifyPropertyChanged o INotifyCollectionChanged , según corresponda.

En las siguientes secciones se describe cómo implementar las interfaces necesarias para soportar la vinculación de datos dentro del patrón MVVM.

Implementación de INotifyPropertyChanged

La implementación de la interfaz INotifyPropertyChanged en su modelo de vista o clases de modelo les permite proporcionar notificaciones de cambios a cualquier control enlazado a datos en la vista cuando cambia el valor de la propiedad subyacente. La implementación de esta interfaz es sencilla, como se muestra en el siguiente ejemplo de código.

public class MyViewModel : BindableBase
{
    public ICollectionView Customers { get; private set; }

    public MyViewModel( ObservableCollection<Customer> customers )
    {
        // Initialize the CollectionView for the underlying model
        // and track the current selection.
        Customers = new ListCollectionView( customers );
        
        Customers.CurrentChanged +=SelectedItemChanged;
    }

    private void SelectedItemChanged( object sender, EventArgs e )
    {
        Customer current = Customers.CurrentItem as Customer;
        ...
    }
    ...
}


 

Azure Machine Learning

Creación de aplicaciones inteligentes con Azure Aprendizaje de máquinas

 

Visión de conjunto

El aprendizaje automático, que facilita la analítica predictiva utilizando grandes volúmenes de datos mediante el uso de algoritmos que iterativamente aprender de los datos, es una de las áreas de más rápido crecimiento de la informática. Sus usos van desde la detección de fraudes de tarjetas de crédito y automóviles autodirigidos hasta reconocimiento óptico de caracteres (OCR) y recomendaciones de compras en línea. Nos hace más inteligentes haciendo que las computadoras sean más inteligentes. Y su utilidad sólo aumentará a medida que más y más datos estén disponibles y el deseo de realizar un análisis predictivo a partir de esos datos crece, también.

Azure Machine Learning es un servicio de predicción analítica basado en la nube que ofrece una experiencia simplificada para los científicos de datos de todos los niveles de habilidad. Está acompañado por el Estudio de Aprendizaje de la Máquina de Azure (ML Studio), que es una herramienta basada en navegador que proporciona una interfaz fácil de usar, arrastrar y soltar para la construcción de modelos de aprendizaje de máquina. Viene con una biblioteca de ahorro de tiempo experimentos y cuenta con mejores algoritmos de clase desarrollados y probados en el mundo real por empresas de Microsoft como Bing. Y su soporte incorporado para R y Python significa que puede crear scripts personalizados para personalizar su modelo. Una vez que haya construido y entrenado su modelo en ML Studio, puede exponerlo fácilmente como un servicio Web que es consumible desde una variedad de lenguajes de programación,

 

XamarinFest Chile Resumen de la experiencia

Ha pasado algunas semanas desde que ya termino Xamarin Fest Chile y la experiencia fue buena a pesar de los por menores de organizar un evento de tales características en Chile, la verdad que la idea de organizar el evento fue una iniciativa personal al buscar eventos de  Xamarin en Chile y no encontrar eventos relacionados, por lo cual busque en google hasta llegar con Xamarin Fest https://xamarinfestlatam.azurewebsites.net/ Solo inscribí el evento teniendo presente que seria un laboratorio de unas 30 personas donde se realizaría una demostración de una aplicación conectada a la nube de azure.

El evento fue realizado en 2 días seguidos pensando en universitarios (estudiantes) y personas que trabajen por lo cual seria un viernes y un sábado, la verdad no sabia lo que me esperaba en el camino con todo el esfuerzo de realizar 2 días seguidos estos laboratorios sin tener la experiencia previa.

De todas formas y con la ayuda de Mabel Geronimo y Fernando Mejia de Microsoft a quien doy las gracias por todo el apoyo logramos ejecutar el evento correctamente.

El día viernes logramos realizar el evento en las oficinas de microsoft donde el MVP de Xamarin en Chile Ivan Toledo nos compartió su experiencia sobre MVVM y Mobile Center.

Mas información sobre mobile center en:

https://mobile.azure.com/login

Video del evento a continuación. https://www.youtube.com/watch?v=sw2pAIgGdVQ

El segundo día hablamos sobre Xamarin y Azure sus bondades y las formas de conexión

Se pueden encontrar los repositorios de los eventos a continuación

https://github.com/lawebdeprogramador/Contenido-Eventos

https://github.com/lawebdeprogramador/XamarinAllienceFinal

 

Fotos del evento a continuación:

En conclusión.

Fue una experiencia motivante y un desafío personal lo cual personalmente me lleno de ideas nuevas para seguir compartiendo con la comunidad de programadores en Chile.

Espero en el futuro seguir organizando eventos de este tipo, ya que se logran muchas experiencias, se conocen nuevas personas y talentos que pueden aportar mucho a la comunidad.

 

 

 

 

 

Xamarin Form introducción complemento XamarinFest 2017

 

Hoy en día, crear aplicaciones móviles para múltiples plataformas supone todo un reto para los desarrolladores. Tratar de abordar un desarrollo usando los toolkits nativos de cada sistema requiere de una cantidad enorme de conocimientos específicos para cada uno de ellos. Nos encontraremos con un panorama enormemente complejo, con múltiples lenguajesvarios entornos de desarrolloAPIs de todos los colores. Xamarin trata de poner solución a esta problemática ofreciéndonos un conjunto de herramientas que nos permitirá desarrollar aplicaciones nativas, compartiendo la mayor cantidad de código, entre las plataformas más importantes: AndroidiOS y Windows Phone.

Este artículo va dirigido a desarrolladores que estén interesados en comenzar a crear aplicaciones cross-platform nativas con Xamarin, sería recomendable que estuviesen familiarizados con el lenguaje C# y/o con el SDK de iOS o Android, aunque no es imprescindible. En la primera parte de la entrada trataré algunas generalidades como la problemática del desarrollo multiplataforma, las características claves de Xamarin, la instalación y puesta en marcha y la cuando elegir entre Xamarin Tradicional o Xamarin Forms. En la segunda parteme centraré en Xamarin.Forms y en sus elementos clave;  por último, veremos una pequeña introducción a la implementación del patrón MVVM en Xamarin Forms.

La problemática del desarrollo multiplataforma

Como podemos observar en la siguiente tabla, cada plataforma cuenta con su propio entorno de desarrollo integrado (IDE), con uno o varios lenguajes de programación, con un lenguaje especifico para las vistas, y por si fuera poco los patrones de diseño a aplicar difieren entre las diferentes plataformas.

IOS ANDROID WINDOWS
IDE XCode Android Studio Visual Studio
Lenguaje ObjectiveC o Swift Java C#
Vistas Storyboard o XIBS AXML XAML
Patrón de diseño MVC MVC MVVM

Abordar todos estos aspectos requiere de una cantidad de enorme de conocimientos por parte del desarrollador y, por otro lado, no parece ser eficiente tener que reescribir la lógica de negocio para cada uno de los sistemas.

¿Que opciones tenemos? Apps híbridas o nativas

Tradicionalmente, cuando hablamos de tecnologías multiplataforma, pensamos en un enfoque minimalista: reducir nuestra implementación/desarrollo a un mínimo denominador en todas las plataformas. Esto es lo que se propone en las aplicaciones híbridas desarrolladas con tecnologías del tipo PhoneGap/Cordova, en las cuales escribimos códigohtml y javascript  que tiene que ser interpretado por un navegador web. Este tipo de soluciones no consigue igualar la respuesta y la experiencia de usuario de una app nativa. Por poner un ejemplo, Mark Zuckerberg (CEO de Facebook), reconoció que el mayor error que habían cometido en la trayectoria de Facebook fue crear  en un primer momento una app híbrida en lugar de una nativa.

Mark Zuckerberg: nuestro mayor error ha sido crear en un principio una app híbrida en lugar de nativa 

Xamarin nos ofrece un enfoque multiplataforma diferente, ya que nos facilita la tarea de desarrollar cualquier tipo de aplicación/juego de forma nativa para las plataformas más usadas: iOS, Android y Windows. Para ello nos brinda acceso al 100% de las APIS nativas + las APIs comunes de .NET, con un mismo lenguaje de programación C#.

Existen alternativas interesantes a Xamarin que también proponen un enfoque nativo, como puede ser React Native de Facebook (aún en beta) , que permite escribir apps para android e iOS Nativas en Javascript con el estilo de React. O, Ruby Motion, una tecnología que nos permite realizar apps para Android e iOS con Ruby, si RoR forma parte de tu stack esta plataforma es más que interesante. Aunque sin duda, por aceptacióncuota, comunidad y evolución brilla con luz propia Xamarin.

react-native-rubymotion

Características

 

Compartir código:Además de compartir un mismo lenguaje y entorno de desarrollo, podemos utilizar un mismo patrón de desarrollo.

Completa cobertura de las APIs de iOS y Android: Tenemos todas las APIs disponibles con C#, cualquier cosa que se pueda hacer con Objective-C/Swift o Java, se puede hacer con C# y Xamarin.

api-xamarin

Aplicaciones nativas:Las aplicaciones desarrolladas con Xamarin son 100% nativas.

Siempre actualizado: Xamarin suele añadir soporte el mismo día del lanzamiento oficial de una actualización.

Open source y gratis: Tras la compra de Xamarin por parte de Microsoft, pasó a ser Open Source y gratuito.

Instalación de Xamarin

En Mac OS
Para instalar Xamarin en Mac OS, tan solo tenemos que descargar el instalador y a continuación un asistente nos guiará en la instalación de Xamarin Studio y los SDKs  de las diferentes plataformas.

En Windows:
Para comenzar a trabajar con Xamarin en Windows se debe realizar la descarga de Visual Studio Community. Tras ejecutar el instalador tenemos la posibilidad de elegir entre una instalación típica o personalizada. Escogemos personalizada y seleccionamos el checkbox de Xamarin dentro del apartado de desarrollo móvil multiplataforma.

Para compilar y acceder a opciones como el editor visual de iOS necesitamos de forma inevitable tener conexión con un Mac. Todo el proceso de conexión se realiza de forma prácticamente transparente desde Visual Studio a través de la herramienta Xamarin Mac Agent por medio de una conexión ssh.

Xamarin Tradicional vs Xamarin Forms

Antes de empezar a desarrollar con  Xamarin debemos elegir si utilizar Xamarin Tradicional(Xamarin.iOS y Xamarin.Android) o Xamarin Forms para crear nuestro proyecto, aunque algunos expertos de la comunidad como @_jmgomez_ ya plantean algunas soluciones “fuera de la caja” (artículo).

En Xamarin tradicional, se puede compartir toda la lógica de la aplicación entre las diferentes plataformas, a excepción de la interfaz de usuario, la cual será independiente para cada una de las mismas. En cambio, Xamarin Forms añade una capa de abstracción sobre la UI que permite compartir, además de la lógica de negocio, la interfaz de usuario, aumentando consigo la reutilización de código.

¿Cuando escoger uno u otro?
Xamarin tradicional es idóneo cuando se requiere un nivel muy elevado de personalización de la interfaz de usuario para cada una de las plataformas, siendo más importante el nivel personalización de la UI que la cantidad de código compartido; mientras que Xamarin.Forms es la mejor opción cuando las aplicaciones requieren menos especificidad en la UI y hacen más énfasis en compartir la mayor cantidad posible de código.

xamarin-1

Xamarin Forms

La capa de abstracción que añade Xamarin Forms a la UI nos facilita la tarea de crear interfaces de usuarios nativas compartidas, ya que cada uno de los elementos de dicha abstracción son mapeados a elementos propios de cada una de las plataformas.

XAML

Las interfaces en Xamarin Forms se pueden definir tanto con código C# desde Code Behind, como con XAML, mi recomendación es utilizar este último para aprovechar su enfoque de separación de responsabilidades entre diseño y codificación.

XAML (eXtensible Application Markup Language) es un lenguaje declarativo basado en XML y pensado para escribir la interfaz gráfica de una aplicación de forma textual y ordenada, aparece por primera vez en la versión 3.0 del Framework de .NET.

Una de las características más importantes de XAML es que todos los elementos que definamos en este son instanciados por el CLR y quedan accesibles como objetos desde código, sin necesidad de realizar de nuevo la declaración de los mismos en Code Behind, gracias al mecanismo de las clases parciales.

XAML permite construir la jerarquía de objetos de componen la interfaz. Con el uso de etiquetaspodemos definir cada uno de los elementos visuales, y con el uso de atributos definimos la apariencia y el comportamiento de cada uno de los elementos.

Veamos un ejemplo de una misma interfaz definida en XAML y C#:

XAML

<TabbedPage.Children>
<ContentPage Title=”Profile” Icon=”Profile.png”>
<StackLayout Spacing=”20″ Padding=”20″ VerticalOptions=”Center”>
<Entry Placeholder=”Username” Text=”{Binding Username}”/>
<Entry Placeholder=”Password” Text=”{Binding Password}” IsPassword=”true”/>
<Button Text=”Login” TextColor=”White” BackgroundColor=”#77D065″ Command=”{Binding LoginCommand}”/>
</StackLayout>
</ContentPage>
<ContentPage Title=”Settings” Icon=”Settings.png”>
<!– Settings –>
</ContentPage>
</TabbedPage.Children>

C#

using Xamarin.Forms;
var profilePage = new ContentPage {
Title = Profile,
Icon = Profile.png,
Content = new StackLayout {
Spacing = 20, Padding = 50,
VerticalOptions = LayoutOptions.Center,
Children = {
new Entry { Placeholder = Username },
new Entry { Placeholder = Password, IsPassword = true },
new Button {
Text = Login,
TextColor = Color.White,
BackgroundColor = Color.FromHex(77D065) }}}
};
var settingsPage = new ContentPage {
Title = Settings,
Icon = Settings.png,
()
};
var mainPage = new TabbedPage { Children = { profilePage, settingsPage } };

Pages

Las páginas son elementos contenedores que representan una pantalla de la aplicación. Xamarin.Forms.Page representa un ViewController en iOS, una Page en UWP, en Android cada página se comporta como un Activity, pero no lo son.
xamarin forms pages
ContentPage: es la página más simple, cuenta con una única vista donde añadir contenido.
MasterDetailPage: gestiona dos paneles de información.
NavigationPage: gestiona la navegación entre paginas.
TabbedPage: facilita el acceso a las subpáginas mediante tabs.
TemplatedPage: muestra el contenido a pantalla completa, permite utilizar plantillas para definir el contenido.
CarouselPage: permite el acceso a las subpáginas haciendo un gesto de scroll lateral.

Layouts

Los layouts son elementos contenedores de otros layouts o vistas, son especialmente necesarios ya que las páginas sólo contener un elemento hijo. Lo utilizaremos para establecer la posición y alineación de los elementos que contienen.
xamarin-forms-layoutsLos más destacados son:
ContentView: permitir crear elementos más complejos a partir del mismo.
ScrollView: si el contenido lo requiere permite hacer scroll.
StackLayout: organiza y posiciona otros controles, es uno de los layouts más utilizados, por defecto los apila verticalmente.
AbsoluteLayout: hace uso posiciones absolutas para posicionar los elementos.
GridLayout: Permite la organización de elementos por medio de filas y columnas.
RelativeLayout: facilita el posicionamiento de los elementos mediante constraints.

Views (controles)

Las Views, también denominados controles o widgets, hacen referencia a los elementos visuales como pueden ser botones, labels, o textboxs. Xamarin Forms nos provee de multiples views:

controls-xamarin
Puedes ver la descripción de cada uno de los controles y como se visualizan en las diferentes plataformas desde aquí.

Creando nuestra primera app Xamarin.Forms

Para crear nuestra app abrimos Visual Studio o Xamarin Studio, dependiendo si estáis en Windows o Mac, respectivamente, en mi caso voy a usar Xamarin Studio. A continuación, nos dirigimos a nueva solución para crear un nuevo proyecto partiendo de la plantilla de aplicación multiplataforma “Forms App”:

app-xamarin-forms-1

En la siguiente pantalla del asistente rellenamos los campos del nombre de la app y del identificador de la organización, seleccionamos las plataformas Android e iOS, en el caso de estar en Visual Studio también podriamos incluir en nuestro proyecto UWP.

Shared Project (SP) vs Portable Class Library (PCL)

Seguidamente nos encontramos con que debemos escoger entre un SP (Shared Project)  y una PCL (Portable Class Library). Aunque ambos persiguen el mismo objetivocompartir la mayor cantidad posible de código entre plataformas, difieren en varios aspectos.

Las PCL a diferencia de los SP, generan un asembly reutilizable (dll) que puede ser consumido fuera de la solución. Es importante tener en cuenta que en las PCL no se tiene acceso completo al framework de .NET.

Los SP no se compilan como un ensamblado a parte, sino como parte de cada proyecto al que están referenciado, como si fuese código del propio proyecto. Los SP permiten hacer uso de directivas que permiten generar código especifico para cada una de las plataformas.

En nuestro caso usaremos la PCL:

app-xamarin-forms-2

Estructura de una solución Xamarin.Forms

Una vez finalizado el asistente, se generará una solución estructurada en tres proyectos:

app-xamarin-forms-3

El primero de los proyectos corresponde a la PCL, el  cual contendrá el código compartido de la aplicación para todas las plataformas. A continuación tenemos los proyectos específicos de iOS y Android.

En el proyecto compartido, a modo de ejemplo se ha generado una página llamada helloFormsPage que cuenta con un elemento de tipo ContentPage que a su vez contiene un control Label en el que se muestra un texto de bienvenida.

HelloFormsPage está formado por dos ficheros por un lado tenemos el XAML y por otro el code behing en C# los cuales corresponden a una misma clase distribuida en dos ficheros, a este concepto se le denomina clases parciales. Por lo tanto el XAML no es más que una clase parcial de nuestro Code Behind, que se completa con el fichero que lleva el  mismo nombre que el XAML pero con la extensión .cs.

<?xml version=“1.0” encoding=“utf-8”?>
<ContentPage xmlns=“http://xamarin.com/schemas/2017/forms”
xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml”
xmlns:local=“clr-namespace:helloForms”
x:Class=“helloForms.helloFormsPage”>
<Label Text=“Welcome to Xamarin Forms!” VerticalOptions=“Center” HorizontalOptions=“Center” />
</ContentPage>

En el proyecto compartido, además de contar con la clase de ejemplo helloFormsPage, tenemos una clase llamada App, en la cual se indica cual será la primera página a mostrar en todas las plataformas, esto se realiza en el constructor de la misma. Además cuenta con otros métodos que nos permiten ejecutar acciones según el estado de la aplicación.

namespace helloForms
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new helloFormsPage();
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

 

En el proyecto de Android tenemos una clase denominada MainActivity que cuenta con un método OnCreate() en el cual inicializamos la app del proyecto compartido:

namespace helloForms.Droid
{
[Activity(Label = helloForms.Droid, Icon = @drawable/icon, Theme = @style/MyTheme, MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
}

 

Por último, en iOS, disponemos de la clase AppDelegate en la cual cargaremos la app del proyecto compartido:

namespace helloForms.iOS
{
[Register(AppDelegate)]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}

 

Si, ejecutamos el proyecto en los emuladores de iOS y Android obtendríamos el siguiente resultado:

app-xamarin-forms-4

El patrón MVVM en Xamarin Forms

Aunque no es obligatorio utilizar el patrón MVVM para desarrollar una aplicación con Xamarin Forms, está considerado una buena práctica hacer uso del mismo. A continuación veremos algunos conceptos claves para entender el por qué.

MVVM (Modelo Vista Vista-Modelo) es un patrón de diseño derivado de MVC, cuyo objetivo es tratar de desacoplar al máximo la interfaz de usuario de la lógica de la aplicación,  para ello hace uso de un lenguaje de marcado en las vistas, XAML en el caso de Xamarin Forms. El modelo realiza la misma función que en MVC, representa la capa de datos y/o la lógica de negocio de nuestro proyecto, en ningún caso tiene dependencia alguna de la vista.

El ViewModel (modelo de vista) es un actor intermediario entre el modelo y la vista, contiene toda la lógica de presentación y se comporta como una abstracción de la interfaz. La comunicación entre la vista y el viewmodel se realiza por medio los enlaces de datos (binders).

mvvm-1

A continuación vamos a crear un ejemplo sencillo para mostrar como implementar en una solución Xamarin forms el patrón MVVM.

Vamos a partir de un nuevo proyecto Xamarin.Forms utilizando una librería portable. En la PCL creamos las carpetas Views, ViewModels, y dentro de ViewModels la carpeta Base. Quedando la estructura de la solución tal que así:

mvvm-2

Una vez creadas las carpetas, añadimos la página principal, para ello hacemos clic derecho sobre la carpeta Views, le damos a la opción agregar nuevo archivo, seleccionamos “Forms ContentPage”,  lo llamamos MainView y añadimos el siguiente código:

<?xml version=“1.0” encoding=“utf-8” ?>
<ContentPage xmlns=“http://xamarin.com/schemas/2017/forms”
xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml”
x:Class=“simpleMVVM.Views.MainView”>
<Label Text=“{Binding MyMessage}”
VerticalOptions=“Center”
HorizontalOptions=“Center” />
</ContentPage>

En el XAML anterior podemos observar que en el atributo text  del elemento Label hemos utilizado lo que se denomina una expresión de enlace a datos, en próximos posts veremos con más detalle su funcionamiento por ahora nos basta con saber que cuando el compilador se encuentra con una expresión entre llaves la interpreta,y, en este caso, al encontrarse con la palabra reservada Binding, lo que hace es enlazar el valor de la propiedad MyMessage la cual definiremos en el ViewModel.

Lo siguiente que vamos a hacer es crear nuestro primer ViewModel. Un ViewModel no es más que una clase en la que se expone la información con propiedades públicas. Por lo tanto, agregamos dentro de la carpeta ViewModels una clase a la que vamos a denominar MainViewModel con una propiedad llamada “MyMessage”:

public class MainViewModel
{
private string _myMessage;
public MainViewModel()
{
Message = Hello MVVM!;
}
public string MyMessage
{
get { return _myMessage; }
set { _myMessage = value; }
}
}

A continuación, tenemos que enlazar nuestro ViewModel con el contexto de datos de la página. Para ello asignamos en la propiedad BindingContext de la nuestra vista una instancia de nuestro ViewModel. El Code Behind de la vista quedaría así:

namespace simpleMVVM.Views
{
public partial class MainView : ContentPage
{
public MainView()
{
InitializeComponent();
BindingContext = new MainViewModel();
}
}
}

Por último, tan solo nos queda indicar cual es la página principal en la propiedad MainPage de la clase App:

public App()
{
InitializeComponent();
MainPage = new MainView();
}

Esta sería la estructura MVVM más sencilla posible, en principio nos sirve para ilustrar los fundamentos básicos. No obstante, no hemos cubierto  conceptos como los modos de enlace a datoslas notificaciones y los comandos, imprescindibles para conseguir una de interacción completa del usuario, quedarán pendientes para próximas entradas.

Resumen

En este artículo he tratado de sentar las bases, en la medida de lo posible, de Xamarin y en particular de Xamarin Forms, me he dejado muchos temas en el tintero, y en otros he sido muy superficial, cómo por ejemplo en la introducción del patrón MVVM, pero el post estaba creciendo exponencialmente.

La idea es continuar profundizando en próximas entradas en el desarrollo con Xamarin, tanto tradicional como con forms. Espero haber facilitado tu transición a Xamarin, o por lo menos haber sabido trasladarte alguna de sus virtudes.

¿Por qué una empresa necesita una Aplicación Mobile, App?

Cuando comencé con el el mundo de la programación a mediados de los noventa, el mundo empresarial se formulaba la pregunta ¿debe mi empresa tener una web? El tiempo respondió a ello. La web ya está consolidada y hoy en día no se concibe un negocio, organización o gobierno que no cuente con un espacio en la red.

Debo confesar que no era la primera vez que tenía esa experiencia, no mucho tiempo antes la cuestión era ¿necesita mi empresa correo electrónico? La respuesta ya la conocen.

Pero ya no basta con estar; para poder competir es necesario definir una estrategia e identidad digital que involucra múltiples canales, web, redes sociales, estrategia en buscadores, redes de enlaces y más recientemente, estrategia mobile.

Los Smartphone se han convertido en un apéndice más de nuestro cuerpo, vivimos “pegados” a ellos y probablemente sea lo primero y lo último que veamos cada día; alarmas, eMails, recordatorios, notas, chats, redes sociales, fotos, música, juegos, navegación por Internet y Apps.

Son dispositivos próximos e íntimos; para muchas personas sus Smartphones no están a más de un metro y medio de distancia las 24 horas los 7 días de la semana. ¿Crees que es un buen lugar para que esté tu marca?
El celular se ha convertido en el principal punto de acceso a Internet, superando a los computadores personales y el 80% del tiempo de su uso está dedicado a las Aplicaciones.

¿Qué es una App?

Una Aplicación móvil o App es un programa que se instala en el Smartphone o Tablet del cliente.

De esta manera la App pasa a formar parte del celular, un lugar privilegiado en la que toda marca querría estar. El ícono que la identifica, con la imagen de su empresa, estará visible en todo momento, recordando al usuario nuestra existencia, tanto cuando la vaya a usar como cuando esté realizando otra tarea.

Recuerde que cuando el usuario está trabajando, mira el celular, cuando está aburrido, mira el celular, cuando está viajando, mira el celular, cuando está comunicándose, mira el celular, cuando se está divirtiendo, mira el celular, cuando lee el correo, consulta la agenda, etc., mira el celular.

A diferencia de la web, las App están disponibles para su ejecución en forma instantánea, basta que el usuario toque su ícono para que ésta se inicie, sin necesidad de abrir un navegador, escribir direcciones web o usar buscadores. En un mundo donde la inmediatez es el paradigma y la facilidad lo es todo, la App está ahí para ser usada sin más demora.

La interfaz perfectamente adaptada a los dispositivos móviles permite a nuestros clientes navegar desde su móvil o tablet con la sencillez y usabilidad óptima. Si está bien concebida, la utilidad de una App móvil es mucho mayor que la de una web convencional responsive, ya que no solo su interfaz sino la información y todo el contenido está organizado para un dispositivo móvil y es mucho más accesible y manejable en la App.

Por último, la presencia en las tiendas de apps más importantes –App Store, Google Play y Windows Phone Store– puede generar un incremento del número de búsquedas orgánicas originarias desde móviles, mejorando el posicionamiento SEO.
Ventajas de contar con una App móvil:
1. Siempre presente (mindshare):

Probablemente el primer gran beneficio que destacaremos para las empresas

Nuestra App va a estar de manera muy presente y continuada en los Smartphone de nuestros clientes. Cada vez que el usuario visualice su teléfono, nuestra marca estará ahí, contribuyendo con esto a su presencia en la mente de nuestros consumidores.

Piense cuánto dinero se invierte en Tv, cartelería callejera, folletos, etc., para lograr este objetivo, una oportunidad que la App nos brindará al ocupar un lugar privilegiado en el móvil de nuestros clientes y potenciales clientes.

2. Siempre disponible:

La App está instalada en el Smartphone o Tablet, accesible para ser usada inmediatamente, a diferencia de una web que impone abrir un navegador y buscar el sitio –sin mencionar que teclear en la pantalla y muchas veces en movimiento se hace más dificultoso-

3. Intimidad:

Los Smartphone son ubicuos. Los usuarios se pasan mirándolos. Son dispositivos próximos e íntimos que no están a más de un metro y medio de distancia las 24 horas los 7 días de la semana, un lugar especial para su marca.

4. Experiencia del usuario

Gracias a la interfaz perfectamente adaptada a los dispositivos móviles permitiremos a nuestros clientes y usuarios navegar desde su móvil o tablet con la sencillez y usabilidad óptima. Una experiencia de usuario que los sitios web móviles o reproductores no son capaces de proporcionar.

Asimismo permite utilizar capacidades del celular como el posicionamiento, la cámara, el compás, hacer vibrar el dispositivo, etc., así como almacenar datos localmente y funcionar en forma desconectada, todos conceptos que permiten crear una experiencia más excitante e interactiva.

5. Contenido optimizado

El contenido al que las personas pueden acceder a través de la App no necesariamente tiene que ser el mismo que el de la página web. Típicamente no lo es. Esto es un elemento clave a considerar ya que un desafío importante para la App es ser práctica y útil, de forma de mantenerse instalada en el Smartphone, por lo que el contenido tiene que estar optimizado para el tamaño y los escenarios de uso de un Smartphone, evitando hacer demasiadas otras cosas que al usuario no le interese y que lo desenfoque de lo interesante.

6. Prestigio e imagen innovadora

Las App son la novedad. Hablan un lenguaje joven e innovador del que las empresas pueden aprovecharse al contar con una, exhibiendo una imagen moderna e innovadora.

7. Presencia en las Tiendas – Ayuda a conocer nuestro negocio

Nuestra App será vista por muchas más personas en las diferentes tiendas de aplicaciones como iTunes, Google Play, etc. Solo Apple and Google tienen millones de búsquedas por día. Este hecho hará que nuestra empresa aparezca en las búsquedas orgánicas realizadas desde los dispositivos móviles y al igual que el punto anterior, contribuirá también a la imagen de la marca.

8. Diferenciación

Al día de hoy aún no son muchos los negocios que han decidido crear su aplicación. ¿Por qué no adelantarnos a ellos y así diferenciarnos?

9. Nuevo canal de atención a nuestros clientes

Una App amplía el alcance comercial de su marca, productos y servicios, haciendo sinergia con otros canales existentes, compartiendo información centralizada almacenada en los servidores, brindando al usuario una experiencia consistente y perfeccionada.

10. Push Notifications

Las notificaciones “push” son mensajes consentidos enviados desde un servidor al Smartphone del usuario, con destino la App, pero sin necesidad que ésta se esté ejecutando, al estilo de un SMS, pero sin los costos de estos ya que son enviados a través de Internet.

Esto brinda un canal de comunicación muy eficaz con el usuario, una acción proactiva centralizada que permite “despertar” a la App en forma remota para mantener al usuario activo e interesado.

11. Y lo más importante, genera “Engagement”

La mejor cosa sobre el canal móvil es que se da a las empresas la posibilidad de participar con sus clientes en tiempo real, según la ubicación, el horario y sus gustos, brindando la oportunidad de crear un perfil y responder en virtud de él.

Azure-Clouders-Chile Meetup mirada de un programador.

Para ser la primera vez que asisto a uno de estos eventos algo nervioso y entusiasmado a la vez, fue muy grato ver un ambiente de enseñanza sobre los temas más actuales de Azure, en mi caso fue muy importante aprender cosas de programación que desconocía que se podían realizar antes de asistir a este meetup así que todo suma.

El itinerario fue el siguiente

Jueves en la tarde

  • 19:00 – 19:20:Llegada a lugar y compartir con miembros (algunas veces se hablaba en inglés y eso me ponía un poco nervioso ya que mi inglés no es muy bueno debo admitirlo), algo que pretendo solucionar pronto.
  • 19:20 – 19:40:Deploy de una aplicación en Asp .Net core En Visual Studio 2017 con soporte Docker –Realizada por Jonathan Gonzalez, fue una buena experiencia lo fácil que es implementar docker en azure y unir la aplicación de tal forma que sea fácil de distribuir
  • 19:40 – 20:00: Lightning talk IOT Hub -Fernando Mejía, se mostró una aplicación con node.js cliente servidor conectada Azure la cual puede ser controlada por algún dispositivo Arduino que entra dentro del internet de las cosas
  • 20:00 – 20:30:Compartir con bebidas y comida y Anuncios (¡si estás haciendo algún proyecto entretenido o quieres compartir ofertas de trabajo con la comunidad, este es el momento!!), en esta instancia conversamos con distintas personas dedicadas a DevOps y el desarrollo de aplicaciones de las distintas implementaciones para cada caso en las distintas empresas.
Evento meetup azure 13 de abril 2017

Realizando un resumen muy buena experiencia en la cual como desarrollador obtuve muchas ideas y formas de realizar arquitecturas de software en base a distintas necesidades individuales de cada cliente.

Para mayor información puedes visitar los siguientes links

https://www.meetup.com/es/Azure-Clouders-Chile/

https://github.com/jongon (github con proyectos conectados a azure).

Hasta un nuevo artículo de la web del programador.

Me despido cordialmente Jaime Hernández S.

Podcast de software

Desde un tiempo hasta ahora vengo escuchando los podcast de interfaz de Rodrigo Díaz Concha y son muy buenos, realmente merece la pena darse un tiempo para escucharlos.

A quien tenga el tiempo dejo los link a continuación para que escuche un poco de sus podcast.

 

Podcast en la web

La pagina de facebook

¿Escuchas tus podcasts en el iPhone / iPad? ¡Interfaz Podcast también está en iTunes!

 

Material Design: ¿Por qué todos hablan de eso?

Seguramente has escuchado hablar acerca de Material Design, e incluso has interactuado con muchas aplicaciones que ya implementan este novedoso concepto. Veamos de qué se trata y por qué resulta importante adoptar esta filosofía de diseño en las aplicaciones que desarrollamos actualmente.

¿Qué es Material Design?

Es una nueva filosofía enfocada, inicialmente, para el diseño Android; sin embargo, su implementación en el mundo del desarrollo ha sido tal, que muy pronto comenzó a extenderse a toda la web. Es así como la encontramos, actualmente, no solo en aplicaciones Android, sino en páginas web y demás plataformas de software.

El chileno Matías Duarte, diseñador de interfaces informáticas de usuario y actual vicepresidente de diseño de Google, es el creador de este concepto de diseño que revolucionó el aspecto visual y experiencial de los programas desarrollados en la actualidad.

¿En qué se basa?

Su nombre traduce “Diseño material”, y… ¿Qué significa? Esta filosofía de diseño basó su nombre en los objetos materiales. Según la definición oficial de Google: “es un lenguaje que combina los principios innovadores de la tecnología con las normas clásicas del diseño”.

Se debe, entonces, a una serie de pautas en las cuales los colores, las sombras, la profundidad, las superficies y los bordes juegan un papel protagonista, tal como en la realidad material que experimentamos a diario.

Matías Duarte, creador de este concepto, explicó que “a diferencia del papel, el Diseño Material se puede ampliar y redimensionar de manera inteligente. Material Design tiene superficies físicas y bordes. Las escenas y sombras proporcionan significado sobre lo que se puede tocar y cómo se va a mover”

Material Design se integró en la versión 5.0 (Android Lollipop) como reemplazo al ampliamente conocido estilo de diseño Holo (cuyo nombre se debe a su similitud con la apariencia de un holograma).

¿Cuáles son sus características?

Desde su presentación en la pasada conferencia Google I/O 2014, el concepto de Material Design adquirió gran importancia en el mundo de los diseñadores digitales, quienes comenzaron a implementar sus características visuales en los proyectos que a diario realizaban. Veamos cuáles son estas características:

  • En Material Design, la interacción de los objetos en el espacio es transmitida a través de los principios de la luz, la superficie y el movimiento.
  • Se trata del espacio en 3D, en el cual los objetos tienen tres dimensiones: la anchura, la altura y el grosor.
  • Es influenciado por los elementos clave de diseño de impresión, es decir, fuentes, colores, imágenes, grids, escalas y espacio, los cuales crean una estructura jerárquica y significativa que da protagonismo a la inmersión del usuario en la experiencia digital.
  • Los objetos en el entorno de Material Design tienen las relaciones padre-hijo que determinan su interacción. Cada objeto puede estar subordinado a un solo objeto principal o padre y puede tener cualquier número de hijos. Los objetos tienen todas las propiedades de su “padre”, por ejemplo, posición, rotación y elevación.

Y tú, ¿ya adoptaste la filosofía Material Design? ¡Aprende a trabajar con este novedoso concepto en nuestras certificaciones y garantiza a tus usuarios una experiencia inigualable!