3011: Geographies of Cyberspace
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
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 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
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 Amsterdam
clickable 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