Adobe Captivate & HTML5. E- und M-Learning aus einem Guss!?

Transkript

1 Adobe Captivate & HTML5 E- und M-Learning aus einem Guss!?

2 Martin Uhrig Dipl.-Technikredakteur (FH) Trainer, Berater & Autor

3 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

4 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

5 Beispiele

6 Beispiele

7 Beispiele

8 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

9 VIDEODEMO mit Schwenk-&-Zoom-Funktion

10 DESIGNS mit neuem Folienmasterkonzept

11 INTERAKTIONEN vordefinierte Bausteine

12 PERSONEN Darsteller, virtuelle Lernbegleiter,...

13 NEUE QUIZFUNKTIONEN Vortest, Verzweigungsabhängigkeit, Straf- & Teilpunkte,...

14 HTML5 Neues natives Ausgabeformat

15 SMARTFORMEN Vektorbasiert, standardisierbar, interaktiv,...

16 NEUE DESIGNFUNKTIONEN Texteffekte, Reflektionen, Textränder, Aufzählungszeichen,...

17 HYPERLINKS Texte verlinken

18 OBJEKTGRUPPIERUNG Übersicht schaffen, Produktivität steigern,...

19 OPTIMIERTE SCHNITTSTELLEN SCORM, AICC, PowerPoint...

20 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

21 Veranlassung E- & M-Learning aus einem Guss

22 Veranlassung E- & M-Learning aus einem Guss

23 Veranlassung E- & M-Learning aus einem Guss

24 Besonderheiten mobiler Projekte Kleine Lernmodule

25 Besonderheiten mobiler Projekte Selbstbestimmtes Lernen

26 Besonderheiten mobiler Projekte Navigation

27 Besonderheiten mobiler Projekte Abfragen

28 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Besonderheiten mobiler Projekte Lesbarkeit von Texten

29 Besonderheiten mobiler Projekte Texteingaben

30 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

31 PUBLIKATIONSFORMAT(E) ZIELGERÄTE PLATTFORM(EN) AUFLÖSUNG INTERAKTIVITÄT Übersicht: Technische Planung E- & M-Learning aus einem Guss

32 Webseite (Internet/In tranet) Lokale Version (Download / CD) Videoportal (z. B. Youtube) LMS Laptop Desktop Smartphones Tablets Technische Rahmenbedingungen Zielgeräte & -plattformen

33 Android BlackBerry OS Symbian Windows Phone ios Technische Rahmenbedingungen Zielgeräte & -plattformen Mobile Endgeräte

34 13,6 1,6 0,9 0,5 0,5 Apple Samsung Amazon RIM ASUS Tablet-Absatz weltweit in Mio Stück, 1. Quartal 2012 Quelle: statista (Stand: ) Technische Rahmenbedingungen Zielgeräte & -plattformen Mobile Endgeräte

35 22% 7% 3% 4% 24% 40% GOOGLE (Android) NOKIA (Symbian) APPLE (ios) MICROSOFT (Windows Phone) RIM (Blackberry OS) Sonstige Smartphone-Betriebssysteme in Deutschland, Verteilung in %, 1. Quartal 2012 Quelle: BITKOM (Stand: ) Technische Rahmenbedingungen Zielgeräte & -plattformen Mobile Endgeräte

36 Android BlackBerry OS Symbian Windows Phone ios Technische Rahmenbedingungen Zielgeräte & -plattformen Mobile Endgeräte

37 Laptops Tablets Smartphones Kleinstes 16:9-Format: 1366 x 768 Kleinstes 16:10-Format: 1280 x 800 ipad 1 & 2, ipad mini: 1024 x 768 ipad 3: 2048 x 1536 Samsung Galaxy Tab 1024 x 600 Kleinstes 16:9-Format 800 x 480 Kleinstes 4:3-Format: 800 x 600 iphone 3: 480 x 320 iphone 4: 960 x 640 iphone 5: 1136 x 640 Blackberry: 480 x 320 Samsung Galaxy: 480 x 800 Auflösungsermittlung

38 Auflösungsermittlung Beispiel

39 Auflösungsermittlung Beispiel

40 Auflösungsermittlung Tipp

41 1024 x 768 Auflösung ipad

42 1920 x 1080 Auflösung Desktop-PC

43 Auflösung optimieren Schwenken & Zoomen

44 Auflösung optimieren Beispiel: Schwenken & Zoomen

45 Auflösung optimieren Skalierbarer HTML-Inhalt

46 Auflösung optimieren Wiedergabeleisten-Widgets

47 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

48 Technische Planung Produktion Publikation MP4 Workflow Nicht-interaktive Projekte

49 Bereitstellung über YouTube

50 Einführung in Captivate & Beispiele Neuerungen in Captivate 6 Einführung M-Learning & Besonderheiten Technische Planung Nicht-interaktive Projekte: MP4 Interaktive Projekte: HTML5 Agenda

51 Technische Planung Produktion Publikation Workflow Interaktive Projekte

52 HTML5 - Einschränkungen

53 HTML5 - Einschränkungen

54 HTML5-Tracker

55 Veröffentlichung Einstellung Lernplattformen

56 Veröffentlichung Ausgabe-Einstellungen

57 ab ios5 Veröffentlichung Browser- und Geräteunterstützung

58 Praxisbeispiel HTML5

59 Weiterführendes HTML5 lokal

60 Weiterführendes App-Erstellung über PhoneGap

61 Weiterführendes App-Erstellung

62 ISBN: Referenzmaterial

63 Noch Fragen?

64 "Die in dieser Präsentation verwendeten Bilddaten stammen von folgenden Fotografen bzw. aus folgenden Bildarchiven:" Folie 9: Business Hour Glass ZINQ Stock # Fotolia.com Folie 24: Time to Learn - Clock iqoncept # Fotolia.com View inside train cabin Henlisatho # Fotolia.com Westbahnhof, Budapest, Menschen warten auf dem Bahnsteig Jörg Hackemann # Fotolia.com Folie 28: touching screen xjbxjhxm # Fotolia.com Folien 16, 23, 25, 28, 42, 44, 51, 62: Illustration - Touch Tablet PC oder Mobile Geräte, Isolated On White adamson # rf.com Folien 25, 45: Vector TV features and specifications icon set Taras Livyy # Fotolia.com Folien 39, 56, 57: HTML5 Mark + Wordmark - (Stand: ) Folie 54: (Stand: ) Folie 65: PhoneGap Package - (Stand: ) Folie 66: Diagram - PhoneGap Build - (Stand: ) Bildnachweise