HTML5: An Alternative to Flash


Designing Experiments with HTML and Javascript

Structure of a Webpage

  • Basic Structure: HTML
  • Making it look pretty: CSS
  • Adding interactive features: JavaScript/Jquery
  • Importing/Exporting Data: PHP

HTML: Basic Structure


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......

<body>
</body>

</html>

					

Adding Forms


<form method="post" action="save.php" >
Describe your love of cheese: 
<textarea rows="10" cols="50" name="cheese"> </textarea> <p> <input type="image" src="button.jpg" alt="Submit Form" id="send"/> </p> </form>

Look and see

Some CSS


<style type="text/css">
	body{
		text-align: center
	}
	#send{
		width: 100px;
	}
	form{
		margin-top: 30px;
		font-size: 20px;
	}

</style>


					

This is better...

Save.php


<?php
$data=$_POST["cheese"];
$ip = $_SERVER["REMOTE_ADDR"];
$ts=time();
echo $data;


$fp = fopen('output.txt', 'a');
fputcsv($fp, array($ip, $ts, $data));

fclose($fp);
?>


					

Lexical Decision Task


<div id="wrapper">
	<div id="first" class="choice">
		WORD 
		</br> 
		<img src="k2.jpg" class="button">
	</div>
	<div id="snd" class="choice">
		NON-WORD 
		</br> 
		<img src="d2.jpg" class="button">
	</div>
</div>

<div id="word">
	—
</div>

Ugly...

Some CSS


body{
	text-align: center;
	font-family:Garamond, Georgia, serif;
}
#wrapper{
	height: 200px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}

.choice{
	width: 300px;
	font-size: 20px;
	float: left;
}
.button{
	width: 80px;
	margin-top: 10px;
}
#word{
	font-size: 28px;
}



Well...

What key did I press again?

In the <head> section:
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function() {
		$('body').keypress(function(e) {
	   		code = e.keyCode || e.which;
	   		if (code==100 || code==107) {
	   			alert("You pressed 'd' or 'k'!");
	   		}
		});
});
</script>


It works!

Show a word


timeout=2000;
setTimeout( showWord, timeout );

function showWord(){
	$('#word').html("Awesome Word");
}


It works!

Transmitting Data

$.ajax({
	url: "save.php",
	type: "post",
	data: {
		choice: code, 
		time: ntime, 
		word: word, 
		left: left
	         },
      	success: function(){
          		window.location= "index.php";
     	},
      	error:function(){
        		alert("failure");
     	}   
}); 
Compare to:
<form method="post" action="save.php">

Saving Data


<?php
$ip = $_SERVER["REMOTE_ADDR"];
$choice=$_POST["choice"];
$word=$_POST['word'];
$time=$_POST['time'];
$left=$_POST['left'];


$fp = fopen('output.txt', 'a');
fputcsv($fp, array($ip, $word, $choice, $time, $left));
fclose($fp);
?>


Yeah.

And now...Animations

 

$("#flash").click(function(){
	$(this).animate({"left": "+=300px"}, "slow");
	$(this).hide("explode", { pieces: 32 },1000);     
});	

$("#flash").draggable();

 

Click me

A little secret...

  • I have used exactly 0% HTML5 so far.
  • There is some cool stuff though...
  • Like the canvas element
  • which can be used for drawings

Like this:


Or videos

Helpful links



Practice makes you better.