壞蛋的部落格

Sencha Touch 1.1.0 隔了好久終於釋出 1.1.1 , 主要修正的地方是 bug

而我比較關注 2.0 , 在 1.1.0 其實有個很礙眼的問題 , 就是當 Card slide 轉場時 , 在 Android 手機上有時候會有閃爍的情況發生 , 在 2.0 不會了 , 而 Scroll 順暢度在 Android 上也有進步 , 基本上 IOS 的問題比較少 , 1.1.0 版就運作的很流暢了 , Apple 真的把 safari 作的很好 

另外 2.0 版針對螢幕旋轉時也有效能的進步 , 各位可以看以下 Sencha Touch 2.0 blog 中的 的影片就知道了

http://www.sencha.com/blog/sencha-touch-2-developer-preview/

由 Blog 中可以知道 2.0 的目標著重在效能以及更容易開發及更完整的文件 , 另外這一版提供了 mac sdk , 主要是可以將以 Sencha Touch 為基礎的 HTML5 APP 包裝成 ios 應用程式 , 這部分還沒時間試 , 不知道是不是只是包了個 WebView 去打開 HTML 而已 , 還是說有作到類似 Titanium Mobile(不太可能吧…) , 有時間我會試試看和 Titanium 去包 Sencha Touch 上是否有效能上的差異 , 就這樣啦 !

由於手頭上有正在開發手機程式 , 但不想因為改版上架時間的問題 , 所以採用了一種做法 , 就是把 web 的內容用手機上的原生程式讀進 webView 顯示 , 除非原生程式有問題才會有改版並重新上架

目前是採用 Titanium 這套開發套件撰寫 ios 及 android 雙平台的程式 , 而畫面的部分採用遠端的 web 呈現 , web 和手機的原生程式透過某種機制溝通做到 web 也可以存取行事曆的功能

說白一點 , 用 Titanium 開發的程式主要就是讀取遠端的 HTML , 而遠端的 HTML 就是 mobile app的介面 , 所以設計介面所採用的 framework 就很重要 , 我試過了好多套目前常看到的 , 分別講一下

JQuery Mobile

這是以 jquery 為 base 開發的 , 設計方式要符合 jQuery Mobile 所定好的 HTML Code 及 CSS 規範 , 個人感覺 jQuery mobile 很容易開發 , 但也有不足之處 , 由於手機上的介面常常會用到觸控滑動 , 目前 jQuery Mobile 無法做到一點 , 就是當我需要做一個上下方都有一個固定的 BAR , 中間需要滑動 , 就很難做到 , 這可能要歸罪 iphone 4 或 android 的 webkit 尚未支援這種方式 , 據說 ios 5.0 的 webkit 就會有這原生功能 ,但目前有實驗性質的 scroller 可以測試 , 這算模擬的 , 個人覺得不夠順就是了 , 於是我放棄這套 framework , 因為觸控滑動實在太重要 , 目前 Drameweaver CS 5.5 有將 jQuery Mobile 和 PhoneGap 整合進來 , 我想有些美工人員應該會對這套有興趣

jQtouch

這和 jQuery mobile 一樣 , 開發的方式其實差不多也是 jquery base , 但一樣沒有好用的 scroller , 而且比起 JQuery Mobile 來說 UI 項目比較少 , 不過有一套 DataZombies 的套件是把 jQTouch fork 出來家上了 iScroll 這個 plugin 進去可以達成上下方有固定bar 可以當選單的功能 , 但是一樣不順 , 我測試過在 iphone 3GS 下挺順的 , 但 Android 2.3.3 的系統則很 lag , 個人感覺 jQtouch 其實和 jQuery Mobile 都有相同的特性就是好設計 , 但一樣 scroll 功能沒有很完善 , 所以在求完美的情況下 , 也放棄了

Dojo Mobile

這是以 dojo 為基礎而開發的 mobile framework , 功能強大 , 幾乎所有用原生手機的 framework 提供的內建 UI 方式 , 這套都有實做出來 , 但常常有些時候會發生畫面跑不出來的情形 , 看官網的 demo 有時候也要重整才出的來 , 雖然功能強大 , 但這種不穩定的狀況下, 我也放棄採用了

Wink Toolkit

