Web Cartography 1
Intro
Why?
Be cool! Wow, you do web?
Be free! I hate that map, I can do better!
Be curious! How the heck does that work?
Err! It doesn't matter anyway, you just start over.
Web?
web vs internet
what is web? anyone? no? c'mon!
what you need and what you don't?
Cartography?
Warm up
Things you need
- code editor (yes, you'll write code!)
Sublime Text, NotePad++, PSPad, atom.io, ...
- web browser (yes, you'll look at it!)
Chrome, Firefox, Opera, Safari, Internet Explorer, Midori, Konqueror, ....
profit!
Working time
What we'll learn
- HTML basics
- a bit of CSS (depends on you)
HTML & CSS are " foreign" languages.
No one can teach you foreign language in 2 hrs/week.
It might be a good idea to study at home...
Ready
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
That's it... pretty much.
</body>
</html>Steady
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
<h1>Or is it?</h1>
<p>I'm not sure at all.</p>
<ul>
<li>But hey,</li>
<li>every new beginning comes from</li>
<li>some other beginning's end</li>
</ul>
</body>
</html>Go!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
<h1>Or is it?</h1>
<p>I'm not sure at all.</p>
<ul>
<li>But hey,</li>
<li>every <em>new</em> <strong>beginning</strong> comes from</li>
<li>some other <strong><i>beginning's end</i></strong></li>
</ul>
<h2>What if we put this somewhere around here?</h2>
<p>Geez, that is <a href="https://fortawesome.github.io/Font-Awesome/">awesome!</a></p>
<img src="http://bit.ly/1KkQDSj">
</body>
</html>Rock 'n' roll!
Be stylish! Use CSS!
What is it anyway?
Hoooooooooooooooooow?
<link rel="stylesheet" type="text/css" href="style.css">
<!-- or this in the <head> tag -->
<style type="text/css">
body {
background: #333;
}
h1 {
color: blue;
}
h2 {
display: none;
}
p {
border-top: 1px solid rgb(121, 66, 107);
color: red;
}
</style>
That's it?
Get better
- choose a semestral topic (GIS, cartography, geography, ...)
- create a HTML structure
- use CSS
- make it eye pleasing x my examples
Ask me questions
anytime
anywhere
anyhow
Read more & practice
Web Cartography 1: Intro
By Michal Zimmermann
Web Cartography 1: Intro
Introductory course of web cartography
