blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for November, 2011

Einbindung der tt_news in Mobile Website

Mittwoch, November 30th, 2011

In die Mobile Website T3Touch habe ich heute die TYPO3 News Extension (tt_news) eingebunden. Auch hier können die Bilder der Newsartikel nun in der Photoswipe Gallery angesehen werden.

Valide XHTML Facebook/Twitter Buttons

Freitag, November 25th, 2011

Bei www.t3touch.de habe ich einen Facebook, Twitter und Google +1 Button eingebunden. Nur bringen die Dinger alle 3 nicht validen HTML Code mit sich. Dies hier hat mich zum gewünschten Ergebnis gebracht.

Eine JS-Datei die im eingebunden wird:

(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
document.write('<div class="fb-like" data-href="http://www.t3touch.de" data-send="true" data-layout="button_count" data-show-faces="false" data-action="recommend" data-font="lucida grande"></div>')

Und an der Stelle im HTML wo der Button erscheinen soll die Datei dann einbinden:

<script language="javascript" type="text/javascript" src="../js/soc_facebook.js"></script>

Hilfreiche Tips zur TYPO3 Performance Optimierung

Donnerstag, November 24th, 2011

Auf tugle.de hab ich heute diesen Artikel gefunden. Die htaccess Regeln sind nicht nur für TYPO3-User interessant! Die haben bei mir auch richtig was gebracht.

Ich konnte den Page Speed Score bei www.t3touch.de von anfänglichen 70% auf satte 92% verbessern. Bilder habe ich dabei noch nicht in CSS Sprites kombiniert. Und die gzip Komprimierung scheint auf meinem Server auch nicht zu laufen. Aber ein Page Speed Score von 92/100 sollte auch genügen für den Anfang.

UPDATE:
Meine .htaccess sieht nun so aus:

# Browser-Caching:
ExpiresActive On
ExpiresDefault "access plus 4 hours"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType text/html "access plus 10 days"
ExpiresByType text/xml "access plus 10 days"
ExpiresByType text/css "access plus 10 days"
ExpiresByType text/plain "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType image/bmp "access plus 10 days"
ExpiresByType application/x-shockwave-flash "access plus 10 days"
# Kompression text, html, javascript, css, xml:
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/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Damit sind nun die Warnungen in Page Speed bezgl. mangelndem Browser Caching & gzip Kompression verschwunden. Aber in Prozenten ist das nicht mehr erwähnenswert. Der Page Speed Score steht nun bei 93/100.

Fancybox iframe mit dynamischer Größe

Dienstag, November 22nd, 2011

Dazu findet man bislang nur wenige hilfreiche Informationen. Hier bin ich irgendwann auf eine funktionierende Lösung gestoßen. Nur funktioniert eval() und auch window.top im Safari leider nicht. eval() wird aber auch gar nicht benötigt udn statt window.tp muss man nur window.parent verwenden, dann läuft es auch im Safari.

Hier der Code wie er bei mir nun läuft:

$(document).ready(function(){
	var w = $('body').width();
	var h = $('body').height();
	fb_resize(w,h);
});
function fb_resize(w,h) {
  var topWinHeight = window.parent.$('body').height();
  if (w > 0 || h > 0) {
  	// if content > viewport of browser
  	if(h > topWinHeight) {
		h = parseInt(topWinHeight)-120;
  	}
	window.parent.$("#fancybox-content").css( "height", h+"px");
	window.parent.$("#fancybox-content").css( "width", w+"px");
	// adds padding values to the height of parent window
	th = parseInt(h)+20;
	tw = parseInt(w)+20;
	window.parent.$("#fancybox-wrap").css( "width", tw+"px");
	window.parent.$("#fancybox-wrap").css( "height", th+"px");
	window.parent.$.fancybox.resize();
  }
}

Wenn man auf meiner neuen T3Touch Seite das Anmeldeformular öffnet, und dieses dann einfach mal ohne Angaben absendet, kann man das Script in Action sehen.

Neue Webseite für T3Touch-2.0.2

Sonntag, November 20th, 2011

T3Touch erzeugt eine TouchScreen optimierte Website für SmartPhones und basiert auf JqueryMobile und Photoswipe.

Bilder werden in ansprechende Galerien verwandelt, GoogleMaps & Routenplaner sind kinderleicht einzubinden.

Für Interessente gibt es nun eine eigene Seite: www.t3touch.de

Webseite T3Touch-2.0.2

How To Change Default Text Selection Colour

Donnerstag, November 10th, 2011

Was es nicht alles so gibt. Mit CSS kann man sogar die Auswahlhintergundfarbe verändern.

T3Touch Update

Donnerstag, November 10th, 2011

Das TYPO3 Template T3Touch habe ich heute akualisiert. Es werden nun die aktuellen Versionen von jQuery (1.7), jQueryMobile (1.0rc2) und PhotoSwipe (3.0.3) verwendet.

T3Touch Manual

Donnerstag, November 10th, 2011

Ein Manual ist nun auch für das TYPO3 Template T3Touch verfügbar.


87,026 Spam-Kommentare
blockiert von
Akismet