Microsoft WebCamps Brussels - Summary

Last Monday was organized the Microsoft WebCamps event in Brussels. Dedicated to Web developers and UX designers, this one day event enables you to stay up-to-date with the latest stuff. Topics covered included HTML5, jQuery, ASP.NET MVC 3, … And I’m going to share some of my notes here.

Opening keynote

By Scott Hanselman

• Presentation of WebMatrix and the Razor syntax. For “get it done” developers who want, for example, to install and configure a website powered by a CMS for some customer in only a few minutes
• jQuery adoption is so big that Microsoft continues to invest into this library : jQuery UI will also be part of the .NET framework
• Presentation of the new features of ASP.NET MVC 3. ScottGu has written some very interesting articles on the subject, be sure to check them out if you’re interested in MVC 3
• NuGet is a very powerful package installer. With just a few commands, install nInject, Entity Framework, … Time to learn PowerShell has come

How about HTML5 today ?

By Katrien De Graeve

• Slides of the presentation
• Use shims to use HTML5 today (the JS script to make IE recognize the new HTML5 tags)

  <!–[if lt IE 9]>

  <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

  <![endif]–>

• Use a reset CSS (typically to make some of the new elements display as blocks
• Download HTML5 instellisense for Visual Studio
• Use Ray Bango’s templates for Visual Studio
• CSS3 : more control over color (RGBA, …), borders and shadows, fonts (use FontSquirrel to integrate custom fonts on your website)
• Use IE9 developer tools (F12) to change the document mode (to IE8, IE7) to test against previous versions of browsers
• Modernizr : great JS library enabling you to target specific browser functionality in your stylesheet, so you can take advantage of HTML5 and CSS3 while having a compatible site for older browsers
• <video> tag : different codecs supported by browsers. Be sure to create multiple encodings of the same video (by using VLC Media Player for example) or provide a fallback in Flash or Silverlight.

  <video controls>

      <source src="foo.ogg" type="video/ogg">

      <source src="foo.mp4">

      <object … /> <!– Silverlight or Flash –>

  </video>

• Canvas : drawing using JS. Example of application : Pirates love Daisies, a game written using Canvas.
  
• Use Ai to Canvas to convert Adobe Illustrator files to a canvas compliant format
• Canvas (bitmap) != SVG (vector)
• General guidelines :
  • Use feature detection VS browser detection. For each new version, browsers implement more and more the HTML5 spec. So browser detection isn’t a good approach at all
  • Start using HTML5 now ! Don’t wait for the spec to be complete (you would still be waiting for the CSS2 spec to be complete then…)

Come in as a jQuery zero, go out as a jQuery hero

By Gill Cleeren

• Intro of jQuery (selectors, plugins, …) : I’m not going to rewrite the complete course here, just google, the web contains loads of tutorials about that hot subject

OData : open data for the web

By Scott Hanselman

• Web protocol for querying and updating data
• Way to unlock your data and free it from silos that exist in applications today
• Built upon Web technologies such as HTTP, Atom Publishing Protocol (AtomPub) and JSON
• Popular sites such as Netflix and Twitpic use OData :
  • http://odata.netflix.com
  • http://odata.twitpic.com
• Take a look at the official OData website for more info

And that’s it ! Have fun playing with that exciting stuff