Tag: html5

遊戲捲頁的理論與實作

文章的標題「Scroll Back: The Theory and Practice of Cameras in Side-Scrollers」，裡面圖又大又多，20Mbps 的光世代全速下載要跑滿一分鐘才能抓完。


順便測一下 Imgur 的 mp4，以及 HTML5 的 video tag。

裡面考了不少古啊，把捲頁的方式分成許多類別...

Firefox 擋 Canvas Fingerprint 的套件

在「How to block Canvas Fingerprinting in Firefox」這篇終於看到擋 Canvas Fingerprint 的延伸套件了：「CanvasBlocker」。

關於 Canvas Fingerprint，可以參考之前「用 Canvas Fingerprint 取代部份 Cookie」這篇文章。

截圖看起來有點陽春 (設定的方式很 geek)，不過算是個開始，之後應該會愈改愈好：

Firefox 的 WebIDE

在「WebIDE Lands in Nightly」這邊看到 Firefox 將 WebIDE 整合進 Nightly 版本，代表之後的幾個版本後就會變成正式版...

從開頭這段：

Editor’s note: if you want to help test it on a recent nightly you can toggle the devtools.webide.enabled preference in about:config. The WebIDE is available today under Tools>Web Developer>App Manager and will be renamed in tomorrow’s Nightly into WebIDE.

以及一些截圖資訊：

都可以看出來是跟 html5 app 的開發有關。

找資料的時候發現國內有人報導過了：「Firefox變身HTML5全功能IDE　光用瀏覽器就能開發各平臺App」，這邊就不再介紹太多。

比較想要知道的還是決策的部份是怎麼想的：綁到 Firefox 預設環境裡面，而非用 extension 方式安裝...？

用 HTML5 video 取代動態 GIF 的 Hosting 服務...

拿「F6F — 井口裕香 @ たまゆらじお～もあぐれっしぶ～特別編 (2013-12-21) ↙：かわいい...」這篇的第一張圖來當範例。

這是原始的 GIF 版本：

這是 gfycat 的版本：

GIF 的原始大小是 1487KB (1522894 bytes)，而 WebM 的大小是 151KB (154735 bytes)，MP4 的大小是 147KB (151274 bytes)，大約是十倍的差距？

在 about 頁有說明想法，可以看到檔案大小的差距。不過 GIF 已經是上個世紀發明的東西了，而且當初也不是預期現在這種用法 :p

HTML5 的 meter 元素...

在 Zite 上看到 HTML5 的 meter 元素：「The HTML5 meter Element」，這個元素的 spec 在「4.10.17 The meter element」。

用來表示比率的元素，像是 progress bar，或是使用率...

這是直接用你的瀏覽器 render <meter min="0" max="100" value="50"></meter> 的結果：

這是示意圖 (有點大 XD)：

依照 caniuse.com 上的說明，比較新的桌面瀏覽器都支援了：「Progress & Meter」。

以往應該都是自己用 div 處理，現在看起來可以用這個元素，再用 JavaScript 對 IE 處理了？

英國衛報對 Snowden 爆料 NSA 的特刊...

衛報 (The Guardian) 對 Snowden 爆料的事情開了一個特刊：「NSA files decoded: Edward Snowden's surveillance revelations explained」。

首先，Snowden 爆料 NSA 這件事情的熱潮一直在延續 (一直都很精彩)，而且衛報本來就是在這整件事情裡面佔有很重要的角色，由衛報做這個特刊並不意外。

但衛報這個頁面利用 HTML5 video 與大量 CSS3 效果，向全世界展示了「網站上的特刊可以這樣做！」，強烈建議有在關注這個主題的企劃，以及視覺設計的人花時間去看看整體的呈現。

以往類似的東西要嘛就是主題不夠精彩，要嘛就是呈現不夠精彩。這次因為 Snowden 的爆料已經持續幾個月了，衛報自然願意花大量的資源專訪 (於是可以看到不少 video 短片) 以及整理。在手上素材夠多，以及一流的呈現方式，造就了這個精彩的特刊。

Cisco 將會付 H.264 的授權費用...

前幾天看到的大新聞，Cisco 實做了 BSD license 的 H.264 並且付了專利費用：「Open-Sourced H.264 Removes Barriers to WebRTC」。

依照 Cisco 的說法，是為了推動 WebRTC 而決定這樣做的：

Many, including Cisco, have been backing H.264, the industry standard which today powers much of the video on the Internet. We strongly believe that interoperability is an essential goal of standards activities and that usage of H.264 by WebRTC means it will be able to interconnect, without transcoding, to a large set of existing clients from a multitude of vendors.

而 Mozilla 也打算用這份授權支援 H.264：「Video Interoperability on the Web Gets a Boost From Cisco’s H.264 Codec」。

不過，source code 好像還沒放出來啊？在 OpenH264 這邊寫著「Source Code Coming Soon」...

Firefox 以 JavaScript 支援 Flash

標題不知道怎麼下比較好...

一樣是在 Zite 上看到的消息，Firefox 將引入內建的 Flash Player，是以 JavaScript 實做的：「HTML5 Flash Player (Shumway ) landed」。

專案在 GitHub 的 mozilla/shumway，Mozilla 的 Bugzilla 則是在「Bug 904346 - (shumway) [meta] add built-in SWF support to Firefox with Shumway」這裡。

純 JavaScript 的實做版本，有機會 porting 到 Chrome 上嗎？感覺安全性問題會少很多？(或是被發現安全性問題的時間？)

在瀏覽器玩 HTML5 + JS + Canvas 寫的 Diablo...

沒錯，是 Blizzard 的那個 Diablo (暗黑破壞神)：「Isometric minimal-code style game at html5 canvas and javascript」，遊戲可以在「http://mitallast.github.com/diablo-js/」這頁玩...

直接用 Blizzard 的圖資搞當然是很精彩 (而且很震撼)，但這樣搞不會被 DMCA takedown 嗎 XDDD