Embed Size (px)
DESCRIPTION
Citation preview
Building HTML5 Websites using Visual Studio 2010
Harish RanganathanSenior EvangelistMicrosoft Corporation
Introducing the world’s fastest web developer
Can you beat me?
PAGE 4
Agenda
• Quick look into the world of HTML5• HTML5 with Visual Studio 2010 SP1• Building a site with HTML5 features• Expression Web 4 - HTML5 Support• Discussion
What is “HTML5”?A map of HTML5
W3C
HTML
HTM
L5Canvas 2D
ContextM
icrodataH
TML+RD
FaH
TML5 M
arkupH
TML5 D
iff from H
TML4
Polyglot Markup
Text alternatives
CSS
CSS Snapshot 2007CSS N
amespaces
CSS Paged Media
CSS Print ProfileCSS Values and U
nitsCSS Cascading and Inheritance
CSS TextCSS W
riting Modes
CSS Line Grid
CSS RubyCSS G
enerated Content for Paged Media
CSS Backgrounds and BordersCSS Fonts
CSS Basic Box Model
CSS Multi-colum
n LayoutCSS Tem
plate LayoutCSS M
edia Queries
CSS SpeechCSS Color
CSS Basic User Interface
CSS ScopingCSS G
rid PositioningCSS Flexible Box Layout
CSS Image Values
CSS 2D Transform
ationsCSS 3D
Transformations
CSS TransitionsCSS Anim
ations
Web Apps
CORS
Element TraversalFile API
Index DB
Programm
able HTTP Caching and Serving
Progress EventsSelectors API
Selectors API L2Server-Sent Events
Uniform
Messaging Policy
Web D
OM
CoreW
eb SQL D
atabaseW
eb IDL
Web Sockets APIW
eb StorageW
eb Workers
XmlH
ttpRequest
XmlH
ttpRequest L2
DO
M L1
DO
M L2 Core
DO
M L2 View
sD
OM
L2 EventsD
OM
L2 StyleD
OM
L2 Traversal and RangeD
OM
L2 HTM
LD
OM
L3 CoreD
OM
L3 EventsD
OM
L3 Load and SaveD
OM
L3 ValidationD
OM
L3 XPathD
OM
L3 Views and Form
atting
DO
M L3 Abstract Schem
as
SVG
Docum
ent StructureBasic Shapes
PathsText
Transforms
Painting, Filling, ColorScriptingStyling
Gradients and Patt
ernsSM
ILFontsFilters
Geolocation
Geolocation API
ECMA
ECMA Script
262
ECMAScript 262
What is “HTML5”?And where are we?
W3C
HTML
HTM
L5Canvas 2D
ContextM
icrodataH
TML+RD
FaH
TML5 M
arkupH
TML5 D
iff from H
TML4
Polyglot Markup
Text alternatives
CSS
CSS Snapshot 2007CSS N
amespaces
CSS Paged Media
CSS Print ProfileCSS Values and U
nitsCSS Cascading and Inheritance
CSS TextCSS W
riting Modes
CSS Line Grid
CSS RubyCSS G
enerated Content for Paged Media
CSS Backgrounds and BordersCSS Fonts
CSS Basic Box Model
CSS Multi-colum
n LayoutCSS Tem
plate LayoutCSS M
edia Queries
CSS SpeechCSS Color
CSS Basic User Interface
CSS ScopingCSS G
rid PositioningCSS Flexible Box Layout
CSS Image Values
CSS 2D Transform
ationsCSS 3D
Transformations
CSS TransitionsCSS Anim
ations
Web Apps
CORS
Element TraversalFile API
Index DB
Programm
able HTTP Caching and Serving
Progress EventsSelectors API
Selectors API L2Server-Sent Events
Uniform
Messaging Policy
Web D
OM
CoreW
eb SQL D
atabaseW
eb IDL
Web Sockets APIW
eb StorageW
eb Workers
XmlH
ttpRequest
XmlH
ttpRequest L2
DO
M L1
DO
M L2 Core
DO
M L2 View
sD
OM
L2 EventsD
OM
L2 StyleD
OM
L2 Traversal and RangeD
OM
L2 HTM
LD
OM
L3 CoreD
OM
L3 EventsD
OM
L3 Load and SaveD
OM
L3 ValidationD
OM
L3 XPathD
OM
L3 Views and Form
atting
DO
M L3 Abstract Schem
as
SVG
Docum
ent StructureBasic Shapes
PathsText
Transforms
Painting, Filling, ColorScriptingStyling
Gradients and Patt
ernsSM
ILFontsFilters
Geolocation
Geolocation API
ECMA
ECMA Script
262
ECMAScript 262
First Public Working Draft Working Draft Last Call Candidate
Recommendation Recommendation
HTML5 Today
Some of the standards in “recommendation”
Lots of promising features
Definitely opens up possibilities
Need to be selective in implementing
HTML5 in action
demo
HTML5 in Visual Studio 2010
Today, developers can build HTML5 sites
Enhanced with VS 2010 SP1
More work in progress….
Intellisense for common HTML5 tags
HTML5 in Visual Studio
demo
Rich GraphicsVideo, Canvas, and SVG
Audio & Video Canvas SVG 1.1
Basic shapes Paths Text Transforms Painting Filling, Color Scripting Styling Gradients Patterns
PAGE 12
Rich Mediademo
W3C HTML5
<!DOCTYPE html> Markup Elements
<header>, <hgroup>, <nav>, <aside>, <footer>
<article>, <section> <figure>, <figcaption>
PAGE 14
Site Layoutdemo
Why Use Feature Detection
New versions released frequently
Many different versions
Many different browsers
PAGE 16
Browser Detection Feature Detection
Feature Detection vs. Browser Detection
Detection Point Alternate CodePAGE 17
Browser Detection Feature Detection
Feature Detection vs. Browser Detection
PAGE 18
Detection Point Alternate Code
Feature Detectiondemo
Expression Web 4 SP1
Great support for HTML5
Inellisense for evolving CSS3 (border-radius)
Ability to view pages which require login
Enhanced snapshot and Super Preview
Expression Web 4demo
Summary
• HTML5 is exciting though in early stages• Nothing stops developers from using it today in
VS2010• Expression Web 4 SP1 supports HTML5• If using Visual Studio 2008, download HTML5
extension from gallery
• And, there’s lots more, also not covered here.
Resources
• http://geekswithblogs.net/ranganh
• Twitter: @ranganh
Announcement
Please fill out the feedback form
ResourcesSoftware Application
Developers
http://msdn.microsoft.com/
Infrastructure Professionals
http://technet.microsoft.com/
msdnindia technetindia @msdnindia @technetindia
© 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.
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.
