Categoría: Trucos

Formularios interactivos dentro de un ListView

En algunas aplicaciones de la Tienda Windows vemos una colección de elementos dentro de un ListView en las que uno de ellos contiene un formulario con el que podemos interactuar, por ejemplo en esta aplicación, que no sólo tiene uno sino dos:
booking

Vamos a ver cómo podemos crear un interfaz parecido en nuestras aplicaciones HTML5/JavaScript de la Tienda Windows.

Plantilla condicional

Podéis ver en el artículo sobre diseño de listas heterogéneas cómo escribir diferentes plantillas y cargarlas condicionalmente. En nuestro caso vamos a crear una plantilla adicional para el primer elemento de la lista e insertaremos un elemento select, sólo a efectos de demostrar la técnica, sirve con cualquier cosa que tengamos dentro del elemento.

Empezamos con la plantilla de Aplicación de Cuadrícula (Grid App), que ya tiene datos y un control ListView para poder realizar la demostración. Una vez creada, en la página groupedItems.html copiamos la plantilla itemTemplate justo debajo y la modificamos un poco, añadiendo la etiqueta select con tres opciones:

<div class="interactiveitemtemplate itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class=" item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <!--<h4 class="item-title" data-win-bind="textContent: title"></h4>-->
            <select>
                <option>Opt 1</option>
                <option>Opt 2</option>
                <option>Opt 3</option>
            </select>
        </div>
    </div>
</div>

Tras añadir la plantilla adicional, podemos modificar la función ready del código de groupedItems.js para que se ejecute la nueva plantilla al crear el primer elemento del ListView (tal como comento en el artículo que he citado antes) y la plantilla general para el resto, sustituyendo el itemTemplate por una función que ejecuta una plantilla u otra según el índice:

var standardTemplate = element.querySelector(".itemtemplate").winControl;
var interactiveTemplate = element.querySelector(".interactiveitemtemplate").winControl;
listView.itemTemplate = function (itemPromise) {
    return itemPromise.then(function (item) {
        var template;
        if (item.index==0) {
            template = interactiveTemplate;
        }
        else {
            template = standardTemplate;
        }
        return template.render(item.data);
    });
};

El modo interactivo: win-interactive

Si ejecutamos el código anterior veremos el primer elemento con la plantilla que hemos aplicado pero no podremos interactuar con el selector. El comportamiento por defecto de los elementos de un ListView es que podamos pulsar sobre el elemento para realizar una navegación. Como nosotros queremos interactuar directamente con el contenido del elemento necesitamos desactivar ese comportamiento por defecto.

En este caso el truco es muy sencillo: basta con añadir la clase win-interactive al elemento que queremos activar, WinJS se encargará del resto de la magia:

<div class="interactiveitemtemplate itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item win-interactive">
...

A partir de ahora todo el recuadro se volverá interactivo y dejará de responder como un elemento de ListView. Si queremos que el elemento contenedor siga actuando a la pulsación podemos poner la clase win-interactive sólo en el elemento select … o en el que queramos nosotros.

En otro post ya os contaré más trucos para crear efectos parecidos, pero sin un control ListView.

Anuncios

Cómo usar bien la fórmula calc en CSS3 y la importancia del espacio

Hoy un truco rápido que me ha hecho perder un buen rato en una app de Windows 8, suerte que se me ha ocurrido buscar en MSDN.

A veces vamos a necesitar que un elemento nos ocupe un porcentaje de la página/aplicación, pero dejando libre un cierto margen de pixels.

Hay muchas formas de hacerlo, pero en el caso que tenía hoy necesitaba asignar un margen de 20px y un tamaño del elemento al 100% para que cubriera todo el espacio restante del contenedor.
Las propiedades de estilo margin y padding no se llevan demasiado bien con asignaciones a height y width en formato de porcentaje, el 100% calculado seguirá siendo el total del espacio del contenedor sin el margen. Así que necesitamos realizar un cálculo entre el valor del porcentaje y la cantidad de pixels que estamos utilizando en los margenes. Para esto no hace falta código JavaScript, pues tenemos la función calc que permite hacer exactamente eso en CSS, pero tenemos que ir con mucho cuidado al escribirla, busca las diferencias:

Código erróneo:

.homepage section[role=main] {
    margin-top:20px;
    height:calc(100%-20px);
}

Código correcto:

.homepage section[role=main] {
    margin-top:20px;
    height:calc(100% - 20px);
}

La diferencia es sutil pero importante: entre el 100%, 20px y el símbolo de restar, en un caso no hay espacios y en el código que funciona sí. Es muy fácil olvidar los espacios y si no los ponemos no pasará nada, nada de nada, pues, tal como dicta la norma, un atributo css inválido es ignorado.

Creación de nuestros propios snippets en dos o tres clicks

Los snippets de Visual Studio son una herramienta estupenda que nos ahorra muchísimo tiempo a la hora de escribir código. Los snippets que vienen predefinidos en VS.Net nos permiten escribir mucho código escribiendo las dos primeras letras y a golpe de tecla Tab crear propiedades, bucles y un sinfín de llamadas.

Lo que pasa con este tipo de herramientas es que tarde o temprano necesitas más, por eso te puedes crear tus propios snippets con un poco de XML, pero lo que quiero yo es que sea rápido de hacer, para esto tenemos una extensión de Visual Studio llamada Snippet Designer. Os cuento en 2 pasos cómo instalarla y en 4 más cómo crear y utilizar el snippet, no más de 5 minutos para ahorrarnos tecleos y ahorrarle un montón de dinero a nuestro jefe en horas de picar código 🙂

  1. Lo primero, instalar el Snippet Designer. Abrimos Tools>Extensions and Updates:

    createSnippet01

    Y buscamos online el Snippet Designer

    createSnippet02

  2. Una vez instalado ya podemos seleccionar el trozo de código del que queremos crear el snippet y seleccionar la opción Export as Snippet:

    createSnippet03

  3. Entonces se abrirá un editor que nos permitirá definir el snippet de forma visual: qué claves será posible cambiar desde el snippet (botón derecho>Make Replacement), cómo se llamará ese elemento, qué valor tiene por defecto, de que tipo es, etc…

    createSnippet05

    Y una ventana de propiedades donde podremos definir las características del snippet, una muy útil es el Shortcut:

    createSnippet07

  4. Una vez lo tenemos guardado (se guarda en My Snippets), reniciamos el VS.Net y ya podemos utilizar nuestro nuevo snippet, nos bastará escribir el shortcut:

    createSnippet08

    Y pulsar el tabulador para que el snippet se expanda y nos permita escribir en él:

    createSnippet09

Que lo disfrutéis!

Filtros REST $filter con texto no ASCII desde JavaScript

Los servicios OData son muy cómodos pues se pueden consumir desde casi cualquier parte y tecnología. Consumir estos datos desde cualquier aplicación HTML/JavaScript, incluso desde las aplicaciones de Windows 8, es muy sencillo pues nos basta con utilizar las llamadas HTTP de toda la vida para interactuar con el servicio.

Desde las consultas REST podemos filtrar utilizando el parámetro $filter en la url, así podemos consultar el catálogo de películas de Netflix y filtrar para que sólo nos dé las series:
http://odata.netflix.com/v2/Catalog/Titles?$filter=Type eq ‘Series’

En la lengua de Shakespeare no tendremos ningún problema, pero si queremos filtrar con caracteres no ASCII tendremos comportamientos que no serán los que nos esperábamos. Por ejemplo, filtramos por el nombre José dentro del mismo servicio:
http://odata.netflix.com/v2/Catalog/Titles?$filter=substringof(‘José’,Name)
Y obtenemos resultados como este, donde el nombre José no aparece:
netflix_nonasciifilter
De hecho, dependiendo del servicio y desde dónde lo llamemos obtendremos resultados diferentes, pues la interpretación de los caracteres que recibe se puede hacer de varias formas.

La solución está en codificar el filtro dentro de la url, para codificar el texto la función adecuada en JavaScript es encodeURIComponent, pues la función escape produce también resultados no deseados. Podéis probar los ejemplos en jsfiddle, aunque al ser JSONP también produce efectos diferentes según como codifiquemos; podemos comparar el jsfiddle con el resultado de consultar directamente las urls:

En Windows 8 tendremos el mismo problema y lo resolveremos igual, utilizando la función encodeURIComponent:

var query = "José";
var encoded = encodeURIComponent(query);
WinJS.xhr({
    url: "http://odata.netflix.com/v2/Catalog/Titles?$filter=substringof('" +
        encoded + "',Name)&$format=json"
}).then(function (xhr) {
    var result = JSON.parse(xhr.responseText);
    var results = result.d.results;
    // a partir de aquí utilizamos los datos
    var body=document.querySelector("body");
    results.forEach(function (r) {
        var div=document.createElement("div");
        div.textContent=r.Name;
        body.appendChild(div);
    });
});

Antes de acabar, recordad que para enviar la consulta también deberíamos comprobar si el texto a buscar contiene el carácter de comilla simple (‘), pues deberemos sustituirlo por la misma comilla escrita dos veces seguidas (”).
Solucionado con un poco de regex:

query=query.replace(/'/g, "''")

Micrófono en HP TouchSmart con Windows 8

En la oficina tenemos unos cuantos HP TouchSmart 300, que a pesar de no estar pensados para Windows 8 y tener sólo dos puntos de contacto, dan bastante juego a la hora de probar las aplicaciones en modo táctil, tanto de Windows 8 como de Windows Phone.

De algunos dispositivos no es fácil encontrar los drivers y hay que descargarlos de aquí y de allá, el que me ha costado más ha sido el driver del micrófono, así que aquí va una pequeña ayudita para los que os hayáis encontrado con el mismo problema:

  1. Hay que descargar el driver actualizado de SoundMAX, pues el Windows Update no lo reconoce directamente. Para ello:
  2. El driver viene dentro de un archivo .cab, así que lo tendremos que descomprimir para poder instalarlo en Windows 8. Con el mismo explorador de Windows podemos abrirlo, o con alguna aplicación para descomprimir como WinRAR.
  3. Una vez descomprimido, buscamos el adihdaud.info, pulsamos con botón derecho->instalar

    instalar soundmax

  4. Para comprobar que tenemos instalado el “Microphone Array”, pulsamos Windows+X y abrimos el administrador de dispositivos:

    microfono instalado

Y listos, ya podemos utilizar nuestras aplicaciones de audio favoritas (y también Skype y cualquier otra app en condiciones).

Error 401 al actualizar datos en WCF Data Services sobre Azure

401 Unauthorized
Cuando necesitamos acceder a los datos de una manera sencilla desde todas nuestras aplicaciones y posibilitar su uso desde casi cualquier tecnología o dispositivo, una apuesta bastante segura es crear un servicio REST de acceso a los datos.

Para crear un servicio REST de forma muy rápida, Microsoft nos proporciona una herramienta casi mágica llamada WCF Data Services. Esta librería, junto con una base de datos en SQL Azure, nos creará automáticamente un servicio REST en base a un modelo de entidades (Entity Framework, Linq to SQL, etc..), que luego podremos configurar para establecer permisos con unas pocas líneas.

Podéis encontrar multitud de artículos sobre el tema, como por ejemplo este tutorial rápido en MSDN.

Artículo recomendado: Guidance for OData in Windows Azure

Cuando nos funcione el servicio en local, nuestra alma geek nos pedirá probar en Azure incluso antes de configurar la autentificación. Si ese es el caso y la aplicación, además de leer y crear datos, también actualiza y borra, recibiremos un error 401 al realizar estas últimas operaciones.
Esto es así porque las operaciones de lectura y creación se realizan con los verbos GET y POST de HTTP, pero la actualización y borrado de datos se realizan mediante los verbos PUT y DELETE, que en IIS están deshabilitados en el caso de la autentificación anónima.
Sin que sirva de precedente, aquí tenéis un truco rápido para evitar esta situación, pero recordad que debe ser algo temporal y debéis evitar que se puedan guardar, modificar y borrar datos con una conexión anónima!
Es suficiente deshabilitar cualquier tipo de autentificación para evitar el problema. En el web.config de nuestra aplicación añadimos esta entrada en la sección system.web:

<system.web>
   <authentication mode="None" />
</system.web>

Y ya nos debería funcionar, pero recordad habilitar la autentificación de nuevo y establecer mecanismos de seguridad.

Si vuestras necesidades de datos son sencillas y queréis que sea lo más automático y seguro sin esfuerzo, también tenéis los Servicios móviles de Azure

Protección infantil en Windows 8 dentro de un dominio

El término BYOD (Bring Your Own Device) está cada vez más de moda. Estos últimos años se ha generalizado debido a la gran cantidad de dispositivos que entran en nuestros hogares y que acabamos llevando al trabajo, aunque el termino también se refiere a los trabajadores que prefieren comprarse ellos mismos el portátil en lugar de utilizar uno proporcionado por la empresa, probablemente más antiguo y menos potente.

Para variar un poco, yo he hecho lo contrario y tengo un dispositivo del trabajo en casa. Lo que se llama ahora BYOD inverso, aunque existe hace muchos más años que el BYOD.

Windows 8 con múltiples usuarios

Una de las ventajas que tiene Windows 8 sobre otros sistemas que funcionan sobre tabletas es su capacidad de mantener múltiples cuentas de usuario. Esta funcionalidad nos permite por una parte mejorar la seguridad y por otra evitar tener en nuestra cuenta todas las aplicaciones de Hello Kitty™, Pocoyo™, Disney™ y similares para que jueguen nuestros niños; una pantalla táctil en casa es demasiado atractiva como para poder acapararla el 100% del tiempo 🙂

Windows 8 Multi-usuario

Protección Infantil integrada en Windows 8

Tener cuentas separadas para nuestros hijos tiene otras ventajas añadidas: podremos filtrar qué webs pueden abrir, qué aplicaciones pueden utilizar, qué apps pueden descargar del Windows Store, tanto de forma manual mediante listas blancas y negras como de forma automatizada con filtros por edades. En Windows 8 ya está integrada la protección infantil como parte del sistema operativo, mientras que en versiones anteriores la podemos descargar de forma gratuita con el paquete Windows Live Essentials.
Para utilizar la protección infantil en Windows 8 basta marcar la casilla de seguridad cuando estemos añadiendo una cuenta de usuario, indicando que el nuevo usuario necesita el filtro de protección infantil:

Agregar un usuario infantil en Windows 8

No voy a extenderme demasiado sobre el tema, pues tenéis toda la información y el paso a paso en el apartado sobre seguridad familiar de la web de Windows.

Protección infantil en dominios de Windows

Si utilizáis equipos que están dentro de un dominio no os aparecerá la casilla para marcar a un usuario como menor. Esto también nos ocurrirá si somos un poco geeks y tenemos nuestro propio dominio Home Server en casa.

Cuando un equipo está dentro de un dominio de Windows existe una política que deshabilita por defecto el filtro familiar. Tiene cierto sentido, pues no suele ser necesario tener filtros para niños en una empresa y evita problemas innecesarios a los administradores de sistemas.
Si queremos añadir usuarios infantiles en un equipo de un dominio de Windows tendremos que habilitar la política que nos permite añadir los filtros familiares de nuevo, siguiendo estos pasos desde una cuenta del dominio con privilegios de administrador local de la máquina:

  1. Abrimos el editor de directivas de grupo local:

    editar directiva de grupo

  2. Habilitamos la política de Protección Infantil en Dominio. La encontraremos en Configuración del equipo > Plantillas Administrativas > Componentes de Windows > Protección Infantil:

    ProteccionInfantilDominio

  3. Forzamos el refresco de las políticas de grupo desde la línea de comando; hace falta que el equipo se comunique con el controlador de dominio para activar la directiva. Abrimos un cmd como administrador y ejecutamos la siguiente línea:
    gpupdate /force
  4. Por último, debemos reiniciar el equipo para que los cambios sean efectivos. Tras el reinicio ya podemos añadir un usuario y marcar la casilla de activación de la protección infantil.

Configurar los permisos de la cuenta infantil

Una vez creada la cuenta infantil, debemos recordar que hay que configurar las restricciones que queremos en la cuenta.

La configuración por defecto viene sin filtros ni límites ni restricciones.

protección infantil usuarios

En la configuración del usuario podremos editar todos los límites y restricciones de todo lo que puede hacer el menor en el equipo. configuración de usuario infantil

Como primer paso os recomiendo restringir los sitios web mediante el filtro automático para menores, más adelante podemos ir añadiendo algunos sitios a la listas blancas y negras para refinar el acceso: restricciones web

Y esto es todo por hoy 😉
 

Salir de la vista acoplada por código en Windows 8

La vista acoplada (o ajustada, o Snapped View) es una de las formas que tiene Windows 8 para que nuestras aplicaciones estén presentes el mayor tiempo posible. Es una vista obligatoria y tenemos que diseñarla para que nuestra aplicación muestre algo interesante en ese modo. Al tener unas dimensiones reducidas no podremos tener la funcionalidad completa de la aplicación y en algunas ocasiones necesitaremos volver a pasar a pantalla completa.

Podemos indicar al usuario la necesidad de volver a pantalla completa/rellena dentro de la misma vista:

Snapped View

Y además podemos llamar a un método que intentará desajustar la pantalla de nuestra aplicación y ajustar la que haya en primer plano:

Windows.UI.ViewManagement.ApplicationView.tryUnsnap();

Podéis consultar el API del método TryUnsnap en MSDN.

¿Dónde está el menú de la Tienda Windows en Visual Studio 2012?

Cuando nos pasamos a Visual Studio 2012 después de utilizar la versión Express para desarrollar aplicaciones de Windows 8, no encontraremos el menú de la tienda Windows en el mismo lugar. Está un escondido dentro del menú de proyecto, pero seguimos teniendo toda la funcionalidad:
Store Menu

¿Cómo encontrar más aplicaciones en la tienda Windows 8?

Ayer estaba ayudando al alumnado del instituto de FP Sant Josep Obrer con las aplicaciones de Windows 8 y Windows Phone 8 que han estado haciendo estos días. Ha sido un trabajo intenso, pues me han tenido que aguantar tres tardes enteras donde les he explicado las características básicas de Windows 8 y su hermano pequeño Windows Phone 8.
El caso es que nos encontramos con el siguiente problema: en algunos equipos no se veían las aplicaciones que ya les habían aprobado en la tienda Windows.
Uno de los alumnos encontró la solución: configurar la tienda de aplicaciones para que vea las aplicaciones de todos los países y en todos los idiomas:

¿Cómo encontrar más aplicaciones en la tienda Windows 8?
Esto me lleva a una recomendación general para cuando publiquemos apps:

Si queremos que nuestra aplicación llegue a mucha gente debemos traducir la aplicación y publicarla en todos los mercados.