Archive

Posts Tagged ‘Traducciones’

Retrospectiva sobre MEF: usos en el mundo real

April 11th, 2011 No comments

Evaluación de diferentes formas en las que el autor ha usado MEF para mejorar la arquitectura de varias aplicaciones de negocios a gran escala en las que ha estado envuelto. Desde el manejo de valores de configuración, hasta la administración de vistas y regiones modulares, pasando por mensajería y uso de comandos, Jeremy Likness ha usado MEF para crear aplicaciones flexibles y extensibles en Silverlight.

 

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo MEF in the Wild: A Retrospective publicado en inglés por Jeremy Likness el 27 de setiembre del 2010 en su blog C#er:Image.

 

Luego de haber trabajado en varios proyectos grandes usando la Infraestructura de extensibilidad administrada, me parece buena idea compartir mis experiencias en cómo lo usamos y las ventajas que nos dio. Las siguientes son diferentes formas en las que MEF nos ayudó a crear aplicaciones modulares en Silverlight .

A diferencia de mi artículo anterior titulado Diez razones para usar MEF, este es más un catálogo de casos específicos usando MEF en proyectos reales.

 

Inversión de control e inyección de dependencias

Esta fue probablemente la decisión más fácil. Ninguno de los proyectos necesitaba un mecanismo de inversión de control (IoC) o inyección de dependencias más sofisticado que el ofrecido por MEF. Ya que de todos modos íbamos a usarlo por otras razones, y además viene incluido en la plataforma .NET, nos pareció lógico usarlo para resolver este problema. En la mayoría de los casos bastó con simplemente declarar una interfase, exportarla donde es implementada e importarla donde fuese necesario. Describo a continuación otros casos más específicos.

 

Configuración

Para nosotros fue muy importante el manejo de los datos de configuración y MEF nos hizo la tarea fácil. La razón por la que lo menciono en esta categoría es por ser, en realidad, un efecto secundario de la inversión de control. Mediante definir una interfase es posible que sea usada por el resto de código; además, en la etapa de prueba los valores de configuración pueden ser fácilmente simulados. El servicio principal de la aplicación implementa la configuración y usa una combinación de constantes definidas durante la compilación y otros parámetros para cargar los valores. Los consumidores en cualquier parte de la aplicación, incluso si son módulos cargados de forma dinámica y sin tener referencias concretas a al ensamblaje donde reside el mecanismo de configuración, tan sólo necesitan importar la interfase para tener acceso a los valores.

 

Registros de historial

El patrón IoC implementado en MEF también nos ayudó de forma indirecta a implementar un registro de historial. Lo que hicimos fue crear una interfase implementada por un registro de historial y acostumbrarnos a usarlo en vez de Debug.WriteLine, con la ventaja de poder indicar el grado de severidad, la fuente del evento y otros datos auxiliares. Al separar las funciones de este modo pudimos usar al principio un mecanismo simple de registro (por ejemplo, escribir en la ventana de depuración) con la flexibilidad de poder añadir más adelante otros mecanismos como almacenaje aislado, llamadas a otros servicios, y así por el estilo. Así simplificamos el manejo de transacciones desde un punto central sin tener que alterar el resto de la aplicación.

 

Administración de regiones

Antes que nada quiero aclarar que Prism 4.0 posee una excelente infraestructura para el manejo de regiones y no tengo nada en su contra ni es mi intención reinventar algo ya existente. Lo que pasó es que nuestro proyecto tenía sólo unas pocas regiones especificadas por lo que era mejor usar algo más liviano.

El manejo de regiones se compone esencialmente de unos cuantos componentes. Tenemos una interfase que sirve como adaptador para las regiones y que admite clases de tipo contenedor (como Grid o ContentControl y demás). Para crear nuevos adaptadores basta con heredar la interfase, agregar la información adicional de exportación para describirle a MEF el contenedor con el que es compatible, y luego crear eventos como el registro (apuntar la vista a una región), activación (hacer que la vista aparezca en la región) y desactivación (remover la vista). A veces tuvimos que manipular el contenido, o algunos de los elementos secundarios, pero en general el administrador de estados visuales (Visual State Manager) se encarga de esa tarea.

El contenedor es definido como una región usando una propiedad adjunta y cada vista contiene metainformación describiendo a cuál región ha de ser asignada. El administrador de regiones agrupa y coordina todos estos componentes. Si necesito activar una vista, el administrador de regiones usa el patrón de cadena de responsabilidades para encontrar el adaptador de la región a la que pertenece la vista y luego le pide que la despliegue.

 

 

El artículo Usando MEF en vez de Prism – Parte 2 da una explicación detallada sobre el manejo de regiones. También pueden ver el artículo en inglés Advanced Silverlight Applications using MEF para una infraestructura de muestra.

 

Integración de servicios

Es común que en aplicaciones empresariales hayan diferentes modelos u objetos del dominio del problema a resolver que comparten operaciones de datos. Por ejemplo, su creación, actualización, borrado y consulta. Por esta razón, pude crear una interfase abstracta IServiceFor<T> que define operaciones de este tipo. Las implementaciones de la interfase son exportadas de manera explícita y el direccionador de servicios se encarga de asignarlas a las entidades correspondientes.

Esto quiere decir que puedo crear un modelo de vista para una entidad, y simplemente solicitar al direccionador de servicios que me provea un servicio que ofrezca las operaciones genéricas, sin tener que preocuparme de cómo fue implementado el servicio. Se hace fácil entonces simular los servicios mientras se desarrollan las operaciones en sí. Por ejemplo, algunos servicios usaron el almacenamiento aislado mientras que otros enviaban mensajes por la red, pero a fin todos fueron desacoplados del modelo de vista y agrupados por MEF.

 

 

Mensajería

Otro aspecto importantísimo en cualquier sistema es la mensajería. Por ejemplo, imaginen que tenemos un modelo de vista que ofrece filtrado de datos y que puede ser usado por otros modelos de vista. ¿Cómo pueden enterarse estos otros modelos de vista cuando cambia la especificación del filtro, o cómo pueden obtener el filtro en sí?

En este proyecto lo hicimos de dos formas.

 

Composición de vistas

Aunque sea aplicado de manera global, un filtro puede ser considerado como parte del modelo de vista que lo use. Si bien por sí mismo no es de utilidad, al añadirlo como un componente de otro modelo de vista puede entonces ser usado en ese contexto. MEF fue muy útil para aplicar este patrón ya que cualquier modelo de vista que necesite usar otro no más necesita importarlo:

 

 

Por supuesto, todavía no podemos saber cuando el filtro ha cambiado a menos que nos suscribamos al evento de propiedad cambiada. Puede que eso sea razonable algunas veces, pero hay otras en que un mensaje de ese tipo es lo suficientemente importante como para que varios componentes necesiten escucharlos. Para ese fin usamos el patrón agrupador de eventos.

 

Agrupador de eventos (EventAggregator)

Mi versión del agrupador de eventos se basó en un artículo que describe una implementación basada en extensiones reactivas (RX). Le hice algunas modificaciones para que fuera compatible con Silverlight y trabajó de maravilla.

Otro caso común fue usar mensajes para causar cambios en la aplicación. Por ejemplo, para avisar sobre un nuevo filtro o una nueva selección por parte del usuario. Para eso hice una clase dedicada a difundirlos, llevando cuenta del tipo, el mensaje y una enumeración. De esa manera, si quiero anunciar una nueva selección entonces puedo crear una instancia de esta clase e insertar el elemento elegido junto con su tipo y usar la enumeración para indicar que es “select” para luego publicar el evento.

Quien esté interesado en este tipo de mensaje puede entonces escucharlo de esta manera:

 

 

 

Direccionamiento XAPs modulares

El hecho de que las aplicaciones de Silverlight son transferidas a través de la red y almacenadas en la máquina del usuario hacen que el cargado dinámico de módulos XAP sea de gran importancia. Hay dos razones principales: el tiempo de descarga y la cantidad de memoria requerida en el cliente. Mediante usar cargado dinámico, podemos fragmentar la aplicación en módulos XAP y diferir su uso hasta que sean necesarios. Como resultado, se reduce el tiempo inicial de carga de la aplicación y la memoria requerida al principio.

Un reto que experimentan algunas bibliotecas es cuándo y cómo iniciar el cargado del módulo. Por mi parte, yo prefiero un método al que he llamado “direccionamiento dinámico de XAPs.” Es una idea sencilla: asignar etiquetas a las vistas, ya sea usando nombres explicativos o el espacio de nombres completo.  En mi proyecto principal, donde radica la infraestructura, tengo un conjunto de constantes globales que representan las diferentes vistas.  Aunque el módulo no sabe nada sobre la vista, las constantes sirven para referirse a ella. Otro conjunto de constantes describen los archivos XAP disponibles.

Con estas dos pistas puedo entonces usar un servicio de inicialización que encamine de manera dinámica los módulos usando catálogos de distribución para cargarlos. Una ruta de direccionamiento apunta hacia la vista y el archivo XAP que la contiene y es exportada para uso de cualquier componente que necesite cargarla. Cuando se solicita una vista, el administrador de regiones verifica que exista la ruta correspondiente y luego le pide al servicio de direccionamiento que cargue el archivo XAP, demorando la navegación a la vista hasta que haya sido cargada. Esto hace fácil separar la navegación de los módulos, haciendo posible que cualquier área de la aplicación solicite vistas, mientras que la infraestructura se preocupa de cargar los módulos necesarios y proveer las rutas requeridas.

 

Direccionamiento de modelos de vista

Un problema común en MVVM es cómo atar el modelo de vista a la vista. Ninguna de las bibliotecas que he usado provee correlaciones uno-a-uno entre ambos debido a que a veces un modelo de vista sirve a varias vistas. Aunque las vistas dependen de él (se le puede considerar como el contrato de ligado de la vista), el modelo de vista no sabe nada sobre las vistas a las que está asociado. Las vistas son exportadas a la región de destino usando su tipo o con una etiqueta, de igual manera que los modelos de vista son exportados con una etiqueta.

Las rutas son implementadas con un simple objeto que contiene dos etiquetas, una para la vista y otra para el modelo de vista. Ya sea que la vista exporte la etiqueta o que lo haga una clase para direccionamiento, la exportación es al final manejada por un direccionador centralizado. Este direccionador es capaz de extraer vistas y, como todo es cargado de manera diferida, puede determinar si la vista necesita ser atada al modelo de vista. Por otra parte, también provee una referencial al modelo de vista que, por cierto, es creado si es la primera vez que se usa.

El resultado es que la asociación entre la vista y el modelo de vista es completamente desacoplada, y es descrita en otra parte de la aplicación. También significa que el sistema de enrutamiento conoce cuando una vista está siendo desplegada por primera vez de manera que puede llamar métodos de inicialización en el modelo de vista tanto al ser creada como cuando es activada posteriormente. Esto permite que mis vistas reaccionen a cambios o mantenimiento que sea necesario antes de ser desplegadas de nuevo sin tener que depender de la jerarquía visual.

 

 

Para más detalles pueden ver los artículos Atando el modelo de vista con MEF (en inglés) y Otro patrón de localización de modelos de vista.

 

Desacoplando las vistas

Hay situaciones en las que es necesario hacer referencia a un tipo específico de vista que no es conocida de antemano. Por ejemplo, puede que una infraestructura de navegación dependa del tipo de vista (como en la sección siguiente). Cuando la vista se encuentra en un XAP que todavía no ha sido cargado, no hay manera de obtener una referencia directa a la vista. En este caso, MEF fue muy útil para manipular tipos diferidos, es decir, es posible importar una propiedad de un tipo especifico usando tan sólo una etiqueta (como “MainView” o “DashboardView”) y exportar esa etiqueta en otra parte. Así pudimos separar completamente la interacción con la vista y su tipo.

 

Navegación

MEF provee una infraestructura de navegación muy flexible. Lo que yo quería es un tipo de navegación capaz de entender entidades compuestas, de manera que un evento de navegación no estuviese limitado a páginas en la aplicación sino más bien a vistas, incluso cuando hay vistas dentro de otras.

La navegación coopera con el direccionador de modelos de vista para estar al tanto de cambios en estos últimos. En la infraestructura que desarrollé, el agrupador de eventos basado en MEF simplemente genera un evento de navegación de vista que encapsula el tipo de la vista y un indicador de activación o desactivación. El direccionador, que ha importado todas las vistas y modelos de vista, encuentra la vista y se comunica con el administrador de regiones para activarla o desactivarla. Si es activada entonces también llama el método correspondiente de inicialización en el modelo de vista.

Al generalizar cuadros de diálogo, páginas, y hasta asistentes (Wizards) dentro del concepto de eventos navegación, la tarea se hace increíblemente simple. En este contexto, el que una ventana sea emergente es tan sólo un detalle de implementación independiente del evento en sí, y el modelo de vista simplemente solicita que se navegue a esa vista sin tener que preocuparse de modelos, regiones, o ningún otro detalle propio de la navegación.

 

Autorización

La mayoría de las aplicaciones de negocios requieren servicios de autenticación y autorización. Por lo general, el usuario tiene propiedades como roles y credenciales que son verificados a la hora de obtener acceso a diferentes partes de la aplicación. MEF hace fácil el difundir las credenciales ya que el el usuario puede ser exportado como un objeto concreto, o como una interfase, y luego importado o consultado por las áreas de la aplicación que requieran saber el nivel de autorización.

 

Comandos

Los comandos pueden ir desde los que están fuertemente entrelazados con la interfase al usuario, hasta los que son tan independientes que pueden residir en módulos aún no cargados. Por ejemplo, comandos como volver al inicio (“home”) o expandir requieren eventos de navegación que conozcan la vista de destino.

 

Comandos de enlace diferido

El mecanismo de exportación e importación de MEF nos ayudó a implementar este tipo de enlace, también conocido como enlace tardío. En algunos casos el modelo de vista importa el comando usando una etiqueta predeterminada (por ejemplo “home”) aun si la vista se encuentra en un módulo diferente. Cuando es cargado, el módulo exporta el comando haciéndolo disponible para ser enlazado al modelo de vista. De esta manera es diferido, pues el comando no se puede usar hasta que el módulo que lo contiene es cargado.

 

 

Comandos globales

Hay otros comandos que son de naturaleza general, por lo que es mejor crear una sola implementación global en vez de duplicarlo por todas partes. Los comandos globales pueden ser exportados y luego importados donde sean necesarios, de manera que una copia única es usada, en vez de múltiples instancias locales. Usando de nuevo el ejemplo “home”, los modelos de vista pueden ofrecer ese servicio a la vista sin conocer el módulo o ensamblaje que contiene su implementación dejando que MEF importe el comando cuando ya está disponible.

Para más detalles pueden consultar el artículo Sharing Commands with MEF.

 

Cadena de responsabilidades

El patrón cadena de responsabilidades es una poderosa herramienta para administrar mensajes comunes que son procesados de manera diferente dependiendo de sus características. En este caso, usé MEF para proveer un mecanismo de administración que define un contrato o interfase estándar que consume ciertos tipos específicos de mensajes. Cada administrador exporta el contrato junto con metainformación describiendo el tipo de mensajes con los que es compatible. Un enrutador central se encarga de importar los administradores y escuchar los mensajes despachándolos a los administradores apropiados hasta que alguno responda diciendo que lo pudo procesar correctamente. En combinación con los comandos globales, este mecanismo provee un alto grado de extensibilidad a la aplicación.

Por ejemplo, imaginemos un comando “imprimir” que está disponible a toda la aplicación pero está enlazado al elemento que va a ser impreso. Hay varios controladores que han exportado el contrato de impresión y que saben cómo manejar distintos tipos de datos. Cuando el controlador que maneja el objeto de destino es invocado, formatea la información para poder ser impresa y envía el resultado a la impresora. Para manejar un nuevo tipo de datos, basta con crear un nuevo controlador y exportar el contrato o interfase de impresión.

 

Fábricas de clases con resolución de dependencias

Gran cantidad de clases tienen dependencias en varios niveles. Un caso puede ser una vista compuesta donde se presenta una lista de artículos, y cada artículo es expuesto mediante un modelo de vista asociado que tiene dependencias en el agrupador de eventos, el bus de servicios, y otros contratos que son importados usando MEF. Tal escenario es simplificado gracias a ExportFactory. Con esa herramienta se puede crear un modelo de vista con todo y resolución de dependencias, mientras iteramos una lista de datos. Los datos son incorporados al modelo de vista y éste es enlazado con la vista correspondiente; en todo esto, MEF se encarga de resolver las dependencias.

 

Vistas compatibles con la fase de diseño

Si se trabaja en paralelo con un equipo de diseñadores, es sumamente importante tener vistas que se comporten adecuadamente en la fase o tiempo de diseño. Es fácil crear vistas que pueden ser asociadas con modelos de vista diferentes durante la etapa de diseño usando los atributos d:Design y d:DesignInstance, mientras que MEF asocia el modelo de vista real durante la ejecución. Para este fin se puede usar la interfase IPartImportsSatisfied, evitando que en las vistas y modelos de vista se invoque código destinado al tiempo de ejecución.

Para más detalles pueden ver el artículo (en inglés) Usando MEF para crear modelos de vista compatibles con la fase de diseño.

 

Motor de validación

Los motores de validación por lo general exponen formas de verificar si se han violado reglas específicas. Con MEF fue fácil crear un mecanismo de validación flexible y extensible, exportando un contrato de uso para cada regla de validación. El motor entonces importa todas las reglas y provee acceso usando una interfase fluida. Pueden leer el artículo (en inglés) Validación fluida con MEF y PRISM para más detalles.

 

Pruebas unitarias

MEF fue de importancia crítica en nuestro éxito con las pruebas unitarias, principalmente por exponer como contratos todas las dependencias importadas. Durante las pruebas lo que hicimos fue no invocar a MEF, dejando que el sistema fuera inicializado usando componentes simulados o parciales.  Más información en el artículo (en inglés) Pruebas unitarias avanzadas en Silverlight usando Moq.

 

Conclusión

Obviamente muchos de estos ejemplos podrían ser implementados usando otras herramientas aparte de la Infraestructura de extensibilidad administrada. Una ventaja de MEF es que viene incluida en la plataforma de ejecución: no es una biblioteca provista por terceros, sino que es parte fundamental de .NET y de Silverlight 4.0. Basándome en mi experiencia al diseñar varias aplicaciones de gran escala en Silverlight, diría que MEF no sólo facilitó el hacerlas modulares, sino que también, al incluir tantas utilidades, redujo el tiempo de desarrollo. En especial con la habilidad de etiquetar los componentes exportados con metainformación y poder importar múltiples componentes usando el mismo contrato. Espero que esto les ayude con algunas ideas sobre cómo usar MEF en sus propias aplicaciones, y que también sirva para demostrar de que MEF está siendo usando con gran éxito en la producción de aplicaciones empresariales.

 

Jeremy Likness

 

Categories: MVVM Tags: , ,

Atajos de teclado en Expression Blend

April 3rd, 2011 No comments

Hola Universo:

En el blog de Kunal Chowdhury, Microsoft MVP en Silverlight, me he encontrado un post de mucha utilidad: atajos de teclado para nuestro programa de diseño visual favorito, Expression Blend. Veamos.

