Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[es]: auto-fix links #25013

Merged
merged 6 commits into from
Dec 17, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ slug: conflicting/Learn/CSS/CSS_layout/Responsive_Design
original_slug: Web/Guide/Mobile
---

Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de [Firefox OS](/en/Mozilla/Firefox_OS). O podría estar interesado en detalles sobre [Firefox para Android](/en/Mozilla/Firefox_for_Android).
Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de [Firefox OS](/en-US/Mozilla/Firefox_OS). O podría estar interesado en detalles sobre [Firefox para Android](/en-US/Mozilla/Firefox_for_Android).

Hemos organizado esta documentación en dos secciones, [diseñando para dispositivos móviles](#DisenandoParaDispositivosMoviles) y [desarrollo para diferentes navegadores](#DesarrolloParaDiferentesNavegadores). Vea también la guía a la [amigabilidad móvil](/es/docs/Web_Development/Mobile/Mobile-friendliness) para desarrolladores web de Jason Grlicky.
Hemos organizado esta documentación en dos secciones, [diseñando para dispositivos móviles](#disenandoparadispositivosmoviles) y [desarrollo para diferentes navegadores](#desarrolloparadiferentesnavegadores). Vea también la guía a la [amigabilidad móvil](/es/docs/Learn/CSS/CSS_layout/Responsive_Design) para desarrolladores web de Jason Grlicky.

## Diseñando para dispositivos móviles

Expand All @@ -17,25 +17,25 @@ Los dispositivos móviles tienen características de hardware bastante diferente
[Diseño web adaptable](/es/docs/Desarrollo_Web/Web_adaptable) es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

- diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
- el uso de [media queries](/es/docs/CSS/Media_queries) para incluir condicionalmente reglas CSS adecuadas para el [ancho](/es/docs/CSS/Media_queries#width) y [alto](/es/docs/CSS/Media_queries#height) de la pantalla.
- el uso de [media queries](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries) para incluir condicionalmente reglas CSS adecuadas para el [ancho](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#width) y [alto](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#height) de la pantalla.

La [etiqueta meta viewport](/es/docs/M%C3%B3vil/Viewport_meta_tag) ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

### Trabajando con pantallas táctiles

Para usar una pantalla táctil necesitará trabajar con eventos [DOM Touch](/es/docs/DOM/Touch_events). No tendrá la posibilidad de usar la pseudo-clase [CSS :hover](/es/docs/Web/CSS/%3Ahover) y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre [diseñar para pantallas táctiles](http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/).
Para usar una pantalla táctil necesitará trabajar con eventos [DOM Touch](/es/docs/Web/API/Touch_events). No tendrá la posibilidad de usar la pseudo-clase [CSS :hover](/es/docs/Web/CSS/%3Ahover) y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre [diseñar para pantallas táctiles](http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/).

Puede usar el _media query_ [-moz-touch-enabled](/es/docs/CSS/Media_queries#-moz-touch-enabled) para cargar una CSS diferente en un dispositivo con pantalla táctil.
Puede usar el _media query_ [-moz-touch-enabled](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#-moz-touch-enabled) para cargar una CSS diferente en un dispositivo con pantalla táctil.

### Optimizando imágenes

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la [altura](/es/docs/CSS/Media_queries#height) de pantalla, [anchura](/es/docs/CSS/Media_queries#width) y [proporción de píxeles](/es/docs/CSS/Media_queries#-moz-device-pixel-ratio).
Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la [altura](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#height) de pantalla, [anchura](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#width) y [proporción de píxeles](/es/docs/Web/CSS/CSS_media_queries/Using_media_queries#-moz-device-pixel-ratio).

También puede hacer uso de propiedades CSS para implementar efectos visuales como [gradientes](/es/docs/CSS/Using_CSS_gradients) y [sombras](/es/docs/Web/CSS/box-shadow) sin utilizar imágenes para ello.
También puede hacer uso de propiedades CSS para implementar efectos visuales como [gradientes](/es/docs/Web/CSS/CSS_images/Using_CSS_gradients) y [sombras](/es/docs/Web/CSS/box-shadow) sin utilizar imágenes para ello.

### APIs móviles

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la [orientación](/es/docs/Web/API/Detecting_device_orientation) y la [geolocalización](/es/docs/WebAPI/Using_geolocation).
Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la [orientación](/es/docs/Web/API/Device_orientation_events/Detecting_device_orientation) y la [geolocalización](/es/docs/Web/API/Geolocation_API).

## Desarrollo para diferentes navegadores

Expand All @@ -47,17 +47,17 @@ Para crear sitios web que funcionen aceptablemente en diferentes navegadores mó
- Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
- Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (_vendor-prefixed_) como `-webkit-linear-gradient`, es mejor incluir las otras versiones prefijadas de la propiedad [linear-gradient](/es/docs/Web/CSS/linear-gradient) (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla `linear-gradient`.
Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (_vendor-prefixed_) como `-webkit-linear-gradient`, es mejor incluir las otras versiones prefijadas de la propiedad [linear-gradient](/es/docs/Web/CSS/gradient/linear-gradient) (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla `linear-gradient`.

Vea esta [lista de propiedades específicas para Gecko](/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla), esta lista de [propiedades específicas para WebKit](/en/CSS/CSS_Reference/Webkit_Extensions) y la [tabla de propiedades específicas de proveedores (_vendor-specific_)](http://peter.sh/experiments/vendor-prefixed-css-property-overview/) de Peter Beverloo.
Vea esta [lista de propiedades específicas para Gecko](/es/docs/Web/CSS/Mozilla_Extensions), esta lista de [propiedades específicas para WebKit](/en-US/CSS/CSS_Reference/Webkit_Extensions) y la [tabla de propiedades específicas de proveedores (_vendor-specific_)](https://peter.sh/experiments/vendor-prefixed-css-property-overview/) de Peter Beverloo.

Usar herramientas como [CSS Lint](http://csslint.net/) puede ayudar a encontrar problemas como este en el código y preprocesadores como [SASS](http://sass-lang.com/) y [LESS](http://lesscss.org/) pueden ser de ayuda para crear código compatible con diferentes navegadores.
Usar herramientas como [CSS Lint](http://csslint.net/) puede ayudar a encontrar problemas como este en el código y preprocesadores como [SASS](https://sass-lang.com/) y [LESS](https://lesscss.org/) pueden ser de ayuda para crear código compatible con diferentes navegadores.

### Precaución al husmear el agente de usuario (user agent)

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (_user agent_) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta [guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo](/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop).
Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta [guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo](/en-US/Browser_detection_using_the_user_agent#mobile.2c_tablet_or_desktop).

### Probar en múltiples navegadores

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ original_slug: Web/Guide/Graphics

Los sitios web modernos a menudo necesitan aplicaciones para presentar y/o visualizar gráficos . Se

- [Dibujando gráficas con canvas](/es/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas)
- [Dibujando gráficas con canvas](/es/docs/Web/API/Canvas_API/Tutorial)
- : Una guía inicial para usar el elemento {{HTMLElement("canvas")}} para dibujar gráficos en 2D.
- [SVG](/es/docs/SVG)
- [SVG](/es/docs/Web/SVG)
- : Scalable Vector Graphics ( SVG ), Gráficos Vectoriales Escalables, le permite utilizar líneas , curvas y otras formas geométricas para representar gráficos . Al evitar el uso de mapas de bits , puede crear imágenes que se escalan sin falla a cualquier tamaño.

## Gráficas en 3D

- [WebGL](/es/docs/Web/WebGL)
- [WebGL](/es/docs/Web/API/WebGL_API)
- : Una guía de cómo empezar con WebGL , la API (bibliteca de contenidos) de gráficos 3D para la Web. Esta tecnología le permite utilizar estándar OpenGL ES en el contenido Web .

<!---->
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ person1.bio()
```

> [!NOTE]
> Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (también lo puedes ver [corriendo en vivo](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)).
> Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve [oojs-class-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html) (también lo puedes ver [corriendo en vivo](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html)).

### Ejercicios adicionales

Expand All @@ -214,11 +214,11 @@ Para empezar, intenta añadir un par de líneas de creación de objetos propias,
Además, hay un par de problemas con nuestro método `bio()` — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y `bio` solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo `interests`. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.

> [!NOTE]
> Si estás atascado, hay una [respuesta en nuestro repositorio de GitHub](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([see it live](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) — igualmente ¡intentea resolverla primero!
> Si estás atascado, hay una [respuesta en nuestro repositorio de GitHub](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([see it live](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) — igualmente ¡intentea resolverla primero!

## Otras formas de crear instancias de objetos

Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — [declarando un objeto literal](/es/docs/Learn/JavaScript/Objects/Basics#Object_basics), y usando una función constructora (ver arriba).
Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — [declarando un objeto literal](/es/docs/Learn/JavaScript/Objects/Basics#object_basics), y usando una función constructora (ver arriba).

Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.

Expand Down Expand Up @@ -292,9 +292,9 @@ En el próximo artículo, exploraremos los prototipos de objeto JavaScript.
## En este modulo

- [Objetos básicos](/es/docs/Learn/JavaScript/Objects/Basics)
- [JavaScript orientedo a objetos para principiantes](/es/docs/Learn/JavaScript/Objects/Object-oriented_JS)
- [JavaScript orientedo a objetos para principiantes](/es/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript)
- [Prototipos de Objetos](/es/docs/Learn/JavaScript/Objects/Object_prototypes)
- [Herencia en JavaScript](/es/docs/Learn/JavaScript/Objects/Inheritance)
- [Herencia en JavaScript](/es/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
- [Trabajando con datos JSON](/es/docs/Learn/JavaScript/Objects/JSON)
- [Práctica de construcción de objetos](/es/docs/Learn/JavaScript/Objects/Object_building_practice)
- [Agregar funciones a nuestro demo de pelotas que rebotan](/es/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)
4 changes: 2 additions & 2 deletions files/es/conflicting/web/accessibility/aria/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Tienes un formulario — un formulario de contacto — por ejemplo, en el que de

## El formulario

Primero, lee acerca de la [`técnica requerida por aria`](/es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields) si no lo has hecho, ya que esta técnica amplía a esa.
Primero, lee acerca de la [`técnica requerida por aria`](/es/docs/conflicting/Web/Accessibility/ARIA_64707ba1917a56654679cbe273e2f4ea#required_and_invalid_fields) si no lo has hecho, ya que esta técnica amplía a esa.

Aquí hay un sencillo formulario:

Expand Down Expand Up @@ -100,7 +100,7 @@ Si se encuentra el término de búsqueda, el atributo `aria-invalid` se restable

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "`alert`" y, si lo encuentra, lo elimina del [modelo de objetos del documento](/es/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model).

A continuación, la función crea un elemento `div` para contener el texto de alerta. Obtiene un ID de "`alert`". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el [Módulo de atributos de rol XHTML](http://www.w3.org/TR/xhtml-role/) que simplemente se transfirió a HTML para simplificar.
A continuación, la función crea un elemento `div` para contener el texto de alerta. Obtiene un ID de "`alert`". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el [Módulo de atributos de rol XHTML](https://www.w3.org/TR/xhtml-role/) que simplemente se transfirió a HTML para simplificar.

El texto se agrega al elemento `div` y el elemento `div` se agrega al documento.

Expand Down
Loading
Loading