Matura: Systemtechnik

Layout (CSS/Bootstrap)

CSS … Cascading Style Sheets
Gestaltungs- und Formatierungssprache für das Aussehen von HTML-Dokumenten
Ziel: Trennen von Inhalte und Aussehen
Standardisierung und Entwicklung von W3C-Gremium
Problematik: Einschränkungen bei der Darstellung des Layouts bei verschiedenen Browsern

eine Internetseite je nach Bildschirmgröße und/oder Gerät anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten
Responsive Webdesign mit der Angabe des Viewport gehört heute zum Standard bei der Mobile Optimierung.
Wird immer wichtiger, da es immer mehr Seitenzugriffe über das Smartphone abgewickelt werden.

Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen.

Flexible Box Layout Module
wesentliche Technik zur Gestaltung von Layouts mit CSS
sehr mächtige und komfortable Anwendung
Container die Möglichkeit geben, die Breite/Höhe (und Reihenfolge) seiner Elemente zu ändern, um den verfügbaren Platz optimal auszufüllen
Im Gegensatz zu den regulären Layouts (Block (vertikal basiert), Inline (horizontal basiert)) richtungsunabhängig ist
Elemente entlang der Hauptachse bzw. der Querachse angeordnet

Typ	Darstellung	CSS-Befehl
`flex-direction`		`flex-direction: row \| row-reverse \| column \| column-reverse;`
`justify-content`		`justify-content: flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly \| start \| end \| left \| right ... + safe \| unsafe;`
`align-items`		`align-items: stretch \| flex-start \| flex-end \| center \| baseline \| first baseline \| last baseline \| start \| end \| self-start \| self-end + ... safe \| unsafe`
`align-content`		`align-content: flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly \| stretch \| start \| end \| baseline \| first baseline \| last baseline + ... safe \| unsafe;`

Vererbung

Konzept der Vererbung wurde mit CSS 2 eingeführt
Übertragung der deklarierten CSS-Werte von einem Element auf das nachfolgende
Jedes Element des Dokuments seine Werte an seine Kind-Elemente weiter
Vorteil: Regeln für Kindelemente muss die Regel nun nicht mehr neu definiert werden

Fehlerbehandlung / Debugging

Überprüfung mit Developer-Tools, welche im Browser eingebaut sind (Rechtsklick > “Untersuchen”)
Aktivierung/Deaktivieren einzelner CSS-Regeln bzw. hinzufügen neuer Regeln

Bootstrap ist ein Frontend-Framework
Diverse Gestaltungsvorlagen, die auf HTML und CSS basieren, sowie optionale JavaScript-Erweiterungen
Wichtige Komponente: Bootstrap-Grid-Layout
- Aufteilung des Layouts in 12 Spalten
- Erleichtert Abstände und Positionierung der einzelnen Website-Elemente punktgenau zu bestimmen
Unterstützung des Responsive Webdesigns

Lizenz: MIT-Lizenz
Entwickler: Twitter
Anforderungen an den Nutzer
- Die Lizenzmarkierungen müssen in allen genutzten Dateien von Bootstrap beibehalten werden
Erlaubter Nutzen für des Nutzers
- Gratis Download und Nutzen für private, geschäftliche, persönliche oder unternehmensinterne Anwendungen
- Weiterverarbeitung von Bootstrap
- Bearbeiten des Ausgangsmaterials
Verbot für den Benutzer
- Einreichen für Beschwerden bei Problemen, Bootstrap wird ohne Gewährleistung veröffentlicht
- Anzeige gegen die Urheber oder Urheberrechtsinhaber von Bootstrap
- Löschen von Markenzeichen, die den Nutzen von Bootstrap symbolisieren