Первый опыт делегирования

Естественно печальный.

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

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

Спустя время она предложила работать с другой компанией.
Первый заказ — верстка HTML-письма.

Верстка — процесс написания кода для создания страницы в соответствии с представленным дизайном

Создавать сайт и письмо — не одно и то же.
Потому что при верстке письма есть ограничения возможностей у почтовых клиентов.

Не буду грузить вас. Короче — геморрой еще тот.

Я хотел работать с этой компанией, но верстку письма я делать не хотел. Решил найти исполнителя.

Поиск исполнителя

Дал клич среди знакомых и в сообществе верстальщиков. Откликнулось пару ребят и я договорился с одним о цене и сроках.

И внимание … главная ошибка. Не спросил про опыт и портфолио.

Чем я думал в тот момент? Я думаю вы знаете чем. Явно не головой. Вспоминаю сейчас это и удивляюсь.

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

А сам спросить забыл. Наверное потому что я привык быть исполнителем и совсем мало был заказчиком.

Срок был 8 дней.

Скидывает результат

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

Есть такая программа Outlook. Это наверное такая же отсталая вещь как и Internet Explorer. Что сказать, Microsoft — умеете, могете.

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

Я иду к парню и говорю о косяке, а он мне: «У тебя бесплатная версия Outlook». Тут я понял что ответственность — не его конек.

Давайте разберемся почему.

1. У меня стояла платная версия программы. Ох и как же приятно было это говорить.

2. Нахера мне такой спец который делает письмо для платных программ

3. Как бесплатность программы может ограничить внутренний движок просмотра кода. Это какой-то бред. Представляю тариф «Нормальный код» — смотрите письма с самой лучшей версткой, пока у нищебродов все ломается. M — microsoft.

Парень пытался съехать. Я рассердился на него. Потому что если бы я не понимал — я бы мог поверить и заплатил бы деньги не за то, что ожидал увидеть.

Потом он решил скинуть вину на мою программу Outlook и челый час через программу удаленного доступа смотрел настройки моей программы Outlook.

Я знал что он несет херню, но мне было любопытно.
«Ты будешь всем получателям настраивать программу?» — на этот вопрос он ответа не нашел.

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

В конце он признался что это заказ был первым опытом в верстке писем.

Его портфолио

Сказать что у меня бомбило — ничего не сказать.
Я решил посмотреть на его портфолио.

Захожу на сайт — суши и роллы. Подумал, не ошибся ли я. Переспросил — нет, не ошибся.

Капееец. Вот это портфолио, один кривой сайт по роллам за 2 года — четко, внатуре классно.

Немного о себе.

Через 3 месяца после того как я начал создавать сайты я сделал себе портфолио и добавил туда 4 работы:
— 3 сайта без реальных заказчиков. Я создал их по скачанным макетам.
— 1 реальный сайт, заказ моего друга.

А еще через месяц меня взяли на работу где я провел почти 2 года, вникая во все тонкости верстки и создании сайтов.

Вывод

Если делегируешь или заказываешь у кого-то:

  1. Узнай про опыт работы;
  2. Посмотри работы;
  3. Свяжись с заказчиками и поспрашивай о деталях: как быстро отвечает? Как работает сайт? Ссылочку на сайт;
  4. Посмотри его профили на фриланс-площадках.

Если ты только начинаешь верстать:

  1. Сделай сайт портфолио или хороший профиль на бирже фриланса. Можешь хоть на конструкторе сделать. Главное чтобы я мог зайти и посмотреть твои работы. Портфолио — лицо фрилансера;
  2. Скачать 10 макетов и сделай их. Мне не важно реальные заказы или нет. Если ты сделал сам — круто, я буду с тобой работать;
  3. Продумай план отхода, если будешь опаздывать. Деньги — не главное. Главное — репутация. Когда я брал сложный заказ, у меня на подхвате были ребята, которым бы я заплатил, если бы не успел. Засрешь репутацию — денег не будет.

Я тоже когда-то начинал. Был первый макет, первый заказ на верстку, первый заказ на программирование.

Правки по проекту luxstore

Сегодня хотел рассказать о правках на сайте luxstor.ru

Ко мне обратился руководитель компании ABP Company и поставил несколько задач:
— изменить шапку сайта
— сверстать страницу
— стилизовать список.

Расскажу о каждой подробнее.

Верстка страницы «Партнерам»

Страница до:

Правки по проекту luxstore 1
Пустая страница «Партнерам»

Страница после:

Правки по проекту luxstore 2
Готовая страница «Партнерам»

Также были добавлены модальные окна, которые появляются при нажатии на кнопки «Заказать звонок» и «Написать нам»

Правки по проекту luxstore 3
Правки по проекту luxstore 4

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

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

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

Изменение шапки

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

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

Шапка до:

Правки по проекту luxstore 5

И шапка после:

Правки по проекту luxstore 6

Стилизация списка

Изначальный вид списка:

Правки по проекту luxstore 7

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

Заказчик хотел выполнить его в стиле списка заказов и в добавок пожелание: «Чтобы было красиво!» 🙂

Не вопрос, сделаем:

Правки по проекту luxstore 8

Другое дело!

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

Изменение оформления мобильного меню

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

Было:

Правки по проекту luxstore 9
Старая версия дизайна мобильного меню

В верхней панели меня не устраивали маленькие внутренние отступы. Маленький шрифт, текст по центру выглядит как-то неаккуратно. Меню не нужно столько места.

Стало:

Правки по проекту luxstore 10

Увеличил отступы, шрифт, уменьшил ширину блока с меню.

Спасибо за просмотр поста.
Хорошего вам дня!

Время чтения статьи на wordpress

Видеоурок:

Привет, друзья!

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

Я создал несколько записей и наполнил их текстом разного размера.

Время чтения статьи на wordpress 11
созданные статьи

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

Я создам свой цикл и выведу статьи на странице:

<div class="blog">
    <ul class="blog__list">
    <?
        $agrs = array(
            'numberposts' => -1,
            'post_type'   => 'post'
        );
        $posts = get_posts($agrs);

        foreach ($posts as $post) {
            setup_postdata($post);
    ?>

        <li class="blog__item article">
            <p class="article__title">
              <a href="<? the_permalink(); ?>">
                <? the_title(); ?>
              </a>
            </p>
            <span class="article__time"> Количество минут </span>
            <p class="article__descr">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вопрос бросил собрал что. Текстами сих назад власти великий букв.</p>
        </li>

    <? }; //endforeach ?>
    </ul>
</div>

И вот что получилось на выходе:

Время чтения статьи на wordpress 12
вывод статей на странице

Теперь давайте считать сколько будем тратить на прочтение страниц. Как получить это число? Все просто. Нам нужно посчитать, сколько в статьей знаков и поделить на среднюю скорость чтения, потом округлим число до целого.
Это и будет количество минут.

Для начала посчитаем количество знаков в статье. В нашем цикле переменная $post имеет свойство post_content, в котором находится весь контент нашей страницы.

$post->post_content;

Для подсчета знаков мы воспользуемся функцией strlen ():

strlen($post->post_content);

Давайте запишем полученное число в переменную и выведем ее на странице:

<div class="blog">
    <ul class="blog__list">
    <?
        $agrs = array(
            'numberposts' => -1,
            'post_type'   => 'post'
        );
        $posts = get_posts($agrs);

        foreach ($posts as $post) {
            setup_postdata($post);

            $post_content_length = strlen($post->post_content);
            echo $post_content_length;
    ?>

        <li class="blog__item article">
            <p class="article__title"><a href="<? the_permalink(); ?>"><? the_title(); ?></a></p>
            <span class="article__time"> Количество минут </span>
            <p class="article__descr">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вопрос бросил собрал что. Текстами сих назад власти великий букв.</p>
        </li>

    <? }; //endforeach ?>


    </ul>
</div>

Идем и проверяем:

Время чтения статьи на wordpress 13
Получили количество знаков в статьях

Теперь нам нужно разделить число на среднюю скорость чтения, которая равна 1500 знаков в минуту. Упакуем результат выражения в переменную $time_for_read и выведем на странице:

$post_content_length = strlen($post->post_content);
$time_for_read = $post_content_length / 1500;
echo $time_for_read;
Время чтения статьи на wordpress 14
Получили количество минут

Теперь нужно округлить число. Нам поможет функция round (). Округляем и выводим на странице:

$post_content_length = strlen($post->post_content);
$time_for_read = $post_content_length / 1500;
$time_for_read = round($time_for_read);
echo $time_for_read;
Время чтения статьи на wordpress 15
округлили минуты

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

Но это еще не все, нам нужно подставить значение переменной в тег и добавить слово «минут»:

<span class="article__time"><? echo $time_for_read; ?> минут</span>
Время чтения статьи на wordpress 16
подставили количество минут

Все бы ничего, но вот «4 минут» — не звучит. Нам нужно чтобы подставлялось нужное слово. Для этого мы добавим функцию, которая поможет сделать это:

<?
function getNumEnding($number, $endingArray) {
    $number = $number % 100;
    if ($number>=11 && $number<=19) {
        $ending=$endingArray[2];
    }
    else {
        $i = $number % 10;
        switch ($i) {
            case (1): $ending = $endingArray[0]; break;
            case (2):
            case (3):
            case (4): $ending = $endingArray[1]; break;
            default: $ending=$endingArray[2];
        }
    }
    return $ending;
}
?>

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

Что она делает?

Функция в зависимости от числа подставляет слово, которое мы указываем в параметрах функции. Рассмотрим их:

getNumEnding($number, array('минуту','минуты','минут'));
 
 
// Первый аргумент масcива - слово, которое должно соответствовать числам: 21, 31, 41, 51
// Второй аргумент масива - слово, которое должно соответствовать числам: 22, 32, 42, 52
// Третий аргумент масива - слово, которое должно соответствовать числам: 15, 25, 35, 45

Используем в нашем проекте, вместо $number подставим переменную с минутами $time_for_read, а в массиве поставим нужные слова.

$post_content_length = strlen($post->post_content);
$time_for_read = $post_content_length / 1500;
$time_for_read = round($time_for_read);
$time_ending = getNumEnding($time_for_read, array('минуту','минуты','минут'));

И нам нужно поменять наше слово «минут» на переменную $time_ending:

<span class="article__time">
  <? echo $time_for_read; ?> <? echo  $time_ending; ?>
</span>
Время чтения статьи на wordpress 17
Слово подставляется в зависимости от числа

Вот теперь все, мой юный падаван, ты повелеваешь временем.

Код страницы полностью:

<?

/**
 * Template Name: Blog
 */


 get_header();

 function getNumEnding($number, $endingArray) {
    $number = $number % 100;
    if ($number>=11 && $number<=19) {
        $ending=$endingArray[2];
    }
    else {
        $i = $number % 10;
        switch ($i) {
            case (1): $ending = $endingArray[0]; break;
            case (2):
            case (3):
            case (4): $ending = $endingArray[1]; break;
            default: $ending=$endingArray[2];
        }
    }
    return $ending;
}
?>

<main class="container page">

    <h1 class="page__title">Блог</h1>

    <div class="blog">
        <ul class="blog__list">
        <?
            $agrs = array(
                'numberposts' => -1,
                'post_type'   => 'post'
            );
            $posts = get_posts($agrs);

            foreach ($posts as $post) {
                setup_postdata($post);

                $post_content_length = strlen($post->post_content);
                $time_for_read = $post_content_length / 1500;
                $time_for_read = round($time_for_read);
                $time_ending = getNumEnding($time_for_read, array('минуту','минуты','минут'));

        ?>

            <li class="blog__item article">
                <p class="article__title"><a href="<? the_permalink(); ?>"><? the_title(); ?></a></p>
                <span class="article__time"><? echo $time_for_read; ?> <? echo  $time_ending; ?></span>
                <p class="article__descr">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вопрос бросил собрал что. Текстами сих назад власти великий букв.</p>
            </li>

        <? }; //endforeach ?>


        </ul>
    </div>

</main>


<? get_footer(); ?>

Как вернуть классический редактор wordpress?

Видеоурок:

Привет, друзья!

Многие из нас обновились до 5 версии WordPress и классический редактор резко накрылся и остался только Gutenberg.

Сегодня я расскажу как его вернуть, это займет 5 минут.

Возвращение короля классического редактора

Сначала нужно установить плагин classic editor, для этого:

1.Заходим в плагины и нажимаем «Добавить новый»

Как вернуть классический редактор wordpress? 18
добавляем новый плагин

2.Находим Classic Editor

Как вернуть классический редактор wordpress? 19
Нашли Classic Editor

3.Устанавливаем и активируем его.

Как вернуть классический редактор wordpress? 20
активируем плагин

Мне нравится писать статьи в новом интерфейсе, а в старом работать с плагинами, которые еще не перестроились до нового оформления редактора.

Сделаем так, чтобы можно было выбирать в каком редакторе изменять статью.

Идем, а настройки -> написание, выбираем редактор по умолчанию и возможность выбирать редактор.

Как вернуть классический редактор wordpress? 21
Заходим в настройки
Как вернуть классический редактор wordpress? 22
Выставляем нужные параметры

Спасибо за прочтение статьи!
Если она была полезной для вас — ставьте лайк 🙂
Это важно для меня

Может все-таки на конструкторе?

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

1. Не уникальный сайт.

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

2. Самодеятельность.

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

3. Условно бесплатный сайт.

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

4. Невозможность глубокого SEO.

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

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