What you can do with HTML 5 and Canvas

HTML 5 is becoming more and more popular. This stems from the controversy over the late Steve Jobs objecting to using Flash technology, explaining that it is outdated, and HTML 5 is the future. While this is still debatable, HTML 5 has some huge backing by some major companies. Companies like Google, Apple, and Mozilla. HTML 5 brings new tags along such as header, footer, article, video, and audio. 

This allows for proper segmentation and effective indexing with the search engines, as well as makes web design much easier to do. Maybe the most talked about and the least understood tag is the canvas tag. The canvas tag was originally introduced by Apple back in 2004, and has slowly gained popularity over the past 7 years. Now, all of the major browsers support the canvas tag, not to mention the immense amount of mobile users that are able to see the canvas tag on the go. Lets look at what the canvas tag can do.

The canvas tag is defined by an HTML tag, and is then given a specified height and width. Canvas as you might expect is then “drawn” on using JavaScript. By giving your canvas an ID, you can then call upon that in your js file by using “document.getElementByID”. Then from there the possibilities are endless. You can create complex drawings, graphs, logos, and even interactive games. 

Everything is done in 2D, but everything is also a lot simpler than other types of interactive language development, for example Flash. Creating this with just a few lines of code really is a revolutionary idea. Now the average web designer can make interactive designs, without having to outsource certain things, or spend extended amounts of time on one particular item.

This has become very controversial. Another form of drawing graphics known as scalable vector graphics, is creating a buzz for a few reasons. First, many feel that this is what should be used to illustrate your webpages. This is because when SVG graphics are created they are automatically remembered in the document object model. 
Canvas for HTML 5 once something is drawn, the system forgets it is drawn, and if the position needs to be moved, it must be recreated from scratch. While this argument is a valid one, it was done that way for a purpose. This is so interactive games can be made, that can change on the fly, without constant updating depending on the users actions. This is only one of the controversies that have sprung up.

One of the most talked about HTML 5 wars is between HTML 5 and Flash. Flash has been said to be out dated, and no linger needed to be used. While some big names are saying this, it is currently not true, nor will it be in the foreseeable future. The problem is canvas, although easier to code, does not perform as well on all levels. Flash consistently outperforms canvas in speed, smoothness, and CPU usage. 

The one thing that the canvas has one Flash as of right now is the fact that it is by far easier to index what is going on when the web page is loaded. That and of course it is easier to code. HTML 5 and canvas is not supported by IE 8, and although there is another version of Internet Explorer out, many have not made the update. Fortunately there are some Mozilla plugins that can act in an equivalent manner. Flash and Canvas are often used together with a browser detection script, and then subsequently running appropriate code depending on your supporting browser.

Canvas and HTML 5 have an uncertain future at this point in time. While canvas is very popular, easy to do, and works great – it is not getting the highest satisfaction rate among computer nerds. Many people like SVG, and still many others like Flash. HTML 5 certainly has some great aspects, including canvas, and it has a great start to becoming web standard. However, there is a lot of room for improvement, and in the near future this needs to be done. 

The CPU usages for canvas are by far too high, and they need to be trimmed down dramitcally. On top of that, Flash can make graphic that look a lot nicer. Canvas can’t quite compete with Flash, but trust me people are working on that every day. HTML 5’s canvas has some key advantages. Ease of use, indexability, and they are backed by some major companies. The future of HTML 5 and canvas is unclear, but it sure is bright.

This article was written by Ben Anderson. Ben likes to blog about web design, HTML 5, and the future of the web. He has an interesting perspective because not only does he understand web design but also incorporates SEO tactics like White Hat link building services.

HTML5 Outliner – Check the outlines of your markup

HTML5 outliner is a small tool that helps you check the outline of your HTML5 markup to get an overview of your document. Given the new contextual tags in the latest iteration of the markup language, it can sometimes get confusing to visualize the final outcome of your code.

That’s where the HTML5 outliner comes in handy. Simply paste in your code, point it to a URL or upload a file  and it will give you an outline of what your site will look like. If you are a web designer / developer, the HTML5 outliner is yet another tool to have in your toolkit.

Swiffy- Convert Flash files to HTML5

Swiffy is a small tool from Google that converts Flash files to HTML5 for use on non Flash player devices.You can upload SWF file and Swiffy will convert it to HTML5 file which can be displayed on all modern browsers “with a high level of SVG support such as Chrome and Safari.”
Swiffy is available on Google Code is currently more an experimental thus cannot covert all Flash files but does great with ads and animations. There are examples of SWF converted files available on the project’s page. 
This is very important move on the part of Google to wean the web off the proprietary Flash format. It will also be interesting to see what Apple- an avowed Flash critic- thinks of this move from a fierce competitor.

HTML5 demos for newbies

One of the most used words in the web development circles today is HTML5. It is said to be the next milestone in the web page scripting language HTML.
If you are at a loss about what all the buzz is about, then check out this HTML5 demo site to see what the next generation scripting language will come with. It features the various functions that HTML5 will be expected to perform along with the browsers that are compatible with any given feature. 
Give it a try for yourself and get to know what is coming in the next web language. This site was built by @rem.