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

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>