Bachelorarbeit

Mglichkeiten fur Printmedien o in Zeiten interaktiver Tablets

von

Clemens Kroell 0512089Betreuer: Univ.-Doz. Dipl.-Ing. Dr.techn. Martin Ebner

24. Mai 2012

Abstract (Deutsch)Immer mehr Publikationen werden digitalisiert und sind uber verschiedenste Services oder frei im Internet verfgbar. Mit Einzug der Tablets wie dem u Apple iPad und E-Readern wie dem Kindle von Amazon, wchst auch die a Nachfrage nach digitalen Publikationen. Unternehmen aus dem TechnologieSektor entwickeln demnach eigene Formate oder bauen auf oene Standards auf. Doch es gibt auch die Mglichkeit der nativen Applikationen, o untersttzend zur gedruckten Version oder als ganz eigene Publikationsform. u Diese Arbeit soll einen Uberblick uber die am Markt herrschende Hardware und die beliebtesten eBook-Formate geben, diese diskutieren und anhand eines praktischen Beispiels zeigen, wie man eine native iPad-App mit einem gedruckten Lehrbuch geschickt kombinieren kann.

Abstract (English)More and more publications get digitized and are available on the internet for free or through dierent services. With the rise of tablets like the Apple iPad and e-readers like Amazons Kindle, the demand for digital publications is growing. Therefore, companies in the technology industry develop their own formats or trust open standards. But there is also the possibility of native applications supporting a printed version or even as a new publication-form. This thesis will provide an overview of the market at the prevailing hardware and the most popular eBook formats, discuss them and show a practical example of how to combine a native iPad app with a printed textbook.

i

Inhaltsverzeichnis1 Einfuhrung 2 Tablet-Betriebssysteme im Uberblick 2.1 Apple iOS/iPad . . . . . . . . . . . . . 2.2 Google Android . . . . . . . . . . . . . 2.2.1 Amazon Kindle . . . . . . . . . 2.2.2 Barnes & Noble nook . . . . . 3 Digitale Formate 3.1 Native Apps . 3.2 EPUB . . . . 3.3 MobiPocket . 3.4 PDF . . . . . am Markt . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 3 3 3 4 5 5 6 6 7 9 9 9 10 11 11 17 21 24 25 25 25 26 31 34 34 35

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

4 L3TMedia - Der native Unterstutzer 4.1 Was ist L3T? . . . . . . . . . . . . . . . . . . . . 4.2 Der Inhalt . . . . . . . . . . . . . . . . . . . . . . 4.3 Das Design . . . . . . . . . . . . . . . . . . . . . 4.4 Die Implementierung der Technologien . . . . . . 4.4.1 Aufbau der MainView (Die Ubersicht) . . 4.4.2 Technologie: Kreidetafel / Whiteboard . . 4.4.3 Technologie: Diaprojektor . . . . . . . . . 4.4.4 Technologie: Overheadprojektor . . . . . . 4.4.5 Technologie: Epiprojektor . . . . . . . . . 4.4.6 Technologie: Touchscreen . . . . . . . . . 4.4.7 Technologie: Videoprojektor, Mobiltelefon 4.4.8 Technologie: Interactive Pen Display . . . 4.4.9 Technologie: Future Technologies . . . . . 5 Fazit 6 Ausblick Literatur

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

1

1

Einfuhrung

