Создание официального сайта Стерлитамакского политехнического техникума

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

Содержание

Введение

Глава 1. Теоретические основы разработки web-сайта

1.1 Понятие web-сайта

1.2 Типы web-сайтов

1.3 Общая структура web-сайтов

1.4 Этапы создания web-сайта

1.5 Общая характеристика базы преддипломной практики

1.6 Целевая аудитория web-сайта «СПО Стерлитамакский политехнический техникум»

Глава 2. Архитектура информационной системы web-сайта

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

2.2 Виды и анализ программного обеспечения создания web-сайтов

2.3 Анализ web-cайтов учебных учреждений

Глава 3. Проектирование информационной системы web-сайта

3.1 Этапы создания разделов сайта «СПО Стерлитамакский политехнический техникум»

Глава 4. Экономическая часть

4.1 Оценка себестоимости разработки разделов web-сайта «СПО Стерлитамакский политехнический техникум»

4.2 Оценка экономического эффекта от внедрения спроектированных разделов web-сайта «СПО Стерлитамакский политехнический техникум»

Заключение

Список литературы

Введение

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

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

Целевая аудитория: студенты очных и заочных отделений данного учебного заведения, абитуриенты, преподаватели, предполагаемые работодатели.

Цель работы: создание разделов web-сайта учебного учреждения «СПО Стерлитамакский политехнический техникум»

Объект исследования: создание разделов web-сайта

Предмет исследования: содержание разделов web-сайта учебного заведения

Задачи исследования:

1. Рассмотреть виды и структуру web-сайтов.

2. Провести сравнительный анализ web-сайтов учебных заведений.

3. Разработать дизайн разделов сайта учебного заведения.

4. Рассчитать экономические расходы на создание разделов сайта.

5. Создать разделы web-сайта, с учетом разработанного дизайна.

Глава 1. Теоретические основы разработки web-сайта

1.1 Понятие web-сайта

«Веб-сайт» - калька с английского «web-site». От «web», означающего «сеть», «паутина», и «site», означающего «место». Таким образом, словосочетание «web-site» буквально переводится как «место в сети». Часто вместо «веб-сайт» говорят просто «сайт» для краткости.

В компьютерной терминологии веб-сайтом называется совокупность каких-либо электронных документов, объединённых под одним доменным именем в сети. В качестве имени может использоваться и IP-адрес. Обычно подразумевается, что сайт находится в сети Интернет. Совокупность всех веб-сайтов составляет Всемирную паутину [16].

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

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

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

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

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

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

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

Например, news.google.com, mail.google.com и maps.google.com.

Также нередки случаи выделения особых доменов для отдельных стран и языков, как, например, google.fr и google.ru логически являются региональными версиями сайта Google (Рисунок 1), хотя технически представляют собой разные сайты.

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

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

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

Объединение отдельных сайтов под общим доменом иногда характерно для сервисов бесплатного размещения сайтов в Интернете.

Для идентификации таких сайтов после указания домена в адресе может стоять тильда и собственно имя сайта.

Например: «example.com/~site/». Но чаще для этих целей используются домены третьего уровня: «site.example.com». Услуга хранения и обеспечения доступа к сайту на сервере называется веб-хостингом.

Рисунок 1. Логотип Google

Когда-то каждый сайт располагался на собственном сервере, но в связи с технологическими улучшениями серверов на одном сервере стало возможно размещение большого числа сайтов. Расположение сайта на одном сервере с другими сайтами называется виртуальным хостингом [7].

1.2. Типы web-сайтов

На практике программисты рассматривают следующие типы сайтов [8]:

1. Сайт-визитка - обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн (Рисунок 2); идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; сайт-визитка используется предприятиями, организациями и частными лицами.

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

Рисунок 2. Сайт-визитка

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

Рисунок 3. Корпоративный информационный web-сайт

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

3. Корпоративный имиджевый web-сайт - идеально подходит для обеспечения имиджевого присутствия в Сети (Рисунок 4); сайт служит для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; корпоративный сайт обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения; нередко корпоративные сайты сочетают информацию о компании с каталогом продукции; используется эксклюзивный оригинальный дизайн, выгодно представляющий компанию; использование нестандартных идей и решений в оформлении, процентное соотношение текст/графика = 50/50 [8].

Рисунок 4. Корпоративный имиджевый web-сайт

4. Интернет-магазин (Сетевой магазин, Электронный магазин, Internet shop, E-shop) - интерактивный веб-сайт (Рисунок 5) рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа; при этом администратор магазина обязан:

- организовать доставку товара;

- проконтролировать расчеты с покупателем за поставку.

Рисунок 5. Интернет-магазин

Если учебное заведение предоставляет услуги продажи электронных учебников, рефератов, статей и т.д., то данный вид сайта идеально подходит. Учреждение может не только предлагать уже готовые товары, но и принимать заказы рефератов, статей и т.д [8].

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

Рисунок 6. Информационный сайт

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

6. Игровой портал - сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость (Рисунок 7).

Рисунок 7. Игровой портал

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

7. Персональный проект - личный проект (Рисунок 8), содержит все, что угодно и оформляется в любом стиле, который наиболее полно сможет раскрыть и отобразить тематику сайта.

Рисунок 8. Персональный проект

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

8. Контент-проект - это сайт, как правило, некоммерческой направленности, который представляет собой собрание текстов, статей и прочих материалов, основная задача - привлечение посетителей по определенной тематике. В дальнейшем, этот трафик обычно перенаправляется на коммерческие сайты и, по сути, контент-проект используется, как рекламная площадка [9].

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

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

9. Промо-сайт - это сайт, созданный специально для продвижения какого-либо товара либо услуги или основного сайта компании (Рисунок 9).

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

Рисунок 9. Промо-сайт

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

В экономике есть такое понятие «эластичность цены и спроса».

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

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

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

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

10. Сайт-форум может быть самостоятельным сайтом, а может быть разделом сайта (Рисунок 10). Чаще всего сайт-форум делается на под домене основного сайта и предназначен для организации общения посетителей сайта между собой и с администратором сайта. Сайт-форум может быть удобным способом набора контента для основного сайта. Новые темы, открытые на форуме могут быть использованы в качестве анонса новых статей для ленты новостей основного сайта или анонса статей, выдержки из которых можно использовать для почтовой рассылки. Используя сайт-форум совместно с почтовой рассылкой, можно быстро увеличить посещаемость основного сайта [14].

Рисунок 10. Сайт-форум

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

11. Блог - это сайт, представляющий собой интернет-дневник (Рисунок 11), или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения, доступные с главной страницы соответствующей темы. Блог обычно очень часто обновляется, по этой причине он может намного чаще индексироваться поисковыми машинами, чем обычные сайты [9].

Рисунок 11. Блог

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

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

Блог может вестись группой студентов, учащихся в данном учебном заведении, освещая свою учебную деятельность [9].

1.3. Общая структура web-сайтов

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

Линейная структура - самая простая структура сайта. Веб-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу (Рисунок 12).

Рисунок 12. Линейная структура web-сайта

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

Реализация линейной структуры не представляет собой абсолютно никакой сложности.

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

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

Иначе просмотр проекта превратится для посетителей в путешествие в неизвестность [11].

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

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

Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур - другую. После этого и те, и другие попадают на одну и ту же страницу.

Рисунок 13. Линейная структура с альтернативами и вариантами

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

Линейная структура с ответвлениями - контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками (Рисунок 14).

Рисунок 14. Линейная структура с ответвлениями

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

Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения веб-страниц [18]. Такое часто бывает, когда созданный однажды веб-сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае веб-мастер может быстро и без всяких проблем расширить проект. И при этом сайт не превратится в «лесную чащу», а останется «ухоженным парком», по которому посетителям будет приятно гулять.

Древовидная структура - самый универсальный способ размещения веб-страниц (Рисунок 15). Она подходит для создания практически любых типов сайтов. Ее принцип, наверное, понятен всем. Пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т. п. У древовидной структуры очень много достоинств.

Рисунок 15. Древовидная структура

Но в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц. Естественно, это будет раздражать [11]. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это, естественно, тоже плохо. Таким образом, если использовать древовидную структуру сайта, то нужно постоянно следить за ее разрастанием и придерживаться золотой середины.

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

Рисунок 16. Решетчатая структура

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

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

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

1.4 Этапы создания web-сайта

Специалисты [С. Петровский, 19] выделяют следующие этапы создания web-сайта:

1. Формирование цели разделов сайта - для кого или для чего будут разработаны разделы web-сайта;

2. Разработка дизайна разделов сайта - определение цветовой схемы, шрифтов, верстки сайта;

3. Создание скелета разделов сайта - выбор программного обеспечения и создание скелета разделов сайта;

4. Заполнения сайта - заполнение разделов сайта информацией техникума.

1.5 Общая характеристика базы преддипломной практики

Государственное бюджетное образовательное учреждение среднего профессионального образования «Стерлитамакский политехнический техникум» создан 5 июля 2011 года в результате реорганизации двух образовательных учреждений: Государственного образовательного учреждения среднего профессионального образования «Стерлитамакский станкостроительный техникум» и Государственного образовательного учреждения начального профессионального образования Профессиональный лицей № 15 на основании распоряжения правительства Республики Башкортостан. Высокий профессионализм педагогического коллектива, внедрение современных педагогических технологий в процесс обучения и непрерывно развивающаяся материальная база - первостепенные задачи директора техникума, Почетного работника среднего профессионального и высшего профессионального образований Российской Федерации, Заслуженного работника образования Республики Башкортостан, Резяпова Рашита Шагитовича.

Государственное бюджетное образовательное учреждение среднего профессионального образования «Стерлитамакский политехнический техникум» представляет собой двухуровневую систему образования: начального профессионального и среднего профессионального.

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

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

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

Преимущества получения профессионального образования в Политехническом техникуме:

- практическое обучение студентов организуется в соответствии с действующими учебными планами и программами и проходит на ведущих предприятиях города: ОАО «Стерлитамакский станкостроительный завод», ОАО «Строймаш», ОАО «Красный пролетарий», ЗАО «Вагоноремонтный завод», ОАО «Сода»;

- студентам выплачивается стипендия, обучающиеся НПО обеспечиваются бесплатным питанием;

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

- возможность непрерывного получения образования.

По всем подготавливаемым специальностям и профессиям в техникуме имеются оснащенные оборудованием и приборами учебно-производственные мастерские и лаборатории в соответствии с требованием учебных программ и Федеральных государственных образовательных стандартов, в том числе 3 лаборатории информатики с подключением к Интернету, 10 учебно-производственных мастерских, 1 химическая лаборатория. В токарной и фрезерной мастерских выпускаются слесарно-поворотные тиски Т-140. В сварочной мастерской изготавливаются оконные решетки, металлические двери, ворота и др. В настоящее время техникум располагает необходимым современным оборудованием, в том числе мультимедийными проекторами, интерактивными досками и т.д. В распоряжении обучающихся имеются 2 спортивных зала и 2 актовых зала. Библиотечный фонд техникума насчитывает более 70 тыс. экземпляров учебно-методической литературы.

1.6 Целевая аудитория web-сайта «СПО Стерлитамакский политехнический техникум»

Целевая аудитория разделов web-сайта «Стерлитамакский политехнический техникум» - это в первую очередь студенты и абитуриенты. Для них и будут разработаны разделы. «Новости», «Студентам», «Полезное» - эти разделы будут полезны студенту.

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

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

Глава 2. Архитектура информационной системы web-сайта

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

Общие положения

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

2. Официальным сайтом общеобразовательного учреждения является сайт, разработанный в соответствии с настоящими требованиями, утвержденный, зарегистрированный учредителем и размещенный в сети Интернет.

Порядок разработки сайта

1. Работа по созданию сайта должна быть регламентирована Положением образовательного учреждения. Положением утверждается:

Положение о сайте ОУ; Структура и дизайн сайта; Ответственный администратор сайта; Порядок сопровождения и обновления сайта; Другие вопросы в зависимости от целей и задач сайта.

2. Копия Положения направляется учредителю.

3. Ответственность за содержание и достоверность размещаемой на сайте информации несут руководитель и администратор информационного ресурса.

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

5. Разработанный сайт перед его размещением в сети Интернет подлежит согласованию с учредителем.

Требования и критерии

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

1.1. Критерии технологичности:

- скорость загрузки страниц сайта;

- оптимальный объем информационного ресурса.

1.2. Критерии функциональности:

- Дизайн сайта должен быть удобен для навигации;

- Удобство усвоения информации;

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

- Читаемость шрифтов, т. е. достаточный размер, четкость, на контрастном фоне.

2. На официальном сайте образовательного учреждения в обязательном порядке размещается следующая информация:

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

- Устав;

- Программа долгосрочного развития (более 1 года);

- Содержание образования;

- Опыт инновационной деятельности;

- Ежегодные публичные доклады образовательного учреждения;

- Режим работы;

- Состав обучающихся;

- Классы, работающие в общеобразовательном учреждении;

- Сопровождение образовательного процесса;

- Информация: специализированные кабинеты, музей, спортивные комплексы, медицинский кабинет, столовая и пр.);

- Дополнительное образование;

- Воспитательная работа;

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

- Итоговая аттестация.

3. В качестве рекомендуемой на сайте может быть размещена информация:

- Новости;

- История;

- Педагогический коллектив;

- Международное сотрудничество, сотрудничество с высшими учебными заведениями;

- Фотоальбом;

- Расписание;

- Научное общество (исследовательские работы, рефераты и др.);

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

- Документы

- Проекты

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

- Обучающие программы и другие электронные пособия

- Поступающим

4. На официальном сайте не допускается:

- размещение противоправной информации;

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

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

- размещение информации, не подлежащей свободному распространению в соответствии с Законодательством РФ;

- наличие расхождений между одними и теми же сведениями, размещаемыми в разных разделах Интернет - сайта и элементах его оформления.

2.2 Виды и анализ программного обеспечения создания web-сайтов

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

1. MySQL 5.0.45 - свободная система управления базами данных (СУБД). Другими словами это компактный многопоточный сервер баз данных (Рисунок 17). MySQL характеризуется большой скоростью, устойчивостью и легкостью в использовании. MySQL поддерживает язык запросов SQL в стандарте ANSI 92, и кроме этого имеет множество расширений к этому стандарту, которых нет ни в одной другой СУБД [5].

Рисунок 17. Логотип MySQL

Краткий перечень возможностей MySQL:

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

- количество строк в таблицах может достигать 50 млн.;

- быстрое выполнение команд, возможно MySQL самый быстрый сервер из существующих;

- простая и эффективная система безопасности.

2. PHP 5.2.5 - (англ. PHP: Hypertext Preprocessor - «PHP: препроцессор гипертекста») - скриптовый язык программирования, созданный для генерации HTML-страниц на Web-сервере и работы с базами данных (Рисунок 18). В настоящее время поддерживается подавляющим большинством хостеров.

Рисунок 18. Логотип PHP 5.2.5

3. Web-сервер Apache 2.2.8 (альтернатива Internet Information Services, или скороченно IIS, который интегрирован в операционную систему Windows) - это сервер, принимающий HTTP-запросы от клиентов (Рисунок 19), обычно Web-браузеров, и выдающий им HTTP-ответы, обычно вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными. По сути Web-сервер это программное обеспечение, выполняющее функции Web-сервера, как и компьютер, на котором это программное обеспечение работает [5].

Рисунок 19. Логотип Web-сервер Apache 2.2.8.

4. phpMyAdmin 2.11.2.16 - совокупность скриптов написанных на PHP, и обеспечивающих полноценную, в том числе удаленную работу с базами данных MySQL, через веб-интерфейс (Рисунок 20). Так как phpMyAdmin позволяет во многих случаях обойтись без непосредственного ввода команд SQL, то работа с базами данных становится вполне посильной задачей даже для человека весьма поверхностно знакомого с MySQL [6].

Рисунок 20. Логотип phpMyAdmin

5. Macromedia Dreamweaver 9.0 СS3 - програмное средство для визуального создания Web-сайтов (Рисунок 21).

Другими словами профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети [13].

Рисунок 21. Логотип Macromedia Dreamweaver.

Визуальные возможности редактирования в Dreamweaver позволяют быстро создавать страницы без того, чтобы писать код вручную. Вы можете просматривать все ваши элементы сайта или активы и быстро вставлять их из панели непосредственно в документ. Dreamweaver обеспечивает полно-функциональную среду написания кода, которая включает инструментальные средства редактирования кода (например, раскраска кода или проверка закрытия тегов). Dreamweaver также дает возможность вам строить динамические станицы использующие сервер-технологии CFML, ASP.NET, ASP, JSP и PHP [6].

6. Smarty Template Engine - это компилирующий обработчик шаблонов для PHP (Рисунок 22). Это означает, что Smarty читает файлы шаблонов и создает PHP-код на их основе. Код создаётся один раз и потом только выполняется. Поэтому нет необходимости обрабатывать файл шаблона для каждого запроса.

