Molecular Biomedical Informatics

分子生醫資訊實驗室

Web Programming

網際網路程式設計

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.
本課程將從理論, 技術及實作三方面協助學生學習製作網際網路平台的能力, 期末將讓學生創造屬於自己的網路服務, 實際體驗並完成一個網路平台的開發.

Course video / 課程影片:

Final exhibition / 期末展 (2014-1-22)

Show the best aspect of your works via anything you can think.
無所不用其極地呈現你們作品最好的一面.
Guideline/說明
Final exhibition website / 期末展網站

Functional programming / 函數程式設計

Introduce functional programming, including JavaScript closure.
介紹函數程式設計, 包含 JavaScript 閉包教學.
slide/投影片 slide/投影片

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

Git

Introduce version control system, git and GitHub.
介紹版本控制, git 以及 GitHub.
slide/投影片 slide/投影片

Exercise/任務
Clone a GitHub repo.
複製一個 GitHub 專案.

App programming / 手機程式設計

Introduce app programming via web technologies, including a demo app.
運用網頁技術開發手機程式, 包含一支示範程式.
slide/投影片 slide/投影片

Exercise/任務
Create an app.
開發一個手機應用程式.

Photoshop

Photoshop is probably the most famous design software. This class provides very basic introduction to Photoshop. Photoshop 應該是目前最有名的設計軟體. 這堂課提供了非常基礎的介紹.
slide/投影片 slide/投影片

Exercise/任務
Design a logo for you site.
幫你的網站設計一個 logo.

Midterm exhibition / 期中展 (2013-12-11)

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

Exercise/任務
Prepare a 5-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 site.
提升網站的使用者體驗.

Bot/機器人

Introduce how to extract data from other resources and automate routines to maintain your sites.
介紹如何從別的網站抓取資料以及如果自動化一些工作來維持網站的運作.
slide/投影片 slide/投影片 code/程式碼

Exercise/任務
Extract something from other sites.
從別人的網站抓取資料.

Color/配色

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

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

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 various applications such as shopping carts and authentication 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.
讓你的網站能分辨狀態.

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 site.
重新排版你的網站.

Ajax

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

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

CGI

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

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

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/任務
Join our Facebook club and create a hackpad to breed your ideas.
加入課程的臉書社團並建立一個 hackpad 來發展創意.

This course is supported by Ministry of Education / 本課程由教育部顧問室支持