Te invitamos a un evento muy especial el 2 de Diciembre de 2010

Aprende sobre el futuro de Silverlight con Scott Guthrie (Vice Presidente Corporativo para Desarrolladores) y otros expertos desde el Campus Microsoft en Redmond, WA.

Escucha sobre nuestros planes para la siguiente version de Silverlight, los últimos avances, así como sesiones técnicas para construir aplicaciones con Silverlight.

• El registro es Gratis – asiste en persona o en línea.
• Para mayor información y registro en línea

Esta característica es muy útil para cuando la ventana del sitio principal está en un monitor diferente o está bloqueada por otras ventanas o minimizado. Los íconos de notficación se colocarán de manera predeterminada en la esquina inferior derecha, pero es forzoso que el ícono del sitio en la barra sea de 32 x 32 pixeles y no son visibles para sitios que no estén agregados en la barra de tareas. Un sitio puede tener varios iconos de comunicación sin necesidar de limpiar los anteriores, aunque cuando se borren estos iconos se empezarán a eliminar del más reciente hacia atrás.

Para colocar un icono de notificación (overlay1.ico) se utiliza la siguiente línea de código:

window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1');

Para quitar el icono de notificación de la barra de tareas se utiliza esta otra línea:

window.external.msSiteModeClearIconOverlay();

Algo que se puede notar es que el favicon del sitio se encuentra colocado a la izquierda de la barra de navegación del navegador, y que el color de los botones de navegación de adelante y atrás a cambiado a un color naranja:

¿Cómo se hace esto? Es muy simple, basta con agregar en el encabezado de la página (entre las etiquetas <tag>) las siguientes líneas:

<meta name="application-name" content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>
<meta name="msapplication-starturl" content="http://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>

Estas líneas son guías, por supuesto, que deberemos llenar con los datos del propio sitio. Los valores de los atributos de cada una los explico mejor a continuación:

• application-name: el nombre del sitio. Sí se deja en blanco se utiliza el título de la página (<title>). Esto sirve particularmente cuando se agrega la página al menú de inicio. 
• msapplication-tooltip: es el texto que aparecerá en la cajita de texto (tooltip) cuando dejamos el puntero del ratón sobre el icono del sitio agregado en la barra de tareas o en el menú de inicio.
• msapplication-starturl: es la dirección base (root) de la aplicación. Si no se coloca, se utiliza la dirección de la página tal como fue agregada. Esta propiedad soporta los protocolos HTTP, HTTPS y FTP por ahora.
• msapplication-navbutton-color: indica el color de los botones de navegación del navegador (atrás y adelante). Cualquier color definido en la especificación de CSS 3 es soportado (más información sobre estos códigos en la tabla de  colores). Si no se especifica un valor, IE9 utiliza el color del favicon del sitio.
• msapplication-window: el tamaño inicial de la ventana del nevagador cuando se abre desde el acceso directo en la barra de tareas o el menú de inicio. Los dos valores van separados por una coma y los valores indican el tamaño en pixeles, por ejemplo:
  
  <meta name="msapplication-window" content="width=800;height=600"/>
  
  esta línea indica que la ventana del navegador se abrirá en un tamaño de 800 por 600 pixeles. Este valor puede ser cambiado por el usuario si cambia manualmente el tamaño de la ventana mientras navega.

El ícono (favicon) deberá ser un archivo de extensión .ico de 32 por 32 pixeles, que se puede especificar también en la sección del encabezado de la página de la siguiente manera:

<LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico">
<LINK rel=icon type=image/ico href="./favicon.ico">

WIndows intentará cargar el archivo como una imagen de 32 por 32 pixeles, pero si esta fuera más pequeña (16 por 16 pixeles, que es lo más común estos días) entonces esta quedará en tamaño reducido dentro de un marco de 32 por 32 pixeles. El usuario puede cambiar este icono después a través del panel de Propiedades del acceso directo.

a) arrastrando el ícono de la barra de direcciones hacia la barra de tareas:

b) desde el menú de Tools (Alt+X) -> File -> Add Site to Start Menú:

Esta agregación no puede realizarse de manera programática por razones de seguridad y privacidad, pero lo que si podemos hacer desde el sitio web es detectar si el sitio web fué abierto desde modalidad agregada (pinned) o no, utilizando un poco de JavaScript de la siguiente manera:

