分類
程式技術

[HTML5]data attributes大小寫問題

今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.

因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data(“numberofdata”) 的方式來存取, 否則會 undefined.

若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data(“numberOfData”) 來存取.

可以參考以下程式:

<a id="linka" data-string="a">link a</a><br>
<a id="linkb" data-stringOfData="b">link b</a><br>
<a id="linkc" data-string-of-data="c">link c</a><br>

// jQuery javascript
document.write("#linka.data(\"string\") = " + $("#linka").data("string")+ "<br>");
document.write("#linkb.data(\"stringOfData\") = " +$("#linkb").data("stringOfData")+ "<br>");
document.write("#linkb.data(\"stringofdata\") = " +$("#linkb").data("stringofdata")+ "<br>");
document.write("#linkc.data(\"stringOfData\") = " +$("#linkc").data("stringOfData")+ "<br>");

上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.

可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR

繼續閱讀:
https://stackoverflow.com/questions/20985204/does-jquery-internally-convert-html5-data-attribute-keys-to-lowercase

分類
好用軟體

線上製作HTML5動畫-iAnimator

之前介紹過這個類似功能的網站: Mugeda (參考之前文章: https://diary.tw/archives/1170 ), 今天發現又有一個這樣功能的網站: http://ianimator.kundy.net/ , 一樣是透過線上製作的方式來進行操作, 把動畫製作出來.

試用了一下, 發現 Firefox 不太支援, 換用 Google Chrome 後就正常許多, 不知是否是還未完整.

繼續閱讀: http://www.qianduan.net/ianimator-css3-animation-tool.html

強大的HTML5離線作業

HTML5裡令人驚豔的一項特性就是可以離線瀏覽功能.

利用這項功能, 可以很容易地讓網頁在沒有網路的環境下, 也能順利讓使用者閱讀及使用, 而且實作上也相當單純, 只需要注意寫好更新網頁的邏輯及時間點即可.

一般來說, 只需要把 manifest 設定好, 基本的離線瀏覽功能就差不多完成了, manifest 的設定容易, 就是把”要”在離線瀏覽的網頁及內容, 寫在 manifest 裡, 例如網頁是

http://test.com/mypage.htm

內容有一個 js/myjs.js
另外還有兩張圖為 imgs/1.jpg 及 imgs/2.jpg

則在 mypage.htm 中的 html tag 裡, 多加上 manifest=”mypage.manifest” 而且在 mypage.manifest 中, 加上以下內容(純文字):

CACHE MANIFEST
mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg

這樣就完成了. 有意思的地方是即使用 mypage.php 這樣的動態內容, 一樣可以利用這樣的方式將內容存在客戶端中.

如此一來, 即使在沒有網路的狀況下, 也可以順利瀏覽這個網頁內容 http://test.com/mypage.htm

接下來要說明的是更新方式, 一旦寫入到客戶端的內容, 即使原本的 mypage.htm 更新, 就算是有連線時, 該內容也不會更新(而且即使是動態的 aspx, php 等也都是一樣的), 簡單地說, 在 manifest 中的內容, 就是完全使用客戶端的內容, 不管 server 上的內容, 更新的方式就是更新 manifest 的檔案, 瀏覽器會檢視 manifest 內容來進行更新, 而且會自動更新(在線上時的第一次讀到 manifest 更新時, window.applicationCache.status 會變成狀態 4 (window.applicationCache.UPDATEREADY), 此時可以手動更新, 使用 window.applicationCache.update(); 即可做手動更新, 即使在這次的訪問不更新, 在下一次的訪問時, 瀏覽器也會自動更新.

利用這點, 就可以很容易地實作出離線瀏覽內容的網頁.

若希望只更新這些快取內容, 最簡單的作法是在 mypage.manifest 中, 多加個時間或版本號, 如下:

CACHE MANIFEST
#VER 000151

mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg

其中的 # 代表著這行為註解, 所以可以自由寫入內容, 上例是寫個版本號 000151, 若要強迫客戶端更新時, 可以將這個 manifest 檔的版本號改為 000151 (若其他內容都可以), 這樣就可以方便容易地來維護在客戶端離線的內容更新.

這裡有一篇很清楚的介紹文, 可以參考
http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

另外, 配合良好的設計結構, 可以將離線/在線的功能都實作出來, 方便在無法連線時, 也能使用的網頁, HTML5 的這個功能, 的確非常強大!

在實作測試時, 發現若是有設定 manifest 的網頁, 有些瀏覽器對有些 server request 即使沒有設定在 manifest 中, 也會有快取或存取的異常狀況, 建議在 manifest 的最後, 再多加上

NETWORK:
*

這兩行, 可以讓不正常工作的 server request 正常運作.

相關資料:
http://diveintohtml5.info/offline.html

w3c 的資料:
http://www.w3.org/TR/html5/offline.html

Apple Safari的資料:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

多個檔案上傳-multiple upload with HTML5

在以往 form 中使用上傳元件, 只能做單檔上傳, 一個 input type=file 只能做一個檔案, 若是需要做多個檔案同時上傳, 得需要使用多組 input type=file 或是利用 flash 來達成.

不過在 HTML5 中, 定義了 multiple 屬性, 讓 input type=file 可以同時傳上來多個檔案. 來看看用法吧.

<form method=post enctype='multipart/form-data'>
file(s):<input type="file" name=ufile id=ufile multiple />
<input type="submit" value="upload" / >
</form>

就這麼簡單, 在原來的 input type=file 多加個 multiple 即可, 這樣功能就可以達成多個檔案上傳了, 不過若是要限制檔案數, 就得要用 client javascript 來進行檢查, 在 onsubmit 時, 做個數檢查即可.

接下來就看範例囉, 放在這裡: http://sample.diary.tw/28/lm.php

這個範例利用了 file 及 size 屬性將上傳檔案的檔名及大小列出來, 不過不會上傳, 不用擔心, 純在客戶端執行的!

分類
好用軟體

線上製作html5動畫-Mugeda

隨著 html5 的發展, 這個可以在線上製作 html5 的動畫工具, 可以讓大家在製作簡單動畫上有更容易的方式, 網址: https://www.mugeda.com/

這個 Mugeda 網站, 利用線上編輯的方式, 讓大家可以直接製作動畫, 並且可以直接嵌入網站(使用方式為 iframe), 而編輯介面也是像 flash 等軟體一樣, 利用影格編輯的方式來操作:

這裡有在 mugeda 製作的熱門動畫, 可以參考看看: https://www.mugeda.com/popular

繼續閱讀:
http://briian.com/?p=7915

分類
好用軟體

Firefox 8.0來了

Firefox 7.0 才更新到 7.0.1, 現在來 8.0 了啊. 介面又有些調整了, 速度感覺有心理上的作用那麼快一點, 跑一下 Acid3 Test (http://acid3.acidtests.org/)是 100, 而且速度還蠻快的.

新功能參考如下: (引用自: http://moztw.org/firefox/releases/8.0/ )

  • 現在將預設停用第三方所安裝的附加元件。
  • 增加一個一次性的選擇附加元件對話框來管理先前安裝的附加元件。
  • 在搜尋列加入 Twitter 搜尋。
  • 增加需要時才載入分頁的選項,縮短啟動時的視窗還原時間。
  • 改善分頁移動、重排、分離的動畫。
  • 增進 <audio> 和 <video> 元素的效能與記憶體管理。
  • 支援 CORS 以允許 WebGL 的 cross-domain textures 處理。
  • 支援 HTML5 選單(context menu)。
  • 支援 insertAdjacentHTML。
  • 增進多種語言的 CSS hyphen 支援。
  • 增進 WebSocket 支援。
  • 解決數個穩定性問題。

在用 firefox 的朋友們, 快來更新囉!

VideoJS-HTML5的影片播放器

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!

分類
好用軟體

方便好用的線上函數繪圖-graphr.org

這個網站(http://graphr.org/)利用了 html5 的 canvas 特性, 製作了一個方便的函數繪圖功能, 也將一些常用的尋解功能放在上面, 例如二元一次方程式如下:

y=x-1
y=3x-4

把資料輸入後(預設只有一個方程式, 按下[Evaluate]旁的[+]可以再多添加一個方程式), 點 [Evaluate] 後, 會把函數圖繪製出來, 再按下 [Intersect] 鈕, 把滑鼠移到交叉點附近後, 就會出現交點的解, 如下圖:

如此一來便能方便地利用圖示函數應用來解一些方程式. 上圖找出 (x, y)=(1.5, 0.5)為解.

再來看看3次函數的局部最大/最小值, 例如以下三次方程式:

y=x^3-3x^2+2

一樣的方式先輸入後, 按下 [Evaluate] 繪出圖形後, 再利用 [Local Minima/Maxima] 鈕, 找局部最大/最小值, 如下圖:

上圖找出 x=2, y=-2 的局部極小值.

很方便的函數繪圖工具.

分類
程式技術

線上產生HTML Data URI媒體(inline)及編碼工具

由於 html5 起可以將 video, audio 等 tag, 將更方便把資料直接寫在 html code 中. 從這篇文章 “利用HTML5对文件进行base64转换” – http://www.pjhome.net/article/Javascript/file_to_base64_url.htm 的頁面工具上, 有個有趣的應用, 線上直接把檔案轉成 base64 的編碼, 方便寫入 html code 之中, 工具連結為: http://www.pjhome.net/web/html5/encodeDataUrl.htm

例如這張圖片:

利用該網頁產生的結果為:
data:image/gif;base64,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

改為 html 寫入則為:

<img src="data:image/gif;base64,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">

一樣可以輸出結果, 但是是利用 <img src=”….”> (…為上面的 base64 內容), 這樣一來就能將小型圖檔及小型媒體檔案一併寫入 html code 中, 效果其實有好有壞, 含入 html code 中, 可以減少 client 到 server 的多次 request, 但傳輸量相對比較大, 應用上要多評估, 不過上面文章應用的 html5 技術來做線上轉換, 是很有意思的一種應用!

繼續閱讀:
http://blog.donews.com/crackme/archive/2009/11/23/1573849.aspx
http://zetajames.wordpress.com/2010/01/08/lower-http-requests/
http://blog.darkthread.net/blogs/darkthreadtw/archive/2010/11/05/data-uri.aspx

[2010/12/30 10:37]
其實 Google 的圖片搜尋結果中的預覽圖, 若使用有支援 Data URI 的瀏覽器時, 就會使用這種方式來輸出預覽圖, 例如 IE8: