[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 🙂