If you’re looking for some images, you may be able to find some at these places. Of course, you can always check in with the library for access to Ghetty Images

• Stock Vault - http://stockvault.net
• Open Photo – http://www.openphoto.net
• Unprofound – http://www.unprofound.com
• Stock Xchange – http://www.sxc.hu
• Morguefile.com – http://www.morguefile.com
• Image After – http://www.imageafter.com
• Compfight – http://compfight.com/ — searches Flickr for CC images

Here are some super awesome links in case you get stuck on making forms!

W3 Schools – HTML Form Tag — Start Here
W3 Schools – HTML5 Form Tag
W3 Schools – HTML5 Input Types
W3 Schools – HTML5 Form Elements
W3 Schools –  HTML5 Form Attributes

Web Standards – Accessible Forms — A bit much to read over, but good examples of how to code forms to be accessible. Also, these forms are all XHTML, not HTML or HTML5
Web Standards – Accessible Forms II
Web Standards - Accessible Forms III

CSS Tricks – Example Form Markup
CSS Tricks – Form Gallery (short, but sweet eye candy)

HTML5 Playground – Forms (good for playing with forms in the browser, you can edit code directly)
Making Forms Fabulous with HTML5 — More extensive, but great article

Sensible Forms - no code, mostly theoretical
Forward Thinking Form Validation – HTML5

Week 9

In class, we will go over the Final wireframes for your project and your initial design comps. We will work in class on tightening up your designs.

DUE: Forms Homework, 10 Wireframes Sketches, Final Wireframes for your final, initial design comps

Week 10

In class, we will critique your final design comps. We will also use the class as a working period to both finish up your designs and start coding your site.

DUE: 10 Wireframe Sketches, Final Design Comps

Week 11

In class, you will present your final projects and we will critique your sites. This will NOT be a working class period.

DUE: 20 Wireframe Sketches, Finished Websites

The project will be a small brochure website for a local business. The business could be a comic shop, a Portland non-profit, an after school service, a flower shop, or a cleaning service, you name it. But the business must be small, independently owned, and preferably local.

The Final will consist of 3 pages:

• One page must be an introduction to the shop
• One page must list their services or goods
• One page must be a contact page

The site will also have the following elements:

• One table filled in with tabular data
• One form (contact or search bars)
• Working links between all three pages
• Images
• A list (either unordered or ordered – this could be your navigation)

We will work on this in class on Week 9 and 10, so don’t fret if you get a little over your head.

During this week’s class, we’ll be going over forms. Take a look at the wk8_classplan for the tutorials. And we had used the HTML5 templates that we had created during week 1 for the class.

Week 8 Homework

Wireframes

In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.

Label each wireframe with the name of the site and the URL that you are sketching.

DO NOT REPEAT SITES.

Homework 1

Last week, you created a one page website for “Projecterific”, listing out all of their plans in a table. This week, you will create a form for users to sign up for a plan.

You will need to ask users for:

• Name
• Billing Address
• Contact Phone Number
• Contact Email Address
• Credit Card number
• Security Code
• Name on the Credit Card
• Which plan they want to use

I suggest that you use the first form that we created in class as your starting point. Be sure to add the appropriate fields that you’ll need for this assignment. Also, style your forms so that it is similar to the tables you created last week. Consider using similar colors and font choices.

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk8_hw1/

Homework 2 – Final Project

In today’s class, we’ll be talking about tables, and we’ll go over three tutorials. Pretty quick class. You can download the wk7_classplan, and the tutorial files here.

Week 7 Homework

Wireframes

In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.

Label each wireframe with the name of the site and the URL that you are sketching.

DO NOT REPEAT SITES.

Homework 1

You’ll create a one page website for “Projecterific”, an online project management website. The page is a sign-up page with the below information. You’ll need to make a table displaying the different plans so that users can easily compare plans. Be sure to include a “sign up” button.

Name of Company

Proejectorific

Misc Information

• 30-day free trial on all accounts
• Sign up in 60 seconds
• No credit care required
• Upgrade, downgrade, or cancel anytime

Plan

Max
$149/month
“Top of the Line”
Unlimited Projects
75GB storage
Unlimited Users
30-day free trial

Premium
$99/month
“The Sweet Spot”
100 Projects
30GB storage
Unlimited Users
30-day free trial

Plus
$49/month
“For Small Groups”
35 Projects
15GB storage
Unlimited Users
30-day free trial

Basic
$24/month
15 projects
5 users
5GB storage
30-day free trial

Free
$0/month
1 project
5 users
10MB storage

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_hw1/

If you want to practice, take a look at this PSD in photoshop and try converting it to an actual website. This exercise is similar to the wk3 in class tutorial, and the fist assignment option for the wk3 homework.

Midterm Practice PSD

I received a few questions about the homework, so I put together an example of what your homework should do.

I created a basic website, in the same vein of wireframes. There’s just a few boxes outlining sections of the site. I then duplicated the site, and using CSS, I made one of the pages elastic, and the other fixed width.

Check ‘em out:
fixed width layout
elastic layout 

Today’s topics include:

• Presentations: everyone will present one of their homework assignments. Presentations will be brief, no more than two minutes each, and you will briefly discuss your best work, what you like most about it, and what you would have liked to improve
• Types of Layouts: fixed, fluid, elastic, responsive
• Positioning techniques: floats and positioning
• Lists (ordered and unordered)
• Navigation and Sprites
• Midterm prep

Week 5 Homework

Wireframes

In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.

Label each wireframe with the name of the site and the URL that you are sketching.

DO NOT REPEAT SITES.

Homework 1

You will create a website and show two layout styles. Create a page with the following sections: a header, a sidebar, a main content area, and a footer. Do not fill any of the sections with text. Instead, give each section a border and a background color. Using the same layout, create fixed-width page and a fluid/elastic page.

These pages should look similar to the wireframes that you’ve been drawing. No actual content should be on the page, instead, we should see visible blocks for each section on the page. If you’re getting stuck with the width of the blocks, you may need to set each item to {display: block;} or set the width of the block.

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_hw1/

Extra Credit: Playing Cards

(Worth no more than 1% of your total grade) In the /classic-cards/ folder, you’ll find 52 pngs, each relating to a specific playing card. Create an HTML page listing each one out. Using your layout method of choice (floats, absolute or relative positioning), separate and create 4 piles of the cards so they are grouped by suit.

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_extracredit/

Tutorials and Extra Credit files: wk5_handouts

• 8 Simple Ways to Improve Typography in Your Design
• A Guide to Web Typography
• Web Design  is 95% Typography
• The Ultimate Guide to CSS Typography
• 10 examples of Beautiful CSS Typography and how they did it

Tutorial Sources

• Create Beautiful CSS3 Typography
• Create a Typography Based Blog Layout