Final Project Progress Day

In-Progress Presentations

Share your plan for the final project, and the current version of your code. Make sure to address:

  • Your pseudocode or outline of the overall project plan
  • Challenges and obstacles you’ve encountered so far
  • Pieces of your project plan you’re still figuring out
  • Any new APIs or libraries you are using for this project

In Class

  • Strategies for Debugging and Planning Complex Applications
  • Review of Final Project Guidelines
  • Open Lab Time

Remember: Final Projects are due by midnight, May 14th. Email me when your project is ready for review. If you have missing assignments, you have until the same deadline to complete them and email me the link!

Future of HTML5 + Keeping On Top of Development Skills

Mini-Project Five

Remember, Mini-Project Five is due before the start of class today. Anyone who has not presented yet this semester needs to:

  • Share your solution for Mini-Project Five
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Platforms for HTML5 and JavaScript: Windows 8, Mobile and Beyond

Windows 8

Mobile

Extending JavaScript

Other Programming Languages (and how knowing JavaScript will help)

Keeping Up with the News

Planning your Final Project

Web Workers, Fractals, and Modernizr

Mini-Project Four

Remember, Mini-Project Four is due before the start of class today. We need two volunteers to:

  • Share your solution for Mini-Project Four
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

Mastermind Tutorial Review: Working with the Canvas; building interactive applications;

Working with Best Practices
Mini-Exercise: Handling Clicks and the Canvas
<!doctype html>
<html lang="en">
<head>
<style>canvas {
 border: 2px solid black;
}
</style>
<title>Demo: Events, Clicks and Composite Types</title>
<meta charset="utf-8">
<script>
window.onload = init;
var canvas;
var context;
function init() {
 canvas = document.getElementById("myCanvas");
 context = canvas.getContext("2d");
 canvas.onclick = function(event) {
     handleClick(event.clientX, event.clientY);
 };
}
function handleClick(x, y) {
 var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
 var color = colors[Math.floor(Math.random()*colors.length)];
 var compositeTypes = ['source-over','source-atop','destination-over','destination-out','destination-atop','lighter','darker','xor'];
 //others to try: 'copy', 'destination-in','source-out','source-in'
 var type = compositeTypes[Math.floor(Math.random()*compositeTypes.length)];
 alert("Type: " + type);
 context.globalCompositeOperation = type;
 context.beginPath();
 context.arc(x, y, 30, 0, degreesToRadians(360), true);
 context.fillStyle = color;
 context.fill();
}
function degreesToRadians(degrees) {
 //converts from degrees to radians and returns
 return (degrees * Math.PI)/180;
}</script></head><body><canvas id="myCanvas" width="300" height="300"></canvas></body></html>
When do we use web workers? How do we handle increasingly complex coding? Working from the Mandelbrot set example, we’ll consider the relationship between web workers, the canvas, and complex procedural generation and animation.

Reminder: Mini-Project Five is due next Monday, before the start of class. You should already be working on your final project: consider which previous projects (including mini-project five) you might want to revisit or expand as part of your concept.

Mastermind Tutorial

The Mastermind Tutorial is in two parts:

Part One: Build a working graphical interface for our Mastermind game that dynamically generates objects on the Canvas as needed. We’ll work from our foundation logic to create the two columns of color-coded results and practice our skills with circles, squares and text. Download Part One here.

Part Two: Now that we have the basic game, let’s jazz it up. We’ll add end screens for both winning and losing and a simple particle animation to open our game screen. We’ll also move from simple game to application by adding a working high scores table in local storage. Download Part Two here.

The full code of the final working game will be posted at the end of our scheduled class time Monday night. I encourage you to use the time we are not meeting in person to work through it on your own, and then compare or debug using the posted source code.

My tutorial files are in MS Word. I’ve tried to catch typos and pasted the code directly from my working file, but let me know if you have any problems with it. You can email me directly or reply to the group email for help debugging. Your final version of the game should be posted to your site by the start of class April 23rd.

Video and the Canvas

Video and the Canvas

  • HTML5 and the Video Element
  • Working with video formats
  • Event Listeners
  • Processing Video on the Canvas
  • Animation and objects in motion

In-Class Exercise: Bouncing Videos

We’ll be using a video from one of the book examples–you can download the video files in the range of necessary formats here. We will dynamically generate the video element using the canvas to draw the images, and manipulate the elements to create dynamic animation from our video objects. Variants on this and other example projects to give you inspiration for the possibilities of the canvas can be found in the book’s code reference library.

Local Storage and Mastermind: Tutorial for April16th

There will be a step-by-step tutorial posted instead of an in-person class on the 16th. The tutorial will include pseudocode and code snippets for combining local storage and the canvas to create an advanced version of our Mastermind game. Working either alone or with a group, your challenge is to complete the project either during the scheduled class time or by Wednesday at midnight. I will be sending out an email when the tutorial is posted, and replies to the email sent to all class members can ask questions of general concern.

Mini Project Five: Building on Canvas

Take an existing application or concept you’ve worked with this semester and change its existing interface to use the Canvas for primary display. Using the starting tutorial on taking MasterMind from a text-based to graphical interface as an example, choose an appropriate application and make use of the built-in drawing tools, imported images, and text output on the canvas. The resulting project must be dynamic: you should not be outputting a static picture, but instead updating or transforming it based on input from the user.

Your Canvas implementation should include:

  • Proper use of properties and built-in functions from the 2D context
  • Positioning of elements using the coordinate system
  • Use of the built-in drawing tools to add color, shapes or lines to the canvas
  • Use of the drawText function for adding formatted text to the canvas
  • Imported graphical or video elements from outside files manipulated appropriately
  • Handling of data and interpretation into graphical elements (ie, pegs for hits in Mastermind)
  • Some method for handling user input and updating the display accordingly

Optional extensions include integration with web services (as in the TweetShirt example from the text), outputting the canvas to an image file for download, building a complex user interface on the canvas itself or integrating appropriate uses of video or animation.

  • A-Level Work: Build a working interface for a user-responsive graphical application or game. A combination of generated graphics and imported elements should provide the user with a dynamic display of content. For A-level work, the application should go beyond the minimum requirements and include some dynamic elements, such as animation or direct user manipulation of the canvas.
  • B-Level Work: Build a working interface for a user-responsive graphical application or game. A combination of generated graphics and imported elements should provide the user with a dynamic display of content. For B-Level work, the application should meet the minimum requirements above, but does not need to attempt any optional elements.
  • C-Level Work: Create a basic Canvas application that may be derived heavily from the Mastermind example or otherwise be missing several required elements.
  • D-Level Work: The application is attempted but fails to work with the canvas element or suffers from significant bugs.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Remember, Mini-Project Four is due April 16th. If you are not posting to a designated site linked on our projects page, please email me the link before our regular start of class time. There is no in-person meeting on the 16th.

The Canvas and Mini-Project Four

 Understanding the Canvas

  • Final Project Guidelines
  • Web Services and Mini-Project Four
  • Introducing the Canvas Element
  • Building Dynamic Web Graphics
  • Looking ahead: animation, video + more
  • Recommended additional reading: HTML5 Canvas

In-Class Exercise: Using the Canvas

Today we’ll build a simple abstract art generator that uses random colors, coordinates and sizes to build a “modern art” piece out of squares and circles. The code will be posted at the end of class. This project builds on the previous poetry generator, and can be combined with your first mini-project to build procedural content.

Mini-Project Four: Working with Web Services

Working from the example code below, create a simple application to take and display information from a web services API. Your application should demonstrate an understanding of the JSON object being accessed and an ability to dynamically update the information (not seen in the example below, but built in our example last week.) Any web service can be used for this project.

Your project should…

  • Successfully implement a callback function
  • Pull in data as JavaScript objects
  • Make use of appropriate properties of data
  • Display a portion of imported content
  • Update dynamically at regular intervals
Grading Rubric
  • A-Level Work: Build a working application to import and display data from a web service API.  The callback function should be clearly written and called dynamically at an appropriate time interval. Displayed output should be clearly appended to the DOM. For A-level work, the application should use multiple properties of imported data in a meaningful way–either to sort / search based on user input, narrow the range of returned results, or otherwise manipulate the data returned.
  • B-Level Work: Build a working application to import and display data from a web service API. The callback function should be clearly written and called dynamically at an appropriate time interval. Displayed output should be clearly appended to the DOM. For B-level work, the application might simply return all data or only use one or two properties of the objects.
  • C-Level Work: Create a basic application that imports data, but does not update dynamically at intervals. The objects are imported but not meaningfully displayed.
  • D-Level Work: The application is attempted but fails to connect to a web service or import data.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.
<!doctype html>
<html lang="en">
<head>
 <title>Tweets</title>
 <meta charset="utf-8" />
 <script>
 function updateTweets(tweets) {
 for (var i = 0; i < tweets.length; i++) {
 var tweet = tweets[i];
 var newDiv = document.createElement("div");
 var div = document.getElementById("tweetsHere");
 newDiv.innerHTML = tweet.text;
 div.appendChild(newDiv);
 }
 }
 </script>
</head>
<body>
 <div id="tweetsHere"></div>
 <script src="http://twitter.com/statuses/user_timeline/timoreilly.json?callback=updateTweets">
</script>
</body>
</html>

 

Web Services and JSON

Mini-Project Three

Remember, Mini-Project Three is due before the start of class today. We need two volunteers to:

  • Share your solution for Mini-Project Three
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

Looking Ahead

  • Schedule Review
  • Pseudocode Project Reminder
  • Mini Project Four (APIs) and Mini Project Five (Canvas)
  • Thinking about the final project

JSON and APIs

In Class Exercise

Working with JSONP and Mighty Gumball: from the example project in Chapter 6, we will build the web application to display continuously updated sales from imported structured data. These same techniques can be applied to working with web service APIs, which will be the challenge for the next mini-project.

Review and Geolocation

Mini-Project Three

*Updated!* The deadline for Mini-Project Three has been extended to March 26th to give everyone time to debug their code and get more comfortable with these program structures. Bring your questions to today’s review. I will not be available on email from March 17th to 24th, but I can answer additional questions before and after that time.

Review: JavaScript Fundamentals

  • Visualizing Variables, Parameters, Arguments and Arrays
  • Functions
  • If/Else
  • Objects
  • Loops
  • Structuring a program
  • Associative Arrays ( {} )

Discussion: What’s the Big Deal about Mobile?

Practice: The Geolocation API / Spec

Reminder: Upcoming deadlines: Mini Project 3 (March 26th) and Pseudocode Design Analysis (April 2nd)- note that the schedule of due dates has been shifted back. Mini Project Four will require work with an API, Mini Project Five will be a canvas project. Make sure to plan your time and start thinking about your final project now!

Integrating JQuery

Review: Objects and Constructors

Pseudocode: Mini-Project Three

Introducing JQuery

In Class Exercise: Re-mastering Mastermind with JQuery

Working from the basic Mastermind code (available several posts down on the blog), we will transform the use of elements to JQuery standards.

Mini-Project Three: A JavaScript Sampler (due March 12th)

Following from the pseudo code you developed in class, design a game or application that uses all of the following:

  • Objects
  • Functions
  • Arrays
  • Variables
  • Built-in functions
  • Loops
  • If/Else statements
  • DOM/Elements

Your project should meaningfully integrate each element towards accomplishing your goal.  Example ideas include simple games, electronic literature and generated content, a dynamic portfolio page, or a simple web application.

  • A-Level Work: Build a working game or application that meaningfully integrates all the common JavaScript structures we’ve used thus far with well-commented and readable code. Code should demonstrate an understanding of how all structures work and the ability to combine the pieces towards an original solution to a clearly defined task. For A-Level work, the project should clearly demonstrate a move away from previous examples towards a new type of application.
  • B-Level Work: Build a working game or application that meaningfully integrates all the common JavaScript structures we’ve used thus far with well-commented and readable code. Code should demonstrate an understanding of how all structures work and the ability to combine the pieces towards an original solution to a clearly defined task.
  • C-Level Work: Create a basic application or game that includes all of the required content, but does not integrate the pieces (for instance, an application with several buttons that execute disconnected functions).
  • D-Level Work: Fails to compile or include all required elements.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Objects and Functions

Mini-Project Two

Remember, Mini-Project Two is due before the start of class today. We need three volunteers to:

  • Share your solution for Mini-Project Two
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

Introducing Objects, Methods and Functions

Discussion and Practice:

  • Parameters, Arguments and Return Statements (116-120)
  • Built-in Functions
  • Local and global variables (123)
  • Functions as values (128-129)
  • Objects (131-134)
  • Methods (142)
  • “this” (145)
  • Constructors (146-147)

In-Class Exercise and Homework: Revise our in-class “race simulator” to include three racers created using a constructor. Make sure the simulation correctly creates the three objects, properly uses methods to determine speed increase or decrease, and uses “this” to allow for potentially scaling the project beyond specific instances of racers. Email your code or a link to the project by next week’s class.

Mini-Project Three: A JavaScript Sampler (due March 12th)

Start brainstorming a small project that will use all the foundational JavaScript principles we’ve covered so far, including:

  • Objects
  • Functions
  • Arrays
  • Variables
  • Built-in functions
  • Loops
  • If/Else statements

Bring your ideas to class next week.