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.
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Foletto,
- I was asking "in what language is it?" but I noticed it by getting the app to an error :P
He he :)
It is made using very old-school ASP. My development platform of choice is Visual Studio 2005 Professional, so I am pretty much only doing ASP, ASP.NET, VB.NET or .NET 2.0 (and soon ATLAS).
My development style is focused on modular anarchism. I have made a lot of code-libraries that I can reference to cut down development time (e.g. getting data from an external source is a single line of code). But, if I run into a problem I often solve it using brute force. Fixing the problem first, making it "pretty" later.
Just want to let you know that this works fine with the latest version of Firefox (1.5.0.6).
Great art!
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Wow, this project is really taking off.
The system has made over 77.000 visualizations - within the last week. That is more than one every 7 seconds.
It peaked saturday with a new DNA made every 3 seconds!!!
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Now more than 80.000 conversions :)
I have also recieved reports that the system has been down on both Saturday and Monday (for short periods of time).
My guess is that the server overloaded due to heavy demand. WEB2DNA was made for fun, and as such scalability was never even considered.
I apologise to those who experienced it!
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Just updated the performance - the server was having a hard time keeping up. Now each conversion should be done twice as fast (less than 2 seconds for getting the website, analyzing it, converting it, and outputting the graphics).
...and we reached a staggering 90.000+ conversions. Amazing for a project that was done for fun one saturday evening.
Thank you all!
This is a so beautiful visualization! Congrats!
My blog's DNA is my new wallpaper! Thanks..
I wrote your great WEB2DNA in my Naver blog's.
http://blog.naver.com/kulukulu7/80027349605
↑ click here~♡
Thank you. I have no idea what's going on; but both my blogs and both my sites have DNA profiles now. I hope nobody thinks they're psychological profiles because my own designs look repressed compared to MovableType's.
What chance is there that somebody else's websites could have the same profile as mine?
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Felipe & Walt=, Thanks!
Stephanie, Also thanks - but, I admit I do not understand a word of it :o)
MKColling, Each line represents an (x)HTML tag, all the spaces represents words found on the page.
"What chance is there that somebody else's websites could have the same profile as mine?"
Well, it should be pretty slim. For two sites to be indentical, they have to share the exact same HTML code - and the same amount of words between each tag. It does happen.
e.g. all the Zen Garden CSS sites have identical DNA.
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Fixing stuff...
I have made several changes to the DNA system, to fix that some sites was displayed with zero lines.
The first fix, didn't go as planned, as it fixed some sites, but destroyed others... now a seconds fix is on place.
Sites made entirely using frames is not supported, nor will they ever be. The reason is that WEB2DNA does not know which frame is the main window.
When inputting my site to the Web2DNA project, I receive the following error:
msxml3.dll error '80070005'
Access is denied.
/web2dna/default.asp, line 49
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Aaron, it is because you entry page redirect to another page.
I was thinking if any library is available to draw web 2 dna.
I absolutely LOVE DNA for a site . Would you allow to DISPLAY the site DNA on my website as a opening graphic?
I actualy would love to use it as a Menu
I think GOOGLE should BUY you out for millions and put a SITE DNA for all http://www sites so before one clicks he knows what waters he/she will swimm in..like my site visualsenses dot com is is graphic intensive so SOME may hate it some may WANT it ..Anyway THANKS for your creativity..I wish I was more IT and less ARTIST but still am VERY "IT" oriented Artist.
bye4now Victor
I am curisous about your mathematical method - like calculating the height of the images,Could you share it? Thanks.
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
To calculate the height of each element is basically just to divide the maximum amount of elements with the actual amount of elements - and then correct it to 1px if there are too many of them.
DNAstrHeight = 2910 / CountElementsH
if DNAstrHeight < 1 then
DNAstrHeight = 1
end if
DNAstrHeight = Round(DNAstrHeight,0)
With WEB2DNA there is an added catch that it also compares this to the 10 vertical containers available - only filling the ones it needs. But it does so by adding empty DNA lines respectively.
Have you got two examples of extremes between a semantically rich site and one with messy old-style code to provide a comparison
Post comment works ecah time ONLY on the second mouse click on POST COMMENT
Alec, Uhhmmm... no. Not as such. I do not know of any sites where the only real difference is the backend code.
Thomas,
Thanks for creating such a cool concept- it drives quite a bit of traffic to our site. It's cool to know that we provided the inspiration for this!
Cheers,
Adrian
Co-founder
DNA 11
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Hey Adrian,
Thanks a lot, but as you said, your amazing product was what made the idea come to life. So the thanks really goes to you as well.
BTW: Someday I need to get my own DNA portrait :)
WEB2DNA is by far the most popular thing on this site. It has been the number one visited page every single month. It is not as popular as when I launched it, but it still used by 200-300 people everyday - and that is pretty good for a single page that is almost a year old.
Hi,
How do i aquire a photo of my own dna ? is it expensive and can you zoom in more?
warm wishes kimberly
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Kimberly, Do you mean your real DNA - or the DNA of a website?
1: You can get a picture of your real DNA over at DNA11 - see here: http://www.dna11.com/gallery_portraits.asp
2: For a website DNA simply take a screenshot.
Baekdal.com is (nearly) everywhere. Check out our social profiles:
Published: July 24, 2006 
FaceBook
Twitter
LinkedIn
YouTube
FriendFeed
Delicious
Folletto Malefico
visit my website
Great one!
This work fits perfectly in my background research of trying to "visualize" machine code in something "artistic".
Thumbs up. :)
I was asking "in what language is it?" but I noticed it by getting the app to an error :P