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!

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 …

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

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:

ndesign-studio bietet 320 Mini-Pixel-Icons zum Download an.
Die Icons sind 14×14px groß, mit transparentem Hintergrund und können für private und kommerzielle Projekte eingesetzt werden. Werden mehr als 10 Icons aus dem Set verwendet, soll ein Link zu www.ndesign-studio.com gesetzt werden.

Mark James hat gleich mehrere Iconsets gestaltet und stellt sie auf famfamfam.com zum Download bereit:

Die 1000 Silk Icons, 144 Mini-Icons und 239 Flaggen-Icons können ebenfalls frei verwendet werden, allerdings sollte man sich auch hier mit einem Link revanchieren.

(via pixelgraphix)

Sweetie ist eine Sammlung von über 100 Icons, die für private und kommerzielle Zwecke genutzt werden können (creative common – Lizenz).
Super: Das Download-Paket enthält auch die Photoshop-Dateien, so dass die Icons leicht an das eigene Design angepasst werden können.

Das Stylegala Icon Set enthält über 200 professionellen Mini-Icons.

Und auch das Drunkey Love Icon Set hat einige nette Icons im Angebot.

Die AJAX Activity Indicators sind Icons, welche auf der Internetseite einen Ladevorgang symbolisieren.

Eine Sammlung von www.napyfab.com.

(via ajax-scripting)

Wer seine Ajax Activity Icons lieber komplett selbst zusammenklicken möchte, kann das bei Ajaxload tun. »

Weitere kostenlose Icons für den Einsatz auf Webseiten hat Maxpower aufgespürt. Er beschreibt in einer übersichtlichen Tabelle, wo sie zu finden sind und unter welchen Bedingungen sie genutzt werden können.

Update 23.05.06:
Auch bei Dr.Web gibt es eineGratis-Icon-Sammlung. »

Und noch ein kleiner Tip: Das Iconbuffet verschenkt unter der Rubrik Free Delivery ebenfalls regelmäßig Icons an registrierte Mitglieder. Der Clou: die Icon-Sets können an 5 Freunde weitergeschickt werden. Da jeder andere Icons erhält, kann man seine Sammlung nur durch tauschen vervollständigen.

Update 06.01.2007:

Manuela Hoffmann von pixelgraphix bietet ein selbst gestaltetes Iconset zum Download an.

HoHoHo-Icons von brandspankingnew – 113 Icons in Grautönen.

Auch der Michael Wöhrer aka Software Guide sammelt Icons. Hier seine Empfehlungen »

Und eine Sammlung vom smashingmagazine»

Das offizielle Feed-Icon findet man hier als Vorlage in allen möglichen Formaten und Variationen.

Update 06.03.08

Das smashingmagazin hat wieder eine ganz großartige Sammlung von Icons online gestellt. Absolut sehenswert!

Doch wie das alles testen?

Dr. Web stellt in seinem Artikel »Meine Website in vielen Browsern« eine Reihe von Online-Tools und -Angeboten vor, über die man sich Screenshots seiner Webseiten auf verschiedenen Browsern und Betriebssystemen generieren lassen kann. Zum Teil sind diese kostenfrei, zum Teil müssen Gebühren dafür entrichtet werden.

Hier eine kurze Übersicht:

• ie-Capture: Screenshot im IE7 Win, kostenlos
• Netrenderer: Screenshots in IE-Versionen 5.5 bis 7 Win, kostenlos
• Browsershots: Screenshots in verschiedenen (v.a. auch Linux-) Browsern, je nach Verfügbarkeit, kostenlos
• iCapture: liefert Screenshots von Mac Safari
• Browsrcamp: Screenshots von verschiedenen Mac-Browsern, kostenpflichtig
• Browsercam: größte Auswahl, etwa 100 verschiedene Browser, kostenpflichtig
• Browserama: ähnliches Angebot aus Deutschland, kostenpflichtig

Wer es genauer wissen will, liest bei Dr. Web nach »

Alternativ kann man sich die Browser auch auf den eigenen PC holen.
Für Windows gibt es zwei Tools, mit denen man verschiedene Browserversionen parallel auf seinem PC installieren kann:

• Multiple IE-Versionen von Tredosoft »
• Multiple Firefox-Versionen »

Foto: spyflyhigh

Übrigens nur einer von 24 lesenswerten Beiträgen im WEBKRAUTS ADVENTSKALENDER 2006, die sicher auch noch 2007 aktuell sind!

Zu finden ist eine Reihe an interessanten Quellen, die beschreiben, wie man Formulare mit modernen Technologien ansprechend, übersichtlich und gleichzeitig standardkonform und zugänglich gestalten kann.

Zur Quellensammlung bei Dr. Web »

In der Galerie können auch die Werke der anderer Benutzer durchstöbert werden.

Zum bgMaker »

Noch mehr Wallpaper-patterns gibt es hier:

• Webtreats (super!)
• squidfingers.com
• kollermedia.at
• theinspirationgallery.com
• Florale Muster bei istock.com
• dinpattern.com
• 1000+ Background Patterns You can Use for Free

Der Webhosting-Anbieter all-inkl bietet seinen Kunden im Administrationsbereich (KAS-Server) die Möglichkeit, beliebte CMS-, Blog- und Forensoftware “auf einen Klick” automatisch zu installieren.

Mit von der Partie sind Joomla, Wordpress, Typo3 und phpBB.

Zur Einrichtung klickt man im KAS-Server auf Tools > Softwareinstallation und wählt dort ein Verzeichnis sowie eine (zuvor angelegte) Datenbank aus.

Die FAQ dazu findet sich unter dem Menüpunkt Support > FAQ > Softwareinstallation.

Hab´ es noch nicht getestet, aber wenn das funktioniert, könnte man sich vor allem für die Typo3-Installation viel Fizzelarbeit sparen!

Alle eine gute Alternative zu Powerpoint & co., weil standardkonform, barriererarm, browserunabhängig, schnell geladen und leicht im Web zu veröffentlichen.

Was sie voneinander unterscheidet, beschreibt Jens Meiert in seinem Artikel »

Foto: deeo – Phohocase.de

Erleichtert enorm das Positionieren von Elementen beim Webseiten-Layouten. Super praktisch!

Die Inhalte sind dabei teilweise frei und teilweise nur für Abonnenten verfügbar.

Soeben ist das Dr.Web-Buch Nr.5 erschienen, in dem hauptsächlich Artikel aus dem Abonnentenbereich der letzten Jahre veröffentlicht werden.

Das Buch kann im Dr.Web-Shop für 18,90 Euro bezogen werden.

Es steht aber auch gratis als PDF zum Download bereit!
Einziger Nachteil der PDF-Version: die Grafiken sind qualitativ sehr minderwertig.

Aber trotzdem prima zum reinlesen!

Steve Mulder hat die Viewports bei verschiedenen Bildschirmauflösungen in verschiedenen Browsern getestet und für die Bildschirmauflösungen 640×480px, 800×600px und 1024×768px die Größe der Viewports ausgemessen und übersichtlich aufgelistet.
Zusätzlich gibt er die jeweils optimale Größe der Viewports für die verschiedenen Bildschirmauflösungen an:

Sicherste Viewports für 640×480px

• Mit Scrollbar: 584 x 290 px
• Ohne Scrollbar: 599 x 290 px

Sicherste Viewports für 800×600px

• Mit Scrollbar: 744 x 410 px
• Ohne Scrollbar: 759 x 410 px

Sicherste Viewports für 1024×768px

• Mit Scrollbar: 968 x 578 px
• Ohne Scrollbar: 983 x 578 px

Original-Artikel lesen »

via perun

Prima ist die Vorlage für diverse Buttons im Vektorformat, die auf der Seite zum Download angeboten wird.

Hier eine Version, die in Freehand10 geöffnet werden kann.

Außerdem der Hinweis auf ein Photoshop-Tutorial zum Selber-Basteln der Website-Buttons.

via pixelgraphix

16.05.06: Update auf Version 2.4

Im SelfHTML-Blog erschien heute ebenfalls ein lesenswerter Grundlagenartikel zu DHTML und DOM-Scripting von Matthias Schäfer: “DHTML ist tot” »

Hier downloaden und anschau´n (PDF|ca.4MB) »