Lionstarrs Linux Blog

Damit ist eigentlich schon alles gesagt. Ich wünsche allen Lesern meines Blogs frohe Weihnachten, tolle Festtage und einen guten Rutsch ins neue Jahr.

Frisch drauf gestoßen: Auf MacHeist gibt es jetzt den Mac Giving Tree. Nach einer kurzen Anmeldung bekommt man dort ersteinmal Synergy und Enigmo 2 gratis – die Software ist ingesamt 34$ wert. Außerdem warten noch zwei Geschenke für den Heiligabend auf einen, und wenn man andere Leute per Mail einlädt noch bis zu 2 andere. MacHeist war immer schon bekannt für seine Bundles und ich finde diese Weihnachtsaktion eine tolle Sache, auch wenn sie natürlich zum Zweck hat, die Aufmerksamkeit auf das nahenda MacHeist III Bundle zu bringen.

Enigmo 2 habe ich mir bereits für den iPod Touch gekauft, bin aber trotzdem beeindruckt, wie gut die Mac Version sich macht. Das Spiel, von dem ihr rechts einen Screenshot sind, macht immer wieder Spaß und verkürzt auch lange Wintertage ohne Probleme.

Also: Viel Spaß mit der neuen Software und eine gute Ferienzeit.

Ersteinmal will ich mich bei allen Lesern entschuldigen, dass es hier in der letzten Zeit so ruhig war. Wie immer kurz vor den Ferien hat der Prüfungsteufel mir einen Strich durch die Rechnung gemacht. Das sollte sich demnächst wieder bessern. Aber nun zum eigentlichen Thema des Beitrages:

Einer meiner Lieblingsblogs veranstaltet ein Gewinnspiel für die Blogger unter uns, die MacOS X benutzen. Zu gewinnen gibt es die Bloggingsoftware ecto, die einem Blogger das Schreiben von Beiträgen deutlich vereinfachen soll. Das könnte ich auf jeden Fall gut gebrauchen, da mich das WordPress Frontend zum Schreiben von Beiträgen manchmal echt fertig macht. Das liegt – glaube ich – noch nicht einmal an WordPress, welches immer mein favorisiertes Blogsystem sein wird, sondern an Firefox bzw. meinen ganzen Erweiterungen.

Zu guter letzt bleibt noch zu sagen: Es sind drei Lizenzen zu gewinnen, also viel Glück!

Mit die bekanntesten Spiele für iPhone und iPod Touch aus dem App Store sind die von Pangea Software. Unter ihnen finden sich z.B. das geniale Rennspiel Cro-Mag Rallye, für mich schon immer ein Klassiker, und andere aufwendige Spiele. Bis Sonntagabend sind diese wegen dem “Black Friday” in Amerika für jeweils 0,79€ zu haben. Es lohnt sich wirklich, dieses Angebot zu nutzen, denn 4*0,79€=3,16€ und normalerweise kosten die Spiele zusammen etwa 13€: Man spart etwa 10€.

Früher war der iTunes-Visualizer meistens nur für einen kleinen Gag gut, da er zwar witzig war, aber einen nicht wirklich vom Hocker gehauen hat. Das hat sich – meiner Meinung nach – mit dem neuesten iTunes Update geändert, denn der neue Visualizer hält einen mit seiner Detailtreue und Schönheit auch gerne mal vom Arbeiten ab.

Um den Visualizer in iTunes zu starten lässt man es ein Lied abspielen, und drückt dann [CMD]+[T] und für Vollbild nocheinmal [CMD]+[F]. Links und Rechts sieht man ein paar Beispielbilder, die von iTunes 8 aufgenommen wurden, aber das ganze ist noch viel beeindruckender, wenn es in Echtzeit gerendert wird.

In Zusammenhang mit diesem Visualizer bin ich auch auf die Seite Flight 404, wessen Besitzer wohl ursprünglich Magnetosphere programmiert hat, welches jetzt nur von Apple aufgekauft und verbessert wurde. Auf der Seite findet man noch viele kleine Kunstwerke, die es sicher wert sind, ein bisschen herumzubrowsen. Wer selber solche Sachen programmieren will, sollte sich mal die Programmiersprache Processing ansehen, die für solche Sachen perfekt ist.

Vorweg: Ausprobieren kann man das Layout mit Generator hier, das Projekt zum herunterladen gibt es hier.

In den vergangenen beiden Teilen des Tutorials haben wir ein Layout mit GIMP und CSS erstellt. Dieses Layout hat ein blau als Hintergrundfarbe. Aber wäre es nicht schöner, die Hintergrundfarbe selber wählen zu können?

Teil 1
Teil 2
Teil 3

Auf in den PHP-Teil dieses Tutorials. Für die nachfolgenden Schritte benötigt man einen Webserver, z.B. xampp, der PHP und auch die GD-Library beinhaltet.

Als erstes verschiebt (oder kopiert) man den bereits erstellten Ordner in den htdocs Ordner von xampp. Ich werde jetzt nicht darauf eingehen, wie man xampp installiert oder startet, ich gehe davon aus, dass dies bereits bekannt ist. Sollte es Probleme geben, gibt es ja die Kommentar-Funktion. Nun werden die Dateien in index.php und style.php umbenannt.
Die neue Dateiendung stellt sicher, dass die Dateien als PHP-Skripte ausgeführt werden. Nun benötigten wir noch die Bilddateien aus dem 2. Teil des Tutorials – allerdings mit einem transparenten Hintergrund. Dafür öffnet man die Layout-Datei und macht die Hintergrundebene unsichtbar (Ebenen-Dialog STRG+L und auf das Auge neben der Ebene klicken). Nun müssen wie im zweiten Teil des Tutorials wieder die Bereiche ausgewählt und als Bilder kopiert werden.

Was den Footer und background.png betrifft, sollten es wieder genau die selben Maße & Co sein, wie im zweiten Teil. Beim Header wird es jedoch kompliziert: Da wir ja den Farbverlauf auch per PHP erstellen wollen, muss dieser vor dem kopieren unsichtbar gemacht werden. Der Header sieht also praktisch aus, wie eine gespiegelte Kopie des Footers, nur dass er immer noch 100px hoch ist. Die neuen Dateien sollen die alten ersetzen. Wer Probleme hat findet hier die fertigen Transparenten Bilder.

Nun haben wir die Dateien mit einem transparenten Hintergrund. Die naheliegende Idee, einfach diese einzusetzten und die HTML-Hintergrundfarbe zu ändern funktioniert leider nicht. Erstens überlappen bei diesem Vorgehen die Schatten und erzeugen unschöne Effekte, zweitens versteht sich der IE 6 nicht auf transparente Hintergrundbilder.

Die Lösung ist einfach: Wir benutzen einfach PHP, um die passenden Bilder zu erzeugen. Um die Transparenz mit einer Farbe zu ersetzen gibt es genImage.php. Ich möchte CoD danken, der diesen Code auf php.net gepostet hat. Hier die Datei genImage.php, welche alle Bilder generiert.

Wie ihr seht, ist hier auch schon der Code zum generieren des Farbverlaufs enthalten. Benutzt wird die Klasse gradient.class.php von Planet OZH. Diese erzeugt den passenden Farbverlauf und muss dazu wieder in das selbe Verzeichnis gedownloaded werden. Jetzt fehlen nur noch die veränderten Dateien style.php und index.php.

In der index.php wurde ein Farbwähler verwendet, den ich im Buch PHP Hacks kennen gelernt habe.

Ich hoffe euch hat dieses Tutorial Spaß gemacht!

Jahrelang habe ich auf Musik auf meinem iPod verzichtet, da ich wusste, danach würde ich die Stelle nicht mehr wiederfinden, an der ich mich gerade im aktuellen Hörbuch befand. Nun habe ich per Zufall eine so einfache Lösung gefunden, dass ich mich Ohrfeigen könnte. Da sie zwar einfach ist, aber vielleicht zu offensichtlich um sie zu finden (und natürlich, weil ich hoffe, dass ich nicht als Einziger die Option übersehen habe), hier eine kurze Anleitung:

Man starte iTunes und begebe sich zum Hörbuch seiner Wahl, z.B. per Suchfunktion oben rechts oder, indem man eine Wiedergabeliste auswählt. Nun klicke man mit der rechten Maustaste (für Leute ohne Zwei-Tasten Maus: CTRL+Klick) auf den Titel seiner Wahl und wähle den Menüpunkt Informationen. Hier wähle man den Tab Optionen aus und aktiviere den Haken bei der Option Wiedergabeposition merken.

Wo man schon dabei ist, kann man auch gleich den Haken vor Bei zufälliger Wiedergabe überspringen setzen und alle, die es noch nicht getan haben, sollten bei Medienart Hörbuch wählen, damit der iPod es dann auch gleich richtig einordnet.

Und tatsächlich: Nach der nächsten Synchronisation kann man sich das Hörbuch anhören, für Musik unterbrechen, und dann gemütlich weiterhören. Sogar die verbleibende Zeit zeigt der iPod dann an.

Vor dem Anfang gleich gesagt: Wer das Layout ausprobieren möchte sehe hier nach, und hier kann man das Layout downloaden.

Teil 1
Teil 2
Teil 3

1. Zerschnippeln des Layouts

Wilkommen im zweiten Teil dieses Tutorials. Nachdem wir nun im ersten Teil ein Design in GIMP erstellt haben, wollen wir es nun für CSS aufbereiten. Was man verstehen muss ist, dass CSS den Effekt von sich wiederholenden Bildern nutzt. So muss man keine riesigen Bilder übertragen und hat außerdem die Möglichkeit flexibel auf die Länge des Inhalts zu reagieren bzw. es wird automatisch auf die Länge reagiert. Dazu muss man aber Bilder erstellen, denen es nicht anzusehen ist, dass sie sich wiederholen.

Als erstes nehmen wir uns dazu das wichtigste Hintergrundbild, den Hintergrund der wiederholt wird vor. Dazu wählen wir in der Mitte des Bildes einen Bereich der vollen Breite und von nur wenig Höhe aus. Wichtig dabei ist nur, dass weder der Header noch die Ecken dieses Bereiches hier zu sehen sind. Mit Bearbeiten -> Sichtbares Kopieren und Bearbeiten -> Einfügen als neues Bild erzeugen wir ein neues Bild, welches wir background.png nennen und speichern. Spätestens jetzt ist es Zeit einen Ordner anzulegen, der die “Webseite” enthalten soll – in diesem solte ein weiterer Ordner liegen, mit dem Titel images. Hier speichern wir alle für die Webseite benötigten Bilder.

Insgesamt drei Bereiche sollen auf diese Art als einzelne Bilder gespeichert werden: Das Hintergrundbild haben wir eben schon gespeichert, jetzt fehlen noch der Header und der Footer. Die Auswahl sollte der im Bild ähneln, wichtig ist, dass der Schatten mit ausgewählt ist. Außerdem sollte die Auswahl immer über die volle Breite gehen und beim Header sollte die Höhe 100px betragen, beim Footer 30px. Falls das nicht klappt, kein Problem, hier kann man meine Grafiken runterladen.

Erstellen der HTML und CSS Datei

Jetzt kommt das erste mal Weaverslave oder der Editor der Wahl zum Einsatz.
Hier der HTML-Code und hier der CSS-Code.

Speichert die Dateien als index.html und style.css im selben Verzeichnis, in dem auch euer images-Ordner liegt. Nun müsstet ihr beim Aufrufen der Seite schon das fertige Design sehen.

Der Text im Design ist sogenannten Blindtext – bedeutungsloser Text der nur zur Verdeutlichung der Text-Formatierung benutzt wird. Das gesamte Layout wurde zentriert, indem die CSS-Eigenschaften position auf absolute und top sowie left auf 50% gesetzt wurden. Nun wurde durch einen negativen Margin das Layout positioniert.

Diese Technik funktioniert allerdings nur, wenn man eine feste Breite und Höhe eingestellt hat. Damit wäre das Layout erledigt, wer nun das ganze in allen möglichen Farben erstrahlen lassen will, der lese Teil 3 dieses Tutorials.

Ich weiß, in letzter Zeit häufen sich die Beiträge, die keine Tutorials usw. sind. Aber dafür wird auch bald die große Tutorial-Reihe Einstieg in Gimp fortgesetzt. Doch nun noch ein kleiner Post in eigener  Sache:

Ich verkaufe das Notebook, mit dem ich bis jetzt gearbeitet und gespielt habe bei ebay. Bilder vom Notebook könnt ihr im Header so wie natürlich bei ebay selber sehen. Die Daten sind die folgenden:

Hier geht’s weiter

Endlich, nach einem Jahr sparen und arbeiten habe ich es geschafft, genug Geld zusammenzukratzen für ein MacBook Pro und einen iPod Touch. Eine Erstaunliche Erkenntnis aus der Sparerei: Es geht viel einfacher als man denkt. Zuerst hatte ich mir lediglich das kleine, weiße Macbook vorgenommen.

Der Zeitpunkt zum Kauf von MacBook Pro ist natürlich auch genial: Vorletzte Woche ist das komplett neue MacBook Pro herausgekommen, welches zum ersten mal seit mehreren Jahren einem Designwechsel unterzogen wurde. Und der iPod Touch wurde auch erst Anfang September zum 2G gemacht.

Ich hoffe, dass ich dann auf diesem Computer alle drei Betriebsysteme installieren kann: Ubuntu 8.10, MacOS X und Windows XP. Sicher werden auch die Leser meines Blogs davon profitieren, denn ihr könnt in nächster Zeit nun auch Tutorials zu MacOS X und auch wieder zu Linux erwarten.