OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




Запись гитарных аккордов HTML+CSS (теперь с баррэ)

Веб разработка - CSS

запись гитарных аккордов html+css (теперь с баррэ)


Увлекло меня это дело — описание гитарных аккордов, по научному — аппликатура. Начало было положено в предыдущим топике про запись аккордов и теперь получило своё развитие.
Я учел пожелания и сделал новую версию.
Теперь метка прижимаемой струны — это точка • (& bull;) вместо © (& copy;).
В прошлой версии не было поддержки отображения баррэ — теперь есть и большое, и малое баррэ.
Добавлена поддержка Google Chrome.

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

Баррэ


Получилось сделать баррэ. Теперь можно описывать аккорды как с большим, так и малым баррэ.

Как это выглядит в Html


Привожу часть кода, аккорд с малым баррэ.

<div id= Dm class= accord float-l >            <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span>0</span></li>                                      <li><span>X</span></li>                                      <li><span>X</span></li>                               </ul>            <div class= grif >               <div class= porojek verx ></div>               <ul>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                       <li><span>•</span><small>3</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>            <div class= accord-name >Dm</div>                       </div><!-- /accord Dm -->         <div id= Am class= accord float-l >            <ul>                                      <li><span>0</span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span>0</span></li>                                      <li><span>X</span></li>                               </ul>            <div class= grif >               <div class= porojek verx ></div>               <ul>                                      <li><span> </span></li>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>3</small></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>            <div class= accord-name >Am</div>                       </div><!-- /accord Am -->                  <div id= F class= accord float-l >            <p>Большое баррэ</p>            <div class= nomer-lada ><ol type= I start= 1 ><li> </li></ol></div>            <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>            <div class= grif >               <div class= porojek verx ></div>               <div class= barre ></div>               <ul>                                       <li><span>•</span><small>1</small></li>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>1</small></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>4</small></li>                                       <li><span>•</span><small>3</small></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>             <div class= accord-name >F</div>                       </div><!-- /accord F -->                  <div id= Db class= accord float-l w4 >            <p>Малое баррэ</p>            <div class= nomer-lada ><ol type= I start= 1 ><li> </li></ol></div>            <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span>X</span></li>                               </ul>            <div class= grif >               <div class= porojek verx ></div>               <div class= barre na3 ></div>               <ul>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>3</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>4</small></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>             <div class= accord-name >I-C# или Db</div>                       </div><!-- /accord Db -->                  <div id= H class= accord float-l >            <div class= nomer-lada ><ol type= I start= 2 ><li> </li></ol></div>            <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span>X</span></li>                               </ul>            <div class= grif >               <div class= porojek ></div>               <div class= barre ></div>               <ul>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>1</small></li>                                       <li><span>•</span><small>1</small></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                       <li><span>•</span><small>4</small></li>                                       <li><span>•</span><small>3</small></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>             <div class= accord-name >H</div>                       </div><!-- /accord H -->                  <div id= Hm class= accord float-l >            <div class= nomer-lada ><ol type= I start= 2 ><li> </li></ol></div>            <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span>X</span></li>                               </ul>            <div class= grif >               <div class= porojek ></div>               <div class= barre na5 ></div>               <ul>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>1</small></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                       <li><span>•</span><small>2</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <ul>                                      <li><span> </span></li>                                      <li><span> </span></li>                                       <li><span>•</span><small>4</small></li>                                       <li><span>•</span><small>3</small></li>                                      <li><span> </span></li>                                      <li><span> </span></li>                               </ul>               <div class= porojek ></div>               <div class= clearfix ></div>            </div>             <div class= accord-name >Hm</div>                       </div><!-- /accord Hm -->         <div class= clearfix ></div>         <dl>            <dt>Обозначения</dt>            <dd class= bull ><b>•</b><sup>1</sup><span>             — место прижатия струны и номер пальца</span></dd>            <dd><small>0</small><span> — звучит неприжатая струна</span></dd>            <dd><small>X</small><span> — струна не звучит</span></dd>            <dd><span><strong>I.</strong></span>            — номер лада на котором зажимается баррэ</span></dd>            <dd><span><strong>[</strong></span>            — обозначение баррэ (зажимается 1 пальцем)</span></dd>         </dl>          <p class= float-r mar1-b ><a href= http://r3code.habrahabr.ru/blog/53792/ >r3code.habrahabr.ru</a></p>      </div><!-- /content -->

 


Читайте:


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


Защитный код
Обновить

News image

Выход Adobe Reader для Android

Adobe Systems сегодня объявила о начале официального распространения бесплатной версии Adobe Reader для операционной системы Android. Напоминаю, что...

News image

Google анонсировал экспериментальную версию Chrome Canary Build

Известная медиакорпорация Google продемонстрировала новейшую опытную модификацию веб-обозревателя Chrome – информацию об этом недавно разместила на ...

News image

Google I/O: новый Android, Google TV и машинное обучение

Несмотря на то, что первый день конференции I/O, проводимой компанией Google для разработчиков, принёс много интересных анонсов, во второй, заключит...

News image

Apple Objective-C вошел в десятку популярных языков программирования

Компания TIOBE Software опубликовала очередной рейтинг популярности языков программирования, формируемый путем подсчета количества их упоминаний при...

News image

LiveCycle: хорошее подспорье для разработчиков

Adobe LiveCycle Enterprise Suite, последняя версия которого вышла в ноябре, представляет собой набор веб-сервисов, которые позволяют организациям ст...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

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

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...