commit 251a3975be6e9895951ad0fa95b4f1a4432dfa61 Author: Legenda Date: Wed Sep 2 11:58:25 2026 +0300 Подготовил презентацию diff --git a/00-cursor.html b/00-cursor.html new file mode 100644 index 0000000..5b89b10 --- /dev/null +++ b/00-cursor.html @@ -0,0 +1,381 @@ + + + +00-cursor.md + + + + + + + + + + + + +

Блок 0. Cursor — зачем он тут

+Cursor как мастерская +

Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.

+

Сегодня он нам нужен как сцена:

+ +

Подробнее про ИИ — в блоке 3. Сейчас просто открываем файлы и смотрим, как разметка оживает.

+ + + diff --git a/00-cursor.md b/00-cursor.md new file mode 100644 index 0000000..4632a35 --- /dev/null +++ b/00-cursor.md @@ -0,0 +1,14 @@ +# Блок 0. Cursor — зачем он тут + +Cursor как мастерская + +Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст. + +Сегодня он нам нужен как **сцена**: + +- слева текст `.md` +- справа превью (как это выглядит «для людей») +- плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д. +- если надо быстро привести документ в порядок — ИИ в чате, не Word + +Подробнее про ИИ — в [блоке 3](03-ii.md). Сейчас просто открываем файлы и смотрим, как разметка оживает. diff --git a/01-razmetka.html b/01-razmetka.html new file mode 100644 index 0000000..a04a6b2 --- /dev/null +++ b/01-razmetka.html @@ -0,0 +1,677 @@ + + + +01-razmetka.md + + + + + + + + + + + + + + +

Блок 1. Языки разметки

+Markdown: из каши в документ +

Пишем текст с пометками. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.

+

Три слоя, которые сегодня трогаем:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ЧтоКогда
Markdown90% документа
HTMLmd не умеет (размер картинки, выравнивание, пара трюков)
LaTeXтолько формулы
Mermaidсхемы из текста
+
+

Markdown

+

Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).

+

Синтаксис чуть плавает между диалектами. В Cursor / GitHub / большинстве превью — GitHub Flavored Markdown. Этого хватает.

+

Ниже — живые примеры. Смотри превью, не исходник в одиночку.

+

Заголовки

+
# Большой
+## Поменьше
+### Ещё меньше
+#### Мелочь
+
+

Большой

+

Поменьше

+

Ещё меньше

+

Мелочь

+

Акцент

+

жирный и курсив и оба.

+

Можно _курсив_ и __жирный__.

+

зачеркнуто — ошибку видно, но история остаётся.

+

кусок кода в строке: пишется в обратных кавычках.

+

Абзацы и разрыв

+

Пустая строка = новый абзац.

+

Два пробела в конце строки
+дают перенос без нового абзаца.

+
+

Горизонтальная линия — три минуса.

+

Списки

+ +
    +
  1. первый
    2. +
  2. второй +
      +
    1. вложенная нумерация
      2. +
    +
    3. +
  3. третий
    4. +
+ +

Ссылки и картинки

+

Сайт Markdown

+

Сноска в тексте[^1].

+

Картинка «из коробки» — без размера и выравнивания:

+
![лис в рамках](img/html-images.png)
+
+

лис в рамках

+

Для сайта так часто мало: огромная PNG, не туда прижата. Тогда HTML — ниже.

+

Цитаты и код

+
+

Цитата. +Можно в несколько строк.

+
+

и даже вложенная

+
+
+

Кусок кода с языком — подсветка в превью:

+
print("привет")
+
+
console.log("тоже привет");
+
+

Три обратные кавычки + имя языка.

+

Таблица

+ + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаЧто делает
#заголовок
* / -список
**жирный
`код
+

Выравнивание колонок:

+ + + + + + + + + + + + + + + + + + + + +
влевоцентрвправо
abc
102030
+

Мелочи, которые часто нужны

+

Клавиша: Ctrl+Shift+V

+

Верхний/нижний индекс чистым md нет — это уже HTML: H2O, E = mc2.

+

Экранирование: пишем \* если нужен символ *, а не курсив.

+

Автоссылка: https://cursor.com

+
+

HTML внутри Markdown

+

Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй.

+

Зачем чаще всего: картинки. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом».

+три кадра с лисом — нам как раз про размер и выравнивание +

Размер

+

Чистый md:

+
![лиса](img/html-images.png)
+
+

С шириной:

+
<img src="img/html-images.png" alt="лиса" width="240">
+
+

Живьём, узко:

+лиса узко +

Шире:

+лиса шире +

Можно height, лучше одно измерение — второе само.

+

Или стиль:

+
<img src="img/html-images.png" alt="лиса" style="width: 40%;">
+
+лиса 40% +

Выравнивание

+

По центру:

+
<p align="center">
+  <img src="img/html-images.png" alt="центр" width="320">
+</p>
+
+

+ центр +

+

Вправо + подпись:

+
<p align="right">
+  <img src="img/markdown-hero.png" alt="md" width="280"><br>
+  <em>маленькая справа</em>
+</p>
+
+

+ md
+ маленькая справа +

+

Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт):

+
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
+
+cursor +Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз. +
+

Ещё HTML, который спасает в md

+
+Спойлер (клик) +

Секрет: внутри md можно прятать длинноты.

+
+

Цвет и выделение (осторожно, не все экспорты любят):

+
<mark>жёлтым</mark>
+<span style="color: #c45c26;">акцент</span>
+
+

жёлтым и акцент

+

Кнопка-ссылка на свой страх и риск:

+
<a href="https://www.markdownguide.org/">Markdown Guide</a>
+
+

Правило простое: сначала md, HTML — точечно. Не верстай всю страницу <div>-ами в .md, для этого уже HTML-файл.

+
+

LaTeX — только формулы

+доска с формулами +

LaTeX — это целая система вёрстки научных текстов (книги, статьи, диссертации). Мощь, пакеты, боль с компиляцией.

+

Нам сегодня не это. В Markdown (и в Cursor) живёт кусок: математика в $...$ / $$...$$. Под капотом обычно KaTeX или MathJax. Документ остаётся .md.

+

В строке

+
Энергия: $E = mc^2$.
+
+

Энергия: E=mc2E = mc^2.

+

Дробь и корень: ab\frac{a}{b}, x\sqrt{x}, 83\sqrt[3]{8}.

+

Греческое: α,β,γ,π,ω,ℏ\alpha, \beta, \gamma, \pi, \omega, \hbar.

+

Индекс и степень: xix_i, x2x^2, an+12a_{n+1}^{2}.

+

Бином: (a+b)n=∑i=0nCni aibn−i\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}

+

Блоком (по центру, крупно)

+
$$
+i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t)
+= \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t)
+$$
+
+iℏ∂∂tΨ(r,t)=[−ℏ22m∇2+V(r,t)]Ψ(r,t)i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t) += \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t) +

Система:

+{x+y=1x−y=0\begin{cases} +x + y = 1 \\ +x - y = 0 +\end{cases} +

Матрица:

+(abcd)(xy)=(pq)\begin{pmatrix} +a & b \\ +c & d +\end{pmatrix} +\begin{pmatrix} x \\ y \end{pmatrix} += +\begin{pmatrix} p \\ q \end{pmatrix} +

Интеграл: ∫01x2 dx=13\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}

+

Если формула в превью «сырая» — включи плагин Markdown+Math или проверь, что в настройках превью включён math. В PDF смотри, что экспортник тоже жуёт $.

+
+

Mermaid

+русалка рисует блок-схему +

Схемы текстом. Не лезем в Visio. В Cursor нужен превью с поддержкой mermaid (часто хватает Markdown Preview + расширение Mermaid).

+

Три самых простых.

+

Стрелки

+
flowchart LR
+  A[Идея] --> B[Markdown]
+  B --> C[Превью]
+  C --> D[PDF / HTML]
+
+

Ветвление

+
flowchart TD
+  Q{Нужен размер картинки?}
+  Q -->|нет| MD[Чистый md]
+  Q -->|да| HTML[Тег img]
+
+

Кто кому пишет

+
sequenceDiagram
+  participant Я
+  participant Cursor
+  Я->>Cursor: открой превью
+  Cursor-->>Я: вот документ
+
+

Сложные mindmap / pie — потом, если припрёт. Для доклада хватает flowchart.

+

Дальше: как это всё выгрузить из редактора и как не тащить на сайт пятимегабайтные PNG — блок 2.

+

[^1]: Сноска внизу файла. В pdf обычно работает.

+ + + diff --git a/01-razmetka.md b/01-razmetka.md new file mode 100644 index 0000000..efb6fa0 --- /dev/null +++ b/01-razmetka.md @@ -0,0 +1,353 @@ +# Блок 1. Языки разметки + +Markdown: из каши в документ + +Пишем **текст с пометками**. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле. + +Три слоя, которые сегодня трогаем: + +| Что | Когда | +|---|---| +| Markdown | 90% документа | +| HTML | md не умеет (размер картинки, выравнивание, пара трюков) | +| LaTeX | только формулы | +| Mermaid | схемы из текста | + +--- + +## Markdown + +Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом). + +Синтаксис чуть плавает между диалектами. В Cursor / GitHub / большинстве превью — **GitHub Flavored Markdown**. Этого хватает. + +Ниже — живые примеры. Смотри превью, не исходник в одиночку. + +### Заголовки + +```md +# Большой +## Поменьше +### Ещё меньше +#### Мелочь +``` + +# Большой +## Поменьше +### Ещё меньше +#### Мелочь + +### Акцент + +**жирный** и *курсив* и ***оба***. + +Можно `_курсив_` и `__жирный__`. + +~~зачеркнуто~~ — ошибку видно, но история остаётся. + +`кусок кода` в строке: пишется в обратных кавычках. + +### Абзацы и разрыв + +Пустая строка = новый абзац. + +Два пробела в конце строки +дают перенос без нового абзаца. + +--- + +Горизонтальная линия — три минуса. + +### Списки + +- пункт +- ещё + - вложенный + - и ещё +- последний + +1. первый +2. второй + 1. вложенная нумерация +3. третий + +- [ ] сделать +- [x] уже сделано +- [ ] не забыть кофе + +### Ссылки и картинки + +[Сайт Markdown](https://www.markdownguide.org/) + +Сноска в тексте[^1]. + +Картинка «из коробки» — без размера и выравнивания: + +```md +![лис в рамках](img/html-images.png) +``` + +![лис в рамках](img/html-images.png) + +Для сайта так часто **мало**: огромная PNG, не туда прижата. Тогда HTML — ниже. + +### Цитаты и код + +> Цитата. +> Можно в несколько строк. +> +> > и даже вложенная + +Кусок кода с языком — подсветка в превью: + +```python +print("привет") +``` + +```js +console.log("тоже привет"); +``` + +Три обратные кавычки + имя языка. + +### Таблица + +| Команда | Что делает | +|---|---| +| `#` | заголовок | +| `*` / `-` | список | +| `**` | жирный | +| `` ` `` | код | + +Выравнивание колонок: + +| влево | центр | вправо | +|:---|:---:|---:| +| a | b | c | +| 10 | 20 | 30 | + +### Мелочи, которые часто нужны + +Клавиша: Ctrl+Shift+V + +Верхний/нижний индекс чистым md **нет** — это уже HTML: H2O, E = mc2. + +Экранирование: пишем `\*` если нужен символ `*`, а не курсив. + +Автоссылка: https://cursor.com + +--- + +## HTML внутри Markdown + +Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй. + +Зачем чаще всего: **картинки**. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом». + +три кадра с лисом — нам как раз про размер и выравнивание + +### Размер + +Чистый md: + +```md +![лиса](img/html-images.png) +``` + +С шириной: + +```html +лиса +``` + +Живьём, узко: + +лиса узко + +Шире: + +лиса шире + +Можно `height`, лучше одно измерение — второе само. + +Или стиль: + +```html +лиса +``` + +лиса 40% + +### Выравнивание + +По центру: + +```html +

+ центр +

+``` + +

+ центр +

+ +Вправо + подпись: + +```html +

+ md
+ маленькая справа +

+``` + +

+ md
+ маленькая справа +

+ +Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт): + +```html +cursor +``` + +cursor +Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз. + +
+ +### Ещё HTML, который спасает в md + +
+Спойлер (клик) + +Секрет: внутри md можно прятать длинноты. + +
+ +Цвет и выделение (осторожно, не все экспорты любят): + +```html +жёлтым +акцент +``` + +жёлтым и акцент + +Кнопка-ссылка на свой страх и риск: + +```html +Markdown Guide +``` + +Правило простое: **сначала md, HTML — точечно**. Не верстай всю страницу `
`-ами в `.md`, для этого уже HTML-файл. + +--- + +## LaTeX — только формулы + +доска с формулами + +LaTeX — это целая система вёрстки научных текстов (книги, статьи, диссертации). Мощь, пакеты, боль с компиляцией. + +**Нам сегодня не это.** В Markdown (и в Cursor) живёт кусок: математика в `$...$` / `$$...$$`. Под капотом обычно KaTeX или MathJax. Документ остаётся `.md`. + +### В строке + +```md +Энергия: $E = mc^2$. +``` + +Энергия: $E = mc^2$. + +Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$. + +Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$. + +Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$. + +Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$ + +### Блоком (по центру, крупно) + +```md +$$ +i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t) += \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t) +$$ +``` + +$$ +i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t) += \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t) +$$ + +Система: + +$$ +\begin{cases} +x + y = 1 \\ +x - y = 0 +\end{cases} +$$ + +Матрица: + +$$ +\begin{pmatrix} +a & b \\ +c & d +\end{pmatrix} +\begin{pmatrix} x \\ y \end{pmatrix} += +\begin{pmatrix} p \\ q \end{pmatrix} +$$ + +Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$ + +Если формула в превью «сырая» — включи плагин Markdown+Math или проверь, что в настройках превью включён math. В PDF смотри, что экспортник тоже жуёт `$`. + +--- + +## Mermaid + +русалка рисует блок-схему + +Схемы текстом. Не лезем в Visio. В Cursor нужен превью с поддержкой mermaid (часто хватает Markdown Preview + расширение Mermaid). + +Три самых простых. + +### Стрелки + +```mermaid +flowchart LR + A[Идея] --> B[Markdown] + B --> C[Превью] + C --> D[PDF / HTML] +``` + +### Ветвление + +```mermaid +flowchart TD + Q{Нужен размер картинки?} + Q -->|нет| MD[Чистый md] + Q -->|да| HTML[Тег img] +``` + +### Кто кому пишет + +```mermaid +sequenceDiagram + participant Я + participant Cursor + Я->>Cursor: открой превью + Cursor-->>Я: вот документ +``` + +Сложные mindmap / pie — потом, если припрёт. Для доклада хватает flowchart. + +Дальше: как это всё выгрузить из редактора и как не тащить на сайт пятимегабайтные PNG — [блок 2](02-eksport-i-ffmpeg.md). + +[^1]: Сноска внизу файла. В pdf обычно работает. diff --git a/02-eksport-i-ffmpeg.html b/02-eksport-i-ffmpeg.html new file mode 100644 index 0000000..d8094af --- /dev/null +++ b/02-eksport-i-ffmpeg.html @@ -0,0 +1,481 @@ + + + +02-eksport-i-ffmpeg.md + + + + + + + + + + + + +

Блок 2. Экспорт и картинки для веба

+

md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.

+PNG проходит пресс и становится WebP +

Из Markdown в другие форматы

+

В Cursor те же расширения, что в VS Code: Ctrl+Shift+X.

+

Markdown PDF

+

Расширение: Markdown PDF (yzane.markdown-pdf).

+

Умеет из открытого .md:

+ +

Как пользоваться: правый клик по файлу или по превью → Markdown PDF: Export (pdf) / Export (html).

+

Настройки, которые стоит глянуть один раз:

+ +

Для доклада 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 — крутое видео

+

Нам из всего комбайна — узкий кусок: для сайта. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем WebP: меньше вес, в браузерах давно ок.

+

Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.

+

Из команды ffmpeg.txt:

+
ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp
+
+

С картинкой из этой папки:

+
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 создай заранее.

+

Ещё пара рабочих:

+

Другая ширина под узкую колонку:

+
ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp
+
+

JPG → WebP без смены размера:

+
ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp
+
+

В HTML потом:

+
<img src="img_web/cover.webp" alt="обложка" width="800">
+
+

Исходники в img/ не трогаем — это «негатив». На страницу отдаём WebP.

+

ffmpeg в PATH: в терминале ffmpeg -version. Нет команды — поставь сборку под Windows и переоткрой терминал.

+

Дальше: кто напишет md за нас, если лень — блок 3.

+ + + diff --git a/02-eksport-i-ffmpeg.md b/02-eksport-i-ffmpeg.md new file mode 100644 index 0000000..1f4d7e9 --- /dev/null +++ b/02-eksport-i-ffmpeg.md @@ -0,0 +1,116 @@ +# Блок 2. Экспорт и картинки для веба + +md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие. + +PNG проходит пресс и становится WebP + +## Из 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/` не трогаем — это «негатив». На страницу отдаём WebP. + +ffmpeg в PATH: в терминале `ffmpeg -version`. Нет команды — поставь сборку под Windows и переоткрой терминал. + +Дальше: кто напишет md за нас, если лень — [блок 3](03-ii.md). diff --git a/03-ii.html b/03-ii.html new file mode 100644 index 0000000..176a10d --- /dev/null +++ b/03-ii.html @@ -0,0 +1,394 @@ + + + +03-ii.md + + + + + + + + + + + + +

Блок 3. ИИ для разметки

+

Смысл не в том, чтобы «нейросеть написала роман». Смысл в форматировании: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.

+

Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.

+

Почему именно форматирование

+

Задача тупая и чёткая: заголовки, списки, таблицы, формулы в $...$, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.

+

В бесплатном Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.

+

Примеры промптов, без церемоний:

+ +

Кидаешь черновик в чат или @файл — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».

+

Если лимиты Cursor кончились

+

Тот же черновик можно отнести наружу:

+ +

Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.

+

Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.

+

ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.

+

Про то, как не плодить десять «финальных» копий — блок 4.

+ + + diff --git a/03-ii.md b/03-ii.md new file mode 100644 index 0000000..128f82a --- /dev/null +++ b/03-ii.md @@ -0,0 +1,35 @@ +# Блок 3. ИИ для разметки + +Смысл не в том, чтобы «нейросеть написала роман». Смысл в **форматировании**: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно. + +Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда. + +## Почему именно форматирование + +Задача тупая и чёткая: заголовки, списки, таблицы, формулы в `$...$`, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций. + +В **бесплатном** Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже. + +Примеры промптов, без церемоний: + +- «приведи этот файл к нормальному Markdown: заголовки, списки, таблица» +- «формулы оберни в `$...$` / `$$...$$`» +- «сделай mermaid-схему процесса из абзаца ниже» +- «замени жирные картинки на `` по центру» + +Кидаешь черновик в чат или `@файл` — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции». + +## Если лимиты Cursor кончились + +Тот же черновик можно отнести наружу: + +- **Gemini** +- **ChatGPT (GPT)** + +Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь. + +Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня. + +ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту. + +Про то, как не плодить десять «финальных» копий — [блок 4](04-git.md). diff --git a/04-git.html b/04-git.html new file mode 100644 index 0000000..6eb60f1 --- /dev/null +++ b/04-git.html @@ -0,0 +1,390 @@ + + + +04-git.md + + + + + + + + + + + + +

Блок 4. Git — зачем, без команд

+слева каша файлов Word, справа спокойное дерево версий +

Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.

+

Имена, которые все видели:

+

презентация_финал_конец_финал2_теперь_точно.docx

+

Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.

+

Чем git лучше (хотя порог выше)

+

Git хранит историю, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.

+

Зачем это нам, раз документы — Markdown:

+ +

Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.

+

Что взять с собой

+

Сегодня не учим команды. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).

+

Освоил git + Markdown — документы живут как код. Почта с финал3.docx становится смешной.

+

Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, зачем.

+ + + diff --git a/04-git.md b/04-git.md new file mode 100644 index 0000000..a0322da --- /dev/null +++ b/04-git.md @@ -0,0 +1,32 @@ +# Блок 4. Git — зачем, без команд + +слева каша файлов Word, справа спокойное дерево версий + +Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой. + +Имена, которые все видели: + +`презентация_финал_конец_финал2_теперь_точно.docx` + +Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл. + +## Чем git лучше (хотя порог выше) + +Git хранит **историю**, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял. + +Зачем это нам, раз документы — Markdown: + +- md — текст. Git видит **строки**, не бинарный комбайн Word. +- можно ветки: ты пилишь раздел, коллега — другой, потом склеить. +- рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался». +- откат: «как было в прошлый четверг» — не археология папки Загрузки. + +Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов. + +## Что взять с собой + +Сегодня **не учим команды**. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть). + +Освоил git + Markdown — документы живут как код. Почта с `финал3.docx` становится смешной. + +Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, **зачем**. diff --git a/README.html b/README.html new file mode 100644 index 0000000..43ab61e --- /dev/null +++ b/README.html @@ -0,0 +1,410 @@ + + + +README.md + + + + + + + + + + + + +

Демо: Markdown, HTML, формулы, схемы

+

Показываем в Cursor. Открыли папку — листаем файлы по порядку. Превью: Ctrl+Shift+V (или иконка превью справа сверху).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
БлокФайлО чём
000-cursor.mdЗачем Cursor, совсем коротко
101-razmetka.mdMarkdown, HTML внутри md, формулы, Mermaid
202-eksport-i-ffmpeg.mdPDF/HTML из md, плагины, картинки в WebP
303-ii.mdИИ для вёрстки документов
404-git.mdGit вместо «финал_конец_2.docx»
+

Картинки лежат в img/. Команды ffmpeg — в команды ffmpeg.txt.

+

Поехали.

+ + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..b15fd03 --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +# Демо: Markdown, HTML, формулы, схемы + +Показываем в **Cursor**. Открыли папку — листаем файлы по порядку. Превью: `Ctrl+Shift+V` (или иконка превью справа сверху). + +| Блок | Файл | О чём | +|---|---|---| +| 0 | [00-cursor.md](00-cursor.md) | Зачем Cursor, совсем коротко | +| 1 | [01-razmetka.md](01-razmetka.md) | Markdown, HTML внутри md, формулы, Mermaid | +| 2 | [02-eksport-i-ffmpeg.md](02-eksport-i-ffmpeg.md) | PDF/HTML из md, плагины, картинки в WebP | +| 3 | [03-ii.md](03-ii.md) | ИИ для вёрстки документов | +| 4 | [04-git.md](04-git.md) | Git вместо «финал_конец_2.docx» | + +Картинки лежат в `img/`. Команды ffmpeg — в `команды ffmpeg.txt`. + +Собранный сайт: папка [`site/`](site/index.html) (`index.html`, `00.html` … `04.html`). + +Поехали. diff --git a/img/20260414_104819.jpg b/img/20260414_104819.jpg new file mode 100644 index 0000000..b898b48 Binary files /dev/null and b/img/20260414_104819.jpg differ diff --git a/img/METLAB_logo.png b/img/METLAB_logo.png new file mode 100644 index 0000000..bb77273 Binary files /dev/null and b/img/METLAB_logo.png differ diff --git a/img/METLAB_logo_2cm.png b/img/METLAB_logo_2cm.png new file mode 100644 index 0000000..acc208b Binary files /dev/null and b/img/METLAB_logo_2cm.png differ diff --git a/img/MV_logo_2cm.png b/img/MV_logo_2cm.png new file mode 100644 index 0000000..5c4827d Binary files /dev/null and b/img/MV_logo_2cm.png differ diff --git a/img/MV_logo_color.png b/img/MV_logo_color.png new file mode 100644 index 0000000..f1b4c9a Binary files /dev/null and b/img/MV_logo_color.png differ diff --git a/img/cover.png b/img/cover.png new file mode 100644 index 0000000..4243da1 Binary files /dev/null and b/img/cover.png differ diff --git a/img/cursor-intro.png b/img/cursor-intro.png new file mode 100644 index 0000000..37f5d8b Binary files /dev/null and b/img/cursor-intro.png differ diff --git a/img/ffmpeg-webp.png b/img/ffmpeg-webp.png new file mode 100644 index 0000000..40f99ae Binary files /dev/null and b/img/ffmpeg-webp.png differ diff --git a/img/git-vs-word.png b/img/git-vs-word.png new file mode 100644 index 0000000..3dab19b Binary files /dev/null and b/img/git-vs-word.png differ diff --git a/img/html-images.png b/img/html-images.png new file mode 100644 index 0000000..9efcbef Binary files /dev/null and b/img/html-images.png differ diff --git a/img/latex-board.png b/img/latex-board.png new file mode 100644 index 0000000..ecde65f Binary files /dev/null and b/img/latex-board.png differ diff --git a/img/markdown-hero.png b/img/markdown-hero.png new file mode 100644 index 0000000..61d9c25 Binary files /dev/null and b/img/markdown-hero.png differ diff --git a/img/mermaid-pun.png b/img/mermaid-pun.png new file mode 100644 index 0000000..f48f5c4 Binary files /dev/null and b/img/mermaid-pun.png differ diff --git a/img/net.png b/img/net.png new file mode 100644 index 0000000..04072a5 Binary files /dev/null and b/img/net.png differ diff --git a/img/pointer.png b/img/pointer.png new file mode 100644 index 0000000..5c455a4 Binary files /dev/null and b/img/pointer.png differ diff --git a/img/site-index-hero.png b/img/site-index-hero.png new file mode 100644 index 0000000..ab3fb54 Binary files /dev/null and b/img/site-index-hero.png differ diff --git a/img/гистограмма.png b/img/гистограмма.png new file mode 100644 index 0000000..c62f5d6 Binary files /dev/null and b/img/гистограмма.png differ diff --git a/img/измерители мощности.png b/img/измерители мощности.png new file mode 100644 index 0000000..24f2d23 Binary files /dev/null and b/img/измерители мощности.png differ diff --git a/img/источники питания.png b/img/источники питания.png new file mode 100644 index 0000000..b7ec8a2 Binary files /dev/null and b/img/источники питания.png differ diff --git a/img/мультиметры.png b/img/мультиметры.png new file mode 100644 index 0000000..9477a92 Binary files /dev/null and b/img/мультиметры.png differ diff --git a/img/осциллографы.png b/img/осциллографы.png new file mode 100644 index 0000000..6ccbc13 Binary files /dev/null and b/img/осциллографы.png differ diff --git a/img/стенды.png b/img/стенды.png new file mode 100644 index 0000000..32d411d Binary files /dev/null and b/img/стенды.png differ diff --git a/img_web/cover.webp b/img_web/cover.webp new file mode 100644 index 0000000..7773609 Binary files /dev/null and b/img_web/cover.webp differ diff --git a/site/00.html b/site/00.html new file mode 100644 index 0000000..045a66d --- /dev/null +++ b/site/00.html @@ -0,0 +1,44 @@ + + + + + + Блок 0. Cursor + + + +
+
+ Демо разметки + +
+
+ +
+

Блок 0. Cursor — зачем он тут

+ Cursor как мастерская + +

Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.

+

Сегодня он нам нужен как сцена:

+
    +
  • слева текст .md
    • +
  • справа превью (как это выглядит «для людей»)
    • +
  • плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д.
    • +
  • если надо быстро привести документ в порядок — ИИ в чате, не Word
    • +
+

Подробнее про ИИ — в блоке 3. Сейчас просто открываем файлы и смотрим, как разметка оживает.

+ +
+ ← Содержание + Блок 1. Разметка → +
+
+ + diff --git a/site/01.html b/site/01.html new file mode 100644 index 0000000..e63348f --- /dev/null +++ b/site/01.html @@ -0,0 +1,276 @@ + + + + + + Блок 1. Языки разметки + + + + +
+
+ Демо разметки + +
+
+ +
+

Блок 1. Языки разметки

+ Markdown: из каши в документ +

Пишем текст с пометками. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.

+ + + + + + + + + +
ЧтоКогда
Markdown90% документа
HTMLmd не умеет (размер картинки, выравнивание)
LaTeXтолько формулы
Mermaidсхемы из текста
+ +

Markdown

+

Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).

+

В Cursor / GitHub — GitHub Flavored Markdown. Этого хватает.

+ +

Заголовки

+ 
# Большой
+## Поменьше
+### Ещё меньше
+#### Мелочь
+

Большой

+

Поменьше

+

Ещё меньше

+

Мелочь

+ +

Акцент

+

жирный и курсив и оба.

+

Можно _курсив_ и __жирный__ в исходнике md.

+

зачеркнуто — ошибку видно, но история остаётся.

+

кусок кода в строке: пишется в обратных кавычках.

+ +

Абзацы и разрыв

+

Пустая строка = новый абзац.

+

Два пробела в конце строки
дают перенос без нового абзаца.

+
+

Горизонтальная линия — три минуса.

+ +

Списки

+
    +
  • пункт
    • +
  • ещё +
      +
    • вложенный
      • +
    • и ещё
      • +
    +
    • +
  • последний
    • +
+
    +
  1. первый
    2. +
  2. второй +
      +
    1. вложенная нумерация
      2. +
    +
    3. +
  3. третий
    4. +
+
    +
  • сделать
    • +
  • уже сделано
    • +
  • не забыть кофе
    • +
+ +

Ссылки и картинки

+

Сайт Markdown

+

Сноска в тексте1.

+

Картинка «из коробки» — без размера и выравнивания:

+ 
![лис в рамках](img/html-images.png)
+

лис в рамках

+

Для сайта так часто мало: огромная PNG, не туда прижата. Тогда HTML — ниже.

+ +

Цитаты и код

+
+

Цитата.
Можно в несколько строк.

+
и даже вложенная
+
+ 
print("привет")
+ 
console.log("тоже привет");
+ +

Таблица

+ + + + + + + + +
КомандаЧто делает
#заголовок
* / -список
**жирный
`код
+ + + + + + + + + + + + + + + + + + + + +
влевоцентрвправо
abc
102030
+ +

Мелочи

+

Клавиша: Ctrl+Shift+V

+

Верхний/нижний индекс чистым md нет — это HTML: H2O, E = mc2.

+

Экранирование в md: пишем \* если нужен символ, а не курсив.

+

Автоссылка: https://cursor.com

+ +
+

HTML внутри Markdown

+

Когда md упирается — вставляем HTML. Зачем чаще всего: картинки. В чистом md нельзя сказать «ширина 240px, прижать вправо».

+ три кадра с лисом + +

Размер

+ 
<img src="img/html-images.png" alt="лиса" width="240">
+

Узко:

+ лиса узко +

Шире:

+ лиса шире +

Или стиль width: 40%:

+ лиса 40% + +

Выравнивание

+

По центру:

+

+ центр +

+

Вправо + подпись:

+

+ md
+ маленькая справа +

+

Обтекание текстом:

+ cursor +

Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float.

+
+ +

Ещё HTML

+
+ Спойлер (клик) +

Секрет: внутри md можно прятать длинноты. На сайте — тем более.

+
+

жёлтым и акцент

+

Правило: сначала md, HTML — точечно. Целую страницу лучше уже как этот сайт, а не внутри .md.

+ +
+

LaTeX — только формулы

+ доска с формулами +

LaTeX — целая система вёрстки научных текстов. Нам сегодня не это. В Markdown живёт кусок: математика в $...$ / $$...$$. Здесь на сайте то же самое рисует KaTeX.

+ +

В строке

+

Энергия: $E = mc^2$.

+

Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$.

+

Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$.

+

Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$.

+

Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$

+ +

Блоком

+ $$ + i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t) + = \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t) + $$ +

Система:

+ $$ + \begin{cases} + x + y = 1 \\ + x - y = 0 + \end{cases} + $$ +

Матрица:

+ $$ + \begin{pmatrix} + a & b \\ + c & d + \end{pmatrix} + \begin{pmatrix} x \\ y \end{pmatrix} + = + \begin{pmatrix} p \\ q \end{pmatrix} + $$ +

Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$

+ +
+

Mermaid

+ русалка рисует блок-схему +

Схемы текстом. Не лезем в Visio. На этой странице их рисует скрипт Mermaid.

+ +

Стрелки

+ 
+flowchart LR
+  A[Идея] --> B[Markdown]
+  B --> C[Превью]
+  C --> D[PDF / HTML]
+
+ +

Ветвление

+ 
+flowchart TD
+  Q{Нужен размер картинки?}
+  Q -->|нет| MD[Чистый md]
+  Q -->|да| HTML[Тег img]
+
+ +

Кто кому пишет

+ 
+sequenceDiagram
+  participant Я
+  participant Cursor
+  Я->>Cursor: открой превью
+  Cursor-->>Я: вот документ
+
+ +

Дальше: выгрузка и лёгкие картинки — блок 2.

+

1 Сноска. В pdf обычно тоже работает.

+ +
+ ← Блок 0. Cursor + Блок 2. Экспорт → +
+
+ + + + + + + + diff --git a/site/02.html b/site/02.html new file mode 100644 index 0000000..ad0184e --- /dev/null +++ b/site/02.html @@ -0,0 +1,97 @@ + + + + + + Блок 2. Экспорт и ffmpeg + + + +
+
+ Демо разметки + +
+
+ +
+

Блок 2. Экспорт и картинки для веба

+

md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.

+ PNG проходит пресс и становится WebP + +

Из 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.

+

Для доклада PDF — ок. Для сайта лучше HTML.

+ +

Mermaid

+

Расширение: Markdown Preview Mermaid Support (bierner.markdown-mermaid) — чтобы схемы из блока 1 рисовались в превью.

+

Без него блок mermaid так и останется серой простынёй.

+

Markdown PDF часто подхватывает mermaid, если превью его уже рисует. Экспортировал — открой PDF и проверь схемы.

+ +

Что ещё бывает

+ + + + + + + + +
Плагин / штукаЗачем
Markdown PDFбыстрый pdf/html из файла
Markdown Preview Mermaid Supportсхемы в превью
Markdown All in Oneоглавление, шорткаты
Pandocmd → docx/tex/html, если припрёт Word
+

Для сегодняшнего круга хватает Markdown PDF + Mermaid.

+ +

ffmpeg — картинки для вёрстки

+

ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.

+

Разбор «что это вообще такое» лучше смотреть тут (очень советую):

+

FFmpeg — крутое видео

+

Нам из всего комбайна — узкий кусок: для сайта. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем WebP.

+

Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.

+ + 
ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp
+ 
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качество, нормальный компромисс
+ +

Папку img_web создай заранее.

+ 
ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp
+ 
ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp
+

В HTML потом:

+ 
<img src="img_web/cover.webp" alt="обложка" width="800">
+

Исходники в img/ не трогаем — это «негатив». На страницу отдаём WebP.

+

Проверка: в терминале ffmpeg -version.

+

Дальше: кто напишет md за нас, если лень — блок 3.

+ +
+ ← Блок 1. Разметка + Блок 3. ИИ → +
+
+ + diff --git a/site/03.html b/site/03.html new file mode 100644 index 0000000..2078703 --- /dev/null +++ b/site/03.html @@ -0,0 +1,58 @@ + + + + + + Блок 3. ИИ + + + +
+
+ Демо разметки + +
+
+ +
+

Блок 3. ИИ для разметки

+

Смысл не в том, чтобы «нейросеть написала роман». Смысл в форматировании: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.

+

Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.

+ +

Почему именно форматирование

+

Задача тупая и чёткая: заголовки, списки, таблицы, формулы в $...$, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.

+

В бесплатном Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.

+

Примеры промптов, без церемоний:

+
    +
  • «приведи этот файл к нормальному Markdown: заголовки, списки, таблица»
    • +
  • «формулы оберни в $...$ / $$...$$»
    • +
  • «сделай mermaid-схему процесса из абзаца ниже»
    • +
  • «замени жирные картинки на <img width=...> по центру»
    • +
+

Кидаешь черновик в чат или @файл — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».

+ +

Если лимиты Cursor кончились

+

Тот же черновик можно отнести наружу:

+
    +
  • Gemini
    • +
  • ChatGPT (GPT)
    • +
+

Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.

+

Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.

+

ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.

+

Про то, как не плодить десять «финальных» копий — блок 4.

+ +
+ ← Блок 2. Экспорт + Блок 4. Git → +
+
+ + diff --git a/site/04.html b/site/04.html new file mode 100644 index 0000000..1e7072e --- /dev/null +++ b/site/04.html @@ -0,0 +1,55 @@ + + + + + + Блок 4. Git + + + +
+
+ Демо разметки + +
+
+ +
+

Блок 4. Git — зачем, без команд

+ слева каша файлов Word, справа спокойное дерево версий + +

Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.

+

Имена, которые все видели:

+ 
презентация_финал_конец_финал2_теперь_точно.docx
+

Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.

+ +

Чем git лучше (хотя порог выше)

+

Git хранит историю, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.

+

Зачем это нам, раз документы — Markdown:

+
    +
  • md — текст. Git видит строки, не бинарный комбайн Word.
    • +
  • можно ветки: ты пилишь раздел, коллега — другой, потом склеить.
    • +
  • рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался».
    • +
  • откат: «как было в прошлый четверг» — не археология папки Загрузки.
    • +
+

Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.

+ +

Что взять с собой

+

Сегодня не учим команды. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).

+

Освоил git + Markdown — документы живут как код. Почта с финал3.docx становится смешной.

+

Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, зачем.

+ +
+ ← Блок 3. ИИ + Содержание → +
+
+ + diff --git a/site/css/style.css b/site/css/style.css new file mode 100644 index 0000000..40e6261 --- /dev/null +++ b/site/css/style.css @@ -0,0 +1,200 @@ +:root { + --bg: #f6f1e8; + --paper: #fffaf3; + --ink: #1f2a2e; + --muted: #5c6a70; + --teal: #1f7a72; + --teal-d: #155e58; + --coral: #c45c26; + --line: #e4d9c8; + --code-bg: #243033; + --code-fg: #e8efe8; +} + +* { box-sizing: border-box; } + +html, body { + margin: 0; + padding: 0; + background: var(--bg); + color: var(--ink); + font: 18px/1.55 "Segoe UI", "PT Sans", sans-serif; +} + +a { color: var(--teal-d); } +a:hover { color: var(--coral); } + +.wrap { + max-width: 820px; + margin: 0 auto; + padding: 0 20px 64px; +} + +.nav { + position: sticky; + top: 0; + z-index: 5; + background: rgba(246, 241, 232, 0.94); + border-bottom: 1px solid var(--line); + backdrop-filter: blur(8px); +} + +.nav-inner { + max-width: 960px; + margin: 0 auto; + padding: 10px 16px; + display: flex; + flex-wrap: wrap; + gap: 8px 14px; + align-items: center; +} + +.brand { + font-weight: 700; + text-decoration: none; + color: var(--ink); + margin-right: 8px; +} + +.nav-inner nav { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.nav-inner nav a { + text-decoration: none; + font-size: 14px; + padding: 4px 10px; + border-radius: 999px; + color: var(--muted); +} + +.nav-inner nav a:hover, +.nav-inner nav a.current { + background: #e7f3f1; + color: var(--teal-d); +} + +h1, h2, h3, h4 { line-height: 1.25; } +h1 { font-size: 2rem; margin: 1.2em 0 0.5em; } +h2 { font-size: 1.45rem; margin-top: 1.6em; } +h3 { font-size: 1.15rem; } + +.lead { font-size: 1.15rem; color: var(--muted); } + +img.hero, +.content img { + max-width: 100%; + height: auto; + border-radius: 12px; +} + +img.hero { display: block; margin: 8px 0 24px; } + +.content img { margin: 8px 0; } + +.card-list { + list-style: none; + padding: 0; + margin: 28px 0; +} + +.card-list li { + background: var(--paper); + border: 1px solid var(--line); + border-radius: 12px; + margin: 0 0 12px; +} + +.card-list a { + display: block; + padding: 14px 16px; + text-decoration: none; + color: inherit; +} + +.card-list a:hover { background: #e7f3f1; } +.card-list strong { color: var(--teal-d); } +.card-list span { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 4px; } + +table { + border-collapse: collapse; + width: 100%; + background: var(--paper); + margin: 12px 0 20px; +} + +th, td { + border: 1px solid var(--line); + padding: 8px 10px; + text-align: left; +} + +th { background: #efe6d8; } + +pre, code { + font-family: Consolas, "Cascadia Mono", monospace; +} + +code { + background: #efe6d8; + padding: 0.1em 0.35em; + border-radius: 4px; + font-size: 0.9em; +} + +pre { + background: var(--code-bg); + color: var(--code-fg); + padding: 14px 16px; + border-radius: 10px; + overflow: auto; +} + +pre code { background: none; color: inherit; padding: 0; } + +blockquote { + margin: 12px 0; + padding: 4px 0 4px 16px; + border-left: 4px solid var(--teal); + color: var(--muted); +} + +hr { + border: 0; + border-top: 1px solid var(--line); + margin: 28px 0; +} + +.pager { + display: flex; + justify-content: space-between; + gap: 12px; + margin-top: 40px; + padding-top: 16px; + border-top: 1px solid var(--line); +} + +.pager a { + text-decoration: none; + font-weight: 600; +} + +kbd { + font-family: inherit; + border: 1px solid var(--line); + background: #fff; + padding: 0 6px; + border-radius: 4px; + box-shadow: 0 1px 0 var(--line); +} + +.footnote { font-size: 0.9rem; color: var(--muted); } + +.mermaid { background: var(--paper); padding: 12px; border-radius: 10px; } + +@media (max-width: 640px) { + .nav-inner nav a { font-size: 13px; padding: 4px 8px; } + h1 { font-size: 1.6rem; } +} diff --git a/site/img/cursor-intro.png b/site/img/cursor-intro.png new file mode 100644 index 0000000..37f5d8b Binary files /dev/null and b/site/img/cursor-intro.png differ diff --git a/site/img/ffmpeg-webp.png b/site/img/ffmpeg-webp.png new file mode 100644 index 0000000..40f99ae Binary files /dev/null and b/site/img/ffmpeg-webp.png differ diff --git a/site/img/git-vs-word.png b/site/img/git-vs-word.png new file mode 100644 index 0000000..3dab19b Binary files /dev/null and b/site/img/git-vs-word.png differ diff --git a/site/img/html-images.png b/site/img/html-images.png new file mode 100644 index 0000000..9efcbef Binary files /dev/null and b/site/img/html-images.png differ diff --git a/site/img/latex-board.png b/site/img/latex-board.png new file mode 100644 index 0000000..ecde65f Binary files /dev/null and b/site/img/latex-board.png differ diff --git a/site/img/markdown-hero.png b/site/img/markdown-hero.png new file mode 100644 index 0000000..61d9c25 Binary files /dev/null and b/site/img/markdown-hero.png differ diff --git a/site/img/mermaid-pun.png b/site/img/mermaid-pun.png new file mode 100644 index 0000000..f48f5c4 Binary files /dev/null and b/site/img/mermaid-pun.png differ diff --git a/site/img/site-index-hero.png b/site/img/site-index-hero.png new file mode 100644 index 0000000..ab3fb54 Binary files /dev/null and b/site/img/site-index-hero.png differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..f7e6b2b --- /dev/null +++ b/site/index.html @@ -0,0 +1,68 @@ + + + + + + Демо разметки — содержание + + + +
+
+ Демо разметки + +
+
+ +
+

Содержание

+

Небольшой сайт по блокам демо. Листай сверху или карточки ниже.

+ Книга, которая становится сайтом с оглавлением + +
    +
  1. + + Блок 0. Cursor + Зачем редактор, совсем коротко. Потом будет подробнее. + +
    2. +
  2. + + Блок 1. Языки разметки + Markdown, HTML внутри md, формулы, простой Mermaid. + +
    3. +
  3. + + Блок 2. Экспорт и ffmpeg + PDF/HTML из md, плагины, картинки в WebP для сайта. + +
    4. +
  4. + + Блок 3. ИИ + Форматирование документов: Cursor, а если лимиты кончились — Gemini / GPT. + +
    5. +
  5. + + Блок 4. Git + Почему это лучше бесконечных «финал2.docx». Без команд. + +
    6. +
+ +
+ + Блок 0. Cursor → +
+
+ + diff --git a/команды ffmpeg.txt b/команды ffmpeg.txt new file mode 100644 index 0000000..21e6838 --- /dev/null +++ b/команды ffmpeg.txt @@ -0,0 +1,2 @@ +ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp +ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp \ No newline at end of file diff --git a/перезапускpowershell.txt b/перезапускpowershell.txt new file mode 100644 index 0000000..79d3b7c --- /dev/null +++ b/перезапускpowershell.txt @@ -0,0 +1 @@ +$env:Path = [System.Environment]::GetEnvironmentVariable("Path", "Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path", "User") \ No newline at end of file