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, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить. diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index d7f5d53c..9c7e7b1a 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -75,7 +75,7 @@ Add a 'head' block to your document in between the opening and closing `` ``` -✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md index 84875599..8733bd99 100644 --- a/3-terrarium/1-intro-to-html/translations/README.es.md +++ b/3-terrarium/1-intro-to-html/translations/README.es.md @@ -66,7 +66,7 @@ Agregue un bloque de 'encabezado' a su documento entre las etiquetas de apertura ``` -✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: ``? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.fr.md b/3-terrarium/1-intro-to-html/translations/README.fr.md index c854c2d0..d7cc4521 100644 --- a/3-terrarium/1-intro-to-html/translations/README.fr.md +++ b/3-terrarium/1-intro-to-html/translations/README.fr.md @@ -17,7 +17,7 @@ Dans cette leçon, nous allons utiliser le HTML pour mettre en page le "squelett Sur votre ordinateur, créez un dossier appelé "terrarium" et, à l'intérieur, un fichier appelé "index.html". Vous pouvez le faire dans Visual Studio Code après avoir créé votre dossier terrarium en ouvrant une nouvelle fenêtre VS Code, en cliquant sur "Ouvrir le dossier" et en naviguant vers votre nouveau dossier. Cliquez sur le petit bouton "file" dans le panneau de l'explorateur et créez le nouveau fichier : -![explorer in VS Code](images/vs-code-index.png) +![explorer in VS Code](../images/vs-code-index.png) Ou alors : @@ -54,7 +54,7 @@ Ajoutez ces lignes en haut de votre fichier `index.html` : ## La "tête" du document -La zone "head" du document HTML contient des informations essentielles sur votre page Web, également appelées [métadonnées] (https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dans notre cas, nous indiquons au serveur web auquel cette page sera envoyée pour être rendue, ces quatre choses : +La zone "head" du document HTML contient des informations essentielles sur votre page Web, également appelées [métadonnées](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dans notre cas, nous indiquons au serveur web auquel cette page sera envoyée pour être rendue, ces quatre choses : - le titre de la page - les métadonnées de la page dont : @@ -75,7 +75,7 @@ Ajoutez un bloc "head" à votre document, entre les balises d'ouverture et de fe ``` -✅ Que se passerait-il si vous définissiez une métabalise viewport comme ceci : ``? En savoir plus sur le [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Que se passerait-il si vous définissiez une métabalise viewport comme ceci : ``? En savoir plus sur le [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- @@ -230,4 +230,4 @@ Pour en savoir plus sur la création de sites pour le web et les appareils mobil ## Exercice -[Pratiquez votre HTML : Construisez une maquette de blog](assignment.md) +[Pratiquez votre HTML : Construisez une maquette de blog](assignment.fr.md) diff --git a/3-terrarium/1-intro-to-html/translations/README.hi.md b/3-terrarium/1-intro-to-html/translations/README.hi.md index bbff6edf..1c8ca2f0 100644 --- a/3-terrarium/1-intro-to-html/translations/README.hi.md +++ b/3-terrarium/1-intro-to-html/translations/README.hi.md @@ -75,7 +75,7 @@ HTML दस्तावेज़ के 'हेड' क्षेत्र मे ``` -✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: ``? [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) के बारे में और पढ़ें। +✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: ``? [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) के बारे में और पढ़ें। --- ## दस्तावेज़ की `body` diff --git a/3-terrarium/1-intro-to-html/translations/README.it.md b/3-terrarium/1-intro-to-html/translations/README.it.md index 504095d2..5afd41a2 100644 --- a/3-terrarium/1-intro-to-html/translations/README.it.md +++ b/3-terrarium/1-intro-to-html/translations/README.it.md @@ -76,7 +76,7 @@ Aggiungere un blocco "head" al proprio documento tra i tag di apertura e di chiu ``` -✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: ``? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index 3894349d..e716aea0 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -75,7 +75,7 @@ HTML ドキュメントの 'head' 領域には、Web ページに関する重要 ``` -✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。 +✅ このように viewport の meta タグを設定するとどうなるでしょうか: ``? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) についてはこちらをご覧ください。 --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md index 5fedcfaf..7964c0fb 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ko.md +++ b/3-terrarium/1-intro-to-html/translations/README.ko.md @@ -75,7 +75,7 @@ HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/docs ``` -✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag)에 대해 자세히 알아보세요. +✅ ``과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)에 대해 자세히 알아보세요. --- diff --git a/3-terrarium/1-intro-to-html/translations/README.ms.md b/3-terrarium/1-intro-to-html/translations/README.ms.md index 17cac799..674d7038 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ms.md +++ b/3-terrarium/1-intro-to-html/translations/README.ms.md @@ -75,7 +75,7 @@ Tambahkan blok 'head' ke dokumen anda di antara tag pembuka dan penutup `` ``` -✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: ``? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md index b57d52b2..b2990f13 100644 --- a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md +++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md @@ -75,7 +75,7 @@ Adicione um bloco 'head' ao seu documento entre a tag `` inicial e a final ``` -✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). +✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md index 11bffbf8..3e7904e9 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md @@ -75,7 +75,7 @@ HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息， ``` -✅ 当你把视图信息标签的内容设置成这个样子 `` 会发生什么事情？ 请阅读更多关于 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的信息吧。 +✅ 当你把视图信息标签的内容设置成这个样子 `` 会发生什么事情？ 请阅读更多关于 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的信息吧。 --- diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md index d9f91c0a..c947c09a 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md @@ -75,7 +75,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[ ``` -✅ 你認為設定下列視窗元資訊 `` 會發生什麼事？ 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的資訊。 +✅ 你認為設定下列視窗元資訊 `` 會發生什麼事？ 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的資訊。 --- 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) 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) + 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 diff --git a/7-bank-project/1-template-route/translations/README.fr.md b/7-bank-project/1-template-route/translations/README.fr.md index a6226f36..c7734cbf 100644 --- a/7-bank-project/1-template-route/translations/README.fr.md +++ b/7-bank-project/1-template-route/translations/README.fr.md @@ -1,4 +1,4 @@ -# Créer une application bancaire Partie 1 : Modèles HTML et itinéraires dans une application Web +# Créer une application bancaire Partie 1 : Modèles HTML et routages dans une application Web ## Quiz préalable diff --git a/7-bank-project/2-forms/translations/README.fr.md b/7-bank-project/2-forms/translations/README.fr.md index 92264002..58264bce 100644 --- a/7-bank-project/2-forms/translations/README.fr.md +++ b/7-bank-project/2-forms/translations/README.fr.md @@ -128,7 +128,7 @@ Ajoutez les propriétés `action` et `method` au formulaire d'inscription : Essayez maintenant d'enregistrer un nouveau compte avec votre nom. Après avoir cliqué sur le bouton *S'inscrire*, vous devriez voir quelque chose comme ceci : -![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](./images/form-post.png) +![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](../images/form-post.png) Si tout se passe bien, le serveur doit répondre à votre demande avec une réponse [JSON](https://www.json.org/json-fr.html) contenant les données de compte qui ont été créées. 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é.| diff --git a/7-bank-project/4-state-management/translations/assignment.fr.md b/7-bank-project/4-state-management/translations/assignment.fr.md new file mode 100644 index 00000000..d157c8a8 --- /dev/null +++ b/7-bank-project/4-state-management/translations/assignment.fr.md @@ -0,0 +1,25 @@ +# Implémenter la boîte de dialogue "Ajouter une transaction" + +## Instructions + +Il manque encore à notre application bancaire une fonctionnalité importante: la possibilité de saisir de nouvelles transactions. +En utilisant tout ce que vous avez appris dans les quatre leçons précédentes, implémentez une boîte de dialogue « Ajouter une transaction » : + +- Ajouter un bouton "Ajouter une transaction" dans la page du tableau de bord +- Créez une nouvelle page avec un modèle HTML ou utilisez JavaScript pour afficher/masquer le HTML de la boîte de dialogue sans quitter la page du tableau de bord (vous pouvez utiliser [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) pour celà, ou des classes CSS) +- Assurez-vous de gérer [l'accessibilité du clavier et du lecteur d'écran](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pour la boîte de dialogue +- Implémenter un formulaire HTML pour recevoir les données d'entrée +- Créer des données JSON à partir des données du formulaire et les envoyer à l'API +- Mettre à jour la page du tableau de bord avec les nouvelles données + +Consultez les [spécifications de l'API du serveur](./../../api/translations/README.fr.md) pour voir quelle API vous devez appeler et quel est le format JSON attendu. + +Voici un exemple de résultat après avoir terminé le devoir : + +![Capture d'écran montrant un exemple de boîte de dialogue "Ajouter une transaction"](../images/dialog.png) + +## Rubrique + +| Critères | Exemplaire | Adéquat | Besoin d'amélioration | +| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------| +| | L'ajout d'une transaction est entièrement mis en œuvre en suivant toutes les meilleures pratiques vues dans les leçons. | L'ajout d'une transaction est implémenté, mais ne suit pas les meilleures pratiques vues dans les leçons, ou ne fonctionne que partiellement. | L'ajout d'une transaction ne fonctionne pas du tout. | \ No newline at end of file diff --git a/7-bank-project/api/translations/README.fr.md b/7-bank-project/api/translations/README.fr.md new file mode 100644 index 00000000..765ef60d --- /dev/null +++ b/7-bank-project/api/translations/README.fr.md @@ -0,0 +1,34 @@ +# API bancaire + +> API bancaire construite avec [Node.js](https://nodejs.org) + [Express](https://expressjs.com/). + +L'API est déjà conçue pour vous et ne fait pas partie de l'exercice. + +Cependant, si vous souhaitez apprendre à créer une API comme celle-ci, vous pouvez suivre cette série de vidéos : https://aka.ms/NodeBeginner (les vidéos 17 à 21 couvrent cette API exacte). + +Vous pouvez également consulter ce tutoriel interactif : https://aka.ms/learn/express-api + +## Exécution du serveur + +Assurez-vous que [Node.js](https://nodejs.org) est installé. + +1. Git clonez ce repo [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners). +2. Ouvrez votre terminal et accédez au dossier `Web-Dev-For-Beginners/7-bank-project/api` +2. Exécutez `npm install` et attendez que les packages soient installés (cela peut prendre un certain temps en fonction de la qualité de votre connexion Internet). +3. Une fois l'installation terminée, exécutez `npm start` et vous êtes prêt à commencer. + +Le serveur devrait commencer à écouter sur le port `5000`. +*Ce serveur fonctionnera avec le terminal principal du serveur d'applications de la banque (à l'écoute sur le port `3000`), ne le fermez pas.* + +> Remarque : toutes les entrées sont stockées en mémoire et ne sont pas persistantes, de sorte que lorsque le serveur est arrêté, toutes les données sont perdues. + +## Détails de l'API + +Route | Description +---------------------------------------------|------------------------------------ +GET /api/ | Obtenir des informations sur le serveur +POST /api/accounts/ | Créer un compte, ex : `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }` +GET /api/accounts/:user | Obtenir toutes les données pour le compte spécifié +DELETE /api/accounts/:user | Supprimer le compte spécifié +POST /api/accounts/:user/transactions | Ajoutez une transaction, ex : `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }` +DELETE /api/accounts/:user/transactions/:id | Supprimer la transaction spécifiée \ No newline at end of file diff --git a/7-bank-project/api/translations/README.ml.md b/7-bank-project/api/translations/README.ml.md new file mode 100644 index 00000000..cce32de5 --- /dev/null +++ b/7-bank-project/api/translations/README.ml.md @@ -0,0 +1,34 @@ +# ബാങ്ക് API + +> ബാങ്ക് API നിർമ്മിച്ചിരിക്കുന്നത് [Node.js](https://nodejs.org) + [Express](https://expressjs.com/). + +API ഇതിനകം തന്നെ നിങ്ങൾക്കായി നിർമ്മിച്ചതാണ്, വ്യായാമത്തിന്റെ ഭാഗമല്ല. + +എന്നിരുന്നാലും, ഇതുപോലുള്ള ഒരു API എങ്ങനെ നിർമ്മിക്കാമെന്ന് അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഈ വീഡിയോ പരമ്പര പിന്തുടരാവുന്നതാണ്: https://aka.ms/NodeBeginner (വീഡിയോകൾ 17 മുതൽ 21 വരെ ഈ കൃത്യമായ API ഉൾക്കൊള്ളുന്നു). + +നിങ്ങൾക്ക് ഈ ഇന്ററാക്ടീവ് ട്യൂട്ടോറിയലും നോക്കാം: https://aka.ms/learn/express-api + +## സെർവർ പ്രവർത്തിപ്പിക്കുന്നു + +നിങ്ങൾ [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. + +1. Git ഈ റിപ്പോ ക്ലോൺ ചെയ്യുക [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners). +2. നിങ്ങളുടെ ടെർമിനൽ തുറന്ന് `Web-Dev-For-Beginners/7-bank-project/api` ഫോൾഡറിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക +2. `npm install` റൺ ചെയ്‌ത് പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനായി കാത്തിരിക്കുക (നിങ്ങളുടെ ഇന്റർനെറ്റ് കണക്ഷന്റെ ഗുണനിലവാരം അനുസരിച്ച് കുറച്ച് സമയമെടുത്തേക്കാം). +3. ഇൻസ്റ്റാളേഷൻ പൂർത്തിയാകുമ്പോൾ, `npm start` റൺ ചെയ്യുക, നിങ്ങൾക്ക് പോകാം. + +'5000' പോർട്ടിൽ സെർവർ കേൾക്കാൻ തുടങ്ങണം. +*ഈ സെർവർ പ്രധാന ബാങ്ക് ആപ്പ് സെർവർ ടെർമിനലിനൊപ്പം പ്രവർത്തിക്കും (`3000` പോർട്ടിൽ കേൾക്കുന്നു), ഇത് അടയ്ക്കരുത്.* + +> ശ്രദ്ധിക്കുക: എല്ലാ എൻട്രികളും മെമ്മറിയിൽ സംഭരിച്ചിരിക്കുന്നു, അവ നിലനിൽക്കില്ല, അതിനാൽ സെർവർ നിർത്തുമ്പോൾ എല്ലാ ഡാറ്റയും നഷ്‌ടപ്പെടും. + +## API വിശദാംശങ്ങൾ + +റൂട്ട് | വിവരണം +---------------------------------------------|------------------------------------ +GET /api/ | സെർവർ വിവരങ്ങൾ നേടുക +POST /api/accounts/ | ഒരു അക്കൗണ്ട് സൃഷ്ടിക്കുക, ex: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }` +GET /api/accounts/:user | നിർദ്ദിഷ്ട അക്കൗണ്ടിനായുള്ള എല്ലാ ഡാറ്റയും നേടുക +DELETE /api/accounts/:user | നിർദ്ദിഷ്ട അക്കൗണ്ട് നീക്കം ചെയ്യുക +POST /api/accounts/:user/transactions | ഒരു ഇടപാട് ചേർക്കുക, ex: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }` +DELETE /api/accounts/:user/transactions/:id | നിർദ്ദിഷ്ട ഇടപാട് നീക്കം ചെയ്യുക diff --git a/7-bank-project/solution/translations/README.fr.md b/7-bank-project/solution/translations/README.fr.md new file mode 100644 index 00000000..5158fe91 --- /dev/null +++ b/7-bank-project/solution/translations/README.fr.md @@ -0,0 +1,13 @@ +# Application bancaire + +> Exemple de solution pour le projet d'application bancaire, développé avec du HTML5 vanilla, du CSS et du JavaScript (pas de frameworks ni de bibliothèques utilisés). + +## Exécuter l'application + +Assurez-vous d'abord que le [serveur API](../../api/translations/README.fr.md) est en cours d'exécution. + +N'importe quel serveur Web peut être utilisé pour exécuter l'application, mais comme [Node.js](https://nodejs.org/fr) doit de toute façon être installé pour exécuter l'API, vous pouvez : + +1. Git cloner ce dépôt. +2. Ouvrir un terminal, puis exécutez `npx lite-server solution`. Celà démarrera un serveur Web de développement sur le port `3000` +3. Ouvrir `http://localhost:3000` dans un navigateur pour exécuter l'application. \ No newline at end of file diff --git a/7-bank-project/solution/translations/README.ml.md b/7-bank-project/solution/translations/README.ml.md new file mode 100644 index 00000000..b0a62de5 --- /dev/null +++ b/7-bank-project/solution/translations/README.ml.md @@ -0,0 +1,13 @@ +# ബാങ്ക് ആപ്പ് + +> വാനില HTML5, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് നിർമ്മിച്ച ബാങ്ക് ആപ്പ് പ്രോജക്റ്റിനുള്ള ഉദാഹരണ പരിഹാരം (ചട്ടക്കൂടുകളോ ലൈബ്രറികളോ ഉപയോഗിച്ചിട്ടില്ല). + +## ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നു + +ആദ്യം നിങ്ങൾക്ക് [API സെർവർ](../api/README.md) പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. + +ആപ്പ് പ്രവർത്തിപ്പിക്കാൻ ഏത് വെബ് സെർവറും ഉപയോഗിക്കാം, എന്നാൽ API പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കേണ്ടതിനാൽ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും: + +1. ഈ റിപ്പോ Git ക്ലോൺ ചെയ്യുക. +2. ഒരു ടെർമിനൽ തുറക്കുക, തുടർന്ന് `npx lite-server solution` റൺ ചെയ്യുക. അത് `3000` പോർട്ടിൽ ഒരു വികസന വെബ് സെർവർ ആരംഭിക്കും +3. ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നതിന് ഒരു ബ്രൗസറിൽ `http://localhost:3000` തുറക്കുക. diff --git a/7-bank-project/translations/README.fr.md b/7-bank-project/translations/README.fr.md index f06b295f..08d95304 100644 --- a/7-bank-project/translations/README.fr.md +++ b/7-bank-project/translations/README.fr.md @@ -1,13 +1,13 @@ # :dollar: Créer une banque -Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des itinéraires, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque. +Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des routes, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque. | ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) | |--------------------------------|--------------------------------| ## Leçons -1. [Modèles HTML et itinéraires dans une application Web](../1-template-route/translations/README.fr.md) +1. [Modèles HTML et routages dans une application Web](../1-template-route/translations/README.fr.md) 2. [Créer un formulaire de connexion et d'inscription](../2-forms/translations/README.fr.md) 3. [Méthodes d'extraction et d'utilisation des données](../3-data/translations/README.fr.md) 4. [Concepts de gestion de l'État](../4-state-management/translations/README.fr.md) diff --git a/7-bank-project/translations/README.ml.md b/7-bank-project/translations/README.ml.md new file mode 100644 index 00000000..164b16a9 --- /dev/null +++ b/7-bank-project/translations/README.ml.md @@ -0,0 +1,21 @@ +# :dollar: ഒരു ബാങ്ക് നിർമ്മിക്കുക + +ഈ പ്രോജക്റ്റിൽ, ഒരു സാങ്കൽപ്പിക ബാങ്ക് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഈ പാഠങ്ങളിൽ ഒരു വെബ് ആപ്പ് എങ്ങനെ ലേഔട്ട് ചെയ്യാം, റൂട്ടുകൾ നൽകാം, ഫോമുകൾ നിർമ്മിക്കാം, സ്റ്റേറ്റ് മാനേജുചെയ്യാം, നിങ്ങൾക്ക് ബാങ്കിന്റെ ഡാറ്റ ലഭ്യമാക്കാൻ കഴിയുന്ന ഒരു API-ൽ നിന്ന് ഡാറ്റ നേടുന്നത് എങ്ങനെ എന്നതിനുള്ള നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുന്നു. + +| ![Screen1](images/screen1.png) | ![Screen2](images/screen2.png) | +|--------------------------------|--------------------------------| + +## പാഠങ്ങൾ + +1. [ഒരു വെബ് ആപ്പിലെ HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](1-template-route/README.md) +2. [ഒരു ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക](2-forms/README.md) +3. [ഡാറ്റ ലഭ്യമാക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനുമുള്ള രീതികൾ](3-data/README.md) +4. [സംസ്ഥാന മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ](4-state-management/README.md) + +### ക്രെഡിറ്റുകൾ + +ഈ പാഠങ്ങൾ എഴുതിയത് :hearts: [Yohan Lasorsa](https://twitter.com/sinedied). + +ഈ പാഠങ്ങളിൽ ഉപയോഗിച്ചിരിക്കുന്ന [സെർവർ API](/7-bank-project/api/README.md) എങ്ങനെ നിർമ്മിക്കാമെന്ന് അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് [ഈ വീഡിയോ പരമ്പര](https://aka.ms/NodeBeginner) (പ്രത്യേകിച്ച് 17 മുതൽ 21 വരെയുള്ള വീഡിയോകൾ). + +നിങ്ങൾക്ക് [ഈ ഇന്ററാക്ടീവ് ലേൺ ട്യൂട്ടോറിയൽ](https://aka.ms/learn/express-api) നോക്കാവുന്നതാണ്. diff --git a/README.md b/README.md index 1c264bfc..d20b4f46 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + # Web Development for Beginners - A Curriculum Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'. @@ -90,7 +92,7 @@ You can run this documentation offline by using [Docsify](https://docsify.js.org ## PDF -A PDF of all of the lessons can be found [here](pdf/readme.pdf) +A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Other Curricula diff --git a/images/favicon.png b/images/favicon.png index 9e5b4f6a..7e33f5ae 100644 Binary files a/images/favicon.png and b/images/favicon.png differ diff --git a/quiz-app/src/assets/translations/fr.json b/quiz-app/src/assets/translations/fr.json index cbba8f82..c7f2e1f6 100644 --- a/quiz-app/src/assets/translations/fr.json +++ b/quiz-app/src/assets/translations/fr.json @@ -2094,7 +2094,7 @@ }, { "id": 41, - "title": "Leçon 21 - Projet bancaire - Modèles et itinéraires HTML dans une application Web : quiz de pré-conférence", + "title": "Leçon 21 - Projet bancaire - Modèles et routages HTML dans une application Web : quiz de pré-conférence", "quiz": [ { "questionText": "Vous devez créer plusieurs fichiers HTML pour afficher différents écrans dans une application web", @@ -2143,7 +2143,7 @@ }, { "id": 42, - "title": "Leçon 21 - Modèles et itinéraires HTML de projet bancaire dans une application web : quiz de validation des connaissances", + "title": "Leçon 21 - Modèles et routages HTML de projet bancaire dans une application web : quiz de validation des connaissances", "quiz": [ { "questionText": "Les templates HTML font partie du DOM par défaut", diff --git a/translations/README.el.md b/translations/README.el.md index 14b78714..6a6fba56 100644 --- a/translations/README.el.md +++ b/translations/README.el.md @@ -88,7 +88,7 @@ ## PDF -Μπορείτε να βρείτε [εδώ](pdf/readme.pdf) ενα PDF με όλα τα μαθήματα. +Μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ενα PDF με όλα τα μαθήματα. ## Άλλα προγράμματα μαθημάτων diff --git a/translations/README.fil.md b/translations/README.fil.md index f2cbbd47..c6e25e0c 100644 --- a/translations/README.fil.md +++ b/translations/README.fil.md @@ -89,7 +89,7 @@ Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit ## PDF -Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](pdf/readme.pdf) +Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Iba pang Kurikulum diff --git a/translations/README.fr.md b/translations/README.fr.md index f3de1ffa..7e17ba17 100644 --- a/translations/README.fr.md +++ b/translations/README.fr.md @@ -105,11 +105,11 @@ Vous pouvez y accéder en utilisant [Docsify](https://docsify.js.org/#/). Effect ## PDF -Ce cours est disponible en PDF. [Cliquez ici](../pdf/readme.pdf) +Ce cours est disponible en PDF. [Cliquez ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Autres Cours Découvrez d'autres cours : - [Machine Learning pour débutants](https://aka.ms/ml-beginners) -- [IoT pour débutants](https://aka.ms/iot-beginners) \ No newline at end of file +- [IoT pour débutants](https://aka.ms/iot-beginners) diff --git a/translations/README.hi.md b/translations/README.hi.md index d843dbff..ff2ce4f8 100644 --- a/translations/README.hi.md +++ b/translations/README.hi.md @@ -83,6 +83,4 @@ Microsoft में Azure Cloud Advocates को 12-सप्ताह, 24-प आप इस दस्तावेज़ को ऑफ़लाइन कर सकते हैं [Docsify](https://docsify.js.org/#/) का उपयोग करके। अपने स्थानीय मशीन पर इस रेपो, [स्थापित डॉक्सिफ़ाइस्ट](https://docsify.js.org/#/quickstart) को फोर्क करें, और फिर इस रेपो के रूट फ़ोल्डर में, `docsify serve` टाइप करें। वेबसाइट को आपके लोकलहोस्ट पर पोर्ट 3000 पर परोसा जाएगा: `localhost:3000`. - -trackgit-views - + diff --git a/translations/README.ml.md b/translations/README.ml.md new file mode 100644 index 00000000..20b42ceb --- /dev/null +++ b/translations/README.ml.md @@ -0,0 +1,101 @@ + +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# തുടക്കക്കാർക്കുള്ള വെബ് വികസനം - ഒരു പാഠ്യപദ്ധതി + +മൈക്രോസോഫ്റ്റിലെ അസുർ ക്ലൗഡ് അഡ്വക്കേറ്റ്സ് ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ്, എച്ച്ടിഎംഎൽ അടിസ്ഥാനകാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് 12-ആഴ്ച, 24-പാഠ പാഠ്യപദ്ധതി വാഗ്ദാനം ചെയ്യുന്നതിൽ സന്തോഷമുണ്ട്. ഓരോ പാഠത്തിലും പാഠത്തിന് മുമ്പും ശേഷവുമുള്ള ക്വിസുകൾ, പാഠം പൂർത്തിയാക്കാനുള്ള രേഖാമൂലമുള്ള നിർദ്ദേശങ്ങൾ, ഒരു പരിഹാരം, ഒരു അസൈൻമെന്റ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. ഞങ്ങളുടെ പ്രോജക്റ്റ് അധിഷ്‌ഠിത അദ്ധ്യാപനം പുതിയ കഴിവുകൾ സ്വായത്തമാക്കൻ നിങ്ങളെ അനുവദിക്കുന്നു. + +**ഞങ്ങളുടെ രചയിതാക്കളായ ജെൻ ലൂപ്പർ, ക്രിസ് നോറിംഗ്, ക്രിസ്റ്റഫർ ഹാരിസൺ, ജാസ്മിൻ ഗ്രീൻവേ, യോഹാൻ ലസോർസ, ഫ്ലോർ ഡ്രീസ്, സ്കെച്ച്നോട്ട് ആർട്ടിസ്റ്റ് ടോമിമി ഇമുറ എന്നിവർക്ക് ഹൃദയം നിറഞ്ഞ നന്ദി!** + +# ആമുഖം + +> **അദ്ധ്യാപകർ**, ഞങ്ങൾ [ചില നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്](/for-teachers.md) ഈ പാഠ്യപദ്ധതി എങ്ങനെ ഉപയോഗിക്കാം എന്നതിനെക്കുറിച്ച്. നിങ്ങളുടെ ഫീഡ്‌ബാക്ക് ഞങ്ങൾ ഇഷ്ടപ്പെടുന്നു [ഞങ്ങളുടെ ചർച്ചാ ഫോറത്തിൽ](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! + +> **വിദ്യാർത്ഥികൾ**, ഈ പാഠ്യപദ്ധതി സ്വന്തമായി ഉപയോഗിക്കുന്നതിന്, മുഴുവൻ റിപ്പോയും ഫോർക്ക് ചെയ്ത് സ്വന്തമായി വ്യായാമങ്ങൾ പൂർത്തിയാക്കുക, പ്രീ-ലെക്ചർ ക്വിസിൽ തുടങ്ങി, പ്രഭാഷണം വായിച്ച് ബാക്കി പ്രവർത്തനങ്ങൾ പൂർത്തിയാക്കുക. പരിഹാര കോഡ് പകർത്തുന്നതിനുപകരം പാഠങ്ങൾ മനസിലാക്കിക്കൊണ്ട് പ്രോജക്ടുകൾ സൃഷ്ടിക്കാൻ ശ്രമിക്കുക; എന്നിരുന്നാലും ആ പ്രോജക്റ്റ് അധിഷ്ടിതം പാഠത്തിലെ /സൊല്യൂഷൻസ് ഫോൾഡറുകളിൽ ആ കോഡ് ലഭ്യമാണ്. മറ്റൊരു ആശയം സുഹൃത്തുക്കളുമായി ഒരു പഠന ഗ്രൂപ്പ് രൂപീകരിച്ച് ഒരുമിച്ച് ഉള്ളടക്കം പരിശോധിക്കുക എന്നതാണ്. കൂടുതൽ പഠനത്തിന്, ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു [മൈക്രോസോഫ്റ്റ് ലേൺ](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) കൂടാതെ താഴെ സൂചിപ്പിച്ചിരിക്കുന്ന വീഡിയോകൾ കണ്ടുകൊണ്ട്. + +[![പ്രമോ വീഡിയോ](/screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "പ്രമോ വീഡിയോ") + +> 🎥 പ്രോജക്റ്റിനെക്കുറിച്ചും അത് സൃഷ്ടിച്ചവരെക്കുറിച്ചും ഒരു വീഡിയോയ്ക്കായി മുകളിലുള്ള ചിത്രത്തിൽ ക്ലിക്കുചെയ്യുക! + +## അദ്ധ്യാപനo + +ഈ പാഠ്യപദ്ധതി നിർമ്മിക്കുമ്പോൾ ഞങ്ങൾ രണ്ട് പെഡഗോഗിക്കൽ സിദ്ധാന്തങ്ങൾ തിരഞ്ഞെടുത്തു: ഇത് പ്രോജക്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതാണെന്നും അതിൽ പതിവ് ക്വിസുകൾ ഉൾപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു. ഈ പരമ്പരയുടെ അവസാനത്തോടെ, വിദ്യാർത്ഥികൾ ഒരു ടൈപ്പിംഗ് ഗെയിം, ഒരു വെർച്വൽ ടെറേറിയം, ഒരു 'ഗ്രീൻ' ബ്രൗസർ എക്സ്റ്റൻഷൻ, ഒരു 'സ്പെയ്സ് ഇൻവേഡേഴ്സ്' ടൈപ്പ് ഗെയിം, ഒരു ബിസിനസ്-ടൈപ്പ് ബാങ്കിംഗ് ആപ്പ് എന്നിവ നിർമ്മിക്കുകയും ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുകയും ചെയ്യും , ഇന്നത്തെ വെബ് ഡെവലപ്പറിന്റെ ആധുനിക ടൂൾചെയിനിനൊപ്പം HTML, CSS എന്നിവയും. + +> 🎓 ഈ പാഠ്യപദ്ധതിയിലെ ആദ്യ കുറച്ച് പാഠങ്ങൾ നിങ്ങൾക്ക് മൈക്രോസോഫ്റ്റ് ലേൺ നെ കുറിച്ചുള്ള ഒരു[പഠന പാത](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) ആയി എടുക്കാം. + +പ്രോജക്റ്റുകളുമായി ഉള്ളടക്കം യോജിക്കുന്നുവെന്ന് ഉറപ്പുവരുത്തുന്നതിലൂടെ, ഈ പ്രക്രിയ വിദ്യാർത്ഥികളെ കൂടുതൽ ആകർഷകമാക്കുകയും ആശയങ്ങൾ നിലനിർത്തുന്നത് വർദ്ധിപ്പിക്കുകയും ചെയ്യും. ആശയങ്ങൾ അവതരിപ്പിക്കാൻ ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനത്തിൽ നിരവധി സ്റ്റാർട്ടർ പാഠങ്ങൾ എഴുതി, paired with video from the "[ജാവാസ്ക്രിപ്റ്റിലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" വീഡിയോ ട്യൂട്ടോറിയലുകളുടെ ശേഖരം, ചില എഴുത്തുകാർ ഈ പാഠ്യപദ്ധതിക്ക് സംഭാവന നൽകി. +ഇതുകൂടാതെ, ഒരു ക്ലാസിന് മുമ്പുള്ള ഒരു കുറഞ്ഞ ക്വിസ് ഒരു വിഷയം പഠിക്കുന്നതിനുള്ള വിദ്യാർത്ഥിയുടെ ഉദ്ദേശ്യം സജ്ജമാക്കുന്നു, അതേസമയം ക്ലാസിന് ശേഷമുള്ള രണ്ടാമത്തെ ക്വിസ് കൂടുതൽ നിലനിർത്തൽ ഉറപ്പാക്കുന്നു. ഈ പാഠ്യപദ്ധതി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് വഴക്കമുള്ളതും രസകരവുമാണ്, ഇത് മുഴുവനായോ ഭാഗികമായോ എടുക്കാം. പദ്ധതികൾ ചെറുതായി ആരംഭിച്ച് 12 ആഴ്ച ചക്രത്തിന്റെ അവസാനത്തോടെ കൂടുതൽ സങ്കീർണമാകുന്നു. + +ഒരു ചട്ടക്കൂട് സ്വീകരിക്കുന്നതിന് മുമ്പ് ഒരു വെബ് ഡെവലപ്പർ എന്ന നിലയിൽ ആവശ്യമായ അടിസ്ഥാന കഴിവുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതിന് ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ചട്ടക്കൂടുകൾ അവതരിപ്പിക്കുന്നത് മനപ്പൂർവ്വം ഒഴിവാക്കിയിട്ടുണ്ടെങ്കിലും, ഈ പാഠ്യപദ്ധതി പൂർത്തിയാക്കുന്നതിനുള്ള ഒരു നല്ല അടുത്ത ഘട്ടം വീഡിയോകളുടെ മറ്റൊരു ശേഖരത്തിലൂടെ നോഡ്.js- നെക്കുറിച്ച് പഠിക്കുക എന്നതാണ്: "[നോഡ്.js ലേക്കുള്ള തുടക്കക്കാരുടെ പരമ്പര](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)". + +> ഞങ്ങളുടെ [പെരുമാറ്റച്ചട്ടം](/CODE_OF_CONDUCT.md), [സംഭാവന](/CONTRIBUTING.md), [പരിഭാഷ](/TRANSLATIONS.md) എന്നിവയുടെ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പരിശോധിക്കുക. നിങ്ങളുടെ ക്രിയാത്മക മായ അഭിപ്രായത്തെ ഞങ്ങൾ സ്വാഗതം ചെയ്യുന്നു! +> +## ഓരോ പാഠത്തിലും ഉൾപ്പെടുന്നത്: + +- ഓപ്ഷണൽ സ്കെച്ച്നോട്ട് +- ഓപ്ഷണൽ അനുബന്ധ വീഡിയോ +- പാഠത്തിനു മുമ്പുള്ള വാംഅപ്പ് ക്വിസ് +- എഴുതിയ പാഠഭാഗം +- പ്രോജക്റ്റ് അധിഷ്‌ഠിത പാഠങ്ങൾക്കായി, പ്രോജക്റ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ചുള്ള ഘട്ടം ഘട്ടമായുള്ള ഗൈഡുകൾ +- വിജ്ഞാന പരിശോധനകൾ +- ഒരു വെല്ലുവിളി +- അനുബന്ധ വായന +- അസ്സൈൻമെന്റ് +- പാഠാനന്തര ക്വിസ് + +> **ക്വിസുകളെക്കുറിച്ചുള്ള ഒരു കുറിപ്പ്**: എല്ലാ ക്വിസുകളും [ഈ ആപ്പിൽ](https://happy-mud-02d95f10f.azurestaticapps.net/) അടങ്ങിയിരിക്കുന്നു, മൂന്ന് ചോദ്യങ്ങൾ വീതമടങ്ങിയ മൊത്തം 48 ക്വിസുകൾ. അവ പാഠങ്ങൾക്കുള്ളിൽ നിന്ന് ബന്ധിപ്പിച്ചിരിക്കുന്നു, പക്ഷേ ക്വിസ് ആപ്പ് പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും; 'ക്വിസ്-ആപ്പ്' ഫോൾഡറിലെ നിർദ്ദേശം പാലിക്കുക. അവ ക്രമേണ പ്രാദേശികവൽക്കരിക്കപ്പെടുന്നു. + +## പാഠങ്ങൾ + + +| | പദ്ധതിയുടെ പേര് | പഠിപ്പിച്ച ആശയങ്ങൾ | പഠന ലക്ഷ്യങ്ങൾ | ലിങ്ക് ചെയ്ത പാഠം | രചയിതാവ് | +| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | ആമുഖം | പ്രോഗ്രാമിംഗിലേക്കും ട്രേഡിലെ ഉപകരണങ്ങളിലേക്കും ആമുഖം | മിക്ക പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കും പിന്നിലെ അടിസ്ഥാന അടിസ്ഥാനങ്ങളും പ്രൊഫഷണൽ ഡെവലപ്പർമാരെ അവരുടെ ജോലികൾ ചെയ്യാൻ സഹായിക്കുന്ന സോഫ്‌റ്റ്‌വെയറുകളെക്കുറിച്ചും അറിയുക | [പ്രോഗ്രാമിംഗ് ഭാഷകളിലേക്കും വ്യാപാരത്തിന്റെ ഉപകരണങ്ങളിലേക്കുമുള്ള ഇൻട്രോ](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ജാസ്മിൻ | +| 02 | ആമുഖം | ഗിറ്റ്ഹബിന്റെ അടിസ്ഥാനങ്ങളിൽ ഒരു ടീമിനൊപ്പം പ്രവർത്തിക്കുന്നത് ഉൾപ്പെടുന്നു | നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഗിറ്റ്ഹബ് എങ്ങനെ ഉപയോഗിക്കാം, ഒരു കോഡ് അടിസ്ഥാനത്തിൽ മറ്റുള്ളവരുമായി എങ്ങനെ സഹകരിക്കാം | [ഗിറ്റ്ഹബിലേക്കുള്ള ഇൻട്രോ](/1-getting-started-lessons/2-github-basics/README.md) | ഫ്ലോർ | +| 03 | ആമുഖം | ആക്സസിബിലിറ്റി | വെബ് ആക്സസബിലിറ്റിയുടെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുക | [ആക്സസിബിലിറ്റി അടിസ്ഥാനങ്ങൾ](/1-getting-started-lessons/3-accessibility/README.md) | ക്രിസ്റ്റഫർ | +| 04 | JS അടിസ്ഥാനങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റ തരങ്ങളുടെ അടിസ്ഥാനങ്ങൾ | [ഡാറ്റ തരങ്ങൾ](/2-js-basics/1-data-types/README.md) | ജാസ്മിൻ | +| 05 | JS അടിസ്ഥാനങ്ങൾ | പ്രവർത്തനങ്ങളും രീതികളും | ഒരു ആപ്ലിക്കേഷന്റെ ലോജിക് ഫ്ലോ കൈകാര്യം ചെയ്യാനുള്ള പ്രവർത്തനങ്ങളെയും രീതികളെയും കുറിച്ച് അറിയുക | [പ്രവർത്തനങ്ങളും രീതികളും](/2-js-basics/2-functions-methods/README.md) | ജാസ്മിനും ക്രിസ്റ്റഫറും | +| 06 | JS അടിസ്ഥാനങ്ങൾ | ജെഎസുമായി തീരുമാനങ്ങൾ എടുക്കുന്നു | തീരുമാനമെടുക്കുന്ന രീതികൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡിൽ സാഹചര്യങ്ങൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [തീരുമാനങ്ങൾ എടുക്കുക ](/2-js-basics/3-making-decisions/README.md) | ജാസ്മിൻ | +| 07 | JS അടിസ്ഥാനങ്ങൾ | അറേകളും ലൂപ്പുകളും | ജാവാസ്ക്രിപ്റ്റിലെ അറേകളും ലൂപ്പുകളും ഉപയോഗിച്ച് ഡാറ്റഉപയോഗിച്ച് പ്രവർത്തിക്കുക | [അറേകളും ലൂപ്പുകളും](/2-js-basics/4-arrays-loops/README.md) | ജാസ്മിൻ | +| 08 | [ടെറേറിയം](/3-terrarium/solution/README.md) | HTML ൽ പരിശീലിക്കുക | ഒരു ലേഔട്ട് നിർമ്മിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് ഒരു ഓൺലൈൻ ടെറേറിയം സൃഷ്ടിക്കുന്നതിന് HTML നിർമ്മിക്കുക | [HTML ന്റെ ആമുഖം](/3-terrarium/1-intro-to-html/README.md) | ജെൻ | +| 09 | [ടെറേറിയം](/3-terrarium/solution/README.md) | CSS ൽ പരിശീലിക്കുക | പേജ് പ്രതികരണാത്മകമാക്കുന്നതുൾപ്പെടെ CSS-ന്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട് ഓൺലൈൻ ടെറേറിയം സ്റ്റൈൽ ചെയ്യുന്നതിന് സിഎസ്എസ് നിർമ്മിക്കുക | [CSS ന്റെ ആമുഖം](/3-terrarium/2-intro-to-css/README.md) | ജെൻ | +| 10 | [ടെറേറിയം](/3-terrarium/solution) | ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം | ക്ലോസ്രെസ്ന്റെയും ഡോം കൃത്രിമം ഉപയോഗിച്ചുകൊണ്ട് ടെറേറിയം ഒരു ഡ്രാഗ്/ഡ്രോപ്പ് ഇന്റർഫേസായി പ്രവർത്തനമുണ്ടാക്കാൻ ജാവാസ്ക്രിപ്റ്റ് നിർമ്മിക്കുക | [ജാവാസ്ക്രിപ്റ്റ് ക്ലോസ്രെസ്, ഡോം കൃത്രിമം](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ജെൻ | +| 11 | [ടൈപ്പിംഗ് ഗെയിം](/4-typing-game/solution) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ആപ്പിന്റെ ലോജിക് ഡ്രൈവ് ചെയ്യുന്നതിന് കീബോർഡ് ഇവന്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക | [ഇവന്റ്-ഡ്രൈവിംഗ് പ്രോഗ്രാമിംഗ്](/4-typing-game/typing-game/README.md) | ക്രിസ്റ്റഫർ | +| 12 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറുകളുമായി പ്രവർത്തിക്കുന്നു | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ആദ്യ ഘടകങ്ങൾ എങ്ങനെ സ്കഫോൾഡ് ആാമെന്ന് മനസിലാക്കുക | [ബ്രൗസറുകളെ കുറിച്ച്](/5-browser-extension/1-about-browsers/README.md) | ജെൻ | +| 13 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ഒരു ഫോം നിർമ്മിക്കുക, ഒരു എപിഐ വിളിക്കുക, പ്രാദേശിക സംഭരണത്തിൽ വേരിയബിളുകൾ സംഭരിക്കുക | പ്രാദേശിക സംഭരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വേരിയബിളുകൾ ഉപയോഗിച്ച് ഒരു API വിളിക്കുന്നതിനായി നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക | [APIs, ഫോമുകളും ലോക്കൽ സ്റ്റോറേജും](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ | +| 14 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രക്രിയകൾ, വെബ് പ്രകടനം | എക്സ്റ്റെൻഷന്റെ ഐക്കൺ കൈകാര്യം ചെയ്യുന്നതിന് ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രക്രിയകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനത്തെക്കുറിച്ചും നിർമ്മിക്കുന്നതിനുള്ള ചില ഒപ്റ്റിമൈസേഷനുകളെ കുറിച്ചും അറിയുക | [പശ്ചാത്തല ജോലികളും പ്രകടനവും](/5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ | +| 15 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ് മെന്റ് | ഒരു ഗെയിം നിർമ്മിക്കുന്നതിനുള്ള തയ്യാറെടുപ്പിൽ ക്ലാസുകളും കോമ്പോസിഷൻ, പബ്/സബ് പാറ്റേൺ എന്നിവ ഉപയോഗിച്ച് അനന്തരാവകാശത്തെക്കുറിച്ച് അറിയുക | [അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ്മെന്റിന്റെ ആമുഖം](/6-space-game/1-introduction/README.md) | ക്രിസ് | +| 16 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ക്യാൻവാസിലേക്ക് വരയ്ക്കുന്നു | ഒരു സ്ക്രീനിലേക്ക് ഘടകങ്ങൾ വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന കാൻവാസ് API കുറിച്ച് അറിയുക | [ക്യാൻവാസിലേക്ക് വരയ്ക്കുക ](/6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് | +| 17 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്ക്രീനിന് ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു | കാർട്ടീഷ്യൻ നിർദ്ദേശാങ്കങ്ങളും കാൻവാസ് API ഉപയോഗിച്ച് മൂലകങ്ങൾക്ക് എങ്ങനെ ചലനം നേടാൻ കഴിയുമെന്ന് കണ്ടെത്തുക | [ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു](/6-space-game/3-moving-elements-around/README.md) | ക്രിസ് | +| 18 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | കോളിഷൻ കണ്ടെത്തൽ | കീപ്രസ്സുകൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ കൂട്ടിമുട്ടുകയും പരസ്പരം പ്രതികരിക്കുകയും ഗെയിമിന്റെ പ്രകടനം ഉറപ്പാക്കുന്നതിന് ഒരു കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [കൂട്ടിയിടി കണ്ടെത്തൽ](/6-space-game/4-collision-detection/README.md) | ക്രിസ് | +| 19 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്കോർ നിലനിർത്തൽ | ഗെയിമിന്റെ നിലയെയും പ്രകടനത്തെയും അടിസ്ഥാനമാക്കി ഗണിത കണക്കുകൂട്ടലുകൾ നിർവഹിക്കുക | [സ്കോർ നിലനിർത്തൽ](/6-space-game/5-keeping-score/README.md) | ക്രിസ് | +| 20 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ഗെയിം അവസാനിപ്പിക്കുകയും പുനരാരംഭിക്കുകയും ചെയ്യുന്നു | ആസ്തികൾ വൃത്തിയാക്കുന്നതും വേരിയബിൾ മൂല്യങ്ങൾ പുനക്രമീകരിക്കുന്നതും ഉൾപ്പെടെ ഗെയിം അവസാനിപ്പിക്കുന്നതിനെകുറിച്ചും പുനരാരംഭിക്കുന്നതിനെ കുറിച്ചും അറിയുക | [അവസാനങ്ങളുടെ നിബന്ധനകൾ ](/6-space-game/6-end-condition/README.md) | ക്രിസ് | +| 21 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | HTML ഒരു വെബ് ആപ്പിലെ ടെംപ്ലേറ്റുകളും റൂട്ടുകളും | റൂട്ടിംഗും എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളും ഉപയോഗിച്ച് ഒരു മൾട്ടിപേജ് വെബ് സൈറ്റിന്റെ ആർക്കിടെക്ചറിന്റെ സ്കഫോൾഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](/7-bank-project/1-template-route/README.md) | യോഹാൻ | +| 22 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോമുകൾ നിർമ്മിക്കുന്നതിനെ കുറിച്ചും വാലിഡേഷൻ റുട്ടീൻ കൈമാറുന്നതിനെ കുറിച്ചും അറിയുക | [ഫോമുകൾ](/7-bank-project/2-forms/README.md) | യോഹാൻ | +| 23 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ഡാറ്റ കൊണ്ടുവരുന്നതും ഉപയോഗിക്കുന്നതുമായ രീതികൾ | ഡാറ്റ നിങ്ങളുടെ ആപ്പിലേക്ക് എങ്ങനെ ഒഴുകുന്നു, അത് എങ്ങനെ കൊണ്ടുവരാം, സംഭരിക്കാം, ഉപേക്ഷിക്കാം | [ഡാറ്റ](/7-bank-project/3-data/README.md) | യോഹാൻ | +| 24 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് എങ്ങനെ സ്റ്റേറ്റ്നിലനിർത്തുന്നു, പ്രോഗ്രാമായി എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് അറിയുക | [സ്റ്റേറ്റ് മാനേജ്മെന്റ്](/7-bank-project/4-state-management/README.md) | യോഹാൻ | + +## ഓഫ്‌ലൈൻ ആക്‌സസ്സ് + +നിങ്ങൾക്ക് ഈ ഡോക്യുമെന്റേഷൻ [Docsify](https://docsify.js.org/#/) ഉപയോഗിച്ച് ഓഫ്‌ലൈനിൽ പ്രവർത്തിപ്പിക്കാനാകും. ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക, [Docsify ഇന്സ്റ്റോള് ചെയ്യുക](https://docsify.js.org/#/quickstart) നിങ്ങളുടെ പ്രാദേശിക മെഷീനിൽ,തുടർന്ന് ഈ റിപ്പോയുടെ റൂട്ട് ഫോൾഡറിൽ `docsify serve` ടൈപ്പ് ചെയ്യുക. നിങ്ങളുടെ ലോക്കൽഹോസ്റ്റിൽ പോർട്ട് 3000 ൽ വെബ്സൈറ്റ് കാണാം : `localhost:3000`. + +## പിഡിഫ് + +എല്ലാ പാഠങ്ങളുടെയും ഒരു PDF കാണാം [ഇവിടെ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) + +## മറ്റ് പാഠ്യപദ്ധതികൾ + +ഞങ്ങളുടെ ടീം മറ്റ് പാഠ്യപദ്ധതികൾ നിർമ്മിക്കുന്നു! പരിശോധിക്കുക : + +- [തുടക്കക്കാർക്കായുള്ള മെഷീൻ ലേണിംഗ്](https://aka.ms/ml-beginners) +- [തുടക്കക്കാർക്കായുള്ള IoT](https://aka.ms/iot-beginners) diff --git a/translations/README.pt-BR.md b/translations/README.pt-BR.md index 45d39674..17b855b6 100644 --- a/translations/README.pt-BR.md +++ b/translations/README.pt-BR.md @@ -99,7 +99,7 @@ Você pode utilizar essa documentação quando estiver offline através de [Docs ## PDF -Um PDF de todas as lições pode ser encontrado [bem aqui](../pdf/readme.pdf) +Um PDF de todas as lições pode ser encontrado [bem aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ## Outros Cursos diff --git a/translations/for-teachers.ml.md b/translations/for-teachers.ml.md new file mode 100644 index 00000000..ab079165 --- /dev/null +++ b/translations/for-teachers.ml.md @@ -0,0 +1,33 @@ +## അധ്യാപകർക്ക് + +നിങ്ങളുടെ ക്ലാസ് മുറിയിൽ ഈ പാഠ്യപദ്ധതി ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടോ? മടിക്കേണ്ടതില്ല! + +വാസ്തവത്തിൽ, GitHub ക്ലാസ്റൂം ഉപയോഗിച്ച് നിങ്ങൾക്ക് GitHub-ൽ തന്നെ ഇത് ഉപയോഗിക്കാൻ കഴിയും. + +അത് ചെയ്യുന്നതിന്, ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക. ഓരോ പാഠത്തിനും നിങ്ങൾ ഒരു റിപ്പോ സൃഷ്‌ടിക്കേണ്ടതുണ്ട്, അതിനാൽ നിങ്ങൾ ഓരോ ഫോൾഡറിനും പ്രത്യേക റിപ്പോയിലേക്ക് എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യേണ്ടതുണ്ട്. അതുവഴി, [GitHub ക്ലാസ്റൂം](https://classroom.github.com/classrooms) ഓരോ പാഠവും പ്രത്യേകം എടുക്കാം. + +ഈ [പൂർണ്ണ നിർദ്ദേശങ്ങൾ](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) നിങ്ങളുടെ ക്ലാസ് റൂം എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഒരു ആശയം നൽകും. + +## ഇത് മൂഡിൽ, ക്യാൻവാസ് അല്ലെങ്കിൽ ബ്ലാക്ക്ബോർഡിൽ ഉപയോഗിക്കുന്നു + +ഈ പഠന മാനേജ്മെന്റ് സിസ്റ്റങ്ങളിൽ ഈ പാഠ്യപദ്ധതി നന്നായി പ്രവർത്തിക്കുന്നു! പൂർണ്ണമായ ഉള്ളടക്കത്തിനായി [മൂഡിൽ അപ്‌ലോഡ് ഫയൽ](/teaching-files/webdev-moodle.mbz) ഉപയോഗിക്കുക, അല്ലെങ്കിൽ [കോമൺ കാട്രിഡ്ജ് ഫയൽ](/teaching-files/webdev-common-cartridge.imscc) അടങ്ങിയിരിക്കുന്ന ചില ഉള്ളടക്കം ശ്രമിക്കുക. മൂഡിൽ ക്ലൗഡ് പൂർണ്ണ കോമൺ കാട്രിഡ്ജ് കയറ്റുമതിയെ പിന്തുണയ്ക്കുന്നില്ല, അതിനാൽ ക്യാൻവാസിലേക്ക് അപ്‌ലോഡ് ചെയ്യാൻ കഴിയുന്ന മൂഡിൽ ഡൗൺലോഡ് ഫയൽ ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഈ അനുഭവം എങ്ങനെ മെച്ചപ്പെടുത്താം എന്ന് ഞങ്ങളെ അറിയിക്കുക. + +![Moodle](/teaching-files/moodle.png) +> ഒരു മൂഡിൽ ക്ലാസ്റൂമിലെ പാഠ്യപദ്ധതി +> +![Canvas](/teaching-files/canvas.png) +> ക്യാൻവാസിലെ പാഠ്യപദ്ധതി + +## റിപ്പോ അതേപടി ഉപയോഗിക്കുന്നു + +GitHub Classroom ഉപയോഗിക്കാതെ, ഈ റിപ്പോ നിലവിൽ ഉള്ളതുപോലെ ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അതും ചെയ്യാം. ഏത് പാഠമാണ് ഒരുമിച്ച് പ്രവർത്തിക്കേണ്ടതെന്ന് നിങ്ങളുടെ വിദ്യാർത്ഥികളുമായി ആശയവിനിമയം നടത്തേണ്ടതുണ്ട്. + +ഒരു ഓൺലൈൻ ഫോർമാറ്റിൽ (സൂം, ടീമുകൾ അല്ലെങ്കിൽ മറ്റുള്ളവ) നിങ്ങൾ ക്വിസുകൾക്കായി ബ്രേക്ക്ഔട്ട് റൂമുകൾ രൂപീകരിക്കുകയും പഠിക്കാൻ തയ്യാറാകാൻ വിദ്യാർത്ഥികളെ സഹായിക്കുകയും ചെയ്യാം. തുടർന്ന് ക്വിസുകളിലേക്ക് വിദ്യാർത്ഥികളെ ക്ഷണിക്കുകയും അവരുടെ ഉത്തരങ്ങൾ ഒരു നിശ്ചിത സമയത്ത് 'പ്രശ്നങ്ങൾ' ആയി സമർപ്പിക്കുകയും ചെയ്യുക. വിദ്യാർത്ഥികൾ തുറന്ന സ്ഥലത്ത് സഹകരിച്ച് പ്രവർത്തിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അസൈൻമെന്റുകളിലും നിങ്ങൾക്ക് ഇത് ചെയ്യാം. + +നിങ്ങൾ കൂടുതൽ സ്വകാര്യ ഫോർമാറ്റാണ് തിരഞ്ഞെടുക്കുന്നതെങ്കിൽ, നിങ്ങളുടെ വിദ്യാർത്ഥികളോട് പാഠ്യപദ്ധതിയും പാഠം പ്രകാരമുള്ള പാഠവും അവരുടെ സ്വന്തം GitHub റെപ്പോകളിലേക്ക് സ്വകാര്യ റിപ്പോകളായി നൽകാനും നിങ്ങൾക്ക് ആക്‌സസ് നൽകാനും ആവശ്യപ്പെടുക. തുടർന്ന് അവർക്ക് ക്വിസുകളും അസൈൻമെന്റുകളും സ്വകാര്യമായി പൂർത്തിയാക്കാനും നിങ്ങളുടെ ക്ലാസ്റൂം റിപ്പോയിലെ പ്രശ്നങ്ങൾ മുഖേന അവ നിങ്ങൾക്ക് സമർപ്പിക്കാനും കഴിയും. + +ഒരു ഓൺലൈൻ ക്ലാസ്റൂം ഫോർമാറ്റിൽ ഇത് പ്രവർത്തിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. നിങ്ങൾക്ക് ഏറ്റവും മികച്ചത് എന്താണെന്ന് ഞങ്ങളെ അറിയിക്കുക! + +## ദയവായി നിങ്ങളുടെ ചിന്തകൾ ഞങ്ങൾക്ക് നൽകുക! + +ഈ പാഠ്യപദ്ധതി നിങ്ങൾക്കും നിങ്ങളുടെ വിദ്യാർത്ഥികൾക്കും വേണ്ടി പ്രവർത്തിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ദയവായി ഞങ്ങൾക്ക് [ഫീഡ്‌ബാക്ക്](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u) നൽകുക. 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).