Scratch

trinary · 2012-03-30 21:47:31

TUTORIALIZED

HTML5

- Contents -
1. Introduction
i. This tutorial
ii. What's HTML?
iii. New features in HTML5

2. Getting Started
i. The barest basics
ii. Some old elements
iii. A little more for you

3. New elements
i. <articles> and <sections>?
ii. Looking at <nav>, <aside>, <header>, <hgroup>...
iii. <audio> and <video>, finally!

4. A Little More Complex
i. Form validation
ii. Time for canvas
iii. Dragging and dropping

5. Exciting, Fresh, New
i. Geolocate this
ii. App caches
iii. Web workers: something new

6. A Last Word

__________________________________________________________________________________________

1. Introduction to HTML5

i. This tutorial
Welcome to Tutorialized: HTMl5!
Tutorialized is a a series of guides created to help you begin coding in the programming language of your choice.
In this tutorial, we'll be looking at the markup language HTML - specifically, HTML5. We'll cover the basics, look at the new elements and video/audio capabilities, input and form elements, and move into using the canvas and drag/dropping.

ii. What's HTML?
For those of you who are new, HTML is the main markup language used on the web. HTML is comprised of elements enclosed in angle brackets ( < and > ). Browsers use these elements to interpret the content of the page. HTML allows the embedding of images, video, and audio and can be used along with CSS to style the content of a page.
For more information, look on this Wikipedia article.

iii. New features in HTML5
HTML5 has many new features! Along with the much-awaited <video> and <audio> elements, HTML5 includes the <canvas> element, support for local storage, drag-and-drop capabilities, geolocation, and exciting new ways of validating form input. App caches and web workers have also made it in, and, of course, who could forget the large variety of new elements: <article>, <footer>, <nav>, <section>...

__________________________________________________________________________________________

2. Getting Started

i. The barest basics
Let's start! Open up a new text file, and add this...

Code:

<!DOCTYPE html>
<html>
<head>
<title>MyWebsite</title>
</head>

<body>
Hello, World! This is my first webpage.
</body>

</html>

Save it as MyWebsite.html and there you have your very own HTML5 website!
Let's take a look at the elements, then...

Code:

<!DOCTYPE html>

The <!doctype> declaration is short and sweet, and MUCH easier to remember than the horrifyingly long monster of HTML4 that no sane web designer could hope to memorize.

Code:

<html>

This element MUST be present. It is the container for every other element except the <!doctype> declaration.

Code:

<head>

The head is the container for all head elements, including the required <title>, scripts, styles, and any meta information.

Code:

<title>

The required <title> element is used to indicate the title of the webpage in the browser toolbar.

Code:

<body>

This is where all the actual displayed content on a webpage is placed! The <body> contains the document body and the contents of that webpage.

Now you've got the basics, let's start on some elements!

ii. Some old elements
Create a new file and type in this:

Code:

<!DOCTYPE html>
<html>
<head>
<title>A webpage</title>
</head>

<body>
<h1>Welcome to my webpage!</h1>
<p>Welcome to my webpage! 
<br>
This is so exciting!
<br>
Don't you agree?
<br>
<a href="MyWebsite.html">Clicky here!</a></p>
<br>
<img src="picture.gif" width="200" height="300" alt="A picture">
<br>
<hr>
</body>

</html>

Save this in the folder next to MyWebsite.html as ARandomPage.html. Put a picture named 'picture.gif' into that folder as well.
Let's take a look at some of the elements there...

Code:

<h1>

This is the heading element and is used to organize the page and provide a clear hierarchy of content. <h1> is the highest, most important heading element, while <h6> labels the lowest and least important heading.

Code:

<p>

You can probably guess this element. The <p> element is used to label a paragraph.

Code:

<br>

Use this element for a new line.

Code:

<hr>

Sparingly used, the horizontal rule element can effectively break up long sections of text into digestible chunks. However, many webdesigners these days do not use <hr> very often as it can be hard to style, and the effect can be easily reproduced using CSS.

Code:

<a href="MyWebsite.html">Clicky here!</a>

Look! Your very first hyperlink. Isn't it cute?
Hyperlinks are clickable links which link to other webpages. They are like BBcode [url]elements.

Code:

<img src="picture.gif" width="200" height="300" alt="A picture">

This is the image element, and it is very important anywhere. Use it to display pictures on your website.
'Width' sets the width of the picture, 'height' sets the height, and 'alt' specifies what text shows up if the picture cannot be displayed, or for sight-impaired users who use screen readers.
Alt text should be informative and explain a little of what the picture is of.

Now that these have been conquered, we'll check out the remaining elements!

iii. A little more for you

More HTML coming up...

Code:

<!DOCTYPE html>
<html>
<head>
<title>A webpage</title>
</head>

<body>
<h1>Welcome to my webpage!</h1>
<p>Welcome to my webpage!<br>Look at this cool table! </p>
<table border="1">
  <tr>
    <th>User</th>
    <th>Coolness</th>
  </tr>
  <tr>
    <td>trinary</td>
    <td>100%</td>
  </tr>
  <tr>
    <td>Kaj</td>
    <td>0%</td>
  </tr>
</table>
<div id="lists">
<p>And also look at this list of cool things!</p>
<h2>List of my favourite foods</h2>
<ol>
   <li>ice cream</li>
   <li>chocolate</li>
   <li>SUGAR!!!</li>
</ol>
<h2>List of mods I know</h2>
<ul>
   <li>Lightnin</li>
   <li>cheddargirl</li>
   <li>Paddle2See</li>
   <li>MyRedNeptune</li>
</ul>
</div>
</body>

</html>

Save next to the others.
Take a look at each new element.

Code:

<table>

Tables: for many years they have been the subject of heated debates and flamewars throughout the webdesign world. They've often been mistreated by past developers to lay out pixel-perfect, heavily bloated websites. In recent years though they have finally started to be used correctly and for what they were originally intended, gaining acceptance. They are used now to lay out tabular data.
A table is defined with the <table> element, which must surround every element inside that table. Each table row is created with the <tr> element, and inside those elements <td> elements are used to specify each table cell. Header cells, the cells at the top of the table, are indicated with the <th> table header element.
The element <tfoot> can be used to specify a table footer while the element <thead> can be used to group table information in a header.

Code:

<li>

Lists - guess what element specifies them!

In HTML, lists can be unordered or ordered. Unordered lists are simply lists which are in no particular order; they are specified using the <ul> element and render as bullet points in web browsers. Ordered lists are specified using the <ol> element and render as a series of numbers, e.g. 1, 2, 3, 4 , or i., ii., iii. . Each list item is then surrounded by additional <li> elements.

Code:

<div>

Ahh...the all-purpose, yet immensely useful <div> element. By itself, it cannot do much. But when laying out your webpages with CSS, <div>s are incredibly good as they provide a container for holding other elements in and are easily styled. In HTML4 they were used quite a lot as containers for other elements, and they can have an 'id' attribute and a 'class' attribute like most other elements.

And now...time for the HTML5!!!
__________________________________________________________________________________________

3. New elements

i. <articles> and <sections>?
I think you know what to do by now.
New file and copy this in.

Code:

<!DOCTYPE html>
<html>
<head>
<title>A webpage</title>
</head>

<body>
<h1>Some articles from the Wiki</h1>
<section>

   <article>
   <h2>Inspiration and More: an excerpt from the wiki</h2>
   <p>
The Inspiration and More forums was a category of forums in the Scratch Forums which deals with off-topic posts or posts which are not strictly relevant to the Scratch program itself. The forums in this group are Collaborations, Requests, Project Ideas, and Miscellaneous (the most popular of the entire forums). On January 26th, 2012, this category was deleted. The Collaboration, Project Ideas, and Requests forums were moved to a new category called Making Scratch Projects and Miscellaneous was archived.
   </p>
   </article>

   <article>
   <h2>Projects: an excerpt from the wiki</h2>
   <p>
A project is a creation made in the Scratch Program. A project can be about anything, from music to animations or art to simulations. They have been boiled down into six main genres, of which the most common are games and animations.
Currently, there are over 2,000,000 projects on Scratch.
A good place to get thinking ideas for projects is the Project Ideas forum.
   </p>
   </article>

   <article>
   <h2>Scratch Time: an excerpt from the wiki</h2>
   <p>
Scratch Time is the name given to the timezone (-05 EST) that is used in the display of dates in the Scratch Forums and Text-based Games Forum. "Scratch Time" is the timezone of MIT (where Scratch was developed) in Massachusetts.
   </p>
   </article>

   <article>
   <h2>Scrolling: an excerpt from the wiki</h2>
   <p>
Scrolling in Scratch is the action of sliding sprites across the Stage. Scrolling in Scratch typically involves using a set of sprites and moving them across the stage while having no gaps between sprites. Common uses of scrolling in Scratch include platformers, scrolling text, maps in adventure games, and sometimes large pictures. Having an object(s) scroll across the stage is commonly seen in Scratch projects. In the Scratch community, knowing how to produce a scrolling effect is a highly valued ability; there is a common misconception that producing such an effect is very difficult. A project that uses scrolling is often referred to as a scroller.
   </p>
   </article>
</section>
</body>

</html>

The two elements introduced here, <article> and <sections> are used in HTML5 to divide lengths of text into sections and articles. They can, like most elements, be nested inside each other. The <article> element can be used to divide up texts such as blog posts, forum posts, news stories and comments, while the section can be used to divide up text within each article or group articles together.

ii. Looking at <nav>, <aside>, <header>, <hgroup>...
Save this along with your other webpages.
Note that the links won't actually go anywhere, they are for demonstration purposes.

Code:

<!DOCTYPE html>
<html>
<head>
<title>A webpage</title>
</head>

<body>
<header>
   <nav>
      <ul>
         <li><a href="page1.html">Page 1</a></li>
         <li><a href="page2.html">Page 2</a></li>
         <li><a href="page3.html">Page 3</a></li>
         <li><a href="page4.html">Page 4</a></li>
      </ul>
  </nav>
<hgroup>
<h1>Welcome to RandomWebsite!</h1>
   <h2>Where Random meets RANDOM</h2>
</hgroup>
</header>

<section>
   <article>
   <h2>Projects: an excerpt from the wiki</h2>
   <p>
A project is a creation made in the Scratch Program. A project can be about anything, from music to animations or art to simulations. They have been boiled down into six main genres, of which the most common are games and animations.
Currently, there are over 2,000,000 projects on Scratch.
A good place to get thinking ideas for projects is the Project Ideas forum.
   </p>
   </article>
</section>
<aside>
   <section>
   <h3>Something cool</h3>
   <p>random words here. random words here. random words here.</p>
   </section>
   <section>
   <h3>Something cool</h3>
   <p>random words here. random words here. random words here.</p>
   </section>
</aside>
</body>

</html>

Taking apart what is here, you can see the new elements <nav>, <header>, <hgroup>, and <aside>.
<nav> is a new element used to mark a website's primary navigation source. It may contain lists, headings, and links, but should only be used once per page.
<header> is obvious. It can be used as a header for an article or section or webpage. When used at the top of a webpage, it often is used to contain header images and navigation links.
One of the more mysterious elements, <hgroup> is used to group headings. It can be used to group headings to clarify document structure and separate headings from each other.
<aside> is a very useful element for defining content which is not part of the content it is placed in. It is often used, with CSS styling, to create sidebars for articles and pages.

iii. <audio> and <video>, finally!
One of the major challenges in the past for web designers was playing audio and video on webpages.
Because of the lack of a standard, plugins such as Flash were often used.
HTML5 offers a new, stabler way to do so, using the <audio> and <video> elements.

an example excerpt of HTML5

Code:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

As you can see, the <audio> element is used. It surrounds <source> elements, and can have multiple <source>s.
The text only displays to browsers which do not support audio.
Currently the only supported file formats for sound are .wav, .mp3, and .ogg.

an example excerpt of HTML5

Code:

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

Inside the <video> element, <source> elements link to video files.
The text only displays to browsers which do not support audio.
Apart from .mp4 files .ogg files are also supported.

That's only some of the new tags HTML5 has to offer. Take a look at the next section for more!
__________________________________________________________________________________________

4. A Little More Complex

i. Form validation
Forms are...forms. They are used to create an area of user input. They can be defined with the <form> tag, and should have an action attribute, a method, and a name:

Code:

<form action="randompage.php" name="userinfo" method="POST">
  First name: <input type="text" name="firstname"><br>
  <input type="submit" value="Submit">
</form>

The action attribute specifies what the webpage should do after the data is submitted. The method specifies how it should transfer the data, and can either be GET or POST.

Form validation has long been a source of frustration and cause of the heavy use of Javascript regular expressions, but with HTML5 form validation has become significantly easier.

excerpt from a HTML5 form

Code:

<form>
E-mail: <input type="email" name="aRandomEmail" >
</form>

One of the new features of HTML5 is the <input> element. Using this, you can validate user input to be color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, or week. As with all form elements, you can change the 'name' to be anything you want.
You can use them like this:

Code:

Select your favorite color: <input type="color" name="favcolor">

The color input type will allow the user to select a color from a color picker. Although this currently is only supported on Opera, many browsers are planning to support it in the future.

Code:

Birthday: <input type="date" name="birthday">

This lets the user pick a date.

Code:

Date and time: <input type="datetime" name="scrdaytime">

The datetime type will allow the user to select both a date and a time.

Code:

E-mail: <input type="email" name="useremail">

As you can see, the email type will validate an email.

Code:

Rating (between 1 and 10): <input type="number" name="rating" min="1" max="10">

The number type has slightly more controls. You can set the minimum number the user can choose and the maximum. You can also use the 'step' attribute, to set the number intervals, and the 'value' attribute to set the default value.

Code:

Rating: <input type="range" name="rating" min="1" max="10">

As with the number type, you can specify the minimum and maximum values.
However, this will render in web browsers as a slider.
You can also use the 'step' attribute and 'value' attribute to set the number intervals and default value.

Code:

Telephone: <input type="tel" name="usertel">

This type adds a form to enter a valid telephone number.

Code:

Time: <input type="time" name="usertime">

Validates for time.

Code:

Website: <input type="url" name="homepage">

Defines an input area for URLs.

Code:

  <input type="submit" value="Submit">

Creates a button which will submit the form.

Code:

Password: <input type="password" name="userpass">

This will hide the user input behind asterisks or dots.

If you're not sure what to use, you can always use the old text type.

Code:

Write something: <input type="text" name="randomtext">

The text type is often used for names, and before HTML5's form validation they were used for almost everything, along with JavaScript as a validator.

For comments and large amounts of text, use textarea:

Code:

<textarea rows="4" cols="50">You can add default text here</textarea>

The 'rows' attribute lets you specify the number of rows and the 'cols' attribute will let you specify how wide, in characters, the text area will be.
You also use the 'maxlength' attribute to specify how many characters maximum are allowed to be entered, 'wrap' to determine how the text wraps when it is too long for one line, and the 'required' attribute to specify if this form must be filled out before submitting.

If you only want one option to be selected out of a very restricted set, you can use the <select> element, which creates a dropdown list. Use the <option> element to create options.

Code:

Who was the greatest Scratcher of all time?
<select name="greatestscratcher">
  <option value="08jackt">08jackt</option>
  <option value="archmage">archmage</option>
  <option value="RHY3756547">RHY3756547</option>
  <option value="floatingmagictree">floatingmagictree</option>
</select>

You can use the 'size' attribute to specify how many options should be visible at one time.

Another way of defining fixed options is with radio buttons.

Code:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female

The user can only choose one option.
For the user to be able to choose multiple options, use checkboxes.

Code:

Which talents do you have?
<input type="checkbox" name="talent" value="Graphics"> Graphics<br>
<input type="checkbox" name="talent" value="Programming"> Programming<br>
<input type="checkbox" name="talent" value="Writing"> Writing<br>
<input type="checkbox" name="talent" value="Mathematics"> Mathematics

Checkboxes are useful when you want the user to be able to select many things from a list.

If you want to group related elements on a form, you can use the <fieldset> element.

Code:

<form action="submitted.php" method="POST" name="signupform">
  <fieldset>
    <legend>Personal:</legend>
    Username: <input type="text" name="username"><br>
    Email: <input type="email" name="useremail"><br>
    Birthday: <input type="date" name="birthday">
  </fieldset>
  <fieldset>
    <legend>Favourites:</legend>
    Color: <input type="color" name="usercolor"><br>
    Hobbies: <input type="text" name="userhobbies">
  </fieldset>
</form>

This will draw boxes around each <fieldset> 'group', separating them neatly.

A new HTML5 method of having an autocomplete function is with the datalist element.

Code:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

As the user types in their input, a list pops up to autocomplete that field.
This is only currently supported on Opera and Firefox, although if it is not supported it will still render, but as a normal dropdown list.

