diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 346 |
1 files changed, 346 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..84a97f8 --- /dev/null +++ b/index.html @@ -0,0 +1,346 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + + <title>Introduction to OpenStreetMap and the + Humanitarian OpenStreetMap Team + </title> + + <meta name="description" content="Slides for a workshop introducing + OpenStreetMap and the Humanitarian OpenStreetMap Team"> + <meta name="author" content="Christopher Baines"> + + <meta name="apple-mobile-web-app-capable" content="yes" /> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> + + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + + <link rel="stylesheet" href="reveal.js/css/reveal.css"> + <link id="theme" href="reveal.js/css/theme/white.css" rel="stylesheet"> + + <!-- For syntax highlighting --> + <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css"> + + <link rel="stylesheet" href="leaflet/dist/leaflet.css" /> + <script src="leaflet/dist/leaflet-src.js"></script> + + <style> + .reveal .standalone { + font-size: 0.2em; + } + + .blur { + background: none repeat scroll 0 0 rgba(255, 255, 255, 0.35); + } + + .dark-blur { + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); + } + + .reveal h1 { + text-transform: none; + } + .reveal h2 { + text-transform: none; + } + .reveal h3 { + text-transform: none; + } + </style> + + <!--[if lt IE 9]> + <script src="lib/js/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + + <div class="reveal"> + + <!-- Any section element inside of this container is displayed as a slide --> + <div class="slides"> + <section data-background="images/background.png"> + <h4 style="font-weight: 900;">Introduction to</h4> + <h2 style="text-transform: none; font-weight: 900;">OpenStreetMap</h2> + <a href="http://wiki.openstreetmap.org/wiki/File:Public-images-osm_logo.svg"> + <img src="images/Public-images-osm_logo.svg" + style="border: 0px solid #333; box-shadow: 0 0 0px rgba(0, 0, 0, 0); background: none repeat scroll 0 0 rgba(255, 255, 255, 0);";/> + </a> + <p> + <small style="font-weight: 900;">By <a href="http://cbaines.net/">Christopher Baines</a></small> + </p> + </section> + + <section> + <h2>This workshop will cover</h2> + <ul> + <li>What OpenStreetMap is</li> + <li>Ways to use OpenStreetMap</li> + <li>How to contribute to OpenStreetMap</li> + </ul> + </section> + + <section> + <h1>What is OpenStreetMap</h1> + + <h2>Find out at + <a target="_blank" href="https://openstreetmap.org/">OpenStreetMap.org</a> + </h2> + <small>This part consists of a tour of the basic functionality + offered at openstreetmap.org</small> + </section> + + <section> + <h2>How can you use OpenStreetMap</h2> + </section> + + <section> + <h2>You may have already used OpenStreetMap</h2> + + <ul> + <li> + <a target="_blank" href="http://www.kfc.co.uk/find-us/"> + KFC + </a> + </li> + <li> + Craigslist + </li> + <li> + <a target="_blank" + href="https://foursquare.com/explore?mode=url&near=Southampton"> + FourSquare + </a> + </li> + </ul> + </section> + + <section> + <h3>An OpenStreetMap Map</h3> + + <p>One option is the map on OpenStreetMap.org + <iframe style="width: 20%; float: left;" src="demo1.html"> + </iframe> + </p> + + <p style="clear: left;"> + <img src="images/osmand.png" style="float: right; width: 30%;" /> + Other applications like <a href="http://osmand.net/">OSMAND</a> provide offline maps for Android, + and iOS devices + </p> + + </section> + + <!-- https://www.flickr.com/photos/small_realm/11189803153/ --> + <section data-background-color="#000000" data-background="images/data-center.jpg"> + <h1 class="blur" style="text-transform: none; font-weight: 900; text-shadow: + -5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;">OpenStreetMap + is a dataset</h1> + <!-- + <a href="https://openclipart.org/detail/49411/binary-file"> + <img src="images/Binary-File-Plain.svg" style="width: 60%; border: 0px solid #000; box-shadow: 0 0 0px rgba(0, 0, 0, 0.15)"/> + </a> + --> + + </section> + + <section> + <h3>Changing OpenStreetMap</h3> + + <p> + To change what you see, you need to edit the underlying data. + </p> + + <span class="fragment"> + <p> + To change the data, you need to use an <b>editor</b>. + </p> + </span> + + <span class="fragment"> + <p> + There are several editors, this workshop covers iD and JOSM. + </p> + </span> + </section> + + <section> + <h2>OpenStreetMap.org</h2> + + <p>Editing OpenStreetMap requires an account.</p> + + <p>If you have an OpenID account (Google, Yahoo and Wordpress all + provide this feature), you can use this for authentication.</p> + </section> + + <section data-background="images/id-screenshot.png" + data-background-color="#000000"> + <div class="dark-blur"> + <h3>The iD Editor</h3> + + <!-- + <a href="https://github.com/openstreetmap/iD/blob/master/svg/logo.svg"> + <img src="images/id-logo.svg" + style="border: 0px solid #333; box-shadow: 0 0 0px rgba(0, 0, 0, 0); background: none repeat scroll 0 0 rgba(255, 255, 255, 0);";/> + </a> + --> + + <p> + Use on + <a href="https://www.openstreetmap.org/" target="_blank"> + openstreetmap.org + </a> + </p> + </div> + </section> + + <section> + <h3>At this point, you should have:</h3> + <ul> + <li>An OpenStreetMap account</li> + <li>The ability to add buildings to the map with JOSM</li> + </ul> + + <br> + <br> + <h3>If not, the following resources might help:</h3> + <ul> + <li> + <a href="http://learnosm.org/en/beginner/start-osm/#create-an-openstreetmap-account"> + LearnOSM Beginner's Guide + </a> + <li> + <a href="http://mapgive.state.gov/learn-to-map/"> + MapGive Learn to Map (with videos) + </a> + </li> + </ul> + </section> + + <section data-background="images/josm-screenshot.png" + data-background-color="#000000"> + <div class="dark-blur"> + <a href="http://wiki.openstreetmap.org/wiki/File:JOSM_Logo_2014.svg"> + <img src="images/JOSM_Logo_2014.svg" + style="width: 200px; border: 0px solid #333; box-shadow: 0 0 0px rgba(0, 0, 0, 0); background: none repeat scroll 0 0 rgba(255, 255, 255, 0);";/> + </a> + <h2>JOSM</h2> + + <p> + Another popular editor is JOSM, it is an extensible editor for OpenStreetMap. + </p> + + <p> + It is more complicated than iD, and does not work from a web + browser. + </p> + + <p> + However, JOSM can be faster to use than iD, and has more + capabilities (mutiple data layers, filters, ...). + </p> + </div> + </section> + + <section> + <h2>Installing JOSM</h2> + + <p> + If you are using + <a href="https://packages.debian.org/sid/josm">Debian</a>, + <a href="http://packages.ubuntu.com/utopic/josm">Ubuntu</a>, + <a href="https://apps.fedoraproject.org/packages/josm">Fedora</a>, + <a href="https://www.archlinux.org/packages/community/any/josm/">Arch</a> + or probably other other free software operating systems, you should + just be able to install JOSM using their package manager. + </p> + + <p> + For other operating systems, including (Microsoft Windows, and Mac + OS X), see the + <a href="https://josm.openstreetmap.de/">JOSM homepage</a> + </p> + </section> + + <section> + <h2>Legal Details</h2> + + <p> + <b>You</b> hold the copyright for the data which you add to OpenStreetMap. + </p> + + <p> + OpenStreetMap is licenced under the<br> + <a href="http://opendatacommons.org/licenses/odbl/summary/">Open + Database License (ODbL).</a> + </p> + </section> + + <section> + <a href="http://opendatacommons.org/licenses/odbl/summary/"> + Open Database License (ODbL) Summary + </a> + + <h3>You are free:</h3> + <ul> + <li>To <b>Share</b> the database</li> + <li>To <b>Create</b> works from the database</li> + <li>To <b>Adapt</b> the database</li> + </ul> + + <h3>As long as you:</h3> + <ul> + <li><b>Attribute</b> any public use of the database.</li> + + <li><b>Share-Alike</b>, you must offer derived works and adapted + databases under the ODbL.</li> + + <li><b>Keep open</b>, you must distribute the database without + technical restrictions.</li> + </ul> + </section> + + <section> + <h2>Other Resources</h2> + + <ul> + <li> + <a href="http://learnosm.org/en/beginner/start-osm/#create-an-openstreetmap-account"> + LearnOSM Beginner's Guide + </a> + <li> + <a href="http://mapgive.state.gov/learn-to-map/"> + MapGive Learn to Map (with videos) + </a> + </li> + </ul> + </section> + + </div> + </div> + + <script src="reveal.js/lib/js/head.min.js"></script> + <script src="reveal.js/js/reveal.js"></script> + + <script> + + // Full list of configuration options available here: + // https://github.com/hakimel/reveal.js#configuration + Reveal.initialize({ + controls: false, + progress: true, + history: true, + center: true, + touch:true, + + transition: 'linear', + dependencies: [ + { src: 'reveal.js/plugin/notes/notes.js', async: true }, + ] + }); + + </script> + + </body> +</html> |