Skip to content

Latest commit

 

History

History
189 lines (165 loc) · 18.3 KB

museum-adaptive.md

File metadata and controls

189 lines (165 loc) · 18.3 KB

museum-adaptive

Ваша задача – адаптировать ранее сверстанный сайт Лувра для планшетов и мобильных устройств. На разрешениях 1024рх, 768рх и 420рх необходимо совпадение вёрстки с макетом. На остальных разрешениях до 320рх включительно обеспечьте отсутствие горизонтальной полосы прокрутки.

Этапы работы над проектом :

Каждый этап проверяется в ходе кросс-чека.
Кросс-чек стартует во вторник утром и закрывается в четверг поздно ночью.

Адаптивная вёрстка. Ключевые навыки:

  • работа с медиа-запросами
  • легкоподдерживаемый читаемый код
  • использование подхода "desktop first" при работе с адаптивностью
  • корректное отображение вёрстки на большинстве устройств
  • использование для адаптации верстки flexbox и/или grid, функции calc(), css-переменных
  • рефакторинг кода

Макет Museum
Советы по выполнению задания. Часть 3

Создание собственной копии макета:

  • авторизуемся в Фигме
  • открываем макет
  • нажимаем на стрелку рядом с названием макета на панели вверху, выбираем пункт "Duplicate to your drafts"
  • слева вверху открываем настройки, выбираем "Back to files"
  • открываем копию макета рядом с которой есть надпись "In Drafts"

Структура макета:

  • Макет выполнен для разрешения (ширины) страницы: 1920рх, 1024рх, 768рх, 420рх
  • На этапе адаптивной вёрстки адаптируем уже выполненный макет 1920рх для остальных разрешений
  • Макет состоит из трёх блоков: <header>, <main>, <footer>
  • Блок <main> состоит из семи секций <section>:
    • Welcome
    • Visiting
    • Explore
    • Video
    • Gallery
    • Tickets
    • Contacts

Технические требования

  1. легкоподдерживаемый читаемый качественный код:
  2. вёрстка валидная, семантическая, соответствующая макету
  3. приложение корректно отображается и работает в браузере Google Chrome последней версии
  4. запрещается использование CSS-фреймворков (bootstrap)
  5. допускается использование normalize.css
  6. рекомендуется использование Sass, при условии, что у вас уже есть опыт вёрстки
  7. рекомендуется использование Webpack, при условии, что у вас уже есть опыт вёрстки

Требования к репозиторию

Требования к коммитам

Требования к Pull Request

Соответствие вёрстки макету

  • допускается отклонение вёрстки от макета до 10px по горизонтали и по вертикали, если соблюдается визуальное сходство вёрстки и макета
  • разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков
  • в качестве инструмента для проверки соответствия вёрстки макету используйте дополнение PerfectPixel
  • при проверке вёрстки при помощи расширения PerfectPixel в первую очередь убедетесь, что в расширении выставлен масштаб 1, в браузере и операционной системе - масштаб 100%
  • для проверки вёрстки на соответствие макету необходимо вручную выставить макет по верхнему левому углу направляющих
  • проверку соответствия вёрстки макету проводим в DevTools браузера Google Chrome
  • каждый блок и секция рассматриваются по раздельности, т.е. недочеты предыдущего блока не переносятся на следующий, а при переходе проверки на следующий блок, мы его выравниваем с наложенным изображением
  • относительно текста проверяем его выравнивание по левому или правому краю, отступы до границы блока. Размеры текста проверяются только по высоте. Отличие в ширине слов и отступах между буквами при сопоставлении макета и вёрстки не считается ошибкой, если используется правильный шрифт с правильно указанными свойствами

Особенности проверки адаптивности в DevTools

  1. Открываем инструменты разработчика
    • для этого нажимаем клавишу F12 или кликаем правой кнопки мыши -> Посмотреть код
    • в правом верхнем углу панели инструментов разработчика кликаем на иконку Toggle device toolbar
    • на верхней панели выбираем Responsive
  2. Убедитесь, что в режиме Responsive нет вертикальной полосы прокрутки (она отсутствует по умолчанию). Если полоса прокрутки есть, её нужно убрать. Для этого
    • в верхней панели device toolbar переключите тип устройства с Desktop на Mobile
    • если тип устройства не отображается, в верхней панели device toolbar нажмите на три точки справа и выберите Add device type
  3. Выставляем ширину экрана на требуемую по ТЗ, при которой будем проверять адаптивность. Если видим, что страница проверяемого сайта не перестроилась, или справа осталась белая полоса, может понадобиться обновить страницу несколько раз
  4. Проверяем вёрстку на соответствие макету
  5. При необходимости проверить адаптивность на разных разрешениях, плавно изменяем ширину экрана в DevTools от максимума (1920рх+) до минимума (320рх), убеждаемся в отсутствии горизонтальной полосы прокрутки на всех разрешениях. Если появилась полоса прокрутки или белое поле справа, попробуйте обновить страницу, возможно, вёрстка не перестроилась.

