Servaholics » Tutorials

Infografik: Kampf der Cloud-Speicher - Dropbox vs. SkyDrive vs. Google Drive

Chris — Sat, 28 Apr 2012 11:47:58 +0000

Er ist eröffnet, der Kampf der "Wolken".

Dropbox (dropbox.com), SkyDrive (windowslive.de/skydrive) und Google Drive (drive.google.com) - diese drei wollen jeweils Marktführer werden. Wer es wohl wird?

Unter digitaltrends.com findet man eine Vergleich der drei Dienste, die diese Frage vielleicht beantworten könnte (via aptgetupdate.de).

Übrigens: Wer unter Windows unterwegs ist und schnell Dateien in seine Cloud verschieben möchte, der findet unter stadt-bremerhaven.de bzw. t3n.de ein passendes Tutorial für alle drei Anbieter dazu.

Share Buttons: 7 Dienste und ihre Knöpfe

Chris — Mon, 26 Mar 2012 09:25:10 +0000

"Share Buttons" - sie sind beliebter denn je. "Teilen", "Empfehlen", "Share" - auf immer mehr Websites sind sie zu finden.

Twitter, Facebook, Google+ und co. sind nur ein paar Beispiele für Dienste, die Webmastern Buttons anbieten, mit denen deren Fans Werbung in den entsprechenden Netzwerken machen können.

Wir haben hier einmal sieben bekannte Dienste und ihre Buttons aufgelistet. Auf drei Dinge gehen wir dabei ein.

Wo finde ich den Quellcode des jeweiligen Buttons?
Falls vorhanden: Wie muss alternativ ein Link aussehen, mit dem man teilen kann?
Falls vorhanden: Welchen Text muss ich in meine Datenschutzbestimmungen mit aufnehmen, wenn ich einen Button verwende?

Zu Punkt 2 und 3 noch schnell ein paar Worte:

In der letzten Zeit gab es mehrfach Beschwerden, dass "Share Buttons", speziell von Facebook, Daten von Website-Besuchern ohne deren Zustimmung sammeln würden.

Aus diesem Grund sollten Website-Betreiber vor dem Einbinden solcher Buttons unbedingt in ihren Datenschutzerklärung einen Hinweis einfügen, welche Daten von welchem Button gesammelt werden - und wie man diesem widersprechen kann. Entsprechende Links scheinen zu genügen.

Sofern wir Informationen darüber haben gibt's bei den jeweiligen Buttons entsprechende Infos zu diesem Thema.

Wer ganz auf Nummer sicher gehen möchte, der kann - wie wir - statt Buttons Links wählen. Diese sammeln schließlich keine Daten.

So, los geht's.

1. Twitter

Beim Micro-Blogging Dienst Twitter gibt es aktuell unterschiedliche Buttons, die auf Wunsch einen Counter anzeigen können: https://twitter.com/about/resources/buttons.

Linkversion für WordPress:

NICKNAME durch Twitter-Namen ersetzen

 echo rawurlencode(get_permalink()); ?>&text= echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Teilen">Teilen

Datenschutz:

Bisher ist uns leider kein Mustertext bekannt. Unter Umständen kann man den Text eines anderen Buttons (z.B. Facebook) entsprechend anpassen und auf https://twitter.com/privacy verlinken.

2. Facebook

Etwas komplizierter ist es beim größten sozialen Netzwerk Facebook. Hier muss man sich etwas mehr mit den unterschiedlichen Button-Arten beschäftigen:

Linkversion für WordPress:

 echo rawurlencode(get_permalink()) ?>&t= echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Empfehlen">Empfehlen

Datenschutz:

Unter e-recht24.de findet man einen Muster-Text, der in die eigenen Datenschutzerklärung eingefügt werden kann. Ein Verweis auf https://www.facebook.com/about/privacy/ sollte in jedem Fall eingebunden sein.

3. Google Plus (G+)

Für Googles soziales Netzwerk Google+ gibt es die sog. +1-Buttons.

Einen entsprechenden Generator gibt's unter http://www.google.com/intl/de/webmasters/+1/button/. Zwischen drei Buttonarten (u.a. mit Counter) sowie vier Größen kann gewählt werden.

Datenschutz:

Für die Datenschutzerklärung empfehlen wir die Textvorlage von spreerecht.de. Webmaster sollten auf jeden Fall auf http://www.google.com/intl/de/policies/privacy/ verweisen.

4. XING

Seit kurzem bietet auch XING einen Generator für einen Share-Button an. Dieser ist unter https://www.xing.com/app/share zu finden, gewählt werden kann zwischen zwei Buttons samt Counter sowie drei unterschiedlichen Größen.

Datenschutz:

Einen vorgefertigten Text für die eigene Datenschutzerklärung findet man am Ende der Seite (nach einem Klick öffnet sich ein Pop-up).

5. Pinterest

Auch das erfolgreiche Start-up Pinterest bietet seinen Nutzern einen Generator für Buttons. Unter http://pinterest.com/about/goodies/ gibt's für eine Einheitsgröße die Möglichkeit, einen Counter sofern gewünscht sowohl horizontal als auch vertikal hinzuzufügen.

Linkversion für WordPress:

PATH_TO_IMAGE durch URL des zu pinnenden Bildes ersetzen

 echo rawurlencode(get_permalink()) ?>&media= echo rawurlencode(PATH_TO_IMAGE); ?>&description= echo rawurlencode(strip_tags(get_the_title())) ?>" target="_blank" title="Pin It!">Pin It!

6. Tumblr

Der Blogging-Dienst Tumblr bietet ebenfalls Buttons an. Der Generator unter http://www.tumblr.com/docs/de/share_button ermöglicht Buttons in vier verschiedenen Größen und zwei Farbe: Grau und Blau.

Linkversion für WordPress:

 echo rawurlencode(get_permalink()) ?>&name= echo rawurlencode(strip_tags(get_the_title())) ?>&description= echo rawurlencode(strip_tags(get_the_excerpt())) ?>" target="_blank" title="Share on Tumblr">Tumblr

7. Flattr

Auch wenn "Share Button" nicht zu 100% zutrifft, so sollte man Flattrs Buttons trotzdem auch erwähnen.

Unter http://developers.flattr.net/button/ können die Spenden-Buttons generiert bzw. vorgefertige Plugins für unterschiedliche Systeme gefunden werden.

Für WordPress gibt es bspw. ein recht gutes Plugin: wordpress.org. Dieses ermöglicht neben den Buttons auch eine Linkversion.

So, das waren auch schon die sieben Dienste. Zum Abschluss noch ein Comic: xkcd.com.

Projekt: Apple Keyboard reinigen

Palm — Tue, 20 Mar 2012 11:28:35 +0000

Wer kennt das nicht? Man hat etwas neues und versucht so pfleglich wie möglich damit umzugehen. Doch irgendwann lässt das nach. Wie auch bei mir...

Vor einigen Monaten legte ich mir einen neuen iMac zu. Bekanntlich ist dort das Apple Wireless Keyboard dabei. Da mir dort der Nummern-Block fehlte, kaufte ich mir die kabelgebundene Version mit Num-Block. Soweit so gut. Gestern Abend passierte dann das Grauen aller Computer-Besitzer: Das Cola-Glas fällt um und die Tastatur schwimmt in Cola.

Das führt mich zu meinem heutigen Beitrag, indem ich euch zeigen möchte, wie man ein Apple Keyboard reinigt und die Tasten richtig entfernt.

Vorab: Es ist höchste Vorsicht geboten! Die kleinen Plastikteile halten nicht so viel Druck aus und zerbrechen leicht! Bitte alles sorgfältig durchführen und ohne Zeitdruck. Ich kann nicht garantieren, ob diese Anleitung auch bei einem MacBook funktioniert.

Also, was brauchen wir?

eine kleine Schale, gefüllt mit Wasser und einem Tropfen Spülmittel
Küchenrolle zum abtrocknen
Wattestäbchen
Nagellackentferner
ein kleiner Schlitz-Schraubenzieher oder vergleichbares (ich nahm eine Nagelfeile)
vieeeeeel Geduld

Los gehts!

Wenn ihr die Reihenfolge der Tastatur nicht wisst, macht euch am besten vorher ein Foto von der Tastatur oder schaut im Internet nach der Belegung der Tasten.

Führt den Schraubenzieher (oder den anderen Gegenstand) von oben unter die Taste und hebt sie vorsichtig an. Mit ein wenig Druck nach oben, löst sie sich. Dann einfach nach unten abziehen und sie ist komplett ab.

Nun zu dem kleinen Plastikteil. Dort sind oben rechts und links kleine Häkchen, die gelöst werden müssen. Nehmt den Schraubenzieher und hebelt sie vorsichtig nach oben (nicht zu euch, sondern in Richtung Oberseite der Tastatur ). Wiederholt dies auch auf der anderen Seite, dann ist auch das Plastikteil gelöst.

Legt die beiden Teile in das Schälchen mit Wasser und Spülmittel. Das Spülmittel sorgt dafür, dass der Schmutz entfernt wird. Bei Bedarf auch mal hin- und herbewegen.

Nun ein Wattestäbchen in ein klein wenig Nagellackentferner tränken und die Tastatur mit dem Stäbchen von innen reinigen. Passt auf, dass die Watte nicht an den Häkchen hängen bleibt.

Abschließend bauen wir in der umgekehrten Reihenfolge wieder ein. Nehmt die beiden Teile wieder aus dem Wasser und trocknet sie mit einem Blatt Küchenrolle.

