Slides

Transcription

Slides

HTML5 & WAI ARIA
Structure documents
Building Webapplications
Angie Radtke
XHTML1.1
HTML5
XHTML1
XHTML1.1
2.0
1995
3.2 4.0
1996 1997 1998 1999
4.01
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
WHATWG
XHTML2
Angie Radtke
Players
WHATWG
„WebHypertext Application Technology Working Group“
Founded by Apple, Mozilla, Opera in 2004
Editor: Ian Hickson (google)
25. April 2011 Living Standard HTML-Standard
Cartoon: http://cssquirrel.com/comic/?comic=23
by Kyle Weems
Angie Radtke
Players
W3C
2007 Based on the work of WHATWG
Goal: Stable Version of the Standard
Angie Radtke
New Features
Example:
Geo Location API
geo.html
Firefox: Google Location Services
Angie Radtke
New Features
Example:
file-api.htm
Drag and Drop File-API
Angie Radtke
New Features
Cookies:
Local Storage, Session Storage and
Application Storage
20 a 4KB
/ Domain
Angie Radtke
New Features
Static Example
Canvas
A canvas, where we can dynamically
draw images via Javascript
Adobe Illustrator Plugin
Animated
Example1
Animated
Example 2
http://visitmix.com/labs/ai2canvas/
Angie Radtke
New Features
Audio & Video
Video format not clear:
licence problems
ogg & mp4 depends on the browser
apple wants quicktime
Example:
http://html5dem
os.com/twovideos
Angie Radtke
Structure & Semantic
<!DOCTYPE html>
<meta charset="utf-8" />
Old:
<meta http-equiv="content-type" content="text/html charset=utf-8" />
Angie Radtke
New Elements
section article aside canvas audio command
datalist details embed figure figcaption header
footer hgroup keygen mark meter nav output
progress rt rp ruby source summary time
video wbr sup
Angie Radtke
Old Elements -new meaning
<b> and <i> are back
represents a span of text
no extra importance
<b>
Example: product name, keyword in an abstract,names in a review etc.
Angie Radtke
represents a span of text in an alternate
voice or mood
typographic presentation italicized
<i>
a technical term, an idiomatic phrase from another language, a thought etc.
<p>The <i>Felis silvestris catus</i> is cute.</p>
Angie Radtke
represents stress emphasis of
its contents
<em>
The placement of emphasis changes the meaning of the sentence
Joomla is <em> great</em>
.
Angie Radtke
<small>
represents so-called “fineprint”
e.g. disclaimers, caveats, etc.
Angie Radtke
represents strong importance
for its contents
<strong>
<p><strong>Warning</strong> Don‘t drink too much german beer</p>
Angie Radtke
represents a paragraph-level
thematic break
<hr>
scene change in a story or a transition to another topic within a
section of a reference book
Angie Radtke
Elements used in beEz 5.0
header
footer
nav
article
section
aside
hgroup
Angie Radtke
Header
represents a group of
introductory or
navigational aids
Angie Radtke
Footer
represents the footer of
a section
Angie Radtke
Nav
represents a section of a page
that links to other pages or to
parts within the page:
a section with navigation links.
Angie Radtke
section
represents a generic section of a document or
application. A section, in this context, is a
thematic grouping of content, typically with a
heading
Angie Radtke
article
a self-contained composition
in a document example:
news-article, blogpost
Angie Radtke
aSIDE
represents section of a page
related to the main content
Angie Radtke
Outlin e algorithmus
Angie Radtke
Implicit sectioning
1
Fruitshop
1.1
Nav view search
1.1.1 Navigation
1.2
Welcome
<h1> Fruit Shop
<p> ...
<h2> Nav view search
<p> ...
<h3> Navigation
<p> ...
<h2> Welcome
<p>...
Angie Radtke
Explicit sectioning
Fruitshop
1.1
Welcome
section
1
<h1> Fruit Shop
<p> ......
<p> ...
<h1> Welcome
<p> ....
<p> ...
Angie Radtke
hgroup
represents the heading of a section. The
element is used to group a set of h1- h6
elements when the heading has multiple
levels, such as subheadings, alternative
titles, or taglines.
Angie Radtke
Forms-New input -types
New Attributes:
i.e. required - automatic validation
http://dev.w3.org/html5/spec-authorview/the-input-element.html
search,
tel, url, email,
datetime, date,
month, week,
time ( without
timezone),
datetime-local,
color
Angie Radtke
New global Attributes
http://dev.w3.org/html5/spec-authorview/elements.html#global-attributes
accesskey,
contenteditable
contextmenu,
dir, draggable,
dropzone,
hidden,
spellcheck,
tabindex
Angie Radtke
WAI-Aria
Cite: WAI-ARIA, the Accessible Rich Internet
Applications , defines a way to make Web
content and Web applications more accessible
to people with disabilities.
It especially helps with dynamic content and
advanced user interface controls developed with
Ajax, HTML, JavaScript, and related
technologies.
roles ,properties, states
Angie Radtke
Landmark Roles
<div role=“main“>
<nav
role=“navigation“>
<form role=“search“>
<aside
role=“contentinfo“>
added via js
in the DOM
Angie Radtke
Example : Beez-Tabs
<jdoc:include..... style=“beezTabs“ >
Angie Radtke
<a onclick="tabshow('module_65')
return false" class="linkopen" href="#"
id="link_65" aria-selected="true" role="tab"
aria-controls="module_65" >About Fruit
Shop</a>
<div class="tabcontent tabopen"
aria-labelledby="link_65" aria-hidden="false"
role="tabpanel" id="module_65" tabindex="-1"
aria-expanded="true" >
modulecontent
<a id="next_65"
onclick="nexttab('module_65') return false "
class="unseen" href="#">Next
Tab</a></div>
Angie Radtke
WAI ARIA
el.addClass('tabopen').removeClass('tabclosed')
el.setProperty('aria-hidden', 'false')
el.setProperty('aria-expanded', 'true')
el.focus()
var getid = elid.split('_')
var activelink = 'link_' + getid[1]
document.id(activelink).setProperty('aria-selected', 'true')
.......
Angie Radtke
Overview: Landmark Roles
application
banner
complementary
contentinfo
form
main
navigation
search
Angie Radtke
Overview: Widget Roles
alert
marquee
slider
alertdialog
menuitem
spinbutton
button
menuitemcheckbox
status
checkbox
menuitemradio
tab
combobox
option
tabpanel
dialog
progressbar
textbox
gridcell
radio
timer
link
radiogroup
tooltip
log
scrollbar
treeitem
Angie Radtke
Widget Properties
aria-activedescendant aria-atomic aria-autocomplete
aria-controls aria-describedby aria-dropeffect
aria-flowto aria-haspopup aria-label aria-labelledby
aria-level aria-live
aria-multiline aria-multiselectable aria-orientation
aria-owns aria-posinset aria-readonly aria-relevant
aria-required aria-setsize aria-sort aria-valuemax
aria-valuemin
Angie Radtke
Widget States
aria-busy aria-checked aria-disabled aria-expanded
aria-grabbed aria-hidden aria-invalid aria-pressed
aria-selected aria-valuenow aria-valuetext
Angie Radtke

Slides

Transcription

Similar documents

als PDF - elementare teilchen

iTNC 530