Sebastian Thiele » Programmieren http://sebastian.thiele.me Mein Leben, meine Arbeit und ich Thu, 02 Sep 2010 17:32:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 Tabellenzeilen unterschiedlich gestalten mit jQuery http://sebastian.thiele.me/blog/jquery-even-odd/1873?piwik_campaign=RSS&piwik_kwd=1873 http://sebastian.thiele.me/blog/jquery-even-odd/1873?piwik_campaign=RSS&piwik_kwd=1873#comments Mon, 26 Jul 2010 09:38:33 +0000 Sebastian http://sebastian.thiele.me/?p=1873 Vielen lange Tabellen haben den Nachteil, dass sie unübersichtlich werden. Schnell verrutscht man in der Zeile und schon kann man von vorne anfangen. Beliebt ist es ja, jede zweite Zeile unterschiedlich zu formatieren um nicht ganz so schnell die Übersicht zu verlieren.

Am einfachsten ist es, wenn man eine statische Tabelle hat, die sich nicht mehr verändert. Einfach jede gerade (engl. even) oder ungerade (engl. odd) Zeile mit einer entsprechenden CSS Klasse  versehen. Wie man dann das CSS gestaltet ist jedem selbst überlassen aber eine dezente Hintergrundfarbe ist immer Hilfreich.

Das Ganze wird erst zu einem Problem, wenn man die Tabelle am besten per JavaScript dynamisch erstellen lässt. Nehmen wir an es können beliebig viele Zeilen hinzugefügt werde und an beliebigen Stellen wieder entfernt werden, so dass die Reihenfolge nicht vorhersehbar ist. Also müssen die Formatierungen dynamisch vorgenommen werden. Beispielhaft soll das mal an der statischen Tabelle gezeigt werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery even odd</title>
	<meta name="author" content="Sebastian Thiele">
	<!-- Date: 2010-07-25 -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	  $(document).ready(function() {
	    $("tbody").find("tr:even").addClass("even");
	    $("tbody").find("tr:odd").addClass("odd");
	  });
	</script>
	<style type="text/css">
	  .even{color:red;}
	  .odd{color:blue;}
	</style>
</head>
<body>

  <table>
    <thead>
      <tr>
        <th>Zeile1</th>
        <th>Zeile1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Zeile2</td>
        <td>Zeile2</td>
      </tr>
      <tr>
        <td>Zeile3</td>
        <td>Zeile3</td>
      </tr>
      <tr>
        <td>Zeile4</td>
        <td>Zeile4</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

In dem Beispiel werden alle gerade und ungeraden Zeilen der Tabelle (genauer gesagt innerhalb des tbody’s) unterschiedlich formatiert. Wenn es kein tbody gibt, musst einfach das (“tbody”) weggelassen werden.

Auf das fiktive, dynamische Problem von oben angewendet muss der super simple jQuerykonstrukt in den “Zeile hinzufügen” oder “Zeile entfernen” Aufruf eingebunden werden.

Super simple dank jQuery.

]]> http://sebastian.thiele.me/blog/jquery-even-odd/1873?piwik_campaign=RSS&piwik_kwd=1873/feed 0 HowTo Google Language API einfach nutzen http://sebastian.thiele.me/blog/howto-google-language-api-einfach-nutzen/1706?piwik_campaign=RSS&piwik_kwd=1706 http://sebastian.thiele.me/blog/howto-google-language-api-einfach-nutzen/1706?piwik_campaign=RSS&piwik_kwd=1706#comments Tue, 25 May 2010 11:00:12 +0000 Sebastian http://sebastian.thiele.me/?p=1706 willkommenLetztens habe ich mal ein wenig mit der Google AJAX Language API herum gespielt. Ich finde da haben sie wieder etwas sehr gutes und einfaches entwickelt. Beispielsweise habe ich das auf meiner (noch nicht fertigen) github Seite (http://sethiele.github.com) eingesetzt um Benutzern meine letzten Tweets und Blogposts in ihrer Sprache anzuzeigen. Im Folgenden möchte ich Schritt für Schritt zeigen wie man das ganze erfolgreich umsetzt. Am Ende soll eine Seite existieren auf der Text je nach vom Besucher eingestellter Browsersprache angezeigt werden soll.

Zur besseren Lesbarkeit teile ich den HTML Code und des benötigte JavaScript (JS) in zwei Dateien. In die Datei content.html und language.js. Beide gibt es am Ende auch zum herunterladen.

Für diese Anleitung sollte man schon ein wenig mit jQuery vertraut sein.

Ein Einfaches Beispiel

<html>
  <head>
    <title>test translate</title>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="language.js"></script>

content.html

Zuerst muss die Google Ajax Api eingebunden werden. In Zeile 4 geschieht das über das herkömmliche <script> Tag.
In Zeile 5 wird noch die JS Datei eingebunden, in der unser JS stehen soll.

  </head>
  <body>
    <div id="inhalt">
      Dank <a href="http://sebastian.thiele.me/blog/howto-google-language-api-einfach-nutzen/1706">dieses</a> tollen Tutorials von <b>Sebastian</b> kann ich meine Seite jetzt auch <i>in mehreren Sprachen</i> anbieten.
    </div>
  </body>
</html>

content.html

Wie Wichtig an dieser Stelle ist die ID des Divs (Zeile 8 ) und der Inhalt (Zeile 9). Alles andere kann beliebig sein. Auch kann CSS angewendet werden wie es beliebt.
Ich habe extra ein Beispiel Text ausgesucht, der mit ein wenig (mehr oder weniger sinnvollen) HTML formatierten Inhalt versehen ist. Um zu zeigen, dass die Formatierung am ende übernommen wird. Die Google Language API verändert keine Formatierung.

Das war auch schon alles an der content.html Datei. Der rest der Magie kommt in der language.js Datei.

// Lade jQuery von Google
google.load("jquery", "1.4.2");
// Lade Language support
google.load("language", "1");
// Wenn Seite geladen beginne mit jQuery Magic
google.setOnLoadCallback(function() {

translate.js

Ich habe mich dazu entschlossen gleich die von Google zur Verfügung gestellte jQuery Version zu nutzen (Zeile 2). Der Vorteil ist (meiner Sicht nach), wenn sie viele Verwenden ist sie schon in vielen Browsercashes drin und muss nicht immer wieder neu geladen werden.
In Zeile 4 Lade ich die Google Language API in der Version eins. Und Zeile 6 öffnet die JS Verarbeitung, sobald  die HTML Seite fertig geladen ist. Okay, man könnte auch direkt die Übersetzung anschmeißen und nicht auf das Ende der Seite warten, doch dann könnte es zu konflikten kommen, falls noch Inhalte geladen werden (Bilder usw.)

  var translate = function(text){
    // Überprüfen welche Sprache der gesendete Text hat
    google.language.detect(text, function(result){
      // Es dürfen keine Fehler aufgetreten sein
      if (!result.error && result.language) {

translate.js

In Zeile 9 wird die Sprache des übermittelten Textes überprüft. Die Spracherkennung ist meiner Erfahrung nach recht gut. In Zeile 11 Wird gezeigt, dass eine Fehlerbehandlung gemacht werden sollte. Sollte keine Schrift erkannt sein oder ist dabei ein Fehler aufgetaucht wird der alte Text angezeigt (er wird nicht übersetzt).

        // Überprüfen welche Sprache im Browser eingestellt ist
        if (navigator.appName == 'Netscape')
          var language = navigator.language;
        else
          var language = navigator.browserLanguage;
        // Wenn eingestellte Sprache gleich übermittelte Sprache dann abbrechen
        if (result.language == language.substring(0,2)) return;

translate.js

Hier wird in Zeile 13 bis 16 die eingestellte Sprache im Browser herausgefunden. Dabei sind zwei unterschiedliche Wege nötig, da mal wieder nicht alle Browser gleich Antwort geben.
In Zeile 18 wird noch überprüft ob die eingestellte Sprache, die gleiche ist, wie die des Textes. Wenn dem so ist, wird die Verarbeitung abgebrochen, und es wird kein anderer Text angezeigt. (Man muss ja den TExt nicht noch mal übersetzen lassen). Zu beachten ist, dass in Zeile 18 .substring(0,2) angewendet wird. Das ist nötig, da einige Browser nicht (z.B.) mit en antworten (was Google verwendet) sondern mit eng. Aber für Google werden nur zei Buchstaben benötigt.

        // Text übersetzen
        google.language.translate(text, result.language, language.substring(0,2), function(result) {
          $('#inhalt').html(result.translation);
        });
      }
    });
  };

translate.js

Die eigentliche Übersetzung geschieht in Zeile 20. Der Google Funktion translate muss als Parameter der zu übersetzende Text, die Quellsprache, die Zielsprache und eine Callback Funktion übergeben werden.
Zeile 21 Schreibt das ganze dann wieder in den DIV (Überschreibt das alte original). Tipp von mir, ich würde immer noch irgendwie kenntlich machen, dass es ein von Google Übersetzer Text ist, um den Besuchern zu zeigen, dass man an einigen Stellen nicht zu doof ist zum übersetzen, sondern dass es maschinell übersetzt wurde.

  // Sende Inhalt zum übersetzen
  translate($('#inhalt').html());
});

translate.js

Fehlt nur noch Zeile 27 um die Übersetzung zu starten.
Mit ein wenig mehr Code kann man die Funktion auch noch so erweitern, dass man mehrere Elemente übersetzen kann. Dazu sollte der Funktion mitgeteilt werden, wo am ende die Übersetzung hingeschrieben werden muss (Zeile 21).

Mit noch ein wenig mehr jQuery Magic kann auch noch ein schönes “AJAX Wait” Bildchen angezeigt werden, und erst nach der Übersetzung (oder auch nicht Übersetzung) wird der Text angezeigt. Aber da zähle ich ganz auf euch und eure Kreativität.

Und wie versprochen wird sogar ein (mehr oder weniger sinnvoll) formatierter, übersetzter Text ausgegeben.

Fragen? Anregungen? Ich bin gerne für Feedback offen.

Quellcode: Google-Language-v1

Lizenz: cc by-nc-sa

]]> http://sebastian.thiele.me/blog/howto-google-language-api-einfach-nutzen/1706?piwik_campaign=RSS&piwik_kwd=1706/feed 0 Google Webfonts http://sebastian.thiele.me/blog/google-webfonts/1691?piwik_campaign=RSS&piwik_kwd=1691 http://sebastian.thiele.me/blog/google-webfonts/1691?piwik_campaign=RSS&piwik_kwd=1691#comments Wed, 19 May 2010 19:13:28 +0000 Sebastian http://sebastian.thiele.me/?p=1691 Google hat eine wirklich einfach Möglichkeit geschaffen einfach Schriftarten zu verwenden, die nicht so ohne weiteres auf allen Rechnern installiert ist.

Früher mussten dafür Texte in Grafiken umgewandelt werden. Nachteil ganz klar: Suchmaschinen wissen nicht was auf dem Bild zu sehen ist und man konnte nicht einfach kopieren1.

Doch nun geht das ganze recht einfach:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Text</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 { font-family: 'Reenie Beanie', arial, serif; }
</style>
</head>
<body>
<h1>Dieser Text hat jetzt eine besondere Schrift</h1>
</body>
</html>
Google Schriften

Google Schriften

Wie gesagt verdammt einfach. Wie es genau geht findet man auf http://code.google.com/webfonts

  1. Ab und an ist das ja doch mal gewünscht
]]> http://sebastian.thiele.me/blog/google-webfonts/1691?piwik_campaign=RSS&piwik_kwd=1691/feed 0 Google Maps mit gMap jQuery Plugin http://sebastian.thiele.me/blog/google-maps-mit-gmap-jquery-plugin/1640?piwik_campaign=RSS&piwik_kwd=1640 http://sebastian.thiele.me/blog/google-maps-mit-gmap-jquery-plugin/1640?piwik_campaign=RSS&piwik_kwd=1640#comments Sun, 09 May 2010 15:31:21 +0000 Sebastian http://sebastian.thiele.me/?p=1640 gMap

gMap

Über einen tweet bin ich auf gMap aufmerksam geworden, ein jQuery Plugin. Bis her fand ich es immer recht mühsam eine Google Map auf eine Seite zu bringen. Doch dank gMap (aktuelle Version 1.1.0) ist das ganze jetzt recht einfach geworden. Alles was man braucht ist ein wenig HTML/ JavaScript Ahnung, einen Google Map API Key und gMap mit jQuery.

3 Zeilen Code reichen aus um eine Karte auf den Bildschirm zu zaubern. (Siehe Dokumentation)

]]> http://sebastian.thiele.me/blog/google-maps-mit-gmap-jquery-plugin/1640?piwik_campaign=RSS&piwik_kwd=1640/feed 0 Ich nun auch mit FF Searchplugin http://sebastian.thiele.me/blog/ich-nun-auch-mit-ff-searchplugin/721?piwik_campaign=RSS&piwik_kwd=721 http://sebastian.thiele.me/blog/ich-nun-auch-mit-ff-searchplugin/721?piwik_campaign=RSS&piwik_kwd=721#comments Fri, 20 Mar 2009 09:05:36 +0000 Sebastian http://blog.sebastian-thiele.net/?p=721 top_mysearchpluginNach dem Erfolg1 des Bee5 Searchplugins (Bee5 Suchplugin für FireFox) und dem Versuch meiner Herzdame gestern etwas über Ubuntu auf meinem Blog zu finden, habe ich mich entschlossen nun auch ein Searchplugin für meinen Blog anzubieten.

mein_blog_searchpluginDem Aufmerksamen betrachter wird es sicher aufgefallen sein, dass sich beim Besuchen des Blogs die Suchleiste im Firefox verändert hat. Klappt man sie nun auch findet sich dort auch ein neuer Eintrag.

Geschmeidig und einfach kann man nun durch einen Klick auf die (links) markierte Zeile klicken, und das Suchplugin zu den beliebsten Scuhmaschienen hinzufügen.2

Es wäre jetzt aber sehr plump von mir einfach nur einen Beitrag zu schreiben, in dem ich sage, was ich habe :) neee ich nutze die Gelegenheit auch gleich um zu beschreiben3 , wie jeder mit ein ganz, gaaanz wenig Ahnung von der Materie hat so ein Blugin erstellen kann. Speziell werde ich auf die Zielgruppe Blogbetreiber4 eingehen, was aber nicht heißt, dass es nicht auch für andere Seitenbetreiber geeignet ist.

Was braucht man?

Nur wenig dinge werden im Vorfeld benötigt:

  • Eine Webseite mit einer Möglichkeit etwas zu suchen.
    Man muss wissen, wie die Seite eine Suchanfrage verarbeitet (Auf welche Seite gelangt man, wenn man die Suchmaske bestätigt, welche Informationen werden auf welche Art und weise mitgeteilt (Wie heißen die Variablen, wie werden sie übertragen (POST oder GET) )
  • Ein Icon in der Größe 16×16 Pixel.
    Ich habe dafür mein FavIcon benutzt (Man muss das Rad ja nicht zwei mal erfinden
  • Einen Texteditor
  • Optional Zugriff auf den Quellcode der Seite speziell auf den Headerbereich

Los geht es mit einer Dummie-XML Datei

Zuerst nimmt man sich eine Beispieldatei3

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>NAME</ShortName>
  <Description>BESCHREIBUNG</Description>
  <InputEncoding>z.B. UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">http://example.com/favicon.ico</Image>
  <Url type="text/html" method="method" template="http://example.com/">
    <Param name="suchVariable" value="{searchTerms}"/>
    ...
    <Param name="paramNameN" value="paramValueN"/>
  </Url>
  <moz:SearchForm>http://example.com</moz:SearchForm>
</OpenSearchDescription>
  • Zeile 2: Dort wird der Name eingetragen, der später in dem Suchfeld zu sehen sein soll (Wenn keine Suche eingetragen ist)
  • Zeile 3: Eine Kurze Beschreibung (worum geht es)
  • Zeile 4: Mit welcher Kodierung soll gesendet werden. Ich empfehle UTF-8
  • Zeile 5: Hier die URL von eurem Icon. Ihr könnt auch das data: URI scheme nutzen. Aber wenn ihr der Anleitung folgt, wird es automatisch umgewandelt.
  • Zeile 6: Dort tragt Ihr sowohl eure gewünschte Methode zur übertragung der Daten (POST oder GET)  als auch die Adresse auf der die anfrage verarbeitet werden soll. Da ist nun das wissen über eure Seite gefragt, wo landet die Suche? Bei WP ist es die Startseite des Blogs und Methode GET.
  • Zeile 7-9: Hier könnt ihr nun die Parameter eintragen, die bei der Suche übergeben werden sollen (Variablen – Namen Paar. {searchTerms} ist dabei der Wert, der in das Suchfeld eingeben wurde. Ihr könnt da so viele Parameter angeben wie ihr wollt. Bei WP lautet dar name der suche einfach nur s (kleines S). Ich lass zur auswertung (reines interesse von mir, wie das Plugin benutzt wird) noch einen weiteren Parameter übergeben, in dem ich auswerten kann, ob die Suche von meinem Plugin kommt.
  • Zeile 11: Beinhaltet eure Webseite. Damit ist sichergestellt, dass ein Benutzer, der ohne Eingabe eines Suchgegriffes direkt auf eure Seite kommt.

Das war es schon (fast). Wenn ihr jetzt noch wollt, dass sich das Plugin selbst updatet5, falls ihr mal etwas ändert (z.B. Die Seite die die suche bearbeitet ist umgezogen) , müsst ihr noch eine Zeile hinzufügen (ich empfehle nach Zeile 10)

<Url type="application/opensearchdescription+xml" rel="self" template="http://example/mysearchplugin.xml" />

Dort tragt ihr bei template einfach die URL zu eurer später hochgeladenen xml Datei ein und das Plugin (soll) macht selber updates.

Die Datei speichert ihr nun als *.xml Datei ab und ladet sie dann per FTP auf eure Webseite hoch.

Jetzt soll eure Seite eure Benutzer darüber informieren, dass ihr solch ein Plugin benutzt

Klar, was nutzt so ein Plugin, wenn es niemand nutzt, weil es unbekannt ist.
In eurem HTML Code (ziwschen <head> und </head> fügt ihr folgenden Code ein:

<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">

Ersetzt searchTitle durch den Namen eurer Suche und pluginURL durch die URL zu eurer XML Datei, die ihr gerade hochgeladen habt.
Nun wird jeder FF Benutzer informiert6, dass es was zu suchen bei euch gibt.

Ich hoffe es konnte euch helfen, und es sprießen jetzt die Suchplugins nur so aus dem Boden. (Würde mich über Feedback freuen)

  1. der noch zu erwarten ist *hust hust*
  2. Man, der Gedanke meine Seite neben Seiten wie Google, Wikipedia, Amazon und Co stehen zu haben ist nen tolles gefühl :)
  3. Original siehe hier
  4. mit WordPress
  5. Erst ab FF Version 3.1 möglich
  6. Das Dropdowfeld in der Suchleiste verändert die Farbe
]]> http://sebastian.thiele.me/blog/ich-nun-auch-mit-ff-searchplugin/721?piwik_campaign=RSS&piwik_kwd=721/feed 0 Bee5 Firefox Searchplugin v1.0 http://sebastian.thiele.me/blog/bee5-firefox-searchplugin-v10/692?piwik_campaign=RSS&piwik_kwd=692 http://sebastian.thiele.me/blog/bee5-firefox-searchplugin-v10/692?piwik_campaign=RSS&piwik_kwd=692#comments Thu, 19 Mar 2009 12:42:30 +0000 Sebastian http://blog.sebastian-thiele.net/?p=692 top_bee51Bee5, das Unternehmen, welches Geld zurück gibt beim Einkauf in über 3.000 Onlineangeboten1, hat eine (wie ich finde) super Geschäftsidee (Erweiterung) im Programm; die sogenannte Developer-Corner. Interessierte Leute können Plugins, Erweiterungen, Programme und vieles mehr bauen und bekommen dafür 2% der generierten Einnahmen, die das jeweilige Programm erzielt2.

Auch ich habe mich rangesetzt und eine klitzekleine, aber sehr nützliche Erweiterung für den Firefox(FF) geschrieben. Eigentlich ist es keine Erweiterung, viel mehr ein Suchplugin3, welches sich nach der wirklich simplen Installation in das Suchmaschienenfeld von Firefox einhängt und einen einfachen Weg bietet, Bee5 Links zu erzeugen. Und so geht es:

01 Auf der Tool-Seite von Bee5 das Tool aktivieren

Du gehst auf die Webseite von Bee5, logst dich ein4 und betrittst die Tool-Seite von Bee5. Auf dieser Seite werden alle Tools vorgestellt, die bereits existieren. Natürlich wollen wir hier das Bee5 Firefox Searchplugin haben und somit klickst du das an. Nachdem du den Download angestoßen hast, kommst du auf eine kleine Seite, die dich einige Einstellungen ändern lässt (zum Beispiel Art des Links und Linklänge). Mit der Bestätigung der Einstellungen, bekommst du eine XML Datei zum Download angeboten.

02 Die Installation

Nach dem Download der XML Datei muss diese nur in das Searchpluginverzeichnis des Firefox gespeichert werden. Davon gibt es zwei. 1. das eigene Verzeichnis;  dieses befindet sich innerhalb deiner eigenen Ordnerstruktur (unter eigene Dateien oder in eurem Homeverzeichnis). 2. das globale Verzeichnis; dieses befindet sich unterhalb des Installationsverzeichnisses des FF und ist für alle Benutzer an diesem Rechner zuständig. Um in diesem Verzeichnis etwas zu ändern, brauchst du Admin- bzw. root-Rechte.5 Im Folgenden will ich die Ordner kurz benennen, in denen das Plugin gespeichert sein muss. Natürlich können diese Pfade von Installation zu Installation abweichen.6:

  • Windows:
    • Lokales Verzeichnis (Nur für einen Benutzer):
      Kopiere die XML-Datei in den Ordner: leider ist mir der Pfad gerade nicht bekannt, da ich kein Windows habe
    • Globales Verzeichnis (Alle Benutzer):
      Kopiere die XML-Datei in den Ordner: $LAUFWERK:\$INSTALLATIONSPFAD\searchplugins
  • Linux (Ubuntu & Debian)
    • Lokales Verzeichnis (Nur für einen Benutzer):
      Kopiere die XML-Datei in den Ordner: ~/.mozilla/firefox/$PROFILORDNER/searchplugins/
    • Globales Verzeichnis (Alle Benutzer) (Du brauchst root/ sudo Rechte):
      Kopiere die XML-Datei in den Ordner: /usr/lib/firefox-$VERSION/searchplugins/

$LAUFWERK = der Buchstabe deines Laufwerkes (normalerweise C)
$BENUTZERNAME = dein Benutzername (z.B. Administrator, Hansi, …)
$INSTALLATIONSPFAD = z.B. c:\windows\mozilla firefox oder /
$PROFILORDNER = irgendwelche Zahlen und Buchstaben PUNKT eurem Profil (Normalerweise default, es sei denn ihr habt mehrere)
$VERSION = die aktuell benutzte Firefoxversion

searchengine_listNach der Installation muss der Firefox neugestartet werden. Danach solltest du in deiner Suchmaschinensuchleiste den Bee5 Eintrag finden. Nun kannst du den Bee5 Eintrag auswählen, so dass er aktiv ist. searchengine_bee5

Ab sofort kannst du (oder auch deine Rechnermitbenutzer) bequem und einfach den Link der umzuwandelnden Seite in das Suchfeld eingeben, ohne erst die bee5 Seite öffnen zu müssen.

Adresse aus der Adressleiste kopieren, in das Suchfeld eingeben und mit Enter umwandeln lassen.

Auf der Seite, auf die du gelangst, wird dir der umgewandelte Link angezeigt, so dass du auch die Möglichkeit hast, ihn an Andere weiter zu geben. Nach einer gewissen Zeit wirst du auf die entsprechende Seite weitergeleitet. Du kannst es natürlich auch verkürzen, indem du auf den Link klickst.

Du wandelst damit eine Adresse in einen bezahlten Bee5 Link in weniger als 4 Klicks um.7

  1. eigene Angaben
  2. Was auch der Grund dafür ist, das ich hier noch einmal Werbung dafür mache
  3. In neudeutsch ein Searchplugin
  4. Wenn du noch nicht angemeldet bist, kannst du das gleich tun und 2,00 Euro Begrüßungsgeld (wie wir Ossis Sagen würden) bekommen.
  5. TIPP: Wenn mehrere Menschen an einem Rechner sitzen, z.B. ein Familienrechner oder ein Bürorechner ODER GAR ein Server, an dem viele Benutzer arbeiten, versucht das Plugin in das globale Verzeichnis zu bekommen, denn so können alle Benutzer für euch Geld verdienen ;)
  6. Leider kann ich nur für Windows und Linux (Debian & Ubuntu) reden, da ich von MacOS (was auch unterstützt wird) und Firefox LEIDER NOCH keine Ahnung habe
  7. Ich gehe davon aus, dass das Plugin ausgewählt ist und du die Tastenkombinationen zum Kopieren ([Strg] + [C]) und zum Einfügen ([Strg] + [V]) nutzt.
]]> http://sebastian.thiele.me/blog/bee5-firefox-searchplugin-v10/692?piwik_campaign=RSS&piwik_kwd=692/feed 3 Mailadresse auf webseiten vor Spam schützen (Grafik) http://sebastian.thiele.me/blog/mailadresse-auf-webseiten-vor-spam-schutzen-grafik/649?piwik_campaign=RSS&piwik_kwd=649 http://sebastian.thiele.me/blog/mailadresse-auf-webseiten-vor-spam-schutzen-grafik/649?piwik_campaign=RSS&piwik_kwd=649#comments Tue, 03 Mar 2009 10:34:28 +0000 Sebastian http://blog.sebastian-thiele.net/?p=649 top_mailgrafikIch arbeite gerade an einem “kleinen” Projekt1. Dabei werden Daten von Firmen öffentlich dargestellt. Um nun den Firmen zumindest von dieser Seite aus keinen Spam zu zuschanzen, habe ich mich dazu entschlossen, die Mailadressen der Firmen nicht im klartext, und auch nicht in einer “Verschlüsselten” Form (@ wird zu (at) usw) anzuzeigen, sondern sie relativ Spamsicher art als Grafik dazustellen. Und wie man das Technisch macht, und was es bringt will ich hier einmal beschreiben.

Warum ist es sinnvoll Mailadressen als Grafiken anzuzeigen?

Die Personen, die (finanzielles) Interesse daran haben Emailadressen aus dem Internet heraus zu holen sind immer dabei Ihre “Dienste” zu verbessern. Eine Emailadresse aller test@test.de2 ist dabei schnell aufgefunden und in ihr System übertragen. Mailadressen haben einen ungeahnten Nachteil, wenn es darum geht sie Automatisiert aufzufinden. Sie haben eine vorgegebene Syntax (Schreibweise). So muss immer ein @ und (mind.) ein Punkt enthalten sein. Somit kann man eine Mailadresse recht einfach mit Regulären Ausdrücken ausfindig machen ([a-z0-9_]|\\-|\\.)+@(([a-z0-9_]|\\-)+\\.)+[a-z]{2,4} . Auch die (mehr oder weniger) erfolgreichen Versuche Mailadressen zu “Codieren” sind auf dauer gesehen eher weniger wirkungslos. Auch die Spamsammler betrachten sich ab und an mal Webseiten und können ihre Suche ohne weiteres auf (at), [at], <at>, (punkt), [punkt], <punkt> und was es da nicht alles gibt einstellen. Der Zeitaufwand, den die Maschienen für duzende von varianten brauchen sind so gering und kosten die Adresshändler kaum etwas3.
Da gibt es ja noch die zahlreichen varianten Mailadressen per JavaScript zu codieren und bei einem klick wieder zu entschlüsseln. Die Spamrobotter können (meines wissens) kein JS. Damit ist es eine Sinnvolle Sache, wenn da nicht die Besucher sind, die JavaScript in ihrem Browser ausgestellt haben. (Die sehen keine Mailadressen)

So genug damit die anderen Methoden schlecht zu machen. Warum nun Grafiken? Meines Wissens ist es sehr schwer und kompliziert Text von Grafiken abzulesen. Besonders dann, wenn der Kontrast (Vordergrund zu Hintergrund) sehr gering ist. (Dazu später mehr). Die Roboter können somit den Text auf den Grafiken nicht auslesen und ihnen bleibt der Inhalt verborgen. Doch Achtung, man macht die gesamte wirkung wieder kaputt, wenn man die Mailadresse beispielsweise als alt-Atribut an das IMG Tag anhängt. (Doch auch dazu gleich mehr). Nach dem gleichen Prinzip funtionieren auch die Image Catcher die man beispielsweise beim anmelden auf einigen Seiten ausfüllen muss.

Welche Nachteile bringt es mit sich?

Alles hat eine Schattenseite, so auch diese Methode. Dadurch, dass die Mailadresse als Bild angezeigt wird, und wir das alt-Atribut des IMG-Tags nicht sinnvoll belegen dürfen schließen wird Besucherkreise vollkommen aus. Gemeint sind die Benutzer, die a) Grafiken in ihrem Browser (zum Traffic sparen) ausgestellt haben b) Benutzer, die mit einem reinen Texteditor unterwegs sind4 und c) (fast am wichtigsten) Benutzer mit einer Beeinträchtigung im Sehvermögen. Benutzer aus der letzen Zielgruppe lassen sich meist Webseiten vorlesen, in Blindenschrift übersetzen oder versuchen diese durch besondere Browsereinstellungen der Webseite zu vergrößern.5 Beim übersetzen/ vorlesen lassen wandeln sich die Vorteile der Grafiken gegen Spammer auf einmal in Nachteile gegen unsere Besucher. Auch die Software, die diese Übersetzungen macht kann den Inhalt dieser Bilder nicht erkennen, und übersetzen/ Vorlesen. Und die Benutzer, die mit einer vergrößerten Schriftart unterwegs sind, können die Grafiken nicht erkennen, da sie sich nicht mit vergrößern lassen. Zudem kann es vorkommen, wenn man die Grafiken auf einem anderen Server speichert/ erzeugen lässt, dass die Grafiken nicht erreichbar sind.

Aufgrund all dieser Nachteile ist der Einsatz dieser Methode im (deutschen) Impressum nicht erlaubt. Aber für ein Impressum empfehle ich eh die Verwendung von Spamgourmet Adressen.

Wie wird es technisch (in PHP) umgesetzt?

Zur Umsetzung dieser Technik habe ich mir das Programm von “mike at mike-griffiths dot co dot uk” von de3.php.net als Vorbild genommen.

Zunächst einmal einmal die Verarbeitung des Bildes in einer PHP Datei (bei mir heißt sie email.php)

<?php
// Den String der Mailadresse erst zurückübersetzen und dann
// als $string speichern
$erse = Array("@", ".");
$such = Array("_++_", "_+_");
$string  = str_replace($such, $erse, $_GET[value]);

// Schriftgröße setzen
$font_size = 2;

// Breite des Bildes berechnen (Abhängig von Schriftgröße
$width  = imagefontwidth($font_size)*strlen($string);
// Höhe so setzen, dass die Schrift auch raufpasst
$height = imagefontheight($font_size);
// Rohgerüst des Bildes erstellen
$img = imagecreate($width,$height);
// Hintergrundfarbe (Anpassen auf eigene BG-Color
$bg    = imagecolorallocate($img, 255, 255, 255);
// Schriftfarbe (selbstwehlbar (siehe Verbesserungen))
$color = imagecolorallocate($img, 240, 145, 71);
// Stringlänge
$len = strlen($string);
// Y-Koordinate des Zeichens, X ändern, Y ist fest
$ypos = 0;
// Durch den String laufen
for($i=0;$i<$len;$i++){
// Position des Zeichens horizontal
$xpos = $i * imagefontwidth($font_size);
// "Zeichne" Zeichen
imagechar($img, $font_size, $xpos, $ypos, $string, $color);
// Entferne Zeichen aus dem String
$string = substr($string, 1);

}
// Headertyp um als Img angezeigt zu werden
header("Content-Type: image/gif");
imagegif($img);
// Und bild wieder löschen (Speicheraufräumen)
imagedestroy($img);
?>

Ich denke es ist alles selbsterklärend. Das einzigste ws zu erklären wäre sind die Zeilen 4-6 aber das wird sicherlich jetzt klar, wenn ich meinen Aufruf dieser “Grafik” zeige:

<?php
/* Umwandeln der Markanten Zeichen in FREI wählbare Zeichen, um bei der Übergabe
 * an die php Datei keinen "Verdacht" zu erzeugen
 */
$such = Array("@", ".");
$erse = Array("_++_", "_+_");
$emailadcode = str_replace($such, $erse, "test@test.de");
// Aufrufen der PHP Datei mit Übergabe der codieren Mailadresse (wie immer)
echo "eMail: <img src=\"/img/email.php?value=$emailadcode\" alt=\"Zum Schutz vor Spam wird diese Mailadresse als Grafik angezeigt. Wir bitten dies zu entschuldigen.\" />";
// Achtet bitte auf das alt-Atribut, um auch Menschen eine Erklärung zu geben, die keine Bilder sehen
?>

Wie kann man das ganze (theoretisch) noch optimieren?

Es ist alles erlaubt, um den Spamrobotern das “Leben” zu erschweren. Denkbar ist dabei:

  • Die Schriftfarbe in einem möglichst geringen Kontrast zur Hintergrundfarbe halten (Achtung Benutzerfreundlichkeit)
  • Die Emailadresse zwei teilen. Entweder horizontal oder Vertikal. Selbst wenn ein Roboter den Inhalt auslesen kann, kann er mit der halben Adresse wenig anfangen. Ich Empfehle die Teilung in horizontaler Ebene.

Ich hoffe euch hat meine Erklärung gefallen. Für Anregungen und verbesserungen bin ich stets dankbar.

  1. Was auch erklärt, warum hier in den letzten Tagen (und warscheinlich auch in den nächsten Tagen) wenig neues los war.
  2. Gibt es die Mailadresse eigentlich? Wenn Ja, wird da sicher nen Haufen Spam drauf ankommen, ich kenne viele, die diese Mailadresse als Beispiel nutzen
  3. Botnetze sei dank
  4. Ja die gibt es immernoch
  5. Thema Barierefreiheit SEHR WIRCHTIG
]]> http://sebastian.thiele.me/blog/mailadresse-auf-webseiten-vor-spam-schutzen-grafik/649?piwik_campaign=RSS&piwik_kwd=649/feed 3 RoR: Session über die Datenbank ohne Fehler http://sebastian.thiele.me/blog/ror-session-uber-die-datenbank-ohne-fehler/547?piwik_campaign=RSS&piwik_kwd=547 http://sebastian.thiele.me/blog/ror-session-uber-die-datenbank-ohne-fehler/547?piwik_campaign=RSS&piwik_kwd=547#comments Thu, 12 Feb 2009 20:01:22 +0000 Sebastian http://blog.sebastian-thiele.net/?p=547 top_ruby_sessionIn meinen unzähligen Stunden, und meiner hohen Erfahrung mit Ruby on Rails1 ist mir dabei ein Fehler aufgefallen2

Aktiviert3 man in der config/enviroment.rb, dass man Sessions in der Datenbank speichern möchte ergibt sich da ein Problem.

Zunächst einmal das Auskommentieren, in der config/envirement.rb:

# Use the database for sessions instead of the cookie-based default,
# which shouldn't be used to store highly confidential information
# (create the session table with "rake db:sessions:create")
  config.action_controller.session_store = :active_record_store

Danach legt man die Datenbank-migration an:

$ rake db:session:create
$ rake db:migrate

Nun noch den Server neu starten und schon bekommt man folgenden Fehler:

No :secret given to the #protect_from_forgery call. Set that or use a session store capable of generating its own keys (Cookie Session Store).

Diesen Fehler kann man aber4 beheben, indem man in der app/controllers/application.rb die folgende Zeile auskommentiert.

# See ActionController::RequestForgeryProtection for details
# Uncomment the :secret if you're not using the cookie session store
# protect_from_forgery # :secret => 'e4c718c85b37ffad4702ac57fd6c58ac'

Server nochmal neu starten und es kann weiter gehen.

  1. Ich lerne es gerade RoR mit hilfe des wirklich genialen Buches: Agile Web Development with Rails. Günstig zu bekommen in der Secound Edition oder ab März 09 in der neusten Auflage
  2. Mal abgesehen das in der neusten Version kein scaffolding verfügbar ist
  3. Kommentiert man aus
  4. Und für diesen Hinweis, danke ich Justin Ball und seinen Blog
]]> http://sebastian.thiele.me/blog/ror-session-uber-die-datenbank-ohne-fehler/547?piwik_campaign=RSS&piwik_kwd=547/feed 1 Ruby on Rails und Subversion http://sebastian.thiele.me/blog/ruby-on-rails-und-subversion/524?piwik_campaign=RSS&piwik_kwd=524 http://sebastian.thiele.me/blog/ruby-on-rails-und-subversion/524?piwik_campaign=RSS&piwik_kwd=524#comments Wed, 11 Feb 2009 14:00:13 +0000 Sebastian http://blog.sebastian-thiele.net/?p=524 top_ruby_svnIch beginne gerade damit Ruby on Rails zu erlernen. Und gerade als Anfänger passiert es sehr schnell, dass man mal einen Fehler macht, den man so ohne weiteres nicht wieder ausbessern kann. In so einem Fall (aber auch in jedem anderen) mit einer Versionierungsmöglichkeit, wie beispielsweise Subversion zu arbeiten. Ich habe Bereits ein paar mal über SVN geschrieben. Subversion bietet sich nicht nur an, wenn man es vermeiden will, Fehler in Programmen wieder ungeschehen zu machen, sondern auch beim arbeiten im Team ist SVN hilfreich. Wie ich so mitbekommen habe gehört die verbindung Rails & SVN zum defakto Standart. Darum will ich hier mal ein paar Sachen beschreiben, um auch Anfängern den Umgang mit diesen beiden Techniken zu erleichtern.

Zunächst einmal sollte natürlich SVN installiert sein. Darauf gehe ich hier nicht weiter darauf ein, denn es gibt ja bereits eine Anleitung von mir.1

Am besten sollte im Vorfeld überlegt werden, wie das Projekt heißen soll. In diesem Fall soll der Name des Projektes demo sein. Für dieses Projekt wird ein SVN-Projekt angelegt:23

$ svnadmin create /Pfad/zu/den/SVN/Projekten/demo
$ ls /Pfad/zu/den/SVN/Projekten/demo

01Anmerkung: Ich habe einmal den Fehler gemacht, mein SVN-Projekt Rails_demo zu nennen, obwohl mein Rails-Projekt4 nur demo hieß. Dies führt im späteren dazu, dass auch das Rails-Projekt Rails_demo heißt. Rails mag es aber scheinbar gar nicht, wenn Projekte nach dem erstellen umgenannt werden.

Nachdem das SVN-Projekt erstellt wurde, muss nun noch das Rails-Projekt erstellt werden:

$ rails demo --database=mysql
create
create  app/controllers
create  app/helpers
create  app/models
create  app/views/layouts
create  config/environments
create  config/initializers
create  db
create  doc
create  lib
create  lib/tasks
...

Das ist ja alles nichts neues. Nun kann aber einiges Eingestellt werden, damit SVN auch optimal genutzt wird.

SVN Einstellen

$ cd demo
$ svn import -m "initial import" . file:///Pfad/zu/den/SVN/Projekten/demo
A   demo/test
A   demo/test/unitL
...
Commited revision 1.

Mit diesem Befehl wird das aktuelle Projekt in das SVN aufgenommen.

Anmerkung: Wichtig ist an dieser Stelle der PUNKT. Er bezieht sich auf den Ort, ab dem Importiert werden soll. der PUNKT ist dabei das aktuelle Verzeichnis.

Jetzt muss das gerade eingecheckte Projekt auch wieder ausgecheckt werden, um veränderungen vorzunehmen. Dazu muss das bestehende Rails-Projekt gelöscht werden. Keine Angst, es wurde je gerade gesichert, wem das aber zu heikel ist, dem wird empfohlen das Projekt nicht zu löschen sondern zu verschieben:

$ cd ..
$ mv demo demo_backup

Nun muss das neue Projekt wieder ausgecheckt werden:

$ svn checkout file:///Pfad/zu/den/SVN/Projekten/demo
...
Checked out revision 1.
$ cd demo

In dem wieder zurückgeholten Projekt müssen nun einige Sachen eingestellt werden. Beispielsweise ist es nicht angebracht (gerade bei Teamarbeit) die Log-Dateien und die config/database.yml-Datei zu versionieren. Jedes Teammitglied hat seine Eigenen Logs und Datenbankeinstellungen. Gerade letzteres in verbindung mit migrations ist ein wansiniger Vorteil von Rails (wie ich finde).

Nun werden wir SVN anweisen die Log-Dateien zu entfernen.

$ svn remove log/*
...
$ svn commit -m "removed log files"
...
Commit revision 2.

Nun muss SVN mitgeteilt werden, dass evtl. neu erzeigte Log-Files weiterhin ignoriert werden sollen.

$ svn propset svn:ignore "*.log" log/
property 'svn:ignore' set on 'log'
$ svn update log/
At revision 2.
$ svn commit -m "svn ignore for new log/*.log files"
...
Commited revision 3.

Ähnlich muss mit der config/database.yml Datei verfahren werden. Erst wird die Datei im SVN umgenannt, anschließend wird sie wieder ignoeriert (denn im Anschluss muss die database.yml-Datei “lokal” wieder hergestellt werden)

$ svn move config/database.yml config/database.original
A   config/database.original
D   config/database.yml
$ svn commit -m "moved config/databas.yml to config/databas.original
...
Commitet revision 4.
$ svn propset svn:ignore "database.yml" config/
property 'svn:ignore' set on 'config'
$ svn update config/
At revision 4.
$ svn commit -m "Ignore database.yml"
...
Committed revision 5.
$ cp config/database.original config/database.yml

Das waren “auch” schon alle Vorbereitungen.

Nun müssen aber auch noch alle durch den (script/gernerate) Generator erstellten Dateien zum SVN hinzugefügt werden.

$ ruby script/generate controller foo --svn

Mit hilfe der Option –svn (oder -c) werden alle Dateien automatisch ins das SVN-Prjekt aufgenommen.

Rails Logo CC von http://railslogo.com/

Quellen:

  • Rails Kochbuch : [rapid Web development mit Rails 1.2] / Rob Orsini. Dt. Übers. von Peter Klicman. – Dt. Ausg., 1. Aufl. : O’Reilly, 2007. – XVI
  • wiki.rubyonrails.org Stand: 11.02.2009, Rev. 299
  1. Subversion unter Debian installieren
  2. Beispielhaft wird hier auf einem Linux-System gearbeitet. Die Alternativen Befehle für Windows sind u.a. ls = dir
  3. Alle Zeilen mit $ beginnend sind eingaben in die Komandozeile. Alle Zeilen ohne, sind ausgaben auf der Komandozeile
  4. Ich bitte vielmals um Entschuldigung, sollte mir im laufe der Zeit auch mal “Ruby-Projekt” rausrutschen
]]> http://sebastian.thiele.me/blog/ruby-on-rails-und-subversion/524?piwik_campaign=RSS&piwik_kwd=524/feed 0