Webseiten programmieren und gestalten

Das vielseitige Handbuch für die Fullstack-Ausbildung

Gute Webseiten zu entwickeln ist eine vielseitige Kunst: Ein Gespür für die Gestaltung ist ebenso gefragt wie solide Kenntnisse der Web-Sprachen HTML, CSS und JavaScript; und für die Serverseite ist PHP die beliebteste Wahl. Der erfahrene Webexperte und Dozent Uwe Mutz beweist hier, dass sich lehren und lernen lässt, was Sie als Webseiten-Profi brauchen. Ob es um Markup und Protokolle geht, die richtige Story für die Zielgruppe, den Einsatz von Bildelementen oder eine robuste Datenbankanbindung - dieses Handbuch ist der perfekte Begleiter für eine ganzheitliche Ausbildung und für den Beruf. Von den Grundlagen bis zu Themen wie Performanz, Sicherheit und gutem Webdesign - ideal zum Lernen, Auffrischen und Nachschlagen.

Aus dem Inhalt:

• Eine Arbeitsumgebung einrichten
• Grundlagen von HTML bis PHP
• Gestaltungs-Prinzipien
• Bilder skalieren und zurechtschneiden
• Farben und Designs wirkungsvoll einsetzen
• Ein Datenbankschema entwerfen
• Verschlüsselungsstandards
• Mail-Funktionen anbieten
• SQL-Injections und anderen Angriffen vorbeugen
• Beispielprojekte: Bibliotheksverwaltung, Onlineshop, Mitglieder-Webseite, Dienstpläne u. v. m
• Barrierefreiheit im Web

Materialien zum Buch . . . 17
1. Websites, Webentwicklung, Full Stack -- was Sie in diesem Buch erwartet . . . 19

1. 1 . . . Frontend vs. Backend . . . 21
1. 2 . . . Was müssen Sie können? . . . 22
1. 3 . . . Umfassendes oder gar vollständiges Wissen? . . . 23
1. 4 . . . Wie korrekt ist korrekt? . . . 24
1. 5 . . . In eigener Sache -- Danksagung . . . 24

2. Good to know -- etwas Vorwissen . . . 25

2. 1 . . . Die Planung einer Website . . . 25
2. 2 . . . Ziele einer Website . . . 27
2. 3 . . . Marktanalyse, um den Markt zu verstehen . . . 29
2. 4 . . . Der User, das (un)bekannte Wesen . . . 30
2. 5 . . . Konkurrenzanalyse: Wie sieht die Konkurrenz aus? . . . 46
2. 6 . . . Content is King -- die Content Strategy . . . 50
2. 7 . . . Zielorientiertes Interaktionsdesign . . . 51
2. 8 . . . Ein wenig Wahrnehmungspsychologie . . . 52
2. 9 . . . Wie Farbe wirkt . . . 53
2. 10 . . . Die Unternehmensphilosophie wird in der Corporate Identity ausgedrückt . . . 80

3. Das liebe Internet -- ein wenig Basiswissen . . . 83

3. 1 . . . Dienste im Internet, Server und Client . . . 84
3. 2 . . . Protokolle und Ports -- eine Frage der Kommunikation . . . 85
3. 3 . . . IP-Adressen -- unsere Anschrift im Internet . . . 91
3. 4 . . . Domains . . . 97
3. 5 . . . Mime Types und Content Types -- Sein und Schein . . . 104
3. 6 . . . Ein paar notwendige Begriffsdefinitionen . . . 105
3. 7 . . . Wie gelangen unsere Daten auf den Server? FTP macht' s vor . . . 106
3. 8 . . . Wie ein Webserver funktioniert . . . 107
3. 9 . . . Ach ja, und wie funktioniert nun eine Website? . . . 116

4. Die lokale Entwicklungsumgebung . . . 121

4. 1 . . . Server-Software -- wir spielen Provider . . . 121
4. 2 . . . Editoren . . . 123
4. 3 . . . Der Browser als Interpreter und Testumgebung . . . 125

5. HTML -- Die Grundlage einer Website . . . 133

5. 1 . . . Ein bisschen in der Geschichte von HTML stöbern . . . 135
5. 2 . . . Das Grundgerüst einer HTML-Seite . . . 139
5. 3 . . . Der Dokumentbaum . . . 142
5. 4 . . . Die Elemente einer HTML-Seite . . . 145
5. 5 . . . Easy: Block vs. Inline -- die grundlegendste Unterscheidung von Elementen . . . 187
5. 6 . . . Not so easy: Content Categories ab HTML5 . . . 191
5. 7 . . . Bedeutungslose Elemente -- nichts für echte Webdesigner*innen . . . 194
5. 8 . . . Elemente mit (besonderer) Bedeutung . . . 195
5. 9 . . . Formulare als Schnittstelle zwischen Client und Server . . . 212
5. 10 . . . Multimedia mit Audio, Video & Co. . . . 236
5. 11 . . . Meta-Informationen sind der Mehrwert von Websites . . . 238

6. CSS -- Formatierung rulez . . . 249

6. 1 . . . Die drei Säulen von CSS . . . 250
6. 2 . . . Die Stylesheets -- so geht der Browser vor . . . 250
6. 3 . . . CSS und HTML -- ein schönes Paar . . . 256
6. 4 . . . Und die Schreibweise von CSS-Regeln? . . . 258
6. 5 . . . Ein Muss: Selektionen und Spezifitäten . . . 260
6. 6 . . . Die Vererbung -- mehr Pro als Kontra . . . 277
6. 7 . . . Einheiten in CSS -- nicht alles ist relativ . . . 280
6. 8 . . . Sind ja alles nur Boxen -- das Box-Modell . . . 282
6. 9 . . . Glanz und Gloria -- Farben . . . 294
6. 10 . . . Das geschriebene Wort -- Schriften . . . 295
6. 11 . . . Textumfluss (float) -- umflossene Elemente wie in Druckmedien . . . 320
6. 12 . . . Der Hintergrund als Gestaltungselement . . . 325
6. 13 . . . Positionierungsarten -- Normal Flow vs. individuelle Positionierung . . . 332
6. 14 . . . Tabellenartiges Design mit CSS . . . 343
6. 15 . . . Listenartiges Design mit CSS . . . 350
6. 16 . . . CSS Counters -- Individuelle Nummerierung mit CSS gefällig? . . . 352
6. 17 . . . Fortgeschrittenes Layout -- Jetzt wird' s fein . . . 356
6. 18 . . . Alles ist in Bewegung -- Übergänge und Animationen . . . 379
6. 19 . . . Ein erster Schritt in Richtung Programmierung mit CSS-Variablen . . . 391
6. 20 . . . Media Queries und @-Regeln aus Rücksichtnahme auf die User-Anforderungen . . . 395
6. 21 . . . Advanced Stuff: CSSOM . . . 408
6. 22 . . . Sass, LESS & Co -- der Einsatz von CSS-Präprozessoren . . . 411
6. 23 . . . Übungsbeispiel . . . 412

7. JavaScript -- die logische Abteilung auf der Clientseite . . . 415

7. 1 . . . Eine erste Abgrenzung zu anderen Sprachen und Frameworks . . . 417
7. 2 . . . Scriptsprachen und HTML -- her mit der Interaktion . . . 418
7. 3 . . . Bevor es los geht, ein wenig Vorbereitung . . . 419
7. 4 . . . Die essenziellen Grundlagen der Programmierung . . . 435
7. 5 . . . Das Zusammenspiel zwischen HTML und JavaScript -- das Dokumentobjektmodell (DOM) . . . 510
7. 6 . . . Ereignisse bestimmen den Ablauf . . . 527
7. 7 . . . Wir haben ja Zeit: Zeitlich gesteuerte Befehle . . . 550
7. 8 . . . Mehr als nur document: Das window-Objekt . . . 552
7. 9 . . . Das mühselige Arbeiten mit Datum und Uhrzeit . . . 556
7. 10 . . . Synchron oder besser asynchron? AJAX, Promises und die fetch-API . . . 557
7. 11 . . . Web-APIs . . . 579
7. 12 . . . Auslagern von Code und Modulen . . . 581
7. 13 . . . Robuste Programmierung -- der Umgang mit Fehlern . . . 587
7. 14 . . . Wo das W3-Konsortium nicht mehr weiter wusste: HTML-Elemente mit JS-API . . . 597
7. 15 . . . Lokale Datenspeicherung -- wohin mit den Daten? . . . 602
7. 16 . . . Vorlagen (Template Literals) . . . 605
7. 17 . . . Das Finale? Prototypen, Klassen, Architektur und Co. . . . 605
7. 18 . . . Übungsbeispiel . . . 608

8. Responsive Webdesign -- Verantwortung dem User gegenüber . . . 611

