Webseiten programmieren und gestalten

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 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 wirkungsvollen Einsatz von Bildelementen oder die performante 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