Лабораторные работы по дисциплине

«Разработка web-сайтов»

Все лабораторные работы проводятся с использованием компьютера, поэтому допускается работа над заданиями дома при условии своевременной сдачи и защиты работ.

Лабораторная работа 1. «Изучение языка гипертекстовой разметки HTML» (4 часа)

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

Задание:

1. Изучить теоретическую часть AOS HTML. Можно воспользоваться учебником Samouchitel1_HTML.zip, а так же справочником по тэгам tags.chm. Описание стилей CSS.zip.

2. Пройти контрольное тестирование в AOS HTML.

3. Разработать сайт о себе (или другой произвольной тематики по согласованию с преподавателем) в нескольких текстовых и гипертекстовых редакторах (MS Word, NOTEPAD или блокнот, Dreamweaver, Visual Studio и т.п.). Минимальные требования к сайту:

1.) Сайт должен состоять не менее чем из 3 отдельных страниц (html файлов)

2.) Страницы должны быть связаны между собой ссылками

3.) Использование тегов форматирования страницы и текста (цвет, шрифт, размер, жирный/курсив и т.д.)

4.) Страницы должны содержать изображения (любой формат bmp, jpg, gif и т.д.)

5.) Наличие одной или нескольких таблиц (<TABLE>)

6.) Наличие списков (нумерованных или ненумерованных <OL><UL>)

7.) Использование стилей CSS (например, для форматирования таблиц)

4. Сравнить использованные текстовые и гипертекстовые редакторы по различным критериям (функциональность, удобство создания страницы, оптимальность HTML-кода, понятность и валидность создаваемого HTML-кода).

5. Провести валидацию (проверку корректности) всех созданных вариантов HTML-кода с помощью специализированных интернет ресурсов (например, https://validator.w3.org/). Устранить выявленные ошибки.

6. Составить отчет о проделанной работе в бумажном или электронном виде.

7. Защитить лабораторную работу. Защита устная по отчету с демонстрацией разработанных сайтов.

Лабораторная работа 2. «Изучение языка Javascript» (4 часа)

Цель работы: исследование возможностей применения языка Javascript в HTML коде.

Задание:

1. Получить индивидуальное задание у преподавателя после завершения 1-ой работы.

Варианты заданий:

1. Создать двигающуюся по заданному алгоритму (прямой или кривой линии) строку.

2. Реализовать перемещающиеся по сайту изображения (падающий снег, дождь, опадающие листья, проезжающие машины).

3. Перед открытием сайта запрашивать у посетителей данные, проверять правильность ввода.

4. Менять цвет фона, стиль текста по команде пользователя.

5. Навигация по сайту (переход между страницами, прокрутка текста) с использованием кнопок и диалоговых окон.

6. Добавить календарь, часы на страницу, вести отсчет времени, проведенного на странице. Выдавать сообщения при прохождении некоторых временных периодов.

7. Сортировать таблицу по выбранному пользователем критерию.

8. Проводить опрос пользователей посетивших сайт. Выводить результаты.

2. Изучить теоретическую часть. Справочная литература: папка Javascript.

3. Составить отчет о проделанной работе в бумажном или электронном виде.

4. Защитить лабораторную работу. Защита работы устная, основывается на объяснении работы вашего скрипта (использование переменных, функций, а так же сам алгоритм).

Лабораторная работа 3. «Особенности языка HTML5» (4 часа)

1. Изучить теоретическую часть.

2. Выполнить верстку созданного на первых лабораторных работах сайта с использованием тегов HTML5: <header>, <nav>, <section>, <article>, <aside>, <figcaption>, <figure>, <mark>, <time>, <footer>.

3. Добавить на страницы сайта аудио- и видеосодержимое с использованием тегов HTML5 <audio> и <video>.

4. Составить отчет о проделанной работе в бумажном или электронном виде.

5. Защитить лабораторную работу.

Лабораторная работа 4. «Разработка сайта c использованием серверного языка сценариев PHP» (4 часа)

Цель работы: знакомство с интерпретатором сценариев PHP.

Задание:

1. Изучить теоретическую часть. Справочная литература в папке PHP.

2. Установить Web-сервер Denwer. Инсталлятор готовой системы веб-сервера и БД mysql для разработчиков сайтов прилагается.

3. Написать по своему выбору две программы на языке PHP, одна из которых создавала бы HTML-страницу, а вторая обрабатывала бы запросы от этой страницы и создавала бы новую HTML-страницу с таблицей, данные в которой меняются в зависимости от результатов обработки запроса. Добавить эти программы на свой сайт и поставить на них ссылку с главной страницы сайта.

4. Составить отчет о проделанной работе в бумажном или электронном виде.

5. Защитить лабораторную работу.

Лабораторная работа 5. «Разработка сайта c использованием PHP и MySQL» (4 часа)

Цель работы: освоение программных технологий доступа к базам данных MySQL с помощью серверных сценариев PHP, применение интерпретатора сценариев PHP совместно с БД MySQL.

Задание:

1. Изучить теоретическую часть. Справочная литература в файле 5_mysql.doc.

2. Создать и заполнить базу данных MySQL по тематике сайта созданного на предыдущих лабораторных работах по примеру в файле 5_mysql.doc.

3. Добавить на свой сайт PHP-сценарии соединения с базой данных, и выборки запрошенной информации из базы данных по образцу в файле 5_mysql.doc.

4. Составить отчет о проделанной работе в бумажном или электронном виде.

5. Защитить лабораторную работу.

Лабораторная работа 6. «Реализация асинхронного взаимодействия веб-браузера с веб-сервером с помощью технологии AJAX» (4 часа)

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

Задание:

1. Изучить теорию. Справочная литература в папке AJAX.

2. Реализовать асинхронный поиск по созданной на предыдущей лабораторной работе базе данных MySQL, имитирующий работу сервиса Google Suggest на основе AJAX. Предполагается, что пользователь может вводить в текстовое поле формы часть искомого объекта (например, часть имени), динамически получая при этом список вариантов названий, соответствующих уже введенным символам, без перезагрузки страницы.

3. Составить отчет о проделанной работе в бумажном или электронном виде.

4. Защитить лабораторную работу.

Лабораторная работа 7. «Создание сайта c использованием системы управления контентом (CMS) WordPress» (4 часа)

Цель работы: получение навыков создания и администрирования сайтов с использованием систем управления контентом на примере CMS WordPress.

Задание выполняется с использованием пакета программ Денвер:

1. Скачайте установщик WordPress с сайта wordpress.org.
2. Распакуйте его в папку web-сервера Denwer (z:\home\localhost\ Ваше название).
3. Создайте БД MySQL.
4. Наберите в браузере адрес сайта (localhost/ Ваше название). Через Параметры - Постоянные ссылки включите ЧПУ.
5. Смените установленный по умолчанию шаблон. Настройте его.
6. Измените состав и расположение Виджетов.
7. Добавьте на сайт 2 страницы, записи в рубриках, рисунки.
8. Установите плагины, выполняющие следующие действия:
• поддержка SEO;
• создание кеша (например, Super Cache);
• набор математических формул;
• выполнение php;
• воспроизведение роликов YouTube;
• резервное копирование.
9. Добавьте на сайт записи, содержащие:
• математический текст;
• ролики YouTube;
• исполняющийся код на php.
10. Добавьте код, выводящий содержимое некой таблицы из БД.