Vanguarsoft Developers blog

Ing. Javier Leal – Coordinador de Requerimientos en Traetelo.com / Traiter Lourted – VENEZUELA


Deja un comentario

Diseñando con código XAML

Para comenzar a desarrollar aplicaciones para la Windows Store es necesarios conocer Principalmente su Plataforma Arquitectónica, sus principios para el diseño de Aplicaciones y luego decidir cual será tu rumbo si vas a querer desarrollar aplicaciones basadas en HTML5 y JavaScrips o Lenguaje C sharp o Visual Basic con XAML.

 

XAML-LOGO

 

En mi caso todos mis post sobre la Windows Store estarán basados en C# ya que es el área donde quiero enfocar, pero antes de comenzar a publicar artículos mas avanzados de diferentes funcionalidades voy a dejarles bien en claro lo básico que es lo que eh estado haciendo en los últimos 3 artículos publicados.

 

Cabe destacar que si cuando se anuncio por primera vez este Lenguaje de Marcado y llegaste ya a conocerlo cuando por primera vez salió Silverlight quiero decirte que se ha mantenido, con esto solo quiero decir que XAML en Silverlight, en Windows Phone, En Windows 8 e incluso en WPF la sintaxys es igual no necesitas aprender algo nuevo.

 

Hace tiempo cree un artículo que les será útil si por primera vez están tocando la Windows Store.

 

https://javierleal.wordpress.com/2011/05/21/conociendo-el-codigo-xaml-parte-1/

 

Hay algo bien importante que recalcar en cuando al XAML y es que cuando hablamos de alguna de las etiquetas estas son clases..  para poder verse visualmente en la pantalla deben heredar de un UI Element.

 

Daré un ejemplo muy sencillo un Botton:

 

En XAML

<Button x:Name="BTNVolverMenu"
        Background="Blue"
        Foreground="White"
        HorizontalAlignment="Right"
        Content=" Volver al Menu "
        Grid.Row="1"
        Margin="0,0,20,0"
        Click="BTNVolverMenu_Click">
</Button>

 

Detrás de este código esta una clase que hereda de UI Element que permite que sea visible al escribir el código o simplemente arrastras el control pero esto que vemos no es muy diferente a hacer esto.

 

Código C sharp

 

Button BTNVolverMenu = new Button();
BTNVolverMenu.Name = "BNVolverMenu";
BTNVolverMenu.Background = new SolidColorBrush(Colors.Blue);
BTNVolverMenu.Foreground = new SolidColorBrush(Colors.White);
BTNVolverMenu.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
BTNVolverMenu.Content = " Volver al Menu ";
Grid.SetRow(BTNVolverMenu, 1);
BTNVolverMenu.Margin = new Thickness(0, 0, 20, 0);
BTNVolverMenu.Click +=BTNVolverMenu_Click;

 

 

La diferencia entre 2 objetos UI Element tiene una diferencia y es que cuando lo haces por XAML Ya el control se encuentra plasmado en la pantalla mientras que por código debe agregarlo a uno de los contenedores disponibles como:

 

Grid, Canvas o Stackpanela  través de su propiedad Children.


Deja un comentario

Principios de Diseño – Windows Store

 DEV-CENTER-L1-Design_Get-inspired_InvariantCulture_Default_472x300_InvariantCulture_DefaultUna de las principales cosas que debemos tener en cuenta antes de desarrollar aplicaciones para la Windows Store son sus principios de diseño, hare un pequeño resumen de lo que se trata esto y daré un link para que puedan profundizar este tema, a pesar de ser un tema enfocado mas a diseño que a desarrollo es un tema importante que hay que tomar muy en cuenta al momento de desarrollar estas aplicaciones.

 

WSA_Design_L2_1_UniquelyWindows_ModernDesign_702x394px_InvariantCulture_Default

Lo que se quiere lograr con estos principios es darle protagonismo a la información aprovechando la capacidad de los lenguajes universales de todo el mundo.. Por ejemplo: muchos han visto el símbolo que representa un cuarto de baño y cualquier persona sin importar idioma puede entenderlo, básicamente se trata de utilizar este lenguaje universal que fácilmente puedes verlo al ver la imagen principal de este post.

 

Básicamente en esto se basa los principios del fundamento de Microsoft claro es un resumen si quieres saber mas detalle de donde proviene todo esto te recomiendo entres a: http://dev.windows.com/es-es/design/modern-design.

 

Estos fundamentos son primordiales para lograr características interesantes en las aplicaciones están el los siguiente grupos:

 

Ojo: Todo esto no es mas que un resumen de un articulo de MSDN basado en estos principios yo solo quise resumirlo y mostrar mis opiniones, esperare las de ustedes.

Muestra buen hacer

 

La jerarquía y el Equilibrio en la aplicación:

IC730743 IC733868

Jerarquía                                Jerarquía Insuficiente

 

Se puede observar muy fácilmente como una información sin aplicar esta norma la información termina siendo confusa para el usuario final. Importante usar adecuadamente la Tipografía esto te permite agregar a tu aplicación mas personalidad.

 

Haz más con menos

 

Otro de los putos resaltantes es el protagonismo de la información con estos principios, podemos hacer estas dos comparaciones y analizarlas a simple vista.

  IC730745IC729987

Enfoque de contenido                   Contenido que distrae

 

A pesar de que la aplicación de Outlook para Windows Mobile tiene mas imágenes y colorido no podemos negar que estos principios vuelven a tener la razón, es muchísimo mas organizado, serio y presentable la opciones de la interfaz moderna, Ustedes que Opinan espero comentarios.

 

Para continuar es muy imparte dejar que la información fluya en su espacio, no quiere decir no colores imágenes puede usarlas.. pero no le quites el protagonismo y en espacio a la información.

IC733869

 

En muchas aplicaciones siempre la interfaz estaba abarrotada de opciones e imágenes que incluso eran innecesarias y no tenían mucho que ver con el contenido principal en esta aplicación del tiempo se puede ver fácilmente lo que el usuario necesita el estado del tiempo que se ve a través de la imagen de fondo y datos resaltantes como la temperatura.

 

Rápido y fluido

 

IC728119  IC728120 (1)

 

Movimiento y Dinamismo: Es lo que brinda las aplicaciones del Store a través de sus Tiles, la cual permiten mostrar información sin necesidad de acceder a la aplicación, sigue teniendo mas protagonismo la información, si nos basamos en el ejemplo anterior del tiempo acá podemos mostrar ese estado del tiempo sin necesidad de abrir la aplicación y solo acceder si se quiere ir a mas detalle.

 

Verdaderamente digital

El uso de la iconografía es la que resalta en esta área donde la instrucción es se iconográfico no iconográfico.

IC729988 IC729989

Esto sigue dando mas seriedad y rapidez a la aplicación al dejar de usar imágenes y comenzar a usar vectores que puedas construir un excelente mensaje universal con una sola infografía se puede comprender de que se trata la funcionalidad.

 

Gana en equipo

Esto es lo mejor de todo y se trata de unificar tu trabajo para que funciones en diferentes dispositivos manteniendo estos principios, y esto es un chicho muy famoso que dice no vuelvas a inventar la rueda. dedícate a innovar y mostrar la verdadera personalidad y protagonismo de tu solución.

IC728122

 

Como dije anteriormente todo esto no es mas que un resumen de un articulo de MSDN basado en estos principios yo solo quise resumirlo, para ver mas a detalle

https://msdn.microsoft.com/library/windows/apps/hh781237.aspx