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?


HTML5 ist Trend und immer wieder die eine oder andere Gallery von Lösungen wert. Daher kann man Unmengen an Informationen im Web über das Thema lesen und fast täglich kommen Tutorials dazu. Jeder dieser Beiträge erfasst jedoch das Thema nicht so rund und ansprechend wie das Buch von Peter Kröner: HTML5 – Webseiten innovativ und zukunftssicher.

Das Buch ist keine reine Fibel und man wird vermutlich nicht vom Beginn bis zum Ende alles lesen. Es gibt eine ganze Reihe Kapitel, die sind erst interessant, wenn man mit dem Thema zu tun hat und auf die entsprechende API zugreifen möchte. Aber gerade dann kommen die Vorteile zum Tragen - so schlägt man nach, findet das Thema und erfährt mehr; entsprechend kann es dann noch Code-Beispiele geben und die nötigen Links für die tiefe Recherche.

Peter schafft in seinem Buch einen weiten Bogen und Auflage Zwei wird dabei noch umfassender. Die Sprache ist verständlich und die Lösungen sind nachvollziehbar und nutzbar hinterlegt. Besonders gefallen mit die Kapitel 1 bis 3, da sie das wohl meist genutzte Handwerkszeug sind und schon jetzt einen Wert versprechen. Wie und wie umfassend man HTML5 einsetzt, kann sehr verschieden sein und tagtäglich stellt man sich bei der Kundenlösung die Frage, wie weit gehe ich beim Einsetzen der neuen Möglichkeiten? Hier helfen die besagten Kapitel, da man einiges mehr und tiefer über die Hintergründe von HTML und XML im Zusammenhang erfährt. Mich begeistert ebenso der Ausblick auf den "fertigen" Standard und HTML6.

Aus meinem Blickwinkel hat Peter wirklich Spaß an den Themen, die Inhalte scheinen ihm Freude zu bereiten - auch das Hinweisen auf Browser, die bestimmte Möglichkeiten nicht zulassen und wie man Konstrukte darum erstellt um eine Lösung zu erzielen. Gleiches gibt die zugehörige Website wieder, wo man Hintergründe und Beispiele findet und ebenso Fragen an den Autor stellen kann.

Einziges kleines Manko aus meiner Sicht ist, dass man ein wenig die kleinen Tools im Zuge HTML5 vermisst oder nur schwer auf die schnelle findet. So liebe ich die visuelle Darstellung (html5 outliner für Chromium) der Semantik beim Erstellen des Markup oder nutze kleine Helfer im Cromium-Browser um mit die Semantik ebenso zu zeigen oder die local storage API (html5 buddy für Chromium) besser zu sichten. Aber in diesem Kreis gibt es vermutlich viele Tools und unterschiedliche Vorlieben.

Kurz: Klare Kaufempfehlung für alle, die HTML5 nicht nur als Schlagwort und mehr als einige neue Elemente kennen wollen. Das Buch und die zugehörige Website spannt einen schönen Bogen und bringt die Möglichkeiten im Dunstkreis HTML5 näher, egal ob es nun wieder HTML heißt oder eine weitere Nummer im Netz der Möglichkeiten wird.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Es gibt noch immer Potenzial zum Reduzieren der Größe, so bin ich kein Freak im Rahmen von JavaScript und hier sehe ich noch einiges an Möglichkeiten. Nun aber die beiden Lösungen zum Vergleich.

Variante 1 hat in erster Linie ihren Bedarf im CSS, viel Code für wenig Wirkung. Man braucht aktuell für diverse Browser unterschiedliche Syntax um die Rundungen zu erzeugen. Die Animation funktioniert nur in Webkit-Browsern und auch die RGB-Farben sind recht viele Zeichen.

1. Die 4,5k Variante
2. Die 1k Variante

