Your SlideShare is downloading. ×
0
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Teach your Browser new tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Teach your Browser new tricks

870

Published on

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 …

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
870
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Teach your Browser new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader
  • 2. Teach an old Dog new tricks OPEN WEB CAMP VI - Dirk Ginader http://dir.kg @ginader
  • 3. ~4 years ago
  • 4. http://www.brucelawson.co.uk/2011/longdesc-in-html5/
  • 5. http://www.w3.org/TR/html-longdesc/
  • 6. http://www.w3.org/TR/html-longdesc/
  • 7. http://www.w3.org/TR/html-longdesc/
  • 8. http://dir.kg/john.foliot.awesome.pose
  • 9. http://dir.kg/longdesc
  • 10. http://dir.kg/longdesc.demo
  • 11. http://dir.kg/longdesc.demo
  • 12. http://dir.kg/longdesc.demo
  • 13. http://dir.kg/longdesc.demo
  • 14. http://dir.kg/tellmemore.bit
  • 15. http://dir.kg/tellmemore
  • 16. https://addons.mozilla.org/en-US/firefox/addon/longdesc/
  • 17. http://www.webaxe.org/longdesc-links-history-future/
  • 18. 2015
  • 19. http://dir.kg/wp-longdesc
  • 20. http://crossrider.com/
  • 21. Create a new Extension in the Dashboard
  • 22. The STAGING mode
  • 23. If you have working code simply upload it
  • 24. If you have working code simply upload it (YO Karl! ;-))
  • 25. load the Resources — jQuery is already Preloaded for us!
  • 26. run the code
  • 27. optional but super nice and convenient
  • 28. load images in CSS needs resource-image:// syntax
  • 29. The STAGING Extension makes development easy
  • 30. Download the STAGING extension and install it
  • 31. Enable Developer mode
  • 32. Load the extension
  • 33. Load the extension
  • 34. Extension is now installed and already running
  • 35. All changes made in crossrider are available instantly BUT…
  • 36. …reload the extension to make sure the changes are loaded
  • 37. test on a http server - python -m SimpleHTTPServer FTW!
  • 38. it’s ALIIIIIIVE (imagine the crazy scientist laughter…)
  • 39. Extensions are powerful! The crossrider docs are your friend!
  • 40. cross domain requests! I can use this for V2!
  • 41. V2? Show all found images ok click of the Browser Button?
  • 42. Sync with production to prepare launch
  • 43. Push to production
  • 44. In PRODUCTION mode code can’t be edited
  • 45. Fine tune the appearance in the Settings
  • 46. Icons and Information about the Extension are important
  • 47. Allow users to download your Extension
  • 48. Export the Extension so your users can find it!
  • 49. The Chrome Developer Dashboard
  • 50. http://dir.kg/longdesc.install.chrome
  • 51. http://www.qbyte.org/puzzles/p045s.html
  • 52. http://www.qbyte.org/puzzles/p045s.html YAY!
  • 53. http://www.qbyte.org/puzzles/p045s.html
  • 54. http://www.qbyte.org/puzzles/p045s.html
  • 55. Thank you! Have fun teaching your DogBrowser new tricks! Slides at http://dir.kg/owc6 http://dir.kg | @ginader

×