John Keston Classes » IM2420 Fundamentals of Scripting Languages

Syllabus and Meeting Times

admin — Mon, 30 Jun 2008 21:59:36 +0000

IM2420 Fundamemtals of Scripting Languages

Students develop and refine basic programming skills. Emphasis is placed on programming concepts including logic, problem solving, process flow and flowcharting, syntax and structures, and debugging and troubleshooting. Students will acquire skills needed to design, develop, and produce practical interactive applications. (Course Prerequisite: IM1480 Fundamentals of Interactive Design) Note: WDIM students must earn a C or better to pass this capstone course.

Instructor: John Keston

Meeting Times and Location Section (M/W):
Session 1 / Session 2
M/W 8am – 11am (with appropriate breaks), Room P305, Pence building

Syllabus: IM2420 Fundamentals of Scripting
Textbook: HTML, XHTML & CSS (6th edition) Visual Quickstart Guide by Elizabeth Castro

Week 1

admin — Wed, 09 Jul 2008 14:32:12 +0000

Session 1: Learn about and utilize basic HTML tags, including tables, in a web calendar of the current year. Our assignment for the week is to create a 12 month calendar for the current year. Each month must contain all the accurate days for the month arranged in a table structure of columns and rows. The requirements for this exercise are as follows:

1. Use a typeface other than the default.
2. Include some content besides day numbers (i.e. holidays, etc.).
3. Create borders without using the table border attribute.
4. Create navigation to get to every month from any month.
5. Use background images in some of the cells.
6. Use background colors to enhance your design.
7. Upload to the OLS or comparable hosting.
8. Place internet shortcut to your project on the dropoff drive under “John Keston:IM2420::Calendar URL”.

This assignment is due Week 3, Session 1. Here are some tag definitions and example tags to work from. Remember to use the resources linked below.

Basic Tags and Attributes Body Tag and Attributes: All page content goes here HTML Comment: Headings, etc:

Heading

Subheading

Centered Information

Paragraph

Bold Italic Underline (Can be mistaken for a link)
Line break Font Attributes Ordered Lists:

list items
list items

Unordered Lists:

list items
list items

Image Tag and Paths: Relative Link: click here to view contacts Internal Link or Anchor: Top of Page Click here to go to the top Absolute or Hard Link: click here Table Tags and Attributes:

info

Required Reading:
Reading from Textbook: Introduction and Chapter 1 (pages 13-42), Skim chapters 2,3,4 (pages 43-79)
Online reading: XHTML Tutorial

Resources:
HTML Cheat Sheet (an excellent html resource)
www.webmonkey.com (a comprehensive web development resource)

Session 2: Today we will be looking more carefully at tables to organize information in a grid, like a calendar. We will also cover some techniques on how to trick tables into being more flexible like using bgcolor and cellspacing to create a border, or using “colspan” within your table data cells to merge cells without days in the beginning and end of months (i.e. ). Try adding images and/or text for holidays or birthdays. Also, use “width” and “height” attributes to line up the calendar days. Here’s an example month:



Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday


 
1
2
3
4
5


5 7 8 9 10 11 12

13 14 15
16 17 18 19


20 21 22 23 24 25 26


27 28 29 30 31

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
	1	2	3	4	5
5	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Note: The use of HTML escape sequences such as allows you to place special characters into your HTML documents. Less than (“<") and greater than (">“) symbols would not be available without using an escape sequence. View the link below for a complete list of HTML escape sequences.

HTML Escape Sequences

Download: IM2420 Problem Set 1
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Week 2

admin — Thu, 10 Jul 2008 20:39:12 +0000

Session 1: Make sure that your link on the drop off drive is there and working properly. If we have time we may look at a few of your calendar projects during the lab. These are not required presentations.

Stylesheets (technically Cascading Stylesheets), or CSS allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. Sytlesheets are a critical tool for any web developer and make creating sites infinitely faster and easier, once you’ve learned how to use them.There are four ways to include styles in your HTML documents.

1. Local or Inline is right inside a tag and overrides other definitions. Example:

`This is an INLINE style`

This is an INLINE style

2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:

Style Demo Page 1

TEST

Hello World

I'm in a TD tag with no font tag

bold. underline within bold (no style)
italics

3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:



Untitled Document



TEST

and here’s what the stylesheet document (my_styles.css) looks like:

/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }

4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:

Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html

Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial (Getting Started)
W3Schools CSS Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors

Session 2: A good set of guidelines to follow for web development are the SCANMIC Usability Criteria. Read the the reading assignment linked below to gain a full understanding of the SCANMIC principals. Here’s a quick outline of each of the criteria:

