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

Webdesign-Grundlagen – ein Gastartikel von Jennifer Eder

Webdesign-Grundlagen – ein Gastartikel von Jennifer Eder
Von am
Kategorien: Design

Heutzutage findet man alles und jeden im Netz. Daher ist es nur verständlich, wenn man sich dazu entscheidet, auch online aktiv zu werden. Ein Webdesigner ist meist nicht mit im Budget enthalten. Daher beginnen die meisten mit einem Blog, um so einen leichten Einstieg zu haben. Doch egal ob Blog oder Webseite, einige wichtige Punkte sollten immer beachten werden, wenn man sich an die Gestaltung wagt. Hier ein paar Tipps, damit es anfangs leichter geht. Artikel weiterlesen

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

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. Artikel weiterlesen

jQueryUI Slider auf feste Werte begrenzen

jQueryUI Slider auf feste Werte begrenzen
Von am
Kategorien: JavaScript, jQuery, Programmieren, Tipps

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«. Artikel weiterlesen

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?
Von am
Kategorien: Arbeit, CSS, Design, PHP, Programmieren, Tutorials, Typo3

Content Management Systeme sind ein geniales Konzept — einmal eingerichtet und gut konfiguriert, brauchen die Editoren und Redakteure keinerlei technisches Know-How, um die Seite mit Inhalten zu füttern. Ich baue alle Seiten für meine Kunden auf einem CMS auf, denn der Kunde kann dann die Seite selbst verwalten.

Schaut man sich im Internet nach einem guten CMS um, so wird einem eine lange Liste angeboten, aus der man wählen muss. Meine Erfahrungen zur Wahl des richtigen Content Management Systems habe ich in dem Artikel Welches Content Management System nutzt ihr? geschildert.

Je besser ein CMS am Anfang vom Profi eingerichtet und konfiguriert wird, desto einfacher kann der Laie hinterher die Seite verwalten. Ein CMS-Riese, der dieses Prinzip perfektioniert hat und der deshalb immer wieder genannt wird, ist Typo3. Einmal eingerichtet, macht die Verwaltung und Änderung der Inhalte nahezu keine Arbeit mehr. Die Einrichtung des Systems selbst ist allerdings kompliziert, wobei die lückenhafte, schwer verständliche und über Hunderte von Webseiten verteilte Dokumentation von Typo3 und die meisten Tutorials keine große Unterstützung bieten.

Dabei ist das System hinter Typo3 — einmal verstanden — im Grunde sehr einfach und logisch aufgebaut.

Dieser Artikel richtet sich deshalb an alle Interessierten, die auf der Suche nach einem Einsteigertutorial sind und gerne das Prinzip von Typo3 verstehen wollen. Ich schreibe diesen Artikel in der Hoffnung, das ihr, wenn ihr diesen Artikel gelesen habt, euch nicht in den Irrwegen von Typo3 verstrickt, wie ich es anfangs getan habe. Artikel weiterlesen

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de
Von am
Kategorien: Arbeit, CSS, Design, Photoshop, Programmieren, Tutorials

Auf t3n.de ist ein neuer Artikel von mir veröffentlicht worden. Hier eine kurze Artikel-Vorschau:

Photoshop-Entwurf mit HTML & CSS umsetzen

Der Großteil des modernen Internets setzt sich aus HTML und CSS zusammen, den Grundbausteinen einer jeden Internetseite. Was man sieht, wenn man eine Internetseite öffnet, sind nichts weiter als viele Zeilen HTML-Markup und CSS-Code, aber am Anfang jeder Internetseite steht doch die Idee für das Design im Kopf irgendeines Webdesigners.

Natürlich wäre es möglich, dass der Webdesigner jetzt sofort loslegt und seine Ideen codet, wahrscheinlicher ist aber, dass zunächst ein ganz anderes Programm sich auf seinem Desktop öffnet – Photoshop. Dank Photoshop können Designer und Kreative ihre Ideen vollständig auf das Papier beziehungsweise den Bildschirm bringen, im Grunde müssen sie dafür weder HTML noch CSS beherrschen. Der Designprozess kann also komplett vom Coding abgekoppelt werden, der Designer muss nicht zwingend auch der Coder sein.

Der kreative Kopf hinter einer Internetseite ist also immer der Designer — in diesem Artikel wollen wir uns aber dem Prozess des Codings zuwenden. Wie wird aus einem Photoshop-Entwurf das fertige Design in HTML & CSS?

Hier könnt ihr den ganzen Artikel lesen: Howto: Photoshop-Entwurf mit HTML & CSS umsetzen Artikel weiterlesen

5 Felder für eine Adresse? Zu viel ist zu viel!

5 Felder für eine Adresse? Zu viel ist zu viel!
Von am
Kategorien: Arbeit, Design, Programmieren

Immer wieder steht man als Webentwickler vor dem Problem, dem Nutzer eine Formularoberfläche anbieten zu müssen. Natürlich sollte diese Möglichst benutzerfreundlich sein, denn der Nutzer soll das Formular ja auch ausfüllen. Oft sind einzelne Komponenten des Formulars aber unnötigerweise auf mehrere Formularfelder verteilt. Wie weit sollte man hier bei dem Zusammenfassen von Formularfeldern gehen?

Momentan arbeite ich an einem Formular, in dem relativ viele Informationen vom Nutzer gefragt werden. Als Beispiel nehme ich jetzt einfach mal die Adresse. Mein erster Gedanke war, es so zu machen, wie ich es gewohnt bin. Artikel weiterlesen

Erweiterte Rahmen mit CSS3 – border-image – ein Gastbeitrag auf t3n.de

Erweiterte Rahmen mit CSS3 – border-image – ein Gastbeitrag auf t3n.de
Von am
Kategorien: CSS, Design, Photoshop, Tipps

Mit CSS3 wurden viele Webdesign-Träume wahr. Angefangen bei box-shadow für Schlagschatten, hört die lange Liste von neuen CSS-Eigenschaften auch nicht bei border-radius für runde Ecken auf. Eine weitere neue Eigenschaft, die ich erst vor kurzem entdeckte, die mir aber so hilfreich war wie keine zweite, ist die Eigenschaft border-image. Wie der Name schon vermuten lässt, kann man damit ganze Bilder als Rahmen definieren.

Diesen Artikel habe ich auf t3n.de veröffentlicht. Hier könnt ihr den ganzen Artikel lesen: Erweiterte Rahmen mit CSS3 – border-image Artikel weiterlesen

jQuery: Bilder zuschneiden direkt im Browser

jQuery: Bilder zuschneiden direkt im Browser
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tutorials

Für die meisten Bildergalerien hat es bisher ausgereicht, wenn ein zufälliger Bildausschnitt als Vorschaubild ausgeschnitten wird. Deshalb war es bisher nicht nötig, dem Nutzer die Möglichkeit zu geben, direkt im Browser einen Bildausschnitt zu wählen. Doch vor kurzem stand ich vor der Aufgabe, für eine junge Fotografin aus Iserlohn eine Bildergalerie zu programmieren. Da die Bilder auf der Internetseite im Vordergrund stehen sollten, mussten sie besser in Szene gesetzt werden.

In diesem Artikel soll es darum gehen, wie man eine Nutzeroberfläche zum Zuschneiden von Bildern realisieren kann. Mit dem JavaScript-Framework jQuery und ein wenig PHP ist dies tatsächlich nicht schwer. Artikel weiterlesen

Nutzeroberflächen müssen intuitiver werden – ein Gastbeitrag auf t3n.de

Nutzeroberflächen müssen intuitiver werden – ein Gastbeitrag auf t3n.de
Von am
Kategorien: Arbeit, Design, Inspiration, Programmieren

Es gibt mal wieder einen Gastbeitrag von mir auf t3n.de zu lesen. Hier ein kurzer Auszug:

Nutzeroberflächen müssen intuitiver werden

Heute schreibe ich einen Artikel, den man nicht nur auf Webanwendungen, sondern im Grunde auf jedes Programm und jede digitale Nutzeroberfläche beziehen kann. Warum? Weil mir das Thema seit langem auf der Seele brennt. Es geht um die Kommunikation zwischen Mensch und Maschine. Artikel weiterlesen

  1. 1
  2. 2
  3. 3