In der EU leben mehr als 60 Millionen registrierte Hunde und alle diese Hunde haben eines gemeinsam. Sie können uns nicht sagen, wenn es ihnen schlecht geht und zeigen Krankheitssymptome meist erst, wenn es bereits zu spät ist. Um Leid zu verhindern, sind unsere besten Freunde deswegen auf teure, stressige und vor allem regelmäßige Untersuchungen angewiesen. PEZZ life nimmt sich diesem Problem an und möchten die Haustiergesundheitsbranche in das Digitalisierungszeitalter führen.

Der Pezz Check

Der erste Schritt auf diesem Weg ist der völlig neuartige Do-it-yourself Gesundheitstest für Hunde. Der PEZZ Check, basiert auf einem Urintest und wird mittels der smarten PEZZ App gescannt. Er überprüft 8 unterschiedliche Indikatoren im Urin und gibt Aufschluss über den Gesundheitsstatus des Hundes. Zu den Indikatoren zählen Blut, Glukose, Ketone, Leukozyten, Nitrite, pH-Werte, Protein und Urobilinogen. Dadurch können Werte erkannt werden die sich auf aus der Leber, Niere, Harnblase, Blutsystem, Verdauungstrakt und der Bauchspeicheldrüse ergeben. Es lassen sich auch eine Vielzahl von allgemeinen Krankheiten abzeichnen.

Die PEZZ App

Die Ergebnisse, des Urintest werden dann automatisch interpretiert und in der App für den Hundebesitzer verständlich erklärt. Die App ermöglicht es dem Hundebesitzer binnen Sekunden mehr als 20 lebensbedrohliche Erkrankungen frühzeitig zu erkennen, angefangen von Diabetes bis hin zu Niereninsuffizienz und vielen weiteren. Darüberhinaus soll die App nicht nur Nutzern des PEZZ Checks einen Mehrwert bieten, sondern soll allen Hundebesitzern bei der Haltung ihres Haustieres Unterstützung bieten. Basierend auf den aktuellen Wetterdaten, werden beispielsweise Funktionen integriert, welche die ideale Uhrzeit für einen Spaziergang draußen anzeigen. Die Pezz App wird sowohl auf iOS als auch auf Android im jeweiligen Store verfügbar sein.

Visionen der Zukunft

Die App wird eine Vielzahl von Funktionen umfassen und laufend mit neuen erweitert werden. Das macht sie zur ersten Gesundheitsplattform für Hunde. Eine Vision für die Zukunft wäre die Entwicklung eines virtuellen Assistenten für Hundegesundheit. Dieser soll mit den Hundebesitzern kommunizieren, immer ein offenes Ohr für Ihre Sorgen und Anliegen haben, ihnen Tips geben und Fragen zur optimalen Haltung ihres Tieres beantworteten.

Aber Achtung

Die Pezz App sowie der Pezz Check ist kein Ersatz für eine tierärztliche Untersuchung oder Diagnose. Die Instrumente dienen rein der Früherkennung und Vorsorge.

Ziel von Pezz life

Erstens, soll durch frühzeitiges Erkennen eines Gesundheitsrisikos, das Entstehen von Krankheiten reduziert werden. Zweitens sollen Krankheiten in einem frühen, noch gut therapierbaren Stadium erkannt werden, um dem Hund bessere Heilungschancen zu ermöglichen. Ziel ist es die Branche zu revolutionieren,  Hundebesitzern Kummer, Zeit und Geld zu ersparen und vor allem Unterstützung bei der Rettung von Hundeleben zu bieten.

Links zum Projekt

Website: https://de.pezz.life/

The post PEZZ life – Für ein glückliches Hundeleben appeared first on Mobile USTP MKL.

RubyMotion ist eine Toolchain, welche es ermöglicht native iOS, OS X und Android Apps in der Programmiersprache Ruby zu entwickeln. RubyMotion gilt daher als Cross-Platform Produkt, umgesetzt von Laurent Sansonetti für das Unternehmen HipByte, welches aber ausschließlich die Entwicklung auf MAC zulässt.

RubyMotion ist eine Kombination aus 2 Hauptkomponenten:

• Laufzeiten: Die RubyMotion runtimes implementieren die Ruby-Sprachfunktionalität, die während der Ausführung einer Anwendung benötigt wird. Das Objektmodell, built-in Klassen sowie das Speichermanagement sind Teil der Laufzeitumgebung. RubyMotion kommt mit zwei Laufzeiten (jeweils eine für iOS/OS X und Android):
  • iOS/OS X: basiert auf der Objective-C Laufzeit und core Cocoa Klassen
  • Android: basiert auf der Android Laufzeit (Dalvik or ART) und core Java Klassen
• Projektmanagement: Eine Befehlszeilenschnittstelle zum Erstellen, Verwalten und interaktiven Entwicklen von RubyMotion-Projekten. Es enthält außerdem einen statischen Computer, der Ruby in optimierten Maschinencode kompiliert, und eine interaktive Konsole, welche Ausdrücke laufenden Betreib auswertet und die Funktionsweise der App in Echtzeit ändert.

RubyMotion folgt den Sprachspezifikationen von Ruby 1.9.

Lizenz

RubyMotion ist ein kommerzielles Produkt, wobei Teile Open-Source sind. Eine starter Lizenz, welche nur iOS, Android und OS X development unterstütz, steht für Hobbyzwecke frei zur Verfügung. Will man aber auch für watchOS oder tvOS entwickeln, muss man sich eine Lizenz kaufen. Die „Indie“-Lizenz für Einzel- und Kleinunternehmen kostet ca. $200 im Jahr und die „Professional“-Lizenz für größer Organisationen ca. $500 jährlich.

Entwicklungsumgebung

Ziel ist eine konsistente Umgebung für Android und iOS Development zu schaffen. Es obliegt dabei dem Entwickler, für welchen Editor er oder sie sich entscheidet. Es wird weder Xcode noch Android Studio benötigt. Erforderlich ist ein beliebiger Editor und das Terminal.

Vorteile und Features

• Ruby ist im Vergleich zu Objective-C, Swift und Java einfach zu erlernen.
• RubyMotion wird ausschließlich über die Terminal-Befehlszeile ausgeführt und benötigt keine spezielle IDE. Entwickler können ihren bevorzugten Editor verwenden. Teile der Toolchain sind Open Source und können einfach erweitert werden.
• RubyMotion Apps laufen auf den gleichen Laufzeittechnologien wie Objektive-C, Swift oder Java-App und werden genauso in Maschinencode kompiliert. Es kann auf jede iOS und Android API zugegriffen werden.
• RubyMotion kommt mit einem behavior-driven testing framework, was bedeutet, die Projekte eignen sich von Anfang an für eine testgetriebene Entwicklung. Es können funktionale als auch Integrationstest in der selben Sprache geschrieben werden können, in der die Anwendung programmiert wird.
• Debugging wird sowohl im Simulator als auch auf dem Device unterstützt.
• Auf iOS und OS X wird CocoaPods nativ unterstützt.

Voraussetzungen

64-bit Mac mit OS X 10.9 oder höher.

• für iOS:
  • iOS und OS X SDK muss auf dem Mac installiert sein. (Diese SDKs kommen mit Xcode)
    Editor nach Wahl muss vorhanden sein
  • Man muss dem iOS Entwicklerprogramm beitreten um ein Zertifikat zum signieren der Anwendung zu erhalten.
    Ein iOS Gerät zum testen, wenn man dies möchte
• für Android:
  • Für Android development muss man dem Google Play Programm beitreten.
  • Man benötigt ein für die Entwicklung konfiguriertes Android Gerät.

Getting Started

1. RubyMotion downloaden und installieren ( http://www.rubymotion.com/ )
   RubyMotion installiert sich dabei selbst in „/Library/RubyMotion“
2. Falls notwendig RubyMotion updaten. Die Version lässt sich mit dem folgenden Befehl kontrollieren: $ motion –version
   Ein Update kann man mit dem folgendem Befehl durchführen: $ sudo motion update
3. Mit folgendem Befehl kann ein neues RubyMotion Projekt erstellt werden: $ motion create Projektname.
4. Im app-Directory befindet sich nun der Application Code. Das resource-Directory beinhaltet die resource Files, wie zum Beispiel Bilder, Icons oder Soundfiles. Das spec-Directory beinhaltet specification/test Files.
5. Rake ist das Ruby build Programm. Mit dem Befehl $ rake erfolgt ein build und das Programm wird im Simulator gestartet. Hier müsste jetzt nur ein leeres, schwarzes Fenster zu sehen sein, da noch kein Code geschrieben wurde.
6. Will man die App nun auf dem eigenen Gerät testen, sollte dieses über USB verbunden werden und der Befehl $ rake device über das Terminal eingegeben werden.
7. Im app-Directory befindet sich standardmäßig ein File namens „app_delegate.rb“, welches die Klasse AppDelegate implementiert. Diese ist bei der Entwicklung einer iOS App verantwortlich für die Steuerung der Applikation. Hier können ab jetzt die ersten Codezeilen geschrieben werden.

Beispiele für RubyMotion Apps

37signals’s Basecamp for iPhone
the Bandcamp iPhone app
A Dark Room for iOS

The post RubyMotion appeared first on Mobile USTP MKL.

17 Quizzes ist ein abwechslungsreiches, als responsive Web App entwickeltes Quiz. Ziel des Spiels ist es alle 17 Quizzes zu lösen und sich damit einen Platz in der Hall of Fame zu sichern.

Bei vielen bekannten Rätsel-Apps steht der User vor Herausforderungen wie Sudokus zu lösen, Logos zu erraten, Scrabble Aufgaben zu bewältigen, Quiz Fragen zu beantworten oder Gemeinsamkeiten aus Bildern zu erkennen. 17 Quizzes bietet mehr. Es ist nicht nur eine Kombination aus all diesen Rätselaufgaben, sondern regt den User dazu an, selbst zu recherchieren, Bilder zu bearbeiten, Codes zu entschlüsseln, Zahlenreihen zu vervollständigen und vieles mehr. Dieses Rätsel bietet Abwechslung pur und stellt den User vor viele neue Herausforderungen, denn der Eintritt in die Hall of Fame will verdient sein.

Hier der Link zum Spiel: http://dm171555.students.fhstp.ac.at/17quizzes/

 

Wie funktioniert das Spiel?

Das Spiel besteht aus 17 Levels. Um das nächste Level zu erreichen, muss der User ein Lösungswort eingeben. In jedem Level sieht man ein Bild, welches einen Hinweis auf das jeweilige Lösungswort gibt. Stimmt die Antwort, erreicht der Spieler das nächste Level. Stimmt die Antwort nicht: Bezahlt man mit einem Leben. Jeder User hat maximal 5 Leben, danach muss er von vorne beginnen. Dadurch wird er mehr zum recherchieren und zum überlegen angehalten. Mit einem Klick auf das Bild erhält der Spieler zusätzliche, kleine Hilfestellungen.

Die Spielregeln

• Gehe von einem Level zum Nächsten.
• Sieh dir die Bilder immer ganz genau an.
• Überlege, was die Antwort sein könnte. Manchmal musst du dafür etwas um die Ecke denken.
• Um alle Levels erfolgreich zu bestreiten, wird es auch etwas Recherche benötigen. Das bedeutet googeln ist erlaubt und auch erwünscht

Technologien

Das Frontend des Spiels wurde mit HTML, CSS, Bootstrap und jQuery umgesetzt. jQuery wurde für kleine Animationen (wie in der Navigation ersichtlich) verwendet. Das Backend bzw. die Logik des Spiels wurde mit PHP umgesetzt. Die jeweiligen Lösungswörter, Hilfestellungen, sowie die Namen der Mitglieder in der Hall of Fame wurden in einer MySQL Datenbank gespeichert. Bei jeder Eingabe des Lösungswortes wird dieses mit dem Lösungswort aus der Datenbank verglichen. Dadurch sind die Lösungswörter nicht im Quelltext ersichtlich.

Zukunft

Es kommen neue Quizzes. Im Umfang des Print-to-mobile Projektes gab es 17 Quizzes. Derzeit kommen als “17-Quizzes Advanced” nochmals 17 neue Levels dazu. Geplant sind auch noch “17 Quizzes ++”, allerdings erst, wenn die ersten User die “17 Quizzes Advanced” erfolgreich absolviert haben. Eine Möglichkeit das Spiel zu erweitern ist ein Backend mit der Funktion neue Quizzes anzulegen und einen nativem Kamerazugriff zu integrieren. Ein nächster Ansatz für die Zukunft wäre, die Rätsel gemeinsam oder um die Wette zu lösen bzw. eigene Rätsel zu erstellen und diese mit Freunden zu teilen. Wer sich mehr für das Projekt und die Entwicklung interessiert, sollte in nächster Zeit wieder auf mfg.fhstp.ac.at vorbei schauen.

The post „Print-to-Mobile“ – 17 Quizzes appeared first on Mobile USTP MKL.

In unserem Tutorial wollen wir folgenden Zeitungsartikel aus der Tageszeitung “Die Presse” als AMP-Seite nachbauen und erweitern:

Folgendes Markup bietet eine gute Ausgangsbasis dafür. Das in diesem Workshop verwendete Bildmaterial kann frei gewählt werden. 

Wie wir sehen, ähnelt der Seitenaufbau sehr einer herkömmlichen HTML-Struktur. Der Code beinhaltet aber auch schon viel zusätzlichen AMP-Code.

Allgemeines zum Startcode

AMP-Seiten müssen:

• mit dem Doctype <!doctype html> initialisiert werden.
• einen <body> und einen <head> haben.
• mit folgendem HTML-Tag initialisiert werden: <html lang = “de“> oder <html amp lang = “de“>.
• eine Verlinkung auf eine alternative HTML-Seite haben: <link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”> Das ist vor allem für die Suchmaschinenoptimierung relevant.
• einen Verweis auf die AMP-Library beinhalten: <script async src=”https://cdn.ampproject.org/v0.js”> </script>
• den Meta-Tag <meta charset=“utf8“> für die Zeichenkodierung beinhalten.
• folgende Viewport-Definition aufweisen: <meta name=“viewport“ content = “width=device-with, minimum-scale=1“>
• den AMP-Boilerplate-Code implementieren. Dieser CSS-Information soll die Seite so lange ausblenden, bis sie vollständig gerendert ist. Das führt zu einer besseren Leistungsmetrik.

Unser Startcode beinhaltet auch eine Reihe JavaScript-Snippets die wir später für das Implementieren diverser Features brauchen. Ebenso haben wir auch schon ein <header>-Tag samt Home-Button der als <amp-img>-Element eingebunden wurde.

Im Tag <script type=“application/ld+json“> befinden sich Metadaten für die verschiedensten Inhalte. Zu den relevanten Eigenschaften gehören hier vor allem das Veröffentlichungsdatum, der Name des Autors, der Titel, der Nachrichtentyp uvm.

Bevor wir jetzt aber richtig loslegen, werfen wir noch einen Blick in die AMP-Referenz: https://www.ampproject.org/docs/reference/spec#html-tags

Jene Tabelle zeigt uns eine Liste von „erlaubten“ HTML-Tags und das dazugehörige AMP-Äquivalent. Wir sehen hier, dass die AMP-Spezifikation im Vergleich zum HTML-Standard relativ „schlank“ ist und auf das nötigste heruntergebrochen wurde.

Let’s amplify

Wir wollen nun unseren AMP-Artikel schrittweise mit AMP-Features erweitern, sodass wir am Ende unserer Session eine schicke Seite haben.

Bild einbinden

<amp-img src="Rekruten.jpg" alt="Rekruten" height="250" width="400" layout=responsive> </amp-img>

Die Definition von Höhe und Breite ist zwingend erforderlich. Das Attribut layout mit dem Wert responsive gewährleistet dass sich das Bild an die Bildschirmgröße anpasst.

Einbinden von Social Share Buttons

Die AMP-Komponente “Social Share” kann“Teilen-Buttons” für verschiedene soziale Netzwerke anzeigen. Als erstes benötigen wir dafür folgendes Script, welches bereits im Header eingebunden sein sollte:

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

In unserem Fall erstellen wir “Teilen-Buttons” für die Netzwerke Facebook, Twitter und Tumblr sowie einen Button der den Artikel per E-Mail weiterleitet.

<amp-social-share type="facebook"> </amp-social-share>
  <amp-social-share type="twitter"> </amp-social-share>
  <amp-social-share type="tumblr"> </amp-social-share>
  <amp-social-share type="email">
  data-param-subject="Die Presse - News"
</amp-social-share>

Bilder Karusell

Ein weiteres beliebtes Feature von Google-AMP ist das Bilderkarusell. Auch hierfür ist bereits ein Script im Head-Tag eingebunden.

<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

Im zweiten Schritt platzieren wir die Komponente mit dem Tag <amp-carousel> und befüllen dieses mit Bilder in Form eines <amp-img>-Tag.

<amp-carousel layout="responsive" width="300" height="168" type="slides" autoplay delay="3000" loop>
  <amp-img src="grundwehrdiener.jpg" width="300" height="168" layout = "responsive"></amp-img>
  <amp-img src="erstehilfe.jpg" width="300" height="168" layout = "responsive"></amp-img>
  <amp-img src="angelobung.jpg" width="300" height="168" layout = "responsive"></amp-img>
</amp-carousel>

Youtube-Video

Die AMP-Youtube-Komponente (amp-youtube) lädt ein Video aus dem Source-Attribut (src).

Erforderliches Script: <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

Die Option “layout=responsive” lässt Videos im Seitenverhältnis 16:9 erscheinen. Mit der Video-ID lassen sich Youtubevideos verknüpfen. Die jeweilige ID befindet sich immer am Ende der jeweiligen URL.

<amp-youtube
  data-videoid="Wvz5nsLaAUw"
  layout="responsive"
  width="480" height="270">
</amp-youtube>

“Time-ago”

Als nächstes wollen wir unter der Schlagzeile einen Zeitstempel einbauen.  Hierfür bedienen wir uns vorerst folgendem Script:

<script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>

<amp-timeago layout="fixed" width="160"
  height="20"
  datetime="2017-11-01"
  locale="de">
</amp-timeago>

Fixedblock

Mit Fixedblock verwendet man für große Texte z.B. für Werbezwecke. Es skaliert die maximale Schriftgröße in einem bestimmten Element.

<div class="fixedblock">
  <amp-fit-text width="200"
  height="100"
  layout="responsive"> 
</amp-fit-text>Mach auch du Karriere beim Heer!</div>

Iframe für multimediale Inhalte

Mögliche Parameter für diesen Tag sind: place, directions, search, view und streetview. “q” legt den auf der Karte hervorzuhebenden Ort fest. Für eine fehlerfreie Anzeige wird auch ein Google API-Key benötigt.

 <amp-iframe width="600"
  title="Google map pin auf Fliegerhorst Vogle Kaserne, Hoersching"
  height="400"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://www.google.com/maps/embed/v1/search?key=AIzaSyCx3D2NA_aMdzIWi7zN2DyAK0RE0HTow3o&q=Fliegerhorst+Vogler,Hoersching">
</amp-iframe>

Formular einbinden

Eine AMP-Form führt immer eine Action aus, ausgelöst durch Submit und implementiert folgende Parameter als Events: Submit, submit-sucess, submit-error, valid, invalid;
ACTION-XHR schickt beim Submitten des Formulares einen AJAX-Request. In unserem Fall erstellen wir aber der Einfachheit lediglich eine Formular-Atrappe, die nach dem Absenden einen Fehler ausgibt.

 <form name ="submit" method="post" action-xhr="https://example.com/example" target="_blank">
 <fieldset>
 <label>
 <span>Vorname:</span>
 <input type="text" name="vname" required>
 </label>
 <br>
 <label>
 <span>Nachname:</span>
 <input type="text" name="nname" required>
 </label>
 <br>
 <label>
 <span>Email:</span>
 <input type="email" name="email" required>
 </label>
 <br>
 <input type="submit"
 value="Mehr Informationen anfordern">
 </fieldset>
 <!-- Dieser Text erscheint nach erfolgreichem Submitten-->
 <div submit-success>
 Ein E-Mail mit Informationen wurde erfolgreich gesendet!
 </div>
 <!-- Dieser Text erscheint wenn das Submit nicht erfolgreich war-->
 <div submit-error>
 Ein E-Mail mit Informationen konnte leider nicht gesendet werden!
 </div>
 </form>

Amp Embed

Taboola ist ein Tool um mehr Traffic auf der Seite zu generieren.

<amp-embed type="taboola"
 width="400"
 height="300"
 layout="responsive"
 data-publisher="amp-demo"
 data-mode="thumbnails-a"
 data-placement="Ads Example"
 data-article="auto">
</amp-embed>

Das Endresultat

Weiterführende Informationen:

https://www.ampproject.org

Datenschutzhinweise

Urheber des Zeitungartikels der hier im Beispiel verwendet wird, ist die Tageszeitung diePresse.

The post „Hands on“ – AMP-Workshop für Neueinsteiger appeared first on Mobile USTP MKL.