Deep Dive into “HTML5”

  • Article

How do I develop using Canvas, SVG, CSS3? What’s new in JavaScript? In this deep dive you will learn how to use HTML5 and how new web standards help solve existing challenges on the web. Expect a lot of code, demos, and best practices!

clip_image0015

Covered in the session…

HTML5 Markup

How do you start an HTML5 page? Actually HTML5 is evolutionary, not revolutionary. Any page built yesterday with HTML 4.1 will be an HTML5 page automatically tomorrow. However, the HTML5 specification provides a few optional changes that can simplify your markup. For example, the following code is what I use as a template for my new pages.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title></title>
     <meta charset="utf-8">
 </head>
 <body>
  
 </body>
 </html>

HTML5 also provides a set of new tags (for example, <article>, <nav>, and <figcaption>) that adds more semantic meaning to the content, and helps accessibility tools (such as screen readers) and search engines to better understand the page.

<video>

imageThe <video> tag is probably one of the most interesting (and most discussed) new tags in the HTML5 markup language. It allows you to embed a video on the page without using a plug-in. The samples I provide explain how to use its properties (for example, poster to define the initial frame, or controls to show the control buttons, or preload to set the pre-fetching rules). As we’ve seen, the current specification doesn’t allow the player to go full-screen. If you need this scenario, you can change the size of the control dynamically and bring it on top of the page using the zIndex. Through its events loadedmetadata, canplay, and timeupdate you can monitor when the video is ready to play and track its progress. Lastly, the canPlayType property allows you to test whether the UA supports a specific codec or container; remember, the return values are either “”, “maybe”, or “probably”. Occhiolino

<canvas>

imageDrawing on a page has never been so easy. You have a brush that you can move across the screen to draw images – that’s all you need in order to create amazing drawings or animations! If you are drawing an image, remember to wait for it to be loaded. When you develop an animation, you will need to decide the best strategy to serve your purpose. Use time-based animation if you need a precise, smooth, and predictable result. Use frame-based animation if you need to develop quickly and are comfortable with losing some cycles (timer resolution is not perfect!).

With a little bit of creativity, you can achieve quite interesting scenarios – for instance, drawing a video on a canvas and dynamically appending its mirrored shadow.

             ctx.translate(0, 200);
             ctx.scale(1, -1); // Flip video
  
             // Prepare gradient
             var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
             gradient.addColorStop(0, "rgba(255,255,255,255)");
             gradient.addColorStop(1, "rgba(255,255,255,0)");
             ctx.fillStyle = gradient;
  
             myVideo.addEventListener('canplay', function () {
  
                 setInterval(function () {
                     ctx.drawImage(myVideo, 0, 0, 300, 200); // Draw video frame
                     ctx.fillRect(0, 0, 640, 360); // Draw fading
                 }, 60);
  
             }, false);

imageIf you are looking for a tool to design on canvas or to design prototype animations, check out the AI2Canvas Exporter plug-in built by our own Mike Swanson. You can achieve great results with it – for instance, take a look at what Joshua Davis did!

In this group of demos, you will also find a little game I built on the plane while I was flying to Berlin. I’ll get back to this in a future post.

SVG

imageSVG (Scalable Vector Graphics) adds even more capabilities to what you can achieve with the Canvas. This time you are dealing with objects, which have their own properties, events, and programmability. You can embed your SVG snippets inline in an HTML page (did you know Internet Explorer 9 is the first browser to support this?), or embed in an XHTML document, as well as standalone files or files that are referenced inside an <img> tag.

SVG is intrinsically designed to work with the rest of the standards. You can program it using JavaScript and the APIs that you already know; and you can style it using CSS!

 <body>
  
     <svg xmlns="https://www.w3.org/2000/svg" width="600" height="300">
         <rect width="200" height="300" fill="#009246" />
         <rect width="200" height="300" x="200" fill="#fff" />
         <rect width="200" height="300" x="400" fill="#ce2b37" />
     </svg>
  
 </body>

The last demo (Gradients) is a prototype of SVG+CSS+HTML5+JavaScript in action. Using a few tricks, you can use SVG to build a color gradient dynamically and use CSS properties to apply it to any HTML element on the page. I had some interesting conversations with Jonathan and Robert about this approach – I think it might be interesting to explore it further. eCSStender from Aaron Gustafson seems to be the natural evolution of the prototype; please ping me if you are interested in further exploring this approach with me!

CSS3

image

What about news for web designers? CSS3 brings a lot of new and interesting modules to the table. Of all of them, text/border shadows, colors (rgba, opacity), multiple backgrounds, border radius, media queries, and WOFF are the ones I believe to be the most stable today.

 <style type="text/css" media="screen">
     @font-face
     {
         font-family: '3DumbRegular';
         src: local('☺'), url('WOFF/3Dumb-webfont.woff') format('woff');
         font-weight: normal;
         font-style: normal;
     }
     
     .fontface
     {
         font: 60px/68px '3DumbRegular' , Arial, sans-serif;
         letter-spacing: 0;
     }
 </style>

Run the demo, “1. Media Queries” to understand how CSS allows you to pick specific rules depending on the screen resolution. Plus, you can have some fun with my hand (seriously – that’s my hand, copyright at Giorgio Sardo Pollice in su).

ECMA

Last but not least, JavaScript has some very neat new features for developers! For example, it includes a native JSON object that allows you to accomplish serialization/deserialization operations very quickly, that in the past you probably did with external libraries.

 var result;
 var myArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
  
 //NEW!  forEach
 var multiply = function (value, index, array) { array[index] = value * this };
 /* No Return! */ myArray.forEach(multiply, 3);
 //result= 3, 6, 9, 12, 15, 18, 21, 24, 27, 30

There are a lot of new Array methods that simplify common tasks such as looping through the Array and performing a particular operation. I personally love the ability to do “kind of lambda expression” using forEach().

The object model has also evolved. With the new syntax, Object.create can more easily define new and cleaner prototypes.

Lastly, you finally have access to some helper functions, such as Date.Parse() and String.Trim().

Conclusion

This is not an extensive coverage of all the new features of HTML5 and related web standards. There is much more in the pipeline (Robert talked more about this)! What I covered in this session is probably the most mature content in the specification. It is (or soon will be) available across all the major browsers. It’s interoperable and it doesn’t apply only to Internet Explorer 9…but to any browser. In other words, it’s ready! Caldo

You can download all the source code here. Please feel free to contact me if you have any feedback or questions – I’m sure somebody out there knows how to improve this!