Web Production / Audio Engineering
Project 1: Self-Portrait Website Requirements

The purpose of this individual Self-Portrait Website Project is to showcase your work in writing, digital photography, graphic design, audio engineering and webproduction by learning how to design, create, layout, edit and publish your ideas through a personal website. The content and design of your Self-Portrait Website is entirely up to you but with some guidelines below. The audience for your website is the world. When completed, the general public will be invited to attend an Exhibition of your website at Freestyle.

 

The applications you will use for this project, at the minimum, include Adobe Photoshop, Adobe Illustrator, Apple Garageband, Microsoft Word, and Adobe Dreamweaver .

 

Deadline for a complete and working version of your Self-Portrait Website posted on the webserver for class critiques is one week prior to the Exhibition and continuing through the day of the Exhibition. Final revisions on all pages after all critiques must be completed by the Self-Portrait Exhibition Date and Time.

 

A complete Self-Portrait website (see examples here) needs to include at least the following pages (see file structure below)- you can add more if you wish:

Sites/index.html is your homepage intro to yourself with links to all other projects (8) throughout 2 years, must be placed in root folder and must include
1. A personal original logo/graphic (not just a photo) of yourself placed in Sites/images
2. Appropriate text to introduce yourself and your projects with correct spelling and grammar - something about you being a student at Freestyle and the classes you are taking at Freestyle. Perhaps write something about how each project button takes you to a different website design that showcases the work you do in all of your classes at Freestyle.
3. "Copyright 200# ACAT or your First Name. All rights reserved." somewhere on all your pages (preferably on the bottom)
4. This homepage can have a completely different design than all the project1 webpages. (Example)
5. All project1 webpages described below (except Sites/index.html) must have the same design template and be saved into your project1 folder. The project1.dwt template MUST be saved into the Sites/Templates folder
6. Choose one of your pages below to be your Sites/project1/pages/index.html webpage. This will be the first page people will see for your Self-Portrait website. I recommend your Bio or Credo page.
Sites/project1/pages/bio.html or Sites/project1/pages/index.html must include
1. Sites/project1/images/bio_picture.jpg (optimized for web with min-width of 200 px).
2. Additional text about yourself but with no last name, no real data (like birthdates, phone numbers and email addreses) with correct spelling and grammar
3. If this is your index page, you might want to include text about how this is your first website and include a short reflection on the process of making an html/css website.
Sites/project1/pages/credo.html or Sites/project1/pages/index.html must include
1. Embedded audio Sites/project1/media/credo.m4a podcast recording with file stats of you reading your revised credo with a cover image, at least 5 other images, musical intro and outro (either GB loops or original music with virtual or real instruments that you play), and at least 2 SFX's to enhance the recording
2. Artist Statement about credo and images on webpage and in podcast
3. Written text of credo with correct spelling, grammar, and spoken order that matches the audio recording
4. At least 1 additional visual/graphical representation of (or parts of) your credo not already in the podcast placed in Sites/project1/images
5. If this is your index page, you might want to include text about how this is your first website and include a short reflection on the process of making an html/css website.
Sites/project1/pages/essay.html must include
1. Text of your rewritten personal essay with correct spelling and grammar
2. At least 1 additional visual/graphical representation of (or parts of) your essay not already in the podcast placed in project1/images
3. Embedded/Popup audio Sites/project1/media/essay.m4a podcast recording with file stats (.m4a, ## MB) of you reading your rewritten essay with a cover image, at least 10 other images, musical intro and outro (either GB loops or original music with virtual or real instruments that you play). No music or SFX'sin the middle of the podcast are required.
4. Indication to viewer that Quicktime is required to listen to the audio podcasts and installation software is downloadable from http://www.apple.com/quicktime/download
Sites/project1/pages/illustration.html must include
1. Sites/project1/images/illustration_thumbnail.jpg or .gif (optimized for web with min-width of 200 px) of at least 1 of your Self-Portrait illustrations.
2. Rewritten Artist Statement about your work with correct spelling and grammar
3. A pop-up or new window link from your thumbnail to a larger Sites/project1/images/illustration.gif (optimized for web with max width of 1000 px)
Sites/project1/pages/self-portrait.html must include
1. Sites/project1/images/self-portrait-thumbnail.jpg (optimized for web with min-width of 200 px) of your Self-Portrait Photo produced in your Design class.
2. A pop-up or new window link from your thumbnail to a larger Sites/project1/images/self-portrait.jpg (optimized for web with max width of 1000 px)
3. Rewritten Artist Statement about your Self-Portrait Photo with correct spelling and grammar
Sites/project1/photogallery/index.html in a new window or a pop-up window as created with Photoshop's automated Web Photo Gallery feature must include
1. At least 15 of your best photos from your Design class
2. Appropriate gallery title, first name as photographer, NO contact info, and date
3. Since you can't apply your template to these photogallery pages created by Photoshop, at least choose complimentary colors to your main design for the photogallery
Sites/project1/pages/family.html must include
1. At least 2 photos (optimized for the web with maximum width of 1000 px) of family members saved as Sites/project1/images/family1.jpg and Sites/project1/images/family2.jpg
2. Appropriate text related to each person with correct spelling and grammar
Sites/project1/pages/friend(s).html and/or Sites/project1/pages/pet(s).html must include
1. At least 1 photo (optimized for the web with maximum width of 1000 px) saved as Sites/project1/images/friend(s).jpg or Sites/project1/images/pet(s).jpg of that friend(s)/pet(s)
2. Appropriate text related to that person/pet with correct spelling and grammar
Sites/project1/pages/opinions.html
1. Weekly blog/opinion page that includes at least 1 entry every FULL school week week about the topic of your choice with correct spelling and grammar
2. Each entry must be dated and must be at least 200 words in length.
3. Each entry is due by the end of the day on Fridays.
4. Optional: When you have more than 5 entries and the page is running long, create archive page(s) and links to those archive pages from your main blog/opinions page.
Navigation criteria - you must include these rollover image buttons (horizontally or vertically) with correct links and in any order of your choice
1. Home button that links to either Sites/project1/pages/index.html
2. Projects button that links to Sites/index.html
3. Bio button that links to Sites/project1/pages/bio.html
4. Credo button that links to Sites/project1/pages/credo.html
5. Essay button that links to Sites/project1/pages/essay/html
6. Family button that links to Sites/project1/pages/family.html
7. Friend(s) or Pet(s) button that links to Sites/pages/project1/friend(s).html or links to Sites/project1/pages/pet(s).html
8. Photogallery button that links to Sites/project1/pages/photogallery/index.html
9. Illustration button that links to Sites/project1/pages/illustration.html
10. Opinions button that links to Sites/project1/pages/opinions.html
11. Self-Portrait button that links to Sites/project1/pages/self-portrait.html
Optional comments page or region within a page that allows viewers to comment on your webs

Assessment for this project will include

1. Completion of Paper Prototype drawings
2. Completion of content requirements listed above for each page
3. Completion of file structure requirements as shown above
4. Use of the web design concept: Contrast
5. Use of the web design concept: Repetition
6. Use of the web design concept: Alignment
7. Use of the web design concept: Proximity
8. Use of the web design concept: Usability including rollover button links from every page to every other page. Either your Home and/or Projects button must link back to Sites/index.html
9. Participation in class website critiques
10. Partiipation in Project 1 Self- Portrait Website design and layout reflection.