Сайт "Комфортная городская среда"

МИНИСТЕРСТВО ОБРАЗОВАНИЯ САРАТОВСКОЙ ОБЛАСТИ

ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ПРОФЕССИОНАЛЬНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ САРАТОВСКОЙ ОБЛАСТИ

«МАРКСОВСКИЙ ПОЛИТЕХНИЧЕСКИЙ КОЛЛЕДЖ»

Описание проекта

Сайт «Комфортная городская среда»

Выполнила:

Огневенкова Анастасия Евгеньевна,

студентка группы 41 КС

Специальность: 

09.02.02. «Компьютерные сети»

Руководитель:

Возный Игорь Сергеевич,

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

г. Маркс – 2019

Содержание

Введение

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

18 марта 2018 г. в нашем родном городе Марксе состоялось рейтинговое голосование по выбору объекта для благоустройства. Это мероприятие осуществлялось в рамках Приоритетного проекта «Формирование комфортной городской среды».

Молодёжь нашего города не могла остаться в стороне от такого события. Не стали исключением и студенты нашего колледжа.

Среди членов счётной комиссии были студенты ГАПОУ СО «Марксовский политехнический колледж» из групп специальности 09.02.02 Компьютерные сети.

В то же время на занятиях спецдисциплин мы изучаем основы web-дизайна. Поэтому своё участие в проекте «Комфортная городская среда» решили оформить в виде HTML-документа.

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

Объём контента рос. Необходимо было его систематизировать, красиво оформить, представить.

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

В итоге удалось самостоятельно создать сайт.

Этапы разработки сайта

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

Главный залог успеха решения любой задачи с помощью ИКТ-технологий – это грамотное планирование деятельности.

Мы разбили работу на несколько этапов и распределили обязанности.

1. Исследование аудитории
2. Разработка концепции;
3. Сбор и написание контента;
4. Разработка дизайна;
5. Выбор варианта расположения элементов;
6. Подготовка графических элементов;
7. Разработка веб-страниц, сценариев, скриптов;
8. Тестирование альфа-версии;
9. Тестирование бета-версии;
10. Устранение ошибок и замечаний.

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

Исследование аудитории. Разработка концепции

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

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

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

Сбор и написание контента

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

Разработка дизайна. Выбор варианта расположения элементов

Подготовка графических элементов

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

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

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

Фотографии и рисунки были подготовлены и отформатированы в программе Adobe Photoshop CS.

Разработка веб-страниц, сценариев, скриптов

Отладка страниц, скриптов, таблиц стилей осуществлялась в текстовом редакторе NotePad++, браузерах. Макет сайта мы разработали в программе Macromedia Dreamweaver MX.

Возможность  сворачивать/разворачивать информацию об объектах на странице 2 реализована с помощью Javascript.

Вертикальные фотослайдеры – на страницах «Городской парк» и «Площадь перед ЦДК» реализованы с помощью сервисов JuxtaposeJS и Dropbox.

На странице «Голосование» имеется возможность проголосовать в режиме онлайн.

Из нескольких возможных вариантов создания формы для голосования, мы выбрали – аккаунт Гугл, и разместили её HTML-код на нашем сайте.

Тестирование Устранение ошибок и замечаний

Бета-версию нашего сайта тестировали преподаватели спецдисциплин, студенты старших курсов специальности Компьютерные сети и др.

К этому процессу мы привлекли также родителей и знакомых.

Все замечания были учтены.

Описание сайта

Сайт состоит из 13 страниц.

3 основных:

1. О городе и районе – index.htm.

2. Об объектах благоустройства – 2.htm

3. О проектах благоустройства – 3.htm

и 10 связанных с ними:

1. История – 1_2.htm

2. Достопримечательности – 1_3.htm

3. Городской парк – 2_2.htm

4. Площадь перед ЦДК –  2_3.htm

5. Сквер по пр. Ленина – 2_4. htm

6. от ул. Энгельса – до ул. Бебеля –  2_4_1. htm

7. от ул. Бебеля – до ул. Куйбышева 2_4_2. htm

8. от ул. Куйбышева – до ул. Рабочая –  2_4_3. htm

9. Проекты – 3_2. htm

10. Голосование – 3_3. htm

Первая страница

Первая страница содержит постоянную информацию о погоде, интерактивную карту города. Эти две функции оформлены с помощью сервисов Яндекса.

В нижней части страницы есть ссылки на ресурсы о нашем городе и районе:

Cайт администрации Марксовского муниципального района;

Cайт муниципального образования «город Маркс»;

Википедия;

Маркс - немецкий город в приволжской степи;

Маркс - провинциальный город под Саратовом;

Страница «История» содержит краткий очерк об истории города, исторические фото. А также ссылки «Ещё об истории города Маркса» (Марксовский краеведческий музей, История герба города Маркса, История Маркса).

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

Вторая страница

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

На страницах «Городской парк» и «Площадь перед ЦДК» имеется вертикальный слайдер «До/После», чтобы можно было узнать, как изменится вид после реконструкции. Сквер по пр. Ленина представлен на трёх дополнительных страницах, разбитых пересекающими его улицами.

Третья страница

Третья страница содержит краткую информацию о проекте «Комфортная городская среда».

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

Форма акаунта Google для голосования расположена на отдельной странице.

Использование проекта

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

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

Заключение

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

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

Информация по теме «Благоустройство города» постоянно меняется, поэтому мы надеемся, что HTML-документ в дальнейшем будет обновляться и совершенствоваться.