Web-Entwicklung

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"
VersionErscheinungElemente ca.
HTML 1.0199320
HTML 2.0199550
HTML 3.2199770
HTML 4.01199990
HTML 5.02014110
  • 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

Beispiel

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" */