When you one evening are bored out of your skull, and the only shows on TV are zillion year-old reruns, you get into a mood that can only be described as a Monty Python sketch gone wrong. If you then happen to start your favorite web development application you know that the results will be mad, pointless and utterly useless.
This is the case with WEB2DNA, a little thing I made this weekend while feeling particularly nutty.
WEB2DNA will take you website, analyze it, crunch it into too little bits and spit it out as a graphic representation of a human DNA.
I was heavily inspired by other nutty people - in particular two.
DNA11: A company that,
with a sample of your blood by wiping the inside of your mouth with a swab, turns your DNA into works of art. It is a really neat but expensive concept.
Websites as Graphs:Â A cool web app by Marcel Salathe that displays you website as a graph (or actually a series of dots connected to each other). This too is a really neat and fun concept that is very inexpensive (it is free).
WEB2DNA is basically a mix between the two.
The concept behind this is pretty simple. The system first retrieves the website, then it is parsed like WEB2RSS, stripping away everything that is not part of the body tag, scripts elements, and iframes.
It then analyzes the content. Words in the content are displayed as empty spaces (the gabs you see between the lines). The HTML tags are displayed as colored lines.
The brightness of the lines is determined by the importance of the tags in terms of structure.
Basically a semantically rich site will appear brighter than one with messy old-style code.
You can also determine the richness of text on a site. A site that focuses on (text) content is one where the DNA patterns is large (filling many containers), but contains a lot of empty spaces between the lines (empty space is the individual words).
Behind the scenes, WEB2DNA uses the same methods to retrieve and parse the result as WEB2RSS. The only difference is how it is outputted. While WEB2RSS outputs an RSS feed (obviously...), WEB2DNA outputs the same, but displayed as tiny little pictures on colored backgrounds.
Technically speaking each DNA string is a 1x1px transparent GIF. It is displayed with a fixed width and height and colored using CSS (the background of the image tag). The images are then put into 10 vertical containers that is position on top of a background image.
The entire project took 6-7 hours to make. Most of it spent tweaking how the DNA string should be displayed, and doing complex mathematical craziness - like calculating the height of the images, when there are 3479 elements, being displayed in a box that can contain 70% of 2425 elements in 10 vertical containers. Or even worse, how do you display 37 elements in the same area without making them huge and ugly looking. It is pretty much the difference between displaying Google and NY Times.
WEB2DNA does not play very well with Firefox, because of some little known bug in how it handles huge chunks very small images and line-height. When the amount of images are low, and especially when they are more than a single pixel in height, Firefox displays the DNA image just as any other browser. But, when you display about 1200 small images next to each other, it goes completely wacky.
Instead of positioning each image neatly in a grid, it adds 1-2 pixels gabs everywhere.
Secondly, WEB2DNA is enhanced using un-supported CSS filter effects. This effect slightly blurs the image, making it look more real - but only in Internet Explorer.Â This was not done because I prefer any particular browser, but because "I can".
So, for the full effect use something else than Firefox (this is art, not a browser war - so don't comment about it.).
Please note: WEB2DNA does not include URL error handling. If you enter an invalid URL the system will fail, spewing out a rather technical error message.
Almost every time a news site launched something new, they also cover the same stories the same way.
Editorial analytics is the tool we use to define how to report the news.
Google wants to build tracking into the browser, and then remove personal identifiers ... but is that good?
AIs can be both good and bad, but using an AI to fake some text is always bad.
Many people in the media wants newspapers to be tax exempt, but what about the rest of the media?
When a publishers says that WhatsApp converts 12 times more people than their website, what does that actually mean?
Facebook said that it wouldn't block misleading political ads, so let's talk about that
Cookies today are doing all kinds of bad things, but did you know that the original creators wanted to stop that?
We all knew this would happen, but Google won't pay publishers for snippets.
Founder, media analyst, author, and publisher. Follow on Twitter
"Thomas Baekdal is one of Scandinavia's most sought-after experts in the digitization of media companies. He has made himself known for his analysis of how digitization has changed the way we consume media."
Swedish business magazine, Resumé