網頁設計比賽

介紹兩場以檔案大小為重點的網頁設計比賽

JS1K

這是限制javascript檔案大小 >1 kb = 1024bytes。

10K Apart

而這是以前端為目的，可以使用最新的html 5 或css 3 來寫，也不限使用資料庫，但是不許使用flash或者silverlight。
這個倒設計的較美觀，雖然檔案大小限制在10kb，但似乎還算寬裕，但是既然用到html 5的話，那麼很垃圾的ie8以下想必是絕對沒辦法開啟的。


最近沒空，留著改天再來欣賞。

程式設計員小抄大全

轉貼自：http://coolshell.cn/articles/1566.html


這篇也很棒，筆記一下…


你是否會經常忘記一些CSS中的函數名或是一些屬性名，那個時候，你一定覺得，如果手邊有一個「小抄」（Cheat Sheet）就好了。當然，這個「小抄」不是給你作弊用的，這個「小紙條」就是可以讓你馬上知道那個你最想知道的東西。這個「小抄」上也不需要有所有的東 西，就需要那些經常用的就行了。現在，網上有很多這樣的「小抄」，它們可能是PDF格式的，可能是PNG格式的，你可以很方便地把其打印出來（可以打印得 很小），然後貼在你的電腦旁，一但需要，瞟一眼就可以了，這對於我們的工作是相當方便的。
之前，酷殼也有兩篇關於速查卡的文章《Web設計的速查卡》和《Vim命令速查卡》，不過都不如本貼多。
下面是N多的各種和樣的「小抄」，其中包括了Ajax, C++, Java, Python, PHP, Perl, ASP, Unix, Ruby, Google, HTML, CSS, XML ……..，讓我們姑且叫做「程序員小抄大全」吧。當然，他們都是英文版的，可能某些鏈接你可能需要翻牆軟件才能訪問。我這裡就不教你怎麼翻牆了，這樣的貼 子網上多的是。

SyntaxHighlighter 為網頁中的程式碼排版

以前在看男丁格爾的Blog時，在顯示程式碼部份是使用WordPress的專屬plugin(wp-codebox)，可惜無法直接在Blogger上使用。
後來總算找到了SyntaxHighlighter，我個人認為，SyntaxHighlighter與wp-codebox還是有些落差，不過大致上已經足夠了，所以就來寫點筆記記下來囉！

網站優化的要務 : 速度、速度、速度

轉貼自：http://www.dns.com.tw/seo/?p=707


關於速度的問題，我們已經在"網站速度是否為SEO的重要因素?"說明過，是的，你必須註意的是「網站速度」而引發的資料抓取量，而非「網站速度」影響SERP。你必須註意的是「網站速度」對於使用者的影響，而非搜尋引擎怎麼看你的「網站速度」。

Web 設計與開發終極資源大集合

轉貼自：http://inspire.twgg.org/c/internet/other/web-design-and-development-of-a-large-collection-of-the-ultimate-resource.html

Web 技術突飛猛進，Web 設計與開發者們可以選擇的工具越來越多，Web 開發者的技巧不再隻限於 HTML 和 服務器端編程，還需要精通各種第三方資源，這些第三方資源有時候比你的項目更複雜，更專業，你無法自己實現一切，借助一些 Web API，你可以很方便地將大量優秀的第三方資源集成到自己的站點。本文全面蒐集 Web 開發中可能用到的各種第三方資源。

Web 設計師的 50 個超便利工具

轉貼自：http://www.cnbeta.com/articles/115159.htm


作為一個 Web 設計師並不容易，不僅考慮設計與架構，還要時刻註意各種小細節，設計師的工作被各種各樣的問題包圍，你需要一套超級便利的工具幫你解決各種消耗時間和精力 的問題。本文介紹了50個非常強大的工具，你會發現，其中的一些工具會讓你感到驚艷在。

http壓力測試工具 x 2

轉貼自：http://homeserver.com.tw/apache/http%E5%A3%93%E5%8A%9B%E6%B8%AC%E8%A9%A6%E5%B7%A5%E5%85%B7/


最近在做一些web服務的負載及壓力測試，剛好看到一篇文章有提供幾款Linux上運作的壓力測試工具，先記錄下來，有機會再來用看看，也提供給有 需要的人作參考。

跨瀏覽器測試資源大全

轉貼自：http://www.comsharp.com/GetKnowledge/zh-CN/CMS_K975.aspx


我們生活在一個幸福又痛苦的時代，有太多的瀏覽器可以使用，對 Web 開發與設計者而言，你有義務保證你的設計兼容所有主流瀏覽器。然而跨瀏覽器測試是件相當複雜的事，涉及不同的瀏覽器，不同的版本，不同的平台。本文介紹了 與跨瀏覽器兼容測試有關的大量資源。

我要反IE！！

敗家誌 - 聯合抵制IE6 請升級或更新瀏覽器 

維基百科 - 對Internet Explorer的批評

IE6 No More - 杜絕IE6，人人有責
兔眼看天下 - [失效囉！] 救救設計師！請拋棄Internet Explorer 6
NeoEase - Let's Kill IE6
Blog.XDite.net - Youtube / (Facebook / Twitter) 即將停止支援 IE6
硬是要學！ - IE6 Out! 升級或更新瀏覽器 瀏覽網站不再「IE」鴻遍野
抱風伴靜 - IE6的終末
就是教不落 - IE6快離開地球滾回火星去吧～
dllee - IE6, IE5 對不起了
空中的人形醫生 - 網頁程式設計的苦惱與困境
重灌狂人 - 在網站加入警告標語，建議IE 6.0的使用者升級！
Derek‧德瑞克 - IE 6版面問題
電腦玩物 - 大家一起來！支持在網站加入提醒 IE 6.0 用戶升級或替換瀏覽器活動
阿祥 的網路筆記本 - [幫推]在網站加入警告標語，建議IE 6.0的使用者升級！
Smiley Skeleton's Solo - 加入抵制IE6警語
MoBu@Blog - IE6 先生，請您回墓園。
糖果 の無人小島 - 推廣:火狐 Firefox 3.5，拒用IE6
免費訊息軟體下載 - 聯合抵制IE6 請升級或使用他牌免安裝瀏覽器
Kei.tw Blog - 煩人的IE6與png圖檔問題2

Google網頁字體在線服務，設計師的福音

轉貼自：http://www.google.org.cn/posts/google-font-directory-released.html

目前網頁上使用的字體都是常見的幾種，如』Lucida Grande』, Verdana, Arial, Sans-Serif,中文常見的有宋體。

要想用比較個性的字體就比較麻煩了，因為你不能保證客戶端是否支持這種字體，常用的方法是用Photoshop把文字製作 成圖片。 為了讓網頁設計更加靈活，Google從2010年5月19日啟動了網頁在線字體服務，並一口氣發佈了十八字體族。但與 Monotype Web Fonts、FontShop 等字體商不同，Google 這次開放的字體與它其他很多服務一樣，完全免費。

利用Bing的ip指令查詢誰和你共用一台虛擬主機

 轉貼自：http://sofree.cc/bing-ip/

有時候會無聊好奇一下想要查查看自己同虛擬主機的用戶是哪些人？通常大家都會透過目前網路上的一個服務「myIPneighbors」 來檢查誰和自己相同主機。不過該服務後來不知道什麼原因而服務暫停，目前是無法使用的。
如果還想要查的話，最直接的方式就是詢問虛擬主機商，但通常你是不會知道的，因為這算是客戶的機密資料，不然頂多會跟你講一兩個比較大型的網站。如 果想要不透過主機商就可以查詢誰和你同一台主機？這時候其實還有個方式可以查詢誰和你共用一台虛擬主機，就是利用微軟Bing搜尋指令「ip」就可以查到。

IE-CSS3 - 讓IE支援CSS3

轉貼自：http://ka-yue.com/blog/ie-css3

IE-CSS3 是個能令 Internet Explorer 不完整地支援幾個常用的 CSS3 屬性的小 script。它利用了 Internet Explorer 專有的 Vector Markup Language (VML) 來繪制所需效果。
使用方法很簡單，如果你需要圓角效果，只需一如以往地用 border-radius，再加上 behavior: url(ie-css3.htc) 即可：

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Internet Explorer 6+ with IE-CSS3! YEAH! and Opera */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

IE-CSS3 支援 Internet Explorer 6, 7 及 8，可惜支援的屬性並不是太多，僅限於 border-radius, box-shadow 及 text-shadow。並未有實際使用過，不知道大量使用的話會不會把 IE 拖慢（大概也習慣了吧？）。以往需要圓角的時候我一般會選用 DD_roundies，未曾出過問題，而 DD_roundies 也是用 VML 來 implement 的，所以相信值得一試的。
未經壓縮的檔案大小為 12KB，官方沒有壓縮版。

網站安全性檢測軟體 - websecurify

轉貼自：http://blog.hsdn.net/1458.html

隨著架設網站的門檻降低，大家都可以很容易的架設網站，不管是透過外包、自行開發或者是申請(購買)主機然後抓取自由軟體(free software)安裝，前面提到的幾種方式，不管你使用那一種方式，大家通常都會忽略掉一件事情 - 你的網站和程式安全嗎?




對於個人使用者來說，或許你會覺得只是網站首頁被換掉或者是一些無關緊要的東西，但是換一個角度想一想，你既然花了時間和金錢去架設屬於自己的網站，這個網站某個程度而言就是代表了你這個人，你真的願意自己辛苦經營的網站就這樣敞開大門讓別人不費吹灰之力就摧毀你的心血嗎?




網站安全性對於公司企業的重要性，相信阿維不需要再多說，大家也都可以明瞭。阿維就不再累述了。




公司一般來說都會配置網管人員來進行網站的安全性監控，但是個人或者是規模較小的公司或許就沒有能力養得起這樣的人員，這時候阿維要推薦一套軟體讓大家在網站上線前，可以先做一下檢測，而且這套軟體還是免費的，完全不需要擔心費用的問題。




這套軟體的名稱是websecurify，他們標榜的是web and web 2.0 security，目前提供了windows、mac os和linux三種平台的版本，如果你也有興趣也可以下載原始碼回來研究。




阿維自己實際使用之後歸納了幾點心得




(1) 掃瞄需要花費不短的時間，因此你可以在開始掃瞄之後去睡個覺或者是跟朋友出門去玩耍，不要傻傻的待在電腦前面等他完成；





(2) 如果選擇進階掃瞄，掃瞄完之後的結果會有點多，多到在檢視的時候會讓電腦有點lag，阿維的電腦搭配四核心+4G的記憶體都會有這樣的現象，所以真的不是因為電腦比較差造成的；





(3) 不知道是阿維笨還是真的沒有報表輸出的功能，如果有這個功能就會超讚的。




趕快去下載websecurify檢測一下自己的網站有哪些地方需要加強和修正吧

jquery外掛【Lazy loader】延遲圖片加載，痞客邦及Blogger也可使用

轉貼自：http://steachs.com/archives/1501

最近在一些網站上看到一個圖片效果，是用來延遲加載圖片的功用，主要並不是減少流量，而是降低主機瞬間負載，特別是圖片爆多的網站，如果一頁有20張圖片，一次開啟完的話不僅訪客開的很累，對網站主機也是一種負荷，因此我們可以加上一支簡單的jquery外掛【Lazy loader】來延遲圖片開啟，當訪客往下拉到圖片位置時再去讀取圖片，非常建議圖片量大的網站加載。

最下方有痞客邦及Blogger加載的方式，無名沒意外應該是不能使用，尚未測試，有興趣的人可以依痞客邦的方式加載試試是否有效果。

Lazy loader：

網站位址：http://www.appelsiini.net/projects/lazyload
jquery 外掛下載：請 點我
效果展示：http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

安裝方式：
如果你的網站是Wordpress架設，下載jquery外掛後解壓縮上傳到你的佈景資料夾裡，在你的header.php裡 的</head>之前加入以下語法，即可使用：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lazyload.mini.js"></script>

<script type="text/javascript"> 

jQuery(document).ready(function($){

jQuery("img").lazyload({

effect:"fadeIn",

placeholder: "http://image.steachs.com/Files/grey.gif"

});

});

</script>

如果你網站是其它像是Discuz或是joomla，甚至是自己撰寫的網站，只要將上列語法修改為你放置lazyload.mini.js的路徑即 可，也就是下面這一行。

<script type="text/javascript" src="你放置的路徑/lazyload.mini.js"></script>

痞客邦或是Blogger用戶加載方法：
痞客邦用戶請在側邊欄新增一個版面，在自訂內容裡輸入以下語法即可。
Blogger用戶則是在側邊欄新增一個Html/Javascript欄位，再加入以下語法即可。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://image.steachs.com/Files/lazyload.mini.js"></script>

網頁設計最常犯的 34 項錯誤

轉貼自：http://zeroplex.blogspot.com/2010/04/34.html

網頁設計最常犯的 34 項錯誤: "翻譯自：

Top 34 Web Design Mistakes

http://www.bootstrike.com/Articles/DesignMistakes/

CSS簡寫指南

轉貼自：http://www.qianduan.net/css-font-shorthand-attribute-handbook.html

高效的css寫法中的一條就是使用簡寫。通過簡寫可以讓你的CSS文件更小，更易讀。而瞭解CSS屬性簡寫也是前端開發工程 師的基本功之一。今天我們系統地總結一下CSS屬性的縮寫。

色彩縮寫

色 彩的縮寫最簡單，在色彩值用16進制的時候，如果每種顏色的值相同，就可以寫成一個：

1	color：#113366

可 以簡寫為

1	color：#136

所 有用到16進制色彩值的地方都可以使用簡寫，比如background-color、border-color、text-shadow、box- shadow等。

[jQ] 文字特效approach

jQuery page

jQuery Approach

我會自動修改大小和顏色喔！

[jQ] 可自訂Tooltip的小玩意 - wTooltip

連至官網
Download plugin
jQuery page

Demo

Basics

Customizing Content

Styling Externally

從 js 到 jQuery 之八：AJAX 非同步的傳輸

 作者  TonyQ (沉默是金)                                      看板  Web_Design 
 標題  [心得]從 js 到 jQuery 之八：AJAX 非同步的傳輸                          
 時間  Sun Nov 30 17:10:48 2008                                               





        大概從2005年迄今 , 在當時幾乎非程式人員都不知道ajax ,
        到現在幾乎當紅的網站都打著 ajax的名號 ,

        筆者印象很深刻的是 , 2006年我開始正式接觸碰ajax的時候 ,
        就在ajax版留下「why ajax」的文章 , 雖然沒得到什麼回應 .


        後來也緊接著就寫出屬於自己包裝過的介面跟試用dojo,
        很多東西並不是很難或是很高深莫測 , 有時候就只是差一個「介紹」。

        如果還有認為ajax很神秘的朋友 , 這篇文章讓我們就ajax本質重新討論起,
        筆者曾經在討論這個問題時被說成是個ajax基本教義者 ,不過瞭解工具 ,
        絕對是能妥善發揮工具威力的必要條件.

        AJAX =  Asynchronous JavaScript and XML  非同步javascript & xml

從 js 到 jQuery 之一：javascript的魔力

 作者  TonyQ (沉默是金)                                      看板  Web_Design 
 標題  從 js 到 jQuery 之一：javascript的魔力                                 
 時間  Thu Aug  7 02:10:01 2008                                               


        有鑑於javascript常常讓人望之卻步 , 興起用下班時間寫一些教學的念頭,
        畢竟想做就該找方法 , 不太應該拿下班當理由 ,

        簡單用700～1000字為 jQuery及js的觀念寫一系列的文章.
        主要希望讓沒碰過的朋友們能有基礎 , 讓碰過的朋友們能加強觀念.

        當然為了增加吸引力 ,  每章最後都來放個實做案例好了...XD
        前三章應該主要還是在dom(document object model ).

        ────────────────────────────────

        第一章主要是要講什麼是javascript , 他在網頁設計上扮演著什麼角色,
        算是讓沒有基礎的使用者可以用來銜接用的 , 有基礎的版友可能會比較失
        望一點.

        ────────────────────────────────