HTML5 Tutorial – Introduction to SVG, SVG Tooling

imageSVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

The most recent browser versions support most of SVG 1.1.

Continue reading “HTML5 Tutorial – Introduction to SVG, SVG Tooling”

HTML5 Tutorial – HTML Forms Tags


One of the cool features of HTML5 is the support offered in forms. You’ve probably worked with HTML form tag, which is how you collect customer responses and add interactivity to your website. HTML forms interact with scripts to collect data, record information, or simply involve your readers with your web page.

You’ve used input types like text, password, file, hidden, checkbox, radio, submit and button.

But with only those input types, you had to write you own controls for things like a data picker. Your date picker has been a combination of JavaScript and HTML for the user to select a date and insert it into a text.

Continue reading “HTML5 Tutorial – HTML Forms Tags”

HTML5 Tutorial – Drawing on Canvas


The <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering. Canvas provicdes resolution-dependent bitmap canvas, which can be used for rendering images on the fly.

Because not all browsers support Canvas, I’ll use Modernizr to help out. Modernizr will let me know if Canvas is supported, and if not it will allow me to call a polyfill.

Continue reading “HTML5 Tutorial – Drawing on Canvas”

Using Modernizr, Polyfills, YepNope

image_thumb_7F533839Modernizr is a small JavaScript library that you can use for feature detection, browser compatibility using polyfills, and quick JavaScript loading. I’ll take each one in turn.

It detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Once you do the feature detection for your browser, you can then do polyfill.

Continue reading “Using Modernizr, Polyfills, YepNope”

CSS3 Tutorial – Which Style Your Browser Chooses

css3_logoOne of the key features in using Cascading Style Sheets is that you set a style then override it. And you can override just part of the display or all of it. Knowing how a browser chooses and applies your styles is invaluable knowledge.

In the previous post, you learned how you could reset the browser settings. Those settings override the user agent to provide you with a consistent look to start from. The point is that you can override the styles.

Continue reading “CSS3 Tutorial – Which Style Your Browser Chooses”