There's also the new <keygen> element, which is used to securely authenticate users.
For more information on that one, see here.

Possibly one of the more exciting elements is the new <output> element. It will dynamically calculate an output based on what the user has typed in.
See here for more information.

And that's forms - the whole lot of them! Forms are essential for getting user input, and they can be used in a variety of ways.
Now, time for some action.
It's time for...CANVAS!!!

ii. Time for canvas.
Canvas has become one of the most talked-of new features in HTML5.
But what is it?
The <canvas> element is simply a container, a blank area, in which graphics may be dynamically drawn using Javascript (and other scripting languages, but usually Javascript).
You must define a width and height for the canvas.
Methods for drawing in the <canvas> include boxes, circles, paths, characters, and importing images.

Let's start!

Code:

<!DOCTYPE html>
<html>
<head>
<title>A webpage</title>
</head>

<body>
<h1>My first canvas!</h1>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>

</html>

That's all you need to create your first canvas.
But to draw on it, you need Javascript.

Add this into your page under the canvas element:

Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

This creates your first canvas drawing - a red rectangle!

Code:

var c=document.getElementById("myCanvas");

First, Javascript uses this to find the <canvas> element.

Code:

var ctx=c.getContext("2d");

It gets the context object. getContext("2d") is a HTML5 object which contains many methods to actually draw the graphics onto the canvas.

Code:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,175,50);

Finally, it sets a color using fillStyle and makes a rectangle using fillRect.
The co-ordinates determine where the corners of the rectangle should be.

You can use a gradient inside the rectangle by replacing ctx.fillStyle="#FF0000"; with these scripts:

Code:

var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#134EFF");
grd.addColorStop(1,"#FFFFFF");
ctx.fillStyle=grd;

var grd=ctx.createLinearGradient(0,0,175,50); creates the gradient.
Each of the grd.addColorStop adds a place where the gradient changes color.

Now let's try making a circle.
Replace the first set of Javascript scripts with these:

Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#00FF00";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>

This creates a circle.

And of course, lines are quite useful to learn as well.
Replace those scripts with these.

Code:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(90,10);
ctx.lineTo(80,50);
ctx.lineTo(100,70);
ctx.stroke();

</script>

In this example, ctx.moveTo(90,10); sets the co-ordinates for the line's starting position.
ctx.lineTo(number, number); directs where the line should go next.

You can also add images onto the canvas.

Code:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function()
   {
      ctx.drawImage(img,0,0);
   };
img.src="trollface.jpg";
</script>

As you can see, var img=new Image(); creates a new image. As soon as the image loads ctx.drawImage(img,0,0); draws the image onto the canvas.

These are, unfortunately, only the basics of canvas. To learn more, look at w3schools' complete canvas reference for a lot more information and detail.

iii. Dragging and dropping
Adding the scripts for dragging and dropping things may seem complicated, but it is really quite simple.
Create a new file and put in this.

Code:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2{
   float:left;
   width:100px;
   height:35px; 
   margin:10px;
   padding:10px;
   border:1px solid #aaaaaa;
   }
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
<title>DragAndDropping</title>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="picture.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Although it may appear initially quite daunting, take a closer look at that mass of weird symbols and you'll see that it isn't really that much.
There are two divs, and an image.
First, the image is set to be draggable with draggable="true".
Next, when the image is dragged (ondragstart="drag(event)") the Javascript function drag(event) is called. Inside this function the dataTransfer.setData() method sets the data type and dragged data value.

Code:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

As by default you cannot drop this dragged data in other elements, ev.preventDefault(); is used so that the dragged image is allowed to be dropped.

Code:

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

Finally, function drop(ev) is called when the image is dropped. var data=ev.dataTransfer.getData("Text"); grabs the dragged image data from the dataTransfer.getData("Text") method and the data is appended using [color=blueev.target.appendChild(document.getElementById(data));[/color]. The ev.preventDefault(); is used to prevent the data from opening as a link on drop (the default action) from occurring.

And that's dragging and dropping, HTML5-style!

__________________________________________________________________________________________

5. Exciting, Fresh, New

i. Geolocate this
Yes, I know, geolocation is more Javascript than HTML, but it's still worth a mention at least.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Using geolocation</title>
</head>
<body>
<p id="paragraph">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("paragraph");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }
</script>
</body>

