Структура web-сервиса учета грузоперевозок транспортной компании ООО «Ятэк» | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 21 декабря, печатный экземпляр отправим 25 декабря.

Опубликовать статью в журнале

Автор:

Научный руководитель:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №12 (198) март 2018 г.

Дата публикации: 24.03.2018

Статья просмотрена: 37 раз

Библиографическое описание:

Цыдыпова Е. Г. Структура web-сервиса учета грузоперевозок транспортной компании ООО «Ятэк» // Молодой ученый. — 2018. — №12. — С. 26-29. — URL https://moluch.ru/archive/198/48919/ (дата обращения: 13.12.2019).



Интерфейс любого веб-проекта должен соответствовать следующим требованиям:

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

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

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

‒ быстрая заражаемость страниц. Размер страниц должен весть как можно меньше, что бы они загружались быстрее даже у тех пользователей, кто сидит на модемном подключении. Каждая страница имеет анимационных элементов на приложения, небольших, многократно повторяющихся, рекламных роликов и прочее;

‒ фиксированный или резиновый дизайн. Продуманный дизайн должен хорошо смотреться, и корректно отображаться, на разных разрешениях экрана одинаково.

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

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

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

‒ название фирмы, логотип;

‒ само название приложения;

‒ и т. д.

Чем проще выполнена верхняя часть страницы, тем легче запомнить название приложения и саму организацию.

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

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

Главная страница является лицом приложения и кратко отображает максимальное количество информации. Главной страницей ООО «ЯТЭК» является страница bts.ru, представленная на рисунке 1.

Рис. 1. Главная страница

На главной странице отображаются описание компании, адрес и банковские реквизиты, а также переходы к разделам «Перевозки», «Галерея», «Вопросы и ответы». Раздел «Перевозки» содержит свои подразделы, позволяющие получить ту или иную информацию.

Рассмотрим составленную логическую модель сайта, которая представляет на рисунке 2.

Рис. 2. Логическая модель

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

Пользователи WordPress могут устанавливать и переключаться между разными темами. Темы позволяют пользователям изменять внешний вид и функциональность веб — сайта WordPress без изменения основного кода или содержимого сайта. На каждом веб — сайте WordPress требуется хотя бы одна тема, и каждая тема должна быть разработана с использованием стандартов WordPress со структурированным PHP, допустимым HTML (HyperText Markup Language) и каскадным таблицами стилей (CSS). Темы могут быть установлены непосредственно с помощью инструмента администрирования WordPress «Внешний вид» на панели управления, или папки с темами могут быть скопированы непосредственно в каталог тем, например, через FTP, PHP, HTML и CSS, найденные в темах, могут быть напрямую изменены для изменения поведения темы, или тема может быть «дочерней» темой, которая наследует настройки из другой темы и выборочно переопределяет функции. Темы WordPress обычно подразделяются на две категории: бесплатную и премиальную. Многие бесплатные темы перечислены в каталоге темы WordPress, а темы премиум — класса доступны для покупки с рынков и отдельных разработчиков WordPress. Пользователи WordPress также могут создавать и разрабатывать свои собственные темы. Бесплатная тема Underscores, созданная разработчиками WordPress, стала популярной основой для новых тем.

Во внешнем виду, показанному на рисунке 3, для главной страницы автоматически можно выбрать следующие пункты:

‒ тема, свойства сайта;

‒ цвета, изображение заголовка;

‒ фоновое изображение, меню;

‒ виджеты, раздел страницы.

Рис.3. Разработка структуры шаблона

Созданный дизайн соответствует стилистике компании, её цветовой гамме и тематической направленности отделов. Пользователь имеет возможность выбирать вид перевозок, осуществлять поиск, который может найти то, что имеет отношения к компании и перевозкам.

Вверху находится «шапка» данной страницы и сайта в целом. Она также будет отображаться во всех остальных страницах и присутствовать без изменений. «Шапка» сайта очень важная составляющая, потому что она находится в самом верху сайта.

Сверху находятся разделы: «Главная»; «Перевозки»; «Галерея»; «Вопросы и ответы». Снизу расположены логотип и наименование компании, которые представлены на рисунке 4.

Внизу главной страницы находится специальная нижняя полоса приложения, которая несет в себе не менее важные элементы для пользователя, ее называют «Подвалом» страницы.

«Подвал» сайта состоит из 2 частей. Слева расположена надпись, отображающая название города и год создания сайта. Справа расположена надпись «Все права защищены».

Рис. 4. Логотип и наименование

При выборе пункта «Перевозки» раскрываются подпункты (Железнодорожные перевозки, Автомобильные перевозки), отображены на рисунке 5:

Рис. 5. Подпункты меню

При переходе к железнодорожным перевозкам отображаются цена, информация о перевозках, доставка сборных грузов в крытом вагоне (рисунок 6).

Рис. 6. Цена и информация

В области «Поиск» пользователь вводит информацию, которую знает, например, свою фамилию, имя, отчество или любую другую информацию (Номер накладной, Дата отправления и другое), затем отображается информация, соответствующая запросу. Для удобного отображения таблицы используется горизонтальная прокрутка, с помощью которой пользователь может просмотреть всю информацию.

При переходе к другим видам перевозок будет отображать аналогичная информация, но данные будут другими.

Литература:

  1. Бужан В. В. Объектно-ориентированное программирование: учебно-методическое пособие для студентов очной и заочной форм обучения — Информатика и вычислительная техника. Краснодар: ИМСИТ, 2013. 52 с.
  2. Баранова Е. К. Основы информатики и защиты информации: учеб. Пособие. М.: ИНФРА-М, 2013. 183 с.
  3. Борщев В. Б. Заметки о научном портале ВИНИТИ [Текст] / В. В. Борщев, Всероссийский институт научной и технической информации РАН Научно-техническая информация. Сер. 2. Информационные процессы и системы. 2010. № 3. С. 8–22.
  4. Горинов П. Г. Осваиваем основные системы управления сайтом. М.: ДМК-Пресс, 2010. 187 с.
  5. Колгомогоров Д. Н. Основы веб-мастерства. СПб.: Питер, 2010. 114 с.
  6. Краскин Н. Веб-дизайн. СПб.: Символ — Плюс, 2011. 339 с.
Основные термины (генерируются автоматически): главная страница, CSS, HTML, PHP, приложение, рисунок, пользователь, информация, страница, внешний вид.


Похожие статьи

Встраивание CSS-стилей в HTML-документы | Статья в журнале...

HTML (от англ. HyperText Markup Language — гипертекстовый язык разметки)

Если CSS подключается как внешний к документу, то также необходимо использовать CSS-селекторы

Структура решения. Общую структуру приложения можно представить в следующем виде

Адаптивный дизайн веб-сайта с использованием... | Молодой ученый

Ключевые слова: HTML, CSS, Javascript, jQuery, фреймворк, фронтэнд, верстка, адаптивный дизайн, веб-разработка.

Когда речь идет о верстке, то имеется в виду фреймворк как готовая библиотека CSS и JavaScript файлов, которые используются в оформлении HTML-страницы.

Реализация архитектурного шаблона MVC с использованием...

Рассмотрим пример PHP-приложения

Диаграмма UML, иллюстрирующая взаимосвязи между классами, приведена на рисунке 1.

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

Разработка информационного web-портала | Статья в сборнике...

Рис. 1. Главная страница. Также на главной странице размещено приветствие, рисунок 2

‒ «О нас», раздел был представлен ранее, на рисунках 1 и 2, он содержит в себе приветствие и краткую информацию о назначении сайта

Разработка интеллектуальных средств поддержки веб-порталов...

CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык описания стилей веб-документа (веб-страницы), то есть

1 Информация о CMS.

2 Никсон Р. Н64 «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML» 5. 4-е изд.

Разработка программного модуля для обеспечения комфортного...

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

В основе веб страницы, отображаемой в браузере, лежит html-разметка

Для изменения внешнего вида графических элементов используются фильтры.

Технология создания веб-сайта туристского предприятия...

Рис. 3. Внешний вид страницы «Главная». Внешний вид страницы «Главная» полностью соответствует шаблону, представленному на рисунке 2.

Начиная с версии WordPress 3.6, если тема поддерживает HTML5 Markup, что имеет место, если включена такая поддержка с...

Формирование культуры пользователей посредством визуальной...

...структуры веб страниц до выбора наиболее удобных форм подачи информации.

стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS

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

Разработка мобильного мультиплатформенного приложения...

Полезная информация. Спецвыпуски.

Фреймворк позволяет разработчику программного обеспечения строить мобильные приложения, используя CSS, HTML5 и JavaScript, вместо

Preconditions: 'Пользователь' находится на странице 'welcome'; участник не авторизован.

Похожие статьи

Встраивание CSS-стилей в HTML-документы | Статья в журнале...

HTML (от англ. HyperText Markup Language — гипертекстовый язык разметки)

Если CSS подключается как внешний к документу, то также необходимо использовать CSS-селекторы

Структура решения. Общую структуру приложения можно представить в следующем виде

Адаптивный дизайн веб-сайта с использованием... | Молодой ученый

Ключевые слова: HTML, CSS, Javascript, jQuery, фреймворк, фронтэнд, верстка, адаптивный дизайн, веб-разработка.

Когда речь идет о верстке, то имеется в виду фреймворк как готовая библиотека CSS и JavaScript файлов, которые используются в оформлении HTML-страницы.

Реализация архитектурного шаблона MVC с использованием...

Рассмотрим пример PHP-приложения

Диаграмма UML, иллюстрирующая взаимосвязи между классами, приведена на рисунке 1.

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

Разработка информационного web-портала | Статья в сборнике...

Рис. 1. Главная страница. Также на главной странице размещено приветствие, рисунок 2

‒ «О нас», раздел был представлен ранее, на рисунках 1 и 2, он содержит в себе приветствие и краткую информацию о назначении сайта

Разработка интеллектуальных средств поддержки веб-порталов...

CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык описания стилей веб-документа (веб-страницы), то есть

1 Информация о CMS.

2 Никсон Р. Н64 «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML» 5. 4-е изд.

Разработка программного модуля для обеспечения комфортного...

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

В основе веб страницы, отображаемой в браузере, лежит html-разметка

Для изменения внешнего вида графических элементов используются фильтры.

Технология создания веб-сайта туристского предприятия...

Рис. 3. Внешний вид страницы «Главная». Внешний вид страницы «Главная» полностью соответствует шаблону, представленному на рисунке 2.

Начиная с версии WordPress 3.6, если тема поддерживает HTML5 Markup, что имеет место, если включена такая поддержка с...

Формирование культуры пользователей посредством визуальной...

...структуры веб страниц до выбора наиболее удобных форм подачи информации.

стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS

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

Разработка мобильного мультиплатформенного приложения...

Полезная информация. Спецвыпуски.

Фреймворк позволяет разработчику программного обеспечения строить мобильные приложения, используя CSS, HTML5 и JavaScript, вместо

Preconditions: 'Пользователь' находится на странице 'welcome'; участник не авторизован.

Задать вопрос