這套算是著重在小巧 , 效能的 framework , 該有的 UI 功能都有 , 但由於太過簡化 , 按鈕也沒有按下的效果 , 反而要自己花腦筋 , 其實不算好設計 , 而它有一點令我眼睛發亮的原因是  , 她可以做到在有上下固定 bar 的選單時 , 還可以用到原生 scoll bar , 順到不行 , 啊這就奇了 , 怎麼只有 Wink 做的到 >< , 而我目前沒有採用它仍是因為很多 UI  元件都做半套的 , 按鈕沒有按下的效果 , 選單沒有點選的效果 ..... 但我很期待這套 framework 若有對 UI 做加強後 , 應該會是一個好設計 , 效能又好的 framework

Sencha touch

這是以 ExtJS 4.0 為基礎所開發的 , 我可以這麼說 , 它是最難上手 , 開發時 , 應該用不上 HTML 了 , 因為完全都是物件導向 API 的開發 , 但我為何要提它 ? 因為我目前就是用這套來開發介面 , 因為玩過後 , 感覺起來他應該是目前功能上和 Dojo Mobile 不相上下的一套 , 且不會有 Dojo 一堆奇怪問題 , 而且也有上下固定 bar 中間可以 scroll 的設計方式  , 而在目前萬元以上的智慧手機上執行起來也很順暢 , 雖然其 scroll 效果在 android 上仍然有點小 lag , 但還可以忍受 , 至少不會比 jQTouch 或 jQuery Mobile 在畫面複雜時 , 滑動起來變成是一種折磨 , 而用這套開發最大的缺點 , 我想就是他已經無法做網頁最佳化 , 如果說要拿這套開發一個手機版的網站 , 我認為不適合 , 但若拿來開發一個類手機程式的 UI , 我覺得挺適合的 , 目前已經有用到其 MVC 的概念 , 感覺有點類似 PHP YII 或 Ruby On Rails 了 , 他的 ORM 資料的定義方式很類似我們使用 PHP MVC Framework 的方式 , 也有做到關聯性 , 並且可以將資料從遠端相對應的 json 讀到 ORM , 或存到本機的 WebStorage , 做離線資料存取的使用非常棒 , 應該這套是用到 HTML5 功能最多的一套 Framework 了

總結

其實每套 framework 都有他的優缺點 , 並非我喜歡的就是適合大部分的場合 , 但有些時候總要取捨 , 碰那麼多套也有好處 , 就是知道甚麼場合用那套 , 如果是要作一個入口網站 , 是需要有搜尋引擎的索引增加排名的 , Sencha touch 會被我丟了 , 而若想要快速建立一個手機網站 , 那麼 jqtouch or jquery mobile 是首選 , 而我本人最期待 wink toolkit , 因為他真的所有 UI 功能都有了而且效能最好  , 但就是做半套 >< 我真的很希望那天他的所有 UI 都已經擬真到和一般 mobile app 一樣 , 未來兩三年在智慧型手機的效能越來越好的同時以及瀏覽器的硬體加速做的越來越好時 , 手機程式設計應該會有越來越多人用 html + javascript 方式來做了

在上周一時 , 我跟天瓏網站訂購了這本 Hello ! HTML5 , 本周四才收到 , 拖了挺久的 , 因為我訂購時尚未出版 , 出版日到時竟然又延遲出版 , 於是才搞這麼久。

這本書在天瓏或博客來網站都有在賣 , 若去看網站介紹的人去買 , 以為可以學到 HTML5 所有功能的人就錯了 , 這本書不是規格書 , 更不是一個基礎教學書 , 因為裡面並沒有將每個指令做成指令查詢書般的分類好 , 而這本書也不是從頭到尾教人如何作出一張完整的網頁。

不過 , 我很慶幸 , 我買對書了 , 因為我要找的書 , 是一本介紹 HTML5 與 XHTML 或 HTML4 的差別說明 , 以及 HTML5 的 Web Standard 書 。 是的 ! 就是這本了 , 這本書完全是給具備 XHTML 基礎的人看的書 , 看完之後 , 對於為何有些人強調 SEO 的作法 , 但總是摸不著頭緒的人會更清楚如何用 HTML 讓文件更俱備語義結構。

在台灣我想還是很多網頁設計師或美工在設計網頁時仍以排版概念去設計網頁好讓排版正常 , 事實上我從知道有 Web Standard 這種風潮開始的時候 , 也改變了寫 HTML 的流程 , 有些人很會用 M$ Word , 將一份 Word 文件寫出來後 , 可以利用大綱模式看出文件的所有章節內容 , 只要章節訂的很明確 , 也可以用 MS$ Word 內提供的目錄功能為文件自動產生目錄。

