web standards and visual studio web tools

27
Web standards and Visual Studio Web Tools Dave Voyles Technical Evangelist Email: [email protected] @DaveVoyles

Upload: david-voyles

Post on 04-Aug-2015

36 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Web standards and Visual Studio web tools

Web standardsand Visual Studio Web

ToolsDave Voyles

Technical Evangelist

Email: [email protected]

@DaveVoyles

Page 2: Web standards and Visual Studio web tools

Agenda

1)Modern web standards overview

2) Visual Studio Tools overview

Page 3: Web standards and Visual Studio web tools

Modern Web StandardsHTML5 + CSS3 = Magic!

Page 4: Web standards and Visual Studio web tools

HTML5

Page 5: Web standards and Visual Studio web tools

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

Page 6: Web standards and Visual Studio web tools

Why do you care?

Browsers have become

really powerful

Standards mean you can

target features, not

browsers

Page 8: Web standards and Visual Studio web tools

Visual Studio Online

Page 9: Web standards and Visual Studio web tools

Map of Web Browser Standards

W3C

HTML CSS Web Apps SVG Geolocation

ECMA

ECMA Script 262 Standard

Standards Body

Page 10: Web standards and Visual Studio web tools

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

Page 11: Web standards and Visual Studio web tools

11

Building with standards

Modern.ie Can I Use Compat Inspector

ModernizerCSS Resets

(Normalize.css)

Page 12: Web standards and Visual Studio web tools

New HTML5 Markup Elements

<div class=“header”></div><div class=“nav”></div>

From this:

<header></header><nav></nav>

To this:

Page 13: Web standards and Visual Studio web tools

New HTML5 Markup Elements

Eliminate the “generic” tagging

Native tags DOM parsing

is quicker than class

searching

Accessibility Standardizing tags

Why?

Page 14: Web standards and Visual Studio web tools

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>

Page 15: Web standards and Visual Studio web tools

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

Page 16: Web standards and Visual Studio web tools

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>

Page 17: Web standards and Visual Studio web tools

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>

Page 18: Web standards and Visual Studio web tools

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

Page 19: Web standards and Visual Studio web tools

JavaScript Library Overview

Page 20: Web standards and Visual Studio web tools

Who Uses jQuery?

Source: http://trends.builtwith.com/javascript/jQuery

Over 59 million sites66.2% of the top 10k

Page 21: Web standards and Visual Studio web tools

jQuery – why so popular?

Easy to learn

Loads of Plugins

Powerful DOM

Selection

Lightweight

Community Support

Page 22: Web standards and Visual Studio web tools

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

Page 23: Web standards and Visual Studio web tools

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>

Page 24: Web standards and Visual Studio web tools

OverviewVisual Studio Web Tools

Page 25: Web standards and Visual Studio web tools

DemoVisual Studio Web Tools

Page 26: Web standards and Visual Studio web tools

Summary Modern web standards overview Visual Studio Tools overview

Page 27: Web standards and Visual Studio web tools

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