January 2011 - posts - Web

Web

January 2011 - posts

Live streamen in HD-kwaliteit met Smooth Streaming
Live streamen in HD-kwaliteit met Smooth Streaming

Op 2 december vond in Redmond het Silverlight Firestarter evenement plaats. Dit event stond in het teken van de ontwikkelingen en toekomst van Silverlight. Vice-president Scott Guthrie was verantwoordelijk voor de keynote. Voor degenen die niet aanwezig konden zijn bij het event was Firestarter ook live te volgen via internet streaming. Een van de onderdelen die op Firestarter centraal stond was dan ook Smooth Streaming.

Streamen op WP7, iPhone of iPad
Smooth Streaming is technologie voor IIS en Silverlight, ontwikkeld om HD-content consistent te kunnen streamen via internet. De video wordt in verschillende kwaliteiten aangeboden op basis van de CPU van de gebruiker en de beschikbare bandbreedte. Voor het afspelen van de videobeelden wordt gebruik gemaakt van een Silverlight plugin in de internetbrowser. De plugin beoordeelt iedere paar seconden de kwaliteit van de stream, waardoor de gebruiker altijd de beste kwaliteit krijgt voorgeschoteld. Om beelden in Smooth Streaming te maken dien je te beschikken over Expression Encoder Pro of een hardware encoder. Voor de hosting is IIS vereist. Smooth Streaming maakt gebruik van IIS Media Services 4.0, een gratis add-on voor IIS, zowel op Windows 7 als Windows Server. IIS Media Services biedt streamondersteuning voor zowel on-demand als live streaming. De stream kan niet alleen worden afgespeeld op besturingssystemen als Windows, MacOS of Linux, maar ook op devices als Windows Phone 7, iPhone of iPad. Hierdoor is mobiele streaming mogelijk.

Low-latency live streaming
Een andere nieuwe functionaliteit is de mogelijkheid tot low-latency live streaming. Hierbij kan de ‘vertraging’ van stream naar client worden teruggebracht naar 2 seconden. Normaal kan deze vertraging zo’n 15 seconden bedragen. Deze low-latency is erg handig bij bijvoorbeeld het streamen van financiële updates, die vrijwel continu worden ververst. De Smooth Streaming-technologie is uitvoerig getest tijdens de Olympische Spelen Zomerspelen van 2008 en de Olympische Spelen Winterspelen van 2010. De sportwedstrijden waren hierbij live in 720p streaming te volgen. Met de nieuwste software is ook 1080p mogelijk, wat de kwaliteit sterk verbetert.

Content beschermen
Met Expression Encoder is het eenvoudig om videostreams te publiceren naar Silverlight. Je hoeft slechts een paar eenvoudige stappen te doorlopen om een stream op te zetten. Dit kost dan ook vaak niet meer dan een paar minuten. Expression Encoder biedt ook de mogelijkheid om Microsoft PlayReady-technologie te gebruiken om bestanden te versleutelen met Digital Rights Management (DRM). Hiermee verzeker je jezelf dat alle content is beschermd volgens je eigen specificaties.
Smooth Streaming biedt gebruikers de kans om op eenvoudige wijze video te streamen, met hoge kwaliteit en minimale latency. Hiermee kan een hoog bereik worden gehaald. Een voorbeeld hiervoor is Maximum TV, een online platform in de Verenigde Staten gericht op Hispanics (Amerikaanse burgers met een Spaanse of Portugese achtergrond). Maximum TV voorziet de doelgroep van live en on-demand televisie. Hiermee wordt een publiek van 20 tot 30 miljoen kijkers bereikt. Kortom, Smooth Streaming is een ontwikkeling die we goed in de gaten moeten houden.

Screenshot Maximum.TV

Posted Thursday, January 27, 2011 11:00 AM door Martijn Nooij

Altijd een goed begin met WebMatrix en Razor
Altijd een goed begin met WebMatrix en Razor

We weten ondertussen dat het opzetten van een nieuwe website erg snel en eenvoudig kan met WebMatrix. Er zijn templates beschikbaar wanneer je een applicatie from scratch wilt opbouwen, of je kunt je favoriete content management systeem (DotNetNuke, Umbracco, Word Press, Joomla, etc.) met een paar klikken klaarzetten. En door de ondersteuning van de Razor syntax houd je de code leesbaar en kun je gebruik maken van krachtige helper methoden. Dit is voor de beginnende developer en voor developers die snel een basis willen hebben staan uitermate handig. Maar wat als de functionaliteit van Razor op een gegeven moment ontoereikend is voor je project? Als je gebruik wilt maken van alle professionele tools die Visual Studio je biedt, in combinatie met MVC 3, is het dan nog wel handig om überhaupt te starten met WebMatrix?

Vooral op het gebied van debugging en testing heeft Visual Studio met ASP.NET MVC 3 op dit moment veel meer te bieden dan WebMatrix. Toch hoeft dit niet een reden te zijn om WebMatrix volledig links te laten liggen. Want naast de snelheid en eenvoud waarmee je in WebMatrix je projecten start, wordt met Razor een view-engine aangeboden die volledig compatible is met Visual Studio en MVC 3. Op deze manier kun je naadloos over gaan op Visual Studio zodra je daar aan toe bent, terwijl je je volledige project al hebt opgebouwd volgens het krachtige Model View Controller principe met Razor.

De gedachte achter iedere view-engine is om de layout te scheiden van de programmatuur die de werking van de site beïnvloedt. Door deze onderdelen te scheiden zijn ze onafhankelijk van elkaar te ontwikkelen en te testen. Dit kan tijd schelen en verhoogt de flexibiliteit. Toch zal er ergens binnen het project moeten worden gezorgd dat de layout de achterliggende functionaliteit laat zien. Dankzij de Razor syntax blijft de layout code vrij van onnodige syntax. Een voorbeeld zijn de layout templates die kunnen worden gebruikt om een verzameling pagina’s allemaal dezelfde layout mee te geven, door bijvoorbeeld alle globale css en js bestanden in te laden. Om aan te geven waar de body van de verschillende pagina’s moet komen is in de layout template de aanroep @RenderBody() voldoende. In deze body kan een lijst worden opgenomen op de volgende manier:

<ul>
@foreach(var p in Model) {
<li>@p.ProductName</li>
}
</ul>

Deze lijst wordt opgebouwd in de layout (View), maar de productnamen worden uit de achterliggende class Product (Model) gehaald. Dit voorbeeld komt uit een eerdere post van Scott Guthrie, die het gebruik van Razor en MVC 3 uitgebreid beschrijft. Houd daarbij dus in het achterhoofd dat al deze Razor functionaliteit nu al te gebruiken is met WebMatrix en dat op ieder gewenst moment kan worden overgestapt naar Visual Studio wanneer toch echt die professionele debugging tools vereist zijn.

Posted Tuesday, January 25, 2011 11:00 AM door Ruud van Kessel

Frame Rate Fest: Toon de wereld je HTML5 skills

HTML5 wordt gezien als de toekomstige standaard van het web. Met HTML5 wordt het mogelijk om complexe bewerkingen en animaties zonder ingewikkelde scripts of browser plug-ins weer te geven. De ingebouwde hardware versnelling in Internet Explorer 9 maakt het mogelijk om nog meer de grenzen op te zoeken van wat er tot nu toe mogelijk is. Niet voor niets wordt HTML5 daarom door sommigen gezien als de vervanger van Flash en Silverlight. Toch blijft Microsoft investeren in de toekomst van Silverlight, maar dan vooral als platform voor video streaming, business applicaties en als basis voor de Windows Phone. Daarnaast werkt Microsoft hard mee aan het rond krijgen van de HTML5 standaard. Zo is Microsoft sinds oktober vorig jaar Co-chair van de “web performance” werkgroup van W3C.

Inmiddels wordt er door designstudio’s en HTML(5) hobbyisten, geëxperimenteerd met HMTL5. Steeds meer van deze experimenten en studies over HTML5 vinden hun weg naar het web, maar een centrale plek hiervoor was er tot nu toe nog niet. Juist daarom lanceert Microsoft een internationaal en centraal podium onder de noemer: FrameRate Fest.

FrameRate Fest start met een online competitie onder internet innovators, developers & designers. Bij het lanceren van de site zullen 10 HTML5 frames live staan, die zijn ontwikkeld door verschillende leading HTML5 developers. Met deze frames worden andere developers uitgedaagd om hun eigen frame te ontwikkelen en te uploaden naar de site. De uiteindelijke winnaar wordt gekozen door de bezoekers van de site, maar ook de mening van participerende blogs telt mee. Bezoekers hebben verschillende mogelijkheden om hun voorkeur aan te geven, waaronder een directe vote op frames op de site zelf, het ‘liken’ van frames op Facebook of het tweeten over hun favoriete frame (met de hashtag #frameratefest plus de naam van hun favoriete frame).

Microsoft creëert hiermee een unieke samenwerking met elk blog dat participeert. Voor elk blog wordt een eigen prijs in het leven geroepen. De beoordelingscriteria worden gedefinieerd in overleg met het blog, al blijft HMTL5 altijd een cruciale rol spelen. Zo kan een blog die de nadruk op design legt ervoor kiezen om dit aspect zwaarder te laten wegen in de keuze van haar winnaar. Vanzelfsprekend is ook de uiteindelijke prijs die een blog aan haar geselecteerde winnaar toekent hierop afgestemd.

De ingezonden frames die samen de eerste officiële HTML5 proefvijver vormen, leveren op hun beurt de blogs weer relevante content op, op het gebied van innovatie, techniek en design binnen HTML5. Tijdens de start participeren drie Nederlandse en een internationaal blog. Elk blog selecteert gedurende vier tot zes weken een frame van de week. Uiteindelijk kiest elk blog een winnaar.

Voor iedereen die zich bezighoudt met HTML5, biedt FrameRate Fest een interessant internationaal podium om hun skills te tonen. De maker kan zijn naam en portfolio aan zijn frame koppelen en kan zo rekenen op nationale en internationale publiciteit, met name wanneer zijn frame goed wordt gewaardeerd.

Voor Microsoft is het een manier om haar betrokkenheid aan de HTML5 standaard te tonen en de voordelen van Internet Explorer 9 met hardware versnelling te laten zien. Voor meer informatie en de nieuwste frames ga je naar http://www.frameratefest.com/ of www.frameratefest.nl.

Posted Monday, January 24, 2011 10:00 AM door Ruud van Kessel

Web development voor Windows Azure
Web development voor Windows Azure

Met Windows Azure neemt Microsoft de zorg weg voor het beheer van webservers, omdat zij zelf zorgdragen voor het onderhoud van de Azure servers en de ontwikkelaar slechts verantwoordelijk is voor de packages die hij uploadt. Packages kunnen vanuit een ontwikkelomgeving zoals WebMatrix eenvoudig naar een Azure live server worden gepubliceerd. En omdat Windows Azure IIS als webserver gebruikt en deze ook PHP ondersteunt is het ook mogelijk om je PHP code te draaien op Windows Azure. Dankzij een aantal verbeterde tools is het uploaden en beheren van je packages nu nog eenvoudiger.

Windows Azure Command line Tools
Met de Windows Azure Command line Tools voor PHP is het mogelijk om met een commando de benodigde bestanden te genereren voor het uploaden van een package in de Cloud omgeving. De command line tool zelf (package.php) is ook op PHP gebaseerd en kan daarom op de volgende manier worden aangeroepen:

package.php --project=MyProject [--source=/../file.php][--target=/../dir_t/]

Dit levert een package file (.cspkg) en een configratie file (.cscfg) die direct zijn te uploaden in de Cloud omgeving. Bekijk deze uitgebreide tutorial voor het creëren van de package bestanden en het vervolg voor het live zetten met Windows Azure.

Windows Azure Tools voor Eclipse
Voor degenen die Eclipse gebruiken als IDE is het ook mogelijk om door middel van de Windows Azure Tools voor Eclipse de package files direct vanuit de IDE naar Windows Azure te uploaden. De installatie van deze tool zorgt ervoor dat het mogelijk is om binnen Eclipse een Azure Project aan te maken, met deze extra functionaliteit. Naast de juiste Azure gegevens is er ook een certificaat nodig om de verbinding met de Cloud op te zetten. Hoe je dit certificaat aanmaakt kun je lezen in deze blogpost van Brian Swan, waarin hij alle stappen uitgebreid beschrijft.

Windows Azure Compagnion
Met de Windows Azure Compagnion is het mogelijk om automatisch frameworks en applicaties te installeren wanneer je die nodig hebt voor je website. Voorbeelden zijn WordPress en Joomla, maar je kunt zelf je eigen lijst samenstellen. Omdat de Windows Azure Compagnion zelf een Azure package is bestaat deze ook uit een .cspkg- en een .cscfg bestand, die op gebruikelijke wijze te uploaden zijn. Het samenstellen van je eigen lijst kan door een xml feed op te geven in het config (.cscfg) bestand, houd hierbij wel rekening met de vereiste structuur (bekijk een voorbeeld feed). Na het uploaden van de package kan het installeren van de applicaties beginnen via de Compagnion url: http://<yourdeploymentname>.cloudapp.net:8080.

Full IIS
Een andere, meer algemene, update die sinds de lancering van de Windows Azure SDK v1.3 is geïmplementeerd, is de Full IIS integratie binnen het Windows Azure platform. Daardoor is het nu bijvoorbeeld mogelijk om meerdere sites onder dezelfde WebRole te draaien of met virtuele applicaties te werken. Omdat de processtructuur van Full IIS anders is ingedeeld van die van het eerder gebruikte Hosted Web Core (HWC) component, kunnen applicaties onder Full IIS in sommige gevallen ander gedrag vertonen. Lees in dat geval deze post over het verschil tussen HWC en Full ISS.

Posted Thursday, January 20, 2011 11:00 AM door Ruud van Kessel

WebMatrix en MVC 3 gelanceerd op CodeMash
WebMatrix en MVC 3 gelanceerd op CodeMash

Afgelopen donderdag lanceerde Microsoft de eerste officiële versie van WebMatrix tijdens het CodeMash event in Ohio. Dankzij een video stream was de volledige sessie - met de titel Enter the WebMatrix – voor de gehele wereld te live te volgen. Maar voor wie het event toch heeft moeten missen is het videomateriaal beschikbaar gemaakt op http://www.microsoft.com/web/enter/. Hieronder volgt een greep uit deze interessante videofragmenten.

De opening, door Architect Evangelist Josh Holmes, bevat in vogelvlucht alle mogelijkheden van WebMatrix en MVC 3 die vanaf nu beschikbaar zijn. Tussendoor komen sprekers aan bod die live deze features demonstreren.

Zo laat collega James Senior zien hoe je from scratch een applicatie opzet in WebMatrix. Hiervoor gebruikt hij één van de templates die standaard in WebMatrix beschikbaar zijn. Dergelijke templates bevatten ook meteen sample data waarmee kan worden getest. Daarnaast zien we hoe eenvoudig Razor syntax is op te nemen in de sourcecode. Door zogenaamde Helpers te gebruiken kan optimaal gebruik worden gemaakt van Razor. Voorbeelden zijn de Bit.ly-helper, voor het plaatsen van korte URLs, de Facebook-helper, waarmee bijvoorbeeld snel een like-button mee kan worden gegenereerd of de PayPal-helper om een compleet betalingsproces in een site te integreren. (Om te zien welke helpers er nog meer zijn, bekijk je het totaaloverzicht). De helpers installeer je via een webinterface, die te benaderen is via http://localhost:[poortnummer]/_admin zodra WebMatrix gestart is. Jason Smit laat zien dat dezelfde webinterface kan worden gebruikt om templates van externe partijen te installeren, zoals die van TemplateMonster.

Shawn Walker en Joe Brinkman zijn de mede oprichters van DotNetNuke en laten in een korte demo zien hoe je een DotNetNuke site kunt opzetten, aanpassen en publiceren met WebMatrix. Verder tonen ze dat ook de templates van DotNetNuke zelf vanaf nu Razor ondersteunen.

Dat het opzetten van een PHP site net zo eenvoudig gaat, laat Ryan Ozimek van Joomla zien. Hij gaat daarbij dieper in op het gebruik van MySQL en demonstreert hoe een MySQL database door middel van WebMatrix is te beheren en vervolgens kan worden gepubliceerd naar een live omgeving.

Omdat ook ASP.NET MVC Framework 3 vanaf nu te downloaden is, demonstreert James Senior ook daarvan de nieuwste functionaliteit. Waaronder onder meer Razor view ondersteuning, de NuGet package installer en de validatie van jQuery.

Na afloop van deze grootse opening komen ook nog eens uitgebreid de verschillende partners aan het woord. Zo worden we op de hoogte gehouden van de nieuwste features in DotNetNuke, Drupal en op het gebied van e-commerce met PayPal. Bekijk ook deze gesprekken op http://www.microsoft.com/web/enter/ of bekijk een gedetailleerde beschrijving van de opening op de blog van Josh Holmes zelf.

Posted Tuesday, January 18, 2011 11:00 AM door Ruud van Kessel

Start het jaar met wat nieuws: Razor & Orchard.

De start van het nieuwe jaar is natuurlijk een mooie gelegenheid om je eens te verdiepen in nieuwe ontwikkelingen op het gebied van webdevelopment. Wellicht wil je het in 2011 eens net wat anders aan gaan pakken dan de jaren daarvoor. Omdat de technologie voor webontwikkeling voortdurend aan verandering onderhevig is, geven wij je alvast twee tips die je op weg kunnen helpen.

Houd je code leesbaar met Razor.
Afgelopen zomer kondigde Scutt Guthrie Razor aan, een nieuwe view-engine met een eenvoudige syntax waardoor deze gemakkelijk te gebruiken is én de sourcecode leesbaar blijft. In de blogpost van Guthrie waren toen al een aantal voorbeelden beschikbaar waarin werd uitgelegd hoe je deze syntax gebruikt, maar ondertussen is er een compleet (282 pagina’s tellend) e-book uitgekomen met de titel: ASP.NET Web Pages Using The Razor Syntax. Dit boek is de ideale gids wanneer je wilt beginnen met het gebruik van Razor. Zo wordt er in het eerste hoofdstuk beschreven hoe je WebMatrix installeert. Op deze manier heb je meteen een kant-en-klaar environment draaien, waarbinnen je de gegeven voorbeelden direct kunt testen.

Zodra WebMatrix up-en-running is, kun je zelf door het aanmaken van .cshtml bestanden de vele voorbeelden uitproberen. Het wordt duidelijk hoe eenvoudig HTML met programmacode is af te wisselen binnen de Razor syntax. Dit voorbeeld van een for-loop laat zien dat de broncode goed leesbaar blijft:

@for(var i = 10; i < 21; i++)
{
<p style='font-size: @(i + 'pt')'>My font size is now: @i</p>
}

De Razor syntax parser herkent automatisch het verschil tussen Razor en HTML waardoor er hierboven zonder additionele syntax een <p> element binnen de Razor for-loop geplaatst kan worden.

Het boek behandelt het gebruik van Razor binnen veel gebruikte principes van webontwikkeling, zoals het gebruik van formulieren, databases, afbeeldingen en video, het lezen en schrijven naar externe bestanden, foutafhandeling en het opsporen van fouten. Door de duidelijke onderverdeling in onderwerpen is dit boek ook handig als naslagwerk te gebruiken wanneer de opgedane kennis later in praktijk wordt gebracht.

Gebruik Orchard als CMS van je nieuwe webpagina.
Orchard is een open source .NET-initiatief van Microsoft, met als doel herbruikbare .NET componenten beschikbaar te maken voor ontwikkelaars. Momenteel richt men zich vooral op de ontwikkeling van het .NET-content management systeem, waarmee snel en eenvoudig content-based websites opgezet kunnen worden. De 1.0 versie hiervan wordt halverwege januari verwacht.

Wanneer je toch de Web Platform Installer en WebMatrix hebt geïnstalleerd om eens te testen met Razor, is het een mooi moment om ook Orchard uit te proberen. Deze installeer je simpelweg door de Orchard-feed in de WebPlatform Installer in te voeren (bekijk hoe) en de stappen te volgen. Vervolgens kun je WebMatrix weer gebruiken om de sourcecode te bekijken en je eerste Orchard project te testen. Als je ervoor zorgt dat in WebMatrix de webserver het .NET 2 (integrated) framework gebruikt, is de Run-knop voldoende om het project te starten en verder vanuit de browser de site op te bouwen. Dit doe je door in het admin gedeelte pagina’s of blogposts aan te maken. Ook kun je hier verschillende themes voor je pagina kiezen. En zo heb je binnen korte tijd een mooi werkende content-based website opgezet.

Posted Tuesday, January 11, 2011 11:00 AM door Ruud van Kessel

Silverlight vs. HTML 5

HTML 5 is hard op weg om de nieuwe standaard te worden voor de weergave van content in de browser. Microsoft maakt met IE9 een grote sprong voorwaarts wat betreft de ondersteuning van deze standaard en draagt ook actief bij aan het testen hiervan. Maar tegelijkertijd wordt er onverminderd geïnvesteerd in de toekomst van Silverlight. Zo staat de beta release van Silverlight 5 alweer gepland voor de eerste helft van 2011. Maar wat is voor webontwikkelaars nu de beste techniek om de pijlen op te richten bij de ontwikkeling van nieuwe webprojecten? We bekijken beide technieken.

HTML 5 standaard of (nog) niet?
Het is de grootste ergernis van menig webdeveloper: een nieuw ontwikkelde website ziet er pico bello uit in browser X, maar is in browser Y niet om aan te zien. Uiteraard zijn er talloze mooie tools beschikbaar om dit uitgebreid te testen (zie bijvoorbeeld SuperPreview), maar het blijft onnodig veel tijd kosten om alle content browsercompatibel te maken. Een nieuwe standaard waar iedere browser zich aan houdt is dus meer dan welkom. HTML 5 moet deze nieuwe standaard worden, maar helaas moet er nog erg veel werk verzet worden om de gehele standaard volledig te specificeren. Tot die tijd blijft het mogelijk dat verschillende browsers er hun eigen HTML 5-interpretatie op na houden.

Naast de verschillen in interpretatie moet een webdeveloper ermee rekening houden dat er nog een groot deel van de bezoekers niet beschikt over een browser die HTML 5 ondersteunt. Zo wordt er momenteel nog door bijna 25% van de internetgebruikers Internet Explorer 6 of 7 gebruikt (bron: netmarketshare). Het is nog de vraag of deze groep vlot overstapt, zodra IE9 officieel wordt uitgebracht. Er zal dus wederom moeten worden getest hoe het HTML 5-gebruik uitpakt bij oudere browserversies, en waar nodig zal alternatieve content beschikbaar moeten zijn.

Eerlijk is eerlijk: het zal nog wel even duren voordat de visuele verrijking die HTML 5 te bieden heeft daadwerkelijk voor iedereen beschikbaar is.

De focus van Silverlight
In Silverlight is nu al vrijwel alles mogelijk wat ook in HTML 5 beschikbaar komt. Op sommige punten gaat Silverlight zelfs verder. Toch zorgt de verplichte installatie van de Silverlight plugin voor een vermindering in de toegankelijkheid als je dit vergelijkt met HTML. Het is dus raadzaam om na te gaan welke toegevoegde waarde Silverlight heeft voor de bezoeker. Duidelijk is dat deze toegevoegde waarde voor Silverlight vooral gevonden zal worden in de gebieden waarop Microsoft zich steeds meer richt: Video Streaming en Business Applications.

Silverlight biedt met haar Smooth Streaming ondersteuning voor desktops en mobile devices en daarnaast is het Digital Rights Management-systeem een perfect platform voor het streamen van (live) video. Wat Silverlight verder krachtig maakt is de mogelijkheid om via de browser applicatiecode te draaien. Hierdoor kunnen er complexe (business) systemen via internet worden aangeboden. Het is dan dus niet meer nodig om voor alle gebruikers softwarepakketten te installeren.

Wat te kiezen
Bij het maken van de keuze tussen Silverlight en HTML 5 zijn vooral het doel van de webapplicatie en de uiteindelijke doelgroep van belang. Is het de bedoeling dat er video’s beschikbaar zijn of wil je een ingewikkelde (business) applicatie eenvoudig en aantrekkelijk voor de bezoeker aanbieden? Dan is de keuze voor Silverlight snel gemaakt. Wil je echter vooral een visueel aantrekkelijke pagina maken? Dan is de keuze wat lastiger: Als je kunt leven met het feit dat nog niet iedereen de door jou ontworpen eye-candy volledig kan bekijken, dan is HTML5 een mooie lightweight oplossing. Als je zoveel mogelijk gebruikers je werk wilt presenteren, overweeg dan het gebruik van Silverlight voor de verschillende visuele elementen op de site.

Posted Tuesday, January 04, 2011 10:00 AM door Ruud van Kessel