new structure :-(all broken)

content/P1.1/README.md

@@ -0,0 +1,37 @@
+## **9 _Okt_** Arbeitsumgebung und Grundlagen HTML
+
+- Installieren Sie sich Visual Studio Code oder eine IDE (Entwicklungsumgebung) Ihrer Wahl
+- Installieren Sie sich GIT
+- Legen Sie, falls noch nicht vorhanden, ein GitHub Konto an, sowie ein Repository mit dem Namen GIS-SoSe-2020
+- Machen Sie sich mit GIT vertraut → Wir empfehlen Ihnen die Verwendung eines Visual-GIT-Tools wie z.B. GitKraken (s.o.)
+- Registrieren Sie sich auf der Kursseite und legen Sie einen Steckbrief an
+- Ändern Sie das Bild und stellen Sie sicher, dass das Bild und die steckbrief.htm korrekt angezeigt werden
+- Hierfür müssen Sie ihr Repository über GitHub Pages als Website veröffentlichen.
+- Erstellen Sie ein HTML-Dokument mit einer Überschrift und einem weiteren HTML Element Ihrer Wahl und verlinken sie dieses Dokument in Ihrem Steckbrief als Aufgabe 0
+
+Erstellen Sie eine stillose Webstite (HTML-dokument **KEIN CSS oder JS**) zu Ihrer Person die mindestens folgende Elemente enthält: 
+
+- die HTML Basisstruktur mit den HTML Tags [doctype](https://www.w3schools.com/tags/tag_doctype.asp), [html](https://www.w3schools.com/html/html_basic.asp), [head](https://www.w3schools.com/html/html_head.asp), [body](https://www.w3schools.com/tags/tag_body.asp)
+- eine Deklaration der [Zeichenkodierung](https://www.w3schools.com/charsets/ref_html_utf8.asp) und eines [Titels](https://www.w3schools.com/tags/tag_title.asp) - siehe [Überschrift](https://www.w3schools.com/tags/tag_hn.asp) (h tag)
+- ein Bild von Ihnen - siehe [Image tag](https://www.w3schools.com/html/html_images.asp) 
+- jeweils einen Textabsatz zu Ihrer Person und zu Ihrem Studium - siehe [Überschrift](https://www.w3schools.com/tags/tag_hn.asp) (h tag) & [Textblock](https://www.w3schools.com/tags/tag_p.asp) (p tag)
+- Einen [Link](https://www.w3schools.com/tags/tag_a.asp) (a tag) auf eine andere Website ihrer Wahl
+- Einen [Link](https://www.w3schools.com/tags/att_a_href.asp) (a tag) von einem [Textblock](https://www.w3schools.com/tags/tag_p.asp) (p tag) auf einen anderen ([Anker](https://de.wikipedia.org/wiki/Anker_(HTML)) → verwenden Sie dafür das name/id-Attribut in einem anderen HTML Element)
+- mindestens 3 Links auf Websites Ihrer Kollegen
+
+### Tipp
+
+Entdecken Sie die Entwicklungswerkzeuge, die in Ihrem Browser eingebaut sind:
+- [Chrome](https://developer.chrome.com/devtools)
+- [Firefox](https://developer.mozilla.org/docs/Tools)
+- [Safari](https://developer.apple.com/safari/tools/)
+- [Opera](https://www.opera.com/dragonfly/)
+- [Edge](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide)
+
+Diese sind extrem hilfreich im Laufe des gesamten Semesters (und darüber hinaus), wir empfehlen Ihnen also dringend sich hier einzulesen.
+
+### Ziel der Aufgabe
+
+Sie sind arbeitsfähig, d.h. Sie haben sich auf der Kursseite registriert und kennen sich mit den grundlegensten Funktionen von GIT aus. Sie sind dazu in der Lage Ihre Abgaben auf GitHub hochzuladen und wissen wie Sie ihre `steckbrief.htm` aktualisieren können.
+
+Sie haben die grundlegensten Elemente von HTML5 kennengelernt und verstanden und haben Ihre erste, simple & stillose Website erstellt in der Sie sich selbst vorstellen.

content/P1.2/README.md

@@ -0,0 +1,63 @@
+## **16 _Okt_** HTML5 Familie
+
+Stellen Sie Sicher, dass Ihr Profilbild exakt die Maße 85x110 Pixel hat. 
+
+Verlinken Sie immer als oberstes Element in Ihrer Steckbrief.htm Datei mithilfe eines a-Tags auf Ihr Repository unter dem Reiter "Issues", sodass wir Ihnen sowohl auf der Kursseite als auch auf GitHub detailliertes Feedback zu Ihren Abgaben geben können. 
+
+Achten Sie bitte darauf Ihren korrekten Nutzernamen & Repository-Namen anzugeben:
+https://github.com/nutzername/GIS-WiSe-2020-2021/issues
+
+#### Diese Aufgabe baut auf die vorherige Aufgabe #01 auf.
+
+**Sie benötigen für diese Aufgabe _KEIN_ CSS UND KEIN JS**
+
+Im nächsten Schritt ergänzen Sie die Website aus Aufgabe 01 mit eigenen Inhalten. Ziel ist es eine Portfolio-Website für Sie anzulegen. Legen Sie für diese und jede Folgende Abgabe bitte einen neuen Ordner an und **überschreiben Sie Ihre bisherige Arbeit nicht**. Sie können für die Portfolioseite bestehende Arbeiten von Ihnen nutzten. 
+
+Falls Sie keine eigenen Arbeiten wie  z.B. Bilder/Videos/Audios/Texte haben, dann verwenden Sie Dummy-Inhalte aus lizenzfreien Quellen bei denen der Autor nicht genannt werden muss, wie z.B. [Pixabay](https://pixabay.com/) (Fotos/Videos/Illustrationen), [Unsplash](https://unsplash.com/) (High-Quality Bilder), [Pexels](https://pexels.com/) (High-Quality Bilder), [YouTube Audio Library](https://www.youtube.com/audiolibrary/music?nv=1) (Lizenzfreie Musik) [Freesound](https://freesound.org/) (Lizenzfreie Sounds) oder Seiten bei denen Autoren genannt werden müssen wie z.B.,[Freepik](https://www.freepik.com/), [Bensound](https://www.bensound.com/) etc... mit dem entsprechenden Verweis.
+
+-> Ersetzen Sie also alle Platzhalterinhalte aus Aufgabe #01 mit eigenem Bild- und Videomaterial.
+
+Neben der Portfolio-Haupt-Seite sollten **mindestens zwei weitere HTML-Dokumente** erstellt werden, um folgende Seitenstruktur zu schaffen:
+
+1. (Haupt-)Seite "Portfolio": hier werden Arbeiten von Ihnen präsentiert
+2. Seite "About Me": ein kurzer Steckbrief zu Ihrer Person (hier können Sie natürlich den Steckbrief aus der Kursseite als Basis nutzten bzw. Teile daraus kopieren)
+3. Seite "Contact": eine statische Seite, auf der Sie Kontaktmöglichkeiten (Mail, Facebook, Instagram, etc...) bieten.
+
+-> Wenn Sie möchten können Sie natürlich weitere Unterseiten erstellen.
+
+Verwenden Sie für die 3 HTML Seiten jeweils die [grundlegende HTML5 Seitenstruktur](https://www.w3schools.com/tags/tag_doctype.asp) und zusätzlich zu den gundlegenden Elementen **mindestens 12 verschiedene HTML5 Elemente** um sich mit dem Umgang mit diesen Elementen vertraut zu machen (z.B. [Iframe](https://www.w3schools.com/tags/tag_iframe.asp), [a](https://www.w3schools.com/tags/tag_a.asp), [p](https://www.w3schools.com/tags/tag_p.asp), [div](https://www.w3schools.com/tags/tag_div.ASP), [li](https://www.w3schools.com/tags/tag_li.asp), [img](https://www.w3schools.com/tags/tag_img.asp), [audio](https://www.w3schools.com/html/html5_audio.asp), [video](https://www.w3schools.com/tags/tag_video.asp), [h](https://www.w3schools.com/tags/tag_hn.asp), etc... ). Sie dürfen natürlich mehr verschiedene HTML5-Tags verwenden.
+
+Ihre Website soll auf **mindestens 3 Dateien verschiedenen Typs** (z.B. Bilder/Videos/Audio/PDF/3D-Modell/GIFS) verweisen die keine Weblinks sind, sondern die sich im Aufgabenordner (gleicher Ordner wie "portfolio.html", "about_me.html" und "contact.html") befinden. Sie dürfen natürlich auf mehr Dateien lokal & im Web verweisen.
+
+Die drei HTML-Seiten werden miteinander verlinkt. Sie sollen also eine rudimentäre Navigation erstellen, sodass per Mausklick von jeder Seite auf jede andere Seite navigiert werden kann.
+
+Erstellen Sie eine HTML Seite mit dem Namen tags_used.html im Aufgabenordner auf der Sie die verwendeten HTML Tags [tabellarisch auflisten](https://www.w3schools.com/html/html_tables.asp). Verlinken Sie diese in Ihrer Steckbrief.htm. Sie müssen keine Navigation zwischen dieser HTML Seite und den anderen Seiten herstellen.
+
+Alle Ihre Seiten sollen nur aus gültigem HTML5 aufgebaut sein. Sie können zum Prüfen Ihrer Seite den [W3 HTML VALIDIERER](https://validator.w3.org/#validate_by_upload) verwenden.
+
+Mit dieser Aufgabe sollten Sie die Grundlagen von HTML, das Einbinden von medialen Elementen und Verlinken von HTML-Dokumenten besser verstehen. Die Qualität der Gestaltung spielt für diese Aufgabe eine untergeordnete Rolle. In der nächsten Lektion beschäftigen wir uns mit dem Styling von HTML, um eine bessere Optik zu erzielen.
+
+### Ziel der Aufgabe
+
+Den Umgang mit verschiedenen (Rich-Media) HTML-Tags sollte Ihnen jetzt bekannt sein. Das Verlinken von HTML-Dokumenten sollten Sie durch das a-Tag realisieren können.
+Die größte Herausvorderung liegt hier sicher in der Vorbereitung der visuellen Medien (im korrekten Format und sinnvoller Auflösung).
+Folgende mögliche Werkzeuge können Sie bei der Erstellung der visuellen Komponenten für Ihr Portfolio unterstützen:
+
+**Mögliche Werkzeuge für das Zuschneiden/Vorbereiten von Fotos, Grafiken und Illustrationen**
+- [Adobe Photoshop](https://www.adobe.com/de/products/photoshop.html) (*)
+- [Adobe Illustrator](https://www.adobe.com/de/products/illustrator.html) (*)
+- [Gimp](https://www.gimp.org/) (OpenSource & Kostenlos), vergleichbar mit Adobe Photoshop
+- [Paint.net](https://www.getpaint.net/), vergleichbar mit Gimp
+- [Inkscape](https://inkscape.org/de/) (OpenSource & Kostenlos) (OpenSource), vergleichbar mit Adobe Illustrator
+- [Affinity Photo](https://affinity.serif.com/de/education/) (Studentenrabatt), vergleichbar mit Adobe Photoshop
+- [Sketch](https://www.sketch.com/store/edu/) (fairer Studentenrabatt & Mac only), vergleichbar mit Adobe Illustrator
+- [Pixlr](https://pixlr.com) (free), WebApp für einfache Bildbearbeitung
+- [Vectr](https://vectr.com) (free), WebApp für einfache Vektorbearbeitung
+
+**Mögliche Werkzeuge für das Zuschneiden/Vorbereiten von Animationen und Videos**
+- [Adobe After Effects](https://www.adobe.com/de/products/aftereffects.html) für Animationen (*)
+- [Adobe Premiere](https://www.adobe.com/de/products/premiere.html) für Videoclips (*)
+- [Final Cut](https://www.apple.com/de/final-cut-pro/) (Mac only)
+- [Ezgif](https://ezgif.com) (free), WebApp für einfaches Bearbeiten von Bewegtbild (eigentlich für GIFs optimiert, es lassen sich aber auch Videos in verschiedene Endformate konvertieren)
+
+(*) HFU Lizenz aktuell leider nur an den stationären Arbeitsplätzen verfügbar

content/P1.3/README.md

@@ -0,0 +1,15 @@
+## **23 _Okt_** Einstieg CSS
+
+Die Portfolio-Website aus der letzten Aufgabe wird nun mit CSS ergänzt, um verschiedene Gestaltungsaspekte zu realisieren.
+
+Für dieses Projekt erstellen Sie einen Unterordner (bspw. /Aufgabe3) in Ihrem bestehenden GiS-Git-Repository und erstellen dort eine Kopie Ihres aktuellen (ggf verbesserten) Portfolios aus der vorherigen Aufgabe, an dem Sie nun weiterarbeiten werden.
+
+Gestalten Sie ihre Webseite nach freien Stücken, **beachten Sie dabei aber die [Kundenanmerkungen](https://gabriel-rausch.github.io/EIA1-SoSe20/L03/task_material/Anmerkungen.pdf)!** Versuchen Sie dabei, ihr Design möglichst ansprechend zu gestalten. Als _mögliche_ Vorlage können Sie [diese Designs](https://github.com/gabriel-rausch/EIA1-SoSe20/tree/master/L03/task_material/screenshots) hinzuziehen (dies ist nur ein Vorschlag, Sie können auch ein eigenes Design entwickeln. Es muss aber mindestens den Kundenanmerkungen genügen).  
+Scheuen Sie sich nicht vor strukturellen Änderungen ihres HTML Codes, um das Design besser umsetzen zu können. HTML und CSS müssen eng zusammenarbeiten um das gewünschte Ergebnis einfach und effizient zu erreichen.  
+
+Das Grafikelement für den geforderten Hintergrund finden sie [hier](https://gabriel-rausch.github.io/EIA1-SoSe20/L03/task_material/images/bg.png).
+
+Verwenden Sie zur Umsetzung des CSS ein **extern eingebundenes Stylesheet** (kein inline oder style tag). Verwenden Sie außerdem jeden der drei Haupt-Selektoren mindestens zweimal. Des weiteren sollte das Box-Modell mindestens einmal angewandt werden.  
+Es bietet sich wahrscheinlich an, für alle drei Seiten die selbe Stylesheetdatei zu verwenden, dies ist aber kein muss (denn wie immer beim Programmieren gilt: Wer Code kopiert, macht irgendwas falsch).
+
+Achten Sie auch hier weiterhin auf die Konformität mit den Regeln des W3C und nutzen Sie ggf. den Validator.

content/P1.4/README.md

@@ -0,0 +1,24 @@
+## **30 _Okt_** CSS Vertiefung
+
+Erstellen Sie eine Shopseite für Produkte ihrer Wahl. Versuchen Sie, etwas anderes zu verkaufen als Ihre Kommilitonen. Die Seite soll 
+- visuell ansprechend sein. Achten Sie auf sinnvolle Verteilung der Artikel. (Holen Sie sich Inspiration zur Gestaltung gerne bei existierenden Shops)
+- sich responsiv an die Bildschirmgröße anpassen (s.u.)
+- mindestens 2 verschiedenen Kategorien auflisten, in denen insgesamt mindestens 12 Artikel sind.
+- einen Headerbereich mit Namen, Logo, Icon für Einkaufswagen und Hauptmenü haben. Im Hauptmenü befinden sich die Namen der Kategorien mit Sprungmarken. Der Einkaufswagen darf auch im Hauptmenü sein, sollte sich aber visuell davon abheben (z.B. andere Farbe, gegenüberliegende Seite, etc). BONUS: Das Hauptmenü und der Einkaufswagen sind immer sichtbar.
+- mindestens 6 (unterschiedliche) komplexe Selektoren verwenden
+
+jeder Artikel soll
+- mindestens einer Kategorie zugeordnet sein
+- mindestens je ein/e/n Namen, Beschreibung, Bild und Preis besitzen
+- in einem eigenen `<div>` Element gekapselt sein. (`<article>` is NICHT das richtige Element)
+- einen "Kaufen/In den Einkaufswagen/o.ä." Button besitzen (welcher derzeit noch keine Funktion hat)
+
+zu Responsiv:
+- (mindestens) 3 Ansichten in denen der Shop gut aussehen und bedienbar sein muss: Desktop (>1024px), Tablet (600-1024px) und Mobil (<600 px).
+  - in der kleinsten Ansicht sollten die Artikel wahrscheinlich am besten die gesamte Bildschirmbreite einnehmen.
+- verwenden Sie (mindestens) 2 Media Queries
+- verwenden Sie passendes Flussverhalten, bevorzugt Flexbox oder css-grid.
+- stellen Sie außerdem natürlich sicher, dass das Hauptmenü und der Header allgemein auf allen Bildschirmgrößen gut verwendbar ist. Implementieren Sie ggf ein Burger Menu.
+
+**TIPP**: Entwickeln Sie Ihre Seite so, dass entweder Mobil oder Desktop die Standardansicht sind, und überschreiben Sie die relevanten Auszeichnungen für die anderen beiden Ansichten.
+In vielen Browsern können Sie automatisch verschiedene Bildschirmgrößen testen.