Exploring Internet Geography

Martin Dodge(m.dodge@ucl.ac.uk)

Practical 2, Friday 15th October 2004

http://www.casa.ucl.ac.uk/cyberspace

3011: Geographies of Cyberspace

Today’s practical• using traceroute utility to explore and

map Internet geography

• a bit of image editing using Photoshop

• making a new web page of traceroute results using Dreamweaver

Exploring Internet geography yourself

• a number of interesting tools for measuring and monitoring the operation and traffic on the Internet, in real-time

• useful to expose some of network geopolitics• see how your data flows from point A to B• tells you how many "hops", which routers are traversed• tells you how quickly things are moving• identifying problems, bottlenecks and blockages • try to tie this to geographic locations• also reveals which company’s networks are traversed• you can see how complex routes through the Internet often

are

Tracing the Internet• traceroute are utilities to explore the actual

route data travels• traceroute utilities come in three basic types -

simple text ones, graphical and geographical• its an imprecise science, particularly for

geographic traceroutes• we are going to be using a geographical

traceroute called VisualRoute• freely available on the web

Have a go at tracing the Internet yourself

• first you need to choose some target places on the Internet to run traces to

• you must choose 2 websites of geography departments in different parts of the world

• choose 1 department from somewhere in Europe, and then 1 other departments in another continent

• use the comprehensive listing of academic geography departments by Klaus Förster (University of Innsbruck) to make your selection

List of geography dept. web siteshttp://univ.cc/geolinks/simple.php

Watch out - occasionally some of the links are to email address, not websites. Just ignore these

• check that the websites of the 2 departments you chose are actually working by opening their homepage

• I chose the University of Punjab’s Department of Geography as an example

• you want to note down just the domain name of your websites - http://this.bit.needed/blah/blah

• so in my case ‘www.pu.edu.pk’

• now you start up the traceroute program. using Internet Explorer (not Netscape), go to

• http://visualroute.visualware.co.uk/• (this may take a while to fully load - please be patient)

• first you need to register to use the service. enter your email address in the box and press ‘Go!’

• you should see this window and wait a minute and check your email for a confirmation message from VisualRoute

• click on the web link in the confirmation email

• Now you should be ready to run a traceroute from Surrey, England, across the world to your chosen websites

• In the ‘Enter Host/URL’ box, enter the domain name of your first geography department

• then press enter

The traceroute output

• If you click on the snap button you can see the table of results more clearly in a pop-up window

Decoding your traceroute• how many hops were taken?• how many different countries did the data travel through?• how many different networks?• Is this the most direct route geographically?• at what point in the trace does the performance slow? Is

this related to crossing an ocean?

• now repeat the traceroute for the other geography departments

• think about how the two traces differ. how does the number of ‘hops’ in the trace correlate with geographic distance?

Making new web page of the traceroute result

• choose the 1 of your traceroutes that has the most interesting geographical route

• the results of this will be put on new web• this time you will focus on putting images into

the web page• you will need to take screen shots of the

geography department homepage and also the VisualRoute results page

• to take a screenshot, simply use the ‘PrtScn’ key on the keyboard. (top, right hand side)

Images on web pages

• 3 formats of images that you can use - jpg, gif and png

• jpg format images are good for photographs• gif is good for simple graphics and line art• png is good for complex graphics

• we will use png format images today

Manipulating images• for the web you need to keep images

relatively small, so they load fast (esp. for people at home on slow modems)

• you need to crop and shrink images• you will use Photoshop Elements to do this. It

is a specialised graphics application for manipulating images and photos

• start Photoshop• go to: Start button -> Programs -> Graphics Packages -

> Photoshop Elements

this is what you should see - Photoshop

• now display VisualRoute showing the best traceroute full on screen and then press the ‘Prt Scn’ key

• switch to Photoshop and then go File -> From Clipboard

the VisualRoute screen will now be in Photoshopso you can alter it

• crop the image to remove junk around the traceroute results part of the screen image

• select the Crop tool and then click-and-drag to highlight the central portion of the image you need

the crop tool

• when you are happy with your selection,right-click and Crop

this is what you should see, just animage of the traceroute results

now you need to resize the traceroute image to make a smaller version for your web page, go

Image -> Resize -> Image Size

set the width to about 300 pixels

go File -> Save As• the Filename should be ‘traceroute.png’• the Format must be PNG

now you must save the image. you need to save it in your html.pub directory. This is at ‘R:/html.pub’

you will be asked a final question about PNG Options - choose ‘None’

• now you need to capture the screen of the geography department page (‘PrtScn’)

• paste this into Photoshop, just as before• (you probably do not need to crop this image)• resize the image, to about 300 pixel width and

then save it into your html.pub directory called ‘homepage.png’.

• now you have your images ready for the web. you can quit Photoshop

Making a traceroute web page

• you are going to make a fancy new web page of the traceroute results

• start Dreamweaver• set the page title for your new page, to

something like ‘Traceroute, your name, 15th October 2004.’ (Modify -> Page Properties)

• save the web page to your html.pub directory. call the new file ‘traceroute.html’

• now add a large title at the top of the page. choose a nice font/colour for the title

next you need to insert a table for the 2 images.the table should have 1 row and 2 columns; width is 95%

Traceroute from Surrey England to Punjab, Pakistan

put the cursor in the left hand cell of the table and then clickon the Insert Image button. In the html.pub directory choose the ‘traceroute.png’ file

Traceroute from Surrey England to Punjab, Pakistan

• next, add in the ‘webpage.png’ image into the right hand cell of the table

• underneath the table of the 2 images, write a couple of lines describing the geography of the data path and the different networks traversed in the trace

• now you are ready to add some hyperlinks• you need to hyperlink the traceroute image to

http://visualroute.visualware.co.uk and the homepage image to actual web page. you add the URLs into the Link box on the toolbar

• in the description of the traceroute you wrote under the images, hyperlink the name of the geography department to their homepage

• preview your web page now to see how it is displayed in a browser (File -> Preview in Browser)

• when you are happy with the page design, save it again (in your html.pub directory)

• just like for your cv web page, you now need to run a program to make traceroute.html ‘visible’ on the web

• go to Start button -> Programs -> Internet Software -> Publish Web Pages

• remember to type in your username and password carefully

• your traceroute web page should now be online

• open the page in web browser, it will be at

http://www.homepages.ucl.ac.uk/~xxxxxxx/traceroute.html(where xxxxxxx is your username)

• For example, here is a version that I created last year http://www.homepages.ucl.ac.uk/~ucfnmad/traceroute.html

• email me the address of your web page so I can check it (m.dodge@ucl.ac.uk)

Going a bit further• some optional extras for the speedy people• try out the Mapnet tool and see if you can find

any of the networks used in your traceroutewww.caida.org/tools/visualization/mapnet/

• see if you can find the corporate website of one of the networking companies in your traceroute and see if you can find a map of their network infrastructure

• why not add more images to your traceroute web page showing any interesting network maps you’ve been able to find?