Working in IT especially as a developer means your skills are always obsolete or on the edge of being obsolete. Well, conceptually it is all the same, but the technologies are always changing. This is particularly true for Web developers. We've seen the internet go from a collects of mostly static page in the mid 90s to RIA with plug-ins to AJAX enabled Multimedia interactive application. This is an exciting time for UI/UX developers. For the most part, it seems Apple and WebKit are leading the way just as Mozilla lead the charge for standards compliance. Although, Firefox is not that far behind.

Three new technologies are showing us the future of Web development. These technologies are: CSS Visual Effects, HTML 5, and Embeddable Fonts. I use the term "new" somewhat loosely because like most developments they were conceived much earlier and limited implementations have been around. But now they are moving from the realm experimental into the realm of production programming.

I'm going just touch on CSS Visual Effects and HTML 5, provide links to some examples, and leave any real discussion to later posts. The topic of embedding fonts is a little easier to cover so we'll look at that in this post.

WebKit, which includes Safari and Google's Chrome browser, submitted proposals, http://webkit.org/specs/CSSVisualEffects/, for CSS Transitions, CSS Animations, and CSS Transformations (and 3D transformation). They have been implemented in Safari 3.1, Chrome, and the iPhone. The most complete implementation is for the iPhone. Firefox 3.1 implements a subset of the CSS translations. The current Webkit implementation prefixes -webkit- to the attributes shown in the documentation, and Firefox 3.1 prefixes -moz- to the attributes. Here are some links to checkout.

http://www.the-art-of-web.com/css/css-animation/
http://girliemac.com/iphone/anim.html
http://www.broken-links.com/tests/manga/

It should be noted that similar effects are available in IE using their CSS filter attribute.

Canvas is a new HTML5 element used to draw graphics with JavaScript. It can be used to draw graphs, make photo compositions or animations. Checkout the following links.

http://www.xs4all.nl/~peterned/3d/
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
http://www.tommysmind.com/gamejs/
http://ajaxian.com/by/topic/canvas
http://www.webresourcesdepot.com/25-amazing-javascript-games-some-fun-and-inspiration/

The Web designer's nemesis has been the lack of control over the fonts on the user's computer. There reasons to create Web design that will stand up to unknown default fonts. However, the emotional effect a specific font conveys is well worth tapping into for certain projects. Embedded fonts, which have been around in one form or another for awhile, are available in most if not all modern browsers. Checkout this links.

http://jontangerine.com/silo/typography/font-face/
http://www.broken-links.com/tests/font-face.html

This is one place where IE has lead the pack with embedded fonts being available since version 5; albeit, relying on a properitary format Embedded Open Type (.eot). Safari 3.1, Firefox 3.1, and Opera 10 use TrueType (.ttf) or OpenType (.otf) fonts. The basic format of the @font-face is:

    @font-face {
	    font-family: Name-to-register;
        src: url('remote-file.ttf') format("truetype");
    }

Additionally, the CSS font attributes can be used to describe the font. For example;

    @font-face {
        font-family: Name-to-register;
        src: url('remote-file-bold-italic.ttf') format("truetype");
        font-weight: bold;
        font-style: italic;
    }

The style values are the same as the values normally used in CSS. This are extended to include a comma delimited list and a vallue of "all". For example, font-style: normal, italic; indicates that the font will be used for both styles and font-weight: all indicates that the font will be used for any specificed font weight. (Different forms of fonts--weight, style, etc--customarily are in different font files and there is one for each font weight-style combination).

Microsoft has a free tool to convert truetype fonts to embedded open type (.eot) call WEFT for Web Embedding Fonts Tool. That means provision has to be made to provide one font for IE and another for other browsers, but then providing special coding for IE is nothing new.

And, I need to note that you should check your font license before embedding it.

Additional Resources:

http://www.w3.org/TR/css3-webfonts/
https://developer.mozilla.org/en/CSS/%40font-face

Read more from Lawrence O'Sullivan.