Html5 is the all new package of mark up languages introduced by the W3C (World Wide Web consortium) for the purpose of presenting data on the internet.Html4.0 or Html 1.0 has been used for more than a decade now, the quest for better markup language began to meet the onslaught of a whole new breed of web applications.HTML5 has the following highlights-
- Latest semantic markup elements like date pickers and range sliders come with HTML5
- HTML5 deliberately overrides the use of plug-ins. The earlier version makes use of additional plug-ins such as flash/JS Kludges to run video, audio, form validation and animated graphics. HTML5 automatically supports inclusion of such files into the webpage.
- HTML5 is backward compatible, the new mark up features and API s introduced can automatically be integrated into the content.
- This is better suited to writing dynamic web applications than the earlier HTML versions.
The following are some popular tools and snippets used in HTML5 for creation of better innovative web applications-
Some effective HTML5 tools for web designers–
1) Sprite Box-Compressing images enhances the loading time and also the increases the speed of your image transactions. This WYSIWYG tool helps you design images into “sprites” or compressed ones.
2) Video Voting and popular Bar- This tool allows you to gather feedback on your videos. All that needs to be done is a click on the video and use the spacebar to submit a video.
3) Apps for creation of mockups and wireframes-This is an html app which is used to create UI Concepts and prototypes, built on fairly open standards so as to provide the best experience on the browser.
4) Speakker-This is a cross-browser audio maker tool. This comes in two variations with a wide variety of options for customization. All this is in a few lines of Java script and a quantum CSS!
5) Text editor-WYSIHTML5 is a rich text editor tool which uses an advanced security concept and attempts to generate a fully complaint HTML mark up content with easy to maintain tags and inline styles.
6) Font testing tool-This bookmark allows you to view any web page in a new font without having to change anything in HTML/CSS codes.
7) Create- This is a web editing interface which is designed to provide a modern, fully browser based HTML5 environment to manage content. This tool adapts to any kind of content management backend.
Popular Snippets used in HTML5
1) URL and email input type- This allows you to write a more semantically correct code and is mobile friendly. Likewise with the email attribute as well.
2) The basic HTML5 page template-This code snippet has the much required doctype tag along with additional header scripts. It makes a reference to an external page styles.css for the style sheet designs; this can further be updated to anything.
3) Form validation- Prior to HTML5 when forms were used on wesbites, Java script was used to create font side validation. With this snippet you can define a regular expression pattern to validate the data.
4) CSS Browser resets-Each web browser defines its own standard rules for styling documents .Web designers would prefer to remove the preset values so that browsers render each website in the same way, this snippet helps you perform just that.
5) Context menus- This snippet allows you to add elements to the contextual menu that appears upon right-clicking somewhere on the web-page.
6) Font Normalization- To overcome the differences in font between the operating system and browser, this snippet allows you to size the fonts in such a way that size and line height is regularized across platforms.
7) Web-kit font smoothening- This is basically an anti-aliasing for web-kit browsers currently available only in Mac OSX. The purpose is to make the text render better making it more readable avoiding all the text thinning hack seen earlier.
8) Force scroll-bar-In cases where the pages are smaller than the browser-view port; also when you load a page on the same site which does not have content and uses a scroll bar, this snippet comes to your rescue. A scroll bar is forced no matter the height of content by this snippet thus resolving this tiny but annoying issue.
9) Video player with flash fallback-One of the greatest benefits of HTML5 is its ability to run video files without the help of flash player. Certain older browsers are not HTML5 compatible and hence the fallback option of flash player is enabled by this snippet.
10) IE7 Image re-size- IE7 by default scales down images which makes it look unappealing. This snippet enables a better resizing algorithm which is available in IE7 itself which produces much results with images that almost look as though edited with image editing software.
11) Print styles- Being Print Ready is extremely important of content available on websites. His snippet first uses a CSS media declaration, allows you to include it in the main style sheet thus avoiding having to place another link in the head of the document. This has a positive effect on the load time of the website.
12) G-Zip Compression- This .htaccess snippet allows us to drastically reduce file sizes.
13) Meta-tags for responsive layouts-the Meta viewport tag is the only one which is being used for responsive web layouts. This enables functionality in smart phones which render websites in full-view and allow users to zoom in without glitches.
14) Conditional body tag- This snippet allows target of IE Browsers specifically without having to add an extra http request/Style sheet. Basically depending on the browser used a class is added to the body tag .If in case the user is not using IE, a classless tag is used which allows you to target specific browsers in the CSS without use of hacks etc.
15) Hidden elements and auto completion- the data list element using HTML5 allows you to draw up a list of data to auto complete a given field. Useful indeed! Hidden elements also allow you to hide a specific element as it is done using CSS.
16) Faster page load hack- This is used to accelerate the performance of the website. In the case of use of a particular conditional comment, it goes ahead and blocks further download until the CSS sheets are completely downloaded and run. This increases your page load time. To resolve this entry of an empty conditional comment is loaded into the code before any CSS usage.
17) Optimized Google analytics- This is a very popular tool to track a website s behavior and site visits. This is a modified version of Google s snippet.
18) Formatting of quoted code- This enables text wrap when it reaches the walls of the container. In this case the snippet also helps preserve the line breaks and the white space cross browser.
19) Label Alignment- This snippet brings about consistency across browsers in terms of alignment of labels with their relevant inputs.
20) Clickable Inputs- By default most browsers don’t apply the pointer cursor to some clickable inputs listed in the webpage. This snippet resolves this issue by making them clickable.
21) Screen reader Access- By use of this snippet, the usability of the website by allowing it to link outlines for both screen readers tabbing through links and mouse users.
22) J-Query loading fallback-The simple objective of this snippet is to merely check if J-query is loaded from Google if not the same is loaded locally from this version. This is an effective fall back option.
23) Device Orientation- This consists of two CSS media queries which may be used for website development. With the advent of smart phones, tablets and mobiles this snippet facilitates use of different styles for each.
24) Expiry date for cache file-types- Usually when our files are cached on the users machines; we may require mentioning the duration of their stay there depending our changes to it. This snippet provides the time frame for some basic file types; these however can be customized for our own site.
HTML5 is the rules the roost in the world of internet technology today. It is here to stay and is the most effective way to put content out there to the user. The listed tools and snippets for the HTML5 code are all out to construct the best website for your business.
