Welche Fähigkeiten du benötigst, um in die Web-Entwicklung einzusteigen, habe ich ja bereits in einem vorherigen Artikel erklärt. Diesmal gebe ich dir einen sehr praktischen Einblick mit Beispielen, welche Mathe-Aufgaben ich in meinem Developer-Alltag bewältigen muss.
First things first: Ich bin kein Mathe-Genie, obwohl ich eigentlich meistens ganz gut klar kam und die Abschlussprüfung der Realschule mit Bravur gemeistert habe. Vieles habe ich allerdings seitdem nie wieder gebraucht, anderes – wie Prozentrechnung zum Beispiel – erst in der Berufsausbildung wirklich verstanden. Was dir auf jeden Fall immer mit allen mathematischen Aufgaben hilft: Logik-Verständnis.
Welche mathematischen Grundprinzipien auch in der Web-Entwicklung Anwendung finden, erzähle ich dir hier:
Inhaltsverzeichnis:
Dreisatz
Diese Grundrechenart wird dir überall im Leben begegnen: Wenn 1 Brot 2 € kostet, wieviel kosten dann 3 Brote?
Es gibt also 3 Werte, die in einem Verhältnis zueinander stehen und einen vierten Wert, den es zu errechnen gilt.
Beispiel aus der Web-Entwicklung:
Dieses Beispiel bezieht sich auf die dynamische Schriftgrößenberechnung. Die CSS3 Schriftgrößeneinheit rem (=root em) orientiert sich an der :root Einstellung der Schriftgröße in einer CSS Datei. Wenn zum Beispiel als Basis-Schriftgröße 100% festgelegt ist, wird in den meisten Browsern 16px als Grundlage für Berechnungen verwendet.
Die Berechnung:
16px = 1rem
24px = x
In diesem Fall lautet die Berechnung ganz einfach: 24 / 16 = 1,5
Das bedeutet also, dass ich an der Stelle, wo ich 24px als Schriftgröße angeben möchte, für eine dynamische Berechnung 1.5rem angebe.
Ändere ich nun also im CSS root-Element die generelle Schriftgröße auf zum Beispiel 18px, verändert sich automatisch auch die Schriftgröße bei 1.5rem auf umgerechnet 27px (Berechnung: 18 x 1,5 = 27)
body{
font-size: 16px;
font-size: 1rem;
}
h3.widget-title{
font-size: 1.5rem;
}
Prozentrechnung
Responsive Webseiten (wie zum Beispiel diese hier) arbeiten häufig mit Prozentangaben für die Angaben von Breiten, Innen- und Außenabständen. Grundsätzlich sind diese Prozentangaben immer auch vom CSS-Box-Model abhängig, d.h. Elemente innerhalb eines anderen Elements verhalten sich immer im Verhältnis zu diesem übergeordneten Element. 100% können also je nach Lage eines Elements unterschiedlich groß ausfallen.
Abstände wie padding oder margin können zum Beispiel in % angegeben werden, um diese je nach Bildschirmgröße automatisch anzupassen.
#container {
padding: 5% 10%;
}
Grundsätzlich wird fast immer mit 100% als Basis gerechnet, also zum Beispiel eine Webseitenaufteilung Hauptinhalt – Sidebar würde mit 70% – 30% aufgeteilt werden. Man muss also einfach immer irgendwie auf 100% kommen, wenn man Bereiche aufteilen will.
Schwieriger wird es, wenn Elemente Außenabstände (margin) haben, denn dann muss man diese noch zusätzlich von der Breite abziehen, um die korrekte Darstellung zu erzielen:
div {
margin-right: 10px;
width: calc(40% - 10px);
}
Beispiel aus der Web-Entwicklung:
Eine deutlich kompliziertere Berechnung mit Prozent ergibt sich, wenn man zum Beispiel eine Webseite erstellt, deren Haupt-Inhalt auf eine maximale Breite von 800px begrenzt ist, man nun aber ein Element einfügen möchte, das über die gesamte Bildschirmbreite außerhalb der 800px Begrenzung gedehnt werden und die gesamte Webseite responsive sein soll, also unabhängig der Bildschirmgröße immer korrekt dargestellt.
.wrap {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Das wrap-Element hat also eine maximale Größe von 800px und wird mittig im Browser-Fenster angezeigt. Wenn das Browserfenster schmaler wird, verschiebt sich das Element immer zentriert ausgerichtet weiter, bis es weniger als 800px breit ist, ab dann wird es einfach nur schmaler.
Innerhalb des wrap-Elements haben wir nun ein weiteres Element, das wir der Anschaulichkeit halber die Klasse fullwidth geben. Dieses soll nun auf jeden Fall über die gesamte Bildschirmbreite angezeigt werden, da aber das Eltern-Element (wrap) nur maximal 800px breit ist, reicht es nicht, wenn wir als Breite 100% eingeben, denn das wären für das Kind-Element auch nur maximal 800px. Im CSS gibt es aber einen praktischen Wert, der es uns ermöglicht, die gesamte Bildschirmbreite – egal wie groß diese ist, weil responsive – zu erhalten: 100vw (vw = vertical width).
Wenn wir nun also 100vw als Breite angeben, erhält das fullwidth-Element die Breite des Browser-Fensters, ist allerdings aufgrund seiner Position innerhalb des wrap-Elements (s. CSS Box Model oben) verschoben. Wir müssen nun also noch die Position des Elements so verschieben, dass es von Rand zu Rand reicht und mittig ausgerichtet ist. Zu diesem Zweck müssen wir eine Berechnung aufstellen: Breite des Eltern-Elements (100%) minus die gesamte Bildschirmbreite (100vw) und diesen Wert durch 2 geteilt, um links und rechts gleich viel Abstand zu haben.
.wrap > .fullwidth {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
background-color: blue;
}
Wenn wir jetzt dem gesamten Element noch einen Abstand links und rechts (jeweils 1em) geben und es entsprechend mittig anzeigen wollen, dann müssen wir einerseits den Abstand von der Breite abziehen und natürlich dann auch wieder der Berechnung des margin-left hinzufügen:
.wrap > .fullwidth {
width: calc(100vw - 2em);
margin-left: calc((100% - 100vw + 2em) / 2);
background-color: blue;
}
Bruch-Rechnen
Ähnlich wie die Prozentrechnung kommt auch die Bruchrechnung immer mal wieder vor. Viele Webseiten sind in einem Grid-Layout geplant mit 12 Spalten, also jede Spalte ist 1/12 groß. Das Grid System von Bootstrap basiert zum Beispiel auf dieser Logik. Man sollte also das kleine Einmaleins beherrschen und bis 12 zählen können.
Winkel
Es kommt durchaus ab und zu mal vor, dass man zum Beispiel ein Element drehen oder neigen möchte. Hierfür benötigt man dann die Grad-Angabe des gewünschten Winkels. Dafür muss man eigentlich nur im Kopf behalten, dass 360° eine volle Umdrehung ist.
Vielleicht hast du oben im Menü gesehen, dass unter aktiven Menü-Elementen ein schräg gelegtes türkises Element angezeigt wird? Solche Verformungen oder Verschiebungen lassen sich im CSS mit transform erzielen.
Beispiel aus der Web-Entwicklung:
.current-menu-item > a::after {
...
transform: skew(-20deg);
}
Radius
Kreise, Ellipse, abgerundete Rahmen – viel berechnen muss man dafür in der Web-Entwicklung zum Glück nicht. Dennoch kommen Rundungen durchaus vor und daher will ich sie nicht unerwähnt lassen.
Beispiel aus der Web-Entwicklung:
Ein perfekter Kreis lässt sich mit CSS sehr einfach darstellen, wichtig dafür ist nur, dass Höhe und Breite exakt gleich sind, also die Grundlage des Elements ein Quadrat ist.
img.avatar {
max-height: 98px;
max-width: 98px;
border-radius: 50%;
}
Wenn Breite oder Höhe größer ist, würde die Darstellung in eine Ellipse umgewandelt.
Abgerundete Ecken, wie sie häufig bei Buttons oder Formularfeldern zu finden sind, lassen sich mit einer Pixelangabe umsetzen:
a.button{
border-radius: 4px;
}
Vektoren
Wer tiefer einsteigen möchte in Animationen mit SVG-Grafiken, sollte auf jeden Fall seine Vektoren-Berechnungen aus der Schule noch einmal herauskramen und sich eingehender mit diesem Thema beschäftigen. Die Arbeit mit SVGs macht super viel Spaß und die Effekte, die man damit erzielen kann sind ziemlich cool!
Fazit
Ein Computer nimmt dir bereits eine Menge Rechenarbeit ab. Dennoch solltest du in der Lage sein, die Grundrechenarten zu beherrschen und dich logisch mit den Transformationen von Elementen auseinander setzen. Gerade in der Web-Entwicklung kannst du vieles durch Ausprobieren herausfinden. Mit CSS siehst du auch sofort, ob du richtig gerechnet hast oder das Element aufgrund falscher Berechnungen komplett verschoben dargestellt wird.
