Web standardsand Visual Studio Web
ToolsDave Voyles
Technical Evangelist
Email: [email protected]
@DaveVoyles
Agenda
1)Modern web standards overview
2) Visual Studio Tools overview
Modern Web StandardsHTML5 + CSS3 = Magic!
HTML5
Not a marketing message
What is HTML5?
A new standard fora new webA language with support on a variety of devices
Umbrella term: vNext HTML, CSS, ECMAScript
Why do you care?
Browsers have become
really powerful
Standards mean you can
target features, not
browsers
HTML5 examples:Photosynth 2Hovercontre jour
demo…
Visual Studio Online
Map of Web Browser Standards
W3C
HTML CSS Web Apps SVG Geolocation
ECMA
ECMA Script 262 Standard
Standards Body
Html5
Canvas 2D Context
Microdata
Html+rdfa
HTML5 Markup
HTML5 Diff From HTML4
CSS Writing Modes
Polyglot Markup
Text Alternatives
CSS Snapshot 2007
CSS Namespaces
CSS Paged Media
CSS Print Profile
CSS Values And Units
CSS Cascading And Inheritance
CSS Text
CSS Line GridCSS Ruby
CSS Generated Content For Paged Media
CSS Backgrounds And Borders
CSS Fonts
CSS Basic Box Model
CSS Multi-column Layout
CSS Template Layout
CSS Media Queries
CSS Speech
CSS Color
CSS Basic User Interface
CSS Scoping
CSS Grid Positioning
CSS Flexible Box Layout
CSS Image Values
CSS 2D Transformations
CSS 3D Transformations
CSS Transitions
CSS Animations
Cors
Element Traversal
File API
Index DB
Programmable HTTP Caching And Serving
Progress Events
Selectors API
Selectors API L2
Server-sent Events
Uniform Messaging Policy
Web DOM Core
Web SQL Database
Web IDL
Web Sockets API
Web Storage
Web Workers
Xmlhttprequest
Xmlhttprequest L2
Dom L1
DOM L2 Core
DOM L2 Views
DOM L2 Events
DOM L2 Style
DOM L2 Traversal And Range
Dom L2 Html
DOM L3 Core
DOM L3 Events
DOM L3 Load And Save
DOM L3 Validation
DOM L3 Xpath
DOM L3 Views And Formatting
DOM L3 Abstract Schemas
Document Structure
Basic Shapes
Paths
Text
Transforms
Painting, Filling, Color
Scripting
Styling
Gradients And Patterns
Smil
Fonts
Filters
Geolocation API
ECMAScript 262 APIs
11
Building with standards
Modern.ie Can I Use Compat Inspector
ModernizerCSS Resets
(Normalize.css)
New HTML5 Markup Elements
<div class=“header”></div><div class=“nav”></div>
From this:
<header></header><nav></nav>
To this:
New HTML5 Markup Elements
Eliminate the “generic” tagging
Native tags DOM parsing
is quicker than class
searching
Accessibility Standardizing tags
Why?
Canvas•A block element that allows developers to draw 2d graphics using JavaScript•Methods for drawing include: paths, boxes, circles, text and rasterized images <canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.</canvas>
<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
HTML 5 <video>•Support for the HTML5 <video> element• Industry-standard MPEG-4/H.264 video•Video can be composited with anything else on the page•HTML content, images, SVG graphics•Hardware accelerated, GPU-based decoding
HTML 5 <video> Attributes• src – specifies the location to pull the source file•autoplay – if present starts playing as soon as it’s ready• controls – if present displays controls•preload – if present loads source at page load• loop – if present loops back to the beginning of the video
<video src="video.mp4" id="videoTag"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --></video>
Multiple HTML 5 <video> Sources?•source – child element used to specify the location to pull the source file(s)
<video poster="video.jpg"><source src="video.mp4"/><source src="video.ogv"/><p>This is fallback content</p>
</video>
HTML 5 <audio>• Industry-standard MP3
and AAC audio
•Fully scriptable via the DOM
<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></audio>
Attributessrc – specifies the location to pull the source fileautoplay – if present starts playing as soon as it’s ready
controls – if present displays controlspreload – if present loads source at page load
JavaScript Library Overview
Who Uses jQuery?
Source: http://trends.builtwith.com/javascript/jQuery
Over 59 million sites66.2% of the top 10k
jQuery – why so popular?
Easy to learn
Loads of Plugins
Powerful DOM
Selection
Lightweight
Community Support
jQuery Communityjquery.com
api.jquery.com
forum.jquery.com
meetups.jquery.com
plugins.jquery.com
jqueryui.com
Downloading
Documentation
Community
Local Community
Extending
UI Widgets and Effects
jQuery FundamentalsFind something, Do something
Functional Syntax
DOM Manipulation
Changing of events
<script>
$(‘div’).hide();
</script>
<div>This will be hidden</div><div>So will this</div><div>Even this</div>
<script>$(function() { $('.submit').click(function(){ alert('post form'); });});</script>
<input class=“submit” type=“button” value=“Submit”/>
<script>$(function() { $('.submit').click(function(){ alert('post form'); });});</script>
<input class=“submit” type=“button” value=“Submit”/>
<script>$(function() { $('.submit').click( function(){ $('.submit').css('color', '#ff0000'); $('#container') .append($('<span>Clicked!</span>') .click(function(){ alert('foo'); })); });});</script>
OverviewVisual Studio Web Tools
DemoVisual Studio Web Tools
Summary Modern web standards overview Visual Studio Tools overview
© 2012 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.