Kategorie: Tutorials
Alle Tutorials finden sich hier noch einmal ordentlich aufgelistet.
Events im Diagramm – Interaktive SVG-Diagramme im Web
Nachdem wir im letzten Artikel der Artikelserie ein Linien-Diagramm erstellt haben, kümmern wir uns in diesem Artikel darum, das Diagramm für den Nutzer interaktiv zu gestalten. Hier punktet ein SVG-Diagramm gegenüber einem Canvas oder gar einer Bilddatei: Wir können dem Nutzer recht einfach die Möglichkeit geben, mit dem Diagramm zu interagieren, um zum Beispiel genaue Werte abzulesen oder in eine tiefere Detail-Ansicht zu gelangen.
Im Folgenden gehe ich die Änderungen Schritt für Schritt durch. Artikel weiterlesen
Das Linien-Diagramm – Interaktive SVG-Diagramme im Web
Diagramme sind ein wichtiges Werkzeug, um Daten zu visualisieren. Sie können komplexe Zusammenhänge sichtbar machen. Auch im Web bietet sich der Einsatz von Diagrammen an – zum Beispiel zur Visualisierung von Nutzer- oder Verkaufszahlen, in wissenschaftlichen Artikeln etc.
Es gibt bereits einige Tools und Bibliotheken, die uns bei der Nutzung von Diagrammen unterstützen können. Wer neugierig ist, gerne selbst experimentiert oder einfach nicht die passende Bibliothek findet, kann trotzdem mit JavaScript und SVG sehr einfach eigene Diagramme erstellen. In diesem Artikel erfährst Du, wie Du Linien-Diagramme aus Deinen Daten generieren kannst. Artikel weiterlesen
CSS Animation Tutorial: hypnotische Spirale
Vor ein paar Tagen habe ich ein interessantes Gif gesehen, eine Animation einiger konzentrischer Halbkreise, die unterschiedlich schnell rotieren. Ich war drauf und dran, den gleichen Effekt mit ein bisschen JavaScript nachzubauen, als ich bemerkte, dass der gleiche Effekt sehr einfach mit CSS erzielt werden kann.
In diesem Artikel wende ich CSS-Animationen an, um einen interessanten Effekt zu erzielen. Artikel weiterlesen
Erstellen und Pflegen einer Webseite – Content MarkDown Tutorial
Seit einiger Zeit arbeite ich an einem eigenen Content Management System: Content MarkDown. Dieses CMS basiert, wie der Name vermuten lässt, auf Markdown, einer Text-Auszeichnungs-Sprache. Markdown ist darauf ausgelegt, schon im Text-Editor strukturiert auszusehen, so ist auch in Content MarkDown die Pflege der Inhalte direkt im Text-Editor sehr übersichtlich.
In diesem Artikel erkläre ich die Grundlagen von Content MarkDown und zeige, wie mit dem CMS schnell und einfach eine eigene Webseite erstellt und gepflegt werden kann. Artikel weiterlesen
Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie
In meinem letzten Artikel habe ich beschrieben, wie man mit ein wenig Physik, JavaScript und dem Canvas einen interaktiven Effekt erstellen kann. In diesem Artikel möchte ich einen neuen Effekt vorstellen, der diesmal zwar nicht interaktiv, aber nicht weniger interessant ist. Artikel weiterlesen
Interaktiver Canvas-Effekt: Schwingungen und Gravitation
Achtung: Physik und Mathematik voraus! In diesem Artikel zeige ich Dir, wie man mit Physik und ein wenig JavaScript einem Canvas Leben einhauchen kann. Der entstandene Effekt kann, in abgewandelter Form, sehr schön in eine Webseite eingebunden werden. Artikel weiterlesen
FPDF-Tutorial – Rechnungs-Posten und mehrspaltiger Text
Im letzten Artikel dieser Serie hast Du gelernt, Blocksatz in FPDF zu generieren. Was uns jetzt für eine Rechnung noch fehlt, sind die Rechnungs-Posten. Diese wollen wir nun in zwei Spalten darstellen. Links wird der Artikel oder das Produkt aufgelistet und rechts der Preis. So können wir am Ende die Summe der Rechnung übersichtlich darstellen.
Jetzt aber los! Artikel weiterlesen
FPDF-Tutorial: Blocksatz und Fließtext
Im ersten Artikel dieser Serie haben wir angefangen, eine Rechnung automatisch mit PHP zu erstellen. Dazu benutzen wir FPDF. Du weißt jetzt schon, wie man grundsätzlich Text auf die Rechnung bringt. Als nächstes werden wir uns anschauen, wie wir Fließtext auf die Rechnung schreiben können. Im nächsten Artikel werden wir damit beginnnen, die Rechnungsposten anzuzeigen. Artikel weiterlesen
Typo3 Backend-Layouts richtig nutzen
Wer großen Wert darauf legt, das Content Management System bis ins kleinste Detail anpassen zu können, hat mit Typo3 die richtige Wahl getroffen. Hier kann wirklich sehr penibele definiert werden, wie die Elemente im Frontend angezeigt werden. Doch nicht nur das Frontend von Typo3 ist sehr flexibel, auch im Backend kann sehr viel angepasst werden.
In diesem Artikel zeige ich Dir, wie Du ganz einfach das Layout der Inhalts-Spalten im Backend mit Backend-Layouts verändern kannst. Artikel weiterlesen
Photoshop Tutorial: New York Skyline Typografie
Lange ist es her, dass ich hier ein Photoshop-Tutorial veröffentlich habe. In meinem Alltag als Programmierer gibt es einfach viel mehr Inspirationen zum Programmieren als für ein Photoshop-Tutorial. Aber beim Stöbern durch verschiedene Font-Sammlungen kam mir plötzlich die Inspiration zu diesem Effekt.
In diesem Tutorial werden wir den Text »New York« mit der New Yorker Skyline und verschiedenen Brushes in Szene setzen. Also öffne jetzt Photoshop und los gehts! Artikel weiterlesen