Take a look at the above scripts and you'll find that it is rather easy to follow.
When the button is pressed, the page first checks if geolocation is supported using if (navigator.geolocation).
If it is supported, it runs getCurrentPosition[color] and returns the co-ordinates to [color=blue]showPosition. Otherwise, it displays the error.
Lastly, showPosition gets and displays the results to the user.

You can also display the results with Google Maps.
Replace the showPosition function with this instead:
(taken from w3schools.com)

Code:

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

ii. App caches.
App caches are application caches, or cache manifest files which allow users to browse webpages without internet connection. They are often used to make pages load faster and reduce server load as well.

Code:

<!DOCTYPE HTML>
<html manifest="myWebCache.appcache">
...
</html>

It's quite simple to enable application caching.

Then you'll need to create the actual manifest file, which is the text file that tells the browsers what to cache and when to update.
The manifest file will have three sections, each of which specify which files to cache under each circumstance by providing the name/location of the files.
Under the first, CACHE MANIFEST, you should list the files that are cached when downloaded for the first time.
Under the second, NETWORK, list files that should never be cached.
Under the third, FALLBACK, list page that should be used if there is no internet connection.

Here's an example manifest file:

Code:

CACHE MANIFEST
# the cached files
/styles.css
/logo.gif

NETWORK:
*

FALLBACK:
/page/ /offline.html

Lines starting with # are comment lines.
The cached files in this example are styles.css and logo.gif.
Notice that under NETWORK, the * indicates that all other resources should never be cached.

Under FALLBACK, the first URI is the resource that displays if there is an internet connection, and the second the page that displays if the user is offline.

iii. Web Workers: something new
Quite often, Javascript running on a webpage can cause the page to become unresponsive until the script has finished executing. This can be frustrating for both user and developer.
HTML5 offers a solution to this problem by introducing web workers. Put simply, they are simply Javascript that runs in the background and does not freeze up pages. The user can still interact with pages even while the web worker runs.

Here's the example HTML file:
(taken from w3schools.com)

Code:

<!DOCTYPE html>
<html>
<head>
<title> Introducing web workers</title>
</head>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  w=new Worker("counter.js");
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

And save this as counter.js...
(taken from w3schools.com)

Code:

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Test it out and be amazed at the fact that your webpage remains responsive.
Let's see how this works, then...
Firstly, if(typeof(Worker)!=="undefined") tests if there is support for web workers.
If there is, w=new Worker("counter.js"); creates a new web worker and runs the code in counter.js. Otherwise, an error message is displayed.

Code:

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

This code ensures that when the web worker sends out a message, the data is taken and stored in event.data.
To stop the web worker, w.terminate(); is used.

Web workers are incredibly useful little things. They make web applications possible and can handle quite a lot without freezing up the browser.

__________________________________________________________________________________________

6. A Last Word

HTML5 is the new emerging standard on the Internet. It provides support for dynamic form validation, audio and video embedding, drawing with canvas and SVGs, and all sorts of other new exciting features.

I hope you enjoyed this tutorial and use well the knowledge that has been provided.

Post below any suggestions for the next edition of Tutorialized, comments about this tutorial, or errors that I may have made above.

Coincidentally, this is also my 1001st post. big_smile

bananaman114 · 2012-03-30 21:58:11

Wow that's informative. I'm definitely going to follow this and maybe learn something!

jji7skyline · 2012-03-30 22:12:30

Cool tutorial! How long did it take you to type that? tongue

trinary · 2012-03-30 22:18:34

bananaman114 wrote:
Wow that's informative. I'm definitely going to follow this and maybe learn something!

HTML5 is really good for creating websites today. big_smile
If you learn it, CSS is also quite useful.

jji7skyline wrote:
Cool tutorial! How long did it take you to type that?

Thanks! smile
Three hours, give or take ten minutes.

veggieman001 · 2012-03-30 22:21:44

This is a really nice tutorial. It kinda woulda been nice to have something like this when I was starting tongue

trinary · 2012-03-30 22:29:08

veggieman001 wrote:
This is a really nice tutorial. It kinda woulda been nice to have something like this when I was starting

Thanks! big_smile

Ecliptic · 2012-03-30 22:43:37

Nice, very informative.

