Login and Registration Options

Readings

PHP6 and MySQL5 for Dynamic Web Sites
Larry Ullman. Visual QuickPro Guide. Peachpit Press. 2008.

Collecting and storing user data from a web site has many purposes:

  • Track the kinds of visitors and their needs
  • Target content to specific vistors
  • Restrict content to adults
  • Secure transactions, such as forum conversations, product purchases, and download copyrighted material
  • Reduce spam in unrestricted areas of a site

While user data can be stored in a file on the server, it is more secure when stored in a database. Many web hosts provide PHP and MySQL connectivity with their accounts. These accounts often provide one or more databases with multiple users who have their own login credentials for accessing the database. Management of the database is either one manually by the hosts’ staff or within an Account Management tool like Plesk or CPanel. OSU Provides one database per student/staff, which can be activated by logging into onid.orst.edu, clicking Web Database, and the Create Database button. Use the database name, userid, and password in conjunction with a connection script.

Chapter 13 of PHP and MySQL for Dynamic Web Sites provides user registration code which you may download at no cost. Refer to the printed book for implementation.

Create a Database Table for Chapter 13

The Chapter 13 code requires a database table called users, and the following SQL query can be used along with the a connection script to create the table via a browser:

// Create the table. Only needed this one time.
$blog = 'CREATE TABLE users (
user_id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
active BOOLEAN NULL,
first_name VARCHAR(40) NOT NULL,
last_name VARCHAR(40) NOT NULL,
password1 VARCHAR NULL,
password2 VARCHAR NULL,
pass VARCHAR NOT NULL
email VARCHAR(40) NOT NULL,
registration_date DATETIME NOT NULL
)';

// Run the query.
if (@mysql_query ($blog)) {
print '<p>The table has been created.</p>';
} else {
die ('<p>Could not create the table because: <b>' . mysql_error() . '</b>.</p><p>The query being run was: ' . $query . '</p>');
}

This set of scripts, like many authentication systems provides the following components.

  • Standard file structure
  • Include files to build the page layout
  • Error handling in a config.inc file
  • Data validation
  • Database connectivity with mysql_connect
  • Registration
  • Authentication
  • Login
  • Logout
  • Change password
  • Forgot password

Another component that is useful for user authentication management is an administrative view of each user’s data. Such a tool would provide the ability to insert, edit, delete, and encript passwords, as well as backup the data. phpMyAdmin is a tool provided with OSU’s ONID accounts that allows staff, students, and faculty to manage the their databases, including user authentication tables.

Displaying database content with MySQL queries

Examples

Download the code you see in the column at the right, prepared by Pam Van Londen and James Holladay, OSU.

Readings

PHP and MySQL for Dynamic Web Sites
Larry Ullman. Visual QuickPro Guide. Peachpit Press. 2003. Read and try chapters 4 to 10.
PHP.net
Type in any php function name after the domain name to read what it means and how to use it.

A standard set of actions between PHP and MySQL is often structured like this in a PHP file:

1. Start the script.

<?php
/* This form allows the user to add a descriptive link to a database after preview and validation
and display it on the same page.
Written by Pam Van Londen and James Holladay in 2009.
*/

// 1. Set variables for the script.
$pagetitle = "Daily Painters ";
$subtitle = "Famous Artists";
//Set the default background color for each input field.
$firstnamecolor = '#fff';
$lastnamecolor = '#fff';
$websitenamecolor = '#fff';
$imagenamecolor = '#fff';
$bionamecolor = '#fff';
//Define global variables so their values can be accessed by other PHP tags.
global $valid;
global $submitted;
global $validFirstName;
global $validLastName;
global $validWebsite;
global $validImage;
global $validBio;

//initialize variable values
if(!isset($_POST['submit'])){//if the submit button was not yet pressed
$submitted = 0;
$valid = 0;//to stop the preview from showing when the page first loads with no content.
}
if(isset($_GET['submitted'])){//lets the preview division show that the entry has been added to the database
$submitted = 1;
}

2. Include site-wide files.

// 2. Display the template header.
include '../header.htm' ;
Open a connection to the database.
// Connect to the database.
require_once ('../../connect.php');

3. Verify the form data.

// 3. Set up the preview validation.
//if the preview button is clicked, set $valid to 1, we will make it 0 if any part of validation fails. Set all other validation-related variables to 1 or true.
if(isset($_POST['preview'])){//if the preview button is clicked
  $valid = 1;
  $validFirstName = true;
  $validLastName = true;
  $validWebsite = true;
  $validImage = true;
  $validBio = true;
}

//Validate each field.
if(isset($_POST['first_name'])){
  if(!ctype_alpha($_POST['first_name']) || empty($_POST['first_name'])){//must not be empty, must be alphabetic.
    //if not valid, change background color of input element, set pertinant validation variables to 0 or false.
    $valid = 0;
	$firstnamecolor = '#FFCC99';
	$validFirstName = false;
  }
}
if(isset($_POST['last_name'])){
  if(!ctype_alpha($_POST['last_name']) || empty($_POST['last_name'])){//must not be empty, must be alphabetic.
	//if not valid, change background color of input element, set pertinant validation variables to 0 or false.
    $valid = 0;
	$lastnamecolor = '#FFCC99';
	$validLastName = false;
  }
}
if(isset($_POST['website'])){
  $webURL = $_POST['website'];
  if(@fopen($webURL,'r') === false || empty($_POST['website'])){//must not be empty, URL must exist.
	//if not valid, change background color of input element, set pertinant validation variables to 0 or false.
    $valid = 0;
	$websitecolor = '#FFCC99';
	$validWebsite = false;
  }
}
if(isset($_POST['image'])){
  $imgURL = $_POST['image'];
  if(@GetImageSize("$imgURL") === false || empty($_POST['image'])){//must not be empty, an image must exist at the specified URL.
    //if not valid, change background color of input element, set pertinant validation variables to 0 or false.
    $valid = 0;
	$imagecolor = '#FFCC99';
	$validImage = false;
  }
}
if(isset($_POST['bio'])){
  if(empty($_POST['bio'])){//must not be empty.
    //if not valid, change background color of input element, set pertinant validation variables to 0 or false.
    $valid = 0;
	$biocolor = '#FFCC99';
	$validBio = false;
  }
}
3.1 Handle the data given by the visitor.
global $submitted;
// Handle the form when submit is clicked.
if(isset($_POST['submit'])){
  if(!$submitted){//change the $submitted variable to 1, after clicking the submit button
   $submitted = 1;

    // Insert new data from the form into the database

    // 3.1 Grab field data from the form and protect against SQL injections (stop any code inserted into the form field from running, which could erase our database tables).
	$cleanFirstName = mysql_real_escape_string($_POST['first_name']);
	$cleanLastName = mysql_real_escape_string($_POST['last_name']);
	$cleanWebsite = mysql_real_escape_string($_POST['website']);
	$cleanImage = mysql_real_escape_string($_POST['bio']);
	$cleanBio = mysql_real_escape_string($_POST['image']);
3.2 Construct SQL INSERT query.
// 3.2 Construct the query.
    $insert = "INSERT INTO artists (user_id, first_name, last_name, website, bio, image, registration_date) VALUES (
	   'NULL',
	   '{$cleanFirstName}',
	   '{$cleanLastName}',
	   '{$cleanWebsite}',
	   '{$cleanImage}',
       '{$cleanBio}',
	   NOW()
	)";
3.3 Execute SQL query, saving visitor data to the database.
// 3.3 Send the data to the database
	if(@mysql_query($insert)){
	  print '<p class="alert">Entry added.</p>';
	}
	else{
	  die("<p>Could not add the entry because: it was probably a duplicate, or <b>" . mysql_error() . "</b>. The query was $query.</p>");
	}

	//this works to keep data from resubmitting on refresh, but no 'submitted' message will appear, and it requires javascript to be turned on.
	echo "<script>window.location.replace('redirect.php?name=".$_POST['first_name']."');</script>";

  }//end if for insert
}

