Разработка сайта колледжа

Разработка сайта ГОУ СПО Краснодарского торгово-экономического колледжа. Назначение и цели создания сайта. Оценка бумажного или машинного прототипа при участии пользователя с целью обнаружить проблемы с юзабилити. Case-средства управления сайтом CMS.

Рубрика Программирование, компьютеры и кибернетика
Вид дипломная работа
Язык русский
Дата добавления 27.10.2012
Размер файла 2,6 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Рисунок 7

Рисунок 8

Далее приводится частичный листинг формы регистрации:

<? xml version= «1.0» encoding= «utf-8»?>

<install type= «module» version= «1.5.0»>

<name>Login</name>

<author>Joomla! Project</author>

<creationDate>July 2006</creationDate>

<copyright>Copyright (C) 2005-2008 Open Source Matters. All rights reserved.</copyright>

<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>

<authorEmail>admin@joomla.org</authorEmail>

<authorUrl>www.joomla.org</authorUrl>

<version>1.5.0</version>

<description>DESCLOGINFORM</description>

<files>

<filename module= «mod_login»>mod_login.php</filename>

</files>

<params>

<param name= «cache» type= «list» default= «1» label= «Caching» description= «Select whether to cache the content of this module»>

<option value= «0»>Never</option>

</param>

<param name= "@spacer» type= «spacer» default=»» label=»» description=»» />

<param name= «moduleclass_sfx» type= «text» default=»» label= «Module Class Suffix» description= «PARAMMODULECLASSSUFFIX» />

<param name= «pretext» type= «textarea» cols= «30» rows= «5» default=»» label= «Pre-text» description= «PARAMPRETEXT» />

<param name= «posttext» type= «textarea» cols= «30» rows= «5» label= «Post-text» description= «PARAMPOSTTEXT» />

<param name= «login» type= «menuitem» default=»» disable= «separator» label= «Login Redirection URL» description= «PARAMLOGINREDIRECTURL» />

<param name= «logout» type= «menuitem» default=»» disable= «separator» label= «Logout Redirection URL» description= «PARAMLOGOUTREDIRECTURL» />

<param name= «greeting» type= «radio» default= «1» label= «Greeting» description= «Show/Hide the simple greeting text»>

<option value= «0»>No</option>

<option value= «1»>Yes</option>

</param>

<param name= «name» type= «list» default= «0» label= «Name/Username»>

<option value= «0»>Username</option>

<option value= «1»>Name</option>

</param>

<param name= «usesecure» type= «radio» default= «0» label= «Encrypt Login Form» description= «Submit encrypted login data (requires SSL)»>

<option value= «0»>No</option>

<option value= «1»>Yes</option>

</param>

</params>

</install>

Для общения на сайте существует форум скриншот которого представлен на рисунке 9.

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

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

Рисунок 9

Рисунок 10

Рисунок 11

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

Рисунок 12

6. Тестирование и выпуск сайта

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

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

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

Администрации и преподавателям было предложено оценить по пятибалльной шкале различные аспекты сайта:

- функциональность;

- дизайн;

- информационное содержание;

- юзабилити.

В опросе принимали участие пятнадцать человек. По результатам за функциональность сайт набрал:

- функциональность 70 баллов;

- дизайн 73 балла;

- информационное содержание 74 балла;

- юзабилити 72 балла.

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

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

На этапе выпуска используется метод опроса пользователей [1].

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

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

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

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

Утвержденная заказчиком версия сайта располагается в сети интернет.

Была произведена регистрация сайта в основных поисковых системах интернет (Yandex, Rambler, Google, Yahoo). Производится подбор ключевых слов и легкая оптимизация страниц сайта для повышения дружелюбности роботов поисковых систем.

7. Администрирование сайта

7.1 Административная панель

Административная панель Joomla предлагает такой же высокий уровень комфорта управления сайтом, как и любая программа с графическим интерфейсом пользователя (например, Word, Excel, Photoshop и другие). Далее будет рассмотрена русифицированная административная панель Joomla [2].

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

Справа в этой строке размещены четыре элемента:

- ссылка для перехода на Ваш вебсайт (Front End);

- информация о количестве сообщений, присланных Вам;

- информация о количестве пользователей он-лайн на сайте;

- кнопка выхода из панели администрирования.

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

Рассмотрим по порядку данные пункты слева на право:

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

2) Вкладка «Все меню» - менеджер, с помощью которого осуществляется управление всеми видами меню на сайте.

3) Вкладка «Материалы» - меню управления информационным наполнением сайта. Здесь мы можем создавать разделы, категории, статьи, а также управлять ними.

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

5) Вкладка «Раcширения» - данное меню управляет дополнительными функциями CSM, а именно здесь есть возможность перейти в менеджер модулей, шаблонов, плагинов, языков. Здесь также есть возможность перейти в менеджер установки / удаления всех этих компонентов.

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

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

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

7.2 Контрольный пример

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

В окне «Заголовок» заносим название материала. Во вкладках «Раздел» и «Категория» выбираем - не указано.

Затем спускаемся ниже, и в редакторе заносим (или вставляем) текст, который будет на странице. Если в редакторе нажать кнопку «html», то откроется окно, в котором можно вставить код текста страницы в html. Редактор текста изображенный на рисунке 23 позволяет произвести необходимые операции форматирования.

Для вставки изображения надо предварительно скопировать все изображения в папку / stories, которая расположена по адресу: newsportal/ images/stories. В папке /stories можно создавать другие папки для удобства нахождения нужного файла с изображением.

После копирования в папку /stories изображения для статьи, в редакторе статьи установили курсор в то место, где будет находиться изображение, и нажали на пиктограммку «Изображение» в самом низу страницы.

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

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

Зайдя во вкладку «Параметры - Расширенные», можно установить параметры непосредственно для данной статьи (отличные от глобальных настроек по умолчанию).

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

Для перехода в администрирование по строке меню: Все меню -> Меню. Откроется менеджер меню.

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

Отобразиться страница «Выбор типа меню». Надо выбрать Материалы -> Стандартный шаблон материала.

Отобразится страница создания пункта меню. Надо заполнить заголовок пункта меню о колледже. Заголовок будет отображать текст пункта навигации.

Справа во вкладке «Параметры-основные», следует выбрать кнопку «Выбрать», и откроется окно выбора материала показанное на рисунке 30, для привязки к пункту меню.

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

Заключение

сайт колледж юзабилити управление

В дипломной работе стояла задача разработать сайт ГОУ СПО Краснодарского торгово-экономического колледжа.

В ходе разработки дипломной работы были изучены этапы разработки сайта, которые впоследствии были применены для создания сайта Краснодарского торгово-экономического колледжа. Так на этапе планирования и оценки заказчиком были поставлены задачи по разработке сайта. Во время этапа составления требований к проекту был составлен план изучения объекта и были выдвинуты требования к сайту. Благодаря этапу дизайна и проектирования вовремя обнаружены проблемы с юзабилити, до того как был написан программный код. Также на этом этапе проанализированы несколько CMS и для реализации сайта Краснодарского торгово-экономического колледжа была выбрана CMS Joomla. На этапе программной реализации проекта применен метод стилевых правил благодаря, которому удалось добиться единообразия между различными экранными страницами сайта. Было проведено тестирование и анализ сайта методом эвристической оценки, на этом этапе удалось выявить мелкие недочеты в работе сайта и устранить их. Заключительным этапом в разработке стал этап выпуска сайта. На этом этапе был проведен опрос пользователей, который показал, что сайт полностью соответствует требованиям, выдвинутым в начале проектирования.

Разработанный и внедренный сайт Краснодарского торгово-экономического колледжа позволяет:

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

- осуществлять обмен педагогическим опытом;

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

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

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

- своевременно освещать все аспекты жизни колледжа.

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Домненко В.М., Бурсов М.В. Создание образовательных интернет-ресурсов. Учебное пособие. - СПбГИТМО(ТУ), 2002. - 104 с.

2. Норт Б. Joomla! Практическое руководство. - Пер. с англ. - СПб: Символ-Плюс, 2008. - 448 с.

3. Колисниченко Д.Н. Joomla 1.5. Руководство пользователя. - М.: Изд-во Диалектика, 2009. - 216 с.

4. Рамел д. Самоучитель Joomla!: Пер. с анг. - СПб.: БХВ-Петербург. 2008. - 448 с.

5. Рева О.Н. Создание Web-страниц. Просто как дважды два.

- М.: Изд-во Эксмо, 2005. - 208 с.

6. Рева О.Н. Создание Web-страниц. Просто как дважды два.

- М.: Изд-во Эксмо, 2005. - 208 с.

Размещено на Allbest.ru


Подобные документы

  • Создание образовательного сайта в рамках проектной деятельности учащихся ОП ОО Чапаевского губернского колледжа на уроках истории. Технология создания Web-сайта средствами HTML-кода и JavaScript. Разработка проекта АРМ сотрудников библиотеки колледжа.

    дипломная работа [955,4 K], добавлен 31.01.2013

  • Анализ функционирования интернет-сайтов по предоставлению услуг. Обзор методологий проектирования интернет-представительства. Инструментальные средства разработки и реализации системы управления сайтом. Разработка интерфейса пользователя и web-сайта.

    дипломная работа [1,2 M], добавлен 03.08.2014

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

    курсовая работа [346,7 K], добавлен 18.09.2016

  • Понятие web-сайта и его типы. Обзор программ для создание web-сайта. Описание конструктора Jimdo. Алгоритм создания сайта для ОАО "Каменск-Уральский литейный завод" с целью уведомления посетителей о выпускаемой продукции. Руководство пользователя.

    курсовая работа [3,8 M], добавлен 05.06.2015

  • Понятие web-сайта и их типы. Программы для создания web-сайта. Описание структуры проекта. Алгоритм создания сайта. Описание конструктора Jimdo. Языки программирования серверного выполнения. Создание полнофункционального веб-сайта для ОАО "КУЛЗ".

    курсовая работа [3,5 M], добавлен 05.06.2015

  • Разработка сайта в приложении FrontPage. Программные средства и технологии, используемые при разработке сайта. Основная структура сайта и размещение исходных файлов. Создание графических страниц, элементов и рисунков. Размещение сайта в сети Internet.

    курсовая работа [1,6 M], добавлен 13.06.2013

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

    дипломная работа [9,5 M], добавлен 02.08.2015

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

    курсовая работа [2,5 M], добавлен 22.03.2017

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

    дипломная работа [6,1 M], добавлен 10.06.2014

  • Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.

    курсовая работа [1,0 M], добавлен 09.01.2014

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.