頂石計畫
Final exhibition website / 期末展網站
Course video / 課程影片
Our Facebook club / 課程臉書社團

This course includes theoretic, technical and implementing details of building a web platform. In the end, students will create their own web services, in which they will practically experience and complete the development of a web platform.
本課程將從理論, 技術實作三方面協助學生學習製作網際網路平台的能力, 期末將讓學生創造屬於自己的網路服務, 實際體驗並完成一個網路平台的開發.

Final exhibition / 期末展 (2013-1-21)

Show the best aspect of your works via anything you can think.
無所不用其極地呈現你們作品最好的一面.
Reminders/注意事項
Final exhibition website / 期末展網站
Final exhibition poster / 期末展海報

Tool + Critique / 工具 + 評論

The first part introduces useful tools for web design. The second part teaches how to criticize a web site.
第一部分介紹一些可幫助網頁設計的工具軟體. 第二部分教人怎麼評論一個網頁設計的好壞.
slide/投影片 slide/投影片

Exercise/任務
It's time to devote yourself to the final exhibition!
是時候全心全力投入期末展了!

Photoshop + jQuery plugin

Photoshop is probably the most famous design software. This class provides very basic introduction to Photoshop. In addition, this slide also includes a short tutorial to develop your own jQuery plugin.
Photoshop 應該是目前最有名的設計軟體. 這堂課提供了非常基礎的介紹. 此外, 這份投影片中也包含了一個簡短的 jQuery plugin 製作教學.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Design a logo for you site or create your own jQuery plugin.
幫你的網站設計一個 logo 或是製作一個 jQuery plugin.

Cookie

HTTP is a stateless protocol where each subsequent click to a web site is treated as new by the web server. This makes creating such applications as shopping carts, login/authentication routines, secure restricted services in the web impossible. Cookie is a technology (including in HTTP protocol) to solve this.
HTTP 是一個無狀態協定, 這表示連續兩個的 HTTP 請求對伺服器來說是獨立的. 這樣的架構使得一些應用, 例如購物車, 登入/認證, 限制特定人士才能瀏灠等等, 無法實行. Cookie 是一種解決這些問題的技術(包含在 HTTP 協定中).
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Make your site state-sensitive.
讓網站變成有狀態.

Head-hunting and job-hopping (2012-12-10)

Introduces PIXNET App Market.
PIXNET App Market 介紹.
slide/投影片 slide/投影片

Exercise/任務
Email TA a report of your will that includes your will of head-hunting/job-hopping and how you grade your members. 寄給助教一份報告, 內容包含挖角/跳槽的意願以及你幫隊員打的分數.

Midterm exhibition / 期中展 (2012-12-3)

Show the best aspect of your works via anything you can think.
無所不用其極地呈現你們作品最好的一面.
slide/投影片 slide/投影片

Exercise/任務
Prepare a 10-minute presentation about your current process.
準備十分鐘的報告, 說明目前的狀況.

Design pattern / 設計模式

A design pattern describes an optimal solution to a common problem within a specific context. This class introduce various solutions others have already come up with for common web interface challenges.
一個設計模式描述一個特定的使用介面問題, 以及適當的解決辦法. 這堂課會介紹許多在網頁設計上常見的設計模式.
slide/投影片 slide/投影片

Exercise/任務
Enhance the user experimence of your web set.
提升網站的使用者體驗.

Color/配色

Introduce color theory, tools and practices with plentiful references.
介紹配色的理論, 工具及實際應用, 包含許多有用的參考資料.
slide/投影片 slide/投影片

Exercise/任務
Re-color your web site.
將你的網站重新配色.

Ajax

Introduce Ajax (Asynchronous JAvascript XML), including a practical demo.
介紹 Ajax (非同步的 JavaScript 與 XML) 技術, 包含一個可以實際操作的範例.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Make your site more fluent.
讓你的網站更加流暢.

Layout/排版

Introduce modern layout concepts, including progressive enhancement, fixed vs. fluid layouts, grid layout and CSS frameworks.
介紹現代化的排版觀念, 包含漸進增強 (progressive enhancement), 固定 (fixed) 與浮動 (fluid) 排版, 網格 (grid) 排版以及一些 CSS 框架 (framework).
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Re-design (re-align) your web site.
重新排版你的網站.

CGI

Introduce CGI programming and implementation details with Perl.
介紹 CGI 程式設計, 包含使用 Perl 實作的細節.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Make your web site memorable.
讓你的網站有記憶的功能.

Proposal/提案 (2012-10-22)

Show your ideas and yourself.
提出點子, 呈現自己.
slide/投影片 slide/投影片

Exercise/任務
Email TA a two-page slide (idea and advantages) and present it (in one minute) in the next class.
寄給助教兩頁的投影片(包含你的點子優勢), 在下次上課中你有一分鐘左右的時間報告.

PIXNET Speech / 痞克邦演講 (2012-10-15)

Introduces PIXNET App Market.
PIXNET App Market 介紹.
slide/投影片 slide/投影片

Javascript + jQuery

Basic training of Javascript (and jQuery) with plentiful references.
Javascript (與 jQuery)的基礎訓練, 包含許多有用的參考資料.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Make your web site dynamic.
讓你的網站起來.

HTML + CSS

Basic training of HTML and CSS with plentiful references.
HTML 與 CSS 的基礎訓練, 包含許多有用的參考資料.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Design static pages of your site.
設計網站的靜態頁面.

Development environment / 環境介紹

About the environment to develop your web platform.
介紹開發環境.
slide/投影片 slide/投影片

Exercise/任務
Design an about me page.
設計關於我的頁面.

About/課程介紹

About this course.
關於這個課程.
slide/投影片 slide/投影片 Syllabus/課程大綱

Exercise/任務
Email TA your name and account name, and join our Facebook club.
將你的姓名及帳號名稱寄給助教, 並加入課程的臉書社團.

Viewing slides may require this tool.
你可能需要這個工具來開啟 投影片.