Tipps, Webküche, WordPress

WebClip Icon, das neue Favicon

iPhone WebClip Icon

Das Web wird mobiler und Apple hat trägt mit der Einführung des iPhone und iPod touch sicher dazu bei. Allerdings führt Apple damit auch eine neue Möglichkeit der Iconablage ein, denn das Favicon ist nicht von Apple als Idetifizierungs-Icon genutzt worden.

Die Favicons haben sich durchgesetzt und ist einfach und schön, wenn man im Browser etc. die Seite schon an dieser kleinen Spielerei erkennt. Gerrit bemerkt aktuell, dass Kunden und User das Favicon mögen. Nun soll aber auch auf Apples Produkten eine Wiedererkennung mittels Icon funktionieren und deshalb ist es an der Zeit, dass man die Webseite um das WebClip Icon ergänzt. Dazu ist nicht viel Hintergrundwissen nötig und das Bild ist schnell integriert. Im folgenden die wenigen Schritte zum eigenen WebClip Icon. Weiterlesen

Standard
Webküche

Website – Checkliste für juristische Probleme

Wenn eine Website online geht, gilt es gewisse Regeln einzuhalten. Diese sollten möglichst im Vorfeld geprüft werden oder schnellstens nachgeholt werden. Die wichtigsten Punkte in folgender Liste sollen der Übersicht dienen und erhebt nicht den Anspruch auf Vollständigkeit, beinhaltet aber die Pflichtpunkte.

Impressum

Ohne ein Impressum sollte eigentlich keine Site online gehen. Dies muss nicht unbedingt eine eigene Seite sein, sondern kann im minimalsten Fall z.B. auch im Footer einer Site stehen.
Prüfe die Inhalte deines Impressums und kopiere sie nicht einfach von anderen Webangeboten.
Hilfreich dabei können diverse Service oder Artikel sein – z.B. „Wie muss das Impressum auf Webseiten aussehen“ oder WebImpressum-Assistent.

eMail

Verteilst du einen Newsletter, so muss er ein Impressum (Link zum Impressum) haben und einen Link zum Abmelden. Die eMail-Adressen dürfen nicht weiter gereicht oder verkauft werden. Bei der Verwendung von fremden Daten, dazu zählen auch fremde email-Adressen gilt der Datenschutz.

Inhalte und Jugendschutz

Sind deine Inhalte für alle zugänglich, dann muss das Jugendschutzgesetz eingehalten werden. Bei Daten die nicht unter 18 zulässig sind, muss ein Identifikationssystem integriert werden.

Fremde Inhalte

Importierst du Inhalte von anderen Websiten, z.b. per RSS (mehr im Beitrag „Regeln beim Einbinden fremder RSS-Feeds“), dann gilt das Urheberrecht. Die Zustimmung des Inhabers ist erforderlich und liegt im besten Fall schriftlich vor.

Unsichtbare Inhalte

Auch Webtags oder Meta-Angaben unterliegen dem Urheberrecht. Also aufpassen, dass keine fremden Markenzeichen dazwischen geraten. Kennst du die Marke nicht, so bist du verpflichtet, danach zu recherchieren.

Shops

Gibt es etwas auf der Website zu kaufen, so müssen die Preise nach der Preisabgabenverordnung angegeben werden, d.h. Endpreise, incl. Mehrwertsteuer. Außerdem muss auf die Versandkosten hingewiesen werden, z.B. durch einen Link.
Ebenfalls müssen die Kunden über Widerrufs- und Rückgaberecht informiert werden. Auch hier ist ein Link ausreichend, die allerdings deutlich ersichtlich sein müssen. Information dazu liefert das Fernabsatzgesetz.

AGBs

Allgemeine Geschäftsbedingungen sind grundsätzlich keine Pflicht bieten sich aber in Zusammenarbeit mit anderen Gewerben an. AGBs für Verbraucher sind eher selten anzutreffen, da sie schwer zu regeln sind. Da gibt es schon genug gesetzliche Vorschriften. Auch hier gibt es diverse Muster im Netz.

Standard
Webküche

WK – Website analysieren

Screenshot Colorblind
Screenshot Colorblind

Für alle diejenigen, die ihre Websiten jedem zugänglich machen und dies im Vorfeld testen wollen, gibt es diverse Möglichkeiten im Netz um die Tests auf verschiedenen Systemen durchzuführen unter den unterschiedlichsten Browsern.
Ebenso kann man die Seite auf Zugänglichkeit prüfen.

Ein Service, den ich bisher nicht kannte, veranlasste mich, mal alle mir bekannten Links hier zu hinterlegen. Mit „Colorblind Web Page Filter“ kann man sein Projekt für Menschen mit Beeinträchtigung beim Farben sehen, z.B. Farbenblinde, testen.

Hier eine Liste der Seiten, die beim Optimieren einer Website helfen. Mit Sicherheit ist diese Liste nicht vollständig – über weitere Hinweise würde ich mich sehr freuen. Bitte nutzt dazu die Kommentarfunktion.

Standard
Webküche

WK – Websiten blockieren mit Greasemonkey im Firefox

Mit der Erweiterung Greasemonkey für Firefox kann JavaScript-Code im Browser ausgeführt werden. Man kann also jede Seite beliebig anpassen und beeinflussen.
Im weiteren ist es möglich, die verwendeten Scripte in eigenständige Erweiterungen für den Firefox zu überführen. Dazu mehr hier !

Einige schöne und nützliche Beispiele sind zum Beispiel:

ScreenshotDas Plugin Greasemonkey implementiert sich in den Browser mit seinem Logo – der Monkey und kann von dort auch konfiguriert werden.
Jedes Script kann jederzeit um Seiten erweitert werden, wobei * für alle steht. Außerdem können einzelne Anwendungen auch ein- und ausgeschaltet werden.

Unter anderem kann man damit aber auch ein kleines und einfaches Script schreiben, mir dem man bestimmte Seiten sperrt, in Abhängigkeit der URL. An diesem kleinen Beispiel möchte kurz die Möglichkeiten dieses Plugins offen legen.


// ==UserScript==
// @name          Block sites from a list
// @namespace     https://bueltge.de/
// @description   Block sites from a list
// @include       http://*xxx*
// @include       http://*sex*
//
// Example by Frank Bueltge (https://bueltge.de)
// ==/UserScript==


var Stylecolor = "color: red;";
var Stylealign = "text-align: center;";
var Stylespace = "margin: 20%";

window.stop();
document.write('

This Site was blocked, bad content!

'); window.stop();

In diesem kleinen Script werden in diesem Fall alle Seiten ausgesperrt, die xxx oder sex in der URL enthalten. Die Liste läßt sich natürlich beliebig erweitern. Für den Fall, dass es sich um eine solche Website handelt, wird ein Text ausgegeben: „This Site was blocked, bad content!

Beim Hinterlegen des Scriptes sollte man auf den Namen achten example.user.js. Durch die Auszeichung mit user, erkennt das Plugin eigene Scripte und es wird die Installation angeboten.

Screenshot Install

Beispiel-Script:
Click mich, wenn du Greasemonkey nutzt.

Weitere Scripte und Links:

Standard
Tipps, Webküche, WordPress

WK – Breitbandverschwendung umgehen

ServerDurch einen Artikel von Ralph Babel bin ich darauf aufmerksam geworden, dass die Erweiterung „Fasterfox“ für den Mozilla-Browser Firefox überflüssige Seitenzugriffe auf den Inhalt einer Seite durchführt. Es werden also Inhalte geladen, die nicht unbedingt benötigt werden. Da Performance immer wieder ein Thema ist, auch für Weblogs, hat mich dieser Artikel mehr interessiert und ich habe meine robots.txt angepasst.

Die robots.txt im Root-Verzeichnis einer Website ist sicher den meisten Webautoren bekannt, dass man aber die Erweiterung Fasterfox extra aussprerren kann bzw. muss, ist nicht so alltäglich (ab Version 1.0.1). Leider akzeptiert die Erweiterung den String

User-agent: * nicht, es muss direkt auf Fasterfox hingewiesen werden - 
User-agent: Fasterfox.

Um Fasterfox gänzlich auszusperren genügen folgende Zeilen in der robots.txt.

User-agent: Fasterfox
Disallow: /

Somit sieht meine robots.txt derzeit folgendermaßen aus. Für diejenigen, die keine robots.txt in ihrem Verzeichnis haben - einfach den Code kopieren, als robots.txt (Achtung: alle Zeichen müssen klein geschrieben sein) speichern und die Verknüpfungen anpassen. Die Datei muss in Root-Verzeichnis liegen, also in der obersten Verzeichnis-ebene.


# https://bueltge.de/

User-agent: Fasterfox
Disallow: /

User-agent: UniservalRobot/1.0
Disallow: /temp/
Disallow: /mail/
Disallow: /wp-admin/
Disallow: /wp-images/
Disallow: /wp-includes/
Disallow: /bueltge_old/
Disallow: /wp-content/images/
Disallow: /wp-content/backup/
Disallow: /wp-content/wp-upload-manager/

User-agent: wget
Disallow:

User-agent: webzip
Disallow:

User-agent: *
Disallow: /temp/
Disallow: /mail/
Disallow: /wp-admin/
Disallow: /wp-images/
Disallow: /wp-includes/
Disallow: /bueltge_old/
Disallow: /wp-content/images/
Disallow: /wp-content/backup/
Disallow: /wp-content/wp-upload-manager/

Kurz erklärt:

Disallow: / sperrt den den übergeordneten Roboter aus.

Disallow: lädt den übergeordneten Roboter ein.

Allerdings sollte man erwähnen, dass sich Suchmaschinenbetreiber nicht an die Daten in der robots.txt halten müssen, es wohl aber tun. Außerdem ist diese Datei für jeden zugänglich und man kann so URLs heraus bekommen.

Weiterführende Links:

Standard
Tipps, WordPress

WP – Image für den RSS Feed

Im folgenden Artikel erkläre ich kurz, wie man die ausgegebenen RSS Feed von WordPress ein wenig aufpeppen kann, in dem man die Funktion vieler RSS Reader unterstützt und ein Icon als Erkennungsmerkmal hinterlegt, ähnlich dem Favicon im Browser.

Demo:

Das ganze könnt ihr anhand des Screenshot meines Readers RSS Bandit sehen.

Screenshot RSS Bandit mit Image des Feeds

Um das ganze auch in jedem anderen Feed von WordPress zu realisieren, müssen einige Dateien eures Blogs verändert werden.
Alle Dateien findet ihr im Root-Verzeichnis eures Blogs. Dort sollte auch euer Icon für den RSS Feed liegen.

Achtung:

Sicherheitskopien sind im Vorfeld anzufertigen !

  • wp-rss2.php, ab Zeile 30 einfügen,
    nach <language?><?php echo get_option('rss_language'); ?></language?>
  • wp-rss.php, ab Zeile 24,
    nach <language?><?php echo get_option('rss_language'); ?></language?>
  • wp-commentsrss2.php, ab Zeile 28,
    nach <generator?>http://wordpress.org/?v=<?php echo $wp_version ?></generator?>

Folgender Code muss bei den genannten Datein hinzugefügt werden. Achtet darauf, dass ihr den Pfad zu eurem Icon richtig angebt. Um den Feed valide zu halten, kann nur png, gif oder jpg als Format für das Bild genutzt werden.


<image>
	<url><?php bloginfo_rss('url') ?>/icon_name.png</url>
	<title><?php bloginfo_rss('name') ?></title>
	<link><?php bloginfo_rss('url') ?></link>
</image>

Infos:
Der Image-Block im Feed ist optional und sorgt nur für optische Hervorhebung im RSS-Reader. Das Markup url beinhaltet den Link zum Icon. Der title– Tag ist für einen Alternativ-Attribut und der link– Tag verweist in der Regel auf die Website. Weiterhin können width und height für die Größe des Icons angegeben werden.

Weiterführende Links:

Die Integration eines Icons in den Feed ist jetzt auch per Plugin möglich, O.A.Schmitz hat ein kleines Plugin geschrieben – Feed-Image

Standard
Tipps, WordPress

WP – WordPress Titel ändern

Mit dem Titel meines Blogs war ich bisher nicht ganz zufrieden.
Besonders störte es, wenn man mehrere Seiten oder Beiträge als Favoriten abgelegt hat.
Dann sah es in der Favoritenliste nämlich immer so aus –

  • bueltge.de [by:ltge.de] » Beitrag 1…
  • bueltge.de [by:ltge.de] » Seite 2…
  • bueltge.de [by:ltge.de] » Kategorie 3…

… ziemlich unübersichtlich.
Also habe ich mich an die header.php meines Themes gemacht und meinen Titel wunschgemäß angepasst, ohne die Nutzung eines Plugins. Wer das ganze nachvollziehen will, findet auf den folgenden Zeilen einige kleine Tipps zum wunschgemäßen Titel.

Ich verwende ein abgewandeltes Theme vom Kubrick-Theme. Dort sieht der Code zur Ausgabe des Titel folgendermaßen aus.


<?php bloginfo('name'); ?> 
 <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> 
  <?php wp_title(); ?>

Mit Hilfe der If-Abfrage habe ich den Titel in die nötige Form gebracht.



<?php if ( is_archive() ) { ?> Kategorie <?php } ?>
<?php wp_title(''); ?><?php if ( is_archive() ) { ?> auf <?php } ?>
<?php if ( is_single() ) { ?> auf <?php } ?> <?php bloginfo('name'); ?>

In der ersten Zeile frage ich ab, ob es sich um die Auflistung aller Beiträge in einer Kategorie handelt, wenn ja – dann schreibe vor den Titel der Kategorie das Wort „Kategorie“ und nach dem Titel das Wort “ auf „.
Der Titel wird ohne ein Zeichen ausgegeben. Standardmäßig (

wp_title();) ist vor dem Titel ein Doppelpfeil ».
Im weiteren frage ich dann ab, ob es sich um die Darstellung eines Beitrags handelt, also ob das post-Template genutz wird. Wenn ja, dann schreibe auch hier vor den Titel das Wort " auf ".
Nun sieht es folgendermaßen aus - siehe Titel in eurem Browser.

  • Beitrag 1 auf bueltge.de [by:ltge.de]
  • Seite 2 auf bueltge.de [by:ltge.de]
  • Kategorie Sowieso 3 auf bueltge.de [by:ltge.de]

Danach ist die Ausgabe wesentlich benutzerfreundlicher, und auch die Ablage in den Favoriten des Browsers ist übersichtlicher.

Info:
Achtet auf die Verwendung des Bindestriches, da der sehr relevant für die Indizierung durch Suchmaschinen ist.
Bindestriche haben bei Google in der URL die eindeutige Aufgabe der Keyword-Trennung. Sie beeinflussen die Ergebnisse der Suchanfragen, da jedes einzeln und die Kombination der Einzelwörter Gewicht bekommt.
einfach-persönlich.de

Ausgewählte Möglichkeiten für die IF-Abfrage ...

  • is_single - wenn ein Beitrage (post Template) geladen wird
  • is_archive - wenn eine Archiv-Seite geladen wird
  • is_category - wenn eine Kategorie-Seite (Übersicht) geladen wird
  • is_page - wenn eine Seite (page Template) geladen wird
  • is_home - die Abfrage der Startseite
  • is_author - wenn eine Seite gealden wird, eines Autors
  • is_search - wenn die Suchseite (search Template) geladen wird

... mehr Infos zu möglichen Abfragen gibt es auf der Codex-Seite von WP.

Standard