Med Internet Explorer 8 kan användaren bland annat prenumerera på Web Slices, vilket ger en rikare upplevelse.

Från början kunde internetanvändaren endast se om en webbsida var uppdaterad genom att surfa in direkt på den. Det var ett odynamiskt sätt som tog mycket tid i anspråk. När Internet Explorer 4 lanserades, som innehöll Active Desktop, löstes problemet till viss del genom att föra informationen från webben direkt till användarens skrivbord. Men fortfarande behövdes ett standardiserat sätt att hämta information från flera källor samtidigt. Lösningen blev Really Simple Syndication (RSS) som distribuerar data mellan olika källor på ett enkelt sätt. Det sker genom att en RSS-feed i xml-format skickas ut till användaren som kan välja att prenumerera på den och därmed få en notifiering när den är uppdaterad.

Internet Explorer 7 och Windows Vista har inbyggt stöd för Windows Feeds Platform, vilket ger både användare och utvecklare möjligheten att spara RSS-feeds lokalt på datorn och samtidigt få dem automatiskt uppdaterade. Uppdateras en feed på en plats kan den sedan uppdateras hos alla klienter samtidigt, exempelvis hos Internet Explorer, Outlook samt Vistas RSS-gadget.

Nästa steg i utvecklingen är tänkt att underlätta för utvecklaren ytterligare och samtidigt ge användaren en rikare upplevelse, vilket Internet Explorer 8 som innehåller funktionen Web Slices gör. Normalt behöver utvecklaren antingen generera en RSS-feed själv, eller använda något av de klassbibliotek som finns tillgängliga. Användaren får sedan surfa in på en sida som har RSS och ges då möjligheten att prenumerera på dessa och läsa dem i valfri klient. Web Slices ger dig möjligheten att ta en eller flera valfria ytor på din webbsida och genom små ändringar i html-koden få dem att bli till en variant av RSS.

När användaren vill prenumerera på en Web Slice kan det göras på två sätt. När användaren för musen över en Web Slice på webbsidan markeras utrymmet och en ikon visas i hörnet, vilket visar att det är just en Web Slice. Det andra sättet är att klicka på RSS-ikonen, finns Web Slices på sidan blir ikonen grön istället för orange, vilket den är om en RSS-feed finns tillgänglig. Genom att klicka på den gröna ikonen kan användaren prenumerera på markerad Web Slice. Internet Explorer skriver sedan om html-koden så att den fungerar på samma sätt som en RSS-feed, vilket gör att den kan sparas lokalt tillsammans med de andra RSS-feeds användaren valt att prenumerera på. Därmed ges möjligheten för utvecklare att visa denna Web Slice i sin egen applikation.

För att en yta på sidan ska räknas som en Web Slice krävs mycket lite extra arbete av utvecklaren som skriver sidan. För att Internet Explorer ska känna igen den räcker det med att ett par CSS-klasser läggs till på sidan. På detta sätt kan utvecklaren skapa Web Slices utan att skriva kod som inte validerar giltig xhtml. Sidan visas precis som innan, men nu finns även möjligheten att låta användaren hålla sig uppdaterad.

Implementera Web Slices på en befintlig webbplats
För att implementera Web Slices på en befintliga webbplats krävs som inte mycket arbete. Bilden nedan visar hur en befintlig nyhetslistning ser ut:

Koden för nyheten i sig ser ut som följande:

För att den ska fungera som en Web Slice krävs det att ett antal CSS-klasser läggs till. Nedan visas en tabell med de klasser som stöds av Internet Explorer 8.

För att den gamla nyhetslistningen att visas som en så enkel Web Slice som möjligt räcker det med att skriva om den enligt följande:

När besökare surfar till webbsidan ser denne att det dels har dykt upp en grön ikon i verktygsfältet, men även att en liknande ikon dyker upp när han för musen över nyheten.

