27 группа

Цель работы: Изучить процесс формирования требований к дизайну веб-приложений, опираясь на анализ предметной области и характеристик целевой аудитории.

Оборудование и программное обеспечение:

• Компьютер с установленным браузером и доступом в интернет
• Текстовый редактор (Word, Google Docs, Notion и др.)
• Инструменты для создания прототипов (Figma, Adobe XD)

Ход выполнения работы:

1. Анализ предметной области

1. Определите тип веб-приложения (например, интернет-магазин, блог, корпоративный сайт, сервис бронирования и т. д.).
2. Опишите ключевые функции и цели веб-приложения.
3. Исследуйте конкурентов: найдите 3-5 аналогичных веб-приложений, проанализируйте их дизайн, структуру и функциональность.
4. Сделайте выводы о лучших практиках в данной предметной области.

2. Определение целевой аудитории

1. Определите основные группы пользователей веб-приложения.
2. Опишите характеристики аудитории: возраст, пол, уровень технической подготовки, потребности и ожидания.
3. Составьте 2-3 персоны (персонализированные описания типичных пользователей).
4. Установите основные пользовательские сценарии взаимодействия с веб-приложением.

3. Определение требований к дизайну

1. На основе анализа предметной области и целевой аудитории сформулируйте требования к:
   • Цветовой палитре
   • Типографике (шрифтам)
   • Навигации
   • Интерфейсу и удобству использования
   • Адаптивности и кросс-браузерности
2. Оформите эти требования в виде таблицы или списка.

4. Создание эскиза (скетча) веб-интерфейса

1. Нарисуйте наброски главной страницы и ключевых разделов (можно на бумаге или в графическом редакторе).
2. Разработайте каркас (wireframe) в Figma или Adobe XD.
3. Определите зоны размещения контента, кнопок, навигационных элементов.

5. Подготовка отчёта

1. Оформите отчет о проделанной работе, включив:
   • Описание предметной области и её анализ.
   • Определение целевой аудитории и пользовательских сценариев.
   • Сформулированные требования к дизайну.
   • Эскизы и wireframe веб-интерфейса.
2. Сделайте выводы: какие решения были приняты и почему.

Контрольные вопросы:

1. Почему важно учитывать анализ предметной области при разработке дизайна?
2. Как исследование целевой аудитории влияет на дизайн веб-приложения?
3. Какие основные требования предъявляются к дизайну современных веб-приложений?
4. Какие инструменты используются для создания wireframe?

Ожидаемый результат:
После выполнения работы у вас будет сформирован перечень требований к дизайну веб-приложения, а также черновой вариант его интерфейса в виде эскиза или wireframe, созданного в Figma или Adobe XD.

Вступление:

Цвет — один из самых мощных инструментов в арсенале веб-дизайнера. Он не только влияет на визуальное восприятие сайта, но и способен передавать эмоции, устанавливать ассоциации и формировать фирменный стиль. Понимание теории цвета, его принципов и моделей — ключ к созданию эффективного и привлекательного веб-дизайна. В этой лекции мы рассмотрим основные аспекты цвета в веб-дизайне, начиная с базовых понятий и заканчивая практическими приёмами использования.

Часть 1: Значение цвета в веб-дизайне

• Психологическое воздействие: каждый цвет вызывает определенные эмоции и ассоциации. Например, синий часто ассоциируется с доверием и стабильностью, а красный — с энергией и страстью.
• Создание бренда: цветовая палитра — важная часть фирменного стиля. Правильный выбор цветов помогает выделить бренд, сделать его узнаваемым и сформировать определенное впечатление.
• Навигация и иерархия: цвет может использоваться для выделения важных элементов, таких как кнопки, ссылки или заголовки, а также для создания визуальной иерархии на странице.
• Улучшение читаемости: контраст между цветом текста и фоном влияет на читаемость контента.
• Эстетика и привлекательность: грамотное использование цвета делает сайт визуально привлекательным и приятным для восприятия.

Часть 2: Фоновые цвета в веб-дизайне

Фоновый цвет — основа визуального восприятия веб-страницы. Выбор фонового цвета требует особого внимания, так как он влияет на читаемость текста и общее впечатление от сайта.

• Нейтральные фоны: белый, серый, бежевый — классические варианты для фона. Они создают чистый и профессиональный вид, не отвлекают от основного контента и обеспечивают хорошую читаемость.
• Цветные фоны: использование цветных фонов может сделать сайт более ярким и запоминающимся, но требует аккуратности.
  • Пастельные тона: создают спокойную и нежную атмосферу.
  • Насыщенные цвета: подходят для сайтов с ярким и динамичным контентом.
  • Темные тона: создают эффектный и современный вид, но могут затруднить чтение текста.
• Градиентные фоны: создают плавный переход между цветами и могут добавить глубины и объема.
• Текстурированные фоны: имитируют различные материалы (дерево, ткань, бумагу) и добавляют визуальный интерес.
• Правила выбора фонового цвета:
  • Контрастность: Обеспечьте достаточный контраст между фоном и текстом.
  • Не перегружайте: избегайте слишком ярких или пестрых фонов, которые могут отвлекать от контента.
  • Соответствие стилю: фон должен соответствовать общей стилистике сайта и бренду.
  • Тестирование: проверьте, как фон выглядит на разных устройствах и мониторах.

Часть 3: Цветовой круг и цветовые схемы

Цветовой круг — это визуальное представление спектра цветов, расположенных в определённой последовательности. Он помогает понять взаимосвязь между цветами и создавать гармоничные цветовые схемы.

• Основные цвета: красный, жёлтый и синий — это базовые цвета, из которых можно получить все остальные.
• Вторичные цвета: зеленый, оранжевый и фиолетовый — получаются при смешивании двух основных цветов.
• Третичные цвета: получаются при смешивании основного и вторичного цветов.
• Цветовые схемы:
  • Монохромная: использует один цвет в разных оттенках (светлее или темнее).
  • Аналоговая: использует цвета, расположенные рядом на цветовом круге.
  • Комплементарная: использует цвета, расположенные напротив друг друга на цветовом круге.
  • Триадная: использует три цвета, расположенные на одинаковом расстоянии друг от друга на цветовом круге.
  • Тетрадная: использует четыре цвета, расположенные попарно на цветовом круге.
• Практическое применение: цветовой круг помогает выбрать гармоничные цветовые сочетания для веб-дизайна, создавая нужные акценты и контрасты.

Часть 4: Модели цвета

В веб-дизайне используются различные модели представления цвета:

• RGB (красный, зелёный, синий): аддитивная модель, используемая для отображения цветов на экране. Каждый цвет представляет собой комбинацию трёх основных цветов (красного, зелёного и синего).
  • Значения: от 0 до 255 для каждого цвета (например, rgb(255, 0, 0) — красный).
  • Применение: Основная модель для веб-дизайна.
• HEX (шестнадцатеричное): шестнадцатеричное представление цвета, основанное на RGB.
  • Значения: #RRGGBB (например, #FF0000 — красный).
  • Применение: Широко используется в CSS и HTML.
• HSL (оттенок, насыщенность, яркость): модель, основанная на оттенке, насыщенности и яркости.
  • Оттенок (Hue): определяет положение цвета на цветовом круге (от 0 до 360 градусов).
  • Насыщенность (Saturation): определяет интенсивность цвета (от 0 до 100%).
  • Светлота (Lightness): определяет яркость цвета (от 0 до 100%).
  • Применение: удобна для точной настройки цвета и создания гармоничных цветовых схем.
• CMYK (голубой, пурпурный, жёлтый, основной/чёрный): субтрактивная модель, используемая для печати.
  • Применение: не используется напрямую в веб-дизайне, но полезна для понимания принципов смешивания цветов.

Часть 5: Инструменты и ресурсы

• Adobe Color (color.adobe.com): онлайн-инструмент для создания и изучения цветовых схем.
• Coolors (coolors.co): Генератор цветовых палитр.
• Paletton (paletton.com): инструмент для создания цветовых палитр на основе цветового круга.
• Color Hunt (colorhunt.co): подборка готовых цветовых палитр.
• Плагины для Figma и Adobe XD: плагины для работы с цветом в интерфейсах.

Заключение:

Цвет — мощный инструмент веб-дизайнера, который требует понимания теории, принципов и моделей цвета. Правильный выбор и использование цветовой палитры могут сделать ваш сайт не только красивым, но и эффективным, передающим нужные эмоции и создающим желаемое впечатление. Помните, что цвет — это не просто украшение, а важный элемент, который влияет на восприятие и взаимодействие пользователей с сайтом.

Цель работы: закрепить теоретические знания о цвете в веб-дизайне на практике, научиться работать с цветовым кругом, применять различные цветовые модели и использовать фоновые цвета при макетировании сайта в Adobe XD.

Задачи:

1. Разработать концепцию сайта: определить тематику и целевую аудиторию вымышленного сайта.
2. Создать цветовые палитры: используя цветовой круг, разработать несколько цветовых схем (монохромную, аналоговую, комплементарную).
3. Применить модели цвета: на практике использовать модели RGB, HEX и HSL для выбора и корректировки цветов в Adobe XD.
4. Экспериментируйте с фоновыми цветами: создайте макет главной страницы сайта с различными фоновыми цветами, градиентами и элементами дизайна.
5. Проанализировать результаты: оценить влияние различных цветовых схем и фоновых цветов на восприятие макета сайта.

Инструменты:

• Компьютер с установленным Adobe XD.
• Доступ в интернет (для поиска вдохновения и цветовых инструментов).
• Онлайн-инструменты для работы с цветом (например, Adobe Color, Coolors, Paletton) — по желанию.

Время выполнения: 2 часа

Ход работы:

Этап 1: Подготовка и концепция

1. Тематика сайта: Определите тематику вымышленного веб-сайта (например, портфолио дизайнера, интернет-магазин одежды, блог о путешествиях).
2. Целевая аудитория: опишите целевую аудиторию сайта (возраст, интересы, уровень образования и т. д.).
3. Общее впечатление: определите, какое общее впечатление должен создавать сайт (профессионализм, креативность, легкость, надежность и т. д.).
4. Рекомендации: найдите в интернете 2-3 примера сайтов, которые вам нравятся и соответствуют выбранной теме и впечатлению. Сохраните их для вдохновения.

Этап 2: Создание цветовых палитр

1. Adobe XD: Откройте Adobe XD и создайте новый документ (например, Web 1920).
2. Цветовой круг: используйте встроенный инструмент выбора цвета в Adobe XD или онлайн-инструмент для работы с цветовым кругом.
3. Монохроматическая палитра: выберите один основной цвет и создайте палитру из его оттенков (светлее и темнее). Запишите или сохраните шестнадцатеричные коды для этой палитры.
4. Аналоговая палитра: выберите один основной цвет и добавьте к нему 2-3 соседних цвета на цветовом круге. Запишите или сохраните шестнадцатеричные коды для этой палитры.
5. Комплементарная палитра: выберите один основной цвет и найдите противоположный ему цвет на цветовом круге. Запишите или сохраните шестнадцатеричные коды для этой палитры.
6. Сохранение стилей: сохраните созданные цветовые палитры как «цветовые стили» (Color Assets) в Adobe XD. Это позволит вам быстро применять их к элементам дизайна.

Этап 3: Применение моделей цвета

1. Выбор цвета: выберите 3 цвета из созданных вами палитр (по одному из каждой).
2. RGB: Найдите RGB-значение для каждого выбранного цвета, используя Adobe XD.
3. HEX: Убедитесь, что вы знаете HEX-код для каждого выбранного цвета (он отображается автоматически в Adobe XD).
4. HSL: Поэкспериментируйте с изменением HSL-значений цвета в палитре Adobe XD (переключитесь в режим HSL). Посмотрите, как это влияет на цвет.
5. Применение: Примените каждый из этих цветов к различным элементам вашего макета (фону, заголовкам, кнопкам).

Этап 4: Макетирование главной страницы

1. Фон: Используйте созданные цветовые палитры для создания фона главной страницы:
   • Попробуйте использовать один из основных цветов как фон.
   • Создайте градиентный фон с двумя или более цветами из ваших палитр.
   • Поэкспериментируйте с добавлением простого текстурного фона (найдите текстуру в интернете и импортируйте в Adobe XD).
2. Элементы дизайна:
   • Добавьте заголовок сайта и подзаголовок, используя текстовый инструмент и настроив цвет и стиль.
   • Добавьте несколько кнопок или ссылок, используя прямоугольники и текстовый инструмент.
   • Используйте созданные цветовые стили для заливки кнопок и текста.
   • Разместите простые геометрические фигуры, чтобы дополнить дизайн.
3. Экспериментируйте: не бойтесь экспериментировать с разными вариантами сочетания цветов и элементов дизайна.
4. Читаемость: убедитесь, что текст на фоне легко читается и что есть достаточный контраст.
5. Стиль: постарайтесь создать гармоничный стиль, который соответствует вашей концепции сайта.

Этап 5: Анализ результатов

1. Оценка: Оцените созданный макет:
   • Насколько эффективно сочетаются цвета на макете?
   • Удалось ли создать нужное впечатление от сайта?
   • Легко ли читается текст?
   • Есть ли достаточно контраста?
2. Выводы: Запишите, как разные цветовые решения и фоновые цвета влияют на восприятие макета. Что вы узнали в результате этого упражнения?

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

• Концепция: Наличие четкой концепции сайта и понимания целевой аудитории.
• Цветовые палитры: правильность создания цветовых палитр и их сохранение в Adobe XD.
• Цветовые модели: понимание и применение цветовых моделей RGB, HEX и HSL.
• Фон: креативное и эффективное использование фоновых цветов, градиентов и текстур.
• Макет: Качество и гармоничность созданного макета главной страницы.
• Анализ: Объективность и глубина анализа результатов.
• Время: Соблюдение тайминга.

Формат сдачи:

• Исходный файл Adobe XD (.xd).
• Краткий текстовый отчет, включающий:
  • Описание концепции сайта и целевой аудитории.
  • Описание созданных цветовых палитр и их HEX-коды.
  • Описание примененных цветовых моделей.
  • Анализ результатов и выводы.

Рекомендации:

• Используйте ресурсы в интернете для поиска вдохновения и цветовых сочетаний.
• Не бойтесь экспериментировать и выходить за рамки привычных решений.
• Сохраняйте работу на каждом этапе.

Введение

Сегодня мы поговорим об основах разработки веб-сайтов, начиная с планирования и заканчивая организацией файлов. Эти знания необходимы любому веб-дизайнеру, независимо от того, работаете ли вы самостоятельно или в команде. Мы рассмотрим ключевые этапы, важность технического задания, структуру файлов, используемые типы графики и правила именования файлов.

1. Основные этапы разработки сайта

Разработка веб-сайта — это не просто написание кода. Это сложный процесс, который состоит из нескольких важных этапов:

• Планирование и анализ:
  • Определение целей сайта: чего мы хотим достичь с помощью этого сайта? (например, продажа товаров, предоставление информации, создание сообщества).
  • Аудитория: Для кого этот сайт? Каковы их потребности и ожидания?
  • Конкурентный анализ: Что делают наши конкуренты? Как мы можем выделиться?
  • Разработка концепции: Как будет выглядеть и функционировать сайт в общих чертах?
  • Создание структуры сайта: Определение разделов и страниц, навигация.
• Проектирование:
  • Создание прототипов: схематическое отображение расположения элементов на страницах. Это может быть в виде набросков на бумаге или цифровых макетов.
  • Разработка макетов (дизайн): создание визуального дизайна сайта, включая цветовые схемы, шрифты, стили и графику.
  • Верстка макетов: превращение статического макета в работающий HTML/CSS код.
• Разработка:
  • Написание фронтенда: HTML, CSS и JavaScript для создания пользовательского интерфейса.
  • Написание серверной части: код на стороне сервера, который управляет данными, базой данных и логикой сайта (например, PHP, Python, Node.js).
  • Интеграция различных компонентов: объединение фронтенда и бэкенда.
• Тестирование:
  • Тестирование функциональности: Проверка работоспособности всех функций и элементов.
  • Тестирование на разных браузерах и устройствах: проверка корректного отображения сайта.
  • Тестирование юзабилити: проверка удобства использования сайта для пользователя.
• Развертывание (публикация):
  • Загрузка сайта на сервер: Перенос файлов сайта на хостинг.
  • Настройка сервера и базы данных.
  • Запуск сайта.
• Поддержка и развитие:
  • Мониторинг работы сайта.
  • Устранение ошибок.
  • Обновление контента и функциональности.
  • Анализ статистики и внесение улучшений.

2. Техническое задание (ТЗ)

Техническое задание — это подробный документ, в котором описываются все требования к сайту. Техническое задание является основой для всех этапов разработки и помогает избежать недопонимания между заказчиком и исполнителем.

Основные элементы ТЗ:

• Общая информация о проекте:
  • Название сайта, цели и задачи.
  • Информация о заказчике.
  • Целевая аудитория.
  • Сроки выполнения.
  • Бюджет.
• Описание функциональности:
  • Перечень всех страниц и разделов сайта.
  • Описание функций каждого раздела.
  • Интерактивные элементы (формы, галереи, слайдеры и т.д.).
  • Необходимость интеграции с другими сервисами.
• Описание дизайна:
  • Общая концепция и стиль дизайна.
  • Цветовая схема.
  • Шрифты.
  • Логотип и другие графические элементы.
  • Требования к адаптивности (отображение на разных устройствах).
• Требования к контенту:
  • Типы контента (текст, изображения, видео и т.д.).
  • Структура контента.
  • Требования к SEO-оптимизации.
• Требования к технологиям:
  • Языки программирования.
  • Система управления контентом (CMS).
  • Хостинг и доменное имя.
  • База данных.
• Требования к тестированию и приемке.
• Дополнительные требования.

3. Файловая структура сайта

Организация файлов в проекте веб-сайта очень важна для удобства разработки, сопровождения и масштабирования. Логичная структура упрощает работу как для вас, так и для других разработчиков, если они когда-нибудь будут с ним работать.

Стандартная файловая структура:

• index.html — главная страница сайта (обязательный файл).
• css/ — папка для CSS файлов (стили сайта):
  • style.css — основной файл стилей.
  • reset.css — сброс стандартных стилей браузера.
  • responsive.css — стили для адаптивной верстки.
  • компоненты.css – стили отдельных элементов, например кнопок, слайдеров
• js/ — папка для JavaScript файлов (скрипты сайта):
  • main.js — основной файл скриптов.
  • libs.js — скрипты библиотек (например, jQuery).
• images/ или img/ — папка для изображений:
  • logo.png — логотип сайта.
  • header-background.jpg — фоновое изображение для шапки.
  • product1.jpg, product2.png — изображения товаров.
• fonts/ — папка для шрифтов.
• videos/ — папка для видео.
• audio/ — папка для аудио.
• pages/ — папка для страниц сайта, кроме главной:
  • about.html — страница о компании.
  • contacts.html — страница контактов.
  • products.html — страница с каталогом товаров.
• includes/ или partials/ — папка для повторяющихся фрагментов кода (header, footer).

4. Два типа графики на web-сайтах

На веб-сайтах используются два основных типа графики:

• Растровая графика (Raster):
  • Состоит из сетки пикселей (точек).
  • Представлена в форматах: JPEG, PNG, GIF, TIFF, BMP.
  • Размер файла зависит от количества пикселей и глубины цвета.
  • При увеличении масштаба теряют четкость, “пикселизируются”.
  • Хорошо подходят для фотографий, сложных иллюстраций, изображений с градиентами.
• Векторная графика (Vector):
  • Состоит из математических описаний линий, кривых, форм.
  • Представлена в форматах: SVG, AI, EPS, PDF (иногда).
  • Размер файла не зависит от размера изображения.
  • При масштабировании сохраняют четкость, без потери качества.
  • Хорошо подходят для логотипов, иконок, простых иллюстраций, элементов интерфейса.

5. Имена файлов

Правильное именование файлов является важной частью организации проекта.

Основные принципы:

• Используйте осмысленные имена: Имя файла должно отражать его содержание.
• Используйте латинские буквы, цифры, тире и подчеркивания: избегайте пробелов, специальных символов и кириллицы.
• Используйте строчные буквы: это делает имена файлов более единообразными.
• Используйте краткие и информативные имена: не делайте имена файлов слишком длинными, но они должны быть понятными.
• Используйте тире для разделения слов: header-background.jpg (не headerbackground.jpg).
• Придерживайтесь общей логики именования во всем проекте: это облегчит навигацию по файлам.
• Для изображений указывайте расширение файла (.jpg, .png, .svg)
• Для страниц указывайте расширение файла (.html)
• Для стилей указывайте расширение файла (.css)
• Для скриптов указывайте расширение файла (.js)

Заключение

Сегодня мы рассмотрели важные аспекты разработки веб-сайта: от планирования до организации файлов. Понимание этих принципов является основой успешной работы веб-дизайнера. Помните, что внимательное отношение к деталям и структурированный подход являются залогом создания качественного и удобного веб-сайта.

Дополнительные материалы:

• Стандарты HTML и CSS
• Руководства по написанию технического задания
• Учебники по основам верстки и программирования на веб
• Примеры файловых структур и гайдлайны

Вопросы для обсуждения:

• Почему так важно планирование перед началом разработки сайта?
• Какие элементы обязательно должны быть в техническом задании?
• Как вы можете улучшить свою файловую структуру?
• В каких случаях лучше использовать растровую графику, а в каких векторную?
• Почему важно правильно называть файлы?

Цель: закрепить знания об основных этапах разработки веб-сайта, составлении технического задания, организации файловой структуры, типах графики и правилах именования файлов.

Задание:

Часть 1: Планирование и ТЗ

1. Выбор темы: выберите тему для простого веб-сайта (например, личный блог, портфолио, сайт для небольшого магазина, сайт мероприятия).
2. Планирование:
   • Определите цели и задачи вашего сайта.
   • Опишите целевую аудиторию.
   • Схематично набросайте структуру сайта (какие будут разделы и страницы).
   • Определите основную концепцию дизайна.
3. Составление технического задания (ТЗ):
   • На основе проведённого планирования составьте подробное техническое задание для вашего веб-сайта. Включите в него следующие разделы:
     • Общая информация о проекте.
     • Описание функциональности (минимальный набор необходимых функций).
     • Описание дизайна (основная цветовая гамма, шрифты).
     • Требования к контенту (типы контента, структура).
     • Технические требования (CMS (если планируется) или статика).
     • Дополнительные требования (если есть).

Часть 2: Файловая структура

1. Создание папки проекта: создайте на вашем компьютере папку с названием вашего проекта (например, my-blog).
2. Организация файлов и папок:
   • Внутри папки проекта создайте следующую структуру папок и файлов:

     my-blog/
     ├── index.html
     ├── css/
     │   └── style.css
     ├── js/
     │   └── main.js
     ├── images/
     │   └── logo.png
     │   └── background.jpg
     ├── fonts/
     └── pages/
         └── about.html
         └── contacts.html
     

     • Внимание: вы можете добавить дополнительные папки и файлы, если этого требует специфика вашего проекта, но не выходите за рамки общего принципа файловой структуры.
3. Именование файлов:
   • Убедитесь, что все ваши файлы и папки названы в соответствии с правилами именования файлов (используйте латинские буквы, цифры, тире и подчёркивания, строчные буквы, осмысленные имена).
   • Создайте несколько фиктивных файлов и папок, которые не описаны в структуре выше, и переименуйте их в соответствии с правилами.

Часть 3: Работа с графикой

1. Сбор графики:
   • Найдите или создайте 2-3 изображения для вашего сайта.
   • Одно изображение должно быть в растровом формате (например, .jpg или .png).
   • Одно изображение должно быть в векторном формате (например, .svg). Если у вас нет возможности получить векторный файл, создайте его самостоятельно, например, простой логотип с помощью онлайн-инструментов.
   • Поместите эти изображения в папку images/.
2. Анализ графики:
   • Опишите, какие изображения относятся к растровому типу, а какие — к векторному.
   • Опишите, в каких случаях вы бы использовали каждый из этих типов изображений.
   • Попробуйте изменить размер растрового изображения и опишите, как это повлияет на его качество.

Часть 4: Практическое задание

1. Создание минимальной HTML-разметки:
   • В файлах index.htmlpages/about.html, pages/contacts.html создайте минимальную разметку HTML (заголовки, абзацы, ссылки), чтобы показать структуру страниц.
   • Подключите style.css к вашим HTML файлам.
2. Создание минимального CSS:
   • В файле style.css создайте несколько простых стилей, например, для оформления заголовков и абзацев.
   • Проверьте, что ваши стили корректно подключаются и работают на страницах вашего сайта.

Отчёт по лабораторной работе:

После выполнения задания, подготовьте отчет, включающий:

1. Техническое задание (ТЗ), созданное в части 1.
2. Файловую структуру вашего проекта (скриншот или текстовое представление).
3. Анализ графики: описание и сравнение растровых и векторных изображений, а также вывод о том, когда следует использовать тот или иной тип.
4. Ссылки на HTML-файлы (чтобы преподаватель мог посмотреть ваш минимальный сайт).
5. Выводы: Опишите, что вы узнали и закрепили в процессе выполнения лабораторной работы.

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

• Правильность и полнота составленного ТЗ.
• Логичность и корректность файловой структуры.
• Соблюдение правил именования файлов.
• Понимание и описание различий между растровой и векторной графикой.
• Наличие базовой разметки и стилей в HTML и CSS файлах.
• Полнота и качество отчета.

Примечание:

• Данная лабораторная работа рассчитана на самостоятельную работу и может быть дополнена заданиями по усмотрению преподавателя.
• При выполнении заданий следует обращать внимание на аккуратность и соблюдение всех правил, изложенных в лекции.
• В качестве примера для HTML и CSS можно использовать материалы с онлайн-ресурсов (например, MDN Web Docs).

Лабораторная работа: Создание баннера для веб-страницы

Цель: научиться создавать баннер для веб-страницы с помощью HTML и CSS.

Задание: создать баннер с заданными параметрами и внедрить его в HTML-документ, стилизовав с помощью CSS.

Часть 1: Описание баннера

• Название баннера: “Добро пожаловать на наш сайт!”
• Размеры: 800 пикселей в ширину и 300 пикселей в высоту.
• Цвет фона: #F0F0F0 (светло-серый).
• Цвет текста: #333333 (темно-серый).
• Шрифт текста: Arial, sans-serif.
• Размер шрифта: 24 пикселя.
• Выравнивание текста: по центру.
• Текст баннера: «Добро пожаловать на наш сайт! Узнайте больше о нас и наших услугах».
• Дополнительные параметры:
  • Надпись должна быть выделена жирным шрифтом (font-weight: bold).
  • Баннер должен иметь закругленные углы (радиус 10 пикселей).
  • Баннер должен иметь тень (цвет тени — #888888, размер тени — 5 пикселей).

Часть 2: HTML код

<!DOCTYPE html>
<html>
<head>
<title>Баннер</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="banner">
  <h1>Добро пожаловать на наш сайт!</h1>
  <p>Узнайте больше о нас и наших услугах.</p>
</div>

</body>
</html>

Часть 3: CSS код (файл style.css)

#banner {
  width: 800px;
  height: 300px;
  background-color: #F0F0F0;
  text-align: center;
  margin: 20px auto; /*Центрирование баннера по ширине*/
  border-radius: 10px;
  box-shadow: 5px 5px 10px #888888;
}

#banner h1 {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  margin-top: 80px; /*Изменение отступа сверху*/
}

#banner p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 18px;
  margin-top: 20px;
}

Часть 4: Инструкции по выполнению

1. Создайте папку: Создайте папку для вашего проекта.
2. Создайте файлы: Создайте два файла: index.html (для HTML-кода) и style.css (для CSS-кода).
3. Введите HTML-код: скопируйте HTML-код из раздела «Часть 2» и сохраните его в файле index.html.
4. Введите CSS-код: скопируйте CSS-код из раздела «Часть 3» и сохраните его в файле style.css.
5. Свяжите CSS с HTML: В теге <head> файла index.html добавьте строку <link rel="stylesheet" type="text/css" href="style.css">, чтобы связать CSS-файл со страницей.
6. Откройте в браузере: Откройте index.html в вашем браузере. Вы увидите созданный баннер.

Часть 5: Дополнительные рекомендации и улучшения:

• Адаптивность: добавьте CSS-правила для адаптации баннера к разным размерам экранов (например, для мобильных устройств).
• Изображение в баннере: вместо текста можно добавить изображение. Для этого используйте тег <img> в div#banner.
• Центрирование изображения: убедитесь, что изображение центрировано как по горизонтали, так и по вертикали. Можно использовать flexbox или grid для более удобной верстки.

Пример добавления изображения:

<div id="banner">
  <img src="" alt="Баннерное изображение" width="800" height="300">
</div>

В этом примере:

• image.jpg — путь к вашему изображению.
• width и height — задают размеры изображения. Важно: изображение должно быть не меньше 800 пикселей в ширину.

Цель работы: освоить основные приёмы работы с текстом в Adobe Photoshop, научиться создавать привлекательные текстовые объекты, применять различные текстовые эффекты и создавать композиции с использованием текстового дизайна.

Необходимое оборудование: Компьютер с установленной программой Adobe Photoshop.

Ход работы:

Часть 1. Создание и форматирование текстовых объектов.

1. Создайте новый документ: размер 1000×800 пикселей, разрешение 300 точек на дюйм, фон — белый.
2. Добавьте текстовый слой: с помощью инструмента «Горизонтальный текст» (T) напишите фразу «Дизайн текста в Photoshop». Выберите шрифт (например, Montserrat, Open Sans или другой шрифт с засечками или без засечек), размер (60–80 пт) и цвет (темно-серый #333333).
3. Поэкспериментируйте с параметрами текста: измените кегль (размер шрифта), интерлиньяж (расстояние между строками), трекинг (расстояние между буквами), кернинг (расстояние между отдельными парами букв). Запишите свои наблюдения о том, как эти параметры влияют на внешний вид текста.
4. Создайте еще один текстовый слой: напишите под первой фразой свое имя и фамилию меньшим размером шрифта (20-30 пт) и другим цветом (#888888). Поэкспериментируйте с выравниванием текста (по центру, по левому краю, по правому краю).

Часть 2. Текстовые эффекты.

1. Стиль слоя: выберите текстовый слой с надписью «Photoshop Text Design». Дважды щелкните по нему, чтобы открыть окно «Стиль слоя». Примените следующие эффекты (поэкспериментируйте с настройками, чтобы добиться желаемого результата):
   • Тень: добавьте небольшую тень (размытие 2-3 пикселя, цвет — более тёмный оттенок основного цвета текста).
   • Внутренняя тень: добавьте внутреннюю тень, чтобы придать тексту объем (размытие 1-2 пикселя, цвет — более светлый оттенок основного цвета).
   • Градиентная заливка: залейте текст градиентом из двух цветов (например, от тёмно-серого до светло-серого).
   • Обводка: добавьте обводку (1-2 пикселя, цвет — белый).
2. Поэкспериментируйте с другими стилями слоя: попробуйте использовать другие эффекты, такие как «Глянец», «Фаска и рельеф», «Наложение градиента», «Наложение цвета». Запишите свои наблюдения о полученном эффекте.
3. Редактирование эффектов: измените параметры уже примененных эффектов. Обратите внимание на то, как меняется внешний вид текста при изменении настроек.

Часть 3. Текстовый дизайн и композиция.

1. Добавьте фоновое изображение: найдите подходящее фоновое изображение (например, абстрактный фон или текстуру) и поместите его под текстовые слои. Измените режим наложения слоя с фоном (например, «Перекрытие», «Затемнение основы») для достижения интересного эффекта.
2. Трансформация текста: используйте инструмент «Трансформация» (Ctrl+T) для изменения размера, поворота и наклона текстовых слоёв. Создайте композицию, которая выглядит гармонично и привлекательно.
3. Добавление элементов дизайна: добавьте другие элементы дизайна, например геометрические фигуры, линии или изображения, чтобы дополнить текстовую композицию. Экспериментируйте с расположением и размером элементов.

Вопросы для самоконтроля:

1. Какие параметры влияют на внешний вид текста в Photoshop?
2. Какие текстовые эффекты вы использовали в работе?
3. Как можно изменить режим наложения слоя для достижения различных эффектов?
4. Какие элементы дизайна можно использовать для дополнения текстовой композиции?

Отчет по работе в MS-word

Отчет должен включать:

• Скриншот готовой работы.
• Краткое описание использованных техник и эффектов.
• Ответы на вопросы для самоконтроля.
• Ваши выводы и наблюдения о работе с текстом в Photoshop.

Цель работы: освоить практические навыки создания и применения каскадных таблиц стилей для форматирования веб-страниц, научиться использовать различные селекторы и свойства CSS.

Оборудование: компьютер с установленным браузером и текстовым редактором (например, Notepad++, Sublime Text, VS Code).

Теоретическая часть:

Перед выполнением лабораторной работы необходимо изучить следующие понятия:

• Каскадные таблицы стилей (CSS): определение, назначение, преимущества использования.
• Селекторы CSS: виды селекторов (по элементам, по атрибутам, по классам, по идентификаторам, комбинированные), приоритет селекторов.
• Свойства CSS: основные свойства для форматирования текста (семейство шрифтов, размер шрифта, цвет, выравнивание текста и др.), свойства для форматирования блоков (ширина, высота, отступы, поля, границы, отображение и др.), свойства для работы с фоном (цвет фона, фоновое изображение и др.).
• Способы подключения CSS: встраивание стилей в HTML-код, подключение внешнего файла CSS, использование встроенных стилей <style>.
• Каскадность стилей: правила наследования и приоритета стилей.

Ход работы:

Задание 1. Встраивание стилей в HTML-код.

Создайте HTML-файл index.html с заголовком H1 «Моя первая страница с CSS» и абзацем текста. Внутри тегов <head> добавьте тег <style> и оформите заголовок H1 красным цветом и шрифтом размером 24 пикселя, а абзац — синим цветом и курсивом. Результат отобразится в браузере.

Задание 2. Подключение внешнего файла CSS.

Создайте отдельный CSS-файл style.css и перенесите стили из предыдущего задания в этот файл. Подключите style.css к index.html с помощью тега <link>. Проверьте работу стилей в браузере.

Задание 3. Использование различных селекторов.

Создайте HTML-страницу с двумя заголовками H2, одним списком <ul> и несколькими абзацами. В style.css оформите:

• Первый заголовок H2 зеленым цветом, используя селектор по элементу.
• Второй заголовок H2 жёлтым цветом, используя селектор по ID (присвойте ID второму заголовку).
• Элементы списка <li> синим цветом, используя селектор по элементу.
• Все абзацы курсивом, используя селектор по элементу.
• Один из абзацев выделите жирным шрифтом, используя селектор по классу (присвойте классу этот абзац).

Задание 4. Работа со свойствами CSS для форматирования блоков.

Создайте HTML-страницу с двумя блоками <div>. В style.css оформите:

• Первый блок: ширина 200 пикселей, высота 100 пикселей, красный фон, рамка шириной 2 пикселя, чёрного цвета.
• Второй блок: ширина 300 пикселей, высота 150 пикселей, синий фон, отступ от левого края 50 пикселей, отступ от верхнего края 20 пикселей.

Задание 5. Каскадность стилей (приоритет).

Создайте HTML-страницу с одним абзацем. В style.css задайте для абзацев цвет текста синим, а затем внутри тега <p> задайте цвет текста красным, используя встроенный стиль. Определите, какой цвет текста будет отображаться в браузере, и объясните почему.

Контрольные вопросы:

1. Какие существуют способы подключения CSS к HTML-документу?
2. Объясните понятие каскадности стилей.
3. Перечислите основные виды селекторов CSS и приведите примеры.
4. Какие свойства CSS используются для форматирования текста и блоков?
5. Как задать фоновое изображение для элемента?
6. Как работает механизм приоритета стилей?

Отчет о работе:

Отчет должен содержать:

• Цель работы.
• Ход работы с описанием выполненных заданий.
• Результаты работы (скриншоты веб-страниц).
• Ответы на контрольные вопросы.
• Выводы по работе.

Примечание: в рамках лабораторной работы можно использовать любые дополнительные свойства CSS для более сложного оформления веб-страниц. Результат работы должен быть аккуратно оформлен и содержать комментарии к коду.

Практическое занятие: «Освоение инструментов выделения и трансформации областей. Рисование и раскрашивание» в Adobe Photoshop

Цель:

• Освоить инструменты выделения и трансформации объектов в Photoshop.
• Научиться использовать инструменты рисования и раскрашивания для создания простых изображений.
• Развить навыки работы с инструментами выделения и трансформации для создания композиций.

Задание:

1. Выделение и трансформация:

• Откройте в Photoshop любое изображение с чётко очерченными объектами (например, фотографию с животными, растениями, зданиями).
• Используйте различные инструменты выделения (прямоугольное выделение, овальное выделение, лассо, волшебная палочка) для выделения объектов.
• Потренируйтесь в использовании инструментов трансформации (Свободная трансформация, Деформация, Перспектива, Искажение) для изменения размера, поворота, искажения и перспективы выделенных объектов.
• Создайте новый слой и перенесите выделенный объект на этот слой.
• Повторите задание с несколькими объектами на изображении.
• Попробуйте вырезать выделенный объект и вставить его на другое изображение.

2. Рисование и раскраска:

• Создайте новый документ в Photoshop с белым фоном.
• Используйте инструмент «Кисть» для рисования простых геометрических фигур (круг, квадрат, треугольник).
• Изменяйте размер и цвет кисти.
• Используйте инструмент “Заливка” для заливки фигур цветом.
• Попробуйте создать простую композицию из нескольких геометрических фигур.
• Используйте инструмент «Градиент» для создания плавного перехода цвета между объектами.
• Поэкспериментируйте с различными режимами наложения слоёв для создания интересных эффектов.

3. Композиция:

• Выберите два изображения (например, пейзаж и портрет).
• Используйте инструменты выделения, чтобы вырезать объект с одного изображения и вставить его в другое.
• Примените к вставленному объекту трансформацию для создания гармоничной композиции.
• Добавьте тени и блики к вставленному объекту для большей реалистичности.
• Поэкспериментируйте с различными эффектами (размытие, резкость, цветокоррекция) для улучшения композиции.

Дополнительные задания:

• Создайте простую анимацию с помощью инструмента “Кадры”.
• Используйте “Слои-маски” для создания сложных объектов.
• Попробуйте создать коллаж из нескольких изображений.
• Поэкспериментируйте с различными инструментами и эффектами Photoshop для создания уникальных изображений.

Оценки:

• Выполнение всех заданий.
• Овладение инструментами выделения, трансформации, рисования и раскрашивания.
• Качество созданных изображений и композиций.
• Креативность и оригинальность в работе.

Важно:

• На протяжении всего занятия обращайтесь к преподавателю за помощью и советами.
• Используйте интернет-ресурсы и документацию Photoshop для поиска дополнительной информации.
• Не бойтесь экспериментировать и находить собственные решения!

1) YITH WooCommerce Ajax Navigation — плагин AJAX навигации, а если выразиться более точно – плагин фильтрации товаров, позволяющий организовать в магазине удобную системы фильтрации товаров, и их подбора на основе заданных параметров. Фильтрация товаров – это сердце любого интернет-магазина. Именно фильтры позволяют покупателю буквально за пару-тройку кликов найти товар, отвечающий его потребностям. Изначально в WooCommerece уже встроена Layer Navigation, т.е. послойная навигация, позволяющая организовать систему фильтров. Плагин добавляет к базовым возможностям WooCommerece возможность фильтрации по цвету, а также возможность добавления лейблов. Благодаря этому можно организовать подбор по ряду заданных параметров, а именно: цене, цвету, размеру, и т.д, и разместив систему фильтров в сайдбаре, организовать динамичную фильтрацию товаров. Плагин подходит для большинства интернет-магазинов, так как в основном число фильтруемых параметров в них редко превышает 4-6. Для интернет-магазинов с технически сложными товарами (компьютеры, смартфоны и др.), где необходимо много разных фильтров, а число фильтруемых параметров приближается к бесконечности, возможностей данного плагина будет мало. Для подобных магазинов предназначены плагины продвинутой, многоуровневой фильтрации (их немного и они все платные ).

2) WooCommerce Sequential Order Numbers — плагин позволяет устанавливать в магазине последовательную нумерацию заказов, а не так как установлено в WooCommerce по умолчанию, т.е. в произвольно, что значительно облегчает обработку заказов.

3) Robokassa for WooCommerce — этот плагин добавляет платежный шлюз Робокасса к вашему магазину, что позволяет принимать оплату от клиентов через большинство популярных платежных систем (Webmoney, Яндекс.Деньги, Деньги@mail.ru, QIWI, RBKMoney, Z-payment и др.), терминалы мгновенной оплаты, посредством прямых банковских переводов на ваш расчетный счет, а также позволяет клиентам оплачивать товары (услуги) вашего магазина с помощью банковских карт (VISA, MasterCard).

4) WooCommerce Customizer — данный плагин позволяет Вам настраивать основные элементы ядра WooCommerce без необходимости правки исходного кода!  Так, Вы можете изменить надпись «Добавить в корзину» для разных видов товара (простой/вариативный/групповой/внешний), переименовать заголовки вкладок, изменить количество товаров, отображаемых на страницах архивов, а также настроить нужное Вам число столбцов при выводе товаров и миниатюр. Смотреть подробное описание плагина и видео урок по настройке плагина.

5) YITH WooCommerce Featured Video — плагин позволяет добавить избранное видео вместо банальной миниатюры товара, что делает магазин более живым.  Видео-обзор товара воспринимается гораздо лучше, чем сухое описание товара. Потенциальные клиенты обожают смотреть видео, т.к. это позволяет как бы воочию увидеть товар и рассмотреть товар более детально.  Видео вместо текста может значительно увеличить продажи, и вывести Ваш магазин на совершенно иной уровень.  Конечно для всех товаров, особенно если товаров у Вас много, снимать видео ролики довольно проблематично, но вот для избранных товаров, которые Вы хотите успешно продавать, да еще и в больших количествах, можно и нужно сделать ролики. Ролики следует размещать на сервисе YouTube, дабы не нагружать Ваш сайт, а переложить всю нагрузку по обработке требовательного до ресурсов видео контента на могучие плечи YouTube.

6) WooCommerce Product FAQs – данный плагин добавляет на странице описания товара дополнительную вкладку FAQs, на которой покупатели могут задавать вопросы и получать ответы. Все вопросы и ответы доступны для всеобщего обозрения, а учитывая то, что владелец магазина может модерировать вопросы и ответы, а также вручную добавлять вопросы и отвечать на них, данный плагин однозначно можно отнести к категории «MustHave», так как при продуманном подходе к вопросам и ответам можно существенно повлиять на выбор клиента, и направить его в нужное Вам русло! 

7) WooCommerce Product Details Customiser — плагин позволяет настраивать внешний вид страницы описания товара. Можно настроить количество отображаемых столбцов для похожих товаров, включить/выключить вкладки, изображения товаров, и наличие похожих товаров на странице. Смотреть подробное описание плагина.

8) WooCommerce Grid/List toggle — плагин позволяет посетителям переключать отображение товаров между сеткой и списком. Изначально при активации плагина WooCommerce установлено отображение товаров в виде сетки. Список позволяет просматривать товары с их описаниями, которые добавляются из поля «Краткое описание товара». Поскольку товары в магазине могут быть довольно разные по своей сути , целесообразно установить данный плагин и предоставить клиенту самому выбирать, какие товары ему удобнее просматривать в виде сетки, а какие в виде списка. Смотреть подробное описание плагина и видео урок по настройке плагина.

9) Zoom Image — плагин добавляет зум (лайтбокс) с тремя видами эффектов для картинок и миниатюр товаров WooCommerce, что позволяет сделать просмотр изображений более удобным и элегантным. 

10) WooCommerce Custom Product Tabs Lite – плагин позволяет добавить на странице описания товара еще одну вкладку, которую Вы можете назвать как угодно, и вывести в ней любую дополнительную информацию о товаре (можно выводить не только обычный текст, но и текст с HTML разметкой, а также видео с YouTube, причем одновременно с продающим текстом )). Вкладку можно по желанию добавлять к определенным товарам, ко всем товарам, или не добавлять ее вовсе, если при описании определенных товаров она совершенно не нужна. Смотреть подробное описание плагина.

11) WooCommerce Abandon Cart Lite Plugin — плагин предназначен для «реанимации» заброшенных заказов зарегистрированных клиентов, т.е. когда клиент добавил заказы в корзину, а к оплате по каким-либо причинам не перешел.  Обычно, такие зависшие заказы так и не проплачиваются в дальнейшем, но с помощью данного плагина значительную часть из этих заказов можно восстановить и довести до стадии закрытия сделки. Плагин работает в фоновом режиме и через установленные промежутки времени отправляет на email клиента письма (шаблоны писем создаются самостоятельно), содержание которых позволяет восстанавливать заброшенные корзины. В письмах могут содержаться как простые напоминания, так и купоны на скидку (интегрировано с купонами WooCommerce), или какие-то более сложные акционные предложения (типа, купи 2, а 3-й получи в подарок), и т.д. и т.п. Согласно статистике, удается восстанавливать до 30% заброшенных пользователями корзин с заказами, и превратить их в завершенные сделки, т.е. деньги. А деньги лишними никогда не бывают! 

12) 404 Silent Salesman — этот плагин позволяет помещать на 404-х страницах популярные товары, и тем самым увеличить потенциал продаж вашего магазина, превращая 404-й трафик в прибыль!

13) YITH WooCommerce Compare — данный плагин позволяет клиенту сравнивать товары между собой, а практически в любом магазине найдется немало товаров, которые можно, а иногда даже нужно сравнить.  Удобная сравнительная таблица выводится во всплывающем окне и выглядит довольно симпатично. Параметры, на основе которых будет производится сравнение товаров, устанавливаются на странице настроек плагина. Для добавления товаров в список сравнения на странице описания товаров, а также в архивах товаров устанавливается кнопка или ссылка по желанию. Смотреть подробное описание плагина.

14) Woocommerce Radio Buttons — данный плагин позволяет изменить отображение вариаций для вариативных товаров (такие есть практически в любом интернет-магазине) со стандартного выпадающего списка, установленного в WooCommerce по умолчанию, на радио кнопки, что во многих случаях выглядит более эстетически привлекательно, и гораздо удобнее для покупателей. Смотреть подробное описание плагина.

15) WooCommerce Product Archive Customiser — плагин позволяет настраивать (кастомизировать) внешний вид товарных категорий, и выводить только те основные и дополнительные элементы (миниатюры товаров, цены, количество товара и его наличие на складе и др.), которые Вам нужны. Также плагин позволяет скрыть/включить рейтинги, список доступных сортировок, баннеры новинок. Смотреть подробное описание плагина.

16) Woocommerce Dropdown Cart Widget — раскрывающийся виджет корзины, который при нажатии на него раскрывается и показывает содержимое корзины (миниатюры товаров, их названия, выбранные вариации, количество, а также цены). Такая корзина, благодаря реализации с помощью AJAX технологии, смотрится красиво и современно, причем плагин позволяет добавить корзину не только в стандартный сайдбар, но и в любое другое место: хедер, меню, футер, или прямо на страницы описаний товаров.  Смотреть подробное описание плагина.

17) WooCommerce Cart Tab — «плавающая» закладка корзины, которая глаза не мозолит, сильно не напрягает, но и расслабиться клиентам не дает.  Закладка при скроллинге по страницам архивов и описаний товаров «плавает» по странице, оставаясь всегда в видимой области. При наведении курсора мыши на закладку, показывается содержимое виджета корзины. Такую корзину искать клиентам не придется, она словно сама говорит: «Нажми на меня и оплати заказ», а значит и вероятность покупки значительно увеличится. Такая закладка-корзина станет отличным дополнением к базовой корзине, расположенной в меню, хедере, или где-то еще. И ничего страшного нет в том, что корзин будет две. Как говорят заядлые грибники, лишняя корзина никогда не бывает лишней!  Смотреть подробное описание плагина.

18) WooCommerce Custom Price — плагин позволяет назначать собственные названия для двух категорий цен: свободной (договорной) и пустой. Например, когда в поле цены Вы ставите 0 (т.е. свободная/договорная, или как ее еще называют «бесплатная» цена), то вместо цены над кнопкой добавления в корзину можно вывести надпись «Под заказ». А когда поле цены вообще пустое (там нет никакого значения), то можно вывести надпись «Скоро будет», что позволит проинформировать покупателя о товарах, которые скоро поступят в продажу.

19) WooCommerce Accepted Payment Methods — плагин позволяет отобразить (через виджет, шоткод, или тег шаблона) на сайте в нужном Вам месте способы оплаты, доступные в Вашем магазине. Изначально плагин заточен под иностранные способы оплаты, но это легко можно исправить, заменив иностранные платежные системы на те способы оплаты, которые доступны в вашем магазине.

20) WooCommerce OnSale Extender — улучшенный баннер скидок, позволяющий отображать баннер с информацией о размере скидки не просто в дефолтном виде («Sale!», или «Sale$100!»), характерном для подобного рода плагинов, а в виде, который удобен Вам и лучше всего подходит для вашего магазина. В плагине есть возможность настроить вывод скидки в %-ах или рублях — на выбор, а также указать шаблон вывода (на русском языке ), который предваряет саму скидку.

21) YITH WooCommerce Ajax Search — плагин поиска на основе AJAX технологии позволяет искать товары в режиме реального времени, т.е. по мере ввода клиентом букв будут выдаваться подходящие результаты в виде выпадающего списка. Плагин простой и легкий. Его большим плюсом можно назвать и совместимость с рядом других плагинов, позволяющих осуществлять поиск по артикулам, а также заказным полям для вариативных товаров. Т.е. сочетание данного плагина с другими плагинами поиска (их нужно только активировать) позволяет реализовать в интернет-магазине продвинутую систему поиска, работающую по принцу «Найдется все!»  Смотреть подробное описание плагина.

22) Product Enquiry for WooCommerce — плагин позволяет посетителям и потенциальным клиентам вашего магазина задать вопрос о товаре прямо со странице подробного описания товара, что будет очень удобно для многих посетителей вашего магазина, так как они могут задать вопросы «не отходя от кассы». Можно настроить название кнопки, а также ее расположение на странице. Смотреть подробное описание плагина.

23) Woocommerce Payment Gateway per Product — плагин позволяет назначать доступные платежные шлюзы для каждого отдельного товара, т.е. для каких-то отдельных товаров можно задать только определенные способы оплаты, а для всех остальных товаров оставить платежные шлюзы по умолчанию.

24) WooCommerce Add Charges To Payment Gateway — плагин позволяет добавить доплату к выбранным платежным шлюзам. Тем самым у Вас появляется возможность включить %-ты за проведение платежей через определенные платежные шлюзы (например, Робокасса) в цену товара, или регулировать способы оплаты товара покупателями. Например, увидев наценку в 5, 10, или 15% за оплату «Наложенным платежом», клиент может предпочесть оплатить товар банковской картой, где никаких наценок нет, что избавит Вас от лишней головной боли связанной с наложкой , а также продолжительного «зависания» товара и денег в процессе доставки почтой .

25) WooCommerce Payment Discounts — плагин позволяет добавить скидки на конкретные способы оплаты в WooCommerce. Например, Вы можете установить скидку 10% при оплате Яндекс.Деньгами, 5% при оплате с помощью карты VISA, и т.д., что будет стимулировать клиентов оплачивать теми способами, которые для Вас более предпочтительны и удобны. 

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя  Шкалу времени (Timeline) в Photoshop

Детали урока.

Программа: Adobe Photoshop
Сложность: средняя
Предполагаемый срок завершения: 1 час + время рендеринга
Финальный результат

Материалы для урока:

логотип ресурса Envato.

Архив

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования —  большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D.  Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока.  Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда — 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии (Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

Используя экранные рычаги управления 3D объектом, переместите листик точно в центр сцены, который обозначается пересечением красной и синей линиями.

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении.  Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например — цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация.  Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя  с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf в Шкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством.  Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.
Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению.  Нажмите кнопку Сохранить, когда закончите.

Ниже приведен пример окончательной анимации с использованием Вариант 1 без рендеринга.  Обратите внимание, что края листьев появляются зубчатые.

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр  Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть (Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Практическое задание:  Создание схемы «Технологии глобальных сетей»

Цель задания: научиться создавать схемы на Visio, отражающие принципы построения глобальных сетей и организацию межсетевого взаимодействия.

Задачи:

• Изучить основные принципы построения глобальных сетей.
• Изучить технологии и протоколы, используемые в глобальных сетях.
• Научиться создавать схемы на Visio, отражающие структуру глобальной сети и организацию межсетевого взаимодействия.

Требования к схеме:

• Схема должна быть выполнена в программе Visio.
• Схема должна отражать основные принципы построения глобальных сетей.
• Схема должна содержать следующие элементы:
• Узлы сети (компьютеры, серверы, маршрутизаторы и т. д.).
• Каналы связи (линии связи, каналы передачи данных и т. п.).
• Протоколы и технологии, используемые в сети.
• Межсетевое взаимодействие (обмен данными между сетями).

Рекомендации:

• Используйте шаблоны Visio для создания схемы.
• Используйте различные цвета и стили линий для различения элементов схемы.
• Добавьте подписи к элементам схемы для пояснения их назначения.
• Сохраните схему в формате, подходящем для печати.

Пример схемы:

Схема может выглядеть следующим образом:

• В центре схемы располагается узел, представляющий Интернет.
• Вокруг узла располагаются узлы, представляющие локальные сети организаций.
• Между узлами проведены линии, обозначающие каналы связи.
• На линиях указаны используемые протоколы и технологии.
• Между локальными сетями организаций показаны стрелки, обозначающие обмен данными.

Это лишь пример того, как может выглядеть схема. Вы можете адаптировать её под свои потребности.

Оценка задания:

Задание будет оцениваться по следующим критериям:

• Правильность отражения принципов построения глобальных сетей.
• Полнота отображения элементов схемы.
• Качество оформления схемы.
• Соблюдение требований к заданию.