CS 240 Lab 3: Web Development

Due Mon Sep 23 at the start of class

Overview

In the last and biggest lab, you will get started learning some of the basics of front-end web development: namely HTML, CSS, and JavaScript.

For this lab, the class will be developing a simple online "art museum." Each student will make a single "exhibit": a webpage showcasing a small collection of artwork (text, images, video, etc). Of course, what counts as "art" is highly subjective--as a curator, you have full discretion over what you include in your webpage. You can include your favorite renaissance artists, your favorite amphibians named for renaissance artists, or make a tribute to LOLcats if you wish. Nevertheless, each exhibit must meet a number of requirements:

Your webpage must include both images and text. Embedded video or audio is an optional addition.
Your webpage must include at least 3 hyperlinks, at least one of which must be to another student's exhibit.
Your webpage must include an HTML5 canvas with a piece of "original art" drawn on it (see below for details).
Your webpage must use an external CSS file to format its appearance.

Note that there are a lot of pieces to this assignment---and all of them will be new if you haven't done web development before! Get started early, and be ready to ask for help if you get stuck!

You are welcome to work on this assignment either individually or in pairs using collocated pair programming. Do not simply divide the work in half--you are responsible for know how to do each part of the assignment!

Objectives

Learn the basics of creating web pages with HTML, CSS, and JavaScript
Learn about some helpful JavaScript libraries
Practice learning new systems from online tutorials
Continue practicing with git

Resources

Note that web development is one of the most common "self-taught" topics in computer science. There are many, many tutorials online, focusing on all kinds of aspects of web development. Below are some resources I've found, but a quick Google search will bring up many more. If you find one that is particularly good (or find a problem with one of the references here), please let me know and I'll add it to the list!

HTML/CSS Guides
w3schools A collection of tutorials and documentation for all kinds of web development, including HTML, CSS, JavaScript, and more. This is a greatplace to start learning to create web sites!
JavaScript Guides
Mozilla JavaScript Guide An in-depth JavaScript tutorial created by Mozilla (the group that makes the Firefox browser)
Re-introduction to JavaScript A more concise summary of the JavaScript language, if you just need a refresher
Eloquent JavaScript One of many free textbooks for learning JavaScript
HTML5
The w3schools HTML5 guide
And another HTML5 canvas tutorial (linked from KinectJS).
JavaScript Libraries
jQuery A JavaScript library that makes JavaScript programming pleasant--basically a set of helper functions and shortcuts to common behaviors. See also the documentation for details, as well as the getting started tutorial for learning both JavaScript and jQuery.
KineticJS A JavaScript library to help with animation and effects on an HTML5 canvas
RaphaelJS A JavaScript library for doing vector graphics and animations
EaselJS Another JavaScript library for working with the HTML5 canvas
three.js A JavScript library for doing 3D graphics. This is a very advanced library.
There are many other available, 3rd-party libraries to help with doing work in JavaScript. Google what you're working on and you might find a solution you can use!
Development Environments
Sublime Text A light-weight text-editor for programming. This is my recommended system for web development. Google for various plugins that can help with programming (e.g., for code completion, etc.).
WebStorm A full-featured JavaScript IDE. It's a bit heavy for my tastes, but you are welcome to try it. We have a school license; see me if you are interested (and let me know what you think!)
You can also use Eclipse for web development; see e.g., here.

Finally, it's worth noting that there are lots of examples of HTML on the Internet--in fact, the entire Internet is HTML! Most browsers will let you view source of a webpage--for example, try viewing the source of this webpage to see an example!

Details

There are lots of ways to proceed with this assignment; my suggested process (as well as details for some components) are below.

Your first step should be to get your development environment up and running. Download Sublime Text or set up an alternative IDE. A simple text editor will do.
- You'll also want to get your project under version control. Clone a copy of the Lab 3 repository so that your exhibit can be within the same project as other students
- Organization and Etiquette: Remember that every student is going to have an exhibit, so it would be polite to make sure that none of your files conflict with what other people may want to do. Name your exhibit after your user name (i.e., jross.html). You can put images and such in the communal assets folder, though if you have a lot you may wish to make a subfolder just for your exhibit. Try to give asset files descriptive names: img123.jpg doesn't help anyone!
Once you've got the version control all set up, start making your basic website! Begin with the basic framework (html, head, and body tags), and then getting the words "hello world" to show up. You can test your web page by opening it up in your favorite browser---just double-click the file (since it won't have a URL). Once you've got that working, you can add in the simple content (text, images, links, etc).
- Think about the layout of your website--how do you want it to look, where do you want things to go? div tags are a good way to divide the page into sections.
- You are welcome to use more than one webpage to structure your exhibit (with appropriate links between the pages!)
- Make sure your name is on your webpage somewhere!
Add in some CSS to format your content and make it look nice. Remember, you should use an external style sheet (which you can place in the stylesheets folder and reference using a link tag). You can also include some inline CSS, but it is not recommended.
- My favorite explanation is that HTML is about the content of a webpage, and the CSS is about the appearance of a webpage. The HTML is like the walls of the house, and CSS is like the wallpaper. Your page should be readable even without the CSS; the CSS just makes it look good. Try to keep the HTML in the HTML document and the CSS in the external style sheet; this helps keep things organized--especially if you decide to have multiple web pages with the same style.
- Just using CSS to set the font size or the background color is sufficient for this assignment. You are welcome to go nuts with formatting and sizing, but don't get bogged down and miss later parts of the assignment!
- Note that if you want to do things like columns, I highly suggest the 960 grid system. It is magic.
As your webpage is starting to come together, you'll need to make sure to add in links to other students' galleries. This will involve coordinating with them so you can link to the proper URL! You can talk outside of class, or use tools like the wiki or issues tracker in GitHub.
Once you've got the basic structure of your website in place, it's time to start adding some JavaScript to make it more interactive.
- Try a couple of the "hello world"-esque exercises from the tutorials to make sure you can write and run a simple function
- Your will likely be happier if you include the jQuery library in your webpage--this makes it much easier to have JavaScript interact with elements on the page (and is a fun way to add little interactive flourishes; see also the jQuery UI library. You can either link to the library files in the lib folder, or you can link to the CDN using (for example): <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> Make sure you can get basic functions working (like this).
Once you're feeling comfortable working with JavaScript, it's time to add in your original artwork on an HTML5 canvas. See the tutorials linked above for details on how to draw. Your original artwork can be as simple as the kind of "robot" drawing lab you probably did in 161, or it can be a more complex piece. It should be more than just a single shape!
- Note that despite the different syntax, the basic process is similar to how you draw on a Graphics object in Java!
- Some of the libraries linked above (i.e., KinectJS or RaphaelJS) can help ease this process.
- It might be fun to port the code you wrote for a graphical lab in 161 or 261 into JavaScript for this assignment. For example, you might draw a fractal or some random artwork.
- Again, don't get bogged down in this. Start with something simple, and then make it more complex only if you have time!
After you have implemented all parts of your exhibit, be sure to test that everything works and looks good! Then push it out the GitHub repository to turn it in!

Grading

Receiving full credit on this lab involves committing a webpage that meets the requirements listed above.

Note that you will not be graded on appearance or artistic design---your page doesn't have to look great for this lab, it just has to be functional. That said, you are encouraged to make a page that won't cause your professor pain to look at. Think about layout and usability; how can you best get your information to you reader?