Atajo de Teclado Función
F1 Guia de usuario
Ctrl + + Aumentar Zoom en vista diseñador
Ctrl + - Disminuir Zoom en vista diseñador
Ctrl + 0 Ajustar la pagina entera en la vista diseñador
Ctrl + 1 Zoom al tamaño actual
Ctrl + 9 Ajustar selección a la vista diseñador
F9 Mostrar manejadores
Ctrl + Shift + H Mostrar los límites de objeto
F11 Cambiar a vista de documento activo
F2 Editar texto o renombrar el control seleccionado
Ctrl + E Editar Control
Ctrl + Shift + ] Lleva el control al frente
Ctrl + ] Llevar control adelante
Ctrl + Shift + [ Llevar control al fondo
Ctrl + [ Llevar control atras
Ctrl + G Agrupar en un control Grid
Ctrl + Shift + G Desagrupar un elemento
Ctrl + Shift + D fijar contenedor activo
Ctrl + Shift + 5 Auto-tamaño según el ancho
Ctrl + Shift + 6 Auto-tamaño según el alto
Ctrl + Shift + 1 Hacer que el ancho en los controles seleccionados sea el mismo
Ctrl + Shift + 2 Hacer que el alto  en los controles seleccionados sea el mismo
Ctrl + Shift + 9 Hacer que el tamaño de  los controles seleccionados sea el mismo
Ctrl + Shift + 3 Rotar controles horizontalmente
Ctrl + Shift + 4 Rotar controles verticalmente
Ctrl + 7 Hacer trazado de recorte
Ctrl + Shift + 7 Liberar un trazado de recorte
Ctrl + 8 Hacer trazado compuesto
Ctrl + Shift + 8 Liberar trazado compuesto
Ctrl + L Bloquear controles seleccionados
Ctrl + Shift + L Desbloquear todos los controles
Ctrl + T Mostrar los controles seleccionados en el diseñador
Ctrl + 3 Ocultar los controles seleccionados en el diseñador
Alt + Shift + R Agregar referencia al proyecto
Ctrl + Shift + B Construir proyecto
F5 Correr proyecto en modo depuración
Ctrl + F5 Correr proyecto sin modo depuración
F8 Volver a los controles seleccionados un Control de Usuario
Ctrl + Shift + T Crear una anotación para el elemento seleccionado
F6 Cambiar a los espacios de trabajos activos
Ctrl + Shift + R Reestablecer los espacios de trabajo actuales
F12 Mostrar el panel de resultados
F4 Auto ocultar / mostrar todos los paneles
Ctrl + Tab Alternar entre documentos abiertos
Ctrl + . Abrir el panel de “Assets”
Ctrl + N Agregar un nuevo elemento
Alt + Drag Crear una copia del control seleccionado
Space + Drag Arrastra el diseñador
Ctrl + I Agrega un elemento existente
Ctrl + Shift + N Agrega un nuevo proyecto
Ctrl + Shift + O Abre un proyecto o solución existente
Ctrl + W Cerrar documento
Ctrl + Shift + W Cerrar todos los documentos
Ctrl + S Guardar el documento actual
Ctrl + Shift + S Guardar todos los documentos sin guardar
Ctrl + Shift + P Guardar una copia del proyecto como…
Ctrl + Q Salir de Expression Blend

 

Compilación Completa…

Categories: Blend Tags: ,

Una mejor experiencia de instalación y actualización para Silverlight 4.0

March 21st, 2011 No comments

Por más pulida que sea la aplicación, puede que el usuario nunca llegue a verla gracias a una mala experiencia antes de siquiera ver nuestra primera pantalla. Hay diversas razones para esto; por ejemplo, puede que Silverlight no esté instalado, o que la versión presente sea incorrecta. Contrario a lo que muchos piensan, el desarrollador tiene casi completo control sobre lo que sucede en estos casos y cómo es presentado. En este artículo Andrew Tokeley nos da una guía práctica para mejorar la experiencia del usuario al instalar o actualizar nuestra aplicación.

 

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo Better Silverlight 4.0 Installation and Upgrade Experience publicado en inglés por Andrew Tokeley el 17 de octubre del 2010.

 

Las apariencias son muy importantes. De hecho, la forma en que una aplicación es instalada, o actualizada, y cuánto dura en arrancar puede tener una gran influencia en el concepto que el usuario tenga de ella. Tal como viene de fábrica, Silverlight no ayuda mucho, pero tranquilos que con un poquito de esfuerzo de puede superar ese obstáculo.

La siguiente figura ilustra la serie de pruebas necesarias cuando un usuario navega a la página que contiene la aplicación de Silverlight (para una imagen más amplia le sugiero abrir la imagen en una pestaña nueva).

 

Secuencia de inicio de una aplicación de Silverlight.

 

Verificando que Silverlight está instalado

El archivo Silverlight.js se encarga de todo esto antes de que la aplicación siquiera sea cargada, pero aun así nosotros podemos agregar un poco de magia.

Una de las primeras cosas que hay que verificar es si Silverlight está instalado en el cliente y si es la versión correcta. Hay un excelente documento que explica el proceso en todo detalle. Sin embargo creo que se puede simplificar un poco y por eso he escrito este artículo.

En el archivo estándar que Visual Studio prepara, agreguen el siguiente código en la función onSilverlightError—de otro modo no será posible determinar si se requiere actualizar la versión ya instalada de Silverlight. (Puede que esto sea una pulga, aunque todavía no lo he investigado.)

 

 

Luego hay que añadir el siguiente código en JavaScript. Estas funciones nos permiten controlar el HTML que es desplegado dependiendo de si Silverlight está instalado y cuál es su versión.

 

 

Al cargar la página podemos entonces llamar la función checkSupported() para que le avise al usuario si el navegador no es del todo compatible. Lo importante es no dejar de intentar la instalación incluso si no está en la lista oficial de navegadores compatibles de Microsoft. Es posible que todavía se pueda ejecutar.

 

 

Finalmente, podemos alterar el elemento object para que incluya ciertos parámetros adicionales (y algunos divs extra en mi ejemplo). Presten especial atención a onUpgradeRequired, onInstalledRequired y onRestartRequired. Estos apuntan a funciones que serán llamadas por Silverlight.js durante las diferentes etapas.

 

 

Para probar, se puede cambiar el minRuntimeVersion a un número mayor del que está actualmente instalado causando el siguiente resultado.

 

onUpgradeRequired informa al usuario que necesita una versión más reciente de Silverlight.

 

Noten que he incluido PluginDetect en mi página, para poder identificar la versión instalada de Silverlight. Hay veces en que puede ser más fácil poder informar al usuario cuál versión es la que tienen y cuál es la que ocupan. Por supuesto, podemos decidir cuántos detalles mostrar mediante modificar Silverlight.onUpgradeRequired. El enlace para instalar la versión deseada es creado mediante llamar la función Silverlight.buildPromptHTML(versión) (definida en Silverlight.js).

El siguiente experimento es desactivar el plugin de Silverlight en el navegador. De esta manera se puede simular el caso de un usuario sin Silverlight en su máquina. De acuerdo con el código en Silverlight.onInstallRequired, debería verse algo como esto en la pantalla:

 

onInstallRequired notifica al usuarion que Silverlight no está instalado y le indica dónde conseguirlo.

 

Otra prueba es usar un navegador que no esté en la lista de los compatibles. Volviendo la versión a la que teníamos originalmente especificada, abrimos a página en el navegador de prueba y esta vez la aplicación es cargada pero con una nota de advertencia.

 

checkSupported advierte al usuario si el navegador no es compatible dejándolo decidir si desea ejecutar la aplicación.

 

También es fácil comprobar si la aplicación ha sido instalada en la computadora. Todo lo que hay que hacer es verificar la condición App.Current.InstallState == InstallState.Installed y si es cierta entonces desplegar algo como lo siguiente.

 

La aplicación en sí puede detectar si ya ha sido instalada fuera del navegador.

 

Actualizando una aplicación OOB

Si la aplicación tiene como propósito que sea eventualmente instalada en el computador y usada en fuera del navegador (OOB por sus siglas en inglés), entonces es importante asegurarse de que revise si hay actualizaciones disponibles en el servidor. Recuerden que una vez que el usuario instala la aplicación, dejará de ser actualizada automáticamente, aun habiendo nuevas versiones del XAP en el servidor.

En mi ejemplo he creado una página con el propósito específico de revisar si hay actualizaciones. La página es cargada siempre al inicio de la aplicación y le avisa al usuario si hay una actualización disponible, si no entonces pasa el mando a la página principal.

De esta manera podemos informar al usuario que la aplicación está buscando actualizaciones y presentar una animación mientras tanto.

 

La aplicación revisando si hay versiones más recientes en el servidor.

 

El único código interesante de esta página es:

 

 

Es no más asunto de conectar un controlador que sea ejecutado cuando complete CheckAndDownloadUpdatesAsync() y que informe al usuario si hay una nueva versión disponible. Algo como esto:

 

En caso de haber sido actualizada, la aplicación informa al usuario al respecto.

 

Pantalla de cargado personalizada

Finalmente, una forma efectiva de darle un aspecto profesional es evitar que esta animación aparezca:

 

Esferas originales (y ya aburridas) de Silverlight cargando. La idea es usar algo original. 

 

El procedimiento es sencillo y ha sido bien explicado por Laurent Duveau y en MSDN por lo que no voy a repetirlo acá. Sin embargo, hay algunas cosas que a veces no quedan claras:

  • No estoy seguro por qué, pero la pantalla de cargado no siempre aparece. En todo caso, he notado lo siguiente:
    • Chrome parece ser el mejor portado.
    • Limpien el cache del navegador para asegurarse de que de hecho están descargando algo.
    • He obtenido resultados más consistentes haciendo clic derecho en la página HTML (o aspx) y seleccionando Ver en el explorador… en vez de usar F5 para depurar.
  • Si ven la animación original con las esferas azules el problema es generalmente un error ortográfico en alguno de los parámetros en el elemento object. Si ven una página en blanco si pantalla de cargado entonces probablemente la aplicación no ha sido descargada. Tal vez por estar en el cache; vean el paso anterior.
  • El XAML de la pantalla de cargado es un fragmento. No necesita estar dentro de un UserControl o Page. Por ejemplo, basta con declarar un elemento Canvas o Grid y crear el contenido (ejemplos más adelante).
  • Puesto que el XAML reside en la página de web, no es posible verla en el área de diseño de Blend. Lo que se puede hacer es diseñarla dentro de un proyecto de Silverlight y ya cuando está lista copiar el fragmento a la página de web.
  • No es posible usar código subyacente por lo que si tienen una animación, debe ser iniciada de una manera como esta:

     

 

Les muestro ahora un par de ejemplos de pantallas de cargado.

La forma más sencilla es rotar una imagen:

 

 

Otra es usar animaciones diferidas:

 

 

Pueden descargar el código de ejemplo acá. Mi recomendación es crear una aplicación de gran tamaño (decenas de MiB) que requiera una descarga lo suficientemente extensa como para ver la animación.

 

Andrew Tokeley

 

Técnicas con MVVM

February 4th, 2011 No comments

Uno de los obstáculos que he notado en muchos (incluyéndome a mí) tratando de entender MVVM, es aceptar que no es una receta, sino un concepto. Estamos acostumbrados a buscar procedimientos reproducibles que nos lleven, paso a paso, a la solución. Desafortunadamente (o por dicha, según uno lo vea), MVVM no se presta a tal formato.

El patrón de diseño Modelo-Vista-Modelo de vista es más una estrategia, una idea general de cómo estructurar la solución a un problema. En vez de listas de pasos, necesariamente lo que encontramos son explicaciones de los componentes principales del patrón y algunos ejemplos de su aplicación. Para los que todavía no están familiarizados con el patrón, Jeremy Likness ha escrito una muy buena introducción al tema.

 

Estrategia y táctica

Si bien la estrategia a utilizar es esencial, las tácticas son las que ponen en acción el plan principal. En una batalla, la estrategia puede ser ocupar cierta zona para avanzar en el territorio enemigo, pero la forma en que las fuerzas son distribuidas o los diferentes ataques individuales forman las tácticas del enfrentamiento.

En MVVM, la estrategia es dividir la solución en ciertas zonas o capas como el modelo, la vista, y el pegamento entre ambas: el modelo de vista. Las tácticas incluyen, entre muchas otras, la navegación entre vistas, el envío de datos del modelo a la vista, la comunicación entre la vista y el modelo de vista, el uso de comandos y así por el estilo.

Aunque MVVM no se presta a recetas premeditadas, sí hay gran variedad de técnicas o tácticas que pueden ser usadas en su aplicación al problema y que pueden ser bien definidas en procedimientos concretos. Por ejemplo, en las últimas semanas he estado publicando traducciones de algunos artículos que proponen métodos para resolver el problema de la asociación entre vistas y modelos de vista y el manejo de transacciones en la interfase gráfica de la aplicación.

La ventaja del sistema completo, estrategia y técnica, es que podemos escoger las que mejor se adapten a nuestras circunstancias particulares o, siendo francos, a nuestro gusto. Los siguientes artículos muestran algunas formas de resolver problemas comunes enfrentados al implementar MVVM. Los invito a leerlos y escoger los que les parezcan apropiados, elegantes, efectivos, o cualquier otro aspecto que les llame la atención.

 

 

Categories: General Tags: ,

Preguntas Frecuentes en Silverlight | Parte 2

February 3rd, 2011 No comments

Hola Universo:

En el post anterior viste 8 preguntas frecuentes que puedes hacerte al introducirte en el mundo de Silverlight; hoy continuaremos con ellas pero con detalles un poco mas técnicos.

9. Que significa RIA?

RIA significa Aplicaciones de Internet Enriquecidas  (Rich Internet Applications) las cuales son aplicaciones Web con interfaces de usuario que incluyen elementos multimedia como audio, video, etc. Para entender esto, puedes pensar que este concepto es muy similar al de las aplicaciones de escritorio exceptuando que las aplicaciones RIA son basadas en la Web.

ria-frameworks

10. Que es el Plug-In de Silverlight?

  • Es un componente ligero necesario para que los usuarios puedan tener acceso a aplicaciones Silverlight. La descarga e instalación del Plug-In  toma tan solo unos momentos y no necesita mucho espacio en Disco (como dije anteriormente, 6 MB para Windows y 9 MB en MAC).
  • Es responsable de acceder al objeto Silverlight en una página Web, descargando y accediendo al paquete XAP, configurando el entorno del programa e iniciando la ejecución de la aplicación.
  • Cuando una página Web que contiene una aplicación Silverlight es mostrada, el usuario  debe observar un enlace al sitio de descarga del Plug-In si no se encuentra instalado.

11. Que es el “Silverlight Runtime” (tiempo de ejecución)?

Silverlight Runtime es un Plug-In de navegador para soportar aplicaciones habilitadas de Silverlight. Si el Silverlight Runtime no se encuentra instalado, los navegadores no permitirían correr elementos Silverlight en ellos. Puedes establecer etiquetas Silverlight como una forma de que el navegador automáticamente interprete que el usuario descarga e instala el Plug-In Silverlight cuando tu aplicación es lanzada en el navegador. Instalar el Silverlight Runtime es una operación de una sola vez para el cliente, en otras palabras, una vez instalado, este puede lanzarse automáticamente cuando una aplicación Silverlight es cargada en el navegador.

12. Que es el Silverlight SDK?

Silverlight SDK es un conjunto de herramientas, documentación, ejemplos y plantillas para desarrolladores web que los ayudan a desarrollar fácilmente aplicaciones Silverlight. El SDK no es realmente obligatorio para desarrollar aplicaciones Silverlight; de todas formas, el SDK puede hacer el desarrollo mucho mas fácil.

13. ¿Cuáles son las versiones de Silverlight disponibles hasta ahora?

Silverlight 1.0: Consiste en Framework (marco de trabajo) de presentación núcleo, el cual es responsable de la interfaz de usuario (IU), interacción y entrada de usuario, controles de IU básicos, animación y gráficos, reproducción de medios, manejo de restricciones digitales (DRM), e integración con DOM.

Silverlight 2.0: (previamente referido como la versión 1.1) incluye una versión del .NET Framework, implementando completamente el mismo Entorno de Ejecución de Lenguajes Comunes o CLR que la versión del .NET Framework 3.0. El marcado XAML como cualquier código, es compilado en el el ensamblado .NET el cual a su vez es comprimido usando ZIP y almacenado en un archivo con extensión .XAP.

Silverlight 3: Fue liberado el 9 de Julio del 2009, es una extensión de Silverlight 2.0 y principalmente brinda mejoras en las capacidades graficas, manejo de multimedia, áreas de desarrollo de aplicaciones (controles adicionales, compatibilidad de enlaces mejoradas, y la funcionalidad de “Out-Of-Browser” o fuera del navegador, e integración con las herramientas de Expression Blend 3.

Silverlight 4: Fue liberado el 15 de abril del 2010 (junto con las herramientas de Silverlight 4 para desarrolladores)

14. Que es el archivo .XAP?

XAP es  un paquete de aplicación basada en Silverlight, el cual es generado cuando un proyecto Silverlight es construido. El archivo .XAP es un archivo de salida comprimido para la aplicación Silverlight. El archivo .XAP incluye:

  • AppManifest.xaml
  • El ensamblado de salida compilado del proyecto Silverlight (con extensión .DLL)
  • Archivos de recursos referentes a la aplicación Silverlight.

Las páginas Web como archivos .ASPX y .HTML usan componentes Silverlight cargando los archivos .XAP a través de la etiqueta Object en HTML o <asp: Silverlight> en las paginas ASP.NET. Archivos .XAP (se pronuncia “zap”) usa un algoritmo de compresión estándar para minimizar el tamaño de descarga del cliente. Si renombras el archivo PruebaSilverlight.xap a PruebaSilverlight.zip y lo abres usando una herramienta de descompresión (como 7zip o Winrar) Puedes ver el contenido anteriormente mencionado del archivo como cualquier archivo ZIP .

15. Como funciona XAP?

Una vez que se ha creado un archivo .XAP,  el Plug-In de Silverlight descarga el archivo y lo corre en un espacio de trabajo independiente.

16. Como utilizo un archivo .XAP?

Un archivo .XAP es usado para contener y transferir los ensamblados y recursos de la aplicación de código administrado. Esta aplicación de código administrado debe correr dentro del Plug-In de Navegador de Silverlight.

17. Que es el archivo Silverlight.js?

Silverlight.js es un archivo ayudante el cual permite a Sitios web crear la instalación avanzada de Silverlight y experiencias de instanciación. Puedes llamar  las funciones  “createObject”  y “createObjectEx” definidas en este archivo para embeber o incrustar el Plug-In Silverlight en una pagina Web.

18. Cual es el uso de la carpeta “ClientBin”?

La carpeta ClientBin es usada para alojar el archivo .XAP de la aplicación Silverlight. Puedes tener esto en cualquier lugar de tu aplicación Web pero esta es la nomenclatura usada para Silverlight.

19. Como puedo cambiar la pagina por defecto de mi aplicación Silverlight?

Para cambiar la pagina necesitas establecer la propiedad “RootVisual” dentro del evento “Application_Startup” alojada o en el archivo App.xaml.

20. Cuales son los archivos de Diseño y los archivos Code-Behind en Silverlight?

Los elementos de interfaz de usuario (IU) en las aplicaciones Silverlight son definidas en archivos XAML. La lógica y funcionalidad de dichas aplicaciones son implementadas usando código .NET (.cs, .vb..) que comparten las mismas clases con el archivo XAML.

21. Que es XAML?

XAML significa Lenguaje de Marcado de Aplicación Extendida (eXtended Application Markup Language) XAML contiene XML que es usado declarativamente para definir la interfaz de usuario en aplicaciones Silverlight o WPF. Por ejemplo, si necesitas mostrar un rectángulo, este es el código XAML:

Resultando esto:

1

La ventaja de XAML es que es muy similar a HTML por su naturaleza (lenguajes de etiquetas) así que es relativamente fácil de leer y aprender.

22. Que es el archivo “AppManifest.xml”?

Primero démosle un vistazo a un ejemplo de un archivo AppManifest.xaml:

El primer elemento del archivo es el nodo “Deployment” Este nodo define la aplicación y contiene los nodos hijos “AssemblyPart” Como puedes ver, los nodos AssemblyPart definen cual ensamblado (DLL’s) están contenidas en el archivo .XAP, y le da a cada uno un nombre. Ahora, regresando arriba, puedes ver que el nodo Deployment tiene los atributos “EntryPointAssembly” y “EntryPointType”. EntryPointAssembly define cual ensamblado es definido posteriormente (como un nodo hijo AssemblyPart) como ensamblado principal (DLL) para la aplicación. Y, el EntryPointType especifica que clase contenida en el ensamblado (DLL), definido en el atributo EntryPointAssembly, es la clase principal que podría ser instanciada para iniciar la aplicación. El nodo Deployment también tiene un atributo RuntimeVersion que define la versión de Silverlight  en la que fue construida la aplicación.

23. Que es app.xaml?

App.xaml es un archivo usado por las aplicaciones Silverlight para declarar recursos compartidos como brochas, objetos de varios estilos, plantillas, etc. También, el “Code Behind”  de app.xaml.cs es usado para manejar los eventos de nivel de la aplicación global como Application_Startup, Application_Exit y Application_UnhandledException (SImilar al archivo Global.asax para aplicaciones ASP.NET). Cuando Visual Studio crea el archivo app.xaml automáticamente, también crea manejadores de evento con algo de código por defecto. Puedes cambiar el código a tu conveniencia.

Para los desarrolladores ASP.NET, el código anterior les pareció familiar debido a que es parecido a Global.asax.

Hasta aquí llegamos por hoy estimad@s, espero que puedan leer la próxima entrega con la que concluiremos esta serie de posts.

Compilación Completa..

Preguntas Frecuentes en Silverlight | Parte 1

January 28th, 2011 1 comment

Hola Universo:

Si eres novato en el mundo de RIA, desarrollador/diseñador web o simplemente estás interesado en conocer el infinito y espectacular mundo de Silverlight este es uno de los primeros posts que debes leer.

Pretendía recopilar información de diferentes blogs y páginas en general para realizar la presente publicación pero en C# Corner me topé con uno que está buenísimo pero en inglés así que tome la base para armarlo así que habrán variaciones porque siempre impongo mi estilo, o como digo: mi CSS (estarán marcadas en letra cursiva). Habrán varias entregas para no aburrir la lectura. Empecemos!

1. Que es Microsoft Silverlight?

Silverlight es una tecnología basada en la web, lanzada por Microsoft en Abril del 2007. Es considerada como el competidor de Adobe Flash. En la actualidad dicha comparación se está volviendo cada vez mas borrosa ya que Silverlight está siendo cada vez mas implementada como plataforma para el desarrollo de soluciones empresariales; Escenario donde Adobe Flash tiene un futuro muy incierto debido a todos los problemas de seguridad que presenta.

lightswitch2

Silverlight es una implementación Microsoft “cross-browser” (multi-navegador), Un “framework” (marco de trabajo) Multi-Plataforma que permite a los diseñadores y desarrolladores crear Aplicaciones de Internet Enriquecidas (RIA) embebidas o incrustadas en las páginas web.

Silverlight es un plug-in (extensión o componente adicional) para navegadores que pesa aproximadamente 6 MB, es un software del lado del cliente completamente gratis que proporciona una instalación fácil y rápida que no dura ni 10 segundos. En MAC pesa menos de 10MB, creo que 8.7 MB para ser un poco más exactos. Si te preocupas por la forma en que harás que la gente instale el SW,no te preocupes, Por defecto cuando desarrollamos apps Silverlight, sino se encuentra instalado el SW se genera un Frame  a la página de descarga del programa (En futuros posts veremos como mejorar la experiencia de instalación)

InstallSilverlight

Soporta integración de datos avanzada, multi-hilo, videos en alta definición gracias a IIS Smooth Streaming, y otro sinfin de servicios. Silverlight permite desarrollar aplicaciones online (en línea) y offline (fuera de línea) para escenarios de consumidores finales y una amplia línea de negocios. Una muestra de ello es Visual Studio LightSwitch.

Una de las metas de diseño de la tecnología Silverlight es llenar la “brecha” o separación entre las aplicaciones windows o WinForms y las aplicaciones web respecto a la creación de Interfaces Gráficas de Usuario (GUI) . Este objetivo se cumple ampliamente gracias a Visual Studio + Expression Studio.

Las aplicaciones Silverlight corren del lado del cliente sin necesidad de refrescar el navegador para actualizar la UI o interfaz gráfica. Este es el objetivo principal de RIA, dar la sensación al usuario de que está en el escritorio cuando en realidad está en la web. Sin embargo, porque esta construido en el .NET Framework, las aplicaciones Silverlight pueden integrarse fácilmente con controles y servicios del lado del servidor. Esta es una de las razones por las que HTML5 no sustituirá a Silverlight, este tema da para un nuevo post  Sonrisa Usando una implementación Silverlight en .NET Framework, los desarrolladores pueden integrar fácilmente librerías existentes y código en las aplicaciones Silverlight.

2. Porque usar Silverlight?

  • Soporta .NET Framework, si ya eres desarrollador .NET será fácil empezar a programar Silverlight. Con esto retomo algo importantísimo que mencionó el MVP Rodrigo Díaz Concha: Si conoces algún lenguaje de .NET, ya conoces el 50 % de Silverlight. Wosom!!
  • Soporta código administrado. Podes programar en tu lenguaje del CLR .NET favorito como Visual Basic, C#, Iron Python o Iron Ruby.

CLRSilverlight

  • Herramientas de desarrollo de calidad. Quien me va a contradecir en que Visual Studio es el mejor IDE que ha existido. Es la herramienta de desarrollo de SW mas completa. Pero para satisfacer todos los gustos aparece en escena Expression Studio que permite desde editar y publicar videos hasta desarrollar sitios webs increíbles.

imagesExpression_Studio

  • Gran comunidad. disponibles un sinnúmero de recursos de aprendizaje comparable a los de la comunidad de Flash. Les recuerdo que MSDN es una de las comunidades mas grandes a nivel mundial y sin contar que Microsoft impulsa programas educativos como STC, MSP y profesionales como MVP donde a través de foros, webcasts y blogs ayudan a despejar tus problemas y dudas.
  • Integración con tecnologías empresariales como WPF, LINQ, etc.
  • Silverlight integra el lenguaje declarativo XAML con el .NET Framework. No se corran pensando que hay que aprender mas de 2 lenguajes para programar en Silverlight ya que si sabes HTML o XML que son lenguajes de etiquetas, XAML será sumamente fácil de comprender para ti. Y además te cuento un secreto, el código de XAML que veras será mínimo gracias a las potentes herramientas antes mencionadas: Visual Studio y Expression Blend.
  • Esta tecnología es Multi-navegador y Multi-Plataforma, por tanto provee una experiencia de usuario consistente donde sea que corra. Como se menciono anteriormente corre en Windows obviamente, MAC y Linux a través de MoonLight.

SLonMAC

  • Después de instalar el plug-in, los usuarios ya no necesitan instalar otra cosa en sus estaciones de trabajo (como PC’s o Smartphones) para correr aplicaciones Silverlight . Dichas aplicaciones están disponibles en cada uno de los navegadores que soporten Silverlight.

SLonFF

  • Al correr una aplicación Silverlight del lado del cliente puedes leer datos y actualizar la Interfaz de Usuario sin interrumpir al usuario al refrescar toda la pagina.
  • A través de  Silverlight se puede realizar comunicaciones asíncronas con el servidor permitiendo que la Interfaz de Usuario continúe su función mientras espera que el servidor responda.
  • Permite ejecutar video, audio y gráficos.

SNF_extra.hmedium

3. Que plataformas Silverlight soporta?

windows-mac-linux

  • Mac OS
  • Windows XP SP2
  • Windows Vista
  • Windows 7
  • Windows Server 2000
  • Windows Server 2003
  • Windows Server 2008
  • Linux (MoonLight)
  • Symbian (Nokia S60 5ta edición)
  • Windows Phone 7

4. Que navegadores soporta Silverlight?

Navegadores

  • Microsoft Internet Explorer – Desde la versión 6
  • Mozilla Firefox -  Desde la versión 2
  • Apple Safari – Desde la versión 3
  • Google – Chrome
  • Opera

5. Cuales son los requerimientos del sistema para Silverlight?

Los requerimientos de sistema para Silverlight y las tecnologías asociados se listan a continuación en base a los sistemas operativos:

Windows:

  • Sistema Operativo: Windows 7, Windows Vista, Windows XP SP2
  • Intel Pentium III 450 MHz o procesadores mas rapidos (o equivalentes)
  • 128 de RAM

Mac OS:

  • Sistema Operativo: Apple Mac OS X 10.4.8 o superiores.
  • Intel Core Duo 1.83 GHz o procesadores mas rapidos.
  • 128 de RAM

Linux:

  • MoonLight

6. Que es MoonLight?

MoonLight_SL

MoonLight es una implementación de código abierto de Silverlight, primeramente para Linux y otros sistemas operativos basados en Unix/X11. En septiembre del 2007, Microsoft y Novell anunciaron colaboración técnica que incluye acceso a módulos de pruebas Microsoft para Silverlight y la distribución de un paquete de medios para usuarios Linux que contienen codecs multimedia licenciados para audio y video.

MoonLight 2 fue lanzado el 17 de Diciembre del 2009.

7. Cuales son las metas de MoonLight?

  • Correr aplicaciones Silverlight en Linux
  • Proveer un SDK Linux para construir aplicaciones Silverlight
  • Reutilizar la ingeniería detrás de Silverlight para construir aplicaciones de escritorio.

8. Silverlight es gratis?

La pregunta del millón, claro que por supuesto que si, una razón mas para que empieces a desarrollar en Silverlight.

Con estas 8 preguntas considero que es suficiente por hoy, espero que haya sido de su agrado y utilidad.

Compilación Completa!

Fuente Base

31 días de Windows Phone | Día #31: Graficando datos

December 31st, 2010 2 comments

En el último artículo de la serie, Jeff explica cómo usar un componente del juego de herramientas estándar para Silverlight 3. De esta manera demuestra no sólo la utilización de gráficas, sino también cómo todos los otros controles de ese conjunto están disponibles para ser usados en nuestras aplicaciones en el teléfono.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #31: Charting Data por Jeff Blankenburg publicado el 31 de octubre del 2010

 

Hoy es el Día #31 y final de una serie llamada los 31 días de Windows Phone. ¿No les parece increíble que ya se terminó?

Ayer discutimos el tema de gestos del usuario y cómo capturarlos fácilmente. Hoy, en el último artículo de la serie vamos a cubrir gráficas tal como prometí hace un tiempo. Les voy a mostrar lo simple que es añadir gráficas circulares, de barras y otros tipos a nuestras aplicaciones.

 

Obtengan el juego de herramientas de Silverlight

Tal vez recuerden que en el día #21 hablé sobre el Juego de herramientas de Silverlight para Windows Phone. En ese artículo también mencioné que hay otro conjunto enorme de controles disponibles llamado el Juego de herramientas de Silverlight 3. Este otro juego de herramientas es el que necesitan descargar e instalar. Lo pueden conseguir en el Codeplex. No obstante, a menos que quieran sufrir un dolor de cabeza como el que yo tuve esta noche, lo que les recomiendo es descargar el ejemplo abajo y simplemente usar los ensamblajes incluidos. Aunque si instalan el juego de herramientas van a tener una amplia gama de controles adicionales disponibles. Nosotros vamos a ver sólo el PieSeries y el BarSeries.

 

Usando el control PieSeries

Asegúrense de añadir los ensamblajes System.Windows.Controls y System.Windows.Controls.DataVisualization.Toolkit al proyecto (de nuevo, les recomiendo usar los que vienen incluidos en el ejemplo para evitar confusiones).

También necesitamos agregar los espacios de nombres a nuestra página. En mi ejemplo voy a crea una página separada para cada tipo de gráfica, pero no es requerido. Añadan esta declaración al inicio del archivo XAML:

 

 

Ya con esto podemos insertar gráficas en la página. Incluyamos ahora una que incluya el control PieSeries:

 

 

Más simple no puede haber, y eso que no hemos hecho ABSOLUTAMENTE nada con él. En el ejemplo voy a enlazar la gráfica con datos en el código subyacente y hasta voy a cambiar un poco el aspecto de la gráfica circular.

Para enlazar datos al control hago lo mismo que en el día #25 donde obtuvimos datos de Twitter. Ta sólo hay que asignarlos a la propiedad ItemsSource del PieSeries. Este es el archivo completo de código subyacente para la gráfica circular, PieSeriesControl.xaml.cs:

 

 

Como notarán, no hago referencia al control PieSeries directamente, sino a la serie cero de su contenedor, el control Chart. La verdad es que no estoy muy claro en cómo es que referirse al control PieSeries no funciona, mientras que este otro modo sí. No obstante, esa es la manera en que lo he visto implementado en todo lado por lo que voy a seguir ese modelo.

Adicionalmente necesitamos especificar el enlace en el XAML. En su forma más básica hay que especificar el DependentValueBinding y el IndependentValueBiding. Como seguro adivinarán, el DependentValueBinding contiene los valores graficados y el IndependentValueBinding contiene los valores que sirven de “etiquetas” en la gráfica.

 

 

 

Gráfica circular. 

 

Si investigan el código de ejemplo verán cómo he cambiado la plantilla del PieSeries para girarlo de manera que la broma implícita en los datos sea más reconocible. Lo mejor del ejemplo de arriba es que todos los otros tipos de gráfica funcionan de manera casi idéntica. Veamos las similitudes con el control BarSeries.

 

Usando el control BarSeries

El control BarSeries se usa de forma casi igual, creando el control y enlazando los datos. Sin embargo, en este ejemplo quiero mostrar cómo asignar datos específicos a los ejes de la gráfica. Voy a crear el mismo contenedor de tipo Chart y agregarle un BarSeries. Este es el XAML resultante:

 

 

Observen cómo puedo asignar a los ejes (CategoryAxis y LinearAxis) el título, orientación, y hasta valores mínimo y máximo si lo deseo. Esto nos da gran flexibilidad en controlar etiquetas que de otra forma serían generadas automáticamente.

Cito abajo el archivo completo BarSeriesControl.xaml.cs para que puedan ver que el enlace de datos funciona de manera idéntica (aunque usé datos diferentes):

 

 

 Gráfica de barras.

 

¡Y eso es todo! Por supuesto, pueden ver el juego completo de herramientas en Codeplex. Construyan una simple aplicación de gráficas y muéstrenla a sus gerente, a ver si el Windows Phone no se convierte su tema favorito para hablar con otros ejecutivos. :) Se trata de satisfacer la necesidades de la empresa, ¿no es cierto?

 

Descargando el código

El código descargable contiene ejemplos para los controles PieSeries, BarSeries y ColumnSeries. Pueden usarlo en cualquiera se sus proyectos.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,

31 días de Windows Phone | Día #30: Gestos

December 30th, 2010 No comments

La forma nativa de leer gestos del usuario en Silverlight puede ser complicada. Este artículo explica cómo utilizar un ensamblaje de XNA para ayudarnos a leer los gestos más comunes sin tener que hace múltiples cálculos y medidas .

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #30: Gestures por Jeff Blankenburg publicado el 30 de octubre del 2010

 

Este artículo es el Día #30 de una serie llamada los 31 días de Windows Phone. Cuesta creer el camino recorrido, pero mañana es el último día de la serie.

Ayer escribí sobre animaciones y cómo reproducir la animación de puerta abriendo usada por el sistema operativo. Hoy vamos a enfocarnos en gestos y cómo usar un ensamblaje de XNA para reconocer gestos del usuario.

 

¿Qué es XNA?

Esta serie se ha enfocado puramente en Silverlight, pero hay una tecnología alterna llamada XNA con la que se pueden crear aplicaciones para Windows Phone7. Es común entre desarrolladores de juegos y ha sido usada por años como la plataforma para Zune y Xbox 360. La siguiente lista de guías puede servirles para aprender más sobre XNA: http://create.msdn.com/en-us/education/roadmap

 

Agregando XNA a nuestra aplicación

Lo primero que tenemos que hacer es agregar una referencia al ensamblaje Microsoft.Xna.Framework.Input.Touch a nuestro proyecto.

 

Agregando el ensamblaje Microsoft.Xna.Framework.Input.Touch al proyecto.

 

Usando el TouchPanel

Parte del mundo de XNA gira alrededor del concepto de un TouchPanel (o panel táctil), abarcando la superficie de la pantalla. Si usamos el TouchPanel tendremos acceso directo a la biblioteca de gestos y podemos activar esos en los que estemos interesados.

Primero añadimos una declaración using al inicio del código subyacente:

 

 

Entonces podemos indicar los gestos a los que queremos reaccionar:

 

 

Generalmente yo pongo ese código en el método de inicio de la aplicación, pero puede usarse en cualquier parte. En el siguiente paso es donde nos desviamos de XNA. Las aplicaciones XNA tienen un ciclo de juegos estándar que es ejecutado 30 veces por segundo. Dos métodos, Draw() y Update(), se llaman el uno al otro pasándose la bola entre sí, constantemente actualizando el estado de la aplicación y el contenido de la pantalla.

Ese mecanismo no existe en Silverlight puesto que es basado en eventos. Nada ocurre hasta que se dispare un evento, por lo que no tenemos una forma eficiente de chequear gestos. La forma de vadear el problema es usando eventos de manipulación.

 

Usando los eventos de manipulación con gestos

Los eventos de manipulación serían un excelente punto de partida si queremos hacer un montón de cálculos o crear nuestros propios gestos. Sin embargo, nada de eso es necesario para los gestos estándar como pinzado, hojeo, toque, toque doble y demás.

En lo último que quedamos, habíamos incluido el TouchPanel y activado los gestos deseados. Es entonces hora de empezar a reconocerlos. Entre los eventos de manipulación hay uno ManipulationCompleted que puede ser asociado a cualquier control. En este caso lo vamos a adjuntar al LayoutRoot para poder capturar los gestos en cualquier parte de la página.

 

 

En el controlador del evento revisamos el TouchPanel para ver si en efecto ha ocurrido un gesto y, si tal es el caso, reaccionamos al tipo de gesto.

 

 

Este pequeño trozo de código es todo lo que necesitamos para incorporar reconocimiento de gestos en nuestras aplicaciones. Por supuesto, en la práctica vamos a hacer algo más que simplemente escribir en un TextBlock , pero eso se los dejo a ustedes. Para ahora, ya saben cómo capturar gestos de forma simple y fácil.

 

Descargando el código

Este ejemplo usa el código mostrado arriba para escribir el nombre de los gestos reconocidos en un campo de texto en la pantalla. Los invito a sentirse libres de usarlo como base para sus propias aplicaciones. Por cierto, no olviden que el Juego de herramientas de Silverlight para Windows Phone provee un control similar llamado GestureListener que fue cubierto en el día #21.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,

31 días de Windows Phone | Día #29: Animaciones

December 29th, 2010 No comments

Una excelente manera de darle vida a las aplicaciones es usando animaciones en lugares estratégicos. Blend y Silverlight hacen posibles sofisticadas animaciones con relativamente poco esfuerzo. Jeff muestra cómo duplicar una animación usada comúnmente por el teléfono a la vez que nos da los principios básicos para crear animaciones.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #29: Animations por Jeff Blankenburg publicado el 29 de octubre del 2010

 

Este artículo es el Día #29 de una serie llamada los 31 días de Windows Phone.

Ayer escribí sobre cómo hacer que nuestras aplicaciones generen ingresos adicionales usando anuncios publicitarios. Hoy voy a demostrar cómo añadir movimiento y vida a nuestras aplicaciones usando animaciones.

 

La súper animación de la puerta abriendo

Si han usado una aplicación en el emulador habrán visto la bonita animación de una puerta abriendo que ocurre justo antes de cargarla. Voy a mostrar cómo añadir ese tipo de animación a sus páginas. (Es, de hecho, sorprendentemente fácil.)

Háganse de un nuevo proyecto (si quieren seguir el texto, usen la plantilla básica de aplicaciones de WIndows Phone), y agreguen un rectángulo a la cuadrícula llamada ContentPanel. El mío se ve así:

 

Aspecto inicial de la aplicación con el rectángulo rojo.

 

Por el resto del artículo vamos a usar Expression Blend 4 para crear la animación. Pueden abrir el proyecto desde Visual Studio haciendo clic derecho en el proyecto y seleccionando Abrir en Expression Blend.

 

Expression Blend se puede abrir desde Visual Studio haciendo clic derecho en el proyecto.

 

Si tienen el proyecto abierto en Blend, encuentren la pestaña llamada Objetos y escala de tiempo. Tiene un pequeño símbolo + en la parte superior que se usa para crear nuevas animaciones o guiones gráficos (storyboards).

 

El símbolo '+' crea nuevos guiones gráficos para animaciones.

 

Si hacen clic en el símbolo, obtienen un cuadro de diálogo como el siguiente. Pónganle nombre a la animación:

 

Creando un nuevo guión gráfico o storyboard.

 

Al volver a la pestaña de Objetos y escala de tiempo verán la escala de la animación a la derecha de los objetos. Para apreciarla mejor, la tecla F6 reorganizará las ventanas en Expression, poniendo la pestaña en la parte inferior y abarcando el ancho de la aplicación.

En nuestra animación de puerta abriendo vamos a manipular TODO el contenido de la página. Por dicha, gracias al sistema jerárquico de Silverlight podemos simplemente trabajar con el elemento LayoutRoot. Seleccionen ese elemento en la pestaña de Objetos y busquen un ícono en forma de óvalo directamente encima de la línea de cero segundos.

 

El óvalo sobre la escala de tiempo siver para designar fotogramas clave.

 

El ícono indica que es un fotograma clave (keyframe). Estos son los instantes cruciales cuando ocurren cambios. Silverlight es capaz de crear la animación entre fotogramas clave por nosotros. Por ejemplo, en este caso vamos a definir el comienzo y el final de nuestra a animación, dejando que Silverlight calcule el resto. Hagan clic en el ícono del fotograma, por si no lo han hecho.

Hemos creado el fotograma clave a cero segundos debido a que necesitamos una base. Así le indicamos a Silverlight que tome nota de que nuestro elemento está en el punto de partida. Otro aspecto que tenemos que configurar en este punto es el centro de rotación del objeto. El centro de rotación siempre coincide con el centro del objeto, pero nosotros queremos que rote con respecto a la orilla izquierda de la pantalla.

Luego de verificar que LayoutRoot está seleccionado y que hay un “huevito” a su derecha en cero segundos, vayan a la pestaña de Propiedades. En la categoría Transformación hay otra pestaña llamada Centro de giro (en la sección Projection). Verán que ambos valores, X y Y, son 0.5 (es decir el centro del elemento). Lo que queremos es cambiar el valor X a cero para moverlo al borde izquierdo del elemento.

 

Cambiando la posición del centro de giro de la página.

 

Volviendo a la pestaña Objetos y escala de tiempo vamos a mover la línea amarilla, que indica el paso del tiempo, a la mitad entre cero y uno. Verán como el valor de tiempo junto al ícono de fotograma clave cambia a medida que movemos la línea.

Lo que sigue es modificar el Giro en la sección Projection que visitamos hace un momento. Volviendo a Propiedades, cambiamos el valor Y a 90, causando que nuestro contenido gire 90 grados en una rotación tridimensional.

 

Girando la página 90 grados.

 

Si presionan el botón Reproducir encima de la escala de tiempo deben poder ver la animación en acción. Sin embargo, todavía nos falta un paso más antes de poder usarla en nuestro programa. Hay que invocarla desde el código. Abajo muestro mi archivo completo de MainPage.xaml para que puedan ver todos los cambios que hemos hecho hasta ahora en el XAML:

 

 

Invocando las animaciones desde el código

Luego de crear la animación podemos guardar todo y salir de Expression Blend. De vuelta en Visual Studio hay que abrir el archivo MainPage.xaml.cs. Lo que vamos a hacer es iniciar la animación cuando alguien haga un clic en el rectángulo rojo.

Primero creamos un controlador para el evento Click en el rectángulo y luego ejecutamos el método Begin() del guión gráfico. Este es el ejemplo completo de MainPage.xaml.cs:

 

 

¡Eso es todo! Si quieren, pueden usar libremente esta animación para dar a sus aplicaciones el mismo efecto frecuentemente usado en el sistema operativo.

 

Descargando el código

El ejemplo incluye todo el código mostrado arriba en un proyecto completo. Descárguenlo, por favor, y experimenten con él  para empezar a usar animaciones en sus aplicaciones.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,

31 días de Windows Phone | Día #28: Anuncios en las aplicaciones

December 28th, 2010 No comments

La presentación de anuncios publicitarios en aplicaciones genera ingresos adicionales. Por ejemplo, puede generar ganancias en aplicaciones que son distribuidas gratuitamente y hasta puede ser útil en animar al usuario a obtener la versión pagada.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #28: Advertising in Your Apps por Jeff Blankenburg publicado el 27 de octubre del 2010

 

Este artículo es el Día #28 de una serie llamada los 31 días de Windows Phone.

Ayer escribí sobre cómo enviar nuestras aplicaciones al centro de aplicaciones. Hoy voy a cubrir cómo generar ingresos con las versiones de prueba o con aplicaciones gratuitas usando el control de anuncios comerciales (AdControl).

 

¿Por dónde empiezo?

El primer lugar a visitar es el Centro Publicitario de Microsoft (MD: el centro tiene varios sitios regionales. Puede que necesiten seleccionar el más cercano en la esquina superior derecha.) Allí se explica cómo obtener el kit de desarrollo, registrar la aplicación e incorporar anuncios en ella. Como esta es una serie sobre desarrollo, voy a mostrar aquí la parte relacionada con la implementación.

 

Agregando el control de publicidad

Primero hay que OBTENER el control. Si no visitaron el sitio arriba entonces todavía no lo tienen. Lo pueden descargar aquí:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=b0f00afc-9709-4cc2-ba2c-57728db6cbd6

Después de añadir el DLL al proyecto podemos empezar a usar los controles publicitarios en la aplicación. (Si necesitan asistencia en agregar el ensamblaje al proyecto, el día #16: Control Panorama explica cómo.) (MD: en mi caso, el DLL fue instalado en C:\Program Files\Microsoft Advertising SDK for Windows Phone 7 y su nombre es Microsoft.Advertising.Mobile.UI.dll)

Una vez disponible, su uso es igual a cualquier otro control. En XAML se ve así:

 

 

Como pueden ver, el AdControl requiere dos valores, AdUnitId y ApplicationId. Estos valores se consiguen al registrarse en el centro publicitario de Microsoft y crear una nueva unidad publicitaria.

 

Usando valores de prueba en el AdControl

Mientras se hacen pruebas no es buena idea usar el valor real de AdUnitId porque sería equivalente a hacer clics ilegales en nuestros anuncios en una página de web. Para evitar ese caso, el AdControl es lo suficientemente inteligente como para reconocer si está siendo ejecutado en el emulador y no desplegará los anuncios. En vez de eso, usen los valores que presento en el ejemplo de arriba. Hay tres diferentes tipos de valores de prueba dependiendo del tamaño y forma del anuncio:

 

Tipo de anuncio Modelo Tamaño ApplicationId AdUnitId
Texto Contextual 480×80 test_client TextAd
Imagen XXL Contextual 480×80 test_client Image480_80
Imagen XL Contextual 300×50 test_client Image300_50

 

En mi ejemplo como pueden ver, estoy usando una pancarta extra grande de 480 x 80. El anuncio va a ocupar los últimos 80 pixeles en la parte inferior de la pantalla y mostrará anuncios de mi unidad publicitaria.

 

¿Qué es una unidad publicitaria?

Unidades publicitarias son campañas que se pueden ejecutar con temas específicos. Por ejemplo, yo tengo una aplicación llamada el “Toothbrush Timer” (temporizador para cepillado de dientes). Su propósito es ayudar a los niños a ver por cuánto tiempo deben cepillar cada región en su boca. Como la idea es que los padres pongan el teléfono en el mostrador y lo miren mientras se lavan los dientes junto con los pequeñuelos, esta parece una excelente oportunidad para llamar su atención.

Lo mejor de las unidades publicitarias es la posibilidad de definir la categoría de los anuncios a exhibir. Yo quiero presentar anuncios que sean relevantes a padres e hijos. Afortunadamente hay montones de categorías diferentes de anuncios disponibles (¡385 en total!), y se pueden escoger hasta 3 diferentes categorías por cada unidad. Esta es la lista:

 

Law, Gov’t & Politics – All
Law, Gov’t & Politics – Commentary
Law, Gov’t & Politics – Politics
Law, Gov’t & Politics – U.S. Government Resources
Law, Gov’t & Politics – Legal Issues
Law, Gov’t & Politics – Immigration
Shopping – All
Shopping – Coupons
Shopping – Contests & Freebies
Shopping – Engines
Shopping – Comparison
Real Estate – All
Real Estate – Buying/Selling Homes
Real Estate – Architects
Real Estate – Apartments
Hobbies & Interests – All
Hobbies & Interests – Woodworking
Hobbies & Interests – Video & Computer Games
Hobbies & Interests – Stamps & Coins
Hobbies & Interests – Screenwriting
Hobbies & Interests – Scrapbooking
Hobbies & Interests – Sci-Fi & Fantasy
Hobbies & Interests – Roleplaying Games
Hobbies & Interests – Radio
Hobbies & Interests – Photography
Hobbies & Interests – Painting
Hobbies & Interests – Needlework
Hobbies & Interests – Home Recording
Hobbies & Interests – Guitar
Hobbies & Interests – Comic Books
Hobbies & Interests – Collecting
Hobbies & Interests – Cigars
Hobbies & Interests – Chess
Hobbies & Interests – Card Games
Hobbies & Interests – Candle & Soap Making
Hobbies & Interests – Boardgames/Puzzles
Hobbies & Interests – Birdwatching
Hobbies & Interests – Beadwork
Hobbies & Interests – Arts & Crafts
Hobbies & Interests – Art/Technology
Hobbies & Interests – Magic & Illusion
Hobbies & Interests – Jewelry Making
Hobbies & Interests – Investors & Patents
Hobbies & Interests – Getting Published
Hobbies & Interests – Genealogy
Hobbies & Interests – Freelance Writing
Hobbies & Interests – Drawing/Sketching
Travel – All
Travel – South America
Travel – National Parks
Travel – Mexico & Central America
Travel – Hotels
Travel – Honeymoons/Getaways
Travel – Greece
Travel – France
Travel – Africa
Travel – Adventure Travel
Travel – United Kingdom
Travel – Traveling with Kids
Travel – Theme Parks
Travel
– Spas
Travel – Japan
Travel – Italy
Travel – Europe
Travel – Eastern Europe
Travel – Cruises
Travel – Caribbean
Travel – Canada
Travel – Camping
Travel – By US Locale
Travel – Business Travel
Travel – Budget Travel
Travel – Bed & Breakfasts
Travel – Australia & New Zealand
Travel – Air Travel
Food & Drink – All
Food & Drink – Wine
Food & Drink – Vegetarian
Food & Drink – Vegan
Food & Drink – Mexican Cuisine
Food & Drink – Japanese Cuisine
Food & Drink – Italian Cuisine
Food & Drink – Health/Low Fat Cooking
Food & Drink – French Cuisine
Food & Drink – Food Allergies
Food & Drink – Dining Out
Food & Drink – Desserts & Baking
Food & Drink – Cuisine Specific
Food & Drink – Coffee/Tea
Food & Drink – Cocktails/Beer
Food & Drink – Chinese Cuisine
Food & Drink – Cajuns/Creole
Food & Drink – Barbecues & Grilling
Food & Drink – American Cuisine
Technology & Computing – All
Technology & Computing – Windows
Technology & Computing – Web Search
Technology & Computing – Web Design/HTML
Technology & Computing – Web Clip Art
Technology & Computing – Visual Basic
Technology & Computing – Unix
Technology & Computing – Shareware/Freeware
Technology & Computing – Entertainment
Technology & Computing – Portable
Technology & Computing – PC Support
Technology & Computing – Palmtops/PDAs
Technology & Computing – Network Security
Technology & Computing – Net for Beginners
Technology & Computing – Net Conferencing
Technology & Computing – MP3/MIDI
Technology & Computing – Mac Support
Technology & Computing – Mac OS
Technology & Computing – Linux
Technology & Computing – Animation
Technology & Computing – 3-D Graphics
Technology & Computing – JavaScript
Technology & Computing – Java
Technology & Computing – Internet Technology
Technology & Computing – Home Video/DVD
Technology & Computing – Graphics Software
Technology & Computing – Email
Technology & Computing – Desktop Video
Technology & Computing – Desktop Publishing
Technology & Computing – Databases
Technology & Computing – Data Centers
Technology & Computing – Computer Reviews
Technology & Computing – Computer Peripherals
Technology & Computing – Computer Networking
Technology & Computing – Computer Certification
Technology & Computing – Cell Phones
Technology & Computing – Camcorders
Technology & Computing – Cameras
Technology & Computing – C/C++
Technology & Computing – Antivirus Software
Health & Fitness – ALL
Health & Fitness – AIDS/HIV
Health & Fitness – Women’s Health
Health & Fitness – Weight Loss
Health & Fitness – Thyroid Disease
Health & Fitness – Substance Abuse
Health & Fitness – Smoking Cessation
Health & Fitness – Sleep Disorders
Health & Fitness – Sexuality
Health & Fitness – Senior Health
Health & Fitness – Psychology/Psychiatry
Health & Fitness – Physical Therapy
Health & Fitness – Pediatrics
Health & Fitness – Disorders
Health & Fitness – Panic/Anxiety
Health & Fitness – Orthopedics
Health & Fitness – Nutrition
Health & Fitness – Men’s Health
Health & Fitness – Infertility
Health & Fitness – Incontinence
Health & Fitness – Incest/Abuse Support
Health & Fitness – IBS/Crohn’s Disease
Health & Fitness – Holistic Healing
Health & Fitness – Herbs for Health
Health & Fitness – Heart Disease
Health & Fitness – Headaches/Migraines
Health & Fitness – GERD/Acid Reflux
Health & Fitness – Epilepsy
Health & Fitness – Diabetes
Health & Fitness – Dermatology
Health & Fitness – Depression
Health & Fitness – Dental Care
Health & Fitness – Deafness
Health & Fitness – Cold & Flu
Health & Fitness – Chronic Pain
Health & Fitness – Syndrome
Health & Fitness – Chronic Fatigue
Health & Fitness – Cholesterol
Health & Fitness – Cancer
Health & Fitness – Brain Tumor
Health & Fitness – Bipolar Disorder
Health & Fitness – Autism/PDD
Health & Fitness – Asthma
Health & Fitness – Arthritis
Health & Fitness – Alternative Medicine
Health & Fitness – Allergies
Health & Fitness – A.D.D.
Health & Fitness – Exercise
Style & Fashion – All
Health & Fitness – Clothing
Health & Fitness – Jewelry
Health & Fitness – Fashion
Health & Fitness – Accessories
Health & Fitness – Body Art
Health & Fitness – Beauty
Family Planning – All
Family Planning – Eldercare
Family Planning – Special Need Kids
Family Planning – Pregnancy
Family Planning – Parenting Teens
Family Planning – Parenting-K-6 Kids
Family Planning – Family Internet
Family Planning – Daycare/Pre-School
Family Planning – Babies & Toddlers
Family Planning – Adoption
Sports – All
Sports – Football
Sports – Fly Fishing
Sports – Figure Skating
Sports – Cricket
Sports – Climbing
Sports – Cheerleading
Sports – Canoeing/Kayaking
Sports – Boxing
Sports – Bodybuilding
Sports – Bicycling
Sports – World Soccer
Sports – Waterski/Wakeboarding
Sports – Walking
Sports – Volleyball
Sports – Tennis
Sports – Table Tennis/Ping Pong
Sports – Swimming
Sports – Surfing/Bodyboarding
Sports – Snowboarding
Sports – Skiing
Sports – Skateboarding
Sports – Scuba Diving
Sports – Saltwater Fishing
Sports – Sailing
Sports – Running/Jogging
Sports – Rugby
Sports – Rodeo
Sports – Pro Ice Hockey
Sports – Pro Basketball
Sports – Power & Motorcycles
Sports – Paintball
Sports – Olympics
Sports – NASCAR Racing
Sports – Mountain Biking
Sports – Martial Arts
Sports – Inline Skating
Sports – Hunting/Shooting
Sports – Horses
Sports – Horse Racing
Sports – Golf
Sports – Game & Fish
Sports – Freshwater Fishing
Sports – Baseball
Sports – Auto Racing
Uncategorized – All
Uncategorized – Blind/no site list
Pets – All
Pets – Veterinary Medicine
Pets – Reptiles
Pets – Large Animals
Pets – Dogs
Pets – Cats
Pets – Birds
Pets – Aquariums
Careers – All
Careers – Career Advice
Careers – U.S. Military
Careers – Telecommuting
Careers – Scholarships
Careers – Nursing
Careers – Resume Writing/Advice
Careers – Job Search
Careers – Job Fairs
Careers – Financial Aid
Careers – College
Careers – Career Planning
Science – All
Science – Weather
Science – Botany
Science – Geography
Science – Space/Astronomy
Science – Physics
Science – Paranormal Phenomena
Science – Geology
Science – Chemistry
Science – Biology
Science – Astrology
Business – All
Business – Metals
Business – Marketing
Business – Logistics
Business – Human Resources
Business – Green Solutions
Business – Government
Business – Forestry
Business – Construction
Business – Business Software
Business – Biotech/Biomedical
Business – Agriculture
Business – Advertising
Society – All
Society – Ethnic Specific
Society – Weddings
Society – Teens
Society – Senior Living
Society – Marriage
Society – Gay Life
Society – Divorce Support
Society – Dating
Home & Garden – All
Home & Garden – Remodeling & Construction
Home & Garden – Landscaping
Home & Garden – Interior Decorating
Home & Garden – Home Theater
Home & Garden – Home Repair
Home & Garden – Gardening
Home & Garden – Environmental Safety
Home & Garden – Entertaining
Home & Garden – Appliances
Automotive – All
Automotive – Wagon
Automotive – Vintage Cars
Automotive – Trucks & Accessories
Automotive – Sedan
Automotive – Road Side Assistance
Automotive – Pickup
Automotive – Performance Vehicles
Automotive – Off-Road Vehicles
Automotive – Motorcycles
Automotive – MiniVan
Automotive – Luxury
Automotive – Hybrid
Automotive – Hatchback
Automotive – Electric Vehicle
Automotive – Diesel
Automotive – Crossover
Automotive – Coupe
Automotive – Convertible
Automotive – Certified Pre-Owned
Automotive – Car Culture
Automotive – Buying/Selling Cars
Automotive – Auto Repair
Automotive – Auto Parts
Personal Finance – All
Personal Finance – Tax Planning
Personal Finance – Stocks
Personal Finance – Retirement Planning
Personal Finance – Options
Personal Finance – Mutual Funds
Personal Finance – Investing
Personal Finance – Insurance
Personal Finance – Hedge Fund
Personal Finance – Financial Planning
Personal Finance – Financial News
Personal Finance – Credit/Debit & Loans
Personal Finance – Beginning Investing
Arts & Entertainment – All
Arts & Entertainment – Television
Arts & Entertainment – Music
Arts & Entertainment – Movies
Arts & Entertainment – Humor
Arts & Entertainment – Fine Art
Arts & Entertainment – Celebrity Fan/Gossip
Arts & Entertainment – Books & Literature
News – All
News – Local News
News – National News
News – International News
Religion & Spirituality – All
Religion & Spirituality – Pagan/Wiccan
Religion & Spirituality – Latter-Day Saints
Religion & Spirituality – Judaism
Religion & Spirituality – Islam
Religion & Spirituality – Hinduism
Religion & Spirituality – Christianity
Religion & Spirituality – Catholicism
Religion & Spirituality – Buddhism
Religion & Spirituality – Atheism/Agnosticism
Religion & Spirituality – Alternative Religions
Education – All
Education – Studying Business
Education – Special Education
Education – Private School
Education – K-6 Educators
Education – Homework/Study Tips
Education – Homeschooling
Education – Graduate School
Education – Language Learning
Education – English as a 2nd Language
Education – Distance Learning
Education – College Life
Education – College Administration
Education – Art History
Education – Adult Education
Education – 7-12 Education

 

Si ya tenemos algunas unidades en el centro publicitario podemos insertar los valores de AdUnitId y ApplicationId en nuestra aplicación. El código ya completo debe verse así:

 

 

Y se ve de esta manera en mi aplicación:

 

Captura del emulador demostrando el espacio publicitario. 

 

Al fin, ganancias

Con sólo agregar el control a la aplicación pronto empezaremos a ver actividad en el centro publicitario (asumiendo que hayan personas descargándola). Las estadísticas incluyen impresiones, clics, y otros criterios de medición. Sin embargo, el número más importante, los ingresos, es presentado justo al entrar al sitio.

Bueno, empiecen de una vez a enseñar anuncios en sus aplicaciones. Esto es especialmente útil cuando es usado en combinación con el modo de prueba que discutimos en el día #23. Así podemos enseñar anuncios en el modo de prueba y eliminarlos en la versión pagada.

Ya sólo quedan tres días en la serie. ¿Cuál es que les ha gustado más?

 

Descargando el código

Este simple ejemplo muestra solamente el AdControl en una página XAML, pero si necesitan ver cómo hacerlo definitivamente les va a servir.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,

31 días de Windows Phone | Día #27: El Marketplace de Windows Phone

December 27th, 2010 No comments

Si estamos desarrollando aplicaciones en Windows Phone con el fin de venderlas al público, entonces hay que familiarizarse con el centro de aplicaciones de Microsoft para esa plataforma, llamado App Hub. Este artículo explica dónde encontrar la guía necesaria y también da varias sugerencias prácticas para asegurarnos de que nuestra aplicación sea aceptada.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #27: Windows Phone Marketplace por Jeff Blankenburg publicado el 27 de octubre del 2010

 

Este artículo es el Día #27 de una serie llamada los 31 días de Windows Phone.

Ayer traté sobre cómo compartir una aplicación con otros desarrolladores de Windows Phone. La de hoy va a ser una discusión sobre cómo compartir la aplicación con el resto del mundo: a través del marketplace.

NOTA EDITORIAL: Marketplace en español sería el mercado o centro comercial, pero hasta dónde he visto, Microsoft ha mantenido el término en inglés como el nombre oficial del sitio.

Hay mucho que cubrir así que empecemos de una vez.

 

1. Lean la documentación

Antes de hacer nada más, por favor lean la documentación sobre cómo presentar aplicaciones en el Marketplace de Windows Phone (también llamado App Hub o centro de aplicaciones).

Es importante poner especial atención a los siguientes tres documentos:

  1. App Hub Developer Registration Walkthrough -  es una excelente guía inicial sobre cómo obtener una cuenta de desarrollador. La cuenta es un requisito para poder presentar aplicaciones al mercado y también para instalar la aplicación en dispositivos reales cuando se la está probando.
  2. Windows Phone 7 Application Submission Walkthrough – esta guía casi hace innecesario el artículo de hoy, ya que explica paso a paso cómo enviar la aplicación y qué recursos van a ocuparse en el proceso. Asegúrense de tener todos los recursos necesarios (íconos, descripciones, archivo XAP, y demás) antes de iniciar el proceso de envío.
  3. Windows Phone 7 Application Certification Requirements – es un documento PDF de 27 páginas que delinea lo que se puede y no se puede hacer en una aplicación de Windows Phone. La mayoría es puro sentido común, pero es mejor verificar que la aplicación llene los requisitos antes de empezar a desarrollarla, al cabo es un documento corto. No hay excusa para enojarse si la aplicación es rechazada por contravenir este documento.

 

2. Sepan cómo será probada la aplicación

Cada sección del PDF es un marco de pruebas para nuestra aplicación. Espero que lo hayan leído por completo. Si no, háganlo ahora. Aquí menciono algunas trabas que pueden encontrar.

Caso de pruebas 4.5 – Windows Phone Marketplace Iconograhy

Eviten usar los íconos antiguos de Windows Mobile. Esta es una plataforma nueva; trátenla como tal.

Caso de pruebas 4.6 – Application Screenshot

Las capturas de pantallas deben abarcar las dimensiones completas de 480 x 800 pixeles, deben ser tomadas directamente del teléfono o emulador y tener las proporciones correctas. No alteren o realcen las imágenes DE NINGUNA MANERA pues tienen que demostrar la aplicación fielmente.

Caso de pruebas 5.1.1 – Compatible con múltiples dispositivos

Cuidado con controles y texto que desaparecen o son difíciles de ver cuando el tema es cambiado a claro. Cubrimos este tema en el día #5: Decoración temática del sistema.

Caso de pruebas 5.2.4 – Uso del botón de retroceso

El comportamiento incorrecto del botón de retroceso es una de las causas más comunes de descalificación. Un error común es salir de la aplicación cuando se presiona el botón en vez de volver a la página anterior o cerrar un menú o cuadro de diálogo.

Caso de pruebas 5.6 – Información de soporte técnico

A partir del 1 de noviembre del 2010 es requerido proveer el número de versión e información de soporte técnico (por ejemplo un URL o casilla de correo electrónico) que sea fácil de encontrar por los usuarios.

Caso de pruebas 6.2 – Distribución de notificaciones

En ese tipo de aplicaciones el usuario debe tener la posibilidad de apagar las notificaciones temporales (toast). Adicionalmente, la primera vez que se usa el método HttpNotificationChannel.BindToShellToast, la aplicación debe solicitar una confirmación del usuario de que desea recibir notificaciones temporales.

Caso de pruebas 6.3 – Aplicaciones tras una pantalla bloqueada

Esto sólo aplica a programas que continúen ejecutando cuando el usuario bloquea la pantalla y no a programas en estado suspendido. Es requisito pedir permiso al usuario para seguir ejecutando detrás de una pantalla bloqueada la primera vez que se usa el ApplicationIdleDetectionMode.

 

Otras sugerencias no relacionadas con pruebas específicas

Aunque no se requiere usar una imagen de fondo Panorama es muy recomendado. Esto da oportunidad a que Microsoft use nuestro panorama en el catálogo del Marketplace mejorando así su visibilidad y resultando en un mayor número de descargas.

Asegúrense de que tanto la descripción de la aplicación como el texto que se use dentro del programa se adapten a la cultura del lenguaje de destino.

Verifiquen que están usando la versión final de las herramientas de desarrollo para Windows Phone. Aplicaciones compiladas con versiones anteriores van a ser rechazadas.

 

3. Los íconos son probablemente lo más importante

Estas son dos capturas de mis programas para Zune. Noten que lo único que veo al buscar aplicaciones para mi teléfono es el nombre, un ícono y el precio. (Hagan clic en ellas para verlas ampliadas.)

 

Aplicaciones en el Marketplace.

Aplicaciones en el Marketplace.

 

Si bien las aplicaciones están ordenadas por volumen de ventas, sus posiciones serían similares si se ordenaran por la calidad del ícono. El ícono provee la famosa primera impresión y si no es buena, no conducirá a una venta.

Inviertan tiempo (o dinero) en crear íconos de calidad que se vean profesionales. Un ícono malo provoca pensamientos como:

  1. ¿Si el ícono es así de feo qué tal será la aplicación?
  2. ¿Si no les importó hacer un buen ícono, les habrá importado la calidad de la aplicación?
  3. Este ícono parece hecho por niños. Tal vez la aplicación fue también hecha por niños.

La gente de Expression ha creado una excelente guía práctica sobre cómo crear íconos para el Marketplace. Pueden encontrarlo acá: http://expression.microsoft.com/es-es/gg317447.aspx?ocid=msexp-fb

 

4. Aumenten su presencia fuera del Marketplace

Bueno, hemos seguido las reglas, creado un súper ícono y nuestra aplicación ha sido aprobada en el centro de aplicaciones. Si deseamos que nuestra empresa sea percibida como profesional es recomendable crear un sitio de web que vaya más allá de la aplicación puramente. Necesita suplir maneras de contactarnos y también promover otras aplicaciones que hayamos creado. Por ejemplo, este es mi sitio:

http://blankensoft.com

Una simple página puede ser suficiente, lo importante es estar presente en la web. El hospedaje hoy en día suele ser increíblemente económico, y un dominio de Internet puede costar unos $10 al año. (Si andan buscando hospedaje de web yo recomiendo CrystalTech. Los he estado usando por casi 10 años.)

Consideren GoDaddy.com para hospedaje y obtención de dominio de Internet baratos. Con $10 al año pueden obtener direcciones de correo electrónico, hospedaje básico y un nombre de dominio.

 

5. Busquen recursos para el diseño

Hay toneladas de sitios dónde encontrar fuentes, íconos, paletas de colores, y así por el estilo para nuestras aplicaciones. He compilado una lista bastante completa en mi sitio, pero busquen otros. La apariencia de la aplicación y de los íconos tendrá una PODEROSA influencia en su éxito. Esta es mi lista de recursos para desarrolladores de Windows Phone:

http://jeffblankenburg.com/wp7

Bueno, eso es todo. Completen su aplicación y preséntenla en el centro de aplicaciones. ¡Es hora de empezar a ganar dinero!

Mañana voy a mostrar otra forma de generar ingresos mediante insertar anuncios en la aplicación. Mientras tanto, lean los documentos que cité al principio.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,

31 días de Windows Phone | Día #26: Compartiendo con otros desarrolladores (gratis)

December 26th, 2010 1 comment

Jeff Blankenburg explica las razones por las que a veces puede ser de provecho el compartir la aplicación con otros desarrolladores y demuestra cómo hacerlo.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #26: Sharing Your App With Other Developers (For Free) por Jeff Blankenburg publicado el 26 de octubre del 2010

 

Este artículo es el Día #26 de una serie llamada los 31 días de Windows Phone.

Ayer escribí sobre cuán fácil es consumir datos de un servicio de web. Hoy voy a hablar sobre cómo se puede compartir una aplicación (especialmente mientras está siendo desarrollada) con otros programadores de Windows Phone.

 

¿Cómo es eso de compartir?

Si han curioseado alrededor de las herramientas de desarrollo para Windows Phone que fueron instaladas, habrán notado un interesante programita llamado “Implementador de aplicaciones.” (MD: Incidentalmente, el nombre en el menú de inicio está en inglés, como se puede ver abajo.) Lo que hace esta aplicación es abrir un archivo XAP e instalarlo, ya sea en el emulador o en un teléfono, en caso de tener uno.

 

Programa "Application Deployment" en el menú de inicio.

 

La razón por la que lo menciono es debido a que es una excelente forma de mostrar a otros en lo que uno está trabajando y obtener su opinión, o tal vez mostrar cierto aspecto o funcionalidad sin que necesariamente ambos tenga que ver la misma pantalla. Lo mejor de todo es que es gratis. Se le podría considerar como una etapa beta de alcance limitado entre quienes tienen nuestra confianza (esto será clave más adelante en el artículo).

 

¿En qué sentido, exactamente, es gratis?

Recuerden que las herramientas son gratis de descargar e instalar. No cuestan un centavo. Pueden descargar el kit de desarrollo aquí. Con estas herramientas y el Implementador de aplicaciones se pueden crear y compartir aplicaciones con otros que también hayan obtenido el kit.

 

¿Cómo funciona el programa?

Más simple no hay. Luego de abrir la aplicación y seleccionar el archivo XAP, se pulsa el botón “Implementar” para enviarlo al emulador (también gratis) o a un teléfono (si se tiene uno). Este es su aspecto:

 

El implementador de aplicaciones listo para instalar una aplicación.

 

¿Dónde encuentro mi archivo XAP?

Luego de generar y probar la aplicación que estamos desarrollando, la encontraremos en la carpeta Bin\Debug del proyecto. Este es un ejemplo de un proyecto:

 

El XAP se encuentra en la carpeta Bin\Debug o Bin\Release del proyecto.

 

La pueden compartir, pero tengan cuidado

Recuerden que para que otros puedan usar la aplicación (sin tener que comprarla en el Marketplace) hay que darles el archivo XAP para que lo instalen usando el implementador de aplicaciones. Esto significa que les estaremos dando el XAP que eventualmente vamos a colocar y tratar de vender en el App Hub, o centro de aplicaciones. NO le den el archivo a personas en quienes no tengan plena confianza. Qué mal sería verse envuelto en una polémica sobre quién creó la aplicación o porque alguien la envió primero al Marketplace.

Este fue un artículo corto, pero es un tema importante. Es una gran ventaja tener amigos que nos ayuden a probar la aplicación y asegurarnos que es atractiva, o depurar errores que no hayamos anticipado.

Mañana vamos a discutir a fondo el marketplace o mercado de aplicaciones, qué se requiere para poder colocar allí una aplicación y algunos de los reveses que podemos encontrar de camino. Nos vemos entonces.

 

Jeff Blankenburg

 

Categories: WP7 Tags: , ,