Anfangszeiten mit Plugins

Vor einigen Jahren, als das iPhone rauskam fingen vor allem viele Blogger damit an ein “Design” für ihre Seite online zu stellen welches möglichst gut lesbar war. Dazu wurden Plugins installiert, welche ein mobiles CSS und passende Funktionen lud um sich den Anforderungen zu stellen: Die Seite sollte schnell geladen werden, die Artikel konnten gut und einfach gelesen werden und im Prinzip sollte jeder damit glücklich gewesen sein. Problem dabei – die eigene, visuelle Identität ging in sehr vielen Fällen verloren wie auf dem Bild links zu sehen.

Responsive Design mit Media Queries

Abhilfe schaffen die in CSS3 geschaffenen Media Queries. Dabei handelt es sich eigentlich um eine Erweiterung der Medientypen aus CSS2 (Screen, Print, etc.) durch weitere Angaben wie Breite oder Höhe eines Ausgabemediums.

Verfügbare Eigenschaften sind:

• Breite und Höhe des Browserfensters (width / height)
• Breite und Höhe des Gerätes (device-width / device-height)
• Orientierung (orientation: landscape / portrait)
• Bildschirmauflösung
• uvm.

Quelle und weitere Parameter: http://www.w3.org/TR/css3-mediaqueries/

Die Anwendung dessen ist eigentlich ziemlich Simpel gestaltet. Es gibt verschiedene Anwendungsfälle, entweder durch Einbinden externer .css Dateien

<link rel="stylesheet" media="screen and (min-device-width: 480px)" href="480.css" />

als auch durch direkte CSS-Anweisungen in den HTML Dateien:

@media only screen and (max-device-width: 480px) {   } 

So ist es sehr einfach möglich für die jeweils nötige Auflösung eine eigene CSS Datei anzulegen. Die modernen Browser, welche auch auf den aktuellen mobilen Endgeräten vorhanden sind erkennen die Weiche. Allen anderen, wie der alte Internet Explorer z.B. werden einfach auf die Standard CSS Datei geführt.

Wunderbare Beispiele für Mediaquerie Designs zur Inspiration kann man auf mediaquerie.es finden.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Weitere Einssatzzwecke dieser Funktion sind z.B. Social Media Buttons: Wer einen hohen Wert auf diese Buttons legt, könnte sie rein theoretisch mit dem Benutzer beim Lesen mitfliegen lassen – so dass der User jederzeit die Möglichkeit hat die Buttons während des Lesens aufzufinden und den Beitrag zu teilen.

Ich habe das floating Menü (oder auch floating DIV) gestern hier auf Chukki.de eingebaut, wenn der User nun nach unten Scrollt bleiben ihm trotzdem die wichtigsten Funktionen erhalten – das Menü, die Suche und die Social Media Links. Auf einer Seite wie Chukki.de nicht unbedingt wichtig für ein gutes User Interface, aber ein Beispiel dafür wie man mit jQuery den Nutzwert einer Seite doch sehr leicht erhöhen kann.

HTML

...

<div id="float">Fliegender Content</div>

...

CSS

#float{width:300px; height:300px; background:red;}
.fixed{position:fixed; top:0; width:100%; z-index:100000000000;}

jQuery

$(document).ready(function () {
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var top = 163;
        if (y >= top) {
            $('#float').addClass('fixed');
        } else {
            $('#float').removeClass('fixed');
        }
    });
});

Im Prinzip ganz einfach: jQuery soll bei dem Event “Scroll” schauen auf welcher Höhe sich der User befindet. Mit der Variable “top” wird festgelegt ab welcher Höhe gescrollt werden soll – ist nun der User oberhalb dieses Wertes (also der Abstand nach oben hin größer als in “top” festgelegt), wird dem DIV Container “float” die CSS Klasse “fixed” zugewiesen. Per CSS teilen wir nun mit das die Position “fixed” sein soll, also feststehend – dadurch schwebt die Box mit dem User mit.

Ist der Benutzer nun wieder unterhalb des in “top” festgelegten Wertes wird die Klasse “fixed” wieder entfernt und der DIV Container verhält sich ganz normal wie man es gewöhnt ist.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Was ist für einen guten Webspace von Wichtigkeit?

• Hohe Erreichbarkeit
• Möglichst performant (wichtig für SEO)
• Aktuelle PHP / MySQL Version
• Unterstützung von Apache Modulen & htaccess
• Ausreichend Speicher
• Ein guter Preis
• Guter Service
• Übersichtliche Administrationsoberfläche

Bieten das nicht alle Webhoster?

Nein! Gerade erst habe ich mit erschrecken festgestellt das manch ein Webhoster den aktuellen Entwicklungen nachhinkt. So war bei einem Kunden die Installation von WordPress 3.2 nicht möglich, da die aktuellste PHP Version nicht vorhanden war. Ebenfalls konnte ich kein Backup mit dem von mir sehr stark favorisieren BackWPup erstellen und zu Dropbox schicken lassen, da der Webhoster keine gesicherte Verbindung zugelassen hat. Alles Ausschusskriterien, wenn man auf der Suche nach einer guten Lösung ist.

Meine Empfehlung

Ich bin derzeit selber noch bei einem anderen Hoster als den, den ich euch nun Empfehlen werde. Ich arbeite nun beruflich schon seit über 3 Jahren mit diesem Webhoster und habe mich erst vor kurzem selber entschieden das ich den Wechsel demnächst vollziehen werde. Die ganz klare Empfehlung geht in Richtung Hosteurope. Hosteurope bietet viel zu einem wirklich ansprechenden Preis. Angenommen ihr würdet euch für das Webpack L entscheiden, habt ihr dort für 5 Euro im Monat eigentlich alles was ihr braucht – 5GB Speicher, 10 Datenbanken, 24h Support, Traffic-Flatrate. Ebenfalls sehr gut ist das Admin Panel, welches sogar eine Umleitung der gehosteten Domains auf andere Server zulässt (nützlich z.B. beim Hosten eines tumblr Blog unter eigener Domain), ebenfalls nicht selbstverständlich wie ich vor kurzem wieder gemerkt habe.

Es mag noch viele weitere Hoster geben, die ähnlichen Service bieten, aber Hosteurope hat sich bei mir zur klaren Nr.1 gemausert, alleine dadurch das ich mitlerweile jahrelange Erfahrung mit ihnen habe und eigentlich noch nie enttäuscht wurde.

Chukki.de bei
Facebook | Twitter

Das Design lässt sich eigentlich sehr leicht durch einen zusätzlichen Aufruf von ein paar CSS Klassen regeln, ist von Facebook selber jedoch schlecht bis garnicht dokumentiert.

Wichtig: Um das Design anzupassen muss das alte fb:fan anstatt des neuen fb:like-box benutzt werden, denn dort hat Facebook die Designanpassungen bisher nicht unterstützt. Die etwas ältere Facebook Lib wird geladen und mit der “profile_id” wird eure Fan-Site mitgegeben – diesem Code muss lediglich der Link zur CSS Datei hinzugefügt werden (css=”fb.css?1″):

Umsetzung

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/de_DE"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="1149798085427047" stream="0" connections="8" logobar="0" width="253" height="220" css="fb.css?1"></fb:fan>

Dies sagt dem Facebook Frame das er die Datei fb.css für die Styleinformationen nutzen soll. Mit der ?1 wird lediglich der Revisionsstand der Datei angezeigt. Solltet ihr also ein Update machen wollen, einfach durch ?2 erneuern und die Datei wird neu geladen, ansonsten werden die CSS informationen gecached.

Nun kommen wir zur .css Datei – mit Firebug für Firefox, Chrome o.ä. könt ihr euch die Klassen im Detail anschauen. Ich habe mal eine Beispieldatei mit einigen ID’s und Klassen angelegt, welche den Rahmen entfernt und den Inhalt etwas cleaner macht, so das nur noch der Like Button, das Profilbild , etwas Text und die Profilbilder der nutzer angezeigt wird.

.fan_box a{
	color:#257580;
}
.fan_box{height:160px !important; }
.fan_box .full_widget{
  border: 0 !important;
  background: none !important;
  position: relative;
}
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
  color:#2d8f9e;
  font-size:14px;
}
.fan_box .connect_action{
  padding: 0 0 10px 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}
span.total{
  color: white;
}
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: Helvetica;
  font-weight: normal;
  color: #282828!important;
  padding-top: 1px !important;
}

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

In der neusten Version von Chukki.de, welche seit gestern online ist, habe ich nun auch erstmals darauf gesetzt um Gallerien und Twitter Status-Updates einzubinden. Das schöne daran ist die Tatsache das es nicht immer ein komplett neuer Blogbeitrag sein muss um die Seite am leben zu halten. Ein Statusupdate bei Twitter oder ein paar geschossene Fotos sind schneller mal angelegt als ein Tutorial über jQuery Funktionen o.ä.

Tumblr ist dafür gerade durch diese Funktion bekannt geworden zwischen den Post Types zu unterscheiden und hat sich auch deswegen von WordPress.com immer stärker differenziert. Hier hat WordPress nun endlich nachgezogen und ein schönes Stilmittel bereitgestellt. Einfach mal kurz einen Link Posten, den letzten Twitter Statusupdate, oder ein paar geschossene Hipstamatic Fotos – all dass ist nun ganz leicht einbindbar.

WordPress unterscheidet dabei zwischen verschiedenen Formaten:

• standard – Ein normaler Blogbeitrag
• aside – Typischer Beitrag nur ohne Title
• gallery – Eine Gallerie von Bildern, einzubinden per Gallery Short Code
• link – Ein Link zu einer anderen Seite. Kann durch Plugins z.B. so getaltet werden wie bei Facebook das eine kurzvorschau des Links dargestellt wird.
• image – Ein einzelnes Bild, entweder der erste img HTML Tag im Beitrag oder eine URL.
• quote – Ein Zitat, am besten im “blockquote” HTML-Tag mit der Quellenangabe, etc.
• status – Kurzer Statusupdate, ähnlich zu Twitter
• video – Ein Youtube, MyVideo oder Vimeo Video, direkt eingebunden oder auch einfach nur per Link
• audio – Eine Audiodatei, wie etwa ein Podcast.
• chat – Ein Chat Verlauf zwischen 2 oder mehreren Chatpartnern.

Die Umsetzung

Die Umsetzung ist mit ein wenig WordPress Kenntnis eigentlich leicht machbar, zuerst muss in der functions.php die Funktion “freigeschaltet” und anschließend in den Theme dateien der Support für die Formate bereitgestellt werden.

Functions.php

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

Hier wird der Support für die Funktion bereitgestellt in dem array() müssen die Formate eingestellt werden welche später genutzt werden sollen. Die Parameter entsprechen der Auflistung oben.

Index.php, Single.php, Archiv.php, Search.php

if ( has_post_format( 'status' )) {
  echo 'Das ist ein Twitter Statusupdate';
}

In den Theme Dateien könnt ihr nun die Formate abfragen und je nach Typ drauf reagieren. Dies ist ganz einfach per if Abfrage möglich. Wichtig ist daran zu denken das auch die Archiv.php, Search.php, etc. abgearbeitet werden, denn sonst könnte es zu einem unschönen Effekt kommen.

Design

Ein besonderes Merkmal der Post-Formats ist die Unterscheidung per Icon, auch dies ist bekannt geworden durch die Tumblr Blogs. So kann jedem Format eine eigenes Icon bereitgestellt werden um schnell zwischen den Typen differenzieren zu können. Ich habe auf Chukki.de vorerst nur 2 Icons im Einsatz, eins für die Gallerie und eins für Twitter – für weitere Inspirationen könnt ihr mal bei Elmastudio vorbeischauen.

Einsatz

Um die Post Formats zum Einsatz zu bringen müsst ihr nun ganz einfach beim erstellen eines neuen Beitrages im WordPress Backend das Format einstellen. Die Liste an Formaten beinhaltet alles was ihr vorher in der functions.php vorgegeben habt. Wichtig ist nach wie vor das ihr auch für jedes Format den Code angepasst habt. Viel Spass damit.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Heute möchte ich gerne auf die jQuery Selektoren eingehen – diese sind so ziemlich das wichtigste was es in jQuery zu beachten gibt. Ein falsch gesetzter Selektor kann die Performance einer jeden Website sehr stark abfallen lassen, was wieder der Usability schadet – doch dieser sollte eigentlich durch das Framework geholfen werden.

Aufbau

Kommen wir zum grundsätzlichen Aufbau von jQuery:

$("selektor").funktionsname({ function({ }); });

Der Selektor begrenzt sich auf

$("selektor")

Damit ist dem ganzen nun fast keine Grenze mehr gesetzt. Man kann HTML Elemente direkt ansprechen, auf Klassen zugreifen, ID’s auswählen und hat durch die weitere Spezialisierung durch “:last”, “:first”, “:parent”, “:child” wie man es von CSS mit “a:hover” o.ä. kennt noch gezielteren Zugriff um z.B. nur das letzte Element einer Liste zu löschen oder zu verändern.

Beispiele

Selektor für das Überschriftenelement H2:

$("H2")

Klasse “content”:

$(".content")

ID “wrapper”:

$("#wrapper")

Wie ihr also sehr eigentlich ziemlich einfach… ihr könnt direkt auf die DOM (Document Object Model) Elemente zugreifen ohne lange zu überlegen. Wenn wir jetzt etwas spezieller werden wollen z.B. nur die Listenpunkte einer bestimmten Klasse sieht es wie folgt aus:

$("ul .liste li")

Damit greift ihr nur auf die “li” Elemtente der unordered list “ul” mit der Klasse “liste” zu – also wirklich sehr gezielt.

$("a [rel="extern"])

Alle Links die ein rel=”extern” mit sich bringen werden selektiert.

$("ul:child")

Alle Kindelemente von “ul”, einer unordered list – in diesem Fall eigentlich immer ein “li”.

Ich kann jetzt nicht im Detail auf jeden Selektor eingehen, auf der jQuery Selectors Website findet ihr eine Übersicht welche Selektoren es alles gibt. Es sind eigentlich keine Grenzen gesetzt, es können Formularfelder selektiert werden die einen gewissen Inhalt haben, bestimmte bilder die einen gewisses “alt” Attribute erfüllen usw. – am besten einfach mal ein wenig rumprobieren, mit ein wenig Training läuft das ganze dann meist wie von alleine.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Ich habe zuletzt einige WordPress Versionen – vornehmlich auf Hosteurope gehosteten Seiten – installiert und kam immer wieder zu dem Problem das dieses Feature nicht funktionierte. Die Fehlermeldung lautete “WP-Content konnte nicht gefunden werden”.

Als ich mich daran machte alles über den FTP Client zu checken …der Order, war da – Rechte, alle vernünftig vergeben… was nun?

Nach einiger Zeit der Suche habe ich dann eine Lösung im Inernet gefunden. Und zwar muss die “wp-config.php” angepasst werden.

putenv('TMPDIR=/__DOCUMENT ROOT___/wp-content/tmp');
define('WP_TEMP_DIR', ABSPATH . 'wp-content/tmp');

Die Document Root muss von Blog zu Blog bearbeitet werden. Dafür müsst ihr eine .php Datei anlegen und diese mit

<?php phpinfo(); ?>

abspeichern. Diese ruft ihr nun auf und sucht nach “DOCUMENT_ROOT”. Der hier eingetragene Pfad muss kopiert werden und für “DOCUMENT ROOT” in der wp-config.php eingesetzt werden.

Zu guter letzt benötigt ihr einen Ordner mit dem Namen “tmp” in “wp-content” und dieser muss die chmod Berechtigung 777 (Lesen-Schreiben-Ausführen) haben .

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Normalerweise würde es niemanden interessieren wenn eine Person bzw. dessen Firma etwas derartiges äußern würde. Doch das iPhone und das iPad sind Verkaufsschlager die ihresgleichen suchen. Gestern erst wurde vermeldet das bereits 1 Million iPads verkauft wurden. 1 Million Geräte, dessen Hauptaufgabe die Erkundung des Webs ist. 1 Million Geräte und User die ohne Flash auskommen.

Dazu kommen noch weltweit etwa 85 Million verkaufte iPhones. Also rund 86 Million potentielle Kunden für jede kommerzielle Website – selbst wenn weniger als 1% dieser Nutzerschicht die eigene Website besuchen würde, wäre so ziemlich jede Firma oder jeder Online Shop glücklich. Bei diesen Zahlen also eine Äußerung die man ernst nehmen sollte.

Berechtigte Kritik?

Dennoch stellt sich die Frage ob Steve Jobs recht hat, mit dem was er sagt. Viele Stimmen im Internet sagen Apple würde Flash nur nicht zulassen, weil das eigene Geschäftsprinzip mit den AppStore und dessen Apps damit zerstört würde. Viele andere User wiederum stimmen ihm im vollen Umfang zu – Flash sei von gestern, die Zukunft ist HTML5 – denn HTML5 ist offen und für jeden benutzbar … ohne zusätzliche Software neben dem Browser.

HTML5 ist die Zukunft, aber eben nicht die Gegenwart. Jeder Webentwickler u. -designer weiß wie groß der Anteil an Internet Explorer 6 Usern im Web ist. Ein Browser von 1999. Steve Jobs möchte gerne etwas zum Standard erklären, was zum aktuellen Zeitpunkt noch von keinem aktuellen Browser zu 100% unterstützt wird. Viele Videoportale haben mitlerweile eine Weiche eingebaut. Flash für die Leute von gestern, HTML5 für die von heute. Sicherlich eine gute Idee…aber Ressourcen die sich nicht jede Firma leisten kann. Bis auch der letzte User auf einen modernen Browser umgestellt hat, wird noch einige Zeit vergehen.

Ein weiterer Punkt ist, das Flash für die Maus gemacht wurde, und nicht für den Finger. Die Maus besitzt einen Zeiger der über ein Element fahren kann und damit ein “Hover” Event auslöst. Dies ist mit dem Finger nicht möglich…der Finger ist entweder auf dem Touchscreen oder er ist es eben nicht. Somit müssten sehr sehr viele Flash-Seiten an die neue Usability angepasst werden und in dem Zuge könnte man doch direkt auf etwas User-freundlicheres Umstellen…meint zumindest Steve Jobs.

Adobes Sicht

Adobe hat die Kritit an Flash aufgenommen und mit einem kleinen Statement dagegen gehalten. Wenn man dies mit dem vergleicht was Steve Jobs zu der Thematik zu sagen hat, wirkt die Äußerung des Herrn Shantanu Narayen (Adobe Chef) auf mich jedoch so, als ob er nicht wirklich viele Argumente dafür hätte, warum Flash unbedingt auf dem iPhone und dem iPad laufen müsste.

Shantanu Narayen sagt so viel, wie: “Wir sind nich alleine Schuld daran das Flash nicht so gut läuft, der Akku würde nicht so viel Strom fressen wenn Apple eine Hardwarebeschleunigung anbieten würde und Apples System ist auch properitär“. Irgendwie wirkt das sehr einfallslos…

Kommentar

Meine Sicht der Dinge ist, dass Flash der Vergangenheit angehört. Flash ist zumindest auf dem Mac sehr Ressourcenfressend und sollte – wenn Adobe sich durchsetzen möchte – schon überall gleichgut laufen. Von den Ladezeiten auf mobilen Geräten möchte ich garnicht erst anfangen, denn selbst normale HTML Websites die nicht für mobile Geräte optimiert sind können mir schon manchmal den letzten Nerv rauben.

Zudem lassen sich mitlerweile mit JavaScript Frameworks, wie z.B. jQuery oder Mootools viele schöne Effekte zaubern. So kann jede Website dynamisch gestaltet werden und niemand wird Flash vermissen. Gleiches gilt für die Videoseiten – hier wird es zwar noch ein paar Tage dauern, aber die großen wie YouTube und Vimeo haben schon auf h.264 und HTML5 umgestellt und sind für die Zukunft gerüstet – ein moderner Browser wird natürlich vorrausgesetzt.

Ob der Weg von Apple, Flash überhaupt nicht auf dem iPhone zu erlauben der Richtige ist, sei dahingestellt – aber es ist definitiv ein konsequenter und einer der evtl. das Internet der nächsten Jahre mitprägen wird.

Was meint ihr dazu? Hat Steve Jobs mit seinen Aussagen recht?

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Umsetzung

Doch wie macht man das? Eigentlich ganz einfach. Wir benötigen dafür jQuery (aktuell in Version 1.4.2) und fragen via Eventabfrage ab ob der User die Browsergröße verändert. Wenn dies geschieht, wird einem (möglichst gut aufgelöstem) Bild auf der Seite mitgeteilt das es seine größe verändern soll – und zwar auf die des Browser-Viewports.

Hört sich erst einmal ganz einfach an – und das ist es im Prinzip auch, soweit man natürlich schon etwas mit JavaScript bzw. jQuery gearbeitet hat.

CSS

body{margin:0px;}
#background{position:fixed; top:0; left:0; z-index:0;}
#ausgabe{background:black; padding:10px 15px; margin:10px; border:1px solid #cecece; color:white; opacity:0.8; position:absolute; top:140; z-index:10; font-size:12px; width:500px;}

HTML

<body>
     <img src="bg.jpg" alt="Background-Image" id="background" />
     <div id="ausgabe">Ein Layer über dem Hintergrundbild</div>
</body>

Wir legen eine kleine HTML Datei an, welche nur das Bild zur Skalierung und eine halbtransparente Ebene mit dem Content beinhält.

JavaScript

$(document).ready(function(){
    var width  = $(window).width();
    $("#background").width(width);
    $(window).resize(function(){
        width  = $(window).width();
        $("#background").width(width);
    });
})

Wenn das Dokument fertig geladen ist, wird die größe des Browser-Viewports an die Variable width weitergegeben und die ID Background (das Bild) in der Breite an das Fenster angepasst. Die höhe skaliert sich automatisch mit. Das gleiche soll natürlich auch passieren wenn sich die Fenstergröße ändert. Dafür fragen wir das Event resize in Verbindung mit dem Browserfenster (window) ab. Sollte sich hier etwas tun wird das Event ausgelöst und ebenfalls die Breite angepasst.

Also insgesamt ein leichtes diesen Effekt zu nutzen. Optimal z.B. für Seiten im Vintage Style.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Was bedeutet Scrollable? Im Grunde ist es versteckter Content, der durch eine Scrollfunktion sichtbar gemacht wird. Optimale Einsatzgebiete dafür sind Bildergalerien oder Newsticker. So wird der Fokus auf ein Thema oder eine begrenzte Anzahl an Fotos gelegt – sollte einen User dies nicht für Interessant halten, kann er mit einem klick andere Themen und Bilder sichtbar machen. Insgesamt eine sehr schöne und imposante Funktion, welche den Content auf Seiten deutlich lebendiger werden lässt.

Impressionen

Da man diese Funktion mit Bildern nur schlecht präsentieren kann, erläutere ich in diesem Fall nur anhand von Beispielen den Einsatz.

Coda
Optimal nutzt wieder einmal Panic’s Coda diese Funktion. Coda hat die eigene Seite in 7 Bereiche aufgeteilt, welche alle Informationen zu der Software abdecken. Möchte man nun Wissen wie der Editor funktioniert, klickt man auf den Menüpunkt und der Inhalt “rutscht” von rechts nach Links in den Fokus. Also alle Informationen schnell an der Hand ohne die Seite neu laden zu müssen.

Chukki.de
Auf Chukki.de wird diese Funktion ebenfalls im Kopfbereich genutzt. Als Vorschau für den WordPress Theme Download habe ich einige Bilder hinterlegt welche abwechselnd dargestellt werden.

jQuery Tools Example
Im Beispielbereich der jQuery Tools ist ein Anmeldungs Formular mit mehreren schritten, welche Step-by-Step abgearbeitet werden, erläutert. Hier wird im ersten Schritt der Benutzername eingegeben und wenn alle Informationen ausgefüllt sind kann zum nächsten Schritt “gerutscht” werden bis die Anmeldung abgeschlossen ist.

Erläuterung

Natürlich ist wieder die jQuery Tools Library nötig um folgendes Script zu verwenden. Der Download ist nach wie vor auf der jQuery Tools Seite zu finden

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable();
});
</script>

Dieses Stück Quelltext besagt das auf den Div Container mit der Klasse “scrollable” die Funktion Scrollable ohne jegliche weiteren Parameter angewendet werden soll. Das ist es im groben auch schon was man dafür brauch. Aber auch hier bieten die jQuery Tools viele viele Parameter mit denen man die Funktion weiter anpassen kann.

So kann man mit “size” die Größe der Schritte angeben, mit “vertical” ob das Scrollen statt horizontal vertikal ausgeführt werden soll und mit “items” welche Klasse die Bilder oder Texte beinhalten soll. Dies kann z.B. so aussehen:

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable({size: 1, vertical: true, loop: true});
});
</script>

Diese Parameter verändern das Scrollable dahin das nur 1 Bild weiter gescrollt wird, dabei aber Vertikal anstatt Horizontal und das wenn das letzte Element erreicht ist, wieder vorne begonnen werden soll.

Was brauchen wir an HTML und CSS um das ganze zu realisieren?

HTML

<!-- vorige Seite Button (wird mit CSS gestylet) -->
<a class="prevPage browse left"></a>
<!-- Die Scrollable haben wir im JavaScript Code als zu Scrollendes Objekt ausgewählt und muss den Rest beinhalten  -->
<div class="scrollable">
    <!-- Die Klasse "items" beinhaltet immer alle Bilder, es sei denn ein anderes Parameter ist angegeben -->
<div class="items">
        <img src="http://example.com/bild1.jpg" />
        <img src="http://example.com/bild2.jpg" />
        <img src="http://example.com/bild3.jpg" />
        <img src="http://example.com/bild4.jpg" />
        <img src="http://example.com/bild5.jpg" />
    </div>
</div>
<!-- nächste Seite Button (wird mit CSS gestylet) -->
<a class="nextPage browse right"></a>

CSS

div.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}
div.scrollable div.items {
    width:20000em;
    position:absolute;
} 

Dieser CSS Code sagt das alles was in der Scrollable Klasse überhängt abgeschnitten werden soll. Die Items werden absolut positioniert und haben eine riesige Breite damit der komplette Inhalt nebeneinander dargestellt werden kann. Dadurch das Scrollable auf eine Breite von 660px begrenzt ist, gibt es hier keine Darstellungsprobleme.

Alles weitere an Feintuning entnehmt ihr wie immer der jQuery Tools Seite oder einem Beitrag auf noupe.com, welche ebenfalls die Funktionen sehr gut erläutert. Bei Fragen einfach ein Kommentar schreiben oder mich über Twitter kontaktieren.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Jetzt wurde die Aktion aufgebessert und Microsoft spendet insgesamt 16 Essen für jeden Download des IE8, wenn man vorher die veraltete Version 6 des Browser genutzt hat. Ein weitere ansporn also für alle, den IE6 verschwinden zu lassen.

Viele können davon profitieren… die Obdachlosen haben etwas zu essen, die User erhalten ein neues Browserfeeling, Webentwickler können endlich die Zeit welche sie sonst mit der Optimierung für den IE6 genutzt haben dafür nutzen moderne Techniken in die Seite einzubauen und Microsoft baut seinen Marktanteil evtl. wieder etwas aus.

Die Aktion läuft noch bis zum 30. September… also steigt um und ladet euch den neuen Browser runter – damit tut ihr mir, meiner Berufsgruppe und nochmehr – den Obdachlosen was gutes!

BrowserForTheBetter.com

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Und genau da setzt jQuery Tools an – einmal als eigenständige Datei oder als Komplettpaket in Verbindung mit der jQuery Library auch wahlweise auf einem, von den Entwicklern bereitgestellten CDN (Content Distribution Network). So kann innerhalb von wenigen Sekunden jede Website durch schöne und sinnvolle Effekte aufgewertet werden.

Die jQuery Tools können hier heruntergeladen werden und bieten viele verschiedene Elemente um die eigene Seite durch Features in der Usability zu verbessern und optisch aufzuwerten – Tabs, Tooltips, Scrollable, Overlay, Expose und Flash Embed sind die Funktionen, welche die Library mit sich bringt. Was sich hinter den ganzen Begrifflichkeiten versteckt erläutere ich in dieser Reihe. Heute angefangen mit den Tabs, werde ich jeden Tag ein weiteres Element der jQuery Tools mitsamt Programmierbeispielen erläutern.

Tabs – für platzsparenden Content

Tabs sind seit einigen Jahren voll im Trend. Angefangen mit dem Mozilla Firefox welcher Tabs dazu nutzt um in nur einem Browserfenster möglichst viele Websites zu öffnen, ist es mittlerweile auch auf Websites gängig Tabs zu nutzen, um möglichst viel Content platzsparend unterzubringen.

Beispiele dafür findet man im Internet genug – Einsatzgebiete sind bevorzugt Klappmenüs oder aber um News, Suche und weiteres in einem Container zu verstecken und dem User nur das zu zeigen was er gerade benötigt.

Beispiele

Tintometer.de – Tabs werden hier genutzt um sehr viele Menüpunkte in einem Klappmenü unterzubringen.

AQUALYTIC.de – Hier werden mithilfe der Tabs die Suche, die News und die Produkte geschickt in einem Container versteckt. Der User bzw. Kunde hat schnellen Zugriff auf weitere Informationen.

Sportschau.de – Die Programminformationen für die kommenden Tage sind durch Tabs in Szene gesetzt und somit sind die Informationen schnell und leicht abrufbar.

Spox.com – Auch Spox benutzt Tabs um die vielen verschiedenen Sportarten zu unterteilen und dem jeweiligen Bereich die News schnell zur Verfügung zu stellen.

Der Einsatz von jQuery Tools

Durch jQuery Tools können die Tabs sehr leicht umgesetzt werden. Nur wenige Zeilen Code sind nötig und man hat ein wunderbares Ergebnis mit vielen Möglichkeiten der Individualisierung.

HTML
Der HTML Aufbau ist ziemlich einfach. Wir benötigen nur 2 Container. Einen mit den Links (Tab Buttons) und einen mit dem Inhalt der Tabs.

<ul class='tabs'>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tab-content">
<div>Tab 1 content</div>
<div>Tab 2 content</div>
<div>Tab 3 content</div>
</div>

JavaScript
Aber auch der JavaScript Teil ist nicht viel schwieriger. Nur eine einzige Funktion reicht um die Tabs umzusetzen. Es wird lediglich dem DOM Selektor mitgeteilt auf welchen Bereich er die Funktion anwenden soll. In diesem Beispiel dem HTML Element ul mit der Klasse tabs für die Navigation und die Container für das HTML Element div mit der Klasse tab-content und allen unterhalb liegenden div Containern.

$("ul.tabs").tabs("div.tab-content > div");

Aber auch weitere Parameter sind ohne weiteres möglich, so dass die Tabs den eigenen Wünschen sehr gut angepasst werden können.

$("ul.tabs").tabs("div.tab-content > div", {current: 'active', event: 'mouseover', effect: 'slide', fadeInSpeed: '500'});

In der geschwungenen Klammer {} werden die Parameter übergeben. Current gibt die Klasse bekannt die genutzt werden soll, wenn ein Tab aktiv ist. Event wird in diesem Fall genutzt um der Funktion mitzuteilen das sie bei einem Mouseover funktionieren soll und nicht bei einem Klick, wie gewöhnlich.

Effect stellt verschiedene Effekte aus der jQuery Library bereit, die der Programmierer nutzen kann um ein Tab zum Vorschein zu bringen. Standardmäßig wird hier nur zeigen und verstecken genutzt, aber alternativ können auch fade, slide und horizontal als Effekt hinzugefügt werden um eine schöne Animation zu zaubern. Der Parameter fadeInSpeed gibt die Dauer der Millisekunden an mit der die Animation durchgeführt werden soll. Dieser Wert sollte nach den eigenen Erfahrungen ausgefüllt werden.

Das ganze kann dann noch mithilfe von CSS optisch aufgewertet und den eigenen Wünschen weiter angepasst werden. Weitere Informationen und Parameter können der Entwickler-Seite entnommen werden.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Die Diskussion über das Ableben des IE6 ist momentan größer denn je. Webdesigner und -entwickler fordern mit Nachdruck, dass eine weitere Unterstützung des Internet Explorers 6 unterbunden werden sollte. Die Fakten sind da: Der IE6 ist mitlerweile 8 Jahre alt, kann keine aktuellen Webstandards richtig umsetzten, die Dateiformate .png und .svg werden nur sehr geringfügig unterstützt und er bedeutet oft einen (riesigen) Mehraufwand bei der Umsetzung von Projekten.

Please update!

Die Entwicklung der Debatte rund um den IE6 entwickelt sich momentan dahin, das immer mehr große Web 2.0 Websites die Unterstützung fallen lassen und einen Hinweis darauf anbieten, doch bitte einen neuen und aktuellen Browser zu nutzen. Da ist unter anderem die Initiative “IE6 No More” mit einer Reihe an unterstützenden Websites und einem Warnhinweis, der allen Usern mit IE6 eine Update Meldung anzeigt.

Eine weitere Initiative sind die sogenannten “Twibbons” (Mini Logos auf Twitter Avataren). Hier gibt es ein Twibbon für die Kampangne “IE6 Must Die” mit mitlerweile mehr als 12.000 aktiv unterstützenden Usern. Der Nachteil hierbei ist, dass sich bei Twitter fast nur Internet Affine Menschen bewegen, welche mit dem IE6 eh nur noch selten was zu tun haben – es ist also nicht viel mehr als ein Statement ohne weiterem wirken.

Die Statistik sagt…

Größere Websites wie Xing (“Internet Explorer 6: Bitte wechseln Sie auf einen neueren Browser”) und Digg (“Much Ado about IE6″) haben sich in letzter Zeit daran gemacht ihre Statistiken auszuwerten und zu analysieren, wieviel und welche ihrer User noch den IE6 nutzen. Bei Xing ist man zu dem Ergebnis gekommen, dass die Seitenzugriffe des IE6 in der Woche sehr stark zulegen und am Wochenende eher gering sind. Dies ist ein Hinweis darauf das der IE6 nicht im privaten, sondern eher im wirtschaftlichem Umfeld (Arbeit) genutzt wird.

Und genau hier ist der Knackpunkt, welchen auch Microsoft in einem Pressebericht aufgreift – der IE6 wird von Usern genutzt die aufgrund der eingeschränkten Administrationsrechte im Büro oder aufgrund einer Terminal Server Infrastruktur im Betrieb nicht updaten können. Viele IT-Administratoren fehlt das Budget für ein Update der kompletten Serverlandschaft und verfahren aus diesem Grund nach dem Motto “Never change a running System” – eben auch aus dem Aspekt heraus das (fast alle) Websites noch für den IE6 optimiert werden.

Fazit

Der IE6 ist ein Browser, welchen niemand haben möchte – aber welcher auch auf absehbarer Zeit nicht so schnell vom Bildschirm verschwinden wird. Man kann den Vorgang als Webdesigner nur damit beschleunigen, indem man die Optimierung (sofern möglich) für den IE6 fallen lässt. Umso mehr Seiten es im Web gibt, die keine Optimierung mehr bieten, desto schwerer wird das arbeiten mit dem IE6 und die Administratoren bzw. Firmen sind irgendwann dazu gezwungen diesen Schritt zu machen.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Zum Glück hat sich dieses Problem durch Breitband-Anschlüsse etwas verringert, trotzdem ist eine Optimierung der Website Geschwindigkeit nicht zu unterschätzen. Angriffspunkte um die Geschwindigkeit zu verbessern sind die Bilder, die CSS & Javascript Dateien und die gZip Komprimierung der Seite mittels PHP und Apache.

Bilder

Heutzutage ist es normal große, aufwändige Bilder zu nutzen um die Website optisch aufzuwerten. Die Möglichkeit hier: Abspecken der Bilder – entweder durch Photoshop oder Fireworks selber oder durch spezielle Komprimierungstools. Ein Online-Anbieter, welche die Dateien komprimiert ist Smush.it.

Hier können entweder Links zu den Bildern angegeben werden, welche Stapelweise verarbeitet werden – oder aber die andere Möglichkeit: Die Dateien werden nacheinander vom Desktop aus hochgeladen. Alle Bilder werden anschliessend in einer .zip Datei archiviert und können dann heruntergeladen werden.

CSS & Javascript

Ein wichtiger Punkt sind die CSS & Javascript Dateien – diese sollten nach Möglichkeiten ausgelagert werden, denn somit werden sie vom Browser zwischengespeichert und im Cache aufbewahrt. Sollte ein User nun die folgenden Seiten besuchen müssen diese Informationen nicht erneut geladen werden. Auch die CSS & Javascript Dateien sollten komprimiert werden, dafür gibt es eine Reihe von Online-Anbietern die dieses ermöglichen.

U.a. sind dies Javascriptcompressor.com, CSSDrive.com und Ebiene.de. Weitere sind leicht bei Google zu finden. Trotzdem ist beim komprimieren Vorsicht geboten, denn ab und an funktionieren anschliessend einige JS Funktionen nicht mehr. Hier sollte die eigene Website also anschliessend nochmals getestet werden. Um die Dateien weiter programmierfähig zu halten sollten 2 Versionen angelegt werden – eine komprimierte und eine lesbare an der weiterentwickelt werden kann.

gZip komprimierung

Eine oftmals unterschätzte Möglichkeit der komprimierung ist die “on-the-fly” Möglichkeit mittels PHP & Apache. Seit PHP4 gibt es die Möglichkeit durch einen Aufruf der Funktion ob_start(); die gZip komprimierung anzuschmeissen. Dafür muss lediglich folgender Code am Anfang der Seite plaziert werden:

<?php
     ob_start('ob_gzhandler');
?>

Dadurch wird die Seite zu lasten des Servers vor Ausgabe komprimiert und an den Browser gesendet. Die modernen Browser unterstützen dies Problemlos. Die älteren können durch eine Abfrage davon ausgenommen werden:

<?php
    if( strpos( @getenv ("HTTP_ACCEPT_ENCODING"),"gzip") !== FALSE)
        ob_start("ob_gzhandler");
?>

Eine weiter Möglichkeit ist das Apache Modul mod_gzip – Dazu sollte eine info.php mit der Funktion

<?php
    phpinfo();
?>

erstellt werden. Diese anschließend aufrufen und nachprüfen ob das Apache Modul vorhanden ist. Wenn dies der Fall ist eine .htaccess Datei erstellen und mit dem einfachen Befehl

SetOutputFilter DEFLATE

die gzip komprimierung aktivieren.

Abschluss

Es gibt noch ein paar weitere Möglichkeiten die Geschwindigkeit der Seite zu verbessern. Ein paar gute Anhaltspunkte hierfür gibt YSlow – ein Firefox-Plugin von Yahoo, welches die Website untersucht und weitere Verbesserungsvorschläge gibt.

Chukki.de bei
Facebook | Twitter

Die Neuerungen:

• Plugin-Schnittstelle integriert
• Rechtschreibprüfung
• Quick-Open (Schnelles öffnen von Dateien mit CMD+Q
• Syntax-Highlightning für Cappuccino (Objective-J)

Die Liste der Verbesserungen gestaltet sich auch dementsprechend lang. Die komplette Liste der Änderungen ist hier einzusehen.

Mithilfe der Plugin-Schnittstelle können Entwickler über den Coda Plugin Creator Arbeitsschritte vordefinieren oder aber auch z.B. selektierte Wörter – ähnlich einem WYSIWYG Editor – mit HTML Tags umschließen.

Für alle die Coda noch nicht kennen: Coda ist eine Entwicklungsumgebung für den Mac, die sich dadurch auszeichnet, dass alles in einem Programm steckt. Seiten können in verschiedenen Sprachen entwickelt werden, CSS kann innerhalb einer Benutzeroberfläche “zusammengeklickt” werden und der integrierte FTP-Client lädt alles anschließend durch das Klicken auf “Speichern” (CMD+S) automatisch hoch.

Die integrierten Bücher für PHP, Javascript, CSS und HTML sowie eine Terminal Session, eine Versionsverwaltung und die Preview zur sofortigen Darstellung der Seite runden das ganze ab.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...