Putting your data on the web with webtools

Goals for this session

After the next 90 minutes, ideally you should:

Understand basic web architecture
Understand basic HTML
See how to use flask to put your data online

The Internet & the Web

Servers
IPs, DNS, URLs

Let us start with URLs

Uniform Resource Locator

protocol: How to get the information
server: Where to get it
location: Where to get it on the server
query: Parameters

Server names & IP addresses

www.google.com is mapped to 74.125.136.99
74.125.136.99 is the IP address.

Special IP addresses

127.0.0.1 is the local computer computer
also called localhost.

Ports

A port is just a number.
HTTP uses port 80 by default.
You can use different ports to keep things separate.

Summary

http://www.google.com:80/search?q=Software+Carpentry
Makes an http connection to www.google.com
Says This connection is for port 80
Asks for search with argument q having the value Software Carpentry.
The server returns a response which your browser interprets.

HTML

Basic language of the web
Textual markup language

<html>
    <body>
        <p>This is a paragraph</p>
    </body>
</html>

Markup language

Text based
Marks certain pieces of text
Mix of semantic and visual marking

Basics of HTML

<tag> is an opening tag and </tag> is a closing tag
<tag /> is short for <tag></tag>
We'll see an example in a second.
Use lower-case (even if it doesn't matter).
Hierarchical structure
- html
  - head
    This contains meta information about your document
  - body
    This contains your actual document
    - p: paragraph

Example

We will start developing our own webpage.
Open a new file called index.html and copy the code below:

<html>
    <body>
        <p>This is a paragraph <strong>with a strong message</>.</p>
    </body>
</html>

This looks ugly

CSS: Cascading Style Sheets.
Associate markup with visual aspects.

<html>
    <head>
    <style>
    strong {
        color: red;
    }
    </style>
    </head>
    <body>
        <p>This is a paragraph <strong>with a strong message</>.</p>
    </body>
</html>

More HTML

Lists (ul & ol)
Mark text (em, strong, &c)
...

Include images


<img src="image.png" />

Javascript

A full programming language in your browser
We won't talk about it, except to say this exists

Dynamic Websites

With what we learned so far, we can write a static website.
A static website is one which always shows the same results.
It's not so interesting, although we can make some excellent websites with Javascript.
The other method is to have the server generate the pages dynamically.

Generating webpages with Python


from flask import Flask

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    return """
<html>
    <body>
    <p>Hello World</>
    </body>
</html>
"""

app.run()


$ python flaskr.py

Making output depend on the query


from flask import Flask, request

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    name = request.args.get('name', 'World')
    return """
<html>
    <body>
    <p>Hello {0}</>
    </body>
</html>
""".format(name)

app.run()

Using templates

The previous operation is common, flask supports it builtin


<html>
    <body>
    <p>Hello {{ name }}</p>
    </body>
</html>


from flask import Flask, render_template, request

app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    name = request.args.get('name', 'World')
    return render_template('greet.html', name=name)

app.run()

Generating images from Python!


<html>
    <body>
    <p>Value is {{ value }}</p>
    <p><img src="pow-fig?value={{ value }}" /></p>

    </body>
</html>


from flask import Flask, render_template, request
import numpy as np
from matplotlib import pyplot as plt


app = Flask('SoftwareCarpentry')

@app.route('/')
def index():
    value = float(request.args.get('value', 2.0))
    return render_template('pow.html', value=value)


@app.route('/pow-fig')
def pow_fig():
    value = float(request.args.get('value', 2.0))
    fig,ax = plt.subplots()
    ax.plot(np.arange(10)**value)
    ax.set_xlabel('x')
    ax.set_ylabel('pow(x,{})'.format(value))
    fig.savefig('tmp.png')
    data = open('tmp.png', 'rb')
    return data.read()
app.run()

We could do better code, but this is pretty decent

Go back and forth!


<html>
    <body>
    <p>Value is {{ value }}</p>
    <p>
    Go to <a href="/?value={{ value - 1}}">prev</a><br />
    Go to <a href="/?value={{ value + 1}}">next</a>
    <p><img src="pow-fig?value={{ value }}"</p>

    </body>
</html>

Forms


<form action="/form" method="get">
    <p>Set <input name="value" value="{{ value }}" />
    <input type="submit" />
</form>

This is all on the fly

Whatever you run must be fast enough that the user doesn't get bored.
Matter more if you're google than for a specialized website.
Tricks to make things appear faster
- Precompute results.
- Show partial results.
- Say "I'm computing stuff..."

Important Words on Security

Set up things so that it won't be too bad if your app gets hacked.
Talk to your sysadmin!
Get a separate server.

Thank You

For more information, the Mozilla Developer Network is an excellent resource.