Hammer / Bensmann Webdesign für Studium und Beruf

Webseiten planen, gestalten und umsetzen
2. Auflage 2011
ISBN: 978-3-642-17069-0
Verlag: Springer
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Deutsch, 350 Seiten

Reihe: X.media.press

Ziel des Buchs ist es, Lesern die Andersartigkeit der Gestaltung für elektronische Medien bewusst zu machen und Wege zu einem mediengerechten Entwurf aufzuzeigen: von der Sitearchitektur über die kreative Entwurfsphase bis zum Navigations- und Screendesign und der Umsetzung eines Internetauftritts mit (X)HTML und CSS. Begleitend werden Grundlagen im Web-Projektmanagement vermittelt. Der Kenntnisstand kann mithilfe von Aufgaben und Quizfragen überprüft und anhand komplexer Entwurfsaufgaben erprobt werden.

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.

Autoren/Hrsg.

Hammer, Norbert

Bensmann, Karen

Inhaltsverzeichnis

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