This document provides instructions for students to access and use command line interfaces on servers to create interactive data visualization websites. It outlines how to connect to servers through SSH on Mac and PuTTY on PCs. It then describes basic shell commands and instructs students to build a three page website with search, list, and display functionality that shares common headers, footers, and CSS across pages. Finally, it explains how to pass arguments to pages using query strings in URLs.

1. Search, List, and DisplayMDST 3559: DataestheticsProf. Alvarado03/15/2011

2. BusinessProcess?Case Studies coming up …Visualizing art collectionsGraphing storiesMapping texts

3. ReviewAssignmentDebugging

4. OverviewShell access (PC users us “Putty”)ExerciseCreate a web site for your dataEmbed a visualization

5. Shell Access“Shell” = command line interfaceYou can use SSH to connect to your serversblue.unixstudio1Gives you more power to work with your codeRequiresTerminal on MacPuTTY on PC

6. TerminalFind Terminal on your MacGood idea to keep it in your toolbarEnter the command:ssh rca2t@studio1.shanti.virginia.edu -p22

7. PuTTYDownload from herehttp://www.chiark.greenend.org.uk/~sgtatham/putty/download.htmlSet up a new SessionHost name = studio1.shanti.virginia.eduPort = 22Protocol = ssh

8. Some Shell Commandspwd = present working directoryLets you see where you arecd= Change directory.. = back one. = current directory/ = directory separator~/ = always your home directorphpfilename = run a php file; show errors

9. ExerciseCreate an interactive mini-site with your dataThe site should have At least three content pages: (1) Search, (2) List, and (3) DisplayEach page should have the following common parts: (1) Header and (2) FooterIn addition,all pages should share a common CSS file

10. Query StringsHTTP’s URL syntax allows for key/value pairs to be appended to the end of a URLhttp://foo.com/bar.php?x=10&y=blueQuestion mark (?) begins the query stringKeys and values separated by equal signs (=)Pairs separated by ampersands (&)Spaces represented by plus signs (+)Query strings are like arguments for pages that have code (like PHP pages)