BBCode - уроки и туториалы

LiteNight

member

Activity: 378

Merit: 30

♠☠♠

Quote from: temarazin on February 22, 2018, 06:35:02 PM

Немного оффтопа. Автор статей не советует использовать конвертеры изображений в bbcode, но тема для меня достаточно интересная. Решил написать простой скриптик для этой цели. Пока получается так:
Скрипт пытаюсь оптимизировать именно под этот форум, пишу на php, так что может и выложу куда-нибудь. Если интересно.

Да не плохо так получается. А есть этот скрипт? Только у меня мембер и три строки, не подойдет? Спасибо за тему!

Подъем с глубины Grin

msk19

full member

Activity: 364

Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Спасибо что откликнулись. Версия 4.4.2. Странно, захожу на https://unicode-table.com/ru/#2590 с андроида, в таблице вижу все символы... Появилась идея, вставить в код набор символов и посмотреть какие из них будут видны а какие нет, и исходить в дальнейшем уже из этого..
Да, а посмотрел с 6-го, нормально отображается.

temarazin

full member

Activity: 224

Merit: 186

Quote from: msk19 on May 13, 2018, 06:29:52 AM

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

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

msk19

full member

Activity: 364

Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Да, в андроиде тоже хром, вижу это так, вот скрин. Помоему не отображаются эти - ░,▀,▓ символы, боюсь если заменить их на пробелы будет еще хуже.

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

temarazin

full member

Activity: 224

Merit: 186

Quote from: msk19 on May 12, 2018, 05:04:16 PM

Автор, большое спасибо Вам за эту тему! Недавно заинтересовался созданием подписей, но только учусь.. Посмотрите пожалуйста, в чем моя ошибка?

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

Code:

[center]░▒ ▄█▀▀█▄▒░ ▄██▄░░▀█▄░▄█▀░▒ www.oax.org ▒░
░▒▓ ▐█░▒░░██ ██▄▄██▒░░███░▒ bit.ly/ActiveBounty ▒░
░▒ ▀█▄▄█▀ ██▒░░░██▄█▀░▀█▄▒░ bit.ly/BttANN ▒░]

А есть скрин с андроида? И какой браузер в андроиде, тоже хром?

msk19

full member

Activity: 364

Merit: 102

ADVANCED UX ON BLOCKCHAIN DAPP

Автор, большое спасибо Вам за эту тему! Недавно заинтересовался созданием подписей, но только учусь.. Посмотрите пожалуйста, в чем моя ошибка?

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

Code:

[center]░▒ ▄█▀▀█▄▒░ ▄██▄░░▀█▄░▄█▀░▒ www.oax.org ▒░
░▒▓ ▐█░▒░░██ ██▄▄██▒░░███░▒ bit.ly/ActiveBounty ▒░
░▒ ▀█▄▄█▀ ██▒░░░██▄█▀░▀█▄▒░ bit.ly/BttANN ▒░]

temarazin

full member

Activity: 224

Merit: 186

Quote from: Rainbowwww on April 17, 2018, 04:29:16 AM

Работая над подписью заметил полосы на моем шедевре, разноцветные, вертикальные и они слегка портят вид
Как их можно убрать?

Это косяк хрома. С какой-то версии это пошло у них. Автор этих уроков отправлял им репорты, но пока безрезультативно, как видно.

Rainbowwww

full member

Activity: 239

Merit: 100

Работая над подписью заметил полосы на моем шедевре, разноцветные, вертикальные и они слегка портят вид
Как их можно убрать?

Zedxxx

member

Activity: 364

Merit: 22

Вот кстати сервис по конвертированию картинок в BBcode
https://morgh.us/pixelate/

temarazin

full member

Activity: 224

Merit: 186

Урок 11: "Продвинутая техника сохранения знаков. Часть I"

Quote from: 'Трейлер фильма ужасов'

