Бесплатные обучающие уроки

Эта рубрика целиком и полностью посвящена урокам на разные темы. Здесь содержаться статьи по компьютерной грамотности, уроки создания сайтов на HTML, CSS, PHP, CMS Wordpress и других, программировании на Javascript, работе в редакторе Adobe Photoshop и других программах, поисковой оптимизации и многих других.

Получаем последнее видео с YouTube канала через PHP

Привет. В последнее время я предпринимаю активные действия в раскрутке своего YouTube канала и в качестве дополнительного источника потенциальных подписчиков решил задействовать свой блог, который вы сейчас читаете. Я подумал, что было бы не плохо выводить последнее видео с моего ютуб канала и те, кому будет интересен мой контент, будут подписываться и таким образом развитие канала будет проходить быстрее. По крайней мере я запущу этот эксперимент на какое-то время и посмотрим, что из этого получится. Так как же получить последнее видео с ютуб канала средствами PHP? Есть решение, которое я нашел в сети и немного его доработал. Но в начале посмотрите демо страницу, на которой наглядно показано, как это работает.

Демо

А вот и сам скрипт:

1
2
3
4
5
6
7
8
$id = NULL;
$channel_id = 'UCgNG9gOPDO8_tmBd1sHzqHA';
$link = 'https://youtu.be/';
 
$xml = simplexml_load_file(sprintf('https://www.youtube.com/feeds/videos.xml?channel_id=%s', $channel_id));
$id = $xml->entry->children('yt', true)->videoId;
 
echo "<a href='$link{$id}'>Ссылка</a>";

Если необходимо встраивать последнее видео с канала, то необходимо добавить фрейм:

1
echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

Если использовать цикл foreach, то можно получить 15 последних видео с канала:

1
2
3
4
foreach ($xml as $value) {
  echo $value->id.'<br />'; // Идентификаторы видео
  echo $value->title.'<br />'; // Заголовки видео
}

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

Стабилизация видео в Adobe Premiere pro (Warp Stabilizer)

Warp stabilizer Premiere Pro

Всем привет. Если в вашей камере нет встроенного стабилизатора, а так же если вы не используете для съемки видео штатив или внешний стабилизатор, то наверняка сталкивались с проблемой когда картинка в видео прыгает и ее колбасит в разные стороны. Это особенно заметно на длиннофокусных объективах. И, к счастью, это можно исправить уже после съемки, как говорится «на пост продакшене». Наиболее популярной программой для монтажа и цветокоррекции является Adobe Premiere Pro, в ней мы и будем делать стабилизацию для видео.

Для этого не требуется никаких дополнительных плагинов, это встроенная функция самой программы. В английской версии называется Warp stabilizer, а в русской — Стабилизатор деформации. Но если в русской dы будете искать в строке поиске по эффектам «стабилизатор», то результатов он не вам не выдаст, искать нужно именно «деформацию».

Стабилизация в Adobe Premiere Pro

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

Анализ стабилизации в премьер про

Настроек у этого эффекта не так много, поэтому разобраться не сложно.

efects-premiere-pro

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

параметры стабилизации видео премьер про

И Плавное движение, если нужно стабилизировать именно движение, чтобы оно было более плавным без резких скачков и дерганий. Чуть ниже есть еще одна настройка, которая отвечает за то, как именно нужно стабилизировать видео в Премьер про, с кадрирование или нет. Если выбрать один из параметров с кадрированием то края видео будут обрезаны и сама картинка будет чуть увеличена. Если вы снимаете в высоком разрешении, например 4к, то это не критично, если Full HD или HD, то нужно будет посмотреть на итоговый вариант и решить на сколько он пригоден для использования в проекте.

kadrirovanie premiere pro

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

Стабилизация premiere pro

Этих знаний будет достаточно для того, чтобы делать стабилизацию видео в Premiere Pro/ Если у вас есть какие-либо замечания, предложения, то пишите об этом в комментариях. Спасибо за внимание.

Кастомные чекбоксы. Стилизация через CSS (Custom checkboxes)

custom-checkbox

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

Демо

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

1
2
<input type="checkbox" class="checkbox" id="box"/>
<label for="box"></label>

Класс checkbox был написан для удобства напиcания CSS, а ID для привязки лейбла и изменения цвета в последующем. Теперь напишем сам CSS код и стилизуем чекбокс.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.checkbox {
  position: relative;
  z-index: -1;
  opacity: 0;
 
}
.checkbox + label {
  position: relative;
  cursor: pointer;
}
.checkbox + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox:checked + label:before {
  background: #006cfa;
}
.checkbox:checked + label:after {
  left: 26px;
}

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

1
2
3
#box:checked + label:before{
  background: #8BC34A;
}

А если в сам label необходимо поместить какой-то текст, то начиная с 7 строки, где .checkbox + label нужно дописать padding, чтобы в итоге получилось вот так:

1
2
3
4
5
.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}

На этом стилизация кастомных чекбоксов окончена. Кода получилось совсем не много. Спасибо за внимание.

Как сделать кнопку неактивной через JavaScript

Неактивная кнопка JS

Всем привет. Речь конечно же пойдет о кнопке на странице сайта или какого-то веб-приложения. Мы будем делать ее неактивной через JS, но для этого нам нужно создать условие, то есть в каких случаях кнопка будет неактивной, потому что оставлять ее в этом положении навсегда не имеет смысла. В большинстве случаев это делается при проверке каких-то данных в форме и там как раз есть условие — если проверка на заданные условия пройдена, то кнопку сделаем активной, если нет — нажатие на кнопку будет запрещено. Я уже писал про валидацию номера телефона на JS, поэтому мы можем частично воспользоваться кодом, который приведен в статье. неактивная кнопка а HTML выглядит так:

<button disabled="true">Кнопка</button>

Или так:

<input type="submit" disabled value="Кнопка"/>


А так же:

<button disabled>Кнопка</button>
<input type="submit" disabled value="Кнопка"/>

То есть кнопке просто добавляется атрибут disabled и дальше будет зависеть от контекста. В каких случаях атрибуту присваивать значение TRUE, а в каких FALSE. Теперь можно перейти к конкретным примерам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validatePhone(phone){
 var regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}
 
let inp = document.querySelector('.inp');
let btn = document.querySelector('.btn');
btn.setAttribute('disabled', true);
 
inp.oninput = function(){
  let phone = document.querySelector('.inp').value;
  if (!validatePhone(phone)){
    btn.setAttribute('disabled', true);
  }else{
    btn.removeAttribute('disabled');
  }
}

Демо

Эта конструкция кода проверяет номер телефона в формате +7 и пока не будет введен верный номер в поле — кнопка останется неактивной. Как только номер будет соответствовать заявленным требованиям, то есть регулярному выражению — кнопка станет активной. То же самое мы можем сделать для Email адреса. Все, что нужно сделать, это поменять регулярное выражение в переменной regex, которое будет проверять именно Email.

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

Как повесить 2 функции по нажатию одной кнопки в JavaScript (onclick)

2 функции на одно нажатие в JS

Привет, друзья. Есть задача: по нажатию одной кнопки должно срабатывать 2 функции в JS. Решается это очень просто, но у многих начинающих изучать программирование почему-то возникают с этим трудности. Давайте разберем пример с двумя функциями на событии onclick. И как и в предыдущем примере, когда мы делали нажатие на копку в JavaScript, можно пойти двумя способами. На странице есть такая кнопка:

<button type="submit" id="submit">Нажми меня</button>

Первый вариант:

1
2
3
4
5
6
7
8
document.querySelector("#submit").onclick = function(){
  console.log("Результат работы функции 1");
send2();
}
 
function send2(){
  console.log("Результат работы функции 2");
}

В итоге в консоли мы увидим ожидаемый результат:

Обе функции можно написать отдельно, что будет более правильным решением.

1
2
3
4
5
6
7
function send1(){
  console.log("Результат работы функции 1");
}
 
function send2(){
  console.log("Результат работы функции 2");
}

А потом написать либо так:

1
2
3
4
document.querySelector("#submit").onclick = function(){
send1();
send2();
}

Либо так:

<button type="submit" id="submit" onclick="send1(); send2();">Нажми меня</button>

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