W3Clove

Optisch sehr ansprechend ist der Dienst W3Clove, der einfach mit der Domain oder der Sitemap.xml gefüttert wird. Falls eine Sitemap.xml vorhanden ist, sollten Sie diese unbedingt angegeben, da so wirklich alle existenten Seiten einer Domain überprüft werden. Nach kurzer Wartezeit öffnet sich eine tabellarische Übersicht mit allen Seiten und den ggf. aufgetretenen Fehlern. Details zu Fehlern oder Warnungen lassen sich über einen integrierten Link zum W3C-Validator einsehen. Über die Registerkarte “Summary of common errors” werden zusätzlich die Fehler aufgelistet, und zwar nach ihrer aufgetretenen Häufigkeit. Damit bietet das Tool zusätzlich einen wunderbaren Lerneffekt: Wiederkehrende Fehler, die Sie bei der Umsetzung der HTLM-Grammatik machen, lassen sich so aufspüren und abstellen.

WDG HTML Validator

Eine weitere Alternative ist ferner der WDG HTML Validator. Hier geben Sie einfach die URL an und aktivieren die Option “Validate entire site”. Nach kurzer Wartezeit werden schließlich die geprüften Seiten aufgelistet, wobei der Ort und die Art des Fehlers gleich mit angezeigt werden. Der Nachteil bei diesem Dienst ist allerdings das sehr puristisch gehaltene Erscheinungsbild, das nicht gerade zur Übersichtlichkeit beiträgt.

Die Ergebnisse der Validatoren sollten Sie zwar ernst nehmen, allerdings nicht überbewerten, da lediglich vordefinierte Wörterbücher abgeglichen werden.

Eine Alternative zum ebenfalls beliebten W3C Linkchecker folgt in Kürze!

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Auch Webdesigner leben nicht nur von Luft und Liebe. Insofern kommt bei allen Kundenprojekten irgendwann der Zeitpunkt, wo die investierte Arbeitszeit mit dem Auftraggeber abgerechnet werden muss. Je nachdem, was mit dem Kunden vereinbart wurde, erfolgt dies entweder zeitbasiert oder pauschaliert. Unabhängig davon, nach welcher Art Sie mit Ihren Kunden abrechnen, sollten Sie stets Wert auf eine exakte Dokumentation ihrer Arbeitszeiten legen. Bei einer Abrechnung auf Stundenbasis sollte eine detaillierte Erläuterung der angefallenen Tätigkeiten sowieso zum guten Ton gehören. Doch auch bei pauschal vergüteten Projekten lässt sich die interne Kalkulation nur überprüfen und gegebenenfalls zukünftig anpassen, wenn über die ausgeführten Tätigkeiten akribisch Buch geführt wurde.

Trotz der Vorteile, die sich aus einer gewissenhaften Erfassung und Auswertung der Arbeitszeit ergeben, wird das Thema in der Praxis eher stiefmütterlich behandelt. So wird Projektarbeitszeit häufig nur ungenau erfasst, vergessen oder steinzeitlich mit Zetteln oder in der Tabellenkalkulation organisiert.

Verständlich sind Nachlässigkeiten in diesem Punkt allemal: Die Organisation verlangt zunächst einen gewissen Mehraufwand und wird oftmals als zusätzlicher Zeitfresser wahrgenommen. Das gilt umso mehr, wenn sich die Zeiterfassung nicht einfach in alle Arbeitsabläufe integrieren lässt, und beispielsweise Auswärtstätigkeiten erst im Nachhinein manuell erfasst werden können. Hinzu kommt die Tatsache, dass die wenigsten Webdesigner echte Einzelkämpfer sind, sondern zumindest temporär die Arbeit immer wieder mal in Teamform organisiert ist, was die Abrechnung zusätzlich verkompliziert. Und schließlich werden häufig mehrere Kundenprojekte parallel bedient, was das Chaospotential bei der Zeiterfassung ebenfalls forciert .

Das alles sorgt dafür, dass die Messlatte für eine sinnvolle Zeiterfassungssoftware relativ hoch gelegt werden muss. Fassen wir einmal die wichtigsten Anforderungen zusammen:

• Selbsterklärende Bedienung ohne nennenswerten Mehraufwand
• Plattformunabhängiger Zugriff, insbesondere auch vom Handy oder Tablet-Computer um etwa Aufenthalte “vor Ort” beim Kunden, Besprechungen oder Anfahrtzeiten erfassen zu können
• Individuelle Auswahlmöglichkeit welcher Kunde, welches Projekt und welche Tätigkeit aufgezeichnet werden soll
• Teamfähigkeit, d. h. Unterstützung von mehreren Mitarbeitern
• SSL-Verschlüsselung der Kommunikation
• Ausfallsicheres Cloud-Webhosting inklusive automatischer Synchronisierung
• Auswertungen & Berichte, beispielsweise um Kunden über den Projektfortschritt informieren zu können oder für die interne Personalplanung
• Ein Export der Daten soll möglich sein, um diese bei Bedarf intern in anderen Anwendungen weiter zu verwenden.
• Schließlich soll die eingesetzte Lösung möglichst günstig sein

Schauen wir uns nun einige Anbieter, die mindestens diese Vorgaben erfüllen, etwas genauer an.

timr

timr besteht aus einer Webanwendung sowie Apps für die Plattformen Android, BlackBerry, iPhone und Windows Mobile. Die Arbeitszeiterfassung ist übersichtlich und bietet umfangreiche Berichtsfunktionen. Als Besonderheit bietet timr die Möglichkeit, ein Fahrtenbuch zu führen sowie eine optionale Positionserfassung via GPS. Die monatliche Gebühr für den ersten Nutzer liegt bei 7,95 Euro.

clockodo

clockodo ist sowohl als Webanwendung, als Desktop-Client (Windows, Mac, Linux) sowie zugehörigen Apps für die Plattformen Android und iPhone verfügbar. Alle Komponenten sind intuitiv bedienbar und auch das frische Design sorgt für eine gewisse Motivation zur konsequenten Benutzung. Die Auswertungsmöglichkeiten sind sehr mit zahlreichen Filterfunktionen sehr umfangreich und ebenfalls optisch sehr ansprechend. Der erste Nutzer kostet 5 Euro pro Monat, jeder weitere 4 Euro.

Harvest

Der Dienst setzt sich gegenüber seinen Mitbewerbern vor allem durch sehr umfangreichste Integrationsmöglichkeiten bei der Zeiterfassung ab. So stehen neben der Webanwendung und zugehörigen Apps für Android, iPhone und Windows Phone zahlreiche Add-ons etwa für Wordpress Twitter, Gmail sowie ein Java Client zur Verfügung. Zusätzlich bietet der Dienst eine integrierte Rechnungslegung, welche insbesondere für manche Freiberufler interessant sein könnte. Die Grundgebühr für einen User liegt bei 12 Dollar.

Toggl

Auch Toggl ist sowohl als Webanwendung, Desktop-Client (Windows, Mac, Linux) sowie zugehörigen Apps für die Plattformen Android und iPhone verfügbar. Das Erscheinungsbild ist modern und die Bedienung schnörkellos. Die monatlichen Kosten liegen bei 5 Dollar pro Nutzer.

Paymo

Auch hier sind die Zugriffsmöglichkeiten umfangreich: Webanwendung, Desktop-Client (Windows, Mac) inklusive zugehörigen Apps für die Plattformen Android und iPhone stehen zur Verfügung sowie Add-ons für Firefox, Chrome und Safari und für Google Apps. Als Besonderheit wird ein umfangreiches Projektmanagement (inklusive Dokumentenverwaltung und Diskussionsmöglichkeiten im Team) sowie eine integrierte Rechnungslegung angeboten. Der Dienst ist für zwei Benutzer kostenlos, wenn auf die Rechnungslegung und die Dokumentenverwaltung verzichtet werden kann. Ansonsten belaufen sich die monatlichen Kosten auf 9,99 Dollar.

Timicx

Timicx ist als reine Webanwendung konzipiert. Spezielle Apps existieren für mobile Geräte nicht, allerdings sind die Stylesheets für die Bedienung per Touchscreen optimiert. Die Bedienung ist schnörkellos und das Erscheinungsbild unaufgeregt. Das Nutzungsentgelt pro Mitarbeiter und Monat liegt bei 8,50 Euro.

TimeTac

Auch TimeTac ist rein Webbasiert. Die Bedienung macht keine Probleme und die Berichts- und Exportfunktionen sind mehr als ausreichend. Die Kosten liegen in der sinnvollen Pro-Version bei 9,99 Euro je Mitarbeiter.

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Google Infographics

Mit dem neuen Dienst Google Infographics lassen sich statische PNG-Grafiken erzeugen, die auch im kommerziellen Kontext nutzbar sind. Die inhaltliche und gestalterische Anpassung erfolgt recht einfach durch die übergebende URL. Momentan stehen drei Kategorien zur Auswahl: QR-Codes, Formeln und Icons. Am Besten schaut Ihr Euch einmal die Beispiel-Galerie an, um Euch einen Eindruck über die Anwendungsmöglichkeiten zu verschaffen.

47 spezielle Navigationsmenüs

Die Anordnung und Gestaltung der Navigationselemente ähneln sich auf vielen Websites stark. Das ist prinzipiell auch sinnvoll, da stets die Gefahr im Raum steht, unbedarfte Besucher zu überfordern und damit zu verlieren. Dass es dennoch wirklich sinnvolle Alternativen geben kann, beweist eine Zusammenfassung mit 47 außergewöhnlichen Beispielen auf Onextrapixel.

Ein iPhone 4 nur aus CSS3

Der Web Designer TjRus hat ein iPhone 4 nur mit Hilfe von CSS (nur etwa 3500 Zeilen), Javascript und jQuery erstellt. Die ganze Geschichte beinhaltet somit kein einziges Bild, selbst die Icons sind nur mit CSS gestaltet. Als besonderes Highlight funktioniert übrigens der Slider zum Entsperren, der Power Button und der Home Button. Auch andere Details sind berücksichtigt, so läuft etwa die Uhrzeit und das Datum im Sperrbildschirm korrekt mit. Tipp: Schaut Euch die Seite mal in verschiedenen Browsern an.

Cute animals made with CSS3

Dazu brauche ich nichts weiter zu schreiben, schaut es Euch die putzigen Gesellen, die ebenfalls rein auf CSS3 basieren, einfach einmal an.

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Im nachfolgenden Interview habe ich direkt bei einem der Entwickler nachgefragt, welchen Mehrwert BrowseEmAll gegenüber den etablierten Cross-Browser-Check-Diensten bietet.

Viel Spaß mit dem Interview!

1. Bitte stellen Sie sich meinen Lesern kurz vor.

Hallo, mein Name ist Daniel Herken! Ich bin in der Softwareentwicklung tätig, genauer: im Bereich der Webanwendungen. Mit der Problematik der verschiedenen Browser und Endgeräte bin ich also selbst täglich konfrontiert.

2. Was genau bieten Sie mit BrowseEmAll an?

BrowseEmAll ist eine Desktop-Anwendung zum Cross-Browser-Testen von Webseiten. Dafür bringt sie verschiedenste Browser und Emulatoren (z. B. für das IPhone) mit. Außerdem sind viele Zusatzfunktionen integriert, welche dem Entwickler die Arbeit erleichtern.

3. Nun gibt es ja bereits zahlreiche etablierte Lösungen zum Browsertesting. Welchen Mehrwert bietet Ihr Dienst für den Nutzer bzw. was haben Sie bei den bisherigen Lösungen vermisst?

Bei den bisherigen Lösungen vermisse ich vor allem die Möglichkeit, bereits in der Entwicklungsphase einer Webseite oder Webanwendung diese mit verschiedenen Browsern zu testen. Das ist meistens nur umständlich möglich und wird deshalb oft bis ans Ende des Entwicklungszykluses aufgeschoben. Die Überraschung, wenn die Webanwendung dann im Internet Explorer geöffnet wird, ist meist recht groß.

4. Warum sollte man eine Desktop-Lösung wie Ihres einem Online-Tool vorziehen?

Drei wichtige Vorteile bringt meiner Meinung nach eine Desktop Lösung mit: Zum einen habe ich damit die Möglichkeit, die Webseite direkt auf dem Entwicklungsrechner zu testen, ohne diese erst auf einem extern erreichbaren Server verfügbar zu machen. Somit lassen sich auch sicherheitskritische Anwendungen testen, ohne Passwörter an externe Dienstleister geben zu müssen. Schließlich bietet mir eine Desktoplösung mehr funktionale Möglichkeiten. In BrowseEmAll beispielsweise kann der Benutzer direkt den DOM sowie das CSS betrachten, und jene auch zwischen den einzelnen Browsern vergleichen.

5. Wie lange hat es gedauert, diesen Service umzusetzen? Welcher Aufwand war damit verbunden?

In die Anwendung sind bisher ca. 6 Monate Entwicklungszeit geflossen.

6. Wie sieht Ihr Geschäftsmodell aus? Wie wollen Sie mit BrowseEmAll Geld verdienen?

