CSS, xHTML, JS, Literatur

HTML5 – Webseiten innovativ und zukunftssicher

Auch wenn wir auf dem Weg von HTML5 zu HTML sind und Peter Kröners Buch gerade in der zweiten Auflage erschienen ist – was nichts über die Geschwindigkeit der Verabschiedung von Standards, geschweige denn der Implementierung in den verschiedenen Browsern aussagt – ist es doch an der Zeit, einige Wort zum Buch von Peter zu verlieren.

Dies liegt zum einem daran, dass ich Peter als Mensch und Webentwickler, auch an den Themen in seinem Blog zu erkennen, sehr schätze und dass ich mit einer kurzen Rezension in der Schuld stehe. Heute Nacht nun finde ich endlich einige Minuten um meinen Eindruck wieder zu geben und vorweg – das Buch muss man lesen und als Nachschlagewerk am Rechner platzieren. Woran liegt das?
Weiterlesen

Standard
Webküche

Die Reduktion von HTML5

Neben dem 10k Contest gibt es aktuell auch ein 1k Variante, wobei es sich dabei um einen reinen JavaScript Vergleich handelt. Die Basis ist trotzdem HTML5 und ein canvas-Element steht zur Verfügung. Mit diesem kann man spielen und es sind einige wirklich tolle Sachen dabei – alles in allem 1k; externe Libraries sind hier nicht erlaubt. Für mich ein kleiner Ansporn um meine Idee mit HTML5 und CSS3 zu reduzieren und mal zu schauen, ob es denn auch im Rahmen von max. 1kByte geht.
Weiterlesen

Standard
CSS, xHTML, JS, Webküche

JavaScript in HTML einbinden

Das Einbinden von JavaScript in Webseiten ist kein neues Thema mehr, seit der Generation Web 2.0 aber kaum wegzudenken. Immer mehr Seiten bieten kleine Features an, die mit JS realisiert werden. Oft werden dabei die Funktionen in den Vordergrund gestellt und auch im Zeitaltern von DSL und anderen schnellen Datenverbindungen sollte die Webseitengeschwindigkeit nicht vergessen werden. Und in diesem Zusammenhang gibt es einige Überlegungen und Hinweise, welche ich in diesem Artikel auf Wunsch von Stephan erklären möchte.

Dabei kommt natürlich in erster Linie meine Meinung zum Tragen, welche vielleicht eine kleine Diskussion anstößt und wo man Feedback von Webworkern bekommt, die mehr im Thema stecken als ein Hobby-Webworker, wie ich es bin.
Weiterlesen

Standard
CSS, xHTML, JS, Webküche

Tab-Interface ohne JavaScript

Nicht Menüleisten, sondern Contentboxen werden so gemacht. Per Mausklick werden über eine kleine Reiternavigation weitere Informationen aufgerufen. Die sind entweder bereits in der Seite versteckt oder werden dynamisch nachgeladen. Javascript, DHTML und AJAX, verschiedene Techniken kommen zum Einsatz. Sie sind mehr oder weniger browsersicher. Mitunter klappt es mit dem Backbutton nicht mehr. Das Angebot dürfte aber genügen, um etwas nach eigenem Geschmack zu finden. Schliesslich wird diese Art der Contentpräsentation immer beliebter.

Dr.Web: 14 Tab Interface Scripts

Tab-Inteface

Das Zitat trifft es: mehr oder weniger browsersicher. Für mich einmal mehr Anlass, zu prüfen, kann man die Boxen auch mit reinem CSS in dieser populären Darstellungsform präsentieren? Nicht immer ist JavaScript erwünscht, was die Implementierung recht schön und einfach macht. Aber, noch immer sind viele Unternehmen der Sprache nicht willig und sperren sie für ihre Anwender. Hat man keinen dynamischen Inhalt, wie es oft auf kleinen Seiten ist, dann kann man das Tab-Interface auch mit einfachem CSS erzeugen. Weiterlesen

Standard
Webküche

HTML 5, ein Ausblick

Lachlan Hunt gibt auf A List Apart einen Ausblick mit vielen Beispielen und Details, die die Erwartung in die Höhe schnellen lassen. Der Artikel ist hervorragend und ich kann ihn nur empfehlen.

Ich freue mich auf die Zeit, in der die Strukturierung im Markup so schön übersichtlich erfolgen kann. Eine bessere Auszeichnung im Code kann ich mir nicht vorstellen, weg von ID und class für div-Elemente, hin zu neuen Elementen header, nav, section, article, aside, und footer im XML-Syntax-Stil.

Damit könnte eine einheitliche Verwendung entstehen und man kann mit eigenen Stylesheets das Design anpassen, so wie es unter anderem einige Profis im Netz fordern.
Weiterlesen

Standard
CSS, xHTML, JS, Webküche

Der ultimative Guide zu meta name=“robots“

Den ultimativen, kurz und gut, Guide zum meta-Thema hat Joost de Valk zusammengestellt.
Dort findet man, was es es für Möglichkeiten gibt und wer sie akzeptiert. Außerdem gibt es weitere Hinweise von Suchmaschinen zum Thema.

Für WordPress gibt es auf das Blog von de Valk entsprechende Plugins, so dass man jeden persönlichen Wunsch ohne Eigenleistung für den meta-Tag umsetzen kann.

zum Guide zu meta name=“robots“

Standard
Code, CSS, xHTML, JS, Webküche

Weniger div ist manchmal mehr …

Immer wieder schaut man sich das eine oder andere schicke Design an. Nicht das ich etwas dagegen hätte, aber warum muss die Seite aus einer riesigen Ansammlung von div-Elementen bestehen. In den meisten Fällen werden die div’s nur eingebunden um Probleme und Unwissenheit im Stylesheet zu kompensieren. Eine sinnvollerere Nutzung von CSS-Selektoren könnte das Problem oft schon beheben.

In diesem Zusammenhang möchte ich nochmal auf den sehr schönen Artikel „Der div-Wahnsinn“ von Eric Eggert hinweisen.

Ein Beispiel dafür und einer eher ungewöhnlichen Nutzung möchte ich im folgenden Aufzeigen, weil ich es schon mal in betracht gezogen habe und die Idee nun zum Einsatz kam. Mit List-Elementen sollen Boxen genutzt werden, anstatt div also li.
Grundlegend ist die Idee recht simpel: Man streiche die Browserformatierung der Liste und formatiere ähnlich einem Container:



ul {
	width: 600px;
	text-align: left;
	list-style-type: none;
}

Die einzelnen Listelemente li werden dann ebenso entsprechend gestalltet.


ul li {
	margin: 0 0 10px 10px;
	border: 1px solid blue;
	width: 180px;
	background: #eee;
	float: left;
}

Alles weiter ist direkt im Markup zu sehen und sollte verständlich sein. Schaut auch mal die Seite ohne Styleangaben an, damit kann doch ein Leser ohne Nutzung des Stylesheets trotzdem etwas anfangen, beispielsweise per WAP, oder?

Ich denke, dass es eine ganze Reihe von möglichen Anwendungen dafür gibt. Denn in erster Linie soll doch das Markup bestehen bleiben und ein neues Design ausschließlich mittels CSS entstehen. Mit dieser Lösung könnte man auch etwaige Listen einmal anders darstellen, insofern sie nicht dem klassischen Listelement und so auch dem Leser zur Verfügung stehen sollten.

Demo

Damit man das ganze mal live und in Farbe sehen kann, habe ich es hinterlegt, viel Spass damit.

Download:



Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als txt-DateiDownload als txt-Datei: div_mit_list.txt – 3 KByte

Standard
Webküche

WK – Website analysieren

Screenshot Colorblind
Screenshot Colorblind

Für alle diejenigen, die ihre Websiten jedem zugänglich machen und dies im Vorfeld testen wollen, gibt es diverse Möglichkeiten im Netz um die Tests auf verschiedenen Systemen durchzuführen unter den unterschiedlichsten Browsern.
Ebenso kann man die Seite auf Zugänglichkeit prüfen.

Ein Service, den ich bisher nicht kannte, veranlasste mich, mal alle mir bekannten Links hier zu hinterlegen. Mit „Colorblind Web Page Filter“ kann man sein Projekt für Menschen mit Beeinträchtigung beim Farben sehen, z.B. Farbenblinde, testen.

Hier eine Liste der Seiten, die beim Optimieren einer Website helfen. Mit Sicherheit ist diese Liste nicht vollständig – über weitere Hinweise würde ich mich sehr freuen. Bitte nutzt dazu die Kommentarfunktion.

Standard