Перейти к основному содержимому

Интерактив

Текст в энциклопедии дополняется интерактивом: более четырёхсот кастомных React-компонентов встроены прямо в статьи. Это не сторонние виджеты и не скриншоты — эмуляторы Office и терминала, пошаговые визуализаторы алгоритмов, схемы сети и инфраструктуры, тренажёры SQL и Git, игровые мини-демо и многое другое. Можно нажимать, переключать режимы и сразу видеть, как устроена тема.

Ниже — витрина лучших демо в порядке возрастания сложности: сначала раздел «Основы», затем система и сеть, данные, код, языки, ИИ, проект и инфраструктура. Полный каталог привязан к статьям энциклопедии; здесь — ориентиры, с которых удобно начать.

Полный реестр компонентов ведётся в репозитории (info/demo-registry.md). На сайте каждое демо живёт в своей статье — откройте ссылку под блоком, чтобы углубиться.


1. Основы

Карта клавиатуры

Тренажёр раскладки, зон и сочетаний — полезен новичкам до углубления в ОС.

Статья: Советы для новичка

Загрузка клавиатуры…

Устройства ввода-вывода

Как данные попадают в компьютер и обратно — мышь, клавиатура, диск, сеть.

Статья: Базовые операции с данными

Загрузка интерактивного демо…

Типы данных

Биты, числа, строки и логика представления — фундамент перед программированием.

Статья: Данные и информация

Загрузка интерактивного демо…

Архитектура ПК

Процессор, память, накопители и периферия в одной наглядной схеме.

Статья: Архитектура персонального компьютера

Загрузка спектакля…

Компилятор и интерпретатор

Как исходный код превращается в исполняемую программу.

Статья: Программа

Загрузка интерактивного демо…

Дорожная карта изучения

Интерактивное дерево всех разделов энциклопедии и рекомендуемый маршрут.

Статья: Дорожная карта изучения

Загрузка дорожной карты…

Визуальные блоки кода

Сборка простых программ из блоков — мост к текстовому коду.

Статья: Основные языки

Загрузка интерактивного демо…

Веб-приложение: фронт и бэк

Запросы, слои и роли клиента и сервера.

Статья: Фронтенд и бэкенд

Загрузка демо архитектуры…

IT-английский

Три режима: карточки с переворотом, викторина и ввод перевода. Прогресс сохраняется в браузере; слова берутся из учебного плана и таблицы в статье.

Статья: Ключевые термины и фразы

Хаб тренажёров

SQL, терминалы, Git, Docker и практика — переключение категорий без перезагрузки страницы. Можно открыть с якорем, например #practice/english.

Страница: Лаборатория → Тренажёры

Загрузка тренажёров…

2. Система и сеть

Сетевой стек

Уровни от приложения до канала — как пакет проходит по стеку.

Статья: Сеть и интернет

Загрузка демо…

HTTP-запрос

Разбор заголовков, метода, тела и ответа сервера.

Статья: Как работают сайты

Загрузка интерактивного демо…

3. Данные и разметка

HTML-песочница

Живое редактирование разметки и просмотр результата.

Статья: HTML

Загрузка HTML-песочницы…

SQL JOIN

Пошаговый тренажёр соединений таблиц.

Статья: SQL

Загрузка SQL-тренажёра…

Просмотр схемы БД

Имитация подключения к СУБД и ER-диаграмма таблиц с внешними ключами — по мотивам Database Schema Viewer.

Статья: Основы баз данных

Загрузка просмотрщика схемы…

4. Код и разработка

Визуализатор алгоритма

Пошаговое выполнение кода с подсветкой строк.

Статья: Что такое код

Загрузка интерактивного демо…

Git

Ветки, коммиты и слияния в безопасной песочнице.

Статья: Основы Git

Загрузка Git Emulator…

Schema Maker — свободные схемы

Лёгкий редактор блок-схем и эскизов: фигуры, связи, рисование от руки, экспорт PNG / PDF / JSON. По мотивам отдельного проекта Schema Maker.

Статья: Проектирование и архитектура

Загрузка редактора схем…

ArchiStyler — планировщик классов

UML-диаграмма, шаблоны паттернов (MVP, Strategy, Repository, слои), роли классов и превью C# / Java.

Статья: Основы архитектуры

Загрузка ArchiStyler…

5. Программирование

Bash-оболочка

Команды, пайпы и сценарии в интерактивном терминале.

Статья: Bash

Загрузка Bash…

6. Искусственный интеллект

Нейросеть

Слои, веса и прохождение сигнала через сеть.

Статья: Нейросети

Загрузка интерактивного демо…

ИИ-агент

Цикл восприятия, рассуждения и действий агента.

Статья: Модели и инструменты

Загрузка симулятора агента…

7. Проект

Основы тестирования

Уровни и виды проверок качества ПО.

Статья: Тестирование

Загрузка демо тестирования…

BPMN

Справочник нотации и построение процессов.

Статья: Аналитика

Загрузка справочника BPMN…

ArchiStyler — классы и паттерны

Сборка архитектуры из классов: связи, шаблоны GoF, генерация кода.

Статья: Паттерны проектирования

Загрузка ArchiStyler…

8. Инфраструктура и безопасность

Диаграмма инфраструктуры

Сборка схемы сервисов, балансировки и масштабирования.

Статья: Микросервисы и интеграция

Загрузка студии моделирования…

Docker Compose

Сервисы, сети и зависимости в одном стеке.

Статья: Контейнеризация

Загрузка Compose…

CI/CD: слои проверок

Конвейер сборки, тестов и выкладки.

Статья: DevOps и CI/CD

Загрузка интерактивного демо…

Как искать демо дальше
Откройте любой раздел энциклопедии с карты на главной или по дорожной карте — интерактивные блоки стоят там, где они помогают понять тему, а не ради украшения.

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).