WordPress & Webwork » PHP & JS

Javascript: ein ganz einfaches Toggle-Script

Vladimir — Sat, 06 Oct 2012 12:21:25 +0000

Ich war neulich auf der Suche nach einem ganz einfachen Toggle-Script. Unter Toggle-Scripten versteht man Lösungen, die auf Klick den versteckten oder den Rest des Inhaltes anzeigen. Das ist eine platzsparende Lösung, die häufig in langen Listen oder in FAQ-Bereichen eingesetzt wird.

Toggle-Lösungen gibt es wie Sand am Meer und einige stehen kurz davor auch Kaffee kochen zu können. Leider ist dann auch entsprechend der Umfang der Dateien.

Daher war ich auf der Suche nach etwas ganz einfachem und nach Möglichkeit, sollte die Lösung auch ohne die Einbindung einer zusätzlichen Javascript-Bibliothek auskommen.

Nach ein bisschen Suche habe ich eine sehr einfache Lösung gefunden, die mit wenigen Zeilen Code auskommt. Ich habe es leicht an meine Bedürfnisse angepasst und nun funktioniert es auch mit dem Internet Explorer.

Hier dazu der Code und die Demo auf jsFiddle:

Die Lösung hat zwar ein paar Jährchen auf'm Buckel, funktioniert aber noch in den gängigen Windows-Browsern: IE9, Firefox 15, Chrome 22 und Opera 12.

Chico UI: komfortabel Funktionen für Websites nachrüsten

Vladimir — Wed, 01 Aug 2012 12:16:08 +0000

Chico UI ist eine Sammlung von Tools um recht einfach Funktionen für eine Website nachzurüsten. Du brauchst eine Dropdown-, Akkorden- oder Tab-Navigation? Dann findet du bei Chico UI erprobte Lösungen.

Neben diesen Funktionen findest du hier auch u.a. einen Bilder-Slider, einen Kalender-Widget und eine CSS-Bibliothek. Bei der CSS-Bibliothek sind die gängigen HTML-Elemente gestylt, es sind CSS-Icons definiert…

… sowie Nachrichten-Boxen, Seitenumbruch-Links und Tabellen.

Google aktualisiert seine Styleguides für HTML, CSS und Javascript

Vladimir — Wed, 18 Jul 2012 20:22:55 +0000

Styleguides ("Gestaltungsrichtlinien") werden zum Beispiel von größeren Firmen erstellt, damit auch externe Dienstleister nach den "gleichen Regeln" arbeiten, wie die internen Entwickler. Styleguides sind u. a. dann sinnvoll wenn zwei oder mehrere Freelancer zusammenarbeiten, damit man sich auf gemeinsame Regeln einigt.

Sie sind aber auch eine interessante Inspirationsquelle, damit man sieht wie andere arbeiten und da sie in der Regel auf Erfahrungswerten basieren, kann man an Hand solcher Regelwerke, dass eine oder andere lernen.

Auch Google listet solche Gestaltungsrichtlinien und hat vor ein paar Tagen die Styleguides für HTML, CSS und Javascript aktualisiert.

Unter anderem empfiehlt Google bei CSS auf Browser-Hacks zu verzichten, wo es möglich ist, die Kurzschreibweise zu verwenden, auch die letzte Deklaration mit Semikolon zu beenden und die Deklarationen eines Blocks alphabetisch zu sortieren.

Gefunden auf Sitepoint.

Schachspiel als 1 Kbyte großes Javascript

Vladimir — Mon, 16 Jul 2012 16:01:17 +0000

Obwohl ich schon sei 15-16 Jahren im Web unterwegs bin, so gibt es dennoch immer wieder Kleinigkeiten, die mich zum staunen bringen. Diesmal handelt es sich um ein Schachspiel das im Browser läuft. Das ist schon lange nichts mehr besonderes.

Das besondere an diesem Spiel ist, dass es auf einem Javascript aufbaut, dass nur 1 KByte groß ist … um genauer gesagt ganze 1023 Byte.

Entstanden ist das ganze im Rahmen des "1k Javascript demo contest". Gut, in Punkto Funktionalität und Komfort, kann es nicht mit den ausgewachsenen Programmen mithalten. Aber man kann dennoch eine Partie Schach gegen einen Gegner spielen, den man nicht unterschätzen sollte.

Gefunden auf Google+

WordPress: Anzahl der Artikel & Kommentare anzeigen

Vladimir — Thu, 10 May 2012 13:48:17 +0000

Wie ich im Footer dieser Website die Anzahl der veröffentlichten Artikel, Kommentare und Kategorien ausgebe habe ich schon mal im Dezember letzten Jahres geschrieben.

Ich musste aber den Code von damals leicht anpassen und hier ist das neue Ergebnis:

Artikel: publish; echo number_format($nr_art, 0, '', '.'); ?>
Kategorien: 
Kommentare:

Der ursprüngliche Code hat nicht mehr funktioniert seit dem Serverwechsel. Ich vermute mal das lag daran, dass ich vorher PHP 5.2.x und jetzt PHP 5.3.12 und somit verursachten die Parameter-Angaben des alten Codes Fehlermeldungen.

Hier noch einmal die entsprechende Stelle im alten Code:

echo number_format($nr_art, '', '', '.')

Mit number_format formatiert man eine Zahl: Anzahl der Dezimalzeichen, Dezimaltrennzeichen und der Tausender-Trennzeichen. Gibt man (k)einen Parameter an echo number_format($nr_art), dann greift PHP hier auf die Standardangaben zurück und das heißt: Komma als Tausender-Trennzeichen und Punkt als Dezimaltrennzeichen … genau umgekehrt wie im deutschen und einigen anderen Ländern von Kontinentaleuropa.

Daher muss der entsprechende Abschnitt in meinem Fall so ausschauen:

echo number_format($nr_art, 0, '', '.')

Das heißt übersetzt: gebe die Zahl aus, ohne Nachkommastellen – was auch logisch ist, da es keine Viertelkommentare und Drittelartikel gibt – ohne Dezimaltrennzeichen, aber mit Punkt als Tausender-Trennzeichen.

Und wo lag jetzt genau der Fehler gegenüber der alten Version?


// alt
echo number_format($nr_art, '', '', '.')

// neu
echo number_format($nr_art, 0, '', '.')

Ich hoffe die Hervorhebung ist deutlich genug. Das PHP auf dem neuen Server störte sich am zweiten Parameter. Anstatt einem leeren Wert ('') wird eine Zahl erwartet.

Codepad: (PHP-) Code online testen

Vladimir — Sat, 15 Oct 2011 12:27:00 +0000

Nehmen wir mal an du arbeitest gerade an einem fremden Rechner, dieser ist spartansich eingerichtet und du musst auf die schnelle PHP-Code testen. Oder ein Kollege hat eine Frage zu einem Perl-Skript und du brauchst etwas wo man das Skript testen kann und worauf ihr beide zugreifen könnt. Für solche Fälle gibt es so Dienste wie codepad:

Man gibt in die Textbox seinen Code ein, neben PHP und Perl werden noch u.a. noch C, C++, Python und Ruby unterstützt. Man hat die Möglichkeit das Code-Beispiel als privat zu markieren und dieser ist nur dann erreichbar wenn man den Permalink zu dem Beispiel kennt. Nach dem du auf Submit klickst wird der Code ausgeführt und auch der Permalink zu dem Beispiel generiert:

Nützliches Webwork-Tool.

Javascript: sanftes Scrollen bzw. nach oben Springen

Vladimir — Thu, 11 Aug 2011 07:46:53 +0000

Auf vielen Websites gibt es am Ende von lange Seiten einen Link, der wenn man ihn anklickt einen auf den Anfang der Seite "springen" lässt. Am einfachsten realisiert man einen solchen Link, wenn man als Ziel lediglich das Rautenzeichen als Ziel angibt:

Nach oben springen

Man kann aber auch auf schon existierende IDs verweisen:

...
...
Nach oben springen

Hierbei dient das Universalattribut id sowohl als Ansatzpunkt für die CSS-Regeln als auch für Seiten-interne Verweise: #kopfbereich ist damit Sprunganker und Selektor.

Nicht springen sondern scrollen

Wenn man auf so einen Ankerverweis klickt, dann gelangt man sofort nach oben bzw. zu der definierten stelle. Manchmal wünscht der Kunde oder Grafiker, dass nicht gesprungen sondern gescrollt wird. Hier kommt dann Javascript ins Spiel.

Für ein aktuelles Projekt, war so ein sanftes springen bzw. scrollen gewünscht. Da die Website sonst kein Javascript oder Javascript-Bibliotheken im Einsatz hat konnte ich nicht auf Lösungen zurückgreifen, die auf jQuery & Co. basieren. Alleine wegen ein bisschen Scrollen bis zu 90 KByte extra einzubauen ist doch auch irgendwie albern.

Daher habe ich nach einer "Standalone"-Lösung gesucht. Nach etwas Suchen und ein paar Tests habe ich mich für die Lösung auf kryogenix.org entschieden. Einer der Gründe ist, dass ich nicht extra Anker mit der veralteten Methode () definieren musste (wie einige andere Testkandidaten das verlangt haben) sondern auf schon existierende id-Attribute zurückgreifen konnte.

[Nachtrag] da einige Leute längere Texte nicht lesen möchten, kommt hier eine Anmerkung. In jedem Browser kann man auf #ankername verweisen und der Browser springt dorthin: egal ob man den Ankernamen mit einer ID (id="ankername") oder mit dem veralteten Attribut name (name="ankername") definiert wurde. Das habe ich auch im ersten Teil des Artikels beschrieben.

Aber es gibt draußen aber ein paar JAVASKRIPTE! (nicht vergessen: das Thema ist scrollen statt springen) die kommen mit ids nicht klar und verlangen einen Anker der per name definiert ist, damit die Ihre Wirkung – scrollen anstatt springen – entfalten können. Deswegen habe ich das vorgestellte Skript als positiv hervorgehoben, weil das Skript mit schon vorgegeben ids zu Recht kommt.[/Nachtrag ende]

Ich habe den Code im Original hier hochgeladen: Sanftes Scrollen (javascript, 4,56 kbyte), falls es die Seite mal nicht geben sollte. Ist mir leider schon ein paar mal passiert, dass es Websites mit nützlichen Code-Fragmenten irgendwann nicht mehr gab.

Wenn man den Code durch einen Komprimierer schickt, dann kann man ihn um einiges kleiner machen. Ich habe drei Komprimierer getestet, aber bei allen hat der Javascript hinterher nicht funktioniert. Bei jscompress.com erreichte ich ein positives Ergebnis. Das Script war danach nur 1,94 kbyte groß und hat auch funktioniert: Download (javascript, 1,94 kbyte).

Und was ist mit der Tastatur

Ich persönlich brauche keine Links auf der Website, die mich nach oben springen oder scrollen lassen und benutze die auch nie. Mal abgesehen von der Scrolltaste auf der Maus nutze ich folgende Tasten auf der Tastatur:

pos1: an Anfang der Seite springen
ende: an Ende der Seite springen
bild⇑: in jeweils der aktuellen Höhe des Browserfensters nach oben springen
bild⇓: in jeweils der aktuellen Höhe des Browserfensters nach unten springen

Aber das ist meine Vorliebe und die muss sich nicht immer mit der Vorliebe des Kunden decken.

Ach ja, wer was besseres, cooleres, einfacheres oder kleineres kennt, nur her damit.

Gastartikel: Smarty: PHP-Templates für Designer

Vladimir — Wed, 06 Apr 2011 10:06:32 +0000

Dieser Gastartikel stammt von Matthias Mees. Vielen Dank dafür.

Die PHP-Templateengine Smarty polarisiert. Entwickler, die an Projekten, die Smarty einsetzen, beteiligt sind, schwören auf die Vorteile – andere Entwickler argumentieren üblicherweise (technisch absolut zu Recht), PHP selbst sei bereits eine Templatenengine und ein zusätzlicher "Aufsatz" somit unnötiger Ballast.

Was ist Smarty überhaupt?

Smarty ist eine Art "Basic-PHP für Designer". Die verwendeten Templatedateien sind im Wesentlichen HTML-Dateien, die mehr oder weniger komplexe Platzhalter enthalten, welche durch dynamische Inhalte ersetzt werden. Ergänzend stellt Smarty zudem komplexere Strukturen wie Schleifen, if-Abfragen oder Funktionen bereit und ermöglicht das Einbinden externer Dateien ebenso wie die Definition eigener Konstanten. Die Smarty-Syntax ist an PHP angelehnt, aber vereinfacht.

Wer setzt es ein?

Zu den bekannteren Open-Source-Projekten, die auf Smarty setzen, gehören:

Aber die Performance…

Es ist nicht wegzudiskutieren, dass Smarty einen gewissen Overhead erzeugt, der zu Lasten der Performance geht. Als Kompensation werden die Templates in PHP-Code vorkompiliert, optional kann zusätzlich ein Caching-Mechanismus eingesetzt werden. Zusätzlich kann es sich lohnen, auf bestimmte verzögernde Features zu verzichten, z. B. Rechenoperationen in Smarty oder das Inkludieren zusätzlicher Subtemplates.

Dennoch sind Smarty-Templates selbst unter idealen Bedingungen natürlich niemals schneller als reine PHP-Ausgabe – ganz logisch bei einem "Aufsatz". Die Performance ist aber auch nicht das Auswahlkriterium für Smarty.

Teile und gestalte

Smarty ist nicht für jedes Projekt die richtige Wahl. Die Entscheidung, den zusätzlichen Overhead in Kauf zu nehmen, kann "philosophischer" oder ökonomischer Natur sein.

Moderne Webentwicklung trennt Struktur, Gestaltung und Verhalten. In der Praxis bedeutet das, dass CSS-Anweisungen und Javascripts in externe Dateien ausgelagert und im HTML-Markup eingebunden werden. Ebenso sollten reines Markup und
Programmcode getrennt sein, was in reinen PHP-Templates kaum möglich ist – in Smarty schon. Templateautoren werden bestimmte Inhaltsbausteine in Variablen übergeben, zudem erhalten sie einfach benutzbare Werkzeuge, mit welchen sie diese
(innerhalb bestimmter Grenzen) modifizieren können.

Wirklich gut geeignet ist Smarty für Projekte, in denen reine Programmierer und Gestalter beteiligt sind, z. B. dünn besetzte Open-Source-Projekte, die für jeden dankbar sind, der sich aktiv beteiligt. Gerade Webdesigner ohne nennenswerte PHP-Kenntnisse haben oft Respekt vor Templates, die Programmlogik enthalten, und kommen mit der vereinfachten Syntax von Smarty deutlich besser zurecht.

Ein Beispiel

Nehmen wir als einfaches Beispiel mal die Ausgabe eines Artikel-Titels in einem Blog inklusive Permalink. In einem PHP-Template wie hier der loop.php des TwentyTen-Themes für WordPress sieht das so aus:

Umgesetzt mit Smarty in einem Template für Serendipity wird daraus:

{$entry.title}

Der Smarty-Code ist nicht nur kürzer, sondern auch leichter lesbar. Abgesehen von zwei praktisch selbsterklärenden Variablen mit sehr einfacher Schreibweise können Templateautoren mit reinem HTML arbeiten.

Fazit

Gestalter können mit Smarty Templates unabhängig vom Programmcode erstellen und Programmierern damit die Arbeit an Templates abnehmen. Wiegt dieser organisatorische und zeitliche Vorteil die Nachteile einer aufgesetzten Templateengine und eines zusätzlichen Kompilierschrittes auf, kann Smarty die richtige Wahl für ein Projekt sein.

Matthias Mees ist freier Webdesigner aus Schleswig-Holstein. Er bloggt über Webdesign, Webstandards und Serendipity und twittert auch (aber nicht nur) darüber.

Gastartikel: Turbine: ein PHP-Framework um schneller und problemfreier Stylesheets zu schreiben

Vladimir — Mon, 19 Jul 2010 10:55:23 +0000

Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf.

Einem Frontendentwickler macht das in vielen Situationen durchaus Spaß. Es gibt aber auch solche Fälle, in denen man einfach nicht die Zeit und/oder das Budget für so viel Handarbeit zur Verfügung hat. Oder es ist einem einfach gerade zu stupide.

Und in solchen Fällen könnte in Zukunft das Framework Turbine zum Einsatz kommen.

Das Mantra: Weg mit allem Überflüssigen

Turbine entstand im Laufe des letzten Dreivierteljahrs und ging aus einem Projekt von Peter Kröner (@sir_pepe) hervor. Peter schrieb damals an einem CSS zu PHP-Array Parser/Umwandler, in den ich nach und nach als Kollaborator immer tiefer involviert wurde.

Was ursprünglich nur als kleines Werkzeug Stylesheets auf- bzw. nachbereiten sollte, wurde im Laufe unserer Arbeit daran immer umfangreicher, und vor allem radikaler in seinem Ansatz. So landeten Peter und ich irgendwann an einem Punkt, an dem wie einen neuen Stylesheet-Dialekt vor uns liegen hatten, kombiniert mit einer PHP5-Bibliothek, die diese Sprache nach altbekanntem CSS weiterverarbeitet.

Für die Ausarbeitung dieser Sprache nahmen wir das Beste aus CSS sowie aus anderen ähnlich ausgerichteten Frameworks wie Sass, Less und Scaffold und sattelten eigene Ideen obendrauf.

An Less fanden wir gut, dass es auf die Zeichen {, } und ; verzichtet. Alles unnötige Tipperei in unseren Augen! Als strukturienden Ersatz verordneten wir Turbine wie bei Less eine etwas striktere, an Python angelehnte Schreibweise, in der Einrückungen die Rolle der geschweiften Klammern übernahmen, und in der jede Eigenschaftszuweisung zwingend in eine eigene Zeile wandert, die aber eben nicht mehr auf einem Semikolon enden musste (allerdings immer noch kann).

Aus einem


#foo, #bar {
	color: #FF0000;
	margin-left: 4px;
	margin-right: 4px;
}

in CSS wurde in unserer zeichensparenden Syntax nun ein


#foo, #bar
	color: #FF0000
	margin-left: 4px
	margin-right: 4px

Durch die Einrückung nach dem Selektor erkennt Turbine, dass wir es ab da mit Eigenschaften zu tun haben. Auch bei den @media rules lassen wir die geschweiften Klammen weg:


@media screen
#foo
	background:red

@media print
#foo
	background:green

ergibt:


@media screen {
	#foo {
		background:red;
	}
}

@media print {
	#foo {
		background:green;
	}
}

All diese Anweisungen werden nicht mehr in .css- sondern in .cssp-Dateien abgelegt, die dann zur Laufzeit von Turbine in übliches (manchmal auch unübliches) CSS umgewandelt werden. Das geht so, dass man das Framework in seiner PHP-angetriebenen Seite folgendermaßen einbindet:

Also ganz easy, einfach anstelle einer CSS-Datei, und in dem Parameter files benennt man eine oder, kommasepariert, mehrere .cssp-Dateien, die Turbine aufbereiten soll. Die Pfadangabe der .cssp-Dateien ist dabei relativ zum Ordner, in dem Turbine, also die css.php-Datei liegt.

Wir bringen etwas intelligente Logik ins Spiel

Doch damit sind die arbeitssparenden Maßnahmen bei Weitem noch nicht erschöpft, denn sonst würde sich der ganze Aufriss ja gar nicht lohnen.

Inspiriert von den anderen genannten Frameworks und geleitet von unseren eigenen Bedürfnissen, haben wir darüberhinaus allerlei Kurzschreibweisen-Logik eingebaut.

Selektorverschachtelung

Zum Beispiel die Selektorverschachtelung. Durch diese wird es beispielsweise möglich, folgendes zu schreiben:


#foo div > p
	color:red
	font-weight:bold
	span
		color:blue

Diese Anweisung transformieren wir dann in folgendes CSS:


#foo div > p {
	color:red;
	font-weight:bold;
}

#foo div > p span {
	color:blue;
}

Und spätestens bei Konstellationen wie dem nachfolgenden Konstrukt spart das richtig viel Arbeit:


#header, #footer
    ul, ol, p
        a:link, a:visited
            text-decoration:underline
        a:active, a:hover
            text-decoration:none

Dies entspräche in klassichem CSS nämlich diesem Mammut-Apparillo:


#header ul a:link, #header ul a:visited,
#header ol a:link, #header ol a:visited,
#header p a:link, #header p a:visited,
#footer ul a:link, #footer ul a:visited,
#footer ol a:link, #footer ol a:visited,
#footer p a:link, #footer p a:visited {
	text-decoration: underline;
}
#header ul a:active, #header ul a:hover,
#header ol a:active, #header ol a:hover,
#header p a:active, #header p a:hover,
#footer ul a:active, #footer ul a:hover,
#footer ol a:active, #footer ol a:hover,
#footer p a:active, #footer p a:hover {
	text-decoration: none;
}

Zusammengefasste Eigenschaften

Wir haben darüberhinaus die "expanding properties", die sehr praktisch bei der Zuweisung ein und desselben Wertes zu mehreren Eigenschaften sind.


#foo
	position:absolute
	top, left:4px

…extrahiert sich zu folgendem CSS:


#foo {
	position: absolute;
	top: 4px;
	left: 4px;
}

Variablen für Eigenschaftswerte und für Selektoren

Sicherlich ein Wunsch vieler Coder ist die Möglichkeit Variablen für Wertzuweisungen innerhalb von CSS zu verwenden. So etwas hilft besonders in solchen Situationen, wo zum Beispiel Farben seitenweit ausgetauscht werden müssen.

Bei Turbine haben wir zu diesem Zweck "Konstanten" für Eigenschaftswerte und "Aliase" für Selektoren.

In beiden Fällen setzt man im Kopfbereich der .cssp-Datei einen @constants- (Eigenschaftswerte) oder @aliases-Block (Selektoren) ein, der alle Definitionen aufnimmt, auf die man im Anschluss als Representanten zurückgreifen kann.


@constants
	myRed:#C02222
	imagePath:/assets/images

#foo
	color:$myRed
	background:url($imagePath/foo.png) top left no-repeat

Hier haben wir die Konstanten $myRed und $imagePath erstellt und sie dann in unseren Styleinganweisungen verbaut. Das daraus erzeugte CSS sieht deshalb so aus:


#foo {
	color: #C02222;
	background: url(/assets/images/foo.png) top left no-repeat;
}

Die beiden Konstantenwerte wandern in die Eigenschaften und unser Definitionsblock wird anschließend herausgenommen.

Aliase funktionieren ähnlich, sind aber wie gesagt für Selektoren zuständig. Ein…


@aliases
	mainNavigation: #wrapper #header > div ul

$mainNavigation
	list-style:none

…ergibt:


#wrapper #header > div ul {
	list-style: none;
}

Eigenschaften anderer Selektoren kopieren

In Turbine könnt Ihr Eigenschaftswerte anderer Selektoren mit "copy" kopieren/übernehmen:


#foo
	background:#F00

#bar
	color:copy(#foo background)

Eigenschaften erben

Oder Ihr könnt ganz im Sinne der Objektorientierung neue Selektoren alle Eigenschaften eines anderen Selektoren erben lassen. Die Anweisung…


#parent
	color:red
	font-weight:bold

div.child
	extends:#parent
	margin:4px

…sorgt für folgende Ausgabe im CSS:


#parent {
	color: red;
	font-weight: bold;
}
div.child {
	margin: 4px;
	color: red;
	font-weight: bold;
}

Soviel ersteinmal zu den möglichen syntaktischen Verkürzungen. Es gibt noch ein paar mehr Spielarten, die Ihr allesamt im entsprechenden Abschnitt der Turbine-Dokumentation nachlesen könnt. Auch findet Ihr dort etwas tiefergehende Infos zu den eben abgehandelten Features.

Plugins für Bugfixes, für CSS3, für Performance, etc.

