We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

A Mobile Situated Learning Module using Open Source Geoweb Technology

00:00

Formal Metadata

Title
A Mobile Situated Learning Module using Open Source Geoweb Technology
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
Publisher
Release Date
Language
Producer
Production Year2014
Production PlacePortland, Oregon, United States of America

Content Metadata

Subject Area
Genre
Abstract
Mobile device technology is being introduced into educational settings and is likely to become widespread as an instructional medium in the coming years. As of 2013, nearly three-fourths of American college students own a smartphone, while four in ten own a tablet, and a majority of students believe that mobile devices can make their education more effective. There is tremendous opportunity to harness these devices for situated learning, or lessons that take place in a real-world context, through the use of mobile-ready geoweb technologies. Adaptive web maps can be developed to guide students to important places—either virtually or physically—and facilitate landmark interpretation. This presentation will demonstrate a situated learning module developed using open source geoweb technologies for an International Studies course at the University of Wisconsin-Madison. The purpose of the module is to "make the familiar strange" to students in the Madison landscape, guiding them to historic landmarks and pairing those places with maps, images, and narration to explore the course of economic development in the U.S. The web application makes use of the principles of responsive web design to adapt to mobile or desktop devices, altering the map interface and modes of content delivery to fit the user's context. The mobile and desktop versions will each be evaluated to determine what adaptations effectively increased usability and whether situated viewing of the map on a mobile device influenced learning outcomes. A review of the application development and evaluation processes and results will be accompanied by a summary of lessons learned about how mobile mapping applications can adapt to their users and surroundings.
Keywords
25
74
Thumbnail
29:15
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
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
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
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
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)
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
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.
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,
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
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,
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
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,
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.
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.
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
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.
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
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.
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.
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,
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.
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.
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,
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,
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.
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.
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
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
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
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.
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
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
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.
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
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,
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,
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,
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.
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.
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
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
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.
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.
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.
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
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
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.
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
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
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.
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.
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
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
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
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
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.
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.
If I can, how do I exit full screen? Well, is there a way to minimize this or to get it? There we go.
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
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
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.
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.
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,
feel free to ask us either now or afterwards. Yes. Do you have the code on GitHub?
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,
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.
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
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.
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
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
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
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,
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.
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,
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.
Hey, I was just wondering how many students ended up using the app and was there a way for them
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
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.
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.
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.
Everything is fairly dynamic and object-oriented and it's not, I don't think it would be too hard to repurpose.
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?
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
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.
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.
Okay, well probably it's the end of our time slot. So I think that's it. Thank you. Thank you. Thank you.