как стать хорошим веб технологом. нарек мкртчян. зал 4

1,088 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,088
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

как стать хорошим веб технологом. нарек мкртчян. зал 4

  1. 1. Как стать хорошимвеб-технологомНарек Мкртчянруководитель дизайн-бюро Indentium
  2. 2. Верстка это:—  разрезание дизайна на элементы;—  разметка структуры;—  добавление стилей;—  добавление «рыбных» текстов;—  написание скриптов.
  3. 3. ?
  4. 4. Верстальщик должен знать:—  HTML;—  CSS;—  JS для подключения плагинов.
  5. 5. Веб-технолог должен знать:—  HTML на уровне спецификаций и их особенностей;—  CSS, независимо от цифры, следующей после аббревиатуры;—  JS на предельно хорошем уровне;—  основы типографики;—  английский язык.
  6. 6. Углубленный JavaScript — зачем?—  плагины, в большинстве случаев, — зло;—  код нуждается в обслуживании;—  пожелания по скриптам становятся изощреннее от сайта к сайту.
  7. 7. Польза от знания английского—  упрощается продумывание классов, названий функций и т.п.;—  код получается более унифицированным, понятным для восприятия;—  исчезают убогие названия, написанные транслитом (novosti_v_stolbik).
  8. 8. Развитие творческого мышления—  визуальный анализ макетов перед началом верстки;—  поиск одинаковых / схожих блоков и объединение их в общие пространства имен;—  продумывание имен классов как сетки, так и всех блоков (унификация);—  нахождение способов сделать любой элемент (если это возможно и имеет смысл) как можно более универсальным и независимым от изменений со стороны клиента или пользователей.
  9. 9. Пространства имен (namespaces) —  b-articles-rotated-previews —  b-articles-previews —  b-articles-announced-previews
  10. 10. Унификация—  код получается читабельным не только для поисковых роботов и браузеров, но и для людей;—  названия классов / идентификаторов получаются схожими;—  повышается семантичность кода;—  результат получается независимым.
  11. 11. Унификация В представленном коде об унификации просто-напросто забыли — возникает ощущение, что над кодом трудились 3 разных технолога.
  12. 12. Универсально-независимые блоки—  «боевые» правки (увеличение / уменьшение изображений, добавление / убавление текста и т.п.) не должны влиять на внешний вид;—  изменение размеров блока или его родительского блока должно приводить к масштабированию;—  функциональный блок не должен полностью зависеть от родителя.
  13. 13. Из чего состоит код-гайд—  правила, определяющие применение различных тегов в коде;—  правила по присвоению названий классам в тех или иных ситуациях;—  правила по оформлению HTML и CSS, в том числе и CSS-префиксы;—  правила по созданию директорий, именованию файлов.
  14. 14. Плюсы работы по код-гайду—  упрощение как коллективной, так и одиночной работы;—  ускорение большинства повторяемых процессов;—  повышение семантичности кода;—  возможность использования кода на последующих проектах;—  код-гайд можно всегда дополнять, совершенствуя его до бесконечности.
  15. 15. Выдержки из код-гайда Контентные списки (новости, посты блогов, вакансии и т.п.) называются следующим образом: b-namespace-previews Namespace — класс объектов. Скажем, для списка блогов — blogs, а для списка постов блога — blogs-posts.
  16. 16. Выдержки из код-гайда Модификации блоков — это английские прилагательные, добавляемые после namespace. В приведенном примере два списка новостей — обычный и модифицированный.
  17. 17. Выдержки из код-гайда—  директории проекта: —  * assets — вспомогательные файлы (исходники дизайна, спрайтов и т.п., превью для проверки); —  * versions —архивы верстки на разных этапах. Именование — project-name-markup-v.1.zip. Порядковый номер увеличивается при добавлении новой страницы, в иных случаях получаются промежуточные версии, например, 1.4. —  i — изображения; —  css — ;-) —  fonts — шрифты для подключения через @font-face; —  js — скрипты.
  18. 18. Постоянное развитие—  способы нахождения и безболезненного внедрения новых технологий и методов без отрыва от рабочего процесса;—  ускорение верстки за счет использования оптимальных методов и средств;—  искоренение ненужного дублирования кода;—  автоматизация надоедающих этапов работы.
  19. 19. Спасибо за внимание ;-)Нарек Мкртчянруководитель дизайн-бюро Indentium—  nm@indentium.ru—  twitter.com/gunger—  facebook.com/gunger

×