Tutonium InteraktiveTutorials fürweb-anwendungen

Transkript

1 Tutonium InteraktiveTutorials fürweb-anwendungen TobiasThelen,RonLucke,Anne Siekmeyer ArbeitsgruppeIntelligentMediaandLearning Fraunhofer-InstitutfürIntelligenteAnalyse-undInformationssysteme Heger-Tor-Wall Osnabrück Abstract:Tutoniumist ein experimentelles Tutorial-Tool für Web-Anwendungen, das dienachteile verschiedener etablierter integrierter und externer Tutorial- Technologienüberwindensoll,ohnederenpotenzielleVorteileaufzugeben.Es bietet Lernenden diemöglichkeit,direkt in der realen Anwendung mit dem Tutorialzu arbeiten.dazu muss das Tutorial jedoch nicht imquellcodeder Anwendungverankert werden. Tutoniumbedient sich eines zweiteiligen Framesets,in dasdas Tutorialund die zu erklärendeweb-anwendunggeladen werden,sowiejavascript-zugriffenaufdendom-treeder Web-Anwendung. Mittelseiner aufseleniumbasierenden Autorenumgebungsollen dietutorials ohne vertiefte technische Kenntnisse erstellt und bei Änderungen der Anwendung leicht angepasst werden können. Anhand von zwei Beispielen werden Einsatzmöglichkeiten vorgestellt undnutzererfahrungen reflektiert. 1 Software-Tutorials fürweb-anwendungen AllenForderungennach selbsterklärendersoftware bzw. Selbstbeschreibungsfähigkeit alsgestaltungskriteriumfür dieergonomische Gestaltung vonsoftwareprodukten [De06]zumTrotzsind komplexesoftwaresystemenur nachlängerereinarbeitungund Schulungeffizientundeffektivzunutzen.DementsprechendgroßistderMarktfür Software-Schulungenund-WeiterbildungeninnerhalbderbetrieblichenWeiterbildung: Über50%derAnbieterhabenSchulungenzuberufsbezogenemIT-WissenimAngebot [Le11].E-Learning-LösungenbietensichfürSoftware-Weiterbildungenbesondersan, weil Lernumgebungund Lerngegenstand besonders gut miteinanderverknüpft werden können.lernendemüssen fürdie Anwendungdes Gelerntenohnehineinen RechnerarbeitsplatznutzenundkönnenaufdieseWeisebesondersgutinformelles LernenimProzessderArbeitanwenden.Fürmehrals68%derBeschäftigtenin Deutschland ist arbeitsbegleitendes informelles Lernenbereits Alltag, über 63%der BeschäftigtenlernenselbstgesteuertmitMedien[SW11]. Unter einemsoftware-tutorialverstehen wireindigitales Lern- und Informationsangebot,mitdessenHilfe Lernendeselbstgesteuertundarbeitsbegleitend KompetenzenimUmgangmiteinemSoftware-Systemerwerbensollen.InAbgrenzung 215

