In class Sunday 03-17-2019 at 11:59pm

10 minutes for Peer Assignment Review of WebPage07.htm
Low contrast message from a recent assignment
- Kirk to demo WAVE
Automated notifier helpful or not?
- show of hands, yes (7) or no (6)
Review Kirk's WebPage06.htm
- presented by Kirk
Review Project 02 (My Interest/index.htm) for student volunteers
- class critique
Lab time to work on edits for Project 02 (My Interest)
- individual lab time
Quiz 04 - CSS Mechanics (10 minutes at the end of class - team based learning style (each table will take it together))

On Your Own - Due by Sunday 03-17-2019 at 11:59pm

Goal

Demonstrate understanding of photo sizes (dimensions and file sizes) for use on the web
Demonstrate ability to follow specific directions

Due by Sunday 03-17-2019 at 11:59pm
One re-grade request allowed from Sunday 03-17-2019 at 11:59pm until Sunday 03-24-2019 at 11:59pm
Grade value: 1% of your final grade

Changing background colors by stealing Kirk's sample responsive design page (you'll need to grab the .css document too)
- The background color of the page needs to change while resizing the width of the page
- Use your own colors
- Control the colors using an external style sheet
Optional: Practice CSS - Change the styling of a header, bold, paragraph, responsive design page size background color, and something that you pick
Add 3 images of yourself to this page with file names of uniqueid_04.jpg, uniqueid_05.jpg, & uniqueid_06.jpg (so Kirk's picture names would be hopkinks_04.jpg, hopkinks_05.jpg, & hopkinks_06.jpg), to be used as new pictures for our class site
- Dimensions: 1000x315
- You must be the only person in the photo (you can have animals, but no other people)
- Filenames must be: uniqueid_04.jpg, uniqueid_05.jpg, and uniqueid_06.jpg (all lower-case)
- Photos need to be good quality

Grading Rubric

-10%: No changing background colors in an external style sheet using Responsive Design
-10%: Using Kirk's background colors (Responsive Design)
-10%: Missing Photo uniqueid_04.jpg
-10%: Missing Photo uniqueid_05.jpg
-10%: Missing Photo uniqueid_06.jpg
-10%: Photo naming convention should be all lower-case uniqueid_04.jpg
-10%: Photo naming convention should be all lower-case uniqueid_05.jpg
-10%: Photo naming convention should be all lower-case uniqueid_06.jpg
-10%: Dimensions must be 1000x315 uniqueid_04.jpg
-10%: Dimensions must be 1000x315 uniqueid_05.jpg
-10%: Dimensions must be 1000x315 uniqueid_06.jpg
-10%: You must be the only person in the photo uniqueid_04.jpg
-10%: You must be the only person in the photo uniqueid_05.jpg
-10%: You must be the only person in the photo uniqueid_06.jpg
-10%: Photos need to be good quality uniqueid_04.jpg stretched
-10%: Photos need to be good quality uniqueid_05.jpg stretched
-10%: Photos need to be good quality uniqueid_06.jpg stretched
-10%: Photos need to be good quality uniqueid_04.jpg grainy
-10%: Photos need to be good quality uniqueid_05.jpg grainy
-10%: Photos need to be good quality uniqueid_06.jpg grainy
HTML/CSS (i.e. mechanics) grade reduction amounts as shown on Kirk's Pet Peeves

Reminder - Project 02 (My Interest)

Create a multiple page website in a MyInterest folder with a navigation menu system (using a header and a footer)
Opportunity for creativity in content and design
Opportunity to demonstrate learning
Tell about a hobby or interest that you have (should be different than what you will use on your HireMe site)
The site should have enough content to make someone want to visit the entire site

Create MyInterest/index.htm
- Due by Sunday 03-24-2019 at 11:59pm
- One re-grade request allowed from Sunday 03-24-2019 at 11:59pm until Sunday 04-14-2019 at 11:59pm
- Grade value: 10% of your final grade
- Multiple pages in a new style that tell about an interest (the site should have enough content to make someone want to look at the site)
- You can begin from Kirk's template; you need to modify the css to make it uniquely yours
- At least 3 images that you created (photos that you took or designs that you made)
- Site should not contain images created by others (modifying someone else's image is not acceptable)

Content: Multiple pages in a new style that tell about an interest (the site should have enough content to make someone want to look at the site)
- -50% not multiple pages, I will allow up to a C for a re-grade request
- -50% barely any content, I will allow up to a C for a re-grade request
- -30% not nearly enough content
- -30% no images (need 3)
- -20% only 2 images (need 3)
- -10% only 1 image (need 3)
- -10% not quite enough content
- -05% could use some minor content changes
Design: You can begin from Kirk's template; you need to modify the css to make it uniquely yours
- -50% did not modify the css enough (or at all) to make it uniquely yours
- -20% designs and/or images that don't scale (i.e. not responsive)
- -20% navigation menu responsive design problem
- -05% minor responsive design changes needed
- -05% spacing between content and the edge of the page
- -05% color scheme

New material to learn before class on Friday

Video/Transcript: IMS222 39 - Forms

(watch this video in a new tab or window)

  There are many times on a website that you want to collect data from your users.  To do that, you usually need a form.  Here is a sample form that meets WCAG 2.0 Level AAA standards that covers types of items you would find on a form:

<section>
<h1>Forms</h1>
<h2>This is a place holder for a web page that has a completely accessible web form</h2>
<form name='formMyHDGLocationManager' action='' METHOD='post' ENCTYPE='application/x-www-form-urlencoded'>

<label for='a_text_field_01'>Text field</label>
<input type='text' name='a_text_field_01' id='a_text_field_01' value=''>
<label for='a_text_field_02'>Another Text field</label>
<input type='text' name='a_text_field_02' id='a_text_field_02' value=''>

<fieldset>
<legendphp>Radio Buttons</legendphp>
<br><input type='radio' name='gender' id='1st choice' value='1st choice'><label for='1st choice' class='radio'>1st choice</label>
<br><input type='radio' name='gender' id='2nd choice' value='2nd choice'><label for='2nd choice' class='radio'>2nd choice</label>
<br><input type='radio' name='gender' id='3rd choice' value='3rd choice'><label for='3rd choice' class='radio'>3rd choice</label>
</fieldset>

<fieldset>
<legendphp>Checkboxes</legendphp>
<br><input type='checkbox' name='1st one' id='1st one' value='1st one'><label for='1st one' class='checkbox'>1st one</label>
<br><input type='checkbox' name='2nd one' id='2nd one' value='2nd one'><label for='2nd one' class='checkbox'>2nd one</label>
<br><input type='checkbox' name='3rd one' id='3rd one' value='3rd one'><label for='3rd one' class='checkbox'>3rd one</label>
<br><input type='checkbox' name='4th one' id='4th one' value='4th one'><label for='4th one' class='checkbox'>4th one</label>
</fieldset>

<label for='a_dropdown_list'>Dropdown list</label>
<br><select name='a_dropdown_list' id='a_dropdown_list'>
<option value='Option 1'>Option 1</option>
<option value='Option 2'>Option 2</option>
<option value='Option 3'>Option 3</option>
<option value='Option 4'>Option 4</option>
</select>

<p><label for='a_textarea'>Textarea
<br><textarea name='a_textarea' id='a_textarea' rows='5' cols='55'></textarea></label></p>

<input type='submit' value='Submit'>
</form>

Video/Transcript: IMS222 40 - WCAG 2.0 Level AA and a tool for checking accessibility

(watch this video in a new tab or window)

Accessibility is a hot topic these days and I will say, when it comes to design, it does limit your options. Color schemes need to have a lot of contrast. It's a good thing though, because there are tools to check your pages to make sure they're accessible by everyone, which is really the goal. The main tool that I use is the WAVE extension for Google Chrome (http://wave.webaim.org/extension/). With this tool installed, you can even check pages that require you to login first, because the tool runs from your local machine. Install this tool and check some of your web pages.