templaterie

Die Variablentype String (auf deutsch: Zeichenkette) haben wir bereits kennengelernt und eingesetzt. Schauen wir uns den Variablentyp jetzt etwas genauer an. Strings werden mit Anführungszeichen eingeleitet. Doppelte Anführungszeichen werden auf PHP-Code in der Zeichenkette (string) hin untersucht. In Zeichenketten können Variablen und Anweisungen vorkommen. Wenn Steuerzeichen in einer Zeichenkette vorkommen, die als Zeichen interpretiert und nicht als Steuerzeichen, dann muss das Zeichen mit einem Gegenschrägstrich (backslash) maskiert werden, andere Zeichen werden als Zeichen interpretiert und damit sie als Steuerzeichen erkannt werden müssen sie mit einem Gegenstrich (Backslash) maskiert (escaped) werden. In der folgenden Tabelle ist eine Liste der Steuerzeichen.

Für unseren aktuellen Stand ist die Liste erst einmal ausreichend, die vollständige Liste findet ihr unter Variablentypen: String

Strings können auch von einzelnen Anführungszeichen, Hochkommatas, umschlossen werden, dann werden Sonderzeichen mit Ausname der Maskierungen des Gegenschrägstrichs (\\) und dem Hochkommata (\') und Variablen nicht interpretiert. Variablen werden bei einzelnen Hochkommatas in Zeichenketten über einen Punkt zwischen zwei durch Hochkommatas abgeschlossene Zeichenketten eingefügt. Achten Sie auf die Anführungszeichen, Gegenschrägstriche und Punkte, die Ausgabe ist in den grünen Kommentaren der echo-Anweisung nachgestellt.

1. $var = "Anna";
2. echo "Hier betreut Sie $var."; // Hier betreut Sie Anna.
3. echo "Hier betreut Sie \$var."; // Hier betreut Sie $var.
4. echo 'Hier betreut Sie '.$var.'.'; // Hier betreut sie Anna.
5. echo 'Hier betreut Sie $var.'; // Hier betreut Sie $var.
6. echo 'Darstellung in \'\' von \\\' durch \\\\\\\'';
// Darstellung in '' von \' durch \\\''

Ein Gegenschrägstrich (Backslash „\„) in Hochkommata (single Quotes) muss nicht notwendiger Weise in allen Fällen maskiert werden, wenn aber Ausgegeben werden soll, wie man Hochkommatas maskiert in Hochkommata mit echo, dann kann das zu exzessivem Maskieren von Gegenschrägstrichen und dem Hochkommata führen. Es bedarf sieben Gegenschrägstriche und ein Hochkommata um \\\' in Hochkommata zu schreiben, für jeden der drei Gegenschrägstriche einen Maskierungs-Gegenschrägstrich und einen Maskierungs-Gegenschrägstrich für das Hochkommata.

In dem nachfolgenden Codeblock sind zwei nützliche Dinge mehrzeilige Kommentare zum ein und ausblenden von Funktionen im Script und die mehrzeilige String-Variable:

1. // Kommentartrick zum temporären Auskommentieren
2. /**
/
// Mehrzeiliger Kommentar:
echo <<<VARNAME
Diese echo-Anweisung ist auskommentiert und alles was es braucht, die echo-Anweisung wieder scharf zu schalten, ist die einzelnen Schrägstriche am Anfang und am Ende in eine Zeile wie folgt /**/ zu nehmen. In der Entwicklungsphase eines Scripts ist das sehr nützlich.
VARNAME;
/
**/

Der mehrzeilige Kommentar ist nicht nur um im Kopf des Skriptes für Metatext zum Skript geeignet, sondern auch um schnell Codeteile zu deaktivieren und aktiveren, z.B. um in der Entwicklungsphase Variationen zu testen oder Fehlerquellen zu identifizieren und eliminieren. (mehr …)

Filed under: PHP,Programmierung,Tutorials
No Comments

Um sich noch etwas mehr mit dem Datum und Variablen austoben zu können, z.B. im Dezember mit schönen Sprüchen einen Adventskalender zu produzieren oder etwas aktueller für den kommenden Sommer Freizeittipps zu geben.

Rekapitulieren wir noch mal. „Variablen deklarieren“ geht wie folgt. Eine Variable wird mit dem $-Zeichen eingeleitet, dem der Unterstrich oder ein Buchstabe folgt. Eine Zahl darf nicht direkt nach dem Dollarzeichen stehen, dazwischen muss schon noch ein Unterstrich oder einem Buchstaben stehen. Ein Variablenname kann Zahlen enthalten, aber __nicht__ direkt dem $-Zeichen gefolgt. $XYZ123 ist zulässig, $123XYZ ist nicht zulässig. Ebenfalls unzulässig ist ein Bindestrich bzw. Minuszeichen. Das Minuszeichen ist ein Operator und führt im Variablennamen zum Syntaxfehler.

Schaut man in die PHP-Dokumentation, begegnen uns unter anderen folgende Variablentypen:

• Wahrheitswert: (bool), (boolean) – nach boolean
• Ganzzahl: (int), (integer) – nach integer
• Fließkommazahl: (float), (double), (real) – nach float
• Zeichenkette: (string) – nach string

Die restlichen Variablentypen stellen wir hinten an für spätere Exkursionen in PHP.

Ganzzahlen werden positiv oder negativ geschrieben, Ganzzahlen sind nicht gesondert markiert. Um eine Zahl in eine Variable zu speichern, wird die Zahl ohne Zusatznotationen zwischen dem Gleichheitszeichen und Semikolon geschrieben:

$ganzzahl = 10; bzw. $ganzzahl = -10;

PHP rechnet in den meisten Fällen im Dezimalsystem, muss aber nicht. Stellt man der 10 eine 0 voran so wird daraus die oktale 8 und 0x vorangestellt ergibt hexadezimal 16.

1. $a = 10; // dezimal 10
2. $b = 0x10; // hexadezimal: 16
3. $c = 010; // octal: 8
4. $d = $a + $b + $c;
5. var_dump($a); // (int)10
6. var_dump($b); // (int)16
7. var_dump($c); // (int)8
8. var_dump($d); // (int)34

PHP rechnet mit den verschiedenen Formaten im bunten Kompott problemlos, am Ende wird ein Dezimalwert ausgegeben. Im Kommentar (mit doppelten Schrägstrichen eingeleitet) ist das Format und der Wert in den Zeilen 1 bis 3 angegeben. Übrigens Kommentare mit vorangestellten Doppelschrägstrich sind einzeilig und helfen den Code verstehen. Für den Augenblick sind die Codes überkommentiert, da sehr viel noch erklärt werden muss. Mehrzeilige Kommentare werden mit Schrägstrich und Stern /* Kommentar */ umklammert.

Weiter geht es – Rechnen mit Fließkomma (floats):

1. $a = 10; // integer
2. $b = 0.5; // float
3. $c = $a*$b;
4. var_dump($a); // (int)10
5. var_dump($b); // float(0.5)
6. var_dump($c); // float(5)

Obwohl PHP mit echo $c; 5 und nicht 5.0 ausgibt, also Ganzzahl nach dem Erscheinungsbild, wird die 5 als Fließkommazahl registriert. Achtung: PHP verwendet englische Konventionen. Kommastellen werden mit einem Punkt statt eines Kommas dargestellt.

Das Zahlenformat lässt sich den jeweiligen nationalen Konventionen mit number_format($Fließkommazahl = 1.5, $Dezimalstellen = 0 , $Dezimaltrennzeichen = ',' , $Tausendertrennung = '\'') anpassen.

(mehr …)

Filed under: PHP,Programmierung,Tutorials,Webtechniken
No Comments

Ein regulärer Ausdruck setzt sich wie folgt zusammen: Delimiter Suchmuster Delimiter Modifier, wobei Delimiter oblogatorisch und Modifier optional sind.

1. $FundstellenArray = preg_match(/Suchmuster/i,$suchtext)

• Delimiter: „/“ // ebenso mögliche Delimiter # ~ @ !
• Suchmuster: „Suchmuster“ // nach Begriff suchen
• Modifier: „i“ // Groß- und Kleinschreibung ignorieren

Taucht ein Delimiter innerhalb des Suchstrings auf, muss dieser mit einem Backslash escaped werden oder ein anderer Delimiter gewählt werden. Fehlt hier die Kontrolle über das Suchmuster, kann die Aufgabe Metazeichen zu escapen automatiert werden.

1. /\QSuchmuster\E/

Alles zwischen \Q und \E ist Teil des Suchmusters ohne Metazeichen. Metazeichen werden so verwendet wie sie sind ohne deren Funktionalität. Alternativ kann auch die Funktion preg_quote() genutzt werden.

1. $suchmuster_quoted = preg_quote($suchmuster,$delimiter);

Runde Klammern fassen logische Gruppen zusammen. Der reguläre Ausdruck #Muster(knabe|haus|gatte.)# findet den Musterknabe, das Musterhaus und den Mustergatten, der Musterartikel hingegen trifft nicht auf das Suchmuster zu. ~“artikel” ist keine erlaubte Alternative in der Suchuntergruppe.

(mehr …)

Filed under: PHP,Programmierung,Webtechniken
No Comments

Am Anfang einer HTML- und PHP-Karriere glaubt man noch, dass einem der Bit-, Windows, Linux und Unix-Kram egal sein kann, auch der Charset lässt einen kalt. Man übernimmt noch den Charset, z.B. den Windows-1252, im Head-Meta-Tag der HTM-Datei, weil das alle so machen. Und dann nutzt man ein Sonderzeichen, das z.B. ISO-8859-1 Charset nicht abgedeckt ist oder übernimmt Daten direkt per include von Kunden, die ein anderes Format haben als das Windows basierende erweiterte ASCII namens ANSI verwendet und in UTF-8 mit oder ohne BOM gespeichert wurde und vica versa oder will Maildaten auswertern und stolpert über den Unterschied zwischen 8 und 7 Bit.

Die folgenden Zahlensysteme in der Tabelle unten dienen in Computersystemen dem Ausdruck und der Repräsentation von Sympolen und Operationen. Der Computer – so wissen wir – unterscheidet zwei Zustände, aus und an oder Binär ausgedrückt 0 und 1. In einem Bit speichert der Computer 8 Mal entweder die 0 oder die 1 und drückt so z.B. Dezimalwerte oder unser Alphabet aus. sämtliche noch so komplexe Ausdrücke im Computer können zurückgeführt werden auf eine Kombination von 0 und 1 in Bits und Bytes. Wieviele Stellen, ob 8, 16, 32, 64 oder 128, was repräsentieren, ist dabei eine Frage des Systems.

Wir Menschen beginnen das Zählen und Rechnen mit dem Dezimalsystem und lernen die Zahlen von 0 bis 9 und dass mit 10 und jeder weiteren Stelle um Faktor 10 erweitert wird, 100, 1’000, etc.. Unser Dezimalsystem kann hergenommen werden um Buchstaben zu repräsenetieren, z.B. 5 = E denn E steht an der 5. Stelle in unserem Alphabet. In Computersystemen wird das Dezimalsystem allerdings gewöhnlich nicht verwendet, um Buchstaben aus dem Alphabet zu repräsentieren. Ein Datum begegnet einem da schon des öfteren als verwirrend lange Zahl aus dem Dezimalzahlensystem, nur gut dass uns Funktionen zur Verfügung stehen, die aus der Zahl wieder ein konventionelles, für uns menschen lesbares, Datum wandelt.

Auch das Hexadecimalsystem ist den Meisten, die schon mit HTML und CSS Webseiten erstellt haben, begegnet. In der Regel wird der RGB-Wert hexadezimal ausgedückt #FFFFFF = Rot: 255 Gelb: 255 Blau: 255. Das Hexadezimalsystem 2⁴ (=256) eignet sich um übersichtlich für Mensch halbwegs lesbar das Binäre 2⁸ abzubilden. Siehe hierzu auch den Beitrag auf Bigwhoop: Wieso nutzen wir eigentlich das Hexadezimalsystem?

Das oktale System ist wie das Binärsystem ein Sysetm, das einem direkt und offensichtlich kaum begegnet. Einmal von mexikanischen Yukis abgesehen, die ihre acht Handknöchel statt der zehn Finger zum Zählen nutzen, eignet sich das Base-8 Zahlensystem in Computer, weil eine Oktalzahl durch drei Bit dargestellt werden kann und dem geminen PHP-Dabbler im Mailverkehr begegnet.

Was passiert wenn man unversehens mit dem Octalsystem rechnet?

1. var_dump($a = 010); // 8
2. var_dump($b = 0xA); // 10
3. var_dump($c = 2); // 2
4. print $a + $b + $c; // 20

Statt 10 + 10 + 2 = 22 hat man folgende Addition aufgemacht 8 + 10 + 2 = 20 (gefunden auf php.dzone.com: PHP Data Types – Octal Notation)

Mittels den 2-Base (Binary), 8-Base (Octal), 10-Base (Decimal) und 16-Base (Hexadecimal) werden wie bereits geschrieben dazu genutzt etwas zu repräsentieren, u.a. Zeichensätze. Hier haben sich je nach länderspezifisch genutztem Zeichensatz im Laufe der Jahre unterschiedliche Systeme entwickelt und je stärker der internationale Datenaustausch in die Gänge kam, desto wichtiger wurde ein einheitliches, länderübergreifendes System notwendig und so wurde statt der diversen „ISO-…“ Zeichensätze der UTF-8 Zeichensatz populär. Ein Zeichen wird je nach System direkt Binär, octal oder hexadezimal im Hintergrund des Programmes (z.B. Texteditor, Browser, etc.) dargestellt. Im Falle von UTF-8 kommt noch hinzu, dass einige Systeme (Editoren) dem Text eine UTF-8 Kennung voranstellen, dem BOM (= Byte Order Mark), was die Entzifferung des UTF-8 beeinflusst und um Fehler zu vermeiden sollte eine unbekannte, fremde, externe UTF-8 Textquelle auf das Vorhandensein des BOM geprüft und entsprechendes ggf. entfernt werden.

1. $str = file_get_contents('extern_utf8.txt');
2. $bom = pack("CCC", 0xef, 0xbb, 0xbf);
3. if (0 == strncmp($str, $bom, 3)) {
4. // BOM detected, remove BOM:
5. $str = substr($str, 3); }

Wer nicht aufpasst, hat schnell einen Buchstabensalat auf dem Monitor. Das kann selbst dem Präsidenten der USA in einem sehr öffentlichen Forum passieren. Siehe: Why the #AskObama Tweet was Garbled on Screen

Gründe für den Zeichensalat sind sowohl in den Bit-Systemen, den Zeichsätzen und an einleitenden Datei-Markern wie z.B. BOM zu suchen und das Problem wird uns sicher noch lange begleiten.

Filed under: Programmierung
No Comments

Allem, was von außen kommt, misstraut der Programmierer mit gutem Grund. Was von außen kommt, wird gereinigt, desinfiziert und vom Türsteher nur durchgelassen, wenn die Variable den Whitelist-Pass passiert. Was muss zum Türsteher? Die EGPCS-Variablen (Environment, GET, POST, Cookie, Server), die Superglobals:

• $_ENV
• $_GET
• $_POST
• $_REQUEST
• $_COOKIE
• $_SERVER
• $_SESSION

Seit PHP5 gibt es zur Absicherung der Superglobals die Filterfunktionen, u.a. filter_input_array, mit dem man gleich eine Sammlung, wie man sie in einem Formular vorfindet, bereinigen kann. Dazu sollte man auch noch die Übersicht der Sanitize filters kennen. Die PHP Dokumentation hat es versäumt Querverweise auf den Seiten bereitzustellen oder es verständlich mit Anwendungsbeispielen zu dokumentieren (Ein PHP-Doku-Klassiker).

Eine gute, gebrauchstaugliche Hilfe für die Filterfunktion habe ich auf jqueryandphp.com gefunden: Before I get started… (aka – Always Sanitize Your User Input!)

So sieht das z.B. aus – das Formular mit den zu säubernden Formularfeld-Eingaben:

1. <form action="adduser.php" method="post">
2. Vorname: <input type="text" name="vorname" /><br/>
3. E-mail: <input type="text" name="email" /><br/>
4. Alter: <input type="text" name="alter" /><br/>
6. <input type="submit" value="Add User" />
7. </form>

und der Filterdurchlauf der Formularfeld-Eingaben mittels Array:

1. $filter = array(
2. 'vorname' => FILTER_SANITIZE_STRING,
3. 'alter' => array(
4. 'zahlenformat' => FILTER_VALIDATE_INT,
5. 'altersvorgabe' => array('mindestalter' => 18)
6. ),
7. 'email' => FILTER_VALIDATE_EMAIL
8. );
9. $_FILTERAUSZUG = filter_input_array(INPUT_POST, $filter);

Das funktioniert auch mit den anderen Superglobals. Aber Achtung – wer das einsetzt, sollte sicher stellen, dass die PHP-Umgebung die entsprechenden Voraussetzungen erfüllt, denn wenn nicht, ist man mit dem guten alten preg_match, siehe PHP-Infektionen und anderen Unfug via $_GET und htmlspecialchars, besser bedient und das arbeitet in ähnlicher Weise wie die Filter.

Filed under: PHP,Programmierung,Webtechniken
No Comments

Viel Infos kommen im Postfach des Mailprogramms an und manchmal möchte man die Mails aus der Inbox oder einem der Unterordner in PHP weiter verwursten. Und 50 Jahre nach Gründung des Internets und des sehr regen internationalen Internetdatenverkehr scheint sich eine Vereinheitlichung der Datenformate noch immer etwas zu zieren. UTF-8 ist auf meinem alten Rechner nicht standard. Ich muss immer noch darauf achten, dass ich von ANSI auf utf-8 umstellen muss. Wenn ich bei der Verarbeitung auf Datensalad bei Sonderzeichen stoße, ist mein erster Gedanke UTF-8 zu ANSI Murks. Ich gehe also zu utf8_encode bzw. utf8_decode um den Zeichensalat aufzulösen. Pech gehabt!

Wenn Mail utf-8 ist, HTML charset utf-8 ist und das Script utf-8 ohne BOM gespeichert ist, könnte man verzweifeln. Den mit ut8_encode oder utf8_decode kommt man hier nicht weiter. Der Charset ist nicht das Problem, sondern der Faktor der ein Zeichen vom anderen trennt. Ein wahres Wunder also, dass nur die Sondezeichen betroffen sind. Der Umstieg von 7 Bit auf 8 Bit (Quoted Printable aus dem Mailkanal) findet man in der PHP-Doku unter den String-Funktionen (ohne Querverweis bei den Mailfunktionen): quoted_printable_decode

1. $string = "=C3=84 =C3=96 =C3=9C, =C3=84=C3=96=C3=9C";
2. echo quoted_printable_decode($string);
3. /* Sonderzeichenausgabe: Ä Ö Ü, ÄÖÜ */

Dem DAU wird die Problemzuordnung in der Doku erschwert. Ist dort schließlich statt des Gleichheitszeichen „=“ das Prozentzeichen „%“ verwendet. Wäre ich kleiner PHP-Dau nicht über die RegEx-Syntax gestolpert und hätte im Forum php.de gefragt, hätte ich immer noch nicht das Problem korrekt identifiziert. Meine Lösung war ein preg_replace mittels Zeichen-Set im JSON-Objekt:

1. $mails = file_get_contents("[Pfad zur Inbox]/1.eml");
2. $chars = json_decode('{"Ä" : "=C3=84", "Ö" : "=C3=96","Ü" : "=C3=9C","ß" : "=C3=9F","ä" : "=C3=A4","ö" : "=C3=B6","ü" : "=C3=BC","EUR" : "=E2=82=AC"}');
3. foreach ($chars as $key => $value){
4. $mails = preg_replace(/$value/ , $key, $mails);
5. }

Für dieses Problem zu umständlich (auch potentiell unvollständig), aber generell ein nettes, übersichtliches Script um mehrere Begriffe in einem Text auszutauschen und als solches nicht ganz für die Katz.

Filed under: PHP,Programmierung,Webtechniken
No Comments

Ich will bunte Codeschnipsel-Bereiche. Wie geht das? Die kurze Antwort ist ein Verweis auf das populäre GeSHi, den Generic Syntax Highlighter.

Die PHP-Funktion, die diese Aufgabe mittels inline styles löst, lautet: highlight_string().

1. <?PHP
2. $extCodeFile = "codeFolder/codeschnipsel.phps";
3. $codeSample = <<<CODESCHNIPSEL
4. Hier mehzeiligen Code-Schnipsel einfügen.
5. CODESCHNIPSEL;
6. ?>
7. <h3>Code von externem File?</h3>
8. <div class="codetxt">
9. <?PHP highlight_string($extCodeFile); ?>
10. </div>
11. <h3>Code von HEREDOC Variable?</h3>
12. <div class="codetxt">
13. <?PHP highlight_string($codeSample); ?>
14. </div>

Wer auf ein einheitliches, ungebrochenes Farbschema in seiner Site achtet und ansonsten es liebt die Kontrolle über seinen Code und sein CSS zu behalten, der wird die PHP-Funktion überarbeiten müssen. Einen sehr guten Beitrag hierzu findet man im Blog auf regexp-evaluator.de: PHP-Highlighting-Funktion verbessern.

Filed under: HTMl&CSS,PHP,Programmierung,Webtechniken
No Comments

Ich programmiere noch für den kleinen Hausgebrauch und was da so zusammenkommt, das kann man teilweise hier zum gefälligen Gebrauch oder Nichtbeachtung wiederfinden. ES dient auch mir als Erinnerungstütze.

z.B. sollte ich nicht vergessen die Methode <form action="?" method="post"> anzugeben. Wenn ich auf $_SERVER[php_self] von wegen dem XSS-Exploit das heutzutage nicht mehr bei allen Servern geht und damit ist $_SERVER[php_self] nicht mehr generell böse … wie auch immer geht eben auch ohne.

1. <?php $m = isset($_POST[m]) ? intval($_POST[m]) : 1 ; ?>
2. <form action="?" method="post">
3. <input type="text"
4. value="<?php echo $m; ?>" name="m" id="m"
5. style="width: 4em;"
6. onfocus="this.value=''"
7. onChange="this.value= isNaN(this.value)? 1 : parseInt(parseFloat(this.value))"
8. onBlur="this.value= isNaN(this.value)? 1 : parseInt(parseFloat(this.value))"/>
9. <input type="submit" value="go" class="button" />
10. </form>

Es wird per Javascript schon dafür gesorgt, dass in das Formularfeld nur Ganzzahlen dürfen, nur Javascript kann leicht abgeschaltet werden oder im Browser überabeitet werden, ergo wird die Eingabe selbstredend auch in PHP noch einmal überprüft und überarbeitet bzw mit dem Defaultwert ersetzt. OK im PHP war ich noch etwas Faul. Schließlich müsste ich auch dort prüfen mit PHP is_float() prüfen statt mit PHP isset() seltsamer Weise aber scheint hier das Ergebnis immer false zu sein und der Default wird gewählt.

Dass die Werte in Javascript neben parseInt (= runde auf Ganzzahl ab) zunächst noch mit parseFloat (= behandle Wert als Zahl) bearbeitet wird liegt daran, dass bei der Suche nach der Javascript-Syntax für PHP intval() und Co mir die folgenden beiden Links begegneten:

1. javascript parseInt is broken
2. JavaScript parseInt() bug

(mehr …)

Filed under: Programmierung
No Comments

Yessss! Endlich habe ich eine Seite gefunden mit einem guten Cheatsheet für regular Expression. Hier zwei Links die einem wirklich weiterhelfen mit diesen Ungetümen, wobei der erste Link mir einen Tick mehr zusagt als der Zweite:

1. php-regex: Regular Expressions Tutorial
2. weblogtoolscollection: Regular Expressions Tutorial
    

Hier ist noch ein nützlicher Link: Powerfull onliner – PHP leere Zeilen entfernen (RegEX in der Praxis)

Filed under: 1001 Linktipp,Programmierung
No Comments

Manchmal will man auf der Seite aufräumen, z.B. wenn man per iFrame sich bereits sehr komplexe zwei Seiten gegenüberstellt, wie google-Transation und ein Formular das in diversen Sprachen ausgefüllt werden soll. In meinem Fall waren das dann 22 iFrames jeweils 11 Mal gegenübergestellt. Also habe ich nach Tab-Navigation im Netz gesucht. Rausgekommen ist:

• 25+ Useful Javascript Tab Navigation Scripts
• Yettii Yet (E)Another JavaScript Tab Interface Implementation.

Nachdem unter den Treffern schon 25 Treffer über eine Tabnavigation-Sammlung in einem Blog ist und unter den Suchtreffern auch noch andere die Liste wiederholen, konnte ich schon nach der ersten Ergebnisseite aufhören zu suchen.

Zwei aus der Liste mit den 25 Varianten gibt es zwei die mich besonders beeindruckt haben. Zum Einsatz ziehe ich für meinen Fall aber nur eines in Betracht.

Nodetraveller hat unter Module Tabs eine beeindruckende Funktionalität der Tabs aber ohne Javascript zickte die Seite bei mir und war so gar nicht unobtrusive.

Einfach, übersichtlich, valide, funktional und vor allem unobtrusive erwies sich DOMTab – Navigation tabs with CSS and DOMscripting auf Onlinetools.org

Das hier noch aufgeführte Tab-Menu YETTII fehlt in der Liste der 25, wurd in Smashing Magazin unter 75 really useful Javascript techniques gefeatured, weil es von der Funktionalität ebenfall durchaus beeindruckt, aber wie auch schon die Tabnavigation von Nodetraveller nicht wirklich auf sein Javascript verzichten kann und fällt damit bei meinen strengen Vorgaben durch.

Ebenfalls beeindruckend, um seine Navigation rassig und nützlich (weil informativ) aufzumotzen fand ich übrigens das Beispiel von Dynamic Drive unter DD Tab Menu (5 styles) Das zublenden von Linkerläuterungen ohne die Informationen in die Linkliste reinzupressen macht es für die meisten CMS-Tools leicht integrierbar.

Nachtrag: Seufz – nehmen wir noch die Liste mit den 37+ Great Ajax, CSS Tab-Based Interfaces hier auf … auch wenn sich der eine oder andere Link natürlich wiederholt und dann lass ich es aber besser gut sein und implementiere die DOMTABs in mein 11-sprachiges SPRD-Design-Publikations-Monstrum.

Nachtrag 2: Manche nachteile zeigen sich erst, wenn man die Demo im echten Leben umsetzen will, so verschluckt das DOMtab nested DIVs. DAs ist natürlich ein böses nogo. Aktuell arbeite ich wenig erfolgreich daran, das „getElmenetByID(DIV)“ mit der Funktion getElementByClassName(el,class) (Fundstelle: Your Favourite getElementsByClassName) im Script zu ersetzen. um nur noch DIVs auszublenden, die eine entsprechende Klasse mitführen. Das Ergebnis stelle ich dann hier vor. Natürlich könnte man auch im Netz eine fertige Lösung suchen, aber hey … ein Skript überarbeiten schult ungemein. Da will ich mich ein wenig mit Javascript quälen, zwischen all den anderen Aufgaben, die meine Zeitplanung aktuell bestimmen. 😀

Nachtrag 3: Planänderung: nachdem ich mich erst wieder in objektorientiertes Javascript einarbeiten müsste und das Netz nicht selten irgendwo, Probleme längst gelöst hat, habe ich mich dann doch noch einmal umgesehen und wurde fündig. Unbtrusive und eine Klasse bestimmt was zum Inhalt der Registerkarte zählt. Auch wenn ich noch nicht den Test gemacht habe. Der erste Eindruck ist jedenfalls beeindruckend und einen Linktipp wert:
  … and the winner is …

 
Standalone Unobtrusive Tabs Script: SimpleTabs By Komrade.
 

öps … öh … dieser Winner muss auch überarbeitet werden. Siehe Kritik im nachfolgenden Artikel „Unobtrusive JavaScript Rules“. Jajajaja …. 😀

Filed under: 1001 Linktipp,Programmierung
No Comments