Fyrdility

I am happy to announce the release of my second Opera widget: eduMap!

This 100% SVG-based widget lets you learn the location of countries, states and capitals around the world. It currently doesn't work in Opera 9.5 for some reason (weird, since that's where I tested it on most!), but I hope to resolve that shortly.

Inspiration for this widget came from the excellent website purposegames.com, which has the same basic premise. However, all its games are Flash, and I wanted to make an SVG version. Also, I wanted to add more modes and options to the games (for example, where the country is highlighted and you select its name from a list).

Basic knowledge of the location of other countries seems to be sadly lacking in the United States, and I believe this may be a small, but great way to help change that. As an added bonus, it might help inspire other developers to use SVG over Flash.

Feel free to leave any feedback and bug reports on the widget's page, and stay tuned for updates.

Enjoy!

For comments, please post at eduMap widget on the new Fyrdility blog

There's changes in the wind in the world of visual web technologies, and they show a beautiful future for what might soon (and to some degree now) be possible with the use of web standards.

Specifically, I'm talking about web alternatives to that ever popular Adobe Flash plug-in. Note that I won't be talking about Microsoft's Silverlight here, since it has many of the same shortcomings as Flash does.

There seem to be three major ways Flash is being used today: For online videos, as a web page interface, and for web-based games. Upcoming standards being developed and implemented for each of these uses.

Video

The HTML 5 specification includes an actual <video> element, that can run a video much like the element displays an image. Javascript can be used for the user to set any the actions (stop, pause, play, etc.). What's more, videos can also be referenced to in SVG, allowing nifty effects like Reflection and filtering. There are experimental builds of Opera, Firefox, and now Safari that all support this feature to some degree.

Interface

Flash allows for all sorts of tricks to make cool looking (albeit often irritating and unnecessary) web page interfaces, occasionally bypassing HTML altogether. Some of these effects can already be somewhat reproduced using CSS and javascript in today's current browsers, as for example is shown in this jQuery UI demo. More complex effects are also possible using SVG and/or the HTML 5 <canvas> element, both of which are seeing increasing support in the same three browsers.

Additionally, Safari is experimenting with effects that just use CSS properties. These allow for animation, and transformation (allowing things like scaling, rotating and skewing). Think about it, combined these would allow you to specify any HTML element and have it do all sorts of crazy things, without a single line of javascript. Somebody was quick to mention how the Cover Flow effect might even be possible this way.

Games

Primarily Canvas/SVG should eventually be able to handle anything Flash games already do, and possibly more with the recent introduction of 3D Canvas. This could possibly appear in Firefox 3, and is also available (apparently in a different form) in the previously mentioned experimental build by Opera. An example game is this amazing 3D version of Snake.

Some might ask "but...why? Flash already does so much of this! Why reinvent the wheel?".

Well, there's several reasons. Flash is a proprietary and not part of any W3 standard, which prevents a lot of things like easy and free ways for developers to create SWF files. It also causes many accessibility problems, because Flash files are just single binary files, unreadable (mostly) to anything but Adobe's Flash player. Several other problems exist too.

All these issues are addressed in the various methods mentioned above. And that's great news for the future of the web. The fact that we're seeing all these cross-browser implementations already bodes very well for the future. Of course, it's yet to be seen how much and how fast Microsoft will incorporate these features in Internet Explorer. I'm pretty optimistic, however, that they will find it in their best interest to keep up with these technologies eventually.

Web standards have done a lot for the web so far, and it's great to get a glimpse of how far they can take us into the future.

For comments, please post at Web Standards, the real Flash killer on the new Fyrdility blog

Here's a demo of a div with a simple 10px radius 1px border that works in Opera 9.5, Firefox 2+ and Safari 3 beta. It uses -moz-border-radius for Firefox, -webkit-border-radius for Safari and an SVG background for Opera 9.5. The SVG file this time is actually a modified version of a new method Holger Will came up with.

