本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ HTML5 ” tag:

行動版網頁不就是把網頁縮小而已嗎?

這篇不講 coding 技巧,不講用 SASS 要怎麼寫,不講 Bootstrap 要怎麼用,不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。

本簡報適合瀏覽對象:
- 覺得行動版網頁只是把網頁縮小而已,沒什麼的人
- 為了學 RWD 還花錢跑去上課的人
- 不知道設計行動版網站有什麼眉角的初學者
- 被指派做行動版網站,不知從何開始的菜鳥美工

本文摘要:
RWD(Responsive Web Design)技術概論與行動網頁設計注意事項

  • 基本心法1 – 流動布局
  • 內的設定
  • 判斷使用者
  • 基本心法2 –Media Query
  • Media Query & Media Type
  • Media Query - device-pixel-ratio
  • 掌握解析度-慎選 Breakpoint
  • Table 如何 RWD
  • 選單如何 RWD
  • 行動裝置上的網頁動畫
  • 圖片也要RWD
  • 圖示也要RWD
  • 嵌入多媒體也要 RWD
  • 設定Flash替代內容
  • 表單準備好了嗎?
  • 按鈕準備好了嗎?
  • 網頁原本用的Plugins準備好了嗎?
  • 文書人員上資料時要小心
  • 測試工具

以現實來說,
企業主真的有在乎他的客戶會用手機來看他們的網站嗎?

設計理念什麼的都是 bullshit,
只願意花30元吃滷肉飯的客人,還要講求健康純天然、服務品質、賓至如歸?

以大局來說,
東西有多難做什麼的沒人會care,就一句話,做不做得出來?


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


在 Windows 建立各種瀏覽器測試環境

從前從前,人們習慣將軟體、工具、檔案都放在自己的電腦,姑且稱為單機作業時代。後來由於時代進展,一個人有公務電腦、私人電腦、手機、平板......如果必須在這些裝置處理同一件事,那同一個軟體得購買好幾次嗎? 同一個檔案得放在這麼多地方嗎? 還有軟體非得綁那個笨重又難看的硬體,可以在自己的平板或 mac 上運行嗎?

於是有廠商開始發行所謂的雲端版工具程式,雲端版工具通常有兩大特色,第一是跨平台,不用擔心使用的裝置是 Mac, Win8 PC, XP PC, 還是 iPad,只要打開瀏覽器,登入帳號密碼,就可以做到同樣的事情,工程師終於達成「程式只要寫一次」的理想(了嗎?)。業務也不用再帶筆電跟測試版軟體光碟出門做 demo,只要架個網站,給想玩的人一組帳號密碼、網址即可。

第二是收費模式改變,以前單機版軟體是付一筆錢,要用多久隨你高興,用了有問題再繳維護費、服務費。現在有了雲端版工具,大家的資料都放在廠商的儲存空間裡面,收費方式基本上有「花錢買空間」跟「花錢買時間」兩種,廠商沒收到錢,資料就灰飛煙滅、天人永隔。

以上都是商人的理想世界,但在工程師與開發者的世界,所謂「打開瀏覽器就可以用的線上工具」,最常遇到的就是瀏覽器相容性問題。每個瀏覽器、每個軟體商都搞一些自己的標準,軟體與硬體不斷推陳出新,每個裝置裡面都有一個「瀏覽器」,但每個裝置的瀏覽器都有一些不同的特性與例外狀況。而且網頁瀏覽器是系統權限非常低的東西,所呈現的網頁很容易被系統設定;或各種軟體、套件影響,而導致網頁功能失常。

本文介紹建立一些常見的網頁瀏覽環境與操作環境,讓各位資訊勞工方便解決問題。

(一)、使用虛擬機器,建立各種系統環境,來重現問題與排除問題。

一、建立各種版本的 IE 測試環境
Windows 內建的瀏覽器,在開發者的歷史定位上為「阻礙網頁世界技術發展」,每次應用最新的技術,卻必須為了使用者的需求:
「IE 什麼版本有差嗎? 為什麼我的 IE 看不到那個效果呢? 應該不論使用者用什麼瀏覽器,大家都要可以看啊?」
「我就點桌上那個 e 啊! 我用了好幾年都好好的,就只有你們的網頁打不開?」
而做許多的 fallback。而且就算版本相同的 IE,在不同作業系統也可能跑出長不同樣子的網頁,產生一些鬼打牆的情況。

以前流行用 IE8 開始內建的開發者工具去測 IE7, IE8, IE8 相容性模式,或是用 IE tester,但後來發現還是常常跟實際顯示得不同,或是遭遇 IE tester 的各種 crash。後期還是用虛擬機器來安裝作業系統,建立出錯的環境。微軟也有提供各種作業系統與 IE 版本的虛擬機器檔案。

