4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Привет, друзья!

Поговорим о том, КАК ДОБАВИТЬ ИКОНКИ НА САЙТ ИЗ FIGMA. Для тех, кому интереснее смотреть видео, прикрепляю свой видосик на YouTube:

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

В связи с этим я хочу расставить все точки над i в этой теме и рассказать достаточно подробно о том, как лучше всего добавлять иконки на сайт из макета Figma.

Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!

Способ №1 — это экспортировать иконки в svg формат и вставлять их либо как код, либо как изображение, либо как CSS свойство.

Сосбтвенно, выделяем иконку в Figma и жмём на экспорт в SVG формат, сохраняем в наш проект и вставляем на сайт:

<!-- через тег img --> <img src="img/icons/icon-refresh.svg" alt="">  <!-- svg код --> <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.5 17.5V11.375H9.625L6.81012 14.1925C7.29091 14.6841 7.86482 15.0751 8.49836 15.3425C9.13189 15.6099 9.81234 15.7484 10.5 15.75C11.5843 15.7484 12.6416 15.4111 13.5265 14.7844C14.4114 14.1577 15.0805 13.2723 15.442 12.25H15.4577C15.5575 11.9656 15.6336 11.6725 15.6844 11.375H17.4449C17.2318 13.0666 16.4086 14.6222 15.1299 15.7499C13.8512 16.8777 12.2049 17.5 10.5 17.5H10.4912C9.57234 17.5028 8.66201 17.3232 7.81296 16.9717C6.96391 16.6203 6.19301 16.1039 5.54487 15.4525L3.5 17.5ZM5.31475 9.625H3.55425C3.76729 7.93404 4.58994 6.37889 5.86789 5.25123C7.14583 4.12358 8.79129 3.50091 10.4956 3.5H10.5C11.4191 3.49709 12.3296 3.67657 13.1788 4.02803C14.028 4.37949 14.799 4.89595 15.4472 5.5475L17.5 3.5V9.625H11.375L14.1942 6.8075C13.713 6.3153 13.1384 5.92402 12.504 5.65659C11.8697 5.38916 11.1884 5.25093 10.5 5.25C9.41565 5.2516 8.3584 5.58893 7.47349 6.21563C6.58859 6.84233 5.91945 7.72767 5.558 8.75H5.54225C5.44162 9.03438 5.3655 9.3275 5.31562 9.625H5.31475Z" fill="white"/> </svg>  <!-- css --> <span class="icon-refresh"></span>  <style>     .icon-refresh {         position: relative;         display: inline-block;         width: 16px;         height: 16px;         background-image: url('img/icon-refresh.svg');         background-size: 100%;         background-repeat: no-repeat;         background-position: center;     } </style>

Сам по себе вариант самый очевидный, простой и достаточно хороший.

Однако тут у нас выступает 2 очень неприятные проблемы. 

Первая проблема — если мы используем svg код, то сам код становится достаточно большим так как сама иконка может быть очень сложной по цветам и количеству вектора внутри.

Вторая проблема — это если мы подключаем иконку таким способом, то нам проблематично менять её цвет через CSS или даже JS. Придётся экспортировать дубль иконки, но с другим цветом. А в случае с тегом object у нас вообще не будет нормально работать ссылка, если мы обернули её в тег <a>.

Есть также ещё небольшой минус — он связан с тем, что мы не можем задать размер иконки через свойство font-size (то есть мы не наследуем размер шрифта). Приходится всё время «играться» с шириной и высотой.

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

Поэтому этот вариант на самом деле подходит тогда, когда иконок в макете не много (то есть максимум штук 3-5) и их цвета нигде не меняются (к примеру по наведению или теме макета).

Способ №2 — это создать 1 файл со всеми иконками. По-другому это называют текстура иконок.

Вариант также подразумевает экспорт иконок в svg или png формат, но одним файлом, где будут все иконки одного размера. Это довольно старый вариант, но знать о нём нужно. Я точно знаю, что ВКонтакте использовали этот способ очень долго, и после редизайна они отказались от этого способа в пользу SVG + JS.

К примеру, иконки соц. сетей:

Прописываем код для иконки ВК и Instagram:

<span class="icon icon_vk"></span> <span class="icon icon_instagram"></span>  <style>     .icon {         position: relative;         display: inline-block;         width: 40px;         height: 40px;         background-image: url('img/socials-pack.svg');         background-size: 287px;         background-repeat: no-repeat;     }      .icon_vk {         /* начальная позиция стоит по-умолчанию */     }      .icon_instagram {         background-position: 239px 0;     } </style>

Тут у нас выступает 2 проблемы:

Первая — у нас может занять много времени подготовка CSS свойств.

Вторая — опять очень проблематично менять цвета. Придётся экспортировать столько дублей иконок, сколько нужно цветов.

Зато тут есть 1 приятный плюс — это небольшой HTML код, так как мы используем только класс, чтобы добавить иконку.

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

Способ №3 — использовать готовый сервис иконок. Тут вам важно уточнить у дизайнера — ОТКУДА ВЗЯТЫ ИКОНКИ.

Небольшое отступление — вам в принципе нужно всегда спрашивать у дизайнера: какие иконки, откуда изображения, где взять шрифт и т.п. вопросы.

Часто бывает такое, что иконки взяты с какого-то сервиса, который позволяет подключить иконки через стили или скрипты.

В Figma дизайнеры часто используют сервис Iconify.

Либо дизайнер мог использовать другие иконки, где есть готовое подключение на сайт. Тот же EvaIcons, к примеру.

Пример подключения через Iconify:

<!-- подключем сервис (это будет ссылка либо js, либо css) --> <script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>  <!-- указываем иконку --> <span class="iconify" data-icon="ci:refresh-02"></span>

Тут я уже начну с плюсов:

  • во-первых, мы можем очень легко и быстро подключить все иконки на сайт

  • во-вторых, цвет иконки меняется очень просто по свойству color в css

  • в-третьих, размер иконки наследуется от шрифта и мы можем его менять по свойству font-size

  • да и в целом в нашем html коде всё аккуратно, иконки занимают 1 строку

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

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

Способ №4 — это самостоятельно превратить все иконки в иконочный шрифт

В этом случае вам не повезло, потому что дизайнер использовал иконки, для которых нет никакого решения для подключения на сайт (вот подлец🤔).

Что мы делаем:

  • мы экспортируем все иконки в svg формат (будет лучше, если все они будут чёрные, латиницой без символов и слова «icon»)

  • импортируем их в сервис icomoon (чтобы сэкономить кучу времени). Тут важно, чтобы у вас все иконки были в кривых (fill), а не обводкой (stroke). Сервис не работает с обводкой, и он вас предупредит, если какая-то иконка будет сделана обводкой

  • генерируем иконочный шрифт и получаем готовый CSS файл и превьюшку с иконками

Наш код:

<!-- подключаем иконки в <head> или в файле стилей --> <link rel="stylesheet" href="fonts/icomoon/style.css">  <!-- иконка через html --> <i class="icon-refresh"></i>  <!-- иконка через css --> <button class="button">Кнопка с иконкой</button>  <style>     .button:before {         content: '\e90a';         font-family: 'icomoon', sans-serif;     } </style>

Из плюсов я выделю:

  • возможность легко менять цвет через CSS свойтсво color

  • возможность задавать размер иконки через font-size (то есть иконка наследует размеры щрифта)

  • небольшой html-код, так как мы используем только 1 небольшой класс для добавления иконки

  • простая поддержка иконок (легко добавлять и удалять иконки из нашего арсенала)

  • экономим пространство тем, что у нас находятся только те иконки и код, которые нужны (в отличии от использования готового решения, где может быть больше сотни иконок)

Из минусов:

  • мы тратим немного больше времени на подготовку иконочного шрифта

  • нам важно следить, чтобы иконки были в кривых, а не обводочными

Данный вариант подходит, когда иконок в макете много и когда их цвета могут меняться.

Заключение

Друзья! Поверьте, этого всего вам достаточно, чтобы научиться правильно и без проблем подключать любые иконки на любой сайт. Ведь сами понимаете, как важно, чтобы html-макет соответствовал макету в Figma, при это без ущерба производительности и качеству кода.

Пишите в комментариях — что вы думаете по этому поводу.

Не забывайте подписываться на меня в YouTube, там также много полезного.

Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!


ссылка на оригинал статьи https://habr.com/ru/post/648741/

11 курсов по Яндекс.Директу: от бесплатных до фундаментальных с трудоустройством

Как появляются спецы по контекстной рекламе? Вот, например, имел человек некую другую профессию. А потом смотришь – через год уже настраивает рекламные кампании, собирает СЯ и рассылает клиентам отчеты. Что он делал для этого? Правильно – учился.

Одни учатся самостоятельно, просматривая все видео на YouTube, пробуя и ошибаясь. Другие подходят к смене профессии более системно и сразу ищут курсы по контекстной рекламе. Если вы относитесь ко вторым, то добро пожаловать.

В этом материале мы собрали 11 проверенных курсов по этой теме (в том числе и бесплатных, да-да). Здесь все важные моменты по каждому обучению: где брать, сколько длится, для какого уровня подойдет и т. д. Если хотите поучиться на досуге, сохраните себе эту подборку. Может, пригодится.

«Школа Директа» от Яндекса

Ссылка: https://yandex.ru/adv/edu/online/direct.

Для кого: новички, средний уровень.

Стоимость: бесплатно.

Объем: 4 общих курса, более 15 тематических, 3 чек-листа.

Программа трудоустройства: нет.

Документ по окончании: можно пройти тест и получить именной сертификат специалиста по Яндекс.Директу.

Целая серия курсов, которая делится на 2 большие группы: «Легкий старт» и уроки для улучшения текущих кампаний. Примечательно, что первая группа ориентирована не только на специалистов по рекламе, но и на владельцев бизнеса, которые начинают разбираться в контексте. Поэтому, например, самый первый курс называется «Кому доверить запуск рекламы в интернете».

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

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

«Настраиваем Яндекс.Директ» от GeekBrains

Ссылка: https://gb.ru/courses/415.

Для кого: новички.

Стоимость: бесплатно.

Объем: 2 урока.

Программа трудоустройства: нет.

Документ по окончании: нет.

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

Судя по отзывам, мини-курс популярен и у владельцев собственного бизнеса, ведущих рекламу.

«Основы контекстной рекламы: Яндекс.Директ» от Нетологии

Ссылка: https://netology.ru/programs/context-target-mini.

Для кого: новички.

Стоимость: бесплатно, но за 3900 руб. можно получить подробный разбор 4 домашних заданий и доступ в закрытую группу в Facebook.

Продолжительность: 6 занятий.

Программа трудоустройства: нет.

Документ по окончании: сертификат об окончании курса.

Хороший вводный курс для тех, кто ничего не знает про Яндекс.Директ, но хочет с комфортом разобраться в основах, не перекапывая тонны статей в интернете. Удобен тем, что лекторы в доступной форме и без воды структурированно расскажут про все аспекты рекламы: какие программы и сервисы нужны, как подобрать ключевые и минус-слова, из чего состоит объявление и как его написать, как создать рекламный креатив самостоятельно и многое другое.

Сбору семантики посвящены 2 часа теории и 1 час практики – это самый большой блок на курсе. И это здорово, потому что работа с семантикой традиционно самая сложная и трудозатратная часть работы контекстника.

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

«Специалист по контекстной рекламе с нуля до middle» от Нетологии

Ссылка: https://netology.ru/programs/context-target.

Для кого: новички.

Стоимость: 29 190 руб. и 59 940 руб. в зависимости от программы.

Продолжительность: 4 месяца и 11 месяцев в зависимости от программы.

Программа трудоустройства: есть.

Документ по окончании: удостоверение о повышении квалификации или диплом о профессиональной переподготовке в зависимости от программы.

На курсе 2 программы: 4-месячная с базовой информацией и 11-месячная – с расширенной. У них разная цена, содержание и документы об окончании.

Первой вполне хватит для того, чтобы начать работать на позиции junior-специалиста по контекстной рекламе, тем более что у Нетологии есть программа трудоустройства. В расширенной программе примерно вдвое больше обучающих материалов и практических заданий по базовым сведениям, есть 2 индивидуальные консультации с преподавателем и 3 дополнительных модуля:

  • оптимизация РК и продвинутый Google Analytics;

  • продвижение интернет-магазинов с помощью КР;

  • подарочные курсы – «GTM» и «Google Таблицы для маркетолога».

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

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

«Профессия Специалист по контекстной рекламе» от Skillbox

Ссылка: https://skillbox.ru/course/profession-context/.

Для кого: новички.

Стоимость: 3 месяца бесплатно, за весь курс 72 795 руб.

Продолжительность: 51 модуль, 260 видеоматериалов.

Программа трудоустройства: есть.

Документ по окончании: сертификат о прохождении курса.

Курс специально для тех, кто хочет стать уверенным джуном в контекстной рекламе или даже приблизиться к middle, но у кого нет времени на плотную учебу. Учиться можно в собственном темпе, тратя по 3–5 часов в неделю.

У курса есть уникальная фишка. По сути, это не одна программа, а 4 в 1. Три дополнительных – «Веб-аналитик с нуля до Junior», «Дизайнер сайтов на Tilda» и «Базовый Excel», что весьма логично, ведь рекламу придется анализировать, а также время от времени создавать посадочные для объявлений. Ну, а таблицы – наше все, сами понимаете.

Кстати, автоматизировать отчетность можно с помощью нашего сервиса. Почитать об этом подробнее можно здесь. Click.ru в принципе предоставляет много возможностей для спецов по контексту. У нас есть инструменты, способные упростить настройку РК: «Кластеризация запросов», «Парсер метатегов и заголовков», «Нормализатор слов» и др. Ну и приятный бонус за работу через Click.ru – партнерское вознаграждение до 18% от оборота клиентов.

Интересный момент: компания дает гарантию вернуть деньги, если вы не найдете работу контекстником после обучения. Звучит неплохо, но так ли это просто, как преподносится? Не совсем. Это целая маркетинговая акция со своими правилами. Если выпускник выполнил все условия, но не получил ни одного предложения от работодателей или получил одни отказы на свои отклики в течение 6 месяцев после выпуска, производится компенсация средств. Скажем честно: чтобы такое случилось, надо быть очень невезучим. Или, наоборот, везучим, раз деньги всё-таки вернут?

«Контекстная реклама» от CyberMarketing

Ссылка: https://www.cybermarketing.ru/video-courses/promo/kontekstnaya-reklama.html.

Для кого: новички.

Стоимость: бесплатно.

Продолжительность: 6 занятий.

Программа трудоустройства: нет.

Документ по окончании: сертификат о прохождении курса.

Интересный вариант начального обучения. Темы в нем раскрываются с самых азов (например, есть подблоки «Системы контекстной рекламы» и «Что такое CTR») до среднего уровня погружения («Правильное написание уточнений», «Операторы Google Ads» и т. д.). Подойдет новичкам в контексте, а также маркетологам и владельцам бизнеса. На курсе есть не только видеоуроки, но и элемент закрепления пройденного – тесты. Кстати, на курсе рассматривается не только Директ, но и Google Adwords, что помогает составить общую картину в области контекста.

«Директолог» от Профи-центра

Ссылка: https://ul-profi.ru/retraining/direktolog/.

Для кого: новички, относящиеся к одной из 3 категорий граждан (о них ниже).

Стоимость: бесплатно для тех, кто относится к одной из 3 категорий.

Продолжительность: 6 занятий (12 часов).

Программа трудоустройства: нет.

Документ по окончании: сертификат о прохождении курса.

Профи-Центр – это некоммерческая организация, работающая при поддержке фонда президентских грантов и помогающая учиться взрослым и детям из семей, оказавшихся в сложной жизненной ситуации. Курс «Директолог» – интересное решение для старта в профессиональной подготовке (или переподготовке, если профессия уже есть) для 3 категорий людей:

  • для малообеспеченных граждан или потерявших более 20% дохода;

  • людей с инвалидностью, перенесших тяжелые заболевания или на попечении которых находится член семьи;

  • живущих на селе.

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

«Контекстная реклама в Яндекс.Директе» от TexTerra

Ссылка: https://teachline.ru/courses/spetsialist-yandeks-direkt/.

Для кого: новички.

Стоимость: 7 500 руб.

Продолжительность: 7 лекций (10,5 часов).

Программа трудоустройства: нет.

Документ по окончании: сертификат, диплом или диплом с отличием.

Базовый курс для тех, кто хочет погрузиться в мир контекста, потратив не очень много времени и денег. Хороший вариант для владельцев бизнеса, фрилансеров или маркетологов, для которых КР не является единственной специализацией или если они хотят сделать только первый шаг в этой области.

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

«Яндекс.Директ» от irs.academy

Ссылка: https://irs.academy/kurs_po_yandex_direct.

Для кого: новички.

Стоимость: 2 800 руб. за стандартное обучение, 26 000 – за тариф VIP с индивидуальной помощью преподавателя.

Продолжительность: 5 уроков (10 часов).

Программа трудоустройства: нет.

Документ по окончании: сертификат о прохождении курса.

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

Больше интересных опций открывается в тарифе VIP. Преподаватель Роман Трифоненко ведет уроки лично в Skype, проверяет практические задания и дает обратную связь, отвечает на вопросы и в целом выполняет полную поддержку учащихся.

«Специалист по Яндекс.Директу» от PPC.World

Ссылка: https://ppc.world/courses/practice/praktika-po-yandeksdirektu/.

Для кого: новички, средний уровень.

Стоимость: 25 000 руб.

Продолжительность: 89 лекций.

Программа трудоустройства: нет.

Документ по окончании: сертификат о прохождении курса.

Очень большой и насыщенный курс, включающий, помимо лекций, тесты, практические задания с проверкой и общение в закрытом Telegram-чате. С помощью курса новички смогут выстроить строгую систему знаний, двигаясь от простого к сложному, а специалисты среднего уровня – прокачать знания в отдельных областях, таких как автоматизация кампаний, реклама мобильных приложений, работа с отчетами и e-commerce. Примечательно, что если у вас есть собственный проект, то можно делать практические задания на нем (преподаватель будет все проверять и давать обратную связь), а если нет, то вам выдадут учебный кейс.

Курс по контекстной рекламе от Яндекс.Практикума

Ссылка: https://practicum.yandex.ru/contextual-specialist/.

Для кого: новички, средний уровень.

Стоимость: 78 000 руб. (первые 5 часов бесплатно).

Продолжительность: 6 месяцев (250 часов).

Бонусы за доплату: нет.

Программа трудоустройства: есть.

Документ по окончании: диплом о профессиональной переподготовке.

Фундаментальный курс, реальная профессиональная переподготовка с высокой интенсивностью – по 10 часов в неделю. Вероятно, совмещать его с основной работой или учебой на очном отделении будет сложновато. Однако если время и деньги на учебу есть, то курс позволит действительно приобрести новую профессию: Яндекс.Практикум помогает собирать портфолио и искать работу.

В бесплатной части курса разбирают основные понятия и учат запускать простые кампании. В платной очень детально разбираются тонкости Яндекс.Директа (более 30 часов) и Google Ads (20 часов). Очень интересные и полезные блоки – «Настройка аналитики», «Сквозная аналитика» и «Управление рекламными кампаниями». В них детально рассматривается настройка целей, сбор статистики, создание и анализ отчетов, способы оптимизации кампаний. Это обычно невидимая, но крайне важная часть работы.

Большой плюс курса – практика и проверка домашних заданий.


ссылка на оригинал статьи https://habr.com/ru/company/click/blog/648631/

Основы WebAuthn/FIDO2 сервера — проверяем ответы

В этой статье мы узнаем как происходит проверка аттестационного и авторизационного ответов на стороне сервера. Как работает сам WebAuthn API мы обсудим в другой раз.

Для тех кто не знаком что такое FIDO2 советую почитать мою стать: «FIDO2 — Пароли must die»

Кратко объясним эти понятия:

  • Аттестационный ответ / Attestation — содержит свежеиспеченную учетную запись с публичным ключом, и аттестационную информацию. Аттестация используется для регистрации аутентификатора.

  • Авторизационный ответ / Assertion — содержит доказательство владением приватным ключом, чей ответ мы можем проверить с помощью ранее зарегистрированного публичного ключа. Авторизационный ответ используется для логина.

Типичный ответ на сервере выглядит так:

  • id/rawId — Это идентификатор учетной записи. id это base64url кодированный буфер rawId. В данном примере оба, id и rawId base64url кодированы, так как сервер получает пре-кодированный ответ. Этот id как раз таки используется в excludeCredentials, так и в allowList

  • type — Это тип, кой в данном случае “public-key”. В будущем возможны иные типы но на данный момент это единственный.

  • response — Это собственно сам ответ устройства.

  • response.clientDataJSON — Это созданный браузером объект содержащий информацию о сессии. Сервер декодируя этот объект имеет возможность узнать какой домен и протокол видел пользователь проверяя origin. Проверяя challenge с ранее сохраненным вызовом, сервер может узнать или была совершена MITM атака. clientDataJSON криптографически защищен, так что атакующий не сможет подменить информацию о сессии, и соответсвенно совершить фишинг атаку.

    Для декодирования base64url можно использовать библиотеку “base64url” в npm.

  • type — Тип ответа. webauthn.create для аттестации, и webauthn.get для авторизации.

  • challenge — Base64url кодированный вызов(challenge) установленный во время вызова navigator.credentials.create/get.

  • origin — Фактически протокол + домен откуда был сделан вызов WebAuthn API. Так же в себя включает порт если он не стандартный. origin это очень важно поле для фишинг безопасности, так как любые отклонения в значении этого поля означает потенциально фишинг атака. Модель безопасности WebAuthn API строится на стандартной модели W3C WebAppSec, “лимитируй доменное пространство, и проверяй ресурсы”. Здесь же тот же самый подход. Так что строгая проверка origin, обязательная. https://example.com не тоже самое что https://example.com:8181. Специфику контекстов безопасности мы обсудим дальше в статье.

  • crossOrigin — Опциональное поле, дающее знать или вызов был произведен через iframe. Имеет значение только для авторизационного ответа.

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

response может содержать два типа ответов: аттестационный и авторизационный.

  • Аттестационный когда пользователь добавляет устройство в свой аккаунт.

  • Авторизационный когда пользователь хочет зайти в свой аккаунт.

Аттестационный ответ / Attestation result

Типичный аттестационный ответ вы уже видели:

У него есть уникальное поле response.attestationObject — это CBOR кодированный аттестационный объект. Для декодирования base64url можно использовать библиотеку “base64url” в npm. Для CBOR же можно использовать “node-cbor”.

Декодировав мы получим:

  • fmt — Формат аттестации. На данный момент есть семь видов аттестации: “packed”, “fido-u2f”, “none”, “android-key”, “android-safetynet”, “tpm” и “apple”.

  • attStmt — Объект содержащий саму аттестацию. В данном случае пустой.

  • authData — Буфер содержащий некоторую сессионную информацию а также и информацию о новой учетной записи.

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

В целом обычному сервису аттестация не нужна. Аттестация это довольно сложный функционал, которой полезен банкам, гос услугам и т.д. WebAuthn API по умолчанию вырезает аттестацию что облегчает нам жизнь. Если вам интересно понять зачем аттестация и как ею пользоваться советую почитать мою статью на английском «Demystifying attestation and MDS”.

Возвращаемся к authData. AuthData это просто склеенный буфер:

Тут у нас есть:

  • RPID hash — Это 32х байтовый SHA256 хеш RPID

  • Flags — Это восьмибитный битовый массив содержащий информацию о аутентификационном событии. Нулевой бит отвечает за проверку присутствия пользователя UP. Второй бит отвечает за верификацию пользователя UV. Шестой(AT) и седьмой(ED) биты описывают наличие аттестационных данных и ответов от расширений.

  • Counter — uint32 счетчик. Этот счетчик используется для защиты от атаки повтором. Сервер хранит значение счетчика, и если при следующей аутентификации счетчик не увеличился то возможно это атака повтором.

Хеш RPID, флаги, и счетчик одинаковы для аттестационного и авторизационного ответов. В аттестационном ответе еще присутствует новая учетная запись и публичный ключ, Attested Credential Data, а также шестой бит в флагах AT будет высоким или 1.

  • AAGUID — Это уникальный идентификатор модели устройства. Все устройства одной модели будут иметь одинаковый AAGUID. В случае если вы не запросили аттестацию, то AAGUID будет заменен на нулевой GUID, или 00000000-0000-0000-0000-000000000000. Сам же AAGUID используется для поиска метаданных и проверку аттестации устройства.

  • CredId length — uint16 длина идентификатора учетной записи, credId.

  • COSE Public Key — Публичный ключ кодированный в формате COSE.

Декодирование AuthData делается обычной резкой буфера:

Кратко о контекстах безопасности в WebAuthn/FIDO2

В модели безопасности WebAuthn/FIDO2 есть два понятия: origin и rpid, или контекст для пользователя и контекст для аутентификатора.

RPID же это фактически домен родителя: “example.com”. Аутентификатор хранит учетные записи у себя парой: id + хеш RPID. Это защищает учетную запись от несанкционированного доступа со стороны посторонних сайтов. pupkin.com не сможет запросить доступ к учетной записи example.com, так как даже зная id, хеш RPID не совпадет.

Origin это описание контекста браузера. Фактически это просто URL который видит пользователь, “https://example.com”, но с отсутствующим путем. Еще он может включать в себя порт если тот не стандартный 80 или 443. Origin используется для защиты от фишинга, так как если origin не совпадает со строгим списком разрешенных то значит что это была фишинг атака.

Домен в origin и RPID могу различаться. Иногда нам приходиться менять откуда пользователь хочет зайти в свой аккаунт: auth.example.com, потом станет login.example.com, который потом переезжает на example.com. Собственно для этого и есть RPID. Во время создания учетной записи можно использовать RPID для регистрации учетной записи в специфичном контексте: https://login.example.com может запросить RPID example.com. Это возможно потому что субдомен может запросить доступ к контексту родительского домена. Ребенок выше. Так что субдомен login.example.com сможет запросить example.com, но не наоборот. Во время логина, в вызове WebAuthn API сервер просто установит RPID “example.com и таким методом получит доступ к учетной записи. То есть пользователь у себя в будет видеть адрес https://login.example.com но использовать учетную запись с example.com”. Это очень удобно для того чтобы иметь общий контекст для учетных записей, чтобы быть независимым от структуры субдоменов, но при этом иметь возможность контролировать с каких доменов можно производить аутентификацию.

Авторизационный ответ / Assertion result

Типичный авторизационый ответ выглядит так:

Главное отличие от аттестационного ответа это отсутствие attestationObject, и наличие новых полей:

  • AuthenticatorData — Это тот же attestationObject.authData, только без аттестационных данных и новой учетке

  • Signature — Подпись

  • UserHandle — Собственно это и есть user.id.

Пошаговый процесс проверки:

  1. Декодируем ClientDataJSON

  2. Проверяем чтобы вызов, challenge, совпадал с тем что мы сгенерировали. Если не совпадает то это скорее всего была MITM атака.

  3. Проверяем чтобы origin был в списке разрешенных. Если не совпадает то мы словили фишинг атаку!

  4. Проверяем чтобы ClientDataJSON тип был “webauthn.create” или “webauthn.get

  5. Если у нас аттестационный ответ, то парсим attestationObject

  6. Декодируем attestationObject.authData или authenticatorData.

  7. Проверяем чтобы UP и UV бит флаги былы высокими. Если UV низкий, то мы получили только один фактор(владения устройством) и соответственно нужен еще и пароль.

  8. Берем RPID который мы установили. Если rp.id не был установлен значит ваш RPID это ваш домен вашего сайта: example.com. Хешируем с помощью SHA256 и проверяем чтобы хеш RPID совпадал с authData.RPIDHash.

Если это webauthn.create:

  1. Если формат, fmt, у нас “none”, то просто успешно завершаем возвращая новый публичный ключ, идентификатор, и счетчик.

  2. Если же мы запросили аттестацию, то проводим её проверку:

Если это webauthn.get

  • Хешируем ClientDataJSON с помощью SHA256

  • Конкатенируем authData/authenticatorData с хешем clientDataJSON чтобы получить изначальное сообщение

  • Используя ранее сохраненный публичный ключ, проверяем подпись

  • Проверяем счетчик: если сохраненное значение счетчика было ноль, и значение счетчика в авторизационном ответе тоже ноль, значит устройство не поддерживает счетчик, пропускаем.

  • Если же сохраненное значение не ноль, или значение счетчика в авторизационном не ноль, то проверяем чтобы новое значение счетчика было больше чем сохраненное.

  • Сохраняем новое значение счетчика в базе данных.

Полезные ресурсы

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Работали ли вы с WebAuthn API?
0% Да 0
0% Нет 0
100% Что такое WebAuthn API? 1
Проголосовал 1 пользователь. Воздержался 1 пользователь.

ссылка на оригинал статьи https://habr.com/ru/post/648745/

Делаем встраиваемый полифункциональный зарядник

Цель — создать встраиваемый зарядник для аккумуляторов произвольного типа  с напряжением от 1 до 30 В и зарядным током до 10 А с пассивным охлаждением и без радиатора. И ещё надо:

  • выполнять диагностику аккумуляторов,

  • разряд аккумуляторов,

  • тренировку,

  • балансировку,

  • работать в составе распределённой системы,

  • обеспечивать резервными питанием внешние схемы,

  • сохранять подробные записи напряжений и токов за все время эксплуатации,

  • иметь графический дисплей и органы управления.

  • все сделать на доступных деталях.        

Перед этим уже было разработано два подобных устройства:

В этой статье решил чуть подробней описать процесс разработки архитектуры и схемотехники.

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

Способы использования девайса.

Проблема с аккумуляторами в том что даже зная всю теорию никогда не скажешь точно как поведёт себя конкретный аккумулятор. Встраиваемый зарядник не может позволить себе включить алярм, написать «out of service» и самоустраниться от процесса заряда. Работай с тем что дали. Значит зарядник должен быть умнее обычных. Но сразу умным быть нельзя. Отсюда следуют два основных свойства девайса: перепрограммируемость и связь с внешними более умными системами. Как следствие этого появляется много вариантов использования.  

Зарядник с балансировкой.

Выше показано как зарядник подключить к блоку из четырёх аккумуляторов. В этой схеме аккумуляторы  не только заряжаются, но и балансируются. После зарядки схема может разрядить аккумуляторы током до 50 А (в зависимости от нагрузочного резистора).Можно организовать тренировку аккумуляторов или непрерывное тестирование с целью узнать предельное количество циклов заряда разряда.  Температура каждого аккумулятора отслеживается отдельно сенсорами DS18S20 через интерфейс 1-wire.   

UPS для холодильника или насоса или чего-то другого.

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

Зарядник аккумуляторов одних от других

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

Дистанционно регулируемый источник напряжения или тока

Здесь с удалённого компьютера задаётся значение напряжения или тока на выходе платы. Поскольку интерфейс USB на плате может работать и в режиме Device и в режиме Host, то вместо компьютера можно подключить модем или WiFi модуль и работать через облака.   

Выбор архитектуры

При самом обобщённом представлении архитектура может выглядеть как показано ниже. Основными компонентами архитектуры являются ключи и повышающе/понижающий преобразователь напряжения. Ключи, естественно, не механические, а полупроводниковые. У механических ключей на основе реле слишком большая задержка, габариты и непредсказуемый дребезг. Полупроводниковые ключи могут быть выполнены на транзисторах по разным схемам. Ключи должны выдерживать токи до 15 А, иметь минимальное сопротивление. Переход в положение «включено» при этом не должен происходить мгновенно, поскольку это вызовет перегрузку по току. Значит транзисторные схемы должны обладать свойством плавного включения и быстрого выключения.  Тут сразу даю ссылку на хорошую статью-предупреждение про SOA (safe operation area) . Диоды в архитектуре обозначают реальные физические диоды. Они нужны для мгновенного поддержания напряжения одним из источников при спаде напряжения на другом источнике. Но чтобы на диодах в дальнейшем не рассеивалась энергия они шунтируются дополнительными ключами. За всеми процессами следит и управляет микроконтроллер. 

Рассмотрено было два варианта архитектуры. Первый вариант использует для управления напряжением интегрированный повышающе/понижающий преобразователь на специализированной микросхеме (Buck/Boost DC/DC IC). Второй вариант использует отдельный микроконтроллер с цифровой обработкой сигналов (DSP) для управления симметричным H-мостом. Такой мост может повышать и понижать напряжение в обоих направлениях.

Первый вариант требует дополнительных ключей, второй вариант требует дополнительного микроконтроллера и дополнительного софта с высокой степенью надёжности. Я выбрал первый вариант. Вариант с DSP оставим до лучших времён.

Почему в качестве цели выбрано 300 Вт?

Потому что очень желательно получить максимальную мощность без радиаторов в габарите 108 мм на 100…150 мм. Это стандартная ширина для корпусных профилей устанавливаемых на DIN рейку. Отсутствие радиаторов удешевляет девайс и упрощает сборку. 

При КПД 99% на плате будет выделяться 3 Вт. Согласно апноту от ST корпуса планарных транзисторов (SMD корпуса тоже выбраны по причине технологичности) типов D2PAK, DPAK, SOT-223, PowerSO8™, PowerFLAT™, PowerSO-10™  могут выделять на участке платы 200 мм^2 без радиатора приблизительно до 1,5 Вт с перегревом 100 С.

Для определённости выбираем корпус PowerFLAT™ (6×5) и получаем что на участке 200 мм^2 и с толщиной меди 36 мкм можем рассеивать на транзисторе 2 Вт. Градиент температур от кристалла до платы будет при этом 75 С.  

Как покажет симуляция ниже, на самих транзисторах выделяется максимум 1.5 Вт, остальное на индуктивности и шунтах. Поэтому вправе надеяться, что при температуре окружающей среды в 25 С максимальная температура на плате вблизи транзисторов не достигнет 90 С. Это с учётом дополнительных слоёв и переходных отверстий (дают уменьшение теплового сопротивления до 15 °C/W) для лучшего теплоотвода.

Выбор схемотехники ключей

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

Самый простой способ сделать ключ — это использовать p-канальный MOSFET. Чтобы его открыть надо напряжение на затворе просто притянуть в земле. Но это дефицитные детали. На момент написания статьи в стоке Digi-Key был всего один транзистор в приемлемом корпусе с минимальным сопротивлением 33 мОм в открытом состоянии — SQJ479EP-T1_GE3. Но такое сопротивление слишком высокое.  При 14А на транзисторе будет выделяться более 6 Вт. Транзисторов с меньшим сопротивлением и необходимым напряжение в стоке просто нет. 

Значит остаются только n-канальные транзисторы. Тут выбор ещё широкий и сопротивления в открытом состоянии гораздо меньше. Были выбраны NTMFS5C430NT1G с сопротивление открытого канала 1.7 мОм, это 0.3 Вт потерь при токе 14А. 

Но чтобы открыть n-канальный транзистор на его затвор надо подать напряжение на 5-10 В выше чем коммутируемое напряжение. Такое напряжение чем-то надо создать.   

Можно использовать вот такой бустер. Он из 5 В делает 44 В. Выдаваемый ток чуть более 20 мА.

Но количество деталей здесь удручает при таком небольшом токе. Можно, конечно, сказать, что MOSFET-ы практически не требуют тока при управлении. Но дело в том, что ещё придётся делать управляющую многими затворами схему, которая и съест основную долю тока.  

В прежних схемах я использовал вот такие специализированные микросхемы управления ключами:

Они внутри себя содержат бустеры, и эффективно управляли транзисторами и обладали всевозможными автономными защитами. Но они кончились в продаже.

Дешево могли бы выглядеть бустеры на SN6501, но и их уже трудно найти в продаже.

После бустера могла бы быть вот такая схема управления силовым ключом c использованием драйвера полумоста LTC7060:

Бустер на этой схеме изображён источником напряжения Vboost. Схема достаточно надёжная и простая. Бросок тока при включении не превышает 70А, а выключение происходит быстрее чем за 1 мкс. На месте LTC7060 мог бы быть любой драйвер полумоста или драйвер верхнего ключа. Здесь конкретно выбрано первое, что нашлось в библиотеке LTSpice. Единственное смущает необходимость гальванической связи земель драйвера с силовой землёй и некоторая зависимость параметров схемы от напряжения коммутируемой шины.

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

Схема Buck/Boost DC/DC была взята из предыдущих проектов. Но в ней пришлось поменять транзисторы и конденсаторы. Появилась необходимость заново провести симуляцию работы этого узла, и пользуясь случаем дополнительно поработать над повышением КПД. В результате в режиме повышения напряжения удалось достичь теоретического КПД в 99.1 % при выходном токе в 10 А и выходном напряжении 30В. 

Для чипа LTC3789 существует как минимум два хороших инструмента симуляции: LTpowerCAD и LTSpice. Другие симуляторы не подойдут поскольку модель LTC3789 фирмой Analog Devices предоставляется только в бинарном виде. LTpowerCAD  наиболее удобен для оптимизации КПД, переходных характеристик, и подбора компонентов. Но остаются ещё ряд неизвестных величин влияющих на надёжность схемы. Это токи через разные конденсаторы и бутстрепные диоды, перенапряжения на отдельных элементах, влияние паразитных элементов печатной платы и проч. Поэтому остаётся потребность в классическом симуляторе типа LTspice. Симуляция в LTspice сложнее, но в какой-то степени вызывает большее доверие. Но времени требует больше.Ниже приведена модель для симулятора с учетом паразитных элементов — это индуктивность измерительного шунта, емкость катушки индуктивности, индуктивности проводников управляющих затворами.  

Модель транзистора и вариации модели транзистора.

Транзисторы в модели могут быть различной степени детализации. Для транзисторов фирмы Infineon предоставляется библиотека OptiMOS6_40V_LTSpice.lib с четырьмя типа моделей с разной детализацией от L0 до L4. Тип L0 самый простой, тип L4 — самый сложный и учитывает самонагрев кристалла и тепловую модель среды. Чем сложнее модель, тем медленнее идёт симуляция. 

Более подробно написано в  Application Note — Introduction to Infineons Simulation Models for Power MOSFETs.pdf

Точность симуляции

Особенности моделей транзисторов требуют специальной настройки опций симулятора LTSpice. Иначе симуляция может закончиться с ошибкой или оказаться слишком медленной или неточной.

Но, к сожалению, в LTspice так и не удалось сделать настройки пригодные для транзисторов моделей выше L0.  

Опции симулятора задаются на схеме строкой: 

.OPTIONS reltol=.001 abstol=1nA trtol=1.0

Параметр trtol (Transient error tolerance) имеет наибольшее влияние на скорость симуляции. Если его установить в значение 7.0, то скорость симуляции увеличивается в разы. 

Как влияет опция trtol  на точность симуляции показано выше. Верхний график (рассчитывался 15 мин) показывает ток через бутстрепный диод D1 с  trtol  = 7.0 , а нижний (рассчитывался 30 мин) тот же ток с trtol = 1.0. На графике с trtol  = 7.0 явно видны флуктуации тока в пределах 1 А. Нижний график более ровный. Но разница в среднеквадратическом значении тока между графиками составляет всего около 2% (240.12 мА на верхнем против 245.48 мА на нижнем)

Токи через входные и выходные конденсаторы.

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

Чтобы конденсаторы не перегрелись и не взорвались надо обеспечить безопасную величину токов через них.

Расчёт ведём в самом тяжёлом режиме (30В, 10А на выходе) для электролитических конденсаторов, поскольку они выделяют тепловую мощность большую чем керамические конденсаторы в данной схеме.  

Выше график тока через электролитический конденсатор CO4 на выходе . RMS = 1.26А

Допустимый ток через электролит = 2,2 А при 100 Кгц, т.е. в ограничение укладываемся. Но если бы электролит был один, то уже была бы проблема

Выше график тока через электролитический конденсатор CI1 на входе. RMS = 0.78А

Допустимый ток через электролит = 2.2 А при 100 Кгц, т.е. В ограничение тоже укладываемся. 

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

Опасные выбросы напряжения.

Интересно посмотреть график выбросов напряжения на бутстрепном диоде D1.

Здесь видно, что перенапряжения могут доходить до 45 В, наш диод должен выдержать.
Здесь видно, что перенапряжения могут доходить до 45 В, наш диод должен выдержать.

Ток через индуктивность.

Пик тока доходит до 19А при частоте 200 Кгц. Выбранная индуктивность допускает ток до 31 А и значит здесь все ограничения тоже соблюдены.

Самый опасный источник ЭМИ

Важно также знать какие импульсные токовые перегрузки могут появляться в данной схеме. И такие токи были найдены — это токи в стоках и истоках транзисторов Q2  и  Q3 и через шунт R3. Они достигают величины  26 А с длительностью импульса  10 нс, это частота 100 МГц. Поэтому особое внимание должно быть уделено трассировке пути тока от шунта и транзисторов до ближайших керамических конденсаторов, поскольку эта петля станет основным источником помех для всей остальной схемы.   

Почему ставить параллельно транзисторы бесполезно.

Как бы это не было контринтуитивно, но параллельно включённые транзисторы не увеличивают КПД, а несколько ухудшают. Причём не важно в каком из четырех плеч это реализовано. Польза от параллельного включения только в распределении тепловыделения между двумя кристаллами, это снижает тепловую нагрузку на каждом из них. 

Какую выбрать частоту работы DC/DC?

Симуляция показала —  уменьшение частоты приводит к увеличению КПД, хотя при этом увеличивается ток через индуктивность и через конденсаторы. 

Причину этого эффекта можно увидеть в LTpowerCAD. Дело в том, что потери в транзисторах на переключение значительно превышают все остальные, и поэтому уменьшение частоты переключений имеет главное влияние на КПД.

Однако увеличение частоты в два раза пропорционально уменьшает размах пульсаций на выходе. Если минимальные пульсации важны, то придётся жертвовать либо КПД, либо ценой (надо будет ставить больше конденсаторов).

Расчёт потерь и КПД в симуляторе.

Доверяй, но проверяй. Поэтому перепроверим расчёты КПД в симуляторе. 

Для того чтобы симулятор автоматически произвёл расчёт потерь и КПД добавляем опцию  steady в строку .tran 20m  steady.  По умолчанию симулятор сам попытается определить установившийся режим чтобы в нем рассчитать потери, но как оказалось в данной схеме он это делает слишком рано. Поэтому была введена опция  ststdelay=19ms в строке .OPTIONS reltol=.001 abstol=1nA trtol=1.0 ststdelay=19ms.  Она указывает симулятору начать расчёт потерь через строго заданную задержку в 19 мс.

Таблица расчёта потерь в симуляторе LTspice . 24 В на входе, 30В 10А на выходе. Модель транзисторов — L0.
Как видно из таблицы, расчёты симулятора довольно точно совпадают с расчетами LTpowerCAD. Это говорит о том, что модели в симуляторе можно доверять. 

Расчёт делителя в цепи обратной связи DC/DC

В схеме выходное напряжение buck-boost DC/DC преобразователя задаётся с помощью ЦАП. Для этого напряжение с выхода ЦАП подмешивается к напряжению с выхода преобразователя и подаётся на референсный вход FB микросхемы U12 LTC3789EGN. Работа микросхемы  LTC3789EGN устроена так что она регулирует свой выход так чтобы на входе FB всегда оставалось стабильное напряжение 0.8 В. 

ЦАП может выдавать напряжение от 0 до 2.5 В или от 0 до 5 В, а на выходе DC/DC мы хотели бы получать от 1 до 33 В. 

Вопрос: какие сопротивления должны иметь резисторы делителя R28, R29, R30 чтобы корректно подмешивать напряжение ЦАП к выходному напряжению и получить желаемые выходные напряжения DC/DC?  

Обычно ответ находят составлением системы уравнений на основе схемы, и решением этой системы либо аналитически, либо численно в таких пакетах как: Wolfram Mathematica, MathCAD, Matlab и прочих.

Однако с некоторых пор свободно доступен симулятор Microcap 12. И этот симулятор умеет проводить оптимизации параметров электрических цепей. Задача поиска сопротивлений в делителе сводится к задаче оптимизации поскольку поиск выполнения равенства это тоже оптимизация.   

Решение: Роль двух уравнений у нас будут играть две одинаковые цепи в разных состояниях на одном листе, как показано на рисунке (файл Solver.cir). Напряжение на выходе DC/DC и на выходе ЦАП представим в виде идеальных источников напряжения. Соответствие резисторов на схеме симулятора и на реальной схеме зарядника также указано на рисунке. Резистору от выхода DC/DC на вход FB микросхемы  LTC3789EGN сразу назначим номинал в 220 КОм. Это рекомендуется в даташите. Остаётся рассчитать сопротивление резисторов R28 и R30. Они представлены на схеме симулятора резисторами RH1,RH2 (имеют общий параметр RH, задающий их сопротивление) и RL1,RL2 (имеют общий параметр RL, задающий их сопротивление). Напряжение на входе FB на схеме симулятора задаётся параметром Uref. Далее по шагам:

Шаг 1.  Задаём начальные значения параметров RL и  RH, наугад, в пределах разумных допущений.  Устанавливаем желаемые значения для выходного напряжения и напряжений на выходе ЦАП. 

Шаг 2. Проводим  анализ переходного процесса Alt+1. Отрезок времени для симуляции может быть очень коротким.

Шаг 3. Задаём критерии оптимизации Ctrl+F11. Ищем значения RH  и RL так чтобы U1  и  U2 равнялись заданному на схеме Uref .

Шаг 4. Запускаем оптимизацию (жмем Optimize) и сохраняем результат (жмём Apply). Получаем модель с откорректированными параметрами

Шаг 5. Подбираем резисторы из существующих номиналов наиболее близко соответствующие расчётным. Строим новую модель (файл Verifier.cir), чтобы узнать насколько изменяться выходные напряжения DC/DС из-за неточного совпадения номиналов.

Шаг 6. Проводим  анализ переходного процесса Alt+1. Задаём критерии оптимизации Ctrl+F11. На этот раз ищем значения напряжения источников Vout1 и Vout2

Шаг 7. Получаем значения напряжения на выходе DC/DC при крайних значениях на выходе ЦАП.

Отличие полученных напряжений от желаемых в пределах допустимого. 

Итак, задача решена, без формул и математики.  Идеальное решение для тех кто закончил ВУЗ с тройками. Правда симулятор выдает решение не мгновенно, а через существенное время в пределах 10 сек. Если модель будет сложнее и больше состояний, то время расчёта может сильно затянуться. Поэтому Matlab стоит держать в запасе, а математику подучить.

Расчет наихудшего случая методом Monte Carlo

На схеме зарядника есть несколько измерителей напряжения выполненных по дифференциальной схеме. Дифференциальная схема хорошо подавляет синфазные помехи. Такие помехи возникают из-за наводок в цепи земли при прохождении импульсных токов большой амплитуды в DC/DC преобразователе. В идеале дифференциальная схема должна полностью подавить помехи, но неидеальность операционных усилителей и разброс  реальных значений номиналов компонентов препятствует этому.  

Вопрос: Какого класса точности надо выбрать компоненты чтобы  уровень подавления не деградировал значительно из-за случайного разброса номиналов.

Решение: Создаём в симуляторе Microcap 12 модель схемы с указанием возможного разброса номиналов в процентах. Элемент Vsin имитирует источник синфазных помех.  Запускаем вычисления методом Monte Carlo (режим Worst Case) и получаем все возможные значения уровня подавления синфазного сигнала от худшего до лучшего.

На рисунке выше представлено три варианта расчётов с разными показателями точности резисторов (с конденсаторами нет большого выбора, применяем лучшее  что есть — 1%). С правой стороны графики амплитуды напряжения на выходе в зависимости от частоты. Чем меньше амплитуда, тем лучше.От верхней до нижней схемы точность резисторов увеличивается: 5%, 1%, 0.1%.

Как видно из результатов, применение обычных резисторов с точностью 5% приведёт к деградации уровня подавления приблизительно в два раза. Т.е. некоторые девайсы с такими резисторами будут в показаниях шуметь в два раза сильнее других. Резисторы в 1% более приемлемы, и 0.1%  будут совсем то что надо. 

Интересно, что начиная со 100 КГц точность номиналов практически не влияет на уровень подавления и определяется только свойствами операционного усилителя. Это в частности говорит и о недостатке самой схемы, ее недостаточной симметричности.  Но в данном девайсе делать более сложную схему не оправдано. 

Печатная плата

Принципы празработки печатной платы те же что и здесь.

Моделирование распределения токов с помощью PDN analyzer

Инструмент PDN analyzer ярко рекламируется на сайте Altium. Но в самой программе Altium Designer  он выглядит куцым однооконным диалогом

Суть работы плагина PDN analyzer проста. Он может вычислить падение напряжения на заданном проводнике печатной платы при заданном постоянном токе, и показать распределение плотности тока.  Никаких тепловых расчётов или расчётов электромагнитного поля в динамике PDN analyzer не делает. Честно признать, PDN analyzer хорошо вылавливает только совсем очевидные ошибки, когда, например, ток в 10А переносят на другой слой платы через одно переходное отверстие  диаметром 0.3 мм. Но отдельные участки трассировки стоит проверить, поскольку PDN analyzer может показать неожиданно интересный результат. 

