Web Programming I
HSG5146A
Instructor: Andy Deck
Mondays 8:00 - 9:50pm, Room 1015
September 8, 2008 - December 15, 2008

Overview

This class is designed to introduce you to the basics of web programming. We will look at the basics of client-side and server-side programming, using JavaScript and PHP as examples.

This class will start with the basics of HTML coding, and how to use cascading style sheets, both for font style and layout. We will look at basic programming principles, such as types of variables, logical flow and functions. This programming knowledge will then be applied to making content that leverages code to achieve interactive or algorithmic results.

We're going to focus on the concepts of site architecture using templates to leverage dynamic content. This will combine the process of designing for templates with examples of coding and scripting used to make them practical. By the end of the class you should be able to build and maintain a site which uses HTML, CSS, JavaScript and PHP.

As this class takes place in an art curriculum, you are encouraged to apply web programming to artistic ends. With this in mind, we will be looking at sites that are creative and inspirational as we develop ideas for projects. Moreover, in-class demonstrations will explore abstract and whimsical ideas as well as addressing efficiency and pragmatic design.

This class will not make you an expert in any of these areas — rather it serves an introduction to the basic elements. It will also prepare you to continue with web programming, using databases, and building web applications to suit your needs.

Required Texts:
HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Sixth Edition
Elizabeth Castro
Publisher: Peachpit Press
ISBN: 0321430840

Teach-Yourself-PHP-in-10-Minutes
Chris Newman
Publisher: Sams
ISBN: 0672327627
ISBN-13: 978-0672327629

Book's WebSite:
www.cookwood.com

 

Additional WebSite:
eloquentjavascript.net

 

Class objectives:
  • practice and improve your skills in working with HTML, PHP, CSS, and SQL
  • learn how to combine two or more of these languages
  • explore creative applications of these languages
  • learn from other students and engage in critical discussions of work in progress

 

Grading:
Grading will be based on in-class participation, in-class presentations, a quiz and homework assignments. Specifically:

1st assignment - 2%
Quiz

2nd assignment - 10%
Collaborative 'supergood' website (see http://superbad.com and http://jimpunk.com for inspiration). This project will encompass the first two weeks of class. Students will share ideas about how to approach animating the given images, including some of the problems encountered. Due September 29th.
Link to information
Vanessa links to:Jungyeob Kim
Jungyeob links to:Christopher Antonucci
Christopher links to:Rita Mendes
Rita links to:Valerie Guinn
Valerie links to:An-Ni Wang
An-Ni links to:Jenny Lin
Jenny links to:Thanawadeee Chagasik
Thanawadee links to:Eunha Choi
Eunha links to:SooAh Kwon
SooAh links to:Christine Tadler
Christine links to:Adel Kerpely
Adel links to:Margarita Anna Singson
Margarita links to:YiBing Jiang
YiBing links to:Noori Kim
Noori links to:Ganesan Rajiv
Rajiv links to:Ksenia Odinokova
Ksenia links to:Tigi Kuttamperoor
Tigi links to:DohYung Ban
Dohyung links to:Vanessa Rees


3rd assignment - 10%
One short presentation to be given about EITHER A) a website you like or B) a tutorial that you found useful relating to website development. Please plan to discuss particular aspects of the sites that appealed to you. You will be expected to give a one page handout to students regarding your site that reflects your research. It is recommended that you discuss a programming topic that is explained or exemplified in the site you have chosen. This assignment will be due according to a schedule to be established in class.

4th assignment - 25%
Interactive information visualization using the Canvas object and JavaScript or PHP and the GD library of graphics functions. For inspiration please see the following projects: Due October 20th.

5th assignment - 25%
Template based web site using txtsql and PHP that lets you re-use a fixed CSS and HTML template structure while plugging into it a series of different types of content. Due November 10th.

6th assignment - 25%
Final project. You will present this to the class in the final class session. This presentation will be a critique, so the work should be aesthetically developed (concept, design decisions, etc.) and not simply a technical exercise. Due December 16th.

 

Your Responsibilities:
  • Completing all homework assignments —both readings and programming assignments.
  • Maintaining a website with links to all your assignments
  • Alerting me if you feel you don't understand a concept, or you feel lost in the class.

 

In-Class Presentation (choose one or the other):
  1. An website you think is interesting and that you feel makes good use of the web & programming
  2. A tutorial on the topic related to the class that you've found on the web

Interesting Website: The goal is to share a site that you think is particularly interesting. The site can be artistic or commercial. The presentation should take the user through the site, and you should explain why it interests you.

Good Tutorial: The goal is to share a tutorial you found on the web that was particularly helpful to you. The topic of the tutorial should be what we are covering in class. The presentation should take the user through the site, and what you found useful.

The presentations should be short, roughly 5 minutes. Here are the dates for your presentations.

Presentation Schedule

DateGood Tutorial or Interesting Website
9/22Jungyeob KimVanessa Rees
9/29Valerie GuinnChristopher Antonucci
10/6An-Ni WangJenny Lin
10/13Thanawadee ChagasikEunha Choi
10/20Tigi KuttamperoorAdel Kerpely
10/27SooAh KwonChristine Tadler
11/4Ganesan RajivKsenia Odinokova
11/11Noori KimYibing Jiang
11/18Margarita Anna SingsonDohyung Ban

Weekly topics

9/8/2008 HTML basics introduction and overview

Topics: URL, relative vs. absolute URLs, sFTP, file uploading, tags, basic HTML structure, tags that contain and tags that appear independently, markup language, HTML, HTTP, Apache, index pages, file suffix conventions, working processes.

Homework: read Introduction and chapter 1 of HTML&CSS.
Download and install an SFTP program and a plain text editor that highlights code syntax for HTML and PHP. Suggestions for Mac: Fugu or Transmit, Text Wrangler; for Windows: WinSCP, Crimson Editor. Download Firefox, Mozilla, or Opera.

9/15/2008 More HTML basics, images

Topics: tables, dividing the page, anchor tags for navigation within a document, validation techniques, problem solving, image formats, coding images, using attributes to customize the behavior of tags. Additional topics: Graphics issues, simple animations.

Homework: read chapters 2 and 3 of HTML&CSS
Upload an index.html page to your account (inside public_html folder) so you can begin to control your website's appearance.

9/22/2008 Style attributes, modifying elements, CSS concepts

Topics: style sheets, different ways to apply styles, syntax for style definitions, using style sheets to control layout, separation of content and layout code

Homework: read chapters 4 and 19 of HTML&CSS. Organize your public_html documents. Make a folder for images inside public_html. Also, make another folder called project1 to contain documents of the first assignment.

Class notes

9/29/2008 Alternative layout techniques, objects and events

Topics: layout language versus scripting language, origins of Javascript, variables, using reference material, debugging Javascript, DOM inspector
Supergood Assignment Due
  • Browse superbad.com and jimpunk.com
  • Use HTML, images (animated GIF files?), roll-over events, and other basic HTML layout techniques to produce a page that has similar graphical qualities
  • Link to the next person in the chain so that a visitor can browse consistently through the series of 'superbad' style pages.
Goals
  • Leverage your talents as visual artists
  • Experiment with HTML
  • Learn about layout and linking
  • Amuse each other

Homework: read chapters 5 and 20 of HTML&CSS

10/6/2008 Javascript and PHP intro

Homework: read chapters 6 and 7 of HTML&CSS — read 6 well!

10/13/2008 Forms and related interface objects

Topics: HTML form widgets and rudimentary Javascript graphics techniques debugging techniques, form action handling.

Homework: read chapters 8, 9, and 10 of HTML&CSS

10/20/2008 Client-server interaction and server side scripting

Visualization assignment due Some class time will be devoted primarily to presentations of student work on the visualization assignment. Students are expected to evaluate each other's work.

Some Resources

See also ClassSpace/AndyDeck/webProg1 folder!

Goals

  • Experiment with using a procedural language (Javascript, PHP) to produce images
  • Learn to integrate HTML and Javascript to handle interactive (mouse-driven) events
  • Practice using technically complex means while at the same time producing a work that involves ideas
Introduction to HTTP methods, encoding, and basic server side scripting. Designing a simple form submission. Dumping data to a file on the server using PHP.

Homework: read chapters 11, 12, and 13 of HTML&CSS

10/27/2008 Templates

Topics: Using URLs to configure script actions. Designing templates and using document id numbers to identify content. Information architecture.

Homework: read Teach Yourself PHP in 10 Minutes

11/3/2008 Javascript vs. PHP

Topics: When to use each, what are the differences. Syntax, variables, arrays and programming basics. Comparison and contrast between the two scripting languages.

Homework: read chapters 14 and 15 in HTML&CSS

11/10/2008 PHP applications

Template Assignment Due
  • Make a template-oriented page with PHP such that:
    • URL parameters can be passed to the script that change the appearance of content in the page (?param1=XX¶m2=YY etc.)
    • Style (CSS) characteristics are given to the template using an external style sheet
Goals
  • Learning how to use PHP with templates
  • Understanding the URL parameter mechanism
  • Implementing re-usable style and structure techniques
Topics: PHP file operations. PHP techniques for data handling.

Homework: read chapter 16 in HTML&CSS

11/17/2008 Database fundamentals

Additional topics: MySQL basics. Designing tables. Accessing databases via PHP.

Homework: read chapter 17 in HTML&CSS

11/24/2008 PHP, CSS, HTML, Javascript integration

Topics: Data organization strategies. File-based storage using an improvised format. Guestbook example.

Homework: read chapter 18 in HTML&CSS

12/01/2008 Embedding rich media and plugins

Topics: Flash movies, Quicktime, and streaming.

12/8/2008 Ajax

Using Ajax to communicate between your web page and server side scripts.

12/16/2008 Class presentations of final project

Seven minute presentations given to the class.