My Program ::

'html5'相關日誌共 5 篇

線上製作html5動畫-Mugeda

好用軟體 2012/01/10 15:52

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

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

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

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

TAG animator, html5, mugeda

Trackback 0 : Comment 0

Firefox 8.0來了

好用軟體 2011/11/09 11:41

views: 47447 times
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 的朋友們, 快來更新囉!

TAG Firefox, html5

Trackback 0 : Comment 0

VideoJS-HTML5的影片播放器

程式技術/Javascript 2011/02/19 23:19

views: 81472 times

VideoJS-圖片引用自http://videojs.com/

瀏覽器支援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/ 真的還蠻方便的呢!

TAG css, html5, javascript, video, videojs

Trackback 0 : Comment 2

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

好用軟體 2011/02/19 23:03

views: 40316 times
這個網站(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 的局部極小值.

很方便的函數繪圖工具.

TAG canvas, function, graph, html5, intersect

Trackback 0 : Comment 0

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

程式技術 2010/12/29 22:05

views: 68399 times
由於 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="...."> (...為上面的 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: