Servaholics» Codeschnipsel

Google: "Save to Drive"-Button für Websites

Chris — Sat, 11 May 2013 13:35:25 +0000

Google hat für Webmaster einen neuen Button vorgestellt, mit dem Dateien für Besucher so angeboten werden können, dass diese unmittelbar in Google Drive gespeichert werden können.

Der Button besteht, ähnlich wie auch z.B. Googles +1-Button, aus einer JavaScript-Datei, die von einem Google-Server direkt eingebunden werden muss, und einem einzigen div-Container. Mit dessen Attributen können dann Einstellungen vorgenommen werden, z.B. muss hier die zu speichernde Datei angegeben werden.

Die Dokumentation zum Button sowie ein paar Codebeispiele findet man unter developers.google.com/drive/savetodrive.

Screenshots, wie der Button in Aktion aussieht, gibt's unter googledevelopers.blogspot.de.

via mobiflip.de

Codeschnipsel: Eigenes Kontextmenü mit jQuery

Chris — Thu, 09 May 2013 17:46:45 +0000

Heute möchte ich mit euch einen Codeschnipsel teilen, der bereits seit 2008 auf meiner Festplatte herumlag - vermutlich, weil ich ihn immer für eine nette Spielerei hielt, mehr aber auch nicht. Ein wenig überarbeitet und mit jQuery ausgerüstet wird er nun doch endlich veröffentlicht - vielleicht hat ja jemand einen praktischen Nutzen dafür.

Mit dem folgenden Schnipsel könnt ihr für eure Website eine eigenes Kontextmenü (Rechtsklick-Menü) bauen.

Zuerst zum jQuery-Teil:

```
<script type="text/javascript">
```
```
$(document).ready(function() {
```
```
	var x, y;
```
```
 
```
```
	document.oncontextmenu = function(e) {
```
```
		e.preventDefault();
```
```
		x = e.clientX;
```
```
		y = e.clientY;
```
```
		$("#rkm").css("left", x + "px");
```
```
		$("#rkm").css("top", y + "px");
```
```
		$("#rkm").show();
```
```
	};
```
```
 
```
```
	$(document).mousedown(function(e) {
```

		if (!(e.clientX >= x && e.clientX <= (x + $("#rkm").width()) && e.clientY >= y && e.clientY <= (y + $("#rkm").height()))) {

```
			$('#rkm').hide();
```
```
		}
```
```
	});
```
```
	$(window).scroll(function () {
```
```
		$('#rkm').hide();
```
```
	});
```
```
});
```
```
script>
```

Anfangs wird eine von Google bereitgestellte Version von jQuery eingebunden - kann man natürlich weglassen, falls man bereits selbst eine Version in seine Website eingefügt hat.

Der Code per se ist nicht sonderlich spannend:

Zum einen wird überprüft, ob ein Rechtsklick ausgeführt wurde (oncontextmenu), falls ja wird das Browser-Menü blockiert und das eigene Menü richtig platziert und angezeigt.

Zum anderen wird das Menü wieder ausgeblendet, falls man irgendwo außerhalb der Menü-Box geklickt hat oder scrollt.

Das eigentliche Menü sieht wie folgt aus:

';

```
}
```
```
function login_head_url() {
```
```
	return get_bloginfo('url');
```
```
}
```
```
function login_head_title() {
```
```
	return get_option('blogname');
```
```
}
```

add_action('login_head', 'login_head_logo');

add_filter('login_headerurl', 'login_head_url');

add_filter('login_headertitle', 'login_head_title');

```
?>
```

Tipp: Mehrfache Einträge unter "Öffnen mit" in Mac OS X 10.8 Mountain Lion entfernen

Chris — Sat, 10 Nov 2012 16:49:18 +0000

Ja, auch Apple ist nicht immer perfekt.

Bereits seit Mac OS X 10.7 frage ich mich, warum mein Mac teils mehrfach die Woche unbedingt den kompletten Index von Spotlight (systemweite Suche) erneuern muss.

Aber man gewöhnt sich ja bekanntlich an alles.

Seit dem Umzug auf Mac OS X 10.8 "Mountain Lion" scheinen wohl sehr viele Nutzer ein anderes Problem zu haben:

Im Menü "Öffnen mit" beim Rechtsklick auf eine Datei werden einzelne Programme doppelt bzw. mehrfach aufgelistet.

Gerade wenn man sehr viele Programme "installiert" hat, kann das schnell auch ein Platzproblem darstellen.

Ich hatte das "Problem" ebenfalls, und mittlerweile scheint es behoben. Caschy empfiehlt aktuell die Software "Onyx", andere nehmen direkt das Terminal ("Programme" -> "Dienstprogramme").

Viele, vorgeschlagene Befehle haben bei mir nicht geholfen, der folgende jedoch schon:

/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain system -domain user

Vielleicht hilft es ja dem ein oder anderen.

Codeschnipsel: Google +1-Button erst nach Klick laden

Chris — Sat, 05 May 2012 17:17:09 +0000

Viele werden es sicherlich von heise.de und co. kennen, die regelmäßigen Leser dieses Blogs auch von hier:

Buttons auf JavaScript-Basis, wie eben bspw. der +1-Button von Google, sollten nicht ohne Zustimmung des Nutzers geladen werden, da nicht klar ist, welche Daten von diesen erhoben werden. Heise setzt deshalb bspw. auf eine sog. "2-Klick-Lösung" - erst nach einem Klick wird der eigentliche Button angezeigt.

Mehr dazu gibt's unter "Social Buttons: Datenschutzfreundliche 2-Klick-Lösung von Heise.de".

Wer nicht auf die Lösung von Heise setzen möchte, der findet im folgenden einen kleinen Schnipsel, mit dem der +1-Button ganz einfach per Klick vom Nutzer nachgeladen werden kann.

Der Schnipsel ist für WordPress-Blogs geschrieben, kann jedoch sehr leicht angepasst werden.

```
<script type="text/javascript">
```
```
</script>
```
```
 
```
```
<div id="plusone-div-">
```

	<img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="Google Plus" height="16" width="16" title="Plus One" />

	<a href="#" onclick="renderPlusone('', '() ?>');return false;" id="plusone-a-(); ?>" title="+1!">Google +1</a>

```
</div>
```

In Zeile 12 kann sowohl die Größe des Buttons als auch das Anzeigen des Zählers eingestellt werden. Für "size" sind folgende Werte möglich: small, medium, standard, tall. Für "annotation": none, bubble, inline.

Der Standardtext "Google +1" kann in Zeile 19 geändert werden. Allgemein kann das "Aussehen" in den Zeilen 18/19 angepasst werden - wichtig sind hierbei nur das onclick- sowie id-Attribut des a-Tags (Link).

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/buttons 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.

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.

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');
?>

Codeschnipsel: 29 nützliche WordPress-Anpassungen

Chris — Wed, 04 Jan 2012 12:49:31 +0000

Dem einen oder anderen ist es vielleicht schon aufgefallen: Wir haben ein paar Kleinigkeiten am Blog geändert.

Unter anderem wurde die "Datumsbox" bei Artikeln entfernt und durch die Anzeige "vor X Minuten/Stunden/..." ersetzt.

Grundlage hierfür war ein Codeschnipsel, den ich via @webrookieDE auf hongkiat.com gefunden habe - dort gibt's auch noch 28 weitere Codeschnipsel für WordPress.

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ß.

PHP: Auf Google+ geteilte Links in WordPress anzeigen

Chris — Mon, 31 Oct 2011 12:49:27 +0000

Auch wenn Google Plus von vielen (noch) nicht als weltweites soziales Netzwerk anerkannt wird, so nutzen doch bereits einige den Dienst, um interessante, skurrile und spannende Links weiterzuempfehlen.

Ähnlich wie für Twitter (siehe Twitter: Tweets eines Benutzers auslesen) gibt es nun auch ein Skript, das auf Google+ empfohlene Links auflisten kann: http://infoblog.li/auf-google-geteilte-links-als-wordpress-widget/ (entfernt).

Das PHP-Skript ist zwar für WordPress gedacht, kann jedoch auch für andere Systeme o.ä. angepasst werden.

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.

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.

Codeschnipsel: Sammlung aus fünf Jahren

Chris — Tue, 20 Sep 2011 12:49:29 +0000

Eine Sammlung von Codeschnipseln aus fünf Jahren.

Ein Mix aus .htaccess, PHP, WordPress, JavaScript/jQuery, HTML und CSS.

Das alles gibt's unter perishablepress.com/code-snippets. Sind ein paar tolle Schnipsel dabei, empfehlenswert.

Quelle: t3n.de

Formular: Passwort anzeigen mit jQuery

Jakob — Sat, 17 Sep 2011 11:26:58 +0000

Eine Eigenschaft, die ich zwar noch nicht im Praxiseinsatz gesehen habe (jedenfalls nicht bewusst), die ich aber vor einiger Zeit in so einer "50 hübsche Ideen für ein Login"-Serie gesehen und sofort gemocht habe: die Option, beim Registrieren das Passwort auf Befehl anzuzeigen bzw. zu verstecken. Macht durchaus Sinn, finde ich. Und wollte es dann auch gleich nachbauen... mit Javascript/jQuery sollte das doch eigentlich relativ einfach gehen!

Dabei stieß ich allerdings auf ein Problem, welches zwar berechtigt ist, jedoch ersteinmal das ganze als unlösbar darstellt (auf den ersten Blick jedenfalls): man kann das HTML-Attribut type eines Input-Feldes mittels Javascript nicht ändern! Also muss man sich eines kleinen Tricks behelfen, der zwar ein paar Zeilen mehr Code beansprucht, aber trotzdem eigentlich relativ simpel ist: einfach ein zweites Input-Feld vom Typ text, welches auf Klick anstelle des normalen Passwort-Feldes angezeigt wird und dessen Wert auch übernimmt. Mit einem weiteren Klick wird die ganze Aktion umgekehrt gestartet. Als Code sieht das dann so aus:

HTML:

```
 Passwort anzeigen
```

Wichtig! Da es ja noch immer Leute geben soll die mit dem Internet Explorer surfen, darf zwischen den Passwort-Feldern (also dem richtigen und dem "falschen") kein Leerzeichen sein, da der IE dieses sonst ausgibt und die "Fälschung" leicht verschoben dargestellt wird

jQuery:

$(document).ready(function(){
 
     $('#show_password').change(function(){
          if($(this).is(":checked")){
               $('#password_fake').val($('#password').val());
               $('#password').hide();
               $('#password_fake').show();
          } else {
               $('#password').val($('#password_fake').val());
               $('#password_fake').hide();
               $('#password').show();
          }
     });
 
});

Jetzt gibt es nur noch ein Problem: in der Verarbeitung bzw. dem eigentlichen Login-Prozess. Denn hier muss natürlich das richtige Passwort benutzt werden - was, wenn man als letztes die Option auf "Passwort zeigen" hatte, jedoch das andere, das "richtige" Passwort benutzt wird? Ich habe das ganze mittels PHP gelöst: wenn die Checkbox aktiviert ist, soll der Passwort-Fake als $password gesetzt werden - wenn nicht, dann eben das normale, richtige Passwort-Feld.

PHP:

if(isset($_POST['show_password']) && $_POST['show_password'] == "Passwort zeigen") $password = $_POST['password'];

else $password = $_POST['password_fake'];

```
 
```
```
// Weitere Code folgt hier...
```
```
 
```
```
?>
```

Viel Spaß mit dem Anzeigen des Passwortes!

HTML5: Diese Tags werden abgeschafft

Chris — Fri, 16 Sep 2011 09:12:47 +0000

HTML5 kommt, einige Tags gehen: Mit der neuen Version von HTML sind auch neue Regeln für die Struktur von Website-Quellcodes festgelegt worden.

Dazu gehören einige neue Tags, die verwendet werden können, aber auch Tags, die nun als "veraltet" gelten.

Website-Besitzer sollten in Zukunft z.B. die Tags

und nicht mehr verwenden. CSS bietet jeweils einen passenden Ersatz.

Die ganze Liste gibt's unter http://www.w3schools.com/tags/default.asp. Alternativ-Lösungen für veraltete Tags findet man bspw. unter blog.mixable.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.

PHP: Altersabfrage

Chris — Tue, 06 Sep 2011 11:29:23 +0000

Da ich nach einem Skript der folgenden Art gefragt wurde, gibt's hier einen PHP-Schnipsel, um das Alter eines Nutzers abzufragen und entsprechend Text anzuzeigen:

$min_alter = '18'; // Wie alt muss ein Nutzer mindestens sein?

```
 
```
```
// Falls das Formular abgeschickt wurde
```
```
if (isset($_POST['submit'])) {
```
```
	// Eingegebene Daten auf Logik prüfen
```

	$timestamp = strtotime($_POST['YYYY']."-".$_POST['mm']."-".$_POST['dd']);

	if ($timestamp !== false AND $timestamp != 0) { // Falls die Daten ein logisches Datum bilden

```
 
```
```
		// Alter berechnen
```

		$alter = date("Y", time()) - $_POST['YYYY'] - 1;

		if (date("m", time()) > $_POST['mm']) {

```
			$alter++;
```
```
		}
```

		if (date("m", time()) == $_POST['mm']) {

			if (date("d", time()) >= $_POST['dd']) {

```
				$alter++;
```
```
			}
```
```
		}
```
```
 
```
```
		// Falls alt genug
```
```
		if ($alter >= $min_alter) {
```

			echo 'Du bist '.$min_alter.' oder äter!';

```
		} else { // Falls nicht
```

			echo 'Du solltest eigentlich mindestens '.$min_alter.' Jahr';

```
			if ($min_alter != 1) { echo 'e'; }
```
```
			echo ' alt sein.';
```
```
		}
```
```
	}
```

} else { // Falls noch kein Geburtstag angegeben

```
	?>
```
```
		An welchem Tag wurdest du geboren? 
```

```
	
```
```
 
```
```
	
```
```
}
```
```
?>
```

Google: +1-Button mit neuen Features

Chris — Thu, 01 Sep 2011 11:35:44 +0000

Googles "+1-Button" hat ein paar kleinere Update erhalten.

Unter anderem kann nun ähnlich wie bei Facebooks Like-Button eine sog. "Inline Annotation" eingebaut werden, mit der Nutzer sehen, wenn Freunde den aktuellen Link bereits geteilt haben (siehe Quelle für Screenshot ).

Die Änderung sind bisher nur beim englischen Generator zu sehen: http://www.google.com/intl/en/webmasters/+1/button/.

Quelle: googlewatchblog.de