From 492d235e5e08c9cfb0ccb5beb9b94dd8749e09ae Mon Sep 17 00:00:00 2001 From: Karine Moreira Date: Sun, 31 Oct 2021 17:54:46 -0300 Subject: [PATCH 01/19] translate to pt README about browsers (#497) Co-authored-by: Karine Moreira --- .../translations/README.pt.md | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 5-browser-extension/1-about-browsers/translations/README.pt.md diff --git a/5-browser-extension/1-about-browsers/translations/README.pt.md b/5-browser-extension/1-about-browsers/translations/README.pt.md new file mode 100644 index 00000000..bd7baff5 --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/README.pt.md @@ -0,0 +1,167 @@ +# Projeto de extensão do navegador, parte 1: tudo sobre navegadores + +![Browser sketchnote](/sketchnotes/browser.jpg) +> Esboço de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) + +## Leitura pré-quiz +[Leitura pré-quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23) + +### Introdução: + +As extensões do navegador adicionam funcionalidade adicional a um navegador. Mas antes de criar um, você deve aprender um pouco sobre como os navegadores funcionam. + +### Sobre o navegador: + +Nesta série de lições, você aprenderá como construir uma extensão de navegador que funcionará nos navegadores Chrome, Firefox e Edge. Nesta parte, você descobrirá como os navegadores funcionam e estruturará os elementos da extensão do navegador. + +Mas o que é exatamente um navegador? É um aplicativo de software que permite ao usuário final acessar o conteúdo de um servidor e exibi-lo em páginas da web. + +✅ Um pouco de história: o primeiro navegador chamava-se 'WorldWideWeb' e foi criado por Sir Timothy Berners-Lee em 1990. + +![primeiros navegadores](../images/earlybrowsers.jpg) +> Alguns navegadores antigos, por [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) + +Quando um usuário se conecta à Internet usando um endereço URL (Uniform Resource Locator), geralmente usando o protocolo de transferência de hipertexto por meio de um endereço `http` ou `https`, o navegador se comunica com um servidor da web e busca uma página da web. + +Nesse ponto, o mecanismo de renderização do navegador o exibe no dispositivo do usuário, que pode ser um telefone celular, desktop ou laptop. + +Os navegadores também têm a capacidade de armazenar o conteúdo em cache para que ele não precise ser recuperado do servidor todas as vezes. Eles podem registrar o histórico da atividade de navegação de um usuário, armazenar 'cookies', que são pequenos bits de dados que contêm informações usadas para armazenar a atividade de um usuário e muito mais. + +Uma coisa realmente importante a lembrar sobre os navegadores é que eles não são todos iguais! Cada navegador tem seus pontos fortes e fracos, e um desenvolvedor profissional da web precisa entender como fazer com que as páginas tenham um bom desempenho em navegadores diferentes. Isso inclui lidar com pequenas janelas de visualização, como as de um telefone celular, bem como quando um usuário está offline. + +Um site realmente útil que você provavelmente deve adicionar aos favoritos em qualquer navegador de sua preferência é [caniuse.com](https://www.caniuse.com). Quando você está construindo páginas da web, é muito útil usar as listas de tecnologias suportadas do caniuse para que você possa dar o melhor suporte aos seus usuários. + +✅ Como você pode saber quais navegadores são mais populares com a base de usuários do seu site? Verifique sua análise - você pode instalar vários pacotes de análise como parte de seu processo de desenvolvimento da web, e eles dirão quais navegadores são mais usados ​​pelos vários navegadores populares. + +## Extensões de navegador + +Por que você deseja construir uma extensão de navegador? É uma coisa útil para anexar ao seu navegador quando você precisa de acesso rápido às tarefas que tende a repetir. Por exemplo, se você precisar verificar as cores nas várias páginas da web com as quais interage, poderá instalar uma extensão de navegador com seletor de cores. Se você tiver problemas para lembrar as senhas, pode usar uma extensão do navegador para gerenciamento de senhas. + +As extensões do navegador também são divertidas de desenvolver. Eles tendem a gerenciar um número finito de tarefas que executam bem. + +✅ Quais são as suas extensões de navegador favoritas? Quais tarefas elas realizam? + +### Instalando extensões + +Antes de começar a construir, dê uma olhada no processo de construção e implantação de uma extensão de navegador. Embora cada navegador varie um pouco na forma como gerenciam essa tarefa, o processo é semelhante no Chrome e no Firefox a este exemplo no Edge: + +![instalar uma extensão de navegador](../images/install-on-edge.png) + +Basicamente, o processo será: + +- construir sua extensão usando `npm build` +- no navegador ir até o painel de extensões usando o ícone `...` na parte superior da direita +- se for uma nova instalação, selecione `load unpacked` para carregar uma nova extensão a partir de sua pasta (no nosso caso, é `/dist`) +- ou clique em `recarregar` se está recarregando a extensão já instalada + +✅ Estas instruções referem-se a extensões que você mesmo constrói; para instalar extensões que foram lançadas para seu navegador, você deve navegar até essas [lojas](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) e instalar a extensão de sua escolha. + + +### Iniciar + +Você vai construir uma extensão de navegador que exibe a pegada de carbono da sua região, mostrando o uso de energia da sua região e a fonte da energia. A extensão terá um formulário que coleta uma chave API para que você possa acessar a API do CO2 Signal. + +**Você precisa:** + +- [uma chave API](https://www.co2signal.com/); coloque seu email no formulário da página e uma chave será enviada para você. +- o [código de sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, EU uso 'US-NEISO'). +- o [código de inicio](../../start). Faça o download da pasta `start`; você irá completar o código desta pasta. +- [NPM](https://www.npmjs.com) - NPM é uma ferramenta de gerenciamento de pacotes; instale-o localmente e os pacotes listados em seu arquivo package.json serão instalados para uso por seu app da web. + +✅ Saiba mais sobre gerenciamento de pacotes neste [excelente módulo de aprendizagem](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) + +Reserve um minuto para examinar o código base: + +dist + - | manifest.json (padrões definidos aqui) + - | index.html (marcador HTML do front-end aqui) + - | background.js (JS de fundo aqui) + - | main.js (JS construído) +src + - | index.js (seu código JS vai aqui) + +✅ Assim que tiver a chave API e o código da região em mãos, armazene-os em uma nota para uso futuro. + +### Construir o HTML para a extensão + +Esta extensão possui duas visualizações. Uma para reunir a chave API e o código de região: + +![formulário da extensão](../images/1.png) + +E a segunda para mostrar o uso de carbono da região: + +![uso do carbono](../images/2.png) + +Vamos começar construindo o HTML para o formulário e estilizando-o com CSS. + +Na pasta `/dist`, você construirá um formulário e uma área de resultados. No arquivo `index.html`, preencha a área delineada do formulário: + +```HTML +
+
+

Novo? Adicione suas informações.

+
+
+ + +
+
+ + +
+ +
+``` + +Este é o formulário onde suas informações salvas serão inseridas e guardadas no armazenamento local. + +Em seguida, crie a área de resultados; após a tag final do formulário, adicione algumas divs: + + +```HTML +
+
carregando...
+
+
+
+

Região:

+

Uso de carbono:

+

Porcentagem de combustível fóssil:

+
+ +
+``` +Neste ponto, você pode tentar um build (construção). Certifique-se de instalar o pacote de dependências desta extensão: + +``` +npm install +``` + +Este comando usará npm, o Node Package Manager, para instalar o webpack para o processo de build (construção) de sua extensão. Webpack é um bundler (empacotador) que lida com a compilação de código. Você pode ver a saída desse processo olhando em `/dist/main.js` - você vê que o código foi empacotado. + +Por enquanto, a extensão deve ser construída (build) e, se você implantá-la (deploy) no Edge como uma extensão, verá um formulário perfeitamente exibido. + +Parabéns, você deu os primeiros passos para criar uma extensão de navegador. Nas lições subsequentes, você o tornará mais funcional e útil. + +--- + +## 🚀Desafio + +Dê uma olhada em uma loja de extensões de navegador e instale uma em seu navegador. Você pode examinar seus arquivos de maneiras interessantes. O que você descobriu? + +## Quiz pós-leitura +[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24) + +## Revisão e auto-estudo + +Nesta lição você aprendeu um pouco sobre a história do navegador da web; aproveite esta oportunidade para aprender como os inventores da World Wide Web imaginaram seu uso, lendo mais sobre sua história. Alguns sites úteis incluem: + +[A história dos navegadores web](https://www.mozilla.org/firefox/browsers/browser-history/) + +[História da Web](https://webfoundation.org/about/vision/history-of-the-web/) + +[Uma entrevista com Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-sueñe-un-poco-podemos-conseguir-la-web-que-queremos) + +## Tarefa +[Refatore o estilo de sua extensão](assignment.pt.md) + From ff0bf476bed2157294286c03f22a7a43d96f62df Mon Sep 17 00:00:00 2001 From: Quenrelia <93443342+Quenrelia@users.noreply.github.com> Date: Sun, 31 Oct 2021 20:55:21 +0000 Subject: [PATCH 02/19] French translation for 7-3-assignment (#487) * French translation for 7-3-assignment * Improve translation following feedback --- .../3-data/translations/assignment.fr.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 7-bank-project/3-data/translations/assignment.fr.md diff --git a/7-bank-project/3-data/translations/assignment.fr.md b/7-bank-project/3-data/translations/assignment.fr.md new file mode 100644 index 00000000..8f13a9b2 --- /dev/null +++ b/7-bank-project/3-data/translations/assignment.fr.md @@ -0,0 +1,15 @@ +# Refactorisez et commentez votre code + +## Instructions + +Au fur et à mesure que votre base de code se développe, il est important de refactorisez votre code fréquemment pour qu'il reste lisible et maintenable dans le temps. Ajoutez des commentaires et refactorisez votre `app.js` pour améliorer la qualité du code : + +- Extrayez des constantes, telles que l'URL de base de l'API du serveur. +- Factorisez tout code similaire : par exemple, vous pouvez créer une fonction `sendRequest()` pour regrouper le code utilisé dans les fonctions `createAccount()` et `getAccount()`. +- Réorganisez le code pour le rendre plus facile à lire, et ajoutez des commentaires. + +## Rubrique + +| Critères | Exemplaire | Adéquat | Besoin d'amélioration | +| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| | Le code est commenté, bien organisé en différentes sections et facile à lire. Les constantes sont extraites et une fonction `sendRequest()` a été créée. | Le code est propre mais peut encore être amélioré avec plus de commentaires, d'extraction de constantes ou de factorisation.| Le code est désordonné, non commenté, les constantes ne sont pas extraites et le code n'est pas factorisé.| From 2053e3ebe007ebbed3146e76f130bb3f5139b2a9 Mon Sep 17 00:00:00 2001 From: Karine Moreira Date: Sun, 31 Oct 2021 17:56:11 -0300 Subject: [PATCH 03/19] translate to pt ASSIGNMENT about browsers (#498) Co-authored-by: Karine Moreira --- .../1-about-browsers/translations/assignment.pt.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 5-browser-extension/1-about-browsers/translations/assignment.pt.md diff --git a/5-browser-extension/1-about-browsers/translations/assignment.pt.md b/5-browser-extension/1-about-browsers/translations/assignment.pt.md new file mode 100644 index 00000000..a11ab25e --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/assignment.pt.md @@ -0,0 +1,11 @@ +# Refatore o estilo de sua extensão + +## Instruções + +O código base para esta extensão vem completo com estilos, mas você não precisa usá-los; faça sua própria estilização editando seu arquivo css. + +## Rubrica + +| Critérios | Exemplar | Adequado | Necessita de melhoria | +| -------- | -------------------------------------------- | --------------------- | ----------------- | +| | O código é enviado com novos estilos funcionais | O estilo está incompleto | Os estilos contém erros | \ No newline at end of file From 3f5b6a9f6511e08b16c07a9d099c153926437e9c Mon Sep 17 00:00:00 2001 From: Olga Kitel <79774026+OKitel@users.noreply.github.com> Date: Sun, 31 Oct 2021 21:59:56 +0100 Subject: [PATCH 04/19] [RU] Add translation to Russian for README in 1-intro-to-programming-languages, 2-github-basics (#499) * Add translation to russian for the getting started lessons * Add translation to russian for assignment (1-getting-started) * fix: return link without language path * fix: change link path * add russian translation of README in 1-intro-to-programming-languages * Add translation to Russian for 2-github-basics --- .../translations/README.ru.md | 203 +++++++++++ .../2-github-basics/translations/README.ru.md | 321 ++++++++++++++++++ 2 files changed, 524 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md create mode 100644 1-getting-started-lessons/2-github-basics/translations/README.ru.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md new file mode 100644 index 00000000..8774c935 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md @@ -0,0 +1,203 @@ +# Введение в языки программирования и инструменты разработки + +Этот урок охватывает основы языков программирования. Рассматриваемые здесь темы применимы к большинству современных языков программирования. В разделе «Инструменты разработки» вы узнаете о полезном программном обеспечении, которое поможет вам как разработчику. + +![Введение в программирование](/sketchnotes/webdev101-programming.png) + +> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac) + +## Предлекционный квиз + +[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) + +## Введение + +В этом уроке мы рассмотрим: + +- Что такое программирование? +- Типы языков программирования +- Основные элементы программы +- Полезный софт и инструментарий для профессионального разработчика + +> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)! + +## Что такое программирование? + +Программирование (также известное как кодирование) - это процесс записи инструкций на устройство, такое как компьютер или мобильное устройство. Мы пишем эти инструкции на языке программирования, который затем интерпретируется устройством. Эти наборы инструкций могут называться различными именами, но _программа_, _компьютерная программа_, _приложение_ и _исполняемый файл_ - это несколько популярных имен. + +_Программой_ может быть что угодно, написанное с помощью кода: веб-сайты, игры и приложения для телефона - это программы. Хотя можно создать программу без написания кода, основная логика интерпретируется на устройстве, и эта логика, скорее всего, была кем-то написана с помощью кода. Программа, которая _запущена_ или _исполняет код_, выполняет инструкции. Устройство, на котором вы сейчас читаете этот урок, запускает программу для его вывода на ваш экран. + +✅ Проведите небольшое исследование: кто считается первым в мире программистом? + +## Языки программирования + +Языки программирования служат основной цели: с их помощью разработчики могут создавать инструкции для отправки на устройство. Устройства могут понимать только двоичный код (единицы и нули), и для _большинства_ разработчиков это не очень эффективный способ общения. Языки программирования - это средство общения между людьми и компьютерами. + +Языки программирования бывают разных форматов и могут служить разным целям. Например, JavaScript в основном используется для веб-приложений, а Bash - в основном для операционных систем. + +_Языки низкого уровня_ обычно требуют меньше этапов, чем языки _высокого уровня_, чтобы устройство могло интерпретировать инструкции. Однако то, что делает языки высокого уровня популярными, - это их удобочитаемость и поддержка. JavaScript считается языком высокого уровня. + +Следующий код иллюстрирует разницу между языком высокого уровня (JavaScript) и языком низкого уровня (ARM ассемблер). + +```javascript +let number = 10; +let n1 = 0, + n2 = 1, + nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Вы не поверите, но _они оба делают одно и то же_: выводят последовательность Фибоначчи до 10. + +✅ Последовательность Фибоначчи [определена](https://ru.wikipedia.org/wiki/Числа_Фибоначчи) как набор чисел, каждое из которых является суммой двух предыдущих, начиная с 0 и 1. + +## Элементы программы + +Одиночная инструкция в программе называется _выражением_ и обычно имеет символ или межстрочный интервал, который отмечает, где инструкция разделяется, или _заканчивается_. Способ завершения программы зависит от языка. + +В тех местах, где выражения могут полагаться на данные для выполнения инструкций, большинство программ полагаются на использование данных от пользователя или из других источников. Данные могут изменить поведение программы, поэтому в языках программирования есть способ временного хранения данных, которые можно использовать позже. Эти данные называются _переменными_. Переменные - это выражения, которые инструктируют устройство сохранять данные в памяти устройства. Переменные в программах аналогичны переменным в алгебре, где они имеют уникальное имя, и их значение может меняться со временем. + +Есть вероятность, что некоторые выражения не будут выполнены устройством. Обычно это сделано намеренно, когда написано разработчиком, или случайно, когда возникает непредвиденная ошибка. Этот тип управления приложением делает его более надежным и удобным в обслуживании. Обычно эти изменения в управлении происходят, когда выполняются определенные условия. В современных языках программирования распространенным выражением для управления исполнением программы является `if..else` (если..то). + +✅ Вы узнаете больше об этом типе инструкций в следующих уроках. + +## Инструметы разработки + +[![Инструметы разработки](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +> 🎥 Нажмите на изображение выше, чтобы просмотреть видео об инструментах + +В этом разделе вы узнаете о программном обеспечении, которое может оказаться очень полезным в начале вашего пути профессионального развития. + +**Среда разработки** - это уникальный набор инструментов и функций, которые разработчик может часто использовать при написании программного обеспечения. Некоторые из этих инструментов были настроены для конкретных нужд разработчика и могут измениться со временем, если разработчик меняет приоритеты в работе или личных проектах, или когда он использует другой язык программирования. Среды разработки столь же уникальны, как и разработчики, которые их используют. + +### Редакторы + +Один из важнейших инструментов разработки программного обеспечения - редактор. Редакторы - это место, где вы пишете свой код, а иногда и где вы запускаете свой код. + +Разработчики полагаются на редакторы кода и по нескольким дополнительным причинам.: + +- _Отладка_ Выявление багов и ошибок путем пошагового выполнения кода, строка за строкой. Некоторые редакторы имеют возможности отладки или могут быть настроены для определенных языков программирования. +- _Подсветка синтаксиса_ Добавляет в код цвета и форматирование текста, упрощает чтение. Большинство редакторов позволяют настраивать подсветку синтаксиса. +- _Расширения и интеграции_ Дополнения, созданные разработчиками и специально предназначенные для разработчиков, предоставляют доступ к дополнительным инструментам, которые не встроены в базовый редактор. Например, многим разработчикам также нужен способ документировать свой код и объяснять, как он работает, и они установят расширение проверки орфографии для проверки опечаток. Большинство этих дополнений предназначены для использования в конкретном редакторе, и большинство редакторов имеют возможность поиска доступных расширений. +- _Настройка_ Большинство редакторов легко настраиваются, и у каждого разработчика будет своя собственная уникальная среда разработки, которая соответствует его потребностям. Многие редакторы также позволяют разработчикам создавать свои собственные расширения. + +#### Популярные редакторы и расширения для веб-разработки + +- [Visual Studio Code](https://code.visualstudio.com/) + - [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) + - [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) + +### Браузеры + +Еще один важный инструмент - браузер. Веб-разработчики полагаются на браузер, чтобы наблюдать за тем, как их код работает в сети, он также используется для просмотра визуальных элементов веб-страницы, написанных в редакторе, например HTML. + +Многие браузеры оснащены _инструментами разработчика_ (DevTools), содержащими набор полезных функций, которые помогают разработчикам собирать и фиксировать важную информацию о своем приложении. Например: если на веб-странице есть ошибки, иногда полезно знать, когда они произошли. DevTools в браузере можно настроить для сбора этой информации. + +#### Популярные браузеры и инструменты разработки + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Инструменты командной строки + +Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух. + +### Популярные параметры командной строки + +Параметры командной строки зависят от используемой вами операционной системы. + +_💻 = предустановлен в операционной системе._ + +#### 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) +- [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) + +#### 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) + +#### Популярные инструменты командной строки + +- [Git](https://git-scm.com/) (💻 on most operating systems) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Документация + +Когда разработчик хочет узнать что-то новое, он, скорее всего, обратится к документации, чтобы узнать, как это использовать. Разработчики часто полагаются на документацию, которая поможет им понять, как правильно использовать инструменты и языки, а также получить более глубокие знания о том, как они работают. + +#### Популярная документация по веб-разработке + +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, создателей браузера [Firefox](https://www.mozilla.org/firefox/) +- [Frontend Masters](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), от Google, создателей браузера [Chrome](https://www.google.com/chrome/) +- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge) + +✅ Проведите небольшое исследование: теперь, когда вы знаете основы среды веб-разработчика, сравните и сопоставьте ее со средой веб-дизайнера. + +--- + +## 🚀 Челлендж + +Сравните несколько языков программирования. В чем заключаются уникальные черты JavaScript и Java? Как насчет COBOL vs. Go? + +## Постлекционный квиз + +[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) + +## Обзор и самообучение + +Изучите немного разные языки программирования, доступные программисту. Попробуйте написать строку на одном языке, а затем повторите ее на двух других. Какие языки вы изучаете? + +## Задание + +[Чтение документации](assignment.md) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ru.md b/1-getting-started-lessons/2-github-basics/translations/README.ru.md new file mode 100644 index 00000000..6f332740 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.ru.md @@ -0,0 +1,321 @@ +# Введение в GitHub + +В этом уроке рассматриваются основы GitHub, платформы для размещения и управления изменениями вашего кода. + +![Введение в GitHub](/sketchnotes/webdev101-github.png) + +> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac) + +## Предлекционный квиз + +[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) + +## Введение + +В этом уроке мы рассмотрим: + +- отслеживание работы, которую вы делаете на своем устройстве +- работа над проектами с другими людьми +- как внести свой вклад в программное обеспечение с открытым исходным кодом + +### Требования + +Прежде чем начать, вам нужно проверить, установлен ли Git. В терминале напечатайте: +`git --version` + +Если Git не установлен, [установите Git](https://git-scm.com/downloads). Затем настройте свой локальный профиль Git в терминале: + +- `git config --global user.name "ваше-имя"` +- `git config --global user.email "ваш-email"` + +Чтобы проверить, настроен ли уже Git, вы можете ввести: +`git config --list` + +Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code), и вам нужно будет открыть свой терминал (или: командную строку). + +Перейдите на [github.com](https://github.com/) и создайте аккаунт, если вы еще этого не сделали, или войдите в систему и заполните свой профиль. + +✅ GitHub - не единственный репозиторий кода в мире; есть и другие, но GitHub - самый известный. + +### Подготовка + +Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который послужит примером того, как внести свой вклад в проекты других. + +--- + +## Управление кодом + +Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью git - системы контроля версий. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения. + +### Задание: Сделать репозиторий и сделайте коммит + +1. **Создать репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**. + + 1. Дайте вашему репозиторию (папке) имя + 1. Выберите **создать репозиторий**. + +1. **Перейдите в свою рабочую папку**. В вашем терминале перейдите в папку (также известную как каталог), которую вы хотите начать отслеживать. Введите: + + ```bash + cd [имя вашей папки] + ``` + +1. **Инициализируйте git репозиторий**. В вашем проекте напечатайте: + + ```bash + git init + ``` + +1. **Проверьте статус**. Чтобы проверить статус вашего репозитория введите: + + ```bash + git status + ``` + + вывод может выглядеть примерно так: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + Обычно команда `git status` сообщает вам, например, какие файлы готовы к _сохранению_ в репозиторий, или в них есть изменения, которые вы, возможно, захотите сохранить. + +1. **Добавьте все файлы для отслеживания** + Это также называется подготовленными файлами (staging files) / добавлением файлов в область подготовленных файлов (staging area). + + ```bash + git add . + ``` + + Команда `git add` с аргументом `.` указывает, что все ваши файлы и изменения будут добавлены для отслеживания. + +1. **Добавьте выбранные файлы для отслеживания** + + ```bash + git add [название файла или папки] + ``` + + Это помогает нам добавлять только выбранные файлы в область подготовки, когда мы не хотим фиксировать все файлы сразу. + +1. **Удаление всех файлов из области подготовки** + + ```bash + git reset + ``` + + Эта команда помогает нам убрать все файлы сразу из staging area. + +1. **Удаление определенного файла из области подготовки** + + ```bash + git reset [название файла или папки] + ``` + +Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит. + +1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо _закомитать (зафиксироваить)_ файлы. Для этого вы создаете _коммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репо. Введите следующее, чтобы создать _коммит_: + + ```bash + git commit -m "first commit" + ``` + + Эта команда сохраняет все ваши файлы, добавляя сообщение «первый коммит». Для будущих сообщений коммитов вам нужно будет быть более информативным в своем описании, чтобы передать, какой тип изменения вы внесли. + +1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим репо. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub.Команда `git remote add` сделает именно это. Введите следующую команду: + + > Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `repository_name` своим URL-адресом репозитория на GitHub. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. + Эта команда создает _удаленное соединение_ с именем «origin», указывающее на репозиторий GitHub, который вы создали ранее. + +1. **Отправьте локальные файлы в GitHub**.Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так: + + ```bash + git push -u origin main + ``` + + Эта команда отправляет ваши коммиты из вашей "main" ветки на GitHub. + +1. **Добавление последующих изменений**. Если вы хотите продолжить вносить изменения и отправлять их на GitHub, вам просто нужно использовать следующие три команды: + + ```bash + git add . + git commit -m "напишите здесь свое сообщения для коммита" + git push + ``` + + > Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отображались на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в общедоступном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore). + +#### Сообщения коммитов + +Хорошее сообщение к коммиту должно завершать следующее предложение: +Если применить этот коммит, то он <ваше сообщение к коммиту> + +Для темы сообщения к коммиту используйте повелительное наклонение в настоящем времени: «изменить», а не «изменено» или «изменяет». Как и в теме, в теле (необязательно) также используйте повелительное наклонение в настоящем времени. Тело должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`. + +✅ Потратьте несколько минут, чтобы полазать по GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту? + +### Задние: сотрудничество + +Основная причина размещения проектов на GitHub заключаетсяь в том, чтобы дать возможность сотрудничать с другими разработчиками. + +## Работа над проектами с другими разработчиками + +В своем репозитории перейдите в `Insights> Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. + +Вот несколько вещей, которые могут улучшить ваше репозиторий на GitHub: + +- **Описание**. Вы добавили описание для своего проекта? +- **README**. Вы добавили README? GitHub предлагает руководство по написанию [README](https://docs.github.com/articles/about-readmes/). +- **Рекомендации по внесению вклада**. У вашего проекта есть [рекомендации по внесению вклада (contributing guideline)](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)? +- **Нормы поведения**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), +- **Лицензия**. Возможно самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + +Все эти ресурсы принесут пользу новым членам команды. И это, как правило, те вещи, на которые новые участники смотрят, прежде чем даже взглянуть на ваш код, чтобы узнать, является ли ваш проект подходящим местом для них, чтобы тратить свое время. + +✅ Файлы README, хотя для их подготовки требуется время, часто игнорируются занятыми разработчиками. Можете ли вы найти пример особо наглядного README? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать. + +### Задание: слияние кода + +Рекомендации по внесению вклада помогают людям вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: + +1. **Сделать ответвление вашего репозитория (Forking)** Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub. +1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер. +1. **Создать ветку**. Вы можете попросить их создать _ветку_ для своей работы.. +1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете реализовать только 2 из 3 или 1 из 3 изменений? + +✅ Представьте себе ситуацию, когда ветки особенно важны для написания и предоставления хорошего кода. Какие варианты использования вы можете придумать? + +> Примечание: будьте тем изменением, которое вы хотите увидеть в мире, и также создавайте ответвления для своей собственной работы. Любые совершаемые вами коммиты будут выполняться в той ветке, в которой вы в настоящее время находитесь. Используйте `git status`, чтобы узнать, какая это ветка. + +Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него есть репозиторий Git, готовый к работе, на его локальном компьютере: + +1. **Создание ветки**. Используйте команду `git branch` для создания ветки, которая будет содержать изменения, которые вы хотите внести: + + ```bash + git branch [название-ветки] + ``` + +1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git checkout`: + + ```bash + git checkout [branch-name] + ``` + +1. **Написание кода**. На этом этапе вы хотите добавить свои изменения. Не забудьте сообщить об этом Git с помощью следующих команд: + + ```bash + git add . + git commit -m "мои изменения" + ``` + + Убедитесь, что вы написали хороше сообщение для своего коммита, как для себя, так и для владельца репозитория, которому вы помогаете. + +1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`.Ветвь `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд: + + ```bash + git checkout main + git pull + ``` + + На этом этапе вы хотите убедиться, что любые _конфликты_, ситуации, когда Git не может легко _комбинировать_ изменения, происходят в вашей рабочей ветке. Поэтому выполните следующие команды: + + ```bash + git checkout [название-ветки] + git merge main + ``` + + Это внесет все изменения из main в вашу ветку, и, надеюсь, вы сможете продолжить. Если нет, VS Code сообщит вам, где Git _не может самостоятельно решить конфликт_, и вы просто измените затронутые файлы, чтобы указать, какой контент является наиболее точным. + +1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте PR, пул реквест. + + ```bash + git push --set-upstream origin [название-ветки] + ``` + + Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории. + +1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к коммиту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и _скрестив пальцы_, он оценит и объединят ваш PR. Теперь вы соавтор, ура :) + +1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного объединения PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды: + + ```bash + git branch -d [название-ветки] + ``` + + Убедитесь, что вы перешли на страницу GitHub для ответвленного репозитория и удалили удаленную ветку, которую вы только что отправили на GitHub. + +`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений . + +Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, с обзорами, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблему/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`. + +🤞Скрестив пальцы, все проверки проходят, и владелец(владельцы) проекта проводят слияние ваших изменений в проект🤞 + +Обновите текущую локальную рабочую ветку всеми новыми коммитами из соответствующей удаленной ветки на GitHub с помощью следующей команды: + +`git pull` + +## Как внести свой вклад в открытый исходный код + +Во-первых, давайте найдем репозиторий на GitHub, который вас интересует и в который вы хотели бы внести изменения. Вам неоходимо скопировать его содержимое на свой компьютер. + +✅ Хороший способ найти репозитории, удобные для новичков, - это [поиск по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Копировать репо локально](images/clone_repo.png) + +Есть несколько способов копирования кода. Один из способов - «клонировать» содержимое репозитория, используя HTTPS, SSH или используя GitHub CLI (интерфейс командной строки). + +Откройте свой терминал и клонируйте репозиторий вот так: +`git clone https://github.com/ProjectURL` + +Для работы над проектом перейдите в правильную папку: +`cd ProjectURL` + +Вы также можете открыть весь проект, используя [Codespaces](https://github.com/features/codespaces), встроенный редактор кода / облачная среда разработки GitHub или [GitHub Desktop](https://desktop.github.com/). + +Наконец, вы можете загрузить код в заархивированной папке. + +### Еще несколько интересных вещей о GitHub + +Вы можете отметить, посмотреть и / или «разветвить» любой публичный репозиторий на GitHub. Вы можете найти свои отмеченные репозитории в раскрывающемся меню в правом верхнем углу. Это как закладка, но для кода. + +В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы»(Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят. + +Проекты также могут обсуждаться на форумах, в списках рассылки или в чатах, таких как Slack, Discord или IRC. + +✅ Осмотрите свой новый репозиторий GitHub и попробуйте несколько вещей, например, отредактируйте настройки, добавьте информацию в репозиторий и создайте проект (например, доску Канбан). Вы можете многое сделать! + +--- + +## 🚀 Челлендж + +Объединитесь с другом, чтобы работать над кодом друг друга. Совместно создавайте проект, разветвляйте код, создавайте ветви и объединяйте изменения. + +## Постлекционный квиз + +[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) + +## Обзор и самообучение + +Подробнее об [участие в разработке программного обеспечения с открытым исходным кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/). + +Практика, практика, практика. GitHub предлагает отличные способы обучения, доступные через [lab.github.com](https://lab.github.com/): + +- [Первая неделя на GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +Вы также можете найти более продвинутые лаборатории для практики. + +## Задание + +Завершите [первую неделю в учебной лаборатории GitHub](https://lab.github.com/githubtraining/first-week-on-github) From 8f6f2d3d697b2e874d6c13dffc71ddd5c21f3ee6 Mon Sep 17 00:00:00 2001 From: Taras Gordiienko Date: Mon, 1 Nov 2021 01:47:23 +0200 Subject: [PATCH 05/19] Delete unnecessary .ua file (#501) The actual Ukrainian translation is in .uk file --- translations/for-teachers.ua.md | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100644 translations/for-teachers.ua.md diff --git a/translations/for-teachers.ua.md b/translations/for-teachers.ua.md deleted file mode 100644 index 7d181255..00000000 --- a/translations/for-teachers.ua.md +++ /dev/null @@ -1,33 +0,0 @@ -## Для вчителів - -Що робити, якщо ви хотіли б ви використовувати цю навчальну програму у своєму класі? Будь ласка, не соромтеся! - -Насправді, ви можете використовувати його в самому GitHub, використовуючи GitHub Classroom. - -Для цього створіть форк цього репозиторію. Вам потрібно буде створити репозиторій для кожного уроку, тому вам потрібно буде розпакувати кожну папку в окреме репо. Таким чином, [GitHub Classroom](https://classroom.github.com/classrooms) може підхопити кожен урок окремо. - -Ці [вичерпні інструкції](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) нададуть вам уявлення про те, як налаштувати вашу класну кімнату. - -## Використання в Moodle, Canvas або Blackboard - -Ця навчальна програма добре працює в цих системах управління навчанням! Використовуйте [Moodle файл](/teaching-files/webdev-moodle.mbz) для повного контенту, або спробуйте [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) який містить деякий контент. Moodle Cloud не підтримує повні Common Cartridge експорти, тому бажано використовувати Moodle download файл, який може бути завантажений в Canvas. Будь-ласка повідомте як ми можемо це покращити. - -![Moodle](/teaching-files/moodle.png) -> Розклад в Moodle classroom - -![Canvas](/teaching-files/canvas.png) -> Розклад в Canvas - -## Використання репозиторію самостійно - -Якщо ви хочете використовувати цей репозиторій у його теперішньому вигляді, не використовуючи GitHub Classroom, це також можна зробити. Ви маєте поговорити зі своїми учнями, який урок опрацювати разом. - -В онлайн-форматі (Zoom, Teams або інший) ви можете створити кімнати для тестів і наставляти учнів, щоб допомогти їм підготуватися до навчання. Потім запросіть студентів взяти участь у вікторинах і подайте свої відповіді як «проблеми» в певний час. Ви можете зробити те ж саме із завданнями, якщо ви хочете, щоб учні працювали спільно на відкритому повітрі. - -Якщо ви віддаєте перевагу більш приватний формат, попросіть своїх учнів форкнути навчальну програму, урок за уроком, до власних репозиторій GitHub як приватних репозиторій і надати вам доступ. Потім вони можуть приватно виконувати вікторини та завдання та надсилати їх вам за допомогою issues у вашій аудиторії. - -Існує багато способів зробити це в форматі онлайн-класу. Будь ласка, повідомте нам, що найкраще підходить для вас! - -## Будь ласка, висловіть нам свої думки! - -Ми хочемо, щоб ця навчальна програма працювала для вас і ваших учнів. Будь ласка, залиште нам [відгук](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u). From 09af9f8ea529e71018d1d42616e8d2d08c4a4a5a Mon Sep 17 00:00:00 2001 From: Taras Gordiienko Date: Mon, 1 Nov 2021 01:48:22 +0200 Subject: [PATCH 06/19] Add Ukrainian translation for typing-game (#500) * Add Ukrainian translation for typing-game issue #489 * Rename README.ua.md to README.uk.md * Update 4-typing-game/translations/README.uk.md Co-authored-by: Art-auto <30954131+Art-auto@users.noreply.github.com> * Update 4-typing-game/translations/README.uk.md Co-authored-by: Art-auto <30954131+Art-auto@users.noreply.github.com> * Fix the paths for the README.uk.md Add relative paths for the 4-typing-game/translations/README.uk.md Co-authored-by: Art-auto <30954131+Art-auto@users.noreply.github.com> --- 4-typing-game/translations/README.uk.md | 30 +++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 4-typing-game/translations/README.uk.md diff --git a/4-typing-game/translations/README.uk.md b/4-typing-game/translations/README.uk.md new file mode 100644 index 00000000..5aaa15c4 --- /dev/null +++ b/4-typing-game/translations/README.uk.md @@ -0,0 +1,30 @@ +# Програмування на основі подій – створимо гру для введення тексту + +## Вступ + +Введення тексту — одна з найбільш недооцінених навичок розробника. Здатність швидко передавати думки з голови до редактора дозволяє вільно протікати творчості. Один з найкращих способів навчитися - грати в гру! + +> Отже, давайте створимо гру для набору тексту! + +Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту. Гра представить гравцеві випадкову цитату (ми використовуємо цитати [Шерлока Холмса](https://en.wikipedia.org/wiki/Sherlock_Holmes) ) і час, скільки часу потрібно гравцеві, щоб точно ввести його. Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту. + +![демо](../images/demo.gif) + +## Передумови + +Цей урок передбачає, що ви знайомі з такими поняттями: + +- Створення елементів керування введенням тексту та кнопок +- CSS і налаштування стилів за допомогою класів +- Основи JavaScript + - Створення масиву + - Створення випадкового числа + - Отримання поточного часу + +## Урок + +[Створення гри введення тексту за допомогою програмування на основі подій](../typing-game/README.md) + +## Посилання + +Створенно з ♥️ [Крістофером Гаррісоном](http://www.twitter.com/geektrainer) From 4276aa085083c9c53b893e4937ba37fd699cc19e Mon Sep 17 00:00:00 2001 From: Olga Kitel <79774026+OKitel@users.noreply.github.com> Date: Mon, 1 Nov 2021 00:49:38 +0100 Subject: [PATCH 07/19] [RU] Correct typos, format text and fix image link in Russian translation for 2-github-basics (#502) * Add translation to russian for the getting started lessons * Add translation to russian for assignment (1-getting-started) * fix: return link without language path * fix: change link path * add russian translation of README in 1-intro-to-programming-languages * Add translation to Russian for 2-github-basics * Correct typos, format text and fix image link --- .../2-github-basics/translations/README.ru.md | 92 +++++++++---------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ru.md b/1-getting-started-lessons/2-github-basics/translations/README.ru.md index 6f332740..4129f918 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ru.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ru.md @@ -1,6 +1,6 @@ # Введение в GitHub -В этом уроке рассматриваются основы GitHub, платформы для размещения и управления изменениями вашего кода. +В этом уроке рассматриваются основы GitHub - платформы для хранения и управления изменениями вашего кода. ![Введение в GitHub](/sketchnotes/webdev101-github.png) @@ -15,7 +15,7 @@ В этом уроке мы рассмотрим: - отслеживание работы, которую вы делаете на своем устройстве -- работа над проектами с другими людьми +- совместная работа над проектами с другими людьми - как внести свой вклад в программное обеспечение с открытым исходным кодом ### Требования @@ -31,25 +31,25 @@ Чтобы проверить, настроен ли уже Git, вы можете ввести: `git config --list` -Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code), и вам нужно будет открыть свой терминал (или: командную строку). +Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code) и вам нужно будет открыть свой терминал (или командную строку). Перейдите на [github.com](https://github.com/) и создайте аккаунт, если вы еще этого не сделали, или войдите в систему и заполните свой профиль. -✅ GitHub - не единственный репозиторий кода в мире; есть и другие, но GitHub - самый известный. +✅ GitHub - не единственная платформа для хранения репозиториев кода в мире; есть и другие, но GitHub - самый известный. ### Подготовка -Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который послужит примером того, как внести свой вклад в проекты других. +Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который мы используем, чтобы показать, как внести свой вклад в другие проекты. --- ## Управление кодом -Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью git - системы контроля версий. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения. +Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью системы контроля версий Git. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения. -### Задание: Сделать репозиторий и сделайте коммит +### Задание: Сделать репозиторий и сделать коммит -1. **Создать репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**. +1. **Создайте репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**. 1. Дайте вашему репозиторию (папке) имя 1. Выберите **создать репозиторий**. @@ -83,9 +83,9 @@ modified: file2.txt ``` - Обычно команда `git status` сообщает вам, например, какие файлы готовы к _сохранению_ в репозиторий, или в них есть изменения, которые вы, возможно, захотите сохранить. + Обычно команда `git status` сообщает вам, какие файлы готовы к _сохранению_ в репозиторий или в каких есть изменения, которые вы, возможно, захотите сохранить. -1. **Добавьте все файлы для отслеживания** +1. **Добавьте все файлы для отслеживания**. Это также называется подготовленными файлами (staging files) / добавлением файлов в область подготовленных файлов (staging area). ```bash @@ -116,34 +116,33 @@ git reset [название файла или папки] ``` -Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит. + Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит. -1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо _закомитать (зафиксироваить)_ файлы. Для этого вы создаете _коммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репо. Введите следующее, чтобы создать _коммит_: +1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо _закоммитить (зафиксировать)_ файлы. Для этого вы создаете _коммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репозитория. Введите следующее, чтобы создать новый _коммит_: ```bash - git commit -m "first commit" + git commit -m "первый коммит" ``` Эта команда сохраняет все ваши файлы, добавляя сообщение «первый коммит». Для будущих сообщений коммитов вам нужно будет быть более информативным в своем описании, чтобы передать, какой тип изменения вы внесли. -1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим репо. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub.Команда `git remote add` сделает именно это. Введите следующую команду: +1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим проектом. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub. Команда `git remote add` предназначена именно для этого. Введите следующую команду: - > Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `repository_name` своим URL-адресом репозитория на GitHub. + > Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `username/repository_name` своим URL-адресом репозитория на GitHub. ```bash git remote add origin https://github.com/username/repository_name.git ``` - This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. Эта команда создает _удаленное соединение_ с именем «origin», указывающее на репозиторий GitHub, который вы создали ранее. -1. **Отправьте локальные файлы в GitHub**.Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так: +1. **Отправьте локальные файлы в GitHub**. Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так: ```bash git push -u origin main ``` - Эта команда отправляет ваши коммиты из вашей "main" ветки на GitHub. + Эта команда отправляет коммиты из вашей локальной ветки "main" в одноименную ветку на GitHub. 1. **Добавление последующих изменений**. Если вы хотите продолжить вносить изменения и отправлять их на GitHub, вам просто нужно использовать следующие три команды: @@ -153,51 +152,52 @@ git push ``` - > Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отображались на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в общедоступном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore). + > Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отправлялись на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore). #### Сообщения коммитов -Хорошее сообщение к коммиту должно завершать следующее предложение: -Если применить этот коммит, то он <ваше сообщение к коммиту> +Хорошее сообщение к коммиту должно завершать следующее предложение: +_Если применить этот коммит, то он <ваше сообщение к коммиту>_ +(_If applied, this commit will _) -Для темы сообщения к коммиту используйте повелительное наклонение в настоящем времени: «изменить», а не «изменено» или «изменяет». Как и в теме, в теле (необязательно) также используйте повелительное наклонение в настоящем времени. Тело должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`. +Для основного сообщения к коммиту используйте повелительное наклонение в настоящем времени: «change», а не «changed» или «changes». Также и в расширенном сообщении (которое необязательно) используйте повелительное наклонение в настоящем времени. Основное сообщение должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`. -✅ Потратьте несколько минут, чтобы полазать по GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту? +✅ Потратьте несколько минут, чтобы немного исследовать GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту? -### Задние: сотрудничество +### Задание: Сотрудничество -Основная причина размещения проектов на GitHub заключаетсяь в том, чтобы дать возможность сотрудничать с другими разработчиками. +Основная причина размещения проектов на GitHub заключается в том, чтобы дать возможность сотрудничать с другими разработчиками. ## Работа над проектами с другими разработчиками В своем репозитории перейдите в `Insights> Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. -Вот несколько вещей, которые могут улучшить ваше репозиторий на GitHub: +Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub: - **Описание**. Вы добавили описание для своего проекта? - **README**. Вы добавили README? GitHub предлагает руководство по написанию [README](https://docs.github.com/articles/about-readmes/). - **Рекомендации по внесению вклада**. У вашего проекта есть [рекомендации по внесению вклада (contributing guideline)](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)? -- **Нормы поведения**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), -- **Лицензия**. Возможно самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/)? +- **Нормы поведения**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/). +- **Лицензия**. Возможно, самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/). Все эти ресурсы принесут пользу новым членам команды. И это, как правило, те вещи, на которые новые участники смотрят, прежде чем даже взглянуть на ваш код, чтобы узнать, является ли ваш проект подходящим местом для них, чтобы тратить свое время. -✅ Файлы README, хотя для их подготовки требуется время, часто игнорируются занятыми разработчиками. Можете ли вы найти пример особо наглядного README? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать. +✅ Файлы README часто игнорируются занятыми разработчиками из-за нехватки времени на их подготовку. Можете ли вы найти пример README с хорошим описанием проекта? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать. -### Задание: слияние кода +### Задание: Слияние кода -Рекомендации по внесению вклада помогают людям вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: +Документ CONTRIBUTING.md помогает людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: -1. **Сделать ответвление вашего репозитория (Forking)** Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub. +1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub. 1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер. -1. **Создать ветку**. Вы можете попросить их создать _ветку_ для своей работы.. -1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете реализовать только 2 из 3 или 1 из 3 изменений? +1. **Создать ветку**. Вы можете попросить их создать _ветку_ для своей работы. +1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете принять только 2 из 3 или 1 из 3 изменений? -✅ Представьте себе ситуацию, когда ветки особенно важны для написания и предоставления хорошего кода. Какие варианты использования вы можете придумать? +✅ Придумайте ситуацию, в которой ветки особенно важны для написания и распространения хорошего кода. Какие варианты использования приходят вам на ум? > Примечание: будьте тем изменением, которое вы хотите увидеть в мире, и также создавайте ответвления для своей собственной работы. Любые совершаемые вами коммиты будут выполняться в той ветке, в которой вы в настоящее время находитесь. Используйте `git status`, чтобы узнать, какая это ветка. -Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него есть репозиторий Git, готовый к работе, на его локальном компьютере: +Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него на локальном компьютере есть репозиторий Git, готовый к работе: 1. **Создание ветки**. Используйте команду `git branch` для создания ветки, которая будет содержать изменения, которые вы хотите внести: @@ -218,9 +218,9 @@ git commit -m "мои изменения" ``` - Убедитесь, что вы написали хороше сообщение для своего коммита, как для себя, так и для владельца репозитория, которому вы помогаете. + Убедитесь, что вы написали хорошее сообщение для своего коммита, понятное как для себя, так и для владельца репозитория, которому вы помогаете. -1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`.Ветвь `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд: +1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`. Ветка `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд: ```bash git checkout main @@ -236,7 +236,7 @@ Это внесет все изменения из main в вашу ветку, и, надеюсь, вы сможете продолжить. Если нет, VS Code сообщит вам, где Git _не может самостоятельно решить конфликт_, и вы просто измените затронутые файлы, чтобы указать, какой контент является наиболее точным. -1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте PR, пул реквест. +1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте пул реквест (сокращенно PR). ```bash git push --set-upstream origin [название-ветки] @@ -244,9 +244,9 @@ Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории. -1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к коммиту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и _скрестив пальцы_, он оценит и объединят ваш PR. Теперь вы соавтор, ура :) +1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :) -1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного объединения PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды: +1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды: ```bash git branch -d [название-ветки] @@ -254,11 +254,11 @@ Убедитесь, что вы перешли на страницу GitHub для ответвленного репозитория и удалили удаленную ветку, которую вы только что отправили на GitHub. -`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений . +`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений. -Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, с обзорами, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблему/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`. +Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, проверками, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблемы/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`. -🤞Скрестив пальцы, все проверки проходят, и владелец(владельцы) проекта проводят слияние ваших изменений в проект🤞 +🤞Скрестив пальцы, все проверки проходят, и владелец (владельцы) проекта проводят слияние ваших изменений в проект🤞 Обновите текущую локальную рабочую ветку всеми новыми коммитами из соответствующей удаленной ветки на GitHub с помощью следующей команды: @@ -270,7 +270,7 @@ Pull request - это место, где можно сравнить и обсу ✅ Хороший способ найти репозитории, удобные для новичков, - это [поиск по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Копировать репо локально](images/clone_repo.png) +![Copy a repo locally](../images/clone_repo.png) Есть несколько способов копирования кода. Один из способов - «клонировать» содержимое репозитория, используя HTTPS, SSH или используя GitHub CLI (интерфейс командной строки). @@ -288,7 +288,7 @@ Pull request - это место, где можно сравнить и обсу Вы можете отметить, посмотреть и / или «разветвить» любой публичный репозиторий на GitHub. Вы можете найти свои отмеченные репозитории в раскрывающемся меню в правом верхнем углу. Это как закладка, но для кода. -В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы»(Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят. +В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы» (Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят. Проекты также могут обсуждаться на форумах, в списках рассылки или в чатах, таких как Slack, Discord или IRC. From f5efcff08656fa05a8ca5f0a320c5a805ca8ca91 Mon Sep 17 00:00:00 2001 From: Olga Kitel <79774026+OKitel@users.noreply.github.com> Date: Mon, 1 Nov 2021 00:50:13 +0100 Subject: [PATCH 08/19] [RU] Add translation to Russian for assignment 3-accessibility (#503) * Add translation to russian for the getting started lessons * Add translation to russian for assignment (1-getting-started) * fix: return link without language path * fix: change link path * add russian translation of README in 1-intro-to-programming-languages * Add translation to Russian for 2-github-basics * Add translation to russian for assignment 3-accessibility --- .../translations/assignment.ru.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 1-getting-started-lessons/3-accessibility/translations/assignment.ru.md diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md b/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md new file mode 100644 index 00000000..5d716f92 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md @@ -0,0 +1,16 @@ +# Проанализировать сайт не оптимизированный для людей с ограниченными возможностями + +## Инструкции + +Определите веб-сайт, который, по вашему мнению, НЕ оптимизирован для людей с ограниченными возможностями, и составьте план действий по его оптимизации. +Ваша задача - идентифицировать такой сайт, подробно описать способы, которыми, по вашему мнению, он недоступен без использования аналитических инструментов, а затем отправить его на анализ Lighthouse. Сделайте PDF-файл с результатами этого анализа и наметьте подробный план с минимум десятью пунктами, показывающими, как можно улучшить сайт. + +## Таблица для проверки доступности сайта (accessibility) + +| Критерии | Образцовый | Адекватный | Нуждается в улучшении | +| -------- | ------------------------------------ | ---------------------------------- | ---------------------------------- | +| | отсутствует <10% того, что требуется | не хватает 20% того, что требуется | не хватает 50% того, что требуется | + +--- + +Ваш отчет должен содержать следующее: включает параграфы о том, насколько недоступен сайт, отчет Lighthouse, записанный в формате PDF, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить. From 0be28cc78d165658630112c393afd4c1c4510861 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Tue, 2 Nov 2021 02:41:16 +0000 Subject: [PATCH 09/19] Fix french translation typo (#505) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Fix a french translation typo --- 7-bank-project/1-template-route/translations/README.fr.md | 2 +- 7-bank-project/translations/README.fr.md | 4 ++-- quiz-app/src/assets/translations/fr.json | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/7-bank-project/1-template-route/translations/README.fr.md b/7-bank-project/1-template-route/translations/README.fr.md index a6226f36..c7734cbf 100644 --- a/7-bank-project/1-template-route/translations/README.fr.md +++ b/7-bank-project/1-template-route/translations/README.fr.md @@ -1,4 +1,4 @@ -# Créer une application bancaire Partie 1 : Modèles HTML et itinéraires dans une application Web +# Créer une application bancaire Partie 1 : Modèles HTML et routages dans une application Web ## Quiz préalable diff --git a/7-bank-project/translations/README.fr.md b/7-bank-project/translations/README.fr.md index f06b295f..08d95304 100644 --- a/7-bank-project/translations/README.fr.md +++ b/7-bank-project/translations/README.fr.md @@ -1,13 +1,13 @@ # :dollar: Créer une banque -Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des itinéraires, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque. +Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des routes, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque. | ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) | |--------------------------------|--------------------------------| ## Leçons -1. [Modèles HTML et itinéraires dans une application Web](../1-template-route/translations/README.fr.md) +1. [Modèles HTML et routages dans une application Web](../1-template-route/translations/README.fr.md) 2. [Créer un formulaire de connexion et d'inscription](../2-forms/translations/README.fr.md) 3. [Méthodes d'extraction et d'utilisation des données](../3-data/translations/README.fr.md) 4. [Concepts de gestion de l'État](../4-state-management/translations/README.fr.md) diff --git a/quiz-app/src/assets/translations/fr.json b/quiz-app/src/assets/translations/fr.json index cbba8f82..c7f2e1f6 100644 --- a/quiz-app/src/assets/translations/fr.json +++ b/quiz-app/src/assets/translations/fr.json @@ -2094,7 +2094,7 @@ }, { "id": 41, - "title": "Leçon 21 - Projet bancaire - Modèles et itinéraires HTML dans une application Web : quiz de pré-conférence", + "title": "Leçon 21 - Projet bancaire - Modèles et routages HTML dans une application Web : quiz de pré-conférence", "quiz": [ { "questionText": "Vous devez créer plusieurs fichiers HTML pour afficher différents écrans dans une application web", @@ -2143,7 +2143,7 @@ }, { "id": 42, - "title": "Leçon 21 - Modèles et itinéraires HTML de projet bancaire dans une application web : quiz de validation des connaissances", + "title": "Leçon 21 - Modèles et routages HTML de projet bancaire dans une application web : quiz de validation des connaissances", "quiz": [ { "questionText": "Les templates HTML font partie du DOM par défaut", From c389af4393a749dafee33225125d99fdbaa15645 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Tue, 2 Nov 2021 20:11:09 +0000 Subject: [PATCH 10/19] Fix image and text link, reference fr assignment (#506) --- 3-terrarium/1-intro-to-html/translations/README.fr.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/3-terrarium/1-intro-to-html/translations/README.fr.md b/3-terrarium/1-intro-to-html/translations/README.fr.md index c854c2d0..65703640 100644 --- a/3-terrarium/1-intro-to-html/translations/README.fr.md +++ b/3-terrarium/1-intro-to-html/translations/README.fr.md @@ -17,7 +17,7 @@ Dans cette leçon, nous allons utiliser le HTML pour mettre en page le "squelett Sur votre ordinateur, créez un dossier appelé "terrarium" et, à l'intérieur, un fichier appelé "index.html". Vous pouvez le faire dans Visual Studio Code après avoir créé votre dossier terrarium en ouvrant une nouvelle fenêtre VS Code, en cliquant sur "Ouvrir le dossier" et en naviguant vers votre nouveau dossier. Cliquez sur le petit bouton "file" dans le panneau de l'explorateur et créez le nouveau fichier : -![explorer in VS Code](images/vs-code-index.png) +![explorer in VS Code](../images/vs-code-index.png) Ou alors : @@ -54,7 +54,7 @@ Ajoutez ces lignes en haut de votre fichier `index.html` : ## La "tête" du document -La zone "head" du document HTML contient des informations essentielles sur votre page Web, également appelées [métadonnées] (https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dans notre cas, nous indiquons au serveur web auquel cette page sera envoyée pour être rendue, ces quatre choses : +La zone "head" du document HTML contient des informations essentielles sur votre page Web, également appelées [métadonnées](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dans notre cas, nous indiquons au serveur web auquel cette page sera envoyée pour être rendue, ces quatre choses : - le titre de la page - les métadonnées de la page dont : @@ -230,4 +230,4 @@ Pour en savoir plus sur la création de sites pour le web et les appareils mobil ## Exercice -[Pratiquez votre HTML : Construisez une maquette de blog](assignment.md) +[Pratiquez votre HTML : Construisez une maquette de blog](assignment.fr.md) From 5b84e637d5cddc8e6cdefbd370cb4294db18ad6d Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Thu, 4 Nov 2021 13:06:32 +0000 Subject: [PATCH 11/19] Fix: Suggest broken link fix on 3-1 readme files (#515) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Fix broken link on 3-1 readme files --- 3-terrarium/1-intro-to-html/README.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.es.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.fr.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.hi.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.it.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.ja.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.ko.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.ms.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.pt-BR.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.zh-cn.md | 2 +- 3-terrarium/1-intro-to-html/translations/README.zh-tw.md | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index d7f5d53c..9c7e7b1a 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -75,7 +75,7 @@ Add a 'head' block to your document in between the opening and closing `` ``` -✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md index 84875599..8733bd99 100644 --- a/3-terrarium/1-intro-to-html/translations/README.es.md +++ b/3-terrarium/1-intro-to-html/translations/README.es.md @@ -66,7 +66,7 @@ Agregue un bloque de 'encabezado' a su documento entre las etiquetas de apertura ``` -✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.fr.md b/3-terrarium/1-intro-to-html/translations/README.fr.md index 65703640..d7cc4521 100644 --- a/3-terrarium/1-intro-to-html/translations/README.fr.md +++ b/3-terrarium/1-intro-to-html/translations/README.fr.md @@ -75,7 +75,7 @@ Ajoutez un bloc "head" à votre document, entre les balises d'ouverture et de fe ``` -✅ Que se passerait-il si vous définissiez une métabalise viewport comme ceci : ``? En savoir plus sur le [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Que se passerait-il si vous définissiez une métabalise viewport comme ceci : ``? En savoir plus sur le [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.hi.md b/3-terrarium/1-intro-to-html/translations/README.hi.md index bbff6edf..1c8ca2f0 100644 --- a/3-terrarium/1-intro-to-html/translations/README.hi.md +++ b/3-terrarium/1-intro-to-html/translations/README.hi.md @@ -75,7 +75,7 @@ HTML दस्तावेज़ के 'हेड' क्षेत्र मे ``` -✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: ``? [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) के बारे में और पढ़ें। +✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: ``? [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) के बारे में और पढ़ें। --- ## दस्तावेज़ की `body` diff --git a/3-terrarium/1-intro-to-html/translations/README.it.md b/3-terrarium/1-intro-to-html/translations/README.it.md index 504095d2..5afd41a2 100644 --- a/3-terrarium/1-intro-to-html/translations/README.it.md +++ b/3-terrarium/1-intro-to-html/translations/README.it.md @@ -76,7 +76,7 @@ Aggiungere un blocco "head" al proprio documento tra i tag di apertura e di chiu ``` -✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index 3894349d..e716aea0 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -75,7 +75,7 @@ HTML ドキュメントの 'head' 領域には、Web ページに関する重要 ``` -✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。 +✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) についてはこちらをご覧ください。 --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md index 5fedcfaf..7964c0fb 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ko.md +++ b/3-terrarium/1-intro-to-html/translations/README.ko.md @@ -75,7 +75,7 @@ HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/docs ``` -✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag)에 대해 자세히 알아보세요. +✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)에 대해 자세히 알아보세요. --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ms.md b/3-terrarium/1-intro-to-html/translations/README.ms.md index 17cac799..674d7038 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ms.md +++ b/3-terrarium/1-intro-to-html/translations/README.ms.md @@ -75,7 +75,7 @@ Tambahkan blok 'head' ke dokumen anda di antara tag pembuka dan penutup `` ``` -✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md index b57d52b2..b2990f13 100644 --- a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md +++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md @@ -75,7 +75,7 @@ Adicione um bloco 'head' ao seu documento entre a tag `` inicial e a final ``` -✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md index 11bffbf8..3e7904e9 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md @@ -75,7 +75,7 @@ HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息, ``` -✅ 当你把视图信息标签的内容设置成这个样子 `` 会发生什么事情? 请阅读更多关于 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的信息吧。 +✅ 当你把视图信息标签的内容设置成这个样子 `` 会发生什么事情? 请阅读更多关于 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的信息吧。 --- diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md index d9f91c0a..c947c09a 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md @@ -75,7 +75,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊,也被稱作[ ``` -✅ 你認為設定下列視窗元資訊 `` 會發生什麼事? 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的資訊。 +✅ 你認為設定下列視窗元資訊 `` 會發生什麼事? 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的資訊。 --- From 616c6c7196d4191b041860875f3dba1b27eb20d4 Mon Sep 17 00:00:00 2001 From: Ludovico Besana <35035423+ludovicobesana@users.noreply.github.com> Date: Sat, 6 Nov 2021 22:50:20 +0100 Subject: [PATCH 12/19] fix: Update favicon image (#517) --- images/favicon.png | Bin 6188 -> 4556 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/images/favicon.png b/images/favicon.png index 9e5b4f6ac5ab75ef5467dcdb59f9db3cc7a0f405..7e33f5aedba624bb20001cc044b0fdd9a8587a46 100644 GIT binary patch delta 4214 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 Gy8l0+P~2Yt delta 5859 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 From 0fa8592dfec7578b427077a202b87b959459f57f Mon Sep 17 00:00:00 2001 From: Justin J Daniel <62233773+Justinjdaniel@users.noreply.github.com> Date: Sun, 7 Nov 2021 03:21:43 +0530 Subject: [PATCH 13/19] Translate README, for-teachers Malayalam & Open in Visual Studio Code Badge (#510) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Create README.ml.md Readme Translated to Malayalam Signed-off-by: Justin J Daniel <62233773+Justinjdaniel@users.noreply.github.com> * Open in Visual Studio Code Badge added Signed-off-by: Justin J Daniel <62233773+Justinjdaniel@users.noreply.github.com> * Translate for-teachers.md Malayalam * moved 'Open in Visual Studio Code' badge ⬇️ * Checked and corrected all the paths * Open in Visual Studio Code Badge added * Corrected Image path * Create README.ml.md * Create README.ml.md * Create README.ml.md * Added full path of PDF wrt. issue #507 --- 7-bank-project/api/translations/README.ml.md | 34 ++++++ .../solution/translations/README.ml.md | 13 +++ 7-bank-project/translations/README.ml.md | 21 ++++ README.md | 2 + translations/README.ml.md | 101 ++++++++++++++++++ translations/for-teachers.ml.md | 33 ++++++ 6 files changed, 204 insertions(+) create mode 100644 7-bank-project/api/translations/README.ml.md create mode 100644 7-bank-project/solution/translations/README.ml.md create mode 100644 7-bank-project/translations/README.ml.md create mode 100644 translations/README.ml.md create mode 100644 translations/for-teachers.ml.md diff --git a/7-bank-project/api/translations/README.ml.md b/7-bank-project/api/translations/README.ml.md new file mode 100644 index 00000000..cce32de5 --- /dev/null +++ b/7-bank-project/api/translations/README.ml.md @@ -0,0 +1,34 @@ +# ബാങ്ക് API + +> ബാങ്ക് API നിർമ്മിച്ചിരിക്കുന്നത് [Node.js](https://nodejs.org) + [Express](https://expressjs.com/). + +API ഇതിനകം തന്നെ നിങ്ങൾക്കായി നിർമ്മിച്ചതാണ്, വ്യായാമത്തിന്റെ ഭാഗമല്ല. + +എന്നിരുന്നാലും, ഇതുപോലുള്ള ഒരു API എങ്ങനെ നിർമ്മിക്കാമെന്ന് അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഈ വീഡിയോ പരമ്പര പിന്തുടരാവുന്നതാണ്: https://aka.ms/NodeBeginner (വീഡിയോകൾ 17 മുതൽ 21 വരെ ഈ കൃത്യമായ API ഉൾക്കൊള്ളുന്നു). + +നിങ്ങൾക്ക് ഈ ഇന്ററാക്ടീവ് ട്യൂട്ടോറിയലും നോക്കാം: https://aka.ms/learn/express-api + +## സെർവർ പ്രവർത്തിപ്പിക്കുന്നു + +നിങ്ങൾ [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. + +1. Git ഈ റിപ്പോ ക്ലോൺ ചെയ്യുക [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners). +2. നിങ്ങളുടെ ടെർമിനൽ തുറന്ന് `Web-Dev-For-Beginners/7-bank-project/api` ഫോൾഡറിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക +2. `npm install` റൺ ചെയ്‌ത് പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനായി കാത്തിരിക്കുക (നിങ്ങളുടെ ഇന്റർനെറ്റ് കണക്ഷന്റെ ഗുണനിലവാരം അനുസരിച്ച് കുറച്ച് സമയമെടുത്തേക്കാം). +3. ഇൻസ്റ്റാളേഷൻ പൂർത്തിയാകുമ്പോൾ, `npm start` റൺ ചെയ്യുക, നിങ്ങൾക്ക് പോകാം. + +'5000' പോർട്ടിൽ സെർവർ കേൾക്കാൻ തുടങ്ങണം. +*ഈ സെർവർ പ്രധാന ബാങ്ക് ആപ്പ് സെർവർ ടെർമിനലിനൊപ്പം പ്രവർത്തിക്കും (`3000` പോർട്ടിൽ കേൾക്കുന്നു), ഇത് അടയ്ക്കരുത്.* + +> ശ്രദ്ധിക്കുക: എല്ലാ എൻട്രികളും മെമ്മറിയിൽ സംഭരിച്ചിരിക്കുന്നു, അവ നിലനിൽക്കില്ല, അതിനാൽ സെർവർ നിർത്തുമ്പോൾ എല്ലാ ഡാറ്റയും നഷ്‌ടപ്പെടും. + +## API വിശദാംശങ്ങൾ + +റൂട്ട് | വിവരണം +---------------------------------------------|------------------------------------ +GET /api/ | സെർവർ വിവരങ്ങൾ നേടുക +POST /api/accounts/ | ഒരു അക്കൗണ്ട് സൃഷ്ടിക്കുക, ex: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }` +GET /api/accounts/:user | നിർദ്ദിഷ്ട അക്കൗണ്ടിനായുള്ള എല്ലാ ഡാറ്റയും നേടുക +DELETE /api/accounts/:user | നിർദ്ദിഷ്ട അക്കൗണ്ട് നീക്കം ചെയ്യുക +POST /api/accounts/:user/transactions | ഒരു ഇടപാട് ചേർക്കുക, ex: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }` +DELETE /api/accounts/:user/transactions/:id | നിർദ്ദിഷ്ട ഇടപാട് നീക്കം ചെയ്യുക diff --git a/7-bank-project/solution/translations/README.ml.md b/7-bank-project/solution/translations/README.ml.md new file mode 100644 index 00000000..b0a62de5 --- /dev/null +++ b/7-bank-project/solution/translations/README.ml.md @@ -0,0 +1,13 @@ +# ബാങ്ക് ആപ്പ് + +> വാനില HTML5, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് നിർമ്മിച്ച ബാങ്ക് ആപ്പ് പ്രോജക്റ്റിനുള്ള ഉദാഹരണ പരിഹാരം (ചട്ടക്കൂടുകളോ ലൈബ്രറികളോ ഉപയോഗിച്ചിട്ടില്ല). + +## ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നു + +ആദ്യം നിങ്ങൾക്ക് [API സെർവർ](../api/README.md) പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. + +ആപ്പ് പ്രവർത്തിപ്പിക്കാൻ ഏത് വെബ് സെർവറും ഉപയോഗിക്കാം, എന്നാൽ API പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കേണ്ടതിനാൽ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും: + +1. ഈ റിപ്പോ Git ക്ലോൺ ചെയ്യുക. +2. ഒരു ടെർമിനൽ തുറക്കുക, തുടർന്ന് `npx lite-server solution` റൺ ചെയ്യുക. അത് `3000` പോർട്ടിൽ ഒരു വികസന വെബ് സെർവർ ആരംഭിക്കും +3. ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നതിന് ഒരു ബ്രൗസറിൽ `http://localhost:3000` തുറക്കുക. diff --git a/7-bank-project/translations/README.ml.md b/7-bank-project/translations/README.ml.md new file mode 100644 index 00000000..164b16a9 --- /dev/null +++ b/7-bank-project/translations/README.ml.md @@ -0,0 +1,21 @@ +# :dollar: ഒരു ബാങ്ക് നിർമ്മിക്കുക + +ഈ പ്രോജക്റ്റിൽ, ഒരു സാങ്കൽപ്പിക ബാങ്ക് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഈ പാഠങ്ങളിൽ ഒരു വെബ് ആപ്പ് എങ്ങനെ ലേഔട്ട് ചെയ്യാം, റൂട്ടുകൾ നൽകാം, ഫോമുകൾ നിർമ്മിക്കാം, സ്റ്റേറ്റ് മാനേജുചെയ്യാം, നിങ്ങൾക്ക് ബാങ്കിന്റെ ഡാറ്റ ലഭ്യമാക്കാൻ കഴിയുന്ന ഒരു API-ൽ നിന്ന് ഡാറ്റ നേടുന്നത് എങ്ങനെ എന്നതിനുള്ള നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുന്നു. + +| ![Screen1](images/screen1.png) | ![Screen2](images/screen2.png) | +|--------------------------------|--------------------------------| + +## പാഠങ്ങൾ + +1. [ഒരു വെബ് ആപ്പിലെ HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](1-template-route/README.md) +2. [ഒരു ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക](2-forms/README.md) +3. [ഡാറ്റ ലഭ്യമാക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനുമുള്ള രീതികൾ](3-data/README.md) +4. [സംസ്ഥാന മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ](4-state-management/README.md) + +### ക്രെഡിറ്റുകൾ + +ഈ പാഠങ്ങൾ എഴുതിയത് :hearts: [Yohan Lasorsa](https://twitter.com/sinedied). + +ഈ പാഠങ്ങളിൽ ഉപയോഗിച്ചിരിക്കുന്ന [സെർവർ API](/7-bank-project/api/README.md) എങ്ങനെ നിർമ്മിക്കാമെന്ന് അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് [ഈ വീഡിയോ പരമ്പര](https://aka.ms/NodeBeginner) (പ്രത്യേകിച്ച് 17 മുതൽ 21 വരെയുള്ള വീഡിയോകൾ). + +നിങ്ങൾക്ക് [ഈ ഇന്ററാക്ടീവ് ലേൺ ട്യൂട്ടോറിയൽ](https://aka.ms/learn/express-api) നോക്കാവുന്നതാണ്. diff --git a/README.md b/README.md index 1c264bfc..3c3bf780 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + # Web Development for Beginners - A Curriculum Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'. diff --git a/translations/README.ml.md b/translations/README.ml.md new file mode 100644 index 00000000..20b42ceb --- /dev/null +++ b/translations/README.ml.md @@ -0,0 +1,101 @@ + +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# തുടക്കക്കാർക്കുള്ള വെബ് വികസനം - ഒരു പാഠ്യപദ്ധതി + +മൈക്രോസോഫ്റ്റിലെ അസുർ ക്ലൗഡ് അഡ്വക്കേറ്റ്സ് ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ്, എച്ച്ടിഎംഎൽ അടിസ്ഥാനകാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് 12-ആഴ്ച, 24-പാഠ പാഠ്യപദ്ധതി വാഗ്ദാനം ചെയ്യുന്നതിൽ സന്തോഷമുണ്ട്. ഓരോ പാഠത്തിലും പാഠത്തിന് മുമ്പും ശേഷവുമുള്ള ക്വിസുകൾ, പാഠം പൂർത്തിയാക്കാനുള്ള രേഖാമൂലമുള്ള നിർദ്ദേശങ്ങൾ, ഒരു പരിഹാരം, ഒരു അസൈൻമെന്റ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. ഞങ്ങളുടെ പ്രോജക്റ്റ് അധിഷ്‌ഠിത അദ്ധ്യാപനം പുതിയ കഴിവുകൾ സ്വായത്തമാക്കൻ നിങ്ങളെ അനുവദിക്കുന്നു. + +**ഞങ്ങളുടെ രചയിതാക്കളായ ജെൻ ലൂപ്പർ, ക്രിസ് നോറിംഗ്, ക്രിസ്റ്റഫർ ഹാരിസൺ, ജാസ്മിൻ ഗ്രീൻവേ, യോഹാൻ ലസോർസ, ഫ്ലോർ ഡ്രീസ്, സ്കെച്ച്നോട്ട് ആർട്ടിസ്റ്റ് ടോമിമി ഇമുറ എന്നിവർക്ക് ഹൃദയം നിറഞ്ഞ നന്ദി!** + +# ആമുഖം + +> **അദ്ധ്യാപകർ**, ഞങ്ങൾ [ചില നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്](/for-teachers.md) ഈ പാഠ്യപദ്ധതി എങ്ങനെ ഉപയോഗിക്കാം എന്നതിനെക്കുറിച്ച്. നിങ്ങളുടെ ഫീഡ്‌ബാക്ക് ഞങ്ങൾ ഇഷ്ടപ്പെടുന്നു [ഞങ്ങളുടെ ചർച്ചാ ഫോറത്തിൽ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! + +> **വിദ്യാർത്ഥികൾ**, ഈ പാഠ്യപദ്ധതി സ്വന്തമായി ഉപയോഗിക്കുന്നതിന്, മുഴുവൻ റിപ്പോയും ഫോർക്ക് ചെയ്ത് സ്വന്തമായി വ്യായാമങ്ങൾ പൂർത്തിയാക്കുക, പ്രീ-ലെക്ചർ ക്വിസിൽ തുടങ്ങി, പ്രഭാഷണം വായിച്ച് ബാക്കി പ്രവർത്തനങ്ങൾ പൂർത്തിയാക്കുക. പരിഹാര കോഡ് പകർത്തുന്നതിനുപകരം പാഠങ്ങൾ മനസിലാക്കിക്കൊണ്ട് പ്രോജക്ടുകൾ സൃഷ്ടിക്കാൻ ശ്രമിക്കുക; എന്നിരുന്നാലും ആ പ്രോജക്റ്റ് അധിഷ്ടിതം പാഠത്തിലെ /സൊല്യൂഷൻസ് ഫോൾഡറുകളിൽ ആ കോഡ് ലഭ്യമാണ്. മറ്റൊരു ആശയം സുഹൃത്തുക്കളുമായി ഒരു പഠന ഗ്രൂപ്പ് രൂപീകരിച്ച് ഒരുമിച്ച് ഉള്ളടക്കം പരിശോധിക്കുക എന്നതാണ്. കൂടുതൽ പഠനത്തിന്, ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു [മൈക്രോസോഫ്റ്റ് ലേൺ](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) കൂടാതെ താഴെ സൂചിപ്പിച്ചിരിക്കുന്ന വീഡിയോകൾ കണ്ടുകൊണ്ട്. + +[![പ്രമോ വീഡിയോ](/screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "പ്രമോ വീഡിയോ") + +> 🎥 പ്രോജക്റ്റിനെക്കുറിച്ചും അത് സൃഷ്ടിച്ചവരെക്കുറിച്ചും ഒരു വീഡിയോയ്ക്കായി മുകളിലുള്ള ചിത്രത്തിൽ ക്ലിക്കുചെയ്യുക! + +## അദ്ധ്യാപനo + +ഈ പാഠ്യപദ്ധതി നിർമ്മിക്കുമ്പോൾ ഞങ്ങൾ രണ്ട് പെഡഗോഗിക്കൽ സിദ്ധാന്തങ്ങൾ തിരഞ്ഞെടുത്തു: ഇത് പ്രോജക്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതാണെന്നും അതിൽ പതിവ് ക്വിസുകൾ ഉൾപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു. ഈ പരമ്പരയുടെ അവസാനത്തോടെ, വിദ്യാർത്ഥികൾ ഒരു ടൈപ്പിംഗ് ഗെയിം, ഒരു വെർച്വൽ ടെറേറിയം, ഒരു 'ഗ്രീൻ' ബ്രൗസർ എക്സ്റ്റൻഷൻ, ഒരു 'സ്പെയ്സ് ഇൻവേഡേഴ്സ്' ടൈപ്പ് ഗെയിം, ഒരു ബിസിനസ്-ടൈപ്പ് ബാങ്കിംഗ് ആപ്പ് എന്നിവ നിർമ്മിക്കുകയും ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുകയും ചെയ്യും , ഇന്നത്തെ വെബ് ഡെവലപ്പറിന്റെ ആധുനിക ടൂൾചെയിനിനൊപ്പം HTML, CSS എന്നിവയും. + +> 🎓 ഈ പാഠ്യപദ്ധതിയിലെ ആദ്യ കുറച്ച് പാഠങ്ങൾ നിങ്ങൾക്ക് മൈക്രോസോഫ്റ്റ് ലേൺ നെ കുറിച്ചുള്ള ഒരു[പഠന പാത](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) ആയി എടുക്കാം. + +പ്രോജക്റ്റുകളുമായി ഉള്ളടക്കം യോജിക്കുന്നുവെന്ന് ഉറപ്പുവരുത്തുന്നതിലൂടെ, ഈ പ്രക്രിയ വിദ്യാർത്ഥികളെ കൂടുതൽ ആകർഷകമാക്കുകയും ആശയങ്ങൾ നിലനിർത്തുന്നത് വർദ്ധിപ്പിക്കുകയും ചെയ്യും. ആശയങ്ങൾ അവതരിപ്പിക്കാൻ ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനത്തിൽ നിരവധി സ്റ്റാർട്ടർ പാഠങ്ങൾ എഴുതി, paired with video from the "[ജാവാസ്ക്രിപ്റ്റിലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" വീഡിയോ ട്യൂട്ടോറിയലുകളുടെ ശേഖരം, ചില എഴുത്തുകാർ ഈ പാഠ്യപദ്ധതിക്ക് സംഭാവന നൽകി. +ഇതുകൂടാതെ, ഒരു ക്ലാസിന് മുമ്പുള്ള ഒരു കുറഞ്ഞ ക്വിസ് ഒരു വിഷയം പഠിക്കുന്നതിനുള്ള വിദ്യാർത്ഥിയുടെ ഉദ്ദേശ്യം സജ്ജമാക്കുന്നു, അതേസമയം ക്ലാസിന് ശേഷമുള്ള രണ്ടാമത്തെ ക്വിസ് കൂടുതൽ നിലനിർത്തൽ ഉറപ്പാക്കുന്നു. ഈ പാഠ്യപദ്ധതി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് വഴക്കമുള്ളതും രസകരവുമാണ്, ഇത് മുഴുവനായോ ഭാഗികമായോ എടുക്കാം. പദ്ധതികൾ ചെറുതായി ആരംഭിച്ച് 12 ആഴ്ച ചക്രത്തിന്റെ അവസാനത്തോടെ കൂടുതൽ സങ്കീർണമാകുന്നു. + +ഒരു ചട്ടക്കൂട് സ്വീകരിക്കുന്നതിന് മുമ്പ് ഒരു വെബ് ഡെവലപ്പർ എന്ന നിലയിൽ ആവശ്യമായ അടിസ്ഥാന കഴിവുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിന് ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ചട്ടക്കൂടുകൾ അവതരിപ്പിക്കുന്നത് മനപ്പൂർവ്വം ഒഴിവാക്കിയിട്ടുണ്ടെങ്കിലും, ഈ പാഠ്യപദ്ധതി പൂർത്തിയാക്കുന്നതിനുള്ള ഒരു നല്ല അടുത്ത ഘട്ടം വീഡിയോകളുടെ മറ്റൊരു ശേഖരത്തിലൂടെ നോഡ്.js- നെക്കുറിച്ച് പഠിക്കുക എന്നതാണ്: "[നോഡ്.js ലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)". + +> ഞങ്ങളുടെ [പെരുമാറ്റച്ചട്ടം](/CODE_OF_CONDUCT.md), [സംഭാവന](/CONTRIBUTING.md), [പരിഭാഷ](/TRANSLATIONS.md) എന്നിവയുടെ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പരിശോധിക്കുക. നിങ്ങളുടെ ക്രിയാത്മക മായ അഭിപ്രായത്തെ ഞങ്ങൾ സ്വാഗതം ചെയ്യുന്നു! +> +## ഓരോ പാഠത്തിലും ഉൾപ്പെടുന്നത്: + +- ഓപ്ഷണൽ സ്കെച്ച്നോട്ട് +- ഓപ്ഷണൽ അനുബന്ധ വീഡിയോ +- പാഠത്തിനു മുമ്പുള്ള വാംഅപ്പ് ക്വിസ് +- എഴുതിയ പാഠഭാഗം +- പ്രോജക്റ്റ് അധിഷ്‌ഠിത പാഠങ്ങൾക്കായി, പ്രോജക്റ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ചുള്ള ഘട്ടം ഘട്ടമായുള്ള ഗൈഡുകൾ +- വിജ്ഞാന പരിശോധനകൾ +- ഒരു വെല്ലുവിളി +- അനുബന്ധ വായന +- അസ്സൈൻമെന്റ് +- പാഠാനന്തര ക്വിസ് + +> **ക്വിസുകളെക്കുറിച്ചുള്ള ഒരു കുറിപ്പ്**: എല്ലാ ക്വിസുകളും [ഈ ആപ്പിൽ](https://happy-mud-02d95f10f.azurestaticapps.net/) അടങ്ങിയിരിക്കുന്നു, മൂന്ന് ചോദ്യങ്ങൾ വീതമടങ്ങിയ മൊത്തം 48 ക്വിസുകൾ. അവ പാഠങ്ങൾക്കുള്ളിൽ നിന്ന് ബന്ധിപ്പിച്ചിരിക്കുന്നു, പക്ഷേ ക്വിസ് ആപ്പ് പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും; 'ക്വിസ്-ആപ്പ്' ഫോൾഡറിലെ നിർദ്ദേശം പാലിക്കുക. അവ ക്രമേണ പ്രാദേശികവൽക്കരിക്കപ്പെടുന്നു. + +## പാഠങ്ങൾ + + +| | പദ്ധതിയുടെ പേര് | പഠിപ്പിച്ച ആശയങ്ങൾ | പഠന ലക്ഷ്യങ്ങൾ | ലിങ്ക് ചെയ്ത പാഠം | രചയിതാവ് | +| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | ആമുഖം | പ്രോഗ്രാമിംഗിലേക്കും ട്രേഡിലെ ഉപകരണങ്ങളിലേക്കും ആമുഖം | മിക്ക പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കും പിന്നിലെ അടിസ്ഥാന അടിസ്ഥാനങ്ങളും പ്രൊഫഷണൽ ഡെവലപ്പർമാരെ അവരുടെ ജോലികൾ ചെയ്യാൻ സഹായിക്കുന്ന സോഫ്‌റ്റ്‌വെയറുകളെക്കുറിച്ചും അറിയുക | [പ്രോഗ്രാമിംഗ് ഭാഷകളിലേക്കും വ്യാപാരത്തിന്റെ ഉപകരണങ്ങളിലേക്കുമുള്ള ഇൻട്രോ](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ജാസ്മിൻ | +| 02 | ആമുഖം | ഗിറ്റ്ഹബിന്റെ അടിസ്ഥാനങ്ങളിൽ ഒരു ടീമിനൊപ്പം പ്രവർത്തിക്കുന്നത് ഉൾപ്പെടുന്നു | നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഗിറ്റ്ഹബ് എങ്ങനെ ഉപയോഗിക്കാം, ഒരു കോഡ് അടിസ്ഥാനത്തിൽ മറ്റുള്ളവരുമായി എങ്ങനെ സഹകരിക്കാം | [ഗിറ്റ്ഹബിലേക്കുള്ള ഇൻട്രോ](/1-getting-started-lessons/2-github-basics/README.md) | ഫ്ലോർ | +| 03 | ആമുഖം | ആക്സസിബിലിറ്റി | വെബ് ആക്സസബിലിറ്റിയുടെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുക | [ആക്സസിബിലിറ്റി അടിസ്ഥാനങ്ങൾ](/1-getting-started-lessons/3-accessibility/README.md) | ക്രിസ്റ്റഫർ | +| 04 | JS അടിസ്ഥാനങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങളുടെ അടിസ്ഥാനങ്ങൾ | [ഡാറ്റ തരങ്ങൾ](/2-js-basics/1-data-types/README.md) | ജാസ്മിൻ | +| 05 | JS അടിസ്ഥാനങ്ങൾ | പ്രവർത്തനങ്ങളും രീതികളും | ഒരു ആപ്ലിക്കേഷന്റെ ലോജിക് ഫ്ലോ കൈകാര്യം ചെയ്യാനുള്ള പ്രവർത്തനങ്ങളെയും രീതികളെയും കുറിച്ച് അറിയുക | [പ്രവർത്തനങ്ങളും രീതികളും](/2-js-basics/2-functions-methods/README.md) | ജാസ്മിനും ക്രിസ്റ്റഫറും | +| 06 | JS അടിസ്ഥാനങ്ങൾ | ജെഎസുമായി തീരുമാനങ്ങൾ എടുക്കുന്നു | തീരുമാനമെടുക്കുന്ന രീതികൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡിൽ സാഹചര്യങ്ങൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [തീരുമാനങ്ങൾ എടുക്കുക ](/2-js-basics/3-making-decisions/README.md) | ജാസ്മിൻ | +| 07 | JS അടിസ്ഥാനങ്ങൾ | അറേകളും ലൂപ്പുകളും | ജാവാസ്ക്രിപ്റ്റിലെ അറേകളും ലൂപ്പുകളും ഉപയോഗിച്ച് ഡാറ്റഉപയോഗിച്ച് പ്രവർത്തിക്കുക | [അറേകളും ലൂപ്പുകളും](/2-js-basics/4-arrays-loops/README.md) | ജാസ്മിൻ | +| 08 | [ടെറേറിയം](/3-terrarium/solution/README.md) | HTML ൽ പരിശീലിക്കുക | ഒരു ലേഔട്ട് നിർമ്മിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് ഒരു ഓൺലൈൻ ടെറേറിയം സൃഷ്ടിക്കുന്നതിന് HTML നിർമ്മിക്കുക | [HTML ന്റെ ആമുഖം](/3-terrarium/1-intro-to-html/README.md) | ജെൻ | +| 09 | [ടെറേറിയം](/3-terrarium/solution/README.md) | CSS ൽ പരിശീലിക്കുക | പേജ് പ്രതികരണാത്മകമാക്കുന്നതുൾപ്പെടെ CSS-ന്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട് ഓൺലൈൻ ടെറേറിയം സ്റ്റൈൽ ചെയ്യുന്നതിന് സിഎസ്എസ് നിർമ്മിക്കുക | [CSS ന്റെ ആമുഖം](/3-terrarium/2-intro-to-css/README.md) | ജെൻ | +| 10 | [ടെറേറിയം](/3-terrarium/solution) | ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം | ക്ലോസ്രെസ്ന്റെയും ഡോം കൃത്രിമം ഉപയോഗിച്ചുകൊണ്ട് ടെറേറിയം ഒരു ഡ്രാഗ്/ഡ്രോപ്പ് ഇന്റർഫേസായി പ്രവർത്തനമുണ്ടാക്കാൻ ജാവാസ്ക്രിപ്റ്റ് നിർമ്മിക്കുക | [ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ജെൻ | +| 11 | [ടൈപ്പിംഗ് ഗെയിം](/4-typing-game/solution) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ആപ്പിന്റെ ലോജിക് ഡ്രൈവ് ചെയ്യുന്നതിന് കീബോർഡ് ഇവന്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക | [ഇവന്റ്-ഡ്രൈവിംഗ് പ്രോഗ്രാമിംഗ്](/4-typing-game/typing-game/README.md) | ക്രിസ്റ്റഫർ | +| 12 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറുകളുമായി പ്രവർത്തിക്കുന്നു | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ആദ്യ ഘടകങ്ങൾ എങ്ങനെ സ്കഫോൾഡ് ആാമെന്ന് മനസിലാക്കുക | [ബ്രൗസറുകളെ കുറിച്ച്](/5-browser-extension/1-about-browsers/README.md) | ജെൻ | +| 13 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ഒരു ഫോം നിർമ്മിക്കുക, ഒരു എപിഐ വിളിക്കുക, പ്രാദേശിക സംഭരണത്തിൽ വേരിയബിളുകൾ സംഭരിക്കുക | പ്രാദേശിക സംഭരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വേരിയബിളുകൾ ഉപയോഗിച്ച് ഒരു API വിളിക്കുന്നതിനായി നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക | [APIs, ഫോമുകളും ലോക്കൽ സ്റ്റോറേജും](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ | +| 14 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രക്രിയകൾ, വെബ് പ്രകടനം | എക്സ്റ്റെൻഷന്റെ ഐക്കൺ കൈകാര്യം ചെയ്യുന്നതിന് ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രക്രിയകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനത്തെക്കുറിച്ചും നിർമ്മിക്കുന്നതിനുള്ള ചില ഒപ്റ്റിമൈസേഷനുകളെ കുറിച്ചും അറിയുക | [പശ്ചാത്തല ജോലികളും പ്രകടനവും](/5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ | +| 15 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ് മെന്റ് | ഒരു ഗെയിം നിർമ്മിക്കുന്നതിനുള്ള തയ്യാറെടുപ്പിൽ ക്ലാസുകളും കോമ്പോസിഷൻ, പബ്/സബ് പാറ്റേൺ എന്നിവ ഉപയോഗിച്ച് അനന്തരാവകാശത്തെക്കുറിച്ച് അറിയുക | [അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ്മെന്റിന്റെ ആമുഖം](/6-space-game/1-introduction/README.md) | ക്രിസ് | +| 16 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ക്യാൻവാസിലേക്ക് വരയ്ക്കുന്നു | ഒരു സ്ക്രീനിലേക്ക് ഘടകങ്ങൾ വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന കാൻവാസ് API കുറിച്ച് അറിയുക | [ക്യാൻവാസിലേക്ക് വരയ്ക്കുക ](/6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് | +| 17 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്ക്രീനിന് ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു | കാർട്ടീഷ്യൻ നിർദ്ദേശാങ്കങ്ങളും കാൻവാസ് API ഉപയോഗിച്ച് മൂലകങ്ങൾക്ക് എങ്ങനെ ചലനം നേടാൻ കഴിയുമെന്ന് കണ്ടെത്തുക | [ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു](/6-space-game/3-moving-elements-around/README.md) | ക്രിസ് | +| 18 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | കോളിഷൻ കണ്ടെത്തൽ | കീപ്രസ്സുകൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ കൂട്ടിമുട്ടുകയും പരസ്പരം പ്രതികരിക്കുകയും ഗെയിമിന്റെ പ്രകടനം ഉറപ്പാക്കുന്നതിന് ഒരു കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [കൂട്ടിയിടി കണ്ടെത്തൽ](/6-space-game/4-collision-detection/README.md) | ക്രിസ് | +| 19 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്കോർ നിലനിർത്തൽ | ഗെയിമിന്റെ നിലയെയും പ്രകടനത്തെയും അടിസ്ഥാനമാക്കി ഗണിത കണക്കുകൂട്ടലുകൾ നിർവഹിക്കുക | [സ്കോർ നിലനിർത്തൽ](/6-space-game/5-keeping-score/README.md) | ക്രിസ് | +| 20 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ഗെയിം അവസാനിപ്പിക്കുകയും പുനരാരംഭിക്കുകയും ചെയ്യുന്നു | ആസ്തികൾ വൃത്തിയാക്കുന്നതും വേരിയബിൾ മൂല്യങ്ങൾ പുനക്രമീകരിക്കുന്നതും ഉൾപ്പെടെ ഗെയിം അവസാനിപ്പിക്കുന്നതിനെകുറിച്ചും പുനരാരംഭിക്കുന്നതിനെ കുറിച്ചും അറിയുക | [അവസാനങ്ങളുടെ നിബന്ധനകൾ ](/6-space-game/6-end-condition/README.md) | ക്രിസ് | +| 21 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | HTML ഒരു വെബ് ആപ്പിലെ ടെംപ്ലേറ്റുകളും റൂട്ടുകളും | റൂട്ടിംഗും എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളും ഉപയോഗിച്ച് ഒരു മൾട്ടിപേജ് വെബ് സൈറ്റിന്റെ ആർക്കിടെക്ചറിന്റെ സ്കഫോൾഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](/7-bank-project/1-template-route/README.md) | യോഹാൻ | +| 22 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോമുകൾ നിർമ്മിക്കുന്നതിനെ കുറിച്ചും വാലിഡേഷൻ റുട്ടീൻ കൈമാറുന്നതിനെ കുറിച്ചും അറിയുക | [ഫോമുകൾ](/7-bank-project/2-forms/README.md) | യോഹാൻ | +| 23 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ഡാറ്റ കൊണ്ടുവരുന്നതും ഉപയോഗിക്കുന്നതുമായ രീതികൾ | ഡാറ്റ നിങ്ങളുടെ ആപ്പിലേക്ക് എങ്ങനെ ഒഴുകുന്നു, അത് എങ്ങനെ കൊണ്ടുവരാം, സംഭരിക്കാം, ഉപേക്ഷിക്കാം | [ഡാറ്റ](/7-bank-project/3-data/README.md) | യോഹാൻ | +| 24 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് എങ്ങനെ സ്റ്റേറ്റ്നിലനിർത്തുന്നു, പ്രോഗ്രാമായി എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് അറിയുക | [സ്റ്റേറ്റ് മാനേജ്മെന്റ്](/7-bank-project/4-state-management/README.md) | യോഹാൻ | + +## ഓഫ്‌ലൈൻ ആക്‌സസ്സ് + +നിങ്ങൾക്ക് ഈ ഡോക്യുമെന്റേഷൻ [Docsify](https://docsify.js.org/#/) ഉപയോഗിച്ച് ഓഫ്‌ലൈനിൽ പ്രവർത്തിപ്പിക്കാനാകും. ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക, [Docsify ഇന്സ്റ്റോള് ചെയ്യുക](https://docsify.js.org/#/quickstart) നിങ്ങളുടെ പ്രാദേശിക മെഷീനിൽ,തുടർന്ന് ഈ റിപ്പോയുടെ റൂട്ട് ഫോൾഡറിൽ `docsify serve` ടൈപ്പ് ചെയ്യുക. നിങ്ങളുടെ ലോക്കൽഹോസ്റ്റിൽ പോർട്ട് 3000 ൽ വെബ്സൈറ്റ് കാണാം : `localhost:3000`. + +## പിഡിഫ് + +എല്ലാ പാഠങ്ങളുടെയും ഒരു PDF കാണാം [ഇവിടെ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) + +## മറ്റ് പാഠ്യപദ്ധതികൾ + +ഞങ്ങളുടെ ടീം മറ്റ് പാഠ്യപദ്ധതികൾ നിർമ്മിക്കുന്നു! പരിശോധിക്കുക : + +- [തുടക്കക്കാർക്കായുള്ള മെഷീൻ ലേണിംഗ്](https://aka.ms/ml-beginners) +- [തുടക്കക്കാർക്കായുള്ള IoT](https://aka.ms/iot-beginners) diff --git a/translations/for-teachers.ml.md b/translations/for-teachers.ml.md new file mode 100644 index 00000000..ab079165 --- /dev/null +++ b/translations/for-teachers.ml.md @@ -0,0 +1,33 @@ +## അധ്യാപകർക്ക് + +നിങ്ങളുടെ ക്ലാസ് മുറിയിൽ ഈ പാഠ്യപദ്ധതി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടോ? മടിക്കേണ്ടതില്ല! + +വാസ്തവത്തിൽ, GitHub ക്ലാസ്റൂം ഉപയോഗിച്ച് നിങ്ങൾക്ക് GitHub-ൽ തന്നെ ഇത് ഉപയോഗിക്കാൻ കഴിയും. + +അത് ചെയ്യുന്നതിന്, ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക. ഓരോ പാഠത്തിനും നിങ്ങൾ ഒരു റിപ്പോ സൃഷ്‌ടിക്കേണ്ടതുണ്ട്, അതിനാൽ നിങ്ങൾ ഓരോ ഫോൾഡറിനും പ്രത്യേക റിപ്പോയിലേക്ക് എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യേണ്ടതുണ്ട്. അതുവഴി, [GitHub ക്ലാസ്റൂം](https://classroom.github.com/classrooms) ഓരോ പാഠവും പ്രത്യേകം എടുക്കാം. + +ഈ [പൂർണ്ണ നിർദ്ദേശങ്ങൾ](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) നിങ്ങളുടെ ക്ലാസ് റൂം എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഒരു ആശയം നൽകും. + +## ഇത് മൂഡിൽ, ക്യാൻവാസ് അല്ലെങ്കിൽ ബ്ലാക്ക്ബോർഡിൽ ഉപയോഗിക്കുന്നു + +ഈ പഠന മാനേജ്മെന്റ് സിസ്റ്റങ്ങളിൽ ഈ പാഠ്യപദ്ധതി നന്നായി പ്രവർത്തിക്കുന്നു! പൂർണ്ണമായ ഉള്ളടക്കത്തിനായി [മൂഡിൽ അപ്‌ലോഡ് ഫയൽ](/teaching-files/webdev-moodle.mbz) ഉപയോഗിക്കുക, അല്ലെങ്കിൽ [കോമൺ കാട്രിഡ്ജ് ഫയൽ](/teaching-files/webdev-common-cartridge.imscc) അടങ്ങിയിരിക്കുന്ന ചില ഉള്ളടക്കം ശ്രമിക്കുക. മൂഡിൽ ക്ലൗഡ് പൂർണ്ണ കോമൺ കാട്രിഡ്ജ് കയറ്റുമതിയെ പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ ക്യാൻവാസിലേക്ക് അപ്‌ലോഡ് ചെയ്യാൻ കഴിയുന്ന മൂഡിൽ ഡൗൺലോഡ് ഫയൽ ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഈ അനുഭവം എങ്ങനെ മെച്ചപ്പെടുത്താം എന്ന് ഞങ്ങളെ അറിയിക്കുക. + +![Moodle](/teaching-files/moodle.png) +> ഒരു മൂഡിൽ ക്ലാസ്റൂമിലെ പാഠ്യപദ്ധതി +> +![Canvas](/teaching-files/canvas.png) +> ക്യാൻവാസിലെ പാഠ്യപദ്ധതി + +## റിപ്പോ അതേപടി ഉപയോഗിക്കുന്നു + +GitHub Classroom ഉപയോഗിക്കാതെ, ഈ റിപ്പോ നിലവിൽ ഉള്ളതുപോലെ ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അതും ചെയ്യാം. ഏത് പാഠമാണ് ഒരുമിച്ച് പ്രവർത്തിക്കേണ്ടതെന്ന് നിങ്ങളുടെ വിദ്യാർത്ഥികളുമായി ആശയവിനിമയം നടത്തേണ്ടതുണ്ട്. + +ഒരു ഓൺലൈൻ ഫോർമാറ്റിൽ (സൂം, ടീമുകൾ അല്ലെങ്കിൽ മറ്റുള്ളവ) നിങ്ങൾ ക്വിസുകൾക്കായി ബ്രേക്ക്ഔട്ട് റൂമുകൾ രൂപീകരിക്കുകയും പഠിക്കാൻ തയ്യാറാകാൻ വിദ്യാർത്ഥികളെ സഹായിക്കുകയും ചെയ്യാം. തുടർന്ന് ക്വിസുകളിലേക്ക് വിദ്യാർത്ഥികളെ ക്ഷണിക്കുകയും അവരുടെ ഉത്തരങ്ങൾ ഒരു നിശ്ചിത സമയത്ത് 'പ്രശ്നങ്ങൾ' ആയി സമർപ്പിക്കുകയും ചെയ്യുക. വിദ്യാർത്ഥികൾ തുറന്ന സ്ഥലത്ത് സഹകരിച്ച് പ്രവർത്തിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അസൈൻമെന്റുകളിലും നിങ്ങൾക്ക് ഇത് ചെയ്യാം. + +നിങ്ങൾ കൂടുതൽ സ്വകാര്യ ഫോർമാറ്റാണ് തിരഞ്ഞെടുക്കുന്നതെങ്കിൽ, നിങ്ങളുടെ വിദ്യാർത്ഥികളോട് പാഠ്യപദ്ധതിയും പാഠം പ്രകാരമുള്ള പാഠവും അവരുടെ സ്വന്തം GitHub റെപ്പോകളിലേക്ക് സ്വകാര്യ റിപ്പോകളായി നൽകാനും നിങ്ങൾക്ക് ആക്‌സസ് നൽകാനും ആവശ്യപ്പെടുക. തുടർന്ന് അവർക്ക് ക്വിസുകളും അസൈൻമെന്റുകളും സ്വകാര്യമായി പൂർത്തിയാക്കാനും നിങ്ങളുടെ ക്ലാസ്റൂം റിപ്പോയിലെ പ്രശ്നങ്ങൾ മുഖേന അവ നിങ്ങൾക്ക് സമർപ്പിക്കാനും കഴിയും. + +ഒരു ഓൺലൈൻ ക്ലാസ്റൂം ഫോർമാറ്റിൽ ഇത് പ്രവർത്തിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. നിങ്ങൾക്ക് ഏറ്റവും മികച്ചത് എന്താണെന്ന് ഞങ്ങളെ അറിയിക്കുക! + +## ദയവായി നിങ്ങളുടെ ചിന്തകൾ ഞങ്ങൾക്ക് നൽകുക! + +ഈ പാഠ്യപദ്ധതി നിങ്ങൾക്കും നിങ്ങളുടെ വിദ്യാർത്ഥികൾക്കും വേണ്ടി പ്രവർത്തിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ദയവായി ഞങ്ങൾക്ക് [ഫീഡ്‌ബാക്ക്](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u) നൽകുക. From f2a1465811d303a13cee7760ae61453110c95758 Mon Sep 17 00:00:00 2001 From: Keshav <56075233+keshavgbpecdelhi@users.noreply.github.com> Date: Sun, 7 Nov 2021 03:30:14 +0530 Subject: [PATCH 14/19] Adding pdf working link (#513) * Adding pdf working link wrt #507 * Update README.el.md * Update README.fil.md * Update README.fr.md * Update README.pt-BR.md --- README.md | 2 +- translations/README.el.md | 2 +- translations/README.fil.md | 2 +- translations/README.fr.md | 4 ++-- translations/README.pt-BR.md | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3c3bf780..d20b4f46 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ You can run this documentation offline by using [Docsify](https://docsify.js.org ## PDF -A PDF of all of the lessons can be found [here](pdf/readme.pdf) +A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Other Curricula diff --git a/translations/README.el.md b/translations/README.el.md index 14b78714..6a6fba56 100644 --- a/translations/README.el.md +++ b/translations/README.el.md @@ -88,7 +88,7 @@ ## PDF -Μπορείτε να βρείτε [εδώ](pdf/readme.pdf) ενα PDF με όλα τα μαθήματα. +Μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ενα PDF με όλα τα μαθήματα. ## Άλλα προγράμματα μαθημάτων diff --git a/translations/README.fil.md b/translations/README.fil.md index f2cbbd47..c6e25e0c 100644 --- a/translations/README.fil.md +++ b/translations/README.fil.md @@ -89,7 +89,7 @@ Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit ## PDF -Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](pdf/readme.pdf) +Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Iba pang Kurikulum diff --git a/translations/README.fr.md b/translations/README.fr.md index f3de1ffa..7e17ba17 100644 --- a/translations/README.fr.md +++ b/translations/README.fr.md @@ -105,11 +105,11 @@ Vous pouvez y accéder en utilisant [Docsify](https://docsify.js.org/#/). Effect ## PDF -Ce cours est disponible en PDF. [Cliquez ici](../pdf/readme.pdf) +Ce cours est disponible en PDF. [Cliquez ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Autres Cours Découvrez d'autres cours : - [Machine Learning pour débutants](https://aka.ms/ml-beginners) -- [IoT pour débutants](https://aka.ms/iot-beginners) \ No newline at end of file +- [IoT pour débutants](https://aka.ms/iot-beginners) diff --git a/translations/README.pt-BR.md b/translations/README.pt-BR.md index 45d39674..17b855b6 100644 --- a/translations/README.pt-BR.md +++ b/translations/README.pt-BR.md @@ -99,7 +99,7 @@ Você pode utilizar essa documentação quando estiver offline através de [Docs ## PDF -Um PDF de todas as lições pode ser encontrado [bem aqui](../pdf/readme.pdf) +Um PDF de todas as lições pode ser encontrado [bem aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Outros Cursos From 3cae70cc2121cf8d1a9b4a99c1c527964a78a729 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Sat, 6 Nov 2021 18:01:53 -0400 Subject: [PATCH 15/19] removing trackgit link in hindi translation --- translations/README.hi.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/translations/README.hi.md b/translations/README.hi.md index d843dbff..ff2ce4f8 100644 --- a/translations/README.hi.md +++ b/translations/README.hi.md @@ -83,6 +83,4 @@ Microsoft में Azure Cloud Advocates को 12-सप्ताह, 24-प आप इस दस्तावेज़ को ऑफ़लाइन कर सकते हैं [Docsify](https://docsify.js.org/#/) का उपयोग करके। अपने स्थानीय मशीन पर इस रेपो, [स्थापित डॉक्सिफ़ाइस्ट](https://docsify.js.org/#/quickstart) को फोर्क करें, और फिर इस रेपो के रूट फ़ोल्डर में, `docsify serve` टाइप करें। वेबसाइट को आपके लोकलहोस्ट पर पोर्ट 3000 पर परोसा जाएगा: `localhost:3000`. - -trackgit-views - + From ffcd9adf19e8c08656d995735f468910183967cd Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Mon, 8 Nov 2021 17:51:57 +0000 Subject: [PATCH 16/19] Update a image link (#520) Update a image link --- 7-bank-project/2-forms/translations/README.fr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-bank-project/2-forms/translations/README.fr.md b/7-bank-project/2-forms/translations/README.fr.md index 92264002..58264bce 100644 --- a/7-bank-project/2-forms/translations/README.fr.md +++ b/7-bank-project/2-forms/translations/README.fr.md @@ -128,7 +128,7 @@ Ajoutez les propriétés `action` et `method` au formulaire d'inscription : Essayez maintenant d'enregistrer un nouveau compte avec votre nom. Après avoir cliqué sur le bouton *S'inscrire*, vous devriez voir quelque chose comme ceci : -![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](./images/form-post.png) +![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](../images/form-post.png) Si tout se passe bien, le serveur doit répondre à votre demande avec une réponse [JSON](https://www.json.org/json-fr.html) contenant les données de compte qui ont été créées. From 28c18071ab1479f7505bc209ece1b9808b7644af Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Tue, 9 Nov 2021 02:16:00 +0000 Subject: [PATCH 17/19] [fr] Suggest translation for 7-solution-readme (#521) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Translate 7-solution-readme in french --- 7-bank-project/solution/translations/README.fr.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 7-bank-project/solution/translations/README.fr.md diff --git a/7-bank-project/solution/translations/README.fr.md b/7-bank-project/solution/translations/README.fr.md new file mode 100644 index 00000000..5158fe91 --- /dev/null +++ b/7-bank-project/solution/translations/README.fr.md @@ -0,0 +1,13 @@ +# Application bancaire + +> Exemple de solution pour le projet d'application bancaire, développé avec du HTML5 vanilla, du CSS et du JavaScript (pas de frameworks ni de bibliothèques utilisés). + +## Exécuter l'application + +Assurez-vous d'abord que le [serveur API](../../api/translations/README.fr.md) est en cours d'exécution. + +N'importe quel serveur Web peut être utilisé pour exécuter l'application, mais comme [Node.js](https://nodejs.org/fr) doit de toute façon être installé pour exécuter l'API, vous pouvez : + +1. Git cloner ce dépôt. +2. Ouvrir un terminal, puis exécutez `npx lite-server solution`. Celà démarrera un serveur Web de développement sur le port `3000` +3. Ouvrir `http://localhost:3000` dans un navigateur pour exécuter l'application. \ No newline at end of file From b19ed95ad5efd783e83cb2494b0f1ded128e659f Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Tue, 9 Nov 2021 13:24:44 +0000 Subject: [PATCH 18/19] [fr] add readme.fr.md file for 7-api-readme (#522) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * add french translation for 7-api base readme --- 7-bank-project/api/translations/README.fr.md | 34 ++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 7-bank-project/api/translations/README.fr.md diff --git a/7-bank-project/api/translations/README.fr.md b/7-bank-project/api/translations/README.fr.md new file mode 100644 index 00000000..765ef60d --- /dev/null +++ b/7-bank-project/api/translations/README.fr.md @@ -0,0 +1,34 @@ +# API bancaire + +> API bancaire construite avec [Node.js](https://nodejs.org) + [Express](https://expressjs.com/). + +L'API est déjà conçue pour vous et ne fait pas partie de l'exercice. + +Cependant, si vous souhaitez apprendre à créer une API comme celle-ci, vous pouvez suivre cette série de vidéos : https://aka.ms/NodeBeginner (les vidéos 17 à 21 couvrent cette API exacte). + +Vous pouvez également consulter ce tutoriel interactif : https://aka.ms/learn/express-api + +## Exécution du serveur + +Assurez-vous que [Node.js](https://nodejs.org) est installé. + +1. Git clonez ce repo [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners). +2. Ouvrez votre terminal et accédez au dossier `Web-Dev-For-Beginners/7-bank-project/api` +2. Exécutez `npm install` et attendez que les packages soient installés (cela peut prendre un certain temps en fonction de la qualité de votre connexion Internet). +3. Une fois l'installation terminée, exécutez `npm start` et vous êtes prêt à commencer. + +Le serveur devrait commencer à écouter sur le port `5000`. +*Ce serveur fonctionnera avec le terminal principal du serveur d'applications de la banque (à l'écoute sur le port `3000`), ne le fermez pas.* + +> Remarque : toutes les entrées sont stockées en mémoire et ne sont pas persistantes, de sorte que lorsque le serveur est arrêté, toutes les données sont perdues. + +## Détails de l'API + +Route | Description +---------------------------------------------|------------------------------------ +GET /api/ | Obtenir des informations sur le serveur +POST /api/accounts/ | Créer un compte, ex : `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }` +GET /api/accounts/:user | Obtenir toutes les données pour le compte spécifié +DELETE /api/accounts/:user | Supprimer le compte spécifié +POST /api/accounts/:user/transactions | Ajoutez une transaction, ex : `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }` +DELETE /api/accounts/:user/transactions/:id | Supprimer la transaction spécifiée \ No newline at end of file From d8b5d7be57a50c678e7be544f1255e642f904f08 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Fri, 12 Nov 2021 13:31:47 +0000 Subject: [PATCH 19/19] Suggest french translation for 7-4-assignment (#525) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * add assignment.fr.md file for 7-4-state-management --- .../translations/assignment.fr.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 7-bank-project/4-state-management/translations/assignment.fr.md diff --git a/7-bank-project/4-state-management/translations/assignment.fr.md b/7-bank-project/4-state-management/translations/assignment.fr.md new file mode 100644 index 00000000..d157c8a8 --- /dev/null +++ b/7-bank-project/4-state-management/translations/assignment.fr.md @@ -0,0 +1,25 @@ +# Implémenter la boîte de dialogue "Ajouter une transaction" + +## Instructions + +Il manque encore à notre application bancaire une fonctionnalité importante: la possibilité de saisir de nouvelles transactions. +En utilisant tout ce que vous avez appris dans les quatre leçons précédentes, implémentez une boîte de dialogue « Ajouter une transaction » : + +- Ajouter un bouton "Ajouter une transaction" dans la page du tableau de bord +- Créez une nouvelle page avec un modèle HTML ou utilisez JavaScript pour afficher/masquer le HTML de la boîte de dialogue sans quitter la page du tableau de bord (vous pouvez utiliser [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) pour celà, ou des classes CSS) +- Assurez-vous de gérer [l'accessibilité du clavier et du lecteur d'écran](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pour la boîte de dialogue +- Implémenter un formulaire HTML pour recevoir les données d'entrée +- Créer des données JSON à partir des données du formulaire et les envoyer à l'API +- Mettre à jour la page du tableau de bord avec les nouvelles données + +Consultez les [spécifications de l'API du serveur](./../../api/translations/README.fr.md) pour voir quelle API vous devez appeler et quel est le format JSON attendu. + +Voici un exemple de résultat après avoir terminé le devoir : + +![Capture d'écran montrant un exemple de boîte de dialogue "Ajouter une transaction"](../images/dialog.png) + +## Rubrique + +| Critères | Exemplaire | Adéquat | Besoin d'amélioration | +| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------| +| | L'ajout d'une transaction est entièrement mis en œuvre en suivant toutes les meilleures pratiques vues dans les leçons. | L'ajout d'une transaction est implémenté, mais ne suit pas les meilleures pratiques vues dans les leçons, ou ne fonctionne que partiellement. | L'ajout d'une transaction ne fonctionne pas du tout. | \ No newline at end of file