====== Веб-дизайн и интернет-программирование (ПИБ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/имя_вашей_папки/**