OverviewHTML 5 is being touted as the future of web-development for some time now. The rise of HTML 5 has caused many battles with other web technologies. Most notable rival is Adobe and their Flash platform. Flash has been used in many web projects since it brings dynamic and aesthetically pleasing content to your web-page. This however came at a price of sluggish performance a notable lack of scalability. HTML 5 and it's related technologies are now bringing the same level of dynamic content by extending the already standard HTML. Browsers are still implementing HTML 5 and CSS 3 functions as we speak. The use of engines is being used by browsers as well to enable graphics to be rendered specifically through our GPU (Google Chrome and Safari's Webkit and Mozilla Firefox's Mozilla engine).
As we are seeing more and more of our mobile devices be HTML 5, CSS 3 capable (Mobile Safari on iOS and Chrome on Android) more companies are embracing the new technologies with some even jumping ship from Adobe Flash altogether. The outspoken Apple blatantly showed this is 2010 by issuing a demo reel of HTML 5 and leapt into a heated and humorous debate with Adobe for a few months. More sites are now popping up with developers gearing and getting more and more creative as the tools develop.
Giving It A Try
I took quite a tour of the new available features such as the great new functions of HTML 5 such as the web-storage. Saw some clever web-pages utilizing CSS 3 in a myriad of combinations to produce stunning yet surprising simple and clean results, both in the terms of the coding and in the terms of the user interface. Switching to advanced JavaScript, the demos found at Google Experiments are particularly good (check webpage: ro.me!) and some even quite useful.
Guided by these innovative solutions, I check some tutorials at w3Schools and implemented some of features, starting off with HTML 5 web-storage function. There are two ways of storing data on the client, either on the Local Storage or as a Session Storage. Using the sessionStorage function we can now create a simple output to show how many visits the user has made to the page in the current session. The code is shown below:
A new attribute was given to the "input" tag; the email attribute. This checks matches the entered text with the basic email format of "x@x.x" and outputs an error message if it is not correct, as shown in the image below:
Another well-requested feature, especially by web-designers is the ability to round your borders (this could previously be done by some well-placed images posing as your "border"). Now, in CSS3, by simply specifying your border-radius, you will get a rounded bordered box, shown in the code below:
Animations will catch anyone's eye and as we can now start to deviate from Flash through the use of CSS3 2D & 3D Transformations and Animations. I experimented with a few of them and got to grips with rotation, translation, scaling and skewing transformations as well as defining keyFrames for the stages of an animation. The code is shown below:
I grouped my experimentation together into a single page that uses HTML5, CSS3 and JavaScript that will:
- display the visit counter for this session and animate it to move left and right and back
- show a form with rounded borders that will include an email and a password field
- display a box with text, on which when the mouse is hovered, the box is spinned 360 degrees and changed in size, while having the text being resized accordingly
Concluding With The Same Old Cross-Browser Issues
Not all browsers support everything right now, and as I discovered while coding, you need to specifically call their respective toolkits for some of the code to work. The images below show the webpage in different browsers to highlight the differences between them.
No comments:
Post a Comment