Webdesign Browser Test

Als Developer bzw. Entwickler wünscht man sich die Möglichkeit, Webseiten mit diversen Browsern testen zu können. Da es in der Praxis unmöglich ist, die Darstellung mit unterschiedlichen PC, Notebook, Tablet, Smartphone, diversen Betriebssystemen und verschiedenen Browsern zu testen, gibt es im Internet sehr nützliche und kostenlose Tools für diese Zwecke.

Bei diesen Systemen gibt man die Adresse der zu untersuchenden Webseite ein, wählt Betriebssystem und Browser aus. Nach wenigen Minuten erhält man die Browser-Screenshots zum Download.

Einige Beispiele:

Browsershots.org

http://browsershots.org/

Browserstack.com

http://www.browserstack.com/screenshots/

 

WEB-Design Tools für Webdesigner

Webseiten Perfomance Überprüfung

PageSpeed Insights von Google unterzieht beliebige Webseiten einer Performance Überprüfung:

https://developers.google.com/speed/pagespeed/insights

DSL Speed Test

Upload und Download Test der DSL Übertragungsgeschwindigkeit:

http://dsl-speedtest.computerbild.de/

Server Speed Test

Mit diesem Tool können Sie die Antwortzeit Ihres Servers testen:

http://www.html-world.de/tools/server.php

 

Einige Tipps zur Verwendung der Datei .htaccess

1. Verhinderung der Auflistung des Webverzeichnisses am Server:

Wird ein Unterverzeichnis einer Webseite aufgerufen und fehlt dort die Datei “index.html”, listet der Apache-Webserver in der Standardeinstellung alle Dateien des Verzeichnisses auf. Um dies zu Verhindern, hilft folgender Eintrag in der .htaccess-Datei:
Options All -Indexes

2. Auflistung des Webverzeichnisses am Server aktivieren:

Wollen Sie, umgekehrt zu Punkt 1, die Auflistung der Dateien im Webverzeichnis erzwingen (z.B.: eine Reihe von Dateien zum Download anbieten), ist folgender Eintrag in die .htaccess-Datei notwendig:
Options All +Indexes

3. Passwortschutz mit htaccess:

Bestimmte Bereiche einer Webseite können mit der Datei .htaccess nur für bestimmte Benutzer zugänglich gemacht werden.
Dazu sind die Dateien .htaccess und .htpasswd erforderlich. Sie lassen sich mit einem einfachen Texteditor als Datei htaccess.txt und htpasswd.txt erstellen und dann am Server entsprechend umbenennen.

.htaccess

hat folgenden Inhalt:
AuthType Basic AuthName “Bitte Zugangsdaten eingeben” 
AuthUserFile /[Pfad].htpasswd require valid-user

Unter Pfad ist der absolute Pfad vom Root-Verzeichnis des Servers anzugeben. Am einfachsten zu ermitteln mit einer selbst erstellten Datei phpinfo.php. Der Inhalt: <?php echo phpinfo(); ?> Diese Datei im Wurzelverzeichnis des Servers abspeichern und im Browser aufrufen. Unter “DOCUMENT_ROOT” wird der Pfad angegeben.

.htpasswd

Die Kennwörter in dieser Datei sind nicht im Klartext vorhanden. Deshalb z.B. mit einem im Web zu findenden Generator erstellen. Z.B.: www.phpbb.de/support/doku/htpasswd.php

Sicherheit Webpage

Je beliebter eine Webpage ist, desto wichtiger ist es, die Webpage abzusicherung und gegen Bedrohungen vorzubeugen.

Hier ein Sammlung von Tools, die der Sicherheit von Webpages dienen, und frei im Internet zur Verfügung stehen.

Security Site Check

http://sitecheck.sucuri.net/scanner/   Der Online-Scanner checkt Webpages auf bekannte Malware, Blacklist Status, Website Errors, nicht mehr aktueller Software und vieles mehr.

Passwortschutz mit htaccess

Bestimmte Bereiche einer Webseite können mit der Datei .htaccess nur für bestimmte Benutzer zugänglich gemacht werden.

Dazu sind die Dateien .htaccess und .htpasswd erforderlich. Sie lassen sich mit einem einfachen Texteditor als Datei htaccess.txt und htpasswd.txt erstellen und dann am Server entsprechend umbenennen.

.htaccess

hat folgenden Inhalt:
AuthType Basic
AuthName “Bitte Zugangsdaten eingeben”
AuthUserFile /[Pfad].htpasswd
require valid-user

Unter Pfad ist der absolute Pfad vom Root-Verzeichnis des Servers anzugeben. Am einfachsten zu ermitteln mit einer selbst erstellten Datei phpinfo.php. Der Inhalt:
<?php echo phpinfo(); ?>
Diese Datei im Wurzelverzeichnis des Servers abspeichern und im Browser aufrufen. Unter “DOCUMENT_ROOT” wird der Pfad angegeben.

.htpasswd

Die Kennwörter in dieser Datei sind nicht im Klartext vorhanden. Deshalb z.B. mit einem im Web zu findenden Generator erstellen. Z.B.: www.phpbb.de/support/doku/htpasswd.php

 

Websites mit verschiedenen Auflösungen und Endgeräten testen

Für Entwickler: Möglichkeiten zum Testen neuer Websites für verschiedene Endgeräte und Auflösungen.

Sreenfly – ein Onlinetool zum Test von Websites auf verschiedenen Viewports. Es werden diverse Endgeräte, von Smartphones bis Desktop PC’s  simuliert.

http://quirktools.com/screenfly/

Responsive Design Tester – gleichzeitige, parallete Darstellung von Websites mit verschieden Viewports.

http://mattkersley.com/responsive/

Responsive Test – Onlinetest zur Darstellung auf Desktop, Tablet oder Smartphone

http://responsivetest.net/

Responsive Design Viewer – Test von Internetseiten mit verschiedenen Endgeräten. URL eingeben, Endgerät auswählen und die Webseite wird wie in der Realität angezeigt.

http://www.active-value.de/responsive-design-viewer/

Farbgestaltung, Hintergründe – Werkzeuge für Webentwickler

http://kuler.adobe.com: Die richtige Farbgestaltung

http://bgpatterns.com: Hintergründe zaubern

www.colorblender.com: passende Farbmuster

www.stripegenerator.com: Hintergrundbilder erstellen (mit Verlauf od. Streifen)

www.wellstyled.com/tools/colorscheme2/index-en.html: Farbpalette zusammenstellen

www.colorschemer.com/online.html: Farben zusammenstellen

http://www.colorschemer.com/colorpix_info.php: Farbpalette

www.easyrgb.com/harmonies.php: Harmonische Palette anlegen

http://visibone.com/colorlab: Farbkombinationen testen

www.colormix.com: Farbtöne aus Pixelmustern erstellen

www.kevinfreitas.net: Firefox Extension, Farbwert aufpicken

www.colorschemedesigner.com: Siehe Internet Magazin 11/09 S52

www.jrm.cc/color-palette-generator: Siehe Internet Magazin 11/09 S53

www.colorzilla.com: Firefox Erweiterung, Farbe aufpicken

www.colr.org: Über „load your own“ Bild hochladen

www.imgr.co: Ebenfalls zum Hochladen von Bildern

http://addons.mozilla.org/de/firefox/addon/colorzilla: Addon für Firefox (Farbwert)

www.artviper.net/website-tools/colorfinder.php: Meistverwendete Farben aufspüren

www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html:
Kontrast von Hintergrund und Schriftfarbe testen