Templates, CSS und TypoScript – Typo3: Extension selbst erstellen

Im letzten Teil der Artikelserie »Typo3: Exension selbst erstellen« haben wir begonnen, ein kleines Kontaktformular für Typo3 zu programmieren. Die Extension funktioniert zwar, doch kann man noch vieles verbessern. Deshalb fügen wir in diesem Artikel nun HTML-Templates, CSS-Styles und TypoScript-Konfiguration ein.

Aus Grundlage dient uns hier die Kontaktformular-Extension, die wir im letzten Artikel erstellt haben. weiterlesen…

Tagcloud mit PHP und JavaScript erstellen – Word Cloud d3

Seit einigen Monaten quälte mich ein Problem. Ich hatte angefangen, Wordles in Javscript zu implementieren, um diese dann auf einer Seite dynamisch einzubinden. Doch leider scheiterte ich an der Performance. Doch endlich habe ich eine Lösung gefunden, denn Jason Davies hat es geschafft, Word Clouds mit JavaScript zu rendern.

Das ist wunderbar, denn diese sind mit ein paar JavaScript-Kenntnissen sehr flexibel in eine Seite einbindbar. Doch gibt es dabei einiges zu beachten. Damit der Einstieg auch gut gelingt, schreibe ich hier ein kleines Tutorial, wie man einfach mit Word Cloud d3 eine Tagcloud erstellt. weiterlesen…

Formulare, Parameter und Eingaben – Typo3: Extension selbst erstellen

Seit meinem letzten Artikel kannst du einfaches »Hello World«-Frontend-Plugin für Typo3 programmieren. Als nächstes werde ich dir zeigen, wie man ein etwas komplexeres Plugin entwickelt. Am Ende dieses Artikels wirst du in deinen Plugins Formulare und POST- und GET-Variablen verarbeiten können und aus Typo3 heraus Mails verschicken können. Zudem hast du dann die Basis für dein eigenes Kontaktformular-Plugin, dass du später beliebig erweitern und in deinen eigenen Projekten verwenden kannst. weiterlesen…

Kickstarter, Grundlagen & Hallo Welt – Typo3: Extension selbst erstellen

Typo3 ist mächtig — aber nicht wegen des riesigen Funktionsumfangs, sondern wegen der riesigen Menge an Extensions, die für das Content Management System verfügbar sind. Doch oft braucht man nur eine kleine Funktion und muss dafür eine riesige, total überladene Erweiterung installieren, oder man findet einfach nicht die richtige Erweiterung für den eigenen Bedarf. Dann heißt es: selber Hand anlegen und eine eigene Extension schreiben.

Nachdem ich schon gezeigt habe, wie aus einem Design eine fertige Typo3-Seite wird, will ich in dieser Artikelserie zeigen, wie man eine Erweiterung für Typo3 schreibt und welche Erfahrungen ich auf diesem Gebiet schon gemacht habe.

Wenn man sich erst einmal mit der Entwicklung von Extensions für Typo3 auskennt, hat man ein sehr mächtiges Werkzeug an der Hand. Denn jede noch so komplizierte oder ausgefallene Funktion kann man nun in eine einfach zu bedienende Extension schreiben und in allen Projekten wieder verwenden. weiterlesen…

Designen einer Scrollbar – so geht es richtig

Am Anfang war der Frame. Und mit dem Frame kamen die Scollbars innerhalb der Seite. Und der Programmierer sah, dass es gut war.

Jahrelang war auch alles gut, bis dann schließlich die Designer die unendlichen Weiten des Webs unsicher machten. Alles wollten die Designer verändern, alles sollte schöner werden. Doch an Scrollbars bissen sie sich die Zähne aus. Scollbars ließen sich leider nicht ohne weiteres anpassen.

In diesem Artikel zeige ich, wie man trotzdem, übrigens ganz ohne iFrames, Scollbars erstellen kann, die auch noch toll aussehen. weiterlesen…

Sass im Überblick – Gastartikel im NUMBOO Magazin

Heute ist, nach langem Warten, endlich die zweite Ausgabe des NUMBOO Magazins erschienen. Mit dabei sind diesmal Ebenenkompositionen in Photoshop, ein Interview mit Jonas Hellweg vom kulturbanause-Blog, minimalistische Webdesigns, HTML5 Boilerplate, fokus 2012 und ein mein Artikel, in dem ich Sass vorstelle.

Sass ist, kurz gesagt, eine Meta-Sprache, mit der CSS-Code strukturiert und flexibel geschrieben werden kann. Schaut euch den Artikel oder besser noch das ganze NUMBOO Magazin an, es lohnt sich!

Google-Map richtig auf der eigenen Internetseite einfügen

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe. weiterlesen…

Typo3 Tutorial: Schulhomepage mit Typo3 erstellen — Gastbeitrag auf Schulhomepage.de

In meiner (bisher) zweiteiligen Artikelserie habe ich Schritt für Schritt gezeigt, wie man mit Typo3 eine Internetseite aufbaut. Im ersten Teil ging es darum, von einem Photoshop-Entwurf zu dem HTML-Design zu kommen. Im zweiten Teil entwickelte ich aus diesem Design dann die Typo3-Seite.

Aufgrund zahlreicher weiterführender Fragen von Lesern und auf die Bitte eines guten Kollegen habe ich jetzt einen dritten Teil zum Artikel geschrieben, in welchem ich detailliert darauf eingehe, wie man jetzt diese Typo3-Rohseite vernünftig einrichtet und zum Laufen bringt. Ich wünsche euch viel Spaß beim Lesen!

jQueryUI Slider auf feste Werte begrenzen

In meinem letzten Artikel habe ich gezeigt, wie man die jQueryUI-Silder auch auf dem iPad zum laufen bringen kann. Auf ähnliche Weise kann man die Slider-Funktion auch auf andere mobile Geräte portieren und mit der dritten Betaversion von jQuery Mobile halten intuitive und einfache Bedienung von Web-Apps weiter Einzug auf die Handys.

Das nehme ich zum Anlass, um einen weiteren Artikel über Slider zu schreiben, diesmal geht es aber darum, wie man einen Schieberegler auf feste Werte festlegen kann. Der Nutzer soll also nicht stufenlos Werte wählen, sondern nur zum Beispiel die Werte 0, 5, 10, 20, 100 und 150 wählen können. Standardmäßig ist diese Funktion nicht vorgesehen, deshalb muss man den normalen Slider etwas »aufbohren«. weiterlesen…