0
Building HTML5 Websites using Visual Studio 2010<br />Harish Ranganathan<br />Senior Evangelist<br />Microsoft Corporation...
Introducing the world’s fastest web developer<br />
Can you beat me?<br />PAGE 4<br />
Agenda<br />Quick look into the world of HTML5<br />HTML5 with Visual Studio 2010 SP1<br />Building a site with HTML5 feat...
What is “HTML5”?A map of HTML5<br />
What is “HTML5”?And where are we?<br />First Public Working Draft <br />Working Draft<br />Last Call<br />Candidate Recomm...
HTML5 Today<br />Some of the standards in “recommendation”<br />Lots of promising features<br />Need to be selective in im...
HTML5 in action<br />demo <br />
HTML5 in Visual Studio 2010<br />Today, developers can build HTML5 sites<br />Enhanced with VS 2010 SP1<br />Intellisense ...
HTML5 in Visual Studio<br />demo <br />
Rich GraphicsVideo, Canvas, and SVG<br />Audio & Video<br />Canvas<br />SVG 1.1<br />Basic shapes<br />Paths<br />Text<br ...
Rich Media<br />demo <br />
W3C HTML5<br /><!DOCTYPE html><br />Markup Elements<br /><header>, <hgroup>, <nav>, <aside>, <footer><br /><article>, <sec...
Site Layout<br />demo <br />
Why Use Feature Detection<br />PAGE 16<br />
Browser Detection<br />Feature Detection<br />Feature Detection vs. Browser Detection<br />Detection Point<br />Alternate ...
Browser Detection<br />Feature Detection<br />Feature Detection vs. Browser Detection<br />Detection Point<br />Alternate ...
Feature Detection<br />demo <br />
Expression Web 4 SP1<br />Great support for HTML5<br />Inellisense for evolving CSS3 (border-radius)<br />Enhanced snapsho...
Expression Web 4<br />demo <br />
Summary<br />HTML5 is exciting though in early stages<br />Nothing stops developers from using it today in VS2010<br />Exp...
Resources<br />http://geekswithblogs.net/ranganh<br />Twitter: @ranganh<br />
Announcement<br />Please fill out the feedback form<br />
Resources<br />Software Application Developers<br />http://msdn.microsoft.com/<br />Infrastructure Professionals<br />http...
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Html 5 Websites with Visual Studio 2010

