Monday, 22 November 2010

HTML 5 & CSS 3 Elements: Easy Transformations & Animations, No Plugins & Canvas Function (Part 3)

This article comprises of a number of different articles revolving around HTML 5 & CSS 3. This is the forth in the series, including the introduction. The previous piece of writing was entitled: ‘HTML 5 & CSS 3 Elements: Forms, Web Sockets, Offline Access & Geo-location (Part 2).’ If you are new to this topic or would like a brief overview of the subject it is advised to skim through the introduction that accompanies this collection.

HTML 5 and CSS 3 have introduced many new features that will enhance our online experience; they will also improve the productivity and efficiency of web developers and designers.This article looks at easy transformation and animations, the lack of plugins and the canvas.

Easy Transformations and Animations

Tasks like writing JavaScript for simple animations will now require much less time. More onsite functionality and interactivity is possible. Old JavaScript would require writing of excessive code for a movement onscreen. It would have to be written like this: move object to ‘x’ and wait for 2secs then move to ‘y’ for a time and so on. The new CSS3 transition rules for margin, position and movement make animations easy. You could state you wanted an object move from ‘x’ to ‘y’ over the course of 15 seconds and only to do so once triggered by a user’s mouse.

No Plugins

No third party applications are required for multi-media within HTML 5. At times it can seem we need a new player to view or listen to every other file we might download or view onsite. The audio and video elements of HTML 5 make as easy to embed a video into a webpage as it is to add an image to a page these days. Absolutely no plugins will be required. HTML 4 was designed with images and text in mind whereas its successor is more adapted to the multi-media web.

The Canvas Function

This feature will allow native drawing functionality on the web. This HTML element is plugin free and allows for 2D drawing. This application programme interface will allow users to dynamically generate and render graphics, charts, images and animations. The canvas feature will allow the user to draw directly into the browser window using JavaScript. Ie. A bar chart in response to a users input. This feature has great potential in significantly changing how we interact with everyday websites. Future website could be more like an organic growth made up by the users and guided by the domain owner.

No comments:

Post a Comment