DieDunkleSeiteDerDunkelmodus(DarkMode)desOnline-Übungssystems
Autor:ImmoSchulz-Gerlach,ZMI,FeU-Softwaretechnik
Version:1.1—5.November2019
3
3
4
5
6
9
10
10
10
12
13
17
18
18
18
20
20
20
Inhaltsverzeichnis
WasistderDarkMode?DieRückkehrderDunkelheit
DarkModeimOSundimWeb
Browserunterstützung
DarkModeimOnline-Übungssystem
HinweisefürStudentenundandereEndnutzerHinweisefürKursbetreuerundAufgabenautoren
KompatibilitätvonselbsterstelltenKursinhalten
Schriftfarben
HinweisefürNutzerderfortgeschrittenenAufgabenerstellung
Bilder
KompatibilitätsmodifürAufgaben
Standardmodus
DeklarierteDunkelmodus-Kompatibilität
VordefinierteBildfilterfürdenDarkMode
Dunkelmodus-Unterdrückung
ModusauswahlinAufgabenerstellungsassistenten
ModusauswahlinfortgeschrittenerAufgabenerstellung
WasistderDarkMode?
DieRückkehrderDunkelheit
NutzerfrüherPCserinnernsichvielleichtnochandieZeit, inderComputerbildschirmeinderRegelgrün oder bernsteinfarben leuchtende Buchstaben auf dunkler Mattscheibe anzeigten. Das hatteauchdenVorteil,dassdasFlimmernderRöhrenmonitorewenigerauffiel,dasodieAnzahlleuchten-derPixelgeringerwaralsbei invertiertemBild.AuchnachAufkommenvonFarbmonitorenbliebeszunächst inderRegeldabei,dassderHintergrundeherdunkel (oftdunkelblau)unddie Schrift imVordergrundeherhell(oftweißodergelb)gehaltenwurde.
MitdengrafischenOberflächenkamendagegenmeistweißleuchtendeHintergründemitschwarzerSchriftauf.DiesesFarbschemakommtinsbesonderenäheranschwarzgedrucktenTextaufweißemPapierundwird insofernoftals„natürlicher“empfunden.Mitneueren,flimmerfreienBildschirmenwurdederhelleHintergrundauchwenigerproblematischalsfrüher.
DochinletzterZeiterlebtdiehelleSchriftaufdunklemGrundeineRenaissance,indemgrafischeBe-nutzeroberflächen einen Dunkelmodus anbieten, mit dunklen Hintergründen meist in GrautönenoderSchwarz,undmäßighellleuchtenderSchriftundSymbolen.DabeiwirddemEndbenutzerheutemeistdieWahlgelassen,oberdenDunkelmodusoderdenherkömmlichenhellenModusbevorzugt.Auch eine Zeitsteuerung (Dunkelmodus zwischen Sonnenuntergangund Sonnenaufgang, tagsüberhellerModus)istinzwischenaufvielenSystemenmöglich.
DerDunkelmoduswirdbevorzugtbeidunkleremUmgebungslichtaktiviertundsollz.B.durchgerin-gere Lichtemission die Augen weniger belasten. Auch die Abstrahlungblauen Lichts<https://www.blickcheck.de/auge/augenpflege-und-training/augentraining/blaues-licht-vor-und-nachteile/>dürfte dadurchreduziert werden, das möglicherweise zu Schlafproblemen führen oder die Netzhaut schädigenkönnte.AufOLED-Bildschirmen,wiesieinsbesonderevonteurerenSmartphonesverwendetwerden,kannderDunkelmodusauchhelfen,Stromzusparen,dabeidiesenDisplays jeder leuchtendePixelStromverbraucht,dunklePixeldagegennicht.
GeradeinhellerenUmgebungenistdagegenoftderhelleModusvorzuziehen.Insbesonderespiegel-nde »Glossy-Bildschirme« überstrahlen Spiegelungen von hellem Umgebungslicht nur im hellenModus,währendsichdieSpiegelungenimDunkelmodusverstärken.
ImNetzfindensichvieleausführlichereVergleichevonVor-undNachteilendesDarkModes,z.B.derBlog-Artikel »Why you should switchonDarkMode« <https://blog.weekdone.com/why-you-should-switch-on-
CometotheDarkSide
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite3/21
dark-mode/>.
DarkModeimOSundimWeb
In diesem Zuge bietenmehr undmehr Betriebssysteme (OS) ihren Benutzern dieWahl an, ob sieeinenhellenoderdunklenModuszurDarstellungderFensteroberflächebevorzugen,ggf.auchzeit-gesteuert.InmacOSseitMojaveundinWindows10sowieiniOSundiPadOSabVersion13findetsichjeweilseineentsprechendeOptionindenSystemeinstellungen.
BetriebssystemweiteEinstellungenführenzunächstzueinerAbdunklungderBetriebssystem-eigenenBildschirmelementewie Fensterrahmen, Symbolleisten etc.Wirklich sinnvollwird einDunkelmodusabererst,wennsichauchdieFensterinhaltenachdieserEinstellungrichten.ImmermehrApps(Kurz-form für Applikationen, also Anwendungssoftware) unterstützen inzwischen den betriebssys-temweitenDunkelmodus, indemsie ihreeigeneDarstellungder jeweils indenSystemeinstellungengewähltenPräferenzanpassen.
Einen besonderen Fall stellenWebbrowser dar: Diese können zwar eigenständig ihre Fenster samt
SystemeinstellungenmacOS
SystemeinstellungenWindows
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite4/21
Symbol-undTableistenabdunkeln,habenaberkeinendirektenEinflussaufdieDarstellungbeliebigerWebseiten, und hell leuchtende Webseiten mit strahlend weißem Hintergrund stellen fürDunkelmodus-NutzereinenStörfaktordar:
Inzwischen gibt es jedoch einen von immermehr Browsern unterstütztenWebstandard, über denWebseitenihrAussehenvonderBenutzerpräferenz(bevorzugtderBenutzerdenhellenoderdunklenModus oder hat er keine Präferenz?) unterschiedlich festlegen können.Wenn der Browser diesenStandardunterstütztunddieBenutzerpräferenzkennt(übereineBrowser-interneEinstellmöglichkeitoderdurchAbfragederglobalenEinstellungendesBetriebssystems),kannsichdieWebsitedamitef-fektivautomatischandiesePräferenzanpassen.Dieeigentliche„Arbeit“,nämlichdasFestlegeneineralternativenDarstellungfürdenDunkelmodus,mussaberdiejeweiligeWebsiteleisten.
Browserunterstützung
StandNovember2019siehtdermirbekannteBrowser-Supportwiefolgtaus:
Firefox,ChromeundSafaripassensichautomatischandiebetriebssystemweiteEinstellung(untermacOSundggf.Windows)an.
OperahatderzeiteineneigenenSchalter(unter»EinfacheEinrichtung«),mitdemeinBenutzerunabhängigvonderBetriebssystem-EinstellungzwischenDunkel-undHellmoduswechselnkann.
VivaldiunterstütztdenDarkMode(noch)nicht.
AktuelleMicrosoft-Browser(sowohlInternetExploreralsauchEdge)unterstützenebenfallskeinenDunkelmodus.Edge(nochmitMicrosoftsabgekündigterRenderingEngine)kannzwarseineeigeneOberflächeabdunkeln,unterstütztabernichtdieDunkel-DarstellungfürWebseiten.
ZukünftigeEdge-VersionenderChromium-Rendering-Enginewerden(nachderaktuellenBeta-Versionzuurteilen)denDarkModeunterstützen.DabeibesitztderBrowsereinelokaleEinstellung(ähnlichzuOpera),jedochmitdreiOptionen:Immerhell,immerdunkeloder
Blendend:HelleWebseiteinansonstendunklerUmgebung
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite5/21
AnpassungandieBetriebssystem-Einstellung.WelchederOptionennachInstallationvoreingestelltseinwird,stehtnochnichtfest:InderBetawaruntermacOSdieBetriebssystem-Angleichungvoreingestellt,unterWindowsjedochderdauerhafthelleModus.
DarkMode-AuswahlinOpera63
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite6/21
DarkModeimOnline-Übungssystem
DasOnline-Übungssystembesitztmittlerweile (abEndeOktober2019)einalternativesDark-Mode-Design,daseinkompatiblerBrowserimmerdannanwendet,wenneineDunkelmodus-PräferenzdesBenutzersvorliegt.
Die Darstellung der Übungssystem-eigenen Seitenwurde speziell auf den Dunkelmodus optimiert.(Falls doch noch etwas übersehen wurde und Ihnen Seiten mit im Dunkelmodus nicht optimalerDarstellungauffallensollten,meldenSiediesebitteandenHelpdesk.)
EtwaskompliziertersiehtdieSituationabermit Inhaltenaus,dienichtvonEntwicklerndesOnline-Übungssystemsbeeinflusstwerdenkönnen,sondernvonNutzernerstelltwerden–insbesonderedieAufgabenstellungen,Korrekturen,Musterlösungenetc.BeisolchenbenutzererzeugtenInhaltenkönnteesimDunkelmoduszuDarstellungsproblemenkom-
Übungssystem-StartseiteimhellenoderdunklenModus
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite7/21
men.StellteinAufgabenautorbeispielsweiseeinDiagrammein,dasaus schwarzenLinienbesteht,jedochselbstkeineHintergrundfarbefestlegt,sondernschlichtvoraussetzt,aufweißemoderzumind-est hellem Hintergrund angezeigt zu werden, undwürde dieses im Dunkelmodus auf schwarzemHintergrundabgebildet,wäreespraktischnichtmehrzuerkennen.OderlegteinAufgabenautorfest,dasseinTeilseinesTextesindunkelblauerFarbedargestelltwerdensoll,sowäreauchdieserTextaufschwarzemHintergrundkaumnochlesbar.
DasOnline-ÜbungssystembegegnetdiesenpotentiellenProblemenaufmehrereWeisen:
TextemitfestgelegterVordergrundfarbe ,aberohnefestgelegteHintergrundfarbe,werdenautomatischhellgrauhinterlegt,umlesbarzubleiben.
AnalogwirdfürTextemitfestgelegterHintergrundfarbe,aberohnefestgelegteVordergrundfarbe,dieSchriftfarbeimDunkelmodusaufSchwarzbelassen(stattaufssonstimDunkelmodusaufschwarzemGrundverwendeteGrauumgestelltzuwerden).
BilderinAufgabenseitenwerdenimabwärtskompatiblenStandardmodusautomatischhellgrauhinterlegt,fürdenFalldasssiedunkleInhalteauftransparentemHintergrundenthaltensollte.
Solltetrotz(oderwegen)dieserMaßnahmeneineSeiteimDunkelmodusschlechtleserlicheoder„unschöne“Inhalteaufweisen,kanneinBetrachterjederzeitübereineCheckboximSeitenfußdenDunkelmodusfürsOnline-Übungssystemunterdrücken,ohneihngleichsystemweitabschaltenzumüssen.
EinAufgabenautorkanndieDarstellungseinerAufgabenseiten,Musterlösungsseitenetc.fürdenDunkelmodusoptimierenoderauch–insbesonderebeivonihmnichtlösbarenDarstellungsproblemen–denDunkelmoduskomplettabschalten,sodassdieseAufgabenimmerimhellenModusgeöffnetwerden.
DienachfolgendenAbschnittegehenaufallediesePunkteausführlicherein.
1
DieDunkleSeite WasistderDarkMode?
19.11.19 Seite8/21
HinweisefürStudentenundandereEndnutzerDieStandardansichtdesOnline-ÜbungssystemsistdiehelleDarstellung.
Wenn Sie jedoch in Ihrem Betriebssystem bzw. Browser (vgl. Opera) eine Präferenz für dunkleDarstellung eingeschaltet haben und der Browser den Dunkelmodus auch unterstützt (sieheBrowserunterstützung),wechseltdasOnline-ÜbungssystemstandardmäßigindieDunkeldarstellung.IndiesemFallfindenSieunten rechts im„Footer“ jederSeiteeineMöglichkeit,denDunkelmodusfürsOnline-Übungssystemzuunterdrücken:
DieseCheckboxistnursichtbar,wenneineDunkelmodus-Präferenzeingestelltist.DamitkönnenSiespeziell dasOnline-Übungssystemanweisen, die globaleDunkelmodus-Präferenz zu ignorierenunddieInhaltewiederimhellenDesigndarzustellen.
Diese Option ist vor allem für den Fall eingeführt worden, dass Sie auf Inhalte stoßen, die imDunkelmodusnicht fehlerfreiodergut lesbardargestelltwerden (vgl. vorigenAbschnitt).WennSiealsogewisseElemente(z.B.dunkelblaueSchriftaufschwarzemGrund)nichtlesenkönnenoderz.B.denVerdachthaben,dassgewisseschwarzeFlächenineinerAufgabenseiteeigentlichInhalteenthal-ten sollten (z.B. schwarze Schrift oder schwarze Diagramme auf schwarzem Grund), dann deak-tivierenSie–ggf.auchnurkurzzeitigzurProbe–denDunkelmoduseinfachüberdieseCheckbox.SiemüssendazunichtextradieglobaleFarbschema-EinstellungIhresSystemswechseln.
Wenn Sie dieseOptionmarkieren,wird das helleDesign so lange aktiviert, bis Sie durch erneutesBetätigenderCheckboxdieUnterdrückungwiederabschalten.DieEinstellunggiltinsbesonderenichtnurfürdiegeradeangezeigteSeite,sondernbleibtauchaktiv,wennSieimSystemnavigieren.
DazuwirddieseEinstellungauf IhremComputer ineinemCookiegespeichert (vgl.Datenschutzbes-timmungen <https://online-uebungssystem-q.fernuni-hagen.de/hilfe/datenschutz.html>). BeimAbschalten der Un-terdrückungwirddasCookiesofortwiedergelöscht.AuchwennSieaufdembetroffenenComputerdas Online-Übungssystem für mindestens einen Monat nicht benutzen, wird das Cookie wiedergelöscht.
CheckboxzumUnterdrückendesDarkMode
DieDunkleSeite HinweisefürStudentenundandereEndnutzer
19.11.19 Seite9/21
HinweisefürKursbetreuerundAufgabenautorenAlsKursbetreueroderAufgabenautorerstellenSieggf. selbstWebinhalte, insbesondereAufgaben-stellungen (Aufgabenformulare, Quittungs- und Korrekturvorlagen, Musterlösungsseiten, Korrek-turhinweise),ggf.auchHinweistextezumEinblendenaufderKursstartseiteoderdie»MessageoftheDay«,dieaufverschiedenenSeitenals„Aktuelles“-Boxeingeblendetwird.
Zunächst ist festzuhalten,dassderDarkModenur imaktuellen»Webdesign2018«zurVerfügungsteht.FallsSienochInhaltewieKursstartseite,AufgabenübersichtsseiteineinemälterenDesignanbi-eten,erscheinendieseimmerindergewohntenhellenDarstellung.
WennSieaberInhalteimaktuellenDesignanbieten,beschreibtdieserAbschnitt,wasdabeifürDark-Mode-ProblemeauftretenkönntenundwasmanfürbestmöglicheKompatibilitätbeachtensollte.
KompatibilitätvonselbsterstelltenKursinhalten
Wie oben inDarkMode imOnline-Übungssystemschon festgehaltenwurde,könnennichtallebe-nutzererstelltenInhalteautomatischoptimalimDunkelmodusangezeigtwerden.DaskannSieiner-sterLiniebetreffen,wennSiemitTextfarbenarbeitenoderBildermitTransparenzverwenden,beide-nenalsoderSeitenhintergrund(weißimLightMode,schwarzimDarkMode)durchscheint.
Schriftfarben
FallsSieeinemTextSchriftfarbenalssog.Inline-Styleszuweisen(z.B.durchVerwendungderSchrift-farbauswahldeseingebautenHTML-Editors,oder–fallsSieHTML-Quelltexteselbsterstellen–durchein style -Attributmit color -Property),dannsinddieseausgewähltenFarbenfixiert,werdenalsoidentischsowohl imLightModealsauch imDarkModeverwendet. (DasÜbungssystem-StylesheethatdannkeineHandhabe,imDarkModedieFarbezubeeinflussen.)
Die folgende Abbildung zeigt beispielhaft die feste Zuordnung einer Schriftfarbe (Dunkelgrün) ineinemWYSIWYG-TexteditordesOnline-Übungssystems:
Das istnoch relativunproblematisch,wennSiesowohl eineVordergrundfarbealsauch eineHinter-grundfarbefestlegen.LegenSieabernureineSchriftfarbeohneHintergrundfarbefest,sogehtdasOnline-Übungssystemdavonaus,dassSiedieseFarbauswahlpassendzuweißemHintergrundgetrof-fenhaben.UnddaeineSchriftfarbe,dieaufweißemGrundgutenKontrastbietet,aufschwarzemGrund meist kaum noch lesbar ist (mit zu geringem Kontrast), wird das Übungssystem solche
FesteZuweisungeinerSchriftfarbe
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite10/21
TextstellenimDunkelmodusautomatischmithellgrauemHintergrundhinterlegen(sieheübernächsteAbbildung).
Ähnlich verhält es sich,wenn Sie lediglich eine Hintergrundfarbe (z.B. Gelb) festlegen, aber keineSchriftfarbe.IndemFallgehtdasOnline-Übungssystemdavonaus,dassdieseHintergrundfarbeaufschwarzen Text optimiert ist und versucht, den Vordergrundtext auch im Dark Mode in Schwarzeinzufärben.
EinemitBlick aufDark-Mode-Kompatibilitätmeist bessereAlternative ist dieVerwendungder For-matvorlagen,diedasOnline-Übungssystemim»Formate«-Menüanbietet:
ZumindestfürtypischeAufgabenwiegelbeTextmarkierungoderrotenodergrünenTextgibtesdortVorlagenzurAuswahl,diejeweilseineseparateAusprägungfürdenhellenunddendunklenModushaben.DieVorlage»GrünerText«z.B,dieinobigerAbbildungausgewähltwird,legtfürdenhellenModuseinDunkelgrün,imDunkelmodusdagegeneindeutlichhelleresGrünalsSchriftfarbefest.AlsAlternativezufesterGelb-HinterlegunggibtesauchTextmarker-Vorlagen,diebeideimDunkelmodusden schwarzen Hintergrund nur ein klein wenig „dunkelgelb“ einfärben, so dass die MarkierungohneAnpassungderTextfarbeverwendetwerdenkann.
Die folgende Abbildung zeigt die Auswirkungen sowohl der Formatvorlagen für grünen Text undTextmarkeralsauchderzuvorvorgenommenen»Inline-Styles«imDunkelmodus:
Formatvorlagen-Auswahl
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite11/21
WährendesbeimTextmarker-BeispielnochGeschmacksacheseinmag,obSie imDunkelmodusdieTextmarker-FormatvorlagemitderdunkelgelbenHinterlegungbeigleicherTextfarbevorziehenoderdochdieKombinationaushellgelbemHintergrundmitschwarzerSchrift (dieaber imDunkelmodusschonetwas„knallig“wirkt),soistdiehellgraueHinterlegungderdunkelgrünenSchriftschonehereineNotlösung,dieFormatvorlagen-Varianteisthiereindeutigvorzuziehen.
HinweisefürNutzerderfortgeschrittenenAufgabenerstellung
Wenn Sie selbst HTML-Dokumente erstellen und im Online-Übungssystem hinterlegen, haben SiedeutlichmehrGestaltungsspielraum. Zum Beispiel könnten Sie Textfarben nicht nur als Inline-Style(also per style -Attribut in HTML-Elementen) hinterlegen, sondern auch eigene CSS-Dateien alsKursressourcen speichern und in ihrem HTML verwenden oder <style> -Elemente direkt in derHTML-Dateianlegen,indenenSieFormatvorlagendefinieren.
FüreigeneCSS-FormatierungengreiftdieobenbeschriebeneAutomatiknicht:DasautomatischeHin-terlegenvonTextmitgrauemHintergrundpassiertnurfürElementemiteinem style -Attribut,daseine color festlegt, und das automatische Schwarz-Färben der Schrift nur für Elemente mitstyle -Attribut,daseinen background festlegt.
FallsSiez.B.miteigenenCSS-Styles für irgendwelche InhalteeineschwarzeTextfarbeohneHinter-grundfarbe festlegen, sowird dieser Text imDarkMode effektiv unsichtbar sein. In solchen FällensolltenSieIhreStylesheetssoauslegen,dassSieentwederimmerVordergrund-undHintergrundfarbezusammenpassendfestlegen,oderSieerweiterndasStylesheetgleichumseparateFarbenfürdenDarkModeperMediaQuery.AnalogzudenÜbungssystem-StylessolltendanndieDefault-StylesfürdenLightModedefiniertwerdenunddieabweichendenFarbschematafürdenDarkModenurbeientsprechenderPräferenzdieStandardregelnüberstimmen.
Die oben bereits beschriebenen Formatvorlagen, die imWYSIWYG-Editor im »Formate«-Menü zurAuswahl stehen,könnenSienatürlichauchdirekt in IhremHTML-Codeverwenden, indemSieText(typsicherweiseper span -Element)einederfolgendenKlassenzuordnen:
greenText fürgrüneSchriftfarbe(DunkelgrünimLightMode,HellgrünimDarkMode)
redText analogfürroteSchriftfarbe
textmarker füreinegelbeSchrifthinterlegung(grellhellesGelbimLightMode,dunklesGelbimDarkMode)
textmarkerLight füreinealternativegelbeSchrifthinterlegung,dieimLightModedezenter/wenigergrellaussieht,sieheAbbildungenoben.
VergleichimDunkelmodus
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite12/21
AlsBeispieldafür,wiemanselbst ineinerCSS-DateiverschiedeneSchriftfarbenfürhellenunddun-klenModusdefiniert,seianbeidieDefinitionder(bereitszentralvorgegebenen)Klasse greenTextzitiert:
.greenText { color: #8f0000;}@media (prefers-color-scheme: dark) { body:not(.disableDarkMode) .greenText { color: #00c300; }}
DieEinschränkungderDark-Mode-Regel aufdenSelektorbody:not(.disableDarkMode) be-wirkt, dass die dort definierte hellere Schriftfarbe nicht generell angewendetwird,wenn vom Be-nutzer eine Dark-Mode-Präferenz vorliegt, sondern nur dann, wenn der Benutzernicht die»Dunkelmodusunterdrücken«-CheckboxamSeitenfußmarkierthat.
Bilder
BilderohneTransparenz(wieinsb.JPEG-Bilder)werdenimDarkModeundimLightModeidentischdargestellt.
ProblemfällekönnendagegenBildersein,dieTransparenzaufweisen,durchdiealsoderSeitenhinter-grund (i.d.R.weiß imLightModeundschwarz imDarkMode)durchscheintundvondemsichderBildvordergrundjeweilsabhebenmuss.
SolcheBilderkönntenfürschwarzenHintergrund inkompatibelsein.EintypischesBeispielwäreeinDiagramm, indemschwarzePfeileundFormenauf transparentenHintergrundgezeichnetwurden.Im Light-Mode bei weißem Seitenhintergrund ist das gut lesbar, aberwäre dieser Hintergrund imDarkMode nun ebenfalls schwarz,wären diese Pfeile und Formen also schwarz auf schwarz undsomit effektiv unsichtbar! Um das zu vermeiden, hinterlegt das Online-Übungssystem im Regelfall(sieheStandardmodusfürAufgaben)BilderinAufgabenressourcenautomatischmithellgrauemHin-tergrund(analogzurobenbeschriebenenHinterlegungvonTextmitfestgelegterVordergrundfarbe).
EsgibtjedochauchBildermitTransparenz,diekeinProblemmitdemDarkModehaben,beideneneine graue Hinterlegung vielleicht sogar unschön aussieht. So sind Bilder insbesondere immerrechteckig, scheinbar andersförmige (z.B. runde) Abbildungen sind aber dadurch erzielbar, dassgenau die Teile des rechteckigen Bereichs, die nicht zur Abbildung gehören sollen (außerhalb dergewünschtenForm)transparentgelassenwerden.InsolchenFällensiehtdiehellgraueHinterlegungnichtschönaus–auchwennsieunschädlichist.
Beispiel:Die folgenden vier Beispielabbildungen zeigen jeweils denselben Seitenausschnittmit zwei Bildern,die jeweils einen transparenten Hintergrund haben: Das erste ist ein kleines Diagramm mitschwarzemPfeilauftransparentemHintergrund,daszweiteeineDeutschland-Form.
ImLightModesiehtdaswiefolgtaus:
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite13/21
ImDarkModewerdendieBilder(inAufgabenseiten)imStandardmodusgrauhinterlegt:
Beispiel-BilderimLightMode:OK
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite14/21
Man sieht, dass das Diagramm durch die graue Hinterlegung noch gut erkennbar ist. Bei derDeutschland-FormhingegenistdiegraueHinterlegungzwarnichtschädlich,aberauchnichtbeson-dersschön.
EineEinbindungohnediegraueHinterlegungsähedagegenwiefolgtaus:
Beispiel-BilderimDarkMode,StandardmodusfürAufgabenseiten
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite15/21
DieDeutschland-FormsiehtohneHinterlegungbesseraus.DasDiagrammhingegenwäreohnedieHinterlegungnichtmehrvollständiglesbar.
Daher ist die graue Hinterlegung der Standardfall für alle Aufgabenressourcen: Die Wahrschein-lichkeit,dass Inhalteunleserlichwerden,wird sominimiert (wennauchnichtgleichNull),undeinesuboptimale Darstellung von tatsächlich Dark-Mode-kompatiblen Grafiken (wie die Deutschland-Form)wird inKaufgenommen.FürAufgaben,dieschonvorderEinführungdesDunkelmodusbe-standenoderallgemeinsolche,derenAutorensichnichtmitdemDarkModebeschäftigen,sonderndieAufgaben einfach im hellenModus erstellen und die dunkleAnsicht nie testen, sollte das derbesteKompromisssein.
Sieals LeserdieserAnleitung jedochkönnen IhreAufgabengezielt fürdenDarkModeoptimierenunddannauchdiegraueHinterlegungabschalten. EinOptimierenbesteht imWesentlichendarin,sichumdieGrafikenzukümmern,dieohneEingriffeaufschwarzemGrundunleserlichwürden–wiedas Diagramm in obigem Beispiel. Einemögliche Lösung für eine Darstellung ohne graue Hinter-legungwäre hier die Konfiguration, dass das Diagramm im DarkMode invertiert werden soll. ImhellenModusbliebeesunverändert,imDunkelmodussäheesdagegenwiefolgtaus:
Beispiel-BilderimDarkModeohneHinterlegung
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite16/21
Diese Invertierung ist (einzeln für betroffene Bilder) über einen vordefinierten Bildfilter aktivierbar.Nachdem für jedesbetroffeneBild eineOptimierung erfolgt ist, deklarieren Sie IhreAufgabenseiteabschließendals»vollständigDunkelmodus-kompatibel«,umdiegraueHinterlegungauszuschalten.
EheralsNotlösungfürFälle,indeneneineOptimierungzuvielArbeitmachenwürdeundderStan-dardmodus auch nicht optimal ist, gibt es als dritte Alternative noch die Möglichkeit, denDunkelmodusfüreineAufgabekomplettzudeaktivieren.
AufalledieseMöglichkeitengehtderfolgendeAbschnittnäherein.
KompatibilitätsmodifürAufgaben
Für selbst erstellte Aufgabenressourcen (Aufgabenseite selbst, Quittungs- und Korrekturvorlagen,ggf.KorrekturhinweiseundMusterlösung)bietetdasOnline-ÜbungssystemdreiDarstellungsmodian.PerDefault istder im letztenAbschnittbereitsmehrfacherwähnteStandardmodus aktiv.Alternativkönnen Sie explizit deklarieren, dass Ihre Seiten Dark-Mode-kompatibel sind (dann sollten Sie dasnatürlichauchgetestethaben),oderSiekönnendenDarkModekomplettunterdrücken.
Hinweis: Diese Modusauswahl steht nur in der Aufgabenerstellung zur Verfügung,nicht jedoch,wennSiedieFunktionnutzen,eineneigenenTextfürdieKursstartseiteodereineMessageoftheDayzu definieren. Falls SiedortGrafiken verwenden,werdendiese – anders als inAufgaben – immerohneHinterlegungangezeigt!
Beispiel-BilderimDarkModeohneHinterlegung,Diagramminvertiert
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite17/21
Standardmodus
DerStandardmodusistimmeraktiv,solangederAufgabenautornichtexpliziteinenanderenModuswählt.
Derzeit(Oktober2019)bewirktderStandardmoduslediglich,dassalleeingebundenenBilderimDarkModehellgrauhinterlegtwerden .FürBilderohneTransparenzfälltdasnichtauf,dasiedieHinter-grundfarbe komplett überdecken. Für Bildermit Transparenz hat das die oben im AbschnittBilderbeschriebenenundillustriertenAuswirkungen.
DeklarierteDunkelmodus-Kompatibilität
Wenn Sie sichergestellt haben, dass alle Ihre Bilder auch ohne graue Hinterlegung imDarkModedarstellbarsind,könnenSiedieDunkelmodus-KompatibilitätIhrerAufgabe„erklären“.
Esistallgemeinsinnvoll,diesenModusanzustreben,erfordertaberggf.AnpassungsmaßnahmenderBildermit transparentemHintergrund. In obigenBeispielen ausAbschnittBilder ist es zumBeispielvorher nötig, eineMaßnahme zu treffen, durch die die Diagrammgrafik auch ohne graue Hinter-legunglesbarist.Dazukönntemanz.B.dieBilddateiselbstbearbeitenunddentransparentenHinter-grunddurcheinenfestenHintergrund (z.B.weiß)austauschen.Sinnvoller fürdenDarkModewäreaberindiesemkonkretenFalldieInvertierung,wiesieobenebenfallsbereitsdemonstriertwurde.FürletzterenZweckstehteinvordefinierterBildfilterbereit,denSiederGrafiknurzuordnenmüssen,wieimFolgendenbeschrieben.
VordefinierteBildfilterfürdenDarkMode
IndenWYSIWYG-Editoren,wie sie insb. inderassistentengestütztenAufgabenerstellung oderbeimBearbeitendesKursstartseite-InhaltszumEinsatzkommen,könnenSiezueingefügtenBildernauseinerListevordefinierter„Klassen“wählenunddamit (nebenautomatischerGrößenanpassungderGrafik)derzeitoptionaleinenderfolgendenbeidenDark-Mode-Filteraktivieren:
2
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite18/21
DerFilter»ImDunkelmodusinvertieren«wurdebereitsimletztenBeispielbildimobigenAbschnittBilderdemonstriert:EreignetsichvornehmlichfürSchwarz-Weiß-BildermitschwarzenInhaltenauftransparentemGrund.Strenggenommeninvertierternichtzu100%,sondernnur„anteilig“:Sowird–inderBeispielabbildungguterkennbar–einimhellenModuskomplettschwarzerVordergrundnichtzu100%weiß,sondern„nur“hellgrau,währendeinimOriginal(hellerModus)weißerHintergrundnichtkomplettschwarzwird,sondern„nur“dunkelgrau.
DerFilter»ImDunkelmodusaufhellen«istvorgesehenfürBilder,diekeineschwarzen,aberrelativdunkleInhalte(z.B.dunkelblau)aufschwarzemGrundenthalten.Diesewerdeneinwenigaufgehellt(z.B.zuhelleremBlau),umsichvomschwarzenUntergrundbesserabzuheben.DieserFilterwirdinternz.B.fürsFernUni-LogoundOnline-Übungssystem-LogoimSeitenkopfverwendet(vgl.AbbildungzuBeginndesAbschnittsDarkModeimOnline-Übungssystem),dürfteaberimAufgabenkontextnureherseltensinnvollanwendbarsein.
(DieseDunkelmodus-Filter sind jeweilsmiteinerBildgrößen-Optionkombinierbar:»MaximalSeiten-breite«bedeutet,dassdieGrafikverkleinertwerdensoll,fallsessiesonstzubreitfürdasSeitenlay-out ist, insbesondere also in schmalen Fenstern oder auf Smartphones. »Feste Größe« deaktiviertdieseAutoverkleinerung,übergroßeBildermüssendannggf.horizontalgescrolltwerden.)
WennSieeigenenHTML-Quellcodeschreiben,z.B.inderfortgeschrittenenAufgabenerstellung,könnenSiediesebeidenFilterebenfallsverwenden,indemSiedem img -Tag jeweils imclass -At-tribut die Klasse darkModeInvert bzw. darkModeLighten zuordnen. (Für die automatische
Dark-Mode-Bildfilter-AuswahlimWYSIWYG-Editor
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite19/21
Verkleinerungfür sonstzubreiteBilder fügenSienochdieKlassefit hinzu.)DanebenhabenSiealsHTML-AutornatürlichauchdieFreiheit,eigeneCSS-Stilezudefinieren.
Dunkelmodus-Unterdrückung
FürAufgabenseiten,dieimDarkModenichtsinnvollverwendbarsindunddieSienichtmitvertret-barem Aufwand anpassen können oder wollen, können Sie den Dunkelmodus komplett un-terdrücken.DasOnline-ÜbungssystemwirdsiedanntrotzderallgemeinenDark-Mode-PräferenzdesNutzers immer in der hellen Darstellung laden – genau so, als habe der Nutzer selbst die»Dunkelmodusunterdrücken«-CheckboxuntenamSeitenfußaktiviert.
ModusauswahlinAufgabenerstellungsassistenten
IndenAufgabenerstellungsassistentenfindenSiejeweilsuntenunterRubrik»Webdesign«amSeite-nendeeineModusauswahl(soferndieEinbettunginsaktuelle2018erWebdesigneingeschaltetist):
ModusauswahlinfortgeschrittenerAufgabenerstellung
WennSieIhreHTML-Dateienselbstbearbeiten,stattsievoneinemAufgabenerstellungs-Assistentengenerieren zu lassen, und Ihre Inhalte in ein Seitenlayout des Online-Übungssystems im aktuellenWebdesigneingebundenwerdensollen,sozeichnenSiejadeninsSeitenlayoutzuübernehmendenInhalt ihrer HTML-Datei durch Einfassungmit denMarken$EMBED - und $/EMBED aus. (Detailsdazu imWebdesign-Handbuch <https://online-uebungssystem.fernuni-
hagen.de/download/Designvorlagen2018/Designvorlagen2018OnlineUebungssystem.html#k3>.)
Wenn Ihre öffnendeMarke nur $EMBED lautet,wird automatischder Standardmodus verwendet.DiebeidenanderenModikönnenSiedurchErgänzungdieserMarkeaktivieren:
$EMBEDSupportsDarkMode markiertdenBeginndeseinzubettendenInhaltsunddeklariertgleichzeitig,dassdieserInhaltDark-Mode-Kompatibelist,alsoinsb.Grafikennichtgrauhinterlegtwerdensollen.
$EMBEDDisableDarkMode markiertdenBeginndeseinzubettendenInhaltsundlegtfest,dassdasErgebnisimmerimLightModeangezeigtwerdensoll.
DieEndmarkierunglautetinjedemFallnur $/EMBED ohneweiteresSuffix.
ModusauswahlinAufgabenerstellungsassistenten
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite20/21
Fußnoten1. Aus technischen Gründen (diese Anpassung erfolgt allein durch eine CSS-Regel) beschränkt
sich das auf so genannte Inline-Styles, also direkt im HTML-Code über ein style -Attributfestgelegte Textfarben. Sollten Seiten eigene „Formatvorlagen“ in Form vonCSS-Stylesheetsfestlegen (nur in der fortgeschrittenenAufgabenerstellungmöglich),wird das nicht automa-tischerkannt.
2. SolltensichimpraktischenEinsatznochweitereProblembereichebeiderAnwendungdesDarkMode auf bestehende Aufgaben ergeben, behaltenwir uns vor, im StandardmodusweitereMaßnahmenzuergreifen.
DieDunkleSeite HinweisefürKursbetreuerundAufgabenautoren
19.11.19 Seite21/21