• Евгений Катышев: «OpenStreetMap подходит не для всякой информации»



      Евгений Катышев — UX-дизайнер и турист из Нижнего Новгорода, посвятивший OpenStreetMap последние 11 лет. Он один из немногих участников сообщества RU-OSM, который не только придумал несколько своих тегов, но еще и успешно их утвердил. Как ему это удалось, зачем это делать и почему люди теряют интерес к OSM — обо всем этом он рассказал в интервью.
      Читать дальше →
    • Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

      • Tutorial


      Привет, Хабр. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
      Читать дальше →
    • Как мы делали проект про выборы президента России 2018 года


      Осенью 2017 года ребята из ГОЛОСа подумали, что онлайн-трансляцию выборов надо выводить на новый уровень:

      • во-первых, расстраивало, что до сих пор на картах субъектов Российской федерации нет детализации до территориальных комиссий,
      • во-вторых, крайняя сложность и запутанность сайта ЦИК, которая не позволяет быстро узнать результаты по своему избирательному участку,
      • и в-третьих, решено было начать делать основу для энциклопедии результатов, когда можно посмотреть результаты по разным выборам для одного участка. Грубо говоря, узнать, как голосовали соседи.

      И все это не только для того, чтобы узнать в каком регионе живет 39% избирателей за Грудинина, но и для того, чтобы проверить, есть ли такой участок в стране, где Путин не выиграл выборы.
      Читать дальше →
    • Прототипирование на продакшн-технологиях


        В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.

        Читать дальше →
      • IT-инфраструктура штабов Навального и сбор подписей: Жнец-2018

          Cерия публикаций про сбор подписей

          1. Введение, сайт «Навальный 20!8», подготовка к сбору
          2. Железо и сети, видеонаблюдение
          3. Жнец-2018: система для сбора подписей
          4. Управление проектом

          Это третья часть материала про IT-инфраструктуру штабов Навального. В предыдущих главах было рассказано про разработку сайта «Навальный 20!8», организацию сети в штабах и производство сканеров документов.

          В этой главе рассказывается о создании системы для сбора подписей за выдвижение Навального кандидатом в президенты. Описаны этапы работы и получившиеся решения. Описана система физического хранения листов с подписями.



          Листы, QR-коды и способы работы с ними


          Подписной лист — основной документ в нашей системе. Первое, что хочется сделать для работы с большой коллекцией объектов, — присвоить им уникальный идентификатор, чтобы связать каждый объект с записью в базе данных. Но форма подписного листа очень строго прописана в законе, любое ее нарушение — это повод забраковать вообще все подписи кандидата. На листе, который подается в избирком, не допускается никаких лишних пометок и символов.
          Читать дальше →
        • IT-инфраструктура штабов Навального и сбор подписей: железо и сети

            Cерия публикаций про сбор подписей

            1. Введение, сайт «Навальный 20!8», подготовка к сбору
            2. Железо и сети, видеонаблюдение
            3. Жнец-2018: система для сбора подписей
            4. Управление проектом

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



            Какие задачи мы решали


            Оборудовать рабочие станции для операторов, обеспечить каждый штаб стабильным и защищенным доступом к служебным веб-приложениям, сделать видеонаблюдение за помещениями штабов, организовать сканирование документов для проверки документов подписантов.
            Читать дальше →
          • IT-инфраструктура штабов Навального и сбор подписей: подготовка к сбору, сайт «Навальный 20!8»

              Cерия публикаций про сбор подписей

              1. Введение, сайт «Навальный 20!8», подготовка к сбору
              2. Железо и сети, видеонаблюдение
              3. Жнец-2018: система для сбора подписей
              4. Управление проектом

              Введение


              Это рассказ о том, как устроена IT-инфраструктура региональных штабов Алексея Навального и система для сбора подписей в поддержку его выдвижения кандидатом в президенты России.



              Еще это рассказ о том, как при помощи свободного ПО и недорогих комплектующих небольшая команда создала сложную систему сбора подписей в масштабах целой страны. В проекте нет сложных технических решений, но есть множество важных мелочей, которые невозможно предусмотреть на основе типичного опыта IT-разработки.

              Для удобства материал разбит на четыре поста, которые лучше читать последовательно.

              Это технический материал, но многие вопросы, которые здесь обсуждаются, непонятны без минимального знания современного политического контекста, поэтому он в необходимой мере описан. Если вас по каким-то причинам пугает слово «Навальный» (оно встретится еще несколько раз) или упоминание демократических институтов, просто не читайте этот текст. В комментариях политические вопросы обсуждаться не будут.
              Читать дальше →
            • «ONLYOFFICE Документы» для iOS: как изменилось приложение за год

                Мы потихоньку начинаем подводить итоги этого трудового года, и начнем, пожалуй, с нашего приложения для iOS — "ONLYOFFICE Документы". В этом году оно серьезно изменилось в плане функциональности. Стало более самостоятельным, благодаря добавленной возможности работать локально, без подключения к порталу ONLYOFFICE. Обзавелось совместной работой и адаптировалось к iOS 11 и IPhone X.

                Расскажем обо всем по порядку.

                Читать дальше →
              • ONLYOFFICE в локальной сети: новый интерфейс редакторов, отчеты в CRM и многое другое

                  Наконец-то увидели свет новые версии наших серверных решений — Enterprise и Community Edition. Вы даже не представляете, что мы пережили тут из-за этого релиза. Зато в решениях появилось много всего хорошего! Мы обновили три из четырех компонентов ONLYOFFICE: Сервер документов, Сервер совместной работы и Контрольную панель.

                  Некоторые функции появились и в коммерческой сборке, и в открытой версии. Есть и те, которые будут доступны только пользователям платных решений.


                  Читать дальше →
                  • +16
                  • 7.1k
                  • 5
                • ONLYOFFICE против Collabora: почему мы уверены, что наше решение лучше

                    Здравствуйте! Команда ONLYOFFICE возвращается на Хабр, как мы и обещали. Постараемся писать чаще и больше, и вообще держать вас в курсе событий. В последнее время нам есть что рассказать и показать.

                    Тему первой статьи подсказала нам сама жизнь. Не так давно наравне с вопросом: «А чем вы лучше Google Docs?» нам начали задавать вопрос «Ну и чем вы лучше Collabora?». Это связано с нашей интеграцией с сервисами ownCloud и Nextcloud, официальным партнером которых как раз таки является Collabora.

                    Если говорить о преимуществах, то у Collabora есть перед нами очень большое — идеологическое. Оно заключается в том, что этот продукт является продолжателем дела OpenOffice и LibreOffice. Непросто бороться с ними за пользователей, но у нас есть весомые аргументы в свою пользу. Сейчас расскажем.


                    Читать дальше →
                  • Визуализация результатов выборов в Москве на карте в Jupyter Notebook


                      Всем привет!


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


                      В качестве примера возьмем недавно отгремевшие муниципальные выборы в Москве. Сами данные можно взять с сайта мосгоризбиркома, в можно просто забрать датасеты с https://gudkov.ru/. Там даже есть какая-никакая визуализация, но мы пойдем глубже. Итак, что же у нас в итоге должно получиться?

                      Читать дальше →
                    • Анализ результатов выборов в Госдуму. Готовимся к голосованию 2016 года

                        Выборы в Государственную думу только осенью, но мы уже начинаем готовиться. Если повторится история 2011 года, будет очень интересно. Наверное, многие помнят, как сразу после тех выборов появилась куча статистических исследований, намекающих на фальсификации и как все узнали, как выглядит распределение Гаусса. Я хотел бы рассказать, где искать данные про выборы и как с ними работать. Кроме хорошо известных графиков я покажу некоторые другие прикольные картинки, которых раньше в паблике не видел. Так, например, выглядит распределение голосов за Единую Россию по стране, хорошо видны регионы с максимальной поддержкой партии власти — Северный Кавказ и Татарстан:


                        Есть такой замечательный сайт izbirkom.ru. Его здесь даже недавно упоминали в контексте, что, типа, на него потратили слишком много денег. Но лично мне не жалко, сайт прекрасный:

                        Читать дальше →
                      • Редизайн Хрома на десктопе

                        • Translation


                        В начале этого сентября в Windows, как часть 53-го обновления, появился новый модифицированный дизайн основного пользовательского интерфейса Chrome, т.н. «Chrome MD» (Material design). Он стал последней ступенью трёхступенчатого ввода в действие нового дизайна, который был начат в релизе 51 с Chrome OS и Linux и был продолжен в релизе 52 с macOS. Windows стала высшей точкой этого процесса, и, поскольку Chrome не закончится никогда, то мне кажется, что сейчас самое время оглянуться и поразмышлять над этим процессом, который занял почти 2 года и который дал некоторые знания и опыт, полезные, возможно, и для вас.
                        Читать дальше →
                      • Серьезное проектирование серьезных сайтов. Часть 2. Визуализация

                        • Tutorial

                        7. Карта ума.



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



                        Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.


                        Читать дальше →
                      • Серьезное проектирование серьезных сайтов. Часть 1. Аналитика

                        • Tutorial

                        Сразу скажу, что статья получилась очень большая. В моем духе. Поэтому я решил разбить её на две части: аналитика и визуализация. А после еще будет несколько статей с логическим продолжением. Первая может показаться сухой из-за большого количества текста, но без неё не сможет существовать вторая. Поэтому, если вы действительно интересуетесь проектированием сайтов, читать нужно обе и внимательно, я постарался избавиться от «воды» и рассказать только о полезном.

                        Читать дальше →
                      • Разбираемся с сеткой в Adobe Illustrator

                        • Translation
                        • Tutorial

                        От переводчика


                        Привет, %юзернейм%!

                        Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

                        Материал расчитан на новичков, и немного рассказывает о двух вещах:
                        1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
                        2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

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

                        Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

                        Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

                        Краткое содержание


                        • Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
                        • Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;


                        Ну, поехали.

                        Разбираемся с сеткой в Adobe Illustrator





                        Читать дальше →
                      • Как создавать Pixel Perfect изображения в Adobe Illustrator

                        • Translation
                        • Tutorial

                        От переводчика


                        Рад приветствовать тебя, %юзернейм%!

                        Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

                        С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

                        Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

                        Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

                        В заключение вступительной части хочу попросить не обращать внимания на то, что я новичок в дизайне, и этой мой первый в жизни перевод. Отнеситесь критично, тема серьёзная. Призываю делиться своими соображениями и опытом в комментариях.

                        Краткое содержание


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

                        Настройки Abobe Illustrator


                        1. Edit > Preferences > Units > General → Pixels
                          Edit > Preferences > Units > Stroke → Pixels
                        2. Edit > Preferences > Guides & Grid > Gridline every → 1px
                          Edit > Preferences > Guides & Grid > Subdivisions → 1px
                        3. Edit > Preferences > General > Keyboard Increment → 1px
                        4. View > Snap to Grid
                          View > Snap to Point
                        5. View > Pixel Preview

                        Не благодарите.
                        Всех заинтересовавшихся прошу пройти под кат.

                        Как создавать pixel perfect изображения в Adobe Illustrator




                        Читать дальше →
                        • +23
                        • 74.1k
                        • 6
                      • Как стать тестировщиком или каких знаний мы ждём от джуниора

                        image


                        Пара вводных слов
                        Всем доброго времени суток, меня зовут Туманов Дима. Сейчас я работаю в компании Rambler&Co и отвечаю за тестирование на проектах Афиши. В рамках данной статьи я развею несколько мифов об IT и тестировании в частности. Кроме того, приведу примеры из жизни как “не зная ничего” стать Junior QA Engineer в крупной компании.


                        Начало пути
                        Проработав почти два года в одной “мирной” госкорпорации в должности “ненастоящего инженера”, я осознал, что развитие остановилось. Я мог сидеть на одном месте и почти ничего не делать. В конечном итоге мои знания бы совсем отстали от реальной действительности и я бы стал невостребованным на рынке. В этот момент я принял решение о смене места и сути своей работы.

                        Читать дальше →
                      • О съемке гигапиксельной панорамы Екатеринбурга

                          В этой статье пойдет речь о создании панорамы Екатеринбурга.
                          Публикация на Хабре: habrahabr.ru/post/150591 Сама панорама: ekburg.artstudio-3d.ru

                          Изначально более подробный вариант статьи направлялся в «песочницу», но НЛО не счел его достойным инвайта. Ниже я опущу предысторию с тендерами и прочую «лирику», и постараюсь остановиться лишь на технической части.

                          image

                          Читать далее
                        • Потрясающие фотографии Земли и космоса с помощью фотоаппарата за 56 £

                            Команда студентов из Испании с помощью фотоаппарата стоимостью £56 и воздушного шара из латекса стоимостью £43 смогла сделать потрясающие фотографии Земли и космоса в 20-милях над Землей.


                            image
                            Читать дальше →