Пояснительная записка (1195819), страница 2
Текст из файла (страница 2)
– разделы горизонтального меню не ссылаются на страницы;
– при наведении курсора на раздел в горизонтальном меню, появляется выпадающее меню, которое исчезает при перемещении курсора вниз, если же курсор перемещается вверх по шапке, то выпадающее меню остается на месте;
– строка поиска является частью горизонтального меню и занимает пространство, отведенное под разделы, при том что имеется достаточно пространства для строки в верхней части шапки;
– дополнительная строка меню является набором ссылок на основную информацию, при том что, в горизонтальном меню есть раздел «Информация»;
– наличие пунктов горизонтального меню «Информация», «Компания», «Контакты» усложняют навигацию, так как вся информация о компании и контактах должна быть в разделе «Информация», а также необходимость раздела «Контакты» ставится под сомнение из-за наличия контактов в верхней части шапки.
Примерами интернет-магазинов с хорошим дизайном шапок могут служить сайты flipkart.com и ru.aliexpress.com, которые показаны на рисунках 1.7 и 1.8 соответственно.
Рисунок 1.7 – Шапка сайта flipkart.com
Рисунок 1.8 – Шапка сайта ru.aliexpress.com
1.3.3 Подвал
Подвал – это самая нижняя часть страницы. Не существует каких-либо ограничений на состав подвала, но традиционно в нем имеются ссылки на всю информацию, логотипы и ссылки партнеров и компаний-производителей, формы регистрации и прочее. Часто просмотр страницы заканчивается именно подвалом, и пользователь может перейти в нужный раздел через него. Подвал имеющегося интернет-магазина представлен на рисунке 1.9.
Рисунок 1.9 – Подвал сайта
В подвале рассматриваемого сайта имеется:
– реклама;
– название компании;
– дубликат ссылок горизонтального меню из шапки;
– значок стрелки;
– контактные данные из шапки;
– счетчик посетителей.
Анализ данного подвала выявляет его бесполезность, при том, что он занимает значительное пространство страницы. Значок перехода к вверху страницы не выделяется и не выглядит кликабельным. Реклама занимает преимущественно правую половину верхней части подвала, остается неиспользуемое пространство. Весь подвал не выглядит структурированным и модульным.
Для сравнения можно выделить сайт ebay.com. Подвал этого интернет-магазина, представленный на рисунке 1.10, является максимально информативным и полным, за счет чего шапка остается не загруженной.
Рисунок 1.10 – Подвал сайта ebay.com
В соответствии с проведенным исследованием в области дизайна можно сделать следующие замечания, которые будут учтены в создании прототипа и макета интернет-магазина:
– основной выбор стоит делать в сторону нейтральных и светлых цветов, не использовать контрастных цветовых схем как в элементах страниц, так и в шрифтах;
– все ссылки и кнопки должны подсвечиваться при наведении и быть выполнены в едином стиле;
– для удобства чтения сайта верстка должна быть осуществлена по модульной сетке;
– шапка интернет-магазина должна иметь большую поисковую строку;
– подвал должен быть максимально информативным.
1.3.4 Структура сайта и содержание страниц
Структура сайта – страницы, разделы, навигация (ссылки); расположение этих элементов и их связь между собой [4]. Самой подходящей структурой является древовидная не более трех уровней. На рисунке 1.11 представлена логически-продуманная структура интернет-магазина, которую предпочитает основное число известных сайтов, таких как ebay.com, aliexpress.com, flipkart.com, ozon.ru, ikea.com.
Рисунок 1.11 – Структура интернет-магазина в соответствии с современными
рекомендациями
Так структура анализируемого сайта имеет слишком большое число уровней в каталоге товаров, что приводит к увеличению времени на поиск необходимого товара. При этом, практически, все ссылки на информационные страницы расположены в выпадающих меню шапки и нарушена логика группировки ссылок. На главной странице большая нагрузка различными кнопками, ссылками и разделами, которые в свою очередь иногда продублированы.
Содержание станиц должно быть модульным, удобным для чтения [1]. Из минусов содержания данного интернет-магазина можно выделить: слишком большой текст, информация научного типа, сплошной текст без выпадающих блоков текста (спойлеров) [9] или таблиц. Также, многие страницы сайта оказываются пустыми за счет реконструкции или в стадии заполнения, как показано на рисунке 1.12, такие страницы необходимо скрыть от посетителей, так как это показывает довольно безответственное отношение компании к ведению интернет магазина, следовательно, приводит к потере доверия со стороны клиентов, уменьшая трафик соответственно.
Рисунок 1.12 – Страница в стадии заполнения
1.4 Актуальность работы и обоснование ее
необходимости
Создание интернет-магазина для компании, продающей товары только в своем городе, является огромным шагом и ведет к росту прибыли и расширению предприятия.
Для того чтобы внедрение web-приложения оправдало положительные ожидания необходимо учитывать некоторые требования и правила при разработке интернет-магазина. Так, использование неправильного web-приложения может привести к падению числа посещений и, соответственно, конверсий. Следовательно, в такой интернет-магазин необходимо вносить изменения, иногда настолько крупные, что будет целесообразным проектировать и разрабатывать web-приложение с самого начала.
Работа над заказом компании «ИТЦ КОМПЬЮТЕР» является актуальной, потому что от нее зависит рост прибыли компании, что является основной целью любого коммерческого предприятия.
1.5 Выбор средств и технологий разработки
1.5.1 Обзор языков программирования
Для того, чтобы начать разработку сайта необходимо знание основных языков верстки: HTML, CSS и JavaScript [5]. Также, для создания серверной части сайта следует изучить такие языки, как PHP и SQL.
Язык разметки HTML
HTML (англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
На данный момент существует несколько версий HTML, но актуальной является пятая версия. HTML5 (англ. HyperText Markup Language, version 5) – язык для структурирования и представления содержимого всемирной паутины. Цель разработки HTML5 – улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для трансляторов.
В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул [8]. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например, <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.
Язык описания CSS
CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Также, как и язык HTML, CSS имеет несколько поколений, самое используемое и актуальное на данный момент третье поколение. CSS3 (англ. Cascading Style Sheets 3 – каскадные таблицы стилей третьего поколения) – активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое [7].
Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо.
Сценарный язык JavaScript
JavaScript – прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности web-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам – функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания – что придаёт языку дополнительную гибкость [10].
Скриптовый язык PHP
PHP (англ. Personal Home Page Tools – «Инструменты для создания персональных веб-страниц») – скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений [11]. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов
В области веб-программирования, в частности серверной части, PHP – один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET).
Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств для разработки веб-приложений. Основные из них [12]:
– автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
