как стать хорошим веб технологом. нарек мкртчян. зал 4
Post on 16-Jun-2015
791 Views
Preview:
TRANSCRIPT
Как стать хорошим веб-технологом Нарек Мкртчян руководитель дизайн-бюро 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
top related