Fußnoten-Demo

Quelle: Basic demo page for Easy Footnotes

Grundlegende Demo-Seite für Easy Footnotes

Dies ist eine Demo-Seite, die die Grundfunktionen des Einfache Fußnoten für Webseiten (barrierefrei) Systems zeigt.

Beachten Sie, dass es im CSS Media-Query-Bereiche für die Druckeinstellungen gibt. Sie können ausprobieren, die Seite sowohl im einfachen als auch im verschönerten Modus zu drucken.

(Aktualisiert am 31. März 2024)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper libero sapien, id facilisis turpis efficitur mattis. Etiam tempus sem elit, sed hendrerit diam eleifend in. Sed in lorem ut ex iaculis blandit. Nam condimentum vitae quam sed mattis. Pellentesque sodales dolor ut nisl elementum, nec convallis nibh fringilla. Nullam eu eros a velit cursus rhoncus. Praesent sit amet dapibus justo. Proin tincidunt tellus justo, vel commodo arcu tincidunt vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra elementum augue sit amet ullamcorper.

Suspendisse sollicitudin libero congue quam dignissim consequat. Vestibulum tempus non nisl ac venenatis. Praesent pellentesque blandit dui, nec vulputate nunc tempus non. So wie hier! Dies ist einfach eine lange Fußnote, die zeigt, wie das System funktioniert. Viele Fußnoten auf dieser Seite dienen nur zur Veranschaulichung. Integer ut justo ut mi mattis auctor. Vestibulum quis convallis elit, tincidunt ultricies massa. Proin placerat ornare urna mattis lacinia. Nullam sed metus molestie, sagittis felis vel, consequat mi.

Pellentesque mattis luctus turpis, eu rhoncus nibh rhoncus ac. Pellentesque ac sem sodales, elementum elit feugiat, vestibulum arcu. Donec blandit interdum magna, ut lacinia felis faucibus sit amet. Ut ac viverra magna. Donec vel ullamcorper ipsum. Etiam condimentum, elit pulvinar gravida pretium, ante nunc auctor justo, vel imperdiet augue libero porta sem. Donec et nibh felis. Maecenas varius nibh a massa rutrum, vitae venenatis est fermentum. Duis venenatis in quam eu finibus. Aliquam tristique scelerisque faucibus. Suspendisse diam turpis, porttitor eu diam ac, pharetra finibus libero. Donec orci felis, ornare efficitur fermentum dignissim, ornare vitae nisi. Diese Fußnote gehört zur ersten von zwei direkt aufeinanderfolgenden Fußnotenzahlen.  Diese Fußnote gehört zur zweiten von zwei direkt aufeinanderfolgenden Fußnotenzahlen.

Nam quis urna sit amet nulla aliquet gravida ac sed orci. Etiam sagittis vitae nisl ac lacinia. Sed non nunc elementum, dapibus leo id, luctus elit. Sed et maximus felis. Aenean ultricies orci laoreet, fermentum elit eu, mollis ipsum. Vestibulum id lectus eget dui rhoncus fermentum et bibendum lacus. Sed sollicitudin lectus eros, eu tincidunt elit ullamcorper ac. Integer pharetra euismod magna, eget tempus odio suscipit eu. Curabitur rutrum metus urna, nec fringilla eros posuere ut. Nulla lobortis eros euismod iaculis rutrum. Aliquam egestas tincidunt libero, nec efficitur metus consequat eu. Donec euismod vel eros a dictum. Aenean ultrices risus ac aliquet varius.

Nam nibh orci, auctor quis pharetra sed, accumsan eu augue. In dictum augue eget leo maximus porttitor. Praesent sit amet fermentum enim. Maecenas lacus ante, elementum in ex in, egestas volutpat nulla. In hac habitasse platea dictumst. Nulla vel placerat massa. Suspendisse pretium urna a nisi efficitur, sit amet aliquam ante egestas. Morbi libero ex, interdum et leo ut, ultricies rhoncus quam. Nullam neque ligula, ultricies blandit neque in, pulvinar scelerisque nulla. Donec consequat felis justo, eget volutpat dolor viverra non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin fringilla lorem sapien, eget gravida leo dapibus at. Pellentesque sit amet imperdiet nisl, sed ornare tellus. Proin a enim id purus rhoncus fringilla. Cras interdum a nisi sit amet condimentum.

Etiam porttitor pulvinar turpis nec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pulvinar laoreet dolor vitae lobortis. Als Einzelperson habe ich nicht die Ressourcen wie große Anbieter wie Wikipedia. Nulla est sapien, commodo at dictum in, pellentesque non neque. Mauris at lacinia est. Ut at massa a elit lacinia molestie sit amet quis nunc. Sed sollicitudin ipsum arcu, quis commodo nunc dignissim vitae. Aliquam auctor congue felis, a commodo ante iaculis ut. Sed mattis faucibus. Es wird nur einfaches JavaScript verwendet. Es ist keine zusätzliche Bibliothek nötig. Nullam pharetra sem tortor, ac volutpat leo vestibulum quis. Sed egestas molestie lacus, laoreet hendrerit dolor maximus sed. Curabitur elementum nibh a nulla venenatis tristique. Aliquam quis turpis tempor mi ultrices faucibus. Mauris id blandit libero. Vivamus nec lectus et leo faucibus condimentum nec convallis nibh. Die Fußnoten können mehr als nur Text enthalten, zum Beispiel auch Links wie z. B. meine Startseite. Nulla consectetur sapien id justo blandit vulputate. Vivamus ut elit at est venenatis pretium eget sit amet arcu. Nulla ut finibus dolor, sit amet porttitor diam. Vestibulum eu purus sed nisi rhoncus rutrum. Duis nec dictum nibh. Maecenas facilisis sem quis enim tincidunt dictum. Mauris cursus sapien sit amet bibendum dapibus. Sed cursus dui sit amet nunc sollicitudin consequat. Donec sapien velit, convallis ac dui at, vehicula aliquam arcu. Morbi rutrum interdum tempor. Nam eu pretium neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Hinweise

Dieses Fußnoten-System erlaubt mehrere Gruppen von Fußnoten für verschiedene Bereiche einer Webseite. Diese Seite ist in zwei Abschnitte unterteilt und nutzt zwei verschiedene Fußnoten-Gruppen. Die Fußnotenverweise und Fußnoten können für jede Gruppe unterschiedlich gestaltet werden, wie hier im Seitenkasten zu sehen ist.

Zusammenfassung der Vorteile des Easy Footnote Systems

1. Einfaches Einfügen, Verschieben oder Löschen von Fußnoten oder deren Verweisen.
2. Nur wenig JavaScript und CSS für die Grundfunktionen nötig.
3. Das Aussehen lässt sich mit CSS leicht anpassen.
4. Links können in Fußnoten eingefügt werden.
5. Auch Tooltips können in Fußnoten angezeigt werden.
6. Mehrere Fußnoten-Gruppen sind möglich. In dieser Version werden die Fußnoten fortlaufend nummeriert. Wenn jede Gruppe bei „1“ beginnen soll, kann der JavaScript-Code entsprechend angepasst werden. Ich denke aber, dass gleiche Zahlen in verschiedenen Gruppen verwirrend sein könnten.
7. Fußnoten und Verweise sind barrierefrei und geben Bildschirmlesern den richtigen Inhalt und die richtige Bedeutung.
8. Auch ohne JavaScript oder CSS bleibt der Inhalt der Fußnoten korrekt und verständlich erhalten.

Hier können Sie die Demodateien herunterladen:
Download auf jamesmeyer.com