A Mobile Situated Learning Module using Open Source Geoweb Technology
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 188 | |
Author | ||
License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/31693 (DOI) | |
Publisher | ||
Release Date | ||
Language | ||
Producer | ||
Production Year | 2014 | |
Production Place | Portland, Oregon, United States of America |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
FOSS4G 2014 Portland76 / 188
7
10
14
15
16
23
24
25
28
29
33
37
39
40
43
45
46
48
50
56
64
65
69
72
74
82
89
91
98
102
107
111
114
118
128
131
132
135
138
141
143
147
149
150
157
158
161
164
165
166
173
174
175
179
185
00:00
Limit (category theory)Computer hardwareProcess (computing)Power (physics)TouchscreenFunctional (mathematics)Web 2.0Multiplication signSign (mathematics)BuildingDependent and independent variablesUser interfaceObservational studyMappingGradientPortable communications deviceProjective planeInteractive televisionElement (mathematics)Web applicationModule (mathematics)Texture mappingWebdesignStudent's t-testLocation-based serviceReal numberSpacetimeMenu (computing)Centralizer and normalizerRevision controlUniform resource locatorCartesian coordinate systemService (economics)Universe (mathematics)Natural numberContext awarenessIntegrated development environmentAsynchronous Transfer ModeProduct (business)Content (media)Level (video gaming)InformationDifferent (Kate Ryan album)Medical imagingDimensional analysisRepresentation (politics)FluidParameter (computer programming)Group actionKeyboard shortcutVisualization (computer graphics)Touch typingComputer fontComputer iconComputer programmingFaculty (division)WebsiteCombinational logicExterior algebraBitForestMoment (mathematics)Game theoryMereologySpecial unitary groupBand matrixLatent heatFlow separationField (computer science)Tablet computerEndliche ModelltheorieZoom lensArithmetic meanPresentation of a groupComputer animation
09:30
Distortion (mathematics)Projective planeWeb 2.0Web browserAreaRectangleElektronisches MarketingRevision controlDifferent (Kate Ryan album)Musical ensembleBijectionInformationCartesian coordinate systemModule (mathematics)Texture mappingPrototypeAxiom of choiceBitProcess (computing)Table (information)Exterior algebraFocus (optics)MappingStatistical hypothesis testingComputer fontContent (media)Computer iconWhiteboardComputer animation
11:53
Demo (music)SoftwareWeb browserWeb 2.0Term (mathematics)Mobile appStandard deviationCurveElement (mathematics)Cache (computing)CodeLevel (video gaming)Computer programmingModal logicLibrary (computing)Cartesian coordinate systemMonster groupWindowDigital photographyTexture mappingLimit (category theory)Selectivity (electronic)Slide ruleStructural loadSpiralBoss CorporationComputer animation
14:02
Module (mathematics)Student's t-testFactory (trading post)Different (Kate Ryan album)Texture mappingUniform resource locatorLocal ringRevision controlQuicksortArithmetic meanWage labourProduct (business)SoftwareMereologyThermal expansionTransportation theory (mathematics)Context awarenessWeb pageCache (computing)MathematicsInternetworkingDimensional analysisFerry CorstenFreezingWebsiteMenu (computing)Software bugBuildingPopup-FensterPower (physics)RoutingOrder (biology)Digital photographyAndroid (robot)Demo (music)Slide ruleNetwork topologyoutputStructural loadServer (computing)WindowVideo gameReading (process)Point (geometry)NumberTouchscreenMedical imagingMaxima and minima
18:59
Computer programmingDatabaseCartesian coordinate systemTable (information)Server (computing)Integrated development environmentSocial classStudent's t-testCodeACIDWebsiteProjective planeWhiteboardDifferent (Kate Ryan album)Exterior algebraContent (media)NumberEmailStandard deviationMultiplication signoutputComa BerenicesSimilarity (geometry)ArmLink (knot theory)Service (economics)Design by contractMappingTerm (mathematics)Presentation of a groupClient (computing)Element (mathematics)CASE <Informatik>Shift operatorResultantQuicksortWeb 2.0SpacetimeSelectivity (electronic)Inclusion mapConnectivity (graph theory)Computer fontKnowledge baseObservational studySoftware bugMachine codeMobile appTexture mappingFront and back endsLatent heatRight angleMobile WebUser interfaceGoodness of fitPrototypeComputer animationLecture/Conference
Transcript: English(auto-generated)
00:00
Okay, I think we're gonna get started. Thanks, all of you who came for coming. My name's Carl Sack. And I'm Julia Janaki. And we are from the University of Wisconsin Madison. Julia just graduated, right? Yeah. I'm a grad student in the cartography and GIS program
00:22
at UW Madison in the geography department. We're going to be presenting our process for building what we're calling a mobile situated learning module. It is a responsive map based web application that was really developed to be used with an international studies course.
00:41
We had a faculty member who teaches an international studies course on globalization who wanted a web application that students could take in the field, use on their phones and tablets, portable devices to sort of provide a guided tour of sites in central Madison that demonstrated a transition,
01:05
an economic transition from Fortis modes of production to post-Fortis economies, neoliberal economies. And so we designed and built this mobile module for him. It also has a desktop version
01:22
and we will get into some of the issues with how to create an adaptive and responsive application. So I'll turn it over to Julia for now. Okay, for our module, as a seminar,
01:41
we had a couple of goals in mind. We wanted to learn how to design mobile maps. So it's estimated by 2016, 80% of Americans will have a mobile phone. So that means that mobile phones are pretty much ubiquitous and mobile maps are a couple of finger presses away. So we really need to learn
02:01
how to design really practical mobile maps. And what also makes mobile maps really powerful is location based services. So they provide users with customized experience based on their current location. And a second goal we had in our seminar was to being in the educational university setting,
02:22
we wanted to create educational tool. And we wanted to take advantage of the nature of mobile devices to create a more alternative tool where we emphasize situated learning. It's a process where the activity and the user context is more emphasized.
02:41
So as opposed to learning in a classroom environment, like for our module, we put our students in the environment and they'll walk around, look for buildings and read up on their history and kind of tie it to globalization concepts. So it's a tool to accommodate different learning styles.
03:03
So for mobile maps, you might wanna think of what limitations a mobile device will have and what it will impose on the maps. So a hardware is very obvious one. So mobile maps or mobile devices have more limited bandwidth, processing power
03:22
and definitely battery life. So you wanna consider all that. But a main thing that we would consider in our design process is definitely the small screen size. So the small screen size, if we don't design accordingly, you will potentially cause a lot of screen clutter.
03:40
So that's something that we really need to emphasize. And something else that makes mobile devices, mobile maps really different is the location-based services. Because of that, there's all these other functionalities that come with it. So locating, searching, identifying
04:01
are all some things that a user may be doing with their mobile maps. But they also may be doing all these at the same time. So there's a lot of multitasking and the user may be more distracted. So you wanna take that into consideration. So maybe put a warning sign when there's traffic or something like that.
04:22
And so when we design a mobile map, we really wanna design, we wanna consider the context. The user context which may include the user itself, his activities and the location and the time of the map usage.
04:42
So to address all these differences in mobile devices, we're going to use adaptation as a means. And so we're basically using the concept of adaptive web design. But to kinda give you an idea of the difference between responsive and adaptive web design,
05:03
I'll just talk a little bit about it because there's two concepts that are a little bit, a lot of people may be a little confused about. So responsive web design is basically an idea where it's an alternative to making device-specific separate websites.
05:23
It was created by Ethan Marcotte and it uses a combination of fluid grids, fluid images and media queries to address different breakpoints. So it basically allows for similar content to be displayed effectively across different dimensions.
05:41
So here's an example of responsive design. So in our module, we're utilizing more adaptive design. So responsive design's basic underpinning is based on the broader concept of adaptive design,
06:01
where the same information is made available to both desktop and mobile users, but it's more customized. So it's through different representations based on the user context. And other than including adaptation on the layout,
06:24
when we're talking about adaptive design, there's also adaptation of the information. So the amount of the information or the level of detail can be varied, for example. And adaptation and user interfaces.
06:41
So certain functionalities can be present on mobile maps, but not on web maps. So a good example is panning. So you tend to probably wanna pan more on mobile maps. And searching as well. So with the location-based services, we tend to wanna probably use searching as a functionality more on mobile maps.
07:02
Another example is an action mode. So for mobile maps, we might use the touch screen. While on web maps, we might use the mouse or keyboards. And another thing we can make adaptive is the visualization or the presentation. So it could be the base map generalization can vary
07:22
and the size of the icons or the different text style and size of text fonts. So these are all a couple examples. So now I'm gonna talk about, or I listed out some elements or movable parameters
07:44
of adaptive cartography. And layout is still a very important one. So there's two main types of layouts. Fluid map layout is what we see more in mobile maps. So that's where the map will basically take up
08:02
most of the screen space. And all the other elements are kind of floating around the map. So it will help conserve the screen real estate. While the compartmentalized map layout is seen more on web maps. So you can see the central map isn't taking up as much space.
08:21
And all the other elements kind of are in their own different panels, like the menu or the legend. And I also, I listed a bunch of interactions that we may be able to vary. So as I said earlier, pan and zoom and search
08:42
are something that we might make adaptive between mobile and desktop maps. And map elements are a composite that make up the whole map. So I'll just give you one example here. So in mobile maps, we often see that
09:01
the title is included in the splash screen. So that will be a really good way to set the context and give a user an idea what the map is about. And once you enter the actual map, you won't really see the title again. And that's another good way of conserving space.
09:22
Projection is something that should be made more adaptive, but it's not really made adaptive a lot. It's because the mostly used web mark hater and just because it's a rectangular projection and it fits the browser really well. But it's notorious for its distortion
09:43
and the medium height and higher latitudes. So if you wanna make a world map or a continental map, then it's not a really good choice. But for our project, we're just making a pretty local map. So we ended up just using mark hater. And when you design icons,
10:02
you wanna make sure for mobile maps, you wanna make it more iconic or associative. So something very clear. If you make it really realistic, it might become more cluttered. So the more simpler, the better. And for typography, we could adjust the label position,
10:24
the font size and the font style. But specifically for mobile maps, we wanna try to use a very clear font that's usually sans serif and is very fluid. And finally, for mobile maps,
10:43
audio is a very good alternative. So it's a good alternative to text. So it will help the user focus on his surroundings as opposed to reading text. So we'll see that later in our demonstration of our module.
11:04
So I'll just jump to mock ups quick and kinda just give you a really overview of how we did it. So we first built up our narrative of how the application would work. And we created initial sketches of the mobile and the desktop version.
11:20
So still one-to-one information content, but different layouts and designs. And after that, we refined it based on a group process and we utilized the light table and dry eraser markers. So after that, we created our HiFi prototype in Illustrator and then our UI UX team
11:43
were able to create the application based on that. So now I'm gonna hand it to Carl. Okay, I'm gonna talk a little bit about technologies and then get into a demo. The technology stack we use, the software stack we used
12:00
was very much HTML5 and web dependent, browser dependent. We did not get into programming native mobile apps for this purpose because this was a graduate level cartography seminar. Our program has only been dealing with code with HTML and web standards really for a couple years.
12:24
And we're still very much on the learning curve in terms of catching up to a lot of you all. So we didn't use PhoneGap or anything like that to try and make a mobile native app. We just stuck to the browser for this to, for simplicity sake, if you can call it that.
12:44
We did use, make use of the HTML5 standard in particular, some SVG elements as well as the application cache. Feature of HTML5 and I can tell you all about how the benefits and limitations of that feature.
13:03
Leaflet was our UI container for the map and we used jQuery for DOM selection and stuff like that. D3 we mainly just used to efficiently load data into the DOM as well as a little library called Q
13:25
that Mike Bostock also made which I highly recommend parallelizes the asynchronous loading of data in a great way. So and then on top of those, we used a couple other UI libraries, Foundation, which is kind of a monster for window modals
13:44
and slideshows and then 2020 is a little library that provides a cute slider element that you can do before and after photos which we wanted to include. So I'll just go to the demo here.
14:02
So this is our splash page for the desktop version. We have a splash page for both and you can see there was a problem loading the offline cache here and that is because we're in hotel internet land and it has an issue with redirects to external resources
14:22
the cache does. So if anyone has a fix for that, I'd love to hear it. And then this is a leaflet bug that's making this map freeze which I haven't figured out yet but we have every so often it does that but we have a working version up and running here from the geography server. This is what it looks like after you close the splash page
14:42
on the desktop version, you have a pop-up window with some narrative text and this is optional read-aloud. My name is Steven Young, I'm a.
15:08
So there's the text. Once they get through, so that's meant for students to get sort of the introduction to the assignment to Madison as an economic context.
15:24
We have some occasional alerts for heavy traffic on street crossings and then the route to the first site. Once the first site is open, you have a slideshow which has, each slideshow has three different
15:41
photo sets on it. My name is. And live demos always screw up. So this is that 2020 slider here. And so there's three questions, three sets of questions
16:01
that are trying to engage students in thinking about the topics of the module and each site they're at and each site has a theme, labor, transportation, housing and power are all themes that are addressed by this module. And so the assignment that students have
16:22
is to go through this guided tour and come back and write an essay on the places that they've been and sort of the meaning that those places have in the broader global economic context, how Madison is connected to the world. So you have the Chinese Nike factory
16:42
replacing the local shoe factory and a map of Chinese production of shoes where shoes are produced, et cetera. That's for labor. So stuff like that throughout the module. Once each location is accumulated, you can go back to different locations.
17:02
So if I proceed on to the next site, then I could return to the shoe factory and go back there. There's also ways to access different parts of the module from within it.
17:23
If I can, how do I exit full screen? Well, is there a way to minimize this or to get it? There we go.
17:41
So I don't wanna minimize, I just wanna reduce the size of this. So you can see the layout is fluid and changes when you get to a different dimension where we have the menu down here for the mobile version and audio should automatically play
18:02
with each new site that loads. The expansion of industry and transportation networks also depended on increasing the supply. Part of the delay with the audio is in order to get the cache to work
18:23
on the mobile version of this site on Android and iOS, you actually had to convert from MP3 to base 64 encoding for the audio and then load the base 64 into the cache and that's causing a slight delay. So lots of learning experiences with building this site.
18:42
I will go ahead and hand it back to Julia to wrap up. So basically we just wanted to thank everyone in our cartography seminar. A couple of you guys are here today. And then as well as our professor, Robert Roth.
19:04
And Steven Young is the globalization professor that we work with. So this is pretty much the team of people who put this all together. So I think that's the end of our presentation and we still have maybe five minutes. So if you have any questions,
19:20
feel free to ask us either now or afterwards. Yes. Do you have the code on GitHub?
19:42
The code is on a GitHub site right now. I think it's on Rashaan Amin's GitHub site. Rashaan is back there. So which is github.com slash Rashaan Amin slash Global Madison. We will, let's see,
20:01
we'll probably end up migrating that into a different GitHub account. So if you're interested in it, I would say the best way to get the link is to email one of us. I can give you my email. It's CMSAK, that's CMSAK at whisk, W-I-S-C dot E-D-U.
20:22
And I'll be happy to send you a link. It looked like you were working with a light table on your mockup portion. Doing similar work, what would you say is needed
20:41
in terms of kind of the infrastructure? Did you work with the graphics department for font selection? Did you use the light table versus a whiteboard? And why did you do that? For the light table, it was just a really nice environment for maybe like 10 of us to be around.
21:03
And we actually just started on one side of the table and kind of just wrapped around. So I thought that was a really good way to interact with our team. But if we didn't have that, a whiteboard would be a good alternative. So I guess it depends on what we have. Yeah, I mean, so that picture of the light table
21:26
that you saw was, or the pictures of the light table, this is inside the UW Madison cartography lab, which is a full service laboratory, cartography lab
21:40
that deals with clients and does contracts with clients and all that. And there's been, of course, a huge technological shift in map making over the past 20 years. And this light table was sort of rescued from the previous technologies that were used to make maps
22:04
and it turns out that repurposing old technology sometimes has benefits. And it's like, yeah, like Julia said, it was just really nice, a really nice space to work around as a team. The other questions were, you know,
22:22
what sort of external resources did we utilize? And honestly, not a lot. That's, as a cartography program, we seek to incorporate those knowledge bases into our program. So, you know, we have specific ideas about what, about typography and, you know, general design.
22:43
We are a design-based program, so we have a lot of design expertise in the program. We did make use of a book by Ian Muehlenhaus, Professor Ian Muehlenhaus, was it mobile web, oh, yeah, web cartography, slick, this book,
23:01
which just came out last year and it's a great little introduction to, just more of a proposal for what mobile web cartography could and should look like, some proposed principles, a lot of which aren't yet grounded in empirical study and could be, so others.
23:34
Hey, I was just wondering how many students ended up using the app and was there a way for them
23:40
to like enter in their thoughts as they were going through the little demo? The application will actually be used by students for the first time next week, so hopefully that leaflet bug will be resolved by then. And we actually discussed and debated
24:04
whether to include a user input component to the site, but that would have involved setting up a server-side database and really more work on the server end than the seminar, than was within the scope of the seminar.
24:21
So we were really just front-end UI designers. Also the assignment for the classes is more essay-based, the homework that Steven likes to give is more essay-based, so it would have not really fit.
24:44
Did you build it in a way that's, like you can repurpose it for other professors, for other content? Would it be easy to like? Yeah, it wouldn't be too hard. I mean, we're loading the data through Ajax.
25:02
Everything is fairly dynamic and object-oriented and it's not, I don't think it would be too hard to repurpose.
25:22
So I'm Krista Mott coming from Portland, Oregon. Julia, I have a question for you, just so you can switch up who's talking. Do you have a sense of how people might use this going forward? Do you think that your fellow students will use this kind of project in other ways or do you think this was more of a learning experience than a one-shot deal for them?
25:41
Us as a seminar or Freda? It's definitely a good learning experience, but personally I would use something similar. I'm really into educating people. So this is a good way to kind of learn how to design for mobile maps
26:01
just because I feel like it's very necessary and it's very easy these days. And I would definitely use this more as a prototype and maybe even like go even more forward because this is our first application. So the more we design probably the more we'll figure out.
26:21
So it's definitely something I would do in the future on my own or work with different people on different projects. I realize that the comment over here or the question over here had actually asked for a number. This will be used by 300 students approximately this fall.
26:51
Okay, well probably it's the end of our time slot. So I think that's it. Thank you. Thank you. Thank you.