Как и любое детализированное моделирование расчеты в PDN analyzer занимают значительное время. Это дорогое удовольствие. Поэтому я решил проверить только один самый критичный, на мой взгляд, участок. Этот участок обведен красным.

На схеме это будет вот этот проводник
На схеме это будет вот этот проводник

Проблема в том, что участок по площади маленький и на нём ток из стока транзистора Q8 переходит с нижнего слоя на верхний и уходит через шунт R24 на землю. 

Вопрос: Сколько переходных отверстий надо ставить и какое в результате получится сопротивление этого участка

Решение: Поставим максимум переходных, сколько позволяет площадь участка. Но проверим сколько тока приходится на каждое переходное. Зададим ток 25А. Такой амплитуды максимальный ток на этом участке мы зафиксировали в симуляторе.

Результаты: 

Сопротивление от истока Q8 до резистора R24 оказалось чуть большим 0.001 Ом. Но это уже больше 0.15 Вт потерь на максимальном токе. Это намекает, что теоретический КПД в 99% в реальности скорее всего не получится. Потому что около 0.2 Вт потерь следует ожидать в проводниках платы.

Здесь показана позиция переходного отверстия, через которое потечёт максимальный ток — 6.7А. Вид на верхний слой платы

Здесь показана позиция переходного отверстия, через которое потечёт максимальный ток - 6.7А. Вид на нижний слой платы
Здесь показана позиция переходного отверстия, через которое потечёт максимальный ток — 6.7А. Вид на нижний слой платы
Здесь показана позиция переходного отверстия, через которое потечёт минимальный ток - 0.022А. Вид на верхний слой платы
Здесь показана позиция переходного отверстия, через которое потечёт минимальный ток — 0.022А. Вид на верхний слой платы
Здесь показан вид внутри платы на переходные отверстия участка. Тёмно-красный означает максимальную плотность тока. Зелёный - минимальную.
Здесь показан вид внутри платы на переходные отверстия участка. Тёмно-красный означает максимальную плотность тока. Зелёный — минимальную.

Из результатов видно, что разница в токе проходящем через разные переходные отверстия превышает 300 раз! 

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

Распиновка платы

По возможности выходы сделаны с одной стороны, а входы с другой. Разъёмы аккумулятора и нагрузки штатно выдерживают 50А. Выходы OUT1…OUT4 допускают переменный и постоянный ток до 2А. Аналоговые входы допускают дифференциальное напряжение до 30В.

Весь проект и модели можно найти здесь — https://github.com/Indemsys/Multifunctional-charger-BACKPMAN30

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


ссылка на оригинал статьи https://habr.com/ru/post/648589/

Прогнозируем реальные вероятности

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

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

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

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

Для калибровки можно использовать достаточно большое количество методов:

¾  Гистограммная калибровка;

¾  Изотоническая регрессия;

¾  Калибровка Платта;

¾  Логистическая регрессия;

¾  Деревья калибровки;

¾  Ансамблирование;

¾  Сглаживание меток;

¾  Использование фокальной ошибки и т.д.

Их применение варьируется в зависимости от ситуации.

Откалибровывать нашу модель мы будем в Python. Поэтому мы рассмотрим калибровку на примере изотонической и логистической регрессий, так как они уже реализованы в библиотеке SciKit-Learn и будут достаточно показательны. 

Вот исходный тестовый набор:

from sklearn.datasets import make_classification a, b = make_classification(     n_samples = 12000, # количество сэмплов     n_features = 20, # количество функций     n_informative = 20, # количество информ. функций     n_redundant = 10, # количество избыточных функций     weights = [.10, .1], # пропорции сэмплов для каждого класса     random_state = 0) # генерация случайных чисел a_tr, a_val, a_t = a[:4000], a[4000:8000], a[8000:] b_tr, b_val, b_t = b[:4000], b[4000:8000], b[8000:]

Следующим шагом будет обучение. Мы воспользуемся случайным лесом (RandomForestClassifier):

from sklearn.ensemble import RandomForestClassifier RF = RandomForestClassifier().fit(a_tr, b_tr) # выстраивание случайного леса из исходного набора prb = RF.predict_proba(a_val)[:, 1] # прогностическая вероятность

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

Логистическая регрессия строит прогнозы в бинарном значении, то есть в диапазоне от 0 до 1.

from sklearn.linear_model import LogisticRegression logistic_regress = LogisticRegression().fit(prb.reshape(-1, 1), b_val) # подгонка модели с его обучением # reshape — изменение формы массива prb_logistic_regress = logistic_regress.predict_proba(RF.predict_proba(a_t)[:, 1].reshape(-1, 1))[:, 1]

Изотоническая регрессия подгоняет линию к последовательности наблюдений.

from sklearn.isotonic import IsotonicRegression isotonic_regress = IsotonicRegression(y_min = 0, y_max = 1, out_of_bounds = 'clip').fit(prb, b_val)  # out_of_bounds —  обработка значений за пределами диапазона данных # 'clip' — значения, соответствующие конечным точкам интервала prb_isotonic_regress = isotonic_regress.predict_proba(RF.predict_proba(a_t)[:, 1]) 

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

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

Диаграмма является отображением функции распределения вероятности. Число столбцов (правильнее будет называть их группами) можно найти с помощью:

  • формулы Стерджеса;

  • правила Райса;

  • формулы Доана;

  • правила Скотта;

  • правила Фридмана-Диакониса.

Так вот в средней ошибке калибровки количество
ячеек (n) и будет соответствовать числу групп. Мы определим это количество с
помощью правила Фридмана-Диакониса, так как оно встроено в функцию histogram в numpy.

IQR – это межквартильный размах. Грубо говоря, это разница между третьим и первым квартилями, которые делят упорядоченный набор данных на четыре части.

В итоге необходимая нам метрика выглядит так:

def exp_cal_err(b, prb):   import numpy as np   num_count, num_edges = np.histogram(prb, bins = 'fd') #вычисление гистограммы набора данных   #'fd' — правило Фридмана-Диакониса   nums = len(num_count) #количество ячеек   num_edges[0] -= 1e-8 #левый край не включен   num_id = np.digitize(prb, num_edges, right = True) – 1 #вычисление индексов числовых интервалов   num_b_sum = np.bincount(num_id, weights = b, minlength = nums) #количество вхождений в массив   num_prb_sum = np.bincount(num_id, weights = prb, minlength = nums)   num_b_mean = np.divide(num_b_sum, num_count, out = np.zeros(nums), where = num_count > 0) #деление массивов   num_prb_mean = np.divide(num_prb_sum, num_count, out = np.zeros(nums), where = num_count > 0)   expcaliber = np.abs((num_prb_mean - num_b_mean) * num_count).sum() / len(prb) #конечная формула   return expcaliber

Наконец, сравним калибровку трех моделей. ECE будет следующей:

RandomForest — 7.0%

RandomForest + LogisticReg — 2.3%

RandomForest + IsotonicReg — 1.2%

Таким образом, изотоническая регрессия показала самое маленькое отклонение от реальной вероятности в 1.2%. Эта будет наиболее подходящая модель с точки зрения калибровки.

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


ссылка на оригинал статьи https://habr.com/ru/post/648753/