Revolutionary Technology

Every once-in-a-while an amazing piece of technology appears. The Sixth Sense is definitely one of these items. Check out the link to the video where Pattie Maes demos the work of Pranav Mistry.

The Sixth Sense uses the information of the Internet along with a camera and portable display projector to truly put information at the user’s fingertips. Look-out iPhone!

Tables & Frames - Part 1

Both tables and frames provide the ability to organize not only information on your Web pages, they can also be used to layout your entire Web page. Today we’ll look at a few of the basic HTML tags necessary to create tables.

To begin a table, we use the <table> tag. This tells the browser that we are starting a table. When the table is finished, we close the tag like so, </table>. Read more

Forms - Lists & Menus

Lists are scrollable boxes from which a user can choose multiple items. This can be useful when there’s a long list of choices and you want to save space on your Web page. Using checkboxes for a large number of items is not very user friendly. Using a list allows you to contain the items within a small box and still give the user full access to all of the choices through a scroll bar. You can also choose to have any one of the items in your list as the selected item when a form is loaded into the user’s browser. To do this, add the the selected attribute to the option you want selected.

< select name=”cars” size=”4″>
<option value=”audi”>Audi</option>
<option value=”dodge”>Dodge</option>
<option value=”toyota” selected>Toyota</option>
<option value=”vw”>Volkswagen</option>
</select>

A menu or a drop-down menu, is a drop-down box from which a user can choose only one item. When an item from a drop-down box is selected, the box disappears while displaying your selection. Read more

Form Elements - Part 1

A form is made up of many individual elements, including areas in which to key text and buttons to trigger the form submission. In this post we will examine basic text boxes, radio buttons, and check boxes.

The text box form element is a box into which a user can key text. Text boxes are good for accepting data when a user must enter a value such as a name or address. To create a text box, as well as many of the other form elements, you will use the <input> tag. For a textbox, you will need to supply values for the type and name attributes. The type attribute should be set to text and the value supplied for the name attribute should be descriptive, without spaces.

<input type=”text” name=”lastName”>

Radio buttons are a form element that allows a user to choose an option from a series of choices. The user’s choice is mutually exclusive, meaning that only one item may be selected from the choices presented. As with text boxes, radio buttons are created with the <input> tag. The value of the type attribute is set to radio. The value of the value attribute, should match the option available to select (Nov, Dec, etc). Finally, the name attribute is EXTREMELY important. The value of the name attribute should be descriptive with no spaces. All selections that belong to the same group MUST have the same name.

<input type=”radio” name=”birthMonth” value=”dec”>

Check boxes are similar to radio buttons in that they provide a set of predefined choicesrom which the user may select. Unlike a radio button, with check boxes the user may select more than one option.  The type attribute is set to checkbox and the value attribute should match the option available to select. As with radio buttons, all check boxes that belong to the same group MUST have the same name attribute.

<input type=”checkbox” name=”musicGenre” value=”punk”>

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Identify the different kinds of text boxes
• Explain the uses of radio buttons and checkboxes
• Place text boxes, radio buttons, and checkboxes in a Web page.

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• The <form> tag has several attributes, among them the method attribute. Explain the options that the get and post values provide for the method attribute.
• Can more than one form be placed on a Web page? Can a <form> tag be nested inside another form tag?

Forms - Form Tag & Attributes

Forms are used to collect information over the Internet from a user. Forms are essential for communication between the user and the Webmaster. They can be utilized for many purposes. Some forms may be used for logging-in to a website while others may be significantly more complex allowing the user to shop or send Web mail.

In the following posts, we will look at the common form elements, their purpose, how to organize forms, and provide an opportunity to practice building simple, as well as more complex forms.

Let’s start with the first tag necessary to create a form, the form tag (<form></form>). All elements of a form must be placed in-between the opening and closing form tag. If a form element is not between these tags, it will not function as a part of the form.  Although a Web page may have more than one form tag on it, it is not recommended. Even though multiple forms may exist on a page, they must not be nested (one inside the other).

The form tag has three attributes that are important to understand. The first being the name or id, the second the  method attribute, and finally the action attribute.

The name or id attribute is used to identify one form from another. The value used should be descriptive of the forum and its purpose. It should NOT contain a space or reserved characters.

The second attribute that is rather important is the method attribute. The method attribute specifies the manner in which the form data is sent. There are two possible values the the method attribute can use: get and post. Get appends the form data to the URL of the page to which the data is sent. This is a severe privacy issue if telephone numbers, social security numbers, or other sensitive data is part of the form.

Post on the other hand, does not append the form information to the URL. Data is sent behind the scenes along with a request for the new Web page. Since the data is not visible in the URL, post is more secure than with the previously mentioned get method. In addition, post allow a larger amount of text to be sent to the corresponding action page than the get method.

The final attribute of significance, is the action attribute. This attribute specifies the action that will take place when the submit button is pressed. A form may accept user data, it cannot work alone. It needs a another file that will accept the data and process it in some way. The easiest way to process the data from a form is by giving an email address as the data’s destination (mailto:farmer@dairy.com). While this is easy, it is not practical for large amounts of data. Not to mention, their is no way to rapidly sort the data. This requires a database. The more practical solution is to select a Web page that is a .php or .asp script file.These programming languages can process the form data and properly insert it in a database.

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Understand what a form can be used for
• List and explain the purpose of the name, method, & action attributes (for the form tag)
• Place a form into a Web page

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• A tool that accepts user data from a Web page.
• A text box designed to gather short bits of information.

Interactivity - Quiz

In wrapping-up our look at basic interactive components. Here are a few reminders:

• Organize your site. This begins with your navigation. Decide what qualifies as top-navigation and what will be sub-navigation.
• While simple hyperlinks work, spruce up your navigation with rollovers (make sure to preload the images).
• If you use audio, really try to use a compressed format (i.e. .mp3). Please don’t use MIDI sounds!
• Consider using Flash buttons or animations to add to your page (while 99% of browsers have the Flash player, think about your audience).
• If you will be using an item multiple times, consider turning it into a Library item.

Today’s Objectives:

• Insert a multimedia object into a Web page
• Construct a rollover navigation bar
• Demonstrate mastery of lesson 5 objectives

Classwork: Create a Web page with a rollover navigation bar and an embedded MIDI file that plays automatically on load. Take the lesson 5 quiz.

Prep Questions:

• See quiz.

Note: Well done on the quiz average score was 16/20 or 80%!

Interactivity - Flash Buttons

Adobe’s Flash is a powerful multimedia application that uses vector graphics to create highly compressed multimedia for the Web. Flash files can be placed into a Web page. They can consist of animated text, animated characters, sound interactive buttons, and much more. At this stage in the game, your imagination is the only limit. The extension for a Flash file is .swf, which stands for Shockwave/Flash. Because Adobe owns Dreamweaver and Flash, they integrate very well with each other. This helps make the creation of interactive Websites much easier.

Since Dreamweaver 4, users have had the ability to create Flash buttons and Flash text. Today, we’ll look at the benefits of using Flash buttons. When a traditional rollover effect is created, the author must construct individual images of each state (up, over, down, etc.). This can get rather tedious. In comparison, when creating a Flash button, pre-made buttons are shown with the option to download additional styles. This speeds up the process significantly. All the author needs to do is select a style, type the button text, select the font, where the button object is to be saved, the link URL, and background color. Voila! Instant Flash animated button. This usually takes less than a minute.

If you do add a Flash button to your Web page, keep in mind that user must have a Flash plug-in in order to view it. Most browsers include the Flash plug-in and it is safe to assume, in most cases, that people have the Flash plug-in. However, if they have an older plug-in they may be prompted to update and this can be annoying. Think of your audience (as always) before using Flash buttons.

Today’s Objectives:

• Create a Flash button
• Insert and format Flash files
• Create simple Flash objects in Dreamweaver

Classwork: Construct a navigation bar with rollover effects and embed a sound file (Lesson 5 - Assignment 2).

