Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping web standards with Custom elements (OWC 2015)

934 views

Published on

When new HTML features are proposed, it is possible to create working prototypes using Custom Elements. This means new features can be tested for usability
and viability before becoming part of the HTML specification.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Prototyping web standards with Custom elements (OWC 2015)

  1. 1. Prototyping web standards with custom elements OWC7 (the last hurrah) LJWatson.co.uk @LeonieWatson 1
  2. 2. HOW IS CONTENT PRESENTED? LJWatson.co.uk @LeonieWatson 2
  3. 3. • Displaying nutritional information about food products • Displaying alternative data representations of web analytics LJWatson.co.uk @LeonieWatson 3 Tabs use cases
  4. 4. Accordion use cases • Displaying bulletin board messages on an intranet • Displaying an FAQ for game forum newbies LJWatson.co.uk @LeonieWatson 4
  5. 5. Carousel use cases • Displaying brochure images on a spa resort website • Displaying features of a prototype flying car on a corporate website LJWatson.co.uk @LeonieWatson 5
  6. 6. Coverflow use cases • Flipping through sky-diving photos on a photo sharing website • Browsing a portfolio of watercolours on an artist's website LJWatson.co.uk @LeonieWatson 6
  7. 7. Decks use cases • Displaying a slide deck from a conference talk • Storing contact information in a rolodex application LJWatson.co.uk @LeonieWatson 7
  8. 8. Common features • Display one chunk of content at a time • Ability to move between chunks of content LJWatson.co.uk @LeonieWatson 8
  9. 9. Common interactions • Ability to move back/forth between chunks of content LJWatson.co.uk @LeonieWatson 9
  10. 10. Different implementations • Every custom implementation is different • Bad usability, missing accessibility • Reinventing the wheel LJWatson.co.uk @LeonieWatson 10
  11. 11. GOING NATIVE LJWatson.co.uk @LeonieWatson 11
  12. 12. HTML elements and attributes • A set of consistent HTML elements and attributes • Adaptable to different visual metaphors LJWatson.co.uk @LeonieWatson 12
  13. 13. REQUIREMENTS LJWatson.co.uk @LeonieWatson 13
  14. 14. Consistent • Interaction must be consistent, using mouse, keyboard, touch and speech LJWatson.co.uk @LeonieWatson 14
  15. 15. Identifiable • User agents must be able to identify panels and collections of panels LJWatson.co.uk @LeonieWatson 15
  16. 16. Stylable • Must be possible to style panels and panelsets to match different visual metaphors LJWatson.co.uk @LeonieWatson 16
  17. 17. HTML ELEMENTS LJWatson.co.uk @LeonieWatson 17
  18. 18. The panel element <panel>…</panel> LJWatson.co.uk @LeonieWatson 18
  19. 19. The paneltitle element <panel> <paneltitle>MoTD</paneltitle> … </panel> LJWatson.co.uk @LeonieWatson 19
  20. 20. The panelset element <panelset> <panel> <paneltitle>Panel1</paneltitle> … </panel> <panel> <paneltitle>Panel2</paneltitle> … </panel> </panelset> LJWatson.co.uk @LeonieWatson 20
  21. 21. HTML ATTRIBUTES LJWatson.co.uk @LeonieWatson 21
  22. 22. The removable attribute <panel removable>…</panel> LJWatson.co.uk @LeonieWatson 22
  23. 23. The expandable attribute <panel expandable>…</panel> LJWatson.co.uk @LeonieWatson 23
  24. 24. The preferreddisplay attribute <panelset preferreddisplay="tabset"> … </panelset> LJWatson.co.uk @LeonieWatson 24
  25. 25. PROTOTYPES & WEB COMPONENTS LJWatson.co.uk @LeonieWatson 25
  26. 26. Templates • Chunks of inert markup • Only parsed when injected into the document LJWatson.co.uk @LeonieWatson 26
  27. 27. Custom Elements • Creation of new DOM elements • Encapsulated state, with script interfaces LJWatson.co.uk @LeonieWatson 27
  28. 28. Shadow DOM • Separate from the light DOM • May be associated with an element, but don't appear as child nodes LJWatson.co.uk @LeonieWatson 28
  29. 29. Imports • Custom elements are loaded using <link rel="import"> LJWatson.co.uk @LeonieWatson 29
  30. 30. Web Reflections polyfill • Lightweight, cross-browser polyfill LJWatson.co.uk @LeonieWatson 30
  31. 31. Including the polyfill <script src="build/document-register- element.js"></script> LJWatson.co.uk @LeonieWatson 31
  32. 32. Custom element lifecycle • Register custom element definition • Create custom element instance • Insert custom element into document LJWatson.co.uk @LeonieWatson 32
  33. 33. Registering elements document.registerElement( "common-panel-title", { prototype: Object.create( HTMLElement.prototype, { createdCallback: { value: function () { / not much to do here... / } } }) }); LJWatson.co.uk @LeonieWatson 33
  34. 34. Custom element semantics • No default semantics • No interaction support LJWatson.co.uk @LeonieWatson 34
  35. 35. Dom tree
  36. 36. Accessibility tree
  37. 37. ARIA • ARIA 1.0 – W3C Recommendation • ARIA 1.1 – W3C Working draft LJWatson.co.uk @LeonieWatson 37
  38. 38. Single panel <panel role="group"> <paneltitle tabindex="0">MoTD</paneltitle> <div class="panel-content" tabindex="0"> Today's message… </div> </panel> LJWatson.co.uk @LeonieWatson 38
  39. 39. Single removable panel <panel role="group" removable> <paneltitle tabindex="0">MoTD</paneltitle> <button title="Remove panel">X</button> <div class="panel-content" tabindex="0"> Today's message… </div> </panel>
  40. 40. Single expandable panel <panel role="group" expandable> <paneltitle tabindex="0">MoTD</paneltitle> <div class="panel-content" tabindex="0"> Today's message… </div> </panel> LJWatson.co.uk @LeonieWatson 40
  41. 41. Simple panelset <panelset role="tablist"> <panel> <paneltitle tabindex="0" role="tab" aria-controls="p1" aria-selected="true">Blanco</paneltitle> <div role="tabpanel" tabindex="0" id="p1" aria-expanded="true"> Blanco tequila... </div> </panel> ... </panelset> LJWatson.co.uk @LeonieWatson 41
  42. 42. Keyboard interaction • Right/up arrows move to next paneltitle • Left/down arrows move to previous paneltitle LJWatson.co.uk @LeonieWatson 42
  43. 43. WHAT NEXT? LJWatson.co.uk @LeonieWatson 43
  44. 44. Web Platform Working Group • Proposed W3C working group • Includes HTML, DOM, Web Components LJWatson.co.uk @LeonieWatson 44
  45. 45. Web Platform Incubator Community Group • Open community for incubating new ideas for future standards LJWatson.co.uk @LeonieWatson 45
  46. 46. Take a deep breath • Post the panels and panelsets extension for review LJWatson.co.uk @LeonieWatson 46
  47. 47. Will you help? • Take a look, use the prototypes, file issues LJWatson.co.uk @LeonieWatson 47
  48. 48. THANK YOU LJWatson.co.uk @LeonieWatson 48

×