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

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

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

• 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

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)

• 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)

Disability access mappingwww.may.ie/staff/rkitchin/newbridge.ht

m

a good exampleof detailed mappingon the web

check out the keythat they use and clickable links tophotos

they cut the mapinto tiles, linked byarrows

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

• 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

‘Spot the Cam’in Amsterdamclickable index map linked to photos

www.spotthecam.nl

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)

• 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