• Save
Contao und CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Contao und CSS

on

  • 15,116 views

Vortrag auf dem Usertreffen 2010 in Essen. Contao hieß damals noch TYPOlight.

Vortrag auf dem Usertreffen 2010 in Essen. Contao hieß damals noch TYPOlight.

Statistics

Views

Total Views
15,116
Views on SlideShare
14,411
Embed Views
705

Actions

Likes
4
Downloads
0
Comments
1

6 Embeds 705

http://www.little-boxes.de 310
http://www.slideshare.net 250
http://little-boxes.de 132
http://www.littleboxes.info 10
https://duckduckgo.com 2
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • +1 für matrix slides !
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Contao und CSS Presentation Transcript

  • 1. Contao und CSS
    Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp://pmueller.de/
  • 2. Diese Folien bildeten die Grundlage für einen Vortrag, den ich am 15. Mai 2010 auf dem Usertreffen in Essen gehalten habe. Direkt danach hat Leo Feyer die Umbenennung von TYPOlight in Contao bekannt gegeben.
    Die Folien sind nicht alle selbsterklärend und es fehlen sowohl der Ton als auch die Live-Demos im Backend von Contao. Es fehlt auch der Unterhaltungswert eines lebendigen Vortrages.
    Wer den Vortrag erlebt hat, dem mögen die Folien zur Erinnerung dienen. Allen anderen geben Sie vielleicht einen kleinen Einblick in die Arbeit mit „Contaound CSS“.
  • 3. Peter Müller
    IT-Dozent
    Fachbuchautor
    Little Boxes 1
    Little Boxes 2
    Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing
  • 4. 1. First Contact: Contao und CSS
    2. Das Contao CSS-Framework
    3. Interne Stylesheets
    4. Externe Stylesheets
    5. Teamwork: Intern und extern kombinieren
    6. Contao und externe CSS-Frameworks
    7. Die Matrix: Vier Entscheidungen
    Inhalt
  • 5. … bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul …
    Leo im Handbuch, S. 82
  • 6. Stylesheets – Der erste Eindruck
    Interner CSS-Editor
    Der sich den Wolf klickt
    Stylesheets importieren
    xBrowser_style_schiet
    CSS-Dateien im Rootordner
    Entfernt die Zähne samt Belag
  • 7. Something that really bothers me about the internal CSS editor is:
    I don't use it at all. What a pity.
    Thyon im Forum2007-11-29
  • 8. Die Lösung
  • 9. Das Ergebnis
  • 10. ... bin ich auf das Contao-Framework umgestiegen, da es damit dann doch noch mal eine Ecke schneller geht, eine neue Site aufzusetzen.
    hschottm im Forum2008-09-01
  • 11. Inhalt
  • 12. Was ist ein Framework?
    Ein Framework ist eine Sammlung von Werkzeugen, Bibliotheken, Konventionen und bewährten Praktiken, die regelmäßig anfallende Aufgaben in allgemeine, wiederverwendbare Module zu abstrahieren versucht.
    Jeff Croft im Juni 2007http://alistapart.com/articles/frameworksfordesigners
    CSS-Frameworks sind Waschmaschinen für Browserbugs.
  • 13. Das Contao CSS-Framework: Technik
    Der Kern
    Seitentemplate fe_page.tpl
    $this->framework
    $this->stylesheets
    $this->head
    if($this->header|left|right|footer) : endif
    Stylesheet system/contao.css
    Stylesheet system/iefixes.css
    Die Erweiterung
    basic.css
    gridpx.css oder gridpc.css
  • 14. Das Contao Framework: Benutzersicht
    $this->framework
    $this->framework
    1
    2
  • 15. $this->framework
    $this->stylesheets
    4
    3
  • 16. Inhalt
  • 17. Das Backend-Modul Stylesheets
    Verwaltet interne Stylesheets
    speichert Stylesheets in der Datenbank
    ohne Datei-Endung *.css
    Generiert CSS-Dateien automatisch
    im Hauptordner („Root“)
    komprimiert, ohne Kommentare
    Einbahnstraße
    Backend-ModulStylesheets
    Datenbank
    CSS-Datei im Root
  • 18. Der interne CSS-Editor
    CSS per HTML-Formular
    Gut geeignet für ungeübte CSS-Schreiber
    Maus und Tastatur kombinieren
    Praktisch
    Wiederherstellen vorheriger Versionen
    Textarea „Eigener Code“
    Styles ausblenden per „Augen-Klick“
    Einige Einschränkungen
    padding und margin: nur eine Einheit für alle Seiten
    border: nur eine Farbe für alle Seiten
    background-position: keine Werte möglich
  • 19. Backend-Modul Stylesheets • CSS-Import
    CSS-Dateien importieren
    Externe CSS-Dateien => interne Stylesheets
    Müssen unterhalb von tl_files liegen
    Dateien werden zu Datensätzen
    basic.css wird zu basic
    Einige Einschränkungen
    Farbnamenwhite => #white
    Keywords font-size: small geht nicht => 81.25% oder 13px
    Kurzschreibweisen border: 1px solid #f00 geht, alles andere nicht
  • 20. Interne Stylesheets bearbeiten: Suchen und Filtern
    Selektoren suchen
    Feld Suchen • Selektor
    zeigt nur Styles mit diesem Selektor
    Anzeige der Anzahl rechts oben beachten
    Kommentare
    Damit ich auch morgen noch weiß, was ich mir heute dabei gedacht habe.
    Kategorien erstellen
    Feld Filtern
    Bezeichnungen selbst ausdenken
    Beispiel: „Layout“, „Navigation“, „Formulare“ etc.
    zeigt nur Styles mit dieser Kategorie
    zuweisen mit Mehrere bearbeiten nützlich
  • 21. Die Erweiterung [csseditor]
    Interne Stylesheets bearbeiten
    im Quelltext, speichert in die Datenbank
    kompatibel mit internem CSS-Editor
    Nach der Installation
    System • Einstellungen • CSS Editor settings
    Backend-Modul Stylesheets • Neues Symbol
    Einige Einschränkungen
    Reihenfolge der Deklarationen im Style wird geändert
    padding und margin: gemischte Einheiten problematisch
    doppelte Deklarationen werden manchmal entfernt
    ausgeblendete Styles werden nach Speichern entfernt
  • 22. Integration mit Backend-Modul Seitenlayout
    Interne Stylesheets
    a
    a
    a
    a
    1. Kopf- und Fußzeile
    2. Spaltenkonfiguration
    3. Stylesheets einbinden
    4. Statisches Layout
  • 23. Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor].
    Juke im Forum2009-12-14
  • 24. Inhalt
  • 25. Externe Stylesheets: CSS außerhalb der Datenbank
    Definition
    CSS-Dateien mit der Endung *.css
    unterhalb von tl_files gespeichert
    Backend-Modul Stylesheets ist arbeitslos
    Bearbeitung
    Nicht mit dem internen Editor oder [csseditor]
    Beliebiger externer Editor
    lokal bearbeiten und per FTP hochladen
    im Editor per FTP direkt auf dem Webspace
    Backend-Modul System • Dateiverwaltung
  • 26. Externe Stylesheets verwalten und einbinden
    Verwaltung vereinfachen
    Zentrales Stylesheet erstellen: tl_fileslayoutzentrale.css
    CSS-Dateien per @import in zentrale.css einbinden
    Medientyp in CSS-Dateien per @media
    Im Seitenlayout einbinden
    Backend-Modul Seitenlayout • Zusätzliche Head-Tags via $this->head
    direkt im Seitentemplate fe_page.tpl
    CSS-Framework kann genutzt werden
  • 27. Integration mit Backend-Modul Seitenlayout
    Externe Stylesheets
    a
    a
    a
    a
    1. Kopf- und Fußzeile
    2. Spaltenkonfiguration
    3. Stylesheets einbinden 1
    x
    4. Statisches Layout
    1 Die Erweiterung [stylesheets_external] ermöglicht das Einbinden von Stylesheets im Backend-Modul Seitenlayouts. Womit auch Punkt 3 im grünen Bereich wäre.
  • 28. Inhalt
  • 29. Interne und externe Stylesheets
    Nacheinander
    Mit externen Stylesheets entwickeln
    Vor dem Launch importieren
    Nach dem Launch intern pflegen
    Als Ergänzung
    Externe Stylesheets als Basis
    Zusätzliche interne Stylesheets
    Kunden können so einfache Änderungen machen
    Stylesheet tinymce.css für den TinyMCE
    Reihenfolge bei der Einbindung
    interne Stylesheets nach externen
  • 30. Interne Stylesheets extern bearbeiten: Mischmasch
    Bearbeitung der CSS-Dateien im Root
    mit externem Editor
    mit Firebug oder Edit CSS von der Web Developer Toolbar
    Problem Einbahnstraße
    CSS-Dateien von Root in tl_files kopieren und importieren
    Styles via Zwischenablage in [csseditor] kopieren
    Nachteil
    Keine Kommentare im CSS
    Keine Kategorien in internen Stylesheets
  • 31. Inhalt
  • 32. Externe CSS-Frameworks
    Beispiele
    YAML CSS-Framework
    960 Grid System
    Blueprint
    Gründe
    Gewohnte Umgebung
    Implementierungen auch für andere CMSysteme
    Mehr Features bei z. B. flexiblen Layouts und Formularen
    Voraussetzungen
    Angepasstes Seitentemplate statt fe_page.tpl
    Externe Stylesheets unterhalb von tl_files
    Einbindung der Stylesheets manuell (ohne $this->framework)
    Nachteile
    Backend-Modul Seitenlayout liegt teilweise brach
  • 33. Integration mit Backend-Modul Seitenlayout
    Externe CSS-Frameworks
    1. Kopf- und Fußzeile
    2. Spaltenkonfiguration
    3. Stylesheets einbinden
    x
    x
    x
    x
    4. Statisches Layout
  • 34. Inhalt
  • 35. Die Matrix: Vier Entscheidungen
    Seitentemplate
    Editor
    Speicherort
    CSS-Framework
    fe_page
    fe_*
    intern
    extern
    DB/root
    tl_files
    Contao
    anderes
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a




    Interne Stylesheets



    Interne Stylesheets,
    extern bearbeiten
    Externe Stylesheets




    Externes CSS-Framework




  • 36. Vielen Dank für Ihre Aufmerksamkeit.
    pmueller.dewebsites-erstellen-mit-contao.de
    Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing