{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Переверстал, заметки с тегом: тикетбасбай часть 1",
    "home_page_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-1\/",
    "feed_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-1\/json\/",
    "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg",
    "author": {
        "name": "Автор блога",
        "url": "https:\/\/pereverstal.by\/",
        "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "71",
            "url": "https:\/\/pereverstal.by\/all\/pereverstka-tiketbasa-ch-1\/",
            "title": "Переверстка тикетбаса, часть 1",
            "content_html": "<p>Привет, друзья! Я вам тут подготовил новый мегапост, первую часть захватывающей<br \/>\nэпопеи о том, как я переверстывал сайт www.ticketbus.by. Почему его?<br \/>\nКак он относится к Минсктрансу? Очень просто — ссылка на него стоит как раз<br \/>\nна сайте Минсктранса в разделе международных перевозок.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/235767_800.jpg\" width=\"800\" height=\"371\" alt=\"\" \/>\n<\/div>\n<p>Итак, давайте взглянем на экспонат.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/227931_1000.jpg\" width=\"1000\" height=\"732\" alt=\"\" \/>\n<\/div>\n<p>Сложно описать словами чувства, которые я испытал, впервые зайдя на тикетбасбай.<br \/>\nГомер, помогай.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/235835_800.jpg\" width=\"640\" height=\"552\" alt=\"\" \/>\n<\/div>\n<p>Да, спасибо, примерно так и было.<\/p>\n<p>Это самый настоящий, махровый образец того, как делать нельзя. Эту фразу можно<br \/>\nбыло даже не писать, вы же сами все видели!<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/236043_800.jpg\" width=\"400\" height=\"361\" alt=\"\" \/>\n<\/div>\n<p>Давайте возьмем себя в руки и препарируем наш экспонат.<br \/>\nОпределимся с целями и задачами.<\/p>\n<p>Начнем сверху, потом медлеенно, медленноо, пойдем вниз.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/225566_800.jpg\" width=\"800\" height=\"136\" alt=\"\" \/>\n<\/div>\n<h2>1) Область регистрации.<\/h2>\n<p>Верстка тут даже не валялась. Дизайнер случайно пролил тут несколько<br \/>\nфраз, линеек и кнопок, которые растеклись как им угодно. Кстати по части<br \/>\nUX тут отдельная песня, обхохочешься просто, но это во второй части.<br \/>\nСпойлер, ага.<\/p>\n<h2>2) Спукаемся ниже.<\/h2>\n<p>Тут у нас плашки с названиями разделов. За какием х... в одной горнице<br \/>\nстолько разномастных страниц? Чем отличается «РАСПИСАНИЕ» и «Расписание<br \/>\nс автовокзалов»? Оплаченные заказы это уже не мои заказы? Кстати, не удивился,<br \/>\nнайдя тут раздел «Пошаговая инструкция» — какому еще сайту понадобится<br \/>\nруководство по использованию? Правильно, тикетбасу. Здесь надо будет хорошенько<br \/>\nпоработать лопатой и разгрести эту путаницу, попутно удаляя все ненужное нахрен.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/227079_1000.jpg\" width=\"1000\" height=\"233\" alt=\"\" \/>\n<\/div>\n<h2>3) О, наконец-то нашли поля ввода города отправления и прибытия.<\/h2>\n<p>А рядом валяются костыли в виде «На этой странице Вы можете ознакомиться...» или<br \/>\n«Если вы не помните точного названия остановочного пунтка...» и бла-бла-бла.<br \/>\nЕсть тут все же один приятный момент — инфа о количестве проданных билетов.<br \/>\nФактоиды всегда хорошо.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/227543_1000.jpg\" width=\"1000\" height=\"288\" alt=\"\" \/>\n<\/div>\n<h2>4) Раздел «Новости».<\/h2>\n<p>Ответьте мне, за каким хером мне нужно знать что 22.08.2016 г. открылась регистрация<br \/>\nчерез соцсети? Или что с 22 августа покупка осуществляется только через выбор<br \/>\nместа? Это пользователь и так поймет, как только начнет пользоваться сайтом.<br \/>\nНо, например, ссылка на мобильное приложение или новость о покупке билетов<br \/>\nна рейс Гомель-Москва-Теплый стан важны, но не должны стоять в куче, в отдельном загоне.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/227801_1000.jpg\" width=\"1000\" height=\"288\" alt=\"\" \/>\n<\/div>\n<h2>5) И вот мы в подвале.<\/h2>\n<p>Тут куча всякого хлама — строительный мусор, лыжи, старая картошка, банки, велик,<br \/>\nковер и два сломанных стула. Много паутины и пахнет мочой. Если серьезно, то весь<br \/>\nэтот текстовый мусор нужно разгрести — что-то удалить, что-то отправить<br \/>\nв соответствующие разделы. И конечно же не делать, сука, такие длинные строки.<\/p>\n<p>Ну что же, помоем руки и приступим к работе.<\/p>\n<p>Начнем с логотипчика. Вот такое точно не катит.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/236293_800.jpg\" width=\"568\" height=\"44\" alt=\"\" \/>\n<\/div>\n<p>Мудрить долго не буду, а просто скрещу билет и название системы.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/229299_1000.jpg\" width=\"685\" height=\"902\" alt=\"\" \/>\n<\/div>\n<p>Вот что получилось<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/236926_800.jpg\" width=\"800\" height=\"400\" alt=\"\" \/>\n<\/div>\n<p>Едем дальше. Прикидываю разделы, рисую эскизы, считаю сетку.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/237406_800.jpg\" width=\"800\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Размер 1280, поля по 40 px, т. е. рабочая область 1200 px, колонок будет 16.<\/p>\n<p>Считаю межколонник — 16 px<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/228582_1000.jpg\" width=\"679\" height=\"566\" alt=\"\" \/>\n<\/div>\n<p>Рисую сетку. Кстати вот это очень клевый ресурс для этих целей.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1000\" data-ratio=\"1.3071895424837\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/228258_1000.jpg\" width=\"1000\" height=\"765\" alt=\"\" \/>\n<img src=\"https:\/\/pereverstal.by\/pictures\/228746_1000.jpg\" width=\"265\" height=\"522\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Та-да.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/228994_1000.jpg\" width=\"1000\" height=\"633\" alt=\"\" \/>\n<\/div>\n<p>Ок, вот что у меня в итоге получилось.<br \/>\nДавайте разберемся подробнее.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/237747_1000.jpg\" width=\"641\" height=\"821\" alt=\"\" \/>\n<\/div>\n<p>1) В шапке у нас логотип, название системы, кнопка входа (она же регистрация)<br \/>\nи переместившийся на видное место номер инфолинии — всем так или иначе<br \/>\nнужно звонить на вокзал, чтобы оперативно получить ответ. Сам не раз звонил.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/237872_1000.jpg\" width=\"1000\" height=\"222\" alt=\"\" \/>\n<\/div>\n<p>2) Форма для ввода поисковой инфы. На этой же плашке ссылки на расписание автовокзалов<br \/>\nРБ и Правила возврата билетов. Раньше одна ссылка была в меню разделов сайта, другая<br \/>\nв новостях, хотя должны быть поближе к глазам пользователя.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/238315_1000.jpg\" width=\"1000\" height=\"336\" alt=\"\" \/>\n<\/div>\n<p>3) Слева несколько по-настоящему нужных разделов из плиточного меню (помните<br \/>\nвверху такие синие плашки были? ну так вот). Раздел «Новости» трансформировался<br \/>\nв раздел «Актуально». Количество инфы снизилось, что-то я выбросил совсем, что-то<br \/>\nбудет появляться в процессе поиска и покупки билетов. Фактоид стал заметнее и обрел<br \/>\nновый облик, в соответствии с фирменным стилем.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/238455_1000.jpg\" width=\"1000\" height=\"375\" alt=\"\" \/>\n<\/div>\n<p>4) Внизу у нас способы оплаты и контакты.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/231417_1000.jpg\" width=\"1000\" height=\"423\" alt=\"\" \/>\n<\/div>\n<p>Вот и все.. Хотя нет. Не все. Давайте заглянем правде в глаза — мой вариант<br \/>\nполное говно. Конструкция говно, форма ввода инфы слабая, раздел «Актуально»<br \/>\nвообще никому не упал — зачем мне знать про какой-то рейс Гомель-Москва-Теплый<br \/>\nстан, если я зашел за билетами до Фаниполя? Факу, договору оферты и другим<br \/>\nотщепенцам место только в подвале.<\/p>\n<p>Выношу вердикт:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"604\" data-ratio=\"1.0117252931323\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/238979_800.jpg\" width=\"604\" height=\"597\" alt=\"\" \/>\n<img src=\"https:\/\/pereverstal.by\/pictures\/231620_1000.jpg\" width=\"641\" height=\"821\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Вот новый вариант.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"854\" data-ratio=\"0.86437246963563\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/231894_1000.jpg\" width=\"854\" height=\"988\" alt=\"\" \/>\n<img src=\"https:\/\/pereverstal.by\/pictures\/232593_900.jpg\" width=\"900\" height=\"547\" alt=\"\" \/>\n<img src=\"https:\/\/pereverstal.by\/pictures\/232756_900.jpg\" width=\"749\" height=\"757\" alt=\"\" \/>\n<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"900\" data-ratio=\"2.5\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/233008_900.jpg\" width=\"900\" height=\"360\" alt=\"\" \/>\n<img src=\"https:\/\/pereverstal.by\/pictures\/233295_900.jpg\" width=\"900\" height=\"324\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Совсем другой дело. Теперь все гораздо красивее и чище. Инфолиния, фактоид, форма<br \/>\nпоиска на своих местах, в подвале теперь подметено, вымыт пол и вкусно пахнет.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/pereverstal.by\/pictures\/380510_800.jpg\" width=\"692\" height=\"800\" alt=\"\" \/>\n<\/div>\n<p>Грейт ворк. Спасибо что дошли до конца. В следующей серии мы будем регистрироваться<br \/>\nна сайте, искать нужные рейсы и покупать на них билеты.<\/p>\n<p>Пока!<\/p>\n",
            "date_published": "2018-11-24T18:24:32+03:00",
            "date_modified": "2018-11-24T13:52:48+03:00",
            "image": "https:\/\/pereverstal.by\/pictures\/227044_1000.jpg",
            "_date_published_rfc2822": "Sat, 24 Nov 2018 18:24:32 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "71",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/pereverstal.by\/pictures\/227044_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/235767_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/227931_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/235835_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/236043_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/225566_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/227079_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/227543_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/227801_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/236293_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/229299_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/236926_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/237406_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/228582_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/228258_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/228746_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/228994_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/237747_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/237872_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/238315_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/238455_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/231417_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/238979_800.jpg",
                    "https:\/\/pereverstal.by\/pictures\/231620_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/231894_1000.jpg",
                    "https:\/\/pereverstal.by\/pictures\/232593_900.jpg",
                    "https:\/\/pereverstal.by\/pictures\/232756_900.jpg",
                    "https:\/\/pereverstal.by\/pictures\/233008_900.jpg",
                    "https:\/\/pereverstal.by\/pictures\/233295_900.jpg",
                    "https:\/\/pereverstal.by\/pictures\/380510_800.jpg"
                ]
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}