1. 6/1/09
Follow these steps to upload a finished tutorial onto the alice09 repository webpage
(h9p://www.cs.duke.edu/csed/alice09/). To transfer from the alice09 repository to the teacher
website (h9p://www.cs.duke.edu/csed/alice/aliceInSchools/workshop09/tutorials.php) skip
directly to step 7
Step 1: Create a Folder
1. Create a folder: Name it “nameOfTutorial” (shorten the name as needed, try to
Repository/Site Upload Instruc5ons keep “tutorial” at the end though)
2. Create Documents: Each tutorial folder (* if applicable) should have
nameOfTutorial.ppt (powerpoint document)
nameOfTutorial.pdf (one slide per page)
nameOfTutorialHandout.pdf (handout, 4 slides to a page)
*nameOfTutorialStart.a2w (star5ng alice world)
*nameOfTutorialFinished.a2w (finished alice world)
By Elizabeth Liang *exercises.html (webpage to put exercises)
ewl6@duke.edu nameOfTutorialScreen.jpg (screenshot associated with tutorial)
Duke University, May 2009
tutorial.php (code for the repository)
Alice Project under Prof. Susan Rodger
publicTutorial.php (code for the teacher website)
Step 2: Tutorial PHP Code Step 3: Public PHP Code
1. For tutorial.php create a new document in a html/text editor 1. For publicTutorial.php create a new document in a html/text editor
2. Insert the following code, replacing/dele5ng informa5on as needed: (parent 2. Insert the following code, replacing/dele5ng informa5on as needed: (parent
folder means either ge^ngStartedTutorials or advancedTutorials depending on folder means either ge^ngStartedTutorials or advancedTutorials depending on
the tutorial) the tutorial)
<p class="tutorial"> <p class="tutorial">
<img src="tutorials/parentFolder/nameOfTutorial/nameOfTutorialScreen.jpg" alt=""> <img src=”workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorialScreen.jpg" alt="">
<b>Name:</b> NameOfTutorial<br> <b>Name:</b> NameOfTutorial<br>
<b>Level:</b> Beginner/Intermediate/Expert<br> <b>Level:</b> Beginner/Intermediate/Expert<br>
<b>Time:</b> Approx. 5me it takes to do the tutorial<br><br> <b>Time:</b> Approx. 5me it takes to do the tutorial<br><br>
<b>Descrip5on:</b> Descrip5on of tutorial and the concepts it covers (2‐3 sentences).<br><br> <b>Descrip5on:</b> Descrip5on of tutorial and the concepts it covers (2‐3 sentences).<br><br>
<b>Worlds:</b> <b>Worlds:</b>
<a href=“tutorials/parentFolder/nameOfTutorial/nameOfTutorialStart.a2w”>Start</a>, <a href=“workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorialStart.a2w”>Start</a>,
<a href=“tutorials/parentFolder/nameOfTutorial/nameOfTutorialFinished.a2w”>Finished</a><br> <a href=“workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorialFinished.a2w”>Finished</a><br>
<b>Links:</b> <b>Links:</b>
<a href="tutorials/parentFolder/nameOfTutorial/nameOfTutorial.ppt">Powerpoint</a>, <a href=”workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorial.ppt">Powerpoint</a>,
<a href="tutorials/parentFolder/nameOfTutorial/nameOfTutorial.pdf">Slides (.pdf)</a>, <a href=”workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorial.pdf">Slides (.pdf)</a>,
<a href="tutorials/parentFolder/nameOfTutorial/nameOfTutorialHandout.pdf">Handout</a>, <a href=”workshop09/tutorials/parentFolder/nameOfTutorial/nameOfTutorialHandout.pdf">Handout</a>,
<a href="tutorials/parentFolder/nameOfTutorial/exercises.html" target="_blank">Exercises</a> <a href=”workshop09/tutorials/parentFolder/nameOfTutorial/exercises.html" target="_blank">Exercises</a>
</p> </p>
1
2. 6/1/09
Step 4: Exercises Code Step 5: Uploading
1. For exercises.html create a new document in a html/text editor 1. Connect to the CS server. (If you do not have a FTP/SSH program download one from
hip://www.oit.duke.edu/comp‐print/sonware/list.html, go down to “Security, SSH/
2. Insert the following code, replacing informa5on as needed:
SFTP and firewalls.” I use fileZilla but any of those should work.) The server name is
login.cs.duke.edu, use your cs username and password, the port is 22.
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN"
"hip://www.w3.org/TR/html4/strict.dtd"> 2. Once you have successfully connected it will automa5cally go to your cs space. Go to
<html> the root folder by clicking the folder with just a “/” aner it.
<head>
<meta hip‐equiv="Content‐type" content="text/html;charset=UTF‐8”> 3. Enter in the address “/usr/project/csed/web/alice09/tutorials/parentFolder”
<5tle>NameOfTutorial Exercises</5tle>
</head> 4. Drag the nameOfTutorial folder from your computer into that space.
<body>
5. Open the tutorial.php document in the parentFolder and download it onto your
<h2>NameOfTutorial Exercises</h2> computer (drag it somewhere where you can find it).
<p>
Text for the exercises go here, just a few sugges5ons that can be used as follow up/homework. 6. Open it in a html/text editor and where you want to add the tutorial (for example at
</p>
the end or aner a certain tutorial that is already there) on the page insert the
<p> following code, replacing informa5on as needed. Reupload when done.
<a href="hip://cs.duke.edu/~rodger">Susan Rodger</a> // Duke University Department of Computer Science //
Summer 2009
</p>
<?php
</body>
</html> include (”nameOfTutorial/tutorial.php");
?>
Step 7: Directory Transfer
Step 6: TesAng and TroubleshooAng
1. Transfer the nameOfTutorial folder from “/usr/project/csed/web/alice09/
1. Open a web browser and go to the repository page
tutorials/parentFolder” into “/usr/project/csed/web/alice/aliceInSchools/
(hip://www.cs.duke.edu/csed/alice09/). Your tutorial should now be on the workshop09/tutorials/parentFolder”
page, if a warning shows go back and double check your php code, making sure
the syntax and spelling is correct. 2. Update (download, change, reupload) parentFolder’s publicTutorial.php with the
following code placed where you want the tutorial to display (for example at the
2. If the picture and text do not line up correctly (the picture aner it seems
end or aner a certain tutorial), replacing informa5on as necessary:
indented into the page) go back to the php code and add <br><br> tags right
before the </p> tag. You will need to change both tutorial.php and
publicTutorial.php. Upload the modified documents into the appropriate folder. <?php
include (”nameOfTutorial/publicTutorial.php");
You do not need to modify tutorial.php in the parent folder again. ?>
3. If something s5ll doesn’t work, let Liz know and we’ll try to figure it out.
4. If everything looks ok, then congratula5ons you’re done with another tutorial! 3. Open a web browser and go to
Cross it off the whiteboard and update your blog. hip://www.cs.duke.edu/csed/alice/aliceInSchools/workshop09/tutorials.php to
5. If you also need to upload it onto the teacher website (check with Professor check that the tutorial displays properly, if it doesn’t check the spelling and
Rodger first) then con5nue onto step 7. syntax in the php code that you inserted earlier.
2
