Webentwicklung Basics
Webentwicklung Basics
Wie Webseiten Funktionieren
ODER
ODER
Wie verhindere ich, dass mein Gehirn explodiert
🧠
💥
Hier geht es nicht um:
Die Geschichte des Webs
Einen Website-Tutorial
Ein Framework-Vergleich
Backend-Technologien
🙅
Unser Fokus:
Wie Webseiten aufgebaut sind
Warum es ∞ Weise gibt, Webseiten zu erstellen/coden.
Was bei der Erstellung & Pflege einer Website zu beachten gibt
🔬
Wie Webseiten aufgebaut sind
Struktur:
Aussehen:
Interaktion:
🧱
HTML
CSS
JavaScript
💅
👉
Struktur
HTML
Organisiert die Information
(Kisten in Kisten)
Ist das absolute Minimum
(Browsern brauchen nichts anderes)
Struktur
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Struktur
HTML HTML ist das Ziel:
Wie ist der Weg?
HTML
ja, aber wie?
Webseiten bestehen selten aus handgeschriebenes HTML
HTML wird meistens generiert
(Teilweise bevor, teilweise danach)
🚏
Gründe, HTML zu generieren
HTML
für faule Mäuse
Don't repeat yourself (DRY)
Moduralität & Austauschbarkeit
🔢
Ermöglicht versch. Abstraktionen
Ermöglicht die Verwendung von versch. Programmiersprachen
Vom Server
geliefertes HTML
HTML
Bevor
Static Site Generation aka. SSG
(Jekyll, Eleventy, Gatsby, usw.)
Server-side Rendering aka. SSR
(PHP, Ruby on Rails, NodeJS)
🛠
Static Site Generation
HTML
vorgeneriert
🏗
💻 Computer
📄 footer.hjs
📄 contact-content.hjs
📄 about-content.hjs
📄 home-content.hjs
📄 header.hjs
📄 about.html
🧭 Browser
/about
📡 Server
📄 about.html
Server-side rendering
HTML
live generiert
☎️
📡 Server
📄 footer.hjs
📄 contact-content.hjs
📄 about-content.hjs
📄 home-content.hjs
📄 header.hjs
🧭 Browser
/about
📄
about.html
Alle Wege führen
nach Rom
HTML
Hauptlektionen
🏟
📡 Server
🧭 Browser
Kann HTML in versch. Weise generieren/liefern
Bekommt eine Anfrage und musst HTML zurückliefern
Bekommt eine HTML Struktur, welche später
verändert werden kann
Akzeptiert nur HTML
Kein JavaScript für
statische Seiten
JAVASCRIPT
Nicht notwendig
Die Meisten Webseiten brauchen nachträgliches Veränderung nicht
🔞
🧭 Browser
📡 Server
📄 about.html
📄 contact.html
🌐 /about
🌐 /contact
JavaScript wird verwendet, um auf Benutzerinteraktionen zu hören und darauf zu reagieren, indem HTML geändert wird
Veränderung vom HTML
JAVASCRIPT
für Interaktion
🧱
👌
📡 Server
📄 about.html
🧭 Browser
🌐 /about
👆 Click auf Kontakt Button
🍾 JS fügt HTML hinzu, mit eine Kontakt-Popup
Veränderung vom HTML
JAVASCRIPT
für Interaktion
🧱
👌
Veränderung vom HTML
JAVASCRIPT
für Interaktion
🧱
👌
Demonstration
👷🏾♀️
🏗
🦺
Sidenote:
CSS
CSS
für Styling
💅
👌
Targeting von HTML-Elementen und Beschreibung ihres Aspekts
Definition von Übergängen
und Animationen
Demonstration
👷🏻♂️
🚧
🦺
Cascading Stylesheets
CSS
für Styling
💅
👌
Recap
HTML
👩🏽🏫
CSS
JavaScript
📡 Server
HTML wird kompiliert, im Voraus oder zur Anfragezeit
🧭 Browser
👆 Interaktion
HTML wird angezeigt, und CSS definiert
das Aussehen des HTML
JavaScript reagiert mit HTML Veränderungen auf die Nutzer-interaktionen
Du dachtest JS = React?
⚛️
Was ist der ganze Fuzz um React, Angular, Vue, etc. ?
Warum wird es so viel über JavaScript geredet?
Warum ist das alles so kompliziert?
JavaScript Rules
👑
Einfach
Tolerant
Einsteigerfreundlich
Beliebt
Community
Sowohl vom Browser interpretiert als auch vom Server (NodeJS)
🌍
1x gelernt, überall verwendbar
React Rules
👑
Simpel
HTML-Nah
Populär
Funktioniert in verschiedene Umgebungen (Mobile, 3D, Canvas)
⚛️
Löst zahlreiche übliche Challenges
Code kann geteilt werden (Browser/Server)
Warum ist alles
so kompliziert?
🤯
Historische Gründe
Weil es viele Challenges gibt
Jeder hat seine eigene Meinung
Kampf zwischen versch. Standards
Herausforderungen
🥵
Performance
State-Verwaltung
Responsiveness
Ecommerce
SEO (Natural/Paid)
Sprachen
Kompatibilität
Design
Interaktivität
Authetifizierung
Gute Nachrichten!
📰
Open Source to the rescue
Das Internet ist noch Offen
Entwickler sind faul aber kreativ
Die Community ist Riesig
Die Lernressourcen sind endlos
HTML ist alles
☝️
Vergesse nicht!
Vermeide Ablenkung, denke an
die eigentliche Herausforderung
📡 Server
PHP/NodeJs/...
🧭 Browser
👆 Interaktion
HTML / CSS
JavaScript
Dankeschön!
🙏
Merci!