Contao für Webdesigner

Inhalt

1 Contao und die Open-Source-Kultur

1.1 Zum Begriff Open Source

1.2 TANSTAAFL oder „There ain’t no such thing as a free lunch“

1.3 Contao und Open Source

1.4 Engagieren und einmischen: Ihr Beitrag zur Open-Source-Kultur

2 Briefing & Projektplanung

2.1 Briefing

2.2 Projektplanung

2.2.1 Grundüberlegungen

2.2.2 Anforderungen an eine Website

2.2.3 Umfang einer Website

2.2.4 Zielgruppen der Website

2.2.5 Prozess

2.2.6 Prozessablauf

2.3 Methoden der Konzeption und Planung

2.3.1 Skizzen

2.3.2 Moodboards

2.2.3 Wireframes

2.3.4 Projektplanung mit dem Kunden

2.3.5 Frameworks als (Rapid-)Prototyping-Tool

2.3.6 Projektplanung intern/mit Dienstleistern

2.3.7 Werkzeuge für die Projektverwaltung

2.4 Best Practices

2.4.1 Updates ausführen

2.4.2 Fehlermeldungen während der Entwicklung einschalten

2.4.3 Cache-Funktionen während der Entwicklung ausschalten

2.4.4 Einheitliche Benennungen von Frontend-Modulen und Stylesheets

2.4.5 Updatesichere Lösungen einbauen

3 Checkliste für die Projektkalkulation

3.1 Fragenkatalog für ein Projekt

3.1.1 Projektbegleitende Themen

3.1.2 Konzeption

3.1.3 Inhalte und Formate

3.1.4 Funktionen

3.1.5 Dokumentation

3.1.6 Suchmaschinenoptimierung (SEO)

3.1.7 Schulung

3.1.8 Wartung und Backup

3.1.9 Updates

3.1.10 Vertragliches

3.1.11 Weitere Themen

3.2 Online-Tools und weiterführende ­Informationen zur Projektkalkulation

3.2.1 Die Website webkalkulator.com

3.2.2 Die iPhone-App Web Fee

3.2.3 Contao-Konferenz 2013: Session zur Projektplanung und Kalkulation

4 Der Contao-Kosmos im Überblick

4.1 Die Projekt-Website contao.org

4.2 Wichtige Nachrichtenquellen von Contao

4.2.1 Die Projekt-Website contao.org

4.2.2 Das Contao-Community-Forum

4.2.3 Contao auf Facebook

4.2.4 Contao auf Google+

4.2.5 Contao auf Twitter

4.2.6 Die Contao Association

4.2.7 Weitere Informationsquellen

4.3 Hilfe bei Problemen mit Contao

4.3.1 Das Contao-Community-Forum

4.3.2 Wie formuliere ich mein Problem?

4.3.3 Das Unterforum „Bezahlte Unterstützung (Kleine Aufträge)“

4.3.4 Das Unterforum „Contao-Stellenangebote“

4.4 Weitere Hilfequellen

4.4.1 Das Contao-Wiki

4.4.2 IRC-Chat

4.4.3 Contao-Partner

4.5 Fehlersuche und -meldung

4.5.1 Über das Contao-Community-Forum

4.5.2 Über die Contao-Online-Demo

4.5.3 Über Contao auf GitHub

5 Hilfreiche Tools für Webdesigner

5.1 Browser-PlugIns und AddOns

5.1.1 Web Developer Toolbar

5.1.2 Firebug für den Firefox-Browser

5.1.3 Developer Tools für den Firefox-Browser

5.1.4 Developer Tools für den Chrome-Browser

5.1.5 CacheStatus

5.1.6 Quick Locale Switcher

5.1.7 GridFox

5.1.8 960 Gridder

5.1.9 Contao-Tools

5.1.10 ColorZilla

5.1.11 ColorPick Eyedropper

5.1.12 Fireshot – das Screenshot-Tool

5.1.13 Webpage Screenshot – Screenshots mit Chrome

5.2 Tools zur Bildkompression

5.2.1 JPEGmini

5.2.2 RIOT (Radical Image Optimization Tool)

5.3 Tools für responsive Tests

5.3.1 Screencheck

5.3.2 Responsive Site View

5.3.3 Responsive Inspector

5.3.4 Adobe Edge Inspect

5.4 Weitere Test-Tools

5.4.1 Das Online-Tool Sauce Labs

5.1.1 Das Online-Tool BrowserStack

6 Contao-Erweiterungen – eine Auswahl

6.1 Das Newsletter-System Avisota

6.1.1 Funktionsumfang

6.1.2 Übersicht

6.1.3 Ausblick auf Avisota 2

6.1.4 Basis-Version von Avisota 2

6.1.5 Feature-Complete-Version von Avisota 2

6.2 [dk_carouFredSel]

6.2.1 Möglichkeiten von carouFredSel

6.2.2 Implementation in Contao

6.2.3 Installation und Einrichtung

6.2.4 Konfiguration und Einbindung

6.2.5 carouFredSel mit Inhaltselementen einsetzen

6.2.6 carouFredSel als Modul einsetzen

6.2.7 Praxistipps für den gelungenen Einsatz Ihres carouFredSel-Karussells

6.3 [dk_masonry]

6.3.1 Möglichkeiten der Erweiterung Masonry

6.3.2 Installation und Einrichtung

6.3.3 Beispiel

6.4 [dk_mmenu]

6.4.1 Installation und Einrichtung

6.4.2 Möglichkeiten der Erweiterung mmenu

6.4.3 Beispiel

6.5 [easy_themes] EasyThemes

6.5.1 Modus Kontextmenü & MouseOver

6.5.2 Modus Backend-Module

6.5.3 Modus DOM-Inject

6.6 EFG (Erweiterter Formulargenerator)

6.6.1 Was kann der EFG?

6.6.2 Erstellen des Formulars und Eingabe der Inserttags

6.6.3 Anzeige des Kontaktformulars als zweispaltige Version

6.7 Isotope eCommerce

6.7.1 Überblick über die Funktionen

6.7.2 Beispielhafte Umsetzungen/Referenzen

6.8 MetaModels

6.8.1 Was MetaModels kann

6.8.2 Die MetaModels-Demo

6.8.3 Überlegungen und Anregungen zum Einsatz von MetaModels

6.8.4 Ausblick

6.9 [responsive_images]

6.9.1 Konfiguration

6.10 Spaltenset/Subcolumns

6.10.1 Historie und Ausblick

6.10.2 Bedienung für Administratoren

6.11 Tabcontrol

6.11.1 Installation und Konfiguration

6.11.2 Beispiele aus der Praxis

6.12 Backend-Helfer

6.12.1 m17-sticky-backend-footer

6.12.2 ThemeTab

6.13 TinyMCE-Customizer

6.13.1 Konfiguration

6.13.2 Verwendung

7 Contao-Kochbuch

7.1 Individuelle Scrollbalken mit jQuery

7.2 Integration von Icon-Fonts

7.2.1 Installation der Icon-Fonts in Contao

7.2.2 Anwenden der Icon-Fonts

7.2.3 Icon-Fonts in TinyMCE verwenden

7.2.4 Nicht alle Icons eines Icon-Fonts nutzen

7.3 Anpassung der Nachrichten-Templates: Datum und Uhrzeit

7.3.1 Standard-Templates ansehen

7.3.2 Standard-Templates anpassen

7.3.3 Standard-Templates anpassen: Nachrichtentitel und Datum einzeilig

7.3.4 Standard-Templates anpassen: Nachrichtentitel und Datum einzeilig, getrennt

7.3.5 Darstellung von Tag und Monat wie Kalenderblatt

7.3.6 Feinschliff

7.4 Ausgabe der Syndikations-Icons: ­Anpassung des Artikel-Templates

7.5 Individuelle Social-Media-Bars erstellen

7.6 Anpassen der Akkordeon-Elemente

7.7 Beispiele für den Einsatz von Inserttags, Mehrsprachigkeit iflng

7.7.1 Praxisbeispiel

8 Beispielprojekt: Die Erstellung einer Website

8.1 Aufbau der Website

8.1.1 Anlegen der Seitenstruktur

8.1.2 Seitenlayout anlegen

8.1.3 Weitere Vorbereitungen treffen

8.1.4 Icon-Fonts einbinden

8.1.5 Frontend-Module anlegen

8.1.6 CSS anlegen und einsetzen

8.1.7 Fixierter Header

8.1.8 Die Erweiterung dk_carouFredSel

8.1.9 Weitere Inhaltselemente anlegen

8.1.10 Akkordeon anlegen

8.1.11 Kontaktadresse und -formular erstellen

8.1.12 Sticky Footer

8.1.13 Icon-Fonts einbauen

8.1.14 Die Erweiterung responsive_images

8.1.15 Mach mal passend – die Website responsiv machen

8.1.16 Einbinden eines Homescreen-Icons für ein Lesezeichen auf Tablets und Smartphones

9 Suchmaschinen­optimierung (SEO)

9.1 Suchmaschinenrelevante Einstellungen

9.2 Schlüsselwörter vergeben

9.3 Auszeichnungen überprüfen

9.4 URLs umschreiben

9.5 Eine Sitemap in Contao erzeugen

9.6 Die Sitemap bei Google anmelden

9.7 Webstatistiken

9.7.1 Google Analytics in Contao verwenden

9.7.2 Piwik in Contao verwenden

10 Checkliste für die Website-Veröffentlichung

10.1 Contao in einem Unterverzeichnis

10.2 Anpassung in den Einstellungen und der .htaccess-Datei

10.3 Wurden suchmaschinenrelevante Einträge vorgenommen?

10.4 Wurde ein Sprachen-Fallback ­eingerichtet?

10.5 Validieren des Quellcodes und der CSS-Dateien

10.6 Interne und externe Links überprüfen

10.7 E-Mail-Adressen im Backend kontrollieren

10.8 Testen der Webseiten mit den gängigsten Browsern

10.9 Workflow zum Abschluss eines Projektes

10.10 Eine Sammlung von Code-Snippets erstellen

11 Contao maßgeschneidert – individuelle Anpassung von Websites

11.1 Einzelne Sprachlabels anpassen

11.1.1 Anpassung des Sprachlabels „Weiterlesen“

11.2 Einzelne DCA-Werte anpassen

11.2.1 HTML-Tags im Seitentitel erlauben

11.2.2 HTML-Tags in Überschriften erlauben

11.2.3 Felder der Mitgliederregistrierung anpassen

Index