Entwicklung

HbbTV: CE-HTML im Fernseher

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!

Der Teletext (oder auch Videotext) mit seinen 23 Zeilen ist schon etwas in die Jahre gekommen und soll in den nächsten Jahren durch HbbTV ersetzt werden. Mit Hybrid Broadcast Broadband TV soll die Zukunft in die textbasierte Information am Fernseher Einzug halten. Nicht mehr über die Satelliten-Ausstrahlung, sondern über die Internetverbindungen sollen so Informationen abgerufen werden.

HbbTV Logo

Mit dieser Technik ist es erstmals möglich hochaufgelöste Informationsseiten mit Videos und Interaktivität zur Verfügung zu stellen. Realisiert wird die durch Standard-Techniken aus der Websiten-Programmierung. So wird bei HbbTV CE-HTML eingesetzt. Das Consumer Electronic-HTML stellt eine Erweiterung der bestehenden Standards für die Einbindung von aktuellen Fernsehbildern und die Bedienung mit der Fernbedienung dar.

Aufbau eines CE-HTML Dokumentes

Grundsätzlich ist ein Dokument mit CE-HTML genauso aufgebaut wie ein normales HTML-Dokument. Unterschiede gibt es lediglich im verwendeten MIME-Type und dem Doctype. So wird das Dokument mit dem Content-Type-Header application/ce-html+xml übertragen. Der Doctype sollte wie folgt lauten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ce-html-1.0-transitional.dtd">

Erwähnenswert ist auch noch folgende CSS-Regel, um die Seite transpartent über das TV-Bild legen zu können:

body {
	background-color: transparent;
}

Steuerung

Gesteuert wird die Anwendung natürlich nicht über eine Maus, sondern über die Tasten der Fernbedienung. Hauptsächlich über die vier farbigen Tasten in Rot, Gelb, Grün und Blau und den Pfeiltasten. Bei der Benützung einer der Tasten auf der Fernbedienung wird ein keydown-Event mit dem entspechenden keyCode-Wert ausgelöst. Über einen EventListener kann nun bei solch einer Aktion der Code der Taste ausgewertet werden. Die Werte der einzelnen Tasten sind in den Konstanten VK_RED, VK_BLUE, usw. gespeichert und müssen nur mehr mit dem übergebenen Code verglichen werden.

document.body.addEventListener("keydown", function(e){
   switch(e.keyCode){
       case VK_RED:
           alert("rot");
       break;
       case VK_BLUE:
           alert("blau");
       break;
       case VK_GREEN:
           alert("grün");
       break;
       case VK_YELLOW:
           alert("gelb");
       break;
       case VK_UP:
           alert("rauf");
       break;
       case VK_DOWN:
           alert("runter");
       break;
       case VK_LEFT:
           alert("links");
       break;
       case VK_RIGHT:
           alert("rechts");
       break;
   }
});

Eine Liste mit allen Befehlen bekommt man zum Beispiel bei Opera oder durch Lektüre der Spezifikation von HbbTV.

Weitere Informationen über die Verwendung von Bildern, Videos, dem Applikations-Modell und den weiteren Funktionen, wie zum Beispiel Einstellungen und Lesezeichen, gibt es in der oben genannten Spezifikation.

Link

Webtexte schreiben mit Markdown

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!

Wenn Sie selbst einen Blog betreiben, oder regelmäßig eine Seite im Internet mit redaktionellen Texten bestücken kennen Sie das Problem womöglich bereits: Der Schreibfluss mag nicht so recht zusammenkommen, da er durch die Handhabung des WYSIWYG-Editors, oder noch schlimmer durch das Schreiben von reinem HTML-Code gestört wird. In diese Bresche springt das, unter der BSD-Lizenz verfügbare, Tool Markdown von John Gruber.

Vorteile

Markdown ist für eine Vielzahl von Anwendungsgebieten verfügbar. So steht zum Beispiel mit MarkdownPad auch ein Stand-alone Editor für Windows bereit. Auch in PHP und anderen Programmiersprache steht diese Eingabemethode zur Verfügung und sogar für viele Content-Management-Systeme stehen Plugins bereit. So schreibe ich diesen Artikel auch schon in Markdown in meinen Drupal-CMS.

Der größte Vorteil stellt aber die einfache und leicht zu lernende Syntax bereit, die im Gegensatz zu HTML auch wirklich intuitiv „erraten werden könnte“. So werden die Absätze automatisch mit den entsprechenden <p>-Tags ausgestattet und beispielsweise H2-Überschriften mit ##Überschrift erstellt. Dadurch kann der „Quelltext“ des Artikels oder der Seite vom Menschen viel besser gelesen und auch später wieder leichter verstanden werden.

Beispiele

Das Beispiel

The quick brown fox jumps over the lazy dog

kann ganz einfach über folgende Eingabe erstellt werden:

The quick brown \*fox\* jumps over the lazy \*\*dog\*\*

Mit einem Sternchen vor und nach einem Wort kann es kursiv geschrieben werden und durch zwei Sternchen fett.

In diesem Text gibt es einen Link.

In diesem Text gibt es einen \[Link](# "Titel")

Ein Link in der Markdown-Syntax wird über solch ein Konstrukt eingefügt und gleich (optional) mit einem Titel versehen.

  • ein Punkt
  • noch ein Punkt

* ein Punkt

* noch ein Punkt

Nur durch Sternchen vor jedem Aufzählungspunkt wird eine <ul>-Liste erstellt.

  1. Punkt eins
  2. Punkt zwei

1. Punkt eins

2. Punkt zwei

Fazit

Ich habe das Tool erst heute kennengelernt, bin aber bereits jetzt begeistert davon. Es wird dadurch wirklich viel komfortabler einen Artikel zu schreiben. Außerdem geht einem das Ausstatten mit dem entsprechenden Markup viel schneller von der Hand. Nach kurzer Einarbeitungszeit mag ich Markdown wirklich nicht mehr missen.

Die vollständige Dokumentation finden Sie auf der offiziellen Seite.

Den Quelltext dieses Artikels können Sie hier herunterladen.

Update: Ah, ja: Gefunden hab ich das Thema drüben beim Schockwellenreiter

Entwicklung

Erste Schritte in Processing

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!

Processing stellt eine einfache Entwicklungsumgebung für den Einstieg in die Programmierung dar. Auch für fortgeschrittene Programmieren hält die IDE eine Möglichkeit für die rasche und einfache Umsetzung einer Idee bereit.

Übersicht

Processing verwendet eine vereinfachte Syntax von Java und beeinhaltet eine simple IDE für die Entwicklung in dieser Sprache. Seine Stärken spielt die Sprache vor allem beim Erstellen von grafischen Programmen, also vor allem bei Zeichnungen und (auch interaktiven) Grafiken.

Processing IDE

Das Ergebnis wird als exe-Datei ausgegeben, die auch außerhalb des verwendeten Systems lauffähig ist. Außerdem kann das Programm als Java-Applet exportiert werden. Da die Verwendung von Applets in Zeiten von HTML5 eher zu vermeiden ist, können die Programme auch mit Processing.js in JavaScript mit Hilfe des canvas-Elements dargestellt werden.

Zusammen mit der IDE werden auch Beispiele für die Processing-Sprache mitgeliefert. Eines davon ist dieses Beispiel in dem Kreise mit der Maus gezeichnet werden, oder auch dieser Würfel.

Download

Die komplette IDE kann auf der offiziellen Website heruntergeladen werden und steht dort in Versionen für Windows, Mac OSX und Linux bereit. Wenn man bereits das Java SDK installiert hat, kann man auch die Version „Windows (Without Java)“ verwenden, was natürlich Größe einspart.

Nach dem Download, das bei einer DSL-Leitung nur etwa 2 Minuten dauert, und dem Entpacken startet man die IDE ohne Installation durch Ausführen von processing.exe.

Aufbau eines Programmes

Ein Programm wird in Processing „Sketch“ genannt und besitzt immer die folgende Grundstruktur:

void setup(){

}

void draw(){

}

Im Abschnitt „setup“ werden die grundlegenden Einstellungen wie die Fenstergröße oder Startwerte von Variablen einmalig angegeben. Dieser Abschnitt wird nur einmal am Anfang des Programmes ausgeführt.

Der Teil namens „draw“ wird immer wieder für jeden Frame im Laufe des Programmes aufgerufen. Hier hinein wird auch der Hauptinhalt geschrieben, der das eigentliche Programm ausmacht. Um beispielsweiße eine einfache Linie von einer Ecke in die andere Ecke zeichnen zu lassen, braucht man folgendes:

void setup(){
	size(200,200);
	line(0,0,200,200);
}

void draw(){

}

Mit ‘size(200,200)’ wird die Größe des Fenster angegeben und mit ‘line(0,0,200,200)’ die Linie gezeichnet. Die ersten beiden Werte geben die x und y-Position des Startpunktes an und die beiden letzten Zahlen die Korrdinaten des Endpunktes.

Interaktivität

Um ein Processing-Programm interaktiv zu machen kann man zum Beispiel die Position der Maus abrufen. In den Variablen ‘mouseX’ und ‘mouseY’ sind die aktuellen Koordinaten des Mauszeigers enthalten. Um nun die Linie an der Position der Maus starten zu lassen, muss die Position natürlich laufend abgerufen werden. Dazu muss diese Logik in den „draw“-Bereich wandern:

void setup(){
	size(200,200);
}

void draw(){
	line(mouseX,mouseY,200,200);
}

Natürlich gibt es noch viel mehr Beispiele und Verwendungmöglichkeiten, doch die ersten Schritte mit der Programmiersprache und der IDE habe ich mit diesem Artikel hoffentlich leicht verständlich vermittelt.

Security

Spambots mit Sonderzeichen im Captcha täuschen

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!

Sie sind die wohl nervigsten Nebenerscheinungen beim Betrieb einer Homepage bzw. eines Blogs: Spambots.

Was sind Spambots?

Spambots sind Computerprogramme die mehr oder weniger automatisch Formulare im Internet finden und diese mit vordefinierten Text befüllen. Meist werden in den Nachrichten in den Kommentaren oder bei Kontaktformularen Tabletten und/oder Potenzmittel angeboten. Mit der Zeit kann die Überprüfung von solchen Kommentaren und ihrer Freischaltung eine große Menge Zeit in Anspruch nehmen.

Captchas

Lange Zeit waren mehr oder weniger komplizierte Captchas (Completely Automated Public Turing test to tell Computers and Humans Apart) das Mittel der Wahl um eine automatische Absendung von Formularen zu verhindern. Mit einem wechselnden Text, der in ein Bild geschrieben wird, wird ausgenutzt, dass die Erkennung von Text beim Menschen weitaus besser funktioniert als bei Computerprogrammen. So kann das Formular nur abgeschickt werden wenn das Bild korrekt erkannt wurde.

Das funktioniert(e) ganz gut solange die Spambots noch keine Texterkennung eingebaut haben. Inzwischen können diese einfache Captchas erkennen und die Formulare dann trotzdem abschicken. In Folge dessen werden Captchas immer komplizierter und stellen so langsam auch für den Menschen Probleme bei der Erkennung dar. Ein Beispiel dafür ist der Dienst reCAPTCHA von Google. 

Django Captcha

Meine Idee

Da diese Computerprogramme stets für eine große Anzahl von Websiten verwendet werden und wohl kaum auf einzelne Seiten abzielen habe ich mir gedacht, dass man nur das typische Schema des Captcha-Textes ändern müsste. So probierte ich einfach die Captchas auf meiner Homepage nur mehr aus Umlauten und Sonderzeichen zusammenzusetzen.

Recaptcha

Und siehe da: Seit ich auf dieser Seite diese Art von Captchas verwendet wurde kein einziger neuer Spam-Kommentar abgeschickt und auch das Kontaktformular nicht mehr missbraucht. Laut den Logs erkennen die Spam-Bots im obigen Beispiel nur mehr „ooa”.

Fazit

Ich weiß, dass auch das kein Wundermittel ist. Man kann sich jedoch schon einmal auf die Eigenarten der deutschen Sprache bzw. der Sonderzeichen verlassen. Auf jeden Fall erhöht sich der Aufwand für Spambots im Gegensatz zur Schwierigkeit der Erkennung für den Menschen sehr viel mehr.

Was halten Sie von dieser Lösung? Ist die Erkennung für den Menschen schwieriger als sonst? Würden Sie diese Art auch verwenden?