臺灣博碩士論文加值系統

履歷是個高資訊量的載體，對於舊式的履歷來說，閱讀者很難在短時間內看出個人差異，也缺乏記憶性。本創作《Pinfo》為視覺化履歷網站的創作，將設計好的圖像、資訊圖表，藉由CSS、JavaScript與HTML、MySQL的技術，架構出互動式的視覺化履歷網站，提升履歷在視覺上的記憶力與新穎性，達成短時間內加強記憶個人資訊的效果，並在『WO165 共同工作空間』的展出過程中，實際的訪談了幾位使用者的操作行為與結果，觀察到透過視覺的刺激與視覺化圖表的呈現，可實際加強閱讀者對於履歷資訊的記憶度。

Résumé is a carrier of massive information. In terms of older version résumé, it is hard for readers to distinguish individual difference in a limited time. Besides, readers usually have difficulty with memory résumé content. This creation description “Pinfo” is a visualize résumé website. The interactional visualize résumé website can be constructed by the well-designed illustration and Infographic through the technologies of CSS, JavaScript, HTML and MySQL. This kind of résumé can increase retention rate and provide novelty on visualization, which increase the effectiveness of memorizing personal information in a short time. In addition, in the process of “Water Original 165”, a number of users were interviewed. Their operation behaviors and results have been recorded accordingly. The result shows that the display of visualized stimulation and Infographic can increase readers’ retention rate after reading a résumé.

摘 要 i
abstract ii
目 錄 iii
表目錄 iv
圖目錄 v
第一章 緒論 1
第一節 創作研究背景與動機 1
第二節 創作研究目的與問題 2
第二章 文獻探討 3
第一節 視覺化資訊圖表探討 3
ㄧ、資訊圖表(Infograpic)的定義 3
二、資訊圖表的發展 5
三、資訊圖表的設計原則 6
四、圖表類型 8
第二節 網站建置語言與技術探討 11
一、ＨTML / HTML5 11
二、CSS / CSS3 13
三、JavaScript / jQuery / Bootsrap 15
第三節　作品探討 19
一、Michael Anderson Resume 19
二、Robby Interactive Resume 20
三、CakeResume 21
四、Linkein 22
五、Mellisa Cahyadi CV (Motion Graphic) 23
第四節 小結 24
第三章 創作內容與方法 25
第一節 創作理念 25
第二節 網站介紹 25
一、網站概述 25
二、系統概述 26
第三節 網頁架構 26
第四節 程式架構 29
一、表單傳送與寫入資料庫功能 30
二、RWD響應式網頁設計 33
三、CSS、JavaScript視覺動態效果 34
四、Webcam電腦攝像鏡頭功能 35
五、視覺呈現效果 37
六、網站整體骨架與頁面鏈結 42
第五節 視覺呈現 44
一、 網站視覺 44
二、 圖表化視覺設計 45
第四章 創作呈現 49
第一節 作品結果 49
第二節 展覽呈現方式 50
一、設備與呈現裝置 51
二、現場設置 52
第三節 創作時程 53
第四節 使用者心得與建議 54
第五章 結論與建議 56
第一節 結論 56
第二節 建議 56
參考文獻 58
附錄 61

一、中文部分
王仲麒（2009）。PHP 5資料庫網頁程式設計。台北：碁峰資訊股份有限公司。
郭小成 (2013)。HTML5+CSS3技術應用完美解析。北京: 中國鐵道出版社。
常可、胡金埔、趙靜譯 (2010)。HTML5揭秘（原作者：Mark Pilgrim）。北京：電子工業出版社。
木村博之 (2012)。設計的邏輯：Infographics深入人心的視覺法則（楊宗訓譯）。台北：旗標出版。
劉凡儀（譯） (2014)。圖像傳達力：說服讀者×老闆×客戶的視覺資Infographics（原作者：Mark Smiciklas）。台北: 果禾文化。
蕭立文 (2015)。HTML5+CSS3+jQuery 全方位網頁實例設計：跨平台、跨裝置、跨瀏覽器。台北: 上奇資訊。
禹錫晉、金美利 (2013)。單頁式infographic設計（郭淑慧譯）。台北：博碩文化股份有限公司。
簡美娟（譯）（2013）。視覺資訊的力量（原作者：Jason Lankow & Josh Ritchie & Ross Crooks）。台北：大寫出版。
王翎（譯）（2015）。圖像溝通的藝術（原作者：Graham Shaw）。新北市：八方出版股份有限公司。

二、英文部分
Smith, E., & Hajash, D. (1988). Informational Graphics in 30 Daily Newspapers. Journalism Quarterly,65(3).
Mark, S. (2014). The Power of Infographics: Using Pictures to Communicate and Connect with Your Audiences. Que Biz-Tech.
Nixon, R. (2014). Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5. Oreilly & Associates.
Joss, M. (2013). Book Reviews: Infographics: the power of visual storytelling. The Seybold Report, 13(3), 8-12.
Cairo, A. (2013). The Functional Art: An introduction to information graphics and visualization. New Riders.

三、網路文獻
Rosbergen, E., Pieters, R., Wedel, M. (1995). Undirected Visual Attention To Advertising: A Segment-Level Analysis. SOM-Reports University of Groningen. Retrieved on 11/8,2015 from
http://www.rug.nl/research/portal/files/3276693/95b28.pdf
Josh, S. (2012). 10 Steps To Designing An Amazing Infographic. Retrieved on 11/8,2015 from http://www.fastcodesign.com/1670019/10-steps-to-designing-an-amazing-
Infographic
Emilie, F. (2013). 10 ways to use infographics. Retrieved on 11/9,2015 http://thenextweb.com/dd/2013/10/16/10-ways-use-infographics/#gref
Inbound journals。為甚麼資訊圖表如此受歡迎?。Retrieved on 11/9, 2015, from
http://www.inboundjournals.com/why-are-inforgraphics-so-popular/
淘靈感（2013）。平面設計師的資訊圖表履歷。Retrieved on 11/9, 2015, from
http://pick.mydesy.com/archives/24451
找工作資訊站（2012）。履歷表，找工作前一定製作個人專屬履歷表！Retrieved on 11/9, 2015, from
http://resume4job.pixnet.net/blog/post/27842857-%5B
維基百科。CSS3。Retrieved on 12/3, 2015, from
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
維基百科。HTML5。Retrieved on 12/3, 2015, from
https://en.wikipedia.org/wiki/HTML5
維基百科。HTML Working Group。Retrieved on 12/3, 2015, from
https://en.wikipedia.org/wiki/HTML_Working_Group
維基百科。PHP。Retrieved on 12/3, 2015, from
https://en.wikipedia.org/wiki/PHP