Диплом для сайта визитки

Разработка сайта-визитки

Введение

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

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

Веб-сайт (англ. Website, от web — паутина и site — «место») —
в компьютерной сети объединённая под одним адресом (Доменным именем или
IP-адресом) совокупность документов частного лица или организации. По умолчанию
подразумевается, что сайт располагается в сети Интернет. Все веб-сайты
Интернета в совокупности составляют Всемирную паутину. Для прямого доступа
клиентов к веб-сайтам на серверах был специально разработан протокол HTTP
(HyperTextTransferProtocol). Веб-сайты иначе называют Интернет
представительством человека или организации. Когда говорят «своя страничка в
Интернет», то подразумевается целый веб-сайт или личная страница в составе
чужого сайта.

Объектом исследования дипломного проектирования является:
разработка и размещение сайта в сети, Интернет-магазина на CMS Joomla.

На протяжении многих лет, люди продавали, покупали или
обменивали товар. Например, племя Майя сформированное в 2000 год до н.э. в
качестве «товарных денег» использовало какао-бобы, а колонисты в Америке
табачные листья. Время идет, и прогресс не стоит на месте, на дворе 21-ый век,
технологии развиваются, помимо того что люди научилось печатать деньги, так же
нашли способ внедрить их во всемирную паутину Интернет. И именно по этому, создание
интернет-магазина, на данный момент является актуальной темой для разработки.
Но не стабильное экономическое положение нашей страны, заставило изменить планы
организации, в которой я прибывал в роли практиканта. Соответственно это
отразилось на тематики моего диплома и теперь объектом исследования дипломного
проектирования является: разработка сайта-визитки кафе «Family»

Зачем нужен сайт и его
преимущества

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

—       Рекламная площадка Реклама в Сети стоит на
несколько порядков меньше рекламы на ТВ или в прессе. Но по эффективности может
их многократно превосходить.

—       Обратная связь и связь в
реальном времени
Ваши посетители могут моментально связаться с Вами по электронной
почте или оставить запись в гостевой книге.

—       Маркетинговый инструмент! Точное позиционирование
— это фундамент маркетинга. Благодаря системам интернет-статистики Вы всегда
имеете точные данные по своим посетителям — их интересы и предпочтения;

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

Цель: разработка сайта-визитки кафе «Family»

Исходные данные:

—       среда разработки CMS Wix;

—       перечень услуг оказываемых клиентам кафе
«Family»

Перечень оказания услуг:

.        Услуга питания.

.        Услуга по организации потребления и обслуживания.

.        Информационно — консультативные услуги.

Ожидаемый результат

Функционирующий сайт-визитка для кафе «Family» размещенный на
хостинге. Предназначенный для вынесения всей информации о кафе, в качестве
рекламы для большего прироста новых клиентов и дальнейшего расширения в сеть
заведений общественного питания и отдыха.

—       Критерии оценки результата:

—       Увеличение продаж блюд.

—       Увеличение посещаемости кафе.

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

 

.1
Анализ существующих сайтов данной сферы деятельности

Для сравнения я взял два сайта dmitrov21vek.ru и
retro-avenue.ru. После чего решил проанализировать каждый из сайтов и выявить их
достоинства и недостатки.

Анализ сайта dmitrov21vek.ru:

Решаемые задачи:

привлечение клиентов

организация банкетов

предоставление информации о кафе

перечень услуг кафе

Достоинства:

азнообразное меню, с большим выбором блюд

вся информация сайта доступна и понятна любому пользователю

Недостатки:

однотонная цветовая палитра

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

Анализ сайта retro-avenue.ru:

Решаемые задачи:

привлечение клиентов

бронирование столов

3d тур по кафе

доступ к отзывам прямо на сайте

Достоинства:

прекрасно оформленный дизайн

удобная регистрация

онлайн бронирование столиков

красиво сделанный 3d тур по кафе

Недостатки: Не обнаружены.

 

.2
Сравнительный анализ существующих технологий создания сайта

Существует большое количество технологий создания сайтов.
Таковыми являются:

—       Бесплатные системы управления сайтами (uCoz, WIX, Joomla)

—       Платные системы управления сайтами (Umi. Cms, 1C-Битрикс)

—       С помощью языков программирования (HTML, CSS)

В данном разделе анализа присутствуют следующие бесплатные
системы управления сайтами (uCoz, 1C-Биртикс, Joomla)

Бесплатная
система управлением сайта
uCoz

uCoz

uCoz — бесплатная система управления сайтом и хостинг для
сайтов, созданных с её использованием. Модули uCoz могут использоваться как в
единой связке для создания полнофункционального сайта, так и по отдельности,
например, в качестве блог-платформы, интернет-магазина и др. На данный момент в
системе создано более миллиона сайтов.

Основные преимущества uCoz платформы

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

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

—        Множество модулей для сайта.

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

Основные недоставки uCozплатформы

—        uCoz — формально бесплатный сервис, но чтобы
построить мало-мальски качественный сайт придется платить и не мало. Это мнение
реального владельца сайта. Придется платить за ликвидацию навязчивой рекламы
uCoz’а, за ликвидацию копирайта, за дополнительное место на диске и т.д.

—        На вашем сайте помимо вашего желания будет
крутится реклама uCoz’а, которой немало. Такова ваша плата за сервис.

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

—        Для раскрутки сайта в поисковиках необходима
внутренняя оптимизация заголовков страниц (title, description, keywords). Сайты
uCoz не имеют доступа к этим параметрам.

Бесплатная
система управлением сайта
Joomla

Joomla

Joomlaодна из наиболее мощных Систем Управления
Содержимым с Открытым Кодом (OpenSourceCMS) на планете. Она используется по всему миру для
всего, от простых сайтов до комплексных корпоративных приложений. Joomla легко устанавливается,
проста в управлении, надёжна.

Joomla является бесплатным программным обеспечением,
защищённым лицензией GPL.

Основные преимущества Joomla

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

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

—        Гибкость. Используя один и тот же шаблон можно
легко поменять вид одного компонента или целого модуля без внесения исправлений
в код самого движка, но для этого потребуются знания PHP, CSS и JS. При этом
все внесенные изменения сохраняются в шаблоне.

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

Недостатки Joomla

—        Создание большого количества лишнего кода. Его
необходимость далеко не всегда оправдана, а вот справится с ним для новичка не
под силу.

—        Страницы сайта созданного на этой CMS долго
грузятся. Обусловлена подобная медлительность именно наличием лишнего кода.

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

Бесплатная
система управлением сайта 1C-Биртикс

1C-Биртикс

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

Особенности системы 1C-Битрикс

—        Многосайтовость.

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

—        Полноценный визуальный редактор.

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

—        Интеграция с программой 1C:
Предприятие.1С-Битрикс — это система, созданная в результате взаимодействия
компаний Битрикс и 1С. Поэтому его пользователю обеспечена уверенная интеграция
с продуктом 1C: Предприятие, что весьма удобно, допустим для фирм, которые
занимаются реализацией различных товаров и услуг в Интернете.

—        Инструменты для разработки индивидуальных
решений.

При условии соответствующих знаний платформа FrameWork
позволяет внести значительные изменения в оболочке CMS 1С-Битрикс и в
результате создать собственную систему управления веб-проектами.

—        Магазин MarketPlace

На сайте магазина MarketPlace для пользователей 1С-Битрикс:
Управление сайтом партнерами фирмы предлагаются всевозможные бесплатные и
платные модули, позволяющие существенно расширить функциональность проекта.

—        Обратная связь от разработчиков.

На сайте компании 1С-Битрикс действует раздел «Идей», где
пользователи могут оставить предложения и пожелания по работе CMS, которые
учитываются при разработке последующих обновлений продукта.

Недостатки системы 1С-Битрикс

—        Битрикс является весьма медленной и
требовательной к ресурсам системой, особенно в сравнении с бесплатными
CMS-аналогами (к примеру, Drupal или Joomla);

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

—        Битрикс позиционируется как система, которая не
требует знания программирования — но грамотная доводка сайта без знания языков
программирования почти невозможна. Некоторые пользователи отмечают, что API
Битрикс является достаточно сложным для освоения;

—        Зачастую простые операции перегружены кодом — это
затрудняет работу сайта на «1С-Битрикс», а также усложняет редактирование кода.

2.
Основные проектные решения

 

Для
разработки сайта «кафе
Family» были выдвинуты следующие требования:

Реализовать следующие технологические требования:

—       корректное отображение популярными
браузерами;

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

Структура контента сайта должна включать раздел общей
тематики:

—       услуги;

—       контакты;

—       прейскурант.

2.1 Выбор технологии создания сайта

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

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

Если же планируется динамический сайт, то потребуется
проявить свои знания в использовании скриптового языка программирования PHP.
Его еще иногда называют серверным языком, благодаря его способности тесно
взаимодействовать с сервером. Ну и конечно же не повредит javascript, который
внесет свою лепту в развитие сайта.

Использование визуальных редакторов (CMS и конструкторы сайтов)

В данном случае потребуются минимальные знания. Путем
нехитрых действий, например, перетаскиванием блоков, настраивается внешний вид.
Думать о внутреннем содержимом (исходном коде) не обязательно. Естественно, что
данный метод создания сайта подходит лишь для новичков. Исходный код при
использовании визуальных редакторов захламлен ненужными тегами и имеет очень
много лишнего. Такими конструкторами является WordPress, Яндекс. Народ.

Заказать сайт под ключ

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

Вывод

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

2.2
Инструментарий для разработки сайта-визитки кафе «
Family»

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

Основные особенности Wix:

—        Масса бесплатных функций

—        Удобный формат редактирования и публикации
материала

—        Интуитивно понятный интерфейс

—        Пользователи могут с легкостью создать
собственный полноценный интернет-магазин (eCommerce)

—        Предоставление бесплатного домена 3-го уровня
(что такое домен)

—        Хорошие возможности для оптимизации сайта

—        Привлекательный внешний вид готовых сайтов

—        Масса готовых шаблонов в списке по рубрикатору,
легко редактируемых и готовых к публикации

—        Все на русском языке

—        Наличие русскоязычного варианта сайта

—        Наличие обучающих материалов

—        Возможность создания собственного уникального
шаблона

—        Допускается возможность создания сайта на flash и
HTML5

—        Гибкость настроек

—        Присутствует функционал для реализации мобильной
версии

—        Разработана рассылка WixShoutOut для красивого
оповещения о событиях

Недостатки конструктора Wix

—        Достаточно много услуг все-таки платные

—        Нет возможности сделать backup сайта (резервную
копию)

—        Присутствие рекламного баннера в бесплатной
версии

—        Невозможность привязать собственный домен второго
уровня

Вывод

В целом, конструктора Wix — полностью отвечает всем
требованиям для создания сайта и вполне подойдет для реализации сайта-визитки.

2.3 Разработка сайта

 

Регистрация
на сайте редактора
Wix

Для данного дипломного проекта используется CMSWix, главная страница сайта
которой представлена на рисунке 2.1.

Рисунок 2.1 — официальная страница сайта Wix

Далее требуется пройти процесс регистрации на сайте CMSWix, выбрать доменное имя
для будущего сайта. (Рисунок 2.2)

Рисунок 2.2 — окно регистрации

В появившийся форме, нужно ввести свой действующий E-Mail и
пароль, для входа в свой личный кабинет на сервисе.

В качестве альтернативы можно использовать возможность войти
при помощи учетной записи на одном из социальных сервисов Facebook или Google+.
В этом случае просто нужно будет подтвердить разрешение на подключение к
аккаунту.

После регистрации нас перенаправит на следующую страницу
(Рисунок 2.3)

Рисунок 2.3 — выбор тематики будущего сайта, для фильтрации
подходящих шаблонов

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

Редактор
сайта

После выбора шаблона, нажатием кнопки редактор, мы
непосредственно переходим к редактированию шаблона выбранной тематики. (Рисунок
2.4)

Рисунок 2.4 — Главная страница редактора

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

(Видео — #»869367.files/image005.jpg»>

Рисунок 2.5 — боковая панель

и на верхней (Рисунок 2.6) панели инструментов.

Рисунок 2.6 — верхняя панель

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

—        переключить режим редактирования с десктопной на
мобильную версию и наоборот;

—        выбрать страницу сайта, которую необходимо
редактировать;

—        отменить / повторить последнее действие;

—        скопировать / вставить выделенное в/из буфера
обмена;

—        активировать сетку направляющих, выравнивание
элементов по сетке, а также линейки;

—        включить предпросмотр сайта;

—        сохранить сайт в черновиках или опубликовать его
в Интернете;

—        оплатить профессиональный аккаунт;

—        вызвать справку.

Настройка
сайта

В разделе настроек (нижняя кнопка в левом меню) у нас есть
несколько полезных подразделов. И первый из них — «Адрес сайта» (Рисунок
2.7)

Рисунок 2.7 — Название и адрес сайта

Здесь я уточняю адрес своего нового сайта. Теперь он имеет
вид «wezo380.wix.com/family». Рисунок 2.8

Рисунок 2.8 — готовый адрес сайта

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

Настройка
дизайна

За общие параметры визуального отображения странички отвечает
вкладка «Дизайн». Рисунок 2.9

Рисунок 2.9 — вкладка дизайн

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

Для редактирования фона нашего сайта, заходим во вкладку Фон,
после чего выбираем необходимый нам фон. Рисунок 2.10

Рисунок 2.10 — Выбор фона страницы

Настроив общую цветовую и стилевую палитру, далее я перехожу
непосредственно к правке стандартных элементов страницы и добавлению
собственных блоков. Кликнув на нужном фрагменте, появляется контекстное меню,
из которого идет управление нужными параметрами. Рисунок 2.11

Рисунок 2.11 — контекстное меню настройки бокса

После открытия контекстного меню, нажимаем на кнопку, Изменить
стиль
.

На рисунке 2.12 и 2.13 представлены 2 окна Изменение стиля
и Настройка стиля.

 

Рисунок 2.12, 2.13- изменение стилей и настройка стиля

После изменения стиля, переходим к редактированию текстовой
информации.

Для этого, делаем двойной клик мышкой по необходимому для
редактирования тексту после чего появляется меню редактирования (Рисунок 2.14),
либо переходим во вкладкуДобавить, после чего выбираем Текст и
способ его размещения Заголовок или Абзац. Рисунки 2.15, 2.16

Рисунок 2.14 — редактирование с помощью двойного клика мышью

 

Рисунок 2.15, 2.16 — Добавление текста и выбор текста

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

Для решения данной задачи, наводим курсор мыши на заменяемую
картинку, щелкаем левой кнопкой мыши и в появившимся меню, нажимаемЗаменить
фото
. Рисунок 2.17

Рисунок 2.17 — Замена изображения

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

Загрузить изображение с компьютера мы можем двумя способами:

.        Перетащить нужное нам изображение с рабочего стола

.        Нажать на кнопкуЗагрузить изображение.
Рисунок 2.18

Рисунок 2.18 — Загрузка изображения

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

Рисунок 2.19 — Замена исходного изображения на загруженное

В
итоге, после порядочного выполнения выше представленных действий, из исходного
бокса (Рисунок 2.3.15) мы получили готовый, исполненный по требованию заказчика
бокс, с необходимой нам информацией. (Рисунок 2.20)

На основе этого примера, была проведена работа по
редактированию всего исходного материала шаблона.

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

Кликнув мышью по названию раздела или названию блюда, в
открывшимся окне Меню ресторана, выбираем пунктРедактировать меню.
Рисунок 2.21

Рисунок 2.21 — Меню ресторана

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

Пример работы с редактором меню представлены на рисунках
2.22, 2.23

Рисунок 2.22 — Меню супов

Рисунок 2.23 — Редактор блюда

Так
же на главной странице сайта присутствует галерея слайд-шоу, способ её
добавления и настройки изображены на рисунках 2.24, 2.25

Рисунки
2.24, 2.25 — Добавление элемента слайд-шоу

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

Рисунок 2.26 — Настройка галереи слайд-шоу

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

Рисунок
2.27 — Организация галереи изображений

2.4
Работа сайта

Главная страница — на этой странице
находится основная информация для клиентов кафе Family.

Рисунок 2.28 — Главная страница

О Нас — на данной странице исполнено описание кафе Family

Рисунок
2.29- О Нас

Контакты— в этом разделе указаны все контактные данные и
место положения кафе на карте.

Рисунок 2.30 — Контакты

Основное меню — здесь представлено основное меню кафе Family с ценой, весом и
составом каждого блюда.

Рисунок 2.31 — Основное меню

Меню выпечки — румяный раздел представленного
ассортимента выпечки и напитков кафе Family.

Рисунок 2.32 — Выпечка и напитки

Заключение

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

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

В качестве среды разработки был выбран конструктор сайтов CMSWix.

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

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

1. Хананеин Д.М. «Информационно —
коммуникационные технологии», 2010 г.

. Панфилов К.М. «По ту сторону Web-страницы»,
2008 г.

. Печников В.Н. «Создание web-страниц и
web-сайтов. Самоучитель», 2008 г.

. Печников В.Н. «Создание web-сайтов без
посторонней помощи», 2009 г.

. Рязанов В.И. «Создание сайта в 5 этапов», 2009
г.

. Гладкий А.В «Веб — Самоделкин. Как самому
создать сайт быстро и профессионально», 2012 г.

. Питер Фиелл «Энциклопедия дизайна», 2011 г.

. F.A.Q
официально сайта Wix [Электронный ресурс] — URL: https://ru.wix.com/support/html5
(дата обращения 01.06.2015).

. Свободная энциклопедия Википедия [Электронный
ресурс] — URL: https://ru.wikipedia.org (дата обращения: 01.06.2015).

ФГБОУ «Московский государственный университет экономики, статистики и информатики» (МЭСИ) Калмыцкий филиал

Дипломный проект

СОДЕРЖАНИЕ

ВВЕДЕНИЕ. 7

  1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ.. 12

1.1 Характеристика объекта исследования. 12

1.2 Цели сайта и его позиционирование. 14

1.3 Разработка и виды сайтов. 16

1.4 Обзор языков программирования и выбор инструментария. 23

1.5 Наполнение сайта информацией (контентом) 32

  1. ПЛАНИРОВАНИЕ И СОЗДАНИЕ САЙТА-ВИЗИТКИ УЧРЕЖДЕНИЯ.. 33

2.1 Цели, задачи и требования к сайту-визитке  МК ДОУ «Детский сад №22». 33

2.2 Формирование требований к системе. 38

2.3 Структура сайта. 41

2.4 Классы пользователей. 43

2.5 Реализация web-сайта и тестирование. 44

ЗАКЛЮЧЕНИЕ. 53

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ.. 56

ПРИЛОЖЕНИЯ.. 59

ВВЕДЕНИЕ

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

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

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

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

Фактически, сайт-визитка — это просто рекламный буклет того или иного предприятия в сети Интернет. На сайте обычно располагается общая информация (область деятельности, обычный список продаваемых товаров или оказываемых услуг, успехи, награды и тому подобная информация), адрес учреждения и схема проезда.

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

Целью данной выпускной квалификационной работы является создание сайта-визитки Муниципального казенного дошкольного образовательного учреждения «Детский сад №22» города Элисты.

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

Прежде чем начать создание электронного сайта-визитки необходимо обозначить следующие задачи:

  1. Провести теоретический анализ научной и методической литературы по проблеме: «Технология создания сайта-визитки»;
  2. Описать технологию создания электронного сайта-визитки МК ДОУ «Детский сад №22»;
  3. Спроектировать и создать сайт-визитку МК ДОУ «Детский сад №22»;
  4. Апробировать выполненную работу.

Методы исследования:

  1. Анализ использованной литературы и Интернет-ресурсов по проблеме исследования;
  2. Получение необходимой информации от заказчика;
  3. Сбор и обработка фотоматериала;
  4. Проектирование эскизов сайта-визитки МК ДОУ «Детский сад №22»;
  5. Создание готового продукта;
  6. Метод экспертных оценок.

Целевая аудитория данного проекта:

  1. Педагоги МК ДОУ «Детский сад №22»;
  2. Педагоги других дошкольных учреждений;
  3. Учредители;
  4. Социальные партнеры;
  5. Родители.

Сокращения:

Аббревиатура

Полное название

МК ДОУ

Муниципальное казенное дошкольное образовательное учреждение

ПК

Персональный компьютер

ОС

Операционная ситема

HTML

Язык гипертекстовой разметки

CSS

Каскадные таблицы стилей

РНР

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

Java

объектно-ориентированный язык программирования

JSP (Java Server Pages)

часть технологии J2EE, определенная для создания сайтов при помощи языка Java.

Обозначения:

Вид

Значение

Сайт

(от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — система электронных документов (файлов данных и кода) частного лица или организации в компьютерной сети под общим адресом (доменным именем или IP-адресом)

Варезник

нелицензионное, взломанное программное обеспечение.

Фреймворк

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

Браузер

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

Учредитель

в российском корпоративном праве — юридическое или физическое лицо, создавшее организацию — юридическое лицо.

1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ

1.1 Характеристика объекта исследования

Объект исследования данной выпускной квалификационной работы — Муниципальное казенное дошкольное образовательное учреждение «Детский сад №22» создано решением исполнительного комитета Элистинского городского Совета Народных депутатов от 08 января 1983 года. Учредителем является Мэрия города Элисты. Дошкольное образовательное учреждение осуществляет свою деятельность в соответствии с Законом «Об образовании», типовым положением о дошкольном учреждении, договором между учредителем и ДОУ, Уставом МК ДОУ «Детский сад №22».

В детском саду функционирует всего 10 групп для детей дошкольного возраста от 1,5 до 7 лет: три ясельные, одна национальная, шесть дошкольных общеобразовательных групп. Структура учреждения представлена на рис. 1.

Рисунок 1.1Структура учреждения

Коллектив МК ДОУ «Детский сад №22» главным образом состоит из администрации и педагогических кадров. Руководитель – педагог высшей квалификационной категории Насунова Лидия Николаевна. В данном учреждении трудятся двадцать четыре педагога. Из них с высшим педагогическим образованием 8 человек, с неоконченным высшим педагогическим образованием – 6 человек и со средним специальным педагогическим образованием – 10 человек. Надо отметить, что высшую квалификационную категорию имеют 3 педагога, первую квалификационную категорию — 5 педагогов, вторую квалификационную категорию — 5 педагогов.

Основными задачами МК ДОУ «Детский сад №22» являются:

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

Для реализации основных задач администрация учреждения вправе:

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

Режим работы МК ДОУ «Детский сад №22» устанавливается исходя из потребностей семьи и возможностей бюджетного финансирования данного учреждения.

Детский сад функционирует в режиме 5-дневной рабочей недели с двумя выходными днями (суббота, воскресенье), длительность работы – 12 часов, график работы – с 7.00 до 19.00 часов.

Участниками образовательного процесса МК ДОУ «Детский сад №22» являются дети, их родители (законные представители), педагогические работники учреждения.

1.2 Цели сайта и его позиционирование

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

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

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

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

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

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

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

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

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

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

1.3 Разработка и виды сайтов

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

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

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

  • Определение целей сайта и его позиционирование
  • Техническое задание (ТЗ)
  • HTML-CSS верстка
  • Наполнение сайта информацией (контентом)
  • Размещение сайта в сети internet

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

В настоящее время большинство домашних страниц переросли в блоги, чаще всего на бесплатных сервисах типа ЖЖ или Blogger, но суть их осталась прежней – унылой.

Монетизировать такой сайт проблематично даже при относительно высокой посещаемости. Качество трафика на таком типе сайтов обычно очень невысокое.

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

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

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

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

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

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

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

Блог. Все знают, что такое блог – сетевой дневник в широком понимании этого слова. Среди популярных блогов мало таких, которые представляли бы именно дневник в классическом смысле. Чаще всего от дневника там осталась разбивка по датам. А публикуется там совершенно различная информация, зачастую не связанная с повседневной жизнью автора. Сообщения, которые с ней связаны, иронично называют «лытдыбр» (слово «дневник» в латинской раскладке клавиатуры).

Интересный блог создать непросто. В нем надо писать не только о том, что интересно лично вам, а о том, что еще будет интересно широкому кругу посетителей. Редкий талант – писать всякую ерунду и привлекать внимание людей; не рассчитывайте на это, создавайте интересный и полезный контент.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создать форум просто, все движки устанавливаются в два-три клика, и их настройки тоже не сложны. Но раскрутить его куда более трудоемко, чем обычный сайт. «Зажечь» реальное активное общение – задача не из простых. Далеко не каждый человек, зайдя на новый пустой форум, начнет на нем сразу писать. А если и начнет, то быстро уйдет, ведь ему никто не будет отвечать.

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

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

Каталог сайтов. Бесперспективный вид сайта в настоящее время. Если лет десять назад трафик из каталогов шел существенный, то сейчас толку от них практически никакого, за исключением строго тематических ресурсов с высокой целевой посещаемостью. Из относительно полезных общетематических каталогов можно выделить каталоги Яндекса, Меил.ру и с большой натяжкой ДМОЗ.

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

Поисковая система. Очень популярные сайты. Упоминаются они в конце статьи потому, что новичкам, как и большинству более опытных вебмастеров, не светит создать полноценную поисковую систему уровня Яндекса и Гугла. Миллионные вложения, штат сотрудников, собственные дата-центры – без этого ничего не выйдет.

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

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

1.4 Обзор языков программирования и выбор инструментария

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

Рисунок 1.2 Популярные фреймворки и языки веб-программирования

Также, надо понимать различие между языком программирования и фреймворком. Язык программирования – это попросту кое-какой базовый синтаксис (вероятно со стандартными библиотеками), с его помощью можно создавать приложения. Фреймворк же дает возможность программисту использовать различные библиотеки, которые значительно упрощают разработку программ и сайтов. Отдельные языки и фреймворки выступают как неделимое целое (например, ASP.NET и JSP). Иные же языки могут быть использованы без фреймворка (РНР и Perl).

Независимо от того, какой язык программирования будет выбран, в основе любого сайта лежит язык гипертекстовой разметки –HTML. Его обязаны знать все веб-разработчики. Не будут лишними хотя бы базовые знания HTML и тем разработчикам, которые ничего сами не пишут, а применяют готовые решения (стандартные или заказные).

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

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

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

Следующие популярные клиентские языки, а вернее фреймворки – этоAdobe Flash(язык ActionScript) и SilverLight(любые .NET языки). Adobe Flash используется веб-разработчиками крайне давно. Главное использование этой технологии – мультимедийный контент и реклама, электронные сайты, а также сервисы, игры онлайн. SilverLight – это технология, созданная компанией Microsoft и позиционируемая как замена Adobe Flash.

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

Если говорить про ОС Windows, то тут абсолютно господствует технологияASP.NET, разработанная компанией Microsoft. С ее помощью можно спроектировать сайты любой сложности – от самых простейших, которые состоят из нескольких страниц, до крайне сложных, обрабатывающих миллионы запросов в день (сайты Microsoft, разработанные на ASP.NET, являются одними из самых посещаемых).

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

Следующий известный язык веб-программирования на платформе Unix – язык Perl. Он имеет не простой запутанный синтаксис и никогда не определялся, как язык для веб-программирования.

JSP (Java Server Pages)– это часть технологии J2EE, определенная для создания сайтов при помощи языка Java. У JSP немало общего с ASP.NET и выбор между данными двумя технологиями нередко основывается на предпочтениях разработчиков, а не на каких-нибудь преимуществах или недостатках этих платформ.

Также сейчас высокую популярность приобрел язык Ruby и, в частности, фреймворк Ruby on Rails. При его помощи можно быстро создать сайт с требуемой функциональностью. Одним из основных недостатков Ruby является низкое быстродействие.

Надо отметить, что выбор языка веб-программирования для сайта неразрывно связан с выбором CMS сайта

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

  • язык гипертекстовой разметки HTML;
  • каскадные таблицы стилей CSS;
  • текстовый редактор Notepad++6.7.8.2.

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

Во многих случаях теги используются парами. Пара главным образом состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. С места, где встретился открывающий тег, начинается действие любого парного тега и заканчивается, соответственно, при встрече соответствующего закрывающего тега. Нередко пару, которая состоит из открывающего и закрывающего тегов, называют контейнером, а часть текста, стоящего между открывающим и закрывающим тегом, — элементом.

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

В целом, язык HTML предоставляет следующие возможности:

  • размещать web-документы, которые содержат заголовки, текст, таблицы, списки, фотографии и т.д.;
  • получать дополнительную информацию, используя гипертекстовые ссылки;
  • создавать формы для передачи данных удаленным серверам;
  • вводить непосредственно в документ видеоклипы и аудиоклипы, анимационные ролики и другие объекты [13, 14].

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

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

Это ограничение появилось из-за отсутствия совместимой поддержки каскадных таблиц стилей браузерами. Так как не все браузеры одинаково равно обрабатывали директивы языка CSS (если вообще обрабатывали), у дизайнеров не было возможности в полном объеме воспользоваться действительными преимуществами таблиц стилей. Вместо этого, ответственность за показ информации возлагалась на язык HTML.

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

Особенности каскадных таблиц стилей:

  • Раздельное сохранение представления и документа разрешает стилизовать этот документ для разнообразных устройств, включая, монитор, принтер, проектор и также портативные устройства.
  • Раздельное сохранение представления и документа обозначает уменьшение величины документа, что, в свою очередь, убыстряет загрузку и воспроизведение страницы, доставляя наслаждение посетителям.
  • Язык CSS разрешает управлять как одним, так и миллионами документов. Для внесения изменений потребуется модифицировать нужный стиль в одном CSS-файле, и эти изменения автоматически отразятся на всех объединенных документах. В языке HTML это невыполнимо.
  • CSS-документы кэшируются. Это значит, что они помещаются в память браузера только единожды. При передвижении по сайту браузеру никогда не придется заново интерпретировать стили. В итоге получаются более связные переходы от страницы к странице, и происходит более быстрая загрузка страниц, что всегда представляет собой конечную цель.
  • Отделив понятие от структуры и содержимого, просто добиться легкости документа. Документы, в которых не используются трудные таблицы и немалое количество элементов языка гипертекстовой разметки HTML, отвечающих за изображение, по своей сути, являются более общедоступными, чем другие документы, у которых перечисленные свойства есть.

Несомненно, что язык CSS дает множество возможностей.

Также, CSS применяется для задания цветов, шрифтов, расположения и других аспектов изображения документа. Главной целью создания CSS является деление содержимого (написанного на HTML или другом известном языке разметки) и представления документа (написанного на CSS). Данное разделение может повысить доступность документа, предоставить высокую гибкость и вероятность управления его представлением, а также снизить сложность и повтор в структурном содержимом. Кроме этого, CSS разрешает представлять один и тот же документ в разнообразных стилях или методах вывода, таких как экранное изображение, вывод на печать, чтение голосом.

Каскадные таблицы стилей (CSS) обрели невероятную популярность в последние годы, главным образом, благодаря обширно распространенной помощи браузерами большинства их директив [15].

Таблица стилей состоит из комплекта правил. Любое правило, в первую очередь, состоит из одного или нескольких селекторов, которые разделены запятыми, и набора определений. Блок определений при этом обрамляется фигурными скобками, и состоит из всевозможных свойств и их значений [16, 17].

Стандарт CSS устанавливает приоритеты, в ряде которых применяются определенные правила стилей, если для какого-нибудь элемента годятся свойства некоторых правил одновременно (или, в крайних случаях, в одном правиле есть одноименные свойства). Это и называется «каскадом», где для свойств распределяются приоритеты или «веса», что дает предсказуемые результаты [18].

Преимущества CSS:

  • несколько видов дизайнов страницы для различных механизмов просмотра. К примеру, на экране дизайн будет рассчитан на немалую ширину, при печати меню не будет выводиться, а на ПК и мобильном телефоне меню будет следовать за содержимым;
  • снижение времени для загрузки страниц сайта благодаря переносу правил представления информации в отдельный CSS-файл. В данном случае браузер загружает всего лишь структуру документа и данные, которые хранятся на странице, а представление данных загружается браузером только единожды;
  • незамысловатость последующего видоизменения дизайна. Не надо исправлять каждую страницу, а лишь следует изменить CSS-файл;
  • добавочные возможности оформления: благодаря CSS-верстке можно сделать набор текста, который прочий текст будет обтекать (например, для меню) или разработать так, чтобы меню было постоянно видно при просмотре страницы [19].

К минусам CSS относится следующее: нередко встречающаяся нужда на практике поправлять не только один CSS-файл, но и теги HTML и код PHP, которые довольно сложным и ненаглядным способом объединены с селекторами CSS, что порой сводит на нет незамысловатость применения единых файлов стилей и существенно затягивает время для редактирования и тестирования, а также разное отображение верстки в разнообразных браузерах.

Существуют три способа применения стилей в документе HTML:

  • встраивание: описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы;
  • внедрение, обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля;
  • связанные стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, но все описания хранятся в отдельном файле (обычно с расширением css) [20].

Notepad++6.7.8.2 — новая версия бесплатного, удобного текстового редактора, построенная на системе UDL2 (User Defined Languge). Это авторская сборка, упакованная как портативное приложение, имеет все функции Notepad++, включая поддержку многих языков и обширную систему плагинов, и вы можете ее разместить на USB флэш-диске, IPod, и использовать на любом компьютере, не оставляя никакой личной информации позади.

Базируясь на мощном компоненте для редактирования Scintilla, Notepad++ написан на C++ с использованием чистого Win32 API и STL, что позволяет достичь максимальной скорости работы в сочетании с минимальным размером программы. Кроме того, пользователи могут задавать собственные правила подсветки и сворачивания для других языков.

Основные особенности программы:

  1. Текст подсвечивается и есть возможность для сворачивания блоков, согласно синтаксису языка программирования.
  2. WYSIWYG (при вводе текста получается то, что видно на экране).
  3. Режим подсветки синтаксиса настраивается пользователем
  4. Автоматическое завершение вводимого слова
  5. Синхронная работа с разными документами
  6. Одновременный просмотр нескольких документов
  7. Поддержка постоянных выражений Поиска/Замены. Полная поддержка перетягивания фрагментов текста
  8. Динамическое видоизменение окон просмотра
  9. Машинальное определение состояния файла
  10. Увеличение и уменьшение
  11. Поддержка немалого количества языков
  12. Заметки
  13. Выделение скобок при исправлении текста
  14. Запись макроса и его выполнение

Автоматический снимок сеанса и периодическое резервное копирования.
Если эта функция включена (включено по умолчанию), программа спрашивает пользователя сохранить ли несохраненный файл, когда он выходит из Notepad++, и при запуске Notepad++ восстанавливает несохраненный файл и несохраненный документ без названия последней сессии. Эта функция обеспечивает еще одно преимущество — периодическое резервное копирование несохраненных файлов, которая защищает ваши данные от сбоев компьютера или отключения питания.

Применяемая система UDL2 (User Defined Languge), не только позволяет удалить многие ограничения, но и добавляет множество новых возможностей / расширений, а также с UDL2 вы можете определить почти любой язык.

Ключевые особенности UDL2:

  1. Добавляет больше групп ключевых слов (может быть определена большая подсветка синтаксиса):3 сворачивающиеся группы, 8 групп ключевых слов, 2 группы комментариев, 1 определенный номер, 2 группы операторов, 8 наборов разделителей.
  2. Поддерживаются составные (Multipart) ключевые слова (например: «еще, если» может быть определено как одно ключевое слово).
  3. Пробелы не является обязательным, как ключевое слово сепаратора: Операторы, разделители и составные ключевые слова могут быть признаны без разделителей или пробелов.
  4. Значительно улучшилась определение номеров поддержки (поддерживаются префиксы, суффиксы, диапазоны и дополнительные символы).
  5. Операторы и разделители могут состоять больше, чем из одного символа.
  6. Те же символы могут быть применимы как комментарии и операторы.
  7. Комментарии и разделители дают поддержку вложениям (даже друг другу).
  8. Совершенствование комментариев включают в себя:
    — Комментарий свернутый

— Комментарий с продолжением

— Комментарий начинается только в начале линии

  1. В случае нескольких пар комментарий определено, что открытые символы комментариев соответствуют только с близким комментариями, имеющих символы того же порядка (для примера: /* C комментарий */, /+ D комментарий +/, но не /* смешанные комментарии +/).

1.5 Наполнение сайта информацией (контентом)

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

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

Наполнение сайта контентом — это постоянная работа, которая не заканчивается после запуска ресурса и его успешной раскрутки. Для того чтобы сохранить завоёванные позиции, необходимо постоянно поддерживать актуальность контента. Статьи для сайта могут быть самого разного объёма и направленности. Вовсе не обязательно заполнять сайт громоздкими текстами, если того не требует концепция вашего ресурса. Небольшие статьи, начиная от 500-700 символов, вполне могут составлять основу контента. Однако и небольшие тексты непременно должны отвечать всем требованиям качества и уникальности.

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

Тексты, безусловно, основа большинства ресурсов. Но следует отметить, что контент для сайтов — это и картинки, и аудио- и видеофайлы.

2. ПЛАНИРОВАНИЕ И СОЗДАНИЕ САЙТА-ВИЗИТКИ УЧРЕЖДЕНИЯ

2.1 Цели, задачи и требования к сайту-визитке
МК ДОУ «Детский сад №22»

Целью данной выпускной квалификационной работы является разработка сайта-визитки Муниципального казенного дошкольного образовательного учреждения «Детский сад №22» для повышения информированности населения.

Задачи разработки сайта-визитки МК ДОУ «Детский сад №22»:

  • проанализировать и аргументировать выбор программных и инструментальных средств проектирования;
  • спроектировать сайт-визитку МК ДОУ «Детский сад №22»;
  • реализовать и описать процесс разработки сайта-визитки МК ДОУ «Детский сад №22».

Чтобы достигнуть решения цели, которая была поставлена в выпускной квалификационной работе, нужно осознавать требования, которые ставятся перед задачей разработки сайта-визитки МК ДОУ «Детский сад №22». Часто, предъявляемые к разработанному программному продукту требования, делятся на три ключевые группы:

  • социальные;
  • экономические;
  • технические.

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

К социальным требованиям проектируемого сайта-визитки МК ДОУ «Детский сад №22» можно отнести:

  • практичность и применимость программного продукта;
  • функциональная пригодность;
  • удобство освоения;
  • защищённость информации.

Проанализируем, как все эти социальные требования выполняются в разрабатываемом проекте.

Практичность и применимость – существенно определяет функциональную пригодность и полезность применения разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» для пользователей. Пользователями разработанного программного продукта являются администраторы, конечные и косвенные пользователи, а именно Учредители, социальные партнеры, педагоги, родители, которые ориентируются на предоставленную информацию и зависят от качества этой информации. К этой группе показателей качества относятся конструктивные субхарактеристики и атрибуты, с разных сторон отражающие функциональную ясность, системную эффективность, удобство освоения и незамысловатость использования данных.

Также, отдельные субхарактеристики оцениваются экономическими данными — расходами труда и затратами времени на реализацию функций взаимодействия с данными. Практичность зависит не только от личных характеристик проектируемого сайта-визитки МК ДОУ «Детский сад №22», но также от устройства и адекватности подготовки документов процессов его эксплуатации.

Функциональная пригодность проектируемого сайта-визитки МК ДОУ «Детский сад №22» при системной разработке может представлять не простую проблему для идентификации соответствия требований настоящим значениям нужных атрибутов качества, при циркуляции разной и сложной информации об анализируемых объектах. Критерием качества функциональной пригодности в данном разработанном программном продукте может быть степень покрытия целей, назначения и функций разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» доступной пользователям информацией.

Удобство освоения разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» определяется требованиями ограниченной трудоемкости и продолжительности подготовки пользователя к полноценной эксплуатации информации.

Освоение разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» зависит от внутренних свойств и сложности структуры информации БД, а также от субъективных характеристик квалификации конкретных пользователей. Также, освоение может характеризоваться объемом используемой документации.

Защита информации для разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» будет осуществлена главным образом программными средствами СУБД, но в сочетании с поддерживающими их средствами создания и защиты баз данных. Цели, назначение и функции защиты тесно связаны с особенностями функциональной пригодности создаваемого сайта-визитки МК ДОУ «Детский сад №22».

Экономические требования, предъявляемые к разрабатываемому сайту-визитке МК ДОУ «Детский сад №22»подразделяются на три группы:

  • доступность процесса сопровождения по стоимости;
  • эффективность использования ресурсов;
  • производительность труда.

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

Используемость ресурсов или ресурсная экономичность разрабатываемого сайта-визитки МК ДОУ «Детский сад №22»проявляетсязанятостью ресурсов центрального процессора, оперативной, внешней и виртуальной памяти, каналов ввода-вывода, терминалов и каналов сетей связи. Размер обуславливается структурой, функциями и объемом разрабатываемой системы, а также архитектурными особенностями и доступными ресурсами персонального компьютера.

В зависимости от конкретных поставленных задач и особенностей разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» и ПК при системном проектировании и избрании атрибутов качества возможно доминирование либо абсолютной величины занятости ресурсов всевозможных типов, либо относительной величины использования ресурсов каждого типа при нормальном функционировании проектируемой системы.

Следовательно, в рамках разрабатываемого сайта-визитки МК ДОУ «Детский сад №22», действенность использования ресурсов будет складываться из технических возможностей ПК и использованию их в проекте.

Разрабатываемый сайт-визитка МК ДОУ «Детский сад №22» должен повышать информированность населения о работе, контактах, администрации учреждения.

Технические требования, предъявляемые к разрабатываемому проекту, разделим на три группы:

  • простота;
  • понятность;
  • завершенность.

Простота использования разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» дает возможность удобно и комфортно его эксплуатировать и управлять данными. В связи с этим должны быть обеспечены: достаточная объемность параметров управления, используемых по умолчанию, информативность сообщений пользователям системы, наглядность, стандартизованность управления экраном, а также доступность изменений функций разрабатываемого сайта-визитки МК ДОУ «Детский сад №22»согласно с квалификацией пользователей и минимум операций, необходимых для осуществления определенного задания и анализа результатов.

Отдельные составляющие этой субхарактеристики доступны при определении количественных требований путем указания трудоемкости продолжительности соответствующих процессов подготовки и обучения пользователей к эффективной эксплуатации разрабатываемого сайта-визитки МК ДОУ «Детский сад №22».

Понятность — зависит от качества документации и индивидуальных впечатлений потенциальных пользователей, от функций и характеристик разрабатываемого сайта-визитки МК ДОУ «Детский сад №22».

Завершенность — свойство разрабатываемого сайта-визитки МК ДОУ «Детский сад №22», которое заключается в способности не попадать в состояния отказов вследствие потерь, искажений, ошибок и недостатков в данных. Они появляются вследствие недостаточного тестового покрытия при испытаниях компонентов разрабатываемого сайта-визитки МК ДОУ «Детский сад №22» в целом, а также неполной завершенностью их тестирования и защищенностью от искажений.

2.2 Формирование требований к системе

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

Целью создания сайта-визитки МК ДОУ «Детский сад №22» является обеспечение информационного присутствия учреждения в сети Интернет, обеспечение быстрого доступа к ресурсам учреждения для пользователей системы.

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

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

Основные выбранные параметры для шрифтов:

  • основными шрифтовыми гарнитурами сайта-визитки учреждения будут являться гарнитуры Arial, Verdana, Times New Roman, так как шрифты, которые используются для оформления графики и текстовых материалов сайта-визитки, не должны быть в противоречии с корпоративным стилем учреждения. В том случае, если на компьютере пользователя будут отсутствовать необходимые шрифты, будет предусмотрено использование стандартных групп шрифтов браузеров таким образом, чтобы смена шрифтов из соответственной группы не приводила к визуальному искажению текста;
  • величина шрифтов должна обеспечивать удобство восприятия текста при наименьшем допустимом размере экрана;
  • предпочтительно использовать темный цвет шрифта на светлом фоне.

В макете дизайна необходимо обозначить внешний вид всех типов ссылок:

обычная ссылка;

активная ссылка;

ссылка посещенной страницы.

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

Дизайн сайта-визитки обязан удовлетворять следующие требования по эргономике и технической эстетике:

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

Разрабатываемый проект сайт-визитка МК ДОУ «Детский сад №22» должен давать посетителю возможность просмотра фотографий, ознакомления с информацией о работе учреждения, контактах, часах приема граждан.

В разрабатываемом проекте будет два класса пользователей: администратор и посетитель сайта. К возможностям посетителя будут относиться: просмотр фотографий, обзор информации об учреждении и пользование документами. К возможностям администратора будут относиться: добавления, редактирования, просмотра и удаления всех данных сайта-визитки [11].

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

  • высокопроизводительный web-сервер и сервер базы данных со следующим программным обеспечением:
  • microsoft Windows Server 2008/2012;
  • система управления базами данных Microsoft SQL Server 2008;
  • HTML;

На стороне клиента необходимо наличие одного из следующих браузеров:

  • интернет-браузер Opera;
  • интернет-браузер Google Chrome;
  • интернет-браузер Internet Explorer.

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

2.3 Структура сайта

Структура сайта представляет собой такое расположение разделов, которое позволяет посетителям быстро переходить от одной страницы к другой, соблюдая правила 3-4 кликов. Грамотно разработанная структура дает возможность разместить на сайте максимум нужной информации, которая не потребует больших временных затрат для ее нахождения и прочтения [28, 29].

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

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

  • линейная структура. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу;
  • древовидная структура. Пользователь при заходе на главную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п.;
  • решетчатая структура. В ней все страницы размещаются в различных ветках. У пользователя есть возможность перемещаться по ним не только вертикально, но и горизонтально [30];
  • логическая структура сайта-визитки МК ДОУ «Детский сад №22», представленная в соответствии с рисунком 2.1.

Страница выбранного раздела

Рисунок 2.1 Логическая структура сайта-визитки

Основными пунктами меню являются:

  • «Главная страница»;
  • «Документы»;
  • «Фотогалерея»;
  • «Для родителей»;
  • «Контакты».

Описание разделов и страниц главного меню сайта-визитки МК ДОУ «Детский сад №22»:

  • «Главная страница»: на данной странице находится общая информация об учреждении. Так как сайт разрабатывается не только для знающих пользователей, но и просто для создания представления об этом дошкольном образовательном учреждении, то есть краткое описание создания данного учреждения, на каком основании оно работает и кто является учредителем, чтобы дать возможность посетителю оценить все плюсы и минусы;
  • «Документы»: данный раздел содержит ссылки на Устав Муниципального казенного дошкольного образовательного учреждения «Детский сад №22», Паспорт дорожной безопасности, Лицензию Министерства образования и науки Республики Калмыкия
  • «Фотогалерея»: данный раздел будет особо интересен посетителям сайта-визитки, так как здесь представлены фотографии учреждения, воспитанников, педагогов;
  • «Для родителей»: эта страница предназначена для размещения информации для родителей: список документов для возмещения части родительской оплаты;
  • «Контакты»: данная страница предоставляет информацию для связи с учреждением, а так же предоставляет схему проезда.

2.4 Классы пользователей

При проектировании сайта, можно выделить следующие классы пользователей:

  • посетитель;
  • администратор.

Прецеденты класса «Посетитель»:

  • просмотр информационных данных – прецедент используется классом «Посетитель» для просмотра статей;
  • просмотр фотографий – прецедент используется для просмотра фотографийМК ДОУ «Детский сад №22»;
  • обратная связь – прецедент используется для возможности отправки посетителем администратору письма на электронный адрес, посредством формы обратной связи.

Прецеденты класса «Администратор»:

  • добавление, удаление и редактирование информации – прецедент используется классом «Администратор» для добавления новых текстовых данных, удаление данных, редактирование необходимой информации;
  • добавление и удаление – прецедент используется для добавления фотографий и удаления картинок.

2.5 Реализация web-сайта и тестирование

На главной странице сайта-визитки, представленной в соответствии с рисунком 2.2, пользователь видит общую информацию о Муниципальном казенном дошкольном образовательном учреждении «Детский сад №22». Здесь указано когда было открыто данное учреждение, кто является учредителем, на каком основании МК ДОУ «Детский сад №22» осуществляет свою деятельность.

Рисунок 2.2 Главная страница сайта-визитки МК ДОУ «Детский сад №22»

Страницы сайта-визитки МК ДОУ «Детский сад №22»имеют удобный, интуитивно понятный интерфейс. В левой части каждой страницы сайта находится главное меню с кнопками навигации по наиболее важным страницам.

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

Рисунок 2.3 Верхняя часть сайта

Для удобного перемещения по разделам сайта создано меню сайта, представленное в соответствии с рисунком 2.4. С его помощью пользователь может перейти в разделы:

  • «Главная страница»;
  • «Документы»;
  • «Фотогалерея»;
  • «Для родителей»;
  • «Контакты».

Рисунок 2.4. Меню сайта

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

В центральной части на каждой странице располагается контент – содержимое страницы. Для каждой страницы содержимое контента меняется, но дизайн остается прежним. В соответствии с рисунком 2.5 представлена страница «Документы».

Рисунок 2.5 Страница «Документы»

На странице документы располагаются ссылки для скачивания и просмотра Устава Муниципального казенного дошкольного образовательного учреждения «Детский сад №22», Паспорта дорожной безопасности, Лицензии Министерства образования и науки Республики Калмыкия.

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

Рисунок 2.6 Страница «Фотогалерея»

Для всего раздела «Фотогалерея» применен аналогичный стиль наполнения страниц.

На странице «Для родителей» отображается информация о документах, необходимых для оформления ребенка в ДОУ, а также о документах для назначения компенсации части родительской оплаты, что представлено в соответствии с рисунком 2.7.

Рисунок 2.7 Страница «Для родителей»

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

  • Юридический адрес
  • График работы
  • Заведующая
  • Старший воспитатель
  • Зам. по АХЧ
  • График приема граждан

Рисунок 2.8 Страница «Контакты»

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

  • Mozilla Firefox 0.1;
  • Opera версия 100.1463;
  • Google Chrome версия 33.0;
  • Internet Explorer версия 10.0.

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

Запустим сайт в браузере Google Chrome. Страница сайта, которая выглядит в соответствии с рисунком 2.9, отображается корректно, как и было задумано разработчиком.

Рисунок 2.9 Страница сайта в браузере Google Chrome

Запустим сайт в браузере Internet Explorer. Страница сайта, которая выглядит в соответствии с рисунком 2.10, отображается корректно, как и было задумано разработчиком.

Рисунок 2.10 Страница сайта в браузере Internet Explorer 10.0

Запустим сайт в браузере Mozilla Firefox. Страница сайта, которая выглядит в соответствии с рисунком 2.11, отображается корректно, как и было задумано разработчиком.

Рисунок 2.11 Страница сайта в браузере Mozilla Firefox

Запустим сайт в браузере Opera. Страница сайта, которая выглядит в соответствии с рисунком 2.12, отображается корректно, как и было задумано разработчиком. 

Рисунок 2.12 Страница сайта в браузере Opera

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

ЗАКЛЮЧЕНИЕ

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

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

С помощью разработанного проекта пользователи смогут получать достоверную информацию, необходимую для поступления в ДОУ.

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

  • исследована деятельность МК ДОУ «Детский сад №22»;
  • проведен анализ и характеристика· работы учреждения;
  • выполнен обзор существующих web-сайтов направленных на реализацию изделий из металла;
  • сформированы требования к ·разрабатываемому сайту-визитке;
  • определены функциональные ·требования к сайту-визитке;
  • разработан интерфейс и элементы web-дизайна;
  • проведена апробация выполненной работы.

По результатам ·проведенного ·анализа можно ·сделать вывод, что в МК ДОУ «Детский сад №22» отсутствует средство детального информирования населения об учреждении.

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

Выполнено планирование сайта-визитки МК ДОУ «Детский сад №22».

Создание данного проекта позволило сформулировать следующие выводы:

На ·первом этапе· исследования были сформулированы цель, задачи и требования к сайту-визитке МК ДОУ «Детский сад №22».

Целью данной выпускной квалификационной работы являлась разработка сайта-визитки МК ДОУ «Детский сад №22» для ·повышения информированности населения об учреждении и его деятельности.

Для достижения поставленной цели в выпускной квалификационной работе, необходимо было понимать требования, которые были поставлены перед задачей создания сайта-визитки МК ДОУ «Детский сад №22». Требования, обычно предъявляемые к разрабатываемому программному продукту, были разделены на три основные группы:

  • социальные требования;
  • экономические требования;
  • технические требования.

На втором этапе разработки был обоснован и выбран следующий инструментарий:

  • язык гипертекстовой разметки HTML;
  • каскадные таблицы стилей CSS;
  • текстовый редактор Notepad++6.7.8.2

Процесс проектирования сайта-визитки МК ДОУ «Детский сад №22» состоял из нескольких этапов, первым из которых было проектирование содержимого.

Процесс проектирования структуры сайта-визитки МК ДОУ «Детский сад №22» включал в себя 2 основных этапа:

  • определение общих требований к структуре сайта
  • проектирование логичекой структуры сайта-визитки МК ДОУ «Детский сад №22»

На следующем этапе разработки сайта-визитки МК ДОУ «Детский сад №22» было проведено планирование режимов доступа.

Этап создания сайта-визитки МК ДОУ «Детский сад №22» был реализован с использованием разработанных в выпускной квалификационной работе требований к контенту и структуре.

Спроектированный сайт-визитка удовлетворяет всем требованиям, поставленным на этапе постановки задачи.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

  1. Махиненко Е. Н. Методические указания по подготовке и выполнению выпускной квалификационной работы. – Москва: Колледж МЭСИ, 2014. – 17 с.;
  2. ГИА_025_СТД_ Техническое задание на создание автоматизированной системы;
  3. «СИЛВОРК», http://www.swork.by/ (Дата присвоенная файлу: 24.02.2012. Актуальная дата: 19.11.2013);
  4. Боггс У., Боггс М. UML и RationalRose/ Пер. с англ. – М.: ЛОРИ, 2000. – 307 c.;
  5. IncomediaWebSiteX5, http://www.websitexcom/ru/o-nas.html (Дата присвоенная файлу: 30.03.2012. Актуальная дата: 20.11.2013);
  6. Климов А., Рева О. HTML как 2х2. – Эксмо, 2012 г. – 123с.;
  7. Климов А., Рева О. Справочник по тегам HTML и CSS. – Эксмо, 2012 г. – 123 с.;
  8. Лазаро И.К., Джозеф И.К. Полный справочник по HTML, CSS и javascript. – СПб.: ЭКОМ Паблишерз, 2013 г. – 234 с.;
  9. Тиге Д.К., DHTML и CSS для Internet — НТ Пресс, 2011. – 520 с.;
  10. Джилленуотер З., Сила CSS3 — Питер, 2012. – 212 с.;
  11. Шмитт К., CSS. Рецепты программирования – Русская Редакция, 2011. – 320 с.;
  12. Гаевский А.Ю., Романовский В.А. «100% самоучитель по созданию Web-страниц и Web-сайтов: HTML и javascript», 2010 г.;
  13. Рева О.Н. «javascript в кармане», 2010 г.;
  14. Флэнаган Д. javascript, Симбо, 2011г;
  15. Робин Никсон — Создаем веб-сайты с помощью PHP, MySQL и JS, 2011 г.;
  16. МишельЕ. Дэвис, ДжонА. ФиллипсИзучаем PHP и MySQL, СПб. – СимволПлюс, 2012 г. 448 с.;
  17. PHP: Простой учебник: http://php.net (Дата присвоенная файлу: 28.05.2013. Актуальная дата: 19.11.2013);
  18. Маркин А. В. «Построение запросов и программирование на SQL», 2010 г.;
  19. Дюбуа П. MySQL, Москва, Вильямс, 2012 г., 1168 с.;
  20. Шмитт К. Рецепты программирования, 3-е издание, Русская Редакция, БХВ-Петербург, 2011 г., 672 с.;
  21. «Все для создания Web-сайта», http://www.Webstudio.ru.ru/glossary/ logical_structure.htm (Дата присвоенная файлу: 28.05.2013. Актуальная дата: 19.11.2013);
  22. Маркотта К.И., Отзывчивый Web – дизайн — НТ Пресс, 2014. — 148 с.;
  23. Уайт Ян В., Редактируем дизайном – Университетская книга, 2010. — 220 с.
  24. Кемеровский Государственный Университет — Центр Новых Информационных Технологий; [Электронный ресурс] — режим доступа: http://rrc.kemsu.ru/base/raz.htm ,  свободный. – Загл. с  экрана
  25. Костромин В. А. Конспект вебмастера. Выбор системы управления содержанием сайта (контентом) // Справочник вебмастера. – 2009-2013.
  26. Крамер Д. Joomla! Как спланировать, создать и поддерживать ваш веб-сайт / Д. Крамер. – М. : Рид Групп, 2011. – 400 с.
  27. Лобуренко Е. О. Школьный сайт: создание, наполнение и привлечение посетителей / Е. О. Лобуренко, Е. В. Якушина // Народное образование. – 2012. – № 4. – С. 171-181.
  28. Маркелов А. О. Разработка Интернет-ресурса “Гид первокурсника института математики, физики и информатики” средствами CMS JOOMLA // Гаудеамус. – 2011. – Т. 2, № 18. – С. 137-138.
  29. Норт Б. М. Joomla! : пактическое руководство / Б. М. Норт ; [пер. с англ. А. Киселева]. – СПб. ; М. : Символ : Символ-Плюс, 2008. – 448 с.
  30. Рамел Д. Самоучитель Joomla! / Д. Рамел ; [пер. с англ. Д. Колисниченко]. – СПб. : БХВ-Петербург, 2008. – 448 с..
  31. Ломов А.Ю HTML,CSS, Скрипты: практика создания сайтов./Санкт-Петеребург «БХВ-Петребург»,2006. -368с.
  32. Л. Аргерих и др. Профессиональное PHP программирование. – Пер. с англ. – СПб.: Символ-Плюс, 2003. – 1048 с., ил.
  33. Айзекс С. Dynamic HTML. Секреты создания интерактивных Web-страниц. – Киев: BHV, 2001. – 496 с.
  34. А.Мазуркевич Д.Еловой. PHP настольная книга программиста.– Москва: Новое издание, 2004. – 479 c.

ПРИЛОЖЕНИЯ

Приложение 1

INDEX.HTML

<!DOCTYPE html>

<html>

<head><!— Этот раздел предназначен для заголовка страницы и технической информации. —>

<meta charset=»utf-8″><!—задаем кодировку документа—>

<title>Детский сад</title><!—заголовок документа—>

<link type=»text/css» rel=»stylesheet» href=»style.css»> <!— устанавливаем связь с внешним файлом со стилями. —>

</head>

<body><!—предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера —>

<div id=»main-wrapper»><!—главный блок—>

<div id=»maket»><img src=»images/header.gif» alt=»»><!—главный блок—>

</div><!—шапка сайта—>

<div id=»left»><ul class=»menu left»><!—кнопки в левой части страницы—>

<li><a href=»index.html»>

Главная страница </a>

<li><a href=»docs.html»>               

Документы</a>

<li><a href=»pict.html»>                

Фотогалерея</a>

<li><a href=»parents.html»>          

Для родителей</a>

<li><a href=»contacts.html»>         

Контакты</a>

</ul>

</div>

<div id=»right» ><!—контент—>

<h1>ОБЩАЯ ИНФОРМАЦИЯ</h1><!—заголовок—>

<br>

<br>

<p>Мы рады приветствовать Вас на сайте нашего детского сада!!!

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

<p>Наше Муниципальное казенное дошкольное образовательное учреждение «Детский сад №22» открыто решением исполнительного комитета Элистинского городского Совета Народных депутатов от 08.01.1983 года. Учредителем является Мэрия города Элисты. ДОУ осуществляет свою деятельность в соответствии с Законом «Об образовании», типовым положением о дошкольном учреждении, договором между учредителем и ДОУ, Уставом МК ДОУ «Детский сад №22».

         <p>В нашем детском саду функционирует всего 10 групп для детей дошкольного возраста от 1,5 до 7 лет: 3 ясельные, 1 национальная, 6 дошкольных общеобразовательных групп.

Педагогический коллектив ДОУ с 1998 года работает в режиме образовательных программ «Радуга» Т.Н. Дороновой (ясельные группы), «Развитие» Л.А. Венгера.  Также используется программа  по музыкальному воспитанию дошкольника  «Музыкальные шедевры» О.П.Радыновой, по обучению детей калмыцкому языку «Программа обучения  родному языку в детском саду»  В.К. Эренженовой.

Приоритетные направления: физическое и художественно — эстетическое развитие дошкольника.

</div>

<div class=»appendix»></div><!—промежуточный блок (чтобы основной контент не накладывался на подвал)—>

</div>

<footer>© 2011-2015 Хонгор Хулхачиев</footer><!—подвал—>

</body>

</html>

Приложение 2

CONTACTS.HTML

<!DOCTYPE html>

<html>

<head><!— Этот раздел предназначен для заголовка страницы и технической информации. —>

<meta charset=»utf-8″><!—задаем кодировку документа—>

<title>Детский сад</title><!—заголовок документа—>

<link type=»text/css» rel=»stylesheet» href=»style.css»> <!— устанавливаем связь с внешним файлом со стилями. —>

</head>

<body><!—предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера —>

<div id=»main-wrapper»><!—главный блок—>

<div id=»maket»><img src=»images/header.gif» alt=»»><!—главный блок—>

</div><!—шапка сайта—>

<div id=»left»><ul class=»menu left»><!—кнопки в левой части страницы—>

<li><a href=»index.html»>

Главная страница </a>

<li><a href=»docs.html»>               

Документы</a>

<li><a href=»pict.html»>                

Фотогалерея</a>

<li><a href=»parents.html»>          

Для родителей</a>

<li><a href=»contacts.html»>         

Контакты</a>

</ul>

</div>

<div id=»right» ><!—контент—>

<h1>КОНТАКТЫ</h1>      

<br>

<br>

<p>Юридический адрес: 358011, Республика Калмыкия, г. Элиста, 4 мкр., д. 30

<p>График работы:              понедельник – пятница

<p>                               с 7:00 до 19:00 часов

<p>Заведующая –                                    <i>Насунова Лидия Николаевна</i>

<p>Старший воспитатель —            <i>Годьгаева Нюдля Бевеевна</i>

<p>Зам. по АХЧ —                                    <i>Очирова Галина Шоваевна</i>

<p>График приема граждан:        понедельник       с 15:00 до 17:00 часов

<p>                               вторник     с 15:00 до 17:00 часов

<p>                               среда                   с 15:00 до 17:00 часов

<div id=»map»>

<script type=»text/javascript» charset=»utf-8″ src=»https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=zZeK7gHWWFKnS5RSryV9LYOzrfegU6TJ&width=600&height=450″></script> <!—Яндекс карта—>

</div>

</div>

</div>

<div class=»appendix»></div><!—промежуточный блок (чтобы основной контент не накладывался на подвал)—>

</div>

<footer>© 2011-2015 Хонгор Хулхачиев</footer><!—подвал—>

</body>

</html>

Приложение 3

DOCS.HTML

<!DOCTYPE html>

<html>

<head><!— Этот раздел предназначен для заголовка страницы и технической информации. —>

<meta charset=»utf-8″><!—задаем кодировку документа—>

<title>Детский сад</title><!—заголовок документа—>

<link type=»text/css» rel=»stylesheet» href=»style.css»> <!— устанавливаем связь с внешним файлом со стилями. —>

</head>

<body><!—предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера —>

<div id=»main-wrapper»><!—главный блок—>

<div id=»maket»><img src=»images/header.gif» alt=»»><!—главный блок—>

</div><!—шапка сайта—>

<div id=»left»><ul class=»menu left»><!—кнопки в левой части страницы—>

<li><a href=»index.html»>

Главная страница </a>

<li><a href=»docs.html»>               

Документы</a>

<li><a href=»pict.html»>                

Фотогалерея</a>

<li><a href=»parents.html»>          

Для родителей</a>

<li><a href=»contacts.html»>         

Контакты</a>

</ul>

</div>

<div id=»right» ><!—контент—>

<h1>ДОКУМЕНТЫ</h1>

<br>

<br>

<ul>

<li><a href=»images/ustav.doc» download><!—ссылки для скачивания—>

УСТАВ

Муниципального казенного дошкольного

образовательного учреждения

«Детский сад №22»

</a>

</li>

<li><a href=»images/passport.pdf» download>

ПАСПОРТ

дорожной безопасности </a>

</li>

<li><a href=»images/license.jpg» download>

ЛИЦЕНЗИЯ

Министерства образования и науки

Республики Калмыкия</a>

</li>

</ul>

</div>

<div class=»appendix»></div><!—промежуточный блок (чтобы основной контент не накладывался на подвал)—>

</div>

<footer>© 2011-2015 Хонгор Хулхачиев</footer><!—подвал—>

</body>

</html>

Приложение 4

PARENTS.HTML

<!DOCTYPE html>

<html>

<head><!— Этот раздел предназначен для заголовка страницы и технической информации. —>

<meta charset=»utf-8″><!—задаем кодировку документа—>

<title>Детский сад</title><!—заголовок документа—>

<link type=»text/css» rel=»stylesheet» href=»style.css»> <!— устанавливаем связь с внешним файлом со стилями. —>

</head>

<body><!—предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера —>

<div id=»main-wrapper»><!—главный блок—>

<div id=»maket»><img src=»images/header.gif» alt=»»><!—главный блок—>

</div><!—шапка сайта—>

<div id=»left»><ul class=»menu left»><!—кнопки в левой части страницы—>

<li><a href=»index.html»>

Главная страница </a>

<li><a href=»docs.html»>               

Документы</a>

<li><a href=»pict.html»>                

Фотогалерея</a>

<li><a href=»parents.html»>          

Для родителей</a>

<li><a href=»contacts.html»>         

Контакты</a>

</ul>

</div>

<div id=»right» ><!—контент—>

<h1>РОДИТЕЛЯМ</h1>

<br>

<br>

<h2>Документы, необходимые для оформления ребенка в ДОУ</h2>

<ul>

<li>Заявление о приеме ребенка в детский сад</li>

<li>Медицинская карта Форма №026/у-2000</li>

<li>Договор между МК ДОУ №22 и родителями (законными представителями) ребенка</li>

<li>Копия свидетельства о рождении ребенка – 2 экземпляра</li>

<li>Копия паспорта одного из родителей (законных представителей) – 2 экземпляра</li>

<li>Документ о льготе</li>

<li>СНИЛС

<h2>Документы для назначения компенсации части родительской оплаты</h2>

<li>Справка о составе семьи</li>

<li>Копия сберкнижки или выписка из лицевого счета – 2 экземпляра</li>

<li>СНИЛС</li>

</ul>

</div>

<div class=»appendix»></div><!—промежуточный блок (чтобы основной контент не накладывался на подвал)—>

</div>

<footer>© 2011-2015 Хонгор Хулхачиев</footer><!—подвал—>

</body>

</html>

Приложение 5

PICT.HTML

<!DOCTYPE html>

<html>

<head><!— Этот раздел предназначен для заголовка страницы и технической информации. —>

<meta charset=»utf-8″><!—задаем кодировку документа—>

<title>Детский сад</title><!—заголовок документа—>

<link type=»text/css» rel=»stylesheet» href=»style.css»> <!— устанавливаем связь с внешним файлом со стилями. —>

</head>

<body><!—предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера —>

<div id=»main-wrapper»><!—главный блок—>

<div id=»maket»><img src=»images/header.gif» alt=»»><!—главный блок—>

</div><!—шапка сайта—>

<div id=»left»><ul class=»menu left»><!—кнопки в левой части страницы—>

<li><a href=»index.html»>

Главная страница </a>

<li><a href=»docs.html»>               

Документы</a>

<li><a href=»pict.html»>                

Фотогалерея</a>

<li><a href=»parents.html»>          

Для родителей</a>

<li><a href=»contacts.html»>         

Контакты</a>

</ul>

</div>

<div id=»right» ><!—контент—>

<h1>ФОТОГАЛЕРЕЯ</h1>

<br>

<br>

<img src=»images/pic_1.jpg» alt=»»><!—вывод фотографий—>

<img src=»images/pic_2.jpg» alt=»»>

<img src=»images/pic_3.jpg» alt=»»>

<img src=»images/pic_4.jpg» alt=»»>

<img src=»images/pic_5.jpg» alt=»»>

<img src=»images/pic_6.jpg» alt=»»>

</div>

<div class=»appendix»></div><!—промежуточный блок (чтобы основной контент не накладывался на подвал)—>

</div>

<footer>© 2011-2015 Хонгор Хулхачиев</footer><!—подвал—>

</body>

</html>

Приложение 6

STYLE.CSS

/*универсальный селектор*/

*{padding:0;margin:0}

/*описание стилей */

html,body{height:100%;font-size:100%; font-family:arial; line-height:150%;

background-size:cover;color:#0000CD;background-image: url(images/fon.jpg);}

/*описание стилей контейнеров */

#maket {width:100%;padding:0px;}

#left {width:200px;float:left;padding:5px;min-height:300px;}

#right {margin-left:220px;padding:5px}

#main-wrapper{min-height:100%;padding:0px;margin:0px;}

#map {margin-top:10px;}

header{background:#eee}

/*описание стилей заголовков */

h1 {color:blue; text-shadow: 3px 2px 2px black;text-align:center;} h2 {color:blue}

h3 {color:green}

footer{background:#CFCFCF;height:100px;margin-top:-100px;text-align:center;height:30px;}

.appendix{height:110px;clear:both}

/*описание кнопок меню*/

.menu a {text-decoration:none}

.menu.left li {border:1px solid #000000;padding:5px; margin:5px; border-radius:10px;background:#1E90FF}

.menu.left a {color:white;font-family:arial;display:block;}

#maket img {width: 100%;}

#left ul {margin-top:80px;;padding:0px;bottom:200px;}

#right ul {type:circle}

#right img {width:30%}

 Скачать: diplom-razrabotka-sayta-1.docx

1. Андерсон С. Приманка для пользователей. Создаем привлекательный сайт / С. Андерсон – Спб.: Питер, 2013. – 240 с.
2. Андросов Н. Интернет-маркетинг на 100% / Н. Андросов, И. Ворошилова, Долгов Д. – Спб.: Питер, 2015. – 240 с.
3. Алленова Н. М. Html – Первые Шаги: учебное пособие / Н. М. Алленова. – Москва: Кудиц-Образ, 2010. – 130 с.
4. Бабаев А. Создание сайтов / А. Бабаев, Н. Евдокимов, М. Бодеч – Спб.:Питер, 2014 – 304 с.
5. Байков В. Интернет. Поиск информации и продвижение сайтов: книга по требованию / В. Байков. – Москва: Вильямс, 2012. – 288 c.
6. Венедюхин А., Создание сайтов / А. Венедюхин, А. Воробьев. – Москва: Эксмо, 2011. – 528 c.
7. Гоше Х.Д. HTML5. Для профессионалов / Х.Д. Гоше – Спб.: Питер, 2015. – 560 с.
8. Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. – Москва: Эксмо, 2013. – 480 c.
9. Джонс К. Б. 140 технологий раскрутки сайтов / К. Б. Джонс. – Москва: Рид Групп, 2011. – 352 c.
10. Дронов В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. – Санкт-Петербург: БХВ-Петербург, 2011. – 416 c.
11. Дронов В. PHP, MySQL и Dreamweaver MX 2004. Разработка интерактивных Web-сайтов / В. Дронов. – Спб.: БХВ-Петербург, 2010. – 448 c.
12. Дронов В. Macromedia Dreamweaver 4: разработка Web-сайтов / В. Дронов. – Спб.: БХВ-Петербург, 2014. – 608 c.
13. Дунаев В.В. HTML, скрипты и стили / В.В. Дунаев — Спб.: БХВ-Петербург, 2015. – 816 с.
14. Зобина М. Стартап-гайд. Как начать… и не закрыть свой интернет-бизнес / М. Зобина, С. Ашин, Н. Давыдов – М.: Альпина Паблишер, 2015. – 166 с.
15. Клименко Р.А. Веб-мастеринг на 100% / Р.А. Клименко, В.Н. Шимкевич – Спб.: Питер, 2015 – 560 с.
16. Колисниченко Д.Н. PHP и MySQL. Разработка веб-приложений / Д.Н. Колисниченко – Спб.: БХВ-Петербург, 2015. – 592 с.
17. Кольчугин Д.А. Компьютер и Интернет — это просто / Д.А. Кольчугин, М.И. Лебешева, Е.И. Серегина — М: АСТ, 2015 г. – 160 с.
18. Кроудер Д. Создание веб-сайта для чайников / Д. Кроудер – М.:ДИАЛЕКТИКА-ВИЛЬЯМС, 2011. – 272 с.
19. Кузнецов М. PHP. Практика создания Web-сайтов / М. Кузнецов, И. Симдянов. – М.: Эксмо, 2012. – 347 c.
20. Лазарис Л. CSS. Быстрый старт / Л. Лазарис – М.: Эсмо-Пресс, 2014. – 192 с.
21. Ланс Л. Проектирование прибыльных веб-сайтов / Л. Ланс, С. Нихаус. – М.: Эксмо, 2011. – 256 c.
22. Мак-Дональд М. Создание Web-сайта. Недостающее руководство / М. Мак-Дональд — Спб.: БХВ-Петербург, 2013. – 624 с.
23. Митчелл С. 5 проектов Web-сайтов от фотоальбома до магазина / С. Митчелл.– М.: НТ Пресс, 2013. – 224 c.
24. Мротчковский Н.С. Интернет-маркетинг без бюджета. Как продвигать, если денег нет или их мало / Н. Мротчковский, А. Горенюк – Спб.: Питер, 2014. – 192 с.
25. Овчинников Р. Корпоративный веб-сайт на 100%. Требуйте от сайта большего! / Р. Овчинников, С. Сухов — Спб.: Питер, 2010. – 320 с.
26. Петюшкин А. В. HTML / А. В. Петюшин. – Спб.: Экспресс-курс, 2010. – 384 с.
27. Райен Д. Краткий курс интернет-маркетинга / Д. Райен, Д. Келвин – М.: Университетская книга, 2013. – 320 с.
28. Райтман М. Цифровой дизайн. Основы веб-проектирования с помощью инструментов Adobe / М. Райтман – М. Рид Групп, 2011 – 768 с.
29. Руденко И. Экономика в условиях роста виртуального бизнеса / И. Руденко — LAP Lambert Academic Publishing, 2014 – 176 с.
30. Рыжикова Н. Компьютер: От азов до сертификата пользователя за 9 шагов / Н. Рыжикова, В. Молодцов – Другое решение, 2014. – 144 с.
31. Терри Д. Интернет-маркетинг с нуля: как увеличить прибыли / Д. Терри, Л.В. Федорова – М.: Омега-Л, 2015. – 255 с.
32. Фрейен Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейен. – Москва: АСТ, 2014. – 304 c.
33. Фримен Э. Изучаем программирование на JavaScript / Э. Фримен, Робсон – Спб.: Питер, 2015. – 640 с.
34. Халворсон К. Контентная стратегия управления сайтом / К. Халворсон, М. Рэч — Спб.: Питер, 2013. – 224 с.
35. Хананеин Д. М. Информиционно-коммуникационные технологии / Д.М. Хананеин. – Спб.: Питер, 2010. – 127с.
36. Хасей Т. WordPress. Создание сайтов для начинающих / Т. Хасей. – М.: Эксмо, 2012. – 432 с.
37. Хуторской А.В. Технология создания сайтов / А.В. Хуторской, А.П. Орешко. – М.: Дрофа, 2011. – 256 c.
38. Пользователи Интернета (на 100 человек) [Электронный ресурс].// Всемирный банк [web-сайт]. http://data.worldbank.org/indicator/IT.NET.USER.P2 (4.06.2015)
39. Создание Web-сайтов [Электронный ресурс]. — Обучающая программа, 16 видеокурсов, 297 уроков (2,1 Гб) – TeachVideo – 1 электронный носитель (DVD диск) – Системные требования – Windows XP и выше, Internet Explorer, Adobe FlashPlayer, кодеки .mp4, например, K-Lite Mega Codec Pack — Загл. с экрана. — Диск и сопровод. материал помещены в контейнер 20х14 см.
40. Справка по Adobe Muse [Электронный ресурс].// Adobe Россия: решения для творчества, маркетинга и работы с документами [web-сайт]. https://helpx.adobe.com/ru/muse/topics.html#dynamicpod_reference_7 (1.06.2015)

Автор:   •  Сентябрь 16, 2021  •  Дипломная работа  •  3,359 Слов (14 Страниц)  •  331 Просмотры

Страница 1 из 14

СОДЕРЖАНИЕ

Введение 3

1Технический проект 5

1.1 Исследование предметной области

1.2 Постановка задач

1.3 Требования к программному обеспечению и техническим средств

1.4 Проектирование структуры сайта

1.5 Методы и этапы разработки веб-сайтов

1.6 Выбор языка программирования веб-сайта

1.7 Выбор средств реализации

2 Рабочий проект

2.1 Схема взаимодействия страниц

2.2 Разработка макета сайта

2.3 Работа с сайтом

ВВЕДЕНИЕ

В современном мире глобальная сеть Интернет прочно вошла в нашу жизнь. Постоянно увеличивается количество пользователей глобальной сети.

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

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

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

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

Целью дипломного проекта является разработка и создание сайта визитки мебельного магазина «GOLD».

Целесообразность данного дипломного проекта характеризуется тем, что:

⦁ веб-сайт будет иметь простой в использовании и удобный интерфейс;

⦁ для дизайна веб-сайта будет подобрана оптимальная цветовая гамма;

⦁ навигация веб-сайта будет оптимальной и доступной;

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

⦁ сформулировать актуальность и целесообразность дипломного проекта;

⦁ описать минимальные требования к техническим и программным требованиям;

⦁ разработать макет веб-сайта и его дизайн;

⦁ обосновать выбор средств реализации веб-сайта;

⦁ создать страницы и меню сайта;

⦁ рассчитать экономическую эффективность проекта.

Предметом исследования являются инструментальные средства разработки сайта.

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

⦁ ТЕХНИЧЕСКИЙ ПРОЕКТ

1.1 Исследование предметной области

Мебельный магазин «GOLD» занимается продажей разной мебели.

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

Доступно только на Essays.club


< Программирование, компьютеры и кибернетика

Поиск на сайте math-solution.ru рефератов, курсовых, дипломных и контрольных работ, презентаций и т.д.

дипломная работа на тему:

Основные этапы разработки Web-сайта, принцип его работы. Технологии серверных скриптов. Характеристика объекта проектирования сайта. Программное обеспечение для реализации создания Web-сайта. Построение базы данных, организация обратной связи и форума.

Категория: Программирование, компьютеры и кибернетика
Предмет: Программирование
Вид: дипломная работа

< Программирование, компьютеры и кибернетика

Добавить комментарий

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