CSE 190 M: Web Programming, Spring 2012

Session 9

Online game (CATS Online) powered by node.js and html5 canvas. By Shiny and Mason.

Links

index.html Play online! (works best in chrome)

Files:

• Slides


• Client side game script
• Server side node.js script
• Client side game client
• Client side online script

Session 8

Alex gave a demonstration on how to create a simple game using HTML5 canvas and JavaScript.

Files:

• index.html : The HTML for the game. Click to play in your browser!
• game.js
• game.css
• game.zip : A zip of all the files from the game (includes images).

Helpful Links

• Mozilla's guide to drawing with HTML5 canvas
• Another useful tutorial for using canvas

Session 7

Today Roy talked about some specific issues that make IE frustrating for developers and how to develop in a way that looks good in IE as well.

Files:

• slides.pdf : The pdf contains links to many html pages that demonstrate the bugs and fixes.

Session 6

Today Roy talked about jQuery, a popular alternative to Prototype. We worked through some examples that illustrate jQuery's power.

Files:

• slides
• fractal1.html
• fractal2.html
• fractal3.html

Session 5

Today Alex showed some neat JavaScript libraries. Marty also showed how JavaScript handles scope and how to avoid declaring any global variables or functions.

Libraries

• jQuery (necessary for some of the libraries below)
• Google Web Fonts
• reflection.js
• Lightbox
• Scrollorama
• three.js

Files:

• Marty's slides - JS scope/closures
• Alex's code with libraries included

Session 4

Today Shiny showed how to set up MySQL on UW's "virgil" server and how to use SQL and PHP to create a little message board in the style of 4chan.

Files:

• Shiny's slides (PDF)
• Linux shell scripts for enabling MySQL on virgil.uw.edu
• runnable app
• source code for app

Session 3

Today Roy and Alex talked about HTML5 forms and client-side validation.

Files:

• Source Code: recipe_crappy.phps and recipe-awesome.phps , recipe.css
• Runnable Version: recipe_crappy.php and recipe-awesome.php

Session 2

Today Mason Remy presented about how to make a web site that displays better on a smart phone; and Tanner talked about how to create an HTML image map, where one image contains many links to different pages.

Files:

• page.html and style.css (mobile-friendly 190M course web page, by Mason)
• anatomy.html (Barack Obama image map, by Tanner)
• marauder.html (Marauder's Map)

• Mason's Slides (Designing Sites for Smart Phones) ( PDF)
• Tanner's Slides (HTML image maps)

Files:

• page.html and style.css (mobile-friendly 190M course web page, by Mason)
• anatomy.html (Barack Obama image map, by Tanner)
• marauder.html (Marauder's Map)

Session 1

Today Alex talked about the new HTML5 audio and video tags, and how to embed your own fonts in a web page using CSS3; Shiny also talked about how to use CSS3 to produce 3-D transformations and animation effects.

• Alex's Notes (Embedding Audio, Video, Fonts)
• Shiny's Slides (CSS Transformations and Animations)

Files:

• pres.html (inclass example)
• test.html
• ref.html