▼

joerghuelsermann.de Teilnehmer fullmetalseo2013

Teilnehmer fullmetalseo2013

Führen wir doch mal die Teilnehmer am SEO Wettbewerb fullmetalseo2013 auf, die klar zu ermitteln sind. mir persönlich ist es auf jeden Fall lieber, wenn eine Person diesen Wettbewerb gewinnen würde und nicht eine anonyme Organisation. Man muss meiner Meinung nach auch mal ein Zeichen setzen das Anonymität im Internet auch Nachteile haben kann.

Angewandte Technik

Zuerst einmal wird eine statische Liste mit den Teilnehmern am SEO Wettbewerb fullmetalseo2013 ausgegeben auf dieser Seite. Zusätzlich habe ich diese Seite darum erweitert, das ich das template Element eingesetzt habe um ein zweites Mal, wenn der Browser dieses Element unterstützt diese Liste anzuzeigen. Ich setze eigentlich eine Technik gleichzeitig ein, wenn ich versuche diese zu erläutern, denn meiner Meinung nach sollte man nicht nur theorethisieren sondern gleich dann auch es in der Praxis vorführen soweit es möglich ist.

Und damit kommen wir zu der entscheidenen Frage, ob der momentan eingesetzte Browser auch diese Technik unterstützt. In diesem Fall wird diese Technik nicht unterstützt.

In den Fällen wo die zweite Liste erscheint aber im Grunde genommen diese technik nicht unterstützt wird, gehe ich momentan davon aus das mir entweder noch Informationen fehlen oder das ich unbewusst eine Fallback Lösung aufgebaut habe.

Liste der Teilnehmer

Hier nun kommen wir zur Liste der Teilnehmer am Wettbewerb fullmetalseo2013, soweit ich diese feststellen konnte.

Aufbau des Experimentes

Durch den folgenden Kode wollte ich erreichen das die statische Liste soweit wie möglich nachgebildet wird auch wenn der Einsatz der Mikrodaten für die Personen unter Umständen nicht erkannt wird von den Suchmaschinen. Besonders interressant wird der Einsatz dieses template Elementes, wenn die Inhalte nachgeladen werden. Die zweite Liste wird aus dem Inhalt eines data Attributes generiert um zumindest nachzubilden, das ein JSON kodierte Abfrage einer Datenbank erfolgt ist. Die Überprüfung der Bedingung ist der unterschiedlichen Implementierung in den Browsern geschuldet.

Benötigtes Javascript
document.createElement('template');
document.addEventListener('DOMContentLoaded',function(){
if ('content' in document.createElement('template')) {
document.querySelector('#template').innerHTML = 'In diesem Fall wird das Element template unterstützt.';
}
var teilnehmer = JSON.parse(document.querySelector('[data-teilnehmer]').getAttribute('data-teilnehmer'));
if (document.querySelector('template *')){
for (i=0;i<teilnehmer.length;i++){
document.querySelector('template span').innerHTML = teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('template [itemprop="givenName"]').content = teilnehmer[i][0];
document.querySelector('template [itemprop="familyName"]').content = teilnehmer[i][1];
document.querySelector('template a').href = 'https://plus.google.com/'+teilnehmer[i][2];
document.querySelector('template a').innerHTML = 'Google Plus Profil von '+teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('template a').title = 'Google Plus Profil von '+teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('main ul').appendChild(document.querySelector('template li').cloneNode(true));
}
}
else{
for (i=0;i<teilnehmer.length;i++){
document.querySelector('template').content.querySelector('span').innerHTML = teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('template').content.querySelector('[itemprop="givenName"]').content = teilnehmer[i][0];
document.querySelector('template').content.querySelector('[itemprop="familyName"]').content = teilnehmer[i][1];
document.querySelector('template').content.querySelector('a').href = 'https://plus.google.com/'+teilnehmer[i][2];
document.querySelector('template').content.querySelector('a').innerHTML = 'Google Plus Profil von '+teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('template').content.querySelector('a').title = 'Google Plus Profil von '+teilnehmer[i][0]+' '+teilnehmer[i][1];
document.querySelector('main ul').appendChild(document.querySelector('template').content.querySelector('li').cloneNode(true));
}
}
});
Einsatz des template Elementes
<template>
<li itemscope="itemscope" itemtype="http://schema.org/Person" class="template">
<span itemprop="name"></span> <a href="" title=""></a>
<meta itemprop="givenName" content="" />
<meta itemprop="familyName" content="" />
<meta itemprop="performerIn" itemscope="itemscope" itemtype="http://schema.org/Event"
 itemid="http://joerghuelsermann.de/artikel/seo/#wettbewerb" content="" />
</li>
</template>
▲