-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
329 lines (287 loc) · 23.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>Global Madison</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!--library stylesheets-->
<link rel="stylesheet" type="text/css" href="libraries/leaflet.css" />
<link rel="stylesheet" href="libraries/foundation/css/foundation.css" />
<!--for slideshow-->
<link type="text/css" rel="stylesheet" href="libraries/twentytwenty.css" />
<link type="text/css" rel="stylesheet" href="libraries/foundation/css/normalize.css" />
<!--custom css-->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="splashContainer">
<div id="splash">
<h1>Global Madison: Paths To Change</h1>
<p><em>"It is a sense of place, an understanding of 'its character', which can only be constructed by linking that place to places beyond... What we need, it seems to me, is a global sense of the local, a global sense of place."</em><br><span id="massey">—Doreen Massey</span></p>
<p>On wide screens, some photos may appear cropped at the bottom. In this situation, reduce your browser's width for better viewing. This website was designed for modern mobile and desktop browsers; you may encounter significant problems on older browsers that do not fully support HTML5 (e.g. IE<10, Safari<6).</p>
<p>The second button below will take you to the map to begin your journey, showing the route from the UW campus to the first landmark. If you are not starting from campus, you can click the first button to get Google Maps directions from your current location to the first landmark.</p>
<div class="redButtonContainer">
<div class="redButton inln">
<a class="goToMap" href="#">
<div><span style="font-weight: bold">
Go to the Map!
</span></div>
</a>
</div>
<div class="redButton inln">
<a class="goToMap" href="https://www.google.com/maps/place/43%C2%B004'52.5%22N+89%C2%B022'42.8%22W/@43.081258,-89.378567,15z/data=!3m1!4b1!4m2!3m1!1s0x0:0x0" target="_blank" title="Get directions from Google Maps">
<div><span>
Directions
</span></div>
</a>
</div>
<div id="loading">
<img src="images/loading.gif"/>
<span>Loading Offline Cache. Please wait about 30 seconds if you plan to use the module offline...</span>
</div>
</div>
</div><!--end splash screen div-->
</div>
<div id="container">
<!--popup for user interface prompts-->
<!--<div id="playBubble" class="callout border-callout">
<span></span>
<b class="border-notch notch"></b>
<b class="notch"></b>
</div>-->
<div id="iconClickBubble" class="callout border-callout">
<span></span>
<b class="border-notch notch"></b>
<b class="notch"></b>
</div>
<nav class="top-bar" data-topbar data-options="is_hover: false">
<ul class="title-area">
<li class="name">
<audio controls src="audio/intro_site1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">Menu</a>
</li>
</ul>
<section class="top-bar-section">
<!--left nav section -->
<ul class="left">
<li class="has-dropdown">
<a href="#" data-options="align:left">
<img class="landmarks"src="images/landmarks.png" alt="Landmarks"/>
Landmarks
</a>
<ul class="dropdown" id="locationMenu"></ul>
</li>
<li>
<a href="#" data-reveal-id="helpModal" data-reveal>
<img src="images/help.png" alt="Help"/>
Help
</a>
</li>
<li>
<a href="#" data-reveal-id="infoModal" data-reveal>
<img src="images/information.png" alt="About"/>
About
</a>
</li>
<li class="audioText">
<a href="#" data-reveal-id="textModal" data-reveal>
<img src="images/text.png" alt="Text"/>
<span>Text</span>
</a>
</li>
<li>
<a href="#" data-reveal-id="assignmentModal" data-reveal>
<img src="images/assignment.png" alt="Text"/>
<span>Assignment</span>
</a>
</li>
</ul><!--end left nav section-->
</section>
</nav>
<div id="map">
<!--switch from osm tiles to historic tiles>
<div id="tileToggle"><b>Show Historic Basemap</b></div>
<-->
</div><!--end map div-->
</div><!--end container div-->
<!--slideshow for marker div-->
<div id="slideshowModal" class="reveal-modal" data-reveal>
<p id="show_title" class="title"></p>
<!--more work need to do to change image links dynamically in markers.js. Will come later-->
<div id="slideshow_images">
<ul id="imagesList" class="orbit-slideshow" data-orbit></ul>
</div>
<div id="slideshow_texts"></div>
<a id="closeSlideshow" class="close-reveal-modal"></a>
</div><!--end slideshow for marker div-->
<!--Get Info Reveal-->
<div id="infoModal" class="reveal-modal" data-reveal>
<p class="modalTitle">About This Project</p>
<p><em>Madison's East Isthmus: Paths to Change</em> mobile learning module was created for the Introduction to International Studies (IS101) course at the University of Wisconsin-Madison by Spring 2014 Mobile Cartography Seminar participants Brian Davidson, Julia Janicki, Vanessa Knoppe-Wetzel, Fei Ma, Rashauna Mead, Chelsea Nestel, Caroline Rose, Carl Sack, and Guiming Zhang under the direction of Professor Robert Roth, with the cooperation of International Studies Professor Stephen Young and Teaching Assistant Mario Bruzzone. Narration was written and performed by Stephen Young. Updates were performed 2014-2015 by Carl Sack; current version is 1.1. All site content is licensed Creative Commons 3.0 unless otherwise noted below. Questions or suggestions about the project should be directed to Stephen Young (<a href="mailto:sjyoung3@wisc.edu" target="_blank">sjyoung3@wisc.edu</a>) and Rob Roth (<a href="mailto:reroth@wisc.edu" target="_blank">reroth@wisc.edu</a>).</p>
<hr/>
<p class="lead">Map Tiles</p>
<p>Map tiles are Mapbox "Outdoors" Tileset. <a href="https://www.mapbox.com/about/maps/" target="_blank">Copyright Mapbox; data copyright OpenStreetMap Contributors</a>.</p>
<p class="lead">Slideshow Images</p>
<p>Wisconsin Historical Society Archive (copyrighted, used with permission):
<ul>
<li>Badger State Shoe Co. Building (ca.1899, Milwaukee)</li>
<li>Crowded Market (ca.1910)</li>
<li>Fight Madison Gas and Electric Rate Increase (ca.1974)</li>
</ul>
</p>
<p>Carl Sack (2014, Creative Commons licensed):
<ul>
<li>Former Badger State Shoe Company Building (now Das Kronenberg Condominiums)</li>
<li>Former City Market Building (Now City Market Apartments)</li>
<li>Former Chicago and NorthWestern Railroad Station (Now Madison Gas & Electric offices)</li>
<li>Madison Gas & Electric Company Blount Station sign</li>
<li>Power Plant Transformers</li>
<li>Wil-Mar Community Center</li>
<li>Willy Street Co-Op</li>
<li>Madison Candy Company plaque</li>
<li>Madison Candy Company building</li>
</ul>
</p>
<p>Others:
<ul>
<li>Friends of Historic Third Lake Ridge: <a href="http://www.thirdlakeridge.org/results.asp?category=Buildings" target="_blank">Chicago and Northwestern Depot</a> (ca.1920)</li>
<li>Zero-Drop.com: <a href="http://zero-drop.com/?p=1614" target="_blank">Nike Shoe Factory Floor</a> (2013, no license listed)</li>
<li>Katie Kowalski: Nike Factories Worldwide (map). No longer included, but a good site for further information on Nike and other garment factories, is Anna Flagg, Stephanie May, Jasmine Du, and Chad Smith: <a href="http://www.annaflagg.com/work/garmentmapping/" target="_blank">Where do major garment companies manufacture their clothes?</a> map (2013, Creative Commons)</li>
<li>redjar (Flickr): <a href="https://www.flickr.com/photos/redjar/133802648/in/photolist-5bBW89-4enno-dDYBzV-sNFTL-f8MXFi-5yZ9st-edtQmA-fcxzJH-5JU3VA-d7NqV1-bsXaiF-cUgTwC-83Afko-gQgtd-4YatU4-acNiog-8EEsuB-cPLSd-65D5Q1-hDiNW-9KUm6p-489VR8-iq7pie-7DU5sE-f8MYL6-4MXBqX-GyoC4-3Dt3G-4YatPT-4YatQM-gwhNa-diXkuY-9WJWcF-4MUFEi-kSDYzx-8mUzbb-bpRRrn-7j6SHS-6pXr3r-ej2SAM-DD6FZ-YxYWM-JtjDo-dDYG1g-d3vRF-dc1ms3-9zMa1K-52NDEA-5cJxNM-HVWVW" target="_blank">Shoes</a> (2006, Creative Commons)</li>
<li>Arthur H. Robinson Map Library, University of Wisconsin-Madison: <a href="http://www.geography.wisc.edu/maplib/index.html" target="_blank">Madison historic aerial photo WU-7-504</a> (United States Department of Agriculture 1937, public domain)</li>
<li>United States Geological Survey: <a href="http://earthexplorer.usgs.gov/" target="_blank">East Isthmus high-resolution orthophoto 16tcn060715</a> (2012, public domain)</li>
<li>Katie Kowalski: CO2 Trade Map. Adapted from Proceedings of the National Academy of Sciences: <a href="http://www.pnas.org/content/early/2011/10/13/1107409108" target="_blank">Millions of tons of CO2 in trade in 2004: Production and Consumption emissions</a> (from Steven J. Davis, Glen P. Peters, and Ken Caldeira, 2011, <em>The Supply Chain of CO2 Emissions</em>)</li>
<li>Dual Freq (Wikimedia Commons): <a href="http://en.wikipedia.org/wiki/Mendota_Hills_Wind_Farm#mediaviewer/File:Illinois_wind_farm_near_I-39_exit_82.jpg" target="_blank">Illinois wind farm near I-39 exit 82</a> (2006, Creative Commons)</li>
<li>Caroline Rose: Madison Zoning 1945 map (based on 1945 City of Madison zoning map)</li>
<li>Havens Center, University of Wisconsin-Madison: <a href="http://willystreetblog.com/wp/2012/05/26/a-terrorist-gave-me-lemonade/" target="_blank">Dow Day Protest</a> (1967, Creative Commons)</li>
<li>Fei Ma: Biederstaedt-Breitenbach Grocery Plaque (2014, Creative Commons)</li>
<li>Old Market Gourmet Coffee: <a href="http://oldmarketgourmetcoffee.com/growing-regions/" target="_blank">Coffee Growing Regions of the World</a> map</li>
</ul>
</p>
<hr/>
<p class="lead">Icon Credits</p>
<p>Map icons (Labor, Transportation, Power, Housing): Julia Janicki</p>
<p>The below icons were acquired from <a href="http://thenounproject.com/" target="_blank">The Noun Project</a> and licensed under Creative Commons Attribution.</p>
<ul>
<li><em>Headphones</em>: Mourad Mokrane</li>
<li><em>Help</em>: Tommy Kuntze</li>
<li><em>Alert</em>: Juergen Bauer</li>
<li><em>Landmarks</em>: Q. Li</li>
<li><em>Help</em>: Tommy Kuntze</li>
<li><em>Findme</em>: Ricardo Moreira</li>
<li><em>Text</em>: Alex Fuller</li>
<li><em>Coffee</em>: Jacob Halton</li>
<li><em>Information</em>: P.J. Onori</li>
<li><em>Findme</em>: Ricardo Moreira</li>
<li><em>Globe</em>: Edward Boatman</li>
<li><em>Document</em>: Thomas Le Bas</li>
</ul>
<a class="close-reveal-modal">×</a>
</div>
<div id="helpModal" class="reveal-modal" data-reveal>
<a class="close-reveal-modal">×</a>
<p class="modalTitle">Help</p>
<p><em>For PDF instructions, <a href="GlobalMadison_Help.pdf" target="_blank">click here</a>.</em></p>
<ol>
<li><a class="toc" href="#controls">Tour narration</a></li>
<li><a class="toc" href="#landmarks">Navigating to landmarks</a></li>
<li><a class="toc" href="#slideshows">Slideshow prompts</a></li>
<li><a class="toc" href="#lost">Lost?</a></li>
<li><a class="toc" href="#contact">Report a problem</a></li>
</ol>
<p class="lead">
<a class="toc" name="landmarks">Navigating to landmarks</a>
</p><p>
When you enter the map, you will see a red route line leading you to the first landmark. On a mobile device, you may spread two fingers apart to zoom in to see more detail on the map; on a full-sized device, click or tap the <b>+</b> or <b>-</b> icons to zoom in or out. Follow the red route line to navigate to the landmark. To see your current location on a mobile device, tap the <img src="images/findme.png" alt="findme"> icon (not visible on desktop view). This will activate a blue GPS dot at your location the map. To save your battery, the GPS dot will disappear after ten seconds, but you may reactivate it at any time. <b>Pay attention to your surroundings and use caution in locations marked with the <img src="images/alert40_red.png" style="width: 28px; height: 28px" alt="alert"> icon</b>, which you may click or tap to see a description of the hazard. Your destination is marked with a square red icon. After the first landmark, prior landmarks will be shown in gray. You can zoom directly to a landmark by choosing that landmark in the <span class="menudemo"><img src="images/landmarks.png">Landmarks</span> menu in the menu bar. Only landmarks that are currently active or that you visited previously will appear in the <span class="menudemo"><img src="images/landmarks.png">Landmarks</span> menu. Once you arrive, click or tap the landmark's icon. This will open that landmark's narration.
</p>
<p class="lead">
<a class="toc" name="controls">Landmark narrations</a>
</p><p>
When you click on a landmark icon, you are presented with text box containing an image of the landmark and a brief overview of that landmark. Each landmark on the guided tour has a similar background description providing important context for understanding the place and responding to the slideshow prompts. Click <span class="fakeButton"><img src='images/headphones.png' alt='Read Aloud' style="width: 18px; height: 18px; margin-right: 5px;"/>Read Text Aloud</span> to listen to an audio recording of the background description. Click the <span class="fakeButton">next ></span> and <span class="fakeButton">< previous</span> buttons to advance or review the text. When you have reached the end of the narration, clicking the <span class="fakeButton">next ></span> button or the X in the top-right corner will close the narration window and open the slideshow prompts. You may reactivate the narration window at any time by clicking the <span class="menudemo">Text</span> menu button.
</p>
<p class="lead">
<a class="toc" name="slideshows">Slideshow prompts</a>
</p><p>
When the narration window closes after its first viewing for a given landmark, a slideshow with images and question prompts will open automatically. For each landmark, there are three thematic slides: Interdependencies, Inequalities, and Alternatives. Each prompt includes a pair of images comparing the landmark 'then' and 'now.' Use the slider between the images to compare the pair of images by swiping the slider back and forth. Use the white arrow buttons to change the slide. As you think about each prompt, take notes and photographs to support your visual essay. The final slide for each landmark is a button allowing you to <span class="fakeButton">Proceed to the Next Site</span>, which then maps your route to the next location on the guided tour.
</p>
<p class="lead">
<a class="toc" name="lost">Lost?</a>
</p><p>
On a mobile device, you can always see your location by clicking the <img src="images/findme.png" alt="findme"> icon. If at any time you get disoriented navigating the Isthmus, click on one of the following links to navigate to the landmark using Google Maps:
<ul>
<li><a href="https://www.google.com/maps/place/Das+Kronenberg+Condominiums/@43.081319,-89.378198,17z/data=!3m1!4b1!4m2!3m1!1s0x88065369f3819705:0x63bf0580f44bbad0" target="_blank">Landmark #1: Badger State Shoe Factory</a></li>
<li><a href="https://www.google.com/maps/place/200+S+Blair+St,+Madison,+WI+53703/@43.0774133,-89.3767288,17z/data=!4m2!3m1!1s0x8806536b4a2bb4e1:0x7618028ec4564f9" target="_blank">Landmark #2: Chicago and Northwestern Railroad Station</a></li>
<li><a href="https://www.google.com/maps/place/720+E+Main+St,+Madison,+WI+53703/@43.0795854,-89.3749423,17z/data=!3m1!4b1!4m2!3m1!1s0x8806536b8b80f493:0xc93999dc8755ff94" target="_blank">Landmark #3: Power Plant Transformers</a></li>
<li><a href="https://www.google.com/maps/place/Wil-Mar+Neighborhood+Center/@43.079812,-89.367033,17z/data=!4m2!3m1!1s0x88065373c65357af:0x5b5a679d861f0fb2" target="_blank">Landmark #4: Wil-Mar Community Center</a></li>
<li><a href="https://www.google.com/maps/place/Ground+Zero+Coffee/@43.078019,-89.372148,17z/data=!3m1!4b1!4m2!3m1!1s0x8806536d04099895:0x2d3a628946391424" target="_blank">Landmark #5: Ground Zero Cafe</a></li>
<li><a href="https://www.google.com/maps/place/Memorial+Union/@43.076251,-89.399754,17z/data=!3m1!4b1!4m2!3m1!1s0x8807accaa0165ae1:0x4001e911ad143b35" target="_blank">UW Memorial Union</a></li>
</ul>
</p>
<p class="lead">
<a class="toc" name="contact">Report a problem</a>
</p><p>
If you notice a bug or other issue, please e-mail a brief description to <a href="mailto:reroth@wisc.edu">reroth@wisc.edu</a>.
</p>
<p></p>
</div>
<div id="textModal" class="reveal-modal" data-reveal>
<div>
<p class="title"></p>
<img class="textImage">
<p class="script">Text for audio</p>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="assignmentModal" class="reveal-modal" data-reveal>
<div class="">
<p class="modalTitle">Assignment</p>
<a class="close-reveal-modal">×</a>
<p><em><a href="GMassignment_2015.pdf" target="_blank">Click here for a PDF of the assignment</a></em></p>
<p>Once you’ve completed the walking tour, you need to arrange the notes and images you collected into a coherent, well-organized narrative. The main purpose of the photo essay is to explain how and why Madison’s east isthmus has been transformed through its interconnections with other places. As such, you need to demonstrate that you know what it means to develop “a global sense of place” (see the assigned article by Massey). A complete paper should be 2000 words long – approximately 6 pages, size 12 font, 1.5 spaced – and must contain the following:</p>
<ul>
<li>A proper title. Please note that “My 101 Photo Essay” is not a proper title. The title should tell us something about the content of your paper – be creative!</li>
<li>At least two sources that you consulted to help develop your analysis. These could be scholarly papers or newspaper/magazine articles. You may want to look for sources that discuss Madison or the Midwest specifically, or for materials that discuss global interdependencies more broadly.</li>
<li>At least two images that you took during the tour. The purpose of using a photograph is to help convey a specific idea or feeling, so pick something that is striking. The images must be correctly labeled and captioned [e.g. “Image 1: Murals on the side of a wall on Williamson Street.]</li>
<li>A properly-formatted bibliography of any articles, books, magazines and websites that you cite in your paper. The bibliography should be in the <a href="http://www.chicagomanualofstyle.org/tools_citationguide.html">Chicago author-date style</a>.</li>
</ul>
<p>Below are some questions to help you organize your essay into different subsections. Please note that these prompts are only meant to guide your essay – you don’t have to follow this outline exactly. However, your paper must have some sort of logical structure and you might find it useful to use 2 or 3 subheadings. </p>
<ol>
<li><em>What is this essay about? (approx. 200 words)</em><br>The introduction should provide a snapshot of the essay. You may want to start with a short vignette to draw the reader in. You should also briefly set out the structure of the essay.</li>
<li><em>What have been some of the key global transformations that have shaped Madison over the last 150 years or so? (400 words)</em><br>The next section should include a brief overview of changing global interdependencies. In particular, you may want to discuss the transition from Fordist to Post-Fordist production systems and contextualize this in relation to global patterns of industrialization/de-industrialization.</li>
<li><em>How are these changes reflected in the landscape of Madison’s East Isthmus? (650 words)</em><br>This section should provide some specific examples of how the global restructuring described above is “sedimented” in landscape of the east isthmus. This would probably be a good place to add your photos.</li>
<li><em>How are changes in Madison are interrelated with changes in other parts of the world? (400 words)</em><br>Relational analysis involves thinking in terms of connections across space. You need to tell the reader how the changes that you’ve described in Madison are linked to changing cultural, political and economic geographies in other parts of the world. Obviously, there are lots of places you could talk about, so identify one or two examples that you find particularly compelling.</li>
<li><em>What does this tell us about how we conceptualize globalization? (350 words)</em><br>In the final section, you need to situate your discussion of Madison in terms of broader debates about how we should conceptualize and study globalization. What are the main points you’ve taken from the experience? What implications does this have for you as an IS Major and as a “global citizen”? Do you think it will change the way you read the landscape in your hometown [be that in Beloit, Beijing or Berlin]?</li>
</ol>
<p class="lead">Deadline: Monday, May 4</p>
</div>
</div>
<!--SCRIPTS-->
<!--foundation-->
<script src="libraries/foundation/js/vendor/jquery.js"></script>
<script src="libraries/foundation/js/foundation.min.js"></script>
<script src="libraries/foundation/js/foundation/foundation.joyride.js"></script>
<script src="libraries/foundation/js/vendor/jquery.cookie.js"></script>
<script src="libraries/foundation/js/vendor/fastclick.js"></script>
<script src="libraries/foundation/js/foundation/foundation.reveal.js"></script>
<script src="libraries/foundation/js/foundation/foundation.orbit.js"></script>
<script src="libraries/foundation/js/foundation/foundation.interchange.js"></script>
<script src="libraries/foundation/js/vendor/modernizr.js"></script>
<!--jQuery stuff-->
<script src="libraries/jquery.event.move.js"></script>
<script src="libraries/jquery.twentytwenty.js"></script>
<!--sweet sweet magic sauce-->
<script src="libraries/leaflet.0.7.3.js" type="text/javascript"></script>
<script src="libraries/mapbox.js" type="text/javascript"></script>
<!--for data loading-->
<script src="libraries/queue.js"></script>
<script src="libraries/d3.v3.js"></script>
<script src="libraries/base64-binary.js"></script>
<!--project scripts-->
<script type="text/javascript" src="js/findMeButton.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>