diff --git a/.autocorrectignore b/.autocorrectignore new file mode 100644 index 00000000000000..cabe9364ee1033 --- /dev/null +++ b/.autocorrectignore @@ -0,0 +1,7 @@ +# AutoCorrect Link ignore rules. +# https://github.com/huacnlee/autocorrect +# +# Like `.gitignore`, this file to tell AutoCorrect which files need to check, some need to ignore. +files/ +docs/ +!files/zh-cn/ diff --git a/.autocorrectrc b/.autocorrectrc new file mode 100644 index 00000000000000..8b8f715da76117 --- /dev/null +++ b/.autocorrectrc @@ -0,0 +1,4 @@ +textRules: + 一二三,四五六.七八九: 0 + 一二三,四五六,七八九,一二三,四五六,七八九: 0 + 9.9亿: 0 diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 8783ddf25e7989..c024915e998242 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -87,3 +87,4 @@ /.github/ @mdn/core-dev /* @mdn/core-dev /*.md @mdn/core-dev @mdn/core-yari-content +/.prettierignore diff --git a/.github/ISSUE_TEMPLATE/new-content-suggestion.md b/.github/ISSUE_TEMPLATE/new-content-suggestion.md index dac6d27eeca5e9..81719d4c6e0499 100644 --- a/.github/ISSUE_TEMPLATE/new-content-suggestion.md +++ b/.github/ISSUE_TEMPLATE/new-content-suggestion.md @@ -7,9 +7,11 @@ title: "Content suggestion: " --- ## What is the new suggestion? + <!-- include a short description of the content work suggestion --> ## Why is it important or useful? + <!-- Tell us why the idea is important or useful. Include any information you can think of that would be useful, for example: diff --git a/.github/labeler.yml b/.github/labeler.yml index b689011da7f9ec..ff5629625c41ad 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,7 +1,11 @@ -# For more ideas, see https://github.com/actions/labeler#common-examples - system: + - package.json + - yarn.lock - .github/**/* + - .husky/**/* + - .vscode/**/* + - .* + - front-matter-config.json l10n-de: - files/de/**/* diff --git a/.github/workflows/autocorrect-lint.yml b/.github/workflows/autocorrect-lint.yml new file mode 100644 index 00000000000000..5c28e32aaf0d37 --- /dev/null +++ b/.github/workflows/autocorrect-lint.yml @@ -0,0 +1,44 @@ +# This workflow to use AutoCorrect tool for checking the copywriting, correct spaces and punctuations for CJK contents. +# +# For example: +# +# - incorrect: "欢迎阅读MDN文档." +# - correct: "欢迎阅读 MDN 文档。" +# +# - incorrect: "Welcome,this is MDN Web Docs。" +# - correct: "Welcome, to read MDN Web Docs." +# +# More details: +# https://github.com/huacnlee/autocorrect +name: AutoCorrect Lint +on: + pull_request: + branches: + - main + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + + - name: Get changed files + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BASE_SHA: ${{ github.event.pull_request.base.sha }} + HEAD_SHA: ${{ github.event.pull_request.head.sha }} + run: | + # Use the GitHub API to get the list of changed files + # documenation: https://docs.github.com/rest/commits/commits#compare-two-commits + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') + # filter out files that are not markdown + DIFF_DOCUMENTS=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/zh-cn/" | xargs) + echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV + + - name: AutoCorrect changed content + if: ${{ env.DIFF_DOCUMENTS }} + uses: huacnlee/autocorrect-action@v2.6.2 + with: + args: ${{ env.DIFF_DOCUMENTS }} --lint --no-diff-bg-color diff --git a/.github/workflows/markdown-lint-fix.yml b/.github/workflows/markdown-lint-fix.yml index 43189db8695ee1..e58d760b4dd25f 100644 --- a/.github/workflows/markdown-lint-fix.yml +++ b/.github/workflows/markdown-lint-fix.yml @@ -41,6 +41,7 @@ jobs: - name: Lint markdown files run: | yarn markdownlint-cli2-fix "**/${{ matrix.lang }}/**/*.md" + yarn prettier -w "**/${{ matrix.lang }}/**/*.md" - name: Create PR with only fixable issues if: success() diff --git a/.github/workflows/pr-check_markdownlint.yml b/.github/workflows/pr-check_markdownlint.yml index cd292eb4bfde1c..dae6a3fd05506a 100644 --- a/.github/workflows/pr-check_markdownlint.yml +++ b/.github/workflows/pr-check_markdownlint.yml @@ -47,3 +47,8 @@ jobs: echo "::add-matcher::.github/workflows/markdownlint-problem-matcher.json" files_to_lint="${{ env.DIFF_DOCUMENTS }}" yarn markdownlint-cli2 ${files_to_lint} + + - name: Prettier markdown files + run: | + files_to_lint="${{ env.DIFF_DOCUMENTS }}" + yarn prettier -c ${files_to_lint} diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index a4a77312646192..e8f70af21bf804 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -85,17 +85,8 @@ jobs: # we set this to disable that stuff. REACT_APP_CRUD_MODE_READONLY: true - # Setting this to an empty string effectively means that the - # <iframe> src will end up being the relative URL of the current - # document as a base. - # I.e. like this, if the current document is '/en-US/docs/Foo': - # <iframe src="/en-US/docs/Foo/_samples_/index.html"> - # ...for example. - # Yes, it's potentially "insecure" because the iframe will execute - # whatever code is inserted into the code example. But since the - # whole (possible) domain for PR builds will never be somewhere - # where there are interesting cookies, it's a safe choice. - BUILD_LIVE_SAMPLES_BASE_URL: "" + BUILD_LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev + BUILD_LEGACY_LIVE_SAMPLES_BASE_URL: https://live-samples.mdn.allizom.net # In these builds we never care for or need the ability to sign in. # This environment variable will disable that functionality entirely. @@ -104,6 +95,9 @@ jobs: # TODO: This should be implicit when `CI=true` BUILD_NO_PROGRESSBAR: true + # Playground + REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev + # If we don't do this the built files will end up in # `node_modules/@mdn/yari/client/build/` and we don't want that # to get pushed into the cache. diff --git a/.github/workflows/reviewdog.yml b/.github/workflows/reviewdog.yml new file mode 100644 index 00000000000000..3b5094e9fecf63 --- /dev/null +++ b/.github/workflows/reviewdog.yml @@ -0,0 +1,45 @@ +name: reviewdog + +on: + - pull_request + +jobs: + prettier: + # do not run on forks + if: github.repository == 'mdn/translated-content' + name: prettier + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Get changed files + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BASE_SHA: ${{ github.event.pull_request.base.sha }} + HEAD_SHA: ${{ github.event.pull_request.head.sha }} + run: | + # Use the GitHub API to get the list of changed files + # documenation: https://docs.github.com/rest/commits/commits#compare-two-commits + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename' | xargs) + echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV + + - name: Setup Node.js environment + uses: actions/setup-node@v3 + with: + node-version-file: ".nvmrc" + cache: yarn + + - name: Install all yarn packages + run: yarn --frozen-lockfile + env: + # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Perform linting + run: yarn prettier --ignore-unknown --write ${{ env.DIFF_DOCUMENTS }} + + - name: Submit suggestion + uses: reviewdog/action-suggester@v1 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + tool_name: prettier diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 1cc8e9cd49c3e8..fc5bcf3c97909a 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,3 +1,4 @@ { + "*": "prettier --ignore-unknown --write", "*.md": "markdownlint-cli2-fix" } diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc index 98959a5112de3b..82fefeca20a770 100644 --- a/.markdownlint-cli2.jsonc +++ b/.markdownlint-cli2.jsonc @@ -1,37 +1,46 @@ +// This file defines our configuration for Markdownlint. See +// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md +// for more details on each rule. + { "config": { "default": true, - // MD001 - Heading levels should only increment by one level at a time. - // -> Disabled, as some callouts include headings. - "MD001": false, - "MD004": { + // Disabled, as some callouts include headings. + "header-increment": false, + "ul-style": { "style": "dash" }, - "MD007": { + "ul-indent": { "indent": 2 }, - "MD010": { + "no-hard-tabs": { "spaces_per_tab": 2 }, - "MD013": false, - // Fixed upstream with "allow_different_nesting": true - "MD024": false, - "MD025": { + "line-length": false, + "no-duplicate-header": false, + // XXX Replace with the following when ready: + // "no-duplicate-header": { + // "allow_different_nesting": true + // }, + "single-title": { "front_matter_title": "^\\s*title\\s*[:=]" }, - "MD026": false, + "no-trailing-punctuation": false, + // XXX Replace with the following when ready: + // "no-trailing-punctuation": { + // "punctuation": ".,;:" + // }, // Consecutive Notes/Callouts currently don't conform with this rule - "MD028": false, + "no-blanks-blockquote": false, // Force ordered numbering to catch accidental list ending from indenting - "MD029": { + "ol-prefix": { "style": "ordered" }, - "MD033": { + "no-inline-html": { "allowed_elements": [ "a", "abbr", "annotation", - "base", "br", "caption", "code", @@ -39,7 +48,6 @@ "colgroup", "dd", "details", - "dfn", "div", "dl", "dt", @@ -81,6 +89,7 @@ "ol", "p", "pre", + "q", "section", "semantics", "strong", @@ -96,86 +105,134 @@ "tr", "ul", "var", - "ruby", //Used in some Korean documents - "rp", //Used in some Korean documents - "rt", //Used in some Korean documents + "dfn", // XXX Still used in some translated content + "ruby", // Used in some Korean documents + "rp", // Used in some Korean documents + "rt", // Used in some Korean documents "i", // French translations use this for English literal text - "q", // French translations use this for English literal text - "h2", // Not always converted currently because of live samples using English IDs - "h3", // Not always converted currently because of live samples using English IDs - "h6" // Not always converted currently because of live samples using English IDs + "h2", // XXX Not always converted currently because of live samples using English IDs + "h3", // XXX Not always converted currently because of live samples using English IDs + "h6" // XXX Not always converted currently because of live samples using English IDs ] }, - "MD034": false, - // Fixed upstream, needs PRs in this repo - "MD036": false, - // Upstream fixing in https://github.com/mdn/content/pull/20115 - "MD037": false, - "MD040": false, + "no-bare-urls": false, + // XXX Fixed upstream, remove next line when fixed here + "no-emphasis-as-header": false, + // Produces too many false positives + "no-space-in-emphasis": false, + "fenced-code-language": false, // See https://github.com/mdn/content/pull/20026, as macros currently break this - "MD042": false, - // Tracked upstream as part of https://github.com/mdn/content/pull/19334 - "MD045": false, - "MD046": { + "no-empty-links": false, + // XXX Fixed upstream, remove next line when fixed here + "no-alt-text": false, + "code-block-style": { "style": "fenced" }, - // MD049 is set to underscore upstream, not yet fixed here - "MD049": false, - "MD050": { + "emphasis-style": false, + // XXX Replace with the following when ready: + // "emphasis-style": { + // "style": "underscore" + // }, + "strong-style": { "style": "asterisk" }, - // MD051 - Link fragments should be valid. - // -> Disabled, as yari generates link fragments by replacing spaces with underscores, not dashes. - "MD051": false, - // Incompatible with brackets in macros like MD042 - "MD052": false, + // Disabled, as yari generates link fragments by replacing spaces with underscores, not dashes. + "link-fragments": false, + // XXX Fixed upstream, remove next line when fixed here + "reference-links-images": false, + + // https://github.com/OnkarRuikar/markdownlint-rule-search-replace "search-replace": { "rules": [ + // XXX Many instances still found in translated content + // XXX Need to disable this for zh-cn due to grammatical accuracy + // { + // "name": "curly-double-quotes", + // "message": "Don't use curly double quotes", + // "searchPattern": "/“|”/g", + // "replace": "\"", + // "searchScope": "text" + // }, + // { + // "name": "curly-single-quotes", + // "message": "Don't use curly single quotes", + // "searchPattern": "/‘|’/g", + // "replace": "'", + // "searchScope": "text" + // }, { "name": "nbsp", "message": "Don't use no-break spaces", "searchPattern": "/ /g", "replace": " ", - "skipCode": false + "searchScope": "all" + }, + // XXX zh-cn/zh-tw prefers em-dash instead + { + "name": "m-dash", + "message": "Don't use '--'. Use m-dash — instead", + "search": " -- ", + "replace": " — ", + "searchScope": "text" + }, + { + "name": "relative-link", + "message": "Internal links should start with '/'", + "searchPattern": "/([\\(\"])([\\w\\-]+)\\/docs/g", + "replace": "$1/$2/docs", + "searchScope": "text" }, { "name": "relative-link-path", "message": "Don't use relative paths", "search": "](..", - "skipCode": true + "searchScope": "text" }, { "name": "trailing-spaces", "message": "Avoid trailing spaces", "searchPattern": "/ +$/gm", "replace": "", - "skipCode": false + "searchScope": "all" }, - // This will be replaced with Prettier in the long run { "name": "double-spaces", "message": "Avoid double spaces", "searchPattern": "/([^\\s>]) ([^\\s|])/g", "replace": "$1 $2", - "skipCode": true + "searchScope": "text" }, { "name": "stuck-definition", "message": "Character is stuck to definition description marker", "searchPattern": "/- :(\\w)/g", "replace": "- : $1", - "skipCode": true + "searchScope": "text" }, { "name": "fqdn-moz-links", - "message": "Don't use developer.mozilla.org for links", - "search": "](https://developer.mozilla.org/", + "message": "Don't use developer.mozilla.org for links, except for blog posts", + "searchPattern": "/\\]\\(https:\\/\\/developer.mozilla.org\\/(?!en-US\\/blog\\/)/g", "replace": "](/", - "skipCode": true + "searchScope": "text" } + // XXX Many instances still found in translated content + // { + // "name": "localhost-links", + // "message": "Don't use localhost for links", + // "searchPattern": "/\\]\\(https?:\\/\\/localhost:\\d+\\//g", + // "replace": "](/", + // "searchScope": "text" + // } ] } }, "customRules": ["markdownlint-rule-search-replace"], - "ignores": ["node_modules", "**/conflicting/**", "**/orphaned/**", ".github/"] + "ignores": [ + "node_modules", + ".git", + ".github", + "**/conflicting/**", + "**/orphaned/**" + ] } diff --git a/.prettierignore b/.prettierignore index a4e7a19eb91e30..5f0d0ac23fce44 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,38 +1,94 @@ +# This .prettierignore file uses .gitignore syntax +# see https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore + +# Generated content build/ +/files/**/_wikihistory.json +/files/**/_githistory.json + +# Conflicting/orphaned files +/files/**/conflicting/**/*.md +/files/**/orphaned/**/*.md + +# XXX Ignored until https://github.com/prettier/prettier/issues/11828 is fixed +/files/es/learn/css/howto/css_faq/index.md +/files/fr/glossary/cross_axis/index.md +/files/fr/glossary/flex/index.md +/files/fr/glossary/flex_container/index.md +/files/fr/glossary/flexbox/index.md +/files/fr/glossary/grid_axis/index.md +/files/fr/glossary/grid_lines/index.md +/files/fr/glossary/main_axis/index.md +/files/fr/learn/server-side/django/forms/index.md +/files/fr/web/css/align-self/index.md +/files/fr/web/css/justify-content/index.md +/files/fr/web/css/place-items/index.md +/files/fr/web/css/place-self/index.md +/files/fr/web/javascript/reference/global_objects/array/includes/index.md +/files/fr/web/javascript/reference/global_objects/intl/displaynames/of/index.md +/files/pt-br/learn/server-side/django/forms/index.md +/files/ru/learn/server-side/django/forms/index.md +/files/ru/learn/server-side/django/introduction/index.md +/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +/files/zh-cn/learn/server-side/django/forms/index.md +/files/zh-cn/web/javascript/reference/operators/exponentiation/index.md +/files/zh-cn/web/javascript/reference/operators/exponentiation_assignment/index.md # A full pass on all Markdown files is being performed. -# When starting a new folder, please expand the glob pattern -# and remove the corresponding line from this file. # The following folders still need a full pass: -# system files -/.github/**/*.md -/docs/README.md -/README.md - # es -/docs/es/**/*.md -/files/es/**/*.md - -# fr -/files/fr/**/*.md +/files/es/web/css/**/*.md +/files/es/web/javascript/reference/**/*.md # ja -/files/ja/**/*.md +/files/ja/mozilla/**/*.md +/files/ja/mdn/**/*.md +/files/ja/mozilla/add-ons/**/*.md +/files/ja/mozilla/add-ons/webextensions/api/**/*.md +/files/ja/web/api/**/*.md +/files/ja/web/css/**/*.md +/files/ja/web/html/**/*.md +/files/ja/web/http/**/*.md +/files/ja/web/javascript/**/*.md +/files/ja/web/svg/**/*.md # ko -/docs/ko/**/*.md -/files/ko/**/*.md +/files/ko/glossary/**/*.md +/files/ko/learn/**/*.md +/files/ko/learn/css/**/*.md +/files/ko/learn/html/**/*.md +/files/ko/learn/javascript/**/*.md +/files/ko/learn/server-side/**/*.md +/files/ko/mdn/**/*.md +/files/ko/mozilla/**/*.md +/files/ko/mozilla/add-ons/**/*.md +/files/ko/mozilla/add-ons/webextensions/api/**/*.md +/files/ko/mozilla/firefox**/*.md +/files/ko/web/**/*.md +/files/ko/web/api/**/*.md +/files/ko/web/css/**/*.md +/files/ko/web/html/**/*.md +/files/ko/web/http/**/*.md +/files/ko/web/javascript/**/*.md +/files/ko/web/svg/**/*.md # pt-br -/files/pt-br/**/*.md +/files/pt-br/web/api/**/*.md +/files/pt-br/web/css/**/*.md +/files/pt-br/web/html/**/*.md +/files/pt-br/web/http/**/*.md +/files/pt-br/web/javascript/**/*.md +/files/pt-br/web/svg/**/*.md # ru -/docs/ru/**/*.md -/files/ru/**/*.md +/files/ru/web/api/**/*.md +/files/ru/web/css/**/*.md +/files/ru/web/html/**/*.md +/files/ru/web/http/**/*.md +/files/ru/web/javascript/**/*.md +/files/ru/web/svg/**/*.md # zh-cn -/files/zh-cn/**/*.md - -# zh-tw -/files/zh-tw/web/javascript/reference/global_objects/[p-t]*/**/*.md +/files/zh-cn/web/api/**/*.md +/files/zh-cn/web/css/**/*.md diff --git a/PEERS_GUIDELINES.md b/PEERS_GUIDELINES.md index a55c6d3ac2636e..d09d0311ffc9aa 100644 --- a/PEERS_GUIDELINES.md +++ b/PEERS_GUIDELINES.md @@ -46,7 +46,6 @@ The review teams for each locale are: - [yujo11](https://github.com/yujo11) - [hochan222](https://github.com/hochan222) - Russian (`ru`) content — the [yari-content-ru](https://github.com/orgs/mdn/teams/yari-content-ru) team, which consists of: - - [armanpwnz](https://github.com/armanpwnz) - [yanaklose](https://github.com/yanaklose) - [myshov](https://github.com/myshov) - [Saionaro](https://github.com/Saionaro) diff --git a/README.md b/README.md index d0d877e8418721..087f887fde0732 100644 --- a/README.md +++ b/README.md @@ -44,13 +44,13 @@ Now you need to fork and clone both the [content repo](https://github.com/mdn/co 1. Navigate to your local clone of the content repository fork: - ```bash - cd ~/path/to/content - ``` + ```bash + cd ~/path/to/content + ``` 2. Run the command `yarn install` to fetch the latest packages and get the local MDN testing environment set up. It is also recommended that you run `yarn install` before every update you do to the source, to make sure you have the latest packages. -3. Next, create an environment variable called `CONTENT_TRANSLATED_ROOT` containing the path to the *translated-content* repo’s `files` directory. You could do this for a single session like so: +3. Next, create an environment variable called `CONTENT_TRANSLATED_ROOT` containing the path to the _translated-content_ repo’s `files` directory. You could do this for a single session like so: ```bash export CONTENT_TRANSLATED_ROOT=/path/to/translated-content/files diff --git a/docs/README.md b/docs/README.md index 2e5e5f5cbe8820..ec8186a21743aa 100644 --- a/docs/README.md +++ b/docs/README.md @@ -62,7 +62,7 @@ to link to from your translated page. In some of the article source code, you may find line breaks in the block-level elements that aren't strictly necessary, for example: -```html +```html-nolint <p>The <strong><code>HTMLCanvasElement.transferControlToOffscreen()</code></strong> method transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main diff --git a/docs/es/README.md b/docs/es/README.md index 2b929a0cd8e9d0..5d386ad6952bc7 100644 --- a/docs/es/README.md +++ b/docs/es/README.md @@ -33,18 +33,17 @@ Ejemplificaremos el proceso a realizar cuando se desea traducir el contenido de Ejemplo: Digamos que desea traducir el contenido de la página que se observa en esta dirección. - ![image](https://user-images.githubusercontent.com/7331511/152851642-5dea4df9-f771-4323-bc13-b238dec511ef.png) +![image](https://user-images.githubusercontent.com/7331511/152851642-5dea4df9-f771-4323-bc13-b238dec511ef.png) 1. Buscar la [versión original (en inglés)](https://github.com/mdn/content/tree/main/files/en-us) del documento que desea traducir. - Debería buscar en el repositorio [en inglés (mdn/content)](https://github.com/mdn/content) el archivo correspondiente al documento, en este caso la dirección sería [`files/en-us/web/javascript/reference/global_objects/array/index.md`](https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/array/index.md) + Debería buscar en el repositorio [en inglés (mdn/content)](https://github.com/mdn/content) el archivo correspondiente al documento, en este caso la dirección sería [`files/en-us/web/javascript/reference/global_objects/array/index.md`](https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/array/index.md) 2. Buscar la [versión en español](https://github.com/mdn/translated-content/blob/main/files/es/) del [documento](https://github.com/mdn/translated-content/blob/main/files/es/web/javascript/reference/global_objects/array/index.html) que desea traducir. En este caso la dirección seria [`files/es/web/javascript/reference/global_objects/array/index.{html|md}`](https://github.com/mdn/translated-content/blob/main/files/es/web/javascript/reference/global_objects/array/index.html) - > NOTA: - > - > - Si el archivo no existe, deberá crearlo en formato `Markdown` imitando la ruta que tiene la versión en inglés. - > - > - Es posible que el archivo en la versión en español se encuentre en formato `HTML`, en cuyo caso tendrá que reemplazarlo por el formato `Markdown`. + > NOTA: + > + > - Si el archivo no existe, deberá crearlo en formato `Markdown` imitando la ruta que tiene la versión en inglés. + > - Es posible que el archivo en la versión en español se encuentre en formato `HTML`, en cuyo caso tendrá que reemplazarlo por el formato `Markdown`. 3. Utilizar el texto y formato en inglés como guía para traducir al español. @@ -71,16 +70,16 @@ La comunidad de español sugiere utilizar las siguientes convenciones al traduci ### Formatos especiales | Inglés | Español | -|----------------|--------------------| +| -------------- | ------------------ | | `**Note:**` | `**Nota:**` | -| `**Warning:**` | `**Advertencia:**` | +| `**Warning:**` | `**Advertencia:**` | | `**Callout:**` | `**Observación:**` | ## Formateo -| Expresión | Como escribirlo | -| --------- | --------------- | -| 2<sup>5</sup> | 2^5 | +| Expresión | Como escribirlo | +| ------------- | --------------- | +| 2<sup>5</sup> | 2^5 | Actualmente trabajando en: <https://github.com/mdn/translated-content/issues/8635> @@ -118,6 +117,7 @@ Tutorial para crear el ambiente de desarrollo para MDN Guía de markdown <https://developer.mozilla.org/en-US/docs/MDN/Contribute/Markdown_in_MDN> + </details> Más información [aqui](https://github.com/mdn/translated-content/discussions/4029) diff --git a/docs/ja/README.md b/docs/ja/README.md index d9c7e9c138d7dc..c863f13feb7c6a 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -69,9 +69,9 @@ MDN のページプレビューを伴ったドキュメントの編集方法は ## 日本語翻訳作業の定例会に参加する -日本語コミュニティでは、「みんなで MDN を翻訳しよう!翻訳コミュニティ定例ミートアップ!」と題して、月1回、定例ミートアップを開催しています。 +日本語コミュニティでは、「みんなで MDN を翻訳しよう!翻訳コミュニティ定例ミートアップ!」と題して、月 1 回、定例ミートアップを開催しています。 -定例ミートアップでは、5時間ほどの時間の中で、集まった人達で翻訳作業を行っています。 +定例ミートアップでは、5 時間ほどの時間の中で、集まった人達で翻訳作業を行っています。 - [定例ミートアップ:イベント開催予定](https://mozilla.doorkeeper.jp/) - [月例ミートアップについて](https://mozilla-japan.github.io/mdn-translation-guide/meetup/) diff --git a/docs/ko/README.md b/docs/ko/README.md index 57e655111265ba..5baf4c386f4318 100644 --- a/docs/ko/README.md +++ b/docs/ko/README.md @@ -55,10 +55,10 @@ yari 가 content repo에 내장돼있습니다. 세부 절차는 [다음 링크] 2. content 폴더에 들어가서 `yarn install`을 통해 yari 등 필요한 패키지를 다운받습니다. 3. content 폴더 root에 .env 파일을 추가합니다. (translated-content/files 경로 추가, vscode editor의 경우 `EDITOR=code` 추가) - ``` - CONTENT_TRANSLATED_ROOT=/path/to/translated-content/files - EDITOR=code - ``` + ``` + CONTENT_TRANSLATED_ROOT=/path/to/translated-content/files + EDITOR=code + ``` 4. `yarn start` diff --git a/docs/ko/guides/archieved/html-guide.md b/docs/ko/guides/archieved/html-guide.md index 3e2789c0824ffa..564ce04c7fe38b 100644 --- a/docs/ko/guides/archieved/html-guide.md +++ b/docs/ko/guides/archieved/html-guide.md @@ -7,13 +7,13 @@ 예를 들면: ```html -<h2 id="tutorials"> Tutorials </h2> +<h2 id="tutorials">Tutorials</h2> ``` `ko` 지역 에서 ```html -<h2 id="tutorials"> 튜토리얼 </h2> +<h2 id="tutorials">튜토리얼</h2> ``` 일반적으로 모든 ID를 소문자로 작성하는 것이 좋습니다. 플랫폼은 어쨌든 렌더링시 자동으로 변환하지만 소문자로 유지하면 변환으로 인해 수동으로 만든 앵커 링크가 작동하지 않을 가능성이 적습니다. @@ -23,13 +23,16 @@ 일부 기사 소스 코드에서, 반드시 필요하지 않은 블록 수준 요소에서 줄 바꿈을 찾을 수 있습니다. 예를 들면 다음과 같습니다. ```html -<p>The - <code><strong>HTMLCanvasElement</strong></code><strong><code>.transferControlToOffscreen()</code></strong> - method transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main - thread or on a worker.</p> - -<pre - class="brush: js">OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()</pre> +<p> + The <code><strong>HTMLCanvasElement</strong></code + ><strong><code>.transferControlToOffscreen()</code></strong> method transfers + control to an {{domxref("OffscreenCanvas")}} object, either on the main thread + or on a worker. +</p> + +<pre class="brush: js"> +OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()</pre +> ``` 일반적으로 소스 코드에서 이와 같은 줄 바꿈을 사용하지 않으므로 원하는 경우 자유롭게 제거 할 수 있으며 새 번역을 만들 때 추가하지 마십시오. 그러나 최종 렌더링 결과에 영향을 미치지 않으므로 이를 제거하는 데 너무 많은 시간을 소비하지 마십시오. diff --git a/docs/ko/guides/github-actions-guide.md b/docs/ko/guides/github-actions-guide.md index a446d39ad32395..7633c45e9251b6 100644 --- a/docs/ko/guides/github-actions-guide.md +++ b/docs/ko/guides/github-actions-guide.md @@ -6,9 +6,9 @@ ## Redirects Files -보통의 경우 파일 삭제시 [_redirects.txt](https://github.com/mdn/translated-content/blob/main/files/ko/_redirects.txt)를 갱신해주어야 합니다. +보통의 경우 파일 삭제시 [\_redirects.txt](https://github.com/mdn/translated-content/blob/main/files/ko/_redirects.txt)를 갱신해주어야 합니다. -[yari](https://github.com/mdn/yari)에서 아래 명령어를 통해 [translated-content](https://github.com/mdn/translated-content)의 [_redirects.txt](https://github.com/mdn/translated-content/blob/main/files/ko/_redirects.txt) 파일을 검증 및 갱신할 수 있습니다. +[yari](https://github.com/mdn/yari)에서 아래 명령어를 통해 [translated-content](https://github.com/mdn/translated-content)의 [\_redirects.txt](https://github.com/mdn/translated-content/blob/main/files/ko/_redirects.txt) 파일을 검증 및 갱신할 수 있습니다. ```bash yarn tool validate-redirects ko --strict diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index ac419747f41829..4c50dffca0bc49 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -33,42 +33,42 @@ **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 참고 링크 | -| --- | --- | --- | -| Access | 접근 | | -| Accessibility concerns | 접근성 고려사항 | | -| Advantages | 장점 | [링크][Introduction_to_HTML5_Game_Development] | -| Aliasing | 별칭 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | -| Brief history | 간략한 역사 | [링크][HTML#%EA%B0%84%EB%9E%B5%ED%95%9C_%EC%97%AD%EC%82%AC] | -| Browser compatibility | 브라우저 호환성 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | -| Browser support | 브라우저 지원 | [링크][Using_IIR_filters] | -| Concept | 개념 | | -| Conclusion | 결론 | | -| Contact us | 문의하기 | | -| Demo | 데모 | [링크][GLSL_Shaders] -| Description | 설명 | [링크][Array] -| Example | 예제 | [링크][target] | -| Examples | 예제 | [링크](https://github.com/mdn/translated-content/blob/main/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.md) | -| Guides | 안내서 | | -| In this module | 이번 과정에서는 | [링크][React_getting_started] | -| Instance properties | 인스턴스 속성 | | -| Instance methods | 인스턴스 메서드 | | -| Learn More | 더 알아보기 | [링크][Mutable] | -| Next steps | 다음 단계 | [링크][2D_breakout_game_Phaser] | -| Polyfill | 폴리필 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | -| Reference | 참고서 | | -| See also | 같이 보기 | [링크][target] | -| Specifications | 명세서 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | -| Static properties | 정적 속성 | | -| Static methods | 정적 메서드 | | -| Sticky activation | 고정 활성화 | | -| Summary | 요약 | | -| Syntax | 구문 | [링크][target] | -| Tools & resources | 도구 & 리소스 | [링크][JavaScript] | -| Transient activation | 임시 활성화 | | -| Tutorial | 자습서 | | -| Usage notes | 사용 일람 | | -| Web Technologies | 웹 기술들 | [링크][Introduction_to_HTML5_Game_Development] | +| 용어 | 번역 | 참고 링크 | +| ---------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| Access | 접근 | | +| Accessibility concerns | 접근성 고려사항 | | +| Advantages | 장점 | [링크][Introduction_to_HTML5_Game_Development] | +| Aliasing | 별칭 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | +| Brief history | 간략한 역사 | [링크][HTML#%EA%B0%84%EB%9E%B5%ED%95%9C_%EC%97%AD%EC%82%AC] | +| Browser compatibility | 브라우저 호환성 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | +| Browser support | 브라우저 지원 | [링크][Using_IIR_filters] | +| Concept | 개념 | | +| Conclusion | 결론 | | +| Contact us | 문의하기 | | +| Demo | 데모 | [링크][GLSL_Shaders] | +| Description | 설명 | [링크][Array] | +| Example | 예제 | [링크][target] | +| Examples | 예제 | [링크](https://github.com/mdn/translated-content/blob/main/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.md) | +| Guides | 안내서 | | +| In this module | 이번 과정에서는 | [링크][React_getting_started] | +| Instance properties | 인스턴스 속성 | | +| Instance methods | 인스턴스 메서드 | | +| Learn More | 더 알아보기 | [링크][Mutable] | +| Next steps | 다음 단계 | [링크][2D_breakout_game_Phaser] | +| Polyfill | 폴리필 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | +| Reference | 참고서 | | +| See also | 같이 보기 | [링크][target] | +| Specifications | 명세서 | [링크](https://github.com/mdn/translated-content/pull/1779/files) | +| Static properties | 정적 속성 | | +| Static methods | 정적 메서드 | | +| Sticky activation | 고정 활성화 | | +| Summary | 요약 | | +| Syntax | 구문 | [링크][target] | +| Tools & resources | 도구 & 리소스 | [링크][JavaScript] | +| Transient activation | 임시 활성화 | | +| Tutorial | 자습서 | | +| Usage notes | 사용 일람 | | +| Web Technologies | 웹 기술들 | [링크][Introduction_to_HTML5_Game_Development] | ## Section Subtitle @@ -76,60 +76,60 @@ **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 참고 링크 | -| --- | --- | --- | -| Compatibility notes | 호환성 참고 사항 | [링크][target] | -| Directives | 지시어 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | -| Guide | 안내서 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | -| Instruction | 지침 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | -| Naming | 이름 지정 | | -| Parameters | 매개변수 | [링크][AudioWorkletNode] | -| Requirements | 요구 사항 | | -| Value | 값 | [링크][target] | +| 용어 | 번역 | 참고 링크 | +| ------------------- | ---------------- | -------------------------------------------------------------------------------------- | +| Compatibility notes | 호환성 참고 사항 | [링크][target] | +| Directives | 지시어 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | +| Guide | 안내서 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | +| Instruction | 지침 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | +| Naming | 이름 지정 | | +| Parameters | 매개변수 | [링크][AudioWorkletNode] | +| Requirements | 요구 사항 | | +| Value | 값 | [링크][target] | ## 공통 용어 **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 기타 | -| --- | --- | --- | -| Application | 애플리케이션 | | -| Assertion | 어설션 | | -| Attribute | 특성 | | -| Boolean | 불리언 | | -| Class | 클래스 | | -| Content(s) | 콘텐츠 | | -| Context | 맥락 | | -| Decoding | 디코딩 | [링크](https://github.com/mdn/translated-content/issues/12452) | -| Document | 문서 | | -| Element | 요소 | | -| Encoding | 인코딩 | [링크](https://github.com/mdn/translated-content/issues/12452) | -| Entity | 개체 | | -| Enumerated | 열거형 | | -| Expression | 표현식 또는 식 | | -| Framework | 프레임워크 | | -| Global | 전역 | | -| Glossary | 용어 사전 | | -| Grammar | 문법 | | -| In modern browsers | 최신 브라우저 | | -| Literal | 리터럴 | | -| Mantissa | 가수부 | | -| Method | 메서드 | [국립국어원 Method](https://www.korean.go.kr/front/onlineQna/onlineQnaView.do?mn_id=216&qna_seq=11976) | -| Module | 모듈 | ESM에서 명시하는 모듈의 경우 '모듈'로 변역한다. | | -| Module | 과정 | 어떠한 교육 과정, 단위에 의한 표현은 '과정'으로 번역한다. (예: In this module) | | -| Object | 객체 | | -| Origin | 출처 | | -| Override | 재정의 | | -| Primitive | 원시 (값) | | -| Property | 속성 | | -| Psuedo- | 의사- | | -| Reference | 참고서 | | -| Regular expression | 정규 표현식 | | -| Rendering | 렌더링 | | -| Section | 구획 | | -| Statement | 명령문 또는 문 | | -| short-circuit | -| User agent | 사용자 에이전트 | | +| 용어 | 번역 | 기타 | +| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------ | --- | +| Application | 애플리케이션 | | +| Assertion | 어설션 | | +| Attribute | 특성 | | +| Boolean | 불리언 | | +| Class | 클래스 | | +| Content(s) | 콘텐츠 | | +| Context | 맥락 | | +| Decoding | 디코딩 | [링크](https://github.com/mdn/translated-content/issues/12452) | +| Document | 문서 | | +| Element | 요소 | | +| Encoding | 인코딩 | [링크](https://github.com/mdn/translated-content/issues/12452) | +| Entity | 개체 | | +| Enumerated | 열거형 | | +| Expression | 표현식 또는 식 | | +| Framework | 프레임워크 | | +| Global | 전역 | | +| Glossary | 용어 사전 | | +| Grammar | 문법 | | +| In modern browsers | 최신 브라우저 | | +| Literal | 리터럴 | | +| Mantissa | 가수부 | | +| Method | 메서드 | [국립국어원 Method](https://www.korean.go.kr/front/onlineQna/onlineQnaView.do?mn_id=216&qna_seq=11976) | +| Module | 모듈 | ESM에서 명시하는 모듈의 경우 '모듈'로 변역한다. | | +| Module | 과정 | 어떠한 교육 과정, 단위에 의한 표현은 '과정'으로 번역한다. (예: In this module) | | +| Object | 객체 | | +| Origin | 출처 | | +| Override | 재정의 | | +| Primitive | 원시 (값) | | +| Property | 속성 | | +| Psuedo- | 의사- | | +| Reference | 참고서 | | +| Regular expression | 정규 표현식 | | +| Rendering | 렌더링 | | +| Section | 구획 | | +| Statement | 명령문 또는 문 | | +| short-circuit | +| User agent | 사용자 에이전트 | | ## CSS @@ -144,62 +144,62 @@ **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 기타 | 참고 링크 | -| --- | --- | --- | ------ | -| At-rule | @규칙 | | | -| Block | 블록 | | | -| Border | 테두리 | | | -| Box | 박스 | | | -| Flexbox | 플렉스박스 | | | -| Flow | 플로 | 레이아웃 방식일 경우에 한정 | | -| Formal syntax | 형식 구문 | | | -| Grid | 그리드 | | | -| Inline | 인라인 | | | -| Layout | 레이아웃 | | | -| Longhand property | 본디 속성 | | | -| Margin | 바깥 여백 | | | -| Padding | 안쪽 여백(패딩) | | [CSS 기본 박스 모델 입문][] | -| Shorthand property | 단축 속성 | | | +| 용어 | 번역 | 기타 | 참고 링크 | +| ------------------ | --------------- | --------------------------- | --------------------------- | +| At-rule | @규칙 | | | +| Block | 블록 | | | +| Border | 테두리 | | | +| Box | 박스 | | | +| Flexbox | 플렉스박스 | | | +| Flow | 플로 | 레이아웃 방식일 경우에 한정 | | +| Formal syntax | 형식 구문 | | | +| Grid | 그리드 | | | +| Inline | 인라인 | | | +| Layout | 레이아웃 | | | +| Longhand property | 본디 속성 | | | +| Margin | 바깥 여백 | | | +| Padding | 안쪽 여백(패딩) | | [CSS 기본 박스 모델 입문][] | +| Shorthand property | 단축 속성 | | | ## API/JavaScript **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 기타 | 참고 링크 | -| --- | --- | --- | ------ | -| Argument | 전달인자, 인수 | | [참고 링크](https://github.com/mdn/translated-content/pull/3888) | -| Blocking operation | 블로킹 연산 | | | -| Callback | 콜백 | | | -| Dictionary | 사전 | | [참고 링크](https://github.com/mdn/translated-content/pull/10976#discussion_r1073704799) | -| Fulfilled | 이행(함) | | | -| Handler | 처리기 | 이벤트 처리기 | | -| Interface | 인터페이스 | | | -| Iterate | 순회 | | | -| Listener | 수신기 | 이벤트 수신기 | | -| Mixin | 믹스인 | | | -| Non-blocking operation | 논블로킹 연산 | | | -| Parameter | 매개변수 | | | -| Pending | 대기 | | | -| Promise | 프로미스 | | [참고 링크](https://github.com/mdn/translated-content/pull/1081#issuecomment-878333558) | -| Promise chaining | 프로미스 체이닝 | | | -| Prototype | 프로토타입 | | | -| Reject | 거부 | | | -| Resolve | 이행 | | | -| Rest parameters | 나머지 매개변수 | | [참고 링크](https://github.com/mdn/translated-content/pull/2549/files) | -| Scope | 범위 | | | -| Settled | 처리 | | | -| Sparse array | 희소 배열 | | | -| Temporal Dead Zone, TDZ | 시간상 사각지대 | | [참고 링크](https://github.com/mdn/translated-content/pull/2626/files) | -| TypedArray | 형식화 배열 | | | +| 용어 | 번역 | 기타 | 참고 링크 | +| ----------------------- | --------------- | ------------- | ---------------------------------------------------------------------------------------- | +| Argument | 전달인자, 인수 | | [참고 링크](https://github.com/mdn/translated-content/pull/3888) | +| Blocking operation | 블로킹 연산 | | | +| Callback | 콜백 | | | +| Dictionary | 사전 | | [참고 링크](https://github.com/mdn/translated-content/pull/10976#discussion_r1073704799) | +| Fulfilled | 이행(함) | | | +| Handler | 처리기 | 이벤트 처리기 | | +| Interface | 인터페이스 | | | +| Iterate | 순회 | | | +| Listener | 수신기 | 이벤트 수신기 | | +| Mixin | 믹스인 | | | +| Non-blocking operation | 논블로킹 연산 | | | +| Parameter | 매개변수 | | | +| Pending | 대기 | | | +| Promise | 프로미스 | | [참고 링크](https://github.com/mdn/translated-content/pull/1081#issuecomment-878333558) | +| Promise chaining | 프로미스 체이닝 | | | +| Prototype | 프로토타입 | | | +| Reject | 거부 | | | +| Resolve | 이행 | | | +| Rest parameters | 나머지 매개변수 | | [참고 링크](https://github.com/mdn/translated-content/pull/2549/files) | +| Scope | 범위 | | | +| Settled | 처리 | | | +| Sparse array | 희소 배열 | | | +| Temporal Dead Zone, TDZ | 시간상 사각지대 | | [참고 링크](https://github.com/mdn/translated-content/pull/2626/files) | +| TypedArray | 형식화 배열 | | | ## HTTP -| 용어 | 번역 | 기타 | 참고 링크 | -| --- | --- | --- | ------ | -| Idempotent | 멱등성 | | | -| Payload | 페이로드 | | [참고 링크](https://github.com/mdn/translated-content/pull/2737) | -| Request Body | 요청 본문 | | | -| Response Body | 응답 본문 | | | +| 용어 | 번역 | 기타 | 참고 링크 | +| ------------- | --------- | ---- | ---------------------------------------------------------------- | +| Idempotent | 멱등성 | | | +| Payload | 페이로드 | | [참고 링크](https://github.com/mdn/translated-content/pull/2737) | +| Request Body | 요청 본문 | | | +| Response Body | 응답 본문 | | | [AudioWorkletNode]: https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletNode/AudioWorkletNode#parameters [Using_IIR_filters]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_IIR_filters#browser_support diff --git a/docs/ko/guides/meta-data-guide.md b/docs/ko/guides/meta-data-guide.md index c84482e081b3e3..45370d27f226b5 100644 --- a/docs/ko/guides/meta-data-guide.md +++ b/docs/ko/guides/meta-data-guide.md @@ -21,7 +21,7 @@ tags: {{JSRef}} The `Proxy` object enables you to create a proxy for another ... - : +: ``` 번역본 @@ -37,7 +37,7 @@ l10n: {{JSRef}} **`Proxy`** 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 ... - : +: ``` <details> diff --git a/docs/ko/guides/translation-guide.md b/docs/ko/guides/translation-guide.md index dc2d3bfb8ba555..0029968cec2c40 100644 --- a/docs/ko/guides/translation-guide.md +++ b/docs/ko/guides/translation-guide.md @@ -30,12 +30,12 @@ **사전 순으로 용어집을 편집해주세요.** -| 용어 | 번역 | 참고 링크 | -| --- | --- | --- | -| Note | 참고 | | -| Warning | 경고 | | -| Callout | 알림 | | -| Objective | 목표 | [링크][What_is_accessibility] | +| 용어 | 번역 | 참고 링크 | +| ------------- | ---------------- | ----------------------------- | +| Note | 참고 | | +| Warning | 경고 | | +| Callout | 알림 | | +| Objective | 목표 | [링크][What_is_accessibility] | | Prerequisites | 필요한 사전 지식 | [링크][What_is_accessibility] | ### 교육 과정 callout @@ -56,10 +56,15 @@ ```markdown # 참고 + > **Note:** This is a note. + # 경고 + > **Warning:** This is a warning. + # 알림 + > **Callout:** This is a callout. ``` @@ -67,10 +72,15 @@ ```markdown # 참고 + > **참고:** 참고입니다. + # 경고 + > **경고:** 경고입니다. + # 알림 + > **알림:** 알림입니다. ``` diff --git a/docs/ru/translation-guide.md b/docs/ru/translation-guide.md index a3f7421ef1fe96..931b1c84a6fbaf 100644 --- a/docs/ru/translation-guide.md +++ b/docs/ru/translation-guide.md @@ -22,19 +22,19 @@ **Пожалуйста, поддерживайте глоссарий в алфавитном порядке.** -| Оригинальный термин | Перевод | -| ------------------ | ---------- | -| cache | кеш | -| feature | возможность (_менее предпочтительный синоним: функциональность_) | -| functionality | функциональность (или в зависимости от контекста — _возможность_) \* | -| general knowledge | общие сведения (при использовании в качестве заголовка) | -| learn more | дополнительные ресурсы (при использовании в качестве заголовка) | -| listener | обработчик (события) | -| note | примечание | -| production | продакшен | -| render(ing) | рендер, рендерить, отрендерить | -| see also | смотрите также | -| technical reference | технические материалы (при использовании в качестве заголовка) | +| Оригинальный термин | Перевод | +| ------------------- | -------------------------------------------------------------------- | +| cache | кеш | +| feature | возможность (_менее предпочтительный синоним: функциональность_) | +| functionality | функциональность (или в зависимости от контекста — _возможность_) \* | +| general knowledge | общие сведения (при использовании в качестве заголовка) | +| learn more | дополнительные ресурсы (при использовании в качестве заголовка) | +| listener | обработчик (события) | +| note | примечание | +| production | продакшен | +| render(ing) | рендер, рендерить, отрендерить | +| see also | смотрите также | +| technical reference | технические материалы (при использовании в качестве заголовка) | \* — по возможности лучше избежать прямого перевода, используя синонимы или лучше раскрывая смысл. diff --git a/docs/zh-cn/glossary.md b/docs/zh-cn/glossary.md new file mode 100644 index 00000000000000..f3348525543de2 --- /dev/null +++ b/docs/zh-cn/glossary.md @@ -0,0 +1,78 @@ +# 简体中文 web 术语翻译对照表 + +## 特定领域术语 + +### API + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| ----------- | -------- | ------------------------------------------------- | ------------------------------------------------------------------------------ | +| light DOM | 常规 DOM | 与影子 DOM 相对 | 同 shadow DOM | +| shadow DOM | 影子 DOM | DOM 节点的附属树,在常规 DOM 中不可见(web 组件) | <https://github.com/mdn/translated-content/pull/13432#issuecomment-1575018754> | +| shadow host | 影子宿主 | web 组件的宿主元素 | 同 shadow DOM | +| shadow tree | 影子树 | 隐藏的 DOM 子树 | 同 shadow DOM | + +### CSS + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| ---------------- | ------- | ------------------------ | -------------------------------------------------------- | +| block | 区块 | 用于表示布局、书写模式等 | <https://github.com/mdn/translated-content/issues/12632> | +| block direction | 块向 | | 同 `block` | +| block end/start | 块末/首 | | 同 `block` | +| block-level | 块级 | | 同 `block` | +| inline | 行内 | 用于表示布局、书写模式等 | <https://github.com/mdn/translated-content/issues/12632> | +| inline direction | 行向 | | 同 `inline` | +| inline end/start | 行末/首 | | 同 `inline` | +| inline-level | 行级 | | 同 `inline` | + +### HTML + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| --------------- | -------- | ---- | ----------------------------------------------------------------------------- | +| light dismiss | 轻触关闭 | | <https://github.com/mdn/translated-content/pull/13609#discussion_r1222377850> | +| Living Standard | 动态标准 | | <https://github.com/mdn/translated-content/pull/13406#discussion_r1206197135> | + +### HTTP + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| -------- | ------------ | -------------------------------------------- | ----------------------------------------------------------------------------- | +| CORS | 跨源资源共享 | 使用“域”并不准确,来源包括协议、域名和端口。 | <https://github.com/mdn/translated-content/pull/3096#issuecomment-1114015297> | +| Header | 标头 | HTTP 消息中的附加信息。 | 来自 Google Chrome 控制台 | + +### JavaScript + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| ------------------ | ---------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------- | +| bare module | 裸模块 | Vite.js 官方将其翻译为“裸模块”,其意为“没有任何路径的模块”。 | <https://github.com/mdn/translated-content/pull/12852#discussion_r1174339277> | +| brand check | 特定类型检查 | 通过一段代码来对特定的数据类型进行检查。 | <https://github.com/mdn/translated-content/pull/13381#discussion_r1205437483> | +| exotic object | 特异对象 | | | +| normative optional | 可选标准 | | <https://github.com/mdn/translated-content/pull/13627#discussion_r1224014687> | +| interface | 接口 | | <https://zh.wikipedia.org/wiki/介面_(資訊科技)> | +| unscopable | 非作用域(属性) | | <https://github.com/mdn/translated-content/pull/12793#discussion_r1170694183> | +| well-known symbol | 内置通用符号 | | <https://github.com/mdn/translated-content/pull/10338#discussion_r1036997921> | + +## 标题/表格 + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| ---------------------- | ------------ | ------------------ | ----------------------------------------------------------------------------- | +| Accessibility concerns | 无障碍考虑 | | <https://github.com/mdn/translated-content/issues/11456> | +| Active learning | 动手练习 | | <https://github.com/mdn/translated-content/pull/12696#discussion_r1164859935> | +| Browser compatibility | 浏览器兼容性 | | | +| Conclusion | 总结 | | <https://github.com/mdn/translated-content/pull/13329#discussion_r1199677894> | +| Examples | 示例 | | | +| Exceptions | 异常 | | | +| Formal Definition | 形式定义 | | <https://zh.wikipedia.org/zh-cn/形式文法> | +| Formal syntax | 形式语法 | | <https://zh.wikipedia.org/zh-cn/形式文法> | +| Objective | 目标 | 在学习区表格中使用 | | +| Parameters | 参数 | | | +| Prerequisites | 前提 | 在学习区表格中使用 | | +| See also | 参见 | | | +| Specifications | 规范 | | | +| Technical summary | 技术概要 | | <https://github.com/mdn/translated-content/issues/11456> | +| Test your skills | 技能测试 | | | +| Usage notes | 使用说明 | | <https://github.com/mdn/translated-content/pull/12600#discussion_r1161045585> | + +## 通用术语 + +| 英文词汇 | 翻译 | 备注 | 引用来源 | +| ---------- | ---- | ---------------------- | ------------------------------------------------ | +| repository | 仓库 | 用于存储代码的“仓库”。 | <https://github.com/progit/progit2-zh/issues/98> | diff --git a/docs/zh-cn/translation-guide.md b/docs/zh-cn/translation-guide.md index 3e6f4ab1e59976..a209106b0eaf69 100644 --- a/docs/zh-cn/translation-guide.md +++ b/docs/zh-cn/translation-guide.md @@ -114,6 +114,8 @@ Reference to [Live sample macros](/en-US/docs/MDN/Structures/Live_samples#live_s #### 常见中/英文标点 +<!-- markdownlint-disable search-replace --> + | 名称 | 中文 | 英文 | | ------ | ---- | ------- | | 括号 | () | () | @@ -121,6 +123,8 @@ Reference to [Live sample macros](/en-US/docs/MDN/Structures/Live_samples#live_s | 引号 | “” | "" | | 破折号 | —— | -- 、 — | +<!-- markdownlint-enable search-replace --> + 简体中文标点符号参考资源: - [教育部《标点符号用法》](https://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf) @@ -187,20 +191,15 @@ Like this. - 不宜:`应用程序接口(APIs)` - 不宜:`应用程序接口们(APIs)` +### 术语表 + +我们在仓库中维护了一个[术语表](glossary.md),旨在统一目前还未有明确中文翻译的术语。在翻译文档时,请尽量使用术语表中的术语,以保证文档的一致性。 + +> 如果术语表中缺少某些术语,或者你对其中的术语翻译有任何疑问,欢迎提出[议题](https://github.com/mdn/translated-content/issues/new/choose)或发起 PR。 + ### 常用标题 -英文文档中使用了一些常见标题,为了保持简体中文文档的一致性,我们作如下约定: - -| 英文 | 简体中文翻译 | -| ---------------------- | ------------ | -| Accessibility concerns | 无障碍考虑 | -| Active learning | 动手练习 | -| Browser compatibility | 浏览器兼容性 | -| Examples | 示例 | -| See also | 参见 | -| Specifications | 规范 | -| Technical summary | 技术概要 | -| Usage notes | 使用说明 | +英文文档中使用了一些常见标题,为了保持简体中文文档的一致性,请在翻译时参考术语表中的[标题和表格的翻译](glossary.md#标题表格)。 [如何使用 markdown 来撰写文档]: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN [**浏览器兼容性表**]: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables diff --git a/docs/zh-tw/translation-guide.md b/docs/zh-tw/translation-guide.md index 375f9bd3a151a5..a74f2a922125fb 100644 --- a/docs/zh-tw/translation-guide.md +++ b/docs/zh-tw/translation-guide.md @@ -89,6 +89,8 @@ For example, consider the [JavaScript](/en-US/docs/Web/JavaScript) guide, which 常見錯誤使用的標點符號(包含但不限於下列的例子): +<!-- markdownlint-disable search-replace --> + | 名稱 | 正確 | 錯誤 | | ------ | -------- | -------- | | 夾注號 | () | () | @@ -96,6 +98,8 @@ For example, consider the [JavaScript](/en-US/docs/Web/JavaScript) guide, which | 引號 | 「『』」 | “” 、 "" | | 破折號 | —— | -- 、 — | +<!-- markdownlint-enable search-replace --> + #### 如何輸入全形標點符號 在「微軟新注音」輸入法中,透過前導字元 <kbd>\`</kbd>(數字 1 左邊的按鍵),或使用 <kbd>shift</kbd> + <kbd>space</kbd> 切換全形模式,這樣可以快速輸入全形中文。其他輸入法也應有相應的機制,請自行探索。 diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index bff9519f07f16a..0b332e22976662 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -303,7 +303,7 @@ /es/docs/DOM/style /es/docs/Web/API/HTMLStyleElement /es/docs/DOM/table /es/docs/Web/API/HTMLTableElement /es/docs/DOM/window /es/docs/Web/API/Window -/es/docs/DOM/window.applicationCache /es/docs/Web/API/Window/applicationCache +/es/docs/DOM/window.applicationCache /es/docs/orphaned/Web/API/Window/applicationCache /es/docs/DOM/window.fullScreen /es/docs/Web/API/Window/fullScreen /es/docs/DOM/window.getSelection /es/docs/Web/API/Window/getSelection /es/docs/DOM/window.navigator.geolocation /es/docs/Web/API/Navigator/geolocation @@ -370,7 +370,7 @@ /es/docs/DOM:style /es/docs/Web/API/HTMLStyleElement /es/docs/DOM:table /es/docs/Web/API/HTMLTableElement /es/docs/DOM:window /es/docs/Web/API/Window -/es/docs/DOM:window.applicationCache /es/docs/Web/API/Window/applicationCache +/es/docs/DOM:window.applicationCache /es/docs/orphaned/Web/API/Window/applicationCache /es/docs/DOM:window.fullScreen /es/docs/Web/API/Window/fullScreen /es/docs/DOM:window.getSelection /es/docs/Web/API/Window/getSelection /es/docs/DOM:window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler @@ -1270,10 +1270,12 @@ /es/docs/Mejoras_SVG_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/SVG_improvements /es/docs/Mejoras_XUL_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 /es/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension -/es/docs/Mozilla/Add-ons/WebExtensions/Prerequisitos /es/docs/Mozilla/Add-ons/WebExtensions/Prerequisites +/es/docs/Mozilla/Add-ons/WebExtensions/Prerequisites /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Prerequisites +/es/docs/Mozilla/Add-ons/WebExtensions/Prerequisitos /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Prerequisites /es/docs/Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Tutorial /es/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +/es/docs/Mozilla/Add-ons/WebExtensions/What_next_ /es/docs/Mozilla/Add-ons/WebExtensions/What_next /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button /es/docs/Plantillas_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Templates @@ -1719,6 +1721,7 @@ /es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator /es/docs/Web/API/Window.onbeforeunload /es/docs/conflicting/Web/API/Window/beforeunload_event /es/docs/Web/API/Window.setTimeout /es/docs/Web/API/setTimeout +/es/docs/Web/API/Window/applicationCache /es/docs/orphaned/Web/API/Window/applicationCache /es/docs/Web/API/Window/crypto /es/docs/Web/API/crypto_property /es/docs/Web/API/Window/dialogArguments /es/docs/orphaned/Web/API/Window/dialogArguments /es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/atob @@ -1789,6 +1792,7 @@ /es/docs/Web/CSS/-webkit-mask-position /es/docs/Web/CSS/mask-position /es/docs/Web/CSS/-webkit-mask-repeat /es/docs/Web/CSS/mask-repeat /es/docs/Web/CSS/-webkit-print-color-adjust /es/docs/Web/CSS/print-color-adjust +/es/docs/Web/CSS/:-moz-focusring /es/docs/conflicting/Web/CSS/:focus-visible /es/docs/Web/CSS/:-moz-list-bullet /es/docs/Web/CSS/::-moz-list-bullet /es/docs/Web/CSS/:-moz-list-number /es/docs/Web/CSS/::-moz-list-number /es/docs/Web/CSS/:-moz-locale-dir(ltr) /es/docs/Web/CSS/:-moz-locale-dir_ltr @@ -1869,8 +1873,8 @@ /es/docs/Web/CSS/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Web/CSS/Referencia_CSS/background-blend-mode /es/docs/Web/CSS/background-blend-mode /es/docs/Web/CSS/Referencia_CSS/mix-blend-mode /es/docs/Web/CSS/mix-blend-mode -/es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_Selectors -/es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +/es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_selectors +/es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors /es/docs/Web/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors /es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Adjacent_sibling_combinator /es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator @@ -2774,31 +2778,31 @@ /es/docs/Web/Web_Components/Using_shadow_DOM /es/docs/Web/API/Web_components/Using_shadow_DOM /es/docs/Web/Web_Components/Using_templates_and_slots /es/docs/Web/API/Web_components/Using_templates_and_slots /es/docs/Web/XML/Introducción_a_XML /es/docs/Web/XML/XML_introduction -/es/docs/Web/XPath/Axes/ancestor /es/docs/orphaned/Web/XPath/Axes/ancestor -/es/docs/Web/XPath/Axes/ancestor-or-self /es/docs/orphaned/Web/XPath/Axes/ancestor-or-self -/es/docs/Web/XPath/Axes/attribute /es/docs/orphaned/Web/XPath/Axes/attribute -/es/docs/Web/XPath/Axes/child /es/docs/orphaned/Web/XPath/Axes/child -/es/docs/Web/XPath/Axes/descendant /es/docs/orphaned/Web/XPath/Axes/descendant -/es/docs/Web/XPath/Axes/descendant-or-self /es/docs/orphaned/Web/XPath/Axes/descendant-or-self -/es/docs/Web/XPath/Axes/following /es/docs/orphaned/Web/XPath/Axes/following -/es/docs/Web/XPath/Axes/following-sibling /es/docs/orphaned/Web/XPath/Axes/following-sibling -/es/docs/Web/XPath/Axes/namespace /es/docs/orphaned/Web/XPath/Axes/namespace -/es/docs/Web/XPath/Axes/parent /es/docs/orphaned/Web/XPath/Axes/parent -/es/docs/Web/XPath/Axes/preceding /es/docs/orphaned/Web/XPath/Axes/preceding -/es/docs/Web/XPath/Axes/preceding-sibling /es/docs/orphaned/Web/XPath/Axes/preceding-sibling +/es/docs/Web/XPath/Axes/ancestor /es/docs/web/xpath/axes#ancestor +/es/docs/Web/XPath/Axes/ancestor-or-self /es/docs/web/xpath/axes#ancestor-or-self +/es/docs/Web/XPath/Axes/attribute /es/docs/web/xpath/axes#attribute +/es/docs/Web/XPath/Axes/child /es/docs/web/xpath/axes#child +/es/docs/Web/XPath/Axes/descendant /es/docs/web/xpath/axes#descendant +/es/docs/Web/XPath/Axes/descendant-or-self /es/docs/web/xpath/axes#descendant-or-self +/es/docs/Web/XPath/Axes/following /es/docs/web/xpath/axes#following +/es/docs/Web/XPath/Axes/following-sibling /es/docs/web/xpath/axes#following-sibling +/es/docs/Web/XPath/Axes/namespace /es/docs/web/xpath/axes#namespace +/es/docs/Web/XPath/Axes/parent /es/docs/web/xpath/axes#parent +/es/docs/Web/XPath/Axes/preceding /es/docs/web/xpath/axes#preceding +/es/docs/Web/XPath/Axes/preceding-sibling /es/docs/web/xpath/axes#preceding-sibling /es/docs/Web/XPath/Ejes /es/docs/Web/XPath/Axes -/es/docs/Web/XPath/Ejes/ancestor /es/docs/orphaned/Web/XPath/Axes/ancestor -/es/docs/Web/XPath/Ejes/ancestor-or-self /es/docs/orphaned/Web/XPath/Axes/ancestor-or-self -/es/docs/Web/XPath/Ejes/attribute /es/docs/orphaned/Web/XPath/Axes/attribute -/es/docs/Web/XPath/Ejes/child /es/docs/orphaned/Web/XPath/Axes/child -/es/docs/Web/XPath/Ejes/descendant /es/docs/orphaned/Web/XPath/Axes/descendant -/es/docs/Web/XPath/Ejes/descendant-or-self /es/docs/orphaned/Web/XPath/Axes/descendant-or-self -/es/docs/Web/XPath/Ejes/following /es/docs/orphaned/Web/XPath/Axes/following -/es/docs/Web/XPath/Ejes/following-sibling /es/docs/orphaned/Web/XPath/Axes/following-sibling -/es/docs/Web/XPath/Ejes/namespace /es/docs/orphaned/Web/XPath/Axes/namespace -/es/docs/Web/XPath/Ejes/parent /es/docs/orphaned/Web/XPath/Axes/parent -/es/docs/Web/XPath/Ejes/preceding /es/docs/orphaned/Web/XPath/Axes/preceding -/es/docs/Web/XPath/Ejes/preceding-sibling /es/docs/orphaned/Web/XPath/Axes/preceding-sibling +/es/docs/Web/XPath/Ejes/ancestor /es/docs/web/xpath/axes#ancestor +/es/docs/Web/XPath/Ejes/ancestor-or-self /es/docs/web/xpath/axes#ancestor-or-self +/es/docs/Web/XPath/Ejes/attribute /es/docs/web/xpath/axes#attribute +/es/docs/Web/XPath/Ejes/child /es/docs/web/xpath/axes#child +/es/docs/Web/XPath/Ejes/descendant /es/docs/web/xpath/axes#descendant +/es/docs/Web/XPath/Ejes/descendant-or-self /es/docs/web/xpath/axes#descendant-or-self +/es/docs/Web/XPath/Ejes/following /es/docs/web/xpath/axes#following +/es/docs/Web/XPath/Ejes/following-sibling /es/docs/web/xpath/axes#following-sibling +/es/docs/Web/XPath/Ejes/namespace /es/docs/web/xpath/axes#namespace +/es/docs/Web/XPath/Ejes/parent /es/docs/web/xpath/axes#parent +/es/docs/Web/XPath/Ejes/preceding /es/docs/web/xpath/axes#preceding +/es/docs/Web/XPath/Ejes/preceding-sibling /es/docs/web/xpath/axes#preceding-sibling /es/docs/Web/XPath/Funciones /es/docs/Web/XPath/Functions /es/docs/Web/XPath/Funciones/contains /es/docs/Web/XPath/Functions/contains /es/docs/Web/XPath/Funciones/substring /es/docs/Web/XPath/Functions/substring @@ -2848,18 +2852,18 @@ /es/docs/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/readystatechange_event /es/docs/XPath /es/docs/Web/XPath /es/docs/XPath/Ejes /es/docs/Web/XPath/Axes -/es/docs/XPath/Ejes/ancestor /es/docs/orphaned/Web/XPath/Axes/ancestor -/es/docs/XPath/Ejes/ancestor-or-self /es/docs/orphaned/Web/XPath/Axes/ancestor-or-self -/es/docs/XPath/Ejes/attribute /es/docs/orphaned/Web/XPath/Axes/attribute -/es/docs/XPath/Ejes/child /es/docs/orphaned/Web/XPath/Axes/child -/es/docs/XPath/Ejes/descendant /es/docs/orphaned/Web/XPath/Axes/descendant -/es/docs/XPath/Ejes/descendant-or-self /es/docs/orphaned/Web/XPath/Axes/descendant-or-self -/es/docs/XPath/Ejes/following /es/docs/orphaned/Web/XPath/Axes/following -/es/docs/XPath/Ejes/following-sibling /es/docs/orphaned/Web/XPath/Axes/following-sibling -/es/docs/XPath/Ejes/namespace /es/docs/orphaned/Web/XPath/Axes/namespace -/es/docs/XPath/Ejes/parent /es/docs/orphaned/Web/XPath/Axes/parent -/es/docs/XPath/Ejes/preceding /es/docs/orphaned/Web/XPath/Axes/preceding -/es/docs/XPath/Ejes/preceding-sibling /es/docs/orphaned/Web/XPath/Axes/preceding-sibling +/es/docs/XPath/Ejes/ancestor /es/docs/web/xpath/axes#ancestor +/es/docs/XPath/Ejes/ancestor-or-self /es/docs/web/xpath/axes#ancestor-or-self +/es/docs/XPath/Ejes/attribute /es/docs/web/xpath/axes#attribute +/es/docs/XPath/Ejes/child /es/docs/web/xpath/axes#child +/es/docs/XPath/Ejes/descendant /es/docs/web/xpath/axes#descendant +/es/docs/XPath/Ejes/descendant-or-self /es/docs/web/xpath/axes#descendant-or-self +/es/docs/XPath/Ejes/following /es/docs/web/xpath/axes#following +/es/docs/XPath/Ejes/following-sibling /es/docs/web/xpath/axes#following-sibling +/es/docs/XPath/Ejes/namespace /es/docs/web/xpath/axes#namespace +/es/docs/XPath/Ejes/parent /es/docs/web/xpath/axes#parent +/es/docs/XPath/Ejes/preceding /es/docs/web/xpath/axes#preceding +/es/docs/XPath/Ejes/preceding-sibling /es/docs/web/xpath/axes#preceding-sibling /es/docs/XPath/Funciones /es/docs/Web/XPath/Functions /es/docs/XPath/Funciones-XPath/true /es/docs/Web/XPath/Functions/true /es/docs/XPath/Funciones/contains /es/docs/Web/XPath/Functions/contains @@ -2869,18 +2873,18 @@ /es/docs/XPath/funciones-xpath/contains /es/docs/Web/XPath/Functions/contains /es/docs/XPath/funciones-xpath/substring /es/docs/Web/XPath/Functions/substring /es/docs/XPath:Ejes /es/docs/Web/XPath/Axes -/es/docs/XPath:Ejes:ancestor /es/docs/orphaned/Web/XPath/Axes/ancestor -/es/docs/XPath:Ejes:ancestor-or-self /es/docs/orphaned/Web/XPath/Axes/ancestor-or-self -/es/docs/XPath:Ejes:attribute /es/docs/orphaned/Web/XPath/Axes/attribute -/es/docs/XPath:Ejes:child /es/docs/orphaned/Web/XPath/Axes/child -/es/docs/XPath:Ejes:descendant /es/docs/orphaned/Web/XPath/Axes/descendant -/es/docs/XPath:Ejes:descendant-or-self /es/docs/orphaned/Web/XPath/Axes/descendant-or-self -/es/docs/XPath:Ejes:following /es/docs/orphaned/Web/XPath/Axes/following -/es/docs/XPath:Ejes:following-sibling /es/docs/orphaned/Web/XPath/Axes/following-sibling -/es/docs/XPath:Ejes:namespace /es/docs/orphaned/Web/XPath/Axes/namespace -/es/docs/XPath:Ejes:parent /es/docs/orphaned/Web/XPath/Axes/parent -/es/docs/XPath:Ejes:preceding /es/docs/orphaned/Web/XPath/Axes/preceding -/es/docs/XPath:Ejes:preceding-sibling /es/docs/orphaned/Web/XPath/Axes/preceding-sibling +/es/docs/XPath:Ejes:ancestor /es/docs/web/xpath/axes#ancestor +/es/docs/XPath:Ejes:ancestor-or-self /es/docs/web/xpath/axes#ancestor-or-self +/es/docs/XPath:Ejes:attribute /es/docs/web/xpath/axes#attribute +/es/docs/XPath:Ejes:child /es/docs/web/xpath/axes#child +/es/docs/XPath:Ejes:descendant /es/docs/web/xpath/axes#descendant +/es/docs/XPath:Ejes:descendant-or-self /es/docs/web/xpath/axes#descendant-or-self +/es/docs/XPath:Ejes:following /es/docs/web/xpath/axes#following +/es/docs/XPath:Ejes:following-sibling /es/docs/web/xpath/axes#following-sibling +/es/docs/XPath:Ejes:namespace /es/docs/web/xpath/axes#namespace +/es/docs/XPath:Ejes:parent /es/docs/web/xpath/axes#parent +/es/docs/XPath:Ejes:preceding /es/docs/web/xpath/axes#preceding +/es/docs/XPath:Ejes:preceding-sibling /es/docs/web/xpath/axes#preceding-sibling /es/docs/XPath:Funciones:contains /es/docs/Web/XPath/Functions/contains /es/docs/XPath:Funciones:substring /es/docs/Web/XPath/Functions/substring /es/docs/XPath:Funciones:true /es/docs/Web/XPath/Functions/true @@ -2959,4 +2963,16 @@ /es/docs/orphaned/Web/API/NavigatorOnLine/onLine /es/docs/Web/API/Navigator/onLine /es/docs/orphaned/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute /es/docs/Web/Accessibility/ARIA/Attributes/aria-label /es/docs/orphaned/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute /es/docs/Web/Accessibility/ARIA/Attributes/aria-required +/es/docs/orphaned/Web/XPath/Axes/ancestor /es/docs/web/xpath/axes#ancestor +/es/docs/orphaned/Web/XPath/Axes/ancestor-or-self /es/docs/web/xpath/axes#ancestor-or-self +/es/docs/orphaned/Web/XPath/Axes/attribute /es/docs/web/xpath/axes#attribute +/es/docs/orphaned/Web/XPath/Axes/child /es/docs/web/xpath/axes#child +/es/docs/orphaned/Web/XPath/Axes/descendant /es/docs/web/xpath/axes#descendant +/es/docs/orphaned/Web/XPath/Axes/descendant-or-self /es/docs/web/xpath/axes#descendant-or-self +/es/docs/orphaned/Web/XPath/Axes/following /es/docs/web/xpath/axes#following +/es/docs/orphaned/Web/XPath/Axes/following-sibling /es/docs/web/xpath/axes#following-sibling +/es/docs/orphaned/Web/XPath/Axes/namespace /es/docs/web/xpath/axes#namespace +/es/docs/orphaned/Web/XPath/Axes/parent /es/docs/web/xpath/axes#parent +/es/docs/orphaned/Web/XPath/Axes/preceding /es/docs/web/xpath/axes#preceding +/es/docs/orphaned/Web/XPath/Axes/preceding-sibling /es/docs/web/xpath/axes#preceding-sibling /es/docs/video /es/docs/Web/HTML/Element/video diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 9cb5965c039da5..b4dde34bf69d0c 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -2832,15 +2832,11 @@ "modified": "2019-03-18T21:02:55.354Z", "contributors": ["alexgilsoncampi"] }, - "Mozilla/Add-ons/WebExtensions/Prerequisites": { - "modified": "2019-03-23T22:45:28.352Z", - "contributors": ["yuniers"] - }, "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { "modified": "2020-11-23T00:59:33.889Z", "contributors": ["kenliten", "hecaxmmx", "13539"] }, - "Mozilla/Add-ons/WebExtensions/What_next_": { + "Mozilla/Add-ons/WebExtensions/What_next": { "modified": "2019-03-18T20:43:00.251Z", "contributors": ["chicocoulomb"] }, @@ -5653,16 +5649,6 @@ "modified": "2019-03-23T22:27:29.008Z", "contributors": ["israel-munoz"] }, - "Web/API/Window/applicationCache": { - "modified": "2019-03-23T23:52:56.666Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "AshfaqHossain", - "HenryGR", - "Mgjbot" - ] - }, "Web/API/Window/beforeunload_event": { "modified": "2019-04-30T14:05:00.135Z", "contributors": ["wbamberg", "ExE-Boss", "anasyusef", "Bant89"] @@ -6268,10 +6254,6 @@ "modified": "2019-03-23T22:34:12.741Z", "contributors": ["pekechis"] }, - "Web/CSS/:-moz-focusring": { - "modified": "2019-03-23T22:34:12.588Z", - "contributors": ["teoli", "pekechis"] - }, "Web/CSS/:-moz-handler-blocked": { "modified": "2019-03-23T22:33:34.259Z", "contributors": ["pekechis"] @@ -6829,20 +6811,6 @@ "jota1410" ] }, - "Web/CSS/CSS_Selectors": { - "modified": "2019-07-09T01:16:13.123Z", - "contributors": [ - "missmakita", - "blanchart", - "Benji1337", - "metal-gogo", - "kikolevante" - ] - }, - "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { - "modified": "2020-07-31T07:57:08.167Z", - "contributors": ["blanchart", "israel-munoz"] - }, "Web/CSS/CSS_Types": { "modified": "2019-03-18T21:35:39.343Z", "contributors": ["lajaso"] @@ -7087,6 +7055,20 @@ "modified": "2019-03-23T22:32:38.884Z", "contributors": ["javichito"] }, + "Web/CSS/CSS_selectors": { + "modified": "2019-07-09T01:16:13.123Z", + "contributors": [ + "missmakita", + "blanchart", + "Benji1337", + "metal-gogo", + "kikolevante" + ] + }, + "Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2020-07-31T07:57:08.167Z", + "contributors": ["blanchart", "israel-munoz"] + }, "Web/CSS/CSS_text": { "modified": "2019-03-23T22:36:23.444Z", "contributors": ["pekechis"] @@ -14601,6 +14583,10 @@ "modified": "2019-03-18T21:16:20.006Z", "contributors": ["teoli", "pekechis"] }, + "conflicting/Web/CSS/:focus-visible": { + "modified": "2019-03-23T22:34:12.588Z", + "contributors": ["teoli", "pekechis"] + }, "conflicting/Web/CSS/:placeholder-shown": { "modified": "2019-03-23T22:33:30.015Z", "contributors": ["teoli", "pekechis"] @@ -15331,6 +15317,10 @@ "modified": "2019-03-18T21:08:10.456Z", "contributors": ["fitojb", "yuniers"] }, + "orphaned/Mozilla/Add-ons/WebExtensions/Prerequisites": { + "modified": "2019-03-23T22:45:28.352Z", + "contributors": ["yuniers"] + }, "orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox": { "modified": "2019-03-23T22:45:27.399Z", "contributors": ["yuniers"] @@ -15545,6 +15535,16 @@ "modified": "2019-03-23T22:10:43.026Z", "contributors": ["haxdai"] }, + "orphaned/Web/API/Window/applicationCache": { + "modified": "2019-03-23T23:52:56.666Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "AshfaqHossain", + "HenryGR", + "Mgjbot" + ] + }, "orphaned/Web/API/Window/dialogArguments": { "modified": "2019-03-23T22:33:21.065Z", "contributors": ["Grijander81"] @@ -15856,54 +15856,6 @@ "modified": "2019-03-23T23:42:07.791Z", "contributors": ["teoli", "Mgjbot", "Jorolo", "Arcnor"] }, - "orphaned/Web/XPath/Axes/ancestor": { - "modified": "2019-01-16T16:11:09.049Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/ancestor-or-self": { - "modified": "2019-01-16T16:11:00.606Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/attribute": { - "modified": "2019-01-16T16:11:03.106Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/child": { - "modified": "2019-01-16T16:11:02.142Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/descendant": { - "modified": "2019-01-16T16:11:00.301Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/descendant-or-self": { - "modified": "2019-01-16T16:11:00.088Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/following": { - "modified": "2019-01-16T16:10:55.079Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/following-sibling": { - "modified": "2019-01-16T16:11:02.465Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/namespace": { - "modified": "2019-01-16T16:10:55.086Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/parent": { - "modified": "2019-01-16T16:10:56.130Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/preceding": { - "modified": "2019-01-16T16:11:08.778Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, - "orphaned/Web/XPath/Axes/preceding-sibling": { - "modified": "2019-01-16T16:10:57.298Z", - "contributors": ["ExE-Boss", "Mgjbot", "Cmayo"] - }, "orphaned/XPInstall_API_Reference": { "modified": "2019-01-16T15:37:54.457Z", "contributors": ["Eddomita"] diff --git a/files/es/web/css/_colon_-moz-focusring/index.md b/files/es/conflicting/web/css/_colon_focus-visible/index.md similarity index 93% rename from files/es/web/css/_colon_-moz-focusring/index.md rename to files/es/conflicting/web/css/_colon_focus-visible/index.md index f517cb388d11d5..c20240f1b08ec0 100644 --- a/files/es/web/css/_colon_-moz-focusring/index.md +++ b/files/es/conflicting/web/css/_colon_focus-visible/index.md @@ -1,6 +1,7 @@ --- -title: ':-moz-focusring' -slug: Web/CSS/:-moz-focusring +title: ":-moz-focusring" +slug: conflicting/Web/CSS/:focus-visible +original_slug: Web/CSS/:-moz-focusring --- {{Non-standard_header}}{{CSSRef}} diff --git a/files/es/conflicting/web/javascript/javascript_technologies_overview/index.md b/files/es/conflicting/web/javascript/javascript_technologies_overview/index.md index 66d43d4268d798..b95dde97604097 100644 --- a/files/es/conflicting/web/javascript/javascript_technologies_overview/index.md +++ b/files/es/conflicting/web/javascript/javascript_technologies_overview/index.md @@ -103,7 +103,7 @@ original_slug: Web/JavaScript/Language_Resources > y <a - href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" + href="/es/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla" >ECMAScript 5 soporte en Mozilla.</a > @@ -119,7 +119,7 @@ original_slug: Web/JavaScript/Language_Resources </td> <td>Junio 2004</td> <td> - <a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a + <a href="/es/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a >.<br />Vea también la <a class="link-https" diff --git a/files/es/games/introduction/index.md b/files/es/games/introduction/index.md index 03f1b8ebd9dd79..0b920843d95871 100644 --- a/files/es/games/introduction/index.md +++ b/files/es/games/introduction/index.md @@ -12,15 +12,15 @@ La Web rapidamente se ha convertido en una plataforma viable no solo para crear Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web: -| Funcion | Tecnología | -| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Audio** | [Web Audio API](/es/docs/Web_Audio_API) | -| **Graficos** | [WebGL](/es/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | +| Funcion | Tecnología | +| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Audio** | [Web Audio API](/es/docs/Web_Audio_API) | +| **Graficos** | [WebGL](/es/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | | **Entrada** | [Touch events](/es/docs/DOM/Touch_events), [Gamepad API](/es/docs/API/Gamepad/Using_Gamepad_API), device sensors, [WebRTC](/es/docs/Web/API/WebRTC_API), [Full Screen API](/es/docs/DOM/Using_fullscreen_mode), [Pointer Lock API](/es/docs/WebAPI/Pointer_Lock) | -| **Lenguaje** | [JavaScript](/es/docs/JavaScript) (o C/C++ usando [Emscripten](https://github.com/kripken/emscripten/wiki) para compilar a JavaScript) | -| **Redes** | [WebRTC](/es/docs/WebRTC) and/or [WebSockets](/es/docs/WebSockets) | -| **Almacenamiento** | [IndexedDB](/es/docs/IndexedDB) o la "nube" | -| **Web** | [HTML](/es/docs/HTML), [CSS](/es/docs/CSS), [SVG](/es/docs/SVG), [Social API](/es/docs/Social_API) (y mucho más!) | +| **Lenguaje** | [JavaScript](/es/docs/JavaScript) (o C/C++ usando [Emscripten](https://github.com/kripken/emscripten/wiki) para compilar a JavaScript) | +| **Redes** | [WebRTC](/es/docs/WebRTC) and/or [WebSockets](/es/docs/WebSockets) | +| **Almacenamiento** | [IndexedDB](/es/docs/IndexedDB) o la "nube" | +| **Web** | [HTML](/es/docs/HTML), [CSS](/es/docs/CSS), [SVG](/es/docs/SVG), [Social API](/es/docs/Social_API) (y mucho más!) | ## El caso de Exito @@ -28,39 +28,39 @@ Como un desarrollador de juegos, de forma individual o como un gran studio de ju 1. El alcance de la Web es enorme; - está en todas partes. + está en todas partes. - Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs. + Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs. 2. Se mejoran la comercialización y la detección. - No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. + No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. - En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes. + En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes. 3. Usted tiene control donde importa: Pagos. - Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. + Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. - En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste. + En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste. 4. Una vez más con más control, puedes actualizar tu juego cuando quieras. - No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana. + No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana. 5. ¡Controla tus análisis! - En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego. + En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego. 6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. - No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. + No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. - Involucrarse con sus clientes de la manera que desee, sin un intermediario. + Involucrarse con sus clientes de la manera que desee, sin un intermediario. 7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. - Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa. + Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa. ## Tecnologías web para desarrolladores de juegos diff --git a/files/es/games/introduction_to_html5_game_development/index.md b/files/es/games/introduction_to_html5_game_development/index.md index 93c0d0204fddc9..8252dbd7fd73b1 100644 --- a/files/es/games/introduction_to_html5_game_development/index.md +++ b/files/es/games/introduction_to_html5_game_development/index.md @@ -18,15 +18,15 @@ original_slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) ## Tecnologías Web -| Funcionalidad | Tecnología | -| ------------- | --- | -| Audio | [Web Audio API](/es/docs/Web_Audio_API) | -| Graphics | [WebGL](/es/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | +| Funcionalidad | Tecnología | +| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Audio | [Web Audio API](/es/docs/Web_Audio_API) | +| Graphics | [WebGL](/es/docs/WebGL) ([OpenGL ES](http://www.khronos.org/opengles/) 2.0) | | Input | [Touch events](/es/docs/DOM/Touch_events), [Gamepad API](/es/docs/API/Gamepad/Using_Gamepad_API), sensores del dispositivo, [WebRTC](/es/docs/WebRTC), [Full Screen API](/es/docs/DOM/Using_fullscreen_mode), [Pointer Lock API](/es/docs/WebAPI/Pointer_Lock) | -| Language | [JavaScript](/es/docs/JavaScript) (o C/C++ usando [Emscripten](https://github.com/kripken/emscripten/wiki) para compilar a JavaScript) | -| Networking | [WebRTC](/es/docs/WebRTC) y/o [WebSockets](/es/docs/WebSockets) | -| Storage | [IndexedDB](/es/docs/IndexedDB) o la "nube" | -| Web | [HTML](/es/docs/HTML), [CSS](/es/docs/CSS), [SVG](/es/docs/SVG), [Social API](/es/docs/Social_API) (¡y muchos más!) | +| Language | [JavaScript](/es/docs/JavaScript) (o C/C++ usando [Emscripten](https://github.com/kripken/emscripten/wiki) para compilar a JavaScript) | +| Networking | [WebRTC](/es/docs/WebRTC) y/o [WebSockets](/es/docs/WebSockets) | +| Storage | [IndexedDB](/es/docs/IndexedDB) o la "nube" | +| Web | [HTML](/es/docs/HTML), [CSS](/es/docs/CSS), [SVG](/es/docs/SVG), [Social API](/es/docs/Social_API) (¡y muchos más!) | - [Full Screen API](/es/docs/DOM/Using_fullscreen_mode) - : Juego de pantalla completa. diff --git a/files/es/games/techniques/2d_collision_detection/index.md b/files/es/games/techniques/2d_collision_detection/index.md index ecf3dd0a7f2e4e..4f11bb56f82e7c 100644 --- a/files/es/games/techniques/2d_collision_detection/index.md +++ b/files/es/games/techniques/2d_collision_detection/index.md @@ -14,31 +14,41 @@ Una de las formas más simples de detección de colisiones es entre dos rectáng ```html hidden <div id="cr-stage"></div> -<p>Mueva el rectángulo con las teclas de flecha. Verde significa colisión, azul significa que no hay colisión.</p> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> +<p> + Mueva el rectángulo con las teclas de flecha. Verde significa colisión, azul + significa que no hay colisión. +</p> +<script + type="text/javascript" + src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> ``` ```js Crafty.init(200, 200); -var dim1 = {x: 5, y: 5, w: 50, h: 50} -var dim2 = {x: 20, y: 10, w: 60, h: 40} +var dim1 = { x: 5, y: 5, w: 50, h: 50 }; +var dim2 = { x: 20, y: 10, w: 60, h: 40 }; var rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red"); -var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway").fourway(2).attr(dim2).color("blue"); +var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway") + .fourway(2) + .attr(dim2) + .color("blue"); rect2.bind("EnterFrame", function () { - if (rect1.x < rect2.x + rect2.w && - rect1.x + rect1.w > rect2.x && - rect1.y < rect2.y + rect2.h && - rect1.h + rect1.y > rect2.y) { - // ¡colisión detectada! - this.color("green"); - } else { - // no hay colisión - this.color("blue"); - } + if ( + rect1.x < rect2.x + rect2.w && + rect1.x + rect1.w > rect2.x && + rect1.y < rect2.y + rect2.h && + rect1.h + rect1.y > rect2.y + ) { + // ¡colisión detectada! + this.color("green"); + } else { + // no hay colisión + this.color("blue"); + } }); ``` @@ -52,67 +62,75 @@ Otra forma simple para la detección de colisiones es entre dos círculos. Este ```html hidden <div id="cr-stage"></div> -<p>Mueve el círculo con las teclas de flecha. Verde significa colisión, azul significa que no hay colisión.</p> -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> +<p> + Mueve el círculo con las teclas de flecha. Verde significa colisión, azul + significa que no hay colisión. +</p> +<script + type="text/javascript" + src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> ``` ```css hidden #cr-stage { - position: static !important; - height: 200px !important; + position: static !important; + height: 200px !important; } ``` ```js Crafty.init(200, 200); -var dim1 = {x: 5, y: 5} -var dim2 = {x: 20, y: 20} +var dim1 = { x: 5, y: 5 }; +var dim2 = { x: 20, y: 20 }; Crafty.c("Circle", { - circle: function(radius, color) { - this.radius = radius; - this.w = this.h = radius * 2; - this.color = color || "#000000"; - - this.bind("Move", Crafty.DrawManager.drawAll) - return this; - }, - - draw: function() { - var ctx = Crafty.canvas.context; - ctx.save(); - ctx.fillStyle = this.color; - ctx.beginPath(); - ctx.arc( - this.x + this.radius, - this.y + this.radius, - this.radius, - 0, - Math.PI * 2 - ); - ctx.closePath(); - ctx.fill(); - ctx.restore(); - } + circle: function (radius, color) { + this.radius = radius; + this.w = this.h = radius * 2; + this.color = color || "#000000"; + + this.bind("Move", Crafty.DrawManager.drawAll); + return this; + }, + + draw: function () { + var ctx = Crafty.canvas.context; + ctx.save(); + ctx.fillStyle = this.color; + ctx.beginPath(); + ctx.arc( + this.x + this.radius, + this.y + this.radius, + this.radius, + 0, + Math.PI * 2, + ); + ctx.closePath(); + ctx.fill(); + ctx.restore(); + }, }); var circle1 = Crafty.e("2D, Canvas, Circle").attr(dim1).circle(15, "red"); -var circle2 = Crafty.e("2D, Canvas, Circle, Fourway").fourway(2).attr(dim2).circle(20, "blue"); +var circle2 = Crafty.e("2D, Canvas, Circle, Fourway") + .fourway(2) + .attr(dim2) + .circle(20, "blue"); circle2.bind("EnterFrame", function () { - var dx = (circle1.x + circle1.radius) - (circle2.x + circle2.radius); - var dy = (circle1.y + circle1.radius) - (circle2.y + circle2.radius); - var distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < circle1.radius + circle2.radius) { - // ¡colisión detectada! - this.color = "green"; - } else { - // no hay colisión - this.color = "blue"; - } + var dx = circle1.x + circle1.radius - (circle2.x + circle2.radius); + var dy = circle1.y + circle1.radius - (circle2.y + circle2.radius); + var distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < circle1.radius + circle2.radius) { + // ¡colisión detectada! + this.color = "green"; + } else { + // no hay colisión + this.color = "blue"; + } }); ``` diff --git a/files/es/games/techniques/index.md b/files/es/games/techniques/index.md index dceffdcb5f6256..64c4b49e0dca2a 100644 --- a/files/es/games/techniques/index.md +++ b/files/es/games/techniques/index.md @@ -2,7 +2,7 @@ title: Técnicas para el desarrollo de juegos web slug: Games/Techniques l10n: - sourceCommit: '048f6b1c75e22103ddb0304d67ee79d6d8a014f0' + sourceCommit: 048f6b1c75e22103ddb0304d67ee79d6d8a014f0 --- {{GamesSidebar}} diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md index cd3e7caba607d9..08b17bbfae0af8 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md @@ -20,7 +20,7 @@ En primer lugar toma la hoja de sprites de Github y guardala en el directorio `/ A continuación, cargaremos la hoja de cálculo : coloca la siguiente linea en la parte inferior de su función `preload()`: ```js -game.load.spritesheet('ball', 'img/wobble.png', 20, 20); +game.load.spritesheet("ball", "img/wobble.png", 20, 20); ``` En lugar de cargar una sola imagen de la bola, podemos cargar toda la hoja de cálculo, una colección de imágenes diferentes. Mostraremos los sprites de forma secuencial para crear la ilusión de animación. Los dos parámetros adicionales del método `spritesheet()` determinan el ancho y la altura de cada fotograma en el archivo de spritesheet dado, indicando al programa cómo cortarlo para obtener los marcos individuales. @@ -30,8 +30,8 @@ En lugar de cargar una sola imagen de la bola, podemos cargar toda la hoja de c A continuación ve a tu función create(), encuentra la linea que carga el sprite de la bola, y debajo coloca la linea que llama a `animations.add()` que se muestra a continuación: ```js -ball = game.add.sprite(50, 250, 'ball'); -ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24); +ball = game.add.sprite(50, 250, "ball"); +ball.animations.add("wobble", [0, 1, 0, 2, 0, 1, 0, 2, 0], 24); ``` Para añadir una animación al objeto usaremos el método `animations.add()`, que contiene los siguientes parámetros: @@ -46,9 +46,9 @@ En la llamada al método `arcade.collide()` que maneja la colisión entre la pel ```js function update() { - game.physics.arcade.collide(ball, paddle, ballHitPaddle); - game.physics.arcade.collide(ball, bricks, ballHitBrick); - paddle.x = game.input.x || game.world.width*0.5; + game.physics.arcade.collide(ball, paddle, ballHitPaddle); + game.physics.arcade.collide(ball, bricks, ballHitBrick); + paddle.x = game.input.x || game.world.width * 0.5; } ``` @@ -56,7 +56,7 @@ Luego podemos crear la función `ballHitPaddle()` (con `ball` y `paddle` como pa ```js function ballHitPaddle(ball, paddle) { - ball.animations.play('wobble'); + ball.animations.play("wobble"); } ``` @@ -70,9 +70,9 @@ Agreguemos una interpolación a nuestro juego para hacer que los ladrillos desap ```js var killTween = game.add.tween(brick.scale); -killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None); -killTween.onComplete.addOnce(function(){ - brick.kill(); +killTween.to({ x: 0, y: 0 }, 200, Phaser.Easing.Linear.None); +killTween.onComplete.addOnce(function () { + brick.kill(); }, this); killTween.start(); ``` @@ -87,7 +87,9 @@ Veamos esto para que puedas saber lo que está pasando: Esa es la versión expandida de la definición de interpolación, pero también podemos usar la sintaxis abreviada: ```js -game.add.tween(brick.scale).to({x:2,y:2}, 500, Phaser.Easing.Elastic.Out, true, 100); +game.add + .tween(brick.scale) + .to({ x: 2, y: 2 }, 500, Phaser.Easing.Elastic.Out, true, 100); ``` Esta interpolación duplicará la escala del ladrillo en medio segundo con el uso de Elastic easing, se iniciará automáticamente, y tendrá un retardo de 100 milisegundos. diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md index ce013c62cce80f..923e08faec4e3b 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.md @@ -26,7 +26,7 @@ var startButton; Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función `preload()`: ```js -game.load.spritesheet('button', 'img/button.png', 120, 40); +game.load.spritesheet("button", "img/button.png", 120, 40); ``` El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto. @@ -38,7 +38,16 @@ También se debe tomar el botón de spritesheet de [Github](https://github.com/e Para añadir el botón al juego usaremos el método `add.button`. Añade las siguientes lineas del botón a la función `create()`: ```js -startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2); +startButton = game.add.button( + game.world.width * 0.5, + game.world.height * 0.5, + "button", + startGame, + this, + 1, + 0, + 2, +); startButton.anchor.set(0.5); ``` @@ -56,9 +65,9 @@ Ahora necesitamos definir la función `startGame()` referenciada en el siguiente ```js function startGame() { - startButton.destroy(); - ball.body.velocity.set(150, -150); - playing = true; + startButton.destroy(); + ball.body.velocity.set(150, -150); + playing = true; } ``` @@ -72,11 +81,11 @@ Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aú ```js function update() { - game.physics.arcade.collide(ball, paddle, ballHitPaddle); - game.physics.arcade.collide(ball, bricks, ballHitBrick); - if(playing) { - paddle.x = game.input.x || game.world.width*0.5; - } + game.physics.arcade.collide(ball, paddle, ballHitPaddle); + game.physics.arcade.collide(ball, bricks, ballHitBrick); + if (playing) { + paddle.x = game.input.x || game.world.width * 0.5; + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md index 8c09010863236d..026ba55d35c528 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md @@ -17,9 +17,9 @@ El motor de físicas hace que todo sea mucho más fácil - solo necesitamos agre ```js function update() { - game.physics.arcade.collide(ball, paddle); - game.physics.arcade.collide(ball, bricks, ballHitBrick); - paddle.x = game.input.x || game.world.width*0.5; + game.physics.arcade.collide(ball, paddle); + game.physics.arcade.collide(ball, bricks, ballHitBrick); + paddle.x = game.input.x || game.world.width * 0.5; } ``` @@ -27,7 +27,7 @@ La posición de la bola se calcula contra las posiciones de todos los ladrillos ```js function ballHitBrick(ball, brick) { - brick.kill(); + brick.kill(); } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index 876379ddad5b7f..56caae408f0c6a 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -28,9 +28,17 @@ Estas almacenarán las vidas, el texto que muestra el número de vidas restante, Definir los textos es parecido a algo que ya hicimos en la lección de la [puntuación](/es/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score). Añade las siguientes líneas debajo de la definición de `scoreText` dentro de la función `create()`: ```js -livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' }); -livesText.anchor.set(1,0); -lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' }); +livesText = game.add.text(game.world.width - 5, 5, "Lives: " + lives, { + font: "18px Arial", + fill: "#0095DD", +}); +livesText.anchor.set(1, 0); +lifeLostText = game.add.text( + game.world.width * 0.5, + game.world.height * 0.5, + "Life lost, click to continue", + { font: "18px Arial", fill: "#0095DD" }, +); lifeLostText.anchor.set(0.5); lifeLostText.visible = false; ``` @@ -44,16 +52,26 @@ El texto `lifeLostText` se mostrará solamente cuando se pierda la vida, así qu Cómo probablemente hayas notado, estamos usando el mismo estilo para los tres textos: `scoreText`, `livesText` y `lifeLostText`. Si quisiéramos cambiar el tamaño de la fuente o el color tendríamos que hacerlo en muchos lugares. Para hacer eso más fácil de mantener en el futuro podemos crear una variable separada que almacenará nuestro estilo, la llamaremos `textStyle` y la colocaremos después de las definiciones de los textos: ```js -textStyle = { font: '18px Arial', fill: '#0095DD' }; +textStyle = { font: "18px Arial", fill: "#0095DD" }; ``` Ahora podemos usar esta variable para dar estilo a nuestros textos — actualiza tú código para que cada una de las múltiples instancias de estilo de tú texto sean reemplazadas por la variable: ```js -scoreText = game.add.text(5, 5, 'Points: 0', textStyle); -livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle); -livesText.anchor.set(1,0); -lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle); +scoreText = game.add.text(5, 5, "Points: 0", textStyle); +livesText = game.add.text( + game.world.width - 5, + 5, + "Lives: " + lives, + textStyle, +); +livesText.anchor.set(1, 0); +lifeLostText = game.add.text( + game.world.width * 0.5, + game.world.height * 0.5, + "Life lost, click to continue", + textStyle, +); lifeLostText.anchor.set(0.5); lifeLostText.visible = false; ``` @@ -65,9 +83,9 @@ De esta manera cambiando la fuente en una variable aplicará los cambios en todo Para implementar las vidas en nuestro juego, primero cambiaremos la función de bote de la pelota por el evento `onOutOfBounds`.En lugar de ejecutar una función anónima y mostrar un mensaje de alerta : ```js -ball.events.onOutOfBounds.add(function(){ - alert('Game over!'); - location.reload(); +ball.events.onOutOfBounds.add(function () { + alert("Game over!"); + location.reload(); }, this); ``` @@ -81,21 +99,20 @@ Queremos decrementar el número de vidas cada vez que la pelota abandone el lien ```js function ballLeaveScreen() { - lives--; - if(lives) { - livesText.setText('Lives: '+lives); - lifeLostText.visible = true; - ball.reset(game.world.width*0.5, game.world.height-25); - paddle.reset(game.world.width*0.5, game.world.height-5); - game.input.onDown.addOnce(function(){ - lifeLostText.visible = false; - ball.body.velocity.set(150, -150); - }, this); - } - else { - alert('You lost, game over!'); - location.reload(); - } + lives--; + if (lives) { + livesText.setText("Lives: " + lives); + lifeLostText.visible = true; + ball.reset(game.world.width * 0.5, game.world.height - 25); + paddle.reset(game.world.width * 0.5, game.world.height - 5); + game.input.onDown.addOnce(function () { + lifeLostText.visible = false; + ball.body.velocity.set(150, -150); + }, this); + } else { + alert("You lost, game over!"); + location.reload(); + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.md index 0cb4c91dd15a66..a3a42c30d86613 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.md @@ -23,9 +23,9 @@ Esto hará que a las tres paredes(arriba, izquierda y derecha) les rebote la bol ```js ball.checkWorldBounds = true; -ball.events.onOutOfBounds.add(function(){ - alert('Game over!'); - location.reload(); +ball.events.onOutOfBounds.add(function () { + alert("Game over!"); + location.reload(); }, this); ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md index 947aa6ecc37a96..bb57ea0057c364 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md @@ -16,24 +16,31 @@ Antes de que podamos comenzar a escribir la funcionalidad del juego, necesitamos La estructura del elemento HTML es bastante simple, ya que el juego va ser renderizado por completo en el elemento {{htmlelement("canvas")}} generado por el framework. Utilizando su editor de texto favorito, cree un nuevo documento HTML, guárdelo como `index.html`, en una ubicación sensata y agregue el siguiente código: ```html -<!DOCTYPE html> +<!doctype html> <html> -<head> + <head> <meta charset="utf-8" /> <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework - + - - - - + + + + ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md index 371caaa33355d8..1be54cf19e9984 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.md @@ -17,8 +17,8 @@ Tenemos a nuestra pelota azul pintada en la pantalla, pero sin hacer nada — Es ```js function update() { - ball.x += 1; - ball.y += 1; + ball.x += 1; + ball.y += 1; } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.md index a7267dcae248ab..979f2d0cfe8426 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.md @@ -17,9 +17,9 @@ Hay un objeto especial `scale` disponible en Phaser con algunos métodos prácti ```js function preload() { - game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; - game.scale.pageAlignHorizontally = true; - game.scale.pageAlignVertically = true; + game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; + game.scale.pageAlignHorizontally = true; + game.scale.pageAlignVertically = true; } ``` @@ -38,7 +38,7 @@ Las otras dos lineas de código en la función `preload()` son responsables de a También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto `stage` tiene una propiedad `backgroundColor` para este propósito, que podemos establecer usando la sintaxis de definición de color de CSS. Agregue la siguiente línea debajo de las otras tres que agregó anteriormente: ```js -game.stage.backgroundColor = '#eee'; +game.stage.backgroundColor = "#eee"; ``` ## Compara tu código diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.md index a7a6c6c60fcf56..b012ac99303f4a 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.md @@ -28,7 +28,10 @@ var score = 0; Ahora añade esta línea al final de la función `create()`: ```js -scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' }); +scoreText = game.add.text(5, 5, "Points: 0", { + font: "18px Arial", + fill: "#0095DD", +}); ``` El método `text()` puede tomar cuatro parámetros: @@ -45,9 +48,9 @@ Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrill ```js function ballHitBrick(ball, brick) { - brick.kill(); - score += 10; - scoreText.setText('Points: '+score); + brick.kill(); + score += 10; + scoreText.setText("Points: " + score); } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md index df6aa4a4365d7e..6220350b9c6c8c 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md +++ b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.md @@ -17,20 +17,20 @@ Añade el siguiente código a la función `ballHitBrick()`: ```js function ballHitBrick(ball, brick) { - brick.kill(); - score += 10; - scoreText.setText('Points: '+score); - - var count_alive = 0; - for (i = 0; i < bricks.children.length; i++) { - if (bricks.children[i].alive == true) { - count_alive++; - } - } - if (count_alive == 0) { - alert('You won the game, congratulations!'); - location.reload(); + brick.kill(); + score += 10; + scoreText.setText("Points: " + score); + + var count_alive = 0; + for (i = 0; i < bricks.children.length; i++) { + if (bricks.children[i].alive == true) { + count_alive++; } + } + if (count_alive == 0) { + alert("You won the game, congratulations!"); + location.reload(); + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index 3107fe33eb5ea0..98ddb3f5114535 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -25,7 +25,7 @@ var ballRadius = 10; Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto: ```js -ctx.arc(x, y, ballRadius, 0, Math.PI*2); +ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ``` ### Rebotando arriba y abajo @@ -33,8 +33,8 @@ ctx.arc(x, y, ballRadius, 0, Math.PI*2); Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto: ```js -if(y + dy < 0) { - dy = -dy; +if (y + dy < 0) { + dy = -dy; } ``` @@ -43,8 +43,8 @@ Si el valor de y de la posición de la bola es menor que cero, cambie la direcci El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior: ```js -if(y + dy > canvas.height) { - dy = -dy; +if (y + dy > canvas.height) { + dy = -dy; } ``` @@ -53,8 +53,8 @@ Si la posición y de la pelota es mayor que la altura del canvas (recuerde que c Podríamos fusionar esas dos sentencias en una para ahorrar código: ```js -if(y + dy > canvas.height || y + dy < 0) { - dy = -dy; +if (y + dy > canvas.height || y + dy < 0) { + dy = -dy; } ``` @@ -65,12 +65,12 @@ Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y: ```js -if(x + dx > canvas.width || x + dx < 0) { - dx = -dx; +if (x + dx > canvas.width || x + dx < 0) { + dx = -dx; } -if(y + dy > canvas.height || y + dy < 0) { - dy = -dy; +if (y + dy > canvas.height || y + dy < 0) { + dy = -dy; } ``` @@ -85,11 +85,11 @@ Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos u Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto: ```js -if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { - dx = -dx; +if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { + dx = -dx; } -if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { - dy = -dy; +if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { + dy = -dy; } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 2e846e9988bda6..2500ea8009146a 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -32,11 +32,11 @@ Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las co ```js var bricks = []; -for(c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - } - } + for (c = 0; c < brickColumnCount; c++) { + for (r = 0; r < brickRowCount; r++) { + var b = bricks[c][r]; + if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) { + dy = -dy; + } } + } } ``` @@ -59,11 +59,11 @@ El código anterior funcionará correctamente y la bola cambiará de dirección. ```js var bricks = []; -for(c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - b.status = 0; - } - } + for (c = 0; c < brickColumnCount; c++) { + for (r = 0; r < brickRowCount; r++) { + var b = bricks[c][r]; + if (b.status == 1) { + if ( + x > b.x && + x < b.x + brickWidth && + y > b.y && + y < b.y + brickHeight + ) { + dy = -dy; + b.status = 0; } + } } + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 2667a2ae0fdb2c..5324013cecf988 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -17,25 +17,30 @@ Antes de que podamos programar la parte funcional del juego, necesitamos crear l La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como `index.html` en un lugar adecuado, y escribe el siguiente código: ```html - + - + Gamedev Canvas Workshop - - - - - - - - + + + + + + ``` @@ -68,7 +73,7 @@ Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de c ```js ctx.beginPath(); -ctx.arc(240, 160, 20, 0, Math.PI*2, false); +ctx.arc(240, 160, 20, 0, Math.PI * 2, false); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index bec8b97cdd9b00..0c8b25359a5018 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -24,9 +24,9 @@ Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar ```js function drawLives() { - ctx.font = "16px Arial"; - ctx.fillStyle = "#0095DD"; - ctx.fillText("Lives: "+lives, canvas.width-65, 20); + ctx.font = "16px Arial"; + ctx.fillStyle = "#0095DD"; + ctx.fillText("Lives: " + lives, canvas.width - 65, 20); } ``` @@ -41,16 +41,15 @@ document.location.reload(); ```js lives--; -if(!lives) { - alert("GAME OVER"); - document.location.reload(); -} -else { - x = canvas.width/2; - y = canvas.height-30; - dx = 2; - dy = -2; - paddleX = (canvas.width-paddleWidth)/2; +if (!lives) { + alert("GAME OVER"); + document.location.reload(); +} else { + x = canvas.width / 2; + y = canvas.height - 30; + dx = 2; + dy = -2; + paddleX = (canvas.width - paddleWidth) / 2; } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index 7e13cb32cd6277..19c215828c10c9 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -17,23 +17,23 @@ Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala p Intentemos implementar el final del juego en nuestro juego.Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes: ```js -if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { - dx = -dx; +if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { + dx = -dx; } -if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { - dy = -dy; +if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { + dy = -dy; } ``` En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así: ```js -if(y + dy < ballRadius) { - dy = -dy; -} else if(y + dy > canvas.height-ballRadius) { - alert("GAME OVER"); - document.location.reload(); +if (y + dy < ballRadius) { + dy = -dy; +} else if (y + dy > canvas.height - ballRadius) { + alert("GAME OVER"); + document.location.reload(); } ``` @@ -42,16 +42,15 @@ if(y + dy < ballRadius) { Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así: ```js -if(y + dy < ballRadius) { +if (y + dy < ballRadius) { + dy = -dy; +} else if (y + dy > canvas.height - ballRadius) { + if (x > paddleX && x < paddleX + paddleWidth) { dy = -dy; -} else if(y + dy > canvas.height-ballRadius) { - if(x > paddleX && x < paddleX + paddleWidth) { - dy = -dy; - } - else { - alert("GAME OVER"); - document.location.reload(); - } + } else { + alert("GAME OVER"); + document.location.reload(); + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 2125cdb5577bb6..052756a341d796 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -26,10 +26,10 @@ Podemos cambiar la posición de la pala basándonos en las coordenadas del punte ```js function mouseMoveHandler(e) { - var relativeX = e.clientX - canvas.offsetLeft; - if(relativeX > 0 && relativeX < canvas.width) { - paddleX = relativeX - paddleWidth/2; - } + var relativeX = e.clientX - canvas.offsetLeft; + if (relativeX > 0 && relativeX < canvas.width) { + paddleX = relativeX - paddleWidth / 2; + } } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 1e48c8ccfcbf7d..36ace43245c42a 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -20,7 +20,7 @@ Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, ```js function draw() { - // código para dibujar + // código para dibujar } setInterval(draw, 10); ``` @@ -29,7 +29,7 @@ Gracias a la naturaleza infinita de setInterval, la función draw () se llamará ```js ctx.beginPath(); -ctx.arc(50, 50, 10, 0, Math.PI*2); +ctx.arc(50, 50, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); @@ -44,19 +44,19 @@ Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y: ```js -var x = canvas.width/2; -var y = canvas.height-30; +var x = canvas.width / 2; +var y = canvas.height - 30; ``` A continuación actualiza la función `draw()` para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada: ```js function draw() { - ctx.beginPath(); - ctx.arc(x, y, 10, 0, Math.PI*2); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); + ctx.beginPath(); + ctx.arc(x, y, 10, 0, Math.PI * 2); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); } ``` @@ -71,13 +71,13 @@ Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy ```js function draw() { - ctx.beginPath(); - ctx.arc(x, y, 10, 0, Math.PI*2); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); - x += dx; - y += dy; + ctx.beginPath(); + ctx.arc(x, y, 10, 0, Math.PI * 2); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); + x += dx; + y += dy; } ``` @@ -93,14 +93,14 @@ Añade la siguiente nueva línea resaltada a la función draw(): ```js function draw() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.beginPath(); - ctx.arc(x, y, 10, 0, Math.PI*2); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); - x += dx; - y += dy; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.beginPath(); + ctx.arc(x, y, 10, 0, Math.PI * 2); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); + x += dx; + y += dy; } ``` @@ -114,18 +114,18 @@ Reemplaza la función draw() con las dos funciones siguientes: ```js function drawBall() { - ctx.beginPath(); - ctx.arc(x, y, 10, 0, Math.PI*2); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); + ctx.beginPath(); + ctx.arc(x, y, 10, 0, Math.PI * 2); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); } function draw() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - drawBall(); - x += dx; - y += dy; + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawBall(); + x += dx; + y += dy; } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index e0e04b35b56b09..0f25b59c970b3e 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -19,18 +19,18 @@ Necesitamos una paleta para golpear la bola. Empezamos por definir variables par ```js var paddleHeight = 10; var paddleWidth = 75; -var paddleX = (canvas.width-paddleWidth)/2; +var paddleX = (canvas.width - paddleWidth) / 2; ``` paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función `drawBall()`: ```js function drawPaddle() { - ctx.beginPath(); - ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); - ctx.fillStyle = "#0095DD"; - ctx.fill(); - ctx.closePath(); + ctx.beginPath(); + ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); + ctx.fillStyle = "#0095DD"; + ctx.fill(); + ctx.closePath(); } ``` @@ -61,21 +61,19 @@ Cuando ocurra el evento `keydown` al pulsar cualquier tecla del teclado, la func ```js function keyDownHandler(e) { - if(e.keyCode == 39) { - rightPressed = true; - } - else if(e.keyCode == 37) { - leftPressed = true; - } + if (e.keyCode == 39) { + rightPressed = true; + } else if (e.keyCode == 37) { + leftPressed = true; + } } function keyUpHandler(e) { - if(e.keyCode == 39) { - rightPressed = false; - } - else if(e.keyCode == 37) { - leftPressed = false; - } + if (e.keyCode == 39) { + rightPressed = false; + } else if (e.keyCode == 37) { + leftPressed = false; + } } ``` @@ -92,22 +90,20 @@ De igual forma procederá el programa con la "flecha derecha", detectando el có Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función `draw()` comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto: ```js -if(rightPressed) { - paddleX += 7; -} -else if(leftPressed) { - paddleX -= 7; +if (rightPressed) { + paddleX += 7; +} else if (leftPressed) { + paddleX -= 7; } ``` Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así: ```js -if(rightPressed && paddleX < canvas.width-paddleWidth) { - paddleX += 7; -} -else if(leftPressed && paddleX > 0) { - paddleX -= 7; +if (rightPressed && paddleX < canvas.width - paddleWidth) { + paddleX += 7; +} else if (leftPressed && paddleX > 0) { + paddleX -= 7; } ``` diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index 5f2f53d7320066..04f96b6134b3ef 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -24,9 +24,9 @@ También necesitas una función `drawScore()` para enseñar el contador por pant ```js function drawScore() { - ctx.font = "16px Arial"; - ctx.fillStyle = "#0095DD"; - ctx.fillText("Score: "+score, 8, 20); + ctx.font = "16px Arial"; + ctx.fillStyle = "#0095DD"; + ctx.fillText("Score: " + score, 8, 20); } ``` @@ -36,18 +36,23 @@ Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que est ```js function collisionDetection() { - for(c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - b.status = 0; - score++; - } - } + for (c = 0; c < brickColumnCount; c++) { + for (r = 0; r < brickRowCount; r++) { + var b = bricks[c][r]; + if (b.status == 1) { + if ( + x > b.x && + x < b.x + brickWidth && + y > b.y && + y < b.y + brickHeight + ) { + dy = -dy; + b.status = 0; + score++; } + } } + } } ``` @@ -63,22 +68,27 @@ Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no que ```js function collisionDetection() { - for(c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { - dy = -dy; - b.status = 0; - score++; - if(score == brickRowCount*brickColumnCount) { - alert("YOU WIN, CONGRATULATIONS!"); - document.location.reload(); - } - } - } + for (c = 0; c < brickColumnCount; c++) { + for (r = 0; r < brickRowCount; r++) { + var b = bricks[c][r]; + if (b.status == 1) { + if ( + x > b.x && + x < b.x + brickWidth && + y > b.y && + y < b.y + brickHeight + ) { + dy = -dy; + b.status = 0; + score++; + if (score == brickRowCount * brickColumnCount) { + alert("YOU WIN, CONGRATULATIONS!"); + document.location.reload(); + } } + } } + } } ``` diff --git a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index b811ecf225dd83..5ae50fcbe66a7a 100644 --- a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -1,5 +1,6 @@ --- -title: Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de Orientación +title: + Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de Orientación a Dispositivos slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation @@ -46,43 +47,48 @@ Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar e Vamos a renderizar nuestro juego sobre el elemento ``, pero no lo haremos manualmente — de esto se ocupará el _framework._ Vamos a configurarlo: nuestro punto de partida es el archivo `index.html` con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado: ```html - + - + Cyber Orb - + - - - - + + + + ``` Hasta ahora tenemos una simple página web `HTML` con el contenido básico en la sección ``: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El `` contiene la inicialización del framework Phaser y las definiciones del estado del juego. ```js -var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game'); +var game = new Phaser.Game(320, 480, Phaser.CANVAS, "game"); ``` La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del ``, su altura, el método de renderizado (estamos utilizando `CANVAS` pero también existen disponibles las opciones `WEBGL` y `AUTO`) y el ID opcional del contenedor DOM en el que queremos poner el ``. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el `` será añadido a la etiqueta ``. Sin el _framework_ para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta ``: ```html - + ``` Es importante recordar que el _framework_ está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente. @@ -92,7 +98,7 @@ Es importante recordar que el _framework_ está montando métodos útiles para a Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado `Boot`: ```js -game.state.add('Boot', Ball.Boot); +game.state.add("Boot", Ball.Boot); ``` El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo `start` está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente. @@ -107,21 +113,21 @@ El estado `Boot` es el primero en el juego. ```js var Ball = { - _WIDTH: 320, - _HEIGHT: 480 + _WIDTH: 320, + _HEIGHT: 480, }; -Ball.Boot = function(game) {}; +Ball.Boot = function (game) {}; Ball.Boot.prototype = { - preload: function() { - this.load.image('preloaderBg', 'img/loading-bg.png'); - this.load.image('preloaderBar', 'img/loading-bar.png'); - }, - create: function() { - this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; - this.game.scale.pageAlignHorizontally = true; - this.game.scale.pageAlignVertically = true; - this.game.state.start('Preloader'); - } + preload: function () { + this.load.image("preloaderBg", "img/loading-bg.png"); + this.load.image("preloaderBar", "img/loading-bar.png"); + }, + create: function () { + this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; + this.game.scale.pageAlignHorizontally = true; + this.game.scale.pageAlignVertically = true; + this.game.state.start("Preloader"); + }, }; ``` @@ -132,22 +138,34 @@ El objeto principal `Ball` es definido y estamos añadiendo dos variables llamad El estado `Preloader` se ocupa de cargar todos los elementos: ```js -Ball.Preloader = function(game) {}; +Ball.Preloader = function (game) {}; Ball.Preloader.prototype = { - preload: function() { - this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg'); - this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar'); - this.load.setPreloadSprite(this.preloadBar); - - this.load.image('ball', 'img/ball.png'); - // ... - this.load.spritesheet('button-start', 'img/button-start.png', 146, 51); - // ... - this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']); - }, - create: function() { - this.game.state.start('MainMenu'); - } + preload: function () { + this.preloadBg = this.add.sprite( + (Ball._WIDTH - 297) * 0.5, + (Ball._HEIGHT - 145) * 0.5, + "preloaderBg", + ); + this.preloadBar = this.add.sprite( + (Ball._WIDTH - 158) * 0.5, + (Ball._HEIGHT - 50) * 0.5, + "preloaderBar", + ); + this.load.setPreloadSprite(this.preloadBar); + + this.load.image("ball", "img/ball.png"); + // ... + this.load.spritesheet("button-start", "img/button-start.png", 146, 51); + // ... + this.load.audio("audio-bounce", [ + "audio/bounce.ogg", + "audio/bounce.mp3", + "audio/bounce.m4a", + ]); + }, + create: function () { + this.game.state.start("MainMenu"); + }, }; ``` @@ -169,15 +187,20 @@ Cuando el boton de inicio es presionado, en lugar de saltar directamente a la ac ### Howto.js ```js -Ball.Howto = function(game) { -}; +Ball.Howto = function (game) {}; Ball.Howto.prototype = { - create: function() { - this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this); - }, - startGame: function() { - this.game.state.start('Game'); - } + create: function () { + this.buttonContinue = this.add.button( + 0, + 0, + "screen-howtoplay", + this.startGame, + this, + ); + }, + startGame: function () { + this.game.state.start("Game"); + }, }; ``` @@ -188,18 +211,18 @@ El estado `Howto` muesta las intrucciones de juego en la pantalla antes de comen El estado `Game` del archivo `Game.js` es donde ocurre toda la magia. Todas las inicializaciones estan en la función `create()` (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función `update()` que es ejecutada en cada _frame_ y actualiza cosas como la posición de la pelota. ```js -Ball.Game = function(game) {}; +Ball.Game = function (game) {}; Ball.Game.prototype = { - create: function() {}, - initLevels: function() {}, - showLevel: function(level) {}, - updateCounter: function() {}, - managePause: function() {}, - manageAudio: function() {}, - update: function() {}, - wallCollision: function() {}, - handleOrientation: function(e) {}, - finishLevel: function() {} + create: function () {}, + initLevels: function () {}, + showLevel: function (level) {}, + updateCounter: function () {}, + managePause: function () {}, + manageAudio: function () {}, + update: function () {}, + wallCollision: function () {}, + handleOrientation: function (e) {}, + finishLevel: function () {}, }; ``` @@ -219,7 +242,7 @@ Las funciones `create` y `update` son específicas del _framework_, mientras que Primero vamos a ir a la función `create()`, inicializamos el objeto `ball` y le asignamos unas cuantas propiedades: ```js -this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball'); +this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, "ball"); this.ball.anchor.set(0.5); this.physics.enable(this.ball, Phaser.Physics.ARCADE); this.ball.body.setSize(18, 18); @@ -241,17 +264,15 @@ Como puedes ver, hay una función especial de Phaser llamada `createCursorKeys() A continuación añadiremos el siguiente código a la función `update()`, para que sea ejecutado en cada _frame_. El objeto `this.keys` será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida: ```js -if(this.keys.left.isDown) { - this.ball.body.velocity.x -= this.movementForce; -} -else if(this.keys.right.isDown) { - this.ball.body.velocity.x += this.movementForce; -} -if(this.keys.up.isDown) { - this.ball.body.velocity.y -= this.movementForce; +if (this.keys.left.isDown) { + this.ball.body.velocity.x -= this.movementForce; +} else if (this.keys.right.isDown) { + this.ball.body.velocity.x += this.movementForce; } -else if(this.keys.down.isDown) { - this.ball.body.velocity.y += this.movementForce; +if (this.keys.up.isDown) { + this.ball.body.velocity.y -= this.movementForce; +} else if (this.keys.down.isDown) { + this.ball.body.velocity.y += this.movementForce; } ``` @@ -287,7 +308,7 @@ Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la ve El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función `create()` de nuestro estado `Game`: ```js -this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole'); +this.hole = this.add.sprite(Ball._WIDTH * 0.5, 90, "hole"); this.physics.enable(this.hole, Phaser.Physics.ARCADE); this.hole.anchor.set(0.5); this.hole.body.setSize(2, 2); @@ -303,32 +324,30 @@ Para contener el bloque de información usaremos un _array_ con los datos de niv ```js this.levelData = [ - [ - { x: 96, y: 224, t: 'w' } - ], - [ - { x: 72, y: 320, t: 'w' }, - { x: 200, y: 320, t: 'h' }, - { x: 72, y: 150, t: 'w' } - ], - // ... + [{ x: 96, y: 224, t: "w" }], + [ + { x: 72, y: 320, t: "w" }, + { x: 200, y: 320, t: "h" }, + { x: 72, y: 150, t: "w" }, + ], + // ... ]; ``` Todos los elementos del _array_ contienen una colección de bloques con una posición `x` e `y` y un valor `t` para cada uno. Luego de `levelData` pero dentro de la función `initLevels`, añadiremos los bloques dentro de un _array_ en el loop `for` usando algunos de los métodos específicos del _framework_: ```js -for(var i=0; i) on Wikipedia diff --git a/files/es/glossary/apple_safari/index.md b/files/es/glossary/apple_safari/index.md index da0e327133ee3e..5b90a6df5bd6b0 100644 --- a/files/es/glossary/apple_safari/index.md +++ b/files/es/glossary/apple_safari/index.md @@ -9,7 +9,7 @@ slug: Glossary/Apple_Safari ### Conocimiento general -- [Safari](https://es.wikipedia.org/wiki/Safari_(web_browser)) en Wikipedia +- [Safari]() en Wikipedia - [Safari en apple.com](http://www.apple.com/safari/) ### Información técnica diff --git a/files/es/glossary/argument/index.md b/files/es/glossary/argument/index.md index d7bee46329b230..2d1e1a42606ffc 100644 --- a/files/es/glossary/argument/index.md +++ b/files/es/glossary/argument/index.md @@ -10,7 +10,7 @@ Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}}, {{G ### Conocimiento general -- [Diferencia entre Parámetro y Argumento](https://en.wikipedia.org/wiki/Parameter_(computer_programming)) en Wikipedia. +- [Diferencia entre Parámetro y Argumento]() en Wikipedia. ### Referencia técnica diff --git a/files/es/glossary/base64/index.md b/files/es/glossary/base64/index.md index 79717d9ac51039..9ec1592925d824 100644 --- a/files/es/glossary/base64/index.md +++ b/files/es/glossary/base64/index.md @@ -18,6 +18,7 @@ La función `atob()` decodifica una cadena de datos que ha sido codificada usand Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con [ArrayBuffers](/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer), lea [este párrafo](/es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8). - [`data` URIs](/es/docs/data_URIs) + - Los URIs de `data`, definidos por [RFC 2397](https://tools.ietf.org/html/rfc2397), permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos. - [Base64](https://es.wikipedia.org/wiki/Base64) @@ -76,17 +77,17 @@ Aquí están los dos posibles métodos: ### Solución 1 – escapar la cadena antes de codificarla ```js -function utf8_to_b64( str ) { - return window.btoa(unescape(encodeURIComponent( str ))); +function utf8_to_b64(str) { + return window.btoa(unescape(encodeURIComponent(str))); } -function b64_to_utf8( str ) { - return decodeURIComponent(escape(window.atob( str ))); +function b64_to_utf8(str) { + return decodeURIComponent(escape(window.atob(str))); } // Uso: -utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" +utf8_to_b64("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU=" +b64_to_utf8("4pyTIMOgIGxhIG1vZGU="); // "✓ à la mode" ``` Esta solución ha sido propuesta por [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html). @@ -95,11 +96,13 @@ Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsol ```js function b64EncodeUnicode(str) { - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { - return String.fromCharCode('0x' + p1); - })); + return btoa( + encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) { + return String.fromCharCode("0x" + p1); + }), + ); } - b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" +b64EncodeUnicode("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU=" ``` ### Solución 2 – reescribir `atob()` y `btoa()` usando `TypedArray`s y UTF-8 @@ -119,38 +122,40 @@ function b64EncodeUnicode(str) { /* Decodificación de cadena base64 en array de bytes */ -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - +function b64ToUint6(nChr) { + return nChr > 64 && nChr < 91 + ? nChr - 65 + : nChr > 96 && nChr < 123 + ? nChr - 71 + : nChr > 47 && nChr < 58 + ? nChr + 4 + : nChr === 43 + ? 62 + : nChr === 47 + ? 63 + : 0; } -function base64DecToArr (sBase64, nBlocksSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { +function base64DecToArr(sBase64, nBlocksSize) { + var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), + nInLen = sB64Enc.length, + nOutLen = nBlocksSize + ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize + : (nInLen * 3 + 1) >> 2, + taBytes = new Uint8Array(nOutLen); + + for ( + var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; + nInIdx < nInLen; + nInIdx++ + ) { nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; + nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (18 - 6 * nMod4); if (nMod4 === 3 || nInLen - nInIdx === 1) { for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; + taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255; } nUint24 = 0; - } } @@ -159,79 +164,114 @@ function base64DecToArr (sBase64, nBlocksSize) { /* Codificación de array en una cadena Base64 */ -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - +function uint6ToB64(nUint6) { + return nUint6 < 26 + ? nUint6 + 65 + : nUint6 < 52 + ? nUint6 + 71 + : nUint6 < 62 + ? nUint6 - 4 + : nUint6 === 62 + ? 43 + : nUint6 === 63 + ? 47 + : 65; } -function base64EncArr (aBytes) { - - var nMod3 = 2, sB64Enc = ""; +function base64EncArr(aBytes) { + var nMod3 = 2, + sB64Enc = ""; for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { nMod3 = nIdx % 3; - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); + if (nIdx > 0 && ((nIdx * 4) / 3) % 76 === 0) { + sB64Enc += "\r\n"; + } + nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24); if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); + sB64Enc += String.fromCharCode( + uint6ToB64((nUint24 >>> 18) & 63), + uint6ToB64((nUint24 >>> 12) & 63), + uint6ToB64((nUint24 >>> 6) & 63), + uint6ToB64(nUint24 & 63), + ); nUint24 = 0; } } - return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '=='); - + return ( + sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + + (nMod3 === 2 ? "" : nMod3 === 1 ? "=" : "==") + ); } /* De array UTF-8 a DOMString y viceversa */ -function UTF8ArrToStr (aBytes) { - +function UTF8ArrToStr(aBytes) { var sView = ""; for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { nPart = aBytes[nIdx]; sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart + nPart > 251 && nPart < 254 && nIdx + 5 < nLen /* six bytes */ + ? /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */ + (nPart - 252) * 1073741824 + + ((aBytes[++nIdx] - 128) << 24) + + ((aBytes[++nIdx] - 128) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */ + ? ((nPart - 248) << 24) + + ((aBytes[++nIdx] - 128) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */ + ? ((nPart - 240) << 18) + + ((aBytes[++nIdx] - 128) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */ + ? ((nPart - 224) << 12) + + ((aBytes[++nIdx] - 128) << 6) + + aBytes[++nIdx] - + 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */ + ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* one byte */ + nPart, ); } return sView; - } -function strToUTF8Arr (sDOMStr) { - - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; +function strToUTF8Arr(sDOMStr) { + var aBytes, + nChr, + nStrLen = sDOMStr.length, + nArrLen = 0; /* mapeando... */ for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; + nArrLen += + nChr < 0x80 + ? 1 + : nChr < 0x800 + ? 2 + : nChr < 0x10000 + ? 3 + : nChr < 0x200000 + ? 4 + : nChr < 0x4000000 + ? 5 + : 6; } aBytes = new Uint8Array(nArrLen); @@ -250,34 +290,33 @@ function strToUTF8Arr (sDOMStr) { } else if (nChr < 0x10000) { /* tres bytes */ aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); aBytes[nIdx++] = 128 + (nChr & 63); } else if (nChr < 0x200000) { /* cuatro bytes */ aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); aBytes[nIdx++] = 128 + (nChr & 63); } else if (nChr < 0x4000000) { /* cinco bytes */ aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* seis bytes */ + } else { + /* seis bytes; if (nChr <= 0x7fffffff) */ aBytes[nIdx++] = 252 + (nChr >>> 30); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63); + aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63); aBytes[nIdx++] = 128 + (nChr & 63); } } return aBytes; - } ``` @@ -306,9 +345,13 @@ alert(sMyOutput); Estas funciones nos permiten crear también [uint8Arrays](/es/docs/Web/JavaScript/Typed_arrays/Uint8Array) o [arrayBuffers](/es/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) a partir de cadenas codificadas en base 64: ```js -var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" +var myArray = base64DecToArr( + "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", +); // "Base 64 \u2014 Mozilla Developer Network" -var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" +var myBuffer = base64DecToArr( + "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==", +).buffer; // "Base 64 \u2014 Mozilla Developer Network" alert(myBuffer.byteLength); ``` diff --git a/files/es/glossary/blink/index.md b/files/es/glossary/blink/index.md index bd7ecbf727d9a0..f19100504cc623 100644 --- a/files/es/glossary/blink/index.md +++ b/files/es/glossary/blink/index.md @@ -5,7 +5,7 @@ slug: Glossary/Blink Blink es un motor de renderizado para [navegadores](/es/docs/Glossary/Browser) de código abierto desarrollado por Google, que forma parte de Chromium (y por lo tanto también de [Chrome](/es/docs/Glossary/Google_Chrome)). Concretamente, Blink es una copia de la librería WebCore de [WebKit](/es/docs/Glossary/WebKit), que se encarga del diseño, renderizado, y del [DOM](/es/docs/Glossary/DOM). -## Para saber más... +## Para saber más ### Cultura General diff --git a/files/es/glossary/block-level_content/index.md b/files/es/glossary/block-level_content/index.md index cba3d5ae5605e5..36f198788bab50 100644 --- a/files/es/glossary/block-level_content/index.md +++ b/files/es/glossary/block-level_content/index.md @@ -13,13 +13,18 @@ Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de lí HTML ```html -

Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.

+

+ Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar + elemento principal (o padre) del párrafo. +

``` CSS ```css -p { background-color: #8ABB55; } +p { + background-color: #8abb55; +} ``` {{ EmbedLiveSample('Block-level_Example') }} @@ -62,6 +67,7 @@ La siguiente es una lista completa de todos los elementos en bloque de HTML (aun - {{ HTMLElement("dl") }} - : Lista de definición. - {{ HTMLElement("fieldset") }} + - : Etiqueta de conjunto de campos. - {{ HTMLElement("figcaption") }} @@ -85,6 +91,7 @@ La siguiente es una lista completa de todos los elementos en bloque de HTML (aun - {{ HTMLElement("main") }} - : Engloba el único contenido central del documento. - {{ HTMLElement("nav") }} + - : Contiene enlaces de navegación. - {{ HTMLElement("noscript") }} diff --git a/files/es/glossary/browser/index.md b/files/es/glossary/browser/index.md index 5df7914c008848..fd84394820becc 100644 --- a/files/es/glossary/browser/index.md +++ b/files/es/glossary/browser/index.md @@ -5,7 +5,7 @@ slug: Glossary/Browser Un _Navegador web_ es un programa o aplicación que da acceso a la [Web](/es/docs/Glossary/World_Wide_Web), y permite a los usuarios el acceso a más páginas a través de [hipervínculos](/es/docs/Glossary/Hyperlink). -## Para saber más... +## Para saber más ### Cultura general diff --git a/files/es/glossary/browsing_context/index.md b/files/es/glossary/browsing_context/index.md index 3a86d2c1b0df11..6e3aa791975725 100644 --- a/files/es/glossary/browsing_context/index.md +++ b/files/es/glossary/browsing_context/index.md @@ -9,11 +9,11 @@ Cada contexto de navegación tiene un {{glossary("origen")}} específico, el ori La comunicación entre contextos de navegación está severamente restringida. Entre un contexto de navegación del mismo origen, se puede abrir y utilizar un {{domxref("BroadcastChannel")}}}. -## Aprende más... +## Aprende más ### Referencia técnica - [Browsing context on WHATWG](https://html.spec.whatwg.org/multipage/browsers.html#windows) - [Browsing context on W3C](http://w3c.github.io/html/browsers.html#sec-browsing-contexts) -{{QuickLinksWithSubpages("/en-US/docs/Glossary")}} +{{QuickLinksWithSubpages("/es/docs/Glossary")}} diff --git a/files/es/glossary/call_stack/index.md b/files/es/glossary/call_stack/index.md index 93c5ebe1539396..31ed7be249a213 100644 --- a/files/es/glossary/call_stack/index.md +++ b/files/es/glossary/call_stack/index.md @@ -15,12 +15,12 @@ Una **pila de llamadas** es un mecanismo para que un intérprete (como el intér ```js function saludar() { - // [1] Código - diHola(); - // [2] Código + // [1] Código + diHola(); + // [2] Código } function diHola() { - return "!Hola!"; + return "!Hola!"; } // Invocar la función `saludar` @@ -34,23 +34,23 @@ El código del ejemplo se ejecutaría de la siguiente manera: 1. Ignora todas las funciones hasta que alcanza la invocación de la función `saludar()`. 2. Añade la función `saludar()` a la lista de la pila de llamadas. - > **Nota:** Lista de la pila de llamadas: - > \- saludar + > **Nota:** Lista de la pila de llamadas: + > \- saludar 3. Ejecuta todas las líneas de código de dentro de la función `saludar()`. 4. Llega a la incovación de la función `diHola()`. 5. Añade la función `diHola()` a la lista de la pila de llamadas. - > **Nota:** Lista de la pila de llamadas: - > \- saludar - > \- diHola + > **Nota:** Lista de la pila de llamadas: + > \- saludar + > \- diHola 6. Ejecuta todas las líneas de código de dentro de la función `diHola()` hasta que llega al final. 7. Devuelve la ejecución a la línea que invocó a la función `diHola()` y continua con la ejecuación del resto de código de la función `saludar()`. 8. Elimina la función `diHola()` de la lista de la pila de llamadas. - > **Nota:** Lista de la pila de llamadas: - > \- saludar + > **Nota:** Lista de la pila de llamadas: + > \- saludar 9. Cuando todo el código dentro de la función `saludar()` ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript. 10. Elimina la función `saludar()` de la lista de la pila de llamadas. diff --git a/files/es/glossary/callback_function/index.md b/files/es/glossary/callback_function/index.md index a99281ce9a7c0f..54aa1c5566dfa5 100644 --- a/files/es/glossary/callback_function/index.md +++ b/files/es/glossary/callback_function/index.md @@ -9,11 +9,11 @@ Ejemplo: ```js function saludar(nombre) { - alert('Hola ' + nombre); + alert("Hola " + nombre); } function procesarEntradaUsuario(callback) { - var nombre = prompt('Por favor ingresa tu nombre.'); + var nombre = prompt("Por favor ingresa tu nombre."); callback(nombre); } diff --git a/files/es/glossary/canvas/index.md b/files/es/glossary/canvas/index.md index 979c5dfeebb3ea..4ce0ac36a26586 100644 --- a/files/es/glossary/canvas/index.md +++ b/files/es/glossary/canvas/index.md @@ -11,7 +11,7 @@ Es a un bajo nivel, un modelo procedimental que actualiza un [mapa de bits](http ### Conocimientos básicos -- [Canvas en Wikipedia](https://es.wikipedia.org/wiki/Canvas_(HTML)) +- [Canvas en Wikipedia]() ### Inicio del temario diff --git a/files/es/glossary/character/index.md b/files/es/glossary/character/index.md index 73cf6b9574b290..089d509f5dd726 100644 --- a/files/es/glossary/character/index.md +++ b/files/es/glossary/character/index.md @@ -10,7 +10,7 @@ Un _caracter_ es un símbolo (letras, números, puntuación) o un caracter de "c ### Conocimientos generales -- [Character (informática)](https://es.wikipedia.org/wiki/Character_(informática)) en Wikipedia +- [Character (informática)]() en Wikipedia - [Character encoding](https://es.wikipedia.org/wiki/Character_encoding) en Wikipedia - [ASCII](https://es.wikipedia.org/wiki/ASCII) en Wikipedia - [UTF-8](https://es.wikipedia.org/wiki/UTF-8) en Wikipedia diff --git a/files/es/glossary/character_encoding/index.md b/files/es/glossary/character_encoding/index.md index efdd77e6688a58..95f26ebad4693f 100644 --- a/files/es/glossary/character_encoding/index.md +++ b/files/es/glossary/character_encoding/index.md @@ -8,7 +8,7 @@ Una codificación define cómo se traducen los bytes a texto y viceversa. Una se Por ejemplo, en HTML normalmente especificamos que la codificiación va a ser UTF-8 con la siguiente linea: ```html - + ``` Con esto te aseguras de que usando caracteres propios de cualquier lenguaje humano en tu documento HTML, se mostrarán de forma legible. diff --git a/files/es/glossary/closure/index.md b/files/es/glossary/closure/index.md index b992ef456c965b..a4600ddd855b6e 100644 --- a/files/es/glossary/closure/index.md +++ b/files/es/glossary/closure/index.md @@ -10,7 +10,7 @@ Una clausura o _closure_ es una función que guarda referencias del estado adyac ### Conocimiento general -- [Clausura](https://es.wikipedia.org/wiki/Clausura_(informática)) en Wikipedia +- [Clausura]() en Wikipedia ### Referencia técnica diff --git a/files/es/glossary/codec/index.md b/files/es/glossary/codec/index.md index 9d697d2dad3563..2f11863ab65265 100644 --- a/files/es/glossary/codec/index.md +++ b/files/es/glossary/codec/index.md @@ -3,7 +3,7 @@ title: Códec slug: Glossary/Codec --- -Un _códec_ (acrónimo de "***co***dificador-***dec***odificador") es un programa, algoritmo, o dispositivo que codifica o decodifica un flujo de datos. Cada códec sabe cómo tratar un estándar específico de codificado o compresión. +Un _códec_ (acrónimo de "**_co_**dificador-**_dec_**odificador") es un programa, algoritmo, o dispositivo que codifica o decodifica un flujo de datos. Cada códec sabe cómo tratar un estándar específico de codificado o compresión. ## Saber más diff --git a/files/es/glossary/compile/index.md b/files/es/glossary/compile/index.md index bc51c1d8783a6d..4aca4e6c3569de 100644 --- a/files/es/glossary/compile/index.md +++ b/files/es/glossary/compile/index.md @@ -7,7 +7,7 @@ l10n: Compilar es el proceso de transformar un programa informático escrito en un {{Glossary("computer programming", "lenguaje")}} en un conjunto de instrucciones en otro formato o lenguaje. Un **compilador** es un programa de computadora que realiza dicha tarea. -Normalmente, un compilador transforma código escrito en un lenguaje de alto nivel como [C++](https://es.wikipedia.org/wiki/C++), [Rust](https://es.wikipedia.org/wiki/Rust_(lenguaje_de_programaci%C3%B3n)) o [Java](https://es.wikipedia.org/wiki/Java_(lenguaje_de_programaci%C3%B3n)) en código ejecutable — llamado **código binario** o **código máquina**. [WebAssembly](/es/docs/WebAssembly), por ejemplo, es una forma de código binario ejecutable que [puede ser compilado desde código escrito en C++, Rust, C#, Go, Swift y muchos otros lenguajes](https://webassembly.org/getting-started/developers-guide/) y luego puede ser ejecutado en cualquier página web de cualquier navegador. +Normalmente, un compilador transforma código escrito en un lenguaje de alto nivel como [C++](https://es.wikipedia.org/wiki/C++), [Rust]() o [Java]() en código ejecutable — llamado **código binario** o **código máquina**. [WebAssembly](/es/docs/WebAssembly), por ejemplo, es una forma de código binario ejecutable que [puede ser compilado desde código escrito en C++, Rust, C#, Go, Swift y muchos otros lenguajes](https://webassembly.org/getting-started/developers-guide/) y luego puede ser ejecutado en cualquier página web de cualquier navegador. La mayoría de los compiladores realizan compilación anticipada (ahead-of-time, AOT) o en tiempo de ejecución (just-in-time, JIT). diff --git a/files/es/glossary/constant/index.md b/files/es/glossary/constant/index.md index 0dedaec0602b15..87d28cffda51fc 100644 --- a/files/es/glossary/constant/index.md +++ b/files/es/glossary/constant/index.md @@ -12,4 +12,4 @@ Al igual que las variables, algunas constantes están unidas a identificadores. ### Conocimientos generales -- [Constante](https://es.wikipedia.org/wiki/Constante_(informática)) en Wikipedia +- [Constante]() en Wikipedia diff --git a/files/es/glossary/constructor/index.md b/files/es/glossary/constructor/index.md index d37372e670e2c5..7265487fd7fb69 100644 --- a/files/es/glossary/constructor/index.md +++ b/files/es/glossary/constructor/index.md @@ -21,8 +21,7 @@ function Overloaded(arg1, arg2, ...,argN){ Para llamar al constructor de una clase en Javascript, use el operador `new` para asignar un objeto de referencia ({{glossary("object reference")}}) a una {{glossary("variable")}}. ```js -function Default() { -} +function Default() {} // A new reference of a Default object assigned to a // local variable defaultReference @@ -33,7 +32,7 @@ var defaultReference = new Default(); ### Conocimiento general -- [Constructor](https://es.wikipedia.org/wiki/Constructor_(inform%C3%A1tica)) en Wikipedia +- [Constructor]() en Wikipedia ### Referencia técnica diff --git a/files/es/glossary/copyleft/index.md b/files/es/glossary/copyleft/index.md index 1a94299577ec1f..3a4c499a941a29 100644 --- a/files/es/glossary/copyleft/index.md +++ b/files/es/glossary/copyleft/index.md @@ -5,7 +5,7 @@ slug: Glossary/Copyleft _Copyleft_ es un término, que normalmente se refiere a una licencia, y que se utiliza para indicar que toda redistribución de un trabajo bajo esta licencia **es obligatorio** que esté sujeta a la **misma licencia** **que el original**. Un buen ejemplo de copyleft es la licencia GNU [GPL](/es/docs/Glossary/GPL) (para aplicaciones software) y la licencia _Creative Commons SA_ (_Share Alike_ en español Compartir Igual) (para trabajos y obras de arte). -## Para saber más... +## Para saber más ### Cultura General diff --git a/files/es/glossary/cors/index.md b/files/es/glossary/cors/index.md index c0c9f54be63733..382bcd46ef3798 100644 --- a/files/es/glossary/cors/index.md +++ b/files/es/glossary/cors/index.md @@ -3,7 +3,7 @@ title: CORS slug: Glossary/CORS --- -**CORS** (*Cross-Origin Resource Sharing* o en español Intercambio de recursos de origen cruzado) es un sistema que consiste en transmitir {{Glossary("HTTP_header", "HTTP headers")}}, que determina si los navegadores bloquean el acceso del código JavaScript frontend a las respuestas de peticiones de origen cruzado. +**CORS** (_Cross-Origin Resource Sharing_ o en español Intercambio de recursos de origen cruzado) es un sistema que consiste en transmitir {{Glossary("HTTP_header", "HTTP headers")}}, que determina si los navegadores bloquean el acceso del código JavaScript frontend a las respuestas de peticiones de origen cruzado. La [política de seguridad del mismo origen](/es/docs/Web/Security/Same-origin_policy) prohíbe el acceso a los recursos de orígenes cruzados. Pero CORS brinda a los servidores web la capacidad de decir que desean optar por permitir el acceso de origen cruzado a sus recursos. diff --git a/files/es/glossary/dom/index.md b/files/es/glossary/dom/index.md index 5f93c9ca9b1324..0e87561df8e8dd 100644 --- a/files/es/glossary/dom/index.md +++ b/files/es/glossary/dom/index.md @@ -9,7 +9,7 @@ El DOM es una de las APIs más usadas en la [Web](/es/docs/Glossary/World_Wide_W El DOM surgió a partir de la implementación de [JavaScript](/es/docs/Glossary/JavaScript) en los navegadores. A esta primera versión también se la conoce como DOM 0 o "Legacy DOM". Hoy en día el grupo WHATWG es el encargado de actualizar el estándar de DOM. -## Para saber más... +## Para saber más ### Cultura General diff --git a/files/es/glossary/element/index.md b/files/es/glossary/element/index.md index efc1cd93ce6330..924b1597e89a06 100644 --- a/files/es/glossary/element/index.md +++ b/files/es/glossary/element/index.md @@ -4,7 +4,7 @@ slug: Glossary/Element --- Un elemento es parte de una página web. En XML y HTML, un elemento puede contener un elemento de datos o un fragmento de texto o una imagen, o tal vez nada. Un elemento típico incluye una etiqueta de apertura con algunos atributos, contenido de texto cerrado y una etiqueta de cierre. -![Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.](anatomy-of-an-html-element.png) +![Example: in

Hello world!

, '

' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '

' is a closing tag.](anatomy-of-an-html-element.png) Los elementos y las etiquetas no son las mismas cosas. Las etiquetas comienzan o terminan un elemento en el código fuente, mientras que los elementos son parte del {{Glossary("DOM")}}, el modelo de documento para mostrar la página en el {{glossary("browser")}}. diff --git a/files/es/glossary/first-class_function/index.md b/files/es/glossary/first-class_function/index.md index d81eda9c70b62a..1a2967ac70575b 100644 --- a/files/es/glossary/first-class_function/index.md +++ b/files/es/glossary/first-class_function/index.md @@ -11,9 +11,9 @@ Un lenguaje de programación se dice que tiene **Funciones de primera clase** cu ### JavaScript ```js -const foo = function() { - console.log("foobar"); -} +const foo = function () { + console.log("foobar"); +}; // Invocación usando una variable foo(); ``` @@ -28,7 +28,7 @@ Asignamos una **Función Anónima** a una {{glossary("Variable")}}, la cual util ```js function diHola() { - return "Hola "; + return "Hola "; } function saludar(saludo, nombre) { console.log(saludo() + nombre); @@ -47,9 +47,9 @@ Pasamos nuestra función `diHola()` como argumento de la función `saludar()`, e ```js function diHola() { - return function() { - console.log("¡Hola!"); - } + return function () { + console.log("¡Hola!"); + }; } ``` @@ -62,11 +62,11 @@ Volviendo al ejemplo; Ahora, necesitamos invocar la función `diHola` y su `Func ### 1- Usando una variable ```js -const diHola = function() { - return function() { - console.log("¡Hola!"); - } -} +const diHola = function () { + return function () { + console.log("¡Hola!"); + }; +}; const miFuncion = diHola(); miFuncion(); ``` @@ -79,9 +79,9 @@ De esta manera, devolverá el mensaje `¡Hola!`. ```js function diHola() { - return function() { - console.log("¡Hola!"); - } + return function () { + console.log("¡Hola!"); + }; } diHola()(); ``` @@ -95,7 +95,7 @@ Usamos paréntesis doble `()()` para invocar también a la función retornada.