Was 1968 als Konzept des US-Konzerns XEROX (Drner, 2011) unter dem o Namen Dynabook begann, konnte Apple im Jahr 2010 fr eine kleine oder u wahrscheinlicher sehr groe Revolution nutzen. Es geht um das ConsumerTablet, das seit ungefhr drei Jahren sowohl die Medien- als auch die ITa Branche in Atem hlt. Fr die einen, vor allem Hobby-Programmierer, ein a u Geschenk, fr die anderen, etablierte print-lastige Unternehmen wie Verlau ge, eine Hiobsbotschaft. Jedoch war das Verlagswesen nicht unttig und hat a sein Angebot einer Digitalisierung unterzogen. Bcher und Magazine werden u neuerdings neben gedruckter Form auch in verschiedensten eBook-Formaten angeboten, und groe Buchhndler haben begonnen mit gebrandeten Tablets a bzw. eBook-Readern wie Amazons Kindle und Nook von Barnes & Noble ihren Kunden ein digitales Zusatzangebot zu liefern und vor allem weiterhin an das Unternehmen zu binden. Der prognostizierte Tod des gedruckten Buches blieb jedoch bislang aus. Beispiele belegen, dass sich das digitale Format besser verkauft als das gedruckte. So konnte das US-Verlagshaus Cond e Nast alleine durch den Apple iOS 5 Newsstand eine Abonnement-Steigerung von 286% verbuchen (Cheredar, 2011) . Durch die unterschiedlichen Produzenten der Hardware und Betriebssysteme wurden mittlerweile unterschiedlichste Formate entwickelt und auf den Markt gebracht. Neben den nativen Apps, die eigens fr das jeweilige Beu triebssystem programmiert werden, hat sich das PDF, das EPUB-Format und weitere von diesem abgeleitete Formate etabliert. Jedes Format hat seine Vor- bzw. Nachteile, verfolgt jedoch meistens einen anderen Zweck. Fr gedruckte Publikationen entstehen durch diese Vielfalt an Formaten u unterschiedliche Wege diese zu nutzen. Whrend die einen das digitale Fora mat als Zusatz zur gedruckten Version sehen, arbeiten andere schon lngst a vollstndig im digitalen Sektor und verentlich gedruckte und digitale Vera o sion zeitgleich. Prominente Beispiele wren hier The New Yorker, das Wired a Magazine und der Red Bull Bulletin. Diese Arbeit soll einen Uberblick uber die am Markt vorhandene Hardware und eBook-Formate geben, wobei die einzelnen Formate im Detail diskutiert werden. Der Fokus liegt hier vorwiegend auf nativen Apps, dem EPUB- und PDF-Format und verschiedenen Entwicklungs-Tools, die das Erstellen von digitalen Publikationen vereinfachen. Im Zuge dieser Arbeit wurde auerdem ein natives App fr das Apple iPad entwickelt, das einem Kapitel aus u dem Lehrbuch fr Lernen und Lehren mit Technologien (L3T) sowohl als u visuelle als auch interaktive Untersttzung dienen soll. u

2

2

Tablet-Betriebssysteme im Uberblick

Tablet Ein Tablet ist ein mobiler Personal Computer, der in einen berhrungsu sensitiven Bildschirm integriert ist und vorwiegend mit Fingern und/oder Stift bedient wird (PC-Magazine, 2010) .

2.1

Apple iOS/iPad

Mit einem Marktanteil von 61.5% im 3. Quartal 2011 (IDC, 2011), ist Apple derzeit weltweiter Marktfhrer am Tablet-Markt. Da 2010 kein vergleichbau res Medium am Markt war, konnte Apple den Consumer-Markt fr sich u gewinnen. Doch seit der Einfhrung von Android-Tablets (vgl. 2.2), geht u der Marktanteil Apples immer weiter zurck. u Das auf Apples iPad vorinstallierte Betriebssystem ist eine an Tablets angepasste Version des Smartphone-Betriebssystems iOS, das auch auf Apples iPhone vorinstalliert ist. Von Haus aus liefert Apple das Tablet mit dessen eigener eBook-App iBooks aus und bietet verschiedenste eBooks im EPUBFormat uber den iBooks-Store, einem Sub-Store des iTunes-Store, an. Neben EPUB lassen sich auch andere Formate wie PDF und MobiPocket lesen. Mit Version 5 des Betriebssystems wurde zustzlich der Apple Newsstand implea mentiert, der es ermglicht abonnierte Zeitschriften in einem eigenen Bereich o darzustellen. Vorteil dieser Lsung ist, dass man bei neuen Ausgaben sofort o benachrichtigt wird.

2.2

Google Android

Im Gegensatz zu Apples iOS funktioniert Googles Android auf Tablets unterschiedlicher Hersteller (z.B. Samsung, HTC). Durch die groe Konkurrenz veriert Apple nach und nach an Marktanteilen verliert. Nachdem Google das Startup Android im Jahre 2005 ubernommen (Businessweek, 2005) und die gleichnamige Software der Oentlichkeit zugnglich gemacht a hat, steigen die Verkaufs- und Benutzerzahlen monatlich. Dadurch dass auch Samsung und Motorola das Android-Betriebssystem mit deren Smartphones und Tablets ausliefern, erreicht Android eine viel breite Streuung als Apple. Analysten sehen das Google Betriebssystem am Ende des 4. Quartals 2011 mit einem Marktantzeil von 40.3% (IDC, 2011). Dieses Wachstum (hatte 32.4% im Q3/2011) ist laut Analysten vor allem dem neuen Amazon Kindle Fire zu verdanken, welches ebenfalls auf Googles Android basiert. 2.2.1 Amazon Kindle

Nachdem der eCommerce-Riese Amazon im Jahr 2007 (Wikipedia, 2011) seinen ersten eBook-Reader (basierend auf Kindle OS) verentlichte, ento wickelten sie auch 2011 das Kindle Fire, dem ersten auf Android basierenden

3

Tablet aus dem Haus Amazon. Whrend das Kindle Fire ein Farbdisplay bea sitzt, kann das E-Reader Kindle und Kindle touch nur ein Graustufendisplay mit einer beachtlichen Standby-Zeit von ca. 30h aufweisen. Mit dem neuen Kindle Fire, dem ersten Amazon Tablet, geht Amazon weiter in Richtung Apple und bietet dem/der BenutzerIn seine volle Palette an digitalen Inhalten wie Musik, Filme und Bcher direkt aus der Cloud. u Damit iPad-BenutzerInnen auch in den Genuss von Amazon Kindle Bchern u kommen knnen, verentlichte Amazon eine eigene Kindle-App im Apple o o App-Store. 2.2.2 Barnes & Noble nook

Wie Amazon hat auch der amerikanische Buchhndler Barnes & Noble sein a eigenes auf Android basierendes Tablet nook im Repertoir. Barnes & Noble verkauft im Gegensatz zu Amazon nur Bcher. u

4

3

Digitale Formate am Markt

So wie eine gedruckte Publikation Anforderungen wie spezielles Papier, Drucke u.. hat, trit dies auch bei digitalen Publikationen zu. Whrend bei der a a einen Publikation ein einfaches Video eingespielt wird, werden bei einer anderen verschiedene Elemente einzeln animiert. Hier sieht man, dass die Wahl der passenden Darstellungstechnologie am Beginn des Erstellens mageblich ist. Nachfolgend werden die vier dominierenden eBook-Formate prsentiert a und gegenbergestellt: u

3.1

Native Apps

Native Apps sind Appliktionen, die eigens fr das jeweilige Betriebssystem u programmiert werden. Apple baut auf die Programmiersprache Objective-C, whrend bei Googles Android Java verwendet wird. Beide Firmen stellen a eine vollstndige Entwicklungsumgebung zur Verfgung, die neben einer pasa u senden IDE auch Simulatoren enthlt. Ein Simulator emuliert die Oberche a a der jeweiligen Plattform und stellt alle wichtigen Funktionen bereit. Da ein natives App nur fr einen bestimmten Zweck und Inhalt programu miert wird, hat man uneingeschrnkte Mglichkeiten (bis auf Barrieren des a o Betriebssystems) und es lassen sich alle denkbaren Funktionen wie Animationen oder anderen Technologien (GPS, Kamera etc.) einbauen. Auerdem ist man nicht an etwaige Design-Einschrnkungen gebunden, sodass z.B. eine a komplett neue Menfhrung o.. implementiert werden kann. Da die Prouu a grammierung im Gegensatz zu einem automatisch generierten Dokument, sehr aufwendig ist, werden gute Programmierkenntnisse bentigt. o Vertrieben werden native Apps uber die jeweiligen Vertriebskanle der Bea triebssysteme, z.B. dem Apple App-Store und dem Android-Market. Im Gegensatz zu Android hat Apple sehr strikte Richtlinien, welche Apps in den App-Store drfen und welche nicht. Im Android-Market kann hingegen alles u ohne weiteres verentlicht werden. o Herstellung Apple bindet seine Entwickler an die hauseigene Entwicklungsumgebung Xcode, whrend Google mit Eclipse auf eine etablierte und a freie IDE setzt. Vorteile Sehr hohe Performance, alle Freiheiten bei Interaktivitt/Gestaltung, a hohe Reichweite durch App-Stores Nachteile Teuer, Programmierkenntnisse notwendig, jhrliche Kosten bei a App-Stores, nicht Cross-Kompatibel (App kann nur auf einer Plattform ausgefhrt werden) u

5

3.2

EPUB

EPUB gilt als das bekannteste oene eBook-Format und wird vom International Digital Publishing Forum empfohlen. Einer der Vorteile dieses Formates ist, dass es auf XHTML und XML basiert. Das Design kann mittels Cascading Stylesheets verndert werden. Man sieht, EPUB ist durch die a Trennung von Inhalt und Design ein sehr strukturiertes Format. Die Endung .epub ist eigentlich ein Zip-Archiv, das einzelne Dateien fr jedes Kau pitel, ein Inhaltsverzeichnis, eine Stammdatei, Stylesheets und gegebenfalls Medien enthlt (Wang, 2011, S. 51.). a Durch die Verwendung von Plain-Text knnen Reader-Anwendungen die o Schriftgre ohne Umbruchprobleme verndern bzw. an unterschiedliche o a Bildschirmgren anpassen. Dies hat den Vorteil, dass der Lesekomfort auf o allen Plattformen und Bildschirmgren gleich bleibt. Ein PDF hingegen o besitzt z.B. eine xe Seitenbreite, sodass nur die gesamte Seite gezoomt werden kann (vgl. 3.4). Dieser dynamische Seitenumbruch hat aber auch zur Folge, dass keine richtige Seitenfolge entstehen kann und so z.B das Zitieren bei wissenschaftlichen Arbeiten zum Problem wird. Digital Rights Management und andere Funktionen wie Lesezeichen knnen frei von den o Reader-Applikationen angeboten werden und sind nicht direkt an das Format gebunden. Im Gegensatz zum klassischen PDF knnen in EPUB Publikationen kleio ne Animationen und Medien basierend auf oenen Standards eingebunden werden. Animationen lassen sich durch CSS-Transitions und JavaScript, Medien ` la Video und Audio durch den Einsatz von HTML5 realisieren. Reader a wie z.B. Apple iBooks basieren grtenteils auf der WebKit Browser-Engine o und stellen die Publikationen ahnlich einer Website dar. Zudem lassen sich EPUB-Dateien direkt per WebServer anbieten und auf Tablets wie dem iPad direkt uber den Browser herunterladen. Herstellung EPUB lsst sich aus DTP-Tools wie InDesign, Textverarbeia tungsprogramme wie Pages und eigene Generatoren generieren. Vorteile Oener Standard, universell einsetzbar, Animationen und Medien mglich, viele Freiheiten bei Layout und Styling, Barrierefreiheit o Nachteile Es wird eine Reader-Applikation bentigt, fr wissenschaftlio u ches Arbeiten schwierig da keine statische Seitenfolge, ungeeignet bei komplexen Seitenlayouts

3.3

MobiPocket

Bevor Amazon im Jahr 2005 das Unternehmen MobiPocket ubernahm, ent wickelte dieses ein gleichnamiges eBook-Format und eine zugehrige Readero 6

Applikation. MobiPocket ist dem EPUB-Format hnlich, wobei es strker a a komprimiert ist, auf einem lteren HTML-Standard aufbaut, keine Stylinga Mglichkeit besitzt und nur gering aufgelst Bilder untersttzt (Vandegrift, o o u 2009). Amazon hat daraus sein eigenes .AZW-Format entwickelt, das exklusiv auf deren E-Reader Kindle gelesen werden kann und ein Digital Rights Management implementiert hat (Zarley, 2011, S. 72). Will man Amazon-Publikationen auf seinem iPad lesen, steht hierfr die Kindle iPad-App exklusiv zur Verfgung. u u Herstellung Vorteile Reintext Nachteile Eigene Software MobiPocket Creator, Calibre

Optimiert fr mobile Gerte (kleine Dateigre), optimal fr u a o u

Kein Styling mglich, Bilder sehr schlecht aufgelst o o

3.4

PDF

Portable Document Format, kurz PDF, ist die fhrende Sprache um eine geu druckte Seite zu beschreiben und die erste, die sowohl fr Druck als auch das u Internet eingesetzt werden kann. 1993 als PDF 1.0 von Adobe auf den Markt gebracht wurde, wurde es anfangs nur kostenpichtig vertrieben. Nachdem der Adobe Acrobat PDF-Reader dann kostenlos zur Verfgung gestellt wuru de, verbreitete sich das Format weltweit und uberholte seinen Vorgnger a PostScript (Whitington, 2011, S. 1). In PDFs knnen Objekte aller Art dargestellt werden, z.B. Raster-Bilder, o Vektoren, Text, verschiedene Schriften, Metadaten, Hyperlinks etc. Neuere Versionen knnen auch multimediale Inhalte darstellen, wobei dies wiederum o nur von Adobes eigener Software geschrieben und gelesen werden kann. Da dieses Format auf allen Betriebssystemen gelesen und erstellt werden kann, wurde es ein weitverbreitetes Medium und erfreut sich heute sehr groer Beliebtheit. Bevor optimimiertere Formate wie EPUB auf den Markt kamen, wurde vor allem das PDF-Format fr digitale Publikationen veru wendet. Ein sehr groer Nachteil des PDFs ist, dass jede Seite eine vom Dokument vorgegebene Breite besitzt, sodass der Betrachter nur die gesamte Seite vergrern und nicht nur die Schriftgre verndern kann. Dh. der o o a Text wird nicht neu umgebrochen. Als Resultat muss der/die BetrachterIn manuell zur gewnschten Stelle im Text scrollen. Dieses Problem macht sich u vor allem in der Barrierfreiheit bemerkbar, da derartige Dokumente nicht von Menschen mit Sehbehinderung gelesen werden knnen. o Herstellung Frher nur von Adobe Produkten herstellbar, ist dies nun u von allen Betriebssystemen und Programmen ohne Zusatzsoftware mglich. o

7

Vorteile Wird von allen Betriebssystemen untersttzt, keine Zusatzsoftu ware mehr ntig, sehr weit verbreitet, eingebettete Schriften, auch fr wiso u senschaftliche Arbeiten Nachteile xes Layout in Dokument implementiert, nicht Barrierefrei, Digital Rights Management nur von Adobe direkt

8

4

L3TMedia - Der native Unterstutzer

Im Rahmen dieser Bachelor Arbeit wurde eine native iPad-App als untersttzendes digitales Medium fr das Lehrbuch fr Lernen und Lehren u u u mit Technologien (L3T) entwickelt. Diese App soll demonstrieren, wie man mittels eines digitalen Mediums einen Mehrwert fr eine klassisch gedrucku te Publikation schaen kann. Die Form des nativen Apps wurde gewhlt, a da alle Freiheiten bei Animationsmglichkeiten gewnscht wurden. Diese o u iPad-App ist unter L3TMedia kostenlos im Apple App-Store erhltlich. a

4.1

Was ist L3T?

Das Lehrbuch fr Lernen und Lehren mit Technologien (L3T) ist das ersu te deutschsprachige OER-Lehrbuch weltweit. Geschrieben von 115 Autoren und kontrolliert von uber 80 Gutachtern, ist es in einer kostenlosen Version online erhltlich. Es wurde von Martin Ebener und Sandra Schn 2010 ins a o Leben gerufen (Martin Ebner, 2010).

4.2

Der Inhalt

Ein Kapitel des Lehrbuches widmet sich der Evolution der im Unterricht verwendeten Technologien von der Kreidetafel bis hin zu Tablets. Um diesem Kapitel einen digitalen Mehrwert zu verschaen, wurde ein Groteil dieser Lehrtechnologien in interaktive Animationen verpackt. Folgende Techologien werden dargestellt: Klassische Kreidetafel Whiteboard Diaprojektor Overheadprojektor Epiprojektor Touchscreen Videoprojektor Interactive Pen Display Mobiltelefon Future-Technologies ` la Tablets a Jede Technologie enthlt neben einer Animation auch einen kleinen Text, a der diese beschreibt. 9

