{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: БЖД", "home_page_url": "https:\/\/pereverstal.by\/tags\/bzhd\/", "feed_url": "https:\/\/pereverstal.by\/tags\/bzhd\/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": "90", "url": "https:\/\/pereverstal.by\/all\/vagonnoe-menyu-2\/", "title": "Вагонное меню", "content_html": "

Привет, сегодня я переверстаю это вагонное меню.<\/p>\n

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

1.<\/h2>\n

Любую юридическую, справочную и иную инфу, не имеющую отношения к главному
\nконтенту лучше всегда скидывать в подвал, используя при этом мелкий кегль.
\nДа и только в тех случаях, когда без нее никак нельзя (ГОСТ, постановление министров,
\nнастойчивый клиент и т. п.). В остальных случаях от нее лучше избавляться<\/p>\n

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

2.<\/h2>\n
\n\"\"\n<\/div>\n

Робот детектед<\/p>\n

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

3.<\/h2>\n
\n\"\"\n<\/div>\n

Кстати, если продается Nescafe 3 в 1, то лучше так и писать, предупредив, что кофе будет
\nв другой упаковке<\/p>\n

4.<\/h2>\n
\n\"\"\n<\/div>\n

Whaat?<\/p>\n

5.<\/h2>\n
\n\"\"\n<\/div>\n

Робот детектед<\/p>\n

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

Поехали переверстывать.
\nКондитерские изделия заменим на классное слово «Сладости».
\nОтделим сладости от еды.<\/p>\n

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

Надо постель отделить от меню. Все-таки или поесть или поспать.<\/p>\n

Рисую картинки<\/p>\n

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

Верстаю дальше<\/p>\n

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

Готово!<\/p>\n

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

Картинка по-больше<\/p>\n

\n\"\"\n<\/div>\n", "date_published": "2019-02-20T16:14:58+03:00", "date_modified": "2019-02-20T16:14:22+03:00", "image": "https:\/\/pereverstal.by\/pictures\/robot-1.jpg", "_date_published_rfc2822": "Wed, 20 Feb 2019 16:14:58 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "90", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/robot-1.jpg", "https:\/\/pereverstal.by\/pictures\/robot-2.jpg", "https:\/\/pereverstal.by\/pictures\/ishodnik.jpg", "https:\/\/pereverstal.by\/pictures\/Screenshot_4.jpg", "https:\/\/pereverstal.by\/pictures\/Screenshot_2.jpg", "https:\/\/pereverstal.by\/pictures\/robot-1-1.jpg", "https:\/\/pereverstal.by\/pictures\/Screenshot_1.jpg", "https:\/\/pereverstal.by\/pictures\/Screenshot_5.jpg", "https:\/\/pereverstal.by\/pictures\/Screenshot_3.jpg", "https:\/\/pereverstal.by\/pictures\/robot-2-1.jpg", "https:\/\/pereverstal.by\/pictures\/image_3.jpg", "https:\/\/pereverstal.by\/pictures\/2_3.jpg", "https:\/\/pereverstal.by\/pictures\/pict.jpg", "https:\/\/pereverstal.by\/pictures\/6.jpg", "https:\/\/pereverstal.by\/pictures\/7-4.jpg", "https:\/\/pereverstal.by\/pictures\/7-5.jpg" ] } }, { "id": "81", "url": "https:\/\/pereverstal.by\/all\/elektronny-bilet-bzhd\/", "title": "Электронный билет БЖД", "content_html": "
\n\"\"\n<\/div>\n

В июле я ездил в Брест на полдня. Билеты впервые купил на сайте rw.by<\/p>\n

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

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

Ну да, ну да. А чего собственно можно было ожидать от БЖД?
\nКрасивой, понятной, удобной верстки?<\/p>\n

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

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

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

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

А вообще, мы в 21 веке живем. Можно и на смартфоне принести, черт побери.<\/p>\n

Ок, перейдем к билету. Посмотрим на него сверху вниз<\/p>\n

1)<\/h2>\n

«БЛАНК ЭЛЕКТРОННОГО ПРОЕЗДНОГО ДОКУМЕ.... БЛА БЛА БЛА»<\/p>\n

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

2)<\/h2>\n

Номер билета и номер заказа подозрительно похожи.<\/p>\n

3)<\/h2>\n

Зачем указан «год совершения поездки»?
\nЧтобы нельзя было воспользоваться билетом через год? А номер билета для чего?
\nА дата покупки еще зачем?<\/p>\n

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

4)<\/h2>\n

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

5)<\/h2>\n

Не понимаю до сих пор, почему при транслитерации используется тарашкевица?
\nНеужели иностранцам понятно как это читать? Почему нельзя написать
\nMINSK PASAZHYRSKY? Или BREST CENTRALNY?<\/p>\n

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

6)<\/h2>\n

Спасибо, поржал<\/p>\n

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

7)<\/h2>\n

Заголовок оторван от направления на расстояние в миллионы световых лет.<\/p>\n

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

8)<\/h2>\n

Вот какого хера тут такая дыра? А?<\/p>\n

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

Перейдем к нижней части<\/p>\n

9)<\/h2>\n

Дата оформления и этап завершения электронной регистрации,
\nкак мне показалось, это одно и тоже.<\/p>\n

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

10)<\/h2>\n

Охуенно нужная информация.<\/p>\n

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

11)<\/h2>\n

Вот это вот нужно показывать на сайте при оформлении заказа.
\nЧто мне с этим сейчас делать? Нарисовать чек бокс и вписать в него галку?<\/p>\n

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

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

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

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

Номер билета и дата оформления должны быть в шапке, на видном месте.
\nЧуть что при споре за место — это самая нужная инфа.<\/p>\n

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

Слишком много инфы, пора избавляться от лишнего.<\/p>\n

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

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

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

В шапку также идет крайняя дата отмены регистрации.
\nПолучается она такой (слева-направо):
\n1) Лого,
\n2) Номер билета,
\n3) Дата регистрации,
\n4) Крайняя дата отмены<\/p>\n

Все вполне логично.<\/p>\n

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

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

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

По итогу лишняя инфа ушла, композиция стала более уверенной и красивой.
\nНо пока это не то, что нужно.<\/p>\n

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

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

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

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

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

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

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

Продолжаю править мелочи.<\/p>\n

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

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

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

Нет, вот теперь готово.<\/p>\n

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

И еще картинка для любопытных<\/p>\n

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

Та дааа!<\/p>\n

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

Теперь все.<\/p>\n", "date_published": "2018-11-24T18:30:55+03:00", "date_modified": "2018-11-24T18:28:32+03:00", "image": "https:\/\/pereverstal.by\/pictures\/464580_900.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 18:30:55 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "81", "_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\/464580_900.jpg", "https:\/\/pereverstal.by\/pictures\/464814_900.jpg", "https:\/\/pereverstal.by\/pictures\/479543_800.jpg", "https:\/\/pereverstal.by\/pictures\/467942_800.jpg", "https:\/\/pereverstal.by\/pictures\/479267_800.jpg", "https:\/\/pereverstal.by\/pictures\/468170_800.jpg", "https:\/\/pereverstal.by\/pictures\/468334_800.jpg", "https:\/\/pereverstal.by\/pictures\/468652_800.png", "https:\/\/pereverstal.by\/pictures\/468768_800.jpg", "https:\/\/pereverstal.by\/pictures\/469299_800.jpg", "https:\/\/pereverstal.by\/pictures\/469610_800.jpg", "https:\/\/pereverstal.by\/pictures\/470672_800.jpg", "https:\/\/pereverstal.by\/pictures\/470994_800.jpg", "https:\/\/pereverstal.by\/pictures\/471056_800.jpg", "https:\/\/pereverstal.by\/pictures\/472054_800.jpg", "https:\/\/pereverstal.by\/pictures\/472486_800.jpg", "https:\/\/pereverstal.by\/pictures\/472593_800.jpg", "https:\/\/pereverstal.by\/pictures\/473000_800.jpg", "https:\/\/pereverstal.by\/pictures\/473199_800.jpg", "https:\/\/pereverstal.by\/pictures\/473529_800.jpg", "https:\/\/pereverstal.by\/pictures\/473825_800.jpg", "https:\/\/pereverstal.by\/pictures\/477989_800.jpg", "https:\/\/pereverstal.by\/pictures\/474079_800.jpg", "https:\/\/pereverstal.by\/pictures\/474334_800.jpg", "https:\/\/pereverstal.by\/pictures\/474483_800.jpg", "https:\/\/pereverstal.by\/pictures\/474797_800.jpg", "https:\/\/pereverstal.by\/pictures\/474974_800.jpg", "https:\/\/pereverstal.by\/pictures\/475391_800.jpg", "https:\/\/pereverstal.by\/pictures\/475812_800.jpg", "https:\/\/pereverstal.by\/pictures\/476047_800.jpg", "https:\/\/pereverstal.by\/pictures\/476320_800.jpg", "https:\/\/pereverstal.by\/pictures\/476510_800.jpg", "https:\/\/pereverstal.by\/pictures\/476675_800.jpg", "https:\/\/pereverstal.by\/pictures\/480609_800.jpg", "https:\/\/pereverstal.by\/pictures\/481170_800.png", "https:\/\/pereverstal.by\/pictures\/480447_800.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }