Perfekte Stil-Schalter für Testseiten?

AndreasB · #1 (**permalink**) 18.10.2010, 09:40

Für Testseiten ist es praktisch, zwischen verschiedenen Stilen mühelos wechseln zu können.

Ich suche ein PHP-Skript mit folgenden Merkmalen:

0 Unabhängigkeit von clientseitigen Skripten

1 Keine externen CSS-Dateien
Zielgruppe des Umschalter-Skriptes sind HTML-Autoren mit geringen bis gar keinen PHP-Kenntnissen. Sie erstellen einzelne Testseiten um bestimmte, meist eng umgrenzte, CSS-Experimente durchzuführen.
Zur einfachen Handhabung der Testseite sollen keine externen CSS-Dateien eingebettet sein.
Alle Stilvarianten "befinden" sich also innerhalb der Testseite.
Siehe Skizze 1 unten

2 Keine Maskierung
Der CSS-Code kann gänzlich ohne Maskierungen eingegeben werden. Ganz wie gewohnt.

3 Kanonische und sprechende URLs
Per URL soll eine Stilvariante direkt ansprechbar sein.
Beispiel: "domain.tld/testseite?s=blauer-fliesstext"
Das ist wichtig, wenn man einen URL weitergeben möchte.
Zur Kanonizität:
Rewrite des URLs per PHP, wenn dieser keine Variable enthält, auf den URL mit dem Parameter zur ersten der CSS-Varianten.
Also Rewrite von "domain.tld/testseite" auf "domain.tld/testseite?s=roter-fliesstext".

4 Automatisches Erzeugen des Markups für die Umschalter
Die gesamte Liste soll vollständig automatisch erzeugt werden.
Siehe Skizze 2 unten.
Keine Ausgabe der UL, wenn keine Stilvarianten existieren.
Keine Deppenlinks!
Anmerkung:
Als Markup hatte ich im ursprünglichen Posting <input type="submit" ... > gewünscht, weil das Wechseln des Stils zu keinem neuen Inhalt führt.
Aufgrund von programmiertechnischen Schwierigkeiten, die mir im Thread genannt wurden, habe ich input durch normale Links ersetzt.

5 Normalisierung des natürlich-sprachlichen Bezeichners
Der Wert für den Parameter und das Ziel der Umschaltlinks wird automatisch erzeugt. Aus dem natürlich-sprachlichen Bezeichner heraus. Per Normalisierung. Also Leerzeichen durch Bindestriche ersetzen, Umlaute/ß ersetzen, Großbuchstaben ersetzen, etc.
Der Autor soll sowenig Arbeit beim Bauen der Testseite haben wie möglich.
Siehe Skizze 3 unten.

6 Beliebig viele Stilvarianten
Das Skript muss nicht manuell erweitert werden, wenn weitere Stilvarianten hinzukommen.

7 Angabe des Namens der Stilvariante im Title-Attribut des jeweiligen Elementes style
Der Nutzer muss den Namen der Stilvariante nicht in Form einer Variablen eingeben. Er kann ihm vertraute HTML-Syntax verwenden.
Der Name muss vom Nutzer exakt ein einziges Mal, an einer einzigen Stelle eingegeben werden. Der Nutzer muss keinerlei Indizes angeben.

Verwendet oder kennt jemand von Euch eventuell ein PHP-Skript mit solchen Eigenschaften und möchte es hier teilen/vorstellen?

Selber verfüge ich nur über minimale Kenntnisse in PHP, daher sind für mich vor allem Hinweise auf existierende Skripte nützlich.

Wie in anderen Threads auch, interessiert mich drüber hinaus Eure Sicht auf das Thema. Welche Merkmale müsste ein gutes Skript für Stil-Umschalter für Testseiten Eurem Geschmack nach besitzen?

Danke.

Ganz unten in diesem Posting dokumentiere ich den aktuellen Stand der Entwicklung.

Um es den Lesern leicht zu machen:
Die Aufgabe wurde bisher (Stand 26.10.2010), trotz des langen Threads, leider nicht geknackt.

Skizze 1:

HTML-Code:

<head>
<?php include ("switchable-styles.inc") ?>
<style type="text/css">/* "Default" */
/* Hier stehen CSS-Regeln, die in allen Stilvarianten angewendet werden */
</style>
<style type="text/css">/* "Roter Fließtext" */
p { color: red; } /* Backslash: \. Hochkomma: ' */
p:before { content: "Alles rot! "; }
</style>
<style type="text/css">/* "Blauer Fließtext" */
p { color: blue; }
p:before { content: "Alles blau! "; }
</style>
</head>
<body>
<?php include ("style-switches.inc") ?>
...

Skizze 2:

HTML-Code:

<body>
<div  class="style-switches">
<ul>
<li class="current"><strong>Roter Fließtext</strong></li>
<li><a href="?s=blauer-fliesstext">Blauer Fließtext</a></li>
</ul>
</div>
...

Skizze 3

HTML-Code:

function normalize_string ($str,$max_result_length) {
    
/* 
@author                       Andreas Borutta <borumat@gmx.de>
@since                        2010-10-22
@version                      0.1
@param string $str            Ein beliebiger String
@param int $max_result_length Die maximale Zahl der Zeichen des ausgegebenen Strings
@return                       Der normalisierte String

Beschreibung: 

Ausgangspunkt ist ein UTF-8 kodierter String in einem HTML-Dokument. 
Als Entity sind nur diejenigen Zeichen maskiert, bei denen es in HTML notwendig ist: 
&nbsp;
&lt;
&gt;
&amp;

Dieser String wird so normalisiert, dass er als Teil einer URL oder als Variablenname geeignet ist.
*/

# Zeichen und Zeichenfolgen ersetzen
$tmp =   array (
            # Buchstaben
                'Ä' => 'Ae'    ,    'ä' => 'ae'    ,    'Æ' => 'Ae'    ,    'æ' => 'ae'
            ,    'À' => 'A'    ,    'à' => 'a'    ,    'Á' => 'A'    ,    'á' => 'a'
            ,    'Â' => 'A'    ,    'â' => 'a'    ,    'Ã' => 'A'    ,    'ã' => 'a'
            ,    'Å' => 'A'    ,    'å' => 'a'    ,    'ª' => 'a'    ,    'ₐ' => 'a'
            ,    'Ć' => 'C'    ,    'ć' => 'c'    ,    'Ç' => 'C'    ,    'ç' => 'c'
            ,    'Ð' => 'D'    ,    'đ' => 'd'
            ,    'È' => 'E'    ,    'è' => 'e'    ,    'É' => 'E'    ,    'é' => 'e'
            ,    'Ê' => 'E'    ,    'ê' => 'e'    ,    'Ë' => 'E'    ,    'ë' => 'e'
            ,    'ₑ' => 'e'
            ,    'ƒ' => 'f'
            ,    'Ì' => 'I'    ,    'ì' => 'i'    ,    'Í' => 'I'    ,    'í' => 'i'
            ,    'Î' => 'I'    ,    'î' => 'i'    ,    'Ï' => 'Ii'    ,    'ï' => 'ii'
            ,    'Ñ' => 'N'    ,    'ñ' => 'n'    ,    'ⁿ' => 'n'
            ,    'Ò' => 'O'    ,    'ò' => 'o'    ,    'Ó' => 'O'    ,    'ó' => 'o'
            ,    'Ô' => 'O'    ,    'ô' => 'o'    ,    'Õ' => 'O'    ,    'õ' => 'o'
            ,    'Ø' => 'O'    ,    'ø' => 'o'    ,    'ₒ' => 'o'    ,    'Ö' => 'Oe'
            ,    'ö' => 'oe'    ,    'Œ' => 'Oe'    ,    'œ' => 'oe'
            ,    'ß' => 'ss'    ,    'Š' => 'S'    ,    'š' => 's'
            ,    'Ù' => 'U'    ,    'ù' => 'u'    ,    'Ú' => 'U'    ,    'ú' => 'u'
            ,    'Û' => 'U'    ,    'û' => 'u'    ,    'Ü' => 'Ue'    ,    'ü' => 'ue'
            ,    'Ý' => 'Y'    ,    'ý' => 'y'    ,    'ÿ' => 'y'
            ,    'Ž' => 'Z'    ,    'ž' => 'z'
            # Hochstellung
            ,    '⁰' => '0'    ,    '¹' => '1'    ,    '²' => '2'    ,    '³' => '3'
            ,    '⁴' => '4'    ,    '⁵' => '5'    ,    '⁶' => '6'    ,    '⁷' => '7'
            ,    '⁸' => '8'    ,    '⁹' => '9'
            ,    '⁻' => '-'   
            # Tieferstellung
            ,    '₀' => '0'    ,    '₁' => '1'    ,    '₂' => '2'    ,    '₃' => '3'
            ,    '₄' => '4'    ,    '₅' => '5'    ,    '₆' => '6'    ,    '₇' => '7'
            ,    '₈' => '8'    ,    '₉' => '9'
            ,    '₋' => '-'    
            # Misc
            ,    '¢' => ' Cent'    ,    '€' => ' Euro', '$' => ' Dollar'
            ,    '℃' => ' Grad Celsius'    ,    '°C' => ' Grad Celsius'
            ,    '℉' => ' Grad Fahrenheit'    ,    '°F' => ' Grad Fahrenheit'
            ,    '/' => ' oder '    ,    '¦' => ' oder '    ,    '|' => ' oder '
            ,    '%' => ' Prozent'
            ,    '‰' => ' Promille'
            ,    '°' => ' Grad '
            ,    '§' => 'Paragraph '
            ,    '№' => 'Nummer '    , '\#'  => 'Nummer '
            ,    '&nbsp;' => ' '
            ,    '&amp;' => ' und '    ,    '&' => ' und '
            ,    '@' => ' at '
            ,    '™' => ' TM'
            ,    '®' => ' Marke'
            ,    '©' => ' Copyright'
            ,    '₊' => ' plus '    , '+' => ' plus '    ,    '±' => ' plusminus '
            ,    '×' => ' x '    ,   '*' => 'x'
            ,    '~' => ' ungefaehr '
            ,    '…' => ' etc'
            ,    '÷' => ' durch '
            ,    '₌' => ' gleich '    ,    '⁼' => ' gleich ',     '=' => ' gleich '
            ,    '–' => '-' # Geviertstrich
            ,    '—' => '-' # Halbgeviertstrich
            ,    '‑' => '-' # Geschützter Bindestrich
            ,    ' ' => '-' # Geschütztes Leerzeichen
            ,    '½' => ' einhalb',  '¼' => 'einviertel',       '¾' => 'dreiviertel'    
        );
    $str = strtr($str, $tmp);

# Einige Zeichen durch Leerzeichen ersetzen
# Auch Bindestriche - damit mehrfache Bindestriche zu mehrfachen Leerzeichen werden - die 
# wiederum in einer nachfolgenden Stufe ersetzt werden
$str = str_replace( array ('—','\\','-','\'','&lt;','&gt;'), ' ', $str );

# Großbuchstaben durch Kleinbuchstaben ersetzen
# Achtung! Die Datei, die diesen Code enthält, sowie die Datei auf die dieser Code angewendet wird, muss UTF-8 kodiert sein. Ansonsten muss dieser Teil angepasst werden.
$str = mb_strtolower( $str, 'utf-8' );

# Satzzeichen rauswerfen
$str = preg_replace( '~[\pP\pS]+~', '', $str);

# Mehrfache Leerzeichen, einzelne und mehrfache Tabulatoren, einzelne und mehrfache Zeilenumbrüche durch ein Leerzeichen ersetzen
$str = preg_replace( '~\s+~', ' ', $str ); 

# maximale Anzahl von Zeichen, jedoch keine Kürzung mitten im Wort
$tmp = explode( '<br>', wordwrap($str, $max_result_length, '<br>'), 2 );
$str = trim( $tmp[0] );

# Einfache Leerzeichen durch Bindestriche ersetzen
$str = str_replace( ' ', '-', $str );

# Rückgabe
return $str;
}

# Teststring
$str = '
Schöne Umlaute
Zahlen 100%
Doppelte  Leerzeichen
Tabu    lator
Schrägstrich/Zeilenumbruch
Satzzeichen …
Gedanken — Gedanken
"Anführungszeichen"
Šonderzeiçhen
Hoch\'komma 
Binde-strich
\\Backslash
Et &amp;
Et &
foo foo foo foo foo foo foo foo foo foo foo 
foo foo foo foo foo foo foo
';

$str = normalize_string ($str,220);
print $str;

Aktueller Stand:

Noch nicht bzw. nicht vollständig verwirklicht sind die Merkmale 3,4,6,7

Sobald das Skript fertig ist, werden selbstverständlich wiederverwendbare Teile wie die Funktion zum Normalisieren in eine separate Datei ausgelagert.

HTML-Code:

<head>
<?php include ('function-normalize-string.inc'); # Siehe Skizze 3 ?>

<style type="text/css">/* "Default" */
/* Hier stehen CSS-Regeln, die in allen Stilvarianten angewendet werden */
</style>

<?php $n1 = 'Roter Fließtext'; ob_start(); ?>
<style type="text/css">/* "Roter Fließtext" */
p { color: red; } /* Backslash: \. Hochkomma: ' */
p:before { content: "Alles rot! "; }
</style>
<?php $c1 = ob_get_clean(); $i1 = normalize($n1); ?>

<?php $n2 = 'Blauer Fließtext'; ob_start(); ?>
<style type="text/css">/* "Roter Fließtext" */
p { color: blue; }
p:before { content: "Alles blau! "; }
</style>
<?php $c2 = ob_get_clean(); $i2 = normalize($n2); ?>

<?php
if ($s == $i1 or $s == '') { print $c1; }
if ($s == $i2) { print $c2; }
?>


</head>
<body>
<?php
$style_switches = array(
$i1 => $n1,
$i2 => $n2
);
echo '<div class="style-switches">
    <ul>';
foreach ($style_switches as $i => $n)
    {
    if ($s == $i)
        {
        echo '
        <li class="current"><strong>'.$n.'</strong></li>';
        }
        else
        {
        echo '
        <li><a href="'.$i.'">'.$n.'</a></li>';
        }
    }
echo '
    </ul>
<div>
';
?>
<p>Lorem ipsum</p>
</body>

andir · #2 (**permalink**) 18.10.2010, 12:09

Deine Anforderungen sind mal wieder ziemlich speziell

, sowas gibts nicht fertig.

M.E. beißt sich die Anforderung "alle Inhalte innerhalb" einer Datei mit dem Erfordernis, keinen Reload machen zu müssen. **, *** Ich gehe davon aus, dass Du damit meinst, dass keine includes erlaubt sind, sondern die Inhalte, z.B. als CSS-Anweisungen und ggfs. Html-Blöcke, in der Datei selbst vorliegen sollen?

** Wenn beispielsweise die CSS-Anweisungen in Blöcken vorhanden sind, müssten diese sektionsweise inaktiv gesetzt, sprich auskommentiert, werden. Da das nur über Suchen/Ersetzen geht, ist ein Reload erforderlich um jeweils alle Auswahlvarianten - unabhängig vom Startpunkt aus, zur Verfügung stellen zu können, denn die auskommentierten Sektionen stehen für eine weitere Bearbeitung nicht mehr zur Verfügung (keine eindeutige Zeichenfolge für einen Ansatzpunkt mehr vorhanden Edit: Das ließe sich mit etwas Aufwand in Griff bekommen). Je nach gewählter Vorgehensweise kann dann z.B. nicht mehr eine vorher aufgerufene Variante (ausser über die history) aufgerufen werden.

Alternativ könnte natürlich über eine Fallabfrage und php echo jeweils der nötige Codeteil aufgerufen werden, dass ist aber im Quellcode nicht wirklich übersichtlich für den Autoren, hätte aber den Vorteil, dass nur die benötigten Daten überliefert werden müssen. Aber auch in diesem Fall scheint mir ein Reload nötig, denn die zuvor ausgegebene Datei enthält ja die anderen Teile nicht mehr.

*** Vielleicht kennt sich einer der Skriptspezialisten da besser aus: Wenn ich einen Parameter an eine url hänge und die aufrufe, und ausgeben lasse, muss sowie der Aufruf einer Datei stattfinden, das heißt: http-request auf die Datei mit dem Parameter? Ein reload wäre unumgänglich?

AndreasB · #3 (**permalink**) 18.10.2010, 12:32

Hi Andir.

Zitat:

Deine Anforderungen sind mal wieder ziemlich speziell

Ich will ja niemanden langweilen.

Zitat:

M.E. beißt sich die Anforderung "alle Inhalte innerhalb" einer Datei mit dem Erfordernis, keinen Reload machen zu müssen.

Ich habe ja das Merkmal "kein Reload" nicht erwähnt. Ganz bewußt. Denn ich gehe davon aus, dass sich dies mit mehreren anderen Anforderungen, zum Beispiel 2 und 3, nicht vereinbar ist.

Zitat:

Ich gehe davon aus, dass Du damit meinst, dass keine includes erlaubt sind, sondern die Inhalte, z.B. als CSS-Anweisungen und ggfs. Html-Blöcke, in der Datei selbst vorliegen sollen?

Yep. Keine Includes für das CSS.
PHP-Skripte, die auf allen Testseiten benötigt werden, können natürlich per Include eingebunden werden.

Zitat:

Wenn beispielsweise die CSS-Anweisungen in Blöcken vorhanden sind, müssten diese sektionsweise inaktiv gesetzt, sprich auskommentiert, werden. Da das nur über Suchen/Ersetzen geht, ist ein Reload erforderlich

Ob mit "Auskommentieren" gearbeitet würde oder mit anderen Verfahren, kann ich nicht beurteilen.
Aber ich kann mir nicht vorstellen, dass die Merkmalliste ohne Reload realisierbar ist.

andir · #4 (**permalink**) 18.10.2010, 13:38

Dann habe ich das das:

Zitat:

Als Markup soll <input type="submit" ... > verwendet werden, weil das Wechseln des Stils zu keinem neuen Inhalt führt.

schlicht falsch interpretiert.

Jetzt besteht noch das Problem, dass der Inhalt von value als parameter an die aktuelle url (mit)übergeben werden muss. Das ginge m.W. nicht ohne javascript (wenn überhaupt) und bietet enorme Angriffsmöglichkeiten für böswillige Gestalten.

Links wären da vermutlich viel einfacher zu erstellen.

AndreasB · #5 (**permalink**) 18.10.2010, 13:51

Edit: Ich habe den Inhalt dieses Postings entfernt, weil ich den aktuellen Stand der Entwicklung im Ausgangsposting dokumentiere.

AndreasB · #6 (**permalink**) 18.10.2010, 14:06

Zitat:

Dann habe ich das das:

Zitat:

Als Markup soll <input type="submit" ... > verwendet werden, weil das Wechseln des Stils zu keinem neuen Inhalt führt.

schlicht falsch interpretiert.

Mein Fehler:
Ich hätte das klarer herausstellen müssen.

Zitat:

Jetzt besteht noch das Problem, dass der Inhalt von value als parameter an die aktuelle url (mit)übergeben werden muss. Das ginge m.W. nicht ohne javascript (wenn überhaupt) und bietet enorme Angriffsmöglichkeiten für böswillige Gestalten.

Links wären da vermutlich viel einfacher zu erstellen.

An dem Markup soll es nicht scheitern.
Wenn es per A viel leichter zu realisieren ist als per INPUT: auch fein.

andir · #7 (**permalink**) 18.10.2010, 16:08

Ja, mit Links ist es deswegen einfacher, weil der Link bereits vorliegt - er muss nicht erst noch aus einer Nutzereingabe zusammengesetzt werden. (aktuelle url + zunächst unbekanntes value = neue url)
Mit Links wird das Problem umgangen, es werden eben die erforderlichen Linkziele geboten

AndreasB · #8 (**permalink**) 18.10.2010, 16:15

Zitat:

Zitat von andir

Ja, mit Links ist es deswegen einfacher [...]

Alles klar.

Ich habe im Post von vornhin, ein Skriptbeispiel gepostet. Viel fehlt nicht mehr bis zur Lösung.

andir · #9 (**permalink**) 18.10.2010, 16:16

Wie ich die Links zusammenbauen kann, ist klar, der Rest ist allerdings schwieriger

.
Mal gucken, ob und was heute abend geht.

philosapiens · #10 (**permalink**) 18.10.2010, 16:46

Hi,

also irgendwie verstehe ich die Schwierigkeit nicht so ganz.

Wenn nur das Aussehen geändert werden soll, also die CSS-Datei, dann nehme ich gerne die Idee von Perun auf: PHP-Styleswitcher | perun.net

Wenn das ganze HTML geändert werden soll, dann kann man das ja ähnlich machen über Variablentausch:

PHP-Code:


			
...

<body>

<?php

$eine_spalte = '<div></div>';

$zwei_spalten = '<div></div><div></div>';

$drei_spalten = '<div></div><div></div><div></div>';

?>

<div id="wrap">

<div>

<h2>Wechsler</h2>

<ul>

 <li><a href="<?php echo $_SERVER['PHP_SELF']?>?spalten=1">1-Spalten-Design</a></li>

 <li><a href="<?php echo $_SERVER['PHP_SELF']?>?spalten=2">2-Spalten-Design</a></li>

 <li><a href="<?php echo $_SERVER['PHP_SELF']?>?spalten=3">3-Spalten-Design</a></li>

</ul>

</div>

<?php

if ($spalten==3) $anzeige = $drei_spalten;

elseif ($spalten==2) $anzeige = $zwei_spalten;

else $anzeige = $eine_spalte;

echo $anzeige

?>

</div>

</body>

...

Ist sicherlich für den späteren Fertigbau etwas schwierig, aber zum Testen halte ich das für brauchbar.
Oder?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln