The document provides an overview of modern web standards, focusing on HTML5 and CSS3 as essential technologies for contemporary web development. It highlights new HTML5 features like semantic markup and native tags, along with multimedia capabilities for video and audio. Additionally, it discusses the popularity of jQuery and Visual Studio web tools for developers in creating modern web applications.

1. Web standards
and Visual Studio Web Tools
Dave Voyles
Dvoyles@Microsoft.com

2. Agenda
1) Modern web standards overview
2) Visual Studio Tools overview

3. Modern Web Standards
HTML5 + CSS3 = Magic!

4. HTML5

5. Not a marketing
message
What is HTML5?
A new standard for
a new web
A language with support
on a variety of devices
Umbrella term: vNext HTML, CSS, ECMAScript

6. Why do you care?

7. Photosynth 2
Hover
contre jour

8. Visual Studio Online

9. Map of Web Browser Standards
Standard
Standards
Body

11. Building with standards
Modern.ie Can I Use
Compat
Inspector
Modernizer
CSS Resets
(Normalize.css)
11

12. New HTML5 Markup Elements
<div class=“header”></div>
<div class=“nav”></div>
From this:
<header></header>
<nav></nav>
To this:

13. New HTML5 Markup Elements
Eliminate the
“generic”
tagging
Native tags
DOM parsing is
quicker than
class searching
Accessibility
Standardizing
tags
Why?

14. Canvas
•Methods for drawing include: paths, boxes, circles,
text and rasterized
images

15. HTML 5 <video>
•Industry-standard MPEG-4/H.264 video
•HTML content, images, SVG graphics

16. 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

17. Multiple HTML 5 <video> Sources?
•source – child element used to specify the location
to pull the source file(s)

18. HTML 5 <audio>
•Industry-standard MP3
and AAC audio
•Fully scriptable via
the DOM
src
autoplay
controls
preload

19. JavaScript Library Overview

20. Who Uses jQuery?
http://trends.builtwith.com/javascript/jQuery
Over 59 million sites
66.2% of the top 10k

21. jQuery – why so popular?

22. jQuery Community

23. jQuery Fundamentals
Find something, Do something
Functional Syntax
DOM Manipulation
Changing of events

24. Overview
Visual Studio Web Tools

25. Demo
Visual Studio Web Tools

26. Summary
 Modern web standards overview
 Visual Studio Tools overview