Подготовил презентацию

2026-09-02 11:58:25 +03:00
commit 251a3975be
52 changed files with 4101 additions and 0 deletions
@@ -0,0 +1,116 @@
+# Блок 2. Экспорт и картинки для веба
+
+md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.
+
+<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720" />
+
+## Из Markdown в другие форматы
+
+В Cursor те же расширения, что в VS Code: `Ctrl+Shift+X`.
+
+### Markdown PDF
+
+Расширение: **Markdown PDF** (`yzane.markdown-pdf`).
+
+Умеет из открытого `.md`:
+
+- PDF
+- HTML
+- PNG (снимок)
+- иногда Markdown (пересобрать)
+
+Как пользоваться: правый клик по файлу или по превью → `Markdown PDF: Export (pdf)` / `Export (html)`.
+
+Настройки, которые стоит глянуть один раз:
+
+- формат страницы (A4)
+- поля
+- ломать ли код на границе страницы
+- включён ли math (формулы)
+- тема / CSS — если хочется «не как из Word 2003»
+
+Для доклада PDF — ок. Для сайта лучше HTML (или статический генератор, это уже другой разговор).
+
+### Mermaid
+
+Расширение: **Markdown Preview Mermaid Support** (`bierner.markdown-mermaid`) — чтобы схемы из блока 1 рисовались в превью.
+
+Без него ` ```mermaid ` так и останется серой простынёй.
+
+Markdown PDF часто подхватывает mermaid, **если** превью его уже рисует. Экспортировал — открой PDF и проверь схемы. Нет схемы — сначала mermaid-плагин, потом снова Export.
+
+Есть ещё **Mermaid Editor** / предпросмотр отдельных `.mmd` — не обязательно, если всё живёт внутри md.
+
+### Что ещё бывает
+
+| Плагин / штука | Зачем |
+|---|---|
+| Markdown PDF | быстрый pdf/html из файла |
+| Markdown Preview Mermaid Support | схемы в превью |
+| Markdown All in One | оглавление, шорткаты |
+| Pandoc (уже не плагин, а комбайн) | md → docx/tex/html, если припрёт Word |
+
+Для сегодняшнего круга хватает **Markdown PDF + Mermaid**.
+
+---
+
+## ffmpeg — картинки для вёрстки
+
+ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.
+
+Разбор «что это вообще такое» лучше смотреть тут (очень советую):
+
+**[FFmpeg — крутое видео](https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN)**
+
+Нам из всего комбайна — узкий кусок: **для сайта**. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем **WebP**: меньше вес, в браузерах давно ок.
+
+Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.
+
+Из `команды ffmpeg.txt`:
+
+```bash
+ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp
+```
+
+С картинкой из этой папки:
+
+```bash
+ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp
+```
+
+Что значат куски:
+
+| Кусок | Смысл |
+|---|---|
+| `-i ...` | вход |
+| `-vf "scale=800:-1"` | ширина 800, высота сама (пропорции) |
+| `-c:v libwebp` | кодек WebP |
+| `-quality 80` | качество, 80 — нормальный компромисс |
+
+Папку `img_web` создай заранее.
+
+Ещё пара рабочих:
+
+Другая ширина под узкую колонку:
+
+```bash
+ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp
+```
+
+JPG → WebP без смены размера:
+
+```bash
+ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp
+```
+
+В HTML потом:
+
+```html
+<img src="img_web/cover.webp" alt="обложка" width="800">
+```
+
+Исходники в `img/` не трогаем — это «негатив». На страницу отдаём WebP.
+
+ffmpeg в PATH: в терминале `ffmpeg -version`. Нет команды — поставь сборку под Windows и переоткрой терминал.
+
+Дальше: кто напишет md за нас, если лень — [блок 3](03-ii.md).