|
|
| Dive into HTML5 this summer |
If you've got some spare time this summer to immerse yourself in some new technologies, then take a look at the various fascinating sources this page has to offer you for getting the extra info you need.
First watch the introductory video and then decide how much time you'd like to spend on the topic you want. We've got all the information you need to get started on the topic of your choice!
Select how much time you can spend |
.gif)
.gif)
.gif)
|
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="margin-top:15px;" width="825">
<tr>
<td colspan="3" height="29" style="background-image:url('ff718229.borderTopGrey2.gif');" width="825"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785">
<h2>HTML5 and related technologies</h2>
<p>
<img alt="HTML 5" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.logo_html5(nl-be,MSDN.10).jpg" title="HTML 5" />
</p>
<p>HTML5 is currently quite a buzzword. But, in essence, should you care? Should you learn it? If you are involved with front-end applications and websites, we think you should. Summer might just be the perfect time to get into the shade with a computer, a book or video-player and dive into HTML5.</p>
<p>With Internet Explorer 9, Microsoft demonstrated its continued investment in standards. And it's not stopping; you can already discover <a runat="server" target="_blank" href="https://ietestdrive.com/">Internet Explorer 10 Platform Preview</a>. If you look at what has been unveiled around Windows 8 you know HTML5 and JavaScript will be strong. So now is the time to take your skills up a level, just before the <a runat="server" target="_blank" href="https://www.buildwindows.com/">BUILD developer conference</a> in Anaheim California where more about the development platform for Windows 8 will be revealed.</p>
<p> </p>
</td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785">
<table border="0" cellpadding="0" cellspacing="0" width="785">
<tr>
<td style="background-image:url('ff718229.klokHalfUur.gif'); background-repeat:no-repeat; background-position: top left;" width="66"> </td>
<td valign="top" width="785">
<h3>
<a name="halfuur" xmlns:ms="urn:schemas-microsoft-com:xslt">In half an hour</a>
</h3>
<p>
<a runat="server" target="_blank" href="http://www.w3.org/html/logo/">HTML5</a> is an umbrella of different technologies. It holds the future of the web, with technologies such as HTML markup, CSS3, Web Applications (APIs), SVG and ECMAScript. Some of the HTML5 specs are final, some are very much experimental and not ready for prime time.</p>
<p>You need to know where it stands. What's the buzz, what's the essence? We have one video for you: Giorgio Sardo, Sr Technical Evangelist at Microsoft explains "<a runat="server" target="_blank" href="https://channel9.msdn.com/events/mix/mix11/htm17">The Future of HTML5</a>".</p>
<p>OK, we admit that the video is actually more than 30 minutes long, but we promise it's worth it. Just watch the first 30 minutes if you don't believe us.</p>
</td>
</tr>
</table>
</td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="25" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785"> </td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785">
<table border="0" cellpadding="0" cellspacing="0" width="785">
<tr>
<td style="background-image:url('ff718229.klokHalveDag.gif'); background-repeat:no-repeat; background-position: top left;" width="66"> </td>
<td valign="top" width="785">
<h3>
<a name="halvedag" xmlns:ms="urn:schemas-microsoft-com:xslt">In half a day</a>
</h3>
<p>To put things into perspective around standards, both stable and unstable, we recommend the official IE team blog post: "<a runat="server" target="_blank" href="https://blogs.msdn.com/b/ie/archive/2010/12/21/html5-site-ready-and-experimental.aspx">HTML5, Site-Ready and Experimental</a>"</p>
<h2>Write HTML5 today: set up your machine with the right tools</h2>
<ol>
<li>Make sure you <a runat="server" target="_blank" href="https://msdn.microsoft.com/ie/">download and install Internet Explorer 9</a> to test your sites and build HTML5 experiences.</li>
<li>Download the stand-alone version of <a runat="server" target="_blank" href="https://ietestdrive.com">Internet Explorer 10 Platform Preview</a>. This allows you to test and give feedback to the team.</li>
<li>
<strong>Visual Studio 2010 or the free Visual Web Developer Express 2010</strong>
<br />Download the <a runat="server" target="_blank" href="http://www.hanselman.com/blog/announcingthewebstandardsupdatehtml5supportforthevisualstudio2010editor.aspx">Standards Update</a> with diagram and intellisense support for HTML5 specs, CSS3 and some DOM (JavaScript) APIs.</li>
<li>
<strong>ASP.NET MVC 3 Tools Update</strong>
<br />ASP.NET MVC 3 already supports HTML5 today. Read more on Scott Guthrie's blog: <a runat="server" target="_blank" href="https://weblogs.asp.net/scottgu/archive/2011/05/09/html5-improvements-with-the-asp-net-mvc-3-tools-update.aspx">HTML5 Improvements with the ASP.NET MVC 3 Tools Update</a></li>
</ol>
</td>
</tr>
</table>
</td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="25" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785"> </td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785">
<table border="0" cellpadding="0" cellspacing="0" width="785">
<tr>
<td style="background-image:url('ff718229.klokHeleDag.gif'); background-repeat:no-repeat; background-position: top left;" width="66"> </td>
<td valign="top" width="785">
<h3>
<a name="heledag" xmlns:ms="urn:schemas-microsoft-com:xslt">In a full day</a>
</h3>
<p>HTML5 and JavaScript skills are something you don't brush up in a few hours or even in a whole day. They require reading, but also ultimately get into coding. Here are some highly recommended resources to help you.</p>
<h2>Top resources</h2>
<ul>
<li>
<a runat="server" target="_blank" href="https://msdn.microsoft.com/ie/">MSDN IE Developer Center</a>
</li>
<li>
<a runat="server" target="_blank" href="https://msdn.microsoft.com/en-us/ie/aa740476">HTML5 tutorials and samples</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.css3.info/">http://www.css3.info/</a>
</li>
<li>
<a runat="server" target="_blank" href="https://msdn.microsoft.com/en-us/scriptjunkie/">SciptJunkie</a>
</li>
<li>
<a runat="server" target="_blank" href="http://webstandardssherpa.com/">Web Standards Sherpa</a>
</li>
<li>
<a runat="server" target="_blank" href="http://dev.w3.org/html5/html-author/">A Web Developer's Guide to HTML5</a> (by the World Wide Web Consortium, W3C)</li>
</ul>
<p> </p>
<h2>Demos</h2>
<ul>
<li>
<a runat="server" target="_blank" href="https://www.beautyoftheweb.com/#/experience">Beauty of the Web</a>
</li>
<li>
<a runat="server" target="_blank" href="https://ietestdrive.com">IE Test Drive</a>
</li>
<li>
<a runat="server" target="_blank" href="http://ie.microsoft.com/testdrive/mobile">Mobile test drive site (HTML5 demos for mobile browsers)</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.frameratefest.com/">Framerate Fest</a>
</li>
<li>
<a runat="server" target="_blank" href="http://disneydigitalbooks.go.com/tron/">Disney's Tron Legacy</a>
</li>
<li>
<a runat="server" target="_blank" href="https://windowsteamblog.com/ie/b/ie/archive/2011/06/09/18-reasons-to-love-html5-and-start-pinning-in-ie9-the-winners-of-dev-unplugged.aspx">Discover the winners of the HTML5 and IE developer contest</a>
</li>
</ul>
<p> </p>
<h2>Tools</h2>
<ul>
<li>
<a runat="server" target="_blank" href="https://visitmix.com/work/ai2canvas/">AI > Canvas (Adobe Illustrator to Canvas exporter)</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.fiddler2.com/fiddler2">Fiddler</a> (free tool)</li>
<li>
<a runat="server" target="_blank" href="http://expression.microsoft.com/en-us/gg998780.aspx">Expression Web 4 SuperPreview</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.xiconeditor.com/">Create your high-res icons online with this HTML5 tool</a>
</li>
<li>Internet Explorer 9 Developer Tools: Discover how the <a runat="server" target="_blank" href="http://www.netmagazine.com/features/discover-f12-developer-tools-ie9">improved Developer tools (F12 devtools)</a> can help you in learning HTML5, testing, debugging and optimizing your applications (and <a runat="server" target="_blank" href="https://msdn.microsoft.com/en-us/library/dd565622(v=vs.85).aspx">more on MSDN</a> ).</li>
</ul>
<p> </p>
<h2>JavaScript and CSS frameworks</h2>
<ul>
<li>
<a runat="server" target="_blank" href="http://html5boilerplate.com/">HTML5 Boilerplate, useful HTML5 template</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.modernizr.com/">Modernizr, JavaScript library for checking HTML5 capabilities within browsers</a>
</li>
<li>
<a runat="server" target="_blank" href="http://www.jquery.com">jQuery</a>
</li>
<li>
<a runat="server" target="_blank" href="http://raphaeljs.com/">Raphaël, a library for simplifying working with vector graphics (SVG, VML)</a>
</li>
<li>
<a runat="server" target="_blank" href="http://easeljs.com/">EaselJS, a library for working with the HTML5 Canvas element</a>
</li>
</ul>
<p> </p>
<h2>Blogs</h2>
<ul>
<li>
<a runat="server" target="_blank" href="https://blogs.msdn.com/b/ieinternals/">Eric Lawrence's IE Internals blog</a>
</li>
<li>
<a runat="server" target="_blank" href="https://blogs.msdn.com/b/ie/">IE Engineering blog</a> (Must bookmark, read, add to RSS for in-depth posts by the IE team)</li>
<li>
<a runat="server" target="_blank" href="https://blogs.msdn.com/b/giorgio/">Microsoft's Giorgio Sardo</a>
</li>
<li>
<a runat="server" target="_blank" href="http://remysharp.com/">Remy Sharp, author and HTML5 guru</a>
</li>
</ul>
<p> </p>
<h2>Videos to watch online or download</h2>
<table>
<tr>
<td>
<img alt="Application Development with HTML5" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.video_html5(nl-be,MSDN.10).jpg" title="Application Development with HTML5" />
</td>
<td width="10"> </td>
<td>
<p>
<strong>Application Development with HTML5</strong>
</p>
<p>
<a runat="server" target="_blank" href="https://channel9.msdn.com/events/teched/northamerica/2011/dev343">https://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DEV343</a>
</p>
</td>
</tr>
<tr>
<td>
<img alt="50 Performance Tricks to Make Your HTML5 Web Sites Faster" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.video_html02(nl-be,MSDN.10).jpg" title="50 Performance Tricks to Make Your HTML5 Web Sites Faster" />
</td>
<td> </td>
<td>
<p>
<strong>50 Performance Tricks to Make Your HTML5 Web Sites Faster</strong>
</p>
<p>
<a runat="server" target="_blank" href="https://channel9.msdn.com/events/mix/mix11/htm01">https://channel9.msdn.com/Events/MIX/MIX11/HTM01</a>
</p>
</td>
</tr>
<tr>
<td>
<img alt="Hot from the Labs: HTML5 WebSockets" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.video_html03(nl-be,MSDN.10).jpg" title="Hot from the Labs: HTML5 WebSockets" />
</td>
<td> </td>
<td>
<p>
<strong>Hot from the Labs: HTML5 WebSockets</strong>
</p>
<p>
<a runat="server" target="_blank" href="https://channel9.msdn.com/events/mix/mix11/htm10">https://channel9.msdn.com/Events/MIX/MIX11/HTM10</a>
</p>
</td>
</tr>
<tr>
<td>
<img alt="HTML5 for Silverlight Developers" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.video_html04(nl-be,MSDN.10).jpg" title="HTML5 for Silverlight Developers" />
</td>
<td> </td>
<td>
<p>
<strong>HTML5 for Silverlight Developers</strong>
</p>
<p>
<a runat="server" target="_blank" href="https://channel9.msdn.com/events/mix/mix11/htm14">https://channel9.msdn.com/Events/MIX/MIX11/HTM14</a>
</p>
</td>
</tr>
</table>
<p> </p>
<h2>Internet Explorer resources</h2>
<ul>
<li>
<a runat="server" target="_blank" href="https://www.buildmypinnedsite.com">Site pinning made easy</a>
</li>
<li>
<a runat="server" target="_blank" href="http://html5labs.interoperabilitybridges.com/">HTML5 Labs: experiment with HTML5 prototypes</a>
</li>
<li>
<a runat="server" target="_blank" href="http://ie.microsoft.com/testdrive/info/downloads/default.html">Internet Explorer 10 Platform Preview</a>
</li>
<li>
<a runat="server" target="_blank" href="https://go.microsoft.com/fwlink/?linkid=201990">Internet Explorer Product Guide</a>
</li>
</ul>
<p> </p>
<h2>Books</h2>
<table>
<tr>
<td>
<img alt="Introducing HTML5" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.boek01(nl-be,MSDN.10).jpg" title="Introducing HTML5" />
</td>
<td width="10"> </td>
<td>
<a runat="server" target="_blank" href="http://introducinghtml5.com/">Introducing HTML5</a>
</td>
</tr>
<tr>
<td>
<img alt="Stunning CSS3" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.boek02(nl-be,MSDN.10).jpg" title="Stunning CSS3" />
</td>
<td> </td>
<td>
<a runat="server" target="_blank" href="http://stunningcss3.com/">Stunning CSS3</a>
</td>
</tr>
<tr>
<td>
<img alt="Developing with Web Standards" border="0" src="https://msdn.microsoft.com/nl-be/ff793345.boek03(nl-be,MSDN.10).jpg" title="Developing with Web Standards" />
</td>
<td> </td>
<td>
<a runat="server" target="_blank" href="http://devwws.com/">Developing with Web Standards</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="25" style="background-color:#404040;" width="825">
<tr>
<td style="background-image:url('ff718229.borderLeftGrey2.gif');" width="20"> </td>
<td style="background-color:#f3f3f3;" width="785"> </td>
<td style="background-image:url('ff718229.borderRightGrey.gif');" width="20"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="825">
<tr>
<td colspan="3" height="29" style="background-image:url('ff718229.borderBottomGrey.gif');" width="825"> </td>
</tr>
</table>
</td>
<td valign="top" style="width:29px;">
<div style="background-image:url('ff718229.borderRight.gif'); width:29px; height:3700px; margin-top:-15px; padding:0px;"> </div>
</td>
|
.jpg "BUILD - Discover how Windows 8 changes everything")
.gif)
.gif)
.gif)
.gif "PDF"){kind=logo}
.jpg "Take the quiz")
.jpg)
.jpg)
.gif)
.gif)