Auf HTML5Please.us kann man sich sehr anschaulich vor Augen führen, welche HTML5 und CSS-Techniken in welchem Browser wie funktionieren, noch besser: Es wird vorgeschlagen, ob man es schon nutzen kann, wenn ja ob man was beachten sollte oder ob man es doch lieber komplett lassen sollte. Sehr schön gemacht, mit weiterführenden Informationen und auf jeden Fall für jeden Webdesigner und Webentwickler einen Blick wert.

HTML5Please.us

Das war es dann auch schon wieder!
Euer Wishu

Wie so viele Infografiken ist auch diese leider nur auf englisch verfügbar, sodass sie hier wohl nicht jeder lesen kann, wer allerdings im Bereich Webdesign arbeitet, ist der englischen Sprache zumeist mehr oder weniger mächtig. Ich warne schon einmal vor, es ist wirklich recht viel Text, allerdings wie oben bereits erwähnt, wirklich interessant – zumindest wenn man sich dafür interessiert. Am Ende der Infografik finden sich dann noch Vorhersagen für die nächsten Jahre.

A Brief History of Web Standards

Das war es dann auch schon wieder!
Euer Wishu

(via)

Ich persönlich werde das Update im Blog wohl erst heute Abend vornehmen und bei WishuLoad bis zur nächsten Version warten. Somit wird nach nächste WishuLoad-Release wohl nur ein Release Bugfix und Skript-Update. Zum Originalbeitrag auf englisch geht es übrigens hier: http://blog.jquery.com/2011/01/31/jquery-15-released/

Damit der Klick auf diesen Link nicht unbedingt notwendig ist, hier noch die Links zu den neuen Versionen von jQuery:

• jQuery Minified (29kb Gzipped)
• jQuery Regular (207kb)

Die Versionen unterscheiden sich hierbei nur in einem Punkt. Die Minified ist lediglich so komprimiert, dass die Ladezeit optimiert wurde, lesbar ist sie dadurch allerdings nicht mehr wirklich. Die Regular-Version ist eben die, die sauber strukturiert ist, dafür aber auch zehn sieben mal so groß.

add_filter('script_loader_src', 'my_script_loader_src', 10, 2);
function my_script_loader_src($src, $handle) {
    if ($handle == "jquery")
        return "http://code.jquery.com/jquery-1.5.min.js";
    return $src;
}

Das war es dann auch schon wieder!
Euer Wishu

Zuerst dachte ich ja ich habe mich verlesen, als ich “What the Hex?” las oder dachte an einen Schreibfehler des üblichen “What the Heck?” (zu deutsch “Was zum Henker/Teufel?”). Doch es ist wirklich Hex gemeint und mit Hex ist hier Hexwert gemeint. Also dieser 6-stellige Wert mit dem wir Webdesigner unseren Seiten ihre Farben zuweisen.

Daraus hat Andrew Yang ein kleines Spiel gemacht, in welchem es darum geht den oben stehenden Hexwert einer der unten stehenden Farben zuzuweisen. Und ich muss sagen, ich weiß schon, warum ich immer Paint.NET öffne, wenn ich mal den Hexwert für eine Farbe brauche. Ich persönlich scheitere bei diesem Spiel ziemlich. Gerade mal die Variante mit 2 Farben schaffe ich einigermaßen.

Als Schwierigkeitsgrad gibt es 10 Stufen. Entweder 2-10 oder 48 für die richtigen Profis. Wer da allerdings ohne zu schummeln auf Anhieb das richtige Kästchen trifft, der hat eindeutig etwas zu viel Zeit vor dem PC oder vor allem vor der 32-Bit-Farbpalette verbracht.

Das Standard-Spiel fängt mit 6 Farben an, aus denen man die richtige wählen muss:

Wenn man falsch liegt, wird einem der Hexwert angezeigt, den die gewählte Farbe hatte und die Farbe wird entfernt. Übrig bleiben 5 Farben:

Wenn man die richtige Farbe gewählt hat, färbt sich der Hexwert in die entsprechende Farbe, alle anderen Farben verschwinden und man bekommt einen “New Game”-Button:

Auch wenn ich bei diesem Spiel in 90% der Fälle falsch liege, macht es mir trotzdem einen Riesenspaß. Aus diesem Grund wollte ich es euch einfach mal empfehlen. Ich bin mir sicher, dass es neben dem Spaß auch noch einen kleinen Lerneffekt hat.

