為什麼要用bootstrap開發?

為什麼Twitter bootstrap 這麼多人用呢? 那為什麼我們也一定要用它呢?

其實最大的原因是"跨平台相容性",在這個時代開發一個服務最重要的就是跨平台,從手機AndroidiOSWeb也都很講究使用者經驗一致性,加上豐富的Open資源與使用上非常便利與快速,這是我們選擇它的原因,如下

Web

Mobile

就以上面的範例來說其實程式碼只寫了一次,你說是不是可以省下不少開發時間呢?
再來一個服務的建立上,常常需要有好的網頁設計師能大大提升網站的使用者經驗,不過若沒有的時候怎麼辦?類似這種Open Framework 就可以解決很多這種問題,況且我們隨時想要用別的設計師設計好的Template 也是很方便的,以下這種網站就是國外專門在讓人可以買bootstrap template 的地方..

wrapbootstrap

那如果第一次使用這種Framework該怎麼入門呢?

1. 先download library

2. 去抓一個範例來用吧...

http://getbootstrap.com/getting-started/

我們就選一個Sign-in page來用吧,點進範例內...
http://getbootstrap.com/examples/signin/

3. 在網頁上按右鍵檢視網頁原始碼


存起來後就把它放到你的伺服器或者本端,然後記得要編輯css與javascript至正確的位置,接著你既可以嘗試改button大小及各種範例摟,就以Button來看您只要按照下圖方式改一點點程式碼就可以..

各位是不是覺得非常簡單呢?如果您想打造一個好看的網站UI,建議你可以好好考慮Bootstrap

我們的Likeboy台灣第一個粉絲團排名網站就是完全使用Bootstrap,然後根據我們的需求去調整Style,如果您喜歡也歡迎您用Chrome或其他開發者工具來檢視我們的css design喔...
http://likeboy.tw

簡單好用的HTML5 Chart

各位是不是經常都要使用圖表呢?

Likeboy今天就來介紹一個穩定的HTML5 OpenSource...

Likeboy的發展中一直很強調開發效率,因為我們一直都使用非常有限的資源來做最大的效益,而針對報表圖的部分.最早Likeboy使用了非常簡單的Google Chart,老實說Google 這個API還真的非常簡單好用呢!!

簡單來說只要參考Google一個範例與各式統計圖樣式就可以上手,因此開發者只要想辦法把你要的呈現的數據轉化成Google一樣的格式就好...

不過當你的網站流量成長的時候,Google Chart可能就不會是你最好的選擇,因為Google這幾年在API收費上下了不少功夫啊,很多時候雖然網站真正的流量不到那麼高!但是也是很多喜歡研究你網站的開發者會一直用程式讀取你的網站,因此往往你會因為超過Google的免費額度而花上了一些成本,也因為這樣的原因Likeboy踏上了尋找新的取代方案...

為什麼選擇Chart.js呢?

首先就是這個OpenSource已經非常穩定的版本了,就表示已經很少Bug了,另外網路上評價也不錯!除此之外手機上的呈現效能也是挺好的,這樣針對我們跨平台的服務來說,可以省去不少開發與測試時間....

它主要強打6種Chart,基本上這六種其實挺夠用了,就以Likeboy現在來說只用了Line Chart與Pie Chart兩種,當然大家好奇的是上手度對吧!其實跟Google Chart一樣,只要把範例下載下來後,根據Chart.js他所要的資料格式轉換,就可以用了...

使用步驟:

1.下載檔案且引用到你的網頁內

<script src="Chart.js"</script>

2.新增一個chart吧

html加上

<canvas id="myChart" width="400" height="400"></canvas>

javascript加上

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData);

根據上面的範例,其實你只要調整data:[]的數據就可以了,你可以自己動手條條看,你就會立刻發現圖改變了!

如果你不想要把把畫出圖的動畫關掉,你可以直接設定animation這個參數..

new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData,{animation:false});

3.完成...

各位是不是非常簡單呢?所以Likeboy就這樣簡單的產生了這些圖呢~~~

3.補充...

有時候大家可能需要在Pie上顯示文字,這時候官方沒有支援怎麼辦,沒關係Likeboy已經幫你找到解決方案了,因為有網友加上了label,所以可以參考下面參考連結喔...

既然這麼簡單,創業家或開發者,還不快去試試喔....

參考連結:
Chart.js官方網址:http://www.chartjs.org/
Likeboy 使用的Pie Chart是網友改良過的下載網址如下:
https://github.com/nnnick/Chart.js/pull/35
Google Chart官方網址https://developers.google.com/chart/