Agenda

Grundlagen

• HTML/CSS/JS
• JSON
• HTTP-Protokoll
• Debugger

Fortgeschrittenes

• NodeJS
• Responsive Design
• CSS-Animationen
• WebComponents / lit
• Canvas-Element
• Datenbank

Architektur & Paradigmen

• Funktionale Programmierung
• Objektorientierte Programmierung
• Entwurfsmuster (Singleton, Factory, Builder...)
• SOLID-Prinzipien
• Dependency Injection
• MVC
• Redux

Interessante Technologien

• WebSockets
• WebWorker
• ServiceWorker
• WebRTC
• WebGL
• Progressive Web Application
• CEF / Electron
• WebAssembly

Betrieb

• Server einrichten
• SSL- / TLS-Zertifikate

Workflows

• Git
• Test Driven Development
• Continuous Integration / Continuous Delivery

HTML

• HyperText Markup Language
• Erste Version 1993 von Tim Berners-Lee
• Dokumentationsmedium
• Ursprünglich rein akademische Verwendung
• Verlinkungen der Dokumente macht sie "hyper"

• Heute ein "lebender Standard" (Living Standard)
• Stetige inkrementelle Erweiterung

Grundgerüst

Beispiel

Beispiel

Aufbau eines Elements

CSS

• Cascading Style Sheet
• Nach größerer Verbreitung von HTML
• Webseiten ansprechend gestalten

Beispiel

							
								selector [, selector, selector, ...] {
									property: value;
								}
							
						

Beispiel

							
								html {
									background-color: red;
									font-size: 30px;
								}
							
						

Beispiel

Beispielhafte CSS-Eigenschaften

• background-color: red
• font-family: Georgia, serif, Arial
• text-decoration: line-through underline

Selektoren

• Umfangreiche Element-Selektoren zur Anwendung der Styles
• Kinder, Enkel...
• Geschwister, direkte Nachfolger
• Attribute
• Pseudoklassen

Selektoren

							
								#my-id /* ID */
								html, body /* Mehrfachselektion */
								div > p /* p die direkt unterhalb eines div sind */
								a:visited /* besuchte Links */
								span.important /* span mit der Klasse "important" */
							
						

Layout

Es gibt zwei grundlegende Blocktypen:

block

inline

Block

Beansprucht eine ganze Zeile und verursacht Zeilenumbrüche

							
								display: block;
							
						

Kann Breite und Höhe haben

							
								display: block;
								width: 20px;
								height: 20px;
							
						

Inline

Wie einfacher Text, der mit anderen in der gleichen Zeile stehen kann

							
								display: inline;
							
						

Festlegen von Breite und Höhe sind wirkungslos

							
								display: inline;
								width: 20px; /* kein Effekt */
								height: 20px; /* kein Effekt */
							
						

Inline-Block

Mischform von inline und block

							
								display: inline-block;
								width: 20px;
								height: 20px;
							
						

Box Model

Es gibt zwei Varianten des Modells:

content-box (default)

border-box

							
								box-sizing: content-box;
								box-sizing: border-box;
							
						

Beispiel

							
								div {
									border: 3px solid red;
									padding: 10px;
									width: 100px;
								}

								.border-box {
									box-sizing: border-box;
								}

								.content-box {
									box-sizing: content-box;
								}
							
						

Beispiel

Positioning

							
								/* default, da wo es in der Seite steht */
								position: static;
								/* relativ zu seiner eigentlichen Position */
								position: relative;
								/* relativ zu seinem nächsten non-static parent o. window */
								position: absolute;
							
						

							
								position: relative;
								position: absolute;
							
						

erlauben Verschiebung mittels

							
								top: 10px;
								left: 10px;
								right: 10px;
								bottom: 10px;