4) ERWEITERTE KONSTRUKTIONSTECHNIKEN

Question 1

Responsive Design

Answer 1

Design, das sich flexibel an die unterschiedlichen Bildschirmauflösung anpasst. Unterteilung in Kacheln, die auf einem Gitter positioniert werden.

Question 1

Simulation verschiedener Endgeräte im Browser

Answer 1

Funktioniert über Web Inspector

Question 2

Mouseover auf mobilen
Geräten

Answer 2

Auf mobilen Geräten gibt es keinen Mouseover Effekt. Die dort angezeigten Informationen müssen auf mobilen Endgeräten anders dargestellt werden.

Question 3

Element-Positionen

Answer 3

Elemente können nicht nur neben- und untereinander, sondern auch übereinander dargestellt oder an absoluten Positionen fixiert werden.

Question 4

Floatbasiertes Seitenlayout

Answer 4

Damit lässt sich beeinflussen, welche Elemente neben- oder untereinander stehen. Die „float“-Eigenschaft kann für Block-Elemente gesetzt werden und dort unter anderem die Werte „left“ oder „right“ annehmen.
Das HTML muss nur minimal verändert werden – lediglich die section-Elemente sind in ein div id=”content” zu kapseln.

Question 5

Layout-Engine

Answer 5

Damit bestimmt der Browser die Positionierung und das Styling der Elemente.

Question 6

Float Layouts

Answer 6

Im Vergleich zu den früher verwendeten Tabellen waren Float-Layouts viel einfacher. Flexbox vereinfacht das noch weiter und bietet neue Möglichkeiten.

Question 7

Flex-basiertes Layout

Answer 7

Um Elemente als flexible Boxen anordnen zu können, muss im übergeordneten Element die Eigenschaft „display“ auf den Wert „flex“ gesetzt werden.

Question 8

Flex Achsen

Answer 8

Question 9

Media Queries

Answer 9

Zur Darstellung auf unterschiedlichen Geräten

Question 10

CSS-Filter

Answer 10

Diese Regeln werden nur dann angewendet, wenn die Media Query zutrifft. Daher sollten sie möglichst separat im CSS stehen, um sie schnell wiederzufinden.

Question 11

CSS-Frameworks

Answer 11

• Bootstrap
• Tailwind
• Material Design

andere Frameworks:
- Foundation
- Bulma
- Pico.css

Question 12

Grid-System

Answer 12

Für die Anordnung von Kacheln im Browser wird fast immer ein Grid-System verwendet.

Question 13

SASS

Answer 13

Hierbei handelt es sich um einen Präprozessor für CSS, womit Regeln übersichtlicher formuliert und programmiert werden können. Im Build- Prozess entsteht daraus wieder CSS.

Question 14

Bootstrap

Answer 14

• am häufigsten verwendete Framework
• von Twitter entwickelt
• Bootstrap arbeitet mit einem Container, worin die Kacheln in Zeilen („row“) arrangiert werden
• Im Kopfbereich der HTML-Datei muss ein Verweis auf Bootstrap eingefügt werden.

Question 15

Tailwind

Answer 15

• „Werkzeugkasten“
• CSS-Klassen sehr universell
• gut an Anforderungen anpassbar ohne das Framework geändert werden muss
• kein Standard-“Theme”
• populär aber für Profi-Entwickler

Question 16

Tailwind-Philosophie

Answer 16

Tailwind propagiert den sog. „Utility first“-Ansatz, d. h. es sind keine Standard- Layouts enthalten – diese muss man sich erst selbst bauen.

Question 17

Material Design

Answer 17

• arbeitet stark Komponentenorientiert
• Im Kopfbereich muss CSS eingebunden werden.

Question 18

Material Design auf
Android

Answer 18

Material Design ist eher in der App- Welt zu Hause als auf Websites, kann aber auch dort verwendet werden.

Question 19

Kommerzielle Templates

Answer 19

• kosten Geld

+ Professionelles Design
+ Viele Seitentypen
+ Website schnell fertig