Commit 77460d48 authored by Axel Dürkop's avatar Axel Dürkop

Update Vorbereitung 02

parent 9b0183be
...@@ -2,4 +2,15 @@ ...@@ -2,4 +2,15 @@
Man kann sich auf sehr viele verschiedene Weisen mit den Technologien des Webs beschäftigen. Es gibt Bücher, Screencasts, interaktive Lernplattformen, auf denen man im Browser Code und Markup direkt ausprobieren kann, und natürlich unzählige Webseiten und Blogartikel zu verschiedenen Themen rund um die Sprachen des Webs. Man kann sich auf sehr viele verschiedene Weisen mit den Technologien des Webs beschäftigen. Es gibt Bücher, Screencasts, interaktive Lernplattformen, auf denen man im Browser Code und Markup direkt ausprobieren kann, und natürlich unzählige Webseiten und Blogartikel zu verschiedenen Themen rund um die Sprachen des Webs.
Die folgende Sammlung stellt einige Exemplare aus diesen Kategorien vor. Viele davon sind in englischer Sprache verfasst. Hochwertige deutschsprachige Seiten sucht man in vielen technischen Feldern vergebens, weshalb man sich wohl oder übel auf die fremde Sprache einlassen muss. Die folgende Sammlung stellt einige Exemplare aus diesen Kategorien vor. Viele davon sind in englischer Sprache verfasst. Hochwertige deutschsprachige Seiten sucht man in vielen technischen Feldern vergebens, weshalb man sich wohl oder übel auf die fremde Sprache einlassen muss.
## Liste der Typen
* [Bücher](/material/typen/buecher.md)
* [Blogs und Webseiten](/material/typen/blogs.md)
* [Online-Kurse](/material/typen/kurse.md)
* [Interaktive Plattformen](/material/typen/interaktive.md)
* [Screencasts](/material/typen/screencasts.md)
* [Lernleitfäden](/material/typen/lernleitfaden.md)
* [Spickzettel](/material/typen/cheatcheets.md)
* [Sonstige](/material/typen/sonstige.md)
# [02] Montag, 10. April 2017 # [02] Montag, 10. April 2017
![Markup des Kopfteils eines HTML5-Dokuments](../abb/html5-markup.png)
## Geplante Inhalte ## Geplante Inhalte
## Inhalte, die sich in der Veranstaltung ergeben haben * Anmeldung in Mattermost, Einführung in die Benutzung des Tools
* Gemeinsames Warmwerden im Editor mit HTML und CSS
* Vorstellung der Arbeitsaufträge
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.
## Auftrag # Auftrag
### Ziele Der folgende Arbeitsauftrag ist für die Gruppe INF1 gedacht.
## Ziele
* Sie sind in der Lage, mit HTML und CSS eine einfache Website zu bauen. * Sie sind in der Lage, mit HTML und CSS eine einfache Website zu bauen.
* Dabei erarbeiten Sie sich die Grundkenntnisse für HTML-Listen, Bildeinbindung, Hyperlinks, Layout mit CSS * Dabei erarbeiten Sie sich die Grundkenntnisse für HTML-Listen, Bildeinbindung, Hyperlinks, Layout mit CSS
* Sie wissen, was zu tun ist, um eine Website auch für mobile Endgeräte zu optimieren. * Sie wissen, was zu tun ist, um eine Website auch für mobile Endgeräte zu optimieren.
### Szenario ## Szenario
Sie sollen für einen mittelständischen Kunden eine einfache Website erstellen. Diese soll zunächst die notwendigen Informationen über den Betrieb und seine Mitarbeiter_innen enthalten. Später soll die Seite ggf. hinsichtlich der Unterseiten skalieren. Sie sollen für einen mittelständischen Kunden eine einfache Website erstellen. Diese soll zunächst die notwendigen Informationen über den Betrieb und seine Mitarbeiter_innen enthalten. Später soll die Seite ggf. hinsichtlich der Unterseiten skalieren, d.h. es kann noch die eine oder andere Seite oder Funktion hinzukommen.
Der Kunde wünscht, dass die Seite auch auf mobilen Endgeräten gut aussieht, entscheidet sich aber gegen eine App. Der Kunde wünscht, dass die Seite auch auf mobilen Endgeräten gut aussieht, entscheidet sich aber gegen eine App.
Nach einem ersten Konzeptgespräch mit dem Kunden haben Sie ein Mockup erarbeitet, in dem die grundsätzliche Informationsarchitektur der Website festgehalten ist. Nach einem ersten Konzeptgespräch mit dem Kunden haben Sie ein Mockup erarbeitet, in dem die grundsätzliche Informationsarchitektur der Website festgehalten ist:
![Mockup der Website](/abb/2017-04-06-erste-schritte.png) ![Mockup der Website](/abb/2017-04-06-erste-schritte.png)
### Arbeitsschritte ## Aufgabe
Setzen Sie das Mockup mit HTML und CSS als statische Datei um. Dabei sollen HTML und CSS in eigenen Dateien vorliegen.
## Arbeitsschritte
Die folgenden Arbeitsschritte empfehlen sich bei komplexen Aufgaben und Problemen.[^1]
**In der Gruppe/im Tutorium** **In der Gruppe/im Tutorium**
...@@ -44,4 +52,15 @@ Nach einem ersten Konzeptgespräch mit dem Kunden haben Sie ein Mockup erarbeite ...@@ -44,4 +52,15 @@ Nach einem ersten Konzeptgespräch mit dem Kunden haben Sie ein Mockup erarbeite
## Material ## Material
Für die Erstellung des Mockups wurde das Tool [Balsamiq](https://balsamiq.com/) verwendet. Es ist in einer [Webversion kostenlos verwendbar](https://webdemo.balsamiq.com/). Die XML-Datei zu dem Mockup kann dort importiert und weiterbearbeitet werden. Sie liegt [in GitLab](#). * Eine gute deutschsprachige Einführung findet sich unter https://www.html-seminar.de/.
* Ein gute Einführung in den Prozess der Webseitenerstellung findet sich bei Jacobsen (2017) in der 8. Aufl., ältere Auflagen sind aber auch gut und hilfreich.
* Eine umfassende technische Einführung in HTML und CSS hat Wolf (2016) verfasst.[^2]
* Für die Erstellung des Mockups wurde das Tool [Balsamiq](https://balsamiq.com/) verwendet. Es ist in einer [Webversion kostenlos verwendbar](https://webdemo.balsamiq.com/). Die XML-Datei zu dem Mockup kann dort importiert und weiterbearbeitet werden. Sie liegt [in GitLab](https://collaborating.tuhh.de/itbh/veranstaltungsskript-inf-sose2017/blob/master/abb/2017-04-06-erste-schritte.bmml).
## Abgabetermin
* Geben Sie eine erste Version am **Dienstag, d. 18.04.2017**, ab. Sie erhalten dann Feedback zu Ihrer Arbeit.
* Geben Sie eine zweite Version am **Sonntag, d. 23.04.2017**, ab.
[^1]: Da sich dieses Skript primär an werdende Lehrer_innen richtet, will ich die Quellen der didaktischen Methoden nennen: Die Liste der Arbeitsschritte stammt aus [dem bemerkenswerten Methodenpool der Uni Köln](http://methodenpool.uni-koeln.de/problembased/darstellung.html) und findet sich unter *PBL - Problem Based Learning*.
[^2]: Die zitierte Literatur finden Sie [in der Zotero-Gruppe](https://www.zotero.org/groups/itbh-informatik/items).
## Auftrag # Auftrag
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Der folgende Arbeitsauftrag ist für die Gruppe INF2 gedacht.
## Ziele
* Sie kennen alle Formularelemente von HTML5.
* Sie können mit den gängigsten Formularelementen von HTML5 ein Formular aufbauen und mit CSS gestalten.
## Szenario
Sie haben einen Kunden gewonnen, der einen Lieferservice für richtig gutes Essen eröffnen möchte. Neben einer Bestellhotline will der Kunde eine ansprechende Internetseite haben, die auch auf mobilen Endgeräten gut zu benutzen ist.
Nach einem ersten Konzeptgespräch bittet der Kunde Sie um erste Vorschläge für das Bestellformular.
## Aufgaben
* Recherchieren Sie Bestellformulare von Mitbewerber_innen des Kunden und machen Sie Screenshots, die Sie archivieren.
* Entwerfen Sie mit einem Mockuptool Ihrer Wahl (z.B. [Balsamiq](http://balsamiq.com) oder [draw.io](https://www.draw.io/)) eine erste Skizze der Website des Kunden.
* Entwerfen Sie ein Bestellformular, das den Ansprüchen des Kunden gerecht wird.
* Zeigen Sie dem Kunden Ihre Entwürfe (d.h. jemand anderem aus der Gruppe face-to-face oder in Mattermost) und setzen Sie sie anschließend mit HTML/CSS um.
## Material
* Recherchieren Sie im Netz mit Begriffen wie "html5 formulare" oder "html5 forms".
* Das Buch von Duckett (2013) zeigt sehr anschaulich, was mit Formularen möglich ist, ebenso Stiegert (2010). Eine sehr tiefgehende technische Einführung in HTML5-Formulare findet sich bei Kröner (2010) in der aktuellsten Auflage.[^1]
* Verschiedene Materialtypen für das Eigenstudium und die Vertiefung von Kenntnissen sind in diesem Skript unter [Lernmaterialtypen](/material/typen/einleitung.md) aufgeführt.
## Abgabetermin
* Geben Sie eine erste Version am **Dienstag, d. 18.04.2017**, ab. Sie erhalten dann Feedback zu Ihrer Arbeit.
* Geben Sie eine zweite Version am **Sonntag, d. 23.04.2017**, ab.
[^1]: Die zitierte Literatur finden Sie [in der Zotero-Gruppe](https://www.zotero.org/groups/itbh-informatik/items).
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment