Kostenloser Online-Markdown-Editor

Für die coole Sprache Markdown gibt es einen noch cooleren Online-Editor:

Dillinger

Kostenloser Online-Markdown-Editor

Eine Website, die bewusst auf das Wesentliche reduziert ist: Links der Editor, rechts die Instant-Live-Vorschau und dann noch Export als PDF, HTML oder Markdown und Speichern und Laden in/von Dropbox, Github, Google Drive und One Drive.

Gefällt mir richtig sehr gut, das Tool.

Beim Schreiben des Artikels bin ich auch noch über Lorem Markdownum gestolpert, einem Blindtext-Generator für Markdown. Nice!

(Übrigens: In unserem CMS Zeta Producer könnt Ihr auch mit Markdown arbeiten)

Handschrift-Text mit Pfeilen für Website

Heute wollte ich auch einer dieser coolen Hinweistexte mit Pfeil und Text machen, für unsere Zeta-Uploader-Website. Nach viel Recherche und ausprobieren bin ich dann ziemlich nahe an mein Wunsch herangekommen, mit folgendem Ergebnis:

HTML, Pfeile und Text

Das ganze ist ein transparentes PNG, welches ich mit ein bisschen JavaScript/jQuery und CSS einblende und positioniere.

Hier möchte ich kurz für mich und für andere als Erinnerung/Tipp mein Vorgehen beschreiben.

Schriftart

Die Schrift war relativ einfach. Ich habe nach „Handwriting font TTF“ gesucht und mich dann für den Font „Journal“ entschieden.

Ich habe bei Wunderlist gespickelt, welche Farbe und Schriftart diese verwendet haben und mir dann was ähnliches rausgesucht.

Das habe ich dann verwendet um in Paint.NET in eine Ebene als Text zu schreiben. Ich habe not „fett“ als Schriftstärke gewählt.

Pfeil

Die Pfeile waren deutlich schwieriger. Nach vielem, vielem Suchen, fand ich nix vernünftiges; entweder waren die Pfeile zu pixelig (weil Auflösung zu gering), oder die Pfeile sahen doof aus. (Ich wundere mich, auf wie viele Arten man Pfeile zeichnen kann).

Also habe ich mir gedacht: Lieber nicht ganz so innovativ aussehend, dafür solide und anständig und habe mich auf mein lokal installiertes Microsoft Office Visio gestürzt. In Visio gibt es auch Pfeile („Verbinder“) und diese lassen sich auch als gekrümmte Linie („Splines“) darstellen.

Also bin ich wie folgt vorgegangen. Zunächst in Visio:

  1. Neues, leeres Visio-Dokument erstellt.
  2. Verbinder eingefügt.
  3. Verbinder rechtsgeklickt und „Gekrümmte Linie“ ausgewählt.
  4. Linie mit Pfeil versehen.
  5. Linie dicker gemacht.
  6. Farbe der Linie angepasst an gewünschte Farbe.
  7. Über die Knubbel an der Linie, die entsprechende Kurve so hingezogen, wie ich sie gebraucht habe.
  8. Linie markiert.
  9. Im Menü „Datei“ den Menüpunkt „Speichern unter“ ausgewählt.
  10. Als „Dateityp“ dann „.PNG“ ausgewählt.
  11. Transparenz-Optionen so eingestellt, dass Pfeil mit transparentem Hintergrund gespeichert wird.

visio-pfeile-05

Nun weiter in Paint.NET:

  1. Weitere Ebene in Bild mit dem obig eingefügtem Text einfügen.
  2. Viso-PNG-Pfeil in diese Ebene einfügen.
  3. Über Ebenen-Rotationszoom den Pfeil ggf. noch drehen und bisschen skalieren (bevorzugt Pfeil in Visio schon ziemlich genau in die gewünschte Größe bringen)
  4. Pfeil so weit beschneiden am Schwanz, dass nur noch der Teil übrig bleibt, der benötigt wird.
  5. Pfeil schön relativ zum Text platzieren.
  6. Alle Ebenen zusammenfassen, ggf. Rändern noch entsprechen abschneiden.
  7. PNG speichern.

Ich hatte mir im Vorfeld als unterste Ebene des Paint-.NET-Bildes ein Bildschirmfoto des Browsers mit der Website, auf der später der Handschrift-Text platziert werden soll, eingefügt, so konnte ich schön sehen, wie die Größe von Handschrift-Text und dem Pfeil zur Website passt.

Ergebnis

Das Element stelle ich dann schön elegant mit jQuery dar, zunächst warte ich kurz (mittels der delay-Funktion) nach dem Laden der Seite, dann lasse ich es sanft einblenden (mit der fadeIn-Funktion).

Das fertige Ergebnis könnt Ihr nachfolgend betrachten:

Zeta-Uploader, mit Handschrift

Ggf. hilft Euch das ja auch mal, bzw. habt Ihr mir Verbesserungsvorschläge.

Ankommende Suchanfragen:

  • viso pfeil text transparent
  • visio entscheidung pfeil mit text
  • website handschrift bild

C# port of Google’s htmlcompressor library

Since I was in the need of a stand-alone HTML compression library (also called „minify“/“minification“), I quickly ported Googles htmlcompressor library from Java to .NET (C#).

Download the sources

Please note that I only ported the core functionality (i.e. not the command line stuff) and omitted the YUI compressor calls (JavaScript and CSS) since I do not need it right now.

All HTML unit tests ran successfully, I also did about an additional 50+ tests of uncompressed, real-world comples HTML pages both with my implementation and Google’s just to see that both versions produce 100% exact results.

Thanks to this Stack Overflow posting for helping on migrating.

Update 2015-10-19

There is now a NuGet package and a GitHub project for this library.

Ankommende Suchanfragen:

  • html compressor

Wie optimiert man eine Landing Page?

Jede Suchmaschine, egal ob es Google, Yahoo oder Bing ist, funktioniert anhand eines einmaligen und sehr komplexen Algorithmus. Er filtert das Internet und versucht dem Nutzer für seine Suchbegriffe möglichst relevante Ergebnisse wiederzugeben. Nach welchen Kriterien entscheidet die Suchmaschine, ob die Webseite die vom Nutzer gesuchten Inhalte bietet? Das werden die Suchmaschinenbetreiber sicherlich nicht verraten, aber sie geben bestimmte Signale, was wichtig ist und was nicht. Bestimmte Passagen des HTML-Codes der Websites werden analysiert und damit wird die Relevanz zum Suchbegriff bestimmt.  Die Webmaster können dem Suchalgorithmus die Entscheidung um einiges leichter machen, indem sie ihre Seiten optimieren. Natürlich sollten die Optimierungsmaßnahmen nach Richtlinien der jeweiligen bzw. denjeweiligen Suchmaschinen durchgeführt werden, da verbotenes Vorgehen zur Abstrafung führen kann, die zur Ausgrenzung aus dem Ranking führt.

Obwohl es sich vielleicht ziemlich einfach anhört, eine Webseite zu optimieren, ist es ein komplexer Prozess, bei dem viele wichtige Kleinigkeiten beachtet werden sollten. Wer für solche Feinarbeit keine Zeit bzw. nicht genügend Kenntnisse hat, der kann sich an einen Optimierungsexperten wenden. Entweder einen SEO-Experten im Bekanntenkreis suchen oder ein Projekt kostenlos bei einer Projektplattform ausschreiben und auf die Angebote der Freelancer warten. Wer es doch selbst versuchen möchte, die eigene Webseite zu optimieren, der sollte vor allem folgende Punkte (am besten schon bei der Webseitenerstellung) Schritt für Schritt abhaken:

  • Ein richtiger Title-Tag ist schon der halbe Erfolg. Jede Seite sollte für ein bestimmtes Keyword optimiert werden. Dieses sollte im Title-Tag an erster Stelle vorkommen und der Tag selbst darf nicht länger als 55 Zeichen sein, sonst wird er nicht vollständig bei den Suchergebnissen angezeigt. Außerdem sollte auch der Firmenname und eventuell der Standort der Firma bzw. des Produktes für dieses die Seite optimiert ist, erwähnt werden.
  • Bevor man aber den Title-Tag bestimmt, sollte man sich für eine passende URL entscheiden. Im Idealfall lautet die URL wie folgt: www.meinkeyword.de („meinkeyword“ einfach durch das eigene Keyword ersetzen und nun hat man eine perfekte URL).
  • Gleich nach dem Title-Tag kommt die Meta-Description, die auch ein wichtiger Bestandteil einer optimierten Seite darstellt. Es handelt sich um die Beschreibung, die der Nutzer in den Suchergebnissen sieht. Sie sollte nicht länger als 133 Zeichen sein, sonst wird sie, wie im Fall des zu langen Title-Tags nicht vollständig angezeigt. Eine gute Beschreibung entscheidet auch sehr oft, ob der Nutzer die Seite besucht oder nicht, sprich sie hat einen großen Einfluß auf den Traffic auf der Webseite. Das hat auch eine Bedeutung für die Suchmaschinenoptimierung. Wenn eine Seite hoch in den Rankings erscheint und trotzdem wenig Traffic hat, kann es ein Signal für den Suchalgorithmus sein, dass diese Website vielleicht nicht relevant für das Keyword ist und nicht so hoch ranken soll.
  • Inhalt der Webseite sollte den Nutzern einen Mehrwert bieten. Der Text sollte extra für diese Seite erstellt werden und interessant sein, damit Leute auf der Website länger verweilen. Passende Bilder steigern die Attraktivität des Textes, sie sollten aber nicht am Anfang des Beitrags erscheinen – zumindest, wenn man die Seite für Google optimiert und das tun die meisten Optimierer – weil der Nutzer zuerst Inhalt sehen sollte. Die Bilder dürfen auch nicht zu groß sein, da die Seite dann länger lädt und wenn es eindeutich zu lange dauert, hat es einen negativen Einfluß auf SEO.
  • Wichtig sind auch interne Verlinkungen zwischen verschiedenen Unterseiten. Dadurch unterstützen und pushen sie sich gegenseitig.  Alle Links sollten natürlich funktionieren, weil die 404s ebenfalls eine negative Auswirkung haben.

Es gibt über 200 Faktoren, die der Suchalgorithmus analysiert, deswegen ist es kaum möglich bei der Optimierung alles zu beachten, aber die meisten wichtigen Aspekte wurden aufgelistet. Außerdem hat jeder einige Punkte, die er selbst für sehr wichtig hält und sie deswegen immer berücksichtigt.

Stellenangebot: .NET Anwendungsentwickler (m/w) zur Festanstellung in Göppingen bei Stuttgart

Wir stellen ein:

Interesse? Bewerben!

(Stichwörter: Arbeitsplatz, Arbeit, Arbeitsstelle, Karriere, Software, .NET-Entwickler, ASP.NET, C#, SQL Server, Göppingen, Stuttgart, Ulm, Job, Festanstellung, sicher)

Stellenangebot: Web-Developer (m/w) zur Festanstellung in Göppingen bei Stuttgart

We’re hiring!

Stellenangebot Web-Developer (m/w) in Göppingen bei Stuttgart

(Download PDF)

Interesse? Bewerben!

(Stichwörter: Arbeitsplatz, Arbeit, Arbeitsstelle, Karriere, Software, Web-Entwickler, CSS, HTML, JavaScript, PHP, Göppingen, Stuttgart, Ulm, Job, Festanstellung, sicher)

Tabellen mit CSS zentrieren

(Notiz für mich selber)

Um eine Tabelle ohne CSS zu zentrieren ist eine mögliche Lösung:

zu schreiben.

Mit CSS geht das sauber so:

Funktioniert in meinen Tests mit Internet Explorer 8, Google Chrome, Mozilla FireFox, Safari auf iPhone.

(Gefunden bei „How to center tables with XHTML strict„)