二、在 Windows 建立 Mac OS 環境
很久很久以前,Mac 的 Safari 瀏覽器與 Google Chrome 採用同一核心引擎,但後來逐漸分道揚鑣,Windows 曾經也有 Safari,但後來停止更新,變成孤兒。所以網頁在 Chrome 跟在 Safari 上會產生不一樣的瀏覽結果。而且 Mac OS 的操作模式與 Windows 有些許不同,例如 Mac 的叉叉在左手邊,Mac 使用者通常不會把操作視窗「放到最大」。Mac OS 還有可調整高度的 Dock 工具列,常會讓網頁視窗產生超乎預料的比例或尺寸。

一般 Windows 的開發者,如果想要擁有使用 Mac OS 環境,大致上有四種方法:
一、買最便宜的 Mac 機型,如 Mac mini,或是二手的 Mac。
二、安裝黑蘋果(Hackintosh)。黑蘋果的一般定義,是在一台沒有蘋果商標的硬體上安裝蘋果系統,而且不需透過虛擬機器,可獨立開機使用。電腦的核心組件需使用 Intel 的方案。
三、使用 VirtualBox 安裝 Mac OS (操作效能較差),需準備 Mac OS 的 iso 檔,與 HackBoot*_*Mav 等相關破解程式。
四、使用 VMWare 安裝 Mac OS (操作效能較差),需取得 vmx 相關檔案與 Darwin 工具程式,安裝成功機率較高。

好了,現在有一個 Mac OS 的環境,可以測試 Safari 了。

三、在 Windows 建立 Android 模擬機


iOS 開發人員的煩惱是新機太搶手買不到,Android 開發人員的煩惱則是裝置太多,測不完。除了開發人員,其實有許多一般老百姓也會使用 Android 虛擬機,多半是為了掛遊戲、拿代幣、辦假帳號...。

常見的使用方案,而且可以選要產生哪一種 android 機型的,有以下幾種:
1.Genymotion
2.AVD (Android Virtual Devices)
3.Visual Studio Emulator for Android

四、在 Mac 中建立 iOS 模擬裝置
使用 iOS simulator 建立虛擬 iOS 裝置。

步驟如下:
1.Get a Mac (虛擬機器的 Mac 也行)
2.安裝 Xcode
3.執行 iOS simulator

模擬器畢竟是模擬器,僅供參考,沒有到 100% 相同。經過實測,與實際上還是有點誤差,例如拿實際的 iPhone 6 跟 iOS simulator 的 iPhone6 比較,文字換行還是有誤差。而且模擬器環境通常比較「乾淨」,不像一般使用者灌了許多軟體,離真正體現一般使用者的各種習慣與軟硬體環境還有一些差距。


(二)、實機遠端偵錯 (remote debugging)
當模擬無法解決問題時,可以考慮實機偵錯,中國大陸用語叫「遠程調試」,通常是讓裝置與開發者的電腦,用某種方式連線,然後使用瀏覽器的開發者工具來進行測試與檢查。

一、連接 USB 線,替 Android 手機/平板上的 Chrome 遠端偵錯
Chrome 據說是 Android 裝置上最多人用的瀏覽器(中國大陸區除外),雖然很占用裝置空間,但是一些跟 Google 帳號同步資訊的功能還挺方便的。它的遠端偵錯步驟也比 Firefox 來得簡單。

1.打開 Android 裝置的系統資訊,找到版本號碼,點擊 7 次,行動裝置會提示已開啟開發人員選項。
2.到裝置的開發人員選項,勾選「USB偵錯」、「啟用檢視屬性檢查」
3.打開行動裝置端的 Chrome,開啟要檢測的網頁
4.接上USB,將裝置與電腦連接,電腦必須先至手機商網站下載安裝驅動程式。
5.在電腦上的chrome點選選單>更多工具>檢視裝置
6.手機上會出現「安全性詢問」對話視窗,點選確認後即可遠端偵錯。(如下圖)

二、連接 USB 線,替 Android 手機/平板上的 Firefox 遠端偵錯
Chrome 占用太多裝置空間,android 瀏覽器太陽春,或是用習慣火狐,所以有些使用者會在行動裝置安裝 Firefox瀏覽器。

1.打開 Android 裝置的系統資訊,找到版本號碼,點擊 7 次,行動裝置會提示已開啟開發人員選項。
2.到裝置的開發人員選項,勾選「USB偵錯」、「啟用檢視屬性檢查」
3.勾選裝置端 Firefox 設定中的「遠端除錯」
4.安裝 Android SDK
5.插上 USB 線,下指令 adb devices,檢測是否連線成功
6.勾選電腦端「開發者工具」設定中的「啟用遠端除錯」選項
7.點選電腦端 Firefox 主選單的工具>網頁開發者>連線
8.下指令 adb forward tcp:6000 tcp:6000
9.將連接埠設定成與上步驟相同,再點選電腦端畫面的「連線」
10.手機上會出現安全性詢問,點選確認後即可遠端偵錯。

ref:Remotely debugging Firefox for Android

三、連接 USB 線,替 iPhone 或 iPad 上的 Safari 遠端偵錯 (限 Mac 使用)
此法僅在 Mac 上的 Safari 成功過,Windows 的 Safari 會失敗。(但是 vmware 中的 mac 還是可以用這招。)

1.打開行動裝置端的設定>Safari>進階,開啟「網頁檢閱器」選項。
2.使用USB,將行動裝置與電腦連線
3.打開行動裝置端的 Safari,開啟要檢測的網頁
4.打開 Mac 端 Safari 的「開發」選項,可以看到裝置名稱與正開啟的網頁。

四、其他行動裝置的瀏覽器呢?

  • 有些比較沒有客製化、比較接近原生系統的、系統版本較舊的裝置,裡面只有 Android Browser。
  • 大廠牌的 Android 裝置內通常會內建一個客製化瀏覽器,如 HTC 網際網路華碩瀏覽器、Sony 網絡瀏覽器......這種瀏覽器通常使用 webkit 核心,但是跟 chrome 又稍有誤差。
  • 中國大陸常用的瀏覽器,如傲遊雲、UC、百度、獵豹等等
  • Facebook , Wechat, 鄉民晚報裡面的 Webview API
  • 為了執行特殊套件而安裝,如海豚瀏覽器。
  • 其他...族繁不及備載。

每一種情況,常常又是另外一個世界,而且這些瀏覽器上面並不會有 remote debugging 的功能,那網頁如果發生問題,要如何偵錯呢?

試試 WEINRE 吧。它的原理是把你的本機變成伺服器,然後在目標網頁塞一些程式碼,當目標網頁開啟時,本機可以對目標端網頁進行偵測。

步驟如下:
1.電腦安裝 node.js
2.npm –g install weinre
3.weinre --boundHost 電腦IP
4.要偵錯的網頁中放入< script src="http://你的IP:8080/target/target-script-min.js#ID名稱">
5.用裝置去瀏覽放入 JS 的網頁
6.在電腦瀏覽器執行 http://你的IP:8080/client/#ID名稱
7.將會得到一個簡易的開發工具,可以檢測目標網頁。(ps.無法偵測 media queries)


weinre 的工具比較陽春,不能做太複雜的操作,但好處是裝置不用插線接電腦也可以偵錯,若有其他不插線做 remote debug 的需求,可到 Google play 市集搜尋 wifi adb 之類的 app。

五、Teamviewer 遠端控制


有時候搞了老半天,會發現根本是操作問題。或是防毒軟體或是電腦問題造成的個案,就需要在出問題的裝置上除錯。

遠端控制軟體的缺點在於,

  • 有些電腦是內網環境,或是對方不想被遠端連線。
  • 用 Teamviewer 檢測時,對方也會看到你在幹嘛,相當害羞。
  • 行動裝置版的 teamviewer,作為主控端時,可以控制桌上型電腦。但作手機作為被控端時,主控端的電腦只能幫手機截圖、開關 app,檢查CPU、記憶體的使用量與耗電量,無法除錯偵測或代為操作。

(三)、結論
全民公測,發生問題才來修,是現在大 cost down 時代常見的陋習。
但身為一個有良心的開發人員,不能用「大家都闖紅燈,所以我也跟著闖」的概念來做事。(如果薪水很低的話就算了。) 那有沒有辦法超前部屬,能先知道網頁在每一種裝置、解析度上顯示得怎樣呢?

有的!

可以試試這兩種:
Cross Browser Testing. Real mobile devices & browsers!
Bbrowser Stack - Cross Browser Testing Tool. 300+ Browsers, Mobile, Real IE.


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


播放吧! 網頁上的影片

近期遇到一個需求,客戶的行業會有自己的影片內容,想把影片放在自己的伺服器,在自己的網站上播放,而不是放在 Youtube 等線上影音服務平台,考察其他同性質的競爭業者,發現在網頁上播放自己的影片,這件事並不單純...

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:

第一部 : 我的上古時代
1.步驟1:把影片傳到伺服器,用早期的影片播放語法…
2.步驟2:電腦需要安裝各種 Player 才能看網頁上的影片… (您是否要執行此 ActiveX 控制項?)
3.步驟3:成功看到影片了!

4.< object> 屬性介紹:

5.以前的技術為何不能解決現代的問題?

  • ActiveX 在非 IE 的瀏覽器不支援
  • NPAPI 相關技術在現代瀏覽器被停用。
  • Codebase 插件路徑失連
  • Flash 人人喊打
  • Sliverlight – 微軟宣布將終止支援
  • 行動裝置時代來臨

第二部: 新時代
1.HTML5 Video 標籤

  • 使用 < video> 標籤與相關屬性,即可產生影片播放介面,不需要自己寫介面。
    影片播放器的功能細項:
    a.有一顆按鈕點一下會變成║,會停在剛剛的畫面,並且聲音暫停,再點一下會變成 ►,從剛剛的時間點繼續播放畫面與聲音。
    b.有一個矩形區塊,依目前已播放/影片總長度計算並顯示正確的長度,每秒更新,與 a 項功能連動。
    c.點擊 b 項區塊,會前往該位置對應的影格與音訊時間。
    族繁不及備載...

  • IE9(含)以上支援 < video> 標籤。

  • 由瀏覽器負責解碼影片,影片格式支援性依瀏覽器而定:

    • MP4 (除了IE8, Android 4.3-,支援性最高)
    • OGG (不支援 IE, Edge, Firefox3.5-, Chrome3-)
    • WebM (不支援 IE, Edge, Safari, Firefox4-, Chrome 6-)
    • m3u8 ( HLS 串流影音格式,Chrome 不支援)
    • 如果我有其餘的格式,如 FLV 可以直接用 video tag 來播嗎? 不,仍須仰賴外部套件(通常使用 Flash 做的播放器套件)。

2.HTML5 Video 標籤的相關屬性

  • autoplay - 是否自動撥放影片(行動裝置無效)
  • loop – 是否循環
  • poster – 影片故障/影片載入中/影片未撥放顯示一張圖片
  • preload – 是否預先下載,或是等按下 play 之後才開始下載
  • source – 影片路徑
  • controls - 影片控制條
    • Play/Pause 撥放/暫停按鈕
    • Seeking 撥放進度條
    • Volume 音量控制
    • Fullscreen 全螢幕按鈕
    • track (目前只有 Edge 跟 Safari 支援)

3.同一段 video 語法在各瀏覽器顯示的樣子都不一樣
4.為了達成瀏覽器相容性,Flash 不能亡
5.外部播放器套件

  • 使用 html5 video + Flash 播放器 + JS 等綜合技術,達成最高的瀏覽器覆蓋率
  • 各瀏覽器統一的播放器介面、可換面板、自訂樣式…
  • 方便的 API 與事件呼叫方式
  • 擴充套件,如各種樣式的播放清單、影片段落縮圖
  • 商業授權、持續更新
  • 額外的服務,如串流影音輸出,雲端伺服器串接
  • 商業授權: videojs, jwplayer, flowplayer
  • 免費授權可商用: Strobe Media Playback, Sewise Player

三、網頁與影片的相關技術重點
1.大家都能看到影片
2.串流影音技術 - HTTP Live Streaming(HLS),讓影片可以邊載入邊播放,
3.保護機制 - 限制影片只在在特定網站播放,或是播放給特定的人看
4.壓縮技術 - 使用者不喜歡等待,經營者不喜歡花錢在設備上
5.動態置入內容 - 動態置入廣告、動態廣告驗證碼
6.網頁互動 - Youtube Embed API,動作事件與影片互動

四、最簡單的方法 - 把影片放在線上影片平台
如隨意窩、Youtube、優酷、Vimeo, Facebook, Google Drive..
1.優點

  • 外部曝光/作者廣告收益
  • 串流處理
  • 持續的播放技術更新
  • 不須占用自己主機的傳輸流量
  • 平台提供簡易的剪輯工具

2.缺點

  • 廣告
  • 影片被檢舉、失效
  • 服務收攤 (ex: vlog, 無名小站,…)

五、把影片上傳到 Youtube 就結束了嗎?
1.嵌入影音時要選哪一種?
2.現有的網站編輯器,嵌入影片很不方便
3.理想的網站編輯器影片嵌入功能

  • 視覺化的選擇影片插入位置,不用切到原始碼模式
  • 可方便的重複編輯修改,不用在原始碼模式裡面找嵌入碼
  • 安全的刪除,不會把把包在附近的東西一起刪掉。
  • 乾淨的刪除,不會留下任何殘留的容器在畫面上。
  • 在編輯區中可正確顯示影片尺寸、位置與影片預覽,方便編排
  • 相容各大影音平台影片
  • 影音空間串接

4.理想編輯範例 - weeblywebnode


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助