From d5d99688001ab2402b5b0c79b68d2eafb40ff5f9 Mon Sep 17 00:00:00 2001 From: Ludovico Besana <35035423+ludovicobesana@users.noreply.github.com> Date: Sun, 31 Oct 2021 15:19:27 +0100 Subject: [PATCH 01/22] feat: Add favicon and title (#488) --- images/favicon.png | Bin 0 -> 6188 bytes index.html | 5 +++-- 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 images/favicon.png diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..9e5b4f6ac5ab75ef5467dcdb59f9db3cc7a0f405 GIT binary patch literal 6188 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 202a4877..c7868a1a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,12 @@ - Document + Web Dev for Beginners - + +
+``` + +> Nota: use `defer` ao importar um arquivo JavaScript externo para o arquivo html, de modo a permitir que o JavaScript seja executado somente depois que o arquivo HTML tiver sido totalmente carregado. Você também pode usar o atributo async, que permite que o script seja executado enquanto o arquivo HTML está sendo analisado, mas, em nosso caso, é importante ter os elementos HTML totalmente disponíveis para arrastar antes de permitir que o script de arrastar seja executado. + +--- + +## Os elementos DOM + +A primeira coisa que você precisa fazer é criar referências aos elementos que deseja manipular no DOM. No nosso caso, são as 14 plantas que aguardam atualmente nas barras laterais. + + +### Tarefa + +```html +dragElement(document.getElementById('plant1')); +dragElement(document.getElementById('plant2')); +dragElement(document.getElementById('plant3')); +dragElement(document.getElementById('plant4')); +dragElement(document.getElementById('plant5')); +dragElement(document.getElementById('plant6')); +dragElement(document.getElementById('plant7')); +dragElement(document.getElementById('plant8')); +dragElement(document.getElementById('plant9')); +dragElement(document.getElementById('plant10')); +dragElement(document.getElementById('plant11')); +dragElement(document.getElementById('plant12')); +dragElement(document.getElementById('plant13')); +dragElement(document.getElementById('plant14')); +``` + +O que está acontecendo aqui? Você está referenciando o documento e olhando através de seu DOM para encontrar um elemento com um Id específico. Lembra na primeira lição sobre HTML que você deu Ids individuais para cada imagem de planta (id = "plant1")? Agora você fará uso disso. Depois de identificar cada elemento, você passa esse item para uma função chamada dragElement que construirá em um minuto. Portanto, o elemento no HTML agora está ativado para arrastar, ou será em breve. + +✅ Por que referenciamos elementos por Id? Por que não por sua classe CSS? Você pode consultar a lição anterior sobre CSS para responder a esta pergunta. + +--- + +## O Closure(fechamento) + +Agora você está pronto para criar o closure(fechamento) dragElement, que é uma função externa que inclui uma função ou funções internas (em nosso caso, teremos três). + +Os closures(fechamentos) são úteis quando uma ou mais funções precisam acessar o escopo de uma função externa. Aqui está um exemplo: + +```javascript +function mostrarDoce(){ + let doce = ['jujubas']; + function adicionarDoce(tipoDeDoce) { + doce.push(tipoDeDoce) + } + adicionarDoce('gomas'); +} +mostrarDoce(); +console.log(doce) +``` + +Neste exemplo, a função mostrarDoce envolve uma função que coloca um novo tipo de doce em uma matriz que já existe na função. Se você executasse este código, o array doce seria indefinido, pois é uma variável local (local para o fechamento). + +✅ Como você pode tornar o conjunto de doces acessível? Tente movê-lo para fora do fechamento. Dessa forma, o array torna-se global, ao invés de ficar disponível apenas para o escopo local do fechamento. + +### Tarefa + +Nas declarações de elemento em `script.js`, crie uma função: + + +```javascript +function dragElement(terrariumElement) { + //definir 4 posições para posicionamento na tela + let pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; + terrariumElement.onpointerdown = pointerDrag; +} +``` + +`dragElement` obtém seu objeto `terrariumElement` das declarações na parte superior do script. Em seguida, você define algumas posições locais em 0 para o objeto passado para a função. Essas são as variáveis ​​locais que serão manipuladas para cada elemento à medida que você adiciona a funcionalidade de arrastar e soltar no fechamento de cada elemento. O terrário será preenchido por esses elementos arrastados, então o aplicativo precisa manter o controle de onde eles são colocados. + +Além disso, o terrariumElement que é passado para essa função é atribuído a um evento pointerdown, que faz parte das [APIs da web](https://developer.mozilla.org/docs/Web/API) projetadas para ajudar no gerenciamento de DOM. `Onpointerdown` dispara quando um botão é pressionado ou, em nosso caso, um elemento arrastável é tocado. Este manipulador de eventos funciona em [navegadores web e mobile](https://caniuse.com/?search=onpointerdown), com algumas exceções. + +✅ O [manipulador de eventos onclick](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) tem muito mais suporte para vários navegadores; por que você não usaria aqui? Pense no tipo exato de interação de tela que você está tentando criar aqui. + +--- + +## A função Pointerdrag + +O terrariumElement está pronto para ser arrastado; quando o evento `onpointerdown` é disparado, a função `pointerDrag` é chamada. Adicione essa função logo abaixo desta linha: `terrariumElement.onpointerdown = pointerDrag;`: + +### Tarefa + +```javascript +function pointerDrag(e) { + e.preventDefault(); + console.log(e); + pos3 = e.clientX; + pos4 = e.clientY; +} +``` + + +Várias coisas acontecem. Primeiro, você evita que os eventos padrão que normalmente acontecem em pointerdown ocorram usando `e.preventDefault ();`. Dessa forma, você tem mais controle sobre o comportamento da interface. + +> Volte a esta linha quando tiver criado o arquivo de script completamente e tente sem `e.preventDefault()` - o que acontece? + +Em segundo lugar, abra `index.html` em uma janela do navegador e inspecione a interface. Ao clicar em uma planta, você pode ver como o evento 'e' é capturado. Explore o evento para ver quanta informação é coletada por um evento de ponteiro para baixo! + +A seguir, observe como as variáveis ​​locais `pos3` e `pos4` são definidas como e.clientX. Você pode encontrar os valores `e` no painel de inspeção. Esses valores capturam as coordenadas xey da planta no momento em que você clica ou toca nela. Você precisará de um controle refinado sobre o comportamento das plantas ao clicar e arrastá-las, para manter o controle de suas coordenadas. + + +✅ Está ficando mais claro por que todo esse aplicativo é construído com um grande fechamento? Se não fosse, como você manteria o escopo para cada uma das 14 plantas arrastáveis? + +Conclua a função inicial adicionando mais duas manipulações de eventos de ponteiro em `pos4 = e.clientY`: + +```html +document.onpointermove = elementDrag; +document.onpointerup = stopElementDrag; +``` + +Agora você está indicando que deseja que a planta seja arrastada junto com o ponteiro conforme você a move e que o gesto de arrastar pare quando você desmarcar a planta. `onpointermove` e `onpointerup` são partes da mesma API que `onpointerdown`. A interface lançará erros agora, pois você ainda não definiu as funções `elementDrag` e `stopElementDrag`, então crie-as a seguir. + + +## As funções elementDrag e stopElementDrag + + +Você completará seu fechamento adicionando mais duas funções internas que irão lidar com o que acontece quando você arrasta uma planta e para de arrastá-la. O comportamento que você deseja é que você possa arrastar qualquer planta a qualquer momento e colocá-la em qualquer lugar da tela. Esta interface é bastante neutra (não há zona de queda, por exemplo) para permitir que você projete seu terrário exatamente como você gosta, adicionando, removendo e reposicionando plantas. + +### Tarefa + +Adicione a função `elementDrag` logo após a chave de fechamento de `pointerDrag`: + +```javascript +function elementDrag(e) { + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + console.log(pos1, pos2, pos3, pos4); + terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px'; + terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px'; +} +``` +Nesta função, você edita várias vezes as posições iniciais 1-4 que definiu como variáveis ​​locais na função externa. O que está acontecendo aqui? + + +Conforme você arrasta, você reatribui `pos1` tornando-o igual a `pos3` (que você definiu anteriormente como `e.clientX`) menos o valor atual de `e.clientX`. Você faz uma operação semelhante à `pos2`. Em seguida, você redefine `pos3` e `pos4` para as novas coordenadas X e Y do elemento. Você pode observar essas mudanças no console enquanto arrasta. Em seguida, você manipula o estilo CSS da planta para definir sua nova posição com base nas novas posições de `pos1` e `pos2`, calculando as coordenadas X e Y superior e esquerda da planta com base na comparação de seu deslocamento com essas novas posições. + +> `OffsetTop` e `offsetLeft` são propriedades CSS que definem a posição de um elemento com base na posição de seu pai; seu pai pode ser qualquer elemento que não esteja posicionado como `static`. + +Todo este recálculo de posicionamento permite afinar o comportamento do terrário e das suas plantas. + +### Tarefa + + +A tarefa final para completar a interface é adicionar a função `stopElementDrag` após a chave de fechamento de `elementDrag`: + +```javascript +function stopElementDrag() { + document.onpointerup = null; + document.onpointermove = null; +} +``` + +Esta pequena função redefine os eventos `onpointerup` e `onpointermove` para que você possa reiniciar o progresso de sua planta, começando a arrastá-la novamente, ou começar a arrastar uma nova planta. + +✅ O que acontece se você não definir esses eventos como nulos? + +Agora você concluiu seu projeto! + +🥇 Parabéns! Você terminou seu lindo terrário. + +![terrario terminado](../images/terrarium-final.png) + +--- + + +## 🚀Desafio + +Adicione um novo manipulador de eventos ao seu fechamento para fazer algo mais para as plantas; por exemplo, clique duas vezes em uma planta para trazê-la para a frente. Seja criativo! + +## Quiz pós-leitura + +[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) + +## Revisão & auto-estudo + +Embora arrastar elementos pela tela pareça trivial, existem muitas maneiras de fazer isso e muitas armadilhas, dependendo do efeito que você busca. Na verdade, existe toda uma [API de arrastrar e soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) que você pode experimentar. Não a usamos neste módulo porque o efeito que queríamos era um pouco diferente, mas experimente esta API em seu próprio projeto e veja o que você pode conseguir. + +Encontre mais informações sobre eventos de ponteiro nos documentos [W3C](https://www.w3.org/TR/pointerevents1/) e [MDN web docs](https://developer.mozilla.org/pt-BR/docs/Web/API/Pointer_events). + +Sempre verifique os recursos do navegador usando [CanIUse](https://caniuse.com/) + +## Tarefa +--- + +[Trabalhar um pouco mais com o DOM](assignment.pt.md) + From 09ed237e0690464fa9b00ccdcebd0553075f35b1 Mon Sep 17 00:00:00 2001 From: Art-auto <30954131+Art-auto@users.noreply.github.com> Date: Sun, 31 Oct 2021 18:23:31 +0200 Subject: [PATCH 10/22] Update iso language abbreviation for Ukrainian (#491) * Add translation for "for-teachers.md" file * Use "uk" for ukrainian as of ISO 639-1 standart --- translations/for-teachers.uk.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 translations/for-teachers.uk.md diff --git a/translations/for-teachers.uk.md b/translations/for-teachers.uk.md new file mode 100644 index 00000000..7d181255 --- /dev/null +++ b/translations/for-teachers.uk.md @@ -0,0 +1,33 @@ +## Для вчителів + +Що робити, якщо ви хотіли б ви використовувати цю навчальну програму у своєму класі? Будь ласка, не соромтеся! + +Насправді, ви можете використовувати його в самому 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 0e06a19eb9f33b9b25b1a6d50354dada2d825825 Mon Sep 17 00:00:00 2001 From: Karine Moreira Date: Sun, 31 Oct 2021 14:49:13 -0300 Subject: [PATCH 11/22] Translate pt terrarium base solution readme (#495) * translate intro to DOM and closures README * fix image paths * translate intro-to-DOM-and-closures-ASSIGNMENT * translate terrarium base solution README Co-authored-by: Karine Moreira --- 3-terrarium/translations/README.pt.md | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 3-terrarium/translations/README.pt.md diff --git a/3-terrarium/translations/README.pt.md b/3-terrarium/translations/README.pt.md new file mode 100644 index 00000000..232cd210 --- /dev/null +++ b/3-terrarium/translations/README.pt.md @@ -0,0 +1,32 @@ +# Meu terrário: um projeto para aprender sobre a manipulação do HTML, CSS e DOM usando JavaScript 🌵🌱 + +Uma pequena reflexão de arrastar e soltar sobre o código. Com um pouco de HTML, JS e CSS, você pode construir uma interface da web, estilizá-la e adicionar uma interação. + +![meu terrário](../images/screenshot_gray.png) + +# Lições + +1. [Introdução ao CSS](./intro-to-css/README.md) +2. [Introdução ao HTML](./intro-to-html/README.md) +3. [Introdução ao DOM e JS Closures(fechamentos)](intro-to-DOM-and-js-closures/README.md) + +## Créditos + +Escrito com ♥ ️ por [Jen Looper](https://www.twitter.com/jenlooper) + + +O terrário criado via CSS foi inspirado no codepen de jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). + +A arte foi desenhada à mão por [Jen Looper](http://jenlooper.com) usando Procreate. + +## Deploy do seu Terrário + +Você pode fazer o deploy, ou publicar seu terrário na web usando o Azure Static Web Apps. + +1. Fork(bifurque) esse repositório + +2. Pressione esse botão + +[![Deploy no Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo para ser `/solution` ou a raiz(root) de sua base de código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório bifurcado que ajudará os aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL. \ No newline at end of file From 25cd2c67e5dcb1f06288be8545382b573032b498 Mon Sep 17 00:00:00 2001 From: Art-auto <30954131+Art-auto@users.noreply.github.com> Date: Sun, 31 Oct 2021 19:50:05 +0200 Subject: [PATCH 12/22] Add Ukrainian translation for 2-js-basics/README.md (#492) * Add Ukrainian translation for 2-js-basics/README.md * Update paths --- 2-js-basics/translations/README.uk.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 2-js-basics/translations/README.uk.md diff --git a/2-js-basics/translations/README.uk.md b/2-js-basics/translations/README.uk.md new file mode 100644 index 00000000..9580f0a7 --- /dev/null +++ b/2-js-basics/translations/README.uk.md @@ -0,0 +1,14 @@ +# Вступ до JavaScript + +JavaScript — це мова Інтернету. На цих чотирьох уроках ви дізнаєтеся його основи. + +### Теми + +1. [Змінні та типи данних](../1-data-types/README.md) +2. [Функції та Методи](../2-functions-methods/README.md) +3. [Прийняття рішень в JavaScript](../3-making-decisions/README.md) +4. [Масиви та Цикли](../4-arrays-loops/README.md) + +### Титри + +Ці уроки були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) та [Chris Noring](https://twitter.com/chris_noring) \ No newline at end of file From c71fc1d2da2f3c464add41d82c33b1983f49d345 Mon Sep 17 00:00:00 2001 From: Art-auto <30954131+Art-auto@users.noreply.github.com> Date: Sun, 31 Oct 2021 19:50:26 +0200 Subject: [PATCH 13/22] Add translation for 1-getting-started-lessons Ukranian language (#493) * Add translation for 1-getting-started-lessons Ukranian language * Update paths * Fix typo --- .../translations/README.uk.md | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 1-getting-started-lessons/translations/README.uk.md diff --git a/1-getting-started-lessons/translations/README.uk.md b/1-getting-started-lessons/translations/README.uk.md new file mode 100644 index 00000000..f12ccddf --- /dev/null +++ b/1-getting-started-lessons/translations/README.uk.md @@ -0,0 +1,21 @@ +# Початок роботи з веб-розробкою + +У цьому розділі навчальної програми ви познайомитеся з концепціями важливими для того, щоб стати професійним розробником, які не опираються на проектах. + +### Теми + +1. [Введення до мов програмування та інструменти](../1-intro-to-programming-languages/README.md) +2. [Ввід до GitHub](../2-github-basics/README.md) +3. [Основи доступності](../3-accessibility/README.md) + +### Титри + +Введення до мов програмування та інструменти були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique) + +Ввід до GitHub були написані з ♥️ від [Floor Drees](https://twitter.com/floordrees) + +Основи доступності були написані з ♥️ від [Christopher Harrison](https://twitter.com/geektrainer) + + + + From 1180ebd81d971cf2faa7b7e2feafaaf06be8e134 Mon Sep 17 00:00:00 2001 From: Art-auto <30954131+Art-auto@users.noreply.github.com> Date: Sun, 31 Oct 2021 19:50:49 +0200 Subject: [PATCH 14/22] Add translation for 1 assignment file (#496) --- .../translations/assignment.uk.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md new file mode 100644 index 00000000..b07f04f8 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md @@ -0,0 +1,11 @@ +# Читання документів + +## Інструкції + +Існує багато інструментів, які можуть знадобитися веб-розробнику [MDN документація для client-side інструментів](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не розглянуті в уроці, поясніть, чому веб-розробник використав би їх, знайдіть інструмент, який підпадає під цю категорію, і поділіться його документацією. Не використовуйте той самий приклад інструмента для документів MDN. + +## Рубрика + +Зразковий | Достатній | Потребує покращення +--- | --- | -- | +| Пояснено, чому веб-розробник використовує інструмент| Пояснив як, але не пояснив чому розробник використовує інструмент| Не згадав як і чому розробник буде використовувати інструмент | \ No newline at end of file From 492d235e5e08c9cfb0ccb5beb9b94dd8749e09ae Mon Sep 17 00:00:00 2001 From: Karine Moreira Date: Sun, 31 Oct 2021 17:54:46 -0300 Subject: [PATCH 15/22] 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 16/22] 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 17/22] 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 18/22] [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 19/22] 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 20/22] 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 21/22] [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 22/22] [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, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить.