Блог веб разработчика

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

Оказывается механизм установки формы от яндекс (яндекс.деньги — сейчас самая популярное средство оплаты) весьма прост. Регистрируем яндекс кошелек, проходим верификацию и выбираем в левом меню пункт «Как собирают деньги». Там в конструкторе форм выбираем подходящий вариант и поучаем код вида

<iframe src="https://money.yandex.ru/quickpay/shop-widget?writer=buyer&targets=&targets-hint=&default-sum=&button-text=11&hint=&successURL=&quickpay=shop&account=410013078860241" width="450" height="190" frameborder="0" allowtransparency="true" scrolling="no"></iframe>

Просто устанавливаем это код в нужное место на сайте и все,  ждем поступлений от меценатов.

Скорость работы сайта определяется по тесту скорости от https://developers.google.com/speed/pagespeed/insights/?hl=ru Залогом быстрой работы сайт являются прописанные в файле .htaccess настройки работы веб сервера. Именно в нем настраивается кэширование контента браузером и его длительность,  сжатие данных при передаче между сервером и клиентом, редиректы и прочие важные настройки. Сложно написать эти директивы самому, так как они написаны на синтаксисе конфигурационных файлов сервера Apache, который хорошо знают специалисты, работающие именно с серверным оборудованием(технические специалисты хостинга). Поэтому для себя храню  «идеальный» вариант данного файла, который можно брать как дефолтный и по необходимости подстраивать под себя.

Ссылка на идеальный .htaccess

 

При отправке формы обратной связи с лендингов пользуюсь стандартным php скриптом:

$address = "test@gmail.com";
$mes = "Тема: Заказ обратного звонка!\nТелефон: $phone\nИмя: $name\nСообщение(необязательно): $info";
$sub='Заказ'; 
$email='Заказ <my-post@gmail.com>'; // от кого
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");

Все было нормально, почта при отправке формы всегда моментально приходила, все устраивало. Но вот в одном из случаев, когда почта для доставки писем была @gmail.com письма не приходили. Весьма странно. Ранее были отправки на почту яндекса и майл.ру, поэтому сразу стало понятно, что загвоздка в самом почтовом сервере от google. Очевидно, что ему что-то не нравится.

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

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = utf-8");

все стало работать.

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

<script>
	$(function () {
		$('a').each(function () {
			var location = window.location.href;
			var link = this.href;
			if(location == link) {
				$(this).addClass('active');
			}
		});
	});
</script>

Этот скрипт надо разместить перед закрывающимся body, после того как подключен скрипт jquery.

На одном из сайтов создал robots.txt и запретил в нем поисковым роботам индексировать информацию.  Делается это весьма просто с помощью строчки

User-agent: *
Disallow: /

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

User-agent: *
Disallow:

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

Иногда необходимо в зависимости от разрешения экрана прятать/показывать элементы страницы. В bootstrap для этого есть соответствующие классы, вроде hidden-xs, visible-md и т.д. Но что, если необходимо этот элемент прятать/показывать в зависимости от действий пользователя. В таком случае помогут следующие условия:

if(document.body.clientWidth < 992) {
}
if(document.body.clientHeight < 992) {
}

То есть в одном свойстве хранится ширина, а в другом высота экрана.

Стояла задача вставить на сайт видео с помощью тега <video> фоном.  Сам файл видео находится на хостинге. Также необходимо было, чтобы пользователь сам мог запустить и остановить видео. По умолчанию видео стоит на месте и показывает черны экран. Чтобы черного экрана не было необходимо указать аттрибут poster.

 <video id="videoPlayer" loop poster="assets/img/poster.jpg">

Далее добавил иконки, которым задал id указанные в скрипте

var play;
play=document.getElementById("play");
play.onclick = function() { $("#videoPlayer")[0].play(); }
var pause;
pause=document.getElementById("pause");
pause.onclick = function() { $("#videoPlayer")[0].pause(); }

 

 

Для создания красивых эффектов при загрузке сайта и переходе между секциями используют скрипт WOW.js в связке со стилями animate.css. В <head> необходимо подключить стили:

<link href="css/animate.css" rel="stylesheet">

Перед закрывающимся тегом <body> необходимо вставить

<script src="js/wow.min.js"></script>

Для работы WOW необходимо, чтобы был подключен jQuery. Теперь к анимируемым элементам необходимо добавить классы wow и класс эффекта анимации. Но просто добавить их недостаточно, необходимо в скриптах запустить инициализацию

new WOW().init();

Теперь все должно работать.

Необходимо, чтобы заказчик сам менял данные на лендинге. Подходящих скриптов найти не удалось. Нашел только сервис edit-content.com/sites. Это именно сервис, а не скрипт. В настройках сервиса настраивается  доступ к сайту по фтп и можно производить редактирование заранее размеченных (с помощью класса editable) областей. Данный сервис бесплатный, так я прочитал в одной статье. Но спустя две недели использования пришло письмо, ваш тестовый период заканчивается, платите деньги. Для одного сайта -10$ в месяц. За бугром это может и копейки, по у нас — это деньги.

Стал искать дальше и нашел. На хостинге hostland.ru есть очень удобный файловый менеджер, а в нем — WYSIWYG редакторы.  Не могу сказать, чтобы они работали идеально, но для моих задач вполне подошел CKEditor. Он позволяет менять тексты, ссылки, картинки, таблицы — именно то, что и было нужно.

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

Обычно шрифты подключаются из fonts.google.com. Однако, часто в PSD макетах для верстки используются шрифты, отсутствующие там. В таком случае приходится искать шрифты в других местах и скачивать архив с ними.  Для подключения новых шрифтов в файле стилей необходимо прописать следующее:

@font-face {
  font-family: 'AvenirNextCyr-Bold';
  src: url('../fonts/AvenirNextCyr-Bold.eot');
  src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}