Blog. Just Blog

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

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

Предзагрузка изображений с помощью CSS

01.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:
  1. var img1=new Image();
  2. img1.src='/images/slider_image.jpg';
  3. var img2=new Image();
  4. img2.src='/images/menu_sprites.png';
  5. var img3=new Image();
  6. img3.src='/images/loading_spinner.gif';
Но можно обойтись вообще без скриптов, сделав предзагрузку изображений на чистом CSS. Делается это путем добавления псевдоэлемента :after к тегу body. В свойствах псевдоэлемента перечисляются ссылки на все картинки, которые должны быть предварительно загружены, а сам псевдоэлемент скрывается через display:none.
  1. <style type="text/css">
  2. body:after {
  3.     content:
  4.         url('/images/slider_image.jpg')
  5.         url('/images/menu_sprites.png')
  6.         url('/images/loading_spinner.gif')
  7.     ;
  8.     displaynone;
  9. }
  10. </style>
Способ протестирован во всех современных браузерах, все работает как надо. Большим плюсом прелоадера на CSS является то, что он будет работать даже в том случае, если у пользователя отключены скрипты в браузере.

Просмотров: 4915 | Комментариев: 5

Обработка событий датчиков и геолокация на JavaScript

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

Обработка событий датчиков положения на JavaScript

В одной из предыдущих статей мы рассмотрели обработку на JavaScript сенсорных экранов мобильных устройств. Сегодня продолжим тему взаимодействия web-страниц и приложений с мобильными устройствами и рассмотрим работу с различными датчиками, которые установлены в современных девайсах. Это датчики положения, перемещения, освещенности и приближения, а также модуль геопозиционирования.

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

Проверка стойкости пароля с помощью подсчета энтропии

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

Проверка стойкости пароля с помощью подсчета энтропии

Каждому пользователю интернета приходилось регистрироваться на каких-нибудь сайтах или сервисах, и одна из обязательных составляющих любой регистрации - придумывание пароля. Есть даже официальные рекомендации по составлению паролей, не говоря уже о многочисленных статьях на эту тему. Многие сервисы при регистрации пользователя проверяют наличие определенных групп символов в пароле, в результате складывается ситуация, как в верхней половине приведенного здесь комикса. А вот как определить, действительно ли тот или иной пароль является сложным?

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

Запрет просмотра сайта во фрейме

21.10.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Возвращаясь к теме защиты контента сайта, нужно упомянуть еще защиту от просмотра сайта во фрейме другого сайта. Кроме того, что никто не сможет таким способом использовать ваш контент, в какой-то мере это поможет защититься от DDoS-атак, когда на сайте с большой посещаемостью ставится скрытый iframe со ссылкой на атакуемый сайт. Посещая основной сайт, пользователи помимо своей воли открывают также и сайт-жертву, создавая огромную нагрузку на него. Такие инциденты уже неоднократно происходили. В этой статье я попытался собрать различные способы защиты сайтов от открытия во фрейме и различные способы их преодоления.

Первый способ защиты основан на скриптах JavaScript. Его суть сводится к тому, что проверяется соответствие top-окна открытой странице, если они не совпадают, значит страница открыта во фрейме. При обнаружении такой несправедливости браузер перенаправляется на другую страницу. Я использую вот такой вариант скрипта для "побега" из фрейма:
  1. // Frame-Killer #1
  2. if (top!=self) { top.location.href='/'; }
Есть еще один похожий вариант, который делает почти то же самое:
  1. // Frame-Killer #2
  2. if (top.location!=location) { top.location.href=location.href; }
И, наконец, скрипт, останавливающий загрузку страницы, если она открывается во фрейме. На мой взгляд, очень сомнительный способ.
  1. // Frame-Killer #3
  2. if (window.parent.frames.length>0) { 
  3.     // Mozilla, Opera, Chrome...
  4.     if (window.stop!=undefined) {
  5.         window.stop();
  6.     }
  7.     // для Internet Explorer
  8.     else if (document.execCommand!=undefined) {
  9.         document.execCommand("Stop"false);
  10.     }
  11. }
Все эти скрипты, понятное дело, должны находиться на защищаемом сайте. Долгое время все эти способы прекрасно работали, пока в HTML5 не появился специальный атрибут тега iframe - sandbox, который позволяет установить ограничения на контент, загружаемый во фрейме. Если этот атрибут имеет пустое значение, то на любой странице, которая открыта в этом фрейме, скрипты выполняться не будут. Соответственно, не выполнится и скрипт для "побега".
  1. <iframe src="http://your_site" sandbox=""></iframe>
"Песочница" поддерживается всеми современными браузерами (список браузеров и версии вы можете посмотреть здесь).

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

Как добавить комментарии в JSON

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

Как добавить комментарии в JSON

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

Но, как оказалось, формат JSON не поддерживает комментарии (Douglas Crockford - создатель JSON, если что), а PHP, придерживаясь стандарта, при попытке декодировать файл с комментариями возвращает пустые данные. Вот для наглядности два простейших примера, как это (не) работает:
  1. $a='{
  2.     "one":1/* first number */
  3.     "two":2  /* second number */
  4. }';
  5. print_r(json_decode($a));
  6.  
  7. // Пусто :(
  1. $a='{
  2.     "one":1// first number
  3.     "two":2  // second number
  4. }';
  5. print_r(json_decode($a));
  6.  
  7. // Пусто :(
Где-нибудь в описании объектов на JavaScript подобные комментарии воспринимались бы нормально, но только не в файле JSON. В обоих случаях возвращается пустота.

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

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