Рисунок 22. Логотип Smarty Template Engine.

7. Abode Photoshop CS2 - профессиональный графический пакет для работы с растровой графикой (Рисунок 23).

Его возможности понадобятся при графическом оформлении Web-проектов и создание привлекательного дизайна.

Рисунок 23. Логотип Abode Photoshop CS2

8. Denwer (Денвер) - набор дистрибутивов (Apache, PHP, MySQL, Perl и т.д.) + программная оболочка [13], которая использует этот набор для отладки сайтов на «домашней» (локальной) Windows-машине без необходимости выхода в Интернет (Рисунок 24).

Рисунок 24. Логотип Denwer

Базовый пакет Денвер в себя включает:

- система может запускаться с flash-накопителя без каких-либо проблем.

- Apache, SSI, mod_rewrite, mod_php.

- PHP4 с поддержкой GD и MySQL.

- MySQL4 с поддержкой транзакций (mysqld-max).

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

- система управления запуском и завершением.

- phpMyAdmin - система управления MySQL через Web-интерфейс.

- ядро Perl без стандартных библиотек (они поставляются отдельно).

- эмулятор sendmail (отладочная «заглушка», складывающая приходящие письма в /tmp); поддерживается работа совместно с PHP и Perl.

- инсталлятор (нечто вроде InstallShield) [8].

Dreamweaver - WYSIWYG HTML-редактор компании Adobe. Изначально разработан и поддерживался компанией Macromedia вплоть до 8-й версии (2005 год). Следующие версии, начиная с Dreamweaver CS3 (2007), выпускает Adobe. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире.

Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, отладчик JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать JavaScript, XML и другие текстовые документы, которые поддерживаются в Dreamweaver. Технология Roundtrip HTML импортирует документы HTML без переформатирования кода и можно настроить Dreamweaver, чтобы он наводил порядок и переформатировал HTML [7].

2.3 Анализ web-cайтов учебных учреждений

Были проанализированы web-сайты учебных учреждений города Стерлитамака. Для анализа использовалась пятибалльная система оценки элементов (Табл. 1):

Таблица 1. Критерии анализа web-сайтов

Элементы web-сайта	Баллы
Дизайн	1..5
Цветовая схема	1..5
Читабельность	1..5
Наполненность	1..5

Рисунок 25. Стерлитамакский медицинский колледж

Web-caйт ГАОУ СПО РБ Стерлитамакского медицинского колледжа имеет линейчатую структуру с альтернативами, удобен и прост в использовании (Рисунок 25). Содержит достаточно информации, как для студентов, так и для абитуриентов.

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

Таким образом, оценка web-сайта следующая:

Дизайн - 5 баллов

Цветовая схема - 5 баллов

Читабельность - 5 баллов

Наполненность - 5 баллов

Рисунок 26. Стерлитамакский колледж строительства, экономики и права

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

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

Таким образом, оценка web-сайта следующая:

Дизайн - 4 баллов

Цветовая схема - 4 баллов

Читабельность - 5 баллов

Наполненность - 5 баллов

Рисунок 27. Башкирский государственный университет

Web-caйт Башкирского государственного университета имеет линейчатую структуру с альтернативами (Рисунок 27), благодаря чему он прост в использовании. Имеет большое количество информации для посетителей, в том числе для студентов, абитуриентов, аспирантов, сотрудников и выпускников. Дизайн интересный, яркий, и в тоже время простой. Цветовая схема выполнена в синих и белых тонах. Текст читабелен.

Таким образом, оценка web-сайта следующая:

Дизайн - 5 баллов

Цветовая схема - 5 баллов

Читабельность - 5 баллов

Наполненность - 5 баллов

Рисунок 28. Профессиональное училище № 18

Web-caйт Профессионального училища № 18 имеет линейчатую структуру с альтернативами (Рисунок 28). Сайт содержит нужную информацию об данном учебном заведении, но так же и лишнюю, а именно вирусную рекламу. Дизайн выполнен некачественно, не вызывает интерес. А из-за цветовой схемы, которая выполнена в оранжевых тонах, текст местами не читабелен.

Таким образом, оценка web-сайта следующая:

Дизайн - 3 баллов

Цветовая схема - 3 баллов

Читабельность - 4 баллов

Наполненность - 4 баллов

Рисунок 29. Башкирский республиканский колледж культуры и искусства

Web-caйт Башкирский республиканский колледж культуры и искусства имеет линейчатую структуру с альтернативами (Рисунок 29). В использовании очень прост, можно с легкостью найти нужную информацию о данном заведении. Так же есть ссылки на внешние источники. Но дизайн не вызывает интерес. Разноцветная надпись на шапке сайта раздражает глаза, а серо-фиолетовая цветовая схема навевает тоску.

Таким образом, оценка web-сайта следующая:

Дизайн - 4 баллов

Цветовая схема - 3 баллов

Читабельность - 5 баллов

Наполненность - 5 баллов

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

Таблица 2. Сводный анализ web-сайтов

Наименование организации	Дизайн	Цветовая схема	Читабельность	Наполненность	Средний балл
Стерлитамакский медицинский колледж	5	5	5	5	5
Стерлитамакский колледж строительства, экономики и права	4	4	5	5	4
Башкирский государственный университет	5	5	5	5	5
Профессиональное училище № 18	3	3	4	4	3,5
Башкирский республиканский колледж культуры и искусства	4	3	5	5	4,25

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

Проанализировав web-сайты учебных заведений и рассмотрев программные средства для создания сайта, можно приступать к реализации практического задания, а именно создание разделов web-сайта для «СПО Стерлитамакский политехнический техникум». Программным средством было выбрано Adobe Dreamweaver CS6.

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

сайт образовательный целевой аудитория

Глава 3. Проектирование информационной системы web-сайта

3.1. Этапы создания разделов сайта «СПО Стерлитамакский политехнический техникум»

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

1 этап «Формирование цели разделов сайта» выполнен в параграфе 1.5.

2 этап: «Разработка дизайна разделов сайта»

Был разработан дизайн дизайн web-сайта для учебного заведения «СПО Стерлитамакский политехнический техникум» (Рисунок 30). Цветовая схема выполнена в зеленых тонах, так как зеленый цвет - спокойный и приятный. Этот цвет так же считают [15] цветом мудрости.

Шапка сайта выполнена в цвете #89BE3A, фон сайта - #85F53F, фон графы с текстом - #91C35C, меню - #87BD3B.

Использовался шрифт Times New Roman черного цвета

Рисунок 30. Макет оформления web-cайта

3 этап: Создание скелета разделов сайта.

Создание web-сайта:

На первом этапе был создан скелет сайта - таблица (Рисунок 31). Прописывается html-код:

<table width="1228" border="0" align="center" cellpadding="0" cellspacing="0">

<tr> <td height="83" colspan="2" >&nbsp;</td> </tr>

<tr> <td height="195" colspan="2">&nbsp;</td> </tr>

<tr> <td width="272" height="135">&nbsp;</td>

<td width="998" rowspan="8" ><table width="929" height="564" border="0" align="center" cellpadding="2" cellspacing="15">

<tr> <td width="660" height="171" align="center"><p>&nbsp;</p>

<h5 align="right">&nbsp;</h5></td> </tr>

<tr> <td height="161"><r></r>

<h5 align="right">&nbsp;</h5></td> </tr>

<tr> <td height="172">&nbsp;</td> </tr> </table> </td> </tr>

<tr> <td height="66">&nbsp;</td> </tr>

<tr> <td height="66">&nbsp;</td> </tr>

<tr> <td height="66">&nbsp;</td> </tr>

<tr> <td height="66">&nbsp;</td> </tr>

<tr> <td height="65">&nbsp;</td> </tr>

<tr> <td height="44">&nbsp;</td> </tr>

<tr> <td height="318">&nbsp;</td> </tr>

</table>



Рисунок 31. Создание таблицы

Затем оформляется шапка сайта (Рисунок 32). В самую первую строку таблицы вставляется изображение, заранее подготовленное - наименование учреждения. Прописывается html-код

<img src="шапка (2).gif" width="1270" height="96" >

Рисунок 32. Шапка сайта

Вставка логотипа во вторую строку таблицы осуществляется с помощью html-кода <img src="шапка.gif" width="1270" height="318" > (Рисунок 33).



Рисунок 33. Вставка логотипа

Левый нижний столбец заливается цветом #81E047. Затем вставляются кнопки меню, которые в дальнейшем будут гиперссылками на другие страницы сайта (Рисунок 34).

Прописывается html-код:

<td width="272" height="88" bgcolor="#81E047"> - цвет ячеек таблицы.

Вставка кнопок:

<td height="66" bgcolor="#81E047"><a href="index.html"><img src="1 кнопка.gif" width="272" height="66" /></a></td> </tr>

<tr> <td height="66" bgcolor="#81E047"><img src="2 кнопка.gif" width="272" height="66" /></td> </tr>

<tr> <td height="66" bgcolor="#81E047"><img src="3 кнопка.gif" width="272" height="66" /></td> </tr>

<tr> <td height="66" bgcolor="#81E047"><img src="4 кнопка.gif" width="272" height="66" /></td> </tr>

<tr> <td height="65" bgcolor="#81E047"><img src="5 кнопка.gif" width="272" height="66" /></td> </tr>

<tr> <td height="44" bgcolor="#81E047"><img src="6 кнопка.gif" width="272" height="66" /></td> </tr>



Рисунок 34. Создание меню.

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

Для этого прописывается html-код:

<td width="998" rowspan="8" background="фоник.gif" >

Рисунок 35. Фоновое изображение

4 этап: Заполнения сайта

Оформляется первая графа новостей (Рисунок 36). А именно: вставляется изображение, текст и кнопка-гиперссылка, созданная заранее. Для текста задается стиль:

body p { font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;

font-weight: bold;}

Затем вставляется в ячейку изображение, текст и кнопка:

<tr> <td width="660" height="358" align="center"><strong><img src="phoca_thumb_l_img_1149.jpg" width="347" height="242" /></strong>

<p><strong>В 2013 году исполнилось 70 лет со дня основания </strong><strong>Профессионального лицея №15</strong></p>

<h5 align="right"><img src="далее.gif" width="187" height="44" /></h5></td> </tr>

Рисунок 36. Оформление первой графы

Аналогичным образом оформляются другие графы новостей (Рисунок 37). Для второй ячейки прописывается html-код:

<tr> <td height="161"><r><strong>Студент группы С-41-2</strong></r>

<r><strong>Васильев Максим</strong></r>

<r><strong>занял II место в городском конкурсе &quot;Студент года 2012&quot;.</strong></r>

<r><strong>Поздравляем Максима и его команду!</strong></r>

<h5 align="right"><img src="далее.gif" width="187" height="44" /></h5></td> </tr>

Для текста во второй ячейке так же задается стиль:

body r { font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;}

Затем оформляется третья графа:

<tr> <td height="484"><div align="center">

<p><img src="mFNyHFdm4ZE.jpg" width="228" height="242" />ДЕНЬ ЗНАНИЙ!</p>

<p class="z"><strong><em>Молодежь и детвора</em></strong></p>

<p class="z"><strong><em>В этот первый день осенний</em></strong></p>

<p class="z"><strong><em>Принимайте поздравленья</em></strong></p>

<p class="z"><strong><em>И учитесь «на ура»</em></strong>!</p>

<p>&nbsp;</p> </div></td> </tr>

Чтобы текст в третьей графе был красного цвета, создается класс:

.z { color: #F00;

text-align: center;}



Рисунок 37. Оформление второй и третьей графы

Главная страница сайта готова (Рисунок 38). Аналогичным образом по этому же «скелету» были разработаны остальные страницы сайта.

Рисунок 38. Первая страница раздела «Новости»

Аналогичным образом были созданы остальные страницы заказанных разделов: Раздел «О техникуме» (Рисунок 39)

Рисунок 39. Страница раздела «О техникуме»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Документ без названия</title>

<style type="text/css">

body p { font-family: "MS Serif", "New York", serif;

font-size: 18px;

text-align: center;

font-weight: bold;}

body r {font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;}

.z { color: #F00;

text-align: center;}</style>

</head>

<body>

<table width="1228" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="83" colspan="2" bgcolor="#99CC99"><img src="шапка (2).gif" width="1270" height="96" ></td> </tr>

<tr> <td height="195" colspan="2"><img src="шапка.gif" width="1270" height="318" /></td> </tr>

<tr> <td width="272" height="101" bgcolor="#81E047">&nbsp;</td>

<td width="998" rowspan="8" background="фоник.gif" ><table width="929" height="1063" border="0" align="center" cellpadding="2" cellspacing="15"> <tr>