1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you’ve been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text – font, font size and color).

Assignment: As a first project utilizing CSS let’s create single page with the layout, images and type all formatted with CSS. Write the content for your web page as a critique of a website that you consider a bad design. Create a one or two page web based evaluation of the website outlining how your example site does not adequately apply the usability points above. The site you evaluate must be accessible over the internet and shouldn’t be too high profile or contain inappropriate materials. Make sure you include links to the pages that you’re evaluating in your web document also include images to illustrate your points. Links to your evaluations will be due on the drop off drive by Session 1, Week 4.

SCANMIC Evaluation Project Requirements
1. Select a poorly designed “under the radar” website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use a linked or imported custom CSS document to format the type and images.
5. Link your evaluation on the drop off drive by Session 1, Week 4.

Student Example:
http://www.daneray.com/examples/scanmic/scanmic.html

Reading Assignment (PDF):
Identifying Web Usability Criteria

Download: IM2420 Problem Set 2
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Week 3

admin — Sun, 27 Jul 2008 19:47:49 +0000

Session 1: By the end of lab today your calendars are due. Today we will cover anchor links or “page jumps”, link targeting, and frames. Anchor links are used to jump to content within an HTML document. The most typical use is for navigating back to the top of a page where a lot of scrolling is required, or to sections within the content.

This is the top of the page
.
.
.
Go to the top of the page

Link targeting is most commonly used to open the content of a link in a new browser window or tab. This can be achieved by using the “target” attribute and setting the value to blank (i.e. External Link).

Targeting is also required to load content into specific frames. I do not recommend the use of frames, but it is still important to understand how they work. Jakob Neilsen, a prominent usability expert, cited “Using Frames” among the top ten mistakes in web design. However, there are rare instances of when frames (generally iframes are preferable) can help solve specific problems. This example shows how a basic frame set behaves.

Frame Attributes and Targeting:

Targeting Links:

    - Opens in a specific frame
  - Opens in a new window or tab
   - Opens within its own frame
    - Current browser window
 - Opens in its outer frameset

Session 2: Now we are going to take a closer look at CSS positioning. CSS can be used to format type, but also be used to position and style

layers or containers. Just like HTML tables, CSS positioning can be used to arrange content within the browser. CSS positioning also offers some advantages over the traditional table method; primarily that the content can be separated from the layout to provide better site maintenance and accessibility.

CSS vs Tables for Layout
CSS Zen Garden

For the next exercise the content has been provided in a word document. It includes some information about cycling collected from wikipedia. It’s your job to design a set of six pages using the text content provided. Create a consistent design scheme that incorporates images, navigation and type treatments using CSS styles and positioning. The use of tables for this exercise is not allowed. The requirements and a link to the content follows:

CSS Positioning Exercise
1. Organize the content provided into six pages
2. Create a consistent design scheme
3. Include navigation on each page to all the pages
4. Incorporate images into each page
5. Format type, images and the positioning of the content with CSS
6. Each piece of content (including images) should be contained in a

layer/container
7. Use of HTML tables is prohibited
8. Due before class on Session 2 of Week 5

Content for the CSS Positioning Exercise
Sample CSS Page Layouts – Step by step tutorial from Max Design
CSS Layout Techniques – Great tutorial on “no tables” layout
Student Example of CSS Positioning Exercise

Week 4

admin — Mon, 04 Aug 2008 02:29:15 +0000

Week 4 Reading:
Chapter 8 “Working with Stylesheet Files”
Chapter 17 “Forms”

Session 1: Today we will look at a variety of CSS layouts starting with a simple two column, fluid layout with a banner that spans both columns (see code example below). We will also examine 3 column layouts and static width layouts.




CSS Layout Example



Content for id "banner" Goes Here

  
  1. left_sidebar content

  2. left_sidebar content

  3. left_sidebar content

  4. left_sidebar content

  5. left_sidebar content

  6. left_sidebar content

  7. left_sidebar content
  
  
Praesent ut nulla. Sed tellus magna, tempor sit amet, pulvinar eu,
dignissim sit amet, purus. Phasellus ultrices massa sed metus. Nulla
scelerisque, metus a ultricies blandit, nisi arcu lacinia orci, et
posuere urna lacus bibendum turpis. Maecenas nibh nulla, cursus in,
pulvinar eu, dictum quis, neque. Curabitur ac purus a ipsum ultrices
consequat. Aliquam sed velit sit amet diam mattis aliquet.



Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Sed bibendum molestie tortor. Sed ut nunc.
Maecenas purus felis, scelerisque id, egestas ut, pretium et, nulla.
Nunc nisl arcu, vulputate et, feugiat non, luctus eu, justo. Quisque
rhoncus. Mauris dapibus orci non dui. Mauris lobortis. Aenean
gravida pede a justo.

Useful CSS navigation resource:
http://css.maxdesign.com.au/listamatic/

Technique to create tiled backgrounds:
How to Turn a Texture into a Seamlessly Tiled Background

Session 2: Today we will be covering the next assignment which involves creating an interactive XHTML form. There are several parts to this assignment that we will work on sequentially:

1. This week we will start by creating the form and layout using XHTML and CSS.
2. Next we will use some simple Javascript to help validate the input from the user.
3. Thirdly we will will use server side scripting to process the information and email it to ourselves.

Here’s a very basic tableless form formatted with CSS:




Form Demo




  First Name:
  
  

  Last Name:
  
  

  Email:

The following resource illustrates how forms can be put into horizontal, vertical, columnar, and other formats using CSS with fieldset, label, and legend tags:

http://www.themaninblue.com/experiment/InForm/
CSS-Based Forms: Modern Solutions

Week 5

admin — Sun, 10 Aug 2008 23:16:53 +0000

Session 1: Today we’ll be looking at a complete example of an XHTML form, similar to what is expected for the Interactive Form project. The form demo can be found here:

Form Demo

Once we have looked carefully at the form I will demonstrate how to use Javascript to pre-validate the input from the user. Javascript validation is a useful way to prevent users from leaving out required information from the form. However, server-side validation is also necessary in case Javascript has been disabled in the browser.

Reading:
Introduction to Javascript

Also, if you are looking for more ideas on form layout. Have a look at this list hosted on Smashing Magazine:

CSS-Based Forms: Modern Solutions

Session 2: Today we will start looking at the server-side scripting necessary in order to make our Interactive Form project handle the data entered by users. The language we will be using to do this is PHP. One of the best resources for PHP is php.net.

Interactive Form Project Requirements:
Create an interactive form designed to collect information from users, validate that required information has been entered, process the information, and send an email to yourself containing the user input. The form must be designed well using XHTML and CSS positioning. No table layout is acceptable.

1. The form must contain a minimum of ten input fields.
2. Use of text fields, check boxes, radio buttons, select lists, and text areas are required.
3. Design the form with XHTML and CSS (no table layouts).
4. Validate required fields with both Javascript and PHP.
5. Process the user input on the server side using PHP.
6. Automatically email the formatted data to your email address.
7. Due on Session 2, Week 7.

Week 6

admin — Mon, 18 Aug 2008 15:46:12 +0000

Session 1: Today we will start developing the PHP required to process the information collected in our forms. PHP (PHP Hypertext Pre-processor) is a server-side scripting language that has been designed specifically for web application development. Using PHP will we collect the data from the form, validated any required fields, compile the data into a message format, and email the results to ourselves.

In order to validate the information efficiently it is important to make sure that the form itself is a PHP document. PHP documents may be a combination of HTML, Javascript, CSS and PHP. In this case it is mostly XHTML, but take note of the PHP instructions dispersed throughout this example:


  Personal Information
  
  First Name*
  
  
  Last Name*
  
  
  Home Address*
  
  
  City*
  
  
  State*
  
  
  Postal Code*
  
  
  

  Email*
  
  
  Phone
  
  
  
  How often do you eat sushi?
  
  Raw fish? Gross!
  Once in a while
  Every payday
  Breakfast, lunch, AND dinner
  
  I have never tried...
  
  Spelunking
  Exotic Travel
  Scuba Diving
  
  Comments
  
  What's your morning routine?

  
  Send
  
  Click "Send" to post your information

Session 2: The next step in completing our form project involves creating the logic necessary to process the data entered into the form by the user. The code I’ll be demonstrating today will perform several tasks using PHP.

1. We’ll use a PHP include in the form to perform the tasks
2. The first tasks performed will be to validate the data entered into the form
3. The data will be processed to prevent harmful header injection attacks
4. An email will be sent containing all the processed data from the form entry
5. Adequate feedback will be provided for the user as a response message

Take a look at this function that we will be using to validate form input for email addresses:

	function is_valid_email($email) {
		$result = true;
		$pattern = '/^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\@([a-z0-9])' .
'(([a-z0-9-])*([a-z0-9]))+' . '(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i';
		if(!preg_match($pattern, $email)) {
			$result = false;
		}
		return $result;
	}

Week 7

admin — Mon, 25 Aug 2008 15:14:44 +0000

Session 1: Let’s finish working on our form projects today, so that we can move on to the next assignment that involves delving deeper into the possibilities of Javascript within web application design. We will be looking at several Javascript frameworks and then utilize JQuery to implement motion graphic elements into a web application. There are many advantages to using pre-existing Javascript frameworks, rather than writing new code from the ground up.

1. You are not reinventing the wheel
2. Browser compatibility in built into most frameworks
3. Large development and support communities surround the projects
4. Security exploits are quickly found and resolved by the developer community

Reading Assignment:
How jQuery Works
jQuery vs. MooTools

Sessione 2: Today we will be discussing the requirements for the next project as well as having a look at your form projects.

Javascript Framework Project:
In this project we will be using a Javascript framework called JQuery to add functionality beyond what is possible with XHTML and CSS alone. Due on session 2 of week 8.

1. Use JQuery to animate hidden content into view
2. Integrate JQuery animation techniques to text navigation
3. Apply one or more tutorials from http://docs.jquery.com/Tutorials under one of the following headings:
a) General Tutorials
b) Manipulation, Attributes, and CSS
c) Traversing and Selectors
d) Using jQuery with…

Week 8

admin — Wed, 03 Sep 2008 13:49:11 +0000

Session 1: Today I’ll be demonstrating how to enable a Javascript framework within an HTML document. We will also start looking at how to apply functionality that exists in the framework to our web applications, including content animation behaviors as shown here:

http://wayfarerweb.com/animate-example.php

Session 2: After discussing the final project requirements we will look at your JQuery exercises.

Final Project Requirements:
The final project we are producing for this class involves creating a web application with a minimum of six content areas. The site content must be formatted using XHTML and CSS. It is also required that the site use behaviors included in the JQuery Javascript framework.

Final Web Application Content:
1. Portfolio sites are not acceptable
2. Create something that might be suited for your portfolio
3. Sites for organizations or businesses work well
4. Informational sites are also acceptable (FAQ, etc.)

Final Web Application Requirements:
1. You must include a minimum of 6 content areas
2. All content must be formatted with XHTML and CSS
3. It is required that the JQuery Javascript framework is used for animations, etc.
4. Use JQuery to animate hidden content into view
5. Apply one or more tutorials from http://docs.jquery.com/Tutorials under one of the following headings:
a) General Tutorials
b) Manipulation, Attributes, and CSS
c) Traversing and Selectors
d) Using jQuery with…
e) Interface
6. You may use Flash if necessary, however, all Flash sites are unacceptable for this project

Final Web Application Evaluation:
1. All requirements must be met to achieve a passing grade on the final
2. The SCANMIC criteria will be used to evaluate the design and functionality

Week 9

admin — Wed, 03 Sep 2008 21:44:12 +0000

Session 1: Let’s continue examining JQuery behaviors and how we can apply them to our web applications. Also, here are the requirements for the mockup milestone which are due before class starts on Session 2 of Week 9.

Mockup Milestone:
Two mockups of one page design are required for in class critiques on Session 2, Week 9
1. Create a minimum of two mockups of a single page that contains a typical amount of content
2. No mockups of splash pages!
3. Try changing navigation, typefaces, layout, color schemes and/or logos
4. Acceptable formats include: jpg, gif, png, pdf, html
5. Presenting your mockups in class earns you 5% of the points for the final project
6. Place your mockups in a folder under your name on the drop off drive before class on session 2, week 9 (next session).

Session 2: Today we will be reviewing everyone’s mockups in class. This is a group participation project that will last most of the session due to the size of the class.

Week 10

admin — Wed, 17 Sep 2008 03:18:28 +0000

Session 1: Let try to continue to get a better understanding of how jQuery works and apply it to our finals. Also, we’ll be discussing how things are going on your final projects.

Session 2: Prior to presenting your milestone, most of the day will be focused on individually answering questions and help with troubleshooting.

Prototype Milestone
Today I would like to see a working prototype of your final project.

1. Include working navigation to a minimum of three pages
2. Demonstrate the use of CSS in your layout
3. Discuss how you intent to use Javascript behaviors in your site

Week 11

admin — Wed, 17 Sep 2008 15:17:09 +0000

Session 1: Today we’ll critique your final projects. These critiques are a required component for you final project, so don’t miss the class. If you have an emergency and can’t be in class, let me know as soon as possible. If we have anytime after the critiques we can continue reviewing for the final exam.

Session 2: Take final exam. No late work will be accepted after this date. I hope you all enjoyed this class. Thanks, and have a good break!

Examples from Class

admin — Fri, 25 Sep 2009 21:29:34 +0000

Here are archives of the examples shown in class that were stored on the WDIM drive during the course.

Summer 2011:
IM2420 Summer 2011 Examples