diff --git a/README.md b/README.md index 9e0a113..202b6ff 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Frontend: - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](./lwF2/README.md) - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](./lwF3/README.md) - [Лабораторная работа №F4 - Взаимодействие с API (Axios)](./lwF4/README.md) -- [Лабораторная работа №F5 - Повторение на базовых технологиях (HTML, CSS)](#) +- [Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)](./lwF5/README.md) Backend: diff --git a/lwF5/README.md b/lwF5/README.md new file mode 100644 index 0000000..03c2985 --- /dev/null +++ b/lwF5/README.md @@ -0,0 +1,125 @@ +# Лабораторная работа №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: ; +- Система контроля версий git: . + +Необходимые к установке расширения VS Code: + +- GitLens: . + Необходимо для более тесной интеграции VS Code и git. +- Live Server: . + Необходим для запуска небольшого веб-сервера. + Без него не будет работать отправка данных на json-server из-за политик безопасности браузера. +- HTML CSS Support: . + Для поддержки подсказок с классами CSS в HTML-документе. +- HTMLHint: . + Для проверки, что разметка в HTML-документе указана корректно. + +## Создание репозитория git + +Происходит по адресу , а точнее (после регистрации). + +Обязательно в описании репозитория укажите вашу фамилию и имя. +Пример: + +![](gitea-create-repo.png) + +Далее на своём ПК создайте любой каталог, откройте его в 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`: + +![](gitea-result.png) + +Всё. +Среда разработки и репозиторий подготовлены для работы. +Убедиться в этом можно на вкладке *Source Control* в VS Code: + +![](vs-code-git.png) + +## Создание набора файлов и базового шаблона для выполнения лабораторной работы + +Так как работа будет выполняться на базовых технологиях веб-разработки, необходимо создать следующие файлы: + +- `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-дерева. + +## Собственно выполнение лабораторной работы + +Несколько советов: + +- Не забудьте каждому `input`-элементу задать атрибут `name`. +- Для получения данных с формы можно воспользоваться объектом `FormData`. +- Для отправки данных на сервер почитайте и реализуйте вызов API через функцию `fetch`. +- Для более тонкой настройки позиционирования элементов используйте `display: flex` и другие возможности flexbox. +- Если нужно вставить картинки, их можно добавить в каталог `img`. Шрифты - `fonts`. Или подключить их через CDN. +- Старайтесь понятия все правила стилизации в CSS, т.к. на защите это пригодится. + Рекомендуется использовать минимальный набор стилей для повторения макета от л/р F1. + +> Почитайте, что такое CDN и как оно может помочь или наоборот навредить. + +Источники: + +- ; +- . + +## Коммит результата + +После этого необходимо при помощи вкладки *Source control* или командной строки добавить новый коммит в ваш репозиторий с файлами лабораторной работы, а потом выполнить `git push` (в VS Code есть кнопка *Sync*, которая делает push + pull). + +Что должно быть в итоге: + +- файл `README.md`; +- файл `index.html`; +- файл `style.css`; +- файл `script.js`; +- файл `db.json`; +- возможно дополнительные файлы с изображениями, шрифтами, документами и пр. diff --git a/lwF5/gitea-create-repo.png b/lwF5/gitea-create-repo.png new file mode 100644 index 0000000..9c9bb17 Binary files /dev/null and b/lwF5/gitea-create-repo.png differ diff --git a/lwF5/gitea-result.png b/lwF5/gitea-result.png new file mode 100644 index 0000000..eb71a36 Binary files /dev/null and b/lwF5/gitea-result.png differ diff --git a/lwF5/vs-code-git.png b/lwF5/vs-code-git.png new file mode 100644 index 0000000..f4271c8 Binary files /dev/null and b/lwF5/vs-code-git.png differ