2014年12月29日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-11-time.html

摘要:
我們都知道在 javascript 裏頭可以抓取電腦的當下的時間 (new date()),或是在裏頭設定某個時間,但如果要把產生的時間進行格式化,常常要耗費不少字串處理的時間,在 d3.js 裏頭,有提供不少的時間格式的 API ,讓我們可以輕鬆的產生我們所需要的格式。

2014年12月27日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-10-colors-2.html

摘要:
上一篇 我們探討了 d3.js 裏頭色彩的定義與 API 操作方式,其實對於色彩,d3.js 還有不少應用的方法,也因此在官網所介紹的範例,才會如此的色彩豐富生動多姿,因此,這篇將繼續介紹色彩的應用,主要是利用之前介紹過的 scale 來變化色彩,很神奇吧!scale 要怎麼定義色彩?就讓我們繼續看下去吧~ 介紹之前,來回顧一下 scale 的用法,之前介紹過兩種用法,分別是 linear 和 ordinal ( 當然還有其他的,不過最常用的就這兩種 ),而 d3.js 的色彩同樣也可以使用這兩種 API 來進行定義,首先來看看 linear 該如何使用。

2014年12月26日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-09-colors-1.html

摘要:
在網頁的世界裡,色彩是非常重要的,通常我們在寫網頁的色彩,不外乎就是用十六進制 ( #f00、#fff )、顏色名稱 ( red、yellow ) 或 rgba ( rgba(0,0,0,0) ),而在 d3.js 裡,同樣也有操作顏色的 API,有別於一般我們在寫 CSS 的顏色方式,d3.js 是使用 RGB ( 紅綠藍 )、HSL (色調、飽和度,亮度) 、HCL 與 LAB ( 亮度,a 維度,b 維度 ) 的這些色彩空間,對於這些色彩空間不了解的,可以參考 維基百科色彩空間。

2014年12月23日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-08-ordinal.html

摘要:
之前我在 SVG D3.js - 定義比例 ( scale.linear() ) 有介紹過比例尺的用法,當中有提到 ordinal,ordinal 與 linear 最大的差別,可以不一定要使用數字,可以使用非定量的值作為比例尺 ( 序數:非定量的值依序排列 ),因為可以使用非數字的值,畫出來的座標,也就更能朝理想的座標長相邁進了。

2014年12月17日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-07-data-map.html

摘要:
d3.map 這個其實我找不到合適的翻譯,只好暫時用我的破英文翻譯成「陣列數據地圖」,雖然有地圖兩個字,但跟實際的地圖卻是沒啥關聯性,主要是利用 d3.map 的 API,可以幫助我們把一連串的數據做轉換,與之前提過的巢狀數據處理 ( SVG D3.js - 巢狀數據結構 ( d3.nest ) ) 有異曲同工之妙,d3.map 會根據我們所下的條件,把特定的值取出成為 key 而成為一個新的陣列,也可藉由 get、has 或 set 的 API 對數據做判斷或重新設定,在許多的 D3.js 圖形與數據的處理中,d3.map 都扮演了相當中要的腳色。

2014年12月14日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/doublegreen-draw2.html

摘要:
同樣也是在遠綠資訊的時候畫的,比之前的大張一點的,也有一些點陣與向量的圖形 ( 點陣圖是一直以來我愛的風格,當兵的時候畫了很多 ),原本想順著這個線條插畫系列,看看能不能畫出一本插畫集,不過明年再說吧!因為想學的程式學不完呀!

2014年12月12日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/doublegreen-draw1.html

摘要:
在 2010 年結束中研院的生活,剛回高雄,在一家專門做人資系統 ( eHR ) 與 EIP 系統的公司「遠綠資訊」服務了兩年,說真的還滿感謝遠綠資訊對我的栽培,不僅讓我學了不少網頁的技術,也能把一些插畫運用在工作上,造就了現在努力紮紮實實學習的我,這裡分享一些當年所畫的簡單插畫,如果有「人資系統」或 「teamwork」、「EIP」 服務規劃的,也歡迎找敝人的前前公司 遠綠資訊,最近他們也在推雲端服務 SmoothCloud,相信一定能有所收穫。( 變成廣告文了哈~ )

2014年12月11日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/css-boxsizing-backgroundclip.html

摘要:
過去在學習 CSS 的時候,首要任務就是要理解「box model」,因為 box model 是 CSS 裏頭很重要的模型概念,描述了 padding、margin、border 與 content 的空間定位 ( 參考 W3C Box model ),雖然 CSS 是我吃飯的工具,但今天的專案竟然卡在一個簡單的小問題,因此就用一篇文章做個紀錄提醒自己不要忘記,也避免之後遭遇到又會卡住了。( 下圖就是 CSS 的 box model )

2014年12月8日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/design-qrcode.html

摘要:
一直以來,我們對於 QR Code 的印象,就是那個黑色一點一點的小正方形,裏頭到底有些什麼東西,總是要經過手機掃描才可以真正了解,因此,這篇將會介紹四種設計個性化 QR Code 的方法,相信藉由這四種方式的互相搭配,大家都可以輕鬆地設計出個性化的 QR Code,再也不會是黑黑的一塊正方形,也不需要花錢去購買線上設計軟體了。

2014年12月6日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/svg-d3-06-data-nest.html

摘要:
之前在 SVG D3.js - 淺談 D3.js 的資料處理 提過基本的數據處理方法,這陣子又研究了一下 d3.js 的 nest,這篇就來介紹一下這個很有意思的數據處理方法:d3.nest。 nest 就是「巢」的意思 ( 不是潮喔~ 雖然 d3.js 好像有點潮 ),透過 d3.nest 的轉換,可以將原本的數據變成以 key 和 value 為主的巢狀結構,並且可以針對巢狀結構的每個節點進行排序,而所得到的巢狀結構數據,可以在程式裡重複使用而不會影響到原本的數據。

2014年12月3日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/css-click-loading.html

摘要:
由於自己公司產品裏頭,有個按鈕在點擊之後,會有一兩秒的等待時間 ( 寄認證信 ),因此為了避免點擊後一兩秒的載入時間空窗,就做個 loading 動畫來強化使用者體驗,原本想說直接用張 gif 來解決,但又想藉著這個機會練功,就使用了 CSS 的漸層效果來達成,沒想到效果還滿好的,而且不需要額外增加 div 之類的元素,單純修改 CSS 和加上點擊事件就完成了。

2014年12月1日

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章:
http://www.oxxostudio.tw/articles/201412/site-search.html

摘要:
這篇文章來分享一下自己部落格使用的兩種站內搜尋方式,第一種是利用 google 的「自訂搜尋」,就可以做出利用 google 進行全站搜尋的超強大功能,第二種則是單純使用一行 CSS 和一點點的 jQuery,就可以實現純前端的單頁內容搜尋,我也將這種方法應用在 list 頁面 進行標題的快速查找,兩種搜尋功能互相搭配,部落格的功能總算是完備了。