SlideShare a Scribd company logo
1 of 24
Download to read offline
HTML5
en Webrichtlijnen 2


                      Stephen Hay . Figi, Zeist . 20101210
HTML5
Talk of the town
Webrichtlijnen 2
Talk of the village
Webrichtlijnen 2
Talk of the village
(Ook binnen de werkgroep)
HTML5 en Webrichtlijnen 2
Wat heeft HTML5 te maken met de nieuwe Webrichtlijnen? (1)




   Technologie-
   onafhankelijke
   formulering
   Wij willen nieuwe technologieën kunnen gebruiken!
Wat heeft HTML5 te maken met de nieuwe Webrichtlijnen? (2)




   Focus op de
   praktijk
   Use cases uit de praktijk hebben een grote rol gespeeld...
Praktijkvoorbeeld 1: DOCTYPEs




   <!DOCTYPE html>
Praktijkvoorbeeld 1: DOCTYPEs




   <!DOCTYPE html>
   Veel flexibeler.
Praktijkvoorbeeld 1: DOCTYPEs




   <!DOCTYPE html>
   Veel flexibeler.
   XML-syntax (of niet)
Praktijkvoorbeeld 1: DOCTYPEs




   <!DOCTYPE html>
   Veel flexibeler.
   XML-syntax (of niet)
   Nieuwe HTML-elementen (of niet)
Praktijkvoorbeeld 1: DOCTYPEs




   Gebruik markup conform
   de betreffende specificatie
Praktijkvoorbeeld 1: DOCTYPEs




   Gebruik markup conform
   de betreffende specificatie
   Gebruik elementen waarvoor ze bedoeld zijn
Praktijkvoorbeeld 2: karaktercodering




   <meta charset="utf-8">
Praktijkvoorbeeld 2: karaktercodering




   <meta charset="utf-8">
   Je voldoet nu (bijna) aan SC U.8.1
Progressive
enhancement
Praktijkvoorbeeld 3: video




   http://ghinda.net/acornmediaplayer/
HTML5 is Lego all
over again
HTML5 is Lego all
over again
Browsers hebben geen toetsenbordbediening voor
controls? Maak je eigen
Praktijkvoorbeeld 3: video




   http://dev.opera.com/articles/view/more-accessible-html5-video-player/
En de ontwikkelingen gaan door...




   http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
En dat is een doel geworden van
Webrichtlijnen 2.
We kunnen meegaan met nieuwe ontwikkelingen.
Betere kwaliteit en toegankelijkheid
Bedankt!
Thank you!
stephen@zerointerface.nl

More Related Content

Viewers also liked

Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queriesStephen Hay
 
From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
 
Dynamic vs static
Dynamic vs staticDynamic vs static
Dynamic vs staticNicole Ryan
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBrad Frost
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016Matt Gibson
 
HTML Block and Inline Elements
HTML Block and Inline ElementsHTML Block and Inline Elements
HTML Block and Inline ElementsWebtech Learning
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Maintainable CSS
Maintainable CSSMaintainable CSS
Maintainable CSSStephen Hay
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The FlowStephen Hay
 
Social media and your website
Social media and your websiteSocial media and your website
Social media and your websiteNicole Ryan
 
Working with Links
Working with LinksWorking with Links
Working with LinksNicole Ryan
 

Viewers also liked (17)

CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Meta layout: a closer look at media queries
Meta layout: a closer look at media queriesMeta layout: a closer look at media queries
Meta layout: a closer look at media queries
 
From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
Dynamic vs static
Dynamic vs staticDynamic vs static
Dynamic vs static
 
Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016
 
HTML Block and Inline Elements
HTML Block and Inline ElementsHTML Block and Inline Elements
HTML Block and Inline Elements
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Maintainable CSS
Maintainable CSSMaintainable CSS
Maintainable CSS
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Social media and your website
Social media and your websiteSocial media and your website
Social media and your website
 
Working with Links
Working with LinksWorking with Links
Working with Links
 

More from Stephen Hay

The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebStephen Hay
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive DesignStephen Hay
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wintStephen Hay
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Stephen Hay
 

More from Stephen Hay (17)

The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
 
De aanvrager wint
De aanvrager wintDe aanvrager wint
De aanvrager wint
 
Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009Web Guidelines Fronteers Teachers Day 2009
Web Guidelines Fronteers Teachers Day 2009
 
Logeion2007
Logeion2007Logeion2007
Logeion2007
 

HTML5 & Webrichtlijnen 2