@jjlmoya/utils-developer 1.2.0

package/src/tool/aspectRatio/i18n/es.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-aspect-ratio';
+const title = 'Calculadora de Aspect Ratio a Píxeles. Proporciones Online';
+const description =
+  'Calcula nuevas resoluciones de imagen, vídeo y diseño web y mantén la proporción exacta para no deformar gráficos. Soporta formatos 16:9, 4:3, 21:9 y customizados.';
+
+const faqData = [
+  {
+    question: '¿Qué es el Aspect Ratio o relación de aspecto?',
+    answer:
+      'El Aspect Ratio describe la relación geométrica entre la anchura y la altura de una imagen o pantalla. Se representa con dos números separados por dos puntos (ej. 16:9), indicando cómo varía la altura proporcionalmente en relación a la anchura.',
+  },
+  {
+    question: '¿Por qué es importante mantener las proporciones correctas?',
+    answer:
+      'Ignorar el Aspect Ratio genera imágenes achatadas o estiradas, vídeos con letterboxing inesperado y componentes web que rompen su maquetación en diferentes tamaños de pantalla. Mantener proporciones correctas es clave para una visualización profesional.',
+  },
+  {
+    question: '¿Cómo calcular el alto a partir del ancho con un ratio dado?',
+    answer:
+      'La fórmula es: Alto = Ancho × (Ratio Alto / Ratio Ancho). Por ejemplo, para un ancho de 1280px con ratio 16:9, el alto sería: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: '¿Cuál es el Aspect Ratio estándar para vídeos en YouTube?',
+    answer:
+      '16:9 es el ratio estándar para YouTube y la mayoría de plataformas de vídeo modernas. Equivale a resoluciones como 1280×720 (HD), 1920×1080 (Full HD) o 3840×2160 (4K UHD).',
+  },
+  {
+    question: '¿Qué Aspect Ratio usan los vídeos verticales de redes sociales?',
+    answer:
+      '9:16, que es exactamente el inverso del formato panorámico. Es el ratio nativo de TikTok, Instagram Reels y YouTube Shorts, originado por el consumo de contenido en móvil con el dispositivo en vertical.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Introducir el ratio original',
+    text: 'Escribe los valores de anchura y altura del ratio que quieres mantener (ej. 16 y 9 para formato panorámico) o selecciona uno de los presets.',
+  },
+  {
+    name: 'Ajustar el escalado',
+    text: 'Cambia el valor de ancho o de alto en la sección "Escala Real". La herramienta calculará automáticamente el valor opuesto para mantener la proporción.',
+  },
+  {
+    name: 'Verificar en la vista previa',
+    text: 'El panel de vista previa muestra la forma resultante a escala proporcional, con el ratio simplificado y la resolución calculada.',
+  },
+  {
+    name: 'Aplicar en tu proyecto',
+    text: 'Copia los valores calculados para usarlos en tu CSS (aspect-ratio: 16 / 9), en la exportación de vídeo o en la configuración de tu herramienta de diseño.',
+  },
+];
+
+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: 'es',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Configuración',
+  labelRatio: 'Ratio Original',
+  labelWidth: 'Ancho',
+  labelHeight: 'Alto',
+  labelScale: 'Escala Real',
+  labelPixelWidth: 'Píxeles (Ancho)',
+  labelPixelHeight: 'Píxeles (Alto)',
+  labelPreview: 'Vista Previa Proporcional',
+  labelStatus: 'Relación Perfecta',
+  labelOffline: '100% Offline Tool',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/es/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Relación de aspecto',
+      url: 'https://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto',
+    },
+    {
+      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: '¿Qué es el Aspect Ratio (Relación de Aspecto)?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En diseño gráfico, fotografía y desarrollo frontend, el <strong>Aspect Ratio</strong> o relación de aspecto describe la relación geométrica que existe entre la anchura y la altura de una imagen, pantalla o contenedor. Se representa típicamente con dos números separados por dos puntos (por ejemplo, <code>16:9</code>), indicando cómo aumenta proporcionalmente la altura en respuesta de su anchura.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Manejar mal las relaciones de aspecto es causa habitual de fotografías achatadas, vídeos con recortes imprevistos (letterboxing) o componentes web que rompen su maquetación al ser visualizados progresivamente desde el móvil hasta en monitores ultra anchos.',
+    },
+    {
+      type: 'title',
+      text: 'Ratios Comunes en la Industria',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dependiendo de tu disciplina, lidiarás constantemente con un número limitado de proporciones estándar globales:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Panorámico):</strong> El formato dominante absoluto para monitores modernos, televisores, grabaciones en YouTube o resoluciones estándar de alta definición (como 1920×1080 o 4K).',
+        '<strong>9:16 (Vertical):</strong> Originado a causa del consumo de contenido móvil nativo (TikTok, Instagram Reels, YouTube Shorts). Exactamente el mismo ratio que los vídeos panorámicos, pero con la rotación física del dispositivo aplicada.',
+        '<strong>4:3 (Clásico / Vintage):</strong> Presente en televisiones y monitores antiguos o en modelos de cámaras fotográficas análogas y digitales especializadas. Su apariencia ligeramente cuadrada atrae la atención directa sobre el eje central compositivo.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Desarrollo Web y la propiedad CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Antiguamente en CSS se dependía de complejos sistemas matemáticos usando un <strong>Padding Hack</strong> (como inyectar un <code>padding-top: 56.25%</code>) para reservar espacios dinámicos en los iframes de YouTube o imágenes de portada, con el fin de evitar un terrible Cumulative Layout Shift (CLS) en la carga de página.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Actualmente todas las maquetaciones modernas aplican directamente propiedades como <code>aspect-ratio: 16 / 9;</code>, logrando un código semántico y permitiendo al navegador derivar automágicamente la medida faltante desde el ancho original definido vía Grid o Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta calculadora local de píxeles transfiere la potencia de diseño a un cálculo de escalado instantáneo que protegerá tus renders de desconfiguraciones catastróficas.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/fr.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 = 'calculateur-ratio-format';
+const title = 'Calculateur de Ratio de Format en Pixels. Proportions en Ligne';
+const description =
+  "Calculez de nouvelles résolutions d'image, de vidéo et de web design en conservant la proportion exacte pour ne pas déformer les graphiques. Prend en charge les formats 16:9, 4:3, 21:9 et personnalisés.";
+
+const faqData = [
+  {
+    question: "Qu'est-ce que le Ratio de Format (Aspect Ratio) ?",
+    answer:
+      "Le Ratio de Format décrit la relation géométrique entre la largeur et la hauteur d'une image ou d'un écran. Il est représenté par deux chiffres séparés par deux points (ex. 16:9), indiquant comment la hauteur varie proportionnellement par rapport à la largeur.",
+  },
+  {
+    question: "Pourquoi est-il important de maintenir les bonnes proportions ?",
+    answer:
+      "Ignorer le Ratio de Format provoque des images écrasées ou étirées, un letterboxing inattendu dans les vidéos et des composants web qui cassent leur mise en page à différentes tailles d'écran. Maintenir les bonnes proportions est essentiel pour un affichage professionnel.",
+  },
+  {
+    question: "Comment calculer la hauteur à partir de la largeur avec un ratio donné ?",
+    answer:
+      "La formule est : Hauteur = Largeur × (Ratio Hauteur / Ratio Largeur). Par exemple, pour une largeur de 1280px avec un ratio 16:9, la hauteur serait : 1280 × (9/16) = 720px.",
+  },
+  {
+    question: "Quel est le Ratio de Format standard pour les vidéos YouTube ?",
+    answer:
+      "16:9 est le ratio standard pour YouTube et la plupart des plateformes vidéo modernes. Il correspond à des résolutions telles que 1280×720 (HD), 1920×1080 (Full HD) ou 3840×2160 (4K UHD).",
+  },
+  {
+    question: "Quel Ratio de Format utilisent les vidéos verticales des réseaux sociaux ?",
+    answer:
+      "9:16, qui est exactement l'inverse du format panoramique. C'est le ratio natif de TikTok, Instagram Reels et YouTube Shorts, né de la consommation de contenu sur téléphone en orientation verticale.",
+  },
+];
+
+const howToData = [
+  {
+    name: "Saisir le ratio original",
+    text: "Entrez les valeurs de largeur et de hauteur du ratio que vous souhaitez conserver (ex. 16 et 9 pour le format panoramique) ou sélectionnez l'un des préréglages.",
+  },
+  {
+    name: "Ajuster l'échelle",
+    text: 'Modifiez la valeur de la largeur ou de la hauteur dans la section "Échelle Réelle". L\'outil calculera automatiquement la valeur opposée pour maintenir la proportion.',
+  },
+  {
+    name: "Vérifier l'aperçu",
+    text: "Le panneau d'aperçu affiche la forme résultante à échelle proportionnelle, avec le ratio simplifié et la résolution calculée.",
+  },
+  {
+    name: "Appliquer dans votre projet",
+    text: "Copiez les valeurs calculées pour les utiliser dans votre CSS (aspect-ratio: 16 / 9), dans l'export vidéo ou dans les paramètres de votre outil 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: 'fr',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Configuration',
+  labelRatio: 'Ratio Original',
+  labelWidth: 'Largeur',
+  labelHeight: 'Hauteur',
+  labelScale: 'Échelle Réelle',
+  labelPixelWidth: 'Pixels (Largeur)',
+  labelPixelHeight: 'Pixels (Hauteur)',
+  labelPreview: 'Aperçu Proportionnel',
+  labelStatus: 'Proportion Parfaite',
+  labelOffline: '100% Outil Hors Ligne',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et Documentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Format d\'image',
+      url: 'https://fr.wikipedia.org/wiki/Format_d%27image',
+    },
+    {
+      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: "Qu'est-ce que le Ratio de Format (Aspect Ratio) ?",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "En design graphique, photographie et développement frontend, l'<strong>Aspect Ratio</strong> ou ratio de format décrit la relation géométrique entre la largeur et la hauteur d'une image, d'un écran ou d'un conteneur. Il est représenté par deux chiffres séparés par deux points (ex. <code>16:9</code>), indiquant comment la hauteur augmente proportionnellement en fonction de la largeur.",
+    },
+    {
+      type: 'paragraph',
+      html: "Mal gérer les ratios de format est une cause habituelle de photographies écrasées, de vidéos avec des recadrages imprévus (letterboxing) ou de composants web qui cassent leur mise en page lors de l'affichage sur des écrans de différentes tailles.",
+    },
+    {
+      type: 'title',
+      text: 'Ratios Courants dans l\'Industrie',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Selon votre discipline, vous devrez constamment gérer un nombre limité de proportions standard mondiales :',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Panoramique) :</strong> Le format dominant pour les moniteurs modernes, téléviseurs, enregistrements YouTube ou résolutions haute définition standard (comme 1920×1080 ou 4K).',
+        '<strong>9:16 (Vertical) :</strong> Né de la consommation de contenu mobile natif (TikTok, Instagram Reels, YouTube Shorts). Exactement le même ratio que les vidéos panoramiques, mais avec la rotation physique du dispositif appliquée.',
+        '<strong>4:3 (Classique / Vintage) :</strong> Présent dans les anciennes télévisions et moniteurs ou dans les appareils photo argentiques et numériques spécialisés. Son apparence légèrement carrée attire directement l\'attention sur l\'axe central compositionnel.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Développement Web et la propriété CSS aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Autrefois en CSS, on dépendait de systèmes mathématiques complexes utilisant un <strong>Padding Hack</strong> (comme injecter un <code>padding-top: 56.25%</code>) pour réserver des espaces dynamiques dans les iframes YouTube ou les images de couverture, afin d'éviter un terrible Cumulative Layout Shift (CLS).",
+    },
+    {
+      type: 'paragraph',
+      html: "Aujourd'hui, toutes les mises en page modernes appliquent directement des propriétés comme <code>aspect-ratio: 16 / 9;</code>, obtenant un code sémantique et permettant au navigateur de dériver automatiquement la mesure manquante à partir de la largeur originale définie via Grid ou Flexbox.",
+    },
+    {
+      type: 'paragraph',
+      html: "Ce calculateur local de pixels transfère la puissance de design à un calcul de mise à l'échelle instantané qui protégera vos rendus des mauvaises configurations.",
+    },
+  ],
+};

package/src/tool/aspectRatio/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import AspectRatioComponent from './component.astro';
+import AspectRatioSEO from './seo.astro';
+import AspectRatioBibliography from './bibliography.astro';
+
+import type { AspectRatioUI } from './ui';
+
+export type AspectRatioLocaleContent = ToolLocaleContent<AspectRatioUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const aspectRatio: DeveloperToolEntry<AspectRatioUI> = {
+  id: 'aspect-ratio',
+  icons: {
+    bg: 'mdi:aspect-ratio',
+    fg: 'mdi:resize',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { AspectRatioComponent, AspectRatioSEO, AspectRatioBibliography };
+
+export const ASPECT_RATIO_TOOL: ToolDefinition = {
+  entry: aspectRatio,
+  Component: AspectRatioComponent,
+  SEOComponent: AspectRatioSEO,
+  BibliographyComponent: AspectRatioBibliography,
+};

package/src/tool/aspectRatio/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { aspectRatio } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await aspectRatio.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/aspectRatio/ui.ts

@@ -0,0 +1,12 @@
+export interface AspectRatioUI extends Record<string, string> {
+  labelConfig: string;
+  labelRatio: string;
+  labelWidth: string;
+  labelHeight: string;
+  labelScale: string;
+  labelPixelWidth: string;
+  labelPixelHeight: string;
+  labelPreview: string;
+  labelStatus: string;
+  labelOffline: string;
+}

package/src/tool/calculadoraTiempoDatos/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { calculadoraTiempoDatos } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await calculadoraTiempoDatos.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}