Tag: css

Audacious CSS Desktop Programming

by doctormo

Take a look at this video, here I show an awesome new technology for using Clutter/Gtk with Cascading Style Sheets.


Audacious Video

You can test this out for yourself with Ubuntu 12.04 (Beta) using the following:

sudo apt-get install gir1.2-gtk-3.0 gir1.2-clutter-1.0 gir1.2-gtkclutter-1.0 gir1.2-gconf-2.0
bzr branch lp:csslavie
cd csslavie
./netbook-launcher.py

Note: default clutter/cogl has a bug which prevents the background’s opacity setting, so you won’t get as cool an effect. But a fixed version of those libraries should be available eventually.

Please comment below what you think.

SVG Animations kinda just like Flash

by doctormo

This is a second part to my Who needs Flash post, I’ve continue with prodding to work on some ideas for simple svg maps. A map that is able to find your country or state, but not directions or anything like as complex.

This map shows the world, it’s interesting because it loads maps from a simple apache webserver using XMLHttpRequest and allows you to drill down each section of the map until you find what you want. For the purpos of this demonstration I have only populated a number of maps, I expect that it’d be very complete and useful with an open streetmap backend cleverly processed into the required output and so forth, maybe combined with wikipedia links and other fun stuff. See here for each of the map files and how it was constructed.

I also used FakeSmile in this project, this allows Firefox to display svg animations, even though Firefox 3.5 doesn’t yet support animations in svg files (coming soon), fake smile is a great project, a credit to the authors, I only have one problem with it so far and that’s the infinate loops and uncaught flipping of properties once animations should have finished, this can cause your cpu to spike, so don’t be worried if your computer grinds to a halt.

You’ll also notice that it makes heavy use of cascading style sheets, very useful for hovering and selecting elements based upon multiple inherited classes.

There isn’t any server side code in this demonstration, it’s all done by matching up the element ids to file names stored on the server. The server did need a .htaccess to report all svg files as xml and not svg+xml which firefox balks at.

Also worth noting is the horrible, horrible speed of everything. Hopefully if more demonstrations in svg can be put together, stretching the framework, we’ll see improvements in Firefox and other browsers when it comes to rendering speeds and svg processing speeds.

I think SVG is the better standard and the better framework when compared to Flash, not because of speed or technology, but just because of how integrated it is with everything. I was able to develop this demo using Firebug, I was able to use standard javascript and standard css to style and run everything. If it wasn’t for the terrible neglect that svg has suffered at the hands of Adobe, we’d have replaced Flash already for a large number of things.