Archiv für Schlagwort: plugin

Coda PHP & Web Toolkit

Coda PHP & Web Toolkit

Coda ist bekanntlich das Tool meiner Wahl, wenn es darum geht feinen HTML- und CSS-Code zu schreiben. Heute stolperte ich über das Coda PHP & Web Toolkit, was den Editor um einige sehr nette Funktionen erweitert:

  • PHP syntax validation with jump to error and auto-save
  • Clean up/reformat HTML, CSS, Javascript and PHP code (configurable)
  • HTML, CSS and Javascript validation
  • Javascript and CSS minify

Ich finde das ungemein praktisch, vor allem die Validierungs-Funktionen werden mir sicherlich ein wenig Arbeit abnehmen.

Responsives Webdesign einfach testen

Bekanntlich ist ja responsibles Webdesign aktuell der heiße Scheiß. Und das ist eigentlich auch ganz klug. Denn so kann man seine Webseite schnell für verschiedene Endgeräte, sprich neben Desktops und Notebooks auch Tablets und Mobiltelefone anpassen. Ein paar CSS-Media Queries mit angepassten Werten in das Stylesheet und fertig. ((Zumindest ist so die einfache Theorie. In Wirklichkeit ist das ein wenig aufwändiger.))

der tag und ich - auf einem simulierten iPad

Den neuen Code zu testen ist dann aber nicht ganz so einfach, zumindest ich habe zum Beispiel zu Hause kein iPad rumliegen. Gut das es Menschen gibt, die Dinge wie Resizer entwickeln. Das ist ein Bookmarklet für den Browser, dass einem die darstellende Fläche im Browser entsprechend der Darstellungsfläche eines der Endgeräte skaliert. Zur Auswahl stehen dabei die Auflösungen

  • Mobile (320×480)
  • Small Tablet (460×640)
  • Tablet – Portrait (768×1024)
  • Tablet – Landscape (1024×768)
  • Desktop (1200×800)

Ich benutze die dazugehörige Resizer Chrome Extension seit ein paar Tagen und bin ziemlich begeistert davon. Wie in obigem Screenshot dargestellt sieht dieses Blog zum Beispiel in der iPad-simulierenden Ansicht aus. Oben rechts sieht man auch, zugegebenermaßen eher schlecht, die kleine Box mit der man die verschiedenen Auflösungen auswählen kann.

Zwar kann die Extension den Test auf dem echten Gerät nicht komplett ersetzen, doch ist es so schon tausend Mal komfortabler und genauer, als einfach den Browser ein wenig größer oder kleiner zu ziehen.

Außerdem machte mich Shortee auf das Responsive Design Test Bookmarklet von Benjamin Keen aufmerksam. Das zeigt nach einem Klick die verschiedenen Darstellungsvarianten einer Webseite nebeneinander in einem Browserfenster an.

Responsive Mehrfachansicht

Und wo wir gerade dabei sind: Sowohl The Responsinator, als auch responsive.is bieten den gleichen Mehrwert, sehen dabei aber anders/hübscher aus.

Responsibles einbetten von Videos mit FitVids

Videos gescheit in ein responsibles Layout einzubinden ist nicht ganz einfach. Sofern man auf den HTML5-Element video zurückgreift, ist das keine Raketenwissenschaft. Dann kann man nämlich diesen CSS-Code verwenden: video { max-width: 100%; height: auto; }.
Für eingebettete Videos von Fremdhostern, YouTube oder Vimeo zum Beispiel, ist das aber nicht so einfach. Denn diese werden über einen iframe eingebunden. Dave Rupert hat sich dazu ein paar Gedanken gemacht und ein kleines jQuery-Plugin geschrieben: FitVids. Dieses übernimmt die richtige Skalierung des Videos. Wie einfach das geht, zeigt folgendes Video.

Wer sich die manuelle Einrichtung des Plugins sparen möchte und WordPress benutzt, dem ist sicherlich mit dem FitVids for WordPress-Plugin geholfen. Und ich bin jetzt zufrieden und kann einen weiteren Haken auf der „Was mich am Blog noch stört“-Liste machen.

Howto: Das Kommentarfeld in WordPress dynamisch vergrößern lassen wie bei Facebook

Ein kleines Detail das an meinem Blogdings hier, das ich ziemlich gerne mag, ist das sich automatisch vergrößernde Kommentarfeld unter den Einträgen. Wie so oft ist das Einbauen dieses Features recht simpel.

Zuerst lädt man sich nämlich das Elastic Plugin für jQuery runter und dann direkt wieder hoch. Am besten in den Ordner des aktuell verwendeten WordPress-Themes. Anschließend muss man es im Kopfteil der Seite, also in der header.php laden lassen. Das geht mit folgender Code-Zeile, man sollte darauf achten das man das Plugin erst nach jQuery lädt.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.elastic.js"></script>

Anschließend muss man das Plugin noch auf ein Textfeld ansetzen. Bei WordPress hat das Kommentarfeld normalerweise die ID comment. Deshalb sieht die entsprechende Zeile Code so aus:

$(document).ready(function(){
	//Elastic textarea for comments
	$('#comment').elastic();
});

Die packt man dann ebenfalls in den head der Seite in ein script-Element. Oder man nutzt die von mir empfohlene Alternative: Wie glaub ich schon einmal erwähnt, habe ich solche Dinge in einer extra Datei namens functions.js ausgelagert.

Ausprobieren kann man die Funktionalität in jedem Kommentarfeld auf dieser Seite. Man muss nur genug tippen.

Lazy Load – Bilder beim Scrollen einer WordPress-Seite nachladen

