В каких случаях можно делать сайт на конструкторе?

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

Нужно быстро запустить сайт.

Запустить сайт на конструкторе можно за 30 минут, это правда. Если же вы закажете сайт у разработчиков, сначала с вами будут вести диалог о вас и вашем бизнесе, чтобы разработать для вас лучшее решение. Потом дизайнер сделает макет, верстальщик создаст по этому макету сайт. На это может уйти от 5 дней.

Протестировать идею.

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

Разовая сделка.

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

Если выбирать конструктор сегодня, это однозначно Тильда, удобный и недорогой конструктор.

Если материал был вам полезен — поставьте лайк этой записи:)

Возникли сложности с созданием сайта на конструкторе?
Напишите мне и мы что-нибудь придумаем.

Табы на JQuery и JavaScript


Сегодня разберем как делаются вкладки (табы) на JQuery и JavaScript .

Весь код для копирования в конце статьи.

Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery, ниже JavaScript.

В самом начале объясню схему, по которой мы будем делать табы:

  1. Добавим вкладкам и блокам с их содержимым классы с приставкой js- для обращения к ним из JavaScript.
  2. Добавим data атрибут data-tab для идентификации наших табов. Некоторые делают табы по индексу элемента в dom-дереве, я так делать не буду, это не гибкая конструкция.
  3. При клике на вкладку, удалим активный класс у всех вкладок, добавим той, по которой кликнули, удалим активный класс у всех блоков с содержимым и добавим тому, у которого значение атрибута data-tab такое же как у атрибута data-tab нашей вкладки.

Про приставку js.
Мы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.

В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.

Первым делом создадим разметку для наших табов.

<!-- Общий контейнер для табов -->
<div class="tabs">
   
   <!--  Контейнер с вкладками   -->
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger active" data-tab="1">Первая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="2">Вторая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="3">Третья</li>
   </ul>
   
   <!--  Контейнер с блоками, которые содержат контент вкладок   -->
   <ul class="tab-content">
      <li class="tab-content__item js-tab-content active" data-tab="1">
         Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.
      </li>
      <li class="tab-content__item js-tab-content" data-tab="2">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?
      </li>
      <li class="tab-content__item js-tab-content" data-tab="3">
         Далеко-далеко за словесными горами.
      </li>
   </ul>
</div>

Первой вкладке и её содержимому мы добавили класс active, чтобы по-умолчанию эти два элемента были активны. Остальные вкладки оставляем неактивными, а блоки с контентом скрываем.

Стили:

.tabs {
   width: 100%;
   max-width: 500px;
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

/* Стили для вкладки */
.tab-header__item {
   padding: 10px 20px;
   margin-right: 5px;
   cursor: pointer;
   border: 1px solid #ddd;
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: red;
   border-bottom: none;
   position: relative;
   background-color: #fff;
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */
.tab-content__item {
   display: none;
   padding: 20px;
   border: 1px solid #ddd;
   margin-top: -1px;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}

Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.

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

Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.

Разберем Jquery код:

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

$('.js-tab-trigger').click(function() {
     // клик! 
})

Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'), // 1
       content = $('.js-tab-content[data-tab="'+ id +'"]'); // 2
});
  1. Получили значение атрибута data-tab у текущего элемента
  2. Здесь происходит конкатенация (соединение) строк. В селекторе jquery мы разрываем строку и вставляем туда значение нашей переменной id с помощью операторов сложения «+». Если вы складываете строки, оператор «+» соединит их. В результате конкатенации строк мы получили такой селектор: ‘.js-tab-content[data-tab="3″]’ (содержимое data-tab меняется в зависимости от вкладки).
    Подробнее здесь.

Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.


$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active'); // 1
   $(this).addClass('active'); // 2
   
   $('.js-tab-content.active').removeClass('active'); // 3
   content.addClass('active'); // 4
});
  1. Удалили класс active у активной вкладки
  2. Добавили класс active вкладке по которой кликнули
  3. Удалили класс active у активного контейнера с содержимым
  4. Добавили класс active контейнеру который должен быть активным

Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.

Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.

Разберем JavaScript код:

Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.

var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
    jsContents = document.querySelectorAll('.js-tab-content');

Теперь можно обработать клик по вкладкам.

jsTriggers.forEach(function(trigger) { // 1
   trigger.addEventListener('click', function() { // 2
      // клик!
   });
});
  1. Циклом перебираем элементы в массива. В массиве у нас лежат dom-элементы, то есть наши вкладки.
  2. Каждому элементу добавляем функцию-обработчик при событии клика.

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

var id = this.getAttribute('data-tab'), // 1
    content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'), // 2
    activeTrigger = document.querySelector('.js-tab-trigger.active'), // 3
    activeContent = document.querySelector('.js-tab-content.active'); // 4
  1. Получаем идентификатор вкладки.
  2. Ищем контейнер с таким же значением атрибута data-tab.
  3. Ищем активную вкладку.
  4. Ищем активный контейнер.

В заключении поработаем с классами:

var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
    jsContents = document.querySelectorAll('.js-tab-content');

jsTriggers.forEach(function(trigger) {
   trigger.addEventListener('click', function() {
      var id = this.getAttribute('data-tab'),
          content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'),
          activeTrigger = document.querySelector('.js-tab-trigger.active'),
          activeContent = document.querySelector('.js-tab-content.active');
      
      activeTrigger.classList.remove('active'); // 1
      trigger.classList.add('active'); // 2
      
      activeContent.classList.remove('active'); // 3
      content.classList.add('active'); // 4
   });
});
  1. Удалили класс active у активной вкладки
  2. Добавили класс active вкладке по которой кликнули
  3. Удалили класс active у активного блока с содержимым
  4. Добавили класс active контейнеру который должен быть активным

Итоговый код

HTML

<!-- Общий контейнер для табов -->
<div class="tabs">
   
   <!--  Контейнер с вкладками   -->
   <ul class="tab-header">
      <li class="tab-header__item js-tab-trigger active" data-tab="1">Первая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="2">Вторая</li>
      <li class="tab-header__item js-tab-trigger" data-tab="3">Третья</li>
   </ul>
   
   <!--  Контейнер с блоками, которые содержат контент вкладок   -->
   <ul class="tab-content">
      <li class="tab-content__item js-tab-content active" data-tab="1">
         Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.
      </li>
      <li class="tab-content__item js-tab-content" data-tab="2">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?
      </li>
      <li class="tab-content__item js-tab-content" data-tab="3">
         Далеко-далеко за словесными горами.
      </li>
   </ul>
</div>

CSS

.tabs {
   width: 100%;
   max-width: 500px;
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

/* Стили для вкладки */
.tab-header__item {
   padding: 10px 20px;
   margin-right: 5px;
   cursor: pointer;
   border: 1px solid #ddd;
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: red;
   border-bottom: none;
   position: relative;
   background-color: #fff;
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
}

/* Стили для контейнера с содержимым вкладки. По умолчанию скрыт. */
.tab-content__item {
   display: none;
   padding: 20px;
   border: 1px solid #ddd;
   margin-top: -1px;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}

jQuery или

Не забудьте подключить библиотеку jQuery. Я подключаю через cdnjs — https://cdnjs.com/libraries/jquery

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active');
   $(this).addClass('active');
   
   $('.js-tab-content.active').removeClass('active');
   content.addClass('active');
});

JavaScript

var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
    jsContents = document.querySelectorAll('.js-tab-content');

jsTriggers.forEach(function(trigger) {
   trigger.addEventListener('click', function() {
      var id = this.getAttribute('data-tab'),
          content = document.querySelector('.js-tab-content[data-tab="'+id+'"]'),
          activeTrigger = document.querySelector('.js-tab-trigger.active'),
          activeContent = document.querySelector('.js-tab-content.active');
      
      activeTrigger.classList.remove('active');
      trigger.classList.add('active');
      
      activeContent.classList.remove('active');
      content.classList.add('active');
   });
});

Нужна ли мобильная версия сайта?

Время когда можно было обойтись версией для компьютеров — прошло.

По словам «Яндекс.Метрики» от весны 2016 года, в России совершается 29% визитов на сайты приходится с мобильных устройств, и эта цифра постоянно растет. Это не просто мое мнение, а официальное заявление Яндекса: https://yandex.ru/support/webmaster/recommendations/m..

На моем сайте эта цифра — 40%.

Если сайт не адаптирован под мобильные устройства, вы теряете более трети посетителей или клиентов.

С 2015 года поисковики в выдаче ценят сайты с мобильной версией выше обычных. Их любят пользователи. Переход на адаптивный дизайн позитивно влияет на трафик сайта из поисковых систем и поведенческие факторы.

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

Как проверить адаптивность сайта?

Сервис http://www.responsinator.com показывает как сайт работает на устройствах от мобильного и до планшета. Каждое расширение работает как браузер. Можно переходить по страницам, нажимать кнопки и увидеть, есть ли проблемы с адаптивностью сайта.

Если ваш сайт не адаптивен, если в адаптивной версии сайта есть проблемы — свяжитесь со мной и мы что-нибудь придумаем.

Немного о сахаре

С чего все началось.

Я любитель становится лучше, развиваться, то есть фанатик саморазвития. Такая тяга у меня не только у умственному и духовному развитию, но и физическому.

Проблема в том, что я люблю употреблять всякую гадость: чипсы, сухарики, кола, конфеты, сладкое, сладкое, сладкое …

У кого как проявляет влияние на организм этих вещей, а у меня все идет в лишний вес.

Как-то я искал фильм на вечер и увидел его «Документальный фильм ‘Сахар'«

Вот уже 3 недели я практически не ем сахар

«Практически», потому что сахар содержится во многих продуктах от которых я отказаться не могу, так что стараюсь снизить употребление сахара по-максимуму.

Употребление сахара, даже по норме на человека в день, а это 40 ложек, может за 2 месяца перевести в зону риска по заболеваниям ожирения, болезни печени и почек.

Я волновался о том, сколько сахара я кладу в чашку с чаем. В день получалось ложек 10−15 и да я люблю пить чай

Когда я хотел сократить количество ложек, я начинал понемногу уменьшать, сначала клал по 1.5 ложки, потом по одной.

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

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

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

Полезная информация

Оставляю здесь ссылку на нормальный перевод этого фильма.
https://www.ivi.ru/watch/143 707/description
https://www.youtube.com/watch?v=Z9IcrOf8QBc

Интересный фильм про фастфуд:
https://www.youtube.com/watch?v=SyG-VJkkuOk

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

Нашел список продуктов, в которых очень много сахара, оставлю его здесь:

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