Prep Questions:

• Name the extension for a library item.
• T/F You should preload the images for a rollover.
• Define interactive.

Here are some links to help you with creating Flash buttons in Dreamweaver:

• Web Templates Zone
• Prime Graphix
• Adobe Flash Player Stats

Note: Lesson 5 quiz is tomorrow, Wednesday the 28th.

Interactivity - Navigation

Frustrated users are not a recipe for success. One of the more overlooked aspects of Web site design is site navigation. Either poorly labeled categories or icons that are not readily identifiable often lead to user confusion. Just as important is the clear presentation of areas or categories of the Web site. Too often categories are not well thought out, overlap, or are repetitive. This can result in long lists of links and user frustration.

To aid in accomplishing clear navigation, here are some tips:

• Before beginning coding, draw an navigational hierarchy for the Web site. How do the pages link? To what category will they belong?
• Too create strong categories, look at the purpose of your Web site, ask friends/potential users to explain what they are looking for. Use this to construct your categories.
• Keep the number of categories to a minimum. Remember quality is more important than quantity. These will be your top-navigation and will appear on every page.
• Clearly name your categories.
• Look at your categories and break them into sub-categories. These will be your sub-navigation. These links will only appear on pages belonging to their top-navigation.
• Keep placement of navigation consistent (up high but below the banner).
• Add a Home link.

Today’s Objectives:

• Differentiate between top-navigation and sub-navigation
• Create a Flash button

Classwork: Construct pages to link with navigation and build a Flash button (Lesson 5 - Assignment 1).

Prep Questions:

• Define rollover.
• Explain top and sub-navigation.
• Can one generally assume that the Flash player plug-in is installed on most browsers?

Here are some links to help you with creating effective navigation:

• Design Effective Navigation in 10 Steps: http://www.sitepoint.com/article/navigation-10-steps/
• Navigation and Symbolism: http://www.wpdfd.com/issues/24/navigation/
• 25 Examples of Creative Navigation: http://vandelaydesign.com/blog/galleries/creative-navigation/
  

Note: Lesson 5 quiz is Wednesday the 28th.

Creating User Interactivity

A rollover, or image swap, occurs when the mouse pointer triggers the existing image to be swapped with another image. This creates a simple animation effect. The purpose of a rollover is to notify the user that this object is a live link and is interactive.

Quick tips for creating rollovers:

• requires two images
• should be the same dimensions
• visually distinct

Dreamweaver automates the procedure and writes the JavaScript necessary to perform the function. All the user must do is specify the original and rollover images.

Today’s Objectives:

• Explain the function of a rollover 
• Create a rollover effect
• Differentiate between top-navigation and sub-navigation

Classwork: Complete Lesson 5 vocabulary and construct a simple rollover.

Prep Questions:

• This language is necessary to perform rollovers.
• Define the term MIDI.
• What type of file is a .wav?

Wrapping-up Templates

Some confusion inevitably arises regarding the use of templates. One of the most common is how to edit areas that are locked by a template. The proper way to edit these areas is to open the template in Dreamweaver and make the necessary edits. This will insure that documents designed from the template will display the updates as well. In a pinch, you can overide the HTML comments that Dreamweaver uses to mark editable areas by using another editor such as notepad. Realize that doing this will negate the benefits of being linked to a template, but works if necessary.

The second item that commonly causes confusion, is that a template is a barebones structure. It contains the minimal material that is applicable to every page. Users, new to templates, tend to want to populate the template with images, text, or other items that will not be on each page of the Web site. Remember, only place items in a template that apply to each page (i.e. banner, navigation, footer, etc.).

Today’s Objectives:

• Construct a simple Web site plan (mission statement, target audience, topics & features, organizational diagram)
• Incorporate the Web site plan features into an HTML template

Classwork: Lesson 4 quiz & finishing the critical thinking project.

Prep Questions:

• This panel organizes media, links, colors, etc.
• List the extension for a Dreamweaver template.

Note: Great job on the quiz! The average score was 85%.

Next Page »