在有 Web Standard 名詞出現的時候 , 我在設計的思考方向也盡量朝向和寫 Word 一樣的邏輯 , 讓每個章節與區塊是有層級的 , 在這本書中也有提及如何用 HTML5 讓文件更俱備結構化的作法 , 也詳細了說明 HTML5 新的標籤語義 , 該用在甚麼場合都交代的很清楚 , 這對 SEO 非常重要 , 因為 Google 也已經會對 HTML5 作結構分析 , 如果設計的網頁也是結構良好 , 會對網站排名有所助益。

本書前大半說明了 HTML5 產生的來龍去脈 , 和 HTML4 及 XHTML 不同點 , 也說明了新標籤的語意及該用在甚麼場合 , 後半段則說明了 與 HTML 5 搭配的 API , 如 Canvas , Web Storage , Drag & Drop , Web Socket 等等 , 我非常建議推薦給大家看 , 但如果是新手 , 則不推薦 , 因這本書是資深的網頁程式設計師集其過去設計經驗與遇到的問題寫成的一本應該算是心得書吧。

IE9 正式版即將在 3/14 正式推出 , 支援 HTML5 是新版最大的突破 , 目前有支援 HTML5 的瀏覽器有 Chrome , Safari 4, FireFox 4 

我的感覺是 , HTML5 已經非純 Web Art 或程式基礎不夠深的 Front Engineer 所能掌控的東西 , HTML5 帶來的不只新增加的標籤 , 也伴隨著一堆新的 API , 就如同 XHTML 伴隨著 DOM API 一樣 , 不要被 HTML5 中的 HTML 字眼所誤導了 , 真的 HTML5 是一個架構很大的新標準 , 杯中的水該倒掉了 , 要用新手的心態去看待 HTML5

想看看 HTML5 的一些範例 , 去 http://www.html5rocks.com/ 看看吧 , 用 chrome 就可以看了 , 這個網站不只有範例 , 還將 HTML5 的功能做了個分類並且有 code 可以看 http://playground.html5rocks.com/ , 如果有細看 , 絕對想不到 , 連 SQL 語法都有了 , 我開玩笑的叫我們一個資深的視覺設計師說 , 你可能要去巨將學一下資料庫概念才看的懂 ….. 這是真的 , 現在 HTML5 可以開一個資料庫在 Client 端 , 而且可以下 SQL 語法 , 而且還有 WebGL(IE9 目前不支援) , 看來想把網站 3D 化要去學甚麼叫向量矩陣了

相關的技術還有 WebWoker(類似多執行緒,IE9 目前也 不支援 ~) , WebSocket(可以進行Client/Server雙向通訊) , WebStorage 等等 , 很多新的概念是我們要去碰的 , 現在 iphone , android , ipad 等等因為其內建瀏覽器有支援 HTML5 , 所以都已經有一堆 HTML5 網站出現 , PC 端受限於瀏覽器仍被微軟 OS 市占率影響而尚未普及 , 但我相信 IE9 的出現 , 及 Win8 也流出消息將內建 IE9 , HTML5 在 PC 端開始普及應該時間就會落在明年

而早在之前 , Google 很賤的推出了一個叫 Google Chrome Frame 的東西 , 安裝這個東西 , 可以讓 IE6~IE8 支援 HTML5 , 其實這套軟體就是安裝了 Google 的瀏覽器引擎 , 讓 IE6~IE8 在網頁 Render 階段是以 Chrome 的引擎去生成 HTML5 網頁 , 當然啦 , 一般人不太可能去安裝 Google Chrome Frame

不過最近我又重新去看了一下 , Google Chrome Frame 網站 , 他有一頁 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started , 這一頁是教網頁設計師 , 塞入一些 code , 就可以讓 IE6~IE8 的瀏覽器瀏覽 HTML5 網站時 , 會提醒使用者安裝 Chrome Frame , 並且整個步驟都是在網頁中完成 , 有點類似 ADOBE Flash plugin 那樣的做法 , 這的確很賤 …. 如果觀念比較前衛的人可以試試看該做法

IE9 RC 版日前早已開放下載 , 預料正式版和 RC 版不會差很大 , 而目前所知 , Web3D , WebSQL , WebWorker 沒有支援 , 網路上也很多比較表 , IE9 應該是目前對 HTML5 支援度最差的瀏覽器 , 但即便如此 , 也不會影響到 HTML5 開始流行 , 回想過去 IE3 和 Netscape3 大戰 , IE 明明很爛 , 支援度很差 , 但因為普及率關係 , 所以一窩瘋的人仍然把 IE 當作網頁設計相容的第一優先 , 也就是說 , 未來的網頁設計師仍然會考量到各種瀏覽器的支援程度 , 設計出各種瀏覽器可以看的網站 , 所以和現在的模式沒甚麼不一樣 , 唯一不同的就是 , 這次帶來的改變會比以前大 , 技術躍進比 HTML4 ~ XHTML 還要大 , 幹這行的真辛苦 ~~

