в какой программе делается верстка
Программы для вёрстки, кроме InDesign
Время чтения:
PageMaker, Aldus corp.
Какие ещё есть программы для верстки, помимо InDesign, и почему он стал так популярен? Чтобы подробнее ответить на этот вопрос начнём немного издалека.
Настольные издательские системы (DTP, desktop publishing) — ведут свою историю из 1970‑х, когда компания Ксерокс активно занималась разными экспериментальными разработками. Есть спорное мнение, что именно настольные издательские системы начались в 1983 году — с программы, разработанной Джеймсом Дэвайзом для общественной газеты Филадельфии.
В 1984 выходит Программа Type Processor One работала на PC, и использовала видеокарту для вывода WYSIWYG интерфейса. (Разбирать TeX и LaTeX, более поздние FrameMaker и прочие тут не будем.)
Рынок издательских систем буквально взорвался, когда в январе 1985 Apple представили свой принтер LaserWriter, а позже — в Июле — Aldus (впоследствии Aldus была поглощена Adobe, как и Macromedia в 2004 — та самая, которая выпустила Flash, FinalCut, и прочие) представили программу PageMaker, которая быстро стала стандартом индустрии, в 1985 даже обогнав Майкрософт Ворд в этом сегменте. Ещё была Ventura — впоследствии Corel Ventura, и пара других.
В 1990‑х годах QuarkXPress (первая версия вышла на рынок в 1987 году) приобрел широкую популярность в области профессиональной верстки и полиграфического дизайна благодаря простоте использования, неприхотливости системных требований, поддержке векторных шрифтов и других широко востребованных в отрасли возможностей.
На момент появления своего основного конкурента Adobe InDesign в 1999 году, QuarkXPress, несмотря на постоянную критику за высокую стоимость лицензии и довольно долгий период внедрения инноваций, де-факто являлся промышленным стандартом, покрывая около 90% рынка.
Adobe PageMaker 7.0.
Выпуск пятой версии в 2002 году привел к конфликту с фирмой Apple, поскольку релиз все еще не поддерживал Mac OS X, в то время как Adobe InDesign, выпущенный на той же неделе, поддерживал.
Настальгический сплеш-скрин моей первой версии Кварка. QuarkXPress 6.5, 2004.
Одновременно с этим президент Quark Inc. Фред Эбрахими (англ. Fred Ebrahimi) выступил с резкой критикой платформы Macintosh и отметил, что тем, кто не удовлетворен работой Quark на платформе Mac, стоит попробовать что-нибудь другое.
Вследствие соперничества с InDesign, Quark стал сдавать свои позиции и был вынужден предпринять ряд шагов для того, чтобы удержаться на рынке. Впрочем, они не помогли выиграть у InDesign.
Основная проблема Quark, которая стала основной причиной их проигрыша в 2000‑х — глухота компании к пользователям, и действительно сильно завышенная на тот момент цена. Вторая — как следствие — техническое отставание, которое компания-производитель здорово сократила в 2018 году, однако все же не смогла окончательно ликвидировать. Были ещё причины, связанные именно с качеством производства, но их можно отнести к первому пункту.
Однако есть распространённое мнение, что с введением в Adobe системы подписки с версии CC, и постепенным полным отказом от бессрочных лицензий, Adobe стала вести себя так же, как и Quark когда-то. Мое личное мнение заключается в том, что для Адоби это совсем не ново (см. хотя бы судьбу бездарно угробленного Flash), и отсутсвие конкуренции ведёт к тому, что отпадает острая необходимость реагировать на замечания пользователей, что многие старые баги не исправляются от версии к версии, а новые функции не вводятся так же активно, как на ранних стадиях развития.
В PageMaker я стал работать, перейдя из QuarkXPress, через который в принципе вошёл в вёрстку. В то время (это была середина 2000‑х) QuarkXPress проигрывал PageMaker, и уже появился приличный InDesign. (Тут надо отметить, что с интернетом у нас в стране в это время было ещё всё очень непросто, и программы эти поступали к нам с хорошей задержкой, на CD. И было мало информации о том, что происходит в мире.)
После работы в PageMaker, InDesign — как его продолжение и замена — казался большущим шагом вперёд, он был значительно удобнее. С тех пор прошло больше 15-ти лет, и InDesign развивался стремительно почти все это время.
В определенной степени, в последних версиях это развитие замедлилось, но оживление со стороны Quark настраивает на оптимизм. Ещё очень вдохновляют нововведения в недавно вышедшей последней — на момент написания этого текста версии (CC 2018) — а именно возможность менять размеры макета и автоматически перестраивать свёрстанное содержимое в связи с этим — эта столь долгожданная функция реализована на качественно новом уровне по сравнению с предыдущем решением. Так что надежда на развитие остаётся, и конкуренция между производителями его подстёгивает.
Ну а если вы ещё не знаете InDesign в совершенстве — у нас есть курс, на котором вы научитесь профессионально верстать в нём всё что угодно. И ещё немножечко шить.
10 полезных инструментов для HTML-верстки
«Нетология» подобрала 10 полезных инструментов, которые пригодятся при верстке HTML: от текстовых редакторов до генераторов CSS.
Notepad++
Кроссплатформенный редактор, схожий с Notepad++, но обладающий множеством дополнительных функций. Подсвечивает синтаксис, автоматически сохраняет изменения в файлах, поддерживает 27 языков программирования, плагины и макросы на Python. Программа умеет запускать код без переключения в командную строку. Приложение доступно в версиях для Windows, OS X и Linux, лицензия стоит 70 долларов.
Firebug
Расширение для браузера Mozilla Firefox. Консоль и отладчик JavaScript, CSS и HTML, определяет часть кода, которая вызвала ошибку. Умеет редактировать код на стороне клиента в браузере.
PerfectPixel
Расширение для Google Chrome, которое накладывает на верстаемый сайт полупрозрачный макет. Оба изображения можно попиксельно сравнить и на ходу внести результат изменений кода. Поддерживает несколько слоев и их гибкую настройку, а также функцию блокировки, при которой все элементы на странице становятся кликабельными.
WinMerge
Удобный бесплатный инструмент под Windows для сравнения разных версий файлов, в том числе макетов верстки. Различия отображаются в визуальной текстовой форме, из которой видно, что изменилось в проекте в новой версии.
WinLess
Бесплатная Windows-программа для работы с препроцессором LESS. Он представляет из себя надстройку над CSS с дополнительными динамическими свойствами. WinLess поможет конвертировать LESS в CSS. Программа автоматически сканирует выбранную папку и выбирает файлы, которые содержат нужный код.
CSS3 Generator
Минималистичный инструмент для генерации CSS-кода под множество предустановленных задач.
Ultimate CSS Gradient Generator
Сервис для генерации градиентов. Результат сразу отображается в боковой панели в виде кода.
Livetools Ui Parade
Подборка из четырех бесплатных генераторов элементов для макета: кнопок, форм, иконок и ленточек. Результат можно выгрузить в виде кода HTML или CSS.
Программы для верстки сайтов.
Программы для верстки сайтов.
Для Вас я подобрал не только программы но и хитрости с помощью которых Вы будите верстать быстро, качественно и валидно.
Скорей всего если Вы верстаете больше года, то я для Вас не открою новых способов верстать быстро и качественно. Но возможно, даже верстальщик с опытом, возьмет на вооружение пару технологий и программ для ускорения в верстке.
Для того что бы верстать на хорошей скорости, и при этом качественно. Нужно обладать не только опытом, но и определенным набором технологий и программ. Я подобрал для Вас то что использую сам.
1. Редактор кода — думаю можно скачать бесплатно
Первая из программ для верстки сайтов, это редактор кода. В принципе подойдет любой из современных редакторов, ну т.е. я думаю, Вы логически уже пришли к тому что не стоит верстать на фрилансе или в офисе в стандартном блокноте windows или Notepad++. Все же перечислю те которые мне понравились:
Сейчас по факту у меня на пк установлены три программы для верстки, — IDE Visual Studio Code, PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:
А Sublime использую когда нужно что-то по быстрому открыть, не запуская тяжёловестную IDE.
Так же рекомендую быструю, бесплатную IDE Visual Studio Code, от microsoft. Эта ide работает тоже на всех операционных системах. Единственное что один день всё же прийдётся потратить на то, что бы выбрать плагины и настроить её под себя
2. Emmet.
Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS. Все сокращения описаны в официальной шпаргалке, — https://docs.emmet.io/cheat-sheet/
Например такой строкой:
nav>ul>li*3
По нажатию на клавишу, — «tab», — Вы получите такой код:
Или вот так например в CSS :
bg
Даст:
background: #000;
3. CSS препроцессоры.
Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтаксисом. Я использую препроцессоры потому что в них есть:
4. Grid (сетка).
Есть еще менее известные сетки, но не значит, что они хуже остальных, например:
Skeleton или
Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.
5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб
Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом. Gulp, Webpack, — это сборщик проекта для продакшена, здесь минифицируются и объединяются файлы, — HTML, CSS, Javascript. Оптимизируются и ужимаются изображения, так же можно jpeg, jpg, png, переделать в современный формат изображений, — WebP, что даст хороший прирост по скорости заргрузки страниц.
Здесь тоже есть большие боссы:
Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.
Ну и WebPack тоже сильный инструмент, но моё мнение что он больше подходит для SPA проектов, или можно сказать сборщик javascript файлов с поддержкой современных версий ECMAScript.
Gulp который я настроил, закрывает задачи на моих проектах
Так же дома на всех устройствах в одной сети я могу посмотреть в реальном времени как выглядит то что я верстаю.
Моя сборка Gulp и WebPack
6. БЭМ
Методология БЭМ от Яндекс, поможет Вам не задерживаться на том как назвать класс к данному элементу DOM. Общий принцип данной технологии, — это компонентный подход ко всему проекту, с возможностью пере использовать компоненты не только в одном проекте, но и использовать их в однотипных задачах других проектов. Основная идея состоит в том что, любой проект разбивается на блоки которые содержат элементы, и в случае если состояние элемента меняется, то у данного элемента добавляется модификатор. Ознакомится и взять на вооружение можно на данном ресурсе, — ru.bem.info
8. Ещё некоторые условия для скорости вёрстки
Так же для того что бы разработчик работал быстрее, а от скорости зависит чуть ли не весь бизнес, могу выделить ещё несколько пунктов, которые могут изначально показаться не значительными, но на самом деле это не так(поверьте мне, я уже работаю 13 месяцев).
9. Как ускорить загрузку страниц
Одним очень важных факторов, хорошей вёрстки, — это скорость загрузки страницы.
Для того что бы понять что нужно сделать что бы страницы загружалась мгновенно, есть очень хороший инструмент от Google, PageSpeed Insights. Или же можно открыть локальный инструмент Lighthouse, в консоли браузера Google Chrome. Здесь Вам будет доступен большой список того что можно оптимизировать на Вашей странице, просто берём каждый из пунктов замечаний по Вашей вёрстке, и исправляем.
Итого:
Очень надеюсь Вы возьмете на вооружение, — программы для быстрой и валидной верстки сайтов.
И да прибудет с Вами сила, чистого, масштабируемого и валидного кода Вам и Вашей комманде, если такова имеется.
10 лучших инструментов для HTML-верстки
HTML-верстальщик — это человек, который делает из графического макета работающий сайт. В работе верстальщика много рутины, к тому же важно не упустить различные мелочи и сделать работу максимально быстро. Чтобы облегчить эту задачу, разработчики придумали множество инструментов. В статье мы рассказываем про некоторые из них — выбирайте по вкусу.
Работает практически с любым редактором кода. В VSCode, например, его даже не надо специально устанавливать: он уже встроен в его функционал.
Этот плагин способен значительно сократить разработчику количество написанного текста. Эммет превращает короткие аббревиатуры в куски кода html. С ним можно быстро построить структуру страницы, написать список из множества элементов, таблицу, несколько вложенных друг в друга блоков вместе с классами. И никаких больше потерянных закрывающих скобок! Все закрывающие теги появятся автоматически.
Также Эммет может написать префиксы для кроссбраузерной верстки и даже сгенерировать “Lorem ipsum” нужной длины.
Плагин позволяет не перезагружать страницу браузера каждый раз, как вы внесли изменения в код html. Он будет следить за всеми изменениями в ваших файлах, и мгновенно показывать результат в браузере. Очень удобно, когда надо внести незначительные изменения в стилях или, наоборот, перестроить структуру блоков и принять решение, стоит ли оставлять изменения.
Браузер — еще одна вещь, без которой работа верстальщика немыслима. Естественно, у вас должно быть несколько браузеров для проверки кроссбраузерности верстки. Удобнее всего пользоваться Google Chrome или Mozilla Firefox: во-первых, это самые популярные браузеры, и во-вторых, к ним существует множество интересных дополнений, в том числе для разработчиков.
Инструмент для генерации css-кода для некоторых небольших, но трудоемких задач. CSS3 Generator может трансформировать цвет из одного формата в другой, создать css-код для тени, градиента, фильтра картинки. С его помощью можно написать код трансформации блока и сделать простую анимацию.
Цветовая пипетка. Позволяет узнать цветовой код выбранного участка любого сайта. Код можно получить в любом из цветовых форматов, используемых в разработке сайтов, сохранить его в истории и вернуться к нему еще раз в любой момент.
Еще одна полезная фича — доступ в один клик на страницу генератора градиентов от Колорзиллы. Этот сайт позволяет быстро и легко создать кроссбраузерный код для градиента любой сложности.
Разработчики придумали множество инструментов, доступных онлайн. Некоторые из них незаменимы для работы, другие облегчают работу, некоторые служат просто для развлечения или вдохновения.
Лучший бесплатный каталог шрифтов, насчитывает около 100 шрифтов на разных языках. В интерактивном каталоге можно детально изучить символы шрифта, оценить, как он будет выглядеть в разных размерах и начертаниях. Выбранный шрифт можно скачать и подключить локально, а можно сгенерировать код для подключения его с сервера Гугла.
Незаменимый инструмент, если на ваш сайт нужно добавить иконки.
Песочницы — это площадки для тестирования и демонстрации фрагментов кода HTML, CSS и JavaScript. Другие языки программирования они тоже поддерживают, как и некоторые библиотеки и фреймворки, но этот функционал нас сейчас не интересует.
В песочнице можно писать или править код и видеть изменения в режиме реального времени. Можно поделиться ссылкой на работу, и другой разработчик увидит одновременно и код, и результат. Также в песочнице можно работать над чужим кодом, форкнув его к себе.Codepen, помимо работы над собственным кодом, позволяет набраться идей и вдохновения и даже поучаствовать в коллективных челленджах. Проекты кодпен публичные, и в интерфейсе можно видеть работы других пользователей и искать интересные пены по ключевым словам.
Важный этап в работе — проверка работы написанного вами кода. Необходимо проверить, как открывается сайт в разных браузерах и при разной ширине экрана. Соответствует ли он дизайнерскому макету. Все ли его интерактивные элементы: кнопки, форма связи, ссылки работают как задумано.
Популярный инструмент для проверки качества верстки и соответствия ее макету. Существует как дополнение для любого браузера.
Perfect Pixel позволяет добавить на страницу jpg с макетом отдельным полупрозрачным слоем. Таким образом, можно сравнить точность вашей верстки и ее соответствие замыслу дизайнера.
Проверяет разметку html и css на наличие ошибок и соответствие стандартам Консорциума World Wide Web. Этот сервис не напишет за вас хороший и правильный код, но укажет на места, в которых возможны проблемы при работе кода в реальности.
В валидаторе можно проверить код по ссылке, можно загрузить файл целиком или фрагмент кода. В результате вы получите список из ошибок и предупреждений. Ошибки могут навредить работе сайта, а предупреждения показывают код, не соответствующий стандартам, с избыточными или бессмысленными элементами. Участки кода с предупреждениями могут навредить положению сайта в поисковиках.
10 инструментов для работы со шрифтами и версткой
Инструменты графического дизайна, которые мы собрали в этом материале, помогут вам работать с текстом быстрее и эффективнее.
Кроме работы с сеткой и эвристик Нильсена, веб-дизайнер должен умело использовать шрифты, грамотно верстать текст и создавать визуально сильные сайты.
Шрифты
Google Fonts
Сервис со шрифтами для личного и коммерческого использования. Здесь есть все самые популярные гарнитуры, которые можно встроить на сайт или скачать для работы в графических редакторах.
Чтобы найти необходимую гарнитуру, используйте фильтры. Вы можете посмотреть только моноширинные или только кириллические шрифты, найти семейства с определенным количеством начертаний.
Если вы хотите скачать все начертания семейства или выбрать поддержку отдельных языков, нажмите Customize и поставьте галочки напротив нужных опций. В отдельном окне скачайте шрифт на компьютер или скопируйте ссылку для вставки на сайт.
Fontstorage
На первый взгляд инструмент очень похож на Google Fonts, но на практике здесь гораздо больше функций и настроек.
Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны 492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.
Free Faces
Еще один источник малоизвестных бесплатных шрифтов, собранных на одном сайте. Если вы ищете идею для текстового логотипа или акцидентный шрифт для заголовков или цитат, загляните сюда.
Верстка и сетка самого сайта оставляют приятное впечатление.
Wordmark.it
Онлайн-сервис, который позволяет проверить начертание слова или фразы конкретной гарнитурой. Введите текст в поле, нажмите Enter и выберите, какие шрифты вы хотите сравнить.
Инструмент помогает вам быстро сравнить нужные начертания, когда вы выбираете шрифт для сайта, медиапроекта или блога. Делать то же самое в Photoshop неудобно: вам придется постоянно переключать шрифты вручную — это отнимает время.
Typeface
Инструмент для шрифтов на macOS. Программа позволяет быстро и без подключения к интернету выбрать шрифт для проекта.
С помощью сервиса вы можете систематизировать установленные шрифты по начертаниям, семействам и проектам. Создавайте теги, совмещайте их или вкладывайте друг в друга. Программа поможет тратить меньше времени на поиск нужной гарнитуры и работать быстрее.
Fontbase
Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.
Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит3 доллара в месяц, или 29 долларов в год.
Fontbase помогает быстро и эффективно управлять шрифтами.
Верстка
Типограф
Инструмент для верстки: расставляет неразрывные пробелы, правильные кавычки и тире. Это экономит дизайнеру время при форматировании больших объемов текста: статей, лонгридов, новостей или записей в блоге.
Типографская раскладка Ильи Бирмана
Незаменимый инструмент дизайнера для быстрого набора или вставки правильного тире, математического символа, ударения или глифа. Его разработал Илья Бирман, арт-директор бюро Артема Горбунова.
Ранее, чтобы поставить символ, нужно было знать наизусть код этого символа. Например, открывающая кавычка на Windows ставилась сочетанием Alt+0171, а закрывающая — Alt+0187. Больше не нужно запоминать коды: символы привязаны к отдельных клавишами и работают в сочетании с Alt или Alt+Shift. Например, чтобы набрать знак градуса °, используйте сочетание Alt+D. Для кавычек второго уровня „“ зажмите Alt+Shift+ Alt+Shift+>. Программа работает на macOS и Windows.
Kern Me
Кернинг — важный навык для графического дизайнера, который требует постоянной тренировки. Игра Kern Me поможет начинающим дизайнерам развить насмотренность и научиться выбирать правильное расстояние между отдельными буквами в логотипах и заголовках. Выравнивайте буквы, набирайте очки и получайте оценки за лучшие решения.
Тренажер Ильяхова
Инструмент развивает насмотренность в верстке и типографике. В каждом задании вам показывают две картинки: одну с нормальной версткой, вторую — с ошибками. Задача — отвечать правильно и набрать как можно больше очков.
Несмотря на то, что Максим Ильяхов — не дизайнер, а главный редактор Т—Ж, он отлично разбирается в верстке. Если вы только начинаете свой путь в дизайне, с помощью этого инструмента вы научитесь находить ошибки в своих макетах и прототипах.
Заключение
Сетка, шрифтовая пара, кернинг, правило внутреннего и внешнего — понятия, с которых следует начинать в дизайне. На курсе «Веб дизайн с 0 до PRO» вы научитесь работать со шрифтами, освоите инструменты графического и веб-дизайна и узнаете, как верстка и типографика влияют на качество ваших работ.
Пишет про дизайн в Skillbox. Редактор и арт-директор собственного дизайн-бюро. Ведет рассылку о текстах, типографике и дизайне.