Thema ‘Tutorial’

Schönes Javascript mit Callbacks

Callbacks sind jedem jQuery Anweder bekannt. Von onClick bis zu onResize bindet der Webentwickler jede Menge Logik an festgelegte Events. Meiner Meinung nach eine angenehme Art zu programmieren und gut nachvollziehbar, da der Code gut lesbar bleibt, sofern man nicht übertreibt.

Wenn man selbst Applikationen programmiert die auf Javascript basieren und später noch diverse Erweiterungen ermöglichen sollen, dann macht es durchaus Sinn eigene Callbacks anzubieten. Sei es in einer jQuery Extension oder einer eigenen Applikation.

Zum Eintrag Schönes Javascript mit Callbacks →

Asynchron Inhalte in WordPress nachladen

Neben der Gründung einer neuen Firma die sich um Webentwicklungsthemen und Medienproduktion kümmert (Die Ape Unit GmbH Berlin) hatte ich eine Menge mit WordPress zu tun. Ein guter Grund hier mal wieder etwas Leben in den Blog zu bringen.

Es geht natürlich um den heißen Scheiß: Ajax. Mit aktiviertem JavaScript soll bei einem Klick auf einen Eintrag der Eintrag dynamisch nachgeladen werden anstatt auf die Einzelansicht zu verlinken. Mit TYPO3 und Typoscript baut man sich dafür ein weiteres Page Objekt und passt die Ausgabe an, darüber hatte ich schon berichtet. Bei WordPress gibt es aber kein Typoscript.

Mein erster Gedanke war ein alternatives Template per URL Parameter zu laden in dem nur die Inhalte angezeigt werden. Die Anleitungen waren allerdings allesamt nicht besonders ergiebig. Der nächste Ansatz war den gesamten Inhalt abzufragen und per jQuery nur den entsprechenden Container mit den Inhalten auszugeben. Das finde ich aber irgendwie unelegant.

Und nach einmal drüber schlafen kam dann der rettende und sehr simple Einfall.

Zum Eintrag Asynchron Inhalte in WordPress nachladen →

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.

Zum Eintrag PHP Kurzschreibweisen →

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.

Zum Eintrag Modulo verstehen und benutzen! →

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.
Zum Eintrag Spaß mit location.hash und jQuery →

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!

Zum Eintrag Menü Tutorial für jQuery →

Asynchrone Datenübertragung zwischen TYPO3 und jQuery

TYPO3 Entwicklung und Liebe

Nach dem ich mal wieder über den Appell an Webentwickler gestolpert bin, beginne ich meinen ersten zweiten Eintrag dieses Jahres mit einem tollen Thema welches ich zwischen den Jahren entdeckt habe: Die effektive Kommunikation zwischen TYPO3 und jQuery dank Ajax.

Möglich macht das die Funktionalität der eID seit TYPO3 Version 4 und die geniale Handhabung vom Lieblingsframework mit JSON. Eingesetzt hab ich es in einer tollen, neuen Extension die wir entwickelt haben und die hoffentlich bald das Licht der Welt erblicken wird. Das wird dann gesondert gefeiert.
Zum Eintrag Asynchrone Datenübertragung zwischen TYPO3 und jQuery →

TYPO3 Seiten dynamisch nachladen mit jQuery

Jetzt kommt ein herrlicher Ajaxeffekt: Beim Klick auf einen Menüpunkt wird der Inhalt sanft ausgeblendet, die aufzurufende Seite wird asynchron vom Server geladen und dem User sanft wieder eingeblendet.

Herrlich, oder? Das ist alles kein Problem mit TYPO3 und jQuery. Undzwar mit Hausmitteln, ohne ein einziges Plugin. Eine Demo gibt es auf meiner privaten Seite unter Paul-Lunow.de, die ausführliche Anleitung hier im Blog.
Zum Eintrag TYPO3 Seiten dynamisch nachladen mit jQuery →

Verkettete Funktionen und Checkboxen mit jQuery

Endlich konnte ich mich mal wieder lange und intensiv mit jQuery auseinander setzen. Es ging um ein Formular welches auf verschiedene Angaben verschieden reagieren sollte. D.h. wenn man auswählt das man Nr 1 ist, gibt es im folgenden andere Pflichtfelder als wenn man Nr 2 wäre, usw.

Dabei konnte ich die ganze Zeit lächeln weil es mit jQuery so viel Spaß macht zu arbeiten. Und das will ich natürlich niemandem vorenthalten. Eine einzige Zeile reicht aus um eine ganze Reihe Aktionen für alle Browser (auch den IE6) auszuführen. Man kann sehr einfach abfragen ob Checkboxen angeklickt sind oder nicht.

Außerdem habe ich eine tolle Funktion entdeckt um zu verhindern das auffahrende Elemente außerhalb des sichtbaren Bereichs liegen. Viel Spaß damit!
Zum Eintrag Verkettete Funktionen und Checkboxen mit jQuery →

Meine erste Webseite, Teil 4

Jetzt steht schon eine richtige Seite im Netz, es gibt ein Hauptmenü und man kann der ganzen Welt seine Meinung mitteilen. Herzlichen Glückwunsch! Du gehörst zu den ca. 3% "Creators", d.h. Personen die im Internet Inhalt bereitstellen.

Aber purer Inhalt ist noch nicht alles. Die Seite soll besser werden und die Besucher sollen etwas geboten kriegen. Deshalb dreht sich dieser Artikel darum wie man eine Seite besser machen kann. Es gibt ein paar Tipps und Tricks und Anleitungen die sich im täglichen "Netzleben" bewährt haben.

Zum Eintrag Meine erste Webseite, Teil 4 →