Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

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

•
•
R
rit2011
1 of 19
Как стать хорошим веб-технологом Нарек Мкртчян руководитель дизайн-бюро 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

More Related Content

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

  • 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