In Zeiten von NSA Vollüberwachung, BND Zusammenarbeit, „full take“s und weit mehr unfassbarem Bockmist etlicher Geheimdienste und Regierungen, muss man sich über Datenschutz und Verschlüsselung langsam mehr Gedanken machen. Ich danke jedem Entwickler, der den Nutzern dabei hilft, diese zwei wichtigen Ziele zu erreichen.

Also preise ich hier mal die Chrome Erweiterung BlockPRISM deutscher Studenten des Hasso Plattner Instituts und eines Studenten der Stanford University an. Diese Erweiterung verpasst dem Facebook Chat eine PGP Verschlüsselung und macht sie somit unlesbar für alle Fremden „Zuschauer“.

blockprism-facebook-verschlüsselung-chrome-erweiterung-passwordDazu müssen beide Chatpartner das Plugin installieren, sich damit bei Facebook anmelden und ein komplexes Passwort eingeben, mit dem die Verschlüsselung erfolgen soll. An dieser Stelle ist ein wirklich komplexes Passwort sinnvoll. Wichtig aber: merkt euch das Passwort! Ihr müsst an allen Geräten, auf denen ihr die Chats verschlüsseln wollt, das gleiche Passwort eingeben.

Und schon läuft die Verschlüsselung unsichtbar im Hintergrund. Ist das Plugin installiert und aktiv sieht man nur den normalen Text. Deaktiviert man aber die Erweiterung, sieht man nur unlesbaren Text.
blockprism-facebook-verschlüsselung-chrome-erweiterung-sichtbar blockprism-facebook-verschlüsselung-chrome-erweiterung-verschlüsselt

Das rockt und ist ziemlich sicher. Nun kann man also auch privatere Informationen über den Chat austauschen, ohne sich Gedanken machen zu müssen.

Als Hobby-Webentwickler und fanatischer Batch Scripter musste das Thema Batch HTML Reports ja irgendwann mal kommen. Heißt: Batch führt irgendwelche Aktionen aus und visualisiert das Ergebnis in einer schönen HTML Datei.

Eigentlich straight forward: in der Batch Datei wird ein echo mit HTML Code in eine .html Datei umgeleitet, fertig. Naja, ganz so einfach ist es leider nicht.
Hier ein Beispiel:

Ergebnis:
html-berichte-mit-batch-problem-einfaches-beispiel

Der Batch echo Befehl würde an eckigen Klammern und Slashes abstürzen, daher muss jeglicher HTML Code in Anführungsstrichen eingebettet werden. Leider schreibt Batch diese Anführungszeichen mit in das Dokument.
Nun gibt es sicherlich einige Lösungsansätze:

1. (nicht empfohlen) Alle Sonderzeichen escapen und Anführungszeichen weglassen:

Alle Sonderzeichen, die den Batch echo Befehl in die Knie zwingen würden, werden mit dem Escapezeichen ^ neutralisiert. Funktioniert, but… seriously? Ich hoffe aber niemand denkt ernsthaft darüber nach diese Technik zu verwenden…

2. (nicht empfohlen) HTML Code nicht über das Batch sondern über eine externe Komponente schreiben:
Wenn Batch ungern HTML schreibt könnte man auch ein externes Programm oder Script aufrufen und den gewünschten HTML String irgendwie übergeben. Klingt aber schon im Ansatz irgendwie uncool.

3. HTML mit Anführungszeichen schreiben und diese dann rausfiltern:
Also so mache ich das zumindest!
Der HTML Code wird wie im Beispiel oben geschrieben und danach nutze ich mein Zeichen-suchen-und-ersetzen-vbs-Script aus dem letzten Artikel und filtere die Anführungszeichen raus.
Batch:

deleteChar.vbs:

Resultat:
html-berichte-mit-batch-vbs-workaround


Ping Test HTML Report

Nun kann ich also HTML schreiben. Der Weg zum schönen HTML Bericht ist aber noch nicht geschafft. Ich empfehle einen gewissen Projekt-Aufbau um bessere HTML Berichte zu erstellen.
Vorschlag:

  • vorlage.html – enthält bereits ein halbes HTML Gerüst
  • style.css – für das Design
  • script.bat – das Script
  • deleteChar.vbs – siehe oben, löscht die Anführungszeichen
  • temp.html – temporär für die Batch
  • report.html – fertiger Report nachdem deleteChar.vbs die temp.html bearbeitet hat

Batch:

vorlage.html:

Ergebnis:
html-berichte-mit-batch-fertiger-bericht

Download

Ping HTML Report Beispiel herunterladen
html-berichte-mit-batch-aufbau

Hier ein weiteres Beispiel, wie ich mit einigen zusätzlichen Programmierungen (Download gibts auf Anfrage) die Konnektivität von Arbeitsrechnern überprüfe und anzeigen lasse:
html-bericht-mit-batch-computer-status-report

Progress Bars, also Fortschrittsanzeigen, sind eine gute Möglichkeit zur Visualisierung von Fortschritten. Eine datumsbasierte Progress Bar, die den Fortschritt von einem Startdatum zum Enddatum visualisiert, habe ich auf meiner neuen Studienseite eingebaut.

datumsbasierte-fortschrittsanzeige-mit-jquery-screen

Demo

DEMO

HTML:

HTML spielt also nur den Platzhalter für die wichtigen Elemente. Wichtig ist nur, dass der max Wert der Progress Bar auf den gewünschten Wert gesetzt ist. Dieser wird von Javascript ausgelesen.

Apropos, Javascript:

Okay, let’s go through:
In den Zeilen 20 und 21 müsst ihr die ID der Progress Bar und das gewünschte Start- und Enddatum eintragen; der Rest läuft dann von selbst.
Die Zeilen 22 bis 26 errechnen ein paar initiale Werte, die später noch gebraucht werden.
In der Funktion calculateProgressedPercent() wird der Prozentwert der bereits verstrichenen Zeit angezeigt. Dieser wird auch direkt als Wert der Progress Bar in Inhalt des Overlays gesetzt und dann zurückgegeben. Funktionalität und Anzeige könnte man hier natürlich trennen.
Die Zeile 31 bestimmt übrigens am Ende die Anzahl der Nachkommastellen des Prozentwertes. An der Stelle * 10000) / 10000 könnt ihr also Nullen entfernen oder anhängen um den Prozentwert zu verändern.
Zeile 37 führt diese Funktion beim Seitenaufruf ein Mal initial auf.
Zeile 40 bis 45 setzen einen Timer, der alle 5 Sekunden diese Funktion aufruft; bis der Prozentwert den max Wert der Progress Bar überschreitet.
Die 2 Datumsfunktionen errechnen die Anzahl der Tage von 2 Szenarien: Startdatum bis heute und heute bis Enddatum.
Und die letzten 3 Zeilen schreiben diese Tagesanzahl einfach nur zur Übersicht auf die Seite.

Sicherlich lassen sich die Berechnungen und der Code an sich noch optimieren. Aber die Sache läuft ganz rund.

In eigener Sache möchte ich heute kurz den Dienst servercheck24.de unter die Lupe nehmen. Der Dienst ist einer von vielen kostenpflichtigen Server Monitoring Diensten, kann sich in dem Preissegment aber sehen lassen. Im Gegensatz zu vielen Server Monitoring Anbietern hat Servercheck24 gleich 3 Preismodelle und ist somit für viele Anwendungsbereiche geeignet. Es gibt zwar leider kein kostenloses Angebot (was ich definitiv empfehlen würde), eine 14-tägige Testphase kann jedoch einen guten Einblick in die Features geben.
Ich habe mir das mal angesehen.

Coolerweise haben die Betreiber von servercheck24.de direkt nach der Veröffentlichung meines Tests einige angemerkte Stellen ausgebessert und mich informiert. Entsprechende Stellen habe ich im Beitrag angepasst.

Die Registrierung ist schnell gemacht und unkompliziert. Nach der Registrierung bekommt man direkt einen Überblick über die Features. Der „Server“ Menüpunkt ist natürlich die erste Station; hier kann man seinen ersten Server erstellen, bzw. dessen Überwachung. Die Eingabe einer URL ist erforderlich und ein Name wird vergeben.

Vorher: Die Eingabe kann anfangs knifflig werden. Meine ersten Versuche mit http:// am Anfang schlugen direkt fehl, egal welche Kombinationen ich probierte. Viel Hilfe gibt es beim Eingeben auch nicht, so eine Art Formatbeschreibung wie www.[name].[tld] hätte mir ja gereicht. Die URL Eingabe soll nämlich ohne Protokoll sein, nur www. am Anfang. Etwas ungewöhnlich aber verständlich, denn erst im nächsten Schritt wird erst das Protokoll gewählt, dass überwacht werden soll.
Nachher: Die Eingabe der URL sollte problemloser verlaufen, seit dem nun ein kleiner Hinweis unter dem Eingabefeld auf das Format hinweist.
serverueberwachung-uptimechecks-und-mehr-servercheck24-url-neu

serverueberwachung-uptimechecks-und-mehr-servercheck24-overview serverueberwachung-uptimechecks-und-mehr-servercheck24-protocols

Die Protokolle, die man überwachen kann, sind zahlreich. HTTP(S), SSH, FTP, DNS, Mailsprotokolle, TCP, PING, MYSQL, Domains, da ist alles wichtige mit dabei. Von normalen HTTP Abfragen bis hin zu stark modifizierten HTTPS Requests mit Suchbegriffen, Login Credentials, User-Agents, modifiziertem Header und POST Parametern ist da alles einstellbar. Die Möglichkeiten reichen also auch tief in interne, abgesicherte Webbereiche.

Vorher: Traurig: sowohl bei der Eingabe als auch in der Übersicht wird das Passwort der Login Credentials als Klartext dargestellt. C’mon, r’lly? Wenn ein type="password" im Eingabefeld schon zu viel Code ist, möchte ich nicht wissen wie die Passwörter in der Datenbank gespeichert sind. Unbedingt ändern!
Nachher: Die Passwörter werden nun maskiert angezeigt, so wie es sich gehört. Die erhöhte Sicherheit wird hoffentlich in der gesamten Programmierung des Dienstes so angestrebt wie bei den Textfeldern.
serverueberwachung-uptimechecks-und-mehr-servercheck24-password1-neu serverueberwachung-uptimechecks-und-mehr-servercheck24-password2-neu

Nach der Eingabe erscheint die Übersicht der Einstellungen, mit den Einstellungen für die Benachrichtigung und den Kontakten, die Benachrichtigungen erhalten sollen. Benachrichtigungen können entweder als E-Mail oder als SMS rausgehen, abhängig vom Status der Webseite. Eine Pager Nachricht ist ebenfalls möglich, sollte jemand noch einen Pager haben.
serverueberwachung-uptimechecks-und-mehr-servercheck24-new-http-pro-server serverueberwachung-uptimechecks-und-mehr-servercheck24-server-overview

Vorher: Leider scheinen SMS bisher nur in den USA möglich zu sein, deutsche Mobilfunkbetreiber sucht man vergeblich.
Nachher: Zugegeben, an dieser Stelle habe ich vermutlich nicht aufmerksam genug geschaut. Die Landesvorwahl +49 für Deutschland ist vorhanden und enthält auch die größeren hiesigen Netzbetreiber. Neu ist jetzt, dass sowohl beim Erstellen eines Accounts als auch beim Bearbeiten von Kontakteinstellungen automatisch die passende Landesvorwahl ausgewählt wird. Ich musste also +49 nicht einmal auswählen; das geschieht jetzt automatisch. Es funktioniert alles problemlos, TOP!
serverueberwachung-uptimechecks-und-mehr-servercheck24-sms serverueberwachung-uptimechecks-und-mehr-servercheck24-sms2

Weitere Protokolle und Server sind schnell erstellt und die eigene Weblandschaft in wenigen Minuten zur Überwachung konfiguriert. Dabei werden alle Protokolle eines Servers in eine „Gruppierung“ gesteckt. Ein neuer Server ist mit seinen Protokollen eine neue Gruppe. Mehrere logisch zusammengehörige Server zu einer Gruppe oder Art Kategorie zusammenzufügen geht leider nicht.
Für die Übersicht aller Server gibt es sowohl eine ausführliche und eine kurze Version.
serverueberwachung-uptimechecks-und-mehr-servercheck24-short-overview serverueberwachung-uptimechecks-und-mehr-servercheck24-detailed-overview

Zwei weitere nette Features sind der grafische Verlauf und der Auswertungsversand.
Ersteres zeigt den Status eines Servers in einem bestimmten Zeitraum grafisch an. Leider lassen sich hier nicht mehrere Protokolle oder Server in eine Grafik packen. Die Daten lassen sich in typische Dateiformate exportieren. Und die Auswertungen sind konfigurierbare regelmäßige Reports per E-Mail.
serverueberwachung-uptimechecks-und-mehr-servercheck24-daily-report serverueberwachung-uptimechecks-und-mehr-servercheck24-grafic-status

Fazit? Servercheck24 bietet ein recht angenehmes Preis-Leistungs-Verhältnis. Wer nicht viele Seiten zu überwachen hat kann mit 5€/Monat schon alle Features nutzen, mit einem 10 Minuten Intervall allerdings. Ich habe mal nach der Konkurrenz gesehen und nur sehr wenige (und auch wenig brauchbare) kostenlose Angebote, dafür aber auch viele recht teure Angebote gefunden.

Vorher: Wenn Servercheck24 jetzt noch die paar Kinderkrankheiten (ich glaube der Dienst ist erst vor ca 2, 3 Jahren online gegangen) ausbessern kann, sehe ich große Chancen in dem Markt.
Nachher: Innerhalb von 1 Tag haben die Entwickler einige Punkte ausgebessert und ich habe das Gefühl, dass in diesen Dienst noch sehr viel Energie fließen wird. Hut ab, Daumen hoch, go for it!

Interessiert? Einfach für einen Tarif registrieren und den Testzeitraum nutzen.

jquery-animationen-zeitversetzt-mit-callback-delay-queue

jQuery Animationen sind einfach: animation(), fadeToggle() und slideToggle() erledigen die Arbeit schnell und unkompliziert. Es kann jedoch kompliziert werden, wenn man Animationen nacheinander abarbeiten möchte.
Generell werden Animationen „gleichzeitig“ ausgeführt, außer sie betreffen das selbe Objekt.
Verschiedene Objekte zeitverzögert zu animieren kann schon schwierig werden.

Ausgangssituation

2 Objekte mit je einer Animation:

2 Objekte, die gleichzeitig animiert werden obwohl der Code dies nicht vermuten lässt.

Demo

DEMO

Es gibt verschiedene Herangehensweisen für dieses Problem.

Lösung? callback()!

callback()‘, oder auch complete() in der jQuery API Doc (Beispiel animate()), ist eine Funktion, die beim erfolgreichen Beenden einer Animation ausgeführt wird.
Ein Beispiel:

In der callback() Funktion können weitere Befehle folgen, die nach der beendeten Animation ausgeführt werden sollen.

Demo

DEMO

Alternative? delay()!

Den meisten jQuery Animationen kann man durch die Verwendung von delay() eine Pause anhängen. Die folgenden Befehle beziehen sich somit auf das selbe Objekt, sind aber zeitlich verzögert. Diese Methode ist nur auf Animationen anwendbar, die die Browser ‚effects queue‘ (auch ‚fx-queue‘ genannt) verwenden.

