Thomas Weitzel
Contao für Webdesigner
Mit responsiver Beispielwebsite, Tutorials, Checklisten
Inhalt
6
1 Contao und die Open-Source-Kultur
18
1.1 Zum Begriff Open Source
18
1.2 TANSTAAFL oder „There ain’t no such thing as a free lunch“
19
1.3 Contao und Open Source
20
1.4 Engagieren und einmischen: Ihr Beitrag zur Open-Source-Kultur
21
2 Briefing & Projektplanung
24
2.1 Briefing
25
2.2 Projektplanung
25
2.2.1 Grundüberlegungen
26
2.2.2 Anforderungen an eine Website
26
2.2.3 Umfang einer Website
27
2.2.4 Zielgruppen der Website
27
2.2.5 Prozess
27
2.2.6 Prozessablauf
27
2.3 Methoden der Konzeption und Planung
28
2.3.1 Skizzen
28
2.3.2 Moodboards
29
2.2.3 Wireframes
30
2.3.4 Projektplanung mit dem Kunden
31
2.3.5 Frameworks als (Rapid-)Prototyping-Tool
34
2.3.6 Projektplanung intern/mit Dienstleistern
38
2.3.7 Werkzeuge für die Projektverwaltung
38
2.4 Best Practices
40
2.4.1 Updates ausführen
40
2.4.2 Fehlermeldungen während der Entwicklung einschalten
42
2.4.3 Cache-Funktionen während der Entwicklung ausschalten
42
2.4.4 Einheitliche Benennungen von Frontend-Modulen und Stylesheets
42
2.4.5 Updatesichere Lösungen einbauen
43
3 Checkliste für die Projektkalkulation
46
3.1 Fragenkatalog für ein Projekt
46
3.1.1 Projektbegleitende Themen
47
3.1.2 Konzeption
47
3.1.3 Inhalte und Formate
48
3.1.4 Funktionen
48
3.1.5 Dokumentation
49
3.1.6 Suchmaschinenoptimierung (SEO)
49
3.1.7 Schulung
49
3.1.8 Wartung und Backup
50
3.1.9 Updates
50
3.1.10 Vertragliches
51
3.1.11 Weitere Themen
51
3.2 Online-Tools und weiterführende Informationen zur Projektkalkulation
52
3.2.1 Die Website webkalkulator.com
52
3.2.2 Die iPhone-App Web Fee
53
3.2.3 Contao-Konferenz 2013: Session zur Projektplanung und Kalkulation
55
4 Der Contao-Kosmos im Überblick
56
4.1 Die Projekt-Website contao.org
56
4.2 Wichtige Nachrichtenquellen von Contao
57
4.2.1 Die Projekt-Website contao.org
58
4.2.2 Das Contao-Community-Forum
58
4.2.3 Contao auf Facebook
59
4.2.4 Contao auf Google+
59
4.2.5 Contao auf Twitter
61
4.2.6 Die Contao Association
62
4.2.7 Weitere Informationsquellen
63
4.3 Hilfe bei Problemen mit Contao
65
4.3.1 Das Contao-Community-Forum
65
4.3.2 Wie formuliere ich mein Problem?
66
4.3.3 Das Unterforum „Bezahlte Unterstützung (Kleine Aufträge)“
67
4.3.4 Das Unterforum „Contao-Stellenangebote“
68
4.4 Weitere Hilfequellen
69
4.4.1 Das Contao-Wiki
69
4.4.2 IRC-Chat
70
4.4.3 Contao-Partner
70
4.5 Fehlersuche und -meldung
71
4.5.1 Über das Contao-Community-Forum
71
4.5.2 Über die Contao-Online-Demo
71
4.5.3 Über Contao auf GitHub
71
5 Hilfreiche Tools für Webdesigner
74
5.1 Browser-PlugIns und AddOns
75
5.1.1 Web Developer Toolbar
75
5.1.2 Firebug für den Firefox-Browser
79
5.1.3 Developer Tools für den Firefox-Browser
81
5.1.4 Developer Tools für den Chrome-Browser
83
5.1.5 CacheStatus
87
5.1.6 Quick Locale Switcher
87
5.1.7 GridFox
88
5.1.8 960 Gridder
88
5.1.9 Contao-Tools
89
5.1.10 ColorZilla
90
5.1.11 ColorPick Eyedropper
90
5.1.12 Fireshot – das Screenshot-Tool
91
5.1.13 Webpage Screenshot – Screenshots mit Chrome
91
5.2 Tools zur Bildkompression
92
5.2.1 JPEGmini
92
5.2.2 RIOT (Radical Image Optimization Tool)
93
5.3 Tools für responsive Tests
94
5.3.1 Screencheck
94
5.3.2 Responsive Site View
95
5.3.3 Responsive Inspector
96
5.3.4 Adobe Edge Inspect
97
5.4 Weitere Test-Tools
99
5.4.1 Das Online-Tool Sauce Labs
99
5.1.1 Das Online-Tool BrowserStack
103
6 Contao-Erweiterungen – eine Auswahl
106
6.1 Das Newsletter-System Avisota
107
6.1.1 Funktionsumfang
108
6.1.2 Übersicht
108
6.1.3 Ausblick auf Avisota 2
109
6.1.4 Basis-Version von Avisota 2
109
6.1.5 Feature-Complete-Version von Avisota 2
110
6.2 [dk_carouFredSel]
111
6.2.1 Möglichkeiten von carouFredSel
112
6.2.2 Implementation in Contao
113
6.2.3 Installation und Einrichtung
113
6.2.4 Konfiguration und Einbindung
114
6.2.5 carouFredSel mit Inhaltselementen einsetzen
117
6.2.6 carouFredSel als Modul einsetzen
118
6.2.7 Praxistipps für den gelungenen Einsatz Ihres carouFredSel-Karussells
118
6.3 [dk_masonry]
119
6.3.1 Möglichkeiten der Erweiterung Masonry
119
6.3.2 Installation und Einrichtung
120
6.3.3 Beispiel
121
6.4 [dk_mmenu]
122
6.4.1 Installation und Einrichtung
123
6.4.2 Möglichkeiten der Erweiterung mmenu
125
6.4.3 Beispiel
126
6.5 [easy_themes] EasyThemes
128
6.5.1 Modus Kontextmenü & MouseOver
130
6.5.2 Modus Backend-Module
130
6.5.3 Modus DOM-Inject
131
6.6 EFG (Erweiterter Formulargenerator)
131
6.6.1 Was kann der EFG?
132
6.6.2 Erstellen des Formulars und Eingabe der Inserttags
132
6.6.3 Anzeige des Kontaktformulars als zweispaltige Version
136
6.7 Isotope eCommerce
138
6.7.1 Überblick über die Funktionen
139
6.7.2 Beispielhafte Umsetzungen/Referenzen
140
6.8 MetaModels
142
6.8.1 Was MetaModels kann
144
6.8.2 Die MetaModels-Demo
145
6.8.3 Überlegungen und Anregungen zum Einsatz von MetaModels
147
6.8.4 Ausblick
151
6.9 [responsive_images]
151
6.9.1 Konfiguration
152
6.10 Spaltenset/Subcolumns
156
6.10.1 Historie und Ausblick
158
6.10.2 Bedienung für Administratoren
158
6.11 Tabcontrol
160
6.11.1 Installation und Konfiguration
160
6.11.2 Beispiele aus der Praxis
163
6.12 Backend-Helfer
165
6.12.1 m17-sticky-backend-footer
165
6.12.2 ThemeTab
167
6.13 TinyMCE-Customizer
169
6.13.1 Konfiguration
169
6.13.2 Verwendung
175
7 Contao-Kochbuch
178
7.1 Individuelle Scrollbalken mit jQuery
178
7.2 Integration von Icon-Fonts
181
7.2.1 Installation der Icon-Fonts in Contao
182
7.2.2 Anwenden der Icon-Fonts
183
7.2.3 Icon-Fonts in TinyMCE verwenden
184
7.2.4 Nicht alle Icons eines Icon-Fonts nutzen
186
7.3 Anpassung der Nachrichten-Templates: Datum und Uhrzeit
187
7.3.1 Standard-Templates ansehen
187
7.3.2 Standard-Templates anpassen
188
7.3.3 Standard-Templates anpassen: Nachrichtentitel und Datum einzeilig
188
7.3.4 Standard-Templates anpassen: Nachrichtentitel und Datum einzeilig, getrennt
189
7.3.5 Darstellung von Tag und Monat wie Kalenderblatt
189
7.3.6 Feinschliff
191
7.4 Ausgabe der Syndikations-Icons: Anpassung des Artikel-Templates
192
7.5 Individuelle Social-Media-Bars erstellen
195
7.6 Anpassen der Akkordeon-Elemente
197
7.7 Beispiele für den Einsatz von Inserttags, Mehrsprachigkeit iflng
200
7.7.1 Praxisbeispiel
200
8 Beispielprojekt: Die Erstellung einer Website
202
8.1 Aufbau der Website
203
8.1.1 Anlegen der Seitenstruktur
203
8.1.2 Seitenlayout anlegen
206
8.1.3 Weitere Vorbereitungen treffen
213
8.1.4 Icon-Fonts einbinden
213
8.1.5 Frontend-Module anlegen
214
8.1.6 CSS anlegen und einsetzen
220
8.1.7 Fixierter Header
226
8.1.8 Die Erweiterung dk_carouFredSel
226
8.1.9 Weitere Inhaltselemente anlegen
237
8.1.10 Akkordeon anlegen
240
8.1.11 Kontaktadresse und -formular erstellen
241
8.1.12 Sticky Footer
247
8.1.13 Icon-Fonts einbauen
248
8.1.14 Die Erweiterung responsive_images
250
8.1.15 Mach mal passend – die Website responsiv machen
252
8.1.16 Einbinden eines Homescreen-Icons für ein Lesezeichen auf Tablets und Smartphones
257
9 Suchmaschinenoptimierung (SEO)
260
9.1 Suchmaschinenrelevante Einstellungen
260
9.2 Schlüsselwörter vergeben
261
9.3 Auszeichnungen überprüfen
262
9.4 URLs umschreiben
262
9.5 Eine Sitemap in Contao erzeugen
262
9.6 Die Sitemap bei Google anmelden
263
9.7 Webstatistiken
265
9.7.1 Google Analytics in Contao verwenden
266
9.7.2 Piwik in Contao verwenden
266
10 Checkliste für die Website-Veröffentlichung
270
10.1 Contao in einem Unterverzeichnis
270
10.2 Anpassung in den Einstellungen und der .htaccess-Datei
271
10.3 Wurden suchmaschinenrelevante Einträge vorgenommen?
272
10.4 Wurde ein Sprachen-Fallback eingerichtet?
273
10.5 Validieren des Quellcodes und der CSS-Dateien
274
10.6 Interne und externe Links überprüfen
274
10.7 E-Mail-Adressen im Backend kontrollieren
275
10.8 Testen der Webseiten mit den gängigsten Browsern
275
10.9 Workflow zum Abschluss eines Projektes
277
10.10 Eine Sammlung von Code-Snippets erstellen
277
11 Contao maßgeschneidert – individuelle Anpassung von Websites
278
11.1 Einzelne Sprachlabels anpassen
278
11.1.1 Anpassung des Sprachlabels „Weiterlesen“
279
11.2 Einzelne DCA-Werte anpassen
281
11.2.1 HTML-Tags im Seitentitel erlauben
281
11.2.2 HTML-Tags in Überschriften erlauben
282
11.2.3 Felder der Mitgliederregistrierung anpassen
282
Index
284
© 2009-2024 ciando GmbH