Материал: Разработка сайта для филиала ВГУЭС

Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам

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

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

.3 Техническая реализация сайта

сайт дизайн интернет

Как и было сказано выше, сайт филиала ВГУЭС успел устареть в техническом плане. Для его обновления и подгонки под современные стандарты было решено использовать инструментарий WebSite X5.X5 это программа для создания современных, кросс-браузерных и стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript и CSS дает возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.

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

Основные инструменты WebSite x5:

-   сетки - заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который можно использовать в CSS описании документа.

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

-       типографика - описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.

-       медиа - представляет некоторое управление изображениями, аудио и видео.

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

-       формы - классы для оформления не только форм, но и некоторых событий происходящих с ними.

-       алерты - формление диалоговых окон, подсказок и всплывающих окон.

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

Центральная часть станицы представляет собой пустой контейнер, в который при нажатии на ссылку подгружается нужный документ. Для подгрузки страниц использовалась технология AJAX., или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п. Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера.

Типичное AJAX-приложение состоит как минимум из двух частей. Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP. Смысл AJAX - в интерактивности и быстром времени отклика.

Так как подгрузка совершается с помощью ajax-скрипта, это дает несколько преимуществ:

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

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

-       Ускорение реакции интерфейса, поскольку загрузка изменившейся части значительно быстрее, то пользователь видит результат своих действий быстрее и без мерцания страницы (возникающего при полной перезагрузке);

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

В нашем сайте ajax-скрипт располагается на главной странице, а к каждой кнопке добавлена функция «onclick» с ссылкой на нужный документ. При нажатии файл подгрузится в центральный контейнер div.

2.4 Трудности при создании


Первоначально для разработки была выбрана Joomla - система для разработки интернет-сайтов.включает в себя различные инструменты для разработки веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.позволяет отображать интерфейс фронтальной и административной части на любом языке. Каталог расширений содержит множество языковых пакетов, которые устанавливаются штатными средствами администрирования. Доступны пакеты русского, украинского, белорусского и ещё некоторых языков стран СНГ.

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

Второе важное достоинство - очень удобная система управления сайтом. Встроенный редактор текстовых материалов очень похож на привычный всем Microsoft Word, что существенно упрощает работу. Довольно понятно устроена и административная панель.

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

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

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

Переход на WebSite позволили добиться поставленной цели и переработать сайт ВГУЭС в соответствии с поставленной задачей.

сайта дизайн интернет

Заключение


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

- методы работы с компонентами доступа к данным, создание запросов с параметрами, редактирование данных на программном уровне;

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

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

·        техническое задание на программное средство;

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

·        техническая документация к программному средству.

Список использованных источников


1 Александров В.В. Развивающиеся структуры и проблемно-ориентированные среды. Теоретические основы и прикладные задачи интеллектуальных информационных технологий / В.В. Александров. - СПб.: СПИИРАН, 2012. - 324с.

Бондаренко С. Руководство по SQLite. Популярный самоучитель / С. Бондаренко, М. Бондаренко. - СПб.: Питер, 2010. - 320 с.

Вашкевич Э. PowerPoint 2007. Эффективные презентации на компьютере / Э. Вашкевич. - М.: Норма, 2009. - 240 с.

Горбачев А.Г. Базы данных SQLite / А.Г. Горбачев, Д.В. Котлеев. - СПб.: Питер, 2010. - 96 с.

Гордеев А.В. Операционные системы: учебник для вузов / А.В. Гордеев. - СПб.: Питер, 2011. - 416 с.

Глушаков С.В. Microsoft Word 2007 / С.В. Глушаков, А.С. Сурядный. - М.: АСТ.: Харвест, 2009. - 34 с.

Гессе С. Введение в язык программирования / С. Гессе, В. Кирстен. - СПб.: АОЗТ “СП. АРМ”, 2013. - 280с.

Долженков А.Н. Справочное руководство по qWord / А.Н. Долженков. - СПб: АОЗТ “СП. АРМ”, 2012. - 65 с.

Ерофеев А.А. Интеллектуальные системы управления / А.А. Ерофеев, А.О. Поляков. - СПб.: Изд-во СПбГТУ, 2013. - 264с.

Киммел П. Справочник программиста / П. Киммел, Д. Грин. - М.: Академия, 2013. - 1088с.

Кирстен В. От ANS MUMPS к ISO M / В. Кирстен. - СПб.: СП. АРМ, 2010. -277с.

Кирстен В. Объектно-ориентированная разработка приложений в среде постреляционной СУБД CACHE / В. Кирстен, М.Ирингер, П.Шульте. - СПб.: АОЗТ “СП. АРМ”, 2010.- 364с.

Миллхолон М. Эффективная работа: Microsoft Office Word 2007 / М. Миллхолон, К. Мюррей. - СПб.: Питер, 2009. - 971 с.

Молоткова Н.В. Экономические расчеты для дипломных проектов по техническим специальностям / Н.В. Молотков, С.В. Соколова, О.Б. Ткалич. - СПб.: СПбГТУ, 2011. - 20 с.

Поляков А.О. Интеллектуальные системы управления. Введение в прикладную теорию / А.О. Поляков. - СПб: СПбГТУ, 2012. - 88 с.

Поляков А.О. Технология интеллектуальных систем / А.О. Поляков. - СПб: СПбГТУ, 2013. - 84 с.

Сергеев А.П. Microsoft Office 2007 / А.П. Сергеев. - М.: Норма, 2009. - 432 с.

Смит А.Б. Реляционные, древовидные и объектно-ориентированные базы данных / А.Б. Смит // MSM-бюллетень. - 2013. - №5. - С. 19-28.

Серогодский В.В. Базы данных. Эффективный самоучитель + справочник пользователя / В.В. Серогодский, Д.А. Козлов, Р.Г. Прокди, А.Ю. Дружинин. - М.: Норма, 2010. - 400 с.

Слепцова Л.Д. Программирование на VBA в Microsoft Office 2007 / Л.Д. Слепцова. - М.: ООО "И.Д. Вильямс", 2010. - 432 с.

Таненбаум Э.С. Современные операционные системы - Modern Operating Systems / Э.С. Таненбаум. - СПб.: Питер, 2011. - 1120 с.

Фигурнов Э. В. IBM PC для пользователя. Краткий курс / Э.В. Фигурнов. - М.: ИНФРА-М, 2012. - 479 с.

Фролов И.М. Энциклопедия Microsoft Office 2003 / И.М. Фролов. - М.: Бук-пресс, 2013. - 912 с.

Юдин М.В. Технология разработки баз данных / М.В. Юдин, А.В. Куприянова. - СПб.: Питер, 2009. - 80 с.

Ястребцовой Е.Н. INTEL Обучение для будущего (при поддержке Microsoft): учебное пособие / Е.Н. Ястребцовой, Я.С. Быховского. - М.: Норма, 2009. - 368 с.