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

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

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

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

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

7. List of geography dept. web sites http://univ.cc/geolinks/simple.php Watch out - occasionally some of the links are to email address, not websites. Just ignore these

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

9. 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)

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

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

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

13. The traceroute output If you click on the snap button you can see the table of results more clearly in a pop-up window

14. 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?

15. 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)

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

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

18. this is what you should see - Photoshop

19. 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 Photoshop so you can alter it

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

21. this is what you should see, just an image 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

22. 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’

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

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

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

26. put the cursor in the left hand cell of the table and then click on the Insert Image button. In the html.pub directory choose the ‘traceroute.png’ file Traceroute from Surrey England to Punjab, Pakistan

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

28. 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)

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

30. 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)

31. 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 traceroute www.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?