Cape Town front-enders meetup, 30 October 2012

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

10/31/12 Standards are convention

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

When Standards go BAD!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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!)

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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”

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

10/31/12

Slide 17

Slide 17 text

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/

Slide 18

Slide 18 text

10/31/12

Slide 19

Slide 19 text

10/31/12

Slide 20

Slide 20 text

10/31/12

Slide 21

Slide 21 text

10/31/12 exciting demo

Slide 22

Slide 22 text

10/31/12 Yo!

Slide 23

Slide 23 text

10/31/12 Yo! IE, Safari Yo! Opera, Firefox, Chrome Yo! 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

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

10/31/12 HTML5 does not replace HTML 4.01

Slide 26

Slide 26 text

10/31/12 HTML5 has more bling!

Slide 27

Slide 27 text

10/31/12

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

10/31/12

Slide 30

Slide 30 text

10/31/12

Slide 31

Slide 31 text

10/31/12 Fewer clicks, thanks HTML5!

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

10/31/12 I love reading Introducing HTML5 by Bruce Lawson and Remy Sharp0321784421)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

10/31/12

Slide 37

Slide 37 text

element

Slide 38

Slide 38 text

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!

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

10/31/12 NEWT New Exciting Web Technologies

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

10/31/12 Bruce Lawson @brucel brucel@opera.com @odevrel