My Program ::

神奇的線上數學解題II

WebTrend 2012/05/15 20:22

views: 1440 times
之前介紹過一款: http://diary.tw/tim/670

這次這個 wolframalpha 更好用, 更有趣, 網址如下: http://www.wolframalpha.com/

基本上, 輸入後, 會有美美的求解結果, 很有意思, 而且很實用, 例如以下方程式:

3x+y=4
4x-y=3

輸入 wolframalpha 後得:

http://www.wolframalpha.com/input/?i=3x%2By%3D4%2C+4x-y%3D3

畫面如下:

不僅僅是把解求出來, 還有一步一步的算式, 以及對應的方程式圖, 再來試看看其他的:

3x^3+2x^2-7x+2=0

解答如下: http://www.wolframalpha.com/input/?i=3x^3%2B2x^2-7x%2B2%3D0

真的是太好用了呢!

另外像是語意分析的查詢也很有用:

3 months ago:

http://www.wolframalpha.com/input/?i=3+months+ago

真是一堆應用啊, 其實這就是大名鼎鼎的 siri 後面用的查詢引擎呢, 很強大!

突然想到, 在唸書時有用到一套軟體叫 Mathematica, 就是這家公司 Wolfram 出品的呢: http://www.wolfram.com/mathematica/

TAG mathematics, search, wolfram alpha

Trackback 0 : Comment 0

Trackback Address :: http://diary.tw/tim/trackback/996

Masonry自動排版介面與InfiniteScroll無限捲動介面

程式技術/Javascript 2012/05/09 15:57

views: 5963 times
Masonry 和 InfiniteScroll 都是 jQuery 上的 plugin!

Masonry 是利用 css 方式, 將介面重新排版, 使得畫面不會因為不規則區塊排起來而不好看, 可以看一下 Masonry 官網上的說一看就知道這樣的排版方式的感覺:

http://masonry.desandro.com/

而 InfiniteScroll 則是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 facebook 動態牆, 就是這樣的應用情境. 官方網站:

http://www.infinite-scroll.com/

這兩個功能結合就變成了這樣: http://sample.diary.tw/flickrsearch/?q=rainbow (利用了 flickr api 與 Masonry 和 InfiniteScroll 做出的效果. (記得要向下捲動, 才會出現看完了繼續產出內容的效果), 其中後面的 q 可以自行替代其他的英文單字, 因為對該文字沒有特別處理, 所以只能使用一個英文單字.

來看看怎麼做這個效果吧.

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, 所以最小的程式碼是這樣:

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({
 
    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });

就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 分別為 navSelector, 這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容, 而要 load 的內容, 就是 nextSelector 的物件中的 url, 至於第三個參數 itemSelector 則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目.

以上面的例子來看, 網頁的介面會是如下:

//....
<div id='content'>
  <div class='post'>
//.... post content
  </div>
</div>
//... other footer
<div class='navigation'><a href='page-2.htm'></a></div>
//...

這樣一來, 當本頁被瀏覽最下面的 <div class='navigation'> 時, 就會被觸發去 load page-2.htm 中的內容,並找出 <div class='post'>...</div> 將內容放到 <div id='content'>..</div> 中最後一個 post, 如此重覆下去, 就會有往下捲而一直往後看的內容, 記得每頁下面都要放對應的下一頁, 就會被 infinitescroll 偵測到, 並往下疊代下去.

再來看看 Masonry 的效果, 用法也很單純, 最小程式碼如下:

$('#container').masonry({
  itemSelector: '.box'
});

只需要指定要排版的容器 container, 呼叫 masonry 傳入 itemSelector 就是內容元素, 就可以自動排版, 多種效果可以參考官方網站的 demo.

比較特別的是兩者結合的這個 demo: http://masonry.desandro.com/demos/infinite-scroll.html , 參考這個 demo 可以做出又達成自動排版, 又達成無限捲動的功能, 效果就參考上面的 sample: http://sample.diary.tw/flickrsearch/?q=rainbow

幾個點要注意:
1. navSelector 一定是要找最下面的物件, 效果才會好, 記得.
2. 若是排版內容有圖, 可以參考 Masonry 的 sample: http://masonry.desandro.com/demos/images.html 將排版呼叫寫在 container 的 imagesLoaded 事件後, 如下:

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});

才不會有位置算不準的狀況.
3. 若要有動畫排版效果, 可以在 Masonry 參數中多加上 isAnimated: true;
4. 排版若要美觀, 要盡量統一內容物寬度, 就不會排得2266 (可以利用 css 自行安排)
5. InfiniteScroll 的 loading 的 css 是 #infscr-loading 這個, 可自行設計.

忘了說, 這次 sample 使用的 flickr api 是 photo search: http://www.flickr.com/services/api/flickr.photos.search.html

這種 layout 流行和 fb 及最近火紅的 pinterest 網站可能有很大的關係呢.

TAG infinitescroll, jQuery, layout, masonry, pinterest, plugin

Trackback 0 : Comment 0

Trackback Address :: http://diary.tw/tim/trackback/994

Google Drive現身-與其他雲端空間介紹

WebTrend 2012/04/25 08:27

views: 14503 times
之前新聞很多, 一直傳即將上線的消息, 於今天凌晨上線了:

https://drive.google.com/

這個 Google Drive 提供了免費的 5GB 空間可供應用, 重點在於有多樣化的客戶端軟體, 可以同時支援 PC (Windows), MAC, Android, iPhone & iPad (稍後推出) 的多種客戶端, 並進行檔案同步.

登入後並啟用後, 發現原來在 Google Docs 中的資料都轉進來了, 所以也整合了原本 Google Docs 的功能, 試著上傳非 Google Docs 的檔案, 像是影音檔, 並不支援線上播放, 只能進行下載, 另外像是分享的功能, 是以協同作業為出發的設計, 像是之前的 Dropbox.com 的方式, 當然, 也是原本 Google Docs 的共用方式, 必須是有帳號設定的狀況下, 可以進行檔案共用.

反觀新版本的 Dropbox.com 最近也提供了直接分享的功能, 不需要也是 Dropbox.com 的用戶才能進行共用, 只需要有一個該檔案的共用連結就可以進行下載了(介紹 Link).

這個功能是 Box.net 原來就有的, 也就是 Box.net 除了共用機制外, 原本就提供了直接分享的功能, 看起來是更完整的功能, 再加上 Dropbox.com 及 Box.net 對於影音檔的提供了線上播放功能, 強化了影音檔的應用能力. 不過 Dropbox.com及 Box.net 沒有提供 Document 的編輯功能, Dropbox.com 是只下載, Box.net 則是會利用啟用 Google Docs 的功能來進行編輯(需要使用 Google Account 驗證).

看起來是各有其優缺點, 不過 Dropbox.com 及 Box.net 的客戶端一樣都有多樣的客戶端同步軟體, 加上空間又提供的相對於 Google Drive 大得多, (應該是說增加空間的活動多, 例如推薦用戶或完成任務), 這個雲端硬碟之戰, 煙硝味很重呢.

台灣也有中華電信提供的個人雲服務(http://www.hamicloud.net/), 其中也有雲端硬碟的空間, 也整合了之前的 Xuite WebHD (原本的線上空間)進來, 也十分積極.

大家可以多應用比較看看, 不過一句老話, 重要資料還是要自行備份, 有時候線上的空間並不保證 100% 都可以用, 方便是一定的, 但備份還是自己要做好呢!

TAG cloud, drive, dropbox, Google, on line, storage

Trackback 0 : Comment 0

Trackback Address :: http://diary.tw/tim/trackback/993

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

好用軟體 2012/03/27 15:37

views: 33405 times
網站上線後, 需要做效能調校評估及建議, 可以使用這個 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

TAG Google, page speed, performance, Web

Trackback 0 : Comment 0

Trackback Address :: http://diary.tw/tim/trackback/992

線上幸運抽獎(Lucky draw)

程式技術/Javascript 2012/03/20 12:10

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

網址: 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, 如下:

more..