es: sync translated content

Author: mdn-bot

files/es/_redirects.txt

@@ -0,0 +1,61 @@
+---
+title: "Desafío: Crear un elegante documento con membrete"
+slug: conflicting/Learn_web_development/Core/Styling_basics_caad113ab4b172ad3cd3f6b04d466fd25bbbea60c1a37548c663858321ca18f3
+original_slug: Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper
+l10n:
+  sourceCommit: 6c58c5d4227a031105740b0e85acbc6178223d0a
+---
+
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension", "Learn_web_development/Core/Styling_basics/Cool-looking_box", "Learn_web_development/Core/Styling_basics")}}
+
+Si quieres causar una buena impresión, escribir una carta en un bonito papel con membrete puede ser un muy buen comienzo. En este desafío, crearás una plantilla en línea para lograr ese aspecto.
+
+## Punto de partida
+
+Para comenzar este desafío, debes:
+
+- Hacer copias locales del [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/letterheaded-paper-start/index.html) y [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/letterheaded-paper-start/style.css) — guárdalos como `index.html` y `style.css` en un nuevo directorio.
+- Guardar copias locales de las imágenes [superior](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [inferior](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) y [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) en el mismo directorio que tus archivos de código.
+
+Alternativamente, podrías usar un editor en línea como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) o [Glitch](https://glitch.com/).
+Podrías pegar el HTML y completar el CSS en uno de estos editores en línea.
+
+> [!NOTE]
+> Si te quedas atascado, puedes comunicarte con nosotros en uno de nuestros [canales de comunicación](/es/docs/MDN/Community/Communication_channels).
+
+## Resumen del proyecto
+
+Se te han proporcionado los archivos necesarios para crear una plantilla de papel con membrete. Solo necesitas juntar los archivos. Para llegar allí, necesitas:
+
+### El documento principal
+
+- Aplica el CSS al HTML.
+- Agrega un estilo de fondo a la carta que:
+  - Fija la imagen superior a la parte superior de la carta
+  - Fija la imagen inferior a la parte inferior de la carta
+  - Agrega un gradiente semitransparente sobre la parte superior de ambos fondos anteriores que le da a la carta un poco de textura. Hazlo ligeramente oscuro cerca de la parte superior e inferior, pero completamente transparente para una gran parte del centro.
+
+- Agrega otro estilo de fondo que simplemente agregue la imagen superior a la parte superior de la carta, como una alternativa para los navegadores que no admiten la declaración anterior.
+- Agrega un color de fondo blanco a la carta.
+- Agrega un borde sólido de 1 mm en la parte superior e inferior de la carta, en un color que esté en consonancia con el resto de la combinación de colores.
+
+### El logo
+
+- Al {{htmlelement("Heading_Elements", "h1")}}, agrega el logo como imagen de fondo.
+- Agrega un filtro al logo para darle una sutil sombra paralela.
+- Ahora comenta el filtro e implementa la sombra paralela de una manera diferente (un poco más compatible con todos los navegadores), que aún siga la forma de la imagen redonda.
+
+## Pistas y consejos
+
+- Recuerda que puedes crear una alternativa para navegadores más antiguos colocando primero la versión alternativa de un estilo, seguida de la versión que funciona solo en los navegadores más nuevos. Los navegadores más antiguos aplicarán la primera declaración e ignorarán la segunda, mientras que los navegadores más nuevos aplicarán la primera y luego la anularán con la segunda.
+- Si lo deseas, siéntete libre de crear tus propios gráficos para el desafío.
+
+## Ejemplo
+
+La siguiente captura de pantalla muestra un ejemplo de cómo podría verse el diseño terminado:
+
+![Página completa A4 con borde decorativo superior e inferior compuesto de formas naranjas y rojas, y una insignia roja y verde con la leyenda Compañía asombrosa escrita en ella, debajo del borde superior. Encima del borde inferior hay una dirección postal.](letterhead.png)
+
+{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension", "Learn_web_development/Core/Styling_basics/Cool-looking_box", "Learn_web_development/Core/Styling_basics")}}

files/es/_wikihistory.json

@@ -0,0 +1,91 @@
+---
+title: Comprensión de los fundamentos de CSS
+slug: conflicting/Learn_web_development/Core/Styling_basics_e9c27484fc406aa26076f7b27b254524ca1b80515004a02283c5839b451100d9
+original_slug: Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension
+---
+
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+
+Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.
+
+<table>
+  <tbody>
+    <tr>
+      <th scope="row">Prerrequisitos:</th>
+      <td>
+        Antes de intentar esta evaluación, debería haber revisado todos los
+        artículos en este módulo.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objetivo:</th>
+      <td>
+        Probar la comprensión de los fundamentos de la teoría, sintaxis y
+        mecánica de CSS.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Punto de Partida
+
+Para comenzar esta evaluación, debes:
+
+- Ve y coge el [archivo HTML del ejercicio](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html), y el [archivo de imagen asociada](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg), y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada.
+- Coge el [archivo de texto de los recursos CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación.
+
+> [!NOTE]
+> Alternativamente, se puede utilizar un sitio como [JSBin](https://jsbin.com/) o [Glitch](https://glitch.com/) para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar [esta URL](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) para apuntar el elemento `<img>` al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento `<style>` en el encabezado del documento.
+
+## Resumen del Proyecto
+
+Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.
+
+Configuración básica:
+
+- En primer lugar, crea un nuevo archivo en el mismo directorio que tus archivos HTML y de imagen. Llámalo algo realmente imaginativo como `style.css`.
+- Vincula tu CSS a tu archivo HTML mediante un elemento `<link>`.
+- Las dos primeras reglas en el archivo de recursos CSS son tuyas, ¡GRATIS! Después de que hayas terminado de regocijarte de tu buena fortuna, cópialas y pégalas en la parte superior de tu nuevo archivo CSS. Úsalas como prueba para asegurarte de que tu CSS se aplica correctamente a tu HTML.
+- Sobre las dos reglas, agregue un comentario CSS con algún texto dentro para indicar que se trata de un conjunto de estilos generales para toda la página. "Estilos generales de la página" sería suficiente. También agrega tres comentarios más en la parte inferior del archivo CSS para indicar estilos específicos para la configuración del contenedor de la tarjeta, estilos específicos para el header y footer (encabezado y pie de página), y estilos específicos para el contenido principal de la tarjeta de presentación. De ahora en adelante, los estilos subsiguientes añadidos a la hoja de estilo deben organizarse en el lugar apropiado.
+
+Encargandonos de los selectores y conjuntos de reglas proporcionados:
+
+- A continuación, nos gustaría que examinaras los cuatro selectores y calcularas la especificidad de cada uno. Escríbelas en algún lugar donde las puedas encontrar más tarde, como en un comentario en la parte superior de tu CSS.
+- Ahora es el momento de poner el selector correcto en el conjunto de reglas correcto! Tienes cuatro pares de selectores y reglas que coinciden en tus recursos de CSS. Hazlo ahora y agrégalos a tu archivo CSS. Necesitaras:
+  - Asignar al contenedor principal de tarjetas un ancho/alto fijo (width/height), color de fondo sólido (background-color), borde (border) y radio de borde (border-radius), entre otras cosas.
+  - Asigna al `header` un degradado (linear-gradient) de fondo que va de más oscuro a más claro, además de esquinas redondeadas que encajan con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.
+  - Asigna al pie de página un degradado (linear-gradient) de fondo que vaya de más claro a más oscuro, además de esquinas redondeadas que encajen con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.
+  - Asigna a la imagen un `float` a la derecha para que se pegue al lado derecho del contenido principal de la tarjeta de presentación, y dale una altura máxima (max-height) del 100% (un truco inteligente que asegura que crecerá/encogerá para que se mantenga a la misma altura que el contenedor principal, sin importar a que altura se trasforme).
+
+- ¡Cuidado! Hay dos errores en los conjuntos de reglas proporcionados. Utilizando cualquier técnica que conozcas, localízalas y arréglalas antes de seguir adelante.
+
+Nuevos conjuntos de reglas que necesitas escribir:
+
+- Escribe un conjunto de reglas que apunte tanto al header de la tarjeta como al footer de la misma, dándoles una altura total de 50px, (que incluye una altura de contenido de 30px y un padding de 10px en todos los lados). Pero expresalo en `em`.
+- El margen por defecto aplicado a los elementos `<h2>` y `<p>` por el navegador interferirá con nuestro diseño, así que escribe una regla que apunte a todos estos elementos y establezca su margen en 0.
+- Para evitar que la imagen se derrame del contenido principal de la tarjeta de presentación (el elemento `<article>`), necesitamos darle una altura específica. Ajustar la altura del `<article>` a 120px, expresada en `em`. También asigna un `background-color` negro semitransparente, resultando en un tono ligeramente más oscuro que deja que el color rojo del fondo brille un poco también.
+- Escribe un conjunto de reglas que le asigne al `<h2>` un `font-size` efectivo de 20px (pero expresado en `em`) y un `line-height` (altura de línea) apropiada para colocarlo en el centro de la caja de contenido del header. Recuerde que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular `line-height`.
+- Escribe un conjunto de reglas que le asigne al `<p>` dentro del footer un `font-size` efectivo de 15px (pero expresado en `em`) y un `line-height` apropiada para colocarlo en el centro de la caja de contenido del footer. Recuerda que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular `line-height`.
+- Como último toque, asigna al párrafo dentro del `<article>` un padding apropiado para que su borde izquierdo se alinee con el `<h2>` y el párrafo del footer, y ajuste su color para que sea bastante claro y sea fácil de leer.
+
+Otras cosas en las que pensar:
+
+- Obtendrás puntos adicionales si escribes tu CSS para una legibilidad máxima, con una declaración separada en cada línea.
+- Deberás incluir `.card` al principio de la cadena de selección en todas tus reglas, para que estas reglas no interfieran con el estilo de cualquier otro elemento si la tarjeta de presentación se pusiera en una página con un montón de otro contenido.
+
+## Consejos y Sugerencias
+
+- No necesitas editar el HTML de ninguna manera, excepto para aplicar el CSS a tu HTML.
+- Cuando intentes calcular el valor `em` que necesita para representar una cierta longitud de píxel, piensa en el tamaño de fuente base que tiene el elemento raíz (`<html>`) , y por el que necesita multiplicarse para obtener el valor deseado. Eso te dará tu valor, al menos en un caso sencillo como este.
+
+## Ejemplo
+
+La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:
+
+![Una vista de la tarjeta de presentación terminada, muestra un encabezado y un pie de página del lector, y un panel central más oscuro que contiene los detalles principales y la imagen.](business-card.png)
+
+## Evaluación
+
+Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del [Discurso del Área de Aprendizaje](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294), o en el canal IRC [#mdn](irc://irc.mozilla.org/mdn) en [Mozilla IRC](https://wiki.mozilla.org/IRC). Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!
+
+{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

files/es/conflicting/learn_web_development/core/styling_basics_caad113ab4b172ad3cd3f6b04d466fd25bbbea60c1a37548c663858321ca18f3/index.md

@@ -0,0 +1,98 @@
+---
+title: Uso del modelo de objetos del documento
+slug: conflicting/Web/API/Document_Object_Model
+original_slug: Web/API/Document_Object_Model/Using_the_Document_Object_Model
+---
+
+{{DefaultAPISidebar("DOM")}}
+
+El _Modelo de Objetos del Documento_ (DOM, por sus siglas en inglés) es una API para manipular árboles DOM de documentos HTML y XML (entre otros documentos en forma de árbol). Esta API está en la raíz de la descripción de una página y sirve como base para la creación de aplicaciones en la web.
+
+## ¿Qué es un árbol DOM?
+
+Un **árbol DOM** es una [estructura de árbol](https://en.wikipedia.org/wiki/Tree_structure) cuyos nodos representan el contenido de un documento HTML o XML. Cada documento HTML o XML tiene una representación de árbol DOM. Por ejemplo, considere el siguiente documento:
+
+```html
+<html lang="en">
+  <head>
+    <title>My Document</title>
+  </head>
+  <body>
+    <h1>Header</h1>
+    <p>Paragraph</p>
+  </body>
+</html>
+```
+
+Tiene un árbol DOM que se ve así:
+
+![El DOM como una representación en forma de árbol de un documento que tiene una raíz y elementos de nodo que contienen contenido](using_the_w3c_dom_level_1_core-doctree.jpg)
+
+Aunque el árbol anterior es similar al árbol DOM del documento anterior, no es idéntico, ya que [el árbol DOM real conserva los espacios en blanco](/es/docs/Web/CSS/CSS_text/Whitespace).
+
+Cuando un navegador web analiza un documento HTML, crea un árbol DOM y luego lo usa para mostrar el documento.
+
+## ¿Qué hace la API de documentos?
+
+La API de documentos, también llamada a veces API DOM, le permite modificar un árbol DOM _de la forma que desee_. Le permite crear cualquier documento HTML o XML desde cero o cambiar cualquier contenido de un documento HTML o XML determinado. Los autores de páginas web pueden editar el DOM de un documento usando JavaScript para acceder a la propiedad `document` del objeto global. Este objeto `document` implementa la interfaz {{domxref("Document")}}.
+
+## Un ejemplo sencillo
+
+Supongamos que el autor quiere cambiar el encabezado del documento anterior y escribir dos párrafos en lugar de uno. El siguiente script haría el trabajo:
+
+### HTML
+
+```html
+<html lang="en">
+  <head>
+    <title>My Document</title>
+  </head>
+  <body>
+    <input type="button" value="Cambiar este documento." onclick="change()" />
+    <h2>Header</h2>
+    <p>Paragraph</p>
+  </body>
+</html>
+```
+
+### JavaScript
+
+```js
+function change() {
+  // document.getElementsByTagName("h2") devuelve un NodeList de los elementos
+  // <h2> en el documento, el primero es el numero 0:
+  const header = document.getElementsByTagName("h2").item(0);
+
+  // El primer hijo del encabezado es un nodo de texto:
+  header.firstChild.data = "Un documento dinámico";
+
+  // Ahora el encabezado es "Un documento dinámico".
+
+  // Accede al primer párrafo
+  const para = document.getElementsByTagName("p").item(0);
+  para.firstChild.data = "Este es el primer párrafo.";
+
+  // Crear un nuevo nodo Texto para el segundo párrafo
+  const newText = document.createTextNode("Éste es el segundo párrafo.");
+
+  // Crea un nuevo elemento para que sea el segundo párrafo.
+  const newElement = document.createElement("p");
+
+  // Poner el texto en el párrafo.
+  newElement.appendChild(newText);
+
+  // Coloque el párrafo al final del documento agregándolo al cuerpo
+  // (que es el padre de para)
+  para.parentNode.appendChild(newElement);
+}
+```
+
+{{ EmbedLiveSample('Un_ejemplo_sencillo', 800, 300) }}
+
+## ¿Cómo puedo aprender más?
+
+Ahora que está familiarizado con los conceptos básicos del DOM, es posible que desee obtener más información sobre las características fundamentales de la API de Document leyendo [cómo recorrer una tabla HTML con interfaces JavaScript y DOM](/es/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces).
+
+## Véase también
+
+- El [Modelo de objetos del documento](/es/docs/Web/API/Document_Object_Model) (DOM).