blog.exotec

Bislang wirkte die Darstellung auf dem iPad noch recht plump, dies hat sich aber in der neuen Beta Version mächtig geändert.

Die Macher der PhotoSwipe Mobile Gallery, welche ich auch in meinem TYPO3 Smartphone Template verwende, zeigen hier ein recht cooles HTML 5 Experiment.

Die Sideways Gallery kann man hier als TYPO3 Extension downloaden.

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.

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>

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.

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.

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