2.Apr 2007
Worldmapper

Das Projekt Worldmapper.org stellt statistische Erhebungen durch eine Skalierung der Territorien auf der Weltkarte dar. Hohe Werte vergrössern, niedrige Werte verkleinern dabei den Staat in seinen existierenden Grenzen.

Worldmapper.org

Karten gibt es zu einer Reihe interessanter Aspekte, wie z.B. Umwelt, Millitär, Gesundheit, Bodenschätze etc. und zum Download in verschiedenen Formaten.


28.Mrz 2007
Evolovotron Galerie

Eine kleine Auswahl der Bilder, die ich mit dem Programm Evolvotron generiert habe. Weitere Bilder…


21.Mrz 2007
Weichzeichnen von Bildern

  • Mario
  • Wario
  • Kirby

Dieses Beispiel demonstriert eine Möglichkeit, einer Grafik stufenlose Unschärfe zu verleihen. Der Trick dabei ist es, über das scharfe Bild ein unscharfes zu positionieren. Die weichgezeichnete Version wird über den Transparenz-Stil sanft an bzw. ausgefadet.


1.Mrz 2007
Mastermind mit MooTools

Zum Studieren der Drag-n-Drop Funktionen der mootools ein kleines Mastermind-Spiel:




Eine kurze Anleitung: der Spieler muss einen Farbcode erraten. Dazu probiert er die Kombinationen durch. Jede Zeile wird vom Computer bewertet, wobei er schwarze und weisse Markierungen setzt. Eine schwarze bedeutet, daß eine Farbe an der richtigen Stelle sitzt — Weiß bedeutet, daß eine Farbe zwar im Code ist, sich aber an der falschen Stelle befindet.


25.Feb 2007
JavaScript Memory

Ein etwas älteres Memory-Spiel in JavaScript.

loading...


20.Feb 2007
Schräge Menus mit CSS

Schräge Menüs lassen sich einfach mit Imagemaps implementieren. Will man sie aber CSS-konform und als Listenstruktur, kann man einen kleinen Trick anwenden. Dabei werden die diagonal verlaufenden Menüpunkt aus vielen kleinen spans zusammengesetzt. Diese werden dann in der jeweiligen Position angeordnet.

Zur Verdeutlichung sind die span-Felder bei einem Eintrag rot umrahmt. Die Grafik für jeden Menüpunkt sind einmal erstellt und dann nur in der Position angepasst. Der Aufbau ist folgendermaßen:

//Stylesheet-Beispiel fuer ein 40x40-Feld
#menu #menupunkt span {
  position: absolute;
  width: 40px;
  height: 40px;
  display: block;
  background-repeat: no-repeat;
  background-image: url('menupunkt1.gif');
}

#menu .position1 {
  left: 0px;
  top: 60px;
  background-position: 0px -60px; 
}

// HTML
<ul id="menu">
  <li id="menupunkt">
    <a href="xyz">
      <span class="verstecktertitel">Menupunkt</span>
      <span class="position1"></span>
      <span class="position2"></span>
      ...
    </a>
  </li>
  ...
</ul>

Idealerweise fügt man den einzelnen Listenpunkten noch ein unsichtbares span an, welches den Titel enthält (siehe Beispiel).


11.Feb 2007
Festplatten-Image mit dd erstellen

Ein Festplatten Image läßt sich ganz einfach mit Linux-Boardmitteln erstellen.
Das Programm dd (Dump Device), welches zum Standard-Repertoire eines Unix gehört, speichert Daten blockweise.

dd if=/dev/quellgerät of=/name/der/imagedatei bs=64k

Da diese Datei genauso groß wird wie das Quellgerät, lohnt es sich, diese mit gzip zu packen.

dd if=/dev/quellgerät bs=64k 
    | gzip -f >/name/der/imagedatei.gz

Möchte man das Image auf einer Fat32-Partition (mit einer maximalen Dateigröße von 2GB) oder auf CDs/DVDs speichern,
muss es in passende Dateien aufgeteilt werden. Mit dem Kommando split ist das kein Problem.

# fuer fat32:
dd if=/dev/quellgerät bs=64k 
    | gzip -c 
    | split -b 2g - /name/der/imagedatei.gz

#für CDs:
dd if=/dev/quellgerät bs=64k 
    | gzip -c 
    | split -b 700m - /name/der/imagedatei.gz

Um das Image – gesplittet oder als ganze – zu entpacken und zurück zu schreiben genügt ein

cat /name/der/imagedatei.gz* 
    | gzip -d 
    | dd of=/dev/zielgerät bs=64k

7.Feb 2007
window.onload mit mehreren Funktionen

Um eine initialisierende Javascript-Funktion direkt nach dem Laden einer Webseite auszuführen, nutzt man das onload-Ereignis der Fensters. Sollen mehrere Funktionen aufgerufen werden, gilt es aufzupassen. Ein window.onload = f überschreibt unweigerlich jeden vorher eingebundenen Eintrag. Die nachfolgende Technik ermöglicht ein einfaches und sicheres konkatenieren der Aufrufe.

addWindowOnload = function( f ) {
  var current = window.onload; 

  if( typeof window.onload != 'function' )
    window.onload = f;
  else window.onload = function() { current(); f() };
}

// Bsp:
a1 = function() { alert("Onload #1"); };
addWindowOnload( a1 );
addWindowOnload( function() { alert("Onload #2"); } );