<script type="text/javascript">
try {
     if(window.external.msIsSiteMode())
     { 
        // TRUE
        document.write("<p>Sitio lanzado desde el taskbar</p>");
     }
     else
     {
        // FALSE
        document.write("<p>Sitio no lanzado desde el taskbar</p>");
     }
}
catch(e)
{
     // UNSUPPORTED
     document.write("<p>El navegador no soporta pinned websites</p>");
}
</script>

Poder detectar esto tiene varias ventajas, por ejemplo, cuando queremos manejar dinámicamente las tareas del jump list o algunas otras acciones sobre las que estaré escribiendo en los próximos días.

Siguiendo con el ejemplo del sitio de  Amazon del post anterior, si hacen login a Amazon.com con sus credenciales verán que el jump list cambia y ahora tiene más opciones:

Otra cosa que se puede notar es que además del grupo de "Tasks" hay un segundo grupo de acciones llamado "Amazon Favorites". Estas opciones del jump list se generan al vuelo de la siguiente manera utilizando un poco de JavaScript:

1. Crear  la categoría: lo primero que debemos hacer es crear la categoría donde se incluirán las nuevas opciones en el jump list utilizando el método msSiteModeCreateJumplist y es necesario crear una lista antes de utilizar cualquier otro método posterior. Para crear una lista llamada "Amazon Favorites" agregaremos el siguiente código de Javascript:
   
   window.external.msSiteModeCreateJumplist('Amazon Favorites');
   
2. Agregar elementos: una vez creada la categoría, agregamos acciones con el método msSiteModeAddJumpListItem:
   
   window.external.msSiteModeAddJumpListItem('Elemento1', 'URI del elemento1', 'URI del icono para elemento1');
   
   De igual manera que usando la etiqueta <meta> aquí todos los atributos son obligatorios. En el caso del icono, el URI debe apuntar a un archivo .ico de 16 x 16 pixeles como mínimo. En el caso de Amazon.com, el primer elemento 'Amazon Wish List' de la categoría 'Amazon Favorites' se crea con la siguiente línea:
   
   window.external.msSiteModeAddJumpListItem  ('Amazon Wish List' , 'http://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20','http://www.amazon.com/favicon.ico');
   
   Cada categoría soporta hasta 20 elementos como máximo; si se agregan más los primeros serán eliminados automáticamente.
   
3. Mostrar la lista: esta lista se encuentra en memoria lista para mostrarse cuando sea más conveniente, con la siguiente línea:
   
   window.external.msSiteModeShowJumplist();
   
   Windows actualizará automáticamente el jump list en memoria con las nuevas opciones.
4. Borrar la lista: cuando los nuevos elementos hayan servido su propósito, es posible borrar una categoría completa con la siguiente línea de código:
   
   window.external.msSiteModeClearJumplist();

Si un usuario elimina manualmente un elemento de un jump list creado de esta manera (con clic derecho como se ve abajo):

es posible detectar esta acción utilizando cualquier de los siguientes métodos:

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

que hará una invocación a la siguiente función con el URI de la opción eliminada como parámetro:

function removed(URI) { … }

Cualquier página en el mismo dominio en el que fueron creadas las nuevas categorías y opciones en el jump list puede realizar modificaciones al mismo en cualquier momento.

En este caso podemos ver el jumplist del sitio de Amazon, que además de las opciones estándar de InPrivate Browsing y Unpin nos muestra uan lista de acciones específicas para los usuarios de Amazon. Otros sitios que integran esta funcionalidad son Twitter, Facebook y varios más.

¿Cómo se hacen? Es realmente muy sencillo y pueden incluirse en cualquier sitio ya existente con un poco de HTML.

Acá viene un ejemplo: lo primero es ubicar el espacio para los encabezados meta de la página de inicio de nuestro sitio (default.* o index.*), que se encuentre dentro de las etiquetas <head> y </head> antes de <body> y colocar algo como la siguiente línea:

<meta name="msapplication-task"
  content="name=Título de la acción ;
  action-uri=URI a la que dirigirá esta acción;
  icon-uri=URI del archivo favicon para esta acción" />

Esta línea corresponderá a una acción en la jumplist del sitio: el nombre "msapplication-task" es obligatorio al igual que los otros tres atributos:

• content: Será el título de la acción para el jumplist que aparecerá una vez instalada el sitio en la taskbar. Lo recomendable es que sea menor de 25 caracteres y lo más descriptivo posible.
• action-uri: La dirección web que se abrirá en el navegador cuando reciba clic. Puede incluir variables GET y soporta http, https y ftp.
• icon-uri:El icono que se mostrará a la derecha de la acción en la jumplist. El valor puede ir vacío pero no se puede omitir el atributo. El icono deberá tener ser al menos de 16 x 16 pixeles.

