Thank You Web Design Class of 2015

Thank you to all my great students from this years ROP Web Design class. There were some very impressive portfolios and final projects and I look forward to seeing a few of you in my classes next semester.

This blog will go live again for the spring semester 2016 ROP Web Design class.

- Mr.W

End of Year Course Survey

Hello Students,
With current legislation regarding education in California and a looming budget crisis for California schools, it is more important that ever that we gather information about your experiences in ROP courses and your future plans for education and career.

Please click the link below and fill out the survey. It takes about 3 minutes and is very important to ensure that ROP courses are made available for future classes.

Link: ROP End Of Year Course Survey

Thank you!

- Mr.W

Web Design Final Project

Hello Students,
Now is the time to find a final project concept and begin working on it asap. Your final project should demonstrate your professional skills in web design, project management, programming, game development or digital media.

Final Project:
Choose from one of the options below and begin your final project asap:
Create a website for someone that needs one, could be a teacher, coach, friend or even yourself
Create a game, this could be a flash game or an HTML based choose your own adventure game
Propose your own idea. Do you have an idea for a final project? Speak to your instructor to get it approved.

All projects are due for review on our finals day.

Good luck everyone!

- Mr.W

Explore Programming Languages with Code Academy

Hello Students,
In this modern tech industry having a well rounded skill set in web design and programming languages is incredibly important to staying in demand. HTML and CSS are just the first components to creating websites that are compelling, interactive and intuitive. In this project you will explore other languages, complete 3 programming goals and complete one entire lesson in the language of your choice.

A gifted mathematician, Ada Lovelace is considered to have written instructions for the first computer program in the mid-1800s

Web Programming Language Exploration Project:

• Log into Code Academy and find the language skills section
• Complete the "Introduction to Javascript" and "Choose your own Adventure" modules
• Complete the "Introducing JQuery" module
• Complete the "Introduction to PHP" module
• Complete the "Python Syntax" and "Tip Calculator" modules
• Complete the "Introduction to Ruby" and "Putting the Form in Formatter" modules

When you have completed these modules, navigate to the GOALS section and complete these 3 modules:

• Animate Your Name
• About You
• Sun, Earth and Code

When you have completed the GOALS modules, you must choose on of the languages and complete its entire module, Javascript, JQuery, PHP, Python or Ruby.

Have fun! All progress should be complete by the 29th!

- Mr.W

Web Design Reverse Learning Project

Hello Students,

In this project you will research, write and guide the class through a learning exercise. Use the internet to research a specific topic or activity or use your own knowledge as a base for creating an engaging exercise. Follow the guidelines for writing interesting lessons below and be ready to present to the class. You can use movies, powerpoint presentations, hand outs or online resources to enhance your activity.

Web Design Reverse Learning Project:

Use all resources available to write and develop an fun exercise or activity that can be taught to the class in about 10 minutes or so. Follow the structure laid out below to format your lesson. Teach the class a skill that is useful and relevant to using computers, creating digital media, using the internet or other related IT skills, techniques or concepts.

Getting Started:

• Think of something you would like to teach to the class, must be related to web design, digital media, IT, internet or digital literacy skills... it could be a cool piece of code that enhances a website or a cool trick or hack you learned... thing of something fun that everyone can try
• Use the internet to research and gather resources, assets and information
• Use presentation software like powerpoint to create a presentation or use work to create hand outs, you could even use a video to help deliver your information or to engage the audience
• Follow the structure laid out below to create a compelling activity, a good lesson will have a hook to get the audiences attention peaked, information should be presented well and there should be some kind of hands on activity.
• Be ready to present and teach the class

How to write a good lesson for instruction:

Follow the outline below to create your lesson or project, try to have something for each section detailed in your presentation. Use my model lesson as a guide if you need more clarification.

Objectives and Goals: State the objective or learning outcome for your project. What do you expect people to be able to do when your lesson or activity is complete

Hook or Anticipatory Set: Use something to engage the audience and get their brains primed for learning. This could be an interesting image or even a video or a prop. It should be relevant to the material you are covering in your lesson

Lecture or Present: Talk about the material in your lesson or activity, provide some background information or history that is relevant. Discuss or present details about the material. A few bullet points or slides and images are all that is needed to frame the activity

Hands On Activity / Guided Practice or Independent Practice: Have a hands on activity for the class to engage in, or an independent practice activity for students to put their new knowledge to work

Model Lesson: How To Customize The Icon Of Your USB Flash Memory Thumbdrive:

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 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 Technical Requirements:

• Your portfolio website must have the following sections:
1. Front page: file must be named index.html for proper functionality. Think of this as the cover of a book about you. This page can contain your letter of introduction
2. Career Development: This should contain your resume, your career research assignment and your letter of recommendation.
3. Work Samples: this should include graphic projects, animations, written assignments, lecture notes, artwork, previous website projects, etc. Anything you have created that makes you proud should be included as long as it's content is professional. Written details about each work sample must be included
4. Contact: This page can contain your email and any other links or contact information, no phone #'s or mailing addresses
• This project must be created with a text or code editing program such as Komodo
• 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
• 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 and each page should be mobile friendly
• 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:

• Have an example of everything required in the ROP portfolio handbook, letter of introduction, letter of recommendation, resume, work samples
• Take a photo of yourself to include in 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.

Design Style:

• Your website should be professional and clean looking
• Your website layout should be easy to navigate and text should be easy to read
• Each page should show the same menu at the top for easy navigation
• Your website should show good design choices for fonts, colors and style
• Your website should demonstrate the techniques, skills and abilities you have studies during the course of this class
• Your website should be viewable on mobile devices

Website Flow/Organization:

Your website must follow the flowchart below as closely as possible...

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.




How To Add Validation to your website:
Validating HTML and CSS is a great way to demonstrate your coding skills. Use the code below at the bottom of your page to add a validate button to your pages...

This is an example of code to add both HTML and CSS Validate buttons to your webpage

This is how the Validate code above will be displayed, you could also use an HTML5 logo and CSS logo to make graphical buttons for your validators

How Your Portfolio will be evaluated:

• Contains required content and format
• Well organized
• Free of grammar errors
• ROP related work samples
• Shows creativity
• Shows skill development
• Appropriate for use in job search
• Professional yet creative appearance

Final Portfolios are due May 6th!

Grading for total of 10 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 6Mgb or smaller

Check out these collections of amazing portfolio sites for inspiration:

50 Excellent Designer Portfolio Sites

50 beautiful and Creative Portfolio Designs
Last Years Portfolio Contest Winner: Jasper

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

Ok, stay focused, work hard and have fun!

 - Mr.W

Gif Animation Challenge!!!!

Hello Students,

Your newest assignment will challenge your animation and creativity skills to the max! Choose one of the challenges below to complete, but choose wisely!

Gif Animation Challenge:

Choose one of the subjects below to animate in the most awesome way evar. You will be graded on the sheer awesomness of your animation:

• A cat is typing on a computer keyboard and knocks the computer off the table in frustration
• Ronald Reagan is riding on an ostrich at full gallup and shooting jelly beans out of his eyes
• Godzilla is a DJ spinning records on a turntable in a dance club
• A celebrity of your choice removes their face as if it were a halloween mask to reveal a reptilian creature beneath
• A ferret transforms into a giant godzilla sized monster and begins to wreck a city, knocking over skyscrapers
• Find a video clip of a celebrity or politician of your choice and rotoscope onto their face Steve Buscemi eyes
• Find a short video clip of a sword fight and replace the swords with Light Sabers (The shorter the better, trust me on this one... 1 second of video has 30 frames and you have to draw red and blue lines on each frame 1 by 1, this subject is not for the newbies)

LASER CAT COMPELS YOU TO COMPLETE THE GIF CHALLENGE!

Good luck!

- Mr.W

New Assignment: Making Animated Gifs

Hello Students,

Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.

What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frame. Unfortunately they can't have sound. You can do some really cool stuff with Gif's. Check out Fluxmachine for inspiration.

What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...

This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS

Gif Assignment:

Part A

• Create an animated gif, you can use photographs to make an animation, or a short animation with sequential drawings on paper. You can use found images as well or even short video clips. Think of something simple for the first example... just use your imagination and use this opportunity to become familiar with the gif process
• Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop. Try a google search and you will find many tutorials and different techniques
• This is just a quick project to get you used to creating gifs, make sure they are short, not too big in file size and loop forever. Use the Save For Web dialog box in Photoshop to adjust the file size and dimensions
• This Gif should have at least 10 frames of animation

Part B

• Create a longer animation this time that loops perfectly. Try creating a character and animating them, you can use photos or cartoons or draw your own with the brush tool in photoshop, just create individual frames of animation as layers, 1 layer per frame... then you can use the layers to frames option in the animation palette sub-menu.
• You can use photos. Use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read some video files
• Try creating a Cinegraph style animation. Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.

How to make an animated Gif with Photoshop CS5:

• Launch Photoshop
• FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
• Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers with the layer palette that you will turn into frames of animation. Im using some pictures I took of my dog.

• Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
• Open the Animation Palette and click on it's Sub-Menu and then select Make Frames From Layers
• If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
• You can now designate individual durations on each frame.
• Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.

• Open your Gif file in a web browser to test it. Here's my result:

Previous Student Work Samples: