Linktipp: Unobtrusive JavaScript Rules

tempa wrote this 16:46:

Einen lesenswerten Artikel zu unobtrusive Javascript ist mir hier begegnet:

The seven rules of Unobtrusive JavaScript

Diesen Artikel sollten sich einige Javscript-Coder zu Gemüte führen, die zwar die Funktionalität aus ihrem HTML raushalten, aber via CSS Inhalte unerreichbar setzen, die nur mit aktivem Javascript zugänglich werden — und das ist alles andere als „unobtrusive„. Jene beschriebene Unsitte findet sich nicht selten in flyout-Menus und Tabnavigationen. Ohne Javascript sind manche Sites eben schlicht kaputt.

Echte unobtrusive Javascripts in der Site achten darauf, dass ihre Site heil bleibt, auch wenn ohne Javascript etwas Eleganz und Bequemlichkeit verloren geht.

Aufräumen mit Tabs und Javascript

tempa wrote this 13:54:

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:

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 …. 😀

Manche Änderungen sind überfällig: Die Templaterie wird sich verändern

tempa wrote this 14:37:

Noch ist nicht raus, wie sich die Site entwickelt. Das vernachlässigte Stiefkind dümpelte ohne Pflege nun schon eine viel zu lange Zeit vor sich hin. Editland erhalten Sie natürlich immer noch. Wenden Sie sich hierzu bitte an Quattronet, wenn Sie sich für das kleine MiniCMS für Business-Web-Visitenkarten interessieren.

Auf der Templaterie wird erst einmal für eine relativ lange Zeit eine Baustelle herrschen. Denn ich habe viel zu viel Spaß mit den T-Shirts auf Franchie.de, als dass ich die Umstellung hier mit großem Druck vorantreiben wollte.

Für Neugierige: Besucherverlust bei 1 Jahr Pause

tempa wrote this 15:51:

Für alle die das schon immer wissen wollten: Ein mittel bekanntes Blog verliert, wenn man ein Jahr pausiert, rund 70% seiner Besucher

Wer also seine Besucherstamm nicht verlieren sondern mehren will, sollte darauf schauen, wenigstens 14-tägig sich Zeit für seine Site zu nehmen. 😀

Achso, ich war natürlich nicht untätig. Mein Fokus lag einfach hier: www.franchie.de (bunte T-shirts mit witzigen Motiven) und da auch nicht unbedingt in diesem Blog sondern in meinem Vektorprogramm, was man an der proppe vollgestopften T-Shirt-Kiste unschwer sehen kann.

PHP-Shorthand – ein Überblick (Linktipp)

tempa wrote this 15:32:

Nicht alles was ich da sah, erkannte ich als Shorthand, denn ich dachte, das sei die ganz normale Syntax, aber immerhin hier ist für den Anfänger ein kleiner Einblick der wichtigsten Shorthand-Syntax-Beispiele: PHP Shorthand Syntax

Nachtrag: Das sollte ich hier wohl auch noch dazu packen, obwohl ich es dann noch weniger als Shorthand erkannte und auch als relative Unvollständig empfinde. Schließlich wurde auf „.=“ nicht eingegangen: PHP Shorthand Reference (link lost) ersatzweise: PHP – Shorthand If…Else Statements

jajaja … alle vergessen die Hälfte und unter PHP Shortcuts findet sich noch dieser Links: These Things I Know, PHP Tips

Gute Linktipps zum Thema Shorthand, Shortcuts zur Ergänzung der Linktipps hier werden gerne in den Kommentaren entgegengenommen.

Tooltip mit bösem inline Javascript

tempa wrote this 02:17:

Eigentlich bin ich ja ein absoluter Verfechter der Trennung von strukturiertem Inhalt, Aussehen und Benimm einer Website, aber in der Administration eines CMS ist es manchmal dann doch praktischer, wenn man mit dem alten onmouseover="" onmouseout="" im HTML-<TAG> arbeitet. Ein netter Tooltip an einer kryptischen Schaltfläche hilft dem Nutzer, der so oder so Javascript für das CMS aktiviert haben muss, bei der Bedienung des Werkzeugs.

Das ist zwar alter Kram aber weil ich das gerade gemacht habe und das eine oder andere erst Nachschlagen musste, will ich hier mein Ergebnis verposchten, für Andere zum Finden:

Tooltipp mit inline-Script

  1. <a onClick="funktion()"
  2. onmouseover="this.firstChild.style.display='block';"
  3. onmouseout="this.firstChild.style.display='none';" >
  4. <spanstyle="position: absolute; width: 200px; height: auto; margin-top: 28px; margin-left: -100px; padding=".5em" border: 1px solid #aaa; color: #494949; background: #efefef; display: none;">
  5. Tooltip-Text</span><img src="buttoff.gif" alt="Button-Text"
  6. onmouseover="this.setAttribute('src','button.gif');"
  7. onmouseout="this.setAttribute('src','buttoff.gif');" /></a>

Und so kann das dann aussehen:

Viel Platz für den Namen der Funktion und Anweisungen ;).Tool-Button

Nachtrag: ach Gottchen, mein frisch aktualisierter Firefox mag nicht, was ich da gemacht habe. Nur gut, dass ich es nur für den IE brauchte und hier auch keine Rücksicht auf die veralteten Versionen genommen habe. Aber dann … der Firefox nimmt eh gruselige Entwicklung und ich mag ihn immer weniger. Ich weiß wirklich nicht was der FF an diesen simplen DOM-Anweisungen auszusetzen hat. Meine Güte. OK. Der Firefox wollte unbedingt auch noch Javascript blockieren, obwohl ich dafür ein Addon habe … jajaja Javascript ist böse und es macht Sinn es nur von Fall zu Fall zu gestatten. Einstellungen korrigiert — jetzt tut’s auch im FF.

Addthis für Editland-Sites

tempa wrote this 12:09:

AddThis Makes Sharing Easy“ heißt es auf der Site von Addthis und sich in den Social-Media-Diensten bekannt zu machen, ist ein wichtiges Marketing-Instrument. Damit man sich den populären Dienst auf die Editland-Site holen kann, gibt es hier das Plugin für das CMS. Das Script und Methode für den folgenden Button im Plugin stammt von Webreference.

Das Plugin herunterladen: ADDTHIS-Dienst für Editland

Das Plugin installieren ist ganz einfach:
Die Ordner content und plugins in die Editland-Installation kopieren, den Platzhalter ###---ADDTHIS---### in das Template im Ordner templates/[Dein Template] in alle Template-Dateien in den <body> an die Stelle kopieren an der später die Schaltfläche erscheinen soll und das Plugin in der code/plugins.csv mit der Zeile |###---ADDTHIS---###|plugins/addthis/|../plugins/addthis/|index.php| anmelden.

CSS-Liste wie ein Buchindex

tempa wrote this 05:23:

Liste im Buchindex-Layout (Illustration)

Eine Liste, die wie das Inhaltsverzeichnis in einem Buch aussieht, kann man immer gebrauchen. Das ist schon einen Linktipp wert.

CSS: Menu List Design,
ein tutorial von Webdesignerwall.com

Have, fun.

Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau

tempa wrote this 13:54:

Dank der Hilfe von Michael von Reichweite.de, konnte nun das Problem gelöst werden und ich weiß wieder, warum ich selbst nur in ganz kleinem Maß schon für Kunden PHP anfasse, und hier lieber Fachmänner ins Boot hole. Aber es kommt, Leute es kommt. Ich werde peut a peut besser. Danke auch an Robert, dass er mir die Hilfe von seinem Blog rübergeschickt hat.

  1. <? /* */
  2. $dgal = get_posts('numberposts=0&category=1');
  3. function getThumbs($stichwort, $dgal){
  4. foreach($dgal as $post) : setup_postdata($post);
  5. $galArr = explode("n", get_post_meta($post->ID, "designthumbs", true));
  6. foreach($galArr as $thepics){
  7. $dtharr = explode(",", $thepics);
  8. $pos = strpos($dtharr[1], $stichwort);
  9. if($pos===false){}else{
  10. $galentry = '<dl class="galerie2">'."nt".'<dt><span><img src="http://franchie.de/ ... /uploads/'.$dtharr[0].'" alt="'.$dtharr[2].'" /></span></dt>'."nt".'<dd><a href="'.get_permalink($post->ID, '', true).'" title="'.the_title('','',false).'">Details ansehen</a> /<br /><a href="http://franchie.spreadshirt.net/ ... /design/'.$dtharr[3].'" title="'.$dtharr[2].'">Will ich haben!</a></dd>'."n".'</dl>';
  11. echo $galentry;
  12. };
  13. };
  14. endforeach;
  15. } //Funktion ende
  16. //*/
  17. ?>

Im Beitrag oder Seite folgt nun noch der Aufruf der Abfrage mit den jeweiligen Begriffen. Voila eine Thumb-Archivgalerie via Custom Fields.

  1. <h4>Thumbs mit Menschen</h4>
  2. <? getThumbs('Menschen', $dgal); ?>
  3. <h4>Thumbs mit Tiere</h4>
  4. <? getThumbs('Tiere', $dgal); ?>
  5. etc.

Die eine oder andere Kleinigkeit muss bei Franchie.de noch angepasst werden, dann wird diese Archiv-Galerie dort laufen. Also noch ein klein wenig Geduld … ach ja und irgendwann werde ich das noch mit Blättern durch die Thumbs ausbauen müssen, denn je mehr es werden, desto problematischer wird es — wer will schon Warten bis 2000 Thumbs geladen sind ;-). Das ist also auch erst noch ein Provisorium, das aber sicherlich eine Weile hält … d.h. ich muss noch ausprobieren wie die Page-Funktion von WP reagiert … ggf. vermutlich muss die Funktion in die Datei funktion.php verfrachtet werden (Jetzt erst Mal aber warten andere Aufgaben. Ich aktualisiere den Beitrag so bald ich kann).

BTW: Ich nehme für die Blätterfunktion jederzeit gerne Hilfe an, damit innerhalb einer Stichwortabfrage auch 1000de von Thumbs vorkommen dürfen.

Hier noch Mal was die Ausgangssituation war:

Ich habe in der Kategorie 1 ein Custom field namens ‘designthumbs‘. In dem Feld ist der Inhalt wie folgt:

Name des Thumbs_a, Stichwort1 Stichwort2 Stichwort3 etc, externerLink_a

Name des Thumbs_b, Stichwort1 Stichwort3 Stichwort7 etc, externerLink_b
etc.

Diese Thumbs sollen in einer Galerie in einer Seite ausgegeben werden:

H3: Stichwort 1:
============
[Thumb_a]
Postlink
externer Link a

[Thumb_b]
Postlink
externer Link b

H3 Stichwort 2
============
[Thumb_a]
Postlink
externer Link a

Ein Archiv mit Thumbs via custom fields für WordPress

tempa wrote this 15:13:

Nachdem ich vor einigen Tagen meine erste eigene WordPress.PHP-Erweiterung für die Sidebar zusammengefriggelt hatte, ging ich munter daran, diesen netten praktischen Code-Schnipsel in eine Seite einzubinden und parallel die ganze Angelelgenheit ein wenig auszubauen. Doch was relativ schnell und einfach in die Sidebar einzubauen ging, erweist sich in der Seite in der erweiterten Form doch als reichlich widerspenstig. Nach etlichen Try&Error-Fehlschlägen und zahlreichen traurigen Teilerfolgen, habe ich es nun beinahe geschafft … beinahe, denn leider looped mein Script noch etwas übereifrig gleich mehrfach und listet die Liste damit mehrfach hintereinander. Ich will mit der Geschichte von Anfang an beginnen. (mehr …)

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM