Soeben ist der +1-Button von Google gestartet, mit dem man Empfehlungen für Freunde und Bekannte aussprechen kann. Und wer von Anfang an mitmacht, hat natürlich den größten Nutzen. Informationen und Hilfen zur Benutzung findet man auf Google’s Webmasterseiten. Der Code ist eigentlich einfach, man bindet die plusone-API zum Beispiel im Header-Bereich der Internetseite ein

<!– Dieses Tag in den Head-Bereich oder direkt vor dem schließenden Body-Tag einfügen –>
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”> {lang: ‘de’} </script>

und fügt dann die +1-Schaltfläche an der gewünschten Stelle, also in der Nähe des zu “likenden” Artikels oder Fotos ein:

<!– Dieses Tag dort einfügen, wo die +1-Schaltfläche dargestellt werden soll –>
<g:plusone size=”medium” callback=” plusone_empfehlung” href=”http://www.dm-internetservice.de”></g:plusone>

Im “HREF”-Attribut der Schaltfläche kann man den zu empfehlenden Link für die Schaltfläche eintragen, wenn man mehrere Empfehlungs-Schaltflächen auf der Seite setzt, ist das unbedingt nötig, um zwischen den verschiedenen Empfehlungen zu unterscheiden. Wenn jemand auf einen Button neben einer Techno-Party-Ankündigung klickt, wäre es ziemlich kontraproduktiv, wenn statt des Techno-Events ein Klassik-Konzert empfohlen wird, das auch auf dieser Seite empfohlen wird…

Ein weiterer Parameter ist das Attribut “callback” im Schaltflächencode. Damit kann man eine Javascript-Funktion aufrufen. So erzeugt man zum Beispiel damit ein Event in Google Analytics:

<script type="text/javascript">
  function plusone_empfehlung( obj ) {
    _gaq.push(['_trackEvent','plusone',obj.state]);
  }
</script>

Das HTML-Tag <button> erzeugt Schaltflächen, die man auch außerhalb von <form> – Tags benutzen kann. Dabei kann das Tag aus einem Bild und einem Text bestehen. Bilder oder Texte, die man zwischen dem öffnenden und dem schließenden <button>-Tag einsetzt, werden mit in dem Button gerendert, auch die meisten HTML-Tags funktionieren im <button>-Tag. Image-Maps funktionieren allerdings nicht innerhalb des <button>-Tags.

Mit <button> wird ein Inline-Element erzeugt, das keinen Zeilenvorschub erzwingt. Die beiden Schaltflächen im Beispiel basieren auf folgendem Code:

<button type=”button”> <img src=”weiter.gif”> <span style=”display: block; width: 80px; color: #0000ff”>Dortmund</span> </button><button type=”button”> <img src=”weiter.gif”> <span style=”display: block; width: 80px; color: #0000ff”>Köln</span> </button>

Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln.

HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen.

Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen!

Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> bis <footer>, aber auch über die Frage, wie man denn den bekannten, zu HTML 5 inkompatiblen Altlasten-Browsern HTML 5 unterschieben kann, erfahren Sie mehr im nächsten Artikel zur Einführung des neuen Webstandards.