As with every software, there are both benefits and drawbacks associated with this platform. Titanium is an excellent tool for rapid prototyping to present from a  mock-up into a prototype in order to evaluate consumer interests or conduct usability tests.

IDE and Titanium^® SDK claim the following:

• 60-90% code reuse across device platforms
• Direct access to native APIs using Hyperloop
• Delivers fully native apps for rich user experience
• Immediate support for each new OS release
• Seamless integration to existing continuous delivery systems (e.g. SCM, build and MDM solutions)

App Designer

• Visually design and develop apps for iOS, Android, and Windows
• Drag-and-drop palette generates best practice, production-quality code
• Bi-directional updates allow seamless movement between design and code
• See UI changes across OSs and devices

  

Hyperloop

• Direct access to every iOS and Android API using JavaScript
• Incorporate 3rd-party native libraries – with no changes required
• Easily create complex custom effects like dynamic animations
• Run Java, Objective C or Swift code alongside Titanium code

  

Pros

• Rapid Prototyping

With flexibility in mind, Appcelerator’s Titanium immensely speeds-up application development with just a few lines of code in a few hours. Whether you opt for native or cross-platform frameworks, Titanium is always an open option to develop a prototype to evaluate the user’s interaction with the UI, given its rapid development.

• JavaScript

With Titanium, JavaScript encourages more individuals coming from a web development background to easily transition to mobile app development. Titanium shows off its combination of flexibility and structure–a characteristic of prototype-based scripting languages.

• Cross-platform

It is necessary to setup the development of one of the two platforms and then implement the required measures to make the app also run on the other one. The advantage here is given to you- the developer does not have to learn two languages and can reach a very high level of code reusability.

Cons

• Limitations in flexibility

Programs are interpreted “cross-compiled” by the vendor and as such incur a startup and runtime cost.

• Errors

Errors are usually not detected until runtime. Now, most developers know this can be a risky investment in a software that doesn’t give real-time feedback.

• There have been reports of unforeseen memory leak issues. The SDK makes it quite easy to cram features into an app, but these features do not necessarily play nice with each other as far as memory is concerned.
• Even though you as a developer may initially expect to write for one platform, it is imperative that you conduct tests on all platforms.
• Weak and slow support

Getting started

The tutorials will explain downloading and installing the necessary Titanium and third-party SDKs and tools, and creating a simple project.

It is important to keep in mind that To start using the Appcelerator Platform, you need an account to log in to the Appcelerator Dashboard and Axway Appcelerator Studio.

Installing Appcelerator Titanium

The current free ‘general availability’ version of the SDK is 5.1.2.GA

At first we need to setup Titanium:

• command line tools (CLI) to compile the apps
• the MVC framework Alloy
• some useful tools
• the SDK

The main parts are installed using the node.js package manager ‘npm’. Check https://nodejs.org/ if you need to install it.

• Install Java JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
• Download Android SDK (SDK Tools only): https://developer.android.com/sdk/index.html#Other
• Unzip Android SDK and run android to install SDK

Now open a console and run the following command to install the tools:

npm install -g npm
npm install n -g
npm install -g titanium alloy appcelerator tisdk

After that we need to install the SDK. To do this we will the cli tool tisdk from David Bankier (https://github.com/dbankier/tisdk):

# list available titanium sdks
tisdk list

The output will be something like this

5.1.2.GA

5.1.1.GA

5.1.0.GA
...

From this list we select the latest GA (5.1.2) and istall it

tisdk install 5.1.2.GA

with this command you can check if titanium found the sdk:

ti sdk list

and with

 ti info

you can see if something is missig (How to install JDK and the Android SDK will follow)

You are ready to create titanium/alloy projects now and compile them!

For more information visit:

https://github.com/dbankier/tisdk and have a look at “Manual builds”

http://docs.appcelerator.com/platform/latest/#!/guide/Quick_Start

https://www.appcelerator.com/

https://tutorials.axway.com/video/XmWEDgSP/Installing%20Appcelerator%20Studio/bSvBEOmi/Get-Started

The post Appcelerator’s Titanium – an overview appeared first on Mobile USTP MKL.

In diesem Artikel werden 3 Accessibility-Neuigkeiten im Chrome DevTools genauer beleuchtet. Was gibt es Neues im Bereich der Web Accessibility?

Contrast ratio

Dank dem Lighthouse-Überprüfungstool kann die Lesbarkeit der Texte verbessert werden. Das Kontrastverhältnis der Schrift kann mit dem Hintergrund verglichen werden und uns entsprechend Hinweise liefern, ob wir die Farbe des Textes ändern sollen, beziehungsweise ob der Kontrast zwischen dem Hintergrund und dem Text nicht zu niedrig ist. Nach dem Anpassen soll unser Text einfacher aus der Ferne gelesen werden können.

Aria-label

Aria-label-Eigenschaften sind besonders nützlich, wenn der Benutzer einen Screen Reader verwendet und wissen will, auf welchem Element er sich gerade befindet. Ein Knopf ohne textuelle Beschreibung kann ausreichend viele visuelle Hinweise bieten, aber wenn das Aria-Label nicht spezifiziert wurde, könnte ein blinder Benutzer vernachlässigt werden, weil sein Screen Reader nicht im Stande sein wird, ihm die Funktion dieses Knopfes zu beschreiben. Hier kommt Lighthouse zu Hilfe und macht uns darauf aufmerksam, diese Eigenschaften auszufüllen.

Focus-visible

Seit Google Chrome v67, nach dem Einschalten in „Experimental Flags“, hat man die Möglichkeit, das CSS-Pseudo-Element „focus-visibility“ zu verwenden. Dieses ist ein visueller Navigationshinweis in Form einer Border-Eigenschaft, der um das Element herum erscheint, wenn man mit der Tab-Taste navigiert. Jetzt ist es möglich, diese Eigenschaft anzupassen und sie deutlicher zu machen.

The post Was gibt es Neues in der Web-Accessibility? appeared first on Mobile USTP MKL.

Mit dem Thema „Creating Worlds“ bietet die FMX 2018 zahlreiche Präsentationen und Workshops über die produktionsbezogenen und technischen Aspekte der Medien- und Entertainmentbranche an. Einflussreiche Personen und talentierte Artisten erklären wie man zum endgültigen Ergebnis kommt, von der ersten Idee durch den Kreationsprozess und die Umsetzung, während spannende Videos und Slides die Vorträge begleiten.

Mehrere Veranstaltungen finden gleichzeitig statt, deshalb muss man sich die Zeit je nach Interesse organisieren – zum Glück kommt die FMX-Applikation mit dem aktuellen Plan und Raumbesetzung in Echtzeit (sic!) zu Hilfe. Die Präsentationen können in verschiedenen Raumgrössen stattfinden; von einigen Dutzenden bis zu mehreren Hunderten Sitzplätzen. Ein Teil der Gespräche wird sogar in einem Kinosaal geführt!

In einer professionellen aber ungezwungenen Stimmung werden zum Beispiel die VFX Case Studies von Blade Runnner, Black Panther sowie Assassin’s Creed unter anderen genauer beleuchtet.

Nicht nur künstlerische Aspekte werden besprochen, sondern auch die technische Seite aus den Bereichen wie Lightning and Rendering Tools, Simulations- und Visualisierungstechniken werden angesprochen. Virtual und Augmented Reality, aber auch 360-grad Videos, werden zu einem immer wichtigeren Teil der Zukunft der Medienbranche und fesselnde Einblicke auf den neuesten Technologien sind auch dort zu finden.

Neben der Vielfalt an Firmen und Künstler, die einen interessanten Überblick darüber geben, was in der Welt der Medien läuft, bieten Schulen, Universitäten und Arbeitgeber mit Broschüren und Gadgets versehene Standplätze, die Möglichkeit sich Ausbildungen näher anzusehen oder die Chance vielleicht, seinen zukünftigen Arbeitgeber kennenzulernen.

Im Großen und Ganzen wird die FMX Konferenz zu einer Horizont-erweiternden Erfahrung, die für alle offen ist, die neugierig auf die Medienbranche sind.

The post ein Einblick auf die FMX Messe, Stuttgart appeared first on Mobile USTP MKL.

Features

Die Credential Management API hat folgende Features:

• Ein-Fingertipp-Einloggen mit dem Kontowähler – der Benutzer kann sein Konto auswählen.
• Speichern von Anmeldedaten – deine Applikation kann die Passwort-Benutzername-Kombination oder auch die föderierte Identität speichern (Informationen über Zugangsdaten eines Anbieters föderierter Identitäten – Man kann sich das als schnelles Einloggen mit einem Facebook, Google+ oder Microsoft Konto vorstellen, ohne dabei ein Konto auf der gegebenen Seite zu erstellen).
• Reibungsloses Einloggen – der Benutzer kann automatisch eingeloggt werden, auch wenn seine Sitzung schon abgelaufen ist oder er die Anmeldedaten auf einem anderen Gerät gespeichert hat.

Umsetzung

Für den Benutzer ändert sich gar nichts. Der User loggt sich ein,  seine Anmeldedaten werden durch Google Smart-Lock gespeichert beim nächsten Seitenaufruf, wird er automatisch eingeloggt, auch wenn seine Sitzung abgelaufen ist. Wenn er ausgeloggt ist, kann er ganz automatisch wieder eingeloggt werden oder aus verschiedenen, gespeicherten Konten wählen – ohne dabei das Passwort einzugeben. Das funktioniert auch auf anderen Geräten, die mit dem gleichen Google Konto verbunden sind.

Kontowähle

Im Front-end darf muss man, die Input Felder mit dem “autocomplete” Attribut ergänzen und prüfen, ob dem Browser die Credentials Management API zu Verfügung steht:

if (navigator.credentials && navigator.credentials.preventSilentAccess)

Danach können die Anmeldedaten einfach abgerufen und gespeichert werden.

Beim nächsten Einloggen wird die Funktion navigator.credentials.get() aufgerufen, der man die Parameter unmediated: true/false  (User wird automatisch eingeloggt oder eine Auswahl mehrerer Kontos wird angezeigt) und password: true/false (ergänzt oder nicht das dazugehörige Passwort) mitschicken kann.

Namhafte Websites, wie New York Times, Pinterest oder Aliexpress, verwenden bereits diese Anwendung. Am Beispiel von Aliexpress, einem riesigen Onlinegeschäft, wird sichtbar, dass die Einkäufe nach der Einführung vom Credentials Management um 11% stiegen, weil die fehlgeschlagenen Anmeldungen um 85% sanken und die Zeit, die der Benutzer für das Einloggen braucht, ebenfalls um 60% zurückging.

Bedauerlicherweise ist diese Schnittstelle nur in Chrome ab der 51. Version  verfügbar, was ungefähr 25% aller Browser ausmacht.

Quellen

https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API

https://developers.google.com/web/fundamentals/security/credential-management/

https://medium.com/dev-channel/sign-in-on-the-web-credential-management-api-and-best-practices-d21aed14b6fe

https://www.youtube.com/watch?time_continue=220&v=NJ-sphu2DqQ

The post Credential Management API – schnelles und reibungsloses Einloggen appeared first on Mobile USTP MKL.

Die folgenden Punkte zeigen, wie begrenzt der <audio> Tag ist:

• Keine verlässliche Möglichkeit für ein Pre-buffern des Tons
• Keine Effekte in Echtzeit möglich
• Keine Möglichkeit zur Tonanalyse
• Es können nicht beliebig viele Töne parallel abgespielt werden
• Keine präzise Zeitkontrolle

Diese Beschränkungen haben die Entwickler dazu bewogen, eine Web Audio API zu schaffen, die alle obigen Probleme löst. Diese API ist vor allem von sehr großer Bedeutung bei Videospielen, insbesondere bei Virtual Reality Spielen, in denen die Wiederspiegelung von Geräuschen, die sich in einem dreidimensionalen Raum befinden, sehr wichtig ist.

Die Web Audio API wird von allen größeren, modernen Browsern unterstützt (außer IE11 und älter).  Um auf sie zu zugreifen, müssen wir eine AudioContext-Schnittstelle erstellen:

Ein einzelner AudioContext reicht für mehrere Ton-Inputs und komplexe Audio-Graph-Darstellungen, die aus miteinander verbundenen AudioNodes bestehen. Er ist die Grundvoraussetzung für alles Weitere –  weswegen er als erstes erstellt werden muss.

Im Großen und Ganzen ersetzt die Web Audio API nicht das Audio Element, sondern erweitert ihn.  Heutzutage ist JavaScript mächtiger und vielseitiger denn je und ermöglicht unter anderem auch das Erstellen eines Synthesizers. So kann beispielsweise eine Gitarre an den Rechner angeschlossen und ihr Ton mit Filtern und Effekten problemlos verändert werden. Auch können damit verschiedene Instrumente und Geräusche authentisch imitiert werden.

Folgendes Beispiel veranschaulicht ein Spiel bei dem das auf Web Audio API zur Anwendung kommt!

Plink: http://labs.dinahmoe.com/ToneCraft/plink

Quellen

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

https://www.html5rocks.com/en/tutorials/webaudio/intro/

https://developer.mozilla.org/de/docs/Web/API/Web_Audio_API

http://chimera.labs.oreilly.com/books/1234000001552/ch01.html#s00_1

The post Audio Web API appeared first on Mobile USTP MKL.

„iKnow-what-iBuy“ löst dieses Problem und macht es möglich, bewusster einzukaufen!

Bewusst kaufen und mehr

Stellen Sie sich vor, Sie sind in einem Supermarkt und möchten wissen, wie viele Kalorien 100gr von diesem süßen Kartoffel haben? …woher er kommt? …wie Sie ihn zubereiten können? …was man damit kochen kann?

Und diese auf dem Regal schön aussehende Spiegelreflexkamera… wie gut ist sie? Gibt es ein paar Demonstrationsbilder? Liegen bereits Kundenbewertungen von anderen Käufern vor?

Alle diese Probleme können mit iKnow-what-iBuy gelöst werden: holen Sie Ihr Handy heraus, gehen auf die iKnow-what-iBuy Webseite und scannen Sie den beim Produkt beiliegende QR Code – alles, was Sie darüber wissen wollten wird jetzt auf Ihrem Smartphone angezeigt.

Nicht nur Nährwerte, tolle Rezepte oder Zubereitungsideen für Gerichte sind hier zu finden, sondern auch viele weitere interessante Informationen, die beim Einkauf hilfreich sein werden.

Um Kunden dazu zu ermutigen, die App zu nutzen, können auch Bons und Ermäßigungen angeboten werden.

Keine Geheimnisse über die Produkte mehr! Seien wir und darüber bewusst, was wir kaufen. Mit iKnow-what-iBuy wird der Lebensmittelmarkt gleich viel transparenter.

Umsetzung

Idee war es, eine Web-App zu entwickeln, die einen Kunden jederzeit per Handy mit der Webseite verbindet. Die App wurde mithilfe des Frameworks Ionic 2 und Angular entwickelt. Dies hat ermöglicht, eine native-aussehende App schnell und effizient zu entwickeln.

Der QR-Scanner wurde mithilfe des Plug-Ins Instascan.js zur Verfügung gestellt. Leider ist seine Kompatibilität nur auf Smartphones mit Android begrenzt. Erfreulich aber ist die rasante Geschwindigkeit, mit der die QR-Codes gescannt werden können.

Mögliche Verbesserungen

Dieser Proof-of-concept bietet interessante Anwendungen, auch wenn es sich noch in einem sehr frühen Zustand befindet. Daraus lässt sich schließen, dass die App noch viel Potential hat.

Zuerst sollte eine echte Datenbank mit Artikeln und Kundenkonten erstellt werden, damit es einfacher wird, neue Artikel und Kunden zu erstellen und zu verwalten.

Standardmäßig sollte es möglich sein, die Produkte nach Namen, Bewertung oder anderen Kriterien zu sortieren oder mit einer Eingabe zu suchen. Die Kunden sollten ihr eigenes Konto erstellen und Artikel zu Favoriten hinzufügen können. Auch das Kommentieren, Bewerten und möglicherweise Korrigieren von Produkten wären willkommene Erweiterungen.

Selbstverständlich sollte die App plattformunabhängig sein und auf jedem Endgerät und mit jedem Betriebssystem gleichermaßen funktionieren.

…und vieles mehr!

The post iKnow-what-iBuy Web Application appeared first on Mobile USTP MKL.