Die verschiedenen Animationen sind nun zeitlich verzögert.

Demo

http://public.hannes-schurig.de/LocationMapDemo/map.php
Nach einem objectA.delay() Befehle folgen zu lassen, die auf ein anderes Objekt wirken sollen, geht meines Wissens nach nicht. Zwei Objekte zeitlich verzögert animieren geht damit also nicht. Dafür hilft aber die nächste Lösung!

Nun kommt es in jQuery jedoch oft vor, dass Befehle keine Animationen sind und somit weder ein callback besitzen noch ein delay verstehen. Solche Funktionen sind beispielsweise html(), append(), css(), addClass() oder removeClass(). Mit der folgenden Lösung lassen sich auch solche Funktionen zeitlich verzögert abarbeiten!

Lösung? queue()!

Die Funktion queue() erstellt eine ‚effects queue‘ Befehlskette, die beliebig gefüllt und dann abgearbeitet werden kann. Wie oben erklärt kann man das Ausführen von Befehlen innerhalb einer ‚effects queue‘ durch Anwendung von delay() zeitlich verzögern. queue().delay() ermöglicht es damit beliebige Befehle zeitlich verzögert auszuführen.

Der grobe Aufbau sieht wie folgt aus:

Das Finale!

Hier das obrige Beispiel leicht angepasst: erst verändert sich Block #a in mehreren Schritten und erst danach Block #b:

Demo

DEMO
BHAM! Zeitlich verzögerte Verarbeitung von beliebigen Befehlen von mehreren Objekten!

Update:
Mit der Javascript Funktion setTimeout() lassen sich auch extrem easy beliebige Elemente/Befehle zeitversetzt ausführen:

Schande auf mein Haupt, dass ich das damals nicht schon kannte.

Die queue() Funktion kann man dabei direkt von dem Element aufrufen, dass animiert oder verändert werden soll, und innerhalb der queue() dann $(this) benutzen. Alternativ kann man auch ein globaleres Objekt benutzen, zum Beispiel $(window).queue().

Damit sollte ich das Thema zeitverzögerte Animationen zu genüge beleuchtet haben. Bei meinem letzten Webprojekt spielte dieses Thema eine große Rolle und ich musste viel rumprobieren und testen bis ich die richtigen Einsatzgebiete und teils seltsamen Verhalten dieser Funktionen erkannt hatte. Wer sich also mit dem Thema auskennt, Fehler findet, weitere Möglichkeiten kennt, immer her damit!

Vor langer Zeit suchte ich eine Möglichkeit coole Locations und besuchenswerte Orte gut sichtbar „anpinnen“ zu können, auf einer großen Karte wie der Google Map. Warum das nicht selber entwickeln? 😉

Mit der „Location Map“ habe ich versucht diesen Gedanken umzusetzen. Auf der Google Map kann man mit Hilfe eines Formulars neue Locations mit einem Icon anpinnen, und noch eine Beschreibung hinzufügen. Die Beschreibung kann bequem mit einem Editor bearbeitet werden. Ebenso lassen sich die Einträge natürlich nachträglich bearbeiten und löschen.
location-map-interaktive-google-maps-webapplication-banner
location-map-interaktive-google-maps-webapplication-tooltip location-map-interaktive-google-maps-webapplication-editform

Der größte Knackpunkt des Projekts bestand darin die in der Datenbank gespeicherten Locations dynamisch auf die Google Map laden zu lassen und jeder Location ein eigenes Icon, ein Klick Event und ein Info Window zu geben. Diesen schweren Part würde ich hier kurz veröffentlichen. Ich gehe davon aus, dass ihr schon mit der Google Map hantiert und sie am besten auch schon lauffähig realisiert habt. Hier geht es jetzt nur noch im die Location Marker mit Icon, Klick Event und Info Box.

Hinweis: Dieser Code und die folgenden Anmerkungen beziehen sich auf eine veraltete Version der Location Map, zeigen aber die Grundfunktionalität der Map mit den Locations. Der Aufbau zeigt also eine Art Minimalgerüst. Für weitere Features bitte den Code aus der Demo Page (siehe unten) benutzen.
Code

map.php:

In der Webseite wird beim onload die initialize Funktion aufgerufen, in der die Google Map initialisiert und zusammengebastelt wird.

locations-main.js:

Anmerkungen:
Wie in Zeile 1 schon gesehen, ist der Code nach dem aktuelleren Google Maps API v3 Standard programmiert. Irgendwann während meiner Entwicklung stellte Google von v2 auf v3 um und ich programmierte ebenso mein halbes Projekt um, man möchte ja mit dem Fortschritt mithalten.
In den Zeilen 4-10 wird die Google Map im div initialisiert, das Zentrum auf den Berlin Alexanderplatz gesetzt, Zoom und MapType gesetzt.
Nun werden in 12-19 die Locations mit der locationmgr.php aus der Datenbank geladen und für Javascript aufbereitet. Die Daten werden entgegengenommen und eine Schleife durchläuft nun in Zeile 19 jeden Locationdatensatz. setMarkers wird aufgerufen und erzeugt in den Zeilen 38-44 ein Marker Objekt. Dieses wird mit map: map direkt auf die Google Map gepinnt.
Hier erfolgt noch der Aufruf der generateInfoWindowHtml. Diese bastelt ein optisch etwas angepasstes InfoWindow mit der Beschreibung und gibt das komplette HTML Paket zurück an das Marker Objekt, welches daraus das Info Window baut.
In den Zeilen 46-52 wird ein Listener auf das soeben erstellte Marker Objekt gelegt.
Diese 3 Schritte – Marker erstellen, InfoWindow generieren, Listener zuweisen – werden für jede Location ausgeführt und in die Map integriert.


Demo

http://public.hannes-schurig.de/LocationMapDemo/map.php
Demo Version: 0.16


Changelog

Code anzeigenDen Code könnt ihr bequem mit den Links/Rechts Pfeiltasten horizontal bewegen.

Changelog (08.04.2013)

  • v0.1: Event Map zeigt Events an, Events können erstellt und gelöscht werden, 2 Icons stehen zur Verfügung
  • v0.2: Events lassen sich anklicken, ein kleines Popup mit Zusatzinformationen erscheint, Eingabe der Zusatzinformationen bei neuen Events möglich
  • v0.3: Statt getrennter X und Y Koordinaten kann jetzt ein Koordinatenstring, der sich aus Google Maps extrahieren lässt, eingeben
  • v0.4: Statische Icons in eine Datenbank übertragen, die möglichen Icons werden jetzt direkt beim Erstellen neuer Events angezeigt und können somit ausgewählt werden
  • v0.5: Infofenster für das Koordinatentextfeld, komplette Umbenennung in Location Map inklusive aller Codeverweise
  • v0.6: Locations löschen jetzt via selektieren, mit Suchfunktion
  • v0.7: etliche Designverbesserungen und Fixes
  • v0.8: komplette Umprogrammierung: Umstieg von Maps API v2 auf Maps API v3
  • v0.9: komplette Umprogrammierung: Umstieg von HTML Forms auf AJAX
  • v0.10: kleine Informationsfenster als Feedback für den User am unteren Bildschirmrand
  • v0.11: 2 Events mit gleichem Namen verboten, doppelte Überprüfung
  • v0.12: Edititeren von bestehenden Locations
  • v0.12.1: Löschen aus dem Update Dialog
  • v0.12.2: Umstrukturierung des HTML Codes, neuer Formularaufbau
  • v0.13: Dialog Manager kürzt den Code um ca 20%
  • v0.14: verbesserte Unterstützung von Auflösungen kleiner als 1280px
  • v0.14.1: Fehler im Dialog Manager, wenn der zu öffnende Dialog schon geöffnet ist, behoben
  • v0.15: für die Veröffentlichung vorbereitet: Read-Only-Modus, Read-Only-Designset
  • v0.15.1: neuer HTML Head, Meta Tags, see/ref ergänzt, CSSDOC DocBlock erweitert
  • v0.16: Maus-Features: Linksklick auf die Map -> fügt automatisch die Koordinaten des Klicks in das „Neue Location“ Koordinatenfeld ein, Rechtsklick auf die Map -> Management Menü (noch ungenutzt)

To-Do:
Rechte- & Usermanagement
Zuklappen der rechten Seite zulassen
Größen der Map und Formulare dynamisch ändern
Mehr Icons
fehlerhaften Login optisch hervorheben
Unterstützung für mobile Geräte und kleinere Auflösungen einbauen/verbessern


Download

Ich habe schon ein Paket fertig geschnürt, dass die komplette Entwicklung in wenigen Minuten auf dem eigenen Server einrichten lässt, werde das aber erstmal nur auf Anfrage herausgeben. Die Entwicklung hat noch einige Macken und vermisst noch viele Features. Vorerst werde ich selber an dem Projekt weiterarbeiten und es dann in einem reiferen Zustand veröffentlichen.

Das Ziel sind Screenshots von Webseiten, mit einem Batch Script automatisiert und kontrolliert. Keep it simple & stupid.

Die Wichtigste ist natürlich das Anfertigen der Screenshots. Das ließe sich vermutlich auch mit pure Batch erledigen, ich fand allerdings folgende Utilities besonders einfach und optimal für diesen Zweck: CutyCapt und IECapt. Beide Tools bestehen nur aus einer kleinen .exe Datei und sind kommandozeilenbasiert, optimal für eine Batch Benutzung.
CutyCapt fertigt Website Screenshots mit der WebKit Engine (Chrome und Opera nutzen diese Engine) an, IECapt nutzt die Engine des Internet Explorers.

Die Anwendung ist relativ einfach, über die CMD. Ein Beispiel:

Wenn die Webseite besonders lang ist so wird sie komplett aufgenommen. Die Parameter steuern das Verhalten der Engine, beim IE gibt es nicht ganz so viele Möglichkeiten.

Das kann man jetzt in einem netten Script verpacken und schon lassen sich beliebige Webseiten mit einem Doppelklick fotografieren. Versehen mit Logging, Mailer und ein paar Kleinigkeiten, fertig.

Hier mein Script, welches 2 Screenshots der Fritz Box aufnimmt, in einem Unterordner speichert, eine Mail schickt und alles loggt, so als Muster:

Code anzeigenDen Code könnt ihr bequem mit den Links/Rechts Pfeiltasten horizontal bewegen.

Anmerkungen dazu:
Keine Unterordner? Löscht Zeile 49-54 und passt den „–out“ Parameter in Zeile 60 und 62 an. Wenn doch, passt Zeile 28 an.
IECapt statt CutyCapt? In Zeile 38 den Dateinamen anpassen.
Der Mailer muss natürlich angepasst werden. Habt ihr einen PHP Webmailer? Dann passt die Zeilen 36, 68 und 78 an. Wenn ihr keinen Mailer habt reicht es die Zeile 35 auf 0 zu setzen.
Ansonsten müsste das funktionieren.

Alternativ zu diesem Script gibt es auch Browser Plugins mit denen Website Screenshots erstellt werden können. Awesome Screenshot wäre ein Google Chrome Plugin für diesen Zweck. Die Extension fotografiert einen ausgewählten Bereich, den sichtbaren Bereich oder die komplette Seite. Das Bild lässt sich bearbeiten, speichern, teilen und mehr.
Über die Automatisierung dieser Geschichte muss man sich dann aber noch Gedanken machen, das ist vermutlich etwas schwieriger.

Bugs, Anmerkungen sowie Verbesserungsvorschläge nehme ich natürlich gerne entgegen.