From c7d8c422475b32ee541238d38e74349afcfbf7b3 Mon Sep 17 00:00:00 2001 From: Yasser Tahiri Date: Fri, 5 Feb 2021 22:51:24 +0100 Subject: [PATCH 01/65] Update --- .../translations/README.fr.md | 191 ++++++++++++++++++ .../translations/assignment.fr.md | 11 + .../translations/README.fr.md | 17 ++ translations/for-teachers.fr.md | 23 +++ 4 files changed, 242 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md create mode 100644 1-getting-started-lessons/translations/README.fr.md create mode 100644 translations/for-teachers.fr.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md new file mode 100644 index 00000000..6117fe53 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -0,0 +1,191 @@ +# Introduction aux langages de programmation et aux outils du métier + +Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes d'aujourd'hui. Dans la section «Outils du métier», vous découvrirez des logiciels utiles qui vous aideront en tant que développeur. + +![Intro Programming](webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) + +## introduction + +Dans cette leçon, nous aborderons: + +- Qu'est-ce que la programmation? +- Types de langages de programmation +- Éléments de base d'un programme +- Logiciel et outillage utiles pour le développeur professionnel + +## Qu'est-ce que la programmation? + +PLa programmation (également appelée codage) est le processus d'écriture d'instructions sur un appareil, tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants. + +Un *programme* peut être tout ce qui est écrit avec du code; les sites Web, les jeux et les applications téléphoniques sont des programmes. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée sur le périphérique et cette logique a probablement été écrite avec du code. Un programme qui *exécute* ou *exécute du code* exécute des instructions. L'appareil avec lequel vous lisez actuellement cette leçon exécute un programme pour l'imprimer sur votre écran. + +✅ Faites une petite recherche: qui est considéré comme le premier programmeur informatique au monde? + +## Langages de programmation + +Les langages de programmation ont un objectif principal: permettre aux développeurs de créer des instructions à envoyer à un appareil. Les appareils ne peuvent comprendre que le binaire (1 et 0), et pour *la plupart* les développeurs, ce n'est pas un moyen très efficace de communiquer. Les langages de programmation sont un vecteur de communication entre les humains et les ordinateurs. + +Les langages de programmation se présentent sous différents formats et peuvent servir à des fins différentes. Par exemple, JavaScript est principalement utilisé pour les applications Web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation. + +* Les langues de bas niveau *nécessitent généralement moins d'étapes que les* langues de haut niveau * pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau. + +Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code d'assembly 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 +``` + +Croyez-le ou non, *they're both doing the same thing*: impression d'une séquence de Fibonacci jusqu'à 10. + +✅ Une séquence de Fibonacci est [defined](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres tels que chaque nombre est la somme des deux précédents, à partir de 0 et 1. + +## Éléments d'un programme + +Une seule instruction dans un programme est appelée une *instruction* et aura généralement un caractère ou un interligne qui marque où l'instruction se termine, ou *se termine*. La façon dont un programme se termine varie avec chaque langue. + +La plupart des programmes reposent sur l'utilisation des données d'un utilisateur ou d'ailleurs, où les déclarations peuvent s'appuyer sur des données pour exécuter des instructions. Les données peuvent modifier le comportement d'un programme, de sorte que les langages de programmation proposent un moyen de stocker temporairement des données pouvant être utilisées ultérieurement. Ces données sont appelées *variables*. Les variables sont des instructions qui demandent à un appareil d'enregistrer des données dans sa mémoire. Les variables des programmes sont similaires à celles de l'algèbre, où elles ont un nom unique et leur valeur peut changer avec le temps. + +Il est possible que certaines instructions ne soient pas exécutées par un périphérique. C'est généralement par conception lors de l'écriture par le développeur ou par accident lorsqu'une erreur inattendue se produit. Ce type de contrôle d'une application la rend plus robuste et maintenable. Généralement, ces changements de contrôle se produisent lorsque certaines décisions sont respectées. Une instruction courante dans les langages de programmation modernes pour contrôler la manière dont un programme est exécuté est l'instruction `if..else`. + +✅ Vous en apprendrez plus sur ce type d'énoncé dans les leçons suivantes + +## Outils du métier + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +Dans cette section, vous découvrirez certains logiciels que vous pourriez trouver très utiles au début de votre parcours de développement professionnel. + +Un **environnement de développement** est un ensemble unique d'outils et de fonctionnalités qu'un développeur utilisera souvent lors de l'écriture d'un logiciel. Certains de ces outils ont été personnalisés pour les besoins spécifiques d'un développeur et peuvent changer au fil du temps si un développeur change de priorités dans ses projets professionnels ou personnels, ou lorsqu'il utilise un langage de programmation différent. Les environnements de développement sont aussi uniques que les développeurs qui les utilisent. + +### éditeurs + +L'éditeur est l'un des outils les plus cruciaux pour le développement logiciel. Les éditeurs sont l'endroit où vous écrivez votre code et parfois où vous exécuterez votre code. + +Les développeurs comptent sur les éditeurs pour quelques raisons supplémentaires: + +- *Débogage* Découverte des bogues et des erreurs en parcourant le code, ligne par ligne. Certains éditeurs ont des capacités de débogage ou peuvent être personnalisés et ajoutés pour des langages de programmation spécifiques. +- *Mise en évidence de la syntaxe* Ajoute des couleurs et la mise en forme du texte au code, le rend plus facile à lire. La plupart des éditeurs permettent une coloration syntaxique personnalisée. +- *Extensions et intégrations* Ajouts spécialisés pour les développeurs, par les développeurs, pour accéder à des outils supplémentaires qui ne sont pas intégrés à l'éditeur de base. Par exemple, de nombreux développeurs ont également besoin d'un moyen de documenter leur code et d'expliquer comment il fonctionne et installeront une extension de vérification orthographique pour vérifier les fautes de frappe. La plupart de ces ajouts sont destinés à être utilisés dans un éditeur spécifique, et la plupart des éditeurs proposent un moyen de rechercher les extensions disponibles. +- *Personnalisation* La plupart des éditeurs sont extrêmement personnalisables, et chaque développeur aura son propre environnement de développement unique qui répond à ses besoins. Beaucoup permettent également aux développeurs de créer leur propre extension. + +#### Éditeurs et extensions de développement Web populaires + +- [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) + +### Navigateurs + +Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le navigateur pour observer comment leur code s'exécute sur le Web, il est également utilisé pour afficher les éléments visuels d'une page Web qui sont écrits dans l'éditeur, comme le HTML. + +De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations. +#### Navigateurs et outils de développement populaires + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### ligne de commande + +Certains développeurs préfèrent une vue moins graphique pour leurs tâches quotidiennes et comptent sur la ligne de commande pour y parvenir. Le développement de code nécessite une quantité importante de saisie, et certains développeurs préfèrent ne pas perturber leur flux sur le clavier et utiliseront des raccourcis clavier pour basculer entre les fenêtres du bureau, travailler sur différents fichiers et utiliser des outils. La plupart des tâches peuvent être effectuées avec une souris, mais un avantage de l'utilisation de la ligne de commande est que beaucoup peut être fait avec des outils de ligne de commande sans avoir besoin de permuter entre la souris et le clavier. Un autre avantage de la ligne de commande est qu'elle est configurable et que vous pouvez enregistrer votre configuration personnalisée, la modifier ultérieurement et également l'importer sur de nouvelles machines de développement. Parce que les environnements de développement sont si uniques à chaque développeur, certains éviteront d'utiliser la ligne de commande, certains s'y fieront entièrement, et certains préfèrent un mélange des deux. + +### Options de ligne de commande populaires + +Les options de la ligne de commande varient en fonction du système d'exploitation que vous utilisez. + +*💻 = est préinstallé sur le système d'exploitation.* + +#### 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/applications/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) + +#### Popular Command Line Tools + +- [Git](https://git-scm.com/) (💻 on most operating sytems) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentation + +Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider dans la manière d'utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement. + +#### Documentation populaire sur le développement Web + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le et comparez-le à l'environnement d'un concepteur Web. + +--- + +## 🚀 Défi + +Comparez quelques langages de programmation. Quelles sont certaines des caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go? + +## Quiz post-conférence +[Quiz post-conférence](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + +## Révision et auto-étude + +Étudiez un peu les différentes langues disponibles pour le programmeur. Essayez d'écrire une ligne dans une langue, puis refaites-la dans deux autres. Qu'apprenez-vous? + +## Affectation + +[Lire la documentation](assignment.fr.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md new file mode 100644 index 00000000..6deab32e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md @@ -0,0 +1,11 @@ +# Lire la documentation + +## Instructions + +Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN. + +## Rubrique + +Exemplaire | Adéquat | A besoin d'amélioration +--- | --- | -- | +| Expliqué pourquoi le développeur Web utiliserait l'outil | Expliqué comment, mais pas pourquoi le développeur utiliserait l'outil | N'a pas mentionné comment ou pourquoi un développeur utiliserait l'outil | \ No newline at end of file diff --git a/1-getting-started-lessons/translations/README.fr.md b/1-getting-started-lessons/translations/README.fr.md new file mode 100644 index 00000000..712f40b6 --- /dev/null +++ b/1-getting-started-lessons/translations/README.fr.md @@ -0,0 +1,17 @@ +# Premiers pas avec le développement Web + +Dans cette section du programme, vous serez initié à des concepts non basés sur des projets importants pour devenir un développeur professionnel. + +### theme + +1. [Introduction aux langages de programmation et aux outils du métier](1-intro-to-programming-languages/README.md) +2. [Bases de GitHub](2-github-basics/README.md) +3. [Bases de l'accessibilité](3-accessibility/README.md) + +### Crédits + +Bases de l'accessibilité a été écrit avec ♥ ️ par [Christopher Harrison](https://twitter.com/geektrainer) + +L'introduction à GitHub a été écrite avec ♥ ️ par [Floor Drees](https://twitter.com/floordrees) + +L'introduction aux langages de programmation et aux outils du métier a été écrite avec ♥ ️ par [Jasmine Greenaway](https://twitter.com/paladique) diff --git a/translations/for-teachers.fr.md b/translations/for-teachers.fr.md new file mode 100644 index 00000000..41bbfed5 --- /dev/null +++ b/translations/for-teachers.fr.md @@ -0,0 +1,23 @@ +## Pour les éducateurs + +Souhaitez-vous utiliser ce programme dans votre classe? N'hésitez pas! + +En fait, vous pouvez l'utiliser dans GitHub lui-même en utilisant GitHub Classroom. + +Pour ce faire, forkez ce repo. Vous allez devoir créer un référentiel pour chaque leçon, vous devrez donc extraire chaque dossier dans un référentiel distinct. De cette façon, [Classe GitHub](https://classroom.github.com/classrooms) peut prendre chaque leçon séparément. + +Ceux-ci [instructions complètes](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) vous donnera une idée de la configuration de votre classe. + +## Utiliser le repo tel quel + +Si vous souhaitez utiliser ce dépôt tel qu'il est actuellement, sans utiliser GitHub Classroom, cela peut également être fait. Vous auriez besoin de communiquer avec vos élèves sur quelle leçon travailler ensemble. + +Dans un format en ligne (Zoom, Teams ou autre), vous pouvez créer des ateliers pour les quiz et encadrer les étudiants pour les aider à se préparer à apprendre. Invitez ensuite les élèves à participer aux quiz et soumettez leurs réponses sous forme de «problèmes» à un moment donné. Vous pouvez faire de même avec les devoirs, si vous voulez que les étudiants travaillent en collaboration en plein air. + +Si vous préférez un format plus privé, demandez à vos élèves de convertir le programme, cours par cours, vers leurs propres dépôts GitHub en tant que dépôts privés, et vous donner accès. Ensuite, ils peuvent remplir des quiz et des devoirs en privé et vous les soumettre via des problèmes sur votre référentiel de classe. + +Il existe de nombreuses façons de faire fonctionner cela dans un format de classe en ligne. Veuillez nous indiquer ce qui fonctionne le mieux pour vous! + +## Veuillez nous donner votre avis! + +Nous voulons que ce programme fonctionne pour vous et vos étudiants. Veuillez nous donner [feedback](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u). From 4ce77d910bf674b4ec3b59e104ffbfc52715f56e Mon Sep 17 00:00:00 2001 From: Yasser Tahiri Date: Thu, 11 Feb 2021 21:07:23 +0100 Subject: [PATCH 02/65] Update 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md Co-authored-by: bl-ue <54780737+bl-ue@users.noreply.github.com> --- .../1-intro-to-programming-languages/translations/README.fr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md index 6117fe53..3196ae47 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -19,7 +19,7 @@ Dans cette leçon, nous aborderons: ## Qu'est-ce que la programmation? -PLa programmation (également appelée codage) est le processus d'écriture d'instructions sur un appareil, tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants. +Pla programmation (également appelée codage) est le processus d'écriture d'instructions sur un appareil, tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants. Un *programme* peut être tout ce qui est écrit avec du code; les sites Web, les jeux et les applications téléphoniques sont des programmes. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée sur le périphérique et cette logique a probablement été écrite avec du code. Un programme qui *exécute* ou *exécute du code* exécute des instructions. L'appareil avec lequel vous lisez actuellement cette leçon exécute un programme pour l'imprimer sur votre écran. From 372871ef0f15b0648cbc6c3f47758c2b02c8312f Mon Sep 17 00:00:00 2001 From: Yasser Tahiri Date: Thu, 11 Feb 2021 21:07:32 +0100 Subject: [PATCH 03/65] Update 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md Co-authored-by: bl-ue <54780737+bl-ue@users.noreply.github.com> --- .../1-intro-to-programming-languages/translations/README.fr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md index 3196ae47..6ea9c45d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -31,7 +31,7 @@ Les langages de programmation ont un objectif principal: permettre aux développ Les langages de programmation se présentent sous différents formats et peuvent servir à des fins différentes. Par exemple, JavaScript est principalement utilisé pour les applications Web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation. -* Les langues de bas niveau *nécessitent généralement moins d'étapes que les* langues de haut niveau * pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau. +*Les langues de bas niveau* nécessitent généralement moins d'étapes que les *langues de haut niveau* pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau. Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code d'assembly ARM. From 330e21601528f1a7ace181eba5f87279fcc193ce Mon Sep 17 00:00:00 2001 From: CRTao Date: Thu, 18 Feb 2021 10:02:42 +0800 Subject: [PATCH 04/65] translate quiz to zh-tw --- quiz-app/src/App.vue | 1 + quiz-app/src/assets/translations/index.js | 2 + quiz-app/src/assets/translations/zh-tw.json | 2509 +++++++++++++++++++ 3 files changed, 2512 insertions(+) create mode 100644 quiz-app/src/assets/translations/zh-tw.json diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue index 41b741aa..7890cf0e 100644 --- a/quiz-app/src/App.vue +++ b/quiz-app/src/App.vue @@ -9,6 +9,7 @@ +
diff --git a/quiz-app/src/assets/translations/index.js b/quiz-app/src/assets/translations/index.js index ace2dc54..c9ed38a0 100644 --- a/quiz-app/src/assets/translations/index.js +++ b/quiz-app/src/assets/translations/index.js @@ -5,6 +5,7 @@ import id from './id.json'; import hi from './hi.json'; import it from './it.json'; import ja from './ja.json'; +import zh-tw from './zh-tw.json'; //export const defaultLocale = 'en'; @@ -15,6 +16,7 @@ const messages = { hi: hi[0], it: it[0], ja: ja[0], + zh-tw: zh-tw[0], }; export default messages; diff --git a/quiz-app/src/assets/translations/zh-tw.json b/quiz-app/src/assets/translations/zh-tw.json new file mode 100644 index 00000000..0d026ccd --- /dev/null +++ b/quiz-app/src/assets/translations/zh-tw.json @@ -0,0 +1,2509 @@ +[ + { + "title": "給初學者的網頁開發：小測驗", + "complete": "恭喜，您完成了所有試題!", + "error": "抱歉。請稍後再試。」", + "quizzes": [ + { + "id": 1, + "title": "課程一 - 程式語言簡介：課前測驗", + "quiz": [ + { + "questionText": "開發人員可在不編寫程式碼的情況下產生程式。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "低階語言常被使用在：", + "answerOptions": [ + { + "answerText": "網頁", + "isCorrect": "false" + }, + { + "answerText": "硬體", + "isCorrect": "true" + }, + { + "answerText": "遊戲軟體", + "isCorrect": "false" + } + ] + }, + { + "questionText": "下列何者工具會出現在網頁開發的環境中?", + "answerOptions": [ + { + "answerText": "硬體，如樹莓派", + "isCorrect": "false" + }, + { + "answerText": "瀏覽器開發工具", + "isCorrect": "true" + }, + { + "answerText": "作業系統相關文件", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 2, + "title": "課程一 - 程式語言簡介：課後測驗", + "quiz": [ + { + "questionText": "下列何者程式語言比較適合用來撰寫網頁?", + "answerOptions": [ + { + "answerText": "機器語言", + "isCorrect": "false" + }, + { + "answerText": "JavaScript", + "isCorrect": "true" + }, + { + "answerText": "Bash", + "isCorrect": "false" + } + ] + }, + { + "questionText": "每一位開發人員的開發環境都不盡相同。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "開發人員會如何修正錯誤的程式碼?", + "answerOptions": [ + { + "answerText": "語法凸顯", + "isCorrect": "false" + }, + { + "answerText": "偵錯", + "isCorrect": "true" + }, + { + "answerText": "程式碼格式化", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 3, + "title": "課程二 - GitHub簡介：課前測驗", + "quiz": [ + { + "questionText": "下列何種指令可以建立 Git 數據庫?", + "answerOptions": [ + { + "answerText": "git create", + "isCorrect": "false" + }, + { + "answerText": "git start", + "isCorrect": "false" + }, + { + "answerText": "git init", + "isCorrect": "true" + } + ] + }, + { + "questionText": "指令 git add 的目的為何?", + "answerOptions": [ + { + "answerText": "提交程式碼。", + "isCorrect": "false" + }, + { + "answerText": "加入檔案至索引成追蹤對象。", + "isCorrect": "true" + }, + { + "answerText": "加入檔案至GitHub。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "如何確認電腦內是否有安裝git?", + "answerOptions": [ + { + "answerText": "輸入 git --version", + "isCorrect": "true" + }, + { + "answerText": "輸入 git --installed", + "isCorrect": "false" + }, + { + "answerText": "輸入 git --init", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 4, + "title": "課程二 - GitHub簡介：課後測驗", + "quiz": [ + { + "questionText": "下列何者能確認同一分支內不同的審查、評論、測試……等?", + "answerOptions": [ + { + "answerText": "GitHub", + "isCorrect": "false" + }, + { + "answerText": "Pull Request", + "isCorrect": "true" + }, + { + "answerText": "Feature Branch", + "isCorrect": "false" + } + ] + }, + { + "questionText": "如何從雲端數據庫中取得所有的提交?", + "answerOptions": [ + { + "answerText": "git fetch", + "isCorrect": "false" + }, + { + "answerText": "git pull", + "isCorrect": "true" + }, + { + "answerText": "git commits -r", + "isCorrect": "false" + } + ] + }, + { + "questionText": "如何切換分支?", + "answerOptions": [ + { + "answerText": "git switch [branch-name]", + "isCorrect": "false" + }, + { + "answerText": "git checkout [branch-name]", + "isCorrect": "true" + }, + { + "answerText": "git load [branch-name]", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 5, + "title": "課程三 - 建立無障礙網頁：課前測驗", + "quiz": [ + { + "questionText": "下列何種工具可以確認網頁的無障礙性?", + "answerOptions": [ + { + "answerText": "Lighthouse", + "isCorrect": "true" + }, + { + "answerText": "Deckhouse", + "isCorrect": "false" + }, + { + "answerText": "Cleanhouse", + "isCorrect": "true" + } + ] + }, + { + "questionText": "只有實體的螢幕報讀器才能對視覺障礙者測試網頁親和力。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "網頁親和力只在公家機關的網頁才有需求。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 6, + "title": "課程三 - 建立無障礙網頁：課後測驗", + "quiz": [ + { + "questionText": "Lighthouse 只能檢查網頁親和力。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Color-safe 色彩工具可以幫助到：", + "answerOptions": [ + { + "answerText": "色盲", + "isCorrect": "false" + }, + { + "answerText": "視覺障礙者", + "isCorrect": "false" + }, + { + "answerText": "以上皆是", + "isCorrect": "true" + } + ] + }, + { + "questionText": "描述性連結是無障礙網頁中重要的部分。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 7, + "title": "課程四 - JavaScript 基礎 - 資料類態：課前測驗", + "quiz": [ + { + "questionText": "布林值是檢查字串的長度的資料型態。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "下列何種行為可以用在字串上?", + "answerOptions": [ + { + "answerText": "合併", + "isCorrect": "true" + }, + { + "answerText": "串接", + "isCorrect": "false" + }, + { + "answerText": "拼接", + "isCorrect": "false" + } + ] + }, + { + "questionText": "== 和 === 是可互換的。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 8, + "title": "課程四 - JavaScript 基礎 - 資料類態：課後測驗", + "quiz": [ + { + "questionText": "常數與 let 和 var 宣告的變數相同，除了：", + "answerOptions": [ + { + "answerText": "常數必須要初始化。", + "isCorrect": "true" + }, + { + "answerText": "常數可以被修改。", + "isCorrect": "false" + }, + { + "answerText": "常數可以被重新賦值。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在 JavaScript 中，負責處理數值型態資料的為 Numbers 與：", + "answerOptions": [ + { + "answerText": "bigint", + "isCorrect": "true" + }, + { + "answerText": "boolean", + "isCorrect": "false" + }, + { + "answerText": "star", + "isCorrect": "false" + } + ] + }, + { + "questionText": "字串值可以被單引號與雙引號所包住。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 9, + "title": "課程五 - JavaScript 基礎 - 函式與方法：課前測驗", + "quiz": [ + { + "questionText": "什麼是引數物件?", + "answerOptions": [ + { + "answerText": "用來宣告函式的定義。", + "isCorrect": "false" + }, + { + "answerText": "用來呼叫函式。", + "isCorrect": "true" + }, + { + "answerText": "用來與熟識的人共同持有。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "函式必須要有回傳值。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "你可以隨意命名函式的名稱。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "false" + }, + { + "answerText": "是，但以可描述性的名稱為佳。", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 10, + "title": "課程五 - JavaScript 基礎 - 函式與方法：課後測驗", + "quiz": [ + { + "questionText": "引數物件必須提供函式需要的所有參數。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "預設值(Default Value)的目的為何?", + "answerOptions": [ + { + "answerText": "設定正確的數值。", + "isCorrect": "false" + }, + { + "answerText": "參數的初始值，當忽略引數時，程式碼仍可運作。", + "isCorrect": "true" + }, + { + "answerText": "沒有意義。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "箭頭函式(fat arrow functions)允許開發人員：", + "answerOptions": [ + { + "answerText": "建立很重(heavy)的函式。", + "isCorrect": "false" + }, + { + "answerText": "可以忽略部分的函式名稱。", + "isCorrect": "true" + }, + { + "answerText": "建立匿名函式。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 11, + "title": "課程六 - JavaScript 基礎 - 在代碼中做出決定：課前測驗", + "quiz": [ + { + "questionText": "運算子 == 的運算為：", + "answerOptions": [ + { + "answerText": "相等", + "isCorrect": "true" + }, + { + "answerText": "嚴格相等", + "isCorrect": "false" + }, + { + "answerText": "賦值", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在 JavaScript 中，比較式後回傳的資料型態為?", + "answerOptions": [ + { + "answerText": "布林值", + "isCorrect": "true" + }, + { + "answerText": "空值", + "isCorrect": "false" + }, + { + "answerText": "字串", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在 JavaScript 中，符號 ! 代表：", + "answerOptions": [ + { + "answerText": "邏輯否定", + "isCorrect": "true" + }, + { + "answerText": "重要的", + "isCorrect": "false" + }, + { + "answerText": "等於", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 12, + "title": "課程六 - JavaScript 基礎 - 在代碼中做出決定：課後測驗", + "quiz": [ + { + "questionText": "條件式 '1' == 1 會回傳下列何種結果?", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + }, + { + "answerText": "空值", + "isCorrect": "false" + } + ] + }, + { + "questionText": "條件式 '1' == 1 會回傳下列何種結果?", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + }, + { + "answerText": "空值", + "isCorrect": "false" + } + ] + }, + { + "questionText": "下列何者為正確的邏輯「或」表示方法?", + "answerOptions": [ + { + "answerText": "a | b", + "isCorrect": "false" + }, + { + "answerText": "a || b", + "isCorrect": "true" + }, + { + "answerText": "a or b", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 13, + "title": "課程七 - JavaScript 基礎 - 矩陣與迴圈：課前測驗", + "quiz": [ + { + "questionText": "如果要提出矩陣中特定的元素，必須使用：", + "answerOptions": [ + { + "answerText": "中括號 []", + "isCorrect": "false" + }, + { + "answerText": "索引", + "isCorrect": "true" + }, + { + "answerText": "大括號 {}", + "isCorrect": "false" + } + ] + }, + { + "questionText": "如何取得矩陣內的元素個數?", + "answerOptions": [ + { + "answerText": "len(array)", + "isCorrect": "false" + }, + { + "answerText": "矩陣的屬性大小(Property Size)。", + "isCorrect": "false" + }, + { + "answerText": "矩陣的屬性長度(Property Length)。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "在 JavaScript 中，索引從何數開始計算?", + "answerOptions": [ + { + "answerText": "0", + "isCorrect": "true" + }, + { + "answerText": "1", + "isCorrect": "false" + }, + { + "answerText": "2", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 14, + "title": "課程七 - JavaScript 基礎 - 矩陣與迴圈：課後測驗", + "quiz": [ + { + "questionText": "在 for-loop 迴圈中，需要修改何處來增加迭代次數到5次?", + "answerOptions": [ + { + "answerText": "條件式", + "isCorrect": "true" + }, + { + "answerText": "計數器", + "isCorrect": "false" + }, + { + "answerText": "迭代陳述式", + "isCorrect": "false" + } + ] + }, + { + "questionText": "while 迴圈與 for-loop 迴圈的差異在於：", + "answerOptions": [ + { + "answerText": "for-loop 迴圈需要計數器與迭代陳述式，while 迴圈只需要條件式。", + "isCorrect": "true" + }, + { + "answerText": "while 迴圈需要計數器與迭代陳述式，for-loop 迴圈只需要條件式。", + "isCorrect": "false" + }, + { + "answerText": "它們是一樣的，只是另一種稱呼而已。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "迴圈 (let i=1; i < 5; i++)中，會執行多少次迭代??", + "answerOptions": [ + { + "answerText": "5", + "isCorrect": "false" + }, + { + "answerText": "4", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 15, + "title": "課程八 - Terrarium 專案 - HTML簡介：課前測驗", + "quiz": [ + { + "questionText": "HTML 的全名為 HyperText Mockup Language。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "所有的 HTML 標籤都需要起始標籤與結束標籤。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "使用語意標籤最重要的應用為：", + "answerOptions": [ + { + "answerText": "方便程式碼的閱讀。", + "isCorrect": "false" + }, + { + "answerText": "螢幕閱讀器。", + "isCorrect": "true" + }, + { + "answerText": "管理用途。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 16, + "title": "課程八 - Terrarium 專案 - HTML簡介：課後測驗", + "quiz": [ + { + "questionText": "Spans 與 Divs 可以互相替換。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "HTML文件的標頭可以包含：", + "answerOptions": [ + { + "answerText": "標題標籤(title tag)", + "isCorrect": "false" + }, + { + "answerText": "元資訊(metadata)", + "isCorrect": "false" + }, + { + "answerText": "以上皆是", + "isCorrect": "true" + } + ] + }, + { + "questionText": "開發人員無法使用不推薦使用的標籤。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "false" + }, + { + "answerText": "否，但它們有被否決的充分理由。", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 17, + "title": "課程九 - Terrarium 專案 - CSS簡介：課前測驗", + "quiz": [ + { + "questionText": "HTML 元素必須包含 class 或 id 才能被造型化。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "CSS 全名為 Complete Style Sheets。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "可以利用 CSS 來建立動畫。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 18, + "title": "課程九 - Terrarium 專案 - CSS簡介：課後測驗", + "quiz": [ + { + "questionText": "CSS 可以被撰寫在 HTML 檔案的開頭。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "CSS 在應用程式中是必須的物件。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "false" + }, + { + "answerText": "否，但如果想讓畫面變美觀就需要使用CSS。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "可以利用下列何者瀏覽器工具來檢查 CSS?", + "answerOptions": [ + { + "answerText": "Elements", + "isCorrect": "false" + }, + { + "answerText": "Styles", + "isCorrect": "true" + }, + { + "answerText": "Network", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 19, + "title": "課程十 - Terrarium 專案 - DOM 元素控制與閉包：課前測驗", + "quiz": [ + { + "questionText": "DOM 元素全名為 Document Object Management", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "可以將 DOM 元素理解為樹的一種。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "利用 Web API，開發人員就能控制 DOM 元素。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 20, + "title": "課程十 - Terrarium 專案 - DOM 元素控制與閉包：課後測驗", + "quiz": [ + { + "questionText": "DOM 元素是表現網頁文件的一種物件。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "使用 JavaScript 閉包可以達成：", + "answerOptions": [ + { + "answerText": "在函式中撰寫函式。", + "isCorrect": "true" + }, + { + "answerText": "將 DOM 元素包住。", + "isCorrect": "false" + }, + { + "answerText": "關閉腳本區。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "使用閉包可以在單一或多個函式中存取外部函式的 _________。", + "answerOptions": [ + { + "answerText": "矩陣", + "isCorrect": "false" + }, + { + "answerText": "作用域", + "isCorrect": "true" + }, + { + "answerText": "函式", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 21, + "title": "課程十一 - 打字遊戲：課前測驗", + "quiz": [ + { + "questionText": "事件驅動程式發生在使用者：", + "answerOptions": [ + { + "answerText": "按下按鈕。", + "isCorrect": "false" + }, + { + "answerText": "改變數值。", + "isCorrect": "false" + }, + { + "answerText": "與網頁作互動。", + "isCorrect": "false" + }, + { + "answerText": "以上皆是。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "在程序式程式中，函式會以下列方式被呼叫。", + "answerOptions": [ + { + "answerText": "在任何時刻中。", + "isCorrect": "false" + }, + { + "answerText": "在特定的順序中。", + "isCorrect": "true" + }, + { + "answerText": "由左至右。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在 DOM 中最常用來建立事件處理的方法為：", + "answerOptions": [ + { + "answerText": "addEventListener", + "isCorrect": "true" + }, + { + "answerText": "addListener", + "isCorrect": "false" + }, + { + "answerText": "addEvent", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 22, + "title": "課程十一 - 打字遊戲：課後測驗", + "quiz": [ + { + "questionText": "使用者做的大部分網頁互動都會觸發事件。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "常見的事件包括：", + "answerOptions": [ + { + "answerText": "click_event", + "isCorrect": "false" + }, + { + "answerText": "select_event", + "isCorrect": "false" + }, + { + "answerText": "input_event", + "isCorrect": "false" + }, + { + "answerText": "以上皆是。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "可以使用匿名函式來建立事件處理。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 23, + "title": "課程十二 - 瀏覽器擴充功能專案 - 關於瀏覽器：課前測驗", + "quiz": [ + { + "questionText": "使用者可以從下列管道取得瀏覽器擴充功能：", + "answerOptions": [ + { + "answerText": "沃爾瑪(WalMart)", + "isCorrect": "false" + }, + { + "answerText": "瀏覽器擴充商店", + "isCorrect": "true" + }, + { + "answerText": "應用程式商店", + "isCorrect": "false" + } + ] + }, + { + "questionText": "NPM 全名為", + "answerOptions": [ + { + "answerText": "Node Package Manager", + "isCorrect": "true" + }, + { + "answerText": "Netscape Primary Mix", + "isCorrect": "false" + }, + { + "answerText": "Natural Processing Manager", + "isCorrect": "false" + } + ] + }, + { + "questionText": "瀏覽器可以安全地或非安全地提供網頁服務。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 24, + "title": "課程十二 - 瀏覽器擴充功能專案 - 關於瀏覽器：課後測驗", + "quiz": [ + { + "questionText": "網際網路的發明者為：", + "answerOptions": [ + { + "answerText": "Tom Barnard-Loft", + "isCorrect": "false" + }, + { + "answerText": "Tim Berners-Lee", + "isCorrect": "true" + }, + { + "answerText": "Trish Berth-Pool", + "isCorrect": "false" + } + ] + }, + { + "questionText": "第一款網頁瀏覽器為：", + "answerOptions": [ + { + "answerText": "WorldWideWeb", + "isCorrect": "true" + }, + { + "answerText": "Mozilla", + "isCorrect": "false" + }, + { + "answerText": "Netscape", + "isCorrect": "false" + } + ] + }, + { + "questionText": "瀏覽器可以儲存使用者上網的歷史紀錄。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 25, + "title": "課程十三 - 瀏覽器擴充功能專案 - 呼叫API、使用Local Storage：課前測驗", + "quiz": [ + { + "questionText": "APIs 全名為", + "answerOptions": [ + { + "answerText": "Application Programming Interfaces", + "isCorrect": "true" + }, + { + "answerText": "A Programming Inference", + "isCorrect": "false" + }, + { + "answerText": "Anti Proven Intentions", + "isCorrect": "false" + } + ] + }, + { + "questionText": "使用API能與 _________ 做互動。", + "answerOptions": [ + { + "answerText": "網路上的一項資產", + "isCorrect": "false" + }, + { + "answerText": "資料庫", + "isCorrect": "false" + }, + { + "answerText": "以上皆是", + "isCorrect": "true" + } + ] + }, + { + "questionText": "任何人都可以建立 API。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 26, + "title": "課程十三 - 瀏覽器擴充功能專案 - 呼叫API、使用Local Storage：課後測驗", + "quiz": [ + { + "questionText": "當使用者關閉瀏覽器視窗時，LocalStorage 會被清除。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "主要瀏覽器視窗會管理擴充功能的LocalStorage使用情形。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在API context中，REST 全名為", + "answerOptions": [ + { + "answerText": "Representational State Transfer", + "isCorrect": "true" + }, + { + "answerText": "Returning State Tasks", + "isCorrect": "false" + }, + { + "answerText": "Rendering State To Browser", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 27, + "title": "課程十四 - 瀏覽器擴充功能專案 - 學習背景工作與效能：課前測驗", + "quiz": [ + { + "questionText": "使用者可以利用下列何種方式測試應用程式的效能?", + "answerOptions": [ + { + "answerText": "瀏覽器工具", + "isCorrect": "true" + }, + { + "answerText": "獨立軟體包", + "isCorrect": "false" + }, + { + "answerText": "手動測試", + "isCorrect": "false" + } + ] + }, + { + "questionText": "通常網頁的效能代表：", + "answerOptions": [ + { + "answerText": "多快可以載入完成。", + "isCorrect": "false" + }, + { + "answerText": "程式執行的速率有多快。", + "isCorrect": "false" + }, + { + "answerText": "以上皆是。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "總體來說，在這幾年間網頁的「負擔」：", + "answerOptions": [ + { + "answerText": "變輕了。", + "isCorrect": "false" + }, + { + "answerText": "變重了。", + "isCorrect": "true" + }, + { + "answerText": "維持原樣。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 28, + "title": "課程十四 - 瀏覽器擴充功能專案 - 學習背景工作與效能：課後測驗", + "quiz": [ + { + "questionText": "為了取得更好的網頁效能，清除快取並重新載入效能分析器是一種方法。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "瀏覽器擴充功能是固有的功能。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "分析下列地方來尋找效能的瓶頸：", + "answerOptions": [ + { + "answerText": "DOM 查找元素。", + "isCorrect": "false" + }, + { + "answerText": "JavaScript 最佳化。", + "isCorrect": "false" + }, + { + "answerText": "資產管理。", + "isCorrect": "false" + }, + { + "answerText": "以上皆是。", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 29, + "title": "課程十五 - 太空遊戲 - 介紹：課前測驗", + "quiz": [ + { + "questionText": "JavaScript 是不常見的遊戲開發程式語言。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "發布/訂閱是管理遊戲資產與流程的合理規範。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "類別與組合可以處理物件繼承的概念。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 30, + "title": "課程十五 - 太空遊戲 - 介紹：課後測驗", + "quiz": [ + { + "questionText": "依賴物件繼承的類別可以歸咎於其行為。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "組合是處理遊戲物件最好的設計模式。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Pub/Sub 代表的是：", + "answerOptions": [ + { + "answerText": "Publish/Subscribe", + "isCorrect": "true" + }, + { + "answerText": "Print/Staple", + "isCorrect": "false" + }, + { + "answerText": "Publish/Sanitize", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 31, + "title": "課程十六 - 太空遊戲 - 繪製英雄怪物於畫布：課前測驗", + "quiz": [ + { + "questionText": "你可以利用Canvas元素在螢幕上繪製圖案。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Canvas API只能畫出簡單的幾何圖形。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "座標點(0,0)代表Canvas左下方。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 32, + "title": "課程十六 - 太空遊戲 - 繪製英雄怪物於畫布：課後測驗", + "quiz": [ + { + "questionText": "繪圖處理能直接應用在Canvas上。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "藉由監測讀取事件來得知非同步的圖片是否被載入完成。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "繪製圖片到螢幕的指令為：", + "answerOptions": [ + { + "answerText": "paintImage()", + "isCorrect": "false" + }, + { + "answerText": "drawImage()", + "isCorrect": "true" + }, + { + "answerText": "draw()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 33, + "title": "課程十七 - 太空遊戲 - 加入律動：課前測驗", + "quiz": [ + { + "questionText": "任何物件可以接收鍵盤事件。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "鍵盤事件與滑鼠事件是相同的監聽方法。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "若想讓事情定期的觸發，需要用到什麼函式?", + "answerOptions": [ + { + "answerText": "setInterval()", + "isCorrect": "true" + }, + { + "answerText": "setTimeout()", + "isCorrect": "false" + }, + { + "answerText": "sleep()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 34, + "title": "課程十七 - 太空遊戲 - 加入律動：課後測驗", + "quiz": [ + { + "questionText": "更新螢幕一定要全部重新繪製。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "什麼是遊戲迴圈?", + "answerOptions": [ + { + "answerText": "函式確保遊戲能重新開始。", + "isCorrect": "false" + }, + { + "answerText": "函式決定遊戲的運作時速。", + "isCorrect": "false" + }, + { + "answerText": "函式確保定期事件發生並將畫面呈獻給玩家。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "重新繪製螢幕的時機點為：", + "answerOptions": [ + { + "answerText": "玩家產生互動。", + "isCorrect": "false" + }, + { + "answerText": "有東西移動。", + "isCorrect": "true" + }, + { + "answerText": "時間的推移。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 35, + "title": "課程十八 - 太空遊戲 - 加入雷射與碰撞偵測：課前測驗", + "quiz": [ + { + "questionText": "碰撞偵測是偵測兩物體是否發生碰撞。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "如何將成員從螢幕中移除?", + "answerOptions": [ + { + "answerText": "呼叫垃圾清潔員。", + "isCorrect": "false" + }, + { + "answerText": "標記為陣亡，在下一個繪製週期只畫存活的成員。", + "isCorrect": "true" + }, + { + "answerText": "將成員移動到其他象限。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在 JavaScript 中模擬雷射最合適的方式為：", + "answerOptions": [ + { + "answerText": "根據鍵盤事件建立可視物件。", + "isCorrect": "true" + }, + { + "answerText": "建立動態圖像。", + "isCorrect": "false" + }, + { + "answerText": "讓敵人定期地爆炸。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 36, + "title": "課程十八 - 太空遊戲 - 加入雷射與碰撞偵測：課後測驗", + "quiz": [ + { + "questionText": "在碰撞偵測中，需要判斷兩者：", + "answerOptions": [ + { + "answerText": "圓圈內是否有所相交。", + "isCorrect": "false" + }, + { + "answerText": "矩形內是否有所相交。", + "isCorrect": "true" + }, + { + "answerText": "兩點之間的距離。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "建立無敵時間的目的為：", + "answerOptions": [ + { + "answerText": "讓遊戲變得更難，讓玩家無法重複擊發雷射摧毀敵人。", + "isCorrect": "false" + }, + { + "answerText": "JavaScript 在單位時間內只能處理一定額度的事件，需要有所限制。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "常數在程式碼中是醒目的原因為：", + "answerOptions": [ + { + "answerText": "它們以全大寫書寫。", + "isCorrect": "true" + }, + { + "answerText": "它們有特定的名稱。", + "isCorrect": "false" + }, + { + "answerText": "它們用特定字元，連接。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 37, + "title": "課程十九 - 太空遊戲 - 分數與生命數：課前測驗", + "quiz": [ + { + "questionText": "如何利用Canvas元素在畫面上寫字?", + "answerOptions": [ + { + "answerText": "將文字包在div或span元素中。", + "isCorrect": "false" + }, + { + "answerText": "呼叫 drawText()在Canvas元素上。", + "isCorrect": "false" + }, + { + "answerText": "Call fillText() on the context object", + "isCorrect": "true" + } + ] + }, + { + "questionText": "為什麼遊戲需要有「生命數」的概念?", + "answerOptions": [ + { + "answerText": "為了表現玩家還能承受多少攻擊。", + "isCorrect": "false" + }, + { + "answerText": "為了讓遊戲不會直接結束，允許玩家有容錯空間。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "改變 Canvas 元素上字的顏色可以利用：", + "answerOptions": [ + { + "answerText": "fillColor", + "isCorrect": "false" + }, + { + "answerText": "fillStyle", + "isCorrect": "true" + }, + { + "answerText": "textAlign", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 38, + "title": "課程十九 - 太空遊戲 - 分數與生命數：課後測驗", + "quiz": [ + { + "questionText": "如何有趣地表現出玩家剩餘的生命數?", + "answerOptions": [ + { + "answerText": "剩餘艦艇的數字。", + "isCorrect": "false" + }, + { + "answerText": "得點系統。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "如何讓畫面裡 Canvas 元素上的文字置中?", + "answerOptions": [ + { + "answerText": "利用 Flexbox。", + "isCorrect": "false" + }, + { + "answerText": "讓文字的 x 座標點為玩家視窗寬度的一半。", + "isCorrect": "true" + }, + { + "answerText": "設定文字內容的 textAlign 屬性為中間。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "在程式碼中，用下列何者表示扣除一條性命?", + "answerOptions": [ + { + "answerText": "this.life-", + "isCorrect": "false" + }, + { + "answerText": "this.life--", + "isCorrect": "true" + }, + { + "answerText": "this.life++", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 39, + "title": "課程二十 - 太空遊戲 - 結束與重來：課前測驗", + "quiz": [ + { + "questionText": "何時為重新遊戲的最好時機?", + "answerOptions": [ + { + "answerText": "當玩家勝利或落敗時。", + "isCorrect": "true" + }, + { + "answerText": "任一時刻。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "什麼時候該讓遊戲結束?", + "answerOptions": [ + { + "answerText": "當單一敵人艦艇遭到擊毀。", + "isCorrect": "false" + }, + { + "answerText": "當玩家艦艇遭到擊毀。", + "isCorrect": "true" + }, + { + "answerText": "當分數進帳。", + "isCorrect": "false" + } + ] + }, + { + "questionText": "最適合加入新關卡到遊戲的方式為：", + "answerOptions": [ + { + "answerText": "增加通關要求的分數門檻。", + "isCorrect": "true" + }, + { + "answerText": "增加更多的玩家。", + "isCorrect": "false" + }, + { + "answerText": "增加更好的圖像。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 40, + "title": "課程二十 - 太空遊戲 - 結束與重來：課後測驗", + "quiz": [ + { + "questionText": "當遊戲結束時，下列何者為合適的事件?", + "answerOptions": [ + { + "answerText": "顯示適當的訊息。", + "isCorrect": "false" + }, + { + "answerText": "結束遊戲。", + "isCorrect": "false" + }, + { + "answerText": "顯示適當的訊息，詢問玩家是否重來，顯示對應的選項按鈕。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "只有當遊戲結束時才能重新遊戲。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "當遊戲結束時，何種時機清除 EventEmitter 較為合適?", + "answerOptions": [ + { + "answerText": "清除完事件監聽者。", + "isCorrect": "true" + }, + { + "answerText": "清除完畫面。", + "isCorrect": "false" + }, + { + "answerText": "關閉遊戲視窗。", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 41, + "title": "課程二十一 - 銀行專案 - HTML模板與網路連線App：課前測驗", + "quiz": [ + { + "questionText": "一個網路程式必須要有多個HTML檔才能呈現不同頁面。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "網路程式允許用戶在本地儲存資料", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "什麼是網路程式資料供應者最合適的方式?", + "answerOptions": [ + { + "answerText": "一個本地資料庫。", + "isCorrect": "false" + }, + { + "answerText": "一個 JavaScript 物件。", + "isCorrect": "false" + }, + { + "answerText": "一個含有 JSON API 的伺服器。", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 42, + "title": "課程二十一 - 銀行專案 - HTML模板與網路連線App：課後測驗", + "quiz": [ + { + "questionText": "HTML 模板在預設中是 DOM 元素的一部份。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "false" + }, + { + "answerText": "否", + "isCorrect": "true" + } + ] + }, + { + "questionText": "哪個 URL 部分需要被使用在路由上?", + "answerOptions": [ + { + "answerText": "window.location.pathname", + "isCorrect": "false" + }, + { + "answerText": "window.location.origin", + "isCorrect": "false" + }, + { + "answerText": "以上皆是。", + "isCorrect": "true" + } + ] + }, + { + "questionText": "當呼叫 history.pushState() 函式時，下列何者事件會被觸發?", + "answerOptions": [ + { + "answerText": "pushstate", + "isCorrect": "false" + }, + { + "answerText": "popstate", + "isCorrect": "true" + }, + { + "answerText": "navigate", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 43, + "title": "課程二十二 - 銀行專案 - 登入與註冊表單：課前測驗", + "quiz": [ + { + "questionText": "HTML 表單允許用戶不須利用 JavaScript 輸入資料到伺服器。", + "answerOptions": [ + { + "answerText": "是", + "isCorrect": "true" + }, + { + "answerText": "否", + "isCorrect": "false" + } + ] + }, + { + "questionText": "
` 之前： + +```html +
+
+
+
+
+
+
+
+
+``` + +✅ 即使你在檔案中新增了程式碼，你卻沒看到任何東西。為什麼？ + +--- + +## 🚀 挑戰 + +這邊有一些「古老」的 HTML 標籤。雖然[這些標籤](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)被歸為不推薦使用的標籤，但仍值得去嘗試的。你可以用 `` 標籤來讓 h1 標題文字變成縱向呈現嗎？實驗完後，記得要移除這些標籤喔。 + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16) + +## 複習與自學 + +HTML 是一種「行之有效」的構築系統，建立了現今的各種網頁。從標籤來學習關於 HTML 的歷史，你能了解為什麼有的標籤被排除，而有的被新增上去嗎？有什麼標籤會在未來被建立上去呢？ + +學習更多關於建立網頁的資訊：[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)。 + + +## 作業 + +[練習 HTML：建立部落格雛形](assignment.zh-tw.md) diff --git a/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md b/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md new file mode 100644 index 00000000..59e5df2c --- /dev/null +++ b/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 練習 HTML：建立部落格雛形 + +## 簡介 + +想像你正在設計，或重新設計你自己的專屬網頁。建立網頁的圖像設計雛形，並用 HTML 語法建立這些網頁元素。你可以建在紙上並掃描它，或者是建在軟體中，只要確保有 HTML 語法在裡面。 + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | ----------------------- ------------ | ------------------------------- | --------------------------------- | +| | 可以見到部落格編排包含10種以上的元素 | 見到部落格編排大約有 5 種的元素 | 見到部落格編排最多只有 3 種的元素 | \ No newline at end of file diff --git a/quiz-app/src/assets/translations/zh-tw.json b/quiz-app/src/assets/translations/zh-tw.json index 93065430..1ed055cb 100644 --- a/quiz-app/src/assets/translations/zh-tw.json +++ b/quiz-app/src/assets/translations/zh-tw.json @@ -756,7 +756,7 @@ }, { "id": 15, - "title": "課程八 - Terrarium 專案 - HTML簡介：課前測驗", + "title": "課程八 - Terrarium 專案 - HTML 簡介：課前測驗", "quiz": [ { "questionText": "HTML 的全名為 HyperText Mockup Language。", @@ -805,7 +805,7 @@ }, { "id": 16, - "title": "課程八 - Terrarium 專案 - HTML簡介：課後測驗", + "title": "課程八 - 盆栽盒專案 - HTML 簡介：課後測驗", "quiz": [ { "questionText": "Spans 與 Divs 可以互相替換。", @@ -821,7 +821,7 @@ ] }, { - "questionText": "HTML文件的標頭可以包含：", + "questionText": "HTML 文件的標頭可以包含：", "answerOptions": [ { "answerText": "標題標籤(title tag)", @@ -858,7 +858,7 @@ }, { "id": 17, - "title": "課程九 - Terrarium 專案 - CSS簡介：課前測驗", + "title": "課程九 - 盆栽盒專案 - CSS簡介：課前測驗", "quiz": [ { "questionText": "HTML 元素必須包含 class 或 id 才能被造型化。", @@ -903,7 +903,7 @@ }, { "id": 18, - "title": "課程九 - Terrarium 專案 - CSS簡介：課後測驗", + "title": "課程九 - 盆栽盒專案 - CSS簡介：課後測驗", "quiz": [ { "questionText": "CSS 可以被撰寫在 HTML 檔案的開頭。", @@ -956,7 +956,7 @@ }, { "id": 19, - "title": "課程十 - Terrarium 專案 - DOM 元素控制與閉包：課前測驗", + "title": "課程十 - 盆栽盒專案 - DOM 元素控制與閉包：課前測驗", "quiz": [ { "questionText": "DOM 元素全名為 Document Object Management", @@ -1001,7 +1001,7 @@ }, { "id": 20, - "title": "課程十 - Terrarium 專案 - DOM 元素控制與閉包：課後測驗", + "title": "課程十 - 盆栽盒專案 - DOM 元素控制與閉包：課後測驗", "quiz": [ { "questionText": "DOM 元素是表現網頁文件的一種物件。", From 2369ebf92c06101a62561cbd452233174fa68ddf Mon Sep 17 00:00:00 2001 From: CRTao Date: Tue, 23 Feb 2021 13:25:25 +0800 Subject: [PATCH 08/65] translate lesson 3 to zh-tw --- .../translations/README.zh-tw.md | 8 +- .../translations/README.zh-tw.md | 263 ++++++++++++++++++ .../translations/assignment.zh-tw.md | 11 + .../translations/README.zh-tw.md | 219 +++++++++++++++ .../translations/assignment.zh-tw.md | 11 + 3-terrarium/translations/README.zh-tw.md | 34 +++ quiz-app/src/assets/translations/zh-tw.json | 10 +- 7 files changed, 547 insertions(+), 9 deletions(-) create mode 100644 3-terrarium/2-intro-to-css/translations/README.zh-tw.md create mode 100644 3-terrarium/2-intro-to-css/translations/assignment.zh-tw.md create mode 100644 3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md create mode 100644 3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md create mode 100644 3-terrarium/translations/README.zh-tw.md 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 8e1f5bfd..1a786854 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 @@ -11,7 +11,7 @@ HTML (HyperText Markup Language) 可說是網頁的骨架。若說 CSS 打扮你的 HTML 而 JavaScript 讓它活起來，HTML 則是網頁應用的身體。HTML 的語法甚至佐證前行說明，它包含了 "head"、 "body" 和 "footer" 的標籤。 -在這堂課中，我們會使用 HTML 去構建我們盆栽盒的虛擬介面。包含一個標題、三個欄位：左右各一的可拖曳植物盆栽欄位與中間的玻璃盆栽盒。這堂課程後，你會看到欄位中有許多盆栽，但介面可能會有點奇怪。不用擔心，往後的課程會講述 CSS 語法來造型化你的介面。 +在這堂課中，我們會使用 HTML 去構建我們盆栽盒的虛擬介面。包含一個標題、三個欄位：左右各一的可拖曳植物欄位與中間的玻璃盆栽罐。這堂課程後，你會看到欄位中有許多盆栽，但介面可能會有點奇怪。不用擔心，往後的課程會講述 CSS 語法來造型化你的介面。 ### 課題 @@ -68,7 +68,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[ ```html - 歡迎來到我的虛擬盆栽盒 + Welcome to my Virtual Terrarium @@ -91,7 +91,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[ - 歡迎來到我的虛擬盆栽盒 + Welcome to my Virtual Terrarium @@ -180,7 +180,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[ 新增下列程式碼到你的 `` 標籤中： ```html -

我的盆栽盒

+

My Terrarium

``` 使用語義化標籤如：標題 `

` 和未排序串列 `
    ` ，能幫助螢幕報讀器理解網頁的內容。普遍來說，按鈕為 ` + + + + +``` + +### 執行應用程式 + +最好的逐段開發模式是定期的確認程式結果。讓我們來執行現在的應用程式。Visual Studio Code 上有一個好用的擴充套件為[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，它會在你儲存網頁檔案時，同時架設並更新瀏覽器上的網頁。 + +- 安裝[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，點擊連結中的 **Install** + - 瀏覽器要求開啟 Visual Studio Code，Visual Studio Code 會執行後續的安裝流程 + - 安裝完後，重啟 Visual Studio Code +- 一旦安裝完成，在 Visual Studio Code 下按下 Ctrl-Shift-P (或 Cmd-Shift-P) 開啟指令視窗。 +- 輸入 **Live Server: Open with Live Server** + - Live Server 會架設並發布你的網頁成果 +- 開啟瀏覽器，前往 **https://localhost:5500** +- 現在你能看到你所做的網頁！ + +讓我們來為網頁增加更多功能。 + +## 加入 CSS + +建立完 HTML 檔，現在我們為了造型加入 CSS。我們需要標記玩家需要輸入的單字，若單字輸入錯誤時需要改變文字框的顏色。利用兩組 class 來完成： + +在檔案 **style.css** 加入下列語法： + +```css +/* 在 style.css 中 */ +.highlight { + background-color: yellow; +} + +.error { + background-color: lightcoral; + border: red; +} +``` + +✅ 處理 CSS 時，你可以規劃任何你想要的介面布局。花點時間讓你的網頁更迷人： + +- 變更其他字型 +- 改變標題顏色 +- 改變物件大小 + +## JavaScript + +建立完使用者介面後，我們要專注在 JavaScript 上，提供網頁邏輯處理的能力。我們將工作分為下列步驟： + +- [建立常數](#建立常數) +- [事件監聽者 - 開始遊戲](#加入開始邏輯) +- [事件監聽者 - 輸入文字](#加入打字邏輯) + +首先，我們先編輯檔案 **script.js**。 + +### 建立常數 + +加入一些變數給程式使用。同樣地，就像食譜一樣，我們需要的食材如下： + +- 矩陣，儲存所有引文 +- 空矩陣，儲存單一引文的所有單字 +- 變數，儲存空矩陣的索引，標記玩家現在面對的單字 +- 變數，紀錄玩家點擊開始時的時間 + +我們也需要將使用者介面上的物件做連結： + +- 文字框 (**typed-value**) +- 顯示引文 (**quote**) +- 訊息欄 (**message**) + +```javascript +// 在檔案 script.js 中 +// 所有的引文內容 +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// 儲存單字列表及目前要輸入的單字索引 +let words = []; +let wordIndex = 0; +// 開始時間 +let startTime = Date.now(); +// 網頁物件連結 +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +``` + +✅ 試著加入更多的引文到你的遊戲中。 + +> **筆記** 我們可以接收任何物件，只要使用程式碼 `document.getElementById`。因為我們需要定期參考這些元素，所以使用常數來確認是否有單字輸入錯誤的問題。框架如[Vue.js](https://vuejs.org/)或[React](https://reactjs.org/)可以幫助你更好管理你的程式碼。 + +花點時間觀看下列關於 `const`、`let` 與 `var` 的影片。 + +[![變數類型](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "變數類型") + +> 點擊上方圖片以觀賞關於變數的影片。 + +### 加入開始邏輯 + +為了開始我們的遊戲，玩家會點擊開始按鈕。當然，我們不知道何時玩家會開始遊戲，這就是為什麼我們使用[事件監聽者](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)到程式中。一個事件監聽者允許我們監看事件的觸發與對應的回應程式。在這個例子，我們希望當使用者點擊開始時，執行某些程式。 + +當玩家點擊 **start** 按鈕後，我們需要挑選一段引文、設定使用者介面並追蹤現在玩家的要輸入的單字與時間。下列為我們需要新增的程式碼，我們會在之後逐行解釋。 + +```javascript +// 在 script.js 末端 +document.getElementById('start').addEventListener('click', () => { + // 取得一行引文 + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // 將引文分成許多單字，存在矩陣中。 + words = quote.split(' '); + // 重制單字索引來做追蹤 + wordIndex = 0; + + // 更新使用者介面 + // 建立 span 元素的矩陣，設定 class 用。 + const spanWords = words.map(function(word) { return `${word} `}); + // 轉換成字串並以 innerHTML 顯示引文 + quoteElement.innerHTML = spanWords.join(''); + // 標記第一個單字 + quoteElement.childNodes[0].className = 'highlight'; + // 清除訊息欄之前的訊息 + messageElement.innerText = ''; + + // 設定文字框 + // 清除文字框 + typedValueElement.value = ''; + // 設定 focus + typedValueElement.focus(); + // 設定事件驅動程式 + + // 開始計時器 + startTime = new Date().getTime(); +}); +``` + +我們來分解程式碼吧！ + +- 設定單字追蹤 + - 使用[Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)和[Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random)讓我們能隨機從矩陣 `quotes` 中挑選一行引文 + - 轉換 `quote` 成 `words` 組成的矩陣，追蹤目前玩家正在輸入的單字 + - `wordIndex` 設定為 0，玩家會從第一的單字開始輸入 +- 設定使用者介面 + - 建立矩陣 `spanWords`，將每一個單字包在 `span` 元素中 + - 這讓我們能高光標記單字 + - `join` 矩陣來建立字串，我們可以在 `quoteElement` 上更新 `innerHTML` + - 這會顯示引文給玩家檢視 + - 設定第一個 `span` 元素的 `className` 成 `highlight`，來標記單字呈黃色 + - 修改 `messageElement`的 `innerText` 成 `''`，這會清除訊息欄的內容 +- 設定文字框 + - 清除目前 `typedValueElement` 的 `value` + - 設定 `typedValueElement` 成 `focus` +- 呼叫 `getTime` 來啟始計時器 + +### 加入打字邏輯 + +當玩家開始打字時，`input` 事件會被觸發。對應的事件監聽者需要檢查玩家是否輸入正確的單字，監控目前的遊戲狀況。回到檔案 **script.js**，加入下方程式碼到檔案最下方。我們會在後續解釋程式碼。 + +```javascript +// script.js 最末端 +typedValueElement.addEventListener('input', () => { + // 取得目前的單字 + const currentWord = words[wordIndex]; + // 取得目前輸入的數值 + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // 句子最末端 + // 顯示成功 + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // 單字最末端 + // 清除輸入的數值，準備給新的單字使用 + typedValueElement.value = ''; + // 移動到下一個單字 + wordIndex++; + // 重設所有引文子元素的 class 名稱 + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // 標記新單字 + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // 單字目前輸入正確 + // 標記下一個單字 + typedValueElement.className = ''; + } else { + // 單字輸入錯誤 + typedValueElement.className = 'error'; + } +}); +``` + +讓我們分解程式碼吧！我們開始取得目前的單字與玩家輸入的數值。我們建立一系列的邏輯，檢查引文是否輸入完成，單字是否輸入完成，單字是否正確、是否錯誤。 + +- 引文完成，檢查 `typedValue` 與 `currentWord` 相等且 `wordIndex` 與 `words` 的 `length` 減一相等。 + - 計算 `elapsedTime` ，利用目前時間減去 `startTime` 取得遊戲時長 + - `elapsedTime` 除以 1,000 ，轉化毫秒單位為秒單位 + - 顯示成功訊息 +- 單字完成，以 `typedValue` 間的空白為界，檢查 `typedValue` 是否與 `currentWord` 相等 + - 設定 `typedElement` 的 `value` 成 `''` ，準備給下一個單字輸入進來 + - 增加 `wordIndex` 到下一個單字 + - 進迴圈，每一個 `quoteElement` 的 `childNodes` ，它們的 `className` 都被設為 `''` ，代表預設的單字呈現規則 + - 設定單字的 `className` 成 `highlight` 來標記為下一個被輸入的單字 +- 單字目前輸入正確但未完成，從 `typedValue` 開始檢查 `currentWord` + - 確保清除 `typedValueElement` 的 `className`，顯示預設的呈現方式。 +- 若此時輸入錯誤，我們加上錯誤規則 + - 設定 `typedValueElement` 的 `className` 成 `error` + +## 測試你的應用程式 + +我們做到最後了！最後一步就是確保我們的應用程式運作正常。試試看！不要擔心程式出現錯誤，**所有的開發者**都會面臨錯誤。有需要時，檢查程式訊息並偵錯。 + +點擊按鈕 **start**，馬上開始輸入單字！你可以看看這預覽動畫。 + +![遊戲中的動畫](../4-typing-game/images/demo.gif) + +--- + +## 🚀 挑戰 + +加入更多功能。 + +- 在完成遊戲時，關閉 `input` 事件監聽者；遊戲重新開始時，再重新開啟它。 +- 當玩家完成引文時，關閉文字框 +- 以對話窗格的方式顯示恭賀訊息 +- 利用[localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)儲存最高分的資料 + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22) + +## 複習與自學 + +在瀏覽器上閱讀[所有開發者可運用的事件](https://developer.mozilla.org/en-US/docs/Web/Events)，想想你能在什麼樣的場合使用各個事件。 + +## 作業 + +[建立一款新的鍵盤遊戲](assignment.zh-tw.md) diff --git a/4-typing-game/typing-game/translations/assignment.zh-tw.md b/4-typing-game/typing-game/translations/assignment.zh-tw.md new file mode 100644 index 00000000..a85f9f8b --- /dev/null +++ b/4-typing-game/typing-game/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 建立一款新的鍵盤遊戲 + +## 簡介 + +建立一款使用鍵盤事件的小遊戲。它可以是不同的鍵盤輸入遊戲：使用鍵盤在視窗上繪製像素點的繪圖遊戲。激發你的創意吧！ + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | ------------------ | ------------ | ------------ | +| | 呈現完整的遊戲內容 | 遊戲內容單調 | 遊戲出現問題 | From 8516e36f1be45e3cd5263eb129f30015df3ffc65 Mon Sep 17 00:00:00 2001 From: CRTao Date: Tue, 2 Mar 2021 15:30:09 +0800 Subject: [PATCH 10/65] translate lesson 5 to zh-tw --- .../translations/README.zh-tw.md | 167 +++++++++++++ .../translations/assignment.zh-tw.md | 11 + .../translations/README.zh-tw.md | 224 ++++++++++++++++++ .../translations/assignment.zh-tw.md | 11 + .../translations/README.zh.tw.md | 160 +++++++++++++ .../translations/assignment.zh-tw.md | 9 + .../translations/README.zh-tw.md | 28 +++ 7 files changed, 610 insertions(+) create mode 100644 5-browser-extension/1-about-browsers/translations/README.zh-tw.md create mode 100644 5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md create mode 100644 5-browser-extension/translations/README.zh-tw.md diff --git a/5-browser-extension/1-about-browsers/translations/README.zh-tw.md b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md new file mode 100644 index 00000000..7b931577 --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md @@ -0,0 +1,167 @@ +# 瀏覽器擴充功能專案 Part 1：關於瀏覽器 + +![瀏覽器繪圖筆記](../images/sketchnote.jpg) +> 由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 繪製 + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23) + +### 大綱 + +瀏覽器擴充功能新增額外的功能給瀏覽器。在你建立之前，你應該學習瀏覽器是如何運作的。 + +### 關於瀏覽器 + +在這一系列的課程中，你會學習如何建立瀏覽器擴充功能，運作在 Chrome、Firefox 與 Edge 瀏覽器上。在這一章中，你會探索瀏覽器是如何運作，建立瀏覽器擴充功能的內容。 + +但到底何謂瀏覽器？它是幫助用戶顯示伺服器內容到網頁上的程式軟體。 + +✅ 小歷史：第一個網頁瀏覽器為 'WorldWideWeb'，由 Timothy Berners-Lee 爵士於 1990 年建立。 + +![早期的瀏覽器](../images/earlybrowsers.jpg) +> 這邊有一些早期的瀏覽器，請參考[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) + +用戶使用網址 URL (Uniform Resource Locator) 位置連上網路，通常以 `http` 或 `https` 位置開頭使用超文本傳輸協定(Hypertext Transfer Protocol)，瀏覽器便能與該伺服器溝通並抓取網頁的資料。 + +這時，瀏覽器轉譯引擎會呈現到用戶的裝置上，可以是手機、桌機或是筆記型電腦。 + +瀏覽器也有能力暫存內容，不需要每一次都向伺服器請求內容。瀏覽器儲存用戶的瀏覽紀錄、儲存 'cookies'，一種包含用戶活動資訊的小型資料。 + +請記得一件重要的事，各家瀏覽器並不會相同！每一種瀏覽器都有各自的長處短處，專業的網頁開發人員必須了解如何讓網頁在不同瀏覽器上運作正常。這包含處理手機的小視窗，處理離線用戶的行為。 + +這邊有一個值得加到你書籤的實用網頁：[caniuse.com](https://www.caniuse.com)。當你在建構網頁時，你可以查詢 caniuse 技術支援清單，確保你能提供用戶最佳的使用體驗。 + +✅ 你知道你的網頁用戶最常使用什麼瀏覽器嗎？檢查你的分析程式，你可以安裝各種分析程式當作是你開發的一種環節，它們會告訴你那些瀏覽器最常被使用。 + +## 瀏覽器擴充功能 + +為什麼你需要建立瀏覽器擴充功能？它能附加在瀏覽器上，讓你快速地重複執行部分功能。舉例來說，如果你需要在網頁中檢查你所互動的顏色，你或許需要顏色選擇器擴充功能；如果你有記憶帳號密碼的困擾，你可能需要密碼管理擴充功能。 + +瀏覽器擴充功能在開發上也很有趣。它們有效地管理並執行少部分任務課題。 + +✅ 你最喜歡哪一項瀏覽器擴充功能？它們提供了什麼功能？ + +### 安裝擴充功能 + +在你建立擴充功能以前，先看看建制與安裝瀏覽器擴充功能的流程。每一種瀏覽器在管理套件上可能有些不同，Edge上的管理過程就與 Chrome 與 Firefox 相似： + +![Edge 瀏覽器開啟 edge://extensions 中的設定選單截圖](../images/install-on-edge.png) + +大體而言，過程為： + +- 指令 `npm run build` 建制你的管理套件 +- 在瀏覽器中的延伸模組區點擊右上方的「更多設定」按鈕 +- 如果這是新的套件，選擇 `load unpacked` 從資料夾上傳新的擴充套件(在我們的例子中， `/dist` ) +- 如果這是已安裝的套件，點擊 `reload` 按鈕 + +✅ 上述教學步驟讓你導入自己建立的擴充功能；若要安裝已公開的套件，你可以前往瀏覽器擴充功能商店，逛逛這些[商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home)並安裝你選擇的套件。 + +### 展開行動 + +你打算寫一套擴充功能來顯示你國家的碳足跡，顯示國家的能源使用量與可用能源量。套件內會有 API Key 來存取網頁 CO2 Signal 的 API。 + +**你需要：** + +- [一組 API key](https://www.co2signal.com/)：在網頁上輸入你的電子信箱，它會寄一組鑰匙給你 +- 給[Electricity Map](https://www.electricitymap.org/map)使用的[國家區域代碼](http://api.electricitymap.org/v3/zones) (舉個例子，在波士頓使用'US-NEISO') +- [程式碼](../../start)，下載 `start` 資料夾，你需要修改裡面的程式碼檔案。 +- [NPM](https://www.npmjs.com)，NPM 是一套軟體包管理工具，在本地安裝的軟體包會被列在 `package.json` 檔案中，成為網頁利用的資源。 + +✅ 從[這個優質的學習套件](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)中，學習更多關於軟體包管理。 + +花點時間看一下程式檔案結構 + +dist + -|manifest.json (defaults set) + -|index.html (前端 HTML) + -|background.js (background JS) + -|main.js (built JS) +src + -|index.js (你的 JS 程式碼) + +✅ 當你取得你的 API Key 與國家區域代碼後，紀錄在筆記中給之後的課程使用。 + +### 建立給擴充功能使用的 HTML + +這套擴充功能有兩個重點。一個是取得 API Key 與國家區域代碼： + +![在瀏覽器擴充功能中，顯示 API key與國家區域代碼的輸入欄截圖](../images/1.png) + +與顯示國家的碳排放量： + +![在瀏覽器擴充功能中，顯示 US-NEISO 地區碳排放量與石化燃料比例截圖](../images/2.png) + +讓我們開始建立輸入欄位的 HTML 與它的 CSS 吧。 + +在資料夾 `/dist` 中，建立輸入表單與結果顯示區域。在檔案 `index.html` 中，規劃表單區域： + +```HTML +
    +
    +

    New? Add your Information

    +
    +
    + + +
    +
    + + +
    + +
    +``` +這個表單儲存你的輸入資訊並儲存到 Local Storage 中。 + +接下來，建立結果輸出區。在 form tag 後面新增一些 divs： + +```HTML +
    +
    loading...
    +
    +
    +
    +

    Region:

    +

    Carbon Usage:

    +

    Fossil Fuel Percentage:

    +
    + +
    +``` +這時，你可以試著建制這個專案。請確保安裝擴充套建的軟體依賴套件，輸入： + +``` +npm install +``` + +這項指令會使用 NPM (Node Package Manager)安裝 webpack 給你的擴充套件建制過程中使用。Webpack 是一個處理程式編譯的工具組合包。你可以在 `/dist/main.js` 看到它的執行後的結果 ── 程式碼已經被打好包了。 + +到目前為止，擴充套件已經被建制，如果你導入此套件到 Edge 中也能完整地呈現出來。 + +恭喜你，你已經達成建立擴充套件的第一步驟。在接下來的課程中，你會新增更多功能，讓它更加的實用。 + +--- + +## 🚀 挑戰 + +逛逛瀏覽器擴充商店，安裝一套擴充功能到你的瀏覽器中。你可以查看它的檔案群。你發現了什麼？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24) + +## 複習與自學 + +這堂課中你學到了一些瀏覽器的歷史。趁這個機會閱讀更多它的歷史，學習網際網路的發明者是如何構思網路的應用。這邊有一些實用的網頁： + +[瀏覽器的歷史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) + +[網路的歷史](https://webfoundation.org/about/vision/history-of-the-web/) + +[與 Tim Berners-Lee 的訪談](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want) + +## 作業 + +[重新造型你的套件](assignment.zh-tw.md) + diff --git a/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md b/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md new file mode 100644 index 00000000..2b7dc4d9 --- /dev/null +++ b/5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 重新造型你的套件 + +## 簡介 + +本課程的擴充套件已經包含了造型設定，但你不需要非得使用它們。改寫它的 CSS 檔來重新構築擴充插件的造型。 + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | -------------------------- | -------------- | ------------ | +| | 新造型能正常地套用在程式中 | 造型規劃不完整 | 套件出現問題 | \ No newline at end of file diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md new file mode 100644 index 00000000..a11d2c09 --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md @@ -0,0 +1,224 @@ +# 瀏覽器擴充功能專案 Part 1：呼叫 API，使用 Local Storage + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25) + +### 大綱 + +在這堂課中，藉由傳遞你的擴充功能表單並顯示結果來呼叫 API。此外，你會了解如何儲存資料到瀏覽器的 Local Storage 中給未來使用。 + +✅ 請參考下列程式碼段，加入程式碼到檔案適當的位置 + +### 設定控制擴充功能的元素： + +現在你有已建好的 HTML 表單與結果區 `
    `。接下來，你需要在 `/src/index.js` 做一些處理，一點一點地構築出你的擴充功能。參考[前一堂課程](../../1-about-browsers/translations/README.zh-tw.md)來設置你的專案與了解建制過程。 + +處理 `index.js` 檔案，建立一些 `const` 變數來儲存不同用途的數值： + +```JavaScript +// 表單區域 +const form = document.querySelector('.form-data'); +const region = document.querySelector('.region-name'); +const apiKey = document.querySelector('.api-key'); + +// 結果區域 +const errors = document.querySelector('.errors'); +const loading = document.querySelector('.loading'); +const results = document.querySelector('.result-container'); +const usage = document.querySelector('.carbon-usage'); +const fossilfuel = document.querySelector('.fossil-fuel'); +const myregion = document.querySelector('.my-region'); +const clearBtn = document.querySelector('.clear-btn'); +``` + +這些區域會被 CSS class 給參考，它們在前一堂課中已經被你設定好了。 + +### 新增監聽者 + +接下來，新增提交與重置表單的事件監聽者與按鈕，讓使用者能提交表單或是點擊重置鈕時，事件會發生。新增初始化呼叫處理到應用中，在檔案的最下方新增： + +```JavaScript +form.addEventListener('submit', (e) => handleSubmit(e)); +clearBtn.addEventListener('click', (e) => reset(e)); +init(); +``` + +✅ 注意提交事件與點擊事件的寫法，事件是如何被傳入到 handleSubmit 或是 reset 函式中的。你能在不改變功能的情況下，改寫成較長的格式嗎？你比較喜歡哪一種寫法？ + +### 建立 init() 函式與 reset() 函式： + +現在你需要建立函式 init()，處理應用程式的初始化部分： + +```JavaScript +function init() { + //如果任何東西存在 localStorage 中，取出來 + const storedApiKey = localStorage.getItem('apiKey'); + const storedRegion = localStorage.getItem('regionName'); + + //設定 icon 為通用綠色 + //todo + + if (storedApiKey === null || storedRegion === null) { + //如果沒有 keys，顯示表單 + form.style.display = 'block'; + results.style.display = 'none'; + loading.style.display = 'none'; + clearBtn.style.display = 'none'; + errors.textContent = ''; + } else { + //localStorage 有 saved keys/regions，顯示結果 + displayCarbonUsage(storedApiKey, storedRegion); + results.style.display = 'none'; + form.style.display = 'none'; + clearBtn.style.display = 'block'; + } +}; + +function reset(e) { + e.preventDefault(); + //只清除 local storage 國家區域代碼 + localStorage.removeItem('regionName'); + init(); +} + +``` +在函式中，有一些有趣的邏輯。閱讀它們，你看出發生什麼事嗎？ + +- 兩個 `const` 被設定為檢查用戶是否有儲存 APIKey 與國家區域代碼在 local storage 中。 +- 若兩者皆為 null，將造型設為 'block' 來顯示表單 +- 隱藏 results、loading 與 clearBtn，設定 error 文字為空字串 +- 若存在 key 與代碼，開始新的流程： + - 呼叫 API 取得碳排放資訊 + - 隱藏結果區域 + - 隱藏表單 + - 顯示重置按鈕 + +在下一步之前，你可以學習一些瀏覽器的重要成員：[LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。 LocalStorage 是瀏覽器儲存字串的有效方法，以 `key-value` 配對兩兩一組。這種儲存型態可以被 JavaScript 管理並控制瀏覽器的資料。LocalStorage 沒有期限，而另一款網頁儲存 SessionStorage 會在瀏覽器關閉時清除內容。不同的儲存方式有各自的優缺點。 + +> 注意 ── 你的瀏覽器擴充套件有自己的 local storage。主瀏覽器視窗是不同的個體，兩者會做各自的行為。 + +你設定 APIKey 紀錄字串數值。你可以在 Edge 瀏覽器上「檢查」一個網頁 (右鍵瀏覽器來檢查)，在 Applications 標籤中觀察儲存區的使用情況。 + +![Local storage 區域](../images/localstorage.png) + +✅ 想想那些情況你不需要儲存資料到 LocalStorage 中。總體而言，將 API Keys 放在 LocalStorage 是個很糟糕的想法！你知道為什麼嗎？在我們的例子中，我們的應用程式是以教學為目的，並不會發布在應用程式商店中，所以我們選擇此中處理方式。 + +你可以發現網頁 API 能處理 LocalStorage，使用 `getItem()`、`setItem()` 或是 `removeItem()`。它們廣泛地支援不同的瀏覽器。 + +在建立函式 `init()` 中的函式 `displayCarbonUsage()` 之前，我們先建立表單提交初始化的功能。 + +### 處理表單提交 + +建立函式 `handleSubmit`，接收事件參數 `(e)`。終止網頁移轉的事件(在本例子中，我們終止瀏覽器刷新的處理)並呼叫新的函式 `setUpUser`，傳送參數 `apiKey.value` 與 `region.value`。藉由這個方式，你能將兩個初始表單的數值正確地移轉到適合的位置。 + +```JavaScript +function handleSubmit(e) { + e.preventDefault(); + setUpUser(apiKey.value, region.value); +} +``` +✅ 刷新你的記憶 ── 上堂課中的 HTML 檔案開頭有兩個輸入區域，它們的 `values` 被存到 `const` 中，並且被定為 `required`，表示瀏覽器禁止使用者輸入空值。 + +### 設定使用者 + +來到函式 `setUpUser`，這裡你能找到 apiKey 與 regionName 被存到 Local Storage 中。新增函式： + +```JavaScript +function setUpUser(apiKey, regionName) { + localStorage.setItem('apiKey', apiKey); + localStorage.setItem('regionName', regionName); + loading.style.display = 'block'; + errors.textContent = ''; + clearBtn.style.display = 'block'; + //建立初始化呼叫 + displayCarbonUsage(apiKey, regionName); +} +``` +這個函式設定當 API 被呼叫時，顯示讀取訊息。到這裡，你即將建立這個擴充功能專案最重要的函式！ + +### 顯示碳排放量 + +最後，是時候查詢 API 了！ + +在前往下一步前，我們先來討論何謂 API。API，[Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)，是網頁開發者工具箱內最重要的成員。它們提供程式標準的互動模式與溝通介面，舉例來說，如果你建立一個需要存取資料庫的網頁，資料庫方可能就有人建立了 API 供你使用。API 有各式各樣的種類，最普遍使用的為[REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)。 + +✅ 'REST' 全名為 'Representational State Transfer'，提供各式各樣 URL 形式來抓取資料。對網路開發者的 API 種類做一點研究，什麼形式的 API 最吸引你？ + +這條函式中有一個重要到值得紀錄的事情。第一點為[關鍵字 `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)。讓你的函式非同步地執行，在行為完成前做等待，譬如資料被回傳。 + +這裡有一個簡短的影片介紹 `async`： + +[![Async 與 Await 處理 promises 物件](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async 與 Await 處理 promises 物件") + +> 點擊上方圖片以觀賞關於 async/await 的影片。 + +建立新的函式來詢問 C02Signal 的 API： + +```JavaScript +import axios from '../node_modules/axios'; + +async function displayCarbonUsage(apiKey, region) { + try { + await axios + .get('https://api.co2signal.com/v1/latest', { + params: { + countryCode: region, + }, + headers: { + 'auth-token': apiKey, + }, + }) + .then((response) => { + let CO2 = Math.floor(response.data.data.carbonIntensity); + + //calculateColor(CO2); + + loading.style.display = 'none'; + form.style.display = 'none'; + myregion.textContent = region; + usage.textContent = + Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)'; + fossilfuel.textContent = + response.data.data.fossilFuelPercentage.toFixed(2) + + '% (percentage of fossil fuels used to generate electricity)'; + results.style.display = 'block'; + }); + } catch (error) { + console.log(error); + loading.style.display = 'none'; + results.style.display = 'none'; + errors.textContent = 'Sorry, we have no data for the region you have requested.'; + } +} +``` + +這是一個挺大的函式，發生了什麼事？ + +- 遵循程式實踐過程，你使用關鍵字 `async` 讓函式非同步地作行為。函式內的 `try/catch` 區塊會在 API 回傳資料時回傳 promise 物件。因為我們無法控制 API 會多快地回應訊息(甚至無法回應訊息！)，你需要處理這種不確定性的時序關係。 +- 藉由提供 API Key 訪問 co2signal API 以取得你的地區資料。要使用這把鑰匙，你必須在網頁標頭中新增認證參數。 +- 當 API 回應時，你將各種物件填入回傳的數值，並輸出到畫面上中。 +- 如果發生錯誤，或沒有結果產生，輸出錯誤訊息。 + +✅ 非同步程式設計是一種實用的工具。閱讀[更多使用方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)設定非同步程式的程式碼。 + +恭喜你！當你建制你的專案(`npm run build`)並在瀏覽器上刷新功能，你有個可以運作的應用套件了！現在只差圖示無法正常顯示，我們會在下一堂課中修正它。 + +--- + +## 🚀 挑戰 + +我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26) + +## 複習與自學 + +這堂課你學會關於 LocalStorage 與 API，它們對資深網頁開發者提供很大的幫助。你能想想這兩樣東西如何彼此相互合作呢？想想你會如何建構你的網頁，讓 API 得以使用你所儲存的資料。 + +## 作業 + +[認領一項 API](assignment.zh-tw.md) + diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md new file mode 100644 index 00000000..c40fea7c --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md @@ -0,0 +1,11 @@ +# 認領一項 API + +## 大綱 + +API 可以是很好玩的。這裡有[許多公開 API 的清單](https://github.com/public-apis/public-apis)。挑選一項 API，建立一個網頁擴充功能來解決問題。問題可以很小，如找不到足夠的寵物照片，這時你可以嘗試使用[dog CEO API](https://dog.ceo/dog-api/))；或是解決更大問題。好好享受吧！ + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | --------------------------------------------- | ------------------------ | ------------ | +| | 使用上述清單內的 API 建立完整的瀏覽器擴充功能 | 建立部分的瀏覽器擴充功能 | 套件存在問題 | \ No newline at end of file diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md new file mode 100644 index 00000000..93ea7a7a --- /dev/null +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh.tw.md @@ -0,0 +1,160 @@ +# 瀏覽器擴充功能專案 Part 1：學習背景工作與效能 + +## 課前測驗 + +[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27) + +### 大綱 + +在前兩堂課程中，你學會如何建立表單、顯示 API 回覆的資料在結果區塊中，這是網頁處理網頁資訊的標準行為。你甚至學會了如何非同步性地抓取資料。你的擴充套件就快完成了。 + +它只剩管理背景工作：包括刷新套件的圖示顏色，我們來討論瀏覽器是如何處理這類的工作。也讓我們探討你所建立的網頁，瀏覽器會多有效地處理其中的內容。 + +## 網頁處理效能的基礎 + +> "網頁處理效能攸關兩件事：網頁多快地載入，與程式多快地執行。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) + +關於如何讓你的網頁能快速地運作在各類裝置、各個使用者以及各種情況，是一件難以想像的龐大主題。這裡有一些要點確保你在開發網頁或是擴充功能時，銘記在心。 + +第一件事為確保網頁收集關於網頁效能的資料，在瀏覽器的開發者工具中可以實現它。在 Edge 中，選擇「設定及更多」按鈕(瀏覽器上三個點的圖示)，並選擇更多工具 > 開發人員工具並開啟 Performance 分頁。你也可以使用鍵盤快捷鍵，Windows 上的 `Ctrl` + `Shift` + `I` 與 Mac 上的 `Option` + `Command` + `I` 來開啟開發人員工具。 + +Performance 分頁包括了效能分析工具。開啟一個網頁，例如 https://www.microsoft.com，點擊 'Record' 按鈕並重新整理網頁。停止錄製後你就能取得網頁的 'script'、'render' 與 'paint' 的過程與資訊： + +![Edge 性能分析工具](../images/profiler.png) + +✅ 造訪[Microsoft 文件](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)觀看 Edge 的 Performance 分頁資訊 + +> 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。 + +選擇一樣網頁在載入時，時間列中出現的事件物件。 + +觀看它的總覽面板並截圖你的網頁效能。 + +![Edge 性能分析工具截圖](../images/snapshot.png) + +檢查 Event Log 面板，是否有網頁事件花超過 15 毫秒： + +![Edge event log](../images/log.png) + +✅ 了解你的性能分析工具！在這個網頁中，開啟開發者工具，檢查是否有任何 bottleneck。什麼是載入最久的物件？哪個又是最快的？ + +## 效能分析 + +總體而言，每一位網頁開發者一定要注意一些「有問題的地方」，避免在發布作品時有令人意想不到的驚喜。 + +**資產(Asset)大小**：過去幾年來，網頁「變重」了，也因此變慢了。有些負擔來自於圖片的使用。 + +✅ 查詢[Internet Archive](https://httparchive.org/reports/page-weight)，看看過去的網頁負擔等資訊。 + +一個好的習慣是確保你的圖片有做最佳化，呈現合理的檔案大小及解析度影像給你的使用者。 + +**DOM 查找元素(Traversal)**：瀏覽器必須依照你的程式碼建立 Document Object Model，請確保你的 tags 最小化，網頁只使用必須的功能與造型。另外，過量的網頁 CSS 也可以被最佳化，舉例來說，造型樣板只用在單頁上，而非全域上。 + +**JavaScript**：每一位 JavaScript 開發者會觀察 'render-blocking' 腳本，它會在 DOM 查找與瀏覽器呈現前被載入好。請考慮使用 `defer` 在你的程式碼中，我們的盆栽盒專案就有實踐這行。 + +✅ 在[網頁測速網](https://www.webpagetest.org/)上測試一些網頁，學習確認網頁效能的基本檢查。 + +現在你了解瀏覽器如何呈現你所提供的資產，我們來看看我們的擴充功能最後需要補齊的項目： + +### 建立函式計算顏色 + +編輯 `/src/index.js`，新增函式 `calculateColor()` 在一系列為了 DOM 存取的 `const` 變數之後： + +```JavaScript +function calculateColor(value) { + let co2Scale = [0, 150, 600, 750, 800]; + let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; + + let closestNum = co2Scale.sort((a, b) => { + return Math.abs(a - value) - Math.abs(b - value); + })[0]; + console.log(value + ' is closest to ' + closestNum); + let num = (element) => element > closestNum; + let scaleIndex = co2Scale.findIndex(num); + + let closestColor = colors[scaleIndex]; + console.log(scaleIndex, closestColor); + + chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); +} +``` + +發生了什麼事？你傳遞了 API 回傳的二氧化碳濃度數值，計算出它最適合對應的顏色矩陣索引位置。之後，你將這個顏色數值傳給了 chrome runtime。 + +chrome.runtime 有[一個 API](https://developer.chrome.com/extensions/runtime)處理所有的背景工作，你的擴充套件借助了此功能： + +> "在應用程式中，使用 chrome.runtime API 來接收背景頁面，回傳關於 manifest 的資訊，監聽並回應事件。你也可以利用此 API 轉換 URL 的相對路徑成絕對路徑。" + +✅ 如果你正打算開發此專案給 Edge 瀏覽器上使用，你會訝異你使用的是 chrome API。新的 Edge 瀏覽器執行在 Chromium browser 引擎上，所以你也能使用這些工具。 + +> 注意，如果你想要剖析瀏覽器擴充功能，請在擴充套件上執行開發者工具，它與瀏覽器主視窗為不同的個體。 + +### 設定圖示預設顏色 + +現在，在函式 `init()` 中，利用呼叫 chrome `updateIcon` 設定圖示顏色為通用綠： + +```JavaScript +chrome.runtime.sendMessage({ + action: 'updateIcon', + value: { + color: 'green', + }, +}); +``` +### 呼叫函式、執行呼叫 + +接下來，在 C02Signal API 回傳的 promise 物件下方呼叫函式： + +```JavaScript +//let CO2... +calculateColor(CO2); +``` +最後，在檔案 `/dist/background.js` 中，新增事件監聽者給這些背景行為的呼叫： + +```JavaScript +chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { + if (msg.action === 'updateIcon') { + chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + } +}); +//參考 energy lollipop extension，很好的程式！ +function drawIcon(value) { + let canvas = document.createElement('canvas'); + let context = canvas.getContext('2d'); + + context.beginPath(); + context.fillStyle = value.color; + context.arc(100, 100, 50, 0, 2 * Math.PI); + context.fill(); + + return context.getImageData(50, 50, 100, 100); +} +``` +在此程式中，你建立了事件監聽者給任何前到背景工作管理者的訊息。若 'updateIcon' 被呼叫，則接下來的程式會被執行，利用 Canvas API 繪製出對應顏色的圖示。 + +✅ 你會學習更多關於 Canvas API 在往後的[太空遊戲課程](../../6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md)。 + +現在，重新建制你的擴充功能(`npm run build`)，刷新並運行你的套件，觀察圖示的顏色變化。現在是時候去跑腿或是洗碗嗎？現在你知道了！ + +恭喜你，你已經建立了一款實用的瀏覽器擴充功能，並學到更多瀏覽器的運作方式與監測它的效能分析。 + +--- + +## 🚀 挑戰 + +調查一些悠久的開源網站，並根據它們的 GitHub 歷史，你能分辨它們過去幾年以來效能上的調整嗎？什麼它們是共同的痛點？ + +## 課後測驗 + +[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28) + +## 複習與自學 + +請考慮註冊[performance newsletter](https://perf.email/) + +調查瀏覽器測量網頁效能的方法，查看開發者工具內的 Performance 分頁。你能找到什麼巨大的差別嗎？ + +## 作業 + +[分析網頁效能](assignment.zh-tw.md) + diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md new file mode 100644 index 00000000..8f733b7e --- /dev/null +++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md @@ -0,0 +1,9 @@ +# 分析網頁效能 + +請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。 + +## 學習評量 + +| 作業內容 | 優良 | 普通 | 待改進 | +| -------- | ---------------------------------- | -------------- | ------------ | +| | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 | \ No newline at end of file diff --git a/5-browser-extension/translations/README.zh-tw.md b/5-browser-extension/translations/README.zh-tw.md new file mode 100644 index 00000000..79fb9e0e --- /dev/null +++ b/5-browser-extension/translations/README.zh-tw.md @@ -0,0 +1,28 @@ +# 建立瀏覽器擴充功能 + +建立瀏覽器擴充功能是個好玩且有趣的方式來思考應用程式的執行效能，包含各式各樣類型的網頁資產。這堂學習模組介紹了瀏覽器運作方式、如何架設擴充功能、建立表單、呼叫 API、使用 Local Storage 和測量網頁效能的方法並增進它。 + +你會建立一個支援在 Edge、Chrome 與 Firefox 的瀏覽器擴充功能。這個擴充功能就像小型的網頁，專門滿足特定課題：利用[C02 Signal API](https://www.co2signal.com)檢查地區的電力使用與碳排濃度，回傳地區的碳足跡。 + +這款特設擴充功能允許使用者在輸入完 API Key 與國家地區代碼到表單後，取得當地電力使用量與其他資訊，決定使用者後續的行為。舉例來說，在地區高電力用量時，你可能會延後烘衣機的使用(增加碳排)。 + +### 主題 + +1. [關於瀏覽器](../1-about-browsers/translations/README.zh-tw.md) +2. [表單與 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md) +3. [背景工作與效能](../3-background-tasks-and-performance/translations/README.zh-tw.md) + +### 成就 + +![綠能瀏覽器擴充功能](extension-screenshot.png) + +## 參與人員 + +網頁碳排放追蹤的發想出自於 Asim Hussain，微軟綠能雲端倡導小組的領導人與[Green Principles](https://principles.green/)的作者。這源自於一個[網頁專案](https://github.com/jlooper/green)。 + +擴充功能的結構受[Adebola Adeniran 的 COVID 擴充功能](https://github.com/onedebos/covtension)啟發。 + +「點」圖示系統的概念參考[Energy Lollipop](https://energylollipop.com/)的加州排放擴充功能。 + +這些課程由 [Jen Looper](https://www.twitter.com/jenlooper) 用滿滿的 ♥️ 來編寫。 + From aeb23175dd2c0d82d59ba2dd77c3b6feea647c35 Mon Sep 17 00:00:00 2001 From: Noah Date: Fri, 5 Mar 2021 18:58:37 +0100 Subject: [PATCH 11/65] translate 1.0 to Dutch --- .../translations/README.nl.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 1-getting-started-lessons/translations/README.nl.md diff --git a/1-getting-started-lessons/translations/README.nl.md b/1-getting-started-lessons/translations/README.nl.md new file mode 100644 index 00000000..58cfb467 --- /dev/null +++ b/1-getting-started-lessons/translations/README.nl.md @@ -0,0 +1,17 @@ +# Aan de slag met webontwikkeling + +In dit deel van het curriculum maak je kennis met niet-projectgebaseerde concepten die belangrijk zijn om een professionele ontwikkelaar te worden. + +### Onderwerpen + +1. [Inleiding tot programmeertalen en tools van het vak](../1-intro-to-programming-languages/translations/README.nl.md) +2. [Basisprincipes van GitHub](../2-github-basics/translations/README.nl.md) +3. [Basisprincipes van toegankelijkheid](../3-accessibility/translations/README.nl.md) + +### Credits + +Basisprincipes van toegankelijkheid is geschreven met ♥ door [Christopher Harrison](https://twitter.com/geektrainer) + +Inleiding tot GitHub is geschreven met ♥ ️door [Floor Drees](https://twitter.com/floordrees) + +Inleiding tot programmeertalen en tools van het vak is geschreven met ♥ ️door [Jasmine Greenaway](https://twitter.com/paladique) From 861e5966b5f6402fa8c50d5c729ef7bf6cc7b91e Mon Sep 17 00:00:00 2001 From: Noah Date: Fri, 5 Mar 2021 18:59:38 +0100 Subject: [PATCH 12/65] translate 1.1 to Dutch --- .../translations/assignment.nl.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md new file mode 100644 index 00000000..157eb54d --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md @@ -0,0 +1,11 @@ +# De Documenten lezen + +## Instructies + +Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten. + +## Rubriek + +Voorbeeldig | Voldoende | Moet Worden Verbeterd +--- | --- | -- | +|Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken | \ No newline at end of file From 2991eb7390e1be72594b7fc53b3e0259c5cd6281 Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 11:46:56 +0100 Subject: [PATCH 13/65] translate 1.2 to Dutch --- .../2-github-basics/translations/README.nl.md | 318 ++++++++++++++++++ 1 file changed, 318 insertions(+) create mode 100644 1-getting-started-lessons/2-github-basics/translations/README.nl.md diff --git a/1-getting-started-lessons/2-github-basics/translations/README.nl.md b/1-getting-started-lessons/2-github-basics/translations/README.nl.md new file mode 100644 index 00000000..aad1d862 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.nl.md @@ -0,0 +1,318 @@ +# Inleiding van GitHub + +Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code. + +![Intro to GitHub](../images/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz voorafgaand aan de lezing +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) + +## Inleiding + +In deze les behandelen we: + +- het volgen van het werk dat u op uw machine doet +- samen met anderen aan projecten werken +- hoe u kunt bijdragen aan open source software + +### Vereisten + +Voordat u begint, moet u controleren of Git is geïnstalleerd. In het terminal typ: +`git --version` + +Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens uw lokale Git-profiel in de terminal in: +* `git config --global user.name "uw-naam"` +* `git config --global user.email "uw-email"` + +Om te controleren of Git al is geconfigureerd, kunt u het volgende typen: +`git config --list` + +U heeft ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code) en u moet uw terminal openen (of: command prompt). + +Navigeer naar [github.com](https://github.com/) en maak een account aan als u dat nog niet heeft gedaan, of log in en vul uw profiel in. + +✅ GitHub is niet de enige coderepository ter wereld; er zijn anderen, maar GitHub is de bekendste + +### Voorbereiding + +U heeft zowel een map met een codeproject op uw lokale computer (laptop of pc) als een openbare repository op GitHub nodig, die als voorbeeld zal dienen voor hoe u kunt bijdragen aan de projecten van anderen. + +--- + +## Code beheer + +Laten we zeggen dat u lokaal een map hebt met een of ander codeproject en u wilt beginnen met het volgen van uw voortgang met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan uw toekomstige zelf. Als u uw commitberichten dagen of weken of maanden later leest, zult u u kunnen herinneren waarom u een beslissing heeft genomen, of een wijziging "terugdraaien" - dat wil zeggen, wanneer u goede "commitberichten" schrijft. + +### Taak: maak een repository en leg code vast + +1. **Maak een repository op GitHub**. Zoek op GitHub.com, in het tabblad repositories, of in de navigatiebalk rechtsboven, de knop **new repo**. + + 1. Geef uw repository (map) een naam + 1. Selecteer **create repository**. + +1. **Navigeer naar uw werkmap**. Schakel in uw terminal naar de map (ook bekend als de directory) die u wilt beginnen met volgen. Typ: + + ```bash + cd [naam van uw map] + ``` + +1. **Initialiseer een git-repository**. In uw project, typ: + + ```bash + git init + ``` + +1. **Controleer de status**. Om de status van uw repository te controleren, typ: + + ```bash + git status + ``` + + de output kan er ongeveer zo uitzien: + + ```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 + ``` + + Typisch vertelt een `git status` commando u dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden naar de repo of bevat veranderingen die u misschien wilt behouden. + +1. **Voeg alle bestanden toe voor tracking** + Dit wordt ook wel staging-bestanden/ bestanden toevoegen aan het staging-gebied genoemd. + + ```bash + git add . + ``` + + Het `git add` plus `.` argument geeft aan dat al uw bestanden en wijzigingen voor tracking geselecteerd zijn. + +1. **Voeg geselecteerde bestanden toe voor tracking** + + ```bash + git add [bestands- of mapnaam] + ``` + + Dit helpt ons om alleen geselecteerde bestanden aan het staging-gebied toe te voegen als we niet alle bestanden tegelijk willen vastleggen. + +1. **Unstage alle bestanden** + + ```bash + git reset + ``` + + Dit commando helpt ons om alle bestanden tegelijk te unstagen. + +1. **Unstage een bepaald bestand** + + ```bash + git reset [bestands- of mapnaam] + ``` + + Dit commando helpt ons om alleen een bepaald bestand tegelijk te unstagen dat we niet willen opnemen voor de volgende commit. + +1. **Uw werk voortzetten**. Op dit punt heeft u de bestanden toegevoegd aan een zogenaamd _staging-gebied_. Een plek waar Git uw bestanden bijhoudt. Om de wijziging permanent te maken, moet u de bestanden _commiten_. Om dit te doen maakt u een _commit_ aan met het `git commit` commando. Een _commit_ vertegenwoordigt een besparingspunt in de geschiedenis van uw repo. Typ het volgende om een _commit_ te maken: + + ```bash + git commit -m "eerste commit" + ``` + + Dit commit al uw bestanden door het bericht "first commit" toe te voegen. Voor toekomstige commitberichten wilt u meer beschrijvend zijn in uw beschrijving om over te brengen wat voor soort wijziging u heeft aangebracht. + +1. **Verbind uw lokale Git-repo met GitHub**. Een Git-repo is goed op uw computer, maar op een gegeven moment wilt u ergens een back-up van uw bestanden hebben en ook andere mensen uitnodigen om met u aan uw opslagplaats te werken. Een geweldige plek om dat te doen is GitHub. Onthoud dat we al een repo op GitHub hebben gemaakt, dus het enige dat we hoeven te doen, is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` zal precies dat doen. Typ de volgende commando: + + > Let op: voordat u de opdracht typt, gaat u naar uw GitHub-repo-pagina om de repository-URL te vinden. U gebruikt het in het onderstaande commando. Vervang `repository_name` door uw GitHub-URL. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Dit creëert een _remote_, of verbinding, genaamd "origin", wijzend naar de GitHub-repository die u eerder heeft gemaakt. + +1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heeft u een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals zo: + + ```bash + git push -u origin main + ``` + + Dit stuurt uw commits in uw "main" tak naar GitHub. + +1. **Om meer wijzigingen toe te voegen**. Als u door wilt gaan met het aanbrengen van wijzigingen en ze naar GitHub wilt pushen, hoeft u alleen maar de volgende drie commando's te gebruiken: + + ```bash + git add . + git commit -m "typ hier uw commitbericht" + git push + ``` + + > Tip, misschien wilt u ook een `.gitignore`-bestand adopteren om te voorkomen dat bestanden die u niet wilt volgen, verschijnen op GitHub - zoals dat notitiesbestand dat u opslaat in dezelfde map maar geen plaats heeft op een openbare repository. U kunt sjablonen voor `.gitignore` bestanden vinden op [.gitignore templates](https://github.com/github/gitignore). + +#### Commit berichten + +Een geweldige onderwerpregel voor een commitbericht van Git maakt de volgende zin compleet: +Indien toegepast, zal deze commit + +Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" noch "veranderingen". +Net als in het onderwerp, gebruik in het lichaam (optioneel) ook de imperatieve tegenwoordige tijd. Het lichaam moet de motivatie voor de verandering opnemen en dit contrasteren met eerder gedrag. U legt het `waarom` uit, niet het `hoe`. + +✅ Neem een paar minuten de tijd om rond GitHub te surfen. Kunt u een echt geweldig commitbericht vinden? Kunt u een echt minimale vinden? Welke informatie is volgens u het belangrijkst en nuttigst om over te brengen in een commitbericht? + +### Taak: Samenwerken + +De belangrijkste reden om dingen op GitHub te zetten, was om het mogelijk te maken om samen te werken met andere ontwikkelaars. + +## Samen met anderen aan projecten werken + +Navigeer in uw repository naar `Insights > Community` om te zien hoe uw project zich verhoudt tot aanbevolen communitystandaarden. + + Hier zijn enkele dingen die uw GitHub-repo kunnen verbeteren: + - **Omschrijving**. Heeft u een beschrijving voor uw project toegevoegd? + - **README**. Heeft u een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/). + - **Richtlijn voor bijdragen**. Heeft uw project [richtlijnen voor bijdragen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Gedragscode**. Een [Gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licentie**. Misschien nog belangrijker, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +Al deze middelen zullen nieuwe teamleden helpen. En dat zijn typisch het soort dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar uw code kijken, om erachter te komen of uw project de juiste plek is om hun tijd door te brengen. + +✅ README-bestanden, hoewel ze wat tijd nodig hebben om voor te bereiden, worden vaak genegeerd door drukke beheerders. Kunt u een voorbeeld vinden van een bijzonder beschrijvende? Opmerking: er zijn enkele [tools om goede README's te maken](https://www.makeareadme.com/) die u misschien zou willen proberen. + +### Taak: voeg een code samen + +Documenten voor bijdragen helpen mensen bij te dragen aan het project. Het legt uit wat voor soort bijdragen u zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te dragen aan uw repo op GitHub: + + +1. **Uw repo vorken** Waarschijnlijk wilt u dat mensen uw project _vorken_ (forking). Vorken betekent het maken van een replica van uw repository op hun GitHub-profiel. +1. **Kloon**. Van daaruit zullen ze het project naar hun lokale computer klonen (clone). +1. **Maak een tak**. U zult ze willen vragen om een _tak_ voor hun werk te creëren (branch). +1. **Richt hun verandering op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - op die manier is de kans groter dat u hun werk kan _samenvoegen_ (merge). Stelt u voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als u slechts 2 van de 3 of 1 van de 3 wijzigingen wilt of kunt implementeren? + +✅ Stelt u een situatie voor waarin takken bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke use-cases kunt u bedenken? + +> Let op: wees de verandering die u in de wereld wilt zien, en maak ook takken voor uw eigen werk. Alle commits die u maakt, worden gemaakt op de tak waar u momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke tak dat is. + +Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager de repo al _gevorkt_ en _gekloond_ heeft, zodat ze een Git-repo hebben klaar om aan te werken, op hun lokale computer: + +1. **Maak een tak**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen: + + ```bash + git branch [taknaam] + ``` + +1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git checkout`: + + ```bash + git checkout [taknaam] + ``` + +1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's: + + ```bash + git add . + git commit -m "mijn veranderingen" + ``` + + Zorg ervoor dat u uw commit een goede naam geeft, zowel voor u als voor de beheerder van de repo waarmee u helpt. + +1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's: + + ```bash + git checkout main + git pull + ``` + + Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit: + + ```bash + git checkout [taknaam] + git merge main + ``` + + Dit brengt alle wijzigingen van `main` naar uw tak en hopelijk kunt u gewoon doorgaan. Als dit niet het geval is, zal VS Code u vertellen waar Git _in de war_ is en verandert u gewoon de betrokken bestanden om te zeggen welke inhoud het meest accuraat is. + +1. **Stuur uw werk naar GitHub**. Het verzenden van uw werk naar GitHub betekent twee dingen. Uw tak naar uw repo pushen en vervolgens een PR, Pull Request openen. + + ```bash + git push --set-upstream origin [taknaam] + ``` + + Het bovenstaande commando maakt de tak op uw gevorkte repo. + +1. **Open een PR**. Vervolgens wilt u een PR openen. U doet dat door naar de gevorkte repo op GitHub te navigeren. U ziet een indicatie op GitHub waar het vraagt of u een nieuwe PR wilt maken, u klikt erop en u wordt naar een interface geleid waar u de titel van het commitbericht kunt wijzigen, geef het een meer geschikte beschrijving. Nu zal de beheerder van de repo die u heeft gevorkt deze PR zien en, _fingers gekruist_, zullen ze uw PR waarderen en _samenvoegen_. U bent nu een bijdrager, yay :) + +1. **Opruimen**. Het wordt als een goede gewoonte beschouwd om _op te ruimen_ nadat u met succes een PR hebt samengevoegd. U wilt zowel uw lokale tak opruimen als de tak die u naar GitHub hebt gepusht. Laten we het eerst lokaal verwijderen met het volgende commando: + + ```bash + git branch -d [taknaam] + ``` + + Zorg ervoor dat u naar de GitHub-pagina gaat voor de gevorkte repo en verwijder de externe tak die u er zojuist naartoe hebt gepusht. + +`Pull request` lijkt een gekke term, omdat u uw wijzigingen echt in het project wilt pushen. Maar de onderhouder (projecteigenaar) of het kernteam moet rekening houden met uw wijzigingen voordat u deze samenvoegt met de "main" tak van het project, dus u vraagt echt om een wijzigingsbesluit van een onderhouder. + +Een pull request is de plek om de verschillen die op een tak zijn geïntroduceerd te vergelijken en te bespreken met recensies, opmerkingen, geïntegreerde tests en meer. Een goed pull request volgt ongeveer dezelfde regels als een commitbericht. U kunt een verwijzing naar een probleem (issue) toevoegen in de issue tracker, bijvoorbeeld wanneer uw werk een probleem oplost. Dit doet u met een `#` gevolgd door het nummer van uw probleem. Bijvoorbeeld `# 97`. + +🤞Duimen dat alle controles slagen en de projecteigenaar(s) uw wijzigingen in het project samenvoegen🤞 + +Update uw huidige lokale werkende tak met alle nieuwe commits van de corresponderende remote tak op GitHub: + +`git pull` + +## Hoe u kunt bijdragen aan open source + +Laten we eerst een repository - of: repo - op GitHub zoeken die voor u interessant is en waaraan u een wijziging zou willen bijdragen. U zult de inhoud ervan naar uw machine kopiëren. + +✅ Een goede manier om 'beginnersvriendelijke' repos te vinden, is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Kopieer lokaal een repo](../images/clone_repo.png) + +Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "klonen" door HTTPS, SSH of de GitHub CLI (Command Line Interface) te gebruiken. + +Open uw terminal en kloon de repository op deze manier: +`git clone https://github.com/ProjectURL` + +Schakel naar de juiste map om aan het project te werken: +`cd ProjectURL` + +U kunt ook het hele project openen met [Codespaces](https://github.com/features/codespaces), GitHub's ingesloten code-editor /cloud-ontwikkelomgeving of [GitHub Desktop](https://desktop.github.com/). + +Ten slotte kunt u de code downloaden in een gecomprimeerde map. + +### Nog een paar interessante dingen over GitHub + +U kunt elke openbare repository op GitHub een ster geven, bekijken en/of "vorken". U kunt uw repositories met ster vinden in het vervolgkeuzemenu rechtsboven. Het is net als bladwijzers, maar dan voor code. + +Projecten hebben een issue tracker, meestal op GitHub in de "Issues" tab, tenzij anders aangegeven, waar mensen problemen bespreken die verband houden met het project. En op het tabblad Pull Requests bespreken en beoordelen mensen lopende wijzigingen. + +Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC. + +✅ Kijk eens rond in uw nieuwe GitHub-repo en probeer een paar dingen, zoals het bewerken van instellingen, het toevoegen van informatie aan uw repo en het maken van een project (zoals een Kanban-bord). U kunt veel doen! + +--- + +## 🚀 Uitdaging + +Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, vork code, maak takken en voeg wijzigingen samen. + +## Quiz na de lezing +[Quiz na de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) + +## Beoordeling en zelfstudie + +Lees meer over [bijdragen aan open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git-cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Oefenen, oefenen, oefenen. GitHub heeft geweldige leertrajecten beschikbaar via [lab.github.com](https://lab.github.com/): + +- [Eerste week op GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +U zult ook meer geavanceerde labs vinden. + +## Toewijzing + +Voltooi [de eerste week op GitHub-trainingslaboratorium](https://lab.github.com/githubtraining/first-week-on-github) From c78b161fec166567bcaeb7ebd6a9e80f2b3c012f Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 12:12:20 +0100 Subject: [PATCH 14/65] translate 1.3 assignment to Dutch --- .../3-accessibility/translations/assignment.nl.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 1-getting-started-lessons/3-accessibility/translations/assignment.nl.md diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md b/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md new file mode 100644 index 00000000..51698d55 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md @@ -0,0 +1,11 @@ +# Analyseer een niet-toegankelijke website + +## Instructies + +Identificeer een website waarvan u denkt dat deze NIET toegankelijk is, en maak een actieplan om de toegankelijkheid ervan te verbeteren. Je eerste taak zou zijn om deze site te identificeren, de manieren te beschrijven waarop je denkt dat deze ontoegankelijk is zonder analytische tools te gebruiken, en deze vervolgens door een Lighthouse-analyse te laten gaan. Neem de resultaten van deze analyse en maak een gedetailleerd plan met minimaal tien punten waaruit blijkt hoe de site kan worden verbeterd. + +## Rubriek + +| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | +| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- | +| studentenrapport | bevat paragrafen over hoe de site ontoereikend is, het Lighthouse-rapport vastgelegd als pdf, een lijst met tien punten die verbeterd kunnen worden, met details over hoe deze te verbeteren | ontbreekt 20% van de vereiste | ontbreekt 50% van de vereiste | \ No newline at end of file From 2a8ff3318a4c8b082fb3343ca07d68d4ce93882d Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 21:12:10 +0100 Subject: [PATCH 15/65] small language change --- .../translations/README.nl.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index f34f2d4e..a8ee6cbf 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -1,6 +1,6 @@ # Introductie van Programmeertalen en Bijbehorend Vakgereedschap -Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als web ontwikkelaar. +Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leert u over nuttige toepassingen die u helpen als web ontwikkelaar. ![Introductie Programmeren](../webdev101-programming.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) @@ -22,7 +22,7 @@ In deze les hebben we het over: Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*. -Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. +Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat u nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. ✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur? @@ -85,24 +85,24 @@ De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruike Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement. -✅ Je leert meer over het `if..else` statement in de volgende lessen. +✅ U leert meer over het `if..else` statement in de volgende lessen. ## Vakgereedschap [![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap") -In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele web ontwikkelaar carrière start. +In dit onderdeel leert u welke applicaties u wellicht handig vindt om mee te werken als u uw professionele web ontwikkelaar carrière start. Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken. ### Editors -Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijf je je code en soms run je daar ook je code. +Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijft u uw code en soms runt u daar ook uw code. Ontwikkelaars gebruiken editors ook om de volgende redenen: -- *Debugging* Het regel voor regel runnen van je code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen. -- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar je eigen smaak. +- *Debugging* Het regel voor regel runnen van uw code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen. +- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar uw eigen smaak. - *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden. - *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen. @@ -131,11 +131,11 @@ Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwik ### Command Line Applicaties -Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat je heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en je deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. +Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat u heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en u deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. ### Populaire Command Lines -Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat je gebruikt. +Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat u gebruikt. *💻 = is geïnstalleerd met het besturingssysteem.* @@ -173,7 +173,7 @@ Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de b - [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) - [Frontend Masters](https://frontendmasters.com/learn/) -✅ Doe wat onderzoek: Nu je de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer. +✅ Doe wat onderzoek: Nu u de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer. --- @@ -186,7 +186,7 @@ Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Jav ## Review & Zelfstudie -Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijg je een goed idee wat er voor nodig is om tekst in de browser te tonen. +Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijgt u een goed idee wat er voor nodig is om tekst in de browser te tonen. ## Opdracht From 2a99aedb42125c7d6eff52b8e3958a77ec2627b6 Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 23:12:48 +0100 Subject: [PATCH 16/65] fix some **bold typos** --- .../3-accessibility/translations/README.es.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-getting-started-lessons/3-accessibility/translations/README.es.md b/1-getting-started-lessons/3-accessibility/translations/README.es.md index 02e91081..063531f5 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -44,7 +44,7 @@ La accesibilidad es un tema relativamente extenso. Para ayudarlo, existen numero - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) -Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es ** siempre ** más fácil que volver a una página existente para hacerla accesible. +Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es **siempre** más fácil que volver a una página existente para hacerla accesible. ## Buenos principios de visualización @@ -82,7 +82,7 @@ Como era de esperar, los lectores de pantalla leen el texto del enlace de la mis > El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para obtener más información. -> ** NOTA ** Mientras estás a punto de leer, ** nunca ** debes crear enlaces que se parezcan al anterior. +> **NOTA** Mientras estás a punto de leer, **nunca** debes crear enlaces que se parezcan al anterior. Recuerde, los lectores de pantalla son una interfaz diferente de los navegadores con un conjunto diferente de características. @@ -115,7 +115,7 @@ Imagina la siguiente página: | Widget | [Descripción]('#') | [Orden]('#') | | Super widget | [Descripción]('#') | [Orden]('#') | -En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras * descripción * y * orden * repetidas sin contexto. +En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras *descripción* y *orden* repetidas sin contexto. Para admitir este tipo de escenarios, HTML admite un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos le permiten proporcionar información adicional a los lectores de pantalla. From d8a7536c7ea2c99d76439540e4381138527350aa Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 23:13:22 +0100 Subject: [PATCH 17/65] I think this was a typo --- .../3-accessibility/translations/README.it.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/3-accessibility/translations/README.it.md b/1-getting-started-lessons/3-accessibility/translations/README.it.md index 5781d5ff..f0a23259 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.it.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.it.md @@ -223,6 +223,6 @@ Molti governi hanno leggi riguardanti i requisiti di accessibilità. Consultare ## Assegnazione -[Analizzare un sito web non accessibile](assignment.md) +[Analizzare un sito web non accessibile](assignment.it.md) Crediti: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) da Instrument \ No newline at end of file From c5fd29df41b1cca609806b49d2fa762b858f4f07 Mon Sep 17 00:00:00 2001 From: Noah Date: Sat, 6 Mar 2021 23:14:20 +0100 Subject: [PATCH 18/65] translate 1.3 README to Dutch --- .../3-accessibility/translations/README.nl.md | 229 ++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 1-getting-started-lessons/3-accessibility/translations/README.nl.md diff --git a/1-getting-started-lessons/3-accessibility/translations/README.nl.md b/1-getting-started-lessons/3-accessibility/translations/README.nl.md new file mode 100644 index 00000000..0c791d0b --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.nl.md @@ -0,0 +1,229 @@ +# Toegankelijke webpagina's maken + +![Alles over toegankelijkheid](../webdev101-a11y.png) +> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz voorafgaand aan de lezing +[Quiz voorafgaand aan de lezing](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) + +> De kracht van het web zit in zijn universaliteit. Toegang voor iedereen, ongeacht hun handicap, is een essentieel aspect. +> +> \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web + +Deze quote benadrukt perfect het belang van het creëren van toegankelijke websites. Een applicatie die niet voor iedereen toegankelijk is, is per definitie uitsluiting. Als webontwikkelaars moeten we altijd rekening houden met toegankelijkheid. Door deze focus vanaf het begin te hebben, bent u goed op weg om ervoor te zorgen dat iedereen toegang heeft tot de pagina's die u maakt. In deze les leert u over de tools die u kunnen helpen ervoor te zorgen dat uw webitems toegankelijk zijn en hoe u kunt bouwen met toegankelijkheid in gedachten. + +## Tools om te gebruiken + +### Schermlezers + +Een van de bekendste toegankelijkheidstools zijn schermlezers. + +[Schermlezers](https://nl.wikipedia.org/wiki/Schermlezer) zijn veelgebruikte clients voor mensen met een visuele beperking. Omdat we er tijd voor besteden om ervoor te zorgen dat een browser de informatie die we willen delen correct overbrengt, moeten we er ook voor zorgen dat een schermlezer hetzelfde doet. + +In de basis leest een schermlezer een pagina hoorbaar van boven naar beneden. Als uw pagina alleen uit tekst bestaat, zal de lezer de informatie op dezelfde manier overbrengen naar een browser. Webpagina's zijn natuurlijk zelden louter tekst; ze bevatten links, afbeeldingen, kleur en andere visuele componenten. Er moet voor worden gezorgd dat deze informatie correct wordt gelezen door een schermlezer. + +Elke webontwikkelaar moet vertrouwd raken met een schermlezer. Zoals hierboven aangegeven, is het de client die uw gebruikers zullen gebruiken. Net zoals u bekend bent met hoe een browser werkt, moet u leren hoe een schermlezer werkt. Gelukkig zijn schermlezers in de meeste besturingssystemen ingebouwd. + +Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunnen voorlezen of zelfs enkele basisnavigatiefuncties bieden, zoals [deze op toegankelijkheid gerichte Edge-browserhulpmiddelen](https://support.microsoft.com/nl-nl/microsoft-edge/toegankelijkheidsfuncties-in-microsoft-edge-4c696192-338e-9465-b2cd-bd9b698ad19a). Dit zijn ook belangrijke toegankelijkheidstools, maar ze werken heel anders dan schermlezers en ze mogen niet worden aangezien voor testtools voor schermlezers. + +✅ Probeer een schermlezer en browsertekstlezer. Op Windows is [Narrator](https://support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) standaard inbegrepen, en [JAWS](https://webaim.org/articles/jaws/) en [NVDA](https://www.nvaccess.org/about-nvda/) kunnen ook worden geïnstalleerd. Op macOS en iOS is [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standaard geïnstalleerd. + +### Zoom + +Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus. + +Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/). + +### Contrast checkers + +Kleuren op websites moeten zorgvuldig worden gekozen om tegemoet te komen aan de behoeften van kleurenblinde gebruikers of mensen die moeite hebben met het zien van kleuren met een laag contrast. + +✅ Test een website die u graag gebruikt voor kleurgebruik met een browserextensie zoals [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Wat leer je? + +### Lighthouse + +In het ontwikkelaarstoolgedeelte van uw browser vindt u de Lighthouse-tool. Deze tool is belangrijk om een eerste beeld te krijgen van de toegankelijkheid (en ook andere analyses) van een website. Hoewel het belangrijk is om niet uitsluitend op Lighthouse te vertrouwen, is een score van 100% erg nuttig als uitgangspunt. + +✅ Zoek Lighthouse in het ontwikkelaarstoolpaneel van uw browser en voer een analyse uit op elke site. wat ontdek je? + +## Ontwerpen voor toegankelijkheid + +Toegankelijkheid is een relatief groot onderwerp. Om u te helpen, zijn er tal van bronnen beschikbaar. + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Hoewel we niet elk aspect van het maken van toegankelijke sites kunnen behandelen, staan hieronder enkele van de kernprincipes die u wilt implementeren. Het ontwerpen van een toegankelijke pagina vanaf het begin is **altijd** gemakkelijker dan teruggaan naar een bestaande pagina om deze toegankelijk te maken. + +## Goede weergaveprincipes + +### Kleur veilige paletten + +Mensen zien de wereld op verschillende manieren, inclusief kleuren. Wanneer u een kleurenschema voor uw site selecteert, moet u ervoor zorgen dat het voor iedereen toegankelijk is. Een geweldig [hulpmiddel voor het genereren van kleurenpaletten is Color Safe](http://colorsafe.co/). + +✅ Identificeer een website die erg problematisch is in het gebruik van kleur. Waarom? + +### Gebruik de juiste HTML + +Met CSS en JavaScript is het mogelijk om elk element eruit te laten zien als elk type besturingselement. `` kan worden gebruikt om een `