Today's Question:  What does your personal desk look like?        GIVE A SHOUT

Tips, Tricks and Tools You Will Need to Start Using HTML5 Today

  Kevin Liew        2011-10-10 05:28:53       2,615        0    

Introduction

HTML5 has been a really hot topic in web development. With the support of most modern browsers available (Safari, chrome, firefox, IE10 and mobile devices), even though the specification has not fully completed yet, but many people have already adopted it as the main technology for all the web development projects. Online giant websites such as Google, facebook, twitter and youtube, they are all built in HTML5!

For me, the most exciting features of HTML5 are the canvas and the robust form capabilities. Canvas experiment can be seen all over the places (not IE, better with Chrome) but for the form elements, they aren't well supported yet. However, as a late adopter, I can see now is the time to pick up HTML5 and start to update myself with the latest implementation of the specifications.

So, I made this post, for myself as a research and for you all who want to learn it as well. I will make a second series about HTML5 next week about references and tutorials. Stay tuned!

HTML5 Support Charts

Before you start, you might want to know the supported feature by most modern browser as well as mobile platform too.

Enable HTML5 tags!

Older version of IE can't recognise the new html elements. However, they are already a few of javascript or css solution to fix that weakness.

  • HTML5Shiv: This script makes IE to recognise and style the HTML5 elements.
  • HTML5 Enabler: Similar to HTML5Shiv, HTML5 Enabler gets IE to acknowledge the new elements in HTML5.
  • Modernizr: Modernrizr allows us to take the advantage of the new capabilities of HTML5 and CSS3.
  • HTML5 Reset: This one is something different from the rest. It comes with folder structure and files ready for you to start a new project. For HTML5 and CSS3 support, it uses modernizr.

Javascript Plugins

I have found a range of javascript plugins to compensate the support of HTML5 on some browsers.

  • VideoJS
    VideoJSHTML5 Video player. You get consistent look between browsers. WIth forced fallback to flash features, it will work in all browsers including IE6 and mobile devices.
  • AudioJSAudioJSHTML Audio player. audio.js uses html5 audio element and it has the same main features like VideoJS - consistent layout and fallback to flash if HTML5 is not supported.
  • HTML5WidgetHTML5 WidgetImplements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.
  • Webforms2Webforms2HTMl5 Form Attribute support eg pattern, required, autofocus.
  • LimeJSLimeJSLimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.
  • FlexieJSFlexieJSNot really about HTML5, it's the support for the awesome CSS3 Flexible Box Model.

Online Tools

Also, there are a few HTML5 tools available online to speed up the pace to develop HTML5 websites. I have found a few HTMl5 cheatsheet and online reference as well.

  • HTML5 BoilerplateHTML5 BoilerplateHTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash.
  • Switch to HTML5Switch to HTML5Useful online tool that generates the HTML5 document structure according to your preference.
  • InitializrInitializrInitializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate above.
  • HTML5 Visual CheatsheetHTML5 Visual Cheatsheet
  • HTML5 Canvas CheatsheetHTML5 Canvas Cheatsheet
  • HTML5 PocketBookHTML5 PocketBook

One More Thing...

You can keep track of HTML5 update via this link

And, HTML5 websites inspiration. This HTML gallery consists all the websites made with HTML5.

Next week, we will be talking about HTML5 tutorials and references online. Stay tuned!

Source : http://www.queness.com/post/9375/tips-tricks-and-tools-you-will-need-to-start-using-html5-today

HTML5  WEB DEVELOPMENT  TOOLS  TRICKS  TIPS 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.