webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

15. 10. 2011
von webmatze
2 Kommentare

Ruby on Rails auf Ubuntu 11.10 installieren

Seit einigen Tagen (Oktober 2011) ist die neuste Version von Ubuntu zum Download freigegeben. Ubuntu 11.10 oder auch Oneiric Ocelot genannt, ist ein wirklich ausgereiftes und leicht zu bedienendes Linux Betriebssystem, welches kostenlos zum Download bereit steht. Da Linux schon von Natur aus viele Funktionen und Helfer für Programmierer bereit hält, eignet es sich auch hervorragend zur Entwicklung von Ruby on Rails Anwendungen.

Ruby on Rails hingegen ist derzeit eines der populärsten und produktivsten OpenSource Frameworks, mit dem sich sehr schnell umfangreiche Webanwendungen erstellen lassen. Wer schon damit gearbeitet hat, weiß wieviel Spaß es machen kann.

Ruby selbst ist eine Scriptsprache, wie z.B. auch PHP eine Scriptsprache ist. Ruby wurde jedoch von Grund auf mit dem Ziel entwickelt, leicht verständlich zu sein und eine schnelle Entwicklung damit zu ermöglichen.

Ubuntu für Rails vorbereiten

Damit wir das Rails Framework unter Ubuntu 11.10 verwenden können, müssen wir zuerst Ruby installieren. Von Haus aus ist Ubuntu noch nicht mit Ruby ausgestattet, jedoch läßt sich dieses (und auch andere Programmiersprachen) sehr leicht nachträglich installieren.

Hierzu muss man wissen, dass es verschiedene Versionen von Ruby gibt. Ältere Versionen von Ruby on Rails haben hauptsächlich auf die Ruby Version 1.8.7 gesetzt. Die neusten Ruby on Rails Versionen ab 3.0 verwenden jedoch bevorzugt Ruby Version 1.9.2. Um unser System also für die Zukunft vorzubereiten, werden wir auf den Ruby Versions Manager (RVM) setzen, mit dem es möglich ist jede beliebige Ruby Version zu installieren und auch bequem zwischen diesen zu wechseln.

Weiterlesen →

2. 08. 2011
von webmatze
Keine Kommentare

Schatten mit CSS Pseudo-Elementen hinzufügen

In diesem Beitrag möchte ich euch zeigen, wie man mit ganz einfachen Mitteln einen Schatteneffekt an beliebige Block-Elemente hinzufügen kann. Der Clou dabei ist jedoch, dass dafür kein HTML angefasst werden muss, sondern dies ausschließlich über normale CSS Mittel funktioniert.

Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.

Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.

Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.

Gestatten, Pseudo-Elemente :before und :after

CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:

  1. a:before {content: "Ich bin ein Link: "}

Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.
Weiterlesen →

21. 04. 2011
von webmatze
1 Kommentar

Kittyfier Bookmarklet – Süße Kätzchen überall

Was passiert, wenn man sich als Programmierer mal etwas vom normalen Arbeitsstress ablenken will? Man programmiert etwas, dass Spaß macht.

Auf genau diese Weise ist auch dieses Bookmarklet entstanden. Es wandelt einfach alle per IMG HTML-Tag eingebundene Bilder einer Seite in Bilder mit niedlichen kleinen Katzen um. Um zu sehen, was es macht, einfach den folgenden Link in die Bookmark-Leiste eures Browsers ziehen und auf einer beliebigen Seite mit Bildern ausprobieren!

Wer es gleich hier auf dieser Seite testen möchte, kann auch einfach nur den Link anklicken.

Hier sind ein paar zufällige Bilder zum Testen.

Flowersflowers and bokehMacro flower experimentFire-tree flower oppening, Tulipa africana, bisnagueira (Spathodea campanulata). Ceret park São Paulo Brasil. African native

Wer wissen möchte, wie das Kittyfier Bookmarklet funktioniert, kann sich den kompletten Code hier ansehen. Eigentlich nichts besonderes:

  1. var images = document.images;
  2. var icount = 0;
  3. for(var i = 0; i < images.length; i++) {
  4. var img = images.item(i);
  5. if (img.width > 20 && img.height > 20) {
  6. img.src = "http://placekitten.com/"+img.width+"/"+img.height+"?image="+icount;
  7. icount++;if(icount > 16){icount=0;}
  8. }
  9. }

Wie man sehen kann, verwende ich den Placekitten Service, welcher es einem erlaubt durch Angabe von Höhe und Breite beliebig große Katzenbilder zu generieren um diese als Platzhalter in die eigenen Entwürfe einzubauen. Dies ist vor allem dann praktisch, wenn man nur mal schnell ein HTML Layout testen möchte, aber noch keine passenden Bilder hat.

Ich hoffe ihr habt Spaß an diesem kleinen Script und ich freue mich über eure Kommentare.

18. 12. 2010
von webmatze
2 Kommentare

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. 12. 2010
von webmatze
Keine Kommentare

X-Mas-Gewinnspiel und Weihnachtsspecial von Herpotherm®

[Trigami-Review]

Heute möchte ich euch auf ein Weihnachtsgewinnspiel von Herpotherm® aufmerksam machen. Dabei handelt es sich um ein CE-zertifiziertes Medizinprodukt aus 100% deutscher Produktion. Mit Hilfe dieses batteriebetriebenen Gerätes lassen sich sowohl die Symptome als auch die Entwicklung von Herpes verhindern.

Auch wenn dies vielleicht nicht ganz zum Thema dieser Seiten passt, so nehme ich diese Möglichkeit trotzdem wahr und möchte euch dieses Produkt vorstellen. Ich habe in der Vergangenheit schon sehr gute Erfahrungen mit einem anderen Produkt dieses Herstellers (RIEMSER Arzneimittel AG) gemacht. Damit meine ich den bite away Stichheiler, mit dessen Hilfe sich Insektenstiche jeder Art lindern und heilen lassen.

Der Clou ist, dass beide Geräte auf einer ziemlich ähnlichen Technik basieren. Genau wie beim bite away setzt das Herpothern® auf die chemiefreie Wirkung von konzentrierter Wärme welche nur im engen Temperaturbereich zwischen 51 und 52°C funktioniert.

Durch die Erwärmung der mit dem Herpesvirus befallenen Zellen mit genau dieser Temperatur wird die partielle bzw. komplette Denaturierung von Enzymen und Proteinen erreicht und dadurch die Vermehrung des Virus unterbunden.
Weiterlesen →

21. 10. 2010
von webmatze
Keine Kommentare

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 →