A Mobile Situated Learning Module using Open Source Geoweb Technology


Formal Metadata

A Mobile Situated Learning Module using Open Source Geoweb Technology
Title of Series
Sack, Carl
Janicki, Julia
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.
FOSS4G, Open Source Geospatial Foundation (OSGeo)
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
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.
adaptive web maps
situated learning
responsive design
Computer programming Group action Product (category theory) Process (computing) Observational study Multiplication sign Gradient Student's t-test Cartesian coordinate system Field (computer science) Portable communications device Faculty (division) Revision control Tablet computer Web application Centralizer and normalizer Forest Website Dependent and independent variables Game theory Asynchronous Transfer Mode
Context awareness Service (economics) Presentation of a group Multiplication sign Scientific modelling Adaptive behavior Combinational logic Student's t-test Computer font Webdesign Computer icon Power (physics) Medical imaging Sign (mathematics) Latent heat Fluid Natural number Computer hardware Energy level Representation (politics) Subtraction User interface Texture mapping Process (computing) Touchscreen Mapping Information Moment (mathematics) Content (media) Bit Limit (category theory) Functional (mathematics) Band matrix Uniform resource locator Arithmetic mean Exterior algebra Integrated development environment Visualization (computer graphics) Hausdorff dimension Universe (mathematics) Dependent and independent variables Website Location-based service Separation axiom
Texture mapping Spacetime Touchscreen Mapping Multiplication sign Real number Adaptive behavior Element (mathematics) Zoom lens Projective plane Interactive television Parameter (computer programming) Mereology Web 2.0 Computer animation Subtraction
Area Elektronisches Marketing Focus (optics) Texture mapping Mapping Projective plane Web browser Rectangle Computer font Computer icon Exterior algebra Computer animation Position operator Distortion (mathematics)
Process (computing) Information Demo (music) Content (media) Bit Cartesian coordinate system Local Group Table (information) Revision control Prototype Computer animation Software Bijection Whiteboard Subtraction
Web page Computer programming Curve Boss Corporation Slide rule Standard deviation Mobile app Demo (music) Code Structural load Element (mathematics) Spiral Web browser Cartesian coordinate system Limit (category theory) Web 2.0 Revision control Digital photography Term (mathematics) Energy level Selectivity (electronic) Monster group Library (computing)
Web page Point (geometry) Slide rule Context awareness Server (computing) Texture mapping Student's t-test Number Revision control Digital photography Computer animation Network topology Quicksort Routing Reading (process) Window
Context awareness Texture mapping Wage labour Transportation theory (mathematics) Student's t-test Power (physics) Arithmetic mean Uniform resource locator Video game Factory (trading post) Website Quicksort Subtraction
Medical imaging Touchscreen Computer animation Factory (trading post) Mereology
Revision control Maxima and minima Mathematics Hausdorff dimension
Revision control Android (robot) Transportation theory (mathematics) Structural load Order (biology) Website output Mereology
Computer programming Server (computing) Service (economics) Presentation of a group Observational study Code Multiplication sign Connectivity (graph theory) ACID Similarity (geometry) Design by contract Student's t-test Coma Berenices Client (computing) Computer font Number Web 2.0 Inclusion map Lecture/Conference Term (mathematics) Linker (computing) Database Selectivity (electronic) Subtraction Social class Standard deviation Email Shift operator Spacetime Mapping Knowledge base Projective plane Element (mathematics) Content (media) Cartesian coordinate system Table (information) Exterior algebra Computer animation Integrated development environment Personal digital assistant output Website Whiteboard Quicksort Resultant
OK inquiry it started on thinks is all of you are who came overcoming minus girl sack and you have to make out and we are from the university Wisconsin Madison Julia graduate and and a grad student in the Cartography and GIS program UW-Madison department we're going to be presenting our process for building a what we're calling mobile situated learning module it is our response of map-based web application that was really developed to be used with an international studies costly a faculty member who teaches International Studies course on globalization who wanted a web application that students could take in the field he's on their phones and tablets of portable devices had to sort of provide a guided tour of sites in central Madison that demonstrated a transition and economic transition from forest modes of production to post-Fordist economies neoliberal economies and us so we designed and built this mole module for him and also has a desktop version and we'll get into some of the issues with our how to treat an adaptive and responsive application of all turnover to Julia and the game for our mind your own time
as a sun and I we had a couple goes in mind we wanted to learn how to design maps so it's estimated that by 2016 80 per cent of on Americans have a mobile phone so that means that mobile phones are pretty much ubiquitous and mobile maps the couple finger presses away so we will really need to learn how to design a really practical mobile maps and what also makes mobile maps really powerful as location-based services so they provide users with customized experience based on their current location and a 2nd or we had an some was to being in educational university setting we wanted to create educational tool and we wanted to take advantage of the the nature of mobile devices to create more alternative to a where we emphasize situation as situated learning it's a process where the activity and user context is more emphasized so as as opposed to learning and classroom environment like for model we put our students and environment and I walk around and look for buildings and read up on the history and annotated to globalization concepts so it's a 2 hour to accommodate different learning styles so for a moment maps and you may want to think about what limitations and mobile devices have and we will impose on the maps so and a hardware is very obvious 1 so mobile maps are mobile devices have my limited bandwidth processing power and definitely battery life so you wanna consider out that that a main things out that we considered in design process is definitely the small screen size so the small screen size but and if we don't design accordingly you will potentially because a lot of screen clutter so that's something that we really need to emphasize the and something else that makes mobile devices mobile maps really different is the location-based services because of that there's these on other functionalities that come with it so locating searching identifying some things that a user may be you doing with their mobile maps but they also may be doing these at the same time so there's a lot of multitasking and the user may be my distracted so you want to take that into consideration so maybe put a warning sign when this traffic something like that and so when we design a mobile map we really wanted to send a money monarch considered a context of the user contexts which may include that user itself has activities and the location and the time of the map usage and so I have to address all these differences in mobile devices and we're going to use that tation as a means to end so we're basically using the concept of adaptive well design that it can give you idea of what of the difference between responsive and adaptive web design and subtle little bit about it because there's 2 kinds of set a little bit and a lot of people may be a little confused about and so responsive web design is basically an idea where it's alternative to making device specific separate websites and it was created by the market and it uses a combination of fluid grids food images and media queries to address different requirements and so basically allows for a similar content to be displayed effectively across different dimensions the so he is on an example of a responsive design the so in our mind your own and where utilizing right designed so it's responsive design the basic
underpinning is based on the broader concept of adaptive designs where the same information is made available outside of desktop and mobile users but it some Mark customized so that it's very different I representations based on the user context and other then including and adaptation and the layout and when we're talking about the adaptive designed to there's also adaptation of that information so the amount of the information on the level of detail can be very for example and adaptation in user interfaces so certain functionalities can be present and mobile maps but not maps so that the example is pending say 10 to 1 probably 1 of the Panama and mobile maps and searching as well so with the location based services we tend to run is searching as a function of the mobile maps another example is that a national so for mobile maps you might use the screen on weather maps you might use the mouse or keywords and another thing we can make adaptive is the visualization of the presentation so it could be the base map generalization can vary and the size of the icons or 2 different text style and size of text fonts there are a couple
examples the so now I'm gonna talk about wireless set out some of the elements are movable parameters of adaptive part of a terror cartography and layout is still very important 1 so on and there's 2 main types of layouts
fluid map where is what we see more and more of a 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 them and so on and will help conserve this screen real estate other compartmentalize map layers in and web maps so you can see the center map isn't as taking up as much space and all the other elements kind of and they're on different panels by demand demanded legends the the now so do I was that a bunch of interactions that we may be able to vary and so as I said earlier and then zoom and search or something that we might make adaptive at between mobile and desktop maps and and that elements are composite that make up the home that and so I'll just give you 1 example here so and mobile maps we often see that the title is included in this West green so there will be a really good way to set the context and give a user idea what the demand is about and once you enter back map you are listed a title again that's another good way of considering space the the the the time projection is something that should be made my adaptive but it's not really a not really mad adaptive a lot and that's because of
the use web marketers and just because it's a rectangular projection if it's the browser really wrong on but it's not areas for a on this distortion and a medium
higher and higher latitudes so if you wanna maker and world map where continental mapped and it's not a really good choice but for our project where just making a pretty local map so we ended up just using market at the and we design icons you wanna make sure for mobile maps you wanna make it more can associative so something very clear and if you make area really realistic it might become more cluttered so and the more simple led the better and photography and we could look at just the label position defined size and font styles that are specifically for mobile maps you wanna try a very clear find that's usually san serif and is very fluid and finally on for mobile maps idea was a very good alternative and so it's a good way to it that alternative to text so and it will help the user focus on his surroundings as opposed to reading and text so we'll see that later in a demonstration of our as a natural and so just jump to mark
scripture and Canada's give a really good overview of how we did it and so we 1st build up our narrative of how the application will work and we create initial sketches and of the mobile and desktop versions of 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 a light table and the dry erase America's markers so after that we created a hi fi prototypes and illustrator and then I UI UX team and were able to create application this and that so now I'm going to hand it to Carol FIL talk a little bit
about technologies and then get into a demo of the technology we saw stack we use software step we used on was very much additional 5 and weather dependent and browser-dependent so we did
not get into programming native mobile apps for this purpose because from this is a graduate level cartography seminar program has only been dealing with code that you know with the HE and Web standards really a a couple years on and we're still very much on the learning curve in terms of catching up to you all you all of so we didn't use from after anything like that to try and make a mobile all native app which is stuck to the browser offer this to for simplicity's sake now if you can call it that but we did deduce all make use of variational 5 standard in particular answer must be g elements as well as the application catch on feature original 5 and so I tell all about how could the the benefits and limitations of that feature of leaflet was are you i container for the and we used to g query so that you know in terms of the offer Don selection and stuff like that D 3 we mainly just used to load of efficiently load data into the Don as well as of the library called you that my boss also made which I highly recommend paralyzed paralyzes the asynchronous loading the data on 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 we know morals and slide shows and 20 20 not provide is a library that provides a cheap spiral meant that you can do before now photos which we want to include so I'll just go to the demo here the and so this is our 1st last
splash page for the desktop version we have we have a splash page for both and you see there a problem loading offline cashier and that is because outward hotel in land and on and it has an issue with redirects to external resources of the because the cached us so anyone has no love to here and this is a
leaflet above that's making this map trees which I haven't figured out yet but we have every so often
does that but we have a working version up and running here are off 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 narrative texts and this is you know by optional read aloud this the that is the point the and so what is the value number so there so you know there's the text once they get through those so that's meant for students to ah get sort of the introduction to their their assignment to Madison as an economic context and we have some you occasional alerts her the heavy traffic on street crossings and in the route to the 1st sight once the 1st bursitis open you have a slide show on which has each slide show has 3 different photo sets solid what
is it that life demos always screw up so this is that 20 20 slider here and there and this so there's 3 questions 3 sets of questions that we are trying to engage students in thinking about the topics of the of the module and and each site there at each site has a theme labor our transportation and housing and power are all themes that a 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 banned and sort of the meaning that those places have at in the broader global economic context how medicine is connected to the world so you have the Chinese New 90 factory replacing the local she factory and a map of know Chinese you verb overproduction of issues were shoes produced etc. out that's for labor so stuff like that throughout the module power once each location is is
accumulated you can go back to different locations of leprosy on to the next site home than I could return
to the shoe factory no know and go
back there you know there's also
you know ways to access
different parts the module From with it but if I can the
example screen image OK it's well as a way to minimize this and to get it so half of the 1 of
minimizer just wanna check reduce the size of this so you see the
layout is fluid and read and
changes when you get to a different a different dimension where we have the menu down here
for the mobile version can't audio
should automatically play around with each new site loads the searches industry transportation that works also little creases so what part of the delay with the audio is in order to get it the moles the cash to work on the mobile version of the site on Android and IOS you actually actually had to convert from M P 3 to be 64 encoding for the audio and then load the base 64 and the cash that's causing slight delay so what's a learning experiences with Building the site and I will go ahead and and that
the Julia about now and so basically we just wanted to thank you and everyone in our cartography Seminara couple of you guys are here today
and then as well as the professor Robert Roth and and Stephen Young instead globalization professor that we work with so this is pretty much the team of
people put this up together so I think that's the end of our presentation and we still have maybe 5 minutes so if you have any questions feel free to ask us even our own afterwards in yes you know that do you have occurred on get up on the code is on my uh get help site right now I think it's on a shaman means get help cited which shows that they're all on our so which is github . com site for shining needs slash global Madison home we will and C will probably end up migrating down to a different get how account so if if you're interested in an arm I would say the best the best way to get the link is to e-mail 1 of us I can give you my e-mail it's C. M S ACK at CM at whisk to you I S C that EDU and I'll be happy to send you a link the the with I would like you work with a light table in the market 14 of doing similar work what would you say is needed in terms of coming infrastructure to you graphics department for font selection the Jews a lot alike tuple versus a whiteboard and why do and where they're like table is is a really nice sound environment for maybe like 10 of us to be around and it was and we actually just started on 1 side of the table and can just wrapped around so I have other was a really weird and then with our team and that if we don't have that wiper will be a good alternative so against that depends on what we have yeah I mean it's so that that picture the light table that you saw was from the pictures a light table this is inside the UW-Madison cartography lab and which is of full service of laboratory cartography lab that deals with clients and and takes you just contracts with clients not let alone a element you know that 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 you know all the previous previous start technologies that were used to make maps and it turns it turns out that repurposing all technology sometimes has benefits and this is play yeah like Julia set it was just really nice is that really nice space to work around as a team and all the other the other questions were of you know what sort of external resources did we utilize and honestly not a lot that's the as a cartography program we seek to incorporate those knowledge bases fit into our program so you know we have specific ideas about what about take biography and so on you know general design we're design design based program so we have a lot of design expertise in the program of what we did make use of a book by Ian you in-house Professor Ian you in house of set more wool web opt out Web cartography slick had this book on which just came out last year and it's it's a great little introduction to just have more of a proposal for what what more Web cartography could and should look like some some proposed principles a lot of which are yet grounded in empirical study could be itself the this but in the case of I just wondering how many students and thing out and with their way for them to you I like enter and their as they were going through them all of them the application will actually I'll be used by students for the 1st time next week so hopefully that the foot bubble few result but there are some element this means we actually discussed and debated whether to include user input components onto the site but that would have involved setting up a server-side database and really more more work on the server and then then the the seminar that was within the scope of the so we were really just fine and UI designers it but also that and you know the assignment that further classes it's more as base that the whole the the whole that Stephen likes to get as more acid itself that not really fit did you build in a way that's we'd be like you can repurpose it for other comm professors for the content that would be easy to late yeah it it would be too hot I mean were loading the the data through Ajax on everything that is fairly dynamic and and to object-oriented and it's not of I don't think it would be too hard to repurpose thank the you for so I'm just mockery from Portland Oregon jeweler question for you and just you can switch up his talk and what give a sense of how people might use this going forward you think that your fellow students will use this kind of project in other ways you do you think this is more of a learning experience the one-shot deal for them and for it as as a seminar for and this that have the learning experience but personally I will use something similar and really into them educating people so this is the way they can have learn how to a debt and standard designed for mobile maps and just because it's I feel like it's very necessary and it's very easy these days and so and I would definitely uses more as a prototype and and that is if I go even more forward because this is our 1st application so the more we designed probably the moral figure out of this that something I would do in the future our work with different people in different countries that the when they realize that the comment over here at at the the question over here actually for a number which will this will be used by 300 students approximately this it and go probably and a standard by time slots I think that's a thank you


  530 ms - page object


AV-Portal 3.11.0 (be3ed8ed057d0e90118571ff94e9ca84ad5a2265)