4 заметки с тегом

переверстал

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

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

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

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

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

Вот он

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

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

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

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

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

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

«Например для беларуси» — просто отлично.

Ввожу номер своего мобильника. Получаю инструкцию.

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

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

Победа, зарегился!

Ок, возьмемся за переверстку.

Что нам нужно сделать

1) Сверстать две формы — регистрацию и вход на сайт.
2) Показать вариант страницы после авторизации.
3) Придумать какие функции будет содержать личный кабинет
и оформить все это дело.

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

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

  1. Итак, форма «Войти на сайт»

Если еще не зареген, то вот форма регистрации.

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

Объяснюсь.

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

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

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

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

  1. После авторизации в шапке можно будет увидеть вот такое:

Чуть крупнее

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

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

Пара слов скринов о том, как я делал эту страница и собственно сама страница

Вроде все.

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

До встречи.

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

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

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

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

2018   переверстал   тикетбасбай часть 2

Платная парковка

Привет, друг! Сегодня я буду переверстывать этот пис оф информационный
щит на платной парковке.

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

Кстати, забавно QR-код оторвался от надписи его поясняющей. Интересное решение.
Можно применить к примеру в паспортах — фотка на одной странице, фамилия
на следующей и так далее. А че?

Вот что получилось у меня

Честно говоря, я до последнего сомневался оставлять ли заголовок «Платная парковка»
и его английский аналог или нет. Ведь водители ориентируются по дорожным знакам,
а знак платной парковки тут как раз и присутствует. Но все же решил оставить
для пешеходов, вроде меня.

Версия для любопытных

А вот как макет выглядел бы в жизни

Как-то так. Всем до скорых!

2018   переверстал   платная парковка   щит

Требуется дворник

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

Я считаю, что это объявление должно выглядеть вот так.

2018   дворник   переверстал
Ранее Ctrl + ↓