Het bruist weer in browserland en het topic van de dag is html 5. Browsers worden steeds sneller en bieden steeds meer nieuwe technische mogelijkheden, die in de media voor het gemak bijna allemaal onder de noemer 'html 5' worden geschaard. Voor ontwikkelaars is het een interessante tijd waarin veel geëxperimenteerd en gepionierd kan worden. Ook Microsofts nieuwe versie van Internet Explorer, waarvan de eerste publieke bèta alweer een tijdje te downloaden is, biedt ondersteuning voor veel van deze nieuwe technieken.
Microsoft heeft voor zijn nieuwe browser het nodige veldwerk verricht alvorens de bèta vrij te geven. Zo heeft de fabrikant om beter inzicht te krijgen in hoe verschillende websites zich gedragen bij het laden van een pagina, ruim 7000 websites wereldwijd bestudeerd, waaronder ook Tweakers.net.
Nu de bèta is vrijgegeven, heeft Microsoft aan Tweakers.net gevraagd of wij in een showcase de mogelijkheden van de nieuwe browser kunnen belichten. Omdat wij niet vies zijn van experimentjes met nieuwe technologie en omdat het mes hier aan twee kanten snijdt - Microsoft krijgt aandacht voor hun nieuwe versie browser en Tweakers.net krijgt nieuwe hippe features - zijn wij hier graag op ingegaan.
Tweakers.net gebruikt al langere tijd de nieuwe technologieën die browsers tegenwoordig bieden. Zo zijn wij al ruim een jaar geleden overgestapt van een html 4-doctype naar de html 5-variant en gebruiken we al allerlei nuttige features die beschreven worden door onder andere html 5, css 3 en ecmascript 5. Voor sommige features gebruiken we zogenaamde shims om backwards-compatibiliteit te verzorgen voor oudere browsers, in andere gevallen passen we nieuwe technieken toe als progressive enhancement, waarbij oudere browsers simpelweg een 'kalere' versie van de site zien zonder daarbij functionaliteit achterwege te laten.
Een van de meest in het oog springende functies op Tweakers.net die wel een opknapbeurt kon gebruiken, is de zogenaamde 'imageviewer'. Het uiterlijk hiervan was toch wel behoorlijk verouderd en ook functioneel viel er nog wel een en ander aan te verbeteren. Eén van de meest nuttige features van onze imageviewer is de rij thumbnails waarmee je snel en makkelijk door een verzameling van afbeeldingen kan scrollen en de afbeeldingen die je graag in detail wilt bekijken kan selecteren. In de tijd dat we onze imageviewer ontwikkelden was dat een feature die bij het bekende Lightbox en varianten ontbrak. Met deze thumbnailweergave wilden we nu iets hips gaan doen wat geresulteerd heeft in een soort panorama-carrousel dat met de muis kan worden bestuurd.
Vernieuwde imageviewer
Als tweede vernieuwende functionaliteit wilden we graag iets doen met een hoger 'showcase'-gehalte en waarmee we ook écht gebruikmaken van technieken die Internet Explorer versie 9 nu ondersteunt. De keuze is gevallen op html 5 <canvas> in de vorm van een geanimeerde 'avatar cloud' op de Tweakers.net-gallery-index. Dit is een soort activiteitenstroom van gebruikers op onze website: reacties op de Frontpage of op het forum, nieuwe forumtopics, Vraag & Aanbod-advertenties en door gebruikers gemaakte productreviews komen hier bijna real-time voorbij voorzien van de avatar van de betreffende gebruiker. Bij het klikken op een avatar krijg je een korte beschrijving te zien van de activiteit en een link naar de betreffende content. Standaard worden enkele activiteiten uitgelicht alvorens nieuwe activiteiten met behulp van ajax in json-formaat worden opgehaald.
Avatarcloud
Benieuwd naar de nieuwe mogelijkheden van Internet Explorer versie 9? Bekijk dan de IE9 showcase pagina.
Microsoft