El mismo ejemplo de Amazon, la primera línea (Gold Box Deals) se vería así:

<meta name="msapplication-task"
  content="name=Gold Box Deals;
  action-uri=http://www.amazon.com/gp/goldbox?tag=amzn-ie9-jl-gb-20;
  icon-uri=http://g-ecx.images-amazon.com/images/G/01/goldbox/Goldbox16._V200960310_.ico" />

Se pueden colocar tantas líneas como se necesite, aunque lo mejor es colocar las que al usuario más le hagan sentido. Con esta pequeña guía ya pueden empezar a colocar jumplist a sus sitios web para que los usuarios de sus sitios saquen provecho de esta nueva funcionalidad.

Silverlight 4 tiene varias aplicaciones sobre la versión anterior, que incluyen:

• Soporte programático a clic derecho y a la click-wheel del mouse
• Soporte a impresión desde Silverlight
• Capacidad de correr aplicaciones fuera del navegador (out of browser) con privilegios elevados
• Soporte de arrastrar y soltar (drag & drop) desde fuera del navegador.
• Soporte a HTML y al elemento WebBrowser
• Soporte a teclado durante modo de pantalla completa
• Un control para editar de texto enriquecido
• Cambios en el soporte a datos en otro dominio (cross-domain access)
• Soporte a contenido de video protegido en H.264
• Soporte oficial a Google Chrome
• … y muchas cosas más. Tim Heuer a redactado una lista muy completa con ejemplos de estas nuevas características en su blog.

Silverlight tiene un modelo de desarrollo acumulativo, lo que quiere decir que la versión 4 incluye todo lo que tenían las anteriores, por lo que todos los tutoriales y ejemplos previos aún funcionan y se pueden utilizar para conocer la plataforma.

Este es un segmento de la plática que dió hace dos días Scott Guthrie en la DevConnections Conference sobre Silverlight 4:

Links de utilidad y herramientas para descargar:

• Descarga o actualiza el plugin de Silverlight
• Visual Studio 2010 o Visual Web Developer 2010 Express
• Silverlight 4 Tools RC para Visual Studio 2010
• Expression Blend 4 RC
• Silverlight 4 Toolkit April 2010 Release

La presentación está publicada en mi cuenta de SkyDrive Live. Muchas gracias a todos/as por su tiempo y atención, y va mi agradecimiento a Rubén Mugartegui por seguirme invitando a dar estas charlas.

Seguimos en línea.

Integración de Eclipse con las nuevas caraterísticas de Windows 7:

Si han usado Windows 7 saben de que hablo: Eclipse ahora integrará funcionalidades de la nueva barra de tareas de Windows, como indicadores de avance y jumplists para Eclipse:

Otras caraterísticas serán incluídas, como la integración con el motor de búsqueda de Windows, mejoras en el diseño de las barras de tareas y varias más que ya se han incluído en el bugzilla de Eclipse. La meta es tenerlas listas para principios de 2010.

Herramientas de desarrollo en PHP para Windows Azure

Este kit de herramientas es un plug-in opensource para Eclipse que permitirá a los programadores que usan PHP crear aplicaciones que corran en Windows Azure, la plataforma de Cloud Computing de Microsoft.

Arquitecturalmente, este plug-in se integra con el SDK (software development kit) ya existe de PHP para Windows Azure que se publicó en CodePlex hace unas semanas. Hay un video demostrando las capacidades de este SDK para programadores PHP en Channel 9 grabado por Robert Hess.

El kit de desarrollo de Windows Azure para Java

De forma similar al kit de desarrollo de PHP, también se libera el kit de desarrollo (SDK) para Java sobre Windows Azure:

Este kit de desarrollo es opensource y esta disponible desde www.windowsazure4j.org. 

Herramientas de desarrollo de Silverlight para Eclipse

Ya había escrito sobre este kit de herramientas antes, pero ahora finalmente ya tenemos la liberación de la versión 1 que permite el desarrollo de aplicaciones RIA basadas en Silverlight desde Eclipse. Este es la culminación de varias versiones que fueron liberadas en los últimos meses, incluyendo la versión de estas herramientas de Silverlight para Eclipse en Mac:

Este plug-in permite una mejor interoperabilidad entre aplicaciones enriquecidas para Internet (RIAs) y sitios basados en Java y servicios web, incluyendo REST, SOAP, JSON y otros estándares. El soporte para Silverlight 3 viene en camino junto con otras características detalladas en el sitio web del proyecto.

¡El futuro es abierto, y ahora más que nunca!