30 Apr

Flexible Glossy-Buttons mit Inkscape und CSS

Vor einiger Zeit habe ich auf der Webseite von Firefox einen Bildknopf gesehen, der nicht nur gut aussah, sondern sich in der Größe anpasst und ohne Javascript auskommt. Mit meinem Lieblingstool inkscape will ich zeigen, wie es geht.

\"*\"Das Prinzip

Das Prinzip ist so einfach, wie genial und schon seit Langem bekannt. Ein CSS-Element wird mit einer Hintergrundgrafik versehen. Ein link "a" (anchor) kennt verschiedene Zustände je nach dem ob der Mauszeiger über dem Link ist (hover) oder angeklickt wurde (active).

Das Ganze sieht danach so aus: button.html

Zuerst einmal wird ein Bereich mit einem Hintergrund versehen. Dieser Hintergrund wird oben links platziert. Danach wird ein Bereich als Element von button definiert und das Hintergrundbild unten links platziert. Durch die Verschachtelung schieben sich die beiden Hintergrundbilder übereinander. Das Element hat zwar eine feste Breite, aber es passt sich der Höhe des Textes bis zu einem gewissen Grad an.

/* fancy button */
button,
p.button {
width: 232px;
margin: 0;
}

span.button-text {
padding-left: 20px;
}

.button a span.blue-button {
background: url(blue-button.png) no-repeat bottom left;
display: block;
min-height: 20px;
padding: 10px;
}

.button a {
background: #5c72d2 url(blue-button.png) no-repeat top left;
display: block;
color: #dadada;
text-decoration: none;
}

.button a:hover span.blue-button,
.button a:active span.blue-button {
background: url(blue-button.png) no-repeat bottom right;
}

.button a:hover,
.button a:active {
background: #233dae url(blue-button.png) no-repeat top right;
color: #ffffff;
cursor: pointer;
}
….
<p class=\“button\“>
<a href=\“#\“>
<span class=\“blue-button\“><span class=\“button-text\“>Impress me</span></span>
</a>
</p>

Mit dieser Technik lassen sich nicht nur Knöpfe, sondern auch Kästen mit abgerundeten Ecken, Verläufen oder Schattenwurf erstellen. Die Grafik muss entsprechend länger sein oder man arbeitet mit 2 unterschiedlichen Hintergrundgrafiken. Jeweils eine für Oben und Unten.

\"*\"Tutorial: In 4 Schritten zum eigenen Button

Dies ist das erste Tutorial zum Thema Webseitengestaltung mit Inkscape. Insgesamt sind 4-5 geplant, die ich Beizeiten reinstellen werde. Ich empfehle euch außerdem den Text 3D- und Beveleffekte mit Inkscape als Grundlage.

Schritt 1: Wir zeichnen ein längliches Rechteck

\"*\"Zuerst einmal brauchen wir Inkscape. Das Vektorgrafik-Programm gibt es kostenlos für fast alle Betriebssysteme.

Nach dem Start sollten wir unter "Datei » Dokumenteneigenschaften" das Zeichengitter einblenden und das Einrasten auf den Gitterpunkten einschalten. Nun klicken wir auf das Rechteck-Tool und ziehen eine längliche Box auf. Wenn wir nun "Shift+Strg-F" drücken, dann erscheint ein Dialogfenster zum Einstellen der Füllung und Kontur der Box. Wir sollten die gewünschte Grundfarbe wählen, die Deckung auf 100% setzen und einen kleinen schwarzen oder grauen Rahmen hinzufügen.

Wenn wir abgerundete Ecken wollen, dann klicken wir einfach auf den rechten, oberen Eckpunkt des Rechtecks und ziehen ihn etwas nach unten.

Schritt 2: Eine verkleinerte Kopie mit Farbverlauf erstellen

\"*\"Nun folgt ein etwas kniffliger Teil. Ihr solltet euch dafür ein wenig mit Farbverläufen in Inkscape auskennen.

Wir klicken auf unser Rechteck und erzeugen mit "Strg+D" eine Kopie. Diese verkleinern wir ein wenig, indem wir ein- bis zweimal "Strg-(" drücken. Danach rufen wir mit "Shift-Strg+F" den Fülldialog auf und setzen die Füllung auf Weiß und die Gesamtdeckkraft auf 0,5. Den Rahmen um das Rechteck löschen wir.

Zurück zu unserem hellen Rechteck. Mit "Strg+F1" rufen wir das Verlaufstool auf und ziehen einen kleinen Verlauf von der Oberkante unseres Rechtecks ein wenig nach unten. Wer es plastisch mag, der kann jetzt noch den Verlauf verändern, indem er auf Verlauf » Bearbeiten klickt und den Verlauf so verändert, dass die 2. Farbe volle Deckkraft hat und ein wenig heller ist, als die Grundfarbe des unteren Rechtecks.

Schritt 3: Grafik kopieren und Verlauf anpassen\"*\"

Wir markieren unsere Grafik "Strg+A" und verdoppeln sie "Strg-+D". Diese Kopie setzen wir rechts, bündig an unsere erste Box. Nun klicken wir einmal auf die rechte Box um das Rechteck mit dem Verlauf auszuwählen. Danach mit "Shift-Strg+F" den Fülldialog aufrufen und die Gesamtdeckkraft über den Schieber auf ca. 0,22 stellen. Gegebenenfalls kann auch der Verlauf noch ein wenig gestaucht werden.

Schritt 4: Grafik exportieren und anpassen

Inkscape bietet an, Grafiken im PNG-Rastergrafik Format abzuspeichern. Wir gehen auf "Datei»Exportieren" und wählen die Breite doppelt so groß wie gewünschte Breite der Buttons (z.B. 460 bei 230px Größe).

Nun muss diese Grafik noch angepasst werden. Es ist auch möglich, diesen Schritt in Inkscape zu machen, aber nicht so unkompliziert wie in Gimp oder Photoshop.

\"*\"Vorgehensweise: Zuerst fügt man ein Ebene zu und füllt diese mit der von der Webseite verwendeten Hintergrundgrafik (z.B. Weiß). Danach verschiebt man die Ebene in den Hintergrund und verbindet beide Ebenen miteinander. Jetzt schneidet man einen Bereich von der Mitte der Grafik bis oberhalb der unteren Ecken der Boxen (transparent) aus.

Damit das Tutorial nachvollzogen werden kann, hier noch einmal die SVG-Datei für Inkscape:

Popup-Menüs ohne Javascript

Was mit CSS möglich ist, zeigt auch die Seite der Financial Times Deutschland. Dort werden Popup-Menüs nur über Stylesheets realisiert.

19 Apr

Kleines Breakout-Spiel mit Irrlicht 3D

Ich habe letztes Jahr ein Spiel im Rahmen der open Source Konferenz – Wizzard of OS 04 programmiert. Schüler sollten das Spiel selbst modifizieren, um die Vorteile offener Spieleplattformen zu verdeutlichen. Grund genug, es hier vorzustellen.

\"*\"

Irrlicht 3D ist eine open Source 3D Library in C++. Irrlicht kann sowohl Software, als auch DirectX und OpenGL rendern. Dadurch sind Spiele prinzipiell auch unter Linux und Mac OS lauffähig.

Das Spiel

\"*\" Mit ein wenig Programmierkenntnis, wird man überrascht sein, wie einfach die Entwicklung von kleinen 3D-Spielereien ist. Dabei hilft Irrlicht3D, da es sehr gut strukturiert und dokumentiert ist. Sogar ein Editor zum gestalten der 3D Szenen ist dabei.

Schon wenige Zeilen Code zaubern ein bewegtes 3D Model auf den Bildschirm.

using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;
#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif
int main()
{
IrrlichtDevice *device = createDevice( video::EDT_SOFTWARE, dimension2d(640, 480), 16, false, false, false, 0);

device->setWindowCaption(L"Hello World! – Irrlicht Engine Demo");

VideoDriver* driver = device->getVideoDriver();
SceneManager* smgr = device->getSceneManager();
GUIEnvironment* guienv = device->getGUIEnvironment();

Guienv->addStaticText(L"Hello World! This is the Irrlicht Software renderer!",
rect(10,10,260,22), true);

IAnimatedMesh* mesh = smgr->getMesh("../../media/sydney.md2");
IAnimatedMeshSceneNode* node = smgr->addAnimatedMeshSceneNode( mesh );

if (node)
{
   node->setMaterialFlag(EMF_LIGHTING, false);
   node->setMD2Animation ( scene::EMAT_STAND );
   node->setMaterialTexture( 0, driver->getTexture("../../media/sydney.bmp") );
}

smgr->addCameraSceneNode(0, vector3df(0,30,-40), vector3df(0,5,0));

while(device->run())
{
   driver->beginScene(true, true, SColor(255,100,101,140));
   smgr->drawAll();
   guienv->drawAll();
   driver->endScene();
}

device->drop();
   return 0;
}

Vom Spiel selbst darf man sich natürlich nicht zuviel erwarten. Damit das Programm auch unter Linux ohne Änderungen läuft, habe ich auf andere Libraries verzichtet. Allerdings kann man eigene Level entwerfen. Eigene Klassen oder Headerdateien habe ich auch nicht benutzt, da der Code eh sehr kompakt sein sollte. Das Ganze Spiel passt auf 3 DIN A4 Seiten.

Source: main.cpp

Download

Das komplette Spiel inklusive der Source, Mediadateien und einer Win32 EXE könnt ihr hier runterladen: arkanoid.zip (2.7 MB)

Wer das Spiel verändern und selber compilieren will, der benötigt die Irrlicht Library. Das ca. 13 MB große Paket kommt mit vielen Beispielen. Über die .NET Schnittstelle lässt sich Irrlicht auch in Visual Basic oder Delphi programmieren.

\"*\"Als IDE empfehle ich Anfängern Code::Blocks. Auch Codeblocks gibt es für Linux und Windows. Die Entwicklungsumgebung ist gut auf Irrlicht abzustimmen.

Alternativ gibt es noch Ogre3D. Auch Ogre ist nur eine 3D C++ Lib, die allerdings mittlerweile zig Plugins kennt und auch für professionelle Spiele, wie Ankh eingesetzt wird.

05 Apr

Der Creative ZEN VISION:M unter Linux

Normalerweise überlasse ich Produktwerbung der Presse. Diesmal mache ich eine Ausnahme. Vor etwa 2 Monaten habe ich nach einem neuen MP3–Player gesucht. Mein Handy hatte einen fürchterlichen Klang und ein I-POD schied wegen der Copyrightbeschränkungen und dem proprietären Format aus. Außerdem suchte ich nach einem Gerät, mit dem ich auch kleine Videos schauen konnte.
Nicht nur aus Preisgründen fiel die Wahl auf den Creative ZEN VISION:M, den man mittlerweile schon für unter 190,- € bekommt. Dieser Player hat ein scharfes und ausreichend großes Farbdisplay und unterstützt auch MP3, OGG, MP4 und DIVX-Formate. Der VISION:M bietet außerdem noch die Möglichkeit bis zu 16 GB als USB Wechsellaufwerk freizugeben.

Hier die technischen Details:

  • Maße (B x T x H) – 10,2 x 6,2 x 1,8 cm
  • Gewicht – 165 g
  • Speicherkapazität – 30 GB Festplatte
  • 2,5" Farbdisplay, 320 x 240 Pixel , 262.000 Farben
  • Laufzeit im Audiomodus – 14 Stunden
  • Eingebautes FM-Radio

Die erste Ernüchterung war der Sound mit den mitgelieferten Ohrstöpseln. Der Zen klang zu leise und ohne Dynamik. Ich hab mir daher einen halboffenen Kopfhörer K412P von AKG für 29,- € besorgt. Der K412P ist ein guter Kompromiss zwischen Größe und Preis, der Sounds mit knackigen Bässe und sauberen Höhen wiedergibt.

Die zweite Ernüchterung war das Übertragungsformat. Der VISION:M benutzt das "Media Transfer Protocol" (MTP) von Microsoft und Canon, dass nur unter Windows vernünftig läuft und vor allem durch die Installationssoftware an den schrottigen Mediaplayer10 von MS gekoppelt wird. Das lässt sich durch die Installation des, durchaus praktischen, Media Explorers von Creative zwar umgehen. Treiber für Linux findet man jedoch nicht auf der CD.

Der Creative ZEN VISION:M unter Linux

Googelt man ein wenig, findet man den Hinweis, dass Gnomad2 das Gerät unterstützt. Leider sucht der aber nach virtuellen Jukeboxen, die es wohl nur auf älteren Playern gab. Allerdings gibt es eine Library namens libmtp, die viele aktuelle MTP-Geräte unterstützt. Als Media Manager empfiehlt sich Amarok. Amarok bietet einen Komfort, mit dem sich auch umfangreiche Musiksammlungen gut verwalten lassen. Amarok hat sogar eine Direktverbindung zu einem online-Musikshop und Verwaltungsfunktionen für Internet-Radiostationen.

Hinweis: Debian und Ubuntu 6.10 installierten im März 2007 noch ein unvollständiges Amarok, dass umständlich gepatcht werden musste, um mit MTP-Geräten umgehen zu können. Mittlerweile ist der Fehler hoffentlich behoben. Ubuntu 7.Beta-4 liefert zumindest ein funktionierendes Amarok.

Fotos lassen sich unter Gnome übrigens über F-Spot auslesen. Mangels eingebauter Kamera macht das wenig Sinn. Wenn mir Jemand verraten könnte, wie ich unter Linux Filme auf den VISION:M bekomme, dann wäre ich ihm dankbar.

Ein Tipp zum Schluss

Ich mag Ambient, Acid Jazz und House in allen Variationen. Öffentlich-rechtliches und privates Radio höre ich schon lange nicht mehr. Nicht nur, dass mich das Gelaber der immer gut gelaunten Moderatoren nervt. Obwohl ich dafür fast 20,- € pro Monat bezahle, muss ich mir auf Radio-Fritz jede ¼ Stunde einen Werbeblock anhören. Ich höre daher nur noch Digitally Imported (www.di.fm) oder „Sky FM“ über Internet.


*

Damit auch beim Radfahrern gute Musik habe, benutze ich unter Linux Streamtuner in Kombination mit Streamripper. Nachdem man die Pakete installiert hat, reicht ein Klick auf Aufnahme und Streamripper legt Stück für Stück MP3-Dateien an.