From c2a45b58beec01b25bab38be13ab40db8df07a8a Mon Sep 17 00:00:00 2001 From: Bouncey Date: Tue, 9 Oct 2018 20:28:15 +0100 Subject: [PATCH] fix(spanish-md): Address some formatting issues for Spanish md --- ...visually-impaired-accessibility.spanish.md | 16 +- ...th-the-html5-datetime-attribute.spanish.md | 14 +- ...ckground-color-property-of-text.spanish.md | 18 +- ...lements-to-complementary-colors.spanish.md | 16 +- ...he-hover-state-of-an-anchor-tag.spanish.md | 14 +- .../create-a-graphic-using-css.spanish.md | 16 +- ...omplex-shape-using-css-and-html.spanish.md | 24 +- ...arent-with-absolute-positioning.spanish.md | 16 +- ...r-window-with-fixed-positioning.spanish.md | 16 +- ...re-natural-using-a-bezier-curve.spanish.md | 18 +- ...odify-fill-mode-of-an-animation.spanish.md | 14 +- ...tioned-element-with-css-offsets.spanish.md | 10 +- ...-bezier-curve-to-move-a-graphic.spanish.md | 16 +- ...o-change-the-size-of-an-element.spanish.md | 12 +- ...the-s-tag-to-strikethrough-text.spanish.md | 10 +- ...nded-corners-with-border-radius.spanish.md | 12 +- .../cascading-css-variables.spanish.md | 14 +- ...nge-the-font-size-of-an-element.spanish.md | 12 +- ...other-styles-by-using-important.spanish.md | 20 +- ...ioritize-one-style-over-another.spanish.md | 16 +- ...pecify-how-fonts-should-degrade.spanish.md | 24 +- ...a-css-class-to-style-an-element.spanish.md | 24 +- ...edia-query-to-change-a-variable.spanish.md | 14 +- .../use-abbreviated-hex-code.spanish.md | 22 +- .../add-a-submit-button-to-a-form.spanish.md | 14 +- .../comment-out-html.spanish.md | 12 +- ...rnal-pages-with-anchor-elements.spanish.md | 18 +- ...-of-a-page-with-anchor-elements.spanish.md | 24 +- ...ead-links-using-the-hash-symbol.spanish.md | 14 +- ...chor-element-within-a-paragraph.spanish.md | 26 +- .../turn-an-image-into-a-link.spanish.md | 18 +- .../uncomment-html.spanish.md | 14 +- ...-using-the-align-items-property.spanish.md | 20 +- ...ng-the-justify-content-property.spanish.md | 20 +- ...play-flex-to-position-two-boxes.spanish.md | 12 +- .../use-the-align-self-property.spanish.md | 14 +- ...set-the-initial-size-of-an-item.spanish.md | 18 +- ...ction-property-to-make-a-column.spanish.md | 10 +- ...irection-property-to-make-a-row.spanish.md | 14 +- ...x-grow-property-to-expand-items.spanish.md | 14 +- ...use-the-flex-shorthand-property.spanish.md | 20 +- ...shrink-property-to-shrink-items.spanish.md | 16 +- ...roperty-to-wrap-a-row-or-column.spanish.md | 16 +- ...ent-property-in-the-tweet-embed.spanish.md | 10 +- ...der-property-to-rearrange-items.spanish.md | 12 +- ...ge-the-size-of-columns-and-rows.spanish.md | 22 +- .../boo-who.spanish.md | 16 +- .../chunky-monkey.spanish.md | 22 +- .../confirm-the-ending.spanish.md | 30 +- .../falsy-bouncer.spanish.md | 20 +- .../finders-keepers.spanish.md | 12 +- .../mutations.spanish.md | 32 +- ...repeat-a-string-repeat-a-string.spanish.md | 20 +- ...eturn-largest-numbers-in-arrays.spanish.md | 18 +- .../slice-and-splice.spanish.md | 20 +- .../title-case-a-sentence.spanish.md | 14 +- .../truncate-a-string.spanish.md | 20 +- .../where-do-i-belong.spanish.md | 44 +-- ...contents-using-bracket-notation.spanish.md | 34 +- ...rty-names-with-bracket-notation.spanish.md | 14 +- ...-an-array-with-push-and-unshift.spanish.md | 16 +- .../add-items-using-splice.spanish.md | 14 +- ...ence-of-an-element-with-indexof.spanish.md | 20 +- ...eck-if-an-object-has-a-property.spanish.md | 16 +- ...arrays-with-the-spread-operator.spanish.md | 14 +- ...-array-with-the-spread-operator.spanish.md | 20 +- .../copy-array-items-using-slice.spanish.md | 14 +- ...omplex-multi-dimensional-arrays.spanish.md | 24 +- ...ll-object-keys-with-object.keys.spanish.md | 10 +- ...an-arrays-items-using-for-loops.spanish.md | 22 +- ...fy-an-array-stored-in-an-object.spanish.md | 12 +- ...-object-nested-within-an-object.spanish.md | 14 +- ...rom-an-array-with-pop-and-shift.spanish.md | 18 +- ...ord-to-remove-object-properties.spanish.md | 18 +- ...count-backwards-with-a-for-loop.spanish.md | 20 +- .../counting-cards.spanish.md | 30 +- .../declare-javascript-variables.spanish.md | 26 +- .../escape-sequences-in-strings.spanish.md | 22 +- ...aping-literal-quotes-in-strings.spanish.md | 22 +- .../find-the-length-of-a-string.spanish.md | 14 +- ...om-whole-numbers-within-a-range.spanish.md | 20 +- .../basic-javascript/golf-code.spanish.md | 34 +- ...ate-odd-numbers-with-a-for-loop.spanish.md | 18 +- ...ith-javascript-do...while-loops.spanish.md | 32 +- ...erate-with-javascript-for-loops.spanish.md | 28 +- ...ate-with-javascript-while-loops.spanish.md | 16 +- .../manipulate-arrays-with-pop.spanish.md | 18 +- .../manipulate-arrays-with-push.spanish.md | 14 +- .../manipulate-arrays-with-shift.spanish.md | 14 +- .../manipulate-arrays-with-unshift.spanish.md | 12 +- .../manipulating-complex-objects.spanish.md | 34 +- .../modify-array-data-with-indexes.spanish.md | 16 +- .../nesting-for-loops.spanish.md | 18 +- ...ues-to-functions-with-arguments.spanish.md | 22 +- ...tice-comparing-different-values.spanish.md | 22 +- .../profile-lookup.spanish.md | 28 +- ...ting-strings-with-single-quotes.spanish.md | 26 +- .../record-collection.spanish.md | 40 +-- ...cing-if-else-chains-with-switch.spanish.md | 16 +- ...urn-early-pattern-for-functions.spanish.md | 28 +- ...g-boolean-values-from-functions.spanish.md | 20 +- .../basic-javascript/stand-in-line.spanish.md | 22 +- .../understanding-boolean-values.spanish.md | 12 +- ...-value-returned-from-a-function.spanish.md | 16 +- ...tional-logic-with-if-statements.spanish.md | 24 +- ...he-conditional-ternary-operator.spanish.md | 26 +- .../using-objects-for-lookups.spanish.md | 14 +- .../basic-javascript/word-blanks.spanish.md | 24 +- ...g-order-when-calling-a-function.spanish.md | 10 +- ...led-variable-and-function-names.spanish.md | 12 +- ...age-of-single-and-double-quotes.spanish.md | 20 +- ...eses-brackets-braces-and-quotes.spanish.md | 12 +- ...or-instead-of-equality-operator.spanish.md | 18 +- ...te-an-array-declared-with-const.spanish.md | 18 +- ...t-parameters-for-your-functions.spanish.md | 16 +- ...to-assign-variables-from-arrays.spanish.md | 24 +- ...ator-to-reassign-array-elements.spanish.md | 18 +- ...erator-with-function-parameters.spanish.md | 18 +- ...eclarations-using-simple-fields.spanish.md | 24 +- ...te-higher-order-arrow-functions.spanish.md | 24 +- ...ay-using-concat-instead-of-push.spanish.md | 16 +- ...-a-string-using-the-join-method.spanish.md | 14 +- ...-arrays-using-the-concat-method.spanish.md | 12 +- .../implement-map-on-a-prototype.spanish.md | 16 +- ...he-filter-method-on-a-prototype.spanish.md | 12 +- ...obal-variables-out-of-functions.spanish.md | 22 +- ...y-using-slice-instead-of-splice.spanish.md | 16 +- ...out-changing-the-original-array.spanish.md | 10 +- ...an-array-using-the-slice-method.spanish.md | 18 +- ...betically-using-the-sort-method.spanish.md | 20 +- ...an-array-using-the-split-method.spanish.md | 20 +- ...nt-in-an-array-meets-a-criteria.spanish.md | 18 +- ...d-to-extract-data-from-an-array.spanish.md | 12 +- ...d-to-extract-data-from-an-array.spanish.md | 18 +- ...nts-in-an-array-meet-a-criteria.spanish.md | 18 +- .../arguments-optional.spanish.md | 26 +- .../binary-agents.spanish.md | 12 +- .../convert-html-entities.spanish.md | 20 +- .../diff-two-arrays.spanish.md | 40 +-- .../dna-pairing.spanish.md | 22 +- .../drop-it.spanish.md | 22 +- .../everything-be-true.spanish.md | 55 +-- .../map-the-debris.spanish.md | 20 +- .../search-and-replace.spanish.md | 26 +- .../seek-and-destroy.spanish.md | 22 +- .../smallest-common-multiple.spanish.md | 24 +- .../sorted-union.spanish.md | 22 +- .../steamroller.spanish.md | 16 +- .../sum-all-numbers-in-a-range.spanish.md | 20 +- .../wherefore-art-thou.spanish.md | 22 +- .../cash-register.spanish.md | 32 +- .../palindrome-checker.spanish.md | 22 +- .../telephone-number-validator.spanish.md | 16 +- .../override-inherited-methods.spanish.md | 32 +- .../check-for-all-or-none.spanish.md | 16 +- .../match-all-non-numbers.spanish.md | 12 +- ...s-that-occur-zero-or-more-times.spanish.md | 16 +- ...rything-but-letters-and-numbers.spanish.md | 14 +- ...e-whitespace-from-start-and-end.spanish.md | 12 +- ...ome-icons-to-all-of-our-buttons.spanish.md | 16 +- .../create-a-bootstrap-button.spanish.md | 10 +- .../label-bootstrap-buttons.spanish.md | 20 +- .../label-bootstrap-wells.spanish.md | 16 +- ...le-text-inputs-as-form-controls.spanish.md | 12 +- .../use-comments-to-clarify-code.spanish.md | 16 +- .../delete-your-jquery-functions.spanish.md | 12 +- ...pt-tags-and-document-ready-work.spanish.md | 22 +- ...hild-of-an-element-using-jquery.spanish.md | 18 +- ...-elements-by-class-using-jquery.spanish.md | 20 +- ...get-elements-by-id-using-jquery.spanish.md | 20 +- ...rget-even-elements-using-jquery.spanish.md | 16 +- ...nts-with-selectors-using-jquery.spanish.md | 18 +- ...dren-of-an-element-using-jquery.spanish.md | 18 +- ...rent-of-an-element-using-jquery.spanish.md | 20 +- ...-with-multiple-jquery-selectors.spanish.md | 26 +- ...nnect-redux-to-the-messages-app.spanish.md | 14 +- .../extract-local-state-into-redux.spanish.md | 16 +- ...etting-started-with-react-redux.spanish.md | 16 +- .../manage-state-locally-first.spanish.md | 14 +- ...vider-to-connect-redux-to-react.spanish.md | 18 +- .../bind-this-to-a-class-method.spanish.md | 18 +- .../create-a-controlled-input.spanish.md | 18 +- .../react/override-default-props.spanish.md | 12 +- ...render-conditionally-from-props.spanish.md | 22 +- ...-the-user-interface-another-way.spanish.md | 12 +- ...ender-with-an-if-else-condition.spanish.md | 14 +- .../set-state-with-this.setstate.spanish.md | 16 +- ...-for-a-more-concise-conditional.spanish.md | 16 +- ...ssion-for-conditional-rendering.spanish.md | 20 +- ...-to-dynamically-filter-an-array.spanish.md | 12 +- .../react/use-default-props.spanish.md | 10 +- .../react/write-a-simple-counter.spanish.md | 12 +- .../combine-multiple-reducers.spanish.md | 18 +- .../handle-an-action-in-the-store.spanish.md | 12 +- .../remove-an-item-from-an-array.spanish.md | 10 +- ...e-the-spread-operator-on-arrays.spanish.md | 14 +- ...create-reusable-css-with-mixins.spanish.md | 26 +- ...to-smaller-chunks-with-partials.spanish.md | 18 +- ...lse-to-add-logic-to-your-styles.spanish.md | 22 +- ...tributes-to-the-circle-elements.spanish.md | 34 +- .../add-axes-to-a-visualization.spanish.md | 28 +- ...-labels-to-scatter-plot-circles.spanish.md | 32 +- ...ect-a-group-of-elements-with-d3.spanish.md | 14 +- ...a-domain-and-a-range-on-a-scale.spanish.md | 24 +- .../use-dynamic-scales.spanish.md | 24 +- ...to-find-a-users-gps-coordinates.spanish.md | 28 +- .../anonymous-message-board.spanish.md | 12 +- .../issue-tracker.spanish.md | 16 +- .../personal-library.spanish.md | 16 +- .../stock-price-checker.spanish.md | 12 +- .../find-the-symmetric-difference.spanish.md | 38 +-- .../algorithms/inventory-update.spanish.md | 18 +- .../algorithms/pairwise.spanish.md | 28 +- .../breadth-first-search.spanish.md | 34 +- .../create-a-map-data-structure.spanish.md | 30 +- .../create-and-add-to-sets-in-es6.spanish.md | 30 +- ...af-node-in-a-binary-search-tree.spanish.md | 20 +- ...e-child-in-a-binary-search-tree.spanish.md | 10 +- ...hildren-in-a-binary-search-tree.spanish.md | 12 +- .../depth-first-search.spanish.md | 36 +- ...ubset-check-on-two-sets-of-data.spanish.md | 16 +- ...se-.has-and-.size-on-an-es6-set.spanish.md | 22 +- ...pressed-as-a-sum-of-powers-of-2.spanish.md | 22 +- .../problem-19-counting-sundays.spanish.md | 16 +- .../problem-220-heighway-dragon.spanish.md | 22 +- .../problem-34-digit-factorials.spanish.md | 12 +- ...99-squarefree-fibonacci-numbers.spanish.md | 34 +- ...oblem-419-look-and-say-sequence.spanish.md | 34 +- ...blem-43-sub-string-divisibility.spanish.md | 26 +- ...blem-47-distinct-primes-factors.spanish.md | 26 +- .../problem-48-self-powers.spanish.md | 16 +- ...-perfect-number-classifications.spanish.md | 24 +- .../accumulator-factory.spanish.md | 16 +- .../ackermann-function.spanish.md | 30 +- .../rosetta-code/align-columns.spanish.md | 52 +-- .../rosetta-code/amicable-pairs.spanish.md | 32 +- .../rosetta-code/averages-mode.spanish.md | 10 +- .../averages-pythagorean-means.spanish.md | 32 +- .../averages-root-mean-square.spanish.md | 12 +- .../rosetta-code/babbage-problem.spanish.md | 18 +- .../rosetta-code/balanced-brackets.spanish.md | 56 ++-- ...given-radius-through-two-points.spanish.md | 58 ++-- .../rosetta-code/combinations.spanish.md | 40 +-- .../rosetta-code/comma-quibbling.spanish.md | 38 +-- .../compare-a-list-of-strings.spanish.md | 28 +- ...rt-seconds-to-compound-duration.spanish.md | 134 ++++---- ...ount-occurrences-of-a-substring.spanish.md | 22 +- .../rosetta-code/cramers-rule.spanish.md | 40 +-- .../rosetta-code/date-manipulation.spanish.md | 28 +- .../rosetta-code/day-of-the-week.spanish.md | 16 +- .../deal-cards-for-freecell.spanish.md | 104 +++--- .../rosetta-code/deepcopy.spanish.md | 26 +- .../define-a-primitive-data-type.spanish.md | 28 +- .../department-numbers.spanish.md | 52 +-- .../rosetta-code/discordian-date.spanish.md | 22 +- .../element-wise-operations.spanish.md | 32 +- .../rosetta-code/emirp-primes.spanish.md | 14 +- .../rosetta-code/equilibrium-index.spanish.md | 34 +- .../ethiopian-multiplication.spanish.md | 98 +++--- .../rosetta-code/euler-method.spanish.md | 46 +-- .../evaluate-binomial-coefficients.spanish.md | 18 +- .../execute-a-markov-algorithm.spanish.md | 224 ++++++------- .../rosetta-code/execute-brain.spanish.md | 56 ++-- .../rosetta-code/factorial.spanish.md | 28 +- .../factors-of-an-integer.spanish.md | 14 +- .../rosetta-code/farey-sequence.spanish.md | 36 +- ...bonacci-n-step-number-sequences.spanish.md | 76 ++--- .../rosetta-code/fractran.spanish.md | 30 +- .../rosetta-code/gamma-function.spanish.md | 22 +- ...erate-lower-case-ascii-alphabet.spanish.md | 16 +- .../hailstone-sequence.spanish.md | 26 +- .../rosetta-code/happy-numbers.spanish.md | 12 +- .../harshad-or-niven-series.spanish.md | 14 +- .../hash-from-two-arrays.spanish.md | 24 +- .../rosetta-code/hash-join.spanish.md | 312 +++++++++--------- .../heronian-triangles.spanish.md | 26 +- .../rosetta-code/s-expressions.spanish.md | 84 ++--- .../rosetta-code/taxicab-numbers.spanish.md | 46 +-- ...tokenize-a-string-with-escaping.spanish.md | 58 ++-- .../top-rank-per-group.spanish.md | 76 ++--- .../rosetta-code/towers-of-hanoi.spanish.md | 34 +- 281 files changed, 3413 insertions(+), 3402 deletions(-) diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md index 6f224dc930..f18f579dc4 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md @@ -8,16 +8,16 @@ guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-a --- ## Description -
-Es probable que haya visto un atributo alt en una etiqueta img en otros desafíos. Alt texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: -<img src="importantLogo.jpeg" alt="Company logo"> -personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo alt y leer su contenido para entregar información clave. -buen texto alt es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo alt en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio. +
+Es probable que haya visto un atributo alt en una etiqueta img en otros desafíos. Alt texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: +<img src="importantLogo.jpeg" alt="Company logo"> +personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo alt y leer su contenido para entregar información clave. +buen texto alt es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo alt en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio.
## Instructions -
-Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo alt en la etiqueta img , que explica que Camper Cat está haciendo karate. (La imagen src no se vincula a un archivo real, por lo que debería ver el texto alt en la pantalla). +
+Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo alt en la etiqueta img , que explica que Camper Cat está haciendo karate. (La imagen src no se vincula a un archivo real, por lo que debería ver el texto alt en la pantalla).
## Tests @@ -25,7 +25,7 @@ Camper Cat es tanto un ninja codificador como un ninja real, y está construyend ```yml tests: - - text: 'Su etiqueta img debe tener un atributo alt , y no debe estar vacío'. + - text: 'Su etiqueta img debe tener un atributo alt , y no debe estar vacío' testString: 'assert($("img").attr("alt"), "Your img tag should have an alt attribute, and it should not be empty.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md index caf23d2a35..41a3913970 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md @@ -7,15 +7,15 @@ videoUrl: '' --- ## Description -
-Continuando con el tema de la fecha, HTML5 también introdujo el elemento de time junto con un atributo de datetime y datetime para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo datetime . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto. -Aquí hay un ejemplo: -<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p> +
+Continuando con el tema de la fecha, HTML5 también introdujo el elemento de time junto con un atributo de datetime y datetime para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo datetime . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto. +Aquí hay un ejemplo: +<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
## Instructions -
-encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de time alrededor del texto "Jueves, 15 de septiembre <sup> th </sup>" y agregue un atributo de datetime y datetime establecido en "2016-09-15". +
+encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de time alrededor del texto "Jueves, 15 de septiembre <sup> th </sup>" y agregue un atributo de datetime y datetime establecido en "2016-09-15".
## Tests @@ -23,7 +23,7 @@ encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelv ```yml tests: - - text: 'Sus etiquetas de time deben rodear el texto "Jueves 15 de septiembre <sup> th </sup>".' + - text: 'Sus etiquetas de time deben rodear el texto "Jueves 15 de septiembre <sup> th </sup>".' testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your time tags should wrap around the text "Thursday, September 15<sup>th</sup>".");' - text: Su etiqueta de time debe tener un atributo de datetime y datetime que no esté vacío. testString: 'assert($("time").attr("datetime"), "Your time tag should have a datetime attribute that is not empty.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md index 51bbd79caf..fea027dfd6 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md @@ -7,17 +7,17 @@ videoUrl: '' --- ## Description -
-En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un background-color al elemento que contiene el texto que desea enfatizar. Este desafío utiliza rgba() lugar de códigos hex o rgb() normal. -
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
-Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es completamente transparente o claro. rgba() es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. -background-color: rgba(45, 45, 45, 0.1) para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1. +
+En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un background-color al elemento que contiene el texto que desea enfatizar. Este desafío utiliza rgba() lugar de códigos hex o rgb() normal. +
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
+Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es completamente transparente o claro. rgba() es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. +background-color: rgba(45, 45, 45, 0.1) para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1.
## Instructions -
-Para hacer que el texto destaque más, ajuste el background-color de background-color del elemento h4 al valor rgba() dado. -También para el h4 , elimine la propiedad de height y agregue padding de 10px. +
+Para hacer que el texto destaque más, ajuste el background-color de background-color del elemento h4 al valor rgba() dado. +También para el h4 , elimine la propiedad de height y agregue padding de 10px.
## Tests @@ -25,7 +25,7 @@ También para el h4 , elimine la propiedad de height y ```yml tests: - - text: 'Su código debe agregar una propiedad de background-color al conjunto de elementos h4 en rgba(45, 45, 45, 0.1) .' + - text: 'Su código debe agregar una propiedad de background-color al conjunto de elementos h4 en rgba(45, 45, 45, 0.1) .' testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).");' - text: Su código debe agregar una propiedad de padding al elemento h4 y establecerlo en 10 píxeles. testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a padding property to the h4 element and set it to 10 pixels.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md index 1cb5506e4c..1e43dcaf48 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' --- ## Description -
-El desafío de los colores complementarios mostró que los colores opuestos en la rueda de colores pueden hacer que cada uno se vea más vibrante cuando se colocan lado a lado. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página. +
+El desafío de los colores complementarios mostró que los colores opuestos en la rueda de colores pueden hacer que cada uno se vea más vibrante cuando se colocan lado a lado. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página.
## Instructions -
-Esta página utilizará un tono de verde azulado ( #09A7A1 ) como color dominante, y su complemento naranja ( #FF790E ) para resaltar visualmente los botones de #FF790E . Cambie el background-color de background-color del header y del footer de footer de negro al color verde azulado. Luego cambia el color texto h2 a teal también. Finalmente, cambie el background-color de background-color del button al color naranja. +
+Esta página utilizará un tono de verde azulado ( #09A7A1 ) como color dominante, y su complemento naranja ( #FF790E ) para resaltar visualmente los botones de #FF790E . Cambie el background-color de background-color del header y del footer de footer de negro al color verde azulado. Luego cambia el color texto h2 a teal también. Finalmente, cambie el background-color de background-color del button al color naranja.
## Tests @@ -21,13 +21,13 @@ Esta página utilizará un tono de verde azulado ( #09A7A1 ) como c ```yml tests: - - text: 'El elemento del header debe tener un background-color de background-color de # 09A7A1.' + - text: 'El elemento del header debe tener un background-color de background-color de # 09A7A1.' testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The header element should have a background-color of #09A7A1.");' - - text: 'El elemento de footer debe tener un background-color de background-color de # 09A7A1.' + - text: 'El elemento de footer debe tener un background-color de background-color de # 09A7A1.' testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The footer element should have a background-color of #09A7A1.");' - - text: 'El elemento h2 debe tener un color de # 09A7A1.' + - text: 'El elemento h2 debe tener un color de # 09A7A1.' testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The h2 element should have a color of #09A7A1.");' - - text: 'El elemento del button debe tener un background-color de background-color de # FF790E.' + - text: 'El elemento del button debe tener un background-color de background-color de # FF790E.' testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The button element should have a background-color of #FF790E.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md index 18801b152a..0c4c4a85d4 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md @@ -7,15 +7,15 @@ videoUrl: '' --- ## Description -
-Este reto tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento. -Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de activación mediante el uso del selector de pseudo-clase :hover . Aquí está el CSS para cambiar el color de la etiqueta de anclaje a rojo durante su estado de desplazamiento: -
a:hover {
  color: red;
}
+
+Este reto tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento. +Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de activación mediante el uso del selector de pseudo-clase :hover . Aquí está el CSS para cambiar el color de la etiqueta de anclaje a rojo durante su estado de desplazamiento: +
a:hover {
  color: red;
}
## Instructions -
-El editor de código tiene una regla CSS para el estilo de todo a negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la a etiqueta, el color es de color azul. +
+El editor de código tiene una regla CSS para el estilo de todo a negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la a etiqueta, el color es de color azul.
## Tests @@ -23,7 +23,7 @@ El editor de código tiene una regla CSS para el estilo de todo a n ```yml tests: - - text: 'El color etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el :hover estado de :hover '. + - text: 'El color etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el :hover estado de :hover ' testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag color should remain black, only add CSS rules for the :hover state.");' - text: La etiqueta de anclaje debe tener un color azul en el hover. testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a color of blue on hover.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md index 87aed65ee1..bb526888ce 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md @@ -7,16 +7,16 @@ videoUrl: '' --- ## Description -
-Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad box-shadow que establece la sombra de un elemento, junto con la propiedad border-radius que controla la redondez de las esquinas del elemento. -Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. -Para crear un objeto redondo, la propiedad border-radius debe establecerse en un valor de 50%. -Puede recordar de un desafío anterior que la propiedad box-shadow toma valores para offset-x , offset-y , blur-radius , spread-radius y un valor de color en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales. +
+Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad box-shadow que establece la sombra de un elemento, junto con la propiedad border-radius que controla la redondez de las esquinas del elemento. +Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. +Para crear un objeto redondo, la propiedad border-radius debe establecerse en un valor de 50%. +Puede recordar de un desafío anterior que la propiedad box-shadow toma valores para offset-x , offset-y , blur-radius , spread-radius y un valor de color en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales.
## Instructions -
-Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el background-color a transparente, luego establezca la propiedad de border-radius en 50% para hacer la forma circular. Finalmente, cambie la propiedad box-shadow para establecer offset-x en 25px, offset-y en 10px, blur-radius en 0, spread-radius en 0 y color en azul. +
+Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el background-color a transparente, luego establezca la propiedad de border-radius en 50% para hacer la forma circular. Finalmente, cambie la propiedad box-shadow para establecer offset-x en 25px, offset-y en 10px, blur-radius en 0, spread-radius en 0 y color en azul.
## Tests @@ -28,7 +28,7 @@ tests: testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color property should be set to transparent.");' - text: El valor de la propiedad border-radius debe establecer en 50% . testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius property should be set to 50%.");' - - text: 'El valor de la propiedad box-shadow debe establecerse en 25px para offset-x , 10px para offset-y , 0 para blur-radius de blur-radius , 0 para spread-radius de spread-radius y finalmente azul para el color.' + - text: 'El valor de la propiedad box-shadow debe establecerse en 25px para offset-x , 10px para offset-y , 0 para blur-radius de blur-radius , 0 para spread-radius de spread-radius y finalmente azul para el color.' testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md index 608943d3ad..58cc88ee87 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md @@ -7,18 +7,18 @@ videoUrl: '' --- ## Description -
-Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos ::before y ::after . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un ::before pseudo-elemento se usa para agregar un rectángulo a un elemento con el heart la clase: -
.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
-Para que los elementos de pseudo-elementos ::before y ::after funcionen correctamente, deben tener una propiedad de content definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos ::before y ::after se usan para hacer formas, la propiedad de content sigue siendo necesaria, pero se establece en una cadena vacía. -En el ejemplo anterior, el elemento con la clase de heart tiene un pseudoelemento ::before del que produce un rectángulo amarillo con height y width de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la left y 50px por encima de la top del elemento. +
+Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos ::before y ::after . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un ::before pseudo-elemento se usa para agregar un rectángulo a un elemento con el heart la clase: +
.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
+Para que los elementos de pseudo-elementos ::before y ::after funcionen correctamente, deben tener una propiedad de content definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos ::before y ::after se usan para hacer formas, la propiedad de content sigue siendo necesaria, pero se establece en una cadena vacía. +En el ejemplo anterior, el elemento con la clase de heart tiene un pseudoelemento ::before del que produce un rectángulo amarillo con height y width de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la left y 50px por encima de la top del elemento.
## Instructions -
-Transforma el elemento en la pantalla a un corazón. En el heart::after selector, cambie el background-color a rosa y el border-radius del border-radius a 50%. -A continuación, apunte el elemento con el heart la clase (solo el heart ) y complete la propiedad de transform . Utilice la función rotate() con -45 grados. ( rotate() funciona de la misma manera que skewX() y skewY() hacen). -Finalmente, en el heart::before selector, establece su propiedad de content en una cadena vacía. +
+Transforma el elemento en la pantalla a un corazón. En el heart::after selector, cambie el background-color a rosa y el border-radius del border-radius a 50%. +A continuación, apunte el elemento con el heart la clase (solo el heart ) y complete la propiedad de transform . Utilice la función rotate() con -45 grados. ( rotate() funciona de la misma manera que skewX() y skewY() hacen). +Finalmente, en el heart::before selector, establece su propiedad de content en una cadena vacía.
## Tests @@ -26,13 +26,13 @@ Finalmente, en el heart::before selector, establece su propiedad de ```yml tests: - - text: 'La propiedad de background-color de fondo del heart::after selector debe ser rosa.' + - text: 'La propiedad de background-color de fondo del heart::after selector debe ser rosa.' testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The background-color property of the heart::after selector should be pink.");' - - text: 'El border-radius del border-radius del heart::after selector debe ser del 50%.' + - text: 'El border-radius del border-radius del heart::after selector debe ser del 50%.' testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The border-radius of the heart::after selector should be 50%.");' - text: La propiedad de transform para la clase de heart debe usar una función rotate() establecida en -45 grados. testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The transform property for the heart class should use a rotate() function set to -45 degrees.");' - - text: 'El content del heart::before selector debe ser una cadena vacía.' + - text: 'El content del heart::before selector debe ser una cadena vacía.' testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The content of the heart::before selector should be an empty string.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md index 65a1dc473b..d88e410360 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md @@ -7,14 +7,14 @@ videoUrl: '' --- ## Description -
-La siguiente opción para la propiedad de position CSS es absolute , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición relative , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. -Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado posicionado más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando position: relative; ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada. +
+La siguiente opción para la propiedad de position CSS es absolute , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición relative , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. +Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado posicionado más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando position: relative; ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada.
## Instructions -
-Bloquee el elemento #searchbar en la parte superior derecha de su section principal declarando su position como absolute . Dale las compensaciones top y right de 50 píxeles cada una. +
+Bloquee el elemento #searchbar en la parte superior derecha de su section principal declarando su position como absolute . Dale las compensaciones top y right de 50 píxeles cada una.
## Tests @@ -22,11 +22,11 @@ Bloquee el elemento #searchbar en la parte superior derecha de su < ```yml tests: - - text: 'El elemento #searchbar debería tener una position establecida en absolute .' + - text: 'El elemento #searchbar debería tener una position establecida en absolute .' testString: 'assert($("#searchbar").css("position") == "absolute", "The #searchbar element should have a position set to absolute.");' - - text: 'Su código debe usar el desplazamiento de CSS top de 50 píxeles en el elemento #searchbar '. + - text: 'Su código debe usar el desplazamiento de CSS top de 50 píxeles en el elemento #searchbar ' testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the top CSS offset of 50 pixels on the #searchbar element.");' - - text: 'Su código debe usar el desplazamiento de CSS right de 50 píxeles en el elemento #searchbar '. + - text: 'Su código debe usar el desplazamiento de CSS right de 50 píxeles en el elemento #searchbar ' testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the right CSS offset of 50 pixels on the #searchbar element.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md index 50f660f05f..5665a5dd16 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md @@ -7,14 +7,14 @@ videoUrl: '' --- ## Description -
-El siguiente esquema de diseño que ofrece CSS es la posición fixed , que es un tipo de posicionamiento absoluto que bloquea un elemento relativo a la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se "dan cuenta" de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. -Una diferencia clave entre las posiciones fixed y absolute es que un elemento con una posición fija no se moverá cuando el usuario se desplace. +
+El siguiente esquema de diseño que ofrece CSS es la posición fixed , que es un tipo de posicionamiento absoluto que bloquea un elemento relativo a la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se "dan cuenta" de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. +Una diferencia clave entre las posiciones fixed y absolute es que un elemento con una posición fija no se moverá cuando el usuario se desplace.
## Instructions -
-La barra de navegación en el código está etiquetada con un ID de navbar de navbar . Cambie su position a fixed , y desplace 0 píxeles desde la top y 0 píxeles desde la left . Observe el (falta de) impacto en la posición h1 , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado. +
+La barra de navegación en el código está etiquetada con un ID de navbar de navbar . Cambie su position a fixed , y desplace 0 píxeles desde la top y 0 píxeles desde la left . Observe el (falta de) impacto en la posición h1 , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado.
## Tests @@ -22,11 +22,11 @@ La barra de navegación en el código está etiquetada con un ID de navbar ```yml tests: - - text: 'El elemento #navbar debería tener una position establecida como fixed .' + - text: 'El elemento #navbar debería tener una position establecida como fixed .' testString: 'assert($("#navbar").css("position") == "fixed", "The #navbar element should have a position set to fixed.");' - - text: 'Su código debe usar el desplazamiento de CSS top de 0 píxeles en el elemento #navbar '. + - text: 'Su código debe usar el desplazamiento de CSS top de 0 píxeles en el elemento #navbar ' testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the top CSS offset of 0 pixels on the #navbar element.");' - - text: 'Tu código debe usar el desplazamiento de CSS left de 0 píxeles en el elemento #navbar '. + - text: 'Tu código debe usar el desplazamiento de CSS left de 0 píxeles en el elemento #navbar ' testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the left CSS offset of 0 pixels on the #navbar element.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md index e154cbe1b4..fa58d77c2f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md @@ -7,17 +7,17 @@ videoUrl: '' --- ## Description -
-Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas linear y de ease-out desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. -La animation-timing-function automáticamente en cada fotograma clave cuando el animation-iteration-count se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al 50% ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. -La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: -cubic-bezier(0.3, 0.4, 0.5, 1.6); -Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno . Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo. +
+Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas linear y de ease-out desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. +La animation-timing-function automáticamente en cada fotograma clave cuando el animation-iteration-count se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al 50% ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. +La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: +cubic-bezier(0.3, 0.4, 0.5, 1.6); +Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno . Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo.
## Instructions -
-Cambie el valor de la animation-timing-function de animation-timing-function del elemento con el id de green a una función cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649. +
+Cambie el valor de la animation-timing-function de animation-timing-function del elemento con el id de green a una función cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649.
## Tests @@ -25,7 +25,7 @@ Cambie el valor de la animation-timing-function de animation- ```yml tests: - - text: 'El valor de la propiedad animation-timing-function para el elemento con el id green debe ser una función de cubic-bezier con los valores de x1, y1, x2, y2 según lo especificado.' + - text: 'El valor de la propiedad animation-timing-function para el elemento con el id green debe ser una función de cubic-bezier con los valores de x1, y1, x2, y2 según lo especificado.' testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md index 2be9e73b3f..fd8da5db03 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md @@ -7,15 +7,15 @@ videoUrl: '' --- ## Description -
-Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido 500ms , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado. -Esto se puede hacer configurando la propiedad de animation-fill-mode en forwards . La animation-fill-mode especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: -animation-fill-mode: forwards; +
+Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido 500ms , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado. +Esto se puede hacer configurando la propiedad de animation-fill-mode en forwards . La animation-fill-mode especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: +animation-fill-mode: forwards;
## Instructions -
-Establezca la propiedad de animation-fill-mode del button:hover hacia forwards para que el botón permanezca resaltado cuando un usuario se desplace sobre él. +
+Establezca la propiedad de animation-fill-mode del button:hover hacia forwards para que el botón permanezca resaltado cuando un usuario se desplace sobre él.
## Tests @@ -23,7 +23,7 @@ Establezca la propiedad de animation-fill-mode del button:hov ```yml tests: - - text: ' button:hover debería tener una propiedad de animation-fill-mode con un valor de forwards .' + - text: ' button:hover debería tener una propiedad de animation-fill-mode con un valor de forwards .' testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "button:hover should have a animation-fill-mode property with a value of forwards.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md index ab8261c433..f5cd413d78 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md @@ -7,12 +7,12 @@ videoUrl: '' --- ## Description -
+
Las compensaciones de CSS de la top o bottom , y de la left o la right indican al navegador la distancia a la que se debe desplazar un elemento en relación con el lugar donde se ubicaría en el flujo normal del documento. Está desplazando un elemento lejos de un punto dado, lo que lo aleja del lado al que se hace referencia (efectivamente, en la dirección opuesta). Como viste en el último desafío, usando el desplazamiento superior movió el h2 hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. 0 ## Instructions -
-Use las compensaciones de CSS para mover el h2 15 píxeles a la derecha y 10 píxeles hacia arriba. +
+Use las compensaciones de CSS para mover el h2 15 píxeles a la derecha y 10 píxeles hacia arriba.
## Tests @@ -20,9 +20,9 @@ Use las compensaciones de CSS para mover el h2 15 píxeles a la der ```yml tests: - - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 10px hacia arriba. En otras palabras, aléjelo 10px de la bottom de donde normalmente se sienta. ' + - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 10px hacia arriba. En otras palabras, aléjelo 10px de la bottom de donde normalmente se sienta. ' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.");' - - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 15px hacia la derecha. En otras palabras, aléjelo a 15px de la left de donde normalmente se encuentra. + - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 15px hacia la derecha. En otras palabras, aléjelo a 15px de la left de donde normalmente se encuentra. testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md index a039abded6..dafa6167b3 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md @@ -7,16 +7,16 @@ videoUrl: '' --- ## Description -
-Un desafío anterior discutió la palabra clave de ease-out que describe un cambio de animación que se acelera primero y luego se ralentiza al final de la animación. A la derecha, se muestra la diferencia entre la palabra clave de ease-out (para el elemento azul) y linear palabra clave linear (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de ease-out de uso utilizando una función de curva Bezier cúbica personalizada. -En general, el cambio de los puntos de anclaje p1 y p2 impulsa la creación de diferentes curvas Bezier, que controlan cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de relajación: -animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -Recuerde que todas cubic-bezier funciones de cubic-bezier comienzan con p0 en (0, 0) y terminan con p3 en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a p1 y el valor de 0, luego va a p2 y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para p1 , hasta 0.58 para p2 ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación. +
+Un desafío anterior discutió la palabra clave de ease-out que describe un cambio de animación que se acelera primero y luego se ralentiza al final de la animación. A la derecha, se muestra la diferencia entre la palabra clave de ease-out (para el elemento azul) y linear palabra clave linear (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de ease-out de uso utilizando una función de curva Bezier cúbica personalizada. +En general, el cambio de los puntos de anclaje p1 y p2 impulsa la creación de diferentes curvas Bezier, que controlan cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de relajación: +animation-timing-function: cubic-bezier(0, 0, 0.58, 1); +Recuerde que todas cubic-bezier funciones de cubic-bezier comienzan con p0 en (0, 0) y terminan con p3 en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a p1 y el valor de 0, luego va a p2 y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para p1 , hasta 0.58 para p2 ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación.
## Instructions -
-Para ver el efecto de esta curva de Bezier en acción, cambie la animation-timing-function de animation-timing-function del elemento con id de red a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar. +
+Para ver el efecto de esta curva de Bezier en acción, cambie la animation-timing-function de animation-timing-function del elemento con id de red a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar.
## Tests @@ -24,7 +24,7 @@ Para ver el efecto de esta curva de Bezier en acción, cambie la animation ```yml tests: - - text: 'El valor de la propiedad animation-timing-function del elemento con el id red debe ser una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1.' + - text: 'El valor de la propiedad animation-timing-function del elemento con el id red debe ser una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1.' testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");' - text: El elemento con el ID red ya no debería tener la propiedad de animation-timing-function lineal. testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red should no longer have the animation-timing-function property of linear.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md index 3319732f7f..0340972ffd 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md @@ -7,14 +7,14 @@ videoUrl: '' --- ## Description -
-Para cambiar la escala de un elemento, CSS tiene la propiedad de transform , junto con su función scale() . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página: -
p {
  transform:scale(2);
}
+
+Para cambiar la escala de un elemento, CSS tiene la propiedad de transform , junto con su función scale() . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página: +
p {
  transform:scale(2);
}
## Instructions -
-Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su tamaño original. +
+Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su tamaño original.
## Tests @@ -22,7 +22,7 @@ Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su t ```yml tests: - - text: 'Establezca la propiedad de transform para #ball2 para escalarla 1.5 veces su tamaño.' + - text: 'Establezca la propiedad de transform para #ball2 para escalarla 1.5 veces su tamaño.' testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the transform property for #ball2 to scale it 1.5 times its size.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md index 87d7fe225f..7df68c6cd6 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' --- ## Description -
-Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta s . Muestra que una sección de texto ya no es válida. Con la etiqueta s , el navegador aplica el CSS de text-decoration: line-through; al elemento. +
+Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta s . Muestra que una sección de texto ya no es válida. Con la etiqueta s , el navegador aplica el CSS de text-decoration: line-through; al elemento.
## Instructions -
-Envuelva la etiqueta s alrededor de "Google" dentro de la etiqueta h4 y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado. +
+Envuelva la etiqueta s alrededor de "Google" dentro de la etiqueta h4 y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado.
## Tests @@ -25,7 +25,7 @@ tests: testString: 'assert($("s").length == 1, "Your code should add one s tag to the markup.");' - text: La etiqueta s debe envolver el texto de Google en la etiqueta h4 . No debe contener la palabra Alfabeto. testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.");' - - text: 'Incluya la palabra Alfabeto en la etiqueta h4 , sin tachar el formato.' + - text: 'Incluya la palabra Alfabeto en la etiqueta h4 , sin tachar el formato.' testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the h4 tag, without strikethrough formatting.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md index 74b77a7ee5..790c656a04 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md @@ -8,14 +8,14 @@ videoUrl: '' --- ## Description -
-Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius . +
+Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius .
## Instructions -
-Puede especificar un border-radius con píxeles. Dale a tu foto de gato un border-radius de 10px de 10px . -Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar border-radius .thick-green-border clase .thick-green-border o a la clase .smaller-image . +
+Puede especificar un border-radius con píxeles. Dale a tu foto de gato un border-radius de 10px de 10px . +Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar border-radius .thick-green-border clase .thick-green-border o a la clase .smaller-image .
## Tests @@ -23,7 +23,7 @@ Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede a ```yml tests: - - text: El elemento de su imagen debe tener la clase "borde verde grueso". + - text: El elemento de su imagen debe tener la clase "borde verde grueso." testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");' - text: Su imagen debe tener un radio de borde de 10px testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of 10px");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md index 4d73969331..5e6a1569e9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md @@ -7,15 +7,15 @@ videoUrl: '' --- ## Description -
-Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . -Debido a la cascada, las variables CSS a menudo se definen en el elemento : raíz . -:root es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el elemento. Al crear sus variables en :root , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo. +
+Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . +Debido a la cascada, las variables CSS a menudo se definen en el elemento : raíz . +:root es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el elemento. Al crear sus variables en :root , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
## Instructions -
-Defina una variable llamada --penguin-belly en el selector de :root y déle el valor de pink . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable. +
+Defina una variable llamada --penguin-belly en el selector de :root y déle el valor de pink . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
## Tests @@ -23,7 +23,7 @@ Defina una variable llamada --penguin-belly en el selector de --penguin-belly en la :root y --penguin-belly a pink '. + - text: 'declara la variable --penguin-belly en la :root y --penguin-belly a pink ' testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly variable in the :root and assign it to pink.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md index 119e75b80f..caabbdf7b8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md @@ -7,14 +7,14 @@ videoUrl: '' --- ## Description -
-El tamaño de fuente se controla mediante la propiedad CSS de font-size , como esta: -
h1 {
  font-size: 30px;
}
+
+El tamaño de fuente se controla mediante la propiedad CSS de font-size , como esta: +
h1 {
  font-size: 30px;
}
## Instructions -
-Dentro de la misma etiqueta <style> que contiene su clase de red-text , cree una entrada para los elementos p y establezca el font-size en 16 píxeles ( 16px ). +
+Dentro de la misma etiqueta <style> que contiene su clase de red-text , cree una entrada para los elementos p y establezca el font-size en 16 píxeles ( 16px ).
## Tests @@ -22,7 +22,7 @@ Dentro de la misma etiqueta <style> que contiene su clase de ```yml tests: - - text: 'Entre las etiquetas de style , 16px elementos p font-size de font-size de 16px . El navegador y el zoom de texto deben estar al 100% ". + - text: 'Entre las etiquetas de style , 16px elementos p font-size de font-size de 16px . El navegador y el zoom de texto deben estar al 100% ". testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md index 2f2bd663bc..8ce099eec8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md @@ -7,18 +7,18 @@ videoUrl: '' --- ## Description -
-Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de style . -Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. -En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar !important -Volvamos a nuestra declaración de clase de pink-text . Recuerde que nuestra clase de pink-text fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea. +
+Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de style . +Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. +En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar !important +Volvamos a nuestra declaración de clase de pink-text . Recuerde que nuestra clase de pink-text fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
## Instructions -
-¡Agreguemos la palabra clave !important para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento h1 será rosa. -Un ejemplo de cómo hacer esto es: -color: red !important; +
+¡Agreguemos la palabra clave !important para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento h1 será rosa. +Un ejemplo de cómo hacer esto es: +color: red !important;
## Tests @@ -32,7 +32,7 @@ tests: testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");' - text: Su elemento h1 debe tener el ID de orange-text . testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");' - - text: 'Su elemento h1 debe tener el estilo de color: white '. + - text: 'Su elemento h1 debe tener el estilo de color: white ' testString: 'assert(code.match(/h1 element should have the inline style of color: white.");' - text: Su declaración de clase de pink-text debe tener la palabra clave !important para anular todas las demás declaraciones. testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your pink-text class declaration should have the !important keyword to override all other declarations.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md index dfedf3d3fb..9f4ea92c89 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md @@ -7,16 +7,16 @@ videoUrl: '' --- ## Description -
-A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. -Por ejemplo, su elemento h1 no puede ser verde y rosa al mismo tiempo. -Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green; del elemento del body color: green; Propiedad CSS? +
+A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. +Por ejemplo, su elemento h1 no puede ser verde y rosa al mismo tiempo. +Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green; del elemento del body color: green; Propiedad CSS?
## Instructions -
-Crea una clase CSS llamada pink-text que le da a un elemento el color rosa. -Dale a tu elemento h1 la clase de pink-text . +
+Crea una clase CSS llamada pink-text que le da a un elemento el color rosa. +Dale a tu elemento h1 la clase de pink-text .
## Tests @@ -26,7 +26,7 @@ Dale a tu elemento h1 la clase de pink-text . tests: - text: Su elemento h1 debe tener la clase pink-text . testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");' - - text: 'Tu <style> debe tener una clase de CSS de pink-text que cambie el color .' + - text: 'Tu <style> debe tener una clase de CSS de pink-text que cambie el color .' testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <style> should have a pink-text CSS class that changes the color.");' - text: Tu elemento h1 debe ser rosa. testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");' diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md index e3f9b3c295..70e47881a8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md @@ -7,19 +7,19 @@ videoUrl: '' --- ## Description -
-Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif -Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. -Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, la especificará de la siguiente manera: -
p {
  font-family: Helvetica, sans-serif;
}
-Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS. +
+Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif +Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. +Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, la especificará de la siguiente manera: +
p {
  font-family: Helvetica, sans-serif;
}
+Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
## Instructions -
-Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . -En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . -Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente. +
+Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . +En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . +Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
## Tests @@ -31,9 +31,9 @@ tests: testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font Lobster.");' - text: Su elemento h2 debería degradarse a la fuente monospace cuando Lobster no está disponible. testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font monospace when Lobster is not available.");' - - text: Comente su llamada a Google para la fuente Lobster colocando <!-- delante de ella. ' + - text: Comente su llamada a Google para la fuente Lobster colocando <!-- delante de ella. ' testString: 'assert(new RegExp("", "gi").test(code), "Be sure to close your comment by adding -->.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md index 58429be0e6..cd691b9680 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md @@ -7,20 +7,20 @@ videoUrl: '' --- ## Description -
-Las clases son estilos reutilizables que se pueden agregar a elementos HTML. -Aquí hay un ejemplo de declaración de clase CSS: -
<style>
  .blue-text {
    color: blue;
  }
</style>
-Puede ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style> . -Puede aplicar una clase a un elemento HTML como este: -<h2 class="blue-text">CatPhotoApp</h2> -Tenga en cuenta que en su elemento de style CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período. +
+Las clases son estilos reutilizables que se pueden agregar a elementos HTML. +Aquí hay un ejemplo de declaración de clase CSS: +
<style>
  .blue-text {
    color: blue;
  }
</style>
+Puede ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style> . +Puede aplicar una clase a un elemento HTML como este: +<h2 class="blue-text">CatPhotoApp</h2> +Tenga en cuenta que en su elemento de style CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
## Instructions -
-Dentro de su elemento de style , cambie el selector h2 a .red-text y actualice el valor del blue de blue a red . -Asigne a su elemento h2 el atributo de class con un valor de 'red-text' . +
+Dentro de su elemento de style , cambie el selector h2 a .red-text y actualice el valor del blue de blue a red . +Asigne a su elemento h2 el atributo de class con un valor de 'red-text' .
## Tests @@ -34,7 +34,7 @@ tests: testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");' - text: Su hoja de estilo debe declarar una clase de red-text y tener su color establecido en rojo. testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a red-text class and have its color set to red.");' - - text: 'No utilice declaraciones de estilo en línea como style="color: red" en su elemento h2 .' + - text: 'No utilice declaraciones de estilo en línea como style="color: red" en su elemento h2 .' testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like style="color: red" in your h2 element.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md index 7684b8c00f..a7fcf0d791 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md @@ -7,14 +7,14 @@ videoUrl: '' --- ## Description -
-Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios. -Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use. +
+Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios. +Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
## Instructions -
-En el :root selector de :root de la media query , cámbielo para que --penguin-size se redefina y se le dé un valor de 200px . Además, redefine --penguin-skin y dale un valor de black . Luego cambie el tamaño de la vista previa para ver este cambio en acción. +
+En el :root selector de :root de la media query , cámbielo para que --penguin-size se redefina y se le dé un valor de 200px . Además, redefine --penguin-skin y dale un valor de black . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
## Tests @@ -22,9 +22,9 @@ En el :root selector de :root de la media query< ```yml tests: - - text: ' :root debe reasignar la variable --penguin-size a 200px .' + - text: ' :root debe reasignar la variable --penguin-size a 200px .' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-size variable to 200px.");' - - text: ' :root debería reasignar la variable --penguin-skin a black '. + - text: ' :root debería reasignar la variable --penguin-skin a black ' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-skin variable to black.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md index 091adf2a3b..d0c5add338 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md @@ -7,16 +7,16 @@ videoUrl: '' --- ## Description -
-Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. -Por ejemplo, el código hexadecimal de rojo #FF0000 se puede acortar a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. -Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color. +
+Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. +Por ejemplo, el código hexadecimal de rojo #FF0000 se puede acortar a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. +Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color.
## Instructions -
-Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos. -
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F
+
+Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos. +
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F
## Tests @@ -26,19 +26,19 @@ Adelante, intente usar los códigos hexadecimales abreviados para colorear los e tests: - text: ¡Da tu elemento h1 con el texto I am red! El color rojo. testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");' - - text: 'Use el hex code abreviado para el color rojo en lugar del código hexadecimal #FF0000 .' + - text: 'Use el hex code abreviado para el color rojo en lugar del código hexadecimal #FF0000 .' testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate hex code for the color red instead of the hex code #FF0000.");' - text: ¡Da tu elemento h1 con el texto I am green! El color verde. testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your h1 element with the text I am green! the color green.");' - - text: 'Use el hex code abreviado para el color verde en lugar del código hexadecimal #00FF00 .' + - text: 'Use el hex code abreviado para el color verde en lugar del código hexadecimal #00FF00 .' testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated hex code for the color green instead of the hex code #00FF00.");' - text: ¡Da tu elemento h1 con el texto I am cyan! El color cian. testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your h1 element with the text I am cyan! the color cyan.");' - - text: 'Use el hex code abreviado para el color cian en lugar del código hexadecimal #00FFFF '. + - text: 'Use el hex code abreviado para el color cian en lugar del código hexadecimal #00FFFF ' testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.");' - text: ¡Da tu elemento h1 con el texto I am fuchsia! El color fucsia. testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your h1 element with the text I am fuchsia! the color fuchsia.");' - - text: 'Use el hex code abreviado para el color fucsia en lugar del código hexadecimal #FF00FF '. + - text: 'Use el hex code abreviado para el color fucsia en lugar del código hexadecimal #FF00FF ' testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.");' ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md index dd8585837e..6a69451230 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md @@ -8,15 +8,15 @@ videoUrl: '' --- ## Description -
-Agreguemos un botón de submit a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de action su formulario. -Aquí hay un ejemplo de botón de envío: -<button type="submit">this button submits the form</button> +
+Agreguemos un botón de submit a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de action su formulario. +Aquí hay un ejemplo de botón de envío: +<button type="submit">this button submits the form</button>
## Instructions -
-Agregue un botón como el último elemento de su elemento de form con un tipo de submit y "Enviar" como texto. +
+Agregue un botón como el último elemento de su elemento de form con un tipo de submit y "Enviar" como texto.
## Tests @@ -28,7 +28,7 @@ tests: testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");' - text: El botón de envío debe tener el atributo type establecido en submit . testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute type set to submit.");' - - text: Su botón de enviar solo debe tener el texto "Enviar". + - text: Su botón de enviar solo debe tener el texto "Enviar." testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");' - text: Asegúrese de que su elemento button tenga una etiqueta de cierre. testString: 'assert(code.match(/<\/button>/g) && code.match(/