- PVSM.RU - https://www.pvsm.ru -
На Хабре уже было немало материалов о том, как проводить качество вёрстки веб-проектов (вот отличная статья [2] на эту тему) — как правило, речь в таких топиках идёт о коммерческих сайтах. В ходе развития образовательного проекта HTML Academy мы также столкнулись с необходимостью выработки критериев для оценки работ учеников.
Очевидно, что учить нужно так, чтобы потом люди (не все из которых «технари» [3]) могли приходить в компании и работать «правильно» — то есть создавая вёрстку, которая красиво выглядит и не требует больших усилий по поддержке. Процесс создания списка универсальных критериев для оценки занял довольно длительное время и был сопряжён с рядом трудностей. Сегодня мы расскажем о том, что же у нас в итоге получилось.
Изначально оценку работ учеников, участвующих в базовых интенсивах [4] HTML Academy, проводил помогающий им наставник (о важности наличия «живого» учителя мы писали в прошлый раз [5]). Для повышения качества этого процесса и снижения вероятности необъективной оценки было решено выработать чёткие критерии, которым должны соответствовать работы.
Поскольку проверку на соответствие критериям в любом случае осуществляет наставник, то необходимо было сделать так, чтобы этот профессионал был согласен с предлагаемым инструментарием оценки.
Первая итерация наших критериев оказалась не столь объективной и однозначной, как хотелось бы, что породило целую волну споров в среде самих наставников HTML Academy — во внутреннем чате кипели настоящие баталии, в ходе которых эксперты объясняли друг другу, что «на самом деле» значит та или иная формулировка. Стало ясно, что в такой редакции пользоваться списком критериев для оценки работ студентов будет просто невозможно.
В результате мы переработали критерии таким образом, чтобы исключить всякую двусмысленность — все наставники должны одинаково понимать, как именно проверять работы учеников.
Поскольку целью наших интенсивов является подготовка специалистов, которые смогут получить работу в компаниях и будут заняты в реальных проектах, мы решили узнать экспертное мнение представителей веб-студий. В Санкт-Петербурге такие компании объединяет ассоциация СПЕЦИА [6] — к экспертам этих организаций мы и обратились.
Процессы в разных студиях построены по-разному, что сказывается в том числе на требованиях к вёрстке проектов (пример — кто-то не приемлет стилизацию элементов по id, а где-то — это вполне нормальная практика и т.д.).
Вследствие этого, не все предложения коллег мы реализовали в своих критериях, однако сбор мнений помог получить более выверенные формулировки, исключающие различные неточности.
В конечном итоге получился довольно обширный список критериев для оценки качества вёрстки. Он разбит на две группы: одни критерии относятся к базовым, другие — к дополнительным. Первые направлены на проверку основных знаний и навыков, а дополнительные проверяют то, насколько ученик внимателен к деталям и готов к скрупулёзной работе верстальщика.
Получить 100 баллов по итогам обучения можно, только выполнив все удовлетворяющие критериям задания.
Ученики должны понимать, что страницы должны быть свёрстаны полностью.
normalize.css
можно два).Так как мы не рассматриваем автоматизацию, то мы смягчили критерий и разрешили подключать нормалайз отдельным файлом.
Да, наш выбор — IE10+. Ученикам мы рассказываем, как отбиваться от вёрстки под более старые версии.
Хорошо | Плохо |
---|---|
[7] | [8] |
css
, img
, js
или аналогичные. Главная страница имеет название index.html
. В названиях и расширениях файлов нет заглавных букв и пробелов.Хорошо | Плохо |
---|---|
Мы не настаиваем на выборе какого-то определённого стиля кодирования. Главное — единообразие.
Хорошо | Плохо |
---|---|
|
|
<a>
, а другими тегами.<br><br>
.Этот критерий самый субъективный, так как есть много спорных, но приемлемых вариантов разметки элементов. Но есть и «абсолютное зло», которое в код допускать не хочется. Будем рады вашим примерам таких типовых ошибок.
Не с помощью
display: table
, а именно с помощью таблиц.
!important
в CSS.Критерии соответствия макету сделали мягче, чем полный «пиксельпёрфект». А как вы считаете правильным?
Хорошо | Плохо |
---|---|
|
|
#id
для стилизации.normalize.css
.vertical-align
для всех блоков с display: inline-block
.Если не прописывать цвета фона, то без картинок часть текста может стать невидимой.
Но если аккуратно прописать цвет фона блокам, то отсутствие изображений не страшно.
styleguide.psd
были использованы.Конечно, не все дизайнеры делают такие стайлгайды, но для учебных макетов мы их подготовили, чтобы ученики привыкали задумываться о стилизации разных состояний. Ниже фрагмент стайлгайда одного из макетов.
Ничего не должно «прыгать» просто так.
Мы рассказываем про простейшие приёмы оптимизации вёрстки и хотим, чтобы ученики их начали использовать.
<img>
прописать размер.Плохо, когда содержимое выпадает из родительского контейнера и становится невидимым. Например, когда белые ссылки в меню выпадают на белый фон страницы.
В этом случае при добавлении пунктов должен увеличиваться по высоте блок меню. Может быть это и некрасиво, зато пункты меню видны всегда.
</body>
.Это тоже субъективный пункт, поэтому и вынесен в дополнительные критерии. С его помощью мы заставляем учеников, например, использовать псевдоэлементы для создания декоративных деталей.
Поскольку цель наших интенсивов — подготовка специалистов, которые могли бы работать над реальными веб-проектами, мы решили собрать мнения экспертов о каждом пункте критериев, вошедших в окончательный список для оценки качества вёрстки.
Некоторые опрошенные нами эксперты заявили о том, что наш список является полным (учитывая, что с его помощью предлагается оценивать работу начинающих специалистов).
В их числе партнёр digital-агентства Little Big Agency [15] Максим Юрин:
Хороший и полный список, советую всем специалистам пробегаться по всем его пунктам перед сдачей проекта. Это позволит добиться того, чтобы проект выглядел аккуратно внешне, а также, что немаловажно, сделает сам код удобным для прочтения и разбора.
Кто-то, как например, технический директор digital-агентства Molinos [16] Евгений Сергеев, считает представленные выше критерии в целом адекватными, но некоторые корректировки не помешают:
Думаю, для начинающих список вполне адекватен, в нём много важных моментов. Конечно, его можно дополнять.
Новые критерии с ходу не предложу, но, например, я бы перенёс два критерия из дополнительных в базовые.
Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.
Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
- При добавлении в элементы большего количества текста.
- При использовании картинок с неподходящими размерами.
- Текст не должен выпадать из объектов.
- Переполнение контентными блоками не приводит к нарушению сетки.
Особенно второй. Часто совсем об этом не задумываются.
Мнение разработчика Redmadrobot [17] Дмитрия Шашлова:
Список адекватен, по нему можно проверить скорее качество усвоения материала, а чтобы оценить общие знания, их качество безотносительно к курсу Академии, критерии лучше сформулировать следующим образом:
- Вёрстка должна быть максимально понятной как для верстальщика, так и для разработчика, не в ущерб стандартам и общепринятым правилам форматирования страниц;
- То же относится и к файловой структуре для макетов, чтобы можно было судить о содержании папки по её названию;
- Задавая параметры адаптивной вёрстки нужно иметь ввиду все возможные размеры экранов, описанные в требованиях;
- Стоит относиться с отдельным вниманием ко всем ресурсам, поставляемым в релизную вёрстку (cкрипты, стили, изображения — всё должно быть подготовлено для веба).
Есть и эксперты, считающие, что некоторые моменты можно улучшить или изменить. Ниже представлены комментарии и рекомендации Вадима Макеева, веб-евангелиста Opera Software [18] и основателя сообщества Веб-стандарты [19]:
> Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине
Указывать такие вещи в пикселях, значит провоцировать нездоровую дотошность, которая в реальном мире не нужна. Достаточно сказать «максимально близко к макету».> Документ должен проходить проверку на валидность validator.w3.org
Я бы лучше рекомендовал validator.w3.org/nu [20] — он меньше фокусируется на формальной валидности.> Выбран правильный формат изображений: JPEG для фотографий, всё остальное в PNG
Нет «правильного» формата, есть только «подходящий» и здесь вполне можно упомянуть SVG.> Необходимо подключить
normalize.css
к вёрстке отдельным файлом
normalize.css
илиreset.css
, оба подхода имеют право на жизнь.> Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления
Это больше, чем дополнительный критерий, я бы перенёс в основные.> Необходимо расположить CSS-префиксы в правильном порядке
Такое требование запутывает, нет «правильного» порядка для префиксов, есть один принцип: свойство без префикса а) должно быть, б) должно идти последним.> Спрайты для изображений или иконочный шрифт
Слишком сложное и сомнительное требование, особенно насчёт иконочных шрифтов — очень сомнительная технология. Спрайты — это не вёрстка, спрайты — это оптимизация и сборка, которую нельзя делать руками, только автоматизировать.> Необходимо использовать подход Progressive Enhancement, например
Форма с кнопкой, интерактивная карта — какие-то не очень внятные и ненужные частности. Лучше сформулировать: важные функции сайта должны работать без JS, точка. Ну и «прогрессивное улучшение».
Со многими из высказанных предложений мы согласны и внедрим их в последующих редакциях наших критериев (а что-то уже нашло своё отражение в списке). Мы всегда готовы прислушиваться к профессионалам — поэтому не стесняйтесь делиться своими мыслями и предложениями в комментариях!
На сегодня всё, спасибо за внимание. В наших следующих публикациях мы расскажем о том, как помогаем начинающим верстальщикам перейти на следующий уровень с помощью продвинутых интенсивов [21] и других интересных темах.
Подписывайтесь на наш блог и становитесь нашим наставником [22]!
Автор: htmlacademy
Источник [23]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/razrabotka/87123
Ссылки в тексте:
[1] Image: http://habrahabr.ru/company/htmlacademy/blog/254171/
[2] отличная статья: http://habrahabr.ru/post/114256/
[3] не все из которых «технари»: http://habrahabr.ru/company/htmlacademy/blog/252169/
[4] базовых интенсивах: https://htmlacademy.ru/intensive
[5] прошлый раз: http://habrahabr.ru/company/htmlacademy/blog/252843/
[6] СПЕЦИА: http://specia.pro
[7] Image: http://habrastorage.org/files/3a4/0b3/632/3a40b36321944a89bc70f2b0fee5c6b4.jpg
[8] Image: http://habrastorage.org/files/322/4cf/00a/3224cf00a9b540d7a7b1903725eeaa76.jpg
[9] проверку на валидность: http://validator.w3.org
[10] Image: http://habrastorage.org/files/49d/b04/955/49db04955fbf430d816d84b15d90e308.gif
[11] Image: http://habrastorage.org/files/3be/bff/8b1/3bebff8b1fe84d969d0f92ee098d4dae.gif
[12] Image: http://habrastorage.org/files/bdc/86a/cab/bdc86acab09445c8bbb93648f76ede34.png
[13] Image: http://habrastorage.org/files/081/9f5/0ae/0819f50ae90e4b3d9abf0f8deeaeb446.gif
[14] Image: http://habrastorage.org/files/6bb/549/fb2/6bb549fb2a164f7eae817b8619e6aa7c.gif
[15] Little Big Agency: http://www.littlebigsite.ru
[16] Molinos: http://molinos.ru
[17] Redmadrobot: http://www.redmadrobot.ru
[18] Opera Software: http://www.opera.com
[19] Веб-стандарты: http://web-standards.ru
[20] validator.w3.org/nu: http://validator.w3.org/nu
[21] продвинутых интенсивов: https://htmlacademy.ru/advanced_intensive
[22] становитесь нашим наставником: https://htmlacademy.ru/tutors
[23] Источник: http://habrahabr.ru/post/254171/
Нажмите здесь для печати.