@jjlmoya/utils-developer 1.4.0 → 1.5.0

package/src/tool/aspectRatio/i18n/pl.ts

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'kalkulator-proporcji-obrazu';
+const title = 'Kalkulator proporcji obrazu w pikselach. Proporcje online';
+const description =
+  'Obliczaj nowe rozdzielczości obrazu, wideo i projektów stron internetowych, zachowując dokładne proporcje, aby uniknąć zniekształceń grafiki. Obsługuje formaty 16:9, 4:3, 21:9 i niestandardowe.';
+
+const faqData = [
+  {
+    question: 'Co to jest proporcja obrazu (Aspect Ratio)?',
+    answer:
+      'Proporcja obrazu opisuje geometryczną zależność między szerokością a wysokością obrazu lub ekranu. Jest reprezentowana przez dwie liczby oddzielone dwukropkiem (np. 16:9), wskazując, jak wysokość zmienia się proporcjonalnie w stosunku do szerokości.',
+  },
+  {
+    question: 'Dlaczego ważne jest zachowanie poprawnych proporcji?',
+    answer:
+      'Ignorowanie proporcji obrazu powoduje, że obrazy są spłaszczone lub rozciągnięte, w filmach pojawiają się nieoczekiwane czarne pasy (letterboxing), a komponenty stron internetowych tracą swój układ na ekranach o różnych rozmiarach. Zachowanie poprawnych proporcji jest kluczem do profesjonalnego wyglądu.',
+  },
+  {
+    question: 'Jak obliczyć wysokość na podstawie szerokości przy danej proporcji?',
+    answer:
+      'Wzór to: Wysokość = Szerokość × (Wysokość proporcji / Szerokość proporcji). Na przykład, dla szerokości 1280px przy proporcji 16:9, wysokość wyniesie: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Jaka jest standardowa proporcja obrazu dla filmów na YouTube?',
+    answer:
+      'Standardową proporcją dla YouTube i większości nowoczesnych platform wideo jest 16:9. Odpowiada ona rozdzielczościom takim jak 1280×720 (HD), 1920×1080 (Full HD) lub 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Jakie proporcje obrazu mają pionowe filmy w mediach społecznościowych?',
+    answer:
+      '9:16, co jest dokładnym odwróceniem formatu panoramicznego. Jest to natywna proporcja dla TikTok, Instagram Reels i YouTube Shorts, wynikająca z korzystania z telefonów komórkowych w pionie.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Wprowadź oryginalną proporcję',
+    text: 'Wpisz szerokość i wysokość proporcji, którą chcesz zachować (np. 16 i 9 dla panoramy) lub wybierz jedno z gotowych ustawień.',
+  },
+  {
+    name: 'Dostosuj skalę',
+    text: 'Zmień wartość szerokości lub wysokości w sekcji „Rzeczywista skala”. Narzędzie automatycznie obliczy drugą wartość, aby zachować proporcje.',
+  },
+  {
+    name: 'Sprawdź podgląd',
+    text: 'Panel podglądu pokazuje wynikowy kształt w skali proporcjonalnej, wraz z uproszczoną proporcją i obliczoną rozdzielczością.',
+  },
+  {
+    name: 'Zastosuj w swoim projekcie',
+    text: 'Skopiuj obliczone wartości, aby użyć ich w CSS (aspect-ratio: 16 / 9), przy eksporcie wideo lub w ustawieniach narzędzia projektowego.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'pl',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Konfiguracja',
+  labelRatio: 'Oryginalna proporcja',
+  labelWidth: 'Szerokość',
+  labelHeight: 'Wysokość',
+  labelScale: 'Rzeczywista skala',
+  labelPixelWidth: 'Piksele (Szerokość)',
+  labelPixelHeight: 'Piksele (Wysokość)',
+  labelPreview: 'Podgląd proporcjonalny',
+  labelStatus: 'Idealna proporcja',
+  labelOffline: 'Narzędzie 100% offline',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często zadawane pytania',
+  faq: faqData,
+  bibliographyTitle: 'Referencje i dokumentacja',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Proporcje obrazu',
+      url: 'https://pl.wikipedia.org/wiki/Proporcje_obrazu',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Co to jest proporcja obrazu?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'W projektowaniu graficznym, fotografii i programowaniu frontendowym <strong>proporcja obrazu</strong> (Aspect Ratio) opisuje geometryczną zależność między szerokością a wysokością obrazu, ekranu lub kontenera. Zazwyczaj jest reprezentowana przez dwie liczby oddzielone dwukropkiem (np. <code>16:9</code>), wskazując, jak wysokość zmienia się proporcjonalnie w odpowiedzi na szerokość.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Błędne zarządzanie proporcjami jest częstą przyczyną spłaszczonych zdjęć, filmów z nieoczekiwanym przycięciem (letterboxing) lub komponentów stron internetowych, które tracą swój układ przy przeglądaniu na różnych urządzeniach – od telefonów po monitory panoramiczne.',
+    },
+    {
+      type: 'title',
+      text: 'Typowe proporcje w branży',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'W zależności od Twojej dyscypliny będziesz stale stykać się z ograniczoną liczbą światowych standardów proporcji:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Panorama):</strong> Absolutnie dominujący format w nowoczesnych monitorach, telewizorach, nagraniach YouTube czy standardowych rozdzielczościach wysokiej jakości (takich jak 1920×1080 lub 4K).',
+        '<strong>9:16 (Pion):</strong> Wywodzi się z natywnego sposobu konsumpcji treści na urządzeniach mobilnych (TikTok, Instagram Reels, YouTube Shorts). Dokładnie te same proporcje co w wideo panoramicznym, ale przy fizycznym obróceniu urządzenia.',
+        '<strong>4:3 (Klasyczny / Vintage):</strong> Spotykany w starych telewizorach i monitorach oraz w analogowych i specjalistycznych cyfrowych modelach aparatów. Jego nieco kwadratowy wygląd kieruje uwagę bezpośrednio na centralną oś kompozycji.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Programowanie stron i właściwość CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Wcześniej w CSS używano skomplikowanych systemów matematycznych wykorzystujących <strong>Padding Hack</strong> (np. wstrzykiwanie <code>padding-top: 56.25%</code>) w celu zarezerwowania dynamicznej przestrzeni dla ramek iframe YouTube lub obrazów nagłówkowych, aby uniknąć problemu Cumulative Layout Shift (CLS) podczas ładowania strony.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Obecnie wszystkie nowoczesne układy bezpośrednio stosują właściwości takie jak <code>aspect-ratio: 16 / 9;</code>, co pozwala uzyskać semantyczny kod i umożliwia przeglądarce automatyczne wyliczenie brakującego wymiaru na podstawie oryginalnej szerokości zdefiniowanej przez Grid lub Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Ten lokalny kalkulator pikseli przenosi możliwości projektowe na błyskawiczne obliczenia skalowania, które uchronią Twoje projekty przed katastrofalnymi błędami konfiguracji.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/pt.ts

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'calculadora-proporcao-tela';
+const title = 'Calculadora de Proporção (Aspect Ratio) em Pixels. Proporções Online';
+const description =
+  'Calcule novas resoluções de imagem, vídeo e web design mantendo a proporção exata para evitar distorções gráficas. Suporta 16:9, 4:3, 21:9 e formatos personalizados.';
+
+const faqData = [
+  {
+    question: 'O que é Aspect Ratio (Proporção)?',
+    answer:
+      'O Aspect Ratio descreve a relação geométrica entre a largura e a altura de uma imagem ou tela. É representado por dois números separados por dois pontos (ex: 16:9), indicando como a altura muda proporcionalmente em relação à largura.',
+  },
+  {
+    question: 'Por que é importante manter as proporções corretas?',
+    answer:
+      'Ignorar o Aspect Ratio causa imagens achatadas ou esticadas, barras pretas indesejadas (letterboxing) em vídeos e componentes web que quebram seu layout em diferentes tamanhos de tela. Manter as proporções corretas é fundamental para uma exibição profissional.',
+  },
+  {
+    question: 'Como calculo a altura a partir da largura com uma determinada proporção?',
+    answer:
+      'A fórmula é: Altura = Largura × (Altura da Proporção / Largura da Proporção). Por exemplo, para uma largura de 1280px com uma proporção de 16:9, a altura seria: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Qual é o Aspect Ratio padrão para vídeos do YouTube?',
+    answer:
+      '16:9 é a proporção padrão para o YouTube e a maioria das plataformas de vídeo modernas. Corresponde a resoluções como 1280×720 (HD), 1920×1080 (Full HD) ou 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Qual Aspect Ratio os vídeos verticais das redes sociais usam?',
+    answer:
+      '9:16, que é exatamente o inverso do formato widescreen. É a proporção nativa do TikTok, Instagram Reels e YouTube Shorts, originada do consumo de conteúdo em smartphones na vertical.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Insira a proporção original',
+    text: 'Insira os valores de largura e altura da proporção que deseja manter (ex: 16 e 9 para widescreen) ou selecione um dos modelos prontos.',
+  },
+  {
+    name: 'Ajuste a escala',
+    text: 'Altere o valor da largura ou altura na seção "Escala Real". A ferramenta calculará automaticamente o valor oposto para manter a proporção.',
+  },
+  {
+    name: 'Verifique a visualização',
+    text: 'O painel de pré-visualização mostra a forma resultante em escala proporcional, com a proporção simplificada e a resolução calculada.',
+  },
+  {
+    name: 'Aplique no seu projeto',
+    text: 'Copie os valores calculados para usar no seu CSS (aspect-ratio: 16 / 9), na exportação de vídeos ou nas configurações da sua ferramenta de design.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'pt',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Configuração',
+  labelRatio: 'Proporção Original',
+  labelWidth: 'Largura',
+  labelHeight: 'Altura',
+  labelScale: 'Escala Real',
+  labelPixelWidth: 'Pixels (Largura)',
+  labelPixelHeight: 'Pixels (Altura)',
+  labelPreview: 'Visualização Proporcional',
+  labelStatus: 'Proporção Perfeita',
+  labelOffline: 'Ferramenta 100% Offline',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências e Documentação',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Aspect ratio',
+      url: 'https://pt.wikipedia.org/wiki/Proporção_de_tela',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'O que é Aspect Ratio?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'No design gráfico, na fotografia e no desenvolvimento frontend, o <strong>Aspect Ratio</strong> descreve a relação geométrica entre a largura e a altura de uma imagem, tela ou contêiner. É normalmente representado por dois números separados por dois pontos (ex: <code>16:9</code>), indicando como a altura aumenta proporcionalmente em resposta à sua largura.',
+    },
+    {
+      type: 'paragraph',
+      html: 'O tratamento incorreto das proporções é uma causa comum de fotografias achatadas, vídeos com cortes inesperados (letterboxing) ou componentes web que quebram seu layout quando visualizados progressivamente de dispositivos móveis a monitores ultra-wide.',
+    },
+    {
+      type: 'title',
+      text: 'Proporções Comuns na Indústria',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dependendo da sua disciplina, você lidará constantemente com um número limitado de proporções padrão globais:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Widescreen):</strong> O formato absolutamente dominante para monitores modernos, TVs, gravações do YouTube ou resoluções padrão de alta definição (como 1920×1080 ou 4K).',
+        '<strong>9:16 (Vertical):</strong> Originado do consumo nativo de conteúdo móvel (TikTok, Instagram Reels, YouTube Shorts). Exatamente a mesma proporção dos vídeos widescreen, mas com a rotação física do dispositivo aplicada.',
+        '<strong>4:3 (Clássico / Vintage):</strong> Presente em televisores e monitores antigos ou em modelos de câmeras analógicas e digitais especializadas. Sua aparência ligeiramente quadrada atrai a atenção direta para o eixo composicional central.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Desenvolvimento Web e a propriedade CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Antigamente no CSS, sistemas matemáticos complexos usando um <strong>Padding Hack</strong> (como a injeção de um <code>padding-top: 56.25%</code>) eram usados para reservar espaços dinâmicos em iframes do YouTube ou imagens de capa, para evitar o terrível Cumulative Layout Shift (CLS) no carregamento da página.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Hoje em dia, todos os layouts modernos aplicam diretamente propriedades como <code>aspect-ratio: 16 / 9;</code>, obtendo um código semântico e permitindo que o navegador derive automaticamente a dimensão ausente a partir da largura original definida via Grid ou Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta calculadora de pixels local transfere o poder do design para um cálculo de escala instantâneo que protegerá seus renders de desconfigurações catastróficas.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/ru.ts

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'kalkulyator-sootnosheniya-storon';
+const title = 'Калькулятор соотношения сторон в пикселях. Пропорции онлайн';
+const description =
+  'Рассчитывайте разрешения для изображений, видео и веб-дизайна, сохраняя точные пропорции, чтобы избежать искажения графики. Поддержка форматов 16:9, 4:3, 21:9 и пользовательских настроек.';
+
+const faqData = [
+  {
+    question: 'Что такое соотношение сторон (Aspect Ratio)?',
+    answer:
+      'Соотношение сторон описывает геометрическую связь между шириной и высотой изображения или экрана. Оно представляется в виде двух чисел, разделенных двоеточием (например, 16:9), указывая, как высота пропорционально изменяется относительно ширины.',
+  },
+  {
+    question: 'Почему важно соблюдать правильные пропорции?',
+    answer:
+      'Игнорирование соотношения сторон приводит к сплющенным или растянутым изображениям, появлению нежелательных черных полос (letterboxing) в видео и нарушению макета веб-компонентов на экранах разного размера. Соблюдение правильных пропорций — залог профессионального вида.',
+  },
+  {
+    question: 'Как рассчитать высоту на основе ширины при заданном соотношении?',
+    answer:
+      'Формула такова: Высота = Ширина × (Число высоты / Число ширины). Например, для ширины 1280px при соотношении 16:9 высота составит: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Какое стандартное соотношение сторон используется для видео на YouTube?',
+    answer:
+      '16:9 — это стандартное соотношение для YouTube и большинства современных видеоплатформ. Оно соответствует таким разрешениям, как 1280×720 (HD), 1920×1080 (Full HD) или 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Какое соотношение сторон используется для вертикальных видео в соцсетях?',
+    answer:
+      '9:16, что является зеркальным отражением широкоэкранного формата. Это родное соотношение сторон для TikTok, Instagram Reels и YouTube Shorts, возникшее из-за вертикального использования мобильных телефонов.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Введите исходное соотношение',
+    text: 'Укажите значения ширины и высоты соотношения, которое вы хотите сохранить (например, 16 и 9 для широкоэкранного формата), или выберите один из пресетов.',
+  },
+  {
+    name: 'Настройте масштаб',
+    text: 'Измените значение ширины или высоты в разделе «Реальный масштаб». Инструмент автоматически рассчитает противоположное значение для сохранения пропорций.',
+  },
+  {
+    name: 'Проверьте результат',
+    text: 'Панель предварительного просмотра показывает итоговую форму в пропорциональном масштабе с упрощенным соотношением и рассчитанным разрешением.',
+  },
+  {
+    name: 'Примените в своем проекте',
+    text: 'Скопируйте рассчитанные значения для использования в CSS (aspect-ratio: 16 / 9), при экспорте видео или в настройках вашего графического редактора.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ru',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Настройка',
+  labelRatio: 'Исходное соотношение',
+  labelWidth: 'Ширина',
+  labelHeight: 'Высота',
+  labelScale: 'Реальный масштаб',
+  labelPixelWidth: 'Пиксели (Ширина)',
+  labelPixelHeight: 'Пиксели (Высота)',
+  labelPreview: 'Пропорциональный просмотр',
+  labelStatus: 'Идеальное соотношение',
+  labelOffline: '100% автономный инструмент',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто задаваемые вопросы',
+  faq: faqData,
+  bibliographyTitle: 'Ссылки и документация',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Aspect ratio',
+      url: 'https://ru.wikipedia.org/wiki/Соотношение_сторон_экрана',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Что такое соотношение сторон?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'В графическом дизайне, фотографии и фронтенд-разработке <strong>соотношение сторон</strong> (Aspect Ratio) описывает геометрическую связь между шириной и высотой изображения, экрана или контейнера. Обычно оно представляется двумя числами через двоеточие (например, <code>16:9</code>), указывая, как высота пропорционально изменяется в ответ на ширину.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Несоблюдение соотношения сторон — частая причина сплющенных фотографий, видео с неожиданной обрезкой (letterboxing) или веб-компонентов, макет которых нарушается при просмотре на разных устройствах — от мобильных телефонов до ультрашироких мониторов.',
+    },
+    {
+      type: 'title',
+      text: 'Общепринятые стандарты в индустрии',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'В зависимости от вашей дисциплины вы будете постоянно сталкиваться с ограниченным набором мировых стандартов пропорций:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Широкоэкранный):</strong> Абсолютно доминирующий формат для современных мониторов, телевизоров, видео на YouTube или стандартных разрешений высокой четкости (таких как 1920×1080 или 4K).',
+        '<strong>9:16 (Вертикальный):</strong> Возник из-за потребления контента на мобильных устройствах (TikTok, Instagram Reels, YouTube Shorts). Точно такое же соотношение, как у широкоэкранного видео, но при физическом повороте устройства.',
+        '<strong>4:3 (Классический):</strong> Встречается в старых телевизорах и мониторах, а также в аналоговых и специализированных цифровых камерах. Его почти квадратный вид привлекает внимание к центральной оси композиции.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Веб-разработка и свойство CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Раньше в CSS использовались сложные математические системы с <strong>Padding Hack</strong> (например, <code>padding-top: 56.25%</code>) для резервирования динамического пространства для YouTube iframe или фоновых изображений, чтобы избежать скачков контента (Cumulative Layout Shift, CLS) при загрузке страницы.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Сейчас все современные макеты напрямую применяют свойство <code>aspect-ratio: 16 / 9;</code>, создавая семантичный код и позволяя браузеру автоматически рассчитывать недостающее измерение на основе оригинальной ширины, заданной через Grid или Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Этот локальный калькулятор пикселей позволяет мгновенно рассчитать масштаб дизайна, что защитит ваши макеты от критических ошибок в настройках.',
+    },
+  ],
+};