poison_glen (poison_glen) wrote,
poison_glen
poison_glen

Category:

Автоматизация вёрстки – 2

Нанимать на постоянную работу верстальщика экономически оправдано для тех студий, которые выполняют ежемесячно много проектов на потоке. Или же для крупных авторитетов вроде Горбунова и Лебедева.

А как быть маленьким и проворным студиям, которые занимаются индивидуальной проработкой по каждому проекту, которых-то и набирается 2, от силы 3 в месяц?

До недавнего времени мы заказывали вёрстку на фрилансе. Издержки получались немаленькие. Опытные верстальщики берут за работу много, а всякое школоло, привыкшее к стандартным трёхколоночникам, с задачей не справляется: всё же сайты у нас совсем нестандартные.

Около года назад нам невероятно повезло при работе над сайтом Стеклорезерва. Мы нашли верстальщика, который за небольшие деньги оперативно воплотил нашу идею с разлетающимися осколками. Но на следующем проекте с ним поработать уже не пришлось: он уже устроился на постоянку в студию (оторвали, надо думать, с руками).

После долгих метаний нашли другого, вроде адекватного верстальщика. Но внезапно настал момент, когда надо было внести какие-то мелкие правки в несколько сайтов, и в итоге вся вёрстка поехала. При попытке выяснить корень зла обнаружилось 2 000 (!!!) строк CSS и полный бардак в html-е. Вот тогда этот верстальщик и потонул, а мы судорожно стали искать решение проблемы.

И мы его нашли

Задавшись целью, наш программист нашёл фреймворк для вёрстки - HTML kickstart

Опробовала я его на моём резюме, на котором я и обучалась вёрстке:

myresume

Для начала прикрепляю кикстартовский css к разметке:

<link rel="stylesheet" type="text/css" href="/kate/css/kickstart.css" media="all" />                  <!-- KICKSTART -->

Мои стили прикреплены аналогично.


Страница состоит из трёх колонок, соотношение которых по ширине 5:3:4. Ставлю глобальную разметку:

<div class=”col_5 column”>…</div> - для левой колонки с информацией

<div class=”col_3 column”>…</div> - для второй с моей фоткой

<div class=”col_4 column”>…</div> - для правой колонки


Дальше идём сверху вниз, смотрим, что за элемент, находим его в кикстарте, копируем. Получается очень чистенько и аккуратно:

table

Реализую всплывающие подсказки с названиями программ:

programs

Ну и все остальные элементы. Благо, особым разнообразием они не блещут – сплошь списки, заголовки да картинки.

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

Итог:

  • всего 2 часа работы;
  • количество строк CSS сокращено по меньшей мере втрое;
  • чистая и понятная разметка.

Tags: автоматизация работы, вёрстка, методы работы Агилис, работа в Агилис
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 7 comments