diff --git a/cs-CZ/meta.yml b/cs-CZ/meta.yml index 4c4b8e7..345657e 100644 --- a/cs-CZ/meta.yml +++ b/cs-CZ/meta.yml @@ -17,17 +17,17 @@ software: python, html-css-javascript version: 4.1 last_tested: 2018-08-02 steps: -- title: Co budeš dělat -- title: Vytvoř aplikaci - completion: - - engaged -- title: Přidej novou stránku -- title: Vytvoř HTML šablonu -- title: Použij CSS styl - completion: - - internal -- title: Dynamický obsah - completion: - - external -- title: 'Výzva' - challenge: true + - title: Co budeš dělat + - title: Vytvoř aplikaci + completion: + - engaged + - title: Přidej novou stránku + - title: Vytvoř HTML šablonu + - title: Použij CSS styl + completion: + - internal + - title: Dynamický obsah + completion: + - external + - title: 'Výzva' + challenge: true diff --git a/nl-NL/images/banner.png b/nl-NL/images/banner.png new file mode 100644 index 0000000..082983c Binary files /dev/null and b/nl-NL/images/banner.png differ diff --git a/nl-NL/images/flask-app-link.png b/nl-NL/images/flask-app-link.png new file mode 100644 index 0000000..c75fee1 Binary files /dev/null and b/nl-NL/images/flask-app-link.png differ diff --git a/nl-NL/images/flask-app-with-colour.png b/nl-NL/images/flask-app-with-colour.png new file mode 100644 index 0000000..11aee4b Binary files /dev/null and b/nl-NL/images/flask-app-with-colour.png differ diff --git a/nl-NL/images/flask-cakes.png b/nl-NL/images/flask-cakes.png new file mode 100644 index 0000000..2232934 Binary files /dev/null and b/nl-NL/images/flask-cakes.png differ diff --git a/nl-NL/images/flask-hello-paul.png b/nl-NL/images/flask-hello-paul.png new file mode 100644 index 0000000..e6b519e Binary files /dev/null and b/nl-NL/images/flask-hello-paul.png differ diff --git a/nl-NL/images/flask-hello-world.png b/nl-NL/images/flask-hello-world.png new file mode 100644 index 0000000..fa6c410 Binary files /dev/null and b/nl-NL/images/flask-hello-world.png differ diff --git a/nl-NL/images/flask-template.png b/nl-NL/images/flask-template.png new file mode 100644 index 0000000..a62457e Binary files /dev/null and b/nl-NL/images/flask-template.png differ diff --git a/nl-NL/images/html-file.png b/nl-NL/images/html-file.png new file mode 100644 index 0000000..dead737 Binary files /dev/null and b/nl-NL/images/html-file.png differ diff --git a/nl-NL/images/idle-css.png b/nl-NL/images/idle-css.png new file mode 100644 index 0000000..090a1ac Binary files /dev/null and b/nl-NL/images/idle-css.png differ diff --git a/nl-NL/images/idle-html.png b/nl-NL/images/idle-html.png new file mode 100644 index 0000000..f3d229a Binary files /dev/null and b/nl-NL/images/idle-html.png differ diff --git a/nl-NL/images/open-terminal.png b/nl-NL/images/open-terminal.png new file mode 100644 index 0000000..c4bf48e Binary files /dev/null and b/nl-NL/images/open-terminal.png differ diff --git a/nl-NL/images/open-text-editor.png b/nl-NL/images/open-text-editor.png new file mode 100644 index 0000000..552b289 Binary files /dev/null and b/nl-NL/images/open-text-editor.png differ diff --git a/nl-NL/images/pi-run-web-app.png b/nl-NL/images/pi-run-web-app.png new file mode 100644 index 0000000..6973df6 Binary files /dev/null and b/nl-NL/images/pi-run-web-app.png differ diff --git a/nl-NL/images/solution.png b/nl-NL/images/solution.png new file mode 100644 index 0000000..9f2de5a Binary files /dev/null and b/nl-NL/images/solution.png differ diff --git a/nl-NL/meta.yml b/nl-NL/meta.yml new file mode 100644 index 0000000..ce52950 --- /dev/null +++ b/nl-NL/meta.yml @@ -0,0 +1,33 @@ +--- +title: Bouw een Python-webserver met Flask +hero_image: images/banner.png +description: Installeer het Python webframework Flask en stel een eenvoudige webserver in met verschillende pagina's +original_url: https://raspberrypi.org/learning/python-web-server-with-flask +theme: yellow +duration: 2 +listed: true +ingredient: false +copyedit: true +curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0 +interests: '' +technologies: python, html-css-javascript +site_areas: projects +hardware: '' +software: python, html-css-javascript +version: 4.1 +last_tested: 2018-08-02 +steps: + - title: Wat je gaat maken + - title: Maak de app + completion: + - engaged + - title: Een nieuwe pagina toevoegen + - title: Een HTML-sjabloon maken + - title: EDITED STRING + completion: + - internal + - title: Dynamische inhoud + completion: + - external + - title: 'Uitdaging' + challenge: true diff --git a/nl-NL/resources/.keep b/nl-NL/resources/.keep new file mode 100644 index 0000000..e69de29 diff --git a/nl-NL/solutions/webapp.zip b/nl-NL/solutions/webapp.zip new file mode 100644 index 0000000..c5d280b Binary files /dev/null and b/nl-NL/solutions/webapp.zip differ diff --git a/nl-NL/step_1.md b/nl-NL/step_1.md new file mode 100644 index 0000000..84016a4 --- /dev/null +++ b/nl-NL/step_1.md @@ -0,0 +1,32 @@ +## Wat je gaat maken + +Zet een webserver op en maak een eenvoudige website met behulp van Flask, Python en HTML/CSS. +De webserver kan reageren op de dynamische inhoud die de gebruiker invoert. + +![Een webbrowser geopend op een pagina met blauwe tekst op een beige achtergrond. De tekst luidt 'Mijn website' en bevat een link naar 'Hoi Paul'.](images/flask-app-link.png) + +### Wat heb je nodig: + +- Een Raspberry Pi met het nieuwste Raspberry Pi OS + +--- collapse --- +--- +title: Flask installeren +--- + +`Flask` zou vooraf geïnstalleerd moeten zijn als onderdeel van Raspberry Pi OS, dus u hoeft niets te doen. + +U kunt het handmatig installeren met de opdracht: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +sudo apt install python3-flask + +--- /code --- + +--- /collapse --- \ No newline at end of file diff --git a/nl-NL/step_2.md b/nl-NL/step_2.md new file mode 100644 index 0000000..5c69b69 --- /dev/null +++ b/nl-NL/step_2.md @@ -0,0 +1,110 @@ +## Maak de app + +--- task --- + +Open een terminal en gebruik de opdracht `mkdir` om een nieuwe map met de naam `webapp` te maken in uw documentenmap. + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +mkdir ~/Documents/webapp + +--- /code --- + +--- /task --- + +--- task --- + +Gebruik de opdracht `cd` om de nieuwe map te openen. + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +cd ~/Documents/webapp + +--- /code --- + +--- /task --- + +--- task --- + +Open **Thonny** in het menu **Programmeren**. + +--- /task --- + +--- task --- + +Voeg deze Python-code toe aan het lege bestand. + +## +--- code --- + +language: python +line_numbers: false +-------------------------------------------------------- + +from flask import Flask + +app = Flask(**name**) + +@app.route('/') +def index(): +return 'Hallo wereld' + +if **name** == '**main**': +app.run(debug=True, host='0.0.0.0') + +--- /code --- + +--- /task --- + +--- task --- + +Sla het nieuwe bestand op onder de naam `app.py` in de map `webapp` die u zojuist hebt gemaakt. + +--- /task --- + +--- task --- + +Ga terug naar uw terminalvenster en voer het script uit dat u zojuist hebt geschreven: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +python3 app.py + +--- /code --- + +--- /task --- + +Als alles goed werkt, ziet u in het venster uitvoer die er ongeveer zo uitziet: + +![pi voert web-app uit](images/pi-run-web-app.png) + +--- task --- + +Open in het menu van je Raspberry Pi **Internet** > **Chromium webbrowser** + +--- /task --- + +--- task --- + +Typ `localhost:5000` in de adresbalk en druk op en voerin. U zou de welkomstpagina moeten zien. + +--- /task --- + +![Flask Hallo wereld](images/flask-hello-world.png) + + diff --git a/nl-NL/step_3.md b/nl-NL/step_3.md new file mode 100644 index 0000000..9de5632 --- /dev/null +++ b/nl-NL/step_3.md @@ -0,0 +1,59 @@ +## Een nieuwe pagina toevoegen + +Om een nieuwe pagina aan uw web-app toe te voegen, maakt u een nieuwe **route**. + +--- collapse --- +--- +title: Wat is een route? +--- + +In de code die u al hebt, is er één route: + +```python +@app.route('/') +def index(): + return 'Hallo wereld' +``` + +Deze route bestaat uit drie delen: + +- `@app.route('/')`: wat u toevoegt aan het webadres om toegang te krijgen tot deze route - `/` +- `def index()`: de naam van de route - `index` +- `return 'Hallo wereld'`: de inhoud die de gebruiker zal zien - `Hallo wereld` + +--- /collapse --- + +--- task --- + +Voeg de code voor een nieuwe route toe aan `app.py` en **sla** het bestand op. + +## +--- code --- + +language: python +line_numbers: true +line_number_start: 5 +line_highlights: 9-11 +--- + +@app.route('/') +def index(): +return 'Hallo wereld' + +@app.route('/cakes') +def cakes(): +return 'Lekkere taarten!' + +--- /code --- + +--- /task --- + +--- task --- + +Typ in de **Chromium webbrowser** `localhost:5000/cakes` in de adresbalk. + +U zou een webpagina moeten zien met de tekst "Lekkere taarten!" erop. + +![Lekkere taarten](images/flask-cakes.png) + +--- /task --- diff --git a/nl-NL/step_4.md b/nl-NL/step_4.md new file mode 100644 index 0000000..2dc7a5c --- /dev/null +++ b/nl-NL/step_4.md @@ -0,0 +1,123 @@ +## Een HTML-sjabloon maken + +U kunt een **sjabloon** gebruiken om uw pagina een stijl te geven. De sjabloon maakt gebruik van **HyperText Markup Language (HTML)**. + +--- task --- + +Ga naar je terminal en druk op Ctrl + C om je Flask-server te stoppen. + +--- /task --- + +--- task --- + +Maak een `templates`-map in uw `webapp`-map: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +mkdir templates + +--- /code --- + +--- /task --- + +--- task --- + +Ga terug naar **Thomny** en maak een nieuw bestand. Sla dit bestand op als `index.html` in uw `templates`-map. + +--- /task --- + +--- task --- + +Voeg deze code toe aan `index.html` en **sla** uw wijzigingen op. + +## +--- code --- + +language: html +line_numbers: true +------------------------------------------------------- + + + +

Mijn website

+ + + +--- /code --- + +![Een nieuw bestand genaamd index.html met de bovenstaande code](images/html-file.png) + +--- /task --- + +--- task --- + +--- /task --- + +--- task --- + +Ga terug naar uw `app.py`-bestand en wijzig de eerste regel code: + +## +--- code --- + +language: python +line_numbers: true +------------------------------------------------------- + +from flask import Flask, render_template + +--- /code --- + +--- /task --- + +--- task --- + +Wijzig de `index()`-route om uw `index.html` HTML-sjabloon te gebruiken: + +## +--- code --- + +language: python +line_numbers: true +line_number_start: 5 +line_highlights: 7 +------------------------------------------------------- + +@app.route('/') +def index(): +return render_template('index.html') + +--- /code --- + +--- /task --- + +--- task --- + +Sla `app.py` op en ga terug naar de terminal om het bestand uit te voeren en uw server opnieuw op te starten: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +python3 app.py + +--- /code --- + +--- /task --- + +--- task --- + +Ga naar de pagina `localhost:5000/` in **Chromium** om uw nieuwe HTML-sjabloon te zien. + +![Een webbrowser verwees naar localhost:5000 met de tekst 'Mijn website' in een groot koptekstlettertype](images/flask-template.png) + +--- /task --- + diff --git a/nl-NL/step_5.md b/nl-NL/step_5.md new file mode 100644 index 0000000..4b9ddee --- /dev/null +++ b/nl-NL/step_5.md @@ -0,0 +1,123 @@ +## Gebruik CSS-stijlen + +**Cascading Style Sheets (CSS)** zijn regels die een browser vertellen hoe HTML-inhoud moet worden weergegeven. + +--- task --- + +Open een nieuw terminalvenster, zodat u de Flask-webserver in het andere venster draaiende kunt laten. + +--- /task --- + +--- task --- + +Zorg ervoor dat u zich in de map `webapp` bevindt met behulp van deze opdracht: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +cd ~/Documents/webapp + +--- /code --- + +--- /task --- + +--- task --- + +Maak een nieuwe map met de naam `static`. + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +mkdir static + +--- /code --- + +--- /task --- + +--- task --- + +Ga terug naar **Thomny** en maak een nieuw bestand. Sla dit bestand op als `style.css` in uw `static` map. + +--- /task --- + +--- task --- + +Voeg de volgende CSS-regels toe aan `style.css` en **sla** het bestand op. Dit is uw stijlblad. + +## +--- code --- + +language: css +line_numbers: true +------------------------------------------------------- + +body { +background: beige; +color: blue; +} + +--- /code --- + +--- /task --- + +--- task --- + +Wijzig nu uw HTML-sjabloon `index.html` zodat deze het CSS-stijlblad bevat: + +## +--- code --- + +language: css +line_numbers: true +line_number_start: 1 +line_highlights: 2-4 +--------------------------------------------------------- + + + + + + +