Als erstes kommt das Plastikteil. Legt es wie auf dem Bild gezeigt ein. Erst unten an der Metallklammer und dann leicht mit dem Finger festdrücken. Danach die Taste: Einfach auflegen und ebenfalls mit dem Finger festdrücken.

Fertig!

Ich hoffe, dass euch dieser Artikel weitergeholfen hat und alles gut gegangen ist!

Web Server mit PHP, MySQL und phpMyAdmin auf Debian einrichten

iWebaholic — Mon, 20 Feb 2012 11:49:31 +0000

In diesem Tutorial möchte ich auch erklären wie man einen Apache Web Server unter Debian basierenden Betriebssystemem einrichtet und dann PHP, MySQL und phpMyAdmin installiert. Zu auf Debian basierenden Linux-Distributionen zählen unter anderem Ubuntu und Linux Mint.

Wir werden alle benötigten Pakete mit einem Terminal über die command line installieren. Dies geht schneller, man installiert nur das was man wirklich braucht (dies ist bei LAMPP z.B. oft nicht der Fall) und das Updaten der Pakete wird später einfacher und schneller gehen.

Je nach Linux-Distribution und Desktop-Oberfläche habt ihr bereits ein Terminal installiert. Wenn ihr Ubuntu oder GNOME benutzt heißt das Programm "Terminal", wer KDE benutzt, wie ich, kann "Konsole" benutzen. Startet das Programm nun um weiterzumachen. Da wir einige Pakete installieren, werden Administrator-Rechte benötigt. Gebt folgenden Befehl ins Terminal und dann euer Passwort ein, um alle späteren Befehle mit Admin-Rechten auszuführen:

$ sudo su

Das Dollar Zeichen gehört nicht zum Code – es zeigt nur, dass der Code Bash ist. (Je nach Linux Distribution varriert dieser Befehl, auf Ubuntu Server heißt er sudo -s. Am Besten probiert ich den oben genannten Befehl aus und guckt was das Terminal antwortet.) Nun fangen wir dem Installieren der Packete an. Zunächst einmal Apache 2 als Web Server:

$ apt-get install apache2

Das Terminal wird auch mitteilen wie viel Speicherplatz benötigt wird (~15 MB für Apache) und euch fragen ob ihr Apache nun installieren wollt. Gebt j zum Bestätigen ein. Wenn Apache fertig installiert ist, startet einen Browser eurer Wahl und gebt in der Adresszeile 'localhost' ein. Wenn nun eine Seite mit dem Inhalt 'It works!' erscheint, habt ihr soweit alles richtig gemacht. 'localhost' ist der Name eures Web Servers.

Die Dateien, die sich auf dem Web Server befinden, liegen im Verzeichnis /var/www/. Wenn ihr nun mit einem Dateibrowser oder dem Terminal versucht eine Datei dort zu erstellen, werdet ihr merken, dass ihr dazu noch keine Rechte habt. Gebt folgendes im Terminal ein um dies zu ändern:

$ chmod 0777 /var/www/

Nun könnt ihr auch Dateien anlegen! Soweit ist der Web Server natürlich noch relativ nutzlos, deswegen installieren wir nun MySQL. Falls ihr euch wundert warum wir MySQL vor PHP installieren: PHP wird direkt mit phpMyAdmin installiert und phpMyAdmin benötigt eben MySQL. Um MySQL zu installieren müsst ihr folgenden Befehl ausführen:

$ apt-get install mysql-server mysql-client

Da diese Pakete und die anderen mitgelieferten Pakete mehr als 60 MB groß sind, wird das Downloaden und die Installation ein paar Minuten dauern. Der Installationsprozess wird euch nun bitten ein Passwort für MySQL festzulegen, alternativ kann man dieses auch weglassen. Tipp: Man kann MySQL auch per command line benutzen:

$ mysql -p -u root

Jetzt werden wir phpMyAdmin installieren! Dafür wird wieder nur ein Befehl benötigt:

$ apt-get install phpmyadmin

Der Installationsprozess wird nun fragen welchen Web Server man nutzt, da wir Apache installiert haben müssen wir hier auch Apache auswählen! Desweiteren werden weitere Einstellungen abgefragt wie z.B. die Passwörter für MySQL und phpMyAdmin selbst. Je nach Terminal kann das z.B. so aussehen:

Wenn ihr alle Einstellungen vorgenommen habt, ist phpMyAdmin nun installiert. Im Browser könnt ihr phpMyAdmin aufrufen indem ihr 'localhost/phpmyadmin' aufruft! Außerdem ist nun auch PHP selbst installiert.

Viel Spaß mit dem Web Server!

PHP: Sonderzeichen wie é oder ö in Permalink/Slug richtig behandeln

Chris — Sat, 18 Feb 2012 15:01:12 +0000

Die WordPress-Nutzer unter euch kennen es vermutlich: Adressen von Artikeln können über sog. Permalinks (auch: "Slugs") besonders suchmaschinenfreundlich, zu "sprechenden Namen", gemacht werden.

Aus einem é wird ein e, aus " und * ein - bzw. ein Leerzeichen, und aus mañana wird manana - damit können Suchmaschinen meistens um einiges besser umgehen.

Wer dies mit PHP nachbauen möchte, findet unter cubiq.org (via @iWebaholic) eine gute Erklärung - und ein gutes Script.

Wen es bei WordPress stört, dass Umlaute wie ä durch a und nicht ae ersetzen werden, dem empfehle ich das Plugin wp-cleanumlauts2.

Codeschnipsel: Mobile Browser in unterschiedlichen Sprachen (u.a. PHP und jQuery) erkennen

Chris — Tue, 31 Jan 2012 09:32:05 +0000

Quelle: Johan Larsson,
flickr.com

Via Twitter erhielt ich von @losslessMike einen Link zu detectmobilebrowsers.com, den ich mit euch teilen möchte.

Die Seite selbst sagt erst einmal nur aus, ob der besuchende Browser ein mobiler ist oder nicht.

Ist er es nicht, erhält man jedoch zusätzlich diverse Buttons für Downloads, die das Skript zur Erkennung der Browser in unterschiedlichen Sprachen realisiert enthalten.

Wem also unser Artikel "PHP: Handy oder PC?" noch nicht genug war oder eine Möglichkeit für eine andere Sprache als PHP sucht, findet dort eine Variante in diversen Sprachen, wie man mobile Geräte auch erkennen kann.

WordPress: Android-App stürzt mit XmlPullParserException ab

Chris — Sat, 28 Jan 2012 12:04:11 +0000

Wer versucht, an seinem Smartphone die offizielle WordPress-App für z.B. Android zu nutzen, kann u.U. auf unterschiedliche Hindernisse treffen.

Beispielsweise muss im WordPress-Dashboard unter "Einstellungen" -> "Schreiben" bei "Fernveröffentlichen" die Option "XML-RPC" aktiviert sein. Diese muss zusätzlich vom Hoster auch unterstützt werden.

Wer jedoch alles richtig eingestellt hat und trotzdem einen Fehler erhält, der kann häufig lange suchen.

So ging es jedenfalls mir, also die App beim Login-Versuch mit folgender Fehlermeldung abstürzte:

org.xmlpull.v1.XmlPullParserException: unexpected type (position: TEXT ts POST requests...@1:22 in java.io.InputStreamReader@460fb800)

Bei der Suche nach Hilfe zu dieser "XmlPullParserException" bin ich auf das Forum von "WordPress for Android" gestoßen: android.forums.wordpress.org. Doch leider gibt es auch dort keine Lösung.

Blog-URL (mit http://www.) und Login-Daten waren korrekt angegeben. Was war also los?

Grund vermutlich: Aufgrund irgendeines Plugins und/oder JavaScripts konnte die App meine Seite nicht richtig laden.

Lösung: Als Blog-URL die der mobilen Seite, also http://m.servaholics.de, angegeben. Hat geklappt, denn diese verwendet ein simpleres Template ohne viel JavaScript.

HTML5: Vorgaben für Eingaben in Formularfelder festlegen

Chris — Fri, 20 Jan 2012 08:38:17 +0000

Wieder einmal ein kleiner Artikel über HTML5.

Für Formularfelder (inputs) können damit pattern-Attribute mit regulären Ausdrücken (RegEx) angegeben werden. Diese entsprechen Vorgaben, welche Eingaben im Feld erlaubt sind.

Beispiel:

Vierstellige Zahl:

Hier dürfen nur vierstellige Zahlen mit den Ziffern von 0 bis 9 eingegeben werden. Ist die Eingabe falsch, so wird das Formular (in dem sich das input befindet) nicht abgeschickt und der Browser zeigt am input automatisch ein Tooltip, eine Fehlermeldung.

Weitere Beispiele gibt's unter html5pattern.com.

Zusätzlich gibt es auch ein required-Attribut, mit dem Felder angegeben werden können, die eine Eingabe benötigen. Auch hier wird im Fehlerfall ein Tooltip angezeigt.

Weitere Codeschnipsel rund um pattern und required gibt's auf t3n.de.

Aber Achtung: Serverseitig sollte die Eingabe natürlich trotzdem/weiterhin überprüft werden. Außerdem sollte man beachten, dass der Internet Explorer sowie ältere Versionen des Safari diese Attribute nicht verstehen (Quelle: w3schools.com).

jQuery: Zwischen WordPress-Artikeln mit Pfeiltasten navigieren

Chris — Mon, 16 Jan 2012 08:13:41 +0000

Bisher hatte ich wenig mit jQuery zu tun - ich habe es eigentlich nie großartig gebraucht.

Ein Wunder also, dass ich diesen Artikel schreiben kann: Ich habe ein kleines jQuery-Skript auf Basis eines Skripts von reallysimpleworks.com (via davidhellmann.com) erstellt, mit dem man zwischen Artikeln auf WordPress blättern kann.

Intuitiv lässt sich nun mit den Pfeiltasten links und rechts zum nächst alten bzw. neuen wechseln. Grundlage hierfür sind die zwei link-Tags prev und next, die WordPress standardmäßig einbindet.

Bemerkung: Das Skript funktioniert (absichtlich ) nicht in input- und textarea-Elementen.

Eingebunden werden sollte es natürlich nur für die Ansicht einzelner Artikel (in WordPress normalerweise single.php), und nach dem Einbinden einer jquery.js.

```
(function ($) {
```
```
	jQuery(document).keydown(function(e) {
```

		var element = e.target.nodeName.toLowerCase();

 		if (element != 'input' && element != 'textarea') {

```
			var url = false;
```
```
			if (e.which == 37) {
```

				if ($("link[rel='prev']").length > 0) {

					url = $("link[rel='prev']").attr('href');

```
				}
```
```
			} else if (e.which == 39) {
```

				if ($("link[rel='next']").length > 0) {

					url = $("link[rel='next']").attr('href');

```
				}
```
```
			}
```
```
			if (url) {
```
```
				window.location = url;
```
```
			}
```
```
		}
```
```
	});
```
```
})(jQuery);
```

Nachtrag:

Sollte das jQuery-Skript nicht funktionieren, kann dies unter anderem folgende zwei Gründe haben:

Keine Version eines jQuery-Bibliothek wurde eingefügt.
Die Meta-Tags "prev" und "next" fehlen. Folgender PHP-Code, eingefügt in die functions.php-Datei des Themes, sollte funktionieren (getestet unter WordPress 3.3.1):
add_action('wp_head', 'adjacent_posts_rel_link_wp_head');
?>

WordPress: Eigen-Pingbacks/-Trackbacks ("Self-Pings") verhindern

Chris — Sat, 31 Dec 2011 15:58:44 +0000

Aus aktuellem Anlass - weil eines meiner Plugins, das diese Arbeit eigentlich erledigen sollte, dies nicht richtig tut - gibt's mal wieder einen Codeschnipsel.

Mit diesem lassen sich in WordPress sog. "Self-Pings", Ping- und Trackbacks des Blogs zu sich selbst, verhindern.

Der folgende Code achtet zusätzlich darauf, dass auch die Subdomain "m" gesperrt wird.

Eingefügt werden sollte er in die Datei functions.php im Ordner des Templates (normalerweise: /wp-content/themes/Template-Name/).

Beispiel: Liegt der WordPress-Blog auf der Domain http://(www.)servaholics.de, so werden keine Pings von Seiten auf den Domains http://(www.)servaholics.de und http://m.servaholics.de gespeichert.

Achtung: Für Blogs, die bereits auf einer Subdomain liegen, funktioniert dieser Codeschnipsel nicht - er kann jedoch leicht angepasst werden.

```
function no_self_ping(&$links) {
```
```
	// get WordPress's home option
```
```
	$home = get_option('home');
```
```
 
```
```
	// remove last slash if exists
```
```
	if (substr($home, -1) == "/") {
```
```
		$home = substr($home, 0, -1);
```
```
	}	
```
```
 
```
```
	// make domain without www.
```

	$home = str_replace("http://www.", "http://", $home);

```
 
```
```
	// make domain with www.
```

	$home_www = str_replace("http://", "http://www.", $home);

```
 
```
```
	// make subdomain http://m.
```

	$subdomain = str_replace("http://", "http://m.", $home);

```
 
```
```
	foreach($links as $l => $link) {
```

		if (0 === strpos($link, $home) OR 0 === strpos($link, $home_www) OR 0 === strpos($link, $subdomain)) {

```
			unset($links[$l]);
```
```
		}
```
```
	}
```
```
}
```
```
add_action('pre_ping', 'no_self_ping');
```
```
?>
```

CSS(3): Farbverläufe für (fast) alle Browser generieren

Chris — Tue, 27 Dec 2011 15:43:48 +0000

Ich gebe zu: Der/das Tag "CSS3", den/das dieser Artikel erhalten hat, ist nur bedingt richtig.

Farbverläufe sind zwar auch Teil von CSS3 (siehe w3.org), jedoch bietet der folgende Generator zusätzlich einen CSS-Code an, der für diverse Browser speziell angepasste Teile enthält - diese sind wiederum nicht Teil von CSS3.

Es geht um einen Generator von colorzilla.com. Der von diesem zusammengestellte CSS-Code ist angepasst an:

Firefox 3.6+
ältere Chrome-Versionen
Chrome 10+
Safari 4+
Safari 5.1+
Opera 11.10+
Internet Explorer 6-9
Internet Explorer 10+
veraltete Browser (bei diesen wird lediglich eine einzelne Hintergrundfarbe statt eines Verlaufs angezeigt)

Er enthält zusätzlich auch eine Zeile, die den Standard, den das W3C mit CSS3 vorgibt, umsetzt. Erklärungen zu den einzelnen Anpassungen gibt's bspw. unter webdesignerwall.com.

Pro: Nahezu jeder Browser sieht den gewünschten Farbverlauf.

Contra: Nur die W3C-angepasste Zeile ist Teil des Standards.

CSS3: Minimalistische Bildergalerie mit Zoom-Effekt - ohne JavaScript

Chris — Mon, 19 Dec 2011 12:12:36 +0000

Mal wieder ein kleiner Artikel über etwas, das man mit CSS3 realisieren kann.

t3n.de hat dazu erneut einen tollen Artikel geschrieben: Wie setzt man eine Bildergalerie mit Zoom-Effekt ganz ohne JavaScript um?

Grundlage hierfür ist die CSS3-Eigenschaft "transition", die wir bereits einige Male vorgestellt haben.

Für große Galerien ist die Umsetzung wahrscheinlich nichts, doch zum Basteln und Testen sowie für kleinere Bildersammlungen durchaus interessant.

Viel Spaß.

HTML5: Aufklappboxen - ohne JavaScript

Chris — Thu, 27 Oct 2011 18:46:07 +0000

Mal wieder eine Link-Empfehlung zu einem Tutorial.

Dieses Mal geht es darum, wie man ganz ohne JavaScript, nur mit HTML5, Aufklappboxen realisieren kann: t3n.de.

Erwähnt sei noch (auch wenn es im Artikel selbst ebenfalls steht), dass der vorgeschlagene Quellcode auch in Browsern, die HTML5 nicht verstehen, einigermaßen gut dargestellt wird. Die HTML5-Elemente werden ggf. als Block-Elemente (vergleiche

) interpretiert.

Viel Spaß beim Basteln.

LogMeIn Hamachi für Mac: Menubar Item beenden

Chris — Sat, 01 Oct 2011 16:26:41 +0000

Aus gegebenem Anlass und eigenen Erfahrungen entstand dieser Artikel.

Die Mac-Version des beliebten VPN-Clienten LogMeIn Hamachi² hat ein "Feature", das vielen Nutzern mehr als ein Bug erscheint.

Beim Beenden des Clienten wechselt dieser quasi "minimiert" in die Menubar (oben rechts). Beendet man dieses "Menubar Item", so öffnet sich erneut der Client.

Eine Anleitung zum Beenden fand ich dann auf hints.macworld.com:

launchctl unload -w /Library/LaunchAgents/com.logmein.hamachimb.plist

Mit diesem Terminal-Befehl lässt sich das Menubar-Programm beenden.

webRookie.de - Deine Hilfeseite zum Thema eigene Homepage und Webspace

Chris — Thu, 22 Sep 2011 07:40:01 +0000

"Na, klappt was nicht?"

Jeder Webmaster fängt einmal klein an. Ein bisschen Erfahrung in einem Baukasten für Homepages gesammelt hat er vielleicht schon.

Aber für mehr als ein paar simple HTML-Tags hat es noch nicht gereicht.

Doch irgendwann ist das nicht mehr genug - dann ruft die eigene Homepage, auf eigenem Webspace - eben alles unter Eigenregie.

Um den Einstieg so einfach und problemlos wie möglich zu gestalten, wurde "webRookie" von zwei befreundeten Webmastern gegründet.

Was braucht man eigentlich, um eine eigene Homepage zu erstellen? Wo bekomme ich Webspace, also Speicherplatz im Internet, her?

Wie geht das mit dem Bearbeiten und Hochladen? Wo finde ich tolles Design? Und wie passe ich diese an?

All das wird erklärt, in einfachen und verständlichen Worten, und trotzdem stets möglichst fachlich korrekt und fortschrittlich.

Bestes Beispiel: Neben Erläuterungen, wie ein HTML-Grundgerüst in HTML 4.01 und XHTML aussieht, wird dieses auch für das experimentelle HTML5 erklärt.

Bleibt trotzdem noch eine Frage offen, so gibt's immer noch das Forum für eventuelle Rückfragen.

Heute - vor wenigen Sekunden! - ging's los, kreative Vorschläge sind gerne gesehen.

Mehr Informationen gibt's im Blog unter blog.webrookie.de.

Google: API für Google+ verfügbar

Chris — Fri, 16 Sep 2011 12:13:58 +0000

Bis vor kurzem hieß es noch, eine API für Google Plus sei vermutlich erst 2012 zu erwarten.

Nun ist sie verfügbar. Bis jetzt können jedoch nur öffentliche Daten ausgelesen und keine Informationen an Google gesendet werden.

Doch Google verspricht: Das ist erst der Anfang.

Alle Informationen sowie Libraries für unterschiedliche Programmiersprachen gibt's unter developers.google.com/+.

Quelle: t3n.de

Nachtrag vom 30. September: Ein Tutorial zum "Schnelleinstieg" in die Google+ API gibt's unter t3n.de.

Nachtrag vom 7. Oktober:

Google hat die API-Möglichkeiten noch einmal erweitert. Per Skript kann noch auch Google+ durchsucht werden - sowohl Beiträge als auch Kommentare.

Mehr dazu unter googleplusplatform.blogspot.com.

Quelle: heise.de

Google: Statistiken mit Chart API erstellen

Chris — Sun, 11 Sep 2011 13:51:54 +0000

Google bietet bekanntlich einige Tools an, mit denen über unterschiedliche APIs tolle Dinge erzeugt werden können. Ein Beispiel sind z.B. Wetter-Daten, die von Google bereitgestellt werden.

Doch auch Statistiken und Diagramme sind vertreten: Mit den Google Chart Tools können sie ganz einfach erzeugt werden.

Eine kleine Anleitung gibt's unter t3n.de. Viel Spaß.

CSS3: Ein weiteres Button-Pack

Chris — Wed, 07 Sep 2011 15:58:40 +0000

Und einmal mehr gibt's einen Link zu einem Tutorial, in dem erklärt wird, wie man CSS3-Buttons ganz ohne Grafiken erstellen kann.

Besonders dieses Mal: Kleine Icons auf den Buttons, erstellt mit "HTML-Entities" in Hexadezimal-Form - ebenfalls nur mit HTML+CSS!

Ein Pfeil nach rechts (➜) z.B., der laut Tabelle über ➜ darstellbar ist, wird mit \279C bei der CSS-Eigenschaft "content" angegeben - siehe Demo/Quellcode.

Tutorial samt Demo und Quellcode gibt's unter red-team-design.com.

Apple: QuickTime lässt sich nicht de- bzw. reinstallieren

Chris — Fri, 02 Sep 2011 08:51:25 +0000

Quelle: lloydsscreenies,
flickr.com

Wieder einmal eine Geschichte aus dem Leben eines Servaholic:

Ein Freund wollte auf seinem Windows-Rechner über die "Apple Software Aktualisierung" iTunes - und damit eben auch QuickTime - aktualisieren.

Leider stürzten beide Installationstypen - sowohl iTunes+QuickTime als auch QuickTime alleine - nach einer gewissen Zeit ab.

"QuickTime.msi" werde nicht gefunden, so der Fehler, und so könne die alte Version (in diesem Fall 7.6.80.9) nicht deinstalliert werden.

Nach langer Zeit und vielen unterschiedlichen Vorschläge aus dem Internet, die das Problem nicht gelöst haben, hat dann folgendes Programm von Microsoft geholfen: Windows Installer Clean Up.

QuickTime in der Liste ausgewählt, Programm samt Installer-Spuren entfernt und schon lief die Installation der neuen Version 7.7.

SEO: Eine kleine Linksammlung mit Grundsätzen

Chris — Mon, 29 Aug 2011 14:52:44 +0000

Ein schöner Artikel von t3n.de befasst sich mit sieben Regeln, die besonders Anfänger beim Optimieren ihrer Seite für Suchmaschinen (SEO) beachten sollten.

Auch webmasterpro.de hat einen Beitrag zum Thema SEO verfasst, dieser behandelt jedoch typische Fehler, die schaden statt helfen.

Für WordPress-Nutzer wie uns gibt's ebenfalls spezielle Tipps - bspw. unter wordpress-buch.de.

Von Google selbst gibt es natürlich auch Hilfe bei der Optimierung, z.B. über YouTube: http://youtu.be/xh2pndFKtsg (via t3n.de).

Noch mehr Tipps und Tricks so wie Anleitungen zur Suchmaschinen-Optimierung bald hier auf Servaholics in einem eigenen Artikel.

Ubuntu: Conky-Tutorial

roeluu — Wed, 24 Aug 2011 17:48:55 +0000

Conky ist ein sehr vielseitiger Systemmonitor für Linux. Heute möchte ich euch gerne zeigen, wie ihr diese Anwendung installiert. Damit Conky auch funktioniert, müsst ihr euch auf einem Linux-Rechner befinden.

Als erstes öffnet ihr euer Terminal und gebt folgendes ein:

```
sudo apt-get install conky-all
```

Mit diesem Befehl installiert ihr Conky. Dies dauert einen Augenblick. Währenddessen könnt ihr eine Vorschau ansehen, wie Conky am Schluss aussehen wird.

Nachdem die Installation abgeschlossen ist, geht ihr auf euren Persönlichen Ordner und öffnet den "versteckten" Bereich, indem ihr die Tastenkombination Strg + H drückt.

Im Normalfall sollte man jetzt den Zugriff auf weitere Ordner und Dateien haben.

Erstellt nun ein Textdokument mit dem Namen .conkyrc in eurem geöffneten Persönlichen Ordner.

Kopiert den Code aus folgendem Links heraus und fügt ihn im Textdokument ein: http://media.cdn.ubuntu-de.org/wiki/attachments/00/28/beispiel2rc.txt.

Speichert die Datei ab und öffnet erneut das Terminal. Im Terminal gebt ihr einfach folgenden Befehl ein:

```
conky
```

Jetzt sollte sich Conky auf dem Desktop zeigen. Achtung: Ihr müsst Conky nach jedem Neustart mit dem Terminal öffnen!

Es sieht jetzt ein bisschen kompliziert aus, aber wenn man ein bisschen Erfahrung mit PHP und HTML hat, kann man hier eigentlich schon nachvollziehen, welcher Code welches Element "generiert".

Wir werden hier absichtlich keinen eigenen Code schreiben, da es ziemlich aufwendig ist, solch eine Erklärung zu schreiben.

Falls ich dein Interesse geweckt habe, kannst du gerne den Wiki-Eintrag auf http://wiki.ubuntuusers.de/conky anschauen. Dort ist alles noch einmal erklärt.

Melde dich bei Fragen in den Kommentaren oder schreib mir eine Nachricht auf Twitter: @roeluu.

CSS: Dreiecke ohne Grafiken

Chris — Sat, 20 Aug 2011 12:37:19 +0000

Dreiecke für z.B. Navigationspunkte erstellen? Ohne Grafiken? Ja, das geht: Mit CSS.

Auch wenn CSS3 an der Realisierung dieses Mal nicht beteiligt ist, werden einige CSS-Eigenschaften verwendet, die nicht in jedem Browser funktionieren. Eben wie bei CSS3.

Beispiele und den Quellcode gibt's unter t3n.de.

Apple: "Lion DiscMaker" für bootfähige OS-Sicherung

Chris — Sat, 06 Aug 2011 09:22:22 +0000

Quelle: Ethan Bloch,
flickr.com

Wie mehrfach berichtet wird es Apples aktuelles Betriebssystem Lion (vorerst) nicht als DVD oder USB-Stick geben. Käufer, die es im App Store heruntergeladen haben, können sich jedoch mit einigen Tricks selbst eine Sicherung erstellen.

Ein gutes Beispiel-Programm ist Lion DiscMaker. Wer Lion jedoch bereits installiert und die Installer-Anwendung nicht vorher gesichert hat, muss sie erneut herunterladen (mehr dazu unter stadt-bremerhaven.de).

Quelle: stadt-bremerhaven.de

QR-Codes: Erstellen mit JavaScript und HTML5

Chris — Mon, 18 Jul 2011 16:42:35 +0000

Auch wenn viele sagen, "Was soll ich mit diesen komischen Codes denn anstellen?", so halte ich sie doch für nützlich. Gerade für Smartphone-Nutzer, denen man Informationen wie URLs, vCards oder ganze Texte im realen Leben bieten will - und die Zahl der mobilen Surfer nimmt rasend zu.

Beispielsweise können Veranstalter von großen Festen auf Plakaten die URL zur entsprechenden Website als QR-Code drucken - per Scan wird diese dann automatisch geöffnet, ohne Abtippen, und Interessierte können sich noch weiter informieren.

Oder man denke an Daten für Verbraucher, beim Einkaufen: Woher kommt mein Fleisch?. Spenden per Scan ist dank Flattr auch möglich - bei großen Events mit vielen, kleinen Künstlern eigentlich eine coole Idee. In Zukunft kann auch das Bezahlen per Smartphone dank dieser (oder ähnlicher) Codes möglich sein: Bezahlen bei Starbucks gibt's jetzt schon.

Aber zurück zum eigentlichen Thema dieses Artikels: Wie kann man ganz ohne Grafik-API QR-Codes schnell und flexibel generieren? Eine gute Methode gibt's auf github.com - eine Version, die nur auf JavaScript und HTML5 basiert.

CSS3: Animationen mit "transition"

Chris — Sun, 17 Jul 2011 17:24:15 +0000

Heute einmal wieder ein Artikel über CSS3: Die Eigenschaft transition haben wir an einer anderen Stellen schon einmal verwendet. Ein paar weitere "Animationen", die man damit erstellen kann, hat olivergast.de mit guten Beispielen zusammengestellt.

Farben ändern, Schatten einfügen, Ein- und Ausblenden, Formen ändern - unterschiedliche Effekte lassen sich auch ganz ohne JavaScript, nur mit CSS3 zaubern.

Viel Spaß beim Basteln.