[{"data":1,"prerenderedAt":9755},["ShallowReactive",2],{"navigation_docs":3,"-csharp-desktop-ui-13a-ui-ux-principles":2949,"-csharp-desktop-ui-13a-ui-ux-principles-surround":9750},[4,1640,1765,2219,2352,2559,2641,2691,2748,2782,2908,2945],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"C#","i-devicon-csharp","/csharp","01.csharp",[10,13,60,90,120,202,219,253,379,404,457,650,1346,1636],{"title":11,"path":7,"stem":12},"C# Roadmap","01.csharp/index",{"title":14,"icon":15,"path":16,"stem":17,"children":18,"page":59},"Fundamentals","i-lucide-book-open","/csharp/fundamentals","01.csharp/01.fundamentals",[19,23,27,31,35,39,43,47,51,55],{"title":20,"path":21,"stem":22},"Вступ до екосистеми .NET","/csharp/fundamentals/introduction-to-ecosystem","01.csharp/01.fundamentals/01.introduction-to-ecosystem",{"title":24,"path":25,"stem":26},"Структура програми на C#","/csharp/fundamentals/program-structure","01.csharp/01.fundamentals/02.program-structure",{"title":28,"path":29,"stem":30},"Змінні та Типи Даних","/csharp/fundamentals/variables-data-types","01.csharp/01.fundamentals/03.variables-data-types",{"title":32,"path":33,"stem":34},"Масиви","/csharp/fundamentals/arrays","01.csharp/01.fundamentals/04.arrays",{"title":36,"path":37,"stem":38},"Strings & Text Handling","/csharp/fundamentals/strings-text-handling","01.csharp/01.fundamentals/05.strings-text-handling",{"title":40,"path":41,"stem":42},"Дати і Час","/csharp/fundamentals/dates-time-handling","01.csharp/01.fundamentals/06.dates-time-handling",{"title":44,"path":45,"stem":46},"Потік Керування","/csharp/fundamentals/control-flow","01.csharp/01.fundamentals/07.control-flow",{"title":48,"path":49,"stem":50},"Методи","/csharp/fundamentals/methods","01.csharp/01.fundamentals/08.methods",{"title":52,"path":53,"stem":54},"Основи Відлагодження","/csharp/fundamentals/debugging-basics","01.csharp/01.fundamentals/09.debugging-basics",{"title":56,"path":57,"stem":58},"Інтерактивна Консоль (Classic)","/csharp/fundamentals/interactive-console","01.csharp/01.fundamentals/10.interactive-console",false,{"title":61,"icon":62,"path":63,"stem":64,"children":65,"page":59},"OOP","i-lucide-box","/csharp/oop","01.csharp/02.oop",[66,70,74,78,82,86],{"title":67,"path":68,"stem":69},"Package Management (Управління Пакетами)","/csharp/oop/package-management","01.csharp/02.oop/01.package-management",{"title":71,"path":72,"stem":73},"Класи та Об'єкти","/csharp/oop/classes-objects","01.csharp/02.oop/02.classes-objects",{"title":75,"path":76,"stem":77},"Властивості та Поля","/csharp/oop/properties-fields","01.csharp/02.oop/03.properties-fields",{"title":79,"path":80,"stem":81},"Стовпи ООП","/csharp/oop/oop-pillars","01.csharp/02.oop/04.oop-pillars",{"title":83,"path":84,"stem":85},"Advanced Types","/csharp/oop/advanced-types","01.csharp/02.oop/05.advanced-types",{"title":87,"path":88,"stem":89},"Namespaces (Простори Імен)","/csharp/oop/namespaces","01.csharp/02.oop/06.namespaces",{"title":91,"icon":92,"path":93,"stem":94,"children":95,"page":59},"Advanced Core","i-lucide-zap","/csharp/advanced-core","01.csharp/03.advanced-core",[96,100,104,108,112,116],{"title":97,"path":98,"stem":99},"Generics (Узагальнення)","/csharp/advanced-core/generics","01.csharp/03.advanced-core/01.generics",{"title":101,"path":102,"stem":103},"Делегати, Події та Лямбда-вирази","/csharp/advanced-core/delegates-events-lambdas","01.csharp/03.advanced-core/02.delegates-events-lambdas",{"title":105,"path":106,"stem":107},"Interfaces Deep Dive (Інтерфейси: Поглиблений Розгляд)","/csharp/advanced-core/interfaces-deep-dive","01.csharp/03.advanced-core/03.interfaces-deep-dive",{"title":109,"path":110,"stem":111},"Обробка Винятків","/csharp/advanced-core/exception-handling","01.csharp/03.advanced-core/04.exception-handling",{"title":113,"path":114,"stem":115},"Pattern Matching","/csharp/advanced-core/pattern-matching","01.csharp/03.advanced-core/05.pattern-matching",{"title":117,"path":118,"stem":119},"Додаткові Можливості C#","/csharp/advanced-core/additional-features","01.csharp/03.advanced-core/06.additional-features",{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":59},"Architecture Best Practices","i-lucide-building-2","/csharp/architecture-best-practices","01.csharp/04.architecture-best-practices",[126,130,149,153,157,161,165,169],{"title":127,"path":128,"stem":129},"Software Design Principles (Частина 1)","/csharp/architecture-best-practices/software-design-principles","01.csharp/04.architecture-best-practices/01.software-design-principles",{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":59},"Design Patterns","i-lucide-folder","/csharp/architecture-best-practices/design-patterns","01.csharp/04.architecture-best-practices/02.design-patterns",[136],{"title":137,"icon":132,"path":138,"stem":139,"children":140,"page":59},"Creational","/csharp/architecture-best-practices/design-patterns/creational","01.csharp/04.architecture-best-practices/02.design-patterns/creational",[141,145],{"title":142,"path":143,"stem":144},"Singleton (Одинак)","/csharp/architecture-best-practices/design-patterns/creational/singleton","01.csharp/04.architecture-best-practices/02.design-patterns/creational/01.singleton",{"title":146,"path":147,"stem":148},"Builder (Будівельник)","/csharp/architecture-best-practices/design-patterns/creational/builder","01.csharp/04.architecture-best-practices/02.design-patterns/creational/02.builder",{"title":150,"path":151,"stem":152},"Building Professional CLIs","/csharp/architecture-best-practices/building-professional-clis","01.csharp/04.architecture-best-practices/03.building-professional-clis",{"title":154,"path":155,"stem":156},"Validation & Flow Control","/csharp/architecture-best-practices/validation-flow-control","01.csharp/04.architecture-best-practices/04.validation-flow-control",{"title":158,"path":159,"stem":160},"The Modern .NET Host (Microsoft.Extensions)","/csharp/architecture-best-practices/modern-dotnet-host","01.csharp/04.architecture-best-practices/05.modern-dotnet-host",{"title":162,"path":163,"stem":164},"Data Mapper: Repository та DAO патерни (Частина 1)","/csharp/architecture-best-practices/data-mapper-part1","01.csharp/04.architecture-best-practices/06.data-mapper-part1",{"title":166,"path":167,"stem":168},"Data Mapper: Repository та DAO патерни (Частина 2)","/csharp/architecture-best-practices/data-mapper-part2","01.csharp/04.architecture-best-practices/07.data-mapper-part2",{"title":170,"icon":132,"path":171,"stem":172,"children":173,"page":59},"Di Ioc","/csharp/architecture-best-practices/di-ioc","01.csharp/04.architecture-best-practices/08.di-ioc",[174,178,182,186,190,194,198],{"title":175,"path":176,"stem":177},"Проблема залежностей та Інверсія Контролю","/csharp/architecture-best-practices/di-ioc/the-dependency-problem","01.csharp/04.architecture-best-practices/08.di-ioc/01.the-dependency-problem",{"title":179,"path":180,"stem":181},"Будуємо власний Service Container","/csharp/architecture-best-practices/di-ioc/build-your-own-container","01.csharp/04.architecture-best-practices/08.di-ioc/02.build-your-own-container",{"title":183,"path":184,"stem":185},"Service Locator: Паттерн та Анти-паттерн","/csharp/architecture-best-practices/di-ioc/service-locator-pattern","01.csharp/04.architecture-best-practices/08.di-ioc/03.service-locator-pattern",{"title":187,"path":188,"stem":189},"Паттерни Dependency Injection","/csharp/architecture-best-practices/di-ioc/dependency-injection-patterns","01.csharp/04.architecture-best-practices/08.di-ioc/04.dependency-injection-patterns",{"title":191,"path":192,"stem":193},"Microsoft DI: IServiceCollection та IServiceProvider","/csharp/architecture-best-practices/di-ioc/microsoft-di-deep-dive","01.csharp/04.architecture-best-practices/08.di-ioc/05.microsoft-di-deep-dive",{"title":195,"path":196,"stem":197},"Service Lifetimes та Scopes","/csharp/architecture-best-practices/di-ioc/service-lifetimes-and-scopes","01.csharp/04.architecture-best-practices/08.di-ioc/06.service-lifetimes-and-scopes",{"title":199,"path":200,"stem":201},"DI Анти-паттерни та Найкращі Практики","/csharp/architecture-best-practices/di-ioc/di-anti-patterns-and-best-practices","01.csharp/04.architecture-best-practices/08.di-ioc/07.di-anti-patterns-and-best-practices",{"title":203,"icon":132,"path":204,"stem":205,"children":206,"page":59},"Standard Library","/csharp/standard-library","01.csharp/05.standard-library",[207,211,215],{"title":208,"path":209,"stem":210},"Collections (Колекції)","/csharp/standard-library/collections","01.csharp/05.standard-library/01.collections",{"title":212,"path":213,"stem":214},"High Performance Types (Високопродуктивні Типи)","/csharp/standard-library/high-performance-types","01.csharp/05.standard-library/02.high-performance-types",{"title":216,"path":217,"stem":218},"LINQ (Language Integrated Query)","/csharp/standard-library/linq","01.csharp/05.standard-library/03.linq",{"title":220,"icon":221,"path":222,"stem":223,"children":224,"page":59},"System Internals Concurrency","i-lucide-server","/csharp/system-internals-concurrency","01.csharp/06.system-internals-concurrency",[225,229,233,237,241,245,249],{"title":226,"path":227,"stem":228},"Memory Management","/csharp/system-internals-concurrency/memory-management","01.csharp/06.system-internals-concurrency/01.memory-management",{"title":230,"path":231,"stem":232},"Reflection API: System.Type та Метадані","/csharp/system-internals-concurrency/reflection-fundamentals","01.csharp/06.system-internals-concurrency/02.reflection-fundamentals",{"title":234,"path":235,"stem":236},"Attributes та Dynamic Language Runtime","/csharp/system-internals-concurrency/attributes-dynamic","01.csharp/06.system-internals-concurrency/03.attributes-dynamic",{"title":238,"path":239,"stem":240},"Expression Trees: Швидка Альтернатива Рефлексії","/csharp/system-internals-concurrency/expression-trees-compiled","01.csharp/06.system-internals-concurrency/04.expression-trees-compiled",{"title":242,"path":243,"stem":244},"Source Generators: Compile-Time Code Generation","/csharp/system-internals-concurrency/source-generators","01.csharp/06.system-internals-concurrency/05.source-generators",{"title":246,"path":247,"stem":248},"Multithreading Fundamentals","/csharp/system-internals-concurrency/multithreading-fundamentals","01.csharp/06.system-internals-concurrency/06.multithreading-fundamentals",{"title":250,"path":251,"stem":252},"Synchronization Primitives","/csharp/system-internals-concurrency/synchronization-primitives","01.csharp/06.system-internals-concurrency/07.synchronization-primitives",{"title":254,"icon":255,"path":256,"stem":257,"children":258,"page":59},"System Programming Windows","i-lucide-cpu","/csharp/system-programming-windows","01.csharp/07.system-programming-windows",[259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375],{"title":260,"path":261,"stem":262},"Як Працює Операційна Система","/csharp/system-programming-windows/how-os-works","01.csharp/07.system-programming-windows/01.how-os-works",{"title":264,"path":265,"stem":266},"Процеси в .NET — API та Запуск","/csharp/system-programming-windows/processes-in-dotnet","01.csharp/07.system-programming-windows/02.processes-in-dotnet",{"title":268,"path":269,"stem":270},"Процеси в .NET — IPC та Міжпроцесна Комунікація","/csharp/system-programming-windows/02a.processes-ipc","01.csharp/07.system-programming-windows/02a.processes-ipc",{"title":272,"path":273,"stem":274},"Application Domains та Збірки — AppDomain і AssemblyLoadContext","/csharp/system-programming-windows/appdomains-assemblies","01.csharp/07.system-programming-windows/03.appdomains-assemblies",{"title":276,"path":277,"stem":278},"Application Domains та Збірки — Plug-in Система з Hot-Reload","/csharp/system-programming-windows/03a.appdomains-plugin-system","01.csharp/07.system-programming-windows/03a.appdomains-plugin-system",{"title":280,"path":281,"stem":282},"Потоки — Основи та API Thread","/csharp/system-programming-windows/thread-fundamentals","01.csharp/07.system-programming-windows/04.thread-fundamentals",{"title":284,"path":285,"stem":286},"Потоки — Lifecycle, Пріоритети та Безпечне Завершення","/csharp/system-programming-windows/04a.thread-lifecycle-priorities","01.csharp/07.system-programming-windows/04a.thread-lifecycle-priorities",{"title":288,"path":289,"stem":290},"Проблеми Спільного Стану — Race Condition та Data Race","/csharp/system-programming-windows/shared-state-problems","01.csharp/07.system-programming-windows/05.shared-state-problems",{"title":292,"path":293,"stem":294},"Проблеми Спільного Стану — Memory Model та volatile","/csharp/system-programming-windows/05a.shared-state-memory-model","01.csharp/07.system-programming-windows/05a.shared-state-memory-model",{"title":296,"path":297,"stem":298},"Синхронізація — Monitor, lock та еволюція примітивів","/csharp/system-programming-windows/synchronization-fundamentals","01.csharp/07.system-programming-windows/06.synchronization-fundamentals",{"title":300,"path":301,"stem":302},"Синхронізація — Наскрізний Приклад та Deadlock Detection","/csharp/system-programming-windows/06a.synchronization-walkthrough","01.csharp/07.system-programming-windows/06a.synchronization-walkthrough",{"title":304,"path":305,"stem":306},"Синхронізація — Mutex, Semaphore та Event-Based Primitives","/csharp/system-programming-windows/synchronization-advanced","01.csharp/07.system-programming-windows/07.synchronization-advanced",{"title":308,"path":309,"stem":310},"Синхронізація — Interlocked, Volatile та Lock-Free Структури","/csharp/system-programming-windows/07a.synchronization-advanced-walkthrough","01.csharp/07.system-programming-windows/07a.synchronization-advanced-walkthrough",{"title":312,"path":313,"stem":314},"Interlocked, CAS та Lock-Free Структури","/csharp/system-programming-windows/interlocked-cas-lockfree","01.csharp/07.system-programming-windows/08.interlocked-cas-lockfree",{"title":316,"path":317,"stem":318},"Volatile, Memory Model та Spinning","/csharp/system-programming-windows/08a.volatile-memory-model","01.csharp/07.system-programming-windows/08a.volatile-memory-model",{"title":320,"path":321,"stem":322},"ThreadPool — Пул Потоків для Ефективного Виконання","/csharp/system-programming-windows/thread-pool","01.csharp/07.system-programming-windows/09.thread-pool",{"title":324,"path":325,"stem":326},"ThreadPool — Просунуті Сценарії та Внутрішня Будова","/csharp/system-programming-windows/09a.thread-pool-advanced","01.csharp/07.system-programming-windows/09a.thread-pool-advanced",{"title":328,"path":329,"stem":330},"Concurrent та Immutable Collections","/csharp/system-programming-windows/concurrent-collections","01.csharp/07.system-programming-windows/10.concurrent-collections",{"title":332,"path":333,"stem":334},"TPL, Task та Композиція — Від Thread до Task","/csharp/system-programming-windows/tpl-parallel-plinq","01.csharp/07.system-programming-windows/11.tpl-parallel-plinq",{"title":336,"path":337,"stem":338},"Parallel Class та PLINQ — Data Parallelism","/csharp/system-programming-windows/11a.tpl-parallel-plinq-advanced","01.csharp/07.system-programming-windows/11a.tpl-parallel-plinq-advanced",{"title":340,"path":341,"stem":342},"Async/Await — Фундамент Асинхронного Програмування","/csharp/system-programming-windows/async-fundamentals","01.csharp/07.system-programming-windows/12.async-fundamentals",{"title":344,"path":345,"stem":346},"SynchronizationContext та ConfigureAwait — Контекст Виконання","/csharp/system-programming-windows/async-context-configureawait","01.csharp/07.system-programming-windows/13.async-context-configureawait",{"title":348,"path":349,"stem":350},"Async — Просунуті Паттерни","/csharp/system-programming-windows/async-advanced","01.csharp/07.system-programming-windows/14.async-advanced",{"title":352,"path":353,"stem":354},"System.Threading.Channels — Async Producer-Consumer","/csharp/system-programming-windows/channels","01.csharp/07.system-programming-windows/15.channels",{"title":356,"path":357,"stem":358},"Асинхронна Синхронізація","/csharp/system-programming-windows/async-synchronization","01.csharp/07.system-programming-windows/16.async-synchronization",{"title":360,"path":361,"stem":362},"Unsafe Code та Вказівники","/csharp/system-programming-windows/unsafe-code","01.csharp/07.system-programming-windows/17.unsafe-code",{"title":364,"path":365,"stem":366},"P/Invoke та Windows API — Міст між .NET та Native Code","/csharp/system-programming-windows/pinvoke-winapi","01.csharp/07.system-programming-windows/18.pinvoke-winapi",{"title":368,"path":369,"stem":370},"Реєстр Windows — Центральна База Конфігурації Системи","/csharp/system-programming-windows/windows-registry","01.csharp/07.system-programming-windows/19.windows-registry",{"title":372,"path":373,"stem":374},"Windows Hooks, Hotkeys та Services — Глибока Інтеграція з ОС","/csharp/system-programming-windows/windows-hooks-services","01.csharp/07.system-programming-windows/20.windows-hooks-services",{"title":376,"path":377,"stem":378},"Системне Програмування C# (Windows) — 07.system-programming-windows","/csharp/system-programming-windows/implementation_plan","01.csharp/07.system-programming-windows/implementation_plan",{"title":380,"icon":132,"path":381,"stem":382,"children":383,"page":59},"Io","/csharp/io","01.csharp/08.io",[384,388,392,396,400],{"title":385,"path":386,"stem":387},"8.1.1. Основи роботи з файловою системою","/csharp/io/file-system-basics","01.csharp/08.io/01.file-system-basics",{"title":389,"path":390,"stem":391},"8.1.2. Потоки (Streams) та Серіалізація Даних","/csharp/io/streams-serialization","01.csharp/08.io/02.streams-serialization",{"title":393,"path":394,"stem":395},"8.2.1. JSON Serialization з System.Text.Json","/csharp/io/json-serialization","01.csharp/08.io/03.json-serialization",{"title":397,"path":398,"stem":399},"8.2.2. XML Serialization та LINQ to XML","/csharp/io/xml-serialization","01.csharp/08.io/04.xml-serialization",{"title":401,"path":402,"stem":403},"8.2.3. Binary Serialization: MessagePack та Protocol Buffers","/csharp/io/binary-serialization","01.csharp/08.io/05.binary-serialization",{"title":405,"icon":132,"path":406,"stem":407,"children":408,"page":59},"Ado Net","/csharp/ado-net","01.csharp/09.ado-net",[409,413,417,421,425,429,433,437,441,445,449,453],{"title":410,"path":411,"stem":412},"9.1. Введення в ADO.NET","/csharp/ado-net/introduction-to-adonet","01.csharp/09.ado-net/01.introduction-to-adonet",{"title":414,"path":415,"stem":416},"9.2. Клас DbConnection — з'єднання з базою даних","/csharp/ado-net/connection","01.csharp/09.ado-net/02.connection",{"title":418,"path":419,"stem":420},"9.3. Клас DbCommand — виконання SQL-запитів","/csharp/ado-net/command-and-queries","01.csharp/09.ado-net/03.command-and-queries",{"title":422,"path":423,"stem":424},"9.4. Клас DbDataReader — ефективне читання даних","/csharp/ado-net/datareader","01.csharp/09.ado-net/04.datareader",{"title":426,"path":427,"stem":428},"9.5. Параметризовані запити та захист від SQL Injection","/csharp/ado-net/parameters-and-sql-injection","01.csharp/09.ado-net/05.parameters-and-sql-injection",{"title":430,"path":431,"stem":432},"9.6. Транзакції в ADO.NET","/csharp/ado-net/transactions","01.csharp/09.ado-net/06.transactions",{"title":434,"path":435,"stem":436},"9.7. DbProviderFactory — провайдер-незалежний код","/csharp/ado-net/provider-factory","01.csharp/09.ado-net/07.provider-factory",{"title":438,"path":439,"stem":440},"9.8. Асинхронний доступ до даних","/csharp/ado-net/async-data-access","01.csharp/09.ado-net/08.async-data-access",{"title":442,"path":443,"stem":444},"9.9. Від'єднаний режим: DataSet, DataTable, DataRow","/csharp/ado-net/disconnected-mode-dataset","01.csharp/09.ado-net/09.disconnected-mode-dataset",{"title":446,"path":447,"stem":448},"9.10. DataAdapter — міст між DataSet та базою даних","/csharp/ado-net/data-adapter","01.csharp/09.ado-net/10.data-adapter",{"title":450,"path":451,"stem":452},"9.11. Data Mapper та Repository: Архітектура доступу до даних","/csharp/ado-net/data-mapper-repository","01.csharp/09.ado-net/11.data-mapper-repository",{"title":454,"path":455,"stem":456},"9.12. Identity Map, Unit of Work та Specification Pattern","/csharp/ado-net/advanced-patterns","01.csharp/09.ado-net/12.advanced-patterns",{"title":458,"icon":255,"path":459,"stem":460,"children":461,"page":59},"Ef Core","/csharp/ef-core","01.csharp/10.ef-core",[462,466,470,474,478,482,486,490,494,498,502,506,510,514,518,522,526,532,538,542,546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646],{"title":463,"path":464,"stem":465},"Що таке ORM? Від SQL до об'єктів","/csharp/ef-core/what-is-orm","01.csharp/10.ef-core/01.what-is-orm",{"title":467,"path":468,"stem":469},"Перший проєкт — від нуля до CRUD","/csharp/ef-core/first-project","01.csharp/10.ef-core/02.first-project",{"title":471,"path":472,"stem":473},"DbContext — Серце EF Core","/csharp/ef-core/dbcontext-deep-dive","01.csharp/10.ef-core/03.dbcontext-deep-dive",{"title":475,"path":476,"stem":477},"Провайдери баз даних — Архітектура та Вибір СУБД","/csharp/ef-core/database-providers","01.csharp/10.ef-core/04.database-providers",{"title":479,"path":480,"stem":481},"Конвенції EF Core — Магія без конфігурації","/csharp/ef-core/conventions","01.csharp/10.ef-core/05.conventions",{"title":483,"path":484,"stem":485},"Fluent API та Data Annotations — Явна конфігурація моделі","/csharp/ef-core/fluent-api-vs-annotations","01.csharp/10.ef-core/06.fluent-api-vs-annotations",{"title":487,"path":488,"stem":489},"Зв'язки — One-to-One та One-to-Many","/csharp/ef-core/relationships-basics","01.csharp/10.ef-core/07.relationships-basics",{"title":491,"path":492,"stem":493},"Зв'язки Advanced — Many-to-Many та Складні Сценарії","/csharp/ef-core/relationships-advanced","01.csharp/10.ef-core/08.relationships-advanced",{"title":495,"path":496,"stem":497},"Властивості — Типи, Конвертери, Компаратори (Частина 1)","/csharp/ef-core/property-configuration-part1","01.csharp/10.ef-core/09.property-configuration-part1",{"title":499,"path":500,"stem":501},"Властивості — Value Comparers, Generators, Shadow Properties (Частина 2)","/csharp/ef-core/property-configuration-part2","01.csharp/10.ef-core/09.property-configuration-part2",{"title":503,"path":504,"stem":505},"Складні типи — Owned Types та Complex Types (Частина 1)","/csharp/ef-core/complex-types-owned-part1","01.csharp/10.ef-core/10.complex-types-owned-part1",{"title":507,"path":508,"stem":509},"Складні типи — Complex Types, Keyless Entities, Порівняння (Частина 2)","/csharp/ef-core/complex-types-owned-part2","01.csharp/10.ef-core/10.complex-types-owned-part2",{"title":511,"path":512,"stem":513},"JSON Columns — Складні дані у JSON (Частина 1)","/csharp/ef-core/json-columns-part1","01.csharp/10.ef-core/11.json-columns-part1",{"title":515,"path":516,"stem":517},"JSON Columns — Value Comparers, Індекси, Провайдери (Частина 2)","/csharp/ef-core/json-columns-part2","01.csharp/10.ef-core/11.json-columns-part2",{"title":519,"path":520,"stem":521},"Успадкування — Абстрактні класи та TPH (Частина 1)","/csharp/ef-core/inheritance-part1","01.csharp/10.ef-core/12.inheritance-part1",{"title":523,"path":524,"stem":525},"Успадкування — TPT, TPC та Порівняння Стратегій (Частина 2)","/csharp/ef-core/inheritance-part2","01.csharp/10.ef-core/12.inheritance-part2",{"title":527,"path":528,"stem":529,"children":530},"Індекси, Обмеження та Схема (Частина 1)","/csharp/ef-core/indexes-constraints-part1","01.csharp/10.ef-core/13.indexes-constraints-part1",[531],{"title":527,"path":528,"stem":529},{"title":533,"path":534,"stem":535,"children":536},"Індекси, Обмеження та Схема (Частина 2)","/csharp/ef-core/indexes-constraints-part2","01.csharp/10.ef-core/13.indexes-constraints-part2",[537],{"title":533,"path":534,"stem":535},{"title":539,"path":540,"stem":541},"Seed Data — Початкові Дані (Частина 1)","/csharp/ef-core/seeding-part1","01.csharp/10.ef-core/14.seeding-part1",{"title":543,"path":544,"stem":545},"Seed Data — SQL-скрипти, Bogus та Стратегії (Частина 2)","/csharp/ef-core/seeding-part2","01.csharp/10.ef-core/14.seeding-part2",{"title":547,"path":548,"stem":549},"Global Query Filters — Глобальні Фільтри (Частина 1)","/csharp/ef-core/global-query-filters-part1","01.csharp/10.ef-core/15.global-query-filters-part1",{"title":551,"path":552,"stem":553},"Global Query Filters — Підводні камені та Інтеграція (Частина 2)","/csharp/ef-core/global-query-filters-part2","01.csharp/10.ef-core/15.global-query-filters-part2",{"title":555,"path":556,"stem":557},"LINQ-запити в EF Core (Частина 1)","/csharp/ef-core/linq-queries-part1","01.csharp/10.ef-core/16.linq-queries-part1",{"title":559,"path":560,"stem":561},"LINQ-запити в EF Core (Частина 2)","/csharp/ef-core/linq-queries-part2","01.csharp/10.ef-core/16.linq-queries-part2",{"title":563,"path":564,"stem":565},"Завантаження Пов'язаних Даних (Частина 1)","/csharp/ef-core/loading-related-data-part1","01.csharp/10.ef-core/17.loading-related-data-part1",{"title":567,"path":568,"stem":569},"Завантаження Пов'язаних Даних (Частина 2)","/csharp/ef-core/loading-related-data-part2","01.csharp/10.ef-core/17.loading-related-data-part2",{"title":571,"path":572,"stem":573},"Raw SQL, Views та Stored Procedures (Частина 1)","/csharp/ef-core/raw-sql-part1","01.csharp/10.ef-core/18.raw-sql-part1",{"title":575,"path":576,"stem":577},"Raw SQL — Stored Procedures, DbFunction та Bulk Operations (Частина 2)","/csharp/ef-core/raw-sql-part2","01.csharp/10.ef-core/18.raw-sql-part2",{"title":579,"path":580,"stem":581},"Продвинуті Запити — Compiled Queries, Bulk та Оптимізація (Частина 1)","/csharp/ef-core/advanced-queries-part1","01.csharp/10.ef-core/19.advanced-queries-part1",{"title":583,"path":584,"stem":585},"Продвинуті Запити — Query Tags, Bulk та Interceptors (Частина 2)","/csharp/ef-core/advanced-queries-part2","01.csharp/10.ef-core/19.advanced-queries-part2",{"title":587,"path":588,"stem":589},"Change Tracker — Відстеження Змін (Частина 1)","/csharp/ef-core/change-tracking-part1","01.csharp/10.ef-core/20.change-tracking-part1",{"title":591,"path":592,"stem":593},"Change Tracker — Графи Об'єктів та Disconnected (Частина 2)","/csharp/ef-core/change-tracking-part2","01.csharp/10.ef-core/20.change-tracking-part2",{"title":595,"path":596,"stem":597},"Збереження Даних та Транзакції (Частина 1)","/csharp/ef-core/saving-data-part1","01.csharp/10.ef-core/21.saving-data-part1",{"title":599,"path":600,"stem":601},"Збереження Даних — Concurrency та Outbox (Частина 2)","/csharp/ef-core/saving-data-part2","01.csharp/10.ef-core/21.saving-data-part2",{"title":603,"path":604,"stem":605},"Конкурентність та Блокування (Частина 1)","/csharp/ef-core/concurrency-part1","01.csharp/10.ef-core/22.concurrency-part1",{"title":607,"path":608,"stem":609},"Конкурентність — Дедлоки та Queue Processing (Частина 2)","/csharp/ef-core/concurrency-part2","01.csharp/10.ef-core/22.concurrency-part2",{"title":611,"path":612,"stem":613},"Міграції в EF Core — Основи (Частина 1)","/csharp/ef-core/migrations-basics-part1","01.csharp/10.ef-core/23.migrations-basics-part1",{"title":615,"path":616,"stem":617},"Міграції в EF Core — Основи (Частина 2)","/csharp/ef-core/migrations-basics-part2","01.csharp/10.ef-core/23.migrations-basics-part2",{"title":619,"path":620,"stem":621},"Міграції — Просунуті Сценарії (Частина 1)","/csharp/ef-core/migrations-advanced-part1","01.csharp/10.ef-core/24.migrations-advanced-part1",{"title":623,"path":624,"stem":625},"Міграції — Просунуті Сценарії (Частина 2)","/csharp/ef-core/migrations-advanced-part2","01.csharp/10.ef-core/24.migrations-advanced-part2",{"title":627,"path":628,"stem":629},"Управління Схемою та Database-First (Частина 1)","/csharp/ef-core/schema-management-part1","01.csharp/10.ef-core/25.schema-management-part1",{"title":631,"path":632,"stem":633},"Управління Схемою та Database-First (Частина 2)","/csharp/ef-core/schema-management-part2","01.csharp/10.ef-core/25.schema-management-part2",{"title":635,"path":636,"stem":637},"Продуктивність EF Core — Основи (Частина 1)","/csharp/ef-core/performance-fundamentals-part1","01.csharp/10.ef-core/26.performance-fundamentals-part1",{"title":639,"path":640,"stem":641},"Interceptors в EF Core (Частина 1)","/csharp/ef-core/interceptors-part1","01.csharp/10.ef-core/29.interceptors-part1",{"title":643,"path":644,"stem":645},"Interceptors в EF Core — Connection, Transaction та Materialization (Частина 2)","/csharp/ef-core/interceptors-part2","01.csharp/10.ef-core/29.interceptors-part2",{"title":647,"path":648,"stem":649},"План вивчення Entity Framework Core — Повний курс","/csharp/ef-core/implementation_plan","01.csharp/10.ef-core/implementation_plan",{"title":651,"icon":652,"path":653,"stem":654,"children":655,"page":59},"ASP.NET","i-devicon-dotnetcore","/csharp/aspnet","01.csharp/11.aspnet",[656,730,791,869,927,941,967,1057,1111,1182,1212,1289],{"title":657,"icon":658,"path":659,"stem":660,"children":661,"page":59},"Minimal API","i-lucide-network","/csharp/aspnet/minimal-api","01.csharp/11.aspnet/01.minimal-api",[662,666,670,674,678,682,686,690,694,698,702,706,710,714,718,722,726],{"title":663,"path":664,"stem":665},"Вступ до ASP.NET та еволюція фреймворку","/csharp/aspnet/minimal-api/introduction","01.csharp/11.aspnet/01.minimal-api/01.introduction",{"title":667,"path":668,"stem":669},"Перший додаток на ASP.NET Core","/csharp/aspnet/minimal-api/first-application","01.csharp/11.aspnet/01.minimal-api/02.first-application",{"title":671,"path":672,"stem":673},"WebApplication, Builder та Dependency Injection","/csharp/aspnet/minimal-api/webapplication-builder","01.csharp/11.aspnet/01.minimal-api/03.webapplication-builder",{"title":675,"path":676,"stem":677},"Конвеєр запитів та Middleware","/csharp/aspnet/minimal-api/request-pipeline-middleware","01.csharp/11.aspnet/01.minimal-api/04.request-pipeline-middleware",{"title":679,"path":680,"stem":681},"Маршрутизація в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/routing-basics","01.csharp/11.aspnet/01.minimal-api/05.routing-basics",{"title":683,"path":684,"stem":685},"Маршрутизація в ASP.NET Core: Розширені можливості","/csharp/aspnet/minimal-api/routing-advanced","01.csharp/11.aspnet/01.minimal-api/06.routing-advanced",{"title":687,"path":688,"stem":689},"Статичні файли в ASP.NET Core","/csharp/aspnet/minimal-api/static-files","01.csharp/11.aspnet/01.minimal-api/07.static-files",{"title":691,"path":692,"stem":693},"Статичні Активи: MapStaticAssets (ASP.NET Core 9.0)","/csharp/aspnet/minimal-api/static-assets","01.csharp/11.aspnet/01.minimal-api/08.static-assets",{"title":695,"path":696,"stem":697},"Конфігурація в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/configuration-fundamentals","01.csharp/11.aspnet/01.minimal-api/09.configuration-fundamentals",{"title":699,"path":700,"stem":701},"Конфігурація: Паттерн Options","/csharp/aspnet/minimal-api/configuration-options","01.csharp/11.aspnet/01.minimal-api/10.configuration-options",{"title":703,"path":704,"stem":705},"Логування в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/logging-basics","01.csharp/11.aspnet/01.minimal-api/11.logging-basics",{"title":707,"path":708,"stem":709},"Логування: Serilog та Middleware","/csharp/aspnet/minimal-api/logging-advanced","01.csharp/11.aspnet/01.minimal-api/12.logging-advanced",{"title":711,"path":712,"stem":713},"Управління станом: HttpContext.Items та Cookies","/csharp/aspnet/minimal-api/state-management","01.csharp/11.aspnet/01.minimal-api/13.state-management",{"title":715,"path":716,"stem":717},"Стан сесії: Sessions","/csharp/aspnet/minimal-api/session-state","01.csharp/11.aspnet/01.minimal-api/14.session-state",{"title":719,"path":720,"stem":721},"Структура проєкту: від хаосу до архітектури","/csharp/aspnet/minimal-api/project-structure","01.csharp/11.aspnet/01.minimal-api/15.project-structure",{"title":723,"path":724,"stem":725},"Scalar у Minimal API: повний проєкт і Fluent OpenAPI","/csharp/aspnet/minimal-api/scalar-openapi-fluent","01.csharp/11.aspnet/01.minimal-api/16.scalar-openapi-fluent",{"title":727,"path":728,"stem":729},"Swagger / Swashbuckle у Minimal API: окремий класичний шлях","/csharp/aspnet/minimal-api/swagger-swashbuckle","01.csharp/11.aspnet/01.minimal-api/17.swagger-swashbuckle",{"title":731,"icon":658,"path":732,"stem":733,"children":734,"page":59},"API","/csharp/aspnet/api","01.csharp/11.aspnet/02.api",[735,739,743,747,751,755,759,763,767,771,775,779,783,787],{"title":736,"path":737,"stem":738},"Що таке API. Клієнт-серверна архітектура","/csharp/aspnet/api/what-is-api","01.csharp/11.aspnet/02.api/01.what-is-api",{"title":740,"path":741,"stem":742},"Формати даних: JSON, XML, TOML та бінарні формати","/csharp/aspnet/api/data-formats","01.csharp/11.aspnet/02.api/02.data-formats",{"title":744,"path":745,"stem":746},"Парадигми API та концепція REST","/csharp/aspnet/api/api-paradigms-rest","01.csharp/11.aspnet/02.api/03.api-paradigms-rest",{"title":748,"path":749,"stem":750},"HTTP-методи, статус-коди та заголовки","/csharp/aspnet/api/http-methods-status-codes","01.csharp/11.aspnet/02.api/04.http-methods-status-codes",{"title":752,"path":753,"stem":754},"Організація HTTP API за принципами REST","/csharp/aspnet/api/rest-organizing","01.csharp/11.aspnet/02.api/05.rest-organizing",{"title":756,"path":757,"stem":758},"Номенклатура URL та CRUD-операції","/csharp/aspnet/api/url-nomenclature-crud","01.csharp/11.aspnet/02.api/06.url-nomenclature-crud",{"title":760,"path":761,"stem":762},"Правила дизайну: іменування та стандарти","/csharp/aspnet/api/api-design-naming","01.csharp/11.aspnet/02.api/07.api-design-naming",{"title":764,"path":765,"stem":766},"Валідація, ліміти та обробка помилок","/csharp/aspnet/api/api-design-validation","01.csharp/11.aspnet/02.api/08.api-design-validation",{"title":768,"path":769,"stem":770},"Обробка помилок у Minimal API","/csharp/aspnet/api/error-handling-http","01.csharp/11.aspnet/02.api/09.error-handling-http",{"title":772,"path":773,"stem":774},"Ідемпотентність та синхронізація стану","/csharp/aspnet/api/idempotency-sync","01.csharp/11.aspnet/02.api/10.idempotency-sync",{"title":776,"path":777,"stem":778},"Пагінація та організація списків","/csharp/aspnet/api/pagination-lists","01.csharp/11.aspnet/02.api/11.pagination-lists",{"title":780,"path":781,"stem":782},"Безпека API, кешування та інтернаціоналізація","/csharp/aspnet/api/security-auth","01.csharp/11.aspnet/02.api/12.security-auth",{"title":784,"path":785,"stem":786},"Процес проєктування API та документування","/csharp/aspnet/api/api-design-process","01.csharp/11.aspnet/02.api/13.api-design-process",{"title":788,"path":789,"stem":790},"OpenAPI: контракт, специфікація та документація API","/csharp/aspnet/api/openapi","01.csharp/11.aspnet/02.api/14.openapi",{"title":792,"icon":793,"path":794,"stem":795,"children":796,"page":59},"Auth","i-lucide-shield-check","/csharp/aspnet/auth","01.csharp/11.aspnet/03.auth",[797,801,805,809,813,817,821,825,829,833,837,841,845,849,853,857,861,865],{"title":798,"path":799,"stem":800},"Основи аутентифікації та авторизації","/csharp/aspnet/auth/auth-fundamentals","01.csharp/11.aspnet/03.auth/01.auth-fundamentals",{"title":802,"path":803,"stem":804},"JWT-аутентифікація","/csharp/aspnet/auth/jwt-authentication","01.csharp/11.aspnet/03.auth/02.jwt-authentication",{"title":806,"path":807,"stem":808},"Авторизація: ролі, політики та resource-based доступ","/csharp/aspnet/auth/authorization-policies","01.csharp/11.aspnet/03.auth/03.authorization-policies",{"title":810,"path":811,"stem":812},"Cookie-аутентифікація та ASP.NET Core Identity","/csharp/aspnet/auth/cookie-auth-identity","01.csharp/11.aspnet/03.auth/04.cookie-auth-identity",{"title":814,"path":815,"stem":816},"JWT + Refresh Tokens (HttpOnly Cookie)","/csharp/aspnet/auth/04b.identity-auth-jwt","01.csharp/11.aspnet/03.auth/04b.identity-auth-jwt",{"title":818,"path":819,"stem":820},"Identity: Підтвердження Email та Скидання Пароля","/csharp/aspnet/auth/identity-email-confirmation","01.csharp/11.aspnet/03.auth/05.identity-email-confirmation",{"title":822,"path":823,"stem":824},"Identity: Двофакторна Аутентифікація (2FA)","/csharp/aspnet/auth/identity-two-factor","01.csharp/11.aspnet/03.auth/06.identity-two-factor",{"title":826,"path":827,"stem":828},"Identity: Внутрішня Архітектура та Кастомізація","/csharp/aspnet/auth/identity-internals","01.csharp/11.aspnet/03.auth/07.identity-internals",{"title":830,"path":831,"stem":832},"OAuth 2.0 та зовнішні провайдери","/csharp/aspnet/auth/oauth-external-providers","01.csharp/11.aspnet/03.auth/08.oauth-external-providers",{"title":834,"path":835,"stem":836},"Безпека на практиці: CORS, HTTPS та захист від атак","/csharp/aspnet/auth/security-hardening","01.csharp/11.aspnet/03.auth/09.security-hardening",{"title":838,"path":839,"stem":840},"Теорія OAuth 2.0: Поняття, Аналогії та Флоу","/csharp/aspnet/auth/oauth-theory","01.csharp/11.aspnet/03.auth/10.oauth-theory",{"title":842,"path":843,"stem":844},"OIDC, OAuth 2.0 та Keycloak в ASP.NET Core","/csharp/aspnet/auth/oidc-keycloak","01.csharp/11.aspnet/03.auth/10.oidc-keycloak",{"title":846,"path":847,"stem":848},"API Keys аутентифікація в ASP.NET Core","/csharp/aspnet/auth/api-keys","01.csharp/11.aspnet/03.auth/11.api-keys",{"title":850,"path":851,"stem":852},"Rate Limiting та Throttling в ASP.NET Core","/csharp/aspnet/auth/rate-limiting","01.csharp/11.aspnet/03.auth/12.rate-limiting",{"title":854,"path":855,"stem":856},"Refresh Token Rotation в ASP.NET Core","/csharp/aspnet/auth/refresh-token-rotation","01.csharp/11.aspnet/03.auth/13.refresh-token-rotation",{"title":858,"path":859,"stem":860},"Certificate Authentication та mTLS в ASP.NET Core","/csharp/aspnet/auth/certificate-auth","01.csharp/11.aspnet/03.auth/14.certificate-auth",{"title":862,"path":863,"stem":864},"RBAC, ABAC та ReBAC в ASP.NET Core","/csharp/aspnet/auth/rbac-abac-rebac","01.csharp/11.aspnet/03.auth/15.rbac-abac-rebac",{"title":866,"path":867,"stem":868},"Multi-tenancy та ізоляція даних в ASP.NET Core","/csharp/aspnet/auth/multi-tenancy","01.csharp/11.aspnet/03.auth/16.multi-tenancy",{"title":870,"icon":871,"path":872,"stem":873,"children":874,"page":59},"Нотифікації","i-lucide-bell","/csharp/aspnet/notifications","01.csharp/11.aspnet/04.notifications",[875,879,883,887,891,895,899,903,907,911,915,919,923],{"title":876,"path":877,"stem":878},"In-App нотифікації через базу даних","/csharp/aspnet/notifications/in-app-database-notifications","01.csharp/11.aspnet/04.notifications/01.in-app-database-notifications",{"title":880,"path":881,"stem":882},"Polling: Регулярний запит оновлень","/csharp/aspnet/notifications/polling","01.csharp/11.aspnet/04.notifications/02.polling",{"title":884,"path":885,"stem":886},"Server-Sent Events: Однострімовий push від сервера","/csharp/aspnet/notifications/server-sent-events","01.csharp/11.aspnet/04.notifications/03.server-sent-events",{"title":888,"path":889,"stem":890},"WebSockets: Двостороннє з'єднання в реальному часі","/csharp/aspnet/notifications/websockets","01.csharp/11.aspnet/04.notifications/04.websockets",{"title":892,"path":893,"stem":894},"SignalR: Абстракція над транспортами реального часу","/csharp/aspnet/notifications/signalr","01.csharp/11.aspnet/04.notifications/05.signalr",{"title":896,"path":897,"stem":898},"Background Services: Фонові задачі в ASP.NET Core","/csharp/aspnet/notifications/background-services","01.csharp/11.aspnet/04.notifications/06.background-services",{"title":900,"path":901,"stem":902},"Web Push нотифікації","/csharp/aspnet/notifications/web-push","01.csharp/11.aspnet/04.notifications/07.web-push",{"title":904,"path":905,"stem":906},"Email нотифікації","/csharp/aspnet/notifications/email-notifications","01.csharp/11.aspnet/04.notifications/08.email-notifications",{"title":908,"path":909,"stem":910},"Порівняння підходів: Як вибрати правильну технологію нотифікацій","/csharp/aspnet/notifications/choosing-the-right-approach","01.csharp/11.aspnet/04.notifications/09.choosing-the-right-approach",{"title":912,"path":913,"stem":914},"Hangfire: Надійне планування фонових задач","/csharp/aspnet/notifications/hangfire","01.csharp/11.aspnet/04.notifications/10.hangfire",{"title":916,"path":917,"stem":918},"Практика: Конвертація зображень у WebP через Hangfire","/csharp/aspnet/notifications/hangfire-image-webp","01.csharp/11.aspnet/04.notifications/11.hangfire-image-webp",{"title":920,"path":921,"stem":922},"Практика: Підготовка відео до HLS-стрімінгу через Hangfire","/csharp/aspnet/notifications/hangfire-video-hls","01.csharp/11.aspnet/04.notifications/12.hangfire-video-hls",{"title":924,"path":925,"stem":926},"Telegram-нотифікації: від одного повідомлення до масових розсилок і мульти-канального підходу","/csharp/aspnet/notifications/telegram-notifications","01.csharp/11.aspnet/04.notifications/13.telegram-notifications",{"title":928,"icon":929,"path":930,"stem":931,"children":932,"page":59},"Інтернаціоналізація","i-lucide-languages","/csharp/aspnet/i18n","01.csharp/11.aspnet/05.i18n",[933,937],{"title":934,"path":935,"stem":936},"Інтернаціоналізація (i18n) у Minimal API: від A до Я","/csharp/aspnet/i18n/internationalization","01.csharp/11.aspnet/05.i18n/01.internationalization",{"title":938,"path":939,"stem":940},"Humanizer: людиномовні рядки у .NET","/csharp/aspnet/i18n/humanizer","01.csharp/11.aspnet/05.i18n/02.humanizer",{"title":942,"icon":943,"path":944,"stem":945,"children":946,"page":59},"Кешування","i-lucide-layers","/csharp/aspnet/caching","01.csharp/11.aspnet/06.caching",[947,951,955,959,963],{"title":948,"path":949,"stem":950},"Огляд кешування: чотири рівні і коли що обирати","/csharp/aspnet/caching/caching","01.csharp/11.aspnet/06.caching/01.caching",{"title":952,"path":953,"stem":954},"IMemoryCache: кеш в оперативній пам'яті","/csharp/aspnet/caching/memory-cache","01.csharp/11.aspnet/06.caching/02.memory-cache",{"title":956,"path":957,"stem":958},"IDistributedCache і Redis: розподілений кеш","/csharp/aspnet/caching/distributed-cache","01.csharp/11.aspnet/06.caching/03.distributed-cache",{"title":960,"path":961,"stem":962},"Response Cache: HTTP-кешування через Cache-Control","/csharp/aspnet/caching/response-cache","01.csharp/11.aspnet/06.caching/04.response-cache",{"title":964,"path":965,"stem":966},"Output Cache: серверний кеш HTTP-відповідей (.NET 7+)","/csharp/aspnet/caching/output-cache","01.csharp/11.aspnet/06.caching/05.output-cache",{"title":968,"icon":969,"path":970,"stem":971,"children":972,"page":59},"Тестування","i-lucide-test-tube","/csharp/aspnet/testing","01.csharp/11.aspnet/07.testing",[973,977,981,985,989,993,997,1001,1005,1009,1013,1017,1021,1025,1029,1033,1037,1041,1045,1049,1053],{"title":974,"path":975,"stem":976},"Що таке тестування? Від інтуїції до науки","/csharp/aspnet/testing/what-is-testing","01.csharp/11.aspnet/07.testing/01.what-is-testing",{"title":978,"path":979,"stem":980},"Піраміда тестування — Стратегія, а не Догма","/csharp/aspnet/testing/testing-pyramid","01.csharp/11.aspnet/07.testing/02.testing-pyramid",{"title":982,"path":983,"stem":984},"Дві Школи Тестування — Лондон проти Детройту","/csharp/aspnet/testing/testing-schools","01.csharp/11.aspnet/07.testing/03.testing-schools",{"title":986,"path":987,"stem":988},"TDD та BDD — Тести як Дизайн-інструмент","/csharp/aspnet/testing/tdd-and-bdd","01.csharp/11.aspnet/07.testing/04.tdd-and-bdd",{"title":990,"path":991,"stem":992},"Що саме тестувати — Техніки аналізу та Циклomatична складність","/csharp/aspnet/testing/what-to-test","01.csharp/11.aspnet/07.testing/05.what-to-test",{"title":994,"path":995,"stem":996},"Тестові Фреймворки — Навіщо вони і що всередині","/csharp/aspnet/testing/test-frameworks","01.csharp/11.aspnet/07.testing/06.test-frameworks",{"title":998,"path":999,"stem":1000},"xUnit — Факти, Теорії та Lifecycle тестів","/csharp/aspnet/testing/xunit-basics","01.csharp/11.aspnet/07.testing/07.xunit-basics",{"title":1002,"path":1003,"stem":1004},"xUnit Advanced — Fixtures, Кастомізація та Розширення","/csharp/aspnet/testing/xunit-advanced","01.csharp/11.aspnet/07.testing/08.xunit-advanced",{"title":1006,"path":1007,"stem":1008},"Moq — Глибоке занурення в мокування","/csharp/aspnet/testing/mocking-with-moq","01.csharp/11.aspnet/07.testing/09.mocking-with-moq",{"title":1010,"path":1011,"stem":1012},"Тестування Баз Даних — EF Core, SQLite та Testcontainers","/csharp/aspnet/testing/database-testing","01.csharp/11.aspnet/07.testing/10.database-testing",{"title":1014,"path":1015,"stem":1016},"Integration Testing — Частина 1 [Теорія та WebApplicationFactory]","/csharp/aspnet/testing/integration-testing","01.csharp/11.aspnet/07.testing/11.integration-testing",{"title":1018,"path":1019,"stem":1020},"Інтеграційне тестування — Практика","/csharp/aspnet/testing/11a.integration-testing-practice","01.csharp/11.aspnet/07.testing/11a.integration-testing-practice",{"title":1022,"path":1023,"stem":1024},"Integration Testing — Частина 2 [Просунуті Сценарії та Testcontainers]","/csharp/aspnet/testing/integration-testing-advanced","01.csharp/11.aspnet/07.testing/12.integration-testing-advanced",{"title":1026,"path":1027,"stem":1028},"Професійний Postman: Колекції, Змінні та GitHub Інтеграція","/csharp/aspnet/testing/postman-professional","01.csharp/11.aspnet/07.testing/13.postman-professional",{"title":1030,"path":1031,"stem":1032},"HttpClient у Тестах Частина 1: Архітектура та MockHttpMessageHandler","/csharp/aspnet/testing/httpclient-testing","01.csharp/11.aspnet/07.testing/14.httpclient-testing",{"title":1034,"path":1035,"stem":1036},"HttpClient у Тестах Частина 2: WireMock.Net та Resilience","/csharp/aspnet/testing/wiremock-net","01.csharp/11.aspnet/07.testing/15.wiremock-net",{"title":1038,"path":1039,"stem":1040},"Патерни та Анти-патерни Тестування: Test Smells","/csharp/aspnet/testing/testing-patterns","01.csharp/11.aspnet/07.testing/16.testing-patterns",{"title":1042,"path":1043,"stem":1044},"Просунуті інструменти: Time, Snapshots та Властивості","/csharp/aspnet/testing/advanced-testing-tools","01.csharp/11.aspnet/07.testing/17.advanced-testing-tools",{"title":1046,"path":1047,"stem":1048},"Тестування Архітектури з NetArchTest","/csharp/aspnet/testing/architecture-testing","01.csharp/11.aspnet/07.testing/18.architecture-testing",{"title":1050,"path":1051,"stem":1052},"Тестування Продуктивності: BenchmarkDotNet, NBomber та k6","/csharp/aspnet/testing/performance-testing","01.csharp/11.aspnet/07.testing/19.performance-testing",{"title":1054,"path":1055,"stem":1056},"Залишок плану для курсу \"Тестування ASP.NET Minimal API\"","/csharp/aspnet/testing/remaining_plan","01.csharp/11.aspnet/07.testing/remaining_plan",{"title":1058,"icon":1059,"path":1060,"stem":1061,"children":1062,"page":59},"Платежі","i-lucide-credit-card","/csharp/aspnet/payments","01.csharp/11.aspnet/08.payments",[1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103,1107],{"title":1064,"path":1065,"stem":1066},"Основи платіжної інфраструктури","/csharp/aspnet/payments/payment-fundamentals","01.csharp/11.aspnet/08.payments/01.payment-fundamentals",{"title":1068,"path":1069,"stem":1070},"Методи оплати в Україні","/csharp/aspnet/payments/payment-methods-ukraine","01.csharp/11.aspnet/08.payments/02.payment-methods-ukraine",{"title":1072,"path":1073,"stem":1074},"PCI DSS та безпека платежів","/csharp/aspnet/payments/pci-dss-security","01.csharp/11.aspnet/08.payments/03.pci-dss-security",{"title":1076,"path":1077,"stem":1078},"Архітектура платіжної підсистеми","/csharp/aspnet/payments/payment-architecture","01.csharp/11.aspnet/08.payments/04.payment-architecture",{"title":1080,"path":1081,"stem":1082},"Інтеграція LiqPay (ПриватБанк)","/csharp/aspnet/payments/liqpay-integration","01.csharp/11.aspnet/08.payments/05.liqpay-integration",{"title":1084,"path":1085,"stem":1086},"Інтеграція Monobank Acquiring API","/csharp/aspnet/payments/monobank-acquiring","01.csharp/11.aspnet/08.payments/06.monobank-acquiring",{"title":1088,"path":1089,"stem":1090},"Інтеграція Stripe","/csharp/aspnet/payments/stripe-integration","01.csharp/11.aspnet/08.payments/07.stripe-integration",{"title":1092,"path":1093,"stem":1094},"Webhooks — глибоке занурення","/csharp/aspnet/payments/webhooks-deep-dive","01.csharp/11.aspnet/08.payments/08.webhooks-deep-dive",{"title":1096,"path":1097,"stem":1098},"Підписки та рекурентні платежі","/csharp/aspnet/payments/subscriptions-recurring","01.csharp/11.aspnet/08.payments/09.subscriptions-recurring",{"title":1100,"path":1101,"stem":1102},"Повернення коштів та диспути","/csharp/aspnet/payments/refunds-disputes","01.csharp/11.aspnet/08.payments/10.refunds-disputes",{"title":1104,"path":1105,"stem":1106},"Тестування платіжних інтеграцій","/csharp/aspnet/payments/testing-payments","01.csharp/11.aspnet/08.payments/11.testing-payments",{"title":1108,"path":1109,"stem":1110},"Чекліст виходу в Production","/csharp/aspnet/payments/production-checklist","01.csharp/11.aspnet/08.payments/12.production-checklist",{"title":1112,"icon":1113,"items":1114,"path":1127,"stem":1128,"children":1129,"page":59},"Популярні бібліотеки","lucide:box",[1115,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126],"01.fluent-validation","02.mapster","03.erroror-result-pattern","04.serilog","05.mediatr","06.polly","07.health-checks","08.feature-management","09.fluent-email","10.quest-pdf","11.bogus","12.humanizer-guard","/csharp/aspnet/libraries","01.csharp/11.aspnet/09.libraries",[1130,1134,1138,1142,1146,1150,1154,1158,1162,1166,1170,1174,1178],{"title":1131,"path":1132,"stem":1133},"Валідація з FluentValidation в ASP.NET Core","/csharp/aspnet/libraries/fluent-validation","01.csharp/11.aspnet/09.libraries/01.fluent-validation",{"title":1135,"path":1136,"stem":1137},"Маппінг об","/csharp/aspnet/libraries/mapster","01.csharp/11.aspnet/09.libraries/02.mapster",{"title":1139,"path":1140,"stem":1141},"Обробка помилок з ErrorOr та Result Pattern в ASP.NET Core","/csharp/aspnet/libraries/erroror-result-pattern","01.csharp/11.aspnet/09.libraries/03.erroror-result-pattern",{"title":1143,"path":1144,"stem":1145},"Структуроване логування з Serilog в ASP.NET Core","/csharp/aspnet/libraries/serilog","01.csharp/11.aspnet/09.libraries/04.serilog",{"title":1147,"path":1148,"stem":1149},"CQRS та Mediator з MediatR в ASP.NET Core","/csharp/aspnet/libraries/mediatr","01.csharp/11.aspnet/09.libraries/05.mediatr",{"title":1151,"path":1152,"stem":1153},"Відмовостійкість з Polly в ASP.NET Core","/csharp/aspnet/libraries/polly","01.csharp/11.aspnet/09.libraries/06.polly",{"title":1155,"path":1156,"stem":1157},"Health Checks в ASP.NET Core","/csharp/aspnet/libraries/health-checks","01.csharp/11.aspnet/09.libraries/07.health-checks",{"title":1159,"path":1160,"stem":1161},"Feature Management та Feature Flags в ASP.NET Core","/csharp/aspnet/libraries/feature-management","01.csharp/11.aspnet/09.libraries/08.feature-management",{"title":1163,"path":1164,"stem":1165},"Відправка Email з FluentEmail в ASP.NET Core","/csharp/aspnet/libraries/fluent-email","01.csharp/11.aspnet/09.libraries/09.fluent-email",{"title":1167,"path":1168,"stem":1169},"Генерація PDF з QuestPDF в ASP.NET Core","/csharp/aspnet/libraries/quest-pdf","01.csharp/11.aspnet/09.libraries/10.quest-pdf",{"title":1171,"path":1172,"stem":1173},"Генерація тестових даних з Bogus в ASP.NET Core","/csharp/aspnet/libraries/bogus","01.csharp/11.aspnet/09.libraries/11.bogus",{"title":1175,"path":1176,"stem":1177},"Humanizer та Guard Clauses в ASP.NET Core","/csharp/aspnet/libraries/humanizer-guard","01.csharp/11.aspnet/09.libraries/12.humanizer-guard",{"title":1179,"path":1180,"stem":1181},"План модуля 10.libraries — Популярні бібліотеки ASP.NET","/csharp/aspnet/libraries/plan","01.csharp/11.aspnet/09.libraries/plan",{"title":1183,"icon":1184,"path":1185,"stem":1186,"children":1187,"page":59},"Razor Pages","i-lucide-layout-template","/csharp/aspnet/razor-pages","01.csharp/11.aspnet/10.razor-pages",[1188,1192,1196,1200,1204,1208],{"title":1189,"path":1190,"stem":1191},"Від Minimal API до Razor Pages: концептуальний перехід","/csharp/aspnet/razor-pages/from-minimal-api","01.csharp/11.aspnet/10.razor-pages/01.from-minimal-api",{"title":1193,"path":1194,"stem":1195},"PageModel: логіка сторінки Razor Pages","/csharp/aspnet/razor-pages/page-model","01.csharp/11.aspnet/10.razor-pages/02.page-model",{"title":1197,"path":1198,"stem":1199},"Razor синтаксис: шаблонізатор у .cshtml","/csharp/aspnet/razor-pages/razor-syntax","01.csharp/11.aspnet/10.razor-pages/03.razor-syntax",{"title":1201,"path":1202,"stem":1203},"Tag Helpers: типізований HTML","/csharp/aspnet/razor-pages/tag-helpers","01.csharp/11.aspnet/10.razor-pages/04.tag-helpers",{"title":1205,"path":1206,"stem":1207},"Форми і валідація: повний цикл обробки даних","/csharp/aspnet/razor-pages/forms-validation","01.csharp/11.aspnet/10.razor-pages/05.forms-validation",{"title":1209,"path":1210,"stem":1211},"Практичний проєкт: TaskManager на Razor Pages","/csharp/aspnet/razor-pages/project-task-manager","01.csharp/11.aspnet/10.razor-pages/06.project-task-manager",{"title":1213,"path":1214,"stem":1215,"children":1216,"page":59},"ASP.NET Core MVC","/csharp/aspnet/mvc","01.csharp/11.aspnet/11.mvc",[1217,1221,1225,1229,1233,1237,1241,1245,1249,1253,1257,1261,1265,1269,1273,1277,1281,1285],{"title":1218,"path":1219,"stem":1220},"Патерн MVC: архітектура, що змінила веб","/csharp/aspnet/mvc/mvc-pattern","01.csharp/11.aspnet/11.mvc/01.mvc-pattern",{"title":1222,"path":1223,"stem":1224},"Від Razor Pages до MVC: концептуальний перехід","/csharp/aspnet/mvc/from-razor-pages","01.csharp/11.aspnet/11.mvc/02.from-razor-pages",{"title":1226,"path":1227,"stem":1228},"Controllers та Actions: серце MVC","/csharp/aspnet/mvc/controllers-actions","01.csharp/11.aspnet/11.mvc/03.controllers-actions",{"title":1230,"path":1231,"stem":1232},"Маршрутизація в MVC: Convention vs Attribute Routing","/csharp/aspnet/mvc/routing-mvc","01.csharp/11.aspnet/11.mvc/04.routing-mvc",{"title":1234,"path":1235,"stem":1236},"Model Binding: від HTTP до C#","/csharp/aspnet/mvc/model-binding","01.csharp/11.aspnet/11.mvc/05.model-binding",{"title":1238,"path":1239,"stem":1240},"Views, ViewData, ViewBag, TempData і ViewModel","/csharp/aspnet/mvc/views-viewdata-tempdata","01.csharp/11.aspnet/11.mvc/06.views-viewdata-tempdata",{"title":1242,"path":1243,"stem":1244},"Filters: аспектно-орієнтоване програмування в MVC","/csharp/aspnet/mvc/filters","01.csharp/11.aspnet/11.mvc/07.filters",{"title":1246,"path":1247,"stem":1248},"Areas: структурування великих застосунків","/csharp/aspnet/mvc/areas","01.csharp/11.aspnet/11.mvc/08.areas",{"title":1250,"path":1251,"stem":1252},"View Components: повторювані незалежні блоки UI","/csharp/aspnet/mvc/view-components","01.csharp/11.aspnet/11.mvc/09.view-components",{"title":1254,"path":1255,"stem":1256},"Display та Editor Templates","/csharp/aspnet/mvc/display-editor-templates","01.csharp/11.aspnet/11.mvc/10.display-editor-templates",{"title":1258,"path":1259,"stem":1260},"Валідація: IValidatableObject та FluentValidation","/csharp/aspnet/mvc/validation-advanced","01.csharp/11.aspnet/11.mvc/11.validation-advanced",{"title":1262,"path":1263,"stem":1264},"HTMX: інтерактивність через HTML-атрибути","/csharp/aspnet/mvc/htmx","01.csharp/11.aspnet/11.mvc/12.htmx",{"title":1266,"path":1267,"stem":1268},"HTMX у ASP.NET Core MVC: серверна інтеграція","/csharp/aspnet/mvc/ajax-htmx-mvc","01.csharp/11.aspnet/11.mvc/13.ajax-htmx-mvc",{"title":1270,"path":1271,"stem":1272},"Практичний проєкт: Каталог товарів з HTMX","/csharp/aspnet/mvc/htmx-project","01.csharp/11.aspnet/11.mvc/14.htmx-project",{"title":1274,"path":1275,"stem":1276},"Завантаження та обробка файлів","/csharp/aspnet/mvc/file-upload","01.csharp/11.aspnet/11.mvc/15.file-upload",{"title":1278,"path":1279,"stem":1280},"Глобалізація та Локалізація MVC","/csharp/aspnet/mvc/globalization-localization","01.csharp/11.aspnet/11.mvc/16.globalization-localization",{"title":1282,"path":1283,"stem":1284},"Підсумковий проєкт: Блог-платформа","/csharp/aspnet/mvc/mvc-project","01.csharp/11.aspnet/11.mvc/17.mvc-project",{"title":1286,"path":1287,"stem":1288},"План курсу: ASP.NET Core MVC","/csharp/aspnet/mvc/plan","01.csharp/11.aspnet/11.mvc/plan",{"title":1290,"path":1291,"stem":1292,"children":1293,"page":59},"Web Api","/csharp/aspnet/web-api","01.csharp/11.aspnet/12.web-api",[1294,1298,1302,1306,1310,1314,1318,1322,1326,1330,1334,1338,1342],{"title":1295,"path":1296,"stem":1297},"Від Minimal API до Controller-based API","/csharp/aspnet/web-api/from-minimal-api-to-controllers","01.csharp/11.aspnet/12.web-api/01.from-minimal-api-to-controllers",{"title":1299,"path":1300,"stem":1301},"ControllerBase, ActionResult\u003CT> та Response Types","/csharp/aspnet/web-api/controller-base-actionresult","01.csharp/11.aspnet/12.web-api/02.controller-base-actionresult",{"title":1303,"path":1304,"stem":1305},"Content Negotiation - JSON, XML та власні форматери","/csharp/aspnet/web-api/content-negotiation","01.csharp/11.aspnet/12.web-api/03.content-negotiation",{"title":1307,"path":1308,"stem":1309},"Версіонування API","/csharp/aspnet/web-api/api-versioning","01.csharp/11.aspnet/12.web-api/04.api-versioning",{"title":1311,"path":1312,"stem":1313},"ProblemDetails та структурована обробка помилок","/csharp/aspnet/web-api/problemdetails-error-handling","01.csharp/11.aspnet/12.web-api/05.problemdetails-error-handling",{"title":1315,"path":1316,"stem":1317},"Фільтри у Web API контексті","/csharp/aspnet/web-api/filters-for-api","01.csharp/11.aspnet/12.web-api/06.filters-for-api",{"title":1319,"path":1320,"stem":1321},"Пагінація, фільтрація та сортування","/csharp/aspnet/web-api/pagination-filtering-sorting","01.csharp/11.aspnet/12.web-api/07.pagination-filtering-sorting",{"title":1323,"path":1324,"stem":1325},"HATEOAS та Resource Expansion","/csharp/aspnet/web-api/hateoas-resource-expansion","01.csharp/11.aspnet/12.web-api/08.hateoas-resource-expansion",{"title":1327,"path":1328,"stem":1329},"Гібридна архітектура - Minimal API + Controllers","/csharp/aspnet/web-api/minimal-api-vs-controllers-hybrid","01.csharp/11.aspnet/12.web-api/09.minimal-api-vs-controllers-hybrid",{"title":1331,"path":1332,"stem":1333},"Документація API - Swashbuckle, NSwag та генерація клієнтів","/csharp/aspnet/web-api/api-documentation-generation","01.csharp/11.aspnet/12.web-api/10.api-documentation-generation",{"title":1335,"path":1336,"stem":1337},"Health Checks та моніторинг API","/csharp/aspnet/web-api/health-checks-monitoring","01.csharp/11.aspnet/12.web-api/11.health-checks-monitoring",{"title":1339,"path":1340,"stem":1341},"Підсумковий проєкт - Production-Ready REST API","/csharp/aspnet/web-api/web-api-project","01.csharp/11.aspnet/12.web-api/12.web-api-project",{"title":1343,"path":1344,"stem":1345},"План курсу: ASP.NET Core Web API (Controllers)","/csharp/aspnet/web-api/plan","01.csharp/11.aspnet/12.web-api/plan",{"title":1347,"icon":1348,"path":1349,"stem":1350,"children":1351,"page":59},"Desktop UI","i-lucide-app-window","/csharp/desktop-ui","01.csharp/12.desktop-ui",[1352,1356,1360,1364,1368,1372,1376,1380,1384,1388,1392,1396,1400,1404,1408,1412,1416,1420,1424,1428,1432,1436,1440,1444,1448,1452,1456,1460,1464,1468,1472,1476,1480,1484,1488,1492,1496,1500,1504,1508,1512,1516,1520,1524,1528,1532,1536,1540,1544,1548,1552,1556,1560,1564,1568,1572,1576,1580,1584,1588,1592,1596,1600,1604,1608,1612,1616,1620,1624,1628,1632],{"title":1353,"path":1354,"stem":1355},"Що таке десктопна розробка?","/csharp/desktop-ui/what-is-desktop-dev","01.csharp/12.desktop-ui/01.what-is-desktop-dev",{"title":1357,"path":1358,"stem":1359},"Архітектура WPF — як влаштований графічний інтерфейс","/csharp/desktop-ui/wpf-architecture","01.csharp/12.desktop-ui/02.wpf-architecture",{"title":1361,"path":1362,"stem":1363},"Перший WPF-проєкт — від нуля до вікна","/csharp/desktop-ui/first-wpf-app","01.csharp/12.desktop-ui/03.first-wpf-app",{"title":1365,"path":1366,"stem":1367},"Перший Avalonia-проєкт: WPF для всіх платформ","/csharp/desktop-ui/03a.first-avalonia-app","01.csharp/12.desktop-ui/03a.first-avalonia-app",{"title":1369,"path":1370,"stem":1371},"XAML: декларативний інтерфейс","/csharp/desktop-ui/xaml-basics","01.csharp/12.desktop-ui/04.xaml-basics",{"title":1373,"path":1374,"stem":1375},"Fluent UI у WPF — сучасний дизайн Windows 11","/csharp/desktop-ui/04a.wpf-fluent-ui","01.csharp/12.desktop-ui/04a.wpf-fluent-ui",{"title":1377,"path":1378,"stem":1379},"WPF UI — сучасна бібліотека Fluent контролів","/csharp/desktop-ui/04b.wpf-ui-library","01.csharp/12.desktop-ui/04b.wpf-ui-library",{"title":1381,"path":1382,"stem":1383},"HandyControl — велика бібліотека UI контролів для WPF","/csharp/desktop-ui/04c.handycontrol-library","01.csharp/12.desktop-ui/04c.handycontrol-library",{"title":1385,"path":1386,"stem":1387},"Простори імен та ресурси XAML","/csharp/desktop-ui/xaml-namespaces-resources","01.csharp/12.desktop-ui/05.xaml-namespaces-resources",{"title":1389,"path":1390,"stem":1391},"XAML в Avalonia: ключові відмінності від WPF","/csharp/desktop-ui/05a.avalonia-xaml-differences","01.csharp/12.desktop-ui/05a.avalonia-xaml-differences",{"title":1393,"path":1394,"stem":1395},"Розширення розмітки XAML (Markup Extensions)","/csharp/desktop-ui/xaml-markup-extensions","01.csharp/12.desktop-ui/06.xaml-markup-extensions",{"title":1397,"path":1398,"stem":1399},"Панелі Layout: StackPanel, WrapPanel, DockPanel","/csharp/desktop-ui/layout-panels-part1","01.csharp/12.desktop-ui/07.layout-panels-part1",{"title":1401,"path":1402,"stem":1403},"Grid, Canvas, UniformGrid","/csharp/desktop-ui/layout-panels-part2","01.csharp/12.desktop-ui/07.layout-panels-part2",{"title":1405,"path":1406,"stem":1407},"Просунуті техніки Layout","/csharp/desktop-ui/layout-advanced","01.csharp/12.desktop-ui/08.layout-advanced",{"title":1409,"path":1410,"stem":1411},"Адаптивний Layout та найкращі практики","/csharp/desktop-ui/layout-responsive","01.csharp/12.desktop-ui/09.layout-responsive",{"title":1413,"path":1414,"stem":1415},"Layout в Avalonia: відмінності та нові можливості","/csharp/desktop-ui/09a.layout-avalonia","01.csharp/12.desktop-ui/09a.layout-avalonia",{"title":1417,"path":1418,"stem":1419},"Button, Image, ProgressBar та інші базові контроли","/csharp/desktop-ui/basic-controls","01.csharp/12.desktop-ui/10.basic-controls",{"title":1421,"path":1422,"stem":1423},"Контроли в Avalonia: відмінності від WPF","/csharp/desktop-ui/10a.controls-avalonia","01.csharp/12.desktop-ui/10a.controls-avalonia",{"title":1425,"path":1426,"stem":1427},"Текстові контроли — TextBlock, TextBox, RichTextBox","/csharp/desktop-ui/text-controls","01.csharp/12.desktop-ui/11.text-controls",{"title":1429,"path":1430,"stem":1431},"Контроли вибору — CheckBox, RadioButton, ComboBox, ListBox, DatePicker","/csharp/desktop-ui/selection-controls","01.csharp/12.desktop-ui/12.selection-controls",{"title":1433,"path":1434,"stem":1435},"Content Model — GroupBox, Expander, TabControl, StatusBar","/csharp/desktop-ui/content-controls","01.csharp/12.desktop-ui/13.content-controls",{"title":1437,"path":1438,"stem":1439},"UI/UX принципи десктопних застосунків","/csharp/desktop-ui/13a.ui-ux-principles","01.csharp/12.desktop-ui/13a.ui-ux-principles",{"title":1441,"path":1442,"stem":1443},"Dependency Properties — Концепція та Value Resolution","/csharp/desktop-ui/dependency-properties-part1","01.csharp/12.desktop-ui/14.dependency-properties-part1",{"title":1445,"path":1446,"stem":1447},"Avalonia Property System — StyledProperty та DirectProperty","/csharp/desktop-ui/14a.avalonia-property-system","01.csharp/12.desktop-ui/14a.avalonia-property-system",{"title":1449,"path":1450,"stem":1451},"Attached Properties — Властивості без меж","/csharp/desktop-ui/attached-properties","01.csharp/12.desktop-ui/15.attached-properties",{"title":1453,"path":1454,"stem":1455},"Routed Events — Маршрутизація подій у WPF","/csharp/desktop-ui/routed-events","01.csharp/12.desktop-ui/16.routed-events",{"title":1457,"path":1458,"stem":1459},"Data Binding — Від Code-Behind до Декларативності","/csharp/desktop-ui/data-binding-basics-part1","01.csharp/12.desktop-ui/17.data-binding-basics-part1",{"title":1461,"path":1462,"stem":1463},"INotifyPropertyChanged — Живе оновлення UI","/csharp/desktop-ui/data-binding-basics-part2","01.csharp/12.desktop-ui/17.data-binding-basics-part2",{"title":1465,"path":1466,"stem":1467},"Compiled Bindings в Avalonia — Безпека на етапі компіляції","/csharp/desktop-ui/17a.avalonia-compiled-bindings","01.csharp/12.desktop-ui/17a.avalonia-compiled-bindings",{"title":1469,"path":1470,"stem":1471},"Просунутий Data Binding — ElementName, RelativeSource, MultiBinding","/csharp/desktop-ui/data-binding-advanced","01.csharp/12.desktop-ui/18.data-binding-advanced",{"title":1473,"path":1474,"stem":1475},"Value Converters — Перетворення типів даних у Data Binding","/csharp/desktop-ui/value-converters","01.csharp/12.desktop-ui/19.value-converters",{"title":1477,"path":1478,"stem":1479},"Data Templates — Візуалізація об'єктів у WPF","/csharp/desktop-ui/data-templates","01.csharp/12.desktop-ui/20.data-templates",{"title":1481,"path":1482,"stem":1483},"Collections Binding Part 1 — ObservableCollection та ItemsControl","/csharp/desktop-ui/collections-binding-part1","01.csharp/12.desktop-ui/21.collections-binding-part1",{"title":1485,"path":1486,"stem":1487},"Collections Binding Part 2 — ICollectionView, Filtering, Sorting та Virtualization","/csharp/desktop-ui/collections-binding-part2","01.csharp/12.desktop-ui/21.collections-binding-part2",{"title":1489,"path":1490,"stem":1491},"MVVM Pattern — Від Spaghetti Code до архітектури","/csharp/desktop-ui/mvvm-pattern","01.csharp/12.desktop-ui/22.mvvm-pattern",{"title":1493,"path":1494,"stem":1495},"ViewModel Implementation — Від BaseViewModel до валідації","/csharp/desktop-ui/viewmodel-implementation","01.csharp/12.desktop-ui/23.viewmodel-implementation",{"title":1497,"path":1498,"stem":1499},"Commands — Від event handlers до декларативних команд","/csharp/desktop-ui/commands","01.csharp/12.desktop-ui/24.commands",{"title":1501,"path":1502,"stem":1503},"MVVM Toolkit — MVVM без boilerplate через Source Generators","/csharp/desktop-ui/mvvm-toolkit","01.csharp/12.desktop-ui/25.mvvm-toolkit",{"title":1505,"path":1506,"stem":1507},"Messenger Pattern — Комунікація між ViewModel без прямих посилань","/csharp/desktop-ui/messenger-pattern","01.csharp/12.desktop-ui/26.messenger-pattern",{"title":1509,"path":1510,"stem":1511},"Стилі WPF — CSS для десктопу","/csharp/desktop-ui/styles-basics","01.csharp/12.desktop-ui/27.styles-basics",{"title":1513,"path":1514,"stem":1515},"CSS-like стилі Avalonia","/csharp/desktop-ui/27a.avalonia-css-styling","01.csharp/12.desktop-ui/27a.avalonia-css-styling",{"title":1517,"path":1518,"stem":1519},"Control Templates — Частина 1. Концепція та TemplateBinding","/csharp/desktop-ui/control-templates-part1","01.csharp/12.desktop-ui/28.control-templates-part1",{"title":1521,"path":1522,"stem":1523},"Control Templates — Частина 2. Named Parts та ContentPresenter","/csharp/desktop-ui/control-templates-part2","01.csharp/12.desktop-ui/28.control-templates-part2",{"title":1525,"path":1526,"stem":1527},"Control Themes в Avalonia — нова ера стилізації","/csharp/desktop-ui/28a.avalonia-control-themes","01.csharp/12.desktop-ui/28a.avalonia-control-themes",{"title":1529,"path":1530,"stem":1531},"Triggers та Visual State Manager у WPF","/csharp/desktop-ui/triggers-visual-states","01.csharp/12.desktop-ui/29.triggers-visual-states",{"title":1533,"path":1534,"stem":1535},"Pseudo-classes в Avalonia — замість WPF Triggers","/csharp/desktop-ui/29a.avalonia-pseudo-classes","01.csharp/12.desktop-ui/29a.avalonia-pseudo-classes",{"title":1537,"path":1538,"stem":1539},"Теми та ресурсні словники у WPF","/csharp/desktop-ui/resources-themes","01.csharp/12.desktop-ui/30.resources-themes",{"title":1541,"path":1542,"stem":1543},"Avalonia Themes — Fluent Design та система тематизації","/csharp/desktop-ui/30a.avalonia-themes-fluent","01.csharp/12.desktop-ui/30a.avalonia-themes-fluent",{"title":1545,"path":1546,"stem":1547},"Контроли колекцій — глибоке занурення","/csharp/desktop-ui/collection-controls","01.csharp/12.desktop-ui/31.collection-controls",{"title":1549,"path":1550,"stem":1551},"DataGrid — колонки та базове відображення","/csharp/desktop-ui/datagrid-part1","01.csharp/12.desktop-ui/32.datagrid-part1",{"title":1553,"path":1554,"stem":1555},"DataGrid — сортування, фільтрація, редагування","/csharp/desktop-ui/datagrid-part2","01.csharp/12.desktop-ui/32.datagrid-part2",{"title":1557,"path":1558,"stem":1559},"TreeView та GridView","/csharp/desktop-ui/treeview-listview","01.csharp/12.desktop-ui/33.treeview-listview",{"title":1561,"path":1562,"stem":1563},"Меню, Toolbar, ContextMenu, StatusBar","/csharp/desktop-ui/menus-toolbars","01.csharp/12.desktop-ui/34.menus-toolbars",{"title":1565,"path":1566,"stem":1567},"Навігація та керування вікнами. Частина 1: вікна та сторінки","/csharp/desktop-ui/navigation-windows-part1","01.csharp/12.desktop-ui/35.navigation-windows-part1",{"title":1569,"path":1570,"stem":1571},"Навігація та керування вікнами. Частина 2: MVVM-навігація","/csharp/desktop-ui/navigation-windows-part2","01.csharp/12.desktop-ui/35.navigation-windows-part2",{"title":1573,"path":1574,"stem":1575},"Avalonia — Навігація та діалоги","/csharp/desktop-ui/35a.avalonia-navigation-dialogs","01.csharp/12.desktop-ui/35a.avalonia-navigation-dialogs",{"title":1577,"path":1578,"stem":1579},"Діалоги та File Pickers у WPF","/csharp/desktop-ui/dialogs-file-pickers","01.csharp/12.desktop-ui/36.dialogs-file-pickers",{"title":1581,"path":1582,"stem":1583},"UserControl: компонентний підхід у WPF","/csharp/desktop-ui/user-controls","01.csharp/12.desktop-ui/37.user-controls",{"title":1585,"path":1586,"stem":1587},"Custom Controls: Lookless Controls у WPF","/csharp/desktop-ui/custom-controls","01.csharp/12.desktop-ui/38.custom-controls",{"title":1589,"path":1590,"stem":1591},"Avalonia TemplatedControl — Lookless Controls","/csharp/desktop-ui/38a.avalonia-templated-controls","01.csharp/12.desktop-ui/38a.avalonia-templated-controls",{"title":1593,"path":1594,"stem":1595},"Анімації у WPF: Storyboard та Easing Functions","/csharp/desktop-ui/animations-transitions","01.csharp/12.desktop-ui/39.animations-transitions",{"title":1597,"path":1598,"stem":1599},"Анімації в Avalonia","/csharp/desktop-ui/39a.avalonia-animations","01.csharp/12.desktop-ui/39a.avalonia-animations",{"title":1601,"path":1602,"stem":1603},"2D Графіка та Мультимедіа у WPF","/csharp/desktop-ui/media-graphics","01.csharp/12.desktop-ui/40.media-graphics",{"title":1605,"path":1606,"stem":1607},"Dependency Injection у WPF та Avalonia","/csharp/desktop-ui/di-integration","01.csharp/12.desktop-ui/41.di-integration",{"title":1609,"path":1610,"stem":1611},"SQLite та EF Core у десктопних додатках","/csharp/desktop-ui/data-persistence-part1","01.csharp/12.desktop-ui/42.data-persistence-part1",{"title":1613,"path":1614,"stem":1615},"Repository Pattern та Unit of Work","/csharp/desktop-ui/data-persistence-part2","01.csharp/12.desktop-ui/43.data-persistence-part2",{"title":1617,"path":1618,"stem":1619},"Тестування ViewModels","/csharp/desktop-ui/viewmodel-testing","01.csharp/12.desktop-ui/44.viewmodel-testing",{"title":1621,"path":1622,"stem":1623},"Avalonia Headless Testing — тестування UI без вікон","/csharp/desktop-ui/44a.avalonia-headless-testing","01.csharp/12.desktop-ui/44a.avalonia-headless-testing",{"title":1625,"path":1626,"stem":1627},"Кросплатформна розробка з Avalonia","/csharp/desktop-ui/avalonia-cross-platform","01.csharp/12.desktop-ui/45.avalonia-cross-platform",{"title":1629,"path":1630,"stem":1631},"Пакування та розгортання Avalonia додатків","/csharp/desktop-ui/avalonia-packaging-deployment","01.csharp/12.desktop-ui/46.avalonia-packaging-deployment",{"title":1633,"path":1634,"stem":1635},"Розгортання WPF застосунків","/csharp/desktop-ui/wpf-packaging-deployment","01.csharp/12.desktop-ui/47.wpf-packaging-deployment",{"title":1637,"path":1638,"stem":1639},"C# & .NET: The Ultimate Roadmap","/csharp/roadmap","01.csharp/roadmap",{"title":1641,"icon":1642,"path":1643,"stem":1644,"children":1645,"page":59},"C++","i-devicon-cplusplus","/cpp","02.cpp",[1646,1650,1654,1658,1662,1666,1670,1674,1678,1681,1685,1689,1693,1697,1701,1705,1709,1713,1717,1721,1725,1729,1733,1737,1741,1745,1749,1753,1757,1761],{"title":1647,"path":1648,"stem":1649},"Вступ у програмування та алгоритми","/cpp/intro-algorithms","02.cpp/01.intro-algorithms",{"title":1651,"path":1652,"stem":1653},"Code Style: угоди про оформлення коду","/cpp/code-style","02.cpp/02.code-style",{"title":1655,"path":1656,"stem":1657},"Середовище розробки та перший проєкт","/cpp/ide-setup","02.cpp/03.ide-setup",{"title":1659,"path":1660,"stem":1661},"Вивід даних на екран","/cpp/data-output","02.cpp/04.data-output",{"title":1663,"path":1664,"stem":1665},"Типи даних, змінні та константи","/cpp/data-types-variables","02.cpp/05.data-types-variables",{"title":1667,"path":1668,"stem":1669},"Ввід даних з клавіатури","/cpp/data-input","02.cpp/06.data-input",{"title":1671,"path":1672,"stem":1673},"Оператори, перетворення типів та логічні операції","/cpp/operators-type-conversion","02.cpp/07.operators-type-conversion",{"title":1675,"path":1676,"stem":1677},"Цикли","/cpp/loops","02.cpp/08.loops",{"title":32,"path":1679,"stem":1680},"/cpp/arrays","02.cpp/09.arrays",{"title":1682,"path":1683,"stem":1684},"Алгоритми сортування та аналіз складності","/cpp/sorting","02.cpp/10.sorting",{"title":1686,"path":1687,"stem":1688},"Алгоритми пошуку","/cpp/searching","02.cpp/11.searching",{"title":1690,"path":1691,"stem":1692},"Функції: основи","/cpp/functions-basics","02.cpp/12.functions-basics",{"title":1694,"path":1695,"stem":1696},"Функції: прототипи, область видимості та додаткові можливості","/cpp/functions-scope","02.cpp/13.functions-scope",{"title":1698,"path":1699,"stem":1700},"Функції: перевантаження та шаблони","/cpp/functions-overloading-templates","02.cpp/14.functions-overloading-templates",{"title":1702,"path":1703,"stem":1704},"Вказівники: основи","/cpp/pointers-basics","02.cpp/15.pointers-basics",{"title":1706,"path":1707,"stem":1708},"Посилання (References)","/cpp/references","02.cpp/16.references",{"title":1710,"path":1711,"stem":1712},"Вказівники, const і масиви","/cpp/pointers-const-arrays","02.cpp/17.pointers-const-arrays",{"title":1714,"path":1715,"stem":1716},"Адресна арифметика","/cpp/pointer-arithmetic","02.cpp/18.pointer-arithmetic",{"title":1718,"path":1719,"stem":1720},"Динамічна пам'ять","/cpp/dynamic-memory","02.cpp/19.dynamic-memory",{"title":1722,"path":1723,"stem":1724},"Вказівники типу void","/cpp/void-pointers","02.cpp/20.void-pointers",{"title":1726,"path":1727,"stem":1728},"Вказівники на вказівники","/cpp/pointers-to-pointers","02.cpp/21.pointers-to-pointers",{"title":1730,"path":1731,"stem":1732},"Оператор доступу до членів через вказівник (->)","/cpp/member-access-operator","02.cpp/22.member-access-operator",{"title":1734,"path":1735,"stem":1736},"Цикл for-each (Range-based for)","/cpp/foreach-loop","02.cpp/23.foreach-loop",{"title":1738,"path":1739,"stem":1740},"Вказівники на функції","/cpp/function-pointers","02.cpp/24.function-pointers",{"title":1742,"path":1743,"stem":1744},"Лямбда-вирази","/cpp/lambdas","02.cpp/25.lambdas",{"title":1746,"path":1747,"stem":1748},"Лямбда-захоплення","/cpp/lambda-captures","02.cpp/26.lambda-captures",{"title":1750,"path":1751,"stem":1752},"Еліпсис","/cpp/ellipsis","02.cpp/27.ellipsis",{"title":1754,"path":1755,"stem":1756},"Аргументи командного рядка","/cpp/command-line-arguments","02.cpp/28.command-line-arguments",{"title":1758,"path":1759,"stem":1760},"Перерахування (enum)","/cpp/enum","02.cpp/29.enum",{"title":1762,"path":1763,"stem":1764},"План навчання: Курс C++ — Продовження (Статті 29–60+)","/cpp/curriculum-plan","02.cpp/curriculum-plan",{"title":1766,"icon":1767,"path":1768,"stem":1769,"children":1770,"page":59},"JavaScript","i-devicon-javascript","/javascript","03.javascript",[1771,1797,1851,1873,2177,2215],{"title":1772,"icon":1773,"path":1774,"stem":1775,"children":1776,"page":59},"Events","i-lucide-mouse-pointer-click","/javascript/events","03.javascript/01.events",[1777,1781,1785,1789,1793],{"title":1778,"path":1779,"stem":1780},"Вступ до подій браузера","/javascript/events/intro","03.javascript/01.events/01.intro",{"title":1782,"path":1783,"stem":1784},"Бульбашковий механізм (Bubbling) та занурення (Capturing)","/javascript/events/bubbling-capturing","03.javascript/01.events/02.bubbling-capturing",{"title":1786,"path":1787,"stem":1788},"Делегування подій (Event Delegation)","/javascript/events/delegate-events","03.javascript/01.events/03.delegate-events",{"title":1790,"path":1791,"stem":1792},"Типові дії браузера та preventDefault()","/javascript/events/prevent-default","03.javascript/01.events/04.prevent-default",{"title":1794,"path":1795,"stem":1796},"Запуск користувацьких подій (Custom Events)","/javascript/events/custom-events","03.javascript/01.events/05.custom-events",{"title":1798,"icon":1799,"path":1800,"stem":1801,"children":1802,"page":59},"Network","i-lucide-globe","/javascript/network","03.javascript/02.network",[1803,1807,1811,1815,1819,1823,1827,1831,1835,1839,1843,1847],{"title":1804,"path":1805,"stem":1806},"Fetch API - Сучасний підхід до HTTP-запитів","/javascript/network/01-fetch-api","03.javascript/02.network/01-fetch-api",{"title":1808,"path":1809,"stem":1810},"FormData - Робота з формами та файлами","/javascript/network/02-formdata","03.javascript/02.network/02-formdata",{"title":1812,"path":1813,"stem":1814},"Відстеження прогресу завантаження","/javascript/network/03-download-progress","03.javascript/02.network/03-download-progress",{"title":1816,"path":1817,"stem":1818},"Переривання fetch-запитів","/javascript/network/04-abort-requests","03.javascript/02.network/04-abort-requests",{"title":1820,"path":1821,"stem":1822},"CORS - Запити між різними джерелами","/javascript/network/05-cors","03.javascript/02.network/05-cors",{"title":1824,"path":1825,"stem":1826},"Fetch API - Повний довідник опцій","/javascript/network/06-fetch-options","03.javascript/02.network/06-fetch-options",{"title":1828,"path":1829,"stem":1830},"URL Objects - Робота з посиланнями","/javascript/network/07-url-objects","03.javascript/02.network/07-url-objects",{"title":1832,"path":1833,"stem":1834},"XMLHttpRequest - AJAX та низькорівневі запити","/javascript/network/08-xmlhttprequest","03.javascript/02.network/08-xmlhttprequest",{"title":1836,"path":1837,"stem":1838},"Відновлюване завантаження файлів","/javascript/network/09-resumable-upload","03.javascript/02.network/09-resumable-upload",{"title":1840,"path":1841,"stem":1842},"Cookies, document.cookie та світ після \"Cookiepocalypse\"","/javascript/network/10-cookies","03.javascript/02.network/10-cookies",{"title":1844,"path":1845,"stem":1846},"js-cookie: Керування Cookies без Болю","/javascript/network/11-js-cookie","03.javascript/02.network/11-js-cookie",{"title":1848,"path":1849,"stem":1850},"Axios: Потужний HTTP-клієнт для JavaScript","/javascript/network/12-axios","03.javascript/02.network/12-axios",{"title":1852,"icon":1853,"path":1854,"stem":1855,"children":1856,"page":59},"Bom","i-lucide-monitor","/javascript/bom","03.javascript/03.bom",[1857,1861,1865,1869],{"title":1858,"path":1859,"stem":1860},"LocalStorage, SessionStorage та patterns збереження даних","/javascript/bom/01-localstorage","03.javascript/03.bom/01-localstorage",{"title":1862,"path":1863,"stem":1864},"Location Object - Керування адресою сторінки","/javascript/bom/02-location-object","03.javascript/03.bom/02-location-object",{"title":1866,"path":1867,"stem":1868},"History API - Керування історією браузера","/javascript/bom/03-history-api","03.javascript/03.bom/03-history-api",{"title":1870,"path":1871,"stem":1872},"Navigator Object - Ідентифікація та Можливості Пристрою","/javascript/bom/04-navigator-object","03.javascript/03.bom/04-navigator-object",{"title":1874,"icon":1875,"path":1876,"stem":1877,"children":1878},"React","i-devicon-react","/javascript/react","03.javascript/04.react/index",[1879,1880,1884,1888,1892,1896,1959,1994,2146],{"title":1874,"path":1876,"stem":1877},{"title":1881,"path":1882,"stem":1883},"Робота з Формами в React","/javascript/react/react-forms","03.javascript/04.react/01.react-forms",{"title":1885,"path":1886,"stem":1887},"React Hook Form: Професійна Робота з Формами","/javascript/react/react-hook-form","03.javascript/04.react/02.react-hook-form",{"title":1889,"path":1890,"stem":1891},"React Hook Form: Глибоке Розуміння Архітектури та Оптимізації","/javascript/react/react-hook-form-new","03.javascript/04.react/02.react-hook-form-new",{"title":1893,"path":1894,"stem":1895},"Axios та React: Професійна Архітектура Запитів","/javascript/react/data-fetching-axios","03.javascript/04.react/03.data-fetching-axios",{"title":1897,"icon":132,"path":1898,"stem":1899,"children":1900},"Tanstack Query","/javascript/react/tanstack-query","03.javascript/04.react/04.tanstack-query/index",[1901,1903,1907,1911,1915,1919,1923,1927,1931,1935,1939,1943,1947,1951,1955],{"title":1902,"path":1898,"stem":1899},"TanStack Query: Майстерність Керування Станом Сервера",{"title":1904,"path":1905,"stem":1906},"Парадигма Server State: Чому useEffect недостатньо","/javascript/react/tanstack-query/server-state-paradigm","03.javascript/04.react/04.tanstack-query/01.server-state-paradigm",{"title":1908,"path":1909,"stem":1910},"Встановлення та Налаштування: Фундамент","/javascript/react/tanstack-query/installation-and-devtools","03.javascript/04.react/04.tanstack-query/02.installation-and-devtools",{"title":1912,"path":1913,"stem":1914},"Основи Запитів та Магія Ключів","/javascript/react/tanstack-query/query-basics-and-keys","03.javascript/04.react/04.tanstack-query/03.query-basics-and-keys",{"title":1916,"path":1917,"stem":1918},"Синхронізація Даних: Життєвий Цикл Запиту","/javascript/react/tanstack-query/data-synchronization","03.javascript/04.react/04.tanstack-query/04.data-synchronization",{"title":1920,"path":1921,"stem":1922},"Мутації та Інвалідація: Зміна Даних","/javascript/react/tanstack-query/mutations-and-invalidation","03.javascript/04.react/04.tanstack-query/05.mutations-and-invalidation",{"title":1924,"path":1925,"stem":1926},"Оптимістичні Оновлення: Швидше за Світло","/javascript/react/tanstack-query/optimistic-updates","03.javascript/04.react/04.tanstack-query/06.optimistic-updates",{"title":1928,"path":1929,"stem":1930},"Пагінація та Infinite Scroll","/javascript/react/tanstack-query/pagination-and-load-more","03.javascript/04.react/04.tanstack-query/07.pagination-and-load-more",{"title":1932,"path":1933,"stem":1934},"Просунуті Патерни та Оптимізація","/javascript/react/tanstack-query/advanced-patterns","03.javascript/04.react/04.tanstack-query/08.advanced-patterns",{"title":1936,"path":1937,"stem":1938},"Архітектура та Best Practices","/javascript/react/tanstack-query/architecture-and-best-practices","03.javascript/04.react/04.tanstack-query/09.architecture-and-best-practices",{"title":1940,"path":1941,"stem":1942},"Server-Side Rendering (SSR) та Гідратація","/javascript/react/tanstack-query/server-side-rendering","03.javascript/04.react/04.tanstack-query/10.server-side-rendering",{"title":1944,"path":1945,"stem":1946},"Стратегії Тестування","/javascript/react/tanstack-query/testing-strategies","03.javascript/04.react/04.tanstack-query/11.testing-strategies",{"title":1948,"path":1949,"stem":1950},"Аутентифікація та Обробка Помилок","/javascript/react/tanstack-query/authentication-and-errors","03.javascript/04.react/04.tanstack-query/12.authentication-and-errors",{"title":1952,"path":1953,"stem":1954},"React Suspense та Майбутнє","/javascript/react/tanstack-query/react-suspense","03.javascript/04.react/04.tanstack-query/13.react-suspense",{"title":1956,"path":1957,"stem":1958},"Глибоке Занурення в Продуктивність","/javascript/react/tanstack-query/performance-deep-dive","03.javascript/04.react/04.tanstack-query/14.performance-deep-dive",{"title":1960,"icon":1875,"path":1961,"stem":1962,"children":1963},"React Router","/javascript/react/react-router","03.javascript/04.react/05.react-router/index",[1964,1966,1970,1974,1978,1982,1986,1990],{"title":1965,"path":1961,"stem":1962},"React Router: Навігаційна система сучасного вебу",{"title":1967,"path":1968,"stem":1969},"Налаштування та Базовий Роутинг","/javascript/react/react-router/setup-and-basic-routing","03.javascript/04.react/05.react-router/01.setup-and-basic-routing",{"title":1971,"path":1972,"stem":1973},"Динамічна Навігація","/javascript/react/react-router/navigation-and-links","03.javascript/04.react/05.react-router/02.navigation-and-links",{"title":1975,"path":1976,"stem":1977},"Вкладені Маршрути та Макети","/javascript/react/react-router/nested-routes-and-layouts","03.javascript/04.react/05.react-router/03.nested-routes-and-layouts",{"title":1979,"path":1980,"stem":1981},"Динамічні Маршрути та Параметри","/javascript/react/react-router/dynamic-routing","03.javascript/04.react/05.react-router/04.dynamic-routing",{"title":1983,"path":1984,"stem":1985},"Data APIs: Loaders та Actions","/javascript/react/react-router/data-loading","03.javascript/04.react/05.react-router/05.data-loading",{"title":1987,"path":1988,"stem":1989},"Просунуті Патерни","/javascript/react/react-router/advanced-patterns","03.javascript/04.react/05.react-router/06.advanced-patterns",{"title":1991,"path":1992,"stem":1993},"Legacy Routing: Компонентний підхід","/javascript/react/react-router/legacy-routing","03.javascript/04.react/05.react-router/07.legacy-routing",{"title":1995,"icon":132,"path":1996,"stem":1997,"children":1998},"Redux","/javascript/react/redux","03.javascript/04.react/06.redux/index",[1999,2001,2017,2046,2055,2076,2092,2121],{"title":2000,"path":1996,"stem":1997},"Redux: Еволюція управління станом",{"title":14,"icon":15,"path":2002,"stem":2003,"children":2004,"page":59},"/javascript/react/redux/fundamentals","03.javascript/04.react/06.redux/01.fundamentals",[2005,2009,2013],{"title":2006,"path":2007,"stem":2008},"Вступ до State Management","/javascript/react/redux/fundamentals/intro-state-management","03.javascript/04.react/06.redux/01.fundamentals/01.intro-state-management",{"title":2010,"path":2011,"stem":2012},"Філософія Redux та Три Принципи","/javascript/react/redux/fundamentals/redux-philosophy","03.javascript/04.react/06.redux/01.fundamentals/02.redux-philosophy",{"title":2014,"path":2015,"stem":2016},"Чисті функції та Іммутабельність","/javascript/react/redux/fundamentals/pure-functions-immutability","03.javascript/04.react/06.redux/01.fundamentals/03.pure-functions-immutability",{"title":2018,"icon":132,"path":2019,"stem":2020,"children":2021,"page":59},"Classic Redux","/javascript/react/redux/classic-redux","03.javascript/04.react/06.redux/02.classic-redux",[2022,2026,2030,2034,2038,2042],{"title":2023,"path":2024,"stem":2025},"Створення Store (Classic Redux)","/javascript/react/redux/classic-redux/store-setup","03.javascript/04.react/06.redux/02.classic-redux/01.store-setup",{"title":2027,"path":2028,"stem":2029},"Actions, Constants та Action Creators","/javascript/react/redux/classic-redux/actions-constants","03.javascript/04.react/06.redux/02.classic-redux/02.actions-constants",{"title":2031,"path":2032,"stem":2033},"Логіка Reducers","/javascript/react/redux/classic-redux/reducers","03.javascript/04.react/06.redux/02.classic-redux/03.reducers",{"title":2035,"path":2036,"stem":2037},"Комбінування Reducers (Root Reducer)","/javascript/react/redux/classic-redux/data-flow","03.javascript/04.react/06.redux/02.classic-redux/04.data-flow",{"title":2039,"path":2040,"stem":2041},"Підключення до React (React-Redux)","/javascript/react/redux/classic-redux/react-redux-connection","03.javascript/04.react/06.redux/02.classic-redux/05.react-redux-connection",{"title":2043,"path":2044,"stem":2045},"Middleware та Асинхронність (Redux Thunk)","/javascript/react/redux/classic-redux/middleware-thunk","03.javascript/04.react/06.redux/02.classic-redux/06.middleware-thunk",{"title":2047,"icon":132,"path":2048,"stem":2049,"children":2050,"page":59},"Transition To Rtk","/javascript/react/redux/transition-to-rtk","03.javascript/04.react/06.redux/03.transition-to-rtk",[2051],{"title":2052,"path":2053,"stem":2054},"Проблеми класичного Redux","/javascript/react/redux/transition-to-rtk/problems-with-classic","03.javascript/04.react/06.redux/03.transition-to-rtk/01.problems-with-classic",{"title":2056,"icon":132,"path":2057,"stem":2058,"children":2059,"page":59},"Redux Toolkit","/javascript/react/redux/redux-toolkit","03.javascript/04.react/06.redux/04.redux-toolkit",[2060,2064,2068,2072],{"title":2061,"path":2062,"stem":2063},"Налаштування Store з configureStore","/javascript/react/redux/redux-toolkit/configure-store","03.javascript/04.react/06.redux/04.redux-toolkit/01.configure-store",{"title":2065,"path":2066,"stem":2067},"createSlice: Революція в Redux","/javascript/react/redux/redux-toolkit/create-slice","03.javascript/04.react/06.redux/04.redux-toolkit/02.create-slice",{"title":2069,"path":2070,"stem":2071},"Асинхронність з createAsyncThunk","/javascript/react/redux/redux-toolkit/async-thunks","03.javascript/04.react/06.redux/04.redux-toolkit/03.async-thunks",{"title":2073,"path":2074,"stem":2075},"04. Entity Adapter: Керування нормалізованим станом","/javascript/react/redux/redux-toolkit/entity-adapter","03.javascript/04.react/06.redux/04.redux-toolkit/04.entity-adapter",{"title":2077,"icon":92,"path":2078,"stem":2079,"children":2080,"page":59},"Advanced","/javascript/react/redux/advanced","03.javascript/04.react/06.redux/05.advanced",[2081,2085,2089],{"title":2082,"path":2083,"stem":2084},"Мемоізація та Селектори: Повний Гайд по Reselect","/javascript/react/redux/advanced/selectors-reselect","03.javascript/04.react/06.redux/05.advanced/01.selectors-reselect",{"title":2086,"path":2087,"stem":2088},"RTK Query: Архітектура Серверного Кешу","/javascript/react/redux/advanced/rtk-query-intro","03.javascript/04.react/06.redux/05.advanced/02.rtk-query-intro",{"title":1936,"path":2090,"stem":2091},"/javascript/react/redux/advanced/architecture-best-practices","03.javascript/04.react/06.redux/05.advanced/03.architecture-best-practices",{"title":2093,"icon":132,"path":2094,"stem":2095,"children":2096,"page":59},"Project Kanban","/javascript/react/redux/project-kanban","03.javascript/04.react/06.redux/06.project-kanban",[2097,2101,2105,2109,2113,2117],{"title":2098,"path":2099,"stem":2100},"Проєкт: Kanban Board (Trello Clone)","/javascript/react/redux/project-kanban/project-overview","03.javascript/04.react/06.redux/06.project-kanban/01.project-overview",{"title":2102,"path":2103,"stem":2104},"Налаштування та Типізація","/javascript/react/redux/project-kanban/setup-and-types","03.javascript/04.react/06.redux/06.project-kanban/02.setup-and-types",{"title":2106,"path":2107,"stem":2108},"Board Slice: Серце Дошки","/javascript/react/redux/project-kanban/board-slice","03.javascript/04.react/06.redux/06.project-kanban/03.board-slice",{"title":2110,"path":2111,"stem":2112},"Логіка Drag & Drop","/javascript/react/redux/project-kanban/drag-and-drop-logic","03.javascript/04.react/06.redux/06.project-kanban/04.drag-and-drop-logic",{"title":2114,"path":2115,"stem":2116},"Інтеграція з RTK Query","/javascript/react/redux/project-kanban/rtk-query-integration","03.javascript/04.react/06.redux/06.project-kanban/05.rtk-query-integration",{"title":2118,"path":2119,"stem":2120},"Optimistic Updates","/javascript/react/redux/project-kanban/optimistic-updates","03.javascript/04.react/06.redux/06.project-kanban/06.optimistic-updates",{"title":2122,"icon":132,"path":2123,"stem":2124,"children":2125,"page":59},"Testing","/javascript/react/redux/testing","03.javascript/04.react/06.redux/07.testing",[2126,2130,2134,2138,2142],{"title":2127,"path":2128,"stem":2129},"Тестування Redux","/javascript/react/redux/testing/intro-testing","03.javascript/04.react/06.redux/07.testing/01.intro-testing",{"title":2131,"path":2132,"stem":2133},"Тестування Reducers","/javascript/react/redux/testing/testing-reducers","03.javascript/04.react/06.redux/07.testing/02.testing-reducers",{"title":2135,"path":2136,"stem":2137},"Тестування Селекторів","/javascript/react/redux/testing/testing-selectors","03.javascript/04.react/06.redux/07.testing/03.testing-selectors",{"title":2139,"path":2140,"stem":2141},"Тестування Компонентів (Integration)","/javascript/react/redux/testing/testing-components","03.javascript/04.react/06.redux/07.testing/04.testing-components",{"title":2143,"path":2144,"stem":2145},"Тестування Async Thunks","/javascript/react/redux/testing/testing-thunks","03.javascript/04.react/06.redux/07.testing/05.testing-thunks",{"title":2147,"icon":132,"path":2148,"stem":2149,"children":2150},"Ui Libraries","/javascript/react/ui-libraries","03.javascript/04.react/07.ui-libraries/index",[2151,2153,2157,2161,2165,2169,2173],{"title":2152,"path":2148,"stem":2149},"UI Бібліотеки в React",{"title":2154,"path":2155,"stem":2156},"Вступ до UI Бібліотек: Навіщо Винаходити Велосипед Двічі?","/javascript/react/ui-libraries/introduction-to-ui-libraries","03.javascript/04.react/07.ui-libraries/01.introduction-to-ui-libraries",{"title":2158,"path":2159,"stem":2160},"Філософія shadcn/ui: \"Not a Component Library\"","/javascript/react/ui-libraries/shadcn-philosophy","03.javascript/04.react/07.ui-libraries/02.shadcn-philosophy",{"title":2162,"path":2163,"stem":2164},"Установка та Налаштування shadcn/ui","/javascript/react/ui-libraries/shadcn-installation","03.javascript/04.react/07.ui-libraries/03.shadcn-installation",{"title":2166,"path":2167,"stem":2168},"Базові Компоненти shadcn/ui: Фундамент Інтерфейсу","/javascript/react/ui-libraries/shadcn-components-basics","03.javascript/04.react/07.ui-libraries/04.shadcn-components-basics",{"title":2170,"path":2171,"stem":2172},"Компоненти Форм: Побудова Інтерактивних Form","/javascript/react/ui-libraries/shadcn-components-forms","03.javascript/04.react/07.ui-libraries/05.shadcn-components-forms",{"title":2174,"path":2175,"stem":2176},"Складні Компоненти: Dialog, Dropdown, Table та Command","/javascript/react/ui-libraries/shadcn-components-advanced","03.javascript/04.react/07.ui-libraries/06.shadcn-components-advanced",{"title":2178,"icon":2179,"path":2180,"stem":2181,"children":2182,"page":59},"TypeScript","i-devicon-typescript","/javascript/typescript","03.javascript/05.typescript",[2183,2187,2191,2195,2199,2203,2207,2211],{"title":2184,"path":2185,"stem":2186},"TypeScript: Броня для вашого коду","/javascript/typescript/intro-and-basic-types","03.javascript/05.typescript/01.intro-and-basic-types",{"title":2188,"path":2189,"stem":2190},"Майстерність Моделювання Даних: Інтерфейси та Просунуті Типи","/javascript/typescript/interfaces-and-advanced-types","03.javascript/05.typescript/02.interfaces-and-advanced-types",{"title":2192,"path":2193,"stem":2194},"Алхімія Типів: Generics та Utility Types","/javascript/typescript/generics-and-utilities","03.javascript/05.typescript/03.generics-and-utilities",{"title":2196,"path":2197,"stem":2198},"Архітектура та Шаблони: Класи в TypeScript","/javascript/typescript/classes-and-oop","03.javascript/05.typescript/04.classes-and-oop",{"title":2200,"path":2201,"stem":2202},"Продакшн та Екосистема: Advanced Config & Workflow","/javascript/typescript/advanced-patterns-and-config","03.javascript/05.typescript/05.advanced-patterns-and-config",{"title":2204,"path":2205,"stem":2206},"TypeScript у світі React","/javascript/typescript/react-basics","03.javascript/05.typescript/06.react-basics",{"title":2208,"path":2209,"stem":2210},"React + TypeScript: Продвинуті патерни","/javascript/typescript/react-advanced","03.javascript/05.typescript/07.react-advanced",{"title":2212,"path":2213,"stem":2214},"React + TypeScript: Екосистема та бібліотеки","/javascript/typescript/react-ecosystem","03.javascript/05.typescript/08.react-ecosystem",{"title":2216,"path":2217,"stem":2218},"Atomic Design","/javascript/atomic-design","03.javascript/2.atomic-design",{"title":2220,"icon":2221,"path":2222,"stem":2223,"children":2224,"page":59},"Java","i-devicon-java","/java","04.java",[2225,2228,2231,2235,2239,2243,2247],{"title":162,"path":2226,"stem":2227},"/java/data-mapper-part1","04.java/01.data-mapper-part1",{"title":166,"path":2229,"stem":2230},"/java/data-mapper-part2","04.java/02.data-mapper-part2",{"title":2232,"path":2233,"stem":2234},"Service Layer: Організація бізнес-логіки","/java/service-layer","04.java/03.service-layer",{"title":2236,"path":2237,"stem":2238},"Rich Domain Model та State Pattern","/java/rich-domain-model","04.java/04.rich-domain-model",{"title":2240,"path":2241,"stem":2242},"Патерни для складної бізнес-логіки","/java/business-logic-patterns","04.java/05.business-logic-patterns",{"title":2244,"path":2245,"stem":2246},"Обробка помилок та валідація","/java/error-handling-validation","04.java/06.error-handling-validation",{"title":2248,"path":2249,"stem":2250,"children":2251,"page":59},"Проектування баз даних","/java/pr2","04.java/pr2",[2252,2256,2260,2264,2268,2272,2276,2280,2284,2288,2292,2296,2300,2304,2308,2312,2316,2320,2324,2328,2332,2336,2340,2344,2348],{"title":2253,"path":2254,"stem":2255},"Концептуальне моделювання: Мистецтво розуміння предметної області","/java/pr2/conceptual-modeling","04.java/pr2/01.conceptual-modeling",{"title":2257,"path":2258,"stem":2259},"Логічне моделювання: Від бізнес-ідей до структур даних","/java/pr2/logical-modeling","04.java/pr2/02.logical-modeling",{"title":2261,"path":2262,"stem":2263},"Нормалізація: Гігієна даних та боротьба з аномаліями","/java/pr2/normalization","04.java/pr2/03.normalization",{"title":2265,"path":2266,"stem":2267},"Фізична схема: Від абстракції до DDL","/java/pr2/physical-schema","04.java/pr2/04.physical-schema",{"title":2269,"path":2270,"stem":2271},"Архітектурна класифікація таблиць","/java/pr2/table-classification","04.java/pr2/05.table-classification",{"title":2273,"path":2274,"stem":2275},"Database Migrations: Версіонування схеми з Flyway","/java/pr2/database-migrations","04.java/pr2/06.database-migrations",{"title":2277,"path":2278,"stem":2279},"А що, якби це була не реляційна БД?","/java/pr2/beyond-relational","04.java/pr2/07.beyond-relational",{"title":2281,"path":2282,"stem":2283},"Object-Relational Impedance Mismatch: Два світи, що не хочуть дружити","/java/pr2/impedance-mismatch","04.java/pr2/09.impedance-mismatch",{"title":2285,"path":2286,"stem":2287},"JDBC: Перший контакт із базою даних","/java/pr2/jdbc-fundamentals","04.java/pr2/10.jdbc-fundamentals",{"title":2289,"path":2290,"stem":2291},"Якість коду: Spotless, SpotBugs та SonarQube","/java/pr2/10a.code-quality","04.java/pr2/10a.code-quality",{"title":2293,"path":2294,"stem":2295},"Connection Pool: Патерн Object Pool для JDBC-з'єднань","/java/pr2/connection-pool","04.java/pr2/11.connection-pool",{"title":2297,"path":2298,"stem":2299},"Row Data Gateway: Об'єкт як обгортка рядка таблиці","/java/pr2/row-data-gateway","04.java/pr2/12.row-data-gateway",{"title":2301,"path":2302,"stem":2303},"Table Data Gateway: Фасад таблиці як архітектурний відступ","/java/pr2/table-data-gateway","04.java/pr2/13.table-data-gateway",{"title":2305,"path":2306,"stem":2307},"Repository + Data Mapper: Правильна шарова архітектура з JDBC","/java/pr2/repository-data-mapper","04.java/pr2/14.repository-data-mapper",{"title":2309,"path":2310,"stem":2311},"Identity Map: Кешування сутностей у рамках сесії","/java/pr2/identity-map","04.java/pr2/15.identity-map",{"title":2313,"path":2314,"stem":2315},"Unit of Work: Відстеження змін і координація JDBC-транзакцій","/java/pr2/unit-of-work","04.java/pr2/16.unit-of-work",{"title":2317,"path":2318,"stem":2319},"Strategy: Замінювані SQL-стратегії для підтримки різних СУБД","/java/pr2/strategy-sql","04.java/pr2/17.strategy-sql",{"title":2321,"path":2322,"stem":2323},"Proxy: Lazy Loading для One-To-Many колекцій","/java/pr2/proxy-lazy-loading","04.java/pr2/18.proxy-lazy-loading",{"title":2325,"path":2326,"stem":2327},"Generic Repository через Java Reflection: анотації та динамічний SQL","/java/pr2/generic-repository-reflection","04.java/pr2/19.generic-repository-reflection",{"title":2329,"path":2330,"stem":2331},"Specification Pattern: Композиція бізнес-правил для складних запитів","/java/pr2/specification-pattern","04.java/pr2/20.specification-pattern",{"title":2333,"path":2334,"stem":2335},"Розширені можливості Specification Pattern: підзапити, агрегації та гібридний підхід","/java/pr2/20a.advanced-specifications","04.java/pr2/20a.advanced-specifications",{"title":2337,"path":2338,"stem":2339},"Асинхронність у JDBC: Від блокуючих викликів до CompletableFuture","/java/pr2/asynchronous-jdbc","04.java/pr2/21.asynchronous-jdbc",{"title":2341,"path":2342,"stem":2343},"Інтеграційне тестування JDBC-репозиторіїв: Embedded H2 та патерн AAA","/java/pr2/integration-testing-h2","04.java/pr2/22.integration-testing-h2",{"title":2345,"path":2346,"stem":2347},"Testcontainers: Тестування з реальною PostgreSQL у Docker-контейнерах","/java/pr2/integration-testing-testcontainers","04.java/pr2/23.integration-testing-testcontainers",{"title":2349,"path":2350,"stem":2351},"Модуль \"Проектування реляційних баз даних\" для 04.java/pr2","/java/pr2/implementation_plan","04.java/pr2/implementation_plan",{"title":2353,"icon":2354,"path":2355,"stem":2356,"children":2357,"page":59},"Бази даних","i-lucide-database","/databases","06.databases",[2358,2388,2411,2448,2477,2495,2529,2541,2550],{"title":2359,"icon":2360,"path":2361,"stem":2362,"children":2363,"page":59},"Intro","i-lucide-play","/databases/intro","06.databases/01.intro",[2364,2368,2372,2376,2380,2384],{"title":2365,"path":2366,"stem":2367},"Введення в теорію баз даних","/databases/intro/introduction-to-databases","06.databases/01.intro/01.introduction-to-databases",{"title":2369,"path":2370,"stem":2371},"Реляційна модель даних","/databases/intro/relational-model-theory","06.databases/01.intro/02.relational-model-theory",{"title":2373,"path":2374,"stem":2375},"ER-моделювання","/databases/intro/er-modeling","06.databases/01.intro/03.er-modeling",{"title":2377,"path":2378,"stem":2379},"Логічне проектування БД","/databases/intro/logical-schema","06.databases/01.intro/04.logical-schema",{"title":2381,"path":2382,"stem":2383},"Класифікація таблиць","/databases/intro/table-classification","06.databases/01.intro/05.table-classification",{"title":2385,"path":2386,"stem":2387},"PlantUML для баз даних","/databases/intro/plantuml-diagrams","06.databases/01.intro/06.plantuml-diagrams",{"title":2389,"icon":2354,"path":2390,"stem":2391,"children":2392,"page":59},"MS SQL Server Start","/databases/ms-sql-server-start","06.databases/02.ms-sql-server-start",[2393,2397,2403,2407],{"title":2394,"path":2395,"stem":2396},"Типи даних у MS SQL Server","/databases/ms-sql-server-start/data-types","06.databases/02.ms-sql-server-start/01.data-types",{"title":2398,"path":2399,"stem":2400,"children":2401},"Індекси у MS SQL Server","/databases/ms-sql-server-start/sql-indexes","06.databases/02.ms-sql-server-start/02.sql-indexes",[2402],{"title":2398,"path":2399,"stem":2400},{"title":2404,"path":2405,"stem":2406},"Системні бази даних MS SQL Server","/databases/ms-sql-server-start/system-databases","06.databases/02.ms-sql-server-start/03.system-databases",{"title":2408,"path":2409,"stem":2410},"Огляд мови SQL та запитів","/databases/ms-sql-server-start/sql-queries-overview","06.databases/02.ms-sql-server-start/04.sql-queries-overview",{"title":2412,"icon":2354,"path":2413,"stem":2414,"children":2415,"page":59},"SQL","/databases/sql","06.databases/03.sql",[2416,2420,2424,2428,2432,2436,2440,2444],{"title":2417,"path":2418,"stem":2419},"Налаштування демонстраційної бази даних","/databases/sql/sample-database-setup","06.databases/03.sql/00.sample-database-setup",{"title":2421,"path":2422,"stem":2423},"DDL - Створення таблиць (CREATE TABLE)","/databases/sql/ddl-create-table","06.databases/03.sql/01.ddl-create-table",{"title":2425,"path":2426,"stem":2427},"DDL - Зміна та видалення таблиць (ALTER, DROP)","/databases/sql/ddl-alter-drop-table","06.databases/03.sql/02.ddl-alter-drop-table",{"title":2429,"path":2430,"stem":2431},"SELECT запити - Основи","/databases/sql/select-queries-fundamentals","06.databases/03.sql/03.select-queries-fundamentals",{"title":2433,"path":2434,"stem":2435},"SELECT запити - Розширені можливості","/databases/sql/select-queries-advanced","06.databases/03.sql/04.select-queries-advanced",{"title":2437,"path":2438,"stem":2439},"INSERT запити - Додавання даних","/databases/sql/insert-queries","06.databases/03.sql/05.insert-queries",{"title":2441,"path":2442,"stem":2443},"UPDATE та DELETE запити","/databases/sql/update-delete-queries","06.databases/03.sql/06.update-delete-queries",{"title":2445,"path":2446,"stem":2447},"Транзакції в SQL","/databases/sql/transactions","06.databases/03.sql/07.transactions",{"title":2449,"icon":2354,"path":2450,"stem":2451,"children":2452,"page":59},"Multi Table Databases","/databases/multi-table-databases","06.databases/04.multi-table-databases",[2453,2457,2461,2465,2469,2473],{"title":2454,"path":2455,"stem":2456},"Зв'язки та нормалізація БД","/databases/multi-table-databases/relationships-and-normalization","06.databases/04.multi-table-databases/00.relationships-and-normalization",{"title":2458,"path":2459,"stem":2460},"INNER JOIN - З'єднання таблиць","/databases/multi-table-databases/inner-join","06.databases/04.multi-table-databases/01.inner-join",{"title":2462,"path":2463,"stem":2464},"OUTER JOINs - LEFT, RIGHT, FULL","/databases/multi-table-databases/outer-joins","06.databases/04.multi-table-databases/02.outer-joins",{"title":2466,"path":2467,"stem":2468},"CROSS та SELF JOINs","/databases/multi-table-databases/cross-self-joins","06.databases/04.multi-table-databases/03.cross-self-joins",{"title":2470,"path":2471,"stem":2472},"Підзапити (Subqueries)","/databases/multi-table-databases/subqueries","06.databases/04.multi-table-databases/04.subqueries",{"title":2474,"path":2475,"stem":2476},"Агрегації з JOIN","/databases/multi-table-databases/aggregations-with-joins","06.databases/04.multi-table-databases/05.aggregations-with-joins",{"title":2478,"icon":2479,"path":2480,"stem":2481,"children":2482,"page":59},"Aggregate Functions","i-lucide-calculator","/databases/aggregate-functions","06.databases/05.aggregate-functions",[2483,2487,2491],{"title":2484,"path":2485,"stem":2486},"Функції агрегування в MS SQL Server","/databases/aggregate-functions/introduction-aggregate-functions","06.databases/05.aggregate-functions/01.introduction-aggregate-functions",{"title":2488,"path":2489,"stem":2490},"Групування даних в MS SQL Server","/databases/aggregate-functions/grouping-data","06.databases/05.aggregate-functions/02.grouping-data",{"title":2492,"path":2493,"stem":2494},"Підзапити з агрегатними функціями","/databases/aggregate-functions/subqueries-aggregates","06.databases/05.aggregate-functions/03.subqueries-aggregates",{"title":2496,"icon":2497,"path":2498,"stem":2499,"children":2500,"page":59},"Тригери та зберігаємі процедури","i-lucide-database-zap","/databases/triggers-stored-procedures","06.databases/07.triggers-stored-procedures",[2501,2505,2509,2513,2517,2521,2525],{"title":2502,"path":2503,"stem":2504},"DML-тригери","/databases/triggers-stored-procedures/dml-triggers","06.databases/07.triggers-stored-procedures/01.dml-triggers",{"title":2506,"path":2507,"stem":2508},"DDL-тригери","/databases/triggers-stored-procedures/ddl-triggers","06.databases/07.triggers-stored-procedures/02.ddl-triggers",{"title":2510,"path":2511,"stem":2512},"Transact-SQL розширення","/databases/triggers-stored-procedures/transact-sql-extensions","06.databases/07.triggers-stored-procedures/03.transact-sql-extensions",{"title":2514,"path":2515,"stem":2516},"Транзакції","/databases/triggers-stored-procedures/transactions","06.databases/07.triggers-stored-procedures/04.transactions",{"title":2518,"path":2519,"stem":2520},"Зберігаємі процедури","/databases/triggers-stored-procedures/stored-procedures","06.databases/07.triggers-stored-procedures/05.stored-procedures",{"title":2522,"path":2523,"stem":2524},"Користувацькі функції","/databases/triggers-stored-procedures/user-defined-functions","06.databases/07.triggers-stored-procedures/06.user-defined-functions",{"title":2526,"path":2527,"stem":2528},"Безпека баз даних","/databases/triggers-stored-procedures/security","06.databases/07.triggers-stored-procedures/08.security",{"title":2526,"icon":793,"path":2530,"stem":2531,"children":2532,"page":59},"/databases/security","06.databases/08.security",[2533,2537],{"title":2534,"path":2535,"stem":2536},"Вступ до безпеки баз даних","/databases/security/introduction","06.databases/08.security/01.introduction",{"title":2538,"path":2539,"stem":2540},"Системні представлення та метадані","/databases/security/system-views","06.databases/08.security/02.system-views",{"title":2542,"icon":2543,"path":2544,"stem":2545,"children":2546,"page":59},"Резервне копіювання та відновлення","i-lucide-database-backup","/databases/backup-recovery","06.databases/09.backup-recovery",[2547],{"title":2542,"path":2548,"stem":2549},"/databases/backup-recovery/backup-restore","06.databases/09.backup-recovery/01.backup-restore",{"title":2551,"icon":2552,"path":2553,"stem":2554,"children":2555,"page":59},"Повнотекстовий пошук","i-lucide-search","/databases/full-text-search","06.databases/10.full-text-search",[2556],{"title":2551,"path":2557,"stem":2558},"/databases/full-text-search/full-text-search","06.databases/10.full-text-search/01.full-text-search",{"title":2560,"icon":2561,"path":2562,"stem":2563,"children":2564,"page":59},"Tools","i-lucide-wrench","/tools","07.tools",[2565],{"title":2566,"icon":2567,"path":2568,"stem":2569,"children":2570},"Docker","i-simple-icons-docker","/tools/docker","07.tools/01.docker/index",[2571,2573,2577,2581,2585,2589,2593,2597,2601,2605,2609,2613,2617,2621,2625,2629,2633,2637],{"title":2572,"path":2568,"stem":2569},"Docker: від нуля до production",{"title":2574,"path":2575,"stem":2576},"Контейнеризація — від проблеми до рішення","/tools/docker/containerization-concept","07.tools/01.docker/01.containerization-concept",{"title":2578,"path":2579,"stem":2580},"Docker — що це і навіщо?","/tools/docker/docker-what-and-why","07.tools/01.docker/02.docker-what-and-why",{"title":2582,"path":2583,"stem":2584},"Архітектура Docker Engine","/tools/docker/docker-architecture","07.tools/01.docker/03.docker-architecture",{"title":2586,"path":2587,"stem":2588},"Встановлення Docker","/tools/docker/installation","07.tools/01.docker/04.installation",{"title":2590,"path":2591,"stem":2592},"Перший контейнер — docker run","/tools/docker/first-container","07.tools/01.docker/05.first-container",{"title":2594,"path":2595,"stem":2596},"Життєвий цикл контейнера","/tools/docker/container-lifecycle","07.tools/01.docker/06.container-lifecycle",{"title":2598,"path":2599,"stem":2600},"Docker Images — фундаментальні концепції","/tools/docker/docker-images-fundamentals","07.tools/01.docker/07.docker-images-fundamentals",{"title":2602,"path":2603,"stem":2604},"Dockerfile — основи","/tools/docker/dockerfile-basics","07.tools/01.docker/08.dockerfile-basics",{"title":2606,"path":2607,"stem":2608},"Dockerfile — просунуті техніки","/tools/docker/dockerfile-advanced","07.tools/01.docker/09.dockerfile-advanced",{"title":2610,"path":2611,"stem":2612},"Build Context та кешування шарів","/tools/docker/build-context-and-cache","07.tools/01.docker/10.build-context-and-cache",{"title":2614,"path":2615,"stem":2616},"Реєстри Docker-образів","/tools/docker/image-registries","07.tools/01.docker/11.image-registries",{"title":2618,"path":2619,"stem":2620},"Контейнеризація .NET додатків","/tools/docker/dotnet-containerization","07.tools/01.docker/12.dotnet-containerization",{"title":2622,"path":2623,"stem":2624},"Томи та збереження даних","/tools/docker/volumes-and-data","07.tools/01.docker/13.volumes-and-data",{"title":2626,"path":2627,"stem":2628},"Основи мережі в Docker","/tools/docker/networking-basics","07.tools/01.docker/14.networking-basics",{"title":2630,"path":2631,"stem":2632},"Змінні оточення та конфігурація","/tools/docker/environment-and-configuration","07.tools/01.docker/15.environment-and-configuration",{"title":2634,"path":2635,"stem":2636},"Docker Compose — оркестрація контейнерів","/tools/docker/docker-compose-basics","07.tools/01.docker/16.docker-compose-basics",{"title":2638,"path":2639,"stem":2640},"Docker Compose — Multi-Service застосунки","/tools/docker/compose-multi-service","07.tools/01.docker/17.compose-multi-service",{"title":2642,"icon":2643,"path":2644,"stem":2645,"children":2646,"page":59},"Software Engineering","i-lucide-code-2","/software-engineering","09.software-engineering",[2647,2651,2655,2659,2663,2667,2671,2675,2679,2683,2687],{"title":2648,"path":2649,"stem":2650},"1. Аналіз предметної області. Експертні знання та складність","/software-engineering/intro.subdomains","09.software-engineering/01.intro.subdomains",{"title":2652,"path":2653,"stem":2654},"2. Обмежені контексти. Інтеграція обмежених контекстів","/software-engineering/integrating-limited-contexts","09.software-engineering/02.integrating-limited-contexts",{"title":2656,"path":2657,"stem":2658},"3. Реалізація простої бізнес-логіки","/software-engineering/simple","09.software-engineering/03.simple",{"title":2660,"path":2661,"stem":2662},"4. Опрацювання складної бізнес-логіки","/software-engineering/complex-business-logic","09.software-engineering/04.complex-business-logic",{"title":2664,"path":2665,"stem":2666},"5. Моделювання фактора часу. Подієво-орієнтована архітектура.","/software-engineering/modelling-the-time-factor","09.software-engineering/05.modelling-the-time-factor",{"title":2668,"path":2669,"stem":2670},"6. Архітектурні патерни","/software-engineering/architectural-patterns","09.software-engineering/06.architectural-patterns",{"title":2672,"path":2673,"stem":2674},"Паттерни взаємодії","/software-engineering/patterns-of-interaction","09.software-engineering/07.patterns-of-interaction",{"title":2676,"path":2677,"stem":2678},"Евристика проєктування","/software-engineering/design-heuristics","09.software-engineering/08.design-heuristics",{"title":2680,"path":2681,"stem":2682},"Еволюція проєктних рішень","/software-engineering/evolution-of-design-solutions","09.software-engineering/09.evolution-of-design-solutions",{"title":2684,"path":2685,"stem":2686},"EventStorming","/software-engineering/eventstorming","09.software-engineering/10.eventstorming",{"title":2688,"path":2689,"stem":2690},"DDD на практиці","/software-engineering/ddd-in-practice","09.software-engineering/11.ddd-in-practice",{"title":2692,"icon":943,"path":2693,"stem":2694,"children":2695,"page":59},"DDD","/ddd","10.ddd",[2696,2700,2704,2708,2712,2716,2720,2724,2728,2732,2736,2740,2744],{"title":2697,"path":2698,"stem":2699},"Аналіз предметної області","/ddd/domain-analysis","10.ddd/01.domain-analysis",{"title":2701,"path":2702,"stem":2703},"Експертні знання про предметну область","/ddd/domain-expert-knowledge","10.ddd/02.domain-expert-knowledge",{"title":2705,"path":2706,"stem":2707},"Як осмислити складність предметної області","/ddd/managing-domain-complexity","10.ddd/03.managing-domain-complexity",{"title":2709,"path":2710,"stem":2711},"Інтеграція обмежених контекстів","/ddd/bounded-context-integration","10.ddd/04.bounded-context-integration",{"title":2713,"path":2714,"stem":2715},"Реалізація простої бізнес-логіки","/ddd/simple-business-logic","10.ddd/05.simple-business-logic",{"title":2717,"path":2718,"stem":2719},"Обробка складної бізнес-логіки","/ddd/complex-business-logic","10.ddd/06.complex-business-logic",{"title":2721,"path":2722,"stem":2723},"Моделювання фактора часу","/ddd/time-modeling","10.ddd/07.time-modeling",{"title":2725,"path":2726,"stem":2727},"Глава 8. Архітектурні Патерни","/ddd/architectural-patterns","10.ddd/08.architectural-patterns",{"title":2729,"path":2730,"stem":2731},"Глава 9. Патерни Взаємодії","/ddd/interaction-patterns","10.ddd/09.interaction-patterns",{"title":2733,"path":2734,"stem":2735},"Глава 10. Проектні Евристики","/ddd/design-heuristics","10.ddd/10.design-heuristics",{"title":2737,"path":2738,"stem":2739},"Глава 11. Еволюція Проектних Рішень","/ddd/evolution-of-design-decisions","10.ddd/11.evolution-of-design-decisions",{"title":2741,"path":2742,"stem":2743},"Глава 12. EventStorming","/ddd/event-storming","10.ddd/12.event-storming",{"title":2745,"path":2746,"stem":2747},"Глава 13. DDD на Практиці","/ddd/ddd-in-practice","10.ddd/13.ddd-in-practice",{"title":2749,"icon":2750,"path":2751,"stem":2752,"children":2753,"page":59},"Media Streaming","i-lucide-video","/media-streaming","11.media-streaming",[2754,2758,2762,2766,2770,2774,2778],{"title":2755,"path":2756,"stem":2757},"01. Магія Стрімінгу: Що відбувається, коли ви натискаєте \"Play\"","/media-streaming/introduction","11.media-streaming/01.introduction",{"title":2759,"path":2760,"stem":2761},"02. Анатомія Медіа: Кодеки, Контейнери та Стиснення","/media-streaming/audio-video-anatomy","11.media-streaming/02.audio-video-anatomy",{"title":2763,"path":2764,"stem":2765},"03. The Gym: FFmpeg Deep Dive","/media-streaming/ffmpeg-gym","11.media-streaming/03.ffmpeg-gym",{"title":2767,"path":2768,"stem":2769},"04. HLS Protocol: HTTP Live Streaming у Деталях","/media-streaming/hls-protocol","11.media-streaming/04.hls-protocol",{"title":2771,"path":2772,"stem":2773},"05. DASH Protocol: Відкритий Стандарт","/media-streaming/dash-protocol","11.media-streaming/05.dash-protocol",{"title":2775,"path":2776,"stem":2777},"06. Масштабування: CDN та Adaptive Bitrate","/media-streaming/cdn-and-adaptive-bitrate","11.media-streaming/06.cdn-and-adaptive-bitrate",{"title":2779,"path":2780,"stem":2781},"07. Війна із Затримкою (Latency)","/media-streaming/realtime-latency","11.media-streaming/07.realtime-latency",{"title":2783,"icon":2784,"path":2785,"stem":2786,"children":2787,"page":59},"HTML & CSS","i-devicon-html5","/html-css","12.html-css",[2788,2792,2796,2800,2804,2808,2812,2816,2820,2824,2828,2832,2836,2840,2844,2848,2852,2856,2860,2864,2868,2872,2876,2880,2884,2888,2892,2896,2900,2904],{"title":2789,"path":2790,"stem":2791},"Вступ до HTML. Структура документа","/html-css/intro-html-structure","12.html-css/01.intro-html-structure",{"title":2793,"path":2794,"stem":2795},"Форматування тексту в HTML","/html-css/html-text-formatting","12.html-css/02.html-text-formatting",{"title":2797,"path":2798,"stem":2799},"Посилання та зображення в HTML","/html-css/html-links-images","12.html-css/03.html-links-images",{"title":2801,"path":2802,"stem":2803},"Списки та таблиці в HTML","/html-css/html-lists-tables","12.html-css/04.html-lists-tables",{"title":2805,"path":2806,"stem":2807},"Форми в HTML","/html-css/html-forms","12.html-css/05.html-forms",{"title":2809,"path":2810,"stem":2811},"Семантичні елементи HTML5","/html-css/html-semantic-elements","12.html-css/06.html-semantic-elements",{"title":2813,"path":2814,"stem":2815},"Мультимедіа та розширені елементи HTML","/html-css/html-multimedia-advanced","12.html-css/07.html-multimedia-advanced",{"title":2817,"path":2818,"stem":2819},"Мікророзмітка та SEO в HTML","/html-css/html-microdata-seo","12.html-css/08.html-microdata-seo",{"title":2821,"path":2822,"stem":2823},"Вступ до CSS. Селектори та специфічність","/html-css/css-intro-selectors","12.html-css/09.css-intro-selectors",{"title":2825,"path":2826,"stem":2827},"Блокова модель CSS. Відступи. Box Sizing","/html-css/css-box-model","12.html-css/10.css-box-model",{"title":2829,"path":2830,"stem":2831},"Розміри у CSS: повний довідник одиниць і ключових слів","/html-css/10a.css-sizing","12.html-css/10a.css-sizing",{"title":2833,"path":2834,"stem":2835},"Типографіка в CSS. Шрифти та текст","/html-css/css-typography","12.html-css/11.css-typography",{"title":2837,"path":2838,"stem":2839},"Кольори та фони в CSS","/html-css/css-colors-backgrounds","12.html-css/12.css-colors-backgrounds",{"title":2841,"path":2842,"stem":2843},"Тіні та фільтри в CSS","/html-css/12b.css-shadows-filters","12.html-css/12b.css-shadows-filters",{"title":2845,"path":2846,"stem":2847},"CSS Flexbox: Фундамент гнучких макетів","/html-css/css-flexbox-fundamentals","12.html-css/13.css-flexbox-fundamentals",{"title":2849,"path":2850,"stem":2851},"CSS Flexbox: Вирівнювання та Позиціонування","/html-css/css-flexbox-alignment-sizing-and-patterns","12.html-css/14.css-flexbox-alignment-sizing-and-patterns",{"title":2853,"path":2854,"stem":2855},"CSS Grid. Двовимірний макет. Частина 1","/html-css/css-layout-grid","12.html-css/15.css-layout-grid",{"title":2857,"path":2858,"stem":2859},"CSS Grid. Двовимірний макет. Частина 2","/html-css/css-layout-grid-advanced","12.html-css/16.css-layout-grid-advanced",{"title":2861,"path":2862,"stem":2863},"Позиціонування в CSS. Z-index. Stacking Context","/html-css/css-positioning","12.html-css/17.css-positioning",{"title":2865,"path":2866,"stem":2867},"CSS Анімації та Переходи","/html-css/css-animations-transitions","12.html-css/18.css-animations-transitions",{"title":2869,"path":2870,"stem":2871},"Адаптивний дизайн. Media Queries. Частина 1","/html-css/css-responsive-media-queries","12.html-css/19.css-responsive-media-queries",{"title":2873,"path":2874,"stem":2875},"Адаптивний дизайн. Частина 2: clamp(), Container Queries, @layer","/html-css/css-responsive-advanced","12.html-css/20.css-responsive-advanced",{"title":2877,"path":2878,"stem":2879},"CSS Custom Properties. Методології. Сучасний CSS","/html-css/css-variables-methodologies","12.html-css/21.css-variables-methodologies",{"title":2881,"path":2882,"stem":2883},"Сучасний CSS 2023–2025: Нові можливості","/html-css/css-modern-features","12.html-css/22.css-modern-features",{"title":2885,"path":2886,"stem":2887},"CSS Nesting, @layer, @scope та @property: нативний препроцесор","/html-css/22a.css-nesting-modern-syntax","12.html-css/22a.css-nesting-modern-syntax",{"title":2889,"path":2890,"stem":2891},"CSS для форм та інтерактивних станів","/html-css/css-forms-interactive-states","12.html-css/23.css-forms-interactive-states",{"title":2893,"path":2894,"stem":2895},"Доступність у CSS (CSS Accessibility)","/html-css/css-accessibility","12.html-css/24.css-accessibility",{"title":2897,"path":2898,"stem":2899},"CSS-функції та сучасні sizing primitives","/html-css/css-functions-sizing","12.html-css/25.css-functions-sizing",{"title":2901,"path":2902,"stem":2903},"Rendering Pipeline і CSS Performance","/html-css/css-rendering-performance","12.html-css/26.css-rendering-performance",{"title":2905,"path":2906,"stem":2907},"CSS Best Practices: типові ситуації та правильні рішення","/html-css/css-best-practices","12.html-css/27.css-best-practices",{"title":2909,"path":2910,"stem":2911,"children":2912,"page":59},"Tailwind","/tailwind","21.tailwind",[2913,2917,2921,2925,2929,2933,2937,2941],{"title":2914,"path":2915,"stem":2916},"Що таке Tailwind CSS і навіщо він потрібен","/tailwind/tailwind-intro-philosophy","21.tailwind/01.tailwind-intro-philosophy",{"title":2918,"path":2919,"stem":2920},"Встановлення та налаштування Tailwind CSS v4","/tailwind/tailwind-installation-setup","21.tailwind/02.tailwind-installation-setup",{"title":2922,"path":2923,"stem":2924},"Utility-класи: основи та система Tailwind","/tailwind/tailwind-utility-classes-core","21.tailwind/03.tailwind-utility-classes-core",{"title":2926,"path":2927,"stem":2928},"Layout: Flexbox та Grid через Tailwind","/tailwind/tailwind-flexbox-grid","21.tailwind/04.tailwind-flexbox-grid",{"title":2930,"path":2931,"stem":2932},"Кастомізація теми через @theme у Tailwind v4","/tailwind/tailwind-theme-customization","21.tailwind/05.tailwind-theme-customization",{"title":2934,"path":2935,"stem":2936},"Варіанти: hover, focus, responsive, dark mode та нові v4","/tailwind/tailwind-variants-states","21.tailwind/06.tailwind-variants-states",{"title":2938,"path":2939,"stem":2940},"Типографіка та система кольорів у Tailwind v4","/tailwind/tailwind-typography-colors","21.tailwind/07.tailwind-typography-colors",{"title":2942,"path":2943,"stem":2944},"Компоненти та повторюваність: @apply, @utility та патерни","/tailwind/tailwind-components-patterns","21.tailwind/08.tailwind-components-patterns",{"title":2946,"path":2947,"stem":2948},"Showcase Компонентів kostyl.dev","/test-new-components","98.test-new-components",{"id":2950,"title":1437,"body":2951,"description":9744,"extension":9745,"links":9746,"meta":9747,"navigation":3469,"path":1438,"seo":9748,"stem":1439,"__hash__":9749},"docs/01.csharp/12.desktop-ui/13a.ui-ux-principles.md",{"type":2952,"value":2953,"toc":9706},"minimark",[2954,3013,3018,3023,3027,3036,3044,3119,3126,3130,3133,3139,3159,3165,3201,3204,3207,3211,3214,3218,3231,3237,3247,3269,3274,3295,3700,3724,3728,3737,3741,3747,3759,3763,3793,4119,4131,4135,4144,4151,4155,4185,4916,4920,4933,4950,4954,5024,5038,5040,5044,5051,5055,5062,5067,5174,5528,5575,5579,5586,5591,5611,6114,6118,6133,6138,6158,6618,6632,6634,6638,6644,6648,6651,6655,6662,6668,7186,7190,7193,7199,7203,7206,7211,7215,7218,7223,7644,7646,7650,7654,7659,7662,7684,7694,8002,8009,8013,8025,8030,8056,8062,8082,8773,8775,8779,8786,8790,8795,8798,8872,8876,8883,8897,8902,9022,9040,9044,9051,9056,9105,9115,9467,9478,9480,9484,9643,9645,9649,9653,9656,9662,9668,9674,9680,9686,9691,9695,9702],[2955,2956,2957,2961,2962,2966,2967,2966,2970,2966,2973,2966,2976,2966,2979,2966,2982,2966,2985,2966,2988,2966,2991,2966,2994,2966,2997,2966,3000,2966,3003,2966,3006,2966,3009,3012],"note",{},[2958,2959,2960],"strong",{},"Нові терміни у цій статті:"," ",[2963,2964,2965],"code",{},"User Interface (UI)",", ",[2963,2968,2969],{},"User Experience (UX)",[2963,2971,2972],{},"Affordance",[2963,2974,2975],{},"Feedback",[2963,2977,2978],{},"Consistency",[2963,2980,2981],{},"Visual Hierarchy",[2963,2983,2984],{},"Gestalt Principles",[2963,2986,2987],{},"Fitts's Law",[2963,2989,2990],{},"Hick's Law",[2963,2992,2993],{},"Miller's Law",[2963,2995,2996],{},"Jakob's Law",[2963,2998,2999],{},"Accessibility (A11y)",[2963,3001,3002],{},"WCAG",[2963,3004,3005],{},"Contrast Ratio",[2963,3007,3008],{},"Focus Management",[2963,3010,3011],{},"Keyboard Navigation",".",[3014,3015,3017],"h2",{"id":3016},"ui-vs-ux-фундаментальна-різниця","UI vs UX: фундаментальна різниця",[3019,3020,3022],"h3",{"id":3021},"чому-це-важливо-розуміти","Чому це важливо розуміти",[3024,3025,3026],"p",{},"Терміни \"UI\" та \"UX\" часто використовуються як синоніми, особливо у контексті вакансій (\"UI/UX Designer\") або обговорень дизайну. Проте це два принципово різні аспекти створення програмного забезпечення, і розуміння цієї різниці є критичним для побудови якісних застосунків.",[3024,3028,3029,3031,3032,3035],{},[2958,3030,2965],{}," — це те, ",[2958,3033,3034],{},"що користувач бачить і з чим взаємодіє",". Це візуальний шар застосунку: кнопки, поля введення, кольори, шрифти, іконки, анімації, розташування елементів на екрані. UI — це \"зовнішність\" програми. Якщо застосунок — це будинок, то UI — це фасад, двері, вікна, меблі всередині.",[3024,3037,3038,3031,3040,3043],{},[2958,3039,2969],{},[2958,3041,3042],{},"як користувач відчуває себе під час взаємодії"," з застосунком. Це емоційна та когнітивна реакція на використання програми: чи легко знайти потрібну функцію? Чи зрозуміло, що робить ця кнопка? Чи швидко завантажуються дані? Чи відчуває користувач контроль над процесом? UX — це \"відчуття від проживання у будинку\": чи зручно відкривати двері, чи добре освітлені кімнати, чи легко знайти вимикач світла у темряві.",[3045,3046,3047,3085],"card-group",{},[3048,3049,3051,3057,3079],"card",{"icon":3050,"title":2965},"i-heroicons-paint-brush",[3024,3052,3053,3056],{},[2958,3054,3055],{},"Візуальний дизайн"," — що користувач бачить:",[3058,3059,3060,3064,3067,3070,3073,3076],"ul",{},[3061,3062,3063],"li",{},"Кольорова палітра та контрастність",[3061,3065,3066],{},"Типографіка (шрифти, розміри, вага)",[3061,3068,3069],{},"Іконографія та ілюстрації",[3061,3071,3072],{},"Розташування елементів (Layout)",[3061,3074,3075],{},"Анімації та переходи",[3061,3077,3078],{},"Стилізація контролів (кнопки, поля, списки)",[3024,3080,3081,3084],{},[2958,3082,3083],{},"Інструменти",": Figma, Adobe XD, Sketch, XAML, CSS",[3048,3086,3088,3094,3114],{"icon":3087,"title":2969},"i-heroicons-user-group",[3024,3089,3090,3093],{},[2958,3091,3092],{},"Досвід взаємодії"," — що користувач відчуває:",[3058,3095,3096,3099,3102,3105,3108,3111],{},[3061,3097,3098],{},"Зрозумілість інтерфейсу (Learnability)",[3061,3100,3101],{},"Ефективність виконання завдань",[3061,3103,3104],{},"Запобігання помилкам та їх обробка",[3061,3106,3107],{},"Задоволення від використання",[3061,3109,3110],{},"Доступність для всіх користувачів",[3061,3112,3113],{},"Послідовність поведінки (Consistency)",[3024,3115,3116,3118],{},[2958,3117,3083],{},": User Research, Wireframes, Prototyping, Usability Testing",[3024,3120,3121,3122,3125],{},"Ключова відмінність: ",[2958,3123,3124],{},"хороший UI не гарантує хороший UX",". Застосунок може виглядати приголомшливо (бездоганна графіка, сучасні анімації, стильні кольори), але бути абсолютно незручним у використанні (незрозуміла навігація, повільні операції, відсутність зворотного зв'язку). І навпаки — застосунок з мінімалістичним, навіть \"сірим\" інтерфейсом може надавати чудовий UX завдяки продуманій логіці, швидкості роботи та передбачуваності.",[3019,3127,3129],{"id":3128},"приклад-форма-входу","Приклад: форма входу",[3024,3131,3132],{},"Розглянемо просту форму входу (логін + пароль + кнопка \"Увійти\") з точки зору UI та UX:",[3024,3134,3135,3138],{},[2958,3136,3137],{},"UI-аспекти"," (візуальний дизайн):",[3058,3140,3141,3144,3147,3150,3153,3156],{},[3061,3142,3143],{},"Чи використовується сучасний шрифт без зарубок (sans-serif) для читабельності?",[3061,3145,3146],{},"Чи достатній контраст між текстом та фоном (мінімум 4.5:1 за WCAG)?",[3061,3148,3149],{},"Чи мають поля введення чіткі межі (border) або підкреслення?",[3061,3151,3152],{},"Чи є placeholder-текст (\"Введіть email...\") сірого кольору?",[3061,3154,3155],{},"Чи змінює кнопка колір при наведенні миші (hover state)?",[3061,3157,3158],{},"Чи використовується іконка \"замок\" для поля пароля?",[3024,3160,3161,3164],{},[2958,3162,3163],{},"UX-аспекти"," (досвід взаємодії):",[3058,3166,3167,3170,3178,3185,3192,3195,3198],{},[3061,3168,3169],{},"Чи автоматично фокусується перше поле при відкритті форми?",[3061,3171,3172,3173,3177],{},"Чи можна натиснути ",[3174,3175],"kbd",{"value":3176},"Enter"," для відправки форми замість кліку на кнопку?",[3061,3179,3180,3181,3184],{},"Чи показується повідомлення про помилку ",[2958,3182,3183],{},"під полем",", де сталася помилка, а не у модальному вікні?",[3061,3186,3187,3188,3191],{},"Чи можна переключатись між полями через ",[3174,3189],{"value":3190},"Tab","?",[3061,3193,3194],{},"Чи є кнопка \"Показати пароль\" (eye icon) для перевірки введеного?",[3061,3196,3197],{},"Чи блокується кнопка \"Увійти\" під час запиту до сервера (з індикатором завантаження)?",[3061,3199,3200],{},"Чи зберігається введений логін після помилки, щоб не вводити заново?",[3024,3202,3203],{},"Бачите різницю? UI — це \"як виглядає\", UX — це \"як працює і як відчувається\". Обидва аспекти критично важливі, і у цій статті ми розглянемо принципи, що стосуються обох.",[3205,3206],"hr",{},[3014,3208,3210],{"id":3209},"фундаментальні-закони-взаємодії","Фундаментальні закони взаємодії",[3024,3212,3213],{},"Перш ніж перейти до конкретних технік дизайну, необхідно зрозуміти психологічні та когнітивні закони, що керують взаємодією людини з інтерфейсом. Ці закони — не абстрактна теорія, а емпірично підтверджені принципи, що використовуються у дизайні кожного успішного застосунку.",[3019,3215,3217],{"id":3216},"закон-фіттса-fittss-law","Закон Фіттса (Fitts's Law)",[3024,3219,3220,3223,3224,3227,3228,3012],{},[2958,3221,3222],{},"Формулювання",": Час, необхідний для досягнення цілі (наприклад, натискання кнопки мишею), залежить від ",[2958,3225,3226],{},"відстані до цілі"," та ",[2958,3229,3230],{},"розміру цілі",[3024,3232,3233,3236],{},[2958,3234,3235],{},"Математична модель",":",[3238,3239,3244],"pre",{"className":3240,"code":3242,"language":3243},[3241],"language-text","T = a + b × log₂(D/W + 1)\n","text",[2963,3245,3242],{"__ignoreMap":3246},"",[3024,3248,3249,3250,3253,3254,3257,3258,3261,3262,3227,3265,3268],{},"де ",[2963,3251,3252],{},"T"," — час руху, ",[2963,3255,3256],{},"D"," — відстань до цілі, ",[2963,3259,3260],{},"W"," — ширина цілі, ",[2963,3263,3264],{},"a",[2963,3266,3267],{},"b"," — емпіричні константи.",[3024,3270,3271,3236],{},[2958,3272,3273],{},"Практичні наслідки для UI",[3275,3276,3277,3283,3289],"ol",{},[3061,3278,3279,3282],{},[2958,3280,3281],{},"Великі кнопки натискаються швидше за маленькі",". Первинна дія (Primary Action) має бути найбільшою кнопкою на екрані. Наприклад, у діалозі підтвердження видалення — кнопка \"Скасувати\" має бути більшою за \"Видалити\" (або принаймні однакового розміру), щоб запобігти випадковому видаленню.",[3061,3284,3285,3288],{},[2958,3286,3287],{},"Елементи, що часто використовуються, мають бути близько один до одного",". Якщо користувач постійно переключається між двома контролами (наприклад, список файлів та панель попереднього перегляду), вони мають бути поруч, а не на протилежних кінцях екрана.",[3061,3290,3291,3294],{},[2958,3292,3293],{},"Кути та краї екрану — \"нескінченно великі цілі\"",". Курсор не може вийти за межу екрану, тому елементи у кутах (наприклад, кнопка \"Закрити\" у правому верхньому куті Windows-вікна) досягаються миттєво — достатньо \"кинути\" курсор у кут. Це одна з причин, чому macOS розміщує меню у верхній частині екрану, а не у вікні застосунку.",[3296,3297,3299],"wpf-preview",{"title":3298},"Закон Фіттса: розмір кнопок та відстань",[3238,3300,3304],{"className":3301,"code":3302,"language":3303,"meta":3246,"style":3246},"language-xml shiki shiki-themes light-plus dark-plus dark-plus","\u003CStackPanel Margin=\"20\" Spacing=\"20\">\n  \u003CTextBlock Text=\"Первинна дія (Primary) — велика кнопка:\"\n             Foreground=\"Gray\" FontSize=\"13\"/>\n  \u003CButton Content=\"Зберегти зміни\"\n          Padding=\"24,12\"\n          FontSize=\"16\"\n          FontWeight=\"Bold\"\n          Background=\"#3B82F6\"\n          Foreground=\"White\"\n          HorizontalAlignment=\"Left\"/>\n\n  \u003CTextBlock Text=\"Вторинна дія (Secondary) — менша кнопка:\"\n             Foreground=\"Gray\" FontSize=\"13\" Margin=\"0,12,0,0\"/>\n  \u003CButton Content=\"Скасувати\"\n          Padding=\"16,8\"\n          FontSize=\"14\"\n          Background=\"Transparent\"\n          BorderBrush=\"#6B7280\"\n          BorderThickness=\"1\"\n          HorizontalAlignment=\"Left\"/>\n\n  \u003CTextBlock Text=\"Деструктивна дія (Destructive) — червона, але не найбільша:\"\n             Foreground=\"Gray\" FontSize=\"13\" Margin=\"0,12,0,0\"/>\n  \u003CButton Content=\"Видалити назавжди\"\n          Padding=\"16,8\"\n          FontSize=\"14\"\n          Background=\"#EF4444\"\n          Foreground=\"White\"\n          HorizontalAlignment=\"Left\"/>\n\u003C/StackPanel>\n","xml",[2963,3305,3306,3341,3358,3380,3396,3407,3418,3429,3440,3451,3464,3471,3485,3509,3523,3533,3543,3553,3564,3575,3586,3591,3605,3628,3642,3651,3660,3670,3679,3690],{"__ignoreMap":3246},[3307,3308,3311,3315,3319,3323,3327,3331,3334,3336,3338],"span",{"class":3309,"line":3310},"line",1,[3307,3312,3314],{"class":3313},"s0P7L","\u003C",[3307,3316,3318],{"class":3317},"sKtos","StackPanel",[3307,3320,3322],{"class":3321},"sa4r_"," Margin",[3307,3324,3326],{"class":3325},"sHH4Y","=",[3307,3328,3330],{"class":3329},"su9tN","\"20\"",[3307,3332,3333],{"class":3321}," Spacing",[3307,3335,3326],{"class":3325},[3307,3337,3330],{"class":3329},[3307,3339,3340],{"class":3313},">\n",[3307,3342,3344,3347,3350,3353,3355],{"class":3309,"line":3343},2,[3307,3345,3346],{"class":3313},"  \u003C",[3307,3348,3349],{"class":3317},"TextBlock",[3307,3351,3352],{"class":3321}," Text",[3307,3354,3326],{"class":3325},[3307,3356,3357],{"class":3329},"\"Первинна дія (Primary) — велика кнопка:\"\n",[3307,3359,3361,3364,3366,3369,3372,3374,3377],{"class":3309,"line":3360},3,[3307,3362,3363],{"class":3321},"             Foreground",[3307,3365,3326],{"class":3325},[3307,3367,3368],{"class":3329},"\"Gray\"",[3307,3370,3371],{"class":3321}," FontSize",[3307,3373,3326],{"class":3325},[3307,3375,3376],{"class":3329},"\"13\"",[3307,3378,3379],{"class":3313},"/>\n",[3307,3381,3383,3385,3388,3391,3393],{"class":3309,"line":3382},4,[3307,3384,3346],{"class":3313},[3307,3386,3387],{"class":3317},"Button",[3307,3389,3390],{"class":3321}," Content",[3307,3392,3326],{"class":3325},[3307,3394,3395],{"class":3329},"\"Зберегти зміни\"\n",[3307,3397,3399,3402,3404],{"class":3309,"line":3398},5,[3307,3400,3401],{"class":3321},"          Padding",[3307,3403,3326],{"class":3325},[3307,3405,3406],{"class":3329},"\"24,12\"\n",[3307,3408,3410,3413,3415],{"class":3309,"line":3409},6,[3307,3411,3412],{"class":3321},"          FontSize",[3307,3414,3326],{"class":3325},[3307,3416,3417],{"class":3329},"\"16\"\n",[3307,3419,3421,3424,3426],{"class":3309,"line":3420},7,[3307,3422,3423],{"class":3321},"          FontWeight",[3307,3425,3326],{"class":3325},[3307,3427,3428],{"class":3329},"\"Bold\"\n",[3307,3430,3432,3435,3437],{"class":3309,"line":3431},8,[3307,3433,3434],{"class":3321},"          Background",[3307,3436,3326],{"class":3325},[3307,3438,3439],{"class":3329},"\"#3B82F6\"\n",[3307,3441,3443,3446,3448],{"class":3309,"line":3442},9,[3307,3444,3445],{"class":3321},"          Foreground",[3307,3447,3326],{"class":3325},[3307,3449,3450],{"class":3329},"\"White\"\n",[3307,3452,3454,3457,3459,3462],{"class":3309,"line":3453},10,[3307,3455,3456],{"class":3321},"          HorizontalAlignment",[3307,3458,3326],{"class":3325},[3307,3460,3461],{"class":3329},"\"Left\"",[3307,3463,3379],{"class":3313},[3307,3465,3467],{"class":3309,"line":3466},11,[3307,3468,3470],{"emptyLinePlaceholder":3469},true,"\n",[3307,3472,3474,3476,3478,3480,3482],{"class":3309,"line":3473},12,[3307,3475,3346],{"class":3313},[3307,3477,3349],{"class":3317},[3307,3479,3352],{"class":3321},[3307,3481,3326],{"class":3325},[3307,3483,3484],{"class":3329},"\"Вторинна дія (Secondary) — менша кнопка:\"\n",[3307,3486,3488,3490,3492,3494,3496,3498,3500,3502,3504,3507],{"class":3309,"line":3487},13,[3307,3489,3363],{"class":3321},[3307,3491,3326],{"class":3325},[3307,3493,3368],{"class":3329},[3307,3495,3371],{"class":3321},[3307,3497,3326],{"class":3325},[3307,3499,3376],{"class":3329},[3307,3501,3322],{"class":3321},[3307,3503,3326],{"class":3325},[3307,3505,3506],{"class":3329},"\"0,12,0,0\"",[3307,3508,3379],{"class":3313},[3307,3510,3512,3514,3516,3518,3520],{"class":3309,"line":3511},14,[3307,3513,3346],{"class":3313},[3307,3515,3387],{"class":3317},[3307,3517,3390],{"class":3321},[3307,3519,3326],{"class":3325},[3307,3521,3522],{"class":3329},"\"Скасувати\"\n",[3307,3524,3526,3528,3530],{"class":3309,"line":3525},15,[3307,3527,3401],{"class":3321},[3307,3529,3326],{"class":3325},[3307,3531,3532],{"class":3329},"\"16,8\"\n",[3307,3534,3536,3538,3540],{"class":3309,"line":3535},16,[3307,3537,3412],{"class":3321},[3307,3539,3326],{"class":3325},[3307,3541,3542],{"class":3329},"\"14\"\n",[3307,3544,3546,3548,3550],{"class":3309,"line":3545},17,[3307,3547,3434],{"class":3321},[3307,3549,3326],{"class":3325},[3307,3551,3552],{"class":3329},"\"Transparent\"\n",[3307,3554,3556,3559,3561],{"class":3309,"line":3555},18,[3307,3557,3558],{"class":3321},"          BorderBrush",[3307,3560,3326],{"class":3325},[3307,3562,3563],{"class":3329},"\"#6B7280\"\n",[3307,3565,3567,3570,3572],{"class":3309,"line":3566},19,[3307,3568,3569],{"class":3321},"          BorderThickness",[3307,3571,3326],{"class":3325},[3307,3573,3574],{"class":3329},"\"1\"\n",[3307,3576,3578,3580,3582,3584],{"class":3309,"line":3577},20,[3307,3579,3456],{"class":3321},[3307,3581,3326],{"class":3325},[3307,3583,3461],{"class":3329},[3307,3585,3379],{"class":3313},[3307,3587,3589],{"class":3309,"line":3588},21,[3307,3590,3470],{"emptyLinePlaceholder":3469},[3307,3592,3594,3596,3598,3600,3602],{"class":3309,"line":3593},22,[3307,3595,3346],{"class":3313},[3307,3597,3349],{"class":3317},[3307,3599,3352],{"class":3321},[3307,3601,3326],{"class":3325},[3307,3603,3604],{"class":3329},"\"Деструктивна дія (Destructive) — червона, але не найбільша:\"\n",[3307,3606,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626],{"class":3309,"line":3607},23,[3307,3609,3363],{"class":3321},[3307,3611,3326],{"class":3325},[3307,3613,3368],{"class":3329},[3307,3615,3371],{"class":3321},[3307,3617,3326],{"class":3325},[3307,3619,3376],{"class":3329},[3307,3621,3322],{"class":3321},[3307,3623,3326],{"class":3325},[3307,3625,3506],{"class":3329},[3307,3627,3379],{"class":3313},[3307,3629,3631,3633,3635,3637,3639],{"class":3309,"line":3630},24,[3307,3632,3346],{"class":3313},[3307,3634,3387],{"class":3317},[3307,3636,3390],{"class":3321},[3307,3638,3326],{"class":3325},[3307,3640,3641],{"class":3329},"\"Видалити назавжди\"\n",[3307,3643,3645,3647,3649],{"class":3309,"line":3644},25,[3307,3646,3401],{"class":3321},[3307,3648,3326],{"class":3325},[3307,3650,3532],{"class":3329},[3307,3652,3654,3656,3658],{"class":3309,"line":3653},26,[3307,3655,3412],{"class":3321},[3307,3657,3326],{"class":3325},[3307,3659,3542],{"class":3329},[3307,3661,3663,3665,3667],{"class":3309,"line":3662},27,[3307,3664,3434],{"class":3321},[3307,3666,3326],{"class":3325},[3307,3668,3669],{"class":3329},"\"#EF4444\"\n",[3307,3671,3673,3675,3677],{"class":3309,"line":3672},28,[3307,3674,3445],{"class":3321},[3307,3676,3326],{"class":3325},[3307,3678,3450],{"class":3329},[3307,3680,3682,3684,3686,3688],{"class":3309,"line":3681},29,[3307,3683,3456],{"class":3321},[3307,3685,3326],{"class":3325},[3307,3687,3461],{"class":3329},[3307,3689,3379],{"class":3313},[3307,3691,3693,3696,3698],{"class":3309,"line":3692},30,[3307,3694,3695],{"class":3313},"\u003C/",[3307,3697,3318],{"class":3317},[3307,3699,3340],{"class":3313},[3701,3702,3703,3704,3707,3708,3711,3712,3715,3716,3719,3720,3723],"tip",{},"У WPF розмір кнопки контролюється через ",[2963,3705,3706],{},"Padding"," (внутрішні відступи) та ",[2963,3709,3710],{},"MinWidth","/",[2963,3713,3714],{},"MinHeight",". Для первинної дії використовуйте ",[2963,3717,3718],{},"Padding=\"24,12\""," або більше, для вторинної — ",[2963,3721,3722],{},"Padding=\"16,8\"",". Це створює чітку візуальну ієрархію та полегшує натискання.",[3019,3725,3727],{"id":3726},"закон-хіка-hicks-law","Закон Хіка (Hick's Law)",[3024,3729,3730,3732,3733,3736],{},[2958,3731,3222],{},": Час, необхідний для прийняття рішення, ",[2958,3734,3735],{},"зростає логарифмічно"," зі збільшенням кількості варіантів вибору.",[3024,3738,3739,3236],{},[2958,3740,3235],{},[3238,3742,3745],{"className":3743,"code":3744,"language":3243},[3241],"T = b × log₂(n + 1)\n",[2963,3746,3744],{"__ignoreMap":3246},[3024,3748,3249,3749,3751,3752,3755,3756,3758],{},[2963,3750,3252],{}," — час рішення, ",[2963,3753,3754],{},"n"," — кількість варіантів, ",[2963,3757,3267],{}," — емпірична константа.",[3024,3760,3761,3236],{},[2958,3762,3273],{},[3275,3764,3765,3777,3787],{},[3061,3766,3767,3770,3771,3227,3774,3012],{},[2958,3768,3769],{},"Обмежуйте кількість опцій у меню та діалогах",". Якщо у вас 20 пунктів меню на одному рівні — користувач витратить значно більше часу на пошук потрібного, ніж якби ви згрупували їх у 4-5 категорій по 4-5 пунктів. Це одна з причин, чому сучасні застосунки використовують ",[2958,3772,3773],{},"ієрархічні меню",[2958,3775,3776],{},"групування",[3061,3778,3779,3782,3783,3786],{},[2958,3780,3781],{},"Прогресивне розкриття (Progressive Disclosure)",". Не показуйте всі можливі налаштування одразу — приховайте просунуті опції за кнопкою \"Додатково\" або ",[2963,3784,3785],{},"Expander",". Наприклад, діалог \"Відкрити файл\" у Windows спочатку показує лише основні поля, а кнопка \"Параметри\" розкриває фільтри та додаткові налаштування.",[3061,3788,3789,3792],{},[2958,3790,3791],{},"Значення за замовчуванням (Smart Defaults)",". Якщо 90% користувачів обирають одну й ту саму опцію — зробіть її обраною за замовчуванням. Це зменшує когнітивне навантаження: користувач може просто натиснути \"Далі\", не аналізуючи всі варіанти.",[3296,3794,3796],{"title":3795},"Закон Хіка: групування опцій через Expander",[3238,3797,3799],{"className":3301,"code":3798,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"16\">\n  \u003CTextBlock Text=\"Основні налаштування (завжди видимі):\"\n             FontWeight=\"Bold\" FontSize=\"14\"/>\n  \n  \u003CStackPanel Spacing=\"8\">\n    \u003CCheckBox Content=\"Автоматично зберігати зміни\" IsChecked=\"True\"/>\n    \u003CCheckBox Content=\"Показувати сповіщення\"/>\n    \u003CCheckBox Content=\"Темна тема\" IsChecked=\"True\"/>\n  \u003C/StackPanel>\n\n  \u003CSeparator Margin=\"0,8\"/>\n\n  \u003CExpander Header=\"Додаткові налаштування\" IsExpanded=\"False\">\n    \u003CStackPanel Spacing=\"8\" Margin=\"0,12,0,0\">\n      \u003CCheckBox Content=\"Увімкнути телеметрію\"/>\n      \u003CCheckBox Content=\"Автоматичне оновлення\"/>\n      \u003CCheckBox Content=\"Показувати підказки для початківців\" IsChecked=\"True\"/>\n      \u003CCheckBox Content=\"Логування діагностики\"/>\n      \u003CCheckBox Content=\"Експериментальні функції\"/>\n    \u003C/StackPanel>\n  \u003C/Expander>\n\u003C/StackPanel>\n",[2963,3800,3801,3822,3835,3854,3859,3874,3899,3914,3935,3944,3948,3964,3968,3992,4012,4028,4043,4064,4079,4094,4103,4111],{"__ignoreMap":3246},[3307,3802,3803,3805,3807,3809,3811,3813,3815,3817,3820],{"class":3309,"line":3310},[3307,3804,3314],{"class":3313},[3307,3806,3318],{"class":3317},[3307,3808,3322],{"class":3321},[3307,3810,3326],{"class":3325},[3307,3812,3330],{"class":3329},[3307,3814,3333],{"class":3321},[3307,3816,3326],{"class":3325},[3307,3818,3819],{"class":3329},"\"16\"",[3307,3821,3340],{"class":3313},[3307,3823,3824,3826,3828,3830,3832],{"class":3309,"line":3343},[3307,3825,3346],{"class":3313},[3307,3827,3349],{"class":3317},[3307,3829,3352],{"class":3321},[3307,3831,3326],{"class":3325},[3307,3833,3834],{"class":3329},"\"Основні налаштування (завжди видимі):\"\n",[3307,3836,3837,3840,3842,3845,3847,3849,3852],{"class":3309,"line":3360},[3307,3838,3839],{"class":3321},"             FontWeight",[3307,3841,3326],{"class":3325},[3307,3843,3844],{"class":3329},"\"Bold\"",[3307,3846,3371],{"class":3321},[3307,3848,3326],{"class":3325},[3307,3850,3851],{"class":3329},"\"14\"",[3307,3853,3379],{"class":3313},[3307,3855,3856],{"class":3309,"line":3382},[3307,3857,3858],{"class":3325},"  \n",[3307,3860,3861,3863,3865,3867,3869,3872],{"class":3309,"line":3398},[3307,3862,3346],{"class":3313},[3307,3864,3318],{"class":3317},[3307,3866,3333],{"class":3321},[3307,3868,3326],{"class":3325},[3307,3870,3871],{"class":3329},"\"8\"",[3307,3873,3340],{"class":3313},[3307,3875,3876,3879,3882,3884,3886,3889,3892,3894,3897],{"class":3309,"line":3409},[3307,3877,3878],{"class":3313},"    \u003C",[3307,3880,3881],{"class":3317},"CheckBox",[3307,3883,3390],{"class":3321},[3307,3885,3326],{"class":3325},[3307,3887,3888],{"class":3329},"\"Автоматично зберігати зміни\"",[3307,3890,3891],{"class":3321}," IsChecked",[3307,3893,3326],{"class":3325},[3307,3895,3896],{"class":3329},"\"True\"",[3307,3898,3379],{"class":3313},[3307,3900,3901,3903,3905,3907,3909,3912],{"class":3309,"line":3420},[3307,3902,3878],{"class":3313},[3307,3904,3881],{"class":3317},[3307,3906,3390],{"class":3321},[3307,3908,3326],{"class":3325},[3307,3910,3911],{"class":3329},"\"Показувати сповіщення\"",[3307,3913,3379],{"class":3313},[3307,3915,3916,3918,3920,3922,3924,3927,3929,3931,3933],{"class":3309,"line":3431},[3307,3917,3878],{"class":3313},[3307,3919,3881],{"class":3317},[3307,3921,3390],{"class":3321},[3307,3923,3326],{"class":3325},[3307,3925,3926],{"class":3329},"\"Темна тема\"",[3307,3928,3891],{"class":3321},[3307,3930,3326],{"class":3325},[3307,3932,3896],{"class":3329},[3307,3934,3379],{"class":3313},[3307,3936,3937,3940,3942],{"class":3309,"line":3442},[3307,3938,3939],{"class":3313},"  \u003C/",[3307,3941,3318],{"class":3317},[3307,3943,3340],{"class":3313},[3307,3945,3946],{"class":3309,"line":3453},[3307,3947,3470],{"emptyLinePlaceholder":3469},[3307,3949,3950,3952,3955,3957,3959,3962],{"class":3309,"line":3466},[3307,3951,3346],{"class":3313},[3307,3953,3954],{"class":3317},"Separator",[3307,3956,3322],{"class":3321},[3307,3958,3326],{"class":3325},[3307,3960,3961],{"class":3329},"\"0,8\"",[3307,3963,3379],{"class":3313},[3307,3965,3966],{"class":3309,"line":3473},[3307,3967,3470],{"emptyLinePlaceholder":3469},[3307,3969,3970,3972,3974,3977,3979,3982,3985,3987,3990],{"class":3309,"line":3487},[3307,3971,3346],{"class":3313},[3307,3973,3785],{"class":3317},[3307,3975,3976],{"class":3321}," Header",[3307,3978,3326],{"class":3325},[3307,3980,3981],{"class":3329},"\"Додаткові налаштування\"",[3307,3983,3984],{"class":3321}," IsExpanded",[3307,3986,3326],{"class":3325},[3307,3988,3989],{"class":3329},"\"False\"",[3307,3991,3340],{"class":3313},[3307,3993,3994,3996,3998,4000,4002,4004,4006,4008,4010],{"class":3309,"line":3511},[3307,3995,3878],{"class":3313},[3307,3997,3318],{"class":3317},[3307,3999,3333],{"class":3321},[3307,4001,3326],{"class":3325},[3307,4003,3871],{"class":3329},[3307,4005,3322],{"class":3321},[3307,4007,3326],{"class":3325},[3307,4009,3506],{"class":3329},[3307,4011,3340],{"class":3313},[3307,4013,4014,4017,4019,4021,4023,4026],{"class":3309,"line":3525},[3307,4015,4016],{"class":3313},"      \u003C",[3307,4018,3881],{"class":3317},[3307,4020,3390],{"class":3321},[3307,4022,3326],{"class":3325},[3307,4024,4025],{"class":3329},"\"Увімкнути телеметрію\"",[3307,4027,3379],{"class":3313},[3307,4029,4030,4032,4034,4036,4038,4041],{"class":3309,"line":3535},[3307,4031,4016],{"class":3313},[3307,4033,3881],{"class":3317},[3307,4035,3390],{"class":3321},[3307,4037,3326],{"class":3325},[3307,4039,4040],{"class":3329},"\"Автоматичне оновлення\"",[3307,4042,3379],{"class":3313},[3307,4044,4045,4047,4049,4051,4053,4056,4058,4060,4062],{"class":3309,"line":3545},[3307,4046,4016],{"class":3313},[3307,4048,3881],{"class":3317},[3307,4050,3390],{"class":3321},[3307,4052,3326],{"class":3325},[3307,4054,4055],{"class":3329},"\"Показувати підказки для початківців\"",[3307,4057,3891],{"class":3321},[3307,4059,3326],{"class":3325},[3307,4061,3896],{"class":3329},[3307,4063,3379],{"class":3313},[3307,4065,4066,4068,4070,4072,4074,4077],{"class":3309,"line":3555},[3307,4067,4016],{"class":3313},[3307,4069,3881],{"class":3317},[3307,4071,3390],{"class":3321},[3307,4073,3326],{"class":3325},[3307,4075,4076],{"class":3329},"\"Логування діагностики\"",[3307,4078,3379],{"class":3313},[3307,4080,4081,4083,4085,4087,4089,4092],{"class":3309,"line":3566},[3307,4082,4016],{"class":3313},[3307,4084,3881],{"class":3317},[3307,4086,3390],{"class":3321},[3307,4088,3326],{"class":3325},[3307,4090,4091],{"class":3329},"\"Експериментальні функції\"",[3307,4093,3379],{"class":3313},[3307,4095,4096,4099,4101],{"class":3309,"line":3577},[3307,4097,4098],{"class":3313},"    \u003C/",[3307,4100,3318],{"class":3317},[3307,4102,3340],{"class":3313},[3307,4104,4105,4107,4109],{"class":3309,"line":3588},[3307,4106,3939],{"class":3313},[3307,4108,3785],{"class":3317},[3307,4110,3340],{"class":3313},[3307,4112,4113,4115,4117],{"class":3309,"line":3593},[3307,4114,3695],{"class":3313},[3307,4116,3318],{"class":3317},[3307,4118,3340],{"class":3313},[2955,4120,4121,4124,4125,2966,4127,4130],{},[2958,4122,4123],{},"Прогресивне розкриття"," (Progressive Disclosure) — це UX-патерн, що полягає у приховуванні складності до моменту, коли вона дійсно потрібна. Замість того, щоб показувати користувачу 20 опцій одразу (що викликає паралізацію вибору), показуємо 5 найважливіших, а решту — за запитом. У WPF це реалізується через ",[2963,4126,3785],{},[2963,4128,4129],{},"TabControl"," (розділення на вкладки) або окремі діалоги налаштувань.",[3019,4132,4134],{"id":4133},"закон-міллера-millers-law","Закон Міллера (Miller's Law)",[3024,4136,4137,4139,4140,4143],{},[2958,4138,3222],{},": Середня людина може утримувати у короткочасній пам'яті ",[2958,4141,4142],{},"7 ± 2 елементи"," одночасно.",[3024,4145,4146,4147,4150],{},"Це не означає, що у меню має бути рівно 7 пунктів — це означає, що людина може ",[2958,4148,4149],{},"активно обробляти"," обмежену кількість інформації у конкретний момент часу. Якщо ви показуєте список з 50 елементів без групування — користувач не зможе \"охопити\" його цілком і буде змушений сканувати послідовно.",[3024,4152,4153,3236],{},[2958,4154,3273],{},[3275,4156,4157,4165,4179],{},[3061,4158,4159,4162,4163,3012],{},[2958,4160,4161],{},"Групуйте елементи у смислові блоки",". Замість списку з 15 налаштувань — 3 групи по 5. Замість 20 кнопок на панелі інструментів — 4-5 груп, розділених ",[2963,4164,3954],{},[3061,4166,4167,4170,4171,4174,4175,4178],{},[2958,4168,4169],{},"Використовуйте \"chunking\" (розбиття на шматки)",". Телефонний номер ",[2963,4172,4173],{},"+380501234567"," важко запам'ятати, але ",[2963,4176,4177],{},"+380 50 123 45 67"," — легко, бо розбитий на 4 шматки. Те саме у UI: довгі списки розбивайте на категорії, довгі форми — на кроки (wizard).",[3061,4180,4181,4184],{},[2958,4182,4183],{},"Обмежуйте кількість одночасно видимих елементів навігації",". Якщо у вас 30 розділів застосунку — не робіть 30 кнопок у sidebar. Зробіть 5-7 основних категорій, а всередині кожної — підрозділи.",[3296,4186,4188],{"title":4187},"Закон Міллера: групування елементів",[3238,4189,4191],{"className":3301,"code":4190,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"20\">\n  \u003CTextBlock Text=\"Без групування (важко сприймати):\"\n             FontWeight=\"Bold\" FontSize=\"14\"/>\n  \u003CStackPanel Spacing=\"4\">\n    \u003CCheckBox Content=\"Опція 1\"/>\n    \u003CCheckBox Content=\"Опція 2\"/>\n    \u003CCheckBox Content=\"Опція 3\"/>\n    \u003CCheckBox Content=\"Опція 4\"/>\n    \u003CCheckBox Content=\"Опція 5\"/>\n    \u003CCheckBox Content=\"Опція 6\"/>\n    \u003CCheckBox Content=\"Опція 7\"/>\n    \u003CCheckBox Content=\"Опція 8\"/>\n    \u003CCheckBox Content=\"Опція 9\"/>\n    \u003CCheckBox Content=\"Опція 10\"/>\n  \u003C/StackPanel>\n\n  \u003CSeparator/>\n\n  \u003CTextBlock Text=\"З групуванням (легко сприймати):\"\n             FontWeight=\"Bold\" FontSize=\"14\"/>\n  \n  \u003CBorder BorderBrush=\"#374151\" BorderThickness=\"1\" Padding=\"12\" CornerRadius=\"4\">\n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Група A: Основні\" Foreground=\"#9CA3AF\" FontSize=\"12\"/>\n      \u003CCheckBox Content=\"Опція 1\"/>\n      \u003CCheckBox Content=\"Опція 2\"/>\n      \u003CCheckBox Content=\"Опція 3\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\n  \u003CBorder BorderBrush=\"#374151\" BorderThickness=\"1\" Padding=\"12\" CornerRadius=\"4\">\n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Група B: Додаткові\" Foreground=\"#9CA3AF\" FontSize=\"12\"/>\n      \u003CCheckBox Content=\"Опція 4\"/>\n      \u003CCheckBox Content=\"Опція 5\"/>\n      \u003CCheckBox Content=\"Опція 6\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\n  \u003CBorder BorderBrush=\"#374151\" BorderThickness=\"1\" Padding=\"12\" CornerRadius=\"4\">\n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Група C: Експериментальні\" Foreground=\"#9CA3AF\" FontSize=\"12\"/>\n      \u003CCheckBox Content=\"Опція 7\"/>\n      \u003CCheckBox Content=\"Опція 8\"/>\n      \u003CCheckBox Content=\"Опція 9\"/>\n      \u003CCheckBox Content=\"Опція 10\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\u003C/StackPanel>\n",[2963,4192,4193,4213,4226,4242,4257,4272,4287,4302,4317,4332,4347,4362,4377,4392,4407,4415,4419,4427,4431,4444,4460,4464,4504,4518,4547,4561,4575,4589,4597,4605,4609,4642,4657,4685,4700,4715,4730,4739,4748,4753,4786,4801,4829,4844,4859,4874,4889,4898,4907],{"__ignoreMap":3246},[3307,4194,4195,4197,4199,4201,4203,4205,4207,4209,4211],{"class":3309,"line":3310},[3307,4196,3314],{"class":3313},[3307,4198,3318],{"class":3317},[3307,4200,3322],{"class":3321},[3307,4202,3326],{"class":3325},[3307,4204,3330],{"class":3329},[3307,4206,3333],{"class":3321},[3307,4208,3326],{"class":3325},[3307,4210,3330],{"class":3329},[3307,4212,3340],{"class":3313},[3307,4214,4215,4217,4219,4221,4223],{"class":3309,"line":3343},[3307,4216,3346],{"class":3313},[3307,4218,3349],{"class":3317},[3307,4220,3352],{"class":3321},[3307,4222,3326],{"class":3325},[3307,4224,4225],{"class":3329},"\"Без групування (важко сприймати):\"\n",[3307,4227,4228,4230,4232,4234,4236,4238,4240],{"class":3309,"line":3360},[3307,4229,3839],{"class":3321},[3307,4231,3326],{"class":3325},[3307,4233,3844],{"class":3329},[3307,4235,3371],{"class":3321},[3307,4237,3326],{"class":3325},[3307,4239,3851],{"class":3329},[3307,4241,3379],{"class":3313},[3307,4243,4244,4246,4248,4250,4252,4255],{"class":3309,"line":3382},[3307,4245,3346],{"class":3313},[3307,4247,3318],{"class":3317},[3307,4249,3333],{"class":3321},[3307,4251,3326],{"class":3325},[3307,4253,4254],{"class":3329},"\"4\"",[3307,4256,3340],{"class":3313},[3307,4258,4259,4261,4263,4265,4267,4270],{"class":3309,"line":3398},[3307,4260,3878],{"class":3313},[3307,4262,3881],{"class":3317},[3307,4264,3390],{"class":3321},[3307,4266,3326],{"class":3325},[3307,4268,4269],{"class":3329},"\"Опція 1\"",[3307,4271,3379],{"class":3313},[3307,4273,4274,4276,4278,4280,4282,4285],{"class":3309,"line":3409},[3307,4275,3878],{"class":3313},[3307,4277,3881],{"class":3317},[3307,4279,3390],{"class":3321},[3307,4281,3326],{"class":3325},[3307,4283,4284],{"class":3329},"\"Опція 2\"",[3307,4286,3379],{"class":3313},[3307,4288,4289,4291,4293,4295,4297,4300],{"class":3309,"line":3420},[3307,4290,3878],{"class":3313},[3307,4292,3881],{"class":3317},[3307,4294,3390],{"class":3321},[3307,4296,3326],{"class":3325},[3307,4298,4299],{"class":3329},"\"Опція 3\"",[3307,4301,3379],{"class":3313},[3307,4303,4304,4306,4308,4310,4312,4315],{"class":3309,"line":3431},[3307,4305,3878],{"class":3313},[3307,4307,3881],{"class":3317},[3307,4309,3390],{"class":3321},[3307,4311,3326],{"class":3325},[3307,4313,4314],{"class":3329},"\"Опція 4\"",[3307,4316,3379],{"class":3313},[3307,4318,4319,4321,4323,4325,4327,4330],{"class":3309,"line":3442},[3307,4320,3878],{"class":3313},[3307,4322,3881],{"class":3317},[3307,4324,3390],{"class":3321},[3307,4326,3326],{"class":3325},[3307,4328,4329],{"class":3329},"\"Опція 5\"",[3307,4331,3379],{"class":3313},[3307,4333,4334,4336,4338,4340,4342,4345],{"class":3309,"line":3453},[3307,4335,3878],{"class":3313},[3307,4337,3881],{"class":3317},[3307,4339,3390],{"class":3321},[3307,4341,3326],{"class":3325},[3307,4343,4344],{"class":3329},"\"Опція 6\"",[3307,4346,3379],{"class":3313},[3307,4348,4349,4351,4353,4355,4357,4360],{"class":3309,"line":3466},[3307,4350,3878],{"class":3313},[3307,4352,3881],{"class":3317},[3307,4354,3390],{"class":3321},[3307,4356,3326],{"class":3325},[3307,4358,4359],{"class":3329},"\"Опція 7\"",[3307,4361,3379],{"class":3313},[3307,4363,4364,4366,4368,4370,4372,4375],{"class":3309,"line":3473},[3307,4365,3878],{"class":3313},[3307,4367,3881],{"class":3317},[3307,4369,3390],{"class":3321},[3307,4371,3326],{"class":3325},[3307,4373,4374],{"class":3329},"\"Опція 8\"",[3307,4376,3379],{"class":3313},[3307,4378,4379,4381,4383,4385,4387,4390],{"class":3309,"line":3487},[3307,4380,3878],{"class":3313},[3307,4382,3881],{"class":3317},[3307,4384,3390],{"class":3321},[3307,4386,3326],{"class":3325},[3307,4388,4389],{"class":3329},"\"Опція 9\"",[3307,4391,3379],{"class":3313},[3307,4393,4394,4396,4398,4400,4402,4405],{"class":3309,"line":3511},[3307,4395,3878],{"class":3313},[3307,4397,3881],{"class":3317},[3307,4399,3390],{"class":3321},[3307,4401,3326],{"class":3325},[3307,4403,4404],{"class":3329},"\"Опція 10\"",[3307,4406,3379],{"class":3313},[3307,4408,4409,4411,4413],{"class":3309,"line":3525},[3307,4410,3939],{"class":3313},[3307,4412,3318],{"class":3317},[3307,4414,3340],{"class":3313},[3307,4416,4417],{"class":3309,"line":3535},[3307,4418,3470],{"emptyLinePlaceholder":3469},[3307,4420,4421,4423,4425],{"class":3309,"line":3545},[3307,4422,3346],{"class":3313},[3307,4424,3954],{"class":3317},[3307,4426,3379],{"class":3313},[3307,4428,4429],{"class":3309,"line":3555},[3307,4430,3470],{"emptyLinePlaceholder":3469},[3307,4432,4433,4435,4437,4439,4441],{"class":3309,"line":3566},[3307,4434,3346],{"class":3313},[3307,4436,3349],{"class":3317},[3307,4438,3352],{"class":3321},[3307,4440,3326],{"class":3325},[3307,4442,4443],{"class":3329},"\"З групуванням (легко сприймати):\"\n",[3307,4445,4446,4448,4450,4452,4454,4456,4458],{"class":3309,"line":3577},[3307,4447,3839],{"class":3321},[3307,4449,3326],{"class":3325},[3307,4451,3844],{"class":3329},[3307,4453,3371],{"class":3321},[3307,4455,3326],{"class":3325},[3307,4457,3851],{"class":3329},[3307,4459,3379],{"class":3313},[3307,4461,4462],{"class":3309,"line":3588},[3307,4463,3858],{"class":3325},[3307,4465,4466,4468,4471,4474,4476,4479,4482,4484,4487,4490,4492,4495,4498,4500,4502],{"class":3309,"line":3593},[3307,4467,3346],{"class":3313},[3307,4469,4470],{"class":3317},"Border",[3307,4472,4473],{"class":3321}," BorderBrush",[3307,4475,3326],{"class":3325},[3307,4477,4478],{"class":3329},"\"#374151\"",[3307,4480,4481],{"class":3321}," BorderThickness",[3307,4483,3326],{"class":3325},[3307,4485,4486],{"class":3329},"\"1\"",[3307,4488,4489],{"class":3321}," Padding",[3307,4491,3326],{"class":3325},[3307,4493,4494],{"class":3329},"\"12\"",[3307,4496,4497],{"class":3321}," CornerRadius",[3307,4499,3326],{"class":3325},[3307,4501,4254],{"class":3329},[3307,4503,3340],{"class":3313},[3307,4505,4506,4508,4510,4512,4514,4516],{"class":3309,"line":3607},[3307,4507,3878],{"class":3313},[3307,4509,3318],{"class":3317},[3307,4511,3333],{"class":3321},[3307,4513,3326],{"class":3325},[3307,4515,4254],{"class":3329},[3307,4517,3340],{"class":3313},[3307,4519,4520,4522,4524,4526,4528,4531,4534,4536,4539,4541,4543,4545],{"class":3309,"line":3630},[3307,4521,4016],{"class":3313},[3307,4523,3349],{"class":3317},[3307,4525,3352],{"class":3321},[3307,4527,3326],{"class":3325},[3307,4529,4530],{"class":3329},"\"Група A: Основні\"",[3307,4532,4533],{"class":3321}," Foreground",[3307,4535,3326],{"class":3325},[3307,4537,4538],{"class":3329},"\"#9CA3AF\"",[3307,4540,3371],{"class":3321},[3307,4542,3326],{"class":3325},[3307,4544,4494],{"class":3329},[3307,4546,3379],{"class":3313},[3307,4548,4549,4551,4553,4555,4557,4559],{"class":3309,"line":3644},[3307,4550,4016],{"class":3313},[3307,4552,3881],{"class":3317},[3307,4554,3390],{"class":3321},[3307,4556,3326],{"class":3325},[3307,4558,4269],{"class":3329},[3307,4560,3379],{"class":3313},[3307,4562,4563,4565,4567,4569,4571,4573],{"class":3309,"line":3653},[3307,4564,4016],{"class":3313},[3307,4566,3881],{"class":3317},[3307,4568,3390],{"class":3321},[3307,4570,3326],{"class":3325},[3307,4572,4284],{"class":3329},[3307,4574,3379],{"class":3313},[3307,4576,4577,4579,4581,4583,4585,4587],{"class":3309,"line":3662},[3307,4578,4016],{"class":3313},[3307,4580,3881],{"class":3317},[3307,4582,3390],{"class":3321},[3307,4584,3326],{"class":3325},[3307,4586,4299],{"class":3329},[3307,4588,3379],{"class":3313},[3307,4590,4591,4593,4595],{"class":3309,"line":3672},[3307,4592,4098],{"class":3313},[3307,4594,3318],{"class":3317},[3307,4596,3340],{"class":3313},[3307,4598,4599,4601,4603],{"class":3309,"line":3681},[3307,4600,3939],{"class":3313},[3307,4602,4470],{"class":3317},[3307,4604,3340],{"class":3313},[3307,4606,4607],{"class":3309,"line":3692},[3307,4608,3470],{"emptyLinePlaceholder":3469},[3307,4610,4612,4614,4616,4618,4620,4622,4624,4626,4628,4630,4632,4634,4636,4638,4640],{"class":3309,"line":4611},31,[3307,4613,3346],{"class":3313},[3307,4615,4470],{"class":3317},[3307,4617,4473],{"class":3321},[3307,4619,3326],{"class":3325},[3307,4621,4478],{"class":3329},[3307,4623,4481],{"class":3321},[3307,4625,3326],{"class":3325},[3307,4627,4486],{"class":3329},[3307,4629,4489],{"class":3321},[3307,4631,3326],{"class":3325},[3307,4633,4494],{"class":3329},[3307,4635,4497],{"class":3321},[3307,4637,3326],{"class":3325},[3307,4639,4254],{"class":3329},[3307,4641,3340],{"class":3313},[3307,4643,4645,4647,4649,4651,4653,4655],{"class":3309,"line":4644},32,[3307,4646,3878],{"class":3313},[3307,4648,3318],{"class":3317},[3307,4650,3333],{"class":3321},[3307,4652,3326],{"class":3325},[3307,4654,4254],{"class":3329},[3307,4656,3340],{"class":3313},[3307,4658,4660,4662,4664,4666,4668,4671,4673,4675,4677,4679,4681,4683],{"class":3309,"line":4659},33,[3307,4661,4016],{"class":3313},[3307,4663,3349],{"class":3317},[3307,4665,3352],{"class":3321},[3307,4667,3326],{"class":3325},[3307,4669,4670],{"class":3329},"\"Група B: Додаткові\"",[3307,4672,4533],{"class":3321},[3307,4674,3326],{"class":3325},[3307,4676,4538],{"class":3329},[3307,4678,3371],{"class":3321},[3307,4680,3326],{"class":3325},[3307,4682,4494],{"class":3329},[3307,4684,3379],{"class":3313},[3307,4686,4688,4690,4692,4694,4696,4698],{"class":3309,"line":4687},34,[3307,4689,4016],{"class":3313},[3307,4691,3881],{"class":3317},[3307,4693,3390],{"class":3321},[3307,4695,3326],{"class":3325},[3307,4697,4314],{"class":3329},[3307,4699,3379],{"class":3313},[3307,4701,4703,4705,4707,4709,4711,4713],{"class":3309,"line":4702},35,[3307,4704,4016],{"class":3313},[3307,4706,3881],{"class":3317},[3307,4708,3390],{"class":3321},[3307,4710,3326],{"class":3325},[3307,4712,4329],{"class":3329},[3307,4714,3379],{"class":3313},[3307,4716,4718,4720,4722,4724,4726,4728],{"class":3309,"line":4717},36,[3307,4719,4016],{"class":3313},[3307,4721,3881],{"class":3317},[3307,4723,3390],{"class":3321},[3307,4725,3326],{"class":3325},[3307,4727,4344],{"class":3329},[3307,4729,3379],{"class":3313},[3307,4731,4733,4735,4737],{"class":3309,"line":4732},37,[3307,4734,4098],{"class":3313},[3307,4736,3318],{"class":3317},[3307,4738,3340],{"class":3313},[3307,4740,4742,4744,4746],{"class":3309,"line":4741},38,[3307,4743,3939],{"class":3313},[3307,4745,4470],{"class":3317},[3307,4747,3340],{"class":3313},[3307,4749,4751],{"class":3309,"line":4750},39,[3307,4752,3470],{"emptyLinePlaceholder":3469},[3307,4754,4756,4758,4760,4762,4764,4766,4768,4770,4772,4774,4776,4778,4780,4782,4784],{"class":3309,"line":4755},40,[3307,4757,3346],{"class":3313},[3307,4759,4470],{"class":3317},[3307,4761,4473],{"class":3321},[3307,4763,3326],{"class":3325},[3307,4765,4478],{"class":3329},[3307,4767,4481],{"class":3321},[3307,4769,3326],{"class":3325},[3307,4771,4486],{"class":3329},[3307,4773,4489],{"class":3321},[3307,4775,3326],{"class":3325},[3307,4777,4494],{"class":3329},[3307,4779,4497],{"class":3321},[3307,4781,3326],{"class":3325},[3307,4783,4254],{"class":3329},[3307,4785,3340],{"class":3313},[3307,4787,4789,4791,4793,4795,4797,4799],{"class":3309,"line":4788},41,[3307,4790,3878],{"class":3313},[3307,4792,3318],{"class":3317},[3307,4794,3333],{"class":3321},[3307,4796,3326],{"class":3325},[3307,4798,4254],{"class":3329},[3307,4800,3340],{"class":3313},[3307,4802,4804,4806,4808,4810,4812,4815,4817,4819,4821,4823,4825,4827],{"class":3309,"line":4803},42,[3307,4805,4016],{"class":3313},[3307,4807,3349],{"class":3317},[3307,4809,3352],{"class":3321},[3307,4811,3326],{"class":3325},[3307,4813,4814],{"class":3329},"\"Група C: Експериментальні\"",[3307,4816,4533],{"class":3321},[3307,4818,3326],{"class":3325},[3307,4820,4538],{"class":3329},[3307,4822,3371],{"class":3321},[3307,4824,3326],{"class":3325},[3307,4826,4494],{"class":3329},[3307,4828,3379],{"class":3313},[3307,4830,4832,4834,4836,4838,4840,4842],{"class":3309,"line":4831},43,[3307,4833,4016],{"class":3313},[3307,4835,3881],{"class":3317},[3307,4837,3390],{"class":3321},[3307,4839,3326],{"class":3325},[3307,4841,4359],{"class":3329},[3307,4843,3379],{"class":3313},[3307,4845,4847,4849,4851,4853,4855,4857],{"class":3309,"line":4846},44,[3307,4848,4016],{"class":3313},[3307,4850,3881],{"class":3317},[3307,4852,3390],{"class":3321},[3307,4854,3326],{"class":3325},[3307,4856,4374],{"class":3329},[3307,4858,3379],{"class":3313},[3307,4860,4862,4864,4866,4868,4870,4872],{"class":3309,"line":4861},45,[3307,4863,4016],{"class":3313},[3307,4865,3881],{"class":3317},[3307,4867,3390],{"class":3321},[3307,4869,3326],{"class":3325},[3307,4871,4389],{"class":3329},[3307,4873,3379],{"class":3313},[3307,4875,4877,4879,4881,4883,4885,4887],{"class":3309,"line":4876},46,[3307,4878,4016],{"class":3313},[3307,4880,3881],{"class":3317},[3307,4882,3390],{"class":3321},[3307,4884,3326],{"class":3325},[3307,4886,4404],{"class":3329},[3307,4888,3379],{"class":3313},[3307,4890,4892,4894,4896],{"class":3309,"line":4891},47,[3307,4893,4098],{"class":3313},[3307,4895,3318],{"class":3317},[3307,4897,3340],{"class":3313},[3307,4899,4901,4903,4905],{"class":3309,"line":4900},48,[3307,4902,3939],{"class":3313},[3307,4904,4470],{"class":3317},[3307,4906,3340],{"class":3313},[3307,4908,4910,4912,4914],{"class":3309,"line":4909},49,[3307,4911,3695],{"class":3313},[3307,4913,3318],{"class":3317},[3307,4915,3340],{"class":3313},[3019,4917,4919],{"id":4918},"закон-якоба-jakobs-law","Закон Якоба (Jakob's Law)",[3024,4921,4922,4924,4925,4928,4929,4932],{},[2958,4923,3222],{},": Користувачі проводять більшість свого часу в ",[2958,4926,4927],{},"інших застосунках",", а не у вашому. Тому вони очікують, що ваш застосунок працюватиме ",[2958,4930,4931],{},"так само",", як ті, до яких вони звикли.",[3024,4934,4935,4936,4939,4940,4943,4944,4939,4946,4949],{},"Цей закон сформулював Якоб Нільсен (Jakob Nielsen), один із піонерів usability-досліджень. Суть проста: не винаходьте велосипед там, де існують усталені конвенції. Якщо у 99% застосунків ",[3174,4937],{"value":4938},"Ctrl"," + ",[3174,4941],{"value":4942},"S"," зберігає файл — не робіть це комбінацією для \"Пошуку\". Якщо у всіх текстових редакторах ",[3174,4945],{"value":4938},[3174,4947],{"value":4948},"Z"," скасовує останню дію — не змінюйте цю поведінку.",[3024,4951,4952,3236],{},[2958,4953,3273],{},[3275,4955,4956,4978,4988],{},[3061,4957,4958,4961,4962,4965,4966,4969,4970,4973,4974,4977],{},[2958,4959,4960],{},"Дотримуйтесь платформних конвенцій",". У Windows кнопка \"OK\" розташована ",[2958,4963,4964],{},"зліва"," від \"Скасувати\", у macOS — ",[2958,4967,4968],{},"справа",". Кнопка закриття вікна у Windows — ",[2958,4971,4972],{},"справа вгорі"," (червоний хрестик), у macOS — ",[2958,4975,4976],{},"зліва вгорі"," (червоне коло). Не порушуйте ці правила без вагомої причини.",[3061,4979,4980,4983,4984,4987],{},[2958,4981,4982],{},"Використовуйте стандартні іконки для стандартних дій",". Іконка \"дискета\" для збереження, \"лупа\" для пошуку, \"корзина\" для видалення, \"шестерня\" для налаштувань. Навіть якщо дискети вже не існують — користувачі ",[2958,4985,4986],{},"знають",", що ця іконка означає \"зберегти\".",[3061,4989,4990,4993,4994,4939,4996,4999,5000,4999,5003,5006,5007,4939,5009,5012,5013,5016,5017,4939,5020,5023],{},[2958,4991,4992],{},"Стандартні клавіатурні скорочення",". ",[3174,4995],{"value":4938},[3174,4997],{"value":4998},"C"," / ",[3174,5001],{"value":5002},"V",[3174,5004],{"value":5005},"X"," для копіювання/вставки/вирізання, ",[3174,5008],{"value":4938},[3174,5010],{"value":5011},"F"," для пошуку, ",[3174,5014],{"value":5015},"F5"," для оновлення, ",[3174,5018],{"value":5019},"Alt",[3174,5021],{"value":5022},"F4"," для закриття вікна (Windows). Не перевизначайте їх.",[3701,5025,5026,5027,2966,5030,5033,5034,5037],{},"У WPF стандартні команди (",[2963,5028,5029],{},"ApplicationCommands.Save",[2963,5031,5032],{},"ApplicationCommands.Copy",", тощо) автоматично прив'язані до стандартних клавіатурних скорочень. Використовуйте їх замість власних ",[2963,5035,5036],{},"KeyBinding"," для базових операцій — це гарантує сумісність з очікуваннями користувачів.",[3205,5039],{},[3014,5041,5043],{"id":5042},"принципи-візуальної-ієрархії","Принципи візуальної ієрархії",[3024,5045,5046,5047,5050],{},"Візуальна ієрархія — це спосіб організації елементів інтерфейсу таким чином, щоб користувач ",[2958,5048,5049],{},"інстинктивно розумів",", що є найважливішим, що другорядним, а що — допоміжним. Без чіткої ієрархії інтерфейс перетворюється на \"візуальний шум\", де всі елементи конкурують за увагу одночасно.",[3019,5052,5054],{"id":5053},"розмір-та-вага-шрифту","Розмір та вага шрифту",[3024,5056,5057,5058,5061],{},"Найпростіший спосіб створити ієрархію — використовувати ",[2958,5059,5060],{},"різні розміри шрифту"," для різних рівнів важливості. Заголовок має бути більшим за основний текст, підзаголовок — меншим за заголовок, але більшим за основний текст. Це інтуїтивно зрозуміло: більше = важливіше.",[3024,5063,5064,3236],{},[2958,5065,5066],{},"Типова шкала розмірів для десктопних застосунків",[5068,5069,5070,5089],"table",{},[5071,5072,5073],"thead",{},[5074,5075,5076,5080,5083,5086],"tr",{},[5077,5078,5079],"th",{},"Рівень",[5077,5081,5082],{},"Розмір (px)",[5077,5084,5085],{},"FontWeight",[5077,5087,5088],{},"Використання",[5090,5091,5092,5107,5121,5134,5148,5161],"tbody",{},[5074,5093,5094,5098,5101,5104],{},[5095,5096,5097],"td",{},"H1 (Заголовок сторінки)",[5095,5099,5100],{},"28-32",[5095,5102,5103],{},"Bold/SemiBold",[5095,5105,5106],{},"Назва екрану, основний заголовок",[5074,5108,5109,5112,5115,5118],{},[5095,5110,5111],{},"H2 (Розділ)",[5095,5113,5114],{},"20-24",[5095,5116,5117],{},"SemiBold",[5095,5119,5120],{},"Заголовки розділів, групи контролів",[5074,5122,5123,5126,5129,5131],{},[5095,5124,5125],{},"H3 (Підрозділ)",[5095,5127,5128],{},"16-18",[5095,5130,5117],{},[5095,5132,5133],{},"Підзаголовки, назви груп",[5074,5135,5136,5139,5142,5145],{},[5095,5137,5138],{},"Body (Основний текст)",[5095,5140,5141],{},"14-15",[5095,5143,5144],{},"Regular",[5095,5146,5147],{},"Текст підписів, описів, вмісту",[5074,5149,5150,5153,5156,5158],{},[5095,5151,5152],{},"Caption (Допоміжний)",[5095,5154,5155],{},"12-13",[5095,5157,5144],{},[5095,5159,5160],{},"Підказки, мітки часу, метадані",[5074,5162,5163,5166,5169,5171],{},[5095,5164,5165],{},"Small (Дрібний)",[5095,5167,5168],{},"11",[5095,5170,5144],{},[5095,5172,5173],{},"Footnotes, дуже другорядна інформація",[3296,5175,5177],{"title":5176},"Візуальна ієрархія: розміри шрифту",[3238,5178,5180],{"className":3301,"code":5179,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"16\">\n  \u003CTextBlock Text=\"Заголовок сторінки (H1)\"\n             FontSize=\"28\"\n             FontWeight=\"Bold\"/>\n  \n  \u003CTextBlock Text=\"Це основний заголовок екрану або діалогу. Він найбільший і найжирніший, тому привертає увагу першим.\"\n             FontSize=\"14\"\n             Foreground=\"#9CA3AF\"\n             TextWrapping=\"Wrap\"/>\n\n  \u003CTextBlock Text=\"Заголовок розділу (H2)\"\n             FontSize=\"20\"\n             FontWeight=\"SemiBold\"\n             Margin=\"0,12,0,0\"/>\n  \n  \u003CTextBlock Text=\"Цей текст позначає початок нового розділу або групи контролів. Він менший за H1, але все ще виділяється.\"\n             FontSize=\"14\"\n             Foreground=\"#9CA3AF\"\n             TextWrapping=\"Wrap\"/>\n\n  \u003CTextBlock Text=\"Підзаголовок (H3)\"\n             FontSize=\"16\"\n             FontWeight=\"SemiBold\"\n             Margin=\"0,12,0,0\"/>\n  \n  \u003CTextBlock Text=\"Основний текст (Body)\"\n             FontSize=\"14\"\n             TextWrapping=\"Wrap\">\n    \u003CRun>Це звичайний текст для читання. Він має стандартний розмір (14-15px) і вагу Regular. Більшість тексту у застосунку має бути саме такого розміру.\u003C/Run>\n  \u003C/TextBlock>\n\n  \u003CTextBlock Text=\"Допоміжний текст (Caption): Створено 10 квітня 2026 о 10:08\"\n             FontSize=\"12\"\n             Foreground=\"#6B7280\"\n             Margin=\"0,8,0,0\"/>\n\u003C/StackPanel>\n",[2963,5181,5182,5202,5215,5225,5235,5239,5252,5260,5269,5281,5285,5298,5307,5316,5327,5331,5344,5352,5360,5370,5374,5387,5395,5403,5413,5417,5430,5438,5448,5467,5475,5479,5492,5501,5509,5520],{"__ignoreMap":3246},[3307,5183,5184,5186,5188,5190,5192,5194,5196,5198,5200],{"class":3309,"line":3310},[3307,5185,3314],{"class":3313},[3307,5187,3318],{"class":3317},[3307,5189,3322],{"class":3321},[3307,5191,3326],{"class":3325},[3307,5193,3330],{"class":3329},[3307,5195,3333],{"class":3321},[3307,5197,3326],{"class":3325},[3307,5199,3819],{"class":3329},[3307,5201,3340],{"class":3313},[3307,5203,5204,5206,5208,5210,5212],{"class":3309,"line":3343},[3307,5205,3346],{"class":3313},[3307,5207,3349],{"class":3317},[3307,5209,3352],{"class":3321},[3307,5211,3326],{"class":3325},[3307,5213,5214],{"class":3329},"\"Заголовок сторінки (H1)\"\n",[3307,5216,5217,5220,5222],{"class":3309,"line":3360},[3307,5218,5219],{"class":3321},"             FontSize",[3307,5221,3326],{"class":3325},[3307,5223,5224],{"class":3329},"\"28\"\n",[3307,5226,5227,5229,5231,5233],{"class":3309,"line":3382},[3307,5228,3839],{"class":3321},[3307,5230,3326],{"class":3325},[3307,5232,3844],{"class":3329},[3307,5234,3379],{"class":3313},[3307,5236,5237],{"class":3309,"line":3398},[3307,5238,3858],{"class":3325},[3307,5240,5241,5243,5245,5247,5249],{"class":3309,"line":3409},[3307,5242,3346],{"class":3313},[3307,5244,3349],{"class":3317},[3307,5246,3352],{"class":3321},[3307,5248,3326],{"class":3325},[3307,5250,5251],{"class":3329},"\"Це основний заголовок екрану або діалогу. Він найбільший і найжирніший, тому привертає увагу першим.\"\n",[3307,5253,5254,5256,5258],{"class":3309,"line":3420},[3307,5255,5219],{"class":3321},[3307,5257,3326],{"class":3325},[3307,5259,3542],{"class":3329},[3307,5261,5262,5264,5266],{"class":3309,"line":3431},[3307,5263,3363],{"class":3321},[3307,5265,3326],{"class":3325},[3307,5267,5268],{"class":3329},"\"#9CA3AF\"\n",[3307,5270,5271,5274,5276,5279],{"class":3309,"line":3442},[3307,5272,5273],{"class":3321},"             TextWrapping",[3307,5275,3326],{"class":3325},[3307,5277,5278],{"class":3329},"\"Wrap\"",[3307,5280,3379],{"class":3313},[3307,5282,5283],{"class":3309,"line":3453},[3307,5284,3470],{"emptyLinePlaceholder":3469},[3307,5286,5287,5289,5291,5293,5295],{"class":3309,"line":3466},[3307,5288,3346],{"class":3313},[3307,5290,3349],{"class":3317},[3307,5292,3352],{"class":3321},[3307,5294,3326],{"class":3325},[3307,5296,5297],{"class":3329},"\"Заголовок розділу (H2)\"\n",[3307,5299,5300,5302,5304],{"class":3309,"line":3473},[3307,5301,5219],{"class":3321},[3307,5303,3326],{"class":3325},[3307,5305,5306],{"class":3329},"\"20\"\n",[3307,5308,5309,5311,5313],{"class":3309,"line":3487},[3307,5310,3839],{"class":3321},[3307,5312,3326],{"class":3325},[3307,5314,5315],{"class":3329},"\"SemiBold\"\n",[3307,5317,5318,5321,5323,5325],{"class":3309,"line":3511},[3307,5319,5320],{"class":3321},"             Margin",[3307,5322,3326],{"class":3325},[3307,5324,3506],{"class":3329},[3307,5326,3379],{"class":3313},[3307,5328,5329],{"class":3309,"line":3525},[3307,5330,3858],{"class":3325},[3307,5332,5333,5335,5337,5339,5341],{"class":3309,"line":3535},[3307,5334,3346],{"class":3313},[3307,5336,3349],{"class":3317},[3307,5338,3352],{"class":3321},[3307,5340,3326],{"class":3325},[3307,5342,5343],{"class":3329},"\"Цей текст позначає початок нового розділу або групи контролів. Він менший за H1, але все ще виділяється.\"\n",[3307,5345,5346,5348,5350],{"class":3309,"line":3545},[3307,5347,5219],{"class":3321},[3307,5349,3326],{"class":3325},[3307,5351,3542],{"class":3329},[3307,5353,5354,5356,5358],{"class":3309,"line":3555},[3307,5355,3363],{"class":3321},[3307,5357,3326],{"class":3325},[3307,5359,5268],{"class":3329},[3307,5361,5362,5364,5366,5368],{"class":3309,"line":3566},[3307,5363,5273],{"class":3321},[3307,5365,3326],{"class":3325},[3307,5367,5278],{"class":3329},[3307,5369,3379],{"class":3313},[3307,5371,5372],{"class":3309,"line":3577},[3307,5373,3470],{"emptyLinePlaceholder":3469},[3307,5375,5376,5378,5380,5382,5384],{"class":3309,"line":3588},[3307,5377,3346],{"class":3313},[3307,5379,3349],{"class":3317},[3307,5381,3352],{"class":3321},[3307,5383,3326],{"class":3325},[3307,5385,5386],{"class":3329},"\"Підзаголовок (H3)\"\n",[3307,5388,5389,5391,5393],{"class":3309,"line":3593},[3307,5390,5219],{"class":3321},[3307,5392,3326],{"class":3325},[3307,5394,3417],{"class":3329},[3307,5396,5397,5399,5401],{"class":3309,"line":3607},[3307,5398,3839],{"class":3321},[3307,5400,3326],{"class":3325},[3307,5402,5315],{"class":3329},[3307,5404,5405,5407,5409,5411],{"class":3309,"line":3630},[3307,5406,5320],{"class":3321},[3307,5408,3326],{"class":3325},[3307,5410,3506],{"class":3329},[3307,5412,3379],{"class":3313},[3307,5414,5415],{"class":3309,"line":3644},[3307,5416,3858],{"class":3325},[3307,5418,5419,5421,5423,5425,5427],{"class":3309,"line":3653},[3307,5420,3346],{"class":3313},[3307,5422,3349],{"class":3317},[3307,5424,3352],{"class":3321},[3307,5426,3326],{"class":3325},[3307,5428,5429],{"class":3329},"\"Основний текст (Body)\"\n",[3307,5431,5432,5434,5436],{"class":3309,"line":3662},[3307,5433,5219],{"class":3321},[3307,5435,3326],{"class":3325},[3307,5437,3542],{"class":3329},[3307,5439,5440,5442,5444,5446],{"class":3309,"line":3672},[3307,5441,5273],{"class":3321},[3307,5443,3326],{"class":3325},[3307,5445,5278],{"class":3329},[3307,5447,3340],{"class":3313},[3307,5449,5450,5452,5455,5458,5461,5463,5465],{"class":3309,"line":3681},[3307,5451,3878],{"class":3313},[3307,5453,5454],{"class":3317},"Run",[3307,5456,5457],{"class":3313},">",[3307,5459,5460],{"class":3325},"Це звичайний текст для читання. Він має стандартний розмір (14-15px) і вагу Regular. Більшість тексту у застосунку має бути саме такого розміру.",[3307,5462,3695],{"class":3313},[3307,5464,5454],{"class":3317},[3307,5466,3340],{"class":3313},[3307,5468,5469,5471,5473],{"class":3309,"line":3692},[3307,5470,3939],{"class":3313},[3307,5472,3349],{"class":3317},[3307,5474,3340],{"class":3313},[3307,5476,5477],{"class":3309,"line":4611},[3307,5478,3470],{"emptyLinePlaceholder":3469},[3307,5480,5481,5483,5485,5487,5489],{"class":3309,"line":4644},[3307,5482,3346],{"class":3313},[3307,5484,3349],{"class":3317},[3307,5486,3352],{"class":3321},[3307,5488,3326],{"class":3325},[3307,5490,5491],{"class":3329},"\"Допоміжний текст (Caption): Створено 10 квітня 2026 о 10:08\"\n",[3307,5493,5494,5496,5498],{"class":3309,"line":4659},[3307,5495,5219],{"class":3321},[3307,5497,3326],{"class":3325},[3307,5499,5500],{"class":3329},"\"12\"\n",[3307,5502,5503,5505,5507],{"class":3309,"line":4687},[3307,5504,3363],{"class":3321},[3307,5506,3326],{"class":3325},[3307,5508,3563],{"class":3329},[3307,5510,5511,5513,5515,5518],{"class":3309,"line":4702},[3307,5512,5320],{"class":3321},[3307,5514,3326],{"class":3325},[3307,5516,5517],{"class":3329},"\"0,8,0,0\"",[3307,5519,3379],{"class":3313},[3307,5521,5522,5524,5526],{"class":3309,"line":4717},[3307,5523,3695],{"class":3313},[3307,5525,3318],{"class":3317},[3307,5527,3340],{"class":3313},[2955,5529,5530,5531,5533,5534,2966,5537,2966,5540,2966,5543,5545,5546,2966,5549,2966,5551,2966,5554,2966,5557,5560,5561,5563,5564,5566,5567,5569,5570,3227,5572,5574],{},"У WPF ",[2963,5532,5085],{}," має значення: ",[2963,5535,5536],{},"Thin",[2963,5538,5539],{},"ExtraLight",[2963,5541,5542],{},"Light",[2963,5544,5144],{}," (за замовчуванням), ",[2963,5547,5548],{},"Medium",[2963,5550,5117],{},[2963,5552,5553],{},"Bold",[2963,5555,5556],{},"ExtraBold",[2963,5558,5559],{},"Black",". Для заголовків використовуйте ",[2963,5562,5117],{}," або ",[2963,5565,5553],{},", для основного тексту — ",[2963,5568,5144],{},". Уникайте ",[2963,5571,5556],{},[2963,5573,5559],{}," — вони занадто агресивні для більшості UI.",[3019,5576,5578],{"id":5577},"колір-та-контраст","Колір та контраст",[3024,5580,5581,5582,5585],{},"Колір — другий за важливістю інструмент створення ієрархії. Елементи з ",[2958,5583,5584],{},"вищим контрастом"," привертають більше уваги, ніж елементи з низьким контрастом.",[3024,5587,5588,3236],{},[2958,5589,5590],{},"Правило трьох рівнів контрасту",[3275,5592,5593,5599,5605],{},[3061,5594,5595,5598],{},[2958,5596,5597],{},"Високий контраст"," (Primary Text): Основний текст, заголовки, важливі дані. Контраст 7:1 або вище (WCAG AAA). Колір: чорний на світлому фоні, білий на темному.",[3061,5600,5601,5604],{},[2958,5602,5603],{},"Середній контраст"," (Secondary Text): Підписи, описи, метадані. Контраст 4.5:1 (WCAG AA). Колір: темно-сірий (#374151) на світлому, світло-сірий (#D1D5DB) на темному.",[3061,5606,5607,5610],{},[2958,5608,5609],{},"Низький контраст"," (Tertiary Text): Placeholder-текст, відключені елементи, дуже другорядна інформація. Контраст 3:1-4:1. Колір: сірий (#9CA3AF).",[3296,5612,5614],{"title":5613},"Візуальна ієрархія: рівні контрасту",[3238,5615,5617],{"className":3301,"code":5616,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"12\">\n  \u003CBorder BorderBrush=\"#E5E7EB\" BorderThickness=\"1\" Padding=\"16\" CornerRadius=\"8\">\n    \u003CStackPanel Spacing=\"8\">\n      \u003CTextBlock Text=\"Назва продукту\"\n                 FontSize=\"18\"\n                 FontWeight=\"Bold\"\n                 Foreground=\"#111827\"/>\n      \n      \u003CTextBlock Text=\"Короткий опис продукту, що пояснює його призначення та основні характеристики.\"\n                 FontSize=\"14\"\n                 Foreground=\"#374151\"\n                 TextWrapping=\"Wrap\"/>\n      \n      \u003CTextBlock Text=\"Додано: 10 квітня 2026\"\n                 FontSize=\"12\"\n                 Foreground=\"#9CA3AF\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\n  \u003CTextBlock Text=\"Пояснення:\"\n             FontWeight=\"SemiBold\"\n             Margin=\"0,8,0,0\"/>\n  \u003CStackPanel Spacing=\"4\">\n    \u003CTextBlock FontSize=\"13\">\n      \u003CRun Foreground=\"#111827\" FontWeight=\"Bold\">■\u003C/Run>\n      \u003CRun Foreground=\"#6B7280\"> Високий контраст (#111827) — назва продукту\u003C/Run>\n    \u003C/TextBlock>\n    \u003CTextBlock FontSize=\"13\">\n      \u003CRun Foreground=\"#374151\" FontWeight=\"Bold\">■\u003C/Run>\n      \u003CRun Foreground=\"#6B7280\"> Середній контраст (#374151) — опис\u003C/Run>\n    \u003C/TextBlock>\n    \u003CTextBlock FontSize=\"13\">\n      \u003CRun Foreground=\"#9CA3AF\" FontWeight=\"Bold\">■\u003C/Run>\n      \u003CRun Foreground=\"#6B7280\"> Низький контраст (#9CA3AF) — метадані\u003C/Run>\n    \u003C/TextBlock>\n  \u003C/StackPanel>\n\u003C/StackPanel>\n",[2963,5618,5619,5639,5672,5686,5699,5709,5718,5730,5735,5748,5756,5765,5776,5780,5793,5801,5811,5819,5827,5831,5844,5852,5862,5876,5890,5920,5944,5952,5966,5994,6017,6025,6039,6067,6090,6098,6106],{"__ignoreMap":3246},[3307,5620,5621,5623,5625,5627,5629,5631,5633,5635,5637],{"class":3309,"line":3310},[3307,5622,3314],{"class":3313},[3307,5624,3318],{"class":3317},[3307,5626,3322],{"class":3321},[3307,5628,3326],{"class":3325},[3307,5630,3330],{"class":3329},[3307,5632,3333],{"class":3321},[3307,5634,3326],{"class":3325},[3307,5636,4494],{"class":3329},[3307,5638,3340],{"class":3313},[3307,5640,5641,5643,5645,5647,5649,5652,5654,5656,5658,5660,5662,5664,5666,5668,5670],{"class":3309,"line":3343},[3307,5642,3346],{"class":3313},[3307,5644,4470],{"class":3317},[3307,5646,4473],{"class":3321},[3307,5648,3326],{"class":3325},[3307,5650,5651],{"class":3329},"\"#E5E7EB\"",[3307,5653,4481],{"class":3321},[3307,5655,3326],{"class":3325},[3307,5657,4486],{"class":3329},[3307,5659,4489],{"class":3321},[3307,5661,3326],{"class":3325},[3307,5663,3819],{"class":3329},[3307,5665,4497],{"class":3321},[3307,5667,3326],{"class":3325},[3307,5669,3871],{"class":3329},[3307,5671,3340],{"class":3313},[3307,5673,5674,5676,5678,5680,5682,5684],{"class":3309,"line":3360},[3307,5675,3878],{"class":3313},[3307,5677,3318],{"class":3317},[3307,5679,3333],{"class":3321},[3307,5681,3326],{"class":3325},[3307,5683,3871],{"class":3329},[3307,5685,3340],{"class":3313},[3307,5687,5688,5690,5692,5694,5696],{"class":3309,"line":3382},[3307,5689,4016],{"class":3313},[3307,5691,3349],{"class":3317},[3307,5693,3352],{"class":3321},[3307,5695,3326],{"class":3325},[3307,5697,5698],{"class":3329},"\"Назва продукту\"\n",[3307,5700,5701,5704,5706],{"class":3309,"line":3398},[3307,5702,5703],{"class":3321},"                 FontSize",[3307,5705,3326],{"class":3325},[3307,5707,5708],{"class":3329},"\"18\"\n",[3307,5710,5711,5714,5716],{"class":3309,"line":3409},[3307,5712,5713],{"class":3321},"                 FontWeight",[3307,5715,3326],{"class":3325},[3307,5717,3428],{"class":3329},[3307,5719,5720,5723,5725,5728],{"class":3309,"line":3420},[3307,5721,5722],{"class":3321},"                 Foreground",[3307,5724,3326],{"class":3325},[3307,5726,5727],{"class":3329},"\"#111827\"",[3307,5729,3379],{"class":3313},[3307,5731,5732],{"class":3309,"line":3431},[3307,5733,5734],{"class":3325},"      \n",[3307,5736,5737,5739,5741,5743,5745],{"class":3309,"line":3442},[3307,5738,4016],{"class":3313},[3307,5740,3349],{"class":3317},[3307,5742,3352],{"class":3321},[3307,5744,3326],{"class":3325},[3307,5746,5747],{"class":3329},"\"Короткий опис продукту, що пояснює його призначення та основні характеристики.\"\n",[3307,5749,5750,5752,5754],{"class":3309,"line":3453},[3307,5751,5703],{"class":3321},[3307,5753,3326],{"class":3325},[3307,5755,3542],{"class":3329},[3307,5757,5758,5760,5762],{"class":3309,"line":3466},[3307,5759,5722],{"class":3321},[3307,5761,3326],{"class":3325},[3307,5763,5764],{"class":3329},"\"#374151\"\n",[3307,5766,5767,5770,5772,5774],{"class":3309,"line":3473},[3307,5768,5769],{"class":3321},"                 TextWrapping",[3307,5771,3326],{"class":3325},[3307,5773,5278],{"class":3329},[3307,5775,3379],{"class":3313},[3307,5777,5778],{"class":3309,"line":3487},[3307,5779,5734],{"class":3325},[3307,5781,5782,5784,5786,5788,5790],{"class":3309,"line":3511},[3307,5783,4016],{"class":3313},[3307,5785,3349],{"class":3317},[3307,5787,3352],{"class":3321},[3307,5789,3326],{"class":3325},[3307,5791,5792],{"class":3329},"\"Додано: 10 квітня 2026\"\n",[3307,5794,5795,5797,5799],{"class":3309,"line":3525},[3307,5796,5703],{"class":3321},[3307,5798,3326],{"class":3325},[3307,5800,5500],{"class":3329},[3307,5802,5803,5805,5807,5809],{"class":3309,"line":3535},[3307,5804,5722],{"class":3321},[3307,5806,3326],{"class":3325},[3307,5808,4538],{"class":3329},[3307,5810,3379],{"class":3313},[3307,5812,5813,5815,5817],{"class":3309,"line":3545},[3307,5814,4098],{"class":3313},[3307,5816,3318],{"class":3317},[3307,5818,3340],{"class":3313},[3307,5820,5821,5823,5825],{"class":3309,"line":3555},[3307,5822,3939],{"class":3313},[3307,5824,4470],{"class":3317},[3307,5826,3340],{"class":3313},[3307,5828,5829],{"class":3309,"line":3566},[3307,5830,3470],{"emptyLinePlaceholder":3469},[3307,5832,5833,5835,5837,5839,5841],{"class":3309,"line":3577},[3307,5834,3346],{"class":3313},[3307,5836,3349],{"class":3317},[3307,5838,3352],{"class":3321},[3307,5840,3326],{"class":3325},[3307,5842,5843],{"class":3329},"\"Пояснення:\"\n",[3307,5845,5846,5848,5850],{"class":3309,"line":3588},[3307,5847,3839],{"class":3321},[3307,5849,3326],{"class":3325},[3307,5851,5315],{"class":3329},[3307,5853,5854,5856,5858,5860],{"class":3309,"line":3593},[3307,5855,5320],{"class":3321},[3307,5857,3326],{"class":3325},[3307,5859,5517],{"class":3329},[3307,5861,3379],{"class":3313},[3307,5863,5864,5866,5868,5870,5872,5874],{"class":3309,"line":3607},[3307,5865,3346],{"class":3313},[3307,5867,3318],{"class":3317},[3307,5869,3333],{"class":3321},[3307,5871,3326],{"class":3325},[3307,5873,4254],{"class":3329},[3307,5875,3340],{"class":3313},[3307,5877,5878,5880,5882,5884,5886,5888],{"class":3309,"line":3630},[3307,5879,3878],{"class":3313},[3307,5881,3349],{"class":3317},[3307,5883,3371],{"class":3321},[3307,5885,3326],{"class":3325},[3307,5887,3376],{"class":3329},[3307,5889,3340],{"class":3313},[3307,5891,5892,5894,5896,5898,5900,5902,5905,5907,5909,5911,5914,5916,5918],{"class":3309,"line":3644},[3307,5893,4016],{"class":3313},[3307,5895,5454],{"class":3317},[3307,5897,4533],{"class":3321},[3307,5899,3326],{"class":3325},[3307,5901,5727],{"class":3329},[3307,5903,5904],{"class":3321}," FontWeight",[3307,5906,3326],{"class":3325},[3307,5908,3844],{"class":3329},[3307,5910,5457],{"class":3313},[3307,5912,5913],{"class":3325},"■",[3307,5915,3695],{"class":3313},[3307,5917,5454],{"class":3317},[3307,5919,3340],{"class":3313},[3307,5921,5922,5924,5926,5928,5930,5933,5935,5938,5940,5942],{"class":3309,"line":3653},[3307,5923,4016],{"class":3313},[3307,5925,5454],{"class":3317},[3307,5927,4533],{"class":3321},[3307,5929,3326],{"class":3325},[3307,5931,5932],{"class":3329},"\"#6B7280\"",[3307,5934,5457],{"class":3313},[3307,5936,5937],{"class":3325}," Високий контраст (#111827) — назва продукту",[3307,5939,3695],{"class":3313},[3307,5941,5454],{"class":3317},[3307,5943,3340],{"class":3313},[3307,5945,5946,5948,5950],{"class":3309,"line":3662},[3307,5947,4098],{"class":3313},[3307,5949,3349],{"class":3317},[3307,5951,3340],{"class":3313},[3307,5953,5954,5956,5958,5960,5962,5964],{"class":3309,"line":3672},[3307,5955,3878],{"class":3313},[3307,5957,3349],{"class":3317},[3307,5959,3371],{"class":3321},[3307,5961,3326],{"class":3325},[3307,5963,3376],{"class":3329},[3307,5965,3340],{"class":3313},[3307,5967,5968,5970,5972,5974,5976,5978,5980,5982,5984,5986,5988,5990,5992],{"class":3309,"line":3681},[3307,5969,4016],{"class":3313},[3307,5971,5454],{"class":3317},[3307,5973,4533],{"class":3321},[3307,5975,3326],{"class":3325},[3307,5977,4478],{"class":3329},[3307,5979,5904],{"class":3321},[3307,5981,3326],{"class":3325},[3307,5983,3844],{"class":3329},[3307,5985,5457],{"class":3313},[3307,5987,5913],{"class":3325},[3307,5989,3695],{"class":3313},[3307,5991,5454],{"class":3317},[3307,5993,3340],{"class":3313},[3307,5995,5996,5998,6000,6002,6004,6006,6008,6011,6013,6015],{"class":3309,"line":3692},[3307,5997,4016],{"class":3313},[3307,5999,5454],{"class":3317},[3307,6001,4533],{"class":3321},[3307,6003,3326],{"class":3325},[3307,6005,5932],{"class":3329},[3307,6007,5457],{"class":3313},[3307,6009,6010],{"class":3325}," Середній контраст (#374151) — опис",[3307,6012,3695],{"class":3313},[3307,6014,5454],{"class":3317},[3307,6016,3340],{"class":3313},[3307,6018,6019,6021,6023],{"class":3309,"line":4611},[3307,6020,4098],{"class":3313},[3307,6022,3349],{"class":3317},[3307,6024,3340],{"class":3313},[3307,6026,6027,6029,6031,6033,6035,6037],{"class":3309,"line":4644},[3307,6028,3878],{"class":3313},[3307,6030,3349],{"class":3317},[3307,6032,3371],{"class":3321},[3307,6034,3326],{"class":3325},[3307,6036,3376],{"class":3329},[3307,6038,3340],{"class":3313},[3307,6040,6041,6043,6045,6047,6049,6051,6053,6055,6057,6059,6061,6063,6065],{"class":3309,"line":4659},[3307,6042,4016],{"class":3313},[3307,6044,5454],{"class":3317},[3307,6046,4533],{"class":3321},[3307,6048,3326],{"class":3325},[3307,6050,4538],{"class":3329},[3307,6052,5904],{"class":3321},[3307,6054,3326],{"class":3325},[3307,6056,3844],{"class":3329},[3307,6058,5457],{"class":3313},[3307,6060,5913],{"class":3325},[3307,6062,3695],{"class":3313},[3307,6064,5454],{"class":3317},[3307,6066,3340],{"class":3313},[3307,6068,6069,6071,6073,6075,6077,6079,6081,6084,6086,6088],{"class":3309,"line":4687},[3307,6070,4016],{"class":3313},[3307,6072,5454],{"class":3317},[3307,6074,4533],{"class":3321},[3307,6076,3326],{"class":3325},[3307,6078,5932],{"class":3329},[3307,6080,5457],{"class":3313},[3307,6082,6083],{"class":3325}," Низький контраст (#9CA3AF) — метадані",[3307,6085,3695],{"class":3313},[3307,6087,5454],{"class":3317},[3307,6089,3340],{"class":3313},[3307,6091,6092,6094,6096],{"class":3309,"line":4702},[3307,6093,4098],{"class":3313},[3307,6095,3349],{"class":3317},[3307,6097,3340],{"class":3313},[3307,6099,6100,6102,6104],{"class":3309,"line":4717},[3307,6101,3939],{"class":3313},[3307,6103,3318],{"class":3317},[3307,6105,3340],{"class":3313},[3307,6107,6108,6110,6112],{"class":3309,"line":4732},[3307,6109,3695],{"class":3313},[3307,6111,3318],{"class":3317},[3307,6113,3340],{"class":3313},[3019,6115,6117],{"id":6116},"відступи-та-групування-proximity","Відступи та групування (Proximity)",[3024,6119,6120,6121,6124,6125,6128,6129,6132],{},"Елементи, що розташовані ",[2958,6122,6123],{},"близько один до одного",", сприймаються як пов'язані. Елементи, що розташовані ",[2958,6126,6127],{},"далеко",", сприймаються як окремі групи. Це один із принципів гештальт-психології, що називається ",[2958,6130,6131],{},"Proximity"," (близькість).",[3024,6134,6135,3236],{},[2958,6136,6137],{},"Практичні правила відступів",[3058,6139,6140,6146,6152],{},[3061,6141,6142,6145],{},[2958,6143,6144],{},"Всередині групи",": 4-8px між пов'язаними елементами (наприклад, між Label та TextBox).",[3061,6147,6148,6151],{},[2958,6149,6150],{},"Між групами",": 16-24px між різними групами контролів.",[3061,6153,6154,6157],{},[2958,6155,6156],{},"Між розділами",": 32-48px між великими розділами екрану.",[3296,6159,6161],{"title":6160},"Візуальна ієрархія: відступи та групування",[3238,6162,6164],{"className":3301,"code":6163,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"32\">\n  \u003C!-- Група 1: Персональні дані -->\n  \u003CStackPanel Spacing=\"8\">\n    \u003CTextBlock Text=\"Персональні дані\"\n               FontSize=\"16\"\n               FontWeight=\"SemiBold\"/>\n    \n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Ім'я\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n      \u003CTextBox Padding=\"8,6\" Text=\"Іван\"/>\n    \u003C/StackPanel>\n\n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Прізвище\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n      \u003CTextBox Padding=\"8,6\" Text=\"Петренко\"/>\n    \u003C/StackPanel>\n  \u003C/StackPanel>\n\n  \u003C!-- Група 2: Контактна інформація (відступ 32px від попередньої групи) -->\n  \u003CStackPanel Spacing=\"8\">\n    \u003CTextBlock Text=\"Контактна інформація\"\n               FontSize=\"16\"\n               FontWeight=\"SemiBold\"/>\n    \n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Email\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n      \u003CTextBox Padding=\"8,6\" Text=\"ivan@example.com\"/>\n    \u003C/StackPanel>\n\n    \u003CStackPanel Spacing=\"4\">\n      \u003CTextBlock Text=\"Телефон\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n      \u003CTextBox Padding=\"8,6\" Text=\"+380 50 123 45 67\"/>\n    \u003C/StackPanel>\n  \u003C/StackPanel>\n\u003C/StackPanel>\n",[2963,6165,6166,6187,6193,6207,6220,6229,6241,6246,6260,6287,6310,6318,6322,6336,6363,6384,6392,6400,6404,6409,6423,6436,6444,6454,6458,6472,6499,6520,6528,6532,6546,6573,6594,6602,6610],{"__ignoreMap":3246},[3307,6167,6168,6170,6172,6174,6176,6178,6180,6182,6185],{"class":3309,"line":3310},[3307,6169,3314],{"class":3313},[3307,6171,3318],{"class":3317},[3307,6173,3322],{"class":3321},[3307,6175,3326],{"class":3325},[3307,6177,3330],{"class":3329},[3307,6179,3333],{"class":3321},[3307,6181,3326],{"class":3325},[3307,6183,6184],{"class":3329},"\"32\"",[3307,6186,3340],{"class":3313},[3307,6188,6189],{"class":3309,"line":3343},[3307,6190,6192],{"class":6191},"spJ8K","  \u003C!-- Група 1: Персональні дані -->\n",[3307,6194,6195,6197,6199,6201,6203,6205],{"class":3309,"line":3360},[3307,6196,3346],{"class":3313},[3307,6198,3318],{"class":3317},[3307,6200,3333],{"class":3321},[3307,6202,3326],{"class":3325},[3307,6204,3871],{"class":3329},[3307,6206,3340],{"class":3313},[3307,6208,6209,6211,6213,6215,6217],{"class":3309,"line":3382},[3307,6210,3878],{"class":3313},[3307,6212,3349],{"class":3317},[3307,6214,3352],{"class":3321},[3307,6216,3326],{"class":3325},[3307,6218,6219],{"class":3329},"\"Персональні дані\"\n",[3307,6221,6222,6225,6227],{"class":3309,"line":3398},[3307,6223,6224],{"class":3321},"               FontSize",[3307,6226,3326],{"class":3325},[3307,6228,3417],{"class":3329},[3307,6230,6231,6234,6236,6239],{"class":3309,"line":3409},[3307,6232,6233],{"class":3321},"               FontWeight",[3307,6235,3326],{"class":3325},[3307,6237,6238],{"class":3329},"\"SemiBold\"",[3307,6240,3379],{"class":3313},[3307,6242,6243],{"class":3309,"line":3420},[3307,6244,6245],{"class":3325},"    \n",[3307,6247,6248,6250,6252,6254,6256,6258],{"class":3309,"line":3431},[3307,6249,3878],{"class":3313},[3307,6251,3318],{"class":3317},[3307,6253,3333],{"class":3321},[3307,6255,3326],{"class":3325},[3307,6257,4254],{"class":3329},[3307,6259,3340],{"class":3313},[3307,6261,6262,6264,6266,6268,6270,6273,6275,6277,6279,6281,6283,6285],{"class":3309,"line":3442},[3307,6263,4016],{"class":3313},[3307,6265,3349],{"class":3317},[3307,6267,3352],{"class":3321},[3307,6269,3326],{"class":3325},[3307,6271,6272],{"class":3329},"\"Ім'я\"",[3307,6274,3371],{"class":3321},[3307,6276,3326],{"class":3325},[3307,6278,3376],{"class":3329},[3307,6280,4533],{"class":3321},[3307,6282,3326],{"class":3325},[3307,6284,5932],{"class":3329},[3307,6286,3379],{"class":3313},[3307,6288,6289,6291,6294,6296,6298,6301,6303,6305,6308],{"class":3309,"line":3453},[3307,6290,4016],{"class":3313},[3307,6292,6293],{"class":3317},"TextBox",[3307,6295,4489],{"class":3321},[3307,6297,3326],{"class":3325},[3307,6299,6300],{"class":3329},"\"8,6\"",[3307,6302,3352],{"class":3321},[3307,6304,3326],{"class":3325},[3307,6306,6307],{"class":3329},"\"Іван\"",[3307,6309,3379],{"class":3313},[3307,6311,6312,6314,6316],{"class":3309,"line":3466},[3307,6313,4098],{"class":3313},[3307,6315,3318],{"class":3317},[3307,6317,3340],{"class":3313},[3307,6319,6320],{"class":3309,"line":3473},[3307,6321,3470],{"emptyLinePlaceholder":3469},[3307,6323,6324,6326,6328,6330,6332,6334],{"class":3309,"line":3487},[3307,6325,3878],{"class":3313},[3307,6327,3318],{"class":3317},[3307,6329,3333],{"class":3321},[3307,6331,3326],{"class":3325},[3307,6333,4254],{"class":3329},[3307,6335,3340],{"class":3313},[3307,6337,6338,6340,6342,6344,6346,6349,6351,6353,6355,6357,6359,6361],{"class":3309,"line":3511},[3307,6339,4016],{"class":3313},[3307,6341,3349],{"class":3317},[3307,6343,3352],{"class":3321},[3307,6345,3326],{"class":3325},[3307,6347,6348],{"class":3329},"\"Прізвище\"",[3307,6350,3371],{"class":3321},[3307,6352,3326],{"class":3325},[3307,6354,3376],{"class":3329},[3307,6356,4533],{"class":3321},[3307,6358,3326],{"class":3325},[3307,6360,5932],{"class":3329},[3307,6362,3379],{"class":3313},[3307,6364,6365,6367,6369,6371,6373,6375,6377,6379,6382],{"class":3309,"line":3525},[3307,6366,4016],{"class":3313},[3307,6368,6293],{"class":3317},[3307,6370,4489],{"class":3321},[3307,6372,3326],{"class":3325},[3307,6374,6300],{"class":3329},[3307,6376,3352],{"class":3321},[3307,6378,3326],{"class":3325},[3307,6380,6381],{"class":3329},"\"Петренко\"",[3307,6383,3379],{"class":3313},[3307,6385,6386,6388,6390],{"class":3309,"line":3535},[3307,6387,4098],{"class":3313},[3307,6389,3318],{"class":3317},[3307,6391,3340],{"class":3313},[3307,6393,6394,6396,6398],{"class":3309,"line":3545},[3307,6395,3939],{"class":3313},[3307,6397,3318],{"class":3317},[3307,6399,3340],{"class":3313},[3307,6401,6402],{"class":3309,"line":3555},[3307,6403,3470],{"emptyLinePlaceholder":3469},[3307,6405,6406],{"class":3309,"line":3566},[3307,6407,6408],{"class":6191},"  \u003C!-- Група 2: Контактна інформація (відступ 32px від попередньої групи) -->\n",[3307,6410,6411,6413,6415,6417,6419,6421],{"class":3309,"line":3577},[3307,6412,3346],{"class":3313},[3307,6414,3318],{"class":3317},[3307,6416,3333],{"class":3321},[3307,6418,3326],{"class":3325},[3307,6420,3871],{"class":3329},[3307,6422,3340],{"class":3313},[3307,6424,6425,6427,6429,6431,6433],{"class":3309,"line":3588},[3307,6426,3878],{"class":3313},[3307,6428,3349],{"class":3317},[3307,6430,3352],{"class":3321},[3307,6432,3326],{"class":3325},[3307,6434,6435],{"class":3329},"\"Контактна інформація\"\n",[3307,6437,6438,6440,6442],{"class":3309,"line":3593},[3307,6439,6224],{"class":3321},[3307,6441,3326],{"class":3325},[3307,6443,3417],{"class":3329},[3307,6445,6446,6448,6450,6452],{"class":3309,"line":3607},[3307,6447,6233],{"class":3321},[3307,6449,3326],{"class":3325},[3307,6451,6238],{"class":3329},[3307,6453,3379],{"class":3313},[3307,6455,6456],{"class":3309,"line":3630},[3307,6457,6245],{"class":3325},[3307,6459,6460,6462,6464,6466,6468,6470],{"class":3309,"line":3644},[3307,6461,3878],{"class":3313},[3307,6463,3318],{"class":3317},[3307,6465,3333],{"class":3321},[3307,6467,3326],{"class":3325},[3307,6469,4254],{"class":3329},[3307,6471,3340],{"class":3313},[3307,6473,6474,6476,6478,6480,6482,6485,6487,6489,6491,6493,6495,6497],{"class":3309,"line":3653},[3307,6475,4016],{"class":3313},[3307,6477,3349],{"class":3317},[3307,6479,3352],{"class":3321},[3307,6481,3326],{"class":3325},[3307,6483,6484],{"class":3329},"\"Email\"",[3307,6486,3371],{"class":3321},[3307,6488,3326],{"class":3325},[3307,6490,3376],{"class":3329},[3307,6492,4533],{"class":3321},[3307,6494,3326],{"class":3325},[3307,6496,5932],{"class":3329},[3307,6498,3379],{"class":3313},[3307,6500,6501,6503,6505,6507,6509,6511,6513,6515,6518],{"class":3309,"line":3662},[3307,6502,4016],{"class":3313},[3307,6504,6293],{"class":3317},[3307,6506,4489],{"class":3321},[3307,6508,3326],{"class":3325},[3307,6510,6300],{"class":3329},[3307,6512,3352],{"class":3321},[3307,6514,3326],{"class":3325},[3307,6516,6517],{"class":3329},"\"ivan@example.com\"",[3307,6519,3379],{"class":3313},[3307,6521,6522,6524,6526],{"class":3309,"line":3672},[3307,6523,4098],{"class":3313},[3307,6525,3318],{"class":3317},[3307,6527,3340],{"class":3313},[3307,6529,6530],{"class":3309,"line":3681},[3307,6531,3470],{"emptyLinePlaceholder":3469},[3307,6533,6534,6536,6538,6540,6542,6544],{"class":3309,"line":3692},[3307,6535,3878],{"class":3313},[3307,6537,3318],{"class":3317},[3307,6539,3333],{"class":3321},[3307,6541,3326],{"class":3325},[3307,6543,4254],{"class":3329},[3307,6545,3340],{"class":3313},[3307,6547,6548,6550,6552,6554,6556,6559,6561,6563,6565,6567,6569,6571],{"class":3309,"line":4611},[3307,6549,4016],{"class":3313},[3307,6551,3349],{"class":3317},[3307,6553,3352],{"class":3321},[3307,6555,3326],{"class":3325},[3307,6557,6558],{"class":3329},"\"Телефон\"",[3307,6560,3371],{"class":3321},[3307,6562,3326],{"class":3325},[3307,6564,3376],{"class":3329},[3307,6566,4533],{"class":3321},[3307,6568,3326],{"class":3325},[3307,6570,5932],{"class":3329},[3307,6572,3379],{"class":3313},[3307,6574,6575,6577,6579,6581,6583,6585,6587,6589,6592],{"class":3309,"line":4644},[3307,6576,4016],{"class":3313},[3307,6578,6293],{"class":3317},[3307,6580,4489],{"class":3321},[3307,6582,3326],{"class":3325},[3307,6584,6300],{"class":3329},[3307,6586,3352],{"class":3321},[3307,6588,3326],{"class":3325},[3307,6590,6591],{"class":3329},"\"+380 50 123 45 67\"",[3307,6593,3379],{"class":3313},[3307,6595,6596,6598,6600],{"class":3309,"line":4659},[3307,6597,4098],{"class":3313},[3307,6599,3318],{"class":3317},[3307,6601,3340],{"class":3313},[3307,6603,6604,6606,6608],{"class":3309,"line":4687},[3307,6605,3939],{"class":3313},[3307,6607,3318],{"class":3317},[3307,6609,3340],{"class":3313},[3307,6611,6612,6614,6616],{"class":3309,"line":4702},[3307,6613,3695],{"class":3313},[3307,6615,3318],{"class":3317},[3307,6617,3340],{"class":3313},[3701,6619,6620,6621,6624,6625,6627,6628,6631],{},"У WPF використовуйте властивість ",[2963,6622,6623],{},"Spacing"," у ",[2963,6626,3318],{}," (Avalonia) або ",[2963,6629,6630],{},"Margin"," для кожного елемента (WPF). Для консистентності створіть систему відступів: 4, 8, 12, 16, 24, 32, 48 пікселів. Не використовуйте довільні значення на кшталт 13px або 27px — це порушує ритм інтерфейсу.",[3205,6633],{},[3014,6635,6637],{"id":6636},"принципи-гештальту-у-ui-дизайні","Принципи Гештальту у UI-дизайні",[3024,6639,6640,6641,3012],{},"Гештальт-психологія — це напрямок психології, що вивчає, як людський мозок сприймає візуальні об'єкти як цілісні структури, а не як набір окремих елементів. Ці принципи критично важливі для UI-дизайну, бо вони пояснюють, ",[2958,6642,6643],{},"як користувач \"читає\" інтерфейс",[3019,6645,6647],{"id":6646},"принцип-близькості-proximity","Принцип близькості (Proximity)",[3024,6649,6650],{},"Ми вже згадували його вище: об'єкти, що розташовані близько, сприймаються як група. Це найпростіший і найпотужніший принцип групування у UI.",[3019,6652,6654],{"id":6653},"принцип-подібності-similarity","Принцип подібності (Similarity)",[3024,6656,6657,6658,6661],{},"Елементи, що ",[2958,6659,6660],{},"виглядають подібно"," (однаковий колір, форма, розмір, стиль), сприймаються як пов'язані, навіть якщо вони розташовані далеко один від одного.",[3024,6663,6664,6667],{},[2958,6665,6666],{},"Приклад",": Якщо всі кнопки деструктивних дій (видалення, скасування) у вашому застосунку червоні — користувач швидко навчиться асоціювати червоний колір з небезпечними діями. Якщо раптом одна кнопка \"Зберегти\" буде червоною — це порушить очікування і може призвести до помилки.",[3296,6669,6671],{"title":6670},"Принцип подібності: консистентність стилів",[3238,6672,6674],{"className":3301,"code":6673,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"20\">\n  \u003CTextBlock Text=\"Правильно: всі первинні дії — синього кольору\"\n             FontWeight=\"SemiBold\"/>\n  \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"12\">\n    \u003CButton Content=\"Зберегти\" Padding=\"16,8\" Background=\"#3B82F6\" Foreground=\"White\"/>\n    \u003CButton Content=\"Застосувати\" Padding=\"16,8\" Background=\"#3B82F6\" Foreground=\"White\"/>\n    \u003CButton Content=\"Продовжити\" Padding=\"16,8\" Background=\"#3B82F6\" Foreground=\"White\"/>\n  \u003C/StackPanel>\n\n  \u003CTextBlock Text=\"Правильно: всі деструктивні дії — червоного кольору\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"12\">\n    \u003CButton Content=\"Видалити\" Padding=\"16,8\" Background=\"#EF4444\" Foreground=\"White\"/>\n    \u003CButton Content=\"Скасувати підписку\" Padding=\"16,8\" Background=\"#EF4444\" Foreground=\"White\"/>\n    \u003CButton Content=\"Очистити все\" Padding=\"16,8\" Background=\"#EF4444\" Foreground=\"White\"/>\n  \u003C/StackPanel>\n\n  \u003CTextBlock Text=\"Неправильно: змішані кольори без логіки\"\n             FontWeight=\"SemiBold\" Foreground=\"#EF4444\" Margin=\"0,12,0,0\"/>\n  \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"12\">\n    \u003CButton Content=\"Зберегти\" Padding=\"16,8\" Background=\"#EF4444\" Foreground=\"White\"/>\n    \u003CButton Content=\"Видалити\" Padding=\"16,8\" Background=\"#3B82F6\" Foreground=\"White\"/>\n    \u003CButton Content=\"Скасувати\" Padding=\"16,8\" Background=\"#10B981\" Foreground=\"White\"/>\n  \u003C/StackPanel>\n\u003C/StackPanel>\n",[2963,6675,6676,6696,6709,6719,6741,6778,6811,6844,6852,6856,6869,6885,6905,6939,6972,7005,7013,7017,7030,7052,7072,7104,7136,7170,7178],{"__ignoreMap":3246},[3307,6677,6678,6680,6682,6684,6686,6688,6690,6692,6694],{"class":3309,"line":3310},[3307,6679,3314],{"class":3313},[3307,6681,3318],{"class":3317},[3307,6683,3322],{"class":3321},[3307,6685,3326],{"class":3325},[3307,6687,3330],{"class":3329},[3307,6689,3333],{"class":3321},[3307,6691,3326],{"class":3325},[3307,6693,3330],{"class":3329},[3307,6695,3340],{"class":3313},[3307,6697,6698,6700,6702,6704,6706],{"class":3309,"line":3343},[3307,6699,3346],{"class":3313},[3307,6701,3349],{"class":3317},[3307,6703,3352],{"class":3321},[3307,6705,3326],{"class":3325},[3307,6707,6708],{"class":3329},"\"Правильно: всі первинні дії — синього кольору\"\n",[3307,6710,6711,6713,6715,6717],{"class":3309,"line":3360},[3307,6712,3839],{"class":3321},[3307,6714,3326],{"class":3325},[3307,6716,6238],{"class":3329},[3307,6718,3379],{"class":3313},[3307,6720,6721,6723,6725,6728,6730,6733,6735,6737,6739],{"class":3309,"line":3382},[3307,6722,3346],{"class":3313},[3307,6724,3318],{"class":3317},[3307,6726,6727],{"class":3321}," Orientation",[3307,6729,3326],{"class":3325},[3307,6731,6732],{"class":3329},"\"Horizontal\"",[3307,6734,3333],{"class":3321},[3307,6736,3326],{"class":3325},[3307,6738,4494],{"class":3329},[3307,6740,3340],{"class":3313},[3307,6742,6743,6745,6747,6749,6751,6754,6756,6758,6761,6764,6766,6769,6771,6773,6776],{"class":3309,"line":3398},[3307,6744,3878],{"class":3313},[3307,6746,3387],{"class":3317},[3307,6748,3390],{"class":3321},[3307,6750,3326],{"class":3325},[3307,6752,6753],{"class":3329},"\"Зберегти\"",[3307,6755,4489],{"class":3321},[3307,6757,3326],{"class":3325},[3307,6759,6760],{"class":3329},"\"16,8\"",[3307,6762,6763],{"class":3321}," Background",[3307,6765,3326],{"class":3325},[3307,6767,6768],{"class":3329},"\"#3B82F6\"",[3307,6770,4533],{"class":3321},[3307,6772,3326],{"class":3325},[3307,6774,6775],{"class":3329},"\"White\"",[3307,6777,3379],{"class":3313},[3307,6779,6780,6782,6784,6786,6788,6791,6793,6795,6797,6799,6801,6803,6805,6807,6809],{"class":3309,"line":3409},[3307,6781,3878],{"class":3313},[3307,6783,3387],{"class":3317},[3307,6785,3390],{"class":3321},[3307,6787,3326],{"class":3325},[3307,6789,6790],{"class":3329},"\"Застосувати\"",[3307,6792,4489],{"class":3321},[3307,6794,3326],{"class":3325},[3307,6796,6760],{"class":3329},[3307,6798,6763],{"class":3321},[3307,6800,3326],{"class":3325},[3307,6802,6768],{"class":3329},[3307,6804,4533],{"class":3321},[3307,6806,3326],{"class":3325},[3307,6808,6775],{"class":3329},[3307,6810,3379],{"class":3313},[3307,6812,6813,6815,6817,6819,6821,6824,6826,6828,6830,6832,6834,6836,6838,6840,6842],{"class":3309,"line":3420},[3307,6814,3878],{"class":3313},[3307,6816,3387],{"class":3317},[3307,6818,3390],{"class":3321},[3307,6820,3326],{"class":3325},[3307,6822,6823],{"class":3329},"\"Продовжити\"",[3307,6825,4489],{"class":3321},[3307,6827,3326],{"class":3325},[3307,6829,6760],{"class":3329},[3307,6831,6763],{"class":3321},[3307,6833,3326],{"class":3325},[3307,6835,6768],{"class":3329},[3307,6837,4533],{"class":3321},[3307,6839,3326],{"class":3325},[3307,6841,6775],{"class":3329},[3307,6843,3379],{"class":3313},[3307,6845,6846,6848,6850],{"class":3309,"line":3431},[3307,6847,3939],{"class":3313},[3307,6849,3318],{"class":3317},[3307,6851,3340],{"class":3313},[3307,6853,6854],{"class":3309,"line":3442},[3307,6855,3470],{"emptyLinePlaceholder":3469},[3307,6857,6858,6860,6862,6864,6866],{"class":3309,"line":3453},[3307,6859,3346],{"class":3313},[3307,6861,3349],{"class":3317},[3307,6863,3352],{"class":3321},[3307,6865,3326],{"class":3325},[3307,6867,6868],{"class":3329},"\"Правильно: всі деструктивні дії — червоного кольору\"\n",[3307,6870,6871,6873,6875,6877,6879,6881,6883],{"class":3309,"line":3466},[3307,6872,3839],{"class":3321},[3307,6874,3326],{"class":3325},[3307,6876,6238],{"class":3329},[3307,6878,3322],{"class":3321},[3307,6880,3326],{"class":3325},[3307,6882,3506],{"class":3329},[3307,6884,3379],{"class":3313},[3307,6886,6887,6889,6891,6893,6895,6897,6899,6901,6903],{"class":3309,"line":3473},[3307,6888,3346],{"class":3313},[3307,6890,3318],{"class":3317},[3307,6892,6727],{"class":3321},[3307,6894,3326],{"class":3325},[3307,6896,6732],{"class":3329},[3307,6898,3333],{"class":3321},[3307,6900,3326],{"class":3325},[3307,6902,4494],{"class":3329},[3307,6904,3340],{"class":3313},[3307,6906,6907,6909,6911,6913,6915,6918,6920,6922,6924,6926,6928,6931,6933,6935,6937],{"class":3309,"line":3487},[3307,6908,3878],{"class":3313},[3307,6910,3387],{"class":3317},[3307,6912,3390],{"class":3321},[3307,6914,3326],{"class":3325},[3307,6916,6917],{"class":3329},"\"Видалити\"",[3307,6919,4489],{"class":3321},[3307,6921,3326],{"class":3325},[3307,6923,6760],{"class":3329},[3307,6925,6763],{"class":3321},[3307,6927,3326],{"class":3325},[3307,6929,6930],{"class":3329},"\"#EF4444\"",[3307,6932,4533],{"class":3321},[3307,6934,3326],{"class":3325},[3307,6936,6775],{"class":3329},[3307,6938,3379],{"class":3313},[3307,6940,6941,6943,6945,6947,6949,6952,6954,6956,6958,6960,6962,6964,6966,6968,6970],{"class":3309,"line":3511},[3307,6942,3878],{"class":3313},[3307,6944,3387],{"class":3317},[3307,6946,3390],{"class":3321},[3307,6948,3326],{"class":3325},[3307,6950,6951],{"class":3329},"\"Скасувати підписку\"",[3307,6953,4489],{"class":3321},[3307,6955,3326],{"class":3325},[3307,6957,6760],{"class":3329},[3307,6959,6763],{"class":3321},[3307,6961,3326],{"class":3325},[3307,6963,6930],{"class":3329},[3307,6965,4533],{"class":3321},[3307,6967,3326],{"class":3325},[3307,6969,6775],{"class":3329},[3307,6971,3379],{"class":3313},[3307,6973,6974,6976,6978,6980,6982,6985,6987,6989,6991,6993,6995,6997,6999,7001,7003],{"class":3309,"line":3525},[3307,6975,3878],{"class":3313},[3307,6977,3387],{"class":3317},[3307,6979,3390],{"class":3321},[3307,6981,3326],{"class":3325},[3307,6983,6984],{"class":3329},"\"Очистити все\"",[3307,6986,4489],{"class":3321},[3307,6988,3326],{"class":3325},[3307,6990,6760],{"class":3329},[3307,6992,6763],{"class":3321},[3307,6994,3326],{"class":3325},[3307,6996,6930],{"class":3329},[3307,6998,4533],{"class":3321},[3307,7000,3326],{"class":3325},[3307,7002,6775],{"class":3329},[3307,7004,3379],{"class":3313},[3307,7006,7007,7009,7011],{"class":3309,"line":3535},[3307,7008,3939],{"class":3313},[3307,7010,3318],{"class":3317},[3307,7012,3340],{"class":3313},[3307,7014,7015],{"class":3309,"line":3545},[3307,7016,3470],{"emptyLinePlaceholder":3469},[3307,7018,7019,7021,7023,7025,7027],{"class":3309,"line":3555},[3307,7020,3346],{"class":3313},[3307,7022,3349],{"class":3317},[3307,7024,3352],{"class":3321},[3307,7026,3326],{"class":3325},[3307,7028,7029],{"class":3329},"\"Неправильно: змішані кольори без логіки\"\n",[3307,7031,7032,7034,7036,7038,7040,7042,7044,7046,7048,7050],{"class":3309,"line":3566},[3307,7033,3839],{"class":3321},[3307,7035,3326],{"class":3325},[3307,7037,6238],{"class":3329},[3307,7039,4533],{"class":3321},[3307,7041,3326],{"class":3325},[3307,7043,6930],{"class":3329},[3307,7045,3322],{"class":3321},[3307,7047,3326],{"class":3325},[3307,7049,3506],{"class":3329},[3307,7051,3379],{"class":3313},[3307,7053,7054,7056,7058,7060,7062,7064,7066,7068,7070],{"class":3309,"line":3577},[3307,7055,3346],{"class":3313},[3307,7057,3318],{"class":3317},[3307,7059,6727],{"class":3321},[3307,7061,3326],{"class":3325},[3307,7063,6732],{"class":3329},[3307,7065,3333],{"class":3321},[3307,7067,3326],{"class":3325},[3307,7069,4494],{"class":3329},[3307,7071,3340],{"class":3313},[3307,7073,7074,7076,7078,7080,7082,7084,7086,7088,7090,7092,7094,7096,7098,7100,7102],{"class":3309,"line":3588},[3307,7075,3878],{"class":3313},[3307,7077,3387],{"class":3317},[3307,7079,3390],{"class":3321},[3307,7081,3326],{"class":3325},[3307,7083,6753],{"class":3329},[3307,7085,4489],{"class":3321},[3307,7087,3326],{"class":3325},[3307,7089,6760],{"class":3329},[3307,7091,6763],{"class":3321},[3307,7093,3326],{"class":3325},[3307,7095,6930],{"class":3329},[3307,7097,4533],{"class":3321},[3307,7099,3326],{"class":3325},[3307,7101,6775],{"class":3329},[3307,7103,3379],{"class":3313},[3307,7105,7106,7108,7110,7112,7114,7116,7118,7120,7122,7124,7126,7128,7130,7132,7134],{"class":3309,"line":3593},[3307,7107,3878],{"class":3313},[3307,7109,3387],{"class":3317},[3307,7111,3390],{"class":3321},[3307,7113,3326],{"class":3325},[3307,7115,6917],{"class":3329},[3307,7117,4489],{"class":3321},[3307,7119,3326],{"class":3325},[3307,7121,6760],{"class":3329},[3307,7123,6763],{"class":3321},[3307,7125,3326],{"class":3325},[3307,7127,6768],{"class":3329},[3307,7129,4533],{"class":3321},[3307,7131,3326],{"class":3325},[3307,7133,6775],{"class":3329},[3307,7135,3379],{"class":3313},[3307,7137,7138,7140,7142,7144,7146,7149,7151,7153,7155,7157,7159,7162,7164,7166,7168],{"class":3309,"line":3607},[3307,7139,3878],{"class":3313},[3307,7141,3387],{"class":3317},[3307,7143,3390],{"class":3321},[3307,7145,3326],{"class":3325},[3307,7147,7148],{"class":3329},"\"Скасувати\"",[3307,7150,4489],{"class":3321},[3307,7152,3326],{"class":3325},[3307,7154,6760],{"class":3329},[3307,7156,6763],{"class":3321},[3307,7158,3326],{"class":3325},[3307,7160,7161],{"class":3329},"\"#10B981\"",[3307,7163,4533],{"class":3321},[3307,7165,3326],{"class":3325},[3307,7167,6775],{"class":3329},[3307,7169,3379],{"class":3313},[3307,7171,7172,7174,7176],{"class":3309,"line":3630},[3307,7173,3939],{"class":3313},[3307,7175,3318],{"class":3317},[3307,7177,3340],{"class":3313},[3307,7179,7180,7182,7184],{"class":3309,"line":3644},[3307,7181,3695],{"class":3313},[3307,7183,3318],{"class":3317},[3307,7185,3340],{"class":3313},[3019,7187,7189],{"id":7188},"принцип-продовження-continuity","Принцип продовження (Continuity)",[3024,7191,7192],{},"Око природно слідує за лініями, кривими та напрямками. Елементи, що розташовані вздовж лінії або кривої, сприймаються як пов'язані.",[3024,7194,7195,7198],{},[2958,7196,7197],{},"Приклад у UI",": Форма з вертикальним розташуванням полів (Label зверху, TextBox знизу, Label зверху, TextBox знизу) створює вертикальну \"лінію читання\". Користувач інстинктивно рухається зверху вниз. Якщо раптом одне поле розташоване горизонтально (Label зліва, TextBox справа) — це порушує ритм і змушує користувача зупинитись.",[3019,7200,7202],{"id":7201},"принцип-замкнутості-closure","Принцип замкнутості (Closure)",[3024,7204,7205],{},"Мозок схильний \"добудовувати\" неповні форми до цілісних об'єктів. Ми бачимо коло, навіть якщо намальовано лише три чверті кола.",[3024,7207,7208,7210],{},[2958,7209,7197],{},": Іконка \"гамбургер-меню\" (три горизонтальні лінії) не є буквальним зображенням меню, але мозок \"добудовує\" асоціацію з списком. Іконка \"лупа\" для пошуку — це не буквальна лупа, але форма кола з ручкою миттєво розпізнається.",[3019,7212,7214],{"id":7213},"принцип-фігури-та-фону-figure-ground","Принцип фігури та фону (Figure-Ground)",[3024,7216,7217],{},"Мозок автоматично розділяє візуальне поле на \"фігуру\" (об'єкт уваги) та \"фон\" (контекст). Елементи з вищим контрастом, чіткими межами та меншою площею сприймаються як фігура.",[3024,7219,7220,7222],{},[2958,7221,7197],{},": Модальне вікно (діалог) з напівпрозорим темним фоном позаду. Діалог — це фігура (світлий, чіткий, у центрі), фон — це контекст (темний, розмитий, неактивний). Це чітко сигналізує користувачу: \"зосередься на діалозі, решта зараз не важлива\".",[3296,7224,7226],{"title":7225},"Принцип фігури та фону: модальний діалог",[3238,7227,7229],{"className":3301,"code":7228,"language":3303,"meta":3246,"style":3246},"\u003CGrid>\n  \u003C!-- Фон: напівпрозорий темний шар -->\n  \u003CBorder Background=\"#80000000\" Opacity=\"0.6\">\n    \u003CTextBlock Text=\"Основний вміст застосунку (неактивний)\"\n               HorizontalAlignment=\"Center\"\n               VerticalAlignment=\"Center\"\n               FontSize=\"18\"\n               Foreground=\"#6B7280\"/>\n  \u003C/Border>\n\n  \u003C!-- Фігура: модальний діалог -->\n  \u003CBorder Width=\"320\" Height=\"180\"\n          Background=\"White\"\n          CornerRadius=\"12\"\n          Padding=\"24\"\n          HorizontalAlignment=\"Center\"\n          VerticalAlignment=\"Center\">\n    \u003CStackPanel Spacing=\"16\">\n      \u003CTextBlock Text=\"Підтвердження дії\"\n                 FontSize=\"18\"\n                 FontWeight=\"Bold\"\n                 Foreground=\"#111827\"/>\n      \n      \u003CTextBlock Text=\"Ви впевнені, що хочете видалити цей елемент? Цю дію неможливо скасувати.\"\n                 FontSize=\"14\"\n                 Foreground=\"#374151\"\n                 TextWrapping=\"Wrap\"/>\n      \n      \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"12\" HorizontalAlignment=\"Right\" Margin=\"0,8,0,0\">\n        \u003CButton Content=\"Скасувати\" Padding=\"16,8\" Background=\"Transparent\" BorderBrush=\"#D1D5DB\" BorderThickness=\"1\"/>\n        \u003CButton Content=\"Видалити\" Padding=\"16,8\" Background=\"#EF4444\" Foreground=\"White\"/>\n      \u003C/StackPanel>\n    \u003C/StackPanel>\n  \u003C/Border>\n\u003C/Grid>\n",[2963,7230,7231,7240,7245,7268,7281,7291,7300,7308,7319,7327,7331,7336,7358,7366,7375,7384,7392,7404,7418,7431,7439,7447,7457,7461,7474,7482,7490,7500,7504,7538,7579,7611,7620,7628,7636],{"__ignoreMap":3246},[3307,7232,7233,7235,7238],{"class":3309,"line":3310},[3307,7234,3314],{"class":3313},[3307,7236,7237],{"class":3317},"Grid",[3307,7239,3340],{"class":3313},[3307,7241,7242],{"class":3309,"line":3343},[3307,7243,7244],{"class":6191},"  \u003C!-- Фон: напівпрозорий темний шар -->\n",[3307,7246,7247,7249,7251,7253,7255,7258,7261,7263,7266],{"class":3309,"line":3360},[3307,7248,3346],{"class":3313},[3307,7250,4470],{"class":3317},[3307,7252,6763],{"class":3321},[3307,7254,3326],{"class":3325},[3307,7256,7257],{"class":3329},"\"#80000000\"",[3307,7259,7260],{"class":3321}," Opacity",[3307,7262,3326],{"class":3325},[3307,7264,7265],{"class":3329},"\"0.6\"",[3307,7267,3340],{"class":3313},[3307,7269,7270,7272,7274,7276,7278],{"class":3309,"line":3382},[3307,7271,3878],{"class":3313},[3307,7273,3349],{"class":3317},[3307,7275,3352],{"class":3321},[3307,7277,3326],{"class":3325},[3307,7279,7280],{"class":3329},"\"Основний вміст застосунку (неактивний)\"\n",[3307,7282,7283,7286,7288],{"class":3309,"line":3398},[3307,7284,7285],{"class":3321},"               HorizontalAlignment",[3307,7287,3326],{"class":3325},[3307,7289,7290],{"class":3329},"\"Center\"\n",[3307,7292,7293,7296,7298],{"class":3309,"line":3409},[3307,7294,7295],{"class":3321},"               VerticalAlignment",[3307,7297,3326],{"class":3325},[3307,7299,7290],{"class":3329},[3307,7301,7302,7304,7306],{"class":3309,"line":3420},[3307,7303,6224],{"class":3321},[3307,7305,3326],{"class":3325},[3307,7307,5708],{"class":3329},[3307,7309,7310,7313,7315,7317],{"class":3309,"line":3431},[3307,7311,7312],{"class":3321},"               Foreground",[3307,7314,3326],{"class":3325},[3307,7316,5932],{"class":3329},[3307,7318,3379],{"class":3313},[3307,7320,7321,7323,7325],{"class":3309,"line":3442},[3307,7322,3939],{"class":3313},[3307,7324,4470],{"class":3317},[3307,7326,3340],{"class":3313},[3307,7328,7329],{"class":3309,"line":3453},[3307,7330,3470],{"emptyLinePlaceholder":3469},[3307,7332,7333],{"class":3309,"line":3466},[3307,7334,7335],{"class":6191},"  \u003C!-- Фігура: модальний діалог -->\n",[3307,7337,7338,7340,7342,7345,7347,7350,7353,7355],{"class":3309,"line":3473},[3307,7339,3346],{"class":3313},[3307,7341,4470],{"class":3317},[3307,7343,7344],{"class":3321}," Width",[3307,7346,3326],{"class":3325},[3307,7348,7349],{"class":3329},"\"320\"",[3307,7351,7352],{"class":3321}," Height",[3307,7354,3326],{"class":3325},[3307,7356,7357],{"class":3329},"\"180\"\n",[3307,7359,7360,7362,7364],{"class":3309,"line":3487},[3307,7361,3434],{"class":3321},[3307,7363,3326],{"class":3325},[3307,7365,3450],{"class":3329},[3307,7367,7368,7371,7373],{"class":3309,"line":3511},[3307,7369,7370],{"class":3321},"          CornerRadius",[3307,7372,3326],{"class":3325},[3307,7374,5500],{"class":3329},[3307,7376,7377,7379,7381],{"class":3309,"line":3525},[3307,7378,3401],{"class":3321},[3307,7380,3326],{"class":3325},[3307,7382,7383],{"class":3329},"\"24\"\n",[3307,7385,7386,7388,7390],{"class":3309,"line":3535},[3307,7387,3456],{"class":3321},[3307,7389,3326],{"class":3325},[3307,7391,7290],{"class":3329},[3307,7393,7394,7397,7399,7402],{"class":3309,"line":3545},[3307,7395,7396],{"class":3321},"          VerticalAlignment",[3307,7398,3326],{"class":3325},[3307,7400,7401],{"class":3329},"\"Center\"",[3307,7403,3340],{"class":3313},[3307,7405,7406,7408,7410,7412,7414,7416],{"class":3309,"line":3555},[3307,7407,3878],{"class":3313},[3307,7409,3318],{"class":3317},[3307,7411,3333],{"class":3321},[3307,7413,3326],{"class":3325},[3307,7415,3819],{"class":3329},[3307,7417,3340],{"class":3313},[3307,7419,7420,7422,7424,7426,7428],{"class":3309,"line":3566},[3307,7421,4016],{"class":3313},[3307,7423,3349],{"class":3317},[3307,7425,3352],{"class":3321},[3307,7427,3326],{"class":3325},[3307,7429,7430],{"class":3329},"\"Підтвердження дії\"\n",[3307,7432,7433,7435,7437],{"class":3309,"line":3577},[3307,7434,5703],{"class":3321},[3307,7436,3326],{"class":3325},[3307,7438,5708],{"class":3329},[3307,7440,7441,7443,7445],{"class":3309,"line":3588},[3307,7442,5713],{"class":3321},[3307,7444,3326],{"class":3325},[3307,7446,3428],{"class":3329},[3307,7448,7449,7451,7453,7455],{"class":3309,"line":3593},[3307,7450,5722],{"class":3321},[3307,7452,3326],{"class":3325},[3307,7454,5727],{"class":3329},[3307,7456,3379],{"class":3313},[3307,7458,7459],{"class":3309,"line":3607},[3307,7460,5734],{"class":3325},[3307,7462,7463,7465,7467,7469,7471],{"class":3309,"line":3630},[3307,7464,4016],{"class":3313},[3307,7466,3349],{"class":3317},[3307,7468,3352],{"class":3321},[3307,7470,3326],{"class":3325},[3307,7472,7473],{"class":3329},"\"Ви впевнені, що хочете видалити цей елемент? Цю дію неможливо скасувати.\"\n",[3307,7475,7476,7478,7480],{"class":3309,"line":3644},[3307,7477,5703],{"class":3321},[3307,7479,3326],{"class":3325},[3307,7481,3542],{"class":3329},[3307,7483,7484,7486,7488],{"class":3309,"line":3653},[3307,7485,5722],{"class":3321},[3307,7487,3326],{"class":3325},[3307,7489,5764],{"class":3329},[3307,7491,7492,7494,7496,7498],{"class":3309,"line":3662},[3307,7493,5769],{"class":3321},[3307,7495,3326],{"class":3325},[3307,7497,5278],{"class":3329},[3307,7499,3379],{"class":3313},[3307,7501,7502],{"class":3309,"line":3672},[3307,7503,5734],{"class":3325},[3307,7505,7506,7508,7510,7512,7514,7516,7518,7520,7522,7525,7527,7530,7532,7534,7536],{"class":3309,"line":3681},[3307,7507,4016],{"class":3313},[3307,7509,3318],{"class":3317},[3307,7511,6727],{"class":3321},[3307,7513,3326],{"class":3325},[3307,7515,6732],{"class":3329},[3307,7517,3333],{"class":3321},[3307,7519,3326],{"class":3325},[3307,7521,4494],{"class":3329},[3307,7523,7524],{"class":3321}," HorizontalAlignment",[3307,7526,3326],{"class":3325},[3307,7528,7529],{"class":3329},"\"Right\"",[3307,7531,3322],{"class":3321},[3307,7533,3326],{"class":3325},[3307,7535,5517],{"class":3329},[3307,7537,3340],{"class":3313},[3307,7539,7540,7543,7545,7547,7549,7551,7553,7555,7557,7559,7561,7564,7566,7568,7571,7573,7575,7577],{"class":3309,"line":3692},[3307,7541,7542],{"class":3313},"        \u003C",[3307,7544,3387],{"class":3317},[3307,7546,3390],{"class":3321},[3307,7548,3326],{"class":3325},[3307,7550,7148],{"class":3329},[3307,7552,4489],{"class":3321},[3307,7554,3326],{"class":3325},[3307,7556,6760],{"class":3329},[3307,7558,6763],{"class":3321},[3307,7560,3326],{"class":3325},[3307,7562,7563],{"class":3329},"\"Transparent\"",[3307,7565,4473],{"class":3321},[3307,7567,3326],{"class":3325},[3307,7569,7570],{"class":3329},"\"#D1D5DB\"",[3307,7572,4481],{"class":3321},[3307,7574,3326],{"class":3325},[3307,7576,4486],{"class":3329},[3307,7578,3379],{"class":3313},[3307,7580,7581,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607,7609],{"class":3309,"line":4611},[3307,7582,7542],{"class":3313},[3307,7584,3387],{"class":3317},[3307,7586,3390],{"class":3321},[3307,7588,3326],{"class":3325},[3307,7590,6917],{"class":3329},[3307,7592,4489],{"class":3321},[3307,7594,3326],{"class":3325},[3307,7596,6760],{"class":3329},[3307,7598,6763],{"class":3321},[3307,7600,3326],{"class":3325},[3307,7602,6930],{"class":3329},[3307,7604,4533],{"class":3321},[3307,7606,3326],{"class":3325},[3307,7608,6775],{"class":3329},[3307,7610,3379],{"class":3313},[3307,7612,7613,7616,7618],{"class":3309,"line":4644},[3307,7614,7615],{"class":3313},"      \u003C/",[3307,7617,3318],{"class":3317},[3307,7619,3340],{"class":3313},[3307,7621,7622,7624,7626],{"class":3309,"line":4659},[3307,7623,4098],{"class":3313},[3307,7625,3318],{"class":3317},[3307,7627,3340],{"class":3313},[3307,7629,7630,7632,7634],{"class":3309,"line":4687},[3307,7631,3939],{"class":3313},[3307,7633,4470],{"class":3317},[3307,7635,3340],{"class":3313},[3307,7637,7638,7640,7642],{"class":3309,"line":4702},[3307,7639,3695],{"class":3313},[3307,7641,7237],{"class":3317},[3307,7643,3340],{"class":3313},[3205,7645],{},[3014,7647,7649],{"id":7648},"affordance-та-feedback-як-інтерфейс-розмовляє","Affordance та Feedback: як інтерфейс \"розмовляє\"",[3019,7651,7653],{"id":7652},"affordance-підказки-до-дії","Affordance: \"підказки до дії\"",[3024,7655,7656,7658],{},[2958,7657,2972],{}," (можливість дії) — це властивість об'єкта, що підказує, як з ним взаємодіяти. Кнопка виглядає як щось, що можна натиснути. Поле введення виглядає як щось, куди можна ввести текст. Повзунок виглядає як щось, що можна перетягнути.",[3024,7660,7661],{},"Дон Норман (Don Norman), автор книги \"The Design of Everyday Things\", розрізняє два типи affordance:",[3275,7663,7664,7674],{},[3061,7665,7666,7669,7670,7673],{},[2958,7667,7668],{},"Реальний affordance"," (Real Affordance): Фізична можливість дії. Кнопка у WPF ",[2958,7671,7672],{},"реально"," може бути натиснута — вона реагує на клік.",[3061,7675,7676,7679,7680,7683],{},[2958,7677,7678],{},"Сприйманий affordance"," (Perceived Affordance): Візуальна підказка, що дія можлива. Кнопка ",[2958,7681,7682],{},"виглядає"," як щось, що можна натиснути (опукла форма, тінь, hover-ефект).",[3024,7685,7686,7689,7690,7693],{},[2958,7687,7688],{},"Проблема плоского дизайну (Flat Design)",": У прагненні до мінімалізму багато сучасних інтерфейсів втратили сприйманий affordance. Коли все плоске — важко зрозуміти, що є кнопкою, а що просто текстом. Рішення — використовувати ",[2958,7691,7692],{},"інтерактивні стани"," (hover, pressed) для відновлення affordance.",[3296,7695,7697],{"title":7696},"Affordance: кнопка з чіткими інтерактивними станами",[3238,7698,7700],{"className":3301,"code":7699,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"16\">\n  \u003CTextBlock Text=\"Кнопка з чітким affordance (виглядає клікабельною):\"\n             FontWeight=\"SemiBold\"/>\n  \u003CButton Content=\"Натисни мене\"\n          Padding=\"20,12\"\n          FontSize=\"15\"\n          Background=\"#3B82F6\"\n          Foreground=\"White\"\n          BorderThickness=\"0\"\n          CornerRadius=\"6\"\n          HorizontalAlignment=\"Left\"/>\n\n  \u003CTextBlock Text=\"Текст без affordance (не виглядає клікабельним):\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CTextBlock Text=\"Натисни мене\"\n             FontSize=\"15\"\n             Foreground=\"#3B82F6\"\n             HorizontalAlignment=\"Left\"/>\n\n  \u003CTextBlock Text=\"Гіперпосилання (affordance через підкреслення):\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CTextBlock HorizontalAlignment=\"Left\">\n    \u003CHyperlink NavigateUri=\"https://example.com\">\n      \u003CRun Text=\"Натисни мене\" FontSize=\"15\"/>\n    \u003C/Hyperlink>\n  \u003C/TextBlock>\n\u003C/StackPanel>\n",[2963,7701,7702,7722,7735,7745,7758,7767,7776,7784,7792,7801,7810,7820,7824,7837,7853,7865,7873,7881,7892,7896,7909,7925,7939,7956,7978,7986,7994],{"__ignoreMap":3246},[3307,7703,7704,7706,7708,7710,7712,7714,7716,7718,7720],{"class":3309,"line":3310},[3307,7705,3314],{"class":3313},[3307,7707,3318],{"class":3317},[3307,7709,3322],{"class":3321},[3307,7711,3326],{"class":3325},[3307,7713,3330],{"class":3329},[3307,7715,3333],{"class":3321},[3307,7717,3326],{"class":3325},[3307,7719,3819],{"class":3329},[3307,7721,3340],{"class":3313},[3307,7723,7724,7726,7728,7730,7732],{"class":3309,"line":3343},[3307,7725,3346],{"class":3313},[3307,7727,3349],{"class":3317},[3307,7729,3352],{"class":3321},[3307,7731,3326],{"class":3325},[3307,7733,7734],{"class":3329},"\"Кнопка з чітким affordance (виглядає клікабельною):\"\n",[3307,7736,7737,7739,7741,7743],{"class":3309,"line":3360},[3307,7738,3839],{"class":3321},[3307,7740,3326],{"class":3325},[3307,7742,6238],{"class":3329},[3307,7744,3379],{"class":3313},[3307,7746,7747,7749,7751,7753,7755],{"class":3309,"line":3382},[3307,7748,3346],{"class":3313},[3307,7750,3387],{"class":3317},[3307,7752,3390],{"class":3321},[3307,7754,3326],{"class":3325},[3307,7756,7757],{"class":3329},"\"Натисни мене\"\n",[3307,7759,7760,7762,7764],{"class":3309,"line":3398},[3307,7761,3401],{"class":3321},[3307,7763,3326],{"class":3325},[3307,7765,7766],{"class":3329},"\"20,12\"\n",[3307,7768,7769,7771,7773],{"class":3309,"line":3409},[3307,7770,3412],{"class":3321},[3307,7772,3326],{"class":3325},[3307,7774,7775],{"class":3329},"\"15\"\n",[3307,7777,7778,7780,7782],{"class":3309,"line":3420},[3307,7779,3434],{"class":3321},[3307,7781,3326],{"class":3325},[3307,7783,3439],{"class":3329},[3307,7785,7786,7788,7790],{"class":3309,"line":3431},[3307,7787,3445],{"class":3321},[3307,7789,3326],{"class":3325},[3307,7791,3450],{"class":3329},[3307,7793,7794,7796,7798],{"class":3309,"line":3442},[3307,7795,3569],{"class":3321},[3307,7797,3326],{"class":3325},[3307,7799,7800],{"class":3329},"\"0\"\n",[3307,7802,7803,7805,7807],{"class":3309,"line":3453},[3307,7804,7370],{"class":3321},[3307,7806,3326],{"class":3325},[3307,7808,7809],{"class":3329},"\"6\"\n",[3307,7811,7812,7814,7816,7818],{"class":3309,"line":3466},[3307,7813,3456],{"class":3321},[3307,7815,3326],{"class":3325},[3307,7817,3461],{"class":3329},[3307,7819,3379],{"class":3313},[3307,7821,7822],{"class":3309,"line":3473},[3307,7823,3470],{"emptyLinePlaceholder":3469},[3307,7825,7826,7828,7830,7832,7834],{"class":3309,"line":3487},[3307,7827,3346],{"class":3313},[3307,7829,3349],{"class":3317},[3307,7831,3352],{"class":3321},[3307,7833,3326],{"class":3325},[3307,7835,7836],{"class":3329},"\"Текст без affordance (не виглядає клікабельним):\"\n",[3307,7838,7839,7841,7843,7845,7847,7849,7851],{"class":3309,"line":3511},[3307,7840,3839],{"class":3321},[3307,7842,3326],{"class":3325},[3307,7844,6238],{"class":3329},[3307,7846,3322],{"class":3321},[3307,7848,3326],{"class":3325},[3307,7850,3506],{"class":3329},[3307,7852,3379],{"class":3313},[3307,7854,7855,7857,7859,7861,7863],{"class":3309,"line":3525},[3307,7856,3346],{"class":3313},[3307,7858,3349],{"class":3317},[3307,7860,3352],{"class":3321},[3307,7862,3326],{"class":3325},[3307,7864,7757],{"class":3329},[3307,7866,7867,7869,7871],{"class":3309,"line":3535},[3307,7868,5219],{"class":3321},[3307,7870,3326],{"class":3325},[3307,7872,7775],{"class":3329},[3307,7874,7875,7877,7879],{"class":3309,"line":3545},[3307,7876,3363],{"class":3321},[3307,7878,3326],{"class":3325},[3307,7880,3439],{"class":3329},[3307,7882,7883,7886,7888,7890],{"class":3309,"line":3555},[3307,7884,7885],{"class":3321},"             HorizontalAlignment",[3307,7887,3326],{"class":3325},[3307,7889,3461],{"class":3329},[3307,7891,3379],{"class":3313},[3307,7893,7894],{"class":3309,"line":3566},[3307,7895,3470],{"emptyLinePlaceholder":3469},[3307,7897,7898,7900,7902,7904,7906],{"class":3309,"line":3577},[3307,7899,3346],{"class":3313},[3307,7901,3349],{"class":3317},[3307,7903,3352],{"class":3321},[3307,7905,3326],{"class":3325},[3307,7907,7908],{"class":3329},"\"Гіперпосилання (affordance через підкреслення):\"\n",[3307,7910,7911,7913,7915,7917,7919,7921,7923],{"class":3309,"line":3588},[3307,7912,3839],{"class":3321},[3307,7914,3326],{"class":3325},[3307,7916,6238],{"class":3329},[3307,7918,3322],{"class":3321},[3307,7920,3326],{"class":3325},[3307,7922,3506],{"class":3329},[3307,7924,3379],{"class":3313},[3307,7926,7927,7929,7931,7933,7935,7937],{"class":3309,"line":3593},[3307,7928,3346],{"class":3313},[3307,7930,3349],{"class":3317},[3307,7932,7524],{"class":3321},[3307,7934,3326],{"class":3325},[3307,7936,3461],{"class":3329},[3307,7938,3340],{"class":3313},[3307,7940,7941,7943,7946,7949,7951,7954],{"class":3309,"line":3607},[3307,7942,3878],{"class":3313},[3307,7944,7945],{"class":3317},"Hyperlink",[3307,7947,7948],{"class":3321}," NavigateUri",[3307,7950,3326],{"class":3325},[3307,7952,7953],{"class":3329},"\"https://example.com\"",[3307,7955,3340],{"class":3313},[3307,7957,7958,7960,7962,7964,7966,7969,7971,7973,7976],{"class":3309,"line":3630},[3307,7959,4016],{"class":3313},[3307,7961,5454],{"class":3317},[3307,7963,3352],{"class":3321},[3307,7965,3326],{"class":3325},[3307,7967,7968],{"class":3329},"\"Натисни мене\"",[3307,7970,3371],{"class":3321},[3307,7972,3326],{"class":3325},[3307,7974,7975],{"class":3329},"\"15\"",[3307,7977,3379],{"class":3313},[3307,7979,7980,7982,7984],{"class":3309,"line":3644},[3307,7981,4098],{"class":3313},[3307,7983,7945],{"class":3317},[3307,7985,3340],{"class":3313},[3307,7987,7988,7990,7992],{"class":3309,"line":3653},[3307,7989,3939],{"class":3313},[3307,7991,3349],{"class":3317},[3307,7993,3340],{"class":3313},[3307,7995,7996,7998,8000],{"class":3309,"line":3662},[3307,7997,3695],{"class":3313},[3307,7999,3318],{"class":3317},[3307,8001,3340],{"class":3313},[2955,8003,8004,8005,8008],{},"У WPF кнопки за замовчуванням мають чіткий affordance завдяки стандартній темі (Aero у Windows 7, Metro у Windows 8+). Але якщо ви створюєте власні стилі — ",[2958,8006,8007],{},"обов'язково"," додайте hover-стан (зміна кольору при наведенні) та pressed-стан (зміна кольору при натисканні). Без цього користувач не зрозуміє, що елемент інтерактивний.",[3019,8010,8012],{"id":8011},"feedback-зворотний-звязок","Feedback: зворотний зв'язок",[3024,8014,8015,8017,8018,3227,8021,8024],{},[2958,8016,2975],{}," — це реакція системи на дію користувача. Кожна дія має викликати ",[2958,8019,8020],{},"миттєвий",[2958,8022,8023],{},"зрозумілий"," зворотний зв'язок. Без feedback користувач не знає, чи система \"почула\" його дію, чи потрібно натиснути ще раз, чи щось пішло не так.",[3024,8026,8027,3236],{},[2958,8028,8029],{},"Типи feedback у десктопних застосунках",[3275,8031,8032,8038,8044,8050],{},[3061,8033,8034,8037],{},[2958,8035,8036],{},"Візуальний feedback",": Зміна кольору кнопки при наведенні/натисканні, анімація завантаження, прогрес-бар, зміна курсору (стрілка → рука → годинник).",[3061,8039,8040,8043],{},[2958,8041,8042],{},"Текстовий feedback",": Повідомлення про успіх (\"Файл збережено\"), помилку (\"Невірний формат email\"), попередження (\"Незбережені зміни будуть втрачені\").",[3061,8045,8046,8049],{},[2958,8047,8048],{},"Звуковий feedback",": Звук при натисканні кнопки, звук помилки (у Windows — \"ding\"), звук сповіщення. Рідко використовується у десктопних застосунках, але критичний для accessibility (користувачі зі слабким зором).",[3061,8051,8052,8055],{},[2958,8053,8054],{},"Тактильний feedback",": Вібрація (на мобільних пристроях). Не застосовується у десктопних застосунках.",[3024,8057,8058,8061],{},[2958,8059,8060],{},"Правило 0.1-1-10 секунд"," (Jakob Nielsen):",[3058,8063,8064,8070,8076],{},[3061,8065,8066,8069],{},[2958,8067,8068],{},"0.1 секунди",": Межа миттєвої реакції. Якщо дія виконується швидше — feedback не потрібен (користувач відчуває пряму маніпуляцію).",[3061,8071,8072,8075],{},[2958,8073,8074],{},"1 секунда",": Межа безперервного потоку думок. Якщо дія виконується довше — покажіть індикатор \"система працює\" (курсор-годинник, спінер).",[3061,8077,8078,8081],{},[2958,8079,8080],{},"10 секунд",": Межа утримання уваги. Якщо дія виконується довше — покажіть прогрес-бар з відсотками або часом, що залишився.",[3296,8083,8085],{"title":8084},"Feedback: індикатор завантаження",[3238,8086,8088],{"className":3301,"code":8087,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"20\">\n  \u003CTextBlock Text=\"Дія виконується \u003C 1 сек — простий спінер:\"\n             FontWeight=\"SemiBold\"/>\n  \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"12\">\n    \u003CProgressBar IsIndeterminate=\"True\" Width=\"200\" Height=\"4\"/>\n    \u003CTextBlock Text=\"Завантаження...\" Foreground=\"#6B7280\" VerticalAlignment=\"Center\"/>\n  \u003C/StackPanel>\n\n  \u003CTextBlock Text=\"Дія виконується > 10 сек — прогрес-бар з відсотками:\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CStackPanel Spacing=\"8\">\n    \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"8\">\n      \u003CTextBlock Text=\"Завантаження файлів...\" FontSize=\"14\"/>\n      \u003CTextBlock Text=\"67%\" FontWeight=\"Bold\" Foreground=\"#3B82F6\"/>\n    \u003C/StackPanel>\n    \u003CProgressBar Value=\"67\" Maximum=\"100\" Height=\"8\"/>\n    \u003CTextBlock Text=\"2 з 3 файлів завантажено\" FontSize=\"12\" Foreground=\"#6B7280\"/>\n  \u003C/StackPanel>\n\n  \u003CTextBlock Text=\"Успішне завершення — зелене повідомлення:\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CBorder Background=\"#D1FAE5\" BorderBrush=\"#10B981\" BorderThickness=\"1\" \n          Padding=\"12\" CornerRadius=\"6\">\n    \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"8\">\n      \u003CTextBlock Text=\"✓\" FontSize=\"16\" Foreground=\"#10B981\" FontWeight=\"Bold\"/>\n      \u003CTextBlock Text=\"Файл успішно збережено\" Foreground=\"#065F46\" VerticalAlignment=\"Center\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\n  \u003CTextBlock Text=\"Помилка — червоне повідомлення:\"\n             FontWeight=\"SemiBold\" Margin=\"0,12,0,0\"/>\n  \u003CBorder Background=\"#FEE2E2\" BorderBrush=\"#EF4444\" BorderThickness=\"1\" \n          Padding=\"12\" CornerRadius=\"6\">\n    \u003CStackPanel Orientation=\"Horizontal\" Spacing=\"8\">\n      \u003CTextBlock Text=\"✕\" FontSize=\"16\" Foreground=\"#EF4444\" FontWeight=\"Bold\"/>\n      \u003CTextBlock Text=\"Не вдалося зберегти файл. Перевірте права доступу.\" \n                 Foreground=\"#991B1B\" TextWrapping=\"Wrap\" VerticalAlignment=\"Center\"/>\n    \u003C/StackPanel>\n  \u003C/Border>\n\u003C/StackPanel>\n",[2963,8089,8090,8110,8123,8133,8153,8182,8210,8218,8222,8235,8251,8265,8285,8306,8333,8341,8371,8398,8406,8410,8423,8439,8467,8484,8504,8537,8565,8573,8581,8585,8598,8614,8641,8657,8677,8710,8725,8749,8757,8765],{"__ignoreMap":3246},[3307,8091,8092,8094,8096,8098,8100,8102,8104,8106,8108],{"class":3309,"line":3310},[3307,8093,3314],{"class":3313},[3307,8095,3318],{"class":3317},[3307,8097,3322],{"class":3321},[3307,8099,3326],{"class":3325},[3307,8101,3330],{"class":3329},[3307,8103,3333],{"class":3321},[3307,8105,3326],{"class":3325},[3307,8107,3330],{"class":3329},[3307,8109,3340],{"class":3313},[3307,8111,8112,8114,8116,8118,8120],{"class":3309,"line":3343},[3307,8113,3346],{"class":3313},[3307,8115,3349],{"class":3317},[3307,8117,3352],{"class":3321},[3307,8119,3326],{"class":3325},[3307,8121,8122],{"class":3329},"\"Дія виконується \u003C 1 сек — простий спінер:\"\n",[3307,8124,8125,8127,8129,8131],{"class":3309,"line":3360},[3307,8126,3839],{"class":3321},[3307,8128,3326],{"class":3325},[3307,8130,6238],{"class":3329},[3307,8132,3379],{"class":3313},[3307,8134,8135,8137,8139,8141,8143,8145,8147,8149,8151],{"class":3309,"line":3382},[3307,8136,3346],{"class":3313},[3307,8138,3318],{"class":3317},[3307,8140,6727],{"class":3321},[3307,8142,3326],{"class":3325},[3307,8144,6732],{"class":3329},[3307,8146,3333],{"class":3321},[3307,8148,3326],{"class":3325},[3307,8150,4494],{"class":3329},[3307,8152,3340],{"class":3313},[3307,8154,8155,8157,8160,8163,8165,8167,8169,8171,8174,8176,8178,8180],{"class":3309,"line":3398},[3307,8156,3878],{"class":3313},[3307,8158,8159],{"class":3317},"ProgressBar",[3307,8161,8162],{"class":3321}," IsIndeterminate",[3307,8164,3326],{"class":3325},[3307,8166,3896],{"class":3329},[3307,8168,7344],{"class":3321},[3307,8170,3326],{"class":3325},[3307,8172,8173],{"class":3329},"\"200\"",[3307,8175,7352],{"class":3321},[3307,8177,3326],{"class":3325},[3307,8179,4254],{"class":3329},[3307,8181,3379],{"class":3313},[3307,8183,8184,8186,8188,8190,8192,8195,8197,8199,8201,8204,8206,8208],{"class":3309,"line":3409},[3307,8185,3878],{"class":3313},[3307,8187,3349],{"class":3317},[3307,8189,3352],{"class":3321},[3307,8191,3326],{"class":3325},[3307,8193,8194],{"class":3329},"\"Завантаження...\"",[3307,8196,4533],{"class":3321},[3307,8198,3326],{"class":3325},[3307,8200,5932],{"class":3329},[3307,8202,8203],{"class":3321}," VerticalAlignment",[3307,8205,3326],{"class":3325},[3307,8207,7401],{"class":3329},[3307,8209,3379],{"class":3313},[3307,8211,8212,8214,8216],{"class":3309,"line":3420},[3307,8213,3939],{"class":3313},[3307,8215,3318],{"class":3317},[3307,8217,3340],{"class":3313},[3307,8219,8220],{"class":3309,"line":3431},[3307,8221,3470],{"emptyLinePlaceholder":3469},[3307,8223,8224,8226,8228,8230,8232],{"class":3309,"line":3442},[3307,8225,3346],{"class":3313},[3307,8227,3349],{"class":3317},[3307,8229,3352],{"class":3321},[3307,8231,3326],{"class":3325},[3307,8233,8234],{"class":3329},"\"Дія виконується > 10 сек — прогрес-бар з відсотками:\"\n",[3307,8236,8237,8239,8241,8243,8245,8247,8249],{"class":3309,"line":3453},[3307,8238,3839],{"class":3321},[3307,8240,3326],{"class":3325},[3307,8242,6238],{"class":3329},[3307,8244,3322],{"class":3321},[3307,8246,3326],{"class":3325},[3307,8248,3506],{"class":3329},[3307,8250,3379],{"class":3313},[3307,8252,8253,8255,8257,8259,8261,8263],{"class":3309,"line":3466},[3307,8254,3346],{"class":3313},[3307,8256,3318],{"class":3317},[3307,8258,3333],{"class":3321},[3307,8260,3326],{"class":3325},[3307,8262,3871],{"class":3329},[3307,8264,3340],{"class":3313},[3307,8266,8267,8269,8271,8273,8275,8277,8279,8281,8283],{"class":3309,"line":3473},[3307,8268,3878],{"class":3313},[3307,8270,3318],{"class":3317},[3307,8272,6727],{"class":3321},[3307,8274,3326],{"class":3325},[3307,8276,6732],{"class":3329},[3307,8278,3333],{"class":3321},[3307,8280,3326],{"class":3325},[3307,8282,3871],{"class":3329},[3307,8284,3340],{"class":3313},[3307,8286,8287,8289,8291,8293,8295,8298,8300,8302,8304],{"class":3309,"line":3487},[3307,8288,4016],{"class":3313},[3307,8290,3349],{"class":3317},[3307,8292,3352],{"class":3321},[3307,8294,3326],{"class":3325},[3307,8296,8297],{"class":3329},"\"Завантаження файлів...\"",[3307,8299,3371],{"class":3321},[3307,8301,3326],{"class":3325},[3307,8303,3851],{"class":3329},[3307,8305,3379],{"class":3313},[3307,8307,8308,8310,8312,8314,8316,8319,8321,8323,8325,8327,8329,8331],{"class":3309,"line":3511},[3307,8309,4016],{"class":3313},[3307,8311,3349],{"class":3317},[3307,8313,3352],{"class":3321},[3307,8315,3326],{"class":3325},[3307,8317,8318],{"class":3329},"\"67%\"",[3307,8320,5904],{"class":3321},[3307,8322,3326],{"class":3325},[3307,8324,3844],{"class":3329},[3307,8326,4533],{"class":3321},[3307,8328,3326],{"class":3325},[3307,8330,6768],{"class":3329},[3307,8332,3379],{"class":3313},[3307,8334,8335,8337,8339],{"class":3309,"line":3525},[3307,8336,4098],{"class":3313},[3307,8338,3318],{"class":3317},[3307,8340,3340],{"class":3313},[3307,8342,8343,8345,8347,8350,8352,8355,8358,8360,8363,8365,8367,8369],{"class":3309,"line":3535},[3307,8344,3878],{"class":3313},[3307,8346,8159],{"class":3317},[3307,8348,8349],{"class":3321}," Value",[3307,8351,3326],{"class":3325},[3307,8353,8354],{"class":3329},"\"67\"",[3307,8356,8357],{"class":3321}," Maximum",[3307,8359,3326],{"class":3325},[3307,8361,8362],{"class":3329},"\"100\"",[3307,8364,7352],{"class":3321},[3307,8366,3326],{"class":3325},[3307,8368,3871],{"class":3329},[3307,8370,3379],{"class":3313},[3307,8372,8373,8375,8377,8379,8381,8384,8386,8388,8390,8392,8394,8396],{"class":3309,"line":3545},[3307,8374,3878],{"class":3313},[3307,8376,3349],{"class":3317},[3307,8378,3352],{"class":3321},[3307,8380,3326],{"class":3325},[3307,8382,8383],{"class":3329},"\"2 з 3 файлів завантажено\"",[3307,8385,3371],{"class":3321},[3307,8387,3326],{"class":3325},[3307,8389,4494],{"class":3329},[3307,8391,4533],{"class":3321},[3307,8393,3326],{"class":3325},[3307,8395,5932],{"class":3329},[3307,8397,3379],{"class":3313},[3307,8399,8400,8402,8404],{"class":3309,"line":3555},[3307,8401,3939],{"class":3313},[3307,8403,3318],{"class":3317},[3307,8405,3340],{"class":3313},[3307,8407,8408],{"class":3309,"line":3566},[3307,8409,3470],{"emptyLinePlaceholder":3469},[3307,8411,8412,8414,8416,8418,8420],{"class":3309,"line":3577},[3307,8413,3346],{"class":3313},[3307,8415,3349],{"class":3317},[3307,8417,3352],{"class":3321},[3307,8419,3326],{"class":3325},[3307,8421,8422],{"class":3329},"\"Успішне завершення — зелене повідомлення:\"\n",[3307,8424,8425,8427,8429,8431,8433,8435,8437],{"class":3309,"line":3588},[3307,8426,3839],{"class":3321},[3307,8428,3326],{"class":3325},[3307,8430,6238],{"class":3329},[3307,8432,3322],{"class":3321},[3307,8434,3326],{"class":3325},[3307,8436,3506],{"class":3329},[3307,8438,3379],{"class":3313},[3307,8440,8441,8443,8445,8447,8449,8452,8454,8456,8458,8460,8462,8464],{"class":3309,"line":3593},[3307,8442,3346],{"class":3313},[3307,8444,4470],{"class":3317},[3307,8446,6763],{"class":3321},[3307,8448,3326],{"class":3325},[3307,8450,8451],{"class":3329},"\"#D1FAE5\"",[3307,8453,4473],{"class":3321},[3307,8455,3326],{"class":3325},[3307,8457,7161],{"class":3329},[3307,8459,4481],{"class":3321},[3307,8461,3326],{"class":3325},[3307,8463,4486],{"class":3329},[3307,8465,8466],{"class":3325}," \n",[3307,8468,8469,8471,8473,8475,8477,8479,8482],{"class":3309,"line":3607},[3307,8470,3401],{"class":3321},[3307,8472,3326],{"class":3325},[3307,8474,4494],{"class":3329},[3307,8476,4497],{"class":3321},[3307,8478,3326],{"class":3325},[3307,8480,8481],{"class":3329},"\"6\"",[3307,8483,3340],{"class":3313},[3307,8485,8486,8488,8490,8492,8494,8496,8498,8500,8502],{"class":3309,"line":3630},[3307,8487,3878],{"class":3313},[3307,8489,3318],{"class":3317},[3307,8491,6727],{"class":3321},[3307,8493,3326],{"class":3325},[3307,8495,6732],{"class":3329},[3307,8497,3333],{"class":3321},[3307,8499,3326],{"class":3325},[3307,8501,3871],{"class":3329},[3307,8503,3340],{"class":3313},[3307,8505,8506,8508,8510,8512,8514,8517,8519,8521,8523,8525,8527,8529,8531,8533,8535],{"class":3309,"line":3644},[3307,8507,4016],{"class":3313},[3307,8509,3349],{"class":3317},[3307,8511,3352],{"class":3321},[3307,8513,3326],{"class":3325},[3307,8515,8516],{"class":3329},"\"✓\"",[3307,8518,3371],{"class":3321},[3307,8520,3326],{"class":3325},[3307,8522,3819],{"class":3329},[3307,8524,4533],{"class":3321},[3307,8526,3326],{"class":3325},[3307,8528,7161],{"class":3329},[3307,8530,5904],{"class":3321},[3307,8532,3326],{"class":3325},[3307,8534,3844],{"class":3329},[3307,8536,3379],{"class":3313},[3307,8538,8539,8541,8543,8545,8547,8550,8552,8554,8557,8559,8561,8563],{"class":3309,"line":3653},[3307,8540,4016],{"class":3313},[3307,8542,3349],{"class":3317},[3307,8544,3352],{"class":3321},[3307,8546,3326],{"class":3325},[3307,8548,8549],{"class":3329},"\"Файл успішно збережено\"",[3307,8551,4533],{"class":3321},[3307,8553,3326],{"class":3325},[3307,8555,8556],{"class":3329},"\"#065F46\"",[3307,8558,8203],{"class":3321},[3307,8560,3326],{"class":3325},[3307,8562,7401],{"class":3329},[3307,8564,3379],{"class":3313},[3307,8566,8567,8569,8571],{"class":3309,"line":3662},[3307,8568,4098],{"class":3313},[3307,8570,3318],{"class":3317},[3307,8572,3340],{"class":3313},[3307,8574,8575,8577,8579],{"class":3309,"line":3672},[3307,8576,3939],{"class":3313},[3307,8578,4470],{"class":3317},[3307,8580,3340],{"class":3313},[3307,8582,8583],{"class":3309,"line":3681},[3307,8584,3470],{"emptyLinePlaceholder":3469},[3307,8586,8587,8589,8591,8593,8595],{"class":3309,"line":3692},[3307,8588,3346],{"class":3313},[3307,8590,3349],{"class":3317},[3307,8592,3352],{"class":3321},[3307,8594,3326],{"class":3325},[3307,8596,8597],{"class":3329},"\"Помилка — червоне повідомлення:\"\n",[3307,8599,8600,8602,8604,8606,8608,8610,8612],{"class":3309,"line":4611},[3307,8601,3839],{"class":3321},[3307,8603,3326],{"class":3325},[3307,8605,6238],{"class":3329},[3307,8607,3322],{"class":3321},[3307,8609,3326],{"class":3325},[3307,8611,3506],{"class":3329},[3307,8613,3379],{"class":3313},[3307,8615,8616,8618,8620,8622,8624,8627,8629,8631,8633,8635,8637,8639],{"class":3309,"line":4644},[3307,8617,3346],{"class":3313},[3307,8619,4470],{"class":3317},[3307,8621,6763],{"class":3321},[3307,8623,3326],{"class":3325},[3307,8625,8626],{"class":3329},"\"#FEE2E2\"",[3307,8628,4473],{"class":3321},[3307,8630,3326],{"class":3325},[3307,8632,6930],{"class":3329},[3307,8634,4481],{"class":3321},[3307,8636,3326],{"class":3325},[3307,8638,4486],{"class":3329},[3307,8640,8466],{"class":3325},[3307,8642,8643,8645,8647,8649,8651,8653,8655],{"class":3309,"line":4659},[3307,8644,3401],{"class":3321},[3307,8646,3326],{"class":3325},[3307,8648,4494],{"class":3329},[3307,8650,4497],{"class":3321},[3307,8652,3326],{"class":3325},[3307,8654,8481],{"class":3329},[3307,8656,3340],{"class":3313},[3307,8658,8659,8661,8663,8665,8667,8669,8671,8673,8675],{"class":3309,"line":4687},[3307,8660,3878],{"class":3313},[3307,8662,3318],{"class":3317},[3307,8664,6727],{"class":3321},[3307,8666,3326],{"class":3325},[3307,8668,6732],{"class":3329},[3307,8670,3333],{"class":3321},[3307,8672,3326],{"class":3325},[3307,8674,3871],{"class":3329},[3307,8676,3340],{"class":3313},[3307,8678,8679,8681,8683,8685,8687,8690,8692,8694,8696,8698,8700,8702,8704,8706,8708],{"class":3309,"line":4702},[3307,8680,4016],{"class":3313},[3307,8682,3349],{"class":3317},[3307,8684,3352],{"class":3321},[3307,8686,3326],{"class":3325},[3307,8688,8689],{"class":3329},"\"✕\"",[3307,8691,3371],{"class":3321},[3307,8693,3326],{"class":3325},[3307,8695,3819],{"class":3329},[3307,8697,4533],{"class":3321},[3307,8699,3326],{"class":3325},[3307,8701,6930],{"class":3329},[3307,8703,5904],{"class":3321},[3307,8705,3326],{"class":3325},[3307,8707,3844],{"class":3329},[3307,8709,3379],{"class":3313},[3307,8711,8712,8714,8716,8718,8720,8723],{"class":3309,"line":4717},[3307,8713,4016],{"class":3313},[3307,8715,3349],{"class":3317},[3307,8717,3352],{"class":3321},[3307,8719,3326],{"class":3325},[3307,8721,8722],{"class":3329},"\"Не вдалося зберегти файл. Перевірте права доступу.\"",[3307,8724,8466],{"class":3325},[3307,8726,8727,8729,8731,8734,8737,8739,8741,8743,8745,8747],{"class":3309,"line":4732},[3307,8728,5722],{"class":3321},[3307,8730,3326],{"class":3325},[3307,8732,8733],{"class":3329},"\"#991B1B\"",[3307,8735,8736],{"class":3321}," TextWrapping",[3307,8738,3326],{"class":3325},[3307,8740,5278],{"class":3329},[3307,8742,8203],{"class":3321},[3307,8744,3326],{"class":3325},[3307,8746,7401],{"class":3329},[3307,8748,3379],{"class":3313},[3307,8750,8751,8753,8755],{"class":3309,"line":4741},[3307,8752,4098],{"class":3313},[3307,8754,3318],{"class":3317},[3307,8756,3340],{"class":3313},[3307,8758,8759,8761,8763],{"class":3309,"line":4750},[3307,8760,3939],{"class":3313},[3307,8762,4470],{"class":3317},[3307,8764,3340],{"class":3313},[3307,8766,8767,8769,8771],{"class":3309,"line":4755},[3307,8768,3695],{"class":3313},[3307,8770,3318],{"class":3317},[3307,8772,3340],{"class":3313},[3205,8774],{},[3014,8776,8778],{"id":8777},"доступність-accessibility","Доступність (Accessibility)",[3024,8780,8781,8782,8785],{},"Доступність — це не \"додаткова функція\", а ",[2958,8783,8784],{},"фундаментальна вимога"," до будь-якого професійного застосунку. Приблизно 15% населення світу має ту чи іншу форму інвалідності (за даними WHO). Це означає, що кожен сьомий потенційний користувач вашого застосунку може мати проблеми зі зором, слухом, моторикою або когнітивними здібностями.",[3019,8787,8789],{"id":8788},"wcag-стандарт-доступності","WCAG: стандарт доступності",[3024,8791,8792,8794],{},[2958,8793,3002],{}," (Web Content Accessibility Guidelines) — це міжнародний стандарт доступності, розроблений W3C. Хоча він створювався для веб-контенту, його принципи повністю застосовні до десктопних застосунків.",[3024,8796,8797],{},"WCAG базується на чотирьох принципах (POUR):",[3045,8799,8800,8818,8836,8854],{},[3048,8801,8804,8807],{"icon":8802,"title":8803},"i-heroicons-eye","Perceivable (Сприйманий)",[3024,8805,8806],{},"Інформація має бути представлена у формі, що може бути сприйнята користувачем:",[3058,8808,8809,8812,8815],{},[3061,8810,8811],{},"Текстові альтернативи для нетекстового контенту (alt-текст для зображень)",[3061,8813,8814],{},"Достатній контраст між текстом та фоном",[3061,8816,8817],{},"Можливість збільшення тексту без втрати функціональності",[3048,8819,8822,8825],{"icon":8820,"title":8821},"i-heroicons-cursor-arrow-rays","Operable (Керований)",[3024,8823,8824],{},"Інтерфейс має бути керованим різними способами:",[3058,8826,8827,8830,8833],{},[3061,8828,8829],{},"Повна підтримка клавіатурної навігації (без миші)",[3061,8831,8832],{},"Достатньо часу для читання та взаємодії",[3061,8834,8835],{},"Відсутність контенту, що може викликати епілептичні напади (блимання)",[3048,8837,8840,8843],{"icon":8838,"title":8839},"i-heroicons-light-bulb","Understandable (Зрозумілий)",[3024,8841,8842],{},"Інформація та керування мають бути зрозумілими:",[3058,8844,8845,8848,8851],{},[3061,8846,8847],{},"Читабельний та передбачуваний текст",[3061,8849,8850],{},"Послідовна навігація та поведінка",[3061,8852,8853],{},"Допомога у виправленні помилок введення",[3048,8855,8858,8861],{"icon":8856,"title":8857},"i-heroicons-shield-check","Robust (Надійний)",[3024,8859,8860],{},"Контент має бути надійно інтерпретований різними технологіями:",[3058,8862,8863,8866,8869],{},[3061,8864,8865],{},"Сумісність з асистивними технологіями (скрін-рідери)",[3061,8867,8868],{},"Валідна розмітка та семантика",[3061,8870,8871],{},"Підтримка різних платформ та пристроїв",[3019,8873,8875],{"id":8874},"контраст-кольорів","Контраст кольорів",[3024,8877,8878,8879,8882],{},"Один із найпростіших і найважливіших аспектів доступності — ",[2958,8880,8881],{},"достатній контраст"," між текстом та фоном. WCAG визначає два рівні:",[3058,8884,8885,8891],{},[3061,8886,8887,8890],{},[2958,8888,8889],{},"WCAG AA"," (мінімальний): Контраст 4.5:1 для звичайного тексту, 3:1 для великого тексту (18pt+ або 14pt+ жирний).",[3061,8892,8893,8896],{},[2958,8894,8895],{},"WCAG AAA"," (розширений): Контраст 7:1 для звичайного тексту, 4.5:1 для великого тексту.",[3024,8898,8899,3236],{},[2958,8900,8901],{},"Приклади контрасту",[5068,8903,8904,8921],{},[5071,8905,8906],{},[5074,8907,8908,8911,8914,8917,8919],{},[5077,8909,8910],{},"Текст",[5077,8912,8913],{},"Фон",[5077,8915,8916],{},"Контраст",[5077,8918,8889],{},[5077,8920,8895],{},[5090,8922,8923,8945,8964,8984,9003],{},[5074,8924,8925,8931,8937,8940,8943],{},[5095,8926,8927,8930],{},[2963,8928,8929],{},"#000000"," (чорний)",[5095,8932,8933,8936],{},[2963,8934,8935],{},"#FFFFFF"," (білий)",[5095,8938,8939],{},"21:1",[5095,8941,8942],{},"✅ Так",[5095,8944,8942],{},[5074,8946,8947,8953,8957,8960,8962],{},[5095,8948,8949,8952],{},[2963,8950,8951],{},"#111827"," (темно-сірий)",[5095,8954,8955,8936],{},[2963,8956,8935],{},[5095,8958,8959],{},"16.1:1",[5095,8961,8942],{},[5095,8963,8942],{},[5074,8965,8966,8972,8976,8979,8981],{},[5095,8967,8968,8971],{},[2963,8969,8970],{},"#6B7280"," (сірий)",[5095,8973,8974,8936],{},[2963,8975,8935],{},[5095,8977,8978],{},"4.6:1",[5095,8980,8942],{},[5095,8982,8983],{},"❌ Ні",[5074,8985,8986,8992,8996,8999,9001],{},[5095,8987,8988,8991],{},[2963,8989,8990],{},"#9CA3AF"," (світло-сірий)",[5095,8993,8994,8936],{},[2963,8995,8935],{},[5095,8997,8998],{},"2.8:1",[5095,9000,8983],{},[5095,9002,8983],{},[5074,9004,9005,9011,9015,9018,9020],{},[5095,9006,9007,9010],{},[2963,9008,9009],{},"#3B82F6"," (синій)",[5095,9012,9013,8936],{},[2963,9014,8935],{},[5095,9016,9017],{},"3.1:1",[5095,9019,8983],{},[5095,9021,8983],{},[9023,9024,9025,9026,9028,9029,5563,9031,9034,9035,5563,9038,3012],"warning",{},"Ніколи не використовуйте світло-сірий текст (",[2963,9027,8990],{}," або світліше) на білому фоні для основного контенту. Це порушує WCAG AA і робить текст нечитабельним для користувачів зі слабким зором. Для основного тексту використовуйте ",[2963,9030,8951],{},[2963,9032,9033],{},"#1F2937",", для вторинного — ",[2963,9036,9037],{},"#374151",[2963,9039,8970],{},[3019,9041,9043],{"id":9042},"клавіатурна-навігація","Клавіатурна навігація",[3024,9045,9046,9047,9050],{},"Кожен елемент інтерфейсу, з яким можна взаємодіяти мишею, ",[2958,9048,9049],{},"має бути доступний через клавіатуру",". Це критично важливо не лише для користувачів з обмеженою моторикою, а й для \"power users\", що віддають перевагу клавіатурі.",[3024,9052,9053,3236],{},[2958,9054,9055],{},"Основні клавіші навігації",[3058,9057,9058,9063,9071,9079,9094,9100],{},[3061,9059,9060,9062],{},[3174,9061],{"value":3190}," — перехід до наступного елемента",[3061,9064,9065,4939,9068,9070],{},[3174,9066],{"value":9067},"Shift",[3174,9069],{"value":3190}," — перехід до попереднього елемента",[3061,9072,9073,5563,9075,9078],{},[3174,9074],{"value":3176},[3174,9076],{"value":9077},"Space"," — активація кнопки/чекбоксу",[3061,9080,9081,2961,9084,2961,9087,2961,9090,9093],{},[3174,9082],{"value":9083},"↑",[3174,9085],{"value":9086},"↓",[3174,9088],{"value":9089},"←",[3174,9091],{"value":9092},"→"," — навігація у списках, меню, слайдерах",[3061,9095,9096,9099],{},[3174,9097],{"value":9098},"Esc"," — закриття діалогу, скасування дії",[3061,9101,9102,9104],{},[3174,9103],{"value":5019}," + підкреслена літера — активація контролу через AccessKey",[3024,9106,9107,9110,9111,9114],{},[2958,9108,9109],{},"Порядок фокусу (Tab Order)",": Елементи мають отримувати фокус у логічному порядку — зверху вниз, зліва направо (для LTR-мов). У WPF порядок фокусу визначається властивістю ",[2963,9112,9113],{},"TabIndex"," (за замовчуванням — порядок у XAML).",[3296,9116,9118],{"title":9117},"Клавіатурна навігація: Tab Order",[3238,9119,9121],{"className":3301,"code":9120,"language":3303,"meta":3246,"style":3246},"\u003CStackPanel Margin=\"20\" Spacing=\"16\">\n  \u003CTextBlock Text=\"Натисніть Tab для переходу між полями:\"\n             FontWeight=\"SemiBold\"/>\n  \n  \u003CStackPanel Spacing=\"4\">\n    \u003CTextBlock Text=\"Ім'я (Tab Index: 0)\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n    \u003CTextBox TabIndex=\"0\" Padding=\"8,6\"/>\n  \u003C/StackPanel>\n\n  \u003CStackPanel Spacing=\"4\">\n    \u003CTextBlock Text=\"Прізвище (Tab Index: 1)\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n    \u003CTextBox TabIndex=\"1\" Padding=\"8,6\"/>\n  \u003C/StackPanel>\n\n  \u003CStackPanel Spacing=\"4\">\n    \u003CTextBlock Text=\"Email (Tab Index: 2)\" FontSize=\"13\" Foreground=\"#6B7280\"/>\n    \u003CTextBox TabIndex=\"2\" Padding=\"8,6\"/>\n  \u003C/StackPanel>\n\n  \u003CButton Content=\"Відправити (Tab Index: 3)\"\n          TabIndex=\"3\"\n          Padding=\"16,8\"\n          Background=\"#3B82F6\"\n          Foreground=\"White\"\n          HorizontalAlignment=\"Left\"\n          Margin=\"0,8,0,0\"/>\n\u003C/StackPanel>\n",[2963,9122,9123,9143,9156,9166,9170,9184,9211,9233,9241,9245,9259,9286,9306,9314,9318,9332,9359,9380,9388,9392,9405,9415,9423,9431,9439,9448,9459],{"__ignoreMap":3246},[3307,9124,9125,9127,9129,9131,9133,9135,9137,9139,9141],{"class":3309,"line":3310},[3307,9126,3314],{"class":3313},[3307,9128,3318],{"class":3317},[3307,9130,3322],{"class":3321},[3307,9132,3326],{"class":3325},[3307,9134,3330],{"class":3329},[3307,9136,3333],{"class":3321},[3307,9138,3326],{"class":3325},[3307,9140,3819],{"class":3329},[3307,9142,3340],{"class":3313},[3307,9144,9145,9147,9149,9151,9153],{"class":3309,"line":3343},[3307,9146,3346],{"class":3313},[3307,9148,3349],{"class":3317},[3307,9150,3352],{"class":3321},[3307,9152,3326],{"class":3325},[3307,9154,9155],{"class":3329},"\"Натисніть Tab для переходу між полями:\"\n",[3307,9157,9158,9160,9162,9164],{"class":3309,"line":3360},[3307,9159,3839],{"class":3321},[3307,9161,3326],{"class":3325},[3307,9163,6238],{"class":3329},[3307,9165,3379],{"class":3313},[3307,9167,9168],{"class":3309,"line":3382},[3307,9169,3858],{"class":3325},[3307,9171,9172,9174,9176,9178,9180,9182],{"class":3309,"line":3398},[3307,9173,3346],{"class":3313},[3307,9175,3318],{"class":3317},[3307,9177,3333],{"class":3321},[3307,9179,3326],{"class":3325},[3307,9181,4254],{"class":3329},[3307,9183,3340],{"class":3313},[3307,9185,9186,9188,9190,9192,9194,9197,9199,9201,9203,9205,9207,9209],{"class":3309,"line":3409},[3307,9187,3878],{"class":3313},[3307,9189,3349],{"class":3317},[3307,9191,3352],{"class":3321},[3307,9193,3326],{"class":3325},[3307,9195,9196],{"class":3329},"\"Ім'я (Tab Index: 0)\"",[3307,9198,3371],{"class":3321},[3307,9200,3326],{"class":3325},[3307,9202,3376],{"class":3329},[3307,9204,4533],{"class":3321},[3307,9206,3326],{"class":3325},[3307,9208,5932],{"class":3329},[3307,9210,3379],{"class":3313},[3307,9212,9213,9215,9217,9220,9222,9225,9227,9229,9231],{"class":3309,"line":3420},[3307,9214,3878],{"class":3313},[3307,9216,6293],{"class":3317},[3307,9218,9219],{"class":3321}," TabIndex",[3307,9221,3326],{"class":3325},[3307,9223,9224],{"class":3329},"\"0\"",[3307,9226,4489],{"class":3321},[3307,9228,3326],{"class":3325},[3307,9230,6300],{"class":3329},[3307,9232,3379],{"class":3313},[3307,9234,9235,9237,9239],{"class":3309,"line":3431},[3307,9236,3939],{"class":3313},[3307,9238,3318],{"class":3317},[3307,9240,3340],{"class":3313},[3307,9242,9243],{"class":3309,"line":3442},[3307,9244,3470],{"emptyLinePlaceholder":3469},[3307,9246,9247,9249,9251,9253,9255,9257],{"class":3309,"line":3453},[3307,9248,3346],{"class":3313},[3307,9250,3318],{"class":3317},[3307,9252,3333],{"class":3321},[3307,9254,3326],{"class":3325},[3307,9256,4254],{"class":3329},[3307,9258,3340],{"class":3313},[3307,9260,9261,9263,9265,9267,9269,9272,9274,9276,9278,9280,9282,9284],{"class":3309,"line":3466},[3307,9262,3878],{"class":3313},[3307,9264,3349],{"class":3317},[3307,9266,3352],{"class":3321},[3307,9268,3326],{"class":3325},[3307,9270,9271],{"class":3329},"\"Прізвище (Tab Index: 1)\"",[3307,9273,3371],{"class":3321},[3307,9275,3326],{"class":3325},[3307,9277,3376],{"class":3329},[3307,9279,4533],{"class":3321},[3307,9281,3326],{"class":3325},[3307,9283,5932],{"class":3329},[3307,9285,3379],{"class":3313},[3307,9287,9288,9290,9292,9294,9296,9298,9300,9302,9304],{"class":3309,"line":3473},[3307,9289,3878],{"class":3313},[3307,9291,6293],{"class":3317},[3307,9293,9219],{"class":3321},[3307,9295,3326],{"class":3325},[3307,9297,4486],{"class":3329},[3307,9299,4489],{"class":3321},[3307,9301,3326],{"class":3325},[3307,9303,6300],{"class":3329},[3307,9305,3379],{"class":3313},[3307,9307,9308,9310,9312],{"class":3309,"line":3487},[3307,9309,3939],{"class":3313},[3307,9311,3318],{"class":3317},[3307,9313,3340],{"class":3313},[3307,9315,9316],{"class":3309,"line":3511},[3307,9317,3470],{"emptyLinePlaceholder":3469},[3307,9319,9320,9322,9324,9326,9328,9330],{"class":3309,"line":3525},[3307,9321,3346],{"class":3313},[3307,9323,3318],{"class":3317},[3307,9325,3333],{"class":3321},[3307,9327,3326],{"class":3325},[3307,9329,4254],{"class":3329},[3307,9331,3340],{"class":3313},[3307,9333,9334,9336,9338,9340,9342,9345,9347,9349,9351,9353,9355,9357],{"class":3309,"line":3535},[3307,9335,3878],{"class":3313},[3307,9337,3349],{"class":3317},[3307,9339,3352],{"class":3321},[3307,9341,3326],{"class":3325},[3307,9343,9344],{"class":3329},"\"Email (Tab Index: 2)\"",[3307,9346,3371],{"class":3321},[3307,9348,3326],{"class":3325},[3307,9350,3376],{"class":3329},[3307,9352,4533],{"class":3321},[3307,9354,3326],{"class":3325},[3307,9356,5932],{"class":3329},[3307,9358,3379],{"class":3313},[3307,9360,9361,9363,9365,9367,9369,9372,9374,9376,9378],{"class":3309,"line":3545},[3307,9362,3878],{"class":3313},[3307,9364,6293],{"class":3317},[3307,9366,9219],{"class":3321},[3307,9368,3326],{"class":3325},[3307,9370,9371],{"class":3329},"\"2\"",[3307,9373,4489],{"class":3321},[3307,9375,3326],{"class":3325},[3307,9377,6300],{"class":3329},[3307,9379,3379],{"class":3313},[3307,9381,9382,9384,9386],{"class":3309,"line":3555},[3307,9383,3939],{"class":3313},[3307,9385,3318],{"class":3317},[3307,9387,3340],{"class":3313},[3307,9389,9390],{"class":3309,"line":3566},[3307,9391,3470],{"emptyLinePlaceholder":3469},[3307,9393,9394,9396,9398,9400,9402],{"class":3309,"line":3577},[3307,9395,3346],{"class":3313},[3307,9397,3387],{"class":3317},[3307,9399,3390],{"class":3321},[3307,9401,3326],{"class":3325},[3307,9403,9404],{"class":3329},"\"Відправити (Tab Index: 3)\"\n",[3307,9406,9407,9410,9412],{"class":3309,"line":3588},[3307,9408,9409],{"class":3321},"          TabIndex",[3307,9411,3326],{"class":3325},[3307,9413,9414],{"class":3329},"\"3\"\n",[3307,9416,9417,9419,9421],{"class":3309,"line":3593},[3307,9418,3401],{"class":3321},[3307,9420,3326],{"class":3325},[3307,9422,3532],{"class":3329},[3307,9424,9425,9427,9429],{"class":3309,"line":3607},[3307,9426,3434],{"class":3321},[3307,9428,3326],{"class":3325},[3307,9430,3439],{"class":3329},[3307,9432,9433,9435,9437],{"class":3309,"line":3630},[3307,9434,3445],{"class":3321},[3307,9436,3326],{"class":3325},[3307,9438,3450],{"class":3329},[3307,9440,9441,9443,9445],{"class":3309,"line":3644},[3307,9442,3456],{"class":3321},[3307,9444,3326],{"class":3325},[3307,9446,9447],{"class":3329},"\"Left\"\n",[3307,9449,9450,9453,9455,9457],{"class":3309,"line":3653},[3307,9451,9452],{"class":3321},"          Margin",[3307,9454,3326],{"class":3325},[3307,9456,5517],{"class":3329},[3307,9458,3379],{"class":3313},[3307,9460,9461,9463,9465],{"class":3309,"line":3662},[3307,9462,3695],{"class":3313},[3307,9464,3318],{"class":3317},[3307,9466,3340],{"class":3313},[3701,9468,9469,9470,9473,9474,9477],{},"У WPF властивість ",[2963,9471,9472],{},"IsTabStop=\"False\""," дозволяє виключити елемент з Tab-навігації. Використовуйте це для декоративних елементів (іконки, розділювачі), але ",[2958,9475,9476],{},"ніколи"," для інтерактивних контролів (кнопки, поля введення).",[3205,9479],{},[3014,9481,9483],{"id":9482},"практичні-завдання","Практичні завдання",[9485,9486,9487,9529,9583],"accordion",{},[9488,9489,9492,9498,9504],"accordion-item",{"icon":9490,"label":9491},"i-lucide-circle-help","Рівень 1: Аналіз візуальної ієрархії",[3024,9493,9494,9497],{},[2958,9495,9496],{},"Ціль",": Навчитись розпізнавати візуальну ієрархію у реальних застосунках.",[3024,9499,9500,9503],{},[2958,9501,9502],{},"Завдання",": Відкрийте будь-який десктопний застосунок (Visual Studio, Rider, Figma, Spotify, Discord) та проаналізуйте його головний екран:",[3275,9505,9506,9513,9516,9522],{},[3061,9507,9508,9509,9512],{},"Визначте ",[2958,9510,9511],{},"три рівні ієрархії",": що є найважливішим (H1), що другорядним (H2), що допоміжним (Caption).",[3061,9514,9515],{},"Які інструменти використовуються для створення ієрархії? (Розмір шрифту, колір, відступи, вага шрифту)",[3061,9517,9518,9519,9521],{},"Чи дотримується застосунок принципу ",[2958,9520,3776],{}," (Proximity)? Чи чітко видно, які елементи пов'язані?",[3061,9523,9524,9525,9528],{},"Чи є у застосунку чіткий ",[2958,9526,9527],{},"affordance","? Чи зрозуміло, що є кнопкою, а що просто текстом?",[9488,9530,9532,9537,9542],{"icon":9490,"label":9531},"Рівень 2: Створення доступної форми",[3024,9533,9534,9536],{},[2958,9535,9496],{},": Практика доступності — контраст, клавіатурна навігація, feedback.",[3024,9538,9539,9541],{},[2958,9540,9502],{},": Створіть форму реєстрації з дотриманням WCAG AA:",[3275,9543,9544,9550,9558,9569,9577],{},[3061,9545,9546,9549],{},[2958,9547,9548],{},"Поля",": Ім'я, Email, Пароль, Підтвердження пароля.",[3061,9551,9552,9554,9555,9557],{},[2958,9553,8916],{},": Всі підписи мають контраст мінімум 4.5:1. Використовуйте ",[2963,9556,9037],{}," для підписів на білому фоні.",[3061,9559,9560,9562,9563,9565,9566,9568],{},[2958,9561,9043],{},": Правильний ",[2963,9564,9113],{}," (0, 1, 2, 3...). Натискання ",[3174,9567],{"value":3176}," у останньому полі активує кнопку \"Зареєструватись\".",[3061,9570,9571,9573,9574,9576],{},[2958,9572,2975],{},": При натисканні кнопки — показати ",[2963,9575,8159],{}," (IsIndeterminate) на 2 секунди, потім зелене повідомлення \"Реєстрація успішна!\".",[3061,9578,9579,9582],{},[2958,9580,9581],{},"Валідація",": Якщо Email не містить \"@\" — показати червоне повідомлення під полем \"Невірний формат email\".",[9488,9584,9586,9591,9596,9601,9618,9623],{"icon":9490,"label":9585},"Рівень 3: Редизайн з покращенням UX",[3024,9587,9588,9590],{},[2958,9589,9496],{},": Застосувати всі вивчені принципи для покращення існуючого інтерфейсу.",[3024,9592,9593,9595],{},[2958,9594,9502],{},": Створіть \"до\" та \"після\" версії діалогу видалення файлу:",[3024,9597,9598,3236],{},[2958,9599,9600],{},"Версія \"до\" (погана UX)",[3058,9602,9603,9606,9609,9612,9615],{},[3061,9604,9605],{},"Всі кнопки однакового розміру та кольору",[3061,9607,9608],{},"Текст повідомлення дрібний (12px) та сірий (низький контраст)",[3061,9610,9611],{},"Кнопка \"Видалити\" — зліва, \"Скасувати\" — справа (порушення Закону Якоба для Windows)",[3061,9613,9614],{},"Немає іконки попередження",[3061,9616,9617],{},"Немає інформації про наслідки (що саме буде видалено)",[3024,9619,9620,3236],{},[2958,9621,9622],{},"Версія \"після\" (хороша UX)",[3058,9624,9625,9628,9631,9634,9637,9640],{},[3061,9626,9627],{},"Кнопка \"Скасувати\" більша за \"Видалити\" (Закон Фіттса)",[3061,9629,9630],{},"Текст повідомлення великий (14px) та чорний (високий контраст)",[3061,9632,9633],{},"Кнопка \"Скасувати\" зліва, \"Видалити\" справа (Windows convention)",[3061,9635,9636],{},"Іконка попередження (жовтий трикутник з оклик ним знаком)",[3061,9638,9639],{},"Чітка інформація: \"Файл 'document.pdf' буде видалено назавжди. Цю дію неможливо скасувати.\"",[3061,9641,9642],{},"Кнопка \"Видалити\" червона, але не найбільша",[3205,9644],{},[3014,9646,9648],{"id":9647},"підсумок","Підсумок",[3019,9650,9652],{"id":9651},"що-ми-вивчили-у-цій-статті","Що ми вивчили у цій статті",[3024,9654,9655],{},"У цій статті ми розглянули фундаментальні принципи UI/UX дизайну, що застосовуються до десктопних застосунків.",[3024,9657,9658,9661],{},[2958,9659,9660],{},"UI vs UX"," — це не синоніми: UI — це візуальний шар (що користувач бачить), UX — це досвід взаємодії (що користувач відчуває). Хороший UI не гарантує хороший UX, і навпаки.",[3024,9663,9664,9667],{},[2958,9665,9666],{},"Закони взаємодії"," — емпірично підтверджені принципи, що керують поведінкою користувачів: Закон Фіттса (великі кнопки натискаються швидше), Закон Хіка (більше опцій = довше рішення), Закон Міллера (7±2 елементи у короткочасній пам'яті), Закон Якоба (користувачі очікують стандартної поведінки).",[3024,9669,9670,9673],{},[2958,9671,9672],{},"Візуальна ієрархія"," створюється через розмір шрифту, вагу, колір, контраст та відступи. Три рівні контрасту: високий (основний текст), середній (вторинний текст), низький (допоміжний текст). Групування через відступи (Proximity) — 4-8px всередині групи, 16-24px між групами, 32-48px між розділами.",[3024,9675,9676,9679],{},[2958,9677,9678],{},"Принципи Гештальту"," пояснюють, як мозок сприймає візуальні об'єкти: Proximity (близькість), Similarity (подібність), Continuity (продовження), Closure (замкнутість), Figure-Ground (фігура та фон).",[3024,9681,9682,9685],{},[2958,9683,9684],{},"Affordance та Feedback"," — ключові UX-концепції: affordance підказує, як взаємодіяти з елементом, feedback підтверджує, що дія виконана. Правило 0.1-1-10 секунд визначає, коли потрібен індикатор завантаження.",[3024,9687,9688,9690],{},[2958,9689,8778],{}," — не опція, а вимога. WCAG визначає стандарти: контраст мінімум 4.5:1 (AA) або 7:1 (AAA), повна клавіатурна навігація, логічний Tab Order, текстові альтернативи для нетекстового контенту.",[3019,9692,9694],{"id":9693},"що-далі","Що далі",[3024,9696,9697,9698,9701],{},"У наступній статті ми перейдемо до ",[2958,9699,9700],{},"Dependency Properties"," — системи властивостей WPF, що є фундаментом для Data Binding, стилів, анімацій та всього, що робить WPF потужним. Розуміння UI/UX принципів допоможе вам приймати правильні рішення при проєктуванні інтерфейсів на основі цих технологій.",[9703,9704,9705],"style",{},"html pre.shiki code .s0P7L, html code.shiki .s0P7L{--shiki-light:#800000;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .sKtos, html code.shiki .sKtos{--shiki-light:#800000;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sa4r_, html code.shiki .sa4r_{--shiki-light:#E50000;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sHH4Y, html code.shiki .sHH4Y{--shiki-light:#000000;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .su9tN, html code.shiki .su9tN{--shiki-light:#0000FF;--shiki-default:#CE9178;--shiki-dark:#CE9178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spJ8K, html code.shiki .spJ8K{--shiki-light:#008000;--shiki-default:#6A9955;--shiki-dark:#6A9955}",{"title":3246,"searchDepth":3343,"depth":3343,"links":9707},[9708,9712,9718,9723,9730,9734,9739,9740],{"id":3016,"depth":3343,"text":3017,"children":9709},[9710,9711],{"id":3021,"depth":3360,"text":3022},{"id":3128,"depth":3360,"text":3129},{"id":3209,"depth":3343,"text":3210,"children":9713},[9714,9715,9716,9717],{"id":3216,"depth":3360,"text":3217},{"id":3726,"depth":3360,"text":3727},{"id":4133,"depth":3360,"text":4134},{"id":4918,"depth":3360,"text":4919},{"id":5042,"depth":3343,"text":5043,"children":9719},[9720,9721,9722],{"id":5053,"depth":3360,"text":5054},{"id":5577,"depth":3360,"text":5578},{"id":6116,"depth":3360,"text":6117},{"id":6636,"depth":3343,"text":6637,"children":9724},[9725,9726,9727,9728,9729],{"id":6646,"depth":3360,"text":6647},{"id":6653,"depth":3360,"text":6654},{"id":7188,"depth":3360,"text":7189},{"id":7201,"depth":3360,"text":7202},{"id":7213,"depth":3360,"text":7214},{"id":7648,"depth":3343,"text":7649,"children":9731},[9732,9733],{"id":7652,"depth":3360,"text":7653},{"id":8011,"depth":3360,"text":8012},{"id":8777,"depth":3343,"text":8778,"children":9735},[9736,9737,9738],{"id":8788,"depth":3360,"text":8789},{"id":8874,"depth":3360,"text":8875},{"id":9042,"depth":3360,"text":9043},{"id":9482,"depth":3343,"text":9483},{"id":9647,"depth":3343,"text":9648,"children":9741},[9742,9743],{"id":9651,"depth":3360,"text":9652},{"id":9693,"depth":3360,"text":9694},"Фундаментальні принципи проєктування користувацьких інтерфейсів для десктопних застосунків. Розуміємо різницю між UI та UX, вивчаємо закони взаємодії, принципи візуальної ієрархії, типографіки, кольору та доступності. Застосовуємо теорію на практиці через WPF та Avalonia.","md",null,{},{"title":1437,"description":9744},"Oo1OLGYC8qyYSdNL_fquXnkBI1hGvmaad_53WQlEVOw",[9751,9753],{"title":1433,"path":1434,"stem":1435,"description":9752,"children":-1},"Досліджуємо Content Model WPF — фундаментальну архітектурну концепцію, на якій побудовано всі контейнерні контроли. Вивчаємо GroupBox, Expander, TabControl та StatusBar як інструменти організації складних інтерфейсів.",{"title":1441,"path":1442,"stem":1443,"description":9754,"children":-1},"Розуміння системи властивостей WPF, механізму DependencyProperty та пріоритетів значень",1777912367294]