New Assignment: Portfolio Website

Hello Students,

Your next assignment is to create a portfolio website that documents the skills you have developed in this course, documents the work you have completed and displays your prowess with writing html and css and incorporating graphics into your website. This is your opportunity to show off the work you have completed during this class and display the creative and technical skills you have developed. Your portfolio site must be rich in graphics and utilize the techniques from our previous web projects. You are also required to write about yourself and to complete some research and write about your possible future career path, whatever that may be. You may draw upon and incorporate work you have completed any previous ROP class, or can include examples of any work or projects or hobbies that you are particularly proud of.

The organization of this site should mirror the ROP Career Portfolio.  Review the portfolio handbook in detail for tips on writing your letter of introduction and creating the other sections of your website. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio website.

Portfolio Website Requirements:

• You must create a rough pencil sketch of your websites front page, points will be deducted if your results do not reflect your original concept. Some variation is acceptable. Your sketch should communicate the graphic look and physical layout of your page elements.
• All buttons must have rollovers, extra credit for animated rollovers.
• Must have the following sections:
1. Front page or Main section - file must be named index.html for proper functionality. Think of this as the cover of a book about you
2. About Me, this should contain your letter of introduction
3. Work Samples, this should include graphic projects, animations, written assignments, lecture notes, etc...
4. Career Development, this should contain your resume, but leave off information such as phone numbers and mailing addresses... only show email for contacts
5. You can have other sections if you want to add, but each page must have content, text, photos, links, etc. No blank pages.
• This project must be created with a text or code editing program such as Komodo or Notepad
• Each page must display your web page title or name in the <title> area and self explanatory, such as "Seth Wilsons ROP Web Design Portfolio"
• Each page must contain the HTML 5 DocType declaration that will enable you to use the HTML Validator, your pages should strive to validate 100%
• Each page must contain the character encoding meta tag for utf-8 and each page must be formatted for utf-8 when created
• The front page or main page of your project must be labeled "index.html"
• Each page must contain either graphic buttons or text links to the HTML and CSS validators. Make sure you use the code to validate as HTML 5. Put these at the bottom of the page or incorporate them into your page design so that they are not obtrusive
• Each page must be formatted with CSS and CSS3 or developed with Bootstrap
• Each page should contain colors for text, backgrounds and link states
• Each page should use the same font families and use consistent sizing, spacing and style
• When complete the entire website must be less than 6Mb in file size so it can be uploaded to our servers. 

Portfolio Content Requirements:

• Maximum size allotment for portfolio is 5 Megabytes
• Write a 1 to 1/2 page biography about yourself to include in the "about me" section.
• Take a photo of yourself to include in the "about me" section or the front page, this photo can be turned into an illustration with Illustrator or processed with Photoshop if you like. A camera can be provided upon request.
• Research 1 possible career you are interested in and write a 1 page paper about the career, what does it involve, what is the salary range, what kind of education do you need, how do you break into the career. Include this in your "Career Development" section. You can use career locker for research, ask me for the password for access to career locker.
• Show your best or favorite work samples in the work samples section of your website, minimum of 3 examples must be shown, more is encouraged. You can include work from other art, design or ROP classes. Write a 1-2 paragraph summary for each work sample.
• Include your resume and letter of introduction in the career development section if your website. Do not include phone numbers or mailing addresses, only email addresses for contact info.

Meeting the minimum requirements above does not guarantee an A+. You must put the time and energy into the project and really use it as an opportunity to shine. Include more material and content and information to guarantee a stellar grade. Must be original work that you created, create some artwork, take some photographs, make a movie, write a paper... this is your portfolio, make it shine.

Grading for total of 100 points:

20 Points - Portfolio website meets assignment specs and requirements

20 Points - Portfolio contains all sections

20 Points - Portfolio links work correctly and is error free (including spelling and grammer)

20 Points - Portfolio has no missing graphics or elements

20 Points - Portfolio turned in on time and is awesome and is 5Mgb or smaller

Pencil Sketch and concepts are due: wednesday

Final Portfolio site is due: Early May

Check out these collections of amazing portfolio sites for inspiration:

50 Excellent Designer Portfolio Sites

50 beautiful and Creative Portfolio Designs

Check out these examples of web page portfolio design from previous students:

Ok, stay focused, work hard and have fun!

 - Mr.W

Flash Project

Hello Students, 

Your final project for web design is to create a flash project. You have your choice of project styles to create, you will be graded on your ability to learn the new program and create either an animation, a website or a game using flash.

Flash Project Final: Choose a Project

Flash Game:

• Use the tutorial at flashgametuts to create a brick breaker game
• Customize the artwork
• Turn in a functional flash game that can be played on another computer by publishing the game as an executable

Animation: 

• Create a 60 second animation using flash
• Animation must have a sound track
• Animation must use 2 or more sound effects
• Publish your animation so that it can be played on another computer or uploaded to a website

Flash Based Website:

• Create a website that has 4 sections using flash
• Use buttons to create navigation for your webpage
• Make your webpage about anything you want

All projects are due on wednesday

Introduction to Color Theory

Students,

Your next assignment is to create a color theory page with HTML  that shows some color harmony palletes and a short writing assignment.

Part 1 - HTML Color Page:

• Create a new HTML Page, format it with CSS to match your portfolio page and label it "colortheory.html"
• Make a link on your Web Portfolio to this new page
• Create 2 boxes with the Div tag and make them 50X50 pixels. show 2 complementary colors in these boxes and label them Complementary
• Create 3 boxes with the Div tag and make them 50X50 pixels. show 3 split-complementary colors in these boxes and label them split-complementary
• Create 3 boxes with the Div tag and make them 50X50 pixels. show 3 analagous colors in these boxes and label them analagous
• Create 4 boxes with the Div tag and make them 50X50 pixels. show 4 quadrilateral colors in these boxes and label them quadrilateral

Part 2 - Short Writing Assignment:

On your Color Theory page, write a short summary of the principals discussed, shown and demonstrated in this color theory lesson. Refer to your lecture notes. You can search for images online and research answers also. Try to address all the questions listed below:

1. What are the 3 primary colors? 
2. How are secondary colors created? Cite an example 
3. How are tertiary colors created? Cite an example 
4. What is the difference between subtractive and additive color models? 
5. How can color affect our perception? 
6. How does one color affect another? 
7. Find an example or show an example of a greyscale image. 
8. Find an example or show an example of a monotone image. 
9. Find an example or show an example of an image that uses complimentary color.
10. Make sure your images are small, no more than 100 pixels wide and are compressed properly.

- Mr.W

Understanding Computer Memory

Hello Students,

Use your notes from todays lecture and create a new page that is linked from your portfolio page.

Understanding Computer Memory Assignment:

1. Create a new, properly formatted HTML file, save it in your portfolio folder, format it with your css file 
2. Write 2 paragraphs answering these questions: 
1. With all the electronic devices you own estimate how much memory they store. 
2. How many floppy drives would you have to carry to equal the memory you have access too with your personal electronics? 
3. How much internet traffic occurs in one day? 
3. Add your notes from today’s lecture 
4. Save and create a link to this file on your portfolio page

Have fun! - Mr.W