Разработка сайта-визитки для предприятия МК ДОУ «Детский сад №22»

0

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

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

Разработка сайта-визитки для предприятия МК ДОУ «Детский сад №22»

СОДЕРЖАНИЕ

ВВЕДЕНИЕ. 7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сокращения:

Аббревиатура	Полное название
МК ДОУ	Муниципальное казенное дошкольное образовательное учреждение
ПК	Персональный компьютер
ОС	Операционная ситема
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, что позволяет достичь максимальной скорости работы в сочетании с минимальным размером программы. Кроме того, пользователи могут задавать собственные правила подсветки и сворачивания для других языков.

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

Текст подсвечивается и есть возможность для сворачивания блоков, согласно синтаксису языка программирования.
WYSIWYG (при вводе текста получается то, что видно на экране).
Режим подсветки синтаксиса настраивается пользователем
Автоматическое завершение вводимого слова
Синхронная работа с разными документами
Одновременный просмотр нескольких документов
Поддержка постоянных выражений Поиска/Замены. Полная поддержка перетягивания фрагментов текста
Динамическое видоизменение окон просмотра
Машинальное определение состояния файла
Увеличение и уменьшение
Поддержка немалого количества языков
Заметки
Выделение скобок при исправлении текста
Запись макроса и его выполнение

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

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

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

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

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

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

В случае нескольких пар комментарий определено, что открытые символы комментариев соответствуют только с близким комментариями, имеющих символы того же порядка (для примера: /* 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» был реализован с использованием разработанных в выпускной квалификационной работе требований к контенту и структуре.

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

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

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

ПРИЛОЖЕНИЯ

Приложение 1

INDEX.HTML

<!DOCTYPE html>

<html>

<title>Детский сад</title>

</head>

</div>

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

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

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

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

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

</ul>

</div>

<h1>ОБЩАЯ ИНФОРМАЦИЯ</h1>

<br>

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

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

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

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

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

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

</div>

</div>

</body>

</html>

Приложение 2

CONTACTS.HTML

<!DOCTYPE html>

<html>

<title>Детский сад</title>

</head>

</div>

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

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

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

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

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

</ul>

</div>

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

<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>

</div>

</body>

</html>

Приложение 3

DOCS.HTML

<!DOCTYPE html>

<html>

<title>Детский сад</title>

</head>

</div>

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

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

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

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

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

</ul>

</div>

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

<br>

<ul>

УСТАВ

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

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

"Детский сад №22"

</a>

</li>

ПАСПОРТ

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

</li>

ЛИЦЕНЗИЯ

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

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

</li>

</ul>

</div>

</div>

</body>

</html>

Приложение 4

PARENTS.HTML

<!DOCTYPE html>

<html>

<title>Детский сад</title>

</head>

</div>

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

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

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

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

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

</ul>

</div>

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

<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>

</body>

</html>

Приложение 5

PICT.HTML

<!DOCTYPE html>

<html>

<title>Детский сад</title>

</head>

</div>

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

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

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

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

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

</ul>

</div>

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

<br>

</div>

</div>

</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

Категория: Дипломные работы / Дипломные работы по компьютерам

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

Привет студент

Наверх