Скрипт что определяет мобильное устройство

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

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

В примере можете протестировать страницу файрбагом. Выбрать разные устройства. Чтобы добавлялся соответственный класс, нужно перезагружать страницу. Как видно на странице примера список классов, что могут быть добавлены. Соответствующий класс присваивается тегу <html>. Скачать архив с скриптом.

На странице примера указаны следующие параметры и классы к ним, давайте их разберем.

Тип устройства - классы данной категории присваиваются в зависимости от устройства на котором открыт сайт:
.mobile - класс что присваивается, если страница открыта на мобильном устройстве.
.tablet - класс что присваивается, если страница открыта на планшете.
.desktop - класс что присваивается, если страница открыта на персональном компьютере.
Положение устройства - классы этой категории присваиваются в зависимости от положения, ориентации устройства. То есть, экран устройства в горизонтальном или вертикальном положении.

.portrait - класс что присваивается, если устройство имеет вертикальную ориентацию.
.landscape - класс что присваивается, если устройство имеет горизонтальную ориентацию.
Операционная система - классы данной категории присваиваются в зависимости от того какая операционная система установлена на устройстве. Данные классы пригодятся если важно отображать разные элементы для устройств с разной ОС.
.ios, .iphone, .ipad, .ipod, .android, .blackberry, .macos, .windows, .fxos, .meego, .television - классы с названием операционных систем, что и будут присвоены.
В моей практике, данный скрипт выручал меня несколько раз ,в основном благодаря классам .mobile и .desktop. Скорее всего и вам именно они и понадобятся. Как и говорил в начале статьи, данные классы не для CSS, хотя и там можно их использовать. Эти классы скорее для скриптов, когда нужно заставить работать скрипт, только при наличии класса на странице. Примерная функция выглядит так:

$('.mobile .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ МОБИЛЬНОГО УСТРОЙСТВА
});

В данном случаи функция сработает если вы нажали на элемент с классом .block на мобильном устройстве. Для ПК такая функция будет аналогична, но с классом .desktop.
$('.desktop .block').click(function(){
//СЮДА КОД ФУНКЦИИ ДЛЯ КОМПЬЮТЕРА
});

Таким образом можете применять работу разных скриптов в зависимости от устройства. Сам скрипт можете скопировать с файла current-device.js и добавить в свои файлы или подключить отдельно.

Добавлено: 30 Мая 2021 07:07:59 Добавил: Андрей Ковальчук

Как создать бота в Телеграм для получения оповещений с форм сайта

В принципе, данная инструкция может быть актуальной и для других форм и плагинов, для которых нужен бот в Телеграм. Суть у всех одна, боты создаются одинаково. Главное что нужно после создания это Токен вашего бота и ID чата куда он добавлен или чата самого бота.

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

Как создать бота
1. Первым делом, у вас должен быть установлен мессенджер Telegram. На телефоне или ПК, а желательно и там и там. Я буду показывать на примере ПК, но на телефоне все то же самое.

2. Далее нужно найти через поиск в мессенджере главного бота, что создает других. Это BotFather - единственный бот, который управляет ими всеми. Используйте его для создания новых учетных записей ботов и управления существующими ботами. Найдите и нажмите на него, чтобы открылся его чат.

3. Теперь нужно запустить BotFather. Для этого нужно нажать кнопку ЗАПУСТИТЬ внизу чата или написать в чат /start, если вместо кнопки у вас поле для ввода.

4. После запуска появится список команд, переместитесь в начало сообщения и нажмите на команду /newbot или просто пропишите эту команду через поле сообщения.

5. Теперь BotFather предложит вам назвать своего бота. Это название вы будете видеть в списке контактов. В примере бот назван как testmailbot. Можете называть как угодно, например: Бот для формы контактов, Бот какого-то плагина, Мой бот с сайта и тд. Без разницы, лишь бы вы понимали что это за бот и если у вас их будет много, вы их не путали.

6. Далее BotFather предложит вам указать имя бота. Вот тут нужно быть внимательным. Имя бота вводится только латиницей и в конце должно заканчиваться на bot. В примере это testmailbot_bot. Задавайте что хотите, если имя будет существовать, BotFather вас предупредит. Так что придумайте что-то уникальное.

7. Если вы задали правильное имя, то BotFather напишет вам, что все готово и вашему боту присвоен Токен, который понадобится для доступа через HTTP API. Этот токен нам и нужен для того, чтобы формы отправляли свои данные в Телеграм.

8. Теперь найдем и запустим нашего бота. Для этого в поиске контактов в Telegram найдите бота и нажмите на него.

9. Так же нужно запустить бота. Внизу есть кнопка ЗАПУСТИТЬ или напишите в чат /start, если вместо кнопки у вас поле для ввода.

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

8. Чтобы добавить бота в групповой чат, если вы захотите иметь несколько ботов для нескольких форм, то вам нужно перейти в настройки Telegram и выбрать пункт - Создать группу.

9. Далее нужно ввести название для группы. Вводите какое вам нравится.

10. Теперь нужно добавить участников в группу, то бишь нашего бота. Есть 2 способа. Можно просто на странице самого бота нажать на его настройки и там выбрать пункт Добавить в группу. После чего вам предложит ваши собственные группы. Выберите ту что создали только что для ботов и все. Второй вариант - нажмите на настройки группы и выберите пункт - Добавить участников.

11. Перед вами появится окно поиска, введите в поле имя своего бота, то что вводили в пункте 6. Возможно, найдется несколько ботов, но только у одного будет точное название, в нашем примере это @testmailbot_bot. Когда найдете своего бота, выделите и нажмите кнопку - Добавить.

12. Последнее что нужно сделать чтобы передавать данные с форм которые поддерживают передачу на Телеграм, это получить ID чата. Тут два варианта. Если вы используете только чат бота, то ID один, если чат группы с ботами, то ID другой. Чтобы узнать нужный ID, нужно в адресной строке браузера перейти по ссылке, которую нужно сформировать.

https://api.telegram.org/botХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ/getUpdates

Вместо ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ нужно вставить тот токен, который вам дал BotFather в пункте 7, этой инструкции.

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


12. Последнее что нужно сделать чтобы передавать данные с форм которые поддерживают передачу на Телеграм, это получить ID чата. Тут два варианта. Если вы используете только чат бота, то ID один, если чат группы с ботами, то ID другой. Чтобы узнать нужный ID, нужно в адресной строке браузера перейти по ссылке, которую нужно сформировать.

https://api.telegram.org/botХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ/getUpdates

Вместо ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ нужно вставить тот токен, который вам дал BotFather в пункте 7, этой инструкции.

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

Рекомендую открывать ссылку в браузере Mozilla Firefox. В нем данные отображаются сгруппировано и очень легко понять где нужный ID. Где чат бота, где чат группы, если вы в нее добавили бота.


Как видите, по изображению видно что вначале показывает ID чата бота с моим именем, у вас будет с вашим, после того как вы напишите что-нибудь боту. Ну а далее ID группы, в которую мы добавили нашего бота в пункте 9/10.

Много непонятного, но среди этого кода нужно всего одно значение. Какое, зависит от того используете ли вы лишь бота или чат. Если только бота то ищите, ID такого типа - "id":380199086,"first_name". И з этого вам нужно только номер 380199086. Если у вас группа с ботами, то такого "id":-1011500162037. У ID груп стоит черточка в начале. Вам, опять же, нужен номер только с черточкой -1011500162037. Если, вдруг, вы добавили токен и ID в форму, а сообщения не приходят, то попробуйте другой. Сложностей не должно возникнуть.

После успешного добавления испытайте плагин или форму. Вы должны получить оповещение на Telegram, в моем примере, это выглядело так:

Теперь у вас есть и токен и нужный ID. Они вам потребуются чтобы их добавить в настройках моих плагинов, других разработчиков, в свои собственные формы, если вы такие создаете.

Добавлено: 15 Мая 2021 07:58:40 Добавил: Андрей Ковальчук

Стилизация поля добавления файлов — input file

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

И так не будем втягивать и приступим к нашей задаче.

Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:

<input type="file" name="file">

У нас же будет иметь следующий вид:
<div class="fl_upld">
<label><input id="fl_inp" type="file" name="file">Выберите файл</label>
<div id="fl_nm">Файл не выбран</div>
</div>

Давайте немножко разберем, что и как.

<div class="fl_upld"> - заключаем все в блок контейнер. Условие обязательное. Присваиваем блоку класс fl_upld.
<label><input id="fl_inp" type="file" name="file">Выберите файл</label> - наше поле прикрепления файла заключаем в label. Это наш и идентификатор поля. Самому полю присваиваем id="fl_inp". Тоже важный момент. Ну и добавляем текст - Выберите файл. Этот текст будет на будущей кнопке.
<div id="fl_nm">Файл не выбран</div> - блок, который изначально выводит текст - Файл не выбран. После выбора файла вместо этого текста появится название файла. данному блоку присваиваем id="fl_nm". Забегу наперед, скажу, что если не будете подключать скрипт для вывода имени файла, то можете не добавлять данный блок. У вас будет просто кнопка без динамики.
Далее добавляем несложные стили нашей кнопке. Просто добавьте следующий код в свой файл стилей:
.fl_upld{width:300px;}
#fl_inp{display:none;}
.fl_upld label{
cursor:pointer;
background:#36c;
border-radius:3px;
padding:10px 25px;
color:#fff;
font-weight:bold;
text-align: center;
}
.fl_upld label:hover{background:#fc0;}
#fl_nm{
margin-top:20px;
color:#f00;}

Быстро расскажу, что за что отвечает.

Для контейнера fl_upld устанавливаем ширину в 300px. Если это поле будет внутри вашей формы, у которой будет ширина, то в принципе можно эту строчку не писать и ширину не задавать.
#fl_inp{display:none;} - скрываем наше стандартное поле прикрепления файла. Это важный и единственный главный параметр.
Далее для .fl_upld label - пишем параметры. Идентификатор и станет нашей кнопкой. Прописываете все что хотите, чтобы сделать кнопку нужного вида.
.fl_upld label:hover{background:#fc0;} - стили для кнопки. кола на нее наводишь курсор. У нас она просто становится желтой.
Ну и напоследок для #fl_nm блока названия файла тоже добавляем параметры.
Вот и все стили, конечно же как и всегда можете менять их как угодно и подгонять под себя. Главный параметр - это скрыть стандартное поле. #fl_inp{display:none;}

Теперь приступим к последнему шагу, добавлению скрипта вывода имени файла при добавлении. Так как скрипт работает на jQuery, сначала нужно подключить библиотеку. если это уже сделано делать этого не нужно.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p>Далее уже сам скрипт.</p>
 
<script>
$(document).ready( function() {
    $("#fl_inp").change(function(){
         var filename = $(this).val().replace(/.*\\/, "");
         $("#fl_nm").html(filename);
    });
});
</script>

Разберем немного сам скрипт.

$("#fl_inp") - во второй строке указываем айди нашего скрытого поля.
$("#fl_nm").html(filename); - в четвертой строке указываем айди последнего блока в котором будет выводится имя файла вместо текста - Файл не выбран. Мы делаем замену значения.
То есть нужно просто правильно указать два ID. Если Вы будете менять айди и классы на свои, то не запутайтесь и укажите везде правильно, чтобы все корректно работало. Сделав все правильно, результат не заставит себя ждать. Если вдуматься и понять все, то становится ясно, что сложного тут ничего нет.

Добавлено: 13 Мая 2021 07:18:41 Добавил: Андрей Ковальчук

Система лайков или кнопка мне нравится на WordPress

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

И так, приступим к системе лайков на WordPress. Для начала надо добавить код функции и не одной, которые будут выполнять подсчет лайков и запись их в базу данных. Открываете файл пользовательских функций function.php и добавляете код в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему.

Система лайков будет использовать AJAX, то есть отправку без перезагрузки страниц. Так что, первое что сделаем - зарегистрируем файл со скриптом, в котором будет наш jQuery скрипт, что и будет отправлять ajax запрос.

У меня еще нет статьи о том как правильно подключать AJAX на WordPress, постараюсь исправится :), но а пока что так. Сначала, как и сказал - регистрируем файл со скриптом и через wp_localize_script задаем дополнительные данные для него, чтобы jQuery правильно сформировало ajax запрос.
wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', true );
wp_localize_script('like_post', 'ajax_var', array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce')
));

Как видите - стандартная регистрация и подключение через wp_enqueue_script. В данном примере мы подключаем файл post-like.js, который у нас должен лежать в папке с темой в папке js. Если у вас скрипты лежат в другой папке, то укажите свой путь. Будьте внимательны, если укажите неправильно, работать не будет.

Главный параметр тут - в первой строке указываем like_post - название для нашего скрипта. Еще его называют - рабочее название.
Во второй строке повторяем рабочее название, чтобы у нас была связь, далее через запятую указано название ajax_var - это название Javascript объекта, который будет содержать данные. Название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптами! Это нужно для нашего jQuery скрипта. Позже в нем увидите, где оно используется.
После этого идет масив с параметрами.
url - тут указываем путь к ajax файлу WordPress.
nonce - тут функция что создает уникальный токен, что связан с конкретным действием, пользователем, сеансом пользователя и окном времени. Это нужно для правильной работы нашего рейтинга с помощью лайков.
Переходим к следующему пункту. После добавленного кода добавляем еще две строки.
add_action('wp_ajax_nopriv_post-like', 'post_like');
add_action('wp_ajax_post-like', 'post_like');

Теперь мы прикрепляем нашу указанную будущую функцию по подсчету и записи лайков в БД к WordPress AJAX. То бишь срабатывать она будет только в момент аякс события после нажатия на кнопку - МНЕ НРАВИТСЯ. Название нашей будущей функции указано как - post_like.

Собственно сама функция:
function post_like(){
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )
 die ( 'Busted!');
if(isset($_POST['post_like'])){
 $ip = $_SERVER['REMOTE_ADDR'];
 $post_id = $_POST['post_id'];
 $meta_IP = get_post_meta($post_id, "voted_IP");
 $voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
 $voted_IP = array();
 $meta_count = get_post_meta($post_id, "votes_count", true);
 if(!hasAlreadyVoted($post_id)){
 $voted_IP[$ip] = time();
 update_post_meta($post_id, "voted_IP", $voted_IP);
 update_post_meta($post_id, "votes_count", ++$meta_count);
 echo $meta_count;}
 else
 echo "already";}
 exit;}

Расписывать подробно не буду, кто знаком с WordPress все и так поймет, тут все просто. Создаем и обновляем в зависимости от результата два произвольных поля, voted_IP - поле, куда записывается ip проголосовавшего и votes_count - сам счетчик лайков к записи.

Суть функции проста, когда ее запустят - если все правильно подключено и работает она сработает в противном случаи вы увидите ошибку. Далее она проверяет ip получает данные счетчика. В конце идет проверка, голосовал ли посетитель. Если нет, то данные записываются в произвольные поля и счетчик увеличивается на единицу.

Теперь очередь функции, что проверяет посетителя на то, имеет ли он право голосовать, нажимать на кнопку, будет ли засчитана его отметка.
function hasAlreadyVoted($post_id){
 global $timebeforerevote;
$timebeforerevote = 120;
 $meta_IP = get_post_meta($post_id, "voted_IP");
 $voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
 $voted_IP = array();
 $ip = $_SERVER['REMOTE_ADDR'];
 if(in_array($ip, array_keys($voted_IP))){
 $time = $voted_IP[$ip];
 $now = time();
 if(round(($now - $time) / 60) > $timebeforerevote)
 return false;
return true;}
 return false;}

Тут тоже все просто. В 3 строке указанна переменная - $timebeforerevote в которой указано число 120. Это время в минутах, то бишь 2 часа. Можете сменить значение на свое.

Далее все просто, получаются данные из произвольных полей, проверяется IP, по математической формуле время последнего голосования, если есть совпадение и если все ок - голос засчитывается, в противном случаи отклоняется.

Третья функция, которую мы добавим - уже функция, что выводит код кнопки, нажатие на которую запустит подсчет и добавление голосов.
function getPostLikeLink($post_id){
$vote_count = get_post_meta($post_id, "votes_count", true);
$output = '';
if(hasAlreadyVoted($post_id)){
$output .= '<div class="svg_bottom_ico"><div class="like_ico is-active">Нравится </div></div>';
$output .= '<span class="likecount"> '.$vote_count.'</span>';
 }else{
 $output .= '<div class="svg_bottom_ico"><div class="like_ico noactive_svg" data-post_id="'.$post_id.'">Нравится </div></div>';
 $output .= '<span class="likecount"> '.$vote_count.'</span>';
 }
  return $output;
}

Данная функция, в зависимости от того, можно ли голосовать посетителю выведет ему или активную кнопку(в данном примере это просто блок. Сделано для удобства, чтобы вы могли добавить любые классы, псевдоэлементы и тд.) или нет. Рядом с ней будет счетчик уже проголосовавших, нажавших на кнопку.

На этом пункте с function.php можно закончить. Теперь перейдем уже к фронтенду, то есть к скриптам и выводу.

Вернемся к нашему первому пункту, где мы подключали скрипт - post-like.js. Подключить - мы его подключили, но нужно его и создать. Создайте и разместите в той папке, которую указали. В нашем примере, это папка js в корне темы.

Внутрь файла нужно добавить следующий код.
jQuery(document).ready(function($){
$(".noactive_svg").click(function(event){
heart = $(this);
post_id = heart.data("post_id");
$.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
success: function(count){
if(count != "already"){
heart.addClass("is-active");
heart.parent().next(".likecount").text(count);
}
}
});
return false;
});
});

По скрипту видно, что он сработает, если нажать на кнопку с классом noactive_svg. Получаем айди нашего поста и дальше через аякс передаем данные. Так же видно что тут мы указываем те параметры, что задавали еще в первом шаге - ссылку на аякс WordPress и тд.

Если все успешно, все переменные получены, данные отправлены - получается значение счетчика и выводится в элементе с классомlikecount. Так же кнопке присваивается класс is-active. Можете использовать этот класс, если хотите обозначить неактивную кнопку.

Остался последний шаг. Вызвать вывод нашей кнопки в коде темы. Вывод нужно делать внутри цикла. Это обязательно! Цикл выглядит примерно так:
if (have_posts()) : while (have_posts()) : the_post();
//ТУТ КОД ДЛЯ ЗАПИСЕЙ, ВЫВОД ЗАГОЛОВКОВ, МИНИАТЮР, ТЕКСТА И ТД.
endwhile;endif; 

Он находится в index.php,single.php,archive.php и тд. Все зависит от темы. Сказать точно не могу, так как зависит от того как разработчик создал и какова структура.

Внутрь этого цикла, как раз и нужно добавить следующую строку:
// В СРЕДУ PHP
echo getPostLikeLink(get_the_ID());
//  В СРЕДУ HTML
<?php echo getPostLikeLink(get_the_ID()); ?>

В зависимости в какую среду кода добавляете выберите вариант. Это элементарно для людей с опытом. но к сожалению, многие допускают ошибки.

Если сделали все правильно, система лайков должна работать. На базе этой статьи я покажу как можно изменить данную систему, доработать и улучшить.

В этом же примере, можете добавить свои стили и получить любой вид кнопки и счетчика отметок нравится.

Добавлено: 11 Мая 2021 07:34:11 Добавил: Андрей Ковальчук

Как задать картинку для сайта при публикации в соцсетях или мессенджерах.

Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она как раз и создана для того, чтобы вы видели картинку, название и краткое описание для ссылки, вместо обычного УРЛ. Ведь так же красивее, понятнее и намного эффективнее. Но от куда берется эта разметка Open Graph, если вы ее не добавляли на сайт?

Если вы используете какую-то систему для управления сайтом, в народе "Движок", то скорее всего вы устанавливаете плагины, модули, дополнения и тд. У каждого движка свои названия этих дополнительных опций. Суть в том, что некоторые из них, что рассчитаны на работу в СЕО области и там или автоматически определяются параметры для вывода Open Graph или же вы прописываете, даже не задумываясь для чего. Например, у WordPress, в этом вопросе самый популярный плагин - SEO by Yoast. Так же, часто все формируется автоматически, даже если нет ни плагинов ни разметки. Соцсети и мессенджеры просто берут первую попавшуюся картинку с сайта, тайтл и какой-то текст или описание страницы. Хорошо, если картинку угадает или хотя бы лого поставит, но иногда так бывает, что ставит что попало. Например, иконку какую-то или вообще фон сайта. Согласитесь, это не всегда может понравится.

Чтобы все отображалось корректно, советую на своих системах установить соответствующие плагины, с помощью которых будет произведена настройка разметки Open Graph. Если у вас самописный сайт или лендинг, то можете установить стандартные настройки для главной страницы. Чтобы это сделать, можете добавить некоторые теги в шапку страницы.

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Далее нужно каждому МЕТА-тегу заполнить параметр content="", чтобы правильно это сделать, распишу подробнее, за что отвечает каждый:

og:title - Заглавие страницы, он же тайтл. Можете скопировать из тега <title>...</title>.
og:site_name - Название сайта.
og:url - Ссылка страницы, где вы добавляете этот код. Если это лендинг и у него одна страница, то это просто ссылка на главную сайта. если сайт самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
og:description - Описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
og:image - Ссылка на картинку, что характеризует страницу. Если это тот же лендинг, то можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей. На сайте, этой картонкой выступает изображение для статей и тд.
Готовый вариант может быть примерно таким:
<meta property="og:title" content="Как задать картинку для сайта при публикации в соцсетях или мессенджерах. ">
<meta property="og:site_name" content="Дизайн и разработка сайтов">
<meta property="og:url" content="https://gnatkovsky.com.ua/kak-zadat-kartinku-dlya-sajta-pri-publikacii-v-socsetyax-ili-messendzherax.html">
<meta property="og:description" content="Сегодня речь пойдет о том, как сделать, чтобы при публикации ссылки на сайт в соцсетях, там выводилась нужная картинка, текст и описание.">
<meta property="og:image" content="https://gnatkovsky.com.ua/wp-content/uploads/2017/08/01092017001.jpg">

Как видите ничего сложного нет. Теперь вы знаете как и откуда берется картинка ссылки в соц сетях. Все же я бы больше рекомендовал этот метод для лендингов. Там всего одна страница и задать ей разметку Open Graph не сложно, к тому же необходимо, если вы планируете продвигать ее в соц сетях.

Добавлено: 30 Апреля 2021 07:40:31 Добавил: Андрей Ковальчук

Git за полчаса: руководство для начинающих

В последние годы популярность git демонстрирует взрывной рост. Эта система контроля версий используется различными проектами с открытым исходным кодом.

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

Основы
Git — это набор консольных утилит, которые отслеживают и фиксируют изменения в файлах (чаще всего речь идет об исходном коде программ, но вы можете использовать его для любых файлов на ваш вкус). С его помощью вы можете откатиться на более старую версию вашего проекта, сравнивать, анализировать, сливать изменения и многое другое. Этот процесс называется контролем версий. Существуют различные системы для контроля версий. Вы, возможно, о них слышали: SVN, Mercurial, Perforce, CVS, Bitkeeper и другие.

Git является распределенным, то есть не зависит от одного центрального сервера, на котором хранятся файлы. Вместо этого он работает полностью локально, сохраняя данные в папках на жестком диске, которые называются репозиторием. Тем не менее, вы можете хранить копию репозитория онлайн, это сильно облегчает работу над одним проектом для нескольких людей. Для этого используются сайты вроде github и bitbucket.

Установка
Установить git на свою машину очень просто:

Linux — нужно просто открыть терминал и установить приложение при помощи пакетного менеджера вашего дистрибутива. Для Ubuntu команда будет выглядеть следующим образом:

sudo apt-get install git

Windows — мы рекомендуем git for windows, так как он содержит и клиент с графическим интерфейсом, и эмулятор bash.
OS X — проще всего воспользоваться homebrew. После его установки запустите в терминале:
brew install git

Если вы новичок, клиент с графическим интерфейсом(например GitHub Desktop и Sourcetree) будет полезен, но, тем не менее, знать команды очень важно.

Настройка
Итак, мы установили git, теперь нужно добавить немного настроек. Есть довольно много опций, с которыми можно играть, но мы настроим самые важные: наше имя пользователя и адрес электронной почты. Откройте терминал и запустите команды:

git config --global user.name "My Name"
git config --global user.email myEmail@example.com

Теперь каждое наше действие будет отмечено именем и почтой. Таким образом, пользователи всегда будут в курсе, кто отвечает за какие изменения — это вносит порядок.

Создание нового репозитория
Как мы отметили ранее, git хранит свои файлы и историю прямо в папке проекта. Чтобы создать новый репозиторий, нам нужно открыть терминал, зайти в папку нашего проекта и выполнить команду init. Это включит приложение в этой конкретной папке и создаст скрытую директорию .git, где будет храниться история репозитория и настройки.
Создайте на рабочем столе папку под названием git_exercise. Для этого в окне терминала введите:

$ mkdir Desktop/git_exercise/
$ cd Desktop/git_exercise/
$ git init

Командная строка должна вернуть что-то вроде:

Initialized empty Git repository in /home/user/Desktop/git_exercise/.git/

Это значит, что наш репозиторий был успешно создан, но пока что пуст. Теперь создайте текстовый файл под названием hello.txt и сохраните его в директории git_exercise.

Определение состояния
status — это еще одна важнейшая команда, которая показывает информацию о текущем состоянии репозитория: актуальна ли информация на нём, нет ли чего-то нового, что поменялось, и так далее. Запуск git status на нашем свежесозданном репозитории должен выдать:

$ git status
On branch master
Initial commit
Untracked files:
(use "git add ..." to include in what will be committed)
hello.txt

Сообщение говорит о том, что файл hello.txt неотслеживаемый. Это значит, что файл новый и система еще не знает, нужно ли следить за изменениями в файле или его можно просто игнорировать. Для того, чтобы начать отслеживать новый файл, нужно его специальным образом объявить.

Подготовка файлов
В git есть концепция области подготовленных файлов. Можно представить ее как холст, на который наносят изменения, которые нужны в коммите. Сперва он пустой, но затем мы добавляем на него файлы (или части файлов, или даже одиночные строчки) командой add и, наконец, коммитим все нужное в репозиторий (создаем слепок нужного нам состояния) командой commit.
В нашем случае у нас только один файл, так что добавим его:

$ git add hello.txt

Если нам нужно добавить все, что находится в директории, мы можем использовать

$ git add -A

Проверим статус снова, на этот раз мы должны получить другой ответ:

$ git status
On branch master
Initial commit
Changes to be committed:
(use "git rm --cached ..." to unstage)
new file: hello.txt

Файл готов к коммиту. Сообщение о состоянии также говорит нам о том, какие изменения относительно файла были проведены в области подготовки — в данном случае это новый файл, но файлы могут быть модифицированы или удалены.

Коммит(фиксация изменений)
Коммит представляет собой состояние репозитория в определенный момент времени. Это похоже на снапшот, к которому мы можем вернуться и увидеть состояние объектов на определенный момент времени.
Чтобы зафиксировать изменения, нам нужно хотя бы одно изменение в области подготовки (мы только что создали его при помощи git add), после которого мы может коммитить:

$ git commit -m "Initial commit."

Эта команда создаст новый коммит со всеми изменениями из области подготовки (добавление файла hello.txt). Ключ -m и сообщение «Initial commit.» — это созданное пользователем описание всех изменений, включенных в коммит. Считается хорошей практикой делать коммиты часто и всегда писать содержательные комментарии.

Удаленные репозитории
Сейчас наш коммит является локальным — существует только в директории .git на нашей файловой системе. Несмотря на то, что сам по себе локальный репозиторий полезен, в большинстве случаев мы хотим поделиться нашей работой или доставить код на сервер, где он будет выполняться.

1. Подключение к удаленному репозиторию
Чтобы загрузить что-нибудь в удаленный репозиторий, сначала нужно к нему подключиться. В нашем руководстве мы будем использовать адрес https://github.com/tutorialzine/awesome-project, но вам посоветуем попробовать создать свой репозиторий в GitHub, BitBucket или любом другом сервисе. Регистрация и установка может занять время, но все подобные сервисы предоставляют хорошую документацию.
Чтобы связать наш локальный репозиторий с репозиторием на GitHub, выполним следующую команду в терминале. Обратите внимание, что нужно обязательно изменить URI репозитория на свой.

# This is only an example. Replace the URI with your own repository address.
$ git remote add origin https://github.com/tutorialzine/awesome-project.git

Проект может иметь несколько удаленных репозиториев одновременно. Чтобы их различать, мы дадим им разные имена. Обычно главный репозиторий называется origin.

2. Отправка изменений на сервер
Сейчас самое время переслать наш локальный коммит на сервер. Этот процесс происходит каждый раз, когда мы хотим обновить данные в удаленном репозитории.
Команда, предназначенная для этого - push. Она принимает два параметра: имя удаленного репозитория (мы назвали наш origin) и ветку, в которую необходимо внести изменения (master — это ветка по умолчанию для всех репозиториев).

$ git push origin master
Counting objects: 3, done.
Writing objects: 100% (3/3), 212 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/tutorialzine/awesome-project.git
* [new branch] master -> master

В зависимости от сервиса, который вы используете, вам может потребоваться аутентифицироваться, чтобы изменения отправились. Если все сделано правильно, то когда вы посмотрите в удаленный репозиторий при помощи браузера, вы увидите файл hello.txt

3. Клонирование репозитория
Сейчас другие пользователи GitHub могут просматривать ваш репозиторий. Они могут скачать из него данные и получить полностью работоспособную копию вашего проекта при помощи команды clone.

$ git clone https://github.com/tutorialzine/awesome-project.git

Новый локальный репозиторий создается автоматически с GitHub в качестве удаленного репозитория.

4. Запрос изменений с сервера
Если вы сделали изменения в вашем удаленном репозитории, другие пользователи могут скачать изменения при помощи команды pull.

$ git pull origin master
From https://github.com/tutorialzine/awesome-project
* branch master -> FETCH_HEAD
Already up-to-date.

Так как новых коммитов с тех пор, как мы склонировали себе проект, не было, никаких изменений доступных для скачивания нет.

Ветвление
Во время разработки новой функциональности считается хорошей практикой работать с копией оригинального проекта, которую называют веткой. Ветви имеют свою собственную историю и изолированные друг от друга изменения до тех пор, пока вы не решаете слить изменения вместе. Это происходит по набору причин:

Уже рабочая, стабильная версия кода сохраняется.
Различные новые функции могут разрабатываться параллельно разными программистами.
Разработчики могут работать с собственными ветками без риска, что кодовая база поменяется из-за чужих изменений.
В случае сомнений, различные реализации одной и той же идеи могут быть разработаны в разных ветках и затем сравниваться.
1. Создание новой ветки
Основная ветка в каждом репозитории называется master. Чтобы создать еще одну ветку, используем команду branch <name>

$ git branch amazing_new_feature

Это создаст новую ветку, пока что точную копию ветки master.

2. Переключение между ветками
Сейчас, если мы запустим branch, мы увидим две доступные опции:

$ git branch
amazing_new_feature
* master

master — это активная ветка, она помечена звездочкой. Но мы хотим работать с нашей “новой потрясающей фичей”, так что нам понадобится переключиться на другую ветку. Для этого воспользуемся командой checkout, она принимает один параметр — имя ветки, на которую необходимо переключиться.

$ git checkout amazing_new_feature

3. Слияние веток
Наша “потрясающая новая фича” будет еще одним текстовым файлом под названием feature.txt. Мы создадим его, добавим и закоммитим:

$ git add feature.txt
$ git commit -m "New feature complete.”

Изменения завершены, теперь мы можем переключиться обратно на ветку master.

$ git checkout master

Теперь, если мы откроем наш проект в файловом менеджере, мы не увидим файла feature.txt, потому что мы переключились обратно на ветку master, в которой такого файла не существует. Чтобы он появился, нужно воспользоваться merge для объединения веток (применения изменений из ветки amazing_new_feature к основной версии проекта).

$ git merge amazing_new_feature

Теперь ветка master актуальна. Ветка amazing_new_feature больше не нужна, и ее можно удалить.

$ git branch -d awesome_new_feature

Дополнительно
В последней части этого руководства мы расскажем о некоторых дополнительных трюках, которые могут вам помочь.

1. Отслеживание изменений, сделанных в коммитах
У каждого коммита есть свой уникальный идентификатор в виде строки цифр и букв. Чтобы просмотреть список всех коммитов и их идентификаторов, можно использовать команду log:
[spoiler title='Вывод git log']

$ git log
commit ba25c0ff30e1b2f0259157b42b9f8f5d174d80d7
Author: Tutorialzine
Date: Mon May 30 17:15:28 2016 +0300
New feature complete
commit b10cc1238e355c02a044ef9f9860811ff605c9b4
Author: Tutorialzine
Date: Mon May 30 16:30:04 2016 +0300
Added content to hello.txt
commit 09bd8cc171d7084e78e4d118a2346b7487dca059
Author: Tutorialzine
Date: Sat May 28 17:52:14 2016 +0300
Initial commit
[/PLAIN]
Как вы можете заметить, идентификаторы довольно длинные, но для работы с ними не обязательно копировать их целиком — первых нескольких символов будет вполне достаточно. Чтобы посмотреть, что нового появилось в коммите, мы можем воспользоваться командой show
[PLAIN][spoiler title='Вывод git show']

$ git show b10cc123
commit b10cc1238e355c02a044ef9f9860811ff605c9b4
Author: Tutorialzine
Date: Mon May 30 16:30:04 2016 +0300
Added content to hello.txt
diff --git a/hello.txt b/hello.txt
index e69de29..b546a21 100644
--- a/hello.txt
+++ b/hello.txt
@@ -0,0 +1 @@
+Nice weather today, isn't it?
[/PLAIN]
Чтобы увидеть разницу между двумя коммитами, используется команда diff (с указанием промежутка между коммитами):
[spoiler title='Вывод git diff']

$ git diff 09bd8cc..ba25c0ff
diff --git a/feature.txt b/feature.txt
new file mode 100644
index 0000000..e69de29
diff --git a/hello.txt b/hello.txt
index e69de29..b546a21 100644
--- a/hello.txt
+++ b/hello.txt
@@ -0,0 +1 @@
+Nice weather today, isn't it?
[/PLAIN]
Мы сравнили первый коммит с последним, чтобы увидеть все изменения, которые были когда-либо сделаны. Обычно проще использовать git difftool, так как эта команда запускает графический клиент, в котором наглядно сопоставляет все изменения.

2. Возвращение файла к предыдущему состоянию
Гит позволяет вернуть выбранный файл к состоянию на момент определенного коммита. Это делается уже знакомой нам командой checkout, которую мы ранее использовали для переключения между ветками. Но она также может быть использована для переключения между коммитами (это довольно распространенная ситуация для Гита - использование одной команды для различных, на первый взгляд, слабо связанных задач).
В следующем примере мы возьмем файл hello.txt и откатим все изменения, совершенные над ним к первому коммиту. Чтобы сделать это, мы подставим в команду идентификатор нужного коммита, а также путь до файла:

$ git checkout 09bd8cc1 hello.txt

3. Исправление коммита
Если вы опечатались в комментарии или забыли добавить файл и заметили это сразу после того, как закоммитили изменения, вы легко можете это поправить при помощи commit —amend. Эта команда добавит все из последнего коммита в область подготовленных файлов и попытается сделать новый коммит. Это дает вам возможность поправить комментарий или добавить недостающие файлы в область подготовленных файлов.
Для более сложных исправлений, например, не в последнем коммите или если вы успели отправить изменения на сервер, нужно использовать revert. Эта команда создаст коммит, отменяющий изменения, совершенные в коммите с заданным идентификатором.
Самый последний коммит может быть доступен по алиасу HEAD:

$ git revert HEAD

Для остальных будем использовать идентификаторы:

$ git revert b10cc123

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

4. Разрешение конфликтов при слиянии
Помимо сценария, описанного в предыдущем пункте, конфликты регулярно возникают при слиянии ветвей или при отправке чужого кода. Иногда конфликты исправляются автоматически, но обычно с этим приходится разбираться вручную — решать, какой код остается, а какой нужно удалить.
Давайте посмотрим на примеры, где мы попытаемся слить две ветки под названием john_branch и tim_branch. И Тим, и Джон правят один и тот же файл: функцию, которая отображает элементы массива.
Джон использует цикл:

// Use a for loop to console.log contents.
for(var i=0; i<arr.length; i++) {
console.log(arr[i]);
}
Тим предпочитает forEach:

// Use forEach to console.log contents.
arr.forEach(function(item) {
console.log(item);
});

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

$ git merge tim_branch
Auto-merging print_array.js
CONFLICT (content): Merge conflict in print_array.js
Automatic merge failed; fix conflicts and then commit the result.

Система не смогла разрешить конфликт автоматически, значит, это придется сделать разработчикам. Приложение отметило строки, содержащие конфликт:
[spoiler title='Вывод']

<<<<<<< HEAD // Use a for loop to console.log contents. for(var i=0; i<arr.length; i++) { console.log(arr[i]); } ======= // Use forEach to console.log contents. arr.forEach(function(item) { console.log(item); }); >>>>>>> Tim's commit.
[/PLAIN]
Над разделителем ======= мы видим последний (HEAD) коммит, а под ним - конфликтующий. Таким образом, мы можем увидеть, чем они отличаются и решать, какая версия лучше. Или вовсе написать новую. В этой ситуации мы так и поступим, перепишем все, удалив разделители, и дадим git понять, что закончили.

// Not using for loop or forEach.
// Use Array.toString() to console.log contents.
console.log(arr.toString());
Когда все готово, нужно закоммитить изменения, чтобы закончить процесс:

$ git add -A
$ git commit -m "Array printing conflict resolved."

Как вы можете заметить, процесс довольно утомительный и может быть очень сложным в больших проектах. Многие разработчики предпочитают использовать для разрешения конфликтов клиенты с графическим интерфейсом. (Для запуска нужно набрать git mergetool).

5. Настройка .gitignore
В большинстве проектов есть файлы или целые директории, в которые мы не хотим (и, скорее всего, не захотим) коммитить. Мы можем удостовериться, что они случайно не попадут в git add -A при помощи файла .gitignore

Создайте вручную файл под названием .gitignore и сохраните его в директорию проекта.
Внутри файла перечислите названия файлов/папок, которые нужно игнорировать, каждый с новой строки.
Файл .gitignore должен быть добавлен, закоммичен и отправлен на сервер, как любой другой файл в проекте.
Вот хорошие примеры файлов, которые нужно игнорировать:

Логи
Артефакты систем сборки
Папки node_modules в проектах node.js
Папки, созданные IDE, например, Netbeans или IntelliJ
Разнообразные заметки разработчика.
Файл .gitignore, исключающий все перечисленное выше, будет выглядеть так:

*.log
build/
node_modules/
.idea/
my_notes.txt

Символ слэша в конце некоторых линий означает директорию (и тот факт, что мы рекурсивно игнорируем все ее содержимое). Звездочка, как обычно, означает шаблон.

Заключение.
Вот и все! Наше руководство окончено. Мы очень старались собрать всю самую важную информацию и изложить ее как можно более сжато и кратко.
Git довольно сложен, и в нем есть еще много функций и трюков. Если вы хотите с ними познакомиться, вот некоторые ресурсы, которые мы рекомендуем:

Официальная документация, включающая книгу и видеоуроки – тут.
“Getting git right” – Коллекция руководств и статей от Atlassian – тут.
Список клиентов с графическим интерфейсом – тут.
Онлайн утилита для генерации .gitignore файлов – тут.
Оригинал статьи доступен на сайте http://tutorialzine.com

Добавлено: 22 Апреля 2021 07:16:54 Добавил: Андрей Ковальчук

Landing page или многостраничный сайт?

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

Если вы знакомы с продвижением в интернете, то слышали слово - Конверсия.

Конверсия - это соотношение общего числа посетителей сайта или страницы к тем посетителям, что выполнили на этом же сайте/странице какие-либо целевые действия.


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

Чаще всего структура у таких посадочных страниц следующая:

