OffTopic • Share your code

11.09.2012, 21:19 - BlackBonjour - Administrator - 1160 Beiträge
Schönen guten Abend liebe Forengemeinde,

da ich heute anscheinend sehr gute Laune habe, dachte ich mir, ich bring euch mal ein wenig das scripten bei. Das heißt PHP, HTML, CSS (Jannös), JQuery und später vllt Bash für die jenigen, die Linux wie ich besitzen.

Also, dann fangen wir mal an mit HTML (= HyperTextMarkupLanguage )

Quelltext:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.      <head>
  5.           <!-- META SACHEN KOMMEN IN DEN HEAD -->
  6.           <title>Eleven Games - Post your Stuff Tutorial by BlackBonjour</title>
  7.      </head>
  8.      <body>
  9.           <div id="IchBinEin[I]Div[/I]">
  10.                Hallo Eleven Games.
  11.           </div>
  12.      </body>
  13. </html>
So, dann werd ich mal alles erklären.

Also mit
Quelltext:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
bestimmt ihr den Doctype. Dieser übermittelt eurem Browser die HTML Version. Ich bevorzuge immer XHTML, ist halt i-wie das gängige. Im Gegensatz zu HTML4 oder gar HTML5 enden bei XHTML Tags mit einem /> anstatt einem einfachen >.

Mit
Quelltext:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
beginnt der eigentliche HTML Bereich. Dort gibt es zwei wichtige Bereiche, einmal den <head> Bereich und einmal den <body> Bereich.

Der Tag <head> übermittlet eurem Browser sowie diversen Robots wie der Google Suchmaschine wichtige Daten über eure Website. Im meinem jetzigen Code findet ihr jetzt noch denn <title> Tag, dieser bestimmt den Titel der aktuellen Seite. Für diesen Thread würde der Titel Post your Stuff >> Forum >> Offtopic - Eleven-Games.

In den <body> Bereich kommt eure eigentliche Website. Hier habt ihr verschiedene Möglichkeiten eure Website zu gestalten. Alte Seiten verwenden häufig Tabellen Designs, welches aber nicht so vorteilhaft ist wie die heutigen Divs Designs. Einziger Vorteil der Tabellen, sie werden bei allen Browsern gleich dargstellt.

Wie man jetzt im Code sieht, ist dort ein Div mit der ID IchBinEinDiv. Die ID ist für div. Funktionen wie z.B. für die CSS gestaltung oder JQuery Funktionen. Desweiteren hat dieses Div einen Inhalt, welches "Hallo ElevenGames" lautet.

Wenn wir das jetzt so speichern als *.html, bekommen wir im Browser nur Hallo Eleven Games gemeldet, der Rest ist besteht aus einem weißem Hintergrund, also leer. Daher kommt jetzt Farbe ins Spiel.

Wir fügen nach dem <title> Tag folgendes hinzu:

Quelltext:
  1. <style type="text/css">
  2.      <!--
  3.      body {
  4.           background-color: <a href="index.php?site=hashtag&tag=FF0000">#FF0000</a>;
  5.      }
  6.      
  7.      <a href="index.php?site=hashtag&tag=IchBinEinDIv">#IchBinEinDIv</a> {
  8.           color: <a href="index.php?site=hashtag&tag=555">#555</a>;
  9.           font-style: Arial;
  10.      }
  11.      -->
  12. </style>
Wie man sieht, wurde CSS für den <body> Bereich und für das Div IchBinEinDiv angelegt.

Wenn man einer ID CSS zuweisen möchte, geschieht dies mit einer # vor dem ID Namen. Möchte man aber einer Klasse etwas CSS zuweisen, so füge man einen . (= Punkt ) hinzu. CSS Anweisungen befinden sich dann immer zwischen den geschweiften Klammern ( {} ).

Wie man oben im Code sehen kann, befindet sich bei body die Anweisung background-color: #FF0000;. background-color steht für die Hintergrundfarbe, was man ja leicht ablesen kann, wenn man etwas Englischkenntnisse besitzt. Die komischen Hyroglyphen danach sind HEX-Werte, welche die Farbe Rot ergibt.
Das Div #IchBinEinDiv bekommt eine neue, graue Schriftfarbe mittels color: #555; sowie ein neue Schriftart, nämlich Arial mit dem Befehl font-style: Arial;

Unsere Ausgabe wäre nun ein roter Hintergrund mit eine in grauer Farbe geschriebener Text in der Schriftart Arial

--

So.. das wars fürs erste. Ich werde auf jedenfall das hier weiterführen, eventuell werd ich dieses Post hier noch editieren und mehr hinzufügen. Wenn ihr etwas bestimmtes sucht in den oben genannten Bereichen, dann postet es doch einfach oder wenn du Lust hast poste doch deinen eigenen Script.
Mit freundlichen Grüßen

BlackBonjour



Und weida gehts....

Ich mach mal einen klassischen Aufbau einer Website:

Quelltext:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.      <head>
  5.           <title>BlackBonjour</title>
  6.           <link rel="stylesheet" href="/css/style.css" type="text/css" />
  7.           <link rel="shortcut icon" href="/images/icon/favicon.ico" type="image/x-icon" />
  8.           <script type="">
  9.                $(document).ready(function()
  10.                {
  11.                     <!-- HIER KOMMT SPÄTER MAL EINE JQUERY FUNKTION REIN -->
  12.                });
  13.           </script>
  14.      </head>
  15.      <body>
  16.           <div id="header">
  17.           </div>
  18.           <div class="spacer">
  19.           </div>
  20.           <div id="container">
  21.           </div>
  22.           <div class="spacer">
  23.           </div>
  24.           <div id="Footer">
  25.           </div>
  26.      </body>
  27. </html>
So... jetzt haben wir die Grundstruktur. Aber wenn wir diese im Browser öffnen, dann ist da noch nichts. Klar auch, wir haben keinen Inhalt, der kommt jetzt aber:...

Quelltext:
  1.           <div id="container">
  2.                Lorem Ipsum... ...unsere Testsite by BlackBonjour<br />
  3.                Eleven Games Rulez<br />
  4.                <br />
  5.                :P
  6.           </div>
So... schon haben wir etwas Inhalt, der natürlich nach belieben geändert werden kann. Der ein oder andere wird am Ende eines Satzes die <br />'s bemerkt haben. Diese stehen für break, also sie erzeugen einen Umbruch, da der Satz sonst in einer Reihe weitergehen würde.
So, nun stellt sich aber die Frage, wollen wir wirklich nur einen Seiteninhalt haben? Um später mehrere Texte lesen zu können, muss man ja auch Buttons haben, um den Inhalt wechseln zu können.
Das heißt, wir bauen uns jetzt ein Menü:

Quelltext:
  1.           <div id="header">
  2.                <div class="button">
  3.                     Home
  4.                </div>
  5.                <div class="button">
  6.                     Testseite
  7.                </div>
  8.           </div>
So, nun hätten wir zwei Buttons, einmal Home und einmal Testseite. Wie man im Code sehen kann, diesmal Klassen zum Einsatz, dazu aber später mehr. Nun sieht man auch die Buttons auf der Website, aber so werden diese nicht funktionieren, da sie nicht verlinkt sind. Dies können wir ganz einfach machen...

Quelltext:
  1. <a href="HIER KOMMT DER LINK">HIER KOMMT DER NAME DES LINKS</a>
So sieht dann ein einfacher Link aus. Für unseren Beispiel könnte der Link nun wie folgt aussehen:

Quelltext:
  1. <a href="http://www.beispielseite.de">Home</a>
Oder man kann auch noch weitere Attribute hinzufügen um z.B. beim klick auf den Link einen neuen Browserfenster geöffnet zu bekommen. Dies würde dann wie folgt aussehen:

Quelltext:
  1. <a href="http://beispielseite.de“ target="_blank">Home</a>
Kurze Zusammenfassung => Mit dem Attribut href="" bestimmen wir den Link, also die Zielseite, wie man Websites verlinken kann, wird gleich erklärt. Mit dem Attribut target="" kann man, wie schon beschrieben, das Zielfenster auswählen, also soll sich ein neues Fenster öffnen, etc.
Dann hier noch mal kurz was zu den Links/Pfaden:

[toggle=absolute Pfade]
Absolute Pfade können z.B. wie folgt aussehen:

Quelltext:
  1. http://beispielseite.de/images/gallery/2008/haha.jpg
  2. /images/gallery/2008/haha.jpg
Das heißt, bei absoluten Pfaden wird immer vom Root angefangen, also dem Hauptverzeichnis, ein Verzeichnis zu suchen.
[/toggle]

[toggle=relative Pfade]
Relative Pfade hingegen sehen schon anders aus:

Quelltext:
  1. ../images/gallery/2008/haha.jpg 
  2. images/gallery/2008/haha.jpg
Im ersten Beispiel wird aus dem aktuellem Verzeichnis rausgegangen und dann in den images Verzeichnis gewechselt.
Beim zweitem Pfad siehts schon anders aus, dort wird nämlich im aktuellem Verzeichnis nach dem images Verzeichnis gesucht.
[/toggle]

So, dann kommen wir nochmal kurz zu dem Unterschied zwischen ID und CLASS. Also... ID's müsste eigentlich jeder kennen, sie sind in der Regel einzigartig, daher wird es als Fehler gewertet, wenn ein und die selbe ID doppelt verwendet wird. Denn für diese Aufgabe sind Klassen gedacht ( class ). Diese können mehrfach verwendet werden, siehe class="spacer".

So, wenn man dann die Klassen kennt, kann man diese dann mit CSS gestalten, siehe erstes Tutorial.

Soweit so gut, nun kommt noch der Footer, diesen können wir wie folgt gestalten:

Quelltext:
  1.           <div id="Footer">
  2.                Copyright &copy; by Max Mustermann <?php echo date('Y'); ?>
  3.           </div>
Eigentlich simpel oder? Hier gibts nur zwei Sachen zu erklären.
1. &copy; ist ein Sonderzeichen, welches folgendes ausgibt: ©
2. <?php echo date('Y'); ?> gehört zur PHP Sprache, allerdings ist dies nur ein simpler Code, nämlich gibt dieser via echo das aktuelle Jahr aus (date('Y')).

So, nun hätten wir eigentlich die Grundstruktur fertig. Jetzt kannst du sie nach belieben ändern. Folgende CSS Codes können behilflich sein:

margin: 0 auto; => Hiermit wird ein Div zentriert
padding: 0 0 0 0; => Hiermit wird der Innere Abstand von Text zum Rand angegeben, welche jetzt überall 0px ist. Die 4 Nullen stehen für OBEN RECHT UNTEN LINKS

Es kann nützlich sein am Anfang einer CSS folgenden Code zu verwenden:

Quelltext:
  1. * {
  2.      margin: 0;
  3.      padding: 0;
  4. }
Mit diesem Code werden in der Regel die margin und padding Werte für alle Browser gleichgesetzt, nämlich 0px. Nur der Internet Explorer macht öfters seine eigenen Sachen.
So, schon ist die Seite fertig bzw. ihr könnt sie nun nach belieben gestalten.
Mit freundlichen Grüßen

BlackBonjour

Edit: Texte korrigiert, erweitert und übersichtlicher gestaltet...

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
20.09.2012, 20:33 - BlackBonjour - Administrator - 1160 Beiträge
Guten Abend liebe Forengemeinde,

heute fang ich mal etwas mit PHP an, da HTML und CSS anscheinend die wenigsten interessiert. Desweiteren sind HTML und CSS nicht ein all zu großes Thema.

Ich würde heute mit einem Kontaktformular anfangen, welches die Besucherdaten übernimmt und dann via PHP eine Mail sendet.

Wir fangen mit dem Formular an, welches den Namen, die Mailadresse, den Betreff und den eigentlichen Text fordert.

Quelltext:
  1. <html>
  2.      <head>
  3.           <title>Kontaktformular</title>
  4.      </head>
  5.      <body>
  6.           <form>
  7.                
  8.           </form>
  9.      </body>
  10. </html>
So hätten wie schonmal das Grundgerüst. <form> steht hier für Formular, welches dann später die Informationen weiterleitet. Aber damit die Infomationen überhaupt weitergeleitet werden, müssen wir bestimmen wohin und welche Typ/Methode.

Also, wir ersetzen <form> durch folgendes:

Quelltext:
  1. <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
Der Attribut action definiert das Ziel bzw. die Zieldatei, zwischen denn " " findet ihr nun den ersten PHP-Code. Dieser Code sagt, dass das Ziel des Formulars die selbe Datei ist.
Erläuterung:

<?phpmit diesem Code beginnt jeder PHP-Code
echo gibt etwas aus
$_SERVERist ein Array, welches viele Informationen des Besuchers besitzt
$_SERVER['PHP_SELF']beinhaltet die gerade besuchte Datei
?>beendet den PHP-Code


So, nun fügen wir die Eingabefelder ein. Dabei werden wie eine Tabelle erstellen, damit es bei allen Browsern ungefähr gleich aussieht.

Quelltext:
  1. <table border="0">
  2.      <tr>
  3.           <td>Name:</td>
  4.           <td><input type="text" name="Name" style="width: 300px;"></td>
  5.      </tr>
  6.      <tr>
  7.           <td>E-Mail:</td>
  8.           <td><input type="text" name="Mail" style="width: 300px;"></td>
  9.      </tr>
  10.      <tr>
  11.           <td>Betreff:</td>
  12.           <td>
  13.                <select name="Subject">
  14.                     <option value="Support">Support</option>
  15.                     <option value="Anfrage">Anfrage</option>
  16.                     <option value="other">Sonstiges</option>
  17.                </select>
  18.           </td>
  19.      </tr>
  20.      <tr>
  21.           <td>Nachricht:</td>
  22.           <td><textarea name="Msg" style="width: 300px; height: 175px;"></textarea></td>
  23.      </tr>
  24.      <tr>
  25.           <td></td>
  26.           <td><input type="submit" name="Submit" value="Kontaktformular absenden"></td>
  27.      </tr>
  28. </table>
Kurze Erklärung:

Mit <table> beginnt jede Tabelle, sie ist das Grundgerüst.
Mit <tr> erstellen wir eine Tabellenreihe.
Mit <td> erstellen wie eine Tabellenspalte, dabei ist zu achten, dass jede Reihe am besten die selbe Anzahl an Spalten hat, damit man ein schönes Endergebnis bekommen.
Mit <input> erstellen wir ein Eingabefeld. Dabei bestimmt das Attribut type den Eingabetypen, in diesem Falle "text". Weitere Typen sind "password" und "submit". Mit dem Attribut "Name" geben wir dem Eingabefeld einen Namen, dies ist wichtig um später das Kontaktformular zu bearbeiten. Das "style" Attribut ist ein CSS Attribut, welches im meinen ersten Beitrag etwas erklärt wurde. Dabei bestimmt width die Breite des Eingabefeldes.
Mit <select> erstellen wir ein Auswahlmenü. Dabei werden die einzelnen Optionen zwischen den Tags <option> eingetragen. Zusätzlich bekommen die <option> Tags den Attribut "value", womit wir den Optionen ein Ergebnis geben.
Mit <textarea> erstellen wir ein Textfeld, im welchen man im Gegensatz zum Eingabefeld mehrere Sätze schreiben kann.
Mit <input type="submit"> erstellen wir einen Absende Button, im welchem "Kontaktformular absenden" steht.

So liebe Leute, nun kommen wir zum eigentlichen PHP Teil. Als ersten fügen wir am Anfang des Editors, also vor dem Formular, folgenden Code ein:

Quelltext:
  1. <?php
  3. ?>
So, nun tragen wir darin folgendes ein:

Quelltext:
  1. if($_POST)
  2. {
  3.      if(isset($_POST['Submit']))
  4.      {
  5.           ...
  6.      }
  7. }
Kurze Erklärung:

Mit if($_POST) prüfen wir, ob irgendwelche Eingaben, Ergebnisse, etc. abgesendet wurden. Das heißt, sobald wir den Absendebutton klicken, ist $_POST == true, also ist vorhanden.
Mit if(isset($_POST['Submit'])) prüfen wir, ob der Absendeknopf betätigt wurde.

Sollten beide Werte false, also nicht der Wahrheit entsprechen, wird ganz normal das Formular angezeigt.

Quelltext:
  1. $name = $_POST['Name'];
  2. $mail = $_POST['Mail'];
  3. $subject = $_POST['Subject'];
  4. $text = $_POST['Msg'];
  6. if($name == '' OR $mail == '' OR $subject == '' OR $text == '')
  7. {
  8.      echo 'Bitte alle Felder ausfüllen.';
  9. }
Mit $string = $_POST['INPUTNAME']; übergeben wir die Werte an Variablen, mit welches dann div. Überprüfungen gemacht werden und am Ende dann in die Mail rein kommen.
Bei der if-Abfrage wird geprüft, ob die Variablen leer sind. Sollte dies der Fall sein, wird eine Fehlermeldung ausgegeben.

Quelltext:
  1. else
  2. {
  3.      $text = htmlentities($text);
  4.      $text = strip_tags($text);
  5.      
  6.      $receiver = 'mailadresse@hoster.domain';
  7.      $header  = 'MIME-Version: 1.0'."\r\n";
  8.      $header .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
  9.      $header .= 'To: EMPFÄNGERNAME <'.$receiver.'>'."\r\n";
  10.      $header .= 'From: Kontaktformular DEINE SEITE <'.$mail.'>'."\r\n";
  12.      mail($receiver, $subject, $text, $header);
  13.      
  14.      echo 'Das Kontaktformular wurde erfolgreich abgesendet.';
  15. }
Mit "htmlentities" werden spezielle Zeichen wie <> in HTML Zeichen konventiert.
Mit "striptags" werden HTML Tags entfernt.
Mit der Variable $receiver = '...' wird der Empfänger bestimmt.
Mit $header wird die Kopfzeile der Mail definiert, dabei wird ein MIME Typ festgelegt, einen Content Type sowie Empfängername und Absender, welches im unserem Falle das Kontaktformular ist.
Mit der Funktion mail() wird dann die Mail abgesendet.
Nach dem absenden der Funktion wird dann eine Ausgaben erstellt.

Hier nochmal der komplette Code:

Quelltext:
  1. <?php
  2.      if($_POST)
  3.      {
  4.           if(isset($_POST['Submit']))
  5.           {
  6.                $name = $_POST['Name'];
  7.                $mail = $_POST['Mail'];
  8.                $subject = $_POST['Subject'];
  9.                $text = $_POST['Msg'];
  10.                
  11.                if($name == '' OR $mail == '' OR $subject == '' OR $text == '')
  12.                {
  13.                     echo 'Bitte alle Felder ausfüllen.';
  14.                }
  15.                else
  16.                {
  17.                     $text = htmlentities($text);
  18.                     $text = strip_tags($text);
  19.                     
  20.                     $receiver = 'mailadresse@hoster.domain';
  21.                     $header  = 'MIME-Version: 1.0'."\r\n";
  22.                     $header .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
  23.                     $header .= 'To: EMPFÄNGERNAME <'.$receiver.'>'."\r\n";
  24.                     $header .= 'From: Kontaktformular DEINE SEITE <'.$mail.'>'."\r\n";
  25.                
  26.                     mail($receiver, $subject, $text, $header);
  27.                     
  28.                     echo 'Das Kontaktformular wurde erfolgreich abgesendet.';
  29.                }
  30.           }
  31.      }
  32. ?>
  33. <html>
  34.      <head>
  35.           <title>Kontaktformular</title>
  36.      </head>
  37.      <body>
  38.           <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
  39.                <table border="0">
  40.                     <tr>
  41.                          <td>Name:</td>
  42.                          <td><input type="text" name="Name" style="width: 300px;"></td>
  43.                     </tr>
  44.                     <tr>
  45.                          <td>E-Mail:</td>
  46.                          <td><input type="text" name="Mail" style="width: 300px;"></td>
  47.                     </tr>
  48.                     <tr>
  49.                          <td>Betreff:</td>
  50.                          <td>
  51.                               <select name="Subject">
  52.                                    <option value="Support">Support</option>
  53.                                    <option value="Anfrage">Anfrage</option>
  54.                                    <option value="other">Sonstiges</option>
  55.                               </select>
  56.                          </td>
  57.                     </tr>
  58.                     <tr>
  59.                          <td>Nachricht:</td>
  60.                          <td><textarea name="Msg" style="width: 300px; height: 175px;"></textarea></td>
  61.                     </tr>
  62.                     <tr>
  63.                          <td></td>
  64.                          <td><input type="submit" name="Submit" value="Kontaktformular absenden"></td>
  65.                     </tr>
  66.                </table>
  67.           </form>
  68.      </body>
  69. </html>
Ich hoffe euch hat das Tutorial gefallen. Bei fragen meldet euch bitte hier, auch Anregungen können hier gepostet werden.
Mit freundlichen Grüßen

BlackBonjour

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
08.10.2012, 19:28 - Amaury - Administrator - 2134 Beiträge
Eben drüber geschaut und getestet.
Hast du dein Code getestet? Den bei mir spuckt diese Zeile einen Error:

Quelltext:
  1. $text = striptags($text);


[ALIGN=center][b]Jannes ist der Beste![/b] [HR][img]http://gameshots.eu/images/2016/05/31/388c4ca8e497903ae8ef8b6a0222e0d4.jpg[/img] [br][URL=http://www.gameshots.eu][B]Game[/B]shots.[i]eu[/i][/URL][/align]
 
08.10.2012, 21:20 - BlackBonjour - Administrator - 1160 Beiträge
Ist das der Kontaktformular? Sicherlich oder. Also das ganze ist theoretisch, also nicht getestet. Werd mich mal gleich ran setzen und gucken was da falsch ist bzw. müsste es daran liegen, dass ich ausversehen striptags anstatt strip_tags geschrieben haben. Ich werd das ganze noch auf weitere Fehler prüfen. Danke für den Hinweis.



EDIT: Funktioniert jetzt einwandfrei. Ist aber wie schon geschrieben nur ein sehr simpler Kontaktformular. Fehler war auch wie bereits erwähnt der strip_tags, der Rest funktioniert.

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
18.10.2012, 21:06 - BlackBonjour - Administrator - 1160 Beiträge
Da es hier bisher nur um Website ging, möchte ich bei dem Thema bleiben und euch die SEO Optimierung näher bringen.

Was ist SEO Optimierung?

SEO Optimierung dient der Pageranking. Je höher das Pageranking ist, umso eher wird man z.B. bei der Google Suche gefunden. Dabei gehört zur SEO Optimierung nicht nur die Keywords oder die Beschreibgung, sondern noch viel mehr.

Kurz gesagt gehören zur SEO Optimierung die Komprimierung, richtige Meta Daten, die richtige Auswahl des charsets, kein bis wenig Spagetti Code, ein valider HTML Code sowie CSS Code, bei Bildern ein Alternativ Text, bei Links ein Titel Attribut, eine robots.txt, eine sitemap.xml usw..

Die Komprimierung kann man verschieden machen. Wer z.B. CMS Systeme wie Wordpress benutzt, muss sich da eig. keine große Sorgen machen, den die machen das dort automatisch. Ansonsten kann man dies durch eine .htaccess machen. Der Code würde so aussehen:

Quelltext:
  1. <IfModule mod_deflate.c>
  2. <FilesMatch "\\.(js|css|html|xml|php)$">
  3. SetOutputFilter DEFLATE
  4. </FilesMatch>
  5. </IfModule>
Mit diesem Code werden Javascripts, CSS, HTML, XML und PHP Dateien komprimiert. Die Komprimierung bewirkt eine schnellere Ladezeit, was vorallem für Besucher mit geringerer Internetgeschwindigkeit von Vorteil ist.

Für die Meta Tags gilt, nur das nötigste rein, der Rest kann von Bots als Spam markiert werden. So sollte man bei den Keywords darauf achten, dass diese nicht mehr als 10 Wörter sind, minimum solten es aber schon 4 - 6 sein. Bei den Beschreibungen gilt, min. 120 Zeichen, max. 160 Zeichen und max. 2 Sätze. Die Beschreibung wird bei der Google Suchmaschine angezeigt. Keywords und Beschreibung sollten die Website möglichst gut beschreiben/wiederspiegeln.

Den Rest werd ich hier mal posten:

Quelltext:
  1.           <title>SEITENTITEL</title>
  2.           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3.           <meta http-equiv="Content-Style-Type" content="text/css" />
  4.           <meta http-equiv="Content-Script-Type" content="text/javascript" />
  5.           <meta name="copyright" content="DEIN COPYRIGHT" />
  6.           <meta name="author" lang="LÄNDERKÜRZEL, FÜR DEUTSCHLAND "de" content="DER AUTOR DER WEBSITE" />
  7.           <meta name="robots" content="Index,Follow" />
  8.           <meta name="description" content="HIER KOMMT DIE BESCHREIBUNG DEINER WEBSITE" />
  9.           <meta name="keywords" content="HIER KOMMEN DIE KEYWORDS DEINER WEBSITE" />
  10.           <meta http-equiv="cache-control" content="no-cache" />
  11.           <meta http-equiv="pragma" content="no-cache" />
Was auch ziemlich auf den Magen geht sind Spagetti Codes. Spagetti ist zwar lecker, aber der Browser mag sie nicht. Als Spagehtti Codes gelten z.B. Style Attribute:

Quelltext:
  1. <a href="#" style="ICH STYLE MAL DEN GANZEN LINK MIT DEM STYLE ATTR, SCHADET JA NICHT xD">Bla</a>
Auch Elemente wie <b></b> oder <i></i> gehören zum Spagetti Code und sollten, wenn möglich, vermieden werden.

Was auch wichtig ist ist die Auswahl des richtigen charsets und der HTML Version. Es wird empfohlen XHTML zu verwenden, oder wer möchte XHTML 1.1. Wer hat XHTML verwendet erhält laut seitenreport.de eine 80% gute Bewertung, bei richtig angewendeter XHTML 1.1 laut seitenreport.de 100%.

Desweiteren sollte man den HTML Code Fehlerfrei schreiben. Dabei ist zu beachten, dass im Gegensatz zu HTML 4 ein Zeilenumbruch mit <br /> anstatt <br> erzeugt wird. Im Allgemeinen gilt, dass XHTML Elemente sich selbst schließen müssen, wenn diese nicht aus zwei Teilen bestehen wie z.B. Link Elemente ( <a> ).

Desweiteren sollte man bei Bildern immer einen Alternativ Text ( alt=" ") angeben, den es kann vorkommen, dass bei älteren Browsern z.B. die Bilder später geladen werden oder überhaupt nicht. Dann sollte stattdessen ein Text erscheinen. Bei Links gilt, dass diese einen Titel Element beinhalten sollten.

Okay... man muss das Ganze nicht umbedingt erfüllen um eine gute Platzierung zu bekommen, aber es ist von Vorteil.

In meinen Augen ist eleven-games.net ein sehr gutes Beispiel. Es hat täglich 1000 Besucher, wer Cobra 11 Addons eingibt bekommt zich Links von eleven-games.net angezeigt. Aber der Schein trübt. Laut seitoskop.de hat diese Website trotz guter Platzierung nur 46% erreicht.

Und damit kommen wir zum wichtigsten Punkt der SEO Optimierung, der Inhalt.

eleven-games lebt hauptsächlich vom Inhalt, weshalb diese Seite auch diese richtig gute Platzierung hat. Da würde ich zum Beispiel mit meiner Website auch nach mehreren Monaten und Jahren einfach nicht rankommen, trotz meiner 100% Bewertung und weiß der Geier was. Was ich damit sagen möchte, achtet immer auf euren Inhalt, den nur damit könnt ich potenzielle Besucher bekommen.

Ich hoffe euch gefällt der Beitrag und ich würde mich über Kommentare, Kritik, etc. freuen. Also posten, posten, posten wink

LINKS:

W3C BlackBonjour: http://validator.w3.or...i=blackbonjour.square7.ch
W3C eleven-games: http://validator.w3.or...&uri=eleven-games.net
Seitoskop BlackBonjour: http://www.seitoskop.d...l=blackbonjour.square7.ch
Seitoskop eleven-games: http://www.seitoskop.d...even-games.net/index.phpt

Ich möchte noch hier eine Anmerkung hinterlassen:

Ich möchte hiermit jetzt nicht eleven-games schlecht darstellen, im Gegensatz, diese Links sagen garnichts aus, den wie schon geschrieben kommt es hauptsächlich auf den Inhalt an, und da schneiden Seiten wie eleven-games am besten ab.

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
21.11.2012, 20:56 - BlackBonjour - Administrator - 1160 Beiträge
Schade das hier keine Interesse besteht, dadurch, dass hier kaum was geschrieben wird, kann ich leider nicht erfahren, wo eure Interessen liegen, was ich verbessern könnte, oder was ihr nicht versteht u.s.w.

Daher würd ich mich jetzt freuen, wenn ihr Mal schreiben könntet, was ihr den "lernen" wollt im Bereich HTML / CSS / PHP / jQuery. Ich steht euch jeder Frage zur Verfügung, also postet was das Zeug hält.

Ansonsten hat ich vor, wenn den Interesse besteht, wie man mit Hilfe von CSS, PHP und Javascript eine kleine Bildergalerie machen kann. Dabei werden die Bilder wie man es von Instagram kennt viereckig angezeigt, was ja garnicht so schlecht aussieht, dabei ist es egal, ob euer Bild Hoch- oder Querformat ist. Wenn nöitg kann ich auch eine kleine Demo vorbereiten.
Mit freundlichen Grüßen

BlackBonjour

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
22.11.2012, 14:08 - AfP38 - Profi - 361 Beiträge
BlackBonjour schrieb:
...
Ansonsten hat ich vor, wenn den Interesse besteht, wie man mit Hilfe von CSS, PHP und Javascript eine kleine Bildergalerie machen kann. Dabei werden die Bilder wie man es von Instagram kennt viereckig angezeigt, was ja garnicht so schlecht aussieht, dabei ist es egal, ob euer Bild Hoch- oder Querformat ist. Wenn nöitg kann ich auch eine kleine Demo vorbereiten.
Mit freundlichen Grüßen

BlackBonjour
Hi, BlackB.
Ich dachte, ich gehe mal auf deinen Wunsch ein:
Ja, mach doch mal eine Bilder Galerie mit Javascript, CSS und PHP. Also ich finde es gut was du uns erklären willst. Schön wäre auch, wenn du erklärst, wie man einen beleglichen Header für Seine Website baut. Sowas wie hier oben auf EG mit dem <--hin--und--her--> . Und wie man da dann Hyperlinks drauf setzt.

LG



Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)
 
22.11.2012, 18:10 - BlackBonjour - Administrator - 1160 Beiträge
Hi AFP, ich wei jetzt nicht was du mit beweglichen Header meinst. Meinst nen Slider, einen festen Feld am oberen Rand (eg Mobile) oder Lauftext? Slider und Lauftext sind mittels Javascript hinzukriegen, welches ich später schreiben könnte. Wenn du den festen Feld meinst, danb musste per Css dem HTML Element nen position: fixed zuweisen und am besten noch top: 0.

Edit: Slider Bigggrin Mach noch heute schnell, dauert ja nicht lange.

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
22.11.2012, 18:13 - ///M - Experte - 939 Beiträge
Er meint das mit der Aktuellen Datenbank und dem Manager von Germany FloV., wo sich das Bild immer hin und her bewegt. Das mit der roten Update-Schrift und so. wink

[align=center][url=https://www.youtube.com/channel/UC0OrFj7LbrxEdZ0ok28VEjw][b][YouTube][/b] Taniell[/url] [hr] [img]https://abload.de/img/bmw_m4_green_signaturh9ktl.png[/img][/align]
 
22.11.2012, 18:30 - AfP38 - Profi - 361 Beiträge
ja, wie ///M schon sagte, meine ich das mit der Aktuellsten DB und dem Addon-Database-Programm, was sich immer bewegt siehe oben.
http://eleven-games.net/images/sliders/22.jpg und http://eleven-games.net/images/sliders/1.jpg.

Wäre nett wenn du sowas machst.

Und kannst du erklären, wie man Downloads macht. Dass ich z.B. auf Das Bild klicke (Hyperlink auf Bild gelegt) und das Bild dann nicht in einem neuen Tab oder auf einer einzelnen Seite angezeigt wird, sondern dann gleich gedownloadet wird. Bräuchte ich für .psd Dateien, da mein Browser sie nicht anzeigen kann.

LG

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)
 
22.11.2012, 19:57 - Amaury - Administrator - 2134 Beiträge
BlackBonjour schrieb:
Laut seitoskop.de hat diese Website trotz guter Platzierung nur 46% erreicht.
[...]
Seitoskop eleven-games: http://www.seitoskop.d...even-games.net/index.phpt
Nun haben wir 54.42 % blum

EDIT: Bezüglich den Slider: http://www.1stwebdesig...script-sliders-scrollers/
Der Einbau eines Slider ist sehr leicht, normalerweise ist eine Installationsanleitung im Download vorhanden ;-)

@BB: Komm mal bitte in Skype.

[ALIGN=center][b]Jannes ist der Beste![/b] [HR][img]http://gameshots.eu/images/2016/05/31/388c4ca8e497903ae8ef8b6a0222e0d4.jpg[/img] [br][URL=http://www.gameshots.eu][B]Game[/B]shots.[i]eu[/i][/URL][/align]
 
22.11.2012, 20:34 - BlackBonjour - Administrator - 1160 Beiträge
Amaury schrieb:
Nun haben wir 54.42 % blum
Gefällt mir smile Es gibt allerdings auch viele Sachen, die man schnell machen kann wie eine www.-Umleitung, das verhindert doppelten Content bzw. auf Seitoskop.de "keine Standart Domain".
Aber so oder so, eg bleibt wohl Nummer 1, wenn es um C11 Addons geht.

Zum Slider, als erstes kannst du dir jCycle runterladen sowie jQuery, welches nicht nur für Sliders eignen, sondern auch viele nützliche Funktion haben.
Nun, nach der Installation erstellst du mittels HTML deinen "Slider".

Quelltext:
  1. <html>
  2.      <head>
  3.           <!-- jQuery und jCycle einbinden -->
  4.      </head>
  5.      <body>
  6.           <div id="slider">
  7.                <div class="slide">
  8.                     <img class="sliderimg" scr="DEIN BILDLINK" alt="DEIN ALTERNATIVTEXT" />
  9.                </div>
  10.                <div class="slide">
  11.                     <img class="sliderimg" scr="DEIN BILDLINK" alt="DEIN ALTERNATIVTEXT" />
  12.                </div>
  13.                <div class="slide">
  14.                     <img class="sliderimg" scr="DEIN BILDLINK" alt="DEIN ALTERNATIVTEXT" />
  15.                </div>
  16.                <div class="slide">
  17.                     <img class="sliderimg" scr="DEIN BILDLINK" alt="DEIN ALTERNATIVTEXT" />
  18.                </div>
  19.           </div>
  20.      </body>
  21. </html>
So könnte halt dein Slidergerüst ungefähr aussehen. Als nächstes fügen wir dann in den Headbereich das Javascript bzw. jQuery und jCycle:

Quelltext:
  1. <html>
  2.      <head>
  3.           <!-- jQuery und jCycle einbinden -->
  4.           <script type="text/javascript" src="/LINK/ZUM/SCRIPT/jquery.js"></script>
  5.             <script type="text/javascript" src="/LINK/ZUM/SCRIPT/jcycle.js"></script
  6.             <script type="text/javascript">
  7.                  $(document).ready(function()
  8.                {                    
  9.                     $("<a href="index.php?site=hashtag&tag=slider">#slider</a>").cycle(
  10.                     { 
  11.                          fx: "scrollHorz",
  12.                          speed: "750",
  13.                          timeout: "2000",
  14.                          pause: "1"
  15.                     });
  16.                });
  17.             </script>
  18.           <!-- / Ende jQuery und jCycle -->
  19.      </head>
  20.      <body>
  21.           ...
  22.      </body>
  23. </html>
Kurze Erklärung:

Mit " $('#slider')... " sprechen wir das Div mit der id slider an. Danach kommt die funktion "cycle", welches wir runtergeladen habe. In dieser Funktion gibts dann eigentlich nicht viel zu sagen, "fx" ist die Art des Slides, "speed" ist die Slidegeschwindigkeit, "timeout" die Pause bzw. Zeit zwischen den slides und "pause: 1" heißt, dass wenn man mit der Maus drüber fährt, dass der Slider pausiert.

Wer das ganze als Joomla Plugin von mir sehen möchte, kann www.aappartel.de besuchen, jCycle ist schon ne dolle Sache smile

jQuery: http://jquery.com/download/
jCycle: : http://jquery.malsup.com/cycle/download.html

Die Bildergalerie werd ich vllt noch heute Abend machen, ansonsten die nächsten Tagen, ist etwas komplexer wink

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
23.11.2012, 14:43 - AfP38 - Profi - 361 Beiträge
Jepp, dass werde ich gleich mal ausprobieren. Wenns funktioniert, dann hast du ne gute Bewertung von mir.

Da fällt mir ein, dass es eine Möglichkeit geben sollte, um solche Beiträge, wie diese zu bewerten.

@Amaury: Ich habs gerade ausprobiert, aber Seitoskop zeigt bei Eleven-games.net 58.45 % an.

http://img4.fotos-hochladen.net/uploads/snap20121123fke34z5txl.jpgLG

EDIT: [toggle=Schaut euch mal RTL-Now und Cobra11games an]
http://img3.fotos-hochladen.net/uploads/snap20121123e8qxph5gn7.jpghttp://img4.fotos-hochladen.net/uploads/snap20121123f8uyrz5sla.jpg[/toggle]

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)
 
23.11.2012, 14:57 - ///M - Experte - 939 Beiträge
Macht euch nichts raus, Google hat auch nicht viel besser abgeschnitten: 59.52 %

http://s1.directupload.net/images/121123/pwi7edex.png

[align=center][url=https://www.youtube.com/channel/UC0OrFj7LbrxEdZ0ok28VEjw][b][YouTube][/b] Taniell[/url] [hr] [img]https://abload.de/img/bmw_m4_green_signaturh9ktl.png[/img][/align]
 
23.11.2012, 15:44 - AfP38 - Profi - 361 Beiträge
aber dafür ist BlackBs Website sehr gut. Er hat hervorragende Arbeit geleistet:

http://img4.fotos-hochladen.net/uploads/snap2012112386pxkzjn0v.jpgEr kann seine Wertung ja auf der Seite einbauen wink

LG

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)
 
23.11.2012, 18:05 - BlackBonjour - Administrator - 1160 Beiträge
Die großen Seiten braucht ihr meisten nicht kontrollieren, denen ist nur die Optik wichtig, da passiert sowas halt schnell.

Die 100% dich ich habe waren auch einfach zu realisieren, ich hab ja nur eine kleine Seite und kann wirklich bis in die kleinstesten Ecken der Website rein und alles so drehen wie ich es haben möchte. Genau so auch alle anderen Websites die ich mache, nur sobald Sachen wie Wordpress, Joomla oder wie hier webspell, ist es schon schwieriger sowas anzupassen, vorallem wenn es darum geht Spaghetti Codes zu entfernen bzw. zu ersetzen. Das macht dann wirklich kein Spaß, große Plugins z.B. zu bearbeiten, vorallem wenn vom Autor ständig neue Updates kommen.

Aber da ich es beruflich mache und auch später machen werde, bin ich da wohl selber schuld xD

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
23.11.2012, 21:46 - ///M - Experte - 939 Beiträge
Ich habe mal abgefangen mir eine Website zu machen: Back-Slash.square7.ch

[align=center][url=https://www.youtube.com/channel/UC0OrFj7LbrxEdZ0ok28VEjw][b][YouTube][/b] Taniell[/url] [hr] [img]https://abload.de/img/bmw_m4_green_signaturh9ktl.png[/img][/align]
 
23.11.2012, 21:55 - DerTürkischeHengst - Experte - 585 Beiträge
Sieht doch gut aus. Mal so ne Frage wo bekommt man die analyse her?
Ansonten recht gut.

MFG Hengst
 
23.11.2012, 22:47 - BlackBonjour - Administrator - 1160 Beiträge
Wordpress ist eine sehr gute Wahl, sehr benutzerfreundlich und leicht zu bearbeiten. Ich denke mal du wirst ne Galerie verwenden, da kann ich dir NextGenGallery empfehlen. Wenn du fragen zu Wordpress kannste du dich ruhig an mich wenden, kenn das Teil schon so gut wie auswendig :P

EDIT: Fast hätte ich es vergessen, das TwentyEleven Design würd ich eig. nicht so nehmen, man hat zwar viele Einstellungsmöglichkeiten, aber schön ist es nicht wirklich und eigene Designs sind schnell gemacht und die Integration super einfach. Ansonsten gibt es noch viele kostenlose Templates für Wordpress, die einiges zu bieten haben.

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
23.11.2012, 23:09 - AfP38 - Profi - 361 Beiträge
@///M: Wie hast du das mit dem Download gemacht. Einfach mit der Datei verlinkt? Oder war das schon vorhanden?

Ich habe nur gerade keine Zeit, um es selber auszuprobieren. Funktioniert das auch mit Bildern (.jpg ; .png ; ...)

Schade, dass niemand weiß, wie ich Addon Scenarien machen muss...

LG

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)
 
24.11.2012, 09:36 - ///M - Experte - 939 Beiträge
@AfP38: Man kann irgendwo da auf den Webspace ne Datei hochladen und dann direkt drauf verlinken. wink

