December 2011 - Posts
De TechDays, zie #TechDaysNL, komen er alweer snel aan. Maar net zoals vorig jaar zijn er ook dit jaar weer een aantal wildcard sessies die afhankelijk van de stemmen al dan niet op het programma komen.
Ga dus snel naar de lijst en stem op je favoriete sessie!
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl
In deze podcast spreekt Maurice de Beijer met Bart De Smet over het RX framework. Bart werkt bij Microsoft aan de RX librray en verteld hoe deze ontwikkeling oorspronkelijk is begonnen als een onderdeel van een veel groter cloud programmability project.
Link
Enjoy!
TheProblemSolver
www.dotnetevents.nl
Op donderdag 5 januari 2012 beginnen we het nieuwe jaar met een herhaling van de sessie van Maurice de Beijer over HTML5. Deze avond wordt gehost door 4dotnet en zal plaats vinden in Utrecht.
Er wordt al tijden veel over de nieuwe HTML5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML5 moet kiezen voor een nieuwe applicatie?
In deze sessie geeft Maurice de Beijer antwoord op deze vragen. Hij laat onder meer diverse nieuwe HTML5 onderdelen zien als local storage, web sockets, achtergrondtaken en nieuwe elementen zoals de video tag en het canvas. Daarnaast zal hij laten zien hoe je kan omgaan met browsers die de verschillende nieuwe HTML5 onderdelen nog niet ondersteunen.
HTML5 is niet alleen belangrijk als web-taal, maar ook in de nieuwste versie van Windows zal het maken van applicaties op de Windows Runtime met HTML5 een belangrijke optie worden. Dus als je webontwikkelaar bent, als je XAML ontwikkelaar bent en je wilt de ‘concurrentie’ in de gaten houden, of je wilt gewoon op de hoogte blijven van de laatste technieken: hier moet je bij zijn!
Je kan je hier inschrijven.
www.TheProblemSolver.nl
www.dotnetevents.nl
Video has always been a difficult thing on the web. With HTML5 supporting the <video> element that should become a lot easier right? After all you just add a video element, set the source and you are good to go right?
If you create a page like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video demo</title>
<style>
video
{
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"
src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"
controls
autoplay>
HTML5 Video element not supported
</video>
</body>
</html>
And run it in Google Chrome its start playing just like this:
Simple enough right?
However when I open the page in Internet Exporer 9 or FireFox we get this:
The video element loads the movie poster but it doesn’t start playing.
And on Safari or an older version of IE we get:
Turns out that on Windows Safari doesn’t support the HTML5 <video> element and wants users to install and use Quicktime instead. And that even though according to CanIUse.com the video element is supported on the current version of Safari I am running 
So what gives?
The problem with IE9 and FireFox not playing the movie has to do with video formats. While there is an HTML5 definition of the <video> there is no definition of the video source stream. It is left up to the bowser vendors to decide on the supported standard and implement these. And as the vendors can’t agree on a standard we as developers are basically stuck with having to provide multiple video streams with different encodings Not nice but that is politics for you. There is a good table on Wikipedia describing the formats supported in each browser. But the simple story is we need to supply at least 2 formats, for example H264 and WebM.
The solution
In order to fix this we can supply multiple <source> elements and let the browser pick the appropriate format.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video demo</title>
<style>
video
{
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"
controls
autoplay>
<source src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
HTML5 Video element not supported
</video>
</body>
</html>
You can try the effect for yourself here.
One more hurdle
So in IE9 and Chrome this works just fine but in FireFox we still don’t get to see the video. This is strange as FireFox is supposed to be able to display WebM videos, what gives?
The problem is in the way the video stream is served from the web. The video stream is returned with an HTTP header:
Content-Type: text/plain; charset=UTF-8
and it turns out FireFox is a bit picky about the Content-Type. It really wants it to be
Content-Type: video/webm
for it to work. Not a problem if you control the server but in this case I don’t so I can’t fix the problem.
Conclusion
HTML5 video is nice but it certainly isn’t as nice as I hoped when I first started looking at it. But having to encode everything twice isn’t that bad so I guess I can live with the it 
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl
Consider the following problem:
You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.
So for many HTML5 features there are polyfills available that will let you make older browsers like Internet Explorer 7 or 8 work with the newer API. See a possible list of HTML5 polyfills here. However a number of these is JavaScript based and while that works in older browsers their JavaScript engine is often quite slow as well making it hard to work with.
But how about just upgrading the complete browser?
Seems to make far more sense right? Except upgrading from IE8 to IE9 isn’t possible in all cases. One big showstopper can be people still running Windows XP because IE9 requires Windows VISTA as a minimum.
So we can upgrade to another browsers like FireFox or Chrome which has far better HTML5 support. While that technically works it causes headaches as it means people must switch browsers. And worse you might also have to support some site that only works well in IE forcing the users to switch between multiple browsers. Not a problem for techies, I do it all the time, but not much fun for the average end user.
So it turns out there is a great solution out there called Google Chrome Frame.
Users can install Google Chrome Frame in their machine and by default it does nothing noticeable. Only when a specific HTML meta tag X-UA-Compatible is added to the head section does the plugin start working. And then it intercepts the response and starts rendering it using Google Chrome Frame instead. However this is done inside the Internet Explorer window so the user has no clue he or she has just switched to Google Chrome Frame. And just like magic all the cool new HTML5 features supported in Chrome will work in what appears to be IE.
<meta http-equiv="X-UA-Compatible" content="chrome=1">
A simple example
When I try to new up a WebSocket object in IE9 I get the following error.
And with a simple addition of the HTML header the sample starts working. Notice that as far as the end user is concerned he is still using IE9, no changes there whatsoever.
Pretty cool right 
And the good thing is that by default Google Chrome Frame is self updating just like Google Chrome so you know that once installed the plugin will always be up to date.
Detecting Google Chrome Frame
If you want to detect if Chrome Frame is installed ahead of time you can look at the User-Agent header the browser sends to the server. If installed and active Chrome Frame will add chromeframe/X.X.X.X where the X.X.X.X is the version number to the User-Agent string.
So why just add it to a single page?
Enabling Chrome Frame for al pages in a website is easy, just add the following to your web.config
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
You can read the Google Chrome Frame FAQ with lots of extra bits of information here.
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl
In deze podcast spreekt Maurice de Beijer met Bart De Smet over het RX framework. Bart werkt bij Microsoft aan de RX librray en verteld hoe deze ontwikkeling oorspronkelijk is begonnen als een onderdeel van een veel groter cloud programmability project.
Links:
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl
De PowerPoint presentaties van mijn HTML 5 in een vogelvlucht sessie bij Achmea is hier te downloaden en de demo code hier. De presentatie is ook op SlideShare te vinden.
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl