# TODO -- Aufgaben:

----------
----------
### WICHTIG: -----> Paradigmen klären vor dem Programmieren

* Styles im CSS nutzen, im HTML vermeiden. --->
:::info
* Trennung von Struktur der GUI und Styling wie im ***++Model-View-Controller-Prinzip++***
* Responsive Webdesign?
:::

==Model View Controller== (MVC, englisch für Modell-Präsentation-Steuerung) ist ein Muster zur Unterteilung einer Software in die drei Komponenten Datenmodell (englisch model), Präsentation (englisch view) und Programmsteuerung (englisch controller).

----------
----------

### Was ist HTML

* HTML bestimmt den strukturellen Aufbau einer Internetseite.
* Im HTML steht immer der ==Startzustand==, wie die Seite das erste mal geladen wird.
:::info
Die ==Hypertext Markup Language==, abgekürzt HTML, ist eine ==textbasierte Auszeichnungssprache== zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt.

Zusammen mit ==CSS== und anderen Techniken dient HTML dazu, Webseiten in Webbrowsern anzuzeigen. Dabei ist die ==Aufgabe des HTML, die Inhalte zu strukturieren==. Für das =="Design" ist das CSS zuständig==.
:::

### Was ist CSS
:::info
==Cascading Style Sheets==, kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der ==Kernsprachen== des World Wide Webs. Sie ist ein sogenannter „living standard“ und wird vom World Wide Web Consortium beständig weiterentwickelt.
:::
* Ein Stylesheet ist am ehesten mit einer Formatvorlage zu vergleichen. Das Programm, das das Stylesheet auswertet, interpretiert die zugewiesenen Daten (Text, Tabellen, Grafiken etc.) und formatiert sie (z. B. für die Bildschirmausgabe) entsprechend den vorgegebenen Regeln.

### Was ist DOM
:::info
Das ==Document Object Model== ist eine Spezifikation einer ==Programmierschnittstelle==, welche ==HTML- oder XML-Dokumente als eine Baumstruktur darstellt==, in der ==jeder Knoten== ein Objekt ist, welches einen ==Teil des Dokumentes== repräsentiert, z. B. einen Absatz, eine Überschrift, ein Video oder etwa eine Tabellenzelle.
:::

* Ein Browser analysiert ein HTML-Dokument und erstellt daraus im Arbeitsspeicher das Document Object Model, also eine Repräsentation dieses Dokuments, auf die man beispielsweise mit JavaScript zugreifen kann.
* DOM wird interaktiv verändert während man eine Seite nutzt
* Nachdem die HTML seite vom Browser eingelesen wurde, ==wird aus dem HTML der DOM.== Dieser DOM ==wird dann im Betrieb der Seite verändert==, z.B. wenn man was anklickt verschwindet was ... der ==DOM beschreibt immer 100% das was man im Browser sieht==


#### DOM des Chrome Entwickler Interfaces ----- (CTRL + SHIFT + i)


### Was ist Responsive Webdesign

:::info
Unter einer ==responsiven Gestaltung== einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird. Übersetzt wird das englische Adjektiv „responsive“ etwa mit „ansprechbar“, „empfänglich“, „zugänglich“ oder „antwortend“, was auf den ersten Blick nicht sehr viel mit dem Internet zu tun hat.
:::

* Beim Responsive Webdesign geht es nicht darum, neben einer Desktop-Version noch eine, oder mehrere mobile Layoutvarianten zu erstellen, sondern ==eine Version einer Seite zu erstellen, die geräteunabhängig schnell laden und gut aussehen==


Sie sollten die Darstellung ==nicht an eine bestimmte ***Viewportgröße*** koppeln==, sondern sie tatsächlich ==nach Ihren Inhalten ausrichten.==
* Als Viewport wird der Bereich des Browserfensters bezeichnet, der für die Darstellung der Inhalte zur Verfügung steht.

#### Responsive ....VS.... Adaptive
* ==responsive Seiten== skalieren stufenlos
responsive = reaktionsfähig

==Clientseitige Techniken== werden hier verwendet, wir sprechen hier von ==HTML, CSS und vielleicht noch JavaScript==. Der Server sendet also bei einem puren Responsive Design an jedes Gerät immer das identische Datenpaket. Der ==Browser des Geräts soll dann entscheiden==, was mit diesem Datenpaket geschieht. Der Browser weiß also beispielsweise ==wie groß der Viewport== ist, ==lädt das passende Layout und versteckt daher die Navigation==. Auch die ==Bilder werden skaliert== um auf kleinere Displays zu passen. **Geladen wird aber auf allen Geräten die gleiche Bild-Datei**! Das Layout sorgt nur dafür, dass die Bilder unterschiedlich groß angezeigt werden. Als Webdesigner muss man also Kompromisse eingehen, um den ***Mittelweg zwischen perfekter Darstellung und perfekter Performance*** zu finden.

:::info
***Vorteile Responsive Layout:***
* Jede Displaygröße wird optimal berücksichtigt
* Es wird kein Platz verschenkt
* Die Information steht im Vordergrund
* Zukünftige mobile Endgeräte werden automatisch mit abgedeckt
---
***Nachteile Responsive Layout***
* Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen
* Komplexer in der Gestaltung
* Komplexer in der technischen Umsetzung
* Komplexer in der Anpassung der Seiteninhalte
* Zeitintensivere Umsetzung
:::

:::info
<h4>Vereinfacht kann man die Abfrage so gestalten:<h4>

</h4>

---

WENN DISPLAY <500px DANN NUTZE:

<style>
.MyClass { font-family: Arial, 12; width: 100px; }
</style>

WENN NICHT DANN NUTZE:

<style>
.MyClass { font-family: Arial, 16; width: 250px; }
</style>
ENDE

:::

---


---

* ==adaptive Webseiten== passen sich bei bestimmten Viewport-Breiten an neue Größenverhältnisse an (meist in 3 Varianten: mobile, Tablet und Desktop
adaptive = anpassungsfähig

Beim Adaptive Design wird das ==Datenpaket auf dem Server angepasst==. Es werden nur die ==Inhalte an den Browser geschickt==, die auch benötigt werden. Ein Gerät mit ==kleinem Display erhält also beispielsweise kleinere Bild-Dateien==, Geräte mit hochauflösenden Displays erhalten die hochauflösenden Grafiken.
Der Aufwand für solche serverseitigen Techniken ist ein deutlicher Mehraufwand. ***Gut umgesetzt führen Lösungen dieser Art aber zu besserer Performance***.

:::info
***Vorteile des Adaptive Layouts***
* Es kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden, da feste Abmessungen existieren
* Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird
* Technisch recht unkompliziert umzusetzen
* Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein
* Zeitsparendere Umsetzung
---
***Nachteile des Adaptive Layouts***
* Es wird nur für bestimmte Viewports / bestimmte Geräte optimiert
* Häufige Fehldarstellungen auf abweichenden Endgeräten
* Aufwändige Zielgruppenanalyse um die relevanten Viewports zu bestimmen
* Häufig mehr CSS-Code als notwendig
:::

>***Für eine ausführlichere Darstellung von ==responsive== und ==adaptive== Layout und WebDesign:***
>
>https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/
>https://www.wysiwygwebbuilder.com/rwd_basics.html

### Was sind CSS Breakpoints (Responsive Design)

CSS Breakpoints sind Punkte, an denen der Inhalt der Website in Relation zur benutzten Geräte-Breite, so angepasst wird, das sie das bestmögliche Layout darstellen. Man bezeichnet diese Punkte auch als ***++Media Query Breakpoints++***.

Mit ==Media Queries== können Sie die ==Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen==. Dabei wird ==nicht ermittelt, um welchen Browser== es sich handelt, ==sondern welcher ++***Medientyp***++== (z.B. Bildschirm oder Drucker), oder ++***Medienmerkmal***++ (z.B. Farbfähigkeit) oder einer Kombination aus beidem der Browser vorfindet. ==Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.==

:::info
Aufbau von mediaquerys:

----

https://www.mediaevent.de/css/media-queries.html

---
Eine @media-Regel legt einen Breakpoint fest – ein Bruchpunkt oder eine Bedingung, an dem sich das Layout ändert, um sich besser an eine Geräteklasse anzupassen. CSS-Eigenschaften, die nicht innerhalb einer @media-Regel stehen, gelten für alle Geräteklassen und zielen in erster Linie auf die kleinsten Geräte (zumeist auf Smartphones) ab. Von hier aus legen weitere Breakpoints die CSS-Eigenschaften für größere Viewports fest.

Media Queries überschreiben nur die Eigenschaften, die sich bei einem Breakpoint ändern oder neu hinzukommen.

Ein responsives Design passt sich nicht nur an die Monitore von Smartphones an, sondern bringt für unterschiedliche Browserfenster (Viewports) ein abgestimmtes Design: Mehrwert für große Monitore und ein kompaktes Design für kleine Browserfenster.
:::

#### Medientypen

Die Angabe eines Medientyps ist die ==einfachste Form einer Medienabfrage== und gleichzeitig ==Grundlage für spezialisierte Abfragen==. Ein Medientyp ist ein ==Schlüsselwort, dem verschiedene gleichartige Ausgabegeräte zugeordnet werden können==. Allerdings gibt es keine feste Definition, welche Geräte einem Medientyp zuzuordnen sind. Die Beschreibung der einzelnen Medientypen wird ausdrücklich als Richtbeschreibung bezeichnet.

Ein Browser darf bei der Verarbeitung von Stylesheets nur ==einen einzigen Medientyp== berücksichtigen. Ein Dokument kann also nicht von zwei Stylesheets, die unterschiedlichen Medientypen zugeordnet wurden, gleichzeitig beeinflusst werden.


#### Medienmerkmale

Ein Medienmerkmal ==beschreibt eine Anforderung an den angegeben Medientyp==. Die Abfrage eines Merkmals wird nachfolgend ==***auch Ausdruck genannt***==. Ein Ausdruck entspricht dem Wert ++„wahr“, wenn das Kriterium von einem Ausgabemedium erfüllt wird, andernfalls dem Wert „falsch“.++

### Was ist Java Script

:::info
JavaScript ist eine ==Skriptsprache==, die ursprünglich 1995 von Netscape ==für dynamisches HTML in Webbrowsern== entwickelt wurde, um ==Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren== und so die ***Möglichkeiten von HTML und CSS zu erweitern.***
:::

* Für die Entwicklung dynamischer Webseiten ist JavaScript unerlässlich. Mit ihr lassen sich kleine Hilfsroutinen bis hin zu komplexen Frameworks schreiben.

Ein großer Vorteil am Programmieren mit JavaScript ist, dass man kaum Vorbereitungen benötigt: Einen Browser zum Ausführen von Javascript hat man ja bereits installiert.

### Was ist JQuery

------------------------

WEITERE AUFGABEN FÜR MICH:

## Was ist Bootstrap

Bootstrap ist ein Framework, was Konzepte für das Responsive Webdesign Umsetzt ... Quasi ein mögliches Praktisches Werkzeug mit dem man die Theorie umsetzen kann. Bootstrap baut auf HTML und CSS auf und macht alles einfacher.

:::info
https://getbootstrap.com/docs/4.3/getting-started/introduction/

## RESPONSIVE STYLE CHANGES
https://www.w3schools.com/cssref/css_units.asp
:::

- jquery ---- probeprogramm programmieren
- javascript funktionen
- was heisst responsive
- stellenbörsenportal programmieren

bootstrap

entweder bibliotheken wie ***jquery*** -- prototype u.a. --
mischbetrieb verschiedener bibs kann probleme mit
sich bringen
.
.
.
.
>https://weblog.west-wind.com/posts/2017/nov/11/flexing-your-html-layout-muscles-with-flexbox?Page=2#Flexbox-to-the-Rescue
.
.
.
.

/* Diese Datei beinhaltet reinen CSS Code, mit dem Ziel diesen in einer
   anderen Datei zu verwenden. Damit wird Strukturinfo (html) von styleinformation
   (css code) sauber getrennt. ModelViewController.Prinzip
 */




body {
	margin: 0px;
}

.main {
	width: 100%;
	padding: 50px;
	height: 100vh;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
	background-color: #aaaaaa;
}

.main > div {
  background-color: #dddddd;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.main-head {
	height: 20%;
}

.main-body {
	height: 70%;
}

.main-foot {
	height: 10%;
}