instructions_de.htm | searchcode

/instructions_de.htm

https://bitbucket.org/vins13pattar/adaptive-images
HTML | 177 lines | 152 code | 25 blank | 0 comment | 0 complexity | bab3e3d9be5db896e8c830af94a7e473 MD5 | raw file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <style>
      body {
        width : 90%; margin : 1em auto;
        background : #333; color : #aaa; font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
      h1, h2, h3, h4, h5, h6 {
        color : #fff; }
      p code { color : #99e; }
      pre > code { display : block; padding : 1em; border : 1px solid #999; }
      :target { background-color : #000;}
      
      a,a:visited{ color : #99f; }
    </style>
  </head>

  <body>
    <h1>Adaptive-Images Installationsanweisungen</h1>
    <h2>Basis Anweisungen</h2>
    <p>Kopieren Sie <code>adaptive-images.php</code> und <code>.htaccess</code> 
    in das Hauptverzeichniss ihres Internetauftritts. 
    Wenn Sie bereits eine htaccess Datei haben BITTE NICHT ÜBERSCHREIBEN, lesen sie die dafür vorgesehenen Instruktionen.</p>
    <p>Erstellen Sie ein Verzeichniss mit dem Namen <code>ai-cache</code> im Hauptverzeichniss 
    mit Schreibberechtigung (CHMOD 777).</p>
    <p>Kopieren Sie folgendes Javascript in den &lt;head&gt; Bereich ihrer Seiten. 
    Das Script MUSS sich im head Bereich befinden damit es ausgeführt wird bevor 
    die gesamte Seite geladen ist und die ersten Bilder vom Server ausgeliefert werden.</p>
<pre><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,
screen.height)+'; path=/';&lt;/script&gt;</code></pre>
    <p>Das wars. Sie sind fertig</p>
    <p>ANMERKUNG: Die <code>ai-cookie.php</code> Datei wird normalerweise nicht 
    benötigt. Nur beim Einsatz der <a href="#alternate">Alternativen Methode</a> 
    zum Feststellen der Displaygrösse wird sie benötigt ansonsten kann sie gelöscht werden.</p>
    
    <h2>Sie haben bereits eine .htaccess Datei</h2>
    <p>Sichern Sie bitte diese Datei bevor Sie Änderungen daran vornehmen.</p>
    <p>Öffnen Sie bitte ihre bestehende .htaccess Datei und editieren Sie den Inhalt. 
    Suchen Sie nach einem Abschnitt suchen der so beginnt:</p>
    <p><code>&lt;IfModule mod_rewrite.c&gt;</code></p>
    <p>Sollten Sie ihn gefunden haben kopieren Sie folgenden Code in den Bereich:</p>
    
<pre><code># Adaptive-Images -----------------------------------------------------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new 
line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above 
directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images -------------------------------------------------------------------------------</code></pre>

<p>Gibt es keinen solchen Abschnitt in ihrer Datei kopieren Sie stattdesen folgenden Code in die Datei:</p>

<pre><code>&lt;IfModule mod_rewrite.c&gt;
  Options +FollowSymlinks
  RewriteEngine On

  # Adaptive-Images -----------------------------------------------------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a 
  new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI} !another-directory

  RewriteCond %{REQUEST_URI} !assets

  # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above 
  directories
  # to adaptive-images.php so we can select appropriately sized versions
  RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

  # END Adaptive-Images -------------------------------------------------------------------------------
&lt;/IfModule&gt;</code></pre>

    <h2>Weitere Einstellungen</h2>
    <h3>.htaccess</h3>
    <p>Anweisungen sind in der Datei als Kommentare enthalten (alle Zeilen die 
    mit # beginnen sind Kommentare und werden nicht ausgeführt)</p>
    <p>Folgen Sie den Anweisungen im Code um Verzeichnisse die nicht mit 
    Adaptive-Images benutzt werden sollen einzutragen.</p>
    
    <h3>PHP</h3>
    <p>Sie können die PHP-Datei öffnen und die Einstellungen im  CONFIG Bereich ändern. 
    Die Standardwerte sehen so aus:</p>
      
<pre><code>/* CONFIG ----------------------------------------------------------------------------------------------------------- */

$resolutions   = array(1382,992,768,480,320); // Die Auflösungsschritte für die Bilder erzeugt werden (Bildschirmbreite in Pixel)
$cache_path    = "ai-cache"; // Wo die verkleinerten Bilder gespeichert werden.  Der Ordner muss beschreibbar sein.
$jpg_quality   = 80; // Die Qualität der erzeugten JPGs 0 bis 100
$sharpen       = TRUE; // Verkleinerte Bilder verlieren an Schärfe, bei TRUE werden die Bilder geschärft 
$watch_cache   = TRUE; // stellt sicher das neu hochgeladene Bilder neu verkleinert werden
$browser_cache = 60*60*24*7; // Die Zeit in Sekunden für den BROWSER cache (Standard 7 Tage)
$mobile_first  = TRUE; // Ist kein Cookie vorhanden wird zuerst die mobile Version gesendet (wenn FALSE, wird das grösste Bild gesendet)

/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------ Verändern Sie nichts nach dieser Zeile wenn Sie nicht wissen was Sie tun -------------------------
--------------------------------------------------------------------------------------------------------------------- */</code></pre>
  <p><code>$resolutions</code> sind die Bildschirmauflösungen mit denen gearbeitet wird.
  Als Standard werden verkleinerte Bilder für grosse Bildschirme, normale Bildschirme, 
  Tablets, Smartphones, und Handys gespeichert.</p>
  <p>Im allgemeinen, wenn Sie die CSS Methode nutzen, werden diese Auflösungen 
  dieselben wie in den 'media queries' sein.</p>
  <p><code>$cache_path</code> Der Pfad in den die Bilder zwischengespeichert werden.
  Er kann beliebig geändert werden. Der Pfad wird hier eingetragen und es muss 
  sichergestellt sein das er auf dem Server existiert.</p>
  <p><code>$sharpen</code> Die bilder werden nach dem Verkleinern geschärft. 
  Normal funktioniert das gut sollte ihr Server sehr sehr ausgelastet sein kann es hier abgeschaltet werdn. .</p>
  <p><code>$watch_cache</code> Bei Performanceproblemen ihres Servers kann diese Option abgeschaltet werden.
  Sollten Sie allerdings ihre Quell-Bilder ersetzen müssen Sie den Cache Ordner manuell leeren.</p>
  <p><code>$mobile_first</code> Wenn TRUE und kein  cookie ist gesetzt, sendet Adaptive 
  Images Bilder in der 'mobilen' Auflösung. Wenn FALSE gesetzt ist werden die am 
  höchten aufgelössten Bilder gesendet.</p>
  
<h2 id="alternate">Alternative Methode ohne JavaScript</h2>

<p>Eine Schwäche von Adaptive Images ist das JavaScript zum Erkennen der 
Bildschirmgrösse des Besuchers benötigt wird.
Im folgenden wird eine Methode ohne Javascript gezeigt. 
Diese Methode funktioniert unter Vorbehalt wird allerdings vom Autor nicht empfohlen und nicht unterstützt.
</p>

<h3>Die alternative Methode</h3>
<p>Benötigt kein JavaScript stattdessen aber, muss ÜBER ihrem normalen 
CSS, folgende Zeilen eingefügt werden:</p>
<pre><code>&lt;style&gt;
 @media only screen and (max-device-width: 479px) {
   html { background-image:url(ai-cookie.php?maxwidth=479); } }
 @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
   html { background-image:url(ai-cookie.php?maxwidth=767); } }
 @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
   html { background-image:url(ai-cookie.php?maxwidth=991); } }
 @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
   html { background-image:url(ai-cookie.php?maxwidth=1381); } }
 @media only screen and (min-device-width: 1382px) {
   html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
&lt;/style&gt;</code></pre>
<p>Wenn Sie diese Mehode verwenden müssen Sie sicherstellen das die verwendeten 
Bildschirmauflösungen dennen in Ihrer adaptive-images.php Datei entsprechen, 
Sie benötigen zudem die <code>ai-cookie.php</code>  Datei im Hauptverzeichniss ihres Internetauftritts.
(ansonsten wird diese Datei nicht benötigt).</p>

<h3>Der Vorbehalt</h3>
<p>Benutzen Sie diese Methode anstatt JS ist es möglich das besucher bei ihrem 
ersten Besuch ihrer Seiten, die original hoch aufgelössten Bilder gesendet bekommen. 
ALLE Seiten ihres Auftritts werden wie vorgesehen funktionieren. 
Das bedeutet allerdings das Sie die Option  $mobile_first auf FALSE setzen müssen.
Ansonsten werden die meisten ihrer Besucher feststellen das die angezeigten Bilder,
 bei ihrem ersten Besuch zu klein dargestellt werden.
Otherwise, the majority of people who 
</p>
<p>Der Grund dafür ist die Reihenfolge wie Browser Internetseiten verarbeiten. 
Als erstes wird das HTML geladen, und in der Reihenfolge wie es geschrieben wurde abgearbeitet.
Das eingebettete JavaScript wird sofort ausgeführt und erzeugt das Cookie. 
Danach werden Bilder in der Reihenfolge ihres Auftrettens geladen. das heisst 
werden die ersten Bilder vom Server angefordert ist das Cookie mit der Bildschirmgrösse 
bereits geschrieben.</p>
<p>Das ist bei der CSS Methode nicht unbedingt der Fall. Die CSS 
Methode setzt eine externe Datei voraus - sie fordert vom Server 
"background-image" an, welche von der PHP Datei nur benötigt wird um das Cookie zu setzen. 
Das Problem ist das der Browser beim laden der externen Datein nicht anhält,
er arbeitet weiter während er auf die externe datei wartet. Das bedeutet das 
schon Bilddateien angefordert werden können bevor die PHP Datei abgearbeitet wurde 
und somit noch kein Cookie gesetzt wurde. Das wiederum heisst, daß wenn $mobile_first TRUE ist
die für mobile Geräte verkleinerten Bilder gesendet werden. Aber nur wenn die 
allererste Seite geladen wird.</p>
  </body>
</html>