Mit ‘Typo3’ getaggte Artikel

27.07.2010 18:18 von Nik in Allgemein | Keine Kommentare »

Back to www.teeuwisse.de: Magic Startseiten-Feature

Neulich fragte uns wieder jemand, wie wir dieses kecke Startseiten-Feature für die Website der Nicolaas Teeuwisse OHG umgesetzt haben.

Hintergrund der Startseite ist ein großformatiges Bild, das meist aus der laufenden Verkaufssaison des Berliner Kunsthändlers stammt. Dort hat man sich auf den Verkauf von kunsthistorisch wertvollen Drucken und Zeichnungen aus dem 16. bis 20. Jahrhundert spezialisiert.

Aber zurück zur Startseite: Im Rahmen, den Kopfleiste plus Navigation und Fußleiste bilden, ist nur ein Ausschnitt des genannten Bildes zu sehen. In einem roten Textkasten stehen Künstlername und Werkstitel. Die Ränder des Bildes außerhalb des Rahmens sind abgedunkelt.

Der Clou: Der Nutzer kann das Bild verschieben und so den sichtbaren Ausschnitt verändern. Mit jeder Bewegung des Bildes entsteht ein neuer Gesamteindruck. Durch dieses “Werkzeug” kann der Kunstinteressierte (Sammler, Museen und Kunstexperten) sich das Bild im Detail anschauen. (Nach der Abbildung geht’s weiter…)

Teeuwisse Startseite

Technische Lösung

Damit sofort etwas im Browser zu sehen ist, wird erst der kleinere Ausschnitt des Bildes im “Mittelrahmen” geladen.

Per Javascript wird danach das komplette Bild geladen, der bereits sichtbare Bildausschnitt berechnet und das gesamte Bild passend über den kleineren Ausschnitt gelegt.

Abhängig von der Bildschirmauflösung des Rechners wird der sichtbare Teil des Bildes samt Mittelrahmen auf die maximal mögliche Fensterhöhe erweitert.

Mit Hilfe von Javascript kann der Nutzer das Bild dann bewegen und den sichtbaren Ausschnitt frei wählen. Voilà.

Die Website unter www.teeuwisse.de hatte einige Anforderungen zu erfüllen; nach der Umsetzung berichteten wir bereits über die Besonderheiten dieses Typo3-Projektes.

31.03.2010 11:31 von Nik in Allgemein | Keine Kommentare »

KM2-Kunden: SELEX-Gematronik

Selex-Systems-Integrations-Website-Gematronik

Wir sind noch eine Geschichte aus dem letzten Jahr schuldig (neben vielen anderen). Es geht um einen Kunden: Die Selex Systems Integration GmbH – Gematronik Weather Radar Systems.

SELEX-Gematronik ist Weltmarktführer in der Entwicklung und Herstellung von Wetter-Radar-Systemen. Am Standort Neuss beschäftigt Gematronik über 140 Mitarbeiter und fertigt schlüsselfertige Anlagen für Kunden aus aller Welt.

Anfang letzten Jahres kam das Unternehmen wegen eines Website-Relaunches auf uns zu. Da künftig mehrere Redakteure die Inhalte der Website pflegen sollten, wurde eine Lösung auf Basis des Content Management Systems Typo3 angefragt.

Gesagt, getan: im August 2009 ging die neue Website online. Die Gestaltung der Seiten basiert auf den Vorgaben eines seitenstarken Corporate Design-Styleguides der italienischen Konzernmutter. Klar, auf diese Weise stellt der Konzern das weltweit einheitliche Auftreten aller Töchter im Internet sicher.

Selex-Systems-Integrations-WorldwideFür die Präsentation der Referenzen haben wir Google maps eingebunden: In der Google maps-Weltkarte sind ausgewählte Referenz-Radaranlagen markiert. Mit einem Klick auf eine Markierung erfährt der Nutzer mehr über eine Anlage. Zoomt der Nutzer in die Karte hinein, kann er in der vergrößerten Satellitenansicht je nach Detailgrad des Kartenmaterials manche Wetter-Radar-Anlage sogar genau erkennen. Die Welt wird zur Westentasche.

23.12.2009 18:56 von Nik in Allgemein | 1 Kommentar »

Einen haben wir noch… www.teeuwisse.de

Teeuwisse

Bevor es in die wohlverdiente Weihnachtspause geht, können wir noch den Launch einer sehr schönen Website verkünden: www.teeuwisse.de.

Die Nicolaas Teeuwisse OHG mit Sitz in Berlin hat sich auf den Verkauf von Drucken und Zeichnungen aus dem 16. bis 20. Jahrhundert spezialisiert. Dabei konzentriert sich das Unternehmen auf ungewöhnliche Werke von hoher kunsthistorischer Relevanz. Kunden sind internationale Museen oder private Sammler.

Der Schritt ins Internet hatte sowohl visuelle als auch funktionale Ansprüche zu erfüllen: Das Unternehmen möchte die Inhalte seiner Kunstkataloge online in einem angemessenen Rahmen zeigen, wobei es nicht zuletzt um die geeignete Präsentation der einzelnen Werke geht.

Die Startseite beeindruckt mit bildschirmfüllendem Bild und zeigt dem Website-Besucher, womit sich die Nicolaas Teeuwisse OHG beschäftigt: Mit nichts weniger als großartiger altmeisterlicher Kunst. Der Nutzer kann das Großformat mit der Maus bewegen und verschieben, so dass er sich das Bild im Detail anschauen bzw. den Fokus verändern kann. Dieses technische Gimmick unterstützt nicht nur die Eigendarstellung des Unternehmens im Web, sondern vor allem die Präsentation des Kunstwerkes: Der Kenner und Sammler solcher Werke schätzt den Blick auf das handwerkliche Detail.
Außerdem verändert sich mit jeder Bewegung des Bildes der Gesamteindruck der Startseite. Diese Art der Umsetzung erfüllt die Ansprüche von Funktion und Design – mehr kann man sich von einer Startseite nicht wünschen. Ich gerate ins Schwärmen…

Eins noch: Die technische Basis ist das Content Management System Typo3.

13.05.2009 10:32 von Alex in Allgemein | Keine Kommentare »

Typo3: Favicon einbinden

Als die Favicons mit dem Internet Explorer 5.0 aufkamen wurden die Dinger anfangs belächelt. Klickibuntispielerei. Und der Support der Browser war anfangs wirklich unterirdisch. Vor allem der Internet Explorer spielte Favicon-Lotterie. Heute sind die Dinger aus dem Netz nicht mehr wegzudenken. Um schnell eine Seite im Bookmark-Menü zu finden oder ein bestimmtes Tab schnell parat zu haben: Einfach praktisch.

Ein Favicon im CMS Typo3 einzubinden gestaltet sich ziemlich einfach: 

page.shortcutIcon = fileadmin/images/favicon.ico

Bonuslevel iPhone: Die Sache wäre ziemlich einfach, gäbe es da nicht noch eine kleine Firma aus Cuppertino, die gerne ihr eigenes Süppchen kocht, wenn es um Icons geht. Das iPhone und der iPod Touch bieten die Möglichkeit Links als Favoriten direkt aus Safari zum Dashboard hinzuzufügen. Doch, wie bekommt man sein Icon in Typo3? Kein Problem, einfach folgendes Snippet in sein Typo3-Template aufnehmen:

page.shortcutIcon = fileadmin/images/favicon.ico
page.headerData.10 = TEXT
page.headerData.10.value = <link rel="apple-touch-icon" \
                                 type="image/png" \
                                 href="fileadmin/images/apple-touch-icon.png"/>

Die umgebrochene Zeile ohne Backslashes, die Spalte des KM2 Blogs ist zu schmal

Jürgen Siebert hat drüben im Fontblog eine geniale Anleitung zusammengestellt, wie man sich ein optimales iPhone-Icon bastelt. Sehr lesenswert. Read on.

05.05.2009 13:03 von Ada und Alex in Allgemein | Keine Kommentare »

KGM bekommt neuen Webauftritt

Mannnnn, soviel zu tun, man kommt ja nicht mal dazu, die Hamer-Ober-Knaller-News auch mal zu veröffentlichen. Das Leben ist schon wirklich hart. Aber jetzt wollen wir mal ordentlich prahlen:

KGM – Rechtsanwälte und Steuerberater glänzen im Internet mit einem nigelnagelneuem Webauftritt. Das Layout ist klassisch gehalten und ordentlich reduziert. Schließlich sind die Dienste von Juristen keine Sache die man unbedingt schreien muss. Auch der leise Vogel findet einen Platz. Klare Strukturen und viel Luftigkeit greifen ineinander und eignen sich gut um die Kerninhalte zu vermitteln. Unter der Haube werkelt ein mächtiger Typo3-Motor, ordentlich tiefer gelegt, schicke Breitreifen, nur der Fuchsschwanz fehlt (noch).

KGM Startseite

Aber mal ganz ohne Flachs: Die Herren von KGM sind sowas von coole Kunden: Straight, direkt, auch bereit zuzuhören, wenn man sie berät. Bei eBay würde man sagen: Alles super, gerne wieder. So, genug geprahlt.

02.04.2009 19:33 von Alex in Allgemein | 1 Kommentar »

Typo3: Zufälligen Inhalt anzeigen

Das schöne an meinem Handwerk ist: man lernt nie aus.

Die Zeit, die Zeit, sie saust im Sauseschritt und bringt Veränderung mit – und bei diesem ganzen Computerzeugs und so umso mehr.

Gerade musste ich stutzen, als ich für ein wirklich und total mindblowing Projekt im Enterprise CMS Typo3 zufälligen Inhalt anzeigen wollte. Macht man ja auch nicht jeden Tag. Die Lösung ist bestechend simpel und hat man als Datenbank-Entwickler schon häufiger verwendet: Eine Kombination aus LIMIT und ORDER. Yeah!

Und weil der Satz “Sharing is caring” gilt, hier mal ein Schnipsel TypoScript:

RANDOMCNT = COA
RANDOMCNT{
	10 = CONTENT
	10 {
		table = tt_content
		select {
			pidInList = {$randomholder}
			max = 1
			orderBy = rand()
			languageField = sys_language_uid
		}
	}
}

Der SysFolder (oder sogar eine reguläre Seite) “pidInList” / “{$randomholder}” enthält die Records. Per Constant macht es einem das Leben leichter. Die Select-Property “max” gibt an, wie viele Records ausgewählt werden sollten. Wichtig: Elemente vom Typ COA aktivieren Caching – wer keine Hightraffic Websites betreibt sollte COA_INT verwenden. w00t

Update: Da es in der Welt der RDBMS mehr als nur MySQL gibt, hier die Postgres Notation SELECT * FROM table OFFSET RANDOM() LIMIT 1;