HTML5 & Friends

What is HTML5?

HTML5 = HTML + CSS + JS


HTML5 Dashboard

HTML5 Slideshow


WHAT WG Developer Spec

CSS3

  
section li a, section nav a, section header a, section footer a,
article li a, article nav a, article header a, article footer a,
aside li a, aside nav a, aside header a, aside footer a {
   color:#000;
}

...

:any(section, article, aside)
:any(li, nav, header, footer) a {
   color:#000;
}

Canvas - Basics of Drawing

Click to draw Sorry! Your browser doesn't support canvas
function drawSomething() {
  var canvas = document.getElementById('basic');
  var context = canvas.getContext('2d');
  context.fillRect(25, 25, 50, 50);
}

Canvas - Animation

Click to animate Sorry! Your browser doesn't support canvas
var context;
var x;    
function draw() {
  context.clearRect(0,0,300,300);
  context.fillStyle = "#09f";
  context.fillRect(x,25,50,50);
  if(x < 300) {
    x += 10;
  }         
}
function animate() {
  context = document.getElementById('advanced').getContext('2d');
  x = -25;
  setInterval(draw, 50);
}

Canvas & Generative Art


context = document.getElementById('advanced').getContext('2d');
context.getImageData(x, y, w, h);

[ r, g, b, a,
  r, g, b, a,
  r, g, b, a,
]