HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

• HTML5 Please

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen.

Kopiert das nachfolgende Snippet in den head oder footer eurer Website. Wenn JavaScript aktiv ist, wird dem body die Klasse "js" zugewiesen.
jQuery wird übrigens über Google eingebunden. Wenn das Framework bei euch bereits aktiv ist, könnt ihr die obere Zeile also weglassen.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').addClass('js');
  });
</script>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Markup-Validierung gehört zu den absoluten Standard-Aufgaben bei der formellen Überprüfung einer Website. Sei es nun bei der Fertigstellung eines neuen Webprodukts, bei einer Aktualisierungen oder einfach aus Interesse - validiert wird ständig. Lästig ist allerdings, dass in den gängigen W3C-Validatoren jede URL einzeln überprüft werden muss. Bei umfangreichen oder gar dynamischen Projekten wie Blogs kann der Vorgang daher sehr zeitaufwändig werden. W3Clove überprüft alle Unterseiten einer Website mit nur einem Klick.

Umfangreiche Überprüfung über Domain oder Sitemap.xml

Ihr könnt den Dienst mit der Domain oder der Sitemap.xml eurer Website füttern. Anschließend beginnt W3Clove mit der Arbeit und überprüft der Reihe nach alle Unterseiten. Zuletzt erhaltet ihr einen ausführlichen Report mit allen Seiten und ggf. aufgetretenen Fehlern.

• w3clove.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.

Demo

Die folgende Demo-Datei zeigt drei unterschiedliche Möglichkeiten HTML-Elemente per JavaScript zu ersetzen.
Mit der jQuery-Funktion .text() wird der Inhalt eines bestimmten HTML-Elements durch einen alternativen Inhalt ersetzt. Mit .load() ersetzt ihr den Inhalt eines HTML-Elements durch den Inhalt einer externen Datei und .replaceWith() ersetzt nicht nur den Inhalt, sondern auch ausgewählte HTML-Elemente.

Demo in neuem Fenster öffnen

Code

Und so sieht der Quellcode der oben gezeigten Demo-Datei aus. Ich habe alle Funktionen per Kommentar direkt im Code erklärt. Ihr könnt die Dateien der Demo auch herunterladen.

Demodateien herunterladen

Beachtet bitte, dass die Funktion .load() in einer lokalen Version u.U. nicht funktioniert.

...
<body>
<ul>
  <li><a href="#" id="buttonText">Inhalte per .text() ersetzen</a></li>
  <li><a href="#" id="buttonLoad">Inhalte per .load() ersetzen</a></li>
  <li><a href="#" id="buttonReplace">Inhalte per .replaceWith() ersetzen</a></li>
  <li><a href="#" onClick="window.location.reload()">Demo neu laden</a></li>
</ul>

<div id="container">
  <h2 id="topic">Überschrift</h2>
  <div id="content">Inhalt</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
		// .text()
		$("#buttonText").click(function(){
			$("#topic").text("Mit .text() ersetzte Überschrift"); // Der Inhalt von #topic wird durch den Inhalt von .text() ersetzt
			$("#content").text("Mit .text() ersetzter Inhalt"); // Der Inhalt von #content wird durch den Inhalt von .text() ersetzt
		});

		// .load()
		$("#buttonLoad").click(function(){
			$('#container').load('ajax/content.html'); // Der gesamte Inhalt von #container wird durch den Inhalt der Datei "ajax/content.html" ersetzt.
		});

		// .replace()
		$("#buttonReplace").click(function(){
			$('#container').replaceWith("<div id='new'><h2>Alles mit .replace() ersetzt</h2><div>Jetzt musst du die Demo neu laden, da sich alle Elemente verändert haben. </div>"); // Sowohl das Element #container als auch der gesamte enthaltene Content wird durch den Inhalt von .replace() ersetzt.
		});
  });
</script>
</body>
...

Wenn ihr euch weiter mit diesem Thema befassen möchtet, empfehle ich euch folgende weiterführende Links zu den hier beschriebenen Funktionen und Themen.

• api.jquery.com/text
• api.jquery.com/load
• api.jquery.com/replacewith
• googlewebmastercentral-de.blogspot.com/2011/11/was-ist-cloaking.html

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Komplexe und hochwertige WordPress-Themes verfügen in der Regel über eine so genannte "Theme Options Page" - eine zusätzliche Seite im Dashboard anhand der ein Benutzer das Theme über die normalen Möglichkeiten hinaus anpassen kann. Das TwentyEleven-Theme von WordPress wird beispielsweise mit einer solchen Options-Page ausgeliefert. Hier könnt ihr u.a. auswählen ob das Theme schwarz oder weiß sein soll, in welcher Farbe Verlinkungen auf der Website dargestellt werden und ob ihr eine Sidebar anzeigen möchtet.
In diesem Beitrag möchte ich euch zeigen wie ihr selbst eine Theme-Options-Page erstellt. Anhand eines leicht verständlichen Beispiels werdet ihr das Prinzip sicher schnell auf eure eigenen Projekte übertragen können.

WordPress Theme-Options-Pages

Ich möchte einmal kurz zusammenfassen was wir jetzt vorhaben. Wir erstellen eine Theme Options Page für ein beliebiges WordPress-Theme auf der wir zwei Eingabefelder platzieren. Das erste Eingabefeld dient dazu das Copyright-Datum im Footer des Themes anzupassen, in das zweite Feld kann der Benutzer seinen Google Analytics Tracking Code eintragen. Beide Anpassungen sind normalerweise nur möglich indem der Code der Website bearbeitet und anschließend hochgeladen wird.

Wir arbeiten mit der functions.php des Themes, mit dem WordPress-Dashboard und mit der footer.php. Zunächst erstellen wir über die functions.php die Options-Seite mit allen Inhalten. Über das Dashboard können dann die Daten eingetragen werden. Die Eingabewerte werden in der Options-Tabelle der Datenbank abgelegt. Im letzten Schritt lesen wir die eingetragenen Werte in der footer.php des Themes wieder aus.

Das klingt kompliziert? Ist es aber nicht. 2x Copy & Paste und alles läuft.

functions.php - Theme Options Page anlegen

Der folgende Code gehört in die functions.php eures Themes. Ich habe euch die einzelnen Bereiche der Datei im Code kommentiert.

/* ------------------ */
/* theme options page */
/* ------------------ */

add_action( 'admin_init', 'theme_options_init' );
add_action( 'admin_menu', 'theme_options_add_page' );

// Einstellungen registrieren (http://codex.wordpress.org/Function_Reference/register_setting)
function theme_options_init(){
	register_setting( 'kb_options', 'kb_theme_options', 'kb_validate_options' );
}

// Seite in der Dashboard-Navigation erstellen
function theme_options_add_page() {
	add_theme_page('Optionen', 'Optionen', 'edit_theme_options', 'theme-optionen', 'kb_theme_options_page' ); // Seitentitel, Titel in der Navi, Berechtigung zum Editieren (http://codex.wordpress.org/Roles_and_Capabilities) , Slug, Funktion
}

// Optionen-Seite erstellen
function kb_theme_options_page() {
global $select_options, $radio_options;
if ( ! isset( $_REQUEST['settings-updated'] ) )
	$_REQUEST['settings-updated'] = false; ?>

<div class="wrap">
<?php screen_icon(); ?><h2>Theme-Optionen für <?php bloginfo('name'); ?></h2> 

<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div class="updated fade">
	<p><strong>Einstellungen gespeichert!</strong></p>
</div>
<?php endif; ?>

  <form method="post" action="options.php">
	<?php settings_fields( 'kb_options' ); ?>
    <?php $options = get_option( 'kb_theme_options' ); ?>

    <table class="form-table">
      <tr valign="top">
        <th scope="row">Copyright</th>
        <td><input id="kb_theme_options[copyright]" class="regular-text" type="text" name="kb_theme_options[copyright]" value="<?php esc_attr_e( $options['copyright'] ); ?>" /></td>
      </tr>
      <tr valign="top">
        <th scope="row">Google Analytics</th>
        <td><textarea id="kb_theme_options[analytics]" class="large-text" cols="50" rows="10" name="kb_theme_options[analytics]"><?php echo esc_textarea( $options['analytics'] ); ?></textarea></td>
      </tr>
    </table>

    <!-- submit -->
    <p class="submit"><input type="submit" class="button-primary" value="Einstellungen speichern" /></p>
  </form>
</div>
<?php }

// Strip HTML-Code:
// Hier kann definiert werden, ob HTML-Code in einem Eingabefeld
// automatisch entfernt werden soll. Soll beispielsweise im
// Copyright-Feld KEIN HTML-Code erlaubt werden, kommentiert die Zeile
// unten wieder ein. http://codex.wordpress.org/Function_Reference/wp_filter_nohtml_kses
function kb_validate_options( $input ) {
	// $input['copyright'] = wp_filter_nohtml_kses( $input['copyright'] );
	return $input;
}

Es besteht natürlich auch die Möglichkeit die Theme-Options-Page in einer eigenen Datei anzulegen und diese dann in die functions.php zu laden. Das macht vor allem dann Sinn, wenn die Options-Seite sehr umfangreich ist. Mit diesem Snippet ladet ihr eine externe Datei in die functions.php. Die Datei muss im gleichen Verzeichnis wie die functions.php abgelegt werden.

require_once ( get_stylesheet_directory() . '/theme-options-page.php' );

Theme-Options-Page im Dashboard

Im WordPress-Backend findet ihr die Theme-Options-Page nun im Bereich "Design".

Tragt in beide Felder nun einen Testinhalt ein und speichert die Änderung. Im letzten Schritt übertragen wir die Eingabe in das entsprechende Template.

footer.php - Eingaben im Template anzeigen

Alles was noch fehlt ist das Snippet um die gespeicherten Daten im Theme auszugeben. Für dieses Beispiel benutzt ihr dazu die footer.php.

Zunächst ruft ihr mit get_options (codex.wordpress.org/Function_Reference/get_option) die entsprechenden Werte aus der Datenbank ab. Anschließend stellt ihr die Inhalte über echo dar.

Das folgende Snippet gibt beide Inhalte direkt untereinander aus.

<?php
 $options = get_option('kb_theme_options');
 echo $options['copyright'];
 echo $options['analytics'];
?>

Das wars auch schon.

Weitere Links zum Thema

Wenn ihr euch eingehender mit der Erstellung von Theme-Options-Pages befassen wollt, schaut euch auch folgende empfehlenswerte Artikel und Tutorials an.

• net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel
• wpshout.com/create-an-advanced-options-page-in-wordpress
• smashingwall.com/wordpress/theme-options-page-resources

Außerordentlich lohnenswert ist auch diese Basis-Theme-Options-Page. Hier sind alle Arten von Eingabefeldern (Input, Select, Radio, Checkbox etc.) enthalten.

• themeshaper.com/2010/06/03/sample-theme-options/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Am 3. Dezember 2011 findet in Köln der 28. Multimediatreff (MMT) statt. Diesmal dreht sich das Event um die neuen Webstandards HTML5 und CSS3. Insgesamt sind acht vielversprechende Vorträge von Kollegen und Experten der Szene angekündigt. Neben dem sehr fairen Ticketpreis von 49,- Euro gibt es kostenlose Verpflegung.
Ich bin übrigens selbst am 3. Dezember vor Ort und werde die Veranstaltung besuchen. Wenn ihr also Lust auf ein Treffen habt - meldet euch!

Pressemitteilung

Der angehende Webstandard HTML5 ist in aller Munde - doch was lässt sich heute damit ernsthaft umsetzen? Was kann ich in Verbindung mit CSS3 und JavaScript jetzt schon realisieren? Kann ich demnächst auf Flash verzichten? Was kann Adobe Edge? Diese und weitere Fragen werden von den Experten der Szene beim MMT 28 beantwortet - natürlich wieder in entspannter Atmosphäre mit gratis Pizza und Kölsch!

Der 28. Multimediatreff lädt dieses Mal alle Webentwickler und -designer, wie auch Berater und Entscheider ein, sich über die aktuellen Technologien und Möglichkeiten umfassend zu informieren. Dabei spielen die Themen HTML5, CSS3 und JavaScript eine große Rolle. Neben bekannten Experten und Autoren, werden auch Größen, wie Patrick H. Lauke vom Opera-Team und Marco Zehe von der Mozilla Corporation Vorträge zum Thema halten.
Zudem wird Adobe sein neues Animationstool Edge sowie den Status Quo in Sachen Flash Platform vorstellen. Und Microsoft lässt die Teilnehmer ein wenig hinter die Kulissen von Windows 8 schauen und zeigt, wie man mit Visual Studio native Web Apps für Windows entwickelt.

Weitere Infos zur Veranstaltung und der Anmeldung finden Sie unter: http://multimediatreff.de/naechstestreffen.php

Die Teilnehmer zahlen einen Beitrag von 49 € – der Preis versteht sich inklusive Catering. Die Vergangenheit hat gezeigt, dass die Plätze beim Multimediatreff meist schnell vergeben sind - so gilt es sich rechtzeitig anzumelden: http://www.multimediatreff.de/reservieren.php

Über den Multimediatreff

»In entspannter Atmosphäre Fachwissen kommunizieren«, spiegelt in kurzen Worten das Anliegen des Multimediatreffs wieder. Gegründet 1999 in der Hochzeit der Multimedia-Szene veranstaltet der Multimediatreff zu aktuellen Entwicklungen und Technologien der Szene Thementage mit Workshops und Vorträgen von Experten.
Die Aufgabe der Veranstaltung ist es Überblick zu verschaffen und lädt dazu ein über "den Tellerrand hinwegzusehen" – so haben die Veranstaltungen jeweils ein Schwerpunktthema zu dem alle möglichen Lösungsansätze auf objektive Weise angeboten werden. Der Multimediatreff versteht sich zudem als "Non-Commercial-Event" – schlichte Produktwerbung wird den Teilnehmer eines Multimediatreffs nicht geboten.
Zudem funktioniert der Multimediatreff als Kontakt- und Jobbörse für Gleichgesinnte, die alte Bekannte treffen, neue Gesichter kennenlernen möchten oder sich mit Firmen vor Ort treffen um sich näher zu kommen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Responsive Videos mit jQuery-Plugin: FitVids.js

Die erste Lösung die ich euch vorstellen möchte ist das auf jQuery basierende Script FitVids.js von Chris Coyer und Paravel.

Ladet euch das Download-Paket von GitHub herunter und bindet jQuery und FitVids.js in eure Seite ein. Anschließend müsst ihr nur noch den Container des Videos (z.B. .content) manuell angeben. Den Rest erledigt das Script automatisch, indem es jedes Video mit ein paar umschließende CSS-Containern ausstattet.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

• FitVids.js - Website und Demo
• FitVids.js auf GitHub

Das nachfolgende Demo-Video ist mit der Script-Lösung ausgestattet. Wenn ihr testen möchtet wie sich das Video verhält, ändert die Größe eures Browser-Fensters.

Responsive Videos ohne Plugin: Die manuelle CSS-Lösung

Wer kein Script benutzen möchte kann Videos natürlich auch manuell um das notwendige Markup erweitern. Nick La hat vor einiger Zeit einen Artikel zu diesem Thema verfasst den ich hier gerne aufgreifen möchte.

Zunächst einmal müsst ihr alle Videos im HTML-Quellcode mit einem div-Container umschließen.

<div class="responsive-video">
  <!-- hier steht der Embed-Code des Videos -->
</div>

Mit folgendem CSS-Code passt ihr das Video in der Breite immer dem umschließenden Container an. Also üblicherweise dem Content.

.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Wenn ihr das Video in der Breite begrenzen möchtet, müsst ihr einen weiteren, umschließenden Container mit fester Breite verwenden.

Ich habe eine simple Demo-Datei erstellt die beide Varianten enthält. Ihr könnt euch die Demo hier anschauen:

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

• caniuse.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Facebook-API im Footer eingebunden?

Eine häufige Ursache ist die Einbindung der Facebook-JavaScript-API im Footer de Website. In den letzten Jahren haben wir eigentlich gelernt, bestimmte Scripte am Ende der Seite einzubinden um den visuellen Seitenaufbau nicht auszubremsen. Der Internet Explorer 7/8 mag das allerdings nicht und zeigt den Facebook-Like-Button nicht an.
Um dieses Problem zu beheben müsst ihr die Facebook-API vor dem Like-Button einbinden.

dieser Code:

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Muss also vor diesem Code im Dokument eingebunden werden:

<fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier.

Ob es sinnvoll ist die Scripte aus dem Footer zu entfernen, nur um den »gefällt mir«-Button auch im IE zu sehen muss natürlich jeder für sich selbst entscheiden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Moderne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser.
Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.

Cutter.js nimmt euch die Arbeit ab und kürzt Texte unter Berücksichtigung der enthaltenen HTML-Tags.

• tcorral.github.com/Cutter.js

via tagdocs.de

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem entsprechenden Treffer in den Suchergebnissen. Das sieht dann so aus.

Google setzt auf Parameter zur Identifikation

Das Prinzip ist im Grunde genommen sehr einfach. Zunächst müsst ihr von eurer Website oder eurem Blog einen Link auf euer Google+ Profil setzen. Dieser Link wird dann einem Parameter (?rel=author) angereichert um die Beziehung zwischen Website und Google+ zu übertragen. Der entsprechende Link ist dann wie folgt aufgebaut:

<a href="[profile_url]?rel=author">Google+</a>

Ein funktionierendes Beispiel für mein Profil sieht so aus:

<a href="https://plus.google.com/106537592401126010838?rel=author">Google+</a>

Wichtig! Der Link-Text muss unbedingt mit + beginnen oder aufhören! Ein praktisches Tool zur Erzeugung eines Links inkl. G+-Logo bietet Google natürlich auch: google.com/webmasters/profilebutton

Inhalte testen und verifizieren

Sobald ihr die Verlinkung hinzugefügt und hochgeladen habt, solltet ihr einmal testen ob auch alles korrekt eingestellt wurde. Zu diesem Zweck hat Google eine entsprechendes Rich-Snippet-Testing-Tool ins Leben gerufen:

• Rich-Snippet-Testing-Tool

Wenn das Tool keine Fehler angezeigt, müsst ihr nun eine Verlinkungen von eurem Google+ Profil zu eurer Website bzw. zu einzelnen Beiträgen setzen. Das funktioniert innerhalb von Google+ über "Profil bearbeiten → Links". Damit verifiziert ihr den Content und euer Profil gegenüber Google.

Achtet zudem darauf, dass euer Profilbild ein Foto eurer Person zeigt. Ansonsten wird Google die Integration womöglich verweigern.

Your profile picture must be a photograph of yourself and of high quality in order to be eligible for be shown as a thumbnail in search results.

Als letztes müsst ihr dieses Formular ausfüllen und somit den entsprechenden Antrag bei Google stellen:

• Authorship request

Das war's auch schon. Jetzt heißt es abwarten und hoffen, dass Google die Seite in die Suchergebnisse integriert. Ich hatte bisher keinen Erfolg - was aber auch an der Wahl meines Profilbildes oder am Standort Deutschland liegen kann. Wie gewohnt wird Google die Funktion vorerst nur in den USA testen und anschließend ausweiten. Ich werde die Sache auf jeden Fall im Auge behalten.

WordPress-Theme erweitern

Wenn ihr WordPress benutzt und vielleicht sogar mit mehreren Autoren an der Seite arbeitet, müsst ihr das Theme -bzw. die Benutzterprofile innerhalb des WordPress-Backends entsprechend modifizieren.
Es sollte jeder Autor die Möglichkeit haben innerhalb des eigenen Profils den Link zum Google-Profil anzugeben. Dafür muss das Profil erweitert werden. Wie das funktioniert habe ich bereits in einem anderen Artikel ausführlich erklärt:

• WordPress-Benutzerprofil um Google+, Facebook, Twitter und andere Felder erweitern

Alternative Methode mit Microformaten

Die oben gezeigte Variante ist die neuere Möglichkeit Google+ in die Suchergebnisse zu integrieren. Eine alternative - jedoch überholte - Methode ist die Integration des rel="author"-Attributs in den Link. Wenn ihr diese Struktur bereits verwendet habt, so braucht ihr euch keine Sorgen zu machen. Laut Google wird auch dieses Format nach wie vor unterstützt.
Mehr Infos dazu findet ihr hier: google.com/support/webmasters/bin/answer.py?answer=1229920

Video

Google hat auch ein ausführliches Video zu diesem Thema veröffentlicht. Besonders schnell zur Sache kommen die Herren allerdings nicht.

Ausführliche Informationen zu diesem Thema findet ihr auch hier:

• google.com/support/webmasters/bin/answer.py?answer=1408986

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst.

Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das Snippet verwenden, so prüft bitte euren Code.

• Google veröffentlicht “+1 Buttons” (PlusOne) für Websites

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Webbrowser haben ja bekanntlich die Eigenschaft CSS-Stile unterschiedlich zu rendern. Damit eine Website trotzdem in allen Browsern gleich - oder zumindest sehr ähnlich - aussieht, verwenden wir daher in der Regel einen so genannten CSS-Reset. Das Projekt Normalize.css geht einen etwas anderen Weg und bietet eine solide Ausgangsbasis für Webprojekte.

Was ist der Unterschied zum CSS-Reset?

Ein gewöhnlicher CSS-Reset wird an den Anfang des CSS-Dokuments gesetzt und dient dazu generell alle HTML-Eigenschaften auf Null zu setzen. Somit gelten für alle Browser erstmal die selben Grundvoraussetzungen. Anschließend müssen jedoch sehr viele Eigenschaften erneut vergeben werden, was Zeit kostet und den Quellcode aufbläst.

Normalize.css geht hier einen leicht abgewandelten Weg. Zwar werden ebenfalls diverse Eigenschaften genormt, allerdings werden auch die typischen Bugs verschiedener Browser behoben und so eine sehr geeignete Grundvoraussetzung für die CSS-Datei geschaffen. Normalize.css ist also eher ein Template für neue Projekte, das natürlich den individuellen Anforderungen noch angepasst werden muss. Es wird nicht wie ein CSS-Reset jedes Mal unverändert in den Code übernommen.

Ich selbst arbeite mit einem eigenen Template für meine Projekte. Nichts desto trotz macht es Sinn sich Normalize.css einmal genau anzuschauen und sinnvolle Bestandteile in das eigene Template zu übernehmen.

Live-Demo

Das Projekt wurde auf GitHub veröffentlicht und wird wohl auch regelmäßig aktualisiert bzw. ergänzt.

Ihr findet das Projekt auf

• necolas.github.com/normalize.css/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und einem im Browserfenster.
Mit folgendem Code-Snippet könnt ihr den Scroller entfernen und Facebook zwingen die volle Höhe der Seite anzuzeigen.

Scrollbalken deaktivieren

Alles was ihr benötigt um den Scroller auszublenden, ist folgendes Code-Snippet und die Application-ID eures iframe-Tabs. Die App-ID findet Ihr unter folgender Adresse: facebook.com/developers/apps.php

Kopiert folgendes Snippet in Eure HTML- bzw. PHP- Seite direkt hinter den öffnenden body-Tag:

<div id="fb-root">
<script src="http://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
appId : 'Hier gehört Eure App-ID hin',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow(100);
</script>
</div>

Vergesst nicht, die App-ID eures Tabs einzutragen. Anschließend könnt Ihr die Datei hochladen. Der Scrollbar sollte nun verschwunden sein.

Update:

Facebook hat den Code zur Entfernung von Scrollbalken zum 1. Januar 2012 verändert. Der oben abgebildete Code enthält jedoch bereits die Neuerungen. Details zu diesem Update könnt ihr auf AllFacebook nachlesen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit Conditional Comments lassen sich verschiedene Internet Explorer Versionen gezielt ansprechen um für den entsprechenden Browser abgewandelten - IE optimierten - Quellcode auszugeben.
Das ist ja auch bitter nötig wie wir alle wissen. Doch nicht nur die Desktop-Versionen lassen sich mit diesen Kommentaren beeinflussen - auch die mobile Version, die Bestandteil von Microsofts mobilen Betriebssystem Windows Phone 7 ist, kann angesprochen werden.

Mobile IE Conditional Comment

Und so sieht der Conditional Comment für den mobilen Internet Explorer aus.

<!--[if IEMobile]>
   Alles was hier steht wird nur vom mobilen IE interpretiert.
<![endif]-->

Eine fantastische Lösung die verschiedenen Browser anzusprechen und dabei die Anzahl der HTTP-Requests möglichst gering zu halten bietet übrigens die Boilerplate-Lösung. Hierbei wird immer dem <html>-Tag per Conditional Comment eine Klasse hinzugefügt die Ihr anschließend im Stylesheet ansprechen könnt.

• Conditional Comments in HTML 5 Boilerplate

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In Photoshop und Illustrator ist die Funktion längst bekannt: zunächst wird ein Pfad erstellt, anschließend wird diesem Pfad ein Text zugewiesen um ihn in beliebigen Formen verlaufen zu lassen. Soll ein solches Design dann allerdings ins Web übertragen werden, so wird meist eine Grafik verwendet was natürlich zum Nachteil hat, dass der Text weder vergrößert noch markiert werden kann und darüber hinaus zusätzlich im Code versteckt werden muss um von Suchmaschinen indexierbar zu bleiben.
Mit CSS3-Funktionen und dem Online-Tool CSSWarp lassen sich diese Pfadtexte nun kinderleicht auch als Plain-Text in die eigene Website integrieren.

Umfangreiche CSS3-Funktionen im Handumdrehen

CSSWarp erleichtert die Arbeit mit komplexen CSS3-Funktionen erheblich. Über ein sehr übersichtliches Interface habt Ihr die Möglichkeit alle wichtigen Optionen sehr einfach umzusetzen.
Zunächst schreibt Ihr einen beliebigen Text und vergebt anschließend Schriftart, Schriftschnitt, Schriftgröße und sogar Kerning. Besonders erwähnenswert ist die Integration der Google Webfont-Bibliothek.

Sobald der Text steht kann der Pfad gezeichnet werden. Hierbei könnt ihr auf vordefinierte offene oder geschlossene Pfade zurückgreifen und alternativ einen eigenen Pfad aufziehen. Auch die exakte Position von Kurvenpunkten über Koordinaten und die Textausrichtung kann individuell angepasst werden.
Wenn Ihr mit der Bearbeitung des Pfadtextes fertig seid könnt Ihr Euch den entsprechenden HTML-Code exportieren. Hierbei wird erfreulicher Weise nicht nur der CSS-Code angezeigt sondern eine vollständige HTML-Seite angeboten.

Ihr findet das Online-Tool unter:

• CSS Warp

Und so sieht der CSS-Pfadtext im Browser aus

Ich habe mir ein Beispiel exportieren lassen und per iframe eingebunden.

Der entsprechende Quellcode sieht so aus:

	<!DOCTYPE html>
	<html> 

	<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	<title>
	Warped Text
	</title>
	<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Permanent+Marker'>
	<style type='text/css'>
	#warped {position: relative; display: block; width:563px; height:449px;}

	#warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
	-moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
	100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }

	#warped span{font-family:'Permanent Marker', sans-serif;font-size:45px;font-weight:normal;font-style:normal;
	line-height:1.15; white-space:pre; overflow:visible; padding:0px;}

	#warped .w0 {-moz-transform: rotate(-6.81rad);-webkit-transform: rotate(-6.81rad);-o-transform:
	rotate(-6.81rad);-ms-transform: rotate(-6.81rad); transform: rotate(-6.81rad);
	width: 29px; height: 51px; left: 35.32px; top: 215.52px;}

	#warped .w1 {-moz-transform: rotate(-6.59rad);-webkit-transform: rotate(-6.59rad);-o-transform:
	rotate(-6.59rad);-ms-transform: rotate(-6.59rad); transform: rotate(-6.59rad);
	width: 26px; height: 51px; left: 72.85px; top: 199.2px;}

	#warped .w2 {-moz-transform: rotate(-6.2rad);-webkit-transform: rotate(-6.2rad);-o-transform:
	rotate(-6.2rad);-ms-transform: rotate(-6.2rad); transform: rotate(-6.2rad);
	width: 24px; height: 51px; left: 111.46px; top: 194.46px;}

	#warped .w3 {-moz-transform: rotate(-5.78rad);-webkit-transform: rotate(-5.78rad);-o-transform:
	rotate(-5.78rad);-ms-transform: rotate(-5.78rad); transform: rotate(-5.78rad);
	width: 22px; height: 51px; left: 146.47px; top: 205.26px;}

	#warped .w4 {-moz-transform: rotate(-5.6rad);-webkit-transform: rotate(-5.6rad);-o-transform:
	rotate(-5.6rad);-ms-transform: rotate(-5.6rad); transform: rotate(-5.6rad);
	width: 26px; height: 51px; left: 174.59px; top: 226.75px;}

	#warped .w5 {-moz-transform: rotate(-5.66rad);-webkit-transform: rotate(-5.66rad);-o-transform:
	rotate(-5.66rad);-ms-transform: rotate(-5.66rad); transform: rotate(-5.66rad);
	width: 24px; height: 51px; left: 205.17px; top: 250.44px;}

	#warped .w6 {-moz-transform: rotate(-5.95rad);-webkit-transform: rotate(-5.95rad);-o-transform:
	rotate(-5.95rad);-ms-transform: rotate(-5.95rad); transform: rotate(-5.95rad);
	width: 26px; height: 51px; left: 237.76px; top: 268.67px;}

	#warped .w7 {-moz-transform: rotate(-6.32rad);-webkit-transform: rotate(-6.32rad);-o-transform:
	rotate(-6.32rad);-ms-transform: rotate(-6.32rad); transform: rotate(-6.32rad);
	width: 26px; height: 51px; left: 276.13px; top: 274.55px;}

	#warped .w8 {-moz-transform: rotate(-6.57rad);-webkit-transform: rotate(-6.57rad);-o-transform:
	rotate(-6.57rad);-ms-transform: rotate(-6.57rad); transform: rotate(-6.57rad);
	width: 25px; height: 51px; left: 316.34px; top: 267.57px;}

	#warped .w9 {-moz-transform: rotate(-6.77rad);-webkit-transform: rotate(-6.77rad);-o-transform:
	rotate(-6.77rad);-ms-transform: rotate(-6.77rad); transform: rotate(-6.77rad);
	width: 26px; height: 51px; left: 351.68px; top: 253.48px;}

	#warped .w10 {-moz-transform: rotate(-7.04rad);-webkit-transform: rotate(-7.04rad);-o-transform:
	rotate(-7.04rad);-ms-transform: rotate(-7.04rad); transform: rotate(-7.04rad);
	width: 26px; height: 51px; left: 382.96px; top: 231.67px;}

	#warped .w11 {-moz-transform: rotate(-7.36rad);-webkit-transform: rotate(-7.36rad);-o-transform:
	rotate(-7.36rad);-ms-transform: rotate(-7.36rad); transform: rotate(-7.36rad);
	width: 21px; height: 51px; left: 408.01px; top: 202.54px;}

	#warped .w12 {-moz-transform: rotate(-7.59rad);-webkit-transform: rotate(-7.59rad);-o-transform:
	rotate(-7.59rad);-ms-transform: rotate(-7.59rad); transform: rotate(-7.59rad);
	width: 23px; height: 51px; left: 419.78px; top: 170.15px;}

	#warped .w13 {-moz-transform: rotate(-7.71rad);-webkit-transform: rotate(-7.71rad);-o-transform:
	rotate(-7.71rad);-ms-transform: rotate(-7.71rad); transform: rotate(-7.71rad);
	width: 10px; height: 51px; left: 432.11px; top: 141.62px;}

	#warped .w14 {-moz-transform: rotate(-7.72rad);-webkit-transform: rotate(-7.72rad);-o-transform:
	rotate(-7.72rad);-ms-transform: rotate(-7.72rad); transform: rotate(-7.72rad);
	width: 22px; height: 51px; left: 430.07px; top: 112.58px;}

	#warped .w15 {-moz-transform: rotate(-7.51rad);-webkit-transform: rotate(-7.51rad);-o-transform:
	rotate(-7.51rad);-ms-transform: rotate(-7.51rad); transform: rotate(-7.51rad);
	width: 23px; height: 51px; left: 436.88px; top: 78.41px;}

	</style>
	</head> 

	<body>
	<div id='warped'>
	<span class='w0'>k</span><span class='w1'>u</span><span class='w2'>l</span><span class='w3'>t</span><span class='w4'>u</span><span class='w5'>r</span><span class='w6'>b</span><span class='w7'>a</span><span class='w8'>n</span><span class='w9'>a</span><span class='w10'>u</span><span class='w11'>s</span><span class='w12'>e</span><span class='w13'>.</span><span class='w14'>d</span><span class='w15'>e</span>
	</div>
	</body> 

	</html>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Flash verliert mit der zunehmenden Verbreitung von HTML5 immer mehr an Boden. Nicht zuletzt weil Apple Flash aus dem iOS verbannt hat. Ob das nun gut oder schlecht ist mag ich hier gar nicht bewerten aber offenbar hat Adobe die Zeichen der Zeit erkannt und stellt nun mit Wallaby ein Konvertierungs-Tool für Flash-Dokumente bereit.

In den Adobe Labs kann die Air-Anwendung Wallaby kostenlos heruntergeladen werden.

Zu beachten ist jedoch dass Wallaby sich noch im Stadium des Release Candidate befindet - also nicht fehlerfrei ist. Adobe selbst schreibt dazu:

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. Wallaby is not a final product and is still in the testing and validation phase. We are not yet able to commit to a roadmap for this experimental technology.

Nichts desto trotz funktioniert die App erstaunlich gut und konvertiert Flash-Dokumente per Klick in HTML5. Ihr solltet jedoch bedenken, dass auch HTML5 nicht alle Möglichkeiten von Flash abdeckt. Je komplexer die Flash-Datei also ist, desto schwieriger wird es das Dokument zu konvertieren.

Ihr könnt Adobe Wallaby in den Adobe Labs herunterladen.

• Adobe Wallaby Download

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Bei einem aktuellen HTML5-Projekt fiel mir auf, dass sowohl im Firefox- als auch im Opera-Browser das <footer>-Element nicht auf mein angewandtes CSS-Styling reagierte. Trotz korrekt angegebener Breite und neuster Browser-Generationen brach der Footer komplett aus dem Layout heraus und ließ sich überhaupt nicht mit CSS ansprechen. Sobald ich den <footer> in ein <div> umwandelte und eine ID vergab funktionierte alles wie gewohnt.
Das Problem war glücklicherweise schnell identifiziert und leicht behoben. Damit Ihr in Zukunft sofort wisst warum dieses Verhalten auftreten kann erkläre ich Euch kurz woran es liegt.

Kein optimaler HTML5-Support in Firefox und Opera

Zu meiner großen Überraschung lag es daran, dass einige HTML5-Element in Firefox und Opera noch nicht vollständig unterstützt und somit fehlinterpretiert werden. Die Liste aller Browser-Engines und der jeweiligen HTML5-Tag-Unterstützung habe ich auf Wikipedia gefunden.

• Comparison of layout engines (HTML5)

Das neue <footer>-Tag wird demnach nicht als Block-Element sondern als Inline-Element interpretiert und dargestellt. Das gleiche Problem wirkt sich auch auf andere HTML5-Elemente aus.
Alles was Ihr tun müsst um das Verhalten zu korrigieren ist im CSS-Code diesem Elemente die Eigenschaft display:block zuzuweisen. Anschließend reagiert der <footer> wieder wie gewünscht. In den beiden Webkit-Browsern ist diese Zeile Code dann natürlich überflüssig.

footer {
  display:block;
}

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

HTML5 Boilerplate ist ein extrem umfangreiche HTML5 Startpaket für die Arbeit mit HTML5-Websites. Allerdings müsst Ihr Boilerplate je nach Bedürfnis ziemlich abspecken bzw. anpassen. Initializr übernimmt diese Aufgabe für Euch. Ihr legt zunächst fest welche Bestandteile von Boilerplate Ihr für die neue Website einsetzen wollt - jQuery, Modernizr, Serverconfigs etc. Anschließend erhaltet Ihr ein dokumentiertes Download-Paket und könnt direkt loslegen. Selbst eine ToDo wird mit exportiert, so dass Ihr genau wisst was angepasst werden muss. Wie beispielsweise das Favicon oder der <title>-Tag.

• Initializr - Start an HTML5 Project in 15 Seconds
• HTML5 Boilerplate

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vergangene Woche bin über die Idee zu einer humans.txt für Websites gestolpert. Im Gegensatz zur robots.txt mit deren Hilfe Suchmaschinen-Bots weitere Informationen erhalten dient die humans.txt den Menschen die eine Website besuchen. In der Textdatei werden Informationen zum Ersteller der Website festgehalten. Ein Hauptgrund ist, dass der Auftraggeber - also der Besitzer der Website - häufig nicht erlaubt, dass der Designer oder Programmierer sich im Impressum oder gar im dem Footer einer Website verewigt. Hier soll die humans.txt Abhilfe schaffen und getrennt vom Code der Website eben jene Informationen abbilden. Das Textformat wurde gewählt weil es sehr einfach in der Handhabung ist.

Die humans.txt wird im Root der Website abgelegt - ebenso wie die robots.txt. Wenn Ihr als Designer und Programmierer die Möglichkeit habt einen Author-Tag einzusetzen, so könnt Ihr mit folgendem Snippet im <head> der Website auf die Datei verweisen.

<link type="text/plain" rel="author" href="http://domain/humans.txt" />

Inhaltlich kann sich die Textdatei an folgendem Beispiel orientieren: http://humanstxt.org/humans.txt

Fazit

Ich bin selbst noch nicht ganz sicher was ich von dieser Idee halte. Allerdings muss ich sagen, dass mir auf Anhieb auch kein Nachteil einfällt und auch kein Grund diese Technik nicht zu verwenden. Ich denke ich werde es zu den Standards hinzufügen die bei der Qualitätskontrolle am Ende eines Projekts jeder Website abschließend hinzugefügt werden.
Wenn sich diese Technik etabliert, so kann man hierüber sicher den ein oder anderen Kunden auf sich aufmerksam machen. Allerdings wird es sich hierbei eher um professionelle Kunden oder Agenturen handeln - Otto Normalverbraucher wird von dieser Technik nichts mitbekommen und somit die Informationen auch nicht finden.
Was meint Ihr?

Update vom 17.05.2011: Auch Google nutzt nun die humans.txt. Hier könnt ihr sehen wie sie aussieht.

• Offizielle Website zum Projekt: humanstxt.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit WPSnippets ist vor Kurzem eine Microsite online  gegangen die mehr oder weniger bekannte WordPress Hacks, Tipps und Snippets aggregiert. Die Seite wird regelmäßig erweitert und bietet somit eine schöne Quelle an Code-Schnipseln die Ihr sofort in Euer Theme einbauen könnt.

• WordPress Snippets / WP Snippets besuchen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In den Adobe Labs wurde ein neues Illustrator CS5-Plugin veröffentlicht was es ermöglicht in Illustrator erstellte Grafiken als HTML5 Canvas, CSS3 oder SVG-Grafiken zu exportieren.
Dieses Plugin ist meiner Ansicht nach ein wichtiger Schritt in die richtige Richtung. Auch für Photoshop wurden in der Vergangenheit "HTML-Layers" diskutiert die es ermöglichen sollen grafische Stile direkt webfähig zu exportieren und somit den Workflow zu beschleunigen.

Das Illustrator Plugin kann in den Labs heruntergeladen werden.

• Adobe Illustrator CS5 HTML5 Pack

Was haltet Ihr von Plugins dieser Art, sei es in Illustrator oder in Photoshop?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Der W3C hat einen neuen (?) Validierungs-Dienst namens Unicorn gestartet. Mithilfe dieser Seite könnt Ihr Eure Website mit nur einem Klick nach allen gängigen Kriterien validieren. Bisher waren mehrere Besuche notwendig. Unicorn validiert sowohl HTML als auch CSS und den (RSS-)Feed. Auch Barrierearmut und mobile Unterstützung könnt Ihr überprüfen lassen.

• W3C Validator Unicorn

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Diskussion um HTML5 und Flash ist in vollem Gange und dürfte Euch sicher nicht entgangen sein. Nun haben die ersten Portale damit begonnen Ihre Video-Inhalte von Flash auf HTML5 umzustellen oder zumindest eine HTML5-Beta Version alternativ für iPad und Co anzubieten. Doch HTML5 kann noch viel mehr! Höchste Zeit sich mit einigen überaus sehenswerten HTML5-Beispielen zu befassen. Viel Spass!

HTML5 Canvas Animation

Eine wirklich lustige Comic-Animation mit dem HTML5-Canvas-Element die auf spielerische Art den Umgang und die Funktion des Elements erklärt.

HTML5 Canvas Animation

Ball Pool

Per Klick können auf dem Bildschirm neue "Bälle" erstellt werden; per Drag and Drop könnt Ihr diese verschieben, umschichten etc. Ein Doppelklick startet das Beispiel mit veränderten Farben neu. Auch das Browser-Fenster kann geschüttelt werden um die Elemente zu beeinflussen.

Ball Pool

Browser Ball

Ein interaktiver Ball kann mit der Mouse zwischen verschiedenen Browserfenstern bewegt werden.

HTML5 Browser Ball

Canvas Photos

Auf einer Arbeitsfläche können Fotos/Polaroids verschoben, skaliert und gedreht werden.

Canvas Photos

Mezmerizer

Intuitives und sehr sphärisches Beispiel. Nutzt Eure Mouse oder die Tastatur.

Mezmerizer

Canvas Paint

Microsoft Paint als Full HTML5 Browser-Version.

Canvas Paint

Canvascape

Canvascape ist ein Mini-3D-Shooter der eindrucksvoll zeigt, dass mit dem Canvas-Element und JavaScript auch Spiele machbar sind. Über die Tastatur kann der Spieler bewegt werden, gesprungen wird mit der Leertaste. Auch die Qualität der verwendeten Texturen könnt Ihr beeinflussen.

Canvascape

CubeOut

3D Tetris von oben.

CubeOut

Unzählige Beispiele

Die soeben gezeigten Beispiele habe ich ausgewählt da es sich meiner Meinung nach um beeindruckende und vor allem abwechslungsreiche Demos handelt. Auch auf apple.com/html5 (Danke an Steffen für den Tipp per E-Mail) wurde vor kurzem eine Reihe an Demos online gestellt die auf jeden Fall einen Blick wert sind.
Ihr kennt auch HTML5-Beispiele die es sich lohnt anzuschauen? Dann freue ich mich über Eure Tipps in den Kommentaren!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn Ihr innerhalb von Photoshop eine Farbe mittels Pipette aufnehmen wollt um Sie anschließend als Hexadezimalwert in Eurem CSS-Code einzubinden so war der bisherige Weg (bis CS5) recht mühselig. Entweder Ihr habt bei eingeblendetem Info-Bedienfeld und zwei Monitoren (alternativ gutem Gedächtnis) den Code abgeschrieben oder aber Ihr habt einen Umweg über den Color Picker genommen, Euch dort den Hex-Code herauskopiert und anschließend im CSS-Code wieder eingefügt. Klar, mit ein wenig Übung sind beide Varianten eine Frage von zwei Sekunden … aber jetzt es geht auch in einer.

Neue CS5-Möglichkeiten Farben zu kopieren

Seit Photoshop CS5 steht eine neue Möglichkeit bereit Farben zu kopieren. Wählt bei aktivierter Pipette I das Kontextmenü (Cmd + Klick/Rechtsklick) und wählt dort den Eintrag Hex Code. Alternativ könnt Ihr wie bisher auch den HTML-Code kopieren.

Je nach gewähltem Menüeintrag wird folgender Code in die Zwischenablage geschrieben:

• HTML: color="#404449"
• Hex Code: 404449

Wie habt Ihr bisher gearbeitet?

Habt Ihr eine der beiden oben beschriebenen Möglichkeiten genutzt um Farben von Photoshop in Euren Code zu kopieren oder kennt Ihr vllt. sogar einen viel besseren Weg? Oder arbeitet Ihr mit Farbfeldern, websicheren Farben etc. und habt den Code ganz einfach im Kopf? Lasst es mich wissen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.