Die syntaktischen Verkürzungen sparen uns schon einiges an ungeliebter Arbeit. Was uns aber außerdem viel Arbeit macht, ist der Kampf mit den Browsern. Mal dürfen wir uns mit Darstellungsfehlern der IEs herumschlagen, mal geht es darum, für jeden Browser einzeln irgendwelche fortschrittlicheren Darstellungsformen handzuklöppeln, etwa Schriftarten Einbinden, Inline-Block zu faken, oder das browserübergreifende Erzeugen von Transparenzen, Schatten und anderen CSS3-Effekten.

Und hier kommen die Turbine-Plugins ins Spiel, welche uns dabei unter die Arme greifen.

Es gibt Plugins, die im stillen Kämmerlein Bugs fixen oder Browser um Basisfähigkeiten erweitern. Andere sorgen dafür, dass wir CSS3-Features heute schon nutzen können, indem sie Code erzeugen, den alle Browser verstehen.

Plugins aktivieren

Um eines der Plugins zu nutzen, aktivieren wir es in einem speziellen Kopfbereich der .cssp-Datei, hier zum Beispiel aktivieren wir gleich drei von ihnen:


@turbine
	plugins:boxsizing,borderradius,transforms

Diverse Plugin-Gattungen

Mit Turbine liefern wir eine ganze Palette von Plugins mit, 17 an der Zahl.

Das bugfixes Plugin behebt allerlei Abstandsprobleme in den IEs (unterer "Geistermargin" bei Bildelementen, doppelter Abstand bei Floats, Geisterpadding in Buttons), verhindert im IE6 Hintergrundbildflackern, rüstet im IE6 min-height nach, verbessert die skalierte Bilddarstellung im IE7, entfernt Geistermargins im Firefox um Buttons. Auch bringt es dem IE6 via Behavior :hover für alle Sorten Elemente und schließlich PNG Alphatransparenzen bei.

Das html5-Plugin rüstet Defaultstyles für alle neuen HTML5-Elemente nach, und zwar so wie die Defaultsstyles laut W3C geplant sind (betrifft vor allem display: inline; und display: block;);

resetstyle enthält eine Sammlung von Eric Meyer inspirierter Reset-Anweisungen, mit denen man global alle Margins und Paddings in allen Browsern auf Null zurücksetzt, das Listen in normale Blockelemente wandelt, Schrifteigenschaftenvererbung für Formularfelder und Tabellen aktiviert, und noch ein/zwei Dinge mehr.

Die Plugins @font-face, backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, inlineblock, opacity, transforms rüsten wiederum in allen Browsern Unterstützung von CSS(3)-Eigenschaften nach.
Das gilt außer beim borderradius-Plugin explizit auch für die IEs!

Bei borderradius boxshadow, boxsizing, inlineblock, opacity, transforms verwenden wir einfach die vom W3C vorgesehenen Deklarationen und die Plugins setzen das dann in vendor-prefixte Varianten und teilweise in IE-Filter und -Behaviors um. Beispiel:


@turbine
	plugins:boxsizing

#foo
	box-sizing:border-box

Ergibt:


#foo {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	behavior: url(plugins/boxsizing/boxsizing.htc);
	box-sizing: border-box;
}

Die visuellen Resulate sind dann in allen Browsern die gleichen.

Andere Plugins haben eigene Syntaxen, weil es entweder noch keine Übereinkunft gibt, oder um Tippaufwand zu sparen.

@font-face funktioniert zum Beispiel so, dass man in einem Ordner möglichst viele gleichnamige Schriftdateien aller Formate (eot, ttf, woff&hellip) ablegt, um sie dann mit einer kurzen Anweisung einbinden zu lassen.
Sagen wir also wir hätten in einem Unterordner fonts/ folgende Dateien hinterlegt:

SaginawMedium.eot
SaginawMedium.woff
SaginawMedium.otf
SaginawMedium.ttf
SaginawMedium.svg

Dann könnten wir sie mit dieser Anweisung einbinden:


@font-face
	font-family:'SaginawMedium'
	src:url('fonts/SaginawMedium')
	font-weight:bold
	font-style:italic

backgroundgradient erzeugt browserübergreifend zweifarbige lineare Farbverläufe für den Hintergrund eines Elements. Da sich noch keine einheitliche Syntax herausgeschält hat, Mozilla aber am nächsten am aktuellen Vorschlag des W3C dran ist, haben wir uns syntaxmäßig auf dessen Seite geschlagen. Dies der wäre der Aufruf, um einen vertikalen Farbverlauf von oben Weiß nach unten Schwarz zu erzeugen:


#foo
	background-image: linear-gradient(top,#FFF,#000)

colormodels rechnet hingegen alle Vorkommnisse an HSL(A)-Farbwerten für Browser die damit nichts anfangen können in RGB(A) Werte um.
Im IE funktionieren HSLA- und RGBA-Werte, wenn wir damit Hintergrundfarben definieren, in allen anderen Fällen nur HSL ohne Transparenz und natürlich RGB.

minifier und datauri steigern wiederum die Ladegeschwindigkeit des resultierenden CSS. Das erste, indem es dieses minifiziert, also von überflüssigen Leerstellen, Nullen und Einheiten befreit und wo möglich Shorthand Notationen einsetzt. Das zweite spart HTTP-Requests ein, indem es Datei-Resourcen, die es in den Styles findet und die unter 24K wiegen per Data-URI, oder für die älteren IEs per MHTML, einbettet.

Des sniffer-Plugins bedient Ihr Euch, wenn Ihr Styles nur ganz bestimmten Browsern oder Plattformen servieren wollt, bzw. wenn Ihr die ganz bestimmten Browsern oder Plattformen vorenthalten wollt. Beides ist möglich.

Gesetzt den Fall, Ihr wolltet etwas nur auf Desktops in der Textfarbe rot darstellen, dann könntet Ihr bei aktiviertem Plugin folgende Anweisung schreiben:


#foo
	device:desktop
	color:red

Der Selektor #foo mitsamt all seinen Eigenschaften würde dann nur noch in dem Fall an den Browser durchgereicht, wo dieser ein Browser einer Desktop-Plattform ist (also z.B. nicht an iPhones, iPads, WebOS, etc.).

Wenn Ihr die Textfarbe rot für alle Plattformen, außer den Mobilgeräten ausliefern wollt, dann schreibt…


#foo
	device:^mobile
	color:red

Neben device kennt der sniffer auch noch os mit Versionnummern oder -namen:


// Nur Mac
#foo
	os:mac
	color:pink

// Nur für Windows neuer als Vista
#bar
	os:windows>=vista
	color:lightblue

// Nur für Windows neuer als Vista
#goatse
	os:windows>=6
	color:blue

// Für alle außer Linux
#tubgirl
	os:^linux
	color:red

Und er kennt die Eigenschaft browser:


// Nur für IE
#foo
	browser:ie
	color:darkblue

// Nur für Firefox Versionen neuer als 3.5
#bar
	browser:firefox>3.5
	color:orange

// Nur für Safari 4
#goatse
	browser:safari=4
	color:lightblue

// Nicht für Chrome
#tubgirl
	browser:^chrome
	color:green

Und zu guter letzt haben wir noch die Meta-Plugins css3, performance, legacy und utility. Diese sind selbst eigentlich keine Plugins (daher auch: Meta-Plugins), sondern sie fassen mehrere Plugins in Funktionsgruppen zusammen, um sie gemeinsam aktivieren zu können (und wieder Tipparbeit zu sparen).

Das css3 Meta-Plugin besteht zum Beispiel aus der Sammlung backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, opacity und transforms. Anstatt alle Plugins einzeln zu aktivieren kann man nun ganz einfach folgendes deklarieren:


@turbine
	plugins:css3

Und schon sind sie allesamt aktiv!

Zieht all das nicht mächtig an der Performance?

Unclever programmiert täte es das aufgrund zahlreicher Regular Expressions und Plugin-Schleifen sicherlich. Es ist aber nicht unclever programmiert. Turbine nutzt serverseitiges Caching. Einmal verarbeitete Ergebnisse werden aufbewahrt und so lange nicht neuberechnet, wie auch die .cssp-Quelldateien unverändert bleiben. Es geht serverseitig also nicht sonderlich viel Extrazeit drauf.

Desweiteren würden wir sogar soweit gehen, zu behaupten, dass Eure Seite durch den Einsatz von Turbine clientseitig sogar schneller ist als wenn Ihr den klassischen Weg einschlagen würdet. Denn unser CSS-Output ist kombiniert und mindestens ZIP-komprimiert, bei Nutzung unseres performance-Metaplugins sogar noch minifiziert und von unzähligen bremsenden HTTP-Requests befreit. Zu guter letzt sendet Turbine dem Browser auch nur dann alle Daten, wenn dieser den Output nicht schon bei einem vorherigen Aufruf geladen hat und sie bei ihm noch im Cache liegt. Das spart Übertragungszeit zum Client, und natürlich auch Traffic!

Was man zum Loslegen braucht

Wenn Ihr jetzt angefixt seid und Turbine ausprobieren wollt, was wir schwer hoffen, dann geht Ihr am besten in die Download-Sektion unseres Projekts bei Github und ladet Euch dort die aktuellste Version herunter.

Dann entpackt Ihr alles in einen Ordner auf Eurem PHP5-getriebenen Webspace (PHP5 ist Pflicht!), zum Beispiel den Ordner /turbine. Ihr könntet nun einen weiteren Ordner /css anlegen, darin eine style.cssp mit den Turbine-Anweisungen. Zu guter letzt bindet Ihr das Style beispielsweise in der index-Datei im Root per HTML, wie ganz oben erwähnt, folgendermaßen ein:

Dokumentation

Eine sehr umfangreiche und hoffentlich gut verständliche Dokumentation zu den Sprachfeatures, den Plugins und dem Einrichten von Turbine findet Ihr auf http://turbine.peterkroener.de. Ist allerdings in Englisch.

Fragen?

Für Fragen haben wir zum einen eine FAQ-Sektion, aber auch eine Frage/Antwort-Plattform für Turbine auf Qhub.

Code Highlighting und Autocompletion für Turbine-Syntax in Webeditoren

Uns ist bewusst, dass Ihr wenig Lust habt auf die unterstützenden Funktionalitäten Eures Lieblings-Webeditors zu verzichten, also konkret das Einfärben des Codes sowie die automatischen Befehlsvorschläge. Deshalb haben einige Mithelfer und wir uns an Plugins bzw. Erweiterungsmöglichkeiten für einige Editoren drangesetzt und Lösungen für Dreamweaver, UltraEdit, GtkSourceView (also Gedit und Anjuta), sowie TextMate in petto.

Ihr findet einen Fehler? Stellt Dinge zur Diskussion?

Lasst es uns wissen, indem Ihr einen Eintrag in unsere Issues-Abteilung bei Github vornehmt. Schaut aber vorher, ob dieser Bug, oder ein solcher Vorschlag nicht schon existiert.

Christian Schaefer ist Jahrgang ‘78, hat seine Wurzeln bei Köln, lebt aber seit 2004 unbehelligt in Düsseldorf, und wird von jedermann außer den Eltern "Schepp" genannt. Und das ist auch gut so. Es verschlug ihn 1998 ohne Studium direkt in eine 3D-Firma in Köln. Dort entwickelte er virtuelle Figuren für Messen und TV. Selbstständigmachung Anfang 2004 und Verlagerung des Fokus’ auf die Webentwicklung. Sieht seine Schwerpunkte bei der Frontend-Entwicklung, hat aber auch kein Problem mit Backends und dem Architekten großer Sites in PHP und MySQL. Fertige CMSe nerven ihn. Frameworks sind OK. Nebenbei unterstützt er technisch den Kölner Multimediatreff, hat gerade ein Videotraining biblischen Ausmaßes in der Mache. Er twittert unter dem Account derSchepp und mag alles was sich um Essen dreht.

Korrigiert eure Hinweise für die Copyright-Jahre

Vladimir — Sat, 02 Jan 2010 08:00:41 +0000

Bei vielen Websites steht entweder im Fußbereich oder in der Seitenleiste ein Copyright-Hinweis samt dem Jahr, als das Projekt gestartet wurde und dem aktuellen Jahr. Weil aber viele auch das aktuelle Jahr hardcoden bzw. manuell eingeben steht jetzt dort immer noch z. B.:

daher sollte man die ganzen manuell eingetragenen Jahreszahlen aktualisieren oder stattdessen einfach das aktuelle Jahr dynamisch eintragen:

© 2002- Max Müller

Erinnert via @smashingmag.

Homer Simpson macht CSS

Vladimir — Tue, 06 May 2008 06:20:39 +0000

Was man mit CSS alles machen kann zeigt die Demo von Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.

NicEdit: ein kleiner WYSIWYG-Editor

Vladimir — Wed, 19 Mar 2008 00:55:49 +0000

NicEdit ist zwar ein kleiner, aber dennoch leistungsfähiger WYSIWYG-Editor. Das Einbauen ist sehr einfach, man muss das Javascript in seiner Website einbauen. Dazu benutzt man entweder den vorbereiteten Code-Schnippsel, dann wird auf das Javascript auf der Hersteller-Website zurückgegriffen oder man speichert es auf dem eigenen Webspace ab.

Wenn das Script eingebaut ist, werden alle Textbereiche bzw. Textboxen (textarea) durch einen bearbeiteten Bereich ersetzt. Doch das ist nicht alles. Im Prinzip kann man auch div-Blöcke oder Absätze mit so einem Editor beglücken, einfach id="myNicPanel" zuweisen.

Man könnte jetzt stundenlang über die Vor- und Nachteile von WYSIWYG-Editoren diskutieren, ich persönlich arbeite auch innerhalb von WordPress lieber mit den Quciktags bzw. in der Code-Ansicht. Aber wenn WYSIWYG gewünscht wird, warum nicht auf schon eine vorgefertigte Lösung setzen.

Ich habe es vorhin hier im Weblog getestet und es funktioniert so weit gut. Es werden dann ca. 35 KB mehr geladen, aber die Qualität des ausgelieferten Codes ist OK.

Via: Jens (ICQ)

Druckvorschau, CSS und die Nutzer

Vladimir — Sun, 16 Dec 2007 17:04:05 +0000

Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei für die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. für die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken.

Das Problem ist aber hierbei, dass viele Nutzer und unter anderem auch recht erfahrene Nutzer (da war ich vor einiger Zeit sehr überrascht) nicht davon ausgehen, dass es eine CSS-Datei für die Druckausgabe gibt und diese Lösung auch schlichtweg nicht kennen. Die Suchen krampfhaft nach einem "Drucken" oder "Druckvorschau"-Link auf der Website. Die entsprechenden Menüpunkte im Browser sind entweder völlig unbekannt oder einfach "aus den Augen, aus dem Sinn".

Was kann man den nun tun? Eine sehr einfache Lösung ist es einen Javascript-Link einzubauen:

<a href="javascript:window.print()">Drucken</a>

Diese Lösung hat zwei Nachteile. Bei ausgeschaltetem Javascript ist nix … ist logisch. Zudem ruft dieser Link nur den Druck-Dialog auf. Das ist nicht sonderlich hilfreich, denn man will vorher auch sehen was man druckt. Eine Javascript-Lösung zum Aufruf der Druckvorschau gibt es, allerdings funktioniert es nur im Internet Explorer … also recht Witzlos.

Was könnte man jetzt machen um eine browserübergreifende "Druckvorschau" zu realisieren und für die sehr erfahrenen Nutzer die CSS-datei für die Druckausgabe unangetastet zu belassen:

<?php if (isset($_GET['d']) && $_GET['d'] == 'druckvorschau') { ?> <link rel="stylesheet" type="text/css" media="screen" href="print.css" /> <?php } else { ?> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <?php } ?> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Der obere Codeschnipsel (gefunden bei maratz) realisiert genau das. Sollte der Schlüssels d des assoziativen Arrays $_GET den Wert druckvorschau haben, dann wird das Druck-CSS als das Haupt-CSS eingebunden. Ist dies nicht der Fall dann wird die "normale" CSS-Datei eingebunden. Hierbei handelt sich um kein Hexenwerk sondern es reicht folgenden Link an der entsprechenden Stelle einzubinden:

Druckvorschau

Wenn man diesen Verweis aufruft bzw. anklickt, dann wird der Schlüsselwert-Paar d=druckvorschau abgegeben und die eigentliche CSS-Datei wird ersetzt und man bekommt im Browser das Dokument so zu sehen, wie es dann auch gedruckt werden soll.

Man könnte sich hier fragen, warum ich die print.css außerhalb der Abfrage noch einmal einbinde und zwar im media="print"-Modus. Das hat zwei Gründe. Zum einen für die Nutzer die direkt über den den Druck-Dialog oder die Druckvorschau des Browser gehen. Aber auch wenn man aus der "künstlichen" Druckvorschau druckt. In beiden Fällen sucht der Browser nach einer eventuellen CSS-Datei für die Druckausgabe. Würde ich diese nicht wie oben einbinden, würde der Browser das Dokument so drucken lassen als ob kein CSS eingebunden ist.

Das ist allerdings nicht der Sinn der Sache weil ich mit der print.css bestimmte Ziele verfolge u.a. nicht-relevante Bereiche ausblenden.

[1] Mir ist durchaus bewusst, dass man die CSS-Dateien schonender in Bezug auf Server-Abfragen einbinden kann.

Bilder schöner präsentieren

Vladimir — Wed, 09 May 2007 13:57:39 +0000

Eins der Themengebiete, vor dem ich mich bis neulich erfolgreich gedrückt habe, war das Thema Lightbox. Für die die es nicht wissen: es geht u.a. darum die Präsentation der Bilder durch Javascript zu verschönern und mit einfachen Mitteln rudimentäre Galerien mit netten Effekten zu realisieren.

Als ich das Layout für Herr der Ringe-Weblog erstellt hatte, habe ich mich entschlossen auch dieses Thema anzugehen, da ich das neue Weblog u.a. deswegen gestartet habe um mich mit neuen Themen zu beschäftigen. Für WordPress-Blogs gibt es jede Menge Lightbox-Plugins und ich habe vier getestet. Am meisten hat mir aber Thickbox zugesagt, es ist schlank, leicht anzupassen und mein Bauch hat gesagt: "nimm dieses Plugin" .

Wie alle Plugins ist auch dieses einfach zu installieren: einfach den Ordner hochladen und das Plugin aktivieren. Die Anpassungen nimmt man entweder in der CSS-Datei (thickbox.css) vor oder in der Javascript-Datei (thickbox.js) wenn man z.B. die Bezeichnungen anpassen oder eindeutschen will.

Wenn man dann den Lightbox bei den Bildern einfügen will, dann muss man nur class="thickbox" einfügen:

Und schon hat man einen kleinen und netten JS-Effekt wenn man das Bild aufruft und der Wert bzw. der Inhalt des title-Attributs dient als die sichtbare Beschreibung des Bildes. Hat man mehrere Bilder zu einem Thema innerhalb des Beitrages und man will diese Bilder zu einer Art Galerie verknüpfen, dann schaut der Code folgendermaßen aus:

Mit dem Attribut rel und dem eindeutigen Wert (der bei den zu verknüpfenenden Bildern identisch sein muss) erreicht man, dass das Skript die einzelnen Bilder durch ein "Weiter"- bzw. "Zurück"-Link verbindet. Hier zwei Beispiele: Beispiel 1 und Beispiel 2

Javascript: Bibliotheken, Frameworks und IDE

Vladimir — Sat, 26 Aug 2006 13:53:18 +0000

Hier einige Links zum Thema Javascript & Co. welche ich in den letzten Monaten gesammelt habe:

Prototype: Prototype is a JavaScript framework that aims to ease development of dynamic web applications.
qooxdoo: qooxdoo is an advanced open-source JavaScript-based GUI framework.
jQuery: New Wave Javascript: jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX – nor is just a set of needlessly complex enhancements… Nachtrag: jQuery für WordPress.
moo.fx: moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.
script.aculo.us: Effects and controls library built on Prototype.
Rico: An open-source Javascript library for creating rich internet applications (basiert auf Prototype).
Yahoo! User Interface Library: The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
Aptana – the WEB IDE: Aptana is a robust, JavaScript-focused IDE for building dynamic web applications.

Liste mit Linklisten

Vladimir — Sat, 06 May 2006 23:41:09 +0000

Ich bin gerade dabei meinen Lesezeichen-Ordner "Abarbeiten" auszumisten, daher hier mal eine Liste mit Linklisten zu diversen Themen rund um den Bereich Webwork:

Hasenjagd und Javascript

Vladimir — Wed, 19 Apr 2006 17:22:36 +0000

Ein kleines aber feines Browserspiel für Zwischendurch hat der "Man in Blue" entwickelt: Bunny Hunt. Zutaten:

XHTML 1.0
CSS
Jede Menge Javascript
Nix Flash

Lightbox in WordPress

Vladimir — Thu, 30 Mar 2006 11:21:19 +0000

Lightbox ist ein Script welcher es ermöglicht, die Bilder schöner zu präsentieren. Mittlerweile gibt es für WordPress ein Plugin, der die Einbindungen des Skriptes erleichtern soll.

Variable Breite und Layouts, schöne Sitemaps

Vladimir — Wed, 29 Mar 2006 14:31:31 +0000

Hier drei interessante CSS-Links:

Revolver

Vladimir — Sat, 25 Mar 2006 09:23:47 +0000

"Revolver" ist zuerst eine Waffe , aber in diesem Fall handelt es sich um ein kleines (2 kb) PHP-Script welches OpenSource ist und es einem ermöglicht z.B. eine einfache Diashow zu erstellen:

Revolver is a Fast Image Rotation Engine (FiRE)
Revolver can be used to show a stream of images without the need for an image viewer utility or Custom User Interface.

WordPress & Webwork » PHP & JS

Javascript: ein ganz einfaches Toggle-Script

Verwandte Beiträge:

Chico UI: komfortabel Funktionen für Websites nachrüsten

Verwandte Beiträge:

Google aktualisiert seine Styleguides für HTML, CSS und Javascript

Verwandte Beiträge:

Schachspiel als 1 Kbyte großes Javascript

Verwandte Beiträge:

WordPress: Anzahl der Artikel & Kommentare anzeigen

Verwandte Beiträge:

Codepad: (PHP-) Code online testen

Verwandte Beiträge:

Javascript: sanftes Scrollen bzw. nach oben Springen

Nicht springen sondern scrollen

Und was ist mit der Tastatur

Verwandte Beiträge:

Gastartikel: Smarty: PHP-Templates für Designer

Was ist Smarty überhaupt?

Wer setzt es ein?

Aber die Performance…

Teile und gestalte

Ein Beispiel

{$entry.title}

Fazit

Verwandte Beiträge:

Gastartikel: Turbine: ein PHP-Framework um schneller und problemfreier Stylesheets zu schreiben

Das Mantra: Weg mit allem Überflüssigen

Wir bringen etwas intelligente Logik ins Spiel

Selektorverschachtelung

Zusammengefasste Eigenschaften

Variablen für Eigenschaftswerte und für Selektoren

Eigenschaften anderer Selektoren kopieren

Eigenschaften erben

Plugins für Bugfixes, für CSS3, für Performance, etc.

Plugins aktivieren

Diverse Plugin-Gattungen

Zieht all das nicht mächtig an der Performance?

Was man zum Loslegen braucht

Dokumentation

Fragen?

Code Highlighting und Autocompletion für Turbine-Syntax in Webeditoren

Ihr findet einen Fehler? Stellt Dinge zur Diskussion?

Verwandte Beiträge:

Korrigiert eure Hinweise für die Copyright-Jahre

Verwandte Beiträge:

Homer Simpson macht CSS

Verwandte Beiträge:

NicEdit: ein kleiner WYSIWYG-Editor

Verwandte Beiträge:

Druckvorschau, CSS und die Nutzer

Verwandte Beiträge:

Bilder schöner präsentieren

Verwandte Beiträge:

Javascript: Bibliotheken, Frameworks und IDE

Verwandte Beiträge:

Liste mit Linklisten

Verwandte Beiträge:

Hasenjagd und Javascript

Verwandte Beiträge:

Lightbox in WordPress

Verwandte Beiträge:

Variable Breite und Layouts, schöne Sitemaps

Verwandte Beiträge:

Revolver

Verwandte Beiträge: