{"id":13612,"date":"2021-06-24T10:14:00","date_gmt":"2021-06-24T08:14:00","guid":{"rendered":"https:\/\/www.womenintechev.de\/?p=13612"},"modified":"2021-06-20T10:25:38","modified_gmt":"2021-06-20T08:25:38","slug":"wieviel-mathematik-brauchst-du-wirklich-als-web-entwicklerin","status":"publish","type":"post","link":"https:\/\/www.womenintechev.de\/en\/wieviel-mathematik-brauchst-du-wirklich-als-web-entwicklerin\/","title":{"rendered":"Wieviel Mathematik brauchst du wirklich als Web-Entwicklerin?"},"content":{"rendered":"

Welche F\u00e4higkeiten du ben\u00f6tigst, um in die Web-Entwicklung einzusteigen, habe ich ja bereits in einem vorherigen Artikel<\/a> erkl\u00e4rt. Diesmal gebe ich dir einen sehr praktischen Einblick mit Beispielen, welche Mathe-Aufgaben ich in meinem Developer-Alltag bew\u00e4ltigen muss.<\/p>\n

First things first: Ich bin kein Mathe-Genie, obwohl ich eigentlich meistens ganz gut klar kam und die Abschlusspr\u00fcfung 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\u00e4ndnis.<\/p>\n

Welche mathematischen Grundprinzipien auch in der Web-Entwicklung Anwendung finden, erz\u00e4hle ich dir hier:<\/p>\n

Dreisatz<\/h2>\n

Diese Grundrechenart wird dir \u00fcberall im Leben begegnen: Wenn 1 Brot 2 \u20ac kostet, wieviel kosten dann 3 Brote?
\nEs gibt also 3 Werte, die in einem Verh\u00e4ltnis zueinander stehen und einen vierten Wert, den es zu errechnen gilt.<\/p>\n

\n

Beispiel aus der Web-Entwicklung:<\/strong><\/p>\n

Dieses Beispiel bezieht sich auf die dynamische Schriftgr\u00f6\u00dfenberechnung. Die CSS3 Schriftgr\u00f6\u00dfeneinheit rem (=root em)<\/strong> orientiert sich an der :root Einstellung der Schriftgr\u00f6\u00dfe in einer CSS Datei. Wenn zum Beispiel als Basis-Schriftgr\u00f6\u00dfe 100% festgelegt ist, wird in den meisten Browsern 16px als Grundlage f\u00fcr Berechnungen verwendet.<\/p>\n

Die Berechnung:<\/p>\n

16px = 1rem
\n24px = x<\/p>\n

In diesem Fall lautet die Berechnung ganz einfach: 24 \/ 16 = 1,5
\nDas bedeutet also, dass ich an der Stelle, wo ich 24px als Schriftgr\u00f6\u00dfe angeben m\u00f6chte, f\u00fcr eine dynamische Berechnung 1.5rem angebe.
\n\u00c4ndere ich nun also im CSS root-Element die generelle Schriftgr\u00f6\u00dfe auf zum Beispiel 18px, ver\u00e4ndert sich automatisch auch die Schriftgr\u00f6\u00dfe bei 1.5rem auf umgerechnet 27px (Berechnung: 18 x 1,5 = 27)<\/p>\n

body{\r\nfont-size: 16px;\r\nfont-size: 1rem;\r\n}\r\nh3.widget-title{\r\nfont-size: 1.5rem;\r\n}<\/pre>\n<\/div>\n
Prozentrechnung<\/h2>\n
Responsive Webseiten (wie zum Beispiel diese hier) arbeiten h\u00e4ufig mit Prozentangaben f\u00fcr die Angaben von Breiten, Innen- und Au\u00dfenabst\u00e4nden. Grunds\u00e4tzlich sind diese Prozentangaben immer auch vom CSS-Box-Model<\/a> abh\u00e4ngig, d.h. Elemente innerhalb eines anderen Elements verhalten sich immer im Verh\u00e4ltnis zu diesem \u00fcbergeordneten Element. 100% k\u00f6nnen also je nach Lage eines Elements unterschiedlich gro\u00df ausfallen.<\/p>\n
Abst\u00e4nde wie padding oder margin k\u00f6nnen zum Beispiel in % angegeben werden, um diese je nach Bildschirmgr\u00f6\u00dfe automatisch anzupassen.<\/p>\n
#container {\r\npadding: 5% 10%;\r\n}<\/pre>\n
Grunds\u00e4tzlich wird fast immer mit 100% als Basis gerechnet, also zum Beispiel eine Webseitenaufteilung Hauptinhalt – Sidebar w\u00fcrde mit 70% – 30% aufgeteilt werden. Man muss also einfach immer irgendwie auf 100% kommen, wenn man Bereiche aufteilen will.<\/p>\n
Schwieriger wird es, wenn Elemente Au\u00dfenabst\u00e4nde (margin) haben, denn dann muss man diese noch zus\u00e4tzlich von der Breite abziehen, um die korrekte Darstellung zu erzielen:<\/p>\n
div {\r\nmargin-right: 10px;\r\nwidth: calc(40% - 10px);\r\n}<\/pre>\n
\n
Beispiel aus der Web-Entwicklung:<\/strong><\/p>\n
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\u00fcgen m\u00f6chte, das \u00fcber die gesamte Bildschirmbreite au\u00dferhalb der 800px Begrenzung gedehnt werden und die gesamte Webseite responsive sein soll, also unabh\u00e4ngig der Bildschirmgr\u00f6\u00dfe immer korrekt dargestellt.<\/p>\n
.wrap {\r\nwidth: 100%;\r\nmax-width: 800px;\r\nmargin: 0 auto;\r\n}<\/pre>\n
Das wrap<\/em>-Element hat also eine maximale Gr\u00f6\u00dfe 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.<\/p>\n
Innerhalb des wrap<\/em>-Elements haben wir nun ein weiteres Element, das wir der Anschaulichkeit halber die Klasse fullwidth<\/em> geben. Dieses soll nun auf jeden Fall \u00fcber die gesamte Bildschirmbreite angezeigt werden, da aber das Eltern-Element (wrap<\/em>) nur maximal 800px breit ist, reicht es nicht, wenn wir als Breite 100% eingeben, denn das w\u00e4ren f\u00fcr das Kind-Element auch nur maximal 800px. Im CSS gibt es aber einen praktischen Wert, der es uns erm\u00f6glicht, die gesamte Bildschirmbreite – egal wie gro\u00df diese ist, weil responsive – zu erhalten: 100vw (vw = vertical width).<\/p>\n
Wenn wir nun also 100vw als Breite angeben, erh\u00e4lt das fullwidth<\/em>-Element die Breite des Browser-Fensters, ist allerdings aufgrund seiner Position innerhalb des wrap<\/em>-Elements (s. CSS Box Model oben) verschoben. Wir m\u00fcssen nun also noch die Position des Elements so verschieben, dass es von Rand zu Rand reicht und mittig ausgerichtet ist. Zu diesem Zweck m\u00fcssen 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.<\/p>\n
.wrap > .fullwidth {\r\nwidth: 100vw;\r\nmargin-left: calc((100% - 100vw) \/ 2);\r\nbackground-color: blue;\r\n}<\/pre>\n
Wenn wir jetzt dem gesamten Element noch einen Abstand links und rechts (jeweils 1em) geben und es entsprechend mittig anzeigen wollen, dann m\u00fcssen wir einerseits den Abstand von der Breite abziehen und nat\u00fcrlich dann auch wieder der Berechnung des margin-left hinzuf\u00fcgen:<\/p>\n
.wrap > .fullwidth {\r\nwidth: calc(100vw - 2em);\r\nmargin-left: calc((100% - 100vw + 2em) \/ 2);\r\nbackground-color: blue;\r\n}<\/pre>\n<\/div>\n
Bruch-Rechnen<\/h2>\n
\u00c4hnlich 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\u00df. Das Grid System von Bootstrap<\/a> basiert zum Beispiel auf dieser Logik. Man sollte also das kleine Einmaleins beherrschen und bis 12 z\u00e4hlen k\u00f6nnen.<\/p>\n
Winkel<\/h2>\n
Es kommt durchaus ab und zu mal vor, dass man zum Beispiel ein Element drehen oder neigen m\u00f6chte. Hierf\u00fcr ben\u00f6tigt man dann die Grad-Angabe des gew\u00fcnschten Winkels. Daf\u00fcr muss man eigentlich nur im Kopf behalten, dass 360\u00b0 eine volle Umdrehung ist.<\/p>\n
Vielleicht hast du oben im Men\u00fc gesehen, dass unter aktiven Men\u00fc-Elementen ein schr\u00e4g gelegtes t\u00fcrkises Element angezeigt wird? Solche Verformungen oder Verschiebungen lassen sich im CSS mit transform<\/a> erzielen.<\/p>\n
\n
Beispiel aus der Web-Entwicklung:<\/strong><\/p>\n
.current-menu-item > a::after {\r\n...\r\ntransform: skew(-20deg);\r\n}<\/pre>\n<\/div>\n
Radius<\/h2>\n
Kreise, Ellipse, abgerundete Rahmen<\/a> – viel berechnen muss man daf\u00fcr in der Web-Entwicklung zum Gl\u00fcck nicht. Dennoch kommen Rundungen durchaus vor und daher will ich sie nicht unerw\u00e4hnt lassen.<\/p>\n
\n
Beispiel aus der Web-Entwicklung:<\/strong><\/p>\n
Ein perfekter Kreis l\u00e4sst sich mit CSS sehr einfach darstellen, wichtig daf\u00fcr ist nur, dass H\u00f6he und Breite exakt gleich sind, also die Grundlage des Elements ein Quadrat ist.<\/p>\n
img.avatar {\r\nmax-height: 98px;\r\nmax-width: 98px;\r\nborder-radius: 50%;\r\n}<\/pre>\n
Wenn Breite oder H\u00f6he gr\u00f6\u00dfer ist, w\u00fcrde die Darstellung in eine Ellipse umgewandelt.<\/p>\n
Abgerundete Ecken, wie sie h\u00e4ufig bei Buttons oder Formularfeldern zu finden sind, lassen sich mit einer Pixelangabe umsetzen:<\/p>\n
a.button{\r\nborder-radius: 4px;\r\n}<\/pre>\n<\/div>\n
Vektoren<\/h2>\n
Wer tiefer einsteigen m\u00f6chte 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\u00e4ftigen. Die Arbeit mit SVGs macht super viel Spa\u00df und die Effekte, die man damit erzielen kann sind ziemlich cool!<\/p>\n
Fazit<\/h2>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Du willst Web-Entwicklerin werden, hast aber Angst vor Mathe? Alles halb so schlimm! Hier erf\u00e4hrst du, welche Berechnungen du im Web-Developer-Alltag wirklich brauchst.<\/p>\n","protected":false},"author":10,"featured_media":13619,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[12,11,265,275,213,209],"class_list":["post-13612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-code","tag-css","tag-girls-who-code","tag-web-developer","tag-web-development","tag-web-entwicklung"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/posts\/13612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/comments?post=13612"}],"version-history":[{"count":0,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/posts\/13612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/media\/13619"}],"wp:attachment":[{"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/media?parent=13612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/categories?post=13612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.womenintechev.de\/en\/wp-json\/wp\/v2\/tags?post=13612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}