first commit

maptimeLA · Jan 18, 2017 · 731ebb2 · 731ebb2
commit 731ebb2
Show file tree

Hide file tree

Showing 7 changed files with 249 additions and 0 deletions.
diff --git a/images/Python_logo.png b/images/Python_logo.png
diff --git a/images/bs4.jpg b/images/bs4.jpg
diff --git a/images/cmd_bs4.png b/images/cmd_bs4.png
diff --git a/images/cmd_pip_version.png b/images/cmd_pip_version.png
diff --git a/images/cmd_requests.png b/images/cmd_requests.png
diff --git a/images/requests.png b/images/requests.png
diff --git a/index.html b/index.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<head>
+	<title>Python+BeautifulSoup+QGIS</title>
+	<link target="_blank" href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
+	<style>
+		/*
+			SLIDE STYLES:
+			All slides are assumed to contain one 'p' element, one 'img' element, or one of each.
+			<div class="slide">
+				-- Default style. If no image, text is centered. If image present, it is centered and text is at the top.
+				-- Arbitrary content could go here too (e.g. I used a couple of iframes), but default behavior will mess with any p or img elements.
+			<div class="slide image_full">
+				-- Full 1024x768 img, somewhat faded to black and with bold white text (p) centered on top.
+			<div class="slide image_bottom">
+				-- Mostly like default except that image appears at the bottom. (Basically just to give more room for longer text).
+			
+			Can make additional class styles for p elements and such if you need different text sizes, colors, etc.
+			(e.g. there is a p.title style with a bigger font)
+			img elements themselves are not displayed; rather, their src attributes are applied as div backgrounds. This is to make centering easier, basically.
+		*/
+		html, body{
+			margin: 0;
+			font: 20px/24px "PT Sans", sans-serif;
+			background-color: #FFF;
+		}
+		.slide, .slide div, .slide.black{
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 1024px;
+			height: 768px;
+			background-position: center center;
+			background-repeat: no-repeat;
+		}
+		.slide{
+			background-color: #FFF;
+
+		}
+		.slide.image_bottom, .slide.black{
+			background-position: center bottom;
+		}
+		.slide p{
+			left: 30px;
+			position: absolute;
+			font-size: 64px;
+			line-height: 90px;
+			font-weight: bold;
+			text-align: left;
+			margin: 15px 1% 0 1%;
+			width: 98%;
+		}
+		.slide.black p{
+			left: 30px;
+			position: absolute;
+			font-size: 64px;
+			line-height: 90px;
+			font-weight: bold;
+			text-align: left;
+			margin: 15px 1% 0 1%;
+			width: 98%;
+			color: white;
+		}
+		.slide img{
+			display: none;
+		}
+		.slide.image_full{
+			background-color: black;
+		}
+		.slide.black{
+			background-color: black;
+		}		
+		.slide.image_full div{
+			opacity: .5;
+		}
+		.slide.image_full p{
+			color: white;
+			text-shadow:0px 0px 10px #000000;
+		}
+		.slide.image_full.repeat div{
+			background-position: 0 0;
+			background-repeat: repeat;
+		}
+		.slide p.title{
+			font-size: 60px;
+			line-height: 60px;
+		}		
+		a{
+			color: #2859cc;
+			text-decoration: none;
+		}
+		a:hover{
+			text-decoration: underline;
+		}
+		a.citation{
+			position: absolute;
+			bottom: 5px;
+			right: 5px;
+			color: #000;
+			background-color: rgba(255,255,255,.75);
+		}
+		.code{
+			font-family: 'Courier New';
+		}
+	</style>
+</head>
+<body>
+
+<div class="slide image_full">
+	<img src="images/coverpage.jpg"/>
+<p class="title">MaptimeLA presents: <br>Python +<br>BeautifulSoup +<br>QGIS<br> =Awesome! <br><br>
+	<a target="_blank" href="http://github.com/maptimeLA">#maptimeLA</a></p>
+</div>
+
+<div class="slide">
+	<p><u>Thank You</u><br>
+	to <a target="_blank" href="http://www.arup.com/">Arup</a> for the space<br>
+	and <a target="_blank" href="https://carto.com/">CARTO</a> for the pizza!<br></p>
+</div>
+
+<div class="slide image_bottom">
+	<p><a target="_blank" href="https://www.python.org/">Python</a> is a programming language.<br><br>
+	It is commonly used in GIS, math, and science.<br></p>
+	<img src="images/Python_logo.png"/> 
+</div>
+<div class="slide">
+	<p>If you are used to languages like JavaScript, some key differences are:<br><br>
+	 &#8194 &#8226 indents instead of brackets<br>
+	 &#8194 &#8226 variables are local (no var)<br>
+	 &#8194 &#8226 unicode strings are prefixed by u</p>
+
+</div>
+<div class="slide image_bottom">
+	<p>Python has a lot of libraries.<br>
+	These contain code you can use via shortcuts.<br></p>
+	<img src="images/Python_logo.png"/> 
+</div>
+<div class="slide black">
+	<p>Use <a target="_blank" href="https://pip.pypa.io/en/stable/installing/">pip</a> for installing libraries.
+	Recent installs should come with pip. Use pip --version to check in command line.</p>
+	<img src="images/cmd_pip_version.png"/> 
+</div>
+<div class="slide black">
+	<p>Use pip (or your preferred method) to install BeautifulSoup4:<br><br>
+	pip install beautifulsoup4</p>
+	<img src="images/cmd_bs4.png"/> 
+</div>
+<div class="slide image_bottom">
+	<p><a target="_blank" href="https://www.crummy.com/software/BeautifulSoup/bs4/doc/">BeautifulSoup</a> is a library for extracting data from html and xml.<br>
+	<br></p>
+	<img src="images/bs4.jpg"/> 
+</div>
+<div class="slide black">
+	<p>Use pip (or your preferred method) to install requests:<br><br>
+	pip install requests</p>
+	<img src="images/cmd_requests.png"/> 
+</div>
+<div class="slide image_bottom">
+	<p><a target="_blank" href="http://docs.python-requests.org/en/master/">Requests</a> is a library for extracting data from html and xml.<br>
+	<br></p>
+	<img src="images/requests.png"/> 
+</div>
+<script>
+	// The following is mostly derived from https://github.com/tmcw/big
+	var slides = document.getElementsByClassName("slide"),
+		current = 0;
+	function go(n){
+		current = n;
+		var slide = slides[n],
+			classes = slide.className.split(" ");
+		for (var i = 0; i < slides.length; i++) slides[i].style.display = 'none';
+		slide.style.display = 'block';
+	slide.style.left = (window.innerWidth - slide.offsetWidth) / 2 + "px";
+	slide.style.top = (window.innerHeight - slide.offsetHeight) / 2 + "px";
+		if ( classes[1] && styleSlide[classes[1]] ) styleSlide[classes[1]](slide);
+		else styleSlide.normal(slide);
+		resize();
+		if (window.location.hash !== n) window.location.hash = n;
+	}
+	var styleSlide = {
+		heading: function(slide){
+			var p = slide.getElementsByTagName("p")[0];
+			p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
+		},
+		image_full: function(slide){
+			var img = slide.getElementsByTagName("img")[0];
+			var p = slide.getElementsByTagName("p")[0];
+			var div = slide.getElementsByTagName("div")[0] || document.createElement("div");
+			div.style.backgroundImage = 'url(' + img.src + ')';
+			slide.insertBefore(div,p);
+	        img.style.display = 'none';
+			p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
+		},
+		image_bottom: function(slide){
+			var img = slide.getElementsByTagName("img")[0];
+			if ( !img ) return;
+	        slide.style.backgroundImage = 'url(' + img.src + ')';
+	        img.style.display = 'none';
+		},
+		normal: function(slide){
+			var img = slide.getElementsByTagName("img")[0];
+			var p = slide.getElementsByTagName("p")[0];
+			if ( img ){
+				slide.style.backgroundImage = 'url(' + img.src + ')';
+			} else if (!img && !slide.getElementsByTagName("iframe")[0]){
+				if ( p ){
+					p.style.marginTop = (slide.offsetHeight - p.offsetHeight) / 2 + "px";
+				}
+			}
+		}
+	}
+	document.onclick = function() { go(++current % (slides.length)); };
+    function fwd() { go(Math.min(slides.length - 1, ++current)); }
+    function rev() { go(Math.max(0, --current)); }
+    document.onkeydown = function(e) {
+        if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
+        if (e.which === 37 || e.which === 33 || e.which === 38) rev();
+    };
+    document.ontouchstart = function(e) {
+        var x0 = e.changedTouches[0].pageX;
+        document.ontouchend = function(e) {
+            var x1 = e.changedTouches[0].pageX;
+            if (x1 - x0 < 0) fwd();
+            if (x1 - x0 > 0) rev();
+        };
+    };
+    function parse_hash() {
+        return Math.max(Math.min(slides.length - 1,
+            parseInt(window.location.hash.substring(1), 10)), 0);
+    }
+    if (window.location.hash) current = parse_hash() || current;
+    window.onhashchange = function() {
+        var c = parse_hash();
+        if (c !== current) go(c);
+    };
+    window.onresize = resize;
+    function resize(){
+    	var s = Math.min( 1, Math.min( window.innerHeight / 768, window.innerWidth / 1024 ) );
+    		slides[current].style.webkitTransform = "scale(" + s + "," + s +")";
+			slides[current].style.MozTransform = "scale(" + s + "," + s +")";
+			slides[current].style.msTransform = "scale(" + s + "," + s +")";
+			slides[current].style.transform = "scale(" + s + "," + s +")";
+    }
+    go(current);
+</script>
+
+</body>
+</html>