id 2021

Nette Erweiterung für jedes Menü mit jQuery

Es gibt kaum noch ein Menü, welches den Nutzer nicht mit einem Mouseover-Status über seine aktuelle Position informiert. Soweit so gut. Meistens sieht es so aus: Der Nutzer klickt auf den Menüpunkt, der Mouseover-Status verschwindet, die Seite verschwindet, die Seite baut sich wieder auf und der eben geklickte Menüpunkt ist dauerhaft hervorgehoben. Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite. Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.

Viele Elemente dynamisch aktualisieren

Ein aktuelles Projekt interagiert auf sehr starke Art und Weise mit dem Benutzer. Das bedeutet neben einer anpassbaren Oberfläche wird der Benutzer ständig über den Status diverser Objekte auf dem laufenden gehalten. Dabei können sich verschiedene Objekte untereinander beeinflussen. jQuery bietet ja ein tolles Ajaxkonstrukt an mit dem es kein Problem ist Daten vom Server zu holen. Aber auf die Dauer wird es doch etwas nervig immer wieder zu tippen. Und weil “objektorientiertes Javascript” und selber entwickeln so viel Spaß macht, habe ich mir eine alternative Lösung einfallen lassen: Im Projekt werden an geeigneter Stelle Elemente erzeugt, die alle benötigten Informationen enthalten. Diese werden in einem Updater registriert, welcher sich um die regelmäßige Abfrage kümmert. Das war die Theorie und jetzt kommt die Praxis.

Ein TYPO3 Menü mit PHP erweitern

Wie wahrscheinlich alle schon gelesen haben, kann meine neuste Extension dasTYPO3 Hauptmenü um beliebige Punkte erweitern. Nötig wurde das, weil Datensätze der neuen Extension über das Hauptmenü erreichbar sein sollen. Das ist doch mal wieder eine richtig schöne Aufgabe die Dank der Genialität von Typoscript auch einfach erledigt werden kann. Und so funktionierts.

PDFs erstellen mit TYPO3

Aus irgendeinem Grund möchten so viele Kunden PDFs zum Download auf ihren Seiten anbieten. Vermutlich haben sie keinen Mac. Als Fullservice Agentur scheut man sich natürlich nicht vor der Arbeit, sondern stürzt sich voller Freude hinein. Mit der Extension pdf_generator2 wird das zum Kinderspiel! Und das mit CSS Support, inklusive Hintergrundbildern! Dieser Beitrag zeigt wie.

Mein Git Tutorial

Der letzte Schrei bei der Versionskontrolle ist Git. Entwickelt von Linus Torvalds, dem Erfinder von Linux, ermöglicht es das Arbeiten auf eine viel flexiblere Art und Weise als SVN. Die Punkte die mich überzeugt haben sind:

• es muss sehr schnell sein, um mit der großen Code-Masse klarzukommen * nicht jeder darf Patches integrieren, sie müssen vorher durch einen Maintainer kontrolliert werden * das System muss dezentral arbeiten, um einerseits Bandbreite und Performance zu sparen und damit andererseits nicht bei einem Ausfall die ganze Entwicklung still steht (Quelle: Online-Tutorials.de) Nun stellt sich natürlich die Frage wie Git mit Mac OS X zusammenarbeitet, wie man es installiert und seine Projekte in ein Repository packt. Dieser Artikel will das verständlich, kurz und auf deutsch erklären. Letzte Kontrolle der Aktualität: 08 / 2011

IMAP Postfächer mit CakePHP abfragen

Für ein aktuelles Projekt musste die Anwendung per IMAP auf ein Postfach zugreifen und die Mails auslesen. Das einzige Plugin welches ich gefunden habe war für CodeIgniter, benutzte aber glücklicherweise wenig Corefunktionen was es ermöglicht hat es für CakePHP zu portieren. Es ist jetzt also sehr leicht möglich die Mails aus einem Postfach auszulesen. Im folgenden Beitrag wird gezeigt wie.

