Mix 2010 Open Call Vote

Este año la organización del Mix ha decidido que 5 de las charlas serían dadas y elegidas por la comunidad. La lista con las propuestas la tenéis en http://visitmix.com/opencallvote

Si tenéis dudas sobre cuál votar yo os recomiendo las siguientes propuestas de unos chicos muy majos ^_^

BECOMING SOCIAL. How to power up your website using social networks

PLAIN CONCEPTS’ SILVERLIGHT LIVE MESSENGER TOOLKIT

SILVERLIGHT IN THE AUDIOVISUAL WORLD

EXTENDING THE WINDOWS LIVE MESSENGER WEB TOOLKIT WITH SCRIPT# AND SILVERLIGHT

WHAT YOU SEE IS NOT WHAT IS THERE. Users mind as a resource in Expression Blend

Solo tenéis que pinchar sobre “Add to ballot”. Una vez hecho esto sobre todas, pinchad en “Submit Your Ballot” y ya está 😉

Tenéis hasta el 15 de enero para votar

Mix10_Vote_grn_240

[WLMT] Socializándonos

Nos guste o no, las redes sociales tienen cada vez más relevancia en Internet. Facebook, Tuenti, Twitter… cada vez es más común oir hablar de ellas en los medios tradicionales o que gente que no es para nada techie tega una o varias de estas cuentas (cuando vuestra madre os añada a Facebook ya veréis que cara se os pone…).

Facebook tiene ya más de 400 millones de usuarios. Windows Live Messenger cerca de los 500. La gente que usa twitter escribe varias veces al día en este sistema de microblogging y esto no ha hecho más que empezar. Es ahora el momento de actualizar nuestras páginas y comunidades y crear nuevas experiencias para los usuarios que además permitan una mejor integración con estas redes, porque las comunidades especializadas (como geeks :) ) aún están muy vivas.

Pero, ¿por qué deberíamos “integrarnos” con estas redes sociales? Hay varias razones, pero probalemente el que “si no lo haces tú lo hará otro y se llevará el gato al agua” es una buena 😉

Pero si esto no te convence, aquí van una serie de razones por las que los usuarios quieren que te integres con las distintas redes sociales y otras tantas de por qué deberías hacerlo.

¿Por qué nuestra página debería conectarse a una red social?

¿Qué es lo que más os molesta cuando vais a acceder a una nueva página? En mi caso lo que más me fastidia y lo que probablemente haga que no me registre nunca en la página que esté visitando (y use alternativas como bugmenot) es:

  1. Rellenar formularios kilométricos. ¿Para qué me preguntas mi dirección, DNI, edad, sexo y demás? ¿A caso me vas a enviar un regalo? Perder 10 minutos de mi vida rellenando datos falsos es algo que odio. ¿No puedes pedirme un nombre de usuario y un password y ya me pedirás cuando lo necesites más datos?
  2. Que mi nick lo tenga otro. Me fastidia un montón que mi malvado hermano gemelo se me haya adelantado y use mi mismo nick. Lo siento, pero yo no puedo tener desdoblamiento de personalidad (además de que luego siempre me olvido si he usado otro usuario y es un infierno recuperarlo después…)
  3. Tener que subir una y otra vez mi avatar a todas partes. Se intentaron hacer buenas iniciativas como gravatar pero parece que la idea no termina de cuajar. Además, si cambio alguna vez de imagen me tengo que recorrer todas las páginas en las que tengo cuenta y volver a subirla una y otra vez. En fin, otro infierno
  4. Que la gente no se entero de lo que hago. Si participo en una comunidad es para obtener fama, gloria y mujeres. Quiero que se me reconozca por lo que hago (para bien y para mal) y que mi madre que es una adicta a las redes sociales se entere de que posteo en geeks, me he cabreado con alguien de barrapunto o he subido fotos nuevas a flickr sin tener que avisarla todo el tiempo.

Menos mal que tanto Facebook como Microsoft han escuchado mis plegarias y han sacado (ya desde hace un tiempo) Facebook Connect y Windows Live Messenger Toolkit respectivamente. Pero, ¿qué nos aporta integrar esto como desarrolladores o administradores de la página?

  1. Una mejor experiencia para el usuario: Nick y avatar sincronizados en todo momento. Lo cambia en su red social y las modificaciones “se propagan” a todas las páginas que integren la tecnología. Usuario satisfecho, usuario fidelizado. Propagación de sus acciones en la red social, sus amigos ven que participa en nuestra página, siguen los links y ya están cazados :)
  2. Perfiles actualizados: Podremos acceder a los datos que necesitemos de nuestros usuarios sin tener que molestarles. Además la información estará probablemente mucho más actualizada y será más fiable que la que se hubiera dado durante el proceso de registro.
  3. Más usuarios, al no tener que rellenar formularios y simplemente conectarse usando sus credenciales de su red social preferida la posibilidad de espantarlo se disminuye drásticamente además de evitar el “antiform-pattern”. Además los escenarios de viralidad que se abren son muchísimo mejores que los clásicos “introduce el email de tus amigos”.
  4. Mayor seguridad ya que la autenticación se hace en un sitio de confianza para el usuario. Por nuestra parte nosotros no almacenamos ninguna información confidencial y nos limitamos a acceder a ella solo cuando sea necesario (adios a las pérdidas de información de usuarios).

Cada vez más webs están implementando estas tecnlogías con mayor o menor acierto. Durante los próximos posts veremos la propuesta de Microsoft (Windows Live Messenger Toolkit), sus características, en qué se diferencia al resto, cómo integrarlo en nuestra página web y cómo extender su funcionalidad para crear una nueva experiencia para nuestros usuarios.

Windows Live Messenger con Silverlight y en Antena 3

Acaba de salir a la luz el que creo que es el primer player hecho en Silverlight que permite hablar con nuestros contactos de Messenger y compartir vídeos con ellos (y en el que he tenido la oportunidad de participar juanto a otros compañeros de Plain Concepts).

Lo podéis ver en acción aquí y las noticias aquí y aquí.

image

Así que ya podéis ir imaginando sobre qué van a tratar nuestros próximos posts :)

CodeCamp: ¿Por qué no te socializas?

Finalmente debido a que Unai no podrá asistir al CodeCamp 2009, Fernando Cortés y yo estaremos como ponentes contando como “Socializar” una web utilizando el Windows Live Messenger Toolkit 3.5

La descripción de la charla que será antes de comer es la siguiente:

En esta sesión os enseñaremos las bondades del Windows Live Messenger Toolkit 3.5 con la que podremos “socializar” nuestras páginas web. Además veremos cómo mejorar y personalizar los controles comunes que encontraremos en el toolkit utilizando ScriptSharp. Y finalmente veremos cómo utilizar todo esto desde nuestra maravillosa aplicación desarrollada con Silverlight 3.0

Nos vemos en el CodeCamp!!

¡Soy Teniente!

Developer & Design Tour

Mañana empieza en Pamplona el Developer & Design Tour de Microsoft por toda España y Plain Concepts participa en él con la charla de “Experiencia de Usuarion enriquecida 3.0”:

Durante esta jornada podrás comprobar todas las novedades que hemos lanzado para mejorar la experiencia de usuario con Silverlight 3.0 y Expression 3.0, mejoras de la versión Beta de Visual Studio 2010 y .NET 4.0, tanto en el IDE como en sus versiones Team System para el ciclo de vida de desarrollo de sus aplicaciones. Presentaremos también la nueva plataforma Windows Azure para el desarrollo de aplicaciones en la “nube”.

Los enmarronados agradiados para dar la charla a lo largo y ancho de este país hemos sido Fernando (Murcia y Valencia), Cristian (Bilbao y Coruña), Paquito (Palma de Mallorca), Wigo (Tenerife), Raul (Sevilla) y un servidor (Pamplona y Barcelona).

¡Espero veros por ahí!

[IE8] Web Slices (III)

En posts anteriores hemos visto cómo crear un Web Slice, cómo funciona el sistema de actualización y cómo controlar cada cuánto tiempo tiene que comprobar el navegador del usuario si hay nuevo contenido.

¿Lo tenemos ya todo bajo control? ¡NO!

El método que hemos visto en el último post (feedurl) teníamos un problema a la hora de mostrar contenido rico ya que todos los scripts y controles ActiveX eran filtrados. La solución es usar un display alternativo a la hora de mostrar el contenido.

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8:     <a href="display.html" rel="entry-content" style="display:none"></a>

   9: </div> 

En este escenario, IE8 comprueba si hay actualizaciones en la página donde se encontró y cuando el usuario quiera ver el contenido se mostrará la página “display.html”. De esta manera podemos generar Web Slices más atractivos :)

image 

Obviamente lo mejor es combinar tanto la actualización como el display. Para ello habría que añadir la línea

   1: <a href="display.html" rel="entry-content" style="display:none"></a>

dentro del Web Slice definido en update.html. El funcionamiento quedaría de la siguiente manera:

image

El usuario “descubriría” el Web Slice en Basic.html mientras navega, IE8 haría las comprobaciones de contenido nuevo en Update.html y a la hora de ver estos cambios se mostraría Display.html.

En muchos casos tener dos páginas nuevas puede ser un poco incordio, pero no hay que precocuparse porque podemos usar Update.html tanto para las actualizaciones como para el display. Solo tenemos que hacer que la url de entry-content sea Update.html (aunque entonces quizás sería conveniente cambiarle el nombre).

Pero usar un display alternativo no es solo útil para poder usar Silverlight. Si os encontráis con que vuestro Web Slice no se aplican los estilos “debieran” pensad en añadir esa línea. Y es que los estilos en los Web Slices tienen su cosilla. No se aplican los estilos de los elementos padre a entry-content. Si modificamos nuestro ejemplo y lo dejamos así:

   1: <div id="topten"class="hslice webslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8: </div> 

y la clase CSS webslice dice que el fondo es de un bonito color Lime, a la hora de visualizarlo desde la barra de favoritos no se aplicará.

image

La solución es aplicar el estilo directamente a entry-content o usar el display alternativo. Si decidimos usar esta última solución tenemos que tener en cuenta una cosa muy importante, y es que se va a mostrar todo el contenido de la página, no solo el entry-content como pasaba antes. A ver quien ve las diferencias respecto al anterior 😛

image

¡Quedáis advertidos!

[IE8] Web Slices (II)

En el post anterior hemos visto como “Web Slicear” un contenido de nuestra web pero, ¿cómo comprueba IE8 que hay actualizaciones? ¿cada cuánto tiempo lo hace? ¿podemos el comportamiento por defecto?

Lo mejor es ver las propiedades de un Web Slice.

image

Name: El nombre del Web Slice en la bar

Address: La dirección a partir de la cual se comprobará si hay actualizaciones

User name and password: Nombre de usuario y password en caso de necesitarlo

Update schedule: Cada cuanto tiempo como mínimo comprobará que hay actualizaciones

Obviamente, los parámetros que más nos interesan son Address y Update schedule

Address

Como hemos visto antes, Address representa la dirección que IE8 usará para comprobar que hay actualizaciones. Al suscribirnos a un Web Slice, IE8 va a esta dirección, descarga el contenido del entry-content correspondiente (cada Web Slice tiene un id, no os olvidéis) y lo almacena en su caché (otra distinta a la de navegación por si os interesa). Este proceso se repetirá el tiempo establecido en Update schedule, con la diferencia de que antes de almacenarlo comprobará si el contenido ha cambiado respecto al que tenía almacenado y en caso afirmativo pondrá en negrita el título en la barra de favoritos.

Actualización clásica

Con el método que expliqué en mi post anterior sobre Web Slices, cada vez que se comprobara si había una actualización el motor iría a la página donde nos suscribimos, la descargaría entera y luego comprobaría si el contenido de entry-content es distinto al que tiene cacheado. En el ejemplo esto no es muy problemático ya que la página no era muy grande, ¿pero qué pasa si ésta es más pesada? Si tenemos un montón de usuarios comprobando actualizaciones cada poco tiempo esto puede causarnos una carga no prevista en nuestros servidores. Además, ¿por qué tendrían que bajarse toda la página si lo que les interesa es una pequeña parte? Para eso tenemos la posibilidad de establecer una Fuente Alternativa de Actualización. El código anterior de nuestro Web Slice era tal que así:

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8: </div>  

Para indicarle una fuente alternativa solo hay que añadir un link dentro de entry-content indicándole la nueva fuente:

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8:     <a href="feedurl.html" rel="feedurl" style="display:none"></a>

   9: </div> 

Es recomendable usar display:none para las personas con problemas de visibilidad, para que el lector de páginas no lea y siga ese link por casualidad.

Lo que sucede ahora es que nos suscribimos desde la página principal pero tanto las comprobaciones como el contenido que se va a mostrar es el que hay en “feedurl.html”:

imageEsto no solo nos permite “aligerar” la carga de nuestras páginas durante las actualizaciones, sino que nos permite mostrar el contenido de una forma mejor adaptada al tamaño de nuestro Web Slice (aunque con algunas limitaciones que ya veremos más adelante).

En feedurl.html tenemos que definir el Web Slice (hslice, id, entry-title y entry-content) con el formato adaptado para que IE8 lo reconozca.

Si solo definimos un Web Slice en feedurl, IE8 usará ese directamente. ¿Qué pasa si definimos más? Pues que al añadirlo el título se nos pondrá en un gris tristón. Para solucionar eso tenemos que usar un anchor en la dirección del feedurl:

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8:     <a href="feedurl.html" rel="feedurl#iddelwebslice" style="display:none"></a>

   9: </div> 

Como extra añadido, si como feedurl le indicamos la url de un RSS, el Web Slice nos mostrará “automágicamente” la última noticia, eso sí, no esperéis ninguna maravilla visual…

Este sistema de actualización usa el la plataforma RSS de Windows para todo lo anterior. ¿Qué implica esto? Pues que al usarse como medio de almacenamiento si queremos hacer algo un poco más dinámico (javascript, ActiveX, Silverlight, etc.) vamos a tener problemas… Pero no os preocupéis que hay solución :) Más sobre esto en el próximo post.

Update schedule

El otro valor de las propiedades de un Web Slice que nos interesaba es el tiempo de actualización. Por defecto se usa el establecido en el sistema de actualización de RSS del sistema (si empleais IE para leer vuestros feeds o Outlook si le disteis a usar la fuente común) y en caso contrario un día. En el caso de que tengamos contenido que se actualiza con cierta frecuencia (valores de bolsa, vídeos, etc.) nos interesa modificar este valor. Para ello nada más sencillo que usar la propiedad Time To Live (ttl). ttl define el número de minutos que pasarán antes de comprobar si ha habido una actualización. Siguiendo con nuestro ejemplo, el código quedaría así:

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8:     <span class="ttl" style="display:none">60</ttl>

   9: </div> 

Si estamos usando el feedurl, tendremos que definir el ttl en el Web Slice de la dirección de actualización alternativa.

FAQ del día

  • ¿Puedo decirle de alguna manera a un Web Slice que quiero que muestre otro contenido al original? Sí, mediante la propiedad feedurl
  • ¿Puedo cambiar cada cuanto tiempo se va a comprabar si hay actualizaciones? Sí mediante la propiedad ttl
  • ¿Se ejecuta algún script cuando comprueba si hay actualizaciones? No
  • ¿Puedo ejecutar javascript o ActiveX en los Web Slices cuando se visualizan? Con lo que hemos visto hasta ahora no, pero ya veremos como solucionarlo 😉
  • ¿Puedo definir más de un Web Slice en feedurl? Sí, ¡pero no te olvides de indicar cualquieres usar al definir tu link de feedurl!

[IE8]Web Slices en Geeks.ms

Todos los bloggers de geeks.ms estamos de enhorabuena ya que por fin tenemos Web Slices en esta comunidad. En total son dos, uno que muestra las visitas a tu blog en los últimos 30 días y otro el número de visitas por posts.

Ahora ya no hará falta que os conectéis a vuestro panel de control para saber quien va ganando en el mítico pique “yo tengo más visitas que tú” con vuestros compañeros de oficina :)

Los podéis añadir desde vuestro “Panel de control” pinchando sobre el icono que aparece al pasar el ratón sobre las gráficas o con el “Feed Discovery Button”.

image image

 

Si queréis algún desarrollo más para geeks solo tenéis que pedirlo. ¡Mientras tanto disfrutadlos!

[IE8] Web Slices (I)

Otra de las características más visuales del nuevo Internet Explorer son los Web Slices:

A Web Slice is a preview of your favorite site or service available directly from the Favorites Bar of your browser.

Web Slices allow you to cut a Web page into pieces so that you can display and update only the parts you are interested in. Web Slices can be a handy solution for a user who wants to follow the updates from your Web site but doesn’t want to use an RSS reader. RSS readers can be a little complicated for some end users and are not always appropriate.

En la galería de complementos española hay ya un montón para todos los gustos, desde reproductores de vídeo (como el de Telecinco) o el del tiempo de Terra, ambos en Silverlight.

Desarrollar un Web Slice es muy sencillo, funcionar como nosotros queremos y que además sea atractivo visualmente mucho más complicado. Durante los próximos posts iremos viendo las distintas “configuraciones” que puede tener un Web Slice, los problemas con los que nos podemos encontrar y cómo solucionarlos :)

Y sin más preámbulos… ¡empezamos!

hslice, entry-title & entry-content

Para hacer un Web Slice de un contenido en una página ya hecha solo tienes que acordarte de estas tres palabras.

Imaginemos que tenemos un div como el siguiente en una de nuestras páginas y queremos convertirlo en un Web Slice

   1: <div>

   2:     <h1>El Top Ten de XBOX</h1>

   3:     <ul>

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8: </div>

Lo único que tendríamos que hacer es añadir un id y la clase hslice al contendor principal, entry-title al título que queremos que tenga nuestro Web Slice en la barra de favoritos del usuario, y entry-content al contenido que se le mostrar al usuario cuando el usuario pinche sobre el título. El resultado sería el siguiente:

   1: <div id="topten"class="hslice">

   2:     <h1 class="entry-title">El Top Ten de XBOX</h1>

   3:     <ul class="entry-content">

   4:         <li>Mass Effect</li>

   5:         <li>Fallout 3</li>

   6:         <li>Gears of War 2</li>

   7:     </ul>

   8: </div>  

Una vez publicadas las modificaciones y si nos vamos a la página veremos que al pasar el ratón por encima del contenedor este es rodeado por un cuadrado verde y el icono de Web Slice aparece en la esquina superior izquierda. También podemos observar que el “Feed Discovery Button” ha cambiado la imagen que tenía antes de RSS por la de Web Slice:

image

Pinchando en cualquiera de los dos icónos de Web Slices el usuario podrá suscribirse y recibir las actualizaciones que hagamos directamente en su barra de favoritos.

image

Y ya tenemos nuestro primer Web Slice :) No ha sido tan doloroso, ¿verdad?

El menú para los próximos posts es: tipos de Web Slices (¡hay varias formas de hacerlos dependiendo de lo que busquemos!), estilos en los Web Slices, funcionamiento del sistema de actualización, navegación y links, Web Slice con contenido rico (Silverlight y Flash),  Autenticación y problemas frecuentes (y cómo resolverlos), ¡y no precisamente en ese orden!

FAQ del día

  • ¿Por qué necesito añadir un id? En una misma página puede haber varios Web Slices. El navegador tiene que ser capaz de identificarlos inequívocamente para que su motor de actualizaciones sea capaz de reconocer cuando ha habido una actualización. El id es necesario incluso en el caso de que tengamos un solo Web Slice
  • ¿Tengo que definir hslice, entry-title y entry-content en mi hoja de estilos? No, estas clases están pensadas solo para indicar a IE8 la presencia de un Web Slice.
  • ¿Qué pasa si ya tenía definidos esos estilos? No pasa nada, esos estilos se seguirán aplicando y el navegador seguirá reconociendo que es un Web Slice. No obstante es altamente recomendable no modificar el comportamiento de hslice (que aparezca un cuadrado verde y el icono correspondiente) para mantener la homogeneidad a lo largo y ancho de la web :)