Today we have a collection of some incredible and impressive HTML5 canvas and java-script experiments. Enjoy!
Unless you have been living under a rock you will have heard about HTML5. It’s just everywhere now, thanks to the promotion of the Apple CEO ex-CEO Steve Jobs and certain developers who believe that HTML5 can take over Flash.
Well, in fact we don’t see this situation happened yet, but HTML5 is really magical in reference to its video capabilities, canvas illustration and animation which work really well and smooth. The fact is that it’s so promising that projects are popping up all over the places that have been made as a way of testing the boundaries of HTML5.
Believe its power or not, we will be showcasing you 15 enlightening experiments which make the best use of HTML5, and guess what, you can experience gravity, music-based animation, and rendering of creatures that just works like creatures! Have a fun time with them and oops, they’re best served with the latest version of Mozilla Firefox and Google Chrome.
Just in case you’re not satisfied with these HTML5 fun, we have more for you!
A collaborative effort between artist Mark Ferrari and coder Joseph Huckaby, this is a gorgeous collection of moving nature scenes such as forests in winter, seascapes and stormy mountains. They are relaxing to look at and really stunning, with sounds attached to the pictures. If you want a little time to relax from work you can go through these pictures and feel your tension just melt away.
Another one by the amazing Mr Doob, this one is less interactive than the first but still cool. It gives a basic copy of Google’s main search page. But when you point your cursor the whole page begins to ‘fall’ until all of them crash at the bottom. The Google logo works as an active link that refreshes the page. A good game for those great companies which hates Google, may be.
Made by Kenneth Jorgenson, this might be the only place you can see the phrase ‘Refresh for more delicious trees :)’. It is exactly what it says: you click on the website and it takes you to a white background. A black ink drawing of a tree will begin to ‘grow’ while counting on how many branches are in progress. You can refresh to see as many times as you wish.
This is another fun and addictive one for you to enjoy. You basically start out with a couple of ‘magnets’ that can be dragged around the screen. Particles of light orbit around them and if you shift positions you can change the shapes they make. If you want more magnets and particles you just double click and drag them to where you want them. Yes, it’s all about magnets and physics!
Want to see a visual representation of how much television celebrities earn per episode? This is a cool little graph that shows stacks of color bars which represents how much a specific celebrity makes per taping of a television show (or made, in cases like Charlie Sheen). It was made as one of many projects and experiments by Daniel Rapp.
Paul Truong made this interesting application that allows you to paint using a constantly moving, multi-colored ribbon across the screen. It makes shapes and designs, and the effect is quite pretty. All you have to do is to drag it across the screen, talking about simplicity eh.
Here comes a cool demo using the revolutionizing WebGL (Web-based Graphics Library), which is best served with Google Chrome. With the demo, you can draw on the water to make ripples, or drag the sphere to move it around and press some keyboard keys to set the light direction and toggle gravity, all for witness how the moved object interacts lively with the environment, scarily realistic.
Yet another stunning demo applying the magic of WebGL, which you can see a group of extremely beautiful and most importantly, lively jellyfish moving in the water, irradiated by the ray of dreamlike sunlight. Witness the period that HTML5 and WebGL brings web to life, best viewed with Google Chrome.
Voxel rain means multi-colored 3D boxes descends to form a rotating big block. It’s like showcasing the possibilities of computer in 1990s, and now it comes to web browser by utilizing the power of HTML5, the brightest era of internet is not more far.
Often we web designer wonder how much possibilities HTML5 can really helps us to breakthrough in web typography, and this demo gives you the answer, more than ever! You can choose to witness stereoscopic effect, neon effect, or even moving neon effect, the future of web typography is in the hand of HTML5.
I just can’t hold the glory of HTML5, it’s spinning, it’s rotating… it’s cool.
Bored of HTML5-based 2D sketching service? Check this out. Simply draw a line, and press Space then drag left or right, and you will see your drawing rotating in 3D perspective. 3D sketching is not more complicated with HTML5.
Mta.me Conductor inspires you by spawning points that will move continually to form lines, and when the lines “collide” to each other they will triggered some interaction. All to prove that HTML5 is not just about code but interaction, and that’s what web users really care for.
An interesting shooter type game but the hero is Gmail, free it from the evils! Just like the classic shooter game, you got the life, score, and the almighty laser beam. Probably one of the potential demos to showcase the capabilities of HTML5 doing as a game. Watch out, Flash.
This is such an addictive game that it should be illegal. Seriously, once you sign into one of their servers you will want to play for hours. You are basically flying around shooting things while avoiding getting shot by other players. It is simple and so fun to play, and the fact that it allows for a multiplayer experience is a serious plus that puts it above Flash games that are so popular right now.
Contact form is deadly essential for any website, as it acts as a messenger which passes the opinion or enquiries of visitors to webmaster. There have been countless contact forms on the web but unfortunately most of them do not explain to you the inner working parts, so here comes a detailed tutorial to teach you to build an advanced contact form from scratch based on the pop technology, HTML5 and CSS3.
Considering the nature of a web-based e-mail contact form we are also required to dive into two separate application fields, which is the PHP backend code for sending email and jQuery functions for rich user interface. By the end we will be left with a fully dynamic and functional contact form written with later customization in mind.
Get started now to build your own advanced contact form!
Shortcut to:
To get started you’ll need some type of web server to work over. If you’re running a Windows machine WAMP is probably your best option. Mac users have a similar program named MAMP which is just as easy to install.
These packages will set up a local server on your machine with full access to PHP. Alternatively if you own server space or have full server access into a remote location you may use that instead. We are not going to need any MySQL databases, which should simplify things a bit.
Once your server is set up create a new folder to house the application. You can name this whatever you’d like as it isn’t detrimental or even related to the final product. The folder structure will be used when you access your files in a web browser. A simple example would be http://localhost/ajaxcontact/contact.php
We will only be working within 2 core files. We’ll first need a core .php file to house not only our application logic, but also frontend HTML markup. Below is sample code taken from our starting file.
<!DOCTYPE html> <html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en"> <head> <title>HTML5/CSS Ajax Contact Form with jQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> </head>
To begin we have written a simple heading section to our document. This includes a general Doctype declaration for HTML5 and some HTML/XML document elements. These aren’t exactly required, but will ease the rendering process in older (and newer) browsers. Also it never hurts to offer more information.
A bit further down we can see 2 lines right before our closing heading tag. The first includes our jQuery script from the online Google Code Repository. This is required for our dynamic page errors to work. Directly below this we have the inclusion of a basic CSS document containing all of our page styles.
Inside our document body we have a few containing divisions withholding a main contact form. This houses 3 input elements for the user’s name, e-mail address, and personal message. The HTML markup is fairly standard and shouldn’t boggle the mind of any intermediate developer.
<!-- @begin contact -->
<div id="contact" class="section">
<div class="container content">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<p class="info">Your email was sent. Huzzah!</p>
<?php } else { ?>
Here we have a basic PHP conditional code nested within a few page containers. This checks for the set value of a variable named $emailSent and if equal to true, it will display a success message.
The else statement is what will run on first page load since there won’t be any content to send initially. Inside here we will include a brief collection of form elements and a submit button.
<div id="contact-form">
<?php if(isset($hasError) || isset($captchaError) ) { ?>
<p class="alert">Error submitting the form</p>
<?php } ?>
<form id="contact-us" action="contact.php" method="post">
<div class="formblock">
<label class="screen-reader-text">Name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" />
<?php if($nameError != '') { ?>
<br /><span class="error"><?php echo $nameError;?></span>
<?php } ?>
</div>
<div class="formblock">
<label class="screen-reader-text">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" />
<?php if($emailError != '') { ?>
<br /><span class="error"><?php echo $emailError;?></span>
<?php } ?>
</div>
<div class="formblock">
<label class="screen-reader-text">Message</label>
<textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<br /><span class="error"><?php echo $commentError;?></span>
<?php } ?>
</div>
<button name="submit" type="submit" class="subbutton">Send us Mail!</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
</div>
<?php } ?>
</div>
</div><!-- End #contact -->
You may have noticed there is another conditional block directly after the starting form. This checks for a variable named $hasError and will display an error message upon confirmation. This fallback method is only used if JavaScript is disabled in the browser and thus can’t generate dynamic errors.
All the way down we can find individual PHP variables being checked. The statements are regulating if the form has already been submitted with only partial amounts of data filled in. This is another fallback system which displays the contents of fields already filled out – a nice trick for proper user experience!
Directly after our form completion is the few jQuery functions we’ve written. We will talk over these first since they are the default implementation on pageload. However if the browser doesn’t accept JavaScript then by default we can rely on our PHP code.
The easiest way to get started talking on this topic would be to dive right in. I’ll break down individual blocks line-by-line so you can see what the script is actually checking for.
However if you get lost just review the project code files. All of the full blocks are pre-written and well documented in the jQuery website. To get started we open our code similar to any other:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
$('form#contact-us').submit(function() {
The first few lines are checking for specific event occurrences. After our CDATA comments to hide the code from older, buggy browsers we get started checking for ready events.
The first bit checks if the document has fully loaded and is ready for manipulation. This is a classic technique and the easiest way to start coding a jQuery project.
Once inside we are checking for a form element under the ID "contact-us", and we want to know when it is submitted. Upon doing so we call another function to display our error messages or slideUp() upon success.
$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
$(this).addClass('inputError');
hasError = true;
}
}
});
First we remove any pre-existing errors so we don’t hold any previous messages from before. A few lines down we can see a selector for all elements under the class “requiredField“. These are all of our required field elements – name, e-mail, and message.
jQuery will take the value of each field and remove all spaces from the value. If the content is equal to nothing, then we display an error message next to that field warning our user to fill in some value. Right before the end of our logic there is a bit of Regex code validating the e-mail value.
Lastly we can see if no error is set and check for full input content. If this is the case we call a jQuery method named post(). This will submit our form and check within the PHP code for any errors. Assuming none are found the slideUp() animation is called to hide our contact form and display a “success!” message.
if(!hasError) {
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contact-us').slideUp("fast", function() {
$(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
});
});
}
return false;
});
});
//-->!]]>
</script>
If you are familiar with callbacks you may notice the post() function has a built-in set of parameters. Callbacks are smaller functions which are called upon the response of data from another function.
So for example, when our jQuery.post() function successfully shoots an e-mail it will call its own internal function to display the sliding animation. All of this code could be written in its own block and moved elsewhere. However for the sake of this tutorial it’s much easier writing the callback as an inline function.
The final hurdle to mention is the logic behind our PHP processor. This is the backend system which will actually call a mail function and send out the message. All of the code used in the examples below can be found directly at the top of our main .php file, before any HTML output.
There are also a few internal styles which freshen up the page. There isn’t anything specifically new here so we won’t be going into any of the details. However the styles.css document is included within the project code and contains rudimentary CSS3 techniques.
<?php
//If the form is submitted
if(isset($_POST['submitted'])) {
To start we open our PHP clause and check if the form was even submitted. The POST variable “submitted” was actually a hidden input field added at the very end of our form. It’s a useful way to check if the user has submitted anything yet so we don’t waste server resources.
After this we have 3 separate if/else statement checking to see if each input field has been filled out. I won’t include each bit of logic here since they are all very repetitive in nature. However, to give you a brief example I’ve included the e-mail verification clause below:
// need valid email
if(trim($_POST['email']) === '') {
$emailError = 'Forgot to enter in your e-mail address.';
$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
PHP will trim all whitespace from the value and check to see if anything is left over. If so we have a detailed Regular Expression (Regex) to see if our user’s input string matches up with an e-mail pattern.
You certainly don’t need to understand how preg_match() works to build this script. It is a useful function to determine rules and requirements for a successful type of data, but commands advanced programming knowledge to really grasp. In this scenario we are ensuring the user only inputs a select few characters, includes an @ symbol followed by 2-4 characters representing a Top-Level Domain.
After all of our logic passes and we return no errors it’s time to send our message! This bit of code will set individual variables to customize our e-mail message and setup some mail headers for the process.
// upon no failure errors let's email now!
if(!isset($hasError)) {
$emailTo = 'youremailhere@googlemail.com';
$subject = 'Submitted message from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
// set our boolean completion value to TRUE
$emailSent = true;
}
If you were wondering how the code was going to figure out your e-mail address, this is the part to fill in. The first variable in our set is titled $emailTo and should contain whichever e-mail address, which is going to receive the message.
Inside our $body variable we take advantage of the \n delimiter to add new lines into the message. This adds small placements for the sender’s name, e-mail address, followed by a break for their message content. Of course you could spend time prettying up the display, but this structure works just fine.
This closes our tutorial for an advanced contact form. If you’d like to style your elements in relation to mine you can check out my example styles.css within the project code. However, the page is structured well enough that you could design your own look & feel very easily.
Feel free to download the source code and examine what I’ve done a bit closer. It’s good to follow a tutorial but having direct access to the project source can be invaluable. I’ve also included a brief stylesheet to make customizations a breeze, thanks for your view!
HTML5 and CSS3 expanded the possibilities of web design. There are lots of designers and developers who started practicing HTML5 and implementing it in their web designs. In this roundup we have featured 30 useful HTML5 tutorials that will definitely help developers increase their skills..
HTML5, rumored as Flash killer, is a brand new web technology that raises a revolution lead by Apple in web application development. It contains canvas element for images and animation drawings, support video and audio embedding, and includes storage database for offline web applications. Most important of all, you don’t need a plugin to get all these features, your latest browser supports that.
Sounds pretty cool, but what HTML5 can do actually? Well, this post is going to satisfy your curiosity about the power of HTML5 by showing you a series of practical HTML5-powered web applications such as drawing application, chart creating application and time management application. So there’s no technical document anymore, let your eyes witness the true potential of HTML5!
Muro is HTML5-based sketching app that works in all modern browsers, and you can dive in and start drawing on a blank canvas, all without Flash or any other plugin. There are several brushes available to everyone, but to access more advanced features, you’ll need a DeviantArt account.
HTML5-based social media dashboard with some great features: geo-location tweet searching, choice between new and old style retweets, connection to Google Analytics, drag and drop editing, custom interface and much more. Perfect online tool for professional brand management.
Something cool and interesting for kids of all sizes. You can submit a drawing of your character and watch it transform into an awesome illustration. Be the next X-world superhero!
HTML5-powered photo editor which is easy to use and surprisingly powerful. Beyond its use of HTML5 (as opposed to Flash, Silverlight or other RIA frameworks), what sets this app apart is that it’s designed to be portable so developers can directly integrate it into their sites or apps.
CSSWarp is online tool that allows you to attach any text to a curved path or a circle, then create warped text with pure CSS and HTML.
Flickr Browser is an unique HTML5 app for browsing Flickr photos with cool approach.
A great app for developers. It makes use of sliders and even a live preview area to generate cross-browser markup.
A HTML5-based calendar web app. Simple and clean interface and useful features for effective time management.
Twimbow is a colorful, HTML5 and CSS3 based Twitter client with a focus on filtering. The interface looks similar to TweetDeck and Seesmic, but its main distinction lies in its colourful interface. You can assign different colours to different users and groups, and also change the colour of tweets by adding a color tag!
Sketchpad by Mugtug is a Pixelmator-like application that has desktop-like tools, colour selection, patterns, swatches and much more.
Cloud Canvas is a free HTML-5 based cloud image editor. This is a fully featured online image editor that allows you to create and save digital media. All content saved will be in PNG and XML format and stored in Google Documents.
Another interesting web app based on HTML5. Basic tools, layers and other features make this app an useful sketching tool online.
This version of Scribd is a Flash and HTML5-based web app that provides in-browser access to all sorts of documents and e-books uploaded by users.
Google Body Browser is a cool web app powered with WebGL for study use. WebGL is a cross-platform low-level 3D graphics API that is designed to bring plugin-free 3D to the web. It uses the HTML5 Canvas element and does not require Flash, Java or other graphical plugins to run.
LucidChart is a great online tool for creating charts and diagrams. It works very fast and smooth, a perfect tool for team collaboration online.
Diagramo is an interactive online application, which allows you to make diagrams and flowcharts from within a web browser. It also allows you to create, edit and share diagrams, organizational charts, network diagrams and graphs. The diagrams can be saved for a lifetime.
Colorzilla has designed this very easy to use CSS3 gradient generator. It uses sliders and color pickers just like Photoshop and is highly recommended.
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.
This grid generator with great design lets you generate a grid framework using simple options and even includes a preview page for you to make sure your grid looks perfect.
