Quellcode formatieren & erstellen: einfach und schnell

Inhalt öffne dich!

Anfang Juli haben wir TwitterCards für uns entdeckt und das Potential hinter dieser Art von Tweets aufgedeckt. Diese Woche ist es die Webseite "webcodetools.com", welche wir wärmstens empfehlen können. Warum?
Weil diese Seite viel Arbeit in Bezug auf Code-Bastelei abnimmt und dazu noch einfach zu bedienen ist und die Unterstützung von TwitterCards nahtlos die Ergänzung zu unserem Card-Beitrag darstellt.

Beim Aufrufen der Seite werden einem sechs große Kategorien angezeigt:

  • CSS3
  • HTML5
  • Microdata
  • Meta-Tags
  • Facebook OpenGraph
  • TwitterCards

Hinter jedem dieser Felder verbergen sich Generatoren, die für eine bestimmte Art von Codegenerierung verantwortlich sind. Die Oberfläche ist recht simpel gehalten. Jeder Generator ist in 3 Spalten aufgebaut.

  1. Generator
  2. Vorschau
  3. fertiger Code

Weiterhin zeigt eine kleine Spalte, oberhalb der drei Spalten auf, welche Browser mit dieser Art von Code kompatibel sind.
Um einen Einblick in die Vorteile von Webcodetools zu bekommen, stellen wir Ihnen nun Beispiele aus jeder Kategorie vor:

CSS3

Wer muss nicht jedes mal darüber nachdenken, welche Zahl für welche Box-Shadow-Eigenschaft steht? Mit dem Box Shadow Generator ist es ab heute ganz einfach einen Schatten hinter eine Box zu legen.

Man kann sagen, ob er innen oder außen ist, die Farbe und Position bestimmen, wie sehr er verwischt und wie groß er sein soll. Es gibt eine automatische Vorschau und der CSS-Code wird gleichzeitig angepasst und ausgegeben - ganz einfach.

HTML5

Der Generator hilft bei der Video-Einbettung und unterstützt Feature wie das automatische Abspielen und Wiederholen des Videos, die Ausblendung des Kontrollfeldes und der Anpassung der Größe.

Microdata

Microdata bzw. Rich Snippets sind zusätzliche Informationen, die einer Seite oder einem Seitenelement mitgegeben werden können, um es dem Leser interessanter zu machen und die dazugehörige Anzeige in den Suchergebnissen zu optimieren. Hierfür bietet Webcodetools einige Generatoren an, die diverse Elemente betreffen.
Dieses Beispiel orientiert sich an einem eingebettetem Video. Zusätzliche Informationen wie Vorschaubild, Vorschautext, Dauer, Upload-Datum und vor allem der Beschreibung helfen Google dieses Video besser zu verarbeiten.

Meta-Tags

Der Meta-Tag Generator generiert die klassischen Meta-Tags für eine Webseite, bestehend aus Schlüsselwörtern, Seitenbeschreibung und Autor. Weiterhin bietet er die Auswahl zwischen diversen Indexierungs-Möglichkeiten an, um gewissen Seiten auszuschließen.

Facebook OpenGraph

Dieser Generator funktioniert ähnlich wie der Meta-Tag Generator, nur das die Daten für Facebook optimiert sind, sobald der Link in dem die OpenGraph-Tags vorhanden sind, per Status geteilt wird.

Facebook Open Graph webcodetools

Twitter Cards

Der letzte Generator ist für die TwitterCards zuständig und macht es Webmastern ziemlich einfach, den korrekten Code für den gewünschten Kartentypen generieren zu lassen.

Fazit

Webcodetools.com erleichtert das Leben von uns Frontend-Entwicklern, aber ersetzt uns Gott sei dank nicht komplett.

Zurück

Legomännchen mit Werkzeug in der Hand - Werkzeuge für Ihr Business

Sie möchten auch von modernen Online-Tools profitieren und den Erfolg Ihrer Seite damit langfristig ankurbeln?