Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cape Town front-enders meetup, 30 October 2012

Cape Town front-enders meetup, 30 October 2012

A look at how web standards are good for business, why we have HTML5, what it does and how it differs from native apps, and how you can choose between web and native.

Check out Opera Mobile Emulator http://www.opera.com/developer/tools/mobile/ to make your testing easier and Shiny Demos http://www.shinydemos.com for, well, shiny demos!

(Meetup was organised at the last minute, so please excuse slide shonkiness)


bruce lawson

October 30, 2012

More Decks by bruce lawson

Other Decks in Technology


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

  2. 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
  3. 10/31/12 Standards are convention

  4. What are Web Standards? Standards are rules and methodologies that

    make building things easier, and the results better.
  5. 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.
  6. When Standards go BAD!

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

  8. 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
  9. 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!)
  10. 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.
  11. 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”
  12. 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
  13. Open Web technologies Using the right tool for the right

    job – see Web Standards Curriculum opera.com/wsc
  14. None
  15. 10/31/12 Thank you @mamipeko http://d.hatena.ne.jp/Mamipeko/

  16. 10/31/12

  17. 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/
  18. 10/31/12

  19. 10/31/12

  20. 10/31/12

  21. 10/31/12 exciting demo

  22. 10/31/12 <b><i>Yo!</b></i>

  23. 10/31/12 <b><i>Yo!</b></i> IE, Safari <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> <B><I>Yo!</I></B><I></I> </BODY></html> Opera,

    Firefox, Chrome <!DOCTYPE HTML> <html><head></head><body> <b><i>Yo!</b></i> </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
  24. 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)
  25. 10/31/12 HTML5 does not replace HTML 4.01

  26. 10/31/12 HTML5 has more bling!

  27. 10/31/12

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

  29. 10/31/12

  30. 10/31/12

  31. 10/31/12 Fewer clicks, thanks HTML5!

  32. 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.
  33. 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.
  34. 10/31/12 <article itemscope itemtype="http://schema.org/Book"> I love reading <span itemprop="name">Introducing HTML5</span>

    by <span itemprop="author">Bruce Lawson</span> and <span itemprop="author">Remy Sharp</span (<span itemprop="isbn">0321784421</span>) </article>
  35. 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.”
  36. 10/31/12 <video>

  37. <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> <!-- fallback content --> </video>
  38. 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!
  39. WebVTT formatting •Supports positioning of text •Supports <b> and <i>

    •Colouring individual speakers •Support vertical text •Supports RTL •Supports ruby annotations
  40. 10/31/12 <track> polyfills Prototyping: http://www.delphiki.com/html5/playr/ Production: mediaelementjs.com

  41. Image © Jackdrawsanything.com "I will draw anything you like to

    raise funds for the Sick Kids"
  42. None
  43. None
  44. 10/31/12 NEWT New Exciting Web Technologies

  45. 10/31/12 Responsive Web Design • CSS Media Queries • Viewport

    meta - to become CSS Device Adaptation ('Viewport in CSS') • CSS Flexbox
  46. 10/31/12 WebGL JavaScript-generated 3D graphics without plug-ins.

  47. 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.
  48. 10/31/12 getUserMedia API (previously known as "HTML5 <device>")

  49. <video autoplay></video> <script> var video = document.querySelector(video); If (navigator.getUserMedia) {navigator.getUserMedia('video',successCallback,

    errorCallback); function successCallback(stream) { video.src = stream; } ... </script>
  50. 10/31/12 my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

  51. 10/31/12 Demos of getUserMedia accessing camera on www.shinydemos.com (Try on

    Opera Mobile, too!)
  52. 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
  53. 10/31/12 "We expect to see WebRTC support in Firefox, Opera,

    and Chrome soon!" http://www.webrtc.org/
  54. 10/31/12 More ... • File API • Fullscreen API •

    Gamepad API • Pointer Lock API • Server-Sent Events • Web Notifications • Calendar • Contacts
  55. 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
  56. 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
  57. 10/31/12 Bruce Lawson @brucel brucel@opera.com @odevrel