Spickzettel erneuern

Ich mag sie diese ausdruckbaren Spickzettel. Sie erleichtern mir die Arbeit, denn nicht immer kann ich alles auswändig oder mag ich auswändig kennen. Gedruckt und in Klarsichthüllen verpackt habe ich sie “beringt” auf meinem Schreibtisch immer griffbereit liegen.

Außerdem dacht ich mir, dass ich meine Liste doch teilen könnte. Also hier meine Liste mit 10 Links zu Spickzetteln oder Cheat Sheets, die ich gerne weiterempfehle:

Spickzettel Cheat Sheets – für mich ein *must have*

1. 3. pdfs für PHP, XHTML und CSS bietet gosquared.com.
2. Ein PHP Sheet liegt seit einem Jahr bei dreamincode.net zur Abholung bereit.
3. HTML cheat sheet von floele.flyspray.org.
4. CSS cheat sheet in der 2ten Version von addedbytes.com.
5. Der MySQL Spickzettel ist bei mir sehr beliebt addedbytes.com .
6. Wer außerdem noch mod_rewrite und regular expressions und einiges andere braucht sieht ebenfalls bei Dave vorbei. (früher IloveJackDaniels.com)
7. WordPress Help Sheet und WordPress Reference Guide gibt es bei WPCandy.com.
8. Einen Spickzettel für die WordPress Template Hierarchy für alle WP Theme Autoren gibt es auf meiner Texto.de .
9. Sogar für Google gibt es einen Spickzettel. Richtig finden mag eben auch gelernt sein, dachte sich Frank sicherlich als er den erstellte Googles Spickzettel.
10. Wer HTML Newsletter braucht liebt sicher diesen Spickzettel voncampaignmonitor.com

Weitere Sammlungen:

• market-to-market.de.
• Tastenkürzel.

Kennst Du noch weitere Cheat Sheets?

Also solche zum Ausdrucken und wenn geht halbwegs akutell bitte.

Free Photoshop Brushes Überblick

Ich habe keine Ahnung, ob man überhaupt je genug Photoshop brushes haben kann. Kaum habe ich die einen, sucht mein Blick wieder was anders und umgekehrt.

Ich schenke mehr als 45 Photoshop brushes her. Alle Fotos für diese Pinsel sind von mir gemacht, ebenso die Pinsel natürlich

Im Bild sieht man eine kleine Auswahl was man damit so ungefähr alles anstellen kann.
Alle Photoshop brushes sind mindestens 2000px breit oder hoch und bieten daher genug Schärfe oder Unschärfe, je nachdem was sie darstellen.

Nutzungsbedingungen – Terms of Use

Namensnennung und/oder ein Backlink auf WebDesign-in.de.,
kommerzielle Nutzung ist OK, aber nicht die Pinsel veraufen…. und kein Download auf eine fremden Seite.

Backlink to WebDesign-in.de / or “by mts” , commercial use is ok, but do not sell this brushes ..;) or offer them on your website

Free Download der PS brushes

Der Download ist von meinem Webspace- bitte ein bisschen Geduld, die Files sind sehr groß, weil in hoher Qualität!

• MTS-Ground-Stones-Dirty-00.zip (38,3 MB)
• MTS-Ground-Stones-Dirty-01.zip( 54,2 MB)
• MTS-Ground-Stones-Dirty-02.zip(30,2 MB )

Deine Werke damit

Ein Link zu einem oder mehreren Deiner Werke damit, wäre wunderbar…

Die Hacker gehen um. WordPress ist beliebt als Angriffsziel, weil WordPress sich zur meistverwendeten Software gemausert hat. Hier einige Sicherheitstipps, die das Leben der Hacker um etliches erschweren, dass der WordPress Benutzer um einiges erleichtern und ruhiger machen.

Sicherheits Updates machen

Wer jammert, dass seine WP Version 2.02 gehackt wurde hat von mir kein Mitleid. Eher schiefen Blick wegen Sorglosigkeit.

Datenbankpräfix ändern.

In der Datei wp-config.php wird das Datenbankpräfix eingegeben. Standard ist wp- unbedingt was anders nehmen.

// You can have multiple installations in one database if you give each a unique prefix
$table_prefix  = 'wp_';   // Only numbers, letters, and underscores please!

Erlaubt sind Zahlen, Buchstaben und Unterstriche.

blog_ ist auch keine wirklich sichere und kreative Lösung.

Passwort des Adminaccounts

Dies ist der erste User den WordPress erstellt und der hat die höchste Macht – wie ein König. Könige werden immer angegriffen;)

Das Passwort hat mindestens 12 Zeichen, besteht aus Zahlen, Großbuchstaben, Kleinbuchstaben, und wird in unregelmäßigen, aber überschaubaren Zeitabständen geändert – unbedingt! Niemals deinen Namen oder den des großen Bruders oder Freundes und selbst der Helfer in der Not bekommt einen eigenen Account, aber nicht den Adminzugang. Und wenn -nach der Hilfe-Passwort ändern.

Ich erlebe oft, dass ich von Usern im Forum den Adminzugang bekomme und nach Monaten haben die wieder eine Frage und dasselbe Passwort! – Dies liegt aber nie an der Software WordPress, sondern an unserer Software unter den Haaren … (böseichbin)

chmod Rechte

Per FTP Programm- das ist jenes Programm mit dem die Dateien auf den Webspace kopieren kann-kann man sogenannte chmod Rechte vergeben.

777 bedeutet:alle dürfen alles – da kann man auch gleich den Hackern sagen: Hey! bei mir warst Du noch nicht ….

777 vergibt man nur im Notfall!

755 …seltenst.

666 ebenso…

je weniger Rechte desto gut-ausprobieren wo man an diesen Rechten sparen kann. Verzeichnisse die mehr Rechte brauchen -wegen Bilderupload etc raus aus dem Verzeichnis wp-content.

wp-admin mit Passwortschutz umgeben

Dies bringt nur was, wenn man keine Userregistrierungen zuläßt, sonst wird es meist zu kompliziert.

Userregistrierungen sowenige wie geht

Ich finde es ja nett, wenn ich mich wo zum Kommentieren registrieren sollte. Noch netter, wenn dann ganz viel vom Adminbereich zu sehen ist, aber sicher ist es nicht.

Abwägen:Lieber mehr Spamkommentare löschen oder gehackt werden können…

Exec-PHP und ähnliche Plugins.

Es gibt Plugins, die das Ausführen von PHP oder JavaScripts direkt im *Beitrag schreiben /Seite schreiben * Textfeld erlauben. Diese kann man meist so einstellen, dass dies nur der Adminaccount darf. Und dies ist auch gut so.

Unfiltered HTML

Nutzt man das Role Manager Plugin kann man auch das Recht vergeben *unfiltered HTML* zu verwenden. Mit diesem Recht sehr sparsam umgehen.

Kommentierenden sowenig wie möglich html erlauben. Auf gar keinen Fall Code so locker erlauben.

Böse Bots aussperren

Bot-trap.de ==>Hier wird Dir geholfen!

WP Pluginlisten

Voller stolz zeigt so mancher gerne her, welche Plugins im Blog aktiv sind. Dies bietet Angriffsflächen.

WP Plugins runterladen

Entweder von der Autoren Seite des Plugins oder von wordpress.org. Niemals vom Freund des Freundes, dessen Freundin wo einen Link dazu fand!

leere index.php

Egal welchen Ordner Du noch auf Deinem Webspace hast. Laß den nicht offen daliegen. Gib einfach eine leere index.php da hinein. Dann sieht man nur eine weiße Seite.

andere Tipps

• Schütze Deine wp-config
  
  Wer seinen Blog im Unterverzeichnis X hat, über die weitergeleitete Subdomain beim Freehoster Y aufruft, dann noch eine anere Domain weiterletienmag-sollte dies aber nur tun, wenn er in all den Weiterleitungen noch den Durchblick hat. Sonst ist WordPress sicher – so sicher, dass es auch der Chefadmin nicht mehr findet
• Alles verstecken
  habe ich nicht getestet

Weitersagen und Ergänzungen erbeten

Datenbanken haben die Aufgabe Daten zu sammeln und zu horten und gut aufzubewahren. Dass man dann diese Daten auch wieder herausholt, damit dieser Artikel -als Beispiel- gelesen werden kann ist der Datenbank an sich egal. Sie hortet. Hoffentlich!

Plugins für WordPress gibt es mehr als genug. Man probiert jenes, dann dieses und das hat man auch noch nicht. Nicht jedes Plugin läßt sich aber komplett deinstallieren und so sammeln sich Datenreste in der Datenbank, die man einfach nicht mehr braucht.

Nicht jeder erkennt in den Tabellen von WordPress all den überflüssigen Datenmüll und /oder getraut sich nicht einfach was da drin zu löschen. Ja mancher bekommt schon Herzklopfen, wenn er das Tool phpMyAdmin auch nur öffnen muss so hie und da.

Plugins hat ja nicht nur das CMS WordPress, sondern fast jedes Content Management System. Manche nennen diese Module oder AddOns. Der Effekt ist aber immer dergleiche. Hie und da ist es mehr als sinnvoll der Datenbank einen Frühjahrsputz zu gönnen. Die Performance – also die Geschwindigkeit mit der die Daten dann wieder aus der Datenbank geholt werden können – ist nach so einem Frühjahrsputz oftmals um einiges besser.

Die Error Logs des Servers füllen sich meist auch nicht so schnell und alles läuft wieder wie geschmiert.

Hier eine Sammlung hilfreicher Artikel und Tipps, die dabei helfen und vor allem alles zu einem glücklichen Ende bringen.

Datenbank Backup via phpMyAdmin

WordPress bietet auch Plugins für das Datenbankbackup, die sind sehr gut und ich beschreib ich sie weiter unten. Muss man jedoch das Charset umstellen, so ist ein Backup mit phpMyAdmin unbedingt zu empfehlen.

Kurze Erklärung was ein Charset ist: Dies ist die Zeichenkodierung – unsere Umlaute als Beispiel, oder ein Bindestrich ein Anführungszeichen. WordPress sollte in UTF8 kodiert sein. Dies war aber nicht immer so, daher jetzt die Umstellung.

Frank schrieb dazu einen sehr ausführlichen Artikel: Datenbankbackup mit phpMyAdmin. Vor allem den Screenshot unter Punkt 4 in seinem Artikel lege ich sehr ans Herz. Am besten ausdrucken und aufheben. So behält man leicht den Überblick und alles geht gut.

Datenbank Backup mit einem WP Plugin

Ich nutze dafür das Plugin von ilfilosofo und damit ich automatisch jeden Tag ganz bequem ein Backup per Email bekommen kann noch WP Cron. Könnte eventuell auch ohne dieses funktionieren, aber ich habe ja einiges hier umgeändert daher ist es sehr hilfreich.

Backup alles Beiträge, statischer Seiten, Kategorien und auch Tags mit Exportfunktion

Admincenter==>Verwalten==>Export Vorher unbedingt diesen Abschnitt zu Ende lesen und ich empfehle dies nur sehr mutigen.

Auch wenn es nicht dabei steht es werden auch die Tags exportiert. Soweit ich herausfand jedoch keine Linkkategorien und keine Attachments.

Daher:hat jemand viele Linkkategorien müssen diese anders gesichert werden!

Exportiert man von WP 2.3 und sichert sich mit phpMyAdmin die Linkkategorien, löscht man dann die ganze Datenbank von seinem Blog und installiert WP komplett neu. So sollte man folgendes beachten:

1. Tabellenpräfix nicht ändern.
2. Blogadresse nicht gleich ändern.
3. Unbedingt folgenden Patch verwenden: VOR dem Export Otto42, dies braucht man damit die Tags wieder als Worte und nicht als Nummern erscheinen. In WP 2.5 wird dieser Bug behoben sein.

Alles gesichert, alles dreifach vierfach vorhanden

Dann die Datenbank des Blogs löschen, WordPress neu installieren und mit der Importfunktion:
Admincenter==>Verwalten==>Import die Artikel, Kategorien und Tags wieder in die Datenbank einfügen. Die Linkkategorien über phpMyAdmin hochladen.

Die Kategorien, Artikel, Linkkategorien können nach dieser Prozedur andere IDs haben, dann muss man alles im Template wieder anpassen.

Vorteil dieser radikalen Methode. Die Datenbank ist tatsächlich jungfräulich neu und bereit für neue Schandtaten

Datenbank auf UTF8 umstellen

Sollte die Datenbank noch nicht UTF 8 haben unbedingt die Umstellung machen.

49suns hat hier eine gute Erklärung und den Link zum helfenden Plugin. Doch vorher:Datenbankbackup machen.

Sorge, Herzklopfen, Angst vor der Datenbank

Absolut verständlich und selbst nach Jahren gehe ich ungern in das Herzstück einer Website oder eines Blogs. Ich achte darauf ruhige Umgebung zu haben, mich nicht ablenken zu lassen und konzentrationsfähig zu sein.

Ein klingelndes Telefon ist nicht besonders nett, wenn man grade auf *drop table* geklickt hat und dann alles weg ist Daher mache ich sowas gerne in der Nacht. Hat auch den Vorteil, dass die Besucher /Kunden selten was davon merken, wenn wirklich was schief geht. Zumindest sind hier so gegen 1:00 nicht viele Besucher

Alle Tipps befolgt, dennoch alles weg. Nichts geht mehr.

Und geht wirklich alles schief. Dann ist das Forum die beste Anlaufstelle.

Genau beschreiben was man tat. Wo man es tat. Was nicht mehr geht. Der Hilferuf: Nichts geht mehr, sagt ja leider nicht viel aus.

Und ein wenig Geduld. Wir helfen dort wirklich schnell, aber es kann schon mal passieren, dass Samstags Vormittag noch alle schlafen.

Und…. ein Tipp an alle weniger Fußball begeisterten – selbst wenn man sich die Zeit eines Fußballspieles nimmt, um sein Blog und die Datenbank zu entmüllen – die Helfer könnten eventuell vorm Fernseher sitzen.

==> War dies hilfreich, so einfach weitererzählen.

aktuelle Jahreszahl im Footer 

Stolz prangen die Copyright Hinweise im Footer sehr, sehr vieler Websites oder Blogs. Voller Enthuismas tippt man die erste Jahrszahl hinein.

Die Zeit vergeht, schneller als der Wind, ein Jahr ist um und ehrlich wer sieht denn ständig den Footer – also die Fußzeile – der eigenen Website oder des eigenen Blogs an?

Auf einmal prankt dort im Jahr 2008 voller Stolz das Jahr 2007

Um dies zu verhindern braucht man ganz, ganz wenig Mut. Eine Website, die .php Dateien verwendet – viele Blog Systeme tun dies -.

Die Datei des Footers mit einem Texteditor öffnen. Nach der veralteten Jahreszahl suchen – diese stehen lassen und einen Bindestrich dazufügen.

Anschließend folgendes hineintippen:

<?php  echo date(Y);?>

&copy; 2007 - <?php  echo date(Y);?>

und schon aktualisiert sich die Jahreszahl wie von Zauberhand jedes Jahr neu.

Links zum Nachlesen:

• PHP date.
• Datum und Zeit

Drucken und PC sind siamesische Zwillinge. So lernt jeder PC Neuling relativ rasch, dass sich oben Links beim Browser unter dem Wort “Datei” die Druckmöglichkeit versteckt, wenn er das Druckersymbol nicht findet.

Mittlerweile löst es bei vielen Menschen Verwirrung aus, wenn diese Funktion woanders zu finden ist. Wieso auch immer, dies hat sich als (Web)Standard etabliert.

Standards erleichtern uns die Bedienung vieler Geräte deren Hintergrundtechnik wir nicht verstehen, die wir jedoch benutzen wollen und können.

Webstandards sind da nicht anders.

Mit einer print.css kann man das Drucklayout gestalten. Viele Menschen wollen Artikel ausdrucken und dann offline nachlesen.

Oftmals wird dies jedoch zur unendlichen Papierflut, weil man vergaß ein Drucklayout für die eigene Homepage anzugeben. Unabhängig davon weiß jeder aus eigener leidvollen Erfahrung Druckerpatronen sind irr teuer.

Man mag nichts anders als einen Artikel und auf einmal rattert der Drucker 14 Seiten buntest raus. Navigation, Formularfelder etc. kommen gleich mit.

Oder die Homepage hat einen schwarzen Hintergrund mit weißer Schrift. Da ist eine Tintenpatrone schneller leer als man schauen kann…

Drucklayout print.css

Oder Frames- ja es gibt sie noch und dann dort den Inhalt ausdrucken – dies ist die hohe Kunst schlechthin. Portale oder Blogs mit zwei Sidebars – wozu all diese Links ausdrucken?

Wozu Adsense, Banner etc mitdrucken lassen …

Ein Drucklayout anzubieten ist für mich somit einfach ein Akt der Höflichkeit. Webstandard sowieso und außerdem verschwindet dann ganz automatisch wieder eine “Barriere” – also auch ein “Muss” des barrierenfreien WebDesigns.

Wieso heißt die Drucklayout Datei “Print.css”

Einfach damit man als WebDesigner, Webmaster den Durchblick bei all den verschiedenen CSS Dateien nicht verliert.

Man kann sie auch drucklayout.css oder hastenichtgesehen.css nennen, wobei letzteres kaum Widererkennungswert hat…

Wie wirkt diese Print.css

Links oben ist bei 99,999999% aller Browser die Angabe: Datei==>Drucken. [File=>print] Oder der Browser bietet bereits ein Druckersymbol an. Und genau diesen Ausdruck gestaltet eine print.css.

Wie verlinkt man eine Print.css korrekt im HTML Header.

	<link rel="stylesheet"
   type="text/css"
   media="print"
   href="../print.css" />

1. Schriftfarbe, Hintergrundfarbe, Schriftgröße definieren und alle Hintergrundbilder verbieten:

Schriftgröße gibt man für den Druck mit pt angegeben wird. “pt” ist die Angabe aus dem Druck und hat nur dort etwas verloren.;)

Das !important sagt:unbedingt musst Du das tun.

body{
       font:11pt/120% Arial, serif;
       background-color: white !important;
       background-image: none !important;
       color:black;}

2. Floats müssen aufgelöst werden in einer print.css

Die Angabe “float” bewirkt beim Ausdruck ein “Ineinanderfließen” diverser Elemente. Niemand mag, dass das Bild über den Text ausgedruckt wird. D.h. alle Angaben in der normalen style.css durchgehen und überall wo ein “float” vorkommt zusammenfassen und dann verbieten:

z.B.:

dl, 
dt, 
dd {
      float:none !important;}

Wenn jemand etwas ausdrucken mag, dann deswegen, weil ihm der Inhalt interessiert.

Daraus folgt muss alles weggeben, was nicht zum Inhalt gehört.

Display:none

wird der große Freund beim Erstellen einer Print.css.

3. Alles was man nicht ausdrucken mag bei der Anzeige verbieten:

z.B. hier auf WebDesign in de ist dies derzeit (Frühjahr 2007 )

div.footerinnen small,
div.footerinnen img,
.invisible,
.postmeta,
.navigate,
.navigate01,
div.navinnen ul,
.postinnen .sidebar,
.commentline,
.ohne,
#commentform,
.aehnliche,
.top{
             display:none;}

4. Die Links – die Verweise speziell gestalten:

Ein bisschen Farbe darf es schon sein.

a:link,
   a:visited {
         color: #7A1E19;
         background:white;
          text-decoration:none;}

4.a Oft hat man ja Bilder, die als Link genutzt werden:

 
img,
img a:link,
img a:visited{
            border-bottom:1px solid #C30099;
            margin-right:12px;}

4.b. Bei Links kann man auch die URL anzeigen lassen, auch wenn dies nicht jeder Browser kann:

Bei mir sind dies die Links, die in der CSS class “content” zu finden sind. Anpassen nicht vergessen und bitte auch die eigne Domain angeben.

.content a:link:after,
	.content a:visited:after {
   	content: " ("attr(href)")";
   	font-size: 90%;}
 
.content a[href^="/"]:after {
   content: "(http://www.webdesign-in.de" attr(href)")"; }

5. Abkürzungen anzeigen lassen.

Oft ist es sinnvoll die benutzten Abkürzungen auch bei der Print.css anzuzeigen.

 
acronym[title]:after, 
  abbr[title]:after {
            content: ' (' attr(title) ')';}

6. Code speziell gestalten .

Ich habe hier die ganzen Codebeispiele speziell gestaltet. Damit diese Codebeispiele auch im Drucklayout gut aussehen nutze ich diese Angaben:

Eine spezielle Schriftart. Das overflow auto löse ich mit overflow visible wieder auf. Die Höhe soll sich automatisch ergeben. Da ich eine andere Farbe hier anzeigen lasse, gebe ich extra nochmals die Farbe und die Hintergrundfarbe für den Ausdruck an. Sicher ist sicher

pre,
code {
    font:10pt /2em  "Courier New",Courier, monospace;
    color: black;
    background:white;
    margin-left:2px;
   padding:1em;
    border-left: 1px solid #930;
   overflow:visible!important; 
   white-space:normal;
    width:90%;
    height:auto;}

7. Gustostückchen und spezielles nicht vergessen:

Dies ist von Layout zu Layout unterschiedlich.

h1,h2,h3,h4,h5,h6{font-size:13pt;line-height:110%;margin:0;padding:0;}
div.content,
div.contenth {margin-left:0.8em;padding-top:1em;}
h3.comments{font-weight:normal;font-size:11pt;}
body img.wp-smiley {border:none;}

Damit man auch weiß woher man sich was ausgedruckt hat und ich dies nicht dem Zufall überlassen mag, ob jemand die Kopf und Fußzeile des Standarddrucklayouts beibehalten hat. Habe ich im Footer hier den Namen der Domain stehen und den lasse ich auch ausdrucken.

Man könnte natürlich auch ein einfaches, kleines Logo nur für den Ausdruck machen.

Das ganze wirkt recht viel und lang, doch die print.css von WebDesign-in.de sieht derzeit so aus:Es ist eine Textdatei wie alle CSS Dateien:Print.css.

Zusammenfassung der wichtigen Punkte für ein Drucklayout einer print.css.

Was muss die print.css alles angeben, damit der Ausdruck gut lesbar ist.

• Das Hintergrundbild und das Logo ist unnötig. Besser ist ein weißer Hintergrund eine schwarze Schriftfarbe.
• Die versteckten Anweisungen sind unnötig.
• Ebenso die Navigation.
• Die Anweisung “float” muss aufgehoben werden, damit keine Inhalte überlappen.
• Überschriften und Links im Text benötigen eine andere Farbe.
• Links im Text mag man sichtbar machen, damit der Kunde weiß wo er weiteren guten Inhalt findet. (Dies funktioniert nicht, wenn der Kunde den Internet Explorer nutzt, aber diese Anweisung stört den Browser auch nicht.)
• Die Kommentarfelder sind unnötig.
• Die Angabe wo was wann abgespeichert wurde und die Hinweise auf die Kommentarfunktion sind unnötig.
• Die Breite des Inhaltes muss vergrößert werden, um die volle Breite einer A4 Seite auszunutzen. Oder zumindest nicht unnötig verkleinern.
• Die Schriftgröße muss für Printmedien angegeben werden also in “pt”.

Andere zum Thema:Print.css und Datei drucken:

1. Alistapart.com . Ein noch immer gültiger Artikel aus dem Jahr 2002!
2. Intensivstation
3. Und natürlich SELFHTML: Print.css

Übesetzungen

Ganz herzlichen Dank an Bohdan Zograf, der diesen Artikel in Belorussian übersetzte. Designcontest.

Artikelhistorie:

Erstfassung:09.10.05
geändert am 14.04.2011 Übersetzung hinzugefügt.

Viele Internetuser kennen den Unterschied zwischen Java und JavaScripts nicht. Man merkt sich den ersten Begriff “Java” und erinnert sich, dass da mal gesagt wurde das sei gefährlich und deshalb sucht so mancher die Möglichkeit JS bei seinem Browser auszuschalten. Einige – aber eine nicht minder große Zahl – können die Maus nicht benutzen und verzweifeln an so mancher Website, die wichtige Navigationsteile mit JS steuert, aber an die Tastaturnutzer nicht dachte. Oder so manches Menü, der Zugang zu den Kommentaren etc. nur mit JS möglich ist.

Hier einige Artikel, Scriptressourcen, sowohl für JavaScript Ersteller, wie für den JS Laien nutzbar, wenn man sich einfach traut.

In Erinnerung rufen mag ich einen hervorragenden Artikel aus dem Jahre 2006 auf Sitepoint.com. Hier wird anhand eines einfachen Beispieles – einfach für diejenigen, die JS schreiben aufgezeigt wie man auch den Tastaturnutzern JavaScripts gesteuerte Navigationen zugänglich machen kann.

The JavaScript Anthology

James Edwards
& Cameron Adams
ISBN:0-9752402-6-9

Ebenfalls erinnern mag ich an eine hervorragende Seite, die dies in Deutsch erklärt: Barrierefreies JavaScripts von ichwill.net.

Die Zugänglichkeit =Accessibility…

.. bedauerlicherweise bei uns verkürzt “Barrierefreiheit” genannt. Dies verhindert oft das Denken an viele einfache, aber sehr benutzefreundliche Möglichkeiten von JS im Speziellen und Programmierung von Features im Besonderen.

Nimmt man auf Menschen Rücksicht, wenn man JavaScripts nutzt nimmt man ganz automatisch auch auf die Bots der Suchmaschinen Rücksicht, die sich mit JS immer noch schwer tun.

Hier auf WebDesign-in.de wurden die Kommentare “versteckt”. Derzeit sieht man das Script bei versicherung-in.de und rolfkaul.de.

Erst wenn ein Kommentar vorhanden ist erscheint der Link zum “Kommentar lesen”. So sehen dies alle, die JavaScript aktiviert haben. Hat jemand JavaScripts deaktiviert, dann sieht er alle Kommentare gleich. Also auch die Suchmaschine.

Kannst Du Dom

JS wird nicht am Server ausgeführt, sondern im Browser. So frage ich den Browser einfach: “Kannst Du DOM”. Kann er das, dann soll er verstecken und erst beim Klick auf den Link aufmachen. Kann er das nicht, dann soll er gleich alles anzeigen.

Dieses Script sieht so aus und ich habe es als collapse.js abgespeichert und dann im HTML Header verlinkt.

 
if (document.getElementById && document.createTextNode){canDOM=true}
function collapse(id){
	if (canDOM && document.getElementById(id)){
		elm=document.getElementById(id);
		elm.style.display=elm.style.display=='none'||elm.style.display==''?'block':'none';
	}
}
if (canDOM){
	document.write('<style type="text/css">.commentlist{display:none;}.write{display:none;}</style>')
}

Da ich hier WordPress nutze das Beispiel in der comments.php:

<?php if ($comments) : ?><!--damit frage ich, ob es ueberhaupt Kommentare gibt-->
<p class="navigate01">
<a title="anklicken zum Lesen, oder anklicken zum Zumachen der Kommentare" href="#commentlist" 
onclick="collapse('commentlist');return false">
Kommentare lesen &#187;</a>.
</p>

Weiter unten nutze ich die angesprochene CSS class und gebe dem Link einen Anker:

 
<ol  id="commentlist" class="commentlist"><li class="ohne"><a name="commentlist"></a></li>
<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type() == "comment"){ ?>
usw....

Ein JavaScripts Script für ein Menü ist bei Evolt.org zu finden. Dieses Beispiel ist ebenfalls sehr ausführlich erklärt und selbst, wenn man nicht Englisch kann, aber JS kann man ja alles einfach nachmachen und nachsehen was dann passiert.;)

Brothercake bietet ebenfalls hervorragende Erklärungen und jede Menge an Beispielen an. Stöbern lohnt auf alle Fälle. Sogar der JS Laie kann dies nutzen, da bin ich mir sehr sicher!

Diverse Developer Toolbars für Browser bieten fast alle die Möglichkeit per Klick JS zu aktivieren oder deaktivieren.

Einfach anders denken und vielleicht wird dann auch irgendwann sogar Ajax für Screenreader nutzbar, wenn dies auch derzeit wirklich nur Zukunftsmusik ist.

Frühjahrsputz in der Datenbank ist eine nützliche Sache. Die Wohnung zu putzen steht auf meiner Lieblings to do Liste garantiert nicht an erster Stelle. Da müßt ich unverhohlen lügen. Putzen an sich betrachte ich als reinste Sisyphusarbeit und es muss getan werden, um den Betrieb “Haushalt” aufrecht zu erhalten, dies sagt mir mein Verstand und mein Wohlfühlempfinden.

Eine Homepage, Website, die dynamischen Content anbietet wie hier das CMS WordPress hat eine Datenbank, deren Aufgabe das Sammeln und Horten ist.

Neben der Datenbank habe ich gleich nach sogenannten “toten Links” gesucht. Mal verlinkt man hier mal da und nach gut einem Jahr gibt es viele dieser Internetadressen aber gar nicht mehr. Und immer wieder finde ich Kommentare mit Firmennamen als Namen, da ich dies als gewerbliche Einträge betrachte rückte ich auch diesen zu Leibe .

Dort mal ein Plugin ausprobiert, das eine eigene Tabelle in der Datenbank anlegte, den Counter mal installiert und ständig genutzt. Spamkommentare und sonstiges der diversen Abwehrmechanismen, die so jeder braucht.

Die Datenbank wird immer voller und voller und jedes Backup hat mehr bites&bytes als nötig auf einmal.

Datenbank ausputzen

WordPress selbst macht 10 Tabellen in der Datenbank, die heißen:

1. wp_categories
2. wp_comments
3. wp_link2cat
4. wp_links
5. wp_options
6. wp_post2cat
7. wp_postmeta
8. wp_posts
9. wp_usermeta
10. wp_users

Ob da jetzt immer ein wp_ voran steht, oder ein anderes Kürzel ist ja bei Installation Deine Entscheidung gewesen.

Vorher ein Datenbank Backup machen

Ich nutze PHP MyAdmin. Egal welches Programm, Tool Du nutzt, bevor man in der Datenbank etwas ändert und sei es nur ein Koma, sollte man sich selber zuliebe ein Datenbankbackup machen!

Jetzt erzähle ich wie ich ausputzte. Gibt sicher genug andere Möglichkeiten, doch ich bin immer sehr vorsichtig. Schon oft genug hat sich wer aus dem Adminbereich ausgesperrt, weil die Plugins nicht deaktiviert wurden!

Plugins deaktivieren

Ich mag ja auch statistische Plugins wie WP Short Stat oder User online oder Feedleser, das Spam Karma 2 etc. entrümpeln und ausputzen.

Daher hatte ich alle Plugins deaktiviert.

Tabellen einfach gelöscht

Ich habe mir dann die Tabelle eines der Plugins geöffnet. Dazu muss man nur auf der linken Seite in PHP MyAdmin auf das kleine Bildchen klicken. Rechts oben findet man den Button “Drop”.

Bevor ich den “Drop” anklicke kontrolliere ich einige Male ganz genau lesend, welche Tabelle ich denn da wirklich offen habe. Gelöscht ist gelöscht!

Da die Plugins, die eine Tabelle in der Datenbank benötigen, die zu 99,9999% selber anlegen, kann man deren Tabellen einfach löschen, weil das Plugin beim neuerlichen Aktivieren diese Tabelle wieder erstellt.

Gut, man verliert den letzten Besucherrekord, man sieht nicht mehr wieviele Tausende Leut das letzte Jahr im Blog waren. Doch ganz ehrlich, man weiß doch um diese Ego Tripps und mag man die für die Nachwelt aufheben, kann man ja vorher einen Screenshot von diesen highlights machen.

Erst, wenn ich mir sehr sicher bin, was ich denn da löschen mag, klicke ich auf den Drop Button und dann werde ich nochmals gefragt, ob ich dies auch wirklich mag.

Sag ich da ja, wird gelöscht. Gnadenlos!

Datenbank optimieren

So löschte ich die Tabellen jedes Plugins und dann am Ende klickte ich Links ganz oben auf den Namen der Datenbank.
Rechts erscheint jetzt eine lange Liste und unterhalb kann man mit einem Klick alle diese Tabellen anhaken. In dem Auswahlmenü daneben, wählte ich dann “Tabellen optimieren”.

Mag sein, nicht wirklich nötig, aber ich denk mir immer, beutle ich die Datenbank ein bisschen, dann freut sie sich , wenn sie wieder geschlichtet wird.:zwinker:

Plugins aktivieren

PHP MyAdmin ordnungsgemäß geschlossen und jedes Plugin wieder aktiviert. Und schon kann die Datenbank frisch und ohne nötigen Balast wieder die neuen Besucherrekorde etc. aufnehmen. Bis zum nächsten Frühjahrsputz.

Links überprüft

Man linkt mal hierhin in einem Beitrag mal da hin. Irgendwann stimmen diese Links nicht mehr und führen ins Nirwana. Gerade in Blogs werden die Permalinkstrukturen oft gewechselt und selten denkt der Blogbesitzer daran, dass dies ja Auswirkungen hat. Noch seltener wird die htaccess für eine ordnungsgemäße Weiterleitung zur neuen URL genutzt. Dies ergibt dann tote Links. Hat eine Domain viele tote Links, dann ist dies nicht sehr gut. Sie wirkt für die Besucher und die Suchmaschine ungepflegt.

Es gibt jede Menge Tools, die das Ausfindigmachen von so toten Links erleichtern. Allerdings haben diese Tools auch stolze Preise. Soweit es mir möglich war entfernte ich tote Links und in diesem Arbeitschritt auch gleich die …

besonderen gewerblichen Kommentare

Ich nutze hier kein rel external nofollow. Dies wird in Kreisen meiner SEO Kollegen erkannt, da viele Browsererweiterungen nutzen, die das anzeigen. Was gibt es da nichts Schöneres als sich schnell einen guten Backlink zu holen.

Nun ich habe ja nichts dagegen. Wenn der Kommentar sinnvoll ist und der Username ein Name und nicht eindeutigst ein Keyword. Bei solchen Kommentaren lösche ich jetzt einfach die URL raus so wie ich so etwas finde.

Bei texto.de bin ich fast fertig und fand alleine dort an die 60 tote Links und gut und gerne 30 gewerbliche Kommentare.

Hier auf WebDesign in de sind es sicher wesentlich mehr.

Weiterführende Links:

• Pro Back Up Information über ein Tool, mit dem man mehrere Datenbanken backupen kann, inclusive Downloadlink.
• Schritt für Schritt die Datenbank sichern in der deutschen WordPress Doku.
• Ebenfalls eine sehr genaue Anleitung auf bueltge.de.
• Artikel zum Thema mit vielen Linkverweisen aus der Backup Woche auf Wordpress-Deutschland.org.

Counter und seine Aussagen. Hits und Views und Uniques und sonst noch jede Menge englischer Wörte, lernt jeder kennen, der ganz genau wissen mag wieviele Leute auf seiner Website waren.

Da ich unendliche Neugier in mir verspüre und all dieser unterschiedlichen Zählerei auf den Grund gehen mag und außerdem manches sehr erfreuliche mich doch selber schockt. Habe ich mich für ein Experiment entschieden.

5 Counter im Vergleich

Mindestens eine Woche lang wird hier mehrfachst gezählt.

Der WP ShortStat, dann Semmelstatz 2 Ranking-hits.de sowieso und der Webalizer ist beim Server eben einfach da. Den STWC Counter habe ich seit Anbeginn und der ist auch derzeit öffentlich sichtbar.

Ich bin selber gespannt und werde garantiert in einer Woche berichten

Am Ende werde ich dann sicher ganz, ganz genau wissen, dass hier auf WebDesign de Tausende lesen und ich es bis jetzt ignorierte….:zwinker:

Oder ob Mario mit seinem privaten Blog mario-goettsche.de einfach eine tolle Hype erleb und diese spurlos an mir vorübergegangen wäre, hätte ich nicht bei Matthias dies gelesen.

Also auf in die Woche der Counter und ich hoffe nur, dass die Performance nicht darunter leidet, wenn zig Systeme zählen, aber es ist ja nur ein Experiment und nicht für die Ewigkeit.

Updates bei WordPress rufen bei manchen bereits Ärger hervor. Nicht schon wieder ist dann der Tenor einiger. Unabhängig davon, dass bei Open Source Projekten Sicherheitslücken einfach schneller gefunden werden, weil eine fast unüberschaubare Zahl an Programmierern in den Dateien sich umsieht, sind mir Updates immer noch lieber, als gravierende Sicherheitsmängel.

Dass meine eigenen Projekte bei den Updates meist die letzten auf der Liste sind, ist einfach darin begründet, dass meine Zeit beschränkt ist und die Kundenprojekte einfach vor gehen.

Was man mit so Sicherheitslücken alles anstellen kann ist hinlänglich bekannt.

Fremde können Beiträge schreiben. Jemand spaziert unerlaubt in Deinem Adminbereich herum oder man holt sich einfach ungefragt Backlinks oder gleich die ganze Website.

Vor Nachahmung warne ich jedoch, außer man weiß mehr als genau was man macht und nutzt das Erkennen einer Sicherheitslücke, um den Betroffenen zu informieren!

Da nutze ich lieber ein paar hilfreiche Tools oder /und Instant Upgrade, um so rasch als möglich ein neues Update über die Bühne zu bringen.

WebDesign-in.de und alle anderen meiner Domains müssen jedoch noch warten. Die bekommen dafür sehr bald einen neuen Server .