4. Add content from the database.

4.1 Query the database.
// 4. Display selected files from the table and order them.

// 4.1 Display the list of artists in ascending order by last name.
$show = 'SELECT * FROM artists ORDER BY last_name ASC';
4.2 Check for errors.
// 4.2 Run the query; if the table has rows fo data...
if($r = mysql_query($show)){
4.3 Begin the <table> element.
// 4.3 Start a division, list, and/or table before the rows are displayed.
  echo '<div class="rightbox"><dl> ';
4.4 Loop through all records, adding a <tr> for each
// 4.4 Retrieve and print every record or row along with the list or table tags each needs.
  while($row = mysql_fetch_array($r)){
	print "<dt><a href='{$row['website']}' >{$row['last_name']}, {$row['first_name']}  

			<dd><img src='{$row['image']}' alt='{$row['bio']}' height='30' width='175' />

			\n";
  }
4.5 Close the <table> element
// 4.5 End the list, table, and/or division.
  echo '</dl></div>';
}

5. If an error occured while inserting the form data into the database, add an error message.

// 5. Error - Query didn't run.
else{
  die ('<p>Could not retrieve the data because: <b>' . mysql_error() . "</b>. The query was $show.</p>");
}// End of query IF.

6. Close the database connection.

// 6. Close the database connection.
mysql_close($dbc); 

// Close the php script.
?>

7. Add the form.

<!-- 7. display a form with validadtion, preview, and submit to database options. -->
<form name="addfamous"  id="addfamous" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"  method="post"> 

<!--7.1 preview is hidden until preview button is clicked -->
  <div id="previewFormData">
  <?php
    global $valid;
	global $submitted;
	if($submitted){//clear the form if it was submitted.
	  echo '<fieldset class="preview"><legend style="margin-top:30px;">Preview</legend><dl>';
	  print "<dt><p>Your Information has been submitted, ".$_GET['submitted'].".</p></dt>";
	  echo '</dl></fieldset>';
	  $valid = 0;
	}
	else if($valid == 1){//if the form is valid, but not yet submitted, write the content to the preview division.
	  echo '<fieldset class="preview"><legend style="margin-top:30px;">Preview</legend><dl>';
	  print "<dt><a href='{$_POST['website']}' style='color:#000;' >{$_POST['last_name']}, {$_POST['first_name']}</a></dt>
			 <dd><img src='{$_POST['image']}' alt='{$_POST['bio']}' height='30' width='175' /></dd>
			 \n";
	  echo '</dl>
	        <label for="submit"><input name="submit" id="submit" class="confirm" type="submit"  value="Add to List" tabindex="y" accesskey="a"  /></label>
			</fieldset>';
	}
  ?>
  </div>

<!--7.2 form instructions-->
  <p>Please use this form to add a famous artist, a link to their web site, and an image of their work. </p>
  <p><span class="example">Required fields are marked with an orange  <span class="alert">*</span>
  and accesskeys are labeled with an <u>underline</u> and can be used with the Alt-Shift (Windows) or Control (Mac) keys.</span> </p>
<!-- 7.3 form fields-->
  <fieldset>
    <legend>Who do you consider famous?</legend>
    <p><label for="first_name"><u>F</u>irst name  <span class="alert"> *</span></label><br />
      <input  style="background-color:<?php echo $firstnamecolor?>" name="first_name" id="first_name" type="text" tabindex="1" accesskey="f" value="<?php echo $_POST['first_name']; ?>"  size="20" maxlength="30"   /><?php global $validFirstName; if (isset ($_POST['preview'])) { if(!$validFirstName){echo '<p class="invalidData" style="color:#f00;">Please enter a'; if(!empty($_POST['first_name'])){echo ' valid';}echo ' first name.</p>';}} ?> </p>

    <p><label for="last_name">Last <u>n</u>ame  <span class="alert"> *</span></label><br />
      <input  style="background-color:<?php echo $lastnamecolor?>" name="last_name" id="last_name" type="text" tabindex="2" accesskey="n" value="<?php echo $_POST['last_name']; ?>"  size="20" maxlength="30"   /><?php global $validLastName; if (isset ($_POST['preview'])) { if(!$validLastName){echo '<p class="invalidData" style="color:#f00;">Please enter a'; if(!empty($_POST['last_name'])){echo ' valid';}echo ' last name.</p>';}} ?> </p>

    <p><label for="website"><u>W</u>ebsite address <span class="alert"> *</span> </label><br />
      <input style="background-color:<?php echo $websitecolor?>"  name="website" id="website" type="text" tabindex="3" accesskey="w" value="<?php echo $_POST['website']; ?>" size="20" maxlength="100"  /><?php global $validWebsite; if (isset ($_POST['preview'])) { if(!$validWebsite){echo '<p class="invalidData" style="color:#f00;">Please enter a'; if(!empty($_POST['website'])){echo ' valid';}echo ' website address.</p>';}} ?> <br />
      <span class="example">Example: http://www.site.com</span></p>

    <p><label for="image"><u>I</u>mage of their work or portrait <span class="alert"> *</span> </label><br />
      <input  style="background-color:<?php echo $imagecolor?>" name="image" id="image" type="text" tabindex="4" accesskey="i" value="<?php echo $_POST['image']; ?>" size="20" maxlength="100"  /><?php global $validImage; if (isset ($_POST['preview'])) { if(!$validImage){echo '<p class="invalidData" style="color:#f00;">Please enter a'; if(!empty($_POST['image'])){echo ' valid';}else{echo 'n';}echo ' image URL.</p>';}} ?> <br />
      <span class="example">Example: http://www.site.com/picture.jpg</span></p>

    <p><label for="bio"><u>B</u>iography (short) <span class="alert"> *</span> </label><br />
      <textarea style="background-color:<?php echo $biocolor?>" name="bio" id="bio" tabindex="5" accesskey="b" cols="20" rows="6" ><?php echo $_POST['bio']; ?></textarea><?php global $validBio; if (isset ($_POST['preview'])) { if(!$validBio){echo '<p class="invalidData" style="color:#f00;">Please enter a'; if(!empty($_POST['bio'])){echo ' valid';}echo ' bio.</p>';}} ?> <br />
      <span class="example">No html allowed; just plain text.</span>
