Komprimierung aktivieren Webdesign Performance

Ein sehr hilfreicher Schritt ist bei der Webdesign Performance Optimierung ist es die Komprimierung für das HTTP-Übertragungsprotokoll zu aktivieren. Alle Browser unterstützen das. Hier zeige ich, wie das geht und was das überhaupt ist.

Webdesign Performance Optimierung Page Speed Analyse

Wir nutzen wieder Google Chrome Page Speed Analyse. Wie das funktioniert habe ich ja in dem letzten Artikel zum Thema Bilder Optimierung bereits beschrieben. Hier wählen wir diesmal den Reiter Page Speed Komprimierung aktivieren.

Webdesign Performance Page Speed Komprimierung aktivieren

Webdesign Performance Page Speed Komprimierung aktivieren

Die Komprimierung der Ressourcen

“Mit gzip oder deflate kann die Anzahl der über das Netzwerk gesendeten Byte reduzieren. Ermöglichen Sie die Komprimierung der folgenden Ressourcen, um die Übertragungsgröße um 781.4 KB (78%) zu reduzieren.” Das steht bei dem Page Speed Hinweis.  Und das ist schon ein echt tolles Ergebnis, dafür das man nur ein paar Einstellungen und der .htaccess Datei vornehmen muß. Ich gehe in diesem Artikel nicht weiter auf die serverseitige Installation ein. Soviel mag allerdings gesagt sein. Es müssen Libraries installiert und über die php.ini global aktiviert werden. Der Gewinn dabei ist riesig. Alle statischen Files die vom Server zum Client übertragen werden können dabei verkleinert transportiert werden.

Komprimierung aktivieren Webdesign Performance

Mit einigen Zeilen in der .htaccess Datei im Root Verzeichnis kann man die Komprimierung aktivieren und so die Webdesign Performance stark erhöhen. Voraussetzung ist einerseits serverseitig die Bibliotheken zur Verfügung zu stellen und das die .htaccess Datei aktiviert ist. Beides soll hier an der Stelle jetzt vorausgesetzt sein.

.htaccess Einstellung gzip deflate

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

Komprimierung aktivieren Page Speed Webdesign Performance

Komprimierung aktivieren Page Speed Webdesign Performance

jQuery Link von Bild entfernen

jQuery Link von Bild entfernen


$(".threecolumn a").each(function(){
if($(this).attr('href').indexOf('empty.png') >= 0){
$(this).contents().unwrap();
}
});

jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

Der oben abgebildete Codeschnipsel ist in seiner Form einem Typo3 Projekt entnommen worden. Es gibt dort eine 3 spaltige Mitarbeiter Übersicht. Leider ist TYPO3 immer wieder eine Hölle im Detail. Hat ein Mitarbeiter kein Bild, obwohl man das Text mit Bild Template ausgewählt hat, kommt das HTML nicht so raus, sagen wir mal wie ich mir das so wünsche. Deshalb muß ich leider auf diesen TYPO3 Hack mit der Auswahl eines empty.png zurück greifen. Damit die ganze Sache aber schön benutzerfreundlich bleibt und der eh von Da-muß-man-nur völlig überforderte TYPO3 Redakteur nicht auch noch bei denen die Bilder vergrößern Funktion abstellen muß habe ich das oben abgebildete jQuery snippet eingefügt. Hier bleibt vielleicht noch zu sagen, da es sich um einen Fancybox Link handelt ist der Bildpfad href Targets des Links. In diesem Fall dient also der Bildname als Segment der Identifikation für den Case.

Sicherlich ist das keine saubere Lösung die Seite erst falsch rendern zu lassen und dann das HTML Dom nachträglich über jQuery zu korrigieren. Allerdings ist es ein vom Entwicklungsaufwand her gesehen leichtes Mittel gerade im Bereich von TYPO3 so Korrekturen vorzunehmen oder auch Features zu implementieren. Es ist möglich sehr viel mit jQuery zu zaubern und gerade so ein kleiner jQuery Code Schnipsel ist natürlich wesentlich schneller programmiert als über Typoscript den Rendering Prozess zu beeinflussen. Ehrlich gesagt hätte ich an der Stelle gar nicht gewusst, wo ich hier ansetze und einen Case einbauen kann.

Weiterführende Links zum Thema jQuery und TYPO3
Offizielle Seite jQuery.com
Offizielle Seite typo3.org
TYPO3 Programmierung aus Duisburg

TYPO3 indexed search no result

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Dieser Artikel handelt von einem Problem, daß bei mir in der Form in einem TYPO3 4.7 Projekt aufgetreten ist. Im wesentlichen waren es bei mir 2 Eistellungen, die zum Erfolg geführt haben. Einmal das config.no_cache = 0 und plugin.tx_indexedsearch.result_link_target = 34 (Suchausgabe PID) zu setzen.

TYPO3 indexed search no result

Man kennt das ja nur zu gerne bei der Entwicklung mit TYPO3. Der Teufel steckt bekanntlich im Detail. Das TYPO3 Plugin bzw. TYPO3 Extension indexed search (tx_indexedsearch) kann, wie eigentlich der Name ja auch schon vermuten lässt nur indexierte Inhalte lesen. Dafür muß dann, wie oben abgebildet, no_cache auf 0, also abgestellt werden. Das habe ich dann getan und mir auch die aktuelle Beispiel Typoscript Konfiguration von der TYPO3 Wiki Seite eingebaut. Leider gab das immer noch keinen Erfolg. Erst durch das hinzufügen der Page ID – PID für das result_link_target ging dann alles. Hier im Anhang ist jetzt mein komplettes Typoscript für indexed search abgebildet. Zu beachten ist, das die Werte

page.config.index_enable = 1
page.config.index_externals = 1

bei mir in einer speziellen Config Datei gesetzt werden.

Typoscript für indexed search


# ==============================================================================
# The INDEXED_SEARCH template
# Indexed Search an extension for searching content in the frontend.
#
# For a full description of the configuration options, check the manual of this extension.
# Extension manuals are normally included in the extensions as Open #Office documents,
# and can be accessed directly from the module Ext Manager in the TYPO3 backend (select the option 'loaded extensions or install extension'.
#
# For the extension indexed search, the documentation is delivered in a separated extension with the extension key 'doc_indexed_search',
# which is also provided #with this Demo Package.
# ==============================================================================

# Configuration for indexedsearch plugin

plugin.tx_indexedsearch {
search.rootPidList=1
view.defaultPid = 79
result_link_target = 79
# erweiterte Suche abschalten
show.advancedSearchLink = 0

# standardmässig mit ‘Wortteil’ suchen statt mit ganzem Wort
_DEFAULT_PI_VARS.type = 1
# standardmäßig mit erweiterter Suche starten
_DEFAULT_PI_VARS.ext = 1

# Anzeige regeln, ein- (1) bzw. ausgeblendet (0)
show {
# Suchregeln
rules = 0
# Erstellungsinformationen des Hashes
# parsetimes=1
# Zweite ebene im Bereichs-dropdown anzeigen
# L2sections=1
# Erste ebene im Bereichs-dropdown anzeigen
# L1sections=1
# Alle “nicht im menü” oder “im menü verstecken”
#(aber nicht “versteckte” seiten) mit anzeigen in section?
# LxALLtypes=0
# leeren des Suchfeldes nach suche
clearSearchBox = 1
# Aktuelles suchwort zu den bisherigen suchwörtern hinzufügen
# clearSearchBox.enableSubSearchCheckBox=0
}

# die Auswahlfelder für die Suchparameter werden ein- (0) bzw. ausgeblendet (1)
blind {
# Suchtyp (Ganzes, Wort, Wortteil, ..)
type=1
# default option (Und, Oder)
defOp=1
# Bereich(e) der website
sections=1
# Suche in Medientypen
media=1
# Sortierung
order=1
# Ansicht (Sektionshierachie / Liste)
group=1
# Sprachwahlbox
lang=1
# Auswahl Sortierung
desc=1
# Ergebnisse (Anzahl der Treffer pro Seite)
results=10
# Ansicht: Erweiterte Vorschau
extResume = 1
}
}

TYPO3 indexed search no result – Weiterführende Links

http://wiki.typo3.org/De:Indexed_search
http://stackoverflow.com/questions/11677289/typo3-4-7-indexed-search-wont-work

Webdesign Duisburg Developers Life

Webdesign Duisburg Developers Life

Webdesign Duisburg Developers Life

Spaß und Freude gehören zu jedem Job. Nur so kann man erfolgreich arbeiten. Auch Webdeveloper aus dem Bereich Webdesign gehören dazu. Es ist nicht immer einfach unter hohem Druck zu stehen und den nötigen Humor zu bewahren und auch die Geduld den Druck auszuhalten. Oft fühlt man sich als Entwickler alleine und alleine gelassen. Das muß aber nicht immer so sein. Wichtig ist immer Softwarequalität in seine Arbeit zu bringen und diese auch zu erhalten.

