WebSlices

internet-explorer-8Vengo usando Internet Explorer 8 desde las versiones Beta solo por curiosidad, pero ahora que ha sido lanzada su versión final lo uso como mi navegador predeterminado, y como era de esperarse siempre hay controversias acerca de que si es el mejor navegador de Internet hoy en el mercado. Al margen de ello puedo decir que me gusta mucho su nueva interface y herramientas (complementos y aceleradores). De todo esto lo que más me ha gustado es el concepto de los WebSlices, que en términos simples es una pequeña aplicación basada en micro formatos.

En este post voy a explicar brevemente cómo crear un WebSlice para Internet Explorer 8 (más adelante cuando el tiempo me lo permita haré que este blog tenga ejemplos de esto).

1) ¿Qué es un WebSlice?

web-slices Un Webslice (o rebanada web) es un segmento de una página Web escrita con un formato particular dentro del contexto de XHTML. Este formato se apega a estándares Web pero permite que IE8 pueda detectarlo para agregarlo como un marcador vivo, de forma que se pueda tener un fragmento de una página Web como marcador que incluso refleja los cambios que puedan tener los datos del webslice.

Se pueden tener tantos webslices en un sitio como se necesiten, y aunque no es posible incorporar funcionalidad con lenguajes de scripting como JavaScript, si es posible generar datos dinámicos desde el servidor con un lenguaje activo como ASP.NET. Un webslice típico puede verse así:

ie8_webslice

¿Cómo se hacen? Es lo más simple del mundo:

 

2) Formato del WebSlice

Un webslice tiene el siguiente formato:

 

   

Item

   

Content

 

La clase hslice es obligatoria, pero es posible aplicarle formato desde una hoja de estilo (como siempre, |es mejor usar estilos externos que estilos embebidos) y el valor de id puede variar para diferentes webslices en la misma página. La clase entrytitle define el texto que se publica como título en el webslice.

En la clase entry-content se define el contenido del webslice. Como mencionaba antes, el contenido válido puede ser HTML o XHTML válido, pero no código JavaScript o VBScript, y puede ser tan largo como se desee, aunque el contenido corto funciona mejor en este caso.

 

3) Agregando WebSlices

Para agregar el webslice en un sitio simplemente hay que colocar el código dentro de los tags de la página. IE8 los detecta automáticamente y se puede agregar a la barra de marcadores dando clic en el ícono morado image sobre el webslice o en el mismo ícono del navegador para ver todos los webslices en una página.

Lo mejor de todo: un webslice es compatible con estándares y no rompe la validación de XHTML si está correctamente implementado.

 

4) Ejemplos, referencias, etc.

Hay un documento técnico en MSDN que explica a más detalle las opciones y características del microformato para webslices en IE8.

Hay varios ejemplos que vale la pena ver, pero especialmente recomiendo el de los webslices para vigilar artículos en eBay, o el que sirve para estar al día sobre las actualizaciones de tus amigos en Facebook.

Si haces algún Webslice no dudes en dejarme un link en este blog, tal vez pronto creemos una galería de los más relevante de los Webslices para IE8.