Der berufliche Teil ist etwas weitläufiger. Ich habe nach fast 4 Jahren als angestellter bei Lovibond gekündigt. Ich war dort in einer Inhouse-Abteilung verantwortlich für die Print- & Webdesignarbeiten, als auch für alle Coding-Aktivitäten rund ums Web & Intranet. In diesen 4 Jahren habe ich – dies war meine erste Position nach der Ausbildung zum Fachinformatiker in Fachrichtung Anwendungsentwicklung – sehr viel gelernt, sowohl im Print als auch im Web-bereich.

Vor 2 Jahren begann ich zudem meine Liebe zum Design weiter auszuleben und mich als Freiberufler zu betätigen. Ich habe vermehrt für Unternehmensgründer gearbeitet und für diese sowohl die Webauftritte, als auch die Geschäftsausstattungen entwickelt und umgesetzt. Ich habe in diesen Jahren auch hier sehr viel gelernt und viele nette Kunden kennen gelernt, bei denen ich mich nochmals sehr für die Zusammenarbeit bedanken möchte. Ein besonderer Dank geht dabei an Raphael Steinmann, Dietmar Bätzel, Yusuf Tombul und vor allem natürlich Eva Ihnenfeldt für die gute Zusammenarbeit.

Doch trotz all der schönen Erfahrungen war es an der Zeit für den nächsten Schritt. Der nächste Schritt heißt für mich adesso AG, laut Wikipedia Platz 22 der Top-IT Unternehmen in Deutschland mit insgesamt über 800 Mitarbeitern. Ich habe dort Anfang des Jahres eine Stelle als Webengineer angetreten und werde nun hoffentlich viele interessante und auslastende Projekte erleben und kennenlernen. Ich werde viel mit Techniken wie HTML5, CSS3, jQuery etc. in Berührung kommen und mein Fokus wird sich damit wieder vermehrt aufs Coding richten.

Ich hoffe nun wieder mehr für Chukki.de aktiv sein zu können und ein Teil meines Know-Hows an euch, die Leser, weitergeben zu können. Weiterhin viel Spass auf Chukki.de

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Durch diese Einschränkung führen die Tooltips ein sehr unterbewertetes Leben im Webdesign – lediglich zu Suchmaschinenoptimierungszwecken oder von Online-Shops, welche oft ein Tooltip hinter einem der etlichen unverständlichen Icons verstecken wird diese Funktion genutzt – der Mehrwert fehlt oft auch einfach weil sie nicht durchgehend genutzt und mit sinnvollen Infos gefüllt werden. Es können weder Bilder eingebunden werden, noch eine Formatierung der Schrift vorgenommen werden, was sie zu einem sehr unschönen Werkzeug verkommen lassen.

Beispiele

Anwendungszwecke für die stylebaren Tooltips gibt es etliche. Ein Menü mit vielen Produktnamen kann z.B. durch ein Tooltip, welches ein Foto vom Produkt zeigt, aufgewertet werden. Auf Chukki.de werden die Tweets von Twitter über ein Tooltip eingebunden. Wenn man den Vogel in der oberen rechten Ecke mit der Maus berührt, wird der letzte Tweet in einer Sprechblase optisch schön dargestellt. So kann die Website durch ein echtes Highlight im Detail aufgewertet werden.

Hier 3 Beispiele für den Einsatz von Tooltips:

Tintometer.de – Tooltip mit Foto und zusätzlichen Infos zum Produkt als Vorschau

Coda – Tooltip mit Informationen zu dem Download des Apps

Chukki.de – Wir nutzen Tooltips um den letzten Tweet bei Twitter anzuzeigen, sobald man mit der Maus den Vogel berührt

Der Ein­satz von jQue­ry Tools

Die Grundlagen rund um die jQuery Tools habe ich im ersten Teil unserer Reihe bereits angesprochen und beschrieben. In diesem Teile gehe ich deshalb nur noch auf die Tooltip Funktion ein.

Ähnlich wie bei den Tabs, gibt es auch bei den Tooltips 2 Container die benötigt werden. Ein Container – z.B. ein Link, ein Bild oder auch einfach nur ein festgelegter Bereich welcher als “Trigger”, also als Auslöser fungiert und ein Container der den anzuzeigenden Inhalt beinhaltet.

<a href='#' id='trigger'>Trigger</a>
<div id='tooltip'>Der Trigger hat mich ausgelöst. Ich bin ein verstecktes Element und werde nur angezeigt wenn die Maus den Trigger berührt.</div>

Mit CSS wird der DIV Container anschließend versteckt und optisch angepasst. Mit display:none gehen wir sicher das der Container vorher ausgeblendet wird und erst angezeigt wird, wenn er benötigt wird. Alle anderen Informationen können mit ganz normalem CSS formatiert werden.

#tooltip{
    display:none;
    background:transparent url(images/bg.png) no-repeat top left;
    padding:5px;
}

Der wichtigste Teil, das JavaScript ist mit einem Aufruf der Tooltip Funktion getan:

$("#trigger").tooltip();

Der Selektor “trigger”, welchen wir im HTML Part dem Link zugewiesen haben, wird für das Tooltip als “trigger” genutzt. Für den Inhalt wird automatisch der Container “tooltip” genutzt, welcher unterhalb des Selektors liegt. Durch weitere Parameter kann das Tooltip aber noch verändert werdenm so kann die Position angegeben werden und mit welchen Effekt es erscheinen soll usw.

$("#trigger").tooltip({effect:fade; position:left;});

Mit diesen beiden zusätzlichen Parametern teilen wir dem Tooltip mit, das es mit einem “Fade” Effekt links neben dem Link eingeblendet werden soll, ähnlich unserem zwitschernden Vogel in der oberen rechten Ecke.

Das war es soweit eigentlich schon. Wieder wurde mit wenig Arbeit ein toller Effekt erzeugt, welcher das Surf-Erlebnis für den User auf der eigenen Website deutlich verbessert. Weitere Infos und Beispiele auf der Seite der jQuery Tools

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...