Das komplette HTML eines Elements mit jQuery auslesen

Klingt komisch, ist aber ab und zu ganz nützlich. Worum geht es? Im Elementstack von jQuery liegt ein Element welches an einem anderen Ort wieder eingefügt werden soll. So sieht das HTML Element aus: [code lang=”html”]<a href=”#” id=”ein-interner-link”>Ein <span>wichtiger</span> Link</a> Natürlich wird das Element ausgewählt und das HTML mit der Funktion html ausgelesen. [code lang=”javascript”]$(“#ein-interner-link”).html(); Diese Abfrage liefert allerdings das hier: [code lang=”html”]Ein <span>wichtiger</span> Link Das ist nicht das gesamte HTML, sondern nur das innerHTML. Im folgenden Artikel gibt esdie Lösung. Oder direkt zur verbesserten Lösung.

Mit CakePHP in 30 Minuten Tags zu einer Tabelle hinzufügen

Im Web 2.0 geht nichts mehr ohne Tags. Und ohne ein Rapid Development Framework kann das ganz schön haarig werden. Zum Glück springt CakePHP mit leuchtenden Augen (oder waren es die Augen des Entwicklers?) in die Bresche und begeistert mit sehr einfachen Umsetzung. Mit der folgenden Anleitung bekommt ein beliebiges Model die Möglichkeit Tags zu speichern, inklusive Has and belongs to many Beziehung.

Mit jQuery und CakePHP voneinander abhängige Selectboxen

CakePHP ist genial, nicht nur was die Erstellung von Formularen angeht. Aber leider setzt der integrierte AjaxHelper Prototype voraus und als überzeugter jQuery-Nutzer kommt das für mich nicht in Frage. Nun gibt es aber beim aktuellen Projekt folgendes Problem: Einem Projekt wird ein Kunde zugeordnet und jedes Projekt kriegt einen Ansprechpartner. Dieser Ansprechpartner ist in der User-Datenbank gespeichert und besitzt eine ID zu einem Kunden. Legt man ein neues Projekt an und wählt einen Kunden aus, sollen nur noch die passenden Ansprechpartner angezeigt werden. Nichts leichter als das! Hier stelle ich meine sehr flexible Möglichkeit für die Umsetzung mit jQuery und CakePHP vor. Grundwissen allerdings vorrausgesetzt.

Der beste, native Twitter-Client für OSX

Ja, ich bin dabei. Folge meinen Updates unter http://www.twitter.com/paul_lunow. Ich bin eingestiegen in die Welt des Microbloggings. Als voll aktiver Mitbewohner der Web 2.0 WG darf Twitter im Portfolio natürlich nicht fehlen. Dabei habe ich nicht immer so gedacht. Lange habe ich jede Umfrage lächelnd mit der Antwort “Den Mist brauche ich nicht” beantwortet und bin weiter gezogen. Aber das hat sich geändert! Twitter rückt mehr und mehr in den Webmittelpunkt und mit einer guten Auswahl von Menschen deren Updates man folgt, erhält man viele lustige oder nützliche Informationen. Ein paar Autoren von Fachbüchern sind ebenfalls dabei und während man ihr Buch ließt kommt eine Nachricht wie “Mache Glühwein warm, von wegen Frühling”, dass macht es menschlicher, näher. Und man wird immer wieder überrascht. Zum Beispiel von den Drei Fragezeichen oder Fettes Brot. Alle dabei. Und zu guter Letzt ist es ein nettes Gefühl zu wissen, nein zu lesen(!), dass man nachts um halb 2 nicht der einzige ist, der vor dem Computer sitzt und sich mit Dingen beschäftigt die bei Stromausfall keine Sau interessieren. Also los gehts! Allerdings hat wohl niemand Lust ständig Neuladen auf der Twitterseite zu drücken. Deshalb braucht man einen guten Twitter-Client: Ein kurzer Test mit Schreenshots, Links und persönlicher Empfehlung folgt in diesem Artikel.

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.

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!

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.

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.

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.