Endlich hab ich ein kostenloses Tool gefunden, welches mir die Platzierung bei Google anzeigt. Nachdem man eine Site per URL angegeben hat, definiert man die Suchbegriffe von denen man die Platzierung seine Site angezeigt haben will. Nach einer kurzen Analyse wird die aktuelle Platzierung und später die beste Platzierung angezeigt. Zusätzlich wird beim Klick auf einen Suchbegriff die Top10 unter diesen Begriff angezeigt.
Ein wirklich brauchbares Freeware-Tool – danke an die Hersteller ClerverStat.
Gestern habe ich ein neues Tool von Adobe kennengelernt und bin begeistert. Es handelt sich um ein Analyse-Tool. Adobe bietet an Screenshots von der angegebenen URL zu machen und darzustellen. Dabei gibt es eine Liste der gängigsten Browser zu Auswahl:
- Windows XP
- Chrome 3.0
- Firefox 2.0
- Firefox 3.0
- Firefox 3.5
- Internet Explorer 6.0
- Internet Explorer 7.0
- Internet Explorer 8.0
- Mac OS X
- Firefox 2.0
- Firefox 3.0
- Firefox 3.5
- Safari 3.0
- Safari 4.0
Direkt zur Anwendung: Adobe Browser Lab
Über Adobe Browser Lab
Dreamweaver Erweiterungen: Part 1 & Part 2
Auf der Adobe Developer Seite wurde 12 neue Tutorials für Flash CS4 hinterlegt, in den Möglichkeiten zur Animationserstellung erklärt wird.
Animation Learning Guide for Flash CS4 Professional | Adobe Developer Connection.
Heute habe ich bei sitepoint.com ein schönes Tutorial über die Erstellung von Schaltflächen in Photoshop gefunden. Der Workshop geht über ganze 4 Seiten.
Da ich meinen Laptop gerade neu installiert habe, war ich seit langem mal wieder auf der Website von Skype. Dabei ist mir erst jetzt aufgefallen, das sie unter "use skype" eine tolle Animation haben. Erst dachte ich es wäre, wie üblich, mit Flash gemacht worden. Aber beim genaueren hinsehen, habe ich schnell festgestellt, dass das ganze komplett in JavaScript umgesetzt wurde.
Ein Kompliment an dieser Stelle von mir. Die Animation wird sehr schnell geladen, läuft flüssig ab und reagiert sogar leicht auf die Mausbewegungen. So wird bestimmt irgendwann einmal Flash komplett durch offene Standards ersetzt. Nicht das ich Flash nicht mag, aber hier findet man ein gutes Beispiel wie es Pluginfrei funktioniert.
In meinem letzten Artikel habe ich über die Probleme beim Import von externen CSS-Dateien berichtet. Nun habe ich eine vereinfachten Import gefunden, denn das Einbinden von bis zu 6 Dateien bläht nicht nur der Quellcode auf, sondern sieht auch irgendwie unübersichtlich aus.
Ich weiß, diese Idee ist nicht unbedingt die neuste, aber sie gefällt mir und deshalb schreibe ich darüber
[mehr...]
Gestern habe ich bei einem Projekt versucht über die @import-Regel in CSS externe Dateien nachzuladen und bin auf eine sehr interessant Problematik gestoßen.
Üblicherweise importieren ja fast alle Webentwickler und -designer ihre externen CSS-Dateien mit dem HTML eigenen Tag <link rel="stylesheet" href="path/to/file.css" type="text/css" />. Wenn man nur auch noch unterschiedliche Design für die verschiedenen Ausgabemedien einbinden möchte, erweitert man diesen Tag mit dem Attribute media="screen".
Um eine bessere Trennung im Design zu bekommen, benutze ich 2 CSS-Dateien. Eine für das Layout und eine für die Farben und die Typographie. Nun entsteht aber der unschöne Umstand, dass ich für jedes Ausgabemedium 2 externe Dateien einbinden muss. Wenn ich also für den Bildschirm, den Drucker und den mobilen Endgeräten jeweils ein Design entwerfen, so sind das insgesamt 6 externe CSS-Dateien, plus einer Normalisierungsdatei. All dies über den <link>-Tag zu machen, finde ich umständlich.
Schöner wäre es doch man könnte nur eine externe CSS-Datei einbinden und der Rest wird dann von ihr geladen. Dann sieht der Quellcode etwas aufgeräumter aus.
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>RE-Design - CSS - @import</title>
6: <style type="text/css">
7: /*<![CDATA[*/
8:
9: @import url('style/import.css');
10:
11: /*]]>*/
12: </style>
13: </head>
Wenn man nun in der CSS-Datei die restlichen Dateien lädt, wäre ja alles in Ordnung.
1: @import url('normalization.css');
2:
3: @import url('screen_layout.css') screen;
4: @import url('screen_design.css') screen;
5:
6: @import url('print_layout.css') print;
7: @import url('print_design.css') print;
8:
9: @import url('handheld_layout.css') handheld;
10: @import url('handheld_design.css') handheld;
Doch leider macht an dieser Stelle der Internet Explorer uns wieder einmal einen Strich durch die Rechnung. Denn der ignoriert die @import-Regel wenn sie mit dem Zusatz der Medienausgabe belegt wird. In diesem Fall würde also nur die Normalisierungsdatei geladen.
Interessant ist auch, dass mein über alles geliebter Opera-Browser nur die screen-Erweiterung versteht und die anderen ignoriert, was bedeutet: er druckt das Screendesign aus.
Fazit
Mein Fazit zu diesem Experimentes ist, dass ich leider wieder zurück zum <link>-Tag gehen muss, um eine volle Unterstützung aller Browser zu haben. Eigentlich schade, denn es ist doch eigentlich eine einfache und bequeme Art zu arbeiten.
Wie ich gerade auf der offiziellen Website von Joomla gesehen habe, gibt es die lang ersehnte Version 1.5 nun seit dem 22. Jan 2008 auch als stabil-Version. Heißt also wir können endlich die neuen Features von Joomla benutzen. Juhu!
In meinem Adventskalender habe ich ein kleines Tutorial über die Erstellung eines Adressbuch per AJAX geschrieben. Leider waren aber die Demodateien nicht direkt benutzbar. Ich habe sie nun korrigiert und stelle sie euch hiermit zur Verfügung.
Bugfix:
- Ich habe eine SQL-Datei hinzugefügt, um die Datenbank schneller zu installieren. Jetzt muss nur noch in der include-Datei der Zugriff auf die Datenbank geregelt werden.
- Der init()-Methode des Adressbuches wird jetzt der Form-Container übergeben, so dass das Adressbuch flexibler auf das DOM reagieren kann.
- Die Literal-Namen wurden in eine einheitliche Schreibweise (RED_AdrBook, RED_AJAX) umbenannt.
- Eine update-Funktion für bestehende Datensätze wurde hinzugefügt.
- Eine Lösch-Funktion wurde hinzugefügt. Deswegen wurde ein delete.php-Script, welches einen Datensatz löscht, angelget.
- Die Anzahl der Datensätze und der aktuelle Datensatz wird nun im Interface angezeigt.
Mein erstes Beispiel ist eine ganzseitige Anzeige im monatlich erscheinenden Magazin Ecos des Spotlight Verlags. Sie bewerben darin ihre Jahresabonnements. Obwohl die gedruckte Version nicht besonders aufwendig aussieht, habe ich trotzdem ca. 5 Stunden an der Umsetzung getüftelt. Aber zu guter Letzt habe ich es geschafft und nur möchte ich euch das Ergebnis präsentieren.
[mehr...]
RE-Design
Endlich hab ich ein kostenloses Tool gefunden, welches mir die Platzierung bei Google anzeigt. Nachdem man eine Site per URL angegeben hat, definiert man die Suchbegriffe von denen man die Platzierung seine Site angezeigt haben will. Nach einer kurzen Analyse wird die aktuelle Platzierung und später die beste Platzierung angezeigt. Zusätzlich wird beim Klick auf einen Suchbegriff die Top10 unter diesen Begriff angezeigt.
