HTML5 Apps: 10 Cool HTML 5 Web Apps

HTML5 apps are quite possibly the future of the web. Instead of relying on local desktop applications for tasks such as calendar management, code generation or photograph editing, HTML5 allows for developers to create applications that run within the browser. These HTML5 web apps have a variety of possible functionality, and it’s not even fully known what the possibilities for HTML5 apps are.

In this post, I’ve gathered up 10 cool HTML5 apps that will show you just a bit of the power of HTML5, and perhaps inspire you to develop your own HTML5 web apps.

If you like our collection of HTML5 apps and want to check out more HTML5 resources, these posts will interest you:

Enjoy playing around with these HTML5 apps.

Twimbow

Twimbow is a web application that helps any social media user to engage their network of friends more effectively, by organizing and enriching their conversations online.

HTML5 Apps

Citicles

Citicles is an experimental HTML5 visualizator that aggregates basic information about a city and displays it in a simple circle design. Each circle encloses the city’s population, temperature, time, elevation, latitude and longitude.

HTML5 Apps

Scribd

Scribd is the world’s largest social reading and publishing company. We’ve made it easy to share and discover entertaining, informative and original written content across the web and mobile devices. Our vision is to liberate the written word, to connect people with the information and ideas that matter most to them.

HTML5 Apps

 

MugTug Sketchpad

A drawing application in HTML5.

HTML5 Apps

Aviary

Aviary is a pioneering and leading provider of creative tools for web and mobile.

HTML5 Apps

HootSuite

HootSuite is a Twitter and social media messaging application.

HTML5 Apps

FlickrBrowser

FlickrBrowser is an HTML5 web app for viewing Flickr photos and galleries.

HTML5 Apps

Coolendar

Coolendar is an HTML5 web calendar that goes anywhere on any device and allows you to manage your tasks and days.

HTML5 Apps

Google Body

Google Body is a detailed 3D model of the human body. You can peel back anatomical layers, zoom in, and navigate to parts that interest you. Click to identify anatomy, or search for muscles, organs, bones and more.

HTML5 Apps

CSS3 Maker

CSS3 Maker is a way to create CSS3 code by using a visual designer, all done in HTML5.

HTML5 Apps

UCEMag Scarlet Fever

UCE is a 100% digital “next-generation” magazine dedicated to Fashion, Design and Culture, created using HTML5.

HTML5 Apps

 

original link: http://creativefan.com/html5-apps/

JQuery Html5 Video Player

jquery html5 video player

LIVE PREVIEW | SCREENSHOTS

This is a fantastic HTML5 video player based on jQuery JavaScript Library. This script doesn’t require any extra Browser Plugins to display HTML5 videos. It features a beautiful and unified UI on all desktop browsers and supports fullscreen in Window Mode.

Features

Only 8KB footprint
Unified control UI for all desktop browsers
Supports modern browsers
No browser plugins required
Fully operated in JavaScript
Supports Fullscreen mode (window mode)
Can seek to any point in movie
Shows buffer status
Works on iPad, iPhone and iPod touch
Supports auto start
Supports video preloading
Supports loop video
Shows friendly message for older browsers

Browser Support

Firefox 3.6+
Chrome 4+
Opera 10.5+
Safari 4.0.4+
iPad Safari (native UI) iPhone Safari (native UI)
iPod Touch Safari (native UI)

Example Codes:

	
jQuery("#video_player").H5Video({
	source : {
		"video/ogg"  : "videos/mymovie.ogg",
		"video/mp4"  : "videos/mymovie.m4v",
		"video/webm" : "videos/mymovie.webm"
	},
	animationDuration : 350,
	loop              : false,			
	preload           : true,
	autoPlay          : false,			
	poster            : "images/poster.jpg",			
	supportMessage    : "This browser doesn't support HTML5 videos.",
	events : {
		pause : function()
		{
			writeMessage("Paused video");
		},
		play : function()
		{
			writeMessage("Playing video");
		},
		end : function()
		{
			writeMessage("End of video");
		}
	}
});

DOWNLOAD THIS CODE
[Read more...]

Menu with Submenu with Only CSS

This is an Example of menu with submenu.
This was made only with CSS and have support in IE7+

An Blank Html5 Template

This is an example about HTML5 Template:

 <!DOCTYPE html>
 <html>
 <head>
 <title>HTML5 template</title>
 <metacharset  =  "utf-8"/> 

 <scripttype  =  "text/javascript">
  document.createElement('header');
  document.createElement('menu');
  document.createElement('content');
  document.createElement('footer');
 </script> 

 <style type="text/css">
  * {
margin:0  ;
padding:0  ;
  } 

  header, menu, content, footer {
display:block  ;
  } 

  menu ul {
list-style-type:none  ;
  } 

  menu ul li {
float:left  ;
padding:5px20px  ;
  } 

  content, footer {
clear:both  ;
  }
 </style>
 </head>
 <body>
 <header>
  <h1>A Blank HTML5 template</h1>
  <menu>
<ul>
 <li>
  <ahref  =  "http://html5snippets.com"title  =  "snippets">HTML5 snippets</a>
 </li>
 <li>
  <ahref  =  "http://charlesdagley.cz.cc/"title  =  "Portfolio">Dagley Designs</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
 <li>
  <ahref  =  "link"title  =  "link">link</a>
 </li>
</ul>
  </menu>
 </header> 

 <content>
  <h2>This is our content area</h2>
  <p>This is just a free html5 blank template</p>
 </content> 

 <footer>
  As found on html5snippets.com---Follow @charlesdagley
 </footer>
 </body>
 </html>

DEMO | DOWNLOAD

Rubber ball follows mouse cursor

Here is code rubber ball, it follows mouse cursor when you move.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas-Animaci&oacute;n</title>
    
    <script type="text/javascript">
      var x=0; //coordenada x del objeto
      var incx=10; //incremento x 
      var y=0;  //coordenada y del objeto
      var incy=5; //incremental de y
      var mouseX=0;
      var mouseY=0;
      var delay=10;
      var timer=10;
      
      function init(){
          var canvas = document.getElementById('tutorial');
//loop calls dibuja each 20 ms setInterval(dibuja,20); canvas.addEventListener('mousemove', ev_mousemove, false);
} function ev_mousemove (ev) { mouseX = ev.layerX; mouseY = ev.layerY; } function dibuja(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); timer+=1; ctx.fillStyle ="rgba(200,30,10,1)"; ctx.strokeStyle="#000"; delay=20-(mouseY/100); accelX=mouseX-x; accelY=mouseY-y; x+=(accelX)/delay; y+=(accelY)/delay; x+=Math.sin(timer)*accelX/5; y+=Math.sin(timer)*accelY/5; //limpia el canvas ctx.clearRect(0,0,400,400); //dibuja linea ctx.beginPath(); ctx.moveTo(200,400); ctx.lineTo(x,y); ctx.stroke(); //dibuja el circulo ctx.beginPath(); ctx.arc(x,y,50,0,Math.PI*2,true); ctx.fill(); // ctx.translate((200-mouseX)/100,0);
} } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="init();"> <canvas id="tutorial" width="400" height="400"></canvas> </body> </html>

DEMO:

Ping your blog, website, or RSS feed for Free Sitetag