Thema: Dynamische Signatur 
Autor Deine Nachricht
 : Dynamische Signatur
BeitragVerfasst: Di 20. Okt 2009, 11:51 
Offline
Profi User
Profi User
Benutzeravatar

Registriert: Mo 10. Aug 2009, 15:28
Beiträge: 653
Wohnort: Pirmasens
Ich denke alle kennen meine Signatur hier wo die Daten von einem Preis gibt.
Da ich mal denke das bisher nicht alle so schlau waren sich das auf meiner Seite zu erlesen bring ich es dennoch mal hier!

Hier erkläre ich wie du per PHP eine Dynamische Signatur dir erstellen kannst.

Zuvor liste ich mal auf was wir alles an Material und Programmen benötigen!

-PHP fähigen Webspace
-Bildbearbeitungsprogramm
-Texteditor/PHP Editor
-Codestücke
-Schriftart
-Eine .htaccess Datei
-Abschluss


1. PHP fähigen Webspace

Ein wenig Webspace bekommt ihr eigentlich überall. Auch kostenlos! Ich stelle mal eine kleine Liste hier zur verfügung. Ich Garantiere jedoch nicht für die Verfügbarkeit des Angebotes bzw. schlage einen speziellen Freehoster vor!

-bplaced
-Kilu
-Lima-City
-Funpic

Vor in beanspruchung eines Angebotes solltest du dir die AGB/Nutzungsbedinungen sowie die Regeln Gründlich durchlesen! Es ist nur in seltenen Fällen eine pure Dateiablage erlaubt!!!


2. Bildbearbeitungsprogramm

Hierbei kann jedes übliche Programm zum erstellen von Grafiken verwendet werden.
Wer kein Geld investieren möchte kann The GIMP verwenden. Ansonsten es geht auch Photoshop und Kumpels.

Als Basis verwende ich in diesem Tutorial einen Simplen Hintergrund:
Bild


3. Texteditor/PHP Editor

Hierbei kann der Standart Windows Editor verwendet werden. Es kann aber zum Komfort auch ein PHP-Editor mit Quelltext Highlighting gewählt werden. Ich empfehle hierbei den kostenlosen: Weaverslave (Weberknecht) .

In meinem Tutorial jedoch verwende ich den Kostenpflichigen Adobe Dreamweaver CS3.


4. Codestücke

So eine Dynamische Signatur ist ohne Code elemente überhaupt garnichts! Also fangen wir nun mit dem Haupteil an!

Als erstes erstellen wir eine neue Datei, verwendest du einen Editor der dir den DOCTYPE einfügt lösche diesen raus!

Es sollte also aktuell so ausehen:
Bild

Um sicherzustellen das wir nichts vergessen Speichern wir mal gleich!

Nun starten wir unser Dokument indem wir den Dokument Typ festlegen. Dieser wird per:


Solltet ihr kein PNG als Hintergrundbild verwenden ändert das PNG auf das entsprechende Format ab! Aber Achtung! Es geht nur PNG, JPG/JPEG und GIF!

Nun da wir das erledigt haben müssen wir unser Hintergrund Bild defenieren! Was wir folgend machen:


Hierbei musst du das "bg.png" (Die "" zählen nicht zum Dateinamen!!!) an deinen Dateinamen anpassen!

Ziehen wir nun eine Zwischenbillanz es müsste aktuell also folgend Aussehen:
Bild

Nun legen wir mal die Farben fest die wir verwenden wollen!

Ich verwende hierbei die Farben: Rot und Grün einmal:


Die 3 Zahlen die in den Klammern stehen bestimmen die Farbe und bestehen aus den RGB Farben (1. Zahl= Rot 2. Zahl= Grün und 3. Zahl= Blau).

Nun Fangen wir mit dem "tollen" Teil an :). Um dir die Arbeit zu ersparen wie du z.B. die IP Adresse ausliest, den Host angibst und einem sein Betriebssystem/Browser verräts gebe ich einen Grundbaustein den du verwenden kannst vor!

Die IP ermitteln wir in diesem Fall (sowie in jedem bei PHP) so:


Machen wir weiter mit den Betriebssystemen:


Die ermittlung des Browsers ist fast genauso:


Nun machen wir mit dem Host weiter:


Wer will kann auch das Datum und die Zeit ausgeben:


Es handelt sich bei den Codeelementen nur um Standart Abfragen. Solche die Zufällig einen Text ausgeben, den Hintergrund ändern oder angeben ob man Online oder Offline sind werde ich in naher Zukunft zuzuglich ergänzen!

Um die Ausgelesenen Daten sowie überhaupt Inhalt reinzubringen Positionieren wir den Text nun auf dem Bild!

Der Code hierfür sieht folgend aus:
imagettftext($img, Schriftgröße, Rotierung, Abstand von Links, Abstand von oben, $FARBE, "Schriftart", "TEXT". $DATEN);

Ich erkläre hier was du wo reinschreiben musst:

Schriftgröße: Hier defenierst du deine Schriftgröße. Standart ist 12.

Rotierung: Wenn du willst das dein Text schräg steht gibst du hier den von dir gewünschten Wert ein. Wenn du keine willst gibst du 0 an.

Abstand von Links: Hier defenierst du in welchem Abstand von Links der Text stehen soll.

Abstand von oben: Hier defenierst du in welchem Abstand von Oben der Text stehen soll.

$FARBE: Hier gibst du eine von dir oben Festgelegte Farbe an.

Schriftart: Gib hier den relativen Pfad zur Schrift an die sich ebenfalls auf dem Server befinden muss!

TEXT: Hier gibst du einen Text ein wenn erwünscht.

$DATEN: Hier defenierst du was von den Ausgelesenen Sachen ausgegeben wird. Eine kleine liste was was ausgibt hier:



Für jede Angabe muss diese Zeile wiederholt werden. In meinem Beispiel sieht es nun so aus:


an um das Bild nun auch erstellen zu können!


5. Schriftart

Eine passende Schrift kannst du dir hier auf Dafont herraussuchen! Bedenke das nur Freie Schriften wieder hochgeladen werden dürfen!!!


6. .htaccess Datei

Die .htaccess Datei ist dafür da das wenn du dein Bild (in meinem Fall "bg.png") auch die PHP Datei angesprochen wird!

Hierfür erstellen wir ein einfaches Dokument mit dem Windows Standart Editor und schreiben folgendes hinein:
RewriteEngine On
RewriteRule bg.png sample.php

Hierbei musst du bg.png und sample.php an deine Dateinamen anpassen!

Diese Datei speicherst du nun als: "htaccess.txt" ab!


7. Abschluss

Zuletzt ladest dualle erstellten Dateien also:

-Hintergrundbild
-PHP Datei
-htaccess.txt
-Schriftart

per FTP auf den Server. Nun nennst die "htaccess.txt" in ".htaccess" um.

Solltest du nun alles richtig gemacht haben müsste dein Code so aussehen (PHP Datei):


Rufst du nun die in meinem Fall "bg.png" auf sieht sie folgend aus:

Bild

Um deine hier erstellte Signatur aber auch anderen zu Zeigen musst du sie ersteinmal einbinden!

Das ganze Zeige ich dir in 2 Varianten!

Mit HTML bindest du deine Signatur folgend ein:


Bedenke das du die Adresse so wie die Breite (Width) und Höhe (Height) noch ändern musst!

Per BBCode ist das einfacher:


Sollte dies nicht der Fall sein überprüfe nocheinmal deinen Code!

Orginal Tutorial hier: Klick mich

_________________
Bild


 
 Profil E-Mail senden