Web page as Graphs with source code

Tweet

Share

Webpages as Graphs

With this funny applet, you can judge of the complexity of a web page by just generating it’s graph! my homepage is way too complex compare to google for example :-)

http://websitesasgraphs.waltercedric.com

What do the colors mean?
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

Nothing new some of you will cry, as this java applet is available since 2007.. Yes but..

The main difference, is that I provide you the last bit of code to make it work on your own server, or locally in any php environment. The magic part that is difficult to get is the function that retrieve the html content of any page and pass it to the applet.

For this task and since on some web host, the php function furlopen() may be forbidden (I recommend you to disable it to reduce backdoor inclusion), i will present you a solution with CURL

PHP supports libcurl, a library created by Daniel Stenberg, that allows you to connect and communicate to many different types of servers with many different types of protocols. libcurl currently supports the http, https, ftp, gopher, telnet, dict, file, and ldap protocols. libcurl also supports HTTPS certificates, HTTP POST, HTTP PUT, FTP uploading (this can also be done with PHP's ftp extension), HTTP form based upload, proxies, cookies, and user+password authentication. [PHP Manual] 

So I’ve create a small script call display.php that return the content of a webpage

Get Data From URL With Curl

<?php

$input = $_GET;
$name = 'url';
$url = (isset($input[$name]) && 
      $input[$name] !== null) ? $input[$name] : 
                        "http://www.waltercedric.com";

$timeout = 10;
$show_errors = true;

if (function_exists('curl_init')) {
   return getDataFromUrlWithCurl($url, $timeout, $show_errors);
} 
 else {
   return getDataFromUrlWithFopen($url, $timeout);
}
/**
 * CURL function to retrieve data from a URL.
 */
 function getDataFromUrlWithCurl($url, $timeout = 10, $show_errors = false) {
   $ch = curl_init();
   $agent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)";
   curl_setopt($ch, CURLOPT_USERAGENT, $agent);
   curl_setopt ($ch, CURLOPT_HEADER, 0);
   curl_setopt($ch,CURLOPT_URL,$url);
   curl_setopt($ch,CURLOPT_HTTPGET,1);
   curl_setopt($ch,CURLOPT_CRLF,1);
   curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); // so it will return data into a 

                                              //variable instead of printing out
   curl_setopt($ch,CURLOPT_TIMEOUT,$timeout); // give it a time in seconds to reply
   //curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, false); //dont validate SSL cert
   $result = curl_exec($ch);

   if ($show_errors && curl_error($ch)) {
      printf("Curl error %s: %s", curl_errno($ch), curl_error($ch));
      print(' <a href="' . $url . '" target="_blank">This is the url</a><br>');
   }
   curl_close($ch);
   print($result);

       }

You can look at all CURL options there: http://us2.php.net/curl_setopt

Get the source code to make your own site

Download now

All credits to original author

About the author (Sala) of this applet

http://www.aharef.info/static/htmlgraph/?url=http://www.google.com

Flickrmania

Make a screenshot of your sitegraph below, put it on flickr and tag it websitesasgraphs.

You might also like:

111 days ago

Search And Replace Within Zip Files with Regular Expressions

There is a lot of shareware and freeware (jEdit, Notepad++) to do complex search and replacement in

936 days ago

The Build Tool Report: Turnaround Times using Ant, Maven, Ec

          Even if the sample is quite small (600 responses), it still interesting goin

940 days ago

How to check commit comments on SVN Commit

If you are using Subversion/CVS, you might have come across the issue where multiple developers wo

1085 days ago

Atlassian just acquired GreenHopper

Atlassian just acquired GreenHopper, a popular JIRA plugin with over 800 customers. GreenHopper

2495 days ago

Jedit shortcuts reference

Keyboard ShortcutsFilesControl-NNew file.Control-OOpen file.Control-WClose buffer.Control-E Control-

2737 days ago

Metrics and Models in Software Quality Engineering book - A

"For more than 50 years software has been a troublesome discipline. Software's problems are numerou

2803 days ago

Good tools for developer

TCPviewer dsplay TCP connections in realtime and ProcessXP shows all processes and their dependant