Of course, it doesn't work quite that easily. The CSS3 corner method uses a border, but for Opera we don't want that border to appear because it already exists in the SVG file. Additionally, we'll have to change the position and padding slightly so the border appears in the exact same place.

One way to solve the problem would be javascript browser-sniffing, but that's an "evil" solution, and I'd like to avoid using javascript if at all possible. Instead, I used O9.5's :nth-child() pseudo-selector with a value of 1n to target every instance. Other browsers (except Konqueror) don't support this (yet), so until they do, this method should work.

So obviously this is just a temporary solution until either Opera supports rounded corners, other browsers support SVG backgrounds, or other browsers support the selectors that Opera does (which would break my "hack").

Oh, and to allow support in IE, I'd recommend a javascript trick (there are several out there) inside a conditional comment tag. It may also be possible to use VML to achieve a similar effect as the SVG background, but I'm not sure.

For comments, please post at CSS/SVG Rounded corners for multiple browsers on the new Fyrdility blog

One of the geekier things that excite me (okay, I guess there's a lot of those) are upcoming features in web browsers. Specifically when it comes to new and improved support for things like CSS3, Javascript and SVG.

The recently released Opera 9.5 alpha is known for it's improved CSS support, but what excited me most was the ability to use an SVG file as a background image. Why is this great? It allows for all sorts of neat things. Small file scaling gradients, multiple raster images, even animation!

Sure, no other browser supports this yet, but I'm not going to let that ruin my fun in designing for the future. Besides, one could always use javascript to fix stuff for other browsers if really necessary.

So, even before Kestel was released I tried my hand at a multiple image SVG background. CSS3 allows multiple images to be specified as background, but so far only Safari supports that. I'd noticed an example of this a while back, and since this seemed very useful to me, I based my example on it as accurately as I could.

• My demo (currently only somewhat works in Opera 9.5 or Wii browser)
• How it should appear
• The standalone SVG file (works in most SVG viewers, including Opera 9.2)

The first 9.5 alpha ALMOST displays it correctly...unfortunately it displays a black box for the top and bottom "border". This strikes me as odd since it works fine as standalone file, but I'm sure it will be fixed eventually.

Since I made this, Opera's Chief Web Opener David Storey made some excellent demos showing other new options, including SVG rounded corners. Rounded corners, too, are a CSS3 property, which work in Firefox (for example). Opera currently lacks support for this web 2.0-riffic display trick, so it's cool to now have a way to emulate them without a need for Javascript or nested DIVs.

David's example shows an easy to make single color background with rounded corners. However, what if you only wanted to have the border? The obvious answer would be to add a "stroke" to the SVG rectangle. Unfortunately, the stroke sits right on top of the edge of the rectangle, and so parts will be clipped off when putting it in a box. You might be able to get away with a 1-pixel border, but beyond that is just not acceptable.

Lacking the ability to display the stroke on the inside of the box, one would have to give the inner box a certain margin from the outer box. Ideally using an absolute value like 5px, rather than a percentage. For my multiple background image I kind of dealt with this when needing to position the right and bottom border. With HTML one would use CSS to do "position:fixed" and "right:5px". Alas, this won't work in SVG, where you can only specify a top and left position.

So, what I did was give it an "x" value of 100%, and then use the transform="translate()" attribute to move it back to the left using a pixel value. Ta da, an image stuck to the right border. This, however, was using multiple images, not one great big rectangle.

Eventually, however, I found the solution using USE elements, clipping areas, and four different rectangles. Crazy? Yes. But it works quite well, allowing different radii for each corner, any given margin, any color and any stroke width.

Here is the result, which I'm quite proud of:
The standalone SVG file

I hope to add more examples later, including using the image as background, and some documentation on modifying the file.

I wouldn't be at all surprised if someone comes up with a more efficient way of doing this, if you do, please let me know!

For comments, please post at SVG Multiple Images and Rounded Corners on the new Fyrdility blog