分類
好用軟體

Google的Page Speed網站效能調校建議

網站上線後, 需要做效能調校評估及建議, 可以使用這個 Google 的 Page Speed 效能調校建議工具:

https://developers.google.com/pagespeed/

將網址輸入後, 等待一會兒就會有資料出來, 以及許多建議讓您了解網頁效能的瓶頸所在及如何調整會更好.

測試結果如下:
分為紅色的 High priority, 黃色的 Medium priority, 藍色的 Low priority, 另外還會有灰色的 Experimental rules, 這些讓你來進行網頁的優化調整. 當然你已經做到的他是用綠色的 Already done! 來顯示.

這樣的工具其實還不少, 像是這個 Pingdom Tools 有相當視覺化的呈現方式, 把頁面上每個元素的下載狀況都秀出來, 方便找出頁面上的效能問題, 和 Google Page Speed 來比的話, 前者是細部下載狀況, 找出效能瓶頸, 而後者是全面性的, 給出調整建議, 交叉使用可以更容易地將網頁效能調整好.

繼續閱讀:
http://www.smashingapps.com/2012/02/14/15-excellent-tools-for-profiling-your-websites-speed.html

分類
Javascript

線上幸運抽獎(Lucky draw)

繼上次的線上賓果產生器( https://diary.tw/archives/1185 )後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: http://sample.diary.tw/lucky-draw/

一樣是使用 jQuery, 純 client 執行的程式, 不過這次多配合了 jQuery UI 中的 dialog, 以方便快速編輯 html 中的 select 物件.

工作方式很簡單, 第一動是先輸入流水號, 例如預設的 1~100, 按下產生後, 生成 1~100 號在抽獎名單中, 若有跳號或是不規則號, 都可以藉由雙擊抽獎名單的 select 元件進行編輯, 利用 textarea 進行編輯, 一行一項, 空行會自行避開, 自行貼入或編輯清單.

再來就是輸入獎項了, 一般應該是由小到大排(通常的抽獎順序啦), 當然也可以隨興輸入, 一樣雙擊獎項的 select 會跳出編輯的 dialog.

最後就是令人期待的抽獎了, 抽獎鈕按下時, 若在獎項有被選取的項目, 會先抽該項目的得獎者, 若沒有則從最上面的獎項開始抽起. 每次抽都會隨機排序抽獎名單中的號碼, 所以很隨機, 抽出來的獎項及得獎者會填入最下方的抽獎結果.

隨時都可以再加入獎項(直接再進行編輯即可), 例如加碼, 紅包等, 再繼續抽獎, 而最後的抽獎結果是可以雙擊跳出 dialog 中有 textarea 供複製出來應用, 不過是不能編輯的(才不會被修改), 這樣就完成了這個線上幸運抽獎.

其中編輯 select 及列出 select 內容的 function 是共用的, 都是將其 dblclick 呼叫 editSelect, 如下:

分類
Javascript

線上賓果產生器

今天花了一點時間寫個”線上賓果產生器”, 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.

這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:

Array.prototype.shuffle = function() {
  var s = [];
  while (this.length) s.push(this.splice(Math.random() * this.length, 1));
  while (s.length) this.push(s.pop());
  return this;
}

利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.

另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:

@media print
{
  .noprint {
    display: none;
        
  }
}

請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/

只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!

分類
好用軟體

TCPView工具新增功能查詢流量

新版 Windows SystInternal 工具 TCPView (3.05) , 除了原來的 process 對應的 connection status 外, 右側多增加了 4個欄位的資訊, Sent Packets, Sent Bytes, Rcvd Packets, Rcvd Bytes.

畫面如下:

如此一來, 對於在查詢 prcoess / connection / 流量上, 就有更完整的資訊可以取得了.

官方網址: http://technet.microsoft.com/en-us/sysinternals/bb897437
官方下載: http://download.sysinternals.com/Files/TCPView.zip

分類
Database

[MSSQL]文字民國日期轉西元日期

剛朋友問到有關存在 MSSQL 中的文字資料是民國日期, 例如 67/3/12 這樣的格式, 要轉出西元日期, 其實還蠻單純的, 只需要找出第一個 ‘/’ 在什麼位置, 就很容易了, 查找 ‘/’ 的函數使用 charindex, 如下:

declare @a varchar(20)
select @a = '67/6/7'
select charindex('/', @a)

這樣取出的值為 3, 也就是第 3個字元, 而下一步就是取出年的部份, 如下:

declare @a varchar(20)
select @a = '67/6/7'
select substring(@a, 1, charindex('/', @a)-1)

這樣取出的值為 67, 於是要轉出西元年其實就是先轉成 int 後, 加上 1911 再轉回字串後, 加回原來的月/日的部分, 如下:

declare @a varchar(20)
select @a = '67/6/7'
select convert(varchar, convert(int, substring(@a, 1, charindex('/', @a)-1))+1911)+ substring(@a, charindex('/', @a), 10)

其中最後一個 substring 中的取出長度 hardcode 寫 10 是一個小技巧, 不用真的算出取出長度, 而固定給一個大於此字串的長度, 就可以取出完整字串, 所以上面的結果就會是 1978/6/7, 而 substring 最後一個參數可以參考線上說明:

http://msdn.microsoft.com/en-us/library/ms187748.aspx

其中的 length_expression 參數的說明, 其中有提到

If the sum of start_expression and length_expression is greater than the number of characters in value_expression, the whole value expression beginning at start_expression is returned.

如此一來, 便可以一次在 sql command 中將原存在資料庫中的民國年日期轉出為西元年, 例如 table:

userid birthday
—————
1 67/3/12
2 79/2/11

語法如下:

select userid, birthday, convert(varchar, convert(int, substring(birthday, 1, charindex('/', birthday)-1))+1911)+ substring(birthday, charindex('/', birthday), 10) as birthday2 from table1

會取出:

userid birthday birthday2
————————
1 67/3/12 1978/3/12
2 79/2/11 1990/2/11

給大家參考!

2012年軟體開發關鍵報告

收到微軟的 EDM 有份資料適合 developer 來讀讀: http://msdn.microsoft.com/zh-tw/hh854948

這裡面有不少有意思的內容及現在的主流開發資訊, 隨著科技的進步, 使用電腦及 3C設備的多元化發展, 開發者必須去面對各式各樣的載具, 無論是傳統的 desktop pc, notebook, featured phone, smart phone, pad 等, 都是不同尺寸, 不同處理能力, 不同的網路條件, 都要能滿足的狀況下, 將應用程式來適應這樣複雜的環境及條件, 這對於設計者及開發者來說, 都是十分挑戰的.

還是一樣的, 好的使用者體驗, 需要配合載具的特性, 使用操作更容易而直覺, 才能有最佳的效益. 開發者需要了解這些載具不同特性, 找出一般性及差異性來收納功能, 並且強化操作, 達到理想的應用情境.

再來就是雲端的興起, 發展了近十年雲端, 在這兩年大紅大紫, 不外乎最後虛擬化的成熟及大環境的發展, 都到了雲端可以承載的條件, 使用雲端應用變成一種顯學. 學習雲端應用是開發者現在也需要積極去學習了解的, 發揮強大的雲端特性, 讓服務架構更穩固, 更強大, 更省錢, 是雲端的價值.

隨時保持學習的態度了解技術的發展及應用, 多方涉獵學習, 才是開發者要努力修行之道啊!

分類
Windows

iis7下的appcmd查詢reqeust

在沒有 appcmd 之前, 要像 apache 中的 server-status 中列出目前的 request url 只能利用 resource kit 的 request viewer, 不過在 iis7 中, 可以利用內建指令 appcmd 來查詢.

appcmd 有許多功能, 不過今天介紹的是查詢目前的 request, 先來看看說明文件:

http://technet.microsoft.com/zh-tw/library/cc772200%28v=ws.10%29.aspx

在 appcmd下, 有許多物件可供應用, 其中今天要介紹的就是 request, 不過可以操作的指令只有一個, 就是 list, 想查詢對該物件可用指令可以這樣下(以 site 為例):

>appcmd site /?
管理虛擬站台

APPCMD (command) SITE <identifier> <-parameter1:value1 …>

支援的命令:

list 列出虛擬站台
set 設定虛擬站台
add 新增虛擬站台
delete 刪除虛擬站台
start 啟動虛擬站台
stop 停止虛擬站台

(請使用 /? 取得每個命令的說明,例如 ‘appcmd.exe add site /?’。)

可以使用 list, set … 等多種操作指令, 而查詢目前的 request 則使用:

>appcmd list request
REQUEST “1400000080019834” (url:GET /xxx/xxxxx, time:1047344 msec, client:xxx.xxx.xxx.xxx, stage:SendResponse, module:IIS Web Core)
REQUEST “e20000438002e1fc” (url:GET /xxx/xxxxxx, time:71625 msec, client:xxx.xxx.xxx.xxx, stage:SendResponse, module:IIS Web Core)
….

可以很清楚地看到每個 request 的資訊, 包含 ip 及 url 及目前的狀態, 十分有用.

分類
好用軟體

PowerPoint Viewer

power point 是很常用的一個簡報檔案格式, 雖然說大部份的電腦都可能有安裝 office 軟體可以用來編輯和播放 power point 檔案, 但若是臨時需要播放, 而電腦又沒有安裝 power point 時, 這個 power pointer viewer 就可以幫上忙了, 而且完成免費.

官方下載網址: http://www.microsoft.com/downloads/zh-tw/details.aspx?familyid=cb9bf144-1076-4615-9951-294eeb832823&displaylang=zh-tw

可以播放目前最新的 power point 檔, 也有對應的播放特效功能.

若不想安裝, 可以連線上網的狀況下, 也可以使用微軟的線上文件服務來進行播放:
https://skydrive.live.com/

或是 google 的線上文件播放: https://docs.google.com/

不過都是需要先上傳到這些文件服務上才能進行播放!

分類
好用軟體

線上製作html5動畫-Mugeda

隨著 html5 的發展, 這個可以在線上製作 html5 的動畫工具, 可以讓大家在製作簡單動畫上有更容易的方式, 網址: https://www.mugeda.com/

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

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

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

分類
Javascript

好用JSON Editor

在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas – http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.

說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html

以之前文章 https://diary.tw/archives/285 的資料為例:

{ 'obj1': {
  'child1':'value1',
  'child2':'value2'
  },
  'array1': [1, 2, 3, 4, 5]
};

將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:

這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:

這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!