400 likes | 573 Views
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 。
E N D
Introducing…… Internet Browsers and their Extensions Presented by Group 6
Tim Berners-Lee… • 1990年聖誕節,Tim Berners-Lee 正式實作了http的客戶端及伺服器架構。 • 1991年Tim Berners-Lee完成了第一個瀏覽器,WorldWideWeb。 • 集合了當時許多創新的軟硬體技術,為瀏覽器踏出了承先啟後的一步。 • 最初,瀏覽器被視為處理CERN龐大電話簿的實用工具。
Followers • 1993年NCSA Mosaic Web browser被開發出來。 • 世界上最早的GUI瀏覽器之一。 • 許多圖形介面瀏覽器的始祖。 • 主持人Marc Andreessen脫離成立Netscape。 • 1994年推出Netscape Navigator。 • 當時最成功、市占率最高之瀏覽器,市占超越90%。
Netscape vs. Microsoft • 1995年推出了自有的瀏覽器,Internet Explorer。 • 將其嵌入於自行開發的Windows OS中。 • 1998年美國vs. Microsoft反托拉斯訴訟案。 • IE在市場上的獨佔性已經不可避免。
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
Fashion Your Firefox MozillaFireFox
Mozilla基金會(MoFo) • 1998Netscape建立Mozilla組織 • 2003 年成立Mozilla基金會 • 非營利組織 • 支援和領導MozillaOpen Source專案
Mozilla Application Suite • 跨平台套裝軟體 • Netscape Navigator(網頁瀏覽器) • Communicator(電子郵件客戶端) • Composer(網頁開發軟體) • ChatZilla(IRC用戶端軟體) • 可在Linux、Windows、Mac OS X下執行
Mozilla Firefox • 從Mozilla Application Suite獨立出來 • Open Source Code • 解決軟體肥大問題 • 取代功能複雜的Mozilla Suite
設計準則 • 不多不少剛剛好,製作有用的瀏覽器 • 易用性、輕量 • 回應速度要快!!!讓使用者覺得煩 - 感覺上的速度比實際速度重要 • 提供擴充系統添加新功能又不影響核心 • 自訂瀏覽器以符合特定需求
特色 • 分頁瀏覽 • 即時書籤 • 下載管理員 • 自訂搜尋引擎 • 附加元件(擴充套件、佈景主題) • 跨平台支援、支援多種網路標準
市場接納度 • 截至2010年10月=>市占率22.83% • 僅次於微軟Internet Explorer • 第二流行的瀏覽器版本
Demo • Video made by B97705070 Patrick
李孟修、陳少祁 Google Chrome Extensions
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萬左右的使用者
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; } -->
TW Current Weather 即時天氣狀況顯示Extension 王毓璟
資料來源 - Weather.com • 由Weather.com所提供的RSSFeed。 • 全球最大氣象網站,資料包括台灣逾30個城市。 • 可用住家地址查詢天氣,自行設立氣象新聞中心,即時報導。 • 即時壞天氣電話通知。
資料來源 - Weather.com • 用Javascript把RSS Feed抓進來,再利用XML的tags解讀所需資訊。 • URL內含參數自動判斷要找哪個城市的天氣。 • 宜蘭並無天氣資料,因此改以鄰近的蘇澳作為其資料來源。
資料來源 – 中央氣象局 • Iframe把中央氣象局資料embed進來。 • 中央氣象局不提供RSS Feed,Server也不開放,完全沒有開放直接提取氣象資料的功能。 • 採一個小時觀測一次,且部分時段無天氣現象觀測。 • 極多為無人站台、氣象資料不予保證。
簡易架構圖 • 以網頁功能及關聯做分配:
A simple extension for you Take a Rest!! 張竣貿
Why? • We always spend too much time on surfingthe Internet • Why can’t I just have a alarm right on my browser?
How? • Two parts of this extension • Popup • Background_page Popup Send data Background
瀏覽器的發展日新月異,支援的功能也越來越強大。瀏覽器的發展日新月異,支援的功能也越來越強大。 • 期待在可見的將來,瀏覽器的便利性和支援平台會更加擴張,其Extension也能夠推出更加廣泛及突出的功能。 • 能夠繼續開發其他實用Extension,並學以致用! 結論
Group 6 感謝大家的聆聽!