Вёрстка хабрадайджеста

    imageЯ никогда не делал электронных журналов, в связи с чем хотел бы посоветоваться с хабрасообществом на предмет вёрстки PDF-журнала habradigest. Всё, что набрано оранжевым — от номера к номеру будет менять цвет.

    Скачать файл-пример с несколькими страницами можно отсюда. Ссылки в примере некликабельны, в дальнейшем это будет исправлено. В содержании номера все заголовки также будут активными.

    image
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 76
    • +3
      Прикольно. Правда не представляю, как его использовать, но слабость к таким штукам всегда была :).
      Только увеличь межстрочный интервал немного, и между колонками расстояние — сливается текст.
      • 0
        примем к сведению, спасибо
        • 0
          Привет! Есть некоторые сложности с pdf-журналами, когда-то я сам изучал этот вопрос, поэтому могу посоветовать следующее:
          — отказаться от многоколоночной вёрстки, либо верстать в 2 колонки, такие тонкие колонки предназначены для придания активности тексту, они сбивают читателя. Т. е. характер информации — спокойный и информативный не соответствует таким узким строкам! Поэтому либо 2 колонки, либо вообще без них.
          — посмотри на вёрстку дайджеста на revision.ru — очень крутая удобная вёрстка, только нужно найти номер, где текста больше.
          — текст «habradigest #1 • сентябрь 2008» должен размещаться в верху и # нужно поменять на
          — у pdf издания не предполагающего издания печатного нумерацию страниц я бы делал с одной стороны.
          — не расставлены заголовки для навигации посредством просмотрщика (Adobe Acrobat, Foxit Reader), там только page1, page2 и т. п.
          С уважением!
          • 0
            Спасибо за советы, по-настоящему полезные.
        • 0
          Только что хотел написать то же самое. Как то очень тесно.
          • 0
            ага, первое что бросается в глаза. увеличить межстрочный интервал и расстояние между колонками, текст колонок выравнивать в оба края, поконтрастней сделать плашку под фрагменты кода.
            • 0
              Спасибо, учтём. Плашка делалась без проверки на выводе офисного монохромного лазерника. После тестовой распечатки стало ясно, что прозрачность нужно уменьть раза этак в два-два с половиной.
            • –5
              ЗАЧЕМ ИЗОБРЕТАТЬ ВЕЛОСИПЕД?

              Сделай лучше его белым — как и оригинальный хабр!

              Думаю ВСЕ БУДУТ ТЕБЕ БЛАГОДАРНЫ!!!
              • +2
                Таки зачем вы орёте?
                • +1
                  драммер наверное…
            • +1
              Можно было бы и в бумажном варианте выпускать ;)
              • +1
                Было время когда печатные издания ломанулись в интернет, и все дружно принялись пророчить быструю смерть полиграфии, теперь, похоже, наметился новый виток эволюции человечества, интернет-издания уходят в печать… большого смысла лично для себя я в этом не вижу, но факт любопытный
                • +1
                  Мне комфортнее читать с бумаги, чем с монитора.
                  Относительно хабра: некоторые статьи не читаю, некоторые недостаточно внимательно, а вот была бы выборка «лучших» выходящая в печатном варианте, я бы наверное покупал и читал уже внимательнее на досуге.
                  • 0
                    >>выборка «лучших»

                    лучшее для всех, далеко не всегда совпадает с лучшим для меня, вот если бы каждому отпечатывали его хабраленту хотя бы, вот это было бы интереснее)

                    и есть еще одна важная деталь, в печатном издании отсутствует возможность обсуждения написанного, конечно можно обсудить статью с друзьями или коллегами, но есть большая вероятность что они ее не читали… и где бы мы еще с вами так мило подискутировали, сидя, быть может, даже в разных городах, листая страницы журнала?)
                • 0
                  Не забывайте, в полиграфии наступает эпоха on-demand, скоро можно будет печать такие журналы в количестве от одного, да еще и заказывать себе подборки. Редакторы и создатели электронных версий будут очень востребованы.
                • +2
                  предлагаю отказаться от желгото — отвлекает внимание и глаза утомляются.
                  • 0
                    можете подробнее раскрыть ваши впечатления в части цвета?
                    • 0
                      Желтый цвет яркий, если и выделять им, то какае-то важные вещи, которые суммируют информацию, своего рода коротенькие итоги.

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

                      Содержание сделать на отдельной странице, т. к. мы при его помощи будем искать информацию, статьи и прочее, а колонка слева, немного отвлекает — ёё можно вынести так же отдельной страницей, как вступительное слово редактора (и прочее).

                      Идея с нумерацией страниц мне понравилась! Буду ждать выпуска вашего журнала, успехов Вам.
                      • 0
                        Колонка слева от содержания — вступительное слово редактора, оно обычно небольшое и на отдельной странице будет занимать всего около 10% пространства. Кроме того, слова редактора должны быть на видном месте — они определяют характер всего номера и, на мой взгляд, вполне уместны рядом с содержанием.
                  • 0
                    в две колонки было бы лучше
                    • 0
                      а что именно смущает в трёхколоночной вёрстке?
                      • +1
                        Поддерживаю, 2 колонки удобнее читать, а так получилось текста в строке мало, глаза постоянно туда-сюда бегают, да ещё после прочтения до конца страницы приходится возвращаться к началу страницы на 1 раз чаще.
                        • 0
                          И от себя могу посоветовать вставить более четкое изображение на обложку, а то мне пережатые jpeg или растянутые изображения всегда настроение портят. В идеале вектор.
                          • 0
                            Поддерживаю по поводу обложки. То же изображение обрисовать в векторе…
                            • 0
                              Замечание по обложке принято. В связи с небольшим количеством картикок в статьях вполне возможно не экономить на спичках и не пережимать изображение на обложке.
                              • 0
                                Каждое конкретное изображение можно оптимизировать по своему, можно вставить вобще в формате png, но оптимизировать его так, что весить он будет мало. На изображении к обложке, например, очень много повторяющихся одноцветных областей, следовательно, изображение хорошо поддаётся оптимизации.
                          • 0
                            Попробуем подумать в двух направлениях:
                            — либо ввести двух колоночную вёрстку и увеличить кегль — может на печати выйти слишком крупно, как с;
                            — оставить три колонки, но уменьшить кегль для повышения удобочитаемости и расширения количества знаков в строке — этот вариант может быть более предпочтительным, т. к. на печати будет оптимальный кегль, а при чтении с экрана можно увеличить масштаб отображения по ширине дисплея. Последнее требует дополнительной оценки и тестирования на разных разрешениях (привет веб-вёрстке).
                            • 0
                              А для чего увеличивать кегль при двух колоночной вёрстке?
                              • 0
                                С увеличением ширины колонки увеличится и количество знаков в строке. Это надо компенсировать, чтобы сохранять удобочитаемость.

                                Слишком широкие строки трудно читать, на этот счёт в издательском деле существуют специальные гигиенические нормы.
                          • 0
                            Если в 2 колонки, то можно безболезненно увеличить размер шрифта. Было бы здорово, если бы увеличили шрифт. Дело в том, что такие издания удобно распечатывать и читать тогда, когда компа под рукой нет (знаю, существует куча устройств для этого, но многие люди предпочитают бумажный вариант). Распечатайте первый номер и Вы поймете, что читать тяжеловато.
                            • +1
                              трехколоночная верстка текстов — оптимальна для журналов стандартного формата (какой у вас будет, кстати?). просто в вебе она выглядит непривычно, зато если взять журнал в руки — никто не почувствует дискомфорта.

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

                              возможно, имеет смысл дать на обложке какие-то выносы из контента.
                              • 0
                                Код штука хорошая, только штрих-код здесь не самый лучший вариант.
                                Лучше закодировать адрес «папиркаста» при помощи QR-кода.
                                • 0
                                  Ну можно и так :)
                                  • 0
                                    Выше предложили интересную идею со штрих-кодом, которую вы развили до QR-кода :-)
                                    У меня есть только один вопрос — что в нём кодировать?

                                    Лично мне пока недостаточно ясно его функциональное назначение в контексте нашего дайджеста. Если только декоративное в качестве пародии на глянцевые журналы.
                                    • 0
                                      Можно ссылку на сайт и короткое описание заQRить
                                      • 0
                                        Возможно, я чего-то не понимаю, но чем этот код считывать и как интерпретировать? Если распечатать — нужен сканер, а в случае с пдф мне совершено непонятно.
                                        • 0
                                          На мобильных телефонах есть программы которые читают QR и любой, у кого есть такая программа, сможет запомнить адрес понравившегося дайджеста, если ему попалась только распечатка или кусок распечатки. Я бы сделал QR для популяризации самого QR.
                                • 0
                                  Мы не планируем издавать дайджест на бумаге, тем не менее при вёрстке мы планируем учесть тот факт, что многие распечатывают его на монохромных лазерниках на стандартной офисной бумаге.

                                  Разумеется, идеальным вариантом была бы вёрстка двух версий, печатной и экранной, но на данном этапе мы не можем себе этого позволить из-за двойных трудозатрат по времени.
                            • +3
                              Если бегло:
                              Вместо красной строки (отступ в первой строке абзаца) увеличить расстояние между абзацами.
                              Увеличить межстрочное расстояние
                              Избавиться в содержании от пунктирных подчеркиваний и подчеркиваний в принципе
                              Поработать со шрифтами
                              Поработать с номерами страниц в оглавлении
                              Ссылки можно сделать оттенком синего
                              Основной шрифт желательно изменить
                              Вручную переформатировать колонки, чтобы они не были такими «шаткими» как сейчас
                              Расстояние между блоками
                              Кратко.

                              В целом хорошее начинания.

                              ЗЫ в чем верстаете?

                              • 0
                                Промахнулся. Следующий комментарий был адресован вам.
                              • +2
                                Вместо красной строки (отступ в первой строке абзаца) увеличить расстояние между абзацами.

                                То есть вы предлагаете верстать на американский манер?

                                Ссылки можно сделать оттенком синего

                                Единственный, если не ошибаюсь, урл в тексте набран синим

                                Вручную переформатировать колонки, чтобы они не были такими «шаткими» как сейчас

                                вы о левом флаге? я не совсем понял

                                Расстояние между блоками

                                Вы имели ввиду расстояние между блоками Заголовок-Подводка-Текст?

                                Хотелось бы услышать ваше мнение о шрифтах в более развёрнутой форме.

                                Верстаем в Индизайне.
                                • +1
                                  И я тож не в ту ветку написал :) ниже это ответ.
                                  • 0
                                    А я бы рекомендовал увеличить отступы у красной строки, если использовать её.
                                  • 0
                                    «То есть вы предлагаете верстать на американский манер?» в данном случае, да.

                                    «Единственный, если не ошибаюсь, урл в тексте набран синим» — и черным сайт издания

                                    «вы о левом флаге? я не совсем понял» не совсем я про ручную обработку переносов, межбуквенного расстояния и тд (это скорей уже ретушь при наличии времени)

                                    «Вы имели ввиду расстояние между блоками Заголовок-Подводка-Текст?» в том числе а так же в принципе есть жесткая потребность в «воздухе»

                                    По поводу шрифтов – ближе к вечеру смогу написать так как на работе особенно не развернешся.
                                    Так же если есть возможность выложите индизайновский макет мож накидаю прототипчик своего виденья :)

                                    • +2
                                      Мне очень понравилось оформление предыдущих двух журналов — в стиле Хабра. Оранжево-черное оформление очень сильно отвлекает внимание и долго читать журнал в таких красках утомляет глаза. ИМХО.

                                      Пользуясь случаем, хотел сказать спасибо большое за журнал. Предыдущие два выпуска скачал, распечатал и брал с собой почитать в дорогу. Очень удобно. Еще раз спасибо
                                      • 0
                                        пожалуйста, очень приятно слышать такой отзыв
                                        вдохновляет
                                      • +1
                                        Сделали бы уже на флеше электронный журнал с возможностью перелистывания и скроллинга. Текст очень мелкий для чтения.
                                        • +1
                                          Имхо, ПДФ гораздо универсальнее, кто чем хочет, тем и читает. Опять же, для КПК переделывать не надо.
                                          • 0
                                            для КПК можно сделать текстовую версию тогда уже )))

                                            FLASH тоже достаточно универсален ;)
                                            • 0
                                              C одной стороны, в качестве текстовой версии и сам Хабр очень даже неплох, с другой — нам бы наладить для начала регулярный выпуск хотя бы ПДФ-версии. А там и о других форматах можно подумать будет.
                                          • 0
                                            такое вам пойдет? существует с пилотного выпуска
                                            issuu.com/xaoccps/docs/habradigest?mode=embed&documentId=080911153952-c8e2c0a8019945c7ba6b9b8ce4384ac7&layout=grey
                                          • +1
                                            ссылка на картинке битая
                                          • +2
                                            Круто. Меня всё чаще посещает мысль о бумажной версии Хабра, но с этим не всё так просто, к сожалению
                                            • 0
                                              Замечательная задумка.
                                              И заранее прошу прощения за непрофессиональность предложений. Вот мои измышления по поводу.

                                              1. Глаз при чтении ориентируется на ширину строки. При разной ширине строки (тем более в колоночном исполнении) глаз постоянно «срывается» со строки.
                                              Было бы замечательно, если бы всё же строки были выравнены по ширине, тем более, что в тексте используются переносы.
                                              На заглавной странице текст как раз выровнен по ширине столбца, используются переносы. На следующих страницах переносы тоже есть, а вот с выравниванием по ширние — проблемы. Надо бы решить:
                                              — либо переносы + выравнивание по ширние,
                                              — либо без переносов + без выравнивания по ширние.
                                              Вариант с переносами без выравнивания — не хорошо.

                                              2. Пожелание: если это электронное издание, то почему бы не вставить ссылки на статьи в оглавлении?

                                              3. По поводу обсуждавшегося ранее оформления абзацев.
                                              Итак, у нас есть две возможности для оформления: русская традиция (давайте назовем ее так, настоящего, «правильного» названия я не знаю). В этой традции, насколько мне известно, нет особой паузы между абзацами., но при этом каждый абзац начинается с красной строки.
                                              И «американской» традиции — абзацы отделяются друг от друга отступом, без красной строки.

                                              По моему мнению, главный недостаток представленной верстки абзацев — отсутствие хорошо различимого окончания абзаца. Выходов два: либо увеличить размер отступа красной строки, либо отказаться от «русской» верстки в пользу «американского» разделения абзацев пробелами. Мне это видится более предпочтительным вариантом в связи с тем, что длина строки колонки мала и красная строка мало выделяется на фоне текста. Пожэтому межабзацный отступ был бы более эффективен как визуальный разграничитель абзацев.

                                              Надеюсь, мое мнение поможет улучшить издание.
                                              • 0
                                                Выходов два: либо увеличить размер отступа красной строки, либо отказаться от «русской» верстки в пользу «американского» разделения абзацев пробелами. Мне это видится более предпочтительным вариантом в связи с тем, что длина строки колонки мала и красная строка мало выделяется на фоне текста.

                                                Имеется в виду, что «американский» формат мне видится более предпочтительным.
                                              • 0
                                                В целом очень симпатично получилось! По деталям (все имхо :)
                                                1) На титульнике логотип можно было бы поднять чуть повыше, а статусную строку чуть от логотипа отбить.
                                                2) В оглавлении вступление слишком прижалось к списку статей и страдает щетиной (много переносов подряд).
                                                3) Лично мне трехколоночная верстка нравится, но учитывая, что это (пока) электронное издание, гонять лист туда-сюда действительно не очень удобно. Да и на верстку текста приходится тратить больше времени. Кроме того, техническая ориентированность многих статей (читай, много примеров кода и т. п.) требует широких колонок.

                                                А черная обложка отлично контрастирует с белым фоном сайта, не слушайте никого :)
                                                • 0
                                                  Изучал обложку, появилась идея: вместо звездочек в статусной строке вставить мини-логотипы Хабра :)
                                                  • 0
                                                    используя в одной композиции два иденифицирующих элемента мы натыкаемся на избыточность
                                                  • 0
                                                    считаю, что не стоит каждый номер красить в свой цвет — тогда у читателей не будет сформировавшегося облика журнала. да и с постоянным набором цветов проще верстать журнал ;)
                                                    • +4
                                                      По обложке.
                                                      1. Название нужно поднять чуть выше.
                                                      2. Вместо # нужно писать №.
                                                      3. Когда номер станет двузначным, не будет помещаться туда, куда вы его поместили.
                                                      4. Поработайте со шрифтами. И с цветами. Советую вам название сделать одним цветом, а всё остальное, под ним — другого.

                                                      Вторая страница у вас пустая. Почему?

                                                      Третья страница.
                                                      1. TOC так не принято делать. Или уж бы подписывали рядом с номером, что это страница. (стр.) и отделили бы сам номер либо многоточиями, либо "-".
                                                      2. Шрифты на данной странице, уж простите, говно. Уберите к чертям полужирность.
                                                      3. Колонка редактора слишком близко расположена к «Содержанию».
                                                      4. Буквица дерьмовая. Не должна она быть намного выше высоты колонки.
                                                      5. Определитесь с тем, как вы будете писать название языков программирования и технологий — либо всё строчными, либо всё прописными.
                                                      6. К сведению. Обложка — это первая страница. Вторая страница — это вторая страница, а содержание у вас уже на третьей странице. И так далее.

                                                      Четвёртая и пятая страницы.
                                                      1. Сразу по тексту. Текст в колонке как правило делается на всю ширину колонки, а не с «рябым» правым краем. Тем более, что у вас в тексте уже расставлены переносы.
                                                      2. Чтобы не вдаваться в типографские термины, сделайте межстрочное расстояние в вашем тексте побольше, а то всё слипшимся выглядит.
                                                      3. Советую вам делать примеры кода и цитаты (то, что у вас жёлтым) на две или полторы колонки.
                                                      4. Определитесь с тем, что вы делаете со ссылками на сайты. Либо вы их выделяете цветом, подчёркиванием и etc, либо этого не делаете.

                                                      Кроме того, советую вам ознакомиться с тем, какие поля у вашего журнального листа должны быть — я говорю об отступах, ибо на чётных и нечётных страницах они разные, если, конечно же, вы планируете что ваш журнал будут распечатывать на бумаге и читать так, как читают обычные журналы/газеты.
                                                      Я перечислил лишь то, что сразу бросается в глаза, и а ещё мелочей очень много.
                                                      • +2
                                                        Быстрый набросок вектор + растр (посто-бработка) + «авторское»
                                                        то как можно было бы поработать над обложкой, не идеал но как скетч самое то

                                                        • 0
                                                          очень хорошо сделано. у нас, к сожалению, времени на это не хватило. на всё про всё было почти три часа рабочего времени, результатом стал предлагаемый выше пдф
                                                          • +2
                                                            благодарю. да, 3 часов не хватит даже на обложку :) в принципе если выпускать издание раз в месяц то можно все успеть + подвести бизнес модель…
                                                            • 0
                                                              Что касается бизнеса — проект создавался как некоммерческий. Насколько я понимаю, хабраправительство санкционировало его именно в таком виде.

                                                              Впрочем подробности согласований может рассказать только отец прожекта, камрад XaocCPS. Лично я об этй стороне хабрадайджеста ни сном ни духом.
                                                              • +1
                                                                по моему очевидно, что коммерческая сторона возможна только при не противлении всех сторон, а их тут уже больше десятка :)
                                                                • +1
                                                                  Реклама, бумажная рассылка малых тиражей, сборка тематических тиражей и другой эксклюзив…
                                                                  По поводу непротивления сторон: соглашение, договоры и тд…

                                                                  Всё в ваших руках ;) чирс.
                                                                  • 0
                                                                    два предложения на словах и непомерное море работы на деле
                                                                    для начала, пусть хотя бы накопится постоянная база читателей
                                                          • 0
                                                            Дельно, не полное 3d конечно, но больше здесь просто не нужно. Представленная выше картинка — компромисс между временем и качеством, и это соотношение — почти идеально (имхо).

                                                            Я, в свою очередь, делал бы подобное сразу в 3d max (например), получилось бы быстрей и геометрически правильней, но если знать конечно, что хочешь в итоге (ключевая вещь).

                                                            В любом случае — «картинка» в разы лучше, жаль, что у авторов «оригинала» времени не было в достаточном кол-ве. Хотя… Если действительно хочешь, если «прёт» — сделаешь и за 5-ть минут. Опять же — на истину не претендует, из опыта. =)

                                                            • 0
                                                              вообще-то это фото, извращённое спецсофтом. фоткались простые шестерёнки — никакого 3Д
                                                          • –2
                                                            А как с авторскими правами? Согласно пользовательскому соглашению автор не передает права на свою публикацию Тематическим Медиа (там вообще нет пункта, касающегося прав на публикуемую информацию, за исключением одного косвенного: «Пользователь осознаёт и соглашается с тем, что размещённая им информация может быть использована поисковыми или другими автоматизированными сервисами и иными способами»), что означает сохранение прав за автором и необходимость получать согласие на публикацию материала у каждого автора в отдельности.
                                                            • 0
                                                              Мы используем размещённую информацию «иным способом». Кроме того, у всех авторов редактор спрашивает разрешение на использование топика в дайджесте.
                                                              • –2
                                                                «иным способом» в суде не пройдет ;). Ну, а то, что у авторов разрешения спрашиваете — это хорошо.

                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.