Archive for the 'XML' Category

MarcoRosella.com: a zoomable interface with SVG


Last december 15th, I wrote in this blog: “Anyway, I’m currently working on a new site, my “self-titled”, maybe online next week.”
Well, the ‘maybe’ was useful for the following days because the challenge I imposed to myself was very hard: after vlog.it, I wanted to show in a HTML5 site one the main super-power of SVG, scalability, creating a zoomable interface like the epic series of Flash sites of the late 90s that introduced the concept of depth in web design, something usual after the arrival of Google Maps.

http://marcorosella.com

(This is a post in progress)

Nomination at the SXSW Interactive Awards

Just a quick note to announce that for the second time (I won in 2007 as ‘Best CSS’) I’ve been named as a finalist – with vlog.it – for the SXSW Interactive Awards in the ‘Motion Graphics’ category. Go SVG, go!

Awwwards SotD and more…

After two months and half, it seems that vlog.it has been well received out there, from SVG/HTML5 guys to motion graphics passionates to simple video lovers, not forgetting my neighbour Gustavo – a man with very personal tastes – that says that is “Ok.”.

For example, it won:

Awwwards Site of Day

CSS Design Awards SOTD

The 1° position in Design Charts

or for example the (more…)

Playing with SVG Design

I wrote a guest article for Web Designer Wall:

Playing with SVG Design

a “behind the scene” of vlog.it with a small tutorial to create what I call a “wheelayout”.

SVG logos vs. pure CSS3 logos

I like so much the recent experiments with HTML + CSS3 pure logos, great examples of creative use of :before and :after pseudo-elements and border, transform and gradients new properties.
But: for ‘real’ pages will you spent hours and hours to combine a lot of tags (semantics 404?) and a lot of selectors to just create something difficult to transform, scale and animate? This remembered me the guy that in 2004 jokes to build a page with only <small> or <big> tags.

Maybe in this case is better use SVG: for example… (more…)

Vlog.it, SVG version

Vlog.it
To introduce my new experiment, I will begin from my memories like grannies or business managers with black long-sleeved mock turtleneck.
In late 2003/first months of 2004 I was exploring, among the other things, two new aspects of the web world:
(next slide- stock image with people angry with computers and smiling videomakers on fisheye)
SVG: the Scalable Vector Graphics standard that deceived a lot of people for his potential alternative to Macromedia Flash, but was stopped from the lack of Microsoft native support until the born of Explorer 9. Here’s a simple file i made later for this blog for the first Mozilla native support, or here’s the paper of the tool i worked for as researcher, introduced at SVG Open 2005);
videoblogs: a lot of expert or wannabe videomakers started to use the web to let their creation available to people as .mov files linked by thumbnails in Blogspot posts, extending the experience to the jungle of icons of your desktop where the files were downloaded.

Now,
(next slide- stock image of a dawn and smiling people playing ring-a-ring-a-roses [or better, rosellas])
thanks to Javascript libraries like SVGWeb or Dmitry Baranovskiy’s Raphaël (that I chose) plus the native support the target of SVG is near to 95%, and in the years i collected hundreds of motion graphics masterpieces or vintage unforgettable footage, so I could created in last few days a circular rotating paper’s collage-like HTML5-powered motion graphics primitive shapes SVG animations-fueled like-and-favourites-from-Vimeo-and-Youtube showcase as the fourth version of :

http://www.vlog.it

(next slide- stock image of handshake)
Updates (still some bugs around) in this post or in my Twitter or Facebook profiles.

From bloginfo to bloginfo

(note: pretend with nonchalance that passed only few hours from the previous post) By the way, about the Technorati’s API, some days ago I was retaking a look to an experiment I made last year (november 7) using some simple calls to the BlogInfo API, that returns infos relate to a particular blog (and other sites, too, if they have a certain number of inbound links).
First question I ask me was: “Come lo riscriverei con le conoscenze acquisite oggi, poffarbacco?” (if I write in english so bad, don’t expect that i think in this language too)

(for you, friend with feedreader: form works only on the blog)

Technorati’s Blog Info

Insert here the URL of your blog:

In one phrase, I remove the dipendence from the DuckSoup library (that get ready for the calls to all the available APIs), using the script PHP bloginfo.php to ‘hide’ the API Key, make some queries (related to some URL) to Technorati and copy the XML response (using cache on file*) that will be send to the Javascript bloginfo.js, that will control possible lacking tags and will insert the infos in the HTML.

If someone of you would to insert this in a post in his/her blog, the files are as always available for the

*considering that the query number limit is 500, and supposing that a blogger has 300 readers, each insert two blogs about aren’t request before the related informations (so could be make 600 different queries), the cache is (nota: don’t use the term “useless”) uninfluential.


Here's the list of topics.

Here's the months' archive.