Kategorie: Ressourcen

TYPO3 Fluid: DTD / RNG Auto-Complete mit HTML 5

Hier findet ihr eine von mir generierte DTD Auto-Complete Datei für eure IDE. Die DTD Datei wurde vom XML Schema in RNG und von dort aus nach DTD convertiert.

Leider sind nicht alle Elemente korrekt verschachtelt wie im HTML5 Anteil. Das bedeutet, dass sämtliche Elemente innerhalb jeglicher anderen Elemente integriert werden können – immerhin ist das meist auch der Fall. Wer sich allerdings dennoch die Arbeit machen möchte und sämtliche Elemente korrekt verschalten will, kann mir gerne eine angepasst DTD Datei zusenden, damit ich sie ggf. hier veröffentlichen kann.

Dazu muss ich leider auch sagen, dass die Auto-Completion der Attribute bei mir in Komodo IDE 9 leider auch nicht richtig funktioniert. Soweit ich das sehen kann, sind die Attribute in der DTD Datei korrekt angelegt. Falls sich dem Problem auch Jemand annehmen möchte, ist der herzlich dazu eingeladen. Gerne erwarte ich auch euer Feedback, ob bei euch das Attribut Auto-Complete funktioniert. Sollte dies so sein, bitte Kommentar hinterlassen. Danke!

Weiterlesen

Gridelements Flexform-Inhalte in Page-Modul anzeigen

Gridelements ist eine mächtige, beliebte aber auch einfach zu verwendende TYPO3 Extension. Neben klassischem Spaltenaufbau bietet Gridelements auch die Möglichkeit individuelle Elemente via Flexforms zu erstellen. Allerdings werden diese Felder im Page-Modul nicht ausgegeben, sodass ein Redakteur meist nicht weiß, was in diesem Element enthalten ist. Genau hier kommt eine neue, von mir entwickelte TYPO3 Extension ins Spiel:

Gridelements Flexform Page Preview

Diese Extension erweitert gridelements über XClass dahingehend, dass nach der Installation sämtliche Flexform Felder und deren Inhalt in der Seitenansicht in TYPO3 dargestellt werden. Simple & gut.

gridelements_ffpagepreview im TYPO3 Extension Repository

Die Extension gibt es derzeit in der ersten Version 1.0.0 im TER unter dem Extension Key „gridelements_ffpagepreview“. Ein Extension Manual wird nicht benötigt, da die Extension lediglich installiert werden muss.

Optional kann mittels TypoScript die maximale Bildbreite und -höhe für die Bild-Vorschau gesetzt werden:

plugin.tx_gridelementsffpagepreview.settings.imageWidth = 200
plugin.tx_gridelementsffpagepreview.settings.imageHeight = 200

gridelements_ffpagepreview

Feedback wird jederzeit gerne entgegengenommen. Viel Spaß mit der Extension!

Above-the-Fold CSS & JS mit TYPO3 richtig optimieren

Wer heutzutage eine neue Website erstellt und diese nach neusten Standards und Techniken optimieren möchte, kommt am Google Page Speed Tool nicht vorbei. Dabei fällt auf, dass das Tool des Platzhirsches relativ viel Wert darauf legt, CSS und JS Daten, die nicht im Sichtbereich beim Aufruf der Seite liegen, am Ende des Dokumentes zu laden. Das heißt, Daten die nicht benötigt werden, um den sofort sichtbaren Bereich darzustellen, sollen später nachgeladen werden. Dabei bedeutet später natürlich: Sofort nachdem das eigentliche HTML Dokument geladen wurde. Da es beim Nachladen durchaus zu einer kurzen sichtbaren Darstellung ohne geladene Stylesheets kommen kann, werden die Stylesheets, die für die Darstellung des sichtbaren Teils zuständig sind, weiterhin im <head>-Bereich geladen – allerdings nicht wie üblich als externe Datei, sondern direkt als Inline-CSS.

TYPO3 Extension Scriptmerger

Mit der Extension Scriptmerger lassen sich alle JavaScript und CSS Dateien zusammenfassen – und genau das möchten wir. Wichtig für uns: Durch folgende Konfigurationsparamter können wir die Extension anweisen, die erstellten und zusammengefassten Daten nicht wie üblich im Kopf, sondern ganz unten am Ende des Dokumentes einzubinden.

plugin.tx_scriptmerger {
	javascript {
		mergedHeadFilePosition = </body>
	}
	css {
		mergedFilePosition = </body>
	}
}

Above-the-Fold CSS in den <head> einbinden

Als erstes sollte erwähnt werden, dass alle via page.includeCss eingebundenen CSS Dateien nun durch Scriptmerger an das Ende des Dokumentes gepackt werden. Deshalb brauchen wir eine effektive Methode unser Above-the-Fold CSS Inline in den Header zu bekommen. Dafür eignet sich folgendes TypoScript:

page {
  headerData {
    # Inline CSS
    10 = TEMPLATE
    10 {
      stdWrap.wrap = <style type="text/css">|</style>
      template = FILE
      template.file = fileadmin/templates/css/abovethefold.css
    }
  }
  
  # CSS-Dateien
  includeCSS {
    mainCss = fileadmin/templates/css/main.css
	...
  }
}

Eine externe CSS Datei wird ausgelesen, in Style-Tags verpackt und in den Head eingebunden. Für uns ist das eine wunderbare Möglichkeit, denn wir haben unser CSS im Head wie wir es benötigen (Inline), um das Laden nicht zu blockieren und wir haben dennoch eine externe CSS Datei die für Ordnung sorgt.

Weiterlesen

TYPO3 mit WordPress: So spielen beide Systeme zusammen

Möchte man eine leistungsfähige Website mit dem Content-Management-System TYPO3 aufbauen aber nicht auf WordPress – dem Blog-System schlechthin – verzichten wollen, stellt man sich die Frage: Wie arbeiten beide System am besten zusammen? Ich habe genau das auf meiner neuen Webpräsenz gemacht und zeige euch nun, wie ich Navigation, Footer und Sidebar Elemente eingebunden habe.

WordPress parallel zu TYPO3 installieren

WordPress habe ich ganz normal im Root Verzeichnis unter dem Ordner „/blog/“ installiert. In TYPO3 habe ich eine leere Seite im Seitenbaum erstellt um im meinem TYPO3 Menü auch den Punkt „Blog“ einzubinden. Natürlich verweist der Menüpunkt via RealURL auf /blog/. Damit wird vom TYPO3 zu WordPress gesprungen.

WordPress vorbereiten

Kurz vorab: Ich bin kein WordPress-Profi und konzentriere mich mit meiner Arbeit (abgesehen von diesem Projekt) lediglich auf TYPO3.

Meine HTML Struktur der TYPO3 Seite habe eins zu eins in das WordPress Template eingebunden. Somit kann ich sämtliches CSS und JS auch für WordPress nutzen. Wie man ein WordPress Template anpasst liest man am besten extern nach. Sind wir damit fertig und haben auch die nötigen CSS / JS Dateien eingebunden sollten wir einen Blog haben, der so aussieht wie unsere normale Website. Sicherlich muss man an ein paar Stellen ein paar spezifische Anpassungen am HTML Konstrukt vornehmen und auch ein paar extra Stylesheets hinterlegen (diese extra Blog-Stylesheets habe ich in die style.css vom WordPress Theme verpackt).

Weiterlesen

Retina- & Resolution-Detection auf Serverseite (PHP)

Mobile Geräte mit Retina / HDPI Display sind heutzutage Standard. Ein Grund mehr auf einer neuen Website Bildmaterial zur verfügung zu stellen, welches diese Technik bedienen kann – macht man dies nicht, wirken Grafiken und Bilder unscharf. Aber wie zum Teufel soll man das vernünftig anstellen?

