使用 Yahoo 的 YUI Compressor 線上免費工具,將 JavaScript / CSS 檔案進行壓縮瘦身

使用 Yahoo 的 YUI Compressor 線上免費工具,將 JavaScript / CSS 檔案進行壓縮瘦身

若在網頁裡有引用的 JavaScript 或是 CSS 檔案,若檔案較大且又是每個網頁都引用,估計在網站的瀏覽高峰期時,流量也會受到這些 JavaScript 或是 CSS 檔案的影響,若想替這些檔案進行瘦身壓縮,可以透過 Yahoo 的 YUI Compressor 這個專門替 JavaScript / CSS 壓縮的免費工具來進行,使用方式相當簡單,只要上傳要壓縮的 JavaScript 或是 CSS 檔案後,便會得到一份已壓縮後的檔案,相當方便,有些檔案大小甚至可減半或更多。

2010 年 jQuery 的最佳 10 個 Plugins(Slideshow、Tooltip、Chart...)

2010 年 jQuery 的最佳 10 個 Plugins(Slideshow、Tooltip、Chart...)

jQuery 是一個相當簡潔的 JavaScript 程式庫, 簡化了原本在 JavaScript 對 HTML 網頁裡面的物件綁定、事件處理、動畫製作及處理 Ajax 互動的過程等,正因為寫得少,做得多的特性,就連在微軟的 Visual Studio 的網頁程式開發工具裡,也正式的支援 jQuery。jQuery 的(Plugins)外掛相當多,而由 WebDesignLedger 所選出的 2010 年 jQuery Plugins 的最佳 10 個 外掛,都是網頁裡常會用到的像是 Slideshow、Tooltip、Chart...等等,都是相當實用的 Plugins,若是有使用或想嘗試使用 jQuery Plugins 時,可以參考看看。

JS IMAGE CARVER 自動感知圖片內容,調整圖片尺寸大小

JS IMAGE CARVER 自動感知圖片內容,調整圖片尺寸大小

有關圖片尺寸的調整,多數的時候都是寬度與高度只能兼顧一邊,調整寬度,就自動縮放高度,相反的,調整高度,就按比例縮放寬度,這樣來做最省事,且讓圖片不會扭曲變形。而 JS IMAGE CARVER 這個線上工具則是挑戰不等比例的來調整圖片尺寸,且又讓圖片內容看起來是正常的,怎麼做呢?其透過 Seam Carving 演算法 來實現,簡單來說就是根據感知圖片內容,自動擠壓空間進而達到圖片尺寸大小調整,姑且不論 Seam Carving 演算法有多厲害,使用者通常只看結果,畢竟效果不好,演算法再複雜都無用,經過實測,如果圖片內容是人物的話,基本上不甚理想,但對於某些風景照,卻有不錯的效果,大家可試試。

KompoZer 實用的網頁編輯器

KompoZer 實用的網頁編輯器

想寫網頁程式,透過網頁編輯器等的輔助工具,應該能加快產能,KompoZer 是一套免費的網頁、CSS 編輯器,除了基本的 HTML 程式碼編輯、版面預覽、多分頁編輯模式,可同時開啟、編輯多個網頁內容等功能外,並可透過網站管理,將編輯好的網頁,方便發佈到自己的網站裡,簡單好用,且編輯好馬上就能看到效果。若能搭配使用 Free JavaScript Editor 實用的 HTML 及 JavaScript 整合編輯器,具 Intellisense 功能Free Colored ScrollBars 瀏覽器彩色滾動條(ScrollBar) CSS 及 JavaScript 特效產生器 JavaScript Collector 1.1.0.4 - 蒐集超過200個JaveScript語法 等工具來輔助,相信新手也能將網頁編輯工作,快速上手。

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

網頁在呈現之前是需要運算及傳輸時間的,如果可以在這個等待時間加入一個進度條,讓瀏覽者知道還要等多久,會是較理想的網頁設計,但進度條的準確度會受到很多條件的限制,因此,大部分的網頁都是提供一個等待圖示動畫,藉此提示瀏覽者,不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫,我們會使用 Gif 圖檔,而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入,Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON,每個均提供 REACT、HTML 及 CSS 原始碼,讓網頁設計使用 loader ICON可以更方便且有更多選擇。

24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。

Loads.in 網頁載入速度測試免費服務,可選擇測試地點及測試時所使用的瀏覽器

Loads.in 網頁載入速度測試免費服務,可選擇測試地點及測試時所使用的瀏覽器

有自己架設網站或部落格的朋友,可能會很在意或好奇自己網站裡各網頁在世界各個地方使用不同瀏覽器的載入速度,若有此需求可以來 Loads.in 這個網站所提供的網頁載入速度測試免費服務,測試地點可以選擇美國、歐洲、亞洲...等,瀏覽器則可以選擇 IE、FireFox、Chrome、Safari 等,使用方式相當簡單,選擇好要測試的地點,使用的瀏覽器,輸入要測試的網址,稍後,便可得到一份相當詳盡的圖形報告,包含像是網頁裡圖片、CSS、JavaScript 等等的每個載入所花費的時間。

MadEdit 好用的記事本軟體﹝免安裝繁體中文版﹞

MadEdit  好用的記事本軟體﹝免安裝繁體中文版﹞

覺得 Windows 內建的記事本軟體太陽春嗎?那麼可以試試 MadEdit 這套免費軟體,除了原有的記事本功能外,支援多分頁開啟,若用來編寫程式還可以使用語法高亮度標記﹝C/C++,CSS, diff/patch, D, DOS Batch Script, Flash ActionScript, HTML, Java,JavaScript, JSP, Lua, Pascal, PHP, Perl, Python, Ruby, UNIX Shell Script, x86 Assembly, XML, Fortran, TeX/LaTeX, Squirrel, C#, Visual Basic, ASP(VBScript), SQL, Verilog, VHDL﹞、支援多種編碼(Big5,GBK,UTF-8/16/32)並可隨時改變編碼、十六進位/區塊模式、正規表達式的搜尋或取代、字數計算、簡繁體互換...等。

Opera v11.10 正式版網路瀏覽器(繁體中文版)

Opera v11.10 正式版網路瀏覽器(繁體中文版)

繼微軟推出 IE 9.0 、Firefox 4.0 之後,Opera 也推出 Opera v11.10 網路瀏覽器,各家有各家的特色,從以前在就在 Opera 網站上宣稱的「The fastest browser on Earth」,到現在的「Lightning fast - 快如閃電」,Opera v11.10 有幾個特色,最快的 JavaScript 引擎、支援最新的 HTML5、平滑且快速的繪製圖形、內置下載管理器,支援 BT 下載、從網址列搜索網路、查找頁面中的內容並以高亮顯示、建立屬於自己的快速鍵...等等,絕對是值得一用的免費瀏覽器。另外對於如何使用 Opera 瀏覽器收發 EMail,請參閱 如何使用免費的 Opera 網路瀏覽器,當成 Outlook 來收發電子郵件

Pingdom 網頁加載速度測試

Pingdom 網頁加載速度測試

不管是自己架站或是將網頁託管在免費的服務上,除了網站的內容品質外,應該還會相當關心網站的速度,尤其是現在有很多的免費服務外掛工具,像是排名、站長工具、人數統計...等等,雖說只在網頁上站了一小塊的地方,但有可能就其服務的網速過慢而拖垮整個網頁的加載速度。想要知道網頁的加載速度與網站的那些元素是效能的殺手,可以來試試 Pingdom 這個可測試網頁加載速度與分析網頁元素的例如圖片、CSS、JavaScript...等的個別速度,讓你輕易的就可以知道瓶頸進行調整,發揮應有效能,除此之外,Pingdom 還提供 DNS 品質檢測與 PING 及 Traceroute 等線上工具。