4.3

Das Design

In Zusammenarbeit mit der Permanent Unit (www.permanent-unit.com) aus Graz wurden Illustrationen (siehe Abb. 2) der einzelnen Technologien angefertigt. Bei der Konzeption der App hatte man sich darauf geeinigt, vor allem in Richtung Schulen/Kinder zu gehen und demnach im Design auf Illustrationen und Grak zu setzen. Die Applikation ist nur im LandscapeModus verfgbar. Das bedeutet, das iPad muss horizontal gehalten werden. u Der Portrait-Modus wurde als nicht geeignet erachtet, da man wesentlich weniger Inhalt am Display darstellen kann (siehe Abb. 1).

Abbildung 1: L3TMedia Konzept Um die Haptik eines gedruckten Buches zu simulieren, hat man sich fr u UIScrollViews entschieden, wodurch ein Schieben bzw. Swipen das Durchblttern ermglicht. Eine UIScrollView dient der Prsentation des Inhalts, a o a eine andere der Navigation. Diese Navigation kann bei Bedarf vom unteren Bildschirmrand hochgefahren werden. Sie erspart einem das Durchblttern, a wenn man direkt auf eine Technologie weiter hinten in der Reihenfolge springen will. Die Navigation wird durch ein Symbol und einen animierten Pfeil inkl. Label gekennzeichnet. Groe Schrift soll das Lesen der Texte angenehmer und unterschiedliche Schriften die Struktur klarer machen.

10

Abbildung 2: Auszug aus dem Illustrations-Sortiment

4.4

Die Implementierung der Technologien

In diesem Abschnitt wird erklrt, welche Animation sich hinter welcher Techa nologie versteckt und wie diese implementiert worden ist. Software-Architektur Nur fr das Apple iPad programmiert, wurde fr u u die Implementierung der L3TMedia-App Objective-C in Verbindung mit der Xcode IDE verwendet. Da ein iPad zur Verfgung stand, wurden die Tests u direkt auf diesem durchgefhrt und nicht im iPad-Simulator. u Graken Alle Graken wurden in Adobe Photoshop von Vektor- in RasterBilder (PNG) umgewandelt und passend zugeschnitten. Die Illustrationen wurden in Adobe Illustrator von Hand gezeichnet. 4.4.1 Aufbau der MainView (Die Ubersicht)

Die MainView stellt das Inhaltsverzeichnis der App dar. Sie besteht aus zwei UIScrollViews: 1. Technologie-ScrollView (oben) Hier werden alle Technologien nebeneinander angeordnet und knnen per o Swipe nach links bzw. rechts durchgeblttert werden. Die ScrollView ist auf a 1024px Breite und 650px Hhe begrenzt, sodass immer nur eine Techologie o sichtbar ist (siehe Abb. 3).

11

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

CGRect frame = mainFrame.frame; frame.size.width = 1024; frame.size.height = 650; // Adding Kreidetafel to ScrollView frame.origin.x = 0; frame.origin.y = 0; self.kreidetafelView.frame = frame; [mainFrame addSubview:self.kreidetafelView]; [kreidetafelView release]; // Adding Whiteboard to ScrollView frame.origin.x = frame.size.width * 1; frame.origin.y = 0; self.whiteboardView.frame = frame; [mainFrame addSubview:self.whiteboardView]; [whiteboardView release]; ... mainFrame.showsVerticalScrollIndicator = NO; mainFrame.pagingEnabled = YES; mainFrame.scrollEnabled = YES; mainFrame.scrollsToTop = NO; mainFrame.contentSize = CGSizeMake(1024 * 10, 650);

Abbildung 3: Implementierung der Navigation

12

Wird auf eine Technologie-Illustration getapped, wird durch folgende Methode die jeweilige DetailView auf den NavigationController gepushed (Beispiel fr die Kreidetafel - Abb. 4): u1 2 3 4 5 6 7 8

- (void)getKreidetafel:(id)sender { KreidetafelAnimation *tafelView = [[KreidetafelAnimation alloc] initWithNibName:@"KreidetafelAnimation" bundle:nil]; [self.navigationController pushViewController:tafelView animated:YES]; }

Abbildung 4: Aufrufen einer Technologie

13

2. Navigation-ScrollView (unten - ausfahrbar) Bei Tap auf das Kartei-Symbol am Fu der MainView, fhrt von unten a das Navigations-Menu hoch, wo jede Technologie einzeln und schneller ausgewhlt werden kann. Dies erspart einem das Durchblttern, wenn man zu a a einer Technologie weiter hinten bzw. vorne in der Reihenfolge will. Die ScrollView wurde manuell im InterfaceBuilder erstellt und bestckt. Wird diese u ScrollView aktiv, legt sich ein transparentes Overlay uber die restliche Main View, sodass die Navigation die volle Aufmerksamkeit des Benutzers erhlt. a1 2 3 4

snakeView.showsVerticalScrollIndicator = NO; snakeView.pagingEnabled = NO; snakeView.scrollEnabled = YES; snakeView.scrollsToTop = NO;

Abbildung 5: Die Navigation-ScrollView Tapped man auf die gewnschte Animation, wird die Technologie-ScrollView u zu einem bestimmten ScrollView-Oset gescrolled (hier am Beispiel Kreidetafel):1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

- (void)scrollToKreidetafel:(id)sender { CGPoint finalOffset = CGPointMake(0, 0); [mainFrame setContentOffset:finalOffset animated: YES]; pushed = 0; [UIView beginAnimations:@"MoveUp" context:nil]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; [UIView setAnimationDuration:0.2]; self.view.superview.superview.frame = CGRectMake(0, 0, 1024, 1024); [UIView commitAnimations]; [self setViewsWake]; quick.image = schnellauswahl; }

Abbildung 6: Oset zu nchster Technologie a 3. Wobble-Animation - Schnellauswahl

14

Um den Benutzer auf die Navigations-ScrollView aufmerksam zu machen, wurde ein Wobble-Eekt (eine dauerhafte Links-Rechts-Bewegung) implementiert. Der Pfeil bewegt sich so von links nach rechts und zurck. Hierzu u wurde CGAneTransform verwendet.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

CGAffineTransform leftMove = CGAffineTransformTranslate(CGAffineTransformIdentity, -5, 0); CGAffineTransform rightMove = CGAffineTransformTranslate(CGAffineTransformIdentity, 5, 0); quick.transform = leftMove; [UIView [UIView [UIView [UIView [UIView [UIView beginAnimations:@"wobble" context:quick]; setAnimationRepeatAutoreverses:YES]; setAnimationRepeatCount:1e100f]; setAnimationDuration:0.25]; setAnimationCurve:10]; setAnimationDelegate:self];

quick.transform = rightMove; [UIView commitAnimations];

Abbildung 7: Wobble-Animation

15

Abbildung 8: MainView

Abbildung 9: Navigation sichtbar

16

4.4.2

Technologie: Kreidetafel / Whiteboard

Als Animation fr die Kreidetafel und das Whiteboard wurde einerseits u eine interaktive Kreidetafel und andererseits ein interaktives Whiteboard implementiert. Der Syntax der beiden Animationen sind sich sehr hnlich, a deshalb werden Kreidetafel und Whiteboard gemeinsam behandelt. Um auf der interaktiven Tafel malen zu knnen, wird eine Linie auf einer Canvas o gezeichnet, die Punkte werden in einem Array gespeichert. Mittels DoppelTap kann man die Tafel lschen und erneut darauf schreiben. o1 2 3

CanvasView_T *cv = [[CanvasView_T alloc] initWithFrame:CGRectMake(82, 85, 863, 585)]; [self.view addSubview:cv];

Abbildung 10: Initialisieren der/des Tafel/Boards

17

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

-(void)drawRect:(CGRect)rect { if (self.points.count == 0) return; context = UIGraphicsGetCurrentContext(); CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); //white CGContextSetLineWidth(context, 9.0); CGPoint firstPoint = [[self.points objectAtIndex:0] CGPointValue]; CGContextBeginPath(context); CGContextMoveToPoint(context, firstPoint.x, firstPoint.y); int i = 1; while (i < self.points.count) { CGPoint nextPoint = [[self.points objectAtIndex:i] CGPointValue]; if (nextPoint.x < 0 && nextPoint.y < 0) { CGContextDrawPath(context, kCGPathStroke); if (i < (self.points.count-1)) { CGContextBeginPath(context); CGPoint nextPoint2 = [[self.points objectAtIndex:i+1] CGPointValue]; CGContextMoveToPoint(context, nextPoint2.x, nextPoint2.y); i = i + 2; } else i++; } else { CGContextAddLineToPoint(context, nextPoint.x, nextPoint.y); i++; } } CGContextDrawPath(context, kCGPathStroke); }

Abbildung 11: Auf Canvas Punkte malen 18

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event touchesForView:self] anyObject]; CGPoint location = [touch locationInView:self]; if ([touch tapCount] == 2) { points = nil; return; } if (self.points == nil) { NSMutableArray *newPoints = [[NSMutableArray alloc] init]; self.points = newPoints; [newPoints release]; } [self.points addObject:[NSValue valueWithCGPoint:(location)]]; }

Abbildung 12: Touch-Events fr Malen registrieren u

1 2 3 4 5 6 7 8

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event touchesForView:self] anyObject]; CGPoint location = [touch locationInView:self]; [self.points addObject:[NSValue valueWithCGPoint:(location)]]; [self setNeedsDisplay]; }

Abbildung 13: Touch-Events fr Malen registrieren u

19

1 2 3 4 5 6 7 8 9 10 11

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event touchesForView:self] anyObject]; CGPoint location = [touch locationInView:self]; [self.points addObject:[NSValue valueWithCGPoint:(location)]]; CGPoint endPoint = CGPointMake(-99, -99); [self.points addObject:[NSValue valueWithCGPoint:(endPoint)]]; [self setNeedsDisplay]; }

Abbildung 14: Touch-Events fr Malen registrieren u

Abbildung 15: Kreidetafel

20

Abbildung 16: Whiteboard 4.4.3 Technologie: Diaprojektor

Beim Diaprojektor wurde ein dem Origina sehr hnlichen Diaprojektor ima plementiert. Drckt man auf die Fernbedienung, wird das nchste Dia bzw. u a Bild auf der Leinwand (UIScrollView) angezeigt. Die Bilder sind per InterfaceBuilder in die UIScrollView eingesetzt worden, sodass man nur einen bestimmten Oset scrollen muss. Zustzlich wurden echte Sound-Eekte integriert, die das Projektor- und a Wechselgerusch simulieren. Die Gerusche wurden eigens fr die App aufa a u genommen. Durch eine Transformation wird auerdem die Projektions-Licht-Bewegung simuliert.

21

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

- (void)pushIt:(id)sender { NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/an_slidechange.aif", [[NSBundle mainBundle] resourcePath]]]; NSError *error; forground = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error]; forground.numberOfLoops = 0; if (forground == nil) NSLog([error description]); else [forground play];

CGPoint finalOffset; NSInteger offset = leinwand.contentOffset.x; if (offset >= 2036) { finalOffset = CGPointMake(0, 0); } else { finalOffset = CGPointMake(offset + 509, 0); } [leinwand setContentOffset:finalOffset animated: YES]; }

Abbildung 17: Leinwand-Initialisierung

22

1 2 3 4 5 6 7 8 9 10 11 12 13

NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/an_diaprojektor.aif", [[NSBundle mainBundle] resourcePath]]]; NSError *error; background = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error]; background.numberOfLoops = -1; if (background == nil) NSLog([error description]); else [background play];

Abbildung 18: Abspielen des Projektor-Sounds

1 2 3 4 5 6 7

[UIView beginAnimations:nil context:NULL]; [UIView setAnimationRepeatAutoreverses:YES]; [UIView setAnimationRepeatCount:1e100f]; [UIView setAnimationDuration:0.25]; licht.transform = CGAffineTransformMakeScale(1.1,1.1); licht.transform = CGAffineTransformMakeScale(1.0,1.0); [UIView commitAnimations];

Abbildung 19: Dia-Wechsel-Animation

23

Abbildung 20: Diaprojektor 4.4.4 Technologie: Overheadprojektor

Die Animation des Overheadprojektor fllt im Gegensatz zu anderen Ania mation relativ einfach aus. Hier wurde eine einfache Tap-Transformation implementiert, bei der das Overhead-Bild gegen ein anderes ausgetauscht wird. Diese wird direkt in der MainView gerendert. Auf Code wird verzichtet, da diese Funktionalitt bereits uber den InterfaceBuilder realisiert a werden kann.

Abbildung 21: Overheadprojektor

24

4.4.5

Technologie: Epiprojektor

Diese eher unbekannte Technologie wurde mit Ihrem vollen Funktionsumfang implementiert. Die Animation lsst den Benutzer ein Blatt Papier auf a den Projetor ziehen, sodass dieser beginnt das Blatt auf der Leinwand darzustellen. Der Projektor erkennt die Position des Blattes (Blatt bendet sich inmitten verschiedener Grenzen) und zieht dieses horizontal nach unten ein. Zustzlich wird die vom Diaprojektor bekannte Licht-Animation eingeblena det.1 2

self.paper.transform = CGAffineTransformMakeScale(.75,.75); self.licht.hidden = YES;

Abbildung 22: Setzen der Konstanten

1 2 3 4 5 6 7 8 9 10 11

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [[event allTouches] anyObject]; CGPoint location = [touch locationInView:touch.view]; paper.center = location;

[UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.1]; self.paper.transform = CGAffineTransformMakeScale(1,1); [UIView commitAnimations]; }

Abbildung 23: Animation bei Papier-Berhrung u

4.4.6

Technologie: Touchscreen

Als kleines Extra wurde beim Touchscreen nur eine UIAlertView eingebaut, die eine Fehlermeldung ausgibt. Diese weist den Benutzer darauf hin, dass er gerade ein Touchscreen verwendet. 4.4.7 Technologie: Videoprojektor, Mobiltelefon

Die Videoprojektor-Funktionalitt wird durch die Darstellung von Youtubea Videos auf einer Leinwand demonstriert. Diese Youtube-Videos werden randomisert aus dem L3T-Channel bezogen, wobei die Video-IDs im Sourcecode hardcodiert sind (eine derartige Funktionalitt bietet die Youtube-API a 25

1 2 3 4 5 6 7 8

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { [self touchesBegan:touches withEvent:event]; if ((paper.center.x >= projektor.frame.origin.x) && (paper.center.y >= projektor.frame.origin.y)) { NSLog(@"Drinnen!"); } }

Abbildung 24: Animation bei Papier-Bewegung leider nicht). Die Videos werden mit Hilfe des iFrame-Embeds in eine UIWebView eingefgt. Sobald ein Video abgespielt wird, startet die bekannte u Projektor-Licht-Animation. Dasselbe Prinzip wird bei der Mobiltelefon-Animation angewendet, wobei hier nur eine einzige Youtube-ID verwendet wird. 4.4.8 Technologie: Interactive Pen Display

Mittels Interactive Pen Displays kann man Inhalte auf ein Display schreiben, die dann auf einer Leinwand uber einem anderen Eingangssignal angezeigt werden. Bei dieser Animation kann der/die BenutzerIn einen Stift uber ein derartiges Display bewegen. Hierfr werden einfache touchBegan()- und touu chesMoved()-Methoden fr den Stift verwendet. u

26

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { //[self touchesEnded:touches withEvent:event]; if ((paper.center.x >= projektor.frame.origin.x) && (paper.center.y >= projektor.frame.origin.y) && (paper.center.x