Um diese Sachen auf 1k zu drücken musste einiges an Code weichen; eine andere Möglichkeit habe ich nicht gesehen. Die Animation habe ich nur im Ansatz zum Test eingebaut, sie ist wesentlich simpler. Das Spiel der Farben lasse ich via Zufall ablaufen und brauche trotzdem weniger Code. Lediglich die Möglichkeit RGB-Syntax zu nutzen ist geblieben, wird aber im JS per Zufall erzeugt.

In beiden Fällen habe ich es getan, weil ich mal etwas Spielen und Versuchen wollte. Einfach mal so und trotzdem sollte der Code valide und mit aktuellen Mitteln möglich sein. Interessant ist wohl das HTML5-Markup der 1k Variante - auch diese Version ist valider Code und ist doch recht untypisches Markup.

<!DOCTYPE html>
<meta charset="utf-8"> 
<title>one day at a time in 1k</title>
<style>body{background:#FFF;font:16px/23px Georgia,Times,serif;margin:20px}h1{font-size:45px}h3{display:none}time{font-size:50px;border:3px solid #F9F5EB;-webkit-box-shadow:4px 4px 6px #545454;-moz-box-shadow:4px 4px 6px #545454;box-shadow:4px 4px 6px #545454;padding:30px 40px}div{margin:120px 0}</style>
<script>function d(){var n=new Date(),t=n.getDate(),m=n.getMonth(),y=n.getFullYear(),y=t+'.'+m+'.'+y;if(t<10)t="0"+t;if(m<10)m="0"+m, datetime=y+'-'+m+'-'+t,x=document.createTextNode(y);d=document.getElementById('d');d.appendChild(x);d.setAttribute("datetime",datetime);setInterval('d.style.background="rgba("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",0.4)"',600);setInterval('d.style.margin=Math.floor(Math.random()*20)+"%"',500)}window.onload=d;</script>
<header><h1>Carpe diem (1k)</h1></header>
<div><h3>Today's date</h3><time id="d">&nbsp;</time></div>

Die style- und script-Elemente kann man im Grunde unbeachtet lassen, es geht um die anderen Tags, hier wird dem typischen Markup von HTML einiges entzogen.

Das html-, head- und body sind ganz entfallen. Gleiches kann man auch für colgroup und tbody machen. Andere Elemente dürfen nur das schließende Tag weg lassen: li, dt, dl, p, option und einige mehr.

Im Gegensatz dazu die Variante mit xHTML-Schreibweise und kompletten Tags.

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="utf-8"> 
		
		<title>one day at a time</title>
		
		<meta name="description" content="one day at a time - Small Sample Application">
		<meta name="language" content="en" />
		<link rel="stylesheet" href="style.css" />

		<script>
			function addDate(){
				var now   = new Date();
				var day   = now.getDate();
				var month = now.getMonth();
				var mname = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
				var year  = now.getFullYear();
				var date  = day + '.' + mname[month] + ' ' + year;
				if (day < 10) day = "0" + day;
				if (month < 10) month = "0" + month;
				var datetime = year + '-' + month + '-' + day;
				var dtxt   = document.createTextNode(date);
				document.getElementById('date').appendChild(dtxt);
				document.getElementById('date').setAttribute("datetime", datetime )
			}
			window.onload = addDate;
		</script>
	</head>
	<body>
		
		<div id="wrap">
			
			<header>
				<hgroup>
					<h1>one day at a time</h1>
					<h2>Carpe diem &mdash; <a href="http://en.wikipedia.org/wiki/Carpe_diem">Seize the day</a>.</h2>
				</hgroup>
			</header>
			
			<section>
				<h3>Today's date</h3>
				<div class="pulse">
					<time id="date">&nbsp;</time>
				</div>
			</section>
			
			<footer>
				<p>View in an HTML5 browser such as: <a href="http://ie.microsoft.com/testdrive/">IE9 Developer Preview</a>, <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>.</p>
				<p>See animation only on webkit browser such as: <a href="http://www.apple.com/safari/">Safari</a> or <a href="http://www.google.com/chrome/index.html?hl=en&amp;brand=CHMB&amp;utm_campaign=en&amp;utm_source=en-ha-na-us-sk&amp;utm_medium=ha">Chrome</a>.</p>
			</footer>
			
		</div>
		
	</body>
</html>

Natürlich sind hier auch einige Inhalte mehr und vor allem wesentlich mehr Semantik unter gebracht. Eine schöner Vergleich der vielleicht zum Nachdenken anregt und mir wieder die Unterschiede und Möglichkeiten aufgezeigt hat.

Vielleicht Lust bekommen, zu spielen, zu testen und die neuen Möglichkeiten mit HTML5 und CSS3 zu versuchen - wenn ja, dann hat sich der Artikel gelohnt. Solltest du Hinweise für meine Spielerei oder Fehler gefunden haben - dann bin ich sehr dankbar und der Artikel hat sich noch viel mehr gelohnt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

... natürlich ist in dem Zusammenhang die Übersicht von Peter Kröner zu HTML5 nicht zu vergessen.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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.

Mögliche Formen

Grundlegend kann man JavaScript in drei verschiedenen Formen unterbringen.

• head
• body
• body-Tag

In vielen aktuellen Projekten, werden JavaScript Frameworks eingesetzt, da sind besonders bekannt: Prototype und jQuery. Zu beiden habe ich im Blog schon einige Infos hinterlegt.

Hintergrundüberlegungen und Realisierung

Im Vorfeld sollte man überlegen:

• Ist das JavaScript unbedingt notwendig für den Besucher?
• Kann ich den Inhalt auch ohne JavaScript konsumieren?
• Ist die Größe des Scriptes gerechtfertigt?

Im weiteren gilt es: JavaScript ist im optimalen Fall ausgelagert, in eine separate Datei, die dann im jeweiligen Abschnitt des HTML eingebunden wird. Der Zugriff auf die Datei sollte nur einmalig erfolgen.

Das Script gehört nur geladen, wenn man es auch benötigt! Gerade beim Einsatz von Plugins für WordPress sieht oft die vielfache Verwendung von JS-Frameworks, da sie per Hook eingebunden werden. Solche Sachen sind besser im Template des Themes aufgehoben und auch dann kann man mit Conditional Tags (auf diese habe ich schon mehrfach hingewiesen!) sehr leicht abfragen, ob man das Script laden muss.

Beispiel

Vielfach wird JS genutzt, um eine Live-Vorschau des Kommentars zu ermöglichen. Dieses Script wird dann aber auch nur benötigt, wenn es die Möglichkeit von Kommentaren gibt, also in der Regel nur auf einem Beitrag oder einer Seite. Diese beiden sind unter WordPress leicht abzufragen.

<?php if ( is_single() || is_page() ) { ?>
	<script src="<?php bloginfo('template_directory'); ?>/js/example_script.js" type="text/javascript"><!--mce:0--></script>
<?php } ?>

Wohin mit dem Script

Aus meiner persönlichen Sicht plädiere ich dafür, dass Scripte, die nicht unbedingt für den Leser notwendig sind, am Ende einer Seite geladen werden. Damit stelle ich sicher, dass der Besucher den Inhalt, für den er sich in der Regel am meisten interessiert, schnell bekommt. Die meisten Besucher kommen von Suchmaschinen, zumindest sehen das alle Statistiken so, die ich verfolge.

Ist das Script im head eingebunden, dann hat es den Vorteil, dass es beim Laden eingelesen wird und dann im Speicher bereit steht. Nachteilig ist, dass damit der Inhalt warten muss, bis das/ die Scripte geladen sind. Deshalb überlegen, ist es wirklich notwendig.

Im weiteren eine Forderung von mir: Ich möchte, dass Seiten auch ohne aktives JavaScript die Inhalte präsentieren und mir nicht ihren Inhalt verweigern. Mir ist klar, dass ist nicht bei allen Anwendungen möglich, aber für eine Vielzahl von Webseiten wäre es kein Problem, denn JS sind dort nur da, um Spielereien und Mehrwert der Seite zu realisieren.

Beispiel Footer

		<?php if ( is_single() || is_page() ) { ?>
		<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:1--></script>
		<?php } ?>

Alle notwendigen Scripte gehören ansonsten in den head. Allerdings auch diese sind ausgelagert und werden einmalig eingebunden.

Beispiel head

	<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:2--></script>
	<?php if ( is_single() ) { ?>
		<script src="<?php bloginfo('template_url'); ?>/js/example.js" type="text/javascript"><!--mce:3--></script>
	<?php } ?>
	<script type="text/javascript"><!--mce:4--></script>

	<?php wp_head(); ?>

Komprimieren

Auch wenn man die JS-Dateien auslagert und zu einer Datei zusammen fasst, können sie noch eine beachtliche Größe erzielen. Daher kann man als Alternative noch die Komprimierung der Scripte versuchen. Dies ist im übrigen auch mit CSS- und HTML-Dateien möglich, aber das nur am Rande.

Schon das Entfernen von Kommentaren und Leerzeichen bringt Geschwindigkeit. Ebenfalls gilt das für die Verwendung von Variablennamen in PHP, je kürzer, desto schneller. Aber Achtung, ein gesundes Verhältnis sollte gewahrt bleiben, vor allem an Projekten, an den ständig gearbeitet wird. Denn gerade Eindeutigkeit, Übersichtlichkeit und Dokumentation können das Arbeiten enorm erleichtern.

Aber zurück zu JavaScript. Hier bietet sich die Komprimierung an, gerade bei Verwendung von Frameworks, auf die man keinen Einfluss nimmt. Die komprimierte Version wird in der Regel vom Anbieter schon mit angeboten und man muss lediglich diese Version einbinden.

Für das Komprimieren von JavaScript gibt es Online-Tools, die die Arbeit abnehmen und erleichtern. Zwei Beispiele sollen für die Vielzahl an Möglichkeiten genannt werden.

1. Compressor JS und CSS
2. JavaScript Compressor

Ein Hinweis, nach der Komprimierung testen - nicht immer ist das Ergebnis befriedigend.

Alternativ kann man die Dateien noch als gzip-komprimiertes File einbinden. Dazu muss mod_rewrite im Webserver aktiv sein und die .htaccess muss folgenden Inhalt haben. Der Syntax geht davon aus, dass die CSS-Datei direkt im Theme-Ordner liegt und die JavaScript-Dateien im Ordner /js/.

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^js/(.*)\.js$ /js/$1.js.gz [L]
RewriteRule ^/(.*)\.css$ /$1.css.gz [L]
AddEncoding x-gzip text.gz

Dazu einen Linktipp auf einen schlüssigen und klaren Artikel zum Thema: gzip-komprimiertes Javascript und CSS effektiv ausliefern.

Fazit

Ich hoffe, dass es verständlich und einleuchtend ist. Nichtsdestotrotz stellt der Artikel lediglich meinen Standpunkt dar. Für Feedback und Hinweise bin ich wie immer dankbar.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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

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.

Idee und Lösung

Die grundlegende Idee erzeugt für die Unterschiedlichen Inhalte verschiedene div's, welche via Anker angesprochen werden.

	
	. . .

Die einzelnen Boxen sind eingeschlossen in einen weiteren Container (div).

	

		
		. . .
	
	
	 . . .
	
	

		
		. . .
	

Mittels CSS werden dann die Boxen so formatiert, dass sie übereinander liegen und overflow: hidden; sorgt dafür, dass kein Überlauf statt findet.

.content {
height: 35em;
}

#container {
height: 35em;
overflow: hidden;
}

Die Container müssen gleich hoch sein und es ist nur mit overflow: hidden; möglich. Diese Einschränkungen muss man hinnehmen. Alternativ kommt dann wieder die JavaScript-Lösung ins Spiel.

Meine Lösung steht als Download bereit und ich habe den Code übersichtlich in eine Datei gelegt, so dass die Lösung nachvollziehbar sein sollte. Vielleicht hat der eine oder andere Verbesserungsvorschläge?

Demo

Live und in Farbe zu finden in meinen Experimenten: „Tab-Interface ohne JavaScript, nur mit CSS”

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-Datei: tab_interface_mit_css.txt - 13 kByte

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

... sind mir gerade wieder gekommen, als ich meinen FeedReader bemüht habe und bei einem Artikel mehr am Scrollen war, als am Lesen - nur h1-Tags in einem Artikel.

<h1> </h1>
<p> </p>
<h1> </h1>
<p> </p>
<p> </p>

<h2> </h2>
. . .

Die auch nicht bessere Alternative dazu gibt es ebenso in großen Mengen, div - Suppen. Immerhin schon ohne Layout via table.

<div class="heading1"> </div>
<div class="content">
	<p></p>
	<p></p>
</div>

<div class="heading2"> </div>
. . .

Linktipps

• Webseiten sind keine Gemälde
• Semantischer Code - Definitionen, Methoden, Zweifel
• Use <h1> for top-level heading
• The Definitive Guide to Semantic Web Markup for Blogs
• SimpleQuiz › Site and Page Titles › Conclusion
• The Ziggurat: A tool for web standards and accessibility assessment

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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.

Beispiel eines klassischen Layouts mit bekannten IDs:

<body>
<div id="wrap">
	<div id="header">
	</div>
	
	<div id="sidebar">
	</div>
	
	<div id="content">
	</div>
	
	<div id="footer">
	</div>
</div>
</body>

mit HTML 5 umgesetzt:

<body>
<div id="wrap">
	<header>
	</header>
	
	<aside>
	</aside>
	
	<article>
	</article>
	
	<footer>
	</footer>
</div>
</body>

zum Artikel: A Preview of HTML 5 (englisch)

Nachtrag

Sam Ruby hat sein Blog mit HTML5 erstellt, zu finden unter diesem Beispiel-Link

Weitere Links

• HTML 5 W3C Editor's Draft

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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"

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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-Datei: div_mit_list.txt - 3 KByte

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

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.

• Viele Tools unter einem Dach (z.B. Speedtest, Backlinkcheck, PageRank visualisieren, Suchmaschinenpostion) - http://www.iwebtool.com/tools/
• IE 5.5-7 Renderer - http://meineipadresse.de/netrenderer/
• Browser-Test, Safari auf Mac OS X - http://snugtech.com/en/safaritest/
• Browser-Test, offen - http://www.anybrowser.com/siteviewer.html
• Browser-Test, 5 Browser (de) - http://browsershots.org/de
• Browser-Test, ~256 verschiedene Browsereinstellungen - http://www.browsercam.com/
• Browser Größe testen - http://www.wpdfd.com/restest.htm
• Google Position testen - http://lixlpixel.org/google_position/
• Suchmaschinen Position testen - http://www.linkvendor.com/seo-tools/
• Ranking nach Feeds - http://www.urlfan.com/
• Deutscher Postionscheck - http://www.seo-server.de/
• Verschieden Schriften testen - http://typetester.maratz.com/
• Performance testen - http://www.websiteoptimization.com/services/analyze/
• Backlinkcheck - http://www.domain-pop.com/backlink-check.php
• Alle Validatoren vom W3C - http://www.w3.org/QA/Tools/#validators
• (x)HTML, WML, XML, DTD, Feed Validator (de) - http://www.validome.org/
• Stylesheet optimieren - http://flumpcakes.co.uk/css/optimiser/
• Stylesheet optimieren - http://www.teenage.cz/acidofil/tools/cssformat.php
• Farbbeeinträchtigung testen - http://colorfilter.wickline.org/
• Zugänglichkeitstest (508) - http://www.contentquality.com/
• Barrierecheck (A, AA oder AAA) - http://www.tawdis.net/taw3/cms/en
• XML Validator - http://schneegans.de/sv/
• Robots.txt Validator - http://www.searchengineworld.com/cgi-bin/robotcheck.cgi
• Qualität, Zugänglichkeit, Sicherheit - http://webxact.watchfire.com/
• Keywords, Webtags finden - http://www.tagthe.net/
• Metatagcheck - http://www.metadoctor.de
• Netz-Tools: Ping, Header, Proxy-Server - https://proxysystems.net
• Domain Informationen - http://centralops.net/co/DomainDossier.aspx
• Domain Resource Center (Wertschätzung der Domain) - http://leapfish.com
• Kopiensuche im WWW - http://www.copyscape.com

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Demo:

Das Plugin ist auf meiner Seite aktiviert und wird hier für jede Art von Abbreviations verwendet. Es wird kein Abbreviations händisch verarbeitet, alle werden in dem Plugin gepflegt. Natürlich läßt sich die Verwendung nur sauber erkennen, wenn ihr euch den Quellcode der Seite anseht. Ein Auszug seht ihr hier für einige Beispiel-Abbreviations.

• Archit. - im Quellcode dann so ausgezeichnet:

  <abbr title="Architektur">Archit.</abbr>

• Rundf. - im Quellcode dann so ausgezeichnet:

  <abbr title="Rundfunk">Rundf.</abbr>

• Amtsspr. - im Quellcode dann so ausgezeichnet:

  <abbr title="Amtssprache">Amtsspr.</abbr>

Anforderungen:

Installation:

1. Die Datei downloaden
2. Die Datei in eine php-Datei umbenennen - abbreviations.php, bzw. das zip entpacken.
3. Die Datei in euren WordPress-Plugin-Ordner kopieren: /wp-content/plugins/
4. Das Plugin in eurer WP-Admin-Oberfläche aktivieren.

"abbr" => "Erläuterung",

Empfehlenswert ist es, die Abkürzungen mit Punkt und Leerzeichen zu speichern, da es Probleme mit dem Punkt im Text gibt.
Beispiel:

