diff --git a/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml b/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml new file mode 100644 index 00000000..8f48b5eb --- /dev/null +++ b/.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml @@ -0,0 +1,45 @@ +name: Azure Static Web Apps CI/CD + +on: + push: + branches: + - main + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - main + +jobs: + build_and_deploy_job: + if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v2 + with: + submodules: true + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v0.0.1-preview + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }} + repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) + action: "upload" + ###### Repository/Build Configurations - These values can be configured to match you app requirements. ###### + # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig + app_location: "/quiz-app" # App source code path + api_location: "api" # Api source code path - optional + output_location: "dist" # Built app content directory - optional + ###### End of Repository/Build Configurations ###### + + close_pull_request_job: + if: github.event_name == 'pull_request' && github.event.action == 'closed' + runs-on: ubuntu-latest + name: Close Pull Request Job + steps: + - name: Close Pull Request + id: closepullrequest + uses: Azure/static-web-apps-deploy@v0.0.1-preview + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }} + action: "close" diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..9bb88d37 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/.DS_Store diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md deleted file mode 100644 index 1fbc51d8..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ /dev/null @@ -1,18 +0,0 @@ -*Complete this quiz along with your submission by checking one answer per question.* - -1. What language would you most likely use to create a website? - -- [ ] Machine Code -- [ ] JavaScript -- [ ] Bash - -2. Development environments are unique to each developer - -- [ ] True -- [ ] False - -3. What will a developer do to fix buggy code? - -- [ ] Syntax highlighting -- [ ] Debugging -- [ ] Code formatting diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md deleted file mode 100644 index 82e8e597..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ /dev/null @@ -1,18 +0,0 @@ -*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 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 9a7ad03c..4771f76c 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -6,7 +6,7 @@ This lesson covers the basics of programming languages. The topics covered here > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) ## Introduction @@ -181,7 +181,7 @@ When a developer wants to learn something new, they'll most likely turn to docum Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? ## Post-Lecture Quiz -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) ## Review & Self Study 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 deleted file mode 100644 index 40a002b9..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini bersama dengan kiriman Anda dengan memeriksa satu jawaban per pertanyaan.* - -1. Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web? - -- [ ] Machine Code (Kode Mesin) -- [ ] JavaScript -- [ ] Bash - -2. Lingkungan pengembangan unik untuk setiap pengembang - -- [ ] Benar -- [ ] Salah - -3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)? - -- [ ] Syntax highlighting (Penyorotan sintaks) -- [ ] Debugging -- [ ] Code formatting (Pemformatan kode) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md deleted file mode 100644 index aaa8555e..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md +++ /dev/null @@ -1,18 +0,0 @@ -*択一です。このクイズを解いてみましょう。* - -1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？ - -- [ ] 機械語 -- [ ] JavaScript -- [ ] Bash - -2. 開発環境は開発者ごとに異なる？ - -- [ ] はい -- [ ] いいえ - -3. バグだらけのコードを修正するため、開発者は何をしますか？ - -- [ ] シンタックスハイライト -- [ ] デバッグ -- [ ] コードフォーマット 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 deleted file mode 100644 index 6846d246..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun - -- [ ] Benar -- [ ] Salah - -2. Bahasa tingkat rendah adalah pilihan populer untuk: - -- [ ] Website -- [ ] Hardware -- [ ] Perangkat lunak permainan video - -3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web? - -- [ ] Hardware, like a Raspberry Pi -- [ ] Browser DevTools -- [ ] Operating system documentation diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md deleted file mode 100644 index 0007a17c..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md +++ /dev/null @@ -1,18 +0,0 @@ -*この問題を解いてみよう。* - -1. コードを書かなくてもプログラムを作ることはできる？ - -- [ ] はい -- [ ] いいえ - -2. 低レベル言語がポピュラーな分野はどこですか？ - -- [ ] Webサイト -- [ ] ハードウェア -- [ ] ゲームソフト - -3. Web開発者と最も関連性の高いツールはどれでしょう？ - -- [ ] Raspberry Piのようなハードウェア -- [ ] ブラウザ開発者ツール -- [ ] OSドキュメント 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 30ab9eff..b8bfaabb 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,8 +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](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) ### Introducción En esta lección, cubriremos: @@ -175,7 +174,7 @@ 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](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) ## Revisión y autoestudio diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md index 36800646..6a3682f6 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md @@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sin > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=id) ## Pengantar @@ -179,6 +180,10 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go? +## Kuis Pasca-Kuliah + +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=id) + ## Ulasan & Belajar Mandiri Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari? diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md new file mode 100644 index 00000000..675cccb7 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md @@ -0,0 +1,192 @@ +# Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari + +Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore. + +![Introduzione alla Programmazione](../webdev101-programming.png) +> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pre-Lezione +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=it) + +## Introduzione + +In questa lezione tratteremo di: + +- Cos'è la programmazione? +- Tipi di linguaggi di programmazione +- Elementi base di un programma +- Software utili e strumenti per lo sviluppatore professionista + +## Cos'è la programmazione? + +La programmazione (conosciuta anche come scrivere codice) è il processo con il quale si scrivono istruzioni a un dispositivo, tipo un computer o dispositivo mobile. Queste istruzioni vengono scritte con un linguaggio di programmazione, quindi vengono interpretate dal dispositivo. Ci si può riferire a questo insieme di istruzioni in vari modi, ma *programma*, *programma di computer*, *applicazione (app)*, ed *eseguibile* sono alcuni dei nomi più conosciuti. + +Un *programma* può essere qualsiasi cosa che sia scritta con codice; siti web, giochi, app per telefono sono programmi. Mentre è possibile creare un programma senza scrivere codice, la logica sottostante viene interpretata dal dispositivo e quella logica è molto probabile che sia stata scritta con codice. Un programma che sta *girando* o sta*eseguendo codice* sta effettuando istruzioni. Il dispositivo con il quale state attualmente leggendo questa lezione sta eseguendo un programma per stamparla sul vostro schermo. + +✅ Fate una piccola ricerca: quale si ritiene sia stato il primo programmatore al mondo? + +## Linguaggi di programmazione + +I linguaggi di programmazione servono uno scopo principale: fare in modo che gli sviluppatori costruiscano istruzioni da inviare a un dispositivo. I dispositivi possono comprendere solo codice binario (gli 1 e gli 0), e per la *maggior parte* degli sviluppatori questo non è un modo molto efficace di comunicare. I linguaggi di programmazione sono un veicolo per comunicare tra umani e computer. + +I linguaggi di programmazione sono disponibili in diversi formati e possono servire per scopi diversi. Ad esempio, JavaScript è principalmente usato per applicazioni web, mentre Bash è principalmente usato per sistemi operativi. + +I *linguaggi a basso livello* richiedono in genere a un dispositivo meno passi per interpretare le istruzioni rispetto ai *linguaggi di alto livello*. Tuttavia ciò che rende popolari i *linguaggi di alto livello* è la loro leggibilità e supporto. JavaScript è considerato un *linguaggio di alto livello* + +Il codice seguente illustra le differenze tra un linguaggio ad alto livello come JavaScript e un linguaggio a basso livello come il codice 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 +``` + +Credeteci o no, *stanno entrambi facendo la stessa cosa*: stampare una successione di Fibonacci fino a 10. + +✅ Una successione di Fibonacci è [definita](https://www.wikiwand.com/it/Successione_di_Fibonacci) come un insieme di numeri tali che ciascun numero è la somma dei due precedenti, a partire da 0 e 1. + +## Elementi di un programma + +Una singola istruzione in un programma è detta *istruzione* e in genere avrà un carattere o spaziatura di riga che identifica dove essa finisce, o *termina*. Il modo nel quale un programma termina varia per ogni linguaggio. + +La maggior parte dei programmi dipende dall'utilizzo di dati ricevuti da un utente o altrove, dove le istruzioni potrebbero dipendere da dati per essere effettuate. I dati possono modificare il comportamento di un programma, quindi i linguaggi di programmazione sono dotati della possibilità di conservare temporaneamente dati che possono essere usati successivamente. Questi dati sono detti *variabili*. Le variabili sono istruzioni che richiedono a un dispositivo di salvare dati nella sua memoria. Le variabili nei programmi sono simili a quelle dell'algebra, dove devono avere un nome univoco e il loro valore potrebbe mutare nel tempo. + +Esiste la possibilità che alcune istruzioni non saranno eseguite da un dispositivo. In genere è una cosa voluta quando scritta dallo sviluppatore oppure per caso quando si verifica un errore inaspettato. Questo tipo di controllo di un'applicazione la rende più robusta e mantenibile. In genere queste modifiche nel controllo accadono quando si verificano certe condizioni. Una istruzione comune nei moderni linguaggi di programmazione per controllare come viene eseguito un programma è `if..else`. + +✅ Saprete di più circa questo tipo di istruzione nelle lezioni successive + +## Strumenti Necessari + +[![Strumenti Necessari](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +In questa sezione conoscerete qualche software che potreste trovare molto utile per iniziare il vostro viaggio come programmatori professionisti. + +Un *ambiente di sviluppo* è un insieme univoco di strumenti e caratteristiche che uno sviluppatore usa spesso quando scrive software. Alcuni di questi strumenti sono stati personalizzati per specifiche necessità dello sviluppatore e potrebbero cambiare nel tempo se lo sviluppatore cambia le priorità dei progetti di lavoro o personali, oppure quando usa un diverso linguaggio di programmazione. Gli ambienti di sviluppo sono unici tanto quanto gli sviluppatori che li utilizzano. + +### Editor + +Uno degli strumenti cruciali per lo sviluppo del software è l'editor. Gli editor sono dove scrivete il vostro codice e talvolta dove eseguirete il vostro codice. + +Gli sviluppatori si affidano agli editor per qualche altra ragione aggiuntiva: + +- *Debugging* La scoperta di bug ed errori seguendo passo passo il codice, riga per riga. Alcuni editor hanno capacita di debugging o possono essere personalizzate e aggiunte per linguaggi di programmazione specifici. +- *Evidenziazione della Sintassi* Aggiunge colorazione e formattazione al testo del codice, rendendone più facile la lettura. La maggior parte degli editor consente la personalizzazione dell'evidenziazione della sintassi. +- *Estensioni e integrazioni* Aggiunte specializzate per gli sviluppatori, dagli sviluppatori, per accedere a strumenti addizionali che non sono incluse come caratteristiche base dell'editor. Ad esempio molti sviluppatori hanno bisogno di un modo per documentare il proprio codice e spiegare come funziona e installeranno una estensione in grado di verificare la sintassi per trovare errori di ortografia. La maggior parte di queste aggiunte sono rivolte all'uso per un editor specifico, e molti editor hanno un modo per ricercare le estensioni disponibili. +- *Personalizzazione* La maggior parte degli editor sono estremamente personalizzabili, e ciascun sviluppatore avrà il suo proprio ambiente di programmazione in grado di soddisfare le sue necessità. Molti consentono agli sviluppatori di creare le loro proprie estensioni. + +#### Popolari Editor ed Estensioni per lo Sviluppo 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) + +### Browser + +Un altro strumento cruciale è il browser. Gli sviluppatori web fanno affidamento sul browser per osservare come il proprio codice viene eseguito nel web, viene anche usato per vedere elementi grafici di una pagina web che sono scritti nell'editor, come HTML. + +Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che contengono un insieme di caratteristiche e informazioni per aiutare gli sviluppatori nella raccolta e cattura di importanti approfondimenti in merito alle proprie applicazioni. Ad esempio: se una pagina web ha errori, è talvolta utile sapere dove questi errori sono capitati. DevTools in un browser può essere configurato per catturare queste informazioni. + +#### Popolari Browser e DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/) +- [Firefox](https://sviluppatore.mozilla.org/docs/Tools) + +### Strumenti da Riga di Comando + +Alcuni sviluppatori preferiscono una visione meno grafica per i propri compiti quotidiani e si appoggiano alla riga di comando per completarli. Lo sviluppo del codice richiede un significativo ammontare di digitazione e taluni sviluppatori preferiscono non interrompere il proprio flusso sulla tastiere e usano scorciatoie da tastiera per spostarsi tra finestre del desktop, lavorare su file diversi, e usare strumenti. La maggior parte dei compiti può essere completata con un mouse, ma un vantaggio dell'usare la riga di comando è che molto può essere fatto con essa senza dover passare dalla tastiera al mouse e viceversa. Un altro vantaggio è che è configurabile ed è possibile salvare la propria configurazione, modificarla successivamente, e anche importarla su nuove macchine di sviluppo. Poiché gli ambienti di sviluppo sono così particolari per ciascun sviluppatore, alcuni eviteranno l'uso della riga di comando, altri la utilizzeranno esclusivamente e altri preferiranno mescolare le due tattiche. + +### Popolari Alternative per Riga di Comando + +Le alternative per la riga di comando differiriscono in base al sistema operativo che si sta usando. + +*💻 = preinstallate nel sistema operativo.* + +#### 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) + +#### Popolari Strumenti da Riga di Comando + +- [Git](https://git-scm.com/) (💻 nella maggior parte dei sistemi operativi) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentazione + +Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte delle volte farà riferimento alla documentazione per imparare come usarlo. Gli sviluppatori fanno spesso affidamento alla documentazione per essere guidati all'utilizzo corretto degli strumenti e dei linguaggi, oltre a ottenere una più profonda conoscenza del funzionamento. + +#### Popolari Documentazioni sullo Sviluppo Web + +- [Mozilla sviluppatore Network](https://sviluppatore.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer. + +--- + +## 🚀 Sfida + +Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di JavaScript rispetto a Java? E COBOL rispetto a Go? + +## Quiz Post-Lezione +[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=it) + +## Revisione e Auto Istruzione + +Studiate un poco sui diversi linguaggi di programmazione a disposizione di un programmatore. Cercate di scrivere una riga in un linguaggio, poi rifatelo con altri due. Cosa avete imparato? + +## Compito + +[Leggere la documentazione](assignment.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 00569fd1..5809bcc2 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -8,7 +8,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 事前クイズ -[事前クイズ](.github/pre-lecture-quiz.ja.md) +[事前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=ja) ## Introduction @@ -234,7 +234,7 @@ JavaScriptとJavaの特徴は？ COBOLとGoについては？ ## 事後テスト -[事後テスト](.github/post-lecture-quiz.ja.md) +[事後テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=ja) ## レビュー & 自習 @@ -244,4 +244,4 @@ COBOLとGoについては？ ## 課題 -[assignment.md](../assignment.md) +[assignment.md](assignment.ja.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md index afc23138..5dadcd69 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md @@ -2,11 +2,11 @@ 이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다. -![Intro Programming](webdev101-programming.png) +![Intro Programming](../webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=ko) ## 소개 @@ -181,7 +181,7 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. 일부 프로그래밍 언어를 비교하십시오. JavaScript와 자바의 특징은 무엇입니까? COBOL과 Go는 어떻습니까? ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=ko) ## 리뷰 & 자기주도 학습 @@ -189,4 +189,4 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. ## 과제 -[Reading the Docs](assignment.md) +[Reading the Docs](../assignment.md) 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 new file mode 100644 index 00000000..41a72fc4 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -0,0 +1,193 @@ +# 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. + +![Introductie Programmeren](../webdev101-programming.png) +> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz + +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) + +## Introductie + +In deze les hebben we het over: + +- Wat is programmeren? +- Verschillende typen programmeertalen. +- Basis elementen van een programma. +- Nuttige toepassingen en gereedschap voor de professionele web ontwikkelaar. + +## Wat is programmeren? + +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. + +✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur? + +## Programmeertalen + +Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers. + +Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. JavaScript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen. + +*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is JavaScript. + +Het volgende codevoorbeeld laat het verschil zien tussen een hogere (JavaScript) en een lagere (ARM assembly) programeertaal. + +```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 +``` + +Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal. + +✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1. + +## Elementen van een programma + +Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal. + +De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan wat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. + +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. + +## 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. + +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. + +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. +- *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. + +#### Populaire Editors en Web Ontwikkeling Extensies + +- [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) + +### Browsers + +Nog een zeer belangrijke applicatie is de webbrowser. Web ontwikkelaars zijn afhankelijk van de browser om na te gaan hoe hun code draait op het web. De browser wordt ook gebruikt om de visuele elementen van een web pagina weer te geven die geschreven zijn in de editor, zoals HTML. + +Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwikkelaars makkelijk inzicht kunnen krijgen over hun applicatie. Bijvoorbeeld: als een webpagina fouten heeft, is het handig om te weten wanneer die fouten zijn opgetreden. In zo'n situatie kan DevTools kan geconfigureerd worden om deze informatie te verzamelen. + +#### Populaire Browsers en DevTools + +- [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) + +### 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. + +### Populaire Command Lines + +Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat je gebruikt. + +*💻 = is geïnstalleerd met het besturingssysteem.* + +#### 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) (ook bekend als 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) + +#### Populaire Command Line Applicaties + +- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentatie + +Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie (Docs) raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk. + +#### Populaire Documentatie over Web Ontwikkeling + +- [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. + +--- + +## 🚀 Uitdaging + +Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go? + +## Post-Lecture Quiz +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + +## 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. + +## Opdracht + +[Lees de documentatie](../assignment.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md new file mode 100644 index 00000000..ded90c34 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md @@ -0,0 +1,11 @@ +# डॉक्स पढ़ना + +## अनुदेश + +ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें. + +## सरनामा + +| उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | +| -------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- | +| बताया कि वेब डेवलपर टूल का उपयोग क्यों करेगा | समझाया कि कैसे, लेकिन डेवलपर टूल का उपयोग क्यों नहीं करेगा | यह उल्लेख नहीं किया कि एक डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा | diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md new file mode 100644 index 00000000..10da2236 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Leggere la Documentazione + +## Istruzioni + +Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN. + +## Rubrica + +Ottimo | Adeguato | Necessari miglioramenti +--- | --- | -- | +|Spiega perchè uno sviluppatore web dovrebbe usare lo strumento| Spiega come, ma non perchè uno sviluppatore web dovrebbe usare lo strumento| Non menziona come o perchè uno sviluppatore web dovrebbe usare lo strumento | \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md new file mode 100644 index 00000000..a5057354 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md @@ -0,0 +1,11 @@ +# ドキュメントを読む + +## 説明書 + +Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 + +## ルーブリック + +模範的な例 | 適切な | 改善が必要 +--- | --- | -- | +|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。 | \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md b/1-getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md deleted file mode 100644 index 36692ac1..00000000 --- a/1-getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md +++ /dev/null @@ -1,19 +0,0 @@ -*Complete this quiz by checking one answer per question.* - -1. A place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more is: - -- [ ] GitHub -- [ ] A Pull Request -- [ ] A feature branch - -2. How would you get all the commits from a remote branch? - -- [ ] `git fetch` -- [ ] `git pull` -- [ ] `git commits -r` - -3. How do you switch to a branch? - -- [ ] `git switch [branch-name]` -- [ ] `git checkout [branch-name]` -- [ ] `git load [branch-name]` diff --git a/1-getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md b/1-getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md deleted file mode 100644 index 6b75242f..00000000 --- a/1-getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md +++ /dev/null @@ -1,13 +0,0 @@ -*Complete this quiz in class* - -1. How do you create a Git repo? - -- [ ] git create -- [ ] git start -- [ ] git init - -2. What does `git add` do? - -- [ ] Commits your code -- [ ] Adds your files to a staging area for tracking -- [ ] Adds your files to GitHub diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 2f1a4b6b..5eb022cf 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -6,7 +6,7 @@ This lesson covers the basics of GitHub, a platform to host and manage changes t > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) ## Introduction @@ -149,7 +149,7 @@ Let's say you have a folder locally with some code project and you want to start git push ``` - > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](github.com/github/gitignore). + > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore). #### Commit messages @@ -244,7 +244,7 @@ Let's go through a contributor workflow. Assume the contributor has already _for 1. **Open a PR**. Next, you want to open up a PR. You do that by navigating to the forked repo on GitHub. You will see an indication on GitHub where it asks whether you want to create a new PR, you click that and you are taken to an interface where you can change commit message title, give it a more suitable description. Now the maintainer of the repo you forked will see this PR and _fingers crossed_ they will appreciate and _merge_ your PR. You are now a contributor, yay :) -1. **Clean up**. It's considered good practice to _clean up_ after you. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command: +1. **Clean up**. It's considered good practice to _clean up_ after you successfully merge a PR. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command: ```bash git branch -d [branch-name] @@ -284,7 +284,7 @@ Lastly, you can download the code in a zipped folder. ### A few more interesting things about GitHub -You can star, watching, and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. +You can star, watch and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress. @@ -299,7 +299,7 @@ Projects might also have discussion in forums, mailing lists, or chat channels l Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes. ## Post-Lecture Quiz -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) ## Review & Self Study @@ -315,4 +315,4 @@ You'll also find more advanced labs. ## Assignment -Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file +Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) 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 deleted file mode 100644 index d76b1db5..00000000 --- a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,19 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan review, komentar, tes terintegrasi, dan banyak lagi adalah: - -- [ ] GitHub -- [ ] Pull Request (Tarik Permintaan) -- [ ] Feature branch (Cabang fitur) - -2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)? - -- [ ] `git fetch` -- [ ] `git pull` -- [ ] `git commits -r` - -3. Bagaimana Anda beralih ke sebuah cabang (branch)? - -- [ ] `git switch [branch-name]` -- [ ] `git checkout [branch-name]` -- [ ] `git load [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 deleted file mode 100644 index 920d8332..00000000 --- a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,13 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Bagaimana Anda membuat repo Git? - -- [ ] git create -- [ ] git start -- [ ] git init - -2. Apa fungsi `git add`? - -- [ ] Commit (menyerahkan) kode Anda -- [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak -- [ ] Menambahkan file Anda ke GitHub 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 9f5b420f..826f4d38 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](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) ### 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](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) ## 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 bb7d570b..15e4b819 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 @@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengel > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=id) ## Pengantar @@ -272,7 +273,8 @@ Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seper Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proyek secara kolaboratif, buat kode, buat cabang, dan gabungkan perubahan. ## Kuis Pasca Kuliah -[Kuis pasca kuliah](.github/post-lecture-quiz.id.md) + +[Kuis pasca kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=id) ## Review & Belajar Mandiri @@ -288,4 +290,4 @@ Anda juga akan menemukan lab yang lebih canggih. ## Tugas -Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file +Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.it.md b/1-getting-started-lessons/2-github-basics/translations/README.it.md new file mode 100644 index 00000000..8244de43 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.it.md @@ -0,0 +1,315 @@ +# Introduzione a GitHub + +Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice. + +![Intro to GitHub](../images/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pre-lezione +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=it) + +## Introduzione + +In questa lezione tratteremo come: + +- tracciare il lavoro che si fa sulla propria macchina +- lavorare con altri su progetti +- come contribuire a software open source + +### Prerequisiti + +Prima di iniziare, si dovrebbe verificare se Git è installato. Dal terminale digitare: +`git --version` + +Se Git non è installato, [scaricare Git](https://git-scm.com/downloads). Poi impostare il proprio profilo locale Git dal terminale: +* `git config --global user.name "il-proprio-nominativo"` +* `git config --global user.email "la-propria-email"` + +Per verificare se Git è già configurato si può digitare: +`git config --list` + +E' anche necessario un account GitHub, un editor di codice (tipo Visual Studio Code), e sarà necessario aprire il proprio terminale (o prompt di comando). + +Navigare su [github.com](https://github.com/) e creare un account se non se ne dispone già di uno, oppure accedere e compilare il proprio profilo. + +✅ GitHub non è il solo deposito di codice nel mondo, ce ne sono altri, ma GitHub è il più conosciuto. + +### Preparazione + +Servirà sia una cartella con il codice di un progetto sulla propria macchina locale (laptop o PC), e un repository pubblico su GitHub, che servirà come esempio su come contribuire a progetti di altri. + +--- + +## Gestione del codice + +Diciamo che si ha una cartella in locale con del codice di un progetto e che si vuole iniziare a tracciarne lo sviluppo usando git - il sistema di controllo di versione. Alcuni paragonano l'uso di git alla scrittura di una lettera d'amore a se stessi nel futuro. Leggendo i messaggi di commit giorni, settimane o mesi più tardi si dovrà essere in grado di ricordare perchè è stata presa una certa decisione, o ripristinare ("rollback") una modifica - questo è, quando si scrivono dei buoni "messaggi di commit". + +### Compito: Creare un repository e inserirvi codice via commit + +1. **Creare un repository su GitHub**. Su GitHub.com, nella scheda repositories, o dalla barra di navigazione in alto a destra, trovare il bottone **new repository**. + + 1. Dare un nome al proprio repository (cartella) + 1. Selezionare **create repository**. + +1. **Navigare verso la propria cartella di lavoro**. Nel proprio terminale, portarsi nella cartella (detta anche directory) che si vuole iniziare a tracciare. Digitare: + + ```bash + cd [nome della cartella] + ``` + +1. **Inizializzare un repository git**. Nel proprio progetto digitare: + + ```bash + git init + ``` + +1. **Verifica stato**. Per verificare lo stato del proprio repository digitare: + + ```bash + git status + ``` + + il risultato potrebbe essere qualcosa tipo: + + ```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 + ``` + + In genere un comando `git status` informa circa quali file sono pronti per essere _salvati_ nel repository o quali modifiche sono state effettuate che si vogliono persistere. + +1. **Aggiungere tutti i file per la tracciatura** + Fase nota anche come aggiungere file nell'area di staging. + + ```bash + git add . + ``` + + Gli argomenti `git add` più `.` indicano che tutti i propri file e modifiche sono selezionati per la tracciatura. + +1. **Aggiungere file selezionati per la tracciatura** + + ```bash + git add [file o nome cartella] + ``` + + Questo consente di aggiungere file nell'area di staging quando non si vogliono aggiungere tutti in una volta. + +1. **Togliere dall'area di staging tutti i file** + + ```bash + git reset + ``` + + Questo comando consente di togliere tutti i file dall'area di staging. + +1. **Togliere dall'area di staging uno specifico file** + + ```bash + git reset [file o nome cartella] + ``` + + Questo comando consente di togliere dall'area di staging uno specifico file che non si vuole includere nel commit successivo. + +1. **Persistere il proprio lavoro**. A questo punto sono stati aggiunti tutti i file alla cosiddetta _area di staging_. Un posto nel quale Git sta tracciando i propri file. Per rendere permanenti le modifiche occorre eseguire un'azione di _commit_ dei file. Per farlo si crea un _commit_ con il comando `git commit`. Un _commit_ rappresenta un punto di salvataggio nella storia del proprio repository. Digitare questo per creare un _commit_: + + ```bash + git commit -m "primo commit" + ``` + + Questo esegue il commit di tutti i file a suo tempo inclusi, aggiungendo il messaggio 'primo commit'. Per messaggi di commit successivi si vorrà essere più descrittivi nell'esposizione per identificare il tipo di modifiche effettuate. + +1. **Connettere il repository Git locale a GitHub**. Un repository Git va bene sulla propria macchina ma a un certo punto si vuole avere una copia dei propri file da qualche altra parte e anche invitare altre persone a lavorare al proprio progetto. Un gran posto per fare questo è GitHub. Si ricorderà che è stato già creato un repository in GitHub quindi la sola cosa da fare è connettere il repository Git locale con GitHub. Il comando `git remote add` farà proprio questo. Digitare il comando: + + > Nota, prima di digitare il comando portarsi sulla propria pagina del repository su GitHub per trovare l'URL del repository. Dovrà essere usato nel comando seguente. Sostituire `repository_name` con il proprio URL di GitHub e `username` con il proprio nome utente di github. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Questo crea un _remote_, o connessione, chiamata "origin" che punta al repository GitHub precedentemente creato. + +1. **Inviare file locali a GitHub**. Fino ad ora è stata creata una _connessione_ tra il repository locale e quello GitHub. Ora si inviano i file locali a GitHub usando il comando `git push`, in questo modo: + + ```bash + git push -u origin main + ``` + + Questo invia i propri commit nel ramo "main" di GitHub. + +1. **Aggiungere ulteriori modifiche**. Se si vuole continuare a fare modifiche e inviarle a GitHub occorre usare uno dei tre comandi seguenti: + + ```bash + git add . + git commit -m "digitare qui il messaggio di commit" + git push + ``` + + > Suggerimento, Si potrebbe anche utilizzare un file `.gitignore` per evitare che alcuni file che non si vogliono tracciare finiscano su GitHub - come le note che si salvano sulla cartella del progetto ma che non sono adatte in un repository pubblico. Si possono trovare modelli di file `.gitignore` a [modelli .gitignore](github.com/github/gitignore). + +#### Messaggi di commit + +Una grande riga di oggetto per un commit Git completa la seguente frase: +Se applicato, questo commit farà ... (qui la vostra riga oggetto) + +Per l'oggetto utilizzare l'imperativo presente: "modifica" non "modificato" o "modifiche"- Come per l'oggetto nel corpo (opzionale) usar4 l'imperativo presente. Il corpo dovrebbe includere il motivo della modifica e il confronto con il precedente comportamento. Si sta spiegando il `perchè`, non il `come`. + +✅ Si prenda qualche minuto per esplorare GitHub. E' possibile scovare un bel messaggio di commit? Se ne puà trovare uno assolutamente minimale? Quali informazioni si pensa che siano le più importanti e utili per un messaggio di commit? + +### Compito: Collaborare + +La ragione principale per inserire cose in GitHub è di fare in modo che si possa collaborare tra sviluppatori. + +## Lavorare su progetti con altri + +Nel proprio repository, portarsi a `Insights > Community` per vedere come il proprio progetto si confronta con gli standard della comunità. + + Ecco alcune cose che possono migliorare il proprio repository GitHub: + - **Descrizione**. E' stata aggiunta una descrizione per il proprio progetto? + - **README**. E' stato aggiunto un README (leggimi)? GitHub fornisce una traccia per scrivere un [README](https://docs.github.com/articles/about-readmes/). + - **Linee guida per contribuire**. Il proprio progetto fornisce [linne guida per contribuire](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Codice di Condotta**. un [Codice di Condotta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Licenza**. Forse la più imporatante, una [licenza](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + +Tutte queste risorse favoriranno la salita a bordo di nuovi elementi nella squadra. Queste sono in genere il tipo di cose che i nuovi contributori cercano anche prima di dare un'occhiata al codice, per scoprire se il progetto è il posto giusto per spendere il loro tempo. + +✅ I file README, sebbene richiedono tempo per prepararli, sono spesso trascurati da manutentori troppo occupati. E' possibile trovare un esempio di uno particolarmente descrittivo? Nota: ci sono alcuni [strumenti per aiutare la creazione di buoni README](https://www.makeareadme.com/) che si potrebbero provare. + +### Compito: Fondere del codice + +La documentazione per la collaborazione aiuta a fare sì che la gente contribuisca al progetto. Spiega che tipo di collaborazione ci si deve attendere e come funziona il processo. I contributori dovranno compiere una serie di passi per poter contribuire a un repository su GitHub: + +1. **Biforcare il repository** Probabilmente si vorrà che la gente possa _biforcare_ il proprio progetto (forking). Questa azione crea una replica di un repository al quale si vuole contribuire sul profilo del contributore su GitHub. +1. **Clonare**. Da qui verrà eseguita una azione di clonazione del progetto sulla macchina locale del contributore. +1. **Creare un ramo**. Sarà richiesto al contributore di creare un _ramo_ (branch) per il suo lavoro. +1. **Concentrare le modifiche del contributore su una area**. Richiedere ai contributori di concentrarsi su una cosa sola alla volta - in questo modo le possibilità che si possa _fondere_ (merge) il lavoro del contributore sono più alte. Se viene scritta la risoluzione di un bug, o viene aggiunta una nuova funzionalità o vengono aggiornati parecchi test - cosa succede se si vuole o si può, solo implementarne 2 su 3 o 1 su 3 di queste modifiche? + +✅ Si immagini una situazione dove i rami sono particolarmente critici per la scrittura e lo sviluppo di buon codice. A quali casi d'uso sono stati individuati? + +> Nota, siate il cambiamento che volete vedere nel mondo, e si creino rami anche per il proprio lavoro. Qualsiasi commit che verrà fatto sarà su rami che si sta attualmente *verificando* (check out). Usare `git status` per vedere su quale ramo ci si trova attualmente. + +Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia già eseguito il _fork_ e _clonato_ il repository in modo che lo stesso sia pronto per lavorarci, sulla sua macchina locale: + +1. **Creare un ramo**. Usare il comando `git branch` per creare un ramo che conterrà le modifiche per le quali si è offerta la collaborazione: + + ```bash + git branch [branch-name] + ``` + +1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git checkout`: + + ```bash + git checkout [nome ramo] + ``` + +1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi: + + ```bash + git add . + git commit -m "le mie modifiche" + ``` + + Assicurarsi che il commit abbia un buon messaggio, a beneficio proprio e del manutentore del repository sul quale si sta collaborando. + +1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi: + + ```bash + git checkout main + git pull + ``` + + A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi: + + ```bash + git checkout [branch_name] + git merge main + ``` + + Questo porterà tutte le modifiche da `main` verso il proprio ramo, augurandosi che si possa poi continuare. In caso contrario VS Code vi può indicare dove Git si _confonde_ e si potranno modificare i file coinvolti per determinare quale contenuto sia il più accurato. + +1. **Inviare il proprio lavoro a GitHub**. Questo significa due cose. Spingere il proprio ramo verso il proprio repository, quindi aprire una PR, Pull Request. + + ```bash + git push --set-upstream origin [nome-ramo] + ``` + + Il comando qui sopra crea il ramo sulla propria biforcazione del repository. + +1. **Aprire una PR**. Successivamente, si vorrà aprire una Pull Request. Si fa portandosi nel repository biforcato su GitHub. Si vedrà una indicazione su GitHub dove viene chiesto se si vuol creare una nuova PR, cliccando su questa si verrà portati su una interfaccia dove si potrà cambiare il titolo del messaggio di commit e fornire una descrizione più adatta. Ora il manutentore del repository che è stato biforcato vedrà questa PR e _incrociando le dita_ apprezzerà e _fonderà_ (merge) la PR. Ora si avrà contribuito, yay :) + +1. **Pulire**. E' considerata buona pratica effettuare una _pulizia_ dopo il lavoro compiuto. Si vorrà pulire sia il ramo locale che quello spinto su GitHub. Per prima cosa cancellarlo localmente con il comando: + + ```bash + git branch -d [nome-ramo] + ``` + + Successivamente assicurarsi di andare nella pagina GitHub per del repository biforcato per eliminare il ramo remoto che è stato appena spinto. + +`Pull request` sembra un termine sciocco in quanto in realtà si vogliono portare le proprie modifiche al progetto. Ma il manutentore (proprietario del progetto) o la squadra base deve valutare i cambiamenti dei contributori prima di fonderli con il ramo principale del progetto, quindi in realtà il contributore sta chiedendo una decisione sulle modifiche al manutentore. + +Una pull request è il posto dove confrontare e discutere le differenze introdotte su un ramo con valutazioni, commenti, verifiche integrate e altro. Una buona pull request segue grossolanmente le stesse regole di un messaggio di commit. Si può aggiungere un riferimento al problema nel tracciatore di problemi (issue tracker), quando il proprio lavoro risolve ad esempio un problema. Questo viene fatto usando un `#` seguito dal numero del vostro problema. Ad esempio `#97`. + +🤞Incrociando le dita si spera che tutte le verifiche vengano superate e che il proprietario(i) del progetto voglia incorporare le modifiche all'interno del progetto🤞 + +Aggiornare il proprio ramo corrente locale con tutti i nuovi commit per il ramo remoto corrispondente su GitHub: + +`git pull` + +## Come contribuire a progetti open source + +Per prima cosa, trovare un repository - o repo - che interessi su GitHub e per il quale si desideri contribuire con una modifica. Si vorrà copiare il contenuto sulla propria macchina. + +✅ Un buon modo di trovare repository 'adatti per i principianti' è di [cercare il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copiare un repository localmente](../images/clone_repo.png) + +Ci sono parecchi modi di copiare il codice. Un modo è "clonare" il contenuto del repository, usando HTTPS, SSH, o usando l'interfaccia da riga di comando GitHub CLI. + +Aprire il proprio terminale e clonare il repository così: +`git clone https://github.com/URLdelProgetto` + +Per lavorare su un progetto, passare alla corretta cartella: +`cd URLdelProgetto` + +Si può anche aprire l'intero progetto usando [Codespaces](https://github.com/features/codespaces), l'editor di codice incorporato di GitHub, oppure un ambiente di sviluppo nel cloud, oppure [GitHub Desktop](https://desktop.github.com/). + +Infine si può scaricare il codice in una cartella compressa. + +### Qualche altra cosa interessante riguardo a GitHub + +E' possibile attribuire una stella, osservare, e/o "biforcare" un qualsiasi progetto pubblico su GitHub. Si possono trovare i propri repository che hanno stelle nel menù a tendina in alto a destra. E' come mettere un segnalibro, ma per il codice. + +I progetti che hanno un tracciatore di problemi, per la maggior parte nella scheda "Issues" di GitHub a meno di indicazioni diverse, è dove la gente discute dei problemi relativi al progetto. E la scheda Pull Requests è dove la gente discute e verifica le modifiche in corso d'opera. + +I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o canali chat come Slack, Discord o IRC. + +✅ Dare una occhiata al proprio nuovo repository in GitHub e provare alcune cose, come modificare la configurazione, aggiungere informazioni al repository e creare un progetto come un tabellone Kanban. C'è tanto che si può fare! + +--- + +## 🚀 Sfida + +Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche. + +## Quiz Post-lezione +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=it) + +## Revisione e Auto Apprendimento + +Leggene di più al riguardo: [contribuire a software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Esercizio, esercizio, esercizio. GitHub ha ottimi percorsi di apprendimento disponibili via [lab.github.com](https://lab.github.com/): + +- [Prima settimana su GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +Si potranno trovare anche altri laboratori più avanzati. + +## Compito + +Completare [la prima settimana nel laboratorio di apprendimento di GitHub](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md index b36d184c..e91452ed 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ko.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ko.md @@ -2,11 +2,11 @@ 이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다. -![Intro to GitHub](images/webdev101-github.png) +![Intro to GitHub](../images/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=ko) ## 소개 @@ -242,9 +242,9 @@ pull request는 리뷰, 코멘트, 통합 테스트 등을 통해 브랜치에 먼저, GitHub에서 관심있고 변경 사항을 기여할 저장소를 찾아 보겠습니다. 그 곳의 내용을 자신의 장치에 복사하고 싶을 것입니다. -✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검새'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검색하는 것입니다.'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copy a repo locally](images/clone_repo.png) +![Copy a repo locally](../images/clone_repo.png) 코드를 복사하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 HTTPS, SSH 또는 GitHub CLI (Command Line 인터페이스)를 사용하여 저장소의 내용을 "복제"하는 것입니다. @@ -275,7 +275,7 @@ GitHub의 모든 공개 저장소에 스타 표시, 워치 및/또는 "포크" 친구와 페어링하여 서로의 코드를 작업하세요. 공동으로 프로젝트를 만들고, 코드를 포크하고, 브랜치를 만들고, 변경 사항을 병합합니다. ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/1-getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md b/1-getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md deleted file mode 100644 index 2cf3f87d..00000000 --- a/1-getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md +++ /dev/null @@ -1,17 +0,0 @@ -*Complete this quiz by checking one answer per question.* - -1. Lighthouse only checks for accessibility problems - -- [ ] true -- [ ] false - -2. Color-safe palettes help people with - -- [ ] color-blindness -- [ ] visual impairments -- [ ] both the above - -3. Descriptive links are vital for accessible web sites - -- [ ] true -- [ ] false \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md b/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md deleted file mode 100644 index ea0928fe..00000000 --- a/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md +++ /dev/null @@ -1,17 +0,0 @@ -*Complete this quiz in class* - -1. An accessible web site can be checked in which browser tool - -- [ ] Lighthouse -- [ ] Deckhouse -- [ ] Cleanhouse - -2. You need a physical screen reader to test accessibility for visually-impaired users - -- [ ] true -- [ ] false - -3. Accessibility is only important on government web sites - -- [ ] true -- [ ] false \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 99723168..99afa170 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. > @@ -22,9 +22,17 @@ One of the best-known accessibility tools are screen readers. At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader. -Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately screen readers are built into most operating systems, and many browsers contain extensions to emulate a screen reader. +Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems. -✅ Try a screen reader browser extension or tool. One that works on Windows only is [JAWS](https://webaim.org/articles/jaws/). Browsers also have built-in tools that can be used for this purpose; check out [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. + +✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. + +### Zoom + +Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. + +Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Contrast checkers @@ -54,18 +62,16 @@ People see the world in different ways, and this includes colors. When selecting ✅ Identify a web site that is very problematic in its use of color. Why? -### Properly highlight text - -Highlighting text by color, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), or other [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) does not inherently inform a screen reader of its importance. A word could be bold because it's a key word, or because its the first word and the designer decided it should be bold. - -When a particular phrase needs to be highlighted, use the `` or `` elements. These will indicate to a screen reader that those items are important. - ### Use the correct HTML -With CSS and JavaScript it's possible to make any element look like any type of control. `` could be used to create a `