MozTW YZU CSE Lecture

3,018 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,018
On SlideShare
0
From Embeds
0
Number of Embeds
151
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MozTW YZU CSE Lecture

  1. 1. YZU Open Source Software Community Lecture OSSF / MozTW / YZU CSE The Secret in the Extension Development for Mozilla Firefox by Littlebtc (Hsiao-Ting Yu) The text of the slide is under CC-BY-SA-3.0. Most photos are under CC-BY-SA compatible license, while screenshots / logos are under Fair Use.
  2. 2. Me • Undergraduate major in EE in NTU • A Programmer (PHP) • A Web Developer – HTML/CSS – Mozilla Technique (NicoFox)
  3. 3. http://littlebtc.blogspot.com
  4. 4. FREE SOFTWARE? OPEN SOURCE?
  5. 5. FREE SOFTWARE? →You can use, distribute and modify the software without restriction. OPEN SOURCE? →The source code of software should be available and modification should not be restricted.
  6. 6. OSSF • A project in the Institute of Information Science of Academia Sinica • Spread the Free / Open source software spirit • Support Free/Open Source Software community in Taiwan
  7. 7. MozTW http://moztw.org/ • A Community in Taiwan spreading the Firefox and Mozilla-related software • Translate Firefox/Thunderbird/… to Traditional Chinese • It is not so technical! It is a community devoting to improve your web experience. http://www.flickr.com/photos/bobchao/3049469807/ http://www.flickr.com/photos/othree/3147927774/
  8. 8. In my personal view: WEB HISTORY
  9. 9. Browser Wars
  10. 10. Browser War I • I started to surf the Internet since 1997, using 36.6K Modem • At that time, the most popular browser is Netscape, while I am an IE fans :p • No AJAX, no CSS (<table> layouts) • No rich media: Speed of Internet is still very slow
  11. 11. Yahoo! In 1998 ( From archive.org )
  12. 12. IE4 (From Wikipedia)
  13. 13. Browser War I • Why Internet Explorer wins: (I think that) – FREE of charge & bundled with Windows – Development of IE was active – Killer Applications: FrontPage – DHTML, CSS, VBScript support – Netscape got in troubles: rewrite, lost AOL support, etc.
  14. 14. In 2001-2004 IE6 is the de-facto standard!
  15. 15. “A-Kuei” (2000-)
  16. 16. 2001: Wikipedia
  17. 17. My Web work in 2002
  18. 18. …continued
  19. 19. The change of the web • 2004: Gmail • AJAX becomes a popular technique
  20. 20. And the browser wars II • 2004: The grow of Firefox (From Wikipedia)
  21. 21. 2005: YouTube
  22. 22. 2005: Writely (Google Docs today) http://www.flickr.com/photos/googlisti/217887352/
  23. 23. 2007: Nico Nico Douga
  24. 24. The generation of RIA • 2007: –HTML5 adopted by W3C –Microsoft Silverlight • 2008: –Adobe AIR & Flex 3
  25. 25. 2009: MozTW <audio> Demo http://moztw.org/demo/audioplayer/
  26. 26. Photo: http://www.flickr.com/photos/ews/2603070503/  CC-BY-2.0 by JP Puerta  To make Internet Better! Mozilla and Mozilla Firefox
  27. 27. “Mozilla” • Originally, it is Netscape’s codename • 1998: Mozilla Organization: “Co-ordinate” the development of Netscape • Netscape 6 & 7 : Not so success • 2003: Browser(Firefox)/Mail(Thunderbird) Netscape closed down Independent Mozilla Foundation
  28. 28. The Mozilla Manifesto “Make the Internet an ever better place for everyone.”
  29. 29. Firefox
  30. 30. Why Firefox? • Free and Open Source Software • A browser that is easy to use • Highly web standard compatible • And also easy to extend! • Every Firefox can be different!
  31. 31. Firefox Extensions…
  32. 32. addons.mozilla.org
  33. 33. NicoFox • ~5000 Users
  34. 34. Extensions • One of the “Add-ons”: – Extensions, Themes, Plugin • “Extend” your browser – Provide more features – Fix some problem – Integrate with sites or applications
  35. 35. Extensions with Single Feature… • Locationbar2 • Hide Menubar (Made in Taiwan!) After Press Alt
  36. 36. Extensions with Feature Enhancements • NoScript
  37. 37. Web Application Integration • TwitterFox • GmailManager • Forestfox • S3Fox (For Amazon S3)
  38. 38. Extension with New Feature(s) • AdBlock Plus
  39. 39. Extensions with New Feature(s) • New Tong Wen Tang – Conversion between Chinese characters
  40. 40. Extensions with New Feature(s) • IE Tab: Use IE engine in a Firefox tab • Made in Taiwan!
  41. 41. Extensions with New Feature(s) • Stylish (Custom CSS for every site & user interface) • FireGuestures • And more!
  42. 42. Application Level • Sage • Scrapbook • Firebug
  43. 43. One trick • Together with Foxkeh • Glasser – Apply Vista / 7 Aero Glass in toolbar
  44. 44. Hacking the Firefox! GO TO THE TECHNIQUE PART
  45. 45. This is the Firefox…
  46. 46. … and this is part of the the “Main Browser Window”.
  47. 47. Wait? Wait! Is this HTML / JavaScript? => No, but something similar to this
  48. 48. • “Write” Interface in an XML XML User Interface text format Language – Just Like write web pages in XUL HTML • Cross-platform interface elements THERE IS NO DATA. THERE IS ONLY XUL. <button />
  49. 49. • Used in both web and program! Easy but powerful • A major part of the JavaScript source code in Mozilla Firefox is in JavaScript! • JavaScript in Firefox core Web is able to access some <script type=“text/javascript”> core API alert(‘Hello World!’); </script> Firefox Core <script type=“x-application/javascript”> alert(‘Hello World!’); </script>
  50. 50. • In Web: A powerful and modern styling language Make Your Style • In Firefox Core: Still CSS powerful to design interface in detail – Styling toolbar, button, and Web more… h1 { font-size: 160%; color: #999999; } Firefox Core label{ width: 500px; }
  51. 51. Ways to custom your Firefox? Method Website Application (Firefox, …) User Style Sheets (CSS) UserContent.css, Stylish UserChrome.css User Script (JavaScript) Bookmarklet, Greasemonkey UserChrome.js Extensions Easy but powerful Themes (Not supported) Very flexible
  52. 52. How developer actually develop their extension Go for it!
  53. 53. developer.mozilla.org
  54. 54. Set up the environment
  55. 55. Read lots of code
  56. 56. Look for other’s source
  57. 57. Try and Error
  58. 58. This is what I write…
  59. 59. This is what it appears
  60. 60. Sometimes it is not your fault… • It is Firefox’s Bug!  • It is something’s restrictions! • It needs a complex way to bypass the problem! Orz
  61. 61. Sometimes it is not you fault • The document is incomplete or even completely wrong • You need to try it! • Or… Find if some people had tried it!
  62. 62. The Hard Work The player tooks me almost 50 hours!
  63. 63. The Hard Work October 22 October 29
  64. 64. November 29
  65. 65. Dec 10
  66. 66. Feb 14
  67. 67. Still Complex September 2008 (After two months of hard work!) December 2008
  68. 68. Feedback
  69. 69. Take the Shortcut
  70. 70. About the Courses • Speaker: Me • 5/9, 5/23 09:00-17:00 • Near Taipei Main Station • XUL, JavaScript, and more!
  71. 71. We have a “Chapter 0”!
  72. 72. http://www.flickr.com/photos/bobchao/3325341079/ See you! THANK YOU!

×