https://pereverstal.by/tags/tiketbasbay-chast-2/ E2 (v3254; Aegea) 74 https://pereverstal.by/all/pereverstka-tiketbasa-ch-2-registraciya-lichny-kabinet-istoriya/ https://pereverstal.by/all/pereverstka-tiketbasa-ch-2-registraciya-lichny-kabinet-istoriya/ <p>Продолжаю переверстывать сайт тикетбаса. Маленькое вступление.<br /> Я как и многие терпеть не могу регистрироваться на сайтах.<br /> Сначала заполняешь всякие формы, пишешь никнейм, потом узнаешь<br /> что он занят, придумываешь другой, думаешь какой пароль вводить<br /> свой или придумать от балды, стоит ли называть свое имя и фамилию,<br /> адрес, почтовый индекс, номер телефона — паранойя-то не дремлет.</p> <p>Потом ты жмешь кнопку «регистрация» и узнаешь, что забыл поставить<br /> галку в поле «согласен с условиями» или не ввел где-то данные или ввел их не так,<br /> а значит нужно что-то переделывать или дописывать, или в самом клиническом<br /> случае вводить все заново. Это бесит страшно.</p> <p>Благодаря регистрации через соцсети в наше время всего этого дерьма<br /> можно избежать.<br /> Ах, 21 век.</p> <p>Теперь давайте разберем блок регистрации на сайте тикетбаса,<br /> который (вот так новость!) сверстан через жопу</p> <p>Вот он</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/261035_800.jpg" width="800" height="181" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/264779_800.jpg" width="800" height="532" alt="" /> </div> <p>Спасибо еще раз кнопкам соцсетей. Страшно представить,<br /> что в таком интерфейсе нужно было бы вводить данные и проходить<br /> все круги ада.</p> <p>А если нет аккаунта в соцсетях? Тогда пробуем регистрацию<br /> через мобильный телефон. С ней все немного.. нет много сложнее.</p> <p>Во-первых сразу, на входе, меня огорошили отличной новостью.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/262451_800.jpg" width="796" height="598" alt="" /> </div> <p>С точки зрения удобства пользования это можно сравнить, к примеру,<br /> с заказом пиццы. Вы звоните, заказываете горячую пиццу, а вам говорят,<br /> что нужно самому ее приехать и забрать.</p> <p>Или вы приехали на такси от вокзала до своего подъезда, а водитель<br /> предлагает вам самому посчитать сколько вы должны за проезд.<br /> Вот, мол, у нас такие тарифы за посадку, за каждый километр, за простой,<br /> вот тебе, дружище, калькулятор. Как это ты не считал количество<br /> пройденных километров?</p> <p>Ок, я не гордый. Идем дальше.<br /> Похоже круги этого наверстанного ада все-таки придется пройти.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/264638_800.jpg" width="798" height="594" alt="" /> </div> <p>«Например для беларуси» — просто отлично.</p> <p>Ввожу номер своего мобильника. Получаю инструкцию.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/264344_800.jpg" width="800" height="598" alt="" /> </div> <p>«*стоимость SMS сообщения согласно тарифам мобильного оператора» —<br /> первая в моей жизни платная регистрация на сайте.</p> <p>Зачем, спрашивается, я до этого вводил свой номер телефона, если с него все равно<br /> сейчас придет смс? Зачем, да почему. Есть время подумать, пока ожидаю<br /> «подтверждения системой Вашей SMS !!!».</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/262391_800.jpg" width="799" height="600" alt="" /> </div> <p>Победа, зарегился!</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/261810_800.jpg" width="611" height="220" alt="" /> </div> <p>Ок, возьмемся за переверстку.</p> <h2>Что нам нужно сделать</h2> <p>1) Сверстать две формы — регистрацию и вход на сайт.<br /> 2) Показать вариант страницы после авторизации.<br /> 3) Придумать какие функции будет содержать личный кабинет<br /> и оформить все это дело.</p> <p>На всякий случай комментарий для самых наблюдательных.<br /> В предыдущей версии главной страницы в шапке было две ссылки —<br /> «Войти» и «Регистрация».</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/271157_300.jpg" width="230" height="300" alt="" /> </div> <p>Но под конец работы над этой частью осталась только «Войти».</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/270917_300.jpg" width="215" height="300" alt="" /> </div> <ol start="1"> <li>Итак, форма «Войти на сайт»</li> </ol> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/277719_800.jpg" width="692" height="800" alt="" /> </div> <p>Если еще не зареген, то вот форма регистрации.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/277364_800.jpg" width="692" height="800" alt="" /> </div> <p>Да, я помню, что в начале статьи жаловался на необходимость региться<br /> и заполнять дурацкие формы на сайтах, а теперь сам предлагаю<br /> заполнить форму.</p> <p>Объяснюсь.</p> <p>Во-первых заполнение формы всегда можно обойти, воспользовавшись<br /> кнопками соцсетей.</p> <p>Во-вторых, несмотря на то, что регистрация по телефону может быть<br /> отличной альтернативой заполнению формы (ввел номер телефона,<br /> получил смс с паролем), а также в случае, когда отсутствует аккаунт в соцсетях,<br /> я, все же, рассматриваю все варианты развития событий, в том числе и отсутствие<br /> доступа к телефону (разрядился, разбился, нет денег на счету).</p> <p>Моя форма содержит небольшое количество полей, в ней доступен ввод<br /> данных в свободной форме, а также нет необходимости дублировать<br /> информацию и подтверждать регистрацию ссылкой.</p> <p>Зато имя и фамилия в дальнейшем будут автоматически вбиты в форму<br /> при оформлении билета при покупке! А номер телефона пригодится<br /> для восстановления пароля или, например, для смс-напоминания<br /> о предстоящей поездке. Ну и конечно же, его можно вводить<br /> при авторизации вместо почтового ящика.</p> <ol start="2"> <li>После авторизации в шапке можно будет увидеть вот такое:</li> </ol> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/267859_800.jpg" width="800" height="75" alt="" /> </div> <p>Чуть крупнее</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/268445_600.jpg" width="600" height="112" alt="" /> </div> <ol start="3"> <li>Мои билеты — здесь будут все оформленные, но пока не оплаченные билеты.<br /> Эту страницу я покажу в следующей части.</li> </ol> <p>История поездок — дополнительная фишка для пользователя.<br /> Люблю статистику и архивы. Через 5 лет интересно будет<br /> посмотреть куда ездил, сколько заплатил, сколько потратил денег,<br /> сколько намотал километров.</p> <p>Пара слов скринов о том, как я делал эту страница и собственно сама страница</p> <div class="e2-text-picture"> <div class="fotorama" data-width="800" data-ratio="1.203007518797"> <img src="https://pereverstal.by/pictures/275158_800.jpg" width="800" height="665" alt="" /> <img src="https://pereverstal.by/pictures/277943_800.jpg" width="800" height="746" alt="" /> <img src="https://pereverstal.by/pictures/276002_800.jpg" width="726" height="800" alt="" /> </div> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/276579_800.jpg" width="474" height="800" alt="" /> </div> <p>Вроде все.</p> <p>В следующей части мы будем покупать билет на автобус. Без боли и слез.</p> <p>До встречи.</p> <p>P.S. После написания статьи подумал, что в историю поездок<br /> нужно прикрутить сортировку данных, для более продуктивного<br /> и интересного поиска.</p> <p>К примеру узнать, куда была последняя поездка, сколько<br /> было поездок за определенный год, сколько раз ездил в определенный город.</p> <p>Также можно прикрутить конвертер валют, курс-то меняется,<br /> через 5 лет 127 BYN мало о чем скажут.</p> <p>Находить и исправлять ошибки, улучшать систему раз за разом —<br /> источник нескончаемого наслаждения.</p> Sat, 24 Nov 2018 18:24:37 +0300