1. WEBSITE DESIGN WORKSHOP!
Jonathan Crisman
DUSPViz

3. Why have a website?

4. Why have a website?
Personal Organization

5. Why have a website?
Personal Organization
Portfolio Portfolio
Blog Group Blog
“Business Card” “Business Card”
Outreach Outreach

6. Why have a website?
Personal Organization Use This!
Portfolio Portfolio CMS
Blog Group Blog Wordpress
“Business Card” “Business Card” Flavors.me
Outreach Outreach Social Media

7. What is a “CMS”?
A content management system is a programmed set of code that
allows a website’s content to be easily updated and changed
without necessarily understanding the code.
+ easy to use!
+ multiple users!
- takes time to set up
- set templates

8. Examples of content management systems...
1. Wordpress
2. Drupal
3. Indexhibit
4. Cargo
5. Stacey

9. Wordpress

10. Drupal

11. Indexhibit

12. Cargo

13. Stacey

14. Why have a website?
Personal Organization Use This!
Portfolio Portfolio CMS
Blog Group Blog Wordpress
“Business Card” “Business Card” Flavors.me
Outreach Outreach Social Media

15. Wordpress

16. Flavors.me

17. Social Media and Application Programming Interfaces

18. Hosting at MIT

19. Your MIT locker contains 2gb of space that can be used for web-
site hosting!
It’s default address is http://web.mit.edu/locker/www/. You can
adjust the locker permissions with Athena to change it to mit.
edu/locker/ or something along those lines.
+ free!
+ MIT association!
- no scripts or php
- disappears after you graduate

20. Athena Commands
fs quota [directory]
fs la [directory]
fs sa [directory] [user] [permissions]
r read the contents of files in the directory
l list the names of files in the directory
i insert files into the directory
d delete files from the directory
w write (or modify) files into the directory
k lock (or modify the write-mode bit) of files in the directory
a administer or change the acl of the directory
read, write, all, none

21. Creating an index.html file.
+ Simple is beautiful!
+ Contact info is key.
+ Eg. SANAA website.

22. SecureFX (FTP client)

23. Dreamweaver

24. Creating and Editing a Wordpress
add scripts
scripts-start
follow instructions...

25. SecureCRT (Remote command line access to Athena)

26. Wordpress Interface

27. Stacey

28. Domains and Web Hosting (*PHP and MySQL)

29. FTP Access

30. Editing Stacey: drag and drop! So easy!
+ edit contents in existing text files (e.g., name)
+ create new folders with text files and images
- changing template is more difficult...
use dreamweaver
start with css (cascading style sheets)
move on to html

31. http://www.staceyapp.com/documentation/

33. Now you have 3 sites!
http://mit.edu/username/
http://flavors.me/username/
http://58-12.org/dusp/username/
Congrats! But the last one (and, actually, the first one too) will go
away, so be careful!