ГЛАВНЫЙ НОЧНОЙ КОШМАР
БЕССОННЫЕ НОЧИ И ПОТРАЧЕННЫЕ ЧАСЫ НА СЖАТИЕ КОДА...
ОГРАНИЧЕНИЕ В 4К ЗНАКОВ

Но не сдавайтесь! Есть несколько способов, чтобы противостоять чистому злу ^_^ ограничения в 4000 знаков.
(Это не такое уж и зло, в конце концов Wink

Ограничение знаков особо не заметно для рангов Member и Full Member, где 4000 знаков более чем досаточно.

Кошмар начинается при создании подписи для Senior, Hero и Legendary

Что ж... Это не настоящий кошмар, а больше похоже на вызов Cool

Я готов поделиться с вами несколькими техниками сохранения знаков, с помощью которых я борюсь с демонами ограничения в 4к знаков Grin

Я постараюсь сделать список, удобный для чтения (надеюсь).

Подсказка 1: Вам не нужно закрывать каждый тег внутри ячейки таблицы.

Вы можете не закрывать каждый тег, а менять текущий тег другим.
Например, вместо закрытия тега color вы можете просто поменять цвет на другой, используя новый тег.

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Подсказка 2: Вы можете не закрывать любые теги перед закрытием ячейки таблицы.

Вы можете не закрывать font, size и т.п. - (все) теги перед тегом /td.

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Подсказка 3: Ставьте основной цвет в начало...

Пока вы рисуете что-то с BBCode - лого там или что-то еще - старайтесь определить цвет, который встречается чаще всего, и ставьте тег с этим цветом в начало.
Когда для другого элемента нужно поменять цвет - ставьте новый тег color и закрывайте его в конце элемента.
Следующие за ним символы будут основного цвета Wink

Это проще показать на примере ^_^:

Quote from: 'ОДИН результат - МЕНЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Quote from: 'ОДИН результат - БОЛЬШЕ знаков'

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Подсказка 4: Ставьте теги начертания и стиля шрифта в начало...

Когда вы устанавливаете стиль шрифта и хотите его использовать для всей ячейки таблицы, ставьте теги в начало.
Но не перед тегами для ссылок (url) и выравнивания (center/left/right). Знаю, звучит не очень понятно....

Просто позвольте показать на примере Grin

Quote from: Эксперимент 1

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Текст для примера.[/b]
И другая линия текста.
[/td]
[/tr]
[/table][/center]

Текст для примера.
И другая линия текста.

temarazin

full member

Activity: 224

Merit: 186

Урок 10: "Рисование с BBCode - продвинутый уровень I"

Я обещал подробнее рассказать о рисовании шрифтом "Monospace".

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

И даже пользователи Mac'а со старых версий Сафари увидят "тот же" рисунок, что и, скажем так, с последней версии Хрома. Я добавил "скажем так", потому что последняя версия хрома немного подпортила наш дизайн Wink

Я писал об этом несколько дней назад (здесь речь о том, что в последних версиях Хром между символами █████ видны тонкие линии - прим. переводчика).

Хорошо, так в чем же подвох?

Единственная проблема рисунков в "Monospace" - они не выглядят такими сплошными, как такие же рисунки, выполненные обычным шрифтом.
Но всё равно он имеет несколько важных преимуществ.

Не только, что он "одинаково" выглядит в различных браузерах. Но также(!) вы сможете создавать рисунки с размерами 1px, 1pt, 2px, 2pt и они все равно будут выглядить одинаково в различных браузерах.
Но! Один и тот же рисунок, созданный в "Monospace" будет иметь разную насыщенность в заисимости от размера шрифта.

Пример:

Quote

░░░░░░███
░░░░█████
░░░█████████
░░░███████
░░██████████
░░███████████
░███████████
░░█████████
░░░░██████
░░░█████░░░░█
░████████░░███
██████████████
█████████████
░██████████
░░████████
░░█████████░█
░░███████████
████████████
██████░░░░█
██
░██

Size=2pt

temarazin

full member

Activity: 224

Merit: 186

Урок 9: "Внутри таблиц": Размер изображения

Это небольшой урок, скорее даже небольшая подсказка.
Урок 9 не относится к подписям, но имеет отношение к BBCode. Он может вам пригодится, когда вы создаете дизайн топика и т.п.

Если вы хотите создать таблицу и разместить в ней изображение, то оно, даже визуально, изменится в размере (уменьшится).
Добавление атрибута width к нашему изображению не решит проблему.

Пример:

Quote

Логотип Биткоина размером 150px x 150px
Но оно не 150x150...

Quote

Логотип Биткоина размером 150px x 150px
Width=150 добавлен. Но все равно это не 150x150..

Код примера:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Но оно не 150x150...
[/td]
[/tr]
[/table][/quote]

[quote][table]
[tr]
[td]
[img width=150]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Width=150 добавлен. Но все равно это не 150x150..
[/td]
[/tr]
[/table][/quote]

Как решить эту проблему?
В той же ячейке, что и изображение нужно написать строку любого текста, которая будет длиннее изображения.
И сделать её прозрачной. ( color=transparent ).

Quote

fffffffffffffffffffffffffffffff

Логотип Биткоина размером 150px x 150px
Теперь без каких-либо атрибутов он отображается как 150px x 150px

Код:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
Логотип Биткоина размером 150px x 150px
Теперь без каких-либо атрибутов он отображается как 150px x 150px
[/td]
[/tr]
[/table][/quote]

temarazin

full member

Activity: 224

Merit: 186

Урок 8: Основы рисования с BBCode - уровень III

Мы уже знаем самые важные вещи о BBCode-подписях. Что ж, время создать простую подпись для Senior/Hero/Legendary Member.
Предположим, нам нужно создать подпись, которая выглядит так:

Quote

░░░░░░░▄▄▄▄▄▄
░░░░▄██████████▄
░░░██████████████
░░██████░▐▌░██████
░█████░░░░░░░▀█████
██████▄▄░░▄▄░░██████
████████░░▀▀░▄██████
████████░░▄▄▄░░█████
██████▀▀░░▀▀▀░░█████
░█████░░░░░░░░█████
░░██████░▐▌░██████
░░░██████████████
░░░░▀██████████▀
░░░░░░░▀▀▀▀▀▀
░░░▀▀▀████████▀▀▀

Мы ♥ Биткоин

Я не буду писать пошаговую инструкцию, вместо этого я загрузил для вас видео, где заснял весь процесс создания. Я увеличил скорость в 2 раза, так что видео длится 9 мин. 12 сек., хотя процесс занял 18,5 минут.

Урок 8 видео-туториал: https://youtu.be/McKHrx1tBK0

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

Урок 8 Изображение логотипа Биткоина: https://i.imgur.com/gPmC4Xi.png

Это упрощенный логотип Биткоина - я изменил угол наклона, чтобы изображение выглядело лучше в BBCode. Размер 2pt не лучший для BBCode-изображений, но по крайней мере он самый совместимый, как мы уже знаем из урока 4.

Урок 8 - код BBCode-подписи:

Code:

[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]Мы [color=red]♥[/color] Биткоин[/b][/size]
[/td]
[/tr]
[/table][/center]

temarazin

full member

Activity: 224

Merit: 186

Урок 7: Цвета - градиенты

Можно сохранить много времени при создании градиента для вашего текста или BBCode-изображения, используя 'Text Color Fader' - генератор градиента

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

http://patorjk.com/text-color-fader/

Это мой любимый инструмент для создания хорошего градиента, в котором вы можете "Output Code" (генерируемый код) установить в "Standard Forum Code" (стандартный код для форума).

http://patorjk.com/text-color-fader пользовательский интерфейс очень простой. Напишите текст, выберите количество цветов и установите "Standard Forum Code" для Output Code. Нажмите "generate color faded text" - и всё готово

(почти).

Пример:

Quote

Урок - 6: Какой-то текст о градиентах xD

Code:

[color=#9600ff]У[/color][color=#9b06f3]р[/color][color=#a00ce7]о[/color][color=#a512db]к[/color] [color=#af1ec3]-[/color] [color=#b92aab]6[/color][color=#be309f]:[/color] [color=#c73c86]К[/color][color=#cc427a]а[/color][color=#d1486e]к[/color][color=#d64e62]о[/color][color=#db5456]й[/color][color=#e05a4a]-[/color][color=#e5603e]т[/color][color=#ea6632]о[/color] [color=#f4721a]т[/color][color=#f9780e]е[/color][color=#f4721b]к[/color][color=#ef6b27]с[/color][color=#e96534]т[/color] [color=#df584d]о[/color] [color=#d54c67]г[/color][color=#cf4573]р[/color][color=#ca3f80]а[/color][color=#c5398d]д[/color][color=#c0339a]и[/color][color=#ba2ca6]е[/color][color=#b526b3]н[/color][color=#b020c0]т[/color][color=#ab19cc]а[/color][color=#a613d9]х[/color] [color=#9b06f2]x[/color][color=#9600ff]D[/color]

Хорошо, мы теперь знаем, как быстро сгенерировать градиентный текст, но как использовать такой генератор для BBCode-изображений?
Что ж, это немного сложнее и зависит от наших потребностей. У разного дизайна - разный подход.

Давайте начнем с простого примера.

Упражнение:

Quote

████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████

Code:

[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████
[/td]
[/tr]
[/table]

У нас есть два восклицательных знака и мы хотим раскрасить их градиентом.
В нашем примере каждый восклицательный знак состоит из 17 линий █ в размере 2pt.

Чтобы сгенерировать шестнадцатиричные значения цветов для градиента откройте http://patorjk.com/text-color-fader/

В поле "message" напишите:

Quote

12345678901234567

Вы можете написать что угодно, главное, чтобы длина текста была 17 символов. Потому что нам нужно 17 цветов для 17 линий.

Выберите ваши цвета (я установил 2 цвета: #0040ff и #bd0021) и нажмите "generate color faded text". Добавьте тег color для каждой линии вашего изображения и скопируйте сгенерированные значения цветов.
Попробуйте нарисовать второй знак восклицания в обратном градиенте.

Результат упражнения:

Quote

████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████

████████
████████
████████
████████

Code:

[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████

[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████

[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[/table]

Подсказки и Трюки (3): экономим символы (I)

Работая над BBCode-изображением, нам не нужно закрывать тег color перед другим тегом color. Это может сэкономить много символов.
Нам не обязательно закрывать многие теги, такие как [ /b ], [ /size ], [ /font ] и некоторые другие. Еще больше подсказок будет дальше

temarazin

full member

Activity: 224

Merit: 186

Урок 6: Цвета

Для изменения цвета элемента дизайна подписи добавьте bbcode color.

Code:

[color=#цвет][/color]

Значением color может быть одно из принятых названий цветов: "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green",
а также цвет в шестнадцатиричной форме и сокращенной шестнадцатиричной форме, которая сэкономит немного символов. (ограничение на кол-во знаков в подписи не такое большое, поэтому экономьте знаки как только можете

).

Сокращенная шестнацатиричная форма:

Шестнадцатиричная.форма

temarazin

full member

Activity: 224

Merit: 186

Урок 5: Основы рисования с BBCode - уровень II

Итак, теперь мы знаем, что хороший выбор для BBCode-изображений - это ASCII символ █ с размером 2pt. Но как нарисовать что-то хорошее с ним?

Терпение и немного художественного чувства приведут нас к цели

Чтобы почувствовать это, вам потребуется некоторая практика и экспериментирование.

Упражнение: Выбранные ASCII символы для нашего BBCode-изображения: ░ and █

Шаг 1) Нарисуйте прямоугольник с помощью █ символов. Помните о максимальной высоте. (Урок 2).

Quote

█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████

Шаг 2) Нарисуйте стрелки геймпада с помощью ░ символов.

Quote

█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Шаг 3) Нарисуйте кнопки геймпада с помощью ░ символов.

Quote

█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Step 4) Скруглите углы границ геймпада с помощью ░ символов.

Quote

░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░

Код упражнения:

Code:

[b]Шаг 1)[/b] Нарисуйте прямоугольник с помощью █ символов. Помните о максимальной высоте. ([url=https://bitcointalksearch.org/topic/m.30751230]Урок 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Шаг 2) [/b]Нарисуйте стрелки геймпада с помощью ░ символов.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Шаг 3) [/b]Нарисуйте кнопки геймпада с помощью ░ символов.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 4)[/b] Скруглите углы границ геймпада с помощью ░ символов.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

temarazin

full member

Activity: 224

Merit: 186

Немного оффтопа. Автор статей не советует использовать конвертеры изображений в bbcode, но тема для меня достаточно интересная. Решил написать простой скриптик для этой цели. Пока получается так:

██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████
██████████████████████████████████████████████████

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

temarazin

full member

Activity: 224

Merit: 186

Урок 4: Основы рисования с BBCode - уровень I

Когда вы хотите перевести изображение в BBCode, вы должны помнить несколько очень важных правил

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

Благодаря почти 3-летнему опыту создания подписей с BBCode я уверен, что если мы хотим хорошую совместимость нашей подписи с различными ОС и браузерами, мы должны использовать символы в размере 2pt для создания BBCode-изображений.

Вот лучшие символы ASCII, которые я советую использовать для BBCode-изображений: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
Чаще всего я использую " █ " (и всегда в размере 2pt), который является самым совместимым с различными браузерами и ОС.

Почему я не использую 2px, 1pt или 1px?
Если все будут использовать Google Chrome, то вполне можно использовать 2px, 1px или что-то меньше, чем 2pt. Вы можете проверить сами в своих BBCode-изображениях.

К несчастью, символы, которые меньше 2pt, в подписи будут выглядеть сильно растянутыми или сжатыми в зависимости от браузера и ОС, что означает, что в действительности только часть пользователей будет видеть хорошую правильную подпись.

Дизайн подписей с BBCode не такой гибкий, как HTML + CSS, внешний вид которого тоже может зависеть от браузера.

Эксперимент: Нарисуйте квадрат в BBCode. Используйте один и тот же ASCII символ " █ " с разными размерами: 2pt, 2px, 1pt, 1px.

Посмотрите, что получилось под разными браузерами: Chrome/Mozilla/Opera/Edge/Safari/и т.д..

Quote

2pt→

███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████
███████████████████

2px→

████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████
████████████████████████████████████████

1pt→

██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████

1px→

██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████
██████████████████████████████████████████

Обратите внимание, что квадрат из символов с размером 2pt в большинстве браузеров выглядит одинаково. Это самый совместимый вариант. Другие квадраты из того же символа, но другого размера, в разных браузерах выглядят то сжатыми, то растянутыми. Символы ASCII в 2pt не 100%-совместимы, но спустя годы экспериментов я уверен, что это лучший вариант.

temarazin

full member

Activity: 224

Merit: 186

Это перевод уроков по созданию подписей на форуме.
Автор: roslinpl.
Оригинальная тема: [LEARN] BBCode Lessons & Tutorials [+tutorial videos!]

Новые уроки будут выкладываться по мере перевода

Привет всем!

Я решил начать ветку, в которой смогу поделиться знаниями о BBCode форума. По моим урокам и туториалам вы сможете улучшить своё умение, узнаете как разработать и создать подпись с BBCode себе или кому-то другому.

Если вы считаете, что это клевая идея, то оставляйте свои комментарии.

........................................Ссылки.на.уроки:........................................

Bitcoin Forum>Local>Русский (Russian)>Разное

Jump to:

Topic: BBCode - уроки и туториалы (Read 1541 times)