marco rosella

Interactive Designer.

Archive for the 'XML' Category

Awwwards SotD and more…

After two months and half, it seems that 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 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…), SVG version
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.

(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 :

(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.

From technorati to trackrati /1

particular of the Technorati 
API logo In a post of ten days ago, Massimo of DTCM asked to his geek audience: |inline

The X from JSON – second part

jlogo.jpgThis is the second part of a series of three posts dedicated to
JSON, a javascript for the description and the transport of data.
In the first part we saw the comparison between its sintax and the one of XML, the ‘chairman’ in the same category; today we’ll speak about some differents between the two formats stopping in particular
on their rule in the client-server interaction. (with some downloadable samples)


The X from JSON – first part

jlogo.jpgSometimes happens in this way.
After only two years, even that which seems to be a great love begin to shows its cracks.
As that wasn’t anything, the friends don’t stay on your side: “But are you sure about what you’re doing? Don’t you think that you chose that wrong way, this time too?” “That’s wrong, I believe in this relation, nobody will divide us!”
That ‘nobody’ unfortunately is here now, and has a name: JSON, a new format based on javascript that in these days begin to fight his way in the world of the description and the exchange of the data, introducing itself as an alternative to the old, dear XML.
Before to advance to XML a reflection break that will mean the certain end, I’d like to explore better my heart to find – if not an aswer – at least a suggestion about to with safety some important decisions for our future, whose I don’t stop to believe.


250 rates collection: XML

250 rates logoThis is the seventh episode of Central Scrutinizer 250 rates collection, the re-order of all the resources suggested in 2005.

(continue from here: CSS, Js & Php, Flash & Accessibility, Typography, Colors, Graphic Projects)

New macro-section dedicated to XML, the markup language that in 2005 confirms itself as a fundamental for the creation of web applications (see the solid use of XMLHttp Request) with some of its sons like RSS (the born of i Google Homepage, MyYahoo, IE 7 with RSS support and ten of new feed readers in circulation and SVG (native plugin in Opera, Firefox and -soon- Safari).


Your site recoded.


TextorizerTextorizer is a tool that transform a raster image in a vectorial image selecting edges e replacing them with text inserted by user.
The exit format is not a Flash movie, like some previous tools very similar, but a small size SVG file, available at last to “the big audience” (that didn’t download the plugins) thanks to the recent native support in Firefox 1.5.
Source code in C and PHP languages is instead available in this page.


Listible logoAre you ready to cross new frontiers of social bookmarking?
Listible is an instrument that works in a way different from digg or, more useful: you mustn’t to insert the link of a single article with related description, but an topic that could contain a series of articles linked among them. Every single user can to insert his resource not ancora inserted yet thought the form
below and so create a very complete database with all the resources available under that subject, reducing the search by tag.
Some examples: Full List of CSS Galleries,with 14 resources suggested, Online Feed Aggregators, with 25 resources, Social Bookmarking Sites, with 42 resources, a very interesting data that complicates the ways for the success of this application.

SVG and Firefox 1.5: a sample

SVG ExperimentChange the CS logo colors” is a sample Scalable Vector Graphics (do you remember this ALA article of four years ago?) file where are tested some of the elements supported by the native plugin inserted in Firefox and Opera browsers, like shapes (rect,circle), text, groups, animate, linearGradient and others.
The first script linked, based on an experiment extracted from a J. David Eisenberg book, allows to change the colors of the logo using three drag ‘n’ drop levers, related to Red, Blue and Green colors, which change the text on the center of the page.
In fact, this is not a real text that change, but a background behind a transparent image of a static text. Waiting for the font module (that allows to display every font vectorize in glyphs, that could be created by the Apache Batik software) support in Firefox, I tried to use an “Image Replacement” in a HTML style: I vectorized a text with Illustrator, extracted from the exported transparent file the image node, and inserted inside this semantic informations with title and desc elements.

<image width="447" height="59" id="XMLID_1_"
etc. etc.....
<title>Central Scrutinizer</title>
<desc>the logo of my page</desc>

I placed the “transparent” image over a rectangle, which colors are changed by the script. (note April 2007:A similar technique has been used a month later in Design Melt Down’s Logo Color Variations)
The other script linked is Vectoreal’s Smilscript, that allows to substitute the Smil animation elements (used in the file for the descending rectangle at the onload, a fade effect and the rotation of the circle on the top-left) not yet supported in Firefox.

(added April, 7 2007) What about the future of SVG? Uhm. In really poor thoughts (1.2 cents):
- the W3C activity starts in the 1998;
- the main plugin that support the 1.1 specifications (here the draft of the 1.2), SVG Viewer was produced by Adobe. SVG files can be viewed well in the main browsers like Internet Explorer, Opera and Mozilla Firefox;
- in the 2004 Mozilla and Opera (and in 2005 Safari’s Web Kit) starts to produce a native plugin for their browsers, but the rendering quality is far from the SVG Viewer’s one;
- in april 2005 Adobe aquire Macromedia, the software house that produce Flash, the proprietary software for vector graphics against who SVG born as potential (because, among the other weakness, it must use other standards for the multimedia aspects) web standard-based competitor;
- in november 2006 Adobe decide to discontinue the support for the SVG viewer. From the Adobe SVG pages:

Adobe has decided to discontinue support for Adobe SVG Viewer. There are a number of other third-party SVG viewer implementations in the marketplace, including native support for SVG in many Web browsers.

“Many” excludes the most used, Microsof Internet Explorer.
- in may 2007 Microsoft introduces Silverlight (knows in the previous year with the codename WPF/E), “a cross-browser” (Internet Explorer, Firefox, Opera, Safari…) “cross-platform plug-in for delivering the next generation of .NET-based media experiences and rich interactive applications for the Web”, in other words a proprietary competitor to Macromedia/Adobe Flash.

Mozilla and (primarily) Opera made a really good work with their plugin, but is impossible to start to create (after nine years!) a developer community of SVG developers without the Internet Explorer support. And without a solid developer community is impossible to catch up Flash and Silverlight, far light years mainly in the multimedia integration.
In web design context, SVG is really sick.


Particolare dal sito vectoreal.comSome news linked by serendipity:
While Firefox 1.5 arrive today to Release Candidate 2, Vectoreal released a script supporting SMIL animations (so tags like <animateMotion>, <animateTransform> etc..) still absent in SVG native plugin of new born in home Mozilla. This is a testing SVG. (and, as usual, for Firefox 1.x, Explorer, Opera 7.x users here’s the Adobe plugin) |inline

Technorati’s Apis + Ajax

Logo Technorati ApisUpdate: a new version of the script is available here.

Inspired by the swiss example, one week ago Luca Conti launched the proposal to create an italian blogs ranking based on Technorati.
To the point, searching for a simple way to made it, I found and suggested Duck Soup, a PHP library that allow simple utilization of all the infos served by Technorati’s APIs.

Using its BlogInfoQuery support, I create an AJAX powered simple way that returns the datas that Technorati links to every blog.

Here’s the example: just enter the URL of your blog, click the button and wait two seconds.

Technorati’s Blog Info

How it works?

Recovery. . .

. . . of weekend’s links:
- The style in synthesis: CSS Shorthand Guide.

Waiting for Firefox 1.5 beta 1 . . .

…that should be out today, has been release yesterday the Release Candidate.
In the meantime, a javascript* expert as Jim Ley found the way to rendering the paths draw with Google Maps in SVG instead VML.

here is.

*from the posts I suggest one dedicated to the XML Http Request, written three years before the ‘exploit’ of AJAX.

Really really, hey!

3 steps to make an idea (and much more) of XML in a morning:

1) Read A Really, Really, Really Good Introduction to XML.

2) Begin the good XSLT Tutorial e the fresh XPath tutorial entrambi di

3) Find how XML is without limits with XmlChess, “an Xml Schema for use in the exchange of chess game information”.

Powerxml preview

From 15 to 18 august in Enschede, Netherlands, will be Svg Open, the 4° world conference dedicated to scalable vector graphics.
There will be a bit of Italy: Maurizio Tesconi e Andrea Marchetti from CNR of Pisa will introduce PowerXML, a tool fully in XML for the creation of presentations.
With the soul will appearCentral Scrutinizer, too, because I contribute, between the other things, at the design of project.
Slow with the curiosity: I’ll tell you about PowerXML in the next months, while here is the paper of presentation.

“Podcasting for all!”

It seemsthat is now released version beta of Odeo, a service to listen, create and share podcasts.
So tag catalogation passed also trought audio files: there’s who exult for tag “sex”.

Update: Original the visualization approachof FAQ, lay out as usual in only a page: the click over link to one of the listed questions not only position the page in corrispondence of the anchor, but it do light and then switch off the related div.
At the first time it remember me Ajax technicque”Yellow Fade” by 37 Signals, then after a look at the codes I found that It use Prototype, una libreria javascript di Sam Stephenson (the core of

In my phone there’s an svg, yes

un cellulare che supporta SVG A Nokia guide (in PDF) to create MMS with SVG and SMIL in phone that support this languages.
List of availabe phone in this page. (Uhm…goood this…)