1. Шапка - чаще всего небольшой блок с лого, контактами.
2. Первый блок, основной - блок с основной информацией. Часто объединенный с шапкой. На нем располагается слоган, название товара или бренда. В большинстве случаев имеется кнопка призыва.
3. Второй блок - информация, описание подробно что к чему. Часто на нем располагается кнопка призыва если ее не было на предыдущем блоке, а иногда и независимо от этого.
4. Блок с преимуществами - почему мы, а никто другой.
5. Блок акции или призыва - новый блок с призывом заказать, купить, посмотреть.
6. Дополнительный инфо блок - в котором рассказывается подробно о всем или описывается процесс получение чего-то.
7. Блок с отзывами - тут важно размещать настоящие и правдивые отзывы.
8. Блок гарантий - размещаются гарантии, сертификаты, документы и тд.
9. Контакты - для возможности связаться или заказа. Может быть размещена карта с офисами - статичная или от Google, Yandex.
10. Подвал - обычный подвал как и остальных сайтов с копирайтом и другой информацией.

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

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

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

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

Но что, если сейчас вы рекламируете одну услугу, а завтра захотите расширить возможности сайта. Добавить к нему блог или раздел со статьями. Возможно, у вас появятся еще услуги или товары и что потом делать?

Я не раз встречал такое на своей практике у моих клиентов и других вебмастеров. Да и в далеком 2013 году, когда я решил создать этот сайт - он был одностраничником. Просто рекламой моих услуг для клиентов, которым я предлагал их. Через время я все переделал, перевел сайт на систему управления WordPress и наполнил его многим интересным материалом.

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

Вам ничего не мешает разместить контакты на главной и более подробные на странице - Контакты. Рассказать о вас одним абзацем на главной и расписать убедительную статью на странице - О нас. Думаю, вы уловили суть того, о чем я говорю - сделать ваш сайт универсальным.

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

Таким образом, мы с вами пришли к тому что не всегда нужно выбирать что-то одно, возможно нужно искать компромисс. К тому же универсальность часто играет на руку и упрощает жизнь. Мой выбор, как раз на универсальном сайте. Рекомендую его и вам, но все же вам решать.

Если же решитесь что вам нужен сайт с универсальной структурой и этот сайт будет работать на WordPress, то вы можете заказать создание уникальной темы у меня или найти и выбрать готовую, например, .

Думаю вы сделали выводы и определили для себя будущую стратегию. Надеюсь, моя статья помогла вам в решении и вы выбрали верный вариант.

Добавлено: 17 Апреля 2021 07:07:41 Добавил: Андрей Ковальчук

Меняющийся favicon и title если вкладка неактивная.

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

В статье я покажу один из вариантов как осуществить подобное. Более подробнее о возможностях скрипта о котором мы будем говорить, можете посмотреть на сайте разработчика - mFancyTitle.

Для начала, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Далее нужно подключить уже саму библиотеку для выполнения анимации. Из инструкции предыдущего пункта можете выбрать способ, как это сделать. Отдельным файлом, прям в код страницы и тд. Собственно сама библиотека:
!function(i){function e(i){return i.timeInterval=setInterval(function(){i.callbackFunction(i)},i.blinkInterval),i.timeInterval}function t(t,n,l,o){if(t.mftTitleBlink[o]){var r,a,c,s={},d=(new Date).getTime();switch(t.mftTitleAltText[o]){case"none":s=n.mftTitleAltText[o];break;case"":s=n.mftTitleAltText[o];break;default:s=t.mftTitleAltText[o]}c=function(e){i(document).prop("title")==e.oldTitle?i(document).prop("title",e.newTitle):i(document).prop("title",e.oldTitle)},l[o]={oldTitle:i(document).prop("title"),newTitle:s,blinkInterval:t.mftTitleBlinkInterval[o],timeInterval:0,now:a,then:d,delta:r,callbackFunction:c},l[o].timeInterval=e(l[o])}}function n(i,e,t){i.mftTitleBlink[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}function l(t,n,l,o){if(t.mftFaviconBlink[o]){var r,a,c,s={},d={"apple-touch-icon-precomposed":i('link[rel="apple-touch-icon-precomposed"]').attr("href"),icon:i('link[rel="icon"]').attr("href"),"shortcut icon":i('link[rel="shortcut icon"]').attr("href")},f=(new Date).getTime();switch(t.mftFaviconAltIcon[o]){case"none":s=n.mftFaviconAltIcon[o];break;case"":s=n.mftFaviconAltIcon[o];break;default:s=t.mftFaviconAltIcon[o]}c=function(e){if(Object.keys(e.oldFavicon).length>0)for(var t in e.oldFavicon)e.oldFavicon.hasOwnProperty(t)&&(i('link[rel="'+t+'"]').attr("href")==e.oldFavicon[t]?i('link[rel="'+t+'"]').attr("href",e.newFavicon[t]):i('link[rel="'+t+'"]').attr("href")==e.newFavicon[t]&&i('link[rel="'+t+'"]').attr("href",e.oldFavicon[t]))},l[o]={oldFavicon:d,newFavicon:s,blinkInterval:t.mftFaviconBlinkInterval[o],timeInterval:0,now:a,then:f,delta:r,callbackFunction:c},l[o].timeInterval=e(l[o])}}function o(i,e,t){i.mftFaviconBlink[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}function r(t,n,l,o){if(t.mftTitleMarquee[o]){var r,a,c,s,d=(new Date).getTime(),f=i(document).prop("title").split("");switch(f.push(" "),t.mftTitleMarqueeDir[o]){case"left":r=function(i){i.push(i.shift())};break;case"right":r=function(i){i.unshift(i.pop())}}s=function(e){e.shifted(e.myText),i(document).prop("title",e.myText.join(""))},l[o]={shifted:r,blinkInterval:t.mftTitleMarqueeDelay[o],timeInterval:0,myText:f,now:c,then:d,delta:a,callbackFunction:s},l[o].timeInterval=e(l[o])}}function a(i,e,t){i.mftTitleMarquee[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}var c=[],s={init:function(e){var s={mftMissYou:!0,mftMissYouTitle:"Hey! I miss you!",mftMissYouFavicon:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""},mftTitleBlink:{visible:!1,hidden:!1},mftTitleBlinkInterval:{visible:1e3,hidden:1e3},mftTitleAltText:{visible:"\ufeff",hidden:"\ufeff"},mftFaviconBlink:{visible:!1,hidden:!1},mftFaviconBlinkInterval:{visible:1e3,hidden:1e3},mftFaviconAltIcon:{visible:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""},hidden:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""}},mftTitleMarquee:{visible:!1,hidden:!1},mftTitleMarqueeDir:{visible:"left",hidden:"left"},mftTitleMarqueeDelay:{visible:200,hidden:500}},d=i.extend({},s,e),f=i(document).prop("title"),v={"apple-touch-icon-precomposed":i('link[rel="apple-touch-icon-precomposed"]').attr("href"),icon:i('link[rel="icon"]').attr("href"),"shortcut icon":i('link[rel="shortcut icon"]').attr("href")},m={visible:{},hidden:{}},u={visible:{},hidden:{}},h={visible:{},hidden:{}};for(var p in d)d.hasOwnProperty(p)&&"mftMissYou"!=p&&"mftMissYouTitle"!=p&&("string"==typeof d[p]||"number"==typeof d[p]?d[p]={visible:d[p],hidden:d[p]}:i.isArray(d[p])&&(d[p]={visible:d[p][0],hidden:d[p][1]}));return d.mftTitleMarquee.visible?r(d,s,h.visible,"visible"):d.mftTitleBlink.visible&&t(d,s,m.visible,"visible"),l(d,s,u.visible,"visible"),i(document).on("visibilitychange",function(){if(i(document).prop("hidden")){if(d.mftMissYou&&(""!==d.mftMissYouTitle?i(document).prop("title",d.mftMissYouTitle):i(document).prop("title",s.mftMissYouTitle),Object.keys(d.mftMissYouFavicon).length>0))for(var e in d.mftMissYouFavicon)d.mftMissYouFavicon.hasOwnProperty(e)&&i('link[rel="'+e+'"]').attr("href",d.mftMissYouFavicon[e]);n(d,m.visible,"visible"),o(d,u.visible,"visible"),a(d,h.visible,"visible"),d.mftTitleMarquee.hidden?r(d,s,h.hidden,"hidden"):d.mftTitleBlink.hidden&&t(d,s,m.hidden,"hidden"),l(d,s,u.hidden,"hidden")}else{if(i(document).prop("title",f),Object.keys(v).length>0)for(var c in v)v.hasOwnProperty(c)&&i('link[rel="'+c+'"]').attr("href",v);n(d,m.hidden,"hidden"),o(d,u.hidden,"hidden"),a(d,h.hidden,"hidden"),d.mftTitleMarquee.visible?r(d,s,h.visible,"visible"):d.mftTitleBlink.visible&&t(d,s,m.visible,"visible"),l(d,s,u.visible,"visible")}}),i(document).data("mfancytitle",{settings:d,origTitle:f,origFavicon:v,titleBlinkOptions:m,faviconBlinkOptions:u,titleMarqueeOptions:h}),c=i(document).data("mfancytitle")},update:function(e){var t=i.extend({},c.settings,e);i.mFancyTitle("destroy"),i.mFancyTitle("init",t)},destroy:function(){n(c.settings,c.titleBlinkOptions.visible,"visible"),o(c.settings,c.titleBlinkOptions.visible,"visible"),a(c.settings,c.titleBlinkOptions.visible,"visible"),n(c.settings,c.titleBlinkOptions.hidden,"hidden"),o(c.settings,c.titleBlinkOptions.hidden,"hidden"),a(c.settings,c.titleBlinkOptions.hidden,"hidden"),i.removeData(c,"mfancytitle"),this.unbind(),this.element=null}};i.mFancyTitle=function(e){return s[e]?s[e].apply(i(document),Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void i.error("Method "+e+" does not exist on jQuery.mFancyTitle "):s.init.apply(i(document),arguments)}}(jQuery);

Теперь уже сам скрипт по настройке библиотеки анимации. В моем примере несколько анимаций, можете использовать не меняя. Если хотите иначе, на сайте разработчиков много примеров, как можно настроить тот или иной вариант.
jQuery(document).ready(function($){
var title = document.title;
$.mFancyTitle({
mftMissYou: true,
mftMissYouTitle: 'Вернись, тут весело',
mftMissYouFavicon: {'apple-touch-icon-precomposed': 'site.com/fico.png','icon': 'site.com/fico.png','shortcut icon': 'site.com/fico.png'},
mftTitleBlink: [false, true],
mftTitleBlinkInterval: [1000,1000],
mftTitleAltText: [title,title],
mftFaviconBlink: [false, true],
mftFaviconBlinkInterval: 1000,
mftFaviconAltIcon: {
    'visible': {'apple-touch-icon-precomposed': 'site.com/favicon.ico','icon': 'site.com/favicon.ico','shortcut icon': 'site.com/favicon.ico'},
    'hidden': {'apple-touch-icon-precomposed': 'site.com/favicon.ico','icon': 'site.com/favicon.ico','shortcut icon': 'site.com/favicon.ico'}
},
mftTitleMarquee: [true, false],
mftTitleMarqueeDir: ['left', 'right'],
mftTitleMarqueeDelay: [200, 200]
});
});

В 5 строке текст - Вернись, тут весело. Он будет появляться, меняя основной тайтл страницы. В 6 строке трижды указана ссылка на ваш второй favicon, который будет менять основную иконку.

В 13,14 строке указывается ссылка на стандартный favicon.ico. Тот что у вас стоит на сайте по-умолчанию.

Важный момент!

У сайта должен быть указан в HEAD такие же ссылки на стандартный favicon.ico

<link rel="shortcut icon" href="site.com/favicon.ico" type="image/x-icon">
<link rel="icon" href="site.com/favicon.ico" type="image/x-icon">

Подробнее о настройках тоже на сайте разработчика. Расписывать все нет смысла, об этом расписано уже. Просто вам пример готового решения, если нужно быстро сделать интересную анимацию и добавить эффектов сайту.

Добавлено: 16 Апреля 2021 07:43:18 Добавил: Андрей Ковальчук

Как скопировать адрес страницы в буфер обмена

Скрипт
Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

Подключать его нужно после библиотеки jQuery. Она должна быть подключена на вашем сайте, только после нее нужно добавлять скрипт.

После подключения clipboard.js, нужно добавить небольшой скрипт, что запустит исполнение библиотеки clipboard при нажатии определенной кнопки. Код совсем не большой, как его подключить, можете посмотреть в той же статье, упомянутой выше.
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
});

Скрипт работает так, что при нажатии на кнопку, ссылка копируется и ничего не происходит. Можно вывести сообщение об успешном копировании, чтобы посетитель понимал. что все хорошо. Тогда код будет выглядеть так:
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
$('.copy_link').click(function(){alert('Cсылка успешно скопирована в буфер обмена.');});
});

Вместо alert, можно добавить модальное окно или появление текста под кнопкой. Все зависит от вашей фантазии. Можете кастомизировать идею как хотите.

В скрипте, стоит обратить внимание на класс кнопки, по нажатию на которую будет копироваться ссылка. .copy_link - и есть класс кнопки, если захотите указать свой. смените его.

HTML разметка
Теперь в нужное место на сайте, где должна быть размещена кнопка, добавьте такую HTML разметку:
<span class="copy_link">Копировать ссылку</span>

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

CSS стили
Стили могут быть любыми, как пример использовать можно эти:
.copy_link{cursor:pointer;display:inline-block;padding:0 10px;line-height:25px;background:#fc0;color:#000;}

Добавлено: 09 Апреля 2021 06:59:37 Добавил: Андрей Ковальчук

Элементы для задания формата даты

Здесь представлен список возможных значений, которые участвуют при задании формата даты в плагинах UI:

1. d — число в месяце (в один или два символа: 1, 2, 3,... 10, 11,... 31).
2. dd — число в месяце (всегда в два символа: 01, 02, 03,... 10, 11,... 31).
3. o — число в году (в один два или три символа: 1, 2, 3,... 365).
4. oo — число в году (всегда в три символа: 001, 002, 003,... 010, 011,... 365).
5. D — сокращенное названия дня недели.
6. DD — полное названия дня недели.
7. m — номер месяца в году (в один или два символа: 1, 2, 3,... 11, 12).
8. mm — номер месяца в году (всегда в два символа: 01, 02, 03,... 11, 12).
9. M — сокращенное названия месяца.
10. MM — полное названия месяца.
11. y — номер года в две цифры.
12. yy — номер года в четыре цифры.
13. @ — Unix timestamp (количество миллисекунд начиная с 01/01/1970)
14. ! — Windows ticks (количество наносекунд*100, начиная с 01/01/0001).
15. " — одинарная кавычка.
16. все остальное будет отображаться без изменений.

Например, формат даты, вида "31-12-2010" задается строкой "dd-mm-yy".

Стандарты указания дат, доступные в плагине Datepicker:

1. ATOM - 'yy-mm-dd' (соответствует стандартам RFC 3339/ISO 8601)
2. COOKIE - 'D, dd M yy'
3. ISO_8601 - 'yy-mm-dd'
4. RFC_822 - 'D, d M y'
5. RFC_850 - 'DD, dd-M-y'
6. RFC_1036 - 'D, d M y'
7. RFC_1123 - 'D, d M yy'
8. RFC_2822 - 'D, d M yy'
9. RSS - 'D, d M y'
10. TICKS - '!'
11. TIMESTAMP - '@'
12. W3C - 'yy-mm-dd'

Добавлено: 10 Марта 2021 12:26:11 Добавил: Андрей Ковальчук

Как отобразить на сайте содержимое DOC, RTF, PDF или ODT файла

Google Docs предоставляет возможность встраивать свой вьювер на любые страницы, с помощью iframe:

Пример просмотра файла http://example.com/file.pdf:

<iframe
    src="http://docs.google.com/gview?url=http://example.com/file.pdf&embedded=true"
    style="width:600px; height:500px;"
    frameborder="0"
></iframe>

Поддерживаемые форматы — PDF, DOC, RTF и ODT.

Добавлено: 29 Июля 2018 22:28:29 Добавил: Андрей Ковальчук

Как получить скриншоты видео залитого на YouTube

У каждого видео, залитого на YouTube, есть 4 скриншота хранящихся на серверах самого YouTube. Один скриншот имеет размер 480x360, а три других — 120x90. Скриншоты доступны по адресу:

http://img.youtube.com/vi/[VIDEO_ID]/[0-3].jpg
Например для http://www.youtube.com/watch?v=rF1X12PE6PY это:

http://img.youtube.com/vi/rF1X12PE6PY/0.jpg
http://img.youtube.com/vi/rF1X12PE6PY/1.jpg
http://img.youtube.com/vi/rF1X12PE6PY/2.jpg
http://img.youtube.com/vi/rF1X12PE6PY/3.jpg

Добавлено: 29 Июля 2018 20:33:08 Добавил: Андрей Ковальчук

Мой подход к работе с Git

Второй день знакомлюсь с Git. Читаю книжку Pro Git, попутно загоняя буковки в консоль =)

Расскажу, как организовал процесс разработки на своём компьютере. Если что-то не правильно или есть лучшие способы, то смело пишите в комментах!

Более опытные коллеги подсказали, что ставить на локальный компьютер "Git сервер" не очень разумно, лучше обойтись одной папкой в которой будут размещаться голые (bare) репозитории и которая будет служить центральным хранилищем.

Итак. Создаём папку под голые репозитории, например C:\GitRepos (да да, я сижу на Windows):

$ mkdir /c/GitRepos

Создаём голый репозиторий myproject.git:

$ cd /c/GitRepos
$ mkdir myproject.git
$ cd myproject.git
$ git init --bare

Переходим в каталог, в котором располагаются исходники проекта myproject и создаём там новый локальный репозиторий:

$ git init

Связываем его с основным:

$ git remote add origin /c/GitRepos/myproject.git

Добавляем в локальный репозиторий файлы и делаем первый коммит:

$ git add .
$ git commit -a -m 'First commit'

Отправляем проект на "сервер" (в папку C:\GitRepos):

$ git push origin master

Теперь чтобы продолжить разработку myproject в другом месте, нужно сделать копию основного репозитория:

$ git clone /c/GitRepos/myproject.git

и после очередного коммита в локальный репозиторий, обновить основной:

$ git push

Получить свежую версию из основного репозитория, можно так:

$ git pull

Добавлено: 27 Июля 2018 22:52:42 Добавил: Андрей Ковальчук

Присваивание рангов

Задача
Вы хотите присвоить ранги набору значений.

Решение
Выберите метод ранжирования, расположите элементы в нужном порядке и примените к ним выбранный метод.

Обсуждение
Для некоторых типов статистических проверок требуется присваивание рангов. Я опишу три метода ранжирования и покажу, как можно реализовать каждый из них при помощи переменных SQL. В примерах предполагается, что таблица t содержит следующие результаты, которые должны быть ранжированы по убыванию значений:

mysql> SELECT score FROM t ORDER BY score DESC;

+-------+
| score |
+-------+
| 5 |
| 4 |
| 4 |
| 3 |
| 2 |
| 2 |
| 2 |
| 1 |
+-------+

Один из способов ранжирования заключается просто в присвоении каждому значению номера соответствующей строки упорядоченного множества значений. Для получения такой классификации будем отслеживать номер строки и использовать его для текущего ранга:

mysql> SET @rownum := 0;
mysql> SELECT @rownum := @rownum + 1 AS rank, score
-> FROM t ORDER BY score DESC;


+-----+-------+
| rank | score |
+-----+-------+
| 1 | 5 |
| 2 | 4 |
| 3 | 4 |
| 4 | 3 |
| 5 | 2 |
| 6 | 2 |
| 7 | 2 |
| 8 | 1 |
+-----+-------+

Такая классификация не принимает в расчет возможность «ничейного счета» – вхождения одинаковых значений. Второй метод учитывает такую возможность, увеличивая ранг только при изменении значения:

mysql> SET @rank = 0, @prev_val = NULL;
mysql> SELECT @rank := IF(@prev_val=score,@rank,@rank+1) AS rank,
-> @prev_val := score AS score
-> FROM t ORDER BY score DESC;


+-----+-------+
| rank | score |
+-----+-------+
| 1 | 5 |
| 2 | 4 |
| 2 | 4 |
| 3 | 3 |
| 4 | 2 |
| 4 | 2 |
| 4 | 2 |
| 5 | 1 |
+-----+-------+

Третий метод ранжирования – это комбинация первых двух. Ранги присваиваются по номеру строки, за исключением случаев с повторениями. Все одинаковые значения получают одинаковый ранг, равный номеру строки первого из значений. Для реализации этого метода будем отслеживать номер строки и предыдущее значение, увеличивая ранг до текущего номера строки при изменении значения:

mysql> SET @rownum = 0, @rank = 0, @prev_val = NULL;
mysql> SELECT @rownum := @rownum + 1 AS row,
-> @rank := IF(@prev_val!=score,@rownum,@rank) AS rank,
-> @prev_val := score AS score
-> FROM t ORDER BY score DESC;


+-----+------+-------+
| row | rank | score |
+-----+------+-------+
| 1 | 1 | 5 |
| 2 | 2 | 4 |
| 3 | 2 | 4 |
| 4 | 4 | 3 |
| 5 | 5 | 2 |
| 6 | 5 | 2 |
| 7 | 5 | 2 |
| 8 | 8 | 1 |
+-----+------+-------+

Ранги так же легко присваивать и в программах. Например, следующий фрагмент кода PHP ранжирует результаты из таблицы t, используя третий метод:

$result_id = mysql_query ("SELECT score FROM t ORDER BY score DESC", $conn_id)
or die ("Cannot select scores\n");
$rownum = 0;
$rank = 0;
unset ($prev_score);
print ("Row\tRank\tScore\n");
while (list ($score) = mysql_fetch_row ($result_id))
{
++$rownum;
if ($rownum == 1 || $prev_score != $score)
$rank = $rownum;
print ("$rownum\t$rank\t$score\n");
$prev_score = $score;
}
mysql_free_result ($result_id);


Третий способ ранжирования широко распространен вне области статистических расчетов. Вспомните, как в рецепте 3.18 мы использовали таблицу al_winner, содержащую информацию о 15 лучших подающих 2001 года из Американской Лиги :

mysql> SELECT name, wins FROM al_winner ORDER BY wins DESC, name;


+-----------------+------+
| name | wins |
+-----------------+------+
| Mulder, Mark | 21 |
| Clemens, Roger | 20 |
| Moyer, Jamie | 20 |
| Garcia, Freddy | 18 |
| Hudson, Tim | 18 |
| Abbott, Paul | 17 |
| Mays, Joe | 17 |
| Mussina, Mike | 17 |
| Sabathia, C.C. | 17 |
| Zito, Barry | 17 |
| Buehrle, Mark | 16 |
| Milton, Eric | 15 |
| Pettitte, Andy | 15 |
| Radke, Brad | 15 |
| Sele, Aaron | 15 |
+----------------+------+

С помощью третьего метода этим игрокам можно присвоить ранги следующим образом:

mysql> SET @rownum = 0, @rank = 0, @prev_val = NULL;
mysql> SELECT @rownum := @rownum + 1 AS row,
-> @rank := IF(@prev_val!=wins,@rownum,@rank) AS rank,
-> name,
-> @prev_val := wins AS wins
-> FROM al_winner ORDER BY wins DESC;


+-----+------+-----------------+------+
| row | rank | name | wins |
+-----+------+-----------------+------+
| 1 | 1 | Mulder, Mark | 21 |
| 2 | 2 | Clemens, Roger | 20 |
| 3 | 2 | Moyer, Jamie | 20 |
| 4 | 4 | Garcia, Freddy | 18 |
| 5 | 4 | Hudson, Tim | 18 |
| 6 | 6 | Abbott, Paul | 17 |
| 7 | 6 | Mays, Joe | 17 |
| 8 | 6 | Mussina, Mike | 17 |
| 9 | 6 | Sabathia, C.C. | 17 |
| 10 | 6 | Zito, Barry | 17 |
| 11 | 11 | Buehrle, Mark | 16 |
| 12 | 12 | Milton, Eric | 15 |
| 13 | 12 | Pettitte, Andy | 15 |
| 14 | 12 | Radke, Brad | 15 |
| 15 | 12 | Sele, Aaron | 15 |
+----+------+-----------------+------+

Добавлено: 23 Июля 2018 20:37:56 Добавил: Андрей Ковальчук