nicht angemeldet
Rolf B
Rolf B
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Rolf B
Matthias Apsel
Tabellenkalk
Gunnar Bittersmann
Rolf B
Hallo,
wenn ich ein Image aus einer Gallery in maximaler Größe (aber nicht mehr als 100% des Originals) bei Beibehaltung des Ratio Aspects als Layer über die Gallery legen möchte, wie gehe ich das am besten an?
Nur über css? (Später möchte ich dann noch Karusellfunktionen hinzufügen)
Wichtig: Ich möchte ohne Jquery (nicht ohne JS) auskommen. Und ich möchte kein reines CSS-Karusell (davon findet man 100e im Netz), da es in diesem Übungs-Projekt auch um das Erlernen von Jacascript geht.
Pit
Hallo Pit,
ich bin da nicht SO das Genie, aber ich würde
Ich habe an deinem Fiddle mal was rumgespielt... https://jsfiddle.net/wz7otxba/2/
Rolf
Hallo Rolf,
erstmal vielen Dank für Deine Hilfe und die Arbeit, die Du reingesteckt hast.
- die Klasse flexbox in gallery umbenennen (Klassen sagen, was das ist, nicht wie es aussehen soll)
Ok. Hatte mir McMurphy auch schonmal vor 2-3 Wochen so gesagt. Jetzt hab ichs umbenannt ;)
- die img korrekt attributieren (alt) - aber das hast Du bestimmt nur für den schnellen Test weggelassen
Stimmt.
- Einen Klick-Handler auf .gallery legen, der Klicks auf Figures und deren Inhalte behandelt. - Bei Klick ein Backdrop-DIV mit position:fixed;width:100vw height:100vh über die Galerie legen und das img mit max-width:100% dort hinein. Das img kann mit üblichen Techniken zentriert werden (z.B. flexbox), und du kannst den Backdrop später durch Controls für Links-/Rechts oder durch Timer-Funktionen ergänzen, die das Karussell erzeugen.
Ich habe an deinem Fiddle mal was rumgespielt... https://jsfiddle.net/wz7otxba/2/
Läuft schon recht gut und tatsächlich so, wie gewünscht. Klasse. Mir scheint, das "figcaption" wird im viewer-Fall nicht an das Image angepasst. Was mir auch aufgefallen ist: Wenn ich das JS in den head-Teil der Seite einpflegen möchte, läufts nicht. Dann bleibt die gallery-Variable "null". Ein Einfügen am Ende der seite schafft Abhilfe.
Ist es eigentlich möglich, das ganze über script type="module" in die HTML-Daei einzubinden? Damit kenne ich mich nämlich mal so ganz und gar nicht aus...
Pit
Hallo Pit,
Wenn ich das JS in den head-Teil der Seite einpflegen möchte, läufts nicht.
Kann ja auch nicht. Du musst das Ganze dann in einen load- oder DOMContentLoaded-Handler einbetten, sonst existieren die DOM Elemente noch nicht mit denen da gearbeitet werden soll. Oder Du hängst das Script ans Ende des Body (direkt oder per <script src="...">).
Guck mal im JSFiddle bei den JavaScript Optionen, da steht bei LOAD TYPE "On Load". Deswegen funktioniert das Fiddle.
Code, der erst bei vollständigem Aufbau des DOM ausgeführt werden soll, ist ein Standard-Pattern, das hast Du bestimmt schon mal gesehen.
JürgenB
Orlokdocument.addEventHandler("DOMContentLoaded", function() {
// put your DOM-dependant code here
});
Statt "DOMContentLoaded" kann man auch "load" verwenden. Im Self-Wiki steht was über die Unterschiede.
Rolf
Hallo Rolf,
Kann ja auch nicht. Du musst das Ganze dann in einen load- oder DOMContentLoaded-Handler einbetten, sonst existieren die DOM Elemente noch nicht mit denen da gearbeitet werden soll. Oder Du hängst das Script ans Ende des Body (direkt oder per <script src="...">).
Genau so hab ichs mir gedacht.
Guck mal im JSFiddle bei den JavaScript Optionen, da steht bei LOAD TYPE "On Load". Deswegen funktioniert das Fiddle.
Da funktionieren alle optionen bis auf die head-Einbindung.
Code, der erst bei vollständigem Aufbau des DOM ausgeführt werden soll, ist ein Standard-Pattern, das hast Du bestimmt schon mal gesehen.
document.addEventHandler("DOMContentLoaded", function() { // put your DOM-dependant code here });
Auch noch nicht gesehen... ich arbeite normalerweise ausschließlich mit JQuery, daher fällt mir das jetzt recht schwer.
Statt "DOMContentLoaded" kann man auch "load" verwenden. Im Self-Wiki steht was über die Unterschiede.
Gelesen. Und bedankt.
Pit
Hallo Pit,
Auch noch nicht gesehen...
Jaaaa, okaaaay, für jQueryianer sieht es so aus, es tut aber das gleiche:
$(function() {
// put your DOM-dependant code here
});
und zwar ab jQuery 3 NUR so, es gibt eine Handvoll älterer Alternativen aber die sind ab 3.0 missbilligt.
Rolf
@@Pit
Ich habe an deinem Fiddle mal was rumgespielt... https://jsfiddle.net/wz7otxba/2/
Läuft schon recht gut und tatsächlich so, wie gewünscht. Klasse.
Was läuft? Gar nichts. Mit Tastatur geht nichts, weil du keine interaktiven Elemente (a, button) verwendet hast. Nicht „Klasse“, sondern ein anderes Wort, das bei den Schweizern auch auf „…sse“ endet. Ich würde es aber mit ß schreiben.
LLAP 🖖
Hi Gunnar,
Was läuft? Gar nichts. Mit Tastatur geht nichts, weil du keine interaktiven Elemente (
a,button) verwendet hast. Nicht „Klasse“, sondern ein anderes Wort, das bei den Schweizern auch auf „…sse“ endet. Ich würde es aber mit ß schreiben.
Ganz ehrlich, man muß ihn einfach mögen, den Gunnar 😀 Ist ernst gemeint, ich finde Deine Postings, die ein wenig "dahergerotzt" von der Seite kommen, immer wieder lustig und schlicht "gunnarlike". Hier mußte ich jedenfalls wirklich mal wieder herzlichst lachen, und das ganz und gar nicht gegen Dich gerichtet. Bewahr Dir diese etwas rotzlöfflige" Art ruhig, ich finde, die hat einen gewissen Charme :-) Außerdem bist Du ja zu > 90% sehr nett und zuvorkommend und außerdem ausgesprochen hilfsbereit!
Zum Thema, Du hast Recht, wir hatten in der Vergangenheit (ich glaube, sogar bereits 2 mal) das Thema durch, keinen nicht klickbaren Elementen (keine) click-events anzuhängen.
Da ich aber mit nativem JS so ein bischen auf Kriegsfuss stehe, fällts mir durchaus nicht leicht, den fiddle diesbzgl. umzubauen.
Zudem bleibt eine Frage von mir bisher komplett unbeantwortet:
Ist es eigentlich möglich, das ganze über script type="module" in die HTML-Daei einzubinden?
Pit
@@Pit
Ganz ehrlich, man muß ihn einfach mögen, den Gunnar 😀 Ist ernst gemeint, ich finde Deine Postings, die ein wenig "dahergerotzt" von der Seite kommen, immer wieder lustig und schlicht "gunnarlike". Hier mußte ich jedenfalls wirklich mal wieder herzlichst lachen, und das ganz und gar nicht gegen Dich gerichtet. Bewahr Dir diese etwas rotzlöfflige" Art ruhig, ich finde, die hat einen gewissen Charme :-) Außerdem bist Du ja zu > 90% sehr nett und zuvorkommend und außerdem ausgesprochen hilfsbereit!
Als ich hier angefangen habe, war es vor allem Cheatah, der hier einen gewissen Charme versprüht hat. Ich hab viel von ihm gelernt. Ähm, auch fachlich. 😆 Schade, dass er weg ist; ich vermisse ihn.
Zum Thema, Du hast Recht, wir hatten in der Vergangenheit (ich glaube, sogar bereits 2 mal) das Thema durch, keinen nicht klickbaren Elementen (keine) click-events anzuhängen.
Da ich aber mit nativem JS so ein bischen auf Kriegsfuss stehe
Das hat ziemlich wenig mit JavaScript zu tun, sondern in erster Linie mit HTML. Du brauchst ein interaktives Element zum Draufclicken? Wie gesagt: button (für Aktionen auf einer Seite) bzw. a (für Verlinkungen zu anderen Ressourcen).
Da das große Bild eine andere Ressource ist, hier also a (wie Rolf schon sagte). Es sollte genügen, jeweils ein a-Element um deine figure-Elemente zu legen (mit dem jeweiligen Bild im href-Attribut):
<a href="…">
<figure>
⋮
</figure>
</a>
LLAP 🖖
Hi Gunnar,
Als ich hier angefangen habe, war es vor allem Cheatah, der hier einen gewissen Charme versprüht hat. Ich hab viel von ihm gelernt. Ähm, auch fachlich. 😆 Schade, dass er weg ist; ich vermisse ihn.
Ja, den kenne ich auch noch. Gibts eigentlich einen grund dafür, dass er (oder auch andere User, die sehr aktiv waren), plötzlich ganz und gar verschwinden? (Mir sind da auch einige andere User diesbzgl. in Erinnerung)
Wie gesagt:
button(für Aktionen auf einer Seite) bzw.a(für Verlinkungen zu anderen Ressourcen).
In diesem Fiddle sinds externe Ressourchen, "in Echt" sinds aber Bilder auf demselben Server. Heißt das, ich sollte buttons nehmen?
Da das große Bild eine andere Ressource ist, hier also
a(wie Rolf schon sagte). Es sollte genügen, jeweils eina-Element um deinefigure-Elemente zu legen (mit dem jeweiligen Bild imhref-Attribut):
Dann funktioniert das Script aber nur per Klick auf das figcapture.
Pit
Hallo Pit,
a ist schon richtig. Für den Fall, dass kein JavaScript läuft, willst Du auf eine andere Ressource wechseln. MIT JavaScript änderst Du den Wechsel in ein Overlay.
Wenn Du die HTML Struktur änderst, musst Du CSS und Script mit ändern. Das verlinkte Fiddle hat a in figure, das meinte Gunnar aber nicht, er schlug vor, das a nach außen zu legen. Das hat den Vorteil, dass das :focus Outline des Browsers besser sichtbar ist; und damit die Flexbox sauber funktioniert, muss die flex-Eigenschaft von figure auf .gallery > a gelegt werden. Ein paar andere Tweaks mögen auch noch nötig sein, damit es am Ende gut aussieht und das Verhalten so ist wie gewünscht.
Rolf
Hi Rolf,
a ist schon richtig. Für den Fall, dass kein JavaScript läuft, willst Du auf eine andere Ressource wechseln. MIT JavaScript änderst Du den Wechsel in ein Overlay.
Ich bekomm dem a-tag sein Verhalten nicht ausgetrieben... schaust du da mal drüber?
Das hat den Vorteil, dass das :focus Outline des Browsers besser sichtbar ist;
Was meinst Du damit?
und damit die Flexbox sauber funktioniert, muss die flex-Eigenschaft von figure auf .gallery > a gelegt werden.
Ah, ok, ich habs jetzt auf .gallery a gelegt, dürfte aber unterm Strich dasselbe sein.
Pit
Hallo Pit,
zwei Dinge:
let gallery = document.querySelector(".gallery");
Da hattest Du ".gallery a" als Selektor stehen und damit nur den ersten Link als Galerie.
Und wenn man das Default-Verhalten eines Elements unterbinden will, muss man ihm das sagen. Auf gut englisch: Prevent Default. Das machst Du am Ende des Click-Handlers:
gallery.addEventListener("click", function(event) {
...
event.preventDefault();
});
Rolf
Hi Rolf,
Da hattest Du
".gallery a"als Selektor stehen und damit nur den ersten Link als Galerie.
Und wenn man das Default-Verhalten eines Elements unterbinden will, muss man ihm das sagen. Auf gut englisch: Prevent Default. Das machst Du am Ende des Click-Handlers:
Prima, jetzt gehts! 😀
Wenn ich jetzt das Karusell implementieren will, wie gehe ich dann weiter vor?
Ich möchte bei mouseover im rechten Drittel des Images im pictureView einen Pfeil einblenden, der klickbar das nächste Image einblendet und das quasi in Endlosschleife. Später möchte ich auch noch einen Automatikdurchlauf implementieren. Das closeViewer(); in Bildmitte soll bleiben.
Wie erkenne ich denn, ob ich im rechten (oder linken) Drittel des Bildes bin? Per JS kann ichs mir sogar noch vorstellen, aber gibts da z.b. auch eine CSS-Lösung für?
Pit
Hallo Pit,
Wie erkenne ich denn, ob ich im rechten (oder linken) Drittel des Bildes bin? Per JS kann ichs mir sogar noch vorstellen, aber gibts da z.b. auch eine CSS-Lösung für?
leg doch einfach einen entsprechend formatierten Button über das rechte oder linke Drittel des Bildes.
Gruß
Jürgen
Hallo Pit,
das geht völlig problemlos mit Overlay-Elementen (also mit position:absolute aus dem normalen Flow genommen). Button oder a, je nach dem...
Ich habe das Fiddle mal in Version 31 etwas erweitert.
Beachte bitte, dass das nur die halbe Miete ist, du solltest auch noch Pfeiltasten unterstützen.
Rolf
Hallo Rolf,
das geht völlig problemlos mit Overlay-Elementen (also mit position:absolute aus dem normalen Flow genommen). Button oder a, je nach dem...
Ich habe das Fiddle mal in Version 31 etwas erweitert.
Sieht gut aus. Muß ich mir später mal genauer ansehen, habe ich sicher Fragen zu. Ich bin nur "grade auf dem Sprung..." und zum Verstehen/Nichtverstehen brauch ich länger.
Beachte bitte, dass das nur die halbe Miete ist, du solltest auch noch Pfeiltasten unterstützen.
Ich weiß nicht... ich glaube, das muß nicht.
Pit
Hallo Pit,
lass das nicht den Gunnar hören. Zum einen ist das nicht sonderlich kompliziert, auf Pfeil links/rechts zu reagieren, der Tastatur-Handler ist ja schon da. Musst Du nur passend erweitern.
Irgendeine Form von Tastaturbedienbarkeit muss. Und die eigentliche Funktionalität - also lade voriges/nächstes Bild - die brauchst Du sowieso im Click-Handler. Das ist also nicht viel Aufwand.
Das, was ich im Fiddle eingebaut habe, ist im Moment nicht so recht bedienbar. Zumindest habe ich es nicht geschafft, den :focus outline auf den Navigationspfeilen deutlich zu machen. Da hast Du noch ein Todo, glaube ich.
Rolf
Hallo Rolf,
lass das nicht den Gunnar hören.
😀... der war gut.
Zum einen ist das nicht sonderlich kompliziert, auf Pfeil links/rechts zu reagieren, der Tastatur-Handler ist ja schon da. Musst Du nur passend erweitern.
Ist aber ein Luxusproblem, solange ichs nicht zum karusellieren bringe 😟
Das, was ich im Fiddle eingebaut habe, ist im Moment nicht so recht bedienbar. Zumindest habe ich es nicht geschafft, den :focus outline auf den Navigationspfeilen deutlich zu machen. Da hast Du noch ein Todo, glaube ich.
:focus outline? Habe ich nach gesucht und das, was ich gefunden habe, wäre verzichtbar. Oder hat das etwas mit der Funktionalität zu tun?
Pit
Hallo Pit,
Oder hat das etwas mit der Funktionalität zu tun?
Wenn Du Tastaturbedienbarkeit und Screenreader-Fähigkeit als Teil der Funktionalität definierst, dann ja 😀
Eine Bedienung mit "Tab Tab Tab ENTER" etc setzt ein Focus-Outline voraus. Wenn es akzeptabel ist, die Galerie mit Pfeil links, Pfeil rechts und Escape zu steuern, dann ist das Outline wohl verzichtbar.
Ob eine Screenreader-fähige Bedienung in einer Bildergalerie erforderlich ist, weiß ich nicht. Ein blinder Nutzer könnte die Bilder sowieso nicht sehen, sich nur die alt-Texte anhören. Keine Ahnung, ob es Blinde gibt, die sich das antun. Wie es sich bei sehgeschwächten Menschen verhält, die irgendwo bei 10% Sehleistung sind, kann nicht sagen. Möglicherweise nutzen die fallweise einen Screenreader, wenn die Webseite sich weigert ihren Text zu zoomen.
Rolf
Hallo Rolf
Ob eine Screenreader-fähige Bedienung in einer Bildergalerie erforderlich ist, weiß ich nicht.
Eine Bildergalerie sollte auf jeden Fall Tastaturbedienbar sein, wozu unter anderem auch eine visuelle Kennzeichnung der jeweils fokussierten Bedienelemente gehört.
Bedenke, dass Tastaturbedienbarkeit nicht nur für Nutzer von Screenreadern relevant ist, sondern auch für Menschen mit motorischen Beeinträchtigungen, die zwar sehen, aber keine Maus bedienen können. Das könnte zum Beispiel bei einem Tremor der Fall sein, wie er bei Parkinson auftritt.
Viele Grüße,
Orlok
@@Rolf B
Wenn Du Tastaturbedienbarkeit und Screenreader-Fähigkeit als Teil der Funktionalität definierst, dann ja 😀
Und wenn du das nicht tust, ist die Definition falsch.
Ob eine Screenreader-fähige Bedienung in einer Bildergalerie erforderlich ist, weiß ich nicht. Ein blinder Nutzer könnte die Bilder sowieso nicht sehen, sich nur die alt-Texte anhören. Keine Ahnung, ob es Blinde gibt, die sich das antun.
Ich habe schon öfter Links zu Bildern Videos von Marco Zehe erhalten.
Man sollte keine wilden Spekulationen anstellen, was Menschen so alles nicht können, sondern die Sachen so bauen, dass sie möglichst von allen genutzt werden können.
Siehe auch Mandy Harvey.
Wie es sich bei sehgeschwächten Menschen verhält, die irgendwo bei 10% Sehleistung sind, kann nicht sagen. Möglicherweise nutzen die fallweise einen Screenreader, wenn die Webseite sich weigert ihren Text zu zoomen.
Hast du auch bedacht, wie es sich bei Menschen verhält, die irgendwo bei 100% Sehleistung sind, aber nicht oder nur mit Mühe lesen können und deshalb auch Screenreader verwenden?
Und wie kommst du überhaupt von Tastaturbedienbarkeit zu Screenreadern? Es ist womöglich so, dass die meisten Screenreadern-Nutzer per Tastatur navigieren. Aber nur ein Teil deren, die per Tastatur navigieren, nutzen auch einen Screenreader.
LLAP 🖖
Das, was ich im Fiddle eingebaut habe, ist im Moment nicht so recht bedienbar. Zumindest habe ich es nicht geschafft, den :focus outline auf den Navigationspfeilen deutlich zu machen. Da hast Du noch ein Todo, glaube ich.
Hi Rolf (und andere),
ich habe jetzt das karusell fertig. Um aber bei Klick auf den Pfeil aufs nächste Bild zu kommen, mußzte ich den Code:
viewer.addEventListener("click", function(event) {
if (event.target.closest("figure") === viewer)
closeViewer();
});
auskommentieren.
Wie erreiche ich, dass der Viewer bei Klick in Bildmitte oder auch bei Klick außerhalb des Bildes geschlossen wird, ohne auch bei Klick auf eines der beiden Pfeilsymbole geschlossen wird?
Und:
Wie spreche ich die Pfeiltasten der Tastatur an?
Pit
@@Pit
Wie spreche ich die Pfeiltasten der Tastatur an?
☞ KeyboardEvent.key (Das ist ein kaum erkennbarer Link. Der Fehler im Forum-Stylesheet ist bekannt.)
switch (event.key)
{
case 'ArrowLeft':
console.log('left arrow key pressed'); break;
case 'ArrowRight':
console.log('right arrow key pressed'); break;
case 'ArrowUp':
console.log('up arrow key pressed'); break;
case 'ArrowDown':
console.log('down arrow key pressed'); break;
}
LLAP 🖖
@@Pit
Wie spreche ich die Pfeiltasten der Tastatur an?
☞
KeyboardEvent.key(Das ist ein kaum erkennbarer Link. Der Fehler im Forum-Stylesheet ist bekannt.)switch (event.key) { case 'ArrowLeft': console.log('left arrow key pressed'); break; case 'ArrowRight': console.log('right arrow key pressed'); break; case 'ArrowUp': console.log('up arrow key pressed'); break; case 'ArrowDown': console.log('down arrow key pressed'); break; }
Hallo Gunnar,
voilla, so gehts, heel bedankt.. Tastaturhandler war ja schon da, wie Rolf auch erwähnte.
Fehlt mir nur noch der 2. Teil meiner Frage...
Pit
Hallo Pit,
beachte übrigens, dass die Microsoft-Browser (IE und Edge) nicht ArrowLeft etc liefert, sondern Left, Right, Up und Down.
Bei IE könnte ich es ja noch kopfschüttelnd hinnehmen. Bei Edge kann ich den Kopf nur noch gegen die Tischkante rammen.
Rolf
Hallo Pit,
Wie erreiche ich, dass der Viewer bei Klick in Bildmitte oder auch bei Klick außerhalb des Bildes geschlossen wird, ohne auch bei Klick auf eines der beiden Pfeilsymbole geschlossen wird?
Ich habe das Fiddle (Nr 35 war hoffentlich die letzte Instanz) mal etwas aufgeräumt und den entsprechenden Code eingebaut.
https://jsfiddle.net/o5sgte8v/
Du musst bei Klick im Viewer zuerst abfragen, ob in die Navigationsflächen geklickt wurde, und dann navigieren. Danach kannst Du andere Klicks behandeln.
Aufräumen heißt: Die Steuerung ist von der Durchführung der Aktionen getrennt. Du wirst den Code vermutlich erstmal nicht wiedererkennen. Es hat aber den Vorteil, dass Du die Durchführung von "Navigiere links", "Schließe Viewer" nur einmal programmierst, egal ob der Anstoß von Maus oder Tastatur kam.
Was ich nicht hinbekomme, ist eine ordentliche Fokussteuerung in der Galerie. Ich würde gerne erreichen, dass das im Viewer angezeigte Element nach Verlassen des Viewers den Fokus hat. Tut aber nicht, keine Ahnung bisher.
Rolf
Hallo Pit,
Ich bekomm dem a-tag sein Verhalten nicht ausgetrieben
Ein a-Tag hat kein Verhalten. Du meinst Element. http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Bis demnächst
Matthias
Hallo Matthias,
Ein a-Tag hat kein Verhalten. Du meinst Element. http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Ist das so? Eigentlich gehts doch darum, wie der Browser auf einen Tag reagiert. Und auf den a-Tag, so er denn ein href -Attribut mit sich führt, wird die Browserseite gewechselt. Das Element, jedenfalls Deines Links nach, ist hierbei doch relativ nebensächlich, oder?
Pit
Edit: Jetzt hab ich nochmal genauer nachgesehen. Das Element ist Taganfang + Elementinhalt + Tagende. Insofern gibt es gar keinen a-Tag, sondern nur ein a-Element.
Pit
Hallo,
Eigentlich gehts doch darum, wie der Browser auf einen Tag reagiert.
Du sprichst von der Tagesverfassung des Browsers? ;)
Und auf den a-Tag, so er denn ein href -Attribut mit sich führt, wird die Browserseite gewechselt.
Das a-tag ist erstmal nur ein String, eingefasst in spitze Klammern.
Das Element, jedenfalls Deines Links nach, ist hierbei doch relativ nebensächlich, oder?
Aus dem ganzen Element kann der Browser ein Objekt mit Eigenschaften erstellen, das übrrhaupt erst die Möglichkeit bereitstellt, Webseiten zu wechseln.
Gruß
Kalk
@@Rolf B
- Einen Klick-Handler auf .gallery legen, der Klicks auf Figures und deren Inhalte behandelt.
Nein. Es ist grundsätzlich falsch, auf Clicks reagieren zu wollen, die gar nicht kommen können. Du solltest das inzwischen wissen. Und Pit auch.
LLAP 🖖
Hallo Gunnar,
hmpf. Weiß ich eigentlich auch. Also, aus der Hüfte geschossen, ein a um die img herumlegen und unauffällig stylen. Wenn Javascript aus ist, kommt das Bild dann ohne Galerie bzw. man kann das href auf eine scriptfreie Implementierung schicken. Der click-handler muss preventDefault aufrufen. Der Rest müsste bleiben können, einen Escape-Handler hatte ich ja schon drin.
Rolf