Amazing things you can do in HTML5

Written on 24 November 2011, 07:21pm

Tagged with: , , ,

  1. manipulate the browser history and build awesome asynchronous user interfaces like this one or highly responsive and intuitive interfaces like this one
  2. know the user location and serve him customized content (remember that ‘date single women near [your location]’ ads? :P)
  3. store data in the user browser: more than 4k of data, stored on the client, that persists beyond a page refresh and isn’t transmitted to the server. For example to store the number of the last page read in an online book or to save the settings of an online game between browser restarts
  4. use new input types (like the slider, color picker, date picker, etc) and unload the validation task on the browser
  5. allow the user to take your app offline, edit it, and synchronize it when back online. Example: GMail offline
  6. Play video for everybody
  7. Use the canvas element to draw amazing 3D text or sticky things (try this link on your mobile device, and shake it :))

Yes, you can use all of these features plus many, many more right now. Most of them will gracefully degrade if the browser is too old or simply does not support them.
Now read the list above once again thinking about the implications on the mobile browsing.

Try the following example in your browser.

simple_jstest.cfm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test js length</title>
<style>
#foo {width: 420px; height:70px; font-size:12px;}
#sbmt_btn {font-size:12px;}
</style>
</head>

<body>

<cfset str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque bibendum tristique dignissim.">

<cfoutput>
String Length=#len(str)# characters

<form action="##" name="form1" id="form1" method="post" onsubmit="myfunc()">
	<textarea name="foo" id="foo" cols="30" rows="3">#str#</textarea> <br />
	<button type="submit" name="sbmt_btn" id="sbmt_btn">Submit</button>
</form>
</cfoutput>
		
<script type="text/javascript">
function myfunc()
{
	var myval = document.getElementById('foo').value;
	alert(myval.length);
}
</script>

</body>
</html>

(more…)