Das iPad soll die Medienlandschaft (r)evolutionieren – wieder einmal. Wie es der iPod mitsamt iTunes für die Musikindustrie getan hat und wie es das iPhone mit dem AppStore für die Softwareentwickler getan hat. Das iPad soll lesbare Inhalte modern aufbereitet ins neue Jahrhundert bringen. Es soll neue Einnahmen für die aussterbenden Tageszeitungen und Verlage bieten – durch eine neue Aufmachung und Ergänzung mit interaktiven Inhalten soll ein völlig neues Leseerlebnis geboten werden und das alles in einem Gerät.

Die Idee klingt simpel, warum 100 Bücher besitzen – warum eine Tageszeitung lesen in der das steht, was gestern bereits im Internet gestanden hat? Akuelle Inhalte, kompakt in einem Gerät, das ist die Devise. Tageszeitungen wie u.a. die Welt updaten ihren Inhalt 4 mal täglich in einer modernen, lesefreundlichen Aufmachung optimal für die Displaygröße des iPads konizipiert.

Mit iBooks hat Apple neben dem iTunesStore und dem AppStore nun ein drittes multimediales Standbein mit dem Bücher direkt vom iPad aus auf das Gerät geladen werden können – immer und überall. Die Preise orientieren sich an den Hardcovern aus dem Laden – für viele ein großere Kritikpunkt, da ja keine Druckkosten o.ä. entstehen. Ob sich diese Preise durchsetzen werden, wird sich noch zeigen.

Das iPad kann noch deutlich mehr als nur das. Es kann all das, was man vom iPhone (ausnahme Telefonie/SMS) oder iPod Touch gewohnt ist. Filme lassen sich wunderbar auf dem schönen Display anschauen, Musik kann während des Surfens gehört werden, viele lustige und zeitvertreibende Spiele können aus dem AppStore geladen werden. All das macht es ein wenig besser als die beiden kleinen Geschwister, denn das große Display zeigt erst jetzt wofür MultiTouch eigenlich konzipiert worden ist. In der Foto App lassen sich Fotostapel schön aufziehen, in Mail gibt es endlich wie auf dem Desktop eine eigene Spalte mit dem Posteingang und zusätzlich wird eine E-Mail angezeigt, die iPod App erinnert sehr stark an die Desktopvariante von iTunes in der man auch Playlisten usw. locker anlegen kann…insgesamt wird das Display einfach viel besser ausgenutzt, die App entwickler haben sich viel Mühe gegeben um die Layouts optimal an die neue Größe anzupassen. Das Erlebnis, welches viele Apps bieten wird hier auf ein neues Level gehoben.

Wofür?

Die Frage danach, wer solch ein Gerät benötigt lässt sich ganz einfach beantworten: All jene, die bisher keinen mobilen Mac ihr eigen nennen können. Ich persönlich habe zuhause “nur” einen iMac stehen – zum arbeiten ein wundervolles Stück Hardware, aber an Abenden wo ich beim Fernsehen nebenher etwas surfen, chatten oder die neusten Tweets checken möchte absolut überdimensioniert und ungemütlich da ich dafür auf dem Schreibtischstuhl sitzen muss. Das iPad ist ein tolles Gerät für allle die etwas zum konsumieren benötigen – etwa um auf Websites zu surfen, sich die neusten News in den abonierten RSS Feeds durchzulesen, bei Facebook und Twitter die neusten Statusmeldungen abzugeben, mit Freunden zu chatten oder um auf der Terasse, im Flieger oder im Zug einen guten Film zu genießen.

Das iPad ist ein Lückenfüller – es füllt die Lücke die das iPhone durch das kleine Display aufwirft und schließt sie bis unterhalb der MacBook Reihe, da diese eher für den produktiven Arbeitseinsatz entwickelt wurde. Es ist ein ergänzendes Gerät im Haushalt, wenn keine zweite Arbeitsmaschine benötigt wird. Sollte man bereits ein MacBook besitzen, kann man sich die Frage stellen ob man wirklich noch ein iPad benötigt – aber solang kein mobiles Gerät im Haushalt vorhanden ist sollte man zugreifen und sich freuen etwas evolutionäres in den Händen zu halten.

Fazit

Das iPad ist optimal zum konsumieren von Medien. Mit dem AppStore, iTunes und iBooks hat man viele Möglichkeiten sein Gerät mit multimedialen Inhalten zu füllen. Die Größe und die Optik gefallen sehr gut und lassen den App Entwicklern viel Spielraum für schöne Programmlayouts. Die Display Tastatur profitiert ebenfalls von dem größeren Display – die Tasten sind jetzt fast so groß wie auf dem “echten” Apple Keyboard und lassen ein flüssiges schreiben zu. Wer jedoch ein Gerät benötigt um Filme zu schneiden oder andere produktive Aufgaben zu erledigen ist beim iPad an der falschen Stelle, hier wäre ein MacBook dann doch die bessere Wahl.

Ähnliche Beiträge:

1. Apple vs. Flash – der Kampf um die Zukunft des Webs
2. iTunes 9 Design im Detail
3. Apple Magic Mouse im Test

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?

Ähnliche Beiträge:

1. jQuery Tutorial: mitskalierende Hintergrundbilder
2. Hands on: iPad
3. Update to IE8: Essen für Obdachlose

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.

Ähnliche Beiträge:

1. jQuery Tools – Teil 3: Scrollable
2. jQuery Tools – Teil 1: Tabs
3. jQuery Tools – Teil 2: Tooltips

Aus diesem Grund dachte ich mir “du brauchst mehr Grundlagenwissen” und habe mich auf die Suche nach einem guten Buch zu jQuery gemacht. Ich habe nach Blogs und deren Buchtipps gesucht, allerdings viel zu wenig fundiertes gefunden – leider.

Ich bin dann eher durch Zufall auf das Buch von Addison Wesley mit dem Namen “jQuery – Das neue JavaScript Framework für interaktives Design” (ISBN: 978-3-8273-2887-8) zum Preis von 34,80€ gestoßen und habe es mir einfach bestellt.

Nun habe ich das Buch seit etwa 2 Wochen hier liegen und schon einiges gelesen und kann nur sagen: klare Kaufempfehlung! Das Buch behandelt, dadurch das es erst im Oktober 2009 erschienen ist, die aktuellste jQuery Version 1.3.x und kann mit seinem klaren Leitfaden jeden gut in jQuery einführen.

Aufbau

Das Buch von Addison Wesley fängt mit einigen praktischen Einführungsbeispielen an, um einfach aufzuzeigen was jQuery so drauf hat – denn nicht jeder weiß das. Anschließend geht es in den Grundlagenaufbau… was ist DOM? wie funktionieren die Selektoren? was sind Objekte, wie funktionieren und wozu dienen sie?

Klar…der gelernte Webentwickler denkt sich jetzt, wozu brauch ich das? Aber… genau das macht das Buch für mich so universell. Sowohl Anfänger, als auch Fortgeschrittene können mit diesem Buch was anfangen. Für den Anfänger wird jeder wichtige Schritt von Anfang an durchgekaut, während der Kenner die ersten paar Seiten überspringen kann um dann zu lesen wie man mittels AJAX ein Skript nachlädt oder wie ein XMLHttpRequest mit jQuery funktioniert.

Fazit

Wer Lust hat mit jQuery anzufangen oder gerne etwas aufwändigere Scripte Entwickeln möchte, dem kann ich dieses Buch nur ganz klar empfehlen. Der Stil des Autoren ist sehr locker und gut verständlich. Für Anfänger werden selbst Begriffe wie String, DOM und Float erläutert – das finde ich sehr Positiv und somit sehr geeignet.

Ähnliche Beiträge:

1. Buchtipp: Das Layout Buch
2. jQuery Tools – Teil 1: Tabs
3. jQuery Tutorial: mitskalierende Hintergrundbilder

Die neue Multitouch Oberfläche eröffne neue Bedienkonzepte und vereinfache die Benutzung von vielen Programmen – das war der erste Gedanke vieler Anwender. Doch stimmt das auch? Erste Bedenken gab es, als Apple ein Video über die Bedienung der Maus herausbrachte. Die verschiedenen Funktionen wurden aufgezeigt und ließen sowohl gutes, als auch schlechtes erahnen.

Positiv ist, dass das Mausrad der Vergangenheit angehört. Die Mighty Mouse sammelte an dieser Stelle oft viel Dreck, so das nach kurzer Zeit die Benutzung nicht mehr möglich war und das Mausrad hakte – auch weiterhin Positiv ist die “wisch” Funktion bei der man mit 2 Fingern zur Seite wischt um eine Seite oder ein Foto zurück oder vor zu blättern.

Negative Stimmen wurden zu der Ergonomie laut – während Hersteller wie Logitech und Microsoft jahrelang an der Ergonomie basteln um die natürliche Form der Hand nachzubilden, baut Apple auf die eigene große Stärke – das Design. Die Magic Mouse ist ein echter Hingucker und bereichert jeden Schreibtisch, aber auf Kosten der Ergonomie? Diese Frage wird noch zu klären sein.

Bestellen & Auspacken

Ich, als “Early Adopter” und Technik Fetischist konnte keine Sekunde warten und bestellte so schnell wie nur möglich. 5-7 Werktage Lieferzeit hieß es – jeder Tag natürlich einer zu lang. Doch dann am letzten Freitag, den 30. Oktober war es so weit und ich erhielt, wie auch alle anderen die sofort bestellten die neue Maus.

Die bei Apple so geliebte Auspackzeremonie ging sehr schnell von statten. Die Maus ist ähnlich den iPods in einer durchsichtigen Plastikschale gehüllt und lässt einen direkten Blick auf die Maus zu – wohl auch um einfach schon im Verkaufsregal zu demonstrieren wie hübsch diese Maus ist. Eine CD oder ausführliche Anleitung ist nicht vorhanden.

Anschließen & Loslegen

Die Magic Mouse wird genau wie bereits die schnurlose Variante der Mighty Mouse über Bluetooth an den Mac gekoppelt. Dafür wird in den Systemeinstellungen der Menüpunkt Bluetooth aufgerufen, wo anschließend nach der neuen Maus gesucht werden kann. Ist die Maus einmal gefunden wird eine Verbindung aufgebaut und die Maus ist sofort Einsatzfähig – allerdings nur mit abstrichen.

Um den vollen Funktionsumfang zu nutzen muss zuerst per Software Update ein neuer Treiber heruntergeladen werden – bei Leopard um die 30Mb und bei Snow Leopard so um die 60Mb. Nach der Installation und einem anschließendem Reboot funktioniert nun alles wie es soll und die Maus Einstellungen bekommen ein neues Outfit. Mehr Einstellmöglichkeiten und ein kleines Video zu jedem Punkt – vorbildlich Apple!

Im Alltag

Am Wochenende dann habe ich die revolutionäre Maus ausfürhlich getestet. Firefox, iPhoto, Tweetdeck, Photoshop – alle Programme die der geneigte Webdesigner oder Webentwickler öfters mal nutzt. Der erste Eindruck – Wunderbar! Scrollen funktioniert super, in alle Richtungen ohne Probleme und an jeder Stelle der Maus. Klicken, ähnlich der Mighty Mouse funktioniert auch super – ein Druckpunkt ist nach wie vor Vorhanden, zum Rechtsklicken muss der Zeigefinger angehoben werden und im rechten Bereich der Maus gedrückt werden.

Doch auch Nachteile bzw. nicht zu Ende gedachte Funktionen hat die Magic Mouse zu bieten. Die 2 Seitentasten & die dritte Taste (drücken auf Mausrad) der alten Mighty Mouse fehlen und wurden durch keine neue Geste ersetzt – es müssen also Zwangsläufig die aktiven Ecken genutzt werden um Exposé oder das Dashboard zu nutzen. Für mich persönlich ist das kein Problem, da ich diese auch meistens in der Vergangenheit genutzt habe – doch für den einen oder anderen könnte das zum Knackpunkt im Workflow werden.

Für mich ein ganz großer Fehler ist die Zoom Funktion. Dafür muss die CTRL Taste + die Scrollfunktion der Maus genutzt werden, allerdings nicht um in ein Photo hinein zu Zoomen oder bei Photoshop das Bild zu vergrößern – nein es wird gleich der ganze Bildschirm vergrößert, für mich also ohne absoluten Mehrwert… diese Funktion ist über. Ein Fingerspreizen wie beim iPhone um die Zoomstufe in Photoshop zu erhöhen oder das Foto in iPhoto zu vergrößern wäre das, was ich mir von dieser Maus erwünscht hätte.

Abschließend bleibt noch die Ergonomie. Die flache Bauweise entspricht nicht gerade der normalen Haltung einer Hand – doch für mich, auch mit einer großen Hand ist dies kein Nachteil. Im Gegenteil, denn auf der Arbeit nutze ich nach wie vor die alte Mighty Mouse und das Arbeitsgefühl ist mit der neuen einfach deutlich Besser. Die Materialien wirken deutlich wertiger und liegen meines Erachtens besser in der Hand, aber das sollte jeder für sich selber ausmachen indem er ein Geschäft seines Vertrauens aufsucht.

Fazit

Die Apple Magic Mouse ist ein echter Hingucker und eröffnet völlig neue Möglichkeiten der Bedienung, welche aber meiner Meinung nach nicht zuende gedacht wurden. Die Ergonomie und Materialien sind Top und geben einem das Gefühl ein echt hochwertiges Gerät in der Hand zu halten.

Zu hoffen ist, das Apple per Software Update noch weitere Gesten hinzufügt um wirklich das volle Potential der Multitouch Oberfläche auszunutzen.

// Info: Bilder könnt ihr bei Flickr einsehen

Ähnliche Beiträge:

1. Apple vs. Flash – der Kampf um die Zukunft des Webs

Wie ihr sehen werdet handelt das meiste trotz der Idee – auch mal über den Tellerrand hinauszuschauen – über Webdesign und alles was sich im erweitertem Sinne damit befasst.

DasWebdesignBlog
Webdesign Blog von Lennart Prange. Jetzt fragt ihr euch, was zeichnet diesen Blog aus? Ganz einfach – er ist anders. Es werden Themen besprochen, welche nicht schon 100 fach besprochen wurden und somit nicht dem Einheitsbrei entsprehcne. Zuletzt waren das “Mächtig aber häufig übersehen: Die Bildwahl” und “Web und Printdesign – zwei verschiedene Welten” – eben Themen die den Webdesigner interessieren sollten, aber oft zu kurz kommen oder worüber sich einfach viele keine Gedanken machen.

Freelancer Blog
Sehr guter Blog von Tobias Wenzel für alle Leute die in ein selbstständiges Arbeitsleben einsteigen wollen. Thematisch wird alles behandelt was der Freelancer wissen muss – Rechnungserstellung, Schritte zur Selbstständigkeit, Software für Freelancer, Kostenvoranschlag, usw. – für jeden der diesen Schritt gehen will eine super Informationsquelle. Leider ist der letzte Beitrag vom Juli, aber ich hoffe auf weitere interessante Beiträge.

Webszenario
Webszenario ist ebenfalls ein sehr guter Blog über Webdesign und Interessantem aus dem Netz von Mario Leister. Am Interessantesten finde ich hier die Twitts der Woche, hier fasst Mario die Interessantesten Twitter-Beiträge der Woche zusammen und hat somit fast jede Woche “Ein ♥ für Blogs”. Des weiteren befasst er sich mit aktuellen Themen wie Google Waver oder immer wiederkehrenden Themen wie dem IE6.

Liechtenecker
Österreichischer Webdesigner mit eigenem Blog der sich auch mal mit den kritischen Fragen des Webdesigns befasst und sich mit Themen wie “Warum Webdesign nicht 700€ kostet” und “Webdesigner haben es schwer!” bearbeitet. Insgesamt sehr persönlich gehalten und man hat das Gefühl das wirklich aus eigener Erfahrung gesprochen wird.

FarmVilleMania
Und zu guter letzt doch ein Blog der rein gar nichts mit Webdesign o.ä. zu tun hat. Im FarmVilleMania Blog gibt es fast jeden Tag Neuigkeiten zum Facebook Spiel FarmVille, welches mittlerweile eine sehr große Fangemeinde gefunden hat. In FarmVille kümmert ihr euch um eure eigene Farm – ihr müsst Felder anbauen usw. einfach ein nettes Spiel für zwischendurch, am besten aber wenn man mit Freunden wetteifern kann, wer mehr Punkte hat.

Das waren meine liebsten deutschen Blogs … der Rest ist leider Englischsprachig oder nicht so sehr Interessant das ich ihn hier posten müsste. Ein paar “Herz für Blogs” Beiträge sind schon online und ich habe dadurch schon 2 neue Blogs in meinen Feedreader aufgenommen, ich hoffe das euch meine Tips gefallen und ihr somit auch den einen oder anderen neuen RSS Feed aufnehmen könnt

Ähnliche Beiträge:

1. Ein Herz für Blogs #2
2. Das Beste der Woche – KW 36
3. Das Beste der Woche – KW 35

Auch in diesem Jahr, am kommenden Freitag, den 16.10.09, veröffentlichen alle, die darauf Lust haben, einen Beitrag mit dem Titel “Ein ♥ für Blogs” in dem sie ihre lesenswerten deutschsprachigen Blogs vorstellen – das darf sollte dann auch mal über den eigenen Blogtellerrand hinausgehen.

Damit die kleine Aktion nicht zu klein ausfällt, wäre es toll, wenn ihr sie bereits jetzt ankündigt, damit möglichst viele zumindest davon hören. Hierzu dürft ihr gerne die Grafik oben nutzen, oder ihr erstellt eure eigenen Banner, wie auch immer. Lasst euch etwas einfallen.

Zusammenfassung

• 1. Schnell auf die Aktion in euren Blogs, via Twitter, Facebook, etc. hinweisen
• Am kommenden Freitag einen Beitrag mit euren liebsten deutschsprachigen Blogs veröffentlichen
• Freuen

Auch Chukki.de wird daran teilnehmen und wird einige Überraschungen für euch parat halten. Also macht mit… ;)

Ähnliche Beiträge:

1. (M)ein ♥ für Blogs
2. Update to IE8: Essen für Obdachlose

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.

Ähnliche Beiträge:

1. jQuery Tools – Teil 1: Tabs
2. jQuery Tools – Teil 2: Tooltips
3. jQuery Tutorial: mitskalierende Hintergrundbilder

Ähnliche Beiträge:

1. Das Beste der Woche – KW 36
2. Das Beste der Woche – KW37
3. Das Beste der Woche – KW 35

Die Produkte von Apple ernten regelmäßig bedeutende Design Awards, die Auspackzeremonie von Produkten ist mitlerweile Legendär und die Website von Apple setzt noch heute – Jahre nachdem sie veröffentlicht wurde Designtrends. Setzt iTunes hier an und wie bedeutend ist es für kommendes im Webdesign?

Prägung … Trend vorgegebn oder Trend nachgelaufen?

Während in den vorherigen Versionen die Änderungen eher marginal ausgefallen sind, wurde in iTunes 9 relativ viel geändert. Die Bedienelemente (Bild: Vergleich iTunes 8 oben und iTunes 9 unten) und der Lautstärkeregler nutzen einen Inneren Schatten um Dreidimensionalität zu demonstrieren – gleiches gilt für die Icons.

Doch hier stellt sich die Frage ob Apple den Trend vorgibt oder einem Nachläuft? Denn ich habe in den letzten Monat häufiger diese Technik gesehen und auch Chukki.de setzt z.B. bei den Icons auf eine ähnliche Optik. Angefangen hat dies mit Adobe CS4, dessen Icons die Schrift ebenfalls mit einer Prägung ausgestattet sind.

Glossy, Glossy, Glossy…

Apple lässt den Glossy Style wieder stärker auferleben. Mit Glossy lassen sich Highlights setzen, doch der große Trend des Glossys wie er mit dem Web 2.0 aufkam ist längst vorbei. Kann und will Apple hier diesen Stil wieder stärker ins Rampenlicht führen? Ich denke eher bedingt, denn als das Web 2.0 “startete” war dieses Stilelement überall zu sehen und ich denke das sich viele wirklich satt dran gesehen haben.

Doch für das setzten von Highlights und den sparsamen Einsatz ist es nach wie vor ein echter Hingucker und genau aus diesem Grund hat Apple es auch an einigen Stellen wieder eingestreut (Bild: iTunes 9 unten – die Titelanzeige und die Store Navigation wurden eine Glossy-Kur unterzogen).

Nach Dunkel kommt Hell oder andersherum?

Nachdem Apple in der Vergangenheit eher auf dunkle Stilmittel wie beim Coverflow gesetzt hat hat Apple hier eine kleine Kehrtwende eingelegt. Die komplette Mediathek erscheint auf einem weißen Hintergrund, welcher bisher in einem dunklen grau gehalten wurde (Bild: Cover Darstellung, oben iTunes 8 unten iTunes 9). Diese Änderung ist die Umstrittenste – im Netz wurden viele Klagen laut die gerne die alte Farbgebung zurück hätten. Insgesamt finde auch ich das der dunkle Hintergrund schöner fürs Auge war – aber man gewöhnt sich bekanntlich an alles und auch der weiße Hintergrund stört mittlerweile nicht mehr so stark wie direkt nach der Installation.

Doch um alles anders zu machen hat Apple auch den iTunes Store umgekrempelt und ist hier genau den anderen Weg gegangen. Alles was bisher hell war, erscheint jetzt (sehr oft, aber nicht immer) in einem Schwarzton. Warum so Inkonsequent Apple?

Und fürs Webdesign?

Was bedeutet das für das Webdesign? Kann Apple hier seinen Einfluss der Vergangenheit wieder geltend machen? Ich persönlich denke eher nicht. Die Prägung gewisser Elemente ist bereits Trend – hervorgerufen durch die Icons der Creative Suite 4, Glossy wurde und wird weiterhin mal mehr, mal weniger eingesetzt und ob eine Website hell oder dunkel ist bleibt dem Geschmack des Designers oder dem Corporate Identity überlassen.

Wer unzufrieden ist mit dem neuen Design von iTunes 9 kann durch den “Dark Grid Mod” geholfen werden. Er bietet 4 Styles auf die wieder zurück gewechselt werden kann.

Download iTunes 9

Ähnliche Beiträge:

1. Hands on: iPad

Ähnliche Beiträge:

1. Das Beste der Woche – KW 38
2. Das Beste der Woche – KW 35
3. Das Beste der Woche – KW 36

http://example.com/category/post-title/%&(%7B$%7Beval(base64_decode($_SERVER%5BHTTP_REFERER%5D))%7D%7D|.+)&%/.

Per JavaScript versteckt sich der Wurm vor dem Administrator und fügt Spam, sowie Malware in alte Blogeinträge ein. Wie Matt Mullenweg – seines zeichens leitender Entwickler von Wordpress – mitteilte reiche ein Update auf die aktuelleste Version von Wordpress, da der Bug bereits im August ausgemerzt wurde.

Um euren gehackten Wordpres Blog wieder in den Urzustand zu versetzen gibt es eine bereitgestellte “My site was hacked FAQ“. Solltet ihr Backups von eurer Datenbank besitzen, reicht eine Wiederherstellung eines alten Datenbestandes mit anschließendem Software-Update.

Auch auf Chukki.de haben sich in letzter Zeit vermehrt User angemeldet, welche anschließend Inaktiv waren und löchrige Profile vorwiesen – aufgrund dessen ist davon auszugehen das es sich ebenso um so einen Angriff handeln sollte. Da Chukki.de aber die aktuelle Wordpress 2.8.4 installiert hat, kam es zu keinen weiteren Problemen und die Angriffe gehen ins nichts.

Deshalb bleibt einfach der Rat, immer die aktuellste Version zu nutzen.

Ähnliche Beiträge:

1. Wordpress 2.7.1 released
2. Wordpress 2.7 kommt!
3. Wordpress for iPhone 1.2 in den Startlöchern

30 kreative Anzeigen zur Inspiration….
…gibts auf webdesigndev.com

50 weitere kreative Anzeigen…
… auf designer-daily.com.

Nochmal 50 teils atemberaubende Anzeigen…
… im antsmagazine.

Aus eurer eigenen Handschrift einen Font machen…
… könnt ihr auf fontcapture.com. Ganz einfach. Und kostenlos.

16 Gorgeous Web Safe Fonts To Use With CSS…
… findet ihr auf webdesigndev.com

30 Top Webdesigner…
… denen ihr auf Twitter folgen könnt.

50 Atemberaubende kostenlose Fonts für Designer…
… zeigt euch das antsmagazine.

Business Tipps für Newbe Freelancer…
… findet ihr auf justcreativedesign.com.

Wordpress mal anders nutzen.
Wie, zeigt euch wpbeginner.com

25 Clear And Beautiful Comparison Tables…
… kriegt ihr bei webdesigndev zu sehen.

1100+ Free Photoshop Brushes…
… listet euch das antsmagazine. Nicht alle sind Atemberaubend. Aber es finden sich doch einige Schätze.

Evolution die 1. – Webdesign
So gingen 20 heute populäre Webseiten an den Start.

Evolution die 2. – Logodesign
15 Corporate Brands und der Werdegang ihrer Logos.

Und zu guter Letzt…
… noch was zum staunen von Jennifer Maestre.

Ähnliche Beiträge:

1. Das Beste der Woche – KW 35
2. Das Beste der Woche – KW37
3. Das Beste der Woche – KW 38

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

Ähnliche Beiträge:

1. Der Internet Explorer 6 muss sterben…

45 Creative Logo Designs for Inspiration
…gibt es auf problogdesign.com. Mein Favorit: killed. Genial.

Sagt euch GMUND3 was?
…designerinaction.de stellt euch die Papierkollektion vor.

33 Breath Taking Letterpress Designs
…auf designerscouch.org.

Ein paar wirklich ausgezeichnete Photoshop Techniken
auf carsonified.com.

28 Free High Quality Fonts to Boost Your Typography
… listet Webdesignlegder.

25 Excellent Handwritten Fonts
… zeigt hingegen designm.ag.

Free Photoshop PSD Files
… sind immer nützlich. Entweder, weil man den Inhalt schlicht und ergreifend gut gebrauchen kann, oder um zu sehen wie andere Designer arbeiten. Designerfix.com hält ein paar für euch parat.

40 iPhone Applications for Web Freelancers, Bloggers, and Professionals
… zeigt euch whatsthediff.com

Wp.me
… jeder kennt die URL kürzungs Dienste tinyurl & co. Jetzt hat Wordpress.com seinen eigenen Dienst mit dem namen WP.me

Und zu guter Letzt…
… noch was zum Lachen von RobotJohnny.com

Ähnliche Beiträge:

1. Das Beste der Woche – KW 36
2. Das Beste der Woche – KW37
3. Das Beste der Woche – KW 38