Archiv der Kategorie: Web Development

Unsere kleinen Helferlein: TYPO3 und CDN mit cdn_assets

In unserem Entwickleralltag haben wir es jeden Tag mit Webseiten zu tun, die jede Menge Besuche und damit auch jede Menge Traffic haben. Wie jeder andere Betreiber hochvolumiger Sites nutzen wir Content Delivery Networks (CDN), um statische Inhalte weltweit schnell verfügbar zu halten. Das entlastet unsere Webserver, denn diese müssen nur noch das CDN bedienen und nicht mehr die vielen Nutzer individuell.

Nutzung eines CDN durch TYPO3

Technisch funktioniert das, indem wir die von TYPO3 erzeugten URLs, die auf Bildinhalte, Medien, CSS oder JavaScript verweisen, so umbauen, dass sie nicht mehr auf unsere Server zeigen, sondern auf das CDN. Weder Redakteur noch Nutzer bekommen das im Idealfall mit. Die Redakteure müssen nur im Hinterkopf haben, dass ein CDN im Einsatz ist. Sie dürfen Bilddateien nicht mehr ändern, sondern nur noch unter neuem Namen veröffentlichen. Denn das CDN lädt diese nur ein einziges Mal vom Webserver und danach gewöhnlich nie wieder.

Sonarqube – Codequalität von TYPO3 Extensions automatisiert messen

Als Internetagentur, die einen ihrer Schwerpunkte auf TYPO3 setzt, entwickeln wir natürlich maßgeschneiderte TYPO3 Extensions, die den Anforderungen unserer Kunden entsprechen. Viele Standard-Aufgaben löst man allerdings schon mit den – inzwischen sehr vielfältigen – Boardmitteln von TYPO3.

Falls der TYPO3 Core mal nicht über die gewünschte Funktionalität verfügt, findet man meistens eine Lösung in Form einer Fremd-Extension im TYPO3 Extension Repository (TER). Falls einem bestimmte Aspekte in einer schon vorhandenen Extension fehlen, kann man diese lokal erweitern und durch eine Contribution in das Upstream Projekt allen anderen Benutzern der Extension ebenfalls zur Verfügung stellen. So kann man aufwändige Eigenentwicklungen vermeiden, außerdem will man ja auch nicht jedes mal das Rad neu erfinden.

Camp Report Venlo 2016

Fotograf: Andrea Herzog Kienast
Fotograf: Andrea Herzog Kienast

Was macht ein Entwickler wenn er sich während eines längeren anspruchsvollen Projekts entspannen will?

Ganz klar: Er tut was für seine Fortbildung und fährt auf ein TYPO3Camp. Das Camp meiner Wahl war dieses Mal das TYPO3Camp in Venlo, das vom 21. bis zum 23. April 2016 stattfand.

Die Warmup Party am Donnerstag musste ich leider auslassen, da ich arbeitsbedingt erst am Freitag Mittag anreisen konnte. Das war im Fall dieses Camps jedoch kein Problem, da am Freitag Abend noch ein Social Event im Cafe Central mitten in der schönen Innenstadt von Venlo stattfand. Auch die Nachzügler hatten somit die Möglichkeit sich vorab schon einmal mit den anderen Teilnehmer bekannt zu machen und auszutauschen.

Relaunch der pfm medical ag Website im Responsive Web Design

Besucher der Website der pfm medical ag kommen seit kurzem in den Genuss eines komplett neu gestalteten Webauftritts im Responsive Web Design.

Nachdem die alte Website ca. vier Jahre alt war, war es dieses Jahr höchste Zeit, sie, vor allem im Hinblick auf User Experience und Layout, auf den neuesten Stand zu bringen. Das zeitlose Design der alten pfm medical Website, das in erster Linie die Corporate Identity des Unternehmens widerspiegelte, diente als Basis für die neue Website. Das neue Design sollte weiterhin schlicht, dabei aber modern und geradlinig sein und nicht vom eigentlichen Inhalt ablenken.
Die technische Grundlage – TYPO3 4.5 LTS inklusive diverser (selbstentwickelter) Extensions – wurde beibehalten und nur soweit angepasst und bereinigt, dass die Installation auf einem aktuellen Stand ist.

Responsiver Webauftritt für Walther-Präzision online

Seit heute präsentiert sich das Unternehmen Walther-Präzision aus Haan mit einer neuen Internetpräsenz. Selbstredend, dass auch diese Website gemäß den Prinzipien des Responsive Web Designs gebaut wurde. Zu diesem Zweck wurde die gesamte Informationsarchitektur, das Screendesign und die technische Basis überarbeitet. Die neu strukturierte Navigation bietet dem Seitenbesucher nun einen intuitiveren und zielgruppenspezifischen Zugang zu dem umfangreichen Lösungs- und Produktportfolio der Walther-Präzision.

Für kleinere Displays haben wir die Navigationsstruktur vereinfacht und touch-fähig gemacht, sodass sich Seitenbesucher bequem durch das Angebot navigieren können, ohne dass sie auf Funktionen und Informationen verzichten müssen.

Die Gestaltung der Website orientiert sich am Corporate Design der Walther-Präzision. Hochwertiges Bildmaterial erhöht zusätzlich die User Experience, wobei der Fokus, im Sinne der Zielgruppen, auf eine schnelle und zielgenaue Bereitstellung der gewünschten Inhalte und Dokumente gerichtet ist.

Responsive Webdesign für wolfcraft.de

Nur knapp eineinhalb Jahre nachdem die Webseite der wolfcraft GmbH zuletzt neu gelauncht und erstmalig auf Basis von TYPO3 umgesetzt wurde, war es dieses Jahr schon wieder Zeit für einen neuen Start.

