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 of Babylon.js and hand.js Twitter: @deltakosh Blog: http://aka.ms/david

Meet Etienne Margraff Etienne Margraff 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: @emargraff Blog: http://blogs.msdn.com/emargraff

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

01 | Working with web standards David Catuhe | Principal Program Manager Etienne Margraff | Technical Evangelist

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 an Open Web Platform for 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 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 affect 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 staff 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