Lionstarrs Linux Blog

Gleich zu Anfang: Die fertige GIMP Datei gibt es hier.

Teil 1
Teil 2
Teil 3

In diesem Tutorial möchte ich euch beibringen, wie man ein fixed-width Design mit dem freien Grafik-Programm GIMP, und HTML sowie CSS erstellt. Später werden wir auch noch PHP verwenden, aber dies gehört nicht zur Hauptidee des Tutorials.

1. Zutaten

Also, was braucht man um ein Webdesign zu erstellen? Ich benutze folgende Software:

• GIMP:The GIMP ist ein empfehlenswertes gratis Bildbearbeitunsprogramm und eine freie (Open-Source) Alternative zu sehr teuren Programmen wie Photoshop.
• Weaverslave: Weaverslave ist ein freier Text-Editor, der Features wie Source-Highlighting & Co unterstützt. Es gibt sicher bessere Software, aber ich habe mich im Laufe der Jahre an ihn gewöhnt.
• xampp: Für den letzten Teil werden wir einen Webserver brauchen. XAMPP bietet die Möglichkeit eben diesen ohne Probleme per Doppelklick zu installieren. Einfach genial.

Natürlich ist keine dieser Software Zwang, aber es wird einfacher das Tutorial nachzuvollziehen, wenn man sie auch benutzt.

2. Das Grund-Gerüst

Nachdem nun geklärt ist, welche Software man braucht, wollen wir auch gleich anfangen. Wenn man frei designed folgt jetzt natürlich die Phase, in der man sich überlegt, wie das ganze am Ende aussehen soll. Praktischerweise ist dies aber ein Tutorial, und so ist die Idee schon vorhanden.

Als erstes müssen wir ein neues Bild mit den Maßen 880px mal 640px anlegen. Wer will, kann noch in den erweiterten Einstellungen den standardmäßigen Kommentan Created by The GIMP entfernen. Nun haben wir ein Bild ganz in weiß – wir wollen den Hintergrund aber in 8195e0 haben. Dazu benutzen wir das Füllwerkzeug und füllen die ganze Auswahl in dieser Farbe.

Jetzt brauchen wir eine neue Ebene, die den eigentlichen Inhalt später enthalten soll. Mit STRG+Umschalt+N erzeugen wir diese und wählen als Größe 680px mal 400px mit der Hintergrundfarbe weiß. Diese Ebene wollen wir im Bezug auf das Bild zentrieren. Praktischerweise gibt es dafür das Ausrichten-Tool() von GIMP. Mit Q kann es ausgewählt werden. Daraufhin muss mit einem Klick auf die weiße Ebene das auszurichtende Objekt gewählt werden. Nun wählt man Relativ zu Bild und betätigt die Buttons für das vertikale und horizontale Zentrieren.

Als nächstes soll diese Ebene einen Schlagschatten bekommen. Praktischerweise bietet GIMP diesen als Filter im Menü Filter -> Licht und Schatten -> Schlagschatten an. Hier sollte nun der Versatz x sowie Versatz y auf 0 gestellt werden und das Häkchen vor Größenänderung zulassen entfernt werden. Nach dem Bestätigen mit OK sollte nun ein Schlagschatten erscheinen. Das Ganze sollte nun ungefähr so aussehen:

3. Der Header

Um den Header zu erstellen, wollen wir einen Farbverlauf bemühen. Dazu sollten wir ersteinmal eine neue Ebene erstellen, 680px mal 61px. Das Ausrichten überlasse ich diesmal euch, die Ebene soll horizontal zentriert und vertikal am oberen Rand der weißen Ebene positioniert werden. Die neue Ebene muss jetzt in der Reihenfolge ganz nach oben verschoben werden. Dazu öffnet man mit STRG+L das Ebenen-Menü und wählt die Header-Ebene aus. Wer will kann nun auch noch alle Ebenen richtig bezeichnen – dazu muss man nur auf eine Ebene doppelklicken. Auf jeden Fall sollte man die Ebene nach oben verschieben, um sie sichtbar zu machen – dies geht durch mehrfaches drücken von . Nun wählt man mit L das Farbverlaufs-Werkzeug aus und stellt sicher, dass die Ebene mit dem Header ausgewählt ist.
Jetzt kann man versuchen einen Farbverlauf zu erzeugen. Wenn das Blau die Vordergrundfarbe ist, dann sollte man unten am Header beginnen und den Farbverlauf für den besten Effekt ein bisschen über den Rand ziehen. Aber dies ist auch der Teil des Tutorials, wo man einfach immer wieder ausprobieren muss und sehen muss, was am besten aussieht.

