Kategorie: Apps

Die Kurzform Apps steht für Applikationen, dabei handelt es sich um kleine Anwendungen bzw. Computerprogramme, die insbesondere auf dem Smartphone genutzt werden und dieses um weitere Funktionen erweitern. Auch auf älteren Handys wurden Apps bereits teilweise genutzt, unter anderem als Kalender, Wecker oder Taschenrechner. Diese waren allerdings fest installiert und gehörten zum Standardumfang dazu. Heute gibt es Apps hingegen für nahezu jede Gelegenheit, sei es für das Wetter, den Einkaufszettel oder kurzweilige Spiele für zwischendurch.

Sie müssen zunächst heruntergeladen und dann auf dem Smartphone installiert werden, was beispielsweise über bekannte Shops wie den AppStore von Apple oder Google Play für Android Geräte funktioniert. Zwar sind die meisten Apps kostenpflichtig, eine sehr große Anzahl ist jedoch auch gratis – insgesamt betrachtet ist die heutige Masse an Apps kaum mehr zu überschauen. Auch das Entwickeln von Apps ist in den letzten Jahren immer beliebter und auch einfacher geworden. Aufgrund der allgemeinen Verbreitung und Wichtigkeit von Smartphones und Apps gibt es mittlerweile viele praktische Hilfen, um selbst Apps auf den Markt zu bringen.

Zwar steckt dahinter noch immer ein gutes Stück Programmierarbeit, dank zusätzlicher Software ist das Programmieren der kleinen Anwendungen aber auch für Laien keineswegs mehr unmöglich. Online-Baukästen ermöglichen es beispielsweise, dass eine neue App ohne Code und nur mithilfe einer grafischen Oberfläche entwickelt werden kann. Wer sich hingegen komplett selbst an den Aufbau einer App wagen möchte, der sollte ein gutes Fachwissen bezüglich des Programmierens mitbringen. Für Android-Apps wird beispielsweise Java benötigt, hinzu kommt eine geeignete Programmierumgebung wie das Android SDK. Bei Apple-Produkten sieht es hingegen schon etwas schwieriger aus, denn für diese werden in der Regel zwangsläufig ein Mac, ein iPhone oder iPad, grundlegende Englisch-Kenntnisse und das iOS Developer Programm benötigt.

Mehr wissen

SVG für alle: Icons, Tools und andere Ressourcen

Beitragsautor Von Tara Hornor
Beitragsdatum 21. März 2019
Keine Kommentare zu SVG für alle: Icons, Tools und andere Ressourcen

Im Rahmen des Siegeszugs mobiler Geräte entwickelt sich kontinuierlich neue Technologie für die schönere Gestaltung von Webseiten und Apps. Eine dieser fantastischen mobilen Technologien ist SVG, die Scalable Vector Graphics. SVG erweitert das Konzept von Vektoren über das Niveau von bloßen skalierbaren Bildern hinaus. Tatsächlich ist ein SVG eigentlich XML-basiert, was heißt, dass ein SVG und seine Verhaltensweisen in Sachen Interaktion und Animation mittels CSS und/oder Javascript definierbar sind.

Apps E-Business Workflow

Organisiert bleiben: Die 14 besten plattformübergreifenden Kalender (nebst Apps)

Beitragsautor Von Dieter Petereit
Beitragsdatum 11. Juli 2018
13 Kommentare zu Organisiert bleiben: Die 14 besten plattformübergreifenden Kalender (nebst Apps)

Zeitplanung ist unabdingbar. Mindestens einen Kalender benötigst du daher auf jeden Fall. Digital sollte er sein, damit du als Webworker oder Digitalnomade die Organisation deiner endlichen Zeit ortsunabhängig und auf verschiedenen Geräten abwickeln kannst.

Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Beitragsautor Von Denis Potschien
Beitragsdatum 6. Dezember 2017
Keine Kommentare zu Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Schlagwörter app, css3, HTML5, javascript

Apps

Appkind: Mobile Apps im Abo-Modell

Beitragsautor Von Dirk Metzmacher
Beitragsdatum 16. Januar 2016
2 Kommentare zu Appkind: Mobile Apps im Abo-Modell

Die mobile Internetnutzung verdoppelt sich Jahr für Jahr und so verwundert es kaum, dass die eigene App Wunsch und Ziel vieler Unternehmer ist. Hauptproblem ist dabei nicht einmal der Preis, sondern eher die Verfügbarkeit des passenden Programmierers. Die guten Programmierer sind nämlich alle satt im Geschäft. Appkind möchte beide Probleme lösen und bietet die Produktion einer einzigartigen App bei Bezahlung auf monatlicher Basis an. Wir haben den Service getestet und stellen die Möglichkeiten vor.

Appkind: Mobile Apps im Abo-Modell

Übersicht

Die App wird für IOS und Android umgesetzt, wobei appkind die komplette Gestaltung (auch der Inhalte) vornimmt. Im Detail geht es um das Design des App-Icons, über den Startbildschirm bis hin zu den Inhalten: alles aus einem Guss, passend zum Corporate Design des Unternehmens. Das eigene Logo, sowie die Unternehmensfarben sind dabei die Vorlage.

Die App präsentiert dann Inhalte wie etwa Texte, Bilder, Videos, Produkte, Formulare und Karten (auf Google Maps-Basis). Eine Schnellkontaktoption bietet Optionen zum Anrufen, zum Schreiben einer E-Mail, dem Besuch der Website oder Zugang zu den Social Media-Accounts. News können per RSS ausgelesen und mitels Facebook oder Mail vom Unternehmer gesendet werden. Dabei werden App-typische Features, wie etwa die Push-Funktion, unterstützt.

Preismodelle

Vor der Gestaltung der eigenen App entscheiden wir uns für ein Preismodell, wobei diese sich nur in wenigen Punkten unterscheiden. Generell enthalten sind Design und Programmierung, die Integration aller Inhalte, die Pushletter-Funktion sowie das Sammeln von Daten und deren Präsentation als Statistiken. Wichtige Designupdates für kommende Smartphones sind ebenso Bestandteil wie eine Chat-Option nebst CRM zum Kontakt mit den Kunden. Ein gutes Angebot, das als Appkind Go beschrieben wird. Diese Basis kostet 29,95 Euro pro Monat, bei 49 Euro einmaliger Einrichtungsgebühr.

Appkind Go+ bietet zusätzlich ein Marketing-Set, das ein Poster sowie 100 Flyer zur Bewerbung der neuen App beinhaltet, sowie eine Kalenderfunktion für Termine. Die monatliche Gebühr erhöht sich dafür auf 59,95 Euro, die einmalige Einrichtung auf 99 Euro.

Die Laufzeit beträgt bei beiden Paketen immer 12 Monate.

Der Start mit Appkind

Nach der Anmeldung (E-Mail und Passwort reichen zunächst) und einer schnellen Mail-Bestätigung führt die Website Schritt für Schritt zum Ziel: die eigene App. Nach Angabe weniger Kundendaten (im Prinzip reicht die Adresse) ist der Button Neue App bestellen aktiv.

Nach dem Registrieren (oder gar der Bestellung) nimmt ein Mitarbeiter des Unternehmens Kontakt auf, um alle weiteren Schritte zu besprechen, Möglichkeiten aufzuzeigen und um ganz persönlich und individuell zu beraten.

Wer mag, geht dann über Jetzt App anlegen weiter. Wir geben die Basisdaten an, wie etwa den Namen der App (2 bis 30 Zeichen), die Bezeichnung unter dem App-Icon (höchstens 11 Zeichen) und eine aussagekräftige Beschreibung zu den gebotenen Inhalten. Sehr schön ist der Fortschrittsbalken der uns anzeigt, wie weit es noch zur eigenen App ist. 25% sind damit schon geschafft!

Jetzt geht es an die Kontaktdaten in der App: mindestens eine muss genannt werden. Ich biete mit Adresse, Telefonnummer, E-Mail sowie einigen Social Media-Seiten (Facebook, Google+ und Twitter) alles an, um den Kontakt zu erleichtern. Es folgen die Newsquellen, wie etwa die Website, eine Facebook-Seite oder per E-Mail. Ist das erledigt, können wir die Menüpunkte auswählen. Ich entscheide mich für die Klassiker Impressum, Kontakt, Über uns und News. Damit sind wir fertig und haben alle nötigen Informationen zum Start eingegeben.

Zur Erstellung meiner App werden natürlich einige Dateien und Vorlagen benötigt, die etwa in Form von Logo-Dateien, Texte, Flyer und Fotos hochgeladen werden können. Ich biete da ein Logo in zwei Versionen an, ein Hintergrundbild sowie einen kurzen Text für den Über uns-Bereich. Damit ist meine Arbeit getan. Klar: Nicht immer hat man gleich alle Dateien parat, was aber auch kein Problem darstellt. An dieser Stelle erfolgt eine zweite Kontaktaufnahme eines Appkind-Mitarbeiters, um über das Telefon oder per Mail zur Seite zu stehen.

Jeder Kunde wird also ganz individuell über die Inhalte und Möglichkeiten der eigenen App beraten und das bei jedem wichtigen Schritt zur Erstellung.

Yeah! Deine App ist fertig

Nach nur vier Werktagen erhalte ich eine Freigabevorschau per E-Mail mit einem ersten Eindruck und der Möglichkeit, die App zu beurteilen. Diese wird in einer Smartphone-Simulation im Browser* präsentiert: sozusagen im Live-Betrieb. Natürlich entspricht diese Simulation nicht ganz der App, da einige Funktionen erst auf dem Smartphone funktionieren werden. Trotzdem ist diese Darstellung für eine Beurteilung ideal und absolut ausreichend, von Kleinigkeiten wie dem Abweichen der Schriftgröße oder möglichen Scrollbalken, je nach eingesetztem Browser, abgesehen.

In naher Zukunft soll es aber eine mobile Vorschau geben, welche direkt auf dem Smartphone geöffnet wird, was die Vorschau noch einmal wertiger und dann absolut realistisch macht. (*Unter Chrome, Safari, Firefox und Internet Explorer bekommen wir derzeit etwas zu sehen, so der Anbieter)

Statt sofort freizugeben, wähle ich erst einmal den Eintrag Nicht freigeben an und kann nun meine Änderungswünsche auflisten. Oben, links rufe ich das Menü auf, wie zuvor definiert. Zunächst möchte ich da gerne einige Menü-Namen ändern, sowie einen Text bei „Über uns“ noch leicht anpassen. Kleinigkeiten also. Sofort setzt sich das Unternehmen mit mir in Verbindung, erfragt die Änderungswünsche im Detail und zeigt den weiteren Ablauf auf.

Die erste eigene App

Zwei Tage später erhalte ich wieder eine E-Mail mit der Aufforderung, die Änderungen zu begutachten. Ich bin zufrieden und gebe die App frei. Mit der Nachricht „Ihre App wurde erfolgreich freigeben“ ist die Erstellung abgeschlossen und es erfolgt der Upload in die Stores. Dabei ist die Android-App nach nur 2-3 Werktagen verfügbar, die Apple-App dagegen erst nach 7-9 Werktagen, da Apple die Apps von Hand testet.

Unser Fazit

Appkind bietet uns einen recht einfachen Weg hin zur eigenen App, wobei Service hier wirklich großgeschrieben wird. Der Kontakt zum Kunden wird stetig gehalten und Änderungswünsche umgehend umgesetzt. Das hat seinen berechtigten Preis, der aber auch auf die Laufzeit aufgeteilt wird, so dass praktisch jedes Unternehmen unkompliziert und schnell zur eigenen App kommt.

(dpe)

(Kostenlose) Services Apps Boilerplates & andere Tools CMS Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials Webdesign WordPress

Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr

Beitragsautor Von Redaktion Dr. Web
Beitragsdatum 7. Dezember 2015
Keine Kommentare zu Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr

Heute möchte ich dir Codester vorstellen. Codester ist ein brandneuer Marktplatz für Entwickler und Designer. Hier kannst du Code Schnipsel, Skripte, Themes, Plugins und vieles mehr kaufen, um dein nächstes großes oder kleines Projekt aufzupolieren. Fertige Komponenten zu benutzen, spart Zeit und Zeit ist – wie wir alle wissen – Geld. Also nimm dir fünf Minuten und lies den folgenden Artikel.

Codester: Ein kurzer Rundgang

Skript-Verzeichnisse waren eine große Sache Ende der Neunziger und noch zu Beginn des neuen Jahrtausends. Ich kann mich noch gut an das bekannteste von ihnen, HotScripts.com, erinnern. HotScripts war die Lösung für jede Aufgabe, dieirgendwas mit Programmierung zu tun hatte. Später wurde HotScripts dann von einem bekannten Websiteaufkäufer aufgekauft. Danach passierte leider nicht mehr viel. Und auch, wenn sie heute noch existieren, befinden sie sich seitdem in einem Stillstand. Besuch die Seite besser nicht, wenn du sie noch von früher kennst. Das würde nur deine nostalgischen Erinnerungen an vergangene Tage zerstören.

Ich bin im letzten Jahrzehnt keinem ähnlichen Service begegnet. Obwohl es keinen Mangel an Marktplätzen für Designer gibt, müssen Entwickler sich mit einer anderen Wahrheit auseinandersetzen. Aber: im Sommer diesen Jahres hat eine kleine Gruppe motivierter Entwickler eine Lösung für dieses Problem ersonnen. Willkommen, Codester.com, ein schnell wachsender, würdiger Nachfolger des vorher erwähnten Dinosauriers.

Codester spricht sowohl Designer als auch Entwickler an. Dabei haben jedoch alle angebotenen Elemente, zumindest zur Zeit, einen entwicklungsorientierten Touch. Nehmen wir die Grafikabteilung als Beispiel. Hier stellt Codester Benutzeroberflächen, Spiele-Code und Mockups neben Icons und Logos zur Verfügung. Das ist keine Spielzeugkiste für selbstverliebte Designer. Hier will keiner eine freundliche Bestätigung seines guten Geschmacks erheischen. Hier geht es darum, Arbeit zu erledigen. Dass Codester im Moment nicht allzu viele Dinge im Angebot hat, solltest du nicht als allzu großen Nachteil empfinden. Sie haben immerhin gerade erst angefangen.

Wenn du dir die Hände wirklich schmutzig machen möchtest, wühl dich durch die Skript & Code-Abteilung, in der du Lösungen in PHP, JavaScript, Ruby, Python, Java, C, C++, C# und VB.Net finden wirst. Aktuell hat zwar nur die PHP-Kategorie eine nennenswerte Sammlung an Skripten anzubieten, aber die Leute hinter Codester arbeiten aktiv daran, das Portfolio schnell zu erweitern.

Wenn du ein App-Entwickler bist, solltest du den Bereich Mobile Apps besuchen, wo du vielleicht genau den einen Code-Schnipsel für iOS, Android, Unity, Corona oder Titanium findest, nach dem du die letzten fünf Nächte gesucht hast.

Heutzutage sind zwar einzelne Skripte immer noch nützlich und gefragt, aber die größere Nachfrage kommt von Entwicklern aus der CMS-Branche. Es ist sicherlich möglich, jedes gegebene Skript so zu verändern, dass es mit jedem CMS funktioniert. Das kann ich für WordPress fast uneingeschränkt bestätigen. Allerdings ist es effizienter, sich direkt für ein Skript-Modul, Plugin, Erweiterung, oder wie auch immer die Namenskonventionen deines CMS sein mögen, zu entscheiden und es in dem Umfeld, für das es gemacht wurde, zu benutzen.

Codester ist derselben Meinung und bietet eine Vielfalt an Plugins für WordPress, Joomla, Drupal, Magento, Prestashop, osCommerce, X-Cart und Opencart an. Themes, auch wenn sie sich mehr auf das Design beziehen, kombinieren Form und Funktion, um letztendlich die gewünschte Nutzererfahrung zu erreichen. Daher ist es konsequent, dass Codester einen separaten Abschnitt mit Themes, verfügbar für WordPress, Magento, Joomla, Drupal, Prestashop, Opencart, Muse, Tumblr und Ghost unterhält. Arbeitest du ganz ohne CMS, ist vielleicht die Sammlung von HTML-Templates am gleichen Ort interessant.

Codester: Vom Suchen und Finden

Codester ist auf Wachstum ausgerichtet und direkt so gebaut worden, dass es auch mit großen Beständen virtuos umgehen kann. Zurzeit kannst du einfach durch die Hauptabschnitte und Kategorien browsen. Darunter ist keine einzige, die man nicht innerhalb von ein paar Minuten durchscrollen kann. Sollte das Wachstum aber mit konstantem Tempo voranschreiten, wird sich das in wenigen Monaten deutlich verändert haben. Das Team hat vorgesorgt und den Service so strukturiert, dass es auch dann noch leicht sein wird, das benötigte Werkzeug zu finden, wenn es tausende Skripte, Themes oder was auch immer zu filtern gibt.

Der offensichtlichste Weg, eine Lösung auf Codester zu suchen, ist es, die obere Suchleiste auf der Startseite zu verwenden. Gib deinen Suchbegriff ein und schau, was Codester dazu findet. Das ist nicht sehr effizient, sobald du bereits in der Lage bist, deine Parameter etwas einzuschränken, was bei einem typischen Entwicklungsprojekt höchstwahrscheinlich der Fall sein wird. Codester arbeitet nicht mit zusätzlichen Tags, um bestimmte zusammengehörende Inhalte zu gruppieren – zumindest nicht von der Suchleiste aus.

Daher ist der empfehlenswertere Weg an die Inhalte zu komme,n das Browsen durch die Kategorien. Sobald du eine beliebige Kategorie auswählst, wird dir ihr Inhalt in einer Rasterübersicht präsentiert. Von diesem Raster aus, kannst du die Detailseite eines jeden Elementes öffnen, um zu weiteren INformationen zu gelangen. Die wichtigsten Informationen findest du aber bereits direkt im Übersichtsgrid. Dort kannst du den Preis, ein Vorschaubild, eine kurze Beschreibung und die Zielplattform sehen. Videos und Live-Previews sind auch über das Raster zugänglich. Also kannst du deine Wahl schnell auf ein oder zwei Angebote einschränken, die dich wirklich interessieren.

Mit einem Klick auf die Vorschau des Elements öffnet sich die Detail-Seite. Diese erfüllt das, was ihr Name verspricht. Hier findest du sämtliche wichtigen Information zum Produkt. Die Beschreibungen sind ausführlich, Screenshots gibt es wie Sand am Meer. Hier befindet sich auch eine Box mit zusätzlichen Tags, die das jeweilige Tool zusätzich kategorisieren. Ein Klick auf einen der Tags, öffnet ein weiteres Grid, das alle Produkte aus Codesters Portfolio zeigt, denen dasselbe Tag zugeordnet wurde.

Die Detail-Seite ist in vier Segmente eingeteilt, bei denen die Übersicht die Standardansicht nach dem Öffnen der Seite ist. Es gibt Tabs für Bewertungen, Support und FAQ. Der Support-Tab bietet eine direkte Support-Möglichkeit, ähnlich eines Kommentarbereiches in einem CMS. Jeder mit einem Account kann Fragen stellen, während nur tatsächliche Käufer eines Produktes Bewertungen zu diesem Produkt veröffentlichen können. Ein FAQ-Bereich beantwortet schon mal die häufigsten Fragen, um den Support-Bereich zu entlasten.

Share-Buttons erlauben es dir, Codester-Inhalte auf Facebook, Twitter, Google+, Pinterest, LinkedIn oder per E-Mail zu teilen. Ein Partnerprogramm ist jedem zugänglich und bietet 10 Prozent Kommission für jeden Käufer, der auf deine Empfehlung hin gekauft hat.

Codesters Lizensen

Die Kosten der einzelnen Elemente variieren stark, die Lizensen aber nicht. Zur Wahl steht jeweils die reguläre und die erweiterte Lizenz. Die (günstigere) reguläre Lizenz erlaubt, das gekaufte Produkt in einem deiner Projekte, ob privat, kommerziell oder für einen Kunden, zu verwenden. Die erweiterte Lizenz bietet dasselbe, mit der Ausnahme, dass das Produkt bei dieser Lizenz für eine unbegrenzte Anzahl von Projekten benutzt werden kann. Du darfst lediglich die Produkte nicht als solche verkaufen, aber das sollte ohnehin selbstverständlich sein.

Codester: Verkaufe Deine Arbeit

Wie man es von einem Marktplatz erwartet, bietet Codester keine eigenen Produkte an, sondern arbeitet als eine Art Mittelsmann für talentierte Entwickler und Designer, die daran interessiert sind, ihre Skripte, Plugins, Themes, Quellcodes an die Welt zu verkaufen. Hier mitzumachen ist ganz einfach.

Codester hat sehr wenige, dabei sehr gerechte Bedingungen für Verkäufer. Verkäufer verdienen 70 Prozent von jedem Kauf. Es gibt keine Mindestanzahl an Verkäufen, ebenso keine Mindestmenge an aufgelaufenen Beträgen, bevor man eine Auszahlung anfordern kann, nichts. Die Bezahlung erfolgt über PayPal oder Wire am Ende jeden Monats. Es gibt keine zusätzlichen Gebühren oder andere Haken und Ösen.

Codester: Bild dir deine Eigene Meinung

Mir gefällt das Projekt. Codester ist eine gut gestaltete, sorgfältig geschriebene Marktplatzumgebung mit Fokus auf Entwickler und das ist eine gute Sache an sich. Codester braucht viel mehr Beteiligung durch die Community, sei es durch mehr Angebote in den verschiedenen Kategorien oder mehr Interaktion mit den bereits existierenden Angeboten. Hier kommst du ins Spiel. Schau dir Codester an und mach dir ein eigenes Bild. Unterstütz es, wenn es dir gefällt.

Apps Boilerplates & andere Tools Design Editoren HTML/CSS Programmierung Responsive Design UI/UX Webdesign

Hybrid-Apps entwickeln leicht gemacht: Top-Tools und Hilfsmittel

Beitragsautor Von Tara Hornor
Beitragsdatum 11. Mai 2015
7 Kommentare zu Hybrid-Apps entwickeln leicht gemacht: Top-Tools und Hilfsmittel

Erinnern Sie sich noch an die Zeit, als die ersten Smartphone-Apps auf den Markt kamen? Die iPhone-3G-Werbung wollte uns damals einreden, dass es für nahezu alles eine App gäbe. Das mag zu jener Zeit vielleicht ein bisschen übertrieben gewesen sein; heute aber würde dem wohl kaum einer mehr widersprechen. Und das liegt vor allem auch an der steigenden Popularität hybrider Apps in den letzten Jahren. Da immer mehr Unternehmen auf den App-Zug aufspringen, um ihren Kunden einen noch schnelleren und bequemeren Service zu bieten, sind App-Entwickler immer gefragter. Der einzige Haken an der Sache sind die für kleine Unternehmen extrem hohen Kosten für die Entwicklung nativer Apps sowie die Code-Weiterentwicklung für andere Systeme. Das Problem für die Entwickler besteht darin, dass das Erlernen des nativen Codes und die Bereitstellung von Updates für jede Sprache extrem aufwendig sind.

hybridapps-teaser

Aus diesem Grund schwenken immer mehr Unternehmen und Entwickler auf Hybrid-App-Entwicklung um. Hybride Apps nutzen Webcode wie z. B. HTML, CSS usw., sind aber in einer nativen App eingebettet und nutzen eine spezielle Plattform, sodass die App trotzdem Zugriff auf einige native Funktionen hat. Oder wie Adam Bradley in seinem Mozilla-Artikel schrieb: „In seiner einfachsten Form ist eine Hybrid-App nichts weiter als ein Internetbrowser ohne URL-Zeile und Zurück-Button.“

Die Vorteile einer Hybrid-App:

Keine besonderen Fähigkeiten oder Kenntnisse nötig; Ihre vorhandenen Kenntnisse über Webentwicklung reichen völlig aus.
Ein Code für alle Plattformen.
Ein responsives Design für alle Geräte.
Zugriff auf einige native Funktionen des Geräts.
Funktioniert sowohl auf mobilen Geräten als auch auf dem PC.

Es liegt auf der Hand, dass diese Vorteile sowohl die Kosten für Kleinunternehmen als auch das Kopfschmerzpotential für Entwickler um einiges mindern können. Ich weiß sehr wohl, dass Hybrid nicht für jede App geeignet ist. Beispielsweise ist der Zugriff auf native Funktionen beschränkt und es kann durchaus schwierig sein, sie wie eine App aussehen zu lassen und auszuführen. Damit riskiert man wiederum, dass die App nicht im Apple Store aufgenommen wird. Außerdem funktionieren Hybrid-Apps manchmal nicht richtig, wenn sie zu aufgeblasen sind wie z. B. bei einem 3-D-Spiel.

03-hybrid-app-development-tools — Songhop-App – erstellt mit dem Ionic Framework.

Wenn Sie jedoch eine App erstellen möchten, die hybridtauglich ist, lesen Sie weiter. Im Folgenden finden Sie eine Auswahl der besten Tools und Hilfsmittel, die Ihrer App das Aussehen und die Funktionen einer nativen App geben. Wir stellen Ihnen nützliche Framework SDKs, Entwicklungsumgebungen, Tutorials, Richtlinien und vieles mehr für die Entwicklung hybrider Apps vor.

Richtlinien für Designstandards

Bevor Sie mit der Erstellung der App beginnen, müssen Sie sich erst mal mit den jeweiligen Designstandards eines jeden Systems vertraut machen. Im Folgenden finden Sie die Richtlinien für die App-Entwicklung für iOS, Android und Windows.

Systemschriften für Hybrid-App-Entwicklung

02-hybrid-app-development-tools — Androids Standard-Schriftart Roboto

Verwenden Sie Systemschriften, um Ihrer App ein nativeres Feeling zu geben, denn ihre Nutzer werden die Schriftart erkennen. Glücklicherweise ist es mithilfe von Schriftartenstapel relativ einfach Systemschriften in Hybrid-Apps zu verwenden. Nutzen Sie für die Hybrid-App-Entwicklung die folgenden Anleitungen und Schriftarten:

Entwicklungsumgebungen und SDKs

Wenn Sie Ihre Hybrid-App nur aus einfachen Bausteinen erstellen möchten, können Sie eine der folgenden Entwicklungsumgebungen nutzen. Beachten Sie, dass Sie trotzdem für jedes System (Android, iOS usw.) eine SDK-Plattform benötigen. Einige dieser Entwicklungsumgebungen haben bereits ein SDK, für andere wiederum benötigen Sie das SDK eines Drittanbieters.

Die Verwendung eines SDK-Frameworks für die Erstellung Ihrer App erspart Ihnen viel Zeit und Aufwand. Ein Framework erleichtert Ihnen die Erstellung einer nativ-ähnlichen Hybrid-App, da sie nicht bei null anfangen müssen.

Apache Cordova

Apache Cordova ist eine Open-Source-Sammlung von Geräte-APIs, die den Zugriff auf native Funktionen erlauben. Zusammen mit einem Framework wie einem der unten genannten können Sie eine Hybrid-App mit HTML, CSS und Javascript erstellen. Dementsprechend kann die App mit wenig bis gar keiner Codeanpassung plattformübergreifend verwendet werden. Cordova bietet auch viele Plugins für den Zugriff auf native Gerätefunktionen.

Beachten Sie, dass Sie zuerst die Cordova-Kommandozeile (CLI) herunterladen müssen, bevor Sie mit der App-Entwicklung für eine Systemplattform mit einem der unten genannten SDKs beginnen. Es bleibt Ihnen überlassen, ob Sie den Großteil der App in Cordova oder dem SDK erstellen.

PhoneGap

PhoneGap ist ein sehr beliebtes Open-Source-SDK für die Entwicklung hybrider Apps, die auf Cordova als CLI setzt. Mit diesem Framework können Sie für jede Systemplattform plattformübergreifende Apps mit HTML, CSS und Javascript erstellen. Das Adobe PhoneGap Build sammelt Ihre Apps in der Cloud, sodass Sie den Code für mehrere Plattformen wiederverwenden können. Es hat sogar eine Entwickler-App, mit der Sie Änderungen am Code direkt auf dem Smartphone nachverfolgen können.

04-hybrid-app-development-tools — Apps, die mit PhoneGap erstellt wurden.

Ionic Framework

Auch das Ionic Framework ist ein sehr beliebtes Open-Source-Framework für mobile Hybrid-Apps. Es hat eine Bibliothek mit Gesten, Tools und Komponenten für HTML, CSS und Javascript, die allesamt für die mobile Nutzung optimiert sind. Ionic wurde mit SASS erstellt und ist eigentlich für AngularJS optimiert, sodass Sie ganz einfach eine interaktive App mit dynamischer Ansicht erstellen können. Den fertigen Code können Sie dann mit Cordova nutzen.

Onsen UI Framework

Dieses Open-Source-UI-Framework basiert auf Javascript und CSS und lässt Ihre mit PhoneGap/Cordova erstellte Hybrid-App wie eine native App aussehen. Das bedeutet weniger Kopfzerbrechen für Sie. Dieses Framework ist mit jQuery und AngularJS kompatibel, hat einen eingebauten Theme-Roller, setzt auf Font Awesome, bietet fließende Bildschirmübergänge und bald auch ein Gui-Tool für Drag-and-drop.

AngularJS

Da ich dieses nützliche Toolset nun schon ein paar Mal erwähnt habe, schauen wir es uns jetzt mal etwas genauer an. Es ist mit anderen Bibliotheken kompatibel und vollständig erweiterbar, sodass Sie mit Ihrer App – über die statischen HTML-Funktionen hinaus – einen Schritt weitergehen können. Mit AngularJS sind Sie nicht auf HTML-Funktionen limitiert und können extrem schnelle dynamische Ansichten erstellen.

Appcelerator Titanium

Die Open-Source-Entwicklungsumgebung Appcelerator Titanium bietet alles, was Sie für die Erstellung plattformübergreifender nativer Apps, Hybrid-Apps und Web-Apps mit einem Javascript SDK benötigen. Titanium beinhaltet Studio – eine auf Eclipse basierende IDE, ein MVC Framework (Alloy) und Cloud-Dienste.

05-hybrid-app-development-tools — Apps, die mit Appcelerator erstellt wurden.

Xamarin

Wenn Sie C#-Kenntnisse haben, könnte dies die richtige App-Plattform für Sie sein. Mit einer Codebasis in C# erstellen Sie native Apps für iOS, Android, Windows und Mac. Bei der IDE können Sie zwischen Xamarin Studio (Windows/Mac) und Visual Studio wählen. Testen können Sie Ihre App mit C# oder Ruby. Außerdem bietet das Tool detaillierte Fehlerreports zur Überwachung der App-Performance und noch eine Menge anderer Features.

Sencha Touch

Sencha Touch erlaubt Entwicklern Hybrid-Apps mit HTML5 und Themes für verschiedene Mobilgeräte zu erstellen. Mit Sencha erstellte Apps haben durch den Zugriff auf native Funktionen eine schnellere Performance als Web-Apps, sehen aus wie native Apps und verhalten sich auch entsprechend. Außerdem können Sie auch ohne Mac eine App für iOS erstellen. Sencha bietet über 300 Icons, MVC-Support, viele UI-Elemente, Datenbindungen, Datenpakete und vieles mehr.

Trigger.io

Trigger.io wirbt damit, die einfachste Lösung für die Entwicklung mobiler Apps zu sein. Mit Trigger.io schreiben Sie HTML5-Code mit der Javascript API und haben Zugriff auf Handyfunktionen wie die Kamera und die Contacts API. Die Cloud erledigt dann den Rest für iPhone, iPad und Android. Ebenso erlaubt das Tool Webgeschwindigkeits-Updates, benutzerdefinierte Module, Hooks und vieles mehr zu nutzen. Für die Entwicklung können Sie Ihre bevorzugte IDE oder einen beliebigen Texteditor verwenden und die App mit Triggers Toolkit GUI oder Kommandozeilen-Tools zusammenbauen und testen.

Anleitungen für den App-Vertrieb

06-hybrid-app-development-tools — Google Play Store

Mit der Veröffentlichung der App beginnt bei vielen das große Zittern, da es zig Gründe gibt, weshalb sie abgelehnt werden könnte. Wenn das Ihr erstes Mal ist, sollten Sie nicht allzu hohe Erwartungen haben – die Wahrscheinlichkeit, dass es mehr als einen Versuch braucht, ist recht hoch. Damit einer reibungslosen Veröffentlichung nichts im Weg steht, sollten Sie sich die jeweiligen Anleitungen für den App-Vertrieb durchlesen:

Tutorials und Artikel

Auch wenn man bei der Entwicklung hybrider Apps auf bereits vorhandene Kenntnisse der Webprogrammierung zurückgreifen kann, gibt es doch noch viel zu lernen. Am besten klappt das, wenn man einfach mit dem Lesen beginnt – und was bietet sich da mehr an als die Anleitungen der oben genannten Frameworks? Weitere hervorragende Möglichkeiten zur schnellen Aneignung von Wissen über die Hybrid-App-Entwicklung sind Tutorials oder Einführungen wie diese:

Hybrid Mobile Apps: Providing a Native Experience with Web Technologies
Creating hybrid mobile versions of the application using Apache Cordova
Performance & UX Consideration for Successful PhoneGap Apps
Create a Simple Hybrid App with AngularJS, Ionic, and Cordova
An Introduction to Xamarin
PhoneGap from Scratch
How to Prototype Web and Mobile Apps in 30 Minutes
Mobile Frameworks Comparison Chart (zur Auswahl eines Frameworks basierend auf Plattformen)

Mit welchem Tool entwickeln Sie Ihre hybriden Apps?

(dpe)

Apps Webdesign

UX Companion: Fachbegriffe einfach erklärt per App

Beitragsautor Von Denis Potschien
Beitragsdatum 11. April 2015
1 Kommentar zu UX Companion: Fachbegriffe einfach erklärt per App

Als Webdesigner und -entwickler hat man es häufig mit Fachbegriffen zu tun. Viele dieser Begriffe sind einem so in Fleisch und Blut übergegangen, dass man sich zuweilen schwer tut, diese zu erklären oder zu umschreiben. Bei anderen Begrifflichkeiten weiß man möglicherweise nur grob, was sie bedeuten. Da ist es nicht schlecht, wenn man den ein oder anderen Fachbegriff einmal nachschlägt. „UX Companion“ ist eine Nachschlage-App für Andoid- und iOS-Geräte, bei der man genau das machen kann.

uxcompanion-teaser

Wie erklärt man „Usability“?

„Usability“ ist eines der Wörter, die man ständig hört und wohl auch selbst verwendet. Den Lesern von Dr. Web muss man nicht erklären, was „Usability“ bedeutet. Aber ein Kunde, für den man eine Website gestaltet, weiß mit dem Begriff möglicherweise überhaupt nichts anzufangen. Hier ist „UX Companion“ eine gute Anlaufstelle. Ohne Hintergrundwissen vorauszusetzen, erklärt die App, was mit „Usability“ gemeint ist. Bereits die Überschrift ist hierbei die kürzestmögliche Erklärung: „How easy – or hard – it is to use a site“.

Zwar ist das Nachschlagewerk in Englisch; aber alles ist recht anschaulich und einfach formuliert. Wie das Beispiel „Usability“ zeigt, ist es auch gut geeignet, um einfach mal nachlesen zu können, wie man den ein oder anderen Fachbegriff jemanden erklären kann. Dabei sind die Einträge für die Begriffe grundsätzlich recht kurz gehalten. Wer es dann doch ausführlicher haben möchte, findet zu jedem Eintrag Links zu anderen Nachschlagewerken wie Wikipedia sowie zu Fachartikeln und Büchern. Wählt man eines der vorgeschlagenen Bücher aus, wird man direkt zu Amazon weitergeleitet.

Die Anzahl der Begriffe, die erläutert werden, ist mit etwa 50 Einträgen noch recht überschaubar – in Anbetracht der komplexen Welt des Internets. Allerdings werden viele häufige Begrifflichkeiten wie beispielsweise „Mobile-First Design“ und „Responsive Web Design“ aufgegriffen. Außerdem sind von den Entwicklern der App regelmäßige Updates angekündigt, so dass „UX Companion“ in Zukunft noch wachsen dürfte.

Link zum Beitrag

Das „UX Companion“ gibt es kostenlos als App für Android- und iOS-Geräte in den jeweiligen Stores. Entwickelt und bereitgestellt wird die App von der Digital-Agentur „Cyber-Duck“ aus dem Vereinigten Königreich.

UX Companion

Apps Design Essentials Freebies, Tools und Templates Programmierung UI/UX Webdesign

Retrospektive #5: 90 kostenlose Design-Ressourcen für mobile Layouts

Beitragsautor Von Dieter Petereit
Beitragsdatum 15. März 2015
1 Kommentar zu Retrospektive #5: 90 kostenlose Design-Ressourcen für mobile Layouts

Intelligente Navicons, schicke Slide-out-Menüs, starke Hintergründe, sowie eine generell weit durchdachtere Ausnutzung der nur sehr begrenzt verfügbaren Bildschirmfläche machen das Design für mobile Geräte aus. So gut wie die Konzepte mobil funktionieren, so gut sind sie übertragbar auf das konventionelle Design für den Desktop – wenn auch nur zufällig. Wie so oft, setzen sich gute Lösungen auch dort durch, wo man sie ursprünglich nicht gesehen hatte. Prinzipien des mobilen Designs mäandern frei von Ideologien zwischen den Welten und führen insgesamt zu einer Neuerfindung traditioneller Layouts. Die Grenzen zwischen mobilem und stationärem Design verschwinden. Unsere heutige Sammlung kann als Beweis für diese Entwicklung gelten. Die Komponenten dieser Zusammenstellung funktionieren großteils für beide Welten, wurden aber natürlich in erster Linie für mobile User Interfaces ersonnen.

Retrospektive: Bisherige Teile

Herzlich willkommen zum vierten Teil unserer Retrospektive auf das Jahr 2014. Mittlerweile sind Sie im Besitz einer Sammlung der 90 besten User-Interface Kits und 100 kostenlosen Icon-Sets, sowie den 100 besten Fonts des letzten Jahres. Im letzten Beitrag hatten wir für Sie die besten MockUps recherchiert und erneut eine umfangreiche Liste mit 100 Elementen, die in unterschiedlichem Maße frei genutzt werden können, im Angebot. Heute erweitern wir das Portfolio um 90 freie Ressourcen für das Design mobiler Apps und Websites.

Alle Elemente sind in unterschiedlichem Maße frei verwendbar. Wie stets sollten Sie die Lizenzen im Einzelfall, also bevor Sie ein Projekt damit beginnen, nochmal genau prüfen. Zwar haben wir das bereits getan, aber sicher ist sicher. Viel Spaß beim Stöbern!

Titel: Designer Portfolio App UI Kit

Erstellt von: blugraphic
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Blog and Article App UI

Erstellt von: uiFest
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: UIFrames

Erstellt von: Mariz Melo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Gravity UI

Erstellt von: emilie badin
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Login & Register Freebie

Erstellt von: Evan Brand
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Photo App Free PSD

Erstellt von: Vins Di Cosmo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Neat UI Kit

Erstellt von: Valik Boyev and Natalia Raikova
Lizenz: frei nur für nichtkommerzielle Zwecke bei Urhebernennung, keine Derivate

Titel: All New Android Lollipop 5.0 Gui Kit

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Mobile Touch UI Kit

Erstellt von: alienvalley und Angelo
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS8 GUI PSD

Erstellt von: BullzArtDesign
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS7 iPhone Wireframe Mockup for Prototyping

Erstellt von: Andre Revin
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Chetan Profile Free

Erstellt von: vikas1307
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Insane – 9 Screens Mobile UI ( PSD )

Erstellt von: Graphics Bay Team
Lizenz: unklar

Titel: Football App

Erstellt von: stonesun
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iPhone UI – Sketch It Up

Erstellt von: Graphics Bay Team
Lizenz: unklar

Titel: Android L Gmail User Interface

Erstellt von: Roberts Ozolins
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Planner & Meteo UI Kit for iPhone

Erstellt von: Graphics Bay Team
Lizenz: unklar

Titel: Profile

Erstellt von: vikas1307
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Android L Contacts UI PSD

Erstellt von: Roberts Ozolins
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: 7 Video Players for iPhone 6 Plus

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Flat App UI Design

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Music Player App UI

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: iPhone 6 & 6 Plus Signin Screens

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Download Binsta App PSD

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Shopping E-Commerce App PSD

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Booking App PSD According to iPhone 6+

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Flat App UI Full Project

Erstellt von: Kada pps
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: App Login Freebie

Erstellt von: Mammad Emin
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Music App iOS7

Erstellt von: graphickadapps
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: 3 UI Splash Screens PSD

Erstellt von: graphickadapps
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Blue App for iPhone

Erstellt von: Graphics Bay Team
Lizenz: unklar

Titel: Paul McCartney ‚New‘ inspired Free app UI PSD

Erstellt von: Ruaridh Currie
Lizenz: frei für nichtkommerzielle Zwecke, keine Derivate

Titel: Chat Application Design

Erstellt von: blugraphic
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS Chat Screen

Erstellt von: tempees
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Google App UI

Erstellt von: Dimple Bhavsar
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Profile Screen App

Erstellt von: designzway
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: OptimaSales iPhone 6 App

Erstellt von: designzway
Lizenz:frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: iOS7 Challenge App

Erstellt von: designzway
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: Quest. iOS7 App

Erstellt von: designzway
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: FM Radio UI – iOS 7 App

Erstellt von: designzway
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: Mobile Square App UI Free

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Music Hound Music Player UI Free

Erstellt von: Redesign Case
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Bolt UI Kit

Erstellt von: UI8
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS8 GUI

Erstellt von: teehanlax
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Tethr

Erstellt von: invisionapp
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Numbers UI Kit

Erstellt von: pixelbuddha
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS 7 App Screens

Erstellt von: graphicburger
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Fudi – Free App

Erstellt von: Kristijan Binski.
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: iOS 8 Vector App UI Kit

Erstellt von: Rusty Mitchell
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Modern Mobile App UI

Erstellt von: Rafi
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Mobile Wireframe Kit PSD

Erstellt von: cssauthor
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Blue Mobile UI PSD

Erstellt von: graphicsbay
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: Mountain UI kit

Erstellt von: Iougo Huan
Lizenz: frei auch für kommerzielle Zwecke bei Urhebernennung

Titel: Free Mobile App UI Kit

Erstellt von: Krishnan Unni
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Benefits App

Erstellt von: tempees
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: 12 High Quality Login PSD Screens

Erstellt von: redesign case
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Bookshop Template & Free PSD Pack

Erstellt von: HEZY
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Android L Weather App

Erstellt von: SaveTheGraphics
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS App Store Redesign Freebie

Erstellt von: Mushfiq
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Mobile UI Kit

Erstellt von: NAS
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: App Store Redesign Freebie

Erstellt von: Mushfiq Islam
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Online News Paper iOS App UI

Erstellt von: Mushfiq Islam
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Snapchat Redesign

Erstellt von: Pontus Wellgraf
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Message App Freebie

Erstellt von: Andrée Afonso
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS Music Player Free PSD Files

Erstellt von: kada ayoub
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Mobile UI Blueprint

Erstellt von: Chrometaphore
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Car Navigation

Erstellt von: uiwork
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Mobile Flat Login Interface

Erstellt von: psd.la
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Mobile Flights Search Interface

Erstellt von: psd.la
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Weather iOS App

Erstellt von: Szab
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: AURORA V2

Erstellt von: Vasil Enev
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Weather App

Erstellt von: Jardson Almeida
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS 7 Style Mac App UI Kit

Erstellt von: Tony Thomas
Lizenz: nutzbar zu den Bedingungen von MediaLoot

Titel: Clean Mobile User Interface UI + Freebies

Erstellt von: Tomasz Mazurczak
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Android L PSD Kit

Erstellt von: SaveTheGraphics
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Free PSD Menu Animation

Erstellt von: FREE GOODIES FOR DESIGNERS .
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Travel App Template

Erstellt von: Moe Saad
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Pull Menu Interaction

Erstellt von: Fabrizio Bianchi
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Social UI App PSD

Erstellt von: graphicsbay
Lizenz: unklar

Titel: Recipes – Material Design – Free App Mockup

Erstellt von: Mitchell Millsaps
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: iOS 8 iPhone 6 Plus GUI PSD

Erstellt von: Kapil Gohel
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Facebook Ad

Erstellt von: Michael
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Lollipop GUI Kit

Erstellt von: sandipd
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Profile Page for an iPhone App

Erstellt von: BooMBa
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Weather & Time App Release

Erstellt von: s-pov spovv
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Ionic Framework

Erstellt von: ionicframework
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Profile UI Design

Erstellt von: Arslan Ali
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: iOS 8 UI Kit

ios8 ui pack
Erstellt von: Oz Pinhas
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Android Hangouts – Sketch Template

Erstellt von: Johan Jonsson
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Titel: Coloristic UI Kit Free

Erstellt von: PixelBuddha und Sergey Azovskiy
Lizenz: als „Free“ bezeichnet, keine Lizenz angegeben

Weitere Teile der Serie "Retrospektive"

Apps Boilerplates & andere Tools Design Programmierung Responsive Design

Origami: Freies Design-Prototyping für iOS, Android und das Web

Beitragsautor Von Andreas Hecht
Beitragsdatum 27. Februar 2015
1 Kommentar zu Origami: Freies Design-Prototyping für iOS, Android und das Web

Prototyping ist eine wichtige Sache im Entwicklungsprozess einer App. Animationen und Verlinkung aller Ebenen müssen stimmen und ausprobiert werden, bevor der eigentliche Entwicklungsprozess abgewickelt werden kann und die fertige App letztlich in den App-Store hochgeladen wird. Mit Origami ist ein von Facebook entwickeltes Design-Framework am Start, welches das Prototyping von iPhone- und iPad-Apps erleichtern möchte. Origami legt dabei besonderen Wert auf die Integration von Interaktionen und Animationen.

origami-teaser

[Image of iMac by Placeit]

Was ist Origami

Origami ist ein kostenloses Tool für die Gestaltung moderner Benutzerschnittstellen. Es wurde für die schnelle Erstellung von Design-Prototypen mit Animationen und Interaktionen entwickelt, die dann auf dem iPhone oder dem iPad ausgeführt werden können. Die Export-Funktion erlaubt es, den generierten Code zu exportieren und dem Entwickler als Snippet zur Verfügung zu stellen. Origami ist ein Open-Source Animations-Framework, welches Sie die benötigten Animationen der Benutzeroberfläche leichter und zielführender erstellen lassen soll. Das Framework ist eine Entwicklung von Facebook, erblickte erstmalig am 20. Dezember 2013 das Licht und wurde bis heute stetig weiter entwickelt.

Wichtig zu wissen ist, dass Origami nur mit dem Quartz Composer eingesetzt werden kann, also ausschließlich für Mac OS X zur Verfügung steht. Zudem muss man als Apple Developer registriert sein, um es nutzen zu können. Auch wenn Origami letztlich Code für iOS, Android und das Web exportieren kann, ist das Framework nur für Apple-Verwender nutzbar. Will man seine Prototypen ausprobieren, so ist das komfortabel nur mit iOS möglich, denn ausschließlich für diese Plattform steht eine dedizierte App namens Origami Live for iOS zum kostenlosen Download über den iTunes App Store bereit.

origami framework

Gehen wir nun gemeinsam durch einige Funktionen und schauen, was Origami für Sie leisten kann. Weil es immer besser ist, sich anzuschauen, was ein Tool kann, anstatt es nur zu lesen, habe ich am Ende des Beitrags einige Videos zu Origami verlinkt.

Die Homepage: Origami – Design Prototyping Tool

Gestensteuerung

origami-gesten

Origami bietet nach eigenen Angaben die fortschrittlichsten und am einfachsten zu benutzenden Gesten-Bauteile. Es unterstützt Scroll-, Swipe- und Tap-Gesten. Alle Komponenten sollen hierbei sehr leicht zu nutzen und zu integrieren sein.

Die Scroll-Komponente unterstützt freies Scrollen, seitenweises Scrollen oder „Wheel of Fortune“-Scrolling und bietet fortgeschrittene Funktionen zur Erstellung eines Scroll-Bereichs einer App. Der Swipe-Bereich macht es möglich, dass der derzeitige Bildschirm sich mittels Animation nach unten bewegt, um einen neuen Bildschirm; zum Beispiel für Einstellungen; freizugeben. Die dritte Komponente sorgt für „Taps“. Taps meint das Tippen auf den Bildschirm und die damit verbundenen Aktionen. Sie können relativ einfach festlegen, was mit einem Tipp auf den Bildschirm passiert, welche Funktion ein doppelter Tipp auf dem Bildschirm auslöst und was bei einem längeren Pressen eines Fingers auf dem Bildschirm passieren soll.

Die Code-Export Funktion

Origami beherrscht den Code-Export der von Ihnen erstellten Design-Komponenten mit nur einem Klick. Der Code Ihrer erstellten Animationen kann daher einfach als Snippet exportiert werden, damit die Coder sie per Copy und Paste in das Projekt übernehmen können. Origami will hierbei für denselben „Look and Feel“ auf allen Plattformen sorgen, das heisst, dass sich die fertige App auf allen Plattformen gleich anfühlen und auch aussehen soll.

Export Code Funktion von Origami

Exportiert werden kann der Code für iOS, Android und das Web. Damit Sie sich über die Qualität des exportierten Codes klar werden können, existiert jeweils ein beispielhafter Code.

Codebeispiele für: iOS .m | Android .java | Web .js

Sketch und Origami

Origami arbeitet sehr gut mit dem neuen und immer beliebter werden Werkzeug Sketch zusammen, was das Prototyping noch weiter vereinfacht.

Mit Origami können Sie Links zwischen den einzelnen Ebenen im Prototypen und einer Sketch-Datei erstellen. Sobald die einzelnen Ebenen verlinkt sind, reicht eine einfache Tastaturkombination aus, um den Prototypen ohne Unterbrechung zu aktualisieren. Falls Sie ein Photoshop oder Affintity Photo Nutzer sind, so wird es Sie freuen zu hören, dass die Origami-Ebenen auch mit PSD-Dateien verknüpft werden können.

Sketch und Origami: Ein kurzes Video-Tutorial

Dieses kleine Video-Tutorial zeigt Ihnen, wie Sie Ihre Sketch-Datei mit Ihrem Origami-Prototypen verbinden. Nach kurzem Setup sind Sie in der Lage, alle Ebenen mit nur einer Tastaturkombination zu aktualisieren.

Prototyping für Desktop-Anwendungen

website-prototyping-mit-origami

Mit Origami lassen sich nicht nur Prototypen für iPhone- und iPad-Anwendungen erstellen, sondern auch Websites und Web-Anwendungen. Es können Features wie Text-Input, benutzerdefinierte Cursors, FaceTime Kamera und OS X Drag und Drop genutzt und entwickelt werden, die dann jeweils in einem in der Größe anpassbaren Browser-Frame kontrolliert werden können. So ist es Ihnen möglich, responsive Anwendungen für das Web als Prototyp zu erstellen.

Aus Beispielen lernen

Downloadbare Beispiele von Origami Code

Viele andere Design-Frameworks für das App-Prototyping sind ebenfalls hervorragend dokumentiert. Origami jedoch bietet Ihnen nicht nur eine Dokumentation zum Erlernen an, sondern auch noch vier Beispiele von Interaktionen und sieben Beispiele von Interfaces. Diese 11 Beispiele können jeweils als QTZ-Datei heruntergeladen und in das Projekt importiert werden. So können Sie genau sehen, was für eine bestimmte Animation oder einen bestimmten Bereich Ihres Prototyps vonnöten ist. Unter Umständen fällt Ihnen auf diese Art und Weise der Einstieg und das Erlernen des Prototypings mit dem Origami-Framework leichter.

Die Download-Seite mit den Origami Code-Beispielen

Die Origami Tutorials

Diese Videos führen Sie Schritt für Schritt durch die Erstellung von Prototypen mit dem Origami-Design-Framework. Zu jedem Video kann der Beispiel-Code heruntergeladen werden.

Eine Einführung in Origami

Dieses Video vermittelt Ihnen alles, was Sie zum Einstieg in das Prototyping mit Origami benötigen. Am Ende des Videos ist eine Interaktion erstellt worden, mit der Sie mit einem Fingertipp ein Foto heran- und herauszoomen können.

Download des Beispielcodes

Eine faltbare Navigationsleiste erstellen

Es wird eine Interaktion erstellt, bei der sich während des Scrollens die Navigationsleiste ansprechend zusammenfaltet und wieder entfaltet. Sie lernen, wie man eine Ebene scrollbar macht und auf Basis der Scroll-Position animiert.

Beispielcode für die Erstellung einer faltbaren Navigation

Eine Swipe-Away Navigation erstellen

In diesem Video geht es um die Erstellung einer sogenannten „Swipe-Away“ Navigation. Mit einem Fingertipp auf ein Element im Feed gleitet von rechts eine vollständige Ansicht des einzelnen Elements herein und kann mit einem Wisch nach rechts wieder aus dem Sichtbereich befördert werden. Besonders News-Apps arbeiten gerne mit diesem Effekt. Sie lernen in diesem Video, wie man Ebenen wischbar macht.

Beispielcode für die Erstellung einer „Swipe-Away“ Navigation

Einen neuen Beitrag erstellen

In diesem Video wird der Prototyp komplettiert. Mit dem „Plus-Button“ soll sich ein neuer Bereich öffnen, mit dem ein neuer Post dem Feed hinzugefügt werden kann. Sie lernen den Umgang mit dem „Wireless-Patch“ und wie man eine konditionelle Logik aufbaut. Auch die Erstellung einer mehrstufigen Animation wird im Video behandelt.

Beispielcode für die Erstellung eines neuen Beitrags

Fazit

Origami ist ein sehr gut dokumentiertes Open-Source-Framework zur Erstellung von Design-Prototypen. Dem Einsteiger in die Materie wird gleich mehrfach unter die Arme gegriffen – mit Code-Beispielen, guten Video-Tutorials und einer umfassenden Dokumentation. Wenn das noch nicht ausreicht, empfiehlt sich ein Beitritt zur entsprechenden Facebook-Community. Die Community kann man dann für Feature-Vorschläge oder Support-Anfragen nutzen.

Links zum Beitrag

(dpe)

Apps UI/UX

Immer obenauf: Bessere Android-Apps mit der Tooleap SDK entwickeln

Beitragsautor Von Johannes Kallweit
Beitragsdatum 30. Januar 2015
2 Kommentare zu Immer obenauf: Bessere Android-Apps mit der Tooleap SDK entwickeln

Alle Android-Entwickler dürfen sich freuen, denn es gibt nun eine weitere interessante Erweiterung für die Entwicklung von Android-Apps. Tooleap ist eine Always-on-Top / Floating UI für Android. Es handelt sich um eine SDK, die Ihre Apps um einen immer im Vordergrund schwimmenden Button ergänzt, damit der Nutzer Ihrer App von jedem Bildschirm aus jederzeit Zugriff auf die von Ihnen entwickelte App hat. Das sorgt dafür, dass Ihre App aus der Masse der im Google Play Store erhältlichen App hervorsticht und ein neues Level der Benutzerfreundlichkeit erreicht, (sofern nicht jeder auf diese Idee kommt).

Die Tooleap SDK Erweiterung für Android-Entwickler

Die Vorteile – das bietet Ihnen die Tooleap SDK

Nach der Integration der Tooleap SDK Jar in Ihr Projekt kann Tooleap Ihre App um einige interessante und nützliche Funktionen ergänzen. Die Out-of-the-Box Features sind folgende:

Die Bubble

Die SDK bietet Ihrer App eine Erweiterung um eine „schwimmende Blase“ – einen stets im Vordergrund obenauf liegenden Button, der individuell anpass- und designbar ist. Somit ist Ihre App jederzeit von jedem Screen aus zugänglich. Natürlich kann der Button auch individuell angepasst werden, Sie können Ihr eigenes Icon verwenden oder auch Benachrichtigungsblasen anzeigen. Die sogenannten Notifications – also Benachrichtigungen oder Vorschauen – sind möglich. Siehe Screenshot:

Die Tooleap Notifications

Durch das Antippen der „Blase“ fährt ein Bildschirm vom linken Rand in den Blickbereich. Auf diesem zweiten Home-Bildschirm kann jede Funktion Ihrer Wahl gestartet werden, denn auch dieser Bildschirm lässt sich von Ihnen individuell programmieren.

Der Seitenbildschirm (Side Screen)

Der Seitenbildschirm zeigt den Inhalt Ihrer App oben auf dem Bildschirm. Durch Nutzung der Tooleap Aktivitätsklassen können Sie auf diesem zweiten Home-Bildschirm anzeigen, was Sie wollen, genau wie bei jeder anderen, herkömmlichen Android-App. Dafür benötigt es keinerlei speziellen Code für die Umsetzung. Auch kann jede bereits existente Funktion Ihrer App auf diesen Bildschirm verlagert werden. Der Tooleap-Bildschirm bietet gleichzeitig auch eine Suchfunktion an, über die das Internet abgefragt werden kann.

Der Anwender kann ebenfalls zwischen verschiedenen Mini-Anwendungen und dem Suchbildschirm navigieren, mit der unteren Navigationsleiste.

Tooleap´s Seitenbildschirm

Was sie mit Tooleap tun können

Der von Ihrer App im Seitenbildschirm angezeigte Inhalt ist eine sogenannte Mini-App. Diese Mini-Apps können Ihre Applikation in vielerlei Hinsicht ergänzen:

Benachrichtigungen – Rich Notifications

Die Mini-App für Benachrichtigungen kann für Benachrichtigungen verwendet werden, die es dem Benutzer erlauben, mit Ihrer App zu interagieren – direkt vom Seitenbildschirm. Zum Beispiel kann eine Messenger-App eine Benachrichtigung ausgeben, in der Vorschau kann der Nutzer dann sehen, worum es sich handelt und im Anschluss direkt vom Seitenbildschirm aus auf die Text-Nachricht antworten. Die App an sich muss nicht mehr aufgerufen werden, was einen echten Vorteil in Bezug auf Benutzerfreundlichkeit darstellt.

Erweitertes Multitasking

Die PopOut Mini-Apps können dem Benutzer die Möglichkeit geben, einen Pop-Out-Bildschirm Ihrer App zu öffnen, während andere Apps genutzt werden. Das könnte zum Beispiel bei einem Musik-Player das Ausfahren der Wiedergabesteuerung sein, während eine andere App genutzt wird. Die von Ihnen entwickelte App ist also auch bei Nutzung einer anderen App immer nur einen Fingertipp entfernt.

Die Home-Widgets

Besonders interessant erscheinen die Home-Widgets. Diese Home-Widgets bringen die vollen Informationen von „normalen“ Android Startbildschirm-Widgets mit sich, ohne jedoch den Homescreen mit Widgets zu überladen. Entwickeln Sie mit den Home-Widgets eine Mini-App, die auf dem Startbildschirm abgelegt wird. Ein Anklicken öffnet dann den Seitenbildschirm mit den benötigten Information. Das bietet sich zum Beispiel für eine Wetter-App an. Ein normales Wetter-Widget nimmt auf dem Home-Bildschirm viel Platz ein – Platz, der besser genutzt werden könnte. Daher liegt auf dem Home-Bildschirm des Benutzers nur das Icon der Wetter-App und ein Klick auf das Icon öffnet dann den Seitenbildschirm, wo alle Informationen über das Wetter auf einen Blick aufgerufen werden können.

Superschnell zugängliche Apps

Die „Super Available Apps“ kreieren „Sticky“ Mini-Apps, also Anwendungen, die stets oberhalb jeder anderen App bleiben. Diese Mini-Anwendungen können entweder auf jeder App stets obenauf liegen oder nur auf ganz bestimmten Apps. Verwenden Sie zum Beispiel eine sogenannte „Persistant“-Mini-App, um dem Android-Nutzer Zugriff auf Ihre App von jedem beliebigen Bildschirm zu gewähren. Eine Nachrichten-App könnte dem Benutzer von jedem Bildschirm aus Zugriff auf die neuesten Schlagzeilen gewähren.

Programmieren Sie die Mini-Anwendungen ganz nach Ihren Bedürfnissen und verwenden Sie (theoretisch) so viele, wie auf den Seitenbildschirm passen.

Die Voraussetzungen für den Einsatz von Tooleap

Es wird die Android SDK 2.2 (Version 8) und neuer benötigt.

Tooleap im Video – Eine Einführung in die Tooleap SDK

Fazit

Tooleap erscheint mir als interessante Möglichkeit, die eigene App aus der Masse der im Google Play Store vertretenden Apps hervorzuheben. Die Möglichkeiten sind auch ohne in Begeisterung auszubrechen mehr als nützlich. Ich bin gespannt, ob viele Android-Entwickler diese neue SDK nutzen werden. Ich weiß nicht, wie es Ihnen geht, aber ich würde mich freuen auf Apps, die Tooleap verwenden. Da tun sich ganz neue Möglichkeiten auf.

Links zum Beitrag

(dpe)

Apps Design Editoren Programmierung

Dr. Web testet: Atom, der HTML-Editor „für das 21. Jahrhundert“

Beitragsautor Von Andreas Hecht
Beitragsdatum 23. Januar 2015
10 Kommentare zu Dr. Web testet: Atom, der HTML-Editor „für das 21. Jahrhundert“

Atom ist ein relativ neuer, plattformübergreifender Open-Source HTML-Editor. Nach eigener Aussage ist Atom der „hackbare Text-Editor für das 21. Jahrhundert“. Wieviel an dieser Aussage dran ist, werden wir in diesem Beitrag näher beleuchten. Auf den ersten Blick hat Atom sehr viel gemeinsam mit Sublime Text 2. Jedoch wird auch explizit damit geworben, dass alles an Atom anpassbar ist. Ob dieser Editor tatsächlich so besonders ist, und, wen ja, was ihn so besonders macht und von anderen Editoren unterscheidet, wird dieser Artikel aufzeigen. Ist Atom tatsächlich der Editor für das 21. Jahrhundert?

Atom - der hackbare HTML-Editor für das 21. Jahrhundert

Die Installation von Atom

Der HTML-Editor ist für alle Plattformen konzipiert, es gibt ihn für Windows, Mac OS X und auch für Linux. Für alle anderen Plattformen außer Mac muss zum Download die Projektseite auf GitHub besucht werden. Scrollen Sie auf der GitHub-Seite bitte herunter bis „Installing“, dort finden Sie die Versionen für Windows und Linux.

Nach der Installation zeigt der Editor eine Willkommens-Seite mit den wichtigsten Ressourcen und Tastaturkombinationen an.

atom-nach-installation

Es empfiehlt sich nach der Installation gleich die Einstellungen zu besuchen unter „Atom => Preferences“, um wichtige Dinge wie Schriftgröße und Schriftart anzupassen. Auch kann man das Theme hier ändern, denn nicht jeder Entwickler mag dunkle Themes. Vorinstalliert sind 6 Themes. Die Community bietet noch bedeutend mehr. Zu beachten ist, dass es Themes für das Design des Editors gibt und andere Themes für die Syntax. Die Variation für den Editor inkludiert daher nicht die Syntax, nach einem passenden Syntax-Theme muss demzufolge gesondert gesucht werden.

Ein wichtiger Schritt ist gewiss auch die Kontrolle der bereits vorinstallierten Packages aka Plugins, um zu schauen, welche Packages eventuell noch zusätzlich installiert werden müssten. Hier existieren bereits eine ganze Menge Packages. Mit der Suchfunktion des Editors findet man etliche mehr als auf der Atom-Website. Es sollte daher kein Problem sein, den Editor an die eigenen Bedürfnisse anzupassen.

die-einstellungen-von-atom

Installation von Packages und Themes

Das Installieren von Packages geht denkbar einfach über den Menüpunkt „+ Install“. Hier muss im Gegensatz zu Sublime Text 2 nicht erst ein Plugin installiert werden, um neue Packages installieren zu können. Das empfinde ich als benutzerfreundlicher, denn so spart man wertvolle Zeit.

install-packages

Auch Themes können auf die gleiche Art und Weise installiert werden. Um ein Theme oder Package zu installieren, gibt man einfach – wenn bekannt – den Namen des Themes oder des Packages ein und drückt „Enter“. Jedoch kann man auch nur „Themes“ oder andere allgemein gehaltene Schlüsselwörter eingeben und kommt trotzdem zum Ziel.

package-installation

Allerdings bekam ich (unter Mac OS X) nach der versuchten Installation des Packages „Emmet (vormals Zen-Coding)“, eine Fehlermeldung, dass die „Command Line Developer Tools“ von Apple fehlen würden und Emmet daher nicht installiert werden könne.

Fehlerausgabe bei der Installation

Nachdem Apples „Command Line Developer Tools“ installiert wurden, ist die Installation von Packages und Themes kein Problem mehr und funktioniert reibungslos und zügig.

erfolgreiche-package-installation

Empfehlenswerte Packages für den Anfang

Emmet (vormals Zen Coding) – Sorgt für wesentlich schnelleres Arbeiten
slash-closer – schließt HTML-Tags nach Eingabe von </
WordPress Core API Support – Erweitert den Atom-Editor um WordPress Tags
language-php – Erweiterung für besseres Arbeiten mit PHP
docblockr – Erleichtert das Verfassen von Kommentaren für zum Beispiel PHP-Funkionen
autocomplete-plus – Zeigt mögliche Komplettierungen bereits beim Schreiben an.

Die Anpassung von Atom mittels CSS

Über das Stylesheet kann die Ansicht des Atom-Editors leicht beeinflusst werden. Mir gefiel die farbliche Ausgabe und Kennzeichnung des „Bracket Matchers“ nicht, dieser nutzte nur eine 1 Pixel gedottete Linie zur Kenntlichmachung der zusammengehörigen Klammern und Divs, was für meine Augen relativ schlecht zu erkennen war. Daher fügte ich dem Stylesheet noch einige Notierungen hinzu. Das User-Stylesheet erreichen Sie übrigens unter „Atom => Open your Stylesheet“.

Einige Zeilen CSS sorgen für eine bessere Markierung des Bracket Matchers

Diese wenigen Zeilen CSS bewirken eine wesentlich deutlichere Markierung des Bracket Matchers.

Der mit dem neuen CSS beeinflusste Bracket Matcher

Da auch der Quellcode von Atom über die GitHub-Seite des Projekts zugänglich ist, dürfte für versierte Programmierer grundsätzlich alles anpassbar sein. Weniger versierte Menschen können jedoch durch Packages, Themes und eventuell durch die CSS-Anpassung den Editor ebenfalls nach Ihren Bedürfnissen gestalten.

Die Besonderheiten des Atom HTML-Editors

Node.js Unterstützung

Die Node.js Unterstützung macht es einfach, auf das Dateisystem und auf Spawn-Subprozesse zuzugreifen, selbst das Starten eines Servers aus dem Editor heraus ist kein Problem. Wenn Sie eine Bibliothek benötigen, können Sie aus den über 50.000 in Nodes Package Repository auswählen. Die nahtlose Integration ermöglicht Ihnen eine freie Mischung aus Node- und Browser-APIs. Das und vieles mehr erlaubt Ihnen die Integration von Node.js.

node-js-integration

Modulares Design

Atom ist aus über 50 Open-Source-Paketen zusammengesetzt, die sich um einen minimalen Kerncode legen. Das Ziel der Entwickler ist ein umfassend anpassbares System und soll die Unterscheidung zwischen Benutzer und Entwickler verwischen. Sollten Sie einen Teilbereich von Atom nicht mögen oder erweitert sehen wollen, so erstellen Sie (theoretisch) Ihr eigenes Package. Durch das Hochladen in das Package-Verzeichnis können Sie es für jedermann zugänglich machen.

das-modulare-atom-design

Die Grundfunktionen des Atom-Editors

Out-of-theBox bietet Atom bereits etliche, nützliche Features an. Zum Beispiel:

einen Dateisystem-Browser
einen Fuzzy-Finder für schnelles Öffnen von Dateien
schnelles, projektweites „Suchen und Ersetzen“
Multiple Cursors und Selektionen
Multiple Fenster („Panes“)
Snippet Unterstützung
Code Folding (das Falten von Code-Bereichen)
eine klare und übersichtliche Oberfläche für die Einstellungen
Importfunktion für TextMate (Grammatik und Themes)
Unterstützung für das Arbeiten mit Projekten
gutes Syntax-Highlightning
klares, übersichtliches Design
einen Entwicklermodus
Shell-Kommandos
eine Kommando-Palette

Einige zusätzliche Screenshots

Die Entwickleransicht von Atom

atom-entwickler-ansicht

Die Code-Vervollständigung

code-vervollstaendigung

Die Projekt-Einstellungen (Sidebar links – Rechtsklick auf eine Datei)

die-projekt-moeglichkeiten-von-atom

Fazit

Der Atom HTML-Editor gefällt mir richtig gut, denn er bietet nicht nur bereits nach der Installation etliche nützliche Details. Durch die wirklich einfache Installation von Erweiterungen und Themes kann der Editor unkompliziert auf eigene Bedürfnisse angepasst und erweitert werden – ohne das Vorkenntnisse im Umgang mit Git nötig wären. Inwieweit sich der Editor für die Arbeit mit wirklich großen Projekten eignet, müsste noch überprüft werden. Für „normale“ Projekte jedoch ist er hervorragend geeignet.

Links zum Beitrag

Empfehlenswerte Packages

Emmet (vormals Zen Coding) – Sorgt für wesentlich schnelleres Arbeiten
slash-closer – schließt HTML-Tags nach Eingabe von </
WordPress Core API Support – Erweitert den Atom-Editor um WordPress Tags
language-php – Erweiterung für besseres Arbeiten mit PHP
docblockr – Erleichtert das Verfassen von Kommentaren für zum Beispiel PHP-Funkionen
autocomplete-plus – Zeigt mögliche Komplettierungen bereits beim Schreiben an.

(dpe)

Apps HTML/CSS Programmierung Webdesign

WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

Beitragsautor Von Denis Potschien
Beitragsdatum 19. Dezember 2014
1 Kommentar zu WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

Native Apps für Smartphones und Tablets sind nach wie vor beliebt, aber nicht immer notwendig. Vieles lässt sich als Webapplikation mit HTML5, CSS3 und JavaScript realisieren. Dank entsprechender JavaScript-APIs hat man beispielsweise Zugriff auf den Orientierungssensor und kann auch Gesten erkennen und entsprechend darauf reagieren. Mit dem WebApp-Manifest ist es zudem möglich, weitere klassische App-Eigenschaften für Webapplikationen zu übernehmen. Dazu gehört unter anderem das Bereitstellen spezieller Launcher-Icons oder eines gesonderten Launcher-Namens, der sich vom häufig langen Titel des HTML-Dokumentes unterscheiden kann.

Manifest erstellen und einbinden

Wer Erfahrung mit dem Programmieren nativer Apps für Android oder iOS gemacht hat, kennt die Einstellungsmöglichkeiten für Apps. Neben Launcher-Icons und -Name kann beispielsweise definiert werden, ob die App nur in einer bestimmten Orientierung oder im Vollbildmodus – also ohne „Action Bar“ – ausgeführt werden soll. Per HTML5, CSS3 oder JavaScript sind solche Eigenschaften für Webapps nicht festlegbar. Allerdings gibt es die Möglichkeit, diese und weitere Eigenschaften in einem sogenannten WebApp-Manifest zu definieren. Es handelt sich dabei um eine Textdatei, welche die verschiedenen Konfigurationseinstellungen in Form eines JSON-Objektes beinhaltet. Die Manifest-Datei wird per „link“-Element im Kopfbereich des HTML-Dokumentes eingebunden.

<link rel="manifest" href="manifest.json" />

Wichtig ist, dass dem „link“-Element per „rel“-Attribut mitgeteilt wird, dass hier eine Manifest-Datei referenziert wird. Im nächsten Schritt werden die einzelnen Eigenschaften, die für die Webapp festgelegt werden sollen, in die Manifest-Datei geschrieben. Diese Manifest-Datei ist nicht zu verwechseln mit der gleichlautenden Datei zur Nutzung des „Application Cache“. Letztere wird über das „<html>“-Element in ein Dokument eingebunden und nicht über ein eigenes „link“-Element.

Webapp aussehen lassen wie native App

Mit einigen Einstellungen im Manifest ist es möglich, eine Webapp so zu starten und aussehen zu lassen wie eine klassische native App. Voraussetzung ist allerdings, dass die Webapp als Verknüpfung auf dem Startbildschirm des Smartphones oder Tablets liegt und von dort aus gestartet wird. Im Chrome gibt es den Menüpunkt „Zu Startbildschirm hinzufügen“. Dadurch wird eine solche Verknüpfung angelegt. Chrome ist derzeit auch der einzige Browser, der das WebApp-Manifest unterstützt.

Im Manifest kann ein vom Standardtitel des HTML-Dokumentes abweichender Name für die Verknüpfung auf dem Startbildschirm angegeben werden. Zwar gibt es mit „name“ und „short_name“ zwei verschiedene Eigenschaften für den Titel der Verknüpfung. „short_name“ überschreibt jedoch immer den Wert „name“. Diese Eigenschaft wird daher ignoriert, wenn auch „short_name“ existiert.

"name": "Langer Name für die Webapp",
"short_name": "Kurzer Name"

Auch das Icon für die Verknüpfung kann per Manifest individuell festgelegt werden. Hierbei lassen sich Icons in unterschiedlicher Größe für unterschiedliche Pixeldichten angeben. Diese werden als JSON-Array referenziert.

"icons": [
  {
    "src": "launcher-icon-36x36-1x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "1"
  }
  {
    "src": "launcher-icon-36x36-2x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "2"
  }
]

Je nach Gerät wird das passende Icon anhand der in „sizes“ und „density“ definierten Werte ausgegeben. Wird kein maßgenaues Icon gefunden, wird Chrome eines auswählen, welches am ehesten passt.

Normalerweise würde eine Verknüpfung auf dem Startbildschirm als normale Website innerhalb des Browsers aufgerufen – mit entsprechender Navigationsleiste. Mit der Eigenschaft „display“ ist es jedoch möglich, eine Webapp so im Browser darzustellen, dass keine Navigationsleiste sichtbar ist. Optisch ist die Webapp somit nicht von einer nativen App zu unterscheiden.

"display": "standalone"

Neben dem Wert „standalone“, der die Navigationsleiste des Browsers ausblendet, gibt es noch den Wert „fullscreen“. Hierbei verschwindet auch die „Action Bar“ des Gerätes. Vor allem Spiele werden häufig in diesem Vollbildmodus dargestellt. Er ist nicht zu verwechseln mit dem Vollbildmodus des Browsers. Derzeit scheint Chrome die Eigenschaft „fullscreen“ jedoch nicht zu unterstützen. Auf dem getesteten Gerät wird die Eigenschaft jedenfalls ignoriert und stattdessen „standalone“ verwendet, was der vorgegebene Fallback ist, falls „fullscreen“ von einem Browser nicht unterstützt wird.

Für den Nutzer ist die aufgerufene URL aufgrund der ausgeblendeten Navigationsleiste des Browsers nicht sichtbar. Daher blendet dieser bei Seiten, die per Link zu einer anderen Domain führen, am oberen Bildschirmrand eine kleine Statusleiste ein, in welcher die URL der Seite sichtbar ist. So wird sichergestellt, dass der Nutzer immer weiß, wo er sich gerade befindet.

Desweiteren kann man eine Geräteorientierung für die Darstellung der Webapp vorgeben. Damit ist es möglich, unabhängig von der Ausrichtung des Smartphones oder Tablets, eine Webapp immer im Landscape- oder Portrait-Modus, also im Hoch- oder Querformat, laufen zu lassen.

"orientation": "portrait"

Außerdem gibt es die Möglichkeit, eine Start-URL für die Webapp zu definieren. Damit öffnet sich eine vom Startbildschirm aus aufgerufene Website beziehungsweise Webapp mit einer gesonderten URL.

"start_url": "webapp.html"

Ist die Eigenschaft „start_url“ nicht gesetzt, wird immer die URL verwendet, von der aus eine Website dem Startbildschirm hinzugefügt wird. Mit „start_url“ kann man also zum Beispiel dafür sorgen, dass eine Webapp immer mit ihrer Startseite geöffnet wird.

Oftmals ist es für Entwickler interessant, zu erfahren, wann eine Website vom Startbildschirm und wann sie als normale Website aufgerufen wurde. Hierzu lässt sich die Eigenschaft „start_url“ zweckentfremden, indem dort einfach ein Parameter übergeben wird, der anschließend dazu genutzt werden kann, die Aufrufe vom Startbildschirm aus gesondert festzustellen.

"start_url": "webapp.html?startbildschirm=1"

Dieser Parameter kann per JavaScript oder einer serverseitigen Skriptsprache abgefragt werden. So können auch Analytics-Tools entsprechende Rückschlüsse ziehen, von wo aus die Website beziehungsweise Webapp gestartet wurde.

Keine nachträgliche Änderungen der Manifest-Eigenschaften möglich

Ist eine Website als Verknüpfung dem Startbildschirm hinzugefügt worden, ist es nicht möglich, die definierten Eigenschaften für die gesetzte Verknüpfung nachträglich zu ändern. Wird beispielsweise der Wert für „orientation“ geändert, müsste der Nutzer die bestehende Webapp-Verknüpfung zunächst löschen und anschließend die Website erneut zum Startbildschirm hinzufügen. Erst dann wird die Manifest-Datei wieder ausgelesen.

Fazit

Ist eine Webapp einmal als Verknüpfung auf dem Startbildschirm gelandet, ist sie optisch nicht mehr von einer nativen App zu unterscheiden. Mit entsprechender HTML5-Technik können Sie die Webapp wie eine native App auf das Smartphone oder Tablet laden (Stichwort „Application Cache“) und Einstellungen per „Local Storage“ auf dem Gerät speichern. Somit ist nicht zwingend eine Internetverbindung notwendig, um die Webapp aufrufen zu können.

Der einzige Nachteil beim WebApp-Manifest ist die fehlende Möglichkeit, auf einer Website einen Link darzustellen, der die Website auf den Startbildschirm hinzufügt. Bisher muss man den Nutzern erklären, dass sie die Option „Zum Startbildschirm hinzufügen“ aus dem Menü des Browsers aufrufen müssen. Außerdem muss der aktuelle Chrome 39 auf dem Androidgerät installiert sein.

(dpe)

Apps Programmierung WordPress

WordPress Mobil: Diese Plugins machen Ihre Webseite zur App

Beitragsautor Von Andreas Hecht
Beitragsdatum 11. September 2014
4 Kommentare zu WordPress Mobil: Diese Plugins machen Ihre Webseite zur App

Aus WordPress die eigene Mobile-App erstellen

Immer mehr Menschen surfen mobil durch das Internet und lesen Ihre bevorzugten Webseiten nicht mehr am Notebook oder PC, sondern mobil auf dem Smartphone oder Tablet. Auch wenn responsives Webdesign bereits in die richtige Richtung geht, weil der Inhalt einer Webseite auf jedem Ausgabemedium lesbar ist, so bevorzugen doch viele Menschen eine richtige Mobile-App, auf der sich Beiträge einer Webseite noch besser konsumieren lassen. Daher stellen wir Ihnen heute einige WordPress-Plugins vor, mit denen Sie eine echte Mobile-App aus Ihrer WordPress-Webseite erstellen können. WordPress mobil geht einfacher, als man denkt…

Aus WordPress eine Mobile-App erstellen

Warum sollten Sie eine Mobile-App aus Ihrer WordPress Webseite erstellen?

Stark frequentierte oder gewinnorientierte WordPress-Webseiten stehen ständig vor dem Problem, sich von der Konkurrenz abzuheben und im Vergleich Mehrwert zu generieren. Hierzu bietet sich eine eigene App geradezu an, weil dadurch dem Leser ein erhebliches Plus an Nutzen beschert wird. Mit einer eigenen App kann der Leser seine bevorzugte Webseite überall mobil konsumieren. Auch ich lese Webseiten überwiegend über mein Smartphone und freue mich jedesmal, wenn eine Webseite eine App anbietet, da ich persönlich einer App dem Vorzug gegenüber einer responsiven Webseite gebe. Natürlich ist das rein subjektiv.

So funktioniert die App Erstellung

Aus einer WordPress-Webseite eine Mobile-App zu erstellen ist nicht schwer. Es gibt einige Online-Dienste, die diese Aufgabe übernehmen wollen. Hierzu braucht man nur ein zu einem Dienst zugehöriges WordPress-Plugin zu installieren und im Anschluss die betreffende Webseite aufzusuchen, um die App zu generieren. Im Anschluss kann man die App dann in die jeweiligen App-Stores (Google Play Store, iOS App Store, Windows App Store) hochladen lassen. Natürlich kann ein so umfassender Service nicht kostenfrei sein. Verglichen mit den Entwicklungskosten für eine komplett eigene App zahlt man jedoch sehr wenig Geld für den jeweiligen Service.

AppPresser – Build iOS/Android Apps Using WordPress

Das AppPresser Plugin für WordPress

AppPresser dürfte der wohl bekannteste Service sein, um aus einer WordPress Webseite eine eigene, wirklich gute App zu erstellen. Die App kann vollständig in WordPress erstellt werden – mit allem, was dazu gehört. Sie können zwischen verschiedenen Themes wählen, Plugins integrieren und auch Funktionen wie zum Beispiel Zugriff auf Kamera und Kontakte einbauen. Das Plugin erfordert einen Account bei AppPresser inklusive einer kostenpflichtigen Lizenz, die ab 199.- USD startet und die Erstellung mit Theme, Plugin usw. beinhaltet. Wenn Sie Ihre App nicht selbst in die App-Stores hochladen möchten, kann AppPresser dies für eine Gebühr von 499.- USD für Sie tun. In diesem Preis ist dann jedoch die App-Erstellung mit allem Drum und Dran inklusive.

AppPresser

Entwickler: AppPresser, webdevstudios, Brad Williamson, Scott Bolinger
Wird ständig weiter entwickelt: Ja
Letzte Version vom: 05.06.2014
Kosten: Kostenfrei über WordPress.org, erfordert jedoch Premium Lizenz von 199.- bis 499.- USD
Lizenz: GNU GENERAL PUBLIC LICENSE für die kostenfreie Version und spezielle Lizenz für die Premium Version
Wechselwirkungen mit anderen Plugins: nicht bekannt
Entwickler Homepage: AppPresser.com – (EN)

IdeaPress – Turn WordPress into Mobile Apps (Android, iPhone, WinPhone)

Das IdeaPress Plugin für WordPress

Das IdeaPress-Plugin stellt lediglich die API für den Online-Dienst IdeaPress bereit. Die komplette App-Erstellung inklusive dem Design erfolgt auf der Webseite von IdeaPress. Hierzu muss zuerst ein Account angelegt und eine Lizenz erworben werden. Auch hier haben Sie die Wahl, ob Sie Ihre App selbst in die App-Stores publizieren möchten oder ob die Firma das für Sie erledigen soll. Ein wichtiges Alleinstellungsmerkmal ist, dass die App auch Offline-Browsing unterstützt. Der Inhalt Ihrer App kann also auch ohne Internetverbindung gelesen werden. Sie können ebenfalls wählen, aus welchen Kategorien oder Seiten der Inhalt der App bestehen soll. Auch dynamische Updates werden unterstützt, so dass Ihre Leser immer auf dem neuesten Stand sind.

Die Homepage von IdeaPress

Entwickler: Monika, michaelsiu
Wird ständig weiter entwickelt: Ja
Letzte Version vom: 06.02.2014
Kosten: Kostenfrei über WordPress.org, erfordert jedoch Premium Lizenz von 69.- bis 1000.- USD
Lizenz: GNU GENERAL PUBLIC LICENSE für die kostenfreie Version und spezielle Lizenz für die Premium Version
Wechselwirkungen mit anderen Plugins: nicht bekannt
Entwickler Homepage: IdeaPress – (EN)

Mobiloud – WordPress Native Mobile Apps Builder (iPhone, iPad, Android)

Das mobiloud Plugin für WordPress

Das Mobiloud Plugin erlaubt die komplette Erstellung der App direkt in WordPress, inklusive Design, Logo und ähnlichem. Auch eine Vorschau-Funktion ist vorhanden. So kann man während der Erstellung schon abschätzen, wie die fertige App dargestellt werden wird. Zum Erstellen der App ist ein kostenpflichtiger Account bei Mobiloud nötig, die sich auch um das Einstellen der fertigen App in die jeweiligen App-Stores kümmern. Die Preise für die einzelnen Lizenzen starten ab 89.- USD im Monat. Der Mobiloud-Service kann jedoch nur Apps für iOS und Android generieren. Die fertige App zeichnet sich durch „Push Notifications“ aus, die dem Smartphone- oder Tablet-Benutzer sofort signalisieren, dass es Neuigkeiten gibt. Selbstverständlich bleibt die App immer automatisch auf dem neuesten Stand. Ein Alleinstellungsmerkmal ist sicherlich, dass eine Unterstützung für Werbung innerhalb der App besteht. Auch bei der Wahl der eingesetzten Kommentarmöglichkeit ist man nicht beschränkt. Es können WordPress, Disqus oder Facebooks Kommentar-Funktionen eingesetzt werden.

Ebenso gibt es Social-Sharing Optionen und die Möglichkeit der Google-Analytics-Integration. Mobiloud kann 30 Tage ausprobiert werden, bevor eine Lizenz erworben werden muss. Das renommierte englischsprachige Design Magazin „Speckyboy“ vertraut auf Mobiloud.

Die Mobiloud Webseite

Entwickler: Pietro Saccomani
Wird ständig weiter entwickelt: Ja
Letzte Version vom: 13.08.2014
Kosten: Kostenfrei über WordPress.org, erfordert jedoch Premium Lizenz von 89.- bis 199.- USD im Monat
Der Dienst kann 30 Tage kostenfrei ausprobiert werden, eine Kündigung ist jederzeit möglich.
Lizenz: GNU GENERAL PUBLIC LICENSE für die kostenfreie Version und spezielle Lizenz für die Premium Version
Wechselwirkungen mit anderen Plugins: nicht bekannt
Entwickler Homepage: Mobiloud – (EN)

WiziApp – Android & iPhone Apps (WooCommerce & BuddyPress compatible)

Das Wiziapp Plugin für WordPress

Mit WiziApp kann man kostenfrei eine eigene HTML5 App erstellen, die auch sofort den mobilen Lesern der Webseite bereitgestellt werden kann. Apps für Android oder iOS sind allerdings kostenpflichtig. Hierzu muss zuerst einmal eine entsprechende Lizenz gekauft werden. Nach der Installation des Plugins beginnt sofort die Generierung der App, die abhängig von der Größe der Webseite schon einige Minuten dauern kann. Ein Fortschrittsbalken informiert hier über den Stand der Dinge. WiziApp ist kompatibel mit Woocommerce und BuddyPress, allerdings nicht Multisite kompatibel, kann also nicht mehrere Websites in eine App integrieren. In der kostenfreien HTML5-Version wird Werbung des Herstellers eingeblendet. Es kann jedoch ein Modul für 49.- USD im Jahr erworben werden, dass die Werbung ausblendet.

WiziApp stellt 7 kostenfreie Themes zu Verfügung, damit die fertige App individuell und hochwertig aussieht. Die App beherrscht auch „Push Notifications“ um den Leser immer auf dem neuesten Stand zu halten. Eine Einbindung von Werbung in die App wird ebenfalls unterstützt. So kann die App Teil der Monetarisierungsstrategie einer Website sein.

Die WiziApp Homepage

Entwickler: WiziApp
Wird ständig weiter entwickelt: Ja
Letzte Version vom: 13.08.2014
Kosten: Kostenfrei über WordPress.org, erfordert jedoch für Android und iPhone Apps eine Premium Lizenz von 149.- bis 299.- USD im Jahr. Eine HTML5 App kann kostenfrei erstellt werden.
Lizenz: GNU GENERAL PUBLIC LICENSE für die kostenfreie Version und spezielle Lizenz für die Premium Version
Wechselwirkungen mit anderen Plugins: nicht bekannt
Entwickler Homepage: WiziApp – (EN)

Fazit

Eine eigene Mobile-App anbieten zu können, ist im heutigen Wettbewerb unter den Webseiten ein unschätzbarer Vorteil. Der dafür nötige finanzielle Aufwand ist überschaubar, wenn auch nicht gerade zu vernachlässigen. Doch wer eine stark frequentierte Webseite sein eigen nennt, mit der er bestenfalls auch noch Geld verdient, sollte seinen Lesern diesen Mehrwert anbieten und sie damit potenziell noch stärker an die Webseite binden. Wer einen Igel in der Tasche hat, wird sich über WiziApp freuen, denn damit ist es möglich, eine kostenfreie (aber werbefinanzierte) HTML5-Version zu erstellen und sie den mobilen Lesern des Blogs anzubieten.

Links zum Beitrag

AppPresser Plugin von WordPress.org
AppPresser – Build iOS/Android apps using WordPress – Homepage (EN)
IdeaPress Plugin von WordPress.org
IdeaPress – Transform your WordPress site into a Mobile App – Homepage (EN)
Mobiloud Plugin von WordPress.org
Mobiloud – Build iOS and Android apps for your WordPress site – Homepage (EN)
WiziApp Plugin von WordPress.org
WiziApp – WordPress iPhone App Plugin – Homepage (EN)

(dpe)

Apps Programmierung

Aufgabenverwaltung mit erstaunlichen 10 Millionen Nutzern: Any.do jetzt auch als Web-App

Beitragsautor Von Dieter Petereit
Beitragsdatum 23. Mai 2014
1 Kommentar zu Aufgabenverwaltung mit erstaunlichen 10 Millionen Nutzern: Any.do jetzt auch als Web-App

Ich gebe zu, da staune ich. Dass Any.do mittlerweile mehr als 10 Millionen Nutzer hat, war mir neu. Damit dürfen sie sich zur größten mobilen Todo-App der Welt ausrufen. Ihre mobilen Apps gibt es sowohl für Android, wie auch für iOS. Vor kurzem fügten sie eine Chrome Extension hinzu und gestern veröffentlichte Any.do eine Web-App. Die ist allerdings reichlich ungewöhnlich und machte mir wieder klar, warum ich Any.do nicht nutze…

Any.do: Minimalistisch wie kaum ein zweiter

Vor einer Weile war Any.do in aller Munde. Es war die Rede von der schönsten, revolutionärsten, einfachsten, elegantesten Aufgabenliste der Welt. Nach ganz kurzem Test war mir klar, ist nicht meins. Nicht nur die Funktionalität war mir zu rudimentär, auch das Design fand ich viel zu minimalistisch. Wie schon Einstein sagte: Macht die Dinge so einfach wie möglich, aber nicht einfacher.

Dabei übersah ich offenbar eines. Nämlich, dass für mich als Digitalnomaden eine Aufgaben-App ganz andere Dinge leisten muss als für Otto Normalverbraucher. Und auf genau den letztgenannten scheint Any.do mit Erfolg ausgerichtet zu sein. Man sieht es schon auf der Homepage. Die zeigt eine Großaufnahme einer sportlich, man könnte auch sagen häuslich bekleideten Dame mittleren Alters, die, in der Küche stehend, auf ihr iPad schaut. Eventuell hat sie soeben Toilettenpapier ihrer Einkaufsliste in Any.do hinzugefügt. Nicht etwa sieht man einen Manager im Anzug, der durch den Flughafen rennt, um seinen Flieger nicht zu verpassen oder einen zugewachsenen Programmierer vor seinen fünf Bildschirmen mit acht Deadlines im Nacken.

Ich blickte seither nie wieder auf Any.do zurück und hatte eigentlich schon gedacht, der Sand der Zeit hätte die App verschüttet und dem Vergessen anheim gestellt. Aber da irrte ich mich gewaltig, zumindest mal mittelfristig. Offenbar fanden regelrechte Massen an Normalverbrauchern Any.dos Einfachheit extrem attraktiv und integrierten die App fest in ihren Alltag.

Any.do: Aufgabenverwaltung auf niedrigstem Niveau

Zugegeben, in Any.do ist es so einfach wie in keiner anderen mir bekannten App, Aufgaben anzulegen. Schreiben Sie einfach Ihren Text, in riesiger Schriftgröße übrigens. Dann wählen Sie ein Fälligkeitsdatum mit Uhrzeit oder auch nicht. Wenn Sie wollen, setzen Sie noch eine Erinnerung und Unteraufgaben oder kleine Notizen. Die Aufgaben können in Ordner, wie etwa Persönliches und Geschäftliches abgelegt werden. Eigene Ordner legen Sie ebenfalls sehr einfach an.

Any.dos minimalistische Web-Version, rechts die mobilen Vertreter

Das ist alles. Anfügen von Dateien oder URLs ist nicht vorgesehen. Aufgaben an andere delegieren ist nicht vorgesehen. Sie können allerdings in den mobilen Apps einzelne Aufgaben an Ihre Kontakte versenden. Erinnerungen gibt es nur als Tonsignal, nicht als SMS oder E-Mail. Man kann Aufgaben nicht kommentieren. Unteraufgaben können keine eigenen Fälligkeitsdaten oder Erinnerungen erhalten. Alles sehr rudimentär…

Mich verschlug es zuerst zu Wunderlist. Dort hielt es mich allerdings auch nicht lange. Schlussendlich landete ich bei Todoist. Sowohl Wunderlist wie auch Todoist sind schön gestaltete Produkte, dabei aber weit weniger minimalistisch in Design und Funktionalität als Any.do. Im direkten Vergleich muss man deren Feature-Sets als geradezu beeindruckend bezeichnen. Dennoch bringt es Todoist nur auf etwas mehr als zwei Millionen Nutzer und Wunderlist zählt derer etwas mehr als sechs Millionen. Beide Apps unterstützen deutlich mehr Plattformen als Any.do das tut.

Wunderlist: Web-App

Todoist: Web-App

Übrigens, für Teams gibt es da ein feines Tool namens BamBam. Dazu schrieb ich für unsere große Schwester Noupe Magazine vor ein paar Monaten diesen Beitrag.

So sind die Fakten. Dennoch schaffte es Any.do, weit mehr Sympathien für sich zu gewinnen. Offenbar gibt es sehr viele Nutzer, die einfach ihre bisherigen Haftnotizen und Einkaufszettel gegen etwas digitales ersetzen wollen. Und damit kann Any.do natürlich dienen. Verschwenden Sie nie wieder einen kleinen Schnipsel Papier, nutzen Sie stattdessen Any.do. Natürlich könnten Sie auch funktionsreichere Vertreter, wie eben Wunderlist oder Todoist nutzen. Aber wenn Sie partout nicht mehr wollen, dann bleiben Sie halt bei Any.do.

Any.do für Chrome und als Web-App

Erstaunlicherweise liefert die Chrome-Extension für Any.do Funktionalitäten, die ich auch für meine Zwecke oder – genereller – professionelle Zwecke nützlich finde. So lassen sich E-Mails sehr einfach zu Aufgaben machen, was Todoist in gleicher Weise bietet. Es können aber auch Nachverfolgungsaufgaben aus E-Mails angelegt werden. Das habe ich so noch nirgendwo anders gesehen. Was nützt es aber, wenn die App ansonsten so gar nicht auf professionelle Bedarfe ausgerichtet ist. Da laufen die schicken GMail-Features komplett ins Leere.

Die neue Web-App überrascht nach dem bisher Gesagten auch nicht. Es ist ein Beispiel dafür, wie wenig man liefern kann, ohne gleich komplett unbrauchbar zu werden. Any.dos Web-App ist, wenn man ehrlich ist, eine reine Design-Katastrophe. Sie arbeitet auch auf großen Monitoren schlichtweg so, wie sie das auf kleinen Touchscreens auch tut. Angepasste Layouts sind Fehlanzeige und auch ansonsten tut Any.do nichts, um sich die Stärken größerer Bildschirmdiagonalen irgendwie zunutze zu machen.

Schauen Sie sich diesen Screenshot an. Ich erstelle eine Aufgabe auf meinem 27" Dell-Monitor:

Sie sehen es auf dem kleinen Shot nicht so deutlich, können es sich aber vielleicht denken. Trotzdem die Buchstaben groß sind wie Dackel, gibt es mehr Whitespace als sich selbst Johny Ive trauen würde, zu verdesignen. Die Listenansicht ist nicht viel anders. Schlussendlich habe ich das Browserfenster kleiner skaliert, damit ich mir nicht ganz so verapplet vorkam beim Arbeiten mit Any.do.

Sei’s drum: Zehn Millionen Nutzer können ja nicht vollkommen daneben liegen. Deshalb, mögen Sie Ihr Any.do, dann verwenden Sie es halt. Erledigen Sie Ihre Einkäufe damit. Vergessen Sie keinen Arzttermin mehr und stellen Sie sicher, dass Sie Ihren Kleinen rechtzeitig aus der Tagesstätte abholen.

Alles Gute…

Übrigens: Wenn Sie doch mehr wollen, dann lesen Sie doch diese Dr. Web-Artikel: “Aufgabenplaner Online – eine nicht ganz vollständige Liste” und „Wunderlist Pro ist da! Wir zeigen Alternativen!„

Schlagwörter android, ios, todo

Apps Inspiration Programmierung Showcases

Mockups: 50+ kostenlose Design-Ressourcen für deine Präsentation

Beitragsautor Von Redaktion Dr. Web
Beitragsdatum 31. März 2014
3 Kommentare zu Mockups: 50+ kostenlose Design-Ressourcen für deine Präsentation

Du kennst das. Du hast eben begonnen, an der Kunden-Website zu arbeiten, da will der Kunde schon mal sehen, wie das so aussehen wird, am besten auch gleich auf mehreren Geräten. Und natürlich so, dass er sich darunter was vorstellen kann.

Oder will dein Chef die App, an der du gerade die ersten Umsetzungsschritte vornimmst, jetzt schon aussagekräftig vermarkten? Ober benötigst du gar selber für deine tolle Idee zu einem Kickstarter-Projekt ein Mockup deiner App, das die Leute überzeugt und zum Investieren animiert? Egal, ob diese oder ähnliche Szenarien, du benötigst etwas, das es noch gar nicht gibt. Zauberei. Das ist ein Fall für Dr. Web.

Wir haben uns in die Weiten und die Tiefen des Webs begeben und unsere Netze ausgeworfen. Hängen geblieben sind fast 60 Dienste und Vorlagen auf Foto- oder Vektorbasis, mit denen deine Präsentation zumindest potenziell ein Erfolg werden kann. Sagen wir es so: Wenn du trotz unserer Hilfe keinen Erfolg haben solltest, lag es an was anderem ;-)

Abschnitt #1: Dienste

Placeit

Erstellt von/für: placeit

Device Art Generator

Erstellt von/für: Android Developers

Mockuphone

Erstellt von/für: mockuphone

ShapeItApp

Erstellt von/für: shapeitapp

Am I Responsive

Erstellt von/für: responsivedesign

Abschnitt #2: Fotorealistische PSD-Mockups

iPhone Mockups

Erstellt von/für: Regy Perlera

iPad & iPhone 5s Mockups

Erstellt von/für: Regy Perlera

iPhone 5s Mockup in Gold

Erstellt von/für: Christoph Gromer

Flat iPhone 5S Mockup

Erstellt von/für: George Vasyagin

iPad Mini

Erstellt von/für: Kenny Sing

Nexus 5 Mockup

Erstellt von/für: Kreativa Studio

Xperia Mockup

Erstellt von/für: José Polanco

Notemockup2

Erstellt von/für: webvilla

Surface 2

Erstellt von/für: Sam Withey

iPhone 5 Foto-Mockup

Erstellt von/für: Brandon Brown

Notemockup3

Erstellt von/für: webvilla

iPhone & MacBook Pro

Erstellt von/für: anpsthemes

iPad 3

Erstellt von/für: Brandon Brown

Nexus 5

Erstellt von/für: Vector Square

Nokia Lumia 2520

Erstellt von/für: Andrii Sydorov

Iphone 5S & 5C Mockup

Erstellt von/für: Gwénolé Jaffrédou

iPhone 5

Erstellt von/für: Flavius Nechita

iPad Mockup

Erstellt von/für: Petter Berg

Macbook Mockup

Erstellt von/für: Petter Berg

MacBook Air Mockup

Erstellt von/für: ninetofive

MacBook Air Mockup

Erstellt von/für: ninetofive

The Desk Template

Erstellt von/für: Jérémy Paul

iPhone 5 schwebend

Erstellt von/für: Jérémy Paul

iPhone 5 3D

Erstellt von/für: Jérémy Paul

iPhone 5s

Erstellt von/für: graphicburger

Macbook Air Screen

Erstellt von/für: pixeldima

iPhone5 fotorealistisch

Erstellt von/für: Tomas Korosi

Desktop-Ständer

Erstellt von/für: Danny Johnson Junior

3D iPhone

Erstellt von/für: nickmurphy

Abschnitt #3: Vektor-basierte PSD-Mockups

Ipad Air Mockup

Erstellt von/für: blugraphic

iPhone

Erstellt von/für: Graph Concepts

Minimal Flat Iphone5

Erstellt von/für: Rahul Dass

Samsung Galaxy S4

Erstellt von/für: Valentin Scholz

Simple Flat iPhone 5S Vektor

Erstellt von/für: Alberto Ziveri

Nexus 5

Erstellt von/für: Greg Moore

Samsung Mobile

Erstellt von/für: monkeytempal

iPhone und Android

Erstellt von/für: Billy Kiely

Apple-Armada im Flat Design

Erstellt von/für: Michal Jakobsze

BlackBerry Z10

Erstellt von/für: graphicburger

Smartphones

Erstellt von/für: Jérémy Paul

Nexus 5 in Flat

Erstellt von/für: Christian Björkman

Flat Showcase mit mehreren Geräten

Erstellt von/für: victorsosea

Illustrator-Vorlage mit verschiedenen Geräten

Erstellt von/für: uxkits

Diverse Mobilgeräte im Flat Design

Erstellt von/für: Herr Henning

HTC One

Erstellt von/für: Ben Mildren

iPhone 5c, gewohnt farbenfroh

Erstellt von/für: Anton Kudin

Nexus 7

Erstellt von/für: Tim Gale

(Der Beitrag wurde im April 2019 zuletzt geprüft und um tote Links bereinigt.)

Schlagwörter desktops, fotorealistisch, mockups, Smartphones, tablets, vektor-basiert

Apps Essentials Icons & Fonts

Brandneue App für Mac OS: 2.800 kostenlose Icons für Designer

Beitragsautor Von Dieter Petereit
Beitragsdatum 16. Januar 2014
2 Kommentare zu Brandneue App für Mac OS: 2.800 kostenlose Icons für Designer

Ivan Boyko kennen viele Designer sicherlich als den kreativen Kopf hinter icons8. Auf der gleichnamigen Website können 2.800 Icons, davon 1.600 in der Designsprache des Windows 8 und 1.200 im Stile von iOS 7 kostenfrei heruntergeladen werden. Seit ein paar Stunden können Designer, die mit einem Mac arbeiten, noch einfacher auf den Gesamtbestand zugreifen. Denn Boyko veröffentlichte das komplette Set als Gratis-App im Mac App Store.

icons8-websearch

icons8: 2.800 zeitgemäße Icons im PNG-Format

Auf der Website icons8 stehen über 2.800 Icons im PNG-Format zum freien Download bereit. Dabei können entweder komplette Sets oder einzelne Icons heruntergelasen werden. Die 2.800 Symbole teilen sich in zwei Sets, eines im Designstil von Windows 8, eines im Stil von iOS 7. Um die kompletten Sets in einem Rutsch zu erhalten, ist die Angabe einer E-Mail-Adresse erforderlich, an die der Downloadlink gesendet werden kann. Boyko verspricht überdies, die E-Mail-Adressen ansonsten nur dazu zu verwenden, gelegentlich kostenfreie Vektor-Icons zu versenden.

Einzelne Icons sind ohne Angabe der E-Mail erhältlich. Hierzu verwendet man die Suchfunktion der Seite, bei der man noch unterscheiden kann, ob der einzugebende Freitext über beide Sets oder nur entweder in den Windows- oder den iOS-Icons gesucht werden soll. Auf der Suchergebnisseite können Sie dann noch die Anzeigegröße der Symbolvorschau wählen, maximal 64 Pixel lassen sich hier einstellen. Die Anzeigegröße definiert aber nicht die tatsächliche Größe der Downloaddatei.

Nachdem Sie ein Icon aus den Suchergebnissen gewählt haben, gelangen Sie auf die Detailseite, von wo aus Sie den PNG-Download kostenfrei und ohne weitere Umschweife anstoßen können. Der Download kommt im Zip-Format auf die heimische Platte und enthält das gewählte Icon in den Auflösungen 25, 32, 50, 75, 100, 128, 256 und 512 Pixeln (jeweils zum Quadrat).

Grundsätzlich steht jedes Symbol auch als AI, EPS und SVG zur Verfügung. Diese Formate sind jedoch nicht kostenfrei, sondern erfordern den Erwerb einer von mehreren möglichen Lizenzen, deren Preise von 20 Dollar für ein einzelnes Symbol bis hin zu rund 200 Dollar für eines der beiden kompletten Sets reichen. Für rund 250 Dollar pro Set erhält man nicht nur die Vektordateien dazu, sondern zusätzlich alle im Verlaufe des folgenden Jahres erscheinenden Icons ebenfalls. Laut Boyko wird es sich dabei um rund 1.000 weitere Symbole handeln.

Wir halten fest: Kostenfrei gibt es lediglich die PNG-Dateien in unterschiedlichen Größen bis 512 x 512 Pixel. Diese dürfen sowohl in privaten, als auch in kommerziellen Projekten Verwendung finden, sofern die Lizenzbestimmungen eingehalten werden. Für Webprojekte muss eine Verlinkung zur Hersteller-Website erfolgen. Es reicht, einen Link im Footer zu platzieren, der etwa “Icons erstellt von icons8” betitelt ist.

icons8 als Mac OS App

Ganz frisch über den App Store erhältlich ist das gesamte Angebot seit dem heutigen Tage als native App für Mac OS X ab Version 10.8. Einmal gestartet, nistet sich die App als Symbol in der Statusleiste am oberen Bildschirmrand ein. Ein Klick darauf öffnet ein kleines Fenster, in welchem sich zuoberst ein Suchfeld befindet. Die Organisation der Icons erfolgt intern via Tags, so dass es für eine erfolgreiche Suche nicht darauf ankommt, den Namen des Icons so gut wie möglich zu erahnen, sondern darauf, wie aufwändig die Symbole getaggt sind. In dieser Hinsicht hat sich Boyko nichts vorzuwerfen. Alle Bildzeichen sind sinnvoll verschlagwortet und so im Kontext gut zu finden.

icons8-appsearch

Wie auf der Website lässt sich in der App auswählen, ob man Set-übergreifend suchen oder nur Piktogramme aus einem der beiden Sätze angezeigt bekommen will. Die Anzeige des Suchergebnisses erfolgt maximal in 50 x 50 Pixel. Die Auswahl der Pixelgröße über das entsprechende Selektionsfeld bestimmt die Größe des eigentlich zu übernehmenden Piktogramms.

Die Übernahme eines Icons zur Weiterverarbeitung ist sehr einfach. Entweder Sie ziehen das gewünschte Symbol mit der Maus in die entsprechende Anwendung, etwa Photoshop oder Sie rechtsklicken das Symbol und wählen Copy. Das ist die ganze Kunst. Wollen Sie die App stets präsent haben, können Sie sie über die Preferences in den Autostart hieven.

Das folgende Video erklärt die Vorgehensweise noch einmal in Wort und Bild:

Alle Symbole liegen übrigens auf Ihrer lokalen Festplatte im Nutzerverzeichnis unter dem etwas schwer zu merkenden Pfad /Library/Containers/com.visualpharm.Icons8AppWithContent/Data/Documents/Icons/. Gut zu wissen jedenfalls, dass Sie für die Funktionalität des Tools nicht auf eine Onlineverbindung angewiesen sind.

Für die Nutzung der Icons via App gelten die identischen Lizenzbestimmungen wie bei der Nutzung via Web. Anders als bei der Webnutzung gibt es über die App nicht die Möglichkeit, Vektorformate zu kaufen oder ganze Sets zu laden.

Im Ergebnis stellt die App eine sehr ordentliche Arbeitserleichterung für Designer dar, die ohnehin mit einem aktuellen Mac arbeiten. Selbst, wenn man schlussendlich ein Vektorformat benötigt, ist das Prototyping mit der Drag & Drop-Funktionalität der icons8-App beschleunigt. Nachdem das Featureset komplett kostenlos ist, spricht nicht viel dagegen, der App eine Chance zu geben. Das haben übrigens in der kurzen Zeit seit ihrer Veröffentlichung schon dermaßen viele Developer getan, dass die App in diversen internationalen Charts auf dem Weg nach ganz oben ist…

Links zum Beitrag

icons8 | Downloadangebot statt App
2.800 Icons for Developers im Mac App Store
icons8 | Lizenzbestimmungen

Schlagwörter app store, icons, itunes, kommerziell nutzbar, kostenlos, mac os, piktogramme, symbole