Aktuell gibt es die Idee die Möglichkeiten von CSS mit maximal 1k Stylesheet aufzuzeigen – CSS1k.

A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS.

Auch an dieser Idee habe ich mich, neben dem Beitrag vom Schepp, beteiligt und ein kleines „Design“ entwickelt.

Über derartige Aktionen mag man streiten, denn sie zeigen aus meiner Sicht zwar die Möglichkeiten von CSS ohne die Änderung von Markup, aber das Markup dieser Projekte ist in der Regel so simpel, dass man es nur sehr bedingt in die reale Welt portieren kann. Trotzdem kommt man bei max. 1024 Byte schnell an die Grenzen, da hilft kein Minimizer mehr - man muss schon in der Struktur des CSS Hand anlegen und nicht beliebig stylen. In jedem Fall eine gute Abwechslung und ein Beispiel für den Wert der Community.

Das Projekt CSS1K kann über Github bequem erweitert werden, so dass eigene Lösungen einfließen – vielleicht hat der oder andere Lust von euch und macht mit.

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

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

Innerhalb der kleinen Spielerei sind diverse Anpassungen für Media Queries drin, so dass die Seite auch einen Effekt hat, wenn man die Größe des Browsers ändert bzw. mit verschiedenen Geräten auf die Seite gelangt. Dabei habe ich keinen Wert auf Schönheit gelegt, sondern eher Pragmatismus und Effekthascherei genutzt. So nutze ich Transition via CSS3 um das Verändern etwas animiert zu gestalten und so die Darstellung zu hübschen.
Schaut euch den Code einfach an, entweder direkt auf der Seite oder im Projekt auf github, wo ich alles abgelegt habe.

Für alle, denen noch der Zusammenhang fehlt; bitte einfach die Seite besuchen und den Browser in der Größe ändern; dabei die Ausgabe am oberen Rand beachten. Alternativ dieses kleine Video.

Mir ist klar, dass dies nicht die beste Lösung ist, da Media Queries in jeder erdenklichen Form auftauchen können und die Ausgabe den größten Nutzwert hat, wenn man die Ausgabe der optimierten Größe anpasst. Aber es stellt eine einfache und schnell Lösung dar. Alternativen sind vermutlich via JavaScript denkbar, die das Stylesheet parsen und anhand der gefunden Anweisungen zu Media Queries den Viewport auswerfen – aber diese Form erfordert etwas mehr zeit und Kraft; also schnell überzogen und in meinem Fall ist die vorgestellte Lösung vollkommen ausreichend; durch die Erweiterungen von Frederic sind auch noch andere Viewports eingeflossen und in diesem Zusammenhang habe ich mir bekannte typische Größen und Ausrichtungen integriert – Portrait und Landscape. Alles weitere seht ihr in der angesprochenen debug.css und direkt auf der Seite, die den Source des Stylesheets ausgibt.

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

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

Das Plugin ist auf Github abgelegt und erwartet eurer Erweiterungen - also bitte Forken und neue Ideen und Möglichkeiten einbringen – github.com/bueltge/WordPress-Admin-Style

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

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

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

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

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

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

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset=utf-8 /> 
	
	<title>Simple Media Queries Tester</title> 
	
	<meta name="description" content="Simple Media Queries Tester" /> 
	<meta name="author" content="Frank Bueltge - http://bueltge.de" /> 
	
	<style type="text/css" media="screen">
	/*<![CDATA[*/
		body { background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:20px; }
		a { text-decoration:none; color:#1152c8; }
		fieldset { border:1px solid #ccc; margin:0 0 20px 0; }
		form#mediaqueriestest input { margin:auto; }
		form#mediaqueriestest button { margin:auto;text-shadow:0 1px 1px #000;text-transform:uppercase; }
		form#mediaqueriestest button:hover { background:#1152c8;color:#000;cursor:pointer; }
		form#mediaqueriestest input:active, form#mediaqueriestest input:focus { outline:none;border:1px solid #333;background:#fff;color:#000;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend, form#mediaqueriestest input, form#mediaqueriestest button, iframe, footer {
background:#333;color:#fff;padding:7px 25px;border:1px solid #333;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; }
		form#mediaqueriestest fieldset, form#mediaqueriestest legend { background:#ccc;color:#000;margin:10px;padding-bottom:25px; }
		form#mediaqueriestest legend { padding:7px 25px;-webkit-box-shadow: 2px 2px 2px #333; }
		iframe { margin:0 auto; border:1px solid #ccc; margin:10px; }
		footer { display:block; color:#333; margin:20px 0 0 0; border:2px solid #ba0100; background:#fff; }
	/*]]>*/
	</style>

</head> 
<body>
	<header>
		<h1><a href="http://bueltge.de/" title="to the weblog of the author">Simple Media Queries Tester</a></h1>
	</header>
	
	<section>
		<form id="mediaqueriestest" action="<?php echo htmlspecialchars( strip_tags($_SERVER['PHP_SELF']) ); ?>" method="get">
		<fieldset>
		<legend>Test your URL</legend>
		<label for="testurl">Test URL</label>
			<input type="text" name="testurl" id="testurl" placeholder="Input your test url here" size="70">
			<button type="submit">Test it!</button>
		</fieldset>
		</form>
		<?php
		if ( !empty($_GET['testurl']) ) {
			$newURL = htmlspecialchars( strip_tags($_GET['testurl']), ENT_QUOTES );
			if (preg_match("/^(www.)/i", $newURL) )
				$iframeurl = 'http://'.$newURL;
			elseif (preg_match("/^(http:\/\/)/i", $newURL))
				$iframeurl = $newURL;
			else
				$iframeurl = 'http://www.' . $newURL;
			
			echo '<iframe name="fullsize" id="fullsize" width="960" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="netbook" id="netbook" width="650" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
			echo '<iframe name="mobile" id="meinframe" width="450" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>';
		} else {
			echo '<p>keine Seite geladen - Adresse Eingeben</p>';
		}
		?>
	</section>
	
	<footer>
		<p>
		&copy; 2010 <a href="http://bueltge.de/">bueltge.de</a> &middot; <a href="http://bueltge.de/impressum/">Impressum</a>
		</p>
	</footer>

</body>
</html>

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

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

Gelegentlich möchte man in seiner Blog-Sidebar Dropdowns-Menüs (select-Elemente) zur Navigation der Kategorien und des Archivs unterbringen und der WordPress-Codex bietet in den Dokumentationen auch entsprechende Lösungen für Kategorien und Archiv an, die allerdings beide nur mit aktiviertem JavaScript funktionieren. In beiden Fällen wird die URL der Ziel-Seite im value-Wert der im Dropdown-Menü verbauten option-Elemente gespeichert und sobald man einen Eintrag auswählt, wird man via JavaScript auf eben jene URL weitergeleitet. Die fast gleiche Funktionalität ließe sich aber auch ganz ohne Scripts erreichen:

1. Ein altmodisches GET-Formular mit Absendebutton anlegen, das an die Basisadresse der Website sendet
2. Das select in eben dieses Formular stecken und name="cat" angeben
3. Den option-Elementen als value den Slug der Kategorien geben

Das Absenden des Formulars resultiert dann in einem Aufruf von blog.de/?cat=kategorie und damit der gewünschten Kategorie, ggf. mit einem Redirect auf die suchmaschinenfreundliche Variante der URL. Das funktioniert für den Besucher genau so gute wie die Lösung aus dem Codex, sieht man einmal davon ab, dass man einen Button anklicken muss. Doch genau hier kann man mit JavaScript eingreifen, den Button verstecken und das Absenden des Formulars über einen via Script eingefügten onclick-Handler übernehmen. Das Endresultat sieht dann für Surfer mit Script wie die Codex-Lösung aus und alle anderen kommen dann eben über einen Klick auf den Button an ihr Ziel und alle sind zufrieden. Also an die Arbeit!

Die Grundlage für das Kategorie-Dropdown bildet ein ganz normales HTML-Formular:

<form id="kategorienform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="kategorienselect">Zu Kategorie springen</label>
    <select id="kategorienselect" name="cat">
        <option value="">-- Bitte auswählen</option>
        <?php
            $categories = get_categories('hierarchical=0');
            foreach($categories as $category){
                $selected = (is_category($category->cat_ID)) ? 'selected' : '';
                echo '<option '.$selected.' value="'.$category->cat_ID.'">'.$category->cat_name.' ('.$category->count.')</option>';
            }
        ?>
    </select>
    <input id="kategorienbutton" value="Kategorie abrufen" type="submit">
</form>

Dieses könnte man so in die Seitenleiste des Dokuments werfen und es würde funktionieren, doch wir wollen ja noch den Absenden-Button loswerden und die Umleitung direkt bei der Auswahl einer Kategorie starten. Hierzu braucht es nicht mehr als 6 Zeilen JavaScript, die man direkt unter dem Formular einfügen kann:

<script type="text/javascript">
    document.getElementById('kategorienselect').onchange = function(){
        if(this.value){
            document.getElementById('kategorienform').submit();
        }
    };
    document.getElementById('kategorienbutton').style.display = 'none';
</script>

Ändert der Benutzer seine Auswahl im select-Element, wird (sofern nicht gerade der „Bitte auswählen“-Eintrag gewählt wird) das Formular automatisch abgesendet, auch ohne den mit style.display = 'none' unsichtbar gemachten Button aktivieren zu müssen – und fertig ist das benutzerfreundliche und trotzdem auch ohne JavaScript funktionierende Kategorie-Dropdown! Das ist zwar etwas mehr Code als die drei Zeilen aus dem Codex, funktioniert dafür aber garantiert bei jedem Besucher. Und das Prinzip ist recht simpel, vorausgesetzt man plant von vornherein entsprechend. Da eben das bei WordPress selbst nicht passiert ist, müssen wir etwas mehr tippen – beziehungsweise im Falle des Archiv-Dropdowns sogar sehr viel mehr:

<form id="archivform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="archivselect">Zu Monat springen</label>
    <select id="archivselect" name="m">
        <option value="">-- Bitte auswählen</option>
        <?php
            $query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, COUNT(ID) as `posts`
                FROM $wpdb->posts
                WHERE post_type = 'post' AND post_status = 'publish'
                GROUP BY YEAR(post_date), MONTH(post_date)
                ORDER BY post_date DESC";
            $key = md5($query);
            $cache = wp_cache_get('select_archives', 'general');
            if(!isset($cache[$key])){
                $arcresults = $wpdb->get_results($query);
                $cache[$key] = $arcresults;
                wp_cache_set('select_archives', $cache, 'general');
            }
            else{
                $arcresults = $cache[$key];
            }
            if($arcresults){
                global $wp_locale;
                foreach((array) $arcresults as $arcresult){
                    $value = $arcresult->year.$arcresult->month;
                    $text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($arcresult->month), $arcresult->year);
                    $count = '&nbsp;('.$arcresult->posts.')';
                    $selected = (is_month() && get_query_var('year').get_query_var('monthnum') == $value) ? 'selected' : '';
                    echo '<option '.$selected.' value="'.$value.'">'.$text.$count.'</option>';
                }
            }
        ?>
    </select>
    <input id="archivbutton" value="Archiv abrufen" type="submit">
</form>

Das Problem beim Monatsarchiv ist, dass man ohne einen eigenen SQL-Query nicht an die Informationen herankommt, die man für ein Monats-Archiv braucht. So kommt man nicht drum herum, manuell die Datenbank zu bemühen und das Ergebnis händisch zu cachen. Das Prinzip ist aber identisch: einfach ein herkömmliches Formular ausgeben und wieder mit sechs kleinen Zeilen JavaScript aufwerten:

<script type="text/javascript">
    document.getElementById('archivselect').onchange = function(){
        if(this.value){
            document.getElementById('archivform').submit();
        }
    };
    document.getElementById('archivbutton').style.display = 'none';
</script>

Wir fassen zusammen: viele Zeilen Code, aber kompliziert ist das Prinzip nicht. Unobtrusive JavaScript ist eine Frage der intelligenten Planung und wenn die mal, wie bei WordPress, nicht von Haus aus mitgeliefert wird, muss man sich eben behelfen. Bei herkömmlichen Websites gibt es keinen Grund, die Bedienung komplett von JavaScript abhängig zu machen und falls doch mal etwas Mehraufwand entsteht, so ist er die saubere Trennung der Schichten und den Zugänglichkeits-Bonus allemal wert.

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

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

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

Das CSS ist nicht in allen Browsern nutzbar, siehe Übersicht, liefert daher nur in den aktuellen Browsern den erwarteten Effekt. Der Internet Explorer, Browser kann man ihn ja schlecht nennen, hat hiermit so seine Schwierigkeiten.

Eine Alternative ist es den Callback für die Funktion mitzugeben und eine eigene kleine Funktion in der functions.php abzulegen, die sich um das Ausgeben des CSS kümmert. Die folgende Funktion tut dies statisch, fragt also nur das Bild ab und nutzt die Werte aus dem Backend nicht.

function fb_header_callback() {
  
  $background = get_background_image();
  if ( !$background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";
  
    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>
<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}

Diese Funktion muss in der Funktion als Callback mitgeben, sie kann natürlich beliebig angepasst werden. In der functions.php des Themes sollte es, wenn es die Background-Image-Funktionalität schon gibt, die Funktion add_custom_background() geben. Dieser muss im ersten Parameter mit der neuen Funktion erweitert werden und nun wird der Standard-Callback von WordPress nicht mehr aufgerufen.

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

Als Hinweis, der Style wird dann via Hook wp_head direkt im head ausgegeben, eher unschön - wie ich finde, und daher solltet ihr diese Formatierung wohl besser im Stylesheet ablegen, da sie eh statisch ist und nicht vom User angepasst werden kann. Ebenso ist wichtig das der Hook auch im Theme vorhanden ist, was aber auch für andere Plugins oder Funktionen wichtig ist.

Werte aus dem Backend nutzen

Als letzter kleiner Tipp für eure eigenen Anpassungen möchte ich noch zeigen, wie man die Werte aus dem Backend bekommt und nutzt.
Die Hintergrundfarbe der Optionen zum Hintergrundbild wird mit folgender Funktion zurück gegeben:

$color = get_background_color();

Das Bild bekommt via:

$background = get_background_image();

Und einzelne Einstellungen zum Style werden via get_theme_mod($name); abgefragt:
Der folgende kleine Schnipsel gibt die gesetzten Werte zum Theme zurück.

$mods = get_theme_mods();
var_dump($mods);

Dies könnte beispielsweise für das Standard Theme Tweny Ten wie folgt aussehen

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Aufgrund dieser Werte im Array kann man beispielsweise den Wert background_repeat holen,

$repeat = get_theme_mod( 'background_repeat' );

der in diesem Beispiel no-repeat zurück gibt.

Mit den anderen Werten kann man genauso verfahren; eine Menge an Spielraum und Möglichkeiten.
Zum den Themen CSS und Hintergrund findet man einen ausführlichen Artikel bei Chris: Perfect Full Page Background Image

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

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

Vor zehn Jahren haben A List Apart einen Aufruf gestartet Much Ado About 5K. Weniger als 5 kByte waren zulässig um kleine Websites zu machen - diese Arbeiten sind aus meiner Sicht in erster Linie Anregung zu eigenen Gedanken und Inspiration für neue Arbeiten. Die Gemeinschaft der Webentwickler diskutiert gerne und so sind diese Formen der Themenanregung beliebt. Neben der Größe der Website von 10 k gibt es einige weitere Bedingungen - Standards: html5 und die Darstellung in Firefox, IE9, Safari und Chrome & diverse Bibliotheken - und damit ist zehn Jahre später ein neuer Wettbewerb 10k Apart durch fast das gleiche Team ins Leben gerufen. Zeit ein wenig Spaß zu haben und eine eigene kleine Arbeit bereit zu stellen.

Auch ich habe mich ein wenig von der vielen Arbeit erholt und mal eine kleine Spielerei gemacht, die man nun dort als App besichtigen kann - nichts besonderes, aber unterhaltsam und eine schöne Abwechslung. Ich wollte jeden Tag einen neuen Wert geben und uns die Erinnerung an jeden neuen Tag geben - 10k sollten dabei dicke reichen und so habe ich html5, CSS3 und JavaScript eingesetzt. Ebenfalls spiele ich mit den Animationsmöglichkeiten von CSS3, die allerdings aktuell nur in Webkit-Browsern wie Safari und Chrome laufen. Schaut es euch an und vielleicht nutzt es dem Lernen und dem Verständnis der neuen Mittel. Aber vielleicht motiviert es euch auch um ebenfalls an der Challange zu 10k Apart teilzunehmen.
Die Gallerie hat schon jetzt tolle Sachen dabei - auch wenn nicht alle Apps die 10k einhalten - zumindest wenn man mit Libraries wie jQuery arbeitet . Aber im Ende ist es eine tolle Aktion und die Teilnahme inspiriert. Es macht Spaß mit den neuen Möglichkeiten zu arbeiten und kein ToDo für alte Browser zu implementieren.

* Alternativ kann man sich die Spielerei auch in meinem kleinen Labor ansehen.

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

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

Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.

Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Arbeit mit...

Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

• HTML 5
• html5doctor
• HTML5 Validator
• HTML5 enabling script

Warum das alles?

Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.

Wie komme ich daran?

Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.

Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.

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

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

Immer wieder kamen Fragen rein, ob das alte Theme aktualisiert wird und wann - daher hier nun die Info, ich habe einen Stand erreicht, der stabil ist und das Theme ist mit der aktuellen Version 2.7 und der kommenden Version 2.8 von WordPress kompatibel. Ebenso ist es abwärtskompatibel, getestet bis Version 1.5 von WordPress. Daher hier nun offiziell die Freigabe zum Download und Nutzen.

• Projektsite
• SVN Repository mit Diskussionsplattform

Ein Hinweis, das Theme ist kein Framework es ist ein einfaches Theme, welches lediglich die Grundlagen eines Theme enthält und diverse Vorzüge aus meiner Arbeit mir WordPress vereint. Es dient also wirklich dazu, dass man ein Theme für Kunden oder sich selbst erstellt, angepasst auf die Anforderungen. Es bringt keinerlei überflüssiges Markup mit, was man dann nicht braucht und wie bei Frameworks zum Teil üblich, mitschleift. Es soll auch so bleiben, keine Child-Themes oder ähnliches, auch keine Hooks zum komfortablen erweitern mit Code. Ich mag diese Art der Arbeit, schlank und schnell, direkt auf die Aufgabe zugeschnitten und daher kann ich mich nicht sonderlich mit Frameworks im WordPress-Theme-Sektor anfreunden; heißt aber nicht, dass andere Entwickler das auch tun sollten!

Wenn euch diese Arbeit liegt und ihr ebenfalls das Theme in erster Linie selbst schreibt, dann steht euch damit eine Grundlage bereit. Durch die Verwaltung im SVN steht euch ebenso eine Möglichkeit zur Verfügung Fehler und Hinweise zu melden, worüber ich mich sehr freuen würde.

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

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

Eine neue Lösung namens CiteDrag von Elijah Grey ermöglicht es, dass man Elemente einfach per Drag&Drop in das Textfeld holt, Markieren und ziehen oder Elemente direkt ziehen.

Schlank und benutzerfreundlich kann die Lösung die eine oder andere Website aufwerten, daher sicher einen Blick wert: CiteDrag. Demo und Syntax sind verfügbar, Hintergründe sind im Artikel von Elijah zu finden.

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

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

Der klare Umschwung ist bei mir nach dem Lesen des Buches „High Performance Websites“ von Steve Souders, Chief Performance Yahoo! bei Yahoo!, gefallen und ich löse nun alles per <link.
Nun ist mir aber die öffentlich zugängliche Seite des Buchautors wieder unter gekommen und dort publiziert Steve einen Beitrag zum Thema. Diesen Link möchte ich damit einfach mal als Begründung, Rechtfertigung oder Lesetipp hier präsentieren.

Die klare Aussage: Kein @import nutzen.

Spannender Artikel, der sicher bei dem einen oder anderen Veränderungen hervorruft. Daher der Tipp, den Beitrag don’t use @import zum Buch zu lesen.

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

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

Diesem Thema hat Andrés Nieto verschrieben und es lohnt den Artikel zu überfliegen, die Übersetzungsfunktion bringt sicher nicht das beste Ergebnis, aber mit ein wenig Verständnis und Mühe ist das Ergebnis seiner Bemühungen ersichtlich. Daher meine Empfehlung: „Carga asíncrona de grandes cantidades de dátos con Ajax“ lesen.

In letzter Zeit hört man immer wieder gern, das JSON sich wunderbar ansprechen lässt und gerade im Bezug auf JavaScript kann sich der Entwickler hier schon eine Menge an Zeichen sparen. Schaut euch den Code im Verhältnis zu den Diagrammen an, es lohnt.
Ich denke, dass die Ergebnisse dem einen oder anderen Informationen liefern, die die Entscheidung zu einem Format leichter machen können.
Wer unschlüssig ist, kann auch den Code direkt im Artikel nutzen und eigene Werte ermitteln, wobei es sicher nochmal spannend ist, den Vergleich auf unterschiedliche Browser zu erweitern.

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

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

Aus meiner Sicht ist die deutsche Sprache aber ein wenig komplexer und die bekannten Lorem ipsum-Texte bilden daher nicht immer alle eventuellen Probleme ab. Hintergründe und Infos zu diesem Thema werden sehr schön in dem Artikel „Blindtexte als Chance“ der Webkrauts dargestellt.

Zu diesem Zweck habe ich mir eine Seite erstellt, die mir diverse Auswahlbereiche mit HTML-Tags und Blindtexten in deutscher Sprache zur Verfügung stellt. Dabei habe ich die Idee des HTML-Impus von Chris Coyier genutzt und einzelne Bereiche angelegt, die die Übersicht ein wenig wahren. Ebenso kann man via Klick auf den Titel einer Box den Inhalt in die Zwischenablage kopieren.

Wer also ebenso ab und dann diverse Inhalte und Tags benötigt, gern kann es genutzt werden. Ebenso freue ich mich über Ideen zur Verbesserungen.

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

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

Wie so oft ist das aber ein wenig übertrieben, und wie auch schon in der Vergangenheit mit der Integration von Links zu Social Bookmark Diensten, gibt es auch dafür eine einfache Lösung mit Hilfe einer Funktion aus dem WordPress Core.

Twitter stellt eine URL bereit, die genau das Empfehlen von Beiträgen oder anderen Links bewerkstelligt. Mit Hilfe des Permalink-Template Tag von WordPress ist daher auch einfach und schnell der Link generiert.

<a href="http://twitter.com/home?status=Lese:%20<?php the_permalink(); ?>">Tweet this</a>

Nun gilt es nur die Syntax in das Template des Themes zu integrieren, in der Regel sollte das die single.php des Themes sein. In einigen einfachen Fällen kommt die index.php ebenso in Frage, je nach Aufbau des Themes.

Erweiterung via Tiny-URL

Ein kleines Update möchte ich nachschieben, denn der einen oder andere Nutzer will die URL bei der Übergabe direkt kürzen - siehe Ad in den Kommentaren, denn 140 Zeichen sind doch recht wenig und hier gilt es Zeichen sparen. Aber auch dafür gibt es eine einfache Lösung, die jedoch eine Funktion benötigt, die aus unserem Permalink ein verkürzte URL erstellt.

Dazu muss man nicht viel coden oder suchen, den der Service von TinyURL.com stellt dazu eine API bereit, der diese Aufgabe einfach übernimmt. Die nötige Funktion habe ich von René genommen, da er sie schon in seinem Blog veröffentlicht hat.

Dazu lege ich folgende Funktion in die functions.php des Themes ab.

/**
 * get a short/tiny url
 * @author: René Ade
 * @link: http://www.rene-ade.de/inhalte/php-code-zum-erstellen-einer-tinyurl-ueber-tinyurl-com-api.html
 */
if ( !function_exists('fb_gettinyurl') ) {
	function fb_gettinyurl( $url ) {
	
		$fp = fopen( 'http://tinyurl.com/api-create.php?url=' . $url, 'r' );
		if ( $fp ) {
			$tinyurl = fgets( $fp );
			if( $tinyurl && !empty($tinyurl) )
				$url = $tinyurl;
			fclose( $fp );
		}
	 
		return $url;
	}
}

Die Integration des Link in das Template des Themes muss dann allerdings ein wenig anders aussehen, denn the_permalink() ist für die Ausgabe erstellt und übergibt nicht nur den Wert der URL. Aber auch hier ist die saubere Trennung in WordPress von echo und return-Funktionen überaus nützlich und so kann man einfach und schnell die Basis dieses Template Tags nutzen - get_permalink().

Nun steht die Funktion zum Ertsellen einer verkürzten URL bereit und wir können den eingangs beschriebenen Link in das Template einbauen. Eine mögliche Syntax könnte wie folgt aussehen.

<a href="http://twitter.com/home?status=Ich%20empfehle:%20<?php echo fb_gettinyurl( get_permalink() ); ?>">Tweet this</a>

URL Codierung

Weil es auch dazu schon Fragen gab, gebe ich nochmal kurz einen Hinweis. In der URL kann man nicht einfach ein Leerzeichen übergeben, ähnlich ist es mit anderen Zeichen und so muss man diese Zeichen codieren. Dies kann man via PHP machen oder nutzt eine kleine Tabelle zum Nachschlagen. Damit erschließt sich dann auch, warum ich %20 in meinem Text einsetzen - %20 steht für ein Leerzeichen.

Arbeitet mit Hilfe der PHP Funktion, dann könnte die obige Syntax wie folgt aussehen.

<a href="http://twitter.com/home?status=<?php echo urlencode( 'Ich empfehle: ' ) . fb_gettinyurl( get_permalink() ); ?>">Tweet this</a>

Tweet die Kommentare

Auch das empfehlen einzelner Kommentare sollte damit klappen, denn auch das ist im Grunde nur ein Link. Da hier die URL wesentlich länger ist, zeige ich gleich mal die Syntax mit Hilfe der obigen Funktion um eine kurze URL zu generieren. Hier im Blog ist diese Möglichkeit nicht aktiv und wurde auch nicht getestet - sollten also Verbesserungen bekannt sein oder Fehler auffallen, dann bitte ich um Hinweis in den Kommentaren.

<a href="http://twitter.com/home?status=Kommentarempfehlung:%20<?php echo fb_gettinyurl( get_permalink() . '#comment-' . get_comment_ID() ); ?>">Tweet this</a<

© 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 wünsche mir, dass damit die Fragen für mich klarer werden und die Nutzung einfacher wird. Ebenso kann es natürlich genutzt werden um sich auf spezielle Bereiche oder auch nur Wörter zu beziehen, sei es wegen einer Diskussion, Korrektur oder einfach nur Rechtschreibfehler. Ich würde mich freuen, wenn ich ein Feedback bekomme, ob die Funktion sinnvoll erscheint und wie das Handling ist.

Hinweise

Die Möglichkeit besteht nur, wenn mein Blog mit aktivem JavaScript besucht wird. Ich habe es unter diversen Browsern getestet und bisher keine Fehler entdeckt, lediglich Unterschiede in der Darstellung, die aber nur auf Grund des entsprechenden Stylesheets zu erwarten waren.

Die Technik

Der eine oder andere möchte vielleicht mehr dazu wissen und die gleiche Möglichkeit involvieren, daher hier in einigen wenigen Worten, wo das ganze her ist und wie man es integriert.

Das JavaScript um diese Möglichkeit anzubieten wurde von Jim Jeffers mit Hilfe von jQuery erstellt. Da ich hier auch im Blog jQuery für diverse Umsetzungen nutze, wollte ich gern diesen Mehrwert ebenso hinterlegen. Natürlich muss das Framework jQuery vorhanden sein, minimal Version 1.2.6. Ist dieses eingebunden, so muss man lediglich das Script von Jim hinterlegen und den Bereich, der die Funktion haben soll mit einer entsprechenden Klasse ausstatten. Im Standard ist das die Klasse quotable.

Hinweis: Wenn ihr WordPress ab Version 2.7 einsetzt und den Template Tag post_class() nutzt, dann muss diese Funktion lediglich um die Klasse erweitert werden, ein Beispiel: