Microsoft Virtual Academy

How to debug a website using IE

F12 tools
David Catuhe | Principal Program Manager
Etienne Margraff | Technical Evangelist

Meet David Catuhe

David Catuhe is driving HTML5 and open
web standards evangelization for
Microsoft. He defines himself as a geek.
David loves developing with JavaScript
and HTML5 but also with DirectX, C#, C+
+, or even Kinect. (He wrote a book
about it, which is available on Amazon.)
He is the father ofBabylon.jsandhand.js
Twitter: @deltakosh
Blog: http://aka.ms/david

Meet Etienne Margraf

Etienne Margraf is a technical evangelist in France
working most of his time on HTML5 and Javascript to
help people getting the most of it. His main subjects
are responsive web and using web languages to
create mobile apps. He is also part time CTO at
Microsoft Ventures in Paris where he is helping
startup getting on track on the technical part.
Twitter: @emargraf
Blog: http://blogs.msdn.com/emargraf

Course Topics
How to debug a website using IE F12 tools
01 | Working with web
standards

02 | Debugging with the console

and the debugger windows

03 | Optimizing your page

04 | Developing a mobile web site

05 | Testing on all browsers

Setting Expectations
Target Audience
Web developers

Suggested Prerequisites/Supporting Material

Internet Explorer 11

Microsoft Virtual Academy

01 | Working with web standards

David Catuhe | Principal Program Manager

Etienne Margraff | Technical Evangelist

Click to edit
Master subtitle
style

Module Overview
The process
Current Standards and Vendor Prefixes
WHATWG and Contention
Browser Detection and the User Agent

Working with web standards

The Process

Overview
World Wide Web Consortium
Founded by Tim Berners-Lee (Creator of HTTP) after he
left CERN in 1994
W3C standards define anOpen Web Platformfor
application development
Enable developers to build rich interactive experiences
Continually changing
Follows processes to create standards based on
community support

Standards Process
A document which defines how to create a new
standard http://www.w3.org/2014/Process-20140801/
There are 4 maturity levels a new standard goes
through
Designed to maximize consensus
Ensures high quality technical and editorial quality
1.
2.
3.
4.

Working Draft
Candidate Recommendation
Proposed Recommendation
W3C Recommendation

1. Working Draft
Document for community review defining a new spec
by a Working Group
Nearly anyone can have input
May or may not afect outcome
Not all working drafts make it to the next step
Likely to change by the final revision

2. Candidate Recommendation
After the working draft is thoroughly reviewed, moves
to CR
The entire W3C has a look
The Working Group works on proving
implementation.
Most of the features are locked in at this point

3. Proposed Recommendation
Made it past the first 2 phases
W3C director thinks the spec is ready for W3C
recommendation
Rarely changes at this point
Any changes would be a new WD

4. W3C Recommendation
Final step
Extensive consensus has been made
W3C and members believe the standard is complete
Recommended for implementation as a standard for
the web

Working with web standards

Current Standards and

Vendor Prefixes

Vendor Prefixes
Browser vendors oftentimes use vendor-specific prefixes to implement
new features before they are W3C recommendations
Once a feature or property is a W3C recommendation, browsers usually
will support the non-prefixed versions
Examples of vendor prefixes:
-webkit-transform
-moz-transform
-ms-transform

Vendor prefixes are still needed to support older browser versions,

even after the browser vendors have adopted the non-prefixed versions
in newer versions

Current Standards
Web Design and Applications
Web Architecture
Semantic Web
XML Technology
Web of Services
Web of Devices
Browser Authoring Tools

Example Standards
Dom Level 3 Core A language agnostic way of
manipulating web pages
HTML5 The standard for defining HTML5 web
pages
Selectors Level 3 CSS3 selectors

How to Contribute to W3C

Discussion lists Mailing lists, newsletters, etc
Events Community events happen periodically
Blogs - Group and W3C staf blogs, social media
updates
Community and Business groups Open to
anyone to attend
Working Groups Based on specific areas

Working with web standards

WHATWG and
Contention

Contention
There were deferring opinions after a workshop, and
the WHATWG was formed
Individuals from Apple, Mozilla, and Opera founded
WHATWG in 2004 in response to the slow
development of W3C web standards and W3C's
decision to abandon HTML5 in favor of XML-based
technologies
In 2007, the HTML working group of W3C agreed to
adopt WHATWG's HTML5 as the starting point of its
work

WHATWG
Web Hypertext Application Technology Working Group
Focuses on HTML and APIs for web applications
Similar standards to W3C
Works through mailing lists
Living standard that continually evolves over time
to be one step ahead of implementation

WHATWG
The WHATWG was based on several core principles,
in particular that technologies need to be backwards
compatible, that specifications and implementations
need to match even if this means changing the
specification rather than the implementations, and that
specifications need to be detailed enough that
implementations
can
achieve
complete
interoperability without reverse-engineering each
other.

Working with web standards

Demo
Browser Detection and the User Agent

2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics 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.