Metro: la interfaz de usuario más avanzada

 

Con la comercialización mundial de los teléfonos Windows Phone, el público tiene la ocasión de echar un vistazo a Metro, un llamativo interfaz desarrollado a lo largo de los últimos 6 años por los de Redmon y que sienta las bases de lo que será Windows 8.

Pero Metro no solo es el nombre de la interfaz, es además un lenguaje de diseño que establece prioridad sobre el contenido, no sobre el aspecto como han venido haciendo Google, Apple y en general cada fabricante de sistemas operativos para dispositivos móviles: todos haciendo lo mismo, hasta ahora. Este objetivo lo alcanza mediante un hábil uso de la tipografía, el color y la imagen como elemento de primer orden y que elimina la necesidad de un interfaz (iconos de casitas y demás monigotes): el contenido es el interfaz.

Microsoft empleó este tipo de aproximación (tipografías e imagen como interfaz) en sus reproductores Zune y tras pulirla, la consideró perfecta para sus actuales sistemas operativos de móvil (WP7), videoconsola (Xbox) y entretenimiento (Media Center), así como adaptable a escritorio y tablet en el futuro inmediato (Windows 8). Pero también podemos comenzar a encontrar adaptaciones en algunas de sus webs, como en http://support.microsoft.com todo es susceptible de adaptar Metro.

Podríamos hablar de hubs, tiles, panorama y demás jerga de elementos de diseño del sistema, pero al ser un sistema tan moderno y debido al salto conceptual que supone, es mucho mejor verlo en directo o probar alguna demo:
http://www.youtube.com/user/windowsphone
Baste decir que se prima el uso y la claridad de la información sobre los elementos de diseño, o como se suele decir en uno de los principios universales de diseño: se prima la función sobre la forma. Y eso lo convierte en una experiencia más natural y que requiere menos adaptación de los usuarios, algo de agradecer en estos tiempos de variedad de sistemas operativos.

Metro es por tanto la primera apuesta que existe para homogeneizar los interfaces de escritorio, tablet y móvil, videoconsolas y reproductores multimedia, por delante (muy por delante al parecer) de Apple y Google.
Así que no solo tenemos una nueva interfaz molona para los usuarios, o un SDK para que los desarrolladores programemos tanto aplicaciones web como de escritorio, sino que tenemos todo un lenguaje de diseño que va abarcar todos los productos de Microsoft, ahora y en el futuro.

Supermenús: Ribbon

Cuando presentamos algún producto de la familia Office a los clientes, nos encontramos con alguna que otra duda de adaptación al nuevo interfaz que adoptó Microsoft en la suite 2007.

Pero también comprobamos que cuando se explican las razones del cambio de interfaz y su filosofía de diseño, el cambio se vuelve mucho más fácil para los usuarios. Por ello esperamos que esta pequeña introducción sea útil para quienes están pensando en actualizarse o a quienes tengan que dar soporte a usuarios que vayan a actualizarse.

Introducción

La interfaz de Office 2007 y 2010 tiene un nombre: Ribbon. “Cinta” en español, y forma parte de  la familia de menús que en el área de diseño y usabilidad llamamos Supermenú.

La razón de la existencia de los supermenús y en particular la versión Ribbon de Microsoft es tratar de lidiar, entre otros, con 2 aspectos clave en el diseño de interfaces de usuario:

1. Facilidad de uso para usuarios noveles.

2. Optimización del espacio y la distribución para menús con un número elevado de opciones.
Además la implementación de Microsoft, permite el uso de este interfaz tanto en aplicaciones estándar (ratón y teclado) como en dispositivos táctiles (sí, lo hemos probado).

Filosofía

La filosofía del interfaz, es poder organizar de una manera práctica y evidente todas las opciones disponibles, de manera que un usuario novel pueda localizar lo que necesita (las opciones más habituales) de un vistazo, pero sin penalizar a los usuarios avanzados, que pueden profundizar o personalizar el interfaz para mejorar su productividad o realizar tareas complejas.

Esto lo logra mediante botones grandes para las opciones más habituales y la agrupación de opciones similares en cintas o fichas con pestañas. De esta manera solo necesitamos saber qué queremos hacer para localizar la ficha y sus opciones rápidamente.

Para uso en cualquier dispositivo

Por otro lado, dos particularidades que sorprenden del Ribbon es que es contextual y adaptable.

Contextual porque el interfaz muestra nuevas cintas y opciones (u oculta) en función del contexto. Por ejemplo, si tenemos seleccionada una imagen en Word 2010, veremos una cinta adicional con funcionalidades para tratar imágenes. Eso permite aligerar el interfaz y volverlo más claro.

Adaptable porque no solo cambia lo que se ve, sino que además se reagrupa en función del espacio de que dispongamos. Esto es realmente útil cuando lo que tenemos en las manos es un netbook o un Tablet, pero también permite trabajar más cómodamente en monitores grandes.

Como todo cambio de interfaz, el producto requiere algo de entrenamiento para terminar de resultar cómodo, pero entendiendo su filosofía, la adaptación es mucho más rápida y las ventajas de tenerlo por ejemplo en Sharepoint Online para trabajar con dispositivos portátiles, es asombrosa.

Para quien esté interesado en profundizar en el interfaz de Office, se puede acceder a información adicional bastante útil y extensa en la misma web de Microsoft:

http://office.microsoft.com/es-es/
http://office.microsoft.com/es-es/word-help/migrar-a-word-2010-desde-word-2003-HA101850447.aspx?CTT=5&origin=HA101631587

Tutorial: ¡Hola mundo! en una pestaña de una página de Facebook

1. Crear la aplicación

El lógico primer paso es crear nuestra aplicación. Entraremos en la página de Apps de Facebook (https://developers.facebook.com/apps/) y crearemos una de cero. Como suele ser común, tendremos que rellenar un buen número de datos para nombrar, clasificar, personalizar y etiquetar nuestra aplicación pero el meollo de la cuestión está en la configuración posterior que deberemos introducir para permitir que la aplicación se muestre en una página.

2. Configuración básica
Después de decidir dónde tendremos alojada la página externa que queremos mostrar en nuestra nueva pestaña (en nuestro caso será un pequeño script con el logo empresarial y el lema "¡Hola mundo!"), deberemos prestar atención a un apartado en la sección 'Select how your app integrates with Facebook' de la configuración de la aplicación: 'Pestaña de la página'.

Ahí es dónde deberemos introducir la dirección de la página que queremos mostrar, tanto en su versión certificada -desde hace un tiempo, Facebook existe este tipo de seguridad- a la versión habitual. Además, el sistema nos permite mediante un enlace a una gestión de la pestaña que podremos configurar para personas sin conocimientos de programación

3. Integrarla en la página

El último paso es introducir la aplicación que hemos creado en nuestra página. El paso es sencillo. Siguiendo esta dirección (https://www.facebook.com/dialog/pagetab?app_id=ID_DE_TU_APP&next=URL_DE_TU_APP) seleccionaremos la página en la que queremos integrar "nuestro espacio". Et voilá!

A partir de este pequeño tutorial se abre un mundo de posibilidades al poder integrar cualquier tipo de contenido en la pestaña, incluyendo lenguajes de servidor o cualquier tipo de interacción con el API de Facebook, con la posibilidad de poder utilizar la misma aplicación para varias páginas totalmente distintas mediante el enlace de configuración enlazado anteriormente. Como veis, conocer este método hace que el único límite de la integración con Facebook se convierta en nuestra imaginación.

¿Cómo activar el nuevo perfil de Facebook?

Os informamos que ya está disponible la opción de crear tu biografía en Facebook.

Con este nuevo tipo de perfil podrás contar la historia de tu vida mediante imágenes y espacios especialmente habilitados para narrar tus vivencias:

Vista previa de tu biografía
Cuando actives la biografía dispondrás de 7 para darle el aspecto que prefieras antes de que otros puedan verla.

Decide qué quieres destacar
Para ayudarte, hemos incluido en tu biografía algunas de tus fotos o historias destacadas. Marca otras cosas que quieras destacar, oculta lo que no quieras mostrar o añade lo que quieras.

Controla quién ve tus cosas
Solo las personas con las que hayas compartido una publicación podrán verla en tu biografía. Si quieres, puedes cambiar quién ve una publicación, o bien eliminarla u ocultarla para que no se muestre en tu biografía.

Para más info haz clic aquí

Los mejores y más interesantes Sliders de imagenes hechos en Jquery + CSS (javascript)

Un buen recurso para diseñar una pagina web moderna es un slider de imágenes o de contenido. Nuestro Dpto de Desarrollo recomienda este artículo publicado por Dacho en http://www.blogdelaweb.com, que incluye los mejores Sliders que existen en Jquery, cualquier persona que tenga conocimientos básicos de HTML y siga las instrucciones de los autores podrá implementarlos fácilmente.

Avia Slider

AviaSlider es un plugin para jQuery muy útil para hacer excelentes slideshows con transiciones similares a las que se realizan en Flash. Dispone de 8 efectos de transición distintos, tiene una imagen de precarga, Autoplay, valida tanto en HTML5 como CSS3 y la versión comprimida apenas pesa 8Kb.

Background Image Slideshow

Crea sliders de imagenes en los backgrounds de los divs o de las paginas. Puede ser muy util en distintos casos. Esta técnica se basa en jQuery combinado con CSS.

jqFancy Transitions

Este complemento se puede utilizar para mostrar las fotos como una presentación de diapositivas con excelentes efectos de transición, sin nada que envidiar a flash.

Panning Slideshow

Otro Slideshow de imágenes con un efecto particular. Las imágenes cambian también en diagonal y se pasan un poquito y vuelven. Muy útil si quered un efecto original.

Flip! A jQuery plugin

Flip! es un script jQuery con el que podemos voltear contenido, es decir que gire en un sentido u otro tanto verticalmente como horizontalmente por un eje imaginario que pasa por la zona central.

EMAILOLOGY: la guía online para el desarrollo de emails

EMAILOLOGY: la guía online para el desarrollo de emails.

De la mano de Email on Acid nos llega Emailology, una guía online dedicada al diseño y desarrollo de emails y newsletters, actualizada y muy visual.

Contiene los siguientes recursos:

-   - Una plantilla html comentada con recomendaciones para la maquetación.

-  - Trucos para la resolución de problemas  específicos que se suelen presentar en cada uno de los clientes de correo a la hora de desarrollar (engloba 26 versiones distintas, incluyendo los clientes de dispositivos móviles).

-  - Una lista con las etiquetas y atributos HTML y las propiedades CSS soportadas por los principales clientes de correo.

-  - Un conversor online de caracteres especiales.

Muy recomendable su consulta ante cualquier duda que nos surja a la hora del desarrollo:

Haz clic aquí para consultar la guía

¡Esperamos que os resulte muy útil! 

Dpto. Desarrollo ODM

Ext JS 4.0

En Abril salió una nueva versión, la 4.0 de este potente y completo Framework en Javascript para el desarrollo de aplicaciones web interactivas, o lo que es lo mismo, aplicaciones RIA (Rich Internet Application).

Entre las novedades destacan la mejora en velocidad, facilidad de uso y estabilidad, así como una nueva librería para crear gráficas sin usar Flash a través de los estándares HTML5. Todas ellas soportan la mayoría de navegadores actuales y usa tecnologías como Ajax, DHTML y Dom.

En realidad Ext JS es tan solo una parte del iceberg y desde Junio conforma uno de los tres bloques de “Sencha”. La otros dos componentes son, el Framework Sencha Touch y Ext GWT, el primero de ellos se basa en el desarrollo de aplicaciones para móviles y el segundo es una librería gráfica.

Podréis encontrar más información en las webs oficiales:

http://www.sencha.com/

http://www.sencha.com/products/extjs/