Критерии оценки

Максимальный балл за задание – 150 баллов

Для удобства проверки выведите в консоль браузера самооценку своего проекта по пунктам с указанием баллов за каждый выполненный вами пункт.

Сначала необходимо проверить вёрстку на совпадение с макетом (пункты 1-3), позже на реализацию дополнительных критериев (пункты 4-6).
При полном совпадении с макетом ставите максимальное количество баллов, при частичном соответствии - половину от максимального количества баллов, при полном несоответствии или отсутствии секции ставите 0.
Если не уверены в правильности выполнения пункта студентом, не постесняйтесь спросить в канале кроссчека мнение других проверяющих, корректно ли реализован этот пункт ТЗ.

  1. Вёрстка соответствует макету. Ширина экрана 1024px +40
  • Блок header +4
  • Секция Welcome +4
  • Секция Visiting +4
  • Секция Explore +4
  • Секция Video +4
  • Секция Gallery +4
  • Секция Tickets +4
  • Форма покупки билетов +4
  • Секция Contacts +4
  • Блок footer +4
  1. Вёрстка соответствует макету. Ширина экрана 768px +40
  • Блок header +4
  • Секция Welcome +4
  • Секция Visiting +4
  • Секция Explore +4
  • Секция Video +4
  • Секция Gallery +4
  • Секция Tickets +4
  • Форма покупки билетов +4
  • Секция Contacts +4
  • Блок footer +4
  1. Вёрстка соответствует макету. Ширина экрана 420px +40
  • Блок header +4
  • Секция Welcome +4
  • Секция Visiting +4
  • Секция Explore +4
  • Секция Video +4
  • Секция Gallery +4
  • Секция Tickets +4
  • Форма покупки билетов +4
  • Секция Contacts +4
  • Блок footer +4
  1. Ни на одном из разрешений до 320px включительно не появляется горизонтальная полоса прокрутки +6
  2. Совмещается адаптивная и респонсивная (резиновая) вёрстка +14 При изменении ширины экрана плавно изменяются размеры:
  • слайдера в секции Welcome +2
  • слайдера сравнения изображений в секции Explore +2
  • кастомного видеоплеера в секции Video +2
  • слайдера в секции Video +2
  • YouTube-видео в плейлисте в секции Video, маленькие видео выровнены по краям большого +2
  • галереи изображений и изображений в ней +2
  • карты +2
  1. На ширине экрана 1024рх и меньше реализовано адаптивное меню +12
    • при нажатии на бургер-иконку меню появляется, плавно выдвигаясь слева, бургер-иконка изменяется на крестик. При нажатии на крестик меню исчезает, плавно возвращаясь назад, иконка крестика превращается в бургер-иконку +2
    • ссылки в меню работают, обеспечивая плавную прокрутку по якорям +2
    • при клике по ссылке в адаптивном меню, или при клике по любому месту сайта, кроме самого адаптивного меню, меню закрывается +2
    • вёрстка меню соответствует макету на всех проверяемых разрешениях +6
  2. Оптимизация скорости загрузки страницы +8 Оптимизация скорости загрузки страницы определяется при помощи сервиса https://developers.google.com/speed/pagespeed/insights/. Результат проверки скорости сайта для мобильных устройств:
    • 0 to 49 (red): Poor - не выполнено, 0 баллов
    • 50 to 89 (orange): Needs Improvement - частично выполнено +4
    • 90 to 100 (green): Good - выполнено полностью +8

Разница между максимальной оценкой за приложение (150 баллов) и максимально возможным количеством баллов за выполнение всех пунктов требований (160 баллов) позволит сгладить возможные ошибки проверяющих в ходе кросс-чека, неточности в описании задания, разное понимание требований задания проверяющим и проверяемым.

Как сабмитить задание

До наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите museum-adaptive, в поле Solution URL добавьте ссылку на задеплоенную версию созданного вами сайта, нажмите кнопку Submit.

Засабмитить задание необходимо как можно раньше, как только в rs app появится такая возможность. После сабмита задание можно продолжать выполнять до самого дедлайна.

Проверка задания

Материалы

Вебинары RS School

Документ для вопросов