Archive for August, 2010
Wer auf “State of the Art” Features wie Nesting, Loops und ähnliches verzichten kann, für den lohnt es sich in ein paar Zeilen ein eigenes Template-Plugin zu schreiben.
Hier das jQuery Plugin:
jQuery.fn.render = function(values){
this.each( function (index, template) {
var org_ob = $(template)
var ob = org_ob.clone();
for (var key in values) {
re = new RegExp('@'+key+'@', 'gm');
ob.html(ob.html().replace(re,values[key]))
}
ob.addClass('jst_ready').insertAfter(org_ob)
var id = org_ob.attr('id');
re = new RegExp('jst_', 'gm');
ob.html(ob.html().replace(re,id))
if (ob.hasClass('jst_hide')) { ob.hide(); } else { ob.show(); }
});
}
Templates sehen dann so aus:
<div class="name" style="display:none;">@firstname@ @lastname@</div>
und
$('.name').render({'firstname':'Max','lastname':'Muster'});
macht daraus…
<div class="name_item jst_ready" style="display:none;">Max Muster</div>
Darüber hinaus kann durch die Klasse “jst_hide” das Template zwar gerender aber nicht angezeigt werden und eine “id” sollte wie folgt aufgebaut sein damit es keine Kollisionen gibt.
id="jst_name"
wird zu
id="name"
Buttons mit Icons
Für manche Projekte benötigt man eine Menge Icons, die durch eine CSS-Klasse z.B. auf einen Button angewendet werden sollen. Also sucht man sich aus einem der bekannten und beliebten Iconsets das Benötigte zusammen und pflegt diese in einer separaten CSS-Datei.
Das wird gerade bei vielen Icons sehr fehleranfällig und zeitaufwendig. Dabei lässt sich dieser Schritt einfach automatisieren. Alles, was Ihr dazu braucht, liefern Pinguin- und Apfel-Betriebssysteme bereits mit.
Erstmal kopiert ihr dazu alle benötigten Icons in einen eigenen Ordner neben eurem bestehenden Style-Sheet. Ich ergänze diesen immer noch um die Angabe der entsprechenden Icongröße wie z.B.
"icons_16"
für 16x16px große Icons. Nun öffnest du einen Terminal, wechselst in das soeben erstellte Verzeichnis und führst dort ein bisschen Shell Magic aus. Die erstellt Dir den benötigten Stylesheet und speichert diesen als icons_16.css.
mv ../icons_16.css ../icons_16.css.bac; \
for file in `ls`; \
do echo "a.icon_16_${file%%.*} { background:url($file) }" \
>> ../icons_16.css; done;
komplett kopieren und im Terminal einfügen
danach sollte deine Ordnerstruktur ungefähr so aussehen:
/Project
/index.html # Das HTML-Projekt
/icons_16.css # Die erstellte CSS-Datei
/icons_16 # Dein Icon-Ordner
/icon_a.png
/icon_b.png
/style.css # Dein regulärer Style
In der “style.css” definierst Du nun wie gewohnt den Basis-Look Deines Buttons und importierst lediglich noch die “icons_16.css” am Anfang des Dokumentes.
@import url(icons_16.css);
a {
display:block;
float:left;
padding:10px 10px 10px 32px;
margin:0px 10px 10px 0px;
background: 10px center no-repeat #333;
text-decoration:none;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
a:hover {
background-color: #999;
color: #333;
}
Nun kannst du jedem Button durch Verwendung einer Klasse, die sich aus “icon_16_” + den Dateinamen der Bilddatei zusammensetzt, automatisch das entsprechende Icon zuordnen.
<a href="#" class="icon_16_emoticon_happy">emoticon_happy.png</a>
in diesem Fall das “happy emoticon”.
Button mit Emoticon Happy Icon
Alle benötigten Daten habe ich hier nochmal zum Download zusammengefasst: icon_site.zip
In fast allen Browsern ist es ein Standard Feature beim Hovern eines Links die Zieladresse in der Statuszeile anzuzeigen. Doch bringt diese Variante einige Probleme mit sich die ein kleiner nahezu unbekannter Browser besonders Clever löst.
Im Firefox sieht das ganze so aus:
Statuszeile Firefox
Nachteil ist neben dem verschwendeten Platz, der sich besonders auf Netbooks/WebPads bemerkbar macht, das verschieben eines wichtigen User Feedbacks an den unteren Bildschirmrand und damit auch an den Rand der Wahrnehmung.
Das das Problem erkannt wurde zeigt Google, die in Chrome zumindest das Platz Problem lösen. Dort wird die Fußzeile nur bei bedarf als Overlay eingeblendet.
Overlay Statusbar in Chrome
Schlimmer wird es aber wenn Hersteller wie Apple die Statusleiste einfach abschalten. Den Sicherheit ist nicht nur eine frage des Browsers wie uns Microsoft gerne in der IE Werbung Weismachen möchte, sondern auch dem User zumindest die Möglichkeit zu verantwortungsvollem handeln zu überlassen. Ich erachte daher das bisschen Information vor dem Klick als besonders wichtig.
Midori hat beiden Probleme besonders schön gelöst indem die ziel Adresse einfach in das bestehende Adressfeld eingeblendet wird. So als würde man sie selbst dort eintragen.
Adressfeld in Midori
Adressfeld in Midori - Hover
Dadurch wird die Statuszeile für diese Aufgabe hinfällig und kann abgeschaltet werden. Doch viel wichtiger ist das die Information über das Link Ziel dabei wesentlich dominanter in den Fokus des Benutzers gestellt wird und die Aufgabe des Adressfeldes sinnvoll erweitert wird.
Wer sich das ganze mal anschauen möchte, oder noch auf der suche nach einem kleinen und schlanken Browser ist, findet Windows und Linux Versionen auf der Projekt Webseite.
Alle alphalog Kunden, die auch unterwegs wissen wollen, wie es um ihr Webprojekt steht können dies nun mit der offiziellen Piwik App für das iPhone.
mehr dazu im planet.alphalog
moreutils a growing collection of the unix tools that nobody thought to write long ago when unix was young
I never heard about moreutils befor, but the toolset looks very usefull.
With Ubuntu’s vmbuilder the creation of a virtual appliance is fast and easy. Try something like this and your get an ready to use image.
sudo vmbuilder kvm ubuntu \
--arch 'amd64' \
--rootsize '4096' \
--components 'main,universe' \
--addpkg mysql \
--user 'ubuntu' --pass 'ubuntu' \
-v --debug
Feng Office is cool, but slow. I found out that you can speed up your system by adding the following lines to your config/config.php.
define('USE_JS_CACHE', true);
define('COMPRESSED_CSS', true);
define('COMPRESSED_JS', true);
in my case, Feng Office rendering speed is now 30-40 % faster.
Holga D is a digital camera inspired from the extremely popular cult of Holga and other toy cameras of its kind.
Schöne Designstudie einer digitalen Holga. Trotz oder vielleicht auch wegen der Reduktion aufs wesentliche mit vielen netten Details.
Wer die Holga nicht kennt findet hier eine liebevolle Beschreibung…