Издревле мудрецы зашифровывали свои послания, используя буквы, слова, свет своей души и тепло своего сердца. Они обладали колоссальными знаниями и в то же время количество способов передачи информации тем, кто ещё дремлет, тогда было ограничено.
Сегодня же, используя возможности HTML5, вы можете создавать библиотеки самой разнообразной тематики. Причём, книги в таких библиотеках кроме текстовой информации и статических иллюстраций, также могут содержать анимированные слайдшоу, видеоролики и звуковую информацию, содержащую в себе голоса людей, звуки вселенной, и конечно музыку, радующую слух.
Кроме единичных изображений или фотографий, в качестве иллюстраций к книгам формата HTML5, вы также можете добавлять коллажи, аналогом которым раньше служили стенгазеты, обклеенные со всех сторон фотографиями. Также современные технологии позволяют дать возможность вашим читателям скользить по необъятным просторам информационного поля, переходя по активным ссылкам внутри текста, чем-то напоминающим собой порталы, объединяющие между собой множество сгустков информации самой различной тематики.
В этой теме я изложу своё видение того, как можно наиболее полно использовать возможности формата HTML5 для создания библиотеки полезных знаний.
Сделал видеоинструкцию, помогающую раскрыть эту тему полнее и доступнее:
Это обучающее видео разбито на следующие разделы:
Создание коллажей в программе XnView: горизонтальная и вертикальная склейка;
Создание коллажей в программе Ulead Photoimpact 12: коллаж в виде картинок
на красивом фоне;
Создание GIF-анимации с помощью Ulead Gif Animator 5;
Конвертирование видео из MP4 в WebM с помощью VLC Media Player;
Создание мультимедийного информационного блока в формате HTML5 для просмотра на компьютере без подключения к интернету.
Каждый раздел инструкции из того списка, что выше - кликабельный. По клику открывается видео на YouTube, перемотанное на нужную секунду. В идеале было бы перематывать по клику видео в уже открытой вкладке, но пока такой возможности нету, поэтому лишнее закрываем руками.
Ниже расскажу о том, как на базе записей из личного или корпоративного блога можно создавать свою Живую Книгу в формате HTML5, в которую можно вставлять изображения, gif-анимацию, видеоролики и звуковые файлы. Всё это можно обустроить таким образом, чтобы у вас была возможность читать такую книгу с компьютера не подключенного к интернету и не испытывать при этом даже минимального дискомфорта.
Кроме этого, также опишу пару способов создания коллажей из изображений, расскажу, как создавать GIF-анимацию для книги, а также научу вас конвертировать видео в формат WebM, который подходит для вставки в HTML5.
В первой версии этой инструкции по созданию Живой Книги на базе формата HTML5, опишу программы для Windows, дающие вам возможность создавать красивые коллажи, gif-анимации, а также конвертировать видео и звуковые файлы в подходящий формат. В дальнейшем эта тема, возможно, будет дополнена информацией о программах для других операционных систем, решающих похожие задачи.
Подготовка дополнительных материалов для книги HTML5
Статические изображения
Как и в обычных бумажных книгах, в электронной мультимедиа-книге у вас есть возможность добавлять статические изображения. Для большей информативности полезно комбинировать единичные изображения или фотографии с продуманными коллажами из подходящих картинок. В видео, которое приводил выше, вы можете посмотреть, как можно создать коллаж, склеивая изображения по горизонтали или по вертикали с помощью программы XnView. Подробную инструкцию по созданию коллажей в программе XnView уже выкладывал в этом блоге, прочитать её можно здесь.
Комбинируя применение горизонтальной и вертикальной склейки изображений, вы можете получить огромное количество коллажей самой разнообразной формы и содержания, например возможны такие варианты размещения склеиваемых картинок на коллаже:
По склейке изображений в XnView ещё хотел добавить одну маленькую вещь. Если взять листок из тетрадки в клетку и импровизировать, проводя линии по сторонам квадратиков, можно сочинить интересную композицию похожую на те, которые встречаются в японских кроссвордах. Учитывая, что склеиваемые изображения цветные, при творческом подходе может получиться яркая и красочная картинка, к тому же наполненная смыслом.
В видеоинструкции по подготовке дополнительных материалов для Живой Книги в формате HTML5 я также показал, как можно создавать коллаж в программе Ulead Photoimpact 12. В этой программе вы можете создавать коллажи, набрасывая на большое фоновое изображение картинки поменьше. В Ulead Photoimpact доступно попиксельно регулирование положения изображений на холсте (правый клик по добавленной на фоновое изображение картинке -) Properties -) вкладка Position & Size -) координаты: отступ слева (Left), отступ сверху (Top)). Ручное управление положением картинок даёт вам возможность использовать красоту симметрии, размещая картинки горизонтально в ряд на одинаковом расстоянии от верхнего края фонового рисунка.
Пример коллажа созданного в этой программе:
Также хотел отметить, что дополнительно к осмысленному размещению изображений на коллаже, часто бывает полезно добавлять рамки (к отдельным кадрам или ко всему коллажу), применять красивые краевые эффекты к снимкам, а также добавлять интересные эффекты внутри любой из картинок на коллаже или ко всему коллажу в целом. Но даже если пользоваться только теми фишками для создания коллажей, которые я показал в видео здесь и здесь, вы сможете создавать очень красивые вещи, изящно дополняющие наполнение вашей книги.
GIF-анимация
Кроме статических изображений, для экономии места (в смысле полезного пространства на страницах вашей книги), бывает полезно вставлять в мультимедиа-книгу слайдшоу в виде GIF-анимации. Создания GIF-анимации из изображений с одинаковым разрешением я уже описывал в этом блоге достаточно подробно в теме Ulead GIF Animator - удобная программа для создания GIF-анимации, также порядок действий, необходимых для создания GIF-слайдшоу смотрите в видеоинструкции, которую выложил в этой теме, перемотать видео на нужное место можно по этой ссылке.
Также, краткую инструкцию по созданию GIF в программе Ulead Gif Animator 5 смотрите ниже ( осторожно, Анимация! :) ):
Также могу добавить, что кадры слайдшоу, создаваемого в формате .gif вполне могут быть самостоятельными коллажами, о создании которых уже писал выше. (Иногда фишкокомбинация из комбинаций фишек даёт больший эффект чем отдельная самостоятельная фишка).
Видео и аудиоматериалы
Для того чтобы добавлять в мультимедиа-книгу формата HTML5 видео или аудиоинформацию, нужно сначала сконвертировать видеоролик или звуковой файл, который хотите вставить в вашу книгу, в подходящий формат: для видео - WebM, для звука - OGG. Процесс конвертации предельно прост, и ниже я показываю и рассказываю, что и в каком порядке нужно для этого сделать.
Конвертировать видео в WebM и звуковой файл из MP3 в OGG можно в программе VLC Media Player 1.1.11, которую можно скачать с официального сайта по этой ссылке (На момент создания инструкции, последняя версия программы VLC Media Player 2.0.2 конвертации видео в WebM и аудио в OGG сопротивлялась, но, думаю, со временем этот глюк починят. Версия программы 1.1.11, ссылку на скачивание которой приводил выше, отлично решает задачи конвертации, видео для оффлайн-версий своих инструкций конвертирую именно в ней). Если звуковая информация, которую хотите добавить в свою Живую Книгу, хранится у вас в формате FLAC, то для конвертации в формат OGG уже понадобится программа foobar2000 и дополнительно к ней кодировщик oggenc2 , процедуру конвертации из FLAC в OGG также опишу ниже.
Видеоролики с расширением .webm, которое соответствует формату WebM, вы можете смотреть независимо от Живой Книги HTML5. Работать с этим форматом умеет большинство проигрывателей, для примера, вы можете использовать для просмотра видео формата WebM с компьютера программу VLC Media Player или же программу Media Player Classic в связке с набором кодеков K-Lite Mega Codec Pack.
Кроме возможности вставлять видео формата WebM в личную книжку с полезной информацией, этот формат также неплохо подходит для хранения фильмов на компьютере, так как видео в этом формате занимает в несколько раз меньше места, чем это же видео в других форматах при аналогичном качестве.
Звуковые файлы в формате OGG (расширение таких файлов .ogg) полностью поддерживаются такими проигрывателями как Winamp и foobar2000, а также множеством других альтернативных программ для прослушивания музыки на компьютере. При необходимости, вы легко сможете прослушать нужный звуковой файл, входящий в HTML5-книгу, из папки с мультимедиа-контентом для книги, независимо от самой книги.
Конвертация видео в формат WebM с помощью программы VLC Media Player 1.1.11
Скачать программу VLC Media Player 1.1.11 можно здесь.
Для того чтобы преобразовать видео с вашего компьютера в формат WebM, запустите программу VLC Media Player 1.1.11, после чего сделайте следующие действия:
Перед началом конвертации, вы также можете изменить параметры видео и звука, нажав в окне "Преобразовать" кнопку Настройки (кнопка в виде пересечения гайки и отвёртки, найдёте эту кнопку справа от переключателя формата выходящего файла).
Конвертация звука из MP3 в OGG с помощью программы VLC Media Player 1.1.11
Скачать программу VLC Media Player 1.1.11 можно здесь.
Для того чтобы преобразовать аудиофайл из формата MP3 в формат OGG, запустите программу VLC Media Player 1.1.11, после чего сделайте следующие действия:
Конвертация звука из FLAC в OGG с помощью программы foobar2000
Для конвертации звукового файла из формата FLAC в формат OGG вам нужно скачать программу foobar2000, а также дополнительно к этой программе кодировщик oggenc2.
Для того чтобы преобразовать аудиофайл из формата FLAC в формат OGG, запустите программу foobar2000, после чего сделайте следующие действия:
После этого, при первом конвертировании FLAC в OGG с помощью foobar2000, программа запросит у вас расположение программы-кодировщика для работы с форматом OGG - файла oggenc2.exe, ссылку на скачивание которого я давал выше. Нужно найти этот файл на компьютере и выбрать его двойным кликом. При последующих конвертациях FLAC -) OGG указывать расположение кодировщика не нужно, программа запоминает, где его искать и сама к нему обращается автоматически.
Преобразование записи из блога на базе Blogger, ЛиРу и других платформ
в Живую Книгу формата HTML5
Чтобы преобразовать запись из вашего личного блога в Живую книгу формата HTML5 нужно сделать следующее:
1) Создать папку для Живой Книги, создать внутри этой папки текстовый документ, который потом будет преобразован в формат HTML5. Скопировать html-код записи из своего блога, которую хотите преобразовать в мультимедиа-книгу, в этот текстовый документ.
Для ЛиРу, кнопка переключения в режим html-кода находиться здесь:
Для Blogger, кнопка переключения в режим html-кода находиться здесь:
2) Дополнить текстовый файл, в который вы скопировали html-код записи из своего блога шапкой (вставить в начале текстового файла) и подвалом (вставить в конце текстового файла) следующего содержания:
Шапка:
Подвал:
В блогоплатформах вроде ЛиРу и Blogger, теги html, head и body прописаны в шаблоне и добавляются к каждой записи вашего блога автоматически, для оффлайн-книги их придется вставить вручную. Также часть кода в шапке даёт вам возможность вставлять в мультимедиа-книгу видео и аудиоинформацию с помощью проигрывателя LeanBack Player.
3) Скопировать в папку Живой Книги все изображения, gif-слайдшоу, видео и аудиоматериалы (предварительно сконвертированные в подходящие форматы: видео - в WebM, аудио - в OGG), использованные в записи блога, которую вы будете преобразовывать в Живую Книгу.
Если в записи блога, с которой вы работаете, использованы ваши личные мультимедиа-материалы, которые сохранились на вашем компьютере, просто скопируйте нужные файлы в папку Живой Книги. Если же части материалов из этой записи по каким-то причинам на компьютере не оказалось, сохраните из интернета на компьютер все изображения и gif-слайдшоу из записи блога, с которой вы работаете (В FireFox: правый клик по картинке -) Сохранить изображение как... ; в Opera: правый клик по картинке -) Сохранить изображение ... ; в Google Chrome: правый клик по картинке -) Сохранить картинку как...), и переместите эти изображения и слайдшоу в папку Живой Книги.
Также в папку с материалами для Живой Книги нужно скопировать все видео и аудиофайлы, сконвертированные соответственно в форматы WebM и OGG (о том, как конвертировать уже писал выше).
Если видео и аудиофайлов из записи блога, с которой работаете, на вашем компьютере не сохранилось, их можно вытянуть из интернета, к примеру, дополнениями для FireFox вроде этих, после чего нужно сконвертировать все видеоролики из этой записи блога в формат WebM, а все звуковые файлы в формат OGG, и, затем, скопировать полученные файлы в папку Живой Книги.
4) После добавления изображений и gif-слайдшоу из записи блога, с которой вы работаете, в папку Живой Книги, в текстовом файле, используя поиск (Ctrl+F), находим адреса изображений, которые встречаются в тексте и заменяем эти адреса на названия соответствующих изображений внутри папки Живой Книги (Если все изображения с разрешением .jpg, ищем по фразе .jpg . В моём случае все картинки залиты на жабу, поэтому ищу по фразе imageshack.us).
Если при создании записи блога, вы просто вставляли стандартный код картинки с хранилищ изображений, адрес каждого изображения встречается дважды: вставляемая картинка - src="http://img225..1.jpg" и ссылка, для перехода к картинке из записи блога по клику - href="http://img225..1.jpg", не забывайте изменять адрес изображения в интернете на его название внутри папки Живой Книги для каждой картинки. Удобно при сохранении изображений из записи блога, давать этим изображениям имена согласно их порядковому номеру в тексте, также вначале номера можно добавлять одну из последних букв латинского алфавита, например Z (при сортировке файлов по алфавиту, добавление z* к имени картинок даёт возможность опустить изображения в папке Живой Книги ниже основного файла .html).
Фрагмент кода из блога, соответствующий вставленному изображению, и этот же фрагмент, исправленный под оффлайн-версию записи блога (Живую Книгу) смотрите ниже:
5) Для возможности вставлять в Живую Книгу видео и аудиоматериалы, вам нужно скачать архив с плеером LeanBack Player с официального сайта. После того, как извлечёте содержимое этого архива на компьютер, вам нужно скопировать в папку Живой Книги 2 файла - leanbackPlayer.default.css из папки css.player и leanbackPlayer.pack.js из папки js.player.
После этого, в текстовом документе над которым работаете нужно заменить коды видеороликов, встроенных в блог из YouTube или других видеохранилищ, а также коды звуковых файлов, добавленных в запись блога с помощью Yandex Music и других аналогичных сервисов на код плеера LeanBack Player, который есть на сайте проигрывателя в разделе "документация", вставив в качестве адреса видео или аудиофайла, название соответствующего видеоролика или звукового файла, который вы уже сконвертировали в форматы WebM и OGG (для видео - у файлов расширение .webm, для аудиофайлов - .ogg).
Для удобства, ниже привожу коды для вставки видео и звукового файла в Живую Книгу с помощью проигрывателя LeanBack Player:
Вставив код для добавления в Живую Книгу звукового файла или видео, встроенного в LeanBack Player, вам нужно задать актуальное Имя файла (вместо фразы Имя файла). Также, вы можете выбрать подходящее для видео разрешение (параметр width - ширина видео, параметр height - высота видео).
После того, как внесёте все изменения, о которых писал выше, в текстовый файл, проверите наличие в папке Живой Книги всех изображений, gif-слайдшоу, видео и аудиороликов подходящих форматов, а также проверите наличие служебных файлов LeanBack Player - leanbackPlayer.default.css и leanbackPlayer.pack.js, можно смело сохранять текстовый файл, с которым вы работали в формате .html.
Для этого, в блокноте:
нажмите кнопку Файл -) Сохранить как... -) переключатель Тип файла установите на Все файлы, в поле имени файла введите Название_Живой_Книги.html -) нажмите кнопку Сохранить.
После этого можете проверить, что получилось, запустив html файл, который только что создали в любимом браузере.
Также, у вас есть возможность выложить вашу книгу в интернет, заархивировав папку с вашей Живой Книгой и залив получившийся архив, например, в свой аккаунт на dropbox (вставил реферальную ссылку, вдруг кто захочет зарегистрироваться по моему инвайту на dropbox -) дают 500Мб дополнительного места и пригласившему и приглашённому). Тему работы с Dropbox постараюсь подробнее описать в одной из следующих тем, удобность этого сервиса состоит в том, что у вас есть возможность получать прямые ссылки на видео, аудио, текстовые материалы и другие файлы, что часто добавляет удобств и комфорта.
Текст всех вставок кода в Живую Книгу, которые приводил в этой теме одним файлом, смотрите по этой ссылке.
Тем, кому интересна яркая, оригинальная и концентрированная подача информации в контексте обучения могут пригодиться мои инструкции по этой тематике:
Оффлайн-версию инструкции по созданию Живой Книги в формате HTML5 качаем здесь:
Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!
Спасибо всем за внимание, надеюсь, инфа изложенная в этой теме была полезной.
Сегодня же, используя возможности HTML5, вы можете создавать библиотеки самой разнообразной тематики. Причём, книги в таких библиотеках кроме текстовой информации и статических иллюстраций, также могут содержать анимированные слайдшоу, видеоролики и звуковую информацию, содержащую в себе голоса людей, звуки вселенной, и конечно музыку, радующую слух.
Кроме единичных изображений или фотографий, в качестве иллюстраций к книгам формата HTML5, вы также можете добавлять коллажи, аналогом которым раньше служили стенгазеты, обклеенные со всех сторон фотографиями. Также современные технологии позволяют дать возможность вашим читателям скользить по необъятным просторам информационного поля, переходя по активным ссылкам внутри текста, чем-то напоминающим собой порталы, объединяющие между собой множество сгустков информации самой различной тематики.
В этой теме я изложу своё видение того, как можно наиболее полно использовать возможности формата HTML5 для создания библиотеки полезных знаний.
Сделал видеоинструкцию, помогающую раскрыть эту тему полнее и доступнее:
Это обучающее видео разбито на следующие разделы:
Создание коллажей в программе XnView: горизонтальная и вертикальная склейка;
Создание коллажей в программе Ulead Photoimpact 12: коллаж в виде картинок
на красивом фоне;
Создание GIF-анимации с помощью Ulead Gif Animator 5;
Конвертирование видео из MP4 в WebM с помощью VLC Media Player;
Создание мультимедийного информационного блока в формате HTML5 для просмотра на компьютере без подключения к интернету.
Каждый раздел инструкции из того списка, что выше - кликабельный. По клику открывается видео на YouTube, перемотанное на нужную секунду. В идеале было бы перематывать по клику видео в уже открытой вкладке, но пока такой возможности нету, поэтому лишнее закрываем руками.
Ниже расскажу о том, как на базе записей из личного или корпоративного блога можно создавать свою Живую Книгу в формате HTML5, в которую можно вставлять изображения, gif-анимацию, видеоролики и звуковые файлы. Всё это можно обустроить таким образом, чтобы у вас была возможность читать такую книгу с компьютера не подключенного к интернету и не испытывать при этом даже минимального дискомфорта.
Кроме этого, также опишу пару способов создания коллажей из изображений, расскажу, как создавать GIF-анимацию для книги, а также научу вас конвертировать видео в формат WebM, который подходит для вставки в HTML5.
В первой версии этой инструкции по созданию Живой Книги на базе формата HTML5, опишу программы для Windows, дающие вам возможность создавать красивые коллажи, gif-анимации, а также конвертировать видео и звуковые файлы в подходящий формат. В дальнейшем эта тема, возможно, будет дополнена информацией о программах для других операционных систем, решающих похожие задачи.
Подготовка дополнительных материалов для книги HTML5
Статические изображения
Как и в обычных бумажных книгах, в электронной мультимедиа-книге у вас есть возможность добавлять статические изображения. Для большей информативности полезно комбинировать единичные изображения или фотографии с продуманными коллажами из подходящих картинок. В видео, которое приводил выше, вы можете посмотреть, как можно создать коллаж, склеивая изображения по горизонтали или по вертикали с помощью программы XnView. Подробную инструкцию по созданию коллажей в программе XnView уже выкладывал в этом блоге, прочитать её можно здесь.
Комбинируя применение горизонтальной и вертикальной склейки изображений, вы можете получить огромное количество коллажей самой разнообразной формы и содержания, например возможны такие варианты размещения склеиваемых картинок на коллаже:
По склейке изображений в XnView ещё хотел добавить одну маленькую вещь. Если взять листок из тетрадки в клетку и импровизировать, проводя линии по сторонам квадратиков, можно сочинить интересную композицию похожую на те, которые встречаются в японских кроссвордах. Учитывая, что склеиваемые изображения цветные, при творческом подходе может получиться яркая и красочная картинка, к тому же наполненная смыслом.
В видеоинструкции по подготовке дополнительных материалов для Живой Книги в формате HTML5 я также показал, как можно создавать коллаж в программе Ulead Photoimpact 12. В этой программе вы можете создавать коллажи, набрасывая на большое фоновое изображение картинки поменьше. В Ulead Photoimpact доступно попиксельно регулирование положения изображений на холсте (правый клик по добавленной на фоновое изображение картинке -) Properties -) вкладка Position & Size -) координаты: отступ слева (Left), отступ сверху (Top)). Ручное управление положением картинок даёт вам возможность использовать красоту симметрии, размещая картинки горизонтально в ряд на одинаковом расстоянии от верхнего края фонового рисунка.
Пример коллажа созданного в этой программе:
Также хотел отметить, что дополнительно к осмысленному размещению изображений на коллаже, часто бывает полезно добавлять рамки (к отдельным кадрам или ко всему коллажу), применять красивые краевые эффекты к снимкам, а также добавлять интересные эффекты внутри любой из картинок на коллаже или ко всему коллажу в целом. Но даже если пользоваться только теми фишками для создания коллажей, которые я показал в видео здесь и здесь, вы сможете создавать очень красивые вещи, изящно дополняющие наполнение вашей книги.
GIF-анимация
Кроме статических изображений, для экономии места (в смысле полезного пространства на страницах вашей книги), бывает полезно вставлять в мультимедиа-книгу слайдшоу в виде GIF-анимации. Создания GIF-анимации из изображений с одинаковым разрешением я уже описывал в этом блоге достаточно подробно в теме Ulead GIF Animator - удобная программа для создания GIF-анимации, также порядок действий, необходимых для создания GIF-слайдшоу смотрите в видеоинструкции, которую выложил в этой теме, перемотать видео на нужное место можно по этой ссылке.
Также, краткую инструкцию по созданию GIF в программе Ulead Gif Animator 5 смотрите ниже ( осторожно, Анимация! :) ):
Также могу добавить, что кадры слайдшоу, создаваемого в формате .gif вполне могут быть самостоятельными коллажами, о создании которых уже писал выше. (Иногда фишкокомбинация из комбинаций фишек даёт больший эффект чем отдельная самостоятельная фишка).
Видео и аудиоматериалы
Для того чтобы добавлять в мультимедиа-книгу формата HTML5 видео или аудиоинформацию, нужно сначала сконвертировать видеоролик или звуковой файл, который хотите вставить в вашу книгу, в подходящий формат: для видео - WebM, для звука - OGG. Процесс конвертации предельно прост, и ниже я показываю и рассказываю, что и в каком порядке нужно для этого сделать.
Конвертировать видео в WebM и звуковой файл из MP3 в OGG можно в программе VLC Media Player 1.1.11, которую можно скачать с официального сайта по этой ссылке (На момент создания инструкции, последняя версия программы VLC Media Player 2.0.2 конвертации видео в WebM и аудио в OGG сопротивлялась, но, думаю, со временем этот глюк починят. Версия программы 1.1.11, ссылку на скачивание которой приводил выше, отлично решает задачи конвертации, видео для оффлайн-версий своих инструкций конвертирую именно в ней). Если звуковая информация, которую хотите добавить в свою Живую Книгу, хранится у вас в формате FLAC, то для конвертации в формат OGG уже понадобится программа foobar2000 и дополнительно к ней кодировщик oggenc2 , процедуру конвертации из FLAC в OGG также опишу ниже.
Видеоролики с расширением .webm, которое соответствует формату WebM, вы можете смотреть независимо от Живой Книги HTML5. Работать с этим форматом умеет большинство проигрывателей, для примера, вы можете использовать для просмотра видео формата WebM с компьютера программу VLC Media Player или же программу Media Player Classic в связке с набором кодеков K-Lite Mega Codec Pack.
Кроме возможности вставлять видео формата WebM в личную книжку с полезной информацией, этот формат также неплохо подходит для хранения фильмов на компьютере, так как видео в этом формате занимает в несколько раз меньше места, чем это же видео в других форматах при аналогичном качестве.
Звуковые файлы в формате OGG (расширение таких файлов .ogg) полностью поддерживаются такими проигрывателями как Winamp и foobar2000, а также множеством других альтернативных программ для прослушивания музыки на компьютере. При необходимости, вы легко сможете прослушать нужный звуковой файл, входящий в HTML5-книгу, из папки с мультимедиа-контентом для книги, независимо от самой книги.
Конвертация видео в формат WebM с помощью программы VLC Media Player 1.1.11
Скачать программу VLC Media Player 1.1.11 можно здесь.
Для того чтобы преобразовать видео с вашего компьютера в формат WebM, запустите программу VLC Media Player 1.1.11, после чего сделайте следующие действия:
- Нажмите в верхней панели программы кнопку Медиа, после чего в выпадающем списке выберите опцию Конвертировать / сохранить;
- В открывшемся окне "Открыть медиа-файл" нажмите кнопку Добавить, после чего выберите видеофайл, который хотите преобразовать в формат WebM, дважды кликнув по нему. Нажмите кнопку Конвертировать / сохранить в правом нижнем углу окна;
- В окне "Преобразовать" скопируйте адрес файла источника в поле Конечный файл, заменив разрешение файла на .webm . Выберите из доступных форматов Video - VP80 + Vorbis (Webm), после чего нажмите кнопку Начать и ожидайте завершения конвертации видео. Новый видеофайл будет сохранён в ту же папку что и файл-источник.
Перед началом конвертации, вы также можете изменить параметры видео и звука, нажав в окне "Преобразовать" кнопку Настройки (кнопка в виде пересечения гайки и отвёртки, найдёте эту кнопку справа от переключателя формата выходящего файла).
Конвертация звука из MP3 в OGG с помощью программы VLC Media Player 1.1.11
Скачать программу VLC Media Player 1.1.11 можно здесь.
Для того чтобы преобразовать аудиофайл из формата MP3 в формат OGG, запустите программу VLC Media Player 1.1.11, после чего сделайте следующие действия:
- Нажмите в верхней панели программы кнопку Медиа, после чего в выпадающем списке выберите опцию Конвертировать / сохранить;
- В открывшемся окне "Открыть медиа-файл" нажмите кнопку Добавить, после чего выберите звуковой файл в формате MP3, который хотите преобразовать в формат OGG, дважды кликнув по нему. Нажмите кнопку Конвертировать / сохранить в правом нижнем углу окна;
- В окне "Преобразовать" скопируйте адрес файла источника в поле Конечный файл, заменив разрешение файла на .ogg . Выберите из доступных форматов Audio - Vorbis (OGG), после чего нажмите кнопку Настройки (кнопка в виде пересечения гайки и отвёртки, найдёте эту кнопку справа от переключателя формата выходящего файла);
- В открывшемся окне "Форма", выберите вкладку Аудио-кодек, задайте подходящий битрейт для нового звукового файла в формате OGG, после чего нажмите кнопку Сохранить, которая находится в правом нижнем углу этого окна;
- Нажмите кнопку Сохранить в окне "Преобразовать" и ожидайте завершения конвертации.
Конвертация звука из FLAC в OGG с помощью программы foobar2000
Для конвертации звукового файла из формата FLAC в формат OGG вам нужно скачать программу foobar2000, а также дополнительно к этой программе кодировщик oggenc2.
Для того чтобы преобразовать аудиофайл из формата FLAC в формат OGG, запустите программу foobar2000, после чего сделайте следующие действия:
- Перетащите левой кнопкой мышки звуковой файл в формате FLAC в область списка проигрываемых в foobar2000 аудиофайлов. Кликните правой кнопкой мышки по этому звуковому файлу, после чего выберите в выпадающем списке Convert -) ... (троеточие);
- В открывшемся окне "Converter Setup" нажмите кнопку Output format;
- Выберите из списка доступных форматов Ogg Vorbis, после чего нажмите кнопку Edit;
- В открывшемся окне, перетаскивая мышкой ползунок Quality, выберите для нового звукового файла, в который вы будете переобразовывать аудиофайл формата FLAC, подходящий битрейт, после чего нажмите кнопку Ок;
- В окне выбора формата для выходящего файла, убедившись, что выбран формат Ogg Vorbis, нажмите кнопку Back;
- В окне, к которому вы вернетесь, нажмите кнопку Convert;
- В открывшемся окне "Сохранить как" задайте имя для файла, после чего нажмите кнопку Сохранить.
После этого, при первом конвертировании FLAC в OGG с помощью foobar2000, программа запросит у вас расположение программы-кодировщика для работы с форматом OGG - файла oggenc2.exe, ссылку на скачивание которого я давал выше. Нужно найти этот файл на компьютере и выбрать его двойным кликом. При последующих конвертациях FLAC -) OGG указывать расположение кодировщика не нужно, программа запоминает, где его искать и сама к нему обращается автоматически.
Преобразование записи из блога на базе Blogger, ЛиРу и других платформ
в Живую Книгу формата HTML5
Чтобы преобразовать запись из вашего личного блога в Живую книгу формата HTML5 нужно сделать следующее:
1) Создать папку для Живой Книги, создать внутри этой папки текстовый документ, который потом будет преобразован в формат HTML5. Скопировать html-код записи из своего блога, которую хотите преобразовать в мультимедиа-книгу, в этот текстовый документ.
Для ЛиРу, кнопка переключения в режим html-кода находиться здесь:
2) Дополнить текстовый файл, в который вы скопировали html-код записи из своего блога шапкой (вставить в начале текстового файла) и подвалом (вставить в конце текстового файла) следующего содержания:
Шапка:
Подвал:
В блогоплатформах вроде ЛиРу и Blogger, теги html, head и body прописаны в шаблоне и добавляются к каждой записи вашего блога автоматически, для оффлайн-книги их придется вставить вручную. Также часть кода в шапке даёт вам возможность вставлять в мультимедиа-книгу видео и аудиоинформацию с помощью проигрывателя LeanBack Player.
3) Скопировать в папку Живой Книги все изображения, gif-слайдшоу, видео и аудиоматериалы (предварительно сконвертированные в подходящие форматы: видео - в WebM, аудио - в OGG), использованные в записи блога, которую вы будете преобразовывать в Живую Книгу.
Если в записи блога, с которой вы работаете, использованы ваши личные мультимедиа-материалы, которые сохранились на вашем компьютере, просто скопируйте нужные файлы в папку Живой Книги. Если же части материалов из этой записи по каким-то причинам на компьютере не оказалось, сохраните из интернета на компьютер все изображения и gif-слайдшоу из записи блога, с которой вы работаете (В FireFox: правый клик по картинке -) Сохранить изображение как... ; в Opera: правый клик по картинке -) Сохранить изображение ... ; в Google Chrome: правый клик по картинке -) Сохранить картинку как...), и переместите эти изображения и слайдшоу в папку Живой Книги.
Также в папку с материалами для Живой Книги нужно скопировать все видео и аудиофайлы, сконвертированные соответственно в форматы WebM и OGG (о том, как конвертировать уже писал выше).
Если видео и аудиофайлов из записи блога, с которой работаете, на вашем компьютере не сохранилось, их можно вытянуть из интернета, к примеру, дополнениями для FireFox вроде этих, после чего нужно сконвертировать все видеоролики из этой записи блога в формат WebM, а все звуковые файлы в формат OGG, и, затем, скопировать полученные файлы в папку Живой Книги.
4) После добавления изображений и gif-слайдшоу из записи блога, с которой вы работаете, в папку Живой Книги, в текстовом файле, используя поиск (Ctrl+F), находим адреса изображений, которые встречаются в тексте и заменяем эти адреса на названия соответствующих изображений внутри папки Живой Книги (Если все изображения с разрешением .jpg, ищем по фразе .jpg . В моём случае все картинки залиты на жабу, поэтому ищу по фразе imageshack.us).
Если при создании записи блога, вы просто вставляли стандартный код картинки с хранилищ изображений, адрес каждого изображения встречается дважды: вставляемая картинка - src="http://img225..1.jpg" и ссылка, для перехода к картинке из записи блога по клику - href="http://img225..1.jpg", не забывайте изменять адрес изображения в интернете на его название внутри папки Живой Книги для каждой картинки. Удобно при сохранении изображений из записи блога, давать этим изображениям имена согласно их порядковому номеру в тексте, также вначале номера можно добавлять одну из последних букв латинского алфавита, например Z (при сортировке файлов по алфавиту, добавление z* к имени картинок даёт возможность опустить изображения в папке Живой Книги ниже основного файла .html).
Фрагмент кода из блога, соответствующий вставленному изображению, и этот же фрагмент, исправленный под оффлайн-версию записи блога (Живую Книгу) смотрите ниже:
5) Для возможности вставлять в Живую Книгу видео и аудиоматериалы, вам нужно скачать архив с плеером LeanBack Player с официального сайта. После того, как извлечёте содержимое этого архива на компьютер, вам нужно скопировать в папку Живой Книги 2 файла - leanbackPlayer.default.css из папки css.player и leanbackPlayer.pack.js из папки js.player.
После этого, в текстовом документе над которым работаете нужно заменить коды видеороликов, встроенных в блог из YouTube или других видеохранилищ, а также коды звуковых файлов, добавленных в запись блога с помощью Yandex Music и других аналогичных сервисов на код плеера LeanBack Player, который есть на сайте проигрывателя в разделе "документация", вставив в качестве адреса видео или аудиофайла, название соответствующего видеоролика или звукового файла, который вы уже сконвертировали в форматы WebM и OGG (для видео - у файлов расширение .webm, для аудиофайлов - .ogg).
Для удобства, ниже привожу коды для вставки видео и звукового файла в Живую Книгу с помощью проигрывателя LeanBack Player:
Вставив код для добавления в Живую Книгу звукового файла или видео, встроенного в LeanBack Player, вам нужно задать актуальное Имя файла (вместо фразы Имя файла). Также, вы можете выбрать подходящее для видео разрешение (параметр width - ширина видео, параметр height - высота видео).
После того, как внесёте все изменения, о которых писал выше, в текстовый файл, проверите наличие в папке Живой Книги всех изображений, gif-слайдшоу, видео и аудиороликов подходящих форматов, а также проверите наличие служебных файлов LeanBack Player - leanbackPlayer.default.css и leanbackPlayer.pack.js, можно смело сохранять текстовый файл, с которым вы работали в формате .html.
Для этого, в блокноте:
нажмите кнопку Файл -) Сохранить как... -) переключатель Тип файла установите на Все файлы, в поле имени файла введите Название_Живой_Книги.html -) нажмите кнопку Сохранить.
После этого можете проверить, что получилось, запустив html файл, который только что создали в любимом браузере.
Также, у вас есть возможность выложить вашу книгу в интернет, заархивировав папку с вашей Живой Книгой и залив получившийся архив, например, в свой аккаунт на dropbox (вставил реферальную ссылку, вдруг кто захочет зарегистрироваться по моему инвайту на dropbox -) дают 500Мб дополнительного места и пригласившему и приглашённому). Тему работы с Dropbox постараюсь подробнее описать в одной из следующих тем, удобность этого сервиса состоит в том, что у вас есть возможность получать прямые ссылки на видео, аудио, текстовые материалы и другие файлы, что часто добавляет удобств и комфорта.
Текст всех вставок кода в Живую Книгу, которые приводил в этой теме одним файлом, смотрите по этой ссылке.
Тем, кому интересна яркая, оригинальная и концентрированная подача информации в контексте обучения могут пригодиться мои инструкции по этой тематике:
- XnView - удобная программа для создания коллажей и панорамной склейки фотографий
- Создание коллажа из кадров видеоклипа в Windows
- Создание коллажей в Linux
- Ulead GIF Animator - удобная программа для создания GIF-анимации
- Конвертация видео и аудиоматериалов в формат, совместимый с HTML5 (WebM, OGG)
- Выбор удачного шрифта с Кириллицей. Внешний вид оных шрифтов для сравнения
Оффлайн-версию инструкции по созданию Живой Книги в формате HTML5 качаем здесь:
- Видео в формате WebM, смотреть которое можно с помощью VLC Media Player или Media Player Classic из K-Lite Mega Codec Pack:
https://www.dropbox.com/s/i1ic51skngiu2c2/HTML%20as%20Multimedia%20Book.webm
Прямая ссылка
Размер: 64.7 Мб
MD5: C70816026F4139AC524003DCC88816D8 - HTML-версия в архиве с возможностью просматривать видео при наличии последней версии FireFox, Opera или Google Chrome:
https://www.dropbox.com/s/pruh85i8kg4e87a/HTML5%20as%20Multimedia%20Book%20-%20Russian%20Manual.rar
Прямая ссылка
Размер: 63.6 Мб
MD5: 8CBB25E5A0A11D12E48F2096EE990D2E
Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!
Спасибо всем за внимание, надеюсь, инфа изложенная в этой теме была полезной.
Добавил оффлайн-версию этой инструкции для возможности почитать приведенную здесь информацию без подключения к интернету.
ОтветитьУдалитьВынес отдельной статьей инструкцию по конвертации видео в формат WebM, а также по конвертации MP3 и FLAC в формат OGG. Почитать эту инструкцию, а также скачать оффлайн-версию этой инструкции можно здесь:
ОтветитьУдалитьКонвертация видео и аудиоматериалов в формат, совместимый с HTML5 (WebM, OGG)
Скоро вынесу отдельной темой создание коллажей.
ОтветитьУдалитьБудет фрагмент видео из этой темы + текст с картинками по виндовым прогам + хочу описать одну или две программы для создания коллажей в Ubuntu 12.04.
С видеокартой ATI Radeon X1200 в среде Ubuntu 12.04 (взятой из коробки, без урезания графических наворотов) снимать видео с экрана в нормальном качестве не получается (в 7ке и XP с этим проблем нету, обучающие видеоролики этого блога делал как раз с этой встроенной видеокартой). Поэтому по линуксовым прогам будут только картинки с текстом (возможно ещё слайдшоу). Отдельная темка о создании коллажей в Win и Linux у меня сейчас с высоким приоритетом, постараюсь скоро выложить её в блоге.
Меня тут один солнечный ролик в последнее время энергией подзаряжает, получается работать даже поздней ночью :)
ОтветитьУдалитьМожет и вам чем поможет, взбодрит или сподвигнет на подвиги:
http://www.youtube.com/watch?v=BMRRZyZeM34
Сделал по мотивам этого видеоклипа с хороводами несколько коллажей, а также на этой же стремительной волне кратко описал процесс создания одного вновь созданных коллажей. По мне получилось довольно информативно, если заинтересует книжица о коллажных фишках, милости прошу:
Создание коллажа из кадров видеоклипа
Также вас может заинтересовать моя тема по кириллическим шрифтам. Я там вынес для сравнения 61 разный шрифт, поддерживающий кириллицу, и разместил их рядом для наглядности:
Выбор удачного шрифта с Кириллицей. Внешний вид оных шрифтов для сравнения
Добавил полезных ссылочек внизу этой инструкции.
ОтветитьУдалитьТакже, читайте мою новую инструкцию по созданию коллажей в среде Linux, которую добавил буквально сегодня утром. Комбинация фишек GIMP и Fotowall даёт возможность создавать реально красивые вещи!
На тему подачи информации, нашёл на Хабре ещё один интересный способ, который возможно буду также использовать на Tigrik.org - слайдшоу, залитые на Slideshare.Net (в виде PDF-документа - созданного из картинок с помощью PDF-Tools, или в виде презентаций, созданных в PowerPoint или LibreOffice Impress). В бесплатной версии аккаунта SlideShare.Net, правда, есть ограничения по разрешениям отображаемой области встраиваемой презентации, но в принципе это дело терпимое (тем более вы всегда можете раскрыть презентацию на весь экран, нажав соответствующую кнопочку в правом нижнем углу презентации в миниатюре).
ОтветитьУдалитьПлюсом такого способа вставки слайдшоу по сравнению с GIF-анимацией является то, что в GIF время отображения одного кадра слайдшоу я подбираю по своим ощущениям, а если вставлять через SlideShare.Net, там вы листаете кадры вручную, знакомиться с содержимым каждого кадра можно неспешно и вдумчиво.