Web- программирование
2
Цель дисциплины:
теоретическая и практическая подготовка студентов в области разработки веб-приложений с использованием языка разметки HTML, каскадных стилей CSS, языков программирования JavaScript, PHP, СУБД MySQL, а также современных сред разработок.
Задачи освоения дисциплины:
знакомство с принципами и методами макетирования и верстки веб-страниц, изучение современных сред разработки веб- приложений, приобретение навыков программирования на стороне клиента и на стороне сервера, получение практических навыков создания веб-приложений.
3
Общая трудоемкость дисциплины составляет 8 кредитов, 288 часов.
Контактная работа |
114 |
часов |
лекции |
32 |
часов |
лабораторные работы |
82 |
часов |
Самостоятельная работа |
129 |
часов |
Форма отчетности: |
|
45 часов |
зачет |
5 |
семестр |
экзамен |
6 |
семестр |
№
п/п
Раздел учебной дисциплины
1.Введение в web- программирова ние
2.Базовые web-
технологии
3.Клиентское
программировани е на языке JavaScript
Зачет
Итого за семестр
1.Серверные
технологии веб- программирова ния. Язык PHP.
2.Базы данных.
Разработка
приложений, основанных на БД
3.
Защита сайта
Экзамен
Итого за семестр
Всего
|
Виды учебной работы, включая |
|
|
4 |
|||
|
самостоятельную работу студентов и |
|
|
||||
и |
|
трудоемкость |
|
Текущий |
Аттест |
|
|
|
(в часах) |
|
ация |
|
|||
е л |
|
|
контрол |
Макси |
|||
|
|
|
|
раздел |
|||
|
|
|
|
ь |
мальн |
||
е д |
Лекции |
Лабор. |
В т.ч. в |
|
а |
||
|
успевае |
ый |
|||||
|
работы |
ИФ |
Само |
(неделя |
|||
Н |
|
мости |
балл за |
||||
|
|
|
стоят |
, |
|||
|
|
|
|
(неделя, |
раздел |
||
|
|
|
|
ельна |
форма |
||
|
|
|
|
форма) |
|
||
|
|
|
|
я |
) |
|
|
|
|
|
|
|
|
||
работ
а
Семестр 5
1 |
– 4 |
4 |
10 |
0 |
20 |
5ЛР |
|
5– 10 |
6 |
18 |
0 |
30 |
12 ЛР |
||
11 |
– 17 |
6 |
20 |
0 |
30 |
15ЛР, |
|
17 ЛР |
|||||||
|
|
|
|
|
|
||
|
|
16 |
48 |
0 |
80 |
- |
|
|
|
|
Семестр 6 |
|
|
|
|
1 |
– 6 |
4 |
10 |
0 |
20 |
5ЛР |
|
7– 13 |
6 |
18 |
0 |
30 |
12 ЛР |
|
14 – 17 |
6 |
20 |
0 |
30 |
15ЛР, |
|
17 ЛР |
||||||
|
|
|
|
|
||
|
16 |
34 |
0 |
49 |
- |
6 КР |
20 |
14 КР |
40 |
17 ИК |
40 |
|
0 |
- |
0 |
6 КР |
20 |
14 КР |
40 |
17 ИК |
40 |
|
0 |
- |
0 |
5
исциплина направлена на ормирование следующих компетенций:
ОПК-7 - способен осуществлять выбор платформ и инструментальных программно-аппаратных средств для реализации информационных систем;
ПК-6 - способен разрабатывать технические спецификации на программные компоненты и осуществлять их реализацию;
ПКП-3 - готов применять актуальные версии языков и библиотек для разработки Интернет-приложений;
ПКП-4 - способен создавать html-страницы в соответствии с представленными графическими макетами и требованиями заказчика.
6
Редакторы кода:
1.Sublime Text;
2.Atom;
3.VS Code;
4.WebStorm;
5.Brackets.
Особенности |
7 |
|
oподсветка синтаксиса;
oавтоматические отступы;
oавтодополнение;
oразделение рабочей области;
oмини-карта;
oвнешний вид;
oпроекты;
oинтеграция приложений;
oсистема контроля версий;
oemmet;
oконсоль;
oдебаггер;
oединый стиль написания кода в команде;
oбиблиотека плагинов;
oгорячие клавиши.
8
HTML (HyperText Markup Language
— «язык гипертекстовой разметки») — самый базовый строительный блок.
Определяет содержание и структуру веб-контента.
9
Теги
10
Парные теги
11
Одиночные теги
12
Атрибуты тегов
позволяют расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров.
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
13
Правила вложенности
Теги должны закрываться в правильном порядке: вложенный внутрь тег должен закрываться раньше, чем внешний, родительский.
14
Ошибки вложенности
Как проверить?
https://validator.w3.org/
15
Структура простейшей страницы
16
!DOCTYPE -
определение типа документа.
<html> -
контейнер, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>.
<head> -
контейнер, в котором размещается служебная информация влияющая на всю страницу.
еги внутри <head> делятся на два типа:
•метаинформация, которую могут использовать браузеры, поисковики, какие-то другие сервисы.
Например,
<meta charset="utf-8">
• теги для подключения внешних ресурсов. Например,
<link rel="stylesheet" href="style.css">
18
<body> -
контейнер, в котором размещается все содержание веб-страницы (контент), отображаемое в окне браузера.
19
Страница сложнее
20
Тег <script>
служит для подключения внешних ресурсов.
Подключать тег <script>
лучше перед закрывающим тегом <body>.
21
Спецификация HTML
- документ описывающий все аспекты работы с HTML.
Доступ
https://html.spec.whatwg.org/
Нас интересуют разделы:
3 Semantics, structure, and APIs of HTML documents
4 The elements of HTML