Lab 5 - kc additions

FILMP/MEDP 150 LAB 5 LESSON PLAN

INTRODUCTION TO HTML CODE/DIRECTORY STRUCTURE/INFORMATION ARCHITECHTURE and LAUNCHING WEB SITE

by the completion of this lab, students should be able to do the following:

• Access their accounts, blackboard and online portfolio
• Uploaded online portfolio site, know where to find site (on blackboard) should they need to re-upload
• Be able to open “index.html” file in Textwrangler, replace “welcome paragraph” with artist statement, swap out photo, change photo html reference, and put their own name into the site
• Have photo and draft of artist statement online before end of class.
• Have blogspot blog up and running.

TO LAUNCH PORTFOLIO SITE:

Step One:Download artist statement and photo onto desktop.Save Artist Statement in Plain Text film format.Save photo as“Yourphoto.jpeg.”If the photo is a gif, convert to a jpeg in Preview.

Step Two:Download “Portfolio Materials” ‘zip’ fileand blogging information sheet located under Course Materials on Blackboard.The zip file should decompress when downloading.The result should be a folder with a set of files and folders including an index and an 'about' file, as well as folders for images, media, code, podcasts and scripts, and html.

Step Three:While students are looking at the files and folders on their desktop, discuss 'site architecture' briefly with students so that they understand the relationship between the 'directory structure' of the folders, and how it relates to the site design.(There is a sheet on this on the BB site.)

Step Four:Students need to place their “Yourphoto.jpeg” image in the Images folder in the directory.

Step Five:The students will be modifying their sites online.This means they need to open their accounts, then find the 'SITES' folder on their account.Account opening instructions can be found on the fm.hunter.cuny.edu website under 'Support'. When they have identified the SITES folder in their account area on the server, they need to open it, and remove the old index page and other material (which are placeholders.)They can then take the new material out of the MEDP150/160 folder and put it into the sites folder.

Step Six:They can then use a browser, such as Firefox or Safari to check the unmodified site.Show them how to view the code using the browser “View Page Source” command in the View pull down menu.Explain that this is a 'read only' way to understand what is happening with the HTML behind the web page.It might help to explain the <td>“table cell” and <tr> “table row” commands, so that they can see how the site displays a table, and how their statement and photo will go in two adjoining cells of a table row.

Step Seven:Using Textwrangler, students need to open the index.html file from their site.Then they need to identify the location where the artist statement goes, and remove the placeholder material carefully, so as not to disturb the HTML code.They then need to paste their statement back into exactly the same spot.Nearby on the page is the code for the photo.

Step Eight: They then need to go modify the 'img src' command so that “Yourphoto.gif” is replaced with “Yourphoto.jpeg.”

Step Nine:They then need to look in the HTML where they will find the placeholder 'YOUR NAME' and put in their own name.

Step Ten:They should then check the results using a browser tool.

Step Eleven:For the blog site, they should consult the Blogging 101 Worksheet.