軟體開發

行動網站學習筆記 (3)

教學目標

初步了解如何打造流暢的行動使用者體驗,此篇主要為學習筆記。(註: 2017/7/2 已通過行動網站認證。)

重點概念

首先瞭解使用者體驗和設計原則,一般來說行動使用者通常需要同時處理其它工作、在外出時使用行動裝置、必須在短時間內完成工作,同時使用螢幕較小,因此行動網站的設計須考量到許多特殊的需求。此外為了確保我們網站能夠出現在搜尋結果中,主要有三種行動網站實作方式:

設定 網址保持不變嗎? HTML 保持不變嗎?
回應式網頁設計
動態服務
獨立網址

所謂回應式網頁設計主要是讓網頁不受使用者的裝置影響,將會以同樣的網址提供相同的 HTML 程式碼之外,卻又能根據螢幕大小,以不同的方式轉譯(回應)顯示內容,此實作方式是 Google 建議採用。動態服務主要是使用網址不會因為因為使用者裝置而有所改變,但是會根據伺服器對於使用者的瀏覽器不同提供不同版本的 HTML 程式碼。獨立網址主要是指以獨立網址的方式為每台裝置提供不同的 HTML 程式碼,這種設定會嘗試偵測使用者裝置,然後利用 HTTP 將使用者重新導向至適當的網頁。Google 搜尋沒有偏好特定的實作方式,主要會透過 Googlebot 存取網頁發現可以編入 Google 搜尋中的全新或更新網頁,藉由電腦程式決定要搜尋的網站、檢索頻率,以及要從每個網站中抓取多少網頁。此外我們可以透過 Google 所推出的立即測試網站工具即可瞭解我們的網站是否適合行動裝置瀏覽,並且找出待改善的問題。

接著行動網站設計的最佳做法主要有五大類,分別為:

  1. 首頁及網站瀏覽。
  2. 站內搜尋。
  3. 商務和轉換。
  4. 表單輸入。
  5. 可用性和外觀設計。

首頁及網站瀏覽的原則主要為:

  1. 把重要的內容擺放在最明顯的地方。
  2. 選單內容應該要簡短有力。
  3. 讓使用者輕鬆返回首頁。
  4. 別讓廣告內容喧賓奪主。

站內搜尋的原則主要為:

  1. 將站內搜尋功能放在明顯的位置上。
  2. 確保站內搜尋找出最相關的項目。
  3. 運用篩選器提高站內搜尋的使用量。
  4. 協助使用者取得更好的站內搜尋結果。

商務和轉換的原則主要為:

  1. 在使用者下決定前提供更多探索的機會。
  2. 讓使用者以訪客的身份進行購物。
  3. 利用現有資訊盡量提高便利性。
  4. 提供明顯的通話按鈕處理使用者複雜的工作。
  5. 方便使用者透過其它行動裝置完成交易程序。

表單輸入的原則主要為:

  1. 資訊輸入力求精簡。
  2. 為所有的任務提供最簡易的輸入方式。
  3. 當使用者選取日期時提供視物化日曆。
  4. 善用標籤和即時驗證功能以減少表單錯誤。
  5. 設計有效率的表單。

可用性和外觀設計的原則主要為:

  1. 為行動裝置最佳化整個網站。
  2. 別強迫使用者透過雙指縮放畫面。
  3. 製作可展開式的產品圖片。
  4. 讓使用者知道哪一種螢幕方向效果最佳。
  5. 將使用者留在單一瀏覽器視窗中。
  6. 避免使用「完整版網站」的標籤。
  7. 清楚交代行動網站為何需要知道使用者的位置。

再來對於提供網站內容或設計的體驗人員而言,測試是最好的方式,行銷人員可以透過網頁上操作的實驗數據進行調整之後提高轉換率,內容供應商可測試不同網站的版面配置是如何影響黏著性,社群媒體管理員則可以嘗試各種分享策略,以及開發和設計人員可以測試新版的網站設計。但是要如何有效進行成效測試,主要我們會過 Google Analytics 工具分析資料之後改善使用者體驗以及評估效益。最常見的測試方式為 A/B 版本測試,主要是一種隨機進行的實驗,主要利用同一個網頁的兩種或多種版本進行測試,其中 A 是原版網頁,B 則是從原版網頁進行修正的頁面。透過系統我們會同時發佈不同版本,因此在不受其它外部因素的影響之下,觀察及評估不同版本的成效。

最後若透過 Google Analytics 分析工具,我們就能夠在同一個地方分析不同面向的資料,此時我們可以透過下述六個建議評估,更進一步評估與改善現有客戶體驗,分別為:

  1. 從到達網頁著手,提升使用者體驗。
  2. 查看裝置使用情形。
  3. 瞭解不同瀏覽器或燭幕解析度是否會影響使用者體驗。
  4. 評估站內搜尋使用情況。
  5. 分析購物行為找出網站體驗中的不足之處。
  6. 分析結帳行為。

總結針對打造流暢的行動使用者體驗我們主要透過使用者體驗原則、首頁及網站瀏覽和測試及評估成效,以利持續改善行動網站的使用者體驗。

相關資源

行動網站學習筆記 (2)

教學目標

初步了解如何提升行動版網站載入速度,此篇主要為學習筆記。(註: 2017/7/2 已通過行動網站認證。)

重點概念

首先若我們想要行動網站提升效能,請先將使用者下載的資料量降至最低,第一可以先從資料最佳化開始,第二要提高程式碼效率,必須先了解如何轉譯相關資源,第三當效能提升之後,則必須要有測試的方式。 我們透過 Chrome 的開發者工具進行使用者操作體驗的模擬設定,例如: 勾選「Disable Cache」功能,以及模擬「Regular 3G」的網路速度。然而當我們發現載入畫面過久之後,則要分析請求,找出頁面載入過久的原因,基本上有兩種方式,第一是找出阻擋轉譯的程式碼,改善方式可以將程式碼移至 最下方,並且標記 async 以避免程式碼阻擋頁面載入,第二是找出大量的請求,改善方式可以將圖示改為 SVG 以降低檔案大小。接著我們會針對更新的頁面驗證修正的成果。

接著瞭解行動網站在連線不穩定或速度緩慢的情況下,要如何透過工具以高延遲時間和低頻寬和模擬網路限速進行調整。相關工具主要有瀏覽器工具、系統工具和裝置模擬,當然也可以透過線上工具 WebPagetest 以不同地點和網路進行測試。此外連線不穩定的情形,有個專有名詞為「lie-fi」是指瀏覽器的反應好像是有連到網路,但是其實沒有,且原因也不明。此時會以為連線造成相當差的使用者體驗,為了解決該問題我們會以逾時方式處理間斷性的網路連線。

再來透過關鍵指標可以判定行動網站是否達到高標,主要有三大關鍵指標,分別為:

  1. 可用時間: 主要為客戶希望能夠盡快看到不需捲動的內容。
  2. 頁面大小: 主要為建立畫面所需要的所有資源大小,建議不超過 1 MB。
  3. 要求總數: 主要為建立畫面必要的資源要求總數,數量應在 80 至 100 之間。
主要元素 要求範圍目標
JavaScript <20
CSS <5
圖片 <30
字型 <3
總計 80~100

最佳化關鍵轉譯路徑是指優先顯示與目前使用者操作相關的內容。從一開始收到 HTML 、 CSS 和 JavaScript 位元組,再對程式碼進行必要的處理,至最後轉變為顯示像素的過程,我們需要了解過程中所有的步驟活動進行效能最佳化,也就是所謂關鍵轉譯路徑。若我們將關鍵轉譯路徑最佳化,可大富縮短初次轉譯網頁的時間,以及以理想情況每秒 60 FPS 進行互動更新操作。轉譯網頁過程中瀏覽器需要先建立 DOM 和 CSSOM 樹狀結構,因此我們必須儘快將 HTML 與 CSS 提供給瀏覽器,處理 HTML 和 CSS 標記主要皆有四個步驟。

  1. 轉換: 瀏覽器從網路中讀取 HTML/CSS 原始位元組,然後根據指定的檔案編碼格式,像是 UTF-8,將其轉換為相應字元。
  2. 標記: 瀏覽器將字串轉換為 HTML/CSS 標準的標記,每個標記附具有特殊的含義和專屬的規則。
  3. 語法分析: 識別出標記轉換為定義所相關屬性的物件。
  4. 建立文件/樣式表物件模型: 因為 HTML/CSS 標記定義不同標記之間的關係,建立的物件會在樹狀資料結構中連結起來,並且透過樹狀資料結構定義標記之間上下層級的關係。

當我們產生文件物件模型 (DOM) 和樣式表物件模型 (CSS) 之後,將會進行結合轉譯為樹狀結構,主要應用於計算每個呈現元素的版面配置,至於如何將描述內容和描述樣式兩個互相獨立物件結合之後呈現像素,接著進行版面配置。此外當我們需要解決關鍵轉譯路徑效能方面的瓶頸時,則可以最佳化關鍵轉譯路徑,重點在於儘快完成初次轉譯,常見步驟主要為:

  1. 分析及描述關鍵路徑: 將關鍵資源數量、關鍵位元組數和關鍵路徑長度降至最低。
  2. 儘可能減少關鍵資源數量: 刪除資源、延遲下載、標記為非同步資源。
  3. 儘可能減少關鍵位元組數: 縮短下載時間,往返次數。
  4. 最佳化剩餘關鍵資源的載入順序: 儘早下載所有關鍵資源,以縮短關鍵路徑長度。

最後要如何最佳化內容效率,主要有五種類型:

  1. 刪除不必要的下載
  2. 將編碼與傳輸大小最佳化
  3. 圖片最佳化
  4. 網站字型最佳化
  5. HTTP 快取

第一刪除不必要的下載重點在於清點網頁上所有自有和第三方資產,評估每個資產的成效,並且判斷資源是否提供了足夠的價值。第二將編碼與傳輸大小最佳化,主要是將整體下載大小縮減至最小,可以透過最佳化和壓縮多餘或不必要的資料來達成此目標,此外最佳方式是直接刪除資料,但是我們不能隨意刪除資料,所以在某些情況之下,我們需要清楚掌握資料格式及相關屬性的內容專屬資訊,這時刪除資料經常會有顯著縮緘負載的大小,且不影響實際的意義。第三圖片最佳化,主要重點在於優先選用向量格式、縮減及壓縮 SVG 資源、選擇最佳的圖片格式、實驗找出最適合圖片的品質設定、移除不必要的圖片中繼資料以及提供縮小的圖片。第四網站字型最佳化,主要重點在於查核和覽控字型使用的情況、針對字型資源進行部分擷取、為每個瀏覽器提供最佳化的字型格式、指定重新驗證和最佳快取政策以及使用 Font Loading API 最佳化關鍵轉譯路徑。第五 HTTP 快取,主要重點在於使用一致的網址、確認伺服器提供驗證標記、確認中繼快取可以快取哪些資源、確定每項資源的最佳快取效期、確定網站的最佳快取階層以及盡量減少變動。

總結針對提升行動版網站載入速度我們主要針對關鍵路徑和最佳化內容效率進行優化,以利達到效能的目標。

相關資源

行動網站學習筆記 (1)

教學目標

初步了解行動版網站與其重要性,此篇主要為學習筆記。(註: 2017/7/2 已通過行動網站認證。)

重點概念

目前使用者對於行動裝置的依賴度越來越高,因此建立適合行動裝置瀏覽的網站已經成為掌握商機的關鍵,我們稱之為行動網站,所謂行動網站是指具備網際網路功能和可為行動裝置提供特定網際網路功能的資源。

首先為什麼使用者會喜歡使用行動網站,主要有三大特點:

  1. 容易搜尋: 行動網站透過搜尋方式可見度較高。
  2. 容易使用: 使用者比較熟悉行動網站的運作方式。
  3. 精簡輕巧: 不需要安裝,可以節省行動裝置記憶體。

接著至於行動網站可以為企業帶來好處,主要有三大特點:

  1. 適用於各種作業平台和靈活度高: 行動網站可以在不同平台上顯示,建立回應式網站,同時服務行動裝置和平板電腦的使用者。
  2. 縮短開發時程和開發成本低: 使用者不需要在裝置上進行更新或安裝,同時行動網站僅採用單一網頁語言 (HTML5) 建立而成,所以建立成本低。
  3. 網路為公共資源和容易追蹤: 不需要取得任何核准和加入市集即可建立行動網站,同時可以透過分析追蹤功能導入客戶的行動網站,不需要安裝開發套件 (SDK)。

若是網頁載入速度緩慢則會導致跳出率增加,此時將會讓使用者體驗不佳,簡單來說只要網頁載入時間下降,則每秒轉換率就會增加,接著收益就會隨之提高。更進一步來說就是使用者體驗非常重要,第一只要善用客戶現有的網站流量,就能夠達到最佳化的使用者體驗和轉換率目標,符合成本效益。第二只有轉換率增加一倍,就等於是將單次客戶開發成本減半。第三隨著企業獲利的增加就代表有更多資金可以用來開發全新使用者,使得行銷活動更加全面。第四只要分析特定網頁或網站的銷售流程進行小小的改變,就能帶來超乎預期的成效。

再來只要減少使用者停留在空白畫面的時間,就能增加與客戶網站互動的機會,更進一步提高每位使用者/單次瀏覽所帶來的價值。為了解決上述問題行動網站效能逐漸成為加速行動版網頁 (Accelerated Mobile Pages, AMP) 和漸進式網頁應用程式 (Progressive Web Apps, PWA),主要重點為開發人員在設計網站時就應該進行載入時間的考量。根據 Google 意見調查將發現第一使用行動裝置上網時有 46% 近半數受訪者表示網頁載入速度太慢是最令人頭痛的情況,第二有 60% 的行動裝置使用者預期行動網站在 3 秒內載入完畢,第三若是行動網站的載入時間超過 5 秒,則 75% 的使用者就會放棄瀏覽。

最後針對網站的知名度進行搜索最佳化,主要是利用網站結構與 robot.txt 檔案,改善搜尋引幗最佳化的成效。以及提升網站在於社群網路的曝光程度,主要是在每個網頁中加上幾行就能夠讓使用者預覽詳細的資訊,更進一步為網站吸引更多的使用者。

相關資源

Spring 上課筆記 (3)

基本介紹

教學目標

初步了解 MVC 的基本概念。

重點概念

一般來說應用程式控制器主要會執行五個步驟,分別為取得資料、轉換資料、驗證資料、觸發商業邏輯和選擇下一個檢視方式。然而撰寫應用程式控制器的方式耦合很高且非常繁雜,因此 Spring MVC 則是以 Command Design Pattern 的方式實作前端控制器與應用程式控制器進行互動,讓控制器更具低耦合的特性,我們只需要透過設定檔的簡化方式就能夠進行視圖和模型的關聯。

所謂 MVC 是 T.Reenskaug 在 1979 年應用於 GUI 架構的管理,全名為 Model-View-Controller,首先視圖會發請求給控制器,接著控制器會更新模型的狀態,再來模型會通知視圖相關更新,此時視圖會從模型中讀取狀態,最後控制器會針對視圖進行控制,其中 MVC 最重要在於模型要能夠通知視圖狀態已更新。

但是 Web 應用程式主要是基於 HTTP 的請求/回應模型,因此模型無法主動更新視圖,也因此才有適用於 Web 應用程式的 MVC Model 2 又稱 Web MVC,最早概念源自於 1998 年 JSP 的規格書中第一個模型描述一個請求傳送給 JSP 檔案,第二個模型描述一個請求傳送給 Servlet,接著在 1999 年 Govind Seshadri 在 JavaWorld 發表了「Understanding JavaServer Pages Model 2 architecture」的文章確認 Model 2 為針對 Web 應用程式的 MVC 架構。

最後 Spring MVC 則是實作前端控制器,主要透過 web.xml 定義 DispatcherServlet,首先接收 HTTP 請求,接著將請求傳給應用程式控制器處理請求,再來更新模型,同時控制視圖,此時視圖會讀取狀態,並且進行 HTTP 的回應操作。

相關資源

Spring 上課筆記 (2)

基本介紹

教學目標

初步了解 J2EE 的基本實作。

重點概念

J2EE 應用程式主要可分為五個階層,分別為客戶端層、呈現層、商業邏輯層、資料存取存和資料層,其中客戶端層主要由瀏覽器、應用程式所組成,伺服器主要由呈現層、商業邏輯層和資料存取層所組成,呈現層中的容器稱之為 Web Container 主要包括 JSP 和 Servlet,商業邏輯層中的容器稱之為 EJB Container 主要包括各種不同功能用途的 Enterprise Java Bean ,資料存取層則以 JDBC 和不同的 Connactor 為主,至於資料層則以關聯式資料庫和傳統應用程式為主,又稱為企業資訊系統。
J2EE Application Layers 圖片來源:https://docs.oracle.com/cd/E19644-01/817-5448/images/comp-J2EE-env.gif
接著我們只要安裝 Netbeans 開發工具就能透過精靈建立符合上述架構的 J2EE 應用程式。首先我們開啟 Netbeans 開發工具新增空白 J2EE 專案,選擇「New Project」→「Java Web」→「Web Appication」,接著在 Project Name 輸入「eBiz」,按下「Next」,選擇預設值再按下「Next」,先不選擇任何 Framework 按下「Finish」建立專案。

接著我們需要建立資料存取層的 Entity 對應資料層中的關聯式資料庫,先在「eBiz」專案上按右鍵選擇「New」→「Other」,接著點選「Persistence」,再選擇「Entity Classes from Database」,按下「Next」,選擇 Data Source 為 jdbc/sample,按下「Add All」,按下「Next」,接著在 Package 輸入「com.company.ebiz.model.entity」,按下「Next」鈕,接著按下「Finish」鈕。

再來我們需要建立商業邏輯層的 Session Beans 針對 Entity 進行 CRUD 新增、讀取、更新和刪除的基本操作,先在「eBiz」專案上按右鍵選擇「New」→「Other」,接著點選「Persistence」,再選擇「Session Beans for Entity Classes」,按下「Next」,按下「Add All」,按下「Next」,接著按下「Finish」鈕。

最後我們需要建立呈現層的 JSP/Servlet 透過 Session Beans 讀取資料層中的資料內容,先在「eBiz」專案上按右鍵選擇「New」→「Other」,接著點選「Web」,再選擇「Sevelet」,按下「Next」,接著在 Class Name 輸入「CustomerController」 和在 Package 輸入「com.company.ebiz.controller」,按下「Next」鈕,在 Servlet Name 中入「CustomerController」,和在「URL Pattern」輸入「/allCustomers」,接著按下「Finish」鈕。

接著在 CustomerController.java 輸入下述程式碼。

1
2
3
4
5
6
7
8
9
10
import com.company.ebiz.model.entity.*;
...
@Inject
private CustomerFacade cf;

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Customer> custs = cf.findAll();
request.setAttribute("custs", custs);
request.getRequestDispatcher("allCustomers.jsp").forward(request, response);
}

接著在 Web Pages按右鍵選擇「New」,選擇「JSP」,接著在 File Name 輸入「allCustomers.jsp」,接著按下「Finish」鈕,接著下來輸入以下程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table>
<c:forEach var="c" items="${custs}">
<tr>
<td>${c.name}</td>
<td>${c.city}</td>
</tr>
</c:forEach>
</table>
</body>
</html>

當上述步驟完成之後,我們只需在 eBiz 專案按右鍵選擇「Clean & Build」編譯專案,接著在「CustomerController」檔案上按右鍵選擇「Run File」,按下「OK」,就能夠看到資料庫的結果直接呈現至客戶端層網站上。

相關資源