Thank you to all my great students from this years ROP Web Design class. There were some very impressive projects this year 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 2018 ROP Web Design class.

- 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 9th!

- Mr.W

Web Development Group Project Phase 3

Hello Students,
For our next phase we begin laying out the structure of our websites. Use the flowchart below as a rough guide for the layout and arrangement of our elements. Use place holder information and images for now until we have all the content available.

Flow Chart for Website Development:

- Mr.W

Web Development Group Project Part 2

Hello Students,
For the 2nd day of our group project, the teams must propose and agree upon a unified platform for the development of our websites. Each team must take a turn proposing a platform or approach and argue why. Teams must vote and choose a platform democratically. Other deliverables are to be achieved today as listed below.

Step 1 - Choose A Platform:
Each team should meet to discuss before proposing their platform of choice.

• Each team gets a turn proposing a platform for development, platform must be mobile ready, easy to use, stable and appropriate for our small scale web site, boostrap, foundation, w3c.css are to be considered
• Teams must vote, each team member gets 1 vote, tally votes on whiteboard
• Upon vote completion, teams focus on next phase

Step 2 - Choose A School:
We will develop sites for Santa Cruz HS, Harbor HS and Soquel HS. Teams may randomly assign schools to teams with numbers in a hat method. Alternatively, teams can nominate themselves for a school with approval from team members

Step 3 - Identify Key Resources:
Team leads should research templates for our sites, team members should identify the information and assets listed below. Focus on meeting deliverables listed:

• Team Leads:
• Identify a simple, straightforward and easily modifiable template for site development, propose and explore options
• Alternatively, explore development of an original layout/design 
• Decide on a path by end of day

• Team Members:
• Identify these resources and assets needed for your school website:
• School colors in Hexcode
• School colors in RGB values
• Find/Download School Logos in high resolution/good quality 

Web Development Group Project Part 1

Hello Students,
Today you will begin our first team based web development project. Follow the steps below to build your teams and complete all documentation requested. Teams should be assembled, well defined and ready to begin development on Monday morning. Follow the Steps below carefully...

Here is the hierarchy for our groups:

• Project Manager (your instructor)
• Team Leads
• Team Members with defined roles

Web Development Group Project Step 1: Choose Team Leaders

1. Each student should nominate 3 people to be team leads
2. Nominations should be based on not just proficiency but leadership and organizational skill
3. Take nominations by ballot, tally nominations and announce the top 3

Web Development Group Project: Building Teams

• To determine teams, have each remaining student identify their skill strengths in these following areas on a scale from 1-5:
• Coding HTML5/CSS
• Graphics, including Graphic Design
• Problem Solving, Researching, Testing and Debugging
• Compare scores and designate groups so each team has an evenly balanced set of skills in those 3 categories, or as close as possible
• Teams should assemble and choose 1 row in the computer lab to sit together. Please migrate files as needed with USB drives.

Deliverable - Write a Team Bio/Dossier:

Teams should agree on the team titles/names democratically. Follow Roberts Rules of Order to nominate, vote in case of dispute. The format of this dossier can be any type, word document, google doc, pdf file, html page, etc....

• Each team should write a short dossier with the following details:
• Team Name (this is a code name for classroom use only)
• Team Lead
• Name
• Codename
• Age
• List 3 skills you bring to the group related to web development
• Define your roll on the team and how you can support in best, in what areas?
• Describe your ideal donut in 12 words or less
• Team Members:
• Name
• Codename
• Age
• List 3 skills you bring to the group related to web development
• Define your roll on the team and how you can support in best, in what areas?
• Show an example of 1 dog that looks like a celebrity (no duplicates!)

Dossier's are due on monday,

Have fun!

- Mr.W

Career Research and Writing Assignment

Hello Students,

As part of your career development module, we will research 1 possible career you are interested in and write a short essay about the career, citing details, salary and pathway to this career. This writing assignment can then be included in your portfolio's career development section...

What interests you as a career? Pick one to research for this assignment

Job Research and Writing Assignment:
Search for a job title, something your would be interested in. Research 3 jobs and write about why you would be interested in that job. Be thorough!  Tell me information about the job such as:

1. Job Title
2. Job Description
3. Job Activities
4. Education Needed
5. Career Pathway
6. Salary Range

Assignment Specifications:

• Complete assignment in essay form
• 3-4 Paragraphs with details
• 150 Words minimum

Example Essay:

Career Research Essay By: Kel Varnson

Subject: Computer Programmers

General Description:
Computer programmers write instructions that tell computers to perform a variety of different tasks. They may write programs that will perform accounting or billing functions. Other programs may operate robots or computer-aided design (CAD) machine tool operations. Some programs allow people to create artwork or graphics, while others coordinate space flight operations.

Programmers speak with the individuals or groups that need programs in order to understand their needs. They then outline the steps the computer must go through to get the job done. It is the programmer's job to identify all of the steps the computer complete to produce the desired results.

Programmers use computer languages to write programs. Some languages operate the computers while others are used to write programs that perform tasks. Higher level languages require less technical understanding of how computers operate. They are said to be more friendly. They are easier to use and may accomplish a complicated task with a single command. A less friendly, more basic program will require more detailed instructions. Programmers determine the appropriate language to use, based on the advantages and limitations of each.

When programs are finished, the programmers must test or debug it to be sure that errors and problems have been found and corrected. Also, the programmers write two sets of instructions for individuals who will use the program. The first is for other programmers who will work on the program in the future. Another set of instructions is written for program users.

This is a Hot Occupation. Over the next 10 years, job openings in this occupation are projected to increase by at least 27%.

• Write programs that tell a computer what to do
• Usually know more than one programming language
• Spend working hours alone, but often work in teams
• May have flexible schedules, including telecommuting
• Often work long hours
• Have at least a bachelor's degree
• Earn $61,730 per year (national average)
• Stay up to date on new programming languages

Hours & Conditions:
Computer programmers usually work in well-lit, climate-controlled offices because computers do not function well in environments with extreme temperature or humidity fluctuations.

Work Locations:
Computer programmers work at universities, government agencies, and business firms.

Pros & Cons:
Programmers like working with computers and planning ways to solve problems. They find their jobs to be challenging. They like working indoors in clean, air-conditioned offices. Also, there are many opportunities for employment in this field.

How to Write a Good Great Resume

Hello Students,

Having a solid resume is the cornerstone to your job future. A well written and well designed resume is what sets you apart from other job applicants. A perfectly written job application, a quality resume and a list of positive references is the job seekers trifecta. In this class we will teach you these skills and more. Below is a list of writing tips, read over it before finalizing your resume.

Link, right click to download: ROP PORTFOLIO HANDBOOK

Resume Writing Tips:

Put your typography skills to work:

Never use comic sans! Also, refer back to our rules on typography in our introduction to typography and utilize those guidelines in your resume. Choose fonts that are complimentary to each other and assist in creating information hierarchy, this helps the reviewer find the information they need quickly. Choose a good sans serif font for your section titles and a complimentary serif font for the rest.

Have an objective:

Know the purpose of your resume and edit it for different job scenarios. Having a focused job objective listed on your resume will help you with attaining an interview and getting hired.

Back up your special skills with job experience:

List your skills but make sure your listed job experience, training or education reflects those skills. Are you really good at making websites? Let them know how and where you learned that skill.

Research and use the right keywords:

Every industry has its own language, research job offerings and pay attention to the keywords that are used. If you put your resume online with a job placement service they will often use certain keywords to search their database for potential hires.

Be descriptive with job experience:

A job title will communicate your role, but not the details of your work experience. List the duties, tasks, activities, skills and achievements that were part of your job.

Format your text:

Use bold text to start each section. Use bullets for lists. Make the document easy to quickly scan and read. Clarity of format is crucial, you have ten seconds before the employer will move on to another applicant.

List most recent job experience first:

This also goes for education, list the most recent first. If your still in High School you can say "future class of 2012", or "Currently attending HS".

List most important skills first:

When writing out your skill list make the most important skills the first ones on the list. If you are applying for a web design job, list your web skills first. Change and edit this for different industries/jobs.

Leave out the obvious:

It is not necessary to add "available for interview" or "references available upon request". References are standard and expected, and of course you are available for an interview. Thats the whole point!

Avoid negativity:

Don't trash talk past employers or state that you didn't like a past job. Simply state that you were looking for future opportunities.

Go with what you got:

If you haven't had work experience yet, just list any summer jobs, volunteer experience etc. If you have hobbies that are relevant to the job you can list those. If you don't have a diploma or degree then just list your estimated date for completion.

Proofread your resume:

Have your neighbor or classmate read your resume. Sometimes the spellchecker doesn't catch typos. The more eyeballs that see your resume before it gets in the hands of the employer the better.

Although these resumes contain similar information, styles do vary.

Resume Writing Assignment:

• Download the ROP Career Portfolio Handbook and follow the template to write your own resume from scratch
• Create a 1 page resume that meets the handbook requirements for all included information
• Use the program or online tools of your choice to write your resume
• Demonstrate good typography, spelling and accuracy, make sure your resume shows good information hierarchy so it is simple to read and each section is listed clearly
• Email or print and turn in your resume for credit - DO NOT POST YOUR RESUME ON YOUR BLOG
• Due Thursday!

- Mr.W

How to Write a Good GREAT Letter of Introduction

Hello Students,

Your next assignment is to create a "Letter of Introduction" that describes you! Your special traits, qualities, hobbies, and personal, educational and career goals. List your top 5 skills and abilities. It should consist of at least one page. Make sure to use correct spelling and grammar.

Letter of Introduction Assignment:

• This is an introduction letter, about you, written to people that may be viewing your portfolio
• Should be about 1 page long

You letter should include:

• Who you are
• Where you are currently attending school
• What courses you are currently enrolled in aside from standard courses (such as this ROP class your in right now)
• Your top 5 work related skills
• Special acknowledgments from employers/instructors
• Future education plans
• Hobbies or other activities you enjoy
• Discuss what is contained in your portfolio
• Discuss the type of work/projects/activities you enjoy the most in school

Sample Introduction Letter:

-----------------------------------------------------------------------------------------------------------------------------------

John Star

242 Crest St.

Capitola, CA 95010

(831) 553-2323

jostar@yahoo.com

Date

To Whom It May Concern:

I am currently attending Santa Cruz High School where I will be graduating this year in June. I have enrolled in ROP classes, which are business-oriented. ROP classes have given me a closer look at the business world and I have learned excellent work skills. 

My top five work skills are:

• Excellent communication skills with strong listening skills
• Responsible and reliable with attention to detail
• Strong team player who thrives in teamwork situations
• Good computer skills
• Excellent time management skills

I have received special acknowledgement from my employers for strong skills and work ethics.

I recently was accepted to CalPoly and plan to go there in the Fall and pursue a degree in Agribusiness. After receiving my degree, I plan to work in my family’s strawberry farming business. Eventually, I hope to be the president of the business. I have many hobbies including surfing, skiing and playing baseball but most of all, I enjoy riding my horse up in the hills. It gives me a sense of freedom and independence.

My portfolio shows some of the skills and abilities I have acquired in while attending Soquel High School and throughout my work experience. I have always enjoyed landscaping and have enrolled in the Horticulture class for my last semester of high school. From my past experience you will notice that I enjoy working especially when I leave the job better than it was when I first got there. I have been doing tree work for three years and have worked for commercial and residential customers. Thoroughness and safety are some of my favorite qualities.

Included in this portfolio, is my resume summarizing my schooling, work experience, and skills. In addition I have a list of references, letters of recommendation, and samples of my work. I hope you enjoy reviewing my portfolio.

Sincerely,

John Star

Due by Friday!

 - Mr.W

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 in this and other courses and displays your prowess with writing html and css and incorporating graphics into your website. 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 from any previous ROP class, or can include examples of any work or projects or other classes or even 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 can be multiple sections, 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 or edited with a text or code editing program such as Komodo
• This project must utilize a platform that provides mobile ready responsive design, W3C.CSS/Bootstrap/Etc..
• 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 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 20Mb in file size

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. 
• 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, BUT CHOOSE WISELY! :

• A cat is typing on a keyboard and angrily shoves the computer off the desk
• Col. Sanders is a DJ spinning records on a turntable in a dance club
• Donald Trump removes his face like halloween mask to reveal a reptilian creature
• Add explosions to a video clip to as an homage to action movie scenes
• Find a short video clip of a sword fight and replace the swords with Light Sabers

Good luck!

Previous Student Work Examples:

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:

Learning Bootstrap: Bootstrap Tutorial

Hello Students,
Your next assignment is to work through the Bootstrap tutorial on W3Schools.com and create a website using the bootstrap platform. Follow the tutorial, or follow along with the class to create an example, then create a compelling website utilizing the bootstrap framework. Bootstrap is the most popular HTML, CSS and Javascript framework being used to develop responsive and mobile friendly websites. Bootstrap is completely free and open source!



Assignment: After working through the bootstrap tutorial below, create a single/multi page website about a subject of your choice, you could create a website for a class project, document something you created or participated in, etc. Think about how this project could be used to your benefit (book report, etc). You can document your favorite hobby, band, sports, celebrity, movie, video game, etc.

Bootstrap Page Assignment Specs:

• Single scrolling or multiple page website, subject is your choice
• Website should be complete with information, photos or gif's, content (150 words minimum), links, resources etc
• Website must be built with bootstrap frame work, be free of glitches or errors and function correctly when uploaded to server
• Website must contain menu at top of page for navigation
• Website must contain 1 external link
• Website must contain credit with link to your email at bottom of page or contained in an "about" or "contact" section (this page created by "insert name") with email hot-linked
• Website must be free of errors or bugs, broken links etc...

Link: W3Schools Bootstrap Tutorial

Tutorial: Read through the bootstrap tutorial... try out each step and create your own gallery page that demonstrates the following bootstrap elements:

• Bootstrap CSS Basic Text
• Bootstrap CSS Buttons
• Bootstrap CSS Forms
• Bootstrap CSS Helpers
• Bootstrap CSS Images
• Bootstrap CSS Tables
• Bootstrap Components Glyphs
• Bootstrap Components Dropdowns
• Bootstrap Components Navs

Download and Modify Bootstrap to Customize your Template:
Want to change the colors of your template? Download bootstrap and re-link your html file to the downloaded bootstrap CSS file.  Click the following link and un-zip the contents into your project folder. Change the bootstrap link code to embed the local bootstrap resource instead of using the online resource.

Link: Download Bootstrap

Customize Your Bootstrap Colors:
Want to change the color scheme of your template? Check out the link below, you can upload a photo and create a color scheme, or choose one of their pre-made ones. Copy-paste the CSS into the bootstrap.min.css file.

Link: Custom Color Scheme's for Bootstrap

Custom palette on my sample bootstrap page.

Advancing Your Web Skills: Layout and Responsive Design

Hello Students,
Our newest assignment is to create a progression of small web pages that demonstrate layout, responsiveness and then utilize W3C CSS to enhance the responsiveness of your page, and finally complete a single page utilizing all the W3C CSS tools to make a page with layout that is responsive, meaning it can be viewed on many different screen sizes

Assignment:
Work with the class, or read and work independently and develop 4 single pages, demonstrating layout, responsiveness, responsiveness with layout, and finally a full W3C CSS page:

1: Layout with HTML and CSS: W3Schools - HTML Layout

This page utilizes HTML and CSS to layout elements using the Header, Nav, Aside,  Section and Footer classes

2: Responsiveness with HTML and CSS: W3Schools - Responsive Design

This sample site uses simple block classes to "stack" elements when the screen is resized

3: Responsive Page Enhanced With W3C.CSS: W3C.CSS

Building off the previous page the block classes are replaced with the w3-container, w3-row-padding and w3-third classes for enhanced responsiveness

4: Full W3C.CSS Layout and Responsive Page: W3C.CSS Sample

This page utilizes many of the W3C.CSS features such as Header, navbar, drop down, card and container W3C.CSS features.

When these pages are complete upload them to your server space for testing or turn in via USB drive.


- Mr.W