intprog/lwF5/README.md

Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)

Цель работы

• Более глубокое изучение базовых технологий WWW: HTML, CSS, JS.
• Изучение базовых правил работы с утилитой git.

Ход работы

• Перед выполнением работы необходимо как минимум сдать лабораторные работы F3 и F4, т.к. работа будет основываться на этих работах.
• Первый этап работы: организация рабочего пространства.
• Затем необходимо создать репозиторий git и залить его на хостинг.
• В репозитории необходимо создать как минимум по одному файлу HTML, CSS, JS и связать их друг с другом. Также в репозиторий необходимо положить пример файла db.json для запуска json-server из л/р F4.
• Необходимо повторить вёрстку (lwF3) и алгоритм отправки данных на сервер (lwF4) без использования react, axios, module css и typescript.
• Для сдачи необходимо прислать репозиторий на проверку, затем продемонстрировать работу веб-приложения.

Настройка рабочего окружения

На лабораторном (или личном) ПК должны быть установлены следующие программы:

• Visual Studio Code: https://code.visualstudio.com/download;
• Система контроля версий git: https://git-scm.com/downloads.

Необходимые к установке расширения VS Code:

• GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens. Необходимо для более тесной интеграции VS Code и git.
• Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer. Необходим для запуска небольшого веб-сервера. Без него не будет работать отправка данных на json-server из-за политик безопасности браузера.
• HTML CSS Support: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css. Для поддержки подсказок с классами CSS в HTML-документе.
• HTMLHint: https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint. Для проверки, что разметка в HTML-документе указана корректно.

Создание репозитория git

Происходит по адресу https://git.is.ulstu.ru, а точнее https://git.is.ulstu.ru/repo/create (после регистрации).

Обязательно в описании репозитория укажите вашу фамилию и имя. Пример:

Далее на своём ПК создайте любой каталог, откройте его в VS Code, создайте пустой файл README.md.

Далее в терминале (Ctrl + `) необходимо написать код, указанный на сайте в блоке "Создать новый репозиторий из командной строки", кроме строки 1.

Пример:

git init
git checkout -b main
git add README.md
git commit -m "first commit"
git remote add origin https://git.is.ulstu.ru/v.moiseev/ip-lw-f5.git
git push -u origin main

Разберитесь с каждой командой из представленных выше. Преподаватель может в рамках защиты лабораторной работы попросить объяснить смысл этих команд.

После успешного выполнения команды на сайте должен отобразиться файл README.md:

Всё. Среда разработки и репозиторий подготовлены для работы. Убедиться в этом можно на вкладке Source Control в VS Code:

Создание набора файлов и базового шаблона для выполнения лабораторной работы

Так как работа будет выполняться на базовых технологиях веб-разработки, необходимо создать следующие файлы:

• index.html. Здесь будет разметка HTML-документа, который будет представлять собой одностраничное приложение, разрабатываемое в рамках работ lwF1-lwF4.
• style.css. Здесь будут описаны правила стилизации элементов документа при помощи технологии каскадных таблиц стилей CSS.
• script.js. В этом файле будет описана логика получения данных с полей ввода и их отправка на json-server.

Почему основной HTML-документ называется index - прочитайте самостоятельно.

Далее надо создать базовый шаблон в HTML-документе. Для этого можно воспользоваться Emmet-шаблонов !: ввести в файле index.html символ ! и нажать на Enter.

Далее необходимо подключить style.css и script.js.

Особенность подключения script.js. Необходимо в тэге script указать атрибут defer, чтобы скрипт выполнялся уже после загрузки всего DOM-дерева.

Собственно выполнение лабораторной работы

Дополнительные требования:

• В HTML-документе должен быть определён favicon: изображение, которое отображается на вкладке с Вашим документом;
• Ссылки в шапке (навигации) на разделы лендинга, как и в л/р F1, должны переносить пользователя на эти разделы;
• Внешний вид страницы должен более-менее соответствовать макету из л/р F1.
• Для получения данных с формы необходимо воспользоваться объектом FormData.
• Для отправки данных на сервер почитайте и реализуйте вызов API через функцию fetch.

Несколько советов:

• Не забудьте каждому input-элементу задать атрибут name.
• Для более тонкой настройки позиционирования элементов используйте display: flex и другие возможности flexbox.
• Если нужно вставить картинки, их можно добавить в каталог img. Шрифты - fonts. Или подключить их через CDN.
• Старайтесь понятия все правила стилизации в CSS, т.к. на защите это пригодится. Рекомендуется использовать минимальный набор стилей для повторения макета от л/р F1.

Почитайте, что такое CDN и как оно может помочь или наоборот навредить.

Источники:

• https://htmlbook.ru/;
• https://learn.javascript.ru/.

Коммит результата

После этого необходимо при помощи вкладки Source control или командной строки добавить новый коммит в ваш репозиторий с файлами лабораторной работы, а потом выполнить git push (в VS Code есть кнопка Sync, которая делает push + pull).

Что должно быть в итоге:

• файл README.md;
• файл index.html;
• файл style.css;
• файл script.js;
• файл db.json;
• возможно дополнительные файлы с изображениями, шрифтами, документами и пр.