2 zuonline-hilfesystemenbeantworteteintutorialnichtkonkreteeinzelfragen,sondern soll häufiginformvonbeispielenund Aufgaben Zusammenhänge undgrundbegriffe vermittelnsowiedeneinstieg und dieorientierung erleichtern. ImFolgendenwirdeinBlickaufdieProduktionseffizienzvonSoftware-Tutorials geworfen,indem verschiedene technische Formate, die mit unterschiedlichen Produktionsabläufenverbundensind, miteinanderverglichenwerden. Wirbeschränken unsdabei aufdie Anwendungsdomäne Web-Anwendungen. Unter Web- AnwendungenverstehenwirConallen[Co99]folgendeinWeb-System(Web-Server, Netzwerk,http,Browser) mitnutzerinteraktionen, dieübereinweb-gestütztesfrontend abgewickelt werden. ImVergleichzu Client-Server-Systemen imallgemeinenist es eine BesonderheitvonWeb-Anwendungen, dass keinspezieller Client benötigt wird, so dasskeinspeziellerinstallationsprozessnotwendigist.deralsvorhandenangenommene generische Client istder Web-Browser. Mit der Etablierung zunehmend komplexer InteraktionsmöglichkeiteninWeb- AnwendungendurchTechnologienwieAJAX undderablösungproprietärer Technologien wie Java Applets,Flashoder Silverlight durchtechnologienausdem HTML5-UmfeldwerdenauchkomplexeSoftwareanwendungenimZusammenhangmit CloudComputingund SoftwareServicesimmerstärkeralsWeb-Anwendungenrealisiert [Ha08].AllerdingsgibtesinsbesondereimZusammenhangmitmobilenGerätenauch gegenläufigetendenzen, dieintensivdiskutiertwerden[cl11].wirgehendennoch zusammenfassend davonaus,dassweb-anwendungeneinehinreichendgroßerolle spielen undauchzukünftigspielen werden und als GegenstandvonSoftware- Schulungenund-Tutorialsrelevant sind. 1.1 IntegrierteTutorials Wirunterscheidenzunächst grundlegend zwischenintegriertenundexternentutorials. EinintegriertesTutorialist imsinne der technischenimplementationteilder zu erläuterndenanwendung.integriertetutorialsübernehmenhäufigauchdiefunktion, neue Nutzende beidererstnutzungzubegrüßenund ihnenanzubieten, die Kernfunktionender Anwendung kennenzulernen. Sie habenpotenziell Zugriffaufalle Interna der Anwendung, könnendieoberfläche verändern, Optionen ausblenden, Navigationsmöglichkeitenbeschränken,Ergebnisseüberprüfenetc. EinintegriertesTutorial bietet denlernendendenvorteil,sichdirekt inder realen AnwendungzubewegenundalleAktionenanhand derechtenarbeitsumgebung auszuprobieren.esgibtkeinenmedienbruch, keinevollständigenkontextwechsel, sonderneineunmittelbarmitdemlerngegenstandverknüpftelernumgebung. Jenach AusgestaltungderTutorialssind unterschiedliche Freiheitsgrade möglich.siereichen voneiner strikt vorgegebenen Lenkungbishinzuder Möglichkeit,das Tutorial anjeder Stelle zu unterbrechen und frei mit der vollständigen Anwendung weiterzuarbeiten. InsbesonderediefreierenVariantenkönnenExperimentierräumeeröffnen, diezu eigenem Ausprobiereneinladenund eigenesmaterial einbeziehbar machen. Somit kann denlernendeneine größerekontrolleüberdenselbstgesteuertenlernprozess 216

3 ermöglicht werden. GleichzeitigwerdenaberNutzungsanregungengegebenund Grundbegriffe und-konzepte erläutert. Abbildung 1:Github Bootcamp als integriertes Tutorial( Abbildung1zeigtdas githubbootcamp,dasdietypischenschrittezureinrichtung einesgithub-repositorysveranschaulichtundauffordert,deranleitungschrittweisezu folgen.amendedestutorialshabendielernendeneineigenesrepositoryangelegt, das sie inder Folge unmittelbar nutzen können,und weitere Funktionender Anwendung vordemhintergrundeigeneranforderungen kennengelernt und ausprobiert. DiepotenziellenVorteilederTutorial-Integrationwerdendurchdenpotenziellen Nachteil erkauft,dass die Tutorial-Entwicklung Teil des Entwicklungsprozesses der Anwendungsein muss. Das kannentwederinformeinerunmittelbarenintegrationin dieanwendungpassieren,wieimobigengithub-beispiel,oderaberdurcherweiterung der Web-Ausgabe umjavascript-bibliotheken,wieim Falle von Guided-Tour-Toolkits wieguiders.js[pi13]oderjoyride2[zu13].inbeidenfällenistesnötig,inden QuellcodederAnwendungeinzugreifen.BeiEigenentwicklungen kanndaszu komplizierterenentwicklungsabläufenführenundbeifremdanwendungendenverlust dervollenupdate-fähigkeitzurfolge habenoder mangelseingriffsmöglichkeitinden Codeundurchführbarsein. 1.2 ExterneTutorials ImGegensatzzuintegriertenTutorialssindexterneTutorialsnichtTeilderAnwendung. Der persönliche Tutor ist ebenso eine FormvonexternemTutorialwie eingedrucktes BuchmitSchritt-für-Schritt-Anleitungen. Eine besondere RollebeiSoftware-TutorialsspielenScreencasts[Ud05].Screencast- Tutorialsdemonstrierendie Nutzungeiner SoftwaredurcheinVideo,das ganz oder teilweisedeninhaltdes Computerbildschirms während der Software-Nutzung wiedergibt und häufig mit einer erklärendenaudio-spur unterlegt ist[ud05].gegenüber anderen FormenexternerTutorialswirdbeiScreencastsalsVorteilgesehen,dassLernendeden realenanwendungskontext sehen und Prozedurenund Abläufe nachvollziehenkönnen [SB10].Wie bei anderen videobasierten Lernformaten auch könnenerläuterungen unterbrochenund beliebighäufig wiederholt werden. Die NutzungvonScreencast- TutorialskannunabhängigvondererklärtenAnwendungerfolgen,aberauchparallel 217

4 dazugenutztwerden. Eine VerknüpfungvonAnwendung und Screencast-Tutorial,z.B. fürdieerfolgsprüfung, istabernichtohne weiteresmöglich. Dasführtzudrei Problemen[PA11]:ErstensmüssendieLernendendieimTutorialgezeigtenSzenenund KonstellationeninderOriginalanwendung findenund reproduzieren,zweitens müssen dienutzendenhäufigdenkontext wechseln, daihreeigene Arbeitsgeschwindigkeit meistvonder des Videosabweicht,und drittens führeneinzelne vergessene oder falsch ausgeführteschrittedazu,dassdielernendensichinvideound Anwendungneu orientierenmüssen. Screencastswerdenüblicherweise mitspeziellerscreen-recording-softwareaufgezeichnet.dasspektrumanentsprechendenlösungenreichtvonreineraufzeichnungssoftwarebishinzuumfangreichenauthoring-umgebungen, dieinsbesonderekomplexe Nachbearbeitungsschritteermöglichen und interaktive Elemente wieverzweigungen oderquizfragenbeinhalten. BeispielesolcherAnwendungensindz.B.Techsmith CamtasiaStudiooderAdobeCaptivate[Et12].MitentsprechendemAufwandkönnenso komplexstrukturiertelernumgebungenentstehen, diedurcheinsatzverschiedener StrukturelementeundInstruktionsstrategienauseinemgroßenRaumdidaktischer Möglichkeitenschöpfenkönnen[SB10].HauptanwendungsfeldfürScreencastsist allerdingsdievergleichsweise schnelle und einfache Erstellung abgefilmter Tutorials [Et12]. FürWeb-Anwendungensind Screencastsgutgeeignet,derBrowserinhalt kannvonallen gängigenbildschirmaufzeichnungsprogrammengut erfasst werden. Sie können insbesondereohnejeglicheneingriffindenquellcodederanwendungundsomitauch ohne MitwirkungdesHerstellers erzeugt werden. Bei Änderungeninder zuerklärenden SoftwaremüssenScreencastshäufigkomplettneuproduziertwerden, daauchkleine ÄnderungenanderOberflächezuAbweichungengegenüberdemVideomaterialführen. 1.3 Mischformen EinTool,dasdieVorteilebeiderVerfahrenkombiniertunddiejeweiligenNachteile eliminiert,müssteexternetutorials,dieunabhängigvonderzuerklärendenanwendung entstehenkönnen, mitder Anwendungslogikverknüpfbar machen, umaktive Schritte derlernendenmitdentutorialinhaltenzuverbinden. DasPause-and-Play-System[PA11]verwendetBildschirmaufzeichnungen,diemitder realen Anwendungssituation synchronisiert werden. Mittels Bildanalyseverfahren versucht das Werkzeug herauszufinden,ob dasvideo dem Anwender vorausist,um dann pausieren bzw. Hinweise geben zu können.für die Verknüpfung vonvideo und AnwendungwerdenPlugin-oderScripting-APIsderzuerklärendenAnwendung genutzt,z.b.vongooglesketchupoderadobephotoshop.damitentfälltdie Notwendigkeit,unmittelbarindenQuellcodeeingreifenzumüssen.Allerdingssind weiterhinanwendungsspezifischelösungenmitdenentsprechendenschnittstellen notwendig, diebeiweb-anwendungeninden meistenfällenfür dieexterne Steuerung nicht vorhandensind.den Ansatz,Anwendungs-APIszunutzen,umanwendungsspezifische,aberseparatentwickelteTutorialszuimplementieren,nutztauchMicrosofts spielerisches RibbonHero -Tutorial für Microsoft Office 2007[DD12]. 218

5 Einen generischeren Ansatz verfolgt die Nutzung voncleverphlalstutorial-werkzeug [SS08]. Dabei werden training wheelinterfaces konstruiert, d.h. indenoberflächen- AufbauderAnwendungeingegriffen, umlernrelevantehinweisezuplatzieren, komplexereoptionenauszublendenetc.dieseinterface-modifikationenwerdenzur LaufzeitderAnwendungvorgenommenohneimProgrammcodederAnwendung verankertseinzumüssenoderaufapisoderplugin-schnittstellenzurückzugreifen. Allerdingsist der Ansatz auf Java-Anwendungenbeschränkt,die eine SWING- Oberfläche verwenden. DerAufbaudieser Oberfläche ist unter bestimmten Voraussetzungenauch für externe Anwendungenzugreif-und manipulierbar. BeideAnsätzekommendemobenbeschriebenenIdealeinerexternen, aberdennoch verknüpftentutorialanwendungnahe.sielassensichaberbeidenichtohneweiteresauf Web-Anwendungenübertragen,sodasswirfürdiesenEinsatzweckeineneigenen Ansatzentwickelthaben, derimfolgendenbeschriebenwird. 2Tutonium 2.1 Zielsetzung ZielsetzungfürdieEntwicklungeinesTutorial-ToolsfürWeb-Anwendungenwares, externe Tutorialsproduzierenzu können,dieauf die zuerklärende Anwendung zugreifenumintegriertesfeedback,freiesexperimentierenundeinedenlernenden angepasste Geschwindigkeit zu ermöglichen.das Tool sollte zudemeine Autorenumgebungbereitstellen,mitderauchNicht-EntwicklerinderLagesind, Tutorialszuerstellenundzuüberarbeiten.DieNamensgebung Tutonium leitetsich aus der Aufgabe,Tutorialszuerstellen,und einer verwendeten Teiltechnologie,dem Software-TestframeworkSelenium,ab. TutorialssollenausdreiGrundelementenbestehen: KleinschrittigenAufgabenmit Erklärungstext,dazugehörigenHilfestellungen und Überprüfungsroutinen, die feststellen können,ob eintutorialschrittkorrekt umgesetzt wurde. 2.2 TechnischeRealisierung So wie die oben vorgestellte Lösung für Java-Anwendungen CleverPHL[SS08]aufden KomponentenbaumbeliebigerJava-SWING-Anwendungenzugreift,bietetsichfür Web-Anwendungendie Inspektion und Manipulation vondom-treesan.jededer erzeugtenansichtenkannclientseitig,d.h.mitjavascript-code,derimbrowserabläuft, ausgelesenund verändert werden. Da das Tutorial alsexternes Tutorial realisiert werdensoll,kannder entsprechende Javascript-Code nicht vonder Web-Anwendungselbst ausgeliefert werden. Umbeides zutrennen, wirdeinzweiteiligesframesetsverwendet:indeneinenteilwirdder Tutorial-Code geladen,indenanderendie reale,unmodifizierte Web-Anwendung(s. Abbildung2). 219

6 Abbildung 2:SchematischeDarstellungeines Tutonium-Tutorials In diesemszenario greifenjedoch Same-Origin-Policy -Mechanismen [Wo10] limitierendein.die Same-Origin-Policy isteinsicherheitsmechanismus, deres FramesineinemFramesetnurdanngestattetaufdieInhalteandererFrameszuzugreifen, wennsiedenselbenhost und Portverwendenund dasselbeprotokollnutzen.daraus ergibtsichdiebeschränkung, dass Tutorialund Web-Anwendungenvomgleichen Serverausgeliefertwerdenmüssen.Technologien,diedieAufweichungoderUmgehung der Same-Origin-Policy ermöglichen, benötigeninderregeldieexpliziteerlaubnis des manipuliertenframes, also wiederumeineveränderungderoriginalanwendung. Die Manipulation der eigentlichenweb-anwendung wird mitjavascript und jquery realisiert.jedestutorialbestehtausmehrerenteilaufgaben,dieinjquery-ui-tabs [Jq13] bereitgestellt werden. JederTab entspricht einer Aufgabe undeiner dazugehörigendatei,dievia AJAX indentab geladen wird. Das Script kann mittelsmanipulation des DOM-Treesbestimmte Elemente hervorheben, prüfen, obsie vorhanden sind,oderauchelementeeinfügen und dieseanimieren. Um die Elemente zu verändern oder auszulesen,ist es amkomfortabelsten,jqueryzu verwenden. Elementekönnenhervorgehoben, verändertoderergänztwerden. Fürdas Tutorialistessinnvoll,einenanimiertenZeigereinzufügen, deraufelementeund Aktionenhinweist.UmdenZeigerandierichtigeStellezubewegen, müssendiezu zeigendenelemente so identifiziert werden, dass sie mitjquery-selektoren angesprochenwerdenkönnen. Die Grundfunktionen für dietutorials werdenvoneiner statischenjavascript-bibliothek bereitgestellt und tutorial-spezifischverwendet.so erzeugt und bewegtz.b.diefunktion animovetoelementeinengrafischenzeigerzueinembestimmtenelementdes DOM- Trees. 220

7 2.3 Autorenumgebung Aufgabe der Autorenumgebung ist es,code für die tutorial-spezifische Verwendung der Bibliotheksfunktionenzuerzeugen. Da es auchnicht-entwicklern möglichseinsoll, Tutorialszuproduzieren,müssenz.B.CSS-Selektorenfürhervorzuhebendeoderzu überprüfendeelementevonderautorenumgebunggeneriertwerden. WirverwendenfürdiesenZweckSelenium,einToolzumTestenvonWeb- Anwendungen[Bu10].HauptzweckvonSeleniumistes,dieNutzungvonWeb- Anwendungen aufzuzeichnen und dabeiserien von Aktionen aufdom-elementen zu generieren.damit bietetessichbestens als AutorensystemfürdieTutorialsan. StandardmäßigkannSeleniumdie Tests als HTML-Dokument speichern und eine Reihe vontestsalssogenanntetest-suiteebenfallsimhtml-formatsichern. Umdie Aufzeichnungendirekt ineintutorial zuverwandeln,stellttutoniumeinbesonderes ExportformatalsFirefox-/Selenium-PluginzurVerfügung,dasdiezuvorgenannte Manipulation und einenerklärendentext bereitstellt(s.abbildung 3). Abbildung 3:SchematischeDarstellungder Autorenumgebung Tutoniumbesteht also auseinemselenium-exportformat sowie Bibliotheks-Funktionen und Frameset-Vorlagen,ausdeneneineineinemeigenenFrameablaufendeJavascript- Anwendunggeneriertwird,dieaufdenDOM-TreederunmodifiziertenWeb- Anwendungzugreift. Sollder Zeiger aufeine bestimmte Stelle gerichtet werden, so können dieschrittein der realenweb-anwendungmitseleniumaufgezeichnetwerden. Seleniumspeichertbeim AufzeichnenWertundZieleinesbestimmtenKommandos.Wirdbeispielsweiseauf einen Link geklickt,so wird das Selenium-Kommando clickandwait mit den Informationen über daselement,das dieses Clickevent ausgelöst hat,also dem Link, gespeichert. Das besondere Tutonium-Exportformat für Selenium verarbeitet solche Kommandos und erstellt mit ihnenaus einem Selenium-Test eine Aufgabe.Selenium-Kommandos,die das Tutonium-Exportformat erkennt,erfüllendrei unterschiedliche Eigenschafteneiner Aufgabe:ZumeinendienenstoreTextundstoreTitledazu,Aufgabestellungund 221

8 Aufgabentitel,die der Nutzer sieht,festzulegen. clickandwaitermöglicht die Nutzung des Zeigers mit Hilfe des helper.js-scripts.werden mehrere Elemente angeklickt,so werdensieinderentsprechendenreihenfolge vomzeigerbesucht.auchselectnutzt denzeiger,ermöglichtaberauchdendrittenwichtigenaspekteinertutonium-tutorial- Aufgabe, das Überprüfendes Lernzieles.So lässt sichbeispielsweiseprüfen, ob ineinem Drop-Down-Menüdie vorgesehene Auswahlgetroffenwurde.Ferner lässt sichin Tutonium-Aufgabenüberprüfen,obeinTextodereinElementaufeinerSeitevorhanden istoderobeinebestimmteurlerreichtwurde(s. Abbildung4). Abbildung 4:Kommandos in der Autorenumgebung Selenium verifyelementpresentprüft, obeinelementaufdergeladenenseitevorhanden ist. AlsTarget werdencss,name,idund linkunterstützt. verifytextpresentprüft,obeinbestimmtertextim<body>enthaltenist. verifylocationprüft, obeinevorgegebene vollständigeurlgeladenwurde, verifypathprüft auchaufteilevonpfadeninder URL. BeimSpeicherneiner Selenium-Test-Suite wird das komplette Tutorial ausvorlagen, Bibliothekenund tutorial-spezifischendaten generiert.der so erzeugte Dateibaumkann nunangeeigneterstelleaufdemanwendungsserverabgelegt werden. Die gespeichertenselenium-dateien können jederzeitüberarbeitet werden. Bei ÄnderungeninderzuerklärendenWeb-AnwendungmussdasTutorialinzweiFällen angepasst werden:entweder ändern sich Eigenschaften der Anwendung,auf die im ErklärungstextBezuggenommenwird,oderreferenzierteDOM-Elementekönnennicht mehraufdiegleicheweiseidentifiziertwerden.einfacheänderungenderweb- Anwendung, einschließlichz.b.änderungendercss-eigenschaftenbenötigenkeine Überarbeitung des Tutorials.Änderungensind inder Regel mit geringem Aufwand umzusetzen, weilinseleniumnurdiegeändertenschritteangepasstwerdenmüssenund dann die Test-Suite erneut exportiert wird. 222

9 2.4 Beispiele FürdasOpen-Source-Wiki-SystemPmWiki[Mi13]solltendieerstenSchrittezur Bearbeitung einer Wiki-Seite mithilfe eines Tutonium-Tutorials erläutert werden. Nach Start des Tutorials wird das Tutonium-Fenster über deminhaltsbereichdeswikis eingeblendet(s. Abbildung 5).Das Fenster besteht aus mehrerentabs, indenen kleinschrittigverschiedene Funktionenzum Bearbeiten eines Wikiserläutert werden. JederTab enthält einentext,der Anweisungenzum Ausführendes Tutorial-Schritts enthält,z.b.umzu lernen, wie dienavigation inpmwiki funktioniert.nebendiesem Text gibt esjeweilsdie Möglichkeit,Hilfestellungabzurufenoder dasergebnisprüfen zulassen. Abbildung5:Tutonium-Fenster mit einzelnen Tabs Weil das Tutorial sehr kleinschrittig aufgebaut ist,müssen sich die Nutzenden keine langenklickpfademerken,sondernkönnendieseschrittfürschrittselberreproduzieren. AußerdemkanndasTutorialbeliebigoftwiederholtwerden,sodasseinindividuelles Bearbeitungstempo erreicht wird.mit einemklickaufden grünenhaken imtutorial- Fenster wird überprüft, ob das Ziel des Schritteserreicht wurde. IndiesemBeispiel bestehendiezieledarin, einebestimmteseiteüberdienavigationzuerreichen,die Bearbeitungsansicht aufzurufenund einenbestimmtentexteinzufügen. Auch fürausbilder-heute.de,ein Portal fürauszubildende undausbilder der MechatronikaufBasisvonMoodle,wurdenmitTutoniumverschiedeneTutorials erstellt.inihnenwirdz.b.erklärt, wielernarrangements, einzentralerbestandteildes Portals,zusammengestellt werdenkönnen.umeinneues Lernarrangement zusammenzustellen, mussder Ausbilder verschiedene Lernbausteine auswählen.das Tutorial weist denwegzur Auswahl des Lernbausteinsund bietet eine Überprüfungan, ob der richtige Bausteinausgewählt wurde.ergebnisdes Tutorial-Durchlaufsist ein vollständig nutzbareseigenes Lernarrangement, das der Ausbilder, der das Tutorial absolvierthat,anschließendweiternutzenkann. 223

10 3Nutzungserfahrungen Der Einsatz inzwei produktivgenutztenumgebungen hat gezeigt,dass das technische Konzeptfunktionsfähigist. Die erzeugtentutorialssind inallenpraktischrelevanten Browsernlauffähigund mitallenfunktionenderzuerklärendenweb-anwendungen kompatibel. EinesystematischeEvaluationdesWerkzeugesstehtnochaus.Bislanghaben5 Nutzerinnenund Nutzer mitsehr unterschiedlichen technischenvorkenntnissen (insbesondere zu Selenium, Web-Technologien und DOM-Selektoren) das Autorensystemverwendet,umanschließendproduktivgenutzteTutorialszuerstellen. Ca. 10NutzerdieserTutorialswurdeninEinzelinterviewsbefragt. Sie beschreibenes überwiegend als vorteilhaft,tutorialund Anwendungsnutzung miteinander verknüpftzu erleben undhattenkeine Problemedamit, Tutorial-Funktionenund Anwendungsfunktionenauseinanderzuhalten.LediglichinEinzelfällenwurdebeklagt, dass eine reinpassivzu konsumierende Informationsquelle vermisst wurde. Beider Umsetzung verschiedener Projektesind einige technische Beschränkungen aufgefallen, diezumteilprinzipbedingtbestehenund zumteilaufgrund von BesonderheitenderverwendetenToolsaufgetretensind. EsistnichtinallenFällengelungen,eindeutigeundstabileReferenzenaufDOM- Tree-Elementezugenerieren.InsbesonderewenndieWeb-Anwendungkeine eindeutigenids generiert,könnendiedynamischgeneriertenausgabeninder AnwendungssituationvonderAufzeichnungssituationabweichenunddasTutorial- Scriptfalsche Elemente selektierenlassen.gleiches gilt für dieüberprüfung. Insbesonderedann, wennpersonalisiertesichtenimtutorialverwendetwerden, ist esschwierigoderunmöglich,innerhalbdestutorialszuspringen, dabeieinem SprungzueinemspäterenSchrittein Ausgangszustand herbeigeführt werden muss, der ggf. nicht durchdie Tutonium-Bibliotheksfunktionenerzeugt werden kann. Das begrenztdietutorialsinderregelaufeinesequenzielleabarbeitung. Ebenfallsbei personalisierten Sichtenist esnicht möglich, denlernendenschritte zupräsentieren,diesiemitihrenpersönlichenrechteninderanwendungnicht durchführendürfen.sokönnendieausbilder-funktionenbeiausbilder-heute.denur Personenpräsentiert werden, dieschonausbilder-status haben. Durchdie Verwendungder Autorenumgebung Seleniumbestand die Absicht,die TutorialsauchvonPersonenproduzierenlassenzukönnen, dieüberkeinevertieften Kenntnisse zuweb-technologien verfügen. GrundsätzlichkonntediesesZiel bekräftigt werden. DieTestautoren habenbestätigt, dass ihnendietutorial-erstellungmit Seleniumnacheiner kurzeneinweisungleicht gefallenist. Hilfreichseiendabei insbesonderediedrop-down-menüszur Befehlsauswahl und die Aufnahmefunktion gewesen. Essind jedochaucheinigeschwierigkeitenaufgetretenbzw. Schwächendes Konzeptesoffenkundiggeworden: 224

11 InProblemfällenistesunabdingbar,einigeKernkonzeptewieCSS-Selektorenund http-abläufe verstandenzuhaben. Selenium versteckt außerdemdiezugehörigen Fachbezeichnungennicht und hat insgesamt eine recht technische Anmutung. BeinormalerBrowser-Einstellungistesnichtmöglich,einenlokalenTestdurchlauf des Tutorialszustarten,bevor esaufdemserver liegt.esgibt allerdingsfür die meistenbrowserdiemöglichkeit, die Same-Origin-Policy ineinzelfällen aufzuweichenunddamitdastutorialzutesten.daessichdabeiaberumein wichtiges Sicherheitsfeatureder Browser handelt,istdieses Vorgehen nur instreng kontrolliertentestszenarienempfehlenswert. DieErklärungstextemüssenalsHTML-Rohtextindemsehrrudimentären Selenium-Editorerstelltwerden.AufwendigereFormatierungen, Audiospurenetc. sind nichtohne weiteres möglich. 4Fazit Mit Tutoniumhaben wir einframeworkfür interaktive TutorialszuWeb-Anwendungen vorgestellt, das die Nachteile verschiedener etablierter Tutorial-Technologien überwindetohne derenpotenziellevorteileaufzugeben.imgegensatz zuintegrierten TutorialsoderexternenTutorialswiez.B.Screencastsistesmöglich, sowohltechnisch mit der Anwendung zu interagieren als auch auf Eingriffe in die Originalanwendung zu verzichten. Möglich wird diesdurchclientseitige Zugriffe aufdendom-tree derweb-anwendung. Aufgrund der Same-Origin-Policy muss dazuallerdingsder Tutorial-Code vom gleichenserver wie die Web-Anwendung selbst ausgeliefert werden. Die Erstellung der Tutorialssollte mit einer möglichsteinfach zu bedienenden AutorenumgebungauchvonNicht-Entwicklernbewerkstelligtwerdenkönnen.Dasdazu verwendetetoolseleniummiteinemzusätzlichenfirefox-plugin,daseinneues Selenium-ExportformatzurVerfügungstellt,hatsichalsgrundsätzlichbrauchbar erwiesen,stelltjedochletztendlichdocheinigeanforderungenandastechnische Vorwissen. Eswäredaherlohnenswert, einspezialisierteresautorenwerkzeugzu entwickeln, dasggf. aufbasisvonseleniumarbeitet, abereineaufdietutorialerstellung zugeschnitteneoberflächeaufweist. Zukünftigsollgenaueruntersuchtwerden, unterwelchenumständentutorial-anwender vondenerweiterteninteraktionsmöglichkeitenprofitierenkönnen. VontechnischerSeite sind AlternativenzumFrame-übergreifendenDOM-Zugriffzuevaluieren,wiez.B. HTML5WebMessaging[Wo12]. 225

12 Literaturverzeichnis [Bu10] Burns,D.:Selenium1.0 TestingTools. Beginner s Guide. PacktPubl., Birmingham, [CL11] Charland,A.; Leroux, B.: Mobileapplicationdevelopment: web vs. native. In: CommunicationsoftheACM,Volume54Issue5,May2011;S [Co99] Conallen,J.: ModelingWeb application architectures with UML. In: Communications of theacm,volume42issue10,oct. 1999;S [DD12] Dong, T.; Dontcheva, M.et al.: Discovery-based Games for LearningSoftware. In: Proceedings ofthesigchi Conference on Human Factors in ComputingSystems, ACM, NewYork, 2012;S [De06] Deutsches Institutfür Normung/NormenausschussInformationsverarbeitungssysteme: Ergonomieder Mensch-System-Interaktion/Teil 110/Grundsätzeder Dialoggestaltung: (ISO :2006); DeutscheFassungEN ISO :2006.Deutsches Institut für Normung,Berlin,2006. [Et12] e-teaching.org: Bildschirmaufzeichnung. /schulung/screencast, Stand: [Ha08] Hayes, B.: CloudComputing. In:CommunicationsoftheACM,Vol. 51No.7,Jul. 2008;S [Jq13] jqueryfoundation:jqueryui Tabs. Stand: [Le11] Leszczensky, M.;Gehrke, B.; Helmrich, R.: Bildungund Qualifikation als Grundlage der technologischen Leistungsfähigkeit Deutschlands. HIS Hochschul-Informations- SystemGmbH, Hannover, [SB10] Sugar, W.; Brown, A.; Luterbach, K.: ExaminingtheAnatomyofaScreencast: UncoveringCommon Elementsand Instructional Strategies.In:International Reviewof Research in Open and DistanceLearning,Vol.11 No.3, 2010;S [SS08] Spannagel, C.; Schroeder, U.: GUI-AdaptioneninLernkontexten. In: Seehusen,S.; Lucke, U.; Fischer, S.(Hrsg): LectureNotesin Informatics- LNI Proceedings der 6. elearningfachtagunginformatik(delfi 2008). Springer, Heidelberg, 2008; S [SW11] Seyda, S.;Werner, D.: IW-Weiterbildungserhebung2011.Institutder deutschen Wirtschaft,Köln,2012. [Ud05] Udell, J.: What isscreen-casting? In: Digital Media, 2005/11/16. O Reilly,Sebastopol, Cambridge, Stand: [PA11] Pierce, J.; Agrawala, M.; Klemmer, S.;Pongnumkul, S.; Dontcheva, M.; Li, W. etal.: Pause-and-play: automaticallylinkingscreencastvideotutorialswithapplications. In: Proceedings ofthe24th Annual ACM Symposiumon User InterfaceSoftwareand Technology,Bd.1.ACMPress,NewYork,2011. [Pi13] Pickhardt, J.: guiders.js. Stand: [Wo10] World Wide Web Consortium:Same Origin Policy.In:World Wide Web Consortium (Hrsg.): WebSecurityWiki. Stand: [Wo12] Word Wide Web Consortium: HTML5 Web Messaging. Editor s Draft 12 June Stand: [Zu13] ZURB Inc.:Joyride2 jqueryfeaturetour Plugin. playground/jquery-joyride-feature-tour-plugin.stand: