June 2011 - posts - Web

Web

June 2011 - posts

De toekomst van HTML5
De toekomst van HTML5

Het is voor iedereen wel duidelijk, internet ziet er niet meer zo uit als vroeger. Door de komst van nieuwe technologieën en standaarden wordt het web steeds mooier en interactiever. Microsoft heeft het dan ook niet voor niets over “a more beautiful web”. Dit mooier web komt onder meer tot stand door de steeds bredere browserondersteuning van HTML5. Ook laat Microsoft met de komst van Internet Explorer 9 en de eerste Platform Previews van IE10 zien dat zij er alles aan doen om van HTML5 dé nieuwe webstandaard te maken. Dat er nog veel meer gaande is op het gebied van HTML5 legt Giorgio Sargo, Senior Technical Evangalist bij Microsoft, uit in zijn presentatie tijdens het MIX11 event. Hij laat zien hoe Microsoft bijdraagt aan het opzetten van nieuwe standaarden en welke standaarden momenteel in de ontwikkelingsfase zijn.

Microsofts bijdrage
Microsoft is nauw betrokken bij de ontwikkeling van webstandaarden. Zo zitten er in bijna iedere werkgroep van het W3C, de organisatie die zich hard maakt voor duurzame webstandaarden, een aantal afgevaardigden van Microsoft. Er zijn talloze werkgroepen, waaronder die voor HTML, CSS en SVG. Iedere werkgroep levert haar eigen specificaties op, die na uitgebreid overleg als aanbevolen standaard beschouwd kunnen worden. De HTML5 specificatie van de HTML werkgroep heeft momenteel de status “Last Call” wat betekent dat deze nog een aantal weken kritisch onder de loep genomen wordt. Daarna zal ook de HTML5 specificatie als “recommendation” gezien worden.

Naast de werkzaamheden bij de organisaties voor webstandaarden is ook de input van ontwikkelaars van belang voor Microsoft. Ze horen graag van de development community wat de nieuwe features zijn waarop wordt gewacht en wat men vindt van de huidige implementatie van (aanstaande) standaarden. Vandaar dat bijvoorbeeld iedere paar weken op http://ie.microsoft.com/testdrive een nieuwe preview te downloaden is van de browser die op dit moment in ontwikkeling is (momenteel Internet Explorer 10).

Nieuwe ontwikkelingen in het HTML5 Laboratorium
Standaarden die nog helemaal aan het begin staan van de ontwikkelingsfase maar wel interessant genoeg zijn om met de development community te delen, worden geplaatst op HTML5 Labs. Hier zijn op dit moment ook een aantal interessante demo’s te downloaden en te bekijken:

  • WebSockets: een standaard die het mogelijk maakt om op een eenvoudige manier vanuit de browser te communicatie op te zetten met een webservice. Ideaal voor bijvoorbeeld chatapplicaties of interactieve games.
  • IndexedDB: voor het opslaan van lokale data. Dit gebeurt nu al door bijvoorbeeld het gebruik van cookies. De hoeveelheid opgeslagen data kan bij IndexedDB echter vele malen groter zijn en het lezen van de data zal sneller gaan vanwege de database structuur waarin wordt opgeslagen. Overigens kan in de browser de data gewoon door middel van javascript objecten worden ingelezen. Kennis van databases of SQL is dus niet per se een vereiste.
  • FileAPI: Met de FileAPI is het mogelijk om gegevens van een lokaal bestand in de browser weer te geven, nog voor dat deze wordt geüpload naar een server. Dit is iets dat tot op heden niet mogelijk was bij het klikken op de vertrouwde “bladeren” knop. De filegrootte of de datum van de laatste wijziging, maar ook de bestandsinhoud zelf kunnen op deze manier in de browser getoond worden. Daarnaast is het zelfs mogelijk om meerdere lokale bestanden tegelijk te selecteren.
  • Media Capture API: deze API lijkt sterk op de File API, alleen wordt nu niet een bestand geselecteerd, maar wordt direct de microfoon of een webcam aangesproken om een geluids of video fragment op te nemen. Deze kan meteen terug geluisterd of gekeken worden in de browser zonder de tussenkomst van een server.

Zelf aan de slag
Ga naar HTML5 Labs voor een voorproefje van de features die waarschijnlijk in onze volgende generatie browsers zal zitten. Of bekijk de presentatie van Giorgio Sargo met alle demo’s op Channel 9.

Posted Monday, June 27, 2011 10:00 AM door Ruud van Kessel

Tijd besparen met prototyping in Expression Blend 4 + SketchFlow

De prototyping-fase vormt een belangrijk onderdeel in het ontwikkeltraject van een website of applicatie. Met Microsoft Expression Blend en SketchFlow kun je dit proces flink versnellen en vereenvoudigen, zo werd tijdens de Mix 2011 eerder dit jaar duidelijk.

Volgens Sara Summers, bij Microsoft werkzaam als User Experience-expert, heeft prototyping twee belangrijke voordelen. Allereerst zullen eventuele problemen in de opbouw van de applicatie of de website eerder aan het licht komen. Je bent hierdoor in staat om eerder in te grijpen. Het logisch gevolg hiervan is direct het tweede voordeel: door goed te prototypen wordt het extra werk (‘rework’) aanzienlijk verminderd. Sterker nog, volgens Summers kan het prototype ook dienst doen als het specificatiedocument voor de applicatie of website. Het prototype zorgt ervoor dat de ontwikkelaar de bedoeling van de website kan duidelijk maken, het concept goed kan presenteren aan de opdrachtgever en verwarring tot een minimum wordt beperkt.

Snel prototypen
Expression Blend is uitgerust met een groot aantal standaardelementen. Je kunt gebruik maken van deze standaard mock-ups en deze verder uitwerken. Summers geeft als tip om bij een nieuw project eerst te controleren of er bruikbare mock-up beschikbaar is. Prettig is dat je hoofdelementen kunt definiëren, en deze maar op één plaats hoeft aan te passen. Werk je bijvoorbeeld met een navigatiebalk (die op meerdere pagina’s voorkomt) en besluit je een knoptekst van een van de knoppen op de balk aan te passen, dan wordt dit automatisch in alle schermen doorgevoerd waarin de navigatiebalk voorkomt. In Expression Blend 4 is bovendien rekening gehouden met de mogelijkheid van A/B testen. Je kunt meerdere versies van een scherm maken en laten testen. Uiteindelijk bepaal je welke versie beter functioneert.

Feedback verzamelen
Is het prototype gereed, dan kun je het presenteren. Dit gebeurt met SketchFlow Player, een Silverlight applicatie die gewoon in de browser kan worden getoond. Binnen de SketchFlow Player kan er door de verschillende schermen van het prototype worden genavigeerd. Ook is het voor bijvoorbeeld teamgenoten en de opdrachtgever mogelijk om feedback te geven. Dit kan door commentaar te plaatsen in het "My Feedback" veld of door te schetsen in de schermen zelf. Vanuit de SketchFlow Player kan de feedback vervolgens als bestand worden geëxporteerd. De designer of ontwikkelaar kan dit bestand weer openen in Expression Blend waarna de feedback wordt toegevoegd aan het project en als laag over het design kan worden gelegd.

Met SketchFlow is het ook mogelijk om een Word-document te genereren van een prototype. Alle specificaties en de bijbehorende screenshots worden dan in het document opgenomen. Er kan ook gekozen worden om de feedbackdata aan dit document toe te voegen.

Zelf aan de slag
Zelf aan de slag met de mogelijkheden van Expression Blend 4 en SketchFlow? Er is een proefversie van de software beschikbaar. Ga naar http://expression.microsoft.com/en-us/cc507094 en klik op ‘Download the Expression Studio 4 Ultimate Trial’. Als je momenteel zelf al schetsen van websites of applicaties maakt, kun je er ook voor kiezen om deze in te scannen en met Expression Blend tot werkend prototype te maken. Dit is een slimme aanpak als je eerst de mogelijkheden wilt verkennen, zonder je bestaande workflow in één keer om te gooien.

Windows Phone prototyping
Het Blend team heeft inmiddels ook een module uitgebracht waarmee Windows Phone applicaties geprototyped kunnen worden met SketchFlow. Ga naar http://WP7sketchflow.codeplex.com voor de download en documentatie. 

Presentatie
Benieuwd naar de andere mogelijkheden van Expression Blend en SketchFlow? Bekijk dan de volledige presentatie van Sara Summers. In deze video gaat Sara dieper in op de mogelijkheden en situaties waarin prototyping van pas komt. Daarnaast geeft ze tips om snel aan de slag te gaan met Expression Blend 4 + SketchFlow. Klik hier voor de presentatie.

Posted Tuesday, June 21, 2011 10:33 AM door Dennis Gandasoebrata

Graphics en 3D met Silverlight 5
Graphics en 3D met Silverlight 5

Silverlight 5 kent interessante mogelijkheden op 3D-gebied. Tijdens de MIX 11, die eerder dit jaar plaatsvond in Las Vegas, werd hier dan ook aandacht aan besteed. Tijd voor een update.

Wat kun je ermee?
De 3D-mogelijkheden binnen Silverlight kun je voor verschillende doelen gebruiken. Bijvoorbeeld voor datavisualisatie (denk hierbij aan 3D-grafieken en plattegronden). Daarnaast zien de makers van Silverlight dat de 3D-functionaliteit vooral zal worden toegepast binnen onderwijs en training (denk aan een interactieve cursus), en marketing en advertising (bijvoorbeeld bij online campagnes).

Gebaseerd op XNA
De 3D Graphics API is gebaseerd op Microsoft XNA. Dit is een set libraries voor het maken van rijke applicaties. Binnen de 3D Graphics API vind je een Drawing Surface control. Met deze control kun je de eigenlijke 3D-onderdelen op een pagina opnemen. Je hebt de beschikking over de belangrijkste XNA Graphics API's. Dit betekent onder meer dat er toegang tot de GPU wordt geboden. Daarnaast maakt Shader Model 2.0 deel uit van de kern API's (voor het maken van effecten). Je kunt gebruik maken van de ingebouwde effecten, maar ook aangepaste effecten toepassen.

Wat heb je ervoor nodig?
De runtime stelt een aantal eisen om gebruik te kunnen maken van 3D. Allereerst moet de computer zijn uitgerust met een GPU die Shader Model 2.0 ondersteunt. Nieuwe computers beschikken vaak al over een dergelijke (of betere) chipset. Of je vervolgens direct gebruik kunt maken van de 3D-mogelijkheden, is afhankelijk van de gebruikte videodriver op declient. Als je een WDDM Driver gebruikt, zal 3D direct werken. Gebruik je een oudere driver (niet-WDDM), dan moet de eindgebruiker toestemming geven om 3D te kunnen gebruiken. Uitzondering hierop vormen gebruikersaccounts met verhoogde rechten: hierbij hoef je geen expliciete toestemming te verlenen. De Silverlight-applicatie kan detecteren of 3D mogelijk is. Als de gebruiker een niet-ondersteunde driver gebruikt, moet er aan de applicatie toestemming worden gegeven: open het instellingenvenster van Silverlight. Op de tab Permissions geef je aan dat de applicatie binnen dat domein volledige toegang tot de GPU mag hebben.

Onderscheid
Er bestaan al langere tijd 3D-oplossingen voor Silverlight, waarbij ook de GPU direct kan worden aangesproken. Volgens de makers onderscheidt Silverlight 3D zich op een aantal vlakken van deze oplossingen. Allereerst is Silverlight 3D gebaseerd op XNA. Voordeel is dat XNA beschikbaar is voor mobiele apparaten, de desktop en nu het web. Een groot deel van de ontwikkelaars is al bekend met XNA en hoeft relatief weinig tijd te steken in het leren van de technologie. Aan de 3D-mogelijkheden van Silverlight wordt nog volop gewerkt. Zo valt ondersteuning voor anti-aliasing nog te verwachten (de technologie waarmee je voor afgeronde randen en hoeken zorgt). Daarnaast zal het mogelijk worden om elementen te tekenen op een texture die buiten beeld valt ('render target textures'). Deze texture kan vervolgens worden gebruikt om bijvoorbeeld een 'glow' of spiegeling te veroorzaken, die wél weer zichtbaar is binnen het kader. Ook worden nog meer ingebouwde effecten toegevoegd.

Meer informatie
Tijdens de MIX 11 werd door Aaron Oneal, die bij Microsoft deel uitmaakt van het Silverlight-team, stilgestaan bij de 3D-mogelijkheden van Silverlight 5. Bekijk hier zijn presentatie en codevoorbeelden. Bij vragen kun je ook terecht in het Silverlight-forum. Je vindt dit hier.

Posted Tuesday, June 14, 2011 10:00 AM door Dennis Gandasoebrata

NuGet: de OpenSource Package Manager
NuGet: de OpenSource Package Manager

Phil Haack, Senior Program Manager bij Microsofts ASP.Net team en Principal Program Manager Scott Hanselman voerden ook dit jaar weer hun “HaaHa-show” op tijdens de MIX. Hun sessie gaat dit maal over de package manager NuGet. Hanselman laat zien dat de ouderwetse manier om een externe library in een .NET project op te nemen vrij omslachtig is: De juiste library moet worden gezocht op internet, vervolgens gedownload en uitgepakt. Dan moet er in Visual Studio een referentie aangemaakt worden naar de lokale files en zal de web.config file met een aantal configuraties moeten worden uitgebreid. Als je meerdere libraries wilt gebruiken, dan zal je dit proces voor iedere referentie opnieuw moeten doen. NuGet maakt dit proces aanzienlijk eenvoudiger.

NuGet Installeren en gebruiken.
NuGet is een extensie van Visual Studio en is eenvoudig vanuit Visual Studio 2010 te installeren. Dit kan door te gaan naar Tools -> Extension Manager en daar te kiezen voor de Online Gallery. Als NuGet niet op de eerste pagina staat, gebruik dan de zoekbalk om deze te vinden. Na de installatie kan er binnen het Visual Studio project met de rechtermuisknop worden geklikt op references. De optie Add Library Package Reference is dan beschikbaar en zal een dialoog scherm openen met alle extensies die je aan je project toe kan voegen. Voor iedere extensie is onder andere te zien wie de auteur is, hoe vaak de extensie al is gedownload en welke afhankelijkheden de extensie heeft. Een klik op de install knop zal de extensie en al zijn afhankelijkheden installeren. Ook zal de web.config file worden aangepast voor alle nieuwe referenties.

NuGet.org
Van alle extensies die in Visual Studio te vinden zijn via NuGet, is ook de informatie te bekijken op NuGet.org. De gehele gallery is te vinden in de Packages sectie. Daarnaast is het mogelijk om zelf een steentje bij te dragen aan de open source community, door een eigen package te uploaden. Na het aanmaken van een account krijg je een access key die je de mogelijkheid geeft om pakketten te pushen.

NuGet Package Explorer
NuGet pakketten zijn eigenlijk gewoon zip files met een .nupkg extensie. Om de inhoud van een pakket te bekijken kun je dus de extensie wijzigen naar .zip, maar hier is ook een speciale tool voor: de NuGet Package Explorer. Naast het bekijken van bestaande pakketten kun je met deze tool ook een nieuwe package aanmaken of bestanden in een bestande package bewerken. Daarnaast is het vanuit de NuGet Package Explorer mogelijk om een pakket te publiceren naar de NuGet Gallery. Hiervoor is weer de access key nodig.

Zelf aan de slag
Bekijk de interessante sessie van Haack en Hanselman waarin zij met een flinke dosis humor het gehele proces uitleggen. Tevens laten ze zien hoe PowerShell commando’s en de Command Line kunnen helpen bij het installeren, creëren en publiceren van NuGet pakketten. Dowload vervolgens de benodigde tools van http://nuget.codeplex.com/releases en probeer de tutorials op http://docs.nuget.org/.

Posted Thursday, June 09, 2011 10:00 AM door Ruud van Kessel

Vijf zaken die je over <video> en <audio> moet weten
Vijf zaken die je over </video> en </audio> moet weten

Tijdens de MIX 2011 werd veel aandacht besteed aan de audio- en video-ondersteuning van HTML 5. Een van de sessies werd gegeven door Nigel Parker, een Developer Evangelist uit Nieuw Zeeland. Hij houdt zich onder bezig met Silverlight en HTML 5 Video. Wat zijn nu de vijf belangrijkste zaken die je over <video> en <audio> moet weten? Wij zetten ze op een rij.

#1 – De opbouw van de tags <audio> en <video>
Laten we eerst eens kijken wat er mogelijk is met de tag <audio> en <video>:

<audio<video

src=src=De URL van het materiaal.

width=De breedte van het video-element.

height=De hoogte van het video-element.

poster=De URL van de thumbnail van de video.
preload=preload=(none, metadata, auto). Het starten van de download.
autoplayautoplayDe audio of video begint direct af te spelen.
looploopDe audio of video keert terug naar het begin en herhaalt zich.
controlscontrolsToont de ingebouwde player-knoppen van je browser.
>>
......
</audio></video>

Bekijk hier een codevoorbeeld van HTML 5 Video: http://video.stickon.me/.

#2 – Rekening houden met beperkingen
Eerlijk is eerlijk: HTML 5 kent nog een aantal beperkingen. Ten eerste bestaat er nog geen standaardmanier om video fullscreen af te spelen. Op het moment van schrijven is er ook nog geen mogelijkheid om live-streaming of adaptive streaming te doen op basis van HTML 5. Tot slot kent de HTML 5-specificatie nog geen digital rights management, waarmee je de media kunt beschermen. Volgens Nigel Parker zal dit de komende tijd niet veranderen. In de praktijk zul je daardoor nog altijd met meerdere codecs werken en verschillende resoluties van het materiaal moeten aanbieden. In de verdere tips gaan we hier dieper op in.

#3 – Optimaal encoderen
Bij het encoderen van het bronmateriaal kun je gebruik maken van een aantal ‘best practices’ om de video zo vloeiend mogelijk te laten lopen. Host je je video’s op IIS? Bij IIS kun je Media Services inzetten, en bitrate throttling inzetten om de client optimaal te bedienen. Je kunt hierbij opgeven om bijvoorbeeld zoveel mogelijk van het videomateriaal te downloaden om de eerste 10 seconden van de video te tonen. Of juist aan te geven dat er niet meer materiaal mag worden gedownload dan daadwerkelijk wordt bekeken.

Bij het encoderen naar H.264-video kun je slim gebruik maken van de 3 beschikbare profielen. Allereerst is er het profiel Baseline. Dit is geschikt voor mobiele apparaten. Het gaat hierbij om een relatief groot bestand, maar dat weinig CPU-kracht vraag om te decoderen. Daarnaast is er het profile Main. Dit ligt tussen Basline en High in. Het profiel High levert een kleiner bestand op, maar vraagt meer CPU-kracht om zowel te decoderen als te encoderen. De voorkeur van Parker gaat uit naar de profielen Main en High, met een sterke voorkeur voor High. Je vindt deze profielen bij het encoderen van je video, met behulp van Microsoft Expression Ecoder 4. Hier (http://vid.blob.core.windows.net/mix/MP4HighPresent.xml) vind je het Expression Ecoder 4 High Profile H.264-profiel dat door Nigel tijdens de presentatie is gebruikt).

#4 – Overweeg styling met Canvas
Met Canvas stel je de gebruiker in staat om meer interactie te hebben met de video. Bijvoorbeeld door tussen camera’s te schakelen. Feitelijk wordt hiermee de geselecteerde videoclipping op de canvas getoond.

#5 – Styling met custom controls
Binnen de HTML 5-specificatie kan er gebruik worden gemaakt van de standaard browser-controls. Nigel Parker is hiervan geen voorstander: op het moment van schrijven toont elke browser een eigen set video-controls. Om te zorgen voor een consistente weergave van je materiaal (en speler) is het verstandig om een eigen player te definiëren. Bekijk hier een voorbeeld van Nigel Parker: http://video.stickon.me/Custom.

Dan is er nog de kwestie van fullscreen videoweergave. Op dit moment ondersteunt de specificatie geen fullscreen weergave. Reden hiervoor is dat er nog geen overeenstemming is bereikt over wat er moet gebeuren als de bediening van de gebruiker tijdelijk wordt overgenomen in het geval van een fullscreen weergave. De Opera-community heeft hiervoor een work-around ontwikkeld (meer informatie hierover vind je onder meer op http://www.html5-fullscreen-video.com). Nigel Parker raadt ook aan een blik te werpen op http://sublimevideo.net/. Hier vind je een testomgeving waarin je eigen video’s binnen HTML 5 kunt testen.

De sessie
Benieuwd naar de volledige sessie van Nigel Parker tijdens de MIX 2011? Je vindt deze op: http://blogs.msdn.com/b/nigel/archive/2011/04/14/5-things-you-need-to-know-to-start-using-video-and-audio-today.aspx. Hier vind je ook alle codevoorbeelden en video’s.

Posted Tuesday, June 07, 2011 9:45 AM door Dennis Gandasoebrata