Das Wichtigste vorweg: es lag daran, dass PHP als CGI lief.

PHP als Apache 2.0 Handler

Erst einmal das Script, wie es läuft, wenn es als Apache 2.0 Handler gehostet wird, zu erkennen in der phpinfo(); an dieser Variable:

Server API Apache 2.0 Handler

Da reicht es wenn man in die Auentifizierungsseite das eingibt:

<?php

//Benutzername und Passwort für die Authentifizierung
$benutzername = 'name';
$passwort = 'passwort';

if (
(!isset($_SERVER['PHP_AUTH_USER'])) ||
(!isset($_SERVER['PHP_AUTH_PW']))   ||
($_SERVER['PHP_AUTH_USER'] != $benutzername) ||
($_SERVER['PHP_AUTH_PW'] != $passwort)
){

// Zugangsdaten falsch, Authenfizizierungs-Header senden
header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="die seite"');

exit('Tut uns leid, aber auf diese Seite koennen ' .
'Sie nur mit den richtigen Zugangsdaten zugreifen.');
}

?>

Und so läuft es mit PHP als CGI

Zu erkennen an:

Server API CGI/FastCGI 

Zuerst einmal muss in die .htaccess – Datei rein:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
</IfModule>

und dann in das Autorisierungsscript:

<?php

//Benutzername und Passwort fuer die Autentifizierung
$benutzername = 'name';
$passwort = 'passwort';

list($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']) = explode(':' , base64_decode(substr($_SERVER['HTTP_AUTHORIZATION'], 6)));

if (
(!isset($_SERVER['PHP_AUTH_USER'])) ||
(!isset($_SERVER['PHP_AUTH_PW']))   ||
($_SERVER['PHP_AUTH_USER'] != $benutzername) ||
($_SERVER['PHP_AUTH_PW'] != $passwort)
){

// Zugangsdaten falsch, Authenfizizierungs-Header senden
header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="die seite"');

exit('Tut uns leid, aber auf diese Seite koennen ' .
'Sie nur mit den richtigen Zugangsdaten zugreifen.');
}

?>

Dafür habe ich, wie “früher”, am Anfang einen Anker im Quellcode gesetzt:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Der Rest ist das eigentliche jQuery-Script …

<script type="text/javascript">

$(document).ready(function() {
    $('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
    });
});

</script>

Durch das <a name=”top”> funktioniert es mit und ohne JavaScript-Unterstützung.

Und alle Links zu anderen Websiten funktionieren auch noch.

via electrictoolbox

mit jQuery hoch- und runterscrollen

Eine andere Möglichkeit, die alle #-Links zum scrollen bringt, aber Links, wie seite.htm#anfang trotzdem im neuen Browserfenster öffnet sieht so aus:

$(document).ready(function() {

    $('a[href^=#]').bind("click", function(event) {
	    event.preventDefault();
	    var ziel = $(this).attr("href");
	    if ($.browser.opera) {
	        var target = 'html';
	    }else{
		var target = 'html,body';
	    }
	    $(target).animate({
		scrollTop: $(ziel).offset().top
	    }, 2000 , function (){location.hash = ziel;});
    });
    return false;

});

Im HTML ist ganz genau gleich wie oben:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Das $('a[href*=#]'), wie bei drweb gefunden, habe ich zu $('a[href^=#]') geändert.

Das deshalb, weil $('a[href*=#]') alle Links aussucht, die eine Raute (#) darin haben. Das ist deshalb ungünstig, weil man, wenn man auf andere Seiten verweist mit einer Raute darin (seite.htm#anfang), der Link einfach nicht mehr funktioniert.

Das konnte ich mit $('a[href^=#]') verhindern. Jetzt sucht er nicht mehr alle Links, die eine Raute haben, sondern nur die, die mit der Raute anfangen.

Bei Google findet man die Anleitung, welche Rich snippets (Mikrodaten, Mikroformate und RDFa) bei Google eingesetzt werden können.

Es gibt folgende Themengebiete, wo die Rich Snippts Sinn machen (gleich mit den entsprechenden Befehlen dabei):

• Beurteilungen
• Personen
• Produkte
• Unternehmen und Organisationen
• Rezepte
• Ereignisse
• Musik

Ich habe mich für mjammi.de erst mal für Microformate entschieden.

Und mit einem von Google bereitgestelltem Tool kann man dann schon mal testen, wie das aussieht.

Für yahoo, bing (Microsoft) und google gibt es auch ein Datenformat, das für alle gilt und auf Microdaten basiert. Nachzulesen und zu -bauen auf schema.org.

Als erstes ist mir eine coole Webseite ins Auge gesprungen, die mit allen möglichen Routinen testet, ob und wenn ja, wie mobil die Webanwendungen sind.

Er testet gratis PDFs schnell auf ihre Behindertenfreundlichkeit, in dem er folgende Punkte überprüft:

1. Dokument als getaggt markiert
2. Dokumenttitel vorhanden
3. Dokumentsprache definiert
4. Zulässige Sicherheitseinstellung
5. Tab folgt Dokumentstruktur
6. Dokument konsistent gegliedert
7. Lesezeichen vorhanden
8. Zugängliche Zeichencodierungen
9. Inhalt vollständig getaggt
10. Logische Lesereihenfolge
11. Alternativtexte vorhanden
12. Korrekte Syntax von Tags/Rollen
13. Ausreichend Kontrast bei Text
14. Leerzeichen vorhanden

Super!

Übrigens kann ich www.access-for-all.ch nur empfehlen!
Es ist eine Stiftung zur behindertengerechten Technologienutzung und dort setzen sich Behinderte und Nicht-Behinderte zusammen und überlegen, was das Netz noch barrierefreier machen soll.

So haben sie zum Beispiel die Schweizer Accessibility-Studie 2011 rausgebracht, die aufzeigt, wie barrierefrei Webseiten in der Schweiz sind:

“Die Stiftung “Zugang für alle” hat 100 Websites von Bund, Kantonen, den zehn grössten Städten, bundesnahen Betrieben, Medien, Stellenbörsen, Hochschulen, öffentlichen Verkehrsbetrieben, Internet-TV-Angeboten und Online-Shops auf ihre Barrierefreiheit für Menschen mit Behinderungen.”

Sie liegt als Download ebenso auf www.access-for-all.ch wie die neue Version des PAC.

Cmd + Shift + 3

ganzer Bildschirm wird als Screenshot auf dem Desktop gespeichert

Cmd + Ctrl + Shift + 3

ganzer Bildschirm wird in der Zwischenablage gespeichert

Cmd + Shift + 4

Es erscheint ein Auswahlkreuz und speichert den ausgewählten Bereich als Screenshot auf dem Desktop.

Cmd + Ctrl + Shift + 4

speichert den ausgewählten Bereich in der Zwischenablage.

Cmd + Shift + 4, dann Leertaste

speichert ein ausgewähltes Fenster oder Element als Screenshot auf dem Desktop.

Cmd + Ctrl + Shift + 4, dann Leertaste

speichert das ausgewählte Fenster oder Element in der Zwischenablage.

Ich habe mich auf den Weg gemacht, jQuery-Inspirationen zu sammeln.
Und gefunden hab ich wunderschöne Plugins, die gut geeignet sind für eigene Projekte:

FancyZoom

Download und Demo

Bildergalerien

Text anzeigen und verstecken

Menüs

Tooltips

Inhalts-Slider

Formularüberprüfer

Der jFormer ist ein Projekt von zwei Studenten. Er hilft, Formulare mit jQuery zu überprüfen.

Noch mehr Formularüberprüfungs-Plugins

hat Webdesignshock zusammengetragen.

Weitere Infos

jQueryui.com bietet eine Menge fix und fertiger Plugins an, mit denen man Webseiten sehr benutzerfreundlich und gutaussehend gestalten kann.
Unter jQueryui.com/demos sind die jQuery-Plugins auch mit Quellcode und Benutzungshinweisen dargestellt.

jQuerymobile.com ist ein Tool, das alle Mobilen Webinterfaces gleichzeitig bedient.
Unter jQuerymobile.com/demos kann man die jQuery-Syntax gleich im Mobile Phone anschauen.

Als ich ein Template für Wordpress fertig hatte, waren auf einmal Abstände zwischen

<?php get_header(); ?>
<?php get_sidebar(); ?> und
<?php get_footer(); ?>

Wo kamen die denn her?

Die Antwort war mal wieder UTF-8!

Hat man einen UTF-8-Code mit Unicode-Signatur (BOM) einschließen abgespeichert, wird dem ganzen ein unsichtbarer Tag vorangestellt, der dann das Leerzeichen erzeugt.

Das heißt, ich musste alles nochmal ohne Unicode-Signatur (BOM) einschließen speichern, das hochladen und siehe da, es war wieder alles an seinem Platz!

Mjammi.de – das ist unser Kochblog. Alle Gerichte haben wir gekocht und nur die, die super schmecken, finden ihren Weg ins Blog.

Dabei ist der Blog vollkommen multilingual konfiguriert.
Ganz wichtig war mir auch eine optimale Suchmaschinentauglichkeit. Die Website wurde standardkonform (mit validem XHMTL 1.0 + tabellenfreiem CSS-Layout) und weitgehend barrierefrei programmiert.

Als Content Management System wurde  Wordpress eingesetzt und angepasst.

Mjammi.de besuchen

Meine Aufgaben

• Layout: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Umsetzung: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• Kochen, fotografieren und schreiben der Beiträge
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)
• multilingual: Erstellung eines Templates, das mit Wordpress die Verwendung mehrerer Sprachen zulässt.

Anstatt der “westlichen (ISO-8859-1)” wird heute immer mehr UTF-8-kodiert. Das hat zum einen den Vorteil, dass da jetzt (fast) alle Sprachen mit einer Dateikonvertierung zurechtkommen, aber andererseits auch den Nachteil, dass man das überall sagen muss, weil viele Browser und E-Mail-Programme noch die  ISO-8859-1 – Kodierung als Standard haben.

Wir haben jetzt mal zusammengelegt, was man alles beachten muss, wenn man UTF-8 kodiert programmiert, damit nicht ein Buchstabensalat rauskommt.

1. Die Dateien müssen als UTF-8 gespeichert sein.
2. In die .htaccess gehört der folgende Befehl:

AddDefaultCharset UTF-8

3. Im PHP muss für die mail()-Funktion folgender Header angegeben sein:

$email = mail("$email","Was",$n_f_a,"From:ich@du.de\r\nReply-To: ich@du.de" . 'MIME-Version: 1.0' . "\r\n" . 'Content-type: text/plain; charset=UTF-8' . "\r\n");

4. In PHP-Dateien funktioniert beispielsweise htmlentities($fehler) nicht mehr ohne weiteres. Dazu muss man notieren:

htmlentities($fehler,ENT_NOQUOTES,"UTF-8")

5. In der HTML-Datei muss UTF-8 als meta-Tag definiert sein:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

Das ist sicher noch nicht alles, aber mal ein Anfang …

Deshalb hier eine kurze Zusammenfassung:

1. Erstelle eine robots.txt auf der neuen Domain mit folgendem Inhalt:

User-agent: *
Disallow: /

2. Kopiere die Datenbank und Dateien von Wordpress auf die neue Domain.
3. Bearbeite wp-config.php, so dass Du das Recht hast auf die Datenbank zuzugreifen, und füge die folgenden Zeilen ein, ersetze dabei example.com durch Deine eigene Domain:

define ('WP_SITEURL', 'http://www.example.com');
define ('WP_HOME', 'http://www.example.com');

4. Jetzt kannst Du Dein Blog auf der neuen Domain installieren.
5. Installiere das Suchen und Ersetzen-Plugin, starte es und suche nach Deiner alten URL und ersetze sie mit Deiner neuen URL.
6. Sobald Du fertig bist, überprüfe noch einmal, ob alles funktioniert.
7. Entferne die robots.txt -Datei.
8. Wenn Du Wert auf Suchmaschinen legst, kannst Du auf Deinem alten Blog die folgende Zeile in die .htaccess oder vhost-config einfügen:

Redirect 301 / blog / http://www.newdomain.com/

9. Entferne den alten Blog-Code und die alte Datenbank.
10. Ändere Dein Feedburner-Konto, falls Du eines hast.

Original in englisch auf yoast.com

wordpress.lernenhoch2.de/handbuch/

Dabei wird einem Schritt für Schritt alles erklärt.
Für manche ein gut erklärter Einstieg, für mich eine super Zusammenfassung!

defaults write com.apple.finder AppleShowAllFiles -bool true

Danach muss man den Finder wieder neu starten, damit dieser die neuen Einstellungen übernimmt. Dies erreicht man in der Konsole mit den AppleScript Befehlen:

osascript -e ‘tell application “Finder” to quit’;
osascript -e ‘tell application “Finder” to activate’;

Will man die Ansicht deaktivieren, ersetzt man im Befehlt “true” durch “false”.

Natürlich wäre es schön, die Anzeigeeinstellungen direkt über den Finder verändern zu können. Hierzu gibt es für den Leopard einige Beispiele im Netz, die je ein Automator Skript zum Aktivieren und Deaktivieren der Ansicht für Systemdateien über das Kontextmenu im Finder ermöglichen:

• http://gigaom.com/apple/quick-tip-showhide-hidden-files/
• http://www.macyourself.com/2009/03/20/how-to-show-hidden-files-on-a-mac-with-the-help-of-automator/

Nun ist es auch nicht gerade schön, ständig zwei verschiedene Skripte ausführen zu müssen. Zusätzlich hat sich der Automator im Snow Leopard etwas im Vergleich zum Leopard verändert. Hier nun die Vorgehensweise um das “toggeln” zwischen den Ansichten zu ermöglichen.

1. Zunächst öffnen wir den Automator und wählen über das Auswahlmenu die Vorlage “Dienst” für den Arbeitsablauf aus.
2. Als nächsten aus der Bibliothek die Automator Aktion “Shell Skript Ausführen” auswählen.
3. Im Drop Down Feld “Dieser Dienst empfängt ausgewählte(n) die Option “Dateien oder Ordner” konfigurieren
4. und im Drop Down Feld “in” die Option “in jedem Programm” auswählen.
5. Im Fenster für die “Shell-Skript Ausführen” Aktion für die Option “Shell” “/bin/bash” auswählen und für die Option “Eingabe übergeben” “An stdin” einstellen.
6. Folgende Shell Konsolen Befehle in den Editor Bereich der Aktion eintragen:

#!/bin/bash
VAR_DISP=$(eval defaults read  com.apple.finder AppleShowAllFiles)

#! needed space between brackets
if [ $VAR_DISP = 0 ];
then (eval defaults write com.apple.finder AppleShowAllFiles -bool true)
else (eval defaults write com.apple.finder AppleShowAllFiles -bool false)
fi
osascript -e 'tell application "Finder" to quit';
osascript -e 'tell application "Finder" to activate';

1. Und letztendlich mit einem selbsterklärenden Namen abspeichern , (Ich habe “ToggleHiddenFilesDisplay”) ausgesucht, und fertig ist das Automator Skript welches sich über das Kontextmenu des Finders aufrufen lässt.

Um das gleich auszuprobieren, nun den Finder öffnen, eine Datei oder einen Ordner aussuchen “rechts klick” oder den entsprechenden Systembefehl für das Kontexmenu anzuzeigen und den Dienst “ToggleHiddenFilesDisplay” ausführen. Der Finder schliesst sich und öffnet sich anschliessend erneut und man sieht die Systemdateien. Bei nochmaligen anwenden des Dienstes “ToggleHiddenFilesDisplay” schließt sich und öffnet sich der Finder erneut und die Systemdateien werden wieder versteckt.

Um versteckte Dateien in den Öffnen bzw. Speichern Menus der Mac Programme zu erreichen (z.B.: TextEdit) reicht die Tastenkobination [cmd]+[shift]+[.] aus:

• http://www.sonoya.com/tip-systemdateien-versteckte-dateien-unter-mac-osx-10-6-snow-leopard-anzeigen-sichtbar-machen-unsichtbar.html

Natürlich will man auch in der Suchfunktion des Finders ab und zu nach Systemdateien Suchen. Hierfür kann man zusätzlich im geöffneten Finder:

• http://www.boeschung.de/tipps/apple/166-snow-leopard-systemdateien-suchen-und-finden

zunächst die Tastenkombination “[cmd] + [f]” drücken, anschließend

1. Im Drop Down menu “Art” den Punkt “Andere …” auswählen
2. Die Option “Systemdateien” nun mit einem Häkchen versehen.
3. Und letztlich die Dropdown menus so konfigurieren das “Systemdateien” “einschließen” angezeigt wird.

Ein Riesenaufwand um sich versteckte Systemdateien anzuschauen ohne einen proprietäre Finderersatz kaufen zu müssen, aber es geht !

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Praktisch für Webdesigner, die keine Standalone-Version installieren wollen.

bei neuen Dokumenten:
Datei –> neues Dokument –> Voreinstellungen –> und dort wählt man unter “Standardkodierung” –> UTF8 aus.

bei bestehenden Dokumenten:

Modifizieren –> Seiteneigenschaften –> auf “Titel/Kodierung” klicken –> und dort unter “Kodierung”  UTF8 einstellen –>  auf “OK” klicken.

Das Evangelische Jugendwerk (ejw) in Ludwigsburg bietet für Kinder und Jugendliche interessante und abwechslungsreiche Aktionen, Freizeiten und vieles mehr.

Ich betreue die Internetseite schon von Anfang an und jetzt wurde sie erneuert. Das Layout der Webseite wurde mit XHTML und CSS tabellenfrei und standardkonform umgesetzt. Die Seite ist barrierefrei und die vielen Bilder werden von einer Lightbox angezeigt.

Ein besonderes Highlight ist die Hauptnavigation!

ejw Ludwigsburg besuchen

Leistungen:

• Strukturierung der Inhalte
• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: Umsetzung mit XHTML und CSS
• barrierefreie Umsetzung
• Einfügen und Gestalten aller Inhalte
• Javascript: Programmierung eines Scripts zum zufälligen Austauschen des oberen Bildes in bestimmten Zeitintervallen und bei jedem Reload sowie der Rollover-Effekte bei Navigationselementen
• PHP: Entwicklung eines Scripts, das automatisch alle Bilder eines Ordners ausliest
• Pflege, Wartung und Aktualisierung der Internetseite von 2003 bis heute

Wer schon mal ein Ausklapp-Menü barrierefrei gestalten wollte, ist sicherlich ganz schön ins Schwitzen gekommen.

Wies geht, zeigt hier ein Artikel des “Barrierefrei informieren und kommunizieren”-Portals.

Und noch ein anderes, ähnlich schwieriges Thema.

Wie kann man Tabs auf einer Seite barrierefrei umsetzen?

Dirk Ginader beschreibt es in diesem Artikel:  “jQuery Accessible Tabs – Wie man Tabs WIRKLICH zugänglich macht”.

Inzwischen ist es noch viel leichter, den Google-Kalender in die eigene Website einzubinden.

Dazu geht man wie folgt vor:

HTML5

Was es damit auf sich hat, und ob man es jetzt schon einsetzen sollte, habe ich hier mal zusammengetragen:

Artikel über HTML5:

• http://meiert.com/de/publications/talks/20090924/
• http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick/
• http://yatil.de/Weblog/wer-heute-schon-html5-einsetzen-sollte

Eine Reihe zu HTML5 von den Webkrauts:

• http://www.webkrauts.de/2009/09/21/moderne-semantik/
• http://www.webkrauts.de/2009/09/28/sehen-und-hoeren/
• http://www.webkrauts.de/2009/09/29/malen-nach-zahlen/
• http://www.webkrauts.de/2009/10/01/tipphilfen/
• http://www.webkrauts.de/2009/10/05/html5-in-der-praxis-1/
• http://www.webkrauts.de/2009/10/06/html5-in-der-praxis-2/

In englisch:

• http://dev.w3.org/html5/spec/Overview.html – HTML5 Spezifikationen vom W3C
• http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ - HTML5 Cheat Sheet
• http://adactio.com/extras/pocketbooks/html5/ - HTML 5 Pocketbuch
• http://html5doctor.com/ - ganze Seite zu HTML 5
• http://www.alistapart.com/articles/semanticsinhtml5 und die deutsche Übersetzung dazu http://tobias-otte.de/essays/semantik-in-html-5/
• http://html5gallery.com/ – eine Seite, wo Websites vorgestellt werden, die schon mit HTML5 umgesetzt sind

Nachdem del.icio.us den Quelltext ein bisschen geändert hat, habe ich die del.icio.us-Tag-Wolke und die Einzellinks einmal überarbeitet.

Sie können den aktuellen Quellcode hier runterladen.

Und hier können Sie noch einmal meinen ersten Artikel sehen, wo alles genau erklärt ist.

Viel Spaß mit den del.icio.us – Links!