Веб-дизайн и интернет-программирование (ПИБ21), 2014-2015 уч.гг.

На данной странице представлены задания лабораторных работ для студентов 2 курса направления «Прикладная информатика» (бакалавриат).

Рейтинговая схема по дисциплине

Вид деятельности Максимальное количество баллов
Выполнение заданий СРС 20 баллов (2 задания для СРС к рубежным срезам)
Посещение лекций 4,5 балла
Ответы на вопросы к лекционному курсу 22,5 балла
Посещение лабораторных работ 9 баллов
Выполнение заданий лабораторных работ 44 балла
Всего за курс 100 баллов

РЕЙТИНГ СМОТРЕТЬ ЗДЕСЬ.

Материалы лекций

Здания для СРС

СРС к первому рубежному срезу будет проходить 16.03 (пн, 4 пара) очно в форме «Биржа задач».

Задание для СРС ко второму рубежному срезу

Задание: необходимо разработать веб-ресурс в соответствие с указанными требованиями и тематикой.

Общие требования:

  • настройка дизайна страниц с использованием внешних таблиц стиля;
  • использование не более трех цветов в оформлении страниц(ы);
  • наличие внешнего колонтитула с темой и нижнего - с указанием фамилии студента;
  • наличие списка используемых источников;
  • настройка разного оформления для разного состояния гиперссылок.
Список студентов Тема Требования
Бекешев Дмитрий Открытые библиотеки для HTML5
  • Одноколоночный центрированный макет страницы.
  • Моноширинный шрифт для отображения примеров кода.
  • Горизонтальное динамическое выпадающее меню.
Данилко Александр Открытые библиотеки для JavaScript
  • Двухколоночный макет страницы.
  • Моноширинный шрифт для отображения примеров кода.
  • Вертикальное динамическое меню.
Кононов Леонид Добавление мультимедийных элементов на веб-страницы
  • Одноколоночный макет страницы.
  • Моноширинный шрифт для отображения примеров кода.
  • Окна проигрывателей.
Крапивина Ирина Современные браузеры Интернета
  • Пролистывание логотипов браузеров.
  • Моноширинный шрифт для отображения примеров кода.
  • Эффекты анимации в оформлении страницы.
Кузнецов Андрей Эволюция браузеров
  • Пролистывание логотипов браузеров.
  • Моноширинный шрифт для отображения примеров кода.
  • Эффекты анимации в оформлении страницы.
Минаев Алексей Развитие языков веб-программирования
  • Двухколоночный макет.
  • Использование закругленных рамок для оформления блоков страницы.
  • Бегущая строка в нижнем колонтитуле.
Петров Валерий Способы продвижения сайтов
  • Использование эффектов анимации и трансформации при оформлении страницы.
  • Одноколоночный макет.
  • Использование эффекта тени для заголовков.
Семичкин Максим Популярные СУБД, используемые для создания сайтов
  • Горизонтальное динамическое меню.
  • Использование эффектов тени для заголовков.
  • Бегущая строка в нижнем колонтитуле.
Хибатуллоев Турсунбой Популярные системы управления содержимым сайтов
  • Вертикальное динамическое меню.
  • Двухколоночный макет страницы.
  • Эффекты границы для блоков.
Шатохина Екатерина Интерактивные элементы веб-страниц
  • Эффекты трансформации текста для заголовков.
  • Границы для блоков текста.
  • Моноширинный шрифт для примеров кода.

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

Задние необходимо отчитать до 27 мая.

Максимальная оценка для заданий, отчитанных позже, - 7 баллов.

Отчеты

Лабораторные работы

Лабораторная работа №1: Анализ веб-дизайнов современных сайтов

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

лр1_анализ_веб-дизайнов_2013-2014.doc

Отчеты студентов:

ПИБ21

Лабораторная работа №2: Язык HTML

Вы сотрудник фирмы по разработке Web-сайтов.

Вам необходимо выполнить один из поступивших заказов:

№ 1.

Задание: разработать сайт фирмы, занимающейся разведением собак.

Профиль заказчика – фирма, занимающаяся разведением собак.

Сфера деятельности – собаководство.

Цель сайта – презентационное воздействие на клиентов и потенциальных клиентов.

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

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео; 3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 2.

Задание: создайте сайт фирмы космического туризма.

Профиль заказчика – фирма, занимающаяся космическим туризмом.

Сфера деятельности – туризм.

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

Обоснование причин создания сайта: фирма космического туризма создана 1 год назад, только начинается ее развитие; принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами.

Требования заказчика: сайт должен

1) привлечь людей к космическому туризму;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 3.

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

Профиль заказчика – строительство жилищных комплексов.

Сфера деятельности – строительство.

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

Обоснование причин создания сайта: фирма «ЖилСтрой» только начинает разворачивать свою компанию на рынках нашего города. Принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами, оказание необходимых консультаций.

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 4.

Задание: создайте сайт банка «Стабильность».

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

Сфера деятельности – банковское дело.

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

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

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности банка и его особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к банку, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 5.

Задание: создайте сайт фирмы, занимающейся аутсорсингом.

Профиль заказчика – оказание различных услуг аутсорсинга.

Сфера деятельности – аутсорсинг.

Цель сайта – презентационное воздействие на фирмы, заинтересованные в передаче своих определённых базнес-процессов или производственных функций на обслуживание (сорсинг) данной компании.

Обоснование причин создания сайта: фирма «Аутсорсинг 34» создана 1 год назад, только начинается ее развитие; принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами.

Требования заказчика: сайт должен

1) привлечь фирмы-клиенты;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).


Для выполнения лабораторной работы используем сайт:

Лабораторная работа №3: Каскадные таблицы стилей

CSS (Cascading Style Sheets, Каскадные таблицы стилей) — технология, позволяющая описывать внешний вид элементов, создаваемых языком разметки.

Выполнить следующие задания:

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

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

Полезные ресурсы для выполнения задания:

Лабораторная работа №4-5: Основы JavaScript

Задания:

  1. изучить базовые конструкции языка JavaScript, последовательно выполнив следующие уроки;
  2. выполнить задания по работе с объектами браузера.

Материал в помощь:

При работе с функцией prompt, следует учитывать, что переменная, в которую сохраняется ее результат, становится строковой!


ФУНКЦИИ ДЛЯ ПЕРЕВОДА СТРОКИ В ЧИСЛО

eval

Функция eval предназначена для преобразования текстовой строки в численное значение. Через единственный параметр она получает текстовую строку и вычисляет ее как выражение языка JavaScript. Функция возвращает результат вычисления:

var nValue = Eval(szStr);

parseInt

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

var nValue = parseInt(szStr);

parseFloat

Функция parseFloat пытается преобразовать текстовую строку в число с плавающей точкой. Текстовая строка передается этой функции через первый параметр, а основание счисления - через второй:

var nFloat = parseFloat(szStr, nRadix);

Лабораторная работа №6: Базовые конструкции языка PHP

PHP (официальное название «PHP: Hypertext Preprocessor») — язык скриптования на стороне сервера, встраиваемый в HTML-документ.

Отличие языка PHP от языков клиентского программирования (таких, как JavaScript), состоит в том, что программный код исполняется на стороне сервера, т.е. еще до того, как страницу получит браузер пользователя.

Все страницы, содержащие программный код, должны иметь расширение .php (или .phtml).

ХОД РАБОТЫ:

  1. Пройти по указанной ссылке
  2. Скачать архив Denwer+Wordpress
  3. Установить и запустить локальный веб-сервер (см. пошаговое руководство)
  4. Выполнить задания.

ПОЛЕЗНЫЕ МАТЕРИАЛЫ И РЕСУРСЫ:

ОТКРЫТИЕ PHP-СТРАНИЦ ЧЕРЕЗ ЛОКАЛЬНЫЙ ВЕБ-СЕРВЕР:

1) Создайте новую папку по адресу: 1337534822-denwer-wordpress-3.3.2\home\localhost\www\

2) Сохраните в созданную папку файл «index.php»

3) В адресной строке браузера наберите адрес: http://localhost/имя_вашей_папки/