Browsing articles in "CSS"
十一月
30
2011

HTML5 – Canvas 畫圖測試

html_canvas

*只可在支援HTML5的瀏覽器上運行

十月
22
2011
AS3 // CSS // CSS3 // HTML5 // web 2.0

Web 2.0開源應用大集會

13712257_200808061307391-180x160

數字媒體 相冊(Flickr, Picasa) Gallery,基於PHP + MySQL的Web相冊。非常易於使用,包括一個配置嚮導,對於相片的操作包括自動生成縮略圖、相片的大小改變、選擇、排序等。 Piwigo,基於PHP + MySQL。配備了強大的功能,發佈和管理您的照片,可擴展性和智能瀏覽功能,如類別,標籤,或年表。這是網絡和照片的標準要求。擴展使Piwigo更可擴展性和可定製的。 UberGallery,一個簡單易用的相冊。PHP。不需要數據庫。 Zenphoto,一個簡單的web相冊程序,它能夠簡單的展示你的圖片,並含有你所需要的所有功能和特點。可以和Wordpress集成。 視頻(YouTube) Flowplayer,一個用Flash開發的在Web上的視頻播放器,可以很容易將它集成在任何的網頁上。支持HTTP以及流媒體傳輸。 Plumi,一個建立在Plone 內容管理系統上的視頻分享系統,可幫助你輕鬆建立視頻分享網站。 音樂電台社區(last.fm, ulike) Libre.fm,對Last.fm 的克隆。 視頻電影社區(netflix, criticker) Filmaster,fileaster.com的源碼。 書(LibraryThing, Shelfari, Goodreads) O’Reilly Bookworm,在線電子圖書閱讀。 期刊參考論文數據庫(Emerald Insight, Springer Link) CiteSeerX, 採用機器自動識別技術蒐集網上以Postscrip和PDF文件格式存在的學術論文,然後依照引文索引方法標引和鏈接每一篇文章。(其是CiteSeer 的換代產品。1997年,CiteSeer引文搜索引擎由NEC公司在美國普林斯頓研究所的三位研究人員Steve Lawrence, Lee Giles和Kurt Bollacker研製開發。它是利用自動引文標引系統ACI(Autonomous Citation Indexing)建立的第一個科學文獻數字圖書館(Scientific Literature Digital Library))。 地圖(Google Maps) OpenStreetMap,一個可供自由編輯的世界地圖,它是由所有的用戶創造的。OpenStreetMap允許您查看,編輯或者使用世界各地的地理數據來幫助您。其就像Wikipedia一樣,全世界的人都可以編輯,據說其上面的數據超過了政府的數據。當然,目前其參與的人數還不夠,大量的地方都是白板。 文件存儲 文件共享/同步(DropBox, drop.io, Ubuntu One) Tahoe Least-Authority Filesystem,一個雲存儲分佈式文件系統。 iFolder,一個簡單安全的存儲解決方案,可在計算機間文件的同步和分享。可以用來隨時備份本地的文件。 存儲(Amazon S3, Imageshack, Box, Variety of models) Jesse Vincent’s Prophet,你可以看看他的文檔介紹吧。 在線文件編輯(Google Docs) AbiCollab,基於AbiWord的社群的線上文書處理協作服務。 Etherpad,基於開放軟體的線上文書處理服務,最大的特色在於多人即時共同協作一份文件,軟體組織不直接提供服務,而是透過其他沒有連繫的組織網站提供。 虛擬機供應(Amazon EC2) Eucalyptus (computing), 是一用來通過計算集群或工作站群實現彈性的、實用的雲計算。它最初是美國加利福尼亞大學 Santa Barbara [...]

四月
14
2011

微軟釋出IE10平台預覽版

Preview

微軟釋出IE10平台預覽版 E10強調對HTML5的原生支援。微軟企業副總裁Dean Hachamovitch表示,上個月出爐的IE9一開始就是專為HTML5所設計,並希望在視窗平台上提供最自然的HTML5體驗,而IE10則追隨IE9的腳步。 微軟最新的IE9瀏覽器正式版才在上個月開放下載,緊跟著在周二(4/12)的MIX會議上微軟便釋出了IE10的第一個平台預覽版(IE10 Platform Preview 1)。 IE10強調對HTML5的原生支援。微軟企業副總裁Dean Hachamovitch表示,上個月出爐的IE9一開始就是專為HTML5所設計,並希望在視窗平台上提供最自然的HTML5體驗,而IE10則追隨 IE9的腳步,直接使用視窗系統所提供的資源並避免任何可能拖慢網站或使用經驗的層級與函式庫等。 所謂的原生程式指的是針對機器語言或作業系統所設計的應用程式,而不用另外經過轉譯或環境的模擬。Hachamovitch認為,目前網站與HTML5所 能展現的最原生的經驗是在Windows 7上執行IE9,IE利用了作業系統的各項資源來最大化瀏覽器的效能、可用性與可靠性,最好的HTML5對作業系統來說應是原生的,讓網站經過最少的轉換 層,以及使用跨瀏覽器的HTML、CSS與script等。 微軟於本周展示IE10中用來描述文件呈現與格式的串接樣式表(Cascading Style Sheets,CSS)各種新興標準,諸如多欄位配置(CSS3 Multi-column Layout)、網格配置(CSS3 Grid Layout)、排版彈性配置(CSS3 Flexible Box Layout)、顏色漸層技術(CSS3 Gradients)及嚴格模式(ES5 Strict Mode)等。 Hachamovitch說,當開發人員可橫跨各種瀏覽器採用一致的混搭技術,並使用最新的技術打造網站,而且使網站的執行更像是原生應用程式而非網頁時,網路就會進步,這也是產業標準的價值所在。 初期看起來IE10像是IE9的強化版,強化IE9所具備的硬體加速能力及對各種新標準的支援,微軟已推出IE10各種技術的測試中心,並供應逾500種已提交至標準組織的新測試。

四月
8
2011

15 個實用的 HTML5 與 CSS 教學和速查表

html5_tutorials_3

HTML5的是給網頁設計師和開發新的功能,是事物的幻想與以前的版本的HTML。網頁現在將使用更多的語義與結構的特定標記。視覺元素如圓角現在 內置的,因此是能夠創造拖放互動。即使是不完全支持HTML5的主要瀏覽器中,有那些是推進和試驗的新功能。為了鼓勵你做同樣的和準備你的未來,我們』 VE的圍捕 15個有用的HTML5的教程和速查表. 教學 如何使一個 HTML5的iPhone應用程序 代碼向後兼容,第一頁與 HTML5的投資組合和CSS3 設計與應用程序代碼酷iPhone在HTML5網站 5編碼的HTML佈局便條 的HTML 5和CSS 3:技術說不定你們很快就會出院的使用 有1場日,HTML5的形式 設計一個用HTML5的博客 觸摸未來:創建一個優雅的網站在HTML 5和CSS3 在HTML5的結構標籤 編碼一對 CSS3和HTML5的單頁網站模板 如何使所有的瀏覽器渲染HTML5的標誌,正確 – 偶的IE6 備忘單 HTML 5的小抄 HTML 5的視覺小抄 HTML5的帆布小抄 HTML 5的袖珍手冊 相關文章 下面是一些其他文章,你一定會找到有用的。 13純 CSS技術創建的JavaScript類的相互作用 12個優秀的技術對 CSS3按鈕和菜單 最常見的HTML和CSS的誤區,以避免 14個有用的速查表的前端Web開發 11個有用的在線工具更好的CSS發展

三月
3
2011

測試網頁相容性:Internet Explorer Collection 、 IETester 同時運行不同版本 IE

測試網頁相容性:Internet Explorer Collection 、 IETester 同時運行不同版本 IE

  我自己慣用的預設瀏覽器當然是「Firefox」,不過當我在發表部落格新文章,或者改動部落格版型後,都會使用其它的瀏覽器(例如IE、Opera、Safari、Google Chrome)來打開我的部落格看看,這樣做是因為不同的網友會使用不同的瀏覽器來進入我的網頁,所以我必須試試看我的網頁是不是在幾種主流瀏覽器上都能正常觀看,要不然當訪客進入時出現網頁錯誤,對於瀏覽體驗來說可是大打折扣的。 一般來說我們可以在電腦中同時安裝各種不同的瀏覽器。其實多裝幾種瀏覽器是有很多好處的,例如我昨天也提到的「如何同時在電腦中開啟單一網站的多個不同帳戶(Google、Yahoo 各種網路服務全適用)?」這篇文章中的例子;而如果你是網站站長、部落格站長,多裝幾種瀏覽器也可以讓你去測試自己網頁的顯示效果;當然,多裝幾種瀏覽器可以「開闊你的眼界」,試試看不同的工具,找出對你來說最趁手的上網利器。 不過有個小問題就是,我們可以同時安裝IE、Firefox、Google Chrome都不會打架,但是卻無法同時安裝像IE6、IE7這種不同版本的同類瀏覽器,這在其它品牌瀏覽器中或許沒有什麼問題,但偏偏就是在IE中,有可能IE7可以打開的網頁在IE6中卻會出問題(或者相反),而又偏偏很多網友因為各種原因仍然繼續使用IE6,所以身為站長,我們可能就會想要分別去試試看自己網頁在IE6、IE7甚至IE8中是否正常,那這樣的需求要如何在「同一台電腦」中辦到呢?一台電腦中不是只能安裝一種IE嗎? 我不是在進行專業的網頁開發或設計工作,所以我的要求不多,我只要能夠讓我同時在單一台電腦中,測試我的網頁在IE6、IE7和IE8中的顯示效果即可,當然更重要的就是並存這些不同版本IE瀏覽器的同時,不會造成系統問題,也不會影響到我電腦中真正要用的IE(有時候有些網站確實還是要使用IE來開啟的)。而今天我就來介紹兩款可以滿足上述需求的好用工具:IETester 和 Internet Explorer Collection。 IETester:http://www.my-debugbar.com/wiki/IETester/HomePage Internet Explorer Collection:http://finalbuilds.edskes.net/iecollection.htm   前提:模擬測試專用,不要拿來當正常瀏覽器使用 使 用IETester 和 Internet Explorer Collection有個前提,就是這樣的工具看起來好像可以讓你同時運行多種不同版本的IE瀏覽器,但是千萬要記得它們都只是「模擬測試」的工具,模擬 的再好也和真正的IE有距離,即使像Internet Explorer Collection號稱讓你同時安裝IE 1.0到IE 8.0的獨立版本,但是你使用它的IE 8.0時,就會發現還是很多真正IE 8的功能是無法使用的!所以建議這兩種工具,都只要當做測試自己網頁相容性的用途即可。 另外就是IE(Internet Explorer)對於Windows作業系統來說不只是瀏覽器,也是很重要的一個系統元件,所以對於IE的變更是有造成系統問題的風險的。 當然,IETester 和 Internet Explorer Collection在我長期使用下是沒有什麼問題,它們都算是外部的工具而不會改動到你系統中原本真正的IE,這也是我推薦它們來做為網頁相容性測試工 具的原因;但還是有可能有風險存在,所以要特別在此強調說明。   我測試的系統環境: 因為IE是Windows的命脈之一,所以有必要說說我是在哪些環境下測試過沒有問題的:我分別在兩種電腦中測試過:第一種是Windows XP SP3、IE 6 的環境;第二種則是Windows XP SP3、IE 8 的環境。而這兩種工具的官方說明裡,是強調可以用在XP和Vista系統的,不過我自己還沒有在Vista用過它們(我的Vista大多拿來玩DirectX 10的遊戲XD)。   IETester 0.3.2:單純的網頁畫面模擬顯示 如果以模擬測試網頁的功能性來說,Internet Explorer Collection是比IETester強大的多,不過如果是以安裝使用時的簡易性、穩定性來說,IETester則是一個簡單又更不容易造成系統問題的IE模擬器。 下 載「IETester」,直接安裝執行,IETester本身是一個獨立的模擬程式,打開IETester,你可以在上方工具列看到啟動IE5、IE6、 IE7、IE8的按鈕,按下去就能在IETester裡面打開新分頁來模擬該版本的IE瀏覽器。對於要測試你的網頁在不同版本IE中的顯示效果,這是一個 極度簡單又好用的工具。 不過要注意的就是,你電腦的IE版本如果是6.0的話,那麼IETester可以幫你模擬到IE7,卻無法幫你模擬IE8。必需你電腦的IE版本是7.0以上,IETester才能完整的幫你模擬IE5到IE8的顯示狀態(當然我這裡講的是Windows XP系統中的狀態,因為Vista中預設就是安裝IE 7)。 另外我們也可以看到IETester就只是單純的模擬不同版本IE的網頁畫面顯示效果,對於不同版本IE的工具性功能則不會去模擬(例如你想看看IE 6、IE 8的瀏覽器工具列、設定有哪些不同,在IETester裡面是看不到的)。   Internet Explorer Collection 1.4.0.0:讓你看起來好像裝了多個IE IETester是單純的模擬不同版本IE的網頁畫面解析,所有的IE畫面都是在IETester主程式中用分頁來顯示,IETester是單一的測試平台中心。可是Internet Explorer Collection則是另外一種測試的思維,它「看起來」像是讓你可以同時在電腦中安裝IE [...]

三月
3
2011

16個最安全的網頁字型 – CSS

thumb.php

Impact [css].classname { color: #333333; font-family: Impact, Charcoal, sans-serif; }[/css] * * * * * Palatino Linotype [css].classname { color: #333333; font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; }[/css] * * * * * Tahoma [css].classname { color: #333333; font-family: Tahoma, Geneva, sans-serif; }[/css] * * * * * Century Gothic [css].classname { color: #333333; font-family: Century Gothic, sans-serif; }[/css] * * * * * Lucida Sans Unicode [css].classname { color: #333333; font-family: ‘Lucida Sans [...]

三月
2
2011

用css控制cellspacing、cellpadding

CSS

在table 中控制單元格之間的間距要用到cellspacing,cellpadding,默認情況 cellspacing,cellpadding均不為 0,但經常的狀況為了不讓表單元格之間的間距影響到美觀,我們經常會把 cellspacing ,cellpadding設置為 0,因此經常看到“<table cellspacing = 0 cellpadding = 0>”這樣的代碼。這樣做無形中增加了代碼的體積,而且也極其不符合樣式與內容分離的網絡標準,對於我本人來說也是極其厭惡這樣的形式的,因此使用的CSS控制cellspacing / cellpadding顯的意義重大了!以下是控制方法: table{border:0;margin:0;border-collapse:collapse;} table td{padding:0;} 第一行控制cellspacing,關鍵是“border-collapse:collapse;”這一句,第二行控制cellpadding,很少人知道控制td吧?

三月
2
2011

Google Web Font API

google_font

Google 公開了其 Google Web Font API,開始提供在線字體 (Web font) 服務,而且理所當然是免費的。日後 web designer / developer 要用系統以外的字體的時候,再不需要動用到 Photoshop 把字轉成圖,只消在 加入一行 code 即可。 載入外部檔案後,只需一如往常在 CSS 指定所需字體、設定屬性,甚至可以加入陰影效果。 Google font api 目前可用的字體可在 Google font directory 上找到,目前共有十款英文字體,都是質量很高的字體。如果 font directory 上的字體不夠用,其實還可以用 Typekit 公司的字體,只不過需付費就是。(其實此 api 是 Google 和 Typekit 合作開發的。) 如果需要中文字體的話,目前只能考慮上線不久的 Monotype Fonts.com Web Fonts 服務,Fonts.com 提供數十種中文字體,唯此服務還在 beta 階段,在 IE 下還是有很大問題。大概短時間內網頁上的中文字體都沒有比較好的解決方案。

三月
1
2011

利用Css解決Chrome 12px字體大小限制

font

有沒有發現,當你係css 將字體設定小於12px,在chrome瀏覽器是沒有效果? 這是因為chrome瀏覽器有限制住最小字體為12px 解決方法如下 *{ -webkit-text-size-adjust:none; }

二月
22
2011

Internet Explorer 9

ie9rc

作業系統需求: Windows Vista / Windows 7 / Windows Server 2008 / Windows Server 2008 R2 ! 不支援Windows XP ! 硬件加速的HTML5. 現在, 在您瀏覽網站時, 您僅僅使用了計算機性能的10%. Internet Explorer 9 將這個比例提升到90%. 內置了專業級的HTML5支持, Internet Explorer 9 通過Windows 充分發揮了計算機硬件的優勢,讓開發人員能夠開發出下一代的體驗.新的硬件加速HTML5 功能包括支持video 和audio 元素, 開啟了平滑、內嵌的視頻,不需要插件. 此外, 支持HTML5 canvas 元素讓動態圖形的渲染更加的容易, 同時通過Windows 和圖形處理單元(GPU)獲得加速. 新增的對幾個CSS3模塊的支持大大增加了網頁設計師創作的手段,新的DOM支持意味著更靈活的Web開發. 支持現代的標準. 開發者和客戶期待著新的豐富的web應用程序,由web標準例如HTML5, CSS3 和ECMAScript5開啟. 我們一直和標準組織例如…… 以下連結是Microsoft官方連結, 請放心使用 Windows 7- Windows 7 香港中文版 64-bit – 按此下載 Windows 7 香港中文版 32-bit – 按此下載 Windows 7 臺灣繁體中文版 64-bit – 按此下載 Windows 7 臺灣繁體中文版 32-bit [...]

二月
21
2011

讓 IE 6-8 也用到 CSS3 中的圓角陰影功能

logo

CSS3 PIE 是一個可以令IE6 , 7 , 8 完美地做到 CSS3 的圓角、漸變、陰影等功能,用法也十分簡單,大家不妨試試! 目前 CSS3 PIE 的支援語法 ========================================== * border-radius: 圓角 * box-shadow: 區塊陰影 * border-image * multiple background images * linear-gradient as background image: 漸層顏色 ========================================== * 詳見: PIE * 註: CSS3 PIE 是使用 .htc 的 hack 方式