4,920

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,920
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • End to end.. Using vs2010, how to deploy the app, publishing out to the wildVery exciting release… the work we have done here addresses the real things that customers have been asking us
  • - E-2-E scenarios with Visual Studio 2010Simplified config and new proj. templates- Cleaner = better SEOSimple support for &lt;meta&gt;URL routing- Generate (standards) HTML and use CSSControl markup, styles, routing &amp; page size- Dynamic data &amp; support for existing appsChartsRuntime extensibility
  • - E-2-E scenarios with Visual Studio 2010Simplified config and new proj. templates- Cleaner = better SEOSimple support for &lt;meta&gt;URL routing- Generate (standards) HTML and use CSSControl markup, styles, routing &amp; page size- Dynamic data &amp; support for existing appsChartsRuntime extensibility
  • Many different browsers The list of browsers keeps growingCurrently we have IE, Firefox, Chrome, Safari, Opera…And a number of others if you really want to be thoroughMany different versionsFor each of these browsers we also have to deal with multiple versions in the wildNew versionsOn top of it all, new versions of each browser keep rolling inIn the last year alone every major browser has released a new versionAnd how do you make your site work in a browser that doesn’t even exist yet?
  • Version DetectionEven if multiple branches exist in your code, you are effectively writing two pages in oneYour page can only pivot to one of two (or three, etc.) configurations that coincide specifically with a particular browser versionFeature DetectionSince each feature detect is targeted, your code can adapt to a broader array of configurationsEach switch can be triggered independently of the others
  • But it&apos;s in the scenarios where browser detection doesn&apos;t work that feature detection is more interestingWhen we&apos;re dealing with features that aren&apos;t interoperable,And consequently with browser configurations that aren&apos;t stableBrowser detection can&apos;t deal with these &quot;hybrid&quot; configurations, But feature detection switches only the code paths that are necessaryTo end up with code that still works
  • - E-2-E scenarios with Visual Studio 2010Simplified config and new proj. templates- Cleaner = better SEOSimple support for &lt;meta&gt;URL routing- Generate (standards) HTML and use CSSControl markup, styles, routing &amp; page size- Dynamic data &amp; support for existing appsChartsRuntime extensibility
  • Transcript of "Html 5 Websites with Visual Studio 2010"

    1. 1.
    2. 2. Building HTML5 Websites using Visual Studio 2010<br />Harish Ranganathan<br />Senior Evangelist<br />Microsoft Corporation<br />
    3. 3. Introducing the world’s fastest web developer<br />
    4. 4. Can you beat me?<br />PAGE 4<br />
    5. 5. Agenda<br />Quick look into the world of HTML5<br />HTML5 with Visual Studio 2010 SP1<br />Building a site with HTML5 features<br />Expression Web 4 - HTML5 Support<br />Discussion<br />
    6. 6. What is “HTML5”?A map of HTML5<br />
    7. 7. What is “HTML5”?And where are we?<br />First Public Working Draft <br />Working Draft<br />Last Call<br />Candidate Recommendation<br />Recommendation<br />
    8. 8. HTML5 Today<br />Some of the standards in “recommendation”<br />Lots of promising features<br />Need to be selective in implementing<br />Definitely opens up possibilities<br />
    9. 9. HTML5 in action<br />demo <br />
    10. 10. HTML5 in Visual Studio 2010<br />Today, developers can build HTML5 sites<br />Enhanced with VS 2010 SP1<br />Intellisense for common HTML5 tags<br />More work in progress….<br />
    11. 11. HTML5 in Visual Studio<br />demo <br />
    12. 12. Rich GraphicsVideo, Canvas, and SVG<br />Audio & Video<br />Canvas<br />SVG 1.1<br />Basic shapes<br />Paths<br />Text<br />Transforms<br />Painting<br />Filling, Color<br />Scripting<br />Styling<br />Gradients<br />Patterns<br />PAGE 12<br />
    13. 13. Rich Media<br />demo <br />
    14. 14. W3C HTML5<br /><!DOCTYPE html><br />Markup Elements<br /><header>, <hgroup>, <nav>, <aside>, <footer><br /><article>, <section><br /><figure>, <figcaption><br />PAGE 14<br />
    15. 15. Site Layout<br />demo <br />
    16. 16. Why Use Feature Detection<br />PAGE 16<br />
    17. 17. Browser Detection<br />Feature Detection<br />Feature Detection vs. Browser Detection<br />Detection Point<br />Alternate Code<br />PAGE 17<br />
    18. 18. Browser Detection<br />Feature Detection<br />Feature Detection vs. Browser Detection<br />Detection Point<br />Alternate Code<br />PAGE 18<br />
    19. 19. Feature Detection<br />demo <br />
    20. 20. Expression Web 4 SP1<br />Great support for HTML5<br />Inellisense for evolving CSS3 (border-radius)<br />Enhanced snapshot and Super Preview<br />Ability to view pages which require login<br />
    21. 21. Expression Web 4<br />demo <br />
    22. 22. Summary<br />HTML5 is exciting though in early stages<br />Nothing stops developers from using it today in VS2010<br />Expression Web 4 SP1 supports HTML5<br />If using Visual Studio 2008, download HTML5 extension from gallery<br />And, there’s lots more, also not covered here.<br />
    23. 23. Resources<br />http://geekswithblogs.net/ranganh<br />Twitter: @ranganh<br />
    24. 24. Announcement<br />Please fill out the feedback form<br />
    25. 25. Resources<br />Software Application Developers<br />http://msdn.microsoft.com/<br />Infrastructure Professionals<br />http://technet.microsoft.com/<br />technetindia<br /> msdnindia<br />@technetindia<br />@msdnindia<br />
    26. 26. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×