{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Максима Волкова: заметки с тегом кейс",
    "_rss_description": "В этом списке лишь малая часть работ, до описания которых дошли руки. Остальное можно посмотреть на сайте",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "http:\/\/maksvolkov.ru\/blog\/tags\/keys\/",
    "feed_url": "http:\/\/maksvolkov.ru\/blog\/tags\/keys\/json\/",
    "icon": "http:\/\/maksvolkov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1762094417",
    "authors": [
        {
            "name": "Максим Волков",
            "url": "http:\/\/maksvolkov.ru\/blog\/",
            "avatar": "http:\/\/maksvolkov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1762094417"
        }
    ],
    "items": [
        {
            "id": "61",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/brosay-kurit\/",
            "title": "Страховка для лыжников и сноубордистов",
            "content_html": "<p><b>Какая была проблема<\/b><br \/>\nУ страхования туристов появился новый вид страхования для горнолыжников и сноубордистов. Нужно привлечь клиентов на этот вид страхования и помочь им оформить страховку.<\/p>\n<p><b>Что мы сделали<\/b><br \/>\nНаписали отдельный раздел в действующем разделе помощи о страховке для туристов. В разделе ответили на самые частые вопросы и рассказали, как оформить такой полис.<\/p>\n<p><b>В чем польза для клиента<\/b><br \/>\nНайдет ответы, что это за страховка, от каких рисков защищает и как оформить полис.<\/p>\n<p><b>В чем польза для бизнеса<\/b><br \/>\nПолучим новых клиентов из поисковиков, ответим на вопросы действующих клиентов.<\/p>\n<p><b>Какая дистрибуция<\/b><br \/>\nСотрудники поддержки будут отправлять ссылку в чатах, а новые клиенты смогут найти раздел в поисковиках, так текст помогли оптимизировать сео-специалисты.<\/p>\n<p><a href=\"https:\/\/www.tinkoff.ru\/insurance\/help\/health\/travel\/about-vzr\/skiers-insurance\/\">Страховка для лыжников и сноубордистов <\/a><\/p>\n",
            "date_published": "2024-05-09T16:55:05+03:00",
            "date_modified": "2024-05-09T16:54:50+03:00",
            "tags": [
                "кейс"
            ],
            "_date_published_rfc2822": "Thu, 09 May 2024 16:55:05 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "61",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "60",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/nameste\/",
            "title": "Наместе — сервис бронирования отелей",
            "content_html": "<p><b>Какая была проблема<\/b><br \/>\nВ Тинькофф запустился новый продукт по бронированию отелей — Наместе. Нужно помочь клиентам воспользоваться сервисом и снять частые вопросы в поддержку.<\/p>\n<p><b>Что мы сделали<\/b><br \/>\nНаписали новый хелп, в котором ответили на самые частые вопросы. Вопросы собирали по ощущениям и  статистики обращений по Тинькофф Отелям.<\/p>\n<p><b>В чем польза для клиента<\/b><br \/>\nСамостоятельно разберется, как пользоваться сервисом и сможет выполнить самые популярные действия.<\/p>\n<p><b>В чем польза для бизнеса<\/b><br \/>\nСнизится количество обращений в поддержку; сотрудники поддержки смогут сразу кинуть ссылку клиенту с нужными действиями; сотрудники поддержки смогут разобраться в работе продукта<\/p>\n<p><b>Какая дистрибуция<\/b><br \/>\nПоддержка будет давать ссылку по запросу клиента + сео + ссылки на вопросы в чате приложения «Наместе».<\/p>\n<p>В апреле 2024 года этот сервис отключили, но я сохранил страницу хелпа для потомков:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/Nameste1h-min.jpeg.jpg\" width=\"556\" height=\"2560\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2024-05-09T11:31:27+03:00",
            "date_modified": "2024-05-09T14:00:42+03:00",
            "tags": [
                "кейс"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/Nameste1h-min.jpeg.jpg",
            "_date_published_rfc2822": "Thu, 09 May 2024 11:31:27 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "60",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/Nameste1h-min.jpeg.jpg"
                ]
            }
        },
        {
            "id": "59",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/ekskursii\/",
            "title": "Экскурсии в Тинькофф Путешествиях",
            "content_html": "<p><b>Какая была проблема.<\/b> В Тинькофф Путешествиях запустилось направление экскурсий через партнера Трипстер. У партнера есть свой хелп и поддержка, но, если клиент закажет экскурсию напрямую, не получит кэшбэк от Тинькофф. Нужно рассказать клиентам, как заказать экскурсию в Тинькофф.<\/p>\n<p><b>Что мы сделали.<\/b> Написали отдельную раздел в хелпе Путешествий, в которой ответили на самые частые вопросы. За основу взяли действующий хелп партнера и переработали его по своим стандартам.<\/p>\n<p><b>В чем польза для клиента.<\/b> Найдет ответы о бронировании экскурсии на сайте Тинькофф и не будет задумываться о том, как связан Тинькофф и Трипстер.<\/p>\n<p><b>В чем польза для бизнеса.<\/b> Получим дополнительных клиентов из поисковиков и ответим на вопросы действующих клиентов.<\/p>\n<p><b>Какая дистрибуция.<\/b> Через поддержку Тинькофф и сео-продвжиение.<\/p>\n<p><a href=\"https:\/\/www.tinkoff.ru\/travel\/help\/travel\/tinkoff-travel\/about\/excursions\/\">Экскурсии в Тинькофф Путешествиях<\/a><\/p>\n",
            "date_published": "2024-05-05T10:32:01+03:00",
            "date_modified": "2024-05-05T10:31:39+03:00",
            "tags": [
                "кейс"
            ],
            "_date_published_rfc2822": "Sun, 05 May 2024 10:32:01 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "59",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "55",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/kuda-potratil-vremya\/",
            "title": "Мой главный проект 2023 года: сайт-портфолио",
            "content_html": "<p>Это рассказ о создании моего сайта-портфолио maksvolkov.ru, который запущен 21 ноября 2022 года (специально записал в подвале). Работа над сайтом длилась весь 2023 год, но только сейчас, к декабрю, он более-менее меня начал устраивать и новых идей по доработкам не появляется.<\/p>\n<p>Сайт помогает рассказывать потенциальным заказчикам о моих навыках, красиво показать выполненные работы и собирать их в одном месте. Ссылка на сайт опубликована на Бирже Главреда и в Табло. И я им очень горжусь!<\/p>\n<p>Далее расскажу, что привело меня к созданию своего сайта, как он выглядел на разных этапах, какие проблемы удалось решить, а какие до сих пор остались.<\/p>\n<p>UPD: а вот и <a href=\"http:\/\/maksvolkov.ru\/blog\/all\/rezultaty-konkursa\/\">результаты подъехали.<\/a><\/p>\n<h2>Зачем нужен мне сайт<\/h2>\n<p>Созданием своего сайта я хотел решить несколько проблем:<\/p>\n<ul>\n<li>Не растерять знания из Школы редакторов, которую как раз закончил в октябре 2022.<\/li>\n<li>Найти место, куда бы я относил выполненные проекты. Можно, конечно, использовать гугл-доки или Ноушен, но хотелось выпендриться.<\/li>\n<li>Создать свою песочницу, которая жила бы по моим правилам и я мог влиять на любой параметр.<\/li>\n<\/ul>\n<p><b>Не потерять знания из Школы редакторов. <\/b> После окончания Школы редакторов остались знания ХТМЛ, навыки верстки и несколько шаблонов из школьных заданий. Хотелось быстро это все применить, чтобы не забылось и сразу начало приносить пользу.<\/p>\n<p>Например, остались вот такие шаблоны:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\">На первой ступени нужно сверстать ХТМЛ‑страницу с собственным резюме. Я верстал <a href=\"https:\/\/codepen.io\/m4ks_vo\/pen\/LYzegPp\">в Codepen,<\/a> за основу брал свое резюме на Хедхантере. По-моему, получилось очень похоже<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/ShR-sait-vizitka.jpeg\" width=\"1249\" height=\"1919\" alt=\"\" \/>\n<div class=\"e2-text-caption\">На второй ступени нужно сверстать веб‑страницу о себе (без ХТМЛ). Миша Нозик поставил за эту работу 4,08 из 5<\/div>\n<\/div>\n<p><b>Где-то публиковать выполненные проекты.<\/b> Для публикации своих проектов я пробовал сервисы по созданию микролендингов и гугл-доки. Сервисы микролендингов меня не устраивали по ограниченности функционала и сбору денег за что-то клевое, а гугл-доки тогда не умели убирать разделение страниц и после Школы редакторов выглядели несерьезно.<\/p>\n<p>Моя редакторская карьера началась в запрещенной сейчас соцсети. Тогда там можно было поставить в профиле только одну работающую ссылку, чего обычно не хватало. Поэтому были популярны сервисы типа Taplink, которые помогали собрать на одном урле кучу других ссылок.<\/p>\n<p>Изначально всё, что я где-либо писал, я добавлял на страницу в Taplink. Например, вот  <a href=\"https:\/\/vk.com\/@smm2max-13-sovetov-dlya-reklamnyh-postov\">одна из самых первых моих статей в ВК<\/a> с советами для рекламных постов. Сейчас она выглядит смешно и наивно, но тогда мне казалась очень серьезной работой.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-2.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><a href=\"https:\/\/taplink.cc\/maxim_volkov58\">Моя страница на Taplink<\/a> доступна до сих пор<\/div>\n<\/div>\n<p>Затем наступила эпоха гугл-дока, когда я прочитал несколько редакторских рассылок, пооткликался на вакансии и понял, что каждый раз надо собирать что-то индивидуальное, а не кидаться одной ссылкой с посылом «Вот все, что я сделал. Выберите сами что-нибудь на свой вкус».<\/p>\n<p>Сбор ссылок для каждого отклика работает и сейчас, то есть свой сайт пилить было не обязательно, но хотелось постоянной практики в ХТМЛ и гордости за что-то, сделанное своими руками.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-3.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Мое портфолио в гугл-доке. По факту — кладбище ссылок, чтобы не забыть<\/div>\n<\/div>\n<p><b>Создать свою песочницу.<\/b> Мне хотелось сделать что-то с нуля и применить весь тот багаж, которому я научился за 9 месяцев обучения в Школе редакторов.<\/p>\n<p>Для меня было важным двигать что угодно и как угодно на странице, а также чтобы это было доступно другим людям в интернете и работало: нажимались ссылки, как-то все расставлялось, менялся вид, в зависимости от устройства.<\/p>\n<p>Ни один инструмент, кроме создания своего сайта на ХТМЛ, не позволял сделать то, что я хочу, а у конструкторов сайтов были ограничения, с которыми я не готов был мириться.<\/p>\n<h2>Первая версия сайта в Редимаге<\/h2>\n<p>В 2022 году я был главредом журнала «Кто студент», а там было принято собирать страницы в этом конструкторе. У меня как-то быстро там получилось во всем разобраться, поэтому когда задумался о своем сайте, первые подходы делал в нем.<\/p>\n<p>Сайт в Редимаге просуществовал пару недель. Редимаг не устраивал по нескольким причинам:<\/p>\n<ol start=\"1\">\n<li>Нельзя было сделать внутренние страницы с описанием выполненной работы (ну или это было в платной версии), только прикручивать, например, отдельный гугл-док. А хотелось, чтобы описание работ открывалось на этом же сайте и было похоже по стилю.<\/li>\n<li>Невозможно сделать общий ховер (выделение при наведении мышкой), когда наводишь на обложку — как будто ссылка-картинка и ссылка в названии не знают друг о друге и ведут в разные места.<\/li>\n<li>Ограниченные настройки внешнего вида, отступов, шрифтов, по крайней мере, в бесплатной версии.<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-4.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Экран редактирования сайта в Редимаге. Сам сайт в центре, а по краям всякие заготовки. <a href=\"https:\/\/readymag.com\/u1871049592\/4031586\/\">Сайт до сих пор доступен,<\/a> но сейчас используется только как памятник. Очень люблю последний экран с клешней осьминога<\/div>\n<\/div>\n<h2>Сайт на ХТМЛ<\/h2>\n<p>Из-за минусов Редимага решил не пробовать другие конструкторы, а сразу делать все в ХТМЛ. Свой сайт позволил бы решить все проблемы, но, забегая вперед скажу, что это отняло кучу времени и сил, потому что внутренний перфекционист не мог успокоиться.<\/p>\n<p>В процессе создания удалось решить много проблем. Например, появился общий ховер картинки и ссылки, отдельные страницы с описаниями выполненной работы, перебивки из заметок, мобильная версия, кастомные шрифты и отступы, ускорение загрузки и сокращения эффекта Упячки. О решении этих проблем подробнее расскажу в следующем разделе.<\/p>\n<p><b>Первая версия сайта<\/b> была похожа на редимаговскую, потому что первый прототип  для Редимага я собрал в Фигме. Нужно было теперь шаблон из Фигмы перенести в код, купить домен и залить на хостинг.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-14.png\" width=\"1148\" height=\"284\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Макеты и заготовки для сайта собирал в Фигме<\/div>\n<\/div>\n<p>Первую версию я даже приносил на один из живых советов к Мише Нозику, потому что устал двигать пиксели и нужен был взгляд со стороны.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/Snimok-ekrana-2023-12-16-v-11.14.24.png\" width=\"1440\" height=\"900\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Я пришел с просьбой разобрать шапку, потому что меня смущали подзаги под именем и фамилией, но убирать их не хотелось. Обратите внимание, что общий ховер тут еще не работает: картинка выделена красной рамкой, а заг под ней — нет. <a href=\"https:\/\/youtu.be\/hu57cjRUvCU?si=6XTJ9YVZ5grLc_BU&t=2580\">С этого момента<\/a> можно посмотреть, как в итоге Миша Нозик предложил переделать шапку<\/div>\n<\/div>\n<p><b>Следующие версии сайта.<\/b> К советам Миши Нозика я не прислушался, но он подтолкнул на изменения и появился стимул сделать новую главную. Новую версию снова собирал в Фигме, а затем переносил в код прямо в файловом менеджер хостинга. За основу новой главной взял <a href=\"https:\/\/aino.agency\/\">сайт aino.agency<\/a>, на котором понравился контраст заголовка и остального текста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-4.png\" width=\"1029\" height=\"819\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Идею контраста зага и остального текста подсмотрел на сайте этого агентства<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-13.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Версии первого экрана сайта в Фигме. Хотелось повторить контраст с сайта агентства<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-10-1.jpeg\" width=\"1228\" height=\"735\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Итоговая главная, спустя много промежуточных версий<\/div>\n<\/div>\n<h2>Трудности, которые удалось решить<\/h2>\n<p><b>Хостинг и домен.<\/b> Хостинг выбирал недолго. Загуглил рейтинги, открыл штук 5 лучших и почитал условия. Выбрал Бегет, потому что у них можно <a href=\"https:\/\/beget.com\/ru\/hosting\/free\">разместить один сайт бесплатно.<\/a> Но есть ограничения по объему места на диске, количеству сайтов и нагрузке.<\/p>\n<p>Специально искал что-то бесплатное, чтобы сайт жил максимально долго. Зная себя, я могу потом забить на оплату и сайт снимут с публикации. Также был челендж обойтись минимальной суммой денег.<\/p>\n<p>Домен купил там же, в Бегет, после регистрации хостинга. Было несколько вариантов, которые стоили недорого, но остановился на maksvolkov.ru — остальные варианты казались сложнее.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-7.png\" width=\"640\" height=\"429\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Варианты доменов в заметках, которые более-менее понравились и стоили недорого<\/div>\n<\/div>\n<p><b>Шрифт.<\/b> Для надписи фамилии и имени на главной выбрал <a href=\"https:\/\/dirtylinestudio.com\/product\/neue-metana-next-free-font\/\">шрифт Neue Metana Next Free Font,<\/a> который бесплатный и поддерживает кириллицу. Но из файла лицензии шрифта я не понял, можно ли его использовать для сайта. Не постеснялся и написал письмо студии. Они ответили, что никаких проблем нет, на личном сайте использовать можно.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-6.png\" width=\"883\" height=\"616\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Студия, которая создала шрифт, ответила, что все норм, для личного сайта шрифт использовать можно<\/div>\n<\/div>\n<p><b>Мобильная версия.<\/b> В первых версиях сайта мобильной версии не было, часть контента уезжала за экран и появлялась горизонтальная прокрутка. Чтобы сайт выглядел прилично на планшете и телефоне, собрал мобильную версию сайта, написав нужные стили <a href=\"https:\/\/doka.guide\/css\/media\/\">через медиазапросы.<\/a> Всего получилось пять стилей для таких размеров экранов:<\/p>\n<ol start=\"1\">\n<li>до 360px,<\/li>\n<li>до 455px,<\/li>\n<li>до 755px,<\/li>\n<li>до 1100px,<\/li>\n<li>от 1440px.<\/li>\n<\/ol>\n<div class=\"e2-text-video\">\n<video src=\"http:\/\/maksvolkov.ru\/blog\/video\/Zapis-ekrana-2023-12-16-v-13.52.41.mov#t=0.001\" width=\"1189\" height=\"816\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Вот так меняется главная сайта в зависимости от ширины экрана<\/div>\n<\/div>\n<p>Также для мобильной версии собрал отдельные обложки статей в мокапе мобильного телефона.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"http:\/\/maksvolkov.ru\/blog\/video\/Zapis-ekrana-2023-12-16-v-14.28.13.mov#t=0.001\" width=\"1189\" height=\"816\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Вот так меняются обложки статей в зависимости от ширины экрана<\/div>\n<\/div>\n<p><b>Эффект Упячки<\/b> — это когда содержимое все время скачет по мере загрузки изображения. У меня на сайте много картинок, поэтом пришлось каждой картинке заранее задать высоту и ширину, чтобы победить этот эффект. При загрузке место под картинку резервируется и сайт во время загрузки не прыгает. <a href=\"https:\/\/bureau.ru\/soviet\/20191212\/\">Как избежать эффекта Упячки при загрузке картинок<\/a><\/p>\n<div class=\"e2-text-video\">\n<video src=\"http:\/\/maksvolkov.ru\/blog\/video\/Zapis-ekrana-2023-12-16-v-14.49.19.mov#t=0.001\" width=\"1189\" height=\"816\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">Вот что будет, если в веб-инспекторе поставить медленную скорость интернета и перезагрузить страницу. Каждой картинке задан размер и она подгружается внутри серого блока, поэтому страница не прыгает<\/div>\n<\/div>\n<p><b>Одновременный ховер картинки и зага.<\/b> Это одна из причин, почему я отказался от конструкторов сайтов. Сейчас при наведении на картинку или текст под ней появляется ховер (курсор мышки меняется на руку), причем без дыр между строками. Можно кликнуть в любое место обложки и текста под ней и перейти по ссылке.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"http:\/\/maksvolkov.ru\/blog\/video\/Zapis-ekrana-2023-12-16-v-15.00.22.mov#t=0.001\" width=\"1440\" height=\"810\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">По виду курсора видно, что ссылка сплошная без дыр между строками или картинкой и текстом<\/div>\n<\/div>\n<p><b>Автоплей ролика с Ютуба.<\/b> Во время учебы в Школе редакторов у нас был тайны кружок переговорщиков, где мы тренировались общаться с потенциальными клиентами. По итогам осталось куча видео, про которые хотелось рассказать на сайте. Чтобы привлечь внимание посетителей хотелось, чтобы ролики запускались автоматически, но без звука.<\/p>\n<p>Чтобы это решить пришлось покопаться <a href=\"https:\/\/developers.google.com\/youtube\/player_parameters?hl=ru\">в параметрах проигрывателя Ютуба<\/a> и настройки айфрейма, с помощью которого видео добавлено на сайт.<\/p>\n<div class=\"e2-text-video\">\n<video src=\"http:\/\/maksvolkov.ru\/blog\/video\/Zapis-ekrana-2023-12-23-v-11.13.14.mov#t=0.001\" width=\"1440\" height=\"810\" controls alt=\"\" \/>\n\n<div class=\"e2-text-caption\">При загрузке страницы видео автоматически запускается без звука<\/div>\n<\/div>\n<h2>Трудности, которые остались<\/h2>\n<p><b>Ssl-сертификат.<\/b> Если у сайта нет ssl-сертификата, он считается небезопасным и все браузеры об этом предупреждают. А еще адрес такого сайта начинается с http, а не https. Это влияет на выдачу в поисковиках и СЕО-продвижение.<\/p>\n<p>Эту проблему я попытался решить <a href=\"https:\/\/www.cloudflare.com\/\">с помощью Cloudflare.<\/a> Это что-то типа ВПН для сайта, который выдает бесплатный ssl-сертификат и фильтрует все входящие и исходящие соединения. То есть условно каждый запрос сначала попадает в Cloudflare, а потом на хостинг, который высылает в ответ файлы сайта.<\/p>\n<p>Но при использовании Cloudflare отвалилась Эгея, а она была нужна, чтобы писать заметки и рассказывать о выполненной работе. Поэтому пришлось все откатить и жить без ssl-сертификата. Конечно, можно перейти на платный хостинг, куда входит бесплатный ssl-сертификат, но я пока не вижу в этом смысла: сайт открывается и работает, кому надо его увидят, а СЕО-продвижение для меня не важно.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-11.png\" width=\"1440\" height=\"733\" alt=\"\" \/>\n<div class=\"e2-text-caption\">У Бирмана написана <a href=\"https:\/\/docs.google.com\/document\/d\/1jLgM2M4EgTt0PqDAFkxvmRuwqQxIn2r0YINmEpb8TOI\/edit#heading=h.yq0h89kw4tys\">отдельная заметка<\/a> о том, что Эгея с Cloudflare ведет себя странно<\/div>\n<\/div>\n<p><b>Опенграф.<\/b> Есть еще одна проблема у бесплатного тарифа в Бегет: заблокирован доступ ботов к сайту, поэтому опенграф (картинка для шеринга в соцсети) не отображается. То есть тупо вставляется ссылка без сопровождающего текста и картинки.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-8.png\" width=\"705\" height=\"192\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Если отправить ссылку в Телеграме, она отправится просто урлом без описания и картинки<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-9.png\" width=\"1101\" height=\"133\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Хотя нужные теги с заголовком, текстом и картинкой добавлены в код сайта<\/div>\n<\/div>\n<h2>Нафига я это все рассказал<\/h2>\n<p>Ну во-первых, чтобы принять участие <a href=\"https:\/\/docs.google.com\/document\/d\/1ptdc4KJyRdBxqXeB5GBkJ1QW61dY_mzBB52JjfL2yrE\/edit#heading=h.lmd2km3zj0xa\">в выставке<\/a> и занять там призовое место с мерчем, подарками, славой и богатством.<\/p>\n<p>Во-вторых, я буду рад, если кого-то моя история вдохновит на создание чего-то такого же или, наоборот, отговорит. На первых этапах свой сайт отнимает много времени и сил и постоянно появляются неожиданные проблемы, с которыми придется разбираться. Зато потом чувствуешь себя молодцом, есть свой уголок, который подчиняется твоим правилам, и не стыдно сказать «Это я сделал!».<\/p>\n<p>В-третьих, я редко так подробно рассказываю о своей работе и хреново себя пиарю, а тут появился стимул напрячь булки и рассказать, почему я вместо бара и сериалов провожу время перед монитором.<\/p>\n<p>Короче, заходите на мой сайт: <a href=\"http:\/\/maksvolkov.ru\/\">http:\/\/maksvolkov.ru\/<\/a><br \/>\nСмотрите заметки: <a href=\"http:\/\/maksvolkov.ru\/blog\/\">http:\/\/maksvolkov.ru\/blog\/<\/a><br \/>\nИ подписывайтесь на пустой телеграм-канал (может это сподвигнет меня написать туда первый пост): <a href=\"https:\/\/t.me\/+VsGdSQkYXjs1YWNi\">https:\/\/t.me\/+VsGdSQkYXjs1YWNi<\/a><\/p>\n",
            "date_published": "2023-12-23T11:54:12+03:00",
            "date_modified": "2024-01-18T09:55:02+03:00",
            "tags": [
                "кейс",
                "редактура"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-1.png",
            "_date_published_rfc2822": "Sat, 23 Dec 2023 11:54:12 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "55",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-1.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-3.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-5.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-6.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-7.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-8.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-9.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-10.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/Screenshot_20231216-131853-314.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-5.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-12.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-49.jpeg",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/ShR-sait-vizitka.jpeg",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-2.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-3.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-4.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-14.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/Snimok-ekrana-2023-12-16-v-11.14.24.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-4.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-13.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-10-1.jpeg",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-7.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-6.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-11.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-8.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/moy-sayt-portfolio-9.png"
                ]
            }
        },
        {
            "id": "53",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/dolyami\/",
            "title": "Долями: ответы на частые вопросы покупателей",
            "content_html": "<p>Собрал справочник для клиентов Долями, в котором собрал ответы на частые вопросы.<\/p>\n<p><b>Задача. <\/b> Сервис сильно вырос и поменялся, поэтому нагрузка на поддержку выросла, а текущая страница FAQ устарела.<\/p>\n<p><b>Решение.<\/b> Собрать справочник с частыми вопросами покупателей, новым функционалом сервиса и сложными моментами. Читатель узнает, как работает Долями, найдет ответы на свои вопросы, разберется с проблемами и будет знать, как обратиться за помощью.<\/p>\n<p><b>Результат.<\/b> Скопировал структуру старого справочника и пересобрал его по-новому. Добавил в него частые вопросы от клиентов, которых раньше не было, и вопросы, которые объясняют работу в личном кабинете и возврат товара. Сложные моменты объяснил на примерах и показал на иллюстрациях.<\/p>\n<p>Получившийся текст показал шеф-редактору, который всё переписал и оставил кучу замечаний. Все их отработал и отнёс итоговый текст менеджеру по продукту, который тоже оставил комментарии. Их тоже все отработал, согласовал итоговый вариант с шефом и продуктом, а потом подготовил текст к выпуску: заказал иллюстрации у дизайнера, мета-теги у сео-специалиста и проверку у корректора.<\/p>\n<p><a href=\"https:\/\/dolyame.ru\/help\/customer\/\">https:\/\/dolyame.ru\/help\/customer\/<\/a><\/p>\n",
            "date_published": "2023-09-22T08:38:10+03:00",
            "date_modified": "2024-01-13T09:48:54+03:00",
            "tags": [
                "кейс",
                "портфолио",
                "редактура"
            ],
            "_date_published_rfc2822": "Fri, 22 Sep 2023 08:38:10 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "53",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "50",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/pomoschnik-osago\/",
            "title": "Как оформить европротокол в приложении «Помощник ОСАГО»",
            "content_html": "<p>Написал статью для Тинькофф Помощи о том, как оформить европротокол в приложении «Помощник ОСАГО».<\/p>\n<p>Если ДТП несерьёзное: нет жертв, у обоих участников есть ОСАГО и пострадали только машины, можно не вызывать ГИБДД, а оформить электронный европротокол в специальном приложении. Также у электронного европротокола больше лимит возмещения: 400 000 против 100 000 ₽ у европротокола на бумаге.<\/p>\n<h2>Проблема<\/h2>\n<p>Электронный европротокол можно оформить в двух мобильных приложениях: «Госуслуги Авто» и «Помощник ОСАГО». У «Госуслуги Авто» понятная и подробная инструкция, а у «Помощник ОСАГО» официальная инструкция скудная и состоит всего из шести пунктов, тогда как там целый процесс.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-15.png\" width=\"1340\" height=\"847\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Инструкция по оформлению европротокола в «Госулсуги Авто»<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/image-16.png\" width=\"1340\" height=\"847\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><a href=\"https:\/\/autoins.ru\/evropeyskiy-protokol\/uproshchennoe-oformlenie-dtp\/mob_app\/\">Официальная инструкция по оформлению европротокола на сайте Российского союза автостраховщиков<\/a><\/div>\n<\/div>\n<h2>Решение<\/h2>\n<p>Написать свою пошаговую инструкцию о том, как создать электронный европротокол в приложении «Помощник ОСАГО», какие шаги нужно пройти и как выглядят экраны. Разместить ее в хелпе по ОСАГО и добавить во все методички и учебники сотрудников страховой.<\/p>\n<h2>Что делал<\/h2>\n<p>Установил себе на телефон приложение «Помощник ОСАГО» и зарегистрировался. Прошел каждый шаг создания электронного европротокола, сделал скриншоты и написал инструкцию. Итоговый текст согласовал с шеф-редактором и технологом страхования.<\/p>\n<p>Затем собрал ТЗ дизайнерам, чтобы подготовили иллюстрации по стандартам и проверил результат.<\/p>\n<p>У сео-специалиста заказал мета-теги и сео-оптимизацию, а потом все отнес на верстку, проверил и исправил недостатки.<\/p>\n<h2>Какая польза<\/h2>\n<p>Читатель получит понятную пошагую инструкцию и поймет, как оформить европротокол в приложении «Помощник ОСАГО»: что для этого нужно и сколько это займет времени. А Тинькофф соберет сео-трафик и повысит лояльность клиентов к страховой.<\/p>\n<h2>Результат<\/h2>\n<p>После публикации статья входит в топ выдачи в поисковиках, пришлось даже ее разоптимизиторвать по сео, чтобы она не перебивала трафик на основную страницу Тинькофф Помощи об оформлении европротокола.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/pomoschnik-osago-1.png\" width=\"1340\" height=\"910\" alt=\"\" \/>\n<div class=\"e2-text-caption\">В выдаче поисковика статья стабильно появляется на 3-4 месте<\/div>\n<\/div>\n<p>Почитайте и сохраните в закладки, если водите машину:<br \/>\n<a href=\"https:\/\/www.tinkoff.ru\/insurance\/help\/europrotocol-pomoshnik-osago\/\">https:\/\/www.tinkoff.ru\/insurance\/help\/europrotocol-pomoshnik-osago\/<\/a><\/p>\n",
            "date_published": "2023-09-04T09:30:16+03:00",
            "date_modified": "2024-01-27T16:36:40+03:00",
            "tags": [
                "кейс",
                "портфолио",
                "редактура"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/Screenshot_20230917-222434-282.png",
            "_date_published_rfc2822": "Mon, 04 Sep 2023 09:30:16 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "50",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/Screenshot_20230917-222434-282.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/pomoschnik-osago.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-15.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/image-16.png",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/pomoschnik-osago-1.png"
                ]
            }
        },
        {
            "id": "49",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/englex-peregovori\/",
            "title": "Базовые принципы переговоров на английском, и вообще",
            "content_html": "<p>Написал статью для онлайн-школы «Инглекс». Статья хоть и называется про переговоры на английском на самом деле подходит для любых переговоров.<\/p>\n<h2>Задача<\/h2>\n<p>В школе есть курс бизнес-английского, на который хочется привлечь больше участников, представителей бизнеса.<\/p>\n<p>Есть гипотеза, что среди потенциальных студентов школы есть те, кто пока не решили учить английский, но интересуются статьями по теме бизнеса, переговоров. Через интерес к таким материалам они могут прийти к решению начать учить английский — индивидуально или в разговорных клубах.<\/p>\n<h2>Решение<\/h2>\n<p>Написал статью, в которой рассказал об основных принципах переговоров Джима Кэмпа из его книги «Сначала скажите „Нет“».<\/p>\n<p>Текст, примеры и стиль изложения подбирал так, чтобы любой читатель, даже незнакомый с книгой Кэмпа смог понять текст и что-то взять себе.<\/p>\n<p>Для статьи придумал примеры на русском, которые потом методисты перевели на английский, и небольшой тест в конце, чтобы читатели смогли себя проверить, как усвоился материал.<\/p>\n<p>Read and you: <a href=\"https:\/\/englex.ru\/principles-of-business-communication\/\">https:\/\/englex.ru\/principles-of-business-communication\/<\/a><\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"750\" data-ratio=\"0.69962686567164\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/inglesk-bez-nuzhdy-dialog-angl.jpg\" width=\"750\" height=\"1072\" alt=\"\" \/>\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/inglesk-bez-nuzhdy-dialog-rus.jpg\" width=\"750\" height=\"1086\" alt=\"\" \/>\n<\/div>\n<\/div>\n",
            "date_published": "2023-09-04T09:00:52+03:00",
            "date_modified": "2024-01-13T09:47:47+03:00",
            "tags": [
                "кейс",
                "портфолио",
                "редактура"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/inglesk-bez-nuzhdy-dialog-angl.jpg",
            "_date_published_rfc2822": "Mon, 04 Sep 2023 09:00:52 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "49",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "jquery\/jquery.js",
                    "fotorama\/fotorama.css",
                    "fotorama\/fotorama.js"
                ],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/inglesk-bez-nuzhdy-dialog-angl.jpg",
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/inglesk-bez-nuzhdy-dialog-rus.jpg"
                ]
            }
        },
        {
            "id": "48",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/tinkoff-ecp\/",
            "title": "Статья для Тинькофф Блога об электронной подписи",
            "content_html": "<p><b>Задача. <\/b> В Тинькофф появилось приложение «Тинькофф Подпись», с помощью которого клиенты могут подписывать документы от банка электронной подписью. Многие клиенты не знают, что это такое, и опасаются, что электронная подпись ненадежна и хотят всё подписывать на бумаге. Но банк по закону обязан часть документов утверждать с клиентом электронно.<\/p>\n<p><b>Решение.<\/b> Нужно написать статью и разместить ее на главном экране приложения «Тинькофф Подпись». Ссылку на статью разослать поддержке, чтобы она могла делиться ей с клиентами. В статье объяснить, что такое электронная подпись, почему банк не может подписать документ на бумаге, а также рассказать по шагам, как утредвить документ в приложении «Тинькофф Подпись».<\/p>\n<p><b>Что делал.<\/b> Выяснил детали работы приложения, законодательные акты, которыми регламентируется подписание документов электронно, написал и согласовал текст с заказчиком и главредом Тинькофф Помощи.<\/p>\n<p>Подготовил скриншоты приложения и заказал иллюстрации и опенграфы у дизайнера. Также показал текст сео-спе­ци­а­листам и добавил их рекомендации, чтобы статья хорошо индексировалась поисковиками. По запросу «что такое электронная подпись тинькофф» статья на первом месте в органической выдаче.<\/p>\n<p>Статья: <a href=\"https:\/\/www.tinkoff.ru\/blog\/articles\/what-is-esign\/\">https:\/\/www.tinkoff.ru\/blog\/articles\/what-is-esign\/<\/a><\/p>\n<p>UPD: статью тотально переписали, но я сохранил себе исходник.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/Chto-takoe-elektronnaya-podpis.jpeg.jpg\" width=\"794\" height=\"2560\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2023-09-04T08:35:59+03:00",
            "date_modified": "2024-05-04T17:43:24+03:00",
            "tags": [
                "кейс",
                "портфолио",
                "редактура"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/Chto-takoe-elektronnaya-podpis.jpeg.jpg",
            "_date_published_rfc2822": "Mon, 04 Sep 2023 08:35:59 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "48",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/Chto-takoe-elektronnaya-podpis.jpeg.jpg"
                ]
            }
        },
        {
            "id": "47",
            "url": "http:\/\/maksvolkov.ru\/blog\/all\/kinzhal-peregovoril\/",
            "title": "Статья для «Кинжала» о том, как задавать вопросы на переговорах",
            "content_html": "<p>Эта статья выросла из курсовой в конце первой ступени Школы редакторов. Максим Ильяхов предложил опубликовать текст в «Кинжале» с небольшими доработками.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/maksvolkov.ru\/blog\/pictures\/kinzhal-peregovoril-2.png\" width=\"1601\" height=\"337\" alt=\"\" \/>\n<div class=\"e2-text-caption\">За курсовую получил 415 баллов из 500<\/div>\n<\/div>\n<p>Чтобы это сделать, понадобилось два раунда редактуры: Максим попросил сократить подводку примеров на 20%, поменять Степана на Ибрагима, а потом еще раз все сократить.<\/p>\n<p>Статья рассказывает о самых частых ошибках во время вопросов, показывает, к чему это приводит, и помогает найти верную формулировку.<\/p>\n<p>Оригинал курсовой собран на html и лежит <a href=\"https:\/\/codepen.io\/m4ks_vo\/pen\/VwyvrNw\">в Codepen<\/a>.<\/p>\n<p>Поcмотрите, что получилось: <a href=\"https:\/\/kinzhal.media\/peregovoril\/\">https:\/\/kinzhal.media\/peregovoril\/<\/a><\/p>\n",
            "date_published": "2023-09-04T08:31:21+03:00",
            "date_modified": "2024-01-13T09:48:03+03:00",
            "tags": [
                "кейс",
                "портфолио",
                "редактура"
            ],
            "image": "http:\/\/maksvolkov.ru\/blog\/pictures\/kinzhal-peregovoril-2.png",
            "_date_published_rfc2822": "Mon, 04 Sep 2023 08:31:21 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "47",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "http:\/\/maksvolkov.ru\/blog\/pictures\/kinzhal-peregovoril-2.png"
                ]
            }
        }
    ],
    "_e2_version": 4169,
    "_e2_ua_string": "Aegea 11.4 (v4169)"
}