Tag: CSS

PHP Stylesheet CSS

Tuesday, 25. November 2008 / / 0 Comments

Wie bereits in den 5 Tipps für eine schnellere Webseite beschrieben sollte man soviel Code wie möglich in die CSS Datei auslagern. CSS Dateien haben, genauso wie HTML nur einen Nachteil, man kann keine Logik implementieren. In PHP ist dies jedoch möglich. Außerdem kann PHP so tun als sei es CSS.

[php]

[/php]

In HTML wird es wie eine CSS Datei eingebunden.

[html] [/html]

Manche Kunden möchten gerne das jede Kategorie eine andere Farbe hat. Bevor man jetzt anfängt 10 verschiedene Stylesheet Dateien anzulegen, wäre es einfacher jedes Design in ein anderen Ordner zu legen und diesen per GET zu übergeben.

[html] [/html]

Um das Stylesheet übersichtlich zu gestalten, sollte man wirklich nur den Dynamischen Teil in eine PHP CSS Datei auslagern. Die untere CSS Datei würde wie folgt aussehen:

[css]

/* NUR FUER FARBEN UND HINTERGRUENDE */
/* DER REST ALLES IN STYLESHEET.CSS */

/* KOPF */

#kopf {
background-image:url(kopf/header_start.jpg);
background-repeat:no-repeat;
height: 220px;
}
[/css]

In der Codevorschau ist dieses Beispiel sehr bunt. Wer jedoch solche Dateien mit VI bzw. VIM erstellt, wird jedoch enttäuscht werden, weil der Editor das Syntaxhighliting aufgrund der Dateiendung entscheidet. Dies kann man jedoch manuell auf CSS umschalten. Danach ist der PHP Code zwar schwarz, aber die Datei sollte auch hauptsächlich aus CSS bestehen.

Wer in seinem VIM-Menü verzweifelt nach CSS sucht, wird unter Cascading Style Sheets fündig.

5 Tipps für eine schnellere Webseite

Friday, 21. November 2008 / / 0 Comments

Immer wieder trifft man im Internet auf Homepages, bei denen man anfängt an der eigenen Internetverbindung zu zweifeln. Mal läd sich nur der Titel und die Seite bleibt weiß oder nur die Hälfte wird geladen und auch nach mehrmaligen Drücken von Strg + F5 passiert nichts. Bei jedem Klick auf die nächste Seite hat man Angst, dass das Warten wieder von neuem beginnt.

Dabei liegt es im eigenen Interesse eines jeden Webseitenbetreibers die Ladezeiten möglichst gering zu halten, denn jedes aufrufen beansprucht Serverressourcen und kostet Traffic.

1. Outsourcen
Bereits bei der Entwicklung einer Homepage sollte man drauf achten, soviel Skript (CSS, JavaScript) in andere Dateien auszulagern. Diese werden vom Browser gecached und beim erneuten Aufrufen nicht nochmals heruntergeladen.

2. Bilder verkleinern
Die heutigen Digitalkameras machen Fotos mit 8 Megapixeln und mehr. Diese Qualität und Größe wird im Internet aber nur selten gebraucht. Oft sind die Fotos einige Megabyte groß. Man sollte die Bilder bevor man sie auf der Homepage einbindet auf die benötigte Größe verkleinern und ggf. die Qualität auf “Web” oder ähnliches stellen. So lassen sich oft 80% und mehr einsparen.

3. Wiederholende Bilder
Besonders bei Farbverläufen braucht man nicht eine unendlich große Grafik nehmen, damit man bei keiner Auflösung einen weißen Rand hat, sondern man sollte nur einen 1px großen Streifen nehmen und diesen wiederholen. Dadurch wächst er automatisch mit und es gibt keinen nervigen Rand.

4. Färben statt kacheln
Bei vielen farbigen Hintergründen sollte man sich überlegen ob es überhaupt notwendig ist eine Grafik einzubinden oder ob man nicht besser mit background-color arbeitet.

5. Wenige große Dateien
Bevor man anfängt ein Bild klein zuschneiden und es später in einer Tabelle wieder zusammenbaut, wäre es vielleicht sinnvoller das Bild einfach als Hintergrund zu definieren. Für jede extra Datei wird immer eine Verbindung ausgehandelt bevor diese übertragen wird. Dieser Overhead fällt bei ein paar großen Dateien weg.

Sollte sich die Webseite immer noch im Schneckentempo aufbauen, kann man mit Google Chrom standardmäßig und der Extension Firebug für Firefox analysieren, welche Datei wie lange zum Laden braucht.

mm_forum Designvorlage / Stylesheet

Tuesday, 18. September 2007 / / 1 Comment

Die Extension mm_forum befindet sich zwar noch im Beta Status, aber weil Typo3.net darauf basiert, vertraue ich jetzt einfach mal den Entwicklern. Fehlermeldungen sieht man eigntlich nur beim Einrichten, weil manchmal einfach noch IF Abfragen fehlen und so natürlich die Prüfung nach dem Config File fehlschlägt, weil man noch nichts konfiguriert hat.

Die Anleitung ist im Moment auch nur als Open Office File verfügbar und wenn man sich die Mühe macht, sich Open Office zu installieren, falls man es noch nicht hat, wird man mit tollen Screenshots belohnt. Wenn man dann dagegen sein eigenes Forum anschaut ist man etwas enttäuscht. Das liegt dann einfach daran, weil das Stylesheet nicht richtig eingebunden wird.

Dies kann man einfach beheben in dem man ins Setup folgenden Code einfügt
[code]
seite.includeCSS.file2 = typo3conf/ext/mm_forum/res/tmpl/default/css/mm_forum.css
[/code]

Danach erstrahlt das Forum in neuem Glanz.

[random_content group_id=”211″ num_posts=”1″]