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

Верстка это: —  разрезание дизайна на элементы;

—  разметка структуры;

—  добавление стилей;

—  добавление «рыбных» текстов;

—  написание скриптов.

?

Верстальщик должен знать: —  HTML;

—  CSS;

—  JS для подключения плагинов.

Веб-технолог должен знать: —  HTML на уровне спецификаций и их особенностей;

—  CSS, независимо от цифры, следующей после аббревиатуры;

—  JS на предельно хорошем уровне;

—  основы типографики;

—  английский язык.

Углубленный JavaScript — зачем? —  плагины, в большинстве случаев, — зло;

—  код нуждается в обслуживании;

—  пожелания по скриптам становятся изощреннее от сайта к сайту.

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

—  код получается более унифицированным, понятным для восприятия;

—  исчезают убогие названия, написанные транслитом (novosti_v_stolbik).

Развитие творческого мышления —  визуальный анализ макетов перед началом верстки;

—  поиск одинаковых / схожих блоков и объединение их в общие пространства имен;

—  продумывание имен классов как сетки, так и всех блоков (унификация);

—  нахождение способов сделать любой элемент (если это возможно и имеет смысл) как можно более универсальным и независимым от изменений со стороны клиента или пользователей.

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

—  b-articles-previews

—  b-articles-announced-previews

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

—  названия классов / идентификаторов получаются схожими;

—  повышается семантичность кода; —  результат получается независимым.

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

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

—  изменение размеров блока или его родительского блока должно приводить к масштабированию;

—  функциональный блок не должен полностью зависеть от родителя.

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

—  правила по оформлению HTML и CSS, в том числе и CSS-префиксы;

—  правила по созданию директорий, именованию файлов.

Плюсы работы по код-гайду —  упрощение как коллективной, так и одиночной работы;

—  ускорение большинства повторяемых процессов; —  повышение семантичности кода;

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

Выдержки из код-гайда Контентные списки (новости, посты блогов, вакансии и т.п.) называются следующим образом:

b-namespace-previews

Namespace — класс объектов. Скажем, для списка блогов — blogs, а для списка постов блога — blogs-posts.

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

Выдержки из код-гайда —  директории проекта:

—  * assets — вспомогательные файлы (исходники дизайна, спрайтов и т.п., превью для проверки);

—  * versions —архивы верстки на разных этапах. Именование — project-name-markup-v.1.zip. Порядковый номер увеличивается при добавлении новой страницы, в иных случаях получаются промежуточные версии, например, 1.4.

—  i — изображения;

—  css — ;-)

—  fonts — шрифты для подключения через @font-face;

—  js — скрипты.

Постоянное развитие —  способы нахождения и безболезненного внедрения новых технологий и методов без отрыва от рабочего процесса;

—  ускорение верстки за счет использования оптимальных методов и средств;

—  искоренение ненужного дублирования кода;

—  автоматизация надоедающих этапов работы.

Спасибо за внимание ;-) Нарек Мкртчян руководитель дизайн-бюро Indentium

—  nm@indentium.ru

—  twitter.com/gunger

—  facebook.com/gunger