Your SlideShare is downloading. ×
0
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

787

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
787
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×