Einen Graphic Novel online veröffentlichen?

Mein Arbeitgeber veranstaltet jedes Jahr einen Schreibwettbewerb. Jedes Jahr veröffentlichen wir die drei besten Ergebnisse in jeder Kategorie auf unserer Website. Keine große Sache. In diesem Jahr wurde eine Kategorie für einen Graphic Novel hinzugefügt.

Welche Standards und Best Practices gibt es, um dies auf unserer Website zu veröffentlichen? Ich gehe davon aus, dass ein PDF für die Barrierefreiheit schrecklich wäre. Mein Bauchgefühl ist es, es einfach zu scannen und JPGs zu erstellen. Wäre es am besten, den Text in Absätze zu transkribieren oder ihn einfach als Alternativtext zu belassen?

Jede Hilfe wäre dankbar.

UPDATE: Ich denke, meine endgültige Lösung wird Teile der folgenden Antworten enthalten.

• Optionen zum Anzeigen und Herunterladen
• Beim Herunterladen wird ein PDF für Personen gestartet, die nach Druckqualität suchen
• In der Ansicht wird ein neues Fenster / eine neue Registerkarte angezeigt, deren Kopfzeile nur auf das Unternehmensbranding reduziert ist.
• Die Ansicht enthält ein JPG für die gesamte Seite der aktuellen Seite und wechselt zwischen dem Navigieren hin und her.
• Die Ansicht enthält auch eine absatzbasierte Erläuterung der Szene (n) auf der Seite im Klartext. Dieser Text wird vor Browsern mit CSS ausgeblendet.
• Das Anzeigen von Bildern enthält Alternativtext, der nur definiert, was das Bild ist (IE-Titel und Seite).

Ich glaube, dass dies alle Grundlagen abdecken wird, während es immer noch relativ schmerzfrei ist, etwas zu posten.

Ich habe vor einiger Zeit einige wirklich verrückte Graphic Novel + canvasExperimente von Google gesehen. Der gesamte Text war einfacher Text (gute Zugänglichkeit), aber alle Bilder waren deutlich zu sehen. Ich kann es scheinbar nicht finden, aber 20 Dinge, die ich gelernt habe, zeigen, was ich meine.

Ich würde sagen, das ist übertrieben für das, was Sie tun möchten, also würde ich Folgendes tun:

<img src="page1.jpg" alt="Page 1" width="800" height="1000" />
<div class="hidden">
<h1>Panel 1</h1>
<p>Name1: Lorem ipsum....</p>
<p>Name2: Lorem ipsum....</p>
<strong>WOOSH</strong><!-- Sound Effect -->
<h1>Panel 2</h1>
<p>Name1: <em>Lorem ipsum....</em><!-- Emphasis on words -->
<!-- And so on -->
</div>

Und ich würde das Div als solches stylen:

.hidden { text-indent: -9999em; }

Auf diese Weise haben Sie das Bild gut sichtbar, damit Sie Personen sehen können, und den einfachen Text, den Bildschirmleser vorlesen können. Man könnte auch eine Transkription des Comics in das altTag einfügen, aber auf meine Weise können Sie der Transkription mehr semantische Bedeutung verleihen.

Sie können auch Javascript hinzufügen, um das Symbol umzuschalten text-indentund es sichtbar zu machen, wenn schwer sichtbare Personen es sehen möchten.

Sie sollten sich " Never Mind The Bullets " ansehen , das mit HTML5 und Canvas erstellt wurde. Ich bin mir nicht sicher, wie zugänglich es ist, aber Sie werden vielleicht feststellen, dass es Ihnen einige Ideen gibt. Beachten Sie jedoch, dass der HTML5-Ansatz IE8 und darunter ausschließt (IE9 ist in Ordnung). Abhängig von Ihrem Publikum könnte dies ein Nichtstarter sein.

HTML hat ein longdesc- Attribut, das auf die URL einer 'langen Beschreibung' verweist. Warum nicht das anstelle vieler Alt-Tags verwenden?

Oof, das ist eine schwierige Frage. Es ist wirklich schwer, so etwas wie einen Graphic Novel mit guter Zugänglichkeit zu präsentieren. Bilder sind viel besser als PDF, da haben Sie Recht. Außerdem würde ich nicht empfehlen, die gesamte Beschreibung jedes Bereichs als Alternativtext zu verwenden, geschweige denn die gesamte Seite. Ich denke, der beste Weg wäre, Absätze mit Transkripten hinzuzufügen und das Alt als Indikator für das Bild zu verwenden ( alt="graphic novel x, page y").

Vielleicht wäre es eine Idee, es vorlesen zu lassen und es auch als Audiodatei bereitzustellen?

Warum nicht neue HTML5-Elemente wählen?

In Bezug auf die Barrierefreiheit können Sie sich auf viele kleine Skripte (wie das von Remy Sharp, das unter http://whatwg.org im Abschnitt mit Beispielen verfügbar ist ) oder Bibliotheken ( modernizr ) verlassen.

Jetzt meine Lösung: Scannen Sie alles nach JPEG , fügen Sie mit figure element mit figcaption alle Bilder als img-Tags hinzu, um sie zugänglich zu halten, und verwenden Sie natürlich Alternativtext . Lesen Sie den HTML5-Abschnitt über die Verwendung des alt-Attributs . Es gibt einige schöne Beispiele dafür, wie dies für die Barrierefreiheit hilfreich sein kann.

BEARBEITEN

Für diejenigen, die nach einer wirklich sehr gut zugänglichen Ebene suchen, lassen Sie uns alle neuen Ressourcen fallen, auf die wir zählen können, wie HTML5-neue Elemente, CSS @ font-face, zurückblendender Text zum Ausblenden ... Kommen wir zu rohem POSH (Plain Old Semantic HTML). .

Ich würde mich für die folgende extreme Rohlösung entscheiden: Erstellen Sie JPEGs und verwenden Sie das alt-Attribut, um alles so gut zu beschreiben, wie es sein muss, genauso wie im HTML5-Handbuch, aber erweitert, dh sehr, sehr beschreibenden Texten (gibt es) keine Begrenzung der Alt-Attributgröße).

<img src='novel15/image24.jpg' alt='As Mr. Smith enters the room, he sees his brother with a knife stabbed in the chest and, in with a horror face scream out loud: "Nooooooooooooooo!"'>

Beachten Sie ein Detail: JPGs beim Rendern von Text können schrecklich sein. Sie müssen Ihre Grafiksoftware so einstellen, dass sie in sehr hoher Qualität exportiert . Wenn ja, ist eine gute Route. Das Laden von PDFs stürzt in vielen Browsern / Computern ab. Aber manchmal ist es die einzige Option, es hängt vom Inhalt, der Zielgruppe ab ... Das Problem, das ich mit HTML 5 sehe, scheint noch nicht vollständig gelöst zu sein ... Sie können sich auch für eine erweiterte Flash-Lösung entscheiden (ich habe gerade ein PDF beantwortet Flash Flipbook Frage hier)

Wenn Sie sich für JPG entscheiden, würde ich irfanview.com empfehlen (ermöglicht auch das Erstellen kleiner JPGs in Ks). Dort finden Sie ein kostenloses Dienstprogramm, das sich hervorragend als Desktop-Bildbetrachter eignet, aber auch als Stapelkonverter mit Stapeloperationen und Filtern. Dies könnte für die JPG-Route von wesentlicher Bedeutung sein.

Bearbeiten: Sie sprechen über die Option "Als Text belassen". Wenn Sie sich darauf verlassen können, dass ein Programmierer hilft, suchen Sie nach einer Lösung, um die Textdaten und Bilder für die Ausgabe von formatiertem HTML zu verarbeiten, und das ist alles. Ich denke, es gibt einige kostenlose Dienstprogramme wie dieses, die HTML exportieren. Das würde das Problem mit dem JPG-Text beseitigen (aber selbst wenn Sie sich für die gesamte JPG-Route entscheiden, könnte das Laden eines großen JPG weniger dauern als das Aufblähen eines PDFs oder einer anderen Lösung und wäre weniger abstoßend ...)

Kennen Sie das DjVu-Format?

Wenn nicht, kann dieser Link für Sie nützlich sein. Auch hier ist die offizielle Website , die auch eine große Ressource ist.

Das ist eine Frage, die zum Nachdenken anregt, und Ihre Antworten sind sehr unterschiedlich. Die Auswahl der besten Antwort ist ziemlich subjektiv, aber die Diskussion und die Unterschiede zwischen den Antworten sind für alle nützlich.

Davon abgesehen ist hier eine Idee ...

Hier ist meine Interpretation der Anforderungen:

• Passen Sie es an die Struktur der vorhandenen Site an, insbesondere an das Paging-Paradigma
• Präsentieren Sie dem Browser den tatsächlichen Text der Geschichte als Text ("Barrierefreiheit"). Dies ermöglicht auch andere Funktionen wie die externe Indizierung der Seiten durch Suchmaschinen und die Website-Suche (falls vorhanden) sowie die On-Page-SEO.
• Bewahren Sie die künstlerische Integrität: Präsentieren Sie den Text in jeder Zelle so, wie er vom Künstler handgeschrieben wurde.
• Präsentieren Sie nach Möglichkeit alle Zellen, wie sie auf der Seite zusammengezeichnet wurden. [Werden die kleinen Kästchen "Zellen" genannt und haben Sie sie? Ich sehe Comics wie Kunstwerke, aber es könnte etwas anderes sein.]

Angesichts dieser Dinge denke ich, dass der beste Ansatz darin besteht, dem Benutzer zwei "Frames" Material zu präsentieren (Sie können iFrames verwenden, wenn Sie dies wünschen, dies ist jedoch nicht erforderlich). Ich schlage nicht die Verwendung von HTML-Frames vor.

1. Erster "Rahmen" des Inhalts: Eine verkleinerte Ansicht der gesamten Seite als einzelnes Bild, das nicht zum Lesen gedacht ist, sondern sowohl die gesamte Komposition zeigt als auch als Navigationshilfe für das Buch dient.
2. Zweiter "Rahmen" des Inhalts: Ein großes Bild jeder Comic-Zelle, begleitet von dem Text, der Teil des Bildes dieser Zelle ist, jedoch als Text. Geben Sie dem Benutzer die Option, den Text auszublenden, aber standardmäßig anzuzeigen.

Der Benutzer blättert durch die Zellen, indem er möglicherweise auf ein nach rechts zeigendes Dreieck klickt, sodass er eine Zelle mit einem nach links zeigenden Dreieck zurückgehen kann.

Ich würde auch zwei weitere Miniaturansichten vorschlagen: eine noch kleinere Ansicht des Bildes der nächsten Seite (mit mehr Zellen) und eine ebenso kleine Ansicht des Bildes der vorherigen Seite. Auf diese Weise kann der Benutzer zu den tatsächlichen Seiten des Buches navigieren und nicht nur Zelle für Zelle klicken.

Ich denke, dass es sich lohnt, darüber nachzudenken, den Rest Ihrer Site-Elemente zu verbergen. Sie können dies zu einer Option machen, auf die der Benutzer klicken kann (z. B. zum Ausblenden des Textes), oder Sie können einfach die typische Benutzeroberfläche der Site beim Öffnen des Buches ausblenden, um den Benutzer in die umfassendste Erfahrung des Graphic Novels online einzutauchen. Sie können auch ein Umschalten der Site-Benutzeroberfläche anbieten, indem Sie ein Site-Logo / eine Site-Schaltfläche [Rest der Site: SHOW | AUSBLENDEN].

Deshalb schlage ich diesen Ansatz vor:

• Sie vermeiden die Einbindung eines Dokuments oder einer Datei (z. B. PDF, DjVu).
• Sie bieten "Barrierefreiheit", aber nicht nur zum Zweck der Barrierefreiheit, Sie erhalten den Text des Inhalts auf die Seite, die offensichtlich gut für die Suche usw. ist.
• Sie präsentieren dem Benutzer so viel künstlerisches Gefühl wie möglich - zeigen die ganze Seite und eine vergrößerte Ansicht jeder Zelle.
• Wenn Sie den Rest der Benutzeroberfläche Ihrer Website ausblenden, taucht der Leser in den Roman ein und verliert das Gefühl, auf einer Website zu surfen. IMO hilft dies, die künstlerische Integrität aufrechtzuerhalten.
• Es erfordert weder HTML5 noch eine Technologie, die die Anzahl potenzieller Leser begrenzt.
• Sie setzen den Inhalt des Romans nicht in altText ein.