Und dies war auch schon der erste Teil dieses Tutorials. Im zweiten Teil werden wir das erstellte Design nun in die für CSS wichtigen Schnipsel zerschneiden. Hier kann man die fertige GIMP-Datei herunterladen.

Eigentlich bin ich ja nicht so der Gamer-Typ, aber beim (etwas älteren) Spiel Jazz Jack Rabbit 2: The Secret Files konnte ich einfach nicht wiederstehen. JJ2 erfreut sich einer großen Fan-Gemeinde, da es – im Gegensatz zu vielen anderen kleineren Spielen – über vielfältige Multiplayer-Fähigkeiten (An einem Rechner, übers Internet, übers Lan) verfügt.

Man selbst spielt einen Hasen in einem klassischen Jump&Run Adventure. Der Hase namens Jazz muss unterschiedlichste Arten von Gegnern besiegen, dabei Münzen und Diamanten sammeln um ordentlich Punkte zu machen. Außerdem gibt es verschiedene Arten von Waffen, zwischen denen man während des Spiels hin- und herschalten kann.

Aber auch wenn der Einzelspieler-Modus schon sehr viel Spaß macht, der Mehrspieler-Modus übertrifft ihn alle mal. Nach Download eines kleinen Patches auf Jazz2Online kann man das Spiel immernoch Online spielen. Außerdem kann man natürlich ohne jeden Patch JJ2 über LAN mit Freunden oder an einem Computer über mehrere Joysticks & Co spielen.

Wer Probleme hat, die Internet-Funktion zum Laufen zu bekommen, besonders, falls man regelmäßig nach 30 Sekunden die Verbindung verliert: Oft blockiert eine Firewall oder ein Router die für Jazz nötigen Ports 10052-10054. Für den SpeedTouch Router, den auch ich besitze, findet sich eine Anleitung auf meiner Seite.

Alles in allem: Ein geniales Spiel, welches ich jedem empfehlen kann.

Nachdem ich mir zusammen mit meinem Bruder das Spiel Jazz Jack Rabbit 2: The Secret Files gekauft hatte (über welches ich auch noch berichten werde) kam der Schock: Die Internetfunktionen des Spiels wollten nicht. Nach einigem Lesen bin ich dann auf den Fakt gestoßen, dass JJ2, welches ein sehr altes Spiel ist, das neue NAPT nicht unterstützt. Um aber NAP zu aktivieren muss man sich auf die Kommandozeile begeben.

Die SpeedTouch Router können über Telnet angesprochen werden. So ist es möglich bestimmte Befehle einfach über die Tastatur einzutippen statt sich im JavaScript-lastigen WebInterface rumzuklicken. Eine ausführliche Dokumentation der Befehle gibt es hier.

Ich persönlich wollte meinem Router sagen, dass er NAP benutzten sollte um die JJ2 Ports an meinen lokalen PC weiterzuleiten. Dazu gibt es den Befehl :nat mapadd. Das ganze läuft dann ungefähr wie folgt ab:

1. Verbinden: Zuerst muss man sich mit seinem Router über Telnet verbinden. Dazu startet man die Kommandozeile der Wahl (unter Windows:Start->Ausführen und “cmd”). Dann tippt man den Befehl telnet speedtouch.lan ein.
2. Anmelden: Nun muss man sich mit der Benutzername/Passwort Kombination, die man auch beim Webinterface verwendet einloggen. Man wird zuerst nach Benutzername, dann nach Passwort gefragt.
3. Befehl ausführen: Als nächstes tippt man :nat mapadd gefolgt von einem [ENTER] ein.  Daraufhin wird man nach einer Menge Werte gefragt. Hier die Eingaben, die für mich funktioniert haben:
   • –intf Internet
   • –type nat
   • –outside_addr Router-IP (Meine IP)
   • –inside_addr Eigene IP im lokalen Netzwerk
   • –access_list leerlassen
   • –foreign_addr leerlassen
   • –protocol udp
   • –outside_port 10052-10054
   • –inside_port 10052-10054
   • –mode leerlassen

Leider funktioniert diese vorgehensweise nur für statische IP’s (da man seine lokale IP angeben muss). Ich hoffe, ich konnte jemandem mit diesem kleinen Tutorial helfen. Wenn ihr Fehler entdeckt, noch Tipps habt oder etwas anderes ist, einfach einen Kommentar schreiben.

Das Header-Bild ist eine zusammengschnittene und bearbeitete Version von dem Stanford Engineering Everywhere Logo und wird bei Beschwerden entfernt werden.

Bei dieser Headline mag man an irgendwelche dubiosen Angebote denken, die dann doch noch von einem 1000€ Portokosten oder Ähnliches verlangen. Tatsächlich bietet die Universität Stanford aber wirklich gratis Videoaufnahmen und komplettes Material ihrer Kurse online an. Einziger Nachteil: Wer kein Englisch spricht, hat hier keine Chance. Aber in der heutigen Welt sollte man eh Englisch lernen und – hey – das kann man doch auch einfach mal als Anlass nehmen.

Was bietet Stanford nun konkret an? Im Zuge des Standford Engineering Everywhere Projektes können unterschiedliche Kurse (aus den Bereichen Computerwissenschaften, Künstliche Intelligenz und Lineare Systeme und Optimierungen) ausgewählt werden, zu denen alle Handouts, benötigten Programme, Aufgaben und – vor allem – Videos vorliegen.

Ich habe vor einem Tag mit dem Kurs CS106A – Programming Methodology angefangen und bin begeistert. Nach dem ich die ersten drei jeweils ca. 40-50 Minuten langen Videos (von 28 insgesamt nur aus diesem Kurs) heruntergeladen und angesehen habe, habe ich es auch geschafft, das erste Aufgabenblatt zu lösen. “Mein” Professor ist klasse (obwohl ich noch nie mit ihm geredet habe und es höchstwahrscheinlich nie werde) und mir gefällt der Kurs sehr gut.

Noch ein Wort an alle, die die Videos per Bittorrent runterladen: Bitte seeded noch einen Tag oder so, damit auch andere auf den Geschmack kommen. Sonst kann man sich die Videos natürlich auch bei Youtube ansehen. Hier die erste Stunde des Kurses von Youtube. Bitte nicht wundern, in dieser Stunde wird eigentlich nur auf Formalitäten eingegangen, das echte Programmieren kommt später.

Was haltet ihr von diesem Kurs? Probiert ihr auch einen aus, oder haltet ihr das für Zeitverschwendung? Ich freue mich über jeden Kommentar.

[via]

Viele von euch werden noch an die Zeit zurückdenken können, als sie noch die Schulbank drückten und leider hört man immer wieder, dass Mathematik doch das schwerste Fach sei.

Für diese unter uns, die noch die Schulbank drücken, habe ich ein Programm gecoded, welches die “normale” Binomialverteilung b(k;n;p), als auch die akkumulierte B(k;n;p) und deren Gegenwahrscheinlichkeit berechnet, hier zu finden. Das Besondere an diesem Programm ist, das es auch den Rechenweg mitangibt. Das Ganze sollte eigentlich selbstverständlich sein. Für alle, die vergessen haben, was die einzelnen Werte bedeuten:

• k: Steht für die gesuchte Anzahl an Treffern.
• n: Steht für die Anzahl der Versuche.
• p: Steht für die Trefferwahrscheinlichkeit, z.B. 1/6 beim Würfeln.

Um zwischen der normalen Binomialverteilung, der akkumulierten Binomialverteilung und deren Gegenwahrscheinlichkeit zu wechseln, einfach auf das b (ganz groß, oben, vor der Klammer) klicken. Die Rechnung aktualisiert sich, während des Eintippens der Zahlen.

Zuletzt, noch etwas zu dem Code: Dieses Programm ist ziemlich schlampig programmiert, da ich nur einen schnellen Hack brauchte. Ich bin mir sicher, dass fast jeder Programmierer es mit geringem Aufwand sauberer implementieren könnte, mich selbst eingeschlossen. Aber das war nicht der Zweck dieses Programmes.

Wer Fehler oder ähnliches findet, wer Verbesserungsvorschläge hat, oder mir danken will, für alles das gibt es eine Kommentarfunktion.

Auf HubDub geht es darum, die Nachrichten vorherzusagen. Jeder Spieler wird zu Anfang mit 1000H$ Spielgeld ausgestattet und bekommt für jeden Tag, an dem er sich auf der Seite einloggt, weitere 20H$. Das Ziel ist es nun, sein persönliches Vermögen zu vermehren, indem man die richtigen Nachrichten vorhersagt. So gibt es z.B. momentan eine Umfrage Wer wird die US Wahlen gewinnen? mit den Antwortmöglichkeiten Ein Demokrat, Ein Republikaner, Ein anderer. Jetzt kann man sein Spielgeld (oder ein Teil dessen) auf eine Antwortmöglichkeit setzen. Wenn man gewinnt, bekommt man seinen Einsatz plus einen Gewinn zurück, sonst verliert man seinen Einsatz.

Was mir persönlich an diesem (leider nur auf englisch verfügbaren) Spiel gefällt, ist der Hintergrund. Es gibt tausende von Online-Spielen, aber dieses zwingt einen geradezu, sich darüber zu informieren, was in der Welt passiert, und fördert so das politische Verständnis. Ein Feature von HubDub ist, dass man sich sehr einfach mit Freunden vergleichen kann, und so z.B. mit der eigenen Klasse einen Wettkampf führen kann, wer im Quartal mehr H$ gewinnmacht.

Fazit: Das Spiel macht sehr viel Spaß und ich kann es jedem empfehlen, der sich für Politik oder ähnliches interessiert. Aber auch allen anderen, denn Politik ist bei weitem nicht das einzige Thema, aus dem man auswählen kann.

In Zeitungen oder Magazinen sieht man oft, das Bilder vom Text nicht rechteckig sondern in einer speziellen Form umflossen werden. Wenn man z.B. ein Segelboot als Bild hat, ragt der Mast in den Text hinein. Diesen Effekt kann man mit OpenOffice sehr einfach hinbekommen.

Zuerst muss getestet werden, ob bei einem neu-eingefügten Bild ein Rahmen erstellt wird. Dazu startet man den Dialog Tools->Options… und sieht im Reiter OpenOffice.org Writer -> AutoCaption nach, ob vor OpenOffice.org Writer Picture ein Häkchen steht. Tut es das, so muss es mit einem Klick entfernt werden und die Einstellungen müssen gespeichert werden.

Nun tippt man ein wenig Text ein (den, der später das Bild umfließen soll). Für den besten Eindruck sollte der Text im Blocksatz verfasst werden. Nachdem dies geschehen ist, kann man sein Bild einfügen. Dies geht entweder per Drag&Drop oder mit dem Dialog Insert -> Picture ->From File…. Jetzt macht man einen Rechtsklick auf das Bild und wählt zuerst Wrap -> Optimal und dann Wrap -> Edit Contour. In dem nun enstehenden Dialog kann man Malwerkzeuge nutzen um die Kontur des Bildes auszuwählen. Der Text wird nach Bestätigung an dieser Kontour entlangfließen.

Für den allerbesten Eindruck (kombiniert mit Blocksatz) sollte man noch einen Abstand zwischen Text und Bild wählen. Dies geht per Doppelklick auf das Bild, Reiter Wrap unter Spacing.

FaceYourManga ist eine Webseite, die ein Flash-Tool anbietet, mit dem man sich seinen eigenen individuellen Avatar designen kann. Die erstellten Bilder erinnern sehr an Manga-Charaktere, daher auch der Name der Seite.

Die Einstellungsmöglichkeiten des Avatars sind sehr vielfältig und reichen von Augenbrauen bis Jacken, von Bart bis Haren, von Ausstattung bis Kleidern. Ein paar Beispiele seht ihr oben in diesem Artikel, die drei Avatare wurden mithilfe von FaceYourManga von mir designt. Da erkennt mann die breite Spanne der Möglichkeiten dieses Dienstes. Toll ist, das man bemerkt, wie die Augen das Bild freundlicher oder gefährlicher machen, man merkt, wie man einen Menschen nach dem äußeren beurteilt.

Was mir auch besonders an den Avataren gefällt: wenn sie mit einer gewissen Ordentlichkeit erstellt und nicht nur oberflächlich gemacht wurden, kann man sie tatsächlich fast wie ein Bild von einem Menschen sehen. Natürlich können sie nicht soviel Aussagen, wie das Bild eines Menschen, aber sie sind a) sicherlich einfacher zu merken als andere Avatare und b) immernoch fähig ein wenig über den Ersteller des Avatars auszusagen. Man bekommt einen Eindruck von dem Menschen, mit dem man sich gerade Online unterhält, ohne dass er ein Foto herausgeben muss – und gerade dieses sollte man möglichst nie im Internet tun.

Wer gerne ließt, Musik hört oder auch Filme sieht, dem sei Gnod empfohlen. Gnod ist eine künstliche Intelligenz, die versucht herauszufinden, welche Autoren, Interpreten oder Videos einem gefallen könnten. Die Empfehlung basiert auf Eingaben von anderen Benutzern und ist erstaunlich exakt. Praktischerweise gibt es das ganze auch auf Deutsch:

Mir wurden nach Eingabe der Autoren Terry Pratchett und Douglas Adams
Isaac Asimov und J. R. R. Tolkien empfohlen – und auch dies sind Autoren, die ich zwar leider schon kenne, aber sehr gerne lese.

Auf jeden Fall eine sehr empfehlenswerte Seite und vielleicht ein nützlicheres Beispiel der Anwendung von KI’s als 20q.

Früher haben Künstler in Austellungen ihre Werke vorgestellt. Heutzutage gibt es auch dafür Webseiten: So z.B. deviantart.com, eine exzellente Seite für Photographen und generell Künstler aller Art.

Auf Deviantart können sich Künstler austauschen, ihre Werke zeigen und andere Werke kommentieren. Der Foto-Sucher kann einfach per Kategorien die besten Werke finden, oder direkt nach einem Stichwort suchen. Der einzige Nachteil der Community ist, dass es im Grunde eine kommerzielle Seite ist: Es fallen zwar für die Registrierung keine Kosten an, aber für zusätzliche Angebote z.B. zum einfachen Durchsuchen von älteren Bildern.

Von vielen Bildern kann man auf der Seite Posterdrucke, Postkarten o.Ä. bestellen. Das geniale an der Community ist die größe (2 Mio. Benutzer sowie 59 Mio. Kunstwerke laut Wikipedia), aus der sich wohl auch ergibt, dass es einzigartige Bilder geben muss. Der Schwerpunkt von Deviantart liegt zwar bei der digitalen Fotografie aber auch andere Kunstrichtung werden angenommen, sofern sie digitalisierbar sind.

Das Bild, was rechts zu sehen ist, wurde von =chiquillo gemacht, ist hier zu finden und unter CC3.0 lizenziert! Das Foto, welches im Titelbild zu sehen ist, stammt von Gilad.