Mendocino College: October 2013

Tuesday, October 29, 2013

Web Page Document Test Plan

Having a plan is always important, but by breaking things down into a checklist [of sorts] you can quickly check what you've checked.

Click Image for PDF Download

If you are interested in changing/editing this form yourself (i.e. there are some specific things you want to check or the browser resolutions have changed) you can download the Excel file here:

https://drive.google.com/file/d/0Bwhy5BkICGK1bmxPTDUyZHZUNlU/edit?usp=sharing

Tuesday, October 22, 2013

INTRODUCTION:

Chapter 9 explores the use of Forms in web pages. Forms are used for search engines, stores, information collection, email forms, etc. When you enter a search in Google, you're submitting a form, for example.

ASSIGNMENTS:

Read Chapter 9.1: Overview of Forms
Work through the Hands-On Practice 9.1 (pages 362-367)
- You will create a quick and easy contact form in HOP 9.1, then read about some of the other attributes you can use in forms.
Work through the Hands-On Practice 9.2 (pages 367-373)
- You will continue with forms by creating a contact form.
Work through the Hands-On Practice 9.3 (pages 373-374)
- You will be adding the Label element to the text box and scrolling text area on the form you created in HOP 9.2.
Work through the Hands-On Practice 9.4 (pages 374-381)
- You will continue modifying the form you built in HOP 9.3.
Work through the Hands-On Practice 9.5 (pages 381-391)
- You will be adding to your form to access a server-side script.
Work through the Hands-On Practice 9.6 (pages 391-393)
- Now you'll get to add some HTML5 to your form. :)
Complete the Focus on Web Design section (page 399) by reviewing the following sites:
- http://www.uie.com/articles/web-forms/
- http://particletree.com/features/10-tips-to-a-better-form/
- http://www.alistapart.com/articles/sensibleforms
- http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
Now for the Case Study and Web Project pieces:
- Update the JavaJam Coffee House (pp. 400-402) site using the text instructions.
- Update the Fish Creek Animal Hospital (pp. 402-404) site using the text instructions.
- Update the Pacific Trails Resort (pp. 404-407) site using the text instructions.
- Update the Prime Properties (pp. 407-410) site using the text instructions.
- Update your Web Project (p. 410) site using the text instructions.

OPTIONAL / RECOMMENDED ASSIGNMENTS:

If you are feeling adventuresome, try out some of the Hands-On Exercises (pp. 397-398). These exercises are meant to reinforce the techniques you have learned thus far.
If you have some "free time" try out the Apply Your Knowledge tasks (pp. 395-397).

Tuesday, October 15, 2013

Exploring Tables

Here's a starter HTML code to use for making some tables:

<!DOCTYPE html>
<html lang="en:>
<head>
<title>My Title</title>
<meta charset="utf-8">
<head>
<body>
</body>
</html>

Copy that code to a new document in Notepad++, then save it as "tabletest.html" (or whatever).

Next we will begin adding some basic table code

<table border=1>
<caption >Whatever</caption>
<tr><td>First</td><td>Last</td></tr>
</table>

That code will produce the following table:

Whatever
Something	More Here

Diagramming and Flow Charting

I like to diagram / flow chart my web sites before I begin. I've done it by hand for a long time because I thought programs like PowerPoint were just too clunky. Recently I found "Lucid Charts" (https://www.lucidchart.com/) which is free and easy.

This is an example of a flow chart I made for my JAVA Programming class at KHS. It's obviously more complex than a web diagram would need to be, but if you had to describe a process in a web site (particularly if the page got more complex) this would be a great way to do it.

It's not required, but it's definitely worth a look.

Chapter 8: Tables

INTRODUCTION:

While back in the day tables were often used to format the layout of a web page, CSS is the page layout tool of choice for modern web developers. In this chapter, you'll become familiar with coding HTML tables to organize information on a web page..
ASSIGNMENTS:

Begin reading Chapter 8: Tables
- This first section explains the basics of tables. Definitely learn the "tr" (rows) and "td" (columns... aka cells) because these will come up over and over.
Work through the Hands-On Practice 8.1 (pages 333-334)
- You will be creating a simple web page with a table..
Work through the Hands-On Practice 8.2 (pages 335-338)
- You will be creating a web page with a table using the rowspan attribute. In section 8.4 (p.336) you will also read about "Accessibility" of tables.
Work through the Hands-On Practice 8.3 (pages 339-341)
- You will continue creating tables, but you will be using CSS style rules for formatting..
Work through the Hands-On Practice 8.4 (pages 341-344)
- In this section you will be using CSS3 structural pseudo-class selectors to configure color..
Complete the Focus on Web Design section (page 349) by analyzing two web pages -- one you like and one you don't. You can post your thoughts about the sites in the Discussion Forums.
Now for the Case Study and Web Project pieces:

Update your JavaJam Coffee House (pp. 349-350) site using the text instructions.
Update your Fish Creek Animal Hospital (p. 350-351) site using the text instructions.
Update your Pacific Trails Resort (pp. 352-353) site using the text instructions.
Update your Prime Properties (p. 353-354) site using the text instructions.
Update your Web Project (p. 355) site using the text instructions.

OPTIONAL / RECOMMENDED ASSIGNMENTS:

If you are feeling adventuresome, try out some of the Hands-On Exercises (pp. 348-349). These exercises are meant to reinforce the techniques you have learned thus far.
If you have some "free time" try out the Apply Your Knowledge tasks (pp. 346-347).
Again, feel free work on the other Case Study assignments if you really want to get your HTML down. :)

Quiz / Understanding Check

Over the last couple weeks we created both two and three-column CSS templates for business pages. We will use one of those templates this week to create a business web site.

Think about a business, organization, group, etc. that you have an interest in or a passion for. Create an "official site" for that client which will include "news" stories, photos or updates of some sort.

Copy the three-column template folder (with pages, css file, graphics, etc.) and give it the name of the business/group you are doing.
Gather materials (pictures, logo, address, business info, news stories, etc.)
Select a professional color scheme (at least three colors)
Use the template to build your site with multiple pages.

Once we have completed our web sites we will copy them to the FTP web server for testing.

A three-column web page template:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Door County Wildflowers</title>
<meta charset="utf-8">
<link href="wildflowers.css" rel="stylesheet"></link>
</head>
<body>
<div id="container">

<div id="header">
 <span><a href="#center">Skip to Content</a></span>
 <h1>Door County Wildflowers</h1>
</div> <!-- end of header -->

<div id="nav">
 <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="spring.html">Spring</a></li>
  <li><a href="summer.html">Summer</a></li>
  <li><a href="fall.html">Fall</a></li>
  <li><a href="winter.html">Winter</a></li>
 </ul> 
 <img src="plsthumb.jpg" width="100" height="100" alt="Showy Pink Lady Slipper">
</div> <!-- end of nav -->

<div id="sidebar">
 <h3>The Ridges</h3>
 <p class="news">The Ridges Nature Sanctuary offers wild orchid hikes during the Summer months.  For more info, visit <a href="http://www.ridgesanctuary.org">The Ridges</a>.</p>
 <h3>Newport State Park</h3>
 <p class="news">The <a href="http://www.newportwildernesssociety.org">Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday.  Stop by the park office to register.</p>
</div> <!-- end sidebar -->

<div id="center">
 <h2>Door County</h2>
 <p>Wisconsin's Door County Peninsula is a unique, ecologically diverse place with upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
 <p>A wide array of wildflowers grow in the county because of this variety of ecosystems.</p>
 <img src="trillium.jpg" width="200" height="150" alt="Trillium" id="floatright">
 <h3>Explore the beauty <br>of Door County Wildflowers . . .</h3>
 <p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.<br>
</div> <!-- end center -->

<div id="footer">Copyright &copy; 2013 Door County Wild Flowers<br></div>

</div> <!-- end container -->
</body>
</html>

We will also begin with the following CSS Code as a "skeleton":

body { margin:0;
      background-color: #ffffff; }
#container { background-color: #eeeeee;
             color: #006600;
             min-width: 960px;
             font-family: Verdana, Arial, sans-serif; }
#header { color: #cc66cc;
        background-color: #636631; 
        border-bottom: 2px solid #000000;
  text-align: right; 
        height: 120px;
        background-image: url(showybg.jpg);
  background-position: bottom; 
  background-repeat: repeat-x;
        padding: 0 20px; }
#nav { float: left;
       width: 150px; }
#sidebar{ float: right;
          width: 200px;  }
