РАЗРАБОТКА УЧЕБНЫХ ЗАДАНИЙ ДЛЯ ДИСТАНЦИОННОГО КУРСА

Введение 3
1. Применение дистанционных курсов в обучении 5
1.1. Виды заданий для дистанционных курсов 5
1.2. Примеры курсов для изучения инструментов веб-разработки 7
1.3. Требования к современным сайтам 10
1.4. Применение HTML, CSS, JAVASCRIPT, PHP 16
2. Разработка учебных заданий для дистанционного курса 19
2.1. Установка и подключение необходимых программных продуктов 19
2.2. Учебные задания 20
2.2.1. Задание 1 20
2.2.2. Задание 2 24
2.2.3. Задание 3 26
2.2.4. Задание 4 27
2.2.5. Задание 5 29
2.2.6. Задание 6 32
Заключение 38
Список литературы 39

1.1. Виды заданий для дистанционных курсов
Под дистанционными образовательными технологиями понимаются технологии, реализуемые в основном с применением информационно- телекоммуникационных сетей при опосредованном (на расстоянии) взаимодействии обучающихся и педагогов.
Характеристики, отличающие дистанционное курсы от обычных. Во- первых, обучающихся и преподавателей могут разделять географическое расположение и часовые пояса, но это никак не помешает обучению. Доступность и удобство являются важными преимуществами этого способа обучения. Хорошо разработанные программы могут также преодолеть интеллектуальные, культурные и социальные различия между учащимися.
Во-вторых, людей в учебной группе с учителем связывают интерактивные телекоммуникации. Взаимодействие между участниками необходимо для дистанционных курсов, как и для любого другого метода обучения.
...

1.3. Требования к современным сайтам
Какие основные требования, которые необходимо учитывать при проектировании и разработке веб-сайта?
Веб-сайт организации используется в качестве формы рекламы и позволяет потенциальным клиентам узнать больше о компании и доступных продуктах, которые предлагаются, однако, есть определенные вещи, которые необходимы веб-сайту, чтобы гарантировать результаты.
Проектирование и разработка web-сайта должны быть продуманными. Это возможность не просто разместить название компании на очень большой интернет-карте, но и произвести хорошее впечатление на потенциальных посетителей [1].
Поэтому, прежде чем разрабатывать web-сайт, ознакомьтесь с основными требованиями к современным web-сайтам.
1. Технические требования Доменное имя
Доменное имя будет первым, что вам понадобится при запуске веб-сайта компании. Это цифровой адрес, который люди будут использовать для подключения к вашему сайту.
Например, доменное имя моего web-сайта: https://altum.
...

1.4. Применение HTML, CSS, JAVASCRIPT, PHP
◦ HTML обеспечивает базовую структуру сайтов, которая улучшается и модифицируется другими технологиями, такими как CSS и JavaScript.
◦ CSS используется для управления представлением и макетом, форматирования.
◦ JavaScript используется для управления поведением различных элементов.
◦ PHP используется для создания сайтов и web-приложений любой сложности, от лендингов и блогов до интернет-магазинов и браузерных.
Рассмотрим каждый из них в отдельности, чтобы для чего применяется каждый из языков и понять роли, которые они играют на веб-сайте.
HTML
HTML лежит в основе каждой веб-страницы, независимо от сложности сайта или количества задействованных технологий. Это необходимый навык для любого веб-профессионала, отправная точка для любого, кто учится создавать контент для Интернета.
Как работает HTML
HTML расшифровывается как язык разметки гипертекста.
...

2.1. Установка и подключение необходимых программных продуктов
Установим текстовый редактор Sublime Text (или любой другой, в котором вам будет удобно работать). Подключим к нему плагин Emmet,
объясню для чего, за счет преобразования простых, коротких аббревиатур в полноценные блоки кода данный плагин помогает нам значительно ускорить написание кода. У Emmet свой синтаксис, который легок в изучении, более того, его не обязательно запоминать, можно просто воспользоваться интернетом. Рассмотрим на примере. Без использования Emmet нам пришлось бы прописывать весь код:

С Emmet:

nav>ul>li
Для работы c php нам необходимо установить локальный веб-сервер, я отдала предпочтение Open Server.
Для создания адаптивной верстки сайта, модальных окон будем использовать фреймворк Bootstrap.
...

2.2.1. Задание 1
◦ Изучить основные теги HTML
◦ Ознакомиться с примером навигации nav.php
◦ Самостоятельно написать код для страницы «Главная»
Создадим файл nav.php, в котором будет описана верхняя часть сайта и навигация. Эта часть будет присутствовать на каждой странице нашего сайта, которых всего будет пять. Копировать ее код на каждую страницу не самый оптимальный вариант, ведь если будет вноситься малейшее изменение нам
будет необходимо делать поправки в каждом из пяти файлов. PHP упрощает задачу и экономит наше время. Записываем код нашей «шапочки» в отдельный файл nav.php. В разделе body мы помещаем в отдельные контейнеры header («шапочка») и nav (навигация) с рядами и колонками для адаптивной верстки и кроссбраузерности с помощью Bootstrap. Реализацию программного кода с объяснениями можно увидеть в таблице 1. Как будет выглядеть показано на рисунке 1.
...

2.2.2. Задание 2
◦ Изучить CSS
◦ Ознакомиться с примером использования CSS для nav.php
◦ Разработать дизайн для страницы «Главная»
Создадим файл stylee.css, который был упомянут в задании 1. В нем будет описан дизайн верхней части сайта и навигации (таблица 3).
Таблица 3 – CSS код для навигации сайта

/*==============ШАПОЧКА========*/
header{
color: #848484; background: white;
font-family: 'Roboto Slab', serif;
font-weight: normal; padding-top: 25px; padding-bottom: 5px; font-size: 19px;
}
.phone_number a{
color: black; display: inline-block; text-decoration: none;}

Зададим стиль «шапочки Цвет текста
Фон Шрифт
Толщина символов
Значение поля от верхнего края Значение поля от нижнего края Размер шрифта

Зададим стиль телефонного номера Цвет
Блочный элемент Оформление текста: нет
Продолжение таблицы 3

.phone_number a:before { vertical-align: middle; content:'';
width:30px; height:30px; background:
url(img/phone_icon.
...

2.2.3. Задание 3
◦ Изучить phpMyAdmin
◦ Рассмотреть пример создания Базы данных для страницы
«Отзывы» и создать свою Базу данных
Рассмотрим создание Базы данных с помощью OpenServer.
Запускаем OpenServer, заходим во вкладку «Дополнительно» и в выпадающем меню выбираем phpMyAdmin. Проходим авторизацию: в поле
«Пользователь» пишем «root», поле «Пароль» оставляем пустым.

В левом окошке выбираем «Создать БД» и даем имя нашей БД, пусть она будет называться «site2». Далее phpMyAdmin предлагает нам создать таблицу, назовем ее «comments». Для страницы «Отзывы» нам понадобится 4 столбца: id, username, comment, data. Выбираем соответствующий тип данных и наша таблица для отзывов готова (рисунок 5).

Рисунок 5 - Таблица отзывов в phpMyAdmin Попробуйте создать свою Базу данных для закрепления материала.
В задании 4 рассмотрим, как будут записываться отзывы в таблицу
«comments».

2.2.4.
...

2.2.4. Задание 4
◦ Изучить основные сведения о PHP
◦ Ознакомиться с примером подключения БД к странице «Отзывы»
◦ Осуществить вывод отзывов на страницу
Реализовывать подключение к Базе данных мы будем с помощью PHP Data Objects (PDO) – это расширение PHP, которое предоставляет разработчику простой интерфейс для доступа к БД.
В код страницы «Отзывы» встраиваем php код. В строке подключения мы указываем имя Базы данных(dbname), имя пользователя и пароль.
...

2.2.5. Задание 5
• Изучить основные сведения о Bootstrap и его возможности
• Изучить код для создания модального окна, которое появляется при нажатии кнопки «Оставить заявку» и «Подробнее»
• Сделать модальное окно для кнопки «Узнать подробности»
В задании 1 мы использовали Bootstrap для кроссбраузерности и адаптивность сайта, теперь применим его для создания модального окна при нажатии кнопки.
На сайте https://getbootstrap.com есть несколько примеров создания модальных окон, рассмотрим один из них. Рассмотрим модальное окно из графы Optional sizes, размеры которого можно менять. Modal имеет два варианта размера окна, доступных через классы модификаторов .modal-dialog. Для кнопки «Оставить заявку» мы будет использовать окно маленького размера modal-sm.
...

2.2.6. Задание 6
◦ Изучить основные сведения о JavaScript
◦ Изучить код создания слайдера для страницы «О компании» и расчет стоимости кабеля для страницы «Продукция»
◦ Изменить дизайн слайдера и написать вывод расчета на страницу При создании слайдера для нашего сайта нам не понадобятся базовые
знания JavaScript. Заходим на сайт https://fotorama.io и так как для Bootstrap мы уже подключили jQuery, в конец тела страницы «О компании» мы вставляем строки с сайта «Фоторама»: