Министерство образования и науки Российской Федерации

ФГБОУ ВО «Саратовский государственный технический университет им. Гагарина Ю.А.»

Информационные технологии

Методические указания

к выполнению контрольной работы

по курсу «Информационные технологии»

для студентов направления

«Дизайн»

Саратов 2017

В контрольной работе рассматривается разработка интернет-приложения с использованием технологий HTML, CSS, JavaScript .

Порядок выполнения работы:

1. Ознакомиться с методическими указаниями

2. Разработать интернет-приложение, учитывая требования, приведенные ниже

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

Результат работы:

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

Требования к интернет–приложению:

Базовая часть

1. Тема интернет–приложения выбирается студентом самостоятельно

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

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

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

5. Не допускается использование CMS, конструкторов сайтов.

6. Обязательно использование CSS

7. Не допускается использование тегов HTML, отвечающих за оформление документа(например, тег font)

Расширенная часть

• Демонстрация работы с библиотеками JavaScript(например, подключение галереи на сайте и прочее)

• Работа с нативным JavaScript (например, создание собственной галереи)

Отчет:

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

2. Структура работы:

• Титульный лист

• Введение

• Цель работы

• Описание со скриншотами всех разработанных страниц

• Выводы

• Список использованной литературы

3. Работы представляются в виде электронных документов (в формате *doc, *docx, rtf). Если работа рукописная, она оцифровывается и представляется в виде многостраничного документа в формате *pdf.

4. На первой странице текста (титульном листе) в обязательном порядке должна присутствовать в виде текстовых данных следующая информация:

• Ф.И.О. студента;

• факультет, курс, группа, форма обучения, вид отчетности;

• вид работы, тема работы;

• Ф.И.О руководителя работы.

Представление работ

1. Работы представляются на электронном носителе, в папке с названием

Институт_кафедра_Название группы_Фамилия_ИО:

ПРИМЕР: САДИ_ТСТ_б1-СТЗС_Иванов_ВА

2. На диск в обязательном порядке наклеивается уменьшенный титульный лист

Введение

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

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

Жизненный цикл сайта состоит из следующих основных этапов:

• Проектирование структуры сайта.

• Разработка структуры и содержания страниц.

• Публикация на Web-сервере.

• Сопровождение - обеспечение работоспособности, возможно, дополнения и изменения содержания.

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

• Сайт должен загружаться быстро;

• Сайт должен быть оптимизирован для выполнения основной своей задачи;

• Содержание сайта должно соответствовать его оформлению;

• Информация должна быть легко читаема;

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

• На сайте не должно быть грамматических ошибок.

Кроме того, следует помнить, что:

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

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

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

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

1. Где я нахожусь?

2. Куда я могу пойти?

3. Как я могу добраться туда, куда мне нужно?

А также, желательно, и на дополнительные:

1. Был ли я здесь раньше?

2. Как вернуться обратно?

Не стоит отступать от общих принципов построения интерфейса:

• У страниц должен быть заголовок (где я?);

• Навигационные элементы должны быть понятны, расположены на привычных местах;

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

• Применение на длинных страницах ссылок, возвращающих в верхнюю часть страницы;

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

• То, на чем возможен выбор, синего цвета и подчеркнуто;

• Желательно наличие карты сайта – например, специальной страницы, содержащей в структурированном виде гиперссылки на все страницы;

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

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

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

Говорят, что структурный уровень web-документа образует его разметка с помощью языка HTML.

К этой основе можно добавить уровень представлений – определение внешнего вида документа - представляющий собой правила и инструкции по отображению элементов web-страницы с использованием технологии CSS (каскадных таблиц стилей) и уровень поведения, подразумевающий использование скриптов.

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

Кроме того, рассматриваются синтаксис и основные конструкции языка программирования на стороне браузера JavaScript, объектная модель документа DOM, методы и свойства доступа к объектам HTML через узлы дерева DOM и варианты их использования в сценариях. Излагаются основы работы с технологией AJAX с библиотекой jQuery.

В заключительном разделе учебного пособия приводятся сведения о связке языка PHP с СУБД MySQL с помощью веб-сервера Apache как инструменте разработки динамических веб-сайтов.