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 🙂
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:
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á.
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 😛
¡Quedáis advertidos!