Prototyping web standards with Custom elements (2015)
Post on 15-Aug-2015
275 Views
Preview:
Transcript
LJWatson.co.uk @LeonieWatson 1
Prototyping web standards with custom elements
OWC7 (the last hurrah)
LJWatson.co.uk @LeonieWatson 2
HOW IS CONTENT PRESENTED?
LJWatson.co.uk @LeonieWatson 3
• Displaying nutritional information about food products
• Displaying alternative data representations of web analytics
Tabs use cases
LJWatson.co.uk @LeonieWatson 4
Accordion use cases
• Displaying bulletin board messages on an intranet
• Displaying an FAQ for game forum newbies
LJWatson.co.uk @LeonieWatson 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 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 7
Decks use cases
• Displaying a slide deck from a conference talk• Storing contact information in a rolodex
application
LJWatson.co.uk @LeonieWatson 8
Common features
• Display one chunk of content at a time• Ability to move between chunks of content
LJWatson.co.uk @LeonieWatson 9
Common interactions
• Ability to move back/forth between chunks of content
LJWatson.co.uk @LeonieWatson 10
Different implementations
• Every custom implementation is different• Bad usability, missing accessibility• Reinventing the wheel
LJWatson.co.uk @LeonieWatson 11
GOING NATIVE
LJWatson.co.uk @LeonieWatson 12
HTML elements and attributes
• A set of consistent HTML elements and attributes
• Adaptable to different visual metaphors
LJWatson.co.uk @LeonieWatson 13
REQUIREMENTS
LJWatson.co.uk @LeonieWatson 14
Consistent
• Interaction must be consistent, using mouse, keyboard, touch and speech
LJWatson.co.uk @LeonieWatson 15
Identifiable
• User agents must be able to identify panels and collections of panels
LJWatson.co.uk @LeonieWatson 16
Stylable
• Must be possible to style panels and panelsets to match different visual metaphors
LJWatson.co.uk @LeonieWatson 17
HTML ELEMENTS
LJWatson.co.uk @LeonieWatson 18
The panel element
<panel>…</panel>
LJWatson.co.uk @LeonieWatson 19
The paneltitle element
<panel><paneltitle>MoTD</paneltitle>…</panel>
LJWatson.co.uk @LeonieWatson 20
The panelset element
<panelset><panel><paneltitle>Panel1</paneltitle>…</panel>
<panel><paneltitle>Panel2</paneltitle>…</panel></panelset>
LJWatson.co.uk @LeonieWatson 21
HTML ATTRIBUTES
LJWatson.co.uk @LeonieWatson 22
The removable attribute
<panel removable>…</panel>
LJWatson.co.uk @LeonieWatson 23
The expandable attribute
<panel expandable>…</panel>
LJWatson.co.uk @LeonieWatson 24
The preferreddisplay attribute
<panelset preferreddisplay="tabset">…</panelset>
LJWatson.co.uk @LeonieWatson 25
PROTOTYPES & WEB COMPONENTS
LJWatson.co.uk @LeonieWatson 26
Templates
• Chunks of inert markup• Only parsed when injected into the document
LJWatson.co.uk @LeonieWatson 27
Custom Elements
• Creation of new DOM elements• Encapsulated state, with script interfaces
LJWatson.co.uk @LeonieWatson 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 29
Imports
• Custom elements are loaded using <link rel="import">
LJWatson.co.uk @LeonieWatson
Web Reflections polyfill
• Lightweight, cross-browser polyfill
30
LJWatson.co.uk @LeonieWatson 31
Including the polyfill<script src="build/document-register-element.js"></script>
LJWatson.co.uk @LeonieWatson 32
Custom element lifecycle
• Register custom element definition• Create custom element instance• Insert custom element into document
LJWatson.co.uk @LeonieWatson 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 34
Custom element semantics
• No default semantics• No interaction support
Dom tree
Accessibility tree
LJWatson.co.uk @LeonieWatson 37
ARIA
• ARIA 1.0 – W3C Recommendation• ARIA 1.1 – W3C Working draft
LJWatson.co.uk @LeonieWatson 38
Single panel
<panel role="group"> <paneltitle tabindex="0">MoTD</paneltitle> <div class="panel-content" tabindex="0"> Today's message… </div></panel>
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>
LJWatson.co.uk @LeonieWatson 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 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 42
Keyboard interaction
• Right/up arrows move to next paneltitle• Left/down arrows move to previous paneltitle
LJWatson.co.uk @LeonieWatson 43
WHAT NEXT?
LJWatson.co.uk @LeonieWatson 44
Web Platform Working Group
• Proposed W3C working group• Includes HTML, DOM, Web Components
LJWatson.co.uk @LeonieWatson 45
Web Platform Incubator Community Group
• Open community for incubating new ideas for future standards
LJWatson.co.uk @LeonieWatson 46
Take a deep breath
• Post the panels and panelsets extension for review
LJWatson.co.uk @LeonieWatson 47
Will you help?
• Take a look, use the prototypes, file issues
LJWatson.co.uk @LeonieWatson 48
THANK YOU
top related