Advitum.de auf Google+

Kategorie: Tutorials

Kategorie: Tutorials

Alle Tutorials finden sich hier noch einmal ordentlich aufgelistet.

Events im Diagramm – Interaktive SVG-Diagramme im Web

Events im Diagramm – Interaktive SVG-Diagramme im Web
Von am
Kategorien: JavaScript, Programmieren, Tutorials

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

Das Linien-Diagramm – Interaktive SVG-Diagramme im Web
Von am
Kategorien: JavaScript, Programmieren, Tutorials

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

CSS Animation Tutorial: hypnotische Spirale
Von am
Kategorien: CSS, Programmieren, Tutorials

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

Erstellen und Pflegen einer Webseite – Content MarkDown Tutorial
Von am
Kategorien: Content Management Systeme, Programmieren, Tutorials

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

Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie
Von am
Kategorien: Design, Inspiration, JavaScript, Programmieren, Tutorials

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

Interaktiver Canvas-Effekt: Schwingungen und Gravitation
Von am
Kategorien: JavaScript, Programmieren, Tutorials

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

FPDF-Tutorial – Rechnungs-Posten und mehrspaltiger Text
Von am
Kategorien: PHP, Programmieren, Tutorials

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

FPDF-Tutorial: Blocksatz und Fließtext
Von am
Kategorien: PHP, Programmieren, Tutorials

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

Typo3 Backend-Layouts richtig nutzen
Von am
Kategorien: Content Management Systeme, Tutorials, Typo3

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

Photoshop Tutorial: New York Skyline Typografie
Von am
Kategorien: Inspiration, Photoshop, Tutorials

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

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6