Ab August und im Herbst habe ich ja munter an meinem (jetzt alten) OnPage SEO Checker entwickelt.

Motivation

Im November hatte ich mich dann entschlossen die komplette Codebase neu zu schreiben. Das lag in erster Linie daran, daß ich den Code besser und modularer machen wollte. Ich habe mein eigenes MVC Pattern implementiert (Danke an Jan der meine Fragen dazu geduldig beantwortet hat), einen (guten?) Debugger gebaut und brav Schnittstellen zwischen den verschiedenen Modulen definiert.

Daneben hatte ich in der alten Version eine kleine PHP Lib eingesetzt um die HTML DOM Analyse zu machen. Allerdings ist die bei extrem dicken Seiten (airliners.net) ausgestiegen .. außerdem hatte ich mich mittlerweile so tief in PHP 5 eingearbeitet das ich es mit Standardmitteln versuchen konnte. Die Selector Engine in der neuen Version läuft nun mit PHP DOM und PHP Simple XML.

Wahrscheinlich hätte ich schon viel früher fertig sein können :) aber 50% der Entwicklungszeit habe ich mir den Kopf drüber zerbrochen wie ich eine guten Code schreibe .. hab mich mit Design Patterns auseinandergesetzt und fremden Code gelesen.

Das SEO Tool – SEORCH

SEORCH hab ich es genannt und mit der Version 0.1 macht es nicht wesentlich mehr als das alte Tool. Es ist etwas schneller geworden .. Umlaute in Keywords tun nun auch, die Analyse ist genauer, das Keyword kann man nun optional eingeben usw.

Garantiert sind auch noch ein paar Bugs zu finden.

Wichtig war mir ein Fundament zu haben auf dem ich aufbauen kann. Ich plane die SEO Analyse in Zukunft noch wesentlich zu erweitern und externe Datenquellen mit aufzunehmen (Google ich komme .. ). Aber bevor ich in den Featurewahn verfalle … die erste Version ist nun also online.

Über jede Art von Feedback freu ich mich.

Aja -> SEORCH – OnPage SEO Tool

Seit einigen Tagen benutze ich Path .. die App ist ziemlich schick und hat einige tolle UI Features die man so noch nicht gesehen hat. Mir hat es besonders das Menü angetan mit dem man seinen Status posten kann.

Am Samstag habe ich dann überlegt, daß man das auch mit CSS3 und vielleicht sogar ganz ohne JavaScript nachbauen könnte. Ich wollte es nicht 100% klonen sondern mich nur etwas inspirieren lassen.

Rausgekommen ist dann mein Menü inspiriert von Path das wirklich nur mit CSS3 und HTML gebaut wurde.

Das CSS findet ihr direkt im Quelltext der HTML Datei. Neben dem Tilde Selektor und ein paar abgefahrenen CSS3 Transitions besteht das einzige Problem im Grunde darin, daß ONCLICK die Menü Elemente herausfliegen und dann auch auf ihrer Position bleiben sollen wenn man den Mauszeiger vom Menü wegbewegt.

Die habe ich mit dem :CHECKED Selector gemacht .. das Input Feld wird ausgeblendet und das Label des Input Feldes dient als Menü Schaltfläche ..

Kann man natürlich auch mit :HOVER machen .. allerdings bleibt das Menü nur dann offen wenn sich die Maus darauf befindet … hier mein shiny Micro Menü .. ;-.)

Um mich vom PHP coden etwas zu entspannen habe ich mir spontan ein modernes Webformular gebaut.

Ich hasse es eigentlich Webformulare in HTML zu bauen .. positionieren macht keinen Spass, dann immer nach dem Schema INPUT > LABEL oder doch umgekehrt. Durch unterschiedliche Textlängen und Feldgrößen sehen die meisten Webformulare immer irgendwie wie ein Unfall aus (im schlimmsten Fall) oder halbfertig (in den meisten Fällen) .. da sich dann irgendwann doch Texte reinmogeln mit denen vorher kein Entwickler gerechnet hat brechen manche Formulare auch noch an den unmöglichsten stellen um.

Soweit zur Vorgeschichte .. ich hab nun also versucht was schöneres / funktionaleres / ansprechenderes zu bauen und dabei hab ich mich erst mal auf INPUT und TEXTAREAs beschränkt.

Der Benutzer soll es einfach haben, Informationen die nicht mehr gebraucht werden fliegen raus, das aktuelle Feld (das im Fokus steht) wird herausgehoben .. die Labels schreib ich direkt in die INPUT und TEXTAREAs rein ..

Rausgekommen ist (IMHO) ein recht schickes Formular. Getestet habe ich das bisher allerdings nur in aktuellen Chrome und Firefox Versionen .. allerdings ist es grundsätzlich so gebaut das es auch im IE4 funktionieren sollte .. dann natürlich ohne Schick und Pomp.

Hier ist das Formular.

Features:

• CSS3 Transitions
• selten benutzte CSS Selektoren
• jede Menge Pseudo Klassen
• und ein bisschen jQuery

CSS und JS findet ihr direkt in Files .. habs glaub ich recht übersichtlich hinbekommen.

Das ordnet mal schön den Kopf zum Thema SEO und fasst definitv alles wichtige zusammen .. bei einigen Punkten würde ich persönlich etwas anders gewichten .. aber das ist dann eher im Kontext der Seite die man optimiert zu sehen ..

Hier nochmal alles in GROß .. und danke an schst ders mir auf den Tisch gelegt hat.

Wusstet ihr eigentlich das der Netscape 4 im Jahre 1994 schon eine Unterstützung für Webfonts hatte .. auch der IE4 hatte (zugegebenermaßen) seine eigene Implementation .. auch im CSS2 Standard waren Webfonts vorgesehen .. in CSS3 werden sie nun prinzipiell unterstützt ..

Doof nur das die Unterstützung in den verschiedenen Browsern leicht SCHEISSE ist. Ein Grund wieso Webfonts ungern eingesetzt werden.

Wie Wo Was?

Grundsätzlich gibt es 4 Font Formate … da wäre EOT (Embedded Open Type) welches der Internet Explorer unterstützt. Dann wäre da WOFF (Web Open Font Format ) welches Chrome, Firefox und Opera unterstützen. TTF (True Type Font) wonach Safari und Android lechzen .. und zu guter letzt noch SVG (Scalable Vector Grafik) .. mehr oder weniger ein Fallback für moderne Browser .. und die Wahl von iOS vor Version 4.2.

Der Nachteil wenn man nun alle 4 Fonts anbieten will? 4 einzelne Requests werden abgesetzt und die Dateigrößen sind auch nicht zu verachten.

Je nachdem wie viele Zeichen der Font unterstützt liegt man bei Dateigrößen von 30 – 400 KB. Wenn man also nur 2 Schriftarten einbindet und diese je 4 mal bereithält kann man schnell bei 1 MB download nur für Fonts liegen ..

Ungeachtet der ganzen Limits hat Jake Archibald auf der Fronteers 2011 aber einen Weg vorgestellt wie man Fonts quasi bulletproof bis hinunter zum IE6 einbinden kann.

Best Practice @font-face

Ich habe das @font-face Beispiel aus seiner Präsentation mal nachgebaut: Hier das HTML, und hier das CSS File.

Hier der zentrale Code Schnipsel …

@font-face {
   font-family: 'blue-serif';
     src: url('kreon.eot'); /* IE9 compatibility mode */
     src: url('kreon.eot#') format('embedded-opentype'), /* IE6-8 # -> IE9 Format */
          url('kreon.woff') format('woff'), /* Firefox, Chrome, Opera */
          url('kreon.ttf') format('truetype'), /* Safari, Android, iOS */
          url('kreon.svg#blue-serif') format('svg');  /* iOS < 4.2 */
}

Warum 2 Sourcen, wieso ein Hash hinter dem zweiten EOT .. und warum genau die Reihenfolge könnt ihr Jakes Präsentation entnehmen.

Long Time – No See .. ich komme hier gerade wenig zum bloggen .. aber das ändert sich sicher auch mal wieder. Anfang des Monats hat mich mein Arbeitgeber .. die 1&1 Internet AG nach Amsterdam auf die Fronteers geschickt .. und ich finde dazu kann ich auch was erzählen.

Die Fronteers ist die Konferenz in Europa die am meisten Stil hat :) sie richtet sich ausdrücklich an Webdeveloper .. und so saß ich zwei Tage im Tuschinski Theater in Amsterdam und habe mich beeindrucken lassen. Referenten waren unter anderem John Resig (LeadDev jQuery) Bruce Lawson (Opera Web Evangelist), Tab Atkins (Google Web Standards Hacker), Christian Heilmann (Mozilla Developer Evangelist), Lea Verou (CSS3 Guru) ..

Folgende Vorträge gab es an den zwei Tagen:

• Aral Balkan – The Future is Native
• Derek Featherstone – Accessibility for the Modern Web
• Lea Verou – CSS3 Secrets: 10 things you might not know about CSS3
• Bruce Lawson – HTML5 Semantics: you too can be a bedwetting antfucker
• Stephen Hay – Go with the flow
• Tab Atkins – The Future of CSS – Current Experiments and Near-Future Reality
• Leslie Jensen-Inman – Passion. Purpose. Promise. Pursuit.

• Alex Russell – Web Components and Model Driven Views
• Divya Manian – The New Developer Workflow
• Robert Nyman – HTML5 Forms – KISS time
• Seb Lee-Delisle – CreativeJS – beauty in the browser
• John Resig – jQuery and the Open Source Process
• Jake Archibald – In your @font-face
• Christian Heilmann – The prestige of being a web developer

Ich werde nun nicht jeden Vortrag im einzelnen eingehen (keine Angst) .. aber ich picke mir mal ein paar heraus die ich am besten fand:

Die Eröffnung:

Aral Balkan hat gleich als erster Speaker die Messlatte ziemlich hoch gelegt. In seinem Vortrag The Future is Native ging es grundlegend erst mal um Web vs. Native .. ihr kennt die Diskussionen sicher .. viele Webentwickler würden am liebsten alle nativen Applikationen los werden und alles mit Webapplikationen abbilden.

Allerdings haben beide Konzepte ihre Vor- und Nachteile:

• Nativ ist näher am Betriebssystem, kann lokal installiert werden, funktioniert auch ohne Netzzugang etc.
• Web braucht keine manuellen Updates, funktioniert OS übergreifend, ist immer unter einer URL zu finden ..

Google und diverse weitere Firmen verfolgen dieses Konzept auch konsequent .. der Streit entbehrt allerdings jeder Grundlage und darauf wollte Aral Balkan
hinaus. Es geht weniger darum welche Technologie man einsetzt sondern darum dem User eine einfache, funktionierende und selbsterklärende Applikation für sein Problem
zu liefern. Er illustrierte das sehr Anschaulich an den Fahrkartenautomaten in Norwegen die keine Bedienungsfehler zulassen vs. Fahrkartenautomaten in Schweden die mit Features so überfrachtet sind, daß jeder einzelne nochmal eine Hilfe Taste hat um sich mit einer Hotline verbinden zu lassen.

Sein abschließendes Plädoyer: Don’t compete on features, compete on user experience.

Die Tech Talks:

• Lea Verou zeigte 10 neue CSS3 Features per Livecoding im Einsatz (cool dabei war das Sie ihr eigenes HTML,CSS,JS Presentation Frameword verwendet hat)

• Bruce Lawson ging auf die Semantik der HTML5 Tags ein, was ist neu, was fällt im Vergleich zu HTML4 oder XHTML weg, welche Elemente sind mit Vorsicht zu genießen, wie strukturiert man die neuen Elemente, Einsatz von H Tags innerhalb usw. Sein Fazit: The Golden Rule: There is no Golden Rule und Haarspalter kann sowieso keiner leiden :)

• Das Thema von Stephen Hay war das Layout und der Flow. Im Vergleich zu Print hat es das Web immer noch sehr schwer exotische Layouts darzustellen. Ein klassisches Multi-Colum (wie bei einer Zeitung) kann man nur mit sehr viel Aufwand umsetzen. Er zeigte hier diverse Lösungsansätze mit Flexbox, CSS-Exclusions und Grid Layouts.

• Tab Atkins zeigte uns was zukünftig mit CSS geplant (needs Webkit) ist und woran er in der CSS Spec arbeitet. Dabei freu ich mich besonders auf Elemente wie VW und VH die einen die Höhe und Breite des Viewports ermitteln lassen. Mit calc() soll man zukünftig in CSS rechnen können, mit cycle() über verschachtelte Elemente iterieren. In CSS4 plant man neue Selectoren und Pseudoelemente z.B. :any-link und :local-link. Außerdem natürlich die lange erwarteten CSS Variablen -> @variable $farbe #fff / Benutzung: color: $farbe;

• Robert Nyman hat sich HTML5 Forumlare vorgenommen. Neue Attribute, neue Elemente, alles eine schöne neue Welt .. aber mit unterschiedlichen Interpretationen der verschiedenen Browser, das Styling per CSS funktioniert auch nicht übergreifend. Fazit: HTML5 Formulare in all ihrer Pracht, in allen modernen Browsern zu nutzen kann zu akuten Schmerzen führen.

• Jake Archibald zeigte dann die Anwendung von Custom Fonts und wo die Tücken liegen wenn man diese auch in alten Browsern einbinden will. Der Vortrag war alles in allem ein Best Practice Workshop für die Anwendung von Font-Face.

Der Beste:

Seb Lee-Delisle zeigte mit CreativeJS ziemlich eindrucksvoll was mit ein bischen JavaScript im Browser möglich ist. Dabei ging es in erster Linie um optische Effekte und JS Programmierung für Spiele. Den Source Code seines Particle Beispiels findet man auf Github.

Der zweite Teil war dann ein Experiment:

Alle Smartphones und Tablets im Saal konnten sich lokal auf einen Server verbinden. Dann wurden Farbfolgen abgespielt und Seb versuchte dadurch die Positionen der
Geräte herauszubekommen .. aber seht es euch selbst an:

Der Abschluss:

Chris Heilmann rief uns am Ende allen nochmal ins Gedächtnis was es heißt ein Webdeveloper zu sein. Wir neigen dazu immer alles neu machen zu wollen und den eigenen Code für das Maß aller Dinge zu halten .. aus seiner Sicht ein ungenügender Ansatz .. seine Forderung an uns:

• Reuse and improve – benutzt bekannte Techniken und entwickelt sie weiter
• Learn from others – schaut euch an wie andere ihre Probleme lösen
• Be inventive – denkt außerhalb von Grenzen wie ihr etwas erledigen könnt
• Be gorgeous – gebt euer Bestes zu geben und macht es so schön wie möglich
• Code = Poetry – nur dann können andere daraus lernen
• Be open / Don’t be out for blood – hört auf zu trollen und zu bashen denn das würgt Innovationen ab
• Join the band and collaborate – sucht euch Leute mit ähnlichen Ideen zum Zusammenarbeiten
• Be your own teacher – bringt euch Neues selbst bei weil es der beste Weg ist um zu lernen
• Fill the blanks – schaut wo es nochwas zu tun gibt uns setzt euch dran
• Use what you heard – lasst euch nicht nur von Konferenzen inspirieren sondern setzt das Gehörte ein
• Repeat the message – Überzeugt eure Vorgesetzten vom Einsatz neuer Technologien
• Collect good stories – Erzählt eure Geschichten

Ich habe heute mit CSS3 Transitions rumgespielt .. die Effekte funktionieren aktuell nur in den Webkit Browsern Chrome und Safari. Im Sinne von Progressive Enhancement ist die Darstellung aber auch in allen anderen Browsern (sofern ich sie getestet habe :)) in Ordnung .. schauts euch also mal im Firefox an ..

Was ich aber sagen kann .. mit den ganzen Möglichkeiten die durch CSS3 Transition und Transform da in den Browsern ankommen wird CSS3 ziemlich komplex wobei natürlich abzuwarten bleibt wie stark das eingesetzt wird.

Ich hab im ersten Schritt mal versucht so ne Art Gallerie zu bauen, mit einer Beschreibung und das Ganze dann irgendwie ansprechend zu animieren.

Den TRANSFORM Parameter -> translateZ habe ich nicht so ganz verstanden .. ich weiß schon was er macht etc. aber je nachdem was man hier für Werte eingibt kann es zu witzigen Effekten kommen ..

Das CSS steht direkt im Quelltext .. und hier das ganze Beispiel.

Eigentlich wollte ich ja Anfang des Jahres irgend einen Scraper in node.js schreiben. Allerdings musste ich feststellen das aus meiner Sicht node dafür noch nicht 100% ausgereift ist .. zweites Problem war das Hosting dafür .. irgendwie gabs damals noch keine guten Hoster ..

Im Frühjahr habe ich mich dann viel mit Suchmaschinenoptimierung beschäftigt und viel mit meinen eigenen Seiten herumexperimentiert .. und naja .. die Basis von SEO ist wie wir (fast) alle wissen OnPage Optimierung.

Da meine PHP Skills etwas eingerostet waren habe ich dann beschlossen irgend einen Scraper mit PHP zu schreiben .. erstes Opfer sollte Google sein .. ich wollte Rankings von Websites für spezifische Keywords auslesen .. den Scraper habe ich auch fertig und der liegt hier rum .. nur fand Google das nicht so toll .. die haben nämlich prompt die IP meines Servers gesperrt ..

Okay .. wäre ja nicht so das es mir an Ideen mangelt .. und als nächstes habe ich dann begonnen ein Tool zu schreiben das eine beliebige Website für ein beliebiges Keyword nach OnPage Faktoren untersucht .. ich habe mich grob an der Firefox Extension SenSEO orientiert .. will aber mein eigenes Tool noch ausbauen und erweiteren ..

Knapp 900 Zeilen PHP Code und zwei Wochen später veröffentliche ich heute die Version 0.1 .. und falls sie wer testet und Ideen hat bzw. Bugs findet würde ich mich über ne Rückmeldung freuen.

Hier findet ihr mein SEO OnPage Analyse Tool.

Und ich bin gerade irgendwie stolz das ich doch nicht soviel PHP verlernt hab und bedanke mich noch bei Flo der mir geholfen hat als mich die Regular Expressions fast verrückt gemacht haben :)

Update 2012

Das komplette Tool habe ich überarbeitet und man kann es nun hier finden: SEORCH – OnPage SEO Tool

Letzten Freitag wurde das Panda Update auch in Deutschland ausgerollt .. der Hinweis in Googles Webmastercentral Blog war etwas spärlich .. aber nun ist des da. Über die Auswirkungen des Panda Updates hatte ich vor einiger Zeit schonmal etwas geschrieben.

Zwischen dem ersten ausrollen den Panda Updates und der Version die wir heute haben gab es mittlerweile schon 4 Updates.

• Panda 1.0 erschien am 24. Februar 2011
• Panda 2.0 am 11. April
• Panda 2.1 am 10. Mai
• Panda 2.2 am 16. Juni
• Panda 2.3 am 23. Juli
• Panda in Deutschland am 12. August 2011

Bei der ganzen Panda Show geht es Google in erster Line darum qualitativ hochwertige Inhalte besser zu ranken.

Wie sich das Update nun grob ausgewirkt hat zeigen Sistrix und Searchmetrix anhand von Listen ganz anschaulich.

Verlierer sind die üblichen Verdächtigen die man meist sowieso nicht mehr klickt wenn man sie in den Suchergebnissen findet: ciao.de, gutefrage.net, dooyoo.de, wer-weiss-was.de, yopi.de, preisroboter.de ..

Gewinner sind Seiten die redaktionelle Inhalte bieten (im Zweifelsfall auch gut recherchiert :) ) wie heise.de, welt.de, kino.de, dhd24.com, spiegel.de, golem.de

Das muss aber nun nicht bedeuten das die Verlierer automatisch aus dem sichtbaren Bereich fallen .. teilweise landen sie einfach nicht mehr in den Top 5 oder Top 10 sondern erst auf der zweiten Seite. Außerdem sollte man bei den Zahlen insofern vorsichtig sein, daß es sich um keine längere Erhebung handelt. Fundierte Zahlen kann man meiner Meinung nach erst in 2-4 Wochen erwarten.

Soweit ich das bis jetzt beurteilen kann wirken sich die Änderungen auch geringer aus als in den USA. Google spricht selbst nur von ca. 6-9% der Suchergebnisse die betroffen sind. Die meisten Firmenauftritte und alle mittelmäßigen bis guten Blogs und Themenseiten dürfte dies gar nicht betreffen.

Wird aber vielleicht ganz lustig das Google Forum zum Thema Ranking in den nächsten Wochen zu beobachten .. immerhin ist es durchaus möglich das Google mit dem Panda Seiten schlechter rankt die das nicht verdient haben ..

Ich denke in 2-3 Wochen werde ich mir das genauer anschauen und dann nochmal zusammenfassen was Panda so alles angestellt hat.

Die Content Slider gibt es zwar auch schon wie Sand am Meer .. aber ich brauch das gerade für ein privates Projekt .. und wenn ich Zeit habe bau ich dann doch am liebsten selbst .. man könnte ja was lernen :)

Sinnvoll ist das Script wenn ihr auf sehr beschränktem Platz doch recht viel Informationen unterbringen wollt und es nicht ganz so wichtig ist das alles gleich am Anfang zu sehen ist.

Die Sildes sind als gewöhnliche DIVs definiert die horizontal floaten. Die rechte Kontrollfläche verschwindet wenn keine weiteren Slides mehr folgen bzw. die linke Kontrollfläche ist initial nicht zu sehen.

Hier findet ihr den Quelltext des Simplen Content Slider.

Hier nochmal das Script im Ganzen

$(document).ready(function(){
  var curPos = 0;
  var slideWidth = 630;
  var slides = $(’.slide’);
  var countSlides = slides.size(); 
  var controlLeft = $(’#controlLeft’);
  var controlRight = $(’#controlRight’);  
  var floatZone = $(’.floatZone’);


  /* Breite des Bereichs */
  floatZone.css(‘width’, slideWidth * countSlides);

  /* Click abfangen */  
  $(’.control’).bind(‘click’, function() {

    /* Aktuelle Position bestimmen */  
    if ($(this).attr(‘id’) === ‘controlLeft’) {    
      curPos = curPos-1;    
    } else {    
      curPos = curPos+1;    
    }

    /* Linken Kontrollbereich ein und ausblenden */    
    if (curPos === 0) {    
      controlLeft.hide()     
    } else {    
      controlLeft.show()     
    }  

    /* Rechten Kontrollbereich ein und ausblenden */    
    if (curPos === countSlides-1) {    
      controlRight.hide()     
    } else {    
      controlRight.show()     
    }  

    /* Slides wechseln */          
    floatZone.animate({
      ‘marginLeft’ : slideWidth*(-curPos)
    });

  });
});

CSS, JavaScript und HTML findet ihr dieses mal schön kompakt zum nachmachen in einer Datei.