ИльяКомментарии к записи Как запретить скачивание изображений с сайта? отключены
Скажу сразу — 100% защиты нет, но Можно максимально Усложнить жизнь тем, кто ворует или использует url изображений. Вот несколько способов защиты: 1) При помощи Java Script. При помощи JS блокируем возможность вызова правой кнопкой мыши на изображении меню с Сохранить изображение. Как вариант против неопытных пользователей подходит. <img src=»image.jpg» oncontextmenu=»return false;» /> 2) Состоит в том, чтобы спрятать изображение и отобразить его в качестве background (фона) через стили. Его опять же можно скачать, но только просмотрев CSS-запись, а после введя соответствующий url в строку ввода адреса. Это уже существенно усложнит жизнь тем, кто скачивает Ваши изображения! Код CSS. Создаём класс со скрытым изображением .background {background: url(‘img.jpg’) no-repeat; width: 150px; height: 150px;} и код HTML. Вставляем в соответствующее дял изображение место. <div class=»background»></div> <!— скрытое изображение —> Можно стили сразу в div прописать <div style=»background: url(‘img.jpg’) no-repeat; width: 150px; height: 150px;»></div> 3) Данный способ защитит от того, что url Вашего изображения используют на другом сайте, то есть прописывают адрес изображения Вашего сайта, а отображается оно у них. Такое явление называется —хотлинком. Как результат,… Читать далее »
ИльяКомментарии к записи Как изменить адрес входа в админ-панель WordPress отключены
Здравствуйте дорогие друзья! Недавно, от службы поддержки хостинга мне пришло письмо о том, что блог подвергся брут атаке подбора пароля, и они сменили страницу входа. Спустя несколько дней страница перестала работать, и я обратился к ним с этим вопросом. Ответили мне довольно быстро. Написали, что восстановили стандартную страницу входа и попросили как можно быстрее ее сменить. Выяснилось, что в последнее время участились атаки по подбору пароля к панелям администраторов CMS WordPress и Joomla. Злоумышленники используют десятки тысяч IP-адресов, что дает им большое преимущество. Пользователи Joomla могут дополнительно защитить свой сайт, установив на папкуadministrator логин и пароль. Как это сделать уточните у своего хостера. Тем, кто использует WordPress, рекомендую менять стандартную страницу логина (wp-login.php) вручную или с помощью плагина. Сначала хотел предложить пару плагинов, но перепробовав несколько на тестовом сайте, понял, что зря убил время. Не устроило следующее: Плагины давали больше возможностей, чем мне было необходимо. Работа плагинов не устраивала. Она… Читать далее »
ИльяКомментарии к записи Как скрыть URL входа админ-панели WordPress отключены
Приветствую, дорогой гость! В данной статье мы рассмотрим, как скрыть URL входа админ-панели WordPress. Похожая тема уже была затронута на блоге DayAfterNight, она называлась “Как изменить адрес входа в админ-панель WordPress“. Ко мне очень часто обращались со следующим: Почему не скрывается админ-панель? Если набрать wp-admin, откроется новая страница логина. Друзья, прошлая статья была направлена именно на замену страницы логина WordPress, а не на ее скрытие от посторонних глаз. Мы заменяли wp-login.php на свое название, например, admin-login.php. Сегодня, скроем данную страницу. Итак, для того, чтобы скрыть страницу входа, нам потребуется зайти на хостинг и отредактировать файл .htaccess, который находится в папке вашего WordPress. Например: Ваш_хостинг/httpdocs/wordpress/.htaccess В файл .htaccess нужно вставить следующий код: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 # Hide admin URL start <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^my_admin_url/?$ /wp—login.php?my_secret_key [R,L] RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in_.*$ RewriteRule ^my_admin_url/?$ /wp—login.php?my_secret_key&redirect_to=/wp—admin/… Читать далее »
ИльяКомментарии к записи Параллакс-эффект на чистом CSS отключены
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS. Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событиепрокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно —requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript? Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта? Теория Прежде чем говорить о принципе работы, давайте выполним базовую разметку: <div class=«parallax«> <div class=«parallax__layer parallax__layer—back«> … </div> <div class=«parallax__layer parallax__layer—base«> … </div> </div> А вот основные стили: .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position:… Читать далее »
Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать. Принцип работы Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы: 1 <div class=»example_shown»>Наведи на меня курсор > <div class=»example_hidden»>я — скрытая часть</div></div> и применим к этому коду такие стили: .example_shown { display:inline-block; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:inline-block; } Наведи на меня курсор > В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент .example_shown у дочернего элемента .example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню. Создание выпадающего меню Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li 1 2 3 4 5 6 7 8 9 10 11 12 13 14… Читать далее »
Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active. Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того. В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить 😉 Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально. Название и назначение псевдоклассов :link — отвечает за стили непосещенной ссылки;… Читать далее »
Дорогие друзья, сегодня я расскажу о том, как добавить кнопку Google +1 на свой сайт. Недавно Google анонсировал кнопку, а сейчас она стала доступной для всех желающих разместить ее на своих интернет ресурсах. Вообще-то я собирался сегодня опубликовать новый пост про Америку, но спешу поделиться с вами новой кнопкой от Гугла. А про Америку рассказ готов, и опубликую его завтра 😉 . Что дает кнопка Google +1? Например, посетителям вашего сайта понравилась какая-либо статья (новость, страница товара, услуги и т.д.). Если вы предусмотрительно добавите кнопку Google +1 на страницы своего сайта, то посетители смогут кликнуть по ней на понравившейся странице. Что происходит дальше? А дальше друзья ваших читателей в результатах поиска Google будут видеть, кто уже поделился какой-либо страницей. Кроме этого, вы сможете видеть отметки о страницах, за которые вы сами голосовали, то есть будет проще искать нужную информацию. Покажу на примере. Набираю я запрос «indigotlt.ru» в Google, и… Читать далее »
От автора: Эта статья отображает лишь одно из многих решений проблемы адаптивных изображений. До выбора конкретного решения мы предлагаем вам рассмотреть разные подходы, включая эти два:Как избежать дублирования загрузки адаптивных изображений (How To Avoid Duplicate Downloads In Responsive Images ) и Выбор решения для адаптивных изображени (Choosing A Responsive Image Solution). При разговорах о таких новых стандартах HTML5, как атрибут srcset и элемент picture, а также технологиях серверной стороны, таких как Адаптивный веб-дизайн +компоненты серверной стороны (Responsive Web Design + Server Side Components ) (RESS), простительно, если вы решите, что простые статические вебсайты сейчас не в состоянии поддерживать адаптивные изображения. Однако такое заключение может оказаться преждевременным. Фактически, существует легкий прямой способ доставки адаптивных изображений, поддерживаемых всеми современными веб-браузерами: фоновые изображения CSS. Однако этот подход имеет свои ограничения и не всегда работает. Но если при несложных требованиях вы готовы сделать дополнительное усилие и обеспечить доступность ваших изображений, то все, что вам… Читать далее »
От автора: анимация CSS очень интересна; ее красота состоит в том, что с помощью множества простых свойств можно сделать что угодно от элегантного плавного проявления до очень красивых эффектов. Одно из средств CSS, находящееся где-то в промежутке между ними – это эффект переворота CSS, где при этом на обеих сторонах контейнера, как с лицевой, так и изнаночной, имеется контент. Этот учебник покажет вам, как легко и просто создать его. Краткое примечание: это не первый учебник о подобном эффекте, но все остальные показались мне слишком сложными. Во многие другие статьи добавлены дополнительные стили для кодирования примеров, требующие затем от читателя расшифровки, что из них нужно, а что нет. В данном учебнике этот вопрос опускается, предоставляя вам только необходимые стили; можете украсить любую сторону каждого оборота как вам заблагорассудится. ДЕМО HTML Структура HTML для получения ожидаемого вами двустороннего эффекта: 01.<div class=»flip-container» ontouchstart=»this.classList.toggle(‘hover’);»> 02.<div class=»flipper»> 03.<div class=»front»> 04.<!— front content —> 05.</div> 06.<div… Читать далее »
Совместимость Joomla 3+ Установка Установка через стандартный установщик Joomla. Описание Плагин публикует материал компонента K2 на стене группы Вконтакте. Запись включает в себя наименование материала, вступительный текст, очищенный от html кода, изображение материала, ссылка на материал. Если установлено время публикации, то к записи еще прикрепляется таймер. Плагин позволяет публиковать материалы, опубликованные в компоненте K2, на стену группы Вконтакте; указать категории, чьи материалы не будут публиковаться; задать время отложенной публикации; Для работы плагина необходимо Создать Standalone-приложение. Копируем ID приложения. Сформировать запрос вида https://api.vk.com/oauth/authorize?client_id=##ID##&redirect_uri=https://api.vk.com/blank.html&scope=wall,photos,offline&display=page&response_type=token где ##ID## — id приложения полученный ранее. В ответ приходит токен доступа, который нужно скопировать в поле Access token. В поле ID группы скопировать id группы на стене которой будут публиковаться сообщения (если у Вас публичная страница, то перед id следует поставить знак «-«). В поле ID альбома скопировать ID альбома, куда будут сохраняться изображения материалов. В поле ID категорий записать через запятую id категорий, материалы из которых… Читать далее »
