1. Putting the Digital City Audit maps on the web Martin Dodge (m.dodge@ucl.ac.uk) Practical 8, Friday 3rd December 2004 http://www.casa.ucl.ac.uk/cyberspace 3011: Geographies of Cyberspace

2. Aims of this practical working in your group you need to make a high impact website of the results of the Digital City Audit project the actual design of the website is up to you you need to decide which one in the group will use their account for the website

3. Saving your map for the Web I assume you made your map in Powerpoint the other week (if you have not done so, finish off the symbol mapping now) firstly, you need to make graphic files of your map and the legend key that you can use on a web page the best way to do this is using a screen-grab and then using Photoshop In Powerpoint display the map in Slide Show mode so it fills the whole screen. to do this go Slide Show -> View Show. Then use the PrtScn (Print Screen) key, top right of keyboard, to grab the screen start Photoshop and then go File -> From Clipboard

4. your map should now be in Photoshop you might want to crop or re-size the map image as necessary (see notes from earlier practical) now save the map image into the html.pub directory. remember to set for format for the file to PNG now go back to Powerpoint and repeat the process for the legend key you now have the key graphics needed for your DCA website. quit Powerpoint and Photoshop and start up Dreamweaver for the web design open a new page in Dreamweaver and save this as ‘DigitalCityMap.html’ (or similar) in the html.pub directory

5. Website design & content you have full responsibility for the design (the ‘look’) and also the content of the site in Dreamweaver place in the images you just created of the map and legend on the blank page remember rules of good design (KISS). choose a good sized font. do you want to use coloured fonts, background colours add a title to the page, your names / emails, date of survey, outline the aims of the project? perhaps a paragraph or two describing the overall field work experience and the area you surveyed. any surprises in what you found you might want to make a nice table giving some facts and figures on what you found (4 ATM, 7 fixed cameras, etc)

6. use the power of the Web to link to outside information resources you could link into other mapping projects (e.g. CCTV camera maps or mobile phone antenna one) links to site for further information (e.g. congestion charging, BT phone boxes, etc etc) use tables (visible or invisible) to layout the page are there any pictures or photos or figures you can use to make the page look interesting. use Google image search for example to find a picture of a camera or a ATM if you are dividing your map into smaller tiles you might want separate web pages which are linked together by hyperlinked arrows (like the Newbridge disability access project)

7. Disability access mapping www.may.ie/staff/rkitchin/newbridge.htm a good example of detailed mapping on the web check out the key that they use and clickable links to photos they cut the map into tiles, linked by arrows

8. Putting hotspots on the map In Dreamweaver, you can define ‘hotspots’ on the map so that when people click on them, it opens a window with a picture, text description or another web page check out the http://www.spotthecam.nl as an example to make ‘hotspots’ you select the image and then use the Map tools

9. you define ‘hotspots’ around a feature on the image using either the rectangles, circles or polygon tool then fill in the details on the Link and in the Target box put ‘new’ if you want it to open a new a window

10. ‘Spot the Cam’ in Amsterdam clickable index map linked to photos www.spotthecam.nl

11. Making your webpage visible preview your web page now to see how it is displayed in a browser ( File -> Preview in Browser ) test that any ‘hotspots’ are working when you are happy with the page design, save it again (in html.pub) just like for previous web pages, you now need to run a program to make DigitalCityMap.html ‘visible’ on the web go to Start button -> Programs -> Internet Software -> Publish Web Pages (remember to type in your username and password carefully)

12. your new DCA web page should now be online open the page in Netscape, it will be at http://www.homepages.ucl.ac.uk/~xxxxxxx/DigitalCityMap.html (where xxxxxxx is your username) are you happy with the result. check the hyperlinks work how could you improve it? email martin the URL of the page