Das ist aber nicht Thema des Artikels, steht aber trotzdem in engem Zusammenhang zu den Problemen die hier in der YouTube Video Reihe “Developers Life” parodiert werden. Auch wenn es noch lange nicht zu einem echten YouTube Hit reicht, so erfreuen sich die Videos in der Webdeveloper Szene doch immer größerer Beliebtheit.

Webdesign Duisburg Developers Life Part 1

Webdesign Duisburg Developers Life Part 2

Webdesign Duisburg Developers Life Part 3

YouTube Channel Aykalam Channel

Webdesign Duisburg Developers Life

Whats up Hong Kong Youtube Hit

Whats up Hong Kong YouTube Hit

Whats up Hong Kong YouTube Hit

Es gibt viele spektakuläre Videos auf YouTube seit mit GoPro alles so einfach geht. Das Video Whats up Hong Kong in weniger als 5 Tagen die 1 Millionen User Marke geknackt und unterscheidet sich durch seine professionelle Produktion und die Story. Die drei Hauptakteure aus Whats up Hong Kong sind in Hong Kong und steigen auf einen Wolkenkratzer mit einer großen Werbetafel. Hier spielen sie dann im Hacker Style ihr eigenes Video ein und filmen sich dabei auch mit einer Drohne.

Einen YouTube Hit zu landen ist nicht leicht. Es steht eng zusammen mit der Möglichkeit der viralen Verbreitung. Dafür, also um eine möglichst große und effektive Reichweite zu bekommen, bieten sich natürlich Social Media Video Portale wesentlich besser an als auf eigenen Webseiten. Hier in diesem Artikel lässt sich das Video ebenso leicht einbinden, wie auf Facebook oder Twitter. Eigene Videoportale bieten dieses Feature nicht. Hier wird noch nicht einmal ein Bild in der Voransicht auf Social Media Portalen generiert. Führende Portale sind hier YouTube und Vimeo. Über beide habe ich bereits mehrfach gebloggt.

What’s up Hong Kong

What’s up Hong Kong YouTube Hit

Twitter Analytics Reichweite bei Social Media Marketing

Mit der neuen Twitter API ist auch endlich Twitter Analytics gekommen. Unter https://analytics.twitter.com/ kann man sich nach erfolgreichem Login die Reichweite seiner Tweets anzeigen lassen und so seine Twitter Aktivitäten optimieren.

Twitter Analytics von Webdesign Duisburg Rogoit

Twitter Analytics von Webdesign Duisburg Rogoit

Twitter Analytics zur Optimierung der Tweets

Bei Twitter geht es auch darum gefunden zu werden. Ähnlich wie bei der Google Suche spielen hier Keywords eine große Rolle. Neben den Keywords im Text kann man diese zusätzlich als Hashtag nutzen. Unter diesem Hashtag werden dann alle Einträge zu dem Thema auf Twitter gelistet. Allerdings ist hier der Context von dem Tweet sehr wichtig. Es bringt also nichts einen Tweet über Webdesign in Duisburg mit dem Hashtag #KOEFCB zu promoten, bloß weil dieser heute bei ersten Heimspiel vom 1.FC Köln gegen den FC Bayern München ein starke Reichweite erzielt. Wenn es aber in dem Tweet gar nicht um das Fußball Spiel geht, verliert der Tweet jede Wirkung. Er interessiert dann einfach keinen.

Twitter Analytics welchen Hashtag brauche ich

Immer wieder gibt es bekannte Hashtags. Mit der Veröffentlichung des IPhone 6 #bendgate gab es z.B. einen Shitstorm zu der Biegung des Geräts, wenn man sich drauf setzt. Oder auch der #hecke Hashtag, auf dem eine Zeitlang Webdesigner ihre Arbeit mit der Arbeit an einer Hecke verglichen haben. In einem solchen Moment kann man natürlich auch einen Tweet zu dem Thema machen und ggf. Retweets und Likes bekommen. Es macht also viel Sinn Tweets zu einen bestimmten Thema zu veröffentlichen und nicht mit Twitter Links zu promoten. Das mögen die User deutlich weniger, als kurze sinnvolle Beiträge.

Twitter Analytics Weblinks
https://analytics.twitter.com/

Rogoit Webdesign aus Duisburg auf Twitter
https://twitter.com/rogoit

Persieing van Persie Fun pics WM

Persieing van Persie WM Quelle Facebook Twitter

Persieing van Persie WM Quelle Facebook Twitter

Persieing ist ein Webtrend ausgelöst durch den tollen Kopfball von dem Niederländer van Persie bei der WM 2014 in Brasilien.

#Persieing als Webtrend auf Twitter und Facebook

Es war eines der tollsten Treffer, die es jemals gegeben hat. Robin van Persie köpft das 1:0 im spanischen Debakel von der WM in Brasilien und leitet damit den historischen 5:1 Sieg der Niederlande gegen den amtierenden Weltmeister Spanien. Das Team der Spanier konnte sich nicht mehr von dem Schock erholen und unterlag auch gegen Chile mit 2:0 und schied somit bereits in der Gruppenphase aus.

Das Tor, ein Flugkopfball löste einen Webtrend aus. #persieing auf Twitter und #persieing auf Facebook sind die beliebten Hashtags für die Bilder der Webuser, die sich waagerecht auf Fotos ablichten und den Flugkopfball nachstellen. Das geht weltweit so und neben Persieing Babyfotos sind auch viele Erwachsene eifrig am Persieing gibt es auch jetzt schon eine ganze Reihe von Fun Pics zu dem Thema. Die Bilder sind dabei sehr schnell geschossen und müssen nicht aufwendig gestellt werden. Auch ganze Gruppen, Vereine und Mannschaften machen bei den Trend mit.

Periesing Weiterführende Links zum Thema
https://www.facebook.com/PersieingNL?fref=ts
http://www.sportschau.de/fifawm2014/video/videoueberpersieingundrobbening100.html
http://www.sport1.de/de/fussball/wm/newspage_908931.html

John Wilhelm Photoholic macht seine Kinder zu Dotcom Stars

John Wilhelm Photoholic Quelle  johnwilhelm.ch

John Wilhelm Photoholic Quelle johnwilhelm.ch

Der Schweizer Fotograf und Grafik Künstler John Wilhelm hat es mit seinen jüngsten Werken in die Hall of Fame unter den Photoshop Künstlern geschafft. Dabei hat er seine Kinder illustriert und beeindruckende Bilder geschaffen. Alle Werke kann man sich auf der Web Blog Seite ansehen. Dabei hat er es zweifelsohne zu echtem Internet Ruhm geschafft. Neben zahlreichen Berichten in Internet Blogs wurde so auch auf Stern online über diese tollen Bilder der Photoshop Kunst berichtet. Auch ich verneige mich vor dieser tollen Arbeit und bin immer wieder von der Kreativität und der Liebe zum Detail in diesen Kunstwerken begeistert.

Weiterführende Links zu John Wilhelm Photoholic
http://johnwilhelm.ch/
https://www.facebook.com/johnwilhelmisaphotoholic
http://www.stern.de/familie/familienbande/familienzeit/schweizer-photoholic-liebling-ich-habe-die-kinder-bearbeitet-2110506.html

WordPress Bildergalerie zu John Wilhelm Photoholic Quelle johnwilhelm.ch


YouTube Hit: Katy Perry Dark Horse 20 Ten Second Songs

Katy Perry Dark Horse 20 Songs

Katy Perry Dark Horse 20 Songs

Im Stil von harten Metal Bands wie Pantera und Metallica geht es aber auch über die Red Hot Chili Peppers, Queen und Frank Sinatra. Mit ganzen 20 10 Sekunden Spots von Katy Perrys Dark Horse Hit ist ein neuer YouTube Hit online gegangen. Absolut sehenswert.

Katy Perry Dark Horse 20 Ten Second Songs

TYPO3 Update: typo3_src mit wget downloaden

Webdesign mit Typo3 aus Duisburg

Webdesign mit Typo3 aus Duisburg

Ein neues TYPO3 Update auf dem bekannten Open Source CMS TYPO3 auf die Version 6.2 hat in Zukunft viele Updates der TYPO3 Instanzen zur Folge. Dabei hat es das neue Release in sich. Unter anderem bringt es ein viel besseres Install Tool mit und soll auch Ssystemupdates von der TYPO3 V 4.x problemlos unterstützen. Zusätzlich ist es auch mit einem Twitter Bootstrap Package ausgestattet und kann so “Out of the box” schnell Responsive Webdesign produzieren. Für TYPO3 Updates ist es nötig, die neuen TYPO3 Source Dateien zu laden und einzubinden. Serverseitig kann man hier sehr gut mit wget die Files runterladen und dann entpacken.

wget Befehle zum Download von TYPO3 Source files
Aktuellste Version 
wget get.typo3.org/current
Aktuellste Version aus einem bestimmten Release
wget get.typo3.org/6.2
Exakte Version
wget get.typo3.org/4.6.17