Kategorien
JavaScript & jQuery Programmierung

Slip.js: Kleines Script zur Touch-Optimierung von Listen in Web-Apps

Slip.js begegnete mir schon vor einigen Wochen, hinterließ jedoch auf den ersten Blick nicht genug Eindruck. Nun aber hatte ich einen konkreten Anwendungsfall und ich erinnerte mich, Sie kennen das, da doch etwas gesehen zu haben. Jetzt, in der konkreten Umsetzung muss ich einräumen, dass Slip.js für die Erstellung sortierbarer, oder generell bearbeitbarer Listen per Touch eine ziemlich clevere Sache ist.

Noch mehr JavaScript-Scripts gibt es hier.

unsplash-04

Slip.js: Swipen, was das Zeug hält

Slip.js stammt aus den Hirnwindungen des in London ansässigen Polen Kornel Lesinski, der auf Twitter lediglich unter dem Namen Kornel und mit einer Website namens Pornel auftritt. Hmm. Seine Brötchen verdient er bei der Financial Times, im dortigen FT Lab. Hier werkelt er an Konzepten mit (hoffentlich) Zukunft. Kornel ist kein Unbekannter. Aus seiner Feder stammen die populären Bildverkleinerer ImageOptim, ImageAlpha und pngquant. Slip.js schlägt jedoch bereits zum jetzigen Zeitpunkt alle seiner bisherigen Projekte in Sachen Popularität um ein Mehrfaches.

Dabei ist Slip.js auf den ersten Blick eher unspektakulär. Smartphone-Nutzer sind es gewohnt, Listen per Swipegesten umsortieren, Elemente löschen, sie generell per Touch bearbeiten zu können. Bedenken muss man dabei allerdings, dass dieses Feature nur für native Apps einfach umzusetzen war. Das Besondere an Slip.js ist, dass es Swipegesten wie in nativen Apps für Web-Apps zugänglich macht.

Mit Slip.js lassen sich Listen-Items per Swipe an eine andere Position bringen, löschen oder mit Interaktion versehen. Das folgende kleine GIF zeigt ziemlich gut, was Sie erwarten dürfen:

slipjs

Das Swipen nach rechts und links lässt sich mit Features, wie Löschen oder Teilen versehen. Das Ganze funktioniert mit benutzerdefinierten DOM-Events und ist recht code-sparend umzusetzen. Slip.js funktioniert vollkommen unabhängig von anderen Bibliotheken. Völlig ungewohnterweise ;-) müssen Sie lediglich slip.js in den Head Ihres Projektes einbinden, um die Funktionalität voll nutzen zu können.

Das kleine Script ist frei verwendbar und mit einer BSD-Lizenz versehen. Slip.js läuft mit allen erwähnenswerten mobilen Browsern, als da wären iOS Safari, Firefox Mobile, Chrome Mobile und die beiden Versionen von Opera Mobile.
Das Script ist noch nicht perfekt. Die nächsten Features werden wohl das Scrollen des Browserfensters, wenn man den Rand des Viewports erreicht, das Sichtbarmachen der UI hinter dem Listenelement, sowie anpassbare Verzögerungen und Animationen sein. Schaumermal…

Links zum Beitrag

Kategorien
Essentials Icons & Fonts

Pixelglyph: 200 freie PNG-Icons für die Entwicklung mobiler Websites und Apps

Wer sich mit der Entwicklung mobiler Websites oder Apps für iOS und Android oder andere mobile Geräte beschäftigt, kommt um die Verwendung von Icons nicht herum. Der Bedarf an guten Icons steigt deshalb stetig. Wie in vielen Bereichen, ist es auch hier schwer, die Spreu vom Weizen zu trennen. Zudem sind viele ansehnliche Packs mit stattlichen Preisen versehen. Ein ganz frisches Pack namens Pixelglyph versucht es mit einem Freemium-Modell. Wir haben es uns angesehen…

Filesquare, Oursky und kostenlose Icons

Bringen wir mal ein bisschen Ordnung in die Sache. Das Icon-Set, um das es hier geht, wird unter dem Namen Pixelglyph von Filesquare angeboten. Filesquare ist dabei lediglich ein Produkt. Es handelt sich um eine Web-App, mit dessen Hilfe man erweiterte Mockups mit Durchklick-Funktionalität und direkten Feedback-Kanal erstellen kann. Von der Sorte gibt es einige, Filesquare reiht sich hier ein.

Hersteller von Filesquare und dementsprechend auch Pixelglyph ist die Firma Oursky mit Sitz in Hongkong. Oursky hat sich nach eigenen Angaben auf die Erstellung von Apps mit Fokus auf mobile Geräte spezialisiert. Icons benötigt man also schon für den Eigenbedarf.

Pixelglyph soll sicherlich zum einen den Bekanntheitsgrad der Mockup-Lösung Filesquare steigern, zum anderen verspricht man sich wohl den ein oder anderen Kaufumsatz durch die Bezahlversion des Iconsets.

Pixelglyph: 200 x 2 einfarbige Icons in 16 und 48 Pixeln zum Quadrat

Pixelglyph kommt in zwei Varianten, die beide kommerziell unter der CC-Lizenz genutzt werden können, wenn auf den Urheber des Iconsets verwiesen wird. Die kostenlose Variante beinhaltet 200 einfarbige Icons im PNG-Format. Diese liegen in 16 x 16 und 48 x 48 Pixeln Größe vor.


E-Mail-Adresse reicht, auch Wegwerf-Dienste funktionieren

Um das rund 4,2 MB große Zip mit den 400 Einzeldateien herunterladen zu können, ist es erforderlich, auf der eigens eingerichteten Website eine E-Mail-Adresse zu hinterlassen, an die dann der Download-Link gesendet wird. Da die Versendung unmittelbar erfolgt, funktioniert auch eine zeitlich begrenzte Wegwerf-Adresse. In der Mail findet sich ein Link, der ohne Umschweife über den Standardbrowser den Download initiiert. Weitere Daten werden nicht erhoben.

Wer sich für die Bezahlvariante entscheidet, erhält für 25 Dollar nicht nur den Umfang des kostenlosen Pakets. Zusätzlich werden die Quelldateien im Adobe Illustrator- und EPS-Format mitgeliefert, so dass eine flexible Skalierung der Icons auf die persönlich benötigten Maße erfolgen kann.


Alle 200 Icons im Überblick

Das Download-Paket ist sauber organisiert. Die Icons sind sinnvoll benannt und tragen ihre Maße direkt im Dateinamen. Für jede der beiden Größen gibt es einen eigenen Ordner. Das gefällt nicht nur dem Bürokraten in mir.

Von mir gibt es daher ein klares „Daumen hoch“ für die 200 frischen Icons aus Hongkong…

Links zum Beitrag:

  • 200 icons designed for your mobile apps – Pixelglyph
  • Filesquares Blog zur mobilen Web- und App-Entwicklung – Filesquare.Blog
  • Mockups zum Durchklicken mit Filesquare – Filesq.com
  • Die Köpfe hinter Filesquare und Pixelglyph – Oursky aus Hongkong
Kategorien
(Kostenlose) Services Essentials

Placeit by Breezi präsentiert Screenshots von Web Apps in realistischer Umgebung

Ein kleines Tool aus dem Hause des Website Builders Breezi erlaubt die Darstellung von Screenshots beliebiger Websites in realistischen Umgebungen. Gerade Prototypen werden heutzutage gern innerhalb von iPads, Laptops, Smartphones gezeigt, um dem Kunden einen Eindruck davon zu verschaffen, wie die projektierte Anwendung später im Alltagsgebrauch aussehen wird. Die Vorgehensweise ist sehr simpel und genau deshalb auch sehr alltagstauglich.

Placeit by Breezi – Apple-lastig, aber dennoch nutzwertig

Die Web App Placeit by Breezi kann kostenlos und ohne jegliche Registrierung verwendet werden. 16 verschiedene professionelle Fotohintergründe hat der Dienst im Angebot. In jeden dieser Hintergründe zieht man den zuvor erstellten Screenshot, Placeit baut ihn dann passgenau in den Screen ein und sorgt für die perspektivisch und proportional korrekte Darstellung.

Die wählbaren Geräte beinhalten verschiedene Varianten aktueller iPhones, iPads, Macbooks und iMacs. Die tragbaren Geräte werden zusätzlich in Aktion, also in den Händen ihrer Anwender gezeigt. Zu jedem Device werden in der initialen Ansicht Empfehlungen zur Größe gegeben. Als generelle Empfehlung aus meinem Test kann gelten, dass man den Screenshot schlicht so groß wie möglich anlegen sollte. Dabei geht möglicherweise die Realitätsnähe etwas, in nach meinem Empfinden unbeachtlicher Weise verloren, was aber für den Zweck der Präsentation keine Rolle spielt.

Akribische Entwickler, die auf Authentizität setzen, halten sich einfach an die empfohlenen Auflösungen für die einzelnen Umgebungen. Um einen ersten Eindruck zu geben, habe ich die Startseite von Dr. Web auf verschiedene Umgebungen appliziert.

Links zum Beitrag:

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Sonstige Programme

Photocat: Online-Fotobearbeitung nicht nur für Weihnachtsbilder

Photocat ist eine sehr leistungsfähige und leicht zu bedienende, dabei kostenfreie Fotobearbeitungslösung in der Form einer Web App. Speziell zu Weihnachten ergänzten die Betreiber den ohnehin schon sehr ansehnlichen Leistungsumfang um spezielle Festtagsfunktionalität. Wer auf der Suche nach einem Tool ist, mit dem sich kurz vor knapp noch schnell eine schicke Weihnachtskarte zusammenstöpseln lässt, sollte sich Photocat jetzt ansehen. Alle anderen Bildbearbeitungsinteressenten können sich etwas mehr Zeit lassen, sollten Photocat aber ebenfalls einen längeren Blick gönnen.

Photocat schlägt Instagram und sonstige Filter-Apps um Längen

Photocat steht als Website und als Facebook-App zur Verfügung. Nutzt man die Facebook App stehen direkt sämtlich auf Facebook hochgeladene Fotos zur Bearbeitung bereit. In der Website-Variante startet man mit einem Upload. Ansonsten unterscheiden sich Facebook App und Website nur unwesentlich. Die Website wird lediglich in Facebook innerhalb eines iFrames eingebunden, der Bearbeitungskomfort geht schnell verloren, wenn man nicht ein WQHD-Display sein eigen nennt.

Photocat basiert auf Flash in einer sehr performanten Umsetzung. In meinem Test lief die Anwendung absolut flüssig und nahezu verzögerungsfrei. Neben der fotografischen Weihnachtsbäckerei, die mich erst auf den Dienst aufmerksam werden ließ, hat Photocat ein Rund-um-sorglos-Paket für die Verschönerung der eigenen Fotos zu bieten, sofern man nicht professionelle Ansprüche stellt.

Grundlegende Bearbeitungswerkzeuge, wie das Begradigen, Zuschneiden, Anpassen der Farbwerte, Größenänderungen und so weiter, hat Photocat ebenso im Repertoire, wie diverse Effekte, die die Möglichkeiten von Instagram deutlich übersteigen. Darunter sind auch etliche, die sich explizit um Porträts kümmern wollen.


Foto vor dem Effekt

Ein ganzer Reigen von Retusche-Tools lässt die Bearbeitung von Hauttönen, das digitale Bräunen, die Pickelentfernung und sogar die Verschlankung dicklich erscheinender Zeitgenossen, sowie die gezielte Vergrößerung der Augen zu. Eine Vielzahl von Rahmen, aber auch Texturen erlauben Kunstwerke wie vom Fotografen ersonnen. Das nächste Internet-Meme startet man mit den Textwerkzeugen des Dienstes.


Foto nach dem Effekt

Lokal begrenzte Retusche ist mit Photocat ebenfalls möglich. So steht etwa die beliebte Funktion Color Splash, mit der man einzelnen Bildbereichen selektiv die Farbe zurück gibt, zur Verfügung. Alle Werkzeuge lassen sich zusätzlich konfigurieren.

Photocat ist nicht nur für Hobbyanwender eine Empfehlung wert. Auch Webdesigner, die auf die Schnelle ein Bild bearbeiten müssen, kommen mit Photocat zu ansehnlichen und nutzwertigen Ergebnissen, die sich zwar mit Photoshop ebenso hätten erzielen lassen, jedoch nicht so schnell und unkompliziert.

Photocat und die schnelle Weihnachtskarte

Speziell zum Fest der Feste bauten die Entwickler eine Weihnachtssektion in den Dienst ein. Besondere Effekte, wie etwa das Versehen eines Fotos mit einem Schnee-Overlay oder Kerzenschein, sowie diverse Rahmen und Verzierungen sorgen schnell für eine unmissverständlich weihnachtliche Optik.

Unter Scenes befinden sich einige kartentaugliche Templates, die im Nachgang wie jedes andere Bild bearbeitet werden können. Mit formenbasierten Pinseln verleiht man der eigenen Kreation den letzten festlichen Feinschliff.

Photocat ist komplett kostenlos verwendbar. Nach der Bearbeitung besteht die Möglichkeit, das erstellte Bild in den Formaten PNG oder JPG auf dem eigenen Computer zu speichern. Eine Speicherung im Dienst selber findet nicht statt. Insofern stellen sich Fragen hinsichtlich der Nutzung der Bilder durch den Betreiber selber, so wie es dieser Tage bei Instagram der Fall war, gar nicht erst.

Links zum Beitrag: