Xuất bản một tiểu thuyết đồ họa trực tuyến?

Chủ nhân của tôi điều hành một cuộc thi viết mỗi năm. Hàng năm chúng tôi công bố ba kết quả hàng đầu trong mỗi danh mục lên trang web của chúng tôi. Không có gì to tát. Năm nay, một thể loại đã được thêm vào cho một cuốn tiểu thuyết đồ họa.

Những tiêu chuẩn và thực hành tốt nhất hiện có để xuất bản này lên trang web của chúng tôi? Tôi cho rằng một bản PDF sẽ rất tệ cho khả năng truy cập. Bản năng ruột của tôi chỉ là quét nó và đưa lên JPG. Tôi sẽ là tốt nhất để phiên âm văn bản thành đoạn văn, hoặc chỉ để nó dưới dạng văn bản thay thế?

Bất kỳ trợ giúp sẽ được đánh giá cao.

CẬP NHẬT: Tôi nghĩ rằng giải pháp cuối cùng của tôi sẽ có những mẩu câu trả lời dưới đây.

• Tùy chọn cho cả xem và tải xuống
• Tải xuống sẽ kích hoạt bản PDF cho những người tìm kiếm chất lượng in
• Chế độ xem sẽ tùy chọn một cửa sổ / tab mới với tiêu đề được rút xuống để chỉ xây dựng thương hiệu công ty.
• Chế độ xem sẽ có toàn bộ trang JPG của trang hiện tại và bật tắt để chỉnh sửa qua lại.
• Xem cũng sẽ có văn bản đơn giản, giải thích dựa trên đoạn văn của (các) cảnh trên trang. Văn bản này sẽ bị ẩn khỏi các trình duyệt với CSS.
• Xem hình ảnh sẽ có văn bản thay thế chỉ cần xác định hình ảnh là gì (tiêu đề và trang IE).

Tôi tin rằng điều này sẽ bao gồm tất cả các cơ sở, trong khi vẫn còn tương đối miễn phí để đăng.

Tôi đã thấy một số canvasthử nghiệm tiểu thuyết đồ họa thực sự điên rồ từ Google một thời gian trước đây. Tất cả các văn bản là văn bản đơn giản (khả năng truy cập tuyệt vời) nhưng tất cả các hình ảnh có thể được nhìn thấy rõ ràng. Tôi dường như không thể tìm thấy nó, nhưng 20 điều tôi đã học cho thấy ý nghĩa của tôi.

Tôi muốn nói rằng điều đó quá mức cho những gì bạn muốn làm, vì vậy tôi sẽ làm điều này:

<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>

Và tôi muốn phong cách div như vậy:

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

Theo cách này, bạn có thể nhìn thấy hình ảnh rõ ràng khi thấy mọi người xem và văn bản đơn giản để người đọc màn hình đọc to. Người ta cũng có thể đặt một phiên âm của truyện tranh vào altthẻ, nhưng theo cách của tôi, bạn có thể đặt nhiều ý nghĩa ngữ nghĩa hơn vào phiên âm.

Bạn cũng có thể thêm một số Javascript để chuyển đổi text-indentđể hiển thị nếu mọi người khó nhìn thấy muốn xem nó.

Bạn nên xem " Never Mind The Bullets ", được thực hiện bằng HTML5 và canvas. Tôi không chắc nó có thể truy cập được như thế nào, nhưng bạn có thể thấy nó mang lại cho bạn một số ý tưởng. Tuy nhiên, hãy nhớ rằng cách tiếp cận HTML5 loại trừ IE8 trở xuống (IE9 vẫn ổn). Tùy thuộc vào đối tượng của bạn, đó có thể là một người không bắt đầu.

HTML có thuộc tính longdesc trỏ đến URL của 'mô tả dài'. Thay vì nhiều thẻ alt, tại sao không sử dụng?

Oof, đó là một khó khăn. Thật sự rất khó để trình bày một cái gì đó như một cuốn tiểu thuyết đồ họa với khả năng tiếp cận tốt. Hình ảnh tốt hơn nhiều so với PDF, tuy nhiên, bạn đúng về điều đó. Ngoài ra, tôi không khuyên bạn nên đặt toàn bộ mô tả của từng ô dưới dạng văn bản thay thế, chứ đừng nói đến toàn bộ trang. Tôi nghĩ rằng cách tốt nhất sẽ là thêm các đoạn văn với bảng điểm và sử dụng alt làm chỉ số cho hình ảnh là gì ( alt="graphic novel x, page y").

Có lẽ đó là một ý tưởng để nó đọc to và cung cấp nó dưới dạng tệp âm thanh?

Tại sao không tìm kiếm các yếu tố mới của HTML5?

Về khả năng truy cập, bạn có thể tin tưởng vào nhiều tập lệnh nhỏ (như tập lệnh do Remy Sharp thực hiện và có sẵn tại http://whatwg.org , trên phần ví dụ) hoặc thư viện ( Modernizr ).

Bây giờ giải pháp của tôi: quét mọi thứ cho jpeg, sử dụng phần tử hình với figcaption để thêm tất cả hình ảnh dưới dạng thẻ img để giữ cho nó có thể truy cập được và tất nhiên, sử dụng văn bản thay thế. Đọc phần HTML5 về việc sử dụng thuộc tính alt . Nó có một số ví dụ hay về cách điều này có thể hữu ích cho khả năng tiếp cận.

BIÊN TẬP

Đối với những người tìm kiếm mức độ có thể truy cập thực sự cao, hãy bỏ tất cả các tài nguyên mới mà chúng tôi có thể tin cậy, như các yếu tố mới của HTML5, CSS @ font-face, văn bản đệm trở lại để ẩn ... Hãy tìm hiểu về POSH (HTML Old Semantic HTML) .

Tôi sẽ sử dụng giải pháp cực kỳ thô sơ sau đây: tạo jpeg và sử dụng thuộc tính alt để mô tả mọi thứ tốt như nó cần, theo cách tương tự trong hướng dẫn HTML5, nhưng được nâng cao, tức là các văn bản rất rất khó hiểu (có không giới hạn kích thước thuộc tính alt).

<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!"'>

Coi chừng một chi tiết: JPG khi kết xuất văn bản có thể rất tệ. Bạn sẽ cần phải thiết lập phần mềm đồ họa của mình để xuất với chất lượng rất cao. Nếu làm như vậy, là một tuyến đường ok. PDF thực sự gặp sự cố / mất thời gian để tải trong nhiều trình duyệt / máy. Nhưng đôi khi là tùy chọn duy nhất, nó phụ thuộc vào nội dung, đối tượng ... Vấn đề tôi thấy với HTML 5 dường như chưa được áp dụng đầy đủ ... Bạn cũng có thể tìm một số giải pháp flash nâng cao (Tôi vừa trả lời pdf câu hỏi lật sách ở đây)

Nếu đi theo tuyến đường JPG, tôi khuyên irfanview.com (cũng cho phép tạo các jpg nhỏ trong Ks), ở đó bạn tìm thấy một tiện ích miễn phí tuyệt vời như trình xem ảnh trên máy tính để bàn nhưng cũng có bộ chuyển đổi hàng loạt với các hoạt động và bộ lọc hàng loạt. Điều đó có thể cần thiết cho tuyến đường JPG.

chỉnh sửa: Bạn nói về tùy chọn "để lại dưới dạng văn bản". Nếu trông cậy vào một số lập trình viên để giúp đỡ, hãy tìm một số giải pháp để xử lý dữ liệu văn bản và hình ảnh để xuất ra định dạng html, và đó là tất cả. Tôi nghĩ rằng có một số tiện ích miễn phí như thế này có sẵn, đó là xuất html. Điều đó sẽ loại bỏ sự cố văn bản jpg (nhưng ngay cả khi đi theo tất cả các tuyến jpg, thực tế, một jpg lớn có thể mất ít tải hơn so với pdf hoặc giải pháp khác, và sẽ ít gặp sự cố hơn ...)

Bạn có quen thuộc với định dạng DjVu?

Nếu không, liên kết này có thể hữu ích cho bạn. Ngoài ra, đây là trang web chính thức cũng là một tài nguyên tuyệt vời.

Đó là một câu hỏi kích thích tư duy và câu trả lời của bạn rất đa dạng. Chọn câu trả lời tốt nhất sẽ khá chủ quan, nhưng cuộc thảo luận và sự khác biệt giữa các câu trả lời sẽ hữu ích cho mọi người.

Điều đó đang được nói, đây là một ý tưởng ...

Dưới đây là giải thích của tôi về các yêu cầu:

• Làm cho nó phù hợp với cấu trúc của trang web hiện tại, cụ thể là mô hình phân trang
• Trình bày cho trình duyệt văn bản thực tế của câu chuyện dưới dạng văn bản ("khả năng truy cập"). Điều này cũng cho phép các tính năng khác như lập chỉ mục bên ngoài của các trang bằng công cụ tìm kiếm và tìm kiếm trang web (nếu bạn có), SEO trên trang.
• Duy trì tính toàn vẹn nghệ thuật: trình bày văn bản trong mỗi ô như được viết bởi nghệ sĩ.
• Hiện tại, nếu có thể, tất cả các ô khi chúng được vẽ cùng nhau trên trang. [Các hộp nhỏ có tên là "tế bào" và bạn có chúng không? Tôi đang xem truyện tranh như tác phẩm nghệ thuật, nhưng nó có thể là một cái gì đó khác biệt.]

Với những điều đó, tôi nghĩ cách tiếp cận tốt nhất sẽ là trình bày cho người dùng hai "khung" vật liệu (bạn có thể sử dụng iFrames nếu muốn, nhưng không cần thiết); Tôi không đề xuất sử dụng khung HTML.

1. "Khung" nội dung đầu tiên: chế độ xem thu nhỏ của toàn bộ trang dưới dạng một hình ảnh duy nhất, không có nghĩa là để đọc, nhưng được sử dụng để hiển thị bố cục hoàn chỉnh và cũng đóng vai trò hỗ trợ cho việc điều hướng của cuốn sách.
2. "Khung" nội dung thứ hai: một hình ảnh lớn của mỗi ô truyện tranh, kèm theo văn bản là một phần của hình ảnh của ô đó, nhưng là văn bản. Cung cấp cho người dùng tùy chọn để ẩn văn bản, nhưng hiển thị văn bản như một mặc định.

Người dùng sẽ chuyển qua các ô bằng cách nhấp vào, có lẽ, một hình tam giác chỉ bên phải, cho phép họ quay lại một ô có hình tam giác chỉ sang trái.

Tôi cũng đề xuất thêm hai hình thu nhỏ: chế độ xem hình ảnh của trang tiếp theo thậm chí nhỏ hơn (có nhiều ô hơn) và chế độ xem hình ảnh nhỏ của trang trước đó. Bằng cách này, người dùng có thể điều hướng đến các trang thực sự của cuốn sách, không chỉ nhấp vào từng ô.

Tôi nghĩ rằng cũng đáng để xem xét, để che giấu phần còn lại của các yếu tố trang web của bạn. Bạn có thể đặt tùy chọn này mà người dùng có thể nhấp (như ẩn văn bản) hoặc bạn chỉ có thể ẩn giao diện người dùng trang web điển hình khi mở sách - đưa người dùng vào trải nghiệm đầy đủ nhất của tiểu thuyết đồ họa trực tuyến. Bạn cũng có thể cung cấp chuyển đổi giao diện người dùng trang web bằng cách cung cấp biểu tượng / nút trang web [phần còn lại của trang web: SHOW | ẨN GIẤU].

Đây là lý do tại sao tôi đề xuất phương pháp này:

• Bạn tránh kết hợp tài liệu hoặc tệp (như PDF, DjVu).
• Bạn cung cấp "khả năng truy cập" nhưng không chỉ cho mục đích truy cập, bạn có thể đưa văn bản của nội dung lên trang rõ ràng là tốt cho tìm kiếm, v.v.
• Bạn trình bày cho người dùng càng nhiều cảm giác nghệ thuật càng tốt - hiển thị toàn bộ trang và chế độ xem phóng to của từng ô.
• Nếu bạn ẩn phần còn lại của giao diện người dùng trang web của mình, người đọc sẽ đắm chìm trong cuốn tiểu thuyết, mất cảm giác duyệt trang web. IMO này giúp duy trì tính toàn vẹn nghệ thuật.
• Nó không yêu cầu HTML5 hoặc công nghệ giới hạn số lượng độc giả tiềm năng.
• Bạn không đặt nội dung của tiểu thuyết vào trong altvăn bản.