Skip to content

Commit

Permalink
chore: Run Markdownlint rules on es docs
Browse files Browse the repository at this point in the history
  • Loading branch information
nschonni committed May 27, 2022
1 parent 20d6884 commit f12b3e0
Show file tree
Hide file tree
Showing 39 changed files with 47 additions and 70 deletions.
2 changes: 1 addition & 1 deletion files/es/glossary/clickjacking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ El clickjacking puede ser evitado implementando una [Política de Seguridad de C

- [Seguridad web: protección contra clickjacking](/es/docs/Web/Security#clickjacking_protection)
- [Clickjacking](https://es.wikipedia.org/wiki/Clickjacking) en Wikipedia
- [Clickjacking](https://owasp.org/www-community/attacks/Clickjacking) en OWASP
- [Clickjacking](https://owasp.org/www-community/attacks/Clickjacking) en OWASP
16 changes: 11 additions & 5 deletions files/es/learn/forms/styling_web_forms/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,42 @@ original_slug: Learn/HTML/Forms/Styling_HTML_forms
---
{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

En los artículos anteriores vimos todo el HTML que necesitas para crear y estructurar tus formularios HTML. En este artículo veremos como usar [CSS](/es/docs/Web/CSS) para estilizar nuestros formularios. Esto historicamente ha sido díficil — cada control tiene un nivel de dificultad distinta — pero se esta volviendo más fácil a medida de que los navegadores antiguos son retirados, y los modernos nos abren más posibilidades.
En los artículos anteriores vimos todo el HTML que necesitas para crear y estructurar tus formularios HTML. En este artículo veremos como usar [CSS](/es/docs/Web/CSS) para estilizar nuestros formularios. Esto historicamente ha sido díficil — cada control tiene un nivel de dificultad distinta — pero se esta volviendo más fácil a medida de que los navegadores antiguos son retirados, y los modernos nos abren más posibilidades.

<table>
<tbody>
<tr>
<th scope="row">Requisitos previos:</th>
<td>
Conocimientos básicos de informática y una comprensión básica de
<a href="/es/docs/Learn/HTML/Introduction_to_HTML">HTML</a> y
Conocimientos básicos de informática y una comprensión básica de
<a href="/es/docs/Learn/HTML/Introduction_to_HTML">HTML</a> y
<a href="/es/docs/Learn/CSS/First_steps">CSS</a>.
</td>
</tr>
<tr>
<th scope="row">Objetivo:</th>
<td>
Comprender los problemas detrás del diseño de formularios y
Comprender los problemas detrás del diseño de formularios y
aprender algunas de las técnicas básicas de diseño que le serán útiles.
</td>
</tr>
</tbody>
</table>

## ¿Porqué es tan difícil aplicar estilos a formularios con CSS?

Se añadieron los controles de formulario en la [2ª especificación HTML](https://www.ietf.org/rfc/rfc1866.txt) en 1995; CSS fue lanzado a finales de 1996, y ningún navegador lo implementó correctamente por años. Los navegadores le dejaban el trabajo de manejar y renderizar los formularios a los sistemas operativos.

Aun con CSS permitiendo estilizar HTML, los fabricantes de navegadores han sido — y son, hasta el día de hoy — reacios a permitir el estilizado de estos porque los usuarios estaban acostumbrados al estilo de sus plataformas. Esto ha cambiado. Los dueños de los sitios web quieren estilos que encajen con el diseño de sus páginas más que nunca, y la plataforma web ha cambiado para hacer esto posible.

Para algunos controles, todavía es díficil reconstruirlos para permitir que se puedan estilizar, pero ya podemos usar CSS para estilizar muchas partes de los formularios, pero hay que estar atentos; tienes que tener cuidado para no romper la funcionalidad de este.

### No todos los controles se crean igual con CSS

Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.

#### Lo bueno

A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:

1. {{HTMLElement("form")}}
Expand All @@ -50,14 +53,18 @@ A algunos elementos se les puede dar estilo con pocos o ningún problema indepen
7. {{HTMLElement("output")}}

#### Lo malo

Algunos elementos son más díficiles de estilizar, llegando a necesitar CSS complejo o trucos muy específicos:

- Casillas de verificación ([checkbox](/es/docs/Web/HTML/Element/input/checkbox)) y botones de opción ([radio](/es/docs/Web/HTML/Element/Input/radio)).
- [`<input type="search">`](/es/docs/Web/HTML/Element/input/search)

Veremos como trabajar con estos casos específicos en el artículo [Estilizado avanzado para formularios HTML](/es/docs/Learn/Forms/Advanced_styling_for_HTML_forms).

#### Lo feo

En algunos elementos, simplemente no se puede utilizar CSS. Incluyendo a:

- [`<input type="color">`](/es/docs/Web/HTML/Element/input/color)
- Controles relacionados al tiempo como [`<input type="datetime-local">`](/es/docs/Web/HTML/Element/input/datetime-local)
- [`<input type="range">`](/es/docs/Web/HTML/Element/input/range)
Expand Down Expand Up @@ -386,4 +393,3 @@ Como puede ver, siempre que queramos crear formularios con solo campos de texto
- [Cómo crear controles de formulario personalizados](/es/docs/Learn/Forms/How_to_build_custom_form_controls)
- [Envío de formularios a través de JavaScript](/es/docs/Learn/Forms/Sending_forms_through_JavaScript)
- [Tabla de compatibilidad de propiedades para controles de formulario](/es/docs/Learn/Forms/Property_compatibility_table_for_form_controls)

2 changes: 1 addition & 1 deletion files/es/web/accessibility/aria/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Complementa HTML para que las interacciones y los widgets que se usan comúnment

> **Advertencia:** Muchos de estos widgets se incorporaron posteriormente a HTML5, y **los desarrolladores deberían preferir usar el elemento HTML semántico correcto en lugar de usar ARIA**, si tal elemento existe. Por ejemplo, los elementos nativos tienen incorporado [accesibilidad de teclado](/es/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets), roles y estados. Sin embargo, si elige usar ARIA, es responsable de imitar el comportamiento equivalente del navegador en la secuencia de comandos.
[La primera regla de ARIA](https://www.w3.org/TR/using-aria/#rule1) es <q>"Si puede usar un elemento o atributo HTML nativo con la semántica y el comportamiento que necesita ya integrado, en lugar de reutilizar un elemento y agregar un rol, estado o propiedad de ARIA para hacerlo accesible, hágalo".</q>
[La primera regla de ARIA](https://www.w3.org/TR/using-aria/#rule1) es "Si puede usar un elemento o atributo HTML nativo con la semántica y el comportamiento que necesita ya integrado, en lugar de reutilizar un elemento y agregar un rol, estado o propiedad de ARIA para hacerlo accesible, hágalo".

> **Nota:** Hay un dicho "No utilizar ARIA es mejor que utilizar una mala ARIA". En [la encuesta de WebAim de más de un millón de páginas de inicio](https://webaim.org/projects/million#aria), encontraron que las páginas de inicio con ARIA presentes promediaron un 41 % más de errores detectados que aquellas sin ARIA. Si bien ARIA está diseñado para hacer que las páginas web sean más accesibles, si se usa incorrectamente, puede hacer más daño que bien.
Expand Down
1 change: 0 additions & 1 deletion files/es/web/api/audionode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,3 @@ oscillator.channelCount;
## Véase también

- [Usando Web Audio API](/es/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)

1 change: 0 additions & 1 deletion files/es/web/api/batterymanager/charging/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,3 @@ navigator.getBattery().then(function(battery) {

- {{domxref("BatteryManager")}}
- {{domxref("Navigator.getBattery")}}

1 change: 0 additions & 1 deletion files/es/web/api/batterymanager/chargingtime/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,3 @@ navigator.getBattery().then(function(battery) {

- {{domxref("BatteryManager")}}
- {{domxref("Navigator.getBattery")}}

1 change: 0 additions & 1 deletion files/es/web/api/batterymanager/dischargingtime/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,3 @@ navigator.getBattery().then(function(battery) {

- {{domxref("BatteryManager")}}
- {{domxref("Navigator.getBattery")}}

3 changes: 0 additions & 3 deletions files/es/web/api/batterymanager/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ browser-compat: api.BatteryManager

La interfaz `BatteryManager` de la [API del Estado de la Batería](/en-US/docs/Web/API/Battery_Status_API) proporciona la información del nivel de carga de la bateria del sistema. El método {{domxref("navigator.getBattery()")}} regresa una promesa que resuelve con la interfaz de `BatteryManager`.


## Propiedades

- {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
Expand All @@ -27,7 +26,6 @@ La interfaz `BatteryManager` de la [API del Estado de la Batería](/en-US/docs/W
- {{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
- : Número que indica el nivel de carga de la batería del sistema, los valores están escalados entre 0.0 y 1.0.


### Eventos del controlador

- {{domxref("BatteryManager.onchargingchange")}}
Expand All @@ -47,7 +45,6 @@ _Hereda métodos de su interfaz padre:_ {{domxref("EventTarget")}}.

{{Specifications}}


## Compatibilidad del navegador

{{Compat}}
Expand Down
1 change: 0 additions & 1 deletion files/es/web/api/batterymanager/level/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,3 @@ navigator.getBattery().then(function(battery) {

- {{domxref("BatteryManager")}}
- {{domxref("Navigator.getBattery")}}

4 changes: 2 additions & 2 deletions files/es/web/api/dragevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ Ejemplos para cada propiedad, constructor, tipo de evento y manejadores de event

{{Specifications}}

## Compatibilidad
## Compatibilidad

{{Compat}}

## Véase también
## Véase también

- [Arrastrar y soltar](/es/docs/Web/API/HTML_Drag_and_Drop_API)
- [Operaciones de arrastre](/es/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)
Expand Down
16 changes: 8 additions & 8 deletions files/es/web/api/element/animate/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ slug: Web/API/Element/animate
translation_of: Web/API/Element/animate
browser-compat: api.Element.animate
---
{{APIRef('Web Animations')}}
{{APIRef('Web Animations')}}

El método **`animate()`** de la interfaz {{domxref("Element")}} es un método abreviado el cual crea un nuevo {{domxref("Animation")}}, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto {{domxref("Animation")}}.

> **Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una
> **Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una
> lista de las animaciones que afectan a un elemento llamando a {{domxref("Element.getAnimations()")}}.
## Síntaxis
Expand All @@ -25,11 +25,11 @@ animate(keyframes, options)
para más detalles.
- `options`

- : Puede ser un **entero representando la duración de la animación** (en milisegundos), **o** un
objeto que contiene una o más propiedades acerca del tiempo descritas en los
[los parametros de opciones del `KeyframeEffect()`](/es/docs/Web/API/KeyframeEffect) y/o las
- : Puede ser un **entero representando la duración de la animación** (en milisegundos), **o** un
objeto que contiene una o más propiedades acerca del tiempo descritas en los
[los parametros de opciones del `KeyframeEffect()`](/es/docs/Web/API/KeyframeEffect) y/o las
siguientes opciones:

- `id {{optional_inline}}`
- : Una propiedad única `animate()` para animar: una [`DOMString`](/es/docs/Web/API/DOMString) la cual hace referencia a la animación.

Expand All @@ -39,8 +39,8 @@ Regresa una {{domxref("Animation")}}.

## Ejemplos

En la demostración [Down the Rabbit Hole (con la API de Animaciones Web)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010),
utilizamos el método conveniente, `animate()` para inmediatamente crear y reproducir una animación en el elemento `#tunnel`
En la demostración [Down the Rabbit Hole (con la API de Animaciones Web)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010),
utilizamos el método conveniente, `animate()` para inmediatamente crear y reproducir una animación en el elemento `#tunnel`
para hacerlo fluir hacia arriba, indefinidamente. Observa el arreglo de los objetos enviados como fotogramas clave y también el bloque de opciones de sincronización.

```js
Expand Down
1 change: 0 additions & 1 deletion files/es/web/api/element/wheel_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,3 @@ el.addEventListener('wheel', zoom);

- {{domxref("WheelEvent")}}
- [Document: `wheel` event](/es/docs/Web/API/Document/wheel_event)

1 change: 0 additions & 1 deletion files/es/web/api/filereader/readasarraybuffer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,3 @@ instanceOfFileReader.readAsArrayBuffer(blob);
## Véase también

- {{domxref("FileReader")}}

6 changes: 3 additions & 3 deletions files/es/web/api/filereader/readasdataurl/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ El método `readAsDataURL` es usado para leer el contenido del especificado {

> **Nota:** El {{domxref("FileReader.result","result")}} de blob no puede ser
> directamente decodificado como Base64 sin primero remover la delaración de Datos-URL
> de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada
> de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada
> en Base64, primero remueve `data:*/*;base64,` del resultado.
## Sintaxis
Expand Down Expand Up @@ -98,8 +98,8 @@ function previewFiles() {
```

> **Nota:** El constructor [`FileReader()`](/es/docs/Web/API/FileReader) no es soportado por Internet
> Explorer versión anterior a la 10. Para una completa compatibilidad de código puedes ver nuestra
> [imagen previa para una posible solucion entre navegadores](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html).
> Explorer versión anterior a la 10. Para una completa compatibilidad de código puedes ver nuestra
> [imagen previa para una posible solucion entre navegadores](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html).
> Véase también [este ejemplo más completo](https://mdn.mozillademos.org/files/3698/image_upload_preview.html).
## Especificaciones
Expand Down
1 change: 0 additions & 1 deletion files/es/web/api/geolocation_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,3 @@ Dado que Google suele proporcionar la ubicación basada en Wi-Fi, es posible que
- [Uso de la API de geolocalización](/es/docs/Web/API/Geolocation_API/Using_the_Geolocation_API)
- [API de geolocalización en w3.org](https://www.w3.org/TR/geolocation-API/)
- [¿Quién movió mi geolocalización?](https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/) (Hacks blog)

1 change: 0 additions & 1 deletion files/es/web/api/mediastreamaudiosourcenode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,4 +89,3 @@ Consulte [`AudioContext.createMediaStreamSource()`](/es/docs/Web/API/AudioContex
- [WebRTC API](/es/docs/Web/API/WebRTC_API)
- [API de captura de medios y transmisiones (Media Streams)](/es/docs/Web/API/Media_Streams_API)
- {{domxref("MediaStreamTrackAudioSourceNode")}}

1 change: 0 additions & 1 deletion files/es/web/api/notification/body/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,3 @@ function spawnNotification(theBody, theIcon, theTitle) {
## See also

- [Usando la API de notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API)

1 change: 0 additions & 1 deletion files/es/web/api/notification/permission/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,3 @@ function notifyMe() {
- [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API)
- [API de Permisos](/es/docs/Web/API/Permissions_API)
- [Usando la API de Permisos](/es/docs/Web/API/Permissions_API/Using_the_Permissions_API)
-
1 change: 0 additions & 1 deletion files/es/web/api/notification/requestpermission/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,3 @@ Ya no mostramos ejemplos corriendo en tiempo real en esta página, ya que Chrome
## Véase también

- [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API)

Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function checkNotificationPromise() {
return true;
}
```

Básicamente tratamos de ver si el método `.then()` está disponible en `requestPermission()`. Si es así, continuamos y devolvemos `true`. Si falla, devolvemos `false` en el bloque `catch() {}`.

## Crear una notificación
Expand Down Expand Up @@ -265,4 +265,3 @@ window.addEventListener('load', function () {
## Véase también

- {{ domxref("Notification") }}

1 change: 0 additions & 1 deletion files/es/web/api/screen/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,3 @@ if (screen.pixelDepth < 8) {
## Compatibilidad con navegadores

{{Compat}}

3 changes: 1 addition & 2 deletions files/es/web/css/max-block-size/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ El CSS define tres clases. La primera, `standard-box`, se aplica a ambos cuadros

Después de eso vienen las clases `horizontal` y `vertical`, que añaden la propiedad {{cssxref("writing-mode")}} al cuadro, con el valor `horizontal-tb` o `vertical-rl` dependiendo de qué clase se utiliza.


```css
.standard-box {
padding: 4px;
Expand Down Expand Up @@ -147,4 +146,4 @@ Después de eso vienen las clases `horizontal` y `vertical`, que añaden la prop

- Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}
- Establecer el tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}
- {{cssxref("writing-mode")}}
- {{cssxref("writing-mode")}}
1 change: 0 additions & 1 deletion files/es/web/css/zoom/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,6 @@ div#c {

No forma parte de ningún estándar. Esta propiedad tiene su origen en Internet Explorer. Apple tiene [una descripción en la Referencia CSS de Safari](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15). Rossen Atanassov de Microsoft posee [un borrador de propuesta de especificación no oficial en Github](https://cdn.jsdelivr.net/gh/atanassov/css-zoom@master/Overview.html).


## Compatibilidad con navegadores

{{Compat}}
Expand Down
2 changes: 1 addition & 1 deletion files/es/web/html/element/input/date/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ La IU de la entrada generalmente varía entre navegadores; véase [Compatibiidad
<tr>
<td><strong><a href="#value">Valor</a></strong></td>
<td>
Un {{domxref("DOMString")}} vacío o representando una fecha en el formato
Un {{domxref("DOMString")}} vacío o representando una fecha en el formato
AAAA-MM-DD
</td>
</tr>
Expand Down
6 changes: 3 additions & 3 deletions files/es/web/http/headers/cache-control/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Nota: Comprueba la [tabla de compatibilidad](#browser_compatibility) para su sop

Los siguientes términos son usados en este documento; muchos pero no todos provienen de la especificación.

- `Caché(HTTP) `
- `Caché(HTTP)`
- : Implementación la cual mantiene peticiones y respuestas para reusarlas en peticiones posteriores. Puede ser tanto una cache privada como una compartida.
- `Caché compartida`
- : Caché existente entre el servidor de origen y los clientes (p. ej. Proxy, CDN). Almacena una sola respuesta para reutilizarla en multiples usuarios — por tanto los desarrolladores deberían evitar que el almacenamiento de contenidos personalizados sea cacheado en la caché compartida.
Expand All @@ -80,9 +80,9 @@ Los siguientes términos son usados en este documento; muchos pero no todos prov
- : Almacena una respuesta en caches cuando es cacheable. Pero no siempre es reutilizada en ese momento. (Normalmente "caché" significa almacenar una respuesta).
- `Respuesta reutilizada`
- : Reutiliza respuestas cacheadas para las subsiguientes peticiones,
- `Revalidar respuesta `
- `Revalidar respuesta`
- : Pregunta al servidor de origen si una respuesta almacenada sigue siendo reciente o no. Normalmente se realiza a través de una petición condicionada.
- ` Respuesta reciente`
- `Respuesta reciente`
- : Indica que una respuesa es reciente. Esto normalmente significa que la respuesta puede ser reutilizada para las subsiguientes peticiones, dependiendo de las directivas de petición.
- `Respuesta pasada`
- : Indica que la respuestá está pasada. Normalmente significa que la respuesta ya no puede ser reutilizada. El almacenamiento caché no requiere que las respuestas pasadas sean eliminada inmediatamente, por que la revalidación puede cambiar la respuesta de pasada a reciente de nuevo.
Expand Down
Loading

0 comments on commit f12b3e0

Please sign in to comment.