Размещено на http://www.allbest.ru/



Оглавление

Введение

1. Основная часть

1.1 Постановка задачи

1.2 Анализ методов и средств решения поставленной задачи

1.3 Обзор аналогов

1.4 Анализ требований к web - сайту

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

1.4.2 Определение реализуемых функций

1.5 Проектирование web - сайта

1.5.1 Выбор инструментальных средств разработки

1.5.2 Проектирование пользовательского интерфейса

1.6 Разработка web-сайта

1.6.1 Разработка структуры web-сайта

1.6.2 Реализация web - сайта

1.7 Тестирование

1.7.1 Виды тестирования web-сайта

1.7.2 Обоснование выбора методики тестирования

1.7.3 Результаты тестирования

Заключение

Список используемых источников



Введение

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

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

Web-технология полностью перевернула наши представления о работе с информацией. Выяснилось, что традиционные параметры развития вычислительной техники, такие как, производительность, пропускная способность, емкость запоминающих устройств не учитывали главного изъян системы - интерфейса с человеком. Устаревший механизм взаимодействия человека с информационной системой сдерживал внедрение новых технологий и уменьшал выгоду от их применения. И только когда интерфейс между человеком и компьютером был упрощен до естественного восприятия, последовал высокий интерес к возможностям вычислительной техники.

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

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

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



1. Основная часть

1.1 Постановка задачи

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

Объектом данной ВКР выбран web-сайт кафедры автоматики и вычислительной техники Вологодского государственного университета. Данный проект включает в себя несколько страниц, которые должны содержать полную информацию о работе кафедры и её преподавателях, а также изменение структуры самого сайта, согласно требованиям.

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

1.2 Анализ методов и средств решения поставленной задачи

Для разработки web-сайтов существует несколько способов:

· создание с помощью написания программного кода;

· с помощью сервиса;

· использование CMS;

· использование визуального редактора.

В настоящее время для разработки сайтов во всемирной сети Интернет разработчики могу использовать несколько методов:

а) создание сайтов с помощью языка программирования:

HTML (HyperText Markup Language -- «язык гипертекстовой разметки») -- стандартизированный язык разметки документов во Всемирной Паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами. Полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML до 5-й версии определялся как приложение SGML (стандартного обобщённого языка разметки по стандарту ISO 8879). Спецификации HTML5 формулируются в терминах DOM (объектной модели документа). Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста.

Во Всемирной Паутине HTML-страницы, как правило передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

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

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например к SVG или XUL.

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

JavaScript -- мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript (стандарт ECMA-262).

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

Основные архитектурные черты:

· динамическая типизация,

· слабая типизация,

· автоматическое управление памятью,

· разработка прототипа будущего продукта,

· функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать его похожим на Java, но при этом лёгким для использования не программистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Для обеспечения высокого уровня абстракции и достижения приемлемой степени кросс-браузерности при разработке веб-приложений используются библиотеки JavaScript. Они представляют собой набор многократно используемых объектов и функций. Среди известных JavaScript библиотек можно отметить React.js, Vue.js, Ember.js, Adobe Spry, AngularJS, Dojo, Extjs, jQuery, Mootools, Prototype, Qooxdoo, Underscore и Node.js.

1) React.js

React (иногда React.js или ReactJS) -- JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков.

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

Особенности React:

1. Однонаправленная передача данных

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

2. Виртуальный DOM

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

3. JSX

JavaScript XML (JSX) -- дополнение к синтаксису JS, позволяющее применять аналогичный HTML синтаксис для аннотирования структуры интерфейса. Чаще всего, элементы библиотеки, написаные при использовании такой технологии, как JSX, но при этом присутствует вариант применения «чистого» JS. Нужно отметить, что технология JSX сильно напоминает совершенно другой язык, созданный в компании Facebook для расширения PHP, XHP.

4. Методы жизненного цикла

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

а) shouldComponentUpdate - предотвращает рендеринг элемента при помощи возврата false, если перерисовка не необходима.

б) componentDidMount -- вызывается после первой отрисовки компонента.

Данный метод чаще всего применяется при необходимости получения данных их удаленного источника с использованием API.

в) render -- данный метод жизненного цикла ReactComponent представляет собой важнейший компонент. Любой из элементов не сможет полноценно функционировать без этого компонента. Обычно этот метод вызывается при изменении данных компонента для перерисовки данных в интерфейсе.

2) Vue.js

Vue.js -- JS-фреймворк, распространяющийся по свободной лицензии MIT License. Данная программная библиотека чаще всего применяется с целью разработки пользовательских интерфейсов. Ее легко интегрировать в проекты с использованием других JavaScript-библиотек. Также данный веб-фреймворк показывает высокие результаты для разработки одностраничных приложений.

1. Virtual DOM

Ядром VueJS выступает Virtual DOM, как, например, такие известные программные библиотеки, как React, Ember, Bootstrap и другие. Чаще всего мутации данных не включаются в DOM, а происходит клонирование исходного DOM, который, в свою очередь, выступает в образе JS структуры данных. В случае если требуется внести изменения, то они записываются в JavaScript структуры данных. После этого, внесенные изменения сравниваются с исходной структурой данных. Затем финальные изменения вносятся в реальный DOM, и их пользователь уже сможет наблюдать. Такой подход хорош в тех случаях, когда возникают вопросы оптимизации финального продукта, так как для него не требуется задействовать большого количества входных данных и последующие изменения будут происходить быстрее.

2. Привязка данных

Функции привязки данных выступают помощниками в управлении значениями или при присваивании HTML-атрибутам, изменений стилей, а также при присваивании классов при помощи привязывающей директивы VueJS v-bind.

3. Компоненты

С точки зрения терминов фреймворка VueJS это важнейшая функция, которая помогает создавать пользовательские компоненты. В дальнейшем данные элементы повторно используются в HTML.

4. Управление событиями

v-on - атрибут, добавляющийся к элементам Document Object Model, чтобы прослушивать события в VueJS.

5. Анимация/Переходы

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

6. Вычисляемые свойства

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

7. Шаблоны

VueJS представляет шаблоны, основанные на HTML, которые связывают DOM с данными экземпляра Vue. Vue преобразует паттерны в функции отображения виртуального DOM. При этом вам также дозволено применять данный паттерн функций Render. Для того, чтобы его использовать достаточно заменить шаблон render-функцией.

8. Директивы

Данная библиотека включает в себя следующие директивы:

- v-if;

- v-else;

- v-show;

- v-on;

- v-bind;

- v-model.

9. Наблюдатели

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

10. Маршрутизация

Общение между созданным UI интерфейсом и сетью Интернет осуществляется при помощи класса vue-router.

11. Компактность

Созданные при помощи VueJS скрипты имеют очень компактный размер, что, в сою очередь, обеспечивает высокую производительность.

12. Сравнение с другими фреймворками

Давайте теперь сравним VueJS с такими фрейморками как React, Angular, Ember, Knockout и Polymer.

· VueJS и React

- Virtual DOM

Как было уже отмечено, Virtual DOM - это виртуальное представление дерева DOM. Благодаря виртуальному DOM создаётся тот же самый объект JavaScript, что и в настоящем DOM. В каждой ситуации, когда нам необходимо произвести изменения в DOM, создаётся новый объект и выполняются изменения. Затем оба объекта сравниваются между собой и результирующие изменения заносят в реальный DOM. И VueJS, и React используют виртуальный DOM, что ускоряет их работу.

- Шаблон и JSX

VueJS использует html, js и css как отдельные компоненты будущей системы. React использует jsx-подход. Для ReactJS абсолютно всё - это JavaScript. HTML и CSS являются частью JavaScript.

- Программы установки

React использует create react app, а VueJS - vue-cli /CDN/npm. Оба фреймворка просты в использовании, а проект отвечает всем базовым требованиям. Для создания приложении с помощью React необходимо использовать webpack. В случае VueJS мы можем начать кодировать в jsfiddle или codepen, используя библиотеку cdn.

- Популярность

React имеет намного большую популярность, чем VueJS. Для React разработчиков открыто больше дверей для трудоустройства, нежели для специалистов VueJS. Причина большей популярности React заключается в разработчике этой библиотеки, а именно -- компания Facebook. Так как React использует основные понятия JavaScript, он применяет также его наилучшие практики. Разработчик, работающий с React точно будет хорошо разбираться в JavaScript.

VueJS же это активно развивающийся фреймворк. На данный момент возможность трудоустройства со знанием VueJS ниже, чем с React. Данные различных опросов показывают, что множество разработчиков постепенно адаптируются к VueJS, что телеграфирует нам о том, что в будущем он может составить серьезную конкуренцию React и Angular. Над различными функциями VueJS работают члены очень активного сообщества. Это сообщество поддерживает vue-router и регулярно выпускает обновления к нему.

VueJS перенял различные преимущества Angular и React и построил эффективную биб лиотеку. Приложения, написанные при помощи VueJS имеют как более высокую производительность, так и более быстрый отклик по сравнении с React/Angular.

3) Node.js

Node или Node.js -- это программная платформа, ядром которой является движок веб-бразуеров V8 (транслирующем JavaScript в машинный код), преобразующий JS из узконаправленного языка в язык общего назначения. Node.js позволяет JavaScript оперировать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивать вызовы к ним из JavaScript-кода. Node.js используется в основном в качестве веб-сервера. При этом есть возможность создавать оконные приложения при помощи таких расширений как:

- Electron

- AppJS

- NW.js.

Или даже программировать микроконтроллеры.

Давайте обозначим важнейшие функции данной платформы:

а) асинхронные скрипты на основе событий. Все API-интерфейсы библиотеки Node.js являются неблокирующими. Это означает, что сервер на основе Node.js никогда не ожидает возврата данных от API. После вызова сервер переходит к следующему API, а механизм уведомлений Node.js Events помогает серверу получить ответ от предыдущего вызова API.

б) очень быстрый. Будучи построенным на JavaScript-браузере Google Chrome V8, библиотека Node.js очень быстро выполняется в коде.

в) однопоточный, но легко масштабируемый -- Node.js использует однопоточную модель с циклом событий. Механизм Event помогает серверу реагировать неблокирующим образом и обеспечивает высокую масштабируемость, в отличие от традиционных серверов, которые создают ограниченные потоки для обработки запросов. Node.js использует однопоточную программу, и одна и та же программа может обслуживать гораздо большее количество запросов, чем традиционные серверы, такие как Apache HTTP Server.

г) отсутствие кэширования -- приложения Node.js не кэшируют данные, а выводят данные фрагментарно, то есть по частям.

На следующей диаграмме приведены некоторые важные компоненты Node.js. (рис. 1)

Рисунок 1 Компоненты Node.js

Краткий перечень, где Node.js зарекомендовал себя с лучшей стороны:

· приложения, связанные с вводом-выводом данных;

· приложения для потоковой передачи данных;

· интенсивное использование данных в режиме реального времени;

· приложения на основе API JSON.

4) AngularJS

AngularJS - JavaScript-фреймворк с открытым исходным кодом. Используется для разработки SPA-приложений (одностраничных). Главная философия AngularJS:

- расширение браузерных приложений на основе MVC-шаблона;

- упрощение тестирования;

- упрощение разработки.

Интерфейс описывается с помощью парадигмы декларативного программирования. Бизнес-логика отделена от кода интерфейса, что сказывается положительно на тестируемости и расширяемости приложений.

При работе с HTML кодом в пользовательские атрибуты записываются директивы, которые в свою очередь являются «мостом» между потоком ввода и вывода области страницы с моделью. При этом они представляют собой самые обычные переменные JavaScript. Обычно значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

Еще одна интересная особенность Angular - двухсторонне связывание данных. Благодаря данному паттерну появляется возможность динамического изменения данных в одном месте интерфейса при изменении модели данных в другом. Таким образом, происходит синхронизация представления и модели.

5) Flask

Flask - микрофреймворк для создания веб-приложений на языке программирования Python, использующий набор инструментов Werkzeug, а также шаблонизатор Jinja2. Относится к категории минималистичных каркасов веб-приложений, сознательно предоставляющих лишь самые базовые возможности.

6) Django

Django - свободный фреймворк для веб-приложений на языке Python, использующий шаблон проектирования MVC. Проект поддерживается организацией Django Software Foundation.

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

Для работы с базой данных используется собственная ORM, в котором модель данных описывается классами Python, и по ней генерируется схема базы данных.

Архитектура Django похожа на «Модель-Представление-Контроллер». Контроллер классической модели MVC примерно соответствует уровню, который в Django называется Представление, а презентационная логика Представления реализуется в Django уровнем Шаблонов.

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

Некоторые из возможностей Django:

· ORM, API доступа к БД с поддержкой транзакций;

· встроенный интерфейс администратора, с уже имеющимися переводами на многие языки;

· диспетчер URL на основе регулярных выражений;

· расширяемая система шаблонов с тегами и наследованием;

· система кеширования;

· интернационализация;

· подключаемая архитектура приложений, которые можно устанавливать на любые Django-сайты;

· «generic views» -- шаблоны функций контроллеров;

· авторизация и аутентификация, подключение внешних модулей аутентификации: LDAP, OpenID и прочие;

· промежуточные слои («middleware») для построения дополнительных обработчиков запросов, как например включённые в дистрибутив фильтры для кеширования, сжатия, нормализации URL и поддержки анонимных сессий;

· библиотека для работы с формами (наследование, построение форм по существующей модели БД);

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

б) использование сервиса

Метод с использованием сервиса для создания сайтов хорошо подойдет новичкам. В сети Интернет существует множество таких сервисов. К ним можно отнести:

· Blogger;

· LiveJournal;

· LiveInternet;

· UCOZ и т. д.

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

в) Использование CMS

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

Основное преимущество -- возможность для владельца ресурса вносить правки в любой момент, не привлекая специалистов.

Основной функционал CMS:

· предоставление инструментов для создания содержимого, организация совместной работы над содержанием;

· основные операции по управлению содержимым: хранение, контроль версий, соблюдение режима доступа, управление потоком документов;

· публикация содержимого;

· представление информации в виде, удобном для навигации, поиска.

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

К таким системам можно отнести:

· WordPress;

· Joomla;

· Drupal;

· Magento;

· Mambo и др.

Главная особенность сайта, созданного с помощью такой системы -- универсальность и доступность.

1. WordPress

Данная платформа написана и работает на языке программирования PHP, этот скриптовый язык используется для разработки веб-приложений.

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

Функционал в WordPress расширяется двумя способами:

- редактирование исходных элементов написанием кода;

- установка дополнительных плагинов и расширений.

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

Слаг или ярлык -- ссылка, созданная специально для определенной страницы, записи, рубрики, то есть уникальная по сути. Информацию можно найти и отредактировать в разделе “Свойства”. Тема -- файлы, использующиеся для графического оформления сайта, его функционал.

2. Joomla

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

- простой одностраничный сайт;

- сложный интернет магазин;

- каталог товаров и т.д.

Исходный код движка написан на языке PHP и JavaScript, при этом в качестве хранилища информации используется одна из СУБД MySQL, PostreSQL, MsSQL.

Главные достоинства данной CMS:

- простота управления;

- надёжность;

- доступность.

Для работы с Joomla нет необходимости знать какие-либо языки программирования (исключение - создание собственных расширений). Таким образом, алгоритм создания сайта на данной системе выглядит следующим образом:

1) установка движка CMS;

2) установка расширений (при необходимости);

3) настройка будущего сайта через панель администрирования, используя специальные элементы управления;

4) наполнение сайта необходимым контентом.

3. Drupal

Архитектура Drupal позволяет применять его для построения различных типов сайтов -- от блогов и новостных сайтов до информационных архивов или социальных сетей. Имеющуюся по умолчанию функциональность можно увеличивать подключением дополнительных расширений -- «модулей» в терминологии Drupal. Наиболее важные функции, предоставляемые Drupal «из коробки»:

· таксономия;

· широкий функционал для настройки свойств рубрикаторов: плоские списки, иерархии, иерархии с общими предками, синонимы, родственные категории;

· вложенность категорий любой глубины;

· поиск по содержимому сайта, в том числе поиск по таксономии и пользователям;

· ролевая модель пользователей;

· динамическое построение меню;

· поддержка XML-форматов: вывод документов в RDF/RSS, агрегация материалов с других сайтов, BlogAPI для публикации материалов с помощью внешних приложений;

· использование сервиса авторизации OpenID;

· «человеко-понятные» URL;

· интернационализация контента;

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

Основной недостаток - отсутствие обратной совместимости.

4. Magento - CMS для создания интернет магазинов. Основной использующийся язык - PHP. Также хорошо работает с СУБД MySQL. Распространяется по свободной лицензии.

Возможности и особенности Magento.

1) Данная платформа позволяет создавать сразу несколько Интернет-ресурсов и управлять ими одновременно, что сильно упрощает их администрирование.

2) Хорошо структурированная система каталога. Имеет следующие возможности: сравнение товаров, свободное управление ценами на товары, управление акций и подарочных сертификатов.

3) Поисковая оптимизация.

4) Поддержка метатегов - description и keywords.

5) Для каждого товара можно добавить нужное окончания в адресе сайта.

6) Magento сама делает карту XML сайта для поисковиков.

7) Magento предоставляет систему мультивалютности и конвертации валют.

8) Поддержка бесплатных и платных модулей и расширений.

Среди основных преимуществ Magento необходимо выделить следующие:

· система кэширования Varnish Cash - ускоряет загрузку страниц;

· процессы индексации -- индексация страниц сайта производится в фоновом режиме и это не будет сказываться на скорости его работы;

· полная интеграция с Google Analytics - полная отчетность по магазину и интеграция с такими сервисами, как Google AdWords;

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

· поддержка нескольких систем оплаты, в том числе и PayPal;

· возможность совершения больших покупок с чеком до 300 позиций;

· высокая скорость работы даже при большом количестве посетителей;

· мультисайтовость;

· адаптивность шаблонов под мобильные устройства.

Недостатки CMS Magento:

· сложный процесс установки;

· необходимость в доработках;

· необходимость в качественном хостинге;

· малое количество дополнение.

5. Mambo

Mambo - это бесплатная система управления контентом с открытым исходным кодом для создания и управления веб-сайтами с помощью простого веб-интерфейса.

Используя движок можно создать сайт любого уровня сложности. В стандартный пакет системы входит десять встроенных моделей, графический редактор, удобный интерфейс администратора с многоязычной поддержкой, а также набором плагинов и скриптов. На основе CMS Mambo была создана аналогичная система - Joomla.

Особенности:

1) Кэширование страниц.

2) Расширенные методы шаблонов.

3) Надежный API: может предоставлять RSS-каналы, а также автоматизировать многие задачи.

Особенности интерфейса:

- печатные версии страниц;

- вспышки новостей;

- блоги;

- форумы;

- опросы;

- календари;

- поиск веб-сайта;

- интернационализацию языка и другие.

И так, какие же методы создания сайтов являются наиболее удобными.

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

- полный контроль над сайтом;

- полный контроль над дизайном;

- полный контроль над логикой.

2. Использование CMS системы, не стоит недооценивать. Данный метод считается одним из наиболее удобных, быстрых и практичных. Этот способ предоставляет возможность гибкой настройки начиная от шрифта и заканчивая логикой самого сайта, редактирования самой CMS или же отдельных элементов, так же в таких системах легко добавлять или изменять контент. Именно указанные выше преимущества позволяют считать данный метод создания сайтов более эффективным. Данный подход не уступает обычному написанию программного кода и люди, которые сейчас попадают в веб-программирование, в основном выбирают за его лёгкость, гибкость и быстроту создания.

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

Для реализации проекта в рамках выпускной квалификационной работы будут использован метод написания программного кода или, так называемый, ручной метод создания веб-сайта. Было решено использовать возможности таких технологий как: HTML5, CSS3, JavaScript (библиотека jQuery).



1.3 Обзор аналогов

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

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

Для того чтобы понимать отличительные особенности нынешнего веб-сайта кафедры от рассмотренных примеров, ниже представлены screenshots некоторых страниц нынешнего сайта. (рис. 2,3) методичка вероники

Рисунок 2 Сайт кафедры автоматики и вычислительной техники, главная страница



Рисунок 3 Сайт кафедры автоматики и вычислительной техники, страница преподавателей

Далее представлены скриншоты тех же страниц сайтов - аналогов. (рис. 4-9) 4, 5, 6, 7, 8 рис

Рисунок 4 Сайт кафедры математики, главная страница

Рисунок 5 Сайт кафедры математики, страница преподавателей

Рисунок 6 Сайт кафедры информатики и информационных технологий, главная страница



Рисунок 7 Сайт прикладной математики, главная страница



Рисунок 8 Сайт кафедры физики, главная страница

Рисунок 9 Сайт кафедры физики, страница преподавателей

После просмотра аналогов разрабатываемого сайта было решено выделить несколько критериев, которые должны быть реализованы в выпускной квалификационной работе:

· эргономичный дизайн;

· современный интерфейс;

· информативность страниц.

1.4 Анализ требований к web - сайту

Для реализуемого проекта были объявлены требования к дизайну сайта:

· эргономичный дизайн;

· современный интерфейс;

· информативность страниц.

Так же, были предоставлены требования к структуре сайта согласно приказу № 07.01-35/0919 от 27.11.2018 «О сайтах институтов и кафедр». В данном приказе отражена примерная структура разрабатываемого проекта.

Согласно представленным требованиям производилась разработка сайта кафедры автоматики и вычислительной техники Вологодского государственного университета.

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

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

1.4.2 Определение реализуемых функций

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

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

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

1.5 Проектирование web - сайта

Проектирование сайта включает в себя 8 основных этапов:

· определение целей создания данного сайта;

· проведение исследований по теме и анализ предметной области;

· определение типа сайта, разработка технического задания и структуры;

· разработка макета дизайна сайта;

· верстка сайта;

· заполнение сайта контентом;

· тестирование сайта и исправление ошибок;

· публикация сайта в сети Интернет.

Первым и самым важным этапом в создании веб-сайта является определение цели создания. От цели зависит каждый этап и процесс создания в целом.

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

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

· тип сайта;

· функционал;

· стиль дизайна;

· структуру сайта;

· структуру страниц.

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

Четвертый этап включает работу с дизайном сайта и состоит из нескольких этапов:

· разработчик представляет заказчику в виде эскизов с текстовым описанием макеты идей;

· разработка предварительного макета дизайна главной страницы;

· доработка макета до законченного вида с учетом желаний и замечаний заказчика (если они имеются);

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

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

На пятом этапе, в зависимости от целей и задач сайта, верстка должна удовлетворять основным требованиям:

· кроссбраузерность - свойство страниц сайта корректно отображаться в различных браузерах;

· гибкость верстки - возможность легко добавлять, изменять или убирать информацию с сайта;

· быстрая отработка кода браузером;

· валидность;

· логическое и правильное использование элементов HTML кода.

На шестом этапе происходит заполнения уже утвержденного и построенного (HTML + CSS) макета разработанным ранее текстовым и графическим материалом.

На седьмом этапе производится тестирование сайта при помощи стороннего программного обеспечения, разработчиком и заказчиком.

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

1.5.1 Выбор инструментальных средств разработки

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

1. ATOM - текстовый редактор, отвечающий всем требованиям профессиональных веб-разработчиков. Многочисленные панели инструментов позволяют быстро набирать исходный код будущей страницы, а внутренний анализатор проверяет корректность документа. Главная особенность ATOM - поддержка плагинов, которые способствуют расширению базового функционала редактора. В программу интегрируются дополнительные пакеты, позволяющие настроить проверку орфографии, автоматическое сохранение документов, симметричное и асимметричное шифрование текста и многое другое.

2. Для создания и редактирования графического содержимого сайта будет использоваться Adobe Photoshop CS+, который сочетает в себе инструменты для работы с шаблонами, превосходные возможности выделения и заполнения изображений, а также функцию интеллектуального ретуширования. Adobe Photoshop CS+ соответствует ведущим отраслевым стандартам и позволяет создавать профессиональную растровую графику.

3. Для обеспечения кроссбраузерности сайта при верстке будут использованы наиболее распространенные браузеры -Mozilla Firefox, Opera, Google Chrome.



1.5.2 Проектирование пользовательского интерфейса

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

- навигационное меню;

- актуальные новости, связанные с кафедрой и её деятельностью;

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

1.6 Разработка web-сайта

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

1.6.1 Разработка структуры web-сайта

После анализа требований к проекту была разработана следующая структура (рис. 10):

Рисунок 10 Разработанная структура web - сайта

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

· «О кафедре»;

· «Научная деятельность»;

· «Студентам»;

· «Абитуриентам».

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

1.6.2 Реализация web - сайта

Передо мной была поставлена задача модернизировать сайт кафедры автоматики и вычислительной техники Вологодского государственного университета. После рассмотрения распространённых методов создания веб-сайтов было решено использовать такой стек технологий:

· HTML5;

· CSS3;

· JavaScript (библиотека jQuery).

HTML каркас был выполнен через методологию flexbox, который включает следующие блоки:

· Header:

- эмблема университета, название университета, института и кафедры.

· Navigation:

- навигационное выпадающее меню для каждого основного пункта основного меню.

· Container:

- Left_bar:

а) навигационные кнопки каждого раздела.

- Content:

а) основная информация каждой страницы.

- Right_bar:

а) в данном блоке расположен календарь, отображающий системную дату.

· Footer

- указана минимальная контактная информация и ответственный за ведение сайта.

Гибкость flexbox-верстки позволяет автоматически настраивать ширину элементов внутри flex-контейнера, что очень похоже на выравнивание обтекаемых элементов с применением процентов. Но использовать flexbox-верстку намного проще, чем обтекаемые элементы. Меньше кода, нет проблем с выпадающими объектами, как у обтекаемых элементов.

В данном виде верстки используются два компонента:

1. Flex-контейнер. Им может быть любой структурный HTML элемент, обычно div.

2. Flex-элементы. Вложены во flex-контейнер.

Каждый прямой потомок элемента контейнера автоматически становится flex-элементом. Дочерние элементы не должны быть того же типа. Например, страница может содержать абзац и четыре элемента div внутри flex-контейнера, и каждый из них будет являться flex-элементом.

Только дочерние элементы flex-контейнера превращаются во flex-элементы. Пример: во flex-контейнер помещен div и добавлен в него неупорядоченный список ul. Только ul будет flex-элементом, а вложенные в список элементы li -- нет.



1.7 Тестирование

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

· анализ и разработка требований;

· проектирование структуры;

· реализация согласно разработанной структуры и тестирование.

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

1.7.1 Виды тестирования web-сайта

На сегодняшний день можно выдели несколько основных методологий тестирования web-сайтов:

· соотнесение фактического дизайна утвержденному в техническом задании;

· проверка верстки на валидность;

· функциональное тестирование;

· нагрузочное тестирование;

· тестирование безопасности сайта;

· тестирование совместимости.

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

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

· шрифты;

· цветовая гамма сайта - шрифты, иконки, линии, кнопки, фоны различных блоков и панели навигации;

· заголовки (h1);

· подзаголовки (h2 - h3);

· ссылки. Цвет активных ссылок должен отличаться от основного текста и от уже посещённых. Так же при наведении на ссылку она должна выделяться. Либо это будет подчёркивание (в основном сплошное или пунктирное), либо изменение цвета фона. Это обязательный пункт, чтобы пользователь мог отличить активную ссылку от не активной, посещенную от не посещённой;

· каждый пункт списка должен выделяться от основного текста сайта и маркером, показывающим его начало;

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

· таблицы на всех страницы должны быть выполнены в едином дизайне;

· цитаты;

· расположение;

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

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

3) Функциональное тестирование.

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

Функционал зависит от типа сайта, который мы хотим проверить, но всё же выделяется основные элементы, которые схожи у большинства сайтов:

· тестирование пользовательских форм (формы обратной связи, комментарий или отзыв, если у вас блог);

· проверка работоспособности поиска по сайту и соответствие результатов запроса необходимым критериям;

· тестирование навигации. Из каждой страницы сайта должен быть доступ к остальным страницам;

· проверка подгрузки файлов на сервер;

· проверка регистрационной формы и формы авторизации

4) Нагрузочное тестирование.

Ещё одним видом тестирования является нагрузочное тестирование. Суть метода заключается в исследовании времени отклика системы на внешние запросы при нагрузках.

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

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

5) Тестирование безопасности.

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

Очень часто таким видом тестирования занимаются отдельные люди, поскольку такое тестирование очень кропотливое и требует большой внимательности.

6) Тестирование совместимости

Данный вид тестирования заключается в проведении ряда тестов по запуску сайта на мониторах с различным разрешением или экранов. Включает в себя такие виды работы как:

· просмотр сайта на мониторах, имеющих различное разрешение;

· просмотр сайта с помощью различных браузеров и их версий;

· проверки правильности отображения шрифтов различными браузерами и их версиями.



1.7.2 Обоснование выбора методики тестирования

При рассмотрении способов тестирования web - сайта в данной выпускной квалификационной работе было решено использовать следующие виды тестирования:

· тестирование совместимости;

· нагрузочное тестирование;

· функциональное тестирование;

· соответствие фактического дизайна утвержденному в техническом задании.

Выше перечисленные пункты в полной мере смогут выявить недочёты и ошибки проекта.

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

1.7.3 Результаты тестирования

Рисунок 11 Стек вызовов JavaScript

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



Рисунок 12 Сценарий использования №1

Результат прохождения данного сценария представлен ниже:

· Running 'VSTU'

· 1.open on /Home.html OK

· 2.setWindowSize on 1550x848 OK

· 3.click on css=.topmenu > li:nth-child(1) > a OK

· 4.click on linkText=Преподаватели и работники OK

· 5.click on css=.card:nth-child(2) img OK

· 6.runScript on window.scrollTo(0,1.7666666507720947) OK

· 7.Trying to find id=toTop... OK

· 8.click on linkText=Назад OK

· 9.click on css=.topmenu > li:nth-child(5) > a OK

· 10.click on id=spoiler-title OK

· 11.click on id=spoiler-title OK

· 12.click on css=.topmenu > li:nth-child(4) > a OK

· 13.click on css=.topmenu > li:nth-child(3) > a OK

· 14.click on css=.topmenu > li:nth-child(1) > a OK

· 15.click on css=.button17:nth-child(3) OK

· 16.click on linkText=Выпускники кафедры OK

· 17.click on linkText=Партнёры кафедры OK

· 18.click on linkText=История кафедры OK

· 'VSTU' completed successfully

Рисунок 13 Сценарий использования №2

Результат прохождения данного сценария представлен ниже:

· 1.open on http://localhost/Home.html OK

· 2.setWindowSize on 1007x764 OK

· 3.click on css=.topmenu > li:nth-child(1) > a OK

· 4.click on linkText=Преподаватели и работники OK

· 5.click on linkText=Партнёры кафедры OK

· 6.click on linkText=Выпускники кафедры OK

· 7.click on linkText=Назад OK

· 8.click on linkText=Назад OK

· 9.click on linkText=На главную OK

· 10.click on css=.topmenu > li:nth-child(4) > a OK

· 11.click on linkText=Академия Cisco OK

· 12.click on linkText=Заочное обучение OK

· 13.click on linkText=Материально-техническое обеспечение и оснащение образовательного процесса OK

· 14.mouseOver on linkText=На главную OK

· 15.click on linkText=На главную OK

· 16.click on css=.topmenu > li:nth-child(3) > a OK

· 17.click on linkText=Электронные образовательные ресурсы OK

· 18.click on linkText=Производственная практика OK

· 19.click on linkText=Методическая литература OK

· 20.click on linkText=Научно-исследовательская работа OK

· 21.click on linkText=На главную OK

· 'AVT' completed successfully

Данные сценарии полностью демонстрирует работу навигационного меню и основных кнопок.



Заключение

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

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

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



Список используемых источников

1. Документация по HTML5 [Электронный ресурс]. Режим доступа: http://html5ru.com/dokumenty-html5.html

2. Руководство по HTML5 и CSS3 [Электронный ресурс]. Режим доступа: https://metanit.com/web/html5/

3. Документация по библиотеке jQuery [Электронный ресурс]. Режим доступа: http://jquerybook.ru/api/

4. Справочник по JavaScript [Электронный ресурс]. Режим доступа: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference

5. Сайт кафедры математики Вологодского государственного университета [Электронный ресурс]. Режим доступа: https://matmpm.vogu35.ru/

6. Сайт кафедры информатики и информационных технологий Вологодского государственного университета [Электронный ресурс]. Режим доступа: https://mpi.vogu35.ru/

...