Циклопедия:А я был в гипертекстовом вики-городе

Это эссе для вас, дорогие дети, если вы впервые для себя открыли что в вики-проекте существуют некие CSS, JS и хотите знать чем они занимаются. А для самых любознательных — дополнительная обзорная экскурсия.

Нулевой уровень: за кулисами Циклопедии

Когда вы заходите на страницу одной из нескольких своих любимых вики-энциклопедий, то наблюдаете привычную картину: стройные колонки текста, удобное меню, аккуратные заголовки. Но за этим внешним спокойствием скрывается сложный механизм. То, что вы видите в браузере — это результат работы трёх китов современного интернета: HTML, CSS и JavaScript.

HTML (англ. HyperText Markup Language — язык разметки гипертекста) — это набор команд, которые говорят браузеру: «Вот это — заголовок, вот это — ссылка, а вот это — картинка».

Если бы мир состоял только из HTML, сайты выглядели бы как документы: белый фон, чёрный текст, огромные картинки одна под другой. Всё уныло и строго по полочкам, но без души. Если HTML это «костяк» страницы, то два других языка отвечают за красоту и интерактивность. Давайте разберёмся.

🎨 CSS: Художник виртуального мира

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это язык, который отвечает за внешний вид. Если представить, что HTML-страница — это дом, построенный из блёклых бетонных блоков, то CSS — это дизайнер интерьера и маляр в одном лице. Он красит стены, вешает люстры, выбирает обои и расставляет мебель.

В вебе CSS управляет буквально всем, что касается внешности:

• Цвета и шрифты: Делает ссылки на существующие статьи синими, а ссылки на несуществующие — красными, исполняя запрос от HTML. Или рисует одни заголовки больше других.
• Расположение: Строит текст в колонки, центрирует картинки, создает отступы между абзацами.
• Адаптация: Именно CSS следит за тем, чтобы страница одинаково хорошо выглядела на огромном мониторе компьютера и на маленьком экране смартфона.

Главный секрет CSS — каскадность. Почему язык называется Cascading (каскадные таблицы стилей)? Потому что правила накладываются друг на друга, как слои краски.

Зачем CSS в Вики?

Представьте, что в каждой статье Циклопедии авторам пришлось бы вручную указывать, каким цветом делать ссылки и какого размера должен быть заголовок. Это был бы хаос. CSS позволяет один раз написать правила для всего сайта. Благодаря глобальным таблицам стилей (CSS-файлам) все статьи выглядят единообразно. А если разработчики решат обновить дизайн (например, сделать ссылки не синими, а зелёными), им достаточно изменить одну строчку в CSS-файле, и она применится к тысячам страниц автоматически.

⚡ JavaScript: Волшебник, оживляющий страницы

Если HTML — это градоначальник, а CSS — художник, то JavaScript (JS) — волшебник. Это язык программирования, который заставляет страницы двигаться, реагировать на действия пользователя и обмениваться данными с сервером без перезагрузки.

Без JavaScript страница была бы статичной, как страница книги. С ним она становится приложением.

Что умеет JavaScript?

• Реагировать на действия: Открывать спойлеры при клике, показывать всплывающие подсказки при наведении мыши, проверять правильность заполнения формы поиска.
• Создавать анимацию: Плавное выпадающее меню, «живые» графики и диаграммы.
• Работать в фоне: Подгружать новые материалы, когда вы листаете страницу (как в соцсетях), не перезагружая всю страницу.

Зачем JS в википроекте?

На первый взгляд Циклопедия кажется очень статичной. Но попробуйте нажать кнопку «Править» или начать печатать в строке поиска. Вы увидите, как браузер начнет предлагать вам варианты названий статей, не перезагружая страницу. Это работа JavaScript. Вот где он применяется:

1. Умный поиск: Мгновенные подсказки при вводе текста в поисковую строку.
2. Редактор: Удобная панель инструментов при редактировании статей (кнопки «жирный», «курсив», вставка ссылок) работает на JS.
3. Сворачиваемые блоки: Оглавление в больших статьях или блоки с примечаниями, которые можно свернуть, чтобы они не занимали место.
4. Карты и графики: Интерактивные элементы, которые можно двигать или наводить на них курсор.

Ещё код, написанный на JS, можно запускать самому в личке. Но, как всякая магия не в тех руках, волшебная палочка JavaScript-а может принести и разрушения, придётся тогда чинить сломанное (вплоть до восстановления сайта из бэкапа сервера, если это совершил кто-то из обладателей расширенных прав), поэтому использовать JS нужно осмотрительно и не размещать у себя непроверенные коды из внешних источников. Помните, наверное, что молодильное яблочко, предложенное Белоснежке неизвестной старушкой, оказалось отравленным. Пусть в итоге всё кончилось хорошо, но семь гномов, потеряв на время Белоснежку, всё же изрядно огорчились.

Добрые помощники

Таким образом, CSS и JavaScript — это не просто модные слова, а необходимые инструменты, делающие наше пребывание в Циклопедии комфортным.

• CSS заботится о глазах, делая текст читаемым, а интерфейс — понятным.
• JavaScript заботится о времени, позволяя быстро находить нужное и удобно редактировать статьи.

Без них википроект был бы серым, скучным и крайне неудобным. Так что в следующий раз, читая статью об исторических битвах или физических законах, вспомните, что помимо десятков авторов-людей, над вашим комфортом потрудились ещё и сотни строк красивого кода.

Уровни глубже нулевого

Не утомился? Тогда давай пойдём по нашему вики-городу и заглянем в его фундаменты и подвалы! Мы разобрали фронтенд (то, что работает в браузере: HTML, CSS, JS). Однако, самые интересные и мощные языки живут на сервере, а есть и те, которые прячутся внутри шаблонов и приходят вместе с ботами.

Продолжим нашу экскурсию с городских подземелий, которые хранят для Циклопедии полноту всей информации сайта. Их можно сравнить с драконом и его верным гоблином, владеющими доступом в святое святых — Городской Архив-Библиотеку или базу данных.

🗄️ Уровень 1: Бэкенд (Серверная часть)

Когда вы открываете страницу, браузер шлет запрос на сервер Циклопедии. Там происходит основная работа: поиск статьи в базе данных, проверка прав доступа, сборка актуальной версии текста.

PHP — стотысячеглавый король-дракон, притом отнюдь не злой.

PHP (англ. Hypertext Preprocessor — препроцессор гипертекста) — это основа основ жизни города. На нём стоят здания и каждая голова проникла в каждый дом, прикинувшись горгульей. На нём написан сам движок MediaWiki.

Что он делает?

• Генерирует финальную HTML-страницу именно для вас.
• Берёт текст статьи из базы данных и вставляет его в шаблон.
• Обрабатывает действия: «Править», «Сохранить», «История».
• Проверяет, существует ли страница, чтобы поставить правильный класс для ссылки (красный/синий).

PHP работает на сервере, и вы его никогда не увидите в браузере — он присылает уже готовый результат

🗄️ Уровень 2: Базы данных (Хранилища)

PHP — мудрый дракон, но древний, а потому забывчивый. Чтобы помнить все статьи, ему нужен «архив».

И архивариус — SQL — гоблин-хранитель баз данных (также база данных у специалистов по гоблинам известна как «СУБД»).

SQL (англ. Structured Query Language — язык структурированных запросов) — это язык запросов к базам данных. MediaWiki использует MySQL или MariaDB (ибо SQL — не имя, а должность, на которую претендуют несколько кандидатов).

Что он делает?

Когда PHP нужно получить текст статьи «Солнце», он не читает файлы на диске, а отправляет SQL-запрос:

sql

SELECT old_text FROM text WHERE old_id = 12345;

Это значит: «Дай мне текст из записи под номером 12345». База данных находит текст и отдаёт его PHP. Это невероятно быстро даже для миллионов статей.

Жаль, что SQL иногда падает в обморок. Главное, чтобы не помер, иначе это может быть непоправимая, утрата для всего вики-города, который от этого гибнет, если не имеет бэкапа (полной архивной копии в другом месте). Иногда причина — нехватка либо оперативной памяти, либо места на диске, загрузка процессора на 100%, размещение неэффективного кода, который посылает кучу ненужных запросов к базе, мешая доступу остальным, дедлок (конфликт зацикливания), ошибки в настройках или же бегущий в посудную лавку слон случайно пнул сервер с разбегу.

⛲ Шаблоны и Логика внутри вики

А вот тут нечто блестящее. Оказывается на площадях вики-города есть бьющие фонтаны и в них обитают русалки Lua — это тоже язык программирования, свой для всех прохожих и доступный обычным редакторам.

Lua — очень грамотные русалки, то есть — умные шаблоны.

Вы замечали сложные карточки (например, в статье о человеке — дата рождения, место, род деятельности)? Раньше их делали на «вики-шаблонах», которые были очень медленными. Теперь для этого используют язык Lua.

Что они делают?

• Сложные расчёты (например, подсчёт возраста на основе даты рождения).
• Работу с датами и числами в карточках.
• Логику типа: «Если в статье указана Франция, покажи флаг Франции, а если США — флаг США».

Lua запускается внутри MediaWiki (часто через расширение Scribunto) и делает вики-страницы в разы быстрее. Если увидишь строчку типа {{#invoke:...}} — это и есть вызов Lua-модуля.

Однако, если начать перекладывать плитку за плиткой в популярных среди населения шаблонах-фонтанах, совершая массу правок за малое время, то можно прогневить русалок и вызвать настоящее наводнение. Если система водоотведения слабая, иногда с такой нагрузкой не справляется, поэтому жизнь города на некоторое время может даже остановиться.

🛠️ Посторонние но мощные инструментарии

Это гости вики-города — зверолюды-робототехники из окрестных пещер, которые нанимаются в полицейские, пожарные, санитары. Они же — языки программирования, на которых написаны программы, помогающие следить за порядком или править тысячи страниц разом.

Например, Python — очень популярный язык для написания скриптов и ботов на устройстве самого пользователя. Он породил Pywikibot — фреймворк. Страшное слово, но на самом деле это просто коробка с чудо-пазлами. Если ты хочешь построить робота-слугу, ты просто берешь готовые детали из коробки с надписью Pywikibot. Нужно шесть рук — пожалуйства, вместо ног — колёса — без проблем. Остаётся только собрать их в нужном порядке и сказать: «А теперь делай вот так!» Простой пример: допустим, в Циклопедии кто-то совершенно случайно заменил все слова «собака» на «милый пёсик». Мило, но неэнциклопедично. Обычный редактор будет заходить в каждую статью и исправлять название руками. Это очень долго и скучно. А программист берет Pywikibot и пишет коротенькую инструкцию (на языке Python):

1. Найди все статьи, в названии которых есть слово «милый пёсик».
2. Зайди в каждую. Переименуй обратно в «Собака».

Робот запускается и начинает своё рутинное дело. Через час вся неуместная милота исправлена, а программист уже играет в приставку, потому что его работу сделал железный друг.

Чем ещё полезен Python?

• Боты на Python бегают по вики и исправляют опечатки в тысячах статей автоматически.
• Ставят категории.
• Ищут ссылки на несуществующие файлы.
• Массово создают однотипные статьи (например, о всех населённых пунктах района).

А есть ведь ещё C++ и Huggle

C++ — мощный язык для быстрых программ. На нём написан Huggle — программа для патрулирования свежих правок .

Что он делает?

Huggle в реальном времени может показать все правки на вики и позволяет опытным участникам одним кликом откатывать вандализм. C++ нужен здесь для максимальной скорости.

А также C# и AutoWikiBrowser

C# — язык от Microsoft. На нём написан AutoWikiBrowser (AWB) — это, пожалуй, самая известная программа для полуавтоматического редактирования вики из-под под компьютерной операционной системы Windows.

Что он делает?

• Помогает быстро находить и заменять текст по регулярным выражениям.
• Проверяет ссылки.
• Форматирует статьи под стандарты.

Не конец

Вкратце: данных базовых познаний для понимания нашего полусказочного вики-города на первые пару дней достаточно. А дальше — черпайте знания из авторитетных серьёзных источников, если пожелаете когда-нибудь стать в этом городе техником, ботоводом, мастером интерфейса или даже сисадмином.