{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: переверстал", "home_page_url": "https:\/\/pereverstal.by\/tags\/pereverstal\/", "feed_url": "https:\/\/pereverstal.by\/tags\/pereverstal\/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" ] } }, { "id": "25", "url": "https:\/\/pereverstal.by\/all\/platnaya-parkovka-2\/", "title": "Платная парковка", "content_html": "

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

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

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

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

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

        Вот что получилось у меня<\/h2>\n
        \n\"\"\n<\/div>\n

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

        Версия для любопытных<\/h2>\n
        \n\"\"\n<\/div>\n

        А вот как макет выглядел бы в жизни<\/h2>\n
        \n\"\"\n<\/div>\n

        Как-то так. Всем до скорых!<\/p>\n", "date_published": "2018-11-24T18:21:04+03:00", "date_modified": "2018-10-15T11:58:02+03:00", "image": "https:\/\/pereverstal.by\/pictures\/83536_800.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 18:21:04 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "25", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/83536_800.jpg", "https:\/\/pereverstal.by\/pictures\/83883_800.jpg", "https:\/\/pereverstal.by\/pictures\/84362_800.jpg", "https:\/\/pereverstal.by\/pictures\/84836_800.jpg", "https:\/\/pereverstal.by\/pictures\/85042_800.jpg" ] } }, { "id": "19", "url": "https:\/\/pereverstal.by\/all\/trebuetsya-dvornik\/", "title": "Требуется дворник", "content_html": "

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

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

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

        \n\"\"\n<\/div>\n", "date_published": "2018-11-24T17:29:54+03:00", "date_modified": "2018-10-15T11:20:26+03:00", "image": "https:\/\/pereverstal.by\/pictures\/3592_600.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 17:29:54 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "19", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/3592_600.jpg", "https:\/\/pereverstal.by\/pictures\/416416_800.jpg" ] } }, { "id": "8", "url": "https:\/\/pereverstal.by\/all\/nazad-promote-this-entry-izbrannoe-izmenit-metki-podelitsya-stat\/", "title": "Объявление на подъезде — хотели как лучше, получилось как всегда", "content_html": "

        На своем подъезде недавно увидел вот это.<\/p>\n

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

        Перечитывал раза три. Долго думал.<\/p>\n

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

        Да, да, два заголовка. А знаете почему? А чтобы было П О Н Я Т Н О !<\/p>\n

        Думать для многих — это непозволительная роскошь.
        \nНапример о том, что случится, если в объявлении оставить
        \nтолько главное, без канцелярского обвеса?<\/p>\n

        Например так?<\/p>\n

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

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

        «В следующий раз будешь знать, как правильно писать объявление на подъезде, ирод!» —
        \nбудет орать ему вслед бабуля.<\/p>\n

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

        Кстати о заголовке. Обращение «Уважаемые жильцы» — это самый худший заголовок,
        \nкоторый может быть. У меня он рождает в сознании толпу крестьян, склонивших головы,
        \nперед своим барином, который собирается им объявить, что он облагает их новой податью.<\/p>\n

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

        Заголовок «Внимание!» — это банальный, набивший оскомину призыв,
        \nкоторый не работает также как и «Новинка!»<\/p>\n

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

        «Соседи!» — самый хороший призыв. Это слово говорит свой,
        \nзнакомый и родной человек. Сосед. У которого можно отсыпать соли,
        \nкоторого можно попросить помочь вынести диван. И неважно, что объявление
        \nписал не он — кому какое дело?<\/p>\n

        Или вы верите, что дед Мороз существует?<\/p>\n

        \n\"\"\n<\/div>\n", "date_published": "2018-10-05T00:00:12+03:00", "date_modified": "2018-10-04T23:59:56+03:00", "image": "https:\/\/pereverstal.by\/pictures\/385909_900.jpg", "_date_published_rfc2822": "Fri, 05 Oct 2018 00:00:12 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "8", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/385909_900.jpg", "https:\/\/pereverstal.by\/pictures\/386096_900.jpg", "https:\/\/pereverstal.by\/pictures\/387285_900.jpg", "https:\/\/pereverstal.by\/pictures\/386892_900.jpg", "https:\/\/pereverstal.by\/pictures\/386454_900.jpg", "https:\/\/pereverstal.by\/pictures\/386797_900.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }