Анализ подобных интернет-магазинов
Для разработки собственного проекта, необходимо провести анализ аналогичных сайтов интернет-магазинов на валидность.
Для выполнения анализа воспользуемся критериями оценивания чемпионата WorldSkills International (WSI) по компетенции «Веб-дизайн и разработка» (Приложение 1).
Проведем анализ сайта интернет-магазина косметики «Roskosmetika» (Рисунок 1). Ссылка на сайт: https://www.roskosmetika.ru/
Рисунок 1. Страница сайта.
Сначала на первом этапе мы проанализируем сайт, используя критерии оценивания модуля 1 и модуля 2 – графический дизайн (Таблица 1).
Таблица 1. Анализ сайта «Roskosmetika», Модуль 1 и Модуль 2
| Аспект | Максимальный балл |
| Модуль 1. Графический дизайн | |
| Цветовое решение сайта все цвета логотипа (базовые цвета без учета оттенков) | + |
| Все страницы имеют одинаковый графический пользовательский интерфейс | + |
| Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково | + |
| На мобильном макете представлены все блоки главной страницы | + |
| Модуль 2. Графический дизайн | |
| Использование графических элементов, позволяющий пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки) | + |
| Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок) | + |
| Наличие иконок социальных сетей | + |
| Наличие на странице формы комментариев | + |
| Контент на странице соответствует теме сайта | + |
| Не менее четырех визуально разделенных областей | + |
| Весь текст выделяется (в том числе и на кнопках) | + |
|
|
|
На втором этапе проанализируем сайт, используя критерии оценивания модуля 3 – верстка HTML/CSS3 (Таблица 2).
Таблица 2 Анализ сайта «Roskosmetika», Модуль 3
| Модуль 3. Верстка HTML/CSS3 | |
| Валидный код HTML | - |
| Используется блочная структура на основе тегов div | + |
| Весь текст выделяется | + |
| Валидный код CSS | - |
| Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | + |
| Структура страницы не нарушается при отключении изображений | + |
На третьем этапе проанализируем сайт, используя критерии оценивания модуля – программирование на стороне клиента (Таблица 3).
Таблица 3. Анализ сайта «Roskosmetika», Модуль 4
| Модуль 4. Программирование на стороне клиента | |
| На каждой сцене минимум 3 объекта | + |
| На разных сценах используются разные объекты | + |
Сайт имеет огромное количество положительных ответов на критерии оценивания (Cм. табл. 1). Минусы: сайт не прошел валидность.
Проведем анализ сайта интернет-магазина косметики «LAROCHEPOSAY» (Рисунок 2). Ссылка на сайт: https://www.laroche-posay.ru/
|
|
|
Рисунок 2. Страница сайта
Сначала на первом этапе мы проанализируем сайт, используя критерии оценивания модуля 1 и модуля 2 – графический дизайн (Таблица 1).
Таблица 4. Анализ сайта «LAROCHEPOSAY», Модуль 1 и Модуль 2
| Аспект | Максимальный балл |
| Модуль 1. Графический дизайн | |
| Цветовое решение сайта все цвета логотипа (базовые цвета без учета оттенков) | + |
| Все страницы имеют одинаковый графический пользовательский интерфейс | + |
| Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково | + |
| На мобильном макете представлены все блоки главной страницы | + |
| Модуль 2. Графический дизайн | |
| Использование графических элементов, позволяющий пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки) | + |
| Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок) | + |
| Наличие иконок социальных сетей | + |
| Наличие на странице формы комментариев | + |
| Контент на странице соответствует теме сайта | + |
| Не менее четырех визуально разделенных областей | + |
| Весь текст выделяется (в том числе и на кнопках) | + |
|
|
|
На втором этапе проанализируем сайт, используя критерии оценивания модуля 3 – верстка HTML/CSS3 (Таблица 2).
Таблица 5. Анализ сайта «LAROCHEPOSAY», Модуль 3
| Модуль 3. Верстка HTML/CSS3 | |
| Валидный код HTML | - |
| Используется блочная структура на основе тегов div | + |
| Весь текст выделяется | + |
| Валидный код CSS | - |
| Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | + |
| Структура страницы не нарушается при отключении изображений | + |
На третьем этапе проанализируем сайт, используя критерии оценивания модуля – программирование на стороне клиента (Таблица 3).
Таблица 6. Анализ сайта «LAROCHEPOSAY», Модуль 4
| Модуль 4. Программирование на стороне клиента | |
| На каждой сцене минимум 3 объекта | + |
| На разных сценах используются разные объекты | + |
Сайт имеет огромное количество положительных ответов на критерии оценивания (Cм табл.1). Минусы: сайт не прошел валидность.
Также проведем анализ сайта интернет-магазина косметики «NYX» (Рисунок 3). Ссылка на сайт: https://nyxcosmetic.ru/
Рисунок 3. Страница сайта
|
|
|
Сначала на первом этапе мы проанализируем сайт, используя критерии оценивания модуля 1 и модуля 2 – графический дизайн (Таблица 1).
Таблица 7. Анализ сайта «NYX», Модуль 1 и Модуль 2
| Аспект | Максимальный балл |
| Модуль 1. Графический дизайн | |
| Цветовое решение сайта все цвета логотипа (базовые цвета без учета оттенков) | + |
| Все страницы имеют одинаковый графический пользовательский интерфейс | + |
| Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково | + |
| На мобильном макете представлены все блоки главной страницы | + |
| Модуль 2. Графический дизайн | |
| Использование графических элементов, позволяющий пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки) | + |
| Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок) | + |
| Наличие иконок социальных сетей | + |
| Наличие на странице формы комментариев | + |
| Контент на странице соответствует теме сайта | + |
| Не менее четырех визуально разделенных областей | + |
| Весь текст выделяется (в том числе и на кнопках) | + |
На втором этапе проанализируем сайт, используя критерии оценивания модуля 3 – верстка HTML/CSS3 (Таблица 2).
Таблица 8. Анализ сайта «NYX», Модуль 3
| Модуль 3. Верстка HTML/CSS3 | |
| Валидный код HTML | + |
| Используется блочная структура на основе тегов div | + |
| Весь текст выделяется | + |
| Валидный код CSS | + |
| Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | + |
| Структура страницы не нарушается при отключении изображений | + |
На третьем этапе проанализируем сайт, используя критерии оценивания модуля – программирование на стороне клиента (Таблица 3).
Таблица 9. Анализ сайта «NYX», Модуль 4
| Модуль 4. Программирование на стороне клиента | |
| На каждой сцене минимум 3 объекта | + |
| На разных сценах используются разные объекты | + |
По итогу анализа можем сделать вывод, что все 3 сайта показали себя на высшем уровне, учитывая, что все стандарты выполняются.
ВЫВОДЫ ПО I ГЛАВЕ
В данной главе рассмотрены такие основные определения, как web-страница, сайт, интернет-магазин. Также была приведена классификация сайтов.
Сайт (от англ. site – место, местоположение, позиция) – совокупность страниц, объединенных одной общей темой, дизайном, имеющих взаимосвязанную систему ссылок, расположенных в сети Интернет.
Сайты можно разделить на: сайт услуг, сайт-визитка, социальные сети, форумы, поисковики, блог, landing page, сайт интернет-магазин.
Интернет магазин – это электронный ресурс, торгующий товарами посредством сети Интернет.
Web-страница – это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows.
Веб-сайт (от английского «web-site»: «web» – паутина, сеть; «site» – место, местоположение) – это структурированная специальным образом информация, которая размещена на сервере и является открытой пользователям сети как для свободного, так и для авторизируемого или ограниченного доступа.
Был проведен сравнительный анализ информационных сайтов, используя критерии оценивания WorldSkills. Критерии состояли из четырех модулей. Первые два модуля посвящены графическому дизайну. Третий модуль посвящен верстке HTML/CSS3. Четвертый модуль, относящийся к программированию на стороне клиента. По данным критериям был произведен анализ трех интернет-магазинов: «Roskosmetika», «LAROCHEPOSAY» и «NYX». При анализе каждого сайта были представлены скриншоты сайтов, с целью подтверждения выполнения критерия.
ГЛАВА II. ПРАКТИЧЕСКАЯ РАБОТА ПО ПРОЕКТИРОВАНИЮ И РЕАЛИЗАЦИИ МАКЕТА САЙТА интернет-магазина косметики
2.1. Этапы проектирования сайта интернет магазина косметики
2.2. Этапы реализации сайта интернет магазина косметики
ВЫВОДЫ ПО II ГЛАВЕ
СПИСОК ЛИТЕРАТУРЫ
1. Дуванов А. А. Web-конструирование. – Петербург: 2017. - 384 с.
2. Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2018. - 491 с.
3. Косарев А. Создание сайтов 4.0. Новейшие технологии высоких продаж. Разработчикам и заказчикам/ А. Косарев. – СПб.: Питер, 2018. – 280 с.
4. Мальцев И. П. Проектирование сайтов: учебное, пособие / И. П. Мальцев. – М.: ЛитРес: Самиздат, 2018. – 170 с.
5. Таровски Д. Основы веб-разработки/ Д. Таровски – Litres, 2019. – 151 с.
6. Типы сайтов [Электронный ресурс] / Z, 2020 Режим доступа URL: https://znet.ru/raskrutka/vidyi-saytov-i-ih-klassifikatsiya-s-primerami/.
7. Определение веб-сайта. Виды и классификации веб-сайтов [Электронный ресурс] / Iamag.ru, 2019. Режим доступа URL: http://iamag.ru/opredelenie-veb-sajta-vidy-i-klassifikacii-veb-sajtov/.
8. Лендинг-пейдж [Электронный ресурс] / VirtOffice, 2019. Режим доступа URL: https://virtoffice.net/landing.
9. Типы и основные виды сайтов [Электронный ресурс] / Альфа СПб, 2019. Режим доступа URL: http://alpha-spb.ru/helpful-information/43-types-of-sites.
ПРИЛОЖЕНИЯ 1
Критерии оценивания по компетенции «Веб-дизайн и разработка»
| Аспект | Максимальный балл |
| Модуль 1. Графический дизайн | |
| Цветовое решение сайта все цвета логотипа (базовые цвета без учета оттенков) | |
| Все страницы имеют одинаковый графический пользовательский интерфейс | |
| Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково | |
| На мобильном макете представлены все блоки главной страницы | |
| Модуль 2.Графический дизайн | |
| Использование графических элементов, позволяющий пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки) | |
| Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок) | |
| Наличие иконок социальных сетей | |
| Наличие на странице формы комментариев | |
| Наличие на странице функциональных кнопок (ссылок) – не более двух | |
| Контент на странице соответствует теме сайта | |
| Не менее четырех визуально разделенных областей | |
| Весь текст выделяется (в том числе и на кнопках) | |
| Модуль 3. Верстка HTML/CSS3 | |
| Валидный код HTML | |
| Используется блочная структура на основе тегов div | |
| Весь текст выделяется, включая текст «ON SALE» и «Preview» | |
| Валидный код CSS | |
| Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | |
| Структура страницы не нарушается при отключении изображений | |
| Модуль 4.Программирование на стороне клиента | |
| Переход к каждой последующей сцене осуществляется по результатам взаимодействия ее объектов или согласно действиям пользователя | |
| На каждой сцене минимум 3 объекта | |
| На разных сценах используются разные объекты | |
Дата добавления: 2020-12-12; просмотров: 128; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!