Webdesign für Studium und Beruf (eBook)

Prof. Dr. Norbert Hammer:Seit 1997 Professor für Mediendesign am Fachbereich Informatik der Fachhochschule Gelsenkirchen. Fachverbundleiter Mediendesign in der virtuellen Fachhochschule. Designspezifische Vorträge und Publikationen im In- und Ausland.Mitinhaber der Designagentur hammer.runge.1991 Promotion zum Dr. phil.; 1987-1996 wiss. Mitarbeiter Universität Essen, Industrial Design.; Lehraufträge für Designmanagement und Designtheorie.; 1977-87 angestellt bei Krups, Solingen, dort 1983-87 zuständig für Produktplanung.; 1970-77 Designstudium an der Folkwangschule/Uni Essen, Aufbaustudium an der SHBK Braunschweig.Karen Bensmann:Seit 2008 als wissenschaftliche Mitarbeiterin an der FH Gelsenkirchen angestellt. 2008 Abschluss des Studiums der Medieninformatik an der FH Gelsenkirchen, Entwicklung einer Online-Lerneinheit zum Thema Webdesign als Diplomarbeit. Seit 1996 im Bereich Webtechnologien und Webdesign tätig. 1996-2000 Mitbetreiberin des ehemaligen Internetproviders ruhr.de, seit 2000 selbstständig im Bereich Webdesign.

Vorwort 5
Vorwort zur 2. Auflage 6
IInnhhaalltt 7
Vorbemerkug1 13
1.1 Überblick 13
1.1.1 Inhalte und Ziele 13
1.1.2 Voraussetzungen 16
Einführung 2 17
2.1 Lernziele 17
2.2 Design-Begriffsexkurs 18
2.3 Das Arbeitsfeld Webdesign 22
2.3.1 Vom Print- zum Webdesign 22
2.3.2 Was umfasst Webdesign? 24
2.4 Das World Wide Web 26
2.4.1 Entwicklung des World Wide Web 26
2.4.2 Das WWW als Mitmach-Medium 29
2.5 Resümee 30
Grundlagen des Webdesigns 3 31
3.1 Lernziele 31
3.2 Einleitung 31
3.3 Technik und Design 32
3.3.1 Webtechnologien 32
3.3.2 Webdesign, ein Kompromissdesign 34
3.4 Websitestrategien 37
3.4.1 Unternehmensrepräsentation 37
3.4.2 Informationsplattformen 38
3.4.3 Online-Shops 39
3.4.4 Auktionsplattformen 42
3.4.5 Unterhaltung 43
3.4.6 E-Learning 43
3.5 Websitetypen 44
3.5.1 Statische Website 44
3.5.2 Content-basierte dynamische Website 45
3.5.3 Rich Internet Applications 46
3.6 Resümee 47
3.7 Quiz zu „Grundlagen des Webdesigns“ 48
Technische Grundlaen 4 50
4.1 Lernziele 50
4.2 Einleitung 51
4.3 HTML 52
4.3.1 HTML oder XHTML? 52
4.3.2 Struktur eines HTML-Dokuments 53
4.3.3 Die Webseite mit Inhalten füllen 57
4.3.4 Sonderzeichen in Textinhalten 58
4.3.5 Überschriften 58
4.3.6 Absätze und Zeilenumbrüche 59
4.3.7 Links 59
4.3.8 Bilder 59
4.3.9 Textauszeichnungen 60
4.3.10 Listen 61
4.3.11 Tabellen 61
4.3.12 Zitate 62
4.3.13 Struktur für das Dokument 62
4.3.14 HTML-Übung 63
4.4 CSS 64
4.4.1 CSS in die Website einbinden 64
4.4.2 Regeln und Selektoren 65
4.4.3 @-Regeln 71
4.4.4 V ererbung und K askaden 78
4.4.5 Das B oxmodell 82
4.4.6 F arben in CSS 82
4.4.7 Absolute und relative Maßeinheiten 85
4.4.8 CSS-Eigenschaften 86
4.4.9 Positionierung mit CSS 89
4.5 Schritt für Schritt zur HTML-Seite mit Stylesheet 96
4.5.1 Schritt 1: Seite strukturieren 96
4.5.2 Schritt 2: Den HTML-Code mit Textauszeichnungerstellen 97
4.5.3 Schritt 3: Strukturierende Container 99
4.5.4 Schritt 4: < body>
4.5.5 Schritt 5: Der umgebende Container 103
4.5.6 Schritt 6: Den Inhaltsbereich formatieren 104
4.5.7 Schritt 7: Kopfbereich gestalten 107
4.5.8 Schritt 8: Der Navigationsbereich 108
4.6 Alte versus neue Technologien 110
4.7 Weiterführende Technologien 111
4.7.1 Flash 111
4.7.2 Silverlight 111
4.7.3 JavaFX 111
4.7.4 Das < canvas>
4.7.5 XML 112
4.7.6 Serverseitige Programmiersprachen 112
4.7.7 Clientseitige Programmiersprachen 114
4.7.8 Datenbanken und SQL 114
4.7.9 Ajax 119
4.7.10 Abonnementendienste 122
4.8 Aktuelle Trends im World Wide Web 124
4.8.1 Das Web 2.0 124
4.8.2 Semantisches Web 125
4.9 Das World Wide Web der Zukunft 126
4.9.1 HTML5 126
4.9.2 CSS Level 3 126
4.9.3 Silbentrennung 128
4.10 Bildformate für das WWW 129
4.10.1 GIF 129
4.10.2 JPEG 130
4.10.3 PNG 131
4.10.4 S VG 132
4.10.5 Formatentscheidungen 132
4.11 Plugins 133
4.11.1 Adobe Flash 133
4.11.2 Microsoft Silverlight 134
4.11.3 Java 134
4.11.4 X3D 134
4.11.5 PDF 135
4.12 Entwicklerwerkzeuge 135
4.12.1 HTML-Editoren 135
4.12.2 Content-Management-Systeme 136
4.12.3 Bildbearbeitungssoftware 137
4.12.4 Toolbars und Browsertools 137
4.13 Entwickeln für den unbekannten Anwender 138
4.13.1 Plattformen, Browser und Toolbars 138
4.13.2 Monitore und A uflösungen 139
4.14 Resümee 140
4.15 Quiz zu „Technische Grundlagen“ 141
4.15.1 Ein HTML-Element wird normalerweise definiert 141
4.15.2 Wie schreiben Sie in XHTML ein img-Element? 141
4.15.3 An welche Stelle eines XHTML-Dokuments mussdie XML-Deklaration geschrieben werden? 141
4.15.4 Wo wird der XML-Namensraum festgelegt? 141
4.15.5 Welche der folgenden Aussagen ist/sind richtig?(mehrere Nennungen möglich) 141
4.15.6 Worauf sollten Sie achten, wenn Sie in IhremHTML-Dokument Überschriften verwenden? 142
4.15.7 Welches Attribut definiert in einem < a>
4.15.8 Wie schreiben Sie eine CSS-Regel in einemStylesheet? 142
4.15.9 Wie definieren Sie einen Inline-Style für eineinzelnes Element? 142
4.15.10 Wie binden Sie ein externes Stylesheet in einHTML-Dokument ein? 142
4.15.11 Können Sie in CSS für eine Gruppe von Elementengleichzeitig denselben Style zuweisen? 142
4.15.12 Welche Regeln gelten für die Vererbung vonStyles? 143
4.15.13 Sortieren Sie die folgenden GIF-Grafiken nachaufsteigender Dateigröße. 143
4.15.14 Ordnen Sie das jeweils geeignete Bildformat denAbbildungen zu. 143
4.16 Übung: „Tragamin“ Webseite aufbauen 144
Siteplanung 5 145
5.1 Lernziele 145
5.2 Einleitung 146
5.3 Briefing und Projektplanung 146
5.3.1 Kundenanforderungen 147
5.3.2 Main Idea 149
5.3.3 Ablauf- und Projektplanung 149
5.3.4 Angebot / Kostenplanung 151
5.4 Information und Analysen 153
5.4.1 Zielgruppenanalyse 153
5.4.2 Websiteanalysen 154
5.4.3 Materialsichtung 155
5.4.4 Corporate-Design-Vorgaben 156
5.4.5 Überarbeitete Projektformulierung 157
5.5 Technische Vorplanung 157
5.5.1 Domains 157
5.5.2 Webhosting 159
5.5.3 Webserver 161
5.6 Strukturdesign 162
5.6.1 Inhaltlicher Aufbau 162
5.6.2 Sitestrukturmodelle 163
5.6.3 Strukturlayout 166
5.7 Interaktionsdesign 168
5.7.1 Navigationskonzept 169
5.7.2 Persistente Navigation 172
5.7.3 Dynamisch generierte Navigation 173
5.7.4 Zielgruppenorientierte Navigation 173
5.7.5 Teaser und A nkerlinklisten 174
5.7.6 Quicklinks 175
5.7.7 Verzeichnisse und Sitemaps 175
5.7.8 Breadcrumbtrail 176
5.7.9 Suchfunktionen 177
5.7.10 Hilfe und Guided Tour 177
5.7.11 Slider, Carousel etc. 178
5.7.12 Das Navigationslayout 179
5.8 Projektorganisation 183
5.8.1 Arbeitsserver 183
5.8.2 Namenskonventionen 183
5.8.3 Projektdokumentation 184
5.9 Resümee 185
5.10 Quiz zu „Siteplanung“ 185
5.11 Übung: Siteplanung der „pixographen“-Site 187
Designentwurf 6 190
6.1 Lernziele 190
6.2 Einleitung 191
6.3 Look & Feel
6.4 Usability 194
6.4.1 Typografie am Bildschirm 196
6.4.2 Farbe am Bildschirm 199
6.5 Accessibility 200
6.6 Screendesign 204
6.6.1 Was umfasst Screendesign? 204
6.6.2 Designstil 204
6.6.3 Bildsprache und Metaphern 206
6.6.4 Seitenunterteilung / Raster 207
6.6.5 Seitenkomposition 209
6.6.6 Bildkonzept 211
6.7 Interfacedesign 213
6.7.1 Was umfasst Interfacedesign? 213
6.7.2 Orientierung 214
6.7.3 Farbkodierung 215
6.7.4 Navigationskonventionen 217
6.7.5 Navigationsmenüs 219
6.7.6 Bildbuttons 222
6.7.7 Navigationskulissen 224
6.7.8 Bilder als Schaltflächen 225
6.7.9 Textlinks 226
6.7.10 Favorite-Icons 228
6.8 Designarbeitsschritte 229
6.8.1 Scribble, Vorentwurf 229
6.8.2 Basic Photoshop-Layout 230
6.8.3 Rasterentwicklung 231
6.8.4 Detailentwurf 233
6.9 Präsentation grafischer Prototyp 234
6.10 Resümee 235
6.11 Quiz zu „Designentwurf“ 236
6.12 Übung: Screenund Interfacedesign der„pixographen“-Site 238
Prototyping 7 240
7.1 Lernziele 240
7.2 Einleitung 241
7.3 HTML-Prototyp 241
7.3.1 Grundsätzlicher Aufbau der Seiten, HTML-Layout 241
7.3.2 Der HTML-Quelltext 242
7.3.3 Organisieren des Stylesheets 243
7.3.4 Grafiken 244
7.3.5 Browseranpassung 245
7.3.6 Browser-Reset 246
7.3.7 Code Reviews 247
7.4 Styleguide 248
7.5 Freigabe zur Umsetzung 250
7.6 Resümee 252
7.7 Quiz zur „Technischen Umsetzung“ 252
7.8 Übung: Prototyping der „pixographen“-Site 254
Assetdesign 8 256
8.1 Lernziele 256
8.2 Einleitung 257
8.3 Storyboard und Dokumentation 257
8.4 Texte im Web 259
8.4.1 Text erstellen 259
8.4.2 Text gestalten 261
8.5 Bildtypografie 263
8.5.1 Bildheadlines 264
8.5.2 Semantikbezug in Bildheadlines 265
8.6 Grafiken und Bilder im Web 266
8.6.1 Funktionen von Bildern 267
8.6.2 Bilddefinitionen 269
8.6.3 Bildoptimierung 273
8.6.4 Freistellen 274
8.6.5 B ildrandgestaltung 277
8.6.6 S inguläre Hintergrundbilder 280
8.6.7 Bildkacheln 281
8.6.8 Headerbilder 285
8.6.10 Weitere Bildbearbeitungsmethoden 287
8.7 Multimediainhalte 287
8.7.1 Über Animation 287
8.7.2 Bildplayer / Diashow 288
8.7.3 Animierte GIFs 289
8.7.4 RIA-Animationen 289
8.7.5 Filme / Videos 289
8.7.6 Musik / Audio 290
8.7.7 Sonstige Multimediaanwendungen 290
8.8 Resümee 290
8.9 Quiz zu „Assetdesign“ 291
8.10 Übung: Storyboard und Assetdesign der „pixographen“-Site 294
Technische Umsetzung 9 295
9.1 Lernziele 295
9.2 Einleitung 295
9.3 Vom Prototyp zur fertigen Website 296
9.3.1 Dynamischer Content 296
9.3.2 Skripte und Multimediainhalte 297
9.3.3 Grafiken optimieren 297
9.4 Informationsdarstellung auf anderen Medien 297
9.4.1 Druckversion 297
9.4.2 Mobile Endgeräte 303
9.5 Interaktion mit dem Benutzer 305
9.5.1 Formulare 305
9.5.2 Cookies und Sessions 306
9.6 Suchmaschinenoptimierung 307
9.6.1 Seiteninhalt und Relevanz 307
9.6.2 Meta-Tags 308
9.7 Resümee 309
9.8 Quiz zu „Technische Umsetzung“ 309
9.9 Übung: Technische Umsetzung der „pixographen“-Site 310
Tests und Launch 10 312
10.1 Lernziele 312
10.2 Einleitung 313
10.3 Testphasen 313
10.3.1 Dokumententests 313
10.3.2 Funktionstests 314
10.3.3 Usability Testing 316
10.3.4 Accessibility Testing 320
10.3.5 Security Testing 320
10.4 Veröffentlichung der Website 321
10.5 Die Website bekannt machen 322
10.6 Wartung und Pflege 323
10.7 Auswertung der Logfiles 324
10.8 Resümee 326
10.9 Quiz zu „Tests und Launch“ 327
10.10 Übung: Testen der „pixographen“-Site 328
Abbildungsverzeichnis 330
Linkverzeichnis 336
Literaturverzeichnis 338
Index 339
Quizlösungen 346
Lösungen aller Quizfragen 346
Online-Material 349
Die Autoren 350