Permalink

SCSS Boilerplate mit Grunt

Jeder Entwickler braucht seinen Werkzeugkoffer. Im Frontend Bereich entwickelt sich in letzter Zeit einiges. Hat man früher noch normales CSS geschrieben, schreibt man es heute schon einfacher mit Variablen, Mixins und vieles mehr. Wovon ich spreche ist SASS.

Warum schon wieder so eine Boilerplate?

Wir haben uns einige Boilerplates angeschaut, welche auf SASS setzen. Auch Frameworks wie Foundation haben wir uns angeschaut. Fazit gut, aber too much für 90% aller Projekte. Unser Ziel war es also, eine kleine aber gut strukturierte Boilerplate zu bauen welche uns schnell zum Ziel bringt.

Ebenso haben wir uns für die Verwendung von Compass und Grunt entschieden. Compass ist eine sehr coole Erweiterung für SASS, dass schon einige Features und Mixins mitliefert. Grunt ist ein JavaScript Task Runner. Mit diesem kann man automatisiert gewisse Dinge ausführen. Hierfür gibt es außerdem einige super Plugins.

Unter der Haube

Unsere Boilerplate liefert ein mobile-first Grid mit, dass auch im IE8 perfekt funktioniert. Außerdem liefern wir Mixins für Media-Queries mit. Sowohl max-width und min-width als auch ein Retina Media-Querie kann man ganz einfach in der Vorlage nutzen.

Bekanntlicherweiße unterstützt der IE8 keine Media-Queries. Das führt zu Problemen, wenn man noch für den IE8 optimieren sollte und trotzdem auf die mobile-first Variante setzen möchte. Wir haben standardmäßig die Ausgabe des „min-width“ mixins so angepasst, dass eine .lt-ie9 Klasse im CSS ausgeworfen wird. Diese Klasse wird von Modernizr verarbeitet, welches wir ebenfalls in unsere Boilerplate integriert haben.

Auch für CM-Systeme wie TYPO3 & WordPress haben wir Standardstyles hinterlegt.

Download

Wir sind sehr zufrieden mit unserer Boilerplate und werden diese ständig weiterentwickeln. Unser Code kann man sich auf Github anschauen und Herunterladen.

Gerne dürft ihr auch forken und mergen.

Permalink

TYPO3 CMS & Symlinks

In folgendem Abschnitt möchte ich erklären, wie man Symlinks bei TYPO3 Projekten verwendet.

TYPO3 Source auf den Webserver laden

Zunächst laden wir über einen Shell Zugang (SSH) den TYPO3 CMS Source auf den Webserver.
Dazu wählen wir die gewünschte Version unter typo3.org/download aus und kopieren mit der rechten Maustaste den Link des „.tar.gz“ Button.

Nun wechseln wir ins Terminal und wählen, nach erfolgreichen verbinden mit SSH, den gewünschten Ordner für die TYPO3 Installation aus. Mit folgendem Befehl können Sie den TYPO3 CMS Source direkt auf Ihren Webserver laden.

Ersetzen Sie die URL mit der von Ihnen kopierten. Achten Sie darauf in allen nachfolgenden befehlen die richtige Versionsnummer zu verwenden.

wget http://prdownloads.sourceforge.net/typo3/typo3_src-6.1.5.tar.gz

Nun noch die zuvor geladenen Datei entpacken:

tar xcf typo3_src-6.1.5.tar.gz

Symlinks

Nun erstellen wir die Symlinks zum TYPO3 CMS Source.

Symlink für den „typo3“ Ordner:

ln -s typo3_src-6.1.5/typo3 typo3

Symlink für den „t3lib“ Ordner:

ln -s typo3_src-6.1.5/t3lib t3lib

Symlink für die „index.php“ Datei:

ln -s typo3_src-6.1.5/index.php index.php

(Vorsicht bei df.eu und jweiland.net. Hier ist aus Sicherheitsgründen ein Symlink auf Dateien nicht gestattet. Einfach die index.php in das Hauptverzeichnis kopieren.)

Permalink

Host Europe Hybrid Cloud

Host Europe bietet nun auch eine Cloud Lösung an, welche TÜV-zertifiziert ist und sich in die klassische IT-Infrastruktur integrieren lässt. Egal ob eine „Cloud Maschine“ oder „Cloud Storage“ – Host Europe hat neben den klassischen Produkten alles was man braucht.

Zusätzlich zu den bisherigen Produkten wie „Managed Hosting“ oder „Virtual-Server“ hat man nun die Möglichkeit der Cloud basierten Lösungen welche sich ganz klar an Unternehmen richten.

Cloud Maschine
Ob man hier wirklich von der „Cloud“ sprechen kann möchte ich einmal dahingestellt lassen. Die Lösung ist im Grunde ein Cluster mit Instanzen. Man könnte sagen eine art virtuelles Rechenzentrum.
Host Europe bietet hier drei Typen an. Die „Hybrid Cloud“, sowie die „Dedicated Hybrid Cloud“ bieten bis zu 64 Cores und bis zu 12 GB Ram. Der Unterschied liegt in geteilten HW-Nodes in der normalen „Hybrid Cloud“ und wie der Name schon verrät dedizierte HW-Nodes in der „Dedicated Hybrid Cloud“.
Der dritte Typ „Individual Private Cloud“ bietet bis zu 1024 Cores und sogar bis zu 48 TB Ram, ebenso ein individuelles NetzwerkSetup und individuellen iSCCI SAN Storage.

Cloud Storage
2013 ist Host Europe mit dem Cloud Leader Award ausgezeichnet worden, bei welchem das Produkt „Cloud Storage“ ein Teil ist.
Cloud Storage ist eine internetbasierte, hochverfügbare Speicherplatz Infrastruktur speziell für Unternehmen.

Die Daten werden mehrfach redundant gespeichert, so muss man sich keine Gedanken über die Sicherheit der Daten machen. Ebenso wenig über den Speicherplatz, denn es wird je GB abgerechnet und zahlt so nur das was man auch braucht. Für die Dateien welche man speichert hat man die Wahl diese mit Zugriffsrechten zu versehen (öffentlich / nicht öffentlich).
S3-Kompatiblität wird beim „Cloud Storage“ von Host Europe unterstützt.

Sollte dies alles nicht reichen so bietet Host Europe eine ganz spezielle Lösung an: Eine IT-Infrastruktur aus Basis der einzelnen Cloud-Services, welche exklusiv für das eigene Geschäftsmodell optimiert sind.

Permalink

WordPress Kategorien & Taxonomy Terms sortieren

Gibt man auf einer Seite mehrer Kategorien aus und wünscht eine bestimmte Reihenfolge dieser, kann man mit folgendem Plugin sehr einfach per Drag & Drop die Kategorien wie auch Taxonomy Terms ordnen:

Plugin (Category Order and Taxonomy Terms Order)

Permalink

Element vertikal und horizontal zentrieren mit jQuery

Möchte man ein Element vertikal und horizontal zentrieren, gibt es hiefür mehrere Möglichkeiten. Hier eine Lösung mit jQuery.

jQuery.fn.centerFix = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

$('.div').centerFix();
Permalink

Contact Form 7 – Messages an gewünschten Stelle

Möchte man die Error- bzw. Bestätigungsmeldung bei Contact Form 7 an einer anderen gewünschten Stelle haben, kann man dies ganz simpel mit einem Marker machen.

[response]

Diesen Marker an der Stelle im Backend (ContactForm 7 Reiter) einfügen, wo die Fehlermeldung erscheinen soll.

Permalink

Windows IE Virtual Machines for Virtualbox

Für alle Webentwickler ein leidiges Thema – Browsertests – Vor allem die vielen IE Versionen machem da dem ein oder anderen zu schaffen. Arbeitet man dann auch noch mit Mac wird es noch komplizierter alle Versionen sauber testen zu können.

Abhilfe schafft hier „ievms“ welches mit nur eine Zeile Code sämtliche virtuelle Maschinen für Virtualbox bereitstellt. Anschauen lohnt sich!

https://github.com/xdissent/ievms/

Permalink

Gastartikel: Zukünftige TYPO3 Versionierungen

Lange Zeit stand eine Erneuerung bzw. eine Neuentwicklung von TYPO3 im Raum und in der Vergangenheit wurde über einen längeren Zeitraum beraten, welche Form bzw. Produktbezeichnung für die neue Version gewählt werden sollte.

Die TYPO3 Versionierungen sind mittlerweile bekannt

Bisher wurde die Bezeichnung TYPO3 immer als ein Produktname geführt, nun versteht man unter TYPO3 eine eigenständige Dachmarke, unter der verschiedene Produkte positioniert werden soll. Die Dachmarke TYPO3 unterteilt sich in drei verschiedene Produkte. Einzelne Versionen wie Version 4.x, 6.x, später 7.x, 8.x etc. werden unter der Bezeichnung TYPO3 CMS geführt. Die Version 4.5 LTS (Long Time Support bis 2014), Version 4.6 (Support bis April 2013) und Version 4.7 (Support bis Oktober 2013) sollen fortlaufend unterstützt werden, eine einsetzbare Version von 6.x ist seit dem 27. November 2012 verfügbar.

Unter der Dachmarke TYPO3 kann man nun auch TYPO3 Neos wiederfinden. Es handelt es sich um Version 5 bzw. um die im Release-Stadium als Phoenix bezeichnete Version.

Abgerundet wird die TYPO3 Versionierung durch TYPO3 Flow welches ein Framework darstellt und als Basis für TYPO3 Neos verwendet wird. Darüber hinaus ist eine Verwendung auch für andere Webprojekte außerhalb von TYPO3 möglich.

TYPO3 Versionierungen sind heute als eigenständige Produkte zu verstehen.
Nachfolgend ein Auszug aus den bekannten Änderungen:

“TYPO3″ wird zu ” TYPO3 CMS”
“FLOW3″ zu “TYPO3 Flow”
“Fluid” wird zu ”TYPO3 Fluid”
“TYPO3 5.0″ aka ”TYPO3 Phoenix” zu “TYPO3 Neos”

Das Signet ist zukünftig orange und steht links neben dem Schriftzug.

In Anbetracht der Entwicklung der einzelnen Produkte können drei sehr eigenständige Lösungen erkannt werden. Zum einen handelt es sich bei TYPO3 CMS um ein Produkt für unterschiedliche CMS Lösungen, Typo Neos und die vielfältige Framework-Version TYPO3 Flow, die auch außerhalb von TYPO3 angewendet werden kann.

Die richtige Versionierung von TYPO3 für zukünftige Webprojekte auswählen

Für alle geschäftskritischen Webanwendungen sollten Sie grundsätzlich die Verwendung von TYPO3 Neos vermeiden. Bei der Version TYPO3 Neos fehlen dem Nutzer verschiedene Enterprise-Features, die bei der Version TYPO3 CMS gegeben sind. Die fehlenden Funktionen bei TYPO3 Neos beruhen vor allem darauf, dass sich das CMS noch in der alpha-Phase befindet, Neos sollte aus diesem Grund nur für Sie in Frage kommen, wenn private Webprojekte im Raum stehen. TYPO3 Neos dient in keinem Fall als eine Alternative zur Version 4. Für TYPO3 CMS wird bis zum Jahr 2014 spätestens der eigenständige Support eingestellt. Die Version TYPO3 CMS 6 soll in Zukunft eine bestmögliche Lösung für alle Webprojekte bieten.

Dennis Hüttner ist bei der kaos werbeagentur für den bereich Suchmaschinenoptimierung (seo/sem/sea), Social Media, Webentwicklung und TYPO3 zuständig.
Weitere Infos unter unsere-agentur.de, Facebook, Google+

Permalink

TYPO3 Standard Benutzergruppe für Seiten Zugriff definieren

In TYPO3 sollte man wenn man mit Redakteuren arbeitet und auch als Admin Seiten anlegegt bzw. verwaltet eine Standard Gruppe definieren welche neue Seiten zugewiesen bekommen.
Dies kann man sehr einfach mit folgendem TypoScript in der pageTSconfig erreichen.

TCEMAIN.permissions.userid =
TCEMAIN.permissions.groupid =