Skip to content

Commit

Permalink
i18n(es): update images.md and cli-reference.md (#1930)
Browse files Browse the repository at this point in the history 
* i18n(es): images guide fixes

* i18n(es): update astro preview docs after 1.5

* i18n(es): apply review suggestions

* i18n(es): apply suggestions from code review

Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>

* i18n(es): update src/pages/es/guides/images.md

Co-authored-by: Brad Adams <hi@breadadams.com>

* i18n(es): add missing spaces

Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
Co-authored-by: Brad Adams <hi@breadadams.com>
  • Loading branch information
@fredoist @kevinzunigacuellar @breadadams
3 people authored Oct 28, 2022
1 parent 868c6a4 commit b59e647
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 49 deletions.
97 changes: 52 additions & 45 deletions src/pages/es/guides/images.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,19 @@ Astro usa las etiquetas estándar de HTML `<img>` o `<img />` para mostrar imág
// src/pages/index.astro
import rocket from '../images/rocket.svg';
---
<!-- Imagen remota en otro servidor -->
<!-- Imagen remota en otro servidor -->
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">
<!-- Imagen local almacenada en public/assets/stars.png -->
<img src="/assets/stars.png" alt="Un cielo nocturno estrellado.">
<!-- Imagen local almacenada en src/images/rocket.svg -->
<img src={rocket} alt="Un cohete en el espacio."/>
<img src={rocket} alt="Un cohete en el espacio." />
```

### En archivos `.md`

Puedes usar la sintaxis estándar de Markdown `![]()` o las etiquetas estándar de HTML `<img>` en tus archivos `.md` para mostrar imágenes locales en tu carpeta `public/` o imágenes remotas en otro servidor.
Puedes usar la sintaxis estándar de Markdown `![]()` o las etiquetas estándar de HTML `<img>` en tus archivos `.md` para mostrar imágenes locales en tu carpeta `public/` o imágenes remotas en otro servidor.

```md
// src/pages/post-1.md
Expand Down Expand Up @@ -58,7 +58,7 @@ import rocket from '../images/rocket.svg';
# Mi página MDX

// Imagen local almacenada en src/images/rocket.svg
<img src={rocket} alt="Un cohete en el espacio."/>
<img src={rocket} alt="Un cohete en el espacio." />

// Imagen local almacenada en public/assets/stars.png
![Un cielo nocturno estrellado.](/assets/stars.png)
Expand Down Expand Up @@ -113,58 +113,54 @@ Consulta la [guía de la integración image](/es/guides/integrations-guide/image
La integración oficial de Astro, image, proporciona dos componentes Astro para renderizar imágenes optimizadas: `<Image />` y `<Picture />`.

Después de [instalar la integración](/es/guides/integrations-guide/image/#installation), puedes importar y usar estos dos componentes en cualquier lugar donde puedas usar componentes Astro, incluyendo archivos `.mdx`.

:::note
Los componentes de Astro `<Image />` y `<Picture />` no pueden ser usados con imágenes dentro de la carpeta `public/`. Usa la sintaxis estándar de HTML o Markdown en lugar de estos componentes.
:::

:::caution
Los componentes de Astro `<Image />` y `<Picture />` requieren de un atributo `alt` que proporcione un texto descriptivo para las imágenes. Estos componentes lanzarán un error si no contienen un texto `alt`.

Si la imagen es meramente decorativa (es decir, no contribuye a la comprensión de la página), establece `alt=""` para que la imagen sea entendida de manera correcta e ignorada por los lectores de pantalla.
:::

### `<Image />`

El [componente `<Image />`](/es/guides/integrations-guide/image/#image-) de Astro permite optimizar una imagen individual y especificar el ancho, el alto y/o la relación de aspecto. Puedes transformar tu imagen a un formato particular, que puede ser usado para evitar comprobar el tipo de archivo de las imágenes remotas.
El [componente `<Image />`](/es/guides/integrations-guide/image/#image-) de Astro permite optimizar una imagen individual y especificar el ancho, el alto y/o la relación de aspecto. Puedes transformar tu imagen a un formato particular.

Este componente es útil para imágenes en las que quieres mantener un tamaño consistente en pantallas, o controlar la calidad de una imagen (ej. logos).

#### Imágenes locales

Las imágenes en la carpeta origen de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al atributo `src` del componente `<Image />`. Todas las demás propiedades son opcionales y se definirán por defecto con las propiedades originales del archivo de imágenes si no se proporcionan.
Las imágenes en la carpeta origen de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al atributo `src` del componente `<Image />`. `alt` es requerido, pero todas las demás propiedades son opcionales y se definirán por defecto con las propiedades originales del archivo de imagen si no se proporcionan.

#### Imágenes remotas

Las imágenes remotas requieren una URL completa en el atributo `src` de la imagen. También debes proporcionar `width` y `height` o uno de los dos tamaños junto a `aspectRatio` al componente `<Image />`.
Para usar una imagen remota, pasa una URL completa en el atributo `src` de `<Image />`. `<Image />` no inferirá las dimensiones de este archivo remoto. Debes proporcionar el `formato` para renderizar el width de la imagen, y debes proporcionar `width` y `height` o uno de los dos tamaños junto a `aspectRatio`. El atributo `alt` también es requerido.

#### Ejemplos

```astro
---
// src/pages/index.astro
import { Image } from '@astrojs/image/components';
import localImage from '../assets/local.png';
const imageUrl = 'https://astro.build/assets/logo.png';
import localImage from '../assets/logo.png';
const remoteImage = 'https://picsum.photos/id/957/300/200.jpg';
const localAlt = 'El Logo de Astro';
const remoteAlt = 'Una vista de un bosque durante el día';
---
// Imagen local optimizada, manteniendo el ancho, alto y formato de imagen original
<Image src={localImage} />
<!-- Imagen local optimizada, manteniendo el ancho, alto y formato de imagen original -->
<Image src={localImage} alt={localAlt} />
<!-- height se recalculará para que coincida con la relación de aspecto original -->
<Image src={localImage} width={300} alt={localAlt} />
// La altura se recalculara para que coincida con la original (solo local) o con la relación de aspecto especificada
<Image src={localImage} width={300} />
<Image src={imageUrl} width={300} aspectRatio={16/9} />
<!-- Para imágenes remotas, las dimensiones deseadas y el formato son requeridos -->
<Image src={remoteImage} width={300} aspectRatio="1:1" format="png" alt={remoteAlt} />
// Ajustar a un ancho y alto específicos
<Image src={localImage} width={300} height={600} />
<Image src={imageUrl} width={544} height={184} />
<!-- Ajustar a un ancho y alto específicos -->
<Image src={localImage} width={300} height={600} alt={localAlt} />
<Image src={remoteImage} width={544} height={184} format="png" alt={remoteAlt} />
// Ajustar a una relación de aspecto específica y convertir a formato avif
<Image src={localImage} aspectRatio="16:9" format="avif" />
<Image src={imageUrl} height={200} aspectRatio="16:9" format="avif" />
<!-- Ajustar a una relación de aspecto específica y convertir a formato avif -->
<Image src={localImage} aspectRatio="16:9" format="avif" alt={localAlt} />
<Image src={remoteImage} height={200} aspectRatio="16:9" format="avif" alt={remoteAlt} />
// Las imágenes locales también pueden importarse directamente
<Image src={import('../assets/local.png')} />
<!-- Importaciones de imágenes locales pueden hacerse en línea -->
<Image src={import('../assets/logo.png')} alt={localAlt} />
<!-- Si una imagen es alojada en el directorio `/public`, usa una ruta relativa a `/public` -->
<Image src="/penguin.jpg" width="300" aspectRatio={1} format="png" alt="A happy penguin" />
```

### `<Picture /> `
Expand All @@ -181,29 +177,31 @@ Por defecto, el componente `<Picture />` incluirá los formatos `avif` y `webp`

#### Imágenes locales

Las imágenes locales en la carpeta `src` de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al componente `<Picture />`. `src`, `widths`, y `sizes` son propiedades requeridas.
Las imágenes locales en la carpeta `src` de tu proyecto pueden ser importadas en el frontmatter y pasadas directamente al componente `<Picture />`. `src`, `widths`, `sizes` y `alt` son propiedades requeridas.

#### Imágenes remotas
#### Imágenes remotas

Además de `src`, `widths`, y `sizes`, `aspectRatio` también es requerido para asegurar que la correcta `height` puede ser calculada en tiempo de compilación.
Además de `src`, `widths`, `sizes`, `alt` y `aspectRatio` también es requerido para asegurar que la correcta `height` puede ser calculada en tiempo de compilación.

#### Ejemplos

```astro
---
import { Picture } from '@astrojs/image/components';
import localImage from '../assets/localImage.png';
const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
import localImage from '../assets/logo.png';
const remoteImage = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
---
// Imagen local con múltiples tamaños y formatos
<Picture src={localImage} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats={['avif', 'jpeg', 'png', 'webp']} alt="My local image" />
<!-- Imagen local con múltiples tamaños y formatos -->
<Picture src={localImage} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats={['avif', 'jpeg', 'png', 'webp']} alt="El logo de Astro" />
// Imagen remota (la relación de aspecto es requerida)
<Picture src={imageUrl} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="My remote image" />
<!-- Imagen remota (la relación de aspecto es requerida)-->
<Picture src={remoteImage} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="El logo de Google" />
// Las importaciones en línea son soportadas
<Picture src={import("../assets/localImage.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="My local image" />
<!-- Imágenes en /public funcionan como imágenes remotas -->
<Picture src="/logo.png" widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="El logo de Google" />
<!-- Importaciones en linea están soportadas -->
<Picture src={import("../assets/logo.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="El logo de Astro" />
```

### Uso en MDX
Expand All @@ -217,12 +215,21 @@ import { Image, Picture } from '@astrojs/image/components';
import rocket from '../assets/rocket.png';
export const galaxy = 'https://astro.build/assets/galaxy.jpg';

<Image src={import('../assets/logo.png')} alt="Astro"/>
<Image src={rocket} width={300} alt="Cohete acercándose a la luna."/>
<Image src={import('../assets/logo.png')} alt="Astro" />
<Image src={rocket} width={300} alt="Cohete acercándose a la luna." />
<Picture src={rocket} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="Un cohete despegando." />
<Picture src={galaxy} widths={[200, 400, 800]} aspectRatio={16/9} sizes="(max-width: 800px) 100vw, 800px" alt="Espacio exterior." />
```

## Alt Text

No todos los usuarios pueden ver imágenes de la misma forma, así que la accesibilidad es una preocupación especialmente importante cuando se utilizan imágenes. Usa el atributo `alt` para proveer [texto alt descriptivo](https://www.w3.org/WAI/tutorials/images/) para las imágenes.

Este atributo es requerido para los componentes de integración de imagen `<Image />` y `<Picture />`. Estos componentes arrojarán un error si no se provee un texto alt.

Si la imagen es meramente decorativa (p.ej. no contribuye al entendimiento de la página), establece `alt=""` para que la imagen sea entendida adecuadamente e ignorada por los lectores de pantalla.


## Usar imágenes de un CMS o una CDN

Las CDNs de imágenes funcionan con Astro. Usa la URL como el atributo `src` de una imagen como lo haría al escribir HTML o JSX, o como el atributo `src` de una imagen remota con los componentes `<Image />` y `<Picture />`.
Expand Down
6 changes: 2 additions & 4 deletions src/pages/es/reference/cli-reference.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,9 @@ Inicia un servidor local para servir tus archivos estáticos compilados en `dist

Este comando es útil para obtener una vista previa de tu proyecto usando los archivos generados en la compilación final, antes de ser desplegado. Este comando no está diseñado para ejecutarse en producción. Para obtener ayuda con el despliegue a producción, consulte nuestra guía de [despliegue de un sitio web de Astro](/es/guides/deploy/).

Puede combinarse con las [flags comunes](#flags-comunes) documentadas más abajo.
Desde Astro 1.5.0, `astro preview` también funciona para compilaciones con SSR si usas un adaptador que lo soporte. Actualmente, solo el [adaptador de Node](/es/guides/integrations-guide/node/) soporta `astro preview`.

:::caution
`astro preview` no funciona con construcciones que usen SSR, el cual requiere que el uso de un tiempo de ejecución en el servidor y su adaptador correspondiente.
:::
Puede combinarse con las [flags comunes](#flags-comunes) documentadas más abajo.

## `astro check`

Expand Down

0 comments on commit b59e647

Please sign in to comment.