Продолжение идеи записи гитарных аккордов в HTML. Версия 3, оптимизированные варианты

[PSHKGRZN]

Можно обалденный сайт сделать для музыкантов.
— Добавить режим обучения (с мигание в так и что-то такое :)
— Зарабатывать на рекламе концертов и магазинах инструментов.

А вообще музыканты скажут вам большое спасибо!

[r3code]

Идеи о сайте уже слышал, а вот про обучение — это что-то новенькое, спасибо за идею )

[corristo]

редактор табулатур с веб-интерфейсом был бы офигенным стартапом :)

[mastikhin]

songsterr.com/

[mastikhin]

Я всмысле «не оно»? )

[r3code]

Не вы все путаете аппликатуру, что я тут привожу, и табулатуру.

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

[r3code]

Нашел — есть русские песни! Би-2 — Серебро например. Только нет у них навигации по другим языкам.

[immortalman]

Есть теги: www.songsterr.com/a/wa/tag?name=russian

[r3code]

Да я им написал, и прикинь мне ответили на русском! Они скоро заменят этот индекс просто на теги, тогда будет нормально искать сразу.

[r3code]

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

[darkk]

Вы уверены, что их нет в unicode?

[r3code]

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

[BuzzyBuzz]

кстати в каком-то из виндовых шрифтов (то ли Symbol, то ли Wingdigs) есть буллеты с циферками внутри. Может, их использовать? Хотя пока эмбединг шрифтов в хтмл не сделают, будут страдать линуксоиды, наверное.

[r3code]

Не это только лишняя морока, можно сделать для Win, встраиваемые шрифты — с ними опять париться. Надо быть проще, как вариацию могу предложить букву О сделать меткой а цифру задвинуть внутрь.

[udachnik]

Есть unicode, правда не знаю у всех ли браузеров все в порядке с отображением: ➊➋➌

[r3code]

У меня квадратики в FF видятся.

[darkk]

У меня в FF цифры в кружочках на чёрном фоне.

— страдающий от нехватки шрифтов линуксоид :-)

[Sannis]

Немного угловато, но видно :)

[r3code]

БЕЗ КАРТИНОК. Зачем их использовать если можно без них.
Смысл не морочиться с рисованием.

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

[zerkms]

«Зачем их использовать если можно без них.»
вероятно затем, чтобы потом не писать:
«Примечание. Имеются проблемы с выводом на печать в IE, Opera. Некорректное масштабирование в IE.»

[zerkms]

по поводу веса — png.

[r3code]

Кому нравиться и умеет — возьмет и нарисует, остальные найдут другие способы, например этот.

[ecl]

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

[r3code]

Мобильные браузеры — это совсем другая область, под них не затачивалось.

[taxigy]

Что, несомненно, верно, но недальновидно.

[r3code]

ИМХО на ИМХО.
Мне не нужно это в данный момент.

[WarGoth]

Может стоит посмотреть в сторону векторной графики? raphaeljs.com

[r3code]

Это еще надо изучить для начала. Потратить опять же время, я просто взял и сделал как знаю.

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

[Cardinal]

с мобильных браузеров, по-моему, по табам не очень удобно играть =)

[r3code]

Да маловат экранчик, я рассматриваю что такое интересно только когда сидят на кухне с пивой и гитарой, а как играть не вспоминается.

[rukeba]

а я не ставил цели поупражняться в css.
просто сделал такую работающую штуку rukeba.com/chords/
без рисунков.

[r3code]

тут и css особо то и нету — ascii арт почти, все символьное. Вариант хороший. Подход у тебя другой.

[Sannis]

За это я и люблю web-прогресс. Просто слов нет :)

[silkleo]

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

[r3code]

Спасибо.

[silkleo]

silkleo.ru/chords/examples.html

Вот, нашел в своих закромах, если вдруг интересно.

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

Любой «струне» можно сказать class=active, тогда она загорится зеленым (видно на третьем примере). Таким образом планировалось сделать анимацию перебора для правой руки. Плюс, еще была идея, маргинами «раскачивать» зажатые струны.

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

[r3code]

Как вариант для себя — хорошо. Мне вот изначально метки на струнах были нужны именно круглые, так сказать, классическое обозначение, как моя учительница рисовала мне )

[silkleo]

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

[piumosso]

О! а самое классное было бы сделать на JS. Пользователь выставляет маркеры — пальцы, нажимает кнопку, данные уходять ajax, а сервер возвращает миди-звучание этого аккорда))))
Пользователь может подбирать аккорды, тренировать память, распечатывать и т.д.