Webworking

JavaScript Events für Responsive Webdesign

Guido — Tue, 15 May 2012 07:24:51 +0000

Responsive Webdesign ist nicht nur begrenzt auf geschicktes HTML & CSS sondern hat auch Auswirkungen auf JavaScript. Zum einen möchte man, dass bei einer geringeren Auflösung sich ein Element eventuell anders verhält als bei einer höheren, und meistens möchte man auch verschiedene Funktionalitäten hinsichtlich der verschiedenen Auflösungen. Wäre super wenn es entsprechende Events gäbe, die bei einem Switch der Auflösung gefeuert werden, gibt es aber nicht.

Screenshot von Breakpoint.js

Mit Breakpoint.js erhält man in Vanilla JavaScript eine kleine Library, die für entsprechende Events sorgt. Logischerweise nimmt das Skript die Breite des Displays als Basis, für die dann frei Events eingerichtet werden können (also nicht nur für die gängigen Breiten, sondern für jede beliebige). Entsprechend gibt es für jede dieser Breiten zwei Events: nämlich einmal dafür, dass die Grenze unterschritten wird, und einmal dafür, dass die Grenze überschritten wird.

Jedes dieser Events lässt sich an eine Function binden. Das Projekt wird bei GitHub gehostet, und ist natürlich etwas, das man auch selbst machen könnte. Aber gerade bei solchen Sachen macht eine zentrale Verwaltung durchaus mehr Sinn, um alle Eventualitäten aller Browser durch die Community abfangen zu lassen.

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
Bisher kein Kommentar - Schreibe den Ersten!

Mit Draftest den Geschmack des Kunden ermitteln

Guido — Thu, 19 Apr 2012 08:03:41 +0000

Hat man erst einmal einen Auftrag, folgt in der Regel unweigerlich die Mail: senden Sie mir bitte einmal die Adressen von ein paar Websites zu, die Ihnen gefallen. Dies ist auf der einen Seite ganz nett, auf der anderen Seite birgt es aber auch Gefahren. Zum einen wird es keine zwei Kunden geben, die die gleichen Websites einreichen, zum anderen ist nicht gesagt das Websites gesendet werden, die den heutigen Standards entsprechen.

Screenshot von Draftest

Mit Draftest kommt eine interessante Anwendung in die Cloud, die es ermöglichen soll den Geschmack eines Kunden zu bestimmen. Hierbei können Photos, Grafiken und Webseiten vom Designer online gestellt werden. Der Kunde wiederum erhält einen Link und kann die einzelnen Elemente bewerten. Der Designer kann diese Bewertungen dann einsehen und analysieren.

Eine ebenso einfache wie geniale Idee! ;) Besonders gefällt mir daran das der Designer die Seiten vorgibt, die bewertet werden können, und nicht der Kunde. Er kann dann in einem ersten Lauf erst einmal bei allen Kunden (mit dem gleichen Test) eine Grundausrichtung festlegen, und in einem zweiten und spezialisierten Test den Geschmack des Kunden feiner justieren und so das Design festlegen.

Die Seite ist mal wieder von der Art: wieso ist da keiner früher drauf gekommen! Zumindest für den Augenblick sieht es so aus, als ob der Dienst kostenfrei wäre und eigentlich stört nur, dass von Webseiten Screenshots eingestellt werden müssen. Der geneigte Webworker könnte allerdings durch die Cloud-Anwendung eine ganze Reihe an Testfällen zusammen klicken und kann diese dann fein dem Neukunden ohne großen Aufwand zur Verfügung stellen.

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
Bisher kein Kommentar - Schreibe den Ersten!

Text auf Pfaden mittels CSS3

Guido — Wed, 18 Apr 2012 07:05:58 +0000

Brave New World – CSS3 und insbesondere das Canvas-Element machen Dinge möglich, über die man sich früher keine Gedanken machen brauchte. Insbesondere werden diese neue Techniken auf lange Sicht dafür sorgen das “der Sohn vom Arbeitskollegen” nicht mehr mal eben schnell die Homepage des Unternehmens kostenlos ins Web setzt. HTML5 / CSS3 wird komplex, ohne Javascript wird es nicht mehr gehen und schon heute schauen einige Designer doof aus der Wäsche.

Screenshot von CSSWARP

Helfen kann an der Stelle die eine oder andere kleine Cloud-Anwendung die mittels Frontend ein paar rudimentäre Dinge zulässt, und dann das entsprechende HTML auswirft. Zumeist funktioniert das (in den meisten Browsern), und zumeist sollte man vorsichtig sein das HTML ohne Tests einzusetzen. CSSWARP erlaubt es, in einem Canvas-Element beliebigen Text mittels eines Pfads in eine beliebige Form zu pressen.

Dies ist natürlich in mehrerer Hinsicht interessant: zum einen ist das Frontend ein gutes Beispiel was (und wie schnell) ein Canvas-Element arbeiten kann, und zum anderen ist auch das CSS3 recht interessant. Natürlich (und das liegt in der Natur der Sache) ist das erzeugte CSS nicht gerade das was man als klein und zierlich bezeichnen würde. Ist auch irgendwo logisch denn um einen solchen Effekt zu erzeugen muss jeder Buchstabe einzeln angesprochen und transformiert werden.

Ich bleibe allerdings dabei das CSSWARP ein gutes Beispiel für die zukünftigen Möglichkeiten und ein prima Beispiel für ein schnelles Canvas-Element ist. Werft einfach mal einen Blick auf die Seite, ob man es dann auch benutzen sollte steht auf einem anderen Blatt.

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
Bisher kein Kommentar - Schreibe den Ersten!

Zu FeedBurner mittels .htaccess weiterleiten

Guido — Tue, 17 Apr 2012 07:45:49 +0000

Ich habe in letzter Zeit einiges gesehen, um Feeds nach FeedBurner umzuleiten. Dabei setzen sich wohl zwei Methoden durch: die erste wäre alle Verweise auf den WordPress-Feed zu entfernen und im Template durch den direkten Link zu ersetzen, die zweite wäre ein Plugin, um die eigentliche Feed-URL zu FeedBurner umzuleiten. Zweiteres macht wesentlich mehr Sinn, da man so problemlos FeedBurner wieder abschalten könnte, ohne das sich die Feed-URL ändert. Ich hatte ja bereits schon einmal darüber berichtet.

Screenshot von FeedBurner

Jedes Plugin zieht die Performance von WordPress nach unten, auch das ist klar, man könnte allerdings die URL /feed/ auch ganz einfach mittels .htaccess und mod_rewrite weiterleiten:

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
    RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
    RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/GuidoMuehlwitz [R=302,NC,L]
IfModule>

Alle User-Agents außer FeedBurner und FeedValidator werden redirected, man muss nur die FeedBurner-URL durch seine eigene ersetzen. Das dürfte wohl der sinnvollste und schnellste Weg sein, um den eigenen Feed nach FeedBurner verweisen zu lassen.

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
2 Kommentare

Purple – HTML5 Animationen erstellen

Guido — Mon, 16 Apr 2012 08:32:30 +0000

Heute kommt mal was ganz neues (und sozusagen eine Premiere) nämlich eine App für MacOS. Seit einigen Monaten fahre ich hier zweigleisig: mein Desktop läuft auf Windows7, mein Notebook ist neuerdings ein PowerBook. Ich wollte seinerzeit keinen “harten Schnitt” und mich langsam an MacOS gewöhnen, was dann auch einigermaßen gelungen ist, wenn man alle seine Anwendungen zusammen gesucht hat.

Screenshot von Purple

Mit der App Purple lassen sich prima HTML5-Animationen erstellen, interessanterweise seit neuestem sogar mit iBooks-Integration – also prädestiniert zum Erzählen von animierten Geschichten. Das Programm wirkt ziemlich ausgereift und wirft sehr ordentlichen Code aus, die Animation lässt sich auf einer Zeitleiste organisieren:

Zeitleiste von Purple

Die 15,99€ für die Software sind ok, man muss sich natürlich hinterfragen wo die Reise hingeht, insbesondere halte ich es für ziemlich unwahrscheinlich das Adobe Edge kostenfrei bleibt. Sobald das Tool die Adobe Labs verlässt wird man an der Stelle wohl kaum mit 15,99€ hinkommen, Adobe hat bei diesen speziellen Bereichen ja interessante Preisvorstellungen. Es ist also legitim sich nach Alternativen um zuschauen, die für den Moment beim Start einen nicht mit 23 Beta und Preview-Popups nerven.

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
Bisher kein Kommentar - Schreibe den Ersten!

Webworking bei Google Currents

Guido — Thu, 12 Apr 2012 11:07:05 +0000

Man denkt an nichts böses, hat auch eigentlich keine Zeit, steht morgens auf und muss sich voller Panik mit einem Update von Google+ herumschlagen, und mit noch mehr Panik um Google Currents kümmern. Zumindest bei letzterem bin ich mir überhaupt nicht sicher ob man es braucht, und wie Google es in Relation zum Reader sieht.

Screenshot von Webworking bei Google Currents

Ich für meinen Teil bin mir ziemlich sicher das ich Google Currents nicht verwenden werde, da ich nach wie vor am Google Reader hänge, und sowohl auf Macbook, auf iPad als auch auf iPhone Reeder installiert habe. Stellt sich natürlich die Frage was Google Currents eigentlich ist, was es bei Caschy nachzulesen gibt. Im Prinzip kann man sich beliebige Inhalte im Web zusammensuchen und für portable Geräte in Magazin-Form veröffentlichen. Für die Blog-Betreiber ist dies natürlich eine weitere prima Möglichkeit den eigenen RSS-Feed unter das Volk zu bringen. Hierzu legt man mittels des Producers eine eigene Edition an, die man dann veröffentlichen kann. Eine entsprechende Anleitung gibt es ebenfalls bei Caschy.

Und hier ist er nun, der offizielle Webworking-Link für Google Currents:

http://www.google.com/producer/editions/CAowstKxAQ/webworking

Vielleicht braucht es ja der eine oder andere von euch. Aber zurück zur Grundfrage: was will Google damit bezwecken? Zum einen denke ich nicht das Currents in Konkurrenz zum Reader treten wird, da dieser auch für den Desktop angelegt ist. Ich denke aber sehr wohl das es Auswirkungen auf Google+ haben wird. Hier existiert nach wie vor keine API die einen schreibenden Zugriff zulässt, und ich vermute immer mehr das es die auch nie geben wird. Die Qualität bei nicht automatisch generiertem Content ist halt höher, als bei Facebook-Blog-Seiten, die nichts anderes machen als dort zusätzlich ihren Feed zu veröffentlichen – im eigentlichen Sinne also keinen Mehrwert bieten.

Es stellt sich mir nach wie vor die Frage ob und wieso jemand Currents nutzen sollte …

Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten
75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink
Ein Kommentar

Neue CSS3 Snippets für die heimische Werkbank

Guido — Tue, 10 Apr 2012 09:49:08 +0000

Ich habe ja letztens erst über PHP Snippets berichtet und Methoden zu deren Verwaltung. Zumindest bei letzterem bin ich seitdem weder schlauer geworden noch weiter gekommen. Dennoch habe ich eine nette Liste von CSS Snippets gefunden, die ich euch nicht vorenthalten möchte.

Screenshot von Noupe

Bei Noupe ist eine wirklich riesige Liste mit Snippets aufgetaucht von denen einige zwar einschläfernd wirken, die meistens aber sinnvoll waren. Da ich letztens hier im Blog an WPTouch eingreifen musste, weil meine neue Social Media Bar alles geschrottet hatte (und inzwischen wieder ganz raus geflogen ist), hätte ich zumindest dieses Snippet hier gut gebrauchen können:

@media only screen and (device-width: 768px) {  
    /* For general iPad layouts */
}
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {  
    /* For portrait layouts only */
}
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {  
    /* For landscape layouts only */
}

Also einfach mal schnell durchblättern und nachsehen was man gebrauchen kann, es ist mit Sicherheit für jeden etwas brauchbares dabei, und ein paar neue Sachen gibt es sogar auch zu finden! ;)

Frohe Ostern

Guido — Sun, 08 Apr 2012 09:00:18 +0000

Nur für den Fall das der geneigte Nerd wirklich plant, Ostern zu verpassen, es ist wirklich heute. Der Tag also, an dem ihr dringend zu euren Eltern müsst, weil es leckeres Essen gibt! :) Ich wünsche euch allen ein frohes Osterfest! :)

Frohe Ostern von Webworking!

Mein großes Ziel für dieses Jahr ist nach wie vor die 1.000 RSS-Abonnenten zu knacken, und der Blog steht kurz davor das erste mal über 800 zu kommen – ich danke euch für die super Unterstützung! Wir lesen uns! :)

FoxGuide – Hilfslinien & Grids in Firefox

Guido — Thu, 05 Apr 2012 09:09:29 +0000

Ich hab mich immer noch nicht dazu entscheiden können, ob Grids noch in sind, oder schon wieder out. Allerdings erscheint mir die folgende FireFox-Extension (auch ohne Grids) im höchsten Maße sinnvoll. Sie erlaubt das direkte Einbinden von Hilfslinien (vergleichbar mit denen aus Photoshop) auf Webseiten. Dies macht nicht nur bei Grids Sinn, sondern auch bei anderen Systemen um zu überprüfen, ob zum Beispiel sämtlicher Content auf der gleichen Höhe beginnt.

Screenshot einer Webseite mit eingeblendeten Hilfslinien

Die Extension foxGuide erlauft das Einrichten beliebiger Hilfslinien in verschiedenen Farben. Meines erachtens ist die Extension eine der sinnvollsten die ich in den letzten Monaten gefunden habe und ich denke die sollte in keinem Entwicklersystem fehlen. Was mir noch ein wenig fehlt, ist die Hilfslinien für komplette Domains festzulegen und dauerhaft zu speichern, aber ein einfaches Restore geht heute schon. Natürlich besteht für das System noch einiges an Verbesserungspotenzial, aber bei welchem System ist das nicht der Fall? Wer also viel mit HTML-Umsetzungen zu tun hat, sollte sich das Addon einmal ansehen.

In Place Editing mit jQuery

Guido — Wed, 04 Apr 2012 09:07:49 +0000

In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Frontend, in dem die Daten angezeigt werden. Im Backend wird über “einfache” Inputs oder Textareas der Content erfassst. Die Textarea wird dann maximal mit einem WYSIWYG-Editor belegt. Und genau hier liegt on der Regel das Problem, denn die Realitäten des WYSIWYG-Editors sind zumeist andere, als wenn der Content via Design im Frontend dargestellt wird.

Screenshot der jEditable Homepage

Viel mehr Sinn macht es, den Content direkt im Design zu ändern – das sogenannte In Place Editiing – also das Editieren am Bestimmungsort. Die jQuery Extension Jeditable erlaubt diese Art der Content-Verwaltung. Eine entsprechende Demo gibt es hier. Vorteil ist, das man die Auswirkungen seiner Änderungen sofort im Design sieht. Für manche CMS kann so etwas natürlich sinnvoll sein, für andere CMS benötigt man ein mächtigeres System.

Stellt sich also die Frage wieso niemand In Place Editing verwendet? Die Antwort ist hier recht komplex. Die einfachste wäre wohl, das man durch In Place Editing größtenteils die Strukturierung von Content aufhebt, da es für den Nutzer nicht mehr ersichtlich ist, Zusammenhänge zu erkennen und vor allem Auswirkungen der Änderungen vollends zu überblicken, da eine einfache Änderung ja durchaus mehrere Seiten betreffen kann. Eine weitere Begründung ist, das es recht komplex wird, den Content so editierbar zu machen, das trotzdem noch eine Formatierung über HTML möglich ist.

Die wichtigste Begründung ist allerdings die, das die beiden Systeme zur Verwaltung von Content so weit auseinander liegen wie Kartoffeln und Bananen. Es ist fast unmöglich ein bestehendes CMS auf In Place Editing gänzlich umzustellen. Würde man zum Beispiel ein bereits bestehendes CMS auf das System umstelle wollen, könnte man sich faktisch auf eine komplette Neuentwicklung einstellen.