pCloud Partner Program

線上製作HTML5動畫-iAnimator

好用軟體 2012/12/14 12:22
views: 114607 times
之前介紹過這個類似功能的網站: Mugeda (參考之前文章: http://diary.tw/tim/979 ), 今天發現又有一個這樣功能的網站: http://ianimator.kundy.net/ , 一樣是透過線上製作的方式來進行操作, 把動畫製作出來.

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

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



top

強大的HTML5離線作業

程式技術/Javascript 2012/10/25 16:58
views: 107437 times
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

top

多個檔案上傳-multiple upload with HTML5

程式技術/Javascript 2012/08/08 18:50
views: 89005 times
在以往 form 中使用上傳元件, 只能做單檔上傳, 一個 input type=file 只能做一個檔案, 若是需要做多個檔案同時上傳, 得需要使用多組 input type=file 或是利用 flash 來達成.

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



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

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

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

線上製作html5動畫-Mugeda

好用軟體 2012/01/10 15:52
views: 85809 times
隨著 html5 的發展, 這個可以在線上製作 html5 的動畫工具, 可以讓大家在製作簡單動畫上有更容易的方式, 網址: https://www.mugeda.com/

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

用戶插入圖片

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

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

top

Firefox 8.0來了

好用軟體 2011/11/09 11:41
views: 100816 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 的朋友們, 快來更新囉!

top
TAG Firefox, html5

VideoJS-HTML5的影片播放器

程式技術/Javascript 2011/02/19 23:19
views: 162157 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/ 真的還蠻方便的呢!


top

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

好用軟體 2011/02/19 23:03
views: 145022 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 的局部極小值.

很方便的函數繪圖工具.
top

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

程式技術 2010/12/29 22:05
views: 122342 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:
用戶插入圖片


top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...