Как составить планировщик

Трелло — удобная штука для ведения проектов. Там все задачи представлены в виде колонок, а каждая колонка отвечает за что-то своё. Давайте сделаем нечто подобное, тем более что всё для этого у нас уже есть:

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

Если это объединить, получится что-то похожее на Trello. Логика такая:

  • у нас будет несколько колонок на странице (за это отвечает Bootstrap);
  • каждая колонка будет отвечать за свои задачи и называться по-своему;
  • в каждой колонке можно добавлять и удалять задачи независимо от остальных (а за это отвечает скрипт из прошлого списка задач).

Мы сделаем 4 колонки, но вы для себя можете сделать их столько, сколько нужно. Единственное ограничение — Bootstrap не позволяет делать больше 12 колонок. Надеемся, вам этого хватит.

Готовим колонки и настраиваем стили

За основу возьмём страницу из статьи про котиков и сделаем с ней следующее:

  • перенесём в неё стили из страницы со списком задач;
  • добавим недостающие стили для заголовков колонок и всей страницы;
  • подготовим пустые 4 колонки и настроим их размер под разную ширину экрана.

Если мы всё сделаем правильно, то получится следующее:

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Управление проектами</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*Задаём общие параметры для всей страницы: шрифт и отступы*/
    body {
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /* Внешний вид заголовка первого уровня*/
    h1 {
      margin-bottom: 50px;
      font-weight: bold;
    }

    /* Внешний вид заголовка второго уровня*/
    h2 {
      font-size: 22px;
    }

    /* Настраиваем внешний вид поля ввода*/
    input {
      display: inline-block;
      margin: 20px auto;
      border: 2px solid #eee;
      padding: 10px 20px;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /*Как будет выглядеть каждый элемент нашего списка*/
    .tdItem {
      text-align: left;
      padding: 10px;
      cursor: default;
      border-radius: 7px;
    }

    /*Что произойдёт, когда мы наведём курсор на любую задачу из списка*/
    .tdItem:hover {
      background-color: lightblue;
    }

    /*Закончили со стилями*/
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Управление проектами, делами и собой</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <!-- содержимое первой колонки -->
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <!-- содержимое второй колонки -->
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <!-- содержимое третьей колонки -->
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <!-- содержимое четвёртой колонки -->
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->

</html>

Наполняем колонки

У каждой колонки должно быть своё название, поэтому назовём их «Сделать», «Позвонить», «Написать» и «Идеи».

Мы помним, что в каждой колонке должен быть отдельный список задач, поэтому возьмём кусок кода из прошлого материала. Главное, что нам нужно учесть, — что у каждого списка должно быть своё уникальное имя, чтобы мы их не перепутали в процессе. Для этого мы просто добавим цифры от одного до четырёх к названию каждого списка. Например, было «tldDiv», а стало «tld1Div, «tld2Div» и так далее.

В итоге колонки будут выглядеть так:

<div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
  <h2 class="todo__caption">Позвонить</h2>
  <!-- Поле ввода, куда пишем новые задачи «Позвонить» -->
  <div id="tdl2App">
    <input type="text" class="form-control" placeholder="Новая задача">
    <!-- Создаём пока ещё пустой список «Позвонить» -->
    <div class="tdl2Div">
      <ul class="List list-unstyled">
        <!-- Тут появятся наши задачи, когда мы их добавим -->
      </ul>
    </div>
  </div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
  <h2 class="todo__caption">Написать</h2>
  <!-- Поле ввода, куда пишем новые задачи «Написать»-->
  <div id="tdl3App">
    <input type="text" class="form-control" placeholder="Новая задача">
    <!-- Создаём пока ещё пустой список «Написать» -->
    <div class="tdl3Div">
      <ul class="List list-unstyled">
        <!-- Тут появятся наши задачи, когда мы их добавим -->
      </ul>
    </div>
  </div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
  <h2 class="todo__caption">Идеи</h2>
  <!-- Поле ввода, куда пишем новые задачи «Идеи» -->
  <div id="tdl4App">
    <input type="text" class="form-control" placeholder="Новая задача">
    <!-- Создаём пока ещё пустой список «Идеи» -->
    <div class="tdl4Div">
      <ul class="List list-unstyled">
        <!-- Тут появятся наши задачи, когда мы их добавим -->
      </ul>
    </div>
  </div>
</div>
Выглядит интересно, но пока ничего не работает.

Переносим и расширяем скрипт

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

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

Мы всё это понимаем.

Но копипаста быстрее.

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

  • В самом начале, когда мы заводим переменные под наши задачи, у нас теперь не просто List и Mask, а List1, Mask1, List2, Mask2 и так далее. Это нужно для того, чтобы не смешивать списки задач.
  • Поменялось и содержимое этих переменных — теперь там есть цифры, которые показывают, к какому списку они относятся. Важный момент — у нас длина префикса «tdl_» увеличилась на один символ и стала, например, «tdl1_». Это нам нужно будет учесть в середине скрипта.
  • Так как списки должны быть автономны, то и индексы, которые мы добавляем к каждому элементу, тоже должны не зависеть друг от друга. Отсюда и переменные вида element_Id_1 и number_Id_1.

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

Сам скрипт получается таким:

// Подключаем JQuery
// Пишем скрипт, который будет обрабатывать наши задачи и хранить их на нашем устройстве
// Заводим переменные под наши задачи
var List1 = $('#tdl1App ul');
var Mask1 = 'tdl1_';
var List2 = $('#tdl2App ul');
var Mask2 = 'tdl2_';
var List3 = $('#tdl3App ul');
var Mask3 = 'tdl3_';
var List4 = $('#tdl4App ul');
var Mask4 = 'tdl4_';
// Функция, которая берёт из памяти наши задачи и делает из них список
function showTasks() {
  // Узнаём размер хранилища
  var Storage_size = localStorage.length;
  // Если в хранилище что-то есть…
  if (Storage_size > 0) {
    // то берём и добавляем это в задачи  
    for (var i = 0; i < Storage_size; i++) {
      var key = localStorage.key(i);
      // обрабатываем первый список
      if (key.indexOf(Mask1) == 0) {
        // и делаем это элементами списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', key)
          .text(localStorage.getItem(key))
          .appendTo(List1);
      }
      // обрабатываем второй список
      if (key.indexOf(Mask2) == 0) {
        // и делаем это элементами списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', key)
          .text(localStorage.getItem(key))
          .appendTo(List2);
      }
      // обрабатываем третий список
      if (key.indexOf(Mask3) == 0) {
        // и делаем это элементами списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', key)
          .text(localStorage.getItem(key))
          .appendTo(List3);
      }
      // обрабатываем четвёртый список
      if (key.indexOf(Mask4) == 0) {
        // и делаем это элементами списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', key)
          .text(localStorage.getItem(key))
          .appendTo(List4);
      }
    }
  }
}
// Сразу вызываем эту функцию, вдруг в памяти уже остались задачи с прошлого раза
showTasks();
// Следим, когда пользователь напишет новую задачу в первое поле ввода и нажмёт Enter
$('#tdl1App input').on('keydown', function (e) {
  if (e.keyCode != 13) return;
  var str = e.target.value;
  e.target.value = "";
  // Если в поле ввода было что-то написано — начинаем обрабатывать
  if (str.length > 0) {
    var number_Id_1 = 0;
    List1.children().each(function (index, el) {
      var element_Id_1 = $(el).attr('data-itemid').slice(5);
      if (element_Id_1 > number_Id_1)
        number_Id_1 = element_Id_1;
    })
    number_Id_1++;
    // Отправляем новую задачу сразу в память
    localStorage.setItem(Mask1 + number_Id_1, str);
    // и добавляем её в конец списка
    $('<li></li>').addClass('tdItem')
      .attr('data-itemid', Mask1 + number_Id_1)
      .text(str).appendTo(List1);
  }
});
// Следим, когда пользователь напишет новую задачу во второе поле ввода и нажмёт Enter
$('#tdl2App input').on('keydown', function (e) {
  if (e.keyCode != 13) return;
  var str = e.target.value;
  e.target.value = "";
  // Если в поле ввода было что-то написано — начинаем обрабатывать
  if (str.length > 0) {
    var number_Id_2 = 0;
    List2.children().each(function (index, el) {
      var element_Id_2 = $(el).attr('data-itemid').slice(5);
      if (element_Id_2 > number_Id_2)
        number_Id_2 = element_Id_2;
    })
    number_Id_2++;
    // Отправляем новую задачу сразу в память
    localStorage.setItem(Mask2 + number_Id_2, str);
    // и добавляем её в конец списка
    $('<li></li>').addClass('tdItem')
      .attr('data-itemid', Mask2 + number_Id_2)
      .text(str).appendTo(List2);
  }
});
// Следим, когда пользователь напишет новую задачу в третье поле ввода и нажмёт Enter
$('#tdl3App input').on('keydown', function (e) {
  if (e.keyCode != 13) return;
  var str = e.target.value;
  e.target.value = "";
  // Если в поле ввода было что-то написано — начинаем обрабатывать
  if (str.length > 0) {
    var number_Id_3 = 0;
    List3.children().each(function (index, el) {
      var element_Id_3 = $(el).attr('data-itemid').slice(5);
      if (element_Id_3 > number_Id_3)
        number_Id_3 = element_Id_3;
    })
    number_Id_3++;
    // Отправляем новую задачу сразу в память
    localStorage.setItem(Mask3 + number_Id_3, str);
    // и добавляем её в конец списка
    $('<li></li>').addClass('tdItem')
      .attr('data-itemid', Mask3 + number_Id_3)
      .text(str).appendTo(List3);
  }
});
// Следим, когда пользователь напишет новую задачу в четвёртое поле ввода и нажмёт Enter
$('#tdl4App input').on('keydown', function (e) {
  if (e.keyCode != 13) return;
  var str = e.target.value;
  e.target.value = "";
  // Если в поле ввода было что-то написано — начинаем обрабатывать
  if (str.length > 0) {
    var number_Id_4 = 0;
    List4.children().each(function (index, el) {
      var element_Id_4 = $(el).attr('data-itemid').slice(5);
      if (element_Id_4 > number_Id_4)
        number_Id_4 = element_Id_4;
    })
    number_Id_4++;
    // Отправляем новую задачу сразу в память
    localStorage.setItem(Mask4 + number_Id_4, str);
    // и добавляем её в конец списка
    $('<li></li>').addClass('tdItem')
      .attr('data-itemid', Mask4 + number_Id_4)
      .text(str).appendTo(List4);
  }
});
// По клику на задаче — убираем её из списка
$(document).on('click', '.tdItem', function (e) {
  // Находим задачу, по которой кликнули
  var jet = $(e.target);
  // Убираем её из памяти
  localStorage.removeItem(jet.attr('data-itemid'));
  // и убираем её из списка
  jet.remove();
})
// Закончился основной скрипт

Собираем готовую страницу

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

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Управление проектами</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*Задаём общие параметры для всей страницы: шрифт и отступы*/
    body {
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /* Внешний вид заголовка первого уровня*/
    h1 {
      margin-bottom: 50px;
      font-weight: bold;
    }

    /* Внешний вид заголовка второго уровня*/
    h2 {
      font-size: 22px;
    }

    /* Настраиваем внешний вид поля ввода*/
    input {
      display: inline-block;
      margin: 20px auto;
      border: 2px solid #eee;
      padding: 10px 20px;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /*Как будет выглядеть каждый элемент нашего списка*/
    .tdItem {
      text-align: left;
      padding: 10px;
      cursor: default;
      border-radius: 7px;
    }

    /*Что произойдёт, когда мы наведём курсор на любую задачу из списка*/
    .tdItem:hover {
      background-color: lightblue;
    }

    /*Закончили со стилями*/
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Управление проектами, делами и собой</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <h2 class="todo__caption">Сделать</h2>
        <!-- Поле ввода, куда пишем новые задачи «Сделать»-->
        <div id="tdl1App">
          <input type="text" class="form-control" placeholder="Новая задача">
          <!-- Создаём пока ещё пустой список «Сделать» -->
          <div class="tdl1Div">
            <ul class="List list-unstyled">
              <!-- Тут появятся наши задачи, когда мы их добавим -->
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <h2 class="todo__caption">Позвонить</h2>
        <!-- Поле ввода, куда пишем новые задачи «Позвонить» -->
        <div id="tdl2App">
          <input type="text" class="form-control" placeholder="Новая задача">
          <!-- Создаём пока ещё пустой список «Позвонить» -->
          <div class="tdl2Div">
            <ul class="List list-unstyled">
              <!-- Тут появятся наши задачи, когда мы их добавим -->
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <h2 class="todo__caption">Написать</h2>
        <!-- Поле ввода, куда пишем новые задачи «Написать»-->
        <div id="tdl3App">
          <input type="text" class="form-control" placeholder="Новая задача">
          <!-- Создаём пока ещё пустой список «Написать» -->
          <div class="tdl3Div">
            <ul class="List list-unstyled">
              <!-- Тут появятся наши задачи, когда мы их добавим -->
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
        <h2 class="todo__caption">Идеи</h2>
        <!-- Поле ввода, куда пишем новые задачи «Идеи» -->
        <div id="tdl4App">
          <input type="text" class="form-control" placeholder="Новая задача">
          <!-- Создаём пока ещё пустой список «Идеи» -->
          <div class="tdl4Div">
            <ul class="List list-unstyled">
              <!-- Тут появятся наши задачи, когда мы их добавим -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <!-- Пишем скрипт, который будет обрабатывать наши задачи и хранить их на нашем устройстве -->
  <script>
    // Заводим переменные под наши задачи
    var List1 = $('#tdl1App ul');
    var Mask1 = 'tdl1_';
    var List2 = $('#tdl2App ul');
    var Mask2 = 'tdl2_';
    var List3 = $('#tdl3App ul');
    var Mask3 = 'tdl3_';
    var List4 = $('#tdl4App ul');
    var Mask4 = 'tdl4_';
    // Функция, которая берёт из памяти наши задачи и делает из них список
    function showTasks() {
      // Узнаём размер хранилища
      var Storage_size = localStorage.length;
      // Если в хранилище что-то есть…
      if (Storage_size > 0) {
        // то берём и добавляем это в задачи  
        for (var i = 0; i < Storage_size; i++) {
          var key = localStorage.key(i);
          // обрабатываем первый список
          if (key.indexOf(Mask1) == 0) {
            // и делаем это элементами списка
            $('<li></li>').addClass('tdItem')
              .attr('data-itemid', key)
              .text(localStorage.getItem(key))
              .appendTo(List1);
          }
          // обрабатываем второй список
          if (key.indexOf(Mask2) == 0) {
            // и делаем это элементами списка
            $('<li></li>').addClass('tdItem')
              .attr('data-itemid', key)
              .text(localStorage.getItem(key))
              .appendTo(List2);
          }
          // обрабатываем третий список
          if (key.indexOf(Mask3) == 0) {
            // и делаем это элементами списка
            $('<li></li>').addClass('tdItem')
              .attr('data-itemid', key)
              .text(localStorage.getItem(key))
              .appendTo(List3);
          }
          // обрабатываем четвёртый список
          if (key.indexOf(Mask4) == 0) {
            // и делаем это элементами списка
            $('<li></li>').addClass('tdItem')
              .attr('data-itemid', key)
              .text(localStorage.getItem(key))
              .appendTo(List4);
          }
        }
      }
    }
    // Сразу вызываем эту функцию, вдруг в памяти уже остались задачи с прошлого раза
    showTasks();
    // Следим, когда пользователь напишет новую задачу в первое поле ввода и нажмёт Enter
    $('#tdl1App input').on('keydown', function (e) {
      if (e.keyCode != 13) return;
      var str = e.target.value;
      e.target.value = "";
      // Если в поле ввода было что-то написано — начинаем обрабатывать
      if (str.length > 0) {
        var number_Id_1 = 0;
        List1.children().each(function (index, el) {
          var element_Id_1 = $(el).attr('data-itemid').slice(5);
          if (element_Id_1 > number_Id_1)
            number_Id_1 = element_Id_1;
        })
        number_Id_1++;
        // Отправляем новую задачу сразу в память
        localStorage.setItem(Mask1 + number_Id_1, str);
        // и добавляем её в конец списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', Mask1 + number_Id_1)
          .text(str).appendTo(List1);
      }
    });
    // Следим, когда пользователь напишет новую задачу во второе поле ввода и нажмёт Enter
    $('#tdl2App input').on('keydown', function (e) {
      if (e.keyCode != 13) return;
      var str = e.target.value;
      e.target.value = "";
      // Если в поле ввода было что-то написано — начинаем обрабатывать
      if (str.length > 0) {
        var number_Id_2 = 0;
        List2.children().each(function (index, el) {
          var element_Id_2 = $(el).attr('data-itemid').slice(5);
          if (element_Id_2 > number_Id_2)
            number_Id_2 = element_Id_2;
        })
        number_Id_2++;
        // Отправляем новую задачу сразу в память
        localStorage.setItem(Mask2 + number_Id_2, str);
        // и добавляем её в конец списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', Mask2 + number_Id_2)
          .text(str).appendTo(List2);
      }
    });
    // Следим, когда пользователь напишет новую задачу в третье поле ввода и нажмёт Enter
    $('#tdl3App input').on('keydown', function (e) {
      if (e.keyCode != 13) return;
      var str = e.target.value;
      e.target.value = "";
      // Если в поле ввода было что-то написано — начинаем обрабатывать
      if (str.length > 0) {
        var number_Id_3 = 0;
        List3.children().each(function (index, el) {
          var element_Id_3 = $(el).attr('data-itemid').slice(5);
          if (element_Id_3 > number_Id_3)
            number_Id_3 = element_Id_3;
        })
        number_Id_3++;
        // Отправляем новую задачу сразу в память
        localStorage.setItem(Mask3 + number_Id_3, str);
        // и добавляем её в конец списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', Mask3 + number_Id_3)
          .text(str).appendTo(List3);
      }
    });
    // Следим, когда пользователь напишет новую задачу в четвёртое поле ввода и нажмёт Enter
    $('#tdl4App input').on('keydown', function (e) {
      if (e.keyCode != 13) return;
      var str = e.target.value;
      e.target.value = "";
      // Если в поле ввода было что-то написано — начинаем обрабатывать
      if (str.length > 0) {
        var number_Id_4 = 0;
        List4.children().each(function (index, el) {
          var element_Id_4 = $(el).attr('data-itemid').slice(5);
          if (element_Id_4 > number_Id_4)
            number_Id_4 = element_Id_4;
        })
        number_Id_4++;
        // Отправляем новую задачу сразу в память
        localStorage.setItem(Mask4 + number_Id_4, str);
        // и добавляем её в конец списка
        $('<li></li>').addClass('tdItem')
          .attr('data-itemid', Mask4 + number_Id_4)
          .text(str).appendTo(List4);
      }
    });
    // По клику на задаче — убираем её из списка
    $(document).on('click', '.tdItem', function (e) {
      // Находим задачу, по которой кликнули
      var jet = $(e.target);
      // Убираем её из памяти
      localStorage.removeItem(jet.attr('data-itemid'));
      // и убираем её из списка
      jet.remove();
    })
  // Закончился основной скрипт
  </script>
</body>
<!-- конец всей страницы -->

</html>

Что дальше

Чтобы этот продукт стал ближе к идеалу, можно сделать так:

  • с помощью классов и объектов упорядочить создание новых колонок — не копипастить код, а делать всё через объекты;
  • добавить возможность перетаскивать задачи между колонками;
  • сделать комментарии к каждой задаче;
  • разрешить изменение заголовков у колонок прямо на странице (contentEditable нам в помощь);
  • настроить фон.

Скоро доберёмся и до этого!

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

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

Расписание на бумаге

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

Шаг 1. Составь список «жестких» задач. Запиши на отдельном листе все сегодняшние занятия, которые изначально привязаны к конкретному времени. Например: завтрак в 7:30, встреча с клиентом в 11:30, тренировка в 17:00. Получится примерно такой список:

Шаг 2. Запланируй время на «жесткие» задачи. Например, на обед и обеденный перерыв можно отвести один час, а на встречу с клиентом — 30 минут. В случае сомнений лучше перестраховаться и выделить на задачу чуть больше времени.

Шаг 3. Подсчитай размер «окон». «Окна» — это ничем не занятые промежутки времени между двумя задачами. Чтобы подсчитать их размер, воспользуйся формулой:

Размер «окна» = Начало занятия № 2 — Начало занятия № 1 — Продолжительность занятия № 1.

Например, в нашем примере размер «окна» между завтраком и встречей с клиентом составит 3 часа 30 минут (11:30 — 7:30 — 0:30). Точно так же нужно рассчитать остальные «окна».

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

Шаг 5. Расставь приоритеты. Пронумеруй «гибкие» задачи в порядке важности. Самая важная задача должна идти под номером 1, вторая по важности — под номером 2 и т. д. Все дела нумеровать не обязательно: достаточно отметить только самые важные.

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

Шаг 7. Объедини списки. Возьми третий лист бумаги (это будет уже готовое расписание) и перенеси на него задачи из первых двух списков. «Гибкие» дела записывают в порядке их важности в «окнах» между «жесткими» задачами. Уже запланированные задачи из первоначальных списков вычеркивают.

Вот как выглядит этот процесс:

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

Окончательное расписание будет выглядеть так:

В процессе составления расписания можно корректировать время на задачи, объединять их в серии, разбивать на подзадачи и т. д. Планирование дня — это творческий процесс.

Расписание в программах для планирования

Для создания расписания подойдет любая программа, которая поддерживает календарную сетку. Мы будем пользоваться планировщиком SingularityApp.

Обрати внимание: планировать в программе проще, чем на бумаге, поэтому этапы будут отличаться.

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

Шаг 2. Расставь приоритеты. Выбери самые важные задачи (от 3 до 5) и пронумеруй их в порядке важности. В Сингулярити важные задачи можно не нумеровать, а просто присвоить им высший приоритет (горячие клавиши CTRL+1).

Шаг 3. Запланируй «жесткие» задачи. Открой календарную сетку на сегодня и добавь в нее те занятия, которые уже привязаны к конкретному времени. Например: обед в 13:00, встреча с коллегой в 11:00, тренировка в 18:00.

Сразу установи продолжительность «жестких» занятий. Для этого перемести их границы с помощью указателя мыши.

Шаг 4. Объедини списки. Перенеси «гибкие» задачи в сетку (в порядке приоритетности), и сразу запланируй время на их выполнение. Чем важнее задача, тем ближе к началу списка она должна находиться.

Иногда бывает так, что задача в свободное «окно» не помещается. В этом случае ее можно разделить на части (если это допустимо) или же переместить в следующее «окно».

Расписание готово. Если неудобно работать с задачами прямо в сетке, открой папку «Сегодня». Там будет вот такая красота:

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

Как улучшить расписание

Напоследок несколько советов, которые помогут сделать расписание более надежным и эффективным.

  1. Планируй с запасом. Отводи на задачи чуть больше времени, чем они требуют. Например, если на уборку комнаты обычно уходит 15 минут, выдели на это занятие 20 минут. Если во время выполнения задачи ты столкнешься с непредвиденными трудностями, то справишься с ними за счет резерва, и расписание не пострадает.
  2. Добавь в свой план «зеленые зоны». Так называются промежутки времени, на которые в расписании ничего не запланировано. Если появится новая задача, ты выполнишь ее за счет «зеленой зоны», а потом спокойно вернешься к работе по расписанию.
  3. Избегай микропланирования. Совсем уж мелкие задачи не стоит добавлять в расписание, иначе оно станет громоздким и неудобным. Такие дела лучше объединять в тематические блоки. Например:
  4. Планируй отдых.Даже небольшие «островки» отдыха в расписании помогают дольше сохранять работоспособность. Планируют отдых точно так же, как и обычные задачи. Например:
  5. Если досрочно выполнил задачу, переходи к следующей. Некоторые люди рассматривают сэкономленное время как свободное: они награждают себя социальными сетями, видеороликами, пасьянсами и т. д.

    Проблема в том, что время на выполнение задач может отклоняться в любую сторону. Если на одну задачу уйдет на 10 минут меньше, чем планировалось, то на другую — на 10 минут больше. Эти отклонения частично компенсируют друг друга. Но когда мы теряем сэкономленное время, опоздания начинают накапливаться, и расписание срывается.

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

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

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

Содержание

  • Основные виды планирования
  • Топ самых популярных методов планирования
  • Простые советы по планированию

Планирование — это метод эффективного распределения времени для качественного выполнения различных задач.

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

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

Основные виды планирования

Поскольку метод планирования имеет широкий спектр применения, к каждой жизненной сфере подходит свой вид.

Планирование по необходимости

Этот вид в свою очередь делится на:

  • Директивное, при котором выполнение поставленных задач является обязательным. Подразумеваются детализация и лицо, которому направляется готовый план. Чаще применяется в государственном планировании или на предприятии.
  • Индикативное, не подразумевающее обязательного исполнения сроков и задач. Является скорее рекомендательным и применяется в микроэкономических процессах.

По времени исполнения задач

Здесь важны сроки, в рамках которых строится план.

  • Краткосрочное планирование — рассчитывается на период до года.

Может содержать план на день, неделю, месяц, квартал. Самый распространенный вид, так как применяется и в повседневной жизни, и на предприятии.

  • Среднесрочное планирование — применяется в государственных учреждениях, на предприятии и в фирмах.

Обычно рассчитывается на срок от одного года до пяти лет.

  • Долгосрочное планирование — здесь расчет идет на срок от пяти лет и больше.

Часто применяется в науке и экономике для решения стратегических задач.

Фото:Shutterstock

По содержанию плана

Под этим подразумеваются тактическое, стратегическое и процессное планирование.

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

Топ самых популярных методов планирования

Матрица Эйзенхауэра

Метод приоритизации, который придумал Дуайт Эйзенхауэр — 34-й президент США.

Матрица Эйзенхауэра

Матрица Эйзенхауэра

В основе метода лежит распределение дел по четырем категориям:

  • Важно и срочно — сделать.

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

  • Важно и несрочно — эта категория скорее о саморазвитии, которое необходимо для личностного роста.

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

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

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

  • Неважно и несрочно — на первый взгляд кажется, что эта категория в принципе не нужна.

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

Фото:Unsplash

Метод Парето

Или «правило 80 на 20». Суть принципа, сформулированного итальянским социологом и экономистом Вильфредо Парето, состоит в том, что 20% усилий приносят 80% результата и, соответственно, 80% усилий тратится на 20% результата. Все зависит от того, насколько эффективно то или иное действие для достижения поставленной цели.

Особенно хорошо этот метод работает в повседневной жизни. Если грамотно распределить свое время на 20% необходимых задач, то это на 80% приблизит вас к цели. Метод Парето лучше применять в комплексе с матрицей Эйзенхауэра, начиная день с важных и срочных дел и постепенно двигаясь к менее важным, но более объемным.

Метод OKR

OKR расшифровывается как Objectives and Key Results — «цели и ключевые результаты». Эта методология больше относится к бизнес-планированию. В ее основе лежит эффективный контроль задач при реализации целей компании. Кроме того, методология подразумевает управление проектами для синхронизации индивидуальных и командных целей. Была разработана в компании Intel в 1960-х годах. Сейчас систему используют в таких компаниях как Google, Spotify, Twitter, LinkedIn, Airbnb и другие.

Джон Дорр, известный венчурный инвестор, партнер фонда Kleiner Perkins, стоявший у истоков внедрения OKR в Google, предложил такую формулу для постановки целей: «Я достигну ___________, что можно оценить с помощью ___________», где нужно вписать цель и ключевые результаты. Как пишет Фелипе Кастро в книге The Beginners Guide to OKR, последние должны быть количественными и измеримыми.

Фикс-тайм методы

Сюда относятся техники, при которых работа идет по таймеру. Одним из самых распространенных является метод Pomodoro, придуманный в 1980-х владельцем Cirillo Consulting (а в то время — студентом) Франческо Чирилло. Суть методики в том, что вы работаете 30 минут, после чего делаете пятиминутный перерыв. После четырех таких рабочих подходов, следует «большая перемена» в 30 минут.

Фото:Shutterstock

Метод декомпозиции

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

Простые советы по планированию

1. Определитесь с методом

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

2. Введите планирование в привычку

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

3. Формулируйте цели четко

Распространенная ошибка — построение размытых планов. Выучить французский, достичь успеха на работе, много путешествовать, — все это относится скорее к желаниям, а цели необходимо конкретизировать как можно детальнее. «Записаться на курсы французского языка в следующем месяце», «спланировать поездку в страну N в следующем году», «разработать стратегию продвижения продукта» и так далее.

Фото:из личного архива

Личный опыт

Анна Мельянцова ─ руководитель корпоративных акселерационных программ бизнес-инкубатора НИУ ВШЭ:

«В своем ежедневном планировании мы используем комбинацию из методов:

  • определение годовых и квартальных целей и ключевых результатов по методу OKR. Этот подход помогает фокусироваться на важном и для бизнеса, и для конкретного сотрудника;
  • декомпозиция целей на еженедельные задачи и затем — на более мелкие действия. При формулировании шагов, так же как и для целей, рекомендуем учитывать критерии, по которым вы поймете, что задача выполнена успешно;
  • для корректной расстановки приоритетов в списке задач и поддержания фокуса получившийся список ежедневных действий мы ранжируем, используя матрицу Эйзенхауэра. Помимо этого можно добавлять дополнительный параметр для сортировки задач — ресурсозатратность. И, соответственно, выполнять первыми те, которые больше всего влияют на достижение целей и при этом являются наименее затратными».

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

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

Что такое продуктивность?

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

Какие существуют основные методы и инструменты продуктивности?

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

GTD — Getting Things Done

Метод самоорганизации, предложенный Дэвидом Алленом (David Allen) и основанный на одноименной книге. Основные постулаты:

  • Записывать абсолютно все дела, роящиеся в голове, освобождая свою оперативную память. Наш мозг — как компьютер, если одновременно открыто множество вкладок, работа мозга замедляется, а то он и вовсе может зависнуть, перегрузившись выполняемыми процессами.

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

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

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

Метод позволяет концентрироваться на важном, правильно расставлять приоритеты и заканчивать начатое.

Канбан-доски

Методология канбан пришла к нам с японского завода Toyota и в контексте этой концепции переводится как “сигнальная карточка”. Этот метод в первую очередь про визуализацию задач и управление их потоком, а также он идеально подходит для многоступенчатых проектов.

Основные правила просты:

  • для персонального канбана достаточно доски (реальной или виртуальной) из трех столбцов, которые по сути отражают текущий статус расположенных в них задач: “To do” — задачи, ждущие своей очереди, “In Progress” — то, что вы делаете сейчас и “Done” — завершенные дела. Столбцов может быть любое количество, в зависимости от этапов и специфики работы. Задачи-карточки последовательно перемещаются слева направо, проходя все стадии, в финальную точку.

  • Канбан, как и GTD, требует ограничения количества задач, находящихся в процессе выполнения. В идеале — это одно дело, которое доводится до конца, и лишь тогда следует приступать к следующему.

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

Метод Pomodoro

Этот метод повышения продуктивности появился благодаря студенту колледжа Франческо Чирилло еще в 1980-х годах. Основой является разбивка рабочего времени на четкие временные отрезки, во время которых необходимо концентрироваться и выполнять задачи, и периоды отдыха между ними. А название метод получил благодаря кухонному таймеру в виде помидора, который использовал сам Франческо, устанавливая на нем время для выполнения своих дел.

Четыре простых действия:

  1. Определяете задачи на день
  2. Устанавливаете таймер на 25 минут
  3. Концентрируетесь на одной задаче из вашего списка
  4. Сделав ее, берете пятиминутную паузу. И приступаете к следующему делу.

После цикла из четырех задач делаете полноценный перерыв в 15-30 минут.

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

Paper-like

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

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

Трекеры привычек

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

Для тех, кто хочет совершенствоваться и закрепить полезные действия на уровне привычки.

Обзор приложений

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

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

Tweek Calendar

#метод: GTD, paper-like weekly calendar
#сложность: простейший (simplicity)
#использование: для персонального и совместного использования

Доступен: Web, iPhone, Android

Описание

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

Это действительно удобно, особенно в web-версии, а самое главное — очень просто. В Tweek’e не нужно вникать и разбираться, а можно сразу приступить к составлению списка дел и планированию.

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

Так выглядит десктоп-версия приложения

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

В нижней части экрана место для задач без определенного срока исполнения и рандомных списков. Немного не хватает заголовков для структуризации to-do списков, но при наличии смекалки их легко можно создать самостоятельно, выделив первый пункт по списку цветом.

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

Функционал

Подзадачи и выделение приоритетов цветом:

Редактирование записи

Отметить важную задачу или событие можно цветом, как мы привычно делали в додигитальную эру ярким маркером в бумажном ежедневнике. Там же есть опция добавления заметок, подзадач или чек-листов к записи.

Напоминания:

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

Удобная версия для печати:

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

Dark mode:

Полуночники оценят.

Стоимость:

Базовая версия — бесплатно
Premium — $4/месяц, $34/год

Teuxdeux

#метод: GTD, paper-like weekly calendar
#сложность: простейший (simplicity)
#использование: для персонального использования

Доступен для Web, iPhone, IPad, Apple Watch

Описание

Это Teuxdeux:

Веб-версия

Мобильное приложение

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

Разделен на две части: развернутая неделя сверху и список to-do листов под ней.
Из минусов в наглядности: визуальная раскладка вмещает 5 дней, тогда как неделя — это все-таки семь.

В нижней части экрана место для создания независимых тематических to-do листов: мини-проектов, списка покупок, книг. Количество списков to-do не ограничено, можно менять заголовки и переставлять по порядку.

Функционал

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

Возможность изменить цвет приложения:

Цвет шапки/активного текста под настроение можно поменять на любой другой, выбрав из RGB палитры. Также доступна Dark Mode версия.

Удобно реализованная функция добавления повторяющихся событий:

Повторяющиеся события

Добавляя к задаче фразу every day, every month или every year — событие автоматически начинает повторяться в заданный день через указанный промежуток времени.

Летающий кот:

Flying cat

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

Напоминания высылаются на мэйл в указанное время в виде списка на день.

Стоимость
Trial — 1 месяц
Premium — $3/месяц, $24/год

Timepage by Moleskine Studio

#метод: paper-like calendar
#сложность: простейший (simplicity)
#использование: для персонального использования

Доступен для iPhone, IPad, Apple Watch.

Описание

Максимально приближенный к своей бумажной версии, известному по всему миру ежедневнику в обложке из “кротовой кожи”. Выглядит как привычная страница ежедневника с недельной раскладкой. Впрочем, количество дней, помещающихся на экран, можно менять с трех до десяти, кому как нагляднее. Доступен и вид на месяц с удобной градацией дней по цвету, где он варьируется в зависимости от количества задач на день — чем светлее оттенок, тем более занятой у вас день.

Из минусов — списки придется составлять где-то в другом месте, функции to-do листов тут нет, это календарь.

Функционал

Выглядит просто и элегантно:

Основной вид

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

Не совсем стандартное введение данных:

Внесение событий

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

Расчет времени:

Если добавить время и геолокацию к событию, то календарь рассчитает маршрут и время на дорогу, а затем отправит push-уведомление, когда пора выезжать, чтобы прибыть в срок. Можно выбирать способ передвижения, подключать Waze, Google Maps или Apple Maps.

Немного расширить кругозор:

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

Стоимость

Trial — 1 неделя
Premium — $1.99/месяц, $11.99/год

Do! — Simple To Do List

#метод: paper-like to-do list
#сложность: простейший (simplicity)
#использование: для персонального использования

Доступен для iPhone, IPad и Apple Watch.

Описание

Очень простое приложение, тем не менее достаточно популярное. Как заявляют сами создатели — вам не нужно будет изучать это приложение, просто следуйте своему инстинкту. Так и есть.

Выглядит как обычный линованный to-do лист, куда добавляются все ваши задачи на ближайшее и не очень будущее. Но настройки позволяют превратить его в полноценный планировщик.

Функционал

Так выглядит Do!:

Общий вид

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

Группирование:

Внешний вид:

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

Стоимость

Бесплатно, если готовы мириться с ненавязчивой рекламой.
Либо — все так же бесплатно, но с единоразовой оплатой $5.99 за отключение рекламы.

Google Tasks

#метод: GTD, Kanban
#сложность: простейший (simplicity)
#использование: для персонального и совместного использования

Доступен: iPhone, Ipad, Android, macOS, Windows

Описание

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

Десктоп-приложение Google Tasks

Мобильная версия Google Tasks

Функционал

Редактирование записей:

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

Интеграция с Google Calendar и Gmail:

Google Calendar: задачи из Google Tasks выделены отдельным значком в календаре

Удобнее использовать Google Tasks будет тем, кто параллельно пользуется календарем Google. Все задачи, имеющие дату в Google Tasks, будут отображаться и в календаре. Также удобно сразу переносить важные мейлы в задачи, используя sidebar в Gmail.

Стоимость
Базовая версия — бесплатно
Premium — $5.99/месяц, $39.99/год
Enterprise — $99.99/год

Microsoft To-Do

#метод: GTD
#сложность: функциональный (functionality)
#использование: для персонального и совместного использования

Доступен для iPhone, Android, macOS, Windows, Web.

Описание

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

Функционал

Рабочая зона:

Десктоп-версия

Мобильное приложение

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

Структурированный вид по датам — в разделе Planned.

Вид My Day:

Список рекомендуемых дел

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

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

Интеграция с Outlook

Активировав эту функцию, письма, отмеченные флажком в Outlook, будут автоматически появляться в списке заданий, где ими можно управлять прямо в приложении. Максимальное количество писем-задач — 10, сроком давности не более двух недель.

Шеринг:

Поделиться отдельными задачами с другими пользователями не получится, но можно дать доступ к своим спискам. Отправить приглашение присоединиться можно также по AirDrop. Все списки, которыми поделились с вами, находятся в разделе Assigned to you.

Стоимость
Бесплатно

TickTick

#метод: GTD, Kanban, Pomodoro, habit tracker
#сложность: функциональный (functionality)
#использование: для персонального и совместного использования

Доступен: Web, iPhone, Ipad, Apple Watch, Android, macOS, Windows

Описание

TickTick — кросс-платформенное приложение для управления задачами с достаточно широким функционалом.

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

Десктоп-приложение TickTick

Мобильное приложение TickTick

Функционал

Сортировка и структурирование:

Панель редактирования задач

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

Pomodoro таймер:

Для борьбы с прокрастинацией есть встроенный Pomodoro таймер, который позволяет устанавливать таймер (обычно 25 минут) на любое из заданий. Можно варьировать время на выполнение заданий и перерывы между ними. Доступна статистика.

Трекер полезных привычек:

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

Стоимость
Базовая версия — бесплатно
Premium — $2.79/месяц, $27.99/год

Todoist

#метод: GTD, Kanban
#сложность: функциональный (functionality)
#использование: для персонального и совместного использования

Доступен: Web, iPhone, Ipad, Apple Watch, Android, Wear OS, macOS, Windows, Linux

Описание

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

Todoist десктоп-приложение

Todoist мобильное приложение

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

Функционал

Доски:

Канбан-доска проекта

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

Шаблоны проектов:

Готовый шаблон списка вещей в бизнес-поездку

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

Todoist карма:

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

Стоимость

Базовая версия — бесплатно
Premium — $4/месяц, $36/год
Team — $6/месяц, $60/год

Any.do

#метод: GTD, Pomodoro
#сложность: функциональный (functionality)
#использование: для персонального и совместного использования

Доступен: Web, iPhone, Ipad, Apple Watch, Android, Wear OS, macOS, Windows, Huawei

Описание

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

Рабочая зона практически такая же, как у большинства приложений такого типа:

Внешний вид десктоп-приложения

Мобильная раскладка

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

Функционал

Добавление задач из WhatsApp:

Whatsapp-робот Any.do

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

Умный список покупок

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

Focus:

Одна задача — плюс одно дерево

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

Стоимость

Базовая версия — бесплатно
Premium — $5.99/месяц, $26.94/полгода, $35.88/год

Remember the milk

#метод: GTD
#сложность: функциональный (functionality)
#использование: для персонального и совместного использования

Доступен: Web, iPhone, Ipad, Apple Watch, Android, Wear OS, macOS, Windows

Описание

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

Рабочая зона Remember the Milk, десктоп-версия

Мобильное приложение Remember the Milk

Функционал

Добавление задач:

Добавление и редактирование задач в мобильной версии

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

Умный шеринг и делегирование:

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

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

Smart Lists:

Ввод параметров для создания смарт-листа

По сути смарт-листы — это сохраненные поисковые запросы, агрегирующие задачи, которые обладают отмеченными критериями. К примеру, можно создать лист, в котором из всех ваших задач будут отображаться лишь те, которые должны быть сделаны до пятницы, надиктованы через Siri и имеют заданное ключевое слово.

Стоимость
Базовая версия — бесплатно
Premium — $39.99/год

И наконец, бонусом для тех, кто перепробовал все и решил пойти от обратного — от сложного к простому:

Бумага и ручка

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

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

Bullet Journaling

Описание

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

Сравнительная таблица всех сервисов

P.S.

Эта же статья на Медиуме (ENG)

Как создать работающий план

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

Как создать работающий план

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

Метод первый. Создайте план на день

1. Сядьте с листом бумаги

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

2. Составьте себе расписание

Во сколько вы должны покончить с вашим первым заданием или проектом? Запишите каждую мелочь, начиная с той, которую нужно выполнить сначала, затем следующую и так напишите расписание на целый день. Убедитесь, что вы ничего не забыли. Конечно же, каждый день разный, и поэтому каждый день план будет другим. Базовый план может выглядеть, например, так:

  • 09:0010:00 — добраться до офиса, проверить почту, ответить на письма.
  • 10:0011:30 — встреча с Максом и Катей.
  • 11:3012:30 — проект № 1.
  • 12:3013:15 — обед (здоровая пища!).
  • 13:1514:30 — анализ проекта № 1, встретиться с Сергеем и обсудить проект № 1.
  • 14:3016:00 — проект № 2.
  • 16:0017:00 — начать проект № 3, подготовить вещи на завтра.
  • 17:0018:30 — уйти из офиса, зайти в спортзал.
  • 18:3019:00 — зайти за продуктами.
  • 19:0020:30 — приготовить ужин, отдых.
  • 20:30 …     — в кино с Машей.

3. Переориентируйте себя каждый час

Очень важно воспользоваться удобным моментом после определённого времени, чтобы проанализировать, насколько продуктивным вы были на протяжении этого времени. Сделали ли вы всё, что вам нужно было сделать? Затем дайте себе минутку для перезагрузки, закройте глаза и расслабьтесь. Так вы сможете эффективно перейти к следующей задаче, которую вам нужно выполнить.

4. Проанализируйте ваш день

Когда вы покончите с большей частью вашего дня, найдите минутку, чтобы посмотреть, придерживаетесь ли вы вашего плана. Закончили ли вы всё, что было запланировано? Где вы сделали ошибку? Что сработало, а что нет? Что вас отвлекает, и как вы можете бороться с отвлекающим вас фактором в будущем?

Hasloo Group Production Studio/Shutterstock.com

Метод второй. Создайте план на жизнь

1. Создайте общие цели, которые вы хотите достичь в вашей жизни

Как вы хотите развиваться? Чего вы хотите добиться в своей жизни? Думайте об этом, как о «списке жизни». Помните фильм «Достучаться до небес»? Вот именно это и есть список жизни. Это должны быть именно те цели, которые вы действительно хотите достичь, а не те, которые вы считаете нужными. Иногда бывает полезным разбить цели на категории для лучшей визуализации. Категории могут быть, например, такими:

  • карьера;
  • путешествия;
  • семья/друзья;
  • здоровье;
  • финансы;
  • знание;
  • духовность.

Цели могут быть, например, такими:

  • Написать и издать книгу.
  • Побывать на каждом континенте.
  • Создать семью.
  • Похудеть на 10 килограмм.
  • Накопить денег на образование моих детей.
  • Закончить институт.
  • Узнать больше о буддизме.

2. Создайте некоторые конкретные цели с определённой датой выполнения

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

  • Отправить книгу 30 изданиям до июня 2016 года.
  • Отправиться в путешествие в Южную Америку в 2015 году, а в Азию — в 2016-м.
  • Иметь вес 70 килограмм в январе 2015 года.

3. Оцените вашу реальность и где вы находитесь прямо сейчас

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

4. Определитесь с тем, как вы будете достигать своих целей

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

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

5. Запишите шаги для достижения ваших целей

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

6. Пересматривайте свой план и корректируйте его

Как и всё в этом мире, ваша жизнь изменится, и ваши цели тоже могут измениться. То, что было важно для вас в 12 лет, может быть не так важно, когда вам 22 или 42 года. И это нормально — менять ваш жизненный план, потому что это показывает, что вы в курсе изменений, которые происходят в вашей жизни.

docstockmedia/Shutterstock.com

Метод третий. Решайте проблемы с помощью плана

Часть первая: определение проблемы

1. Осознайте проблему, с которой вы столкнулись

Иногда самой сложной частью создания плана является то, что вы не знаете, в чём проблема. Часто проблема, с которой мы столкнулись, создаёт ещё несколько проблем. Беда, как говорится, не приходит одна. То, что вам нужно сделать, — найти источник проблемы. И это именно то, с чем вам нужно разобраться.

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

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

Какой цели вы надеетесь достичь, решая проблему? Сосредоточьтесь на достижении вашей цели. Остальное придёт само собой.

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

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

Какие из ваших привычек поспособствовали возникновению проблемы? Выделите немного времени, чтобы проанализировать причины возникновения проблемы.

Ваша проблема состоит в том, что вы получили тройку по математике. Подумайте, что могло привести к этому: может, вы много разговаривали с другом на уроке. Или же не делали домашнее задание по вечерам из-за тренировок по футболу, например.

4. Рассмотрите внешние факторы, способствующие возникновению проблемы

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

Часть вторая: найдите решение и создайте план

1. Найдите несколько возможных решений вашей проблемы

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

Решение проблемы общения с другом на уроке:

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

Решение проблемы невыполненного домашнего задания из-за тренировки по футболу:

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

Решение проблемы непонимания алгебры:

  • Пусть вам поможет одноклассник, который может прояснить все непонятные для вас моменты.
  • Попросите помощи у учителя. Объясните, что вы не понимаете материал и нуждаетесь в дополнительном объяснении.
  • Займитесь математикой с репетитором.

2. Создайте план

Итак, вы провели мозговой штурм и поняли, в чём ваша проблема. Теперь выберите наиболее действенные, по вашему мнению, решения проблемы и запишите план для себя. Повесьте план где-нибудь, где он чаще всего будет попадаться вам на глаза. Ваш план улучшения вашего уровня по математике должен выглядеть так:

План по улучшению в течение четырёх недель

  1. Сказать Кате, что на уроках я не могу с ней говорить. Если это не поможет, то пересесть от неё.
  2. Каждые вторник и четверг делать уроки во время обеда. Так у меня останется меньше заданий, которые нужно сделать после тренировки.
  3. Каждые понедельник и среду посещать факультатив по математике. Цель: через четыре недели улучшить свой уровень с тройки минимум до четвёрки.

3. Проанализируйте первую неделю

Сделали ли вы всё, что планировали? Добились ли вы успеха? Какие ошибки вы допустили? Сделав хороший анализ, вы сможете избежать ошибок в дальнейшем.

4. Не теряйте мотивацию

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

Добавить комментарий