====== Веб-дизайн и интернет-программирование (ПИБ21), 2014-2015 уч.гг. ======
На данной странице представлены задания лабораторных работ для студентов 2 курса направления «Прикладная информатика» (бакалавриат).
**Рейтинговая схема по дисциплине**
^ Вид деятельности ^ Максимальное количество баллов ^
| Выполнение заданий СРС | 20 баллов (2 задания для СРС к рубежным срезам)|
| Посещение лекций | 4,5 балла|
| Ответы на вопросы к лекционному курсу | 22,5 балла |
| Посещение лабораторных работ| 9 баллов|
| Выполнение заданий лабораторных работ | 44 балла|
| Всего за курс | 100 баллов|
**РЕЙТИНГ СМОТРЕТЬ [[https://docs.google.com/spreadsheets/d/1d029Ro1uiibZiammHiQNXneS8ennAeYGvFGbGEORixM/edit?usp=sharing|ЗДЕСЬ]].**
===== Материалы лекций =====
* [[http://edu.vspu.ru/mabi/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-1/|Лекция № 1]]
* [[http://edu.vspu.ru/mabi/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-2/|Лекция № 2]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-3/|Лекция № 3]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-5/|Лекция № 4]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-5-2|Лекция № 5]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-6|Лекции № 6-7]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-8|Лекция № 8]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-9|Лекция № 9]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-10|Лекции № 10-11]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-12|Лекция № 12]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-13|Лекция № 13]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-14|Лекция № 14]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-15|Лекция № 15]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-16|Лекция № 16]]
* [[http://mabi.vspu.ru/portfolio/veb-dizayn-i-internet-programmirovanie-lektsiya-17|Лекция № 17]]
===== Здания для СРС =====
**СРС к первому рубежному срезу будет проходить 16.03 (пн, 4 пара) очно в форме "Биржа задач".**
====Задание для СРС ко второму рубежному срезу ====
**Задание:** необходимо разработать веб-ресурс в соответствие с указанными требованиями и тематикой.
**//Общие требования://**
* настройка дизайна страниц с использованием внешних таблиц стиля;
* использование не более трех цветов в оформлении страниц(ы);
* наличие внешнего колонтитула с темой и нижнего - с указанием фамилии студента;
* наличие списка используемых источников;
* настройка разного оформления для разного состояния гиперссылок.
^ Список студентов ^ Тема ^ Требования ^
|Бекешев Дмитрий |Открытые библиотеки для HTML5|
- Одноколоночный центрированный макет страницы.
- Моноширинный шрифт для отображения примеров кода.
- Горизонтальное динамическое выпадающее меню.
|
|Данилко Александр |Открытые библиотеки для JavaScript |- Двухколоночный макет страницы.
- Моноширинный шрифт для отображения примеров кода.
- Вертикальное динамическое меню.
|
|Кононов Леонид |Добавление мультимедийных элементов на веб-страницы|- Одноколоночный макет страницы.
- Моноширинный шрифт для отображения примеров кода.
- Окна проигрывателей.
|
|Крапивина Ирина |Современные браузеры Интернета|- Пролистывание логотипов браузеров.
- Моноширинный шрифт для отображения примеров кода.
- Эффекты анимации в оформлении страницы.
|
|Кузнецов Андрей |Эволюция браузеров|- Пролистывание логотипов браузеров.
- Моноширинный шрифт для отображения примеров кода.
- Эффекты анимации в оформлении страницы.
|
|Минаев Алексей |Развитие языков веб-программирования|- Двухколоночный макет.
- Использование закругленных рамок для оформления блоков страницы.
- Бегущая строка в нижнем колонтитуле.
|
|Петров Валерий |Способы продвижения сайтов|- Использование эффектов анимации и трансформации при оформлении страницы.
- Одноколоночный макет.
- Использование эффекта тени для заголовков.
|
|Семичкин Максим |Популярные СУБД, используемые для создания сайтов|- Горизонтальное динамическое меню.
- Использование эффектов тени для заголовков.
- Бегущая строка в нижнем колонтитуле.
|
|Хибатуллоев Турсунбой |Популярные системы управления содержимым сайтов|- Вертикальное динамическое меню.
- Двухколоночный макет страницы.
- Эффекты границы для блоков.
|
|Шатохина Екатерина |Интерактивные элементы веб-страниц|- Эффекты трансформации текста для заголовков.
- Границы для блоков текста.
- Моноширинный шрифт для примеров кода.
|
Все исходники необходимо поместить в архив и загрузить в соответствующий раздел данной страницы.
Задние необходимо отчитать **//до 27 мая.//**
**//Максимальная оценка для заданий, отчитанных позже, - 7 баллов.//**
=== Отчеты ===
* [[https://www.dropbox.com/s/07q2k8mzs10f571/%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%20%D0%92.rar?dl=0|Петров В.]]
* [[http://www.fayloobmennik.net/4925699|Крапивина И.]]
* [[https://www.dropbox.com/s/sbg66zgmiwclq22/kononov.7z?dl=0|Кононов Л.]]
* {{:workroom:web_dising_i_programming_2014_2015:шатохина_сайт.7z|Шатохина Е. ОБНОВЛЕННЫЙ!}}
===== Лабораторные работы =====
==== Лабораторная работа №1: Анализ веб-дизайнов современных сайтов ====
**Цель лабораторной работы**: познакомится с перспективными направлениями веб-дизайна и подобрать примеры актуального и хорошего дизайна сайтов.
{{:workroom:web_dising_i_programming_2013_2014:лр1_анализ_веб-дизайнов_2013-2014.doc|}}
**Отчеты студентов**:
__ПИБ21__
* [[https://www.dropbox.com/s/k68s5n3uhe92mf2/%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7%20%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%20%282%29.odt?dl=0|Петров В.]]
* [[https://www.dropbox.com/s/j3khk29imcf43m3/%D0%9A%D0%BE%D0%BD%D0%BE%D0%BD%D0%BE%D0%B2.odt?dl=0|Кононов Л.]]
* [[http://www.fayloobmennik.net/4669703|Шатохина Е.В.]]
* [[http://www.fayloobmennik.net/4689882|Крапивина И.Г.]]
* [[https://www.dropbox.com/s/o59517gow0mivwf/%D0%91%D0%B5%D0%BA%D0%B5%D1%88%D0%B5%D0%B2%20%D0%94.%D0%93.%20%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7%20%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2.odt?dl=0|Бекешев Д.Г.]]
* {{:workroom:web_dising_i_programming_2014_2015:лаба1_кузнецов_2.docx| Кузнецов АА}}
* [[https://www.dropbox.com/s/m71ijgnluvt25h7/%D0%9C%D0%B8%D0%BD%D0%B0%D0%B5%D0%B2.odt?dl=0|Минаев А.]]
* ...
* ...
* ...
==== Лабораторная работа №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 страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).
----
**Для выполнения лабораторной работы используем сайт: **
* {{:workroom:web_dising_i_programming:лабораторная_работа_01.pdf|Форматирование текста в HTML-документе}}
* {{:workroom:web_dising_i_programming:лабораторная_работа_02.pdf|Гиперссылки}}
* {{:workroom:web_dising_i_programming:лабораторная_работа_03.pdf|Макетирование Web-страниц}}
* {{:workroom:web_dising_i_programming:лабораторная_работа_3_1.pdf|Макетирование Web-страниц. Фреймы}}
* [[http://html.manual.ru/]]
===== Лабораторная работа №3: Каскадные таблицы стилей =====
**//CSS//** (Cascading Style Sheets, Каскадные таблицы стилей) — технология, позволяющая описывать внешний вид элементов, создаваемых языком разметки.
**//Выполнить следующие задания://**
К индивидуально разработанному сайту применить таблицу стилей, используя основные возможности каскадных таблиц стиля (CSS) задать следующие элементы для HTML-документов:
* отступы слева и справа в документе, общий фон документа //(стилевую информацию описать во внешней таблице стилей)//,
* шрифт для заголовков и абзацев //(стилевую информацию описать во внешней таблице стилей)//,
* цвет для заголовков и абзацев //(стилевую информацию описать во внешней таблице стилей)//,
* выравнивание абзацев по ширине //(любой способ подключения стилевой информации)//,
* особое оформление для введения статьи и выделений в тексте //(внедренный стиль)//,
* особое оформление ссылок, их “живое” поведение //(стилевую информацию описать во внешней таблице стилей)//,
* отступы слева и цвет для полезных советов //(внедренный стиль или inline-стиль)//.
**//Полезные ресурсы для выполнения задания://**
- {{:workroom:ossit:math-inf:свойства_элементов_в_css.pdf|Свойства элементов в CSS}}.
- [[http://www-old.fizmat.vspu.ru/doku.php?id=books:css:index|Справочник CSS на mif.vspu.ru]].
- [[http://css.manual.ru/|Cправочник по CSS на manual.ru]].
- {{:workroom:ossit:math-inf:добавление_стилевой_информации.pdf|Добавление стилевой информации в HTML-документ}}
===== Лабораторная работа №4-5: Основы JavaScript =====
**Задания:**
- изучить базовые конструкции языка JavaScript, последовательно выполнив [[http://mif.vspu.ru/books/js/|следующие уроки]];
- выполнить [[http://mif.vspu.ru/books/dhtml-task/|задания]] по работе с объектами браузера.
Материал в помощь:
* [[http://learn.javascript.ru/|Онлайн учебник по JavaScript]]
* [[http://habrahabr.ru/post/166435/|Тонкости работы с z-index]]
**При работе с функцией 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).
**ХОД РАБОТЫ:**
- Пройти по указанной [[http://edu.vspu.ru/groups/mif-1-distsiplinyi-informatiki/documents/|ссылке]]
- Скачать архив **Denwer+Wordpress**
- Установить и запустить локальный веб-сервер (см. [[http://edu.vspu.ru/groups/mif-1-distsiplinyi-informatiki/documents/|пошаговое руководство]])
- Выполнить {{:workroom:web_dising_i_programming_2013_2014:лр7_базовые_конструкции_языка_php.pdf|задания}}.
**ПОЛЕЗНЫЕ МАТЕРИАЛЫ И РЕСУРСЫ:**
* [[http://writecodeonline.com/php/|Онлайн редактор PHP]]
* {{:workroom:web_dising_i_programming_2013_2014:изучение_языка_php.pdf|Изучение языка PHP.pdf}}
* [[http://www.php-spravka.ru/|PHP как на ладони. Online справочник-учебник по языку программирования PHP]]
* [[http://myrusakov.ru/php-osnovy.html|PHP основы]]
* [[http://www.php-s.ru/self-teacher/|Самоучитель по PHP]]
* [[http://htmlweb.ru/php/example/|Примеры php-скриптов]]
ОТКРЫТИЕ PHP-СТРАНИЦ ЧЕРЕЗ ЛОКАЛЬНЫЙ ВЕБ-СЕРВЕР:
**1)** Создайте новую папку по адресу: **1337534822-denwer-wordpress-3.3.2\home\localhost\www\**
**2)** Сохраните в созданную папку файл **«index.php»**
**3)** В адресной строке браузера наберите адрес: **http://localhost/имя_вашей_папки/**