[align=center][url=https://www.youtube.com/channel/UC0OrFj7LbrxEdZ0ok28VEjw][b][YouTube][/b] Taniell[/url] [hr] [img]https://abload.de/img/bmw_m4_green_signaturh9ktl.png[/img][/align]
 
24.11.2012, 11:13 - BlackBonjour - Administrator - 1160 Beiträge
Naja fast. Wenn du Bilder direkt verlinkst, dann werden die angwzeigt anstatt das der Download startet, auser bmp Dateien. Ich hab mich nie damit beschäftigt, aber ich hätte selber interesse das mal rauszufinden.

EDIT: Bildergalerie TUT

*** Bildergalerie - Demo ***

Bildergalerie Demo

Es wird gearbeitet mit:

- HTML
- CSS
- PHP

Es wird verwendet:

- Lightbox ( angepasste Version* )

** Vorbereitung **

Als erstes werden wir unsere Galerie mittels HTML erstellen. Diese könnte wie folgt aussehen:

Quelltext:
  1. <html>
  2.      <head>
  3.           <title>Meine erste Bildergalerie</title>
  4.           <!-- Unsere CSS für die Bildergalerie -->
  5.           <style type="text/css">
  6.                <!--
  7.                
  8.                -->
  9.           </style>
  10.      </head>
  11.      <body>
  12.           <div id="images">
  13.                <!-- Beginn der Bildergalerie -->
  14.                
  15.                <!-- Ende der Bildergalerie -->
  16.           </div>
  17.      </body>
  18. </html>
So, dass wars erstmal, den CSS werden am Ende machen, der fehlende HTML werden wir mittels PHP dynamisch erstellen.

** PHP **

Wie schon geschrieben, werden wir mit PHP arbeiten, und das nicht zu wenig. Als erstes werden wir ein paar Konfigurationen machen.

Quelltext:
  1.      $maxwidth = 200; // !!! WICHTIG !!! ohne ---> px <--- / maximale Breite der Bilder
  2.      $maxheight = 200; // maximale Höhe der Bilder
  4.      $bilderarray = array('bild1.jpg', 'bild2.jpg', 'bild3.jpg', 'bild4.jpg'); // Array mit den Namen der Bilder, OHNE Verzeichnispfad
  6.      $verzeichnisstruktur = '/DER ABSOLUTE PFAD ZU DEN BILDER/'; // Bsp. für square7: /users/DEIN BENUTZERNAME/www/DEIN BILDVERZEICHNIS/
Was welche Funktion macht, kann man ja schon in den Kommentaren lesen und müsste auch leicht zu verstehen sein. Wichtig ist, das bei $verzeichnisstrutkur NICHT die URL angegeben wird, sondern der Absolute Pfad.
So, als nächstes werden wir die Bildinformationen holen und div. überprüfungen machen.

Quelltext:
  1.      foreach($bilderarray as $bild)
  2.      {
  3.           $getImageSize = getimagesize($verzeichnisstruktur.$bild); // hole die Bildinformationen
  4.           
  5.           $bildwidth = $getImageSize[0]; // Bildbreite
  6.           $bildheight = $getImageSize[1]; // Bildhöhe
  7.           
  8.           if($bildwidth > $bildheight) // wenn breiter als höhe
  9.           {
  10.                if($bildheight > $maxheight) // wenn höher als erlaubt
  11.                {
  12.                     $bildheight_new = $maxheight; // neue höhe
  13.                     $prozentual = $maxheight / $bildheight;
  14.                     
  15.                     $bildwidth_new = $bildwidth * $prozentual; // neue breite
  16.                     
  17.                     $imgRest = ($bildwidth_new - $maxwidth) / 2; // mathematische Funktion für die spätere CSS, dazu später mehr
  18.           
  19.                     $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildheight_new.'px, '.($imgRest + $maxwidth).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  20.                }
  21.                else
  22.                {
  23.                     $imgRest = ($bildwidth - $bildheight) / 2;
  24.                     
  25.                     $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildheight_new.'px, '.($imgRest + $maxwidth).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  26.                }
  27.           }
  28.           else if($bildheight > $bildwidth) // wenn höher als breite
  29.           {
  30.                if($bildwidth > $maxwidth) // wenn breiter als erlaubt
  31.                {
  32.                     $bildwidth_new = $maxwidth;
  33.                     $prozentual = $maxwidth / $bildwidth;
  34.                     
  35.                     $bildheight_new = $bildheight * $prozentual;
  36.                     
  37.                     $imgRest = ($bildheight_new - $maxheight) / 2;
  38.           
  39.                     $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildwidth_new.'px, '.($imgRest + $maxheight).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  40.                }
  41.                else
  42.                {
  43.                     $imgRest = ($bildheight - $bildwidth) / 2;
  44.                     
  45.                     $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildbreite_new.'px, '.($imgRest + $maxheight).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  46.                }
  47.           }
Das ganze sieht jetzt etwas verwirrend aus, aber es im Allgemeinen doch recht simpel. Als erstes holen wir die Bildinformationen mit "getimagessize()", dann werden die verschiedenen Werte in Variablen gespeichert und durhc verschiedene IF-Anweisungen gejagt.
Dabei wird geprüft, ob das Bild höher oder breiter ist und dem entsprechend angepasst. Ist ein Bild breiter, so wird die Höhe auf das maximale angepasst und die breite wird mittels CSS clip Funktion etwas ausgeschnitten, damit wir später viereckige Bilder haben.
Man kann das ganze auch mit PHP ein ganz neues Bild davon machen, aber das dauert dann zu lange und mit CSS ist das ganze einfach und man kann es besser anpassen.

Jetzt fehlt eigentlich nur noch die Ausgabe, sowie die CSS Formatierung.

** PHP - Ausgabe **

Quelltext:
  1.      echo '     <div class="media">
  2.                                    <div class="picture">
  3.                                              <a rel="lightbox[media]" href="/PFAD ZUM BILD - !!!URL!!! ABER OHNE HTTP ODER WWW/'.$bild.'" title="'.$bild.'">
  4.                                                   <img src="/PFAD ZUM BILD - !!!URL!!! ABER OHNE HTTP ODER WWW/images/'.$bild.'" width="'.$bildwidth_new.'" height="'.$bildheight_new.'" alt="'.$bild.'" title="'.$bild.'" '.$css.' />
  5.                                              </a>
  6.                                         </div>
  7.                                         '.$bild.'
  8.                               </div>';
  9.      }
Ich denke mal, dazu muss ich nicht viel sagen, ich glaub das meiste hab ich schon in den ersten TUT's erzählt. Die verschachtelung hat einen Sinn, den wir später sehen werden.

** CSS **

Wie man im Headbereich sehen kann, finden wir dort den style-Tag. In diesen werden wir nun folgendes einfügen:

Quelltext:
  1.                <a href="index.php?site=hashtag&tag=images">#images</a> {
  2.                     padding: 0;
  3.                     overflow: auto;
  4.                }
  5.                
  6.                .media {
  7.                     margin: 10px 10px 5px;
  8.                     padding: 5px 5px 30px;
  9.                     background-color: <a href="index.php?site=hashtag&tag=FFF">#FFF</a>;
  10.                     color: <a href="index.php?site=hashtag&tag=333">#333</a>;
  11.                     font-family: "times new roman", serif;
  12.                     font-size: 13px;
  13.                     text-align: center;
  14.                     line-height: 2em;
  15.                     position: relative;
  16.                     overflow: hidden;
  17.                     float: left;
  18.                     box-shadow: 0 2px 5px -2px <a href="index.php?site=hashtag&tag=222">#222</a>;
  19.                }
  20.                
  21.                .media:hover {
  22.                     box-shadow: 0 2px 2px -2px <a href="index.php?site=hashtag&tag=222">#222</a>;
  23.                }
  24.                
  25.                .picture {
  26.                     overflow: hidden;
  27.                }
  28.                
  29.                .media, .picture {
  30.                     width: 200px;
  31.                     height: 200px;
  32.                }
Die CSS ist so angepasst, dass man am Ende die Bilder einen Polariod "Effekt" bzw. aussehen haben. Dies kann natürlich nach belieben angepasst werden.

** OVERVIEW **

Quelltext:
  1. <html>
  2.      <head>
  3.           <title>Meine erste Bildergalerie</title>
  4.           <!-- Unsere CSS für die Bildergalerie -->
  5.           <style type="text/css">
  6.                <!--
  7.                     <a href="index.php?site=hashtag&tag=images">#images</a> {
  8.                          padding: 0;
  9.                          overflow: auto;
  10.                     }
  11.                     
  12.                     .media {
  13.                          margin: 10px 10px 5px;
  14.                          padding: 5px 5px 30px;
  15.                          background-color: <a href="index.php?site=hashtag&tag=FFF">#FFF</a>;
  16.                          color: <a href="index.php?site=hashtag&tag=333">#333</a>;
  17.                          font-family: "times new roman", serif;
  18.                          font-size: 13px;
  19.                          text-align: center;
  20.                          line-height: 2em;
  21.                          position: relative;
  22.                          overflow: hidden;
  23.                          float: left;
  24.                          box-shadow: 0 2px 5px -2px <a href="index.php?site=hashtag&tag=222">#222</a>;
  25.                     }
  26.                     
  27.                     .media:hover {
  28.                          box-shadow: 0 2px 2px -2px <a href="index.php?site=hashtag&tag=222">#222</a>;
  29.                     }
  30.                     
  31.                     .picture {
  32.                          overflow: hidden;
  33.                     }
  34.                     
  35.                     .media, .picture {
  36.                          width: 200px;
  37.                          height: 200px;
  38.                     }
  39.                -->
  40.           </style>
  41.      </head>
  42.      <body>
  43.           <div id="images">
  44.                <!-- Beginn der Bildergalerie -->
  45.                
  46.                $maxwidth = 200; // !!! WICHTIG !!! ohne ---> px <--- / maximale Breite der Bilder
  47.                $maxheight = 200; // maximale Höhe der Bilder
  48.           
  49.                $bilderarray = array('bild1.jpg', 'bild2.jpg', 'bild3.jpg', 'bild4.jpg'); // Array mit den Namen der Bilder, OHNE Verzeichnispfad
  50.           
  51.                $verzeichnisstruktur = '/DER ABSOLUTE PFAD ZU DEN BILDER/'; // Bsp. für square7: /users/DEIN BENUTZERNAME/www/DEIN BILDVERZEICHNIS/
  52.                
  53.                foreach($bilderarray as $bild)
  54.                {
  55.                     $getImageSize = getimagesize($verzeichnisstruktur.$bild); // hole die Bildinformationen
  56.                     
  57.                     $bildwidth = $getImageSize[0]; // Bildbreite
  58.                     $bildheight = $getImageSize[1]; // Bildhöhe
  59.                     
  60.                     if($bildwidth > $bildheight) // wenn breiter als höhe
  61.                     {
  62.                          if($bildheight > $maxheight) // wenn höher als erlaubt
  63.                          {
  64.                               $bildheight_new = $maxheight; // neue höhe
  65.                               $prozentual = $maxheight / $bildheight;
  66.                               
  67.                               $bildwidth_new = $bildwidth * $prozentual; // neue breite
  68.                               
  69.                               $imgRest = ($bildwidth_new - $maxwidth) / 2; // mathematische Funktion für die spätere CSS, dazu später mehr
  70.                     
  71.                               $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildheight_new.'px, '.($imgRest + $maxwidth).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  72.                          }
  73.                          else
  74.                          {
  75.                               $imgRest = ($bildwidth - $bildheight) / 2;
  76.                               
  77.                               $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildheight_new.'px, '.($imgRest + $maxwidth).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  78.                          }
  79.                     }
  80.                     else if($bildheight > $bildwidth) // wenn höher als breite
  81.                     {
  82.                          if($bildwidth > $maxwidth) // wenn breiter als erlaubt
  83.                          {
  84.                               $bildwidth_new = $maxwidth;
  85.                               $prozentual = $maxwidth / $bildwidth;
  86.                               
  87.                               $bildheight_new = $bildheight * $prozentual;
  88.                               
  89.                               $imgRest = ($bildheight_new - $maxheight) / 2;
  90.                     
  91.                               $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildwidth_new.'px, '.($imgRest + $maxheight).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  92.                          }
  93.                          else
  94.                          {
  95.                               $imgRest = ($bildheight - $bildwidth) / 2;
  96.                               
  97.                               $css = 'style="clip: rect(0, '.$imgRest.'px, '.$bildbreite_new.'px, '.($imgRest + $maxheight).'px); margin: 0 0 0 -'.$imgRest.'px;"';
  98.                          }
  99.                     }
  100.                }
  101.                
  102.                <!-- Ende der Bildergalerie -->
  103.           </div>
  104.      </body>
  105. </html>
Das müsste es eigentlich sein. Alles ohne Gewär, heißt es kann sein, dass ich beim kopieren ein Fehler gemacht habe, dann einfach bescheid sagen. Aber an der Demo sieht man ja, wie es am Ende aussehen wird.
Mit freundlichen Grüßen

BlackBonjour


Anhang:

Lightbox = Download

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]
 
28.01.2017, 22:51 - BlackBonjour - Administrator - 1160 Beiträge
Nach einigen Jahren reaktiviere ich mal diesen Thread und versuche, diesen in, mehr oder minder, regelmäßigen Abständen fortzuführen. Ihr könnt hier ja weiterhin auch interessante Sachen posten.

Heute gibt es einen kleinen Skript von mir, um x-beliebige Zeichenketten in SEO freundliche ASCII Zeichen umzuwandeln. Ich werde im Verlauf dieses Tutorials das Wort String verwenden, da es sich hier um die Skriptsprache PHP handelt. Anderswo sind Strings auch als Varchar (SQL) oder Charset (?) bekannt.

Zuallererst einmal den kompletten Code, der wie folgt aussieht:

Quelltext:
  1. $string    = 'Einige Wörter, die zusammen einen nicht SEO freundlichen String bilden.';
  2. $replace   = [];
  3. $delimiter = '-';
  5. if( empty($replace) === false) {
  6.     $string = str_replace((array)$replace, ' ', $string);
  7. }
  9. $clean = iconv('UTF-8', 'ASCII//TRANSLIT', $string);
  10. $clean = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $clean);
  11. $clean = strtolower(trim($clean, '-'));
  12. $clean = preg_replace("/[\/_|+ -]+/", $delimiter, $clean);
In der Variable $string haben wir nun also unseren String, den wir säubern wollen.

Die Variable $replace ist ein Array, welches Zeichen enthalten kann, welche wir in einen Leerzeichen umwandeln wollen. Diese werden dann später durch Bindestriche ersetzt ("-", siehe $delimiter).

Mit der Variable $delimiter geben wir an, durch welchen Zeichen wir die Sonderzeichen im unseren String ersetzen wollen. Für URL Pfade werden in der Regel Bindestriche verwendet, ihr könnt natürlich auch was anderes verwenden.

So, nun aber die wichtigen Prozesse:

In Zeile 9 konvertieren wir unseren UTF-8 String ins ASCII. Buchstaben wir Ä, Ö oder Ü werden jeweils zu A, O und U umkonventiert.

In Zeile 10 werden dann anschließend alle ungewollten Sonderzeichen geschlöscht bzw. durch Nichts ersetzt. Lediglich die Sonderzeichen "/", "_", "|", "+", " ", und "-" bleiben erhalten, welchen wir in Zeile 12 durch unseren $delimiter ersetzen.

In Zeile 11 wird dann nur noch unser String auf Kleinbuchstaben umgestellt (lowercase) und führende (leading) sowie endende (trailing) Bindestriche gelöscht, sodass unser String mit einem Buchstaben/einer Zahl beginnt und/oder endet.

Am Ende sollte unser String $string dann wie folgt aussehen:

einige-worter-die-zusammen-einen-nicht-seo-freundlichen-string-bilden

Um diesen Code nicht immer wieder neu schreiben zu müssen, kann man diesen natürlich auch in eine Funktion, oder noch besser, in eine Hilfsklasse packen. Ihr findet nachfolgend den Code, wie er aktuell bei mir zum Einsatz kommt:

Quelltext:
  1. <?php
  2. namespace Application\Classes\Helper;
  4. /**
  5.  * Charset helper
  6.  *
  7.  * @author      Erick Dyck <xxx@xxx.xxx>
  8.  * @since       28.01.2017
  9.  * @copyright   (c) Erick Dyck 2017
  10.  */
  11. class Charset
  12. {
  13.     /**
  14.      * Convert UTF-8 to ASCII
  15.      *
  16.      * @param   string  $string
  17.      * @param   array   $replace
  18.      * @param   string  $delimiter
  19.      * @return  string
  20.      */
  21.     public static function toAscii($string, $replace = [], $delimiter = '-')
  22.     {
  23.         if( empty($replace) === false) {
  24.             $string = str_replace((array)$replace, ' ', $string);
  25.         }
  27.         $clean = iconv('UTF-8', 'ASCII//TRANSLIT', $string);
  28.         $clean = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $clean);
  29.         $clean = strtolower(trim($clean, '-'));
  30.         $clean = preg_replace("/[\/_|+ -]+/", $delimiter, $clean);
  32.         return $clean;
  33.     }
  34. }
Klein, aber fein. So könnt ihr nun x-beliebige Namen, Titel, was auch immer zu SEO freundliche URLs umwandeln.

Mit freundlichen Grüßen

BlackBonjour

--

P.S.: Ich habe in diesem Tutorial für Arrays die neue Schreibweise mit den eckigen Klammern verwendet. Bevor ihr dies übernimmt, prüft erstmal, ob eure PHP Version dies unterstützt. Die PHP Version kriegt ihr über phpinfo() oder über diverse Konstanten und Funktionen. Die eckigen Klammern sind ab PHP 5.4 verfügbar.

[center]🤙 [img]http://www.gameshots.eu/images/2016/10/23/GirlontheWall-Signature510.png[/img][/center]