Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Защита контента сайта от копирования

05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли он захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
  1. function nocopy(event) {
  2.     var event event || window.event;
  3.     if (event.preventDefault) { event.preventDefault(); }
  4.     else { event.returnValue false; }
  5.     return false;
  6. }
  7.  
  8. document.onmousedown nocopy;
  9. document.onmouseup nocopy;
  10. document.onmousemove nocopy;
  11. document.ondragstart nocopy;
  12. document.onselectstart nocopy;
  13. document.ontextmenu nocopy;
  14. document.oncopy nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.

Читать статью целиком »
Просмотров: 20097 | Комментариев: 26

Горизонтальный скроллер на JavaScript

17.08.2011 | Категория: Web-мастеру и не только | Автор: ManHunter

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

Читать статью целиком »
Просмотров: 11334 | Комментариев: 21

Стилизация checkbox с использованием CSS и JavaScript

11.08.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.
  1. <style type="text/css">
  2. /* Стиль для обертки отмеченного checkbox'а */
  3. div.boxChecked {
  4.     backgroundurl("checkbox.gif"no-repeat 0 3px;
  5. }
  6. /* Стиль для обертки неотмеченного checkbox'а */
  7. div.boxUnchecked {
  8.     backgroundurl("checkbox.gif"no-repeat 0 -18px;
  9. }
  10. /* Прозрачный стиль для checkbox'а */
  11. div.boxChecked inputdiv.boxUnchecked input {
  12.     cursorpointer;
  13.     margin0px;
  14.     padding0px;
  15.     width16px;
  16.     opacity0;
  17.     -moz-opacity0;
  18.     -khtml-opacity0;
  19.     filterprogid:DXImageTransform.Microsoft.Alpha(opacity=0);
  20. }
  21. </style>
Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с JavaScript.

Читать статью целиком »
Просмотров: 19535 | Комментариев: 14

Поле ввода с убирающейся подсказкой

20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:
  1. <label for="search">Поиск по сайту:</label>
  2. <input type="text" name="search" id="search" value="что ищем?"
  3.        onfocus="if(this.value==this.defaultValue){this.value='';}"
  4.        onblur="if(this.value==''){this.value=this.defaultValue;}">
Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Читать статью целиком »
Просмотров: 17497 | Комментариев: 19

Исследование защиты программы TopStyle 4

21.07.2009 | Категория: Темная сторона Силы | Автор: ManHunter

Скриншот программы TopStyle 4

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

Читать статью целиком »
Просмотров: 5695 | Комментариев: 13

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.17 сек. / MySQL: 3 (0.0574 сек.) / Память: 4.75 Mb
Наверх