Menu

最好的Web開發資源大全

文章來源：Best “must know” open sources to build the new Web

學習HTML 5編程和設計

服務器端的軟件

  • ★ Node.js 是服務器端的 JavaScript 環境，其使用了異步事件驅動模式。其讓Node.js在很多互聯網應用體系結構下獲得非常不錯的性能。 源碼 和 實時演示。
  • PhantomJS 也是一個服務器端的 JavaScript API的WebKit。其支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG
  • Lighttpd 一個輕量級的開源Web服務器。新聞，文檔，benchmarks, bugs, 和 download. Lighttpd 支撐了幾個非常著名的 Web 2.0 網站，如：YouTube, wikipedia 和 meebo.
  • NGinx, 性能巨高無比的輕量級的Web服務器。比Apache高多了。花了6年的時間，終於走到了1.0版。
  • Apache HTTP Server 是一個很流行的並支持多個流行的操作系統的Web服務器。
  • ★ PHP 可能是最流行的服務器端的Web腳本動態處理語言。
  • 當然，還有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go,Fantom,CoffeeScript, D, …

PHP 框架和工具

  • ★ WordPress 是一個基於博客系統的開源軟件。參看《WordPress是怎麼贏的？》
  • Drupal 是一個內容管理系統 (CMS).
  • Centurion 是一個新出現的開源 CMS ，一個靈然的 PHP5 Content Management Framework. 使用 Zend Framework, 其組件堅持通用，簡單，清楚和可重用的設計原則。
  • phpBB 一個開源的論壇（國內的Discuz！更多）
  • ★ SimplePie : 超快的，易用的,  RSS  和 Atom feed PHP解析。
  • ★ PHPthumb, PHP 圖片處理庫
  • ★ PHPMailer 強大的全功能的PHP郵件庫
  • PubSubHubbub協議，一個簡單，開放， server-to-server 的 pubsub (publish/subscribe) 協議——Atom and RSS的擴展。
  • 更多的請參看 – 20個你應該知道PHP庫 和 9個強大免費的PHP庫

數據庫

  • ★ Apache CouchDB 是一個面向文檔的數據庫管理系統。它提供以JSON 作為數據格式的REST 接口來對其進行操作，並可以通過視圖來操縱文檔的組織和呈現。.源碼.
  • MonoQL 是一個採用PHP+ExtJS開發的MySQL數據庫管理工具。界面極像一個桌面應用程序，支持大部分常用的功能包括：表格設計，數據瀏覽/編輯，數據導入/導出和高級查詢等。
  •  MariaDB 是MySQL的一個分支，由MySQL 創始人Monty Widenius 所開發。GPL，用來對抗Oracle所有的MySQL的license的不測。自Oracle收購SUN以來，整個社區對於MySQL前途的擔憂就沒有停止過。
  • ★ SQLite 不像常見的客戶端/服務器結構範例，SQLite引擎不是個程序與之通信的獨立進程，而是連接到程序中成為它的一個主要部分。所以主要的通信協議是在編程語言內的直接API調用。這在消耗總量、延遲時間和整體簡單性上有積極的作用。整個數據庫（定義、表、索引和數據本身）都在宿主主機上存儲在一個單一的文件中。它的簡單的設計是通過在開始一個事務的時候鎖定整個數據文件而完成的。庫實現了多數的SQL-92標準，包括事務，就是代表原子性、一致性、隔離性和持久性的（ACID），觸發器和多數的複雜查詢。不進行類型檢查。你可以把字符串插入到整數列中。某些用戶發現這是使數據庫更加有用的創新，特別是與無類型的腳本語言一起使用的時候。其他用戶認為這是主要的缺點。
  • SQL 在線設計編輯器，這一節的那個圖片就是這個在線編輯器的樣子了。一個畫數據庫圖表的在線工具。很強大。

API 和 在線數據

在線代碼和媒體編輯器

  • ★ CodeRun Studio一個基於JavaScript語言開發的跨平台的集成開發環境，它立足於雲計算的設計思路，方便開發者在瀏覽器端便可以輕鬆開發、調試和部署網絡應用程序。（參看《Coderun.com 在線開發IDE》）
  • Cloud9 IDE – 一個基於Node.JS構建的JavaScript程序開發Web IDE。它擁有一個非常快的文本編輯器支持為JS, HTML, CSS和這幾種的混合代碼進行著色顯示。
  • ★ jsFiddle – Javascript的在線運行展示框架，這個工具可以有效的幫助web前端開發人員來有效分享和演示前端效果，其簡單而強大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
  • Akshell，一種雲服務，它使用服務端的JavaScript和在線的IDE幫助開發者進行快速應用程序開發。 它還提供雲託管，所以部署是即時的。
  • JSONeditor, 一個好用的JSON 編輯器
  • ★ TinyMCE 一個輕量級的基於瀏覽器的所見即所得編輯器，支持目前流行的各種瀏覽器，由JavaScript寫成。
  • Ext Designer 是一個桌面應用工具，幫助你快速開發基於ExtJS 的用戶界面。
  • ★  LucidChart，一款基於最新的html5技術的在線圖表繪製軟件，功能強大，速度快捷，運行此軟件需要支持html5的瀏覽器。
  • Balsamiq Mockups, 產品設計師繪製線框圖或產品原型界面的利器。
  • Color Scheme Designer 3 - 一個免費的線上調色工具
  • ★ Pixlr, 是一個來自瑞典基於Flash的免費在線圖片處理網站。除了操作介面和功能接近Photoshop，還是多語言版本，支持簡體中文。（以前酷殼介紹過）
  • Aviary, 是一個基於HTML5 的在線圖片處理工具，可以很容易的對圖片進行後期處理。 Aviary API
  • Favicon Generator, 線上favicon(16×16)製作工具。

代碼資源和版本控制

  • ★ GitHub 是一個用於使用Git版本控制系統的項目的基於互聯網的存取服務。
  • Git 是一個由Linus為了更好地管理linux內核開發而創立的分佈式版本控制／軟件配置管理軟件。其巨快無比，高效，採用了分佈式版本庫的方式，不必服務器端軟件支持，使源代碼的發布和交流極其方便。
  • Google Code 谷歌公司官方的開發者網站，包含各種開發技術的API、開發工具、以及開發技術參考資料。
  • Google Libraries API Google 將優秀的 JavaScript 框架部署在其 CDN 上，在我們的網站上使用 Google Libraries API 可以加速 JavaScript 框架的加載速度。
  • Snipplr 一個開放的源代碼技巧分享社區，號稱Code 2.0。和一般的源碼分享網站不同，它針對的並不是大型網站源碼，而是一些編程的代碼技巧。

JavaScript 桌面應用框架

  • ★ jQuery 是一個快速、簡單的JavaScript library， 它簡化了HTML 文件的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。  源碼, API, API瀏覽, 很不錯的文檔.
  • ★ 官方的 jQuery User Interface (UI) library (演示和文檔). 源碼,Themes Roller, Download.
  • YUI 2 — Yahoo! User Interface Library
  • Mootools, 一個超級輕量級的 web2.0 JavaScript framework
  • Prototype 提供面向對象的Javascript和AJAX
  • Dojo The Dojo Toolkit，一個強大的無法被打敗的面向對象JavaScript框架。主要由三大模塊組成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相關操作API。Dijit是一個可更換皮膚，基於模板的WEB UI控件庫。DojoX包括一些創新/新穎的代碼和控件：DateGrid，charts，離線應用，跨瀏覽器矢量繪圖等。
  • ★ Ext JS 4, 業內最強大的 JavaScript framework。
  • PHP.js, 一個開源的JavaScript 庫，它嘗試在JavaScript 中實現PHP 函數。在你的項目中導入PHP.JS 庫，可以在靜態頁面使用你喜歡的PHP 函數。

JavaScript 移動和觸摸框架

  • ★ jQuery Mobile : 是 jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平台。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。我們將盡全力去滿足這樣的需求。 Sources.
  • Zepto.js Zepto.js 是支持移動WebKit瀏覽器的JavaScript框架，具有與jQuery兼容的語法。2-5k的庫，通過不錯的API處理絕大多數的基本工作。 Sources.
  • MicroJS : Microjs網站應用列出了很多輕量的Javascript類庫和框架，它們都很小，大部分小於5kb。這樣你不需要因為只需要一個功能就要加載一個JS的框架。
  • ★ PhoneGap :是一款開源的手機應用開發平台，它僅僅只用HTML和JavaScript語言就可以製作出能在多個移動設備上運行的應用。 Sources.
  • ★ Sencha Touch Sencha Touch 是一個支持多種智能手機平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理，全部基於最新的HTML5和CSS3的 WEB標準，全面兼容Android和Apple iOS設備。
  • JQtouch, 是一個jQuery 的插件，主要用於手機上的Webkit 瀏覽器上實現一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的JavaScript 庫。 Sources.
  • DHTMLX Touch 針對移動和觸摸設備的JavaScript 框架。DHTMLX Touch基於HTML5，創建移動web應用。它不只是一組UI 小工具，而是一個完整的框架，可以針對移動和觸摸設備創建跨平台的web應用。它兼容主流的web瀏覽器，用DHTMLX Touch創建的應用，可以在iPad、iPhone、Android智能手機等上面運行流暢。

jQuery 插件

  • Waypoints 是一個jQuery 用來實現捕獲各種滾動事件的插件，例如實現無翻頁的內容瀏覽，或者固定某個元素不讓滾動等等。支持主流瀏覽器版本。
  • Lazy loader 插件可以實現圖片的延遲加載，當網頁比較長的時候，會先只加載用戶視窗內的圖片，視窗外的圖片會等到你拖動滾動條至後面才加載，這樣有效的避免了因圖片過多而加載慢的弊端。
  • TweenJS : 一個簡單和強大的 tweening / animation 的Javascript庫。
  • Easings 類Css3的jQuery 動畫插件
  • Spritely 這個插件可以創建出如flash一樣的動畫效果，比如：在頁面上有一隻飛動的小鳥，一個動態滾動的背景等。
  • File Upload, jQuery 文件上傳插件4.4.1
  • Slideshow/Carousel 插件. Sources.
  • Supersized – 全屏式的背景/幻燈片插件
  • Masonry i一款非常酷的自動排版插件，這款jQuery工具可以根據網格來自動排列水平和垂直元素，超越原來的css. Sources.
  • jQuery 簡單 Layout 演示，管理各種邊欄式，可改變大小式的佈局。
  • Flexigrid – jQuery 數據表插件
  • Isotope絕對是一個令人難以置信的jQuery插件，你可以用它來創建動態和智能佈局。你可以隱藏和顯示與過濾項目，重新排序和整理甚至更多。
  • Super Gestures jQuery 插件可以實現鼠標手勢的功能。
  • MouseWheel 是由Brandon Aaron開發的jQuery插件，用於添加跨瀏覽器的鼠標滾輪支持。
  • AutoSuggest jQuery 插件可以讓你添加一些自動完成的功能。
  • qTip 一個漂亮的jQuery 的工具提示插件，這個插件功能相當強大。
  • jQuery Charts and graphic 用來製作圖表。
  • jQuery Tools– The missing UI library

其它 jQuery 資源

HTML5 視頻播放器

  • ★ Popcorn.js 是一個HTML5 Video框架，它提供了易於使用的API來同步交互式內容，讓操作HTML5 Video元素的屬性，方法和事件變得簡單易用。 (來自Mozilla)
  • LeanBack Player HTML5視頻播放器,沒有依賴任何JavaScript框架。支持全屏播放，音量控制，在同一個頁面中播放多個視頻。 (來自Google)
  • Vid.ly 為你上傳的視頻提供轉換功能，並且為轉換後的視頻創建一個短網址。通過Vid.ly，讓你的視頻可以在14種不同的瀏覽器和設備上播放，不需要再去考慮將要瀏覽視頻的人使用什麼設備了，以避免各各軟件巨頭之間的利益之爭帶來了不兼容，給用戶帶來了巨大的困擾，短網址讓你可以通過Twitter、Facebook等方式方便分享視頻。Vid.ly還可以通過html代碼嵌入到其他網頁中。Vid.ly免費帳戶空間為1GB，免費帳戶也沒有播放或瀏覽限制。

JavaScript 音頻處理與可視化效果

  • ★ 使用HTML5 和 Flash, SoundManager V2 只用單一API的提供了可靠，簡單和強大的跨平台的音頻處理。
  • DSP, JavaScript的聲音Digital Signal Processing
  • The Radiolab Hyper Audio Player v1, 帶給你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
  • jPlayer, 一個 jQuery HTML5 音頻/ 視頻庫，功能齊全的API

JavaScript 圖形 和 3D

  • ★ Processing.js是一個開放的編程語言，在不使用Flash或Java小程序的前提下, 可以實現程序圖像、動畫和互動的應用。其使用Web標準，無需任何插件。
  • ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 開發，一個輕量級的 3D 引擎，不需要瞭解細節，傻瓜都能使用。這個引擎可以使用<canvas>, <svg> 和 WebGL.
  • Shader Toy, 一款使用WebGL的在線著色器編輯器(2D/3D). 基於在線的應用架構使您無需下載任何軟件即可開始體驗. Shader Toy包含大量實用著色器, 諸如光線追蹤, 場景距離渲染, 球體, 隧道, 變形, 後期處理特效等.
  • PhiloGL, Sencha的PhiloGL是首個WebGL開發工具之一，提供了高水準的功能，來構建WebGL應用。Sencha創建了幾個演示，來描述框架交互式3D虛擬化的能力，比如3D view of global temperature changes。
  • WebGL Inspector 你就Firebug等Web調試工具一樣，這個是 WebGL的調試工具。
  • WebGL frameworks 由 Khronos Group 收集的一個WebGL框架列表。
  • EaselJS, 一個使用html5的canvas的 JavaScript 庫. Sources.
  • JavaScript Game Frameworks 免費的JS遊戲框架列表。另，可參看 JS遊戲框架列表。
  • Raphaël是一個小型的JavaScript 庫，用來簡化在頁面上顯示向量圖的工作。你可以用它在頁面上繪製各種圖表、並進行圖片的剪切、旋轉等操作。參看Javascript向量圖Lib–Raphaël
  • jQuery SVG 插件讓你可以了 SVG canvas 進行交互。
  • Google chart tools –  參看本站的使用Google API做統計圖
  • Arbor.js, 是一個利用webworkers和jQuery創建的數據圖形可視化JavaScript框架。它為圖形組織和屏幕刷新處理提供了一個高效、力導向佈局算法。

JavaScript 瀏覽器接口 (HTML5)

  • ★ Modernizr – 是一個專為HTML5 和CSS3 開發的功能檢測類庫，可以根據瀏覽器對HTML5 和CSS3 的支持程度提供更加便捷的前端優化方案.Sources. 一個有用的列表 cross-browser Polyfills
  • HTML5Shiv : 該項目的目的是為了讓IE 能識別HTML5 的元素。
  • Polyfills : 這個項目收集了一些代碼片段其用Javascript支持不同的瀏覽器的特別功能，有些代碼需要Flash。
  • YepNopeJS : 一個異步的條件式的加載器。Sources.
  • jQuery CSS3 Finalise : 是否厭倦了為每一個瀏覽器的CSS3屬性加前綴？
  • ★ Amplify.js :一套用於web應用數據管理和應用程序通訊的 jQuery 組件庫。提供簡單易用的API接口。Amplify的目標是通過為各種數據源提供一個統一的程序接口簡化各種格式數據的數據處理。Amplify的存儲組件使用localStorage 和 sessionStorage標準處理客戶端的存儲信息，對一些老的瀏覽器支持可能有問題。Amplify’為jQuery的ajax方法request增加了一些額外的特性。 Sources.
  • History.js 優美地支持了HTML5 History/State APIs
  • Socket.IO Web的socket編程。

JavaScript 工具

  • ★  {{mustaches}} 小型的 JavaScript 模板引擎。
  • json:select(), CSS式的JSON選擇器
  • HeadJS, 異步JavaScript裝載。其最大特點就是不僅可以按順序執行還可以並發裝載載js。
  • JsDoc Toolkit是一款輔助工具，你只需要根據約定在JavaScript 代碼中添加相應的註釋，它就可以根據這些註釋來自動生成API文檔。
  • Responsive image, 一個試驗性的項目，用來處理responsive layouts 式的圖片。
  • UglifyJS是基於NodeJS的Javascript語法解析/壓縮/格式化工具，它支持任何CommonJS模塊系統的Javascript平台。
  • Dhteumeuleu, 交互式的 DOM 腳本和DHTML 的開源演示。
  • Backbone是一個前端 JS 代碼 MVC 框架，被著名的 37signals 用來構建他們的移動客戶端。它不可取代 Jquery，不可取代現有的Template 庫。而是和這些結合起來構建複雜的 web 前端交互應用。如果項目涉及大量的 javascript 代碼，實現很多複雜的前端交互功能，首先你會想到把數據和展示分離。使用 Jquery 的 selector 和 callback 可以輕鬆做到這點。但是對於富客戶端的WEB應用大量代碼的結構化組織非常必要。Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客戶端和模擬器

CSS3 和 字庫

Website (FULL) 模板

  • ★ HTML5 Boilerplate 是一個HTML5 / CSS / js模板，是實現跨瀏覽器正常化、性能優化，穩定的可選功能如跨域Ajax和Flash的最佳實踐。 項目的開發商稱之為技巧集合，目的是滿足您開發一個跨瀏覽器，並且面向未來的網站的需求。 Sources.
  • HTML5 starter pack 是一個乾淨的和有組織的目錄結構，其可適合很多項目，還有一些很常用的文件，以及簡單的Photoshop設計模板。
  • ★ Initializr 是一個HTML5 模板生成器，其可以幫你在15秒內創建一個HTML5的項目。
  • Animated Portfolio Gallery （教程）
  • Slick MobileApp Website 如果通過 jQuery 和 CSS 製作一個手機應用的網站。
  • RSS Reader 如果通過 jQuery Mobile 創建一個RSS Reader
  • ★ Single Page Applications 使用jQuery的朋友們 (Backbone, Underscore, …)創建單一頁面。
  • Google TV Optimized Templates, 傳統電視已經開始和網路融合，但現階段產業仍然正在摸索之中，為此將來的網頁亦會有結構上的改變。Google TV Optimized Templates是一個用HTML/JavaScript製成的開源軟體，一如其名是一個對Google TV作出了最佳化的的網頁範本，其特色是以遙控器作為操作的前提，令使用者無需輸入任何文字就可以進行控制。未來除了會有專用遙控器外，還會採用智能手機透過W-iFi控制Google TV的方法。Optimized Templates的界面中左方會展示分類，右方會顯示該分類下的影片截圖，影片播放、切換、全畫面表示都可透過鍵盤上的方向鍵、Backspace或Enter等鍵完成，方便今後的網站開發人員借鏡。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。

（全文完）