Archivo del Autor: gbellmann

Conectando nuestro sitio web con una aplicación del Windows Store

Una buena forma de conseguir gente que conozca nuestra aplicación es a través del sitio web de la aplicación.

Una forma es bombardear al usuario con banners indicando que tenemos una aplicación, pero una mejor manera es aprovechar la integración de Internet Explorer 10, en su versión Modern UI.

Para esto, lo único que necesitamos es agregar unas pocas líneas de meta en el head de nuestra página, que harán que, dependiendo de si el usuario ya tiene o no nuestra aplicación instalada, lo lleve a la aplicación o a descargarla del Windows Store.

Usando como ejemplo a Cut the Rope (si no lo probaron, pueden jugarlo incluso desde el browser en http://www.cuttherope.ie), si abrimos la página desde IE 10 Modern UI, vamos a tener las siguientes opciones:

Bajar la aplicación

Si no poseemos la aplicación instalada, tendremos la opción de bajarla, lo que nos llevará directo a la vista de la aplicación en el Windows Store para poder bajarla.

Esta opción es la que se muestra en la siguiente figura:

IC591657

Ir a la aplicación

Si ya tenemos instalada la aplicación, se nos dará la opción de ir a la misma. De esta forma el usuario podrá aprovechar las ventajas de estar corriendo dentro de la aplicación, con toda la integración con el Sistema Operativo.

Esta opción es la que se muestra en la siguiente figura:

IC591658

Y para hacerlo, ¿qué necesitamos?

Lo que necesitamos es agregar al menos lo siguiente:

<meta name="msApplication-ID" content="App"/>
<meta name="msApplication-PackageFamilyName" content="ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj"/>

Con estas dos simples líneas, Internet Explorer logra identificar si la aplicación ya está instalada en el equipo del usuario, y, si no lo está, lo lleva a la descripción de la misma en el Windows Store.

Pero, ¿de dónde saco esos valores?

La respuesta es simple, estos valores están en el manifest de nuestra aplicación:

  • El Package family name es la última propiedad de la solapa Package (la última).
  • El otro dato, el ID, no está visible en la pantalla amigable que nos muestra Visual Studio, pero siempre podemos visualizar el XML del manifest haciendo click derecho y eligiendo la opción View Code. El valor que necesitamos está dentro del elemento Applications, y es el atributo Id del elemento Application.

<Applications> <Application Id="App" StartPage="default.html">

</Application> </Applications>

Opciones disponibles

En la tabla a continuación se muestran todas las opciones que tenemos disponibles para manejar la relación entre IE10 y nuestra aplicación:

Nombre de la propiedad Contenido
msApplication-ID Obligatorio. ID de la aplicación, relativo al paquete del manifest. Se usa para vincular el sitio a la aplicación
msApplication-PackageFamilyName Obligatorio. Nombre de la familia de paquete de la aplicación, creado por Visual Studio cuando se publica la aplicación. Se usa para vincularse con el Store.
msApplication-Arguments Opcional. Cadena de caracteres de argumento. Por defecto, Internet Explorer envía la URL de la página web, pero podemos usarla para pasar una cadena relevante al contexto.
msApplication-MinVersion Opcional. Fuerza una versión mínima requerida de la aplicación instalada. Si el usuario intenta pasar desde la web a una aplicación desactualizada, primero es llevado al Windows Store para actualizarla.
msApplication-OptOut Opcional. Permite a la página optar por la quita toda o parte de la funcionalidad:

  • ”install” previene ofrecer al usuario el instalar la aplicación si no la tiene.
  • ”switch” previene ofrecer al usuario pasar a la aplicación ya instalada.
  • ”both” previene ambas.

Espero les sea útil y comiencen a ganar usuarios a través de su sitio web Winking smile

Happy coding!

@gjbellmann

Usando la cámara en una aplicación Windows 8

La manera más sencilla de capturar fotos o video desde la cámara es usar la API de CameraCaptureUI. Esta API nos muestra el diálogo de pantalla completa de captura, y nos permite capturar fotos y video con un simple llamado a un método.

Si lo que quisiéramos es implementar nuestra propia interfaz, deberíamos usar MediaCapture.

Para este ejemplo vamos a usar HTML y JavaScript para capturar una foto desde nuestra aplicación. Para poder seguirlo deben tener instalado Windows 8 y Visual Studio Express 2012 for Windows 8 (o superior).

Una vez abierto Visual Studio, creamos un nuevo proyecto, eligiendo como lenguaje JavaScript y como template una aplicación en blanco.

image

Una vez dentro de nuestro proyecto, abrimos default.html y reemplazamos dentro del body el:

<p>Content goes here</p>

por:

<input type="button" onclick="tomarFoto()" value="Tomar una foto" /><br />
<span id="mensaje"></span>

Lo que hicimos fue agregar un input de tipo botón que será el encargado de abrir el diálogo de manejo de la cámara, y un span que mostrará un mensaje indicando si se tomó o no la foto.

Luego vamos a default.js (ubicado dentro de la carpeta js) y agregamos al final la siguiente función, que será la encargada de llamar al diálogo y actualizar nuestro mensaje de acuerdo a lo sucedido:

function tomarFoto() {
    var captureUI = new Windows.Media.Capture.CameraCaptureUI();
    captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
        if (capturedItem) {
            document.getElementById("mensaje").innerHTML = "Se tomó una foto :)";
        } else {
            document.getElementById("mensaje").innerHTML = "No se tomó una foto :(";
        }
    });
}

Lo único que nos falta es declarar que nuestra aplicación utiliza la cámara para poder utilizarla. Para ello vamos al manifiesto de nuestra aplicación (package.appxmanifest), y tildamos webcam dentro de la solapa Capabilities.

image

Con esto ya tendremos nuestra primera aplicación que hace uso de la cámara para capturar una imagen.

Al correrla vemos nuestro botón (si, necesita de un buen diseñador antes de subirla al store Winking smile):

screenshot_11262012_215851

Al tocar el botón por primera vez nos solicita permiso para usar la cámara:

screenshot_11262012_220008

Y si le damos permiso, veremos nuestra propia cámara para tomar una foto!

screenshot_11262012_220114

Tocando en la pantalla sacaremos nuestra foto, la cual podremos recortar o rehacer, si quisiéramos:

screenshot_11262012_220150

Y luego de darle OK, volvemos a nuestra aplicación, con el mensaje indicando que la foto fue tomada:

screenshot_11262012_220155

Espero que el ejemplo les sea útil.

Happy coding!

@gjbellmann

Recomendaciones para publicar aplicaciones en el Windows Store (y no perder tiempo recertificando)

Después de haber publicado 3 aplicaciones, y tener otras 2 en proceso de certificación, me parece que es bueno compartir un poco de la experiencia del proceso de certificación de una aplicación en el Windows Store.

Esto no es un proceso para nada sencillo, y, según mi experiencia, el proceso completo demora entre 5 y 7 días. Por lo que es importante tener en cuenta estos simples puntos así no estamos esperando todo ese tiempo para hacer una recertificación 😉

  1. Antes de subir nuestro paquete debemos correr el Kit de Certificación, y corregir los errores que nos marque.
  2. La categoría y subcategoría (en el detalle de venta) deben ser acordes al contenido de nuestra aplicación.
  3. La descripción debe ser detallada y en el idioma que declaramos en el paquete.
  4. Debemos cargar siempre una página de política de privacidad.

Espero que les sirvan los tips y si tienen alguno agréguenlo en los comentarios.

Happy coding!

@gjbellmann

P.D.: les dejo los links a las aplicaciones por si quieren probarlas:

Noticias MSPs Argentina: http://apps.microsoft.com/webpdp/app/noticias-msps-argentina/57a69155-603a-43a8-b1e7-07685311dff6

F1 World News Reader: http://apps.microsoft.com/webpdp/app/f1-world-news-reader/a92795f2-379e-47af-8191-969dc3c13b8e

Imagine Cup News Reader: http://apps.microsoft.com/webpdp/app/imagine-cup-news-reader/ab3368bd-0fcc-4ce6-bca9-fcab6f4fbb77

How-to: Cambiar el color del item seleccionado en un ListView en Windows 8 con HTML/JS

En una aplicación Windows 8, el color por defecto de un item seleccionado en un ListView es violeta (su código RGB es: 87, 41, 193), que para muchos casos puede no ser acorde a la paleta de colores de nuestra aplicación.

Si miramos el CSS del tema de nuestra app (normalmente ui-dark.css) vamos a notar que este estilo está aplicado como:

::selection {
    background-color: rgb(87, 41, 193);
    color: rgb(255, 255, 255);
}

Pero reescribir estas mismas líneas dentro del CSS de nuestra vista (cambiando los colores, obviamente) no va a sobreescribir el estilo.

Lo que tenemos que hacer es agregar:

.miPagina .miLista .win-container .win-selectionbackground {
    background-color: rgb(62, 66, 239);
    color: rgb(255, 255, 255);
}

Espero que les sirva.

Happy coding!

@gjbellmann

Atajos de teclado en Windows 8

En el caso que tengan instalado Windows 8 y no tengan un dispositivo touch (como yo), les paso una lista de los atajos de teclado para que puedan acceder a varias de las funciones.

Los atajos se activan utilizando la tecla de Windows junto con la tecla mencionada en el listado:

B – Mover el foco a la bandeja de notificaciones
C – Mostrar el menú de «Charms»
D – Mostrar el escritorio
E – Lanzar el Explorador de Windows
F – Mostrar el buscador Metro
G – Rotar entre Gadgets del escritorio
H – Mostrar el panel de «Share» metro
I – Mostrar el panel de configuración metro
J – Cambia el foco entre aplicaciones metro en modo «snap»
K – Mostrar el panel de dispositivos
L – Bloquear el equipo
M – Minimizar todas las ventanas en el escritorio
O – Bloquear la orientación del dispositivo
P – Elejir entre las pantallas disponibles (Proyector)
Q – Mostrar la pantalla de búsqueda metro
R – Mostrar el diálogo Ejecutar
T – Rotar entre los íconos de la barra de tareas
U – Mostrar el panel de accesibilidad
V – Rotar entre las notificaciones «toast»
W – Mostrar el panel metro de búsqueda de configuración
X – Mostrar los comandos de «Power user» o el Centro de movilidad
Z – Mostrar el «App Bar»
1 to 9 – Mostrar/Lanzar aplicación de la barra de tareas
Av Pág/Re Pág – Mover los «tiles» a la izquierda/derecha
Tab – Cambiar entre aplicaciones
, (coma) – Aero Peek (en modo desktop)
. (punto) – Hacer Snap de una aplicación Metro en el lado derecho de la pantalla
Shift . (punto) – Hacer Snap de una aplicación Metro en el lado izquierdo de la pantalla
Espacio – Cambiar el lenguaje de entrada y distribución de teclado
Enter – Lanzar Narrator
Flechas – Aero Snap (en modo desktop)

Saludos!

La Plata (Argentina) – Desarrollando para dispositivos móviles y táctiles en plataforma Microsoft

Evento en la ciudad de La Plata:

La creciente variedad de dispositivos móviles y táctiles plantea nuevos desafíos a los desarrolladores de software y crea oportunidades para la aparición de nuevos modelos de negocio en el ambiente Microsoft. En esta sesión hablaremos de esas oportunidades y también mostraremos y comentaremos ejemplos de código para Windows Phone y en HTML5.

Fecha: Miércoles, 30 de Mayo de 2012.

Lugar: Aula Magna UTN Facultad Regional La Plata, Av.60 esq 124 s/n, La Plata, Pcia de Buenos Aires, Argentina.

Oradores: Ignacio Raffa (@raffanacho) y Nicolás Rodriguez Vilela (@narvilela)

Horario: 18:30 a 20:30 hs.

Agenda:

Windows Phone como oportunidad de negocios

Introducción al dispositivo. Qué es Windows Phone. Introducción a la plataforma de desarrollo. Cómo se Desarrolla. Cuanto tiempo demora. Modelos de obtención de ingresos. Cómo Subir y Certificar en Marketplace. Cuán difícil es subir una aplicación. Conclusiones, relato de la experiencia obtenida luego de subir 18 aplicaciones y más de un año de trabajo en la plataforma.

Introducción al desarrollo de aplicaciones “Metro” para Windows Phone

Ejemplos de código. Recomendaciones. Buenas prácticas.

Introducción al desarrollo con HTML5

Ejemplos de código. Buenas prácticas.

INSCRIBITE AQUÍ (*) Evento gratuito, ignore la pregunta sobre forma de pago. Vacantes limitadas. Inscripción previa obligatoria.

Se busca MSP en Argentina y Uruguay!

En Argentina y Uruguay estamos buscando estudiantes para que se sumen al equipo de Microsoft Student Partners.

Los requisitos para convertirte en Microsoft Student Partner son:

  • Ser altamente apasionado por la tecnología.
  • Ser entusiasta y tener gusto por compartir tus conocimientos.
  • Ser estudiante de tiempo completo.

Si cumples con todos los requisitos envía la siguiente información a miguel.saez@microsoft.com

  • Curriculum Vitae
  • Video describiendo el por qué tenés que ser parte de este programa. (Duración no más de 5 minutos).
  • Importante: Si eres uno de los candidatos seleccionados deberás atender a una entrevista online de 20-30 minutos, por lo que es fundamental que nos envíes todos tus datos de contacto.

Cómo crear nuestro propio ringtone para Windows Phone 7

A partir de Mango se pueden usar tonos (ringtones) personalizados, pero no se puede usar cualquier canción de nuestra colección, entonces, ¿cómo los creamos?
Las características que debe cumplir una canción para ser usada como tono son:

  • Estar en formato MP3 o WMA.
  • Tener menos de 40 segundos.
  • Pesar menos de 1 MB.
  • No estar protegido con DRM (Digital Rights Management).

Sigue leyendo

Por la tarde: Categoría Imagine Cup y premiación

Luego del almuerzo arrancó la competencia de la categoría Imagine Cup, contando con 6 equipos que debían exponer sus proyectos frente al jurado (del cual tuve el honor de formar parte):

  • WP7DH / PRON
  • C.A.P.A. – Inseguridad al volante
  • TeamWork
  • Take your way
  • Time donation
  • Spotter

Los cuales fueron evaluados sobre los siguientes aspectos:

  • Explicación y resolución de la problemática
  • Relevancia de la solución a nivel social
  • Originalidad / diseño e innovación de la plataforma
  • Descripción de la solución técnica
  • Viabilidad de negocio
  • Calidad de la presentación

Sigue leyendo

Arrancó la final de Gaming.NET!!

Al igual que todos los años, arrancó la final de Gaming.NET en la Universidad Nacional de La Punta, en la provincia de San Luis.IMG_5549

Sigue leyendo