E5 Lab 1

Overview of this week's task.

Welcome to E5.  Much of the project-based work you do for this class will be submitted to a wiki (like wikipedia, but the wiki will be specific to this class)  rather than turned in on paper.  This will also make it easier to work collaboratively with others, which is one of the goals of the class.   Today you will learn a little bit about submitting information to the wiki.

It is very important to keep your wiki up to date throughout the semester - at the end of the semester the wiki will be a document showing what you have done in this course.

Your task for this week (due by Thursday September 13, 2012) is to edit your personal page on the E5 Wiki so that it...

Log in for the first time.

Log in to one of the computers in the Engineering Computer Lab using your college username and password.  Start a web browser and go to the page http://wikis.swarthmore.edu/ENGR005_2012.  The screen should look similar to the one shown below.


Click on the "log in" link in the upper right corner, and log in.  Your username is your college username, and the password will be given to you in lab.  I will go through this tutorial with the username "E5Student1". 


This page is different than the previous because the username (E5Student1) is displayed at the top of the page, and there are "edit" links to allow pages to be edited.  (The actual content that you see may be somewhat different).  The first thing you should do is go the the {my preferences} link at the top of the page and change your password (if you haven't already) so that others can't use your account.  Navigate back to the "Main Page" (link is at left near the top of the "navigation" panel - or you can click on the "E5" logo at the upper left). 

Submitting to the E5 wiki

In this first exercise, you will just be editing your personal page on the wiki and creating a link to it from your ball drop team page.  To do this, click on the link at the top of the page that has your username (in this example the username is "E5Student1").  You should now be on your unedited home page. 

Start editing the page by either clicking on the "edit this page" link, or by clicking on the "create" tab at the top of the page.  Your screen should look similar to the one below.

Try entering some text into the box, and then hit the "Save page" button at the bottom of the page.  You can also format the text to be bold, italic, underlined... by using the buttons at the top of the edit window.  For example, if I enter the following text into the edit window:


When I hit the "Save Page" button I get the following.  Note that the text that was inside the three single quotes ('''Bold''') is boldfaced.  The text that was within two single quotes (''italics'') is now italicized.


You can do more formatting (for instance different sections -- shown below, first as it is being edited, and then the formatted result).  You can even add html (if you know how to code it).  See the wikipedia tutorial for more formatting commands if you are interested. If your page gets complicated enough to have four headings (or more), a table of contents is automatically generated.



Add a link for email. 

Now add an email link so people can email you.  To add an email link, open the page for editing, and then insert a web link (use the external link icon on the editing toolbar).  This will add the following text to your wiki page:
[http://www.example.com link title]
The brackets ("[" and "]") denote the beginning and end of the link.  The text that precedes the first space is the URL, and the text that follows the space is the text that will appear on the wiki.  So if I change the text in the brackets to:
[mailto:echeeve1@swarthmore.edu Email to Erik Cheever]
This will create an email link to me with the text "Email to Erik Cheever" as the hyperlink.

Add a link for an external web page. 

Now add a link to an external page.  This is done in the same way as the link for email (above), but keep the "http://" in the URL.  You can link to any page.

Add a link to a page in the wiki. 

Now add a link to a page within the wiki; in particular, use the page that has been created for your ball drop team.  You can find the exact name of the wiki page if you go to "Special pages" (on the left menu bar of the wiki), and then under the "List of Pages" section, select "All Pages".  Find the name of your ball drop team.  Now add a link to that page by using the wiki link icon. It is similar to the link for an external URL but uses two sets of brackets, instead of just one.  Use the pipe "|" character (above the enter key on most keyboards) to separate the name of the file from the link text.  To link to the file "Team Doofus" with the text "ball drop for Team Doofus" enter
[[Team Doofus | ball drop for Team Doofus]]
into the wiki edit window.

Note: If you enter the name of a file that doesn't exist, a link will still be created.  The first time you click on the link, it will take you to a new, blank, page.

Add a link back to your page. 

On the page for your ball drop team, add a link back to your own page in the section that says "Team Members."  You need to either use the external URL for your page (i.e., the one that starts with "http://") or use an internal link, but prefix it with "User:".  For example, our Generic E5Student would use:
[[User:E5Student1 | Generic E5Student]]

Add an image. 

As a last step, lets add an image.  First find an image that you want to use and save it. You can use  any image, but if you want to use the one below you right click on the image, select "Save Picture As" and save it to your computer with a unique name (so that it doesn't interfere with other files that may already be on the wiki).

Now, you must load an image into the wiki, then set it up to display it.  To load the image, click on the {Upload file} link on the left menu bar, and then enter your file into the "Source filename" by browsing to it, and click the {Upload file} button at the bottom of the page.  Display your image in the wiki by using the insert embedded  icon on the formatting toolbar.  Enter the name of the file (If you don't remember it, you can list all of the files by going through the {Special pages} link on the left menu bar).  For example, the image file I used was called "ErikCheeverHicksBitMap.gif" so to display it (along with a bold tag that says "My Image"), I enter the following code into the wiki edit window:
'''My Image'''    [[Image:ErikCheeverHicks.gif‎]]

If you take an image from a website, be sure to include a clear reference back to that web page.  This is important to make sure you don't take credit for another person's work.

Everything together

You can see all of these elements together (though not very artfully) at http://wikis.swarthmore.edu/ENGR005_2012/index.php/User:E5Student1.  You can look at the code, but please don't change any of it (you can experiment with your own page).

To turn in:

(via moodle)

This completes the first lab.  When you are sure everything works as expected go back to the moodle page and send me a note.  If you are having difficulties with the assignment, please come see me or one of the wizards for help.  The assignment is not meant to take a long time.

Going further