Es ist egal ob man ein CMS wie TYPO3 verwendet oder eine einfache statische HTML Seite hat, das Problem bleibt gleich. Die ausgelieferten Bilder sollten zugunsten der Ladegeschwindigkeit nur so groß sein, wie sie tatsächlich benötigt werden. Sind die Bilder größer verursacht das unnötige Datenübertragung, verlangsamt den Seitenaufbau / die Darstellung und wirkt sich ebenfalls negativ auf ein Google Page Speed Ranking aus.

CSS

Innerhalb CSS hat man diese Problematik nicht. Durch Media-Querys können wir ganz einfach zwischen normalem und Retina- / HDPI-Display unterscheiden und so andere Hintergrundgrafiken verwenden.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 13/10),
       only screen and (min-resolution: 120dpi) {
          /* Retina / HDPI Background Images */ 
}

Doch wie sollte man normale Bilder (<img>) ausliefern?

Serverseitig mit PHP?

Aktuell gibt es keine richtige Möglichkeit um auf Serverseite herauszufinden ob es sich um ein hochauflösendes Gerät handelt. An dieser Stelle frage ich mich allerdings: Warum wird das nicht über den User-Agent oder einem anderen Parameter übermittelt? Der Stand der Technik würde genau diese Informationen (Auflösung in DPI, Screengröße in Pixel) dringend benötigen um sofort entscheiden zu können, welches Bild in welcher Größe ausgeliefert werden muss.

So ist es leider – derzeit gibt es keine Möglichkeit dazu. Auch wenn ich (wie viele andere sicher auch) lange darüber nachdenken wie man das Zustande bekommen könnte.

Weiterlesen

content_rating: Bewertungen mit Rich Snippets für TYPO3

Die Extension „content_rating“ integriert in TYPO3 eine so genannte „Sternchenbewertung“ mit Rich Snippets Support. Das Rating beziehungsweise Voting des Nutzers erfolgt per Klick. Die Darstellung übernimmt wahlweise ein Balken oder die bekannten „Sternchen“. Die kummulierten Nutzermeinungen können durch Rich Snippets von Suchmaschinen übernommen und in den Suchergebnissen dargestellt werden.

User-Interaktion findet immer häufiger auf Webseiten statt. Besucher möchten sich mitteilen und ihre Meinung abgeben. Das gilt für geschriebene Artikel, Fotos, Produkte oder vieles mehr. Kommentare stellen Meinungen dar und müssen zunächst gelesen werden. Sie sind nicht auf einen Blick zu erfassen. Ebenfalls fehlt bei Kommentar-Meinungen eine statistische Gesamtbewertung. Erfahren kann man nur durch das Lesen jedes einzelnen Kommentars, ob ein Besucher den Inhalt gut oder schlecht fand, ob er Ergänzungen zum Thema hat oder ob aus seiner Sicht falsche Angaben gemacht wurden. Eine Statistik, die direkt und zusammengefasst zeigt, was andere denken, gibt es nicht. Dafür empfiehlt sich eine grafisch anschauliche Bewertungs-Funktion.


Update: Extbase Version

Die Extension ist ab sofort unter dem Extension Key content_rating_extbase im TYPO3 Extension Repository als Extbase Version verfügbar.


Ratings leicht abgeben und Gesamtbewertungen verständlich anzeigen

Mit unserer TYPO3 Extension „content_rating“ ist es möglich, Websitebesuchern zusammengefasste Meinungen zu präsentieren. Zudem geben Nutzer mit nur einem Klick schnell und unkompliziert Bewertungen ab. Dabei bewertet der Besucher auf einer Skala von 1 – 5 den Inhalt der Seite, ein Foto, ein Produkt oder was auch immer. Er sieht seine Stimme zusammengefasst mit allen anderen Bewertungen der User, die wie auch er die Seite bewertet haben. Eindeutig erkennbar, ob gut, mittelmäßig oder schlecht.

Die unterschiedlichen Stile

style4 style5 style3 style2 style1

Suchmaschinen die Bewertungen per Rich Snippets zur Verfügung stellen