"bzw. " => "beziehungsweise",

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 php-Datei: abbreviations.phps

Download als zip-Datei: abbreviations.zip

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Unsinnige Argumente für XHTML

Einige Leuten meinen, XHTML sei besser als HTML für „moderne“, auf CSS basierende Layouts ohne Tabellen geeignet und habe Vorteile für die Barrierefreiheit. Das ist natürlich völliger Quatsch. HTML 4.01 und XHTML 1.0 unterscheiden sich lediglich syntaktisch. Die Verwendung von XHTML 1.1 ist sogar nachteilig für die Barrierefreiheit.

XHTML-Einmaleins

Daraus resultieren folgende Empfehlungen, die man beim Erstellen von Webinhalt beachten sollte. Außerdem werden Links zu den notwendigen Validatoren angeboten und Tipps für xhtml-Dokumente gegeben.

• Verwenden Sie XHTML 1.0 Strict.
• Verwenden Sie einen XML-Validator. Der W3C-Validator und Validome sind keine XML-Validatoren.
• Beachten Sie dabei die Kompatibilitätsrichtlinien und überprüfen Sie die Einhaltung.
• Codieren Sie Ihre XHTML-Dokumente und Stylesheets in UTF-8. Verwenden Sie keine Entity-Referenzen außer <, >, " und &.
• Liefern Sie Ihre Dokumente als text/html aus. Content Negotiation lohnt sich nicht.

XHTML-Einmaleins

Link zu seinem xhtml-Schema-Validator

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Download als xls-Datei: Web-Übersicht - 480 kByte

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren