Advitum.de auf Google+

Individuelle Layouts für Unterseiten — ein Typo3-Experiment

Individuelle Layouts für Unterseiten — ein Typo3-Experiment
Von am
Kategorien: Content Management Systeme, PHP, Programmieren, Tutorials, Typo3

In letzter Zeit wurde ich oft von Webdesignern gefragt, was beim Gestalten einer Typo3-Layouts beachtet werden muss. Meine Antwort lautete immer, dass der Inhalt der einzelnen Seiten, den man per Typo3 pflegt, möglichst einfach gehalten sein sollte. Doch neulich viel es mir auf, dass es absurd ist, das Layout an Typo3 anzupassen. Sollte es nicht—grade bei einem so mächtigen CMS—genau anders herum sein? Sollte Typo3 sich nicht genau so konfigurieren lassen, dass sich jedes beliebige Layout und Design darstellen lässt?

Also startete ich ein Experiment: Bei meinem nächsten Auftrag verschwieg ich dem Designer, dass die Seite pflegbar sein sollte und bekam ein Design, bei dem der Inhalt jeder Unterseite individuell aufgebaut war. Ziel des Experimentes sollte es sein, den Spagat zwischen möglichst leichter Pflegbarkeit und möglichst individuellem Design zu finden. Das Ergebnis war sowohl überraschend einfach also auch überraschend gut. Wie immer bei Typo3 muss man nur wissen, wie es geht! Artikel weiterlesen

Huch — oder: wo ist die Zeit hin?

Huch — oder: wo ist die Zeit hin?
Von am
Kategorien: Allgemein

Irgendwie ist das alles anders gelaufen als geplant. Vor über acht Monaten endschied ich mich dafür, das Tempo etwas runter zu schrauben. Bis dahin hatte ich jede Woche einen neuen Artikel veröffentlicht, was mich zum Schluss ziemlich unter Druck gesetzt und gestresst hat. Deshalb beschloss ich, die Notbremse zu ziehen und meine Artikel nicht mehr so regelmäßig zu schreiben. In einer kurzen Ankündigung im Blog kündigte ich dass damals an, betonte aber, dass dies nicht das Ende von Advitum.de sei.

Leider war nach dieser Ankündigung aber tatsächlich monatelang Schicht im Schacht. Was war passiert? Befreit von dem Zwang, jede Woche einen Artikel schreiben zu müssen, schob ich das Schreiben immer weiter vor mir her und andere Aufgaben nahmen mich voll in Anspruch. Allerdings war mir immer klar, dass ich noch nicht fertig mit meinem Blog bin. So werkelte ich in den letzten Monaten ziemlich gemächlich an einem Redesign für Advitum.de herum. Da aber trotzdem noch viele andere Dinge mich in Anspruch nahmen, zog sich auch dieser Prozess ziemlich in die Länge. Nun arbeite ich seit gut fünf Monaten an dem neuen Design und an neuen Artikeln, kam aber irgendwie nie zu einem Ende.

Doch jetzt geht es endlich weiter! Der Ehrgeiz, endlich wieder bloggen zu wollen und eine Woche Urlaub machten es möglich: Advitum.de 2.0 ist fertig und die ersten neuen Artikel sind schon fertig und werden in den nächsten Wochen veröffentlicht, angefangen mit diesem hier.

Ich werde vermutlich einige Zeit brauchen, bis ich mich wieder in einen regelmäßigen Schreibrythmus einpendel und ich weiß auch noch nicht so genau, wie oft es in Zukunft neue Artikel geben wird. Artikel weiterlesen

Richtungswechsel auf advitum.de – weniger Druck, mehr Qualität

Richtungswechsel auf advitum.de – weniger Druck, mehr Qualität
Von am
Kategorien: Allgemein

In den letzten Wochen hat es sich bereits abgezeichnet: meine Artikel wurden immer kürzer und schließlich ist auch das ein oder andere Mal erst gar kein Artikel am Montag-Morgen erschienen. Deshalb habe ich beschlossen, mir den Druck zu nehmen und nicht wie bisher jeden Montag einen Artikel zu veröffentlichen.

Bisher war ich immer darauf bedacht, dass meine Artikel wöchentlich erscheinen – das hatte ich eingeführt, nachdem ich aus Faulheit mehrere Monate gar keinen Artikel geschrieben hatte. Doch jetzt hat sich in meinem Leben einiges geändert, unter Anderem habe ich Anfang August eine Berufsausbildung begonnen. Deshalb werden ab sofort nicht mehr jeden Montag Artikel auf advitum.de erscheinen. Artikel weiterlesen

Ani.js – schlanke Animationsbiliothek aus JavaScript und Canvas

Ani.js – schlanke Animationsbiliothek aus JavaScript und Canvas
Von am
Kategorien: JavaScript, Programmieren, Tutorials

Letzte Woche gab es hier aus Zeitmangel nur einen kleinen animierten Ninja als Demo meiner Animationsbibliothek ani.js zu sehen. Diese Woche will ich nun ein kleines Tutorial nachliefern, mit dem du selbst die Animationsbibliothek ani.js nutzen kannst.

Als erstes solltest du jQuery und Ani.js downloaden und die beiden Dateien in deine HTML-Datei einbinden.

In deinem HTML-Dokument brauchst du nur ein (Div-)Element anlegen, in welchem sich die Animation befinden soll.

Nun kannst du mit der Animation beginnen! Lege dazu eine neue JS-Datei an und binde sie nach jQuery und Ani.js ein! In dieser Datei wird später der Code für die Animation stehen. Artikel weiterlesen

Kleiner animierter Ninja – JavaScript Demo

Kleiner animierter Ninja – JavaScript Demo
Von am
Kategorien: JavaScript, Programmieren

Heute gibt es statt eines »normalen« Artikels mal etwas zum Spielen, nämlich einen kleinen animierten Ninja, den ich mit JavaScript gecodet habe. Ich habe nämlich übers Wochenende eine kleine, simple Animations-Bibliothek geschrieben, die ich anhand dieses Ninjas ausproberen wollte. Ich hoffe, ich finde bald die Zeit, eine detaillierte Beschreibung der Bibliothek zu schreiben, denn dann könnt ihr sie nach belieben nutzen. Artikel weiterlesen

CSS3-Transformationen mit Matrizen – flexibler geht nicht

CSS3-Transformationen mit Matrizen – flexibler geht nicht
Von am
Kategorien: CSS, Programmieren, Tipps

Als leidenschaftlicher Transformations-Nutzer habe ich diese Woche einen großen Schrecken bekommen, als plötzlich die CSS-Transformation skew nicht mehr funktionierte. Des Rätsels Lösung: Skew wurde aus dem CSS-Transform-Draft entfernt und wird deshalb in Firefox 14 plötzlich nicht mehr unterstützt. Doof nur, dass viele visuelle Tricks, die im Internet verwendet werden, ohne das Scheren eines Elementes nicht mehr funktionieren.

Auf meiner Suche nach einer Alternative stieß ich darauf, dass man in der Transformation auch direkt mit einer Matrix vollziehen kann. Leider ist das nicht ganz so einfach wie bisher, aber wenn man weiß wie es geht, ist die Transformations-Matrix sehr flexibel. Ich zeige Dir in diesem Artikel die gängigsten Transformation, die man mit einer Matrix vollziehen kann. Artikel weiterlesen

Externe Links markieren – CSS Quick-Tip

Externe Links markieren – CSS Quick-Tip
Von am
Kategorien: Allgemein

Auf vielen Seiten hängt externen Links das Attribut target="_blank" an, was bewirkt, dass sich diese Links in einem neuen Fenster oder Tab öffnen. Bis heute ist diese Vorgehenweise von den einen bejubelt und von den anderen verpöhnt, denn es gibt sowohl Vor- als auch Nachteile.

In diesem Artikel will ich Dir deshalb eine schöne Alternative dazu präsentieren. Wir werden einfach alle externen Links visuell von den internen unterscheiden.

Zunächst ist vielleicht interessant, warum die Verwendung von target="_blank" so umstritten ist. Auf der einen Seite steht der klare Vorteil, dass der Nutzer so unsere Seite nicht so schnell verlässt. Wenn ein Besucher auf einen externen Link klickt und ihm der externe Inhalt gefällt, ist die Wahrscheinlichkeit, dass er zurück auf unsere Seite kommt, sehr gering. Wurde die externe Seite jedoch in einem neuen Fenster geöffnet, kehrt der Nutzer automatisch wieder auf unsere Seite zurück, wenn er die externe Seite schließt. Artikel weiterlesen

Nahtlose Parkett-Textur in Photoshop erstellen

Nahtlose Parkett-Textur in Photoshop erstellen
Von am
Kategorien: Photoshop, Tutorials

Vor kurzem bin ich umgezogen. Was hat das mit diesem Artikel zu tun? Nun ja, ich habe in der neuen Wohnung einen PVC-Boden in Parkett-Optik verlegt und das hat mich zu diesem Artikel inspiriert. Überhaupt ist ein Umzug eine geniale Quelle der Inspiration — die neue Stadt, die neue Umgebung — all diese Eindrücke haben mir viele Ideen für neue Artikel und Projekte gegeben, ich werde also viel zu tun haben.

Nun aber zurück zum Thema. In diesem Artikel zeige ich Dir, wie man mit Photoshop eine nahtlos kachelbare Parkett-Textur erstellt.

Wir beginnen mit einem neuen Dokument, die Größe ist hier egal. Ich habe mich deshalb für das Standard-Format von Photoshop entschieden. Den Hintergrund füllen wir mit weiß.

Als nächstes färbe ich auf einer neuen Ebene einen horizontalen Streifen mit schwarzer Farbe. Eigentlich ist die Farbe egal, wir verwenden diese Ebene bloß als virtuelle Schnittvorlage. Drücken wir mit gehaltener Strg-Taste auf die Ebene, erhalten wir eine Auswahl in Form der Ebene. Diese werden wir später verwenden, um aus einer Holz-Textur Planken auszuschneiden.

Es ist wichtig, dass der schwarze Bereich genau so Breit wie das Dokument ist, nur so lässt sich die Textur hinterher lückenlos kacheln. Artikel weiterlesen

Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen

Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen
Von am
Kategorien: Content Management Systeme, PHP, Programmieren, Tutorials, Typo3

In diesem Artikel zeige ich Dir an einem konkreten Beispiel, wie man eine Typo3-Extension von Anfang an entwickelt. Am Ende dieses Artikels hast Du eine Extension, die deine neuesten Tweets auf Deiner Seite darstellt.

Dieser Artikel baut auf den ersten vier Teilen der Artikelserie »Typo3: Extension selbst erstellen« auf, Du solltest also vielleicht vorher die ersten Artikel der Serie lesen! Artikel weiterlesen

Grunge Apocalypse – Typografie-Wallpaper in Photoshop erstellen

Grunge Apocalypse – Typografie-Wallpaper in Photoshop erstellen
Von am
Kategorien: Photoshop, Tutorials

Ich habe neulich irgendwo ein Produktdesign gesehen und war von der Typografie absolut begeistert. Das hat mich dazu inspiriert, diesen Artikel zu schreiben.

Oben siehst Du schon das Endergebnis dieses Tutorials, so oder so ähnlich kann Dein Resultat aussehen. Ich zeige dir insbesondere, wie du Text mit ein paar Grunge-Brushes aufwerten oder verändern kannst. Also viel Spaß!

Wir beginnen mit einem kleinen Ausflug auf eine meiner Lieblings-Seiten für kostenlose Schriftarten, nämlich dafont.com. Hier suchen wir uns eine schöne Stencil-Schriftart aus, die wir für unsere Typografie verwenden wollen. Ich habe für euch schon fünf verschiedene Schriften ausgewählt, die ihr benutzen könnt, ich habe jedenfalls Disparador Stencil benutzt. Artikel weiterlesen

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8