{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: тикетбасбай часть 2", "home_page_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-2\/", "feed_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-2\/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": "74", "url": "https:\/\/pereverstal.by\/all\/pereverstka-tiketbasa-ch-2-registraciya-lichny-kabinet-istoriya\/", "title": "Переверстка тикетбаса, часть 2. Регистрация, личный кабинет, история поездок", "content_html": "

Продолжаю переверстывать сайт тикетбаса. Маленькое вступление.
\nЯ как и многие терпеть не могу регистрироваться на сайтах.
\nСначала заполняешь всякие формы, пишешь никнейм, потом узнаешь
\nчто он занят, придумываешь другой, думаешь какой пароль вводить
\nсвой или придумать от балды, стоит ли называть свое имя и фамилию,
\nадрес, почтовый индекс, номер телефона — паранойя-то не дремлет.<\/p>\n

Потом ты жмешь кнопку «регистрация» и узнаешь, что забыл поставить
\nгалку в поле «согласен с условиями» или не ввел где-то данные или ввел их не так,
\nа значит нужно что-то переделывать или дописывать, или в самом клиническом
\nслучае вводить все заново. Это бесит страшно.<\/p>\n

Благодаря регистрации через соцсети в наше время всего этого дерьма
\nможно избежать.
\nАх, 21 век.<\/p>\n

Теперь давайте разберем блок регистрации на сайте тикетбаса,
\nкоторый (вот так новость!) сверстан через жопу<\/p>\n

Вот он<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n

Спасибо еще раз кнопкам соцсетей. Страшно представить,
\nчто в таком интерфейсе нужно было бы вводить данные и проходить
\nвсе круги ада.<\/p>\n

А если нет аккаунта в соцсетях? Тогда пробуем регистрацию
\nчерез мобильный телефон. С ней все немного.. нет много сложнее.<\/p>\n

Во-первых сразу, на входе, меня огорошили отличной новостью.<\/p>\n

\n\"\"\n<\/div>\n

С точки зрения удобства пользования это можно сравнить, к примеру,
\nс заказом пиццы. Вы звоните, заказываете горячую пиццу, а вам говорят,
\nчто нужно самому ее приехать и забрать.<\/p>\n

Или вы приехали на такси от вокзала до своего подъезда, а водитель
\nпредлагает вам самому посчитать сколько вы должны за проезд.
\nВот, мол, у нас такие тарифы за посадку, за каждый километр, за простой,
\nвот тебе, дружище, калькулятор. Как это ты не считал количество
\nпройденных километров?<\/p>\n

Ок, я не гордый. Идем дальше.
\nПохоже круги этого наверстанного ада все-таки придется пройти.<\/p>\n

\n\"\"\n<\/div>\n

«Например для беларуси» — просто отлично.<\/p>\n

Ввожу номер своего мобильника. Получаю инструкцию.<\/p>\n

\n\"\"\n<\/div>\n

«*стоимость SMS сообщения согласно тарифам мобильного оператора» —
\nпервая в моей жизни платная регистрация на сайте.<\/p>\n

Зачем, спрашивается, я до этого вводил свой номер телефона, если с него все равно
\nсейчас придет смс? Зачем, да почему. Есть время подумать, пока ожидаю
\n«подтверждения системой Вашей SMS !!!».<\/p>\n

\n\"\"\n<\/div>\n

Победа, зарегился!<\/p>\n

\n\"\"\n<\/div>\n

Ок, возьмемся за переверстку.<\/p>\n

Что нам нужно сделать<\/h2>\n

1) Сверстать две формы — регистрацию и вход на сайт.
\n2) Показать вариант страницы после авторизации.
\n3) Придумать какие функции будет содержать личный кабинет
\nи оформить все это дело.<\/p>\n

На всякий случай комментарий для самых наблюдательных.
\nВ предыдущей версии главной страницы в шапке было две ссылки —
\n«Войти» и «Регистрация».<\/p>\n

\n\"\"\n<\/div>\n

Но под конец работы над этой частью осталась только «Войти».<\/p>\n

\n\"\"\n<\/div>\n
    \n
  1. Итак, форма «Войти на сайт»<\/li>\n<\/ol>\n
    \n\"\"\n<\/div>\n

    Если еще не зареген, то вот форма регистрации.<\/p>\n

    \n\"\"\n<\/div>\n

    Да, я помню, что в начале статьи жаловался на необходимость региться
    \nи заполнять дурацкие формы на сайтах, а теперь сам предлагаю
    \nзаполнить форму.<\/p>\n

    Объяснюсь.<\/p>\n

    Во-первых заполнение формы всегда можно обойти, воспользовавшись
    \nкнопками соцсетей.<\/p>\n

    Во-вторых, несмотря на то, что регистрация по телефону может быть
    \nотличной альтернативой заполнению формы (ввел номер телефона,
    \nполучил смс с паролем), а также в случае, когда отсутствует аккаунт в соцсетях,
    \nя, все же, рассматриваю все варианты развития событий, в том числе и отсутствие
    \nдоступа к телефону (разрядился, разбился, нет денег на счету).<\/p>\n

    Моя форма содержит небольшое количество полей, в ней доступен ввод
    \nданных в свободной форме, а также нет необходимости дублировать
    \nинформацию и подтверждать регистрацию ссылкой.<\/p>\n

    Зато имя и фамилия в дальнейшем будут автоматически вбиты в форму
    \nпри оформлении билета при покупке! А номер телефона пригодится
    \nдля восстановления пароля или, например, для смс-напоминания
    \nо предстоящей поездке. Ну и конечно же, его можно вводить
    \nпри авторизации вместо почтового ящика.<\/p>\n

      \n
    1. После авторизации в шапке можно будет увидеть вот такое:<\/li>\n<\/ol>\n
      \n\"\"\n<\/div>\n

      Чуть крупнее<\/p>\n

      \n\"\"\n<\/div>\n
        \n
      1. Мои билеты — здесь будут все оформленные, но пока не оплаченные билеты.
        \nЭту страницу я покажу в следующей части.<\/li>\n<\/ol>\n

        История поездок — дополнительная фишка для пользователя.
        \nЛюблю статистику и архивы. Через 5 лет интересно будет
        \nпосмотреть куда ездил, сколько заплатил, сколько потратил денег,
        \nсколько намотал километров.<\/p>\n

        Пара слов скринов о том, как я делал эту страница и собственно сама страница<\/p>\n

        \n
        \n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n
        \n\"\"\n<\/div>\n

        Вроде все.<\/p>\n

        В следующей части мы будем покупать билет на автобус. Без боли и слез.<\/p>\n

        До встречи.<\/p>\n

        P.S. После написания статьи подумал, что в историю поездок
        \nнужно прикрутить сортировку данных, для более продуктивного
        \nи интересного поиска.<\/p>\n

        К примеру узнать, куда была последняя поездка, сколько
        \nбыло поездок за определенный год, сколько раз ездил в определенный город.<\/p>\n

        Также можно прикрутить конвертер валют, курс-то меняется,
        \nчерез 5 лет 127 BYN мало о чем скажут.<\/p>\n

        Находить и исправлять ошибки, улучшать систему раз за разом —
        \nисточник нескончаемого наслаждения.<\/p>\n", "date_published": "2018-11-24T18:24:37+03:00", "date_modified": "2018-11-24T13:53:31+03:00", "image": "https:\/\/pereverstal.by\/pictures\/261035_800.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 18:24:37 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "74", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/pereverstal.by\/pictures\/261035_800.jpg", "https:\/\/pereverstal.by\/pictures\/264779_800.jpg", "https:\/\/pereverstal.by\/pictures\/262451_800.jpg", "https:\/\/pereverstal.by\/pictures\/264638_800.jpg", "https:\/\/pereverstal.by\/pictures\/264344_800.jpg", "https:\/\/pereverstal.by\/pictures\/262391_800.jpg", "https:\/\/pereverstal.by\/pictures\/261810_800.jpg", "https:\/\/pereverstal.by\/pictures\/271157_300.jpg", "https:\/\/pereverstal.by\/pictures\/270917_300.jpg", "https:\/\/pereverstal.by\/pictures\/277719_800.jpg", "https:\/\/pereverstal.by\/pictures\/277364_800.jpg", "https:\/\/pereverstal.by\/pictures\/267859_800.jpg", "https:\/\/pereverstal.by\/pictures\/268445_600.jpg", "https:\/\/pereverstal.by\/pictures\/275158_800.jpg", "https:\/\/pereverstal.by\/pictures\/277943_800.jpg", "https:\/\/pereverstal.by\/pictures\/276002_800.jpg", "https:\/\/pereverstal.by\/pictures\/276579_800.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }