====== Веб-дизайн и интернет-программирование (ПИБ21), 2013-2014 уч.гг. ======
На данной странице представлены задания лабораторных работ для студентов 2 курса направления «Прикладная информатика» (бакалавриат).
**Рейтинговая схема по дисциплине**
|Освоение теоретического курса|10 баллов (2 теста к рубежным срезам)|
| Выполнение заданий СРС | 20 баллов (2 задания для СРС к рубежным срезам)|
| Посещение лабораторных работ, выполнение заданий лабораторных| 30 баллов|
===== Материал лекций =====
- [[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]]
- ...
===== Вопросы к зачету =====
{{:workroom:web_dising_i_programming_2013_2014:вопросы_к_зачету.doc|Вопросы к зачету}}
===== Здания для СРС =====
** [[workroom:web_dising_i_programming_2013_2014:srs1:index|Задание для СРС к первому срезу]] **
===== Лабораторная работа №1: Анализ веб-дизайнов современных сайтов =====
{{:workroom:web_dising_i_programming_2013_2014:лр1_анализ_веб-дизайнов_2013-2014.doc|}}
Наши сводные таблицы:
__ПИБ21(1)__
* Деревянко Андрей {{:workroom:web_dising_i_programming_2013_2014:веб-дизайн.xls|}}
* Вилков Александр [[http://rghost.ru/download/52518236/fa20a25c7590dfda4c538522022d1f99083bc50e/AIS_BD.rar|Скачать]]
* .... //Автор: ....//
__ПИБ21(2)__
* Фурин Глеб {{:workroom:web_dising_i_programming_2013_2014:текстовый_документ_opendocument.odt|}}
* Алиев Станислав
* Каргин Сергей {{:workroom:web_dising_i_programming_2013_2014:Каргин|}}
* Кузнецова Валерия {{:workroom:web_dising_i_programming_2013_2014:кузнецова_в..odt|}}
===== Лабораторная работа №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/имя_вашей_папки/**