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
  • Know how to use bottle 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.