Assignments

Assignment 8.1: Forms

Description

Make two form pages. The first form page is a simple demonstration of your knowledge of the form controls. The first form must include the following controls:

• Text input
• Password box
• Radio button set of at least five elements
• Check box set of at least five elements
• A textarea box
• A select menu presented as either a list box or a drop menu with at least seven options
• A submit button and a reset button

Be sure to group your controls into fieldsets with legends when appropriate.

The second form must be a graphically rich page using CSS to control the look and feel of the page. The page must include at least five of the controls listed above and a file control. The submit and reset button must be graphics.

Validate your code. Make the necessary corrections. Upload your pages to your web server space and post the URLs in the Class Discussion.

Purpose

The purpose of this assignment is to review the form tags and understand how to use form tags with CSS:

• To learn the underlying HTML of forms
• To write accessible forms
• To design make graphically rich forms

Tools

• TextWrangler (Mac) or Notepad ++ (PC)
• Firefox with FireFTP installed

Due Date

This assignment is due by the end of Module 8.

Submission Directions

Place all of your files in a folder, and name the folder m8_yourlastname. Save your folder to your server space. ZIP the local copy of your folder. Post the URL to the appropriate topic in the Class Discussion, and attach the ZIP of the folder.

Use the following file-naming convention:

• m8_yourlastname.zip

 

• Assignment 8.2:  Project 3: Personal Portfolio

For this project you will be building a portfolio of your work. The portfolio will serve as a vehicle for you to display your work as you progress through your degree program. You are building a website for yourself to display your growing skills. This portfolio will evolve over the course of your education. As you take more courses you will have more work to show.

This is a professional portfolio, and as such it is a more targeted site. You should select and carefully edit the work you want to show. This portfolio is a demonstration of your professional skills and judgment.

Your target audience includes your department director, instructors, classmates, and eventually, future employers. You will use this site as part of your mid-point review presentation. The committee will want to know more about you. They will need to see demonstration of your technical skills as well as your design skills. As you think about this portfolio, consider how you want to be perceived and design accordingly.

Your portfolio should include the following sections:

• Home: to establish the look and feel of your site. To inform the users what to expect in your site.
• Personal history/Artist's statement (optional): this can be incorporated in the home page if desired.
• Resume: Must be in HTML with CSS. You can link to a PDF as well, but there needs to be an HTML version incorporated in the site.
• Portfolio: Include carefully chosen examples of your work. How you present them is up to you, but be sure that they read well on the Web. Extremely large images and videos will need to be optimized, and in some cases reduced to work well. If you have professional experience and wish to show some of that work as well, you should do so.
• Contact Page 

Final content and page list will vary somewhat from student to student -- the important thing is that the final piece fairly represents you.

A further consideration is that your portfolio is a "living" document. It is not a static brochure, but rather a growing, evolving site. As you think through the navigation, keep in mind that you will be updating this site in the future to include a growing body of work.

Each page must include:

• The site name and any branding you want associated with you
• Global navigation to all the sections of the site
• Local navigation, where appropriate
• A breadcrumb trail where appropriate and only if your site is deep enough to require one
• The section title
• The page title
• The content
• A foot with a copyright

If you already have a portfolio that you like and fits you well, you can propose to create another site, but you will need to show your site and get approval. Everyone in this program is required to have a web-based portfolio.

See DUE DATES section below for breakdown of individual module assignments.

Technical Requirement

This is a web-based portfolio. You should design using web "friendly" technologies. The site should be developed in HTML with external CSS and JavaScript. You may use Flash to enhance your site with animation and interactivity. This is an HTML class -- you may not build a Flash site. You may include sound files, video, animation, and anything else you feel will show your work off in its best light.

Purpose

• To create a showcase for your growing body of work.
• To gain experience designing a site that will be updated on a regular basis.
• To gather examples of your work and collect your creative history as a student.

Tools

• Mac: BBedit
• PC: Notepad ++
• Use the image editor of your choice -- Fireworks or Photoshop
• JavaScript and JavaScript Libraries
• Flash, if desired, to enhance the site
• Software for creating and compressing sound such as Audition or Garageband
• Software for creating and compressing video such as Quicktime Pro or Sorenson Squeeze

Due Dates

Due Module 8: Define, Describe & Gather -- Begin collecting your content. Make a list of all the work you would like to show. Begin writing your resume, if you don't already have one. Write one paragraph that describes you as an artist. Write a second paragraph about what you would like your portfolio to do for you -- what would you like people to understand about you from viewing your portfolio?

Due Module 9: Finish collecting content and begin designing -- Continue to collect and refine your content. Make a list of all the different kinds of media your portfolio will need to accommodate. Begin grouping your content into categories. Start thinking about the hierarchy of your categories. Complete your resume.

Make a list of everything that must be on each page. Using the media of your choice, make your first design pass. You can use paper, pen and pencil or use your computer. Keep your designs flexible. Remember, this is just your first pass. Pick just three pages from your site to design -- don't try to do all of them. Be sure you have included everything that must be on every page.

Due Module 10: Redesign -- Using the feedback you received from your first design, re-work your site design. Pay particularly close attention to the navigation. Pay attention to the value range in your colors. Make sure there is enough contrast in the darks and lights.

Due Module 11: Complete design and begin coding -- Do any needed final tweaks on your design and begin coding. Validate your pages as you go. Separate the CSS out into external sheets and link to your external CSS. If you are going to need any special kind of interactivity, begin planning for it now. If you want to use some JavaScript or JavaScript Libraries, start looking the code you will need.

Due Module 12: Continue coding and begin production work on your content -- Continue making your pages and refining your code. Make any last tweaks to your designs as you code. Make sure all your pages validate.

Due Module 13: Finish coding and complete production work on your content -- Complete coding. Get as much working as you possibly can, even if it is rough.

Due Module 14: Final clean up, editing, submit -- Use this module to clean up any loose ends. This is the time to test your site and fix all the little snags and tidy up the messy bits.

Submission Directions

Put your files in a folder. Name your folder "m8_final_yourlastname". Upload your folder to your server. ZIP the local copy of your folder. Post the URL to the appropriate Class Discussion topic and attach the ZIP of the folder.