8. 1 . . . Die Grundlagen des Responsive Design . . . 611
8. 2 . . . Wie geht man' s an? Der Workflow . . . 614
8. 3 . . . Content- und Layoutstrategien für responsive Websites . . . 616
8. 4 . . . Umbruchpunkte definieren, wo das Layout ein anderes wird . . . 623
8. 5 . . . Die Grundbausteine einer responsiven Site . . . 625
8. 6 . . . Mobile Usability -- Usability weitergedacht . . . 693
8. 7 . . . Alles performt -- optimiert geht' s schneller . . . 697
8. 8 . . . Über den Tellerrand geblickt: Fortgeschrittene Themen . . . 707
8. 9 . . . Ausblick . . . 716

9. Veröffentlichung und Versionierung . . . 717

9. 1 . . . Der Veröffentlichungsprozess . . . 717
9. 2 . . . Die Versionierung . . . 720

10. Usability, User Experience und Barrierefreiheit . . . 723

10. 1 . . . Usability . . . 724
10. 2 . . . User Experience . . . 744
10. 3 . . . Barrierefreiheit . . . 747

11. Die Serverseite bzw. das Backend -- Programmieren mit PHP . . . 761

11. 1 . . . PHP gegen den Rest der Welt? . . . 762
11. 2 . . . Aller Anfang ist leicht . . . 763
11. 3 . . . Die Entwicklungsumgebung . . . 766
11. 4 . . . Imperativer oder objektorientierter Ansatz? . . . 768
11. 5 . . . Jeder macht Fehler -- das Fehlermodell von PHP . . . 769
11. 6 . . . Die Unterschiede in der Schreibweise von JavaScript und PHP . . . 771
11. 7 . . . Trial and Error: try-catch . . . 782
11. 8 . . . Hilfreich: Code in externe Dateien auslagern . . . 784
11. 9 . . . Debugging für PHP-Entwickler? . . . 786
11. 10 . . . Der Anknüpfungspunkt an HTML -- Formulare als wesentliches Kommunikationsmittel . . . 793
11. 11 . . . Den HTTP-Header manipulieren -- serverseitige Weiterleitungen . . . 804
11. 12 . . . »Kennst Du mich noch? « -- Sessions (Sitzungen) . . . 807
11. 13 . . . Formulare aufgebohrt: Datei-Upload . . . 819
11. 14 . . . Die Dateistruktur auf der Serverseite -- unsere Ablage . . . 828
11. 15 . . . Bilder skalieren . . . 855
11. 16 . . . Die Kommunikation mit der Außenwelt -- der Versand von E-Mails . . . 864
11. 17 . . . Ausblick . . . 872

12. Wohin mit all den Daten? Datenbanken liefern die Antwort . . . 875

12. 1 . . . Alles Datenbank, oder was? Ein paar Begriffe . . . 876
12. 2 . . . Wir sind Administrator -- die Verwaltung der Datenbank . . . 876
12. 3 . . . Tabellen und Co. -- der Aufbau einer Datenbank . . . 878
12. 4 . . . Sicher ist sicher -- Sichern einer Datenbank . . . 889
12. 5 . . . Die zwei Freunde Webserver und Datenbankserver -- Datenbankanbindung mittels PHP . . . 891
12. 6 . . . Noch eine Sprache -- SQL . . . 898
12. 7 . . . Alles eine Sache der Vorbereitung: Prepared Statements . . . 933
12. 8 . . . Datenbankzugriff verbessert: PDO aufgebohrt . . . 936
12. 9 . . . Praxis vs. Theorie -- Normalformen, Beziehungen, Joins . . . 937
12. 10 . . . Auch die Datenbank kann' s -- rekursive Datenspeicherung . . . 972
12. 11 . . . Ende der Fahnenstange? Weitere SQL-Befehle . . . 978

13. 1984 und Big Brother -- Sicherheitsaspekte . . . 985

13. 1 . . . Angriffsszenario 1: Cross-Site Scripting (XSS) . . . 985
13. 2 . . . Angriffsszenario 2: SQL-Injections . . . 992
13. 3 . . . Angriffsszenario 3: Formulardaten entfernter Sites . . . 998
13. 4 . . . Angriffsszenario 4: Upload von Dateien . . . 1000
13. 5 . . . Sichere Verschlüsselung von Passwörtern -- asymmetrische Verschlüsselungsverfahren . . . 1001
13. 6 . . . Ver- und Entschlüsselung von Daten -- symmetrische Verschlüsselungsverfahren . . . 1005
13. 7 . . . Damit haben wir nicht gerechnet -- Variablentypen und Konvertierungsfunktionen . . . 1008
13. 8 . . . Weitere Tipps zur Sicherheit einer Site . . . 1009

Index . . . 1011