Автоматизация вёрстки - 2
Нанимать на постоянную работу верстальщика экономически оправдано для тех студий, которые выполняют ежемесячно много проектов на потоке. Или же для крупных авторитетов вроде Горбунова и Лебедева.
А как быть маленьким и проворным студиям, которые занимаются индивидуальной проработкой по каждому проекту, которых-то и набирается 2, от силы 3 в месяц?
До недавнего времени мы заказывали вёрстку на фрилансе. Издержки получались немаленькие. Опытные верстальщики берут за работу много, а всякое школоло, привыкшее к стандартным трёхколоночникам, с задачей не справляется: всё же сайты у нас совсем нестандартные.
Около года назад нам невероятно повезло при работе над сайтом Стеклорезерва. Мы нашли верстальщика, который за небольшие деньги оперативно воплотил нашу идею с разлетающимися осколками. Но на следующем проекте с ним поработать уже не пришлось: он уже устроился на постоянку в студию (оторвали, надо думать, с руками).
После долгих метаний нашли другого, вроде адекватного верстальщика. Но внезапно настал момент, когда надо было внести какие-то мелкие правки в несколько сайтов, и в итоге вся вёрстка поехала. При попытке выяснить корень зла обнаружилось 2 000 (!!!) строк CSS и полный бардак в html-е. Вот тогда этот верстальщик и потонул, а мы судорожно стали искать решение проблемы.
И мы его нашли
Задавшись целью, наш программист нашёл фреймворк для вёрстки - HTML kickstart.
Опробовала я его на моём резюме, на котором я и обучалась вёрстке:
Для начала прикрепляю кикстартовский css к разметке:
Мои стили прикреплены аналогично.
Страница состоит из трёх колонок, соотношение которых по ширине 5:3:4. Ставлю глобальную разметку:
…div> - для левой колонки с информацией
…div> - для второй с моей фоткой
…div> - для правой колонки
Дальше идём сверху вниз, смотрим, что за элемент, находим его в кикстарте, копируем. Получается очень чистенько и аккуратно:
Реализую всплывающие подсказки с названиями программ:
Ну и все остальные элементы. Благо, особым разнообразием они не блещут - сплошь списки, заголовки да картинки.
Ещё один большой плюс этого решения - регулярные обновления. При выходе нового кикстарта достаточно просто загрузить его себе на комп, и вся вёрстка станет ещё лучше и чище.
Итог:
Дальше идём сверху вниз, смотрим, что за элемент, находим его в кикстарте, копируем. Получается очень чистенько и аккуратно:
Реализую всплывающие подсказки с названиями программ:
Ну и все остальные элементы. Благо, особым разнообразием они не блещут - сплошь списки, заголовки да картинки.
Ещё один большой плюс этого решения - регулярные обновления. При выходе нового кикстарта достаточно просто загрузить его себе на комп, и вся вёрстка станет ещё лучше и чище.
Итог:
- всего 2 часа работы;
- количество строк CSS сокращено по меньшей мере втрое;
- чистая и понятная разметка.