Die meisten von uns haben ja sicherlich bereits von Listen in HTML-Dokumenten gehört, die gibt es als <ol>, <ul> oder auch <dl> (wozu es übrigens erst kürzlich einen tollen Artikel gab). Oftmals verwenden wir dabei Symbole zum verdeutlichen von Funktionalitäten, wie wir es etwa im Beispiel-Screenshot sehen können. Wir schalten die Listenpunkte durch list-style: none; im CSS einfach ab und verpassen den jeweiligen Punkten ein Symbol wie z.B. ein kleines Häuschen als Symbol für die Startseite.
Zur Realisierung solch grafischer Listenpunkte gibt es im Prinzip 3 Herangehensweisen die ich erst einmal kurz vorstellen möchte:
Mensch, der Weihnachtswahn kommt in diesem Jahr aber auch reichlich früh, und dann auch noch so dicht aufeinander!
Erst werden Stöckchen geworfen und nun, am 01.12.2007, wird auch der aus den Vorjahren bekannte Weihnachtskalender der Webkrauts fortgesetzt.
Da ich nun auch seit geraumer Zeit auf der Mitgliedslist stehe, hatte ich bereits ein wenig Einblick in die Themen die da vom 1-24 auf uns warten und kann nur sagen das sich ein täglicher Besuch mit Sicherheit lohnen wird.
Neu in diesem Jahr ist, das die Beiträge in Form von “Advents-Quickies” erfolgen. Lange Beiträge wie im letzten Jahr werden also nicht kommen, damit auch die Leser mit Zeitmangel die Beiträge verfolgen können.
Gerrit van Aaken hat gestern sein HTML/CSS/JS-Kickstart-Paket vorgestellt. Eine sehr feine Sache wie ich finde, die jeder Webentwickler auf der Festplatte haben sollte.
Der Ablauf ist ja fast bei allen Entwicklern der selbe. Man macht/bekommt eine Layout-Datei welche nun im nächsten Schritt in ein XHTML-Dokument portiert werden muss um danach dann in den meisten Fällen als Template für ein CMS dienen zu können.
In einem Startup-Paket werden dabei alle Features vereint die man bei einer Design-Umsetzung in den meisten Fällen eh benötigen würde. Bei mir heißt das das eine index.html mit einer gewissen Struktur samt DOCTYPE und Metatags vorhanden ist, als auch eine Ordnerhierarchie mit CSS-Dateien für Screen, Print und Browserhacks (IE6).
Das CSS beinhaltet zudem bereits einige Resets und Klassen die sich im Alltag als nützlich erwiesen haben.
In Gerrits Paket wurde zudem bereits jQuery integriert, was ich als sehr nützlich ansehe, denn mittlerweile gehört auch jQuery bei mir zu fast allen neuen Umsetzungen dazu.
Da mir das Kickstart-Paket sehr gefallen hat habe ich mir dieses einmal vorgenommen und meinen persönlichen Ansprüchen nach noch einmal modifiziert, denn nur so ist ein schneller Start aus meiner Sicht möglich. Jeder hat einen etwas anderen Workflow und somit auch unterschiedliche Vorlieben was solch ein Paket angeht. Wer sich evtl. für meine Vorlieben interessiert, kann sich nun also auch meine Modifikation herunterladen.
Im Prinzip wurde dem Paket erstmal ein gewisses Grundmarkup beschert, was sich hier jedoch auf <div id="wrapper"> und ein <h1> beschränkt. Denn diese beiden Elemente sind aus meiner Sicht erstmal bei jedem Projekt der Grundstein. Das CSS-Reset von Eric Meyer wurde in die screen.css übernommen und ein wenig komprimiert. Das spart ein wenig Ladezeit. Die ie7.css wurde ebenfalls verbannt, da ich in letzter Zeit eher weniger Probleme mit dem IE7 hatte und daher die kleine Anzahl an Hacks auch in die screen.css übernehmen kann.
Ansonsten wurden noch einige Feinheiten wie z.B. ein Favicon zur schnellen Identifikation im Browser, robots.txt, sowie einige Metatags beigelegt. Schauts euch einfach an und sagt mir eure Meinung.
Es gibt ja unzählige Wege und Anleitungen wie man Spam in seinen Formularen mindern oder ganz verdrängen könnte. Ob Captchas, Rechenaufgaben oder Dienste wie Akismet, sie alle haben ihre Vor und Nachteile.
Bei Arne fand ich nun eine relativ simple Lösung die aber perfekt zu funktionieren scheint.
Der Trick ist denke ich nichts neues, aber dafür sehr effektiv. Um Spambots möglichst eindeutig zu erkennen wird in diesem Beispiel ein zusätzliches Input-Feld im Quelltext eingebunden und im Stylesheet über display:none; bzw. visibility:hidden; für alle CSS fähigen Browser ausgeblendet. Nun füllen Spambots in der Regel ja alle vorhandenen Formularfelder mit irgendwelchem Quatsch aus, beachten dabei jedoch kein CSS. Der “normale” User füllt also das zusätzliche Input-Feld nicht aus, da er es gar nicht sehen kann. Der Spambot hingehen füllt das Feld mit irgendwelchem Müll.
Nun muss man mit einer Programmiersprache wie PHP oder ASP nur noch checken ob das Feld gefüllt wurde, ist dies der Fall kann dann davon ausgegangen werden das es sich um Spam handelt.
Für mich stellt sich dabei nur die Frage der Barrierefreiheit. Soweit ich weis interpretieren Screenreader ja CSS auch teilweise und lesen Objekte mit display:none ebenfalls nicht vor… hat da vielleicht schon jemand Erfahrungen mit gemacht?
Zu guter letzt kann man sich dann noch fragen, wie lange die Spambetreiber denn brauchen werden um ihre Programme so zu stricken, das diese auch CSS halbwegs interpretieren können.
Mit Clearing habe ich als Float-Lover ja eher selten Problem, wenn ich in meinem Stylesheet bzw. meiner XHTML-Struktur denn mal ein Clearing benötige, dann habe ich dass ganz easy über <br class="c" />, wobei die Klasse c hier für clear:both steht, gelöst.
Das ist von der Semantik her vielleicht nicht ganz so schick, jedoch dafür mit allen Browsern funktionell, simpel und schlank im Quelltext.
Ich persönlich werde diese Lösung wohl auch noch weiter verwenden, bzw. werde bei festen Layouts auch weiterhin auf eine Umgebung aus gefloateten Elementen setzen, etwas besseres und kompatibleres gibt es für mich derzeit einfach nicht :)
Wer jedoch wirklich 100% semantischen Quelltext will, der kommt oft um eine Lösung ohne zusätzliches Markup nicht herum.
Für all diese CSS-Fanatiker hat Robert Nyman einmal die gängigsten Clearing-Methoden zusammengefasst. Mit Codebeispielen, Demos und den Nachteilen der jeweiligen Technik.
Ein guter Überblick wie ich finden,den man auf jeden Fall einmal gelesen haben sollte.
Wie evtl. einige schon mitbekommen haben, nutze ich seit der neuen Hackthenet-Version eine Art Lightbox, welche jedoch auf den Namen Thickbox hört und einige tolle Vorteile mit sich bringt.
Zum einen wäre da, das die Thickbox “nur” 31Kb wiegt. Die Thickbox basiert zudem nicht auf den JS-Frameworks Scriptacolous oder Prototype sondern auf dem immer beliebteren jQuery. Da wäre also schon der zweite Vorteil. jQuery bringt viele gute und tolle Effekte mit sich, welche in der 31KB-Variante der Thickbox also bereits integriert wären. Wer eine kleine Kostprobe will, der möge einfach auf das Artikelbild klicken :)
Die Thickbox bietet jedoch noch andere Vorteile:
Zum einen werden Bilder automatisch der Browsergröße angepasst, kommt also jemand mit einer 800×600 Auflösung daher bleibt ihm das Scrollen erspart, das Bild wird automatisch proportional herunter gerechnet. Das ganze wird dann zwar etwas pixelig, jedoch ist diese Methode ja auch nur für die Ausnahme bestimmt.
Ein weiterer Vorteil ist, das die Thickbox nicht nur mit allen möglichen Bildformaten umzugehen weis, nein, jeglicher Browserinhalt kann mit Ihr hervorgehoben werden, sei es ein JPG, PNG oder auch ein PDF. Worauf ich jedoch hinaus will, ist die Möglichkeit von AJAX abrufen, also auch der Nutzung von HTML innerhalb der Thickbox, so ist es z.B. möglich ein schickes Loginformular bei einem Klick einfaden zu lassen, wirklich etwas sehr nützliches und innovatives.
Auch eine Galerieunterstützung (also das Vor und Zurückklicken innerhalb einer Bildershow) ist kein Problem.
Einzig Abstriche beim Effekt muss man evtl. tätigen, so klappt sich die Bühne nicht wie bei der Lightbox auseinander, sondern wird “nur” durch eine schöne Ladeanimation angekündigt und dann eingefadet.
Und noch ein Tpp:
Wer übrigens wirklich nur mal eben ein Bild schön einbinden möchte, dabei die 100KB der Lightbox scheut und die tollen Dinge der Thickbox nicht benötigt, der sollte auf die Slimbox zurückgreifen.
Sie arbeitet mit dem Mootools-Framework und ist Alles in Allem nur 21Kb “fett”. Die Slimbox unterscheidet sich im Effekt und der Anwendung dabei in keinster Weise zur Lightbox 2.0.
Hallo liebe Besucher, so, nach mehreren Wochen der Entwicklung habe ich es nun endlich geschafft, die zweite Version meines Blogs online zu bringen.
Was hat sich hier verändert? Bzw. was wird sich noch verändern?
Nun, zum einen werde ich anfangen meine Artikel nun mit Tags zu pflegen, auch die alten Artikel werden davon wohl nach und nach nicht verschont bleiben :)
Die Linksektion ist verschwunden, da Links demnächst entweder eine eigene Sektion bekommen, oder wie bisher meist aus den Blogeinträgen heraus entstehen.
Dann wird es hier demnächst evtl. auch meinen ersten kleinen Podcast geben, dank neuem Headset.
Alles weitere überlasse ich euch. Und BITTE! Kommentiert endlich einmal ;)
Versprochen ist versprochen. In meiner immer kleiner werdenden Freizeit hab ichs endlich mal geschafft das Design für den neuen Blog zu entwerfen und auch schon umzusetzen, natürlich in feinstem und kleinstem XHTML ;)
Was jetzt also noch kommen muss is die Blogsoftware. Da ich mich selber als TXPLover bezeichnen würde fällt meine Wahl eben auch wieder auf dieses tolle CMS...also Textpattern.
Das Design kam übrigens bei meinen “Testern” schon um ein vielfaches besser an als es das jetzige tut, alles in allem kommt die neue Seite auch einfach etwas frischer daher…der neue Slogan lautet daher auch “Ganz was frisches”... Also, ihr dürft gespannt sein :)
