首頁 響應式網頁 響應式網頁還能作到甚麼 ?
以類別搜尋
以關鍵字搜尋
響應式網頁還能作到甚麼 ?

與其說是 響應式網頁能作到甚麼,不如說是 最新的 Web 技術能作到甚麼 !

 

我們都知道目前最新的 Web 技術是基於 HTML5 + CSS3  開發的,用一般文字編輯器就可以開發出一個類似 APP 的介面,其功能之強大,有時候會讓人懷疑未來還需要 APP 幹嘛 !?  當然以目前來說 APP 還是有它的不可取代性。

 

我們舉出一些目前最新 Web 技術可以達到的功能 :

 

 

基本功能


 

 動態配置區塊

 

動態配置區塊 又稱作 流動佈局,指的是網頁的區塊 可以隨著目前 瀏覽器寬度 動態改變位置大小 或者 選擇 隱藏 與 顯示。 動態配置區塊 是響應式網頁能夠同時支援 手機平板 與 電腦瀏覽器 顯示的最主要關鍵。

 

 

 

 

您可以實際操作以下的範例 感受一下 動態配置的威力

 

 

 

 選單自適應

 

響應式網頁的另一大特色絕對就是主選單的動態變化,如果沒這個功能大概不能稱作響應式網頁,通常網頁上的 主選單 都是橫向且會佔據很長的空間,所以瀏覽器縮小的時候 ,響應式網頁必須想辦法處理這個又長但又特別重要的元件,目前大部分的處理方是就是把 橫式 轉成 直式 。

 

 

 

 圖片自適應

 

圖片在響應式網頁中需要作甚麼處理嗎 ? 這裡考量的點主要有兩個

  1. 網路頻寬
    行動裝置所面對的網路頻寬通常不太穩定,而圖片又常常很大,我們不希望圖片佔據太多網路頻寬進而拖慢瀏覽速度 。
  2. 鋸齒邊緣
    行動裝置的螢幕比較小,如果把原本的大圖直接丟到小螢幕瀏覽器上顯示,會出現鋸齒邊緣。

目前對於圖片的處理方式有兩種 

  1. 延遲載入
    當一個圖片出現在瀏覽器可視區時,才動態載入圖片,否則就根本不要載入圖片,減少頻寬。
  1. 即時縮圖
    根據瀏覽器目前的大小 決定要產生一個多大的圖,舉例來說 ,小螢幕裝置的瀏覽器用小圖來回應就可以,既不影響網頁品質也降低頻寬需求。

 

 表格自適應

表格在傳統網頁內容中,是大量的被使用,即使到今天,還是存在於最新式的響應式網頁內容中 ,那麼試想,我們要如何縮小顯示以下表格 :

 

 

大型表格的處理比較棘手,目前並沒有一套標準又完美的處理方式,只能見招拆超,但最常使用的方法就是動態隱藏較不重要的欄位(Column) ,以上述表格範例來說,可以假設重要的欄位是 , 日期開盤價收盤價 與 漲跌價差 , 其他的都是不重要的欄位,所以縮小顯示的方式就會如下 :

 

 

 

響應式表格並沒有一定的處理方式,還是要看內容本身與網站定位來決定。

 

 

進階功能



 主視覺(Banner)特效

在傳統網頁上主視覺的部分都是以 Flash 物件 來呈現,好像沒有 Flash 就不算是一個網站,這幾年 Flash 淡出市場,主視覺的呈現就僅以一張大圖片來呈現了。

 

 

但是以單張大圖來呈現 雖然簡單,卻也單調了一些,因此許多網站發展了很多的補強特效,如 圖片輪播、内崁圖文動畫,而且都是純 HTML5 + CSS3 作出來的,不是 Flash 物件。

 

 

 

圖片輪播

 

 

 

 

內崁圖文特效

 

 

 觸控播號

 

這是針對手機裝置裝置來說,現在只要加一段簡單的語法,就可以讓指定的圖片有快速播號功能,如下:

 

 

但新一代的手機瀏覽器,任何語法都不需要加,瀏覽器只要辨識到是電話號碼的連續數字,自然就會加上觸控撥號功能,如下 :

 

 

 

  開啟指定 APP

 

最新的手機瀏覽器 是可以在網頁中開啟  APP 的,如果沒有安裝該 APP,可以轉到 APP Store 進行下載。

 

 

 手勢觸控

 

手機瀏覽器可以偵測手勢滑動方向,網頁工程師可以取得這些觸控方向來決定 現在要執行的是 圖片輪播、上一頁、下一頁 還是 切換到不同的主題單元,譬如在 Yahoo 首頁作左右滑動時,您可能會看到以下畫面:



 

 互動式 3D 物件


3D 物件的處理在新一代的瀏覽器中已經大幅獲得支持,雖然比起 APP 來說,速度是慢了一點,不過可以確定的是,在不久的未來,就可以在 HTML 網頁中,直接玩複雜的 3D 遊戲了。

 

這邊列出一些目前世界上相當不錯的純網頁 3D 物件,不過請用 Google Chrome  來開啟 :

 

3D RPG 射擊遊戲 3D RPG 射擊遊戲
純 HTML 的 室內 3D 射擊遊戲,但是沒有作得很完整。
圖片自動 轉 3D 圖片自動 轉 3D
透過四面八方拍幾張照片,就可以把整個城市的 3D 物件建出來,沒有拍到的地方還會自動猜測。
3D 賽車 3D 賽車
3D 方塊消去遊戲 3D 方塊消去遊戲
純 HTML 製作的 3D 方塊消去遊戲 。也許您曾經玩過電腦版的。
3D 雲 3D 雲
純 HTML 作出來的擬真 3D 雲,不是真的 3D, 但很逼真,也可以隨滑鼠操控方向。
3D 地球 3D 地球
純 HTML 拚出來 圓形地球,有各個國家,上面還有雲在飄,整個地球還會轉 !
 

 

 

 

 

 


@2016 希塔網路創意有限公司 . 02-2965-0174 . All Rights Reserved.