Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 79
как-то дофига кода. лучше бы картинками рисовал…
Не все юзеры такие продвинутые художники, а то что получится в пайнте будет страшно.
Объемы кода и картинки для одного аккорда сделаю кстати.
Объемы кода и картинки для одного аккорда сделаю кстати.
можно и картинками просто генерировать… так делал в далеком 1997-8 годах… эх, было время, ща попробую поднять в архивах… rock.od.ua (в 2000-м домен подарил тем кто поддерживает его до сих пор).
Сам бог велел сверстать ещё и нотный стан =)
Шикарно! Еще бы сделать генерацию автоматическую — цены бы не было
Надо бы ещё фреймфорк какой-нибудь сделать.) Ну а так, вы молодец, что тут сказать.
Насчет фремворка — это как, а главное для чего он нужен будет? Фреймворки же нужны чтобы их использовать как скелет для реализации своей задачи. Какие тут задачи будут для него?
Я захочу сделать сайт «Песни нашего двора 2.0»
ну это же прямо само просится:
— библиотека генерации нот (для таких вот сайтов);
— интернет-сервис генерации нот (юзер говорит какие ноты, сервис рисует их в html).
ну это же прямо само просится:
— библиотека генерации нот (для таких вот сайтов);
— интернет-сервис генерации нот (юзер говорит какие ноты, сервис рисует их в html).
да-да, и для хрома исправьте!
Отлично. Но пока я сделал только аккорды — это к сожалению не совсем ноты. Это скорее как азбука.
А запись нот — это более сложная тема, я пока даже не думал о ней.
Сервис генерации нот… по моему по одной ноте как то не удобно будет рисовать, хотя даже если сделать возможность рисовать по несколько, мне кажется это будет утомительным.
Честно говоря, не знаю как сейчас в современном мире рисуют ноты, у меня все было или вручную переписано, или скопировано.
Требуется дополнительная инфа, чтобы такую задачу решать.
А запись нот — это более сложная тема, я пока даже не думал о ней.
Сервис генерации нот… по моему по одной ноте как то не удобно будет рисовать, хотя даже если сделать возможность рисовать по несколько, мне кажется это будет утомительным.
Честно говоря, не знаю как сейчас в современном мире рисуют ноты, у меня все было или вручную переписано, или скопировано.
Требуется дополнительная инфа, чтобы такую задачу решать.
простите за мою безграмотность на счет нот и аккордов :) но ведь аккорды тоже всем нужны? иначе зачем все эти сайты?
> Сервис генерации нот… мне кажется это будет утомительным.
зато все, кому будут нужны действительно ноты в нормальном качестве, будут идти к вам ;)
я редко хвалю чьи-то идеи на хабре, но тут мне идея понравилась. если наберется достаточно музыкантов, которым нужны ноты в интернетах, вы будете в золоте :)
> Сервис генерации нот… мне кажется это будет утомительным.
зато все, кому будут нужны действительно ноты в нормальном качестве, будут идти к вам ;)
я редко хвалю чьи-то идеи на хабре, но тут мне идея понравилась. если наберется достаточно музыкантов, которым нужны ноты в интернетах, вы будете в золоте :)
Это прекрасно! Вы действительно молодец. Просто вдыхаете жизнь в старый добрый html. Будет что показать друзьям, которые поставили крест на html и увлеклись flash. Спасибо.
Я и в прошлом топике писал, и сейчас напишу — в Google Chrome верстка едет. Вы ответили, что не видите в нем нужды, но, думаю, потенциальние пользователи Вашего сервиса наверняка не будут в восторге.
Класс, для полной академичности не хватает только XSLT, который бы <hm tab="12331X"> в такой HTML разворачивал.
В идеологии будущего сервиса думаю вполне осуществимая задача.
Только нужна расшифровка, что имел ввиду.
Hm — аккорд, tab=«12331X» — как зажимать? Тогда нужно кодировку баррэ придумать еще.
P.S. И хочу заметить — это не табулатура, а аппликатура.
Таббулатура это несколько дуругое изображение и немного для других целей.
Подробно тут и здесь
Только нужна расшифровка, что имел ввиду.
Hm — аккорд, tab=«12331X» — как зажимать? Тогда нужно кодировку баррэ придумать еще.
P.S. И хочу заметить — это не табулатура, а аппликатура.
Таббулатура это несколько дуругое изображение и немного для других целей.
Подробно тут и здесь
>Hm — аккорд, tab=«12331X» — как зажимать?
Да, как-то так. Не особо иксэмэльно, но с XSLT распарсить можно. А баррэ, по-мойму, и так понятно когда ставить. Примитивно говоря, баррэ нужно везде где не используется «нулевой» лад. Если исключения и есть, то думается немного.
Да, как-то так. Не особо иксэмэльно, но с XSLT распарсить можно. А баррэ, по-мойму, и так понятно когда ставить. Примитивно говоря, баррэ нужно везде где не используется «нулевой» лад. Если исключения и есть, то думается немного.
Смотри получается ты написал только каким пальцем зажимать tab=«12331X», но аккорд то он на несколько ладов, поэтому придется другое придумать.
Аккорд — это лад/номера зажимаемых струн, еще лад/номера зажимаемых струн, еще лад/номера зажимаемых струн. Примерно так.
Думаю нужно что-то вроде:
Аккорд — это лад/номера зажимаемых струн, еще лад/номера зажимаемых струн, еще лад/номера зажимаемых струн. Примерно так.
Думаю нужно что-то вроде:
<accrord name="Hm">
<lad nomer-lada="2" barre="da" dlina-barre="5">
<struna id="1" finger="1" />
<struna id="5" finger="1" />
</lad>
<lad nomer-lada="3">
<struna id="2" finger="2" />
</lad>
<lad nomer-lada="4">
<struna id="3" finger="3" />
<struna id="4" finger="4" />
</lad>
</accord>
Ой, я ошибся с аккордом, поэтому получилось непонятно. Я имел в виду, что аккорд можно задавать набором из 6 чисел (срез табулатуры). Hm будет тогда «2-3-4-4-2-X» (добавил тире, т.к. всё-таки номер лада — не обязательно одна цифра). Баррэ, как я уж написал, — абсолютно лишняя (вычисляемая) информация. Вот номер пальца вычислить труднее, но может эта инфа и не нужна настолько чтобы вместо 6ти чисел использовать такой иксэмэль.
<hm tab="12331X">
Это Bm, или все нужно сдвинуть на лад.
Смотри получается ты написал только каким пальцем зажимать tab="12331X">, но аккорд то он на несколько ладов, поэтому придется другое придумать.
Цифры в такой записи — номера ладов, а не пальцев. Можно добавить в таком же виде номера пальцев, типа того: tab="23442X" fingers="12431X".
Да теперь понятно, запишем по итогу
Только пальцев все таки 5
А не 6 )
<hm tab="23442X" fingers="12431">
Только пальцев все таки 5
fingers=«12431X»
А не 6 )
А Dm/F# как вы запишете?
Может вам это пригодится. Мой преподаватель пользуется такой ситсемой записи аккордов. Мне кажется очень удобно.
Каждая нота аккорда обозначается дробью, в которой в числителе указывается струна, а в знаменателе лад, на котором струна зажимается. Хитрость в том, что дроби располагаются в том порядке, в котором расположены пальцы их зажимающие – указательный, средний, безымянный и мизинец. Если в аккорде используется большой палец, его дробь ставится в самый конец, и даже можно взять её в скобки. Таким образом, больше пяти дробей быть не может – пальцев на руке больше нет ;)
Если используется барре, то струны, которые должны прозвучать, записываются подряд. Также записываются открытые струны – в знаменателе 0. Если палец не используется, то на его месте ставится — % (типа 0/0)
Такая форма очень удобна как при написании, так и при диктовке, например, преподаватель – ученику: преподаватель называет дроби, а ученику понятно, что сначала он ставит указательный палец на n-струну/ на m-лад, затем следующий палец и т.д. Примеры обозначений с картинками есть на гитарколледжевском форуме: forum.guitarcollege.ru/viewtopic.php?f=10&t=10588
Например тот-же Dm/F# запишется так: 1/1, 6/2, 3/2, 2/3
Каждая нота аккорда обозначается дробью, в которой в числителе указывается струна, а в знаменателе лад, на котором струна зажимается. Хитрость в том, что дроби располагаются в том порядке, в котором расположены пальцы их зажимающие – указательный, средний, безымянный и мизинец. Если в аккорде используется большой палец, его дробь ставится в самый конец, и даже можно взять её в скобки. Таким образом, больше пяти дробей быть не может – пальцев на руке больше нет ;)
Если используется барре, то струны, которые должны прозвучать, записываются подряд. Также записываются открытые струны – в знаменателе 0. Если палец не используется, то на его месте ставится — % (типа 0/0)
Такая форма очень удобна как при написании, так и при диктовке, например, преподаватель – ученику: преподаватель называет дроби, а ученику понятно, что сначала он ставит указательный палец на n-струну/ на m-лад, затем следующий палец и т.д. Примеры обозначений с картинками есть на гитарколледжевском форуме: forum.guitarcollege.ru/viewtopic.php?f=10&t=10588
Например тот-же Dm/F# запишется так: 1/1, 6/2, 3/2, 2/3
табы этой версии уже намного лучше и прятней читаются. всё круто, продолжайте в том же духе
Идея очень хороша, но! Посмотрите, во что превращаются аккорды без стилей. Посмотрите на код — его как-то нереально много для такой задачи. Учтите, что показать все это на пустой странице гораздо проще, чем сделать код полностью автономным и отображаемым на любом сайте без конфликтов с его собственной разметкой и стилями. Сложность решения может запросто отпугнуть пользователей.
По-моему, вы увлеклись блочной версткой, а тут как раз тот случай, когда нужно использовать таблицу, ведь в ней есть все что вам нужно:
— лады и струны (столбцы и строки);
— звучание струн и номера ладов (th в первом столбце и в thead или tfoot);
— название аккорда (caption);
— и даже баррэ (rowspan).
Все будет как на ладони даже при просмотре чистого html, а уж со стилями тем более. И для стилизации скорее всего понадобится не так много правил, как для списков и дивов.
По-моему, вы увлеклись блочной версткой, а тут как раз тот случай, когда нужно использовать таблицу, ведь в ней есть все что вам нужно:
— лады и струны (столбцы и строки);
— звучание струн и номера ладов (th в первом столбце и в thead или tfoot);
— название аккорда (caption);
— и даже баррэ (rowspan).
Все будет как на ладони даже при просмотре чистого html, а уж со стилями тем более. И для стилизации скорее всего понадобится не так много правил, как для списков и дивов.
Сказать по правде, мне было бы удобнее вставить 100%-работающую картинку типа r3code.ru/hm.png, чем тучу кода и стилей с вероятностью глюков на конкретном сайте или на конкретном клиенте. Аккордов все же не так много, а основных и того меньше, в 80% случаев копируются одни и те же 20 аккордов. Мне кажется, что гораздо более востребовано и интересно применение html+css для табулатур. Или нот, как писали выше.
С вероятностью глюков вы перегибаете — это все решаемо.
О табулатурах: Москва не сразу строилась — и я все сразу не могу сделать, это только начало. html+css для табулатур — это будущие задачи.
Аккорд — начальная точка, это наименне сожная запись и их я знаю сам. Остальные записи изобилуют спец символами и требуют более глубокого изучения мной.
О табулатурах: Москва не сразу строилась — и я все сразу не могу сделать, это только начало. html+css для табулатур — это будущие задачи.
Аккорд — начальная точка, это наименне сожная запись и их я знаю сам. Остальные записи изобилуют спец символами и требуют более глубокого изучения мной.
Посмотрите, во что превращаются аккорды без стилей.
А кто сказал, что кто-то будет смотреть на них без стилей?! Это и не предполагается, я не ставил задачи сделать отображение аккордов для браузеров типа lynx. Это все для современного пользователя с нормальным браузером.
Wap — версия? Нет — такой задачи тоже не было.
… код — его как-то нереально много для такой задачи.
Уж тут простите, мерки у каждого свои, да и код тут не на один аккорд указан, если смотреть внимательно.
… тут как раз тот случай, когда нужно использовать таблицу
Конечно у каждой задачи может быть и не одно решение.
Я думаю у таблиц будут проблемы, но утверждать не берусь, попробую.
… показать все это на пустой странице гораздо проще, чем сделать код полностью автономным и отображаемым на любом сайте без конфликтов с его собственной разметкой и стилями. Сложность решения может запросто отпугнуть пользователей.
А где вы видели, что если кто-то берет чью-то разработку, то он бездумно вставляет ее в свой код и ничего не делает?
Конечно могут возникнуть конфликты имен, но об этом пользователя предупреждают. Если пользователь заинтересован встроить к себе это решение, я думаю, он постарается свой CSS на сайте подпилить, чтобы все было нормально.
Все будет как на ладони даже при просмотре чистого html, а уж со стилями тем более. И для стилизации скорее всего понадобится не так много правил, как для списков и дивов.
Мы не в каменном веке, чтобы смотреть в современном браузере Html без стилей — их для того и придумали, чтобы удобно было. Чистый html интересен только кодеру — пользователь не код оценивает, а оформление и содержание.
Гитарный гриф суть таблица, мы же не воспринимаем его слоями.
Я подпилю, вы подпилите, но мы оба предпочтем такому решению какой-нибудь гугль-виджет с аналогичным или пусть даже чуть меньшим функционалом, но который можно вставить и забыть, и который 100% увидит любой посетитель.
А где вы видели, что если кто-то берет чью-то разработку, то он бездумно вставляет ее в свой код и ничего не делает? Конечно могут возникнуть конфликты имен, но об этом пользователя предупреждают. Если пользователь заинтересован встроить к себе это решение, я думаю, он постарается свой CSS на сайте подпилить, чтобы все было нормально.
Я подпилю, вы подпилите, но мы оба предпочтем такому решению какой-нибудь гугль-виджет с аналогичным или пусть даже чуть меньшим функционалом, но который можно вставить и забыть, и который 100% увидит любой посетитель.
Еще момент: id="Am".
А если на странице два Am?
А если на странице два Am?
Классы finger и label лишние. Есть есть класс лада, то это точно finger, а если нет — значит label.
Хорошая оптимизация получилась, не возражаешь я его в топик ссылку сделаю, как еще одна ветка?
Ну и немного под себя переделаю.
Ну и немного под себя переделаю.
Как этот символ записать? Я поменял в твоем примере DOCTYPE на
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">и теперь они все отображаются как в—Џ, вместо точек.
Юникод не всегда хорошо, я уже начал переделывать под & bull; но тогда барре расползается — он ж первой метке привязано.
Твой вариант в этом исполнении плохо масштабируемый и при выводе на печать тоже есть проблемы. Ща сижу напильником обпиливаю )
Отлично, приветствую всяческие доводки и усовершенствования!
Еще один шаг к идеалу )
Еще один шаг к идеалу )
Неплохо сделано. Как вариант, для большого баррэ можно использовать <big>, для маленького — <small>. А еще в голове вертится антисемантичная мысль на тему h1-h6 :)
Даешь микроформаты! :)
Если поиграть с рамкой li, наверняка получится избавиться от оборачивающего div (кстати поправьте у него класс, табулатура все же другое). А как будете рисовать лады, если аккорд на 4 ладах (D# например)?
Если поиграть с рамкой li, наверняка получится избавиться от оборачивающего div (кстати поправьте у него класс, табулатура все же другое). А как будете рисовать лады, если аккорд на 4 ладах (D# например)?
Из интереса сразу попробовал с твоего варианта и тоже самое сделал )
Да ладно чем тут чересчур-то? По моему классно вышло.
P.S. Вот те спать то не хотелось в полчетвертого утра в воскресенье, будто с утра не на работу)
Да ладно чем тут чересчур-то? По моему классно вышло.
P.S. Вот те спать то не хотелось в полчетвертого утра в воскресенье, будто с утра не на работу)
Чето у меня в IE7 он странно ведет — номера пальцев под метками показывает. У тебя также?
Попробую завтра переделать одним списком, как у тебя.
Я то блоками мыслил изначально — до такой оптимизации сразу не допер )
Я то блоками мыслил изначально — до такой оптимизации сразу не допер )
Гениально!
а вот и мой вариант rukeba.com/chords/
Продайте эту идею какому-нибудь ultimate-guitar.com вместе с конвертором.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Запись гитарных аккордов HTML+CSS (теперь с баррэ)