{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом процесс",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/process\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/process\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "4851",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/driving-tests-process-1\/",
            "title": "Процесс создания логотипа Драйвинг-тестов. Часть 1",
            "content_html": "<p>Напомню, что «Драйвинг-тесты» — сайт, помогающий подготовиться к экзаменам по вождению в Америке. Я сделал логотип и разные штуки. См. <a href=\"https:\/\/ilyabirman.ru\/projects\/driving-tests\/\">в «Проектах»<\/a>:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/ilyabirman.ru\/projects\/driving-tests\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/driving-tests@2x.png\" width=\"1200\" height=\"540\" alt=\"\" \/>\n<\/a><\/div>\n<p>Сегодня — о начале проекта и первой неделе работы.<\/p>\n<p>Клиент приходит за логотипом для сайта подготовки к экзамену на права в Штатах. Но зачем сайту логотип? В ходе разговора выясняется, что клиент хочет, чтобы логотип был у людей в голове и ассоциировался с качественной подготовкой к экзамену. Но люди сдают на права раз в жизни, возвращающихся клиентов не бывает. Офлайна тоже никакого нет. Непонятно, как логотип будет кого-то приводить, если те, кто хоть раз его видели, уже не нуждаются в услугах сайта. Клиент говорит, что у людей должен быть повод рассказать о сайте другим, в том числе после того, как тест уже сдан. Чтобы человек на вопрос «А ты как готовился?» мог вспомнить сайт, а не просто говорил, что «нагуглил какие-то тесты».<\/p>\n<p>Мне кажется, чтобы что-то осталось в голове, логотипа мало: даже если человек его запомнит, вряд ли куда-то понесёт. Пишу клиенту:<\/p>\n<blockquote>\n<p>Обычно для запоминаемости одного логотипа мало. Вместе с ним делают элементы фирменного стиля или айдентики, при этом имеются в виду способы оформления визиток, вывесок или, скажем, формы сотрудников. В нашем случае всего этого не предполагается.<\/p>\n<p>Но если мы хотим добиться запоминаемости и узнаваемости, можно использовать тот факт, что люди проводят на сайте значительное время, проходя сами тесты. Тесты могли бы работать на узнаваемость логотипа, если бы графического языка логотипа хватало на создание элементов теста: галочки правильного ответа, крестика неправильного ответа, ещё каких-то штук, которые появляются при прохождении теста. Предлагаю также собственную иконка подсказки до ответа.<\/p>\n<p>Вы также рассказывали о разных режимах тестов — по числу вопросов или способу их подбора; о режиме экзамена. Упоминали «марафон», когда вопрос повторяют, пока не ответишь правильно. Это тоже можно забрендировать. В качестве примера тут сразу приходит в голову Эпл-вотч, где есть три кольца для обозначения прогресса активности в течение дня. Сами эти три кольца — не логотип часов, но очень узнаваемый символ. Или вот у них так есть разные виды тренировок: свободная, на время, на расстояние, на определённое число калорий и т. д. У всех у них есть свои цвета, которые потом сохраняются в графике тренировок, и ты их тоже узнаёшь.<\/p>\n<p>Хоть офлайна и не предполагается, но можно подумать нам какими-то приятными штучками, которые можно было бы давать премиум-пользователям или как-нибудь разыгрывать. Наклейки, футболки, значки. Если кто-то сдал экзамен благодаря сайту, ему вполне может быть приятно что-нибудь такое использовать.<\/p>\n<\/blockquote>\n<p>Идея нравится. Улаживаем формальности, начинаем работу.<\/p>\n<p>Сначала смотрю, что вообще бывает в мире автомобилей: знаки, дороги, машины. Пытаюсь составить из букв D и T что угодно автомобильное. АКПП с выбранной D и галочкой, какой-то руль из букв D и T, дороги-развязки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-1@2x.jpg\" width=\"920\" height=\"724\" alt=\"\" \/>\n<\/div>\n<p>Вспоминаю про щиты с американских дорожных знаков.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-2@2x.jpg\" width=\"915\" height=\"416\" alt=\"\" \/>\n<\/div>\n<p>Они очень вычурные, но сам щит кажется клёвым символом, это же ещё и герб, а герб часто фигачат на всякие дипломы и сертификаты. Образование!<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-3@2x.jpg\" width=\"920\" height=\"666\" alt=\"\" \/>\n<\/div>\n<p>Пробую поставить какую-то конструкцию в упрощённый щит-знак (чтобы без воинственности):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-4@2x.jpg\" width=\"920\" height=\"495\" alt=\"\" \/>\n<\/div>\n<p>Кажется, что что-то тут есть, но пока не знаю, как ещё запутать D и T. Хочется из них сделать развязку, но острые углы для этого не годятся. Галочка — как символ сделанного дела и сданного экзамена.<\/p>\n<p>Приходит в голову, что развязки разной сложности можно использовать для обозначения сложности тестов. Откладываю логотип в сторону, что-то рисую:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-5@2x.jpg\" width=\"920\" height=\"262\" alt=\"\" \/>\n<\/div>\n<p>Вроде что-то тут есть, но пока непонятно, что именно. Марафон вроде прикольный, но на развязку не похож. Да и уровни скучные.<\/p>\n<p>Иду изучать, какие бывают развязки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-6@2x.jpg\" width=\"999\" height=\"610\" alt=\"\" \/>\n<\/div>\n<p>Самые симпатичные и архетипичные — клевер и турбина. Круговое движение просится на знак самых простых тестов.<\/p>\n<p>Становится ясно, что дороги должны уходить за знак, но при этом клевер из клеверной развязки хочется подчеркнуть. Рисую уходящие дороги другим цветом, пробую ромб вместо щита:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-7@2x.jpg\" width=\"920\" height=\"261\" alt=\"\" \/>\n<\/div>\n<p>С ромбом вроде интереснее: его форма дружит с тем фактом, что дороги уходят в четыре стороны. Постепенно вырисовываются три уровня:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-8@2x.jpg\" width=\"680\" height=\"591\" alt=\"\" \/>\n<\/div>\n<p>Надо будет только все тени честно прорисовать. Но что делать с марафоном и режимом экзамена? Марафон должен быть каким-то бесконечным по смыслу, но клевер в средних тестах — и так бесконечность в квадрате, куда ещё бесконечнее-то?<\/p>\n<p>Думаю, что не обязательно пытаться изображать что-то реальное. Смотрю на всякие красивые узоры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-9@2x.jpg\" width=\"814\" height=\"570\" alt=\"\" \/>\n<\/div>\n<p>Иду за помощью к математике. Нахожу формулу, которая рисует розочки разной сложности:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-10.jpg\" width=\"428\" height=\"554\" alt=\"\" \/>\n<\/div>\n<p>Вроде симпатичные, особенно вот эти:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-11@2x.jpg\" width=\"920\" height=\"447\" alt=\"\" \/>\n<\/div>\n<p>Смотрю, что бывает ещё. О, фигуры Лиссажу:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-12@2x.jpg\" width=\"796\" height=\"448\" alt=\"\" \/>\n<\/div>\n<p>Вариантик:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-13@2x.jpg\" width=\"417\" height=\"383\" alt=\"\" \/>\n<\/div>\n<p>Клёво, что фигура замкнутая, это как раз подчёркивает идею того, что из этого теста хрен выберешься.<\/p>\n<p>Отрисовываю всё почище, изображаю тени от дорог. Режим экзамена пока без знака, ставлю ему пока такой же, как у марафона:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-14@2x.jpg\" width=\"920\" height=\"482\" alt=\"\" \/>\n<\/div>\n<p>Тени пока ненастоящие, просто по-быстрому накидал, чтобы оценить ощущение.<\/p>\n<p>Не знаю, зачем, но можно так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15@2x.jpg\" width=\"348\" height=\"348\" alt=\"\" \/>\n<\/div>\n<p>В режиме экзамена попадаются вопросы разной сложности, как в жизни. А в жизни развязки бывают какие угодно:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15b@2x.jpg\" width=\"512\" height=\"384\" alt=\"\" \/>\n<\/div>\n<p>Придумываю насочинять какую-то несимметричную развязку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-16@2x.jpg\" width=\"920\" height=\"257\" alt=\"\" \/>\n<\/div>\n<p>Заодно получше рисую все тени от дорог (кроме марафона: там сложно, пока остаются левые тени). Вместо того, чтобы прямо отбрасывать тени от дорог, использую более графичный приём — «выкусываю» из нижних дорог те фрагменты, на которые падает тень от верхних.<\/p>\n<p>Картинка эксперта круто смотрится сама по себе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-17@2x.png\" width=\"732\" height=\"732\" alt=\"\" \/>\n<\/div>\n<p>Можно футболку для экспертов зафигачить:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-18@2x.jpg\" width=\"460\" height=\"460\" alt=\"\" \/>\n<\/div>\n<p>Тут я обнаруживаю странность. В экспертом знаке такая развязка, где можно повернуть с любой дороги на любую, но нельзя развернуться на своей же дороге. А на клевере можно:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-19@2x.jpg\" width=\"920\" height=\"548\" alt=\"\" \/>\n<\/div>\n<p>Получается как-то нелогично. Эксперт-то круче харда, а чё на нём тогда развернуться нельзя? Добавляю ещё эстакад, перепроверяю все тени-выкусы:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-20@2x.jpg\" width=\"920\" height=\"548\" alt=\"\" \/>\n<\/div>\n<p>Возвращаюсь к логотипу. Теперь вроде точно надо его сплести из дорог, чтобы всё со всем подружилось. Пытаюсь какую-то построить эстакаду или что-то такое:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-21@2x.jpg\" width=\"920\" height=\"501\" alt=\"\" \/>\n<\/div>\n<p>Может, нужно просто галочку поставить и будет нормально?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-22@2x.jpg\" width=\"694\" height=\"291\" alt=\"\" \/>\n<\/div>\n<p>Пробую какие-то ещё версии. Это как бы кусок карты, на которой нарисован перекрёсток:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-23@2x.jpg\" width=\"465\" height=\"202\" alt=\"\" \/>\n<\/div>\n<p>Непонятно, почему карта в форме буквы Д. Форма есть, смысла нет.<\/p>\n<p>Ещё что-то:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-24@2x.png\" width=\"671\" height=\"180\" alt=\"\" \/>\n<\/div>\n<p>Вроде D над T смотрится круто. Пробую поставить на фон из американских дорожных знаков и подвигать по-разному, добавить стрелочек:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-25@2x.png\" width=\"920\" height=\"218\" alt=\"\" \/>\n<\/div>\n<p>Лучше всего смотрится просто D и T, без хитростей. Но тут до меня доходит, почему знак выглядит таким сильным: этот знак уже заняла православная церковь. Надо придумать что-то другое.<\/p>\n<p>Вариант с галочкой:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-26@2x.png\" width=\"409\" height=\"575\" alt=\"\" \/>\n<\/div>\n<p>Ну хз.<\/p>\n<p>Из строчных букв развязку сплести проще, но галочка не отпускает:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-27@2x.png\" width=\"920\" height=\"326\" alt=\"\" \/>\n<\/div>\n<p>Ещё была версия сделать букву D из сложного переплетения дорог:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-28@2x.png\" width=\"375\" height=\"375\" alt=\"\" \/>\n<\/div>\n<p>Ничё хорошего из этого не вышло.<\/p>\n<p>Где-то сбоку от холста появляются такие галочка и крестик для теста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-29@2x.jpg\" width=\"858\" height=\"222\" alt=\"\" \/>\n<\/div>\n<p>Фиг знает, это потом.<\/p>\n<p>Вариантов накопилось порядочно:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-30@2x.jpg\" width=\"920\" height=\"582\" alt=\"\" \/>\n<\/div>\n<p>Решаю, что в качестве логотипа надо нести развязку из строчных d и t. Цвет и шрифт пока какие попало, хотя мне начинает нравиться этот зелёный. Но пофиг, надо разобраться с тем, подойдёт ли идея.<\/p>\n<p>В итоге показываю клиенту такой набор на первой презентации:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-31@2x.jpg\" width=\"1024\" height=\"768\" alt=\"\" \/>\n<\/div>\n<p>Типа постеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-32@2x.jpg\" width=\"920\" height=\"625\" alt=\"\" \/>\n<\/div>\n<p>Типа футболки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-33@2x.jpg\" width=\"920\" height=\"533\" alt=\"\" \/>\n<\/div>\n<p>Просто:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-34.jpg\" width=\"1024\" height=\"768\" alt=\"\" \/>\n<\/div>\n<p>Клиенту в целом картинки нравится, но много практических сомнений. Пока трудно представить, как вписать эти ромбики на сайт. Марафон похож не на перекрёсток, а просто на какую-то сетку, и дело явно не только в недорисованных тенях. В логотипе смущает, что он похож на медиатор, а дороги в нём слишком тонкие. И знаковый зелёный не нравится — хочет фирменный синий.<\/p>\n<p>Записываю разные замечания и сомнения и отправляюсь думать и исправлять.<\/p>\n<p>Если будет не влом, продолжение последует.<\/p>\n",
            "summary": "Напомню, что «Драйвинг-тесты» — сайт, помогающий подготовиться к экзаменам по вождению в Америке. Я сделал логотип и разные штуки",
            "date_published": "2018-09-06T12:06:06+03:00",
            "date_modified": "2020-05-20T19:14:05+03:00",
            "tags": [
                "графдизайн",
                "Драйвинг-тесты",
                "проекты",
                "процесс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15@2x-1.jpg",
            "_date_published_rfc2822": "Thu, 06 Sep 2018 12:06:06 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4851",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15@2x-1.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/driving-tests@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-1@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-2@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-3@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-4@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-5@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-6@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-7@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-8@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-9@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-10.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-11@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-12@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-13@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-14@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-15b@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-16@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-17@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-18@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-19@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-20@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-21@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-22@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-23@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-24@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-25@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-26@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-27@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-28@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-29@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-30@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-31@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-32@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-33@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/dt-process-34.jpg"
                ]
            }
        },
        {
            "id": "876",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/10\/19\/1\/",
            "title": "Как я верстал C-Airlaid",
            "content_html": "<p class=\"historical\">Исходные изображения из заметке потерялись, но заметка сохранена для истории<\/p>\n<blockquote>\n<p>Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают.<\/p>\n<\/blockquote>\n<p><i>Данил Иванов, imfo.ru, <a href=\"http:\/\/imfo.ru\/archive\/2004\/10\/11\/browser_wars_crazy_people\">вот здесь<\/a><\/i><\/p>\n<p>Попробую для разнообразия последовать этому принципу и написать вдвойне интересную заметку. Расскажу-ка я о том, как я верстал <a href=\"http:\/\/airlaid.ru\">airlaid.ru<\/a> и с какими проблемами столкнулся. (Чёрт возьми, не могу не заметить, что с этими проблемами я <i>не<\/i> столкнулся в Опере.)<\/p>\n<p>Вот такую штуку мне надо было получить:<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/result.gif Результат<\/span><\/p>\n<p>Думаю, очевидно, что имеется в виду вёрстка в три колонки, т. е. ширина главного меню (и нижней плашки под копирайты) составляет 1\/3 ширины окна; выравнивается и то, и другое посередене. Для простоты я решил делать колонки шириной 33%, 34% и 33% соответственно. Всякая шелуха вокруг нас интересует мало, поэтому рассмотрим упрощённый вариант задачи:<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/airlaid1.gif Упрощённый вариант<\/span><\/p>\n<p>Итак, нам нужно сделать просто трёхколоночную вёрстку. Сложность здесь представляет (как оказалось) задача скругления краёв у синих плашек. <a href=\"cut\">cut<\/a>Для начала я нарисовал 4 вот таких вот уголка для разных мест, антиалиаснутых на нужном синем фоне (восьмикратное увеличение by Photoshop):<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/corner.gif Такой вот уголок<\/span><\/p>\n<p class=\"foot\">Думаю, что вы в курсе, что клетки, закрашенные в шахматном порядке — это прозрачность?<\/p>\n<p>Эти уголки были расставлены в нужные места вот так:<\/p>\n<pre class=\"e2-text-code\"><code>#main-menu  {\n  position: relative; \n  left: 33%;  top: 0;  width: 34%;  height: 170px;\n  background: #189CC0;\n}\n#menu-lc  {  position: absolute;  left: 0;  bottom: 0;  }\n#menu-rc  {  position: absolute;  right: 0;  bottom: 0;  }\n\n&lt;div id=&quot;main-menu&quot;&gt;\n&lt;img id=&quot;menu-lc&quot; src=&quot;menu-lc.gif&quot; alt=&quot;&quot; \/&gt;\n&lt;img id=&quot;menu-rc&quot; src=&quot;menu-rc.gif&quot; alt=&quot;&quot; \/&gt;\n&lt;\/div&gt;<\/code><\/pre><p>Аналогично была сделана и нижняя плашка. Несмотря на то, что вроде бы всё в порядке (всё же в порядке, да?), это не захотело правильно работать в IE и Gecko-браузерах. А именно: при некоторых значениях ширины окна браузера получались вот такие глюки:<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/bug-ie.gif Глюк в IE 6 при 1024 и 1600 пикселях<\/span><\/p>\n<p class=\"foot\">Internet Explorer 6.0, при 1024 и 1600 пикселях<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/bug-gecko.gif Глюк в Firefox 0.9.2 при 800 и 1024 пикселях<\/span><\/p>\n<p class=\"foot\">Mozilla Firefox 0.9.2, при 800 и 1024 пикселях<\/p>\n<p>Забавно, что при ширине окна 800 пикселей IE показывал всё правильно, а FF отлично справлялся с вариантами 1152 и 1600. Целенаправленно я проверял только более-менее вероятные ширины окон, однако в обоих браузерах наблюдался такой эффект: при плавном изменении горизонтальных размеров окна глюк то появлялся, то исчезал в совершенно хаотичном порядке.<\/p>\n<p>Я специально повторил эту вёрстку для «упрощенной задачи», причём вотнул стили прямо в HTML, чтобы интересующиеся могли не сильно напрягаясь посмотреть, что да как. Откройте это с помощью IE и\/или Mozilla, поизменяйте размеры окна.<\/p>\n<p><span style=\"color: #ccc\">airlaid-markup\/see-yourself Открыть!<\/span><\/p>\n<p>Первая приходящая на ум вероятная причина глюка: проценты в разных местах округляются по разным правилам — где-то в сторону меньшего, а где-то — в сторону большего. Однако такое объяснению проходит только в случае с IE; обратите внимание, когда изменяешь ширину его окна, он то показываёт всё правильно, то показывает уголок на один пиксель левее, чем нужно. В Mozilla же происходит намного более интересный эффект: она иногда показывает всё правильно, иногда показывает уголок на один пиксель правее чем нужно, а иногда — на один пиксель левее. Чтобы не быть голословным, приведу конкретные цифры: при ширине 800 пикселей уголок сдвинут вправо (как на рисунке выше), при 814 всё отображается правильно, а при 828 пикселях уголок сдвинут влево (как на рисунке про IE). Объяснения <i>такому<\/i> глюку я уже придумать не смог.<\/p>\n<p>Начал я пытаться эту проблему решать. Сначала я попробовал запихать оба нижних уголка меню в таблицу, сделать её шириной 100%, поместить в левую колонку левый уголок, написать там <tt>align=«left»<\/tt>, а правую — в правый и написать <tt>align=«right»<\/tt>. Но в результате получил ровно тот же самый эффект (вроде бы, в обоих браузерах). Тогда у меня появилась сумасшедшая мысль: позиционировать уголок в нужные места javaScript’ом. Вариация на эту тему: подставлять в <tt>right:<\/tt> иногда -1px, иногда 0, иногда 1px, в зависимости от резрешения и браузера. Так можно было бы сделать, чтобы в стандартных разрешениях всё работало OK. Но этого я даже не пытался делать — слишком уж уродливое решение.<\/p>\n<p>В конце концов я придумал вариант, при котором задача решается, а уродливость её решения, скажем так, остаётся на допустимом уровне. Я сделал вот что:<\/p>\n<pre class=\"e2-text-code\"><code>#menu-rc  {  position: absolute;  right: -1px;  bottom: 0;  }<\/code><\/pre><p>И нарисовал для этого места специальный вариант уголка (<a href=\"\/misc\/airlaid-markup\/corner-2.gif\">посмотреть на специальный вариант уголка<\/a>). Аналогичный спецуголок был нарисован и для нижней плашки. Результаты вы можете увидеть на сайте <a href=\"http:\/\/airlaid.ru\">airlaid.ru<\/a>.<\/p>\n<p>Внимательные товарищи заметят, что под Gecko глюк <i>немножко<\/i> остался, но это уже совсем мелочи. Причина этого глюка <i>частично<\/i> в том, что у Gecko, как я уже сказал, не два, а три варианта расположения уголка (-1px, 0 и 1px), а моё решение 100% лечит только от варианта с двумя расположениями, т. е. как IE.<\/p>\n<p>В общем, такие дела.<\/p>\n",
            "summary": "Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают",
            "date_published": "2004-10-19T18:35:14+03:00",
            "date_modified": "2020-05-21T10:36:30+03:00",
            "tags": [
                "браузеры",
                "веб-разработка",
                "проекты",
                "процесс",
                "решения"
            ],
            "_date_published_rfc2822": "Tue, 19 Oct 2004 18:35:14 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "876",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 4259,
    "_e2_ua_string": "Aegea 12.0a (v4259e)"
}