Der Interaktionsdesigner 2016

März 2009

Layout mit 100 Prozent Höhe

Diesmal geht es die Höhe von Div-Containern. Findige Designer haben sich ausgedacht ein Layout zu basteln, welches eine Fußzeile besitzt die immer am unteren Bildschirmrand klebt. Es sei denn der Inhalt ist größer, dann muss die Fußzeile mit runterrutschen. Soweit kein Problem; vor einiger Zeit habe ich ein schönes Beispiel gefunden welches genau diese Problem löst, in allen Browsern und nur mit CSS. Was aber, wenn die Seite mit dem 960 Grid System CSS Framework aufgebaut wurde und nicht nur ein Footer hat sondern zwei? Um genau zu sein, ist die Breite vom CSS Framework auf 960 Pixel beschränkt, der Footer mit Inhalten befindet sich innerhalb des umfassenden Containers, aber die Hintergrundgrafik soll über die gesamte Breite gehen. Unmöglich? Niemals! Es folgt eine Skizze, der Lösungsansatz und ein paar Worte über das 960.gs.

März 2009

Cooles Templatesystem für PHP

Ich habe ein paar Stunden in ein Templatesystem für PHP investiert. Vorher habe ich mir natürlich Smarty und viele weitere Lösungen angesehen, aber keiner der Ansätze hat mich so richtig glücklich gestimmt. Marker, wie in TYPO3 mit “ausgedachten” Zeichen zu umgeben, um anschließend eine neue Syntax für Schleifen und Bedingungen zu lernen, finde ich zu kompliziert. Außerdem habe ich mich hier im Blog schon einmal positiv über die Kurzschreibweisen von PHP geäußert. Da ist es natürlich nur noch ein kleiner Schritt zu einer funktionalen Klasse, welche ein PHP Template mit Inhalt befüllt. Im folgenden Beitrag stelle ich meine einfach zu nutzende Möglichkeit vor. Es ist mein erster Ansatz Richtung Template und ich freue mich sehr über Kommentare und Verbesserungsvorschläge!

März 2009

Animierte Header mit TYPO3 und jQuery

Viele schöne Seiten präsentieren großflächige und hochauflösende Bilder. Natürlich wollen unsere Designer das auch und damit der geneigte Besucher Abwechslung bekommt und die Bilder mit dem Inhalt der Seite harmonieren können, wird die Seite mit TYPO3 aufgebaut und die Kopfbilder über die Seiteneigenschaften (Ressourcen / Dateien) selbst gepflegt. Soweit kein Problem und schon tausendmal implementiert. Aber wie sieht es aus, wenn der Redakteur mehrere Bilder auswählt? Na logisch: auf der Seite werden sie sehr sanft übergelendet (fadeIn, fadeOut). Und klar, das passiert natürlich mit jQuery und dem genialen **Plugin innerfade **von den medienfreunden. Diese Technik eingesetzt findet sich zum Beispiel auf der Seite zur Ausstellung über Audrey Hepburn.

März 2009

WordPress Benutzeranmeldung im Frontend

Neue Benutzer können sich bei WordPress bequem anmelden, wenn bei den Einstellungen die entsprechende Checkbox angeklickt wurde. Allerdings können sich die Benutzer nur im Backend anmelden, und das ist doch alles andere als elegant. Außerdem kann der Benutzer nur seinen Namen und eine E-Mailadresse angeben. Weitere Daten werden nicht abgefragt und das Passwort automatisch generiert. Suboptimal. Es gibt das Plugin Register Plus welches auf vielfältige Art erlaubt das Registrierungsformular zu erweitern (auch mit eigenen Feldern). Aber trotzdem befindet sich das Teil noch im Backend. Aber das muss nicht so bleiben.

Februar 2009

Automatisch erkennen wie CSV Dateien aufgebaut sind

CSV Dateien sind z.B. Exports aus Datenbanken oder Excel. Der Name steht für _Comma-Separated Values _und bedeutet, dass die Werte von einem Komma getrennt sind. Damit kann man einfach eine CSV importieren und zum Beispiel in PHP weiter verarbeiten. Tja, einfach ist das natürlich nicht und jedes Programm erstellt andere CSV Dateien. Ich habe eine Funktion geschrieben die versucht automatisch zu erkennen wie eine CSV Datei aufgebaut ist. Hier ist eine Demo und im folgenden Artikel kommt die Funktionsweise.

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!