diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md index e0c2f7ec..40a002b9 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md @@ -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 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md index 8b57863f..6846d246 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md @@ -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 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md index ea7f6ab2..30ab9eff 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md @@ -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) \ No newline at end of file +**Asignación**: [Asignación](../assignment.md) \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md index ab6b5389..d76b1db5 100644 --- a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md @@ -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]` diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md index ff425937..920d8332 100644 --- a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md @@ -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 diff --git a/1-getting-started-lessons/2-github-basics/translations/README.es.md b/1-getting-started-lessons/2-github-basics/translations/README.es.md index c7e9775d..9f5b420f 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.es.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.es.md @@ -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 diff --git a/1-getting-started-lessons/2-github-basics/translations/README.id.md b/1-getting-started-lessons/2-github-basics/translations/README.id.md index 396161c1..bb7d570b 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.id.md @@ -1,8 +1,8 @@ -# Pengantar GitHub +# Dasar-dasar GitHub Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda. -![Pengantar GitHub](images/webdev101-github.png) +![Dasar-dasar GitHub](images/webdev101-github.png) > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..07bd77ec --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md @@ -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 diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..4043378c --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md @@ -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 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 3bd60bc7..c2d3c785 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -3,7 +3,7 @@ ![Todo sobre accesibilidad](webdev101-a11y.png) > 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 ``` -## [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 diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md new file mode 100644 index 00000000..d9475ec7 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -0,0 +1,221 @@ +# Membuat Halaman Web yang Dapat Diakses (oleh Semua Orang) + +![Semua Tentang Aksesibilitas](../webdev101-a11y.png) +> 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 `` atau ``. 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. `` bisa digunakan untuk membuat sebuah `