分類
Windows

安裝Windows8到VM裡

昨天晚上試看看把 Windows 8正式安裝到VM裡來試看看, (之前有將 Windows 8 Preview 版裝在實機中過), 也測看看安裝的時間, 在 i5 的機器上, 大約只花了不到15分鐘的時間就裝好了.

首先是那個爭議很大的GUI, 不過看起來應該真的還蠻適合 touch screen, 只是在 VM 中沒有 touch, 所以沒得體驗這個部分, 用滑鼠也是可以操作的.

再來就是測試 desktop (也就是傳統桌面), 這個部分還不錯, 和之前 Windows 7 起的變化沒有那麼大, 把桌面上的我的電腦, 控制台等 icon 加回來後, 就和原來的 windows 差不多了.

繼續玩那個 GUI, 發現其實還不錯, 不過真的需要一些時間適應, 也上了市集下載了一些 APP 玩看看, 蠻有意思的.

微軟這次的大改版, 真的是破釜沈舟, 不過目前看起來還沒有太大的戰績, 或許也是和大家的認知想法有蠻大的落差, 再加上其實 touch 的部分已經被 apple 及 android 玩得很大很久了, 大家的使用者體驗都有了基本的想法, 短時間內應該很難趕上, 不過也希望微軟在這個部分的戰場能多加油啦!

分類
懶得分類

中華電信提供3G轉Wi-Fi服務

今天的新聞: http://www.appledaily.com.tw/appledaily/article/headline/20121120/34652406

這個技術本身沒有太多問題, 也是很好的配套措施, 只不過問題是沒有 Wi-Fi 的地方怎麼用, 人家之所以買3G就是希望能有更好的覆蓋率, 而不是要用Wi-Fi不是嗎? 再反過來看, 是不是轉了Wi-Fi之後就會順呢? 大家一起上到那個Wi-Fi的熱點(AP), 說不定也是塞在那個AP上啊, 會不會比較快也很難說.

結論仍是3G吃到飽, 吃不飽… 呃…

分類
懶得分類

3G吃到飽, 吃不飽

最近吵很兇的吃到飽應要取消的新聞, 其實有意思的地方就是最終會取消的這件事, 取消就取消, 反正正常用量也不可能大到哪裡去.

但之所以會吵得如此熱烈, 主要應該是在使用者對於電信業者的品質滿意度不夠, 思考一下, 原本辦吃到飽的人, 可能一方面是擔心用過量而繳太多錢, 另一方面可能有人覺得可以替代固網, 就直接用吃到飽的方案, 回頭先想一下, 目前的電信網路品質如何, 才會生出目前這樣很妙的狀況.

因為品質不好, 吃到飽根本吃不飽, 怎麼還要取消呢? 所以應該是有效改善品質, 提高傳輸量的價差, 用者付費的觀念我相信大家都有, 何不有效地制定價格方案是隨著用量來調整的方式更好呢?

但到底用得愈多, 折扣要給得愈多還是用得愈多也不給折扣呢? 這個其實就得看是否鼓勵用量. 不過總量用的愈多得付費付得愈多是個大準則, 這樣就自然而然的不會有過大的使用量, 而用量大的使用者自然多繳一點錢, 相信電信業者也不會不接受, 這樣一來一往, 或許可以平衡一點.

但要記得重點是品質很重要, 到底是少數使用者用量過大而造成的品質下降, 還是基礎建設造成品質下降, 目前的聲音或許是因為後者而興起的浪潮吧! 但吃到飽的費用也是要檢討才是, 不然買吃到飽的用戶, 當然會想多用一點, 但品質又不好, 自然抱怨連連. 所以提高吃到飽的費率, 而以量計價的方案精算多一點, 或許能有效改善.

其實目前電信業者的許多方案也就是如此了, 非吃到飽的套餐, 都有設收費上限的門檻, 某種程度來說也就是吃到飽的費率在該門檻上, 也就是仍有吃到飽, 只是費率較高, 自然不是吃不吃到飽的取消不取消的問題啦!

所以整個歸納起來導火線就是電信業者自己要擴張用戶使用上網而提出的低價吃到飽方案害慘了自己吧!

分類
懶得分類

免費試用Windows Azure的雲端服務

微軟的雲端服務 Windows Azure 目前有免費試用的版本, 方便給在學習及測試階段的開發者們一個好用方便的服務.

入口: http://www.windowsazure.com/

進來之後, 可以直接在線上申請試用 3個月免費, 點下[免費試用], 免費的內容如下:

  • 計算 / 每個月 750 小時的小型計算時數
  • 網站 / 10 個網站
  • 行動服務 / 10 個行動服務
  • 關聯式資料庫 / 1 個 SQL 資料庫
  • SQL Reporting / 每個月 100 小時
  • 儲存體 / 35 GB 及 50,000,000 個儲存體交易
  • 頻寬 / 無限制輸入及 25 GB 輸出
  • CDN / 20 GB 輸出及 500,000 個交易
  • 快取 / 128 MB
  • Service Bus / 1,500 個轉送時數及 500,000 則訊息

登入 windows account 之後, 會需要輸入電話號碼(用來收開通簡訊)及信用卡驗證身份(避免濫用)後, 就可以順利開通了.

接下來就是使用這個 3個用的免費服務, 最快的方式是直接建立網站功能(即website), 免費內容可以建立10個網站, 所以就來新增一個網站看看, 從 Web Sites 內容下方, 按下 [+NEW] 後就可以新增一個網站, 接下來會有三個選項:

  1. QUICK CREATE
  2. CREATE WITH DATABASE
  3. FROM GALLERY

為能快速就有個網站可以試玩看看, 我們來選 3. FROM GALLERY, 就可以利用架站的套件直接裝好來用, 如 Drupal, WordPress, Joomla, Mediawiki 等.

來裝個 Drupal 試看看, 選擇後, 需要輸入資訊畫面如下:

第一個 url 就需要輸入一個唯一網址, 然後建立一個新的MySQL資料庫, 選擇地區後, 按下一步, 輸入完成資料庫相關資訊後, 回到 Web Sites的管理介面, Windows Azure 會開始部署, 等一下下後, 就會出現部署完成的資訊, 並該 web site 的狀態為 running , 點下自訂的 url 後, 會進入設定安裝 drupal 的畫面如下:

接下來就很單純啦, 一步一步就可以完成這個 drupal 的安裝. 真的很快很方便, 而且馬上就可以用了呢!

目前裝好了兩個測試的 web site, 一個是 wordpress: http://mypress.azurewebsites.net/ , 另一個就是 drupal: http://dp7.azurewebsites.net/ 還真的蠻方便的.

接下來也可以自行試看看用之前的 QUICK CREATE 來建立一個空的網站, 建好之後, 進到管理介面中的 configuration 可以看到預設的 .net framework version 是 4.5, php 是 5.3 的版本.

另外若需要用 ftp 管理, 要到 Dash board 中, 點右邊的 setup git publishing, 也就是 git publishing 和 ftp 都用一樣的帳號密碼, 詳情可以參考這篇:

http://blog.syntaxc4.net/post/2012/09/13/enabling-php-5-4-in-windows-azure-web-sites.aspx

這樣就可以利用 ftp 來進行檔案的上傳及管理了. 由於站台是可以執行 asp.net 及 php, 筆者也上傳了 asp 的檔案測試, 也是可以執行的, 有興趣的朋友們可以試看看這個 Windows Azure 提供的免費 3個月試用服務.

若是用量(QUOTA)超過, 預設是不會扣款, 只是服務會暫停, 測試的網站應該不太會這麼快就用完吧, 好好試用看看吧!

若是網站要自訂網域, 則必須在 SCALE 那裡將模式由 free 設為 shared 或 reserved 才行, 可以參考這篇: http://www.windowsazure.com/en-us/develop/net/common-tasks/custom-dns-web-site/

3種程式支援 sample:
php: http://w3.azurewebsites.net/1.php
asp: http://w3.azurewebsites.net/1.asp
aspx: http://w3.azurewebsites.net/1.aspx

快試看看吧!

分類
Database

資料庫整筆ROW比對

在資料庫操作時, 有時會需要比對資料表的內容是否一致, 或是某些資料的某些欄位是否一樣, 若是使用 SQL 指令來逐行比對, 會是個比較麻煩的操作方式, 使用 CHECKSUM 函數, 可以方便地將待比對的資料(多欄亦可), 計算出 hash index (int)後, 再進行比對, 舉例如下:

兩個 table 資料:

table TBL_TMP1
fno fdata fcreatetime
1 ‘data 1’ ‘2012/1/1’
2 ‘data 2’ ‘2012/2/3’
3 ‘data 3’ ‘2012/2/4’
4 ‘data 4’ ‘2012/4/1’

table TBL_TMP2
fno fdata fcreatetime
1 ‘data 001’ ‘2012/1/1’
2 ‘data 2’ ‘2012/2/12’
3 ‘data 3’ ‘2012/2/4’
4 ‘data 4’ ‘2012/4/1’

若要找出資料不同的資料列, 可以使用如下指令:

SELECT * FROM
(SELECT *, CHECKSUM(*) AS CHK FROM TBL_TMP1) a INNER JOIN
(SELECT *, CHECKSUM(*) AS CHK FROM TBL_TMP2) b
ON a.fno = b.fno AND a.CHK != b.CHK

其中用了 CHECKSUM(*) 是將 table 中的各欄位合併起來計算 hash index, 再將兩個 table 含有 hash index (欄位名 CHK)拿來比對, 列出不同的資料, 結果如下:
1 data 1 2012-01-01 00:00:00.000 803471792 1 data 001 2012-01-01 00:00:00.000 1877235137
2 data 2 2012-02-03 00:00:00.000 266601110 2 data 2 2012-02-12 00:00:00.000 266601103

是很方便的工具函數.

附上建立上面 sample code 的 create table 及 insert data 指令:

CREATE TABLE TBL_TMP2 (fno int, fdata varchar(20), fcreatetime datetime)

INSERT INTO TBL_TMP1 values (1, 'data 1', '2012/1/1')
INSERT INTO TBL_TMP1 values (2, 'data 2', '2012/2/3')
INSERT INTO TBL_TMP1 values (3, 'data 3', '2012/2/4')
INSERT INTO TBL_TMP1 values (4, 'data 4', '2012/4/1')

INSERT INTO TBL_TMP2 values (1, 'data 001', '2012/1/1')
INSERT INTO TBL_TMP2 values (2, 'data 2', '2012/2/12')
INSERT INTO TBL_TMP2 values (3, 'data 3', '2012/2/4')
INSERT INTO TBL_TMP2 values (4, 'data 4', '2012/4/1')

大家可以試看看, 若是只要比對前兩欄, 則指令如下:

SELECT * FROM
(SELECT *, CHECKSUM(fno, fdata) AS CHK FROM TBL_TMP1) a INNER JOIN
(SELECT *, CHECKSUM(fno, fdata) AS CHK FROM TBL_TMP2) b
ON a.fno = b.fno AND a.CHK != b.CHK

結果如下, 就是只有第一筆資料的前兩欄不同而已:
1 data 1 2012-01-01 00:00:00.000 -1291957785 1 data 001 2012-01-01 00:00:00.000 -1493283680
如同我們想要的結果一樣. 這樣一來可以方便活用這個 CHECKSUM 函數, 十分方便好用!

相關資料:
http://msdn.microsoft.com/en-us/library/ms189788.aspx

資料上寫到是 SQL Server 2005 以上版本可用, 不過其實在 SQL Server 2000 也有這個指令:
http://msdn.microsoft.com/en-us/library/aa258245%28v=sql.80%29.aspx

分類
Javascript 懶得分類

強大的HTML5離線作業

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

分類
好用軟體

Gmail線上輸入法

這個是 Gmail 的新功能, 可以在寫信時”線上輸入”多國語言, 簡單地說, 就是把輸入法建在 web 介面上, 直接做輸入工具, 方便在沒有對應語言輸入工具的環境下, 可以輸入對應的語言.

如何啟用呢? 登入 Gmail 後, 從[設定](就是右上的齒輸符號), [設定], [一般設定], 最上面的[語言], 後面有個”顯示所有語言選項”, 然後將”啟用輸入工具”打勾, 再自行選取要使用的工具即可, 記得要儲存設定, 再來到撰寫信件時, 會看到右上的齒輸旁邊出現了輸入法的功能區, 如下:

接下來就是使用它囉, 更詳細的介面可以參考官方網頁: http://gmailblog.blogspot.tw/2012/10/communicate-more-easily-across.html

真的還蠻有意思的, Google 在 Gmail 裡很貼心的設定了這個功能, 在沒有安裝輸入法的狀況下, 使用線上輸入法, 還真的很方便!

分類
Blog服務

從Google Reader API中獲得RSS Cache的資料

相信很多人有用過 Google Reader, 其中有趣的地方, 是今天要介紹的 Google Reader API 中, 把 RSS Cache 的資料讀出來的部分, 先來參考一下文件:

http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI

其實很容易使用的, 例如:

http://www.google.com/reader/atom/feed/https://diary.tw/tim/rss?n=20
(需要 Google Account 登入)

就可以取得 https://diary.tw/tim/rss 下的資料, 什麼樣的應用情境呢? 例如某網誌的 RSS 只有提供 20 篇最新的資料, 但需要取得舊的資料(當然前提是有其他人在 Google Reader 中訂閱過才行, 也就是 Google Reader 有 cache 過它的 RSS 資料的狀況下), 就可以使用這個 API 了.

又或是原始的網站找不到了, 但在 RSS 中有資料, 就可以利用 RSS Cache 的資料來將原本的網站資料找出來.

使用方式就是上面的說明, 而要換頁的方式, 是使用 more token 的方式, 在 response 的內容中, 會有個 gr:continuation, 這個 tag 就是再下一頁的內容使用, 使用方式是用 c 參數, 如下:

http://www.google.com/reader/atom/feed/https://diary.tw/tim/rss?c=CLK9-LPAya0C

該 token 會依實際狀況改變, 請自行調整. 這樣就可以一直翻頁下去, 直到沒有 gr:continuation tag 時就是沒有更多的最後回應了.

[2012/9/14 18:24]
這裡有 Google Reader API 的資料可供參考:
http://blog.martindoms.com/2009/10/16/using-the-google-reader-api-part-2/

分類
Javascript

半浮動DIV區域 part2

才寫了”半浮動DIV區域”這個文章 (link), 又發現還有另一種應用情境, 就是捲到下面, 若半浮動區域的底部觸到了 footer , 則要順勢往上, 不再固定.

參考應用如: http://www.yinshiweb.com/ 右側的側欄.

先來看看原始的長相, 一樣是上面 top, 中間 main, 並含有 content 及 flow_div 兩個區域, 還有最下方的 footer. 不含捲動的狀況如: http://sample.diary.tw/29/o.htm

接下來要加上程式碼, 原來的半浮動DIV區域, 只需要用 CSS 配合捲動 event 就可以達成, 但若在浮動區域觸底時, 要跟著捲動上去, 就必須將該 absolute css 的 top 位置用 footer 的 top 減去 flow_div 的高度才行, 不過這個值是動態的, 所以就只能在 runtime 時, 用 jQuery 的 css 屬性來給定, 先看浮動及跟著捲的兩個狀態配合的 css:

.fixed{
    position:fixed;
    top:0px;
}
.absolute{
    position: absolute;
    /*top: should be top2 value, modified by jQuery*/
}

其中的 absolute 的 top 得由後面的程式來給定及移除, javascript 如下:

$(document).ready(function(){
    // calculate the original top
    var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));
    var top2 = $('#footer').offset().top - $('#flow_div').height();     
    
    $(window).scroll(function (event){
        var y = $(this).scrollTop();
        if(y>=top){
            if(y<top2){
                // state 3.
                $('#flow_div').addClass('fixed');
                $('#flow_div').removeClass('absolute');
                $('#flow_div').css('top', '0px');
            }else{
                // state 2.
                $('#flow_div').removeClass('fixed');
                $('#flow_div').addClass('absolute');
                $('#flow_div').css('top', top2 + 'px');
            }
        }else{
            // state 1.
            $('#flow_div').removeClass('fixed');
            $('#flow_div').removeClass('absolute');
            $('#flow_div').css('top', '0px');
        }
    });    
});

一樣要先算出 top 及 top2 兩個值, 然後在 scroll event 中判斷三種狀況,
state 1. 原始狀態, 還沒捲到 flow_div
state 2. 捲到 flow_div 了, 但底部還未頂到 footer
state 3. 捲到 flow_div 底部頂到 footer 了

完成的結果請參考: http://sample.diary.tw/29/2.htm

分類
Javascript

半浮動DIV區域

一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.

其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.

除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.

程式的實作方式利用 jQuery 來進行, 先看程式碼:

$(document).ready(function(){
    // calculate the original top
    var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));    
    $(window).scroll(function (event){
        var y = $(this).scrollTop();
        if(y>=top){
            $('#flow_div').addClass('fixed');
        }else{
            $('#flow_div').removeClass('fixed');
        }
    });
});

在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.

其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.

很有意思的一個排版特效.

範例頁: http://sample.diary.tw/29/1.htm