teach your browser new tricks

55
Teach your Browser new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader

Upload: dirk-ginader

Post on 20-Jan-2015

752 views

Category:

Technology


4 download

DESCRIPTION

Almost all Browsers allow you to install Extensions/Add-ons to make them more powerful by adding new functionality. Dirk Ginader will show you how he built build such an Browser extension to add a feature all modern Browsers lack, and how you can do the same by using basic web technologies and how to make them run in every Browser.

TRANSCRIPT

Page 1: Teach your Browser new tricks

Teach your Browser new tricks

OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader

Page 2: Teach your Browser new tricks

Teach an old Dog new tricks

OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader

Page 3: Teach your Browser new tricks

~4 years ago

Page 4: Teach your Browser new tricks

http://www.brucelawson.co.uk/2011/longdesc-in-html5/

Page 5: Teach your Browser new tricks

http://www.w3.org/TR/html-longdesc/

Page 6: Teach your Browser new tricks

http://www.w3.org/TR/html-longdesc/

Page 7: Teach your Browser new tricks

http://www.w3.org/TR/html-longdesc/

Page 8: Teach your Browser new tricks

http://dir.kg/john.foliot.awesome.pose

Page 9: Teach your Browser new tricks

http://dir.kg/longdesc

Page 10: Teach your Browser new tricks

http://dir.kg/longdesc.demo

Page 11: Teach your Browser new tricks

http://dir.kg/longdesc.demo

Page 12: Teach your Browser new tricks

http://dir.kg/longdesc.demo

Page 13: Teach your Browser new tricks

http://dir.kg/longdesc.demo

Page 14: Teach your Browser new tricks

http://dir.kg/tellmemore.bit

Page 15: Teach your Browser new tricks

http://dir.kg/tellmemore

Page 16: Teach your Browser new tricks

https://addons.mozilla.org/en-US/firefox/addon/longdesc/

Page 17: Teach your Browser new tricks

http://www.webaxe.org/longdesc-links-history-future/

Page 18: Teach your Browser new tricks

2015

Page 19: Teach your Browser new tricks

http://dir.kg/wp-longdesc

Page 20: Teach your Browser new tricks

http://crossrider.com/

Page 21: Teach your Browser new tricks

Create a new Extension in the Dashboard

Page 22: Teach your Browser new tricks

The STAGING mode

Page 23: Teach your Browser new tricks

If you have working code simply upload it

Page 24: Teach your Browser new tricks

If you have working code simply upload it (YO Karl! ;-))

Page 25: Teach your Browser new tricks

load the Resources — jQuery is already Preloaded for us!

Page 26: Teach your Browser new tricks

run the code

Page 27: Teach your Browser new tricks

optional but super nice and convenient

Page 28: Teach your Browser new tricks

load images in CSS needs resource-image:// syntax

Page 29: Teach your Browser new tricks

The STAGING Extension makes development easy

Page 30: Teach your Browser new tricks

Download the STAGING extension and install it

Page 31: Teach your Browser new tricks

Enable Developer mode

Page 32: Teach your Browser new tricks

Load the extension

Page 33: Teach your Browser new tricks

Load the extension

Page 34: Teach your Browser new tricks

Extension is now installed and already running

Page 35: Teach your Browser new tricks

All changes made in crossrider are available instantly BUT…

Page 36: Teach your Browser new tricks

…reload the extension to make sure the changes are loaded

Page 37: Teach your Browser new tricks

test on a http server - python -m SimpleHTTPServer FTW!

Page 38: Teach your Browser new tricks

it’s ALIIIIIIVE (imagine the crazy scientist laughter…)

Page 39: Teach your Browser new tricks

Extensions are powerful! The crossrider docs are your friend!

Page 40: Teach your Browser new tricks

cross domain requests! I can use this for V2!

Page 41: Teach your Browser new tricks

V2? Show all found images ok click of the Browser Button?

Page 42: Teach your Browser new tricks

Sync with production to prepare launch

Page 43: Teach your Browser new tricks

Push to production

Page 44: Teach your Browser new tricks

In PRODUCTION mode code can’t be edited

Page 45: Teach your Browser new tricks

Fine tune the appearance in the Settings

Page 46: Teach your Browser new tricks

Icons and Information about the Extension are important

Page 47: Teach your Browser new tricks

Allow users to download your Extension

Page 48: Teach your Browser new tricks

Export the Extension so your users can find it!

Page 49: Teach your Browser new tricks

The Chrome Developer Dashboard

Page 50: Teach your Browser new tricks

http://dir.kg/longdesc.install.chrome

Page 51: Teach your Browser new tricks

http://www.qbyte.org/puzzles/p045s.html

Page 52: Teach your Browser new tricks

http://www.qbyte.org/puzzles/p045s.html

YAY!

Page 53: Teach your Browser new tricks

http://www.qbyte.org/puzzles/p045s.html

Page 54: Teach your Browser new tricks

http://www.qbyte.org/puzzles/p045s.html

Page 55: Teach your Browser new tricks

Thank you! Have fun teaching your DogBrowser new tricks!

Slides at http://dir.kg/owc6 http://dir.kg | @ginader