Mijn website

+ + + +--- /code --- + +--- /task --- + +--- task --- + +Sla de wijzigingen op in `index.html` en ga terug naar **Chromium** om de browser te vernieuwen. U zou een kleurrijke versie van uw web-app moeten zien! + +![Flask-app met kleur](images/flask-app-with-colour.png) + +--- /task --- + +--- collapse --- +--- +title: Ik kan de kleuren niet zien +--- + +Als uw webapp er niet goed uitziet, staat uw CSS-bestand mogelijk niet in de juiste map. + +Zorg ervoor dat de projectmap `webapp` de volgende bestanden bevat en de volgende structuur heeft: + +``` +├── app.py +├── static +│   └── style.css +└── templates + └── index.html + └── cakes.html +``` + +--- /collapse --- \ No newline at end of file diff --git a/nl-NL/step_6.md b/nl-NL/step_6.md new file mode 100644 index 0000000..6714c1f --- /dev/null +++ b/nl-NL/step_6.md @@ -0,0 +1,111 @@ +## Dynamische inhoud + +Websites als Facebook, YouTube en BBC News hebben dynamische inhoud: deze websites tonen verschillende inhoud binnen dezelfde template. + +Nu gaat u een nieuwe route op uw website aanmaken, zodat de pagina een persoonlijke begroeting toont. + +--- task --- + +Open `app.py` en voeg een nieuwe route toe aan uw applicatie: + +## +--- code --- + +language: python +line_numbers: true +line_number_start: 5 +line_highlights: 9-11 +---------------------------------------------------------- + +@app.route('/') +def index(): +return render_template('index.html') + +@app.route('/hello/') +def hello(name): +return render_template('page.html', name=name) + +--- /code --- + +--- /task --- + +--- task --- + +Maak een nieuwe HTML-sjabloon in de sjablonenmap met de naam `page.html` en voeg de volgende HTML-code eraan toe: + +## +--- code --- + +language: html +line_numbers: true +------------------------------------------------------- + + + +

Hallo {{ name }}!

+ + + +--- /code --- + +--- /task --- + +--- task --- + +Sla beide bestanden op en ga vervolgens naar `localhost:5000/hello/Paul` in de **Chromium-browser**. + +De pagina die u ziet, zou er als volgt uit moeten zien: + +![Een website die de tekst 'Hallo Paul!' weergeeft](images/flask-hello-paul.png) + +Probeer `Paul` in de adresbalk te vervangen door een andere naam! + +--- /task --- + +--- task --- + +Open uw `index.html`-sjabloon en voeg een link naar de hallo-pagina toe onder de kop. + +## +--- code --- + +language: html +line_numbers: true +line_number_start: 6 +line_highlights: 7 +------------------------------------------------------- + +

Mijn website

Hallo Paul + +--- /code --- + +--- /task --- + +--- task --- + +Sla de wijzigingen op in `index.html` en open vervolgens `localhost:5000` om de bijgewerkte versie te bekijken. + +![Een website met blauwe tekst op een beige achtergrond. De tekst luidt 'Mijn website' in een koptekstlettertype en vervolgens een link naar 'Hoi Paul'](images/flask-app-link.png) + +--- /task --- + +--- collapse --- +--- +title: Hoe werkt deze route? +--- + +- `@app.route('/hello/')`: het `` gedeelte geeft de tekst die in de URL staat door aan de `hello` functie als een variabele met de naam `name`. +- `def hello(name)`: dit is de functie die bepaalt welke inhoud wordt getoond. Hierbij neemt de functie de opgegeven naam als parameter. +- `return render_template('page.html', name=name)`: deze code zoekt de sjabloon `page.html` op en geeft de variabele `name` uit de URL door, zodat de sjabloon deze kan gebruiken. + +Flask maakt gebruik van `jinja`, een Python-bibliotheek voor het renderen van sjablonen. Kijk eens naar deze code met de accolades: + +```html +

Hallo {{ name }}!

+``` + +Deze code vertelt de sjabloon om de variabele `name` te gebruiken die is doorgegeven in de routefunctie `hello`. + +Als u `localhost:5000/hello/` bezoekt zonder een naam, ontstaat er een fout. + +--- /collapse --- \ No newline at end of file diff --git a/nl-NL/step_7.md b/nl-NL/step_7.md new file mode 100644 index 0000000..1abda07 --- /dev/null +++ b/nl-NL/step_7.md @@ -0,0 +1,25 @@ +## Uitdaging + +--- task --- + +Voeg een andere route toe voor uw website. + +--- /task --- + +--- task --- + +Zoek een aantal **hex-codes** op voor andere kleuren die je in je CSS kunt gebruiken. + +--- /task --- + +--- task --- + +Zoek nog meer HTML-tags op die u in uw sjablonen kunt gebruiken. + +--- /task --- + +--- task --- + +Gebruik dynamische inhoud op een andere manier op uw website. + +--- /task --- \ No newline at end of file diff --git a/nl-NL/step_8.md b/nl-NL/step_8.md new file mode 100644 index 0000000..d54107d --- /dev/null +++ b/nl-NL/step_8.md @@ -0,0 +1,28 @@ +## Wat kun je nu doen? + +Probeer ons projectpad [Introductie tot web](https://projects.raspberrypi.org/nl-NL/pathways/web-intro), waarin u leert hoe u webpagina's kunt structureren en stylen met afbeeldingen, lijsten, lettertypen, citaten, links en animaties. + +--- print-only --- + +![Voltooid project](images/solution.png) + +--- /print-only --- + +--- no-print --- + + + +--- /no-print --- + +Of probeer een ander [HTML en CSS](https://projects.raspberrypi.org/nl-NL/projects?software%5B%5D=html-css-javascript) project. + +*** +Dit project werd vertaald door vrijwilligers: + +[name] + +[name] + +[name] + +Dankzij vrijwilligers kunnen we mensen over de hele wereld de kans geven om in hun eigen taal te leren. Jij kunt ons helpen meer mensen te bereiken door vrijwillig te starten met vertalen - meer informatie op [rpf.io/translate](https://rpf.io/translate).