目前位置
[轉]網頁前端技術
作者:huan-lin    發佈於:    文字:【】【】【
摘要:最近,「前端工程」這名詞越來越常聽到了,這還真叫我這個一直停留在初學階段的門外漢有點焦慮。這就來整理一下自己可能需要做的功課,包括 Bootstrap、MV* 框架、好用的 JavaScript 函式庫、免費的 icon fonts、HTML、CSS 設計工具等等。 更新 2013-09-07:把一些自己覺得好用的網頁開發與設計工具整理進來,包括 JavaScript 函式庫、HTML 與 CSS 產生器等等。 2013-10-13:Durandal、BreezeJS,以及其他細微補充。 2013-10-17:Image Picker、Masonry。

最近,「前端工程」這名詞越來越常聽到了,這還真叫我這個一直停留在初學階段的門外漢有點焦慮。這就來整理一下自己可能需要做的功課,包括 Bootstrap、MV* 框架、好用的 JavaScript 函式庫、免費的 icon fonts、HTML、CSS 設計工具等等。

更新

  •             2013-09-07:把一些自己覺得好用的網頁開發與設計工具整理進來,包括 JavaScript 函式庫、HTML 與 CSS 產生器等等。

  •             2013-10-13:Durandal、BreezeJS,以及其他細微補充。

  •             2013-10-17:Image PickerMasonry

(估計會持續更新)

小引

不用說,以下這些東西是必備的——雖然我根本不太熟:

    另外還有:
  •             Bootstrap - 快速建立美觀、一致的網頁(但也容易跟別人的網站長得很像)。

  • BEM - 一種網頁設計原則,強調持續修改、著重網頁的可維護性。我不知道這些原則能否容易用於 ASP.NET 應用程式開發模型,但出發點是很好的。這裡有簡體中文翻譯

  •             前端 MV* 框架

  •             Polyfill

  •             跨瀏覽器相容性測試

  •             輔助設計工具,如 CSS、icon fonts......等等(下方補述)

    以下分項整理(是自己需要作的功課,不代表都用過了)。

Polyfill

What is a Polyfill? 解釋了何謂 Polyfill 以及為什麼會有這個東西。看了一堆解釋之後,我覺得底下這張圖相當簡單明瞭:

polyfill 的定義
                        Origin: http://www.paulirish.com/i/7570.png

                嗯,polyfill 是一種 shim(墊片;攔截層),提供一些新 API 的實作,以填補老舊瀏覽器不支援的功能。簡單來說,其用途就是讓老舊瀏覽器支援 HTML5/CSS3 相關功能。

                所以啦,為了填補瀏覽器的不足,就會有各式各樣用途的 polyfills。HTML5 Cross Browser Polyfills 為前端開發人員蒐集了很多 shims 和 polyfills,提供了一份無廢話 HTML5 後援指南(no-bullshit guide to HTML5 fallbacks),需要時可從裡面挖寶。

跨瀏覽器相容性測試

先前看到有人建議 IETester,於是拿來用看看,覺得作為一個簡易測試工具還挺方便的,只是擔心仍有不足的地方。如果要檢測網頁跨 IE 版本的相容程度,還是到 modern.ie 看看吧,除了線上掃描你的網頁,還有提供各種虛擬機器可以下載回去實測,支援的作業平台包括 Windows、Mac、和 Linux。參考下圖:


作業平台選擇 Windows 之後,右邊挑選 VM 平台(不只微軟自家的 Hyper-V,還有 VirtualBox 和 VMware)。我選了 Microsoft Server 2012 和 Windows 8 Pro 的 Hiper-V 平台,結果下方列出一拖拉庫的虛擬機器,涵蓋了 IE 6、7、8、9、10、11 等版本。這真是太方便啦!幾個月前還自己建立其中幾種 VM 來測試勒 XD


其他相關知識:"X-UA-Compatible" content="IE=Edge,chrome=1"


Bootstrap

        說到 Bootstrap,一定要去看一下 K. K. Bruce 的佛心力作:Bootstrap 中文教學


        一旦在網站上套用 Bootstrap 之後,接著可能會需要一些輔助的 plugins。30 Amazing Plugins to Extend Twitter Bootstrap 裡面介紹了 30 個插件,似乎挺不錯的。只是我一個都還沒用上.....

前端 MV* 與 SPA 框架

MV* 指的是 MVP、MVVM、MVC 等等,SPA 則是 Single Page Application 的縮寫。
  • KnockoutJS:專作 data binding。

  • AngularJS:由 Google 開發維護,一套豪華的 SPA 框架。它可以用 jQuery,也可以用自家的 jqLite。

  • Durandal:結合其他 JS 函式庫一起合作,成為一套 SPA 框架。有用到的 JS 函式庫包括 KnockoutJS、RequireJS、Sammy 等等。授權條款:MIT

            選擇 MV* 框架時可以參考以下資源:
            此外,BreezeJS 也必須提一下,因為它可以跟其他 MV* 框架一起服用,協助開發 Single Page Applications。

(謎之音:真是網頁前端框架風起雲湧的大亂鬥時代啊!)

其他輔助網頁開發的工具、資源
  • FireBug - 很好用的網頁除錯工具。當然 Chrome 和 IE 內建的除錯功能也很好用啦!都是按 F12 就能開啟。

  • Fiddler - 很好用的 HTTP(S) 訊息傳輸的除錯工具。使用 Chrome 的人可以考慮加裝Postman

  • jsFiddle - 線上練習、展示 JavaScript 的工具。

  • ui.livetools - 線上建立客製化 HTML 表單、按鈕、圖示的工具。

  • Pure CSS - 提供現成可用 CSS 樣式庫,是 YUI Library 的子專案。授權條款:BSD

  • Topcoat - 免費的 CSS 樣式庫,以及圖庫(授權條款:Apache 2.0)。

  • CSS TrashMan - CSS 清潔工,幫你把網頁中多餘的 CSS 去掉。

  • CSS Sprites Generator - 線上建立 CSS Sprite 圖檔。

  • CSS Sprite Generator - 另一個線上建立 CSS Sprite 圖檔的工具,可上傳 zip 檔(以支援很較多、較大的圖片)。

  • Glue - 命令列工具,用來將多個圖檔組合成一個 CSS Sprite 圖檔。

  • Spritecow - 線上讀取你的 CSS Sprite 圖檔,以視覺化方式選取其中的圖片,並顯示該圖片的 CSS,包括偏移位置、寬度與高度等等。方便!

  • famfamfam.com - 免費、可商用的圖庫。其中的 Silk 圖庫包含 1000 個圖示喔。

  • Font Awesome - 免費的 icon font,可搭配 Bootstrap 一起服用,亦可單獨使用。

  • The Elegant Icon Font - 也是免費、可商用的 icon font(採 GPL 2.0 與 MIT 雙重條款)。網路上還可以找到更多更多圖像字型、。如果你不知道 icon font 的用處,這裡有線上展示(重點:容易修改,包括大小、顏色,陰影效果等,還可疊疊樂)。

                        取自 Font Awesome 官網的範例

                        取自 Elegant Icon Font 網站


其他好用好玩 JavaScript 函式庫、plugins
  • Noty - 用來顯示各種訊息,例如:錯誤、警告、確認等。官網有提供線上 demo。jQuery based。授權條款:MIT

  • Alertify.js - 建立美觀的對話框、通知訊息(例如在網頁右下角顯示通知訊息,三秒後自動消失)。授權條款:MIT。這也是我自己常用的 js 函式庫之一。

Alertify.js
Morris.js


還有更多....

除了以上提到的工具,Will 保哥的部落格也介紹了不少好東西,我稍微爬了一下,整理在文後的延伸閱讀清單。

此外,How to keep up to date on front-end technologies 也提供了幾個方法,讓我們搭上前端技術的列車。包括:
  1. 關注狠角色的動向

  2. 尋找最佳學習資源

  3. 參與技術研習會議

  4. 整理你自己的資源 (這篇筆記可以算吧)

瀏覽 (1348) | 評論 (0) | 評分(0) | 支持(0) | 反對(0) | 發佈人:huan-lin
將本文加入收藏夾
Search
美人時計
文章評論
最新評論
更多評論 發表評論
發表評論
您的評價
差(1) 一般(2) 好(3) 很好(4) 非常好(5)
評論標題
評論內容
驗 證 碼
看不清?更換一張
匿名發表 

© 2011 slobgame.net   website templates by styleshout      Powered by Wayhunt WebSite System 1.5