Posted in
Joomla! -
Tools und Tipps
Pete hat mich aufmerksam gemacht, dass viele Fragen und Probleme im Forum nichts mit Joomla! an sich zu tun haben, sondern eher die Hilflosigkeit im Umgang mit CSS ausdrücken, wenn es im Joomla! Template oder bei der Anpassungen von Komponenten wiedermal im Layout klemmt.
Die folgenden 7 Schritte sollen aufzeigen, wie ich vorgehen würde um das Wesen und die Anwendung von Stylesheets zu verstehen, Tools kennen zu lernen, die mich beim CSS Schreiben unterstützen und die einschlägigen Anlaufstellen und Literatur im Netz zu orten, um sich letzendlich auch bei Joomla! in CSS Fragen sicher zu fühlen.
Schritt 1: Inspiration und Motivation
Um CSS Spezialist zu werden, lassen wir uns ein wenig Zeit und betrachten zuerst einmal, was alles möglich ist mit der Technik der Stylesheets. Die wohl bekannteste Adresse ist der ZEN Garden. Hier wird mittels CSS immer das gleiche HTML Dokument gelayoutet.
Weiter helfen uns sogenannte "CSS Galerien", wo Webdesigner Ihre Werke ausstellen und begutachten lassen.
Anbei ein paar Adressen um uns zu motivieren und um Eindrücke zu sammeln:
bestwebgallery.com, brdcast.net, ceeses.com cmsshowcase.com, coolsitecollection.com, css11.com, css20.com, cssanarchy.com, cssart.net, cssbased.com, cssbeauty.com, cssblue.com, cssburst.com, cssclip.com, csscollection.com, csscontainer.com, csscoosite.com, css-design-yorkshire.com, cssdrive.com, cssdump.com, csselite.com, cssexchange.com, cssflavor.com, cssfresh.com, css-galleries.com, css-gallery.co.uk, cssgallery.ro, cssglance.com, csshazard.com, cssheadtrip.com, cssheaven.com, cssimport.com, cssimpress.com, cssleak.com, cssliquid.com, csslove.net, cssnature.org, cssocean.com, csspinoy.com, cssprincess.com, cssremix.com, csssmoothoperator.com, csstux.com, cssvault.com, css-website.com, csszengarden.com, designbygrid.com, designfest.eu, designflood.com, designmeltdown.com, designshack.co.uk, designsnack.com, designsnips.com, designersource.net, designerspub.net, easyshare.com.cn, epreo.com, genuinestyle.net, gouw.nu, happycodr.com, inspirationking.com, lightondark.com, mostinspired.com, my3w.org, myvirb.net, netcocktail.com, onepixelarmy.com, per.fectio.net, plasticpilots.com, portfoliobase.com, prowebart.net, professionalontheweb.com, refreshlinks.org.uk, screenalicious.com, screenfluent.com, showcase.gr, showcasepoint.com, splench.com, standardsreboot.com/sites/judged, styleboost.com, stylecrunch.com, stylegala.com, styletheweb.com, submitcss.com, thebestdesigns.com, thedesignedtree.com, thedezine.com, w3csites.com, website-gallery.com, welovewp.com, webdesign-inspiration.com, webcreme.com, hotwebber.com, onestargallery.com, welovetxp.com, www.designexpanse.com, www.cssartillery.com, cssmania.com, oriental-gallery.com, creative-pakistan.com, alabrasil.com, faveup.com, zeniltuo.com, css-warfare.com
Warum Sie CSS lernen sollen? Ich gebe Ihnen 10 Gründe zur Motivation:
1. Entwickeln Sie Webseiten nach den Empfehlungen des w3c.
2. Ihre Seite wird schneller. Die Ladezeiten verkürzen sich massiv.
3. Sie entwickeln und warten schneller. Ändern Sie eine Eigenschaft einmal für hunderte von Unterseiten.
4. Kontrollieren Sie die ganze Typografie Ihrer Webseite in einem Dokument.
5. CSS ist einfach. Wer HTML schon kennt, kann auch bald CSS schreiben.
6. Verbesern Sie die Zugänglichkeit Ihrer Webseite durch eine bessere Struktur.
7. Mit CSS können Sie Ihre Webseite für verschiedene Medien, wie Print, Handhelds anpassen.
8. Saubere Trennung von Form und Inhalt. Denken Sie an das Redesign in 2 Jahren.
9. Verbesern Sie das Rankig in Suchmaschinen
10. Bilden Sie sich weiter.
Schritt 2: Gegenstand - Geschichte und Einführung
Nach dem wir uns also entschlossen haben unsere Weblayouts mit CSS zu bilden bzw. endlich die CSS Technik zu verstehen, müssen wir uns mit einführender Literatur eindecken und uns fleissig daran machen diese eingehend zu studieren.
Wichtig in diesem zweiten Schritt erscheinen mir folgende inhaltliche Punkte zu sein, welche verstanden werden sollten, bevor der nächste Schritt angegangen wird.
a) Defintion von CSS, Versionen
b) Einbindung von Stylesheets in mein HTML Dokument
c) Schreibweise (Syntax)
d) Vorhandene Selektoren, Eigenschaften und Werte
Einführungen:
http://de.selfhtml.org/css/index.htm
http://jendryschik.de/wsdev/einfuehrung/css/
http://www.webmasterpro.de/coding/article/css-einfuehrung.html
http://www.politnet.ch/css/
http://de.html.net/tutorials/css/default.asp
Um die Werkzeuge zu kennen braucht man Nachschlagewerke. Im Netz finden wir eine Häufung von Referenzen und sogenannten Cheatsheets.
Referenzen und Cheatsheets:
http://css.talky.de/e
http://css4you.de
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
http://reference.sitepoint.com/css
Schritt 3: Fortgeschrittene Techniken: CSS Layouts
Mittels CSS ganze Webseiten Layouts zu bauen, ist der nächste Schritt. Dazu müssen wir uns mit Positionierungsmöglichkeiten beschäftigen.
Folgende Punkte müssen hier verstanden sein:
a) Absolute und Relative Positionierung
b) Floating Techniken
c) Das Box Model
Links:
http://selfhtml.vtxnet.ch/css/layouts/einfuehrung.htm
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.brainjar.com/css/positioning/
http://www.css4you.de/wslayout1/index.html
http://politnet.ch/css/csstest_10_0.htm
http://www.thestyleworks.de/basics/disposfloat.shtml
http://www.intensivstation.ch/templates/
Eine weitere fortgeschrittene Methode ist es für die verschiedenen Browser verschiedene Stylesheets zu schreiben. Wir finden hier Informationen unter dem Stichwort Browserweichen. In diesem Zusammenhang beschäftigen wir uns auch mit dem Thema CSS Bugs, darunter versteht man die teilweise eigenartige Interpretation von CSS verschiedener Browser. Der IE6 ist hier ein ungern gesehener Mitstreiter und hat schon manchen Webdesigner zur Weissglut gebracht.
Links zu Browserweichen / bedingte Kommentare:
http://de.selfhtml.org/css/layouts/browserweichen.htm
http://www.mediaevent.de/css/conditionalComments.html
Links zu Bugs:
http://positioniseverything.net/explorer.html
http://www.positioniseverything.net/articles/ie7-dehacker.html
http://www.thestyleworks.de/tut-art/ie7.shtml
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
Schritt 4: Ordnung und Effizienz
Um unsere CSS Technik nun zu optimieren, beschäftigen wir uns mir der Kurzschreibweise. Das Stichwort ist hier CSS Shorthand und meint die Möglichkeit CSS Eigenschaften in gekürzter Form zu schreiben.
Informationen finden Sie hier zu CSS Shorthand:
http://www.dustindiaz.com/css-shorthand/
http://www.leigeber.com/2008/04/css-shorthand-cheat-sheet/
weitere Tips für die Organisation von Stylesheets:
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
Schritt 5: Tools für Webentwickler
Wer regelmässig mit CSS Sheets arbeitet, kennt die wilde Anpasserei. Es gibt Tools, die ich nicht wegzudenken wage weil diese das Arbeiten mit Stylesheets klar erleichtern.
Dazu gehören neben FTP Client, Texteditor auch weitere Werkzeuge wie die Firefox-Erweiterung Web Developper Toolbar und Firebug. Auflistungen von Tools gibt es genug. Anbei ein paar Links dazu:
Links zu Webentwicklertools
http://www.backtoessentials.com/css/the-ultimate-list-of-online-css-tools/
http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
http://www.allwebdesignresources.com/webdesignblogs/graphics/40-css-generators-creators-and-makers/
Schritt 6: Weiterführende Literatur im Netz
Eines hab ich in der Auseinandersetzung mit CSS klar gelernt: Probiere nicht zu lange aus, lese besser nach! Verwenden Sie Techniken, welche sich browserübergreifend bewährt haben. Schliesslich muss man nicht die gleichen Fehler nochmals machen und oft sind die Lösungen so schräg, dass man selbt nie drauf gekommen wäre. Ich meine damit nicht das die Kreativität in der Verwendung bestehender Lösungen auf der Strecke bleiben muss, aber bitte denken Sie daran, dass die meisten Ihrer Probleme schon gelöst worden sind. Folgende Seiten helfen Ihnen weiter:
http://www.cssplay.co.uk/
http://www.alistapart.com/
http://www.csshilfe.de/
http://cssglobe.com/
http://www.alvit.de/handbook/
http://www.noupe.com/category/css
http://sixrevisions.com/category/css/
http://www.webdesignerdepot.com/category/css/
http://www.drweb.de/magazin/tag/CSS/
http://www.456bereastreet.com/
Schritt 7: Zum Schluss zu Joomla!
In 6 von 7 Schritten haben wir nichts über Joomla! gesagt. Dies ist kein Zufall, weil CSS ja grundsätzlich eine Joomla! unabhängige Sache ist, deren sich die Templates teil mehr teils weniger stark bedienen. Die Entwickler von Joomla! haben aber verschiedene IDs und Classen fest vergeben bei der Ausgabe des Codes.
Es lohnt sich diese zu kennen bzw. eine Referenz dieser Selektoren bereit zu haben, wenn es darum geht Joomla! Templates zu entwickeln.
Joomla! 1.5
http://joomlakurse.ch/joomla-css-1.5.html
Joomla 1.0.X
http://joomlakurse.ch/joomla-css-1.0.14.html
http://www.joomlacssguide.com/content/category/4/13/45/
Wer sich bei programmierten Joomla! CSS ID's und Classen nervt, sollte sich mit dem Thema Overrides auseinandersetzen. Man hat damit in Joomla! 1.5 die Möglichkeit so ziemlich alles mit seinem Template anzustellen unabhängig von programmierten Code.
Fazit und Schlusswort
CSS Nerd wird man nicht von heute auf morgen, so viel ist sicher. Der Weg ist steinig und voller Enttäuschungen. Trotzdem geht einem bei einer Erkundungstour eine riesige und spannende Welt auf. Moderne Javascriptbibliotheken wie Mootools, jquery etc. funktionieren oft gemeinsam mit CSS, weshalb es sich lohnt schon die Grundzüge zu kennen.
Sollten Sie sich bis Schritt 7 tapfer durchgeschlagen haben und immer noch nicht genug haben, so empfehle ich den Ausblick ins Tal von CSS3 zu wagen.
Ergänzen Sie diese Sammlung mit Ihren Links in den Kommentaren. Wenn Sie diese Form von Artikel bei joomla.ch mögen, zeigen Sie uns dies ebenfalls mit einem Kommentar.
0 Kommentare