Структура_сайта_и_деплой_с_анимацией

1.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Структура сайта
и путь до публикации
HEADER
MAIN
От HTML-каркаса до защищенного сайта в интернете
NAV
HTML
CSS
UX
DEPLOY
SECTION
SECTION
FOOTER
01

2.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Базовая HTML-структура
КОД
<!doctype html>
Заголовок страницы
<html>
<head>
метаданные и стили
→
</head>
Основной контент
<body>
видимое содержимое
</body>
Блок
Блок
</html>
head — служебная часть
body — то, что видит пользователь
02

3.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Верстка: структура и внешний вид
HTML
задает смысл и порядок блоков
+
CSS
управляет цветом, сеткой и
отступами
→
ГОТОВАЯ
СТРАНИЦА
Два инструмента раскладки
FLEXBOX
GRID
одна строка или колонка
двумерная сетка
03

4.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Адаптивная верстка
Один сайт. Разная компоновка на каждом экране
ТЕЛЕФОН / 1 КОЛОНКА
Контент сохраняется
ПЛАНШЕТ / 2 КОЛОНКИ
Меняется расположение
НОУТБУК / 3 КОЛОНКИ
04

5.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Самоадаптивная сетка
GRID
auto-fit
+ minmax()
ШИРОКИЙ ЭКРАН
Браузер сам выбирает число колонок
СРЕДНИЙ
4
УЗКИЙ
2
1
05

6.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
UX на мобильном экране
ПЛОХО
ХОРОШО
Очень длинный
заголовок
Понятный
заголовок
→
Удобство важнее
плотности
мелкий текст
тесные кнопки
Продолжить
читаемый текст
крупное действие
06

7.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Mobile First
Сначала мобильная основа, затем расширение интерфейса
03
02
01
ТЕЛЕФОН
→
ПЛАНШЕТ
КОМПЬЮТЕР
→
полная компоновка
больше пространства
главный контент
@media (min-width: 768px) { расширяем макет }
07

8.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Как сайт открывается в интернете
01
02
ПОЛЬЗОВАТЕЛЬ
→
вводит адрес
ДОМЕН — понятный адрес
03
ДОМЕН
имя сайта
→
04
DNS
находит IP
DNS — связь адреса с сервером
→
05
СЕРВЕР
принимает запрос
→
САЙТ
отдает страницу
СЕРВЕР — место, где работает сайт
08

9.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Что находится на сервере
СЕРВЕР
BACKEND
FRONTEND
HTML + CSS + JS
интерфейс
БАЗА ДАННЫХ
→
запрос
логика и API
обрабатывает запрос
Пользователь видит интерфейс, сервер выполняет работу за ним
→
данные
09

10.

СТРУКТУРА
АДАПТИВНОСТЬ
ДЕПЛОЙ
Деплой и HTTPS
КОД
локальный проект
РЕПОЗИТОРИЙ
→
история изменений
СБОРКА
→
готовые файлы
СЕРВЕР
→
публикация