speaker Multimusen

Day III – HTML5 / CSS3 / JavaScript

November 27th, 2013 by

Agenda

  • Lesson 1-2: HTML5 and CSS3 intro (and Zengarden)
  • Break
  • Lesson 2-3: Canvas
  • Lunch
  • Lesson 4-5: JavaScript Intro

LESSON 1-2 HTML5 AND CSS3

Introduction to HTML5. New tags and new possibilities.

Based on Rob Crowther’s book: “Hello! HTML5 & CSS3

and

W3School’s “HTML5 Intro“.

Sample page

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Finish your Zengarden – and experiment with new features in CSS3. E.g. you may try to use gradient backgrounds, rounded corners and much more.

Hand in a stylesheet for zengarden, that validates as CSS3.

CANVAS EXPERIMENT

  1. Use a canvas to create graphic. Experiment on your own with drawing on a canvas. Use the samples from W3Schools and try to add your own lines, circles and squares.
  2. Hand in a creative canvas. Try the examples – and try to draw a simple face on your canvas.
  3. Hand in your canvas.

JAVASCRIPT

In order to use the canvas you need JavaScript. A JavaScript is similar to ActionScript. In fact the syntax is almost the same. In stead of a Stage you have the Canvas. JavaScript is a very powerful tool. The example below (see a live demo here) demontrates how you can manipulate the content of a tag by a class. It resemples the way that you could manipulate the content of a dynamic text field in ActionScript.

In this case:

  1. document.getElementById looks for an id called “demo”.
  2. the HTML is changes to a date via .innerHTML=

So in stead of changing the paragraph to a data, you could enter an alternative text.

<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>
</html>

 

The code below will change the content of an id to a text:

<p id="xxx">Hello World!</p>

<script>
document.getElementById("xxx").innerHTML="hello";
</script>

Basic knowledge on JavaScript from W3Schools:

jQuery

… is an easy way to write powerfull JavaScripts. In fact jQuery is a library full of smart tricks of the trade. You can find lots of inspiration here:

– Exercise 1 –

Play with jQuery, try whatever you fancy here.

– Exercise 2 –

Make a fancy lightbox gallery with BlueImp. In this exercise you can copy-paste most of the code. But you have to change the images to your own.

Use this plugin and integrate the gallery in a HTML5 webpage. Modify the code and use some of your own images in stead of the demo ones.

Hand in your gallery on Fronter.

Tip: the README.MD file in the plugin tells exactly how to make this page.

Gallery index

Here is my sample gallery index file made after the instructions in the readme file. If time permits you may want to experiment with the alternative gallery options in the readme file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- link to the jQuery CSS -->
<link rel="stylesheet" href="css/blueimp-gallery.min.css">

<title>My first Lightbox</title>
</head>

<body>

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<div id="links">
    <!-- images here (a img /a) -->
	<a href="images/shot1.png">
		<!-- thumbnail -->
        <img src="images/shot1.png" alt="view" style="width:250px;" />
    </a>
	<a href="images/shot2.png">
        <img src="images/shot2.png" alt="view" style="width:250px;" />
    </a>
	<a href="images/shot3.png">
        <img src="images/shot3.png" alt="view" style="width:250px;" />
    </a>
	<a href="images/shot4.png">
        <img src="images/shot4.png" alt="view" style="width:250px;" />
    </a>
	<a href="images/shot5.png">
        <img src="images/shot5.png" alt="view" style="width:250px;" />
    </a>

</div>

<!-- lightbox script -->
<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

<!-- ad this to the bottom of the wp -->
<script src="js/blueimp-gallery.min.js"></script>

</body>
</html>