Letztens fragte man mich, wie das mit dem langsamen Nachladen der Bilder auf meiner Seite funktioniert. „Ganz einfach!“ antwortete ich. „Da schreibe ich mal ein paar Zeilen zu.“ Here we go:

Um die Bilder nachzuladen nutze ich ein Plugin für das Javascript-Framework jQuery. Das Plugin hört auf den schönen Namen Lazy Load und gibt es schon eine ganze Weile. Ich wundere mich ein wenig, dass es jetzt erst in Mode kommt. Grundidee des Plugins ist es gar nicht, die Bilder schön einblenden zu lassen. Eigentlich geht es darum, die Ladegeschwindigkeit der Seite beim ersten Laden zu erhöhen. Dazu werden zuerst nur die sichtbaren Bilder geladen und die weiteren Bilder dann beim scrollen.

Um das Plugin zu installieren sind nur wenige Schritte notwendig: Davon ausgehend, dass man jQuery bereits eingebunden hat, lädt man sich das Plugin schnell von der Lazy Load-Seite runter und packt es in den Ordner des eigenen WordPress-Themes. Anschließend bindet man die neue Datei dann mit folgender Code-Zeile in den Kopf der Seite (also in das head-Element).

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lazyload.js"></script>

Nun muss dem Script nur noch gesagt werden, welche Bilder eigentlich mit dem Effekt nachgeladen werden sollen. Bei mir sollen das alle großen Bilder in den Beiträgen sein. Da ich sonst alle Bilder im Layout per CSS eingebunden habe, kann ich das Plugin einfach auf dem img-Tag ansetzen.

	//Fauler Bildlader
	if(!navigator.userAgent.toLowerCase().match('ipad')) {
		$("img").lazyload({effect : "fadeIn"});
	};

Nun mag man sich wundern, was das if soll. Ganz einfach: Mir war aufgefallen, dass das iPad leider nicht mit dem Javascript zurechtkommt und statt der nachzuladenden Bildern nur das Fehlersymbol angezeigt wurde. Mit der kleinen Abfrage wird das Problem umgangen.

Für meinen Bedarf war es das dann auch schon. Auf der Plugin-Seite werden die weiteren Optionen des Plugins ausführlichst erklärt.

Datenschutz und Kram

Vater Staat macht es einem nicht einfach: Eigentlich möchte ich hier nur ein paar Sachen ins Internetz stellen. Ich möchte mich darüber freuen wenn andere Dinge die ich mache oder gut finde auch gut finden. Das kostet mich ein paar Euros im Monat, macht aber hauptsächlich eine Menge Spaß, gerade wenn ich solche Diskussionen lese.

Denn natürlich bin ich dabei nicht nur ein wenig neugierig und möchte wissen, woher die Besucher denn so kommen, was sie hierher verschlägt und ob es ihnen hier gefällt. Damit sind wir dann auch beim Thema, denn dazu gibt es allerlei Tools. Eines der beliebtesten ist sicherlich Google Analytics, dass ich bis vor gerade hier einsetzte. Bei Google hat man ganze Arbeit geleistet, ein tolles Tool auf die Beine gestellt und es war mir immer möglich eine schöne Übersicht über meine Besucher zu erhalten.
Den großen Rahmen des Ganzen zu verstehen fällt mir schwer, aber es ist wohl so, dass es aus irgend einem Grund böse ist die IP-Adresse seiner Benutzer zu speichern. Als könnte ich mit der was anfangen. Ich habe das Gefühl, das hier wieder einmal Menschen Entscheidungen getroffen haben, die das Netz nicht verstanden haben. Darüber möchte ich mich eigentlich schon gar nicht mehr aufregen. Es nervt einfach nur.

Jedenfalls habe ich für diese Seite nun Google Analytics mal deaktiviert. Die Geschichte hier soll Spaß machen und nicht damit enden, dass ich die Rechnung irgend eines Anwaltes bezahlen darf. Das mag vielleicht ein wenig voreilig sein, denn wie es denn nun genau ist weiß auch keiner. Allen voran der Gesetzgeber.
Ich bin da lieber vorsichtig. Im Hintergrund zählt jetzt noch Semmelstatz mit. Das speichert IP-Adressen anonymisiert und sollte damit keine „Gefahr“ für Recht und Ordnung bedeuten. Außerdem noch die WordPress-Stats. Mal schauen ob ich die auch abschalten muss/kann/sollte. Piwik soll wohl eine gute Alternative zu Google Analytics sein, da muss ich mich mal schlau machen.

Was bleibt: Ein wenig fader Beigeschmack. Datenschutz schön und gut, aber wird hier der Krieg nicht übertrieben?

Weg mit dem WordPress.com Stats-Smiley!

Wer ein WordPress-Blog betreibt und das Plugin „WordPress.com Stats“ (früher) oder heute „JetPack“ benutzt, wird ihn kennen: Den kleinen, nervigen Smiley irgendwo auf der Seite der vom Plugin eingebaut wird. Je nach Theme hängt der dann irgendwo im Layout rum und kann da schon mal recht störend sein. Schade eigentlich, denn das Plugin an sich ist schon ziemlich praktisch.

Der kluge Blogbetreiber wird den Smiley aber schnell los, dazu braucht es nur ein klein wenig CSS.
Man kopiere einfach folgenden Code in die CSS-Datei seines Themes:

/* Den WordPress.com-Stats-Smiley ausblenden */
#wpstats {
display: none;
visibility: hidden;
}

Schon ist das lästige Grinsegesicht verschwunden!