Ironpaper Webintel: Knowledge base for internet business and web development.
Web design Web development HTML5 SEO CSS Content Management
Topic:

HTML 5

HTML 5 Canvas Element

Thursday, June 10th, 2010

HTML 5 will usher in a whole host of new possibilities for developing without  the need for plugins such as Adobe's Flash Player.

Thoughts on plugins like Flash Player
Whether or not Flash is on the way out remains to be seen. There are compelling arguments for the elimination of Flash from a web developers vocabulary, but Flash is also a very exciting and rich medium. One complaint about Flash focuses on the processor usage in an era where mobile web technologies and battery life are ever critical. Search engines still do not accurately crawl and analyze Flash content properly. And, Apple has taken a stand against Flash with it's extremely popular mobile products. Don't get us wrong.... Flash has a lot of positive features also, and we are not fully in support of the downfall of Flash either.

HTML 5 Canvas Element
In short, the <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Apple was the first to use the element for their Mac OS X WebKit which powered their Dashboard widgets. Not all web developers have been thrilled with Apple's push for the canvas element as opposed to the SVG standard for instance. Canvas is a  drawable region that is defined within HTML code. The HTML 5 canvas element is very exciting because it opens up possibilities for functionality that was once the completely dominated by Flash in the context of web applications. The <canvas> element will make such interactions easier and cheaper to program into web applications. Although, the new element <canvas> is defined in HTML 5, you will still need to rely on a programatic language to create actions--Javascript is a very popular approach to building such functionality.

<canvas> has two attributes: width and height. Height and width are both optional properties. (Note: If you do not specify a height or a width for <canvas>, then your canvas will be 300 pixels wide and 150 pixels high. If the rendering of your canvas element seems distorted, then you will need to specify a height and width.

Here is a code snippet that uses the canvas element:

<canvas id="example" width="500" height="500">
This plain text will displayed if your web browser does not support HTML5 Canvas.
</canvas>

The <canvas> element has a DOM method called getContext, and the getContext() takes one parameter. Below is a sample definition:

1. var canvas = document.getElementById('blahblah');
2. var ctx = canvas.getContext('2d');

You can use the onload attribute in the <body> tag to call to a function that you create using javascript to give definition to canvas (by ID).

More info on HTML 5

Tags: , , ,
Posted in Knowledge Base | Comments Off

HTML 5 @font-face Font Format Usage

Saturday, June 5th, 2010

font html5 directory of options for web design that are open sourceHTML 5 brings a lot of new and exciting features to the web design community. Web design blogs have been filled with discussions of the HTML 5 support for native web video. A lot of other features however deserve your attention as well, such as the canvas elements, CSS 3 transitions and font support.

Font support will greatly enhance the look and feel of the web--as the former constraints of a limited palette of typography choices are lifted.

With HTML5, designers will be able to use a font that is not present on the viewer's machine--yet still display the font. Font products that support the WOFF font format will be able to be used on a web page as real text. The declaration @font-face will allow for the display of new typography options on the web.

WOFF is not the first technology of it's kind that allows for the download of  new typography options for the web. WOFF will be the preferred way to display new fonts.

Below: Here is an example usage of @font-face within CSS:

@font-face {
font-family: 'BL Avenir Black';
src: url('fonts/BLAvenirBlack-webfont.eot');
src: local(' '),
url('fonts/BLAvenirBlack-webfont.woff') format('woff'),
url('fonts/BLAvenirBlack-webfont) format('truetype'),
url('fonts/BLAvenirBlack-webfont.svg#webfont') format('svg');
}

Using double declarations: one for Internet Explorer and one for the rest:

@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.eot');
}
@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.woff');
}

Notice that the font is stored on the server and the path is specified so the user system can reference the font file formats. In the definition above, we are referencing Paul Irish's Bulletproof @font-face syntax, which, for example, provides an .eot font for Internet Explorer and backup formats in .ttf and .otf. There are a number of others out there that have published helpful articles on bulletproofing @font-face as well, to name a few: Mark Pilgrim and Jonathan Snook.

Using conditional statements for @font-face for Internet Explorer can make such an ugly and wasteful mess. Instead, you can use double declarations to provide IE with the .eot font format. Currently, only Firefox is supporting WOFF font formats--other browsers plan to in future releases.

Great reference for @font-face

If you want to learn more about HTML5 and fonts, we recommend taking a look at Paul Irish's: Bulletproof @font-face syntax:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Paul Irish does a great job of breaking down the concept and demonstrating real world and helpful examples.

@font-face easy generator

Another recommendation that we can make would be to use the fontsquirrel.com for fonts that you have the right to use. This very helpful tool can create a small toolkit for web developers and designers to convert fonts into WOFF or EOT formats. Take a look: http://www.fontsquirrel.com/fontface/generator

Tags: , , , ,
Posted in Knowledge Base | Comments Off

How To Embed Video In A Web Page

Tuesday, May 4th, 2010

Video is becoming more and more important  for the web. Even individuals and small companies frequently employ videos within their websites for marketing, promotions and as general content. Videos have seen great success when used as viral content for marketing.

This brief article shows how to publish video within a web page using HTML and attributes.

Sample code: Simple embed video within HTML source:

<embed src="example.mov" width="250" height="300" controller="true">

The above option is fine if your movie is very short. Longer videos will absorb more bandwidth. In such cases you will need to refine your approach.

Alternate options for embedding Video:

  • Youtube: Fast, easy and free. The downside is that you lose control of the source video and it circulates through the Youtube sites and can be embedded on other websites.
  • Vimeo: A new alternative to Youtube. Great for sharing videos and embedding them in a web page. Also, allows your video to be shared within communities.

Resizing your embedded native video but keep the aspect ratio:

<embed src="example.mov" width="650" height="450" scale="aspect" controller="true">

If you choose to resize the video but want to preserve the aspect ratio of the video, you can add an attribute to the <embed> code to prevent distortion. The snippet of code "scale" will allow you to reduce a larger video such as the common size 1280 x 720 to 650 by 450 but not stretch or distort the image. Without the scale code, you will crop the video arbitrarily.

HTML5 will make embedding video in a web page easier!

With the advent of HTML5, embedding a video in a web page will be a snap. The <video> element will be introduced with HTML5. It will also expand and enhance what you can do with video on the web. Currently, there is a battle between web browser designers over what video codec should be supported. Apple and Microsoft are fighting for a video technology that would impose patent issues. For more information about the fight over video technology standards for HTML5 see /Current. There are a number of highly popular video technologies being used widely, and they include: MPEG 4, typically with an .mp4 or .m4v extension, QuickTime container (.mov), Flash Video, typically with an .flv extension, Ogg, typically with an .ogv  extension, Audio Video Interleave, typically with an .avi extension.

Services: web video production and marketing

Tags: , , , ,
Posted in Knowledge Base | Comments Off