Die Erweiterung unterstützt außerdem Rich Snippets für Bewertungen. Diese nutzt Google, um das Rating bereits in den Suchergebnissen anzuzeigen. Eine durch Bewertungs-Rich-Snippets hervorgehobene Seite erhält meist eine hohe Klickrate. Es kommt sogar vor, dass Ergebnisse auf Platz 1 und 2 praktisch verblassen und ein Platz 3 oder 4 mit Rich-Snippet Bewertungen häufiger geklickt wird.

Um neben einer Bewertung die ausführliche Meinung der User zu erhalten, empfehle ich den Kommentar-Dienst DISQUS. Dieser kann mit unserer disqus_comments TYPO3 Extension leicht eingebunden werden.

Weiterlesen

TYPO3 mit XClass und Hooks erweitern

TYPO3 lässt sich vielfältig erweitern, als Bordmittel für Modifikationen stehen auf PHP-Ebene Hooks und die XClass Funktionalität bereit. Hooks erlauben Eingriffe in den Verarbeitungsablauf der Daten an definierten Punkten. Mit XClass können gleich ganze Klassen überschrieben werden. Wie fast immer haben beide Lösungen Ihre Vorzüge und Schwächen. Hooks gelten als das Standardmittel für Erweiterungen. Der Einsatz von XClass im Allgemeinen ist nur dann ratsam, wenn Hooks, Services, userFunc oder bei ExtBase Erweiterungen auch SignalSlots nicht als Lösung in Frage kommen.

Was sind Hooks?

Hooks sind ein weit verbreitetes Konzept, neben TYPO3 wird dies auch in der Shoplösung Magento und dem Blog-CMS WordPress genutzt. Es handelt sich dabei um Schnittstellen, die mit eigenen Extensions genutzt werden können, um Daten oder den Programmablauf in Fremd-Extensions oder Core-Dateien zu manipulieren. Der eigentliche TYPO3- oder Extension-Code muss dazu nicht verändert werden.

Weiterlesen

Pagespeed Optimierungen für TYPO3

Die Seitenladegeschwindigkeit und die Zeit, die ein Browser zum Rendern einer Website benötigt, beeinflusst maßgeblich die Usability einer Homepage. Das wissen auch die Suchmaschinen. Inbesondere Google hat die Seitenladegeschwindigkeit zum Ranking-Kriterium gemacht und gibt Webmastern mit den Pagespeed Tools Entwicklerwerkzeuge für Speed-Optimierungen an die Hand. Mit den folgenden Tipps und Tricks können Typo3 Webseiten meist einfach bessere Werte im Speedtest erzielen.

Optimieren der Serverkonfigurationen

Vielfach liegen die Schwächen gar nicht bei Typo3 selbst. Für gute Ergebnisse beim Pagespeed ist eine gute Serverkonfiguration nötig. Bei Apache Servern erfolgt dies in der Regel über die .htaccess-Datei. Die Kandidaten für die Optimierung sind die Aktivierung der GZIP Komprimierung per mod_deflate und das Senden der Headerdaten per mod_headers oder mod_expires.

GZIP Komprimierung aktivieren

Das Apache Modul mod_deflate komprimiert Daten vor dem Transfer. Ist ein solches aktives Modul in der Webserver-Software installiert, genügen zur Aktivierung der mod_deflate Komprimierung wenige Zeilen. Um HTML, XML, Javascript und CSS zu komprimieren, reichen die folgenden Zeilen in der mod_deflate-Sektion einer .htaccess-Datei:

AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript

Bekannte problematische Browser allgemein werden so ausgeschlossen:

BrowserMatch ^Mozilla/4 gzip-only-text/html 
BrowserMatch ^Mozilla/4\.0[678] no-gzip 
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

Für den passenden Umgang mit Proxys empfiehlt es sich, noch die folgene Zeile in der .htaccess zu ergänzen:

Header append Vary User-Agent env=!dont-vary

Weiterlesen