行動網站開發的基礎知識

2014 年 Chrome 開發人員高峰會中,許多主題和品牌都涵蓋了全新 API 的範圍,但不是所有新奇有趣的內容。

如果您是新手網頁開發人員,或甚至是有經驗的開發人員要開始探索新的 API,那麼您可能會按照以下三個步驟操作:學習、建構及疊代。

Matt Gaunt 說明如何從 Chrome 開發人員平台團隊持續努力解決這些問題。

學習

HTML5Rocks 上的 WebFundamental

網頁基礎知識是一系列用途說明文件,涵蓋多個主題。這個核心目標是讓開發人員無論對症還是完全不瞭解,都能盡快採用最佳做法。

網頁基礎知識的其中一個主要目標,是確保如果你對某個主題不太熟悉,指南會盡可能減少「選擇癱瘓」。Addy Osmani糕點盒中完美裝上了這首歌。

如果您發現網站或網站內容有任何問題,或是希望網頁基礎知識涵蓋特定主題,請透過 GitHub 提交意見回饋

建構

支援各種裝置的 Web Starter 套件

我們打造了 Web Starter Kit 檔案,協助您開始使用新的網路專案。它具備您需要的所有功能:

  • 穩固的建構程序
  • 樣板 HTML
  • 風格指南

建構程序

如果您是剛建構程序的新手,最簡單的做法是將建構程序視為一種程式,這個程式會擷取一組檔案,然後對這些檔案執行特定工作,然後在不同位置輸出新版本。這些工作會將檔案最佳化以縮短載入時間、檢查可能出現的錯誤或處理可自動執行的工作。

Web Starter Kit 包含下列程序:

「Web Starter Kits 建立程序」的圖表

我們會壓縮及串連 CSS 和 JavaScript,讓瀏覽器快速擷取檔案,而 JavaScript 也會透過 JSHint 執行,檢查 JavaScript 最佳做法和常見程式設計錯誤。圖片會以圖片最小值壓縮,而您可以利用這個函式,縮減檔案大小大幅。我們也制定了建立樣式指南 CSS 的程序

適用於多裝置 HTML 的樣板

為新網頁編寫第一組 HTML 是相當嚴格的標準,因此您會快速取得適合各種裝置和螢幕大小的現成 HTML 檔案。

在 Web Starter Kit 中,我們想讓任何功能模糊處理平台與網站之間的線條,因此我們新增了 Android、Windows Phone、iOS 和 Opera Coast 的新增至主畫面和啟動畫面支援功能。

範例:將 Web Starter Kit 新增至主畫面。

風格指南

Chromebook Pixel 的網路入門套件樣式指南。

網頁入門套件的最後一部分是樣式指南

如此一來,任何新專案都能提供一組很棒的預設樣式和元件,鼓勵您進行樣式導向的開發。您可以修改現有元素的樣式 並新增自己的樣式

在下一個版本的 WSK 中,為明年初推出的版本,我們正努力簡化樣式指南的搭配方式,並切換至質感設計的外觀和風格。Matt早期模擬中展示了 Chrome 開發人員高峰會的可能呈現方式,您可參考以下範例。

網頁入門套件的 Material Design 風格指南模擬圖。

疊代

開始將新知識付諸實踐後,建議您使用開發人員工具來偵錯、改善及維護工作。

我們在開發人員工具中加入了一些新功能,而 Matt 則介紹以下新功能。

裝置模式

裝置模式是開發人員工具中的新部分,可讓您快速查看網站在不同行動裝置上的運作方式,同時在 CSS 中查看媒體查詢。

Chrome 開發人員工具的裝置模式功能螢幕截圖。

「裝置模式」的其中一項強大功能就是限制網路速度,以便模擬使用者在 GPRS、EDGE、3G、DSL 或 Wi-Fi 連線上的使用體驗。

Chrome 開發人員工具中的網路節流螢幕截圖。

繪製分析器

如果您曾開啟時間軸分頁並按下記錄按鈕,可能會發現瀑布發生了一些繪製事件。通常這個區域會顯示黑色方塊,您無法得知瀏覽器執行的原因或用途。

繪製分析器不會進一步指出瀏覽器在繪圖期間的確切行為。

Chrome 開發人員工具中的 Paint 分析器螢幕截圖。

撤銷追蹤

現在 開發人員工具會提供繪製或版面配置的可能原因,方便所有人瞭解時間軸、瀏覽器行為,並讓您最佳化程式碼,避免發生效能問題。

Chrome 開發人員工具中的無效追蹤螢幕截圖。

火焰圖檢視

這是查看時間軸中可用資訊的方法截然不同。這樣就能更輕鬆地查看工作重疊的情況,以及因其他任務產生的瀏覽器行為。

Chrome 開發人員工具中的「Flame 圖表檢視」螢幕截圖。

影格檢視器

在「Flame Chart」檢視中,您可以選取特定頁框。您可以在此探索頁面中有哪些元素已升級為複合圖層,以及這些元素宣傳的原因。

Chrome 開發人員工具中的影格檢視器螢幕截圖

學習、建置、疊代

這些是 Chrome 團隊致力於協助開發人員加快網頁開發速度的措施,因此請務必參閱網頁基礎知識網頁入門套件以及 Chrome 開發人員工具的新功能。