@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/aspectRatio/i18n/de.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 = 'seitenverhaeltnis-rechner';
+const title = 'Seitenverhältnis Rechner in Pixeln. Online Proportionen';
+const description =
+  'Berechnen Sie neue Bild-, Video- und Webdesign-Auflösungen und behalten Sie die exakten Proportionen bei, um grafische Verzerrungen zu vermeiden. Unterstützt 16:9, 4:3, 21:9 und benutzerdefinierte Formate.';
+
+const faqData = [
+  {
+    question: 'Was ist das Seitenverhältnis?',
+    answer:
+      'Das Seitenverhältnis (Aspect Ratio) beschreibt das geometrische Verhältnis zwischen der Breite und der Höhe eines Bildes oder Bildschirms. Es wird durch zwei Zahlen dargestellt, die durch einen Doppelpunkt getrennt sind (z. B. 16:9), und gibt an, wie sich die Höhe proportional zur Breite verändert.',
+  },
+  {
+    question: 'Warum ist es wichtig, die korrekten Proportionen beizubehalten?',
+    answer:
+      'Das Ignorieren des Seitenverhältnisses führt zu gestauchten oder gestreckten Bildern, unerwünschten schwarzen Balken (Letterboxing) in Videos und Webkomponenten, deren Layout bei unterschiedlichen Bildschirmgrößen zerstört wird. Die Beibehaltung korrekter Proportionen ist entscheidend für eine professionelle Darstellung.',
+  },
+  {
+    question: 'Wie berechne ich die Höhe aus der Breite bei einem gegebenen Verhältnis?',
+    answer:
+      'Die Formel lautet: Höhe = Breite × (Verhältnis Höhe / Verhältnis Breite). Beispiel: Bei einer Breite von 1280px mit einem Verhältnis von 16:9 wäre die Höhe: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Was ist das Standard-Seitenverhältnis für YouTube-Videos?',
+    answer:
+      '16:9 ist das Standardverhältnis für YouTube und die meisten modernen Videoplattformen. Es entspricht Auflösungen wie 1280×720 (HD), 1920×1080 (Full HD) oder 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Welches Seitenverhältnis nutzen vertikale Social-Media-Videos?',
+    answer:
+      '9:16, was genau dem Umkehrschluss des Breitbildformats entspricht. Es ist das native Verhältnis für TikTok, Instagram Reels und YouTube Shorts, bedingt durch die vertikale Nutzung von Smartphones.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Originalverhältnis eingeben',
+    text: 'Geben Sie die Breiten- und Höhenwerte des Verhältnisses ein, das Sie beibehalten möchten (z. B. 16 und 9 für Breitbild), oder wählen Sie eine der Voreinstellungen.',
+  },
+  {
+    name: 'Skalierung anpassen',
+    text: 'Ändern Sie den Breiten- oder Höhenwert im Abschnitt "Echtmaßstab". Das Tool berechnet automatisch den jeweils anderen Wert, um die Proportionen zu wahren.',
+  },
+  {
+    name: 'Vorschau prüfen',
+    text: 'Das Vorschauband zeigt die resultierende Form im proportionalen Maßstab mit dem vereinfachten Verhältnis und der berechneten Auflösung.',
+  },
+  {
+    name: 'In Ihr Projekt übernehmen',
+    text: 'Kopieren Sie die berechneten Werte, um sie in Ihrem CSS (aspect-ratio: 16 / 9), beim Video-Export oder in den Einstellungen Ihres Design-Tools zu verwenden.',
+  },
+];
+
+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: 'de',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Konfiguration',
+  labelRatio: 'Originalverhältnis',
+  labelWidth: 'Breite',
+  labelHeight: 'Höhe',
+  labelScale: 'Echtmaßstab',
+  labelPixelWidth: 'Pixel (Breite)',
+  labelPixelHeight: 'Pixel (Höhe)',
+  labelPreview: 'Proportionale Vorschau',
+  labelStatus: 'Perfektes Verhältnis',
+  labelOffline: '100% Offline-Tool',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Seitenverhältnis',
+      url: 'https://de.wikipedia.org/wiki/Seitenverhältnis',
+    },
+    {
+      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: 'Was ist das Seitenverhältnis?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Im Grafikdesign, in der Fotografie und in der Frontend-Entwicklung beschreibt das <strong>Seitenverhältnis</strong> (Aspect Ratio) die geometrische Beziehung zwischen der Breite und der Höhe eines Bildes, eines Bildschirms oder eines Containers. Es wird üblicherweise durch zwei Zahlen dargestellt, die durch einen Doppelpunkt getrennt sind (z. B. <code>16:9</code>), und gibt an, wie die Höhe proportional zur Breite skaliert wird.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Falsch gehandhabte Seitenverhältnisse sind eine häufige Ursache für gestauchte Fotos, Videos mit unerwartetem Beschnitt (Letterboxing) oder Webkomponenten, deren Layout beim Betrachten auf unterschiedlichen Geräten – vom Smartphone bis hin zu Ultra-Wide-Monitoren – fehlerhaft dargestellt wird.',
+    },
+    {
+      type: 'title',
+      text: 'Gängige Branchenverhältnisse',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Je nach Fachbereich werden Sie ständig mit einer begrenzten Anzahl an globalen Standardproportionen zu tun haben:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Widescreen):</strong> Das absolut dominante Format für moderne Monitore, Fernseher, YouTube-Aufnahmen oder Standard-HD-Auflösungen (wie 1920×1080 oder 4K).',
+        '<strong>9:16 (Vertikal):</strong> Entstanden durch die native Nutzung von Inhalten auf Mobilgeräten (TikTok, Instagram Reels, YouTube Shorts). Exakt das gleiche Verhältnis wie Breitbildvideos, jedoch mit einer physischen Drehung des Geräts.',
+        '<strong>4:3 (Klassisch / Vintage):</strong> Zu finden bei alten Fernsehern und Monitoren sowie bei analogen und speziellen digitalen Kameramodellen. Die fast quadratische Optik lenkt den Blick direkt auf die zentrale Bildachse.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Webentwicklung und die CSS-Eigenschaft aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Früher wurden in CSS komplexe mathematische Systeme mit einem <strong>Padding-Hack</strong> (wie <code>padding-top: 56.25%</code>) verwendet, um dynamische Platzhalter für YouTube-Iframes oder Titelbilder zu reservieren und so ein störendes Cumulative Layout Shift (CLS) beim Laden der Seite zu vermeiden.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Heutzutage nutzen alle modernen Layouts direkt Eigenschaften wie <code>aspect-ratio: 16 / 9;</code>. Dies sorgt für semantischen Code und ermöglicht es dem Browser, die fehlende Dimension automatisch von der ursprünglichen, über Grid oder Flexbox definierten Breite abzuleiten.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieser lokale Pixel-Rechner unterstützt Sie dabei, durch sofortige Skalierungsberechnungen Designfehler und katastrophale Fehlkonfigurationen zu vermeiden.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/id.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-rasio-aspek';
+const title = 'Kalkulator Rasio Aspek dalam Piksel. Proporsi Online';
+const description =
+  'Hitung resolusi gambar, video, dan desain web baru sambil tetap mempertahankan proporsi yang tepat untuk menghindari distorsi grafis. Mendukung format 16:9, 4:3, 21:9, dan khusus.';
+
+const faqData = [
+  {
+    question: 'Apa itu Rasio Aspek?',
+    answer:
+      'Rasio Aspek menjelaskan hubungan geometris antara lebar dan tinggi gambar atau layar. Ini direpresentasikan dengan dua angka yang dipisahkan oleh titik dua (misalnya 16:9), yang menunjukkan bagaimana tinggi berubah secara proporsional terhadap lebar.',
+  },
+  {
+    question: 'Mengapa penting untuk menjaga proporsi yang benar?',
+    answer:
+      'Mengabaikan Rasio Aspek menyebabkan gambar tampak gepeng atau tertarik, munculnya kotak hitam (letterboxing) yang tidak diinginkan pada video, dan komponen web yang tata letaknya rusak pada ukuran layar yang berbeda. Menjaga proporsi yang benar adalah kunci tampilan profesional.',
+  },
+  {
+    question: 'Bagaimana cara menghitung tinggi dari lebar dengan rasio tertentu?',
+    answer:
+      'Rumusnya adalah: Tinggi = Lebar × (Tinggi Rasio / Lebar Rasio). Contohnya, untuk lebar 1280px dengan rasio 16:9, tingginya adalah: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Berapa Rasio Aspek standar untuk video YouTube?',
+    answer:
+      '16:9 adalah rasio standar untuk YouTube dan sebagian besar platform video modern. Ini sesuai dengan resolusi seperti 1280×720 (HD), 1920×1080 (Full HD), atau 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Rasio Aspek apa yang digunakan video media sosial vertikal?',
+    answer:
+      '9:16, yang merupakan kebalikan dari format widescreen. Ini adalah rasio asli TikTok, Instagram Reels, dan YouTube Shorts, yang berasal dari penggunaan ponsel secara vertikal.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Masukkan rasio asli',
+    text: 'Masukkan nilai lebar dan tinggi dari rasio yang ingin Anda pertahankan (misalnya 16 dan 9 untuk widescreen) atau pilih salah satu preset.',
+  },
+  {
+    name: 'Sesuaikan skala',
+    text: 'Ubah nilai lebar atau tinggi di bagian "Skala Nyata". Alat ini akan secara otomatis menghitung nilai pasangannya untuk menjaga proporsi.',
+  },
+  {
+    name: 'Periksa pratinjau',
+    text: 'Panel pratinjau menunjukkan bentuk yang dihasilkan dalam skala proporsional, dengan rasio yang disederhanakan dan resolusi yang dihitung.',
+  },
+  {
+    name: 'Terapkan di proyek Anda',
+    text: 'Salin nilai yang dihitung untuk digunakan dalam CSS Anda (aspect-ratio: 16 / 9), dalam ekspor video, atau dalam pengaturan alat desain Anda.',
+  },
+];
+
+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: 'id',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Konfigurasi',
+  labelRatio: 'Rasio Asli',
+  labelWidth: 'Lebar',
+  labelHeight: 'Tinggi',
+  labelScale: 'Skala Nyata',
+  labelPixelWidth: 'Piksel (Lebar)',
+  labelPixelHeight: 'Piksel (Tinggi)',
+  labelPreview: 'Pratinjau Proporsional',
+  labelStatus: 'Rasio Sempurna',
+  labelOffline: 'Alat 100% Offline',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  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://en.wikipedia.org/wiki/Aspect_ratio',
+    },
+    {
+      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: 'Apa itu Rasio Aspek?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dalam desain grafis, fotografi, dan pengembangan frontend, <strong>Rasio Aspek</strong> menjelaskan hubungan geometris antara lebar dan tinggi gambar, layar, atau kontainer. Biasanya direpresentasikan dengan dua angka yang dipisahkan oleh titik dua (misalnya <code>16:9</code>), yang menunjukkan bagaimana tinggi bertambah secara proporsional sebagai respons terhadap lebarnya.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Kesalahan penanganan rasio aspek adalah penyebab umum foto yang tampak gepeng, video dengan pemotongan yang tidak terduga (letterboxing), atau komponen web yang tata letaknya rusak saat dilihat dari ponsel hingga monitor ultra-lebar.',
+    },
+    {
+      type: 'title',
+      text: 'Rasio Umum di Industri',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tergantung pada disiplin ilmu Anda, Anda akan terus berurusan dengan sejumlah kecil proporsi standar global:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Widescreen):</strong> Format dominan mutlak untuk monitor modern, TV, rekaman YouTube, atau resolusi definisi tinggi standar (seperti 1920×1080 atau 4K).',
+        '<strong>9:16 (Vertikal):</strong> Berasal dari konsumsi konten seluler asli (TikTok, Instagram Reels, YouTube Shorts). Rasio yang sama persis dengan video widescreen, tetapi dengan rotasi fisik perangkat yang diterapkan.',
+        '<strong>4:3 (Klasik / Vintage):</strong> Ada pada televisi dan monitor lama atau pada model kamera digital analog dan khusus. Penampilannya yang agak persegi menarik perhatian langsung ke sumbu komposisi tengah.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Pengembangan Web dan properti CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dahulu dalam CSS, sistem matematika yang rumit menggunakan <strong>Padding Hack</strong> (seperti menyisipkan <code>padding-top: 56.25%</code>) digunakan untuk memesan ruang dinamis pada iframe YouTube atau gambar sampul, untuk menghindari Cumulative Layout Shift (CLS) yang buruk saat pemuatan halaman.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Saat ini, semua tata letak modern secara langsung menerapkan properti seperti <code>aspect-ratio: 16 / 9;</code>, menghasilkan kode semantik dan memungkinkan browser secara otomatis menurunkan dimensi yang hilang dari lebar asli yang ditentukan melalui Grid atau Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Kalkulator piksel lokal ini mentransfer kekuatan desain ke perhitungan penskalaan instan yang akan melindungi render Anda dari miskonfigurasi fatal.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/it.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 = 'calcolatore-proporzioni';
+const title = 'Calcolatore Proporzioni (Aspect Ratio) in Pixel. Proporzioni Online';
+const description =
+  'Calcola nuove risoluzioni per immagini, video e web design mantenendo l\'esatta proporzione per evitare distorsioni grafiche. Supporta i formati 16:9, 4:3, 21:9 e personalizzati.';
+
+const faqData = [
+  {
+    question: 'Cos\'è l\'Aspect Ratio (proporzione)?',
+    answer:
+      'L\'Aspect Ratio descrive la relazione geometrica tra la larghezza e l\'altezza di un\'immagine o di uno schermo. Viene rappresentato con due numeri separati da due punti (ad es. 16:9), indicando come l\'altezza cambia proporzionalmente rispetto alla larghezza.',
+  },
+  {
+    question: 'Perché è importante mantenere le proporzioni corrette?',
+    answer:
+      'Ignorare l\'Aspect Ratio causa immagini schiacciate o allungate, barre nere indesiderate (letterboxing) nei video e componenti web che rompono il loro layout a diverse dimensioni di schermo. Mantenere le proporzioni corrette è fondamentale per una visualizzazione professionale.',
+  },
+  {
+    question: 'Come calcolo l\'altezza dalla larghezza con un dato rapporto?',
+    answer:
+      'La formula è: Altezza = Larghezza × (Altezza Rapporto / Larghezza Rapporto). Ad esempio, per una larghezza di 1280px con un rapporto 16:9, l\'altezza sarebbe: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Qual è l\'Aspect Ratio standard per i video di YouTube?',
+    answer:
+      'Il rapporto 16:9 è lo standard per YouTube e la maggior parte delle moderne piattaforme video. Corrisponde a risoluzioni come 1280×720 (HD), 1920×1080 (Full HD) o 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Quale Aspect Ratio utilizzano i video verticali sui social media?',
+    answer:
+      '9:16, che è esattamente l\'inverso del formato widescreen. È il rapporto nativo di TikTok, Instagram Reels e YouTube Shorts, originato dal consumo di contenuti su uno smartphone tenuto verticalmente.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Inserisci il rapporto originale',
+    text: 'Inserisci i valori di larghezza e altezza del rapporto che vuoi mantenere (ad es. 16 e 9 per il widescreen) o seleziona uno dei preset.',
+  },
+  {
+    name: 'Regola la scala',
+    text: 'Cambia il valore della larghezza o dell\'altezza nella sezione "Scala reale". Lo strumento calcolerà automaticamente il valore opposto per mantenere la proporzione.',
+  },
+  {
+    name: 'Controlla l\'anteprima',
+    text: 'Il pannello di anteprima mostra la forma risultante in scala proporzionale, con il rapporto semplificato e la risoluzione calcolata.',
+  },
+  {
+    name: 'Applica nel tuo progetto',
+    text: 'Copia i valori calcolati per usarli nel tuo CSS (aspect-ratio: 16 / 9), nell\'esportazione dei video o nelle impostazioni del tuo strumento di progettazione.',
+  },
+];
+
+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: 'it',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Configurazione',
+  labelRatio: 'Rapporto originale',
+  labelWidth: 'Larghezza',
+  labelHeight: 'Altezza',
+  labelScale: 'Scala reale',
+  labelPixelWidth: 'Pixel (Larghezza)',
+  labelPixelHeight: 'Pixel (Altezza)',
+  labelPreview: 'Anteprima proporzionale',
+  labelStatus: 'Proporzione perfetta',
+  labelOffline: 'Strumento 100% offline',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e documentazione',
+  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://it.wikipedia.org/wiki/Rapporto_d\'aspetto',
+    },
+    {
+      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: 'Cos\'è l\'Aspect Ratio?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nel graphic design, nella fotografia e nello sviluppo frontend, l\'<strong>Aspect Ratio</strong> descrive la relazione geometrica tra la larghezza e l\'altezza di un\'immagine, di uno schermo o di un contenitore. Viene tipicamente rappresentato con due numeri separati da due punti (ad es. <code>16:9</code>), indicando come l\'altezza aumenta proporzionalmente in risposta alla sua larghezza.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Una gestione errata delle proporzioni è una causa comune di fotografie schiacciate, video con ritagli imprevisti (letterboxing) o componenti web che rompono i loro layout quando visualizzati progressivamente da mobile a monitor ultra-wide.',
+    },
+    {
+      type: 'title',
+      text: 'Rapporti comuni del settore',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'A seconda della tua disciplina, avrai costantemente a che fare con un numero limitato di proporzioni standard globali:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Widescreen):</strong> Il formato assolutamente dominante per monitor moderni, TV, registrazioni YouTube o risoluzioni standard ad alta definizione (come 1920×1080 o 4K).',
+        '<strong>9:16 (Verticale):</strong> Originato dal consumo nativo di contenuti mobile (TikTok, Instagram Reels, YouTube Shorts). Esattamente lo stesso rapporto dei video widescreen, ma con la rotazione fisica del dispositivo applicata.',
+        '<strong>4:3 (Classico / Vintage):</strong> Presente nelle vecchie televisioni e monitor o nei modelli di macchine fotografiche analogiche e digitali specializzate. Il suo aspetto leggermente quadrato attira l\'attenzione direttamente sull\'asse compositivo centrale.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Sviluppo Web e la proprietà CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'In precedenza nei CSS, venivano utilizzati complessi sistemi matematici che utilizzavano un <strong>Padding Hack</strong> (come l\'inserimento di un <code>padding-top: 56.25%</code>) per riservare spazi dinamici negli iframe di YouTube o nelle immagini di copertina, per evitare il terribile Cumulative Layout Shift (CLS) al caricamento della pagina.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Oggigiorno tutti i layout moderni applicano direttamente proprietà come <code>aspect-ratio: 16 / 9;</code>, ottenendo un codice semantico e permettendo al browser di ricavare automaticamente la dimensione mancante dalla larghezza originale definita via Grid o Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Questo calcolatore di pixel locale trasferisce il potere del design a un calcolo di ridimensionamento istantaneo che proteggerà i tuoi render da errori di configurazione catastrofici.',
+    },
+  ],
+};