Der Interaktionsdesigner 2021

Februar 2009

jQuery UI Progressbar und PHP verbinden

Der neuste Release Candidate vom jQuery Userinterface 1.6 ist genial! Vor allem das neue Element, die Progressbar, hat es mir angetan. Die Bedienung ist sehr einfach, einem Element wird die Progressbar zugewiesen und die Bar dehnt sich in den gegebenen Proportionen automatisch aus. Herrlich und sehr einfach mit einer Schleife in JavaScript zu verändern. Aber wie um alles in der Welt kriegt man die Bar dazu den aktuellen Status einer langwierigen PHP Operation wider zu spiegeln? Ich habe eine ganze Weile herumprobiert und das folgende ist dabei heraus gekommen. Hier ist die Demo und im Beitrag folgt die Beschreibung.

Februar 2009

Seiteninhalte einer Seite in einem Marker ausgeben

Der Titel klingt etwas komisch, aber die Funktion an sich ist super praktisch. Worum geht es? Es gibt verschiedene Situationen in denen Inhalte vom Redakteur gepflegt werden sollen, die z.B. auf jeder Seite auftauchen sollen. Aktuell hatten wir das mit einem Copyright Hinweis der auf jeder Seite erscheinen “musste”. Die erste Idee war, es einfach fest ins Template zu schreiben, aber das ist natürlich super unpraktisch bei Mehrsprachigkeit und der “Workflow” des Redakteurs ist alles andere als optimal. Also wird der Inhalt**einer versteckten Seite in ein Marker transportiert **und im Template ausgegeben. Ganz einfach!

Februar 2009

Voneinander abhängige Selectboxen mit jQuery

Folgendes Szenario: Für einen Kunden gibt es ein sehr umfangreiches Formular mit einer Menge Eingabemöglichkeiten, die voneinander abhängig sind. Zum Beispiel bedeutet die Auswahl von “monatlich”, “vierteljährlich”, “halbjährlich” und “jährlich” eine Veränderung der Auswahlbox von Monaten (0-11). Wählt man “halbjährlich” darf nur noch 0 oder 6 ausgewählt werden. Nichts leichter als das, habe ich gesagt, jQuery kann schließlich alles. Töten wir den Internet Explorer? Nein, das können wir nicht (bla bla), dann wirds halt etwas komplizierter.

Februar 2009

CSS Dateien mit jQuery nachladen

Diesmal kurz und knackig ein wirklich praktischer Tipp! Als verantwortungsvoller Webentwickler lege ich natürlich eine print.css an und versuche dem Kunden zu erklären, dass ein Ausdruck der Seite anders, aber super gut aussieht und das der aktuelle Webstandard ist und unbedingt eingesetzt werden sollte. Aber die Antwort ist dann: “Das versteht doch kein Mensch. Können Sie nicht einfach einen Button einrichten um die Vorschau anzeigen zu lassen? Nach meinen Erfahrungen müsste das einfach zu machen sein.” Jaja… nicht aufregen. Lieber über die neue Aufgabe freuen und darüber bloggen: Wie und warum man eine CSS Datei dynamisch nachladen kann. Getestet in Firefox, Safari, IE6 und 7.

Februar 2009

Die große Liste der E-Payment-Solutions

Von den Besuchern auf der Webseite möchte man am liebsten jede Menge Geld haben. Und das sollen sie am besten gleich über die Seite bezahlen. Per Kreditkarte, Überweisung, PayPal, Webcents oder was auch immer! Nur sicher und schnell muss es gehen. Eine SSL Verbindung ist dabei Grundvoraussetzung; und anschließend braucht man nur noch einen Anbieter der einem die wirklich lästige Bezahlabwicklung abnimmt. Es folgt die große Übersicht der verfügbaren Dienste.

Februar 2009

TYPO3 mit geschütztem Bereich - aber ohne Login

Für einen unserer Kunden brauchten wir eine einfache Seite, plus ein paar Unterseiten, um den Projektvorgang zu dokumentieren. Nichts Kompliziertes und nichts super Geheimes, aber doch soweit versteckt, dass die Besucher und die Suchmaschinen die Inhalte nicht finden. Deshalb haben wir folgenden Vorgang ermöglicht: Wird die spezielle Unterseite mit dem zusätzlichen Parameter “login=passwort” aufgerufen, wird der Inhalt angezeigt, wenn nicht wird sich freundlich beim Benutzer entschuldigt. Das ganze funktioniert mit einem einzigen Extensiontemplate. Ohne Extensions und jQuery. Viel Spaß beim Lesen!

Februar 2009

Ultimative TYPO3 Sitemap ohne Extension aber mit jQuery!

Mit TYPO3 kann man auf einfache Art eine Sitemap für das Projekt erstellen. Dazu fügt man ein neues Contentelement auf eine beliebige Seite ein und wählt den entsprechenden Ausgangspunkt. Fertig ist die verschachtelte und wenig ansehnliche Liste. Jetzt gibt es eine ganze Reihe Extensions die hier ansetzen um ein bisschen Interaktivität reinzubringen. Aber warum so kompliziert? Wenn jQuery eingebunden ist, benötigt man nichts weiter als ein zusätzliches HTML Element, ein paar JavaScriptzeilen und etwas CSS. Hier kommt ein Tutorial für eine interaktive, mehrsprachige Sitemap, die auch ohne JavaScript benutzbar bleibt und CSS Sprites benutzt. Getestet unter Firefox, Safari, Internet Explorer 6 und 7. Anwendbar auf jede verschachtelte Liste, mit einer dynamischen Demo.

Januar 2009

PHP Kurzschreibweisen

Mit PHP kann man zwischen <? und ?> nicht nur ganze Programme schreiben sondern auch einfach und schnell Werte ausgeben. Das ist besonders praktisch für Templates mit Funktionen wie z.B. in WordPress und TYPOlight eingesetzt. Anders als bei TYPO3 wird der Inhalt nicht über Marker in den HTML Code transportiert, sondern direkt über dynamischen PHP Code. Diese Art der Templates finde ich sehr gut, weil man auf verschiedene Bedingungen einfacher reagieren kann als, z.B. mit Typoscript. Allerdings erfordern solche Templates auch mehr Konsequenz vom Entwickler, denn Präsentation und Logik gehören nicht vermischt. Jetzt kommt eine Übersicht der**praktischen Kurzschreibweisen **zum Verwenden in eigenen Projekten, WordPress oder TYPOlight.

Januar 2009

Modulo verstehen und benutzen!

Diesen Beitrag widme ich meinem Informatiklehrer Herrn Westphal, der es so sehr versucht hat, aber es hat einfach noch vier Jahre gebraucht. Zugegeben, ich bin nicht der größte Mathefan und bin heilfroh, dass soviel im Internet ohne funktioniert. Aber man darf sich bekanntlich nicht vor Wissen verschließen und wenn man dahinter gekommen ist, macht es ja auch Spaß! So kürzlich geschehen mit der Funktion Modulo! Ich erinnere mich an all die dunklen Stunden, in denen ich halbherzig versucht habe das zu verstehen, aber es wollte einfach nicht so wie ich. Aber jetzt habe ich es raus und kann nur empfehlen: lest den Beitrag wenn ihr diese Operation noch nicht kennt oder versteht.

Januar 2009

Die Kiwi macht Mode!

Der erste, interaktive Eventplaner für die Berliner Fashionweek ist online! Berlin Fashion Week ist Online Unter berlin.modabot.com kann sich der interessierte Benutzer darüber informieren, an welchem Tag welche Events stattfinden!

Januar 2009

Spaß mit location.hash und jQuery

Weiter gehts mit Tutorials für jQuery! Nach dem sich der erste Teil mit Navigation beschäftigen sollte, habe ich gemerkt, dass es keinen Sinn macht nur ein Tutorial darüber zu schreiben. Denn so einfach eine simple Liste mit Links auch aussieht; - umso mehr gibt es darüber zu sagen. Also wird es eine ganze Reihe Tutorials dazu geben! Diesmal gehts um den Location Hash. Das ist der Teil der URL der mit einer Raute (#) von der restlichen Adresse getrennt ist. Bekannt von Sprungmakern (interne Seitenverweise) gewinnt er im Zusammenspiel mit neusten JavaScripttechnologien immer mehr an Bedeutung.

Januar 2009

Linktipp am Sonntag

Gerade bei

Januar 2009

Menü Tutorial für jQuery

Nachdem die USA einen neuen Präsidenten hat und dessen Team sofort die Seite des Weißen Haus aktualisiert hat (gefunden im Designtagebuch) und jQuery Version 1.3.1 erschienen ist, wäre es an der Zeit, den Interaktionsdesigner mit ein paar jQuery Tutorials aufzufrischen. Das Erste dreht sich um Menüs, bzw. Navigationen. Das JavaScript ist unaufdringlich und ermöglicht dem Nutzer durch ein paar einfache Tricks ein besseres Erlebnis. Benutzer ohne aktiviertes JavaScript werden nicht ausgeschlossen. Es geht um die Funktionen hover und click und ein bisschen CSS3. Fragen sind gern gesehen in den Kommentaren und jQuery auf jeder Seite!

Januar 2009

jQuery Version 1.3 ist da!!!

Herrliche Neuigkeiten: eine neue jQuery Version ist erschienen!!! Man beachte den

Januar 2009

Weg mit den verdammten Anführungszeichen von WordPress

WordPress verändert bekanntlich alle Anführungszeichen in einem Beitrag und zerstört so jedes Codestückchen Aber das muss nicht sein! Diese Zeile muss in die functions