GDG Benin

GDG Benin is a community of social developers engaged in innovative and open technologies

Tuesday 26 April 2016

Cool HTML5 Design Features

No comments :
In anticipation of our up coming HTML5 essentials class, we'll be taking a sneak peak into some cool HTML5 design features...


I won’t get into the technical aspects of HTML5 (mostly because I don’t have a real firm grasp of them) other than to say it is less complicated and more flexible than HTML4. My interest in HTML5 is the design possibilities that it offers. There are already many sites that implement elements of HTML5 but, unfortunately, not all browsers support it…yet.The examples referenced in this post should be viewed in the latest versions of Safari, Firefox, Chrome or Opera.
Canvas
HTML5’s canvas element, in combination with JavaScript (another language), allows you to produce some amazing, interactive animation. One of the advantages over Flash is that the animations are editable, instead of being locked up in a proprietary piece of software. The possibilities for this element are limitless: from simple 2D animations that tell a story, to complex online applications such as image editing. There are some great examples of HTML5-based animation athongkiat.com.
Drag and Drop
HTML5’s built-in drag and drop element has some interesting applications, especially for e-commerces sites, image sharing sites like Flickr and online applications (a la Google Docs). The drag and drop demos at html5demos.com (below left) and net.tutsplus.comdemonstrate some of the possibilites of this native HTML5 element.
Video and Audio Embedding
You may be thinking, “What’s the big deal? I can already watch video on the web.” HTML5 allows video to be embedded without having to use the proprietary Flash player. Flash is a resource hog and can really slow down browser performance. You may have heard of Apple’s CEO Steve Jobs refusing to support Flash on the iPhone and iPad. Apple, among other hardware/software manufacturers, is driving a movement towards broad implementation of HTML5 so their products can serve up video without straining the operating system or needlessly draining battery power.

SVG

Scalable Vector Graphics (SVG) is a language for describing 2-dimensional graphics. Rather than creating graphics in a separate program such as Photoshop or Illustrator, saving them in JPG, GIF and PNG format, and bringing them into HTML, SVG images can be created directly inside the HTML. Aside from ease of use, SVG images are infinitely scalable since they are created using mathematics instead of pixels. SVG technology has
been around since 1999, but has not had wide-spread browser support until recently. HTML5 supports static as well as animated SVG. That means you could create a video using SVG and scale it up or down while it’s playing, right from the web page. There’s a video here from a developers conference in Australia demonstrating some of these features.
As cool as each element is individually, imagine combining them, such as Canvas and SVG. You could manipulate a group of videos playing in real time, moving them around with your mouse and scaling them or zooming in on a specific element. All without your browser lagging or freezing up.
This is just a sampling of some of the great features in HTML5; for a more complete list, check out html5demos.com.

No comments :

Post a Comment