Die Dunkle Seiteonline-uebungssystem.fernuni-hagen.de/download/DarkMode/DarkM… · keinen...

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

https://www.blickcheck.de/auge/augenpflege-und-training/augentraining/blaues-licht-vor-und-nachteile/

https://blog.weekdone.com/why-you-should-switch-on-dark-mode/

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


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


19.11.19 Seite5/21

AnpassungandieBetriebssystem-Einstellung.WelchederOptionennachInstallationvoreingestelltseinwird,stehtnochnichtfest:InderBetawaruntermacOSdieBetriebssystem-Angleichungvoreingestellt,unterWindowsjedochderdauerhafthelleModus.

DarkMode-AuswahlinOpera63


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


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


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

https://online-uebungssystem-q.fernuni-hagen.de/hilfe/datenschutz.html

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


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


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:


19.11.19 Seite13/21

ImDarkModewerdendieBilder(inAufgabenseiten)imStandardmodusgrauhinterlegt:

Beispiel-BilderimLightMode:OK


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


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


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


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


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


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.


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.



19.11.19 Seite20/21

https://online-uebungssystem.fernuni-hagen.de/download/Designvorlagen2018/Designvorlagen2018OnlineUebungssystem.html#k3

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.


19.11.19 Seite21/21

Die Dunkle Seiteonline-uebungssystem.fernuni-hagen.de/download/DarkMode/DarkM… · keinen...

Documents

Transcript of Die Dunkle Seiteonline-uebungssystem.fernuni-hagen.de/download/DarkMode/DarkM… · keinen...