Your SlideShare is downloading. ×

Teach your Browser new tricks

826

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
826
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

×