Putting the Digital City Audit maps on the web

1
Putting the Digital City Audit maps on the web
3011 Geographies of Cyberspace

• Martin Dodge
• (m.dodge_at_ucl.ac.uk)
• Practical 8, Friday 3rd December 2004
• http//www.casa.ucl.ac.uk/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 -gt View Show. Then use the PrtScn (Print
  Screen) key, top right of keyboard, to grab the
  screen
• start Photoshop and then go File -gt 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 mappingwww.may.ie/staff/rkitchi
n/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 Camin Amsterdamclickable 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 -gt 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 -gt Programs -gt Internet
  Software -gt 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/DigitalCit
  yMap.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