Allgemeines – Seite 5

A small update to my CSS3 Rotating Image Gallery

A couple of months ago I wrote a small image gallery script using some of the new CSS3 functions like transitions and transforms of the Webkit Nightly Browser. It is a simple gallery with only four pictures in it which rotates on mouse click to show the next picture.

That thing became a little famous and was shown on many other websites as an example to what can be done with CSS3 and a modern browser.

Now, a year later, I updated this script so it works now in many other modern browsers such as Firefox, Chrome, Opera and Internet Explorer.

Just browse to the example page and see it for yourself.

And if you have an older browser you can watch this little screen capture:

I hope you like it and I am eager to see what you can come up with using those CSS3 transitions and transforms.

5 extrem nützliche Tools für JavaScript Entwickler

Wenn es eine Programmiersprache gibt, die ich wirklich liebe, dann ist dies auf jeden Fall JavaScript. Früher von vielen belächelt, hat sich JavaScript heute zu einem wirklich mächtigen Tool unter Webentwicklern gemausert. Viele hilfreiche Seiten wie z.B. Google Maps wären ohne JavaScript überhaupt nicht möglich gewesen und selbst auf der Serverseite findet es in letzter Zeit immer mehr Verwendung - siehe node.js. Heute möchte ich euch fünf interessante und nützliche Tools vorstellen, die einem das Arbeiten mit JavaScript sehr erleichtern können.

JSFIDDLE - JavaScript direkt im Browser entwickeln

Dieses Tool ist noch relativ jung, hat sich aber für mich bereits jetzt zu einem der wichtigsten Tools beim Entwickeln und Testen von JavaScript Scripten entwickelt. Das Besondere an JSFIDDLE ist, dass man vier verschiedene Felder zur Verfügung gestellt bekommt. Im Ersten schreibt man seinen HTML Code, im Zweiten den benötigten CSS Code und im Dritten schließlich das JavaScript.

Wenn man möchte lassen sich externe JavaScript Bibliotheken wie Prototype, jQuery, Mootools und viele weitere per Klick einbinden.

Ein Klick auf 'Run' und das fertige Script wird ausgeführt und das Ergebnis im vierten Feld angezeigt. Diese so geschriebenen Scripte können gespeichert werden und sind über eine feste URL jederzeit wieder aufrufbar. Bei jedem Speichern bleibt übrigens die vorherige Version erhalten und kann über die alte URL aufgerufen werden.
Weiterlesen →

Ein einfacher Cross-Browser Tooltip mit Javascript und CSS

Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

Weiterlesen →

LED LENSER M7 Review – Die Microcontroller gesteuerte Taschenlampe

[Trigami-Review]

In diesem Review stell ich die neue LED Taschenlampe M7 von LED LENSER vor. Dabei handelt es sich um eine Microcontroller gesteuerte Taschenlampe mit drei unterschiedlichen Lichtprogrammen (Professional, Easy, Defence) mit jeweils bis zu 6 verschiedenen Lichtfunktionen (Boost, Power, Low Power, Dim, S.O.S, Defence Strobe) - alles über einen einzigen Tastschalter gesteuert.

Lang ist es her seit meinem letzten Post hier auf webmatze.de. Obwohl einige Beiträge in Planung sind und auch schon halb fertig vor mir liegen, fehlte mir zuletzt leider die Zeit. Aber wir haben ja auch gerade Sommer und da geht man lieber raus und unternimmt etwas in der Natur.

Das ist auch ein Stichwort für diesen neuen Beitrag, denn vor einigen Tagen habe ich eine Kanutour durch die Mecklenburger Seenplatte unternommen und mit dabei hatte ich eine Taschenlampe, welche ich euch heute gerne einmal vorstellen möchte.

Die neue LED LENSER M7 - eine innovative LED Taschenlampe

Auf dieser Kanutour sind wir nicht nur am Tage, sondern auch mitten in der Nacht auf den Seen unterwegs gewesen und jeder kann sich vorstellen, dass es dann so gut wie kein Licht gibt, an dem man sich orientieren kann. Besonders wenn man eine passende Anlegestelle am Ufer finden möchte, dann braucht man eine gute und helle Taschenlampe. Und genau hier kam die M7 von LED LENSER zum Einsatz und hat sich wirklich außerordentlich gut bewährt.
Weiterlesen →

Wie manche URL Shortener daran scheitern URLs zu kürzen

Mit den Aufstieg von Twitter und der dadurch entstandenen Ära der 140 Zeichen langen mehr oder weniger interessanten Kurznachrichten, kommt auch eine ganze Armee an Diensten wieder an den Zug, die zuvor ein kaum beachtetes Dasein fristeten. Die Rede ist hier von URL Shortenern oder auch auf Deutsch URL-Kürzer genannt.

Was sind URL Shortener?

Der Sinn und Zweck dieser Angebote ist es schlicht und einfach, eine lange URL - die so nicht oder kaum in das 140 Zeichen Limit von Twitter passen würde - in eine sehr kurze Form umzuwandeln. So kann man z.B. mit dem URL Shortener Urgestein tinyurl.com folgende zugegebenermaßen lange URL http://webmatze.de/wie-manche-url-shortener-daran-scheitern-urls-zu-kurzen/ in diese kurze URL http://tinyurl.com/yep6crr umwandeln. So wurden in diesem Fall 49 der ehemals 75 Zeichen eingespart werden, was einer Ersparnis von über 65% entspricht. Diese neue kürzere URL lässt sich nun auch problemlos in einem Tweet auf Twitter verwenden.

Es geht noch kürzer

Eine Ersparnis von 65% hört sich natürlich sehr gut an und viele neuere URL Shortener würden hier sogar noch mehr Zeichen einsparen können. Da die Beschränkung auf 140 Zeichen bei Twitter nicht viel Spielraum für Inhalt und Links auf andere Seiten lässt, sind viele neuere URL-Kürzer dazu übergegangen Weiterlesen →

Google Chrome Frame – Ein Plugin für den Internet Explorer

Wenn Web-Entwickler sich über den Internet Explorer unterhalten, dann kommen alle sehr schnell auf eine grundlegende Aussage. Um es kurz zu fassen: Der geht so was von gar nicht! Dabei schwanken die Gefühle der Beteiligten manchmal zwischen Unglauben, Unverständnis, Ablehnung und sogar Hass. Aber wie kommt es, das ein Browser so massiv den Unmut so vieler Web-Entwickler auf sich zieht?

Fall eines Browsers

Noch vor wenigen Jahren galt der Internet Explorer als einer der fortschrittlichsten und besten Browser auf diesem Planeten. Damals schimpften alle noch auf den Netscape Navigator und dessen Unfähigkeit, die Webseiten so darzustellen, wie es der Internet Explorer auf unnachahmliche Weise schaffte. Doch diese Stellung in den Köpfen der Menschen hat er sehr schnell verspielt und in das komplette Gegenteil gekehrt.

Der Internet Explorer hat die Zeichen der Zeit nicht erkannt und es verschlafen, die wichtigsten aktuellen Web-Standards umzusetzen. Heute kämpfen Browser wie Firefox, Safari oder Google Chrome um die Krone am Browserhimmel und der Internet Explorer kämpft immer noch damit, die Standards von Vorgestern richtig umzusetzen. Er hinkt nicht nur einen Schritt hinterher, sondern Kilometer!

Leider wird der Internet Explorer durch die geballte Marktmacht von Microsoft und deren Betriebssystem Windows immer noch von sehr vielen Nutzern verwendet, auch wenn hier die anderen Browser schon sehr stark aufholen konnten.

Aber sehen wir der Realität ins Auge, wir - die Web-Entwickler - werden auch in Zukunft nicht um den Internet Explorer herumkommen.
Weiterlesen →