IM2420 Fundamentals of Scripting Languages

Students develop and refine basic programming skills. Emphasis is placed on programming concepts including logic, problem solving, process flow and flow-charting, syntax and structures, and debugging and troubleshooting. Students will acquire skills needed to design, develop, and produce practical interactive applications.

Syllabus and Meeting Times

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:
Session 1 / Session 2
M/W 11am – 2pm (with appropriate breaks), Room 342, LaSalle building

Syllabus: Please visit e-Companion to download the current syllabus

Textbook: HTML5 and CSS3 (7th edition) Visual Quickstart Guide by Elizabeth Castro

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

Week 1

Session 1: CSS (Cascading Style Sheets) 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. CSS is a critical tool for any web designer and makes 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: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>

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:

<html>
<head>
<title>Style Demo Page 1</title>
<style type="text/css">
<!--
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 }
-->
</style>
</head>
<body>
<h1>TEST</h1>
<p>Hello World</p>
<table>
<tr><td>I'm in a TD tag with no font tag</td></tr>
</table>
<b>bold. <u>underline</u> within bold (no style)</b><br />
<i>italics</i>
</body>
</html>

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:

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="/im2420/my_styles.css" type="text/css">
</head>
<body>
<h1>TEST</h1>
</body>
</html>

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:

<STYLE TYPE="text/css">
<!--
@import url(my_styles.css);
h1 { color: #FF00FF; font-family: impact }
textarea { text-transform: uppercase }
-->
</STYLE>

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: Today we will discuss the requirements for the UX Evaluation Project as well as begin demonstrations that relate to the project.

Assignment 1: “User Experience” (UX) Evaluation Project
Due: Session 2, Week 3 (15 points)

Description:
Create single page with the layout, images and type all formatted using HTML5 and CSS. Write the content for your web page as an evaluation of a website that you consider has poor UXD. Evaluate the website outlining how your example site does not adequately apply the UX criteria (SCANMIC) defined in the reading materials. 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. A zip file of your evaluation web page must be uploaded by session 2 of week 3.

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 an imported CSS document to format the type and images.
5. Upload your evaluation to your student webspace by session 2 of Week 3.

Student Example:
SCANMIC Student Example

Reading Assignment (PDF):
Identifying Web Usability Criteria

Points Breakdown:
2 points are awarded for coding headers, anchors, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for writing and presenting an informed critique of the chosen site

Week 2

Session 1: Today we will select students for the Google-Fu assignment. This participation assignment requires each student to research and comment about the content for a particular week of the class.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter one comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Following the discussion about the assignment we will discuss the purpose, syntax, and techniques of CSS. For some of you this topic might be review and for others it may feel advanced. Please be familiar the following:

CSS Tutorial at W3Schools

After our discussion we will continue the demonstrations for the UX Evaluation Project. Topics covered will include list-based navigation, page jumps, and floating images.

Session 2: Today I would like to begin discussing JavaScript. This language is the most widely use scripting language for front-end development on the web. It is used in almost every modern web application for both desktop and mobile platforms. Some of the task JavaScript is used for include: client-side scripting, form validation, UI enhancements, HTML5 canvas animations, servers side scripting (Node.js). During our demonstration today we will implement several examples of JavaScript including the animated scrolling technique seen below (source: learningjquery.com). This script relies on jQuery, so we will also cover the process of including jQuery in our environments.

Relevant Resources:
Official jQuery Site
W3Schools JavaScript Tutorial
Mozilla Developer Network JS Documentation

Week 3

Session 1: During studio time today I will be giving final feedback sessions for your UX Evaluation Projects. The feedback sessions will occur in groups determined at the beginning of class. Each group will meet to critique each others project and then report their critiques to me for final feedback. This is the last opportunity to get feedback before the project presentations during our next meeting. Please be prepared by having the following milestone completed before class begins.

UX Evaluation Study Milestone
1. Finalize the color scheme, layout, typesetting, navigation, and interactivity for your project
2. Include a minimum of four optimized images that illustrate your points
3. Have written content in place for a minimum of four of the specified criteria

Session 2: Today we will present the UX Evaluation Projects. Following the presentation we will review the requirements for the next project: the JavaScript Calculator Web Application. This project is intended as an introduction to the basics of JavaScript. As we move on to projects that will use the jQuery framework to enhance user experience it is important that you have a basic understanding of the language on its own.

Assignment 2: Simple JS Calculator Web Application (10 Points)
Due: Session 1, Week 5 (Beginning of Class)

Description:
Build a simple calculator using HTML, CSS, and JavaScript. At a minimum the calculator must be able to do addition, subtraction, multiplication, and division. Use html forms to create a text field for the numbers, buttons for the functions and operators (+,-,*,/), and buttons to calculate and clear the text field. Add more functions such as percent, modulus, square root, and/or exponents. This exercise will help create an understanding of variables, expressions, assignment operators, logical operators, and functions. Use the Mozilla JavaScript Reference to look up the Math object and other functions and syntax.

Requirements:
1. Use HTML, CSS, and JavaScript to build a Calculator
2. The tool must give the correct answer for an expression of two numbers
3. Addition, subtraction, multiplication, and division are required operators
4. Add additional functions such as percent, modulus, or exponents
5. Do NOT use the eval() function (here’s why not)
6. Use CSS to style the calculator and enhance the user interface
7. Upload your project to the student webspace by session 1 of Week 5

Point Breakdown:
5 points are awarded for properly functioning features within the calculator application
5 points are awarded for user experience design considerations and the look & feel of the app

Week 4

Session 1: Today we will begin demonstrations for the Simple JS Calculator Web Application assigned on week 3. During studio time you will be expected to prepare for the JS Calculator milestones described below under session 2.

Google's Calculator

Session 2: Today we will continue our discussion on JavaScript and demonstrate adding functionality to the JS Calculator Web Application. This will including looking at the JavaScript Math object.

Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method’s argument. Constants are defined with the full precision of real numbers in JavaScript. -MDN

During studio time please have the following milestones prepared for feedback.

Simple JS Calculator Web Application Milestones
1. Have your calculator UI constructed using HTML5 and CSS
2. A minimum of four JavaScript functions must be implemented
3. Several alternative functions must be in preparation

Week 5

CSS3 Transitions Navigation

Session 1: Please be prepared to present the JS Calculator Web Application following studio time today. During studio time we will work on resolving any bugs present in your calculator code and validating user input.

Session 2: Today we will cover the first of our three exercises: CSS3 Transitions. CSS3 transitions are time-based effects and animations that have the advantage of being applied using the familiar technique of CSS rather than using complicated JavaScript behaviours. CSS3 transitions and animations are supported in most modern browsers including IE 10 (older versions of IE are not supported), Chrome, Safari, Firefox, and Opera.

Exercise 1: CSS3 Transitions
Due: Session 2, Week 6 (5 points)

Description:
Create single page with page-jump navigation to a minimum of five examples of CSS3 transitions and animations. Write a brief explanation of each effect below each example. A zip file of the environment and the examples must be uploaded by session 2 of week 6.

Requirements:
1. Build a single page with a minimum of five content areas.
2. Each content area must contain an example of a CSS transitions or animation.
3. Each example must be distinct (i.e. do not repeat a color transition).
4. Upload to your student webspace before class on session 2 of Week 5.

Points Breakdown:
1 point awarded per distinct and functional transition or animation

Relevant Resources:
W3Schools CSS3 Transitions
MDN: Using CSS3 Transitions
CSS: Animation Using CSS Transforms

Week 6

Session 1: Today we will continue looking at CSS3 transitions. In addition we will discuss the requirements for the next exercise: jQuery Gallery. jQuery is a JavaScript library or framework that makes complicated tasks easier to create. It is often used to enhance the UX of web applications by providing advanced user interface tools including accordions, tooltips, easing, menu systems, ajax, and more.

More on CSS3 Transitions:
Transitions and Animations
Easing Functions Cheat Sheet

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open source software, licensed under the MIT License. -Wikipedia

Exercise 2: jQuery Gallery
Due: Session 2, Week 7 (5 points)

Description:
Use one of the many examples of jQuery images viewers to create a gallery of nine images. Build the application into a single page that includes a 3 x 3 grid of thumbnails used as interface items for exploring the gallery. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (images, JavaScript files, html files, etc.) must be uploaded by session 2 of week 7.

Requirements:
1. Build a single page with a 3 x 3 grid of thumbnail images.
2. Implement a jQuery image viewer so that each images enlarges on clicking the thumbnail.
3. Set up the images in a gallery so that navigation to the previous and next images is available.
4. Upload to your student webspace by session 2 of Week 7.

Points Breakdown:
3 points will be awarded for properly implementing a jQuery gallery plugin.
2 points will be awarded for creating an effective thumbnail interface.

Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins

Session 2: Today we will be presenting the CSS3 Transitions Exercise. Following the presentations we will continue demonstrating how to implement jQuery gallery plugins.

Week 7

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 Exercise:
In this exercise we will be using a Javascript framework called jQuery to add functionality beyond what is possible with XHTML/HTML5 and CSS alone. Due on session 2 of week 8. 10 points.

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

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 is suitable 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 pages or content areas
2. All content must be formatted with XHTML (or HTML5) and CSS
3. It is required that the JQuery Javascript framework is used for animations, etc.
4. Use JQuery as an integral part of the UX.
6. You may not use Flash. This is a web standards project.
7. Include a PHP contact form that prevents header injection attacks. Also, consider using CAPTCHA to prevent spam.

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

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

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

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!