https://pereverstal.by/tags/bzhd/ E2 (v3254; Aegea) 90 https://pereverstal.by/all/vagonnoe-menyu-2/ https://pereverstal.by/all/vagonnoe-menyu-2/ <p>Привет, сегодня я переверстаю это вагонное меню.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/ishodnik.jpg" width="2560" height="1920" alt="" /> </div> <h2>1.</h2> <p>Любую юридическую, справочную и иную инфу, не имеющую отношения к главному<br /> контенту лучше всегда скидывать в подвал, используя при этом мелкий кегль.<br /> Да и только в тех случаях, когда без нее никак нельзя (ГОСТ, постановление министров,<br /> настойчивый клиент и т. п.). В остальных случаях от нее лучше избавляться</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Screenshot_4.jpg" width="1444" height="817" alt="" /> </div> <h2>2.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Screenshot_2.jpg" width="1141" height="718" alt="" /> </div> <p>Робот детектед</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/robot-1-1.jpg" width="1047" height="674" alt="" /> </div> <h2>3.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Screenshot_1.jpg" width="1729" height="269" alt="" /> </div> <p>Кстати, если продается Nescafe 3 в 1, то лучше так и писать, предупредив, что кофе будет<br /> в другой упаковке</p> <h2>4.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Screenshot_5.jpg" width="1009" height="374" alt="" /> </div> <p>Whaat?</p> <h2>5.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Screenshot_3.jpg" width="1510" height="228" alt="" /> </div> <p>Робот детектед</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/robot-2-1.jpg" width="1047" height="674" alt="" /> </div> <p>Поехали переверстывать.<br /> Кондитерские изделия заменим на классное слово «Сладости».<br /> Отделим сладости от еды.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/image_3.jpg" width="765" height="607" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/2_3.jpg" width="842" height="595" alt="" /> </div> <p>Надо постель отделить от меню. Все-таки или поесть или поспать.</p> <p>Рисую картинки</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/pict.jpg" width="944" height="740" alt="" /> </div> <p>Верстаю дальше</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/6.jpg" width="842" height="595" alt="" /> </div> <p>Готово!</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/7-4.jpg" width="842" height="595" alt="" /> </div> <p>Картинка по-больше</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/7-5.jpg" width="2339" height="1654" alt="" /> </div> Wed, 20 Feb 2019 16:14:58 +0300 81 https://pereverstal.by/all/elektronny-bilet-bzhd/ https://pereverstal.by/all/elektronny-bilet-bzhd/ <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/479543_800.jpg" width="640" height="265" alt="" /> </div> <p>В июле я ездил в Брест на полдня. Билеты впервые купил на сайте rw.by</p> <p>После короткой процедуры выбора направления, дат, ввода фамилии<br /> и данных карты сайт выплюнул мне вот это</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/467942_800.jpg" width="562" height="800" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/479267_800.jpg" width="236" height="284" alt="" /> </div> <p>Ну да, ну да. А чего собственно можно было ожидать от БЖД?<br /> Красивой, понятной, удобной верстки?</p> <p>Надо сказать, что этот билет можно было не печатать,<br /> а просто прийти на посадку с паспортом — этого вполне достаточно.</p> <p>Зачем тогда этот билет? Ну во-первых — подтверждение покупки.<br /> Если вы купите в магазине маленький пакет, вам все равно напечатают чек —<br /> такие правила, ребята.</p> <p>Во-вторых (мое мнение) билет все же стоит печатать и брать с собой<br /> на случай, если на вашем месте окажется какой-нибудь тип,<br /> который будет утверждать, что именно на это место он купил билет.<br /> Ваш распечатанный билет будет лишним аргументом. Короче, хотите<br /> уверенно сесть и доехать — распечатайте билет, это недорого.</p> <p>Да, и для отмены поездки и возврата денег, эта бумажка придется как нельзя кстати.</p> <p>А вообще, мы в 21 веке живем. Можно и на смартфоне принести, черт побери.</p> <p>Ок, перейдем к билету. Посмотрим на него сверху вниз</p> <h2>1)</h2> <p>«БЛАНК ЭЛЕКТРОННОГО ПРОЕЗДНОГО ДОКУМЕ.... БЛА БЛА БЛА»</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/468170_800.jpg" width="800" height="129" alt="" /> </div> <h2>2)</h2> <p>Номер билета и номер заказа подозрительно похожи.</p> <h2>3)</h2> <p>Зачем указан «год совершения поездки»?<br /> Чтобы нельзя было воспользоваться билетом через год? А номер билета для чего?<br /> А дата покупки еще зачем?</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/468334_800.jpg" width="800" height="465" alt="" /> </div> <h2>4)</h2> <p>«Кол-во пассажиров 1». Проверено — если купить два билета,<br /> то сайт отрыгнет два отдельных листа. На каждом будет написано кол-во пассажиров 1.<br /> Напрашивается вопрос, если для каждого пассажира формируется персональный билет,<br /> то зачем писать очевидное число пассажиров?</p> <h2>5)</h2> <p>Не понимаю до сих пор, почему при транслитерации используется тарашкевица?<br /> Неужели иностранцам понятно как это читать? Почему нельзя написать<br /> MINSK PASAZHYRSKY? Или BREST CENTRALNY?</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/468652_800.png" width="800" height="93" alt="" /> </div> <h2>6)</h2> <p>Спасибо, поржал</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/468768_800.jpg" width="702" height="369" alt="" /> </div> <h2>7)</h2> <p>Заголовок оторван от направления на расстояние в миллионы световых лет.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/469299_800.jpg" width="800" height="329" alt="" /> </div> <h2>8)</h2> <p>Вот какого хера тут такая дыра? А?</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/469610_800.jpg" width="269" height="139" alt="" /> </div> <p>Перейдем к нижней части</p> <h2>9)</h2> <p>Дата оформления и этап завершения электронной регистрации,<br /> как мне показалось, это одно и тоже.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/470672_800.jpg" width="800" height="623" alt="" /> </div> <h2>10)</h2> <p>Охуенно нужная информация.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/470994_800.jpg" width="800" height="623" alt="" /> </div> <h2>11)</h2> <p>Вот это вот нужно показывать на сайте при оформлении заказа.<br /> Что мне с этим сейчас делать? Нарисовать чек бокс и вписать в него галку?</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/471056_800.jpg" width="800" height="623" alt="" /> </div> <p>Ok, немного разобрались со структурой документа.<br /> Огрехи верстки будем исправлять в процессе.</p> <p>Прежде чем переверстывать, для начала нужно разобраться с композицией и структурой<br /> будущего макета. Для этого я возьму первый попавшийся шрифт и начну искать нужную связь<br /> между формой и смыслом</p> <div class="e2-text-picture"> <div class="fotorama" data-width="565" data-ratio="0.70625"> <img src="https://pereverstal.by/pictures/472054_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/472486_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/472593_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/473000_800.jpg" width="565" height="800" alt="" /> </div> </div> <p>Номер билета и дата оформления должны быть в шапке, на видном месте.<br /> Чуть что при споре за место — это самая нужная инфа.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="565" data-ratio="0.70625"> <img src="https://pereverstal.by/pictures/473199_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/473529_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/473825_800.jpg" width="565" height="800" alt="" /> </div> </div> <p>Слишком много инфы, пора избавляться от лишнего.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="800" data-ratio="1.0854816824966"> <img src="https://pereverstal.by/pictures/477989_800.jpg" width="800" height="737" alt="" /> <img src="https://pereverstal.by/pictures/474079_800.jpg" width="565" height="800" alt="" /> </div> </div> <p>Внезапно вспоминаю, что текст с «Подтверждаю, что с правилами...» должен быть на сайте,<br /> а тут он теряет всякий смысл, а значит от него можно избавиться.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="565" data-ratio="0.70625"> <img src="https://pereverstal.by/pictures/474334_800.jpg" width="565" height="800" alt="" /> <img src="https://pereverstal.by/pictures/474483_800.jpg" width="565" height="800" alt="" /> </div> </div> <p>В шапку также идет крайняя дата отмены регистрации.<br /> Получается она такой (слева-направо):<br /> 1) Лого,<br /> 2) Номер билета,<br /> 3) Дата регистрации,<br /> 4) Крайняя дата отмены</p> <p>Все вполне логично.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/474797_800.jpg" width="565" height="800" alt="" /> </div> <p>Пробую дублировать инфу про необходимость взять паспорт.<br /> Кстати, как вы заметили, пробую также на одном билете указывать всех пассажиров,<br /> чтобы не плодить кучу листов.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/474974_800.jpg" width="565" height="800" alt="" /> </div> <p>По итогу лишняя инфа ушла, композиция стала более уверенной и красивой.<br /> Но пока это не то, что нужно.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/475391_800.jpg" width="565" height="800" alt="" /> </div> <p>Вроде нашел нужную композицию. Подбираю нужный шрифт, начинаю верстать</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/475812_800.jpg" width="565" height="800" alt="" /> </div> <p>Делаю блок с основной инфой на плашке в виде билета —<br /> в нужный момент, когда опаздываешь и счет идет на секунды, инфа про номер<br /> поезда и вагона должна выделяться среди всего остального, чтобы сразу<br /> ее можно было считать, не тратя драгоценное время на поиски.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/476047_800.jpg" width="565" height="800" alt="" /> </div> <p>Направление движения тоже помещаю на плашку.<br /> Теперь этот отдельный, заметный блок включает все что может<br /> понадобиться на вокзале, в режиме «здесь и сейчас»</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/476320_800.jpg" width="565" height="800" alt="" /> </div> <p>Продолжаю править мелочи.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/476510_800.jpg" width="565" height="800" alt="" /> </div> <p>Прихожу к выводу, что все-таки правильной схемой<br /> будет «один пассажир — один билет». Вот. Вроде готово..</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/476675_800.jpg" width="565" height="800" alt="" /> </div> <p>Нет, вот теперь готово.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/480609_800.jpg" width="565" height="800" alt="" /> </div> <p>И еще картинка для любопытных</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/481170_800.png" width="561" height="800" alt="" /> </div> <p>Та дааа!</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/480447_800.jpg" width="800" height="679" alt="" /> </div> <p>Теперь все.</p> Sat, 24 Nov 2018 18:30:55 +0300