Cape Town front-enders meetup, 30 October 2012

10/31/12 Web Standards Bruce Lawson, Opera Software Image: http://www.flickr.com/photos/brad_frost/7387827018/in/set-72157630163121422

Web Standards for the Future – Bruce Lawson, Opera.com •
Web Evangelist, Opera • Tech lead, Law Society & Solicitors Regulation Authority (2004-8) • Review panellist, PAS 78 • Member Web Standards Project: Accessibility Task Force • Member of W3C Mobile Best Practices Working Group • B.A. English Literature with Drama

10/31/12 Standards are convention

What are Web Standards? Standards are rules and methodologies that
make building things easier, and the results better.

Open vs Closed Standards Open Standards are made by the
World Wide Web Consortium (W3C) in public, through debate, discussion leading to agreement. Closed Standards are made by a single company, in secret, according to the business needs of that company.

When Standards go BAD!

10/31/12 http://www.koreatimes.co.kr/www/news/biz/2010/05/123_52401.html

Dangers of a closed-standard culture South Korea is a nation
that at the forefront of technology, an early adopter of e-commerce, leading the world in 3G mobile adoption, in wireless broadband, in wired broadband adoption, as well as in citizen-driven media. But the Web is in hands of a single corporation. http://kanai.net/weblog/archive/2007/01/26/00h53m55s

Advantages of Open Standards The Web works everywhere - The
Web is the platform • Good standards help developers: validate; separate content and presentation - means specialisation and maintainability. • Good standards help site owners: more maintainability; smaller pages; better SEO • Good standards help site end-users: light-weight; findable; interoperable; more likely accessible • Promise: Write once, work everywhere (you can't test every device!)

Case study - Legal and General British based financial services
company that provides life, health and other insurance, as well as pensions and investments. Its shares trade on the London Stock Exchange as part of the FTSE 100 Index. Major markets include U.K., France, Germany, the Netherlands and the United States.

Legal and General's re-design • 30% increase in natural search-engine
traffic • 75% reduction in time for page to load • Browser-compatibility (no complaints since), accessible to mobile devices • Time to manage content “reduced from five days to 0.5 days per job”

Legal and General's re-design • Savings of £200K annually on
site maintenance • 90% increase in life insurance sales online • 100% return on investment in less than 12 months. www.brucelawson.co.uk/pas78

Open Web technologies Using the right tool for the right
job – see Web Standards Curriculum opera.com/wsc

10/31/12 Thank you @mamipeko http://d.hatena.ne.jp/Mamipeko/

10/31/12

10/31/12 © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and
Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document. http://www.whatwg.org/specs/web-apps/current-work/

10/31/12

10/31/12 exciting demo

10/31/12 Yo!

10/31/12 Yo! IE, Safari <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> Yo! </BODY></html> Opera,
Firefox, Chrome <!DOCTYPE HTML> <html><head></head><body> Yo! </body></html> http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0A%3Cb%3E%3Ci%3EYo!%3C%2Fb%3E %3C%2Fi%3E

10/31/12 HTML5 Paring Algorithm The HTML5 Parsing Algorithm (in all
major browsers) means that all will produce the same DOM, even from bad markup. (More: http://my.opera.com/core/blog/show.dml/26453141)

10/31/12 HTML5 does not replace HTML 4.01

10/31/12 HTML5 has more bling!

10/31/12

10/31/12 standardise commonly-used rich form elements – without JavaScript

10/31/12

10/31/12 Fewer clicks, thanks HTML5!

10/31/12 HTML5 microdata By adding additional tags to the HTML
of your web pages—tags that say, "Hey search engine, this information describes this specific movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

10/31/12 schema.org This site provides a collection of schemas, i.e.,
html tags, that webmasters can use to markup their pages in ways recognized by major search providers. Search engines including Bing, Google, Yahoo! and Yandex rely on this markup to improve the display of search results, making it easier for people to find the right web pages.

10/31/12 <article itemscope itemtype="http://schema.org/Book"> I love reading Introducing HTML5
by Bruce Lawson and Remy Sharp0321784421) </article>

10/31/12 http://andywilsonfs.co.uk/ “to our surprise the website went from nowhere
to the first page of Google for many competitive keywords in about two weeks. This isn't just down to microdata and HTML5, but we feel that it did increase the standard SEO, but it's hard to say by how much. We now try to use microdata and Schema on all projects as standard.”

10/31/12 <video>

<track> element <video controls poster=… width=… height=…> <source src=movie.webm type=video/webm>
<track src=subtitles-en.vtt kind=subtitles srclang=en> <track src=subtitles-de.vtt kind=subtitles srclang=de>  </video>

webVTT WEBVTT FILE 1 01:23:45,678 --> 01:23:46,789 Hello world! 2
01:23:48,910 --> 01:23:49,101 Hello World!

WebVTT formatting •Supports positioning of text •Supports and 
•Colouring individual speakers •Support vertical text •Supports RTL •Supports ruby annotations

10/31/12 <track> polyfills Prototyping: http://www.delphiki.com/html5/playr/ Production: mediaelementjs.com

10/31/12 NEWT New Exciting Web Technologies

10/31/12 Responsive Web Design • CSS Media Queries • Viewport
meta - to become CSS Device Adaptation ('Viewport in CSS') • CSS Flexbox

10/31/12 WebGL JavaScript-generated 3D graphics without plug-ins.

10/31/12 Geolocation JavaScript API to get device's latitude and longditude,
with user permission. Device Orientation Events: information about the physical orientation and motion of a hosting device.

10/31/12 getUserMedia API (previously known as "HTML5 <device>")

<video autoplay></video> <script> var video = document.querySelector(video); If (navigator.getUserMedia) {navigator.getUserMedia('video',successCallback,
errorCallback); function successCallback(stream) { video.src = stream; } ... </script>

10/31/12 my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

10/31/12 Demos of getUserMedia accessing camera on www.shinydemos.com (Try on
Opera Mobile, too!)

10/31/12 WebRTC is a free, open project that enables web
browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/ http://www.whatwg.org/specs/web-apps/current-work/complete/video- conferencing-and-peer-to-peer-communication.html

10/31/12 "We expect to see WebRTC support in Firefox, Opera,
and Chrome soon!" http://www.webrtc.org/

10/31/12 More ... • File API • Fullscreen API •
Gamepad API • Pointer Lock API • Server-Sent Events • Web Notifications • Calendar • Contacts

10/31/12 Native or HTML5?? • HTML is the Web, so
works anywhere JavaScript runs (with polyfills for old browsers) • HTML is simple to distribute and update – just a URL • Native allows you access to more device capabilities (for now) • Native is a little faster (does that matter?) • Native apps are easier to control/ monetise

10/31/12 Golden Rules • Code to the standard, not browsers
• Validate and test in desktop and mobile (use Opera Mobile Emulator and Opera Dragonfly) • Start with a base of valid, accessible HTML and progressively enhance • No browser-sniffing. Use feature detection. • Use all vendor prefixes in your CSS

10/31/12 Bruce Lawson @brucel [email protected] @odevrel

Cape Town front-enders meetup, 30 October 2012

Cape Town front-enders meetup, 30 October 2012

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript