iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

網頁設計師指南——從前端到後端 系列

這三十天,我會以打造一個 TA 是設計師的網站為例,一步一步分享一個網頁設計師要設計自己的網站的網站時所用到的技術與資源。

參賽天數 15 天 | 共 15 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

網頁設計師指南——從前端到後端(一)發想

在這個題目,我們要完成一個有完整功能的網站,從設計,前端到後端都不假手他人。借由這個過程認識一個網站從前到後,「一個人」可能掌握的技能。這不是為了全端而全端,而...

2014-09-17 ‧ 由 minipai 分享
DAY 2

網頁設計師指南——從前端到後端(二)Wireframe

在開始製作網站之前,我們先畫一些 wireframe 來架構網站的基本界面。Wireframe 是用線條來描述我們網站的設計,除去顏色,細節的干擾,排除視覺設計...

2014-09-18 ‧ 由 minipai 分享
DAY 3

網頁設計師指南——從前端到後端(三)視覺設計

在 Wireframe 定下來後,我們接著要進行視覺設計。要做設計你可以用任何繪圖軟體,像是 Photoshop,Illustrator,還有最近很紅的 Ske...

2014-09-19 ‧ 由 minipai 分享
DAY 4

網頁設計師指南——從前端到後端(四)node.js

在設計告一段落以後,我們要開始建立開發的環境。在這個專案,我們選擇的後端語言是 node.js。事實上,作為一個網頁設計師,node.js 幾乎是你唯一的選擇,...

2014-09-20 ‧ 由 minipai 分享
DAY 5

網頁設計師指南——從前端到後端(五)express.js

我們要開始在 node.js 環境架構我們的網站。在這邊我們選擇的是 express.js 這個 node.js 上最熱門輕量級 web framework。e...

2014-09-21 ‧ 由 minipai 分享
DAY 6

網頁設計師指南——從前端到後端(六)Jade 和 Stylus

在完成 express.js 的「安裝」後,我們要回到前端,來將設計「切板」出來了。不過嚴格來講,我們的設計可以完全由CSS來完成,所以其實是無圖可切的。在這個...

2014-09-22 ‧ 由 minipai 分享
DAY 7

網頁設計師指南——從前端到後端(七)MongoDB 和 Mongoose

在前端「切板」完成之後,我們當然不能滿足於畫面上的假資料,所以我們開始要準備讓我們的網站能存取真實的資料了。所以我們要開始引進資料庫來保存我們的資料了。我們的資...

2014-09-23 ‧ 由 minipai 分享
DAY 8

網頁設計師指南——從前端到後端(八)上傳檔案

到這一步,我們要開始上傳內容了。 我們要在 express 加入一個 middleware 才能處理檔案上傳。 npm install multer --...

2014-09-24 ‧ 由 minipai 分享
DAY 9

網頁設計師指南——從前端到後端(九) angualr.js 與 ng-flow.js

我們已經做好了分享作品功能,但是唯獨檔案上傳的部分不太滿意,因為我們檔案上傳的部分太陽春了。我們希望能讓使用者在把作品分享出去之前,就在上傳界面預覽好圖片,給使...

2014-09-25 ‧ 由 minipai 分享
DAY 10

網頁設計師指南——從前端到後端(十)everyauth

在完成上傳的功能後,接下來要做什麼功能呢?有一個非常重要而且基本的功能我們還沒做,那就是「帳號」。沒有帳號的功能,上傳後的作品都不知道是誰的。 但「帳號」這個功...

2014-09-26 ‧ 由 minipai 分享