Суббота, 24.06.2017, 01:15
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Для авторов [13]
Мастер-класс [19]

Наш опрос
Оцените мой сайт
Всего ответов: 198

Twitter

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Социальные сети

Программы для чтения epub

Главная » Статьи » Статьи » Мастер-класс

Вставляем Обложку в электронную книгу ePub

cat

 

В так называемом разделе Сетевые Библиотеки идёт самозабвенная погоня за количеством, странные энтузиасты выкачивают с торрентов книги гигабайтами (простой здравый смысл подсказывает, что прочитать столько невозможно, да и не нужно).

"План по валу" и "вал по плану" – Вам ничего не напоминает? 

Ах, да, картинка справа

 (пушистик, ми-ми-ми) 

наглядная иллюстрация того, что визуальная информация бросается в глаза намного быстрее, чем текстовая. Но об этом чуть ниже.

 автор   Я совершенно убеждён, что издание книги должно быть событием, и не только для автора или издателя. Книга создается для читателя и должна отвечать его литературным и эстетическим ожиданиям.

  Первое, с чем сталкивается потенциальный читатель в Интернете – это обложка электронной книги на сайте библиотеки, издательства или магазина. Первое впечатление крайне важно. Обложка должна "зацепить", привлечь внимание, так как визуальная информация и воспринимается, и срабатывает раньше текстовой (это придумал не я, так получилось). 

  О подготовке обложки лучше всего рассказывать отдельно. Статья на эту тему есть на сайте. Сейчас о технике встраивания обложки непосредственно в книгу. Это можно делать в программе Calibre (попробуйте), но я предпочитаю редактор ePubSigil. Скажу сразу, описываемая тема достаточно сложная, чтобы получить чёткий алгоритм действий  пришлось перерыть очень много англоязычных ресурсов, форум http://www.mobileread.com и другие.

UPD 16.02.2014: В конце статьи встроен скринкаст (видеоролик) по встраиванию обложки, продемонстрированы два способа.

  Итак, Обложка должна быть в первом файле html в книге ePub (и там не должно быть ничего, кроме изображения обложки). Файл обложки должен быть подготовлен заранее и помещён в папку Images.

Добавляем обложку в первый файл книги (на скриншоте кнопка Insert Images.  С версии 0.7.0 она называется Insert Files):

Сразу должен сказать, что этих действий явно недостаточно, т.к. получается пока вот что:

 

Посмотрим, что же в коде страницы:

 

<body>

       <p><img alt="cover" src="../Images/cover.jpg" />&nbsp;</p>

</body>

 

При таких условиях или надо уменьшать обложку до каких-то усреднённых размеров гипотетического "ридера", или сделать так, чтобы обложка масштабировалась по ширине экрана.

В таблице стилей CSS должны быть следующие записи:

 

  div.coverpage

{

text-align: center;

page-break-after: always;

}

 

  img.coverimage

 

{

max-width:100%;

vertical-align: text-top;

margin-bottom:.5em !important;

padding: 0;

}

 

 

Теперь надо, чтобы на страничке обложки была ссылка на таблицу CSS и можно в коде чуть исправить отображение изображения:

 

 

<head>

  <title></title>

  <link href="../Styles/poemstyle.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

   <div class="coverpage"><img alt="cover" src="../Images/cover.jpg" />&nbsp;</div>

</body>

 

Но и этого мало! В описание img следует добавить class="coverimage"

 

 

<body>

  <div class="coverpage">

     <img alt="cover" class="coverimage" src="../Images/cover.jpg" />

  </div>

</body>

 

Проверяем, что получилось. Правую границу окна просмотра сместим мышкой влево (имитация узкого экрана, например, смартфона)

 

 

Снова мышкой смещаем границу окна вправо (имитация более широкого окна ридера или планшета)

 

 

Должен напомнить, что в названии файлов html (xhtml) и файлов изображений недопустимы пробелы, нельзя использовать кириллицу. Я допускал подобные ошибки и могу сказать, что обжигался лично.

 

Всё ли изложено? Почти. В руководстве программы Sigil особо подчёркивается, что и файлу html, и собственно изображению обложки должна быть присвоена "семантика" Cover и Cover Image соответственно. Выделяем файл, и по правому клику мышкой вызываем меню действий – Add Semantics:

 

 

 

  Если этого не сделать, ряд программ чтения просто не покажут обложку (они просто не будут иметь о ней информацию). Adobe (и все ридеры на основе SDK) будут считать первую страницу HTML как страницу обложки и воспроизводить её автоматически, тогда как Apple и некоторые другие ридеры распознают только  cover picture – изображение обложки (не страничку).

  Потому, если обложка в книгу не встроена, АDE (Adobe Digital Editions), будет использовать скриншот первой странички в качестве обложки, а Apple просто не покажет обложку вообще. Правильное и универсальное отображение обложки на всех устройствах достигается именно присвоением "семантики" и 1-й страничке html, и изображению. 

