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

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

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

{{:workroom:web_dising_i_programming:лр1_анализ_веб-дизайнов_современных_сайтов.pdf|Задания по лабораторной работе №1}}

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

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

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

<note>**№ 1.**

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

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

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

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

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

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

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

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

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

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

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

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

<note>**№ 2.**

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

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

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

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

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

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

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

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

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

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

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

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

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

<note>**№ 3.**

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

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

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

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

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

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

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

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

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

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

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

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

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

<note>**№ 4.**

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

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

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

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

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

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

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

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

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

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

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

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

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

<note>**№ 5.**

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

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

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

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

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

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

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

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

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

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

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

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

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



----


**Для выполнения лабораторной работы используем сайт: **
  * {{: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: Онлайн-конструкторы сайтов ======

**Задание:** разработать тематический сайт с помощью одного из конструкторов:
  * [[http://narod.ru|Народ]]
  * [[http://ucoz.ru|Ucoz]]
  * [[http://taba.ru|Taba]]
    
или 

  * [[http://www.weebly.com/|www.weebly.com]]
  * [[http://www.wix.com/|www.wix.com]]
  * [[http://www.relby.com/|www.relby.com]]
  * [[http://ru.jimdo.com/|imdo.com]]
  * [[http://v-teme.com/|v-teme.com]]


Наша работа: 
  * [[http://dmzhexor.ucoz.ru|Zhdanovich Dmitry]]
  * [[http://example.com|Rustamov Ruslan]]
  * [[http://sitecompany-7cb255ac28e07d2a.taba.ru/|Paderin Sergey]]
  * [[http://perfilov.ucoz.com/|Perfilov Vladimir]]
  * [[http://lisa-krasa.ucoz.ru/|Kobseva Vika]]
  * [[http://cherepakhina.ucoz.ru/|Cherepakhina Lola]]
  * [[http://olivio.ucoz.ru//|Kyrmangaliev Sarsembay]]
  * [[http://pib21.my1.ru//|Rezanov Maxim]]
  * [[http://cmeptb6843.ucoz.ru//|Loshkarev Roman]]
===== Лабораторная работа №5: Основы JavaScript =====

**Задания:** 
  - изучить базовые конструкции языка JavaScript, последовательно выполнив по вариантам [[http://mif.vspu.ru/books/js/les1.html|следующие уроки]];
  - выполнить [[http://mif.vspu.ru/books/dhtml-task/|задания]] по работе с объектами браузера.

Материал в помощь:
  * [[http://learn.javascript.ru/|Онлайн учебник по JavaScript]]
  * [[http://habrahabr.ru/post/166435/|Тонкости работы с z-index]]

===== Лабораторная работа 6 "Создание страниц при помощи DHTML" =====

**Задание:** Доработайте ваш проект сайта (на выбранную выше тему), используя конструкции языка JavaScript. Необходимо добавить __не менее четырех__ элементов динамического содержания.

===== Лабораторная работа 7 "Базовые конструкции языка 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/|пошаговое руководство]]) 
  - Изучая теорию, выполнить примеры в [[http://php720.com/view-lesson.php|данном учебнике]].

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

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

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

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

**[[http://writecodeonline.com/php/|Онлайн редактор PHP]]**

===== Лабораторная работа 7 (ПРОДОЛЖЕНИЕ) "Базовые конструкции языка PHP" =====

**В ПОМОЩЬ: [[http://myrusakov.ru/php-osnovy.html]]**

ЗАДАНИЯ:

1) Типы переменных. Присвоение значений переменным.

{{:workroom:web_dising_i_programming:125.jpg|}}

2) Переменные. Вывод и удаление.

{{:workroom:web_dising_i_programming:127.jpg|}}

3) Константы.

{{:workroom:web_dising_i_programming:129.jpg|}}

4) Конструкция If - Else. Elseif.

{{:workroom:web_dising_i_programming:131.jpg|}}

{{:workroom:web_dising_i_programming:132.jpg|}}

5) Конструкция Switch - Case.

{{:workroom:web_dising_i_programming:134.jpg|}}

6) Массивы.

{{:workroom:web_dising_i_programming:136.jpg|}}

7) Цикл For.

{{:workroom:web_dising_i_programming:139.jpg|}}

8) Задача на использование циклов.

{{:workroom:web_dising_i_programming:141.jpg|}}

{{:workroom:web_dising_i_programming:142.jpg|}}

9) Задача на использование Foreach.

{{:workroom:web_dising_i_programming:144.jpg|}}

**В ПОМОЩЬ: [[http://myrusakov.ru/php-osnovy.html]]**

===== Лабораторная работа 8 "Взаимодействие PHP и MySQL" =====

**Работаем с разделами, посвященными MySQL: [[http://myrusakov.ru/mysql.html]]**




\ 

Назад: [[workroom:web_dising_i_programming:index]]

{{tag>}}