Merge pull request #19 from raspberrypilearning/draft

Remove unneccessary step 3

Author: MarcScott

en/meta.yml

@@ -19,7 +19,6 @@ last_tested: 2017-01-01
 steps: 
 - title: Introduction
 - title: What you will need
-- title: Build a Python-powered web server with Flask
 - title: Installing Flask
 - title: Building a basic Flask web application
 - title: Adding a new route to your web app

en/step_10.md

@@ -1,20 +1,10 @@
-## Browsing on other devices
-
-Since we used `host='0.0.0.0'`, on the `app.run` line, the web server is accessible to any device on the same network, including other computers, tablets, and smartphones.
-
-- Enter the following command in the Terminal window to find your Raspberry Pi's IP address:
-
-    ```bash
-    hostname -I
-    ```
-    
-    You should get something like `192.168.1.3`.
-
-- Take another computer, tablet or smartphone, and make sure it's connected to the same network as the Raspberry Pi.
-
-- Open up a web browser on the other device and enter the Raspberry Pi's IP address into the address bar with `:5000` on the end e.g. `http://192.168.1.3:5000/`:
-
-    ![Address bar](images/flask-on-android.png)
-
-- You should now see the web app from the other device. Try navigating to the other pages too.
+## What next?
+
+- Try adding links between pages using anchor tags like `<a href='/hello/Paul/'>Hello Paul</a>`.
+- Add parameters to a previous route to make other views dynamic.
+- Add more CSS rules to each of your routes.
+- Learn more about HTML, CSS and web development with [Google Coder](https://projects.raspberrypi.org/en/projects/coder-html-css-lessons/), [Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn) and [Codecademy](https://www.codecademy.com/en/tracks/web).
+- Learn more about Flask using the [Flask documentation](http://flask.pocoo.org/docs).
+- Create a physical computing project with Raspberry Pi and use Flask to create a web interface to it (see [Matt Richardson's guide](http://mattrichardson.com/Raspberry-Pi-Flask/index.html), [BETT Bot](https://github.com/bennuttall/bett-bot) and [Energenie](http://www.pythonhosted.org/energenie/examples/web/)).
+- Use a Flask web app as the control panel in a home automation project: turn the lights on from your phone!
 

en/step_11.md

@@ -1,4 +1,14 @@
-## Build a Python-powered web server with Flask
+## Installing Flask
 
-Install the lightweight web framework Flask and set up a basic web server with different pages, using Python, HTML, and CSS.
+First you're going to install the Flask package. Make sure you are connected to the internet, either by Ethernet cable or WiFi before you start.
+
+- Start by opening a Terminal window from the taskbar or applications menu:
+
+    ![Open Terminal window](images/open-terminal.png)
+
+- Now install Flask by typing:
+
+    ```bash
+    sudo apt-get install python3-flask
+    ```
 

en/step_3.md

@@ -1,14 +1,56 @@
-## Installing Flask
+## Building a basic Flask web application
 
-First you're going to install the Flask package. Make sure you are connected to the internet, either by Ethernet cable or WiFi before you start.
+Now you're going to set up a basic web application with Flask and Python. You will be able to run a single web page and display some text on a web browser.
 
-- Start by opening a Terminal window from the taskbar or applications menu:
+- Using the Terminal, make a new directory for your project.
 
-    ![Open Terminal window](images/open-terminal.png)
+```bash
+mkdir webapp
+```
 
-- Now install Flask by typing:
+- Use the change directory command to open it.
 
-    ```bash
-    sudo apt-get install python3-flask
+```bash
+cd webapp
+```
+
+- Open Python 3 from the main menu.
+
+- Open a new window by clicking `File > New file`, and save this as `app.py` inside the project folder you created.
+
+- You'll write your application code here and when you run your code, any printed messages or errors will be shown in the Python shell window which opened first.
+
+- Now enter the following lines into the blank `app.py` window:
+
+    ```python
+    from flask import Flask
+
+    app = Flask(__name__)
+
+    @app.route('/')
+    def index():
+        return 'Hello world'
+
+    if __name__ == '__main__':
+        app.run(debug=True, host='0.0.0.0')
     ```
+    
+    Note here the `host='0.0.0.0'` means the web app will be accessible to any device on the network.
+
+- Save the file with `Ctrl + S`. 
+
+- Return to the Terminal window and enter `python3 app.py` to run the web server.
+
+    If everything has been written correctly, you should see an output similar to this:
+
+    ```
+    * Running on http://0.0.0.0:5000/
+    * Restarting with reloader
+    ```
+
+- Open the Pi's web browser from the taskbar or application menu and navigate to `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`:
+
+    ![Flask Hello world](images/flask-hello-world.png)
+
+    *Note: `127.0.0.1` means 'home' i.e. this computer, and `:5000` means 'port 5000', which is the port the web server is running on*
 

en/step_4.md

@@ -1,56 +1,32 @@
-## Building a basic Flask web application
+## Adding a new route to your web app
 
-Now you're going to set up a basic web application with Flask and Python. You will be able to run a single web page and display some text on a web browser.
+Now you're going to add a new route to your web app, which will create another web page.
 
-- Using the Terminal, make a new directory for your project.
+In a web application, a route is a certain path into your website, determined by the request sent by the user when they type it into their web browser. It's up to you which routes are enabled and what each of them does.
 
-```bash
-mkdir webapp
-```
-
-- Use the change directory command to open it.
+In the "Hello World" example we used a single route:
 
-```bash
-cd webapp
+```python
+@app.route('/')
+def index():
+    return 'Hello world'
 ```
 
-- Open Python 3 from the main menu.
+This route is made up of three parts:
 
-- Open a new window by clicking `File > New file`, and save this as `app.py` inside the project folder you created.
+- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so just `http://127.0.0.1:5000/`.
+- `def index()`: this is the name we give to the route. Here it was called `index` because it's the index of the website.
+- `return 'Hello world'`: this is the content of the web page, which is returned when the user browses the index of the website.
 
-- You'll write your application code here and when you run your code, any printed messages or errors will be shown in the Python shell window which opened first.
-
-- Now enter the following lines into the blank `app.py` window:
+- Create a new route by adding the following lines below the first route:
 
     ```python
-    from flask import Flask
-
-    app = Flask(__name__)
-
-    @app.route('/')
-    def index():
-        return 'Hello world'
-
-    if __name__ == '__main__':
-        app.run(debug=True, host='0.0.0.0')
+    @app.route('/cakes')
+    def cakes():
+        return 'Yummy cakes!'
     ```
-    
-    Note here the `host='0.0.0.0'` means the web app will be accessible to any device on the network.
-
-- Save the file with `Ctrl + S`. 
-
-- Return to the Terminal window and enter `python3 app.py` to run the web server.
-
-    If everything has been written correctly, you should see an output similar to this:
-
-    ```
-    * Running on http://0.0.0.0:5000/
-    * Restarting with reloader
-    ```
-
-- Open the Pi's web browser from the taskbar or application menu and navigate to `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`:
 
-    ![Flask Hello world](images/flask-hello-world.png)
+- Save your code and navigate to your website's cake page in the browser at `127.0.0.1:5000/cakes`. You should see a webpage with the text `Yummy cakes!` on it:
 
-    *Note: `127.0.0.1` means 'home' i.e. this computer, and `:5000` means 'port 5000', which is the port the web server is running on*
+    ![Yummy Cakes](images/flask-cakes.png)
 

en/step_5.md

@@ -1,32 +1,52 @@
-## Adding a new route to your web app
+## Add HTML templates to your web app
 
-Now you're going to add a new route to your web app, which will create another web page.
+Next, you'll modify your existing routes to return full HTML templates, rather than simple text strings.
 
-In a web application, a route is a certain path into your website, determined by the request sent by the user when they type it into their web browser. It's up to you which routes are enabled and what each of them does.
+- First, create a `templates` directory in your `webapp` directory by entering this into the Terminal:
 
-In the "Hello World" example we used a single route:
+    ```bash
+    mkdir templates
+    ```
+
+- Open `Text Editor` under `Accessories` in the main menu:
+
+    ![Text Editor](images/open-text-editor.png)
 
-```python
-@app.route('/')
-def index():
-    return 'Hello world'
-```
+    This will open up a basic text editor called Leafpad.
 
-This route is made up of three parts:
+- Enter the following HTML code:
 
-- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so just `http://127.0.0.1:5000/`.
-- `def index()`: this is the name we give to the route. Here it was called `index` because it's the index of the website.
-- `return 'Hello world'`: this is the content of the web page, which is returned when the user browses the index of the website.
+    ```html
+    <html>
+    <body>
+    <h1>Hello from a template!</h1>
+    </body>
+    </html>
+    ```
+
+- Save the file as `index.html` in the `templates` directory, which you'll find inside the `pi` and then `webapp` directories.
 
-- Create a new route by adding the following lines below the first route:
+- Return to your `app.py` file in IDLE and modify the first line of your code to import the `render_template` function as well:
 
     ```python
-    @app.route('/cakes')
-    def cakes():
-        return 'Yummy cakes!'
+    from flask import Flask, render_template
     ```
 
-- Save your code and navigate to your website's cake page in the browser at `127.0.0.1:5000/cakes`. You should see a webpage with the text `Yummy cakes!` on it:
+- Finally, you'll need to modify your index view to return the HTML template instead of the normal text. Change the `index()` function to this:
+
+    ```python
+    @app.route('/')
+    def index():
+        return render_template('index.html')
+    ```
+    
+    Flask will look for `index.html` in a directory called `templates`, in the same directory as the `app.py` file.
+
+- Save the file. Make sure your web app is still running. If you stopped it, just run `python3 app.py` from your `webapp` directory.
+
+- Reload the route in your web browser (go to the base route at `http://127.0.0.1:5000/`) to see your new HTML template being displayed.
+
+    ![Hello from a template!](images/flask-template.png)
 
-    ![Yummy Cakes](images/flask-cakes.png)
+    In this case it's not much different as all you've done is added a header, but there's plenty of scope to expand!
 

en/step_6.md

@@ -1,52 +1,54 @@
-## Add HTML templates to your web app
+## Adding colour to the web page with CSS
 
-Next, you'll modify your existing routes to return full HTML templates, rather than simple text strings.
+Cascading Style Sheets (CSS) are rules for how HTML content is displayed by the browser. Now you'll add some CSS to add colour to your web page.
 
-- First, create a `templates` directory in your `webapp` directory by entering this into the Terminal:
+- First, return to the Terminal window and navigate to the `webapp` directory. If you're in the `templates` directory, go back up one level with `cd ..`.
 
-    ```bash
-    mkdir templates
-    ```
+- Create a new directory called `static`.
+
+- Then open a new window with the basic text editor (Leafpad), or re-open the text editor from the menu.
+
+- Save the new file as `style.css` in the new `static` directory.
 
-- Open `Text Editor` under `Accessories` in the main menu:
+- Add the following CSS rules to the file:
 
-    ![Text Editor](images/open-text-editor.png)
+    ```css
+    body {
+        background: red;
+        color: yellow;
+    }
+    ```
+    
+    Note here we've used colour names: usually colours are defined by hex codes like `#ff0000` (red) but this is a simple example.
 
-    This will open up a basic text editor called Leafpad.
+- Save the file.
 
-- Enter the following HTML code:
+- Now modify your HTML template called `index.html` to include the CSS file, by adding a `<head>` tag containing a `<link>` tag with a reference to the stylesheet:
 
     ```html
     <html>
+    <head>
+    <link rel="stylesheet" href='/static/style.css' />
+    </head>
     <body>
     <h1>Hello from a template!</h1>
     </body>
     </html>
     ```
 
-- Save the file as `index.html` in the `templates` directory, which you'll find inside the `pi` and then `webapp` directories.
-
-- Return to your `app.py` file in IDLE and modify the first line of your code to import the `render_template` function as well:
-
-    ```python
-    from flask import Flask, render_template
-    ```
-
-- Finally, you'll need to modify your index view to return the HTML template instead of the normal text. Change the `index()` function to this:
-
-    ```python
-    @app.route('/')
-    def index():
-        return render_template('index.html')
-    ```
-    
-    Flask will look for `index.html` in a directory called `templates`, in the same directory as the `app.py` file.
+- Save the HTML file and reload the web server. You should see a colourful version of the web app!
 
-- Save the file. Make sure your web app is still running. If you stopped it, just run `python3 app.py` from your `webapp` directory.
+    ![Flask app with colour](images/flask-app-with-colour.png)
 
-- Reload the route in your web browser (go to the base route at `http://127.0.0.1:5000/`) to see your new HTML template being displayed.
+You have so far created a number of files and directories. It is worth just double-checking your `webapp` project directory, which should contain the following and have a structure like this now:
 
-    ![Hello from a template!](images/flask-template.png)
+```
+├── app.py
+├── static
+│   └── style.css
+└── templates
+    └── index.html
+```
 
-    In this case it's not much different as all you've done is added a header, but there's plenty of scope to expand!
+If your web app doesn't look right, check you saved your CSS file in the right place.