Warning: mysql_get_server_info(): Access denied for user 'www-data'@'localhost' (using password: NO) in /www/htdocs/w00a4852/blogmanufaktur/wp-content/plugins/advanced-category-excluder/advanced-category-excluder.php on line 128

Warning: mysql_get_server_info(): A link to the server could not be established in /www/htdocs/w00a4852/blogmanufaktur/wp-content/plugins/advanced-category-excluder/advanced-category-excluder.php on line 128
blogmanufaktur.de

Fascinating Fact: Four Out Of Ten Homeworkers Stay Nude All Day (Probably)

This is something I wouldn’t have expected. As I am just working on an article about the advantages of the cloud for homeworkers I came across this little image (which is in fact part of a larger infographic):

nudeworkers

 

So 40% see the biggest advantage of the cloud as being able to work nude? I never do that, never done that. What about you? Are you freelancing from a home office while enjoying your nakedness?

By the way: The word “freelancing” could get a whole new meaning if you look at it with this new information in mind…

Mayersche zeigt, wie man es nicht machen sollte

Unfassbar eigentlich, diese Aktion. Die Mayersche stöpselt ihren Onlineshop einmal komplett ab, ist einen Tag lang offline und weist die Kunden darauf hin, dass sie alle gekauften Inhalte auf der heimischen Platte sichern müssen, wenn sie nicht verschwinden sollen. Profis sind da eher nicht am Werk…

Man stelle sich das mal hochskaliert auf Amazon oder iTunes vor…

Kein Witz, was die Mayersche da tut. So steht's jedenfalls in dem Newsletter, den ich als langjähriger Kunde eben erhielt...
Kein Witz, was die Mayersche da tut. So steht’s jedenfalls in dem Newsletter, den ich als langjähriger Kunde eben erhielt…

2013: Back To Blogging

Ich könnte jetzt behaupten, mich würde die Aktion “Erobere das Netz zurück” überzeugt haben und ich würde jetzt des guten Gefühls wegen und aus Prinzip und so zu diesem Blog zurückkehren. So ist es nicht, auch wenn ich Johnny Häuslers Meinung zum Thema gut nachvollziehen kann. Viele andere äußerten sich zwischenzeitlich ebenfalls. Die Meinungen gehen wie immer auseinander. Klar sein dürfte aber eins: je mehr Content in den sozialen Netzwerken quasi verschwindet, desto schlechter ist das für das Internet an sich. Insofern ist die Initiative “Bloggen statt Facebooken” unterstützenswert, wobei Facebook hier nur als Stellvertreter zu betrachten ist.

medium_3125726009 (1)
photo credit: h.koppdelaney via photopin cc

Meine Entscheidung, das Erstellen von Inhalten wieder stärker im eigenen Blog und weniger in sozialen Netzwerken zu betreiben, hat mit dem pathetischen Erobererszenario nur bedingt zu tun. In meinem Falle ist es schlicht so, dass ich einige Inhalte exklusiv auf Google+ erstellt hatte. Inhalte, die ich jetzt gern nochmal nachlesen würde, ja muss. Es ging um Technik, um Tutorials, die ich gerade brauche. So. Jetzt versuch die mal zu finden. Es gibt keine sprechenden URLs und die Integration der G+ Inhalte in die SERPs ist höchstens als dürftig zu bezeichnen. Bislang suche ich vergeblich…

Der Gedanke, dass mir das in meinem eigenen Blog nicht passiert wäre, schlich sich heimlich, still und leise aus den hinteren Hirnbereichen ganz nach vorne und war schlussendlich fast schon hörbar präsent. Jahrelang habe ich mein Blog als Archiv betrachtet. Wichtiges und jede Menge Unwichtiges wurde hier publiziert, von mir für mich. In erster Linie jedenfalls. Wenn noch jemand Interesse daran findet, okay. Und genau dieser Aspekt wird hier ab heute wieder zu den ihm gebührenden Ehren kommen.

Das bedeutet nicht, dass ich Google+ den Rücken kehren werde. Das tue ich nicht, denn dafür gefällt mir die Community viel zu gut. Facebook hingegen nutzte ich nur als Administrator verschiedener Pages. Deshalb muss ich dort einen Account pflegen. Könnte ich frei entscheiden, hätte ich den Account bei den blauen Kaliforniern längst weggehauen. Twitter erscheint mir überhaupt nicht als Kommunikationskanal, viel eher als Verkündigungsorgan auf der einen und als stark verkürzter RSS-Reader auf der anderen Seite. Echte Kommunikation findet dort für mich nicht statt und wenn man doch mal entsprechendes versucht, dann ist das eher umständlich und letztlich a pain in the ass.

Insofern verzichte ich im Grunde auf nichts und verringere die Chancen, dass ich mich dereinst unter Zeitdruck mit Tools wie Googles Take Out auseinander setzen muss. In diesem Sinne…

Meslo: Menlo-Font auch für Windows


Screenshot noch ohne Meslo

Ich verwende stets ein MacBook, wenn ich die Wahl habe. Und darauf verwende ich stets ByWord zum Schreiben. Und ByWord verwendet die grandiose Schriftart Menlo, die Apple mit Snow Leopard einführte und naheliegenderweise nicht für Windows bereit stellt. Leider habe ich des Öfteren nicht die Wahl und muss einen Windows-Rechner verwenden. Dort vermisse ich ByWord und verwende MarkdownPad, was funktional fast sogar noch besser ist, aber eben die schöne Menlo nicht verwendet.

André Berg wollte sich nicht damit abfinden, dass Windows-User von der Menlo-Verwendung ausgeschlossen bleiben und kreierte kurzerhand einen ganz ähnlichen Font, den er Meslo nannte. Diesen kann man frei von Github herunter laden. Er steht unter Apache-Lizenz. Ich tat es und Sie sollten es auch, wenn Sie ebenfalls zwischen den Welten wandern und ByWord-Fan sind.

Zu MarkdownPad und ByWord habe ich mich an dieser Stelle schon einmal ausführlicher geäußert.

Links:

  1. andreberg / Meslo-Font
  2. ByWord für Mac OS
  3. MarkdownPad für Windows

Dr. Web Magazin KW 39

Meine Beiträge der letzten Woche:

Dr. Web Magazin KW 36

Meine Beiträge der letzten Woche:

Dr. Web Magazin KW 35

Meine Beiträge der letzten Woche:

Dr. Web Magazin KW 34

Meine Beiträge der letzten Woche:

  1. Doodle Jump in HTML5 nachgebaut
  2. Fotobearbeitung: Darktable – Kostenloser Lightroom-Konkurrent jetzt auch für Mac OS X verfügbar

Dr. Web Magazin KW 33

Meine Beiträge der letzten Woche:

  1. Smartphones und Tablets: Was frisst die Datenflat? [Infografik]
  2. Google+ Ripples: Analysetool für öffentliche Google+ Beiträge und beliebige URLs

Dr. Web Magazin KW 32

Meine Beiträge der letzten Woche:

  1. Flex: Hemdsärmeliges jQuery-Plugin für schicken Grid-Effekt
  2. Twissues: Neuer Twitter-Service aus Spanien sorgt für vollständiges Tweet-Backup und mehr

Dr. Web Magazin KW 30

Meine Beiträge der letzten Woche:

Dr. Web Magazin KW 28

Meine Beiträge der letzten Woche:

Dr. Web Magazinbeiträge

Meine Beiträge der letzten Woche:

  • Pyconic startet mit 400 kostenlosen PNG-Icons
    Der italienische Webdesigner, Frontend-Entwickler und Smashing Magazine Autor Alessio Atzeni gehört zur Riege der aktivsten Netzgemeindemitglieder der Welt. In schneller Folge entlässt er neue Projekte, Experimente, Tipps und was nicht alles in die Öffentlichkeit. Am gestrigen Freitag stellte er seine neue Produktlinie Pyconic vor. Pyconic ist eine Sammlung von Icons und Fonts und Iconfonts. Ein Teil davon ist kostenfrei erhältlich. Pyconic Free Icons: ein kleiner Ausschnitt 400 kostenlose Icons im Minimaldesign Auf der eigens geschaffenen Website Pyconic.com bietet Alessio Atzeni unter dem ersten Menüpunkt “Pyconic Icons Free” 400 kostenlose Icons in 32 Pixel Auflösung im Format PNG an. Die Icons stehen unter der Lizenz Creative Commons Attribution 3.0 Unported (CC BY 3.0), was sie für den kostenlosen privaten, wie auch kommerziellen Nutzen qualifiziert. Voraussetzung für die Verwendung ist ein Link zu Pyconic.com unter Nennung der Lizenz auf jeder Seite, auf der die Icons eingesetzt werden. Natürlich ist – wie absolut üblich und ohnehin ein Gebot der Fairness – die Veräußerung der Icons untersagt. Die Bildzeichen eignen sich besonders für das Design von Web Apps und orientieren sich an der gängigen Symbolik mobiler Plattformen. Neben vielen Steuerungselementen, etwa Play, Rewind oder Status-Icons wie einer Wifi-Anzeige, finden sich auch Elemente, die soziale [...]
  • Die Google Analytics App für Android ist zwar da, aber…
    Na, das ging ja schnell. Kaum einige Jahre mussten Android-Nutzer auf die Verfügbarkeit einer offiziellen App als Frontend für die verbreitete Website-Statistiklösung Google Analytics warten. Seit dem 29.06.2012 ist sie nun kostenfrei verfügbar und für alle Android-Geräte ab Version 2.1 nutzbar. Wir haben geschaut, was die App leistet. Google Analytics: Die Echtzeitanzeige gefällt, sonst fehlt viel Es gibt keinen Mangel an Frontend-Apps für Google Analytics und es sind auch einige ganz gute Vertreter dabei. Dennoch ist eine Variante, die direkt vom Hersteller kommt, zumeist vorzuziehen. Der offiziellen App, um die es hier geht, kann man das jedoch nur teilweise bescheinigen. Wirklich beeindrucken kann im Grunde nur die Echtzeitanzeige, die – wie aus dem Web Dashboard bekannt – anzeigt, wie viele Besucher sich gerade wo auf der jeweiligen Website befinden. Für mich handelt es sich allerdings zugleich um die unter ernsthafter Betrachtung irrelevanteste Information. Sicherlich kann man sich freuen, wenn kurz nach der Veröffentlichung eines Beitrags 200 gleichzeitige Zugriffe zu verzeichnen sind. Für den Gesamterfolg indes ist die Info wenig relevant. Das mag von Anwender zu Anwender unterschiedlich beurteilt werden. Mir jedenfalls ist der Erfolg der einzelnen Beiträge und ihr tagesaktuelles Ranking untereinander wichtig. Auf diese Weise lässt sich erkennen, welche [...]
  • HTML5: Gestern, heute und morgen [Infografik]
    HTML5 etabliert sich seit dem massiven Aufstieg der Smartphones und Tablets mit stark gestiegenem Tempo. Es sind gerade die mobilen Clients, die die Browserentwickler immer stärker zur Unterstützung aktueller Web Standards zwingen. Denn vieles, was heutzutage über App Stores als native App vertrieben wird, liesse sich mit HTML5 ebenfalls erreichen. Das jedenfalls dann, wenn die Browser diese Standards vollumfänglich unterstützen würden. Die großen Player, allen voran Apple, machen Dampf im mobilen Markt. Entwickler wollen HTML5 Die folgende Infografik aus dem Hause Dot Com Infoway, die letzte Woche erschien, gibt einen Überblick darüber, welche Features bereits heutzutage für mobiles und Web-Development genutzt werden. Zudem bietet sie einen Zeitleistenüberblick gekommener und gegangener Standards und zeigt, welche Browser wie nah am Standard sind. Besonders interessant finde ich persönlich die Ergenisse zweier Umfragen unter Entwicklern. Die erste Umfrage stammt aus dem Juli 2011, ist also gerade ein knappes Jahr alt. Zu diesem Zeitpunkt gaben immerhin noch 48% der Befragten zu Protokoll, sie würden HTML5 erst nutzen, wenn es stabil unterstützt würde. Nur 23% gaben an, bereits mit HTML5 zu arbeiten, 26% wollten in Kürze damit beginnen. Im Januar diesen Jahres sah das Umfrageergebnis komplett anders aus. 78% der Befragten geben an, dass sie bereits [...]
  • Repo.js: GitHub-Projekte auf der Website einbinden
    Frontend-Developer und jQuery Teammitglied Darcy Clarke hatte am 26. Juni Geburtstag. Und weil er so ein lieber Kerl ist, suchte er nicht nach möglichst vielen Geschenken für sich selber, sondern beschenkte die Netzgemeinde mit einem kleinen, aber feinen jQuery-Plugin namens Repo.js. Repo.js erlaubt es, GitHub-Repositories in Websites einzubinden. Das klingt unspektakulär, ist aber tatsächlich höchst nützlich für Webworker, die entweder selbst mit GitHub arbeiten oder aber regelmäßig über GitHub-Projekte schreiben. An der Stelle käme ich ins Spiel ;-) Bildquelle: GitHub Repo.js bindet die Dateistrukturen der Projekte ein Clarkes Plugin bindet die Repositories, also die Dateiablagen der Projekte ein. Dazu verwendet es die beiden komplementären Scripte Vangogh und highlight.js, die sich im Wesentlichen um die Optik der Darstellung kümmern. Ein mit Repo.js eingebundenes Repository lässt sich bis auf die Dateiebene anzeigen. Das Öffnen der einzelnen Dateien ist ebenfalls möglich, allerdings ohne weitere Formatunterstützung. So werden vorhandene Grafiken nicht als solche angezeigt. Sämtliche Dateien werden als Quelltext geöffnet, eine Umsetzung etwa von Markdown findet ebenfalls nicht statt. Der Aufruf ist simpel. Nachdem jQuery und Repo.js eingebunden sind, reicht folgender Codeschnipsel an der Stelle der Website, die das Repository anzeigen soll: $(’body’).repo({ user: ‘darcyclarke’, name: ‘Repo.js’ }); Screenshot: So sähe das mit dem [...]
  • Widow Tamer JS: Javascript verbessert Typografie in responsiven Layouts
    Der Widow Tamer, zu deutsch Witwenzähmer, kümmert sich um eine spezielle typografische Fragestellung. Von einer Witwe spricht der Entwickler Nathan Ford im Zusammenhang mit seinem Tool dann, wenn am Ende eines Absatzes lediglich eine geringe Zahl von Zeichen übrig bleibt, diese aber dennoch in eine neue Zeile umgebrochen werden. Diese extrem kurze Zeile störe dann den Lesefluss, vor allem aber die Optik und gehöre “gezähmt”, so Ford. Bei statischen Layouts kann prinzipiell der Designer im Vorfeld darauf achten, solche Effekte zu vermeiden, bei responsiven Layouts liegt das außerhalb seines Einflussbereichs. Sicherlich schwerer zu zähmen als typografische Witwen… (Bildquelle: bagal / pixelio.de) Widow Tamer JS: Konfigurierbar und mit flexiblen Methoden ausgestattet Das Ziel des Widow Tamers ist simpel. Vermeide eine letzte Absatzzeile, wenn diese weniger als X Zeichen hätte. Die Anzahl der Zeichen ist konfigurierbar und abhängig vom Hauptlayout, konkret von der Anzeigebreite eines einzelnen Absatzes. Bei dem einen werden schon 14 Zeichen zu einer unschönen Optik führen, bei anderen erst fünf. Da ist es gut, dass man dem Widow Tamer eben diesen Wert flexibel innerhalb der Funktion unter Verwendung von etwa chars: 14, mitteilen kann. Die zentrale Funktion wt.fix() wird beim Laden der Seite initialisiert und wartet dann auf den [...]
  • Fontello: IcoMoon-Konkurrent hilft beim Zusammenstellen eigener Iconfonts
    Nachdem Kollege Denis Potschien sich kürzlich mit dem Iconfont-Kompilator IcoMoon befasst hat, sollte schon der Vollständigkeit halber der direkte Mitbewerber nicht unerwähnt bleiben. Während es IcoMoon bereits seit Ende letzten Jahres gibt, ist Fontello relativ neu auf dem Markt und sieht zunächst wie ein Klon des Erstgeborenen aus. Anders als IcoMoon ist Fontello gänzlich kostenlos. Zudem bindet der Dienst mehr Fonts ein, hat dafür jedoch in anderen Bereichen Schwächen. Wir stellen Fontello kurz vor. Fontello: In Sachen UI kaum vom Wettbewerber zu unterscheiden… Fontello: Kein Klon, mehr eine symbiotische Konkurrenzentwicklung Der wesentliche Unterschied zwischen IcoMoon und Fontello sei gleich zu Beginn noch einmal verdeutlicht: Während IcoMoon ein kommerzielles Angebot mit einer abgespeckten kostenfreien Variante ist, steht Fontello frei als Webservice und auf GitHub unter MIT-Lizenz zum Download bereit. Die verwendeten Fonts fallen nicht unter diese Lizenz, sondern stehen in der Mehrzahl unter SIL Open Font respektive CC-BY-SA. Die Entwickler Fontellos passten die Iconsets aufeinander an, sodass der Dienst nicht die jeweils aktuellsten Varianten integriert. Das ist nicht kritisch, sollte man aber im Vorhinein wissen. Fontello entstand zu einer Zeit, in der IcoMoon nur über ein stark limitiertes Iconset verfügte und Zusatzfunktionen, wie etwa den Import von SVG noch nicht im [...]
  • Nestable jQuery: Hierarchisches Listenmenü mit Touchfunktionalität
    David Bushell ist offenbar einer von der Sorte, die nicht still sitzen können. Gelegentlich schreibt er für Smashing Magazine, aber ständig entwickelt er fantastische Plugins für jQuery oder gleich ganz ohne jegliche Dependenzen. Erst vor ein paar Tagen stellte ich an dieser Stelle die Version 2 seines Social Media Plugins SocialiteJS vor. Am vorletzten Wochenende schraubte er spontan ein jQuery-Plugin zusammen, mit dessen Hilfe sich Listenmenüs bauen, hierarchisch sortieren und per Drag & Drop wieder umsortieren lassen. Das Ganze funktioniert auch auf mobilen Geräten mit Unterstützung von JavaScript Touch-Events. Nestable: Das Styling erfolgt per CSS Nestable: Vorerst mit jQuery, später vermutlich Stand-alone Wie Socialite wird wohl auch Nestable in der endgültigen Version ohne Abhängigkeiten auskommen, also auf jQuery verzichten können. Im aktuellen Entwicklungsstand wird das Vorhandensein einer jQuery-Version, vermutlich der Einfachheit halber, noch vorausgesetzt. Nestable arbeitet mit Klassen, Unterklassen und HTML5 Data-Attributen, um die Funktionalität in die Liste zu bringen. Mit Nestable ist es möglich, verschachtelte Listenmenüs zu bauen, deren Verschachtelungen sich auf Klick oder Tap öffnen. Mehrere verschachtelte Ebenen stellen kein Problem dar. Zudem können die einzelnen Listenelemente per Drag & Drop an andere Stellen innerhalb des Listenmenüs verschoben werden. Bushell hat sich hier am Verhalten der WordPress-Navigationsmenüs orientiert. [...]
  • Handsontable: Einfache Tabellenbearbeitung mit jQuery und HTML
    Recht häufig benötigt man innerhalb einer Website eine Tabelle zur Visualisierung von Werten. Schön wäre es zuweilen, wenn diese nicht bloß statisch wäre, sondern dynamisch um Inhalte ergänzt, respektive geändert werden könnte. Das jQuery-Plugin Handsontable des Entwicklers Marcin Warpechowski bietet genau das auf sehr einfache Art und Weise an. Handsontable: Schnell mal eine Tabelle bauen Handsontable trägt die Einfachheit der Lösung schon im Namen. Warpechowski möchte eine schnelle und unkomplizierte, gleichzeitig aber ebenso unkomplexe Möglichkeit zur Implementation von Tabellen in Websites bieten. Dabei soll deren Verhalten und Aussehen optisch an Excel erinnern, sowie dessen Verhaltensweisen nachempfinden. In der Tat habe ich bislang noch keine einfachere Lösung als Handsontable gesehen. Komplexere, umfangreichere gibt es, aber keine einfachere. Handsontable mit Kontextmenü Handsontable steht unter der MIT-Lizenz zur kostenfreien Nutzung auf GitHub zum Download zur Verfügung. Es setzt jQuery voraus und bringt sowohl dieses, als auch alle anderen abhängigen Scripte im eigenen Download-Zip gleich mit. Die Implementation ist schnell erledigt. In der Basiskonfiguration bestückt man den Head-Bereich mit folgenden Skripten: 1 2 3 <script src="jquery.handsontable.js"></script> <link rel="stylesheet" media="screen" href="lib/jQuery-contextMenu/jquery.contextMenu.css"> <link rel="stylesheet" media="screen" href="jquery.handsontable.css"> Will man erweiterte Funktionalität, nämlich das Autocompletefeature oder ein Kontextmenü nutzen, müssen folgende weitere Skripte geladen werden: 1 2 3 [...]
  • Advanced WP Columns: mehrspaltiger Content im WordPress-Blog
    Mehrspaltiger Content ist mit WordPress nicht ohne zusätzliche Plugins zu layouten. Gerade in Designs, die an Print-Magazine erinnern sollen, ist mehrspaltiger Satz jedoch nahezu unverzichtbar. Ganz frisch meldet sich ein neuer Vertreter der Mehrspalten-Plugins im WordPress-Repository. Der Kroate Vladica Savic stellte gestern seinen Vorschlag zum Thema unter dem Namen “Advanced WP Columns” vor. Advanced WP Columns steht unter der GPL-Lizenz zur kostenlosen Nutzung bereit. Savic freut sich aber jederzeit über Spenden. Wir haben uns das Plugin angeschaut. Advanced WP Columns: Erstellt Spaltenlayouts und verwaltet sie auch Savic hat sich viel Mühe gegeben, seinem Plugin einen professionellen Auftritt zu verschaffen. Sogar eine eigene, recht ansprechende Produktwebsite nebst Video-Kurztutorial spendierte er seinem Werk. Auf der Produktwebsite findet sich ein Download-Link, unter dem man Advanced WP Columns herunterladen könnte. Da es im WordPress-Repository ebenfalls verfügbar ist, ziehe ich jedoch den Weg der Installation über das WP-Backend vor. Hier sucht man unter “Plugins installieren” schlicht nach dem Namen und installiert den ersten Eintrag in der Suchliste. Nach der Installation muss das Plugin noch aktiviert werden. Nach der Aktivierung findet sich unter dem Menüpunkt “Einstellungen” ein Zusatz namens “Advanced Columns”. In den Optionen können neben Standard-Startwerten auch Angaben gemacht werden, die für eine optimale Anpassung [...]

Digest powered by RSS Digest

Dr. Web Magazinbeiträge

Meine Beiträge der letzten Woche:

  • 3 interessante Infografiken für Developer
    Infografiken liegen im Trend. Dabei ergeht es zumindest mir mit ihnen mittlerweile so wie mit der nächsten Powerpoint-Präsentation im nächsten Meeting: Sie hängen mir zum Halse raus. Allerdings stolpere ich ab und zu doch über die ein oder andere Ausnahme. Die folgenden drei Ausnahmen beschäftigen sich mit dem Freelancertum, der Datenflut im Weltennetz und der Updatehäufigkeit des Google Algorithmus. Nicht schon wieder Powerpoint, bitte! (Bildquelle: Benjamin Thorn / pixelio.de) Data Never Sleeps: Eine Minute im Internet Auf der Basis von Daten aus Website-Monitoring-Diensten wie Pingdom entwickelte das Team von Domo die folgende Infografik. Sie zeigt, was in jeder Minute eines Tages im Netz los ist. So erfährt man, dass Google 2 Mio. Suchanfragen abwickelt, auf YouTube 48 Stunden Video-Content hochgeladen werden oder Facebook-User fast 700.000 Inhalte teilen. Im direkten Vergleich interessant ist, dass Instagrammer mit 3.600 Bildern pro Minute aktiver sind als Flickr-User, die indes immer noch auf 3.125 Bilder pro Minute kommen. Wer die E-Mail abschreiben will, sollte sich das anhand der Zahlen nochmal überlegen. Sie dominiert mit über 200 Mio. Sendungen pro Minute weiter klar die Datennetze. (Bitte auf die Grafik klicken, um die vollständige Version zu sehen) (Quelle: Domo-Blog) Inside The Mind Of A Freelancer: Was geht [...]
  • jQuery: Erste Beta der Version 1.8 bringt zahlreiche Änderungen
    Gestern wurde im offiziellen jQuery-Blog die öffentliche Verfügbarkeit der ersten Beta der neuen Version 1.8 bekanntgegeben. Entwickler sind aufgefordert, ihre Anwendungen unter Einbindung der 1.8er Beta zu testen und etwaige Bugs zentral zu melden. Gleichzeitig vermeldet das Team, dass mittlerweile die Hälfte aller großen Websites von der beliebten Javascript-Bibliothek angetrieben wird. Die kommende Version bringt zahlreiche Veränderungen, die nicht nur im Hinzufügen von Funktionalität, sondern insbesondere in deren Entfernen bestehen. Was auf den ersten Blick paradox klingt, ist Teil der natürlichen Evolution des inzwischen sechs alten Projekts. Wir stellen die wichtigsten Änderungen kurz zusammen. In drei Tagen startet die jQuery-Konferenz in San Francisco… Modularität Mit Version 1.8 wird jQuery modular. Unter Verwendung des Kommandozeilentools grunt kann sich jeder eine angepasste jQuery-Version erstellen, die lediglich die von der eigenen Website benötigten Module enthält. Ausgeschlossen werden können derzeit die Module ajax, css, dimensions, effects und offset. Durch das Ausschließen aller optionalen Module wird die einzubindende Bibliothek etwa um ein Drittel kleiner und bringt nurmehr 21kb auf die Waage. Der Unterschied erscheint in absoluten Zahlen nicht besonders hoch, kann jedoch auf mobilen Plattformen spürbare Auswirkungen zeitigen. Vorsicht ist dann geboten, wenn man auf Dritt-Plugins setzt, da diese mit Abhängigkeiten zu Modulen arbeiten könnten, [...]
  • Bookmarklet Combiner schafft Platz in der Lesezeichen-Leiste
    Ich weiß nicht, wie Ihr Workflow aussieht, wenn Sie Inhalte im Netz teilen oder ablegen. Ich jedenfalls benutze, wo immer es möglich ist, Bookmarklets. Dabei handelt es sich um diese kleinen Javascript-Fetzen, die Funktionen ausführen, wie das Teilen der Seite, auf der man sich gerade befindet, auf Twitter oder das Ablegen der Seite für späteres Lesen in Pocket oder Instapaper. Wo immer ein Dienst existiert, der Daten aufnehmen will, er verfügt über ein Bookmarklet. Ich ziehe Bookmarklets inzwischen auch dedizierten Plugins, Extensions and what not vor, wenn diese nicht über nennenswert größere Funktionalitäten verfügen als ihre Scriptlet-Pendants. Der Haken an dieser Vorliebe ist: Der Platz in der Lesezeichenleiste wird knapp, man ist gezwungen sich eine Ordnerorganisation zu überlegen. Real Life Bookmarklets: Voll retro (Bildquelle: Andreas Carjell / pixelio.de) Bookmarklet Combiner kann beliebig viele Bookmarklets mit einem Klick abfeuern Das kleine Onlinetool Bookmarklet Combiner geht einen anderen Weg. Es kombiniert einfach beliebig viele Bookmarklets in eines, das man dann auch noch mit anderen teilen kann, so man das möchte. Die Vorgehensweise ist simpel und erklärt sich bei der ersten Nutzung nahezu von allein. Sämtliche zu kombinierenden Bookmarklets werden nacheinander unter Punkt 1 “Enter bookmarklets”, beginnend mit einem Namen, in die dafür [...]
  • Socialite.js: Flexible Social Media-Integration jetzt in neuer Version 2.0
    Socialite.js ist ein etabliertes kleines Javascript-Tool für die flexible Einbindung verschiedener Social Media-Dienste. Das Interessante an Socialite.js ist zweierlei. Zum einen wird die Einbindung der Buttons durch beliebige Events gesteuert. So ist man nicht darauf angewiesen, den Besucher auf den Seitenaufbau warten zu lassen, bloß weil die Social-Knöppe noch nicht geladen sind. Zum anderen kann auf die manuelle Einbindung der nativen Buttons der verschiedenen Dienste verzichtet werden. Socialite.js verhält sich exakt wie die Originale. Vor gut zwei Wochen brachte Entwickler David Bushell die Version 2.0 seines Tools hervor. Jeder kennt jeden um fünf Ecken (Bildquelle: Gerd Altmann / pixelio.de) Socialite.js: Jetzt mehrsprachig und mit Hook-Funktionalität In Version 2.0 unterstützt Socialite.js Mehrsprachigkeit, kann mithin einfacher lokalisiert werden. Zudem führt Bushell Event-Hooks in das Tool ein. So können die Social Buttons geladen werden, wann der Seitenbetreiber das will. In Frage käme am Beispiel einer Magazinseite etwa das Laden beim Öffnen eines Beitrags oder beim Überfahren eines Beitrags mit der Maus oder sogar erst nach einem ausdrücklichen Klick. Hier sind der Fantasie nur insofern Grenzen gesetzt als es lediglich eine begrenzte Anzahl denkbarer Events gibt. Socialite.js implementiert übrigens die einzelnen Dienste streng nach deren Vorgaben. Es ersetzt also die ansonsten händisch zu erledigende [...]
  • Freepik: Suchmaschine für kostenlose Design-Ressourcen
    Fotos, Vektorgrafiken und Photoshop-Dateien: Diese drei Begriffe definieren ziemlich genau die Bereiche, in denen jeder Designer ständig auf der Suche ist. Freepik ist ein Suchmaschine aus dem schönen Spanien, die sich genau auf diesen Bedarf spezialisiert hat und zur ersten Anlaufstelle werden will. Das Konzept ist einfach. Suchende verwenden es wie jede andere Suchmaschine auch mit frei formulierten Begriffen. Freepik gibt darauf hin mehr oder weniger passende Suchergebnisse zurück. In meinem kurzen Test konnte der Dienst durchaus überzeugen, wenn auch nicht uneingeschränkt. Freepik: die Startseite Freepik: Lizenzen bleiben auch hier Fallstricke Freepik funktioniert nach eigenen Angaben mit automatisiert das Internet durchforstenden Robots. Nur so ist auch die immense Zahl von über 1,3 Mio. verschiedenen Ressourcen zu erklären, die Freepik zu finden verspricht. Laut Betreiber erfolgt auch die Beurteilung des Content und die Katalogisierung, sofern er für relevant gehalten wird, automatisiert. Die Angaben zur jeweiligen Ressource werden aus der Ursprungsseite ausgelesen und auf Freepik mit angezeigt. Hier ist die gültige Lizenz von besonderer Bedeutung, denn hierin lauert bekanntlich das größte, vor allem teuerste Konfliktpotenzial. Hat man sich für eine Ressource entschieden und sich auf Freepik die relevanten Informationen angeschaut, führt ein Klick auf den Download-Link zur Ursprungsseite, die die Ressource letztlich [...]
  • Update 2012: Einnahmen-Ausgabenrechnung für jedermann (mit Excel)
    Vor zwei Jahren schrieb Dr. Web-Autorin Manuela Müller einen bis heute viel beachteten Beitrag zum Thema Einnahme-Überschussrechnung. Eigens für diesen Beitrag entwarf sie eine entsprechende Kalkulationstabelle auf der Basis von Open Office und Excel. Dieses Tool nahm sich unser Leser Thomas Räbiger vor und arbeitete es auf den heutigen Stand der Erfordernisse um. Freundlicherweise stellt er es der Dr. Web-Leserschaft zur freien Verfügung. Kleine Einschränkung der aktuellen Version: Sie funktioniert nur unter Excel ab der Version 2007 für Windows und der Version 2008 für Macintosh. Der Versuch, mittels des Befehls “Speichern unter” eine ODS-Version, sowie eine für ältere Excel-Versionen zu generieren, scheiterte mit Warnhinweisen zu verloren gehender Funktionalität. So haben wir es gelassen. Ansonsten finden Sie nachfolgend den ursprünglichen Beitrag, allerdings auf den aktuellen Rechtsstand gebracht. (Bildquelle: Thorben Wengert / pixelio.de) Der Fiskus: das unbekannte Wesen Für viele Selbstständige – vor allem für Existenzgründer –  ist die Buchführung eine lästige Pflicht. Dies vor allem, weil sie ein großer Zeitfresser ist. Besonders dann, wenn weder Buchführungskenntnisse noch eine entsprechende Software vorhanden sind und zudem die Neigung besteht, ein- und ausgehende Rechnungen nebst Zahlungsbelegen bunt durcheinander gewürfelt in Ablagekörben oder Schuhkartons zu horten, wird die Buchführung zu einer Mammutaufgabe. Mit ein wenig [...]
  • AngularJS erweitert HTML um Anwendungslogik und Web Components
    Vor zwei Tagen stellte ich das Mozilla-Projekt X-Tag an dieser Stelle vor. Mit X-Tag ist es möglich, auf der Basis von Javascript eigene HTML-Elemente zu entwerfen und zu verwenden, als würden sie im Standard so bereit gestellt. X-Tag basiert locker auf dem aktuellen Stand der Diskussion des W3C Arbeitspapiers zu Web Components, wobei es sich auf den Teilbereich Custom Elements beschränkt. Googles AngularJS schlägt in die gleiche Kerbe, ist dabei aber nicht nur auf Custom Elements beschränkt, sondern liefert einen anwendungslogischen Teil mit. Wir werfen einen Blick auf Googles Vorschlag. AngularJS: Model Driven Views und Custom Elements AngularJS ist ein komplexes Javascript-Framework, entworfen mit dem Ziel, HTML fitter für Web Apps zu machen. Mit AngularJS wird HTML dynamischer und kann in begrenztem Umfang direkt auf Benutzereingaben reagieren. Im Grunde liefert AngularJS keine wirklich alleinstellenden Leistungsmerkmale. So kann alles, was mit AngularJS möglich ist, auch auf andere Weise, etwa mittels jQuery, das AngularJS übrigens integriert, erreicht werden. Der Unterschied besteht nicht in der Leistungsfähigkeit, sondern in der Art und Weise der Umsetzung. Und die ist in der Tat anders… Wie bei X-Tag ist es auch bei AngularJS sinnvoll, sich die Vorgehensweise anhand eines Codebeispiels zu verdeutlichen. Der folgende Code erzeugt ein [...]
  • jQuery Knob: Canvasbasierter Drehknopf für virtuelle Thermostate
    Schon gut. Natürlich ist das folgend vorgestellte jQuery-Plugin Knob nicht für virtuelle Thermostate erdacht worden. Vielmehr lässt sich mit dem flexibel konfigurierbaren Drehrädchen so ziemlich alles steuern, was man üblicherweise mit solchen Bedienelementen im Web steuert. Es eignet sich beispielsweise für die Lautstärkenregelung, die Erhöhung von Helligkeit und/oder Kontrast, das Spulen innerhalb von Medien, eben ganz generell die Einstellung beliebiger Werte in Web Apps. jQuery Knob funktioniert sogar auf Touchscreens Der jQuery Knob ist ein rein Javascript- und HTML5-basierter Drehregler, der sowohl auf Touchscreens, wie auch mit Mausrad und Tastatur verwendet werden kann. Hat der Benutzer Javascript deaktiviert, wird der Bereich, in dem eigentlich der Knob zu sehen sein sollte, als reines Input-Element des Typs Text angezeigt. Die Knobifizierung des Input-Elements erfolgt durch die Vergabe der Klasse “dial”. Den eigentlichen Canvas zeichnet sich das Plugin per Anwendungslogik zum gegebenen Zeitpunkt selbst. Auf Grafikdateien wird komplett verzichtet. Mit HTML5 Data-Attributen fügt man dem Input-Element Optionen hinzu, die sich sowohl auf das Verhalten wie auch auf die Optik auswirken können. So konfiguriert man Mindest-, wie Höchstwerte, legt einen Endpunkt fest, schaltet die Steuerung aktiv oder inaktiv (für reine Infodisplays) und kümmert sich um das Layout des Reglers, der im Standard in einer [...]
  • Initializr jetzt auch mit Bootstrap und “Mobile First”-Template
    Initializr ist ein Onlinedienst, mit dessen Hilfe man sich eine Projektvorlage auf der Basis der HTML5 Boilerplate (H5BP) zusammenklicken kann. Vor ziemlich genau einem Jahr berichtete ich erstmals darüber. In der Zwischenzeit wurde das Projekt des Entwicklers Jonathan Verrechia deutlich erweitert. So ist es mittlerweile nicht nur möglich, H5BP zu verwenden. Vielmehr steht ein dediziertes Responsive-Template, sowie Twitters Shooting Star Bootstrap zur Verfügung. Initializr: die Initialzündung für das eigene Webprojekt Junge, wie die Zeit vergeht. Da dachte ich vor knapp 12 Monaten noch, Initializr habe keine große Perspektive. Zu limitiert erschienen mir die Möglichkeiten. Lediglich H5BP wurde unterstützt, responsives Design nur in dessen Rahmen und den Modernizr musste man sich manuell besorgen. Umso überraschter war ich, bei einem Routine-Blick auf ältere Projekte feststellen zu können, dass Verecchia in den letzten 12 Monaten keineswegs untätig gewesen ist. So hat er vor allem eine handfeste Alternative für das responsive Webdesign durch den Einbau von Twitters Bootstrap in Initializr geschaffen, auch Modernizr backt er jetzt gleich mit ein. Bootstrap, das Framework aus dem Hause Twitter, stand zum Start des Initializr noch gar nicht zur Verfügung, sondern wurde erst letztes Jahr im Juli der Web-Öffentlichkeit zugänglich gemacht. Seither erlebt es einen regelrechten Boom. Developern, [...]

Digest powered by RSS Digest

Dr. Web Magazinbeiträge

Meine Beiträge der letzten Woche:

  • Dummy: Umfassendes PHP-Toolkit für das Rapid Prototyping von Websites
    Wenn man täglich auf der Suche nach neuen, interessanten Technologien und Tools ist, die das Berufsleben eines Webworkers erleichtern und im besten Falle bereichern können, ist man einiges gewohnt und nicht mehr so leicht zu begeistern. Das PHP-Toolkit Dummy von David Kerns, um das es im folgenden Beitrag gehen soll, hat es dennoch geschafft. Dummy kann eine komplette Website mit flexiblen Inhalten versehen, die sich zudem bei jedem Browser-Reload ändern. Vergessen wir die ganzen statischen Platzhalter-Inhaltsdienste. Jetzt kommt Dummy! Dummy: Prototyping mit dynamischen Inhalten In den letzten Wochen stellten wir im Dr. Web Magazin eine ganze Reihe von Platzhalterdiensten vor. Mit diesen lassen sich Text- oder Bildinhalte generieren, die ein Layout mit Inhalten füllen, bevor es echte Kundeninhalte gibt. Derlei Dienste sind für erste Mockups nahezu unverzichtbar, will man nicht immer den gleichen Lorem Ipsum einkopieren und (pfui!) das gleiche 1-Pixel-Gif hoch skalieren. Ich weiß, letzteres macht keiner (mehr)… Mit dem PHP-basierten Toolkit Dummy lassen sich sowohl Text-, wie auch Bildinhalte generieren und einfügen. Die verwendete Syntax ist dabei fast schon natürlich-sprachlich, jedenfalls leicht verständlich und lesbar. Neben der Generierung von Zufallsinhalten ist Dummy in der Lage, diese in Länge und/oder Ausführung zu variieren. Das ist insbesondere dann nützlich, wenn [...]
  • Opera 12: die Neuerungen für Webentwickler
    Opera 12 ist da. Der stets unterschätzte Browser, der zu seiner verdienten Verbreitung ständig deutlichen Abstand hält, kann seit gestern von der Unternehmenswebsite heruntergeladen werden. Neben vielen Verbesserungen, die vor allem den Endnutzer betreffen, wie einer gesteigerten Performance, einem einfacheren Theming und der Unterstützung des Do-Not-Track-Headers zur Verbesserung der Anonymität im Web, bietet Opera 12 auch dem Webentwickler verbesserte Features. So geht der Browser konsequent weiter auf dem Weg des kommenden HTML5-Standards. Opera 12: Mehr HTML5, weniger eigene Services Die aufregendste Neuerung in Opera 12 dürfte die Unterstützung von WebRTC sein. Dieser noch in Entwicklung der W3C Web Real-Time-Communications Arbeitsgruppe befindliche Standard soll in der Zukunft Echtzeit-Kommunikationsanwendungen in Web Apps, also ohne zusätzliche Technologien neben dem Browser, ermöglichen. Opera 12 erlaubt bereits jetzt den Zugriff auf die Webcam des Users. Die Unterstützung funktioniert im Standard, also ohne Vendor-Prefixing. So können mit Opera 12 bereits zum jetzigen Zeitpunkt über die getUserMedia API Fotos über die Webcam aufgenommen und weiterverarbeitet werden. Um zu verhindern, dass die Funktionalität missbräuchlich verwendet wird, lässt Opera dem Benutzer per auffälliger Meldung die Wahl, die Schnittstellen zu aktivieren, wenn es erkennt, dass eine Web App den Zugriff etwa auf die Webcam zu erlangen versucht. In Arbeit befindet [...]
  • Aviary Photo Editor für iOS und Android: Kostenlos, leistungsfähig, intuitiv
    Aviary ist ein amerikanisches Internetunternehmen, das sich bereits seit Jahren mit einer ganzen Palette von Online-Grafikanwendungen bemüht, nennenswerte Marktanteile zu erzielen. Für Dr. Web schrieb ich vor nahezu zwei Jahren im Rahmen einer Komplettübersicht über die Produktpalette, was von Aviarys Portfolio im Alltag zu halten ist. Damaliges Fazit: Muss man alles nicht haben, kann aber bisweilen nützlich sein. Gestern stellte Aviary nun seinen mobilen Photo Editor als eigenständige App für die beiden großen Smartphone-Plattformen vor. Hier lautet mein Fazit abweichend: Sollte man auf jeden Fall haben, ist sehr nützlich. Aviary Photo Editor: Vom Plugin zu App Der Aviary Photo Editor, der seit dem 13. Juni 2012 auf das iPhone oder den Androiden geladen werden kann, ist streng genommen keine Neuheit. Schon seit einer Weile stand die Funktionalität der App als Plugin zur Verfügung. Auf dem Androiden installiert, musste man über den Teilen-Befehl mit nachfolgender Anwahl von Aviary den Start des Editors erzwingen. Diese Vorgehensweise wurde von sehr vielen Zeitgenossen nicht verstanden, was zu wütenden Kommentaren und Ein-Sterne-Bewertungen in Googles Play Store führte. Nicht zuletzt dieser Umstand dürfte Aviary dazu bewogen haben, den Editor als eigenständige App verfügbar zu machen. In der Tat gewinnt das Werkzeug dadurch deutlich an Handhabbarkeit. Immerhin [...]
  • Lovelicons: 96 kostenlose Vektor-Icons in drei verschiedenen Styles mit PSD
    Es gibt solche und solche Icons. Das neue Set Lovelicons gehört zu der unbedingt empfehlenswerten Sorte. Es enthält zwar nur 96 Symbolzeichen, diese dafür aber als Vektoren in drei verschiedenen Styles. Ein PSD mit allen Varianten befindet sich – zusätzlich zu allen Einzel-Icons als PNG – im Downloadpaket. Richard Tabor von Purty Pixels hat, gemeinsam mit dem Zeichner G. Pritiranjan Das ganze Arbeit geleistet. Lovelicons: Übersicht in der Variante styled-dark Lovelicons – Voll bearbeitbare Photoshop-Datei wird mitgeliefert Die 96 Bildzeichen des Lovelicon-Set eignen sich besonders für die Entwicklung von Websites oder Apps für mobile Geräte. Es handelt sich überwiegend um Symbole für Bedienelemente, etwa Play, Stop, Pause, Rewind, oder Statusanzeigen, etwa Batteriesymbole mit unterschiedlicher Ladestandsanzeige. Dadurch, dass die Icons als Vektorformen in Photoshop angelegt sind, sind sie beliebig skalierbar und stünden so theoretisch auch für Printprojekte zur Verfügung. Innerhalb der Photoshop-Datei können zudem alle Ebeneneffekte nachvollzogen und/oder verändert werden. Das Icon-Set liegt quasi im Rohformat vor. Lovelicons: Gut organisiertes PSD Wie alle auf der Website Purty Pixels verfügbaren Ressourcen ist das Lovelicon Set für kommerzielle und private Projekte uneingeschränkt nutzbar. Lediglich die Weiterverbreitung des Sets an sich verbittet sich der Betreiber. Ausdrücklich weist Tabor allerdings darauf hin, dass veränderte, auf [...]
  • 9 Onlinedienste, die Farbpaletten aus Bildern erstellen
    Dienste zur Erzeugung von Farbpaletten gibt es im Netz wie Sand am Meer. Solche, die auch oder nur Farbpaletten aus vorhandenen Bildern extrahieren können, sind allerdings relativ selten. Dabei entspricht es zumindest meinem Workflow weit eher, kundennahe Farbpaletten aus vorhandenen Materialien zu entwickeln, anstatt sie from scratch neu zu definieren. Ich habe mich daher auf die Suche gemacht, um gezielt diese Dienste ausfindig zu machen. Im folgenden zeige ich, was ich fand. Alle vorgestellten Dienste sind kostenlos nutzbar. Colr.org Colr.org ist ein Urgestein unter den Palettendienstleistern. Es bietet nicht nur die Generierung von Paletten aus Bildern, die der Nutzer selbst hochladen kann, sondern kann auch Farbstrukturen aus Websites extrahieren oder Flickr-Zufallsbilder auswerten. Speichern lassen sich die Paletten, die bei Colr Schemes heißen, im Dienst selber jedoch nicht. Wer schnell eine komplette Palette im Überblick haben will, wählt ebenfalls nicht als erstes diesen Dienst. DeGraeve Color Palette Generator Der Color Palette Generator von DeGraeve.com bietet lediglich einen sehr groben Überblick über die in einem Bild verwendeten Farben und gibt sie als Hex-Werte aus. Das zu analysierende Bild muss bereits im Web vorhanden sein. Der Generator akzeptiert keinen Upload, lediglich die Eingabe einer URL. Weitergehende Funktionalitäten sollte man gar nicht erst suchen, [...]
  • Pixabay: Fotoplattform mit ausschließlich gemeinfreien Bildern
    Als Designer ist man immer auf der Suche nach guten Bildern. Auch Beiträge im Dr. Web Magazin bedürfen ab und an zusätzlicher Bilder. Bilderdienste sind dementsprechend wichtige Begleiter im Berufsleben von Designern und Redakteuren. Da gibt es natürlich die großen kommerziellen Dienstleister, bei denen man für jedes einzelne Bild unterschiedlich hohe Summen zu zahlen hat. Und dann gibt es diejenigen Dienstleister, die einem zwar die kostenfreie Nutzung der Bilder, aber zu unterschiedlichen, teils nicht so einfach nachzuvollziehenden Bedingungen andienen. Bei Pixabay ist es ganz einfach. Kein Bild kostet etwas, weitere Lizenzbedingungen gibt es nicht. Startseite des kostenlosen Bilderdienstes Pixabay Bilderdienste: Ein Minenfeld mit potenziell schwerwiegenden Konsequenzen Schon vor vier Jahren rief ich den kostenlosen Bilderdienst Lebensmittelfotos.com ins Leben. Es handelte sich um eine Reaktion auf die Abmahnstrategien eines damals sehr aktiven Lebensmittelfotografen, der Verwendern seiner, zumeist trivialen Abbildungen diverser Lebensmittel, allen voran Brötchen, mit großer Konsequenz hohe Summen für die nicht lizenzierte Verwendung seiner “Werke” abverlangte. Lebensmittelfotos.com sollte eine sichere Alternative werden. Von daher setzte ich von Beginn an ausschließlich auf das Prinzip der Gemeinfreiheit, in den USA als Public Domain bekannt. Nur gemeinfreie Bilder bieten für den Verwender überhaupt kein Risiko. Alle anderen Lizenzen bergen Fallstricke. Vor allem bei [...]
  • on{X} steuert Android-Smartphones per JavaScript
    Dass ausgerechnet aus dem Hause Microsoft eine innovative Lösung zur Steuerung von Android-Smartphones kommt, damit haben wir nicht rechnen müssen. Und dass sie nicht proprietär daher kommt, sondern auf JavaScript basiert, ist ebenfalls erstaunlich. Unter dem Namen on{X} liefert die israelische Dependance des Redmonder Riesen eine Kombination aus App und Website, mit der es möglich ist, sein Android-Smartphone zu Dingen zu veranlassen, die es ansonsten so nicht könnte. Der Ansatz hat es in sich. on{X}: Zunächst Android-only Gleich zu Beginn soll geklärt werden, warum on{X} ausschließlich für die Android-Plattform existiert, wo doch das gesamte Design, sowohl der App, wie auch der Website ganz eindeutig nach Windows Phone aussieht. Es liegt ganz profan am Sicherheitskonzept. Das ist bekanntlich bei Android im Vergleich zu Windows Phone oder iOS etwas – sagen wir – weniger restriktiv. Mit Android kann man bereits ohne Rootrechte viel mehr tun als auf den Konkurrenzplattformen möglich wäre. So ist on{X} auf Android wohl als Testphase für eine spätere Umsetzung auf Windows Phone zu verstehen. Es war eben einfacher umzusetzen und die Verbreitung von Android verspricht wesentlich mehr Feedback, das für die weitere Entwicklung genutzt werden kann, als eine native Windows Phone App jemals bringen wird. Wenn also die [...]
  • jQuery Picture steuert Bilder in responsiven Designs zuverlässig
    Responsives Design stand nicht von Beginn an auf der Agenda zur Erweiterung des HTML-Standards hin zur Version 5. Und so schlägt man sich auch heute noch mit manchen Fragestellungen eher schlecht als recht herum. Das Thema “Bilder in responsiven Layouts” gehört dazu. An sich sind Bilder über das neue Figure-Tag einzubinden, doch gibt es auch den Vorschlag, stattdessen ein neues, eigenes Picture-Tag mit untergeordneten Source-Tags einzuführen. Das Plugin jQuery Picture kann mit beiden Varianten umgehen und Bilder in responsiven Layouts zuverlässig steuern. Picture-Tag: Eine Lösung speziell für Bilder Das Picture-Tag ergibt in responsiven Layouts den meisten Sinn. Innerhalb eines Picture-Containers platziert man mehrere Source-Tags mit den URLs der verschiedenen, zum gleichen Picture-Container gehörenden Bilder. Dem jeweiligen Source-Tag gibt man die zugehörige Media-Query direkt mit. So könnte das aussehen: 1 2 3 4 5 6 7 8 <picture alt="A Half Brained Idea"> <source src="assets/images/small.png"> <source src="assets/images/medium.png" media="(min-width:440px)"> <source src="assets/images/large.png" media="(min-width:600px)"> <noscript> <img src="assets/images/large.png" alt="A Half Brained Idea"> </noscript> </picture> Sie erkennen die Funktionalität auf einen Blick. Der Picture-Container enthält drei Bilder, von denen das größte, large.png, ab einer Viewport-Breite von 600 Pixeln angezeigt werden soll. Darunter, ab einer Breite von 440 Pixeln, käme medium.png zur Anzeige und bei noch kleineren Auflösungen [...]

Digest powered by RSS Digest

Dr. Web Magazinbeiträge

Meine Beiträge der letzten Woche:

  • Gridpak generiert Spalten-Layouts für responsives Webdesign
    Vor einigen Tagen stellte ich Ihnen Responsify.it vor. Es handelt sich um ein Online-Tool, mit dessen Hilfe man Grids für responsive Layouts generieren kann. Responify.it ist ein hervorragendes Werkzeug, mit dem sich in einer intuitiv bedienbaren UI gut arbeiten lässt. Allerdings kann Responsify.it ausschließlich Designs auf Basis von Prozentwerten erzeugen. Pixelwerte werden nicht unterstützt. Hier kommt Gridpak ins Spiel… Übrigens: Dieses Spalten ist nicht gemeint… (Bildquelle: uschi dreiucker / pixelio.de) Gridpak: Intuitiv bedienbar und leistungsstark Gridpak ist ein direkter Wettbewerber zu Responsify.it und erledigt den identischen Task. Dennoch ist erkennbar das eine Tool kein Klon vom anderen. Erskine Design, die Entwickler des Onlinegenerators Gridpak, gehen schon in Sachen UI einen ganz anderen Weg als den, den Kennedy für sein Responsify.it eingeschlagen hatte. Während Kennedys Produkt stark an Tablet-Apps erinnert, kommt Gridpak einem in der Handhabung eher wie eine Grafiksoftware vor. Funktional sind die Wettbewerber fast identisch. Gridpak ist in der Lage, Grids mit maximal 99 Spalten zu erzeugen. Es gibt keine Konventionen darüber hinaus, von einer bis 99 Spalten ist alles frei wählbar. Neben der Zahl der Spalten stellt der Nutzer noch deren Padding, sowie den Spaltenabstand zueinander ein. Diese Werte können in Prozent oder, anders als bei Responsify.it, auch [...]
  • jQuery++ schließt Lücken im jQuery-Funktionsset
    Bitovi lautet der Name einer Entwicklerfirma, die sich voll auf JavaScript spezialisiert und fokussiert hat. Wem der Name bekannt vorkommt, wird möglicherweise an das JavaScript-Framework CanJS denken. CanJS soll die schnelle Entwicklung von Rich Web Applications erleichtern und existiert als Aufsatz zu jQuery, MooTools, Dojo, Zepto und YUI. Jetzt schießt Bitovi sein nächstes Projekt in die freie Wildbahn. Es handelt sich um jQuery++, nach eigenen Angaben das Toupet für die Glatze jQuerys. jQuery++: Nur nehmen, was man auch braucht Bitovis jQuery++ ist im Grunde keine große Sache, schon gar nicht sollte man es mit Projekten wie jQuery UI oder jQuery Tools vergleichen. Ein und ein halbes Dutzend Funktionen, die jQuery nicht oder nicht in dieser Form mitbringt, ergänzt die kleine Sammlung. Da die Einzelkomponenten unterschiedliche Must-Have-Grade aufweisen, kann man sich ein JavaScript-File auf der Produktseite zusammen klicken, welches nur die persönlich benötigten Komponenten enthält. So spart man Gewicht, das sich ansonsten später im Besucherbrowser wieder negativ bemerkbar machen würde. Aus meiner Sicht die interessantesten Funktionen bieten jQuery.animate und jQuery.cookie. jQuery.animate ersetzt die jQuery-Animationsfunktionalität durch eine rein CSS3-basierte, wenn der jeweilige Besucherbrowser das unterstützt. Hierzu überschreibt es die jQuery-Funktion, akzeptiert aber die gleichen Argumente, wodurch eine nahtlose Übernahme der Funktionalität gewährleistet [...]
  • Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar
    Tabellen sind in responsiven Layouts nicht nur dann eine Plage, wenn sie zu Layoutzwecken missbraucht werden. Selbst bei korrektem Einsatz als Inhaltstabelle kommt es je nach Größe der Tabelle, respektive deren Inhalts, häufig genug vor, dass das Layout nicht so skalieren kann, wie es erforderlich wäre. Der allseits beliebte horizontale Scrollbalken erscheint. Aber auch, wenn das nicht der Fall ist, skalieren Tabellen im Regelfall zur Unbrauchbarkeit herunter. Zurb, die Entwickler des bekannten Frameworks Foundation, legen mit Responsive Tables eine Lösung vor, die nicht perfekt ist, aber zeigt, wie es auch gehen kann. Zurbs Responsive Tables: CSS + JavaScript = lesbare Tabellen Neben dem Ziel, dass Tabellen responsive Layouts nicht zerstören sollen, wollte das Entwicklerteam zwei weitere wichtige Punkte erfüllt sehen. Zum einen sollte die responsive Tabelle nicht unnötig Tabelleninhalte verbergen und zum anderen sollte es den Betrachtern immer noch möglich sein, Tabellen mit einer als Schlüssel definierten Spalte vernünftig bedienen zu können. So schaute man sich die Standardstruktur real existierender Tabellen an und kam zu dem Schluss, dass zumeist die erste Spalte eben diese Schlüsselspalte darstellt. Die Entwickler entschlossen sich, dafür zu sorgen, dass diese erste Spalte stets sichtbar bleibt, unabhängig von der Displaygröße insgesamt. Das folgende Schema verdeutlicht das [...]
  • Internet Explorer 10 Preview 6 mit Flash und mehr HTML5
    Zum vergangenen Wochenende stellte Microsoft ein aktualisiertes Windows Release Preview zum Download zur Verfügung. Mit der neuen Version wird die Platform Preview 6 des kommenden Internet Explorer 10 geliefert. Diese bringt ein paar Überraschungen mit, bewegt sich ansonsten aber stetig in Richtung HTML5-Standardunterstützung. Windows 7 User schauen übrigens weiterhin in die Röhre. Der IE 10 bleibt auf die Version 8 und ihr Metro-Derivat beschränkt. IE 10, Preview 6: Flash und Do Not Track Werfen wir zunächst einen Blick auf eher überraschendere Features der aktuellen Preview-Version des IE. In gleicher Weise wie Google es mit Chrome getan hat, implementierte Microsoft in Zusammenarbeit mit Adobe Flash fest in die Browserengine. Updates des Players, der streng genommen jetzt keiner mehr ist, erfolgen im Wege des Updates des kompletten Browsers. Flash findet sich sowohl in der 32bit-, wie auch in der 64bit-, wie auch in den Tabletversionen. Um den Einsatz auf dem Tablet zu optimieren, wurden touch-spezifische Funktionalitäten, etwa Doppel-Tap und Zoomen mit Fingergesten, in den Flash-Kern des IE programmiert. Andere Flash-Funktionalitäten, etwa Rollovers, wurden aus dem Metro-Tablet-Flash entfernt, da sie auf Touchdisplays ohnehin nicht funktionieren würden. Die Desktop-Varianten werden jeglichen Flash-Content darstellen, die Tabletversion wird mittels einer von Microsoft gepflegten Compatibilty View List [...]
  • Brownie: Ein kostenloses, responsives HTML5/CSS3-Website-Template
    Muhammad Shahbaz Saleem vom Entwickler- und Gründerblog Egrappler stellt eine komplette Website-Vorlage auf der Basis von HTML5/CSS3, sowie jQuery und einigen darauf aufsetzenden Plugins zur freien Verfügung. Das Template namens Brownie ist, wenn man sich mit Optik und Struktur anfreunden kann, ein guter Startpunkt für die eigene Website. Saleem sieht die Vorlage als besonders für Portfolio-orientierte Websites geeignet. Das liegt hauptsächlich am integrierten Slider, der die komplette Optik der Startseite dominiert. Brownie: Responsiv mit Einschränkungen Das erst wenige Tage alte Brownie zeigt sich im Vergleich zu anderen Templates sehr vollständig. Zudem liefert es für manche Bereiche, allen voran der Portfolio-Darstellung, mehrere Designvarianten mit. Saleem hat auch an 404 und Kontaktformular gedacht, wobei das Kontaktformular über ein ebenfalls im Paketumfang befindliches PHP-Script angetrieben wird. Eine Demo kann hier ausprobiert werden. Eine Vielfalt gängiger jQuery-Plugins liefert weitere Funktionalitäten, sowie sorgt teilweise für das responsive Verhalten des Templates. Um Requests zu sparen, stapelte Saleem alle Plugins in einer einzigen JS-Datei übereinander, die auf diese Weise minified immer noch stolze 120k auf die Waage bringt. Vollständige Designvorlage mit allem, was man so braucht… Das Design funktioniert relativ solide responsiv. Nur der Anzeigenplatz oben rechts wirkt undurchdacht implementiert. Er beeinträchtigt beim Resizing, sowohl im Desktopbrowser, [...]

Digest powered by RSS Digest

stories don't tell themselves