1 / 40

Internet Browsers and their Extensions

Introducing……. Internet Browsers and their Extensions. Presented by Group 6. Group Members. Outline. History of Browser Development. 王毓璟. Tim Berners-Lee…. 1990 年聖誕節 ， Tim Berners-Lee 正式實作了 http 的客戶端及伺服器 架構 。 1991 年 Tim Berners-Lee 完成了第一個瀏覽器， WorldWideWeb 。

aloha
Download Presentation

Internet Browsers and their Extensions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introducing…… Internet Browsers and their Extensions Presented by Group 6

  2. Group Members

  3. Outline

  4. History of Browser Development 王毓璟

  5. Tim Berners-Lee… • 1990年聖誕節，Tim Berners-Lee 正式實作了http的客戶端及伺服器架構。 • 1991年Tim Berners-Lee完成了第一個瀏覽器，WorldWideWeb。 • 集合了當時許多創新的軟硬體技術，為瀏覽器踏出了承先啟後的一步。 • 最初，瀏覽器被視為處理CERN龐大電話簿的實用工具。

  6. Followers • 1993年NCSA Mosaic Web browser被開發出來。 • 世界上最早的GUI瀏覽器之一。 • 許多圖形介面瀏覽器的始祖。 • 主持人Marc Andreessen脫離成立Netscape。 • 1994年推出Netscape Navigator。 • 當時最成功、市占率最高之瀏覽器，市占超越90%。

  7. Netscape vs. Microsoft • 1995年推出了自有的瀏覽器，Internet Explorer。 • 將其嵌入於自行開發的Windows OS中。 • 1998年美國vs. Microsoft反托拉斯訴訟案。 • IE在市場上的獨佔性已經不可避免。

  8. Up to Now… • Netscape在1998年成立了Mozilla Foundation。 • Released Mozilla FireFox。 • Halt Netscape Navigator Support • Google於2008年Sep推出Chrome 0.2.149版。 • Javascript Engine – V8 • IE9b2、Opera 11.0、Chrome 10、FireFox 4.0 b8。 • Separate add-ons & extensions processes from browser

  9. A Little Comparison

  10. A Little Comparison

  11. Fashion Your Firefox MozillaFireFox

  12. Mozilla基金會(MoFo) • 1998Netscape建立Mozilla組織 • 2003 年成立Mozilla基金會 • 非營利組織 • 支援和領導MozillaOpen Source專案

  13. Mozilla Application Suite • 跨平台套裝軟體 • Netscape Navigator(網頁瀏覽器) • Communicator（電子郵件客戶端） • Composer（網頁開發軟體） • ChatZilla（IRC用戶端軟體） • 可在Linux、Windows、Mac OS X下執行

  14. Mozilla Firefox • 從Mozilla Application Suite獨立出來 • Open Source Code • 解決軟體肥大問題 • 取代功能複雜的Mozilla Suite

  15. 設計準則 • 不多不少剛剛好，製作有用的瀏覽器 • 易用性、輕量 • 回應速度要快!!!讓使用者覺得煩 － 感覺上的速度比實際速度重要 • 提供擴充系統添加新功能又不影響核心 • 自訂瀏覽器以符合特定需求

  16. 特色 • 分頁瀏覽 • 即時書籤 • 下載管理員 • 自訂搜尋引擎 • 附加元件(擴充套件、佈景主題) • 跨平台支援、支援多種網路標準

  17. 市場接納度 • 截至2010年10月=>市占率22.83% • 僅次於微軟Internet Explorer • 第二流行的瀏覽器版本

  18. [資料來源：StatCounter]

  19. Demo • Video made by B97705070 Patrick

  20. Firesheep

  21. 李孟修、陳少祁 Google Chrome Extensions

  22. Google Chrome • 首個版本於2008年9月8日 版本為0.2.149 • 首個穩定版本於2008年12月11日 版本為1.0.154 • 目前版本為8.0.5522010年12月2日發布 • 2010年11月時市場佔有率達9.27% 為當前瀏覽器市占率第三名 • 2009年9月6日 Google Chrome首次預設啟用擴充功能，並提供數款擴充功能給使用者試用 • 最熱門的Extension擁有160萬左右的使用者

  23. Make your own chrome extension // 把提示區塊的內容設成輸入框的 title 值 }).html(_title).click(function(){ // 當提示區塊被點擊時，觸發輸入框的 focus 事件 _text.trigger("focus"); // 最後加上額外的 className }).addClass(_class); // 設定輸入框的 focus 及 blur 事件 _text.focus(function(){ // 隱藏提示區塊 _water.hide(); }).blur(function(){ // 如果輸入框中沒有值則再顯示提示區塊 if(this.value=="") _water.show(); }); } }); }); //--> </script> <script type="text/javascript"><!-- <input type="button" name="submit" value="Look up" class="class_button" onClick="go(this.form)" > window.document.onkeydown=enter; function enter(){ if(event.keyCode==13){ document.in.submit.focus(); document.in.submit.click(); } } </style> <form name="in" > Dictionary:<input type=text name=w class="c3" title="Type A Word" /><br /> <input type="button" name="submit" value="Look up" class="class_button" onClick="go(this.form)" > </form> <script type="text/javascript"> <!-- $(function(){ // 取得要加上提示的元素並一一設定 $(":text, textarea").each(function(i, ele){ // 先把目前元素轉換成 jQuery物件後記錄起來 // 再取得 title 及 className屬性值 var _text = $(ele), _title = _text.attr("title"), _class = _text.attr("className") || ""; // 如果有 title 或是 className值的話，則進行改造 if(!!_title || !!_class){ // 在 body 中插入一個空白的 Div 區塊來當提示區塊 var _water = $("<div></div>").appendTo("body"); // 設定提示區塊的 css屬性(基本是讓它跟輸入框一樣) // position 一定要設成 absolute 才能移來移去 _water.css({ position: "absolute", width: _text.width(), height: _text.height(), fontSize: _text.css("fontSize"), lineHeight: _text.css("lineHeight"), top: _text.position().top + parseInt(_text.css("borderTopWidth"), 10) + "px", left: _text.position().left + parseInt(_text.css("borderLeftWidth"), 10) + "px", paddingTop: _text.css("paddingTop"), paddingBottom: _text.css("paddingBottom"), paddingLeft: _text.css("paddingLeft"), paddingRight: _text.css("paddingRight"), marginTop: _text.css("marginTop"), marginBottom: _text.css("marginBottom"), marginLeft: _text.css("marginLeft"), marginRight: _text.css("marginRight"), cursor: "text", overflow: "hidden" //--></script> <script type="text/javascript"> function go (form) { varurl = "http://tw.dictionary.yahoo.com/dictionary?p="+form.w.value; window.open(url); document.write('<a target="_new" href ="http://tw.dictionary.yahoo.com/dictionary?p='+form.w.value+'"></a>'); } </script> </body> </html> • manifest.json { "name": "Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png", "popup" : "popup.html" }, "background_page" : "background.html", "permissions": [ "http://api.flickr.com/", "http://cop416.pixnet.net/blog/post/22544834", "http://www.youtube.com/" ] } • popup.html <!doctype html> <html lang=en> <meta charset=UTF-8> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> <!-- .c3 { color: blue; } div.c1 { color: #ccc; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 134px -2038px; } div.c2 { color: red; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 3px -2669px; } div.c3 { color: #ccc; background-color: #ff9; } --> <!doctype html> <html lang=en> <meta charset=UTF-8> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> <!-- .c3 { color: blue; } div.c1 { color: #ccc; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 134px -2038px; } div.c2 { color: red; background-image: url(sprite.png); background-repeat: no-repeat; background-position: 3px -2669px; } div.c3 { color: #ccc; background-color: #ff9; } -->

  24. Interesting Extension

  25. Screen Capture

  26. IE Tab

  27. Facebook Photo Zoom

  28. AdBlock

  29. Google Dictionary

  30. TW Current Weather 即時天氣狀況顯示Extension 王毓璟

  31. 資料來源 - Weather.com • 由Weather.com所提供的RSSFeed。 • 全球最大氣象網站，資料包括台灣逾30個城市。 • 可用住家地址查詢天氣，自行設立氣象新聞中心，即時報導。 • 即時壞天氣電話通知。

  32. 資料來源 - Weather.com • 用Javascript把RSS Feed抓進來，再利用XML的tags解讀所需資訊。 • URL內含參數自動判斷要找哪個城市的天氣。 • 宜蘭並無天氣資料，因此改以鄰近的蘇澳作為其資料來源。

  33. 資料來源 – 中央氣象局 • Iframe把中央氣象局資料embed進來。 • 中央氣象局不提供RSS Feed，Server也不開放，完全沒有開放直接提取氣象資料的功能。 • 採一個小時觀測一次，且部分時段無天氣現象觀測。 • 極多為無人站台、氣象資料不予保證。

  34. 簡易架構圖 • 以網頁功能及關聯做分配：

  35. 實際操作

  36. A simple extension for you Take a Rest!! 張竣貿

  37. Why？ • We always spend too much time on surfingthe Internet • Why can’t I just have a alarm right on my browser?

  38. How？ • Two parts of this extension • Popup • Background_page Popup Send data Background

  39. 瀏覽器的發展日新月異，支援的功能也越來越強大。瀏覽器的發展日新月異，支援的功能也越來越強大。 • 期待在可見的將來，瀏覽器的便利性和支援平台會更加擴張，其Extension也能夠推出更加廣泛及突出的功能。 • 能夠繼續開發其他實用Extension，並學以致用！ 結論

  40. Group 6 感謝大家的聆聽！

More Related