(Источник: http://epingsoft.com/blog/?p=30 )

 

-------------------------------------------

 

  Немного другой способ описан на сайте electricbookworks.com

http://electricbookworks.com/kb/creating-epub-from-indesign/after-indesign-export-to-epub/add-a-cover/

Запись на странице обложки:

 

<body class="cover">

 

 <p class="cover"><img class="cover" alt="" src="cover.jpg" /></p>

 

</body>

 

В таблице CSS должна быть запись:

 

/*Cover*/

body.cover

{

margin: 0;

padding: 0;

text-align: center;

}

p.cover

{

margin: 0;

padding: 0;

text-align: center;

}

img.cover

{

height: 100%;

}

 

  В Adobe советуют выбрать правильные пропорции обложки (например, 567×819) и в CSS указать:

img { max-width: 100%; padding: 0; margin: 0;}

http://blogs.adobe.com/digitaleditions/2009/03/working_with_the_cover.html

  

  Таким образом, подход к обложке может чуть отличаться. (Да, предложенные размеры обложки были вполне актуальны для 2009 года.) Я пользуюсь способом, описанным в самом начале (т.е. указание максимальной ширины изображения).

 

В Руководстве по созданию книг ePub 2.0 я сознательно в <head> страницы с обложкой вставил запись:

 

<head>

<title>Cover page</title>

<link href="../Styles/poemstyle.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body {text-align: center; padding:0; margin: 0; oeb-column-number: 1;}

</style>

</head>

 

<body>

  <div class="coverpage">
     <img alt="cover" class="coverimage" src="../Images/cover.jpg" />
  </div>

</body>

 Запись oeb-column-number: 1; означает команду отображать содержимое странички в одну колонку. Страница с обложкой – единственная, где дописывается дополнительный стиль в head, помимо подключённой таблицы CSS. Данный стиль имеет приоритет (the style will override the default style) и обложка будет отображаться без отступов от края экрана (насколько это возможно, с сохранением пропорций изображения).
UPD февраль 2015: Игорь Хоменко, автор книги "Право на убийство" продемонстрировал еще один метод для файла с обложкой создаётся отдельный файл CSS, в котором прописываются примерно те же правила:

body
{
text-align: center;
padding:0;
margin: 0;
oeb-column-number: 1;
}

div.coverpage
{
text-align: center;
page-break-after: always;
}

img.coverimage
{
max-width:100%;
max-height:100%;
vertical-align: text-top;
margin-bottom:.5em !important;
padding: 0;
}

Отдельный CSS подключить к странице с обложкой. Почему это целесообразно? Недавно скачал и установил новую версию Adobe Digital Editions 3.0 - в ней именно отдельный CSS демонстрирует обложку большого размера, вписанную в окно программы. Потому, этот способ считаю рекомендованным, спасибо Игорю.

  Тема обложки электронной книги считается сложной ещё и потому, что размеры и разрешение экранов различных устройств очень разные. Вот небольшая таблица (в ней не упомянуты самые современные девайсы)

 

 

iPad Mini 4 (7,9") 2048 × 1536 px

 

UPD: В апреле 2013 года в редактор Sigil добавлена функция автоматического добавления обложки в книгу в формате svgImplement issue 1997: Tool to Add Cover image and file automatically. ChangeLog.txt Этот подход относится к "однокнопочным решениям". 

 

 

В коде будет вот такая запись (пример):

 

 

 В редакторе не только встраивается обложка, но и проставляется Семантика для всех необходимых файлов.

 http://web.sigil.googlecode.com/git/files/OEBPS/Text/tutorial_add_cover.html

 

Попутно прокомментирую своё отношение. Просмотрел достаточно много книг (с той же Флибусты) с svg-обложками. Ну и в редакторе Sigil тоже. Неприятная ситуация встречается очень часто  сам файл jpg (jpeg) для обложки берётся мелкий (ну, что было, то и берут). А в виде svg  это изображение растягивается (NB!). Получаются размытые, кустарные обложки отвратительного вида. Зачем? Это у кого-то вызывает положительные эмоции  "я использовал svg"? По мне – если обложка мелкая, пусть хоть будет чёткая. Уважаемые энтузиасты, давайте уже от количества переходить к качеству. 

Автор выражает благодарность Яне Юшиной за разрешение использовать её фотографию в данной статье.

 

Иногда текст с иллюстрациями получается менее наглядным, чем видеозапись. Записал т.н. скринкаст (программой Screencast-O-Matic http://www.screencast-o-matic.com/ )

Я постарался провести демонстрацию в медленном темпе, на этот раз без фоновой музыки.

 

 
 
 

 = Встраивание обложки в fb2 (кратко)

Иногда, при конвертации из ePub в fb2 случается "подрезание" высоты обложки (я сталкивался). Соответственно, желательно провести правку.

В FB Editor: Меню  Вставка  Прикрепить (и указать файл обложки на компьютере)

 

 

Перейти в редактирование Метаданных (кнопка D)

Указать в качестве обложки новый файл. Старую обложку желательно удалить.

 

 

 

---------------------------

 

О подготовке изображения обложки и о современных требованиях к этому изображению будет рассказано в отдельной публикации:

 Подготовка файла обложки

(Попутно замечу, что на этой статье просмотров в 4 раза меньше. Предполагается, что "как делать обложку" все сами знают? Опыт показывает, что это сложнейшая тема с массой подводных камней и ошибок. Дизайн для печатных книг отличается от электронных. Но, на читателя не нужно "давить".  Важно дать возможность выбора.)

______________

 

ПРИЛОЖЕНИЕ:

 

 Мастер-класс по созданию ePub (Оглавление)

 

 Таблица стилей (CSS) в ePub

 

 Вставляем иллюстрации в ePub

 


 

Короткая ссылка на данную страницу: http://goo.gl/lQySZ

 

При републикации данного материала ссылка на наш сайт приветствуется.

 

Николай Мурашов (docking the mad dog)

Версия данной публикации в формате PDF: ссылка

Категория: Мастер-класс | Добавил: docking_the_mad_dog (16.11.2012)
Просмотров: 17209 | Комментарии: 6 | Теги: epub, how-to, Мастер-класс, cover for epub, дизайн книг | Рейтинг: 5.0/2
Всего комментариев: 6
5  
Здравсвуйте Николай!
В тексте этом, есть ошибка.
 - UPD февраль 2015: Игорь Хоменко, автор книги "Право на убийство" продемонстрировал еще один метод  для файла с обложкой создаётся отдельный файл CSS, в котором прописываются примерно те же правила:
 Книгу Игоря я скачал, просмотрел. НЕТ у него второго CSS, всё как обычно, в таких случаях. 
Но за мысль - спасибо. БУм пробывать.

6  
Хм... Я тоже перепроверил и для надёжности скачал файл ePub Игоря Хоменко. В нем три CSS -- для страницы с обложкой, для страницы оглавления и основной для всей остальной книги.

3  
А существует ли более простой способ?
Заранее благодарю за ответ.
Самый простой способ это сделать своими ручками. Т. е. как описано в статье.

4  
Да, согласен...  Самое интересное, что "делать что-то руками" очень немодно ))

2  
На данный момент более простого способа я не нашел. Существуют более сложные ))

Например, в программе Calibre добавить обложку и конвертировать epub в epub.
Второй способ - использовать в Calibre плагин Modify ePub plugin

1  
А существует ли более простой способ?
Заранее благодарю за ответ.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту

Мы в соцсетях
facebook twittwer youtubeподпискаПодпишитесь на рассылку

Друзья сайта
МЕГАЛИТ. Евразийский журнальный портал.
Электронный журнал «Точка ZRения»
 Book on the Move – независимые издатели электронных книг
 Материалы для самостоятельного изучения английского языка:словари, видеоуроки, книги,программы Ирина Бебнева на сервере Стихи.ру Читать Book on the Move


Новости сайта
[16.12.2016]
[Современная поэзия]
Яков Рабинер. Мой Сатирикон
(0)
[10.07.2016]
[Современная проза]
Яков Рабинер. Бодлер
(0)
[05.05.2016]
[Современная поэзия]
Яков Рабинер. Глубокая провинция души
(0)
[07.02.2016]
[Современная поэзия]
Яков Рабинер. Фрески.
(0)
[26.12.2015]
[Docking the Mad Dog представляет]
Иван Храмовник - Коварство и кавай
(0)
[06.12.2015]
[Современная поэзия]
Светлана Чернышова. От Японского до Эвксинского.+
(1)
[04.10.2015]
[Самиздат]
Наталья По. Я не знала еще...
(0)
[13.09.2015]
[Учебная литература]
Яков Рабинер. Крещендо
(0)
[24.05.2015]
[Современная проза]
Ангелина Злобина. Странная моя птица - 2-е издание
(0)
[10.05.2015]
[Учебная литература]
Якоа Рабинер. Пушкин и Лермонтов. Заметки на полях биографий
(0)



Поддержи проект
Книги для наших авторов мы создаем бесплатно. Однако вы можете поддержать проект, оказав ему некоторую материальную помощь.


Copyright Book on the Move © 2017Создать бесплатный сайт с uCoz