20 окт. 2015 г.

Самый простой способ подключить reCAPTCHA


Опять про последнюю работу. Все таки заказчика достали спам-боты и пришлось ставить капчу. Как показывает практика, самая надежная капча - reCAPTCHA от Google.
Все просто и надежно. Но вот в чем фишка: Ставил то я ее в первый раз. И когда дошло до интеграции на стороне сервера, а точнее организация отправки POST-запрос, я сник.
Поиски в сети дали много вариантов, но настолько сложных в понимании, а инструкция Гугля - такой "бесполезной", что думал не справлюсь. Ан нет! Один сайтик дал простой ответ.
Решение лежало на поверхности. Нужна была простая функция для проверки ввода reCAPTCHA, без подключения сторонних библиотек. Вот она:

function check_captcha($secret, $response){
    $result_capcha = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$response));
  
    if (isset ($result_capcha->success) && $result_capcha->success != 1)
        return false;
    else
        return true;
}

Теперь вопрос с POST-запросом решился сам собой.
До капчи файл sendmail.php выглядел так:






После изменений принял следующий вид:

Вот и все. Работает - безотказно.


18 окт. 2015 г.

Новая работа.

Подготовили новый проект для автомобилистов, занимающихся пассажирскими перевозками в Дмитрове, Московская обл.
Пассажирские перевозки
При тех требованиях, которые предъявил заказчик,данный вариант подошел как нельзя лучше. Максимум фотографий и минимум текста. Единственный недостаток, на который заказчик не обратил внимания, отсутствие капчи на форме обратной связи.

13 июн. 2015 г.

Скрипт модального окна с заказом обратного звонока

Почему опять модальное окно? Просто возникла неприятная ситуация. Клиент заказал кнопку заказа обратного звонка в плавающем меню лэндинга. А так как скрипт лэндинга уже был готов и утвержден клиентом, то пришлось интегрировать модуль в сайт. И тут, бац! ни один из модулей на jQuery не хотел работать. То ли конфликт java, то ли еще что-то, но не поперло.
И вот нашел на сайте "Шпаргалка блоггера" скрипт, который очень хорошо интегрировался в html-страницу.
Окно конечно не очень симпатичное, но вполне даже ничего. А при небольшом изменении скрипта получилось очень неплохо. Замечу, что цвета заданы в RGB, но при наличии Photoshop или другого редактора можно внести корректировку цветов окна и тени.
И так.

На HTML страницу добавляем

<style>
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99; /*Окно должно быть выше всех слоев*/
  color: rgba(0,0,0,0);
  background: rgba(180,180,180,.9);/*Цвет тени*/
  opacity: 0.5;/*Можно добавить прозрачность тени. Чем больше значение, 
тем прозрачней*/
  cursor: pointer;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
  position: absolute;
  top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
 /*Теперь зададим цвета градиента окна*/ 
background: rgb(150,150,150) linear-gradient(rgb(100,100,100),
 rgb(170,170,170));
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 70%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 90%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
</style>

<input type="checkbox" id="mail"/>
<label for="mail">заказать звонок</label> <!-- Собственно ссылка.  -->
<!-- Если в label добавить атрибут class, то может получиться 
кнопка нужного вида --> 
<!-- Модуль самого окна --> 
<div id="popup">
<form method="post" action="mail.php">
<label for="mail" title="Отменить">✕</label>
<div data-title="Например, Мария Петровна">Ваше имя: 
<input type='text' name='name' required /></div>
<div data-title="Например, 89270000000">Моб. телефон: 
<input type="tel" name='tel' required maxlength="11" value='8' 
pattern="8\d{10}"/></div>
<input type='submit' value='Заказать'/>
</form>
</div>
<!-- Конец модуля окна --> 

Ну вот и все. Теперь, собственно, надо создать php-файл для отправки сообщения.

Создаём файл mail.php:

<?
if($_POST['name']){ // заносим в массив значение полей, их может быть больше
  $znach = array(
   1 => $_POST['name'], 
   2 => $_POST['tel'],
  );
  mail("name@yandex.ru", "заказ звонка ".$_SERVER['HTTP_REFERER'], $znach[2]." ".$znach[1]); // укажите здесь свой email
}
Header("Refresh: 8; URL=".$_SERVER['HTTP_REFERER']); // спустя 8 секунд человек будет возвращён на предыдущий URL
?>
// Формируем внешний вид окна сообщения и страницы перенаправления
<!DOCTYPE html>
<title><? print "$znach[1], данные успешно отправлены!"; ?></title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta name="robots" content="noindex"/>
<style>
body {background: rgba(180,180,180,.9);}
body > div {
   position: absolute;
   top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
  background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170));
}
label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
body > div > div {padding-top: 3%;}
</style>

 <div>
 <label title="Продолжить">✕</label>
<div><? print "$znach[1]"; ?>, Ваша заявка получена!<br>
Мы позвоним Вам в течении часа.</div>
</div>

<script> // нажав на label посетитель вернётся на предыдущую страницу, где заполнял форму
document.getElementsByTagName('label')[0].onclick = function() { window.location.href="<? print $_SERVER['HTTP_REFERER']; ?>"
}
</script>

Все.

17 апр. 2015 г.

Cистема раскрутки сайтов в короткие сроки.

Не знаете как раскрутить сайт?

Вам нужны посещения? Вы хотите быть первыми в рейтингах?
Предлагаем широкий охват аудитории и эффективные группы рекламных площадок!
И все это доступно без существенных инвестиций! 

Просто зарегистрируйтесь, что бы оценить масштабы проекта!
И получайте стабильные посещения на сайт в необходимом Вам количестве всегда. В нашей системе упор сделан на Автоматические рекламные кампании и самые гибкие настройки.
Автоматическая работа без Вашего участия
Возможность работы с несколькими проектами
Самая современная клиентская программа
Возможность заработка и покупки рекламных кредитов
Настройте систему один раз! И получайте стабильные посещения на сайт в необходимом Вам количестве всегда.

3 апр. 2015 г.

Редирект сайта

Сегодня мне позвонил человек далекий от программирования и спросил: Как сделать, пока сайт в разработке, посетители перенаправлялись на другой домен?
Я уже делал такие вещи, когда один из моих сайтов менял домен. Чтобы не потерять индексированные поисковиками страницы и "не упасть" в рейтинге пришлось колдовать с файлом robots.txt и организовывать зеркало.
В принципе, сложного тут ничего нет.
  1. В файле robots.txt задаем директиву Host (контент на сайтах должен быть идентичен) В поиске будет участвовать только главное зеркало:
  2. User-Agent: *
    Disallow:
    Host: www.glavnoye-zerkalo.ru
  3. Теперь нужно установить постоянный серверный редирект с HTTP-кодом 301 или редирект при помощи мета-тега refresh с нулевой задержкой, добавляемого в код каждой страницы (например: <meta http-equiv="refresh" content="0;URL='http://new-site.com/'"> ).
Дело в том, что выделяют несколько кодов перенаправления. Код 301 — это код постоянного перенаправления. А для временного нужны коды 302/303/307. 
Замечу, что для того, чтобы склеить зеркала, роботу, того же Яндекса, достаточно директивы Host в файлах robots.txt для всех зеркал. Редирект настраивать необязательно.
Но это в том случае, если вы организуете ПОСТОЯННЫЙ редирект.

В нашем же конкретном случае нужен ВРЕМЕННЫЙ редирект. Здест ситуация намного проще.
Для это можно использовать Meta-тэг refresh.
Например: <meta http-equiv="refresh" content="N;url=_адрес цели перенаправления_/">  — перенаправление (редирект) пользователя на страницу с адресом url, после N секунд нахождения на данной странице. 
При небольших значениях N (например 0) считается временным перенаправлением, аналогичным серверным редиректам с HTTP-кодом 302/303/307.
Ну вот и все.

13 мар. 2015 г.

Модальное окно с формой на CSS

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


Перебороздив просторы глобальной сети, (уже не помню где, но все равно - спасибо, друг!) нашел подходящее и очень простое решение для модального окна на jQuery и CSS. Итак по порядку.


HTML разметка

В тело страницы, между тэгами body, вставляем структуру окна:

<div id="modal_form"><!-- Это и есть окно -->
      <span id="modal_close">X</span> <!-- Кнопка закрыть -->
      <!-- Тут содержание окна -->
</div>
<div id="overlay"></div><!-- Подложка -->

Сразу скажу, чтобы не было путаницы, данный модуль лучше вписать сразу после ссылки-вызова. Например в моем случае это простая текстовая ссылка "Заказать звонок", хотя можно было добавить и кнопку:

<p><a href="#" id="go">Заказать звонок</a></p>
<!-- Модальное окно -->
<div id="modal_form">
    <span id="modal_close">X</span>
        <form action="" method="post">
            <h3>Введите Ваши данные</h3>
            <p>Ваше имя<br />
                <input type="text" name="your-name" value="" size="40" />
            </p>
            <p>Ваш телефон<br />
                <input type="text" name="your-name" value="" size="40" />
            </p>
            <p style="text-align: center; padding-bottom: 10px;">
                <input type="submit" value="Отправить" />
            </p>
        </form>
</div>

Ну тут все просто и понятно. Внимание на модуль:

<div id="overlay"></div>

Роль этого div'а - cпасти нас от больших проблем в случае закрытия модального окна при клике не на крестик, а на любой другой элемент.

CSS

Этот текст лучше вставить в CSS-документ. Напомню, кто забыл или не знает, вызов CSS-документа делаем в хэде:
<link href="css/style.css" rel="stylesheet" type="text/css">

В данном случае стили важны не меньше, чем скрипты. Читайте коменты. Я оставил авторские, с незначительными исправлениями.
Сам текст выглядит так:

#modal_form {
    width: 300px;
    height: 250px; /* Размеры окна должны быть фиксированы */
    border-radius: 5px;
    border: 3px #000 solid;
    background: #fff; /* Цвет окна можно менять */
    position: fixed; /* чтобы окно было в видимой зоне в любом месте */
    top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
    left: 50%; /* половина экрана слева */
    margin-top: -150px;
    margin-left: -150px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты

соответственно =) */
    display: none; /* в обычном состоянии окна не должно быть */
    opacity: 0; /* полностью прозрачно для анимирования */
    z-index: 5; /* окно должно быть наиболее большем слое */
    padding: 20px 10px;
}
/* Кнопка закрыть */
#modal_form #modal_close {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}
/* Подложка */
#overlay {
    z-index: 3; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
    position: fixed; /* всегда перекрывает весь сайт */
    background-color: #000; /* черная */
    opacity: 0.8; /* но немного прозрачна. Меньшее значение увеличит прозрачность */
    width: 100%;
    height: 100%; /* размером во весь экран */
    top: 0;
    left: 0; /* сверху и слева 0, обязательные свойства! */
    cursor: pointer;
    display: none; /* в обычном состоянии её нет */
}


Скрипт

Сам скрипт можно вписать в самом конце перед </head> (коментарии авторские)

$(document).ready(function() { // вся магия после загрузки страницы
    $('a#go').click( function(event){ // ловим клик по ссылки с id="go"
        event.preventDefault(); // выключаем стандартную роль элемента
        $('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
             function(){ // после выполнения предъидущей анимации
                $('#modal_form')
                    .css('display', 'block') // убираем у модального окна display: none;
                    .animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность

одновременно со съезжанием вниз
        });
    });
    /* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
    $('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
        $('#modal_form')
            .animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем

окно вверх
                function(){ // после анимации
                    $(this).css('display', 'none'); // делаем ему display: none;
                    $('#overlay').fadeOut(400); // скрываем подложку
                }
            );
    });
});


Ну вот и все. Еще раз спасибо тебе, неизвестный друг.