Создавать веб-комикс на основе гипертекста – это совершенно новый подход к комиксостроению, который способен перевернуть все ваше представление о веб-комиксах как таковых. Теперь каждый выпуск – это не статичная картинка, а HTML-документ, с которым вы вольны обращаться как хотите, а полет вашей фантазии больше не ограничен рамками рабочего полотна графического редактора.
Но обо всем по порядку. С тех пор как я сделал HTWC (что расшифровывается как Hypertext webcomics), чтобы не быть голословным, а подкрепить концепцию живым примером, многие оценили задумку, посчитали ее по крайней мере любопытной, но мало кто углядел в ней целую революцию жанра. В блоге «Авторского Комикса» я уже написал статью под названием «Гипертекстовый веб-комикс: теория», дабы не повторяться, хабратопик я посвящу технической стороне вопроса.
Веб-комикс выглядит вроде-бы как обычно:
Но если мы посмотрим в исходный код страницы, то не обнаружим привычного тэга IMG с адресом картинки, вместо него будет HTML-код:
Чтобы лучше понять структуру, можно подсветить все тэги:
Как видите, для каждого кадра комикса отведен собственный блочный элемент, внутри которого абсолютно позиционируются персонажи (в виде изображений) и блоки с текстами (в виде текста).
Скромный CSS-файл, которым все это управляется можно посмотреть здесь.
Вы спросите, зачем все это нужно, если комиксы проще делать по старинке простыми картинками? Много зачем: возможности открываются поистине неисчерпаемые. Я, пожалуй, начну составлять список без уверенности, что смогу перечислить хотя бы половину новых возможностей:
Главный недостаток только один: нужно знать HTML и CSS. При чем если вы уже матерый верстальщик, не надо довольно улыбаться – при создании комикса это не освобождает вас от обязанности хорошо рисовать и проявлять творческую смекалку. Как бы то ни было, важнее всяких навороченных технологий в веб-комиксе всегда будет интересный сюжет, яркие персонажи и смешные диалоги. А гипертекстовый веб-комикс – это своеобразный синтез комикса классического и интернет-технологий, при чем наличие второго никогда не скроет недостаток первого.
Но обо всем по порядку. С тех пор как я сделал HTWC (что расшифровывается как Hypertext webcomics), чтобы не быть голословным, а подкрепить концепцию живым примером, многие оценили задумку, посчитали ее по крайней мере любопытной, но мало кто углядел в ней целую революцию жанра. В блоге «Авторского Комикса» я уже написал статью под названием «Гипертекстовый веб-комикс: теория», дабы не повторяться, хабратопик я посвящу технической стороне вопроса.
Взгляд внутрь
Веб-комикс выглядит вроде-бы как обычно:
Но если мы посмотрим в исходный код страницы, то не обнаружим привычного тэга IMG с адресом картинки, вместо него будет HTML-код:
<div class="htwc"><div class="inner"> <h2>HTWC</h2> <div class="subh">Первый в мире веб-комикс на HTML и CSS</div> <div class="name"><b>#07</b> — Особенности восприятия</div> <div class="line"> <div class="frame w33"><div class="border"> <div class="speech" style="bottom:140px; left:15px; right:15px">Здесь первый кадр занимает треть площади, второй - остальные две.<div class="tail"></div></div> <img src="htcomics/pers/chief.gif" height="64" alt="Шеф" style="bottom:30px; left:90px;"> </div></div> <div class="frame w66"><div class="border" style="background:#dff;"> … </div></div> </div> <div class="copyright">© 2009, <a href="http://kaa.a-comics.ru/"><b>Gravedigger</b></a>, <a href="http://kaa.a-comics.ru/htcomics/">http://kaa.a-comics.ru/htcomics/</a></div> </div></div>
Чтобы лучше понять структуру, можно подсветить все тэги:
Как видите, для каждого кадра комикса отведен собственный блочный элемент, внутри которого абсолютно позиционируются персонажи (в виде изображений) и блоки с текстами (в виде текста).
Скромный CSS-файл, которым все это управляется можно посмотреть здесь.
В чем суть
Вы спросите, зачем все это нужно, если комиксы проще делать по старинке простыми картинками? Много зачем: возможности открываются поистине неисчерпаемые. Я, пожалуй, начну составлять список без уверенности, что смогу перечислить хотя бы половину новых возможностей:
- Теперь вы можете вставлять ссылки прямо в баллоны с текстом (спичбаблы)
- Ссылки можно накладывать вообще на любой элемент комикса
- Этим возможно реализовать нелинейную структуру выпусков: разные ссылки ведут к разным сюжетным развилкам
- При помощи Javascript можно привнести в комикс еще больше интерактива
- Гипертекстовый веб-комикс на 100% индексируется поисковиками (оптимизаторы, привет!)
- Комиксы в формате HTML весят меньше чем картинки, за счет чего быстрее грузятся и экономят трафик
- Многократное использование изображений позволяет экономить еще больше (кэширование)
- Гораздо проще исправить ошибку в HTML-документе, чем в изображении
- Переводить гипертекстовый комикс на другие языки проще легкого: достаточно задействовать автоматический переводчик, да и живые переводчики скажут вам большое спасибо.
Главный недостаток только один: нужно знать HTML и CSS. При чем если вы уже матерый верстальщик, не надо довольно улыбаться – при создании комикса это не освобождает вас от обязанности хорошо рисовать и проявлять творческую смекалку. Как бы то ни было, важнее всяких навороченных технологий в веб-комиксе всегда будет интересный сюжет, яркие персонажи и смешные диалоги. А гипертекстовый веб-комикс – это своеобразный синтез комикса классического и интернет-технологий, при чем наличие второго никогда не скроет недостаток первого.
Ссылки:
- HTWC (Hypertext webcomics) — собственно, сабж.
- «Гипертекстовый веб-комикс: теория» — для полного погружения в тему
