Задание: Верстка и интеграция сайта с WordPress (Дистанционная работа)
Дизайн сайта - https://www.figma.com/design/oEftoIjNRLhybbL0MDugWX/Kyrgyzstan-Hunting?node-id=145-150&t=p3YdVaW5W52ZKAND-1 1. Объем работ Разработать англоязычный сайт по предоставленным макетам Figma: Главная: About us: информация о компании, галерея, контакты. Ibex Hunting, Marco Polo Hunting, Combo Hunting: три страницы на общем шаблоне с индивидуальными изображениями, текстами и галереями. Blog: список статей с постраничной навигацией. Статья: дата, заголовок, текст, изображения, блок других публикаций. Contacts: контакты, карта-иллюстрация, форма обратной связи. Общие элементы: шапка, подвал, мобильное меню, всплывающая форма заявки, просмотр фотографий. 2. Верстка и адаптивность Соблюсти композицию, шрифты, цвета, отступы, фоновые изображения и декоративные переходы из Figma. Обеспечить корректное отображение на ширинах 320-2560 px, включая промежуточные размеры. Десктоп и мобильную версию выполнить по макетам. Планшетную адаптацию и мобильные версии Marco Polo / Combo выполнить по общей логике дизайна. Исключить горизонтальную прокрутку страницы, наложение и обрезание текста, искажение изображений. Контентные блоки должны увеличиваться по высоте при изменении текста. Проверить Chrome, Firefox, Edge, Safari - две последние стабильные версии на дату сдачи; мобильные Safari на iOS и Chrome на Android. Предусмотреть состояния наведения, фокуса, нажатия и управление интерактивными элементами с клавиатуры. 3. Функциональность Меню, карточки охот и статей ведут на соответствующие страницы. Телефон, email, мессенджер и социальные ссылки кликабельны. Галереи: переключение стрелками и свайпом; открытие фотографии в модальном окне с подписью и навигацией. Все кнопки Book your hunt открывают форму заявки. Поля заявки: Name, Your contact, Hunting option, Message. Варианты охоты: Ibex, Marco Polo, Combo. На странице охоты соответствующий вариант выбран заранее. Контактная форма: Name, Your contact, Message. Имя и контакт обязательны; в заявке также обязателен выбор охоты. Контакт принимает email или телефон. Отправка без перезагрузки страницы, проверка полей на сервере, защита от спама и повторной отправки, сообщения об успехе и ошибке. Заявки поступают на согласованный email через SMTP и сохраняются в WordPress. Модальные окна закрываются крестиком, по Esc и нажатию на фон; фон страницы при открытии не прокручивается. Предусмотреть вариант загрузки и обрезки изображений для приведения всех изображений в правильный вид и размер 4. WordPress Создать отдельную тему по макетам. Обеспечить редактирование текстов, заголовков, фоновых изображений, карточек охот, галерей и подписей без изменения кода. Вынести логотип, меню, контакты, социальные ссылки и содержимое подвала в общие настройки. Блог реализовать через записи WordPress: добавление, редактирование, публикация, изображения и дата. Сохранить дизайн при добавлении новых статей и изменении объема контента. Согласовать платные плагины и лицензии до использования. 5. Оптимизация и установка Оптимизировать изображения, использовать WebP/AVIF и адаптивные размеры; отложенно загружать изображения ниже первого экрана. Настроить кеширование и подключать только используемые стили и скрипты. Предусмотреть редактирование title, description и alt; настроить человекопонятные URL, sitemap.xml и robots.txt. Установить сайт на хостинг заказчика, подключить домен и HTTPS, настроить SMTP и резервное копирование. Наполнить страницы согласованными материалами. Перед запуском заменить демонстрационные контакты и ссылки. 6. Приемка и передача Проверить страницы на ширинах 320, 375, 768, 1024, 1440, 1920 и 2560 px. Проверить меню, галереи, модальные окна, пагинацию, отправку и получение заявок. Подтвердить редактирование контента из WordPress. Передать исходники темы, резервную копию сайта и краткую инструкцию по администрированию. При необходимости дизайнер доработает нужные макеты, если есть обоснованная необходимость - возможно изменение дизайна нужных элементов для приведения в более стандартный форм фактор для более удобной интеграции
