МІНІСТЕРСТВО ОСВІТИ, НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

ДОНЕЦЬКИЙ НАЦІОНАЛЬНИЙТЕХНІЧНИЙ УНІВЕРСИТЕТ

МЕТОДИЧНІ ВКАЗІВКИ

ДО ВИКОНАННЯ курсовоГО ПРОЕКТУ з КУРСУ

“Web-програмування та web-дизайн”

(для студентів спеціальності 6.05010101 Інформаційні управляючі системи та технології)

Затверджено

на засіданні кафедри

автоматизованих систем управління

Протокол №___ від 2012 р.

Донецьк ДНТУ 2012

УДК 517.3 (076)

Методичні вказівки до виконання курсового проекту з курсу “Web-програмування та web-дизайн ” 6.05010101) /Укладач: к.т.н. Фонотов А. М., Н.К. Андрієвська: - Донецьк: ДНТУ, 2012.- 21 с.

Методичні вказівки к засвоєнню та надбання практичних навичок з курсу «web-програмування та web-дизайн» призначені для студентів спеціальності “Інформаційні управляючі системи і технології” 6.05010101.

Укладачі: доц. каф. АСУ, к.т.н. А. М. Фонотов

асс. каф. АСУ Н.К. Андриевская

Відповідальний

за випуск доц. каф. АСУ, к.т.н. А. М. Фонотов

1. Цели курсового проекта

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

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

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

При разработке web-сайта студенты должны использовать современные Internet-технологии: html5, css3, javaScript, jQuery.

2. Задание на курсоВой проект

Курсовой проект представляет собой самостоятельную разработку проекта web-сайта и его реализации.

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

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

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

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

3. Основные разделы содержания курсовОго проекта, порядок и последовательность выполнения

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

1. Титульный лист (приложение 3).

2. Лист задания (приложение 2).

3. Содержание.

4. Введение.

5. Основную часть.

6. Заключение.

7. Библиографию и список ссылок на Интернет-ресурсы.

8. Приложения (структура сайта, структура страницы).

3. Рекомендации к содержанию основной части

Основная часть должна состоять из 7 разделов:

1. Проектирование логической структуры сайта

2. Проектирование физической структуры сайта

3. Разработка контента HTML-страниц

4. Проектирование адаптивной структуры сайта

   1. Проектирование дизайна для устройств с высокой разрешающей способностью (ноутбуки, современные персональные компьютеры, планшеты).

   2. Проектирование адаптивного дизайна

5. Разработка стилей для реализации интерфейса web-сайта

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

7. Разработка персонального задания на javaScript, jQuery, HTML5.

Рассмотрим подробнее содержание каждого раздела.

4.1 Проектирование адаптивной структуры сайта

Проектирование логической структуры сайта необходимо для:

• создания четкой и логичной схемы навигации;

• информативного и привлекательного представления web-страниц на разных устройствах и с разным разрешением экрана;

• разработка цветовой концепции сайта;

• организации простой технологии внесения изменений при редактировании сайта.

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

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

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

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

• с любой страницы должен быть предусмотрен возврат на главную страницу сайта;

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

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

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

Пример логической структуры веб-сайта показан на рис. 4.1.

Рисунок 4.1 Структура сайта