När besökaren klickar på någon av de två ikonerna blir denne tillfrågad om att prenumerera på den valda Web Slicen. Väljer besökaren att prenumerera dyker en ny länk upp i favoritfältet ovanför sidan som gör det möjligt att direkt kunna se om sidan har uppdaterats. Har innehållet ändrats markeras länken med fet färg som en indikation på detta. Besökaren kan då klicka på länken och enkelt se vad som har ändrats.

Då Web Slices behandlas som RSS-feeds av Internet Explorer uppdateras de samtidigt som alla andra. Det betyder att om besökaren har ställt in så att de ska uppdateras varje minut så kan det dra onödiga resurser från servern om den måste skicka data hela tiden, även om innehållet inte har uppdaterats. För att lösa det ger Web Slices precis som RSS möjligheten att använda TTL (Time To Live). Om TTL är satt till 60 minuter kommer Internet Explorer inte att försöka hämta innehållet på nytt förrän efter 60 minuter, även om användaren har ställt in det till 1 minut.

Läggs det in i det tidigare exemplet ser det ut enligt följande:

Genom att sätta CSS-klassen till ”ttl” på span-taggen runt 60 är tiden satt till 60 minuter. För att dölja ”60” för besökaren (då det är en span-tagg visas det som vanlig text för denne) räcker det med att skapa en CSS-klass som heter ttl och sätta ”display” till ”none” på denna. På så vis behöver man inte visa mer text för användaren.

Har informationen ett slutdatum då den ska räknas som inaktuell finns en funktion för det. Ett exempel på där det är användbart är Ebay där auktionerna går ut efter en viss tid. När det är 20 minuter kvar markeras titeln på Web Slicen som kursiv samtidigt som en ikon visas för att markera att den snart går ut.

När man för muspekaren över en Web Slice som gått ut, syns en ikon som visar hur länge informationen varit inaktuell, samtidigt som titeln blir gråmarkerad.

Varför visas inte Web Slicen på samma sätt som på sidan?
Web Slices använder samma CSS-klasser som på sidan de hämtas från, men en sak skiljer dem åt. Tittar vi på html-koden som används i exemplen ovan har vi först har en klass med namnet ”mainContainer”, vilken har blivit tilldelad vit bakgrundsfärg i CSS:en. När besökaren ser sidan ligger allt innehåll i en vit ruta, men i Web Slicen har den bakgrundsfärgen från det utanför. Anledningen till det är att det i själva verket är elementet med klassen ”entry-content” som visas i Web Slicen. Då den klassen inte är tilldelad någon bakgrundsfärg får den samma färg som används för body, det vill säga grå. För att Web Slicen ska få vit bakgrundsfärg måste alltså klassen ”entry-content” tilldelas en vit bakgrundsfärg.

Skydd mot skadlig kod
Utvecklare kan med Web Slices skapa dynamiskt innehåll som snabbt kan visas för användaren, men det finns även vissa begränsningar. En Web Slice kan inte innehålla Javascript eller formulär. Anledningen till detta är att skydda användaren från skadliga Javascript. Däremot finns stöd för cookie-baserad autentisering, vilket innebär att man kan använda uppgifter hämtade från en sida som kräver inloggning. Det finns dessutom stöd för HTTP-autentisering.

Anpassa presentationen
Om besökarna inte ska få upp Web Slice-ikonen när denne för musen över en Web Slice finns det en meta-tagg som löser detta. Genom att lägga in denna kod mellan head-elementen så döljs rutan:

Name och Scheme måste ha de värden som är satta i exemplet ovan, medan content kan ha ”on” alternativt ”off” som värde, beroende på om ikonen ska visas eller ej.

Det är även möjligt att lägga till Web Slices programmatiskt.

Den första parametern anger URL:en till Web Slicen, inklusive en ankare till dess id. Den andra parametern innehåller titeln på Web Slicen och den tredje parametern visar att det är just en Web Slice som ska läggas till.

Mikael Söderström
.NET-konsult
Strand Interconnect AB
mikael.soderstrom@strandinterconnect.se