Lars Schweisthal - professional web development

Suchmaschinen-Robots – beispielsweise Googlebot – komplett aussperren

Lars Schweisthal — Wed, 18 Jan 2012 10:13:52 +0000

Möchte man sichergehen, dass eine Seite nicht durch Suchmaschinen-Spider indiziert wird, gibt es zwei relativ zuverlässige Methoden.

Das ist beispielsweise notwendig, wenn die Seite “aus Versehen” im Index der Suchmaschine gelandet ist. Vielleicht handelt es sich “Preview-Seite”, die zunächst nur für den potenziellen Kunden bestimmt ist und daher nicht über Google oder andere Suchmaschinen auffindbar sein soll.

Die beste Methode wäre natürlich, die Seite mit einem Passwort zu schützen. Manchmal möchte das der Kunde aber einfach nicht (oder man selbst).

Um zu verhinden, dass die Seite in den Index aufgenommen wird, sollte man zunächst in das Document-Root-Verzeichnis (also das “Mutter”-Verzeichnis) eine Datei mit dem Namen robots.txt legen.

Die meisten Spider suchen automatisch nach dieser Datei, in der angegeben wird, welche Verzeichnise der Spider durchsuchen darf und welche nicht.

Der Inhalt der Dtai sollte wie folgt sein (sofern man die Spider aus allen Verzeichnissen, also komplett, aussperren möchte:

User-agent: *
Disallow: /

Weitere Informationen zur robots.txt findet man unter anderem bei Wikipedia.

Da sich jedoch nicht alle Spider an die robots.txt halten, sollte man zusätzlich noch eine Rewrite Condition hinzufügen.

Diese kann man entweder in die VHost-Datei des Servers schreiben oder aber in die .htaccess, welche wiederum im Document-Root liegt (oder dort hingelegt werden kann).

Die Condition die dem Spider sagt, dass es die Seite nicht oder nicht mehr gibt, lautet wie folgt:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} AltaVista [OR]
RewriteCond %{HTTP_USER_AGENT} Googlebot [OR]
RewriteCond %{HTTP_USER_AGENT} msnbot [OR]
RewriteCond %{HTTP_USER_AGENT} Slurp
RewriteRule .* - [G]

Hierzu gibt es ebenfalls weitere Informationen bei Wikipedia.

Eigene Tweets via Twitter API auslesen

Lars Schweisthal — Sat, 14 Aug 2010 15:32:06 +0000

Heute habe ich mich mal daran gesetzt, meine letzten Tweets via Twitter-API auszulesen. Eine Dokumentation dazu findet man unter http://dev.twitter.com/doc/get/statuses/user_timeline.

Ich habe fix eine Klasse zusammengeschraubt, die das Request absetzt und eine bestimmte Anzahl von Tweets zurückgibt:

class Twitter
{
  public static function getTweets($user, $limit = 20, $with_responses = false)
  {
    $return = array();
    $page = 1;
    $request_url = "http://api.twitter.com/1/statuses/user_timeline.xml?screen_name={$user}&count=1&page=";
    while (count($return) < $limit)
    {
      $xml_object = simplexml_load_file($request_url . $page++);
 
      if ($xml_object !== false)
      {
        if (!$with_responses && (string)$xml_object->status->in_reply_to_status_id != "") continue;
        $return[] = array(
          "time" => strtotime((string)$xml_object->status->created_at),
          "text" => self::linkify((string)$xml_object->status->text)
        );
      }
      else
      {
        return $return;
      }
    }
    return $return;
  }
 
  private static function linkify($tweet)
  {
    $tweet = preg_replace(
      array(
        "/http(.*)(.$|. | |$)/Uis",
        "/#(.*)(.| |$)/Uis",
        "/@(.*)(.| |$)/Uis"
      ),
      array(
        "1">http$1$2",
        "://twitter.com/#search?q=%23$1">#$1$2",
        "://twitter.com/$1">@$1$2"
      ),
      $tweet
    );
    return $tweet;
  }
}

