Web Portfolio

Step 1: Activate your UW shared web hosting

1. Visit uwnetid.washington.edu.
2. Click on "Computing Services" on the left sidebar.
3. If under "Inactive Services", check the box next to "Dante/Vergil Account".
4. If under "Inactive Services", check the box next to "Student Web Publishing".
5. Click "Subscribe"

Step 2: Browse to your website

1. Open a browser and visit http://students.washington.edu/<UWNetID>/, replacing <UWNetID> with your own UWNetID.
2. You should see a page with some text and an under construction icon.

Step 3: Change Cyberduck Preferences

1. Open Cyberduck.
2. In the top-left corner of your screen, open the Cyberduck menu and select "Preferences".
3. In the "General" tab, make sure that the "Use Keychain" box is selected and your Default protocol is "SFTP (SSH File Transfer Protocol)".
   
4. Switch over to the "Editor" tab, make sure that the "Always use this application" box is checked, and then use the drop-down menu to select "Choose..." and find Visual Studio Code in your Applications folder.
   

Step 4: Create a server connection using SFTP

1. In Cyberduck, click the plus symbol (+) in the lower-left corner (circled in image below).
2. Make sure "SFTP (SSH File Transfer Protocol)" is selected in the drop-down menu at the top.
3. [optional] Change the Nickname field.
4. Type vergil.u.washington.edu into the Server field.
5. Enter 22 into the Port field.
6. Enter your UWNetID into the Username field.
7. You should see your new "bookmark" show up in a row in the original Cyberduck window.
   
8. Exit the dialog box by clicking the red circle and then double-click your new bookmark.
9. When asked for your password, make sure that the "Add to Keychain" button is selected so that it will save your password.
   
10. If you get an unknown fingerprint popup, check the "Always" box before clicking "Allow" so that it won't prompt you for this in the future.
    

Step 5: Organize your remote filesystem

1. Your Cyberduck window should now show a public_html folder: double-click it to enter.
2. Click the Action icon (⚙ ) in the top-middle of the Cyberduck window and select "New Folder..."; name it img, which is short for "image".
3. Create a second new folder called js, which is short for "javascript".
4. Double-click the img folder and create a folder called project-images.
5. Click the triangle pointing up (▲) to go up a folder.
6. Double-click the js folder and then create a folder called projects.
7. Right-click here and choose "Save link as..." to download p5.js to your Desktop.
8. Drag the p5.js file from your Desktop into the Cyberduck window to upload it to your js folder.
9. Go back to the public_html folder and it should look like the following (minus justin.jpg).
   
10. Right-click here and choose "Save link as..." to download index.html to your Desktop.
11. Drag the index.html file from your Desktop into the Cyberduck window to upload it to your public_html folder. It will ask you if you want to overwrite the existing file; click Continue.
12. Right-click here and choose "Save link as..." to download style.css to your Desktop.
13. Drag the style.css file from your Desktop into the Cyberduck window to upload it to your public_html folder.

Step 6: Upload an image of yourself

1. Find an image of yourself that you would like to add to your portfolio (justin.jpg in the example above).
2. Drag this image into the Cyberduck window to upload it to the img folder.
   • Option 1: double-click into the img folder first and drop the image anywhere.
   • Option 2: drop the image directly to the right of the img folder name, making sure that the folder is highlighted when you release your mouse.

Step 7: Edit your index.html file

1. Right-click on index.html and choose "Edit with > Code"
2. Look through the index.html file — we've left some comments (text inside of comments <!-- looks like this -->) to help you find your way around.
3. Change one of the images on your site to be the picture of yourself:
   • You will need to change the src field within the first img tag in the HTML to be img/<image name>, where <image name> is the name of the image file you just uploaded (e.g. <img src="img/justin.jpg">).
   • Your TA will better explain how to do this — ask for help if you need it!
4. Change the text on the page, sharing details about yourself or why you are taking this class.
   • For an example, see the Example section.

Note: your web page will look a little strange right now, since you haven't added any projects yet (e.g., there will be some images that don't load). Don't worry about this for now — we'll fix it soon!

Step 8: Submit your website URL

• Copy your portfolio URL and submit it to the following two Canvas assignments, which we will use when we grade your portfolio during the quarter:
  1. Portfolio Update 1
  2. Portfolio Update 2

Note: More resources can be found at: https://itconnect.uw.edu/connect/web-publishing/shared-hosting/

---

Checkoff

• Show your website to a TA.
  • It must display a picture of you that is stored on your UW server space.
  • It must contain information about yourself and why you are taking CSE120.
• Show your server space directory tree in Cyberduck to a TA.
  • Must contain the img, project-images, js, and projects folders in the correct places.
• Show your index.html file to a TA.
  • Must be styled correctly with html, head, body, title, and paragraph (p) tags.
• Your website URL is submitted to the TWO Canvas assignments linked above in Step 8.

Step 1: Connect to your website in Cyberduck

You can refer to the previous section if you don't remember how to do this :)

Step 2: Create a new javascript file for your project

1. Navigate into the projects folder (inside of js)
2. Click the Action icon (⚙ ) in the top-middle of the Cyberduck window and select "New File..."
3. Name the file <proj name>.js, where <proj name> is the name of your project (e.g. taijitu.js)

Step 3: Edit your project javascript file

1. Right-click on your new file and choose "Edit with > Code"
2. Convert your Processing code to p5.js code using this online converter and paste the output into your javascript file.
   • The converter may leave you additional comments in the code about further changes that you will need to check for or make before the converted code works correctly. Do not hesitate to ask a staff member about these when you encounter them!
   • If the converter reports messages in the error log, please let a staff member know so that we can help you troubleshoot! If you make a post on Piazza, please include the full error message as well as the code that you attempted to convert (and please make your post private).
3. Save your javascript file
   • IMPORTANT: Any time you edit your js file on your website, you will need to hard refresh your browser (Cmd+Shift+R on Mac; Ctrl-F5 on Windows) to see the changes.

Step 4: Create a new HTML file for your project

1. Navigate back out to your public_html folder
2. Right-click here and choose "Save link as..." to download project.html to your Desktop. This file will act as a template all of your project pages.
3. Drag the project.html file from your Desktop into the Cyberduck window to upload it to your public_html folder.
4. Rename project.html so that it has the same name as the project you're uploading (e.g. taijitu.html).
5. Open your new html file in VS Code.
6. Change taijitu.js in the second script tag to import the correct javascript file for your project
7. Update the body with your actual project name, description, and experience
   • Part of your portfolio grade will be based on including sufficient details in your description and experience sections
8. Save your html file.

Step 5: Add a screenshot of your project to index.html

1. Run your project in Processing.
2. Take an interesting partial screenshot of the running project:
   • Partial screenshot directions for Mac and Windows.
3. Save your screenshot to your desktop with your project name and using .jpg or .png as the file extension
4. Drag the image file into the project-images folder (inside of img) in Cyberduck to upload it
5. Now edit your index.html and change the following line of code:

   <a href="[NAME OF THE PROJECT].html"> <img src="img/project-images/[NAME OF THE PROJECT PICTURE].png" alt="image of [NAME OF THE PROJECT] project" /></a>

   with the correct file names for your project.
   • If you've already uploaded a project and want to add another one, you can copy and paste the above line of code in the same place within index.html, and edit it from there.
6. [optional] Adjust the layout of your images and text in index.html using HTML and CSS (in style.css.)
   • We will not be covering more HTML in this course, so you will have to teach yourself.
   • There are many online resources for HTML, such as this one.

---

Checklist

• Your website displays a (non-broken) picture of your newly-added Processing project.
• Clicking on that picture takes you to a separate html page for that project.
• The project page has your working Processing project along with a project description and details.
  • If your project is not displaying, see the Debugging section down below for tips. Don't hesitate to ask a staff member, either!

Make sure your portfolio is properly updated: we will be checking three times during the quarter. You are encouraged to include as many assignments in your portfolio as you wish, but we will be specifically checking for the ones listed below. Please be aware that many of the later assignments can be quite difficult to convert to p5.js so ask for assistance early!

We strongly recommend updating your portfolio as you complete assignments so that you don't forget the process and don't have to scramble to do it all at once just before the Updates.

Creating Your Porfolio (January 23)

Minimum project set:

• None, just need info, a photo of yourself, and the correct website organization.

Portfolio Update 1 (February 5)

Minimum project set:

1. Taijitu
2. Logo Design
3. Lego Family
4. Animal Functions

Portfolio Update 2 (February 26)

Minimum project set:

1. Taijitu
2. Logo Design
3. Lego Family
4. Animal Functions
5. Jumping Monster
6. Creativity Assignment
7. Controlling Elli
8. Word Guessing

---

The following webpage is an example you may choose to follow: http://students.washington.edu/wolfson/

Notes:

• The main page (index.html) contains an image of me along with details about myself and why I teach CSE 120.
  • You can "View Source" to peek at the HTML.
• This portfolio contains one project (Taijitu) that runs properly in the browser and includes a sufficient description and experience report.

Unfortunately, the Processing → p5.js transition is messy because the two languages are very different. Inevitably, your p5.js code will break and your project in your portfolio will not display (i.e. the drawing canvas will not appear on the HTML page). Oh no! What can you do?

In the Processing IDE, we had the Message Area, which is the normally-grey bar just below your code. This Message Area turns red if it finds an error in the line of code that your cursor is currently on (see example to the right).

If an error occurs during the execution of your program, then the error message(s) are printed to the Console, which is the black area below the Message Area. There is a similar Console in your browsers that will let you see your error messages in your p5.js projects, too!

Finding the Developer's Console

Google Chrome:

• Option 1: Right-click anywhere on the page and select "Inspect". A side panel will open up. On the top bar of this side panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+J (Mac) or Ctrl+Shift+J (Windows)

Mozilla Firefox:

• Option 1: Right-click anywhere on the page and select "Inspect Element (Q)". A bottom panel will appear. On the top bar of this panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+K (Mac) or Ctrl+Shift+K (Windows)

Apple Safari (Mac only):

• Note: You must first go to the "Safari > Preferences" menu, click on the "Advanced" tab, and then check the "Show Develop menu in menu bar" button.
• Option 1: Right-click anywhere on the page and select "Inspect Element". A bottom panel will appear. On the top bar of this panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+C

Reading Error Messages

Error messages show up in red in the Console. Learning to read the error messages is difficult, as there is often extraneous information contained in the message. Focus on the messages that show your p5.js file (e.g. taijitu.js:1) indicated on the right -- the number after the colon indicates which line number the error occurred on.

Some common errors:

• size() is not a valid p5 function: Change the size() function for creating your drawing canvas to createCanvas().
• Unexpected identifier: Unconverted datatype. Look for a leftover int, float, boolean, char, or color in a variable declaration and change it to var.
• Unexpected token {:
  • You have an extra set of curly braces somewhere in your code, OR
  • Unconverted function return type. Change your function return type (void, int, etc.) to the keyword function.
• Unexpected end of input: Likely you have an unmatched { somewhere in your code.

General Workflow

1. Open your portfolio in your web browser and click on the image of the project you are debugging.
2. Open the javascript file (.js) in VS Code through Cyberduck (right-click, "Edit with > Code").
3. Open the Console in your browser and look for error messages.
4. Make changes to your code in VS Code and then save the file. Cyberduck should automatically upload your modified file to your website.
5. Hard refresh your browser (Cmd+Shift+R on Mac; Ctrl-F5 on Windows) to view your changes.
6. If your project shows up now, then you're done! If it still does not show up, then go back to Step 3.