CSS3 Tooltips

die ohne JavaScript funktionieren .. ich habe mal 3 verschiedene Arten einen CSS3 Tooltip zu bauen in einem Beispiel zusammengefasst.

Ein HTML5 Data Attribut via :before oder :after Pseudoselector auszulesen ist sicher die sauberste Methode. Allerdings bekomme ich in den Inhalt des Tooltips auch kein Markup. Außerdem eignet es sich auch nicht für lange und umfangreiche Texte da hier ja die Lesbarkeit gewährleistet bleiben muss. (siehe Variante 1)

Eine weitere Methode wäre den Inhalt des Tooltips als Kindelement dem zu öffnenden Element zuzuordnen .. für CSS kein Problem .. allerdings steht dann der Inhalt des Tooltips für Screenreader, Spider und Menschen die ggf. custom CSS zum anzeigen der Seite benutzen direkt im Fließtext. (siehe Variante 2)

Variante 1 und 2 funktionieren per mousehover .. doof für Touch Interfaces und wenn man den Text vielleicht herauskopieren möchte. Variante 3 bedient sich darum beim :target selector .. man muss also explizit auf den Link zum öffnen klicken. Danach wird das versteckte Target Ziel eingeblendet … ein CLOSE Button ist dann natürlich auch notwendig. (siehe Variante 3)

Hier alle CSS3 Tooltips zum testen .. das CSS steht direkt im Quelltext.

Google Venice Update

SEO kommt hier im Blog gerade etwas zu kurz .. aber ich glaube ich muss mal die nächsten Wochen vom coden an SEORCH etwas wegkommen und wieder mehr bloggen.

Venice?

wurde schon Mitte Juni von Google ausgerollt und zielte zu 100% auf lokale Suchergebnisse ab .. diese tauchen nun direkt in den organischen Suchergebnissen auf. Das bedeutet das man von Stadt zu Stadt für den gleichen Suchbegriff unterschiedliche Suchergebnisse erhalten kann.

Google versucht bei jeder Suche den Standort des Users zu ermitteln, zusätzlich ob es ich um eine ortsbezogene Suche handelt (Trigger können hier verschiedene Keywords sein) und blendet dementsprechend Suchergebnisse von lokalen Geschäften, Restaurants, Veranstaltungen usw. ein .. das habt ihr sicher schon gesehen.

Man ging davon aus, daß Google über die IP ungefähr ermitteln konnte wo man sich befand (zumindest in welcher Stadt). Mit Venice wurde nun scheinbar die Genauigkeit gesteigert und Google kann wohl in einigen Fällen bis auf wenige Meter genau ermitteln wo der Suchende sich befindet.

Aha .. und jetzt?

Ganz einfach .. wenn man mit seiner Website oder seinem Produkt eine gewisse Region oder Stadt ansprechen will muss Google das ja irgendwie rausbekommen können.

Die wichtigsten TODOs:

  • der Name der Region oder Stadt muss mehrfach auf den Seiten auftauchen, am besten in TITLE Tags und Headlines
  • eine Landingpage die auf eine bestimmte Region abzielt schadet auch nicht
  • diese Landing Page sollte dann die Adresse der lokalen Niederlassung beinhalten .. am besten nochmal zusätzlich als Microdata oder hCard .. auf jeden Fall gut lesbar im Markup
  • ein ausführlicher Eintrag, mit Link zu Website auf Places for Business ist Pflicht, dieser ist auch Voraussetzung um eine Anzeige in Google+ Local zu bekommen
  • bei Google Mapmaker kann man sich zur Not auch selbst hinzufügen (aber nicht spammen)

Außerdem ..

Sollte man drauf achten das man in Branchenverzeichnissen ebenfalls mit der korrekten Adresse und einem Link zur eigenen Website vertreten ist. Spontan fallen mir da Gelbe Seite, Yelp, Qype usw. ein.

Man sollte peinlichste genau drauf achten das die Adressen die man so im Web verteilt hat nicht voneinander abweichen. Ebenso die lokale Festnetznummer. Bilder als Adresse zu hinterlegen (aus Angst vor Spam) ist Tabu.

Sollte es mehere Möglichkeiten geben wie eine Region oder Stadt benannt ist sollte man eine für sich wählen und überall die gleiche Benamung verwenden.

Wer ganz sicher gehen will reicht noch eine Geo Sitemap ein.

Sich um mindestens 5 Erfahrungsberichte kümmern.

Alle üblichen OnPage und OffPage Regeln beachten die so gerade mal wieder aktuell sind.

Bloß nicht!

  • Postfachadressen oder Handynummern auf der Website verwenden
  • Mehrere Places Einträge faken
  • Unterschiedliche Adressen
  • Mehrere Adressen oder Telefonnummern auf einer Seite
  • Duplicate Content (durch Austausch des Ortsnamens) vermeiden

Meanwhile – CSS3 Loading Animation

Ich hab da mal eine Ladegrafik in CSS gebaut .. funktioniert in Webkit und Firefox .. die Styles für andere Browser müsste man noch ergänzen. Der Browser muss aber zwingend CSS3 transform, animation und keyframes unterstützen.

Ich hab jetzt aufgehört weiter dran zu basteln .. sonst fange ich noch an mit CSS3 ganze Bilder zu malen 🙂

Das CSS steht direkt im Quelltext.

Hier das Beispiel der CSS3 Ladegrafik.

JavaScript Suchmaschine

Vorab: der Quelltext ist nicht für den Produktiveinsatz gedacht. Bulletproof würde ich sowas mit einem JavaScript Framework umsetzen.

Mir ging es darum die Arbeitsweise eines Frameworks besser zu verstehen und den Quelltext mal in purem JS zu schreiben (was kaum noch einer heute macht).

Im Internet Explorer funktioniert das Script dann auch nicht .. aber einfach nur darum weil ich keinen IE zum debuggen zuhause habe.

Im Endeffekt

hatte ich die Basis der Suchmaschine in ca. 2 Stunden fertig, mit etwas debuggen hier, komischen XHR Ladezyklen im FF da und etwas ungewohnt viel JS (wenn man in den letzten Jahren nur noch mit Frameworks arbeitet) sind dann vielleicht 5 Stunden draus geworden.

2-3 Abende an denen ich mich damit gut entspannt habe 🙂 .. mehr als ein Feierabendexperiment wird aktuell auch nicht draus werden ..

Hier könnt ihr die JavaScript Suchmaschine ausprobieren.

Da steht dann auch noch ne ganze Menge zur Funktionsweise.

Den Quelltext gibts hier.

Fähigkeiten eines Frontend Entwicklers

In den letzten Wochen bin ich mehrmals über die Frage gestolpert was ein Frontend Entwickler denn nun können muss. Ich finde das konnte man in den vergangenen 10 Jahren jedes Jahr irgendwie anders beantworten.

Im Jahr 2006 hätte ich unter anderem CSS Hacks und Cross Browser Debugging genannt .. während das heute eher in Richtung Entwicklung für Mobile Endgeräte geht .. Media Querys .. die Besonderheiten von Touch Interfaces .. etc.

Aber um mal zu Potte zu kommen ..

Layout, Design und Usability

  • die Fähigkeit gute grafische Layouts per Bildbearbeitungssoftware zu erstellen
  • ein Auge für Farben und Stil
  • Fokus auf Usability, verschiedene Auflösungen und Endgeräte
  • kennt die Möglichkeiten von responsive Webdesign

HTML

  • semantisches Verständnis der HTML/HTML5 Syntax
  • logischer und sparsamer Einsatz von Markup
  • die Fähigkeit HTML im Texteditor ohne WSIWYG zu schreiben
  • kennt die Notwendigkeit von Web accessibility
  • entwickelt W3C Konform

CSS

  • Verständnis der CSS2/CSS3 Syntax
  • klares Verständnis des CSS Box Models
  • sinnvolle Vererbung und Gruppierung von Anweisungen
  • Kenntnis aller Selektoren, Pseudoselektoren
  • Positionierung, floatende Layouts
  • Fähigkeit große CSS Files klar zu strukturieren
  • Einsatz von Media Querys
  • Graceful Degradation / Progressive Enhancement im Hinblick auf verschiedene Browser
  • kennt die Möglichkeiten von CSS3

JavaScript

  • Basiswissen über Operatoren, Variablen, Datentypen, Objekte, Methoden
  • Basiswissen über Kontrollstrukturen, Schleifen, Funktionen
  • Kenntnis von Event Handling und DOM Manipulationen
  • Grundsätzliches Verständnis von XHR
  • zuverlässiger Umgang mit mindestens einer JavaScript Bibliothek

Testen und Debugging

  • nutzt Validatoren für HTML, CSS und JavaScript
  • kann Cross Browser, Cross Plattform debuggen
  • kennt Testframeworks
  • ist sich der unterschiedlichen Browser Eigenschaften bewusst

Performance

  • weiß welches Grafikformat wann eingesetzt wird
  • minimiert immer die Anzahl der Requests, Größe der Grafiken
  • kennt Testmöglichkeiten wie YSlow oder Webpagetest

Suchmaschinenoptimierung

  • Basiswissen über OnPage SEO
  • korrekter Einsatz von HTML Elementen, Attributen

Forschergeist und Erfahrung

  • hat Webseiten vom ersten Pixel bis zum Golive betreut und erstellt
  • kann sich mit etwas Aufwand in jedem CMS oder Web Framework zurecht finden
  • hat selbst schon Weblogs oder CMS Systeme installiert und administriert
  • kann Code von fremden Seiten auseinandernehmen und verstehen
  • probiert Dinge aus die er nicht versteht
  • hat die Geduld Fehler zu finden und sich mit Quelltext auseinander zu setzen
  • weiß sich zu helfen 🙂 .. vor allem wo man welche Information findet

Es gibt noch einige Sachen die ich nicht erwarte. Kein Frontend Entwickler muss die komplette Syntax von HTML, CSS oder JavaScript im Kopf haben. Er muss aber sehr wohl wissen wie er die Syntax richtig und fehlerfrei kombiniert ..

was ich damit sagen will ..

ich glaube nicht das man alles das ich da aufgezählt habe zu 100% auf dem Kasten haben muss. Aber man muss seine Werkzeugkiste kennen und alle Werkzeuge darin bei Bedarf zur Anwendung bringen können. Wenn das heißt das man vorher was nachlesen oder ausprobieren muss ist das sicher nicht schlecht. Schlimmer wäre es gute Werkzeuge nicht zu nutzen weil man sich nicht traut oder sie schlicht nicht kennt.

Feedback ausdrücklich erwünscht 🙂

Penguin Update

Vor ein paar Tagen offiziell angekündigt .. ein paar Worte zum Penguin Update.

SEO bashing

Ist ja gerade so ein bisschen zum Trend geworden .. in diversen Podcasts und Blogs regt man sich pauschal über Suchmaschinenoptimierer auf .. weil die ja die Suchergebnisse manipulieren würden .. Google sieht das etwas anders.

Es gibt diverse Methoden um eine Website für Suchmaschinen zu optimieren .. gute wie schlechte .. und ich kann nichts schlechtes daran finden eine Seite mit guten Inhalten etwas in den SERPs nach vorne zu verhelfen. Ebenso ist nichts schlechtes dabei die Semantik einer Website, die interne Verlinkung und den Quelltext so zugänglich wie möglich zu machen oder einfach guten Inhalt zu produzieren .. das dient eben nicht nur Suchmaschinen sondern in erster Linie dem User (und um den geht es).

Das viele SEOs es dabei völlig übertreiben ist leider offensichtlich .. sonst müsste Google nicht alle paar Monate seinen Algorithmus verändern.

Ich kann aber nichts schlechtes dabei finden wenn Linkkäufer und Black Hats eine auf den Deckel bekommen .. Google auch nicht 🙂

Ziel von Penguin

Das ist recht simpel .. mit der Zeit finden SEOs gewissen Schlupflöcher in Google Suchalgorithmus und bringen diese in Massen zur Anwendung. Ein Beispiel war das offensichtliche Keyword Stuffing um eine Seite eben relevanter als andere erscheinen zu lassen .. das Loch wurde schon vor Jahren geschlossen.

Wem geht es also dieses mal an den Kragen?

  • Webseiten die übernatürlich viele Links von extern bekommen
  • bei extrem vielen Links aus Blogkommentaren
  • Kommentarspam bei dem der Name das Keyword ist
  • wenn immer gleichlautende Linktexte verwendet werden
  • Webseiten die hauptsächlich Links aus Linktausch / Linknetzwerken bekommen
  • Webseiten die ihre Links offensichtlich gekauft haben
  • wenn man Links von als Webspam geflaggten Seiten bekommt

Fazit

Das Penguin Update zielt also vor allem auf unnatürliche Linkprofile ab. Ein Boomerang Effekt für Seiten die in der Vergangenheit viel Geld in plattes Linkbuilding investiert haben. Kostenintensiv war das sicher und ab sofort wird man dafür von Google bestraft .. nur leider kann man ein zusammengekauftes Linkprofil nicht so einfach rückgängig machen wie OnPage SEO Fehler ..

Linkbuilder werden in der Zukunft noch behutsamer vorgehen müssen. Zuviele neue Links in einer Woche .. selbst wenn Keyword Varianten benutzt werden .. können gefährlich sein.

Was will Google?

Vor allem gute, interessante, einzigartige, informative .. Webseiten. Inhalte die für User gemacht sind und die Usern weiterhelfen. Denn die bekommen ihre externen Links mit der Zeit von alleine oder werden in sozialen Netzwerken aufgegriffen und verlinkt. Davon redet Google nun schon ne ganze Weile .. es geht um qualitativ hochwertige Websites .. und jedes weitere Google Update wird in diese Richtung gehen.

CSS3 Lightbox mit Media Querys

Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. 🙂

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. Für den kleinen Screen eines iPhones natürlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhängig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer überlangen Lightbox erscrollen.

Verändert beim testen einfach die Fenstergröße des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

CSS3 Lightbox ohne JavaScript

Ich hacke ja schon etwas länger an HTML5 und CSS3 rum und probiere wie weit man es treiben UND dann auch noch verwenden kann. Mit dem Path Menü hab ich damals den Hack mit dem checked Selector und den versteckten Input Felder ausprobiert.

Die CSS3 Lightbox die ich gebaut habe funktionieren im IE10, FF, Chrome und Safari. Auf mobilen Endgeräten funktionieren die Boxen auch. Getestet auf dem iPhone und iPad unter iOS > 5.1.

Der Selector bei diesem Beispiel ist der TARGET Selector. Er ist dazu gedacht, das aktive TARGET Element, das per Anker angesprungen wurde zu stylen. Daneben spiele ich mit der VISIBILITY und der OPACITY um einen Lightbox Effekt zu erzielen.

Beide Eigenschaften sind auch notwendig da die ganzen Overlays ja direkt in den Viewport geklebt werden .. aber (erst mal) nicht klickbar sein sollen wenn sie nicht zu sehen sind.

Wenn die Lightbox offen ist .. soll jeder Klick um die Lightbox herum zum schließen der Lightbox führen .. so kennt es der User .. dazu muss man das komplette teiltransparente graue Overlay nach dem erscheinen der Lightbox klickbar machen.

Auch kein Problem .. einfach dem Overlay einen leeren Ankerlink verpassen und den Cursor auf default setzen.

Mit dem PLUS Selector und ein paar CSS Transitions kann man dann daraus jede Menge Sachen machen die vorher nur per JS möglich waren .. in diesem Fall ein paar Lightboxen.

Das CSS steht direkt im HTML Dokument .. und auch sonst hab ichs erst mal einfach gehalten.

Hier das Beispiel – CSS3 Lightbox ohne JavaScript.

Regular Expressions Cheat Sheet

Ich habe oder eher hatte meine liebe Not mit Regular Expressions .. aber zwei Dinge haben mir geholfen .. da wäre einmal dieses Tool um RegEx zu testen.

Damit lernt man es allerdings nur unzureichend .. es eignet sich einfach dafür um seine Pattern zu testen. Was mir echt auf die Sprünge geholfen hat war eigentlich ein ganz simples Cheat Sheet von Dave Child. Hier ist das RegEx PDF.

Die ganzen riesigen RegEx Websites die in langen Sätzen und noch viel mehr Worten versuchen die Materie zu erklären sind an mir (oder ich an ihnen) gescheitert.