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 that includes English class written work, Design class photo and illustration work, and Webaudio website visual and audio work. The specific 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 sometime in October.

 

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

 

Deadline for a complete and working version of your Self-Portrait Website posted on the webserver for class critiques is two class periods 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 Project Listing Webpage with links to all other projects (4) throughout this first year at Freestyle. This file must be placed in root folder and must include
1. A design with application of the 5 principles of good web design: Contrast, Repetition, Alignment, Proximity, Usability as discussed in class.
2. Use of and properly linked to a CSS file - Sites/styles/project_listing_page.css
3. A photo of yourself placed in Sites/images/name.jpg
4. All graphics for the design placed in Sites/images (see file structure below).
5. Four (4) rollover buttons for Project 1 Self-Portrait, Project 2 Narrative, Project 3 Documentary, Project 4 Experimental with disjoint rollovers to explanation images about each project similar to the practice rollovers webpage you have already completed.
6. Link your project1 button to Sites/project1/pages/index.html
7. Link all other project buttons to a temporary and generic "Under Construction" webpage located in Sites/underconstruction.html that you need to design and create
8. 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. This text is perhaps the MOST IMPORTANT part of the page because:
   • The explanation gives more detail about what the view can see. It should entice the viewer to further explore your website.
   • For students who submit website projects with college applications to boost their portfolio of HS work, this text is the FIRST THING college admission officers read on your website. It sets the tone for how professional your website is presented. Putting a particular web project in context of all of your work gives the reader a better understanding of how you actually put the website together - where did the content come from?, what applications did you use to create the content?, how did you increase your skill and knowledge?, what were you trying to present with your design? etc. Write the explanation with the intent of impressing the reader.
   • This text may not be important to you and to your friends, but for people who may evaluate you somehow in the future by looking at your work (college admission officers, co-workers, teachers, future employers, future clients, etc.), this text becomes VERY INFORMATIVE about your skill, knowledge, talent, work ethic and work standards.
9. "2009 Copyright © Freestyle ACAT or your First Name. All rights reserved." somewhere on your page (preferably on the bottom).
10. This project listing webpage should have a completely different design than all the project1 webpages. (Example)
Sites/Template/project1.dwt - this web template consists of you Project 1 Self-Portrait website design with NO CONTENT (similar to the KBTA Restaurant template that had no content - just the design). This template must include:
1. A design with application of the 5 principles of good web design: Contrast, Repetition, Alignment, Proximity, Usability as discussed in class.
2. Use of and properly linked to a CSS file - Sites/styles/project1.css
3. Content width maximum 980 px so that the website can be easily viewed on the current standard 1024 px wide monitors many people use.
4. Center your content to the browser.
5. An editable region in the header so that each page can have a unique header text/graphic.
6. Rollover buttons (all images stored in Sites/project1/images (see file structure in image below for filename convention tips) with text and links as described below
   • Home button that links to Sites/project1/pages/index.html
   • Podcast button that links to Sites/project1/pages/podcast.html
   • Essay button that links to Sites/project1/pages/essay/html
   • Family button that links to Sites/project1/pages/family.html
   • Friends button that links to Sites/pages/project1/friends.html
   • Photogallery button that links to Sites/project1/photogallery/index.html
   • Illustration button that links to Sites/project1/pages/illustration.html
   • Self-Portrait button that links to Sites/project1/pages/self-portrait.html
   • Web Gems button that links to Sites/project1/pages/webgems.html
   • Projects button that links to your Project Listing Page Sites/index.html
7. Editable region(s) for unique page main content.
8. A footer with "2009 Copyright © Freestyle ACAT or your First Name. All rights reserved." somewhere on your page (preferably on the bottom). BTW - The keyboard shortcut for the © symbol is Option + G.
Sites/project1/pages/index.html (otherwise known as your Self-Portrait Home page) must include:
1. A photo of yourself (saved as Sites/project1/images/bio_picture.jpg) that is optimized for web with min-width of 200 px.
2. Additional personal explanation text about yourself but with no last name, no real data (like birthdates, phone numbers and email addreses) with correct spelling and grammar.
3. Embedded Music Production .mp3 file (saved as Sites/project1/media/music.mp3) and the Musical Artist Statement about your music creation.
4. Include website explanation text about how this is your first website and include a short reflection on the process of making an html/css website.
5. OPTIONAL 5 points CONTENT EXTRA CREDIT- record yourself reading your personal explanation tex, Musical Artist Statement, and website explanation text. Embed the resulting .mp3 (stored in Sites/project1/media) in an artful way. For both your reading and music mp3s, choose parameter autoplay = false so that your audio files don't play over the top of each other and interfere with each other.
Sites/project1/pages/podcast.html must include
1. Embedded podcast recording(saved as Sites/project1/media/podcast.m4a) with file stats of you reading your revised "Things I learned so far" English assignment. This podcast must 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 optional SFX's to enhance the recording.
2. Written text of "Things I learned so far" with correct spelling, grammar, and spoken order that matches the podcast
3. Artist Statement about "Things I learned so far" and images on webpage and in podcast. Include a short reflection about the process of making a podcast.
4. Warning text to viewer that Quicktime is required to listen to the audio podcasts and installation software is downloadable from http://www.apple.com/quicktime/download.
5. OPTIONAL 5 points CONTENT EXTRA CREDIT - record yourself reading your "Things I learned so far" Podcast Artist Statement about and embed the resulting .mp3 in an artful way.
Sites/project1/pages/essay.html must include
1. Text of your rewritten personal essay with correct spelling and grammar
2. Embedded/Popup audio podcast recording (saved as Sites/project1/media/essay.m4a) 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.
3. Warning text 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. Your Self-Portrait illustration produced in your Design class. Create two versions of the same image 1) a thumbnail with max width of 200 px saved as Sites/project1/images/design_illustration_thumbnail.jpg and 2) a larger version with max width of 1000 px saved as Sites/project1/images/design_illustration.jpg
2. Insert your thumbnail image onto the page and have wrapped around the thumbnail your revised Artist Statement written for your Design class about your work with correct spelling and grammar.
3. Link the thumbnail to open an auto centering pop-up window that displays your larger illustration image.
4. OPTIONAL 5 points CONTENT EXTRA CREDIT - record yourself reading your Illustration Artist Statement and embed the resulting .mp3 in an artful way - either as a caption under the thumbnail or part of the largeillustration.html page.
Sites/project1/pages/self-portrait.html must include
1. Your Self-Portrait photo produced in your Design class. Create two versions of the same image 1) a thumbnail with max width of 200 px saved as Sites/project1/images/design_self-portrait_thumbnail.jpg and 2) a larger version with max heigth of 700 px saved as Sites/project1/images/design_self-portrait.jpg
2. Insert your thumbnail image onto the page and have wrapped around the thumbnail your revised Artist Statement written for your Design class about your work with correct spelling and grammar.
3. Link the thumbnail to open an auto centering pop-up window that displays your larger Self-Portrait image.
4. OPTIONAL 5 points CONTENT EXTRA CREDIT- record yourself reading your Self-Portrait Photo Artist Statement and embed the resulting .mp3 (stored in Sites/project1/media) in an artful way - either as a caption under the thumbnail or part of the largeillustration.html page.
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. Fifteen (15+) or more of a variety of your best photos from your Design class. Variety is key so show the diversity of you photography skills. Each photo must have a short caption that you enter into the Description Field in Photoshop>File>File info.
2. Appropriate gallery title, first name at least as photographer, date but NO contact info
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 1 photo (optimized for the web with maximum width of 800 px) of family members saved in your Sites/project1/images folder (see file structure in image below for filename convention tips)
2. Wrap around each photo the corresponding and appropriate text related to each person with correct spelling and grammar
3. OPTIONAL 5 points CONTENT EXTRA CREDIT- record yourself reading your text for each family member and embed the resulting .mp3s (stored in Sites/project1/media)in an artful way.
Sites/project1/pages/friends.html must include
1. At least 1 photo (optimized for the web with maximum width of 800 px) saved in your Sites/project1/images folder (see file structure in image below for filename convention tips).
2. Wrap around each photo the corresponding and appropriate text related to each person with correct spelling and grammar.
3. OPTIONAL 5 points CONTENT EXTRA CREDIT- record yourself reading your text for each friend and embed the resulting .mp3s (stored in Sites/project1/media)in an artful way.
Sites/project1/pages/webgems.html
1. This webpage is to feature "gems" on the web that you find interesting and wish to share. These "gems" can be videos, blogs, forums, articles, galleries, another website, etc.
2. Include some text about what people can expect to see on this webpage - in other words, define "web gems" for the viewer
3. Choose a web gem from the internet and then feature it on this webpage. Also include some explanation text about why you have chosen this particular web "gem" and it's meaning or significance to you.
4. Each web gem entry must have a date. The most recent entry must be at the top of the listing.
5. To make your page more visually interesting and enticing, Include at least one or all of the following visuals: Embed the video on your page or take a screenshot and link the image to the "gem" or make a text link to the "gem", etc. I suggest you place all your web gems photos and media in a separate folder in Sites/project1/webgems-media because you'll be adding more and more items to this folder. We don't want your other folders to be crowded with webgems media.
6. For the Self-Portrait Exhibition, you need only one of these web "gems".
7. Starting in November, every week until the end of the Semester 1, you will asked to add to your web gems page placing the most recent "gem" with the posting date and it's explanation at the top of the page. The purpose is to get use to updating your webpage every week much like what real webmasters have to do for their websites daily.
8. OPTIONAL 1 point EXTRA CREDIT for each webgem entry - record yourself reading your webgem explanation each week and embed the resulting .mp3 (stored in Sites/project1/webgems-media) in an artful way.

Project Listing Webpage and Self-Portrait Website File Structure

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.
9. Participation in class website critiques
10. Partiipation in Project 1 Self- Portrait Website design and layout reflection.