trinary · 2012-03-30 23:32:45

Ecliptic wrote:
Nice, very informative.

Thank you.

ProgramCAT · 2012-03-31 14:39:11

Very useful!
Now I can start transitioning from HTML 4.01 to HTML 5.

trinary · 2012-03-31 17:59:59

ProgramCAT wrote:
Very useful!
Now I can start transitioning from HTML 4.01 to HTML 5.

Thanks!

bobbybee · 2012-03-31 18:41:23

What would make this even better would be a little sample at the end to combine everything. Maybe a canvas game, using audio tag for audio, video tag for instructions on how to play, forms and lists/tables for mini-JS leaderboards. It could be interesting.

RedRocker227 · 2012-03-31 18:48:04

bananaman114 wrote:
Wow that's informative. I'm definitely going to follow this and maybe learn something!

trinary · 2012-04-02 04:32:11

bobbybee wrote:
What would make this even better would be a little sample at the end to combine everything. Maybe a canvas game, using audio tag for audio, video tag for instructions on how to play, forms and lists/tables for mini-JS leaderboards. It could be interesting.

Good suggestion! I'll add something like that in.

muppetds · 2012-04-02 07:59:10

how do you make the canvas fit the screen?

logiblocs · 2012-04-02 08:21:30

Thanks. I necer realy understood HTML5.

Btw whuch browsers support it?

muppetds · 2012-04-02 08:31:34

nearly all do

see here to see the score of your browser

http://www.html5test.com/

bobbybee · 2012-04-02 16:33:40

trinary wrote:
bobbybee wrote:
What would make this even better would be a little sample at the end to combine everything. Maybe a canvas game, using audio tag for audio, video tag for instructions on how to play, forms and lists/tables for mini-JS leaderboards. It could be interesting.
Good suggestion! I'll add something like that in.

I can help, if you want. (I write code for the game, you actually tutorialize it)

trinary · 2012-04-02 18:17:02

bobbybee wrote:
trinary wrote:
bobbybee wrote:
What would make this even better would be a little sample at the end to combine everything. Maybe a canvas game, using audio tag for audio, video tag for instructions on how to play, forms and lists/tables for mini-JS leaderboards. It could be interesting.
Good suggestion! I'll add something like that in.
I can help, if you want. (I write code for the game, you actually tutorialize it)

That would be cool. smile

bobbybee · 2012-04-02 19:25:29

trinary wrote:
bobbybee wrote:
trinary wrote:

Good suggestion! I'll add something like that in.
I can help, if you want. (I write code for the game, you actually tutorialize it)
That would be cool.

Alright.

TheBajeebas · 2012-04-02 19:43:48

cool, this would've been helpful when i was learning

analytic · 2012-04-03 05:28:23

Very interesting and well-written guide.

muppetds · 2012-04-03 07:35:39

How do you make a canvas fit the screen?

trinary · 2012-04-03 14:54:09

You can either set the width/height of the canvas using
<canvas id="myCanvas" width="LARGENUMBER" height="LARGENUMBER"></canvas>
or you could use Javascript to create a new window, and use canvas.width=window.window.innerWidth and
canvas.height=window.innerHeight
to push it to fit the window.

Alternatively, you could use Javascript to call requestFullScreen(), or use CSS:

Code:

      #myCanvas {
        height: 100%; 
        width: 100%;
      }

Last edited by trinary (2012-04-03 14:56:02)

3DSfan12345 · 2012-04-05 07:34:48

Bmup.

scratchisthebest · 2012-04-05 18:03:33

Go change the user coolness of "trinary" to 9001%. smile

Scratch

archived forums

#1 2012-03-30 21:47:31

Tutorialized: HTML5!

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

#2 2012-03-30 21:58:11

Re: Tutorialized: HTML5!

#3 2012-03-30 22:12:30

Re: Tutorialized: HTML5!

#4 2012-03-30 22:18:34

Re: Tutorialized: HTML5!

bananaman114 wrote:

jji7skyline wrote:

#5 2012-03-30 22:21:44

Re: Tutorialized: HTML5!

#6 2012-03-30 22:29:08

Re: Tutorialized: HTML5!

veggieman001 wrote:

#7 2012-03-30 22:43:37

Re: Tutorialized: HTML5!

#8 2012-03-30 23:32:45