summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorChristopher Baines <mail@cbaines.net>2015-05-06 21:31:56 +0100
committerChristopher Baines <mail@cbaines.net>2015-06-10 18:14:55 +0100
commit151e1e5ac01a3c2b06e5aa75b28168e8a35463d8 (patch)
tree49d2c335aaf08d4c83620fbb74a24c22b7fb44e3 /index.html
downloadosm-intro-master.tar
osm-intro-master.tar.gz
Initial commitHEADsynced/mastermaster
Diffstat (limited to 'index.html')
-rw-r--r--index.html318
1 files changed, 318 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2ac6cad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,318 @@
+<!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>
+ <h1>What is OpenStreetMap</h1>
+
+ <ul>
+ <li>
+ Planet wide digital map
+ </li>
+ <li>
+ Built and maintained by a worldwide community
+ </li>
+ <li>
+ Open Data (can be freely used, modified, and shared by anyone for any purpose)
+ </li>
+ </ul>
+ </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>
+ <li>
+ Probably many more..
+ </li>
+ </ul>
+ </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<br>
+ 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 data-background-iframe="styleS.html">
+ </section>
+ <section data-background-iframe="styleC.html">
+ </section>
+ <section data-background-iframe="styleT.html">
+ </section>
+ <section data-background-iframe="styleH.html">
+ </section>
+
+ <section>
+ <img class="stretch" style="border:0;box-shadow: none;" src="images/Osmdbstats2.png" />
+ </section>
+
+ <section>
+ <img class="stretch" style="border:0;box-shadow: none"; src="images/Osmdbstats1_users.png" />
+ </section>
+
+ <section>
+ <h3>Changing OpenStreetMap</h3>
+
+ <p>
+ To change what you see, you need to edit the underlying data.
+ </p>
+
+ <p>
+ To change the data, you need to use an <b>editor</b>.
+ </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 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>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>
+ <h3>An OpenStreetMap Map</h3>
+
+ <p>One option is the map on OpenStreetMap.org
+ <iframe style="width: 40%; float: left;" src="demo1.html">
+ </iframe>
+ </p>
+
+ <p style="clear: left;">
+ <img src="images/osmand.png" style="float: right; width: 40%;" />
+ Other applications like <a href="http://osmand.net/">OSMAND</a> provide offline maps for Android,
+ and iOS devices
+ </p>
+
+ </section>
+
+ <section>
+ <h2>Haiti Earthquake in 2010</h2>
+
+ <p>OpenStreetMap contributors provided essential maps to Search and Rescue
+ and Relief teams responding to the Haiti earthquake.</p>
+ </section>
+
+ <section data-background-color="#000000" data-background-video="project-haiti.mp4">
+ </section>
+
+ <section data-background-iframe="http://mapgive.state.gov/projects/nepal/hist_slider_nepal.html">
+ </section>
+
+ <section data-background-iframe="http://cbaines.net/soton/">
+ </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>
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-21 11:44:16 +0000