Twitter Updates

Slicen mit Gimp · Samstag Februar 21, 2009

Hallo, einige haben mich gefragt wie ich mein Blogtemplate hinbekommen habe, weil ich es mit Gimp erstellt habe und nicht Photoshop und Imageready verwendet habe.

Erst einmal überlegt man sich wie das Template denn überhaupt aussehen soll, gut ist auch schon wenn man sich freie Stellen bei der Erstellung markiert (Pfade, Auswahl, Hilfslinien etc.)

Das markiere im Bild sind nur weiße Flächen die ich auf Ebenenmodus Überlagern gesetzt habe und die Sichtbarkeit auf 50% gestellt habe. Keine sorge am Ende des Eintrages ist die xcf Datei mit dabei zum gucken :). Die Schriftart für “Rikku” ist hier bei dafont.com zu finden.

Hat man seine Ebenen so weit das der ganze Spaß ein Layout ergibt heißt es erst mal abspeichern, falls man das noch nicht getan hat.

Nun kommt die eigentliche Slicearbeit, jetzt müssen Hilfslinien gesetzt werden Damit Gimp weiß wo es lang slicen soll. In der XCF von mir sind die schon gesetzt.

Nun am besten noch einmal speichern. Dann auf Bearbeiten>Sichbares kopieren und als neue Ebene einfügen.
Anschließend auf Filter>Web>Zerteilen. Dort dann alles wie gewünscht einstellen, ich rate das ganze erst mal als png Dateien slicen zu lassen, da gimp den jpg Dateien unheimlich schlechte Qualität gibt. Die png Dateien kann man später immer noch in jpg umwandeln mit höherer Qualität. Natürlich muss man dann seinen Quelltext anpassen.

Anschließend unbedingt die erstellte Datei, standardmäßig slice.html angucken und gegebenenfalls bearbeiten, da der dortige HTML code auf gut deutsch scheiße ist.
Wenn man nun ganz viel Langeweile hat macht man dort die tables zu div Containern, das hab ich gemacht.

tut-layout.7z

Live Demo
Live Demo 2

— BloodyWing

Tabs auf dem Space verlinken · Mittwoch März 12, 2008

Hallo Gemeinde, heute zeig ich, nachdem ich darauf angesprochen wurde (weinendetaube), wie man Tabs verlinkt.

Im Prinzip gibs dort wenig Unterschiede im Vergleich zu regulären Links. siehe hier

Begonnen wird wieder mit dem Codewidget dort fügt man nun Folgendes ein:

<a href="http://spacename.joinr.de/tab/tabname">Linkbeschreibung</a>

Erklärung dazu:
“spacename” ist natürlich der eigene Accountname, in meinen Fall wäre das “bloodywing”. “tab” ist statisch, d.h. es muss nicht geändert werden und der Teil kann so übernommen werden. Bei “tabname” würde nun zum Beispiel: “bilder” stehen wenn man einen Tab besitzt der Bilder heißt.
Hier gibt es sehr große Unterschiede was dort nun da steht, z.b. werden Umlaute in “oe”, “ue” und “ae” umgewandelt. Ist der Tabname mit wirren Buchstaben geschrieben so werden die nur schwer darstellbaren Zeichen entfernt.
Beispiel:
¤ Shσutвσx ¤
so was kann nicht im Link dargestellt werden der Tabname im Link wäre dann so: sh-ut-x
Grund dafür? s von S, h von h, der – von σ weil das Zeichen in einer konformen URL nicht dargestellt werden kann. ut von ut dann kommt wieder ein Zeichen was nicht darstellbar ist also wieder ein -, da danach noch ein nicht darstellbares Zeichen kommt wird die Stelle zusammen gefasst anstelle von —. Das x ist wieder darstellbar.

Da die Methode etwas umständlich ist rate ich einfach mit der Maus über einen Tab drüber zu fahren und dort dann den Link einfach mit rechte Maustaste>Linkadresse kopiere (im IE “Verknüpfung kopieren”) in die Zwischenablage zu kopieren.

Vollständiger Link:
<a href="http://bloodywing.joinr.de/tab/hintergruende/">Hintergründe auf Bloodys Space</a>

— BloodyWing

G2P · Mittwoch Februar 13, 2008

Wer braucht schon Tauschbörsen ;)

Hab soeben mal etwas rumgesucht und DAS gefunden.

Und Listen77 sehr interessant wenn man neue Musik sucht.

Mit ein paar Tricks gelangt man auch an die MP3 die dort gerade abgespielt wird.
Nachdem man sich ein Lied gesucht hat öffnet sich ein Popup mit einem Flashplayer. Dort schaut man sich den Quelltext an, welcher nicht sehr groß ist. und sucht eine Stelle die in etwa so lautet:

so.addVariable(“soundPath”, “http://www.esnips.com/nsdoc/bcb0b7b0-0dde-45dc-8cd2-a99090635b43/?id=1202942492096”);

Dies URL ruft man auf und Voila, schon hat man eine MP3 mehr :)

— BloodyWing

Farbige Schrift in der Shoutbox · Freitag Februar 8, 2008

Hi Leute
und so gehts mit der farbigen Schrift:

Zuerst brauchen wir eine Shoutbox die wir dafür missbrauchen können, nicht unbedingt meinen, am besten für Testzwecke die eigene da man hier notfalls wieder löschen kann.

Beispielcode:
<div style="color:#FF0000">Yada yada</div>

Ist einfacher als es aussieht, damit der eingegeben Text auch “markiert“ wird benötigen wir einen div-Container, dieser beginnt wie man sehen kann mit <div und endet mit </div>.
Durch das Attribut “style“ wird der CSS Code eingeleitet, wenn man das so sagen kann. Nun kann man dort innerhalb der zwei “ so viel CSS Code reinschreiben wie man lustig ist. In diesem Fall habe ich nur color genommen da ich erst einmal nur die Schriftfarbe ändern möchte. Nach color kommt ein stück HEX-Code eine Seite wo einige ausführlich erklärt sind gibt es hier wer lieber ein Programm möchte (ich selber benutzte gcolor2) der lädt sich diese hier herunter

Weitere Möglichkeiten:
<div style="color:#FFFFFF";background-color:#000000">Yada yada</div>
Schrift wird weiß und Hintergrund schwarz.

<div style="color:blue;background-color:red">Yada yada</div>
Schrift wird blau und Hintergrund rot.

— BloodyWing

Space verbessern ... wieder mal :) · Mittwoch Januar 30, 2008

Mr. can-mert hat mir mal wieder ein paar Löcher in den Bauch gefragt wie ich das bei meinem Space so mache.

Erste Grundlage ist erst mal CSS, das hab ich in meiner Zeit seit dem ich hier Mitglied bin nebenbei gelernt, durch probieren und experimentieren. CSS4YOU.
Das dauert ca 2-4 Tage wenn man gut ist und sich auch wirklich damit befasst. Nur lesen reicht nicht man muss die Sachen die dort gezeigt werden auch probieren. Sehr Nützlich gerade dafür ist Firebug. Ohne gehen solche dinge auch nur sehr kompliziert. Des weiteren braucht man noch einen Editor, wer bereits Dreamweaver hat hat es gut. Ansonsten rate ich zu Notepad++ oder wer WYSIWYG mag der nimmt NVU.
Hat man sich erst mal die Grundlage angeeignet geht es dann zu der Sache das ganze auch auf dem Space anzuwenden. Das wichtigste beim Space wird “Hintergrund ändern” sein, da man hier css Code benutzen kann. Joinr stellt hier eine sehr große Hilfe zur Verfügung und vergibt bei Fast allen Div-Containern etc. eine Vielzahl von CSS-Selektoren.

Hat man CSS nun endlich auf den Kasten gehts zu HTML, das wird benötigt um mit dem Codewidget von Joinr was anfangen zu können. Außerdem erhöht es die Verständlichkeit für CSS ein guter Start ist auch hier mit Firebug erst mal Webseiten zu untersuchen und zu sehen wie was gemacht wird. Eine weitere Möglichkeit ist noch selfhtml. Dadurch lernt man dann auch schnell wie man Musik, Iframes etc. benutzt bei Joinr.

Das mit dem Blog erkläre ich wenn die Zeit reif ist :), da ich hier eine Offsite benutze, d.h. der Blog von mir ist nicht bei Joinr.

— BloodyWing