#center { margin: 0 210px 0 160px;
          padding: 1px 10px 20px 10px;
          background-color: #ffffff;
          color: #006600; }
#footer { font-size: .70em;
          text-align: center;
          color: #006600;
          background-color: #ffffff;
          padding-top: 10px; 
    clear: both; } 
#header a { font-size: .80em; }
#header a:link, #header a:visited { color: #ffffff; }
#header a:focus, #header a:hover { color: #eeeeee; }   
h1 { margin-top: 0; 
     font-size: 3em; 
  text-align: left;
  text-shadow: 4px 4px 4px #000000;}
#nav ul { margin-top: 20px;
          list-style-type: none; }
#nav a { text-decoration: none; 
         font-size: 1.2em; }
#nav a:link { color:#006600;}
#nav a:visited { color: #003300; }
#nav a:focus, #nav a:hover { color: #cc66cc; }
#nav a:active {  color: #000000;}
#nav img { margin: 30px;}
#center p { margin: 20px; } 
#center h2, #center h3 { color: #cc66cc;
                  background-color: #ffffff; }
#floatright { margin: 10px;
           float: right; } 
#sidebar h3 { padding-bottom: 2px;
              border-bottom: 1px solid #000000;
              margin: 10px;
     font-size: .90em;
              color: #cc66cc;
              background-color: #eeeeee; }
.news { font-size: .80em;
            margin: 10px; }

You will need the following graphics to start with:

Tuesday, October 8, 2013

Chapter 7

INTRODUCTION:
You're ready to explore a variety of techniques, including relative hyperlinks and named fragment hyperlinks, CSS sprites, three-column page layout, styling for print, styling for mobile browsers, and configuring CSS3 media queries to target mobile devices.

ASSIGNMENTS:

Begin reading Chapter 7: More on Links, Layout and Mobile
Work through the Hands-On Practice 7.1 (pages 280-281)
Work through the Hands-On Practice 7.2 (pages 282-283)
Work through the Hands-On Practice 7.3 (pages 283-285)
Work through the Hands-On Practice 7.4 (pages 285-294)
Work through the Hands-On Practice 7.5 (pages 294-302)
Work through the Hands-On Practice 7.6 (pages 302-307)
In the Focus on Web Design section (page 313) the authors suggest exploring CSS Zen Garden. You can also view Sheriar Designs (http://manisheriar.com/blog/anatomy-of-a-design-process) or Behind the Scenes of Garden Party (http://www.bobbyvanderluis.com/articles/gardenparty.php). You don't have to "write an essay" as the text suggests. If you want to post your thoughts on the sites on your blog and/or in the forums, that would be great.

♦ Now for the Case Study and Web Project pieces -- Styling for the Mobile Web:

Note: You may want to back up your Case Study folders (copy them to a backup folder) before continuing. I have backup copies throughout the process of design because you will get to a point where something isn't working that worked before -- but you have to step back through versions of your backup to figure out where it went wrong.

Update your JavaJam Coffee House (p. 314) site using the text instructions.
Update your Fish Creek Animal Hospital (p. 317) site using the text instructions.
Update your Pacific Trails Resort (p. 321) site using the text instructions.
Update your Prime Properties (p. 324) site using the text instructions.
Update your Web Project (p. 328) site using the text instructions.

OPTIONAL / RECOMMENDED ASSIGNMENTS:

If you are feeling adventuresome, try out some of the Hands-On Exercises (pp. 312-313). These exercises are meant to reinforce the techniques you have learned thus far.
If you have some "free time" try out the Apply Your Knowledge tasks (pp. 309-312).

SUPPLEMENTAL MATERIALS:
CSS Buttons

Sunday, October 6, 2013

FTP Should Be Working Now

Okay, we fixed some of the problems for sure -- but I'm not sure why some people still aren't able to connect. Don't worry if we can't get this working -- I will accept the work on CD, SD card, USB drive, etc.

That being said, make sure you are setting it up as follows:

Host/IP: csc.mendocino.edu
Username: (the one I provided in the Announcements the other day)
Password: (your six-digit birth date -- i.e. 022668)
Port: 22
Connection: SSH/SFTP

Once you have access, you'll be in the "Home" folder. You will need to create a folder called "public_html" (without the quotes) which is where you will post all of your projects. When someone goes to your web address (i.e. http://csc.mendocino.edu/~username) they will be seeing your public_html folder.

For example, my page is at: http://csc.mendocino.edu/~rgriffith

I have no "index.html" file so it shows the directory -- but if I had an index.html file inside that folder, it would show that instead. If you click on one of the other folders you will see that process in action.

Tuesday, October 1, 2013

Chapter 6: Page Layout

Student Data Files:
http://media.pearsoncmg.com/aw/ecs_felke_webdevdesign_6/Student_Data_Files/felkeStudentDataFiles.zip

Today we're going to be working with Page Layout including the Box Model, Normal Flow, CSS Positioning, CSS Float, Two Column Page Layout, Hyperlinks in an Unordered List, CSS Interactivity with Pseudo-Classes, etc.

We are going to continue building our CSS skills in this chapter, working with page layouts, floating images, etc.

ASSIGNMENTS:

Begin reading Chapter 6: Page Layout
Work through the Hands-On Practice 6.1 (pp. 222-224)
Work through the Hands-On Practice 6.2 (pp. 224-226)
Work through the Hands-On Practice 6.3 (pp. 226-230)
Check out some of the "CSS Properties" in tables throughout this chapter -- there are some interesting properties that you can experiment with.
Work through the Hands-On Practice 6.4 (pp. 230-232)
Work through the Hands-On Practice 6.5 (pp. 232-234)
Work through the Hands-On Practice 6.6 (pp. 235-237)
Work through the Hands-On Practice 6.7 (pp. 237-240)
Work through the Hands-On Practice 6.8 (pp. 240-242)
Work through the Hands-On Practice 6.9 (pp. 243-245)
Work through the Hands-On Practice 6.10 (pp. 246-247)
- "Commenting out" sections of code is a great tip for finding where errors are happening.
- Check out the "CSS Web Resources" (p.247) You might want to add these to your bookmarked resource sites or on your blog. If you have other suggestions, please share them with your classmates!
Work through the Hands-On Practice 6.11 (pp. 248-254)
Read the Focus on Web Design task (page 260). In addition to searching the web for tutorials on CSS page layouts, I would also recommend searching YouTube (or other video sites). Many people [myself included] are using video sites as a way to share free educational materials.
Now for the Case Study projects... which will become "Two-Column" this week. :)
- Update your JavaJam Coffee House (pp. 260-264) site using the text instructions.
- Update your Fish Creek Animal Hospital (pp. 265-268) site using the text instructions.
- Update your Pacific Trails Resort (pp. 268-271) site using the text instructions.
- Update your Prime Properties (pp. 272-276) site using the text instructions.
Now to the Final Project:
- Update your Web Project (p. 276) using the text instructions.

OPTIONAL / RECOMMENDED ASSIGNMENTS:

Feel free to try out the HTML5 extensions with your Case Study projects. They are optional, but HTML5 is definitely the "next big thing".
If you are feeling adventuresome, try out some of the Hands-On Exercises (1-10) on page259. These exercises are meant to reinforce the techniques you have learned. If you are still feeling a little unsure of yourself, this will probably help you.
If you have some "free time" try out the Apply Your Knowledge tasks on pages 256-258.

Instructor:

My name is Robert Griffith. I'm married and have five wonderful children -- Robert and Megan are my 19 year-old twins who are both attending Mendocino College, David (16), Emily (12), and Maya (1). I lived in Ukiah most of my life, but I spent two years in Santa Rosa, three years in East Tennessee, and I am now living in Kelseyville.

I began working at Mendocino College as a computer lab aide back in the Summer of 1987. I went on to Sonoma State University and then to Dominican University of California. I began teaching computer science part-time for Mendocino College in 1997 and at Ukiah High School full-time in 1998. I also worked as a regional technology coordinator for the California Technology Assistance Project, as a "curriculum and technology integration facilitator" for Oak Ridge High School in Oak Ridge, Tennessee, and as manager of Optical Imaging Services at Methodist Medical Center (also in Oak Ridge, Tennessee).

Beside my two Mendo classes, I currently teach at Kelseyville High School (web design, computer projects, multimedia, personal finance, and independent study). Some of my hobbies include web and graphic design, creating video tutorials, history, art and teaching.

My family also has a Chihuahua (Paco), a cat (Chloe), a hamster (Teddy), and a two frogs. Let me know if you want to take any off our hands. :)