spirzen/it-knowledge-base: Огромная энциклопедия по информационным технологиям. Компьютерная, цифровая, сетевая грамотность, языки, данные, структуры, интеграции, архитектура, микросервисы, контейнеризация, оркестрация и всё такое.

src/components/shared/beginnerWebStackData.js
137 строк6 KB
Spirzen
Кавычки 2
26 май 2026, 23:25
26 май 2026, 23:257d44b4c
/** Метаданные языков для учебного хаба веб-стека. */

export const WEB_STACK_LANGUAGES = [
  {
    id: 'html',
    label: 'HTML',
    icon: '📄',
    color: '#e44d26',
    where: 'Браузер (у пользователя)',
    runsOn: 'client',
    role: 'Структура и смысл страницы: заголовки, абзацы, ссылки, формы.',
    metaphor: 'Скелет и подписи в музее — что за объект и где он стоит.',
    firstLine: '<h1>Привет, мир!</h1>',
    fileExt: '.html',
    pitfalls: [
      'HTML не "рисует красиво" — только размечает; оформление даёт CSS.',
      'Теги нужно закрывать: <p>текст</p>, а не оставлять <p> открытым.',
    ],
    articlePath: '/encyclopedia/3-data-markup/3-09-html/1',
    firstProgramLang: null,
  },
  {
    id: 'css',
    label: 'CSS',
    icon: '🎨',
    color: '#264de4',
    where: 'Браузер (у пользователя)',
    runsOn: 'client',
    role: 'Внешний вид: цвета, шрифты, отступы, сетка, анимации.',
    metaphor: 'Одежда и декор для скелета — без HTML не к чему применять стили.',
    firstLine: 'h1 { color: #264de4; }',
    fileExt: '.css',
    pitfalls: [
      'Селектор должен попадать в элемент: .класс и #id пишутся без пробелов.',
      'Специфичность: inline-стиль сильнее класса, класс — сильнее тега.',
    ],
    articlePath: '/encyclopedia/3-data-markup/3-10-css/1',
    firstProgramLang: null,
  },
  {
    id: 'javascript',
    label: 'JavaScript',
    icon: '⚡',
    color: '#f7df1e',
    where: 'Браузер; также Node.js на сервере',
    runsOn: 'both',
    role: 'Поведение на странице: клики, проверка форм, запросы без перезагрузки.',
    metaphor: 'Электрика в доме — свет включается, дверь открывается по кнопке.',
    firstLine: 'console.log("Привет!");',
    fileExt: '.js',
    pitfalls: [
      'JavaScript ≠ Java — разные языки, не сокращайте в разговоре с работодателем.',
      'let/const вместо устаревшего var в современном коде.',
    ],
    articlePath: '/encyclopedia/5-languages/5-01-javascript/1',
    firstProgramLang: 'javascript',
  },
  {
    id: 'python',
    label: 'Python',
    icon: '🐍',
    color: '#3776ab',
    where: 'Компьютер ученика или сервер (не в браузере страницы)',
    runsOn: 'server',
    role: 'Универсальный язык: скрипты, анализ данных, бэкенд, обучение.',
    metaphor: 'Блокнот с чёткими правилами — читается почти как обычный текст.',
    firstLine: 'print("Привет, мир!")',
    fileExt: '.py',
    pitfalls: [
      'Отступы (пробелы) — часть синтаксиса, их нельзя смешивать с табами.',
      'Версия 2 устарела; учите Python 3.',
    ],
    articlePath: '/encyclopedia/5-languages/5-02-python/16',
    firstProgramLang: 'python',
  },
  {
    id: 'php',
    label: 'PHP',
    icon: '🐘',
    color: '#777bb4',
    where: 'Веб-сервер (пользователь видит только результат)',
    runsOn: 'server',
    role: 'Генерация HTML на сервере, формы, CMS (WordPress и др.).',
    metaphor: 'Повар на кухне — гость получает готовое блюдо (HTML), рецепт не видит.',
    firstLine: '<?php echo "Привет!"; ?>',
    fileExt: '.php',
    pitfalls: [
      'Код PHP не попадает в браузер — только вывод echo и HTML.',
      'Всегда экранируйте пользовательский ввод при выводе в HTML (XSS).',
    ],
    articlePath: '/encyclopedia/5-languages/5-07-php/1',
    firstProgramLang: 'php',
  },
];

export const SYNTAX_COMPARE_ROWS = [
  {
    id: 'hello',
    label: 'Привет, мир',
    hint: 'Первая программа — вывод текста.',
    js: 'console.log("Привет!");',
    python: 'print("Привет!")',
    php: '<?php echo "Привет!"; ?>',
  },
  {
    id: 'var',
    label: 'Переменная',
    hint: 'Имя для значения, которое можно менять.',
    js: 'let age = 12;\nage = 13;',
    python: 'age = 12\nage = 13',
    php: '$age = 12;\n$age = 13;',
  },
  {
    id: 'if',
    label: 'Условие',
    hint: 'Выполнить блок только если условие истинно.',
    js: 'if (score >= 60) {\n  console.log("Сдал");\n}',
    python: 'if score >= 60:\n    print("Сдал")',
    php: 'if ($score >= 60) {\n    echo "Сдал";\n}',
  },
  {
    id: 'loop',
    label: 'Цикл',
    hint: 'Повторить действие несколько раз.',
    js: 'for (let i = 0; i < 3; i++) {\n  console.log(i);\n}',
    python: 'for i in range(3):\n    print(i)',
    php: 'for ($i = 0; $i < 3; $i++) {\n    echo $i;\n}',
  },
];

export const TEACHING_PATH = [
  {step: 1, label: 'HTML', text: 'Разметка: что на странице и в каком порядке.'},
  {step: 2, label: 'CSS', text: 'Оформление: цвета, размеры, расположение блоков.'},
  {step: 3, label: 'JavaScript', text: 'Реакция на действия пользователя в браузере.'},
  {step: 4, label: 'Python', text: 'Логика вне браузера: файлы, расчёты, автоматизация.'},
  {step: 5, label: 'PHP', text: 'Сервер собирает HTML перед отправкой в браузер.'},
];