Social Web Design 1 Darby Chang Social Web Design & Research.
Social Web Design 1 Darby Chang Social Web Design.
22
Social Web Design 社社社社社社 1 Darby Chang 社社社 Social Web Design 社社社社社社
-
Upload
lincoln-wingate -
Category
Documents
-
view
218 -
download
0
Transcript of Social Web Design 1 Darby Chang Social Web Design.
1
Social Web Design社群網站設計
Darby Chang
張天豪
Social Web Design 社群網站設計
2
Environment環境
Social Web Design 社群網站設計
3
Of course Linux + Apache
http://www.junauza.com/2011/02/using-apache-web-servers-userdir.html
Social Web Design 社群網站設計
4
Linux vs. WindowsInterface• kernel/GUI-based• target users
Business• open source• pirate copy
Popularity• users• habits
Support• developers• drivers/games/virus
Social Web Design 社群網站設計
Functionality• reliability• flexibility
5
Apache vs. IIS
Social Web Design 社群網站設計
http://en.wikipedia.org/wiki/Web_server
Functionality• reliability• flexibility
6
Linux has many web server software Apache, nginx, lighttpd (lighty), Google…
– scale, flexibility, community support
– you can use tools like this to test famous web sites
They are usually easy to install– apt-get install lighttpd
You don’t have to worry about administration issues.
However, you’re welcome to discuss with me.
Social Web Design 社群網站設計
7
Do I need to learn Linux?是否該學 Linux 呢 ?
Don’t 為反而反
Social Web Design 社群網站設計
8
Then, what to worry about那麼，要煩惱什麼呢
Social Web Design 社群網站設計
http://www.flickr.com/photos/dasqfamily/2611547787/in/photostream/
This is I using Linux
10
It is not that scary Download PieTTY and login
– actually PieTTY is just like any BBS client (even journalists can use them)
with secure shell (SSH)
– this is the remote desktop ( 遠端桌面 ) of Linux
Create the directory to store your web site– $ mkdir public_html # this name is just a configuration of Apache
Write a HTML file– $ vi public_html/index.html
– vi is a legend text editor, see the appendix
– you may use any FTP client with SFTP support, such as WinSCP
Now you can see your web site via browsers– http://merry.ee.ncku.edu.tw/~xxx/
Social Web Design 社群網站設計
11
Any Questions?
Social Web Design 社群網站設計
12
Today’s assignment今天的任務
Social Web Design 社群網站設計
13
Familiar with the environment Request an account and put a web site online
– contact TA via email or Facebook
– find TA’s email and Facebook on our web site
– you may join our Facebook club for the latest news
Reference– see the 10th slide
Your web site (http://merry.ee.ncku.edu.tw/~xxx/) will be checked
not before 23:59 3/12 (Mon). You may send a report (such as some
important modifications) to me in case I did not notice your features.
We’re drafting…
Social Web Design 社群網站設計
14Social Web Design 社群網站設計
真．強者
15
Champion wanted If you are familiar with
– HTML, CSS, Javascript these front-end techniques
– Perl, PHP or other back-end techniques (ASP is less preferred since
we don’t provide such an environment)
– please contact me or TA via emails or Facebook
Benefit– no need to do the first four exercises and will get even higher grades
than regular students for these exercises
Responsibility– answer other students’ questions and help them to complete the first
four exercisesSocial Web Design 社群網站設計
16
If you’re a App master, we may need you in the later part of this class. So
welcome to contact with me.
http://www.iphoned.nl/wp-content/uploads/2009/01/apple-500-miljoen-download-app-store.jpg
17
Appendix
Social Web Design 社群網站設計
18Social Web Design 社群網站設計
vi Regular text editors such as
Notepad ( 記事本 )– cursor movement/selection
(mouse)
– add/delete/edit text (keyboard)
– copy/paste (menu or hotkey)
– easy to learn (learnability)
– hard to forget (memorability)
– won’t annoy users (satisfaction)
– Everything looks well? The only
problem is the efficiency.
vi– Two modes, like gears in car. The
most frustration for rookies is
mode error.
– Regular editors actually use
‘temporary’ modes.
– Split a command into small units,
such as character, word, line,
screen…
– w (jump to the next word)
– } (jump to the next paragraph)
– Too complicated! What’s the
benefit?
19
More vi vi separates actions and units
– dw delete a word
– y} yank (copy) a paragraph
– d2w delete two words
– think about how many hotkeys are required for regular
text editors for all these combinations…
vi has all should-have functionalities– split screen, search (regular expression, find
previous/next), diffSocial Web Design 社群網站設計
20http://blog.vgod.tw/2009/12/08/vim-cheat-sheet-for-programmers/
Social Web Design 社群網站設計
21http://www.youtube.com/watch?v=Fa9gWzuUeUI
Social Web Design 社群網站設計
當然不是要你一口氣全部記起來
22
References for vi [HCI] 淺談模式 "mode"
與文字編輯的技術與學習 給程式設計師的Vim入門圖解說明 Vimcasts
- free screencasts about the text editor Vim
Social Web Design 社群網站設計