<!-- note that textarea size attributes are rows and columns, not size -->
    </p>
  </fieldset>
<!--7.4 submit if preview is ok and all fields are valid -->
  <fieldset>
    <legend>Preview will show at the top of the page.</legend>
    <label for="submit"><input name="preview" id="preview" class="validator"  type="submit"   value="Preview" tabindex="6" accesskey="v"  />
    to <u>v</u>iew your submission.</label>
  </fieldset>
</form>

8. Include the site template.

<!--8. end the template items -->
<?php
include ('../footer.htm');
?>

Database Design

Readings

SQLCourse.com
Free interactive course online, for learning MySQL.
MySQL tutorial
MySQL Reference manual, chapter 3.
Database Enabled Websites
Tutorial recommended by OSU PHP documentation.

A database is a collection of related data. It can also be viewed as a collection of related tables.

Tables have sets of fields. Field types define the kind of data the field can contain, including:

String
Stores text and numerical characters.
Numeric
Stores numbers that can be calculated.
Date and time
Stores dates and times.
Boolean, or logical
Accepts one of only two specified values.

It is possible to create tables; define fields; and enter, query, and display data using scripts in web pages. For this course, we will use three “tools” to do this:

MySQL
An open-source database residing on the ONID server; each student gets one.
phpMyAdmin
The interface provided to create tables, define fields, enter, browse, test, and query data.
PHP scripts
In web pages, to enter, query, and display data from database tables.

MySQL database via your web server account

MySQL is an open-source database. Most web server accounts include the use of at least one MySQL database. To design a database, think about data you would like collected from your visitors. What do you want to know about them?

Start with pen and paper to list the ideas about like sets of data you want to collect. Organize the sets into:

  • Tables (or entities)
  • Fields
  • Relationships (how one table uses data from another table)

For instance, if you just want to track inquiries, a single table might meet your needs. This database uses one table (contact) and that table uses 9 fields:

Inquiry database structure
Table NameFields needed
ContactCustomerNumber
FirstName
LastName
Address
City
State
Zip
Phone
Email

If you have more complicated data to collect, group related fields in separate tables. For instance, if you want to track statistics of your favorite sports teams you may end up with 4 tables, several fields per table, and relationships between fields/tables:

Team standings database structure
Table NameFieldsType
Teams Index
Rank
Name
Location
Sport
Int
Int
Varchar
Varchar
Varchar
Varchar
Players & Coaches Index
TeamIndex
Rank
Name
Location
Age
Position
Sport
Comments
Int
Int
Int
Varchar
Int
Varchar
Varchar
Varchar
Text
Sport SportType
SeasonStart
SeasonEnd
Varchar
Date
Date
Matches Index
Location
DateStart
DateEnd
Rank
Int
Varchar
Date
Date
Int

Once you decide the number of tables you need, and what you want to call each field, define the field types.  Basic types include:

Integer (int)
Numerals that will be calculated.
Float
A number with decimals.
Variable Character (varchar)
Numerals and text in short strings; usually 100 characters or less.
Text (text)
Numerals and text for long passages.
Date (date)
Years months, and days. The default is year-month-day.

Some attributes to note include:

Index
Provides a unique identifier for the row/record in the table. Can be the primary key field. Use “idx” rather than “index” for the field name; it is sometimes dangerous to use a field name that is already a standard database term/variable/type, etc.
Null
Means the field can remain empty; the visitor doesn’t have to fill this field in.
Not Null
Means the field cannot remain empty; the visitor must fill in the field.

When you know what fields you need, you can either define the tables and fields using:

  • phpMyAdmin
    • Link to it from your database set up page accessible when you login to your web server account.
    • Requires your database login and password.
  • PHP Scripts
    • Find or write a script that creates a tables and fields.

Once your fields are defined, build a web page form to collect the data. Use the same field names in your form as used in your database.

You’ll need snippets of code to:

  • Login/connect to the database
  • Add a row to the database
  • Add data to the row
  • Display the new row and/or a set of records/rows
  • Close the connection to the database

Larry Ullman, author of the Visual Quickstart Guides for PHP and MySQL, says “One of the best ways to determine what information should be stored in a database is to clarify what questions will be asked of it and what data would be included in the answers.”

See Displaying database content with MySQL queries for example code.

Wikis and Groupware

Readings

Wiki Engines and Choice Tree
Wiki.org’s list of wikis by server type. Look in the PHP section. Also use their tools at the top for helping you choose one to install based on your needs.
Which Open Source Wiki Works For You?
Shlomi Fish. 2004. O’Reilly Media, Inc. OnLamp newsletter online.

Example

Wikipedia
The free encyclopedia anyone can edit. MediaWiki software.

According to Ward Cunningham,
father of the WikiWiki concept, and author of Wiki.org, a wiki is, “The simplest online database that could possibly work.”

Shlomi Fish, contributing author for O’Reilly Media says it more succinctly:

A Wiki is a web site that can be edited directly by people browsing it. That way, they can add new content, correct errors or inaccuracies, and add their own comments, among other things.

A wiki can empower site visitors to make your site theirs by contributing directly to its success (or failure if spamming is not deleted immediately).

Most wikis have a “sandbox” for new visitors to practice their new markup skills. The syntax used in the wiki content management interface is not usually standard html but a simpler form of adding new pages, links, and bullet lists, for instance.

What is a Groupware?

A Groupware application is typically a system that is setup for the purpose of sharing project-related work and information. Some of the basic characteristics of a groupware application include an event calendar to share key deliverable dates, group mailboxes to distribute communications, a file repository to exchanges documents, and a forum or chat area for interactive discussions.

Groupware applications are especially useful in environments where team members are not centrally located and need to have a place to exchange ideas and project commitments. (source: OpensourceCMS)

Image Galleries

Downloads

Coppermine
Free, open source photo gallery web application.
Gallery2
Free, open source photo gallery web application.

Media asset management applications allow photographers, artists, and videographers to share their work online. A few robust open source applications can be downloaded free to organize a site owner’s inventory of photos, art, sound, and video segments.

Asset management applications usually include these components:

  • Resizing, rotation, and flipping changes
  • Optimization to reduce file size and resolution
  • Organization into albums by date and/or topic.
  • Custom theme creation
  • Clickable thumbnails
  • Sorting
  • User roles assigned by the administrator
  • Privileges based on roles.

Forums

Readings

Google Groups
List of Usenet groups
phpbb.com Creating Communities
Scalable, and highly customizable open-source bulletin board package. phpBB has a user-friendly interface, simple and straightforward administration panel, and helpful FAQ. Based on the powerful PHP server language and your choice of MySQL, MS-SQL, PostgreSQL or Access/ODBC database servers, phpBB is the ideal free community solution for all web sites. This solution will build the necessary tables on your ONID database for you. Be sure to provide user instructions to let visitors know they have to register before adding to your BBS.
 

In our free society, we take it for granted that we can discuss whatever we want without fear of retribution. Bulletin Board Systems were one of the first online areas where groups could congregate. The notion of meeting online has evolved and now we have forums, chats, blogs, guestbooks, and wikis (have I left out any new methods?).

Forums often require visitors to become members by registering their name with the database. Visitors can then login, post a question or response, and logout. Their screen name, email, and avatar are sometimes listed to help the forum be more personal.

Whereas blogs and wikis can facilitate the production of an entire web site, a forum generally does not; it is strictly for communicating.

Maintaining a WordPress Blog

Once a web author has configured and revised the theme for a WordPress blog, it is customary to hand off the maintenance of the blog site to the client. This tutorial can help the client remember how to log in and add posts, pages, and links.

Logging In

As the owner of the web site, you become the web site "Administrator". This level of privilege allows you to register other "users" so they can help maintain content or respond to your news posts. You can also update content, add categories of posts, links, and pages, and turn features on and off.

To login, click the Login link on your site’s home, journal, or blog page. The link may be in the right, left, or bottom section of the page.

Dashboard and Main Menu

Logging in takes you to the Dashboard screen, where you can access the main administrative menu, which includes:

Dashboard
Notices from WordPress.
Write
Write new posts (news) or add new pages.
Manage
Add new categories, edit posts, edit pages, turn posts and pages on and off. Review and approve comments, and upload files.
Links
Sort, add, and categorize links. Import links from other documents and databases.
Presentation
Update the page design (theme). This task is for experienced web designers and programmers only.
Plugins
Additional features may be turned on and off
Users
Add a list of users who may provide comments on the news posts, or update content pages.
Options
Settings for the blog.
Logout
Be sure to logout each time you are done editing.

Some of these menus may have a submenu as well. Submenus show up under the main menu, but in smaller type.

If you’ve registered other Users, they too will see the Dashboard and main menu, but will only have access to sections you assigned them to.

Managing Posts and Pages

Click the Manage link in the Dashboard, to see a list of news/blog items.

  • Click the Edit button next to item you want to modify.
    • The text will appear in a text box so you can edit it.
      • You’ll also see .html and .php <tags> within the textbox.
      • Be sure to leave them in place so the page layout does not break.
    • You can paste text in from Word, AppleWorks, other web pages, email messages, etc., but may need to add, replace, or remove tags to format the text the way you like.
  • Save and continue editing, or publish the post.

To view the edited item:

  • Click the View Site link, which is next to the site name in the Dashboard header.

Some pages will have an Edit this entry link at the end of the post/page.

 

Once you have logged in, the login link will change to Logout. To reach the dashboard, click Edit this entry.

Blogs: Websites for articles, news, journals, and product offerings

Readings

The revolution should not be eulogised
Weblogs may not be as innovative as some claim but they do have real potential as a form of personal publishing, argues Rebecca Blood.
WordPress
Free Blog software configured to work on the ONID server. Provides privacy via passwords. WordPress Glossary.
Getting Started
.
Downloadable templates.
Free Blog Software / Hosting
About.com. Sheila Ann Manuel Coggins, Your Guide to Web Logs. Top Free Blog Software / Hosting for Bloggers.

Examples

“Blog” is short for “web log”. The term refers to an Internet web page that is often used for personal views about a variety of topics, including commentary about other sites, world events, personal news, diaries, photos, essays, poetry and fiction.

There are several free and simple-to-use Blog sites you can belong to and use for a variety of purposes. However, if you want to customize it and not pay extra fees, you can install a ready-made open source application, such as WordPress, MovableType, and Drupal, among others. You can also learn more about PHP and MySQL and build your own on ONID.

Installing WordPress on ONID

  1. Login to ONID
    • Click Web Database.
    • Write down your Web Database host, userID, and password.
  2. Link to WordPress
    • Download the WordPress application .zip file to your hard drive (usually the C drive).
      • In your My Documents folder make a new folder called site (lowercase, no spaces).
      • Unzip the files.
  3. Connect to your ONID and click on the FTP link.
    • Using Microsoft Explorer on a Windows machine.
    • Open the public_html folder.
      • Add a new directory/folder called site (lowercase, no spaces).
      • site can be the name of your site (lowercase, no spaces).
    • Select all the files inside your site folder on the hard drive (C).
      • Drag the selected files to the new site folder on ONID, into the public_html/site folder.
  4. NOTE: Do not do this step for WordPress V 3+. On the ONID server, open the wp-config-sample.php file in NotePad, SimpleText, Dreamweaver, or Frontpage.
    • Add your database host, userID, and password (replacing the lowercase placehoder text inside the single quotes). Save.
    • Rename the file wp-config.php.
      • Or save the file with the new name so you still have the original.
    • Close the FTP connection by closing the browser window or logging out.
  5. In a Browser, navigate to your new site folder in a browser.
    • http://people.oregonstate.edu/~yourusername/site
      • This address is NOT in your FTP window, but in a new window.
      • When you hit return to run the new site folder’s index.php default page, the database will be configured.
      • Answer the questions in the install screens to activate your new web site.
  6. Continue with:

Updating Articles with a simple script

Readings

List of free CMS code
Read about what’s available for free. Try them at your own risk. Most of these involve database connectivity.

Updating articles with CMS

The most powerful form of CMS you can provide for your clients is a way to update articles/stories/blurbs. Download, install, and try some of the free solutions found online, or build your own.

Instructor example

Submit an article
This script set is a modification of the rotating quote script found on the next page. It uses a text file to store the article, a script to add to it, and a script to view it. The site’s template was added to provide a consistent look. User help is provided in the text input box. The script reads the .html tags left in the form field so it displays properly. The downfall of this simple method is that the user will erase the tags. Another improvement is to build in a notification to the editor or webmaster and allow only their authorization to post the article; alleviating unwanted article submissions. Permissions on the text file must be set to chmod 666 or 640. Use Fetch, WSFTP, or Telnet/SSH Shell to make this change on the file on the server. Download files (.zip)

Content Management Systems (CMS)

Readings

List of Content Management Systems
Try them at your own risk.

Companies generally have one or more staff who provide content for internal and external print and web communications. These content providers will want to update content anytime, anywhere; so providing a web application which allows this will save time and money in the long run. Web applications are essentially Content Management Systems (CSM), which usually provide these sophisticated components:

  • User Management and authentication of various levels of users
    • Super Administrative privileges (usually the web developer(s)
    • Administrative privileges (supervisors of content providers)
    • User privileges (content providers)
    • User Authentication for all user levels
  • Intranet, Internet, and Extranet areas
  • WISIWIG and Source editing
  • Spell checking
  • Approval and “go live” functions.
  • File management (add, move, rename, and delete pages and data)
  • Media copyright tracking
  • Templates/Themes/Skins customization
  • Plugable modules
  • On-the-fly installation and upgrades
  • Management of blog posts, comments, pages, links, media, categories, tags, galleries, and custom content types
  • Custom menu building with combinations of pages, posts, tags, and categories
  • Import and export of data
  • Automated backup
  • Really Simple Syndication (RSS) ability

Sophisticated systems take months/years to develop and can be quite spendy. For smaller companies, Open Source and low-cost options are available to download and install on web servers. Open Source web applications are available in numerous types to manage any single function or a combination of several:

  • Blogs, for news and discussion
  • Forums, for topical discussions
  • Galleries, for displaying photography and art
  • Wikis, for collaboration
  • Projects, for planning and collaboration
  • Courses, for managing classes, course materials, grading, and students/faculty

Meta tags

Meta tags help search engines find your site. These are the most common for HTML 4 and XHTML, which you can copy and paste into your template:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="Author" content="" />
<meta name="Copyright" content="" />
<meta name="Rating" content="General" />
<meta http-equiv="expires" content="0" />

These are more common for HTML 5:

<meta charset="UTF-8" />
<meta name="Keywords" content="" />			
<meta name="Description" content="" />			
<meta name="Author" content="" />

Fill in your text between the quote marks.

If you don’t want search engines to find your site, then add these (or replace the others):

<meta name="Robots" content="noindex, nofollow, noarchive" />

OR

<meta http-equiv="pragma" content="nocache" />

Here is an example of complete meta descriptions for XHTML:


<meta name="Keywords" content="nw river tours, willamette river, willamette, osu, corvallis, oregon state university, boating, nordyke, hiking, nature photography, jet boat, north river boat, " />
<meta name="Description" content="Northwest and Willamette River Tours" />
<meta name="Author" content="PamVanLonden.com, CJ Nordyke, John Nordyke" />
<meta name="Copyright" content="2009" />
<meta name="Rating" content="General" />
<meta http-equiv="expires" content="0" />

XHTML Checklist

This is a list of the most common requirements for XHTML as per the W3C. Also see HTML for the World Wide Web, Chapter 1, page 36.

Start the document like this:

  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • Define your File Type with: <html xmlns=”http://www.w3.org/1999/xhtml”>

In the head section, add the character set (optional):

  • <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Use this formatting as needed:

  • 4.1. Documents must be well-formed
    • All elements must have closing tags: <p>paragraph</p>
      and <img scr=”pic.jpg”
      />
    • All the elements must nest properly: <p><b>Nested
      tags</b></p>
  • 4.2. Element and attribute names must be in lower case.
    • for all HTML element and attribute names: <a
      href
      =”#” target=”_blank“>
  • 4.3. For non-empty elements, end tags are required
    • <hr width=75% noshade=”noshade” />
  • 4.4. Attribute values must always be quoted:
    • <p class=menu>
  • 4.5. Attribute Minimization
    • Attribute-value pairs must be written in full:
      • <dl compact=”compact”>
  • 4.6. Empty Elements
    • Empty elements must either have an end tag or the start tag must
      end with />:
      <br /><hr />
  • C.13. Cascading Style Sheets (CSS) and XHTML
    • Use lower case element and attribute names.
    • In tables, add a tbody element to a table if it is referred to
      in a CSS selector.
  • Dreamweaver Preferences

    1. Launch Dreamweaver
    2. Choose Edit->Preferences
      • General
      • Accessibility, choose
        • Show Attibutes When Inserting: check all boxes
      • Code Format, choose
        • Unix Line break type
        • lowercase
        • quote attributes
        • use DIV tag
      • Invisible Elements, choose
        • Line breaks
        • Image Maps
        • JavaScripts
      • New Document, choose
        • HTML
        • .Make document XHTML compliant
      • Validator, choose
        • XHTML 1.0 transitional

    Create Directories and Landing Pages

    The file structure

    On ONID, as on any other web server, you can have many sites within your root directory. Consider making a directory for each site you have planned, rather than mixing them all up.

    1. On your local hard drive, add a directory named for your public site.
      • Web site directories listed on a hard drive.Examples of names of directories and the address a visitor would type. Also see the hard drive list illustration at the right:
        • /courses/
          • http://oregonstate.edu/~vanlondp/courses
        • /blog/
          • http://oregonstate.edu/~vanlondp/blog
        • /vita/
          • http://oregonstate.edu/~vanlondp/vita
      • Add a file called index.htm (or index.php for dynamic sites) to the new site directory.
        • Index pages are the default landing page of each directory. Every directory that will have pages with content should have an index page.
        • Directories that do not require index pages are images, media, scripts, Templates, etc.
        • Note that on Microsoft servers (as apposed to Apache) use default.htm as the default page.
        • Default pages will automatically appear when you type the path to the directory because the server recognizes it as default by its name.
      • Sample file structure for ONIDNote: If you’re going to keep you site hidden—it’s private—then you can bury it within a class folder if you wish.
    2. Add a directory called images
      • to the site directory.
    3. If using .htm pages then add a directory for each main topic.
      • Keep the names as similar to the planned menu items as possible.
      • Add index.htm files to each directory.
        • Option-drag (Macintosh) or Control-drag (Windows) the previous index.htm file into each directory and subdirectory.
        • Note: there is nothing on these index files yet; we’ll apply templates to them later.
      • Add images directories to each topic directory that will have image files unique to that topic.
    4. Example of the course directory with php structure.If you are using .php pages and dynamic content, add just one page for each section rather than a directory for each section.
      • Place snippets of content such as articles, quotes, comments, etc into separate .htm or .php pages, or write queries to pull content from a database. More on this later in CS 295.
    5. Add subdirectories to topic directories as needed.
      • Add index.htm files to each subdirectory.
      • Add images directories to each subtopic directory that will have image files unique to that topic.
    6. Copy the completed structure to ONID‘s web server space in the public_html area.

    A web page in 15 lines or less

    The anatomy of a web page

    Roll over each each item below to read the <title> tag that describes it more.

    • doctype
    • html
      • head
        • title
        • meta
        • link to external style sheets and scripts
        • internal styles and scripts
      • close the head section
      • body
        • headlines
        • paragraphs
        • embedded images, movies, audio files
        • lists
        • tables
        • hyperlinks and anchors
        • image maps
        • links to external scripts
      • close the body section
    • close the document

    How to markup a simple .xhtml page

    Type the lines of code below in a text editor like NotePad, TextEdit, or SimpleText.

    Line 1: Define the version of markup language you’ll be using in the page with:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Line 2: Define your File Type with:

    <html xmlns="http://www.w3.org/1999/xhtml">

    Line 3: Begin the Header with:

     <head>

    Line 4: Add the Title of the page so it doesn’t say "untitled" in the browser title bar:

     <title>Soandso's Table of Contents</title>

    Line 5: Add the first of several Meta tags. This one isn’t required, but tells browsers what character set you’re using.

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    or
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    Line 6: Link to a style sheet that has the color scheme, fonts, and layout styles you prefer. Start with this one:

    <link href="http://oregonstate.edu/instruct/cs295/media/article.css" rel="stylesheet" type="text/css" />

    Line 7: End the Header section with:

    </head>

    Line 8: Begin the Body section.

    <body>

    Line 9: Begin and end a Headline with:

    <h1>Table of Contents for [myname]</h1>

    Line 10: Begin and end a Subhead with:

    <h2>List of Classes</h2>

    Line 11: Begin and end Paragraphs with:

    <p>Click each item listed below to view it.</p>

    Now what?

    1. Save the file as .htm or .html in a directory/folder on your hard drive.
    2. Open the file in a browser like FireFox, Explorer, Safari, or Netscape.
    3. Review how it looks and make corrections.
    4. Transfer/copy the file to the web server (ONID’s public_html directory).
      • ftp://ftp.onid.orst
    5. View the live web file on the Internet at your ONID web address.
      • http://oregonstate.edu/~onidID/page.htm

    Line 12: Begin and end a list of Navigational Links:

    <ul>
      <li><a href="cs195/index.htm">CS 195</a></li>
      <li><a href="art300/index.htm">ART 300</a></li>
    </ul>

    Line 13: Begin and end text that links to an Email Message Window, with:

    <p>This site &copy; <a href="mailto:soandso@onid.orst.edu">Soandso</a> 2004</p>

    Line 14: End the Body with:

    </body>

    Line 15: End the File with:

    </html>
    

    Understanding the Audience

    Who will visit the sites you build? What are their expectations? What kind of technology will they use to view you site? What will bring them back to see it again?

    Answers to these questions will effect every decision you make about the development of a site, from the way navigation is labeled to how much multimedia is tolerable.

    A site development team will go to great lengths to get answers they need to help define their site, including surveying focus groups, asking for online feedback of an existing site, paper surveys, and offering premiums/giveaways for the users’ time and effort.

    Compare these types of audiences with the types of sites listed below. Do you see any similarities? Ilise Benun, author of Designing Web sites for Every Audience, lists 6 types:

    • Learners
    • Shoppers
    • Connection Seekers
    • Transactors
    • Business Browsers
    • Fun Seekers

    Take a look at Reece, Rogers, and Sharp’s online tools for building a list of questions you may need to address for your project:

    Interactive Heuristic Evaluation Toolkit
    Reece, Rogers, and Sharp. Interaction Design web site.

    For this course, you will make educated guesses about your audience (unless you have the time to really find out about your audience) and listen to feedback from your small groups to assess whether you site(s) meet your defined audiences’ needs.

    Clean up the web server ~ ONID at OSU

    If you’ve been storing files, experimenting, and building web sites for fun on your OSU ONID web server, it’s probably time to clean up the space—the public_html directory as well as other areas.

    Cleanup is important before beginning a new web project, as you won’t want any old files confusing you or confusing the dynamic functions you’ll be using.

    • Delete files you know you won’t use again.
    • Move files you’re aren’t sure about into a temp directory.
    • Put files for each web site in separate directories; each named similar to the site name. For instance:
      • oregonstate.edu/~oniduserid/vietnam
      • oregonstate.edu/~oniduserid/juggling
      • oregonstate.edu/~oniduserid/cs195

    Teach to learn

    Requiring students to share what they have learned helps them more fully understand and retain the new knowledge.

    Dr. Gary Phillips of the National School Improvement Project makes this claim:

    People retain learned material at the following levels:

    • 10% of what we hear
    • 15% of what we see
    • 30% of what we see and hear
    • 80% of what we experience actively
    • 90% of what we teach others

    Course Logistics

    By following these guidelines, you’ll succeed in this course:

    • Check Bb frequently for announcements and solutions.
    • Ask technical questions and provide alternative methods in class and the weekly forums so I can answer them for everyone.
      • If you need help getting your code to work:
        1. Use Dreamweaver’s Results panel to see what errors it finds.
        2. Ask questions in the Forum and check back later for answers.
        3. Come in during office hours.
        4. If all three of those methods fail to help solve your problem, email me. I check email every day. Send the URL of the page on the server in the email.
        5. If you have questions about your grade, then use email (it’s a private matter).
    • Add all work to your ONID or ENG server space and submit the URL in Blackboard.
    • Read the textbook(s), my lecture notes, and tutorials to see three different ways to accomplish the same tasks.
      • Print the lecture materials and deliverable page prior to class so you can ask questions and keep notes on the same page.
      • Try what you read.
      • Put in the necessary time.
    • Refrain from using Frames. But experiment with iframes.
    • Refrain from using adult content in your site, or anything illegal.
    • Title all emails with the course number (CS 195 or CS 295).
      • This is a requirement!
      • I get more than 100 emails per day and yours are the most important, so help me find them.

    Review of necessary skills

    Readings

    HTML for the World Wide Web, 5th Ed.
    Pages 13 to 82. For review.
    Differences Between XHTML and HTML
    W3Schools; excellent tutorials, references, examples, quizzes, and exam certification.
    Web Quality Assurance Tutorial
    W3Schools.

    Necessary Skills

    This course will continue to open up the possibilites available to you inside the Web. To be successful in this class and find the passion many of us have to use the Web to its potential, ascertain if you have most or all of these traits and skills.

    TraitsSkills
    • Creative thinker
    • Troubleshooter
    • Investigator
    • Interested
    • Entrepeneural
    • Available
    • Collaborator
    • Organized
    • Understanding of the web server’s jobs
    • Basic .html
    • Basic image optimizing
    • Sense of design and typography
    • Clean file structuring
    • Accurate typist

    Pre-assessments

    Take all three quizzes and review all topics you had trouble with. If you score below 50% on the HTML quiz, work through the W3Schools tutorials by the end of the week to see if you’re more comfortable with the content of this course.

    HTML Quiz
    W3Schools. In 5 minutes these 20 questions will let you know if this class if for you.
    XHTML Quiz
    W3Schools offers excellent tutorials, examples, and quizzes. Find out in 5 minutes if you need to brush up on the transitional markup standards.
    CSS Quiz
    W3Schools offers excellent tutorials, examples, and quizzes. Find out in 5 minutes if you’re ready for this class. Find out in 5 minutes if you need to brush up on.

    Survey

    So that I can tailor my instruction to work for all students, I need a good indication of your skills, system set up, and interests. Please take the survey by the second day of class.

     

    Languages of the Internet

    Readings

    W3 Schools Glossary
    Comprehensive terms and explanations.

    These definitions come from a variety of online sources. Click the term to read more about it.

    HTML
    Hypertext Markup Language is a formatting language used for documents on the World Wide Web. HTML files are plain text files with formatting Codes that tell browsers such as the Netscape Navigator how to display text, position graphics and form items, and display links to other pages.
    XHTML
    Extensible Hypertext Markup Language, a stricter remaking of HTML as an application of XML. The successor to HTML.
    DHTML
    Dynamic HTML, a mixture of standards including HTML, style sheets, the Document Object Model and scripting.
    SHTML
    (Server-parsed HTML) A file extension used to identify HTML pages that contain server-side includes. This extension is not required.
    PHP
    Hypertext Preprocessor, an open source, server-side, HTML embedded scripting language used to create dynamic Web pages. In an HTML document, PHP script (similar syntax to that of Perl or C ) is enclosed within special PHP tags. Because PHP is embedded within tags, the author can jump between HTML and PHP (similar to ASP and Cold Fusion) instead of having to rely on heavy amounts of code to output HTML. And, because PHP is executed on the server, the client cannot view the PHP code. PHP can perform any task that any CGI program can do, but its strength lies in its compatibility with many types of databases.
    JavaScript
    JavaScript is a simple scripting language that is sent as text and compiled on the client before execution. It was created by Netscape-not Sun Microsystems or JavaSoft. Originally named LiveScript, JavaScript code (which is unrelated to Sun’s Java language) is designed to be embedded into HTML documents. It is a competitor to Microsoft’s VBScript.
    CSS
    Cascading Style Sheets were created in 1997 with the introduction of the HTML 4.0 Standard. Style sheets let an HTML author create an overall consistent design and layout for Web pages. There are three parts to CSS: the styles, their placement, and the fact they can cascade.
    SSI
    Server Site Includes are server-parsed pages, meaning the server scans the page for commands that require additional insertion before the page is sent to the user. back to top SMTP server Short for Simple Mail Transfer Protocol, a protocol for sending e-mail messages between servers. Most e-mail systems that send mail over the Internet use SMTP to send messages from one server to another; the messages can then be retrieved with an e-mail client using either POP or IMAP.
    XML
    eXtensible Mark-up Language, a specification developed by the W3C. XML is a pared-down version of Standard Generalised Mark-Up Language, designed especially for Web documents. It allows designers to create their own customised tags, enabling the definition, transmission, validation, and interpretation of data between applications and between organizations.
    RSS
    Quoting the official RSS v1.0 specification: ‘RDF Site Summary (RSS) is a lightweight multipurpose extensible metadata description and syndication format. RSS is an XML application, conforms to the W3C’s RDF specification and is extensible via XML-namespace and/or RDF based modularization.’ Here’s a tamer description: RSS is a format for syndicating news and the content of news-like sites, including major news sites like Wired, news-oriented community sites like Slashdot, and personal weblogs.
     
    XSLT
    XSL Transformations, a language for transforming XML documents into other XML documents. XSLT is designed for use as part of XSL, which is a style sheet language for XML. In addition to XSLT, XSL includes an XML vocabulary for specifying formatting. XSLT is a W3C specification but also part 2 of the XSL specification.
    SOAP
    Interfaces with XML to deliver web services.
    WML
    Wireless Markup Language which was formerly known as HDML (Handheld Devices Markup Language). WML is a language that allows the text portions of Web pages to be displayed on mobile phones and personal digital assistants (PDAs) via wireless access. WML is part of the Wireless Application Protocol (WAP) that is being proposed by several vendors to standards bodies.
    MathML
    MathML is an XML application for describing mathematical notation and capturing both its structure and content. The goal of MathML is to enable mathematics to be served, received, and processed on the Web, just as HTML has enabled this functionality for text.
    .NET
    Microsoft’s set of software technologies for connecting information, people, systems, and devices. The technology is based on Web services—small building-block applications that can connect to each other as well as to other, larger applications over the Internet.
    ASPX
    ASP

    File Transfers ~ OSU only

    Addresses

    html: http://www.onid.orst.edu
    shell: shell.onid.oregonstate.edu
    ftp: ftp.onid.orst.edu

    FTP using MacOS X from off campus

    1. From the Finder menu, select Go->Connect to servers.
    2. Type afp://onid-fs.onid.orst.edu/ in the server address field.
      • Type your ONID UserID and Password when prompted.
        • Your name may be in the name field but you’ll want to replace it with your ONID userID.
        • If you are not prompted for the userID and password, then try it again; you won’t be able to transfer files to the web server without authenticating the login.
    3. Open the public_html folder.
      • View by files rather than folders to see the organization of directories and files at a glance.
    4. Drag and drop files into the public_html folder.
      • Keep the organization of files and folders the same as you have on your hard drive to keep from breaking links within the html documents.

    For other Mac OS X or 9 options, see the ONID site.

    FTP with Dreamweaver

    FTP with ONID

    SSH to the database

    • You ssh into shell.onid.oregonstate.edu as normal, then execute
      • mysql -h oniddb.cws.oregonstate.edu -u -p
      • You will be prompted for a password. It is the password supplied on the ONID Web Database page.
    • Or you can execute
      • mysql -h oniddb.cws.oregonstate.edu -u[onid login] -p[onidDB password]
      • so that you don’t have to wait for a prompt. Also for your onid login, you have to precede it with ‘onid_’ before you type in your onid login.
        • This actually beats using the prompt because you actually get to see your password as you input it, which saves you a lot of trouble, since the password is also case sensitive.

    Copyright issues

    Readings

    USA Copyright Office
    FAQ
    250 HTML and Web Design Secrets
    Molly E Holzschlag. Wiley Publishing. 2004.
    Pages 108 to 109.

    To avoid academic dishonesty, breach of copyright laws, and to provide credit where credit it due, I require that students cite the sources of the following kinds of materials used in your deliverables:

    • All visual material such as photos, illustrations, and icons
      • Cite the author/owner, copyright date, and URL in the alternative text tag (alt=””) or in a caption.
    • Scripts such as JavaScript, .php, dhtml, etc.
      • Cite the programmer/owner, copyright date, and URL in the code or footer of your site/page.

    Recommended Reading

    Macromedia Dreamweaver Advanced for Windows & Macintosh
    J. Tarin Towers, Sasha Magee, Abie Hadjitarkhani. Visual QuickPro Guide. Peachpit Press.
    Photoshop 7 for Windows & Macintosh
    Elaine Weinmann, Peter Lourekas. Visual Quickstart Guide. Peachpit Press.
    HTML for the World Wide Web, 5th Ed.
    With XHTML and CSS. Elizabeth Castro. Visual Quickstart Guide. Peachpit Press.
    Supplemental web site
    Download example files
    JavaScript for the World Wide Web,
    4th Edition
    By Tom Negrino, Dori Smith. Visual QuickStart Guide. Includes companion site and online version with 14-day free trial.
    Designing Web Usability: The Practice of Simplicity
    Jakob Nielsen. 1999. New Riders; 1st edition (December 1999) Nielson is the authority in usability. If Web Development is your field, buy this one or the next one.
    Homepage Usability: 50 Websites Deconstructed
    Jakob Nielsen, Marie Tahir. New Riders; 1st edition (November 5, 2001)
    Optimizing Flow in Web Design
    Andrew King. Sample Chapter. New Riders. Jul 11, 2003.
    Attracting Return Visitors
    David deBoer. InformIT. Jan 31, 2003.

    TX weather

    For the second time in a week, we are having a lightening storm with rain (still to come). The in between days are quite warm. I think we’re using Direcway satellite access, but I’ve got quite a nice connection tonight inspite of the weather. hmmm.

    National Do Not Call list

    Looks like cellphones will be hit with spam soon, so register the number with the Gov’t’s Do Not Call List.

    Optimizing Online Images

    Readings

    How to Avoid Plagiarism of your Digital Images.

    Online Image Specifications

    Optimized images meet these specifications:

    Small file size
    Keep file size less than 30k if you can.
    Exact dimensions
    Crop and reduce the size of images to fit the dimensions of the space in your web page.
    Correct file format
    Online photos are usually .JPG.
    Flat-color images like logos and clipart are usually .GIF and sometimes 8-bit .PNG.
    Graphics with true transparency need 24-bit .PNG.
    Reduced resolution
    Monitors render 72 or 96 pixels per inch (ppi); the standard is 72ppi.
    Color Mode
    RGB for .PNG and .JPG and Indexed for .GIF.

    At the completion of this tutorial, students will be able to:

    1. Understand why we optimize images.
    2. Change the five specifications with various software.

    The main purpose of optimizing images for online viewing is to reduce the time it takes a browser to display an image file in its correct size. Visitors to web sites do not want to wait for photos and other graphics to load; they want instant reading and viewing. Updating the dimensions of images to fit within the scroll area of a browser is also helpful because visitors want to view an entire image in one glance without scrolling around to see it. And they don’t want graphics to overlap other important information on the page.

    In addition, web site servers around the world would fill up too quickly if we all loaded large graphic files onto them because we were unskilled at reducing the file size. To keep from filling up our allotted server space, we will reduce the file size, dimensions, and resolution, and save in the proper format.

    Example files and their properties

    The three most common file formats for the web are .GIF, .PNG, and .JPG:


    Tools and Tutorials for optimizing images

    For any of these tutorials, have ready a digital file of your photo, art, or graphic.

    Debit cards no longer safe

    My debit card was declined at the grocery store today so I decided to check my account online. Voila! someone had withdrawn $500 3 times today! At an ATM machine that should only allow $200 withdraws. Yikes! That’s $1500.

    My bank says that someone is grabbing debit card numbers and pins electronically and making duplicate cards. Eeek! At least 4 other Washington Mutual customers had been hit this way today, according to the banker I talked with online.

    I will have to wait here until my new card comes in the mail. The bank will reimburse me the amount I lost once I sign some paperwork.

    I get annoyed when my card is declined because the bank won’t allow so many high cost transations in one day, but I’m appreciating it now–keeps the whole account from being drained.

    Sticky Situations

    I spy Maya in the California FBesides the numerous red lights I have run in San Fransisco and being towed from Yosemite to Fresno, there have been some interesting situations on this trip that you might enjoy reading about (and that I do not want to forget) (Maya would like to forget):

    Some Town near Pismo Beach.
    We were looking for Chinese food and pulled up to a curb. Neither one of us noticed the sign post so close to the curb. As I was pulling away (having decided there was no Chinese food here), the bike’s back wheel caught the sign post and began to yank the bike off the rack with a loud scraping noise. I finally stopped (it took awhile as my brain was dull from hunger), stopped traffic, and got out to investigate. The bike seemed unharmed, though we have not ridden it yet; hopefully the frame is not bent. I secured it and decided to pull out. Maya, in her brilliance (hunger or not) decided she should watch the back, so she stood on the curb to direct me. Because I get befuddled with the steering and directions, I locked myself in with the post. I really wanted to take a picture, but the hood was sticking out into traffic; no time for photo ops. The back of the rig was 2 inches from the post nestled beside the bike tire. I had to inch up and back many times to get free of the post. Up the road two blocks was a wonderful Chinese Buffet! No harm done.

    I-5, somewhere in LA
    I had forgotten to lock the compartment that holds the 30-amp electrical cord, so naturally, the constant jiggling from the worn out freeway shook the door open and the cable loose into thin air. I knew that within a matter of minutes the whole 50 feet of cable could be out gashing car windshields. I had to stop. So I did on a 9-ft-wide shoulder. The traffic was slowed to about 20 MPH so no worries! Of course Maya was petrified and I wasn’t (I had taken my happy pill and did not worry). She was not sure I would stay alive once I left our haven. The door on her side would just allow me out (I haven’t gained too much weight on the trip), so I squeezed out, over the railing, and to the back of the rig. All the drivers (you know who you are) would not stop to let me into the lane to lock the door, except one angel (an RV driver, of course). I cussed a great deal while fighting with the little-lock-that-is-almost-good-for-nothing, and managed to complete the task without causing a wreck, suicide, or infraction.

    Escondido, Wild Animal Park
    We had just 3 hours in the park, but managed to keep the car lights brightly lit the entire time! Funny how the motor won’t turn over, when you do that. So two sets of angels came by after closing time in the dark to jump the rig. The first one did the trick and we safely traveled to another place to stay for the night.