需求是這樣 , 以下 HTML CODE 要以 input 欄位內的值重新排序為一個新的 table

<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1">
  <tbody>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_99" value="99" /></td>
      <td>99</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_6" value="6" /></td>
      <td>6</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_9" value="9" /></td>
      <td>9</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_10" value="10" /></td>
      <td>10</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_4" value="4" /></td>
      <td>4</td>
    </tr>
    <tr>
      <td>
        <input name="textfield[]" type="text" id="textfield_1" value="1" /></td>
      <td>1</td>
    </tr>
    </tbody>
  </table>
</form>

這個問題從今早搞到晚上 , 看過了很多 jquery 範例 , 還有朋友建議用甚麼 jquery 的一個 plugin tablesorter …, 甚至自己想寫個泡沫排序法 >< … 搞老半天都不得我意

後來才發現 , 原來 javascript 本身就有個很好的 sort 可以用 , sort 可以用自定 function 的方式來寫 , 搭配簡單 jquery 就可以重新排序了

範例如下

<script>
 
$(function() {
	var mylist = $("table tbody tr").clone(true).get();
	mylist.sort(function(a,b){
		var compA = parseInt($(a).find('input[type="text"]').val());
		var compB = parseInt($(b).find('input[type="text"]').val());
		return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
	});
 
	$("table tbody tr").remove();
	$("table tbody").append($(mylist));
});
 
</script>

這原理也很簡單 , 先用 jquery 去 clone 所有 tr 節點為 mylist  , 然後 mylist. 為 DOM Elements , 並且可用 javascript 原生的排序含數 , 裡面的寫法就是自定函數 , 用 jqeury 去抓出 input 的值為 compA/compB 並且比對 compA/compB 的大小返回給 sort 就好了 …. 超簡單的

http://guacamole.sourceforge.net/

我的媽啊

HTML5 已經可以做到這樣了

用的技術就是 html5 + javascipt 而已 , 就可以做到 VNC 遠端桌面控制了

想必是有用到 WebSocket 的功能

甚麼是 Comet ?

自從 Facebook , Plurk 流行起來 , Comet 技術才被受到重視 , 之前曾經搜尋了 Google 上各種有關 Comet 的資訊 , 其實早在 5 年前(西元2005)我就實作過了 , 當時是在一家叫互動王視訊科技的公司做了個股票看盤系統 , 就是類似 Comet 的技術 , 我在該公司任職前 , 已經有了一個股票看盤系統 , 也是類似 Comet , 我去了是把原本前人寫的 Perl 版寫的完全改成 PHP 版的 , 因此 Google 上搜尋到有關 Comet 的 WIKI 說 2006 出現了第一個 Comet 應用 (http://en.wikipedia.org/wiki/Comet_%28programming%29#First_Comet_applications) , 原來 , 這東西我及互動王的前人早就做過了 , 哈 !

但可能有人對 Comet 還不太了解是甚麼 , 其實 Comet 並不是一種制式的協定 , 這是一種概念 , 就如同 AJAX 也是種概念 , Comet 主要用意是要讓 Browser 得到即時的資訊並且做到雙向互動 , 但我們都知道 , Web Browser 是要 Client 端主動要求某個網址 , Web Server 才會送資料來 , 即便是 AJAX 概念也是如此 , 那麼如何讓 Client 端不斷接收即時資料呢 ?

閱讀全文…

其實寫這篇是有感於過往的工作經驗的感想啦 , 每個專案總是在有一個好的發想之後 , 但在執行面上一定會遇到阻礙而讓專案的執行過程不順利 , 進而導致專案進度Delay 或與預期的結果有差異 , 更差的是會導致責任的歸咎而讓許多人死在結果論之下 , 但有果必有因 , 找出這個因我認為更重要 , 如果沒有找出真正的問題點去加以改善 , 那麼會不會扼殺好人 , 甚至劣幣驅逐良幣 ?

過去我只有待過一家公司有做好 P.D.C.A 這種簡單概念的管理方式 , 這種方式是一種不斷的循環檢討方式 , 直到問題解決 , 當初年紀小 , 不懂得這個 P.D.C.A 的精隨 , 現在回想起來 , 這種簡單概念如果認真的落實去做 , 其實可以讓個人到部門到企業都可以慢慢的健全起來

閱讀全文…