Вики разметка Вконтакте. Что это такое? Создание вики страниц вконтакте – wiki разметка для чайников

Вики разметка Вконтакте. Что это такое? Создание вики страниц вконтакте – wiki разметка для чайников

Каждому пользователю популярного социального ресурса ВКонтакте наверняка известно о возможностях создания различных групп, но лишь немногие знают о том, как прийти к созданию собственного сайта из любой такой группы… Все, что требуется от пользователя в этом случае, – элементарные знания о wiki-разметке и умение нею пользоваться в собственных целях! О том, что такое wiki-разметка, как правильно пользоваться разметкой и корректно оформлять создаваемые группы, и пойдет, собственно говоря, речь далее…

Я научу пользоваться неограниченными возможностями wiki-разметки, потому что некоторое время назад и сам пытался разобраться во всем этом досконально. Представленная ниже информация, я уверен, окажется более чем полезной не только для новичков этого ресурса, но и для маститых пользователей со «стажем»…

Что такое вики разметка?

Итак, пресловутая wiki-разметка ВКонтакте представляет собой не что иное, как специальный язык оформления информационных веб-страниц в создаваемой вами группе. Этот, весьма ценный, инструмент позволяет строить целые «шедевры»: меню, таблицы, теги, а также организовывать дополнительную структуру элементов навигации для перемещения объектов внутри группы, выполнять форматирование текста по нужному шаблону.

Для чего нужна wiki-разметка

При оформлении группы такая разметка играет важную роль, т.к. с ее помощью выполняется любое редактирование. Предположим, захотелось вам создать группу для популярного ныне заработка на партнерских программах, которых сейчас «море» на просторах Интернета. Перед пользователем открываются неограниченные возможности, но вполне резонно встает вопрос о том, как правильно и максимально привлекательно все это «завернуть» в красивую обертку. Другими словами, как достойно оформить, чтобы привлечь внимание как можно большего количества пользователей? Здесь и пригодятся знания о wiki-разметке, о которой я веду беседу…

Кому интересно пополнять электронную базу знаний – библиотеку, тот может применить wiki-разметку для редактирования либо написания статей для популярнейшего Интернет-справочника. Энциклопедии со странным названием Википедия, знаете ли, всем нужна, так что можно сделать доброе дело всем во благо!

Оформление группы с помощью wiki-разметки

Система редактирования интернет-страниц wiki разметка напоминает HTML-верстку, но позволяет быстрее и легче размечать гиперссылки и структурные текстовые элементы, а также форматировать отдельно взятые его элементы. Главное преимущество такой разметки заключается в том, что обучить себя всем премудростям этого «ремесла» может каждый, даже не особо «продвинутый» пользователь.

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

Для начала я бы советовал включить раздел. Для этого нужно обратиться к разделу «Редактирование информации», чтобы в его настройках поставить галочку рядом с требуемой опцией. Например, пусть это будет опция «Новости включены», которую можно при желании переименовать по-своему. Начальным названием там будет указываться «свежие новости». Теперь с моей легкой руки у вас имеется раздел, делайте, что хотите, т.е. редактируйте на здоровье!

Как создавать страницы

Конечно, я сам не сразу пришел к тому, как создавать отдельные странички для своей группы. Потом мне пришло в голову, все-таки, прочитать инструкции по верстке на wiki, не скрою этот факт…)))

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

[[Название статьи]] или [[Название статьи|текст для ссылки]] ,

Тексты подаются на страницах при помощи специальных знаков – тегов. Пример оформления тегов подаю в таблице ниже.

Шаблоны разметки для меню группы

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

  • Шаблон 1.

{|
|-
!
первое меню!

|-
| тексттексттекст
|}
|

{|
|-
!
второе

|-
| тексттексттекст
|}

  • Шаблон 2.

{|
|-
{|
|-
!Обучение
|}
*[[ вики-разметка стандартная]]
*[[ вики-разметка расширенная]]
*[]
*[[Помощь]]

{|
|-
!Практика
|}
*[[меню]]
*[[Песочница]]

{|
|-
![[разделы]]
|}
*[[Иконки]]
*[[Скачать]]

{|
|-
!О группе
|}
*[[Новости]]
*[[О нас]]
*[[Правила]]

|
{|
|-
!Последняя новость:
|-
[]
сайт группы

|}
{|
|-
!Объявление!
|-
[]

В руководство будут принимать… из админов!
|}
{|
|-
![[Общая навигация|Общая навигация »]]
|}
|}

  • Шаблон 3.

Wiki-разметка для текстового меню с небольшими иконками:

{|
|-
!
[] Пригласи всех друзей

[] »’[[Правила]]»’

[] Фотоальбомы

[] Творчество

[] Фотки


[]

|}

Как вы уже поняли, существует всего несколько разновидностей шаблонов кодировок. Используйте нужные виды шаблонов, и созданная вами группа будет настроена самым лучшим образом. Безусловно, простор для фантазии есть, но для этого придется составлять коды самому. Придется немного потрудиться, перечитать массу информации, чтобы узнать основные принципы построения кодов wiki-разметки.

Я же говорю, что это просто, ведь код начинается и заканчивается с привычных тегов, а иконки внутри все предстают в виде информации [] с небольшим текстом для их описания.

Что такое спойлеры и какова их роль

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

Примеры спойлеров представлены в таблице ниже.

Поработав в этом направлении неделю-другую с вики-разметкой, у вас будет собственная группа ВКонтакте!

Каждый, кто хочет продавать товары или предлагать услуги с помощью социальной сети «ВКонтакте», должен зарегистрировать своё сообщество. Групп, которые создавались с целью продать что-либо в социальной сети «ВКонтакте», уже существует огромное количество. Как сделать Вашу группу уникальной и привлекательной? Как выделиться на фоне остальных сообществ и убедить клиента купить товар именно у Вас? Для этого необходимо красиво и необычно оформить своё ВК-сообщество. В этом поможет вики-разметка. Мы расскажем, что такое вики-разметка ВКонтакте для чайников.

Скидка читателям

Вам повезло, сервис smmbox.com раздаёт скидки.
Сегодня скидка 15% на использование сервиса. Вам нужно просто зарегистрироваться и ввести при оплате промокод smmbox_blog

Вики-разметка. Что это

Вики-разметка «ВКонтакте» — это специальный язык, созданный для оформления обучающих, продающих или развлекательных Web-страниц ВК-сообщества. Это очень ценный и мощный язык разметки, который позволяет подключать дополнительный функционал «ВКонтакте» и использовать его для продвижения и уникализации группы.

Страницы, оформленные или созданные с помощью вики-разметки, принято называть вики-страницами. Впервые этот термин ввёл Уорд Каненгем в 1995 году. Тогда пользователи сети Интернет познакомились с Википедией. «Wiki» переводится с гавайского, как «быстрый».

Вики-разметка позволяет быстро создать и внедрить в код любой страницы сообщества красиво оформленные элементы, такие как:

  • кнопочное меню;
  • картинки-ссылки;
  • спойлеры;
  • якоря;
  • мини-игры.

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

Вики-разметка « ВКонтакте» очень похожа на HTML (Hyper Text Markup Language). Но, в отличие от языка разметки кибер текста, её можно освоить за неделю благодаря графическому интерфейсу.

Такая разметка существенно расширит Ваши возможности в администрировании группы. С её помощью Вы сможете создавать онлайн-журналы, интернет-магазины и даже мини-сайты.

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

Как создать вики-страницу

Придерживаемся следующего плана при создании вики-страницы:

  • Определиться с видом страницы и сделать её макет. Бывают такие виды: ВК-лэндинг, ВК-пост, интерактивная страница.
  • После того, как Вы определились с видом своего мини-сайта, можно приступать к созданию вики-станицы. Создать меню, сделать кнопки меню активными. Наполнить страницы контентом. Сделать ссылки на товары. Подключить видео или аудио записи и многое другое. Всё зависит от Вашей фантазии.
  • Художественно оформить сообщество. Вставить картинки, логотипы, аватарки, фото товаров…
    Мы покажем конкретный пример оформления интерфейса уже существующей группы с помощью вики-разметки. Создадим тестовое сообщество и разберём весь процесс пошагово.

Для того, чтобы создать вики-страницу, нам нужно в поисковую строку браузера скопировать ссылку https://vk.com/pages?oid=-***&p=ИМЯ .

Вместо *** нужно вставить уникальный Id сообщества.

В нашем случае это 105722542.

Id находится в адресной строке браузера после /club; /event или /public.

Вместо «ИМЯ» — вбить название вики-страницы, например, «каталог товаров».

Обратите внимание, что поменять название уже не получится.


Для дальнейшего доступа к нашему разделу меню обязательно скопируем и сохраним выделенную ссылку в текстовый документ.

Для перехода в режим вики-разметки нажмём на кнопку «Редактирование», а затем «Режим вики-разметки».

В режиме разметки нужно набрать следующий код.

{|nomargin ***с помощью этой команды убираем границы
|- ***начинаем создавать надписи
|

Главная
***создаём надпись «Главная» и выравниваем её по центру прямоугольника
|
каталог товаров
*** создаём надпись «каталог товаров» и выравниваем её по центру прямоугольника
|
о нас
***создаём надпись «о нас» и выравниваем её по центру прямоугольника
|
контакты
***создаём надпись «контакты» и выравниваем её по центру прямоугольника
|} ***закрываем блок надписей
[[Главная]] ***создаём ссылку на «Главная»
[[О нас]] ***создаём ссылку на «О нас»
[[контакты]] *** создаём ссылку на «Контакты»
________________________________________
***Примечание

Копируем их до «?». Вот что должно получиться в итоге на каждой странице.

Код главной страницы

https://vk.com/page-105722542_54261370

***(Каталог товаров) |

https://vk.com/page-105722542_54261943

*** (О нас) |

***(О нас) |

https://vk.com/page-105722542_54261944

*** (Контакты) | }

***(Контакты) |}

***Примечание

Остальные кнопки меню оформляем аналогично коду «главной страницы».

Сохраняем все изменения на каждой странице.

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

Ждём, пока не появится пункт меню. После этого ссылку нужно удалить и нажать кнопку «отправить». Возле кнопки необходимо выбрать пункт «От имени сообщества».

Каждую страницу меню нужно заполнить текстом. После этого можно приступить к художественному оформлению.

Добавим «шапку» и «аватарку».

Сделать их можно по видео уроку


Мы показали Вам, что такое вики-разметка ВКонтакте для чайников. Оформлять сообщество с её помощью очень увлекательно. Изучайте вики-разметку и создавайте настоящие мини-сайты.


.

Перед тем как углубиться в вики — разметку, создавая интерактивное меню , необходимо сделать некоторые подготовительные действия, в первую очередь, изменить некоторые настройки в группе. Нажимаем на «Управление сообществом», открываем «Обсуждения», и подключаем «Материалы».

Теперь переходим к подготовке изображений. Если Вы не работаете с графическими редакторами, то придется обратиться к фрилансерам. Дальнейшая работа будет показана с применением Фотошопа, но может быть выполнена и в других редакторах.

Заготавливаем шаблон для группы ВКонтакте согласно изображению.

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

Далее подготавливаем подходящее изображение, прописываем надписи и раскраиваем весь рисунок на участки, с учетом того, что каждый отдельный участок, с соответствующей надписью, будет служить кнопкой меню. Как все это сделать, здесь мы углубляться не будем, так как эта статья не урок по Фотошопу.

Сохранив и удалив ненужные фрагменты (фотошоп кроит и сохраняет всё изображение и белые поля тоже), переименуем фрагменты, пронумеровав их по порядку их расположения в меню.

Теперь переходим непосредственно к группе. После корректировки настроек, на стене появились две вкладки: «Свежие новости» и «Обсуждения». Кликаем по «Новая тема» в закладке обсуждений и создаем первую страничку нашего меню.

Её нужно назвать в соответствии с именем на графическом меню и заполнить поле с описанием. После заполнения всей необходимой информации, нажимаем «Создать тему».

На стене появится созданное сообщение. Таким же путем создаем нужное нам количество (в соответсвии с разделами меню) страниц.

После завершения подготовительных операций можем переходить к редактированию нашего меню. Для этого нам понадобится вкладка «Свежие новости». Наводим курсор на нее и нажимаем на «Редактировать».

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

Образец кода для рассматриваемого меню:

[]
[]
[]
[]

Важно иметь в виду, что для фрагментов, не выполняющих роль кнопки необходимо вместо ссылки на страничку прописывать «nolink». Иначе, фрагмент будет кликабельным, и при каждом нажатии на него будет открываться сам фрагмент, как отдельное изображение.

Если все сделано правильно и не допущено никакой ошибки в коде, то при возврате в нашу группу и после нажатия на название вкладки (Главное меню группы) откроется созданное нами меню, которое смотрится, как одно целое вместе с аватаром. Интерактивное меню и графическое оформление группы представляют собой единую композицию. При нажатии на разделы меню мы попадаем в соответствующие разделы группы.

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

Мы рассмотрели, как сделать интерактивное меню или оформить группу в стиле wiki. Если возникнут вопросы по самому процессу подготовки, пишите в комментариях и вместе попробуем решить их.

Хотите получить место, в котором можно разместить примеры работ, вести блог и рекламировать свои услуги? Обычно для этих целей создают сайт. Но есть и другой, более простой выход - группа Вконтакте с wiki-разметкой. В этой статье я объясню, как ее создать.

Практика и еще больше практики! Я буду описывать процесс на примере реальной группы - Футуристичный копирайтинг.

Я работаю с новым дизайном Вконтакте. Старый скоро отживет свое - поэтому его рассматривать не буду. В любом случае, процесс мало чем отличается.

Первое, что вы должны сделать - создать новую группу:

  • Откройте раздел «Группы».
  • Нажмите на кнопку «Создать сообщество».


Создаем новое сообщество

  • Введите название. Указывайте любое - его можно менять в любой момент сколько угодно раз.
  • Теперь выберите вид сообщества: группа или публичная страница. Разница описана выше.


Группа или публичная страница?

  • Нажмите «Создать сообщество».
  • Здесь вы можете изменить указанное название и выбрать тип страницы (его тоже можно менять в любой момент).
  • Не забудьте принять Правила пользования сайтом.


Выбираем тип страницы

  • Нажмите «Создать страницу».

Ура, сообщество создано!

Редактирование информации о сообществе

Сразу после создания новой группы вы попадете на страницу «Редактирование информации». Что здесь есть:

  • Название . Думаю, объяснять не надо. Единственное обязательное для заполнения поле.
  • Описание сообщества . Напишите пару слов о себе и своей группе. Много писать не стоит - никто не станет это читать.


Все поля, кроме названия, можно вообще не заполнять


Еще настройки

Когда закончите с настройками - нажмите «Сохранить».


Группа создана

Теперь можно загрузить основное изображение. Нажмите на «Загрузить фотографию» справа.


Давайте загрузим изображение для страницы

Укажите путь в изображению. Поставьте туда ваш логотип, фотографию или нарисуйте (закажите) что-нибудь особенное. С помощью рамки выделите ту область, которая и станет главной картинкой сообщества.


Выделите нужную область с помощью рамки

Теперь выберите небольшую круглую область, которая станет миниатюрой вашей группы.


Размер круга тоже можно менять

Вот, что у нас получилось. Страница стала на 35% привлекательней!


Красота!

Не забывайте про статус. Там тоже можно написать что-нибудь интересное. Например, ваш слоган или контактные данные. Или объявление о том, что сегодня у вас выходной.

На этом подготовительные работы заканчиваются и начинается самое сложное - wiki-разметка.

Как узнать ID группы

Меню, запись в блоге, список с примерами работ - все это мы будем создавать с помощью wiki-страниц. Вконтакте - отвратительный сервис, в котором нет инструментов для создания новой страницы. Вместо этого придется использовать скрипты. Не пугайтесь, это просто, хоть и неудобно.

Для скрипта вам понадобится узнать ID вашей группы. Если вы не меняли ее адрес - то это цифры в адресной строке, которые идут после слова «club». Я уже поменял, поэтому мне такой простой способ выцепить ID недоступен.

Кликните по любому посту на стене, чтобы открыть его. Если ничего нет - напишите что-нибудь. Что угодно.


Создайте любой пост и нажмите на него

В адресной строке появятся новые данные. То, что находится посередине между «wall-» и «_» (нижним подчеркиванием) - и есть ID вашей страницы. Сохраните его где-нибудь.


Мой ID - 124301131

Создание wiki-страницы

Теперь вы можете использовать скрипт для создания новых страниц с вики-разметкой.

http://vk.com/pages?oid=-124301131&p=Имя

Скопируйте это и вставьте в адресную строку браузера. Вместо моего ID укажите свой. А вместо слова «Имя» напишите название создаваемой страницы. Можно использовать русский язык, пробелы, цифры. А затем нажмите Enter, чтобы перейти по ссылке и запустить скрипт.

Будьте внимательны! Название вики-страницы изменять нельзя. Если будут опечатки - придется создавать новую.

Давайте для начала сделаем главную страницу. Я назвал ее «Меню».


Скопируйте скрипт в адресную строку

Нажмите «Наполнить содержанием».


Откройте редактор страницы

Здесь находится редактор страницы. Но нам пока что нужен не он, а ссылка. Посмотрите на адресную строку. Вам нужно все, что расположено до слов «?act=edit§ion=edit».


Обязательно сохраните ID страницы и ссылку на нее

Это очень важный момент. Новая страница еще нигде не закреплена и на нее не ведут никакие ссылки. Если вы закроете ее - то потеряете.

Я советую создать отдельный файл, в котором будет храниться структура вашей группы. Оформите его в виде «Название - ссылка - ID страницы». ID - это «page-124301131_50771728». Оно вам еще понадобится.

Вот, например структура моей группы «Подслушано». Меню и еще 2 страницы. Сюда же закинул скрипт для создания новых страниц. Чтобы его было легко найти.

Сохраните все ссылки и ID в отдельном файле, чтобы не потерять

Что делать, если вы сохранили только ID страницы, но забыли про ссылки? Введите в адресную строку адрес «https://vk.com/page-124301131_50771728». Естественно, подставьте ID своей страницы.

Закрепление вики-страницы в группе

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


Просто скопируйте ссылку на страницу в пост


Кнопка останется, даже если удалить текстовую ссылку

Загрузите изображение. Максимальная ширина картинки - 510 px. Максимальная высота - тоже 510 px. В пределах этих значений можно делать что угодно. Квадрат 510х510 - самый большой баннер, какой вы можете сделать. Это справедливо для любых постов, не только для закрепленных.


Я сделал вот такую штуку

Нажмите отправить. Теперь кликните по значку в виде трех точек в правом верхнем углу поста. И нажмите «Закрепить».


Теперь закрепите пост со ссылкой

Таким же образом можно делать анонсы статей в вашем wiki-блоге. Только закреплять их не надо.

Обновите страницу. Информация о группе исчезла. Вместо нее появился созданный вами пост с ссылкой и картинкой.


Клик по картинке откроет прикрепленную вики-страницу

Если кликнуть по картинке или по кнопке «Посмотреть» - откроется wiki-страница.


Пока что она пустая

Главную пока что трогать не будем. У нас ведь еще нет остальных страниц. Ссылки давать не на что. Сначала займемся другими вещами.

Верстка вики-страницы Вконтакте

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

Я покажу, как применять знания из этой группы на практике. Давайте сверстаем страницу «Обо мне». Для начала создайте ее с помощью скрипта, запишите ID и перейдите на страницу редактирования.

На странице редактирования есть 2 режима: обычный и режим разметки. Обычный почему-то нещадно глючит - постоянно ломает ссылки. И большинство функций в нем недоступны. Поэтому я стараюсь в нем не работать. Чтобы перейти в режим wiki-разметки, кликните по значку <> справа вверху.


Перейдите в режим вики-разметки

Что должно быть на странице «Обо мне»? Немного информации, список преимуществ перед другими копирайтерами, возможно, фотография. Давайте это и сделаем.

Для начала напишите текст. Лично мне удобнее писать в любимом , а затем копировать в редактор Вконтакте. Не забывайте нажимать «Сохранить страницу» после каждого изменения.

Теперь добавим фотографию. Кликните по значку в виде фотоаппарата и укажите путь к изображению.


Нажмите на значок в виде фотоаппарата на панели инструментов

Вот и наша фотография

Я хочу, чтобы текст обтекал картинку, поэтому добавлю ей параметр «left». И я не хочу, чтобы люди могли открывать полную версию фотографии, поэтому добавил атрибут «nolink». Подробнее об атрибутах почитайте в группе, на которую я дал ссылку выше.


Добавляем параметры «nolink» и «left»

Чтобы посмотреть на результат - перейдите в обычный режим с помощью кнопки <>.


Не очень красиво

Давайте уменьшим фотографию. Просто пропишите нужные размеры в режиме разметки. Я указал значения вдвое меньше изначальных.


Укажите нужные размеры в режиме вики-разметки

Теперь оформим список. Выделите нужную строку и нажмите на значок списка.


Эта кнопка ставит тег *, который создает пункт списка

Перед ним появится символ «*». Это и есть тег списка. Вы можете ставить его вручную или пользоваться кнопкой на панели инструментов. Отметьте остальные пункты списка.


Уже красивее

Теперь нужно выделить заголовки. На панели инструментов есть кнопки для оформления заголовков H1-H3.


Используйте кнопки или поставьте теги вручную

«Обо мне» я сделаю заголовком первого уровня. А фразу перед списком - третьего уровня.


Почти готово

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


Добавляем пустую строку

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

Пожалуй, можно выделить жирным отдельные слова. Выделите нужный фрагмент и нажмите на кнопку «B» или используйте комбинацию клавиш Ctrl+B.


Комбинация Ctrl+B тоже работает

Вот что получилось в итоге.


По-моему, неплохо

Оформление портфолио Вконтакте

Теперь сделаем удобное портфолио для клиентов. Я вижу 2 способа:

  • Создать альбомы со скриншотами и страницу-список с ссылками на каждый них.
  • Создать отдельную страницу для каждой работы и страницу-список.

Для примера я оформлю 2 работы в портфолио - каждую своим способом.

Портфолио-альбом

Чтобы создать альбом, откройте меню «Управление сообществом».


Зайдите в настройки сообщества

Здесь установите галочку напротив пункта «Фотоальбомы». Теперь вы сможете их создавать. Сохраните изменения.


Добавьте блок с фотоальбомами

На странице сообщества нажмите на кнопку «Добавить фотографии» и укажите путь к нужным файлам.


Добавим в альбом скриншоты наших работ

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

Зачем? Потому что иначе текст на изображении получится слишком мелкий, и его нельзя будет прочитать. Толку от такого портфолио немного. А так я разбил его на кучу отдельных фрагментов нормального размера и добавлю в отдельный альбом Вконтакте.

У меня получилось 4 кусочка текста и миниатюра. Наведите курсор на любое изображение и нажмите на значок «Переместить фотографию».


Переместим новые изображения в новый альбом

Создайте новый альбом.


Нажмите «В новый альбом»

Дайте альбому такое же название, какое было у статьи. Чтобы его легко было найти. Описание вам не нужно. Также поставьте галочки напротив пунктов «Фотографии могут добавлять только редакторы и администраторы» и «Отключить комментирование альбома». Нажмите «Создать альбом и перенести».


Дайте альбому название и запретите остальным пользователям его изменять

Точно также перенесите остальные скриншоты. Только теперь не нужно создавать новый альбом - он уже есть.


Выбираем уже созданный альбом из списка

Вот что у нас получилось в итоге.


Альбом с кусочками текста

Для последующих альбомов такого геморроя с переносом уже не будет. Нажмите на «Фотоальбомы».


Откройте список альбомов своей группы

Теперь кликните по кнопке «Создать альбом» в правом верхнем углу. Дайте ему название и загрузите туда новую порцию скриншотов с помощью кнопки «Добавить фотографии».


Создайте альбом для нового текст в портфолио

Все, теперь у нас есть 2 альбома, в которых хранятся скриншоты 2 статей. Хватит, пожалуй.


2 альбома со скриншотами

Создайте страницу «Портфолио» и запишите ее ID. На ней мы не будем размещать сами работы - только названия, миниатюры и короткие описания.

Кликните по значку «Добавить фотографию».


Добавляем новую картинку на страницу

Нажмите на «Выбрать из фотографий сообщества». Откройте нужный альбом и выберите свою миниатюру.


Найдите свою миниатюру, добавленную в альбом

В новой вкладке откройте альбом или первый скриншот в нем. И скопируйте его ссылку (целиком). Ее вам нужно вставить в тег фотографии между вертикальной чертой | и закрывающимися квадратными скобками ]].


Вставьте ссылку между символами | и ]]

Так вы получите миниатюру, при клике на которую откроется нужный альбом или скриншот с началом текста (смотря на что вы укажете ссылку).

Портфолио-страница

Ну, здесь все гораздо проще. Создайте новую вики-страницу и не забудьте записать ее ID. Нажмите на значок «Добавить фотографию» и загрузите скриншот своего текста, предварительно порезанный на небольшие кусочки. В идеале 1 изображение - 1 абзац.

Зачем? Потому что Вконтакте довольно сильно сжимает изображения. Если вы загрузите целый скриншот, а затем растянете его на всю страницу - качество будет отвратительным. Маленькие же фрагменты пострадают не так сильно.

Теперь выключите режим вики-разметки (если он был включен).


Вернитесь в стандартный режим, чтобы посмотреть результат

Неплохо, но маловато будет. Кликните по первой картинке. В открывшихся настройках задайте ширину (левая ячейка) - 607 px. Это максимально допустимый размер изображения на странице. Высота изменится автоматически.


Задайте ширину картинки - 607 px

Вот что получилось. Точно так же увеличьте все остальные фрагменты текста.


Первый фрагмент стал ощутимо больше

Таким образом вы можете засунуть на вики-страничку текст любой длины. Главное, чтобы его можно было прочитать при ширине 607 px.


Целый скриншот текста на вики-странице

Наконец-то нам понадобятся ID страниц, которые вы записывали. Откройте свою страницу «Портфолио».

Загрузите на нее миниатюру (из созданного альбома или с компьютера). Теперь вставьте ID страницы с текстом между закрывающимися квадратными скобками ]] и вертикальной чертой |.


Скопируйте ID страницы с текстом между символами | и ]]

Собственно, все. Теперь при клике по миниатюре посетитель перейдет на страницу с текстом.


2 наши миниатюры-ссылки

Оформление списка работ

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


Добавьте немного информации о каждой работе

Оформление страницы «Услуги и цены»

У нас уже есть страница «О себе» и красивое портфолио. Пожалуй, самое время показать клиентам ценник. Думаю, что мы оформим его в виде таблицы. Просто и понятно. Создавайте новую вики-страничку, сохраняйте ID - и поехали.

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

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

Что такое вики разметка Вконтакте?

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

Для чего нужна wiki-разметка?

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

И вот тут перед пользователем открываются неограниченные возможности, но самый главный вопрос, который появляется у людей это как привлекательно и правильно оформить, что бы привлекать клиентов.

Оформление группы с помощью wiki-разметки

Хочется сразу отметить, что система редактирования wiki разметка очень напоминает HTML-верстку.

Главным преимуществом wiki разметки является, то что его изучить может каждый, даже не сильно «продвинутый» пользователь сети.

Также одним из преимуществом такой вики разметки является то, что она учитывает все изменения страниц, таким образом можно сравнить 2 различных редакции, что позволяет выбрать более удачный вариант. Все страницы, которые попали под изменения, сразу же отображают их.

Как выучить язык wiki-разметки и узнать о всех мелочах?

На просторах интернета я нашел, очень подробную инструкцию в которой расписаны все мелочи создания wiki страниц, от вставка видео и аудио, до работы с ссылками и таблицами! Данная инструкция в формате справки Windows, а значит её откроет любой компьютер.

Как создавать страницы

Страница - это интернет-элемент, вмещающий в себя информацию для общего обозрения пользователями.

Страница формируется автоматически, при указание текста:
[[Название статьи]] или [[Название статьи|текст для ссылки]]

На страницах тексты подаются при помощи тегов.

Если вам помогла или понравилась данная статья, не забудьте поставить свой лайк , это поможет другим пользователям найти её быстрей. А я смогу узнать, что интересует вас больше всего, чтобы подготовить и написать еще больше интересных и полезных статей! С уважением, Вячеслав.



© 2024 beasthackerz.ru - Браузеры. Аудио. Жесткий диск. Программы. Локальная сеть. Windows