пятница, 27 марта 2009 г.

Лицензия на материалы блога со скрытием по клику

Недавно посетил блог Andrey'я, в последнее время активно отписывающегося в комментариях — DebianWatch.com. Помимо статьи «Debian: краткая история большого проекта» нашёл там несколько интересных дизайнерских решений.

Примерно неделю тому назад я вставил в шаблон лицензию на материалы блога (вдохновил меня на это аналогичный блок в блоге virens«Записки дебианщика»). Но смотрелось это как-то не очень.

И вот на DebianWatch.com я вижу как раз то, что мне нужно: лицензия показана в колонке справа, а внизу висит только иконка Creative Commons. Прекрасно! 10 минут возни с шаблоном — и у меня уже есть такая же штуковина :)

Но всё неймётся: правая колонка теперь разрослась до невиданной высоты, что начинает нервировать, если пост маленький. В жертву приносится дерево постов, но колонка все равно слишком высокая. Тут на глаза попадается учебник по HTML/JavaScript и начинается почти часовое приключение :)

Нужно отметить, что web-дизайнер из меня никудышный, и JavaScript я не знаю.

Тем не менее, в течении часа — не без помощи добрых людей, конечно (см. пост скриптум) — моя задумка была реализована: по умолчанию отображается надпись «Показать лицензию», если по ней кликнуть, лицензия отображается, а внизу показывается кликабельная надпись «Скрыть лицензию». Делается это так:
  1. Добавляем в правую колонку (или куда вы хотите пихнуть лицензию) гаджет «HTML/JavaScript»;
  2. в заголовке пишем что-то вроде «Лицензия на материалы этого блога»;
  3. в тело гаджета суём такой код:
    <div id="license-header" display="block" onclick="document.getElementById('license-body').style.display='block';
    document.getElementById('license-header').style.display='none'">
    <h5>Показать лицензию<h5>
    </h5></h5></div>
    
    <div id="license-body" style="display:none">
    Лицензия будет здесь
    <h5 onclick="document.getElementById('license-body').style.display='none';
    document.getElementById('license-header').style.display='block'">Скрыть лицензию</h5>
    </div>
  4. надпись «Лицензия будет здесь» заменяем на собственно лицензию, сохраняем это всё — вуаля, лицензия со скрытием готова!


В обсуждении с комментаторами родилась идея: не скрывать картинку, которая содержится в лицензии, а сделать её кликабельной — своего рода кнопкой. Курсор при наведении меняется на «руку». Результат вы можете лицезреть справа, код — ниже:
<div id="license-header" onclick="toggleLicense()" onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='auto'">
<table align='center'>
<tr>
<td>
<script type="text/JavaScript">
function toggleLicense()
{
document.getElementById('license-body').style.display == 'none'? document.getElementById('license-body').style.display='block' : document.getElementById('license-body').style.display='none';
}                                                      
</script>
<img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"/>
</td>
<td>
<span style="font-size:11px">кликните для показа/скрытия лицензии</span>
</td>
</tr>
</table>
</div>

<div id="license-body" style="display:none">
This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>.<br/>

Материалы сайта <a href="http://debiania.blogspot.com/">Debiania.blogspot.com</a> написаны <a href="http://www.blogger.com/profile/15979236009981641914">Programmaster</a>'ом и доступны на условиях лицензии Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported License. Вы можете копировать, распространять, показывать эту работу, и создавать производные работы <b>в некоммерческих целях на условиях</b>:<br/>
<ol><li>обязательной ссылки на автора (<a href="http://www.blogger.com/profile/15979236009981641914">Programmaster</a>, <a href="http://debiania.blogspot.com/">Debiania.blogspot.com</a>)</li><li>распространении любых производных работ на условиях этой же лицензии (<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">ссылка на лицензию</a> обязательна!).</li></ol>Это означает, например, что Вы можете копировать тексты с этого сайта на свой, помещая ссылки на мой сайт и на условия лицензии, но не можете размещать рядом с этими текстами контекстную рекламу.<br/>
<b>Пожалуйста, соблюдайте условия лицензии!</b>
</div>


Если хочется ещё и иконку внизу страницы — это тоже несложно:
  1. Открываем Панель инструментов Blogger;
  2. переходим в «Макет»;
  3. сменяем вкладку на «Изменить HTML»;
  4. в самый конец кода, перед </body> ставим такой код:
    <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png'/></a>
  5. готово!

И последнее на сегодня. Со временем вам наверняка захочется запихнуть ещё одну-две иконки рядом с предыдущей. Вот только если поставить теги img подряд, пусть даже в одну строку, изображения будут расположены подряд друг под другом. Выход — таблицы:
<table align='center'>
<tr>
<td>
<!-- Site Meter XHTML Strict 1.0 -->
<script src='http://s51.sitemeter.com/js/counter.js?site=s51debiania' type='text/javascript'>
</script>
<!-- Copyright (c)2006 Site Meter -->
</td>
<td>
<!-- Creative Commons License Logo -->
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png'/></a>
</td>
</tr>
</table>
Здесь мы видим два изображения (первое генерируется скриптом, но можете считать, что там тег img): иконки SiteMeter и Creative Commons.

Удачи ;)

P.S. Спасибо dmage и kane с irc://irc.turli.net/#linux за помощь в разборках с JavaScript.
Также выражаю благодарность Andrey'ю и Dr.AKULAvich'у за содержательные и креативные комментарии.

Копируете статью — поставьте ссылку!

36 комментариев:

Dr.AKULAvich комментирует...

Интересный вариант.
А можно ли сделать кнопки показать/скрыть псевдоссылками? То есть, чтобы курсор менялся при наведении.

Andrey комментирует...

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

Кстати, можно ведь оставить кнопочку видимой, а текст скрывать :)

Programmaster комментирует...

Dr.AKULAvich пишет…

А можно ли сделать кнопки показать/скрыть псевдоссылками? То есть, чтобы курсор менялся при наведении.
Честно говоря, не знаю: как я уже писал в посте, JavaScript'ом не владею. Но покопаюсь, самому интересно стало :)

Andrey пишет…

Самое главное, за что я люблю блоги, это решение, найденное кем-то, улучшается.
Open Source, ей-богу! :)

Кстати, можно ведь оставить кнопочку видимой, а текст скрывать :)
Кстати, идея! Сейчас сделаем :)

Andrey комментирует...

Обратил внимание, что CC кнопочка внизу страницы не имеет ссылку на лицензию, можно добавить, ведь пользователи любят иногда щелкать по кнопочкам, пузомеркам и счтетчикам :)

Programmaster комментирует...

2Andrey:
Спасибо за замечание, исправил.

Andrey комментирует...

2Programmaster
Вариант с нескрываемой кнопкой можно тоже добавить в статью, чтобы так сказать два типа решения было. Ну если хочешь конечно :)

Programmaster комментирует...

Dr.AKULAvich пишет…
А можно ли сделать кнопки показать/скрыть псевдоссылками? То есть, чтобы курсор менялся при наведении.
Вот, нашёл решение!
Нужно в тег добавить параметры onmouseover (когда мышь на объекте) и onmouseout (когда мышь уходит с объекта), например:
<img alt="Creative Commons License" style="border-width: 0pt;" onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='auto'" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png">, то есть если мышь на картинке, то сменить курсор на «руку», а если мышь уходит — вернуть «auto».
Список существующих видов курсоров.

Andrey пишет…
Вариант с нескрываемой кнопкой можно тоже добавить в статью, чтобы так сказать два типа решения было.
Да, естетсвенно. Будет через часок — надо подкрепиться :)

Andrey комментирует...

2Programmaster
А как все-таки с текстом быть, чтобы курсор менялся?
Может неплохо чтобы все-таки была надпись "подробнее" или "условия лицензии"?

Programmaster комментирует...

А как все-таки с текстом быть, чтобы курсор менялся?
Точно так же, как с изображением:
<h6 onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='auto'">показать или скрыть лицензию</h6>

Может неплохо чтобы все-таки была надпись "подробнее" или "условия лицензии"?
Да что-то не подходит ничего… Пока что вон воткнул надпись под изображение (ближе не получается, чёрт) — пусть будет так.

Andrey комментирует...

Над надписью курсор остается неизменным

Programmaster комментирует...

Если ты про надпись в правой колонке — курсор над надписью и не должен меняться, так как она не «кликабельна».

А тот код, что я приводил, работоспособен — проверено.

Andrey комментирует...

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

Andrey комментирует...

update: сделал по-другому, надпись вставил в скрипт после тега див(там где кнопка и текст: кликните для показа/сокрытия лицензии) див=div, так пишу, потому что иначе коммент не отправляется.

кликните для показа/сокрытия лицензии в тегах h6 Соответственно убираем

Со всеми моими изменениями работу скрипта смотри в моем блоге.

Programmaster комментирует...

Да, я тоже текст под иконкой вынес за пределы первого div'а и заключил в span вместо h6. Кроме того, вручную выставил высоту шрифта в 11 пикселей — теперь как раз то, о чём мечталось :)

Маленький хинт по постингу тегов в камментах (да и в блоге пригодится): тег (например, <div>) записывается так: «&lt;div&gt;». Сам ампресанд («&» который) выглядит как «&amp;».

;)

Andrey комментирует...

Интересный хинт, буду иметь ввиду. Сейчас сделал как у тебя - обычный шрифт 11-го размера, смотрится реально лучше.

Andrey комментирует...

update: Переместил текст справа от картинки, тоже интересно смотрится :)

Programmaster комментирует...

О, вот так мне нравится!
Сейчас поправлю свою и обновлю пост.
Спасибо!

Andrey комментирует...

Пожалуйста! Это наш коллективный труд, код получился отличный, так же как и сам блок с лицензией.

Только вот правильно может писать не сокрытия а скрытия?

Programmaster комментирует...

Наверное, да. От «сокрытия» какой-то уголовщиной тянет :)

Andrey комментирует...

В опере почему-то курсор не меняется при наведении на кнопку

Programmaster комментирует...

Да, а ещё у некоторых пользователей ADBlock+ не отображается кнопка и, соответственно, не разворачивается лицензия.

Надо будет этими багами заняться (для оперы можно попробовать менять курсор на hand, а не pointer; можно сделать кликабельной не только картинку, но и надпись — для этого не div с img и span заключаем в таблицу, а в div заключаем таблицу с img и span внутри).

Andrey комментирует...

А почему adblock режет скрипт?

Andrey комментирует...

update: наконец-то удалось научить курсор меняться при наведении на текст, но пришлось для этого прописать стиль в css.
Вообщем новая концепция блока копирайта у меня в блоге.
Большой плюс, то что сейчас открытие менюшки не привязано к кнопке (не все включают графику + картинка может быть вырезана adblock`ом), еще плюс, то что в опере курсор при наведении на текст тоже меняется.

Теперь получается, что кнопка ведет на сайт CC, а псевдо-ссылка открывает менюшку. Я вот думаю кнопку вообще сделать неактивной, как считаешь?

Programmaster комментирует...

Может быть, это уже стереотип, но я ожидаю, что картинка будет действовать как кнопка. Всё-таки лучше, чтобы весь блок был кликабелен и разворачивал лицензию — так, как на данный момент сделано у меня (только что поправил).

Касательно курсора — странно, я считал, что параметр style="тут обычный CSS код" у тега равносилен class="тут имя стиля, объявленного в <style>".

Andrey комментирует...

Наверное равносильно, надо попробовать.
Кстати, ты как реализовал сейчас код? У тебя реализация сейчас то что надо.

Andrey комментирует...

Да, style и class равносильны, я просто прописал в style cursor: pointer; и при наведении на текст курсор меняется. Обнови пожалуйста блок кода в статье, хочу твою реализацию посмотреть. У меня почти как у тебя, только кнопка неактивна. Сейчас буду ее делать.

Programmaster комментирует...

Дык сейчас в статье как раз тот код, что и в гаджете. Символ в символ.

Andrey комментирует...

Точно :)
Реализовал один в один как у тебя, только надпись сделал в виде ссылки (подчеркнутый текст) и надпись звучит как "показать/скрыть лицензию"
Твой вариант считаю идеальным с точки зрения написания кода.
Поздравляю, гаджет готов :)

Programmaster комментирует...

Только что взглянул на блог через Opera (из-под винды, правда — у меня оперы нету и ставить долго, а комп сестры как раз под рукой…) — «рука» отображается нормально.
Правда, у меня в Iceweasel она отображается только после полной загрузки страницы — или около того (не знаю, как в Opera на винде — там интернет побыстрее и я не успеваю заметить :)

Programmaster комментирует...

Да, пожалуй, это финал :) Большего не надо.

«Идеал — это не когда нечего добавить, а когда нечего выбросить» (не помню, кто это сказал :(

Прими встречные поздравления.

Andrey комментирует...

А чего смайлик такой - :(
:)

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

virens комментирует...

Да, занятное решение. На меня тут напала очередная волна минимализЬма, думаю применить.

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

Надо будет приделать это к моему многострадальному и веками переделываемому шаблону :-)

duke комментирует...

Присоединяюсь к virens`у, код действительно отличный :)

duke комментирует...

2virens
У меня есть еще одна идея для Вашего многострадального шаблона, отправил мыло на mydebianblog[dog]gmail[dot]com

Programmaster комментирует...

virens комментирует…
Programmaster, ты, конечно, поскромничал, когда сказал, что не знаешь языков программирования.
Я говорил только про JavaScript:
>Нужно отметить, что web-дизайнер из меня никудышный, и JavaScript я не знаю.
:P
Да и заявление «никудышный дизайнер» относится к отсутствию таланта созидать красивое, а не к незнанию HTML/JavaScript. Хотя в первом я таки немного ориентируюсь :)

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

duke комментирует...

2Programmaster
Ты еще хотел копирайт к посту прикрутить, мы с тобой обсуждали если помнишь.

Отправить комментарий

Примечание. Отправлять комментарии могут только участники этого блога.

 
Blogger logo Debian logo Creative Commons License FeedBurner Subscribers Counter