Module 8

THIS PAGE IS OUT OF DATE AND IS HERE FOR REFERENCE ONLY.

Module 5 is your chance to complete a project of your own creation. There's a reason this class has "Creative Programming" in the title.

Objective

Your project should incorporate topics we have learned throughout this corse, but it should be focussed primarily on some new concept or concepts relating to web development. You should continue the best practices and security protocols you have learned in previous modules as well.

Technologies

We have looked through the projects submitted by all groups, and we have picked out a few technologies that turned up frequently. Below is a short summary of these technologies and the TAs who can help answer questions about them.

HTML5 Canvas

The HTML5 <canvas> element enables you to render dynamic graphics in real-time in the browser. In many ways, you can think of HTML5 Canvas as a substitute for Flash Player: most tasks that Flash Player can do, <canvas> can do just as well.

Here are examples of some things you can do with the HTML5 Canvas: http://www.hongkiat.com/blog/48-excellent-html5-demos/

You may want to consider using a dedicated JavaScript library for interfacing with the Canvas. This will ensure better compatibility, and the documentation should be more helpful than trying to figure out the native Canvas methods. Here are some promising Canvas libraries:

• KineticJS
• Fabric.JS
• jCanvas (built on jQuery)

Node.JS and Socket.IO

In Module 4, you learned how to use AJAX, which is a technology by which a client can communicate with the server asynchronously. However, AJAX requires that a client ask for data from a server, and the server then sends a response. This approach fails in real-time applications: think chatrooms and online action games.

Socket.IO is a technology that enables the server to send data to the client without the client having to request it first. Node.JS is a server built from the ground up to handle real-time requests efficiently, more so than a server like Apache.

It is important to understand that Socket.IO and Node.JS replace AJAX, PHP, and Apache in your web application. You can use a technology like express to serve static files so that you don't even need to have Apache running.

It is worth noting that Linux distributions based on Debian are more friendly to Node.JS than distributions based on RHEL. If your main server is running the Amazon Linux AMI, you may want to consider launching a new EC2 instance running Ubuntu Server if you are using Node.JS in your project.

TAs Knowledgeable about Node.JS

• Shane
• Todd

Maps

It is common to see maps embedded in web sites. Google Maps, Nokia Maps, and Mapquest are three examples.

Cendors like Google, Nokia, and Mapquest provide APIs that make it easy for you, the developer, to use their maps on your site. For example, this is all the code you need to display a map of Wash U's campus using the Nokia Map API:

map = new nokia.maps.map.Display(document.getElementById("mapDiv"), {
   zoomLevel: 15,
   center: [38.648044, -90.304881]
});

Alternate Authentication Methods

You have probably used sites that allow you to log in using your Google, Yahoo, Facebook, Twitter, or some other account rather than making a new account with a new password.

It is relatively easy to implement alternate authentication methods like this. OpenID, which is a gateway to account providers like Google and Yahoo, is documented in Web Application Security, Part 2#OpenID.

HTML5 Video and Audio

In the past, a plugin like Flash was required for viewing media on the web. With HTML5 Video, these plugins are no longer necessary.

In its simplest form, an HTML5 video can be loaded in one line of HTML:

<video src="my_video.mp4" type="video/mp4" controls></video>

Video formats are more complicated than image formats, however, and so it is necessary for you to define multiple source files for the same video, encoded in different formats. For example:

<video controls>
  <source src="my_video.mp4" type="video/mp4" />
  <source src="my_video.ogv" type="video/ogg" />
  <source src="my_video.webm" type="video/webm" />
</video>

I highly recommend that you take the time to read this informative article about HTML5 Video if you choose to employ this technology in your project: http://diveintohtml5.info/video.html

CSS 3

CSS 3 adds features to CSS that reduce the need for background images and JavaScript for layout purposes, resulting in a more centralized and robust stylesheet. CSS 3 also enables developers to be more creative with their layouts and typography.

Here are examples of some nifty things that you can do with CSS 3: http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Other APIs

Above, we mentioned the Map APIs provided by some vendors. In reality, there are APIs provided for applications extending far beyond Maps. Some of these additional APIs include:

• Yahoo Finance
• Twilio
• Twitter
• Facebook

Grading

THIS PAGE IS OUT OF DATE and should only be used as a reference.