Heute ein Tipp für Windows 7 User, um Libraries etwas übersichtlicher zu gestalten. Das kleine Tool „Library Icon Changer“ macht’s möglich. Es können beliebige Icons verwendet werden, die vorgeschlagenen sind im Vorschaufenster sehr hässlich, aber nicht abschrecken lassen, da wo es drauf ankommt werden sie korrekt dargestellt.
webksde
Nicht destruktives arbeiten in Adobe Photoshop
Für Profis eine Selbstverständlichkeit, für viele Hobbybastler vielleicht neu: non destruktives arbeiten in Photoshop. Was ist das und warum sollte man es auch wirklich so machen? Weil es Zeit und Arbeit spart? Nicht unbedingt, aber es Schafft Ordnung und sorgt dafür das nachträgliche Veränderungen ohne erneutes importieren der Rohdaten erfolgen können. Es soll im folgenden weniger um die Arbeitstechniken an sich, als um das non destruktive Arbeiten gehen, ich werde also nicht explizit auf alle Möglichkeiten eingehen Fotos freizustellen.
Freistellen von Fotos
Man greift gerne zum Lassowerkzeug oder auch zum Zauberstab und ab dafür, einfach alles was weg soll der Schlächtertaste [ENTF] zum Fraß vorwerfen. So viel zum destruktiven Arbeiten.
Die non destruktive Variante kann nur mit einer Ebenenmaske funktionieren, diese ermöglichen es uns das Bild ohne Informationsverluste freizustellen. Dafür legen wir auf der Ebene eine Maske an und stellen sicher, dass diese auch gewählt ist. Dies sehen wir durch einen kleinen Rahmen um das rechte Thumbnail in der Ebenenpalette. Bei einfachen Objekten können wir jetzt wieder zum Lasso / Zauberstab greifen, entsprechendes Objekt markieren, die Markierung umkehren und die Äußere Fläche auf der Maske mit einem Pinsel -> Farbe: Schwarz ausmalen. Bei komplexeren Objekten oder auch zum nacharbeiten, greifen wir schlicht zum Pinsel und beweisen unsere ruhige Hand. Im Umkehrschluss lassen sich Bildbestandteile mit einem weißen Pinsel wieder sichtbar machen.
Optimierung von Fotos
Belichtung, Kontrast, Farbe, etc. lassen sich ebenfalls non destruktiv einstellen. Dafür wählen wir die Ebene aus, wählen im Menü „Ebene“ -> „Neue Einstellungs-Ebene“ und wählen die benötigte Korrektur aus. Im folgenden Dialog muss darauf geachtet werden den Haken „Use previous Layer“ zu aktivieren, so wird die Einstellung nur auf die aktuell gewählte (darunterliegende) Ebene angewendet. In der Ebenenpalette ist dies durch einen kleinen Pfeil kenntlich gemacht.
Anwenden von Filtern
Seit Photoshop CS5 gibt es sogenannte Smart Filter, eine der ganz großen wichtigen Neuerungen. Wendet man Filter an geht also der Erste Klick auf die Ebene, der Zweite auf Filter -> Convert for Smart Filters. Ab hier kann es dann wie gewohnt weitergehen, mit dem großen Vorteil, dass man die angewendeten Filter auch im Nachhinein noch neu justieren oder auch wieder entfernen kann.
UPDATE – 14.09.2012
Soeben über eine tolle Zusammenfassung von Adobe selbst gestoßen: http://help.adobe.com/de_DE/photoshop/cs/using/WSB3154840-1191-47b7-BA5B-2BD8371C31D8a.html
Bilder ohne HTML im WYSIWYG Editor einfügen
Für Redakteure ist das arbeiten mit HTML erfahrungsgemäß eher lästig, man möchte doch lieber arbeiten wie eh und je. Mit dem Modul Insert geht es nun einen weiteren Schritt in Richtung „arbeiten wie in Word“. Allerdings lief dieses bei mir nur in einer speziellen Kombination auch fehlerfrei. Nicht nur für Redakteure, auch für HTML Kenner, stellt dieses Feature doch eine enorme Arbeitserleichterung dar.
Nach der Einrichtung ist es möglich, hochgeladene CCK Bilder per Klick auf den Insert Button, in ausgewählter Imagecache Einstellung, in den Text zu integrieren.
Erstmal zum jagen und sammeln:
- http://drupal.org/project/insert
- http://drupal.org/project/wysiwyg
- http://ckeditor.com/download
- http://drupal.org/project/colorbox
Die oben genannten Module installieren, den CKEditor wie auf der Modulseite beschrieben im Library Verzeichnis ablegen. Falls noch nicht geschehen ein CCK Imagefield anlegen, in den Einstellungen des Feldes befindet sich nun ein Bereich namens „Insert“. Dort legen wir nun die Imagecache Voreinstellungen fest, die wir im Artikel verwenden möchten, natürlich auch jene die vom Colorbox-Modul angelegt wurden. Nun können Bilder wie oben beschrieben in den Text eingefügt werden.
Einziges bis Dato verbliebenes Problem:
Da das Bild nun auch ein Link ist, erhalten wir beim Doppelklick nicht die Bildeigenschaften und können somit nicht komfortabel floaten. Hier müssen also vorerst die Linkeigenschaften herhalten, im CSS Input Field geben wir hier float:left; float:right; an.
UPDATE – 09.09.2011
Es gibt inzwischen eine Alternativlösung: http://t.co/tZ9QkrT
Audio Playback unter Drupal (mit Playlist)
Nach ein paar Stunden testen höre ich nun gerade Musik aus meinen Boxen ertönen und möchte auch anderen, die dieses Problem gerade in den Wahnsinn treibt, erleuchten. Als erstes verabschiedet euch von Flowplayer und Co. in meinen Augen eine irrsinnige Frickelei und dann auch noch Flash, nein danke! Wir haben es heute doch viel besser, nur muss man da auch erstmal drauf kommen. Wir setzen einfach auf HTML5 – Audio und zwar mit Hilfe des jPlayers. Natürlich dürfen wir User ohne aktuellen Browser auch nicht so ganz im Regen stehen lassen, der jPlayer bietet ein Flashplayer Fallback, für die Bremserfraktion.
Achtung! Bevor jetzt munter das Modul installiert wird und der aktuelle jPlayer in den Library Ordner geschoben wird:
- Drupal 7: Aktueller jPlayer
- Drupal 6: jPlayer 1.x
Getestet (mit der Drupal 6 Variante) in Chrome, Internet Explorer 9, Opera 11 und Firefox 4, läuft perfekt.
Also nochmal Punkt für Punkt:
- SWF Tools / etc. in die Tonne prügeln.
- http://drupal.org/project/jplayer runterladen und unter „sites/modules“ installieren
- http://www.jplayer.org/download/ Library herunterladen (1.x für Drupal 6, 2.x für Drupal 7)
- Lib unter „librarys/jplayer/jquery.jplayer.min.js“ kopieren
- Modul in Drupal aktivieren
- Bei der Feldansicht des Filefields eures Audio Inhaltstypen den jPlayer (mit Playlist) auswählen
- Enjoy!
What about Views?
jPlayer hat zwar eine Views Integration, die vom Prinzip her auch ganz ordentlich ausschaut, nur leider funktioniert diese bei mir nicht. Folgendes Workaround:
- View auf Zeilendesign: Node umstellen
- Anzahl der Beiträge: 1
- Filter auf euren Audio Nodetype
Um Playlisten durchzuschalten (einen Audio Node kann man ja nun quasi als Playlist ansehen), kann man nun noch AJAX aktivieren und die Seitennavigation.
Lärmende Werbebanner, Popups und Konsorten
Heute mal an die Kollegen, die der Auffassung sind, lauter, schriller und bunter ist der letzte Weg die Aufmerksamkeit der User zu erhaschen. Schriller und bunter, nun von mir aus, wobei das oft nicht gerade von Einfallsreichtum zeugt. Ganz fürchterlich kontraproduktiv hingegen, sind Werbeanzeigen die Laut machen. Hier sollte man es doch halten wie bei der Bundeswehr, Maul erst aufmachen wenn man dazu aufgefordert wird, sonst gilt: S C H N A U Z E H A L T E N. Wie kann ich einem Kunden ernsthaft Werbung anbieten, die die potentiellen Endkunden unaufgefordert (v)erschreckt? Was wird wohl die erste Intention sein, wenn beim entspannten surfen urplötzlich ein schallender Lärm aus meinen Boxen ertönt? Nun ich werde ganz sicher auf die Werbung aufmerksam, aber auch ganz, ganz sicher nicht im erhofften Maße. Die Werbung wird mit großer Sicherheit schnellstmöglich geschlossen und das einzige was mit dem in dieser Sekunde vielleicht erhaschten Namen des Werbenden verbunden wird ist Ärger und nichts anderes.
Also um Gottes Willen: Finger weg von Werbeanzeigen die beim überfahren mit dem Cursor, oder gänzlich ohne Zutun einen höllen Lärm verbreiten, das nützt niemandem. Es gibt hier durchaus viele andere Beispiele die ich an dieser Stelle lobend hervorheben möchte, nämlich in erster Linie natürlich jene die so etwas gar nicht nötig haben. Aber auch die, die schlicht und einfach einen kleinen Lautsprecher im Banner einblenden, der natürlich default auf – MUTE – steht. Es muss immer der Grundsatz gelten, dass man den Nutzer nicht in seiner Freiheit beeinträchtigen darf, was übrigens auch der Grund ist warum man auf solche Sachen wie „target=’_blank'“ weitestgehend verzichten sollte, aber anderes Thema. Beeinflussung: Ja, natürlich – Beeinträchtigung / Zwang: Keinesfalls.
Natürlich gibt es Ausnahmen, immer dann wenn ein Benutzer ohnehin gleich mit einer Audio / Video Wiedergabe rechnet, kann natürlich Werbung vorgeschaltet werden. Diese Möglichkeit wird inzwischen sehr oft bei Videos genutzt und ist natürlich völlig legitim.
Internet Explorer 9 Release + WebM Codec by Google
Vor wenigen Tagen erschien nun der Internet Explorer 9 mit dem Microsoft nun endgültig (wieder) den Durchbruch schaffen will, die technischen Voraussetzungen sind gut. Der Oberfläche hat Microsoft eine strikte Diät verordnet, wie bei aktuellen Browsern üblich, ist hier Minimalismus angesagt. Die Entscheidung die Tabs neben die Multibar zu setzen, finde ich allerdings eher unglücklich, zumindest für Leute die gerne mal mehr als 5 Tabs offen haben (natürlich Auflösungsabhängig). Dies lässt sich allerdings einstellen und soll somit keine wirkliche Kritik sein, es ist nun auch keine schlechte Idee.
In Sachen HTML5 Unterstützung ist der IE9 hingegen Behauptungen von Microsoft eigenen Tests ungenügend, hier hätte man mehr erwarten dürfen, letzter Platz mit 130+5 Punkten im Test.
Ranking HTML5 Support (by html5test.com)
- Chrome: 288+13 Punkte
- Firefox 4 (RC): 255+9 Punkte
- Opera: 244+7
- Safari 5: 187+0 Punkte
- Internet Explorer 9: 130+5 Punkte
Aber schnell ist er! zumindest spürbar schneller als der Vorgänger. Zudem wird nun, wie bei Chrome und Firefox, für jeden Tab ein eigener Thread angelegt, was in der Praxis einfach verhindern soll, dass eine Fehlerzhafte Seite, sprich ein abgeschmierter Tab, den ganzen Browser ins virtuelle Nirvana befördert.
Ranking Acid3 Test (by acid3.acidtests.org)
- Chrome: 100/100 Punkten
- Opera: 100/100 Punkten
- Safari 5: 100/100 Punkten
- Firefox 4 (RC): 97/100 Punkten
- Internet Explorer 9: 95/100 Punkten
Bei diesen Ergebnissen sind meine lobenden Worte eingangs schon fast wieder in Frage gestellt, aber es geht doch gut voran, also darf man doch schon mal loben und muss nicht gleich wieder mit dem Knüppel draufschlagen. Die Jungs aus Redmond geben sich ganz offensichtlich Mühe und da kann man doch nur sagen: weiter so!
Übrigens, der IE9 ist auch in einer 64-Bit Variante verfügbar, allerdings ist von dieser Version offenbar abzuraten.
WebM by Google / HTML5 Video
Wie angekündigt stellt Google WebM für den Internet Explorer 9 zur Verfügung. Allerdings nicht wie zuerst angedacht per Browserplugin, sondern als Codec für die Betriebssysteme Windows Vista und Windows 7. Da der IE9 alle unterstützten Codecs vom Betriebssystem abgreift (per Media Foundation) und dieser nur auf den zuvor genannten Betriebssystemen lauffähig ist, gehen XP – User an dieser Stelle leer aus. Das die Nichteinigkeit über einen Codec für das HTML5 Video Format, dem Standard erheblich schadet ist mit Sicherheit unbestritten, aber wer hat ernsthaft etwas anderes erwartet?
Der aktuelle Stand sagt also:
- Kein H.264 (mehr) in Google Chrome, stattdessen WebM
- Standardmäßig kein WebM im Internet Explorer 9, stattdessen H.264
- Kein WebM für Apples Safari, hier wird ebenfalls auf H.264 gesetzt
- Opera und Firefox setzen ebenfalls auf WebM
Gehen wir nach den aktuellen Marktanteilen, hat WebM also die Nase eindeutig vorne, was natürlich nichts daran ändert, dass weiterhin Videos in beiden Formaten zur Verfügung stehen müssen.
Browser für Webentwickler
Aktuell werden wir von neuen Browserversionen nahezu erschlagen, nicht jeder ist aber für Entwickler geeignet. Ich bin seit jeher ein großer Firefox Fan, prüfe aber regelmäßig was die Konkurrenzbrowser so bieten und bin zuletzt aufgrund einer solchen Prüfung immerhin ein Jahr lang bei Google Chrome gelandet. Was sind also die Vor- und Nachteile der einzelnen Kandidaten, schauen wir uns die großen Vertreter einmal genauer an.
Getrennter Privat und Webworker Browser? In der Theorie sicher eine sinnvolle Idee, praktisch zeigt sich aber das sich das ohnehin nicht strikt trennen lässt, weswegen man gleich auf eine Einzelbrowser Lösung setzen sollte, die aber gut Strukturiert sein will. Daher werde ich nachfolgend immer darauf achten, dass wir die Browser so einrichten, dass diese nicht mit Tools zugemüllt werden und somit performant und übersichtlich bleiben.
Wie zu sehen sein wird, unterscheiden sich die Konsolen der einzelnen Browser nur noch unwesentlich, alle sind inzwischen mehr oder weniger dem Beispiel von Firebug gefolgt. Ich stelle also eher Besonderheiten heraus.
Firefox
Angefangen mit dem Brangenprimus Mozilla Firefox, ich greife hier schon zu Version 4 da zum Zeitpunkt der Erstellung des Artikels bereits der erste Release Candidate erschienen ist, die Final somit kurz bevorsteht.
Von Haus aus bringt Firefox wenig bis gar keine Unterstützung für Entwickler mit, was ja auch nicht weiter tragisch ist, die meisten User brauchen einen schlanken Browser und keine Entwicklertools. Lösungen per Modul bieten sich also an, an vorderster Front „Firebug“. Außerdem ist das Add-On WebDeveloper ganz sinnvoll. Nachdem die AddOns installiert sind richten wir uns noch ein paar Shortcuts ein, um schneller Zugriff auf die Funktionen zu haben. Dazu einfach einen Rechtsklick in einem freien Bereich auf Höhe der Adressbar machen und „Anpassen“ wählen, hier ziehen wir uns nun einmal das „Element Suchen“ von Firebug rechts neben das Suchfeld und das Zahnrad-Icon vom WebDevoloper Modul. So behalten wir den Platz im Browser zum Surfen und haben trotzdem schnellen Zugriff auf die Funktionen.
Außerdem oft benötigt wird das „Fireshot“ (alternative: „Awesome Screenshot“) genannte Screenshot Modul, „MeasureIT“ als Lineal (noch kein FF4 Support) und „ColorZilla“ als Farbwähler.
Chrome
Nun zu Google Chrome, Chrome bietet von Haus aus eine sehr komfortable Entwicklerkonsole an, aufzurufen per [STRG]+[GROßSTELLTASTE]+[I]. Die Lösung ist sehr übersichtlich gestaltet, allerdings kann man sich dem Gefühl nicht erwehren das sich in Firebug etwas flüssiger arbeiten lässt. Vom Funktionsumfang her, kann man mit der Chrome Konsole ebenso arbeiten wie auch mit Firebug.
In Chrome ist weiterhin das Modul „Awesome Screenshot“, wesentlich moderner aufgemacht und mit größerem Funktionsumfang, das Pendant schlechthin für Fireshot im Firefox. Die vorhandenen Colorpicker für Chrome, funktionieren meiner Erfahrung nach miserabel, von daher verzichte ich hier auf eine Modulempfehlung. „MeasureIT“ hingegen gibt es ebenfalls für Chrome.
Internet Explorer
Bietet inzwischen ebenfalls eine integrierte Entwicklerkonsole, die es auch ermöglicht ältere Renderengines zu emulieren. Aufzurufen ist diese über [F12], die Möglichkeit der Emulation ist oberhalb zu finden „Browser Engine“ und „Document Mode“. Microsoft hat hier gleich noch einige Features integriert die auch das Web Developer Modul im Firefox bieten. Es lässt sich so beispielsweise CSS abschalten um den sauberen Aufbau seiner HTML Dokumente zu prüfen, Auflösungen lassen sich emulieren, links zur W3C Validierung stehen zur Verfügung, Lineal und Farbwähler sind vorhanden und vieles mehr.
In der CSS Konsole lässt sich per Rechtklick ein Selektor per „Add Rule“ hinzufügen, diesem dann wiederrum per „Add attribute“ Attribute, das bietet so keine andere Konsole. Allerdings ist mir diese Rechtsklick-Lösung zu umständlich, wenigstens Attribute sollten sich, wie in Firebug, per Doppelklick hinzufügen lassen.
Hier hat Microsoft gelernt, das kann man wirklich nicht anders sagen. Der IE9 hat an vielen Ecken, wie eben bei den Entwicklertools, zugelegt so langsam sehe ich tatsächlich wieder Hoffnung für den Microsoft Browser.
Opera
Opera 11 bringt ebenfalls von Haus aus eine Entwicklerkonsole namens „Dragonfly“ mit, diese lässt sich wie in Chrome auch per [STRG]+[GROßSTELLTASTE]+[I] aufrufen. Besonderheit ist hier, dass beim Aufruf sofort die DOM Elementauswahl gestartet wird, gewöhnungsbedürftig aber sinnvoll. Außerdem fällt sofort auf das eine Art Grid (Hilfslinien) angezeigt wird, keine Frage, sehr nette Hilfe zur Ausrichtung von Elementen.
Was mir hier fehlt ist die Möglichkeit den Element Style zu bearbeiten, zum Testen von Styles eigentlich unabdingbar. Außerdem wurde auf eine Autovervollständigung verzichtet und generell scheint mir das editieren von Stylesheets eher Benutzerunfreundlich, schade.
Fazit
Kurz und knapp: Firefox bleibt mein Favorit, als perfekte Kombination von Privat- und Webworkerbrowser.
Facebook Banner & invalider Code
Von so einer kleinen Unternehmung wie Facebook kann man natürlich keinen validen Code erwarten, wie kann ich nur *Ironie Ende*. Unten für diejenigen die es gebrauchen können ein Beispiel für den Bereinigten Code eines Facebook Banners.
Was wurde verändert?
- target=“_top“ – raus damit! Hat in validem xhtml Code nichts zu suchen.
- alt=“xxx“ – Alt-Text ist Pflicht in Img-Tags.
- <br/> wird zu <br /> – Ich war immer der Meinung das wäre schlicht besserer Stil mit einer Leerstelle, der Validator hat es allerdings als Fehler ausgegeben, also: Leerstelle rein.
Webks: websolutions kept simple | Wirb ebenfalls für deine Seite
Warum machen die das?
- target=“_top“ – Sorgt bei alten Frame-Seiten dafür das zwar im selben Fenster (Tab), aber ohne das Frameset drumherum geladen wird. Motiv ist klar, Facebook möchte natürlich nicht dass die Seite innerhalb einer anderen Seite geöffnet wird. Allerdings nutzt heute niemand der bei Verstand ist noch Framesets, wenn es sich irgendwie vermeiden lässt.
- alt=“xxx“ – Kann in meinen Augen nur Faulheit oder Schusseligkeit sein.
- <br/> wird zu <br /> – Wie oben erwähnt, schlechter Stil. Laut Validator auch schlichtweg Falsch, was ich aber so nicht unterschreiben würde.
DROWL – Drupalentwicklung aus Ostwestfalen Lippe
Mal ein wenig Werbung in eigener Sache, mit unserem Drupal Projekt „DROWL“ wollen wir, die Verbreitung von Drupal vorantreiben, »wir« meint das Unternehmen webks: websolutions kept simple. Natürlich ist das nicht ganz uneigennützig, wir bieten dort Service rund um Drupal an, Einrichtung, Konfiguration, Spezialentwicklungen und natürlich Theming.
Außerdem eine Reihe an vorgefertigten Drupal Lösungen die nur noch in den Details für die Kunden angepasst werden muss, was einen geringeren Preis zur Folge hat.
Kleine Transition / Multiple Background – Demo
Warum auch immer JavaScript nutzen für bewegte Hintergründe? Man nehme: 2 Hintergrundbilder, eine Prise Transition und rühre die Background-position langsam unter. Selbst die aktuelle Firefox Beta (Nightly Build) versagt leider kläglich bei diesem Test, Multiple Backgrounds scheinen noch nicht gut implementiert zu sein. Chrome macht seine Sache dafür um so besser.
body{
font-family:Georgia,"Times New Roman",serif;
background: url(colored_bg_sec.png) top 0 repeat,
url(colored_bg.jpg) top 0 repeat;
-moz-transition: all 15s ease-in-out;
-webkit-transition: all 15s ease-in-out;
}
body:hover{
background: url(colored_bg_sec.png) top -500px repeat,
url(colored_bg.jpg) top 500px repeat;
}