Anders als beim letzten Relaunch stand dieses Mal einzig das Design im Vordergrund – Responsive Webdesign. Der ursprüngliche Plan des Herstellers, parallel zur regulären Webseite eine mobile Webseite zu erstellen, wurde schnell verworfen, nachdem Responsive Webdesign in aller Munde war und sich als die bessere Lösung herausstellte. Der Vorteil einer responsive Website: Alle Inhalte werden nur an einer Stelle gepflegt und die Darstellung der Website passt sich automatisch dem Ausgabegerät an.

Responsive Website auf Basis TYPO3 für Marley

Unser Kunde Marley Deutschland bietet Lösungen für viele Neubau- und Renovierungsprojekte – von der Dachrinne über die Falttür bis hin zum Kabelschutz. Marketing Factory hat Marley beim Relaunch der Internetpräsenz www.marley.de unterstützt und die technische Umsetzung der Website auf Basis des Content Management Systems TYPO3 durchgeführt.

Startseite der Marley Website in Tablet-Ansicht
Startseite der Marley Website in Tablet-Ansicht

Ziel des Relaunchs war es zum einen das Screendesign zu modernisieren und zum anderen die Website nach den Standards des responsiven Webdesigns (RWD) technisch neu zu konstruieren. Mit der neuen responsiven Technologie stellt Marley den Seitenbesuchern das Online-Angebot nun auch mit mobilen Geräten, wie Tablets oder Smartphones, optimal aufbereitet zur Verfügung. Egal ob der Seitenbesucher die Website mit dem Desktoprechner, dem Tablet-PC oder seinem Smartphone abruft, er bekommt immer eine auf die jeweilige Displaygröße optimierte Version der Inhalte ausgeliefert. Insbesondere in Zeiten, da die mobile Nutzung des Internets ein enormes Wachstum erfährt, stellt Marley sich mit diesem Relaunch für die kommenden Herausforderungen im Internet optimal auf. Die Website wird derzeit in elf Sprachversionen angeboten.

Tutorial: TYPO3 Responsive Images mit dem picture Tag

Grundvoraussetzungen für dieses Tutorial ist eine TYPO3 LTS 6.2 Installation, in der eine Seite mit einem Bild-Element angelegt wurde.

Für dieses Tutorial haben wir einige Dateien vorbereitet und als Zip-Datei zum Download angehängt. Diese Dateien müssen nach dem Entpacken in Filelist hochgeladen werden. Dabei sollte die Ordnerstruktur, wenn möglich, erhalten bleiben. Anderenfalls müssen im TypoScript die Pfade angepasst werden.

Diese Dateien sorgen für eine responsive Ausgabe des Bildes im Frontend. Weitere Funktionen sind nicht enthalten, können aber hinzugefügt werden. Solltet ihr die vorgestellte Technik in eine bestehende Website integrieren wollen, ist nur wichtig, dass jQuery in Version 1.7.2 oder neuer/höher vorliegt. Weiterhin ist es wichtig, dass die jquery-picture.js von http://jquerypicture.com/ integriert wird. Der Aufruf aus der app.js kann an sinnvoller Stelle in Euren Code übernommen werden. Die Settings in der CSS Datei können bei Bedarf an das eigene Projekt angepasst werden.

MFC launcht Autorenkasten für TYPO3

Mit der Extension mfc_author bietet sich in TYPO3 jetzt die Möglichkeit, Daten über den Autor einer Seite oder eines News-Eintrags mitzugeben.

Die von Marketing Factory entwickelte Extension bindet den Autorennamen mit einer Verknüpfung zum Google+ Profil des Autors ein, sofern dieses Profil hinterlegt ist. Diese Verlinkung wir so aufgebaut, dass Google die Autoreninformation verarbeiten kann. Zusätzlich zu dem Link zum Google+ Profil bringt die Extension auf Wunsch – neben dem Autorenbild – auch eine Kurzbeschreibung, einen Link zu Facebook, Xing oder Twitter mit. Sofern gewünscht, kann man auch die Mailadresse des Autors mit angeben.

Die Autoren werden zentral im TYPO3 Backend erfasst und dann per Dropdown auf der jeweiligen Seite bzw. dem News-Eintrag ausgewählt. Man pflegt also nur an einer Stelle seine Daten und kann diese dann bequem in den Seiteneigenschaften bzw. News-Eintrag-Eigenschaften bequem hinzufügen.

MFC veröffentlicht Amazon Affiliate Extension

Wie integrieren wir passende Produkte von Amazon in unsere Seite? Diese oder ähnliche Fragen stellen sich einem Webseiten-Betreiber spätestens dann, wenn er einen Produkt-Test oder eine Buchkritik veröffentlicht hat und am Ende seines Artikels zu dem entsprechenden Produkt verlinken will.

Natürlich bietet Amazon durch sein PartnerNet bereits eine Vielzahl von Möglichkeiten an, aber eine wirklich gute Integration zu TYPO3 CMS gab es bis jetzt noch nicht. Möchte man dann auch noch wissen, wenn ein Produkt ggf. nicht mehr verfügbar ist (ein statischer Link würde ab diesem Zeitpunkt ins Leere laufen), steht man dem Problem gegenüber, dass man seine Seiten händisch abklappern muss, um zu sehen, ob alle Einbindungen noch funktionieren. Bei kleineren Webauftritten mag dies noch ohne Weiteres möglich sein, bei größeren Seiten geht dies aber nicht mehr so einfach.