SlideShare a Scribd company logo
1 of 55
Download to read offline
Teach your Browser
new tricks
OPEN WEB CAMP VI - Dirk Ginader
http://dir.kg @ginader
Teach an old Dog
new tricks
OPEN WEB CAMP VI - Dirk Ginader
http://dir.kg @ginader
~4 years ago
http://www.brucelawson.co.uk/2011/longdesc-in-html5/
http://www.w3.org/TR/html-longdesc/
http://www.w3.org/TR/html-longdesc/
http://www.w3.org/TR/html-longdesc/
http://dir.kg/john.foliot.awesome.pose
http://dir.kg/longdesc
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/longdesc.demo
http://dir.kg/tellmemore.bit
http://dir.kg/tellmemore
https://addons.mozilla.org/en-US/firefox/addon/longdesc/
http://www.webaxe.org/longdesc-links-history-future/
2015
http://dir.kg/wp-longdesc
http://crossrider.com/
Create a new Extension in the Dashboard
The STAGING mode
If you have working code simply upload it
If you have working code simply upload it (YO Karl! ;-))
load the Resources — jQuery is already Preloaded for us!
run the code
optional but super nice and convenient
load images in CSS needs resource-image:// syntax
The STAGING Extension makes development easy
Download the STAGING extension and install it
Enable Developer mode
Load the extension
Load the extension
Extension is now installed and already running
All changes made in crossrider are available instantly BUT…
…reload the extension to make sure the changes are loaded
test on a http server - python -m SimpleHTTPServer FTW!
it’s ALIIIIIIVE (imagine the crazy scientist laughter…)
Extensions are powerful! The crossrider docs are your friend!
cross domain requests! I can use this for V2!
V2? Show all found images ok click of the Browser Button?
Sync with production to prepare launch
Push to production
In PRODUCTION mode code can’t be edited
Fine tune the appearance in the Settings
Icons and Information about the Extension are important
Allow users to download your Extension
Export the Extension so your users can find it!
The Chrome Developer Dashboard
http://dir.kg/longdesc.install.chrome
http://www.qbyte.org/puzzles/p045s.html
http://www.qbyte.org/puzzles/p045s.html
YAY!
http://www.qbyte.org/puzzles/p045s.html
http://www.qbyte.org/puzzles/p045s.html
Thank you!
Have fun teaching your
DogBrowser new tricks!
Slides at http://dir.kg/owc6
http://dir.kg | @ginader

More Related Content

Viewers also liked

Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Dirk Ginader
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
Steven Faulkner
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
Christopher Schmitt
 

Viewers also liked (20)

Again with the Ajax accessibility
Again with the Ajax accessibilityAgain with the Ajax accessibility
Again with the Ajax accessibility
 
Joining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UXJoining Accessibility and UX for Accessible UX
Joining Accessibility and UX for Accessible UX
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
 
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
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
 
Responsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityResponsible Design: Accountable Accessibility
Responsible Design: Accountable Accessibility
 

Similar to Teach your Browser new tricks

Similar to Teach your Browser new tricks (20)

The Ring programming language version 1.10 book - Part 23 of 212
The Ring programming language version 1.10 book - Part 23 of 212The Ring programming language version 1.10 book - Part 23 of 212
The Ring programming language version 1.10 book - Part 23 of 212
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
 
Heroku 101 py con 2015 - David Gouldin
Heroku 101   py con 2015 - David GouldinHeroku 101   py con 2015 - David Gouldin
Heroku 101 py con 2015 - David Gouldin
 
An API Your Parents Would Be Proud Of
An API Your Parents Would Be Proud OfAn API Your Parents Would Be Proud Of
An API Your Parents Would Be Proud Of
 
Creating mobile apps the web developer way
Creating mobile apps the web developer wayCreating mobile apps the web developer way
Creating mobile apps the web developer way
 
Cần gì đồ chùa khi chúng ta có những thứ tuyệt vời thế này
Cần gì đồ chùa khi chúng ta có những thứ tuyệt vời thế nàyCần gì đồ chùa khi chúng ta có những thứ tuyệt vời thế này
Cần gì đồ chùa khi chúng ta có những thứ tuyệt vời thế này
 
6 facts about Open Web and Firefox Os
6 facts about Open Web and Firefox Os6 facts about Open Web and Firefox Os
6 facts about Open Web and Firefox Os
 
Optimizing Spring Boot apps for Docker
Optimizing Spring Boot apps for DockerOptimizing Spring Boot apps for Docker
Optimizing Spring Boot apps for Docker
 
Open City, Smart City - Ann Bernaert
Open City, Smart City - Ann BernaertOpen City, Smart City - Ann Bernaert
Open City, Smart City - Ann Bernaert
 
20160229 open belgium the city of ghent as linked open data
20160229 open belgium   the city of ghent as linked open data20160229 open belgium   the city of ghent as linked open data
20160229 open belgium the city of ghent as linked open data
 
SFScon17 - Daniele Gobbetti: "Free software projects on GitHub and DMCA"
SFScon17 - Daniele Gobbetti: "Free software projects on GitHub and DMCA"SFScon17 - Daniele Gobbetti: "Free software projects on GitHub and DMCA"
SFScon17 - Daniele Gobbetti: "Free software projects on GitHub and DMCA"
 
Real-world Virtual Reality
Real-world Virtual RealityReal-world Virtual Reality
Real-world Virtual Reality
 
Python on FreeBSD
Python on FreeBSDPython on FreeBSD
Python on FreeBSD
 
an introduction to Distem
an introduction to Disteman introduction to Distem
an introduction to Distem
 
REST in peace @ IPC 2012 in Mainz
REST in peace @ IPC 2012 in MainzREST in peace @ IPC 2012 in Mainz
REST in peace @ IPC 2012 in Mainz
 
Five ways of installing word press the famous 5 minute wordpress installation
Five ways of installing word press   the famous 5 minute wordpress installationFive ways of installing word press   the famous 5 minute wordpress installation
Five ways of installing word press the famous 5 minute wordpress installation
 
Argocd up and running
Argocd up and runningArgocd up and running
Argocd up and running
 
Conhecendo o-composer-por-nandokstronet
Conhecendo o-composer-por-nandokstronetConhecendo o-composer-por-nandokstronet
Conhecendo o-composer-por-nandokstronet
 
OpenStack - A Python-based Cloud-Software
OpenStack - A Python-based Cloud-SoftwareOpenStack - A Python-based Cloud-Software
OpenStack - A Python-based Cloud-Software
 

More from Dirk Ginader

HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
Dirk Ginader
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Dirk Ginader
 

More from Dirk Ginader (17)

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Teach your Browser new tricks