Commit 80c02043 authored by TUHH GitLab Administrator (Andreas Böttger)'s avatar TUHH GitLab Administrator (Andreas Böttger)
Browse files

Merge branch 'master' into 'development'

Master

See merge request !6
parents d93d1345 b34d6f9e
variables:
REVIEW_IMAGE: docker.rz.tu-harburg.de:5000/docker/nginx--review-apps:latest
BUILD_IMAGE: docker.rz.tu-harburg.de:5000/docker/gitbook-itbh-glr:latest
DOCKER_CONTAINER_NAME: ${CI_PROJECT_PATH_SLUG}-${CI_ENVIRONMENT_SLUG}
before_script:
- sudo docker pull ${BUILD_IMAGE}
- sudo docker pull ${REVIEW_IMAGE}
image: docker.rz.tu-harburg.de:5000/docker/gitbook:node
stages:
- setup
- test
- build
- review
- deploy
- clean
- linkchecker
review:pdf:
stage: review
only:
- branches
when: manual
retry: 2
tags:
- development
before_script:
# https://docs.gitlab.com/ee/ci/ssh_keys/README.html
- mkdir -p ~/.ssh
- chmod 700 ~/.ssh
setup:
stage: setup
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- node_modules
script:
- pwd
- mkdir -p book_pdf; sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} pdf ./ ./book_pdf/book.pdf
- gitbook install
test:
stage: test
script:
#- if [ -f book.json ]; then jq -r --arg base_path "/${CI_PROJECT_PATH}/~${CI_COMMIT_REF_NAME}/" '.base_path |= $base_path' book.json | sponge book.json; fi
#- if [ -f book.json ]; then jq -r --arg pluginsConfig__downloadpdf_base "/${CI_PROJECT_PATH}/~${CI_COMMIT_REF_NAME}/book_pdf/book.pdf?/" '.pluginsConfig.downloadpdf.base |= $pluginsConfig__downloadpdf_base' book.json | sponge book.json; fi
#- if [ -f book.json ]; then cat book.json; fi
#- if [ -f book.json ]; then jq -r --arg base_path "/${CI_PROJECT_PATH}/" '.base_path |= $base_path' book.json | sponge book.json; fi
#- if [ -f book.json ]; then jq -r --arg pluginsConfig__downloadpdf_base "/${CI_PROJECT_PATH}/book_pdf/book.pdf?/" '.pluginsConfig.downloadpdf.base |= $pluginsConfig__downloadpdf_base' book.json | sponge book.json; fi
#- if [ -f book.json ]; then cat book.json; fi
- exit 0
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- node_modules
policy: pull
except:
- master
pdf:
stage: build
script:
- gitbook install
- mkdir -p book_pdf
- gitbook pdf ./ ./book_pdf/book.pdf
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- node_modules
- book_pdf
artifacts:
name: "${CI_JOB_NAME}_${CI_COMMIT_REF_NAME}"
paths:
- book_pdf
pages:branches:
stage: build
script:
- if [ -f book.json ]; then jq -r --arg base_path "/${CI_PROJECT_PATH}/~${CI_COMMIT_REF_NAME}/" '.base_path |= $base_path' book.json | sponge book.json; fi
- if [ -f book.json ]; then jq -r --arg pluginsConfig__downloadpdf_base "/${CI_PROJECT_PATH}/~${CI_COMMIT_REF_NAME}/book_pdf/book.pdf?/" '.pluginsConfig.downloadpdf.base |= $pluginsConfig__downloadpdf_base' book.json | sponge book.json; fi
- 'if [ -f book.json ]; then cat book.json; fi'
- gitbook install
- gitbook build
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- node_modules
- _book
artifacts:
paths:
- _book
except:
- master
pages:master:
stage: build
script:
- if [ -f book.json ]; then jq -r --arg base_path "/${CI_PROJECT_PATH}/" '.base_path |= $base_path' book.json | sponge book.json; fi
- if [ -f book.json ]; then jq -r --arg pluginsConfig__downloadpdf_base "/${CI_PROJECT_PATH}/book_pdf/book.pdf?/" '.pluginsConfig.downloadpdf.base |= $pluginsConfig__downloadpdf_base' book.json | sponge book.json; fi
- 'if [ -f book.json ]; then cat book.json; fi'
- gitbook install
- gitbook build
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- node_modules
- _book
artifacts:
paths:
- _book
only:
- master
review:start:
stage: review
retry: 2
script:
- pwd
- sudo docker run --detach --rm --env VIRTUAL_HOST=${CI_ENVIRONMENT_SLUG} --name ${DOCKER_CONTAINER_NAME} ${REVIEW_IMAGE} || true
- sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} install
- sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} build
- sudo docker cp ./_book/. ${DOCKER_CONTAINER_NAME}:/usr/share/nginx/html
- if [ ! -z "${REVIEW_CREDENTIALS}" ]; then mkdir -p ./nginx && echo "${REVIEW_CREDENTIALS}" > ./nginx/credentials && sudo docker cp ./nginx/credentials ${DOCKER_CONTAINER_NAME}:/etc/nginx/htpasswd/credentials; rm -f ./nginx/credentials; fi
environment:
name: review/${CI_COMMIT_REF_NAME}
url: http://${CI_ENVIRONMENT_SLUG}.collaborating.tuhh.de
on_stop: review:stop
only:
- branches
tags:
- development
- ssg
- echo "$REVIEW_SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
- chmod 644 ~/.ssh/known_hosts
- eval $(ssh-agent -s)
- echo "$REVIEW_SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
- ssh -p "${REVIEW_SSH_PORT}" "${REVIEW_SSH_USER}"@"${REVIEW_HOST_NAME}" "mkdir -p /usr/share/nginx/html/~${CI_COMMIT_REF_NAME}"
- scp -P "${REVIEW_SSH_PORT}" -r _book/* "${REVIEW_SSH_USER}"@"${REVIEW_HOST_NAME}":"/usr/share/nginx/html/~${CI_COMMIT_REF_NAME}"
- if [ -d book_pdf ]; then ssh -p "${REVIEW_SSH_PORT}" "${REVIEW_SSH_USER}"@"${REVIEW_HOST_NAME}" "mkdir -p /usr/share/nginx/html/~${CI_COMMIT_REF_NAME}/book_pdf"; fi
- if [ -d book_pdf ]; then scp -P "${REVIEW_SSH_PORT}" -r book_pdf/* "${REVIEW_SSH_USER}"@"${REVIEW_HOST_NAME}":"/usr/share/nginx/html/~${CI_COMMIT_REF_NAME}/book_pdf"; fi
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- _book
- book_pdf
policy: pull
except:
- master
environment:
name: $CI_COMMIT_REF_NAME
url: https://${REVIEW_PROXY_HOST_NAME}/${REVIEW_BASE_DIR}/~${CI_COMMIT_REF_NAME}/
on_stop: review:stop
review:stop:
stage: review
variables:
GIT_STRATEGY: none
script:
- sudo docker stop ${DOCKER_CONTAINER_NAME}
- echo "$REVIEW_SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
- chmod 644 ~/.ssh/known_hosts
- eval $(ssh-agent -s)
- echo "$REVIEW_SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
- ssh -p "${REVIEW_SSH_PORT}" "${REVIEW_SSH_USER}"@"${REVIEW_HOST_NAME}" "rm -rf /usr/share/nginx/html/~${CI_COMMIT_REF_NAME}"
when: manual
environment:
name: review/${CI_COMMIT_REF_NAME}
action: stop
only:
- branches
tags:
- development
- ssg
except:
- master
environment:
name: $CI_COMMIT_REF_NAME
action: stop
.deploy:
stage: deploy
only:
- master
retry: 2
tags:
- ssg
except:
- schedules
script:
- pwd
- sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} install
- sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} build
- mkdir -p book_pdf; sudo docker run --rm -v $(pwd):/source ${BUILD_IMAGE} pdf ./ ./book_pdf/book.pdf
- sshpass -p "${SSH_PASSWD}" ssh -p "${SSH_PORT}" "${SSH_USER}"@"${HOST_NAME}" "mkdir -p /usr/share/nginx/html/production"
- sshpass -p "${SSH_PASSWD}" scp -P "${SSH_PORT}" -r _book/* "${SSH_USER}"@"${HOST_NAME}":/usr/share/nginx/html/production
- sshpass -p "${SSH_PASSWD}" scp -P "${SSH_PORT}" -r book_pdf "${SSH_USER}"@"${HOST_NAME}":/usr/share/nginx/html/production
- echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
- chmod 644 ~/.ssh/known_hosts
- eval $(ssh-agent -s)
- echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
- ssh -p "${SSH_PORT}" "${SSH_USER}"@"${HOST_NAME}" "mkdir -p /usr/share/nginx/html"
- scp -P "${SSH_PORT}" -r _book/* "${SSH_USER}"@"${HOST_NAME}":"/usr/share/nginx/html"
- if [ -d book_pdf ]; then ssh -p "${SSH_PORT}" "${SSH_USER}"@"${HOST_NAME}" "mkdir -p /usr/share/nginx/html/book_pdf"; fi
- if [ -d book_pdf ]; then scp -P "${SSH_PORT}" -r book_pdf/* "${SSH_USER}"@"${HOST_NAME}":"/usr/share/nginx/html/book_pdf"; fi
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- _book
- book_pdf
policy: pull
environment:
name: production
name: $CI_COMMIT_REF_NAME
#url: http://$HOST_NAME$COLON$HTTP_PORT/production/
#url: https://$PROXY_HOST_NAME/$BASE_PATH/
url: https://$PROXY_HOST_NAME/$CI_PROJECT_PATH/
\ No newline at end of file
url: https://$PROXY_HOST_NAME/${BASE_DIR}/
#url: https://$PROXY_HOST_NAME/
clean:
stage: clean
script:
- echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
- chmod 644 ~/.ssh/known_hosts
- eval $(ssh-agent -s)
- echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
- ssh -p "${SSH_PORT}" "${SSH_USER}"@"${HOST_NAME}" "rm -rf /usr/share/nginx/html/*"
when: manual
only:
- master
environment:
name: $CI_COMMIT_REF_NAME
action: stop
linkchecker:intern:
stage: linkchecker
except:
- master
image:
name: linkchecker/linkchecker
entrypoint: [""]
script:
- linkchecker --recursion-level 10 --threads 10 --no-status --no-robots --no-warnings --ignore-url 'https://fonts.gstatic.com/{0,1}$' https://${REVIEW_PROXY_HOST_NAME}/${REVIEW_BASE_DIR}/~${CI_COMMIT_REF_NAME}/
when: manual
linkchecker:all:
stage: linkchecker
except:
- master
image:
name: linkchecker/linkchecker
entrypoint: [""]
script:
- linkchecker --recursion-level 10 --threads 10 --no-status --no-robots --no-warnings --check-extern --ignore-url 'https://fonts.gstatic.com/{0,1}$' https://${REVIEW_PROXY_HOST_NAME}/${REVIEW_BASE_DIR}/~${CI_COMMIT_REF_NAME}/
when: manual
## Glossar
## API
*Application Programming Interface* Dabei handelt es sich um die Schnittstelle einer Software, Sprache oder Programmbibliothek. Menschen und Maschinen können über die API auf das Gerät/die Software zugreifen. Zu jeder API sollte es eine gute Dokumentation geben, die Menschen lesen und verstehen können. [Ein Beispiel ist die API-Referenz von Python](https://docs.python.org/3/).
<!--
<div class="badge-wrapper">
<a class="version-badge" href="https://fizban05.rz.tu-harburg.de/itbh-inf-wise201718/veranstaltungsskript-inf-wise201718/">
<img alt="version HTML" src="https://img.shields.io/badge/version-HTML-yellowgreen.svg">
......@@ -9,6 +10,7 @@
<img alt="version Pandoc PDF" src="https://img.shields.io/badge/version-Pandoc_PDF-red.svg" />
</a>
</div>
-->
# Über diese Veranstaltung
......
......@@ -22,7 +22,21 @@
* [Fahrplan](sitzungen/fahrplan.md)
* [[01] 2017-10-20](sitzungen/01-Fr-2017-10-20.md)
* [[02] 2017-10-27](sitzungen/02-Fr-2017-10-27.md)
* [Arbeitsauftrag INF2](sitzungen/auftraege/02-Fr-2017-10-27-auftrag-inf2.md)
* [Arbeitsauftrag](sitzungen/auftraege/02-Fr-2017-10-27-auftrag-inf2.md)
* [[03] 2017-11-03](sitzungen/03-Fr-2017-11-03.md)
* [Arbeitsauftrag](sitzungen/auftraege/03-Fr-2017-11-03-auftrag-inf2.md)
* [[04] 2017-11-10](sitzungen/04-Fr-2017-11-10.md)
* [Arbeitsauftrag](sitzungen/auftraege/04-Fr-2017-11-10-auftrag-inf2.md)
* [[05] 2017-11-17](sitzungen/05-Fr-2017-11-17.md)
* [Arbeitsauftrag](sitzungen/auftraege/05-Fr-2017-11-17-auftrag-inf2.md)
* [[06] 2017-11-24](sitzungen/06-Fr-2017-11-24.md)
* [Arbeitsauftrag](sitzungen/auftraege/06-Fr-2017-11-24-auftrag-inf2.md)
* [[07] 2017-12-01](sitzungen/07-Fr-2017-12-01.md)
* [Arbeitsauftrag](sitzungen/auftraege/07-Fr-2017-12-01-auftrag-inf2.md)
* [[08] 2017-12-08](sitzungen/08-Fr-2017-12-08.md)
* [Arbeitsauftrag](sitzungen/auftraege/08-Fr-2017-12-08-auftrag-inf2.md)
* [[09] 2017-12-15](sitzungen/09-Fr-2017-12-15.md)
* [Arbeitsauftrag](sitzungen/auftraege/09-Fr-2017-12-15-auftrag-inf2.md)
## Lernmaterialtypen
* [Lernmaterialtypen](material/typen/einleitung.md)
......@@ -37,6 +51,7 @@
## Sitzungsmaterial
* [Studienleistungen mit GitLab hochladen](material/sitzungsmaterial/studienleistungen-in-gitlab-hochladen.md)
* [Jupyter Notebook installieren](material/sitzungsmaterial/einrichtung-byod-python.md)
* [Experiment: Client-/Serverkommunikation](material/sitzungsmaterial/analyse-client-server.md)
* [Sechszeiler in Markdown](material/sitzungsmaterial/sechszeiler-in-markdown.md)
* [Einrichtung Raspberry Pi](material/sitzungsmaterial/einrichtung-rpi.md)
......@@ -52,6 +67,7 @@
## Referenzen
* [Literatur](material/literatur.md)
* [Glossar](GLOSSARY.md)
## Anhang
* [Atom Editor](./anhang/atom/atom.md)
......@@ -59,4 +75,6 @@
## Meta
* [Impressum und Kontakt](meta/impressum.md)
* [Datenschutzerklärung](meta/datenschutz.md)
* [Beitragen und Weiternutzen](meta/beitragen.md)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulartemplate</title>
</head>
<body>
<form>
Vorname:
<input type="text">
<br>
Zuname:
<input type="text">
<br>
männlich
<input type="radio" name="geschlecht">
weiblich
<input type="radio" name="geschlecht">
<br>
über 18:
<input type="checkbox">
</form>
</body>
</html>
......@@ -9,7 +9,7 @@
"pluginsConfig": {
"image-captions": {
"align": "left",
"caption": "Abbildung: _PAGE_IMAGE_NUMBER_ - _CAPTION_",
"caption": "Abbildung _PAGE_IMAGE_NUMBER_: _CAPTION_",
"images": {
"1.1.1": {
"skip": true
......@@ -44,7 +44,7 @@
"description": "Begleitendes Skript für die Veranstaltung Einführung in die Informationstechnik am ITBH der TUHH, WiSe 2017/18",
"title": "Einführung in die Informationstechnik II",
"colors": {
"sidebarBackground": "#ff8700",
"sidebarBackground": "#78b37e",
"sidebarColor": "#fff",
"partHeaderColor": "#364149",
"sidebarLink": "#fff",
......
......@@ -10,6 +10,7 @@ Wer das WWW mitgestalten will, kommt an HTML nicht vorbei. HTML5 ist die aktuell
HTML5 kann man mit jedem Texteditor notieren, als `dateiname.html` speichern und dann als Dokument im Browser öffnen. Wir werden in der Veranstaltung [Atom](http://atom.io) verwenden, einen Editor, der unter der [MIT Lizenz](https://github.com/atom/atom/blob/master/LICENSE.md) veröffentlicht wurde und damit als [Freie Software gilt](https://www.gnu.org/licenses/license-list#X11License).
### Referenzen
* Ein sehr guter Anlaufpunkt in Sachen Referenz und Dokumentation ist das **Mozilla Developer Framework**. Hier gibt es mittlerweile viel zu [CSS](https://developer.mozilla.org/de/docs/Web/HTML) in deutscher Sprache. Jedoch gilt auch hier, dass die englische Version hinsichtlich Aktualität und Vollständigkeit der deutschen vorzuziehen ist.
......@@ -19,6 +20,7 @@ HTML5 kann man mit jedem Texteditor notieren, als `dateiname.html` speichern und
* Eine aktuelle deutschsprachige Website, die auch Stilfragen und gute Praxis vermittelt, ist das [HTML-Seminar](http://www.html-seminar.de/einsteiger.htm) von Axel Pratzner.
* Auf dieser Seite ist besonders [der Vergleich zwischen der "althergebrachten Art" und der neuen zu erwähnen](http://www.html-seminar.de/html-5-strukturierende-elemente.htm), mit der Webseiten strukturiert werden.
* Die W3School hat [viele Lerneinheiten](http://www.w3schools.com/html/html5_intro.asp) zu aktuellen Sprachen des Webs.
* Die Arnold-Bode-Schule in Kassel hat eine [Lernplatform](http://code.arnoldbodeschule.de/) speziell für Mediengestalter Digital und Print entworfen
### Videos
......
# Einrichtung des eigenen Rechners für die Arbeit mit Python
Weil die Installation von Python auf den drei gängigen Betriebssystemen Windows, MacOS und Linux zuweilen umständlich sein kann, wird im Folgenden ein Verfahren beschrieben, das halbwegs einheitlich und einfach ist.
## Installation von Anaconda
Anaconda ist eine freie und quelloffene Entwicklungsumgebung, die vor allem in wissenschaftlichen Zusammenhängen genutzt wird. Wir nutzen sie vornehmlich für zwei Dinge:
1. Um einfach zu einer verlässlichen Pythonumgebung kommen
1. Für das Arbeiten mit [Jupyter Notebook](https://jupyter.org/)
### Vorgehen
- [Laden Sie Anaconda für Ihr Betriebssystem herunter](https://www.anaconda.com/download/) (ca. 3 GB).
- Installieren Sie die Anwendung. Unchecken Sie die beiden Boxen am Ende des Installationsvorgangs, bevor Sie beenden.
Sie haben nun **Anaconda Navigator** und unter Windows noch **Anaconda Prompt** auf dem Rechner.
- Starten Sie Anaconda Navigator. Sehen Sie sich darin alles an. Uns interessiert die Anwendung **Jupyter Notebook**, mit der wir hauptsächlich arbeiten werden.
![Anaconda-Dashboard](/abb/material/sitzungsmaterial/Anaconda-Dashboard.png)
- Starten Sie Jupyter Notebook mit einem Klick auf *Launch*. Wie Sie sinnvoll mit Jupyter Notebook arbeiten können, zeigt das folgende Video.
- <iframe width="560" height="315" src="https://www.youtube.com/embed/DLWBfR2hxoo?rel=0" frameborder="0" allowfullscreen></iframe>
Video 1: "Jupyter Demo 1 - Playing with Strings" by Lorena Barba unter [CC-BY](https://creativecommons.org/licenses/by/3.0/legalcode)
<!-- ![Beispiel für ein Arbeitsblatt in Jupyter Notebook](/abb/material/sitzungsmaterial/Jupyter-Notebook.png) -->
## Konfiguration von Anaconda
Damit Jupyter Notebook nach dem Start Ihren gewünschten Arbeitsordner anzeigt, sind folgende Schritte zu erledigen (hier beschrieben für Windows):
- Rufen Sie über START den **Anaconda Prompt** auf. Das gilt nur für Windows, *nix-User_innen (MacOS und Linux) haben schon eine Kommandozeile eingebaut.
- Geben Sie `jupyter-notebook --generate-config` ein, um initial eine Konfigurationsdatei für Jupyter Notebook zu generieren.
- Öffnen Sie diese Datei z.B. durch die Eingabe `notepad .jupyter\jupyter_notebook_config.py`
- Passen Sie den Wert von `c.NotebookApp.notebook_dir` an. Geben Sie einen absoluten Pfad mit Laufwerksbuchstabe (nur Windows) und *forward slashes* ("/") an.
- Speichern und schließen Sie die Datei.
- Starten Sie Jupyter Notebook. Sie sollten nun im gewünschten Verzeichnis landen.
## Erfahrungen bei Installation und Konfiguration
- **Windows**: Die Installation unter Windows sollte unter Adminrechten durchgeführt werden. Sonst kann es passieren, dass die Menüeinträge nicht erstellen werden kann (Option: "Just me").
- **Windows**: Die Konfiguration des Startordners für Jupyter Notebook gelingt nicht immer sofort, hier ist Geduld gefragt. Es kann sein, dass die Konfigurationsdatei nicht erneut eingelesen wird, wenn schon Prozesse von Jupyter Notebook laufen. Wie immer bei Windows: Jeder Boot tut gut. Oder mit dem Taskmanager alle Jupyter-Prozesse abschießen.
- **Windows**: *forward slashes* und Einkommentieren der Direktive für den Startordner werden gern vergessen.
- **Mac**: Da die Konfigurationsdatei in dem versteckten Ordner `.jupyter` angelegt wird, kann es schwierig sein, diese zu öffnen, wenn der Mac versteckte Dateien nicht anzeigt. Hier kann *vim* helfen, der vom Terminal aus gestartet werden kann, aber nicht allen Studierenden gleich ein guter Freund ist.
## Installation von GitBash (nur Windows)
tbd
## Installation von GitKraken
tbd
......@@ -35,19 +35,19 @@ Die Motivation, GitLab für diese Veranstaltung einzusetzen, liegt darin, dass z
## Die eigene Subgroup finden
Für alle Teilnehmer_innen wurde ein so genannte Subgroup in GitLab eingerichtet. Sie ist der Subgroup der Veranstaltung, [itbh-inf-sose2017](https://collaborating.tuhh.de/itbh-inf-sose2017), untergeordnet. Eine Subgroup gibt dem *Owner*, also dem jeweiligen Teilnehmer, volle Rechte als *Master* dieser Gruppe. Er/sie kann andere einladen, Projekte anlegen und verschiedene andere Operationen durchführen.
Für alle Teilnehmer_innen wurde ein so genannte Subgroup in GitLab eingerichtet. Sie ist der Subgroup der Veranstaltung, [itbh-inf-wise201718](https://collaborating.tuhh.de/itbh-inf-wise201718), untergeordnet. Eine Subgroup gibt dem *Owner*, also dem jeweiligen Teilnehmer, volle Rechte in dieser Gruppe. Er/sie kann andere einladen, Projekte anlegen und verschiedene andere Operationen durchführen.
Die eigene Subgroup findet man am besten durch den Einstieg in die Gruppe der Veranstaltung, [itbh-inf-sose2017](https://collaborating.tuhh.de/itbh-inf-sose2017) und anschließend durch einen Klick auf *Subgroups*.
Die eigene Subgroup findet man am besten durch den Einstieg in die Gruppe der Veranstaltung, [itbh-inf-wise201718](https://collaborating.tuhh.de/itbh-inf-wise201718) und anschließend durch einen Klick auf *Subgroups*.
![Ausgehen von der Kursgruppe die eigene Subgroup finden](/abb/material/sitzungsmaterial/gitlab-subgroup-finden.png)
![Ausgehen von der Kursgruppe die eigene Subgroup finden (Die Bildschirmdarstellung kann vom Screenshot abweichen.)](/abb/material/sitzungsmaterial/gitlab-subgroup-finden.png)
## Projekte anlegen
Benutzer_innen in GitLab können eine bestimmte Anzahl von Projekten anlegen, in der Regel fünf.
Im folgenden werden Sie ein neues Projekt anlegen und ihm den Namen *Studienleistungen_[Ihr Name]* geben. Hier kann alles hochgeladen werden, was Sie im Laufe der kommenden Sitzungen erarbeiten.
Im Folgenden werden Sie ein neues Projekt anlegen und ihm den Namen *Studienleistungen_[Ihr Name]* geben. Hier kann alles hochgeladen werden, was Sie im Laufe der kommenden Sitzungen erarbeiten.
Für das Anlegen eines Projekts starten Sie in der Subgroup mit Ihrem Namen.
Für das Anlegen eines Projekts starten Sie in der Subgroup Ihres Namens.
![Anlegen eines Projekts in GitLab](/abb/material/sitzungsmaterial/gitlab-projekt-anlegen.gif)
......
......@@ -5,3 +5,8 @@ Auf so genannten Cheat Sheets werden die wichtigsten Befehle und Ausdrücke eine
Eine Internetrecherche z.B. nach "cheat sheet html" fördert einige zutage, bei [Envato](https://envato.com/blog/cheatsheets-web-designers/) findet sich auch eine gute Sammlung.
![Screenshot eines Cheat Sheets von <a href='https://websitesetup.org/HTML5-cheat-sheet.pdf'>WebsiteUp</a>](/abb/material/typen/html-cheat-sheet.png)
### Python
- https://ehmatthes.github.io/pcc/cheatsheets/README.html
-
# Datenschutzerklärung
Bei jedem Zugriff einer Nutzerin bzw. eines Nutzers auf die diese Website werden Daten über diesen Vorgang vorübergehend in einer Protokolldatei gespeichert.
Im Einzelnen sind dies folgende Daten:
IP-Adresse
Datum und Uhrzeit
Browserinformationen
Referrer
URI der abgerufenen Information
Diese Daten werden lediglich für statistische Zwecke ausgewertet. Personenbezogene Daten, die im Rahmen der Registrierung, Anmeldung bzw. Nutzung erhoben werden, werden nur zweckgebunden verarbeitet und solange gespeichert, wie sie für die jeweilige Vorgangsverarbeitung bzw. damit zusammenhängende Zwecke benötigt werden. Eine Offenlegung personenbezogener Daten gegenüber Dritten erfolgt nur, wenn das Institut für Technische Bildung & Hochschuldidaktik gesetzlich dazu verpflichtet ist.
Für Fragen zu den erhobenen Daten kontaktieren Sie bitte das Institut unter **itab@tuhh.de**.
Stand: 23.05.2018
\ No newline at end of file
......@@ -2,9 +2,44 @@
![Markup des Kopfteils eines HTML5-Dokuments](../abb/html5-markup.png)
## Geplante Inhalte
* Vorstellung des Arbeitsauftrags
## Geplante Inhalte
* Vorstellung des Seminarplans
* Gemeinsames Warmwerden im Editor mit HTML und CSS
* Recherche und Präsentation zum Thema HTML-Formularerstellung in Zweierteams
## Auftrag
* Finden Sie sich in Zweierteams zusammen
* Verteilen Sie sich auf die drei vorgegebenen Themen.
* Beantworten Sie die Fragen Ihres jeweiligen Themas.
* Setzen Sie ihre Ergebnisse praktisch um und kommentieren Sie diese.
* Stellen Sie sich die Ergebnisse ihrer Recherche gegenseitig vor (max. 10min)[^*]
### Themen
Formularfelder | Formularversand | Formulargestaltung
-------------- | --------------- | ------------------
Welche Arten von Formularfelder gibt es? | Welche Elemente und Attribute benötigt ein Versandfertiges Formular? | Wie kann ein Formular (responsiv) gestaltet werden?
Welche Merkmale in Form von Attributen bieten die einzelnen Elemente? | Worin unterscheiden sich die Versandmethoden? | Wie muss ein barrierefreies Formular gestaltet sein?
| Mit welchen Techniken kann clientseitige Validierung stattfinden? |
Nutzen Sie für das [Formular Template](abb/material/sitzungsmaterial/formular_template.html) im Downloadbereich als Basis für Tests und die praktische Umsetzung ihrer Ergebnisse.
Denken Sie daran ihren Code ausreichend zu kommentieren.
```html
<!-- Kommentar -->
```
## Downloadbereich
[Formular Template](abb/material/sitzungsmaterial/formular_template.html)
*Download durch Rechtsklick und "speichern unter"*
## Recherchehilfe
[selfhtml](https://wiki.selfhtml.org/wiki/Startseite)
[w3schools](https://www.w3schools.com/)
[code.arnoldbodeschule](http://code.arnoldbodeschule.de/)
[Barrierefreie Formulare](https://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare/)
Wir werden den eigenen Rechner für die Entwicklung mit HTML und CSS einrichten. Anschließend werden wir ein erstes einfaches HTML-Dokument entwickeln. Dabei nutzen wir [Atom](https://atom.io/) als Entwicklungsumgebung und [Chromium](https://www.chromium.org/Home) als Entwicklungbrowser.
[^*]: Das Präsentationsmedium und -methode ist ihnen dabei freigestellt.
# [03] Freitag, 03. November 2017
![Programmieren mit Jupyter Notebook](/abb/material/sitzungsmaterial/Jupyter-Notebook.png)
## Geplante Inhalte
* [Installation und Konfiguration von Anaconda](../material/sitzungsmaterial/einrichtung-byod-python.md)
* Einführung in Python in Jupyter Notebook
* Lösen einfacher Programmieraufgaben
## Thema: Grundlagen der Programmierung mit Python
- Einführung in die Grundlagen von Python
- Ausgaben
- Variablen
- Datentypen
- Schleifen
- Fallunterscheidungen und Bedingungen
- Verwendung von Referenzen und Dokumentation einer API
## Sehen, lesen und hören
Zu Python ist die Menge an Literatur, Videos und [sogar Podcasts](https://talkpython.fm/) schier grenzenlos. [Im Abschnitt zu den Lernmaterialtypen](../material/typen/einleitung.md) finden Sie einige Hinweise, ebenso in der [Literaturliste in Zotero](https://www.zotero.org/groups/itbh-informatik/items).
## Auftrag
- Installieren Sie die Entwicklungsumgebung **Anaconda** wie [an dieser Stelle beschrieben](../material/sitzungsmaterial/einrichtung-byod-python.md).
- Laden Sie [den aktuellen Stand der Notebooks für die Veranstaltung](https://collaborating.tuhh.de/itbh-inf-wise201718/jupyter-notebooks) herunter[^1].
- Öffnen Sie die Notebooks für den Veranstaltungstermin in Ihrem lokalen Jupyter Notebook.
[^1]: Im Laufe der Veranstaltung werden Sie lernen, die Notebooks mit [GitKraken](http://gitkraken.com/) rauf und runter zu laden.
# [04] 2017-11-10
In der heutigen Sitzung werden wir **Schleifenkonstrukte** verwenden, um verschiedene HTML-Fragmente zu generieren. Das Ziel ist zu verdeutlichen, dass ein Grundkonzept elektronischer Datenverarbeitung die wiederholte Anwendung von Regeln auf eine Menge von Daten ist.
Für die Programmierung dynamischer Webseiten ist dieses Prinzip in vielerlei Hinsicht anwendbar.
- Datensätze einer Datenbank (Adressdaten, Bilder, Nutzerprofile, Shopartikel) können nach bestimmten Regeln verarbeitet werden
- Navigationen von Webseiten können dynamisch erstellt werden
- Messdaten können regelgeleitet aufbereitet und visualisiert werden.
- ...
Grundlage solcher Realisierungskonzepte ist immer eine **Schleife**. Diese ist keine Eigenheit von Python, sie findet sich in den meisten Programmiersprachen wieder und ist ein Charakteristikum von Computern.
## Geplante Inhalte
- Durchsprechen der Sechszeiler-Exposés und Präzisierung von Projektideen
- Generieren von HTML-Fragmenten mit Python in Jupyter Notebook
- Einführung in die Grundlagen von Python
- Ausgaben
- Variablen
- Datentypen
- Schleifen