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: As we approach mid-term it is important to keep sight on the overall goals and outcomes expected for the class. The following is a list of the upcoming exercises and projects for the rest of the semester:

Exercise 3: jQuery UI (5 points)
Assignment 3: Interactive Form (15 points)
Assignment 4: Final Template (10 points)
Final Web Application (25 points)

The final template is a component of the Final Web Application. In addition you will be required to write a final project proposal and get approval for your proposal from me before starting on your template. The proposal will include a project summary, a feature list, screen schematics, mockups, and a bid (estimated hours broken out into design, content, development, and implementation).

Exercise 3: jQuery UI
Due: Session 2, Week 8 (5 points)

Description:
Implement a minimum of five examples of jQuery UI behaviors. Build the application into a single page that includes each example in a different area of the page. 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 (JavaScript files, css files, html files, etc.) must be uploaded by session 2 of week 8.

Requirements:
1. Implement five or more examples of jQuery UI behaviors.
2. Examples may include show, toggle, accordion, datepicker, slider, menu, and progressbar.
3. Set up the examples to work with or with internet access on a single html page.
4. Upload a zip of your gallery application to the D2L by session 2 of Week 7.

Points Breakdown:
4 points will be awarded for properly implementing five jQuery UI behaviors.
1 points will be awarded for implementing the examples on an html page.

Relevant Resources:
jQuery
jQuery UI

Session 2: Today we will look at your jQuery Gallery exercises. Following the presentations we will continue demonstrations for the jQuery UI exercise.

Week 8

Session 1: Today we will discuss the requirements for the HTML5 Interactive Form project. This project is due session 1 of week 11. We will begin by looking at the markup and css necessary to create the form interface. HTML5 provides several new and useful features for form interaction. However, these features are not supported by all current browsers. Therefore fallback validation is required for the client side and server side of the application. In order to learn the server side scripting necessary, we will install MAMP on your Macbooks. Alternatively, if you have shared hosting available your interactive form can be implemented on a web server.

Form Demo

Assignment 3: HTML5 Interactive Form (15 Points)
Due: Session 1, Week 11 (Beginning of Class)

Description:
Using HTML5, CSS, Javascript, and PHP build an interactive form designed to collect information, validate user input, process form data, and email the results. Your form must include all of the following interface items: text fields, a text area, select lists, checkboxes, radio buttons, and a submit button. Use HTML5 validation, with Javascript and PHP fall-back. UX considerations such as placeholder text, feedback messages, adequate documentation, and input focus are also required. Finally, include a method to prevent bots from hijacking the form (reCAPTCHA). These techniques will be demonstrated during class.

Requirements:
1. Use HTML5, CSS, JavaScript, and PHP to build an interactive form
2. Your form must collect information and send it via email using PHP
3. The form must validate the user input using HTML5, Javascript, and PHP
4. Input methods must include: text fields, textarea, checkboxes, radio buttons, select lists, submit button
5. Use placeholder text, feedback, documentation, and input focus to improve the UX
6. Implement methods to prevent bots from hijacking the form
7. Upload a zip file of and shortcut to your project to the dropoff drive by session 1 of Week 11

Points Breakdown:
5 points are awarded for the look, feel, and design of the form (HTML5 and CSS)
5 points are awarded for handling the validation of the user input (HTML5, JS, PHP)
5 points are awarded for sending the data via email and preventing exploits (PHP)

Relevant Links:
HTML5 Forms: The Markup
Dive Into HTML5 » Forms

Session 2: Today the jQuery UI exercise is due. Please be prepared to share what you developed with the class. After the presentations we will continue the demonstrations for the HTML5 Interactive Form project.

Week 9

Session 1: Now that we have examined HTML5 form validation as well as JavaScript client side form validation it is time to implement the PHP necessary to make the form function as expected. This requires setting up a development server on your computers or using shared hosting. To do this we will use MAMP.

Screen Shot 2014-10-26 at 1.35.05 PM

Session 2: Today we will continue the interactive form demos.

Week 10

reCAPTCHA Promo Screen Grab

Session 1: Today I’ll be demonstrating the optional features of the Interactive Form Project. These include:

1. Hosting the project on a live production server accessible via a public domain and url.
2. Using the reCAPTCHA API to prevent non-human interactions.
3. Fine tuning the layout, design, and functionality of your form.

reCAPTCHA is a free service to protect your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease. reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.

Relevant links:
Fun with HTML5 Forms
85 amazing HTML5 examples

Session 2: We will be have feedback and critiques on your Interactive Form projects today. Please be prepared to demonstrate your form in group critiques.

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!