2012/09/28

HTML5 mobile app 練習

這幾天在練習 HTML5 mobile app,決定找一個 Android 底下的 app 來重刻成 HTML5 版本,我挑的是 News & Weather 的天氣部分。



這是一個可以根據你現在地點給你當地天氣的 app,按下右邊靠近上面的驚歎號圖示可以看今天一整天的溼度以及溫度變化,在圖形上面用手指滑動可以看指定時間的溼度。

我找了一下如果要每個小時的溼度與溫度的 Weather API 大多都要錢的,所以最後我接了 World Weather Online 的 API, 但是圖表就換成接下來五天的天氣氣溫變化,當作練習就是了。

成果如下,他只能跑在 Firefox for Android 上面,我沒有針對 Chrome/Safari 等 webkit 系列調整。

  


作完之後有一些感想...
  1. 如果不考慮相容性,現在的 CSS3 真的很強大,以前很詭異的排版方法現在都變得好排多了,我連右上角驚歎號圖示按下去顯示另外一頁都是用 CSS3 完成的,不需要 javascript。
  2. CORS 我還是沒搞定,最後用比較醜的 JSONP 解決。
  3. SVG 雖然好用,不過看起來效能在 mobile 上面還無法接受,目前應該還是用 Canvas  比較好。
  4. CSS/SVG 的漸層效果在 Firefox For Android 上面看起來很差,不知道爲什麼。
然後我很懶惰的沒有做 SVG path 的圓角,看起來好像沒有像是 rect 的 rx,ry 可以直接設定...

Source code 我放在 github 上面,有興趣的參考參考。

2012/09/06

cinnamon - 用 Javascript 高度客製化的 GNOME3


看了 小 Q 的 Facebook 之後,我也裝了 cinnamon 來用用。我之前一直推想 cinnamon 應該是把 GNOME3 裡面的 gnome-shell 的高度客製化,這次裝起來果然是這樣。一個很簡單的確定方式就是按 alt + F2 輸入 lg,就會從下面拉起一個 javascript console, debugger 跟 inspector 合一的開發工具 LookingGlass。


如果去查看 cinnamon 的套件檔案列表,也包含相當多的 Javascript。

因為很多人不知道,所以我再強調一次,整個 gnome-shell 都是 Javascript 寫的,所以 cinnamon 也都是整個用 Javascript 寫的。

比起 Ubuntu 整個砍掉重練用 compiz 重寫一個 unity 桌面環境,我覺得 cinnamon 用 GNOME3 既有的成果開發桌面環境是比較好的選擇,畢竟 Javascript 一來是比較多人會用的程式語言,另外在需要擴充功能的時候,Javascript 也可以很快的就寫好擴充。

更何況 cinnamon 就算是高度客製化他還是 GNOME3,很多資源都是可以共享的,而 unity 就等於完全新開一個獨立的分歧,恐怕濃厚的 Ubuntu 色彩會讓其他 distribution 不太願意使用。(不過 Fedora 18 似乎要把 unity 加入 repository 裡面 )