Здравствуйте, уважаемые читатели и случайные посетители wmbn.ru! Сегодняшний пост хотелось бы посвятить моему эксперименту в изучении WIKI разметки. Термин WIKI (ВИКИ) очень напоминает всеми любимую свободную некоммерческую энциклопедию интернета — Вивипедию (Wikipedia). Ну да, начало схоже, но и не только начало, сам механизм создания страниц в Википедии использует ВИКИ разметку, а если быть точнее, то движок MediaWIKI.

Использование ВИКИ разметки в интернете

С помощью такой разметки и движка, зарегистрированный пользователь может без особого труда создать свой материал на википедии, а так же изменить группу в социальной сети ВКонтакте (VK), сделав из простого шаблонного сообщества свой «уникальный» сайт, который можно дополнить различными иконками, изображениями и прочими дополнениями. Такая реализация подойдет для сообществ различных чатов, а так же и форумов (хотя это маловероятно).

Вики (Wiki) разметка. Что такое и для чего нужна

Немного о том, что такое Вики разметка и когда она может пригодиться. Как вы уже догадались, это такая же разметка страниц, как и HTML, по крайней мере оба нужны для верстки страниц. Если же для HTML достаточно блокнота, то для Вики сайта потребуется целый движок, к примеру тот же MediaWIKI на Википедии.

Википедия (Wikipedia) - сайт на вики разметке

Если вдаваться в саму суть «идеологии» Вики, то это банальная замена популярного HTML, без которой практически ни один сайт не живет (возможные исключения — Flash сайты). Однако под банальностью, как бы глупо это не звучало, скрывается достаточно мощный комплекс страничной разметки веб сайта. Хотя, все же из-за множества сходств мощный комплекс будет только словах.

MediaWiki - движок для Вики (Wiki) сайтов

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

Создание своей страницы в энциклопедии Wikipedia

Разберем создание своей первой Wiki страницы на энциклопедии Wikipedia. Что сразу понравилось — есть удобный WYSIWYG редактор (если он таковым и является), а так же все коды и символы. Сразу оговорюсь, что запись добавить можно только после регистрации в Википедии, поэтому те, кто еще не зарегистрировался, можно сделать это и стать участников сообщества Wiki.

Для примера возьмем тему сайтостроения и сравним некоторые универсальные движки для сайтов. Пусть это будут Drupal, Joomla и ModX, с которыми мне приходилось работать (с последними двумя не так долго и усердно). В основное поле пишем текст, который в последствии будет обрамлен шрифтом (стилем).

Но прежде чем продолжить, сделаю небольшой обзор редактора Wiki. Выполнен он как и все ранее встречавшиеся мне редакторы, однако он довольно простой и его удобство лишь в том, что не надо вбивать теги. Увидеть то, что получится после можно только на предварительном просмотре.

Дополнительные символы в Вики

На панели редактора Wiki отображены лишь иконки форматирования (Жирный и курсивный текст), вставка файла, подписи с временем и сноска. Есть три раскрывающихся окна — Дополнительно, Спецсимволы и Справка. Разберем первый из них — Дополнительно. Он скрывает в себе продолжение форматирования текста и его редактирования. То есть возможность создания заголовков различных уровней, вставка нумерованного и маркированного списка, добавление отступов, изменение шрифта и его типа, добавление изображения и создание таблицы.

Символы в Вики

Далее идут спецсимволы, которые доступны для различных языков. Их вы не найдете на клавиатуре, даже те, которые относятся к кириллице. Возможно для них и есть горячие клавиши, но не думаю что о них кто-то знает, особенно про все символы. Выход есть — использовать клавиатуру от Артемия Лебедева, которая программируется под нужды дизайнеров и верстальщиков.

Панель справки в Вики редакторе

Осталось рассмотреть справку, в которой для каждого Wiki тега показано описание. Всего таких тегов (их типов) 7 штук и для каждого представлено свое описание. Сделали конечно удобно, ибо обозначение Что вы вводите и Что вы получаете как-то ближе к людям, которые в Вики не сильны или вообще не знают (не знали) что это такое. Строчить текст по тегам тут придется, так как это лишь окно ввода без каких-либо представлений, которые есть к примеру в TinyMCE (стандартный редактор WordPress).

Продолжим создание своей записи (страницы) в редакторе Wikipedia. Введенный текст обрамим выделением жирного и курсива, которые соответствуют вики тегам »’Жирный текст в Wiki»’ , »Курсив текста в Wiki». Так же сделаем заголовок, который создается с помощью символов === Заголовок ===. По количеству символов = можно определить какой уровень у заголовка статьи или абзаца.

Редактор Вики в Википедии

Реализация списков в Wiki разметке сделана ну очень отлично, так как нет необходимости открывать и закрывать теги, а так же добавлять пункты. Маркированный список создается с помощью символа *, а нумерованный #. Достаточно оформить текст в виде # Пункт 1, и появиться первый пункт нумерованного списка.

Остался последний этап создания записи в Википедии с помощью Вики — это таблицы. Вот с ними то и будут проблемы, так как их реализация в Вики схожа с HTML, разве что слова на символы поменяли. Хотя и есть некоторые различия, но они никак не облегчили то рутинное создание таблицы в HTML своим движком. Начинается вся таблица со строки (в подсветке не было Wiki):

{| class="wikitable"

Затем создается строка:

|-

Вот так задается заголовок для столбцов таблицы:

! Текст заголовка !!

А вот так ячейки:

| Текст ячейки ||

После всех пунктов таблица закрывается:

|}

Вот так вот придется помучатся с Wiki разметкой, если она будет составлена на блокноте — хорошо, что есть хоть какой-то автономный редактор, с помощью которого можно создавать записи на Вики движке. После всех изменений жмем кнопку Предварительный просмотр и смотрим что получилось и по возможности изменяем то, что сделали ранее.

Предпросмотр кода в Википедии редактора Вики

Для контакта данная разметка используется при создании групп, однако не так часто. Да и редакторы там почти такие же, как и у Википедии, разве что поменялся немного интерфейс. Теги точно такие же, результат почти — если для первого надо оформить только статью, то для VK это уже целое сообщество, почти как сайт.

По традиции подведем небольшие итоги:

  • Вики разметка является неким аналогом HTML разметки, которая активно используется практически на всех сайтах;
  • Основное и известное использование разметки Wiki можно встретить в свободной энциклопедии Wikipedia;
  • Реализация возможна только при наличии движка;
  • Точно так же используют движок и разметку в социальной сети ВКонтакте;
  • Выучить Вики разметку можно особо не напрягаясь, а когда есть редактор (оказывается не Визивиг), то можно довольно быстро освоить все нюансы и гордо сказать учителю, то HTML уже прошлый век, настало время Wiki (шутка конечно);
  • Сайтов, которые используют данный движок , не так много, даже критически не так много — около десятка, как сообщила об этом Википедия;
  • Вручную реализовывать дизайн или запись — дело монотонное, как сам HTML. Хорошо, что есть редакторы;

Запись про Вики разметку и где она используется можно закончить… зато немного посмотрели Википедию изнутри, а не для шпаргалок для экзаменов, что бывает в подавляющем большинстве случаев.

Комментариев: 1

  1. Orcinus Orca

    Мы в своё время положили идею парсинга WIKI для наших проектов:
    http://www.orcinus.ru/archive/2003/04-07.asp

    Вот мы тогда встали с вопросом как хранить, в вике и парсить при выводе. Двух-направленное персенье. Пришли к выводу, что прикольней будет хранить WIKI в БД, а людям отдавать ранее сгенеренные статические HTML складируемые на сервер. Получилось быстро и вполне редактируемо. А использовать ВИЗИВИНГ для редактирование в ВИКЕ как-то странно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>