Ich möchte mich an dieser Stelle dafür entschuldigen, dass ihr sicherlich durch diesen Tipp einige Minuten eurer wertvollen Arbeitszeit geopfert habt. Ich kann es auf jeden Fall nachvollziehen.

Das war es dann auch schon wieder!
Euer Wishu

Die Frage ist nun nur, wie lange das dauern würde. Bei einem Tag sollte man das Passwort auf jeden Fall ändern, denn so viel Ausdauer haben unsere geliebten Cracker. Bei einem Jahr wird es da schon schwieriger und man kann sich eigentlich sicher fühlen, doch es geht immer noch ein Stück besser.

Ich habe mein eigenes System hinter wichtigen Passwörtern. Ich kenne es nicht. Klingt vielleicht blöd, aber es ist sicher, denn wenn ich es nicht kenne, kann es auch niemand anderes kennen. Wie ich das mache? Ich merke mir einfach den Weg, den meine Hände auf der Tastatur zurücklegen und wann ich auf SHIFT drücken muss. Fragt nicht, warum ich es so mache, ich habe selbst keine Ahnung, wo ich das genau her habe.

Auf jeden Fall weiß ich durch die Seite howsecureismypassword.net jetzt, dass es gar nicht so falsch scheint, denn es würde wohl über eine Million Jahre dauern um es automatisiert zu knacken. Das würde sich nicht mal lohnen, wenn ich Bill Gates wäre.
Ein anderes Passwort von mir, welches ich für sicher hielt, welches nicht der Sicherheit meines wichtigen Passworts entspricht, braucht hingegen nur 4 Tage. Ein Sonderzeichen hinten dran und schon dauert es bereits 252 Tage.

Mich würde mal interessieren, wie lange man für eure Passwörter braucht. Wer dem Ganzen nicht traut, kann sich hier vergewissern, dass es keine Backdoor gibt, welche die Daten irgendwo hinsendet.

Das war es dann auch schon wieder!
Euer Wishu

Ok, manche finden es vielleicht schick, doch hier möchte ich kurz meine Meinung dazu sagen und eine Möglichkeit geben das Fade-In auszublenden.

Nun möchte ich noch einmal genau erklären, was gemeint ist.

Auf dem Bild sieht man deutlich den Unterschied. Beim Aufruf von Google.de sieht man nur noch das Logo, das Suchfeld und die Buttons. Erst nachdem man die Maus bewegt hat (Oder auch per Tab durchnavigiert) sieht man den ganzen Rest der Seite. Ich persönlich finde das eher unangenehm und habe mich deswegen nach einer Lösung umgesehen.

Der Fade-in auf Google.de lässt sich ganz einfach deaktivieren. Google bietet sogar selbst eine Möglichkeit den Fade-in zu deaktivieren. Nein ich meine dort nicht den Tipp mit dem JavaScript deaktivieren. Ich meine den zweiten Punkt – das Greasemonkey-Skript.

Google erklärt sogar für alle Browser, wie dies einzufügen ist. Wer kein Englisch kann, hier eine kurze Anleitung.

Firefox: Mit Firefox lässt sich das Skript einfach in das Add-On Greasemonkey einfügen und man sieht sofort den Unterschied.
Safari: Für Safari gibt es das so genannte GreaseKit. Ich habe damit jetzt keine Erfahrung, denke aber, dass es das gleiche wie Greasemonkey ist.
Opera: Das wird hier erklärt: How to Install User java script in Opera.
Chrome: Um es in Chrome zu integrieren muss man in den dev Channel wechseln.
Internet Explorer: Zu schlechter Letzt noch der unsägliche IE. Dafür muss man den IE7Pro installieren. Das ist in sofern schon mal schlecht, weil es nicht der IE8 ist. Dann muss man das Skript als nogooglefade.ieuser.js in C:\Program Files\IEPro\userscripts abgelegt werden. Nun muss das Skript nur noch aktiviert werden.

Schlusswort

Sicherlich ist das Fade-in von Google gewöhnungsbedürftig und Geschmackssache. Ich mag es aber nicht. Genau aus diesem Grund habe ich es deaktiviert und bin glücklich damit.

Das war es dann auch schon wieder!
Euer Wishu

Das Problem hatte ich erst wieder bei der Erstellung meines neuen Designs für den Wishu-Blog. Der RSS-Button oben im Header hat Alphatransparenzen und ist somit im IE6 mit einem grauen Hintergrund unterlegt. Ich könnte jetzt das Bild natürlich bearbeiten, sodass es den blauen Hintergrund meines Headers annimmt, doch das würde wieder zusätzliche Arbeit machen, wenn sich die Farbe dort mal ändert.

Ich könnte es ebenso in ein GIF-Bild umwandeln. Die Halbtransparenzen werden dann umgewandelt und man kann es ohne grauen Hintergrund einfügen. Doch leider werden die runden Ecken dadurch ziemlich pixelig und ausgefranst. Also fällt diese Möglichkeit auch weg.

Also bleibt nur noch die Möglichkeit dem IE6 beizubringen Alphatransparenzen auch darzustellen. Dazu gibt es mehrere Skripte, welche unter dem Begriff PNGfix bekannt sind. Ein PNGfix bringt dem IE6 mit JavaScript bei, die Alphatransparenzen darzustellen und somit die Bilder ohne Kompromisse zu rendern.

Wenn man sich also nicht mehr Arbeit machen möchte und auch verpixelte Ränder nicht ertragen kann, ist die einzige Alternative der PNGfix.

Mein Lieblingsskript ist an dieser Stelle DD_belatedPNG. Mit diesem Skript kann man leicht Klassen oder Elemente bestimmen, auf die diese Möglichkeit angewendet werden soll, somit hat es vielen Skripten etwas voraus, welche zum Beispiel nur den img-Tag unterstützen oder eine zusätzliche Klasse in dem Element unterstützen.

Im Head-Bereich jeder Seite – oder auch in der Header-Datei, welche per PHP inkludiert wird – muss folgender Code eingefügt werden:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]--> 

Dazu muss man noch die unkomprimierte (nur für Entwickler) oder komprimierte (Platzsparender) Version des Skripts einfügen und die Klassen, IDs und/oder Elemente bestimmen, welche betroffen sein sollen. Dies tut man indem man einfach in der Funktion die Klassen, IDs und/oder Elemente mit Komma voneinander trennt.

Ein Beispiel in dem die Klasse wichtig, die ID navi und das img-Tag angesprochen werden:

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.wichtig, #navi, img');
</script>
<![endif]-->

Man sieht also, es ist relativ leicht diesem PNGfix zu benutzen und hat somit später wesentlich weniger Aufwand. Und diejenigen, die kein JavaScript aktiviert haben und mit dem IE6 surfen, sind erstens selbst Schuld und zweitens können sie damit sicherlich leben, da sie das ja schon kennen müssten.

Das war es dann auch schon wieder!
Euer Wishu

Im neuen JavaScript-Benchmark, zeigt Google Chrome eindrucksvoll, was er kann. Bei den anderen 5 großen Browsern (Internet Explorer 6&7, Firefox, Opera und Safari) ist Opera da der Schnellste und der IE6 eindeutig der langsamste. Was Google Chrome allerdings liefert erstaunt wirklich sehr stark.

Mit 1501 Punkten ist Google Chrome weit vorne

Mit 24 Punkten vom IE6 (simuliert im IETester) steht schon einmal fest, dass dieser Browser wie immer der schlechteste ist, doch auch der IE7 mit 31 Punkten kommt nicht hinterher. Danach kommt Safari für Windows, mit 141 Punkten schon sehr weit von den beiden Microsoftunfällen abgeschieden. Dicht gefolgt vom Firefox 3, welche mit 172 Punkten auf dem guten dritten Platz landet, welcher Opera doch nur von hinten sieht. Als einziger von den 5 großen Browsern schafft er es über 200 Punkte, indem er eindrucksvolle 205 Punkte erreicht.

Doch damit hat er sich auch nur den zweiten Platz geholt. Gar nicht mehr im Sichtfeld und schon lange im Ziel bevor der Rest überhaupt richtig anfängt, ist Google Chrome. Überwältigende 1501 Punkte erreicht der neue Browser aus dem Hause Google. (Die Ergebnisse variieren bei allen Browsern leicht bei erneuten Tests)

Das liegt wahrscheinlich auch daran, das die Mitarbeiter von V8 direkt mit an der JavaScript-Implementierung bei Google Chrome mitgearbeitet haben. Dies ist auch dem, leider englischsprachigen, Comic von Google Chrome zu entnehmen. 

Google Chrome hat also durchaus eine Berechtigung in die Reihe der großen Browser aufgenommen zu werden.

Das war es dann auch schon wieder!
Euer Wishu

Quelle: heise.de

Einige mögen jetzt denken: Warum ausgerechnet der 6er und nicht der 7er, wenn ich von Firefox auch die Version 3 benutze? Das liegt daran, dass der Internet Explorer 6 leider immernoch der am weitesten verbreitetste Browser ist. Hier auf diesem Blog sind zwar nur 37% der Besucher noch mit dem Antichristen unter den Browsern unterwegs, doch diese will ich auch davon überzeugen zu wechseln.

Ich will jetzt gar nicht damit sagen, dass ihr euch von Internet Explorer losreißen sollt und Firefox benutzen sollt, auch wenn mir das am liebsten wäre. Ich möchte einfach nur, dass ihr auch mal auf den Aspekt Sicherheit schaut. Schon der Internet Explorer 7 ist wesentlich sicherer als die Version 6. Schließlich liegen 5 Jahre zwischen den beiden Browsern.

Nun zum eigentlichen Test: Die Testumgebung ist klar. Win XP SP3 mit IE6 und FF3, bei beiden Browsern JavaScript aktiviert. Als AntiViren-Programm wurde Avira AntiVir benutzt. Ich surfte alle Seiten, welche bei AOL News waren mit Firefox an. Der Großteil wurde von vornherein von Firefox geblockt. Eine rote Warnmeldung taucht im Seitenbereich auf, welche gar nicht erst auf die Idee kommen lässt auf die Seite zu gehen. Unten rechts steht dann ganz klein “Diese Warnung ignorieren”. Also auch ideal für “OK-Klicker” welche alles wegklicken, was mehr als 2 Worte zum lesen hat.

Nachdem das getestet wurde und Avira nichts meldete, wurde der gleiche Test nochmal gemacht. Nur wurden diesmal die Meldungen ignoriert und die Seiten wurden besucht. Bei der 3. Seite (kein chronologischer Aufruf) stürzte Firefox ab, Avira fand aber keinen Virus. Als ich mit dem Test fertig war, wurden lediglich 2 Viren gefunden, welche sich jedoch mit Avira ohne Probleme löschen ließen. Ohne JavaScript kam gar nichts durch.

Der Internet Explorer blockte keine Seite von Haus aus. Bei diesem machte ich jedoch den ersten Test ohne JavaScript, da ich den Ausgang bereits vermutet habe. Ohne JavaScript lief alles soweit glatt. Bis auf 2 Prozesse, welche im Hintergrund liefen, vorher aber nicht da waren. Einer davon lies sich entfernen. Der Test mit aktiviertem JavaScript war sehr kurz. Auf der 3. Seite, auf welcher Firefox abstürzte, stürzte hier Windows ab. Na klar, Browser und Betriebssystem sind eng miteinander verbunden, was bei Firefox nicht der Fall ist.

Da sich Windows trotzdem noch starten lies machte ich weiter. Vorher machte ich allerdings die Warntöne von Avira aus, da dies auf Dauer sehr nervtötend war. Nach insgesamt 6 besuchten Seiten mit dem IE6 war Schluss. Der Rechner ist einfach stehengeblieben und lies sich danach auch nicht mehr hochfahren. Letztendlich musste ich dann formatieren. Einen weiteren Versuch habe ich nicht gemacht, da ich es für überflüssig hielt, den IE6 weiter zu testen.

Man sieht also, mein Internet Explorer-Hass kommt nicht nur dadurch, dass ich weniger Arbeit haben möchte, sondern auch weil dadurch die Sicherheit stark gefährdet ist. Mit Firefox fängt man sich nur was ein, wenn man wirklich jede Warnung missachtet und wer macht das schon? Wenn ihr Firefox nicht mögt, gibt es noch immer Opera, welcher ähnliche Sicherheitsvorkehrungen hat. Aus diesem Grund wurde er hier auch nicht getestet. Ich nehme an, er würde ähnlich wie Firefox 3 abschneiden.

Auch wenn ihr den Internet Explorer nicht benutzt, installiert die Version 7, dann seid ihr auf der sichereren Seite. Ihr verpasst wirklich einiges, wenn der Internet Explorer 6 auf dem System bleibt. Wenn man ihn für die Webentwicklung (noch) benötigt, kann man dies auch anders machen. In der sicheren Umgebung des IETester kann euch dabei weniger passieren und ihr habt alles in einem Fenster.

Die Downloadlinks zu den besseren Browsern findet ihr wie immer im Beitrag Weg mit dem IE her mit den modernen Browsern.

Das war es dann auch schon wieder!
Euer Wishu

Die sicherste Methode ist wie immer: “Ohne Veröffentlichung, kann nichts geklaut werden“. Das ist auch nicht nur die sicherste Methode, sondern auch die einzige. Quatsch? Nein es gibt wirklich keine Möglichkeit seine Inhalte im Internet vor Diebstahl zu schützen, außer diese gar nicht erst ins Web zu bringen.

Sobald das mit dem Javascript begriffen wurde – was meist leider mehrere Tage an Diskussionen in irgendwelchen Foren bedeutet – kommen neue Methoden. Der Text wird einfach in Bilder gespeichert. Beeindruckt diejenigen, die den Inhalt haben wollen nur wenig. Entweder sie schreiben es sich ab oder wenn es viel Text ist, nehmen sie ein Programm, welches die Texte von den Bildern abliest und zum Beispiel in eine normale Textdatei speichert oder direkt als PDF. Das ist heutzutage kein Problem mehr.

Bilder werden gegen Diebstahl geschützt, indem wieder die beliebte Rechtsklicksperre geholt wird, sodass man nicht mehr auf “Speichern unter…” klicken kann. Das ist keine Hürde, für niemanden. Javascript mit 5 Klicks deaktiviert (Firefox 3) und schon hat man das Bild.

Auch dagegen behelfen sich die Anti-Diebstahl-Experten. Sie packen das Bild in einer Tabelle oder in einen Div-Container – als Hintergrundbild. Dann legen sie ein transparentes Gif-Bild drüber und wer es nun mit “Rechtsklick > Grafik speichern unter…” probiert, bekommt nur ein 1×1 Pixel großes, transparentes Bild.

Alles schön und gut, mich hat es damals daran gehintert genau ein Bild zu speichern – kurzzeitig. Als ich das zweite speichern wollte, bekam ich die Meldung, dass es den Dateinamen schon gibt und wurde stutzig. Ein transparentes gif-Bild war gespeichert worden. Hier gibt es mehrere Lösungen.

1. Man hat im Firefox ein Add-On namens AdBlock Plus - Viele kennen es sicherlich bereits – mit diesem hat man die Möglichkeit, einzelne Objekte zu blocken. Auch dieses transparente gif-Bild. Mit dem Element Hiding Helper ist das auch sehr schnell mit drei Klicks getan.
2. Guckt man in die CSS-Datei oder den Quelltext und zieht sich dort die Adresse raus.
3. Ein Firefox Add-On namens Web Developer erlaubt das Anzeigen aller Grafiken auf einer Webseite.
4. Man guckt sich mit Firefox die Seiteninformationen an und geht auf Medien (Rechtsklick > Seiteninformationen anzeigen).

Man sieht also, auch dagegen kann man etwas tun. Ich hatte mal im Internet ein Beispiel gesehen, in dem wirklich alles geblockt wurde, sogar der direkte Aufruf des Bildes. Es war wirklich ein perfekter Schutz. Wenn es nicht die Seiteninformationen geben würde. Letztendlich konnte ich das Bild speichern. Es war eine Demonstration von Ingo.

Kurz bevor dieser Beitrag online ging, war Ingo so gütig und hat mir noch einmal den Link zu dem Bildschutz gegeben. Man kann versuchen was man will, man kommt nur durch die Seiteninformationen ran und das ist es. Man kommt ran – egal was ihr tut! Ich sag mal so frech, wenn Ingo es nicht schafft, Inhalte zu schützen, schafft es keiner. Hier also der Link zu dem Bild
Ich werde hier absichtlich nicht den Code davon veröffentlichen oder sonst noch sagen, wie er was gemacht hat, damit das Ganze nicht noch verwendet wird.

Übrigens: Alle Dinge, welche auf einer Seite sind – wirklich alle – sind in dem Moment, indem die Seite fertig geladen hat, bereits auf dem PC des Besuchers. Man hat die Inhalte also schon unwissentlich geklaut. Auch dies kann man sich zu nutze machen. Man navigiert in den Ordner der Temporären Internetdateien oder des Caches und schon hat man alle Daten aufgelistet und kann die Webseite ohne Aufwand 1 zu 1 ins Internet stellen. Ausgenommen PHP-Code.

Versucht jetzt aber nicht, alles mit PHP zu maskieren, letztendlich wird es im Browser wieder als HTML ausgeliefert und ist somit wieder “klaubar”. Nur die Funktionen werden nicht ausgeliefert.

Nebenbei: Die Besucher, welche es nicht schaffen, eure Inhalte zu stehlen, würden für euch sowieso keine Konkurrenz darstellen. Also hört auf mit diesem Schutz, denn jeder Schutz geht zu Lasten der Benutzerfreundlichkeit.

Das war es dann auch schon wieder!
Euer Wishu