mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-18 04:21:21 +02:00
Merge branch 'main' into ko_translation
This commit is contained in:
minwook
GitHub
@@ -6,12 +6,12 @@
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
1. Development environments are unique to each developer
|
||||
2. Development environments are unique to each developer
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
1. What will a developer do to fix buggy code?
|
||||
3. What will a developer do to fix buggy code?
|
||||
|
||||
- [ ] Syntax highlighting
|
||||
- [ ] Debugging
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. A program can be created without the creator writing any code
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
1. Low level languages are a popular choice for:
|
||||
|
||||
- [ ] Websites
|
||||
- [ ] Hardware
|
||||
- [ ] Video game software
|
||||
|
||||
1. Which one of these tools would most most likely be in a web developer's environment?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. A program can be created without the creator writing any code
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
2. Low level languages are a popular choice for:
|
||||
|
||||
- [ ] Websites
|
||||
- [ ] Hardware
|
||||
- [ ] Video game software
|
||||
|
||||
3. Which one of these tools would most likely be in a web developer's environment?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
1. Lingkungan pengembangan unik untuk setiap pengembang
|
||||
2. Lingkungan pengembangan unik untuk setiap pengembang
|
||||
|
||||
- [ ] Benar
|
||||
- [ ] Salah
|
||||
|
||||
1. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?
|
||||
3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?
|
||||
|
||||
- [ ] Syntax highlighting (Penyorotan sintaks)
|
||||
- [ ] Debugging
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
*択一です。このクイズを解いてみましょう。*
|
||||
|
||||
1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？
|
||||
|
||||
- [ ] 機械語
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
2. 開発環境は開発者ごとに異なる？
|
||||
|
||||
- [ ] はい
|
||||
- [ ] いいえ
|
||||
|
||||
3. バグだらけのコードを修正するため、開発者は何をしますか？
|
||||
|
||||
- [ ] シンタックスハイライト
|
||||
- [ ] デバッグ
|
||||
- [ ] コードフォーマット
|
||||
@@ -5,13 +5,13 @@
|
||||
- [ ] Benar
|
||||
- [ ] Salah
|
||||
|
||||
1. Bahasa tingkat rendah adalah pilihan populer untuk:
|
||||
2. Bahasa tingkat rendah adalah pilihan populer untuk:
|
||||
|
||||
- [ ] Website
|
||||
- [ ] Hardware
|
||||
- [ ] Perangkat lunak permainan video
|
||||
|
||||
1. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?
|
||||
3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
*この問題を解いてみよう。*
|
||||
|
||||
1. コードを書かなくてもプログラムを作ることはできる？
|
||||
|
||||
- [ ] はい
|
||||
- [ ] いいえ
|
||||
|
||||
2. 低レベル言語がポピュラーな分野はどこですか？
|
||||
|
||||
- [ ] Webサイト
|
||||
- [ ] ハードウェア
|
||||
- [ ] ゲームソフト
|
||||
|
||||
3. Web開発者と最も関連性の高いツールはどれでしょう？
|
||||
|
||||
- [ ] Raspberry Piのようなハードウェア
|
||||
- [ ] ブラウザ開発者ツール
|
||||
- [ ] OSドキュメント
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que se tratan aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderá sobre software útil que lo ayuda como desarrollador.
|
||||
|
||||
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture quiz](../.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción
|
||||
|
||||
@@ -175,10 +175,10 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu
|
||||
|
||||
Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
|
||||
|
||||
## [Prueba Post-lectura](.github/post-lecture-quiz.md)
|
||||
## [Prueba Post-lectura](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Estudia un poco sobre los diferentes lenguajes disponibles para el programador. Intente escribir una línea en un idioma y luego vuelva a hacerlo en otros dos. ¿Qué aprendes?
|
||||
|
||||
**Asignación**: [Asignación](assignment.md)
|
||||
**Asignación**: [Asignación](../assignment.md)
|
||||
@@ -0,0 +1,247 @@
|
||||
# プログラミング言語と開発ツール入門
|
||||
|
||||
このレッスンでは、まずプログラミング言語の基礎を学びます。
|
||||
ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。
|
||||
次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## 事前クイズ
|
||||
[事前クイズ](.github/pre-lecture-quiz.ja.md)
|
||||
|
||||
## Introduction
|
||||
|
||||
この講座には以下が含まれています。
|
||||
|
||||
- プログラミングとは何か？
|
||||
- プログラミング言語の種類
|
||||
- プログラムの基本要素
|
||||
- 開発ツール
|
||||
|
||||
## プログラミングとは何か？
|
||||
|
||||
プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。
|
||||
命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。
|
||||
この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。
|
||||
|
||||
*プログラム*とは、コードで書かれている何かです。
|
||||
Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。
|
||||
コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。
|
||||
プログラムはコードを実行し、デバイスに命令を出します。
|
||||
あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。
|
||||
|
||||
✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？
|
||||
|
||||
## プログラミング言語
|
||||
|
||||
プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。
|
||||
デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。
|
||||
プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。
|
||||
|
||||
世の中には様々な目的のために様々なプログラミング言語が存在しています。
|
||||
たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。
|
||||
|
||||
*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。
|
||||
高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。
|
||||
JavaScriptは高レベル言語とされています。
|
||||
|
||||
次のコードは、高レベル言語であるJavaScriptと、低レベル言語であるARMアセンブリの違いを表したものです。
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
信じられないかもしれませんが、両者は同じ処理をしています。
|
||||
いずれもフィボナッチ数を順番に10個出力します。
|
||||
|
||||
✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。
|
||||
|
||||
## プログラムの基本要素
|
||||
|
||||
プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。
|
||||
プログラムの区切り文字は言語によって異なります。
|
||||
|
||||
多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。
|
||||
データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。
|
||||
そのデータは*変数*と呼ばれています。
|
||||
変数とは、デバイス内のメモリにデータを保存する文のことです。
|
||||
プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。
|
||||
|
||||
プログラムには、実行されない文が現れることがあります。
|
||||
これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。
|
||||
アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。
|
||||
制御は、何らかの条件が満たされたことによって発生することが一般的です。
|
||||
最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。
|
||||
|
||||
✅ これら文については次のレッスンで詳しく学びます。
|
||||
|
||||
## 開発ツール
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。
|
||||
|
||||
**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。
|
||||
開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。
|
||||
開発環境は、それを使用する開発者の数と同じくらい千差万別です。
|
||||
|
||||
### エディタ
|
||||
|
||||
ソフトウェア開発において最も重要なツールのひとつが、エディタです。
|
||||
エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。
|
||||
|
||||
開発者がエディタを使う理由は、それ以外にも多々あります。
|
||||
|
||||
- *デバッグ*
|
||||
コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。
|
||||
デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。
|
||||
|
||||
- *シンタックスハイライト*
|
||||
コードに色や書式を設定することで、コードを読みやすくします。
|
||||
多くのエディタはシンタックスハイライトをカスタマイズすることもできます。
|
||||
|
||||
- *拡張機能*
|
||||
デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。
|
||||
例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。
|
||||
ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。
|
||||
|
||||
- *カスタマイズ*
|
||||
ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。
|
||||
さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。
|
||||
|
||||
#### 有名なエディタとWeb開発向けのエクステンション
|
||||
|
||||
- [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)
|
||||
|
||||
### ブラウザ
|
||||
|
||||
もうひとつの重要なツールはブラウザです。
|
||||
Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。
|
||||
|
||||
多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。
|
||||
たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。
|
||||
|
||||
|
||||
#### 有名なブラウザ
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
### コマンドラインツール
|
||||
|
||||
開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。
|
||||
コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。
|
||||
|
||||
多くのタスクはマウスだけでも実行可能です。
|
||||
しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。
|
||||
またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。
|
||||
さらにマシンを新調したときに設定を移動することもできます。
|
||||
|
||||
開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。
|
||||
両方とも使う人も多いでしょう。
|
||||
|
||||
### 有名なコマンドラインオプション
|
||||
|
||||
コマンドラインオプションは、OSによって異なります。
|
||||
|
||||
💻はOSにプリインストールされているものです。
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
||||
- [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)
|
||||
|
||||
#### 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)
|
||||
|
||||
#### 有名なコマンドラインツール
|
||||
|
||||
- [Git](https://git-scm.com/) (多くのOSで 💻)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### ドキュメント
|
||||
|
||||
何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。
|
||||
開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。
|
||||
|
||||
#### Web開発者向けの有名なドキュメント
|
||||
|
||||
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
|
||||
✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
いくつかのプログラミング言語について比較してみましょう。
|
||||
JavaScriptとJavaの特徴は？
|
||||
COBOLとGoについては？
|
||||
|
||||
## 事後テスト
|
||||
[事後テスト](.github/post-lecture-quiz.ja.md)
|
||||
|
||||
## レビュー & 自習
|
||||
|
||||
プログラマーが利用できる様々な言語について、少しだけかじってみましょう。
|
||||
ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。
|
||||
なにかわかりましたか？
|
||||
|
||||
## 課題
|
||||
|
||||
[assignment.md](../assignment.md)
|
||||
@@ -82,13 +82,38 @@ Let's say you have a folder locally with some code project and you want to start
|
||||
|
||||
Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist.
|
||||
|
||||
1. **Add files to tracking**
|
||||
1. **Add all files for tracking**
|
||||
This also called as staging files/ adding files to the staging area.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
```
|
||||
|
||||
The `git add` plus `.` argument indicates that all your files & changes for tracking.
|
||||
The `git add` plus `.` argument indicates that all your files & changes for tracking.
|
||||
|
||||
1. **Add selected files for tracking**
|
||||
|
||||
```bash
|
||||
git add [file or folder name]
|
||||
```
|
||||
|
||||
This helps us to add only selected files to the staging area when we don't want to commit all files at once.
|
||||
|
||||
1. **Unstage all files**
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
This command helps us to unstage all files at once.
|
||||
|
||||
1. **Unstage a particular file**
|
||||
|
||||
```bash
|
||||
git reset [file or folder name]
|
||||
```
|
||||
|
||||
This command helps us to unstage only a particular file at once that we don't want to include for the next commit.
|
||||
|
||||
1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
|
||||
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
- [ ] Pull Request (Tarik Permintaan)
|
||||
- [ ] Feature branch (Cabang fitur)
|
||||
|
||||
1. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)?
|
||||
2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)?
|
||||
|
||||
- [ ] `git fetch`
|
||||
- [ ] `git pull`
|
||||
- [ ] `git commits -r`
|
||||
|
||||
1. Bagaimana Anda beralih ke sebuah cabang (branch)?
|
||||
3. Bagaimana Anda beralih ke sebuah cabang (branch)?
|
||||
|
||||
- [ ] `git switch [branch-name]`
|
||||
- [ ] `git checkout [branch-name]`
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
- [ ] git start
|
||||
- [ ] git init
|
||||
|
||||
1. Apa fungsi `git add`?
|
||||
2. Apa fungsi `git add`?
|
||||
|
||||
- [ ] Commit (menyerahkan) kode Anda
|
||||
- [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en su código.
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción
|
||||
|
||||
@@ -266,7 +266,7 @@ Los proyectos también pueden tener discusiones en foros, listas de correo o can
|
||||
|
||||
🚀 Desafío: empareje con un amigo para trabajar en el código del otro. Cree un proyecto de forma colaborativa, bifurque el código, cree ramas y combine los cambios.
|
||||
|
||||
## [Post-lecture prueba](.github/post-lecture-quiz.md)
|
||||
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Pengantar GitHub
|
||||
# Dasar-dasar GitHub
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda.
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
@@ -62,7 +62,7 @@ When a particular phrase needs to be highlighted, use the `<strong>` or `<em>` e
|
||||
|
||||
### Use the correct HTML
|
||||
|
||||
With CSS and JavaScript it's possible to many any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it's baffling to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
|
||||
With CSS and JavaScript it's possible to make any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it's baffling to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
|
||||
|
||||
✅ Go to any web site and see if the designers and developers are using HTML properly. Can you find a button that should be a link? Hint: right click and choose 'View Page Source' in your browser to look at underlying code.
|
||||
|
||||
|
||||
17
1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md
vendored
Normal file
17
1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||
|
||||
1. Lighthouse hanya memeriksa masalah aksesibilitas
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
|
||||
2. Palet warna aman membantu orang dengan
|
||||
|
||||
- [ ] buta warna
|
||||
- [ ] gangguan penglihatan
|
||||
- [ ] keduanya di atas
|
||||
|
||||
3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
17
1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md
vendored
Normal file
17
1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
*Selesaikan kuis ini di kelas*
|
||||
|
||||
1. Situs web yang dapat diakses dapat diperiksa di alat browser mana
|
||||
|
||||
- [ ] Lighthouse
|
||||
- [ ] Deckhouse
|
||||
- [ ] Cleanhouse
|
||||
|
||||
2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
|
||||
3. Aksesibilitas hanya penting di situs web pemerintah
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
|
||||
|
||||
> El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental.
|
||||
>
|
||||
@@ -202,13 +202,13 @@ Una web accesible para algunos no es una verdadera "red mundial". La mejor maner
|
||||
</html>
|
||||
```
|
||||
|
||||
## [Post-lecture prueba](.github/post-lecture-quiz.md)
|
||||
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lea sobre las leyes de accesibilidad de su país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web del gobierno](https://accessibility.blog.gov.uk/).
|
||||
|
||||
** Tarea **: [Analizar un sitio web no accesible](assignment.md)
|
||||
** Tarea **: [Analizar un sitio web no accesible](assignment.es.md)
|
||||
|
||||
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
|
||||
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
# Membuat Halaman Web yang Dapat Diakses (oleh Semua Orang)
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md)
|
||||
|
||||
> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting.
|
||||
>
|
||||
> \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web
|
||||
|
||||
Kutipan ini dengan sempurna menyoroti pentingnya membuat situs web yang dapat diakses. Sebuah aplikasi yang tidak dapat diakses oleh semua adalah menurut definisi pengecualian. Sebagai pengembang web, kami harus selalu memikirkan aksesibilitas. Dengan memiliki fokus ini sejak awal Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari tentang alat yang dapat membantu Anda memastikan bahwa aset web Anda dapat diakses dan cara membangun dengan mempertimbangkan aksesibilitas.
|
||||
|
||||
## Alat yang digunakan
|
||||
|
||||
### Pembaca layar (Screen readers)
|
||||
|
||||
Salah satu alat aksesibilitas paling terkenal adalah pembaca layar.
|
||||
|
||||
[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah klien yang biasa digunakan untuk mereka yang memiliki gangguan penglihatan. Saat kami menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kami bagikan dengan benar, kami juga harus memastikan pembaca layar melakukan hal yang sama.
|
||||
|
||||
Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suara. Jika halaman Anda semuanya teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berupa teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan bahwa informasi ini dibaca dengan benar oleh pembaca layar.
|
||||
|
||||
Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar.
|
||||
|
||||
✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
|
||||
|
||||
### Pemeriksa kontras
|
||||
|
||||
Warna di situs web perlu dipilih dengan cermat untuk menjawab kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna kontras rendah.
|
||||
|
||||
✅ Uji situs web yang Anda sukai untuk penggunaan warna dengan ekstensi browser seperti [pemeriksa warna WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apa yang Anda pelajari?
|
||||
|
||||
### Lighthouse
|
||||
|
||||
Di area alat pengembang di browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan tampilan pertama aksesibilitas (serta analisis lain) dari situs web. Meskipun penting untuk tidak mengandalkan Lighthouse secara eksklusif, skor 100% sangat membantu sebagai dasar.
|
||||
|
||||
✅ Temukan Lighthouse di panel alat pengembang browser Anda dan jalankan analisis di situs mana pun. apa yang kamu temukan?
|
||||
|
||||
## Mendesain untuk aksesibilitas
|
||||
|
||||
Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, ada banyak sumber daya yang tersedia.
|
||||
|
||||
- [Accessible U - Universitas Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
Meskipun kami tidak dapat mencakup setiap aspek dalam membuat situs yang dapat diakses, berikut adalah beberapa prinsip inti yang ingin Anda terapkan. Mendesain halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses.
|
||||
|
||||
## Prinsip tampilan yang bagus
|
||||
|
||||
### Palet warna yang aman
|
||||
|
||||
Orang melihat dunia dengan cara yang berbeda, dan ini termasuk warna. Saat memilih skema warna untuk situs Anda, Anda harus memastikannya dapat diakses oleh semua orang. Salah satu [alat hebat untuk menghasilkan palet warna adalah Color Safe](http://colorsafe.co/).
|
||||
|
||||
✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warna. Mengapa?
|
||||
Properly highlight text
|
||||
|
||||
### Sorot teks dengan benar
|
||||
|
||||
Highlighting text by color, [font weight (berat font)](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [dekorasi teks lainnya](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak secara langsung memberi tahu pembaca layar tentang kepentingannya. Sebuah kata dapat dicetak tebal karena merupakan kata kunci, atau karena kata pertama dan perancang memutuskan kata tersebut harus dicetak tebal.
|
||||
|
||||
Saat frasa tertentu perlu disorot, gunakan elemen `<strong>` atau `<em>`. Ini akan menunjukkan kepada pembaca layar bahwa item tersebut penting.
|
||||
|
||||
### Gunakan HTML yang benar
|
||||
|
||||
Dengan CSS dan JavaScript, memungkinkan banyak elemen terlihat seperti jenis kontrol apa pun. `<span>` bisa digunakan untuk membuat sebuah `<button>`, dan `<b>` bisa menjadi hyperlink. Meskipun ini mungkin dianggap lebih mudah untuk diatur, ini membingungkan pembaca layar. Gunakan HTML yang sesuai saat membuat kontrol di halaman. Jika Anda menginginkan hyperlink, gunakan `<a>`. Menggunakan HTML yang tepat untuk kontrol yang tepat disebut dengan menggunakan HTML Semantik.
|
||||
|
||||
✅ Kunjungi situs web mana saja dan lihat apakah perancang dan pengembang menggunakan HTML dengan benar. Dapatkah Anda menemukan tombol yang seharusnya menjadi tautan? Petunjuk: klik kanan dan pilih 'View Page Source' di browser Anda untuk melihat kode yang mendasarinya.
|
||||
|
||||
### Gunakan petunjuk visual yang baik
|
||||
|
||||
CSS menawarkan kontrol penuh atas tampilan elemen apa pun di halaman. Anda dapat membuat kotak teks tanpa kerangka atau hyperlink tanpa garis bawah. Sayangnya, menghapus petunjuk tersebut dapat membuat seseorang yang bergantung padanya lebih sulit untuk mengenali jenis kontrol tersebut.
|
||||
|
||||
## Pentingnya teks tautan
|
||||
|
||||
Hyperlink adalah inti untuk menavigasi web. Hasilnya, memastikan pembaca layar dapat membaca tautan dengan benar memungkinkan semua pengguna menavigasi situs Anda.
|
||||
|
||||
### Pembaca layar dan tautan
|
||||
|
||||
Seperti yang Anda harapkan, pembaca layar membaca teks link dengan cara yang sama seperti membaca teks lain di halaman. Dengan pemikiran ini, teks yang ditunjukkan di bawah ini mungkin terasa sangat dapat diterima.
|
||||
|
||||
> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. [Klik disini](https://en.wikipedia.org/wiki/Little_penguin) untuk informasi lebih lanjut.
|
||||
|
||||
> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. Kunjungi https://en.wikipedia.org/wiki/Little_penguin untuk informasi lebih lanjut.
|
||||
|
||||
> **CATATAN** Saat akan membaca, Anda **jangan pernah** membuat tautan seperti di atas.
|
||||
|
||||
Ingat, pembaca layar adalah antarmuka yang berbeda dari browser dengan sekumpulan fitur yang berbeda.
|
||||
|
||||
### Masalah dengan menggunakan URL
|
||||
|
||||
Pembaca layar membaca teks. Jika URL muncul di teks, pembaca layar akan membaca URL tersebut. Secara umum, URL tidak menyampaikan informasi yang berarti, dan dapat terdengar mengganggu. Anda mungkin pernah mengalami ini jika ponsel Anda pernah membaca pesan teks dengan URL.
|
||||
|
||||
### Masalah dengan "klik di sini"
|
||||
|
||||
Pembaca layar juga memiliki kemampuan untuk membaca hanya hyperlink pada halaman, sama seperti orang awam yang memindai halaman untuk mencari link. Jika teks tautan selalu "klik di sini", yang akan didengar pengguna hanyalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua tautan sekarang tidak dapat dibedakan satu sama lain.
|
||||
|
||||
### Teks tautan yang bagus
|
||||
|
||||
Teks tautan yang bagus menjelaskan secara singkat apa yang ada di sisi lain tautan. Dalam contoh di atas yang berbicara tentang penguin kecil, tautannya menuju ke halaman Wikipedia tentang spesies tersebut. Frasa *penguin kecil* akan menjadi teks tautan yang sempurna karena menjelaskan apa yang akan dipelajari seseorang jika mereka mengeklik tautan - penguin kecil.
|
||||
|
||||
> [Penguin kecil](https://en.wikipedia.org/wiki/Little_penguin), kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia.
|
||||
|
||||
✅ Jelajahi web selama beberapa menit untuk menemukan halaman yang menggunakan strategi penautan yang tidak jelas. Bandingkan mereka dengan situs lain yang ditautkan lebih baik. Apa yang kamu pelajari?
|
||||
|
||||
#### Catatan mesin pencari
|
||||
|
||||
Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua, Anda juga akan membantu mesin pencari menavigasi situs Anda. Mesin pencari menggunakan teks link untuk mempelajari topik halaman. Jadi, menggunakan teks tautan yang bagus membantu semua orang!
|
||||
|
||||
### ARIA
|
||||
|
||||
Bayangkan halaman berikut:
|
||||
|
||||
| Produk | Deskripsi | Pesan |
|
||||
|--------------|------------------|--------------|
|
||||
| Widget | [Deskripsi]('#') | [Pesan]('#') |
|
||||
| Widget super | [Deskripsi]('#') | [Pesan]('#') |
|
||||
|
||||
Dalam contoh ini, menduplikasi teks deskripsi dan urutan masuk akal bagi seseorang yang menggunakan browser. Namun, seseorang yang menggunakan pembaca layar hanya akan mendengar kata *deskripsi* dan *pesan* diulang tanpa konteks.
|
||||
|
||||
Untuk mendukung jenis skenario ini, HTML mendukung sekumpulan atribut yang dikenal sebagai [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) (Aplikasi Internet Kaya yang Dapat Diakses). Atribut ini memungkinkan Anda memberikan informasi tambahan kepada pembaca layar.
|
||||
|
||||
> **CATATAN**: Seperti banyak aspek HTML, dukungan browser dan pembaca layar mungkin berbeda. Namun, sebagian besar klien pasaran mendukung atribut ARIA.
|
||||
|
||||
Anda dapat menggunakan `aria-label` untuk mendeskripsikan link jika format halaman tidak mengizinkan Anda. Deskripsi untuk widget dapat disetel sebagai
|
||||
|
||||
``` html
|
||||
<a href="#" aria-label="Deskripsi widget">deskripsi</a>
|
||||
```
|
||||
|
||||
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `<div>` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna.
|
||||
|
||||
```html
|
||||
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gambar-gambar
|
||||
|
||||
Tak perlu dikatakan pembaca layar tidak dapat secara otomatis membaca apa yang ada dalam gambar. Memastikan gambar dapat diakses tidak membutuhkan banyak pekerjaan - itulah yang dimaksud dengan atribut `alt`. Semua gambar harus memiliki `alt` untuk mendeskripsikan gambar tersebut.
|
||||
|
||||
✅ Seperti yang Anda duga, mesin telusur juga tidak dapat memahami apa yang ada di gambar. Mereka juga menggunakan teks alt. Jadi sekali lagi, memastikan halaman Anda dapat diakses memberikan bonus tambahan!
|
||||
|
||||
## Keyboard
|
||||
|
||||
Beberapa pengguna tidak dapat menggunakan mouse atau trackpad, sebagai gantinya mengandalkan interaksi keyboard untuk tab dari satu elemen ke elemen berikutnya. Situs web Anda harus menyajikan konten Anda dalam urutan logis sehingga keyboard dapat mengakses setiap elemen saat pengguna bergerak ke bawah dokumen. Jika Anda membangun halaman web Anda dengan markup semantik dan menggunakan CSS untuk mengatur tata letak visualnya, situs Anda harus dapat dinavigasi dengan keyboard, tetapi penting untuk menguji aspek ini secara manual. Pelajari lebih lanjut tentang [strategi navigasi keyboard](https://webaim.org/techniques/keyboard/).
|
||||
|
||||
✅ Buka situs web mana pun dan coba menavigasi hanya dengan menggunakan tombol tab Anda. Apa yang berhasil, apa yang tidak berhasil? Mengapa?
|
||||
|
||||
## Ringkasan
|
||||
|
||||
Web yang dapat diakses oleh beberapa orang bukanlah benar-benar 'web di seluruh dunia'. Cara terbaik untuk memastikan situs yang Anda buat dapat diakses adalah dengan menerapkan praktik terbaik aksesibilitas sejak awal. Meskipun ada langkah tambahan yang terlibat, menggabungkan keterampilan ini ke dalam alur kerja Anda sekarang berarti semua halaman yang Anda buat dapat diakses.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan strategi yang Anda pelajari.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Kuis Pasca Kuliah
|
||||
[Kuis pasca kuliah](.github/post-lecture-quiz.id.md)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Banyak pemerintah memiliki undang-undang tentang persyaratan aksesibilitas. Baca tentang undang-undang aksesibilitas negara asal Anda. Apa yang tercakup, dan apa yang tidak? Contohnya adalah [situs web pemerintah ini](https://accessibility.blog.gov.uk/).
|
||||
|
||||
## Tugas
|
||||
|
||||
[Analisis situs web yang tidak dapat diakses](assignment.id.md)
|
||||
|
||||
Kredit: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) oleh Instrumen
|
||||
@@ -0,0 +1,11 @@
|
||||
# Analisis situs web yang tidak dapat diakses
|
||||
|
||||
## Instruksi
|
||||
|
||||
Identifikasi situs web yang Anda yakini TIDAK dapat diakses, dan buat rencana tindakan untuk meningkatkan aksesibilitasnya. Tugas pertama Anda adalah mengidentifikasi situs ini, merinci cara yang menurut Anda tidak dapat diakses tanpa menggunakan alat analitik, dan kemudian memasukkannya melalui analisis Lighthouse. Ambil hasil analisis ini dan uraikan rencana rinci dengan minimal sepuluh poin yang menunjukkan bagaimana situs dapat ditingkatkan.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Teladan | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|---------------------------------|
|
||||
| laporan siswa | termasuk paragraf tentang bagaimana situs tersebut tidak memadai, laporan Lighthouse diambil sebagai pdf, daftar sepuluh poin untuk diperbaiki, dengan rincian tentang cara memperbaikinya | kurang 20% dari yang dibutuhkan | kurang 50% dari yang dibutuhkan |
|
||||
17
1-getting-started-lessons/translations/README.id.md
Normal file
17
1-getting-started-lessons/translations/README.id.md
Normal file
@@ -0,0 +1,17 @@
|
||||
# Memulai Pengembangan Web
|
||||
|
||||
Di bagian kurikulum ini, Anda akan diperkenalkan dengan konsep berbasis non-proyek yang penting untuk menjadi pengembang profesional.
|
||||
|
||||
### Topik
|
||||
|
||||
1. [Pengantar Bahasa Pemrograman dan Alat Keterampilan](../1-intro-to-programming-languages/translations/README.id.md)
|
||||
2. [Dasar-dasar GitHub](../2-github-basics/translations/README.id.md)
|
||||
3. [Dasar-dasar Aksesibilitas](../3-accessibility/translations/README.id.md)
|
||||
|
||||
### Kredit
|
||||
|
||||
Dasar-dasar Aksesibilitas ditulis dengan ♥ ️oleh [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Pengantar GitHub ditulis dengan ♥ ️oleh [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Pengantar Bahasa Pemrograman dan Alat Keterampilan ditulis dengan ♥ ️oleh [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
Reference in New Issue
Block a user