Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Как сделать видеофон для сайта
Приветствую всех посетителей сайта! Сегодня мы будем рассматривать установку видео в качестве бэкграунда для сайта. С появлением скоростного Интернета и мониторов большого разрешения у вебмастеров появилось гораздо больше возможностей для модернизации новых проектов.
Помимо больших полноэкранных слайдеров и картинок, все чаще в качестве фона можно встретить полноэкранное видео. Для наглядного примера я приведу десяток подобных сайтов чуть ниже. А пока давайте выясним, как можно реализовать такой эффект на своем сайте.
Установить видеофон можно разными методами, например, с помощью специальных плагинов и скриптов, либо как flash-video, либо используя возможности HTML5. Последний метод более востребован в среде веб-мастеров, так как при правильной оптимизации видеоролика он особо не тормозит загрузку сайта и прост в применении.
Именно с помощью HTML5 мы сегодня и будем устанавливать видеофон на свой сайт и поможет в этом нам специальный тег <video>. Перед тем, как приступить к установке, нужно подготовить исходное видео в основных форматах.
Не все браузеры воспроизводят популярный видео-формат mp4, поэтому для подстраховки будем использовать еще форматы webm и ogg. Имея выбор, браузер клиента автоматически определит поддерживаемый формат из предложенных и беспроблемно воспроизведет нужное видео.
Конвертировать видео в нужные форматы можно с помощью онлайн-конвертеров, например, http://video.online-convert.com/ru. Подготовив видео в трех форматах, можно приступать к процессу их установки на сайт в качестве фона.
Но сначала для вдохновения предлагаю взглянуть на ресурсы, которые используют полноэкранные видеофоны. Вот десяток сайтов с установленными видеороликами в качестве бэкграунда:
1. http://eagleclean.co.uk
2. http://paypal.com
3. https://y.co/
4. Lifeofpimovie.com
5. Llr-hamburg.de
6. Isurfbecause.com
7. http://marisapassos.com/
8. http://iuqo.com/
9. http://blacknegative.com/#!/luminarc/
10. http://www.workingelement.com/
Итак, как всегда, начнем со структуры.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 видео в качестве заднего фона</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video autoplay loop muted class="bgvideo" id="bgvideo">
<source src="video.mp4" type="video/mp4"></source>
</video>
</body>
</html>
Думаю, тут все ясно. Запускаем видео сразу при загрузке страницы, зацикливаем его, чтобы оно никогда не останавливалось, и отключаем звук.
Перейдем к стилям
body {
background: url('video.png');
background-size: cover;
}
.bgvideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -9999;
}
Тут тоже нет ничего сверхестественного. Для видео мы задаем ширину и высоту по 100%, делаем выравнивание видео по правому нижнему краю и задаем свойство z-index отрицательным, чтобы текст и другие элементы могли отображаться поверх видео.
Если, вдруг, видео не будет отображаться, то мы отобразим картинку, которую мы задали для тега body.
Теперь я расскажу про фильтры и скорость воспроизведения видео в HTML5.
Начнем с фильтров. К примеру, вы можете добавить оттенок серого к вашему видео
.bgvideo {
// код
filter: grayscale(100%);
}
И, также, вы можете изменить силу его эффекта, поставив вместо 100%, к примеру, 17%
Или вы можете добавить эффект "сепия" к вашему видео таким образом:
.bgvideo {
// код
filter: sepia(100%);
}
Теперь поговорим про воспроизведение видео. Откройте консоль в браузере и пропишите следующее:
var video = document.getElementById('bgvideo');
Таким образом мы получим объект, у которого есть несколько методов и свойство. Поговорим про некоторые из них
video.play();
video.pause();
video.playbackRate = 5;
Думаю, тут все понятно. Метод play запускает воспроизведение видео, метод pause, наоборот, приостанавливает воспроизведение видео, а свойство playbackRate позволяет указать, с какой скоростью должно воспроизводиться видео: 1 - оригинал, > 0 - быстрее, < 0 - медленнее. В нашем случае видео будет идти в 5 раз быстрее, чем в оригинале.
Не забудь заглянуть в свою почту и подтвердить подписку!
Посмотрели? Понравилось? Тогда переходим ближе к делу... Итак, у нас выбрано видео и подготовлено в трех форматах (для удобства браузеров), теперь приступаем к технической части.
Первым делом вставим на сайт следующий HTML-код:
<video id="video_background" loop muted autoplay>
<source src="name_video.mp4" type='video/mp4'>
<source src="name_video.webm" type='video/webm'>
<source src="name_video.ogg" type='video/ogg'>
</video>
Для тега <video> мы указали следующие параметры: loop (зациклили видеоролик, чтобы он проигрывался беспрерывно), muted (отключили звук, чтобы не отвлекать посетителя от основного контента) и autoplay (установили автоматическую загрузку ролика вместе с содержимым страницы).
Если же ваш ролик мотивационного или рекламного характера, где упор идет на "продающий" текст, то без звука здесь не обойтись и в таком случае нужно просто убрать параметр muted или прописать для него значение mute="false". Также звук можно оставить для видеофонов с легким ненавязчивым звучанием природы (шелест листвы, шум прибоя, пение птиц и т.д), хотя все зависит от целей страницы.
Можно пойти еще дальше и дать пользователю возможность самостоятельно регулировать звук, для этого вывести на экран пару кнопок для увеличения и уменьшения громкости. Для реализации такой возможности следует в код добавить такие строки:
<div id='buttons'>
<button id="player" onclick="document._video.volume+=0.1">Звук +</button>
<button id="player" onclick="document._video.volume-=0.1">Звук -</button>
</div>
В таком случае в левом верхнем углу видеофона появятся две кнопки, внешнее оформление которых можно легко настроить под дизайн сайта в стилях css. Ниже размещены стили для видеоролика (#video_background) и кнопок (#player - исходный цвет кнопки и #player:hover - цвет при наведении).
<style>
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -999;
overflow: hidden;
}
#player {
font-family: Arial;
color: #ffffff;
font-size: 13px;
padding: 5px;
text-decoration: none;
text-shadow: 1px 1px 3px #777777;
background: #333300;
border-radius: 5px #ffffff;
}
#player:hover {
font-family: Arial;
color: #333300;
background: #ffffff;
border-radius: 5px #333300;
</style>
Осталось прописать в стилях еще несколько строк для пользователей мобильных устройств. Так как мобильный интернет заметно уступает по скорости ПК, то владельцам экранов менее 768px мы не будем показывать видео, а покажем лишь изображение, представляющее собой скриншот любого подходящего кадра видеоролика:
@media (max-width: 767px) {
.video_background {
background: url('../images/azhur.jpg') center center / cover no-repeat;
}
.video_background__video {
display: none;
}
Не забудьте изображение загрузить в папку images на сервере и прописать вместо моего изображения своё, указав правильный путь к нему, выделенный в строке background синим цветом.
Вот и вся установка видеофона...:)) Я для демо-примера подобрала видео на одном из бесплатных ресурсов, на мой взгляд, оно послужит отличным бэкграундом для одного из лендингов. В следующем материале я поделюсь с вами подборкой бесплатных сервисов, где можно свободно скачать любое видео для своего фона.
И напоследок пару советов... Старайтесь подбирать "нетяжелые" видео для бэкграунда, иначе страница будет долго грузиться. Но если ролик того стоит, то желательно установить красивый прелоадер (индикатор загрузки), чтобы "скрасить" ожидание пользователя. Можно, как вариант, установить под видеофон изображение первого кадра видео, не успеет посетитель рассмотреть картинку, как она "оживет" и преобразуется в ролик.
Можно также затемнить видеофон с помощью оверлея, чтобы размещенный поверх текст максимально привлекал внимание пользователя. Для этого в самой первой строке кода мы добавим класс "overlay" нашему видео и в стилях для него, соответственно, пропишем несколько дополнительных строчек.
Теперь первая строка кода будет такой:
<video id="video_background" loop muted autoplay class="overlay" >
А в стилях будут добавлены такие строки (можно вставить в самом верху сразу после тега <style>) :
.overlay {width: 100%; height:100%; display:block;}
#video_background {
background: rgba(0,0,0,0.6);
top: 0; bottom: 0; left: 0; right: 0;
position: fixed;
overflow: hidden;
В строке background: rgba(0,0,0,0.6) последние цифры в скобках задают степень затемненности видео, по умолчанию прописано 0.6, но вы можете менять это значение по своему усмотрению от 0.1 до 0.9.
Мы рассмотрели все основные нюансы установки видеофона и теперь, я уверена, вы сможете самостоятельно сделать из любого подходящего видео отличный бэкграунд для своего проекта.
(Не пытайтесь в демо регулировать звук, т.к. исходный ролик идет без звукового сопровождения) :))
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат подборку профессиональных паттернов для сайта. 18 цветовых решений по 28 паттернов в каждом, итого полтысячи отличных паттернов в вашем распоряжении.
Подсказка для поклонников WPM: чтобы применить понравившийся паттерн к бэкграунду сайта, достаточно в Свойствах страницы во вкладке Фон поставить галочку напротив "Фоновый рисунок" и выбрать паттерн на своем ПК. Он автоматически замостит всю страницу.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
2. http://isurfbecause.com
3. https://y.co/
4. http://paypal.com
5. http://lifeofpimovie.com
6. http://llr-hamburg.de
7. http://marisapassos.com
8. http://iuqo.com
9. http://blacknegative.com/#!/luminarc/
10. http://www.workingelement.com
