1. Как стать хорошим
веб-технологом
Нарек Мкртчян
руководитель дизайн-бюро Indentium

2. Верстка это:
— разрезание дизайна на элементы;
— разметка структуры;
— добавление стилей;
— добавление «рыбных» текстов;
— написание скриптов.

3. ?

4. Верстальщик должен знать:
— HTML;
— CSS;
— JS для подключения плагинов.

5. Веб-технолог должен знать:
— HTML на уровне спецификаций и их особенностей;
— CSS, независимо от цифры, следующей после аббревиатуры;
— JS на предельно хорошем уровне;
— основы типографики;
— английский язык.

6. Углубленный JavaScript — зачем?
— плагины, в большинстве случаев, — зло;
— код нуждается в обслуживании;
— пожелания по скриптам становятся изощреннее от сайта к сайту.

7. Польза от знания английского
— упрощается продумывание классов, названий функций и т.п.;
— код получается более унифицированным, понятным для восприятия;
— исчезают убогие названия, написанные транслитом (novosti_v_stolbik).

8. Развитие творческого мышления
— визуальный анализ макетов перед началом верстки;
— поиск одинаковых / схожих блоков и объединение их в общие
пространства имен;
— продумывание имен классов как сетки, так и всех блоков
(унификация);
— нахождение способов сделать любой элемент (если это возможно и
имеет смысл) как можно более универсальным и независимым от
изменений со стороны клиента или пользователей.

9. Пространства имен (namespaces)
— b-articles-rotated-previews
— b-articles-previews
— b-articles-announced-previews

10. Унификация
— код получается читабельным не только для поисковых роботов и
браузеров, но и для людей;
— названия классов / идентификаторов получаются схожими;
— повышается семантичность кода;
— результат получается независимым.

11. Унификация
В представленном коде об унификации
просто-напросто забыли — возникает
ощущение, что над кодом трудились 3
разных технолога.

12. Универсально-независимые блоки
— «боевые» правки (увеличение / уменьшение изображений,
добавление / убавление текста и т.п.) не должны влиять на внешний
вид;
— изменение размеров блока или его родительского блока должно
приводить к масштабированию;
— функциональный блок не должен полностью зависеть от родителя.

13. Из чего состоит код-гайд
— правила, определяющие применение различных тегов в коде;
— правила по присвоению названий классам в тех или иных ситуациях;
— правила по оформлению HTML и CSS, в том числе и CSS-префиксы;
— правила по созданию директорий, именованию файлов.

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

15. Выдержки из код-гайда
Контентные списки (новости, посты
блогов, вакансии и т.п.) называются
следующим образом:
b-namespace-previews
Namespace — класс объектов. Скажем,
для списка блогов — blogs, а для списка
постов блога — blogs-posts.

16. Выдержки из код-гайда
Модификации блоков — это английские
прилагательные, добавляемые после
namespace. В приведенном примере два
списка новостей — обычный и
модифицированный.

17. Выдержки из код-гайда
— директории проекта:
— * assets — вспомогательные файлы (исходники дизайна, спрайтов и т.п., превью для проверки);
— * versions —архивы верстки на разных этапах. Именование — project-name-markup-v.1.zip.
Порядковый номер увеличивается при добавлении новой страницы, в иных случаях
получаются промежуточные версии, например, 1.4.
— i — изображения;
— css — ;-)
— fonts — шрифты для подключения через @font-face;
— js — скрипты.

18. Постоянное развитие
— способы нахождения и безболезненного внедрения новых
технологий и методов без отрыва от рабочего процесса;
— ускорение верстки за счет использования оптимальных методов и
средств;
— искоренение ненужного дублирования кода;
— автоматизация надоедающих этапов работы.

19. Спасибо за внимание ;-)
Нарек Мкртчян
руководитель дизайн-бюро Indentium
— nm@indentium.ru
— twitter.com/gunger
— facebook.com/gunger