diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 6cccf02351..e02db83980 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -658,8 +658,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Establecer la familia del tipo de letra de un elemento", + "descriptionEs": [ + "Puede establecer el tipo de letra de un elemento usando la propiedad font-family.", + "Por ejemplo, si quiere establecer el tipo de letra de su elemento h2 como Sans-serif, use el siguiente CSS:", + "h2 {", + "  font-family: Sans-serif;", + "}", + "Haga que todos sus elementos p utilicen el tipo de letra Monospace." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Definiere die Schriftart eines Elements", @@ -710,8 +717,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Importar un tipo de letra de Google", + "descriptionEs": [ + "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).", + "Primero, haga un llamado a Google para tomar el tipo de letra Lobster y para cargarlo en su HTML.", + "Copie la siguiente porción de código y peguela en la parte superior de su editor de texto:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Ahora establezca Lobster como valor de font-family en su elemento h2.", + "Aplique la familia de fuente (font-family) Lobster a su elemento h2." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Importiere eine Google Font", @@ -771,8 +785,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Especifique como deben degradarse los tipos de letra", + "descriptionEs": [ + "Hay diversos tipos de letra por omisión disponible en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", + "Cuando un tipo de letra no está disponible, puede decirle al navegador que \"degrade\" a otro tipo de letra.", + "Por ejemplo, si quiere que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puede usar el siguiente estilo CSS:", + "p {", + "  font-family: Helvetica, Sans-Serif;", + "}", + "Ahora ponga en comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", @@ -829,8 +851,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade imágenes a tu sitio web", + "descriptionEs": [ + "Puedes agregar imágenes a tu sitio web mediante el uso del elemento img, y apuntar a la URL específica de una imagen utilizando el atributo src.", + "Un ejemplo de esto sería:", + "", + "Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.", + "Prueba con esta imagen:", + "https://bit.ly/fcc-relaxing-cat" + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", @@ -890,8 +919,17 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Da tamaño a tus imágenes", + "descriptionEs": [ + "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", + "Por ejemplo, si queremos crear una clase CSS llamada larger-image que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:", + "<estilo>", + "  .larger-image{", + "    width: 500px;", + "  }", + "</style>", + "Crea una clase llamada smaller-image y utilizala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Skaliere deine Bilder", @@ -961,8 +999,21 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade bordes alrededor de tus elementos", + "descriptionEs": [ + "Los bordes CSS tienen propiedades como style, color y width", + "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", + "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", + "<img class=\"class1 class2\">" + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", @@ -1026,8 +1077,21 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade bordes alrededor de tus elementos", + "descriptionEs": [ + "Los bordes CSS tienen propiedades como style, color y width", + "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", + "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", + "<img class=\"class1 class2\">" + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", @@ -1091,8 +1155,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade esquinas redondeadas con un radio de borde", + "descriptionEs": [ + "Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius. ", + "Puedes especificar un border-radius en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase thick-green-border y establecela a 10px. ", + "Dale a tu foto del gato un border-radius de 10px." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", @@ -1160,8 +1228,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Enlaza páginas externas con elementos de anclaje", + "descriptionEs": [ + "Los elementos a, también conocido como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", + " \"un ", + "He aquí un ejemplo:", + "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo siga.</p>", + "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de anclaje \" fotos de gatos\"." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", @@ -1238,8 +1313,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anida un elemento de anclaje dentro de un párrafo", + "descriptionEs": [ + "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", + "\"un", + "He aquí un ejemplo:", + "<p>Aquí un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "anidamiento significa poner un elemento dentro de otro elemento.", + "Ahora anida el elemento a existente dentro de un nuevo elemento p para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", @@ -1305,8 +1387,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", + "descriptionEs": [ + "A veces quieres agregar elementos a a tu sitio web antes de saber que enlazarán.", + "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, que aprenderemos más adelante.", + "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", @@ -1377,8 +1463,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Convierte una imagen en un vínculo", + "descriptionEs": [ + "Puedes convertir elementos en enlaces al anidarlos con un elemento a.", + "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", + "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", + "Recuerda usar # como atributo href de tu elmento a con el fin de convertirlo en un vínculo muerto.", + "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Verlinke ein Bild", @@ -1448,8 +1540,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega Texto alternativo a una imagen para dar Accesibilidad", + "descriptionEs": [ + "Los atributos alt también conocidos como texto alternativo, son lo que se presentaran si el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", + "En resumen, ¡cada imagen debe tener un atributo alt!", + "Usted puede agregar un atributo alt justo en el elemento img así:", + "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\">", + "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", @@ -1526,8 +1624,18 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea una lista no ordenada con viñetas", + "descriptionEs": [ + "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", + "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", + "Por ejemplo: ", + "<ul>", + "  <li>leche</li>", + "  <li>queso</li>", + "</ul>", + "crea una lista con viñetas con \"leche\" y \"queso\".", + "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle eine ungeordnete Liste", @@ -1611,8 +1719,18 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crear una lista ordenada", + "descriptionEs": [ + "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", + "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", + "Por ejemplo:", + "<ol>", + "  <li>Garfield</li>", + "  <li>Sylvester</li>", + "</ol>", + "crea una lista numerada con \"Garfield\" y \"Sylvester\".", + "Crea una lista ordenada de los 3 cosas que más odian los gatos." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle eine geordnete Liste", @@ -1692,8 +1810,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un campo de texto", + "descriptionEs": [ + "Ahora vamos a crear un formulario web.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.", + "Usted puede crear uno como este:", + "<input type=\"text\">", + "Tenga en cuenta que los elementos input son de cierre automático.", + "Crea un elemento input de tipo texto debajo de tus listas." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle ein Textfeld", @@ -1772,8 +1897,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega un texto de relleno a un campo de texto", + "descriptionEs": [ + "Tu texto de relleno es el que aparece campo de texto antes de que tu usuario haya ingresado datos.", + "Puedes crear un texto de relleno de esta manera:", + "<input type=\"text\" placeholder=\"este es un texto de relleno\">", + "Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu", @@ -1853,8 +1983,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un elemento de formulario", + "descriptionEs": [ + "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento form.", + "Por ejemplo:", + "<form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form>", + "Anida tu campo de texto en un elemento form. Agrega el atributo action=\"/submit-cat-photo\" a este elemento de formulario." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle ein Formular", @@ -1937,8 +2072,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agrega un botón Enviar a un formulario", + "descriptionEs": [ + "Añadamos un elemento submit a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo actio de tu formulario. ", + "He aquí un ejemplo de un botón de envío:", + "<button type=\" submit\">este botón envía el formulario</botón>", + "Agrega un botón de enviar a tu elemento form con el tipo submit y con el texto \"Submit\"." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu", @@ -2019,8 +2159,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Utiliza HTML5 para especificar campos obligatorios", + "descriptionEs": [ + "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que él o ella lo haya llenado.", + "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra required dentro de tu elemento input, usarías: <input type=\"text\" requiere> ", + "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.", + "A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?" + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen", @@ -2109,8 +2254,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un Conjunto de botones de radio", + "descriptionEs": [ + "Puede usar botones de radio para las preguntas en las que desea que el usuario sólo le de una de varias posibles respuestas.", + "Los botones de radio son un tipo de input", + "Cada uno de los botones de radio debe estar anidado dentro de su propio elemento label.", + "Todos los botones de radio relacionados deben tener el mismo atributo name.", + "He aquí un ejemplo de un botón de radio:", + "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de indoor y el otro debe tener la opción outdoor. " + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle ein paar Optionsfelder", @@ -2202,8 +2355,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Crea un conjunto de casillas de verificación", + "descriptionEs": [ + "Los formularios suelen usar casillas de verificación para preguntas que pueden tener más de una respuesta.", + "Las casillas de verificación son un tipo de entrada", + "Cada una de tus casillas de verificación deben ser anidado dentro de su propio etiqueta.", + "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo name.", + "He aquí un ejemplo de una casilla de verificación:", + "<label><input type=\"checkbox\" name=\"personality\"> Cariñoso</label>", + "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento label. Los tres deben compartir el nombre atributo personalidad ." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen", @@ -2290,8 +2451,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Marca botones de radio y casillas de verificación por omisión", + "descriptionEs": [ + "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo checked.", + "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento de entrada. Por ejemplo:", + "<input type=\"radio\" name=\"nombre-de-prueba\" checked>", + "Establece como marcados por omisión el primero de tus botones de radio y la primera casilla de verificación." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen", @@ -2382,8 +2548,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anida muchos elementos dentro de una sólo elemento Div", + "descriptionEs": [ + "El elemento div, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.", + "El elemento div es probablemente el elemento HTML más utilizado. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ", + "Al igual que cualquier otro elemento sin cierre automático, puede abrir una etiqueta div con <div> y cerrarla en otra línea con </div> .", + "Trata de poner tu etiqueta de apertura div por encima de elemento p \"Things cat love\", y tu etiqueta de cierre de div después de tu etiqueta de cierre de ol, para que cada una de tus listas estén dentro de un div. ", + "Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento div." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element", @@ -2477,8 +2649,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Da un color de fondo a un elemento Div", + "descriptionEs": [ + "Puedes fijar el color de fondo de un elemento con la propiedad background-color.", + "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), ponlo en tu elemento style:", + ".green-background {", + "  background-color: green;", + "}", + "Crea una clase llamada gray-background con la propiedad background-color en gris (gray). Asigna esta clase a tu elemento div ." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -2568,8 +2747,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Establecer la ID de un elemento", + "descriptionEs": [ + "Además de las clases, cada elemento HTML también puede tener un atributo de identificación id.", + "Hay varias ventajas al usar atributos id, y aprenderás más sobre estas cuando comiences a usar jQuery.", + "Los atributos id deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le dé a más de un elemento un mismo atributo id. ", + "He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:", + "<h2 id=\"cat-photo-app\">", + "Dale a tu elemento form la id cat-photo-form." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -2664,8 +2850,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa un atributo ID para dar estilo a un elemento", + "descriptionEs": [ + "Una buena cosa sobre los atributos id es que, al igual que con clases, puede darles estilo usando CSS.", + "He aquí un ejemplo de cómo puede tomar su elemento con atributo id en cat-photo-element y póngale el color de fondo verde. En su elemento style: ", + "#cat-photo-element {", + "  background-color: green;", + "}", + "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", + "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -2730,8 +2924,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Ajusta el relleno de un elemento", + "descriptionEs": [ + "Ahora vamos a dejar un poco de lado nuestra aplicación de fotos de gatos, y aprenderemos más sobre dar estilo a HTML", + "Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.", + "Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (padding), margen (margin) y borde (border)", + "El relleno (padding) de un elmento controla la cantidad de espacio entre el elemento y su borde (border).", + "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más padding que el cuadro verde. ", + "Cuando aumentas el padding de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", + "Cambia el padding de la caja verde para que coincida con la de tu cuadro rojo." + ], "namePt": "", "descriptionPt": [], "nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements", @@ -2800,8 +3002,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Ajusta el margen de un elemento", + "descriptionEs": [ + "El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.", + "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Tenga en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ", + "Cuando aumentas el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", + "Cambia el maregn (margin) de la caja verde para que coincida con el de la caja roja." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Passe den Außenabstand eines Elements an", @@ -2869,8 +3076,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Agregar un margen negativo a un Elemento", + "descriptionEs": [ + "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.", + "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.", + "Trate de establecer el margen (margin) a un valor negativo como el de la caja roja.", + "Cambia el margen (margin) de la caja verde a -15px, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea." + ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu", @@ -2941,8 +3153,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade relleno diferente a cada lado de un elemento", + "descriptionEs": [ + "A veces quieres personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.", + "CSS te permite controlar el relleno de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ", + "Da a la caja verde un relleno (padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha." + ], "namePt": "", "descriptionPt": [], "nameDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand", @@ -3012,8 +3228,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Añade márgenes diferentes a cada lado de un elemento", + "descriptionEs": [ + "A veces quieres personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.", + "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ", + "Da a la caja verde un margen (margin) de 40px en la parte superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho." + ], "namePt": "", "descriptionPt": [], "nameDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu", @@ -3080,8 +3300,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento", + "descriptionEs": [ + "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sola línea, así: ", + "padding: 10px 20px 10px 20px;", + "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", + "Usa la notación en sentido horario notación para darle a la clase \".green-box\" un relleno de 40px en la parte superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + ], "namePt": "", "descriptionPt": [], "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen", @@ -3150,8 +3375,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Utiliza notación en sentido horario para especificar el margen de un elemento", + "descriptionEs": [ + "Vamos a intentar esto de nuevo, pero esta vez con el margen (margin).", + "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom, y padding-left de un elemento, puedes especificarlas en una sóla línea así: ", + "margin: 10px 20px 10px 20px;", + "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.", + "Usa notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + ], "namePt": "", "descriptionPt": [], "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen", @@ -3190,8 +3421,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Da estilo en HTML al elemento cuerpo", + "descriptionEs": [ + "Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.", + "Cada página HTML tiene un cuerpo (body).", + "Podemos demostrar que el elemento (body) aquí, dandole un color de fondo (background-color) negro.", + "Podemos hacer esto añadiendo lo siguiente a nuestro elemento style:", + "body {", + "  background-color: black;", + "}" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3232,8 +3471,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Hereda estilos del elemento cuerpo", + "descriptionEs": [ + "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS a su elemento body.", + "Recuerda, que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredará sus estilos de tu elemento body.", + "En primer lugar, crea un elemento h1 con el texto Hello World", + "Después, vamos a darle a todos los elementos de tu página el color vere (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", + "Por último, da a tu elmento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3271,8 +3516,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Priorizar un estilo sobre otro", + "descriptionEs": [ + "A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.", + "Por ejemplo, el elemento h1 no puede ser verde y rosa al mismo tiempo.", + "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", + "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", + "Ponle a tu elemento h1 la clase de pink-text." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3315,8 +3566,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anula los estilos en CSS posterior", + "descriptionEs": [ + "Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", + "Acabamos de demostrar que nuestras clases anularán el CSS del elemento body. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase pink-text?", + "Crea una clase CSS adicional llamada texto-azul que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase pink-text. ", + "Aplica la clase blue-text a tu elementou h1 además de tu clase pink-text y veamos cual gana.", + "La aplicación de múltiple atributos de clase a un elemento HTML se hace usando espacios entre ellas así:", + "class=\"clase1 clase2\"" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3369,8 +3627,19 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anula la declaración de clases dando estilo a los atributos ID", + "descriptionEs": [ + "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ", + "Pero no hemos terminado todavía. Hay otras maneras que usted puede anular CSS. ¿Te acuerdas de los atributos id?", + "Anulemos tus clases pink-text y blue-text, y pongamos anaranjado tu elemento h1, dandole una identificación al elemento h1 y poniendole estilo a esa identificación (id).", + "Dale a tu elemento h1 el atributo id con valor orange-text. Recuerda, los estilos id se ven así: ", + "<h1 id=\"orange-text\">", + "Deja las clases blue-text y pink-text de tu elemento h1.", + "Crea una declaración CSS para tu identificación orange-text en tu elemento estilo. He aquí un ejemplo de como se ve esto: ", + "#brown-text {", + "  color: brown;", + "}" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3420,8 +3689,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anula declaraciones de clase con un estilos en línea", + "descriptionEs": [ + "Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS style.", + "Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?", + "Utiliza un in-line style para tratar de hacer blanco nuestro elemento h1. Recuerda, los estílos en línea se ven así: ", + "<h1 style=\"color: green\">", + "Deja las clases blue-text y pink-text en tu elmento h1." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3474,8 +3749,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Anula todos los demás estilos utilizando Important", + "descriptionEs": [ + "¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento style. ", + "Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ", + "En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar !important", + "Regresemos a nuestra declaración de clase pink-text. Recuerda que nuestra clase pink-text fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ", + "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", + "Un ejemplo de cómo hacer esto es:", + "color: red !important;" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3509,8 +3792,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para especificar colores", + "descriptionEs": [ + "¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o código hex para abreviar. ", + "Decimal se refiere a los números del cero al nueve -. los números que la gente usa en la vida cotidiana. Hexadecimal incluye estos 10 números, más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 valores posibles, en lugar de los 10 valores posibles que nos da nuestro sistema numérico normal en base-10. ", + "Con CSS, utilizamos 6 números hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", + "Reemplaza la palabra negro en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3543,8 +3831,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para colorear de blanco los elementos", + "descriptionEs": [ + "0 es el número más bajo en código hexadecimal, y representa una completa ausencia de color.", + "F es el número más alto en código hexadecimal, y representa el máximo brillo posible.", + "Volvamos blanco el color de fondo (background-color) de nuestro elemento body, cambiando su código hexadecimal por #FFFFFF" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3579,8 +3871,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para colorear de rojo los elementos", + "descriptionEs": [ + "Te puede estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", + "¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ", + "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", + "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el valor más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).", + "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3613,8 +3911,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para colorear de verde los elementos", + "descriptionEs": [ + "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.", + "Así que para conseguir el verde absoluto más brillante, sólo usas F en el tercer y cuarto dígitos (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible). ", + "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3647,8 +3949,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para colorear de azul los elementos", + "descriptionEs": [ + "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .", + "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible ). ", + "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3681,8 +3987,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa código hex para mezclar colores", + "descriptionEs": [ + "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", + "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", + "Hacer que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3715,8 +4025,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa código hex para mezclar colores", + "descriptionEs": [ + "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", + "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", + "Hacer que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3748,8 +4062,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para los colorear de gris los elementos", + "descriptionEs": [ + "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", + "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", + "Hacer que el color de fondo dele elemento body sea gris, dándole el código hexadecimal #808080" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3783,8 +4101,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa el código hexadecimal para colorear con tonos grises", + "descriptionEs": [ + "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", + "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3822,8 +4143,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Uso código hex abreviado", + "descriptionEs": [ + "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, usted puede acortarlo. ", + "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", + "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", + "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3859,8 +4185,15 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa RGB para colorear de blanco los elementos", + "descriptionEs": [ + "El valor RGB para el negro, luce así:", + "rgb(0, 0, 0)", + "El valor RGB para el blanco, se ve así:", + "rgb(255, 255, 255)", + "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", + "Cambia el color de fondo del elemento body del valor RGB para el negro al valor rgb para el blanco: rgb(255, 255, 255)" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3893,8 +4226,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa RGB para colorear de rojo los elementos", + "descriptionEs": [ + "Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.", + "Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.", + "Cambia el color de fondo del elemento body al rojo usando su valor RGB: rgb(255, 0, 0)" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3925,8 +4262,10 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa RGB para colorear de verde los elementos", + "descriptionEs": [ + "Ahora cambia el color de fondo del elemento body a verde usando su valor RGB: rgb (0, 255, 0)" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3957,8 +4296,10 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa RGB para colorear de azul los elementos", + "descriptionEs": [ + "Cambuia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" + ], "namePt": "", "descriptionPt": [], "nameDe": "", @@ -3990,8 +4331,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Usa RGB para mezclar colores", + "descriptionEs": [ + "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", + "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" + ], "namePt": "", "descriptionPt": [], "nameDe": "",