Auf meiner Seite habe ich eine Liste twitterlist, die ich nun mit den Tweets befüllen kann

<ul id="twitterlist">
  <li>Tweet No. 1</li>
  ...
</ul>

Da der ganze Request je nach Twitter-Auslastung mitunter recht lange dauert, habe ich mich entschlossen die Tweets via Ajax zu aktualisieren, um die Ladezeit meiner Seite nicht unnötig zu verlängern. Ich verwende dazu einen MooTools-Request mit der zusätzlichen mootimeout-Klasse, mit der man dem Request einen Timeout-Callback verpassen kann:

  new Request({
    method: "get",
    onSuccess: function(response)
    {
      $("twitterlist").set("html", response);
    },
    onTimeout: function()
    {
      $("twitterlist").set("html", ":red">Error:  Timeout");
    },
    timeout: 10000,
    url: "/ajax/get_tweets.php"
  }).send();

Der Request sollte natürlich im domready-Event stattfinden.

Der Inhalt der get_tweets.php ist recht überschaubar:


include_once "Twitter.class.php";
$return = "";
$tweets = Twitter::getTweets("pw81", 10);
if (count($tweets) > 0)
{
  foreach ($tweets as $tweet)
  {
    $return .= "";
    $return .= $tweet["text"] . " ";
    $return .= "" . date("Y-m-d", $tweet["time"]) . "">";
    $return .= date("d.m.Y, H:i", $tweet["time"]);
    $return .= " Uhr";
    $return .= "
  ";
  }
}
else
{
  $return = ":red">Error:  Cannot retrieve tweets.
";
}
echo $return;
?>

Da die Anzahl der Request von Twitter auf 150 Stück begrenzt ist, habe ich noch einen kleinen Fallback eingebaut, der eine Fehlermeldung zurückgibt, falls die Anzahl der möglichen Requests überschritten wurde.

Ich habe noch ein wenig die Liste angepasst, indem ich mir über http://ajaxload.info/ eine kleine Ladegrafik erstellt habe, die angezeigt wird bis der Request abgeschlossen ist:

<ul id="twitterlist">
  <li>
    Loading Tweets...<br />
    <br />
    <img src="/img/layout/loading.gif" alt="Loading" />
  </li>
</ul>

Das war”s auch schon. Ich hoffe ich konnte damit einigen weiterhelfen ;-).

Tickertext mit jQuery

Lars Schweisthal — Wed, 14 Oct 2009 09:54:37 +0000

Anbei eine relativ einfache und pragmatische Art, einen dynamischen Tickertext in eine Seite zu integrieren.

Allerdings ist das bestimmt nicht der Weisheit letzter Schluss, da es doch etwas sehr unsauber ist und das unkonforme “marquee”-Element benutzt. Für Verbesserungsvorschläge oder Alternativen wäre ich sehr dankbar.

CSS:

#tickertext {
  bottom: 0px;
  display: block;
  float: left;
  height: 20px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  width: 590px;
}

HTML:

1	<div id="tickertext">Ich bin ein Tickertext</div>

Javascript:

$(document).ready(
function()
{
  var ticker_text = $('#tickertext').html();
  if (ticker_text != '')
  {
    var inhalt = $('#tickertext').parent().html();
    $('#tickertext').css('display', 'none');
    var marquee = $('' + ticker_text + '<' + '/marquee>');
    $('#tickertext').parent().append(marquee);
  }
});

Hier geht’s zur Demo!

XHTML-Grundgerüst

Lars Schweisthal — Wed, 23 Sep 2009 11:35:33 +0000

Inspiriert von dem wirklich hervorragenden Blog-Beitrag The Incredible Em & Elastic Layouts with CSS von Ty Gossman (und weil ich grade eine neue Internet-Seite anfange) habe ich mich mal daran gesetzt, ein XHTML-Grundgerüst zu erstellen.

Die Seite soll möglichst flexibel sein, einige grundsätzliche Regeln beinhalten (z.B. erhalten alle Elemente ein Margin- und Padding-Reset) und leicht anzupassen sein.

Hier also nun das Resultat, was gerne jeder verwenden/ändern darf:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
  <title>Seitentitel</title>
 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Lars Schweisthal" />
 
  <style type="text/css">
 
    /* very basic CSS reset */
    * {
      padding: 0;
      margin: 0;
    }
 
    html {
      width: 100%;
      background: white;
      color: black;
      overflow-y: scroll; /* prevent Firefox scrollbar jump when resizing window/content */
      font-size: 100%; /* Fix for IE; Most Browsers have 16px as standard font-size */
    }
 
    body {
      background: white;
      margin: 3.125em auto; /* center the body, top-/bottom-margin of 50px */
      width: 56.25em; /* Base-width 900px */
    }
 
    ul {
      list-style-type: none;
    }
 
    a {
      color: black;
      text-decoration: underline;
    }
 
    a:hover {
      color: red;
      text-decoration: none;
    }
 
    h1 {
      clear: both;
      font-size: 1.875em; /* 30px base */
      font-weight: bold;
    }
 
    h2 {
      clear: both;
      font-size: 1.5em; /* 24px base */
      font-weight: bold;
    }
 
    p {
      font-size: 0.875em; /* 14px base */
      margin: 0 0 0.5em 0;
    }
 
    ul#navigation {}
 
    ul#navigation li {
      display: block;
      float: left;
      margin: 0 1em 0 0;
    }
 
    ul#navigation li:last-child {
      margin: 0;
    }
 
    ul#navigation li a {
      text-decoration: none;
    }
 
    ul#navigation li a:hover,
    ul#navigation li a.active {
      color: blue;
    }
 
    ul#navigation li a:hover {
      text-decoration: underline;
    }
 
  </style>
 
</head>
 
<body>
 
  <ul id="navigation">
    <li><a href="#" title="Seite 1" class="active">Seite 1</a></li>
    <li><a href="#" title="Seite 2">Seite 2</a></li>
    <li><a href="#" title="Seite 3">Seite 3</a></li>
    <li><a href="#" title="Seite 4">Seite 4</a></li>
  </ul>
 
  <h1>Seitentitel</h1>
 
  <h2>Untertitel</h2>
 
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Get to
    <a href="http://google.de">Externer Link</a>.
  </p>
  <p>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
    consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. <a href="#">Interner Link</a> …
  </p>
  <p>
    In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
    dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
    leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
    lorem ante, dapibus in, viverra quis, feugiat a.
  </p>
 
  <script type="text/javascript">
  /* [CDATA[ */
  //
  /* ]]> */
  </script>
 
</body>
</html>

Hier gibt’s das ganze dann noch als eigenständige Seite.

Relaunch hammer-heimtex.de

Lars Schweisthal — Tue, 22 Sep 2009 13:21:34 +0000

Und wieder startet eine komplett überarbeitete Seite: hammer-heimtex.de

Auch bei dieser Seite habe ich/haben wir viele aktuelle Technologien eingesetzt. Die ganze Seite kann über unser “State-of-the-Art”-CMS administriert werden und bietet kleine Gimmicks, wie z.B. eine standortabhängige Prospektpräsentation.
Eine besondere Herausforderung bei dieser Seite war, ein durch eine externe Firma erstelltes Screendesign wie angeliefert umzusetzen, was uns aber insgesamt eigentlich recht gut gelungen ist.
Zur Seite hammer-heimtext.de

Edit: Auf der Internetseite unserer Agentur gibt es dazu auch noch einen kleinen Beitrag: www.medienpark.net

Elemente am unteren Rand ausrichten

Lars Schweisthal — Mon, 14 Sep 2009 12:03:55 +0000

Das braucht man ja immer mal wieder: Elemente sollen am unteren Rand des umgebenden Elements ausgerichtet werden.

Ist gar nicht so schwer. Dabei muss nur beachtet werden, das das umgebende Eltern-Element das Attribut position: relative und das Kind-Element position: absolute bekommt. Dann kann man das Kind-Element mit den Attributen bottom, right/left wie gewünscht positionieren.

Beispiel:

<style type="text/css">
    #aussen {
      width: 500px;
      height: 500px;
      background: #f00;
      margin: 100px auto;
      position: relative;
    }
 
    #innen {
      width: 100px;
      height: 100px;
      background: #0f0;
      position: absolute;
      bottom: 0px;
      right: 10px;
    }
</style>
...
<div id="aussen">
  <div id="innen">
    Aloha!
  </div>
</div>

Hier geht’s zur Demo

Relaunch moebel-berning.de

Lars Schweisthal — Fri, 11 Sep 2009 09:36:43 +0000

Heute ist die durch uns neu erstellte Internetseite der Firma Möbel Berning an den Start gegangen.

Die Seite besitzt nun ein weit moderneres Design als vorher und wurde technisch komplett überarbeitet. Unter Verwendung verschiedener Frameworks und Module bietet die Seite jetzt unter anderem eine ausführliche Produktpräsentation mit Wohnbüchern und Prospekten, einen Kunden-Loginbereich und eine Darstellung der verschiedenen Standorte mit Fotos und dynamischen Anfahrtsskizzen.
Insgesamt ein sehr gelungener Relaunch wie ich finde, aber seht selbst: Zur Seite www.moebel-berning.de

IT-Professional, Pt. II

Lars Schweisthal — Sat, 20 Jun 2009 20:48:45 +0000

So, das wär’s – Ich bin durch. Nachdem ich am Dienstag meine endgültige Projektpräsentation mit anschließendem Fachgespräch hatte, trudelten gestern meine offiziellen Noten per Post ein.

Was soll ich groß drum ‘rumreden: Ich bin einfach der Größte. Meine Gesamtnote von 90% setzt sich wie folgt zusammen:

86% in der schriftlichen Prüfung,
92% in der betrieblichen Projektarbeit und
93% im Fachgespräch.

Dafür habe ich mich dann auch erstmal mit einem neuen MacBook Pro belohnt ;) Als nächstes bekommt dann dieses hässliche Blog hier mal ein neues Aussehen. Wird ja auch Zeit, vor allem wenn ich das Teil hier mal als Referenzen-Dump nutzen möchte.

In den nächsten Tagen gibt’s dann mal wieder was neues.

Bis dahin!

IT-Professional, Pt. I

Lars Schweisthal — Wed, 03 Jun 2009 18:57:44 +0000

Im Büro trudelten heute die Ergebnisse meiner schriftlichen Abschlussprüfung ins Haus (Für diejenigen die’s nicht wissen: Ich befinde mich in den letzten Zügen meiner Ausbildung zum Fachinformatiker Anwendungsentwicklung in der Firma medienPARK).

Ich muss sagen, ich bin durchaus positiv überrascht: Mit solch einer guten Leistung habe ich wirklich nicht gerechnet.

Mit einer durchschnittlichen Gesamtnote von 87% habe ich meine Erwartungen übertroffen und muss zugeben, dass ich schon ein wenig stolz auf mich bin. Ich habe natürlich nicht eine Sekunde auch nur die Spur eines Selbstzweifels verspürt, mir ist damit allerdings schon ein wenig Last von den Schultern genommen worden.

Bleibt jetzt nur noch zu hoffen, dass ich auch den mündlichen Teil mit Bravour abschließen werde und die Prüfer meinem durchaus gelungenen Projekt zu einer angemessenen Wertung verhelfen.

Daumen drücken ist also angesagt, ich halte euch auf dem Laufenden!