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.
本課程將從理論, 技術及實作三方面協助學生學習製作網際網路平台的能力, 期末將讓學生創造屬於自己的網路服務，實際體驗並完成一個網路平台的開發。
Introduction to this course
課程介紹
About this course.
關於這個課程.
slide/投影片 slide/投影片
Exercise/任務
Email TA a two-pages slide of your idea and skills and present it within ~1 min in the next class.
寄給助教兩頁的投影片(包含你的點子及專長), 在下次上課中你有一分鐘左右的時間報告.
Introduction to the environment
環境介紹
About the environment to develop your web platform.
介紹開發環境.
slide/投影片 slide/投影片
Exercise/任務
Design a page of about us.
設計關於我們的頁面.
HTML+CSS
Basic training of HTML and CSS with plentiful references.
HTML 與 CSS 的基礎訓練, 包含許多有用的參考資料.
slide/投影片 slide/投影片
Exercise/任務
Design static pages of your site.
設計網站的靜態頁面.
Javascript
Basic training of Javascript (and jQuery) with plentiful references.
Javascript (與 jQuery)的基礎訓練, 包含許多有用的參考資料.
slide/投影片 slide/投影片
Exercise/任務
Make your web site dynamic.
讓你的網站動起來.
Color
配色
Introduce color theory, tools and practices with plentiful references.
介紹配色的理論, 工具及實際應用, 包含許多有用的參考資料.
slide/投影片 slide/投影片
Exercise/任務
Re-color your web site.
將你的網站重新配色.
CGI
Introduce CGI programming and implementation details with Perl.
介紹 CGI 程式設計, 包含使用 Perl 實作的細節.
slide/投影片 slide/投影片 code/程式碼
Exercise/任務
Make your web site memorable.
讓你的網站有記憶的功能.
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.
重新排版你的網站.
Ajax
Introduce Ajax (Asynchronous JAvascript XML), including a practical demo.
介紹 Ajax (非同步的 JavaScript 與 XML) 技術, 包含一個可以實際操作的範例.
slide/投影片 slide/投影片 code/程式碼
Exercise/任務
Make your site more interactive and fluent.
讓你的網站有更高的互動性, 更加流暢.
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.
提升網站的使用者體驗.
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.
讓網站變成有狀態.
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.
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!
是時候全心全力投入期末展了!
slides may require