Projektarbeit WS 16/17 von Nikolas Braun - 176691 Robert Dieterle - 176700 Kevin Jensen - 176718 Alexandra Prokofyeva - 176767 Noelle Reichert - 176768 Inhaltsverzeichnis
1. Einführung 4 3.2 Typografie 27 5. Karl-Drais-Tour 50 6.2 Grundlagen 69 1.1 Aufgabenstellung 6 3.3 Farbgebung 28 5.1 Beschreibung 52 6.3 Herangehensweise 77 1.2 Mission 8 3.4 Erste Entwürfe 29 5.2 Mannheimer Schloss 54 6.4 Testen der App 79 1.3 Werte 10 3.5 Mock-Ups / Smartphone 31 5.3 Wohnhaus in M1, 8W 55 7. Finaler Stand 80 1.4 Team 12 5.4 Schlossgarten 56 3.6 Mock-Ups / Tablet 35 7.1 Finaler Funktionsumfang 82 1.5 Aufgabenverteilung 13 5.5 Neckarauer Übergang 57 4. Screenbook 40 7.2 Smartphone-Version 84 1.6 Zeitplan 15 5.6 Casterfeldstraße 58 4.1 Flowchart 42 7.3 Tablet-Version 89 5.7 Drais-Denkmal Karlsplatz 59 2. Analyse 16 4.2 Navigation 43 8. Ausblick 94 2.1 Konkurrenzanalyse 18 5.8 SAP Arena 60 4.3 Erlebnisradwege 44 8.1 Zukunft von "biketrip.bw" 96 2.2 Nutzungsszenario 20 5.9 Technoseum 61 4.4 Suche 45 8.2 Fazit 97 5.10 Wasserturm 62 2.3 Zielgruppe 22 4.5 Routenplaner 46 9. Anhang 98 5.11 Benzdenkmal 63 2.4 Social Media-Einbindung 23 4.6 Offline-Karten 47 9.1 Konkurrenzanalyse 100 4.7 Pannentipps 48 6. Programmierung 64 3. Design 24 9.2 Literaturverzeichnis 128 3.1 Logo 26 4.8 Impressum 49 6.1 Anforderungen 66 9.3 Bildverzeichnis 129
2 / 131 3 / 131 1. Einführung 1.1 Aufgabenstellung
1.2 Mission
1.3 Werte
1.4 Team
1.5 Aufgabenverteilung
1.6 Zeitplan 1.1 Aufgabenstellung
Der Titel der Aufgabenstellung un- Das Thema, was biketrip.bw den serer Projektarbeit lautet Konzepti- Nutzern näherbringen soll, ist es, die on und Entwicklung einer Web-App Freude am Radfahren wiederzufin- im Bereich Edutainment zum Thema den. Auf diese Idee kamen wir durch „200 Jahre Fahrrad“. unseren Betreuer Prof. Riempp, der den Wettbewerb „200 Jahre Fahr- Basis unseres Projektes ist es, eine rad-Jubiläum“ des Landes Baden moderne App zu entwickeln, welche -Württemberg entdeckte. durch geschickten und gezielten Me- dieneinsatz Menschen ein bestimm- Anders als beim Autofahren berei- tes Thema näher bringt. Das Ziel tet das Fahren an sich den meisten dabei ist, dass Nutzer Neues lernen Menschen nicht genügend Anreiz, ohne dass es ihnen bewusst wird, um häufiger Rad zu fahren. Um ge- da ihnen die Nutzung der App so viel rade diesen Menschen einen Mehr- Spaß bereitet. Ein weiteres Kernele- wert beim Fahren zu bieten, der ment unserer App ist der innovative nicht im reinen Ankommen an einem Programmieransatz einer Web-App. definierten Ziel liegt, haben wir uns Ziel dieses Ansatzes ist es eine App Gedanken darüber gemacht wie man zu erstellen, welche für iOS- und so eine Fahrt spannender gestalten Android-Smartphone gleicherma- könnte. Hieraus entstand die Idee ßen nutzbar ist. Somit möchten wir einer interaktiven Radtour in Form in unserer Projektarbeit ebenfalls unserer Edutainment App. die Frage klären wie schwer es ist eine Web-App umzusetzen und ob die Nutzung auf diversen Endgerä- ten reibungslos funktioniert oder der Ansatz noch nicht gänzlich ausge- reift ist.
6 / 131 1.2 Mission
Der Anfang zu einer guten Idee ist entfachen. Mithilfe unserer App "bi- stets eine gute Frage. ketrip.bw" kann man sich durch diese Touren navigieren lassen. „Wie können wir Menschen für das Fahrradfahren begeistern, wo sie Geplant ist zunächst eine Strecke, doch mit dem Auto viel schneller die dem 200-jährigen Geburtstag ankommen und ohnehin via Internet des Fahrrades gewidmet ist. Auf der ihre Stadt von der Couch aus be- Fährte von Karl Drais können unse- trachten können?“ re Nutzer den Spuren, die das erste Fahrrad hinterließ, folgen. Wer sich Da die reine Beförderung für die dieser Tour widmet, entdeckt vie- Meisten keinen ausreichenden Anreiz le interessante Fakten über die Ge- zum Radfahren bietet, möchten wir schichte des Fahrrades. Motivation durch spannende Touren
Wenn man bestimmte Punkte auf Hierbei denken wir an Touren mit Re- der Karte erreicht, bietet die App staurantführern, welche gleichzeitig die Möglichkeit, in die Geschichte die Gastronomie stärken, spezielle einzutauchen. Mit Hilfe von Texten, Touren für Sportler oder für gemütli- Videos, kurzen Hörspielen und Ani- che Sonntagsausflüge. mationen lassen wir Geschichte le- Um das Nutzungserlebnis zu stei- bendig werden. gern, haben Anwender die Möglich- keit, Strecken zu bewerten und zu Basis unserer Idee ist, dass durch kommentieren. weitere Strecken der Tourismus in verschiedenen Regionen Ba- Zudem wäre es möglich die App zu den-Württembergs gestärkt werden erweitern, sodass Städte und Ge- kann. Neben Radtouristen sollen meinden aber auch Fahrradvereine auch einheimische Nutzer von der eigene Strecken selbstständig anle- Web-App Gebrauch machen können. gen und mit Anderen teilen können.
8 / 131 9 / 131 1.3 Werte Innovation bedeutet Sichtbarkeit bedeutet Einmaligkeit Aufmerksamkeit
Nach langen Recherchen rund um Mit "biketrip.bw" wecken wir den das Thema Rad und App haben wir Wunsch, selbst auf Entdeckungs- Vieles gefunden, vor allem Fitness- reise mit dem Rad zu gehen. Gera- tracker und Standard-Radtouren. de im regionalen Bereich lässt sich Wir wollen mit unseren ansprechend "biketrip.bw" sehr gut mit städtischer aufbereiteten Touren jedoch etwas oder gastronomischer Werbung ver- Neues bieten, etwas, dass das Inte- binden und bietet so das Potential resse und die Freude am Radfahren für mediale Aufmerksamkeit. unterstützt, sowohl für Android- asl auch iO-Nutzer Eine interaktiv ge- Diese Beachtung kann genutzt wer- führte Tour, bei welcher man Orte den, um Menschen für das Fahrrad aus der Region auf spannende Weise zu begeistern und damit sie das Auto entdeckt, ist einzigartig. stehen lassen und sich selbst und der Natur etwas Gutes tun. Aktivierungspotetial bedeutet Begeisterung Qualität bedeutet Präzision Begeisterung entsteht, wenn man beginnt zu träumen. Die von uns ge- Da wir selbst viel Begeisterung für plante App nutzt die Chancen, die unsere Idee empfinden und von ihr uns neue Medien für die Tourismus- überzeugt sind, ist diese Skizze nur branche, insbesondere in ländlichen der Beginn einer ausgefeilten Pla- Regionen, bieten. Der Traum von nungsphase. In dieser Phase werden mehr Tourismus und Fahrradbegeis- alle Details exakt definiert und vor terung beginnt mit "biketrip.bw". allem Wert auf eine hohe Benutzer- freundlichkeit gelegt. Nachhaltigkeit bedeutet Wachstumschancen
"biketrip.bw" schafft eine Grundla- ge mit Wachstumspotential. Da vie- le Radstrecken bereits bekannt und von Städten und Gemeinden durch- dacht und angelegt sind, besteht die Möglichkeit, dass "biketrip.bw" schnell wächst. Dadurch können diese Strecken integriert und aufbe- reitet werden. 10 / 131 11 / 131 1.4 Team 1.5 Aufgabenverteilung
Am Projekt wird ein Team aus ins- mischen Mitarbeiter B. Sc. Fabian Nikolas Braun Zusätzliche Mithilfe bei: gesamt fünf Studenten der Hoch- Fakir fachlich betreut. schule für Technik, Wirtschaft und Hauptaufgabe: - Entwurf des Logos Medien Offenburg arbeiten: Nikolas Im Laufe unseres Studiums hat sich Braun, Robert Dieterle, Kevin Jen- jeder von uns auf einen bestimmten - Produktion und Schnitt des Teasers - Anfertigung erster MockUps sen, Alexandra Prokofyeva und Noel- Bereich spezialisiert, weshalb wir die le Reichert. großen Aufgaben wie Programmie- - Animationsfilm zum Denkmal am - Texte für die Dokumentation ver- rung, Gestaltung sowie Inhaltsbe- Karlsplatz fasst Wir befinden uns momentan im sieb- schaffung und -erstellung unterein- ten Semester der Fakultät Medien ander aufteilen werden. - Produktion Hörspiele und Informationswesen. Da wir "bi- ketrip.bw“ im Rahmen unserer Pro- Da wie uns für neue Medien sowie - Redaktionelle Aufbereitung der Kevin Jensen jektarbeit realisieren möchten, wer- clevere und zukunftsweisende Um- Pannentipps den wir von Prof. Dr. Dipl.-Ing. (FH) setzungen interessieren, freuen wir Hauptaufgabe: Roland Riempp und seinem akade- uns auf das Projekt. Zusätzliche Mithilfe bei: - 3D-Modell - Texte für die Dokumentation ver- fasst - Animationsfilm zum Schloss
- Scribbles angefertigt - Produktion Hörspiele
Zusätzliche Mithilfe bei:
- Dreharbeiten in Mannheim Robert Dieterle - Texte für die Dokumentation ver- Hauptaufgabe: fasst
- Komplette Programmierung der App mit Ionic 2 Alexandra Prokofyeva - Recherche zu „Programmierung webtechnikbasierter Anwendungen“ Hauptaufgabe:
- Recherche zu „Standards und - Regisseur Hörbeiträge ‚bestpractices’ bei der App-Ent- wicklung“ - Texte für die Checkpoints verfasst - Test der App auf mehreren Endge- räten und Simulatoren - Texte für Sprecher aufbereitet
12 / 131 13 / 131 1.6 Zeitplan
Zusätzliche Mithilfe bei: Zu Beginn unseres Projektes stellten Mock-Ups, welche der Programmie- wir einen Zeitplan auf, um sicher ge- rung als Vorlage dienten. Ebenso er- - Mock-Ups: erste Version für die hen zu können, dass unser Projekt arbeiteten wir Drehbücher für den Tablet-Ansicht erstellt rechtzeitig fertig wird. Für das ge- Teaser und den Content der Rad- - samte Projekt haben wir im Rahmen tour. Im November begannen wir Scribbles zum Logo unserer Projektarbeit dreieinhalb auch mit der Programmierung, zu- Monate Zeit. nächst mit dem groben Gerüst, um - Hörbeiträge: Aufnahme und dann ins Detail zu gehen, sobald die Nachbearbeitung Für die Phase der Recherche und Mock-Ups fertig waren. Analyse planten wir die letzten bei- - Texte für die Doku verfasst + kor- den Oktoberwochen ein. Der Wettbe- Insgesamt sieben Wochen nutzten rekturgelesen werb „200 Jahre Fahrrad“ des Lan- wir für die Erstellung der Inhalte für des Baden-Württemberg, bei dem unsere App. Die meiste Zeit wurde - allgemeine Recherche zu Beginn wir mitgemacht haben, hatte einen hierbei für die Erstellung des Teasers, der Arbeit Einsendeschluss Mitte Oktober. Aus des 3D-Modell, der Hörbücher und diesem Grund hatten wir bereits in der Animationen genutzt. Die Pro- unseren Semesterferien begonnen grammierung verlief parallel durch zum Thema Fahrrad und nach einer die Aufteilung unseres Teams. Noelle Reichert möglichen Route zu recherchieren. Für die Planungsphase nutzten wir Im Januar schließlich wurde der Zie- Hauptaufgabe: die ersten drei Wochen im Novem- leinlauf eingeplant. Die App musste ber. Hier begannen wir mit Scrib- natürlich ausgiebig getestet und die - Projektorganisation bles und endeten bei ausgefeilten Fehler behoben werden.
- Projektdokumentation
- Erstellung Mock-Ups / Design
- Galerie für den Content
Zusätzliche Mithilfe bei:
- Logo final umgesetzt
- Texte und Bildmaterial für Doku- mentation erstellt
- Unterstützt beim Teaservideo
- Aushilfe bei der Programmierung (CSS)
14 / 131 15 / 131 2. Analyse 2.1 Konkurrenzanalyse
2.2 Nutzungsszenario
2.3 Zielgruppe
2.4 Social Media-Einbindung 2.1 Konkurrenzanalyse
Um unsere App so spezifisch wie nigen Konkurrenzapps gefehlt hat. bekannten Gebiet ist dies sehr pro- allerdings ständig abstürzt, war es möglich zu machen, haben wir uns So haben wir uns auch dafür ent- blematisch. Somit war klar, dass es nicht möglich diese anzusehen. Wir am Anfang unserer Konzeption nach schieden, zusätzlich zur Routenbe- bei "biketrip.bw" möglich sein soll- haben festgestellt, dass einige Apps Konkurrenzprodukten umgeschaut. schreibung die Streckenlänge und te, Karten und Routen offline abspei- zwar Medien eingesetzt haben, diese Fünf davon haben wir genauer un- den Schwierigkeitsgrad anzugeben. chern und nutzen zu können, ohne aber zum größten Teil in einer sehr ter die Lupe genommen: RADRou- Einige Apps hatten zusätzlich die das Datenvolumen aufbrauchen zu schlechten Qualität waren. Meis- tenplaner Baden-Württemberg, Funktion, Routen über die sozialen müssen. Zudem sollte der Nutzer sei- tens hat es sich lediglich um Bilder Bayernnetz für Radler, komoot, out- Medien zu teilen und zu kommentie- ne Route auf dem Tablet zusammen- gehandelt. Wir aber möchten dem dooractive und bikemap. Es wurden ren. Auch diese Idee haben wir für stellen und sie auf sein Smartphone Nutzer eine Vielfalt an verschiedenen Kriterien aus den Bereichen Bedie- unser Konzept übernommen. Aller- übertragen können. Damit wird ver- Medien in bester Qualität bieten, wie nung, Funktionen, Datenschutz und dings werden wir sie im Rahmen der hindert, dass man unterwegs zu viel Animationen, 3D-Modelle oder Videos. Design bewertet. Anschließend wur- Projektarbeit nicht realisieren. Datenvolumen beim Herunterladen den besonders positive und negati- vom Datenpaket der Route verwen- Bei einigen Konkurrenzprodukten ve Punkte herausgefiltert. Anhand Was viele Apps bei vorgefertigten det. Da für diese Funktionen jedoch gab es sichtbare Mängel beim Da- einer Analyse dieser Punkte haben Routen angeboten haben, war ein ein enormer Programmieraufwand tenschutz. Es wurden persönliche wir schließlich für uns entschieden, akustisches Signal, das den Nut- mit Integrierung einer Datenbank nö- Daten abgefragt bzw. um Erlaubnis welche gelungenen Funktionen wir zer beim Abkommen von der Route tig ist, ist dies lediglich eine Kann-An- gebeten, persönliche Daten nutzen übernehmen bzw. besser machen warnt. Da man beim Fahrradfahren forderung unserer App, welche wir im zu dürfen. Dabei wurde weder er- möchten und welche Fehler wir ver- nicht ständig auf das Handy schaut Laufe der Projektarbeit voraussicht- klärt, wofür die Daten genutzt wer- meiden sollten. und es somit passieren kann, da bi- lich nicht implementieren werden. den oder ob diese an Dritte weiter- ketrip.bw jedoch eher Geo-Caching gegeben werden, noch konnte man Aus der Analyse ging hervor, dass als Navigation bietet haben wir ein Was einige der Apps geboten ha- als Nutzer selber entscheiden, wofür wir uns vor allem mit dem Design solches Signal nicht vorgesehen. Le- ben, war die Möglichkeit, sich bei- die eigenen Daten verwendet wer- beschäftigen müssen. Es sollte diglich wenn man in die Nähe eines spielsweise Gaststätten in der Nähe den können. Negativ fanden wir bei schlicht und modern sein. Die Icons Checkpoints kommt wird man akus- anzeigen zu lassen. Daher kam die einer der Apps, dass man sich unbe- und sonstige Symbole müssten in tisch darauf hingewiesen. Aus selbi- Überlegung, dies auch bei "biketrip. dingt anmelden musste, um die App einer dem Format entsprechenden gem Grund haben wir uns auch be- bw" einzubauen, damit der Nutzer nutzen zu können. Man hatte zudem Größe gestaltet werden und selbst- wusst gegen eine sich automatisch eine Übersicht an Lokalen auf seiner nicht die Möglichkeit, sich die voll- erklärend sein. Zudem sollte die App aktivierende Sprachausgabe ent- Strecke hat. ständige Liste aller Routen anzuse- leicht und intuitiv bedienbar sein, schieden, die man von einem Navi- hen. Erst wenn man 30 Euro zahlt, damit auch Jemand, der sich eher gationsgerät kennt. Keine der anfangs genannten Apps wird diese freigeschaltet. Dies ist wenig mit Applikationen auskennt, verfügt über die Funktion, an einzel- wohl das Erlösmodell der App, wir keine Schwierigkeiten hat. Ein wichtiger Punkt für uns war die nen Stationen der Route Medienin- fänden ein auf Werbung basieren- Offline-Funktion, die wir nicht bei halte anzusehen. Genau das macht des Modell, bei welchem man zum Zudem war uns wichtig, dass der allen Apps, die wir analysiert haben, "biketrip.bw" einzigartig, weshalb wir Beispiel für das Abschalten der Wer- Nutzer die Möglichkeit hat, eigene gefunden haben. Es war nicht mög- den Schwerpunkt der Projektarbeit bung zahlt für biketrip.bw besser. Strecken zu kreieren aber auch, dass lich, eine Route im Offline-Modus zu auf eben diesen Punkt legen. Bei ei- Denn so ist gezwungen Geld bezah- man eine Auswahl aus vorgefertigten fahren. Dies führt aber dazu, dass ner der analysierten App sollte der len zu müssen, um "biketrip.bw" un- Strecken bekommt. Diese müssten der Akku und die mobilen Daten des Nutzer eigentlich die Möglichkeit ha- eingeschränkt nutzen zu können. eine informative und ansprechende Nutzers schnell aufgebraucht sind. ben, sich sogenannte „pointsofinte- Beschreibung haben, was uns bei ei- Bei längeren Strecken in einem un- rest“ anzeigen zu lassen. Da die App (Fragebögen siehe Anhang)
19 / 131 2.2 Nutzungsszenario
Nutzer werden durch Anzeigen in Die Planungsphase kann sowohl am Form vom Clips unserer interakti- Tablett als auch am Smartphone des ven Erlebnistouren in Social Media Nutzers geschehen, je nach dessen Kanälen auf unsere App aufmerk- Vorliebe. Es bietet sich für den Nut- sam. Sollte man die Anzeige an ei- zer ebenfalls die Möglichkeit eine ei- nem mobiles Gerät sehen, verlinken gene Tour zusammenzustellen. Die- die Clips direkt auf den App-Store. se Funktion ist ebenfalls auf beiden Wenn man sie allerdings an einem Geräten möglich. Desktop sieht, gelangt man auf eine Landingpage, die durch atemberau- Sobald sich der Nutzer für eine Tour bende Videos und spannende Infor- entschieden hat, kann er am Smart- mationen noch mehr Lust auf unsere phone die interaktive Tour mit allen App macht. Inhalten, welche er an den Check- points konsumieren kann, herunter- Nachdem der Nutzer unsere App in- laden. Dies gewährleistet, dass er stalliert hat, beginnt die Planungs- die Inhalte in guter Qualität erhält, phase zu Hause. Zunächst kann er auch wenn unterwegs mal schlech- schauen welche Touren es gibt und ter Empfang ist. Gleichzeitig wird was ihn interessieren würde. Falls das Datenvolumen nicht belastet. er konkretere Ziele verfolgt, kann er mit Hilfe der Suchfunktion die Tou- Wenn die Strecke heruntergeladen wurde, zeigt die App den Startpunkt eine Meldung, zum anderen vibriert ren filtern. Es ist möglich anzugeben wurde, wird der Nutzer gebeten, sich der Tour an. Idealerweise befindet das Smartphone. Am Checkpoint an- welche Streckenlänge man fahren vor Antritt der Fahrt die Checkliste sich der Nutzer bereits an diesem gelant, kann er durch diverse Medi- möchte und wo die Strecke ungefähr für Reparaturhilfsmittel anzusehen. Punkt, da der Startpunkt bei der Be- en spannende und ausdrucksstarke liegen soll. Ebenso kann der Nutzer schreibung angegeben wird. Eindrücke erlangen. auswählen wie lange die Tour unge- Um die Fahrt zu beginnen, drückt fähr dauert und welchen Schwierig- der Nutzer auf den Button „Navi- Während der Tour wird das Smartpho- Wenn der Nutzer die Tour beendet keitsgrad sie haben soll. gation“.Nun bekommt er eine Liste ne je nach belieben entweder in eine hat, wird er per Pop-Up gebeten die angezeigt, die alle seine herunter- Halterung am Lenker angebracht oder Tour zu bewerten und einen Kom- Wenn er eine Tour gefunden hat, geladenen Erlebnistouren sowie die in die Jackentasche gesteckt. Wenn es mentar zu hinterlassen. Wenn er die ihm zusagt, kann er sich die Be- selbstständig eingepflegten Rou- am Lenker befestigt ist, kann man die möchte, kann er die Tour auch via schreibung durchlesen und sich da- ten beinhaltet. Nachdem er die ge- Navigation auf dem Display verfolgen. Social Media teilen. rüber informieren, welche Check- wünschte Route ausgewählt hat, Ansonsten wird der Nutzer wie ge- points es gibt. Damit die Lust auf die öffnet sich ein Auswahlfenster. Hier wünscht über akustische Signale ge- Tour gesteigert wird, gibt es bei jeder kann der Nutzer definieren, ob er lotst. Tour einen Teaser oder eine Galerie durch Vibration oder Ton auf die mit ausdrucksstarken Bildern. Auch Checkpoints aufmerksam gemacht Sobald man sich in einer Entfernung kann sich der Nutzer Kommentare werden möchte. Zudem wird er da- von 50m vom nächsten Checkpoint anderer User durchlesen, welche die rauf hingewiesen während der Fahrt entfernt, erhält der Nutzer eine visu- Tour bereits gefahren sind und sie auf den Verkehr zu achten. Nachdem elle sowie taktile Benachrichtigung. bewertet haben. die Auswahl getroffen und bestätigt Zum einen erscheint auf dem Display
20 / 131 21 / 131 2.3 Zielgruppe 2.4 Social Media-Einbindung
Bei der Definition der Zielgruppe Social Media ist ein elementares von dieser Thesis ist geplant, dass beschränken wir uns nicht nur auf Werkzeug des heutigen Marketings. man jegliche Routen via Social Media soziodemografische Merkmale, son- Aus diesem Grund spielt es natürlich mit Freunden teilen kann und gleich- dern wollen ebenfalls psychografi- auch für unsere App eine wichtige zeitig die beste Werbung für "bike- sche Merkmale in Betracht ziehen. Rolle. Um "biketrip.bw" nach einem trip.bw" macht, die es gibt. Es gibt möglichen Livegang publik zu ma- nichts besseres, um die Bekanntheit Die größte Einschränkung stellt die chen, möchten wir verschiedene So- zu steigern, als positives Nutzerfee- Begrenzung des geografischen -Ge cial Media-Kanäle nutzen. Da unsere dback. bietes dar, da die App zum jetzi- Zielgruppe hauptsächlich aus jungen gen Zeitpunkt ausschließlich Touren Menschen besteht, können wir die- Als mögliche Kanäle haben wir uns in Baden-Württemberg beinhaltet. se hier gezielt ansprechen und ent- für Facebook und Instagram ent- Des Weiteren wird unsere Zielgrup- sprechende Werbung schalten. schieden, da beide Kanäle viel Wert pe nicht durch ein bestimmtes Ge- auf Bilder und Kommunikation der schlecht definiert, ist jedoch haupt- Social Media bieten aber noch weite- Nutzer legen. Hierdurch können Nut- sächlich für eine Zielguppe zwischen re Aspekte, die wir für "biketrip.bw" zer Bilder, welche sie ohnehin geteilt 18 und 35 Jahren ausgelegt. nutzen möchten. Nur durch Interak- hätten, ganz einfach mit dem Hash- tivität und Kommunikation schaffen tag „#biketrip.bw“ versehen und auf Da sich der Radsport jedoch auch wir es unsere User dauerhaft für un- unseren Auftritt verlinken. unter Senioren großer Beliebtheit sere App zu begeistern. Ausgehend erfreut, wollen wir diese in unseren Überlegungen nicht gänzlich aus- schließen.
Unsere Zielgruppe wird durch sport- begeisterte und körperbewusste Menschen charakterisiert. Da nahe- zu jeder Mensch, unabhängig seines Einkommens, ein Fahrrad besitzt, le- gen wir hierauf keinen Wert. Da un- sere App kostenlos sein wird, kann sie sich jeder leisten. Um uns von der Konkurrenz abgrenzen zu kön- nen, legen wir bei unserer Zielgrup- pe ebenfalls Wert auf ästhetisches Empfinden. Deshalb weist unsere App ein elegantes, modernes De- sign auf. Wenn man sich an den Si- nus-Mileus orientieren möchte, liege unsere Zielgruppe im Milieu der He- donsiten.
22 / 131 23 / 131 3. Design 3.1 Logo
3.2 Typografie
3.3 Farbgebung
3.4 Erste Entwürfe
3.5 Mock-Ups / Smartphone
3.6 Mock-Ups / Tablet 3.1 Logo 3.2 Typografie
Das Fahrrad als Mittelpunkt unseres Für die Typografie unserer Projekt A B C D E F G H I J K L Logos unterstützt die schnelle Asso- "biketrip.bw" haben wir uns für Work ziation beim Betrachter zum Thema Sans entschieden. Ein großer Vor- M N O P Q R S T U V W unserer App. Es soll die Neugierde teil dieser Schriftart ist, dass sie aus wecken, was genau sich dahinter der Google Font-Sammlung stammt. X Y Z versteckt. Durch seinen Minimalis- Hierdurch ist gewährleistet, dass mus besitzt das Logo zu "biketrip. wir die Work Sans für unsere Zwe- a b c d e f g h i j k l bw" eine hohe Prägnanz, wird vom cke kostenfrei verwenden dürfen. Nutzer schnell wiedererkannt und Ebenfalls ist sichergestellt, dass die m n o p q r s t u v w bleibt auch nach dem ersten Be- Schriftart ohne Probleme in einer trachten lange im Gedächtnis. App funktioniert. Die Schriftart ist x y z angenehm für das Auge beim Lesen Für den Schriftzug "biketrip.bw" wähl- und unterstützt den Lesefluss durch ten wir Work Sans, da die Schriftart ihren geraden Charakter. Sie wirkt den klaren und modernen Look unse- klar und strukturiet, wodurch der . , ; : @ ° ! „ § $ % & / rer App unterstreicht und die Anmu- moderne Look unserer App unter- Logo von biketrip.bw tung unseres Logos abrundet. Durch stützt wird. ( ) = < > + - _ - ? ´* ` das tiefe Waldgrün wird das Logo zum Eyecatcher, besonders auf wei- Wir verwenden zwei Schriftschnitte 1 2 3 4 5 6 7 8 9 ßem Hintergrund. Es wirkt nicht zu der Work Sans: Regular und Light. In aufdringlich und trifft den Zahn der der App wird lediglich Regular ange- Zeit. Die Farbe ist besonders auf die wandt, da wir gewährleisten möch- Zielgeräte ausgerichtet, denn dunkle ten, dass der Nutzter Texte zu jeder A B C D E F G H I J K L Töne sieht man auch bei Tageslicht Zeit gut lesen kann - bei Sonnenein- auf dem Smartphone gut, zudem strahlung, ebenso wie in einer dunk- M N O P Q R S T U V W strahlt das Grün etwas Naturverbun- len Umgebung. Aus diesem Grund denes aus. Auch achteten wir bei der haben wir uns für Regular auch beim X Y Z
Logo in klein Auswahl darauf, dass die Farbe har- Logo entschieden. Wir wollten mit monisch wirken und das Logo nicht dieser Entscheidung sicherstellen, a b c d e f g h i j k l als störend empfunden wird. dass man den Schriftzug auch bei einem klein abgebildeten Logo gut m n o p q r s t u v w Auch in klein wirkt das Logo noch lesen kann. sehr gut. Da die Schriftart klar, ge- x y z rade und nicht zu dünn gehalten Light haben wir hinzugefügt, um auf ist, wird eine gute Lesbarkeit ga- der Landingpage zu userer App oder rantiert. Falls der Nutzer etwas von für Druckmaterialen differenzierter unserer Landingpage oder einen gestalten zu können. Der Light-Schnitt . , ; : @ ° ! „ § $ % & / Screenshot der App ausdruckt oder wird hier zum Beispiel bei Überschrif- per Chat mit Bekannten teilt, ist das ten verwendet. Hierdurch bekommen ( ) = < > + - _ - ? ´* ` Logo in schwarz Logo stets gut erkennbar. Auch in diese ein moderneres Aussehen. der Schwarz-Weiß-Variante bleibt es 1 2 3 4 5 6 7 8 9 prägnant und leserlich.
26 / 131 27 / 131 3.3 Farbgebung 3.4 Erste Entwürfe
Grau Angepasst an unser schlichtes Logo, Für die ersten Entwürfe von "bike- Diese erste Version von "biketrip. halten wir auch die Farbauswahl für trip.bw" haben wir zunächst Scrib- bw" war für uns wichtig, um uns im unsere App dezent. Als Grundfarbe ver- bles angefertigt und diese dann als Klaren darüber zu werden, wie die wenden wir ein warmes Grau, welches erste Version in einem Grafikpro- App genutzt werden soll. Darauf an Anthrazit oder Schiefer erinnert. gramm umgesetzt. Diese Entwürfe aufbauend konnten wir ein Flow- waren zunächst als grober Fahrplan Chart entwickeln. Diese Farbe strahlt gegenüber dem für den Wettbewerb gedacht und es Nutzer Professionalität, Kompe- bestand zu dem Zeitpunkt noch kei- Auch konnten wir feststellen wel- RGB: 82 / 105 / 111 tenz und Eleganz aus. Durch dieses ne Vollständigkeit. che Auswirkungen das Nutzungss- Grau als Basis unseres Farbkonzepts zenario und das Nutzungsverhalten Hex: #52696f möchten wir den modernen Look un- Zunächst haben wir überlegt in wel- auf das spätere, finale Design - ha serer App unterstreichen. chem Maße wir das dunkle Grün ben. Hierdurch wussten wir an wel- einsetzten möchten und wie wir chen Stellen wir bei der Entwick- Grün Als Farbe für unsere Akzente und das Logo und eventuell auch die ge- lung des Masterdesigns besonders Nutzerereignisse verwenden wir das schwungene Linie in unserem De- achtsam sein müssen. dunkle Waldgrün unseres Logos. sign aufnehmen wollen. Grün symbolisiert Hoffnung, Gesund- heit und Ausgeglichenheit, eben jene RGB: 20 / 86 / 72 Aspekte des Lebens, welche man durch Bewegung an der frischen Luft Hex: #145648 verstärken kann. Da wir mit unserer App den Spaß am Radfahren fördern möchten, passt das Grün also als per- fekte Ergänzung in unser Farbschema.
Magenta Für die Abrundung unseres Farbkon- zeptes haben wir noch zwei moder- ne Töne in Magenta gewählt. Diese sind nicht direkt für die App gedacht, sondern um in Werbeanzeigen oder RGB: 158 / 49 / 80 in Printmedien wichtige Aspekte her- vorzuheben. Hex: #9e3150 Die rötlichen Töne bieten einen guten Kontrast zu unserem primären Grün und Grau-Look. Durch ihre pastel- lene Anmutung intergieren sie sich RGB: 229 / 123 / 127 wunderbar in die moderne Anmutung unseres Designkonzeptes. Hex: #e57b7f Startseite Routenansicht
28 / 131 29 / 131 3.5 Mock-Ups / Smartphone
Für die Gestaltung der Mock-Ups ha- passende Icons zu finden und natür- ben wir uns zunächst das Design diver- lich eine gelungene User Experience ser polarisierender Apps angeschaut zu schaffen. und herausgefiltert warum diese so im Trend liegen. Uns ist aufgefallen, Um unsere Anliegen im Design zu dass Flat-Design, Fotofilter und dün- verwirklichen, haben wir uns für ein ne Schriften hoch im Kurs stehen. Flat-Design mit Haarlinien und mini- malistischen Icons entschieden. Um Da auch "biketrip.bw" ein junges Pu- die User Experience zu steigern, er- blikum ansprechen soll und auf ein hält der Nutzer stets eine Rückmel- modernes Erscheinungsbild Wert dung, beispielsweise in Form eines legt, haben wir uns hieran orientiert. Farbwechsels. Auch ist unsere Sei- Wichtige Punkte waren für uns, zum tenstruktur aus Gründen der Nutzer- Beispiel, einen einheitlichen Look zu freundlichkeit sehr flach gehalten. erschaffen, prägnante und zum Logo
Beschreibung einer Tour Navigationsansicht
Beschreibung eines Checkpoints Noch geschlossener Checkpoint Startseite Startseite mit Flyout des Menüs
30 / 131 31 / 131 Navigation mit Pop-up der Warnung Navigationsansicht Erweiterte Suchfunktion
Ansicht des Checkpoints Suchfunktion Übersicht der Erlebnisradwege Beschreibung eines Erlebnisradweges
32 / 131 33 / 131 3.6 Mock-Ups / Tablet
Da wir einen einheitlichen Look er- gation und die Pannentipps ledig- reichen wollten, orientierten wir uns lich unterwegs nützlich sind, ist die bei den Entwürfen der Tablet-Version Tabletversion auf die Punkte Suche, selbstverständlich sehr stark an den Erlebnisradwege, Routenplaner und Mock-Ups für das Smartphone. Aller- Gespeicherte Touren beschränkt. dings achteten wir darauf, dass die App ebenso modern im Landscape Im nächsten Schritt passten wir die wirkt, wie im Portrait. Ansichten der Unterseiten dieser vier Menüpunkte an. Wir einigten uns Zunächst passten wir die Startsei- darauf, dass sie im Portrait der An- te an, weil das Tablet für die Pla- sicht am Handy gleichen sollten. Im nungsphase zu Hause gedacht ist Landscape achteten wir jedoch dar- und nicht bei der Tour unterwegs auf, dass wir die Breite, die nun zur verwendet wird. Dadurch fielen -ei Verfügung stand, sinnvoll ausnutzen. nige Menüpunkte weg. Da die Navi-
Auswahlseite der Reparaturtipps Checkliste
Pannentipp Startseite der Tabletansicht
34 / 131 35 / 131 Menü der Tabletansicht Erweiterte Suchfunktion
Suchfunktion Erlebnisradwege
36 / 131 37 / 131 Tourbeschreibung
Routenplaner
38 / 131 39 / 131 4. Screenbook 4.1 Flowchart
4.2 Navigation
4.3 Erlebnisradwege
4.4 Suche
4.5 Routenplaner
4.6 Offline-Karten
4.7 Pannentipps
4.8 Impressum 4.1 Flowchart 4.2 Navigation
Grundlage eines jeden Softwarepro- In einer Überarbeitung des ersten Die Navigationsansicht ist nur in Ausrichtung nach Norden möchten jektes ist ein sogenannter Program- Entwurfes wurden redundante Ein- der Smartphone-Version verfügbar. wir Übersichtlichkeit garantieren und mablaufplan, auch Flussdiagramm träge entfernt. So entstand ein für Dies ist begründet in der Tatsache, der Nutzer kann seine Karte zusätz- oder im englischen Flowchart ge- die Entwicklung und Programmie- dass eine voraussichtliche Mehrheit lich mit Karten an Bushaltestellen, nannt. Das Flussdiagramm dient uns rung sinnvoller und übersichtlicher der Zielgruppe nicht ihr Tablet als Informationstafeln oder Touristik- in der Entwicklung der Applikation Plan für unsere App. Navigationsinstrument am Fahrrad informationen vergleichen, da diese als graphische Struktur unseres ent- verwendet. Besonderheiten der Na- ebenfalls stets nach Norden ausge- stehenden Programms. vigation ist eine Art der Benachrich- richtet sind. tigung durch Ton oder Vibration, so- In einer ersten Version wurden zu- bald ein Checkpoint erreicht ist. Um nächst alle einzelnen Pfade betrach- rechtlich abgesichert zu sein, wird tet und analysiert, zwischen welchen beim Start der App eine Anzeige ge- Ansichten und Seiten gewechselt schaltet. Diese weist den Nutzer da- werden kann. rauf hin den Verkehr und die damit verbundenen Regeln auch parallel zur Nutzung unserer Applikation zu beachten.
In der Kartenansicht ist die aktuelle Route sowie die Position des Nutzers eingezeichnet. Der Nutzer wird mit Hilfe eines Kreuzes auf der Karte von Sehenswürdigkeit zu Sehenswürdig- keit navigiert. Die Karte ist hierbei immer nach Norden ausgerichtet. Wir haben uns für diese Art der Na- vigation entschieden, da unsere App kein Navigationssystem sein soll. Biketrip.bw soll vielmehr den Cha- rakter von Geo-Caching oder altmo- dischen Radtouren mit einer Papier- karte haben, bei welchen man sich auf die Karte einlassen muss um die Ziele zu finden. Durch diese Art der Schnitzeljagt, bei welchen man die Attraktionen sucht möchten wir dem Nutzer ein Erlebnis bieten, welches größer ist wie wenn er einfach von Attraktion eins zu Attraktion zwei geleitet wird. Durch die permanente
42 / 131 43 / 131 4.3 Erlebnisradwege 4.4 Suche
Im Abschnitt Erlebnisradwege soll finden lassen. Hier kann man sich ei- Die Suche bietet dem Nutzer die definieren und in seine Suchanfrage dem Nutzer ein Katalog von vorge- nen umfangreicheren Überblick über Möglichkeit, die gesamte Applika- mit einbinden. fertigten, sorgfältig ausgewählten die Tour machen, ohne sich selbst tion und alle angebotenen Radtou- und aufbereiteten Strecken ange- schon alles zu verraten. ren nach einem Stichwort oder auch boten werde. Neben einem indivi- Ortsnamen zu durchsuchen. duellen, zur Strecke passenden Bild, Neben der Möglichkeit die Tour di- dem Titel und einer kurzen Beschrei- rekt aus dieser Ansicht heraus zu Um den Nutzer nicht direkt mit al- bung der Tour werden auch nützli- starten, gibt es noch Funktionen wie len Suchparametern zu überfordern che Informationen wie der Ort, die das Herunterladen der Route oder und die Nutzbarkeit der Applikation Länge sowie ein Schwierigkeitsgrad das Kommentieren und Bewerten zu optimieren, wurde die Funktion der Tour zur besseren Entscheidung der Tour. Außerdem können diese der erweiterten Suche implemen- angezeigt. über verschiedene Social-Media-Ka- tiert. Hier kann der Nutzer, wenn er näle geteilt werden. Diese Funktio- es möchte, weitere Parameter, wie Bei Auswahl einer Tour gelangt man in nen wurden auf Grund der Zeitbe- zum Beispiel der Schwierigkeitsgrad eine Voransicht, wo sich weitere Infor- grenzung jedoch nicht umgesetzt. oder auch die Länge einer Strecke mationen sowie ein kurzer Videoclip
44 / 131 45 / 131 4.5 Routenplaner 4.6 Offline-Karten
Der eingebaute Routenplaner ist Das Feature der Offline-Karten -er Dies erlaubt es auch ohne eine gute eine Funktion, die es dem Nutzer er- möglicht es einem Nutzer schon vor- Internetverbindung die Applikation möglicht, seine eigenen Routen zu ab das Kartenmaterial und die medi- reibungsfrei zu benutzen. Zudem erstellen und berechnen zu lassen. alen Inhalte herunterzuladen. Neben wird der mobile Daten- und Akku- den vorgefertigten Routen kann man verbrauch hierdurch wesentlich re- Neben den notwendigen Punkten auch seine eigenen, am Tablet oder duziert. wie Start und Ziel können auch noch Computer erstellten Routen, auf sein weitere Zwischenstopps eingefügt mobiles Endgerät herunterladen. werden. Die Übersicht über alle eigenen und vorgefertigten Routen werden in der gleichen übersichtlichen Darstellung präsentiert wie die Erlebnisradwege.
46 / 131 47 / 131 4.7 Pannentipps 4.8 Impressum
Die Pannentips sind ein Smartpho- Die einzelnen Pannentipps selbst Aufgrund der in Deutschland beste- Da es sich bei "biketrip-bw" aller- ne-Only-Feature, da sie nur im Ein- sind mit einem sprechenden Icon henden Impressumpflicht, verfügt dings um ein Hochschulprojekt han- satz vor Ort einen wirklichen Sinn ausgestattet und bieten somit dem auch unsere App über die nötigen delt und wir somit kein Unternehmen ergeben. Aus selbigem Grund und im Benutzer eine schnelle Auswahl- Information bezüglich des Anbieters, sind, können wir nur einen Teil dieser Zuge der Übersichtlichkeit wurden möglichkeit. also uns. Punkte angegeben. Somit sieht un- sie aus der Tablet-Variante entfernt. ser Impressum folgendermaßen aus: Innerhalb eines Pannentips gibt es Zu den notwendigen Pflichtangaben Neben Tipps bei einer Panne bein- eine ausführliche Beschreibung, zählen gemäß § 5 im Telemedienge- haltet dieser Abschnitt auch eine welche in einzelnen Schritten das setz folgende Punkte: Betreiber der Checkliste, welche man vor Reisean- Vorgehen beschreibt. App, Unternehmensadresse, Vertre- tritt abarbeiten kann, um sein Fahr- tung des Unternehmens, Kontakt im rad auf Reisetauglichkeit zu über- Impressum, Aufsichtsbehörde, Re- prüfen. gistereintrag und die Umsatzsteu- er-ID.
„biketrip.bw ist ein Projekt, das im Rahmen einer Projektarbeit an der Hochschule für Technik, Wirtschaft und Medien Offenburg unter Be- treuung von Prof. Dr. Dipl.-Ing. (FH) Roland Riempp entstanden ist.
Kontakt: Badstraße 24 77652 Offenburg Telefon:(0781) 205-0 Telefax:(0781) 205-333 www.hs-offenburg.de
Verantwortlich für die Inhalte von biketrip.bw sind Studierende der Fa- kultät Medien und Informationswesen: Nikolas Braun, Robert Dieterle, Kevin Jensen, Alexandra Prokofyeva, Noelle Reichert.“
48 / 131 49 / 131 5.1 Beschreibung
5.2 Mannheimer Schloss 5. Karl-Drais-Tour 5.3 Wohnhaus in M1, 8
5.4 Schlossgarten
5.5 Neckarauer Übergang
5.6 Casterfeldstraße
5.7 Drais-Denkmal Karlsplatz
5.8 SAP Arena
5.9 Technoseum
5.10 Wasserturm
5.11 Benzdenkmal 5.1 Beschreibung
Die Karl-Drais-Tour war der Schwer- Die Inhalte der Tour haben wir selbst punkt unserer Projektarbeit und die erstellt. So sind wir mehrfach nach einzige Route, die wir selbst imple- Mannheim gefahren, um Bilder und mentiert haben. Um diese so inter- Videomaterial zu erstellen. Für das aktiv wie möglich zu gestalten und 3D-Modell sowie die Animationen damit unterhaltsam für den Nutzer nutzten wir Adobe After Effects, Ad- zu machen, wurden die Stationen obe Photoshop, Adobe Premiere, mit interessanten Inhalten verse- gimp, HandBrake, Blender und sket- hen. Diese Art von Contentgestal- chfab. Die Hörbeiträge wurden zum tung macht "biketrip.bw" besonders Teil im hochschuleigenen Audiolabor und einzigartig, weshalb dies auch aufgenommen und anschließend mit in der Tourbeschreibung hervorge- Avid Pro Tools und Audacity bearbeitet. hoben wird. Bei der Tourenführung und dem In- „Das Fahrrad zählt vor allem im Som- halt durften wir uns an der Karl- mer zu den beliebtesten Verkehrs- Drais-Tour der Stadt Mannheim ori- mitteln. Auf Kurzstrecken ist man entieren. Damit wir exact die selbe schnell unterwegs, kann uneinge- Routenführung in unserer App ha- schränkt die Aussicht genießen und ben, fügten wir in der Programmie- hält sich dabei auch noch fit. Doch rung diverse Zwischenstopps ein. wie viele Radfahrer kennen eigent- Nur so konnten wir gewährleisten, lich die Geschichte des Fahrrades? dass die Navigation nicht die opt- Und wem haben sie diese Erfindung male sondern die gewünschte Route zu verdanken? anzeigt.
Wer sich auf die Karl-Drais-Tour be- Dankenswerterweise haben wir von gibt, bekommt nicht nur die Antwor- Hr. Prof. Lessing Bildmaterial von ten auf diese Fragen, sondern taucht Karl Drais erhalten, welches er für auch in die Lebensgeschichte von die Tour der Stadt Mannheim zu- Karl Drais - dem Erfinder des Fahrra- sammengetragen hatte. des ein. Unterwegs bieten sich Rad- fahrern insgesamt zehn Stationen Bei der Umsetzung der Sprechertex- an, die mit verschiedenen Inhalten te für die Karl-Drais-Tour unterstütz- locken. Durch Hörspiele, Animatio- te uns Gereon Nußbaum, Schulleiter nen, Bilder und Videos wird die Ent- und Gründer der Arturo Schauspiel- stehungsgeschichte des beliebten schule in Köln. Mit seiner ausgebilde- Fortbewegungsmittels veranschau- ten Stimme, welche für historische licht und die damit verbundenen Le- Geschichten prädestiniert ist, erhält bensabschnitte von Karl Drais und unsere Tour ihren eigenen Charme seiner Familie erzählt.“ und wirkt noch professioneller.
Flyer zur Drais-Tour der Stadt Mannheim
52 / 131 53 / 131 5.2 Mannheimer Schloss 5.3 Wohnhaus in M1, 8W Medium Sprechertext Medium Sprechertext
Der erste Checkpoint der Tour befindet Unsere Route beginnt in der histo- Wenige Straßen von der ersten Sta- Nur wenige Straßen vom Mannhei- sich am Mannheimer Schloss. Hier hat rischen Innenstadt Mannheims - am tion entfernt, findet man die Stelle, mer Schloss entfernt, findet man im man die Möglichkeit einen Flug über Mannheimer Schloss. Mit seinen 440 an der früher das Wohnhaus von Karl Quadrat M1 das Haus mit der Num- ein 3D-Modell des Schlosses inner- Metern Länge zählt dieses zu den Drais stand. mer 8. Dieses wurde im Jahr 2008 halb eines Animationsfilms zu sehen. größten Schlössern Europas und ist erbaut und ist jetzt zum größten das größte Barockschloss Deutsch- Da man dort ausschließlich eine In- Teil im kirchlichen Besitz. Lediglich Es erscheinen verschiedene histo- lands. Zu der Zeit, als Familie Drais formationstafel vorfindet, kann man eine Informationstafel an der mo- risch relevante Bilder an der Fassade nach Mannheim zog, befand sich in sich in einer Bildergalerie Portraits dernen Fassade erinnert an das ehe- des Gebäudes, diese erzählen einen dessen Westflügel das Oberhofge- von Drais ansehen. In dem dazugehö- malige Wohnhaus der Familie Drais. Teil der Lebensgeschichte von Drais. richt. Dort war Wilhelm Freiherr Drais rigen Hörspiel erfährt man, dass das Dieses wurde im zweiten Weltkrieg Des Weiteren ist erkennbar, in wel- von Sauerbronn, der Vater von Karl ursprüngliche Wohnhaus von Drais, vollständig zerstört. 1810 wurde der chem Teil des Schlosses der Vater Drais, seit 1810 als Präsident tätig. welches an dieser Stelle stand, im Vater von Karl Drais Präsident des von Karl Drais 1810 als Präsident tä- Als 1819 der Schriftsteller und Frei- zweiten Weltkrieg vollständig zer- Oberhofgerichtes und zog mit der tig war. Außerdem ist eine Moment- heitskritiker August von Kotzebue stört wurde. Familie nach Mannheim. Karl Drais aufnahme der Ermordung von Karl vom Radikalen Karl Ludwig Sand er- selbst folgte ein Jahr später. In dem Ludwig Sand, welcher von Drais‘ Va- mordet wurde, bestätigte Freiherr Haus baute er in den Jahren 1813 ter verurteilt wurde, zu sehen. Die- von Drais dessen Todesurteil. Ein und 1814 zwei vierrädrige, muskel- ses Ereignis beeinflusst das Leben Jahr nach dem Attentat wurde Sand kraftgetriebene Fahrmaschinen. Eine von Drais entscheidend. hingerichtet. Die Ermordung diente davon wurde beim Wiener Kongress auch als Rechtfertigung für die Kar- vorgestellt. Drei Jahre später erfand lsbader Beschlüsse im Jahr 1819. er schließlich die zweirädrige Lauf- maschine.
54 / 131 55 / 131 5.4 Schlossgarten 5.5 Neckarauer Übergang Medium Sprechertext Medium Sprechertext
Sobald man am Schlossgarten an- Direkt am Rheinufer, in unmittelbarer In der Nähe der Hochschule befin- Wer mit dem Zug nach Mannheim gelangt ist, hat man die Möglichkeit, Nähe zum Schloss, findet man das det sich eine knallgelbe Brücke, wel- reist, dem fällt bestimmt die knall- sich einen Hörbeitrag über diesen Überbleibsel einer ehemaligen Gar- che den vierten Tour-Stop darstellt. gelbe Brücke in der Nähe der Hoch- anzuhören. tenanlage. Genau hier konnte man Hier kann man sich ein kurzes Video schule Mannheim ins Auge. Diese Anfang des 19. Jahrhunderts Drai- ansehen. In diesem sieht man ein wird auch von Straßenbahnen befah- In Hörspielmanier bekommt man sinen-Reiter auf ihren Laufmaschi- 3D-Modell einer Draisine. Es wird ren und ist daher mit Rillenschienen das Gefühl, dass hier noch Draisi- nen antreffen. Aufgrund der damals besonderer Fokus auf die vorhande- ausgestattet. Auf Schienen testete nen-Reiter auf Laufmaschinen un- schlechten Fahrbahnen mussten sie ne Bremse gelegt. Karl Drais in Karlsruhe kleine, vierräd- terwegs sind, wie es Anfang des 19. auf die Gehwege ausweichen. Aller- rige Eisenbahnfahrzeuge. Seine Ver- Jahrhunderts üblich war. Man er- dings nicht für lange, denn bereits im Der dazugehörige Hörbeitrag erklärt, suche prägten den Begriff „Draisine“, fährt auch, dass das Fahren auf den Jahr 1817 wurde das Fahren auf den dass Drais‘ Laufmaschinen in Eng- der heute noch von Eisenbahnern Bürgersteigen kurz danach untersagt Bürgersteigen untersagt. Der Grund – land meist keine Bremsen besaßen. benutzt wird.Trotz damals nur weni- wurde. die Laufmaschinen waren zu schnell Der Grund war eine Konstruktions- ger Strecken mit Gefälle erfand Drais und so verlagerten sich die Wege in zeichnung, auf welcher der Draisi- ein Bremssystem für seine Laufma- den Schlossgarten. 1820 machte so- nen-Reiter die vorhandene Bremse schine. Dieses erlaubte es dem Fah- gar der erste Verleih auf. Sehr lange mit dem Bein verdeckte. rer die Maschine beim Bergabfahren dauerte die Freude der Draisinen-Rei- zu kontrollieren. Allerdings war die ter allerdings auch dieses Mal nicht, Bremse auf seiner Zeichnungvom denn schon 1822 wurde das Fahren Bein des Draisinen-Reiters verdeckt. im Park ebenfalls verboten. So kam es dazu, dass vor allem in England Drais’ Laufmaschinen an- hand der Zeichnung schlicht ohne Bremsen nachgebaut wurden.
56 / 131 57 / 131 5.6 Casterfeldstraße 5.7 Drais-Denkmal Karlsplatz Medium Sprechertext Medium Sprechertext
Die Casterfelderstraße führt einen Im Jahr 1817 trug die heutige Cas- Das Drais-Denkmal am Karlsplatz Auf einem grünen Flecken zwischen direkt an den Ort, an dem 1896 nach terfeldstraße, inoffiziell, den Titel wurde 2003 zusammen mit einer In- drei Straßen steht das minimalisti- Drais‘ Tod die „Drais Fahrradwerke der besten Straße ganz Badens. An formationstafel aufgestellt. Es steht sche Stahldenkmal, das den Rah- GmbH“ gegründet wurde. ihrem Routenverlauf hat sich seit am Wendepunkt, an dem sich Drais men der Drais‘schen Laufmaschine dem nicht viel verändert. Sie führt bei seiner ersten Fahrt mit der Lauf- darstellt. Die Konstruktion wurde Da heute nur noch zwei identische von Rheinau nach Schwetzingen und maschine 1817 wieder zurück in die 2003 zusammen mit einer Informati- Wohnhäuser an dieser Stelle zu fin- zurück. Folgt man der Bundesstraße Stadt aufmachte. onstafel im Auftrag desgemeinnützi- den sind, kann man sich hier eine Ga- Richtung Innenstadt und, so kommt gen Vereins Mannheim-Rheinau an- lerie mit Fotos und einem Lageplan man in den Stadtteil Waldhof. Dort Die genaue Route kann man sich auf gebracht. Es steht am Wendepunkt, der damaligen Werke anschauen. In wurde 1896, nach Karl Drais‘ Tod, die einer animierten Karte ansehen und an dem sich Drais bei seiner legen- dem Hörspiel erfährt man, wie das „Drais Fahrradwerke GmbH“ gegrün- somit nachvollziehen, wie weit und dären Fahrt mit der Laufmaschine Unternehmen später bankrott ging. det. 2004 ging das Unternehmen wo genau Drais entlang gefahren ist. von Mannheim zum Schwetzinger bankrott. Heute existieren nur noch Relais-Hauszurück auf den Weg in zwei identischen Wohnhäusern der die Stadt machte. Die Fahrt erfolgte Arbeitersiedlung. Drais selbst hatte am 12. Juni 1817. den Wunsch gehabt, eine Aktienge- sellschaft zur Verwertung seiner Er- findungen zu gründen. Diesen konn- te er aber nicht mehr verwirklichen. Da seine politischen Gegner, sein Vorhaben mit anonymen Zeitungs- anzeigen sabotierten.
58 / 131 59 / 131 5.8 SAP Arena 5.9 Technoseum Medium Sprechertext Medium Sprechertext
Sobald man an der SAP Arena ange- Um optimale Erfolge zu erzielen, Das Technoseum ist eines der größ- Das TECHNOSEUM zählt mit seinen kommen ist, kann man sich ein Hör- muss ein Eishockey-Spieler über ten Technikmuseen in ganz Deutsch- rund 8.000 Quadratmetern Ausstel- spiel anhören. ein hohes Maß an Gleichgewichts- land. Die Nutzer der App können sich lungsfläche zu den größten - Tech sinn und Körperbeherrschung ver- hier ein 3D-Modell einer Draisine an- nikmuseen Deutschlands. Durch In diesem erfährt man, dass die fügen. Auch beim Radfahren gehört schauen. An diesem Modell gibt es Ausprobieren und Experimentie- Mehrzweckhalle hauptsächlich für die Fähigkeit, die Balance zu halten, Punkte, welche bei Berührung ge- ren können Besucher hier komplexe Eishockeyturniere verwendet wird. zu den Grundfähigkeiten eines jeden naue Details des Modells mit Be- technische und naturwissenschaft- Ebenso erfährt man, dass die frü- Fahrradfahrers. Zu Lebzeiten von schriftung zeigen. liche Prozesse erleben und verste- heren Draisinen-Fahrer große Prob- Karl Drais war das noch ganz anders. hen. Neben Dauerausstellungen bie- leme mit dem Gleichgewicht hatten, Erst rund zehn Jahre nach seinem Im Hörbeitrag erhält man genauere tet das Erlebnismuseum regelmäßig genauso wie der, der das erste Mal Tod, als das Laufen auf Rollschuhen Informationen zu den Ausstellungen auch Sonderausstellungen zu ak- mit Schlittschihen auf dem Eis steht. populär wurde, wurde die Fähigkeit im Museum. Anhand dieser Informa- tuellen Themen aus Naturwissen- des Balancierens selbstverständlich. tionen kann man dann entscheiden, schaften, Technik und Gesellschaft. Das ist wahrscheinlich der Grund, ob sich der Besuch für einen selbst Im museumseigenen Fahrzeugpark weshalb Drais‘ Laufmaschine kei- lohnt. findet man unter historischen Fahr- nen Tretmechanismus besaß. Erst rädern auch einen originalgetreuen im Jahr 1862 stattete der Franzose Nachbau der Drais‘schen Laufma- Pierre Michaux das Zweirad dann mit schine. Bei Führungen haben Kinder einer Kurbel aus. die Möglichkeit, auf einer der nach- gebauten Maschinen Probezusitzen und sogar damit zu fahren.
60 / 131 61 / 131 5.10 Wasserturm 5.11 Benzdenkmal Medium Sprechertext Medium Sprechertext
Am vorletzten Checkpoint, dem Hier, wo heute der Wasserturm steht, Wenige Minuten vom Wasserturm Nicht weit vom Wasserturm ent- Wasserturm, kann sich der Nutzer befand sich zu Lebzeiten von Karl entfernt, findet man den letzten fernt, steht die Bronzenachbildung einen kurzen Hörbeitrag anhören. Drais der Richtplatz. An diesem Platz Checkpoint und ist somit auch schon des ersten fahrbereiten Automobils Darin erfährt man, dass 1820 genau fand 1820 die Hinrichtung des radi- am Ende der Tour angelangt. von Carl Benz. Der Motorwagen wur- an diesem Platz ein radikaler Stu- kalen Studenten Karl Ludwig Sand de im Jahr 1886 erfunden. Noch im dent hingerichtet wurde. Drais‘ Vater statt. Drais‘ Vater übernahm damals Nutzer der App können am Benz- gleichen Jahr wurde auch das Patent übernahm damals den Prozess. den Prozess. Nach der Hinrichtung Denkmal Zeichnungen ansehen, erteilt. Der Erfinder des Kraftwagens musste Drais diverse Belästigungen welche die verschiedenen Fahrzeuge beschloss, sein altes „Kurbelvelozi- Diese Geschehnisse beziehen sich über sich ergehen lassen. Sand hat- von der Draisine bis zum Wagen von ped“ mit einem Motor auszustatten. auf die Geschichte, welche man an te nämlich viele Anhänger und Sym- Karl Benz zeigen. Wie an jeder Stati- Beim Design des ersten Automobils der ersten Station erfahren hat. pathisanten, vor allem unter ande- on hat man die Möglichkeit, sich den hat sich Benz dabei an dendamals ren Studenten. Um dem Mobbing dazugehörigen Infotext entweder als üblichen Pedaldreirädern orientiert. zu entfliehen, beschloss Karl Drais Text durchzulesen oder den passen- Dadurch kamen viele Teile seines schließlich, nach Brasilien zu ziehen. den kurzen Hörbeitrag anzuhören. Wagens aus der Fahrradfertigung. Dort arbeitete er fünf Jahre lang als Somit hat das erste Auto der Welt Feldvermesser, bis er im Jahr 1827 verschiedene bewährte Elemente nach Mannheim zurückkehrte. aus der Fahrradtechnik beerbt.
62 / 131 63 / 131 6. Programmierung 6.1 Anforderungen
6.2 Grundlagen
6.3 Herangehensweis
6.4 Testen der App 6.1 Anforderungen
Wir haben den Funktionsumfang un- Version 0.9: MUSS serer App in vier Versionen unterteilt, von denen wir die ersten zwei kom- Diese Anforderungen müssen umgesetzt sein, um die App im alltäglichen Ge- plett umsetzen möchten. brauch nutzen zu können: Zur Unterteilung der Anforderungen haben wir eine „Muss-Soll-Kann- - Ansprechende Nutzeroberfläche mit intuitiver Bedienung Matrix“ angewendet. Diese setzt sich wie folgt zusammen: - Version für Tablet, die eine angepasste Darstellung bietet
- Mindestens eine Radtour (Drais-Tour) ist in der App enthalten
- Die App bietet eine Übersichtsseite zu den Touren mit den wichtigsten Da- ten: Streckenlänge, Bilder, Highlights
- Die Touren enthalten verschiedene Wegpunkte (Checkpoints), die widerum unterschiedliche Medien enthalten, die den Checkpoint beschreiben: - Videos, Bildergalerien, Hörbeiträge, Texte, etc
- Die App bietet eine Kartenansicht, die die Position des Nutzers erkennt und verfolgt
- Landkartenfunktion: Der Nutzer kann die App als Wegbeschreibung nutzen
- Die Smartphone-Version der App bietet eine Kategorie „Radtipps“, die un- terschiedliche Medien enthält: - Videos, Bilder und Grafiken (evtl. animiert), Text und gemischt
Version 1.0: SOLL
Diese Anforderungen sollten umgesetzt werden, damit der Nutzer Spaß an der Nutzung der App hat und sie ihm einen Mehrwert bietet:
- Einleitung zur Tour mit Teaser-Video und weiteren Parametern wie z.B. einem Höhenprofil
- Kategorisierung der Routen: Leicht, Mittel, Sport, Familie etc.
- Suchfunktion nach Touren
- Touren können als Favoriten markiert werden
66 / 131 67 / 131 6.2 Grundlagen
- Die Checkpoints sind anfangs gesperrt und werden erst freigeschaltet, Für die Programmierung der App "bi- den beiden Frameworks bezeichnet wenn sich der Nutzer in der Nähe des Checkpoints befindet. Bei Freischal- ketrip.bw" wurden die neusten Stan- werden. tung ertönt ein Signalton und das Gerät vibriert dards bei der webtechnikbasierten Anwendungsentwicklung eingesetzt. Cordova kann deshalb beispielswei- - Navigation: Der Nutzer kann sich von der App von Checkpoint zu Check- Das besondere bei einer „Web-App“ se mit WebKit verglichen werden, die point navigieren lassen ist die universelle Programmierung. Browser-Engine, die hinter Safari, Die App wird einmalig mit JavaScript, Opera und Google Chrome steckt. HTML und CSS erstellt und durch ei- Version 1.1: KANN nen „Wrapper“ auf die verschiedenen Cordova ermöglicht es, Stan- Betriebssysteme portiert. Dadurch dard-Webtechnologien mit den na- Diese Anforderungen können umgesetzt werden, um die Usability noch weiter kann derselbe Code für die iOS, die tiven Eigenschaften eines mobilen zu verbessern: Android und die Windows-Phone- Endgeräts zu verknüpfen, wie zum Version der App verwendet werden. Beispiel den Zugriff auf Sensoren, - Strecken und Medien können vor Fahrtantritt heruntergeladen werden, um Daten und Kameras. Datenvolumen zu sparen Die zwei bekanntesten Wrapper für mobile Web-Apps sind zurzeit Adobe Als Paketverwaltungstool setzen - App erkennt, wenn der Nutzer eine Tour startet und navigiert zum Start- PhoneGap und das Ionic Framework. Cordova Applikationen auf Node.JS punkt (oder gibt Informationen, wie der Nutzer zum Start kommt) Beide Tools basieren auf dem mobi- und npm. Dadurch ist es sehr ein- len Entwicklungsframework Cordo- fach die Applikation durch weitere - Es können Wegpunkte übersprungen werden, wenn diese für den Nutzer va. Cordova kann als „Engine“ hinter Libraries und Pakete zu erweitern. uninteressant sind
- Einleitung mit detaillierten Informationen wie z.B. umliegenden Einkehr- möglichkeiten
- Likes und Bewertungen für eine Tour
Version 2.0: AUSBLICK
Diese Anforderungen werden nicht im Rahmen der Projektarbeit umgesetzt:
- Nutzerkonten
- Nutzer können die Tour am Tablet oder im Web planen/zusammenstellen und diese auf das Smartphone übertragen
- Ein Web Interface, mit dem neue Radtouren angelegt werden können (Web to JSON Converter oder CMS)
68 / 131 69 / 131 Programmiersprachen facht und verkürzt. Eine große Rol- Betriebssystemspezifische UI-Gestal- Ionic bietet eine Vielzahl an vordefi- und Frameworks le bei der Programmierung spielen tung und vordefinierte Komponenten nierter Komponenten, die das Erstel- DOM-Selektionen, Manipulationen Durch Ionic ist es außerdem mög- len einer App vereinfachen.4 Modals, Ionic Framework, AngularJS und Events, die mit regulärem Ja- lich, das Standard-UI des jeweiligen PopUps, Cards oder Buttons müssen und TypeScript vaScript viel Platz in Anspruch neh- Betriebssystems zu verwenden. Da- nicht selbst erstellt und gestylt wer- men. Durch AngularJS werden diese durch sieht die selbe App unter iOS den, sondern kommen bereits vor- Objektiv betrachtet erledigen Pho- Aufgaben fast vollständig automati- aus wie eine iOS App und unter And- definiert von Ionic. neGap und Ionic dieselbe Aufgabe. siert. roid durch das Material Design wie Doch es gibt einige Unterschiede eine Android App. zwischen den Frameworks, die dafür Beispiel für Direktiven und Data-Bin- 4 Ionic Framework Docs, V2 gesorgt haben, dass wir uns für Io- ding:3 nic entscheiden haben und nicht für Um schnell, platzsparend und gut PhoneGap. lesbar ein App-Template zu gestal- ten, eignen sich Direktiven hervorra- Beim Ionic Framework mussten wir gend. Dabei werden AngularJS-spe- uns außerdem noch zwischen Ver- zifische Programmieranweisungen sion 1 und Version 2 des Ionic Fra- wie z.B. Schleifen (loops) oder be- meworks entscheiden. Version 1 ist dingte Anweisungen (IF-Anweisung) schon länger auf dem Markt und in den HTML-Text integriert. So ge- ausgereift, während Version 2 erst ben wir die Daten in der App aus: in Kürze als finale Version erscheint, jedoch einige essenzielle Vorteile {{t. Nachfolgend werden die Vorteile von title}}
Ionic 2 erklärt.
Die folgende Schleife behandelt je- AngularJS des Element im Array „touren“ und PhoneGap verwendet Standard-Ja- erzeugt für jeden Eintrag ein
JavaScript ist die programmier- technische Logik, die hinter einer 1 Vgl. Eelco Muller, 2015 Webanwendung steckt. Durch Angu- 2 Vgl. Brad Dayley, 2015 larJS wird diese Logik stark verein- 3 Vgl. Sascha Brink, 2015
70 / 131 71 / 131 TypeScript bei der objektorientierten Program- sind die Tags durch Ionic stark erwei- Syntax-Highlighting ist sehr hilfreich Durch Ionic konnten wir nicht nur An- mierung von Webanwendungen. Der tert. Für Buttons gibt es beispiels- bei der Programmierung, der einge- gularJS, sondern auch TypeScript ver- Code wird dadurch stark vereinfacht weise den HTML Tag „
Die Verbindung aus AngujarJS 2.0 Markup und Style-Definitionen und TypeScript bietet große Chancen Zu den Standard-Webtechnologien zählt neben JavaScript selbstver- ständlich auch HTML und CSS. 5 https://de.wikipedia.org/wiki/Type- Script [Aufgerufen am 05.01.2017] Der Aufbau der App wird daher na- 6 Vgl. Hartmut Schlosser 2014 türlich durch HTML erstellt. Jedoch
72 / 131 73 / 131 Eingesetzte Libraries ter dem Punkt „Restriktionen bei der Vorteile MapBox LeafletJS (Funktionsbibliotheken) Maps API Implementierung“ heißt es: „No navigation. You will not use the
Der Kernbestandteil unserer App ist Service or Content for or in connec- WebGL-basierte Karte, wodurch Einfachere Implementierung in ein AngularJS die Karte und die Navigation/Routen- tion with (a) real-time navigation or umfangreichere Interaktionen möglich Projekt, Umfangreichere und bessere führung. Deshalb war die Auswahl des route guidance; or (b) automatic or sind: Karte mit zwei Fingern drehen, Pinch- Dokumentation, eine Vielzahl an Drittanbieter- to-Zoom etc. Plug-Ins, die die Funktionen erweitern, richtigen Kartenanbieters eine gro- autonomous vehicle control.” vollständig auf Deutsch. ße Entscheidung. Auf der einen Seite Unsere Anwendung fällt jedoch un- gibt es Google mit der Google Maps ter den Punkt “real-time navigation“, Nachteile MapBox LeafletJS API und auf der anderen Seite gibt es da die Navigation bei Standortände- OpenStreetMap-basierte Anbieter wie rungen des Nutzers aktualisiert wird. z.B. MapBox oder LeafletJS. Routing Instruktionen nicht auf Deutsch JavaScript-basierte Library, wodurch weniger Deshalb haben wir uns für Interaktionen möglich sind. Die Karte zeigt Anfangs verwendeten wir Goog- OpenStreetMap entschieden. Um dadurch bspw. Immer nach Norden und kann nicht gedreht werden. le Maps, da Google der bekanntes- OpenStreetMap verwenden zu kön- te Kartenanbieter ist. Doch schnell nen, benötigt es zusätzlich noch eine stießen wir an die Grenzen mit Goo- Library. Dafür gibt es zwei große An- Wir haben uns letztendlich für Le- tive Apps verwendet, die die SDKs gle Maps, da Google in seinen AGB bieter: Leaflet.JS und MapBox. Beide afletJS als Basis entschieden, da die- der Kartendienstanbieter verwen- die Nutzung von Google Maps als Anbieter haben Vor- und Nachteile, se Library auf Anhieb besser in unser den. HERE Maps oder MapBox bieten Navigationssoftware verbietet. Un- die nachfolgend erläutert werden. Projekt integriert werden konnte und beispielswiese sehr umfangreiche weil die API besser und umfangrei- Mobile SDKs an, mit denen aufwän- cher dokumentiert war. Ideal ist Le- digere Navigationen möglich sind. afletJS zwar nicht aber für unser Bei den SDKs gibt es dann in der Re- Projekt die beste Wahl. gel auch eine Sprachansage.
Als Alternative zu OpenStreetMap Mobile JavaScript Maps APIs werden gäbe es noch HERE Maps (ursprüng- in der Regel nur zur Routenplanung lich von Nokia entwickelt, heute im und Wegbeschreibung verwendet. Besitz von Audi, BMW und Daimler). Um dennoch eine Echtzeitnavigation HERE bietet zwar auch einen kos- zu ermöglichen, haben wir einen Trick tenfreien Zugang zu ihrem System, bei der Programmierung angewendet. der Funktionsumfang unterscheidet Näheres dazu im nächsten Kapitel. sich jedoch nicht im Vergleich zu OpenStreetMap. Für unsere Apps haben wir uns letzt- Generell konnten wir feststellen, endlich auf einen Mix von mehreren dass bei JavaScript APIs der Funk- Anbietern und Plug-Ins geeinigt. Das tionsumfang eher eingeschränkt ist. Design der Map kommt durch einen Eine richtige Step-by-Step Echt- Tile Layer zustande. Dafür haben wir zeitnavigation als Web-App gibt es einen speziellen Fahrradkartenstyle kaum. Dafür werden in der Regel na- von Thunderforest verwendet. Um
74 / 131 75 / 131 6.3 Herangehensweise
überhaupt Routing-Informationen LeafletJS äußerst sinnvoll. Die Rou- Am Anfang der Programmierungs- zu ermitteln und anzuzeigen, wer- tingdaten selbst stammen wiederum phase stand das Ionic 2 Template den zwei zusätzliche LeafletJS Plug- von Mapbox, da dieser Anbieter eine „ionic2-starter-sidemenu“.7 Dieses Ins namens Routing-Machine und Fahrradnavigation anbietet, welche Template beinhaltet eine leere App Geocoder verwendet. Diese Plug- Fernstraßen meidet und Fahrradwe- mit einem Menü an der linken Seite, Ins stammen vom selben Entwick- ge bevorzugt. wie wir es auch für unsere App ver- ler und ergänzen die Funktionen von wenden.
Unsere App soll für iOS und für And- roid erscheinen, also mussten wir diese Plattformen zum Projekt hin- zufügen. Danach ist es möglich, die App für die beiden Betriebssyste- me zu exportieren. Jede einzelne View der App besteht aus einer Seite (Page). Um die App möglichst modu- lar zu halten, besteht jede Page aus ihrem eigenen HTML-Template, ei- nem Style-Dokument und einer Ty- peScript (= JavaScript)-Datei.
Objektorientiert betrachtet, bedeu- tet das, dass jede Seite eine eigene Klasse mit eigenem Template, eige- nen Funktionen und eigenen Direk- tiven ist. Damit kommt keine Page einer anderen in die Quere. Die ein- zelnen Pages werden in einer überge- ordneten App-Klasse registriert und stehen damit global zur Verfügung.
7 https://github.com/driftyco/io- nic2-starter-sidemenu [Aufgerufen am 07.12.2016]
76 / 131 77 / 131 6.4 Testen der App
In dieser übergeordneten Klasse kön- Native Module, die auf gerätespezifi- Während der Entwicklung haben wir Um auch die nativen und plattfor- nen ebenfalls Stil- und Funktions- sche Eigenschaften wie z.B. GPS zu- vor allem den Google Chrome Ent- mabhängigen Funktionen zu testen, definitionen getroffen werden, die greifen, werden über das Ionic Ter- wicklermodus zum Testen der App haben wir den iOS und Android Emu- beim Initialisieren der App geladen minal zum Projekt hinzugefügt. In verwendet. Dieser bietet umfangrei- lator verwendet und teilweise auch und damit global angewendet wer- unserem Projekt verwenden wir fol- che Analysetools des Quelltexts, eine auf einem realen iOS-Gerät (iPhone den. Bei der Programmierung haben gende Native-Modules: ausreichende Liste an vordefinierten 5s) getestet. wir uns so gut es ging an die Richt- Devices zum simulierten Test auf linien von Ionic gehalten und unter- - Geolocation: zur Ermittlung des verschiedenen Endgeräten und der schiedliche Komponenten in die App Standortes Möglichkeit den GPS-Sensor mit ei- eingebaut, um einen großflächigen genen Koordinaten zu manipulieren. Überblick des Frameworks zu erhal- - Native Audio und Vibration: Ab- Dadurch konnten wir die Drais-Tour ten. Dafür waren die umfangreichen spielen von Benachrichtigungstö- in Mannheim bequem an unserem Ionic Docs eine große Hilfe. nen beim Erreichen eines Check- Rechner zuhause „nachfahren“ und points die Funktionalität der App auf Herz Um die Karte verwenden zu können, und Nieren testen. mussten die benötigten Libraries - Keyboard: Um auf die Gerätetas- (Softwarebibliotheken) zum Projekt tatur zuzugreifen hinzugefügt werden. Theoretisch hätten die Libraries auch händisch - Diverse weitere (standardmäßig zum Projekt hinzugefügt und einge- vorhandene) Plug-Ins, um auf Ge- bunden werden können. Wir wollten räteinformationen zuzugreifen uns jedoch an die Programmierstan- dards halten und die Libraries rich- tig einbinden, deshalb wurden alle Drittanbieter-Libraries als „Node. JS Modules“ per npm installiert und eingebunden. Dadurch wird stets die richtige Version verwendet und die externen Packages werden separat zum eigenen Code behandelt. Die Modularität der Anwendung wird da- mit gewahrt.
Anfangs stellte dies einige Kompli- kationen dar, da wir nicht wussten wie die Libraries richtig eingebunden werden, doch nach einiger Recher- chearbeit konnte das Problem beho- ben werden.
78 / 131 79 / 131 7. Finaler Stand 7.1 Finaler Funktionsumfang
7.2 Smarthphone-Version
7.3 Tablet-Version 7.1 Finaler Funktionsumfang
Am Anfang unserer Konzeption ha- Auch bei den Soll-Anforderungen Download-Button angedeutet. Wenn ben wir eine Muss-Soll-Kann-Ma- gab es mehrere Änderungen. Zwar man auf diesen Button klickt wird trix erstellt, die den Funktionsum- hat die von uns implementierte die Route bereits unter Gespeicher- fang unserer App beinhaltet hat. Es Drais-Tour einen Teaser, Parameter te Touren als Favorit hinterlegt. Die war geplant die in den Muss- und wie „Höhenprofil“ werden aber nicht Schnittstelle zu Social Media wurde Soll-Teilen aufgelisteten Anforde- angegeben. Wir haben uns dafür ent- ebenfalls bereitas angedeutet, je- rungen komplett umzusetzen. Im schieden nur die wichtigsten Daten doch gelangt man auf kein soziales Folgenden wird der finale, also der wie Streckenlänge oder Schwierig- Netzwerk wenn man versucht darauf tatsächlich umgesetzte Funktions- keitsgrad aufzulisten, um die Über- zu klicken, da dies nicht Bestandteil umfang zusammengefasst. sichtsseite nicht mit zu vielen In- unserer Projektarbeit war hier Profile formationen zu überladen. Auch bei anzulegen. Da wir keine Datenbank Alle Funktionen, die "biketrip.bw" der Kategorisierung der Routen kann implementiert haben konnte die beinhalten musste, wurden, wie ge- man lediglich zwischen einfach, mit- Funktion der Bewertung ebenfalls plant, mit lediglich einigen Änderun- tel und schwer wählen. Wie geplant noch nicht umgesetzt werden. gen, umgesetzt. So entspricht die gibt es eine Suchfunktion, bei der App den modernen Designansprü- man nach dem Ort oder dem Rou- Als Fazit kann man sagen, dass wir chen und lässt sich intuitiv bedienen. tennamen suchen kann. Zudem gibt unsere gesetzten Ziel im vorgegebe- Wie vorgesehen wurde die Drais- es die Möglichkeit einer erweiterten nen Zeitrahmen eingehalten haben Tour komplett realisiert und mit di- Suche. Auch hat der Nutzer die Mög- und darüberhinaus noch einige Fea- versen Medieninhalten gefüllt. Diese lichkeit Routen in seiner Favoriten- tures einbauen oder zumindest an- finden sich an den insgesamt zehn liste zu speichern. Begibt man sich deuten konnten. Checkpoints. Zu jeder Tour gibt es auf eine Tour, so sind alle Check- eine Übersichtsseite mit Daten wie points, die auf dieser Route liegen, Streckenlänge oder Schwierigkeits- erst einmal gesperrt und werden grad sowie einem Teaser, um dem erst dann freigeschaltet, wenn der Nutzer einen kleinen Vorgeschmack Nutzer 10m davon entfernt ist. Dann auf die Tour zu geben. Die App ist in ertönt ein Signal und das Handy vi- der Lage die Position des Nutzers zu briert. Die App navigiert den Nutzer erkennen und sie zu verfolgen. Auch von Checkpoint zu Checkpoint. die Landkartenfunktion ist gegeben. Der Menüpunkt „Radtipps“ wurde in Die Funktionen, die wir bei „Kann“ „Pannentipps“ umbenannt, auf Vi- aufgeführt haben, waren für uns op- deos, Bilder und animierte Grafiken tional. Dennoch wurden einige an- innerhalb eines Pannentipps wurde gedeutet. So kann man momentan für eine bessere Übersichtlichkeit zwar keine Touren oder Medienin- verzichtet. Stattdessen gibt es aus- halte der Checkpoints herunterla- führliche Beschreibungen. Zudem den da hierfür eine Datenbank hätte wurde eine für die Planungsphase zu implementiert werden müssen. Da Hause ausgelegte Tablet-Version mit dies unseren vorgegebenen Zeitrah- angepasstem Layout umgesetzt. men überschritten hätte haben wir die Funktion lediglich mit einem
82 / 131 83 / 131 7.2 Smartphone-Version
Im folgenden haben wir Screenshots den Pannentipps. Wir wollten tes- der Smartphone-Ansicht zusam- ten welche Möglichkeiten geboten mengetragen. Hierbei lässt sich fest- werden und wie gut sich diese in ein stellen, dass diese sich geringfügig bestehendes Design eingliedern und von den Mock-Ups unterscheiden. anpassen lassen. Dies liegt daran, dass wir die nativen Elemente der jeweiligen Betriebs- Mit dem Ergebnis des Zusammen- systeme mit einbinden wollten, da- spiels sind wir sehr zufrieden und der mit die App auf einem iOS-Gerät Look unserer App gefällt uns sehr. nach einer iOS-App und auf einem Die nachfolgenden Screenshots sind Android-Phone nach einer Stan- von einem iOS-Gerät aufgenom- dard-App für dieses Device aussieht. men, die diversen kleinen Unter- schiede lassen sich dann am besten Zusätzlich haben wir ein paar mo- in der Live-Version am Browser ent- derne Möglichkeiten welche uns das decken, Beispielhaft haben wir hier Ionic Framework bot eingebaut wie jedoch noch den Startscreen eines zum Beispiel die Sliderfunktion bei Android-Phones. Startseite mit ausgeklapptem Menü Navigationsansicht
Startseite Android Startseite iOS Suchfunktion Suchergebnisse
84 / 131 85 / 131 Übersicht der Erlebnisradtouren Detailansich der Erlebnisradtour Karl-Drais-Tour: Bildergalerie Karl-Drais-Tour: 3D-Modell
Navigation einer Erlebnistour Karl-Drais-Tour: Animationsfilm Karl-Drais-Tour: Hörspiel Routenplaner
86 / 131 87 / 131 7.3 Tablet-Version
Auch bei der Tablet-Version haben wir manche kleine Änderung gegen- über den Mock-Ups gemacht. Da beim Tablet die Nutzung und der ge- gebene Platz sich vom Smartphone unterscheiden haben wir hier an der Liveversion die Nutzung getestet und das Design zum Beispiel Größe von Buttons überdacht und angepasst.
Im folgenden haben wir alle Screen eines iOS-Tablets zusammengetra- gen.
Übersicht Pannentipps Pannentipp Fahrradkette reparieren
Pannentipp Fahrradschlauch ersetzen Impressum Startseite
88 / 131 89 / 131 Erweiterte Suche Routenplaner
Suchergebnisse Erlebnistouren
90 / 131 91 / 131 Detailansicht Erlebnisradtour Impressum
Player in der Detailansicht Erlebnistour
92 / 131 93 / 131 8. Ausblick 8.1 Zukunft von "biketrip.bw"
8.2 Fazit 8.1 Zukunft von "biketrip.bw" 8.2 Fazit
Die von uns entwickelte App nutzt nem bestimmten Schema Touren zu Der Grundgedanke unserer Projek- Durch die strikte Trennung von Pro- ihr vorhandenes Potenzial aufgrund erstellen. tarbeit war eine „Cross-Platform“ grammierung und Inhalt konnten wir der zeitlichen Beschränkungen zum App im Edutainment-Bereich zu er- außerdem zuerst die App in vollem Ende der Projektarbeit natürlich Darüber hinaus hätten die Nutzer die stellen, welche mit Webtechnologien Funktionsumfang auf die Beine Stel- noch nicht vollständig aus. Möglichkeit, eigene mediale Inhalte programmiert wird. Der besondere len und erst gegen Ende der Projekt- einzufügen. Um die Spreu vom Wei- Ansatz war, dass wir mit der neuen, arbeit den Inhalt in die App einfügen. Insbesondere Funktionen wie die zen zu trennen wäre ein ausgeklü- verbesserten „Version 2“ des Ionic Damit konnte das Testing und die Suche und die vorhandene Katego- geltes Bewertungssystem an dieser Frameworks arbeiteten. Um damit Content-Erstellung parallel neben- risierung machen erst dann Sinn, Stelle Pflicht, da es unmöglich wäre arbeiten zu können, haben wir zuerst einander laufen. wenn es mehrere Touren gibt. Aus alle Nutzerdaten von einer Redakti- die Standards und „best-practices“ diesem Grund haben wir mehrere on auf Richtigkeit und Qualität prü- bei der App-Entwicklung recher- Insgesamt ist die Programmierung leere Beispieltouren angelegt. Der fen zu lassen. chiert und diese auch angewendet. mit Webtechnologien sehr interes- nächste logische Schritt wäre nun Beispielsweise haben wir zu 100% auf sant und zukunftsträchtig. Die Un- die redaktionelle Aufbereitung die- Ein weiteres Feature wäre ein Nacht- das Node-Package-Modules System terschiede zwischen einer nativen ser Touren. Das Vorgehen dabei wäre modus zu implementieren, so kön- (npm) gesetzt, um zusätzliche Libra- und einer Web-App werden dank den analog zur beispielhaft umgesetzten nen die Nutzer auch in der Dämme- ries einzubinden. Dadurch blieb die „Cordova Native Plug-Ins“ immer ge- Drais-Tour. Zunächst müssten Inhal- rung und in Tunneln die Navigation eigentliche App schlank und strikt ringer, jedoch sind die entstehenden te, die zur Route passen, produziert stets gut erkennen. Da es jedoch von fremden Plug-Ins getrennt. Mit Kosten bei der Entwicklung einer und anschließend in die App einge- üblicher ist am Tag Radtouren zu AngularJS und TypeScript hat vor Web-App wesentlich niedriger als fügt werden. fahren haben wir diese Möglichkeit dieser Projektarbeit noch niemand bei einer nativen Programmierung, in unserer Projektarbeit nicht umge- von uns gearbeitet, doch dank den da hierbei für jedes Betriebssystem Darüber hinaus könnte man Nutzern setzt und uns auf andere Features ausführlichen Dokumentationen und separat entwickelt werden müsste. die Möglichkeit geben Konten zu er- konzentriert. einiger Übungszeit fiel es uns im Ver- stellen und im Hintergrund hierfür lauf der Projektarbeit immer leichter. Unserer Meinung nach wird sich die- die App mit einer Datenbank zu ver- Um die Bekanntheit von "biketrip. Die Verwendung von AngularJS in ser Markt in den kommenden Jahren knüpfen. Hierdurch könnte man ei- bw" zu steigern, müssten zusätzlich Version 2 hatte für uns ebenfalls vie- noch stark entwickeln. Dies ist auch nige zusätzliche Features realisieren. die geplante Landingpage sowie ein le Vorteile, da dadurch erstens der daran erkennbar, dass die vorhan- Der Nutzer könnte Touren am Tab- strategisch durchdachter Social Me- Code-Umfang stark reduziert wurde denen Frameworks und Tools stetig let erstellen und abspeichern, diese dia-Auftritt realisiert werden. und zweitens der Code leichter zu weiterentwickelt werden. Wir stehen Touren würde er im Nachgang man lesen und schreiben war. jetzt kurz vor dem finalen Release mit Hilfe eines Kontos auch auf dem Um unsere App später einmal kom- der zweiten Version des Ionic Fra- Handy nutzten und sich navigieren merziell zu nutzen wär eine Mög- Durch unsere strukturierte Heran- meworks, welches die Möglichkeiten lassen. Mit Hilfe der integrierten Da- lichkeit In-App-Werbung anzubieten. gehensweise (bspw., dass wir für bei der Cross-Platform Entwicklung tenbank wäre es auch möglich, dass Wir könnten die freien Werbeplätze jede Seite eine eigene Komponente nochmals stark erweitern und ver- Nutzer die Touren bewerten oder so- an Fahrradhändler, Restaurants und verwendet haben), konnten wir das bessern wird. Selbst bei der von uns gar eigene Touren anlegen und an- Touristikangebote verkaufen, welche Projekt schnell anlegen und konnten eingesetzten „Release Candidate“ deren Radlern zur Verfügung stellen in der Nähe der Touren liegen. Eben- uns dadurch schneller und intensi- Version hatten wir nie das Gefühl, können. Um letzteres zu realisieren, falls könnten wir Essenstipps in die ver um die programmiertechnischen dass wir uns auf einem unfertigen müsste man jedoch noch ein Web App mit einfügen und Restaurants Features kümmern. Framework bewegen. Interface implementieren, der es den gegen Bezahlung eine Nennung an- Nutzern ermöglichen würde nach ei- bieten.
96 / 131 97 / 131 9. Anhang 9.1 Konkurrenzanalyse
9.2 Literaturverzeichnis
9.3 Bildverzeichnis 9.1 Konkurrenzanalyse 1. „Radnetzetz Bayern“
angeboten mit integriertem Kontakt zum Bewertung Gasthof
(super, sehr gut, Gibt es eine Offline- Ja, man kann sich Radwege, Radrouten und Sehr gut okay, Funktion? Karten abspeichern und herunterladen Beschreibung (immer ausfüllen) Kriterien durchschnittlich, Gibt es eine große enttäuschend, Auswahl an Sehr gut Sehr große Auswahl unbefriedigend, vorgefertigten sehr schlecht) Strecken?
Streckeninfo sehr kurz und wenig ansprechend, mit Längenangabe und Bedienung Höhenmeter darunter finden sich Hinweis, diese bestehen Wie sind die unbefriedigend aus Links zu diversen Internetseiten, bei Ja für einen durchschnittlichen Smartphone- Beschreibungen? Ist die Bedienung Nutzer ist die Benutzung selbsterklärend denen man nicht immer den Sinn versteht Sehr gut selbsterklärend? Lediglich die genutzten Reiter unter dem Sehenswertes in extra Reiter, kurz und Punkt Radwege sind unüblich bündig, nicht sonderlich ansprechend auch mit Link versehen Das Hauptmenü besteht aus vier Punkten am Die eingebundenen Bilder der Radwege sind unteren Displayrand und ist sehr intuitiv zu Wie wirken die Sehr schlecht sehr pixelig und klein, man kann sie nicht Ist die Menüführung nutzten eingesetzten Medien? Durchschnittlich größer anschauen intuitiv? In der Kartenansicht gibt es zwei Ausklappmenüs, dies ist etwas irritierend Muss man Geld zunächst bezahlen um alle Durchschnittlich Nein Funktionen nutzen zu Nein, ist jedoch auch nicht unbedingt Gibt es eine können? erforderlich, wäre aber optional sehr schön Einführung in die Durchschnittlich für Nutzer die nicht mit dem Smartphone Bedienung? Gibt es Möglichkeiten aufgewachsen sind Durchschnittlich Nein zur Personalisierung?
Gibt es störende Nein, lediglich beim Start kommt Werbung für Karte herunterladen erweist sich als Werbeeinblendungen? Durchschnittlich das Land Bayern und die App selbst, jedoch Läuft die App Unbefriedigend Geduldsprobe Pop-ups? keine sehr ansprechende absturzfrei/fehlerfrei? Suchfunktion findet nicht alle Dörfer
Ist sie für viele Geräte Funktionen und für iOS- und Android- Sehr gut Ja Vorgefertigte Radwege nachzufahren, hierbei Betriebssysteme Welche Funktionen Sehr gut gibt es eine sehr große Auswahl kompatibel? bietet die App? Übernachtungsmöglichkeiten werden
100 / 131 101 / 131 Ja man kann eine Route planen und Werden Verbindungen Zwischenpunkte eingeben, welche man zu Social Media passieren möchte eindeutig angeben Durchschnittlich Nein, solche Verbindungen gibt es nicht Man kann auch öffentliche Verkehrsmittel und können einbinden abgeschalten Kann man eigene Man kann auswählen ob alle Straßen und werden? Radstrecken Sehr gut Wege oder Bayernnetz für Radler bevorzugt kreieren? werden soll Design Man kann Durchschnittsgeschwindigkeit auswählen, damit geschätzt wird wie lange man benötigt Das Logo ist zwar schlicht und besitzt einen hohen Wiedererkennungswert, jedoch Man kann Steigungen zulassen oder Ist das Logo funktioniert es nur mit dem Text vermeiden Unbefriedigend ansprechend? Es lässt nicht direkt auf einen Radnavigator Kann man eigene schließen, eher auf ein Wörterbuch oder Ja man kann diese Strecken speichern und Strecken Super ähnliches auch offline nutzen abspeichern? Sind Titel und Kann man die Beschreibung im App Unbefriedigend Der Titel ist sehr lang und schwer einprägsam Eigene Strecken kann man teilen Strecken bewerten, Enttäuschend Store ansprechend? Man kann keine Strecke bewerten teilen oder liken? Die Farbgebung besteht aus einem hellen Wie wirkt die blau und grau Farbgebung und das Datenschutz Die Farben wirken veraltet und vermitteln Design? Was ist Enttäuschend nicht den Eindruck einer modernen App besonders gut oder Standort positiv wirken einzig die schön gestalteten Welche schlecht? Berechtigungen Speicher Icons welche die Farben gut ausnutzen benötigt die App? Sehr gut diese zwei Berechtigungen benötigt die App
Sind diese und da sie keine weiteren möchte ist die Fazit gerechtfertigt? vollkommen in Ordnung
Werden Daten an Macht die Nutzung Nein, es ist kein ansprechendes Durchschnittlich Ist nicht bekannt bekannt Unbefriedigend Dritte weitergegeben? der App Spaß? Nutzungserlebnis
Wird Nutzer über die Ist die App im App- Nein, jedoch ist nicht bekannt ob Daten Unter Umständen, denn wenn man das Wort Datenverwendung Durchschnittlich Store leicht zu Unbefriedigend weiter verwendet werden „Navigation" aufgeklärt? finden?
Kann man selbst Ist die App kostenlos/ Sehr gut Kostenlos regeln für was Nein, jedoch ist auch hier nicht bekannt ob kostengünstig? Durchschnittlich persönliche Daten Daten weiter verwendet werden verwendet werden?
102 / 131 103 / 131 2. „RadROUTENPLANER Baden-Württemberg“
Wurde die App im App-Store Alle Funktionen werden wahrheitsgetreu Bewertung Sehr gut realitätsgetreu beschrieben dargestellt? (super, sehr gut, okay, Gibt es eine Beschreibung (immer ausfüllen) Kriterien durchschnittlich, Internetseite zur Sehr gut Ja App? enttäuschend, unbefriedigend, Gibt es sehr schlecht) Besonderheiten in der Sehr gut Integrierte Übernachtungsmöglichkeiten App? Überraschendes? Bedienung Nein , nicht unbedingt, da man auch jedwede Würden wir die App - andere Navigationsapp nutzen könnte, einen weiterempfehlen? Ja, denn die verwendeten Symbole (außer besonderen Mehrwert sehe ich nicht Ist die Bedienung dem Symbol links unten) sind einfach zu Sehr gut selbsterklärend? interpretieren Der Menübutton ist als solcher klar erkennbar
Eindrücke der APP „Bayernnetz für Radler“ Ist die Menüführung Ja. Das Menü besteht aus 3 Unterpunkten mit Super intuitiv? jeweils einer eindeutigen Bezeichnung
Nein, es gibt weder eine Einführung in die Gibt es eine Bedienung, noch eine Bedienungsanleitung. Einführung in die Durchschnittlich Diese ist allerdings auch nicht nötig, weil die Bedienung? Menüpunkte und Symbole selbsterklärend sind
Gibt es störende Nein, die App is komplett werbe- und pop- Werbeeinblendungen? Super ups-frei Pop-ups?
Funktionen
Man hat die Möglichkeit, eine Route vom Punkt A (z.B. aktueller Standort) zum Punkt B einzurichten. Zudem lassen sich u.a. das Welche Funktionen Sehr gut Abfahrdatum, der Zwischenstopp, Art der Erste Seite der App Beschreibung einer Radtour Routenplaner zum Erstellen eigener bietet die App? Touren Route (bequem, schnell) und die gewünschte Fahrgeschwindigkeit (langsam, normal, schnell) eingeben
104 / 131 105 / 131
Vorgeschlagene Routen können im Detail Muss man Geld angeschaut und anschließend geteilt, bezahlen um alle Nein, die Nutzung der App ist komplett Super gespeichert oder auf der Karte angezeigt Funktionen nutzen zu kostenlos werden können? Berechnung der aktuellen Standpunkts Gibt es Möglichkeiten Außer der Möglichkeit eigene Routen kontinuierlich oder alle 5 Minuten Unbefriedigend zur Personalisierung? aufzunehmen, gibt es keine. Warnung beim Abkommen vom Weg
Ansicht vom Höhenprofil der Route Enttäuschend Nein, die App ist bei unseren Tests mehrere Läuft die App Auswahl aus 40 vorgefertigten Strecken mit Male abgestürzt. Beim erneuten Start werden absturzfrei/fehlerfrei? festgelegten Start- und Zielpunkten alle Einstellung auf Standard zurückgestellt Bestimmung seiner aktuellen Standposition ist jederzeit möglich Ist sie für viele Geräte Eigene Routen können aufgenommen und und für iOS- und abgespeichert werden Android- Sehr gut Ja Betriebssysteme Die Offline-Funktion funktioniert lediglich bei kompatibel? Gibt es eine Offline- Unbefriedigend der Standortsuche des Geräts. Unterwegs Ja, man kann eigene Strecken aufnehmen und Funktion? muss die GPS-Funktion des Handys Kann man eigene speichern. Es werden u.a. die maximale eingeschaltet sein Radstrecken Sehr gut Geschwindigkeit und die zurückgelegte kreieren? Ja, es gibt insgesammt 40 vorgefertigte Strecke notiert Routen. Diese haben allerdingt einen Gibt es eine große Kann man eigene vorbestimmten Startpunkt. Befindet man sich Auswahl an Strecken Sehr gut Ja Okay nicht an eben diesem Punkt, kriegt man eine vorgefertigten abspeichern? Warnung. Der Weg von seinem aktuellen Strecken? Standort zum Startpunkt der Route wird nicht Kann man die berechnet Strecken bewerten, Sehr schlecht Nein teilen oder liken? Wie sind die Sehr schlecht Es gibt zu keiner Route eine Beschreibung. Beschreibungen? Datenschutz Die Karte lässt sich endweder im Default- Modus oder als topographische Karte anzeigen Welche Beim Herunterladen wird man nach der Wie wirken die Die Schriftzüge auf den Logos sind zu klein, Berechtigungen Enttäuschend Berechtigung gefragt, Informationen über den eingesetzten Medien? Durchschnittlich um sie lesen zu können benötigt die App? Standort des Geräts sowie die darauf Die App bietet mehrere Features wie z.B. „points of interest“ an. Da sie aber ständig abstürzt, war es bei den Test nicht möglich, diese zu finden
106 / 131 107 / 131 Sind diese gespeicherten Daten (Fotos, Multimedia, sodass an den Seiten weiße und graue gerechtfertigt? Dateien) zu nutzen Flächen entstanden sind. Dadurch wirkt das Ja, im Bezug auf die Informationen zum Ganze unästhetisch. Die Karte lässt sich Gerätestandort zudem nicht raus zoomen
Werden Daten an Sehr schlecht Darüber wird nicht aufgeklärt Dritte weitergegeben? Fazit
Wird Nutzer über die Datenverwendung Sehr schlecht Nein Macht die Nutzung Sehr schlecht Nein, denn die App stürzt ständig ab aufgeklärt? der App Spaß?
Kann man selbst Ist die App im App- Ja, die App steht bei den Suchergebnissen an regeln für was Store leicht zu Super Sehr schlecht Nein der ersten Stelle persönliche Daten finden? verwendet werden? Ist die App kostenlos/ Werden Verbindungen Super Ja, die App ist komplett kostenlos kostengünstig? zu Social Media eindeutig angeben Sehr schlecht Es gibt keine Verbindungen zu sozialen Wurde die App im und können Medien App-Store Sehr gut Ja abgeschalten realitätsgetreu werden? dargestellt?
Ja - www.radtourenplaner-bw.de Design Auf der Website kann man, analog zur App, Gibt es eine seine Route planen und diese anschließend Internetseite zur Sehr gut Das Logo ist einfach gestaltet, allerdings kann ausdrucken, teilen oder herunterladen. Auch man den Schiftzug, aufgrund der kleinen App? Ist das Logo die vorgefertigten Routen können auf der Unbefriedigend Größe, nicht lesen ansprechend? Website gefunden werden Keine ansprechende Farbkombination (blau, pink und gelb) Nein, die App unterscheidet sich kaum von anderen Radtouren-Apps, weil sie keinen Die Beschreibung im Store ist ausführlich und Sind Titel und besonderen Content bietet. Darum ähnelt sie beschreibt sehr gut die Funktionen der App. Beschreibung im App Sehr gut Gibt es stark einem herkömmlichen Navy Zur Veranschaulichung gibt es ein Paar Store ansprechend? Besonderheiten in der Darstellung der Karte ist nicht ansprechend, Screenshots App? Unbefriedigend da sie einfach herausgeschnitten wurde, Wie wirkt die Die Farbgebung ist in Ordnung Überraschendes? sodass unschöne Flächen außen rum Farbgebung und das Die verwendeten Symbole sind gut zu sehen entstanden Design? Was ist Enttäuschend und leicht verständlich Die App verbraucht viel Energie, sodass der besonders gut oder Baden-Württemberg wurde es aus der Akku vom Handy schnell leer wird. Dies ist bei schlecht? Weltkarte praktisch herausgeschnitten, einer langen Radtour sehr problematisch
108 / 131 109 / 131
3. „bikemap“
Nein, denn sie unterscheidet sich kaum von Würden wir die App anderen Radtouren-Apps und ist aufgrund der Bewertung Unbefriedigend weiterempfehlen? auftretenden Fehler, unserer Meinung nach, (super, sehr gut, schlecht zum Fahrradfahren geeignet okay,
Beschreibung (immer ausfüllen) Kriterien durchschnittlich, Eindrücke der APP „RadROUTENPLANER B-W“ enttäuschend, unbefriedigend, sehr schlecht)
Bedienung
Ist die Bedienung Super Ja ist selbsterklärend selbsterklärend?
Ist die Menüführung Sehr Gut Ja ist intuitiv intuitiv?
Gibt es eine Jein, Punkte werden erklärt, kann aber Einführung in die Enttäuschend übersehen werden Bedienung?
Gibt es störende Werbeeinblendungen? Super Nein, bisher keine Werbung gesehen Liste der vorgefertigten Routen Formular zur Berechnung einer Standardansicht mit der Karte Pop-ups? Route von A nach B von Baden-Württemberg
Funktionen
Welche Funktionen Fahren von Routen, aufzeichnen von Routen, Sehr gut bietet die App? bewerten und kommentieren
Gibt es eine Offline- Super Ja, allerdings nur in der Premium-Variante Funktion?
Gibt es eine große Auswahl an Sehr gut Ja, größtenteils durch Community erzeugt vorgefertigten Strecken?
110 / 131 111 / 131 Wie sind die Je nach Verfasser sehr ausführlich bis gar Okay Beschreibungen? nicht formuliert Datenschutz
Wie wirken die Sehr schlecht Keine expliziten Medien eingesetzt Welche eingesetzten Medien? Berechtigungen
Muss man Geld benötigt die App? Super Wenige; Ja sind gerechtfertigt bezahlen um alle Ja, Premium-Abo > Offline-Funktionen / Sind diese Super Funktionen nutzen zu Keine Werbung mehr gerechtfertigt? können? Werden Daten an Super Nein nur an die Dienste ( Bei Anmeldung) Ja, Premium-Abo > Offline-Funktionen / Dritte weitergegeben? Gibt es Möglichkeiten Keine Werbung mehr Ja, Anmeldung per Super Wird Nutzer über die zur Personalisierung? Account(bikemap.net/facebook/google+) Datenverwendung Super Hilfe > Datenschutz
aufgeklärt?
Läuft die App Sehr gut Bisher keine Mängel Kann man selbst absturzfrei/fehlerfrei? regeln für was Sehr schlecht Nein Keine Einstellungen möglich persönliche Daten Ist sie für viele Geräte verwendet werden? und für iOS- und Für Android und iOS verfügbar - keine Android- Super Gerätebeschränkungen Werden Verbindungen Betriebssysteme zu Social Media kompatibel? eindeutig angeben Durchschnittlich Anmeldung über fb/Google+ sonst nein und können Kann man eigene abgeschalten Radstrecken Super Ja, aufzeichnen von Routen möglich werden? kreieren?
Kann man eigene Design Strecken Super Ja, speichern eigener Routen möglich abspeichern? Ist das Logo Super Schlicht und ansprechend gestaltet Kann man die ansprechend? Strecken bewerten, Super Ja, Bewertung und Kommentare möglich Sind Titel und teilen oder liken? Beschreibung im App Super Ja Store ansprechend?
Wie wirkt die Farbgebung und das
Design? Was ist Super Simpel und übersichtlich aufgebaut besonders gut oder schlecht?
112 / 131 113 / 131 Eindrücke der APP „bikemap“ Fazit
Macht die Nutzung Super Bisher ja der App Spaß?
Ist die App im App- Store leicht zu Super Ja finden?
Ist die App kostenlos/ Super Ja kostengünstig?
Wurde die App im App-Store Super Ja realitätsgetreu dargestellt?
Gibt es eine Internetseite zur Super Ja Ansicht der Höhenmeter Ansicht der Route Übersicht der Routen App?
Gibt es Besonderheiten in der Sehr schlecht Keine Besonderheit aufgefallen App? Überraschendes?
Würden wir die App Sehr gut Ja, simpel und schlicht > tut was sie soll weiterempfehlen?
114 / 131 115 / 131 4. „komoot“
Ja, man kann eine komplette Region herunter Bewertung Gibt es eine Offline- Sehr gut laden und auf dem Smartphone lokal Funktion? abspeichern (super, sehr gut, okay, Gibt es eine große Selbst bei sehr eingeschränkten Suchkriterien Kriterien Beschreibung (immer ausfüllen) Auswahl an durchschnittlich, super erhält man meist über 50 vorgefertigte vorgefertigten enttäuschend, Touren Strecken? unbefriedigend, sehr schlecht) Neben Angaben zur Dauer, Länge und Höhenmetern gibt es ein Diagramm welches zeigt, wie viel Prozent der Strecke auf einem Wie sind die Radweg zurückgelegt werden Bedienung Sehr gut Beschreibungen? Des Weiteren gibt es Bilder und Kommentare anderer Nutzer. Für einen durchschnittlichen Nutzer ist die Außerdem gibt es ein empfohlenes Ist die Bedienung Sehr gut App sehr leicht zu bedienen und die Nutzung Fitnesslevel selbsterklärend? weitestgehend selbsterklärend Es gibt zu jeder Tour verschiedene Bilder. Man Die Startseite beinhaltet bereits vorgefertigte Wie wirken die kann sich die Bilder zwar größer anzeigen Okay Touren, welche man direkt auswählen kann. eingesetzten Medien? lassen, jedoch werden keine anderen Medien Ist die Menüführung Sehr gut Am oberen Bildschirmrand gibt es eingesetzt intuitiv? verschiedene Reiter. Diese Anordnung kennt man aus vielen anderen Apps bereits Muss man Geld Eine Startregion (z.B. die „Ortenau“) ist bezahlen um alle kostenlos. Jede weitere kostet in etwa 3,99 €. Enttäuschend Gibt es eine Es gibt keine Einführung, jedoch kann man Funktionen nutzen zu Ein Paket, das alle Touren und Funktionen Einführung in die Durchschnittlich direkt eine Unterkategorie wie z.B. Rennrad können? beinhaltet, kostet 29,99 € Bedienung? oder Mountainbike auswählen Jeder Nutzer hat sein eigenes Profil und kann Es gibt keine Werbung, jedoch muss man sich seine bevorzugte Radsportart eintragen Gibt es störende Gibt es Möglichkeiten beim ersten Start der App anmelden. Dies Sehr gut Des Weiteren kann man kleinere Anpassungen Werbeeinblendungen? Okay zur Personalisierung? kann schnell durch ein vorhandenes Google- vornehmen, z.B. ob die Länge in Kilometern Pop-ups? Konto erledigt werden oder Meilen angegeben werden soll
Sowohl die Offline-Funktion, als auch das Funktionen Läuft die App normale Navigieren in der App laufen auf Sehr gut absturzfrei/fehlerfrei? einem leistungsfähigen Smartphone Vorgefertigte Touren mit viel Informationen problemlos zu Punkten wie Länge, Dauer, Schwierigkeit, Ist sie für viele Geräte Sowohl die Offline Funktion, als auch das Welche Funktionen Höhenmeter, Erfahrungen anderer Nutzer Super und für iOS- und normale Navigieren in der App laufen auf bietet die App? Des Weiteren gibt es verschiedene Android- Super einem leistungsfähigen Smartphone Navigationshilfen, u.a. auch eine Betriebssysteme problemlos Sprachausgabe kompatibel? Die App ist im Google Play Store und im Apple
116 / 131 117 / 131 App Store verfügbar Werden Verbindungen Des Weiteren gibt es eine Version für die zu Social Media Ja, erst beim Aktivieren wird eine Verbindung Apple Watch und Apple Health eindeutig angeben Super zu anderen Plattformen hergestellt und können Man kann den Start- und Endpunkt sowie abgeschalten verschiedene Zwischenstationen eintragen; werden? Kann man eigene zusätzlich kann man sein Fitnesslevel Befriedigend Radstrecken angeben
kreieren? Außerdem ist es möglich öffentliche Design Verkehrsmittel einzubinden
Das Logo ist schlicht, jedoch erkennt man Ist das Logo nicht direkt was es darstellen soll Kann man eigene ansprechend? Befriedigend Die Farbgestaltung ist modern. Strecken Sehr gut Ja, Offline-Nutzung ist möglich
abspeichern? Der Titel „komoot – Hike & Bike GPS Maps“ ist Sind Titel und zwar lang, jedoch unmissverständlich Die App bietet selbst eine Art soziales Beschreibung im App Kann man die Super Die gewählten Screenshots und die Netzwerk mit Kommentar und Likesystem an; Store ansprechend? Strecken bewerten, Super Kurzbeschreibung sind sehr ansprechend darüber hinaus kann man seine Ergebnisse teilen oder liken? auf anderen Plattformen teilen Die Schrift ist groß und gut leserlich Wie wirkt die Die Farben des Logos finden sich in der App Farbgebung und das wieder Datenschutz Design? Was ist Sehr gut Es wird viel mit Bildern gearbeitet besonders gut oder Große Kacheln, welche gut aussehen schlecht? Welche Standort, In-App-Einkäufe, Medien und erleichtern zusätzlich die Bedienung Berechtigungen Netzwerkadapter des Telefons benötigt die App? - Sie werden benötigt, um die App im vollen
Sind diese Umfang nutzen zu können und sind daher Fazit gerechtfertigt? gerechtfertigt
Die App hat ein ansprechendes Interface und Werden Daten an Soweit ersichtlich, geschieht dies nur beim Macht die Nutzung läuft flüssig, daher ist die Nutzung sehr Dritte weitergegeben? Okay aktiven Teilen der Ergebnisse oder Touren der App Spaß? Sehr gut angenehm
Wird Nutzer über die Es ist ersichtlich, dass geteilte/gefahrene Ist die App im App- Aufgrund einer Downloadzahl von über einer Datenverwendung Okay Touren auf dem Profil angezeigt werden Store leicht zu Million und einer Wertung von 4,4 von 5 ist aufgeklärt? Super finden? die App sehr weit oben bei der Suchanfrage
Kann man selbst Die Startregion ist kostenlos. Jede weitere regeln für was Ist die App kostenlos/ Ja, eine Trennung ist möglich muss extra dazu gekauft werden persönliche Daten Sehr gut kostengünstig? Es ist ebenfalls möglich alle Funktionen zu verwendet werden? Enttäuschend einem Festpreis freizuschalten
118 / 131 119 / 131 5. „outdooractive“
Bewertung
(super, sehr gut, Wurde die App im okay, App-Store Alle Funktionen werden wahrheitsgetreu Beschreibung (immer ausfüllen) Kriterien durchschnittlich, realitätsgetreu Super beschrieben dargestellt? enttäuschend, unbefriedigend, Gibt es eine sehr schlecht) Internetseite zur Sehr gut Ja, eine Internetseite ist vorhanden App?
Gibt es Auch für andere Sportarten wie Hiking und Bedienung Besonderheiten in der Joggen nutzbar App? Super Es kann zwischen verschiedenen Radtypen Bei der Karte: (App und Web): teilweise Überraschendes? unterschieden werden Ladezeiten.Footer nicht konstant (auf jeder Seite beinhaltet der Footer andere Symbole). Würden wir die App Ja, da die Aufmachung sehr ansprechend ist Ist die Bedienung Sehr gut Durchschnitt Für mich sollte der Footer statisch bleiben. weiterempfehlen? und es viele vorgefertigte Touren gibt selbsterklärend? Die Navigation und Filterung sollte meiner
Meinung nach eher oben im Header Eindrücke der APP „komoot“ stattfinden Ist die Menüführung Durchschnitt Teilweise, aber trozdem sehr komplex intuitiv?
Die Startseite besteht aus dem Logo (obere Hälfte) und dem Menü (untere Hälfte). Es ist schlicht, aber meiner Meinung nach etwas Gibt es eine unübersichtlich Einführung in die Durchschnitt Die restliche Bedienung ist in Ordnung, aber Bedienung? sehr komplex. Der Footer unterschiedet sich in fast jeder Ansicht und es benötigt eine lange Eingewöhnung, bis man weiß, wo was zu finden ist. Es gibt keine Swipe Gesten o.ä.
Gibt es störende Werbeeinblendungen? Schlecht Nein Pop-ups?
Erste Seite der App Karte mit Navigationshilfe Auswahl der Sportarten
120 / 131 121 / 131 Ja, man kann sich registrieren und erhält Funktionen danach Zugriff auf die Community. Man kann Gibt es Möglichkeiten eigene Touren (mit Anleitung und Fotos) Sehr gut Touren (für Wanderer, Radfahrer, Kletterer zur Personalisierung? hochladen und seine Touren mit der Website etc.) synchronisieren. Die Tour kann am PC geplant und am Smartphone gefahren werden. Reiseführer: Der Fokus liegt auf bezahlten Attraktionen. (Schwimmbäder, Schlösser, Läuft die App Gasthäuser etc.) Medien: Text und Bild und Super Bisher ja. Praxiseinsatz wurde nicht getestet. absturzfrei/fehlerfrei? Welche Funktionen ggf. Preise oder Öffnungszeiten Sehr gut bietet die App? Viele Wegpunkt wirken generisch erstellt und Ist sie für viele Geräte bieten kein Bild und keine Beschreibung. und für iOS- und Für iOS und Android gibt es eine offizielle Touren aufzeichnen Android- Sehr gut App. Für Windows Phone eine Alternativapp Community (Kommentare, Touren teilen etc.) Betriebssysteme Bedingungen (Warnungen und Hinweise zu kompatibel? bestimmten Touren) Kann man eigene Ja sowohl vor der Tour (Tourenplaner) als Gibt es eine Offline- Ja, Karten und Touren können Radstrecken Sehr gut Super auch während der Tour (Tour aufzeichnen) Funktion? heruntergeladen werden kreieren?
Gibt es eine große Kann man eigene Ja. Sowohl auf dem PC als auch in der App. Auswahl an Ja (130.000), die Strecken kommenzu 99% Strecken Sehr gut Wenn man registriert ist, dann können die Super vorgefertigten aus der Community abspeichern? Strecken übertragen werden Strecken? Kann man die Ja, Touren sind nachträglich für alle ver-
Hängt von der Tour ab. Da jeder Nutzer Strecken bewerten, Gut fügbar. Es gibt ein Bewertungssystem und die Touren erstellen kann, schwankt die Qualität. teilen oder liken? Tour kann man über einen Link verschicken Wie sind die Gut Besondere Touren sind mit dem Logo des Beschreibungen? Unternehmens gekennzeichnet und garantiere Datenschutz eine gewisse Qualität
Zu jeder Tour können die wichtigsten Daten, GPS, Fitness (Apple Health), Fotos / Kamera eine Beschreibung und Bilder hinzugefügt (Um Bilder hinzuzufügen), Identität ( Wie wirken die werden. Zusätzlich können „Wegpunkte“ Umoutdooractive Konto im Gerät zu Gut bis durchschnitt eingesetzten Medien? eingefügt werden die im Reiseführer Welche registrieren) erscheinen. Der Reiseführer besteht jedoch Berechtigungen Ja, Berechtigungen sind sinnvoll. auch nur aus Bildern und Texten benötigt die App? Durchschnittlich Berechtigungen sind bei iOS manuell Sind diese abschaltbar und müssen bei erstmaliger Muss man Geld gerechtfertigt? Benutzung gewährt werden bezahlen um alle Gut Ja (9,99€) GPS und Fitness für eine Outdoor App Funktionen nutzen zu unumgänglich. GPS wird nur beim Verwenden können? aktiviert
122 / 131 123 / 131 Werden Daten an Deutscher Hersteller, daher auf jeden Fall - Dritte weitergegeben? deutsche Datenschutzrichtlinien Fazit
Wird Nutzer über die Die Bedienung ist meiner Meinung nach sehr Datenverwendung - - Macht die Nutzung Gut komplex, weil die App Hunderttausende aufgeklärt? der App Spaß? Touren beinhaltet Kann man selbst Jein. Die App ist bekannt, aber befindet sich regeln für was - - nicht in den Top Charts des Apple Appstores. persönliche Daten Google Play sagt, dass die App zwischen 100. verwendet werden? Ist die App im App- Und 500 Tausend Mal heruntergeladen wurde. Store leicht zu – Werden Verbindungen Der Anbieter bezeichnet sich selbst als finden? zu Social Media Europas größte Outdoor Plattform. Ich habe eindeutig angeben Nicht gegeben. Keine Verbindung zu Facebook die App durch einen Artikel in Connect - und können oder Google gefunden abgeschalten Ist die App kostenlos/ werden? Gut Kostengünstig. 10€ (einmalig) angemessen kostengünstig?
Design Wurde die App im App-Store Sehr gut Ja realitätsgetreu Ja. Das Logo besteht aus dem O in Ist das Logo dargestellt? Sehr gut „outdooractive“. Es wird mit Höhenlinien als ansprechend? Designelement gearbeitet (in der App) Gibt es eine Ja. Dienst sowohl im Web, als auch auf der Internetseite zur Super Sind Titel und App verfügbar App? Beschreibung im App Gut Ja Store ansprechend? Merkzettel: interessante Touren können gebookmarked werden Das Design wirkt gut, aber nicht AppleWatch Unterstützung außergewöhnlich. Der Footer wurde als Wie wirkt die Gibt es Redaktion sehr aktiv. Bietet viele Haupt- Filter und Navigationselement Farbgebung und das Besonderheiten in der Themenwanderungen und stellt viele Touren gewählt, was meiner Meinung nach etwas - Design? Was ist App? zur Verfügung. Durchschnitt umständlich ist.Ich finde die Farben nicht besonders gut oder Überraschendes? Stellen eine API zur Verfügung, die wir evtl. ganz passend. Das helle grau der App ist oft schlecht? sogar für unsere App verwenden können. nicht gut lesbar auf dem hellen grün Verwenden ebenfalls Leaflet.js und (Akzentfarbe) OpenStreetMap App wirkt teilweise noch etwas unfertig
Würden wir die App - Ja, aber nicht als Navi weiterempfehlen?
124 / 131 125 / 131 Eindrücke der APP „outdooractive“
Übersicht der Touren Beschreibung einer Tour Navigationsmodus
126 / 131 127 / 131 9.2 Literaturverzeichnis 9.3 Bildverzeichnis http://www.karl-drais.de/de_biographie.pdf [Aufgerufen am 16.12.2016] Der Großteil der Bilder der Dokumentation stammen aus dem freien Stockar- chiv www.unsplash.com. Innerhalb unserer App haben wir Bilder von usplash Schlosser, Hartmut (2014): Interview mit WebTechCon/IPC-Sprecher Florian oder eigene bzw. gesponsortes Material verwendet. Alle weiterern werden im Rappl zum Thema TypeScript (https://entwickler.de/online/typescript-der-ja- Impressum aufgeführt. vascript-killer-aufdem-pruefstand-139619.html) [Aufgerufen am 06.01.2017] Unsplash License https://de.wikipedia.org/wiki/TypeScript [Aufgerufen am 05.01.2017] All photos published on Unsplash are licensed under Creative Commons Zero https://de.wikipedia.org/wiki/JavaScript [Aufgerufen am 05.01.2017] which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing https://github.com/driftyco/ionic2-starter-sidemenu attribution to the photographer or Unsplash. https://angular.io/features.html [Aufgerufen am 06.01.2017] https://unsplash.com/license
Ionic Framework Docs: https://ionicframework.com/docs/ Seite 1 Abb1: Pietro De Grandi - https://unsplash.com/search/bike?photo=TDFtL-teb5c Angular JS Docs: https://angular.io/docs/ts/latest/ Seite 2 - 3 Google Maps API Docs: https://developers.google.com/maps/terms?hl=de Abb1: Jace Grandinetti - https://unsplash.com/search/bike-river?photo=VEXIwDcY1gw
LeafletJS Docs: http://leafletjs.com/reference-1.0.2.html Seite 4 Abb3: Soroush Karimi - https://unsplash.com/search/bike?photo=igHY7CFa-dI PhoneGap Docs: http://phonegap.com/ Seite 6 / 7 https://de.wikipedia.org/wiki/Model_View_ViewModel Abb1: Oliur Rahman - https://unsplash.com/collections/178851/mock-ups?photo=_8S9nEm- CZK0 https://www.quora.com/What-are-the-basic-differences-between-Phone- Abb2: https://www.200jahre-fahrrad.de/#jubilaeumswettbewerb Gap-Ionic-Titanium-and-Cordova Abb3: Saulo Mohana - https://unsplash.com/search/iphone?photo=D_kOW7iHNnw
Dayley, Brad (2015): Learning AngularJS, Online Ausgabe, Addison-Wesley Seite 8 / 9 Abb1: Redd Angelo - https://unsplash.com/search/iphone?photo=h34WJ4T9uhw + Brink, Sascha: AngularJS Online-Buch (https://angularjs.de/buecher/angularjs- Hubert Berberich - https://commons.wikimedia.org/wiki/File:SchlossMannheimEHof.jpg buch#was-ist-angularjs) [Aufgerufen am 05.01.2017] Abb2: Viktor Kern - https://unsplash.com/search/bike-river?photo=0gLH1kqRldc
Muller, Eelco (2015): Angular 1 vs. Angular 2: Key Differences Seite 10 / 11 (https://dzone.com/articles/typed-front-end-with-angular-2) [Aufgerufen am Abb1: Peter Hershey - https://unsplash.com/search/bike?photo=C52dylsC1-g 06.01.2017] Abb2: Unsplash - https://pixabay.com/de/fahrrad-fahren-fahrräder-radfahren-1082281/ Abb3: Ornella Binni - https://unsplash.com/search/bike?photo=vSl1odYyd8w Abb4: Christina Gattardi - https://unsplash.com/search/bike?photo=-22C5tv2hyY Abb5: Javir Calvo - https://unsplash.com/search/bike?photo=bnmzo3bMkCY Abb6: Angelina Litvin - https://unsplash.com/search/bike?photo=y_vCgwNEsWI
128 / 131 129 / 131 Seite 12 Seite 60/61 selbst erstellt Abb1: Matthias S. - https://commons.wikimedia.org/wiki/File:SAP_Arena.jpg / public domain. Abb2: Noelle Reichert Seite 16 Abb1: Lauren Ellis - https://unsplash.com/search/bike-red?photo=6OJvXwAj02w Seite 62/63 Abb1+2: Noelle Reichert Seite 21 Abb1: Redd Angelo - https://unsplash.com/search/iphone?photo=h34WJ4T9uhw Seite 64 Abb1: Chris Becker - https://unsplash.com/search/bike?photo=6ErV8fw0l34 Seite 22/23 Abb1: FreeWorld - https://pixabay.com/de/fahrrad-radfahrer-man-freizeit-1160095/ Seite 66 Abb2: Ben_Kerckx - https://pixabay.com/de/radfahrer-menschen-rucksack-885609/ Abb1: Sylwia Bartyzel - https://unsplash.com/search/map?photo=D2K1UZr4vxk Abb3: William Iven - https://unsplash.com/search/facebook?photo=DfMMzzi3rmg Seite 69 Seite 24 Abb.1: http://ionicframework.com Abb1: Semih Adyin - https://unsplash.com/search/bike?photo=kyXw6T6i_-A Seite 71 Seite 39 Abb1+2: Bildschirmaufnahmen Abb1: Anna Demianenko - https://unsplash.com/search/tablet?photo=CPWhnIkL4Lk Seite 73 Seite 40 Abb1: Bildschirmaufnahme Abb1: Aaron Burden - https://unsplash.com/search/book?photo=BBgej6AqjRA Seite 74: Seite 50 Abb1: Sylwia Bartyzel - https://unsplash.com/search/map?photo=D2K1UZr4vxk Abb1: Noelle Reichert Seite 77: Seite 53 Luis Llerena - https://unsplash.com/@albertosaure?photo=6g0KJWnBhxg Abb1+2: Flyer der Drais-Tour genehmigt durch Michael Heidrich vom Stadtmarketing Mann- heim und Hr. Prof. Lessing. Seite 80: Sandis Helvigs - https://unsplash.com/search/bike?photo=Qw6ij_rMxyU Seite 54/55 Abb1+2: Noelle Reichert Seite 94 Abb1: Maxime Le Conte des Floris - https://unsplash.com/search/building?photo=8Pd8yCj- Seite 56/57 jKIQ Abb1: Noelle Reichert Abb2: Hubert Berberich - https://commons.wikimedia.org/wiki/File:NeckUebergang2010x03. Seite 98 jpg / Creative Commons Attribution-Share Alike 3.0 Unported license Abb1: John Towner - https://unsplash.com/search/bike?photo=Hf4Ap1-ef40
Seite 58/59 [sämtliche Bilder zuletzt Aufgeufen am 16.01.2017] Abb1+2: Noelle Reichert
130 / 131 131 / 131