網頁效能最佳化要點之一 圖片處理最佳化要點
1.使用正確的圖檔壓縮格式與優化要點
1.1 選擇正確的圖檔格式 : 例如 簡單的插圖(少於256色)或包含文字的圖形應採用GIF或PNG-8格式，顯示百萬種顏色的相片應採用JPEG(JPG)格式，簡單的動畫採用GIF格式，顯示高品質不失真的相片採用PNG-24格式
1.2 進行圖檔壓縮 : 100 × 100 pixels的圖檔，通常在3到5KB以內，250 × 250 pixels的圖檔，也儘可能限定在20KB以內，採用工具如Pngcrush : PNG檔最佳化處理, Jpegtran : JPEG檔案最佳化處理，gifsicle : GIF檔案最佳化處理，或其他圖檔處理軟體。
1.3 降低色板 : 如果圖片只需要四種顏色而卻使用256色調色板的圖檔，應進行圖片的優化以減少下載量。
1.4 盡量將圖檔的修邊修到最小，減少不必要的空間浪費。
1.5 適度犧牲樹葉及髮絲的完美呈現，可大幅提升執行速度，在美觀與效能間取得平衡。
1.6 如果有WCMS上稿系統應限制上稿圖檔的大小。
2.大型圖片最佳化 : 一些網站的活動網頁使用圖片通常很大，採取的方式有三種
2.1 將一大圖切割成多個小圖 : 分成多個小圖平行下載。需分放兩個Domain，不建議此方式。
2.2 交錯式（Interlace）圖片 : 瀏覽器在載入圖檔時以隔行方式下載，像是電視掃描線，讓瀏覽網頁時逐步顯示圖片內容，在未全部載入時即可預先看圖，提供較佳的使用者體驗。一些圖形處理軟體可以將JPEG,GIF,PNG存成交錯式的圖檔。
2.3 漸進式圖片顯示技術 : 圖片載入過程中，先顯示圖片的輪廓或者草圖，甚或是將圖片的縮略圖放大顯示，即在放大顯示後會圖片會出現模糊等效果。小圖片或者漸進式圖片的大小，遠遠小於原圖片本身的大小。以此提高網站的用戶體驗。
3.使用CSS Sprites : 利用 CSS sprites 將小圖拼合後利用background來定位。可以大量減少圖片的Http requests。CSS Sprites 最佳化的方法
3.1 Sprite可以被Cached，時常要修改或更動的圖片就不適合放在Sprite中。
3.2 橫向佈局Sprite中的圖片往往比縱向佈局會減少文件大小。
3.3 Sprite中組合相近的顏色以降低顏色的數量，從而達到適合PNG8的低於256色的標準。
3.4 為了適用於移動設備，不在Sprite裡留下大的空隙。雖然空白不十分影響文件的大小，但會減少客戶端代理(proxy)將圖片解壓為像素映射(bitmap)的記憶體消耗，100*100的圖片是一萬像素，而1000*1000則是一百萬像素。
2013年6月7日
如何移除流氓軟體 - 移除工具的嘗試
作者: Fred Wang (FW知識瑣記) 日期: 2013/6/7
為了尋找一個portable software solution，不慎下載了藏有流氓軟體 "Qvo6"的software，綁架了電腦中三的大瀏覽器IE, Chrome, Firefox，不要以為裝了防毒軟體就阻擋得了，或清除的掉，很多移除後還是留殘毒在系統中。在Google中爬了一些網文，用了一些洋人提供的步驟，移除檔案，清除註冊檔等步驟，奮戰了一陣子，還是清不掉頑強Qvo6，還是找一些工具來嘗試看看，下面是我嘗試過的工具，最後終於成功了 :
1. 小紅傘(Avira)掃毒 --- 沒找到 (可能是用免費版，功能較弱)
2. Avast 掃毒 --- 沒找到 (可能是用免費版，功能較弱), Avast還提供一個瀏覽器清理器(browser cleanup)，試用後還是沒有找到Qvo6
3. IObit Malware Fighter --- 沒找到 (可能是用免費版，功能較弱), IOBit這家公司的電腦防護軟體Advanced System Care是一套很優秀的軟體，強大的功能，精緻的操作介面，可以搭配許多IOBit的工具程式使用，Malware Fighter就是其中一個工具程式。可以偵測並清除惡意軟體的威脅，註冊問題，隱私資訊，垃圾檔案，捷徑錯誤，註冊破片，效能問題，瀏覽器問題，Windows安全漏洞，破片檔案等值得推薦。
4. Avast browser cleanup -- 找到一些Adware，但是沒有Qvo6
5. RootAlyzer -- 沒找到，這個工具似乎有點舊了。
6. Anvisoft Browser Repair Tool -- 找到了，但是要註冊付費版才能清除, Anvisoft公司提供了很多免費試用的移除工具，可以供大家參考。目前v1.0.30版僅提供IE Repair其他瀏覽器要使用v2.0才行。
7. Qvo6 Virus Removal Tool by Security Stringhold, 找到了相關感染的檔案，需要付費版本才可以清除。
8. SpyHunter -- 找到了，但是要註冊付費版才能清除 (還找到很多,自己不知道的殘毒)，EnigmaSoftwareGroup的SpyHunter有很強的Spyware掃描能力，官方提供免費的掃描程式，網路上有破解版與Portable版，不過要當心，這些非官方東西是否包了一些有問題的程式碼，造成更多的問題。
9. AdwCleaner by Xplode-- 找到了，更重要是可以清除掉，而且清除的不只是Qvo6，只是再Run一次SpyHunter還是發現有其他可疑的殘毒，再想辦法吧! 至少Qvo6這個頑強的流氓軟體已經清除了。這個Beepingcomputer公司開發的免費工具還挺好用的，目標在搜尋清除電腦中的Adware, Toolbars, Potentially Unwanted Programs (PUP), and browser Hijackers等，也可以參閱這篇中文文章 : 《AdwCleaner》徹底清除網頁被綁架、惡意工具列、不定時出現廣告。會產生一個報告檔案，顯示Services, Files/Folders, Registry, Internet Browsers感染的狀況，針對的瀏覽器為IE, Firefox與Chrome。
10. Ad Aware by LAVASOFT
(補充) Revo Uninstaller -- 這是一個很多網友推薦，相當優秀軟體安裝資訊的移除工具，有些在Windows控制台無法移除或沒辦法移除乾淨的軟體，用這個工具應該都可以輕易解決。除了解除安裝功能外，Pro版還有垃圾檔案清理器，瀏覽器清理器，MS Office清理器，Windows清理器，行跡移除器，自動啟動管理原，備份管理員等工具。參閱這篇中文文章有操作說明 :"Revo Uninstaller 1.83 免費強力解除安裝軟體，徹底移除無效應用程式"
註 : 很多品牌防毒軟體只要付費應該可以完美的清除，畢竟這些公司還是有許多專家好手。
雖然，可以用工具移除流氓軟體，但是，經常試用各種軟體的人，常常發生瀏覽器被綁架，需要進行移除的情況，因此，最好是將瀏覽器的設定檔整個上鎖保護，讓預設首頁與搜尋引擎等不被存取更改。另一篇文章 "如何保護您的瀏覽器不被流氓軟體綁架-瀏覽器設定保護工具" 可能對您有幫助
為了尋找一個portable software solution，不慎下載了藏有流氓軟體 "Qvo6"的software，綁架了電腦中三的大瀏覽器IE, Chrome, Firefox，不要以為裝了防毒軟體就阻擋得了，或清除的掉，很多移除後還是留殘毒在系統中。在Google中爬了一些網文，用了一些洋人提供的步驟，移除檔案，清除註冊檔等步驟，奮戰了一陣子，還是清不掉頑強Qvo6，還是找一些工具來嘗試看看，下面是我嘗試過的工具，最後終於成功了 :
1. 小紅傘(Avira)掃毒 --- 沒找到 (可能是用免費版，功能較弱)
2. Avast 掃毒 --- 沒找到 (可能是用免費版，功能較弱), Avast還提供一個瀏覽器清理器(browser cleanup)，試用後還是沒有找到Qvo6
3. IObit Malware Fighter --- 沒找到 (可能是用免費版，功能較弱), IOBit這家公司的電腦防護軟體Advanced System Care是一套很優秀的軟體，強大的功能，精緻的操作介面，可以搭配許多IOBit的工具程式使用，Malware Fighter就是其中一個工具程式。可以偵測並清除惡意軟體的威脅，註冊問題，隱私資訊，垃圾檔案，捷徑錯誤，註冊破片，效能問題，瀏覽器問題，Windows安全漏洞，破片檔案等值得推薦。
4. Avast browser cleanup -- 找到一些Adware，但是沒有Qvo6
5. RootAlyzer -- 沒找到，這個工具似乎有點舊了。
6. Anvisoft Browser Repair Tool -- 找到了，但是要註冊付費版才能清除, Anvisoft公司提供了很多免費試用的移除工具，可以供大家參考。目前v1.0.30版僅提供IE Repair其他瀏覽器要使用v2.0才行。
7. Qvo6 Virus Removal Tool by Security Stringhold, 找到了相關感染的檔案，需要付費版本才可以清除。
8. SpyHunter -- 找到了，但是要註冊付費版才能清除 (還找到很多,自己不知道的殘毒)，EnigmaSoftwareGroup的SpyHunter有很強的Spyware掃描能力，官方提供免費的掃描程式，網路上有破解版與Portable版，不過要當心，這些非官方東西是否包了一些有問題的程式碼，造成更多的問題。
9. AdwCleaner by Xplode-- 找到了，更重要是可以清除掉，而且清除的不只是Qvo6，只是再Run一次SpyHunter還是發現有其他可疑的殘毒，再想辦法吧! 至少Qvo6這個頑強的流氓軟體已經清除了。這個Beepingcomputer公司開發的免費工具還挺好用的，目標在搜尋清除電腦中的Adware, Toolbars, Potentially Unwanted Programs (PUP), and browser Hijackers等，也可以參閱這篇中文文章 : 《AdwCleaner》徹底清除網頁被綁架、惡意工具列、不定時出現廣告。會產生一個報告檔案，顯示Services, Files/Folders, Registry, Internet Browsers感染的狀況，針對的瀏覽器為IE, Firefox與Chrome。
10. Ad Aware by LAVASOFT
(補充) Revo Uninstaller -- 這是一個很多網友推薦，相當優秀軟體安裝資訊的移除工具，有些在Windows控制台無法移除或沒辦法移除乾淨的軟體，用這個工具應該都可以輕易解決。除了解除安裝功能外，Pro版還有垃圾檔案清理器，瀏覽器清理器，MS Office清理器，Windows清理器，行跡移除器，自動啟動管理原，備份管理員等工具。參閱這篇中文文章有操作說明 :"Revo Uninstaller 1.83 免費強力解除安裝軟體，徹底移除無效應用程式"
註 : 很多品牌防毒軟體只要付費應該可以完美的清除，畢竟這些公司還是有許多專家好手。
雖然，可以用工具移除流氓軟體，但是，經常試用各種軟體的人，常常發生瀏覽器被綁架，需要進行移除的情況，因此，最好是將瀏覽器的設定檔整個上鎖保護，讓預設首頁與搜尋引擎等不被存取更改。另一篇文章 "如何保護您的瀏覽器不被流氓軟體綁架-瀏覽器設定保護工具" 可能對您有幫助
2013年5月10日
使用Samba在linux建立Windows網路芳鄰的分享資料夾-區分唯讀用戶與可寫入用戶的案例
作者: Fred Wang (FW知識瑣記) 日期: 2013/5/10
path = /data/project # 在linux中的路徑，在步驟3建立此目錄
browseable=yes # 大家都可以看到，但是只有valid users才能進入
public=no
writable = yes
write list=@prjwriters # 寫入的群組
valid users=@prjreaders,@prjwriters # 可連入的群組
create mask = 0664 # 注意權限的設定
directory mask = 0775
雖然拜讀了鳥哥對Samba伺服器詳細的解說，但是在實務上，如果建立的分享資料夾，需指定部分用戶能讀寫，部分用戶只能讀取，未指定的用戶則完全無權限，要怎樣設定呢? 還是看得霧煞煞的，自己嚐試做不同的設定終於成功了，如果有此類需求，可以按照下面步驟試試看:
1. 更改/etc/samba/smb.conf
[project] # 顯示在Windows網路芳鄰的目錄名稱
comment =Project Grouppath = /data/project # 在linux中的路徑，在步驟3建立此目錄
browseable=yes # 大家都可以看到，但是只有valid users才能進入
public=no
writable = yes
write list=@prjwriters # 寫入的群組
valid users=@prjreaders,@prjwriters # 可連入的群組
create mask = 0664 # 注意權限的設定
directory mask = 0775
2. 更改/etc/group，指定寫入群組的帳號與唯讀群組的帳號
.png)
prjreaders:x:10003:user1,user2,user3
prjwriters:x:10004:user4,user5,user6
prjwriters:x:10004:user4,user5,user6
3. 建立分享目錄，並設定目錄權限
mkdir /data/project
chmod 2775 project # 注意權限的設定
4. 要重開Samba service
/etc/init.d/smb restart
上面步驟不含Samba Server架設與Samba帳號建立，還是請大家拜讀鳥哥的書籍。
參考資料
1.鳥哥私房菜 第十六章、檔案伺服器之二： SAMBA 伺服器 http://linux.vbird.org/linux_server/0370samba.php#theory_source
CSS float 浮動段落的學習案例
作者: Fred Wang (FW知識瑣記) 日期: 2013.05.09
使用Drupal等平台架站，如果要做更細緻的設計，不免要改到外觀布局，也就是CSS的部分，多數看到的Themes，都是利用CSS進行版面的編排，看來早已經取代HTML老派的Table寫法，在瀏覽器解譯的效能上，透過一些預載的技巧CSS可以達到更佳的效能，也可以有更豐富的呈現效果，在此就不詳細說明。
像我這樣習慣舊式設計的老人，初用CSS float來設計版面，常常會調半天才調正確來，因此，利用下面案例，學習一下CSS float的呈現原理，也分享給新手們參考。
這個例子用不同大小的區塊來呈現文字區塊插入一段文章內效果(如果區塊大小相同，就與table一樣了)。
先看一下這段HTML碼
1.浮動段落要寫在非浮動段落(通常是文章的主文)前，這樣才可以感覺到一段插入在主文中的文字區塊，這個區塊的內容可能是附註，重點提示或簡述，當然也可以是圖片。
2.浮動段落會推動非浮動段落的內容，像下圖把部分非浮動段落的內容往右推。
3.浮動段落，也就是加float的段落，必定是以長方形的方式顯示，且會依序排列，如第一個float:left段落在最左邊，第二個float:left段落其次；而float:right當然是靠右。
4.如果螢幕寬度或瀏覽器視窗變小，兩邊的浮動區塊內縮擠壓到主文(非浮動段落)，會如何呢?請看下圖，右方區塊已經將主文往下推了。
使用Drupal等平台架站，如果要做更細緻的設計，不免要改到外觀布局，也就是CSS的部分，多數看到的Themes，都是利用CSS進行版面的編排，看來早已經取代HTML老派的Table寫法，在瀏覽器解譯的效能上，透過一些預載的技巧CSS可以達到更佳的效能，也可以有更豐富的呈現效果，在此就不詳細說明。
像我這樣習慣舊式設計的老人，初用CSS float來設計版面，常常會調半天才調正確來，因此，利用下面案例，學習一下CSS float的呈現原理，也分享給新手們參考。
這個例子用不同大小的區塊來呈現文字區塊插入一段文章內效果(如果區塊大小相同，就與table一樣了)。
先看一下這段HTML碼
1.浮動段落要寫在非浮動段落(通常是文章的主文)前，這樣才可以感覺到一段插入在主文中的文字區塊，這個區塊的內容可能是附註，重點提示或簡述，當然也可以是圖片。
2.浮動段落會推動非浮動段落的內容，像下圖把部分非浮動段落的內容往右推。
4.如果螢幕寬度或瀏覽器視窗變小，兩邊的浮動區塊內縮擠壓到主文(非浮動段落)，會如何呢?請看下圖，右方區塊已經將主文往下推了。
2013年1月2日
2012年12月最流行的電腦程式語言排名與趨勢
作者: Fred Wang (FW知識瑣記) 日期: 2013/1/2
根據TIOBE，在2012/4月以前Java保持約七年的第一名寶座，在該月被C語言擠下，到2012/12月C仍保持第一的優勢
雖然C, C++與Java市佔率也有上升，但更令人矚目的是2009年才崛起的Objective C在Apple的加持下短短三年半一路攀升到第三名，寫下程式語言的傳奇!
2012/1 (1) Java 17.48% (2) C 16.98% (3) C# 8.78%
2012/2 (1) Java 17.05% (2) C 16.52% (3) C# 8.65%
2012/3 (1) Java 17.11% (2) C 17.09% (3) C# 8.24%
2012/4 (1) C 17.56% (2) Java 17.03% (3) C++ 8.90%
...
2012/12(1) C 18.70% (2) Java 18.57% (3) Objective-C 11.12% (4) C++ 9.2% (5) C# 5.55%
C#在2012/4月落後C++之後，持續下滑，到2012/12月僅剩5.55%，排名第五
根據TIOBE，在2012/4月以前Java保持約七年的第一名寶座，在該月被C語言擠下，到2012/12月C仍保持第一的優勢
雖然C, C++與Java市佔率也有上升，但更令人矚目的是2009年才崛起的Objective C在Apple的加持下短短三年半一路攀升到第三名，寫下程式語言的傳奇!
2012/1 (1) Java 17.48% (2) C 16.98% (3) C# 8.78%
2012/2 (1) Java 17.05% (2) C 16.52% (3) C# 8.65%
2012/3 (1) Java 17.11% (2) C 17.09% (3) C# 8.24%
2012/4 (1) C 17.56% (2) Java 17.03% (3) C++ 8.90%
...
2012/12(1) C 18.70% (2) Java 18.57% (3) Objective-C 11.12% (4) C++ 9.2% (5) C# 5.55%
C#在2012/4月落後C++之後，持續下滑，到2012/12月僅剩5.55%，排名第五
訂閱：
文章 (Atom)