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>

http://codepen.io/anon/pen/zvqmog

That's it?

structures, attributes, positioning, ...

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