Week 2

6 Comments

Session 1: Wikipedia describes HTML5 as “…a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight.” Although HTML5 is not considered “ready for prime time” it is being utilized by developers and organizations to push the envelope of what it possible in the browser as we saw last week on Chrome Experiments. HTML5 has several goals including consistent, defined error handling, and better-defined semantic roles for existing elements, but one of the most promising is the attempt to transform the browser into an application platform.

Let’s spend the lab time today covering as many chapters as we can on the w3schools HTML5 tutorial starting with HTML5 Home.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter a single comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included in the course content
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Session 2: Today we will learn how to tween or animate objects using HTML5, the <canvas> tag, and JavaScript. Let’s start by going through the Canvas tutorial on the Mozilla Developer Network (MDN).

Assignment 3: HTML5 and JS Animated Circle (10 Points)
Due: Session 2, Week 3 (Beginning of Class)
Using the setInterval() function, animate a circle on a 500 by 500 pixel canvas within an HTML5 document. Use the example code below as a starting point. Start by making the circle bounce back from the edges of the canvas. Next clear the canvas repeatedly so that the circle appears to be animated. Try enhancing the animation by cycling the colors of the circle, either randomly, or through a range. Adjust the bounce point so that part of the circle is not hidden.

Requirements:
1. Use HTML5 and JavaScript to animate a circle in a 500 by 500 pixel canvas
2. Clear the canvas so that the circle appears to animate
3. Cycle the colors and / or the size of the circle to enhance the animation
4. Adjust the bounce point so that part of the circle is not hidden
5. Experiment in other ways to make your exercise unique

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>HTML5 Bouncing Ball</title> 
<script type="text/javascript"> 
var ctx;
var dx = 5; var dy = 4;
var y = 250; var x = 250;
function draw(){
	ctx = myCanvas.getContext('2d');
	ctx.beginPath();  
	ctx.fillStyle = "#00bb00";
	ctx.arc(x,y,40,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	if( x < 0 || x > 500) {
		dx = -dx;		
	}
	if( y < 0 || y > 500 ) {
		dy = -dy;
	}            
	x += dx;
	y += dy;
} 
// call a function repeatedly at a set interval
setInterval(draw,30); 
</script> 
</head> 
<body>               
<h1>HTML5 and JS Bouncy Ball</h1>
<div> 	
	<canvas id="myCanvas" width="500" height="500"></canvas>
</div>
</body> 
</html>

In comparison, here’s code to create a similar animation using Processing.org 

float y = 50.0;
float x = 50.0;
float speedX = 1.0;
float speedY = 1.0;
float radius = 15.0;
int directionX = 1;
int directionY = -1.1;

void setup() {
  size(400,400);
  background(0);
  smooth();
  noStroke();
  ellipseMode(RADIUS);
}

void draw() {
  fill(0,12);
  rect(0,0,width,height);
  fill(255);
  ellipse(x,y,radius,radius);
  x += speedX * directionX;
  if ((x > height-radius) || (x < radius)) {
    directionX = -directionX;
  }
  y += speedY * directionY;
  if ((y > height-radius) || (y < radius)) {
    directionY = -directionY;
  }
}

6 thoughts on “Week 2”

  1. Pingback: John Keston Classes » Blog Archive » Week 4

  2. HTML5 For Web Designers (from the A Book Apart series) by Jeremy Keith is an excellent primer for HTML5

  6. Article discussing the use of the Modernizr JS library for feature detection and fallbacks with HTML5 and CSS3 in modern browsers.
    Taking Advantage of HTML5 and CSS3 with Modernizr

    Using Velocity.JS library for UI animations and interactions to create improved feedback loops, content transitions, attention keepers and aesthetics.
    Faster UI Animations With Velocity.js

    Reference to the Google Design guideline regarding animation principles for authentic motion, responsive interactions and meaningful transitions.
    Google Design guidelines for animations

Comments are closed.