Geboren ist BrowseEmAll aus dem Gedanken heraus, einfacher Cross-Browser-Tests durchführen zu können. Da wir aber natürlich alle Rechnungen zu bezahlen haben, wird die Vollversion der Anwendung zum Kauf angeboten werden. Ich denke allerdings, dass sich die Anschaffung der Anwendung für Webdesigner und Entwickler schnell bezahlt machen wird.

7. Bieten Sie einen Testzugang an? Wenn ja, wie sieht dieser aus?

Momentan ist die Software noch in der Beta-Phase. Jeder, der möchte, kann sich gern unter www.browseemall.com/Beta anmelden und die Anwendung selbst ausprobieren. Jedes Beta-Feedback belohnen wir mit einer kostenlosen Lizenz für die Vollversion. Wenn wir die Beta-Phase hinter uns gelassen haben, wird es natürlich weiterhin eine Testversion der Software geben.

8. Welche Pläne haben Sie für die Zukunft? Wie geht es mit BrowseEmAll weiter?

Wir planen, das erste Release Anfang März fertigstellen zu können. Im Gegensatz zur aktuellen Beta-Version, werden dort alle großen Browser (Internet Explorer, FireFox, Chrome, Opera, Safari) und einige Simulatoren für mobile Geräte (IPhone, IPad, Android) enthalten sein.

Danke Herr Herken für das Interview.

Vielen Dank, es war mir ein Vergnügen.

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Wie auch immer, ich möchte mich an dieser Stelle bei allen Lesern, Kunden und Auftraggebern für das (fast) abgelaufene Jahr bedanken. Insbesondere mein Buch CSS einfach erklärt hat auch in diesem Jahr für sehr viele überaus positive Rückmeldungen gesorgt (danke nochmals für die sehr lieben und motivierenden Lesebriefe!). Da das Buch mittlerweile einige Zeit auf dem Markt ist, kenne ich auch einige Webdesigner persönlich, die mit meinem Buch tatsächlich ihre ersten Gehversuche gemacht haben. Und da in fast allen Rückmeldungen stets die Kompaktheit des Stoffs gelobt wird, werde ich das Grundkonzept meines Buches auch in Zukunft in nicht verändern.

Doch genug der Selbstreflektion - kommen wir nun zu den virtuellen Geschenken:-)

Virtuelles Geschenk Nummer 1

Auch der größte Webdesigner wird zum Jahreswechsel besinnlich bis romantisch. Tja und manch einer zupft sogar entzückend die Klampfe. Vielleicht ja so ähnlich wie Daniel Davis, der seine überwältigenden Glücksgefühle, die er dank CSS3 und HTML5 bereits hatte, in einem Song verarbeitet hat.

Virtuelles Geschenk Nummer 2

Mein zweites virtuelles Geschenk ist ein Hinweis auf ein kostenloses Icon-Set namens Peculiar, deren Piktogramme aus reinem CSS-Code erstellt wurden. Das Paket beinhaltet vor allem gängige Motive wie etwa Pfeile oder ein Feed-Symbol. Da keine Bilder verwendet werden, können HTTP-Requests eingespart werden, was vor allem für Performance-Füchse interessant ist.

CSS3 Icons

Und was ist mit Silvester?

Abschließend noch ein Tipp, falls jemand noch eine nerdige Gruß- oder Einladungskarte für Silvester sucht: Bei Code Cards gibt es handgefertigte Grußkarten, die wohl nur “Programmierer” verstehen können. Interessant dabei ist, dass auch eine “CSS Happy New Year” Variante gibt. Wobei man sich zumindestens an Silvester eigentlich gerade nicht mit dem Thema CSS beschäftigen sollte…

letterpress printed CSS card

In diesem Sinne: schöne Feiertage und einen guten Rutsch!

Euer Jens Kilgenstein

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Webdesigner stehen deshalb vor der Herausforderung, ästhetische Ansprüche und Usability-Anforderungen auch für mobile Endgeräte zu berücksichtigen. Dies setzt allerdings Kenntnisse über die Besonderheiten und Einschränkungen der Tablets und Handys voraus. Hilfreich bei einer dahingehenden Recherche sind Datenbanken, die technische Informationen wie etwa zum Browser, zur Auflösung oder zur Punktdichte liefern. Nachfolgend möchte ich Euch zwei Vertreter dieser Gattung vorstellen.

Tabletmania

Die Agentur NUISOL hat mit Tabletmania eine Website ins Leben gerufen, auf der sich die technischen Grunddaten für quasi alle bisher erschienen Tablet-Computer nachschlagen lassen. Die Datenbank enthält Informationen zum verwendeten Betriebssystem, der Display-Auflösung, dem nativen Webbrowser, der Display-Größe, der Punktdichte und der Multitouch-Fähigkeit. Die Recherche bereitet nicht nur aufgrund der ansprechenden Optik Freude, sondern auch wegen der integrierten Sortierungsfunktionen und einer Echtzeitsuche. Abgerundet wird der hervorragende Eindruck von Tabletmania durch statistische Übersichten. So lässt sich auf einem Blick erkennen, welche Bildschirmauflösungen und Betriebssystem durschnittlich am häufigsten von den Geräteherstellern verwendet wurden. Hieran lassen sich Trends und Präferenzen der Hersteller erkennen, auch wenn sie über den tatsächlichen Verbreitungsgrad nichts aussaugen.

DeviceAtlas

Der DeviceAtlas ist die weltweit größte Datenbank für mobile Endgeräte und enthält Attributinformationen für mehr als 4.500 Modelle aus aller Welt. Im Unterschied zu Tabletmania sind die Informationen allerdings nicht nur auf Tablet-Computer beschränkt, sondern auch unzählige Handys sind in der Datenbank eingetragen. Die hinterlegten Informationen zum jeweiligen Gerät sind dabei unglaublich detailliert: Abgefragt werden können etwa das Erscheinungsdatum des Gerätes, die Farbtiefe oder Einzelheiten zur Unterstützung von JavaScript oder HTML5. Durch seine Detailverliebtheit eignet sich der DeviceAtlas insbesondere zur Recherche, wenn Darstellungsprobleme mit speziell einem Tablet oder Handy auftreten.

Fazit

Sowohl Tabletmania als auch DeviceAtlas sind unverzichtbare Hilfsmittel im Jungle der mobilen Endgeräte. Der DeviceAtlas punktet vor allem mit seiner riesigen Datenbank, den detaillierten Informationen und der zweigleisigen Ausrichtung auf Handys und Tablets. Vor allem bei gerätspezifischen Darstellungsproblemen wird er insofern die Anlaufstelle der ersten Wahl sein. Tabletmania hingegen eignet sich vor allem bei grundsätzlichen Überlegungen bezüglich der Gestaltung einer Homepage für Tablets.

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de

Realisieren lässt sich dieser Wunsch mit der zusätzlichen Erweiterung FireFile. Sie ermöglicht das direkte Abspeichern von Änderungen an CSS-Dateien auf dem Server direkt aus dem Firebug heraus – und lässt damit Entwicklerträume wahr werden.

Installation

Für die Installation sind folgende vier Schritte notwendig:

1. Installieren Sie die Erweiterung FireFile im Firefox.
2. Laden Sie sich die Datei Firefile.php herunter.
3. Erstellen Sie im Root Verzeichnis Ihres Servers einen Ordner mit beliebigen Namen und laden Sie dort die Datei Firefile.php hoch. Wichtig: Die Zugriffsberechtigung für diesen Ordner muss auf den Wert “777″ gesetzt werden.
4. Rufen Sie nun Firefile.php in Ihrem Firefox-Browser auf (z. B. www.meineseite.de/firefile /firefile.php) und vergeben Sie hier einen Benutzernamen und ein Passwort.

Wenn Sie alles richtig gemacht haben, erscheint nun eine Frage, ob Sie die Domain zur Liste der freigegeben Seiten hinzufügen möchten. Bestätigen Sie die Meldung mit “OK”; die Installation ist damit abgeschlossen.

Änderungen Speichern

Sobald eine Änderung am CSS-Code im Firebug vorgenommen wurde, erscheint ein blauer Pfeil. Klicken Sie auf diesen Pfeil, versucht FireFile die Änderungen auf der serverseitigen CSS-Datei zu speichern und quittiert den Vorgang mit einer Statusmeldung. Sollte das Speichern nicht funktionieren, muss die Zugriffsberechtigung auf die CSS-Datei freigegeben werden (”666″).

Fazit

Dank FireFile lassen sich Änderungen in Firebug endlich dauerhaft speichern. Firebug mutiert dadurch zum wahrhaft ultimativen Entwicklerwerkzeug. Den Rückgriff auf klassische CSS-Editoren wird man sich dadurch in vielen Fällen sparen können.

++++ Achtung ++++

Google will ab 1. März die Nutzungsbedingungen und Datenschutzbestimmungen "anpassen".

Wehren Sie sich jetzt gegen das Geschäftsgebaren des Suchgiganten: http://www.sei-nicht-naiv.de