Merge branch 'main' into add-portugueseBR-translation-quizz
This commit is contained in:
Коммит
d62794f1d9
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
name: Translations Checklist
|
||||
about: These are all the files that need to be translated
|
||||
title: "[TRANSLATIONS]"
|
||||
labels: translations
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
- [ ] Base README.md
|
||||
- [ ] for-teachers.md
|
||||
- [ ] Quizzes
|
||||
- [ ] 1-getting-started-lessons base README
|
||||
- [ ] intro-to-programming-languages README
|
||||
- [ ] intro-to-programming-languages assignment
|
||||
- [ ] github-basics README
|
||||
- [ ] accessibility README
|
||||
- [ ] accessibility assignment
|
||||
- [ ] 2-js-basics base README
|
||||
- [ ] data-types README
|
||||
- [ ] data-types assignment
|
||||
- [ ] functions-methods README
|
||||
- [ ] functions-methods assignment
|
||||
- [ ] making-decisions README
|
||||
- [ ] making-decisions assignment
|
||||
- [ ] arrays-loops README
|
||||
- [ ] arrays-loops assignment
|
||||
- [ ] 3-terrarium base README
|
||||
- [ ] intro-to-html README
|
||||
- [ ] intro-to-html assignment
|
||||
- [ ] intro-to-css README
|
||||
- [ ] intro-to-css assignment
|
||||
- [ ] intro-to-DOM-and-closures README
|
||||
- [ ] intro-to-DOM-and-closures assignment
|
||||
- [ ] 4-typing-game base README
|
||||
- [ ] typing-game README
|
||||
- [ ] typing-game assignment
|
||||
- [ ] 5-browser-extension base README
|
||||
- [ ] about-browsers README
|
||||
- [ ] about-browsers assignment
|
||||
- [ ] forms-browsers-local-storage README
|
||||
- [ ] forms-browsers-local-storage assignment
|
||||
- [ ] background-tasks-and-performance README
|
||||
- [ ] background-tasks-and-performance assignment
|
||||
- [ ] solution base README
|
||||
- [ ] start base README
|
||||
- [ ] 6-space-game base README
|
||||
- [ ] introduction README
|
||||
- [ ] introduction assignment
|
||||
- [ ] drawing-to-canvas README
|
||||
- [ ] drawing-to-canvas assignment
|
||||
- [ ] moving-elements-around README
|
||||
- [ ] moving-elements-around assignment
|
||||
- [ ] collision-detection README
|
||||
- [ ] collision-detection assignment
|
||||
- [ ] keeping-score README
|
||||
- [ ] keeping-score assignment
|
||||
- [ ] end-condition README
|
||||
- [ ] end-condition assignment
|
||||
- [ ] 7-bank-project base README
|
||||
- [ ] template-route README
|
||||
- [ ] template-route assignment
|
||||
- [ ] forms README
|
||||
- [ ] forms assignment
|
||||
- [ ] data README
|
||||
- [ ] data assignment
|
||||
- [ ] state-management README
|
||||
- [ ] state-management assignment
|
||||
- [ ] solution base README
|
||||
- [ ] API base README
|
|
@ -1,38 +0,0 @@
|
|||
## Track translation progress by opening a draft PR using this template and checking off the translations completed
|
||||
|
||||
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
|
||||
|
||||
- [ ] 1
|
||||
- [ ] 1-1
|
||||
- [ ] 1-2
|
||||
- [ ] 1-3
|
||||
- [ ] 2
|
||||
- [ ] 2
|
||||
- [ ] 2-1
|
||||
- [ ] 2-2
|
||||
- [ ] 2-3
|
||||
- [ ] 2-4
|
||||
- [ ] 3
|
||||
- [ ] 3-1
|
||||
- [ ] 3-2
|
||||
- [ ] 3-3
|
||||
- [ ] 4
|
||||
- [ ] 4-1
|
||||
- [ ] 5
|
||||
- [ ] 5-1
|
||||
- [ ] 5-2
|
||||
- [ ] 5-3
|
||||
- [ ] 6
|
||||
- [ ] 6-1
|
||||
- [ ] 6-2
|
||||
- [ ] 6-3
|
||||
- [ ] 6-4
|
||||
- [ ] 6-5
|
||||
- [ ] 6-6
|
||||
- [ ] 7
|
||||
- [ ] 7-1
|
||||
- [ ] 7-2
|
||||
- [ ] 7-3
|
||||
- [ ] 7-4
|
||||
|
||||
- [ ] Quiz (add a file in the quiz-app with all localizations)
|
|
@ -1,38 +0,0 @@
|
|||
## Track translation progress by opening a draft PR using this template and checking off the translations completed
|
||||
|
||||
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
|
||||
|
||||
- [ x ] 1
|
||||
- [ x ] 1-1
|
||||
- [ x ] 1-2
|
||||
- [ x ] 1-3
|
||||
- [ ] 2
|
||||
- [ ] 2
|
||||
- [ ] 2-1
|
||||
- [ ] 2-2
|
||||
- [ ] 2-3
|
||||
- [ ] 2-4
|
||||
- [ ] 3
|
||||
- [ ] 3-1
|
||||
- [ ] 3-2
|
||||
- [ ] 3-3
|
||||
- [ ] 4
|
||||
- [ ] 4-1
|
||||
- [ ] 5
|
||||
- [ ] 5-1
|
||||
- [ ] 5-2
|
||||
- [ ] 5-3
|
||||
- [ ] 6
|
||||
- [ ] 6-1
|
||||
- [ ] 6-2
|
||||
- [ ] 6-3
|
||||
- [ ] 6-4
|
||||
- [ ] 6-5
|
||||
- [ ] 6-6
|
||||
- [ ] 7
|
||||
- [ ] 7-1
|
||||
- [ ] 7-2
|
||||
- [ ] 7-3
|
||||
- [ ] 7-4
|
||||
|
||||
- [ ] Quiz (add a file in the quiz-app with all localizations)
|
|
@ -0,0 +1,12 @@
|
|||
# Description
|
||||
|
||||
Please include a summary of the changes and the related issue. Please also include relevant motivation and context.
|
||||
|
||||
Fixes # (issue)
|
||||
|
||||
## Type of change
|
||||
|
||||
- [ ] Bug fix (non-breaking change which fixes an issue)
|
||||
- [ ] New feature (non-breaking change which adds functionality)
|
||||
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
|
||||
- [ ] This change requires a documentation update
|
|
@ -15,7 +15,7 @@ jobs:
|
|||
runs-on: ubuntu-latest
|
||||
name: Build and Deploy Job
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: true
|
||||
- name: Build And Deploy
|
||||
|
|
|
@ -18,10 +18,11 @@ jobs:
|
|||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- uses: actions/stale@v3
|
||||
- uses: actions/stale@v6
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
stale-issue-message: 'This issue has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
|
||||
stale-pr-message: 'This PR has not seen any action for a while! Closing for now, but it can be reopened at a later date.'
|
||||
stale-issue-label: 'no-issue-activity'
|
||||
stale-pr-label: 'no-pr-activity'
|
||||
days-before-close: -1
|
||||
|
|
|
@ -17,7 +17,7 @@ In this lesson, we'll cover:
|
|||
- Basic elements of a program
|
||||
- Useful software and tooling for the professional developer
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## What is Programming?
|
||||
|
||||
|
@ -76,7 +76,7 @@ back add r0,r1
|
|||
|
||||
Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10.
|
||||
|
||||
✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1.
|
||||
✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. The first 10 numbers following the Fibonacci sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21 and 34.
|
||||
|
||||
## Elements of a Program
|
||||
|
||||
|
@ -104,21 +104,25 @@ One of the most crucial tools for software development is the editor. Editors ar
|
|||
|
||||
Developers rely on editors for a few additional reasons:
|
||||
|
||||
- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
|
||||
- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
|
||||
- *Syntax highlighting* adds colors and text formatting to code, making it easier to read. Most editors allow customized syntax highlighting.
|
||||
- *Extensions and Integrations* are specialized tools for developers, by developers. These tools weren't built into the base editor. For example, many developers document their code to explain how it works. They may install a spell check extension to help find typos within the documentation. Most extensions are intended for use within a specific editor, and most editors come with a way to search for available extensions.
|
||||
- *Customization* enables developers to create a unique development environment to suit their needs. Most editors are extremely customizable and may also allow developers to create custom extensions.
|
||||
|
||||
#### Popular Editors and Web Development Extensions
|
||||
|
||||
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
|
||||
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [Atom](https://atom.io/)
|
||||
- [spell-check](https://atom.io/packages/spell-check)
|
||||
- [teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
- [www.sublimetext](https://www.sublimetext.com/)
|
||||
- [emmet](https://emmet.io/)
|
||||
- [SublimeLinter](http://www.sublimelinter.com/en/stable/)
|
||||
|
||||
### Browsers
|
||||
|
||||
|
@ -128,7 +132,7 @@ Many browsers come with *developer tools* (DevTools) that contain a set of helpf
|
|||
|
||||
#### Popular Browsers and DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -144,22 +148,22 @@ Options for the command line will differ based on the operating system you use.
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Popular Command Line Tools
|
||||
|
||||
|
@ -177,6 +181,7 @@ When a developer wants to learn something new, they'll most likely turn to docum
|
|||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/)
|
||||
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge)
|
||||
- [W3 Schools](https://www.w3schools.com/where_to_start.asp)
|
||||
|
||||
✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment.
|
||||
|
||||
|
|
|
@ -5,7 +5,9 @@ Esta lección cubre los conceptos básicos de los lenguajes de programación. Lo
|
|||
![Intro Programming](/sketchnotes/webdev101-programming.png)
|
||||
> Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
|
||||
## Cuestionario Previo a la Clase
|
||||
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
|
||||
|
||||
### Introducción
|
||||
|
||||
En esta lección, cubriremos:
|
||||
|
@ -17,20 +19,19 @@ En esta lección, cubriremos:
|
|||
|
||||
## ¿Qué es la programación?
|
||||
|
||||
La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Este conjuntos de instrucciones pueden tener varios nombres, como *programa*, *programa de computadora*, *aplicación (app)* o *ejecutable* son algunos de los mas populares.
|
||||
La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Este conjuntos de instrucciones pueden tener varios nombres, como *programa*, *programa de computadora*, *aplicación (app)* o *ejecutable* son algunos de los más populares.
|
||||
|
||||
|
||||
Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los videojuegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código* está ejecutando una serie de instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
|
||||
Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los videojuegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código*, está ejecutando una serie de instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
|
||||
|
||||
✅ Investigue un poco: ¿quién se considera el primer programador(a) de computadoras del mundo?
|
||||
|
||||
## Lenguajes de programación
|
||||
|
||||
Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender codigo binario (1 y 0), y para *la mayoría* de los desarrolladores, esa no es una forma muy amigable de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre los humanos y las computadoras.
|
||||
Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender código binario (1 y 0), y para *la mayoría* de los desarrolladores, esa no es una forma muy amigable de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre los humanos y las computadoras.
|
||||
|
||||
Los lenguajes de programación vienen en diferentes formatos y tienen diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos.
|
||||
|
||||
*Los idiomas de bajo nivel* normalmente requieren menos pasos que los *idiomas de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
|
||||
*Los lenguajes de bajo nivel* normalmente requieren menos pasos que los *lenguajes de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
|
||||
|
||||
El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código Assembly ARM.
|
||||
|
||||
|
@ -95,7 +96,7 @@ Un **entorno de desarrollo** es un conjunto único de herramientas y caracterís
|
|||
|
||||
### Editores
|
||||
|
||||
Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribes tu código y, a veces, donde lo ejecutaras.
|
||||
Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribes tu código y, a veces, donde lo ejecutarás.
|
||||
|
||||
Los desarrolladores confían en los editores por algunas razones adicionales:
|
||||
|
||||
|
@ -116,7 +117,7 @@ Los desarrolladores confían en los editores por algunas razones adicionales:
|
|||
- [Teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
* Teletype: Es una extension que nos permite colaborar en un mismo espacio de trabajo entre muchas personas.
|
||||
* Teletype: Es una extensión que nos permite colaborar en un mismo espacio de trabajo entre muchas personas.
|
||||
|
||||
### Navegadores
|
||||
|
||||
|
@ -126,38 +127,38 @@ Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que
|
|||
|
||||
#### Navegadores y herramientas de desarrollo populares
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
### Herramientas de línea de comandos (CLI)
|
||||
|
||||
Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos **(CLI)** para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo de trabajo con el teclado es por eso que usan atajos(shortcuts) para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas sin la necesidad de cambiar entre el mouse y el teclado. Otro beneficio de esta es que son configurables, puedes guardar tu configuración personalizada, asi como tambien cambiarla más tarde o importarla a nueva máquina. Debido a que los entornos son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo asi como tambien otros pueden preferir una combinación de ambos.
|
||||
Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos **(CLI)** para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo de trabajo con el teclado es por eso que usan atajos (shortcuts) para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas sin la necesidad de cambiar entre el mouse y el teclado. Otro beneficio de esta es que son configurables, puedes guardar tu configuración personalizada, asi como también cambiarla más tarde o importarla a nueva máquina. Debido a que los entornos son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo, así como también otros pueden preferir una combinación de ambos.
|
||||
|
||||
### Opciones de línea de comandos (CLI) populares
|
||||
|
||||
Las opciones para la línea de comando varian según el sistema operativo que utilices.
|
||||
Las opciones para la línea de comando varían según el sistema operativo que utilices.
|
||||
|
||||
💻 = *viene preinstalado en el sistema operativo.*
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Línea de comandos (CLI) Populares
|
||||
|
||||
|
@ -167,7 +168,7 @@ Las opciones para la línea de comando varian según el sistema operativo que ut
|
|||
|
||||
### Documentación
|
||||
|
||||
Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurras a la documentación para aprender a usarla. Los desarrolladores a menudo confían en esta para guiarlos a través de cómo usar ciertas herramientas asi como tambien para entender como funcionan los lenguajes.
|
||||
Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurras a la documentación para aprender a usarla. Los desarrolladores a menudo confían en ésta para guiarlos a través de cómo usar ciertas herramientas así como también para entender como funcionan los lenguajes.
|
||||
|
||||
#### Documentación popular sobre desarrollo de web
|
||||
|
||||
|
@ -178,14 +179,17 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu
|
|||
|
||||
✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Reto
|
||||
|
||||
Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
|
||||
|
||||
## [Prueba Post-lectura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
|
||||
## [Cuestionario Posterior a la Clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
|
||||
|
||||
## Revisión y autoestudio
|
||||
## Revisión y Autoestudio
|
||||
|
||||
Estudia un poco sobre los diferentes lenguajes disponibles para programar. Intenta escribir una línea en un lenguaje y luego vuelve a hacerlo en otros dos. ¿Qué aprendiste?
|
||||
|
||||
**Tarea**: [Tarea](../assignment.md)
|
||||
## [Tarea](./assignment.es.md)
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@ Sa araling ito, tatalakayin natin:
|
|||
- Mga pangunahing elemento ng isang programa
|
||||
- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
|
||||
|
||||
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
|
||||
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Ano ang Programming?
|
||||
|
||||
|
@ -128,7 +128,7 @@ Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isa
|
|||
|
||||
#### Mga sikat na Browser at DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -144,22 +144,22 @@ Mag-iiba ang mga opsyon para sa command line batay sa operating system na iyong
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Mga sikat na Command Line Tool
|
||||
|
||||
|
|
|
@ -86,7 +86,7 @@ Il est possible que certaines instructions ne soient pas exécutées par un pér
|
|||
|
||||
✅ Vous en apprendrez plus sur ce type d'énoncé dans les leçons suivantes
|
||||
|
||||
## Outils du métier
|
||||
## Outils métier
|
||||
|
||||
[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
|
@ -123,7 +123,7 @@ Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le
|
|||
De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations.
|
||||
#### Navigateurs et outils de développement populaires
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -139,24 +139,24 @@ Les options de la ligne de commande varient en fonction du système d'exploitati
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (appellé également CMD) 💻
|
||||
- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (appellé également CMD) 💻
|
||||
- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Popular Command Line Tools
|
||||
#### Command Line Tools ( CLI ) populaires
|
||||
|
||||
- [Git](https://git-scm.com/) (💻 sur la plupart des SE)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
|
@ -164,22 +164,22 @@ Les options de la ligne de commande varient en fonction du système d'exploitati
|
|||
|
||||
### Documentation
|
||||
|
||||
Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider dans la manière d'utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement.
|
||||
Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider pour utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement.
|
||||
|
||||
#### Documentation populaire sur le développement Web
|
||||
#### Documentations populaires sur le développement Web
|
||||
|
||||
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, éditeurs de [Firefox](https://www.mozilla.org/firefox/)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
- [Web.dev](https://web.dev), de Google, éditeurs de [Chrome](https://www.google.com/chrome/)
|
||||
- [Documents de développeur de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pour [Microsoft Edge](https://www.microsoft.com/edge)
|
||||
|
||||
✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le et comparez-le à l'environnement d'un concepteur Web.
|
||||
✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le à l'environnement d'un concepteur Web.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Défi
|
||||
|
||||
Comparez quelques langages de programmation. Quelles sont certaines des caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go?
|
||||
Comparez quelques langages de programmation. Quelles sont les caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go?
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=fr)
|
||||
|
|
|
@ -124,7 +124,7 @@ back add r0,r1
|
|||
|
||||
#### लोकप्रिय ब्राउज़रों और DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -140,22 +140,22 @@ back add r0,r1
|
|||
|
||||
#### विंडोज
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### मैक ओएस
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### लिनक्स
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### लोकप्रिय कमांड लाइन टूल्स
|
||||
|
||||
|
|
|
@ -125,7 +125,7 @@ Banyak browser datang dengan *alat pengembang* (DevTools) yang berisi serangkaia
|
|||
|
||||
#### Browser dan DevTools Populer
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -141,22 +141,22 @@ Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gun
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Alat Command Line Populer
|
||||
|
||||
|
|
|
@ -124,7 +124,7 @@ Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che conte
|
|||
|
||||
#### Popolari Browser e DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -140,22 +140,22 @@ Le alternative per la riga di comando differiriscono in base al sistema operativ
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Popolari Strumenti da Riga di Comando
|
||||
|
||||
|
|
|
@ -165,7 +165,7 @@ Web開発者は、自分のコードがWeb上でどのように実行される
|
|||
|
||||
#### 有名なブラウザ
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -190,22 +190,22 @@ Web開発者は、自分のコードがWeb上でどのように実行される
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### 有名なコマンドラインツール
|
||||
|
||||
|
|
|
@ -124,7 +124,7 @@ back add r0,r1
|
|||
|
||||
#### 인기있는 브라우저와 DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -140,22 +140,22 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다.
|
|||
|
||||
#### 윈도우즈
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### 맥OS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### 리눅스
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### 인기있는 Command Line 도구
|
||||
|
||||
|
|
|
@ -125,7 +125,7 @@ Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwik
|
|||
|
||||
#### Populaire Browsers en DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -141,22 +141,22 @@ Beschikbaarheid van command lines verschilt op basis van het besturingssysteem w
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (ook bekend als CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Populaire Command Line Applicaties
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
- कार्यक्रमको आधारभूत तत्वहरू
|
||||
- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण
|
||||
|
||||
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) मा यो पाठ लिन सक्नुहुन्छ!
|
||||
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
|
||||
|
||||
## प्रोग्रामिङ भनेको के हो?
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguagens de programação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora.
|
||||
|
||||
![Introdução a Programação](/sketchnotes/webdev101-programming.png)
|
||||
![Introdução à Programação](../../../sketchnotes/webdev101-programming.png)
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
|
@ -137,7 +137,7 @@ Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que co
|
|||
|
||||
#### Navegadores Populares e DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -156,22 +156,22 @@ _💻 = já vem pré-instalado no sistema operacional._
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Ferramentas Populares para Linha de Comando
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
- Основные элементы программы
|
||||
- Полезный софт и инструментарий для профессионального разработчика
|
||||
|
||||
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
|
||||
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Что такое программирование?
|
||||
|
||||
|
@ -132,7 +132,7 @@ back add r0,r1
|
|||
|
||||
#### Популярные браузеры и инструменты разработки
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -148,22 +148,22 @@ _💻 = предустановлен в операционной системе.
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (также известный как CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Популярные инструменты командной строки
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
- ஒரு நிரலின் அடிப்படை கூறுகள்
|
||||
- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
|
||||
|
||||
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) பற்றி எடுத்துக் கொள்ளலாம்!
|
||||
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
|
||||
|
||||
## நிரலாக்க என்றால் என்ன??
|
||||
|
||||
|
@ -129,7 +129,7 @@ back add r0,r1
|
|||
|
||||
#### பிரபலமான உலாவிகள் மற்றும் தேவ்டூல்ஸ்
|
||||
|
||||
- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [குரோம்](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [பயர்பாக்ஸ்](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -145,22 +145,22 @@ back add r0,r1
|
|||
|
||||
#### விண்டோஸ்
|
||||
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻
|
||||
- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻
|
||||
- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [புதினா](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [முனையம்](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [ஐடெர்ம்](https://iterm2.com/)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [பாஸ்](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [கேடிஇ கான்சோல்](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### பிரபலமான கட்டளை வரி கருவிகள்
|
||||
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
编程语言有着不同的形式,也可能用于不同的目的。比如 JavaScript 主要用于 Web 应用,而 Bash 则主要用于操作系统。
|
||||
|
||||
对于设备来说看,解释*低级语言(low level languages)*的指令一般会比解释*高级语言(high level languages)*的指令需要更少的步骤。然而,高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。
|
||||
对于设备来说看,解释 *低级语言(low level languages)* 的指令一般会比解释 *高级语言(high level languages)* 的指令需要更少的步骤。然而,高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。
|
||||
|
||||
下面的代码展示了高级语言(以 JavaScript 为例)和低级语言(以 ARM 汇编代码为例)的区别:
|
||||
|
||||
|
@ -124,7 +124,7 @@ back add r0,r1
|
|||
|
||||
#### 主流浏览器和 DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -140,22 +140,22 @@ back add r0,r1
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (即 CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (即 CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### 常用命令行工具
|
||||
|
||||
|
|
|
@ -124,7 +124,7 @@ back add r0,r1
|
|||
|
||||
#### 常見瀏覽器與網頁開發工具
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
|
@ -140,22 +140,22 @@ back add r0,r1
|
|||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (又稱作 CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (又稱作 CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
#### 其他常用指令
|
||||
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
# ഡോക്സ് വായിക്കുന്നു
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
ഒരു വെബ് ഡെവലപ്പർക്ക് ആവശ്യമായേക്കാവുന്ന നിരവധി ടൂളുകൾ ഇതിൽ ഉണ്ട് [ക്ലയന്റ് സൈഡ് ടൂളിങ്ങിനുള്ള MDN ഡോക്യുമെന്റേഷൻ](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). പാഠത്തിൽ ഉൾപ്പെടുത്താത്ത 3 ഉപകരണങ്ങൾ തിരഞ്ഞെടുക്കുക, എന്തുകൊണ്ടാണ് ഒരു വെബ് ഡെവലപ്പർ ഇത് ഉപയോഗിക്കുന്നതെന്ന് വിശദീകരിക്കുക, കൂടാതെ ഈ വിഭാഗത്തിൽ പെടുന്ന ഒരു ടൂളിനായി തിരയുകയും അതിന്റെ ഡോക്യുമെന്റേഷൻ പങ്കിടുകയും ചെയ്യുക. MDN ഡോക്സിൽ നിന്നുള്ള ടൂൾ ഉദാഹരണം ഉപയോഗിക്കരുത്.
|
||||
|
||||
## റൂബ്രിക്
|
||||
|
||||
മാതൃകാപരമായ | മതിയായ | കൂടുതൽ നന്നാകാൻ ഉണ്ട്
|
||||
--- | --- | -- |
|
||||
|എന്തുകൊണ്ട് വെബ് ഡെവലപ്പർ ടൂൾ ഉപയോഗിക്കുമെന്ന് വിശദീകരിച്ചു എങ്ങനെയെന്ന് വിശദീകരിച്ചു, പക്ഷേ എന്തുകൊണ്ട് ഡവലപ്പർ ടൂൾ ഉപയോഗിക്കും| ഒരു ഡെവലപ്പർ എങ്ങനെ അല്ലെങ്കിൽ എന്തുകൊണ്ട് ഉപകരണം ഉപയോഗിക്കുമെന്ന് പരാമർശിച്ചിട്ടില്ല |
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
## Instruções
|
||||
|
||||
Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN.
|
||||
Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente (versão em inglês)](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN.
|
||||
|
||||
## Rubrica
|
||||
|
||||
Exemplar | Adequado | Precisa de melhorias
|
||||
--- | --- | - |
|
||||
| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta |
|
||||
| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta |
|
||||
|
|
|
@ -182,8 +182,8 @@ In your repository, navigate to `Insights > Community` to see how your project c
|
|||
|
||||
Here are some things that can improve your GitHub repo:
|
||||
- **Description**. Did you add a description for your project?
|
||||
- **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/).
|
||||
- **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
|
||||
- **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon).
|
||||
- **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon),
|
||||
- **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||
- **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||
|
||||
|
@ -318,12 +318,12 @@ Read more about [contributing to open source software](https://opensource.guide/
|
|||
|
||||
[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
|
||||
Practice, practice, practice. GitHub has great learning paths available via [lab.github.com](https://lab.github.com/):
|
||||
Practice, practice, practice. GitHub has great learning paths available via [skills.github.com](https://skills.github.com):
|
||||
|
||||
- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
- [First Week on GitHub](https://skills.github.com/#first-week-on-github)
|
||||
|
||||
You'll also find more advanced labs.
|
||||
You'll also find more advanced courses.
|
||||
|
||||
## Assignment
|
||||
|
||||
Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
Complete [the First Week on GitHub course](https://skills.github.com/#first-week-on-github)
|
||||
|
|
|
@ -5,13 +5,13 @@ Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar
|
|||
![Introducción a GitHub](/sketchnotes/webdev101-github.png)
|
||||
> Dibujo de [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
|
||||
## [Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
|
||||
|
||||
### Introducción
|
||||
|
||||
En esta lección, cubriremos:
|
||||
|
||||
- Seguimiento de trabajo que se realiza en su maquina.
|
||||
- Seguimiento de trabajo que se realiza en su máquina.
|
||||
- Trabajar en proyectos con otros.
|
||||
- Cómo contribuir al software de código abierto (Open Source)
|
||||
|
||||
|
@ -27,15 +27,15 @@ Si Git no está instalado, [descargue Git desde aquí](https://git-scm.com/downl
|
|||
Para comprobar si Git ya está configurado, escribe:
|
||||
`git config --list`
|
||||
|
||||
También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (tambien conocida como linea de comandos o simbolo del sistema).
|
||||
También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (también conocida como línea de comandos o símbolo del sistema).
|
||||
|
||||
Ve a [GitHub.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil.
|
||||
|
||||
✅ GitHub no es el único lugar para almacenar codigo; hay otros, pero GitHub es el más conocido.
|
||||
✅ GitHub no es el único lugar para almacenar código; hay otros, pero GitHub es el más conocido.
|
||||
|
||||
### Preparación
|
||||
|
||||
Necesitarás una directorio con un proyecto de código en tu máquina local (computadora portátil o PC) y un repositorio público en GitHub, que te servirá como ejemplo de cómo contribuir a los proyectos de otros.
|
||||
Necesitarás un directorio con un proyecto de código en tu máquina local (computadora portátil o PC) y un repositorio público en GitHub, que te servirá como ejemplo de cómo contribuir a los proyectos de otros.
|
||||
|
||||
---
|
||||
|
||||
|
@ -45,6 +45,10 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
|
|||
|
||||
### Tarea: Hacer un repositorio git y enviar código
|
||||
|
||||
> Revisa este video
|
||||
>
|
||||
> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
|
||||
|
||||
1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busca el botón **nuevo repositorio**.
|
||||
|
||||
1. Dale un nombre a tu repositorio (directorio)
|
||||
|
@ -113,7 +117,7 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
|
|||
git reset [nombre del archivo o carpeta]
|
||||
```
|
||||
|
||||
Este comando nos ayuda a eliminar un archivo/directorio puntual, para que este no sea enviado en el proximo commit.
|
||||
Este comando nos ayuda a eliminar un archivo/directorio puntual, para que éste no sea enviado en el próximo commit.
|
||||
|
||||
|
||||
1. **Persistir en tu trabajo**. En este punto, has agregado los archivos a lo que se denomina _stagin area_. Un lugar donde Git rastrea tus archivos. Para que el cambio sea permanente, debes realizar un _commit_. Para hacerlo, utilizas el siguiente commando `git commit`. Un _commit_ representa un punto en el historial de tu repositorio que estás guardando, este viene acompañado de un mensaje, el cual nos sirve para saber que cambios se hicieron dentro de ese commit. Ejecuta el siguiente comando para realizar tu primer commit.
|
||||
|
@ -133,6 +137,12 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
|
|||
```
|
||||
|
||||
Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creaste anteriormente.
|
||||
|
||||
Si tienes una conexión previa con algún "origin" y deseas cambiar la dirección puedes utilizar el siguiente comando:
|
||||
|
||||
```bash
|
||||
git remote set-url https://github.com/USUARIO/NOMBRE DEL REPOSITORIO.git
|
||||
```
|
||||
|
||||
1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así:
|
||||
|
||||
|
@ -151,26 +161,28 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
|
|||
git push
|
||||
```
|
||||
|
||||
> Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](github.com/github/gitignore).
|
||||
> Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](https://github.com/github/gitignore).
|
||||
|
||||
|
||||
#### Confirmar mensajes
|
||||
|
||||
Una buena línea de asunto (subject line) de confirmación de Git completa la siguiente oración:
|
||||
Si se aplica, esta confirmación será <su línea de asunto aquí>
|
||||
Una buena línea de asunto (subject line), completa la siguiente frase: "Si se aplica, este commit hará..."
|
||||
|
||||
Para el sujeto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiara".
|
||||
Como en el sujeto, en el cuerpo (opcional) también use el imperativo, presente. El cuerpo debe incluir la motivación para el cambio y contrastarla con la conducta anterior. Estás explicando el "por qué", no el "cómo".
|
||||
Para el asunto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiará".
|
||||
Como en el asunto, en el cuerpo (opcional) también use el presente imperativo. El cuerpo debe incluir el motivo del cambio y contrastarlo con el funcionamiento previo. Estás explicando el "por qué", no el "cómo".
|
||||
|
||||
✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de compromiso realmente bueno? ¿Puedes encontrar uno realmente mínimo? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de compromiso?
|
||||
✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de commit realmente bueno? ¿Puedes hallar uno aún más simple? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de commit?
|
||||
|
||||
### Tarea: Colaborar
|
||||
|
||||
|
||||
La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores.
|
||||
|
||||
## Trabajando en proyectos con otros
|
||||
|
||||
> Revisa este video
|
||||
>
|
||||
> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
|
||||
|
||||
En tu repositorio, ve a `Insights > Community` para ver cómo se compara tu proyecto con los estándares comunitarios recomendados.
|
||||
|
||||
Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub:
|
||||
|
@ -187,16 +199,16 @@ Todos estos recursos beneficiarán la incorporación de nuevos miembros del equi
|
|||
|
||||
### Tarea: Fusionar (merging) código
|
||||
|
||||
Los documentos que contribuyes ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a tu repositorio en GitHub:
|
||||
Los documentos de contribución ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a tu repositorio en GitHub:
|
||||
|
||||
1. **Bifurcando (forking) tu repositorio** Probablemente querrás que la gente _bifurque_ (fork) tu proyecto. Bifurcar significa crear una réplica de tu repositorio en su perfil de GitHub.
|
||||
1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local.
|
||||
1. **Crear una rama**. Querrás pedirles que creen una _ rama_ para su trabajo.
|
||||
1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 o 1 de 3 cambios?
|
||||
1. **Crear una rama**. Querrás pedirles que creen una _rama_ para su trabajo.
|
||||
1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 ó 1 de 3 cambios?
|
||||
|
||||
✅ Imagínate una situación en la que las ramas (branches) de git son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso se te ocurren?
|
||||
|
||||
> Se el cambio que deseas ver en el mundo y crea también ramas para tu propio trabajo. Todas las confirmaciones que realices se realizarán en la rama en la que estás actualmente "registrado". Usa `git status` para ver qué rama es.
|
||||
> Sé el cambio que deseas ver en el mundo y crea también ramas para tu propio trabajo. Todos los commits que hagas se realizarán en la rama en la que estás actualmente "registrado". Usa `git status` para ver qué rama es.
|
||||
|
||||
Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local:
|
||||
|
||||
|
@ -219,7 +231,7 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y
|
|||
git commit -m "mis cambios"
|
||||
```
|
||||
|
||||
Asegúrate de darle un buen nombre a tu commit, tanto por tu bien como por el mantenedor del repositorio en el que estás ayudando.
|
||||
Asegúrate de darle un buen nombre a tu commit, tanto por tu bien como por el del mantenedor del repositorio en el que estás ayudando.
|
||||
|
||||
1. **Combina tu trabajo con la rama `principal`**. En algún momento has terminado de trabajar y deseas combinar tu trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla con los siguientes comandos:
|
||||
|
||||
|
@ -228,7 +240,7 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y
|
|||
git pull
|
||||
```
|
||||
|
||||
En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurren en tu rama de trabajo. Mientras tanto, ejecuta los siguientes comandos:
|
||||
En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurran en tu rama de trabajo. Por lo tanto, ejecuta los siguientes comandos:
|
||||
|
||||
```bash
|
||||
git switch [branch_name]
|
||||
|
@ -245,9 +257,9 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y
|
|||
|
||||
El comando anterior crea la rama en tu repositorio bifurcado.
|
||||
|
||||
1. **Abre un PR**. A continuación, abre un PR. Para hacerlo, navega al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te preguntarán si deseas crear un nuevo PR. Haz clic en eso y lo llevará a una interfaz donde puedes cambiar el título del mensaje de confirmación, asignarle una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcaste verá este PR y _dedos cruzados_ apreciarán y _ fusionarán_ tu PR. Ahora eres un colaborador, yay :)
|
||||
2. **Abre un Pull Request**. A continuación, abre un PR. Para hacerlo, navega al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te preguntarán si deseas crear un nuevo PR. Haz clic allí y te llevará a una interfaz donde puedes cambiar el título del mensaje de commit, asígnale una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcaste verá esta PR y _dedos cruzados_ valorarán y _fusionarán_ tu PR. Ahora eres un colaborador, ¡yay! :)
|
||||
|
||||
1. **Limpiar**. Se considera una buena práctica _limpiar_ después de ti. Limpiar tanto tu rama local como la rama que enviaste a GitHub. Primero eliminémoslo localmente con el siguiente comando:
|
||||
3. **Limpiar**. Se considera una buena práctica "_limpiar_" después de que tu Pull Request fue combinado a la rama principal exitosamente. Limpia tanto tu rama local como la rama que enviaste a GitHub. Primero eliminémoslo localmente con el siguiente comando:
|
||||
|
||||
```bash
|
||||
git branch -d [branch-name]
|
||||
|
@ -255,13 +267,13 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y
|
|||
|
||||
Asegúrate de ir a la página de GitHub del repositorio bifurcado a continuación y elimina la rama remota que acabas de ingresar.
|
||||
|
||||
`Solicitud de extracción` parece un término tonto porque realmente deseas impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar tus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente estás solicitando una decisión de cambio a un mantenedor.
|
||||
`Solicitud de extracción` (Pull request) parece un término tonto porque realmente deseas impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar tus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente estás solicitando una decisión de cambio a un mantenedor.
|
||||
|
||||
Una solicitud de extracción es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena solicitud de extracción sigue aproximadamente las mismas reglas que un mensaje de confirmación. Puedes agregar una referencia a un problema en el rastreador de problemas, cuando tu trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de tu problema. Por ejemplo, `#97`.
|
||||
Una Pull request es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena Pull request sigue aproximadamente las mismas reglas que un mensaje de commit. Puedes agregar una referencia a un problema (issue) en el rastreador de problemas, cuando tu trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de tu problema. Por ejemplo, `#97`.
|
||||
|
||||
🤞 Cruza los dedos para que todos los controles pasen y los propietarios del proyecto combinen tus cambios en el proyecto🤞
|
||||
|
||||
Actualice tu rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub:
|
||||
Actualiza tu rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub:
|
||||
|
||||
`git pull`
|
||||
|
||||
|
@ -269,7 +281,9 @@ Actualice tu rama de trabajo local actual con todas las nuevas confirmaciones de
|
|||
|
||||
Primero, busquemos un repositorio en GitHub que te interese y al que te gustaría contribuir con un cambio. Querrás copiar el contenido a nuestra máquina.
|
||||
|
||||
✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `buena-primera-edición`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
|
||||
✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `good-first-issue`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
|
||||
|
||||
![Copia un repositorio localmente](../images/clone_repo.png)
|
||||
|
||||
Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos).
|
||||
|
||||
|
@ -285,28 +299,34 @@ Por último, puedes descargar el código en un directorio comprimido.
|
|||
|
||||
### Algunas cosas más interesantes sobre GitHub
|
||||
|
||||
Puede destacar, ver y / o "fork" cualquier repositorio público en GitHub. Puedes encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
|
||||
Puedes destacar, ver y/o hacer "fork" cualquier repositorio público en GitHub. Asimismo, encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
|
||||
|
||||
Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Solicitudes de extracción es donde las personas debaten y revisan los cambios que están en curso.
|
||||
Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Pull requests es donde las personas debaten y revisan los cambios que están en curso.
|
||||
|
||||
Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC.
|
||||
|
||||
✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar la configuración, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer!
|
||||
|
||||
🚀 Desafío: empareja con un amigo(a) para trabajar en el código juntos. Crea un proyecto de forma colaborativa, bifurque el código, crea ramas y combina los cambios.
|
||||
---
|
||||
|
||||
## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
|
||||
## 🚀 Reto
|
||||
|
||||
## Revisión y autoestudio
|
||||
Reúnete con un amigo para trabajar en el código del otro. Crea un proyecto en colaboración, haz fork del código, crea ramas y hagan merge a los cambios.
|
||||
|
||||
## [Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
|
||||
|
||||
## Revisión y Autoestudio
|
||||
|
||||
Obtén más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||
|
||||
[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
|
||||
Práctica práctica práctica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [lab.github.com](https://lab.github.com/):
|
||||
Practica, practica, practica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [skills.github.com](https://skills.github.com/):
|
||||
|
||||
- [Primera semana en GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
- [Primera semana en GitHub](https://skills.github.com/#first-week-on-github)
|
||||
|
||||
También encontrarás laboratorios más avanzados.
|
||||
|
||||
**Tarea**: Completa [la primera semana en el laboratorio de capacitación de GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
## Tarea
|
||||
|
||||
Completa [La Primera Semana en el Laboratorio de capacitación de GitHub](https://skills.github.com/#first-week-on-github)
|
||||
|
|
|
@ -124,7 +124,7 @@ GitHub 계정, (Visual Studio Code와 같은) 코드 에디터가 필요하며,
|
|||
git push
|
||||
```
|
||||
|
||||
> Tip, 추적하고 싶지 않은 파일이 GitHub에 표시되는 것을 방지하기 위해 `.gitignore` 파일을 채용할 수 있습니다. 동일한 폴더에 저장하지만 공개 저장소에는 존재하지 않는 노트 파일과 같습니다. `.gitignore` 파일의 템플릿은 [.gitignore templates](github.com/github/gitignore)에서 찾을 수 있습니다.
|
||||
> Tip, 추적하고 싶지 않은 파일이 GitHub에 표시되는 것을 방지하기 위해 `.gitignore` 파일을 채용할 수 있습니다. 동일한 폴더에 저장하지만 공개 저장소에는 존재하지 않는 노트 파일과 같습니다. `.gitignore` 파일의 템플릿은 [.gitignore templates](https://github.com/github/gitignore)에서 찾을 수 있습니다.
|
||||
|
||||
#### 커밋 메시지
|
||||
|
||||
|
@ -291,4 +291,4 @@ Practice, practice, practice. GitHub에는 [lab.github.com](https://lab.github.c
|
|||
|
||||
## 과제
|
||||
|
||||
[the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) 완료하기
|
||||
[the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) 완료하기
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Tools to use
|
||||
|
||||
|
@ -28,7 +28,7 @@ Every web developer should familiarize themselves with a screen reader. As highl
|
|||
|
||||
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
|
||||
|
||||
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
|
||||
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
|
||||
|
||||
### Zoom
|
||||
|
||||
|
@ -40,7 +40,7 @@ Another type of zoom relies on specialized software to magnify one area of the s
|
|||
|
||||
Colors on web sites need to be carefully chosen to answer the needs of color-blind users or people who have difficulty seeing low-contrast colors.
|
||||
|
||||
✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). What do you learn?
|
||||
✅ Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). What do you learn?
|
||||
|
||||
### Lighthouse
|
||||
|
||||
|
|
|
@ -17,13 +17,13 @@ Esta cita destaca perfectamente la importancia de crear sitios web accesibles. U
|
|||
|
||||
Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
|
||||
|
||||
[Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
|
||||
[Lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
|
||||
|
||||
En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Debemos tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
|
||||
|
||||
Todo desarrollador web debería estar familiarizado con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
|
||||
|
||||
✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
|
||||
✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
|
||||
|
||||
### Chequear contrastes
|
||||
|
||||
|
@ -136,9 +136,9 @@ Puedes usar `aria-label` para describir el enlace cuando el formato de la págin
|
|||
|
||||
## Imágenes
|
||||
|
||||
No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo ʻalt`. Todas las imágenes deben tener un ʻalt` para describir lo que son.
|
||||
No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo `alt`. Todas las imágenes deben tener un `alt` para describir lo que son.
|
||||
|
||||
✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender qué hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
|
||||
✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender que hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
|
||||
|
||||
## El teclado
|
||||
|
||||
|
@ -212,4 +212,4 @@ Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lee sobre l
|
|||
|
||||
Créditos: [Tortuga Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
|
||||
|
||||
> Autor: Christopher Harrison
|
||||
> Autor: Christopher Harrison
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
Cette citation met parfaitement l'accent sur l'importance de créer des sites Web accessibles. Une application qui ne peut pas être accessible par tous est par définition exclusionnaire. En tant que développeurs Web, nous devrions toujours avoir l'accessibilité à l'esprit. En ayant cet objectif dès le début, vous serez déjà bien lancé sur la façon de vous assurer que tout le monde peut accéder aux pages que vous créez. Dans cette leçon, vous découvrirez les outils pouvant vous aider à vous assurer que vos éléments Web sont accessibles et comment développer avec l'accessibilité à l'esprit.
|
||||
|
||||
> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-13441-cxa)!
|
||||
> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Outils à utiliser
|
||||
|
||||
|
|
|
@ -15,7 +15,3 @@ Introduction to Programming Languages and Tools of the Trade was written with
|
|||
Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
# Primeros pasos con el Desarrollo Web
|
||||
|
||||
En esta sección del plan de estudios, se te presentarán conceptos importantes para convertirte en un desarrollador profesional.
|
||||
|
||||
### Temas
|
||||
|
||||
1. [Introducción a los lenguajes de programación y herramientas del oficio](../1-intro-to-programming-languages/translations/README.es.md)
|
||||
2. [Introducción a GitHub](../2-github-basics/translations/README.es.md)
|
||||
3. [Conceptos básicos de Accesibilidad](../3-accessibility/translations/README.es.md)
|
||||
|
||||
### Créditos
|
||||
|
||||
Introducción a lenguajes de programación y herramientas del oficio fue escrito con ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
|
||||
Introducción a GitHub fue escrito con ♥️ por [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Conceptos básicos de Accesibilidad fue escrito con ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
### क्रेडिट
|
||||
|
||||
एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा ♥️ से लिखा गया था
|
||||
एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा ♥️ से लिखा गया था।
|
||||
|
||||
GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ से लिखा गया था
|
||||
GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ से लिखा गया था।
|
||||
|
||||
प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ से लिखा गया था
|
||||
प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ से लिखा गया था।
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
# ਵੈੱਬ ਵਿਕਾਸ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ
|
||||
|
||||
ਕੋਰਸ ਦੇ ਇਸ ਭਾਗ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਾਰ ਬਣਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਗੈਰ-ਪ੍ਰੋਜੈਕਟ ਅਧਾਰਤ ਸੰਕਲਪਾਂ ਨਾਲ ਜਾਣੂ ਕਰਵਾਇਆ ਜਾਵੇਗਾ।
|
||||
|
||||
### ਵਿਸ਼ਾ
|
||||
|
||||
1. [ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ](../1-intro-to-programming-languages/translations/README.en.md)
|
||||
2. [GitHub ਬੇਸਿਕਸ](../2-github-basics/translations/README.en.md)
|
||||
3. [ਪਹੁੰਚਯੋਗਤਾ ਮੂਲ ਗੱਲਾਂ](../3-accessibility/translations/README.en.md)
|
||||
|
||||
### ਕ੍ਰੈਡਿਟ
|
||||
|
||||
ਪਹੁੰਚਯੋਗਤਾ ਦੀਆਂ ਬੁਨਿਆਦੀ ਗੱਲਾਂ [ਕ੍ਰਿਸਟੋਫਰ ਹੈਰੀਸਨ](https://twitter.com/geektrainer) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀਆਂ ਗਈਆਂ ਸਨ।
|
||||
|
||||
GitHub ਦੀ ਜਾਣ-ਪਛਾਣ [floordress](https://twitter.com/floordtrees) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ।
|
||||
|
||||
ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ [ਜੈਸਮੀਨ ਗ੍ਰੀਨਵੇ] (https://twitter.com/paladique) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ।
|
|
@ -4,9 +4,9 @@ Nesta seção do currículo, você será introduzida a conceitos não baseados e
|
|||
|
||||
### Tópicos
|
||||
|
||||
1. [Introdução a Linguagens de Programação e Ferramentas](1-intro-to-programming-languages/README..pt.md)
|
||||
2. [GitHub Básico](2-github-basics/README.pt.md)
|
||||
3. [Acesibilidade Básica](3-accessibility/README.pt.md)
|
||||
1. [Introdução a Linguagens de Programação e Ferramentas](../1-intro-to-programming-languages/translations/README.pt.md)
|
||||
2. [GitHub Básico](../2-github-basics/translations/README.pt.md)
|
||||
3. [Acesibilidade Básica](../3-accessibility/translations/README.pt.md)
|
||||
|
||||
### Créditos
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
|
||||
|
||||
|
@ -107,7 +107,7 @@ Constants are similar to variables, with two exceptions:
|
|||
|
||||
Variables can store many different types of values, like numbers and text. These various types of values are known as the **data type**. Data types are an important part of software development because it helps developers make decisions on how the code should be written and how the software should run. Furthermore, some data types have unique features that help transform or extract additional information in a value.
|
||||
|
||||
✅ Data Types are also referred to as JavaScript data primitives, as they are the lowest-level data types that are provided by the language. There are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol. Take a minute to visualize what each of these primitives might represent. What is a `zebra`? How about `0`? `true`?
|
||||
✅ Data Types are also referred to as JavaScript data primitives, as they are the lowest-level data types that are provided by the language. There are 7 primitive data types: string, number, bigint, boolean, undefined, null and symbol. Take a minute to visualize what each of these primitives might represent. What is a `zebra`? How about `0`? `true`?
|
||||
|
||||
### Numbers
|
||||
|
||||
|
|
|
@ -99,7 +99,7 @@ Las constantes son similares a las variables, con dos excepciones:
|
|||
|
||||
Arriba está cambiando el valor del objeto pero no la referencia en sí, lo que lo permite.
|
||||
|
||||
> Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _immutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
|
||||
> Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _inmutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
|
||||
|
||||
## Tipos de datos
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
Cette leçon couvre les bases de JavaScript, le language qui permet l'interactivité sur le web.
|
||||
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
|
||||
|
||||
|
|
|
@ -28,15 +28,15 @@
|
|||
|
||||
### कार्य - वेरिएबल्स के साथ काम करना
|
||||
|
||||
1. ** एक वेरिएबल्स की घोषणा **। चलो 'let' कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
|
||||
1. **एक वेरिएबल की घोषणा**। चलो `let` कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
|
||||
|
||||
```javascript
|
||||
let myVariable;
|
||||
```
|
||||
|
||||
`myVariable` अब` let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
|
||||
`myVariable` अब `let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
|
||||
|
||||
1. **एक मान असाइन करें**। वैरिएबल में `= 'ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
|
||||
1. **एक मान असाइन करें**। वैरिएबल में `=` ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
|
||||
|
||||
```javascript
|
||||
myVariable = 123;
|
||||
|
@ -46,7 +46,7 @@
|
|||
|
||||
`myVariable` अब मूल्य 123 के साथ * प्रारंभ * कर दिया गया है।
|
||||
|
||||
1. **रिफ्लेक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
|
||||
1. **रिफैक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
|
||||
|
||||
```javascript
|
||||
let myVariable = 123;
|
||||
|
@ -54,7 +54,7 @@
|
|||
|
||||
उपरोक्त को _explicit initialization_ कहा जाता है जब एक चर घोषित किया जाता है और एक ही समय में एक मान निर्दिष्ट किया जाता है।
|
||||
|
||||
1. **Change the variable value**. Change the variable value in the following way:
|
||||
1. **वेरिएबल का मान बदलें**। वेरिएबल के मान को निम्न तरीके से बदलें:
|
||||
|
||||
```javascript
|
||||
myVariable = 321;
|
||||
|
@ -99,7 +99,7 @@ const MY_VARIABLE = 123;
|
|||
|
||||
ऊपर आप ऑब्जेक्ट के मूल्य को बदल रहे हैं, लेकिन स्वयं संदर्भ को नहीं, जो इसे अनुमति देता है।
|
||||
|
||||
> ध्यान दें, एक 'const' का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
|
||||
> ध्यान दें, एक `const` का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
|
||||
|
||||
## डाटा प्रकार
|
||||
|
||||
|
@ -129,7 +129,7 @@ const MY_VARIABLE = 123;
|
|||
|
||||
✅ कोशिश करो! अपने ब्राउज़र के कंसोल में एक अंकगणितीय ऑपरेशन आज़माएँ। क्या परिणाम आपको आश्चर्यचकित करते हैं?
|
||||
|
||||
### Strings
|
||||
### स्ट्रिंग्स
|
||||
|
||||
स्ट्रिंग्स ऐसे पात्रों के समूह हैं जो एकल या दोहरे उद्धरणों के बीच रहते हैं।
|
||||
|
||||
|
@ -155,7 +155,7 @@ myString1 + ", " + myString2 + "!"; //Hello, World!
|
|||
|
||||
```
|
||||
|
||||
✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन` '1' + '1' = 11? `इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
|
||||
✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन `'1' + '1' = 11?` इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
|
||||
|
||||
**टेम्पलेट लिटेरल्स** स्ट्रिंग्स को फॉर्मेट करने का एक और तरीका है, उद्धरणों के बजाय, बैकटिक का उपयोग किया जाता है। जो कुछ भी सादा पाठ नहीं है, उसे प्लेसहोल्डर्स `$ {}` के अंदर रखा जाना चाहिए। इसमें कोई भी चर शामिल है जो तार हो सकते हैं।
|
||||
|
||||
|
@ -171,7 +171,7 @@ let myString2 = "World";
|
|||
|
||||
✅ आप टेम्प्लेट शाब्दिक लिटेरल्स सादे स्ट्रिंग का उपयोग कब करेंगे?
|
||||
|
||||
### बुलैंस
|
||||
### बूलियन्स
|
||||
|
||||
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#अंकगणितीय-आपरेटर) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
|
||||
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
# Məlumat növləri üzrə məşqlər
|
||||
|
||||
## Təlimatlar
|
||||
|
||||
Təsəvvür edin ki, bir alış-veriş səbəti düzəldin. Alış-veriş təcrübənizi tamamlamaq üçün lazım olan məlumat növləri haqqında bəzi sənədləri yazın. Seçimlərinizə necə gəldiniz?
|
||||
|
||||
## Ünvan kitabçası
|
||||
|
||||
Meyarlar | Əla | adekvat | Təkmilləşdirmələr lazımdır
|
||||
--- | --- | --- | - |
|
||||
|| Altı məlumat növü onların istifadəsini sənədləşdirərək ətraflı şəkildə sadalanır və araşdırılır | Dörd növ məlumat tədqiq edilir | İki növ məlumat tədqiq edilir |
|
|
@ -12,7 +12,7 @@ When we think about writing code, we always want to ensure our code is readable.
|
|||
|
||||
> 🎥 Click the image above for a video about methods and functions.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Functions
|
||||
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
# Conceptos básicos de JavaScript: funcións y funciones
|
||||
# Conceptos básicos de JavaScript: función y funciones
|
||||
|
||||
[![funcións y funciones](https://img.youtube.com/vi/DdCRhOQibMo/0.jpg)](https://youtube.com/watch?v=DdCRhOQibMo "funcións y funciones")
|
||||
[![función y funciones](https://img.youtube.com/vi/DdCRhOQibMo/0.jpg)](https://youtube.com/watch?v=DdCRhOQibMo "función y funciones")
|
||||
|
||||
## [Pre-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
|
||||
|
||||
Cuando necesite su código para realizar una tarea, utilizará un función o una función. Analicemos las diferencias.
|
||||
Cuando necesite su código para realizar una tarea, utilizará una función. Analicemos las diferencias.
|
||||
|
||||
## Funciones
|
||||
|
||||
|
@ -20,19 +20,19 @@ function name(param, param2, param3) { // definición de función
|
|||
}
|
||||
```
|
||||
|
||||
## Funciónes (Functions)
|
||||
## Funciones
|
||||
|
||||
En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!
|
||||
|
||||
Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.
|
||||
|
||||
## Creating and calling a function
|
||||
## Creando y llamando a una función
|
||||
|
||||
La sintaxis de una función se parece a la siguiente:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // function definition
|
||||
// function definition/body
|
||||
function nameOfFunction() { // definición de función
|
||||
// Código de la función
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -47,7 +47,7 @@ function displayGreeting() {
|
|||
Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
// llamando nuestra función
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
|
@ -142,7 +142,7 @@ En el código anterior, se devuelve la variable `sum`.
|
|||
|
||||
### Invocación
|
||||
|
||||
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El función `add()` introducido se puede invocar de la siguiente manera:
|
||||
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. La función `add()` introducido se puede invocar de la siguiente manera:
|
||||
|
||||
|
||||
```javascript
|
||||
|
@ -179,7 +179,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista
|
|||
🚀 Desafío:
|
||||
|
||||
|
||||
## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
## [Prueba de validación de conocimientos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que
|
|||
|
||||
> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les méthodes et les fonctions.
|
||||
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Fonctions
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
# जावास्क्रिप्ट मूल बातें: तरीके और कार्य
|
||||
# जावास्क्रिप्ट मूल बातें: मेथड्स और फंक्शन्स
|
||||
|
||||
![जावास्क्रिप्ट मूल बातें - कार्य](/sketchnotes/webdev101-js-functions.png)
|
||||
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||
|
@ -6,18 +6,18 @@
|
|||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=hi)
|
||||
|
||||
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह काउंटरटाइनेटिव लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
|
||||
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह तर्कविरूद्ध लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
|
||||
|
||||
[![मेथड्स एंड फ़ंक्शंस ](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स एंड फ़ंक्शंस")
|
||||
[![मेथड्स एंड फ़ंक्शंस ](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स और फ़ंक्शंस")
|
||||
|
||||
> मेथड्स एंड फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||
> मेथड्स और फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||
|
||||
|
||||
## फ़ंक्शंस
|
||||
|
||||
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य कार्यों से भी कॉल कर सकते हैं!
|
||||
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य फंक्शन्स से भी एक फंक्शन को कॉल कर सकते हैं!
|
||||
|
||||
बस के रूप में महत्वपूर्ण एक समारोह का नाम करने की क्षमता है। हालांकि यह तुच्छ प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर को रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
|
||||
एक फंक्शन का नाम रखने की क्षमता भी इतनी ही महत्वपूर्ण है। हालांकि यह भ्रामक प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
|
||||
|
||||
## फंक्शन बनाना और कॉल करना
|
||||
|
||||
|
@ -37,14 +37,14 @@ function displayGreeting() {
|
|||
}
|
||||
```
|
||||
|
||||
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम `()` के बाद फ़ंक्शन के नाम का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
|
||||
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम फ़ंक्शन के नाम के बाद `()` का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
|
||||
|
||||
```javascript
|
||||
// calling our function
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **method** के रूप में जाना जाता है, जिसे आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। किसी कार्य को किसी फ़ंक्शन से अलग करने वाली विधि एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री फ़्लोटिंग है। आपने सुना होगा कई डेवलपर्स इन शब्दों का इस्तेमाल परस्पर करते हैं।
|
||||
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **मेथड** के रूप में जाना जाता है, जिसका आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। जो चीज मेथड को फंक्शन से अलग बनाती है वो है की मेथड एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री-फ़्लोटिंग है। आप कई डेवलपर्स से इन शब्दों का इस्तेमाल परस्पर करते सुनेंगे।
|
||||
|
||||
### सर्वोत्तम फ़ंक्शन प्रथाएं
|
||||
|
||||
|
@ -56,9 +56,9 @@ displayGreeting();
|
|||
|
||||
## किसी फ़ंक्शन के लिए जानकारी पास करना
|
||||
|
||||
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello,world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
|
||||
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello, world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
|
||||
|
||||
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया गया है और अल्पविराम को अलग किया जाता है:
|
||||
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया जाता है और अल्पविराम को अलग किया जाता है:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
@ -102,7 +102,7 @@ displayGreeting('Christopher', 'Hi');
|
|||
// displays "Hi, Christopher"
|
||||
```
|
||||
|
||||
## मान लौटाएं
|
||||
## आउटपुट लौटाएं
|
||||
|
||||
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
|
||||
|
||||
|
@ -192,4 +192,4 @@ setTimeout(() => {
|
|||
|
||||
## असाइनमेंट
|
||||
|
||||
[फन विथ फंशन्स ](assignment.hi.md)
|
||||
[फन विथ फंशन्स ](assignment.hi.md)
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
# Funksiyalarla Əylən
|
||||
|
||||
## Təlimatlar
|
||||
|
||||
Fərqli funksiyalar yaradın, həm nəyisə qaytaran funksiyalar, həm də heç nə qaytarmayan funksiyalar.
|
||||
|
||||
Defolt dəyərləri olan parametrlər və parametrlərin qarışığı olan bir funksiya yarada bildiyinizə baxın.
|
||||
|
||||
## Rubrika
|
||||
|
||||
| Meyarlar | Nümunəvi | Müvafiq | Təkmilləşdirmə Ehtiyacı var |
|
||||
| -------- | ------------------------------------------------- ----------------------------------- | ------------------------------------------------- -------------- | ----------------- |
|
||||
| | Həll müxtəlif parametrlərə malik iki və ya daha çox yaxşı işləyən funksiya ilə təklif olunur | İşçi həll bir funksiya və bir neçə parametr ilə təklif olunur | Həlldə səhvlər var |
|
|
@ -9,5 +9,5 @@ Vea si puede crear una función que tenga una combinación de parámetros y par
|
|||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- |
|
||||
| -------- | ------------------------------------ | -------------- | ----------------- |
|
||||
| | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores |
|
||||
|
|
|
@ -12,7 +12,7 @@ Making decisions and controlling the order in which your code runs makes your co
|
|||
|
||||
> 🎥 Click the image above for a video about making decisions.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
|
||||
## A Brief Recap on Booleans
|
||||
|
||||
Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
|
||||
|
@ -45,7 +45,7 @@ The if statement will run code in between its blocks if the condition is true.
|
|||
|
||||
```javascript
|
||||
if (condition){
|
||||
//Condition was true. Code in this block will run.
|
||||
//Condition is true. Code in this block will run.
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -56,7 +56,7 @@ let currentMoney;
|
|||
let laptopPrice;
|
||||
|
||||
if (currentMoney >= laptopPrice){
|
||||
//Condition was true. Code in this block will run.
|
||||
//Condition is true. Code in this block will run.
|
||||
console.log("Getting a new laptop!");
|
||||
}
|
||||
```
|
||||
|
@ -70,17 +70,56 @@ let currentMoney;
|
|||
let laptopPrice;
|
||||
|
||||
if (currentMoney >= laptopPrice){
|
||||
//Condition was true. Code in this block will run.
|
||||
//Condition is true. Code in this block will run.
|
||||
console.log("Getting a new laptop!");
|
||||
}
|
||||
else{
|
||||
//Condition was false. Code in this block will run.
|
||||
//Condition is false. Code in this block will run.
|
||||
console.log("Can't afford a new laptop, yet!");
|
||||
}
|
||||
```
|
||||
|
||||
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned `console.log()`.
|
||||
|
||||
|
||||
## Switch Statement
|
||||
|
||||
The `switch` statement is used to perform different actions based on different conditions.Use the `switch` statement to select one of many code blocks to be executed.
|
||||
|
||||
```javascript
|
||||
switch(expression) {
|
||||
case x:
|
||||
// code block
|
||||
break;
|
||||
case y:
|
||||
// code block
|
||||
break;
|
||||
default:
|
||||
// code block
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// program using switch statement
|
||||
let a = 2;
|
||||
|
||||
switch (a) {
|
||||
|
||||
case 1:
|
||||
a = 'one';
|
||||
break;
|
||||
case 2:
|
||||
a = 'two';
|
||||
break;
|
||||
default:
|
||||
a = 'not found';
|
||||
break;
|
||||
}
|
||||
console.log(`The value is ${a}`);
|
||||
```
|
||||
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the varaiable a to change the returned `console.log()`.
|
||||
|
||||
|
||||
## Logical Operators and Booleans
|
||||
|
||||
Decisions might require more than one comparison, and can be strung together with logical operators to produce a Boolean value.
|
||||
|
@ -101,11 +140,11 @@ let laptopPrice;
|
|||
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
|
||||
|
||||
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
|
||||
//Condition was true. Code in this block will run.
|
||||
//Condition is true. Code in this block will run.
|
||||
console.log("Getting a new laptop!");
|
||||
}
|
||||
else {
|
||||
//Condition was true. Code in this block will run.
|
||||
//Condition is true. Code in this block will run.
|
||||
console.log("Can't afford a new laptop, yet!");
|
||||
}
|
||||
```
|
||||
|
|
|
@ -12,7 +12,7 @@ Prendre des décisions et contrôler l'ordre dans lequel votre code s'exécute r
|
|||
|
||||
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur la prise de décisions.
|
||||
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
|
||||
## Un bref récapitulatif sur les booléens
|
||||
|
||||
Les booléens ne peuvent avoir que deux valeurs : `true` ou `false`. Les booléens aident à prendre des décisions sur les lignes de code à exécuter lorsque certaines conditions sont remplies.
|
||||
|
|
|
@ -85,7 +85,7 @@ else{
|
|||
| シンボル | 説明 | 例 |
|
||||
| -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| `&&` | **論理積**: 2つのブール式を逆さにします。両辺が真の場合 **のみ** true を返します。 | `(5 > 6) && (5 < 6 ) //片方が false、もう片方が true です。false を返します。` |
|
||||
| `||` | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。 | `(5 > 6) || (5 < 6) //片方が false、もう片方が true です。true を返します。` |
|
||||
| `\|\|` | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。 | `(5 > 6) \|\| (5 < 6) //片方が false、もう片方が true です。true を返します。` |
|
||||
| `!` | **論理否定**: ブール式の反対の値を返します。 | `!(5 > 6) // 5は6より大きくないが、"!" は true を返す` |
|
||||
|
||||
## 論理演算子を用いた条件と決定
|
||||
|
|
|
@ -11,7 +11,7 @@ Tomar decisões e controlar a ordem do que é executado no seu código o torna r
|
|||
|
||||
> 🎥 Clique na imagem acima para ver um video sobre tomada de decisões
|
||||
|
||||
> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
|
||||
> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Uma breve recapitulação sobre Booleanos
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ This lesson covers the basics of JavaScript, the language that provides interact
|
|||
|
||||
> 🎥 Click the images above for videos about arrays and loops.
|
||||
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
|
||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Arrays
|
||||
|
||||
|
@ -68,7 +68,7 @@ iceCreamFlavors.length; //5
|
|||
|
||||
## Loops
|
||||
|
||||
Loops allow for repetitive or **iterative** tasks, and can save a lot of time and code. Each iteration can vary in their variables, values, and conditions. There are different types of loops in JavaScript, and they have small differences, but essentially do the same thing: loop over data.
|
||||
Loops allow us to perform repetitive or **iterative** tasks, and can save a lot of time and code. Each iteration can vary in their variables, values, and conditions. There are different types of loops in JavaScript, and they all have small differences, but essentially do the same thing: loop over data.
|
||||
|
||||
### For Loop
|
||||
|
||||
|
@ -88,7 +88,7 @@ for (let i = 0; i < 10; i++) {
|
|||
|
||||
### While loop
|
||||
|
||||
Unlike the syntax for the `for` loop, `while` loops only require a condition that will stop the loop when `false`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop.
|
||||
Unlike the syntax of the `for` loop, `while` loops only require a condition that will stop the loop when the condition becomes `false`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop.
|
||||
|
||||
```javascript
|
||||
//Counting up to 10
|
||||
|
@ -127,7 +127,7 @@ There are other ways of looping over arrays other than for and while loops. Ther
|
|||
|
||||
## Review & Self Study
|
||||
|
||||
Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
|
||||
Arrays in JavaScript have many methods attached to them, that are extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
|
||||
|
||||
## Assignment
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interacti
|
|||
[![Les boucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Les boucles")
|
||||
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
|
||||
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
|
||||
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
|
||||
## Les tableaux
|
||||
|
||||
Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
|
||||
|
|
|
@ -14,14 +14,14 @@ Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporci
|
|||
|
||||
> 🎥 Clique na imagem acima para um vídeo sobre arrays e loops.
|
||||
|
||||
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
|
||||
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
## Arrays
|
||||
Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz.
|
||||
|
||||
✅ Os arrays estão à nossa volta! Consegue pensar num exemplo da vida real de uma matriz, tal como uma matriz de painéis solares?
|
||||
|
||||
A sintaxe de uma matriz é um par de parênteses rectos.
|
||||
A sintaxe de uma matriz é um par de colchetes.
|
||||
|
||||
```javscript
|
||||
let myArray = [];
|
||||
|
@ -33,7 +33,7 @@ Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com
|
|||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
```
|
||||
|
||||
Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com parênteses rectos para recuperar, alterar, ou inserir valores da array.
|
||||
Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com colchetes para recuperar, alterar, ou inserir valores da array.
|
||||
|
||||
✅ Surpreende-o que as arrays comecem pelo índice zero? Em algumas linguagens de programação, os índices começam em 1. Há uma história interessante em torno disto, que pode [ler na Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||
|
||||
|
@ -98,7 +98,7 @@ while (i < 10) {
|
|||
}
|
||||
```
|
||||
|
||||
✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões [pode ser interessante para si](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões [pode ser interessante para você](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
|
||||
## Laços e Arrays
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Instrucciones
|
||||
|
||||
Cree un programa que enumere cada tercer número entre 1 y 20 y lo imprima en la consola.
|
||||
Cree un programa que enumere cada tercer número entre 1 y 20 e imprimalo en la consola.
|
||||
|
||||
> SUGERENCIA: use un bucle for y modifique la expresión-iteración
|
||||
|
||||
|
@ -10,4 +10,4 @@ Cree un programa que enumere cada tercer número entre 1 y 20 y lo imprima en la
|
|||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||
| | El programa se ejecuta correctamente y está comentado | Programa no comentado | El programa está incompleto o con errores |
|
||||
| | El programa se ejecuta correctamente y está comentado | Programa no comentado | El programa está incompleto o con errores |
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## 説明書
|
||||
|
||||
1~20の間の3番目の数字をすべてリストアップしてコンソールに表示するプログラムを作成します。
|
||||
1~20の間の数字を3つおきに(3の倍数を)すべてリストアップしてコンソールに表示するプログラムを作成します。
|
||||
|
||||
> TIP: for-loop を使用して、反復式を変更します。
|
||||
|
||||
|
@ -10,4 +10,4 @@
|
|||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||
| | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
|
||||
| | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
|
||||
|
|
|
@ -7,7 +7,7 @@ JavaScript es el lenguaje de la web. En estas cuatro lecciones, aprenderá sus c
|
|||
1. [Variables y tipos de datos](../1-data-types/translations/README.es.md)
|
||||
2. [Funciones y métodos](../2-functions-methods/translations/README.es.md)
|
||||
3. [Toma de decisiones con JavaScript](../3-making-decisions/translations/README.es.md)
|
||||
4. [Arrays and Loops](../4-arrays-loops/translations/README.es.md)
|
||||
4. [Matrices y bucles](../4-arrays-loops/translations/README.es.md)
|
||||
|
||||
### Créditos
|
||||
|
||||
|
|
|
@ -4,10 +4,10 @@
|
|||
|
||||
### विषय
|
||||
|
||||
1. [वेरिएबल्स और डेटा प्रकार](../1-data-types/README.hi.md)
|
||||
2. [फंक्शंस और मेथड्स](../2-functions-methods/README.hi.md)
|
||||
3. [जावास्क्रिप्ट के साथ निर्णय करना](../3-making-decisions/README.hi.md)
|
||||
4. [अर्रेंज और लूप्स ](../4-arrays-loops/README.hi.md)
|
||||
1. [वेरिएबल्स और डेटा प्रकार](../1-data-types/translations/README.hi.md)
|
||||
2. [फंक्शंस और मेथड्स](../2-functions-methods/translations/README.hi.md)
|
||||
3. [जावास्क्रिप्ट के साथ निर्णय करना](../3-making-decisions/translations/README.hi.md)
|
||||
4. [अर्रेंज और लूप्स ](../4-arrays-loops/translations/README.hi.md)
|
||||
|
||||
### आभार सूची
|
||||
|
||||
|
|
|
@ -4,11 +4,11 @@ JavaScript это язык веб-программирования. В этих
|
|||
|
||||
### Уроки
|
||||
|
||||
1. [Переменные и типы данных](#)
|
||||
2. [Функции и методы](#)
|
||||
3. [Принятие решений с помощью JavaScript](#)
|
||||
4. [Массивы и циклы](#)
|
||||
1. [Переменные и типы данных](../1-data-types/README.md)
|
||||
2. [Функции и методы](../2-functions-methods/README.md)
|
||||
3. [Принятие решений с помощью JavaScript](../3-making-decisions/README.md)
|
||||
4. [Массивы и циклы](../4-arrays-loops/README.md)
|
||||
|
||||
### Благодарность
|
||||
|
||||
Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring).
|
||||
Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring).
|
||||
|
|
|
@ -229,7 +229,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though
|
|||
|
||||
HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future?
|
||||
|
||||
Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
|
||||
Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
|
||||
## Assignment
|
||||
|
|
|
@ -15,7 +15,15 @@ En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de n
|
|||
|
||||
En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo:
|
||||
|
||||
! [explorador en VS Code](images / vs-code-index.png)
|
||||
![explorador en VS Code](../../images/vs-code-index.png)
|
||||
|
||||
|
||||
O use estos comandos en tu git bash:
|
||||
|
||||
`mkdir terrarium`
|
||||
`cd terrarium`
|
||||
`touch index.html`
|
||||
`code index.html` o `nano index.html`
|
||||
|
||||
> Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL.
|
||||
|
||||
|
@ -97,7 +105,7 @@ Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `<div>`
|
|||
|
||||
Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
|
||||
|
||||
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../images); (hay 14 imágenes de plantas).
|
||||
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../../solution/images); (hay 14 imágenes de plantas).
|
||||
|
||||
### Tarea:
|
||||
|
||||
|
|
|
@ -225,7 +225,7 @@ Il existe quelques "vieilles" balises sauvages en HTML avec lesquelles il est en
|
|||
|
||||
Le HTML est le système de blocs de construction qui a contribué à faire du Web ce qu'il est aujourd'hui. Apprenez-en un peu plus sur son histoire en étudiant certaines balises anciennes et nouvelles. Pouvez-vous comprendre pourquoi certaines balises ont été supprimées et d'autres ajoutées ? Quelles balises pourraient être introduites à l'avenir ?
|
||||
|
||||
Pour en savoir plus sur la création de sites pour le web et les appareils mobiles, consultez le site [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
|
||||
Pour en savoir plus sur la création de sites pour le web et les appareils mobiles, consultez le site [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
|
||||
## Exercice
|
||||
|
|
|
@ -224,7 +224,7 @@ Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocar
|
|||
|
||||
L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro?
|
||||
|
||||
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
|
||||
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
|
||||
## Compito
|
||||
|
|
|
@ -106,7 +106,7 @@ HTML では、.html ファイルにタグを追加して Web ページの要素
|
|||
|
||||
閉じタグを必要としない html タグの一つに `<img>` タグがあります。なぜなら、ページがアイテムをレンダリングするために必要なすべての情報を含む `src` 要素を持っているからです。
|
||||
|
||||
アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
|
||||
アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
|
||||
|
||||
### タスク
|
||||
|
||||
|
@ -223,7 +223,7 @@ HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつ
|
|||
|
||||
HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか?将来的にはどのようなタグが導入されるかもしれませんか?
|
||||
|
||||
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa) で詳しく解説しています。
|
||||
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) で詳しく解説しています。
|
||||
|
||||
|
||||
## 課題
|
||||
|
|
|
@ -223,7 +223,7 @@ HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에
|
|||
|
||||
HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and true' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 연구하여 그 역사에 대해 조금 배우십시오. 일부는 더 이상 안 쓰고 일부는 새로 만들어진 이유를 알 수 있습니까? 앞으로 어떤 태그가 도입될까요?
|
||||
|
||||
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
|
||||
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
|
||||
|
||||
|
||||
## 과제
|
||||
|
|
|
@ -223,7 +223,7 @@ Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas
|
|||
|
||||
HTML é o sistema de blocos de construção 'testado e comprovado' que ajudou a construir a web no que ela é hoje. Aprenda um pouco sobre sua história estudando algumas tags antigas e novas. Você consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Quais tags podem ser introduzidas no futuro?
|
||||
|
||||
Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
|
||||
Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
|
||||
## Atribuiçao
|
||||
|
|
|
@ -225,7 +225,7 @@ HTML 中还有一些狂野的'旧'标签,玩起来仍然很有趣。虽然[这
|
|||
|
||||
HTML是 '久经考验的' 构建模块系统,它帮助构建了今天的 web 。通过研究一些旧的和新的标签来了解它的历史。你能找出为什么有些标签被弃用而有些被添加吗?未来可能引入哪些标签?
|
||||
|
||||
要了解更多关于为 web 和移动设备建立网站的信息,请访问:[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)。
|
||||
要了解更多关于为 web 和移动设备建立网站的信息,请访问:[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
|
||||
|
||||
|
||||
## 作业
|
||||
|
|
|
@ -223,7 +223,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊,也被稱作[
|
|||
|
||||
HTML 是一種「行之有效」的構築系統,建立了現今的各種網頁。從標籤來學習關於 HTML 的歷史,你能了解為什麼有的標籤被排除,而有的被新增上去嗎?有什麼標籤會在未來被建立上去呢?
|
||||
|
||||
學習更多關於建立網頁的資訊:[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)。
|
||||
學習更多關於建立網頁的資訊:[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
|
||||
|
||||
|
||||
## 作業
|
||||
|
|
|
@ -255,7 +255,7 @@ Add a 'bubble' shine to the left bottom area of the jar to make it look more gla
|
|||
|
||||
![finished terrarium](./images/terrarium-final.png)
|
||||
|
||||
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
|
|
|
@ -252,4 +252,4 @@ CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trat
|
|||
|
||||
**Asignación**: [Refactorización CSS](assignment.es.md)
|
||||
|
||||
[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
|
|
@ -250,7 +250,7 @@ Ajoutez un éclat "bulle" à la partie inférieure gauche du pot pour qu'il ress
|
|||
|
||||
![terrarium terminé](../images/terrarium-final.png)
|
||||
|
||||
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
|
|
|
@ -248,7 +248,7 @@ Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del bara
|
|||
|
||||
![terrario finito](../images/terrarium-final.png)
|
||||
|
||||
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
|
|
|
@ -248,7 +248,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが
|
|||
|
||||
![finished terrarium](../images/terrarium-final.png)
|
||||
|
||||
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
|
|
|
@ -248,7 +248,7 @@ jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이
|
|||
|
||||
![finished terrarium](.././images/terrarium-final.png)
|
||||
|
||||
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## 강의 후 퀴즈
|
||||
|
||||
|
|
|
@ -0,0 +1,264 @@
|
|||
# 花艺瓶项目 Part 1: CSS 简介
|
||||
|
||||
![Introduction to CSS](../../../sketchnotes/webdev101-css.png)
|
||||
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制
|
||||
|
||||
## 课前测试
|
||||
|
||||
[课前测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
|
||||
|
||||
### 介绍
|
||||
|
||||
CSS,即层叠样式表,解决了网络开发的一个重要问题:如何让你的网站看起来更漂亮。对你的应用程序进行样式设计可以使它们更实用、更美观;你还可以使用 CSS 来创建响应式网页设计(RWD)--使你的网页可以根据不同窗口大小改变呈现方式。CSS 不仅可以让你的网页看起来漂亮;它还包括动画和转换,可以为你的网页提供复杂的交互。CSS 工作组帮助维护当前的 CSS 规范;你可以在[万维网联盟的网站](https://www.w3.org/Style/CSS/members).上关注他们的工作。
|
||||
|
||||
> 注意,CSS 是一种不断发展的语言,就像网络上的所有东西一样,并不是所有的浏览器都支持规范的最新部分。要经常通过 [CanIUse.com](https://caniuse.com) 来检查你的实现在相关浏览器的支持情况。
|
||||
|
||||
在本课中,我们将为我们的在线花艺瓶添加样式,并进一步了解几个 CSS 概念:层叠(Cascade)、继承(Inheritance)和选择器(Selectors)的使用、定位(Positioning)以及使用 CSS 构建布局(Layout)。在这个过程中,我们将对花艺瓶进行布局,并创建实际的花艺瓶本身。
|
||||
|
||||
### 先决条件
|
||||
|
||||
你应该已经为你的水族箱建立了HTML,并准备好了样式。
|
||||
|
||||
### 任务
|
||||
|
||||
在你的 `terrarium` 目录中,创建一个名为 `style.css` 的新文件。在 `<head>` 部分导入该文件:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 层叠(Cascade)
|
||||
|
||||
层叠样式表包含了样式“层叠”的概念,即一个样式的应用由其优先级来指导。由网站作者设置的样式优先于由浏览器设置的样式。“内联(Inline)”设置的样式优先于外部样式表中设置的样式。
|
||||
|
||||
### 任务
|
||||
在你的 `<h1>` 标签上添加内联样式 `"color: red"`:
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
然后,在你的`style.css`文件中添加以下代码:
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ 你的网页显示了哪种颜色?为什么?你能找到一个覆盖该样式的方法吗?你什么时候会想这样做,或者为什么不这样做?
|
||||
|
||||
---
|
||||
|
||||
## 继承(Inheritance)
|
||||
|
||||
样式会从一个父级的样式继承到一个子级的样式,这样嵌套的元素就继承了它们父级的样式。
|
||||
|
||||
### 任务
|
||||
|
||||
将 body 的字体设置为给定的字体,并检查查看嵌套元素的字体:
|
||||
|
||||
```CSS
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
打开你的浏览器控制台的“元素”标签,观察 H1 的字体。如浏览器中所述,它的字体继承自 body:
|
||||
|
||||
![inherited font](images/1.png)
|
||||
|
||||
✅ 你能让被嵌套的样式继承其他属性吗?
|
||||
|
||||
---
|
||||
|
||||
## CSS 选择器(Selectors)
|
||||
|
||||
### 标签
|
||||
|
||||
到目前为止,你的 `style.css` 文件只有几个标签的样式,而且页面看起来很奇怪:
|
||||
|
||||
```CSS
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
这种给标签样式的方式只能控制特别的元素。当你需要控制你的花艺瓶中许多植物的样式时,你需要利用 CSS 选择器。
|
||||
|
||||
### ID(Ids)
|
||||
|
||||
添加一些样式来布局左边和右边的容器。由于只有一个左边的容器和一个右边的容器,它们在标记中被赋予了 id 标记。要为它们设计样式,请使用 `#`。
|
||||
|
||||
```CSS
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
在这里,你把这些容器用绝对定位放在屏幕的最左边和右边,并对它们的宽度使用了百分比,这样它们就可以在小屏幕上缩放来正常显示。
|
||||
|
||||
✅ 这段代码相当重复,因此不要照抄;你能找到一个更好的方法来给这些 id 样式,也许可以用一个 id 和一个 class ?你需要修改 HTML 和 CSS。
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### 类(Classes)
|
||||
|
||||
在上面的例子中,你为屏幕上两个独特的元素设计了样式。如果你想让样式应用于屏幕上的许多元素,你可以使用 CSS 类。利用这种方法在左边和右边的容器中布局植物。
|
||||
|
||||
请注意,HTML 中的每个植物都有一个 id 和 class 的组合。JavaScript 稍后会利用 id 控制植物的摆放;CSS 则会使用 class 来选择并将样式套用在相应的植物上。
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
在你的 `style.css` 文件中添加以下内容:
|
||||
|
||||
```CSS
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
这个片段中值得注意的是相对和绝对定位的混合,我们将在下一节中介绍。我们先来看看使用百分比处理高度的方式:
|
||||
|
||||
你将 `plant-holder` 的高度设置为 13%,这是一个很好的数字,可以确保在不需要滚动的情况下,所有的植物都显示在每个垂直容器中。
|
||||
|
||||
你设置植物支架向左移动,让植物在其容器中居中。图片有大量的透明区域需要被拖拽进来,向左移动可以更好地在屏幕上显示。
|
||||
|
||||
然后,植物本身被赋予 150% 的最大宽度。这使得它可以随着浏览器的缩小而缩小。试着调整你的浏览器的窗口大小;植物将保持在它们的容器中,靠缩小尺寸以适应窗口大小。
|
||||
|
||||
同样值得注意的是 z-index 的使用,它可以控制一个元素的相对高度(这样,植物就可以坐在容器的顶部,看起来就像坐在花艺瓶内部一样)。
|
||||
|
||||
✅ 为什么你同时需要一个 `plant-holder` 和一个植物 CSS 选择器?
|
||||
|
||||
## 定位(Positioning)
|
||||
|
||||
混合位置属性(包括静态(Static)、相对(Relative)、固定(Fixed)、绝对(Absolute)和粘性(Sticky)位置)可能有点棘手,但如果操作得当,它可以让你很好地控制页面上的元素。
|
||||
|
||||
绝对定位的元素是相对于其父级元素定位的,如果没有,则根据 body 定位。
|
||||
|
||||
相对定位的元素是根据 CSS 指定的方向来调整其相对初始位置的位置。
|
||||
|
||||
在我们的例子中,`plant-holder` 是一个相对定位的元素,被定位在一个绝对定位的容器中。因此,容器被左右夹住,而嵌入其中的 `plant-holder` 会调整它在容器中的位置,为植物的竖排放置提供空间。
|
||||
|
||||
> `plant` 本身也有绝对定位,这是为了使其可拖动,你可以在下阶段课程中了解更多。
|
||||
|
||||
✅ 试着切换一下容器和 `plant-holder` 的定位类型。会发生什么?
|
||||
|
||||
## 布局(Layouts)
|
||||
|
||||
现在,你将利用你所学到的知识来建造花艺瓶本身,所有这些都是用CSS来完成的。
|
||||
|
||||
首先,使用CSS将 `.terrarium` div 的子级样式化为一个圆角矩形:
|
||||
|
||||
```CSS
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 1rem;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 60%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
bottom: 1%;
|
||||
left: 20%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
注意这里使用的是百分比。如果你缩小你的浏览器窗口,你可以看到罐子是如何缩放的。也可以注意到罐子元素的宽度和高度百分比,以及每个元素是如何被绝对定位在中心,钉在窗口的底部的。
|
||||
|
||||
我们还使用 `rem` 来表示 `border-radius`,这是一种字体相对的长度。在 [CSS 规范](https://www.w3.org/TR/css-values-3/#font-relative-lengths)中阅读更多关于这种相对测量的类型。
|
||||
|
||||
✅ 试着改变罐子的颜色和不透明度与泥土的颜色。会发生什么?为什么?
|
||||
|
||||
---
|
||||
|
||||
## 🚀挑战
|
||||
|
||||
在瓶子的左边底部区域添加一个“气泡反光”,使其看起来更像玻璃。你将对 `.jar-glossy-long` 和 `.jar-glossy-short` 进行样式化,使其看起来像一个反射的光泽。下面是它的成果图:
|
||||
|
||||
![花艺瓶成果图](../images/terrarium-final.png)
|
||||
|
||||
要完成课后测验,请通过这个学习模块:[用 CSS 样式化你的 HTML 网页](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
|
||||
## 课后测试
|
||||
|
||||
[课后测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
|
||||
|
||||
## 复习 & 预习
|
||||
|
||||
CSS 看似简单明了,但在试图为所有浏览器和所有屏幕尺寸完美地设计一个应用程序时,却存在许多挑战。CSS-Grid 和 Flexbox 是为了使这项工作更有条理、更可靠而开发的工具。通过游玩 [Flexbox Froggy](https://flexboxfroggy.com/) 和 [Grid Garden](https://codepip.com/games/grid-garden/) 来了解这些工具。
|
||||
|
||||
## 作业
|
||||
|
||||
[CSS 重构](assignment.md)
|
|
@ -248,7 +248,7 @@ h1 {
|
|||
|
||||
![盆栽盒成果圖](../images/terrarium-final.png)
|
||||
|
||||
在做課後測驗前,請先前往下列的學習頁面:[用 CSS 造型化你的網頁應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||
在做課後測驗前,請先前往下列的學習頁面:[用 CSS 造型化你的網頁應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
## 課後測驗
|
||||
|
||||
|
|
|
@ -116,7 +116,7 @@ In addition, the terrariumElement that is passed to this function is assigned a
|
|||
|
||||
## The Pointerdrag function
|
||||
|
||||
The terrariumElement is ready to be dragged around; when the `onpointerdown` event is fired, the function pointerDrag is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
|
||||
The `terrariumElement` is ready to be dragged around; when the `onpointerdown` event is fired, the function `pointerDrag` is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
|
||||
|
||||
### Task
|
||||
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
# Terrarium Project Part 3: DOM Manipulación y cierre
|
||||
|
||||
! [DOM y un cierre](/sketchnotes/webdev101-js.png)
|
||||
![DOM y un cierre](../../sketchnotes/webdev101-js.png)
|
||||
> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
|
||||
|
||||
### Introducción:
|
||||
|
||||
Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
|
||||
Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de frameworks de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
|
||||
|
||||
Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa.
|
||||
|
||||
|
@ -18,7 +18,7 @@ Usaremos un cierre para manipular el DOM.
|
|||
|
||||
![DOM tree representation](../images/dom-tree.png)
|
||||
|
||||
> Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
|
||||
> Una representación del DOM y el marcado HTML a modo de referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
|
||||
|
||||
En esta lección, completaremos nuestro proyecto de terrario interactivo creando el JavaScript que permitirá al usuario manipular las plantas en la página.
|
||||
|
||||
|
@ -135,7 +135,7 @@ Suceden varias cosas. Primero, evita que ocurran los eventos predeterminados que
|
|||
|
||||
En segundo lugar, abra `index.html` en una ventana del navegador e inspeccione la interfaz. Cuando hace clic en una planta, puede ver cómo se captura el evento 'e'. ¡Profundice en el evento para ver cuánta información recopila un evento de puntero hacia abajo!
|
||||
|
||||
A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas xey de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
|
||||
A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas X e Y de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
|
||||
|
||||
✅ ¿Está cada vez más claro por qué toda esta aplicación está construida con un gran cierre? Si no fuera así, ¿cómo mantendría el alcance para cada una de las 14 plantas arrastrables?
|
||||
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
|
||||
|
||||
A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction.
|
||||
A small drag and drop code-meditation. With a little HTML, JS and CSS, you will be able to build a web interface, style it, and even add multiple interactions of your choice.
|
||||
|
||||
![my terrarium](images/screenshot_gray.png)
|
||||
|
||||
# Lessons
|
||||
|
||||
1. [Intro to HTML](./1-intro-to-html/README.md)
|
||||
2. [Intro to CSS](./2-intro-to-css/README.md)
|
||||
3. [Intro to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
||||
1. [Introduction to HTML](./1-intro-to-html/README.md)
|
||||
2. [Introduction to CSS](./2-intro-to-css/README.md)
|
||||
3. [Introduction to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
## Credits
|
||||
|
||||
|
@ -16,19 +16,19 @@ Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
|||
|
||||
The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||
|
||||
The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
|
||||
The artwork is hand drawn by [Jen Looper](http://jenlooper.com) with the help of Procreate.
|
||||
|
||||
## Deploy your Terrarium
|
||||
|
||||
You can deploy, or publish your terrarium to the web using Azure Static Web Apps.
|
||||
You can deploy, or publish your terrarium on the web using Azure Static Web Apps.
|
||||
|
||||
1. Fork this repo
|
||||
|
||||
2. Press this button
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
|
||||
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A github folder will be created in your forked repository that will help Azure Static Web Apps' build services, build and publish your app to a new URL.
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ You can deploy, or publish your terrarium to the web using Azure Static Web Apps
|
|||
|
||||
2. Press this button
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
|
||||
|
||||
|
|
|
@ -24,4 +24,4 @@ Encuentre más información sobre eventos de punteros en los [documentos del W3C
|
|||
|
||||
Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/).
|
||||
|
||||
Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
|
||||
Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
|
|
@ -26,7 +26,7 @@ Vous pouvez déployer ou publier votre terrarium sur le Web à l'aide d'Azure St
|
|||
|
||||
2. Appuyez sur ce bouton
|
||||
|
||||
[![Bouton déployez sur Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Bouton déployez sur Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Parcourez l'assistant de création de votre application. Assurez-vous de définir la racine de l'application sur `/solution` ou sur la racine de votre base de code. Il n'y a pas d'API dans cette application, alors ne vous inquiétez pas pour en ajouter. Un dossier .github sera créé dans votre référentiel forké qui aidera le service de création d'Azure Static Web Apps à créer et à publier votre application sur une nouvelle URL.
|
||||
|
||||
|
|
|
@ -6,9 +6,9 @@
|
|||
|
||||
# पाठ
|
||||
|
||||
1. [एचटीएमएल का परिचय](../1-intro-to-html/README.hi.md)
|
||||
2. [सीएसएस का परिचय](../2-intro-to-css/README.hi.md)
|
||||
3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/README.hi.md)
|
||||
1. [एचटीएमएल का परिचय](../1-intro-to-html/translations/README.hi.md)
|
||||
2. [सीएसएस का परिचय](../2-intro-to-css/translations/README.hi.md)
|
||||
3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/translations/README.hi.md)
|
||||
|
||||
## आभार सूची
|
||||
|
||||
|
@ -26,6 +26,6 @@
|
|||
|
||||
2. इस बटन को दबाएँ
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा।
|
||||
|
|
|
@ -6,9 +6,9 @@ Una piccola meditazione sul codice drag and drop. Con un po' di HTML, JS e CSS,
|
|||
|
||||
# Lezioni
|
||||
|
||||
1. [Introduzione a HTML](./1-intro-to-html/README.md)
|
||||
2. [Introduzione a CSS](./2-intro-to-css/README.md)
|
||||
3. [Introduzione al DOM e alle Closure JavaScript](./3-intro-to-DOM-and-closures/README.md)
|
||||
1. [Introduzione a HTML](./1-intro-to-html/translations/README.it.md)
|
||||
2. [Introduzione a CSS](./2-intro-to-css/translations/README.it.md)
|
||||
3. [Introduzione al DOM e alle Closure JavaScript](./3-intro-to-DOM-and-closures/translations/README.it.md)
|
||||
|
||||
## Crediti
|
||||
|
||||
|
@ -26,7 +26,7 @@ La grafica è stata disegnata a mano da [Jen Looper](http://jenlooper.com) usand
|
|||
|
||||
2. Premere questo pulsante
|
||||
|
||||
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Seguire la procedura guidata per creare l'app. Assicurarsi di impostare la radice dell'app su `/solution` o la radice della propria base di codice. Non ci sono API in questa app, quindi non ci si deve preoccupare di aggiungerla. Verrà creata una cartella .github nel repository oggetto di fork del punto 1 che aiuterà il servizio di compilazione di Azure Static Web Apps a creare e pubblicare l'app in un nuovo URL.
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@ Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウ
|
|||
|
||||
2. このボタンを押します
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。
|
||||
|
||||
|
|
|
@ -26,6 +26,6 @@ Azure Static Web Apps를 사용하여 terrarium을 웹에 배포하거나 게시
|
|||
|
||||
2. 버튼을 누릅니다
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다.
|
||||
|
|
|
@ -26,7 +26,7 @@ U kunt uw terrarium op internet zetten of publiceren met Azure Static Web Apps.
|
|||
|
||||
2. druk op deze knop
|
||||
|
||||
[![Implementeer in Azure knop](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Implementeer in Azure knop](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Loop door de wizard om uw app te maken. Zorg ervoor dat u de app-root instelt op `/solution` of de root van uw codebase. Er zit geen API in deze app, dus maakt u geen zorgen om die toe te voegen. Er wordt een .github-map gemaakt in uw geforkte repo die Azure Static Web Apps helpt bij het bouwen van services en het publiceren van uw app naar een nieuwe URL.
|
||||
|
||||
|
|
|
@ -26,6 +26,6 @@ Você pode implantar ou publicar seu terrario na web usando o Azure Static Web A
|
|||
|
||||
2. Pressione este botão
|
||||
|
||||
[![Implemente para o botão Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Implemente para o botão Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.
|
||||
|
|
|
@ -6,9 +6,9 @@ Uma pequena reflexão de arrastar e soltar sobre o código. Com um pouco de HTML
|
|||
|
||||
# Lições
|
||||
|
||||
1. [Introdução ao CSS](./intro-to-css/README.md)
|
||||
2. [Introdução ao HTML](./intro-to-html/README.md)
|
||||
3. [Introdução ao DOM e JS Closures(fechamentos)](intro-to-DOM-and-js-closures/README.md)
|
||||
1. [Introdução ao HTML](../1-intro-to-html/README.md)
|
||||
2. [Introdução ao CSS](../2-intro-to-css/README.md)
|
||||
3. [Introdução ao DOM e JS Closures(fechamentos)](../3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
## Créditos
|
||||
|
||||
|
@ -27,6 +27,6 @@ Você pode fazer o deploy, ou publicar seu terrário na web usando o Azure Stati
|
|||
|
||||
2. Pressione esse botão
|
||||
|
||||
[![Deploy no Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy no Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo para ser `/solution` ou a raiz(root) de sua base de código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório bifurcado que ajudará os aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.
|
|
@ -26,6 +26,6 @@
|
|||
1. இந்த ரெப்போவை ஃபோர்க் செய்யுங்கள்
|
||||
2. இந்த பொத்தானை அழுத்தவும்
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. உங்கள் பயன்பாட்டை உருவாக்கும் வழிகாட்டி வழியாக நடக்கவும். பயன்பாட்டு வேர் `/solution` அல்லது உங்கள் கோட்பேஸின் வேர் என்று நீங்கள் அமைக்கிறீர்கள் என்பதை உறுதிப்படுத்தவும்.இந்த பயன்பாட்டில் ஏபிஐ இல்லை, எனவே அதை சேர்ப்பது பற்றி கவலைப்பட வேண்டாம்.உங்கள் ஃபோர்க் செய்யப்பட்ட ரெப்போவில் ஒரு கீட்ஹப் கோப்புறை உருவாக்கப்படும், இது அஸூர் ஸ்டேடிக் வெப் ஆப்ஸின் சேவையை உருவாக்கவும் உங்கள் பயன்பாட்டை ஒரு புதிய யுஆர்எல் க்கு வெளியிடவும் உதவும்.
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
2. 点击下方的按钮
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API,因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建,它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
2. 按下下方按鈕
|
||||
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
||||
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. 遵循指示建立你的網頁應用。請確保你的程式根目錄為 `/solution` 或者是你自己的專案位置。這項專案並不包含任何 API,你不需要考慮額外匯入的問題。 .github 資料夾會建立在你的分叉數據庫中,它會幫助 Azure Static Web Apps 的組建服務並發布你的應用到新的網址。
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ Escribir es una de las habilidades más subestimadas de los desarrolladores. La
|
|||
|
||||
> Entonces, ¡construyamos un juego de mecanografía!
|
||||
|
||||
Utilizará las habilidades de JavaScript, HTML y CSS que ha aprendido hasta ahora para crear este juego. El mismo le mostrara al jugador una cita aleatoria (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citas) y el tiempo que tarda el jugador en escribirlo con precisión.
|
||||
Utilizará las habilidades de JavaScript, HTML y CSS que ha aprendido hasta ahora para crear este juego. El mismo le mostrará al jugador una cita aleatoria (estamos usando las citas de [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) y el tiempo que tarda el jugador en escribirlo con precisión.
|
||||
|
||||
![demo](../images/demo.gif)
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@ Esta lição pressupõe que você esteja familiarizado com os seguintes conceito
|
|||
|
||||
## Lição
|
||||
|
||||
[Criando um jogo de digitação usando programação orientada a eventos](./typing-game/README.md)
|
||||
[Criando um jogo de digitação usando programação orientada a eventos](../typing-game/README.md)
|
||||
|
||||
## Créditos
|
||||
|
||||
|
|
|
@ -98,9 +98,9 @@ Create a new file named **index.html**. Add the following HTML:
|
|||
|
||||
### Launch the application
|
||||
|
||||
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) which will both host your application locally and refresh the browser each time you save.
|
||||
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) which will both host your application locally and refresh the browser each time you save.
|
||||
|
||||
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install**
|
||||
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) by following the link and clicking **Install**
|
||||
- You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation
|
||||
- Restart Visual Studio Code if prompted
|
||||
- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command palette
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
## Instructions
|
||||
|
||||
Create a small game that uses keyboard events to do tasks. It can be a different kind of typing game, or an art type game that paints pixels to the screen on keystrokes. Get creative!
|
||||
Create a small game that uses keyboard events to do tasks. It may be a different kind of typing game, or an art type game that paints pixels to the screen on keystrokes. Get creative!
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||
| | A full game is presented | The game is very minimal | The game has bugs |
|
||||
| |
|
||||
| | | | |
|
||||
|
|
|
@ -48,6 +48,8 @@ Before you start building, take a look at the process of building and deploying
|
|||
|
||||
![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](images/install-on-edge.png)
|
||||
|
||||
> Note: Make sure to toggle on developer mode and allow extension from other stores.
|
||||
|
||||
In essence, the process will be:
|
||||
|
||||
- build your extension using `npm run build`
|
||||
|
@ -67,9 +69,9 @@ CO2 Signal's API.
|
|||
- [an API key](https://www.co2signal.com/); enter your email in the box on this page and one will be sent to you
|
||||
- the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
|
||||
- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
|
||||
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
|
||||
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in your `package.json` file will be installed for use by your web asset
|
||||
|
||||
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
Take a minute to look through the codebase:
|
||||
|
||||
|
|
|
@ -68,7 +68,7 @@ API de CO2 Signal.
|
|||
- el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
|
||||
- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
|
||||
|
||||
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
Tómate un minuto para revisar el código base:
|
||||
|
||||
|
|
|
@ -69,7 +69,7 @@ l'API de CO2 Signal.
|
|||
- le [code de démarrage](../../start). Téléchargez le dossier `start`; vous allez compléter le code dans ce dossier.
|
||||
- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web.
|
||||
|
||||
✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
|
||||
✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
Prenez une minute pour parcourir la base de code:
|
||||
|
||||
|
|
|
@ -69,7 +69,7 @@ CO2 सिग्नल की एपीआई।
|
|||
- [स्टार्टर कोड](../start)। `start` फ़ोल्डर डाउनलोड करें; आप इस फ़ोल्डर में कोड पूरा कर लेंगे।
|
||||
- [एनपीएम](https://www.npmjs.com) -एनपीएम एक पैकेज प्रबंधन उपकरण है; इसे स्थानीय रूप से स्थापित करें और आपके वेब एसेट द्वारा उपयोग के लिए `package.json` फ़ाइल में सूचीबद्ध पैकेज इंस्टॉल किए जाएंगे
|
||||
|
||||
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) में पैकेज प्रबंधन के बारे में अधिक जानें
|
||||
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) में पैकेज प्रबंधन के बारे में अधिक जानें
|
||||
|
||||
कोडबेस के माध्यम से देखने के लिए एक मिनट लें:
|
||||
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
|
||||
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)では、パッケージ管理の詳細を学ぶことができます。
|
||||
|
||||
コードベースに目を通してみてください。
|
||||
|
||||
|
|
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче