diff --git a/translations/br/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/br/1-getting-started-lessons/1-intro-to-programming-languages/README.md index f6817ddf2..c29f18bb5 100644 --- a/translations/br/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/br/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Olha, eu entendo totalmente se programar parece intimidante agora. Quando comece Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não apenas possível, mas seriamente viciante. Estou falando dos mesmos editores, navegadores e fluxos de trabalho que os desenvolvedores da Netflix, Spotify e do seu estúdio indie favorito usam todos os dias. E aqui está a parte que vai te fazer dançar de felicidade: a maioria dessas ferramentas profissionais e padrão da indústria são completamente gratuitas! -![Introdução à Programação](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.br.png) +![Introdução à Programação](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/br/1-getting-started-lessons/2-github-basics/README.md b/translations/br/1-getting-started-lessons/2-github-basics/README.md index 085e0afff..4d51def7d 100644 --- a/translations/br/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/br/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Eu sei que isso pode parecer muito no começo – eu mesmo lembro de olhar para Vamos embarcar nessa jornada juntos, passo a passo. Sem pressa, sem pressão – apenas você, eu e algumas ferramentas muito legais que estão prestes a se tornar suas melhores amigas! -![Introdução ao GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.br.png) +![Introdução ao GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do se ✅ Uma boa maneira de encontrar repositórios 'amigáveis para iniciantes' é [buscar pela tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copiar um repositório localmente](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.br.png) +![Copiar um repositório localmente](../../../../translated_images/clone_repo.5085c48d666ead57.br.png) Existem várias maneiras de copiar código. Uma delas é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou o GitHub CLI (Interface de Linha de Comando). diff --git a/translations/br/1-getting-started-lessons/3-accessibility/README.md b/translations/br/1-getting-started-lessons/3-accessibility/README.md index c232b219a..b466c36b2 100644 --- a/translations/br/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/br/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Criando Páginas Web Acessíveis -![Tudo Sobre Acessibilidade](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.br.png) +![Tudo Sobre Acessibilidade](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/br/2-js-basics/1-data-types/README.md b/translations/br/2-js-basics/1-data-types/README.md index 8e387fd2c..4cb6b3482 100644 --- a/translations/br/2-js-basics/1-data-types/README.md +++ b/translations/br/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Noções Básicas de JavaScript: Tipos de Dados -![Noções Básicas de JavaScript - Tipos de Dados](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.br.png) +![Noções Básicas de JavaScript - Tipos de Dados](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/br/2-js-basics/2-functions-methods/README.md b/translations/br/2-js-basics/2-functions-methods/README.md index 3d51b91b8..fdd7ede49 100644 --- a/translations/br/2-js-basics/2-functions-methods/README.md +++ b/translations/br/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Noções Básicas de JavaScript: Métodos e Funções -![Noções Básicas de JavaScript - Funções](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.br.png) +![Noções Básicas de JavaScript - Funções](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/br/2-js-basics/3-making-decisions/README.md b/translations/br/2-js-basics/3-making-decisions/README.md index eb40da27e..7efde395d 100644 --- a/translations/br/2-js-basics/3-making-decisions/README.md +++ b/translations/br/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Fundamentos de JavaScript: Tomando Decisões -![Fundamentos de JavaScript - Tomando decisões](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.br.png) +![Fundamentos de JavaScript - Tomando decisões](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/br/2-js-basics/4-arrays-loops/README.md b/translations/br/2-js-basics/4-arrays-loops/README.md index 5262144e5..6d08b70fb 100644 --- a/translations/br/2-js-basics/4-arrays-loops/README.md +++ b/translations/br/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Noções Básicas de JavaScript: Arrays e Loops -![Noções Básicas de JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.br.png) +![Noções Básicas de JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/br/3-terrarium/1-intro-to-html/README.md b/translations/br/3-terrarium/1-intro-to-html/README.md index 241bc7e6f..855537950 100644 --- a/translations/br/3-terrarium/1-intro-to-html/README.md +++ b/translations/br/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Introdução ao HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.br.png) +![Introdução ao HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) HTML, ou Linguagem de Marcação de Hipertexto, é a base de todos os sites que você já visitou. Pense no HTML como o esqueleto que dá estrutura às páginas da web – ele define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde "vestirá" seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo isso possível. @@ -88,7 +88,7 @@ Você criará uma pasta dedicada para seu projeto de terrário e adicionará seu 4. No painel Explorer, clique no ícone "Novo Arquivo" 5. Nomeie seu arquivo como `index.html` -![Explorador do VS Code mostrando a criação de novo arquivo](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.br.png) +![Explorador do VS Code mostrando a criação de novo arquivo](../../../../translated_images/vs-code-index.e2986cf919471eb9.br.png) **Opção 2: Usando Comandos no Terminal** ```bash diff --git a/translations/br/3-terrarium/2-intro-to-css/README.md b/translations/br/3-terrarium/2-intro-to-css/README.md index b5d8a693a..e439dba67 100644 --- a/translations/br/3-terrarium/2-intro-to-css/README.md +++ b/translations/br/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Introdução ao CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.br.png) +![Introdução ao CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) Lembra como seu terrário em HTML parecia bem básico? Com o CSS, transformamos essa estrutura simples em algo visualmente atraente. @@ -205,7 +205,7 @@ body { Abra as ferramentas de desenvolvedor do seu navegador (F12), navegue até a aba Elementos e inspecione seu elemento `

`. Você verá que ele herda a família de fontes do body: -![fonte herdada](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.br.png) +![fonte herdada](../../../../translated_images/1.cc07a5cbe114ad1d.br.png) ✅ **Hora de Experimentar**: Tente definir outras propriedades herdáveis no `` como `color`, `line-height` ou `text-align`. O que acontece com seu título e outros elementos? @@ -599,7 +599,7 @@ Pronto para aprimorar seu terrário com reflexos realistas no vidro? Essa técni Você criará destaques sutis que simulam como a luz reflete nas superfícies de vidro. Essa abordagem é semelhante à usada por pintores renascentistas como Jan van Eyck, que utilizavam luz e reflexos para fazer o vidro pintado parecer tridimensional. Aqui está o que você deve alcançar: -![terrário finalizado](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.br.png) +![terrário finalizado](../../../../translated_images/terrarium-final.2f07047ffc597d0a.br.png) **Seu desafio:** - **Crie** formas ovais sutis, brancas ou de cor clara, para os reflexos do vidro diff --git a/translations/br/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/br/3-terrarium/3-intro-to-DOM-and-closures/README.md index bf1f2b40a..18d83f86a 100644 --- a/translations/br/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/br/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM e um closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.br.png) +![DOM e um closure](../../../../translated_images/webdev101-js.10280393044d7eaa.br.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) Bem-vindo a um dos aspectos mais envolventes do desenvolvimento web - tornar as coisas interativas! O Modelo de Objeto de Documento (DOM) é como uma ponte entre seu HTML e JavaScript, e hoje vamos usá-lo para dar vida ao seu terrário. Quando Tim Berners-Lee criou o primeiro navegador web, ele imaginou uma web onde os documentos poderiam ser dinâmicos e interativos - o DOM torna essa visão possível. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Representação da árvore DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.br.png) +![Representação da árvore DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.br.png) > Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Entendendo Closures**: Closures são um tópico significativo em JavaScript, e muitos desenvolvedores os utilizam por anos antes de compreender totalmente todos os aspectos teóricos. Hoje, estamos focando na aplicação prática - você verá closures surgirem naturalmente enquanto construímos nossos recursos interativos. A compreensão se desenvolverá à medida que você perceber como eles resolvem problemas reais. -![Representação da árvore DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.br.png) +![Representação da árvore DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.br.png) > Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Agora teste seu terrário interativo! Abra seu arquivo `index.html` em um navega - **Suporte entre dispositivos**: Funciona em desktop e dispositivos móveis - **Consciente do desempenho**: Sem vazamentos de memória ou cálculos redundantes -![terrário finalizado](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.br.png) +![terrário finalizado](../../../../translated_images/terrarium-final.0920f16e87c13a84.br.png) --- diff --git a/translations/br/3-terrarium/README.md b/translations/br/3-terrarium/README.md index 7894e5fe3..a366eaaed 100644 --- a/translations/br/3-terrarium/README.md +++ b/translations/br/3-terrarium/README.md @@ -1,43 +1,30 @@ -# Meu Terrário: Um projeto para aprender sobre HTML, CSS e manipulação do DOM com JavaScript 🌵🌱 +## Publique seu Terrarium -Uma pequena meditação de código com arrastar e soltar. Com um pouco de HTML, JS e CSS, você será capaz de construir uma interface web, estilizar e até adicionar várias interações de sua escolha. - -![meu terrário](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.br.png) - -# Lições - -1. [Introdução ao HTML](./1-intro-to-html/README.md) -2. [Introdução ao CSS](./2-intro-to-css/README.md) -3. [Introdução ao DOM e Closures em JS](./3-intro-to-DOM-and-closures/README.md) - -## Créditos - -Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper) - -O terrário criado via CSS foi inspirado no vidro de Jakub Mandra no [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -As ilustrações foram desenhadas à mão por [Jen Looper](http://jenlooper.com) com a ajuda do Procreate. - -## Publique seu Terrário - -Você pode publicar seu terrário na web usando o Azure Static Web Apps. +Você pode publicar seu Terrarium na web usando **Azure Static Web Apps**. 1. Faça um fork deste repositório -2. Pressione este botão +2. Pressione este botão 👇 + +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -[![Botão para Implantar no Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) +3. Siga o assistente de configuração para criar seu app. + - Defina a **Raiz do app** para `/solution` ou para a raiz do seu código. + - Não há API neste app, então você pode pular a configuração da API. + - Uma pasta `.github` será criada automaticamente para ajudar o Azure Static Web Apps a compilar e publicar seu app. -3. Siga o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo como `/solution` ou a raiz do seu código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta do GitHub será criada no repositório que você fez o fork, ajudando os serviços de build do Azure Static Web Apps a construir e publicar seu aplicativo em uma nova URL. +--- + **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. \ No newline at end of file +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução. + \ No newline at end of file diff --git a/translations/br/3-terrarium/solution/README.md b/translations/br/3-terrarium/solution/README.md index 433dab62e..1128768e7 100644 --- a/translations/br/3-terrarium/solution/README.md +++ b/translations/br/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Uma pequena meditação de código com arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode criar uma interface web, estilizar e adicionar interatividade. -![meu terrário](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.br.png) +![meu terrário](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.br.png) ## Créditos diff --git a/translations/br/5-browser-extension/1-about-browsers/README.md b/translations/br/5-browser-extension/1-about-browsers/README.md index 048d510f9..b20435f74 100644 --- a/translations/br/5-browser-extension/1-about-browsers/README.md +++ b/translations/br/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Esboço de navegador](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.br.jpg) +![Esboço de navegador](../../../../translated_images/browser.60317c9be8b7f84a.br.jpg) > Esboço por [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Quiz Pré-Aula @@ -79,7 +79,7 @@ Esse processo reflete como o primeiro navegador web, WorldWideWeb, foi projetado ✅ **Um pouco de história**: O primeiro navegador foi chamado 'WorldWideWeb' e foi criado por Sir Timothy Berners-Lee em 1990. -![navegadores antigos](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.br.jpg) +![navegadores antigos](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.br.jpg) > Alguns navegadores antigos, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Como os Navegadores Processam Conteúdo Web @@ -198,7 +198,7 @@ quadrantChart Entender o processo de instalação de extensões ajuda você a antecipar a experiência do usuário ao instalar sua extensão. O processo de instalação é padronizado nos navegadores modernos, com pequenas variações no design da interface. -![captura de tela do navegador Edge mostrando a página edge://extensions aberta e o menu de configurações aberto](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.br.png) +![captura de tela do navegador Edge mostrando a página edge://extensions aberta e o menu de configurações aberto](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.br.png) > **Importante**: Certifique-se de ativar o modo desenvolvedor e permitir extensões de outras lojas ao testar suas próprias extensões. @@ -313,10 +313,10 @@ Isso segue o princípio de divulgação progressiva usado no design de interface ### Visão Geral das Telas da Extensão **Tela de Configuração** - Configuração inicial do usuário: -![captura de tela da extensão concluída aberta em um navegador, exibindo um formulário com campos para nome da região e chave de API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.br.png) +![captura de tela da extensão concluída aberta em um navegador, exibindo um formulário com campos para nome da região e chave de API.](../../../../translated_images/1.b6da8c1394b07491.br.png) **Tela de Resultados** - Exibição de dados de pegada de carbono: -![captura de tela da extensão concluída exibindo valores de uso de carbono e porcentagem de combustíveis fósseis para a região US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.br.png) +![captura de tela da extensão concluída exibindo valores de uso de carbono e porcentagem de combustíveis fósseis para a região US-NEISO.](../../../../translated_images/2.1dae52ff08042246.br.png) ### Construindo o Formulário de Configuração diff --git a/translations/br/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/br/5-browser-extension/2-forms-browsers-local-storage/README.md index d156cb4e7..230bafb76 100644 --- a/translations/br/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/br/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Painel de armazenamento local](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.br.png) +![Painel de armazenamento local](../../../../translated_images/localstorage.472f8147b6a3f8d1.br.png) > ⚠️ **Consideração de Segurança**: Em aplicativos de produção, armazenar chaves de API no LocalStorage apresenta riscos de segurança, já que o JavaScript pode acessar esses dados. Para fins de aprendizado, essa abordagem funciona bem, mas aplicativos reais devem usar armazenamento seguro no servidor para credenciais sensíveis. diff --git a/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md index 46f933371..b4d2ea734 100644 --- a/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/br/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Para abrir as Ferramentas de Desenvolvedor no Edge, clique nos três pontos no c Vamos experimentar isso. Abra um site (Microsoft.com funciona bem para isso) e clique no botão 'Gravar'. Agora atualize a página e observe o profiler capturar tudo o que acontece. Quando você parar a gravação, verá um detalhamento de como o navegador 'escreve scripts', 'renderiza' e 'pinta' o site. Isso me lembra como o controle da missão monitora cada sistema durante o lançamento de um foguete - você obtém dados em tempo real sobre exatamente o que está acontecendo e quando. -![Profiler do Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.br.png) +![Profiler do Edge](../../../../translated_images/profiler.5a4a62479c5df01c.br.png) ✅ A [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tem muitos mais detalhes se você quiser se aprofundar. @@ -136,11 +136,11 @@ Selecione elementos da linha do tempo do perfil para ampliar os eventos que acon Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo: -![Instantâneo do profiler do Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.br.png) +![Instantâneo do profiler do Edge](../../../../translated_images/snapshot.97750180ebcad737.br.png) Verifique o painel de Log de Eventos para ver se algum evento levou mais de 15 ms: -![Log de eventos do Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.br.png) +![Log de eventos do Edge](../../../../translated_images/log.804026979f3707e0.br.png) ✅ Familiarize-se com seu profiler! Abra as ferramentas de desenvolvedor neste site e veja se há algum gargalo. Qual é o ativo que carrega mais lentamente? O mais rápido? diff --git a/translations/br/5-browser-extension/README.md b/translations/br/5-browser-extension/README.md index 0cea20194..b87d34e53 100644 --- a/translations/br/5-browser-extension/README.md +++ b/translations/br/5-browser-extension/README.md @@ -23,7 +23,7 @@ Essa extensão pode ser chamada sob demanda por um usuário, uma vez que uma cha ### Créditos -![uma extensão de navegador verde](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![uma extensão de navegador verde](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Créditos diff --git a/translations/br/5-browser-extension/solution/README.md b/translations/br/5-browser-extension/solution/README.md index a31e936fc..81191334e 100644 --- a/translations/br/5-browser-extension/solution/README.md +++ b/translations/br/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Utilizar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações. -![captura de tela da extensão](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura de tela da extensão](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Primeiros Passos @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO'). -![instalando](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalando](../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/solution/translation/README.fr.md b/translations/br/5-browser-extension/solution/translation/README.fr.md index a7fe084f1..ccb486e5e 100644 --- a/translations/br/5-browser-extension/solution/translation/README.fr.md +++ b/translations/br/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador para que você possa receber um lembrete diretamente no navegador sobre o consumo de eletricidade da sua região. O uso dessa extensão personalizada ajudará você a tomar decisões sobre suas atividades com base nessas informações. -![captura da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Primeiros Passos @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar extensão descompactada' para adicionar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail no campo desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de Eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO'). -![instalação](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalação](../../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer um indicador sobre quais atividades de alto consumo energético seriam apropriadas realizar. O conceito por trás desse sistema de 'pontos' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/solution/translation/README.hi.md b/translations/br/5-browser-extension/solution/translation/README.hi.md index 692184d48..248a0efbf 100644 --- a/translations/br/5-browser-extension/solution/translation/README.hi.md +++ b/translations/br/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Usando a API CO2 Signal da tmrow para rastrear o uso de eletricidade, esta extensão de navegador foi criada para lembrar você sobre o impacto do uso de energia na sua região enquanto navega. Utilizar esta extensão pode ajudá-lo a tomar decisões informadas com base nessas informações. -![Captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![Captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Começando @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para encontrar o painel de extensões. A partir daí, selecione 'Carregar sem empacotar' para carregar uma nova extensão. No prompt, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API do CO2 Signal ([obtenha por e-mail aqui](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e [o código da sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (por exemplo, em Boston, eu uso 'US-NEISO'). -![instalando](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalando](../../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois que a chave de API e o código da região forem inseridos na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o uso de energia na sua região e fornecer um indicador sobre quais atividades intensivas em energia são mais adequadas para o momento. O conceito por trás deste sistema de 'ponto' foi inspirado pela extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/solution/translation/README.it.md b/translations/br/5-browser-extension/solution/translation/README.it.md index 3869b8507..0948f966f 100644 --- a/translations/br/5-browser-extension/solution/translation/README.it.md +++ b/translations/br/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Será utilizada a API Signal CO2 da tmrow para monitorar o uso de eletricidade e criar uma extensão para o navegador, permitindo que você tenha um lembrete diretamente no navegador sobre o impacto do consumo de eletricidade na sua região. O uso dessa extensão personalizada ajudará a avaliar suas atividades com base nessas informações. -![captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Para Começar @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, utilize o menu de "três pontos" no canto superior direito do navegador para acessar o painel de Extensões. Se ainda não estiver ativado, habilite o Modo Desenvolvedor (no canto inferior esquerdo). Selecione "Carregar sem compactação" para adicionar uma nova extensão. No prompt, abra a pasta "dist" e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal (você pode [obter uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e o [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [mapa elétrico](https://www.electricitymap.org/map) (em Boston, por exemplo, "US-NEISO"). -![instalação](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalação](../../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois que a chave de API e a região forem inseridas na interface da extensão, o ponto colorido na barra de extensões do navegador deve mudar para refletir o consumo de energia da região e fornecer uma indicação sobre quais atividades de alto consumo energético seriam apropriadas para realizar. O conceito por trás desse sistema de "pontos" foi inspirado na [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/solution/translation/README.ja.md b/translations/br/5-browser-extension/solution/translation/README.ja.md index 25182926b..3c92452d8 100644 --- a/translations/br/5-browser-extension/solution/translation/README.ja.md +++ b/translations/br/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Com a API CO2 Signal da tmrow, você pode criar uma extensão de navegador que exibe lembretes sobre o consumo de energia na sua região diretamente no navegador. Essa extensão permite que você acompanhe o uso de energia e tome decisões informadas com base nessas informações. -![captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura de tela da extensão](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Introdução @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, encontre o painel "Extensões" no menu de "três pontos" no canto superior direito do navegador. A partir daí, selecione "Carregar sem compactação" e carregue a nova extensão. Quando solicitado, abra a pasta "dist" para carregar a extensão. Para utilizá-la, você precisará de uma chave de API da CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa dessa página) e do [código correspondente à sua região](http://api.electricitymap.org/v3/zones) no [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, use 'US-NEISO'). -![instalando](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalando](../../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido aparecerá na barra de extensões do navegador. Esse ponto mudará de cor para refletir o consumo de energia na sua região, ajudando você a decidir quais atividades que demandam energia são mais apropriadas naquele momento. O conceito desse sistema de "pontos" foi inspirado na extensão [Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/solution/translation/README.ms.md b/translations/br/5-browser-extension/solution/translation/README.ms.md index 9e0b1ae5f..e4cf7b1d8 100644 --- a/translations/br/5-browser-extension/solution/translation/README.ms.md +++ b/translations/br/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Usando a API CO2 Signal da tmrow para monitorar o consumo de eletricidade, crie uma extensão de navegador que possa alertá-lo sobre o impacto do consumo de energia na sua região. O uso dessa extensão pode ajudá-lo a tomar decisões mais conscientes sobre suas atividades com base nessas informações. -![captura de tela da extensão do navegador](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura de tela da extensão do navegador](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Começando @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem compactação' para adicionar uma nova extensão. Abra a pasta 'dist' quando solicitado, e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa na página) e [o código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO'). -![baixando](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![baixando](../../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois de inserir a chave de API e a região na interface da extensão, um ponto colorido na barra da extensão do navegador mudará para refletir o consumo de energia da sua região e fornecerá sugestões sobre quais atividades intensivas são mais adequadas para o momento. O conceito por trás do sistema de 'pontos' foi inspirado pela [extensão de navegador Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/5-browser-extension/start/README.md b/translations/br/5-browser-extension/start/README.md index 4270b1033..b9feea6d9 100644 --- a/translations/br/5-browser-extension/start/README.md +++ b/translations/br/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Usando a API CO2 Signal da tmrow para monitorar o uso de eletricidade, crie uma extensão de navegador para que você tenha um lembrete diretamente no seu navegador sobre o quão intenso está o consumo de eletricidade na sua região. Usar essa extensão de forma pontual ajudará você a tomar decisões sobre suas atividades com base nessas informações. -![captura de tela da extensão](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.br.png) +![captura de tela da extensão](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.br.png) ## Primeiros Passos @@ -31,7 +31,7 @@ npm run build Para instalar no Edge, use o menu de 'três pontos' no canto superior direito do navegador para acessar o painel de Extensões. A partir daí, selecione 'Carregar sem Empacotamento' para carregar uma nova extensão. Na janela que aparecer, abra a pasta 'dist' e a extensão será carregada. Para utilizá-la, você precisará de uma chave de API para a API do CO2 Signal ([obtenha uma aqui por e-mail](https://www.co2signal.com/) - insira seu e-mail na caixa desta página) e do [código da sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Electricity Map](https://www.electricitymap.org/map) (em Boston, por exemplo, eu uso 'US-NEISO'). -![instalando](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.br.png) +![instalando](../../../../translated_images/install-on-edge.78634f02842c4828.br.png) Depois de inserir a chave de API e a região na interface da extensão, o ponto colorido na barra de extensão do navegador deve mudar para refletir o consumo de energia da sua região e fornecer uma indicação sobre quais atividades intensivas em energia seriam apropriadas para você realizar. O conceito por trás desse sistema de 'ponto' foi inspirado pela [extensão Energy Lollipop](https://energylollipop.com/) para emissões na Califórnia. diff --git a/translations/br/6-space-game/2-drawing-to-canvas/README.md b/translations/br/6-space-game/2-drawing-to-canvas/README.md index 7ceb5904b..c8e5bd9ee 100644 --- a/translations/br/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/br/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![a grade do canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.br.png) +![a grade do canvas](../../../../translated_images/canvas_grid.5f209da785ded492.br.png) > Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Para desenhar no elemento canvas, você seguirá o mesmo processo de três etapas que forma a base de todos os gráficos do canvas. Depois de fazer isso algumas vezes, torna-se algo natural: @@ -329,11 +329,11 @@ Você criará uma página web com um elemento Canvas. Ela deve renderizar uma te - Nave do herói - ![Nave do herói](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.br.png) + ![Nave do herói](../../../../translated_images/player.dd24c1afa8c71e9b.br.png) - Formação 5×5 de monstros - ![Nave do monstro](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.br.png) + ![Nave do monstro](../../../../translated_images/enemyShip.5df2a822c16650c2.br.png) ### Passos Recomendados para Iniciar o Desenvolvimento @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { O resultado final deve ser assim: -![Tela preta com um herói e 5x5 monstros](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.br.png) +![Tela preta com um herói e 5x5 monstros](../../../../translated_images/partI-solution.36c53b48c9ffae2a.br.png) ## Solução diff --git a/translations/br/6-space-game/5-keeping-score/README.md b/translations/br/6-space-game/5-keeping-score/README.md index 3131bf222..5364dc97a 100644 --- a/translations/br/6-space-game/5-keeping-score/README.md +++ b/translations/br/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Sistema de pontuação**: Cada nave inimiga destruída concede 100 pontos (números redondos são mais fáceis para os jogadores calcularem mentalmente). A pontuação será exibida no canto inferior esquerdo. -- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave ![imagem de vida](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.br.png). +- **Contador de vidas**: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de nave ![imagem de vida](../../../../translated_images/life.6fb9f50d53ee0413.br.png). ## Vamos Começar! diff --git a/translations/br/7-bank-project/1-template-route/README.md b/translations/br/7-bank-project/1-template-route/README.md index 7915f39ff..8f0d87da3 100644 --- a/translations/br/7-bank-project/1-template-route/README.md +++ b/translations/br/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Usar o `history.pushState` cria novas entradas no histórico de navegação do navegador. Você pode verificar isso segurando o *botão voltar* do seu navegador, ele deve exibir algo assim: -![Captura de tela do histórico de navegação](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.br.png) +![Captura de tela do histórico de navegação](../../../../translated_images/history.7fdabbafa521e064.br.png) Se você tentar clicar no botão voltar algumas vezes, verá que a URL atual muda e o histórico é atualizado, mas o mesmo template continua sendo exibido. diff --git a/translations/br/7-bank-project/2-forms/README.md b/translations/br/7-bank-project/2-forms/README.md index b2771b6af..daf9886a6 100644 --- a/translations/br/7-bank-project/2-forms/README.md +++ b/translations/br/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Primeiro, vamos observar o que acontece com o envio básico de formulários: 2. Observe as mudanças na barra de endereço do navegador 3. Note como a página recarrega e os dados aparecem na URL -![Captura de tela da mudança de URL do navegador após clicar no botão Registrar](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.br.png) +![Captura de tela da mudança de URL do navegador após clicar no botão Registrar](../../../../translated_images/click-register.e89a30bf0d4bc9ca.br.png) ### Comparação de Métodos HTTP @@ -350,7 +350,7 @@ Vamos configurar seu formulário de registro para se comunicar corretamente com 2. **Clique** no botão "Criar Conta" 3. **Observe** a resposta do servidor no seu navegador -![Uma janela do navegador no endereço localhost:5000/api/accounts, mostrando uma string JSON com dados do usuário](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.br.png) +![Uma janela do navegador no endereço localhost:5000/api/accounts, mostrando uma string JSON com dados do usuário](../../../../translated_images/form-post.61de4ca1b964d91a.br.png) **O que você deve ver:** - **Redirecionamento do navegador** para a URL do endpoint da API @@ -615,7 +615,7 @@ async function register() { 3. **Clique** em "Criar Conta" 4. **Observe** as mensagens do console e o feedback ao usuário -![Captura de tela mostrando mensagem de log no console do navegador](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.br.png) +![Captura de tela mostrando mensagem de log no console do navegador](../../../../translated_images/browser-console.efaf0b51aaaf6778.br.png) **O que você deve ver:** - **Estado de carregamento** aparece no botão de envio @@ -790,7 +790,7 @@ Vamos aprimorar seu formulário de registro com validação robusta que oferece 3. **Tente** caracteres especiais no campo de nome de usuário 4. **Insira** um valor de saldo negativo -![Captura de tela mostrando o erro de validação ao tentar enviar o formulário](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.br.png) +![Captura de tela mostrando o erro de validação ao tentar enviar o formulário](../../../../translated_images/validation-error.8bd23e98d416c22f.br.png) **O que você observará:** - **O navegador exibe** mensagens de validação nativas @@ -952,7 +952,7 @@ Mostre uma mensagem de erro no HTML se o usuário já existir. Aqui está um exemplo de como a página de login final pode ficar após um pouco de estilização: -![Captura de tela da página de login após adicionar estilos CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.br.png) +![Captura de tela da página de login após adicionar estilos CSS](../../../../translated_images/result.96ef01f607bf856a.br.png) ## Quiz Pós-Aula diff --git a/translations/br/7-bank-project/3-data/README.md b/translations/br/7-bank-project/3-data/README.md index a9e3f8e0e..d472f20cb 100644 --- a/translations/br/7-bank-project/3-data/README.md +++ b/translations/br/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Fluxo de atualização em um aplicativo de múltiplas páginas](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.br.png) +![Fluxo de atualização em um aplicativo de múltiplas páginas](../../../../translated_images/mpa.7f7375a1a2d4aa77.br.png) **Por que essa abordagem parecia desajeitada:** - Cada clique significava reconstruir a página inteira do zero @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Fluxo de atualização em um aplicativo de página única](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.br.png) +![Fluxo de atualização em um aplicativo de página única](../../../../translated_images/spa.268ec73b41f992c2.br.png) **Por que os SPAs são muito melhores:** - Apenas as partes que realmente mudaram são atualizadas (inteligente, né?) @@ -523,7 +523,7 @@ if (data.error) { Agora, ao testar com uma conta inválida, você verá uma mensagem de erro útil diretamente na página! -![Captura de tela mostrando a mensagem de erro exibida durante o login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.br.png) +![Captura de tela mostrando a mensagem de erro exibida durante o login](../../../../translated_images/login-error.416fe019b36a6327.br.png) #### Passo 4: Sendo Inclusivo com Acessibilidade @@ -961,7 +961,7 @@ Pronto para levar seu aplicativo bancário para o próximo nível? Vamos fazer c Aqui está como um dashboard polido poderia parecer: -![Captura de tela de um exemplo de resultado do dashboard após a estilização](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.br.png) +![Captura de tela de um exemplo de resultado do dashboard após a estilização](../../../../translated_images/screen2.123c82a831a1d14a.br.png) Não sinta que precisa seguir exatamente este modelo - use-o como inspiração e crie algo único! diff --git a/translations/br/7-bank-project/4-state-management/README.md b/translations/br/7-bank-project/4-state-management/README.md index 826b05f0e..8b2036dba 100644 --- a/translations/br/7-bank-project/4-state-management/README.md +++ b/translations/br/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Como o design compartimentado do Titanic parecia robusto até que múltiplos com Em vez de ficarmos correndo em círculos, vamos criar um sistema de **gerenciamento de estado centralizado**. Pense nisso como ter uma pessoa realmente organizada responsável por todas as coisas importantes: -![Esquema mostrando os fluxos de dados entre o HTML, ações do usuário e estado](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.br.png) +![Esquema mostrando os fluxos de dados entre o HTML, ações do usuário e estado](../../../../translated_images/data-flow.fa2354e0908fecc8.br.png) ```mermaid flowchart TD @@ -804,7 +804,7 @@ Este desafio ajudará você a pensar como um desenvolvedor profissional que cons Aqui está um exemplo de resultado após completar a tarefa: -![Captura de tela mostrando um exemplo de diálogo "Adicionar transação"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.br.png) +![Captura de tela mostrando um exemplo de diálogo "Adicionar transação"](../../../../translated_images/dialog.93bba104afeb79f1.br.png) --- diff --git a/translations/br/7-bank-project/4-state-management/assignment.md b/translations/br/7-bank-project/4-state-management/assignment.md index 24ce22ec5..06810c866 100644 --- a/translations/br/7-bank-project/4-state-management/assignment.md +++ b/translations/br/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Consulte a [documentação da API do servidor](../api/README.md) para: **Resultado Esperado:** Após concluir esta tarefa, seu aplicativo bancário deve ter um recurso de "Adicionar Transação" totalmente funcional que pareça e se comporte de forma profissional: -![Captura de tela mostrando um exemplo de diálogo "Adicionar transação"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.br.png) +![Captura de tela mostrando um exemplo de diálogo "Adicionar transação"](../../../../translated_images/dialog.93bba104afeb79f1.br.png) ## Testando Sua Implementação diff --git a/translations/br/7-bank-project/README.md b/translations/br/7-bank-project/README.md index f0068f460..54609854d 100644 --- a/translations/br/7-bank-project/README.md +++ b/translations/br/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Neste projeto, você aprenderá como construir um banco fictício. Estas lições incluem instruções sobre como estruturar um aplicativo web e fornecer rotas, criar formulários, gerenciar estado e buscar dados de uma API da qual você pode obter as informações do banco. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.br.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.br.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.br.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.br.png) | |--------------------------------|--------------------------------| ## Lições diff --git a/translations/br/8-code-editor/1-using-a-code-editor/README.md b/translations/br/8-code-editor/1-using-a-code-editor/README.md index 2bf40b075..1e60d5e47 100644 --- a/translations/br/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/br/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Assim como o telefone de Alexander Graham Bell conectava locais distantes, vincu Depois que tudo estiver carregado, você verá um espaço de trabalho limpo e bonito, projetado para mantê-lo focado no que importa – seu código! -![Interface padrão do VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.br.png) +![Interface padrão do VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.br.png) **Aqui está um tour pelo ambiente:** - **Barra de Atividades** (a faixa à esquerda): Sua navegação principal com Explorer 📁, Pesquisa 🔍, Controle de Fonte 🌿, Extensões 🧩 e Configurações ⚙️ @@ -233,7 +233,7 @@ Este é perfeito quando você está começando no VSCode.dev e quer abrir um rep 1. Acesse [vscode.dev](https://vscode.dev) se ainda não estiver lá 2. Procure o botão "Open Remote Repository" na tela inicial e clique nele - ![Abrir repositório remoto](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.br.png) + ![Abrir repositório remoto](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.br.png) 3. Cole qualquer URL de repositório do GitHub (experimente este: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Pressione Enter e veja a mágica acontecer! @@ -242,7 +242,7 @@ Este é perfeito quando você está começando no VSCode.dev e quer abrir um rep Quer se sentir como um mago da programação? Experimente este atalho de teclado: Ctrl+Shift+P (ou Cmd+Shift+P no Mac) para abrir o Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.br.png) +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.br.png) **O Command Palette é como ter um mecanismo de busca para tudo o que você pode fazer:** - Digite "open remote" e ele encontrará o abridor de repositórios para você @@ -304,7 +304,7 @@ Assim como organizar plantas em um escritório de arquitetura, a criação de ar 3. Insira o nome do arquivo, incluindo a extensão apropriada (`style.css`, `script.js`, `index.html`) 4. Pressione Enter para criar o arquivo -![Criando um novo arquivo](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.br.png) +![Criando um novo arquivo](../../../../translated_images/create-new-file.2814e609c2af9aeb.br.png) **Convenções de nomenclatura:** - Use nomes descritivos que indiquem o propósito do arquivo @@ -322,7 +322,7 @@ Aqui é onde a diversão realmente começa! O editor do VSCode.dev está repleto 2. Comece a digitar e veja o VSCode.dev ajudá-lo com cores, sugestões e detecção de erros 3. Salve seu trabalho com Ctrl+S (Windows/Linux) ou Cmd+S (Mac) – embora ele também salve automaticamente! -![Editando arquivos no VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.br.png) +![Editando arquivos no VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.br.png) **As coisas legais que acontecem enquanto você programa:** - Seu código é lindamente colorido para facilitar a leitura @@ -343,7 +343,7 @@ Assim como arqueólogos criam registros detalhados das camadas de escavação, o 2. Os arquivos modificados aparecem na seção "Changes" 3. A codificação por cores indica os tipos de alteração: verde para adições, vermelho para exclusões -![Visualizando alterações no Controle de Fonte](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.br.png) +![Visualizando alterações no Controle de Fonte](../../../../translated_images/working-tree.c58eec08e6335c79.br.png) **Salvando seu trabalho (fluxo de trabalho de commit):** @@ -438,7 +438,7 @@ O marketplace de extensões é muito bem organizado, então você não vai se pe 2. Navegue ou procure algo específico 3. Clique em qualquer coisa que pareça interessante para saber mais -![Interface do marketplace de extensões](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.br.png) +![Interface do marketplace de extensões](../../../../translated_images/extensions.eca0e0c7f59a10b5.br.png) **O que você encontrará lá:** @@ -491,7 +491,7 @@ A maioria das extensões vem com configurações que você pode ajustar para que 3. Escolha "Configurações da Extensão" no menu suspenso 4. Ajuste as configurações até que fiquem perfeitas para o seu fluxo de trabalho -![Personalizando configurações de extensões](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.br.png) +![Personalizando configurações de extensões](../../../../translated_images/extension-settings.21c752ae4f4cdb78.br.png) **Coisas comuns que você pode querer ajustar:** - Como seu código é formatado (tabulação vs espaços, comprimento da linha, etc.) diff --git a/translations/br/8-code-editor/1-using-a-code-editor/assignment.md b/translations/br/8-code-editor/1-using-a-code-editor/assignment.md index 39672c1d6..31ee69404 100644 --- a/translations/br/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/br/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Como o VSCode.dev exige pelo menos um arquivo para abrir um repositório, criare 4. **Escreva** uma mensagem de commit: "Adicionar estrutura inicial de HTML" 5. **Clique** em "Commit new file" para salvar suas alterações -![Criando arquivo inicial no GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.br.png) +![Criando arquivo inicial no GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.br.png) **O que essa configuração inicial realiza:** - **Estabelece** uma estrutura de documento HTML5 adequada com elementos semânticos @@ -104,7 +104,7 @@ Agora que a base do seu repositório está estabelecida, vamos migrar para o VSC ✅ **Indicador de sucesso**: Você deve ver os arquivos do seu projeto na barra lateral do Explorer e `index.html` disponível para edição na área principal do editor. -![Projeto carregado no VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.br.png) +![Projeto carregado no VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.br.png) **O que você verá na interface:** - **Barra lateral do Explorer**: **Exibe** os arquivos e estrutura de pastas do seu repositório @@ -448,7 +448,7 @@ Extensões melhoram sua experiência de desenvolvimento ao fornecer recursos de **Resultados imediatos após a instalação:** Assim que o CodeSwing for instalado, você verá uma pré-visualização ao vivo do seu site de currículo aparecer no editor. Isso permite que você veja exatamente como seu site está enquanto faz alterações. -![Extensão CodeSwing mostrando pré-visualização ao vivo](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.br.png) +![Extensão CodeSwing mostrando pré-visualização ao vivo](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.br.png) **Entendendo a interface aprimorada:** - **Visualização dividida**: **Mostra** seu código de um lado e a pré-visualização ao vivo do outro diff --git a/translations/br/9-chat-project/README.md b/translations/br/9-chat-project/README.md index 1e40fef8e..ea8a40208 100644 --- a/translations/br/9-chat-project/README.md +++ b/translations/br/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Aqui está como seu projeto final ficará: -![Interface do aplicativo de chat mostrando uma conversa entre o usuário e o assistente de IA](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.br.png) +![Interface do aplicativo de chat mostrando uma conversa entre o usuário e o assistente de IA](../../../translated_images/screenshot.0a1ee0d123df681b.br.png) ## 🗺️ Sua Jornada de Aprendizado no Desenvolvimento de Aplicativos com IA @@ -194,7 +194,7 @@ mindmap **Princípio Central**: O desenvolvimento de aplicativos com IA combina habilidades tradicionais de desenvolvimento web com integração de serviços de IA, criando aplicativos inteligentes que parecem naturais e responsivos para os usuários. -![Interface do GitHub Models AI Playground com seleção de modelo e área de teste](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.br.png) +![Interface do GitHub Models AI Playground com seleção de modelo e área de teste](../../../translated_images/playground.d2b927122224ff8f.br.png) **Aqui está o que torna o playground tão útil:** - **Experimente** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos gratuitos!) @@ -204,7 +204,7 @@ mindmap Depois de brincar um pouco, basta clicar na aba "Code" e escolher sua linguagem de programação para obter o código de implementação necessário. -![Escolha no playground mostrando opções de geração de código para diferentes linguagens de programação](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.br.png) +![Escolha no playground mostrando opções de geração de código para diferentes linguagens de programação](../../../translated_images/playground-choice.1d23ba7d407f4758.br.png) ## Configurando a Integração de Backend com Python @@ -2365,14 +2365,14 @@ Quer experimentar este projeto em um ambiente de desenvolvimento na nuvem? O Git - **Acesse** o [repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Clique** em "Use this template" no canto superior direito (certifique-se de estar logado no GitHub) -![Interface de criação a partir do template mostrando o botão verde "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.br.png) +![Interface de criação a partir do template mostrando o botão verde "Use this template"](../../../translated_images/template.67ad477109d29a2b.br.png) **Passo 2: Iniciar Codespaces** - **Abra** o repositório recém-criado - **Clique** no botão verde "Code" e selecione "Codespaces" - **Escolha** "Create codespace on main" para iniciar seu ambiente de desenvolvimento -![Interface de criação de codespace com opções para iniciar o ambiente de desenvolvimento na nuvem](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.br.png) +![Interface de criação de codespace com opções para iniciar o ambiente de desenvolvimento na nuvem](../../../translated_images/codespace.bcecbdf5d2747d3d.br.png) **Passo 3: Configuração do Ambiente** Assim que seu Codespace carregar, você terá acesso a: diff --git a/translations/br/README.md b/translations/br/README.md index ca110503e..9b89037fd 100644 --- a/translations/br/README.md +++ b/translations/br/README.md @@ -1,79 +1,90 @@ -[![Licença do GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![Contribuidores do GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![Problemas no GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![Pull Requests no GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Bem-vindos](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![Observadores no GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![Forks no GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![Estrelas no GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) # Desenvolvimento Web para Iniciantes - Um Currículo -Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas oferecido pelos Microsoft Cloud Advocates. Cada uma das 24 lições explora JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Melhore suas habilidades e otimize sua retenção de conhecimento com nossa metodologia eficaz baseada em projetos. Comece sua jornada de codificação hoje! +Aprenda os fundamentos do desenvolvimento web com nosso curso abrangente de 12 semanas pelos Microsoft Cloud Advocates. Cada uma das 24 lições mergulha em JavaScript, CSS e HTML por meio de projetos práticos como terrários, extensões de navegador e jogos espaciais. Participe de quizzes, discussões e tarefas práticas. Aprimore suas habilidades e otimize a retenção do conhecimento com nossa pedagogia eficaz baseada em projetos. Comece sua jornada de programação hoje! -Participe da Comunidade Azure AI Foundry no Discord +Junte-se à Comunidade Discord Azure AI Foundry [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Siga estas etapas para começar a usar esses recursos: -1. **Faça um Fork do Repositório**: Clique [![Forks no GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +Siga estes passos para começar a usar esses recursos: +1. **Faça um Fork do Repositório**: Clique [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Participe do Azure AI Foundry Discord e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4) +3. [**Junte-se ao Discord Azure AI Foundry e conheça especialistas e outros desenvolvedores**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Suporte Multilíngue -#### Suporte via GitHub Action (Automatizado e Sempre Atualizado) +#### Suportado via GitHub Action (Automatizado e Sempre Atualizado) - -[Árabe](../ar/README.md) | [Bengali](../bn/README.md) | [Búlgaro](../bg/README.md) | [Birmanês (Myanmar)](../my/README.md) | [Chinês (Simplificado)](../zh/README.md) | [Chinês (Tradicional, Hong Kong)](../hk/README.md) | [Chinês (Tradicional, Macau)](../mo/README.md) | [Chinês (Tradicional, Taiwan)](../tw/README.md) | [Croata](../hr/README.md) | [Tcheco](../cs/README.md) | [Dinamarquês](../da/README.md) | [Holandês](../nl/README.md) | [Estoniano](../et/README.md) | [Finlandês](../fi/README.md) | [Francês](../fr/README.md) | [Alemão](../de/README.md) | [Grego](../el/README.md) | [Hebraico](../he/README.md) | [Hindi](../hi/README.md) | [Húngaro](../hu/README.md) | [Indonésio](../id/README.md) | [Italiano](../it/README.md) | [Japonês](../ja/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malaio](../ms/README.md) | [Marathi](../mr/README.md) | [Nepalês](../ne/README.md) | [Norueguês](../no/README.md) | [Persa (Farsi)](../fa/README.md) | [Polonês](../pl/README.md) | [Português (Brasil)](./README.md) | [Português (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romeno](../ro/README.md) | [Russo](../ru/README.md) | [Sérvio (Cirílico)](../sr/README.md) | [Eslovaco](../sk/README.md) | [Esloveno](../sl/README.md) | [Espanhol](../es/README.md) | [Suaíli](../sw/README.md) | [Sueco](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tâmil](../ta/README.md) | [Tailandês](../th/README.md) | [Turco](../tr/README.md) | [Ucraniano](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md) - + +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](./README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -**Se você deseja ter suporte para idiomas adicionais, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +> **Prefere Clonar Localmente?** -[![Abrir no Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +> Este repositório inclui mais de 50 traduções, o que aumenta significativamente o tamanho do download. Para clonar sem traduções, use sparse checkout: +> ```bash +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' +> ``` +> Isso lhe oferece tudo que precisa para completar o curso com um download muito mais rápido. + -#### 🧑‍🎓 _Você é estudante?_ +**Se desejar que idiomas adicionais sejam suportados, eles estão listados [aqui](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -Visite [**Página do Hub Estudantil**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes para estudantes e até mesmo maneiras de obter um voucher de certificado gratuito. Esta é a página que você deve marcar como favorita e verificar de tempos em tempos, pois trocamos o conteúdo mensalmente. +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -### 📣 Anúncio - Novos desafios do modo Agente do GitHub Copilot para completar! +#### 🧑‍🎓 _Você é um estudante?_ -Novo desafio adicionado, procure por "Desafio do Agente do GitHub Copilot 🚀" na maioria dos capítulos. Esse é um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você ainda não usou o modo Agente antes, ele é capaz de não apenas gerar texto, mas também criar e editar arquivos, executar comandos e muito mais. +Visite a [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) onde você encontrará recursos para iniciantes, pacotes estudantis e até formas de obter um voucher gratuito para certificado. Esta é a página que você vai querer favoritar e visitar de tempos em tempos, pois trocamos o conteúdo mensalmente. + +### 📣 Anúncio - Novos desafios do modo Agente GitHub Copilot para completar! + +Novo desafio adicionado, procure por "GitHub Copilot Agent Challenge 🚀" em vários capítulos. É um novo desafio para você completar usando o GitHub Copilot e o modo Agente. Se você nunca usou o modo Agente antes, ele é capaz não só de gerar texto, mas também de criar e editar arquivos, executar comandos e mais. ### 📣 Anúncio - _Novo Projeto para construir usando IA Generativa_ -Novo projeto de Assistente de IA acabou de ser adicionado, confira [projeto](./09-chat-project/README.md) +Novo projeto de Assistente de IA foi adicionado, confira o [projeto](./9-chat-project/README.md) -### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript foi lançado +### 📣 Anúncio - _Novo Currículo_ sobre IA Generativa para JavaScript acabou de ser lançado Não perca nosso novo currículo de IA Generativa! Visite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar! -![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.br.png) +![Background](../../translated_images/background.148a8d43afde5730.br.png) + +- Lições cobrindo tudo desde o básico até RAG. +- Interaja com personagens históricos usando GenAI e nosso app de suporte. +- Narrativa divertida e envolvente, você vai viajar no tempo! -- Lições cobrindo tudo, desde o básico até RAG. -- Interaja com personagens históricos usando GenAI e nosso aplicativo complementar. -- Narrativa divertida e envolvente, você estará viajando no tempo! +![character](../../translated_images/character.5c0dd8e067ffd693.br.png) -![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.br.png) -Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo no aprendizado de tópicos como: -- Criação de prompts e engenharia de prompts -- Geração de aplicativos de texto e imagem -- Aplicativos de busca +Cada lição inclui uma tarefa para completar, uma verificação de conhecimento e um desafio para guiá-lo na aprendizagem de tópicos como: +- Prompting e engenharia de prompts +- Geração de apps de texto e imagem +- Apps de busca Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para começar! @@ -81,50 +92,51 @@ Visite [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pa ## 🌱 Começando -> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos receber seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Professores**, incluímos [algumas sugestões](for-teachers.md) sobre como usar este currículo. Adoraríamos seu feedback [em nosso fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Estudantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-aula e continue lendo o material da aula, completando as várias atividades e verificando sua compreensão com o quiz pós-aula. +**[Alunos](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lição, comece com um quiz pré-palestra e siga lendo o material da aula, complete as várias atividades e verifique seu entendimento com o quiz pós-palestra. -Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalhar nos projetos juntos! Discussões são incentivadas em nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), onde nossa equipe de moderadores estará disponível para responder suas perguntas. +Para melhorar sua experiência de aprendizado, conecte-se com seus colegas para trabalharem juntos nos projetos! As discussões são incentivadas em nosso [fórum de discussão](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) onde nossa equipe de moderadores estará disponível para responder suas perguntas. -Para aprofundar sua educação, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais de estudo adicionais. +Para ampliar sua educação, recomendamos fortemente explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiais adicionais de estudo. ### 📋 Configurando seu ambiente -Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode optar por executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Este currículo tem um ambiente de desenvolvimento pronto para uso! Ao começar, você pode escolher executar o currículo em um [Codespace](https://github.com/features/codespaces/) (_um ambiente baseado em navegador, sem necessidade de instalações_), ou localmente em seu computador usando um editor de texto como o [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Crie seu repositório -Para salvar seu trabalho facilmente, é recomendado que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório em sua conta do GitHub com uma cópia do currículo. +Para facilitar o salvamento do seu trabalho, recomendamos que você crie sua própria cópia deste repositório. Você pode fazer isso clicando no botão **Use this template** no topo da página. Isso criará um novo repositório na sua conta do GitHub com uma cópia do currículo. -Siga estas etapas: +Siga estes passos: 1. **Faça um Fork do Repositório**: Clique no botão "Fork" no canto superior direito desta página. 2. **Clone o Repositório**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Executando o currículo em um Codespace -Na sua cópia deste repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar. +Na sua cópia do repositório que você criou, clique no botão **Code** e selecione **Open with Codespaces**. Isso criará um novo Codespace para você trabalhar. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.br.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.br.png) #### Executando o currículo localmente no seu computador -Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução às Linguagens de Programação e Ferramentas de Trabalho](../../1-getting-started-lessons/1-intro-to-programming-languages), irá guiá-lo por várias opções para cada uma dessas ferramentas, para que você selecione o que funciona melhor para você. +Para executar este currículo localmente no seu computador, você precisará de um editor de texto, um navegador e uma ferramenta de linha de comando. Nossa primeira lição, [Introdução a Linguagens de Programação e Ferramentas do Ofício](../../1-getting-started-lessons/1-intro-to-programming-languages), o guiará por várias opções para cada uma dessas ferramentas para que você escolha o que funcionar melhor para você. + +Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também tem um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como seu editor, que também possui um [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Você pode baixar o Visual Studio Code [aqui](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Clone seu repositório para seu computador. Você pode fazer isso clicando no botão **Code** e copiando a URL: [CodeSpace](./images/createcodespace.png) - - Em seguida, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `` pela URL que você acabou de copiar: +Então, abra o [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro do [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) e execute o seguinte comando, substituindo `` pela URL que você acabou de copiar: ```bash git clone ``` -2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **File** > **Open Folder** e selecionando a pasta que você acabou de clonar. +2. Abra a pasta no Visual Studio Code. Você pode fazer isso clicando em **Arquivo** > **Abrir Pasta** e selecionando a pasta que você acabou de clonar. + -> Extensões recomendadas para Visual Studio Code: +> Extensões recomendadas do Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para visualizar páginas HTML dentro do Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ajudar você a escrever código mais rápido @@ -132,128 +144,137 @@ Nossa recomendação é usar [Visual Studio Code](https://code.visualstudio.com/ ## 📂 Cada aula inclui: - sketchnote opcional -- vídeo complementar opcional -- quiz de aquecimento antes da aula +- vídeo suplementar opcional +- quiz de aquecimento pré-aula - aula escrita - para aulas baseadas em projetos, guias passo a passo sobre como construir o projeto - verificações de conhecimento - um desafio -- leitura complementar +- leitura suplementar - tarefa - [quiz pós-aula](https://ff-quizzes.netlify.app/web/) -> **Uma observação sobre os quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, totalizando 48 quizzes com três perguntas cada. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`. +> **Uma nota sobre quizzes**: Todos os quizzes estão contidos na pasta Quiz-app, com 48 quizzes no total, cada um com três perguntas. Eles estão disponíveis [aqui](https://ff-quizzes.netlify.app/web/) e o aplicativo de quiz pode ser executado localmente ou implantado no Azure; siga as instruções na pasta `quiz-app`. ## 🗃️ Aulas -| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor | -| :-: | :----------------------------------------------------------: | :------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Primeiros Passos | Introdução à Programação e Ferramentas de Trabalho | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre softwares que ajudam desenvolvedores profissionais | [Introdução às Linguagens de Programação e Ferramentas de Trabalho](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Primeiros Passos | Noções Básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub em seu projeto e colaborar com outros em um código base | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Primeiros Passos | Acessibilidade | Aprenda os fundamentos de acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | Os fundamentos dos tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | -| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando nos fundamentos do CSS, incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar/soltar, focando em closures e manipulação do DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construa um Jogo de Digitação | Aprenda como usar eventos de teclado para conduzir a lógica do seu aplicativo JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como estruturar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no local storage | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas no local storage | [APIs, Formulários e Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho na web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho na web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento de Jogos Mais Avançado com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, em preparação para construir um jogo | [Introdução ao Desenvolvimento de Jogos Avançado](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no Canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos pela Tela](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de Colisões | Faça os elementos colidirem e reagirem uns aos outros usando teclas pressionadas e forneça uma função de cooldown para garantir o desempenho do jogo | [Detecção de Colisões](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a Pontuação | Realize cálculos matemáticos com base no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e Reiniciando o Jogo | Aprenda sobre como finalizar e reiniciar o jogo, incluindo limpar os recursos e redefinir valores de variáveis | [Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um Aplicativo Web | Aprenda como criar a estrutura de arquitetura de um site multipágina usando rotas e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo um Formulário de Login e Registro | Aprenda sobre como construir formulários e lidar com rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Busca e Uso de Dados | Como os dados fluem dentro e fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu aplicativo mantém o estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Editor de Código Browser/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda como usar um editor de código | [Usando o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda como construir seu próprio assistente de IA | [Projeto de Assistente de IA](./9-chat-project/README.md) | Chris | +| | Nome do Projeto | Conceitos Ensinados | Objetivos de Aprendizagem | Aula Vinculada | Autor | +| :-: | :----------------------------------------------------------: | :----------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Começando | Introdução à Programação e Ferramentas do Ofício | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre o software que ajuda desenvolvedores | [Introdução às Linguagens de Programação e Ferramentas do Ofício](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Começando | Noções básicas do GitHub, incluindo trabalho em equipe | Como usar o GitHub no seu projeto, como colaborar com outros numa base de código | [Introdução ao GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Começando | Acessibilidade | Aprenda o básico sobre acessibilidade na web | [Fundamentos de Acessibilidade](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Fundamentos de JS | Tipos de Dados em JavaScript | O básico sobre tipos de dados em JavaScript | [Tipos de Dados](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Fundamentos de JS | Funções e Métodos | Aprenda sobre funções e métodos para gerenciar o fluxo lógico de uma aplicação | [Funções e Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine e Christopher | +| 06 | Fundamentos de JS | Tomando Decisões com JS | Aprenda como criar condições no seu código usando métodos de tomada de decisão | [Tomando Decisões](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Fundamentos de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrário](./3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando na construção de um layout | [Introdução ao HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrário](./3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico do CSS incluindo tornar a página responsiva | [Introdução ao CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrário](./3-terrarium/solution/README.md) | Closures em JavaScript, manipulação do DOM | Construa o JavaScript para fazer o terrário funcionar como uma interface drag/drop, focando em closures e manipulação de DOM | [Closures em JavaScript, manipulação do DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Jogo de Digitação](./4-typing-game/solution/README.md) | Construindo um Jogo de Digitação | Aprenda a usar eventos de teclado para dirigir a lógica do seu app em JavaScript | [Programação Orientada a Eventos](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Trabalhando com Navegadores | Aprenda como os navegadores funcionam, sua história e como criar os primeiros elementos de uma extensão de navegador | [Sobre Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis localmente | Construa os elementos JavaScript da sua extensão de navegador para chamar uma API usando variáveis armazenadas localmente | [APIs, Formulários, e Armazenamento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Extensão de Navegador Verde](./5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho web | Use os processos em segundo plano do navegador para gerenciar o ícone da extensão; aprenda sobre desempenho web e algumas otimizações | [Tarefas em Segundo Plano e Desempenho](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenvolvimento Avançado de Jogos com JavaScript | Aprenda sobre Herança usando Classes e Composição e o padrão Pub/Sub, preparando-se para construir um jogo | [Introdução ao Desenvolvimento Avançado de Jogos](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Jogo Espacial](./6-space-game/solution/README.md) | Desenhando no canvas | Aprenda sobre a API Canvas, usada para desenhar elementos na tela | [Desenhando no Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Jogo Espacial](./6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando coordenadas cartesianas e a API Canvas | [Movendo Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Jogo Espacial](./6-space-game/solution/README.md) | Detecção de colisão | Faça elementos colidirem e reagirem entre si usando teclas e forneça uma função de cooldown para garantir a performance do jogo | [Detecção de Colisão](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Jogo Espacial](./6-space-game/solution/README.md) | Mantendo a pontuação | Realize cálculos matemáticos baseados no status e desempenho do jogo | [Mantendo a Pontuação](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Jogo Espacial](./6-space-game/solution/README.md) | Finalizando e reiniciando o jogo | Aprenda sobre finalizar e reiniciar o jogo, incluindo limpeza de assets e reset de variáveis | [A Condição de Finalização](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [App Bancário](./7-bank-project/solution/README.md) | Templates HTML e Rotas em um App Web | Aprenda como criar a estrutura de arquitetura de um site multipágina usando roteamento e templates HTML | [Templates HTML e Rotas](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [App Bancário](./7-bank-project/solution/README.md) | Construindo Formulário de Login e Cadastro | Aprenda sobre construção de formulários e rotinas de validação | [Formulários](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [App Bancário](./7-bank-project/solution/README.md) | Métodos de Buscar e Usar Dados | Como os dados entram e saem do seu app, como buscá-los, armazená-los e descartá-los | [Dados](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [App Bancário](./7-bank-project/solution/README.md) | Conceitos de Gerenciamento de Estado | Aprenda como seu app mantém estado e como gerenciá-lo programaticamente | [Gerenciamento de Estado](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Código do Navegador/VScode](../../8-code-editor) | Trabalhando com VScode | Aprenda a usar um editor de código | [Usando o Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Assistentes de IA](./9-chat-project/README.md) | Trabalhando com IA | Aprenda a construir seu próprio assistente de IA | [Projeto Assistente de IA](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogia -Nosso currículo foi projetado com dois princípios pedagógicos principais em mente: +Nosso currículo é projetado com dois princípios pedagógicos chave em mente: * aprendizado baseado em projetos * quizzes frequentes -O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo "space invader" e um aplicativo bancário para empresas. Ao final da série, os alunos terão adquirido uma compreensão sólida do desenvolvimento web. +O programa ensina os fundamentos de JavaScript, HTML e CSS, bem como as ferramentas e técnicas mais recentes usadas pelos desenvolvedores web de hoje. Os alunos terão a oportunidade de desenvolver experiência prática construindo um jogo de digitação, um terrário virtual, uma extensão de navegador ecológica, um jogo estilo invasores do espaço e um app bancário para empresas. Ao final da série, os alunos terão adquirido uma sólida compreensão do desenvolvimento web. -> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizado](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn! +> 🎓 Você pode fazer as primeiras aulas deste currículo como um [Caminho de Aprendizagem](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) no Microsoft Learn! -Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas introdutórias sobre os fundamentos de JavaScript para apresentar conceitos, acompanhadas de um vídeo da coleção "[Série para Iniciantes: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", alguns dos quais os autores contribuíram para este currículo. +Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias aulas iniciais em fundamentos de JavaScript para introduzir conceitos, combinadas com um vídeo da coleção "[Série para Iniciantes em: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriais em vídeo, alguns dos quais tiveram seus autores contribuindo para este currículo. -Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito em sua totalidade ou em partes. Os projetos começam pequenos e se tornam cada vez mais complexos ao final do ciclo de 12 semanas. +Além disso, um quiz de baixa pressão antes da aula define a intenção do aluno em aprender um tópico, enquanto um segundo quiz após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser feito integralmente ou em partes. Os projetos começam pequenos e ficam progressivamente mais complexos até o final do ciclo de 12 semanas. -Embora tenhamos evitado intencionalmente introduzir frameworks JavaScript para nos concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo após concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos: "[Série para Iniciantes: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Embora tenhamos evitado propositalmente introduzir frameworks JavaScript para concentrar nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, um bom próximo passo para completar este currículo seria aprender sobre Node.js via outra coleção de vídeos: "[Série para Iniciantes em: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". + +> Visite nossas diretrizes no [Código de Conduta](CODE_OF_CONDUCT.md) e [Contribuindo](CONTRIBUTING.md). Nós agradecemos seu feedback construtivo! -> Visite nosso [Código de Conduta](CODE_OF_CONDUCT.md) e diretrizes de [Contribuição](CONTRIBUTING.md). Agradecemos seu feedback construtivo! ## 🧭 Acesso offline -Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) em sua máquina local e, na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 do seu localhost: `localhost:3000`. +Você pode executar esta documentação offline usando [Docsify](https://docsify.js.org/#/). Faça um fork deste repositório, [instale o Docsify](https://docsify.js.org/#/quickstart) na sua máquina local e então na pasta raiz deste repositório, digite `docsify serve`. O site será servido na porta 3000 no seu localhost: `localhost:3000`. ## 📘 PDF Um PDF de todas as aulas pode ser encontrado [aqui](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -## 🎒 Outros Cursos +## 🎒 Outros Cursos Nossa equipe produz outros cursos! Confira: -### Azure / Edge / MCP / Agents -[![AZD para Iniciantes](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI para Iniciantes](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP para Iniciantes](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Agentes de IA para Iniciantes](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) + +### LangChain +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Série de IA Generativa -[![IA Generativa para Iniciantes](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![IA Generativa (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![IA Generativa (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![IA Generativa (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +### Azure / Edge / MCP / Agentes +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - -### Aprendizado Essencial -[![ML para Iniciantes](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Ciência de Dados para Iniciantes](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![IA para Iniciantes](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Cibersegurança para Iniciantes](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Desenvolvimento Web para Iniciantes](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT para Iniciantes](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![Desenvolvimento XR para Iniciantes](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) + +### Série IA Generativa +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- + +### Aprendizado Básico +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) -### Série Copilot -[![Copilot para Programação em Par com IA](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot para C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Aventura Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +--- + +### Série Copilot +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) + -## Obtendo Ajuda +## Obtenha Ajuda -Se você ficar preso ou tiver dúvidas sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente. +Se você ficar travado ou tiver alguma dúvida sobre como construir aplicativos de IA, junte-se a outros aprendizes e desenvolvedores experientes em discussões sobre MCP. É uma comunidade de apoio onde perguntas são bem-vindas e o conhecimento é compartilhado livremente. -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Se você tiver feedback sobre produtos ou encontrar erros durante o desenvolvimento, visite: +Se você tiver feedback sobre produtos ou erros durante a construção, visite: -[![Fórum de Desenvolvedores Microsoft Foundry](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) +[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) -## Licença +## Licença -Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](../../LICENSE) para mais informações. +Este repositório está licenciado sob a licença MIT. Veja o arquivo [LICENSE](../../LICENSE) para mais informações. --- **Aviso Legal**: -Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. +Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. \ No newline at end of file diff --git a/translations/br/for-teachers.md b/translations/br/for-teachers.md index 88b20273c..326528b8e 100644 --- a/translations/br/for-teachers.md +++ b/translations/br/for-teachers.md @@ -42,10 +42,10 @@ Este currículo inclui pacotes importáveis para fluxos de trabalho comuns em LM - O Moodle Cloud tem suporte limitado para Common Cartridge. Prefira o arquivo do Moodle acima, que também pode ser carregado no Canvas. - Após a importação, revise os módulos, datas de entrega e configurações de quizzes para ajustar ao cronograma do seu período. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.br.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.br.png) > O currículo em uma sala de aula do Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.br.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.br.png) > O currículo no Canvas ### Uso do repositório diretamente (sem Classroom) diff --git a/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4927ff660..890062577 100644 --- a/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,210 +1,391 @@ # Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Σύγχρονα Εργαλεία Ανάπτυξης -Γεια σου, μελλοντικέ προγραμματιστή! 👋 Μπορώ να σου πω κάτι που ακόμα μου προκαλεί ρίγη κάθε μέρα; Ετοιμάζεσαι να ανακαλύψεις ότι ο προγραμματισμός δεν αφορά μόνο τους υπολογιστές – είναι σαν να αποκτάς πραγματικές υπερδυνάμεις για να ζωντανέψεις τις πιο τρελές σου ιδέες! +Γεια σου, μελλοντικέ προγραμματιστή! 👋 Μπορώ να σου πω κάτι που ακόμα με συγκλονίζει κάθε μέρα; Είσαι έτοιμος να ανακαλύψεις ότι ο προγραμματισμός δεν αφορά μόνο τους υπολογιστές – αφορά το να έχεις πραγματικές υπερδυνάμεις για να ζωντανέψεις τις πιο τρελές σου ιδέες! -Ξέρεις εκείνη τη στιγμή που χρησιμοποιείς την αγαπημένη σου εφαρμογή και όλα λειτουργούν τέλεια; Όταν πατάς ένα κουμπί και συμβαίνει κάτι απολύτως μαγικό που σε κάνει να πεις "ουάου, πώς το ΚΑΝΑΝ αυτό;" Λοιπόν, κάποιος σαν εσένα – πιθανότατα καθισμένος στο αγαπημένο του καφέ στις 2 το πρωί με τον τρίτο του εσπρέσο – έγραψε τον κώδικα που δημιούργησε αυτή τη μαγεία. Και εδώ είναι το σημείο που θα σε εκπλήξει: μέχρι το τέλος αυτού του μαθήματος, όχι μόνο θα καταλάβεις πώς το έκαναν, αλλά θα ανυπομονείς να το δοκιμάσεις κι εσύ! +Ξέρεις εκείνη τη στιγμή που χρησιμοποιείς την αγαπημένη σου εφαρμογή και όλα απλά συνδυάζονται τέλεια; Όταν πατάς ένα κουμπί και συμβαίνει κάτι μαγικό που σε κάνει να πεις "ουάου, πώς ΤΟ ΕΚΑΝΑΝ αυτό;" Λοιπόν, κάποιος ακριβώς σαν κι εσένα – πιθανόν να είναι καθισμένος στο αγαπημένο του καφέ στις 2 τα ξημερώματα με τον τρίτο του εσπρέσο – έγραψε τον κώδικα που δημιούργησε αυτή τη μαγεία. Και να τι θα σε εντυπωσιάσει: στο τέλος αυτού του μαθήματος, όχι μόνο θα καταλάβεις πώς το έκαναν, αλλά θα θέλεις κι εσύ να το δοκιμάσεις! -Κοίτα, καταλαβαίνω απόλυτα αν ο προγραμματισμός σου φαίνεται τρομακτικός αυτή τη στιγμή. Όταν ξεκίνησα, ειλικρινά πίστευα ότι έπρεπε να είσαι κάποιος ιδιοφυής στα μαθηματικά ή να προγραμματίζεις από πέντε χρονών. Αλλά να τι άλλαξε εντελώς την οπτική μου: ο προγραμματισμός είναι ακριβώς σαν να μαθαίνεις να κάνεις συζητήσεις σε μια νέα γλώσσα. Ξεκινάς με "γεια" και "ευχαριστώ," μετά προχωράς στο να παραγγείλεις καφέ, και πριν το καταλάβεις, κάνεις βαθιές φιλοσοφικές συζητήσεις! Εκτός από το ότι εδώ κάνεις συζητήσεις με υπολογιστές, και ειλικρινά; Είναι οι πιο υπομονετικοί συνομιλητές που θα έχεις ποτέ – δεν κρίνουν τα λάθη σου και είναι πάντα ενθουσιασμένοι να δοκιμάσουν ξανά! +Κοίτα, καταλαβαίνω αν ο προγραμματισμός σου φαίνεται τρομακτικός αυτή τη στιγμή. Όταν ξεκίνησα, πίστευα ειλικρινά ότι έπρεπε να είσαι κάποιος μαθηματικός ιδιοφυής ή να προγραμματίζεις από τότε που ήσουν πέντε χρονών. Αλλά αυτό που άλλαξε εντελώς την οπτική μου ήταν: ο προγραμματισμός είναι ακριβώς όπως να μαθαίνεις να κάνεις συζητήσεις σε μια νέα γλώσσα. Ξεκινάς με το "γεια" και το "ευχαριστώ", μετά μαθαίνεις να παραγγέλνεις καφέ, και πριν το καταλάβεις κάνεις βαθιές φιλοσοφικές συζητήσεις! Μόνο που εδώ, κάνεις συζητήσεις με υπολογιστές, και ειλικρινά; Είναι οι πιο υπομονετικοί συνομιλητές που θα έχεις ποτέ – ποτέ δεν κρίνουν τα λάθη σου και πάντα ενθουσιάζονται να προσπαθήσουν ξανά! -Σήμερα, θα εξερευνήσουμε τα απίστευτα εργαλεία που κάνουν τη σύγχρονη ανάπτυξη ιστού όχι μόνο δυνατή, αλλά και πραγματικά εθιστική. Μιλάω για τους ίδιους επεξεργαστές, προγράμματα περιήγησης και ροές εργασίας που χρησιμοποιούν οι προγραμματιστές στο Netflix, το Spotify και το αγαπημένο σου indie app studio κάθε μέρα. Και εδώ είναι το μέρος που θα σε κάνει να χοροπηδήσεις από χαρά: τα περισσότερα από αυτά τα επαγγελματικά, εργαλεία βιομηχανικού επιπέδου είναι εντελώς δωρεάν! +Σήμερα, θα εξερευνήσουμε τα απίστευτα εργαλεία που κάνουν την σύγχρονη ανάπτυξη ιστοσελίδων όχι μόνο δυνατή, αλλά και σοβαρά εθιστική. Μιλάω για τους ίδιους ακριβώς επεξεργαστές, προγράμματα περιήγησης και ροές εργασίας που χρησιμοποιούν οι προγραμματιστές στη Netflix, Spotify και το αγαπημένο σου indie studio εφαρμογών κάθε μέρα. Και να το μέρος που θα σε κάνει να χορέψεις από χαρά: τα περισσότερα από αυτά τα επαγγελματικά, βιομηχανικά πρότυπα εργαλεία είναι εντελώς δωρεάν! -![Εισαγωγή στον Προγραμματισμό](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.el.png) -> Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.el.png) +> Σκέτς από [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Το Ταξίδι Προγραμματισμού Σου Σήμερα + section Ανακάλυψη + Τι είναι ο Προγραμματισμός: 5: You + Γλώσσες Προγραμματισμού: 4: You + Επισκόπηση Εργαλείων: 5: You + section Εξερεύνηση + Επεξεργαστές Κώδικα: 4: You + Περιηγητές & Εργαλεία Ανάπτυξης: 5: You + Γραμμή Εντολών: 3: You + section Εξάσκηση + Ντετέκτιβ Γλωσσών: 4: You + Εξερεύνηση Εργαλείων: 5: You + Σύνδεση Κοινότητας: 5: You +``` ## Ας Δούμε Τι Ξέρεις Ήδη! -Πριν βουτήξουμε στα διασκεδαστικά πράγματα, είμαι περίεργος – τι ξέρεις ήδη για αυτόν τον κόσμο του προγραμματισμού; Και άκου, αν κοιτάς αυτές τις ερωτήσεις και σκέφτεσαι "Δεν έχω ιδέα για τίποτα από αυτά," όχι μόνο είναι εντάξει, είναι τέλειο! Αυτό σημαίνει ότι βρίσκεσαι ακριβώς στο σωστό μέρος. Σκέψου αυτό το κουίζ σαν να κάνεις διατάσεις πριν από μια προπόνηση – απλά ζεσταίνουμε τους εγκεφαλικούς μυς! +Πριν βουτήξουμε στα διασκεδαστικά, έχω περιέργεια – τι ξέρεις ήδη για αυτόν τον κόσμο του προγραμματισμού; Και άκου, αν κοιτάς αυτές τις ερωτήσεις και σκέφτεσαι "Δεν έχω απολύτως καμία ιδέα για τίποτα από αυτά", αυτό δεν είναι απλώς εντάξει, είναι τέλειο! Σημαίνει ότι είσαι στο ακριβώς σωστό μέρος. Σκέψου αυτό το κουίζ σαν τέντωμα πριν την άσκηση – απλώς ζεσταίνουμε τους μυς του εγκεφάλου! -[Κάνε το κουίζ πριν το μάθημα](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Κάνε το προ-μάθημα κουίζ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Η Περιπέτεια που Θα Ζήσουμε Μαζί +## Η Περιπέτεια που Ετοιμαζόμαστε να Κάνουμε Μαζί -Εντάξει, είμαι πραγματικά ενθουσιασμένος για όσα θα εξερευνήσουμε σήμερα! Ειλικρινά, θα ήθελα να δω το πρόσωπό σου όταν μερικές από αυτές τις έννοιες γίνουν κατανοητές. Να ποια είναι η απίστευτη διαδρομή που θα κάνουμε μαζί: +Εντάξει, είμαι πραγματικά γεμάτος ενθουσιασμό για όσα θα εξερευνήσουμε σήμερα! Σοβαρά, εύχομαι να μπορούσα να δω το πρόσωπό σου όταν καταλάβεις μερικές από αυτές τις έννοιες. Να το απίστευτο ταξίδι που θα κάνουμε μαζί: -- **Τι είναι πραγματικά ο προγραμματισμός (και γιατί είναι το πιο cool πράγμα που υπάρχει!)** – Θα ανακαλύψουμε πώς ο κώδικας είναι κυριολεκτικά η αόρατη μαγεία που κινεί τα πάντα γύρω σου, από το ξυπνητήρι που ξέρει ότι είναι Δευτέρα πρωί μέχρι τον αλγόριθμο που επιλέγει τέλεια τις προτάσεις σου στο Netflix -- **Γλώσσες προγραμματισμού και οι εκπληκτικές προσωπικότητές τους** – Φαντάσου να μπαίνεις σε ένα πάρτι όπου κάθε άτομο έχει εντελώς διαφορετικές υπερδυνάμεις και τρόπους επίλυσης προβλημάτων. Αυτό είναι ο κόσμος των γλωσσών προγραμματισμού, και θα λατρέψεις να τους γνωρίσεις! -- **Τα θεμελιώδη δομικά στοιχεία που κάνουν τη ψηφιακή μαγεία να συμβαίνει** – Σκέψου αυτά σαν το απόλυτο δημιουργικό σετ LEGO. Μόλις καταλάβεις πώς αυτά τα κομμάτια ταιριάζουν μεταξύ τους, θα συνειδητοποιήσεις ότι μπορείς κυριολεκτικά να χτίσεις οτιδήποτε ονειρεύεται η φαντασία σου -- **Επαγγελματικά εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν το ραβδί ενός μάγου** – Δεν υπερβάλλω εδώ – αυτά τα εργαλεία θα σε κάνουν πραγματικά να νιώσεις ότι έχεις υπερδυνάμεις, και το καλύτερο μέρος; Είναι τα ίδια που χρησιμοποιούν οι επαγγελματίες! +- **Τι είναι ο προγραμματισμός πραγματικά (και γιατί είναι το πιο κουλ πράγμα στον κόσμο!)** – Θα ανακαλύψουμε πώς ο κώδικας είναι στην ουσία η αόρατη μαγεία που κινεί τα πάντα γύρω σου, από το ξυπνητήρι που ξαφνικά ξέρει ότι είναι Δευτέρα το πρωί, μέχρι τον αλγόριθμο που επιμελεί τέλεια τις Netflix προτάσεις σου +- **Γλώσσες προγραμματισμού και οι εκπληκτικές προσωπικότητές τους** – Φαντάσου να μπαίνεις σε ένα πάρτι όπου ο καθένας έχει τελείως διαφορετικές υπερδυνάμεις και τρόπους να λύνει προβλήματα. Έτσι είναι ο κόσμος των γλωσσών προγραμματισμού, και θα λατρέψεις να τις γνωρίσεις! +- **Τα βασικά δομικά στοιχεία που κάνουν τη ψηφιακή μαγεία να συμβαίνει** – Σκέψου τα σαν το απόλυτο δημιουργικό σετ LEGO. Μόλις καταλάβεις πώς ενώνονται αυτά τα κομμάτια, θα συνειδητοποιήσεις ότι μπορείς να φτιάξεις κυριολεκτικά οτιδήποτε ονειρευτεί το μυαλό σου +- **Επαγγελματικά εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν το ραβδί ενός μάγου** – Δεν υπερβάλλω εδώ – αυτά τα εργαλεία θα σε κάνουν πραγματικά να νιώσεις ότι έχεις υπερδυνάμεις, και το καλύτερο; Είναι τα ίδια που χρησιμοποιούν οι επαγγελματίες! -> 💡 **Να τι πρέπει να θυμάσαι**: Μην σκεφτείς καν να προσπαθήσεις να απομνημονεύσεις τα πάντα σήμερα! Αυτή τη στιγμή, θέλω απλά να νιώσεις αυτή τη σπίθα ενθουσιασμού για το τι είναι δυνατό. Οι λεπτομέρειες θα κολλήσουν φυσικά καθώς εξασκούμαστε μαζί – έτσι γίνεται η πραγματική μάθηση! +> 💡 **Να το θυμάσαι**: Μην προσπαθήσεις καν να απομνημονεύσεις τα πάντα σήμερα! Τώρα απλώς θέλω να νιώσεις αυτήν την σπίθα ενθουσιασμού για το τι είναι δυνατό. Οι λεπτομέρειες θα κολλήσουν φυσικά καθώς θα εξασκούμαστε μαζί – έτσι συμβαίνει η αληθινή μάθηση! -> Μπορείς να παρακολουθήσεις αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Μπορείς να κάνεις αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! ## Τι Είναι Ακριβώς ο Προγραμματισμός; -Εντάξει, ας αντιμετωπίσουμε την ερώτηση του εκατομμυρίου: τι είναι πραγματικά ο προγραμματισμός; +Εντάξει, ας απαντήσουμε στην ερώτηση του εκατομμυρίου: τι είναι πραγματικά ο προγραμματισμός; + +Θα σου πω μια ιστορία που άλλαξε εντελώς τον τρόπο που το σκέφτομαι. Την προηγούμενη εβδομάδα, προσπαθούσα να εξηγήσω στη μαμά μου πώς να χρησιμοποιήσει το νέο έξυπνο τηλεχειριστήριο της τηλεόρασης. Έπιασα τον εαυτό μου να λέει πράγματα όπως "Πάτα το κόκκινο κουμπί, αλλά όχι το μεγάλο κόκκινο κουμπί, το μικρό κόκκινο κουμπί στα αριστερά... όχι, το άλλο αριστερά σου... καλά, τώρα κράτα το για δύο δευτερόλεπτα, όχι ένα, όχι τρία..." Σου θυμίζει κάτι; 😅 + +Αυτός είναι ο προγραμματισμός! Είναι η τέχνη να δίνεις απίστευτα λεπτομερείς, βήμα προς βήμα οδηγίες σε κάτι που είναι πανίσχυρο αλλά χρειάζεται τα πάντα να του εξηγηθούν τέλεια. Μόνο που αντί να εξηγείς στη μαμά σου (που μπορεί να ρωτήσει "ποιο κόκκινο κουμπί;!"), εξηγείς σε έναν υπολογιστή (που κάνει ακριβώς ό,τι λες, ακόμα κι αν αυτό που είπες δεν είναι ακριβώς αυτό που ήθελες). + +Αυτό που με εντυπωσίασε όταν το έμαθα πρώτη φορά: οι υπολογιστές είναι στην ουσία απλοί στον πυρήνα τους. Καταλαβαίνουν κυριολεκτικά μόνο δύο πράγματα – 1 και 0, που είναι βασικά "ναι" και "όχι" ή "αναμμένο" και "σβηστό". Αυτό είναι όλο! Αλλά εδώ γίνεται η μαγεία – δεν χρειάζεται να μιλάμε σε 1 και 0 σαν να είμαστε μέσα στο Matrix. Εκεί έρχονται οι **γλώσσες προγραμματισμού** να σώσουν την κατάσταση. Είναι σαν να έχεις τον καλύτερο μεταφραστή στον κόσμο που παίρνει τις απλές ανθρώπινες σκέψεις σου και τις μετατρέπει στη γλώσσα των υπολογιστών. -Θα σου πω μια ιστορία που άλλαξε εντελώς τον τρόπο που σκέφτομαι γι' αυτό. Την περασμένη εβδομάδα, προσπαθούσα να εξηγήσω στη μαμά μου πώς να χρησιμοποιήσει το νέο τηλεχειριστήριο της έξυπνης τηλεόρασής μας. Πιάστηκα να λέω πράγματα όπως "Πάτα το κόκκινο κουμπί, αλλά όχι το μεγάλο κόκκινο κουμπί, το μικρό κόκκινο κουμπί στα αριστερά... όχι, το άλλο σου αριστερό... εντάξει, τώρα κράτα το για δύο δευτερόλεπτα, όχι ένα, όχι τρία..." Σου φαίνεται γνωστό; 😅 +Και αυτό που ακόμα με συγκλονίζει κάθε πρωί όταν ξυπνάω: κυριολεκτικά *όλα* τα ψηφιακά πράγματα στη ζωή σου ξεκίνησαν από κάποιον ακριβώς σαν κι εσένα, πιθανώς καθισμένο σε πυζάμες με ένα φλιτζάνι καφέ, να γράφει κώδικα στον φορητό υπολογιστή του. Αυτό το φίλτρο του Instagram που σε κάνει να δείχνεις άψογος; Κάποιος το κωδικοποίησε. Η πρόταση που σου έφερε το νέο αγαπημένο τραγούδι; Ένας προγραμματιστής έφτιαξε αυτόν τον αλγόριθμο. Η εφαρμογή που σε βοηθά να μοιράζεσαι τους λογαριασμούς του δείπνου με φίλους; Ναι, κάποιος σκέφτηκε "αυτό είναι ενοχλητικό, μάλλον μπορώ να το διορθώσω" και… το έκανε! -Αυτός είναι ο προγραμματισμός! Είναι η τέχνη του να δίνεις εξαιρετικά λεπτομερείς, βήμα-βήμα οδηγίες σε κάτι που είναι πολύ ισχυρό αλλά χρειάζεται τα πάντα να του εξηγηθούν τέλεια. Εκτός από το ότι αντί να εξηγείς στη μαμά σου (που μπορεί να ρωτήσει "ποιο κόκκινο κουμπί;!"), εξηγείς σε έναν υπολογιστή (που απλά κάνει ακριβώς ό,τι του πεις, ακόμα κι αν αυτό που είπες δεν είναι ακριβώς αυτό που εννοούσες). +Όταν μαθαίνεις να προγραμματίζεις, δεν αποκτάς απλώς μια νέα δεξιότητα – γίνεσαι μέρος μιας απίστευτης κοινότητας ανθρώπων που λύνουν προβλήματα και περνούν τις μέρες τους σκεπτόμενοι, "Τι θα γινόταν αν μπορούσα να φτιάξω κάτι που κάνει τη μέρα κάποιου λίγο καλύτερη;" Ειλικρινά, υπάρχει κάτι πιο κουλ από αυτό; -Να τι με εντυπωσίασε όταν το έμαθα: οι υπολογιστές είναι στην πραγματικότητα αρκετά απλοί στον πυρήνα τους. Καταλαβαίνουν κυριολεκτικά μόνο δύο πράγματα – 1 και 0, που είναι βασικά "ναι" και "όχι" ή "ενεργοποιημένο" και "απενεργοποιημένο." Αυτό είναι! Αλλά εδώ είναι που γίνεται μαγικό – δεν χρειάζεται να μιλάμε σε 1 και 0 σαν να είμαστε στο Matrix. Εκεί έρχονται οι **γλώσσες προγραμματισμού** να μας σώσουν. Είναι σαν να έχεις τον καλύτερο μεταφραστή στον κόσμο που παίρνει τις απόλυτα φυσιολογικές ανθρώπινες σκέψεις σου και τις μετατρέπει σε γλώσσα υπολογιστή. +✅ **Κυνήγι Διασκεδαστικού Γεγονότος**: Να κάτι πολύ ωραίο για να κοιτάξεις όταν έχεις λίγο ελεύθερο χρόνο – ποιος νομίζεις ότι ήταν ο πρώτος προγραμματιστής υπολογιστή στον κόσμο; Θα σου δώσω μια υπόδειξη: δεν είναι απαραίτητα αυτός που περιμένεις! Η ιστορία πίσω από αυτό το άτομο είναι απολύτως συναρπαστική και δείχνει ότι ο προγραμματισμός πάντα είχε να κάνει με τη δημιουργική επίλυση προβλημάτων και το να σκέφτεσαι έξω από το κουτί. -Και να τι ακόμα μου προκαλεί πραγματικά ρίγη κάθε πρωί που ξυπνάω: κυριολεκτικά *τα πάντα* ψηφιακά στη ζωή σου ξεκίνησαν από κάποιον σαν εσένα, πιθανότατα καθισμένο με τις πιτζάμες του και μια κούπα καφέ, να πληκτρολογεί κώδικα στο laptop του. Εκείνο το φίλτρο στο Instagram που σε κάνει να φαίνεσαι τέλειος; Κάποιος το προγραμμάτισε. Η πρόταση που σε οδήγησε στο νέο αγαπημένο σου τραγούδι; Ένας προγραμματιστής έφτιαξε αυτόν τον αλγόριθμο. Η εφαρμογή που σε βοηθά να μοιράζεσαι τον λογαριασμό του δείπνου με φίλους; Ναι, κάποιος σκέφτηκε "αυτό είναι ενοχλητικό, στοιχηματίζω ότι μπορώ να το διορθώσω" και μετά... το έκανε! +### 🧠 **Ώρα Ελέγχου: Πώς Νιώθεις;** -Όταν μαθαίνεις να προγραμματίζεις, δεν αποκτάς απλά μια νέα δεξιότητα – γίνεσαι μέρος αυτής της απίστευτης κοινότητας λύτων προβλημάτων που περνούν τις μέρες τους σκεπτόμενοι, "Τι θα γινόταν αν μπορούσα να φτιάξω κάτι που κάνει τη μέρα κάποιου λίγο καλύτερη;" Ειλικρινά, υπάρχει κάτι πιο cool από αυτό; +**Πάρε μια στιγμή να σκεφτείς:** +- Σου βγάζει νόημα τώρα η ιδέα του "να δίνεις οδηγίες στους υπολογιστές"; +- Μπορείς να σκεφτείς μια καθημερινή εργασία που θα ήθελες να αυτοματοποιήσεις με προγραμματισμό; +- Ποιες ερωτήσεις σου έρχονται στο μυαλό για όλο αυτό τον προγραμματισμό; -✅ **Κυνήγι Ενδιαφέροντων Γεγονότων**: Να κάτι πολύ ενδιαφέρον να ψάξεις όταν έχεις λίγο χρόνο – ποιος πιστεύεις ότι ήταν ο πρώτος προγραμματιστής υπολογιστών στον κόσμο; Θα σου δώσω ένα στοιχείο: μπορεί να μην είναι αυτό που περιμένεις! Η ιστορία πίσω από αυτό το άτομο είναι απολύτως συναρπαστική και δείχνει ότι ο προγραμματισμός ήταν πάντα θέμα δημιουργικής επίλυσης προβλημάτων και σκέψης έξω από τα συνηθισμένα. +> **Να θυμάσαι**: Είναι απόλυτα φυσιολογικό αν μερικές έννοιες σου φαίνονται ασαφείς τώρα. Ο προγραμματισμός είναι σαν να μαθαίνεις μια νέα γλώσσα – χρειάζεται χρόνος για να δημιουργηθούν οι νευρωνικές διαδρομές στον εγκέφαλο. Πάς πολύ καλά! ## Οι Γλώσσες Προγραμματισμού Είναι Σαν Διάφορες Γεύσεις Μαγείας -Εντάξει, αυτό μπορεί να ακούγεται περίεργο, αλλά μείνε μαζί μου – οι γλώσσες προγραμματισμού μοιάζουν πολύ με διαφορετικά είδη μουσικής. Σκέψου το: έχεις τη τζαζ, που είναι ομαλή και αυτοσχεδιαστική, τη ροκ που είναι δυνατή και απλή, την κλασική που είναι κομψή και δομημένη, και τη χιπ-χοπ που είναι δημιουργική και εκφραστική. Κάθε στυλ έχει τη δική του ατμόσφαιρα, τη δική του κοινότητα παθιασμένων οπαδών, και κάθε ένα είναι τέλειο για διαφορετικές διαθέσεις και περιστάσεις. +Εντάξει, αυτό ίσως ακουστεί περίεργο, αλλά μείνε μαζί μου – οι γλώσσες προγραμματισμού είναι πολύ σαν διαφορετικά είδη μουσικής. Σκέψου το: έχεις jazz, που είναι ομαλή και αυτοσχεδιαστική, rock που είναι δυνατή και απλή, κλασική μουσική που είναι κομψή και δομημένη, και hip-hop που είναι δημιουργική και εκφραστική. Κάθε στυλ έχει τη δική του ατμόσφαιρα, τη δική του κοινότητα παθιασμένων θαυμαστών και το καθένα είναι τέλειο για διαφορετικές διαθέσεις και περιστάσεις. -Οι γλώσσες προγραμματισμού λειτουργούν ακριβώς με τον ίδιο τρόπο! Δεν θα χρησιμοποιούσες την ίδια γλώσσα για να φτιάξεις ένα διασκεδαστικό παιχνίδι για κινητά που θα χρησιμοποιούσες για να επεξεργαστείς τεράστιες ποσότητες δεδομένων για το κλίμα, όπως δεν θα έπαιζες death metal σε μια τάξη γιόγκα (καλά, στις περισσότερες τάξεις γιόγκα τουλάχιστον! 😄). +Οι γλώσσες προγραμματισμού λειτουργούν ακριβώς έτσι! Δεν θα έγραφες το ίδιο παιχνίδι για κινητά με γλώσσα που χρησιμοποιείς για να επεξεργαστείς τεράστια κλιματικά δεδομένα, όπως δεν θα άκουγες death metal σε τάξη γιόγκα (τουλάχιστον σε περισσότερες τάξεις γιόγκα! 😄). -Αλλά να τι με εντυπωσιάζει κάθε φορά που το σκέφτομαι: αυτές οι γλώσσες είναι σαν να έχεις τον πιο υπομονετικό, λαμπρό διερμηνέα στον κόσμο να κάθεται δίπλα σου. Μπορείς να εκφράσεις τις ιδέες σου με τρόπο που να φαίνεται φυσικός στον ανθρώπινο εγκέφαλο, και αυτές αναλαμβάνουν όλη τη σύνθετη δουλειά της μετάφρασης στη γλώσσα των 1 και 0 που μιλούν οι υπολογιστές. Είναι σαν να έχεις έναν φίλο που είναι τέλεια δίγλωσσος σε "ανθρώπινη δημιουργικότητα" και "λογική υπολογιστή" – και ποτέ δεν κουράζεται, ποτέ δεν χρειάζεται διαλείμματα για καφέ, και ποτέ δεν σε κρίνει επειδή ρώτησες την ίδια ερώτηση δύο φορές! +Αλλά κάνε μου την χάρη, κάθε φορά που το σκέφτομαι με εκπλήσσει: αυτές οι γλώσσες είναι σαν να έχεις τον πιο υπομονετικό, λαμπρό διερμηνέα στον κόσμο καθισμένο δίπλα σου. Μπορείς να εκφράσεις τις ιδέες σου με τρόπο φυσικό στον ανθρώπινο εγκέφαλό σου και αυτοί αναλαμβάνουν όλη την πολύπλοκη δουλειά της μετάφρασης σε 1 και 0 που μιλάνε οι υπολογιστές. Είναι σαν να έχεις έναν φίλο που μιλάει τέλεια και τις δύο γλώσσες, "ανθρώπινης δημιουργικότητας" και "λογικής υπολογιστή" – και δεν κουράζεται ποτέ, δεν χρειάζεται διαλείμματα για καφέ και ποτέ δεν σε κρίνει αν ρωτήσεις ξανά την ίδια ερώτηση! ### Δημοφιλείς Γλώσσες Προγραμματισμού και Χρήσεις τους -| Γλώσσα | Ιδανική για | Γιατί είναι δημοφιλής | -|--------|-------------|-----------------------| -| **JavaScript** | Ανάπτυξη ιστού, διεπαφές χρήστη | Τρέχει σε προγράμματα περιήγησης και δίνει ζωή στις διαδραστικές ιστοσελίδες | -| **Python** | Επιστήμη δεδομένων, αυτοματοποίηση, AI | Εύκολη στην ανάγνωση και εκμάθηση, ισχυρές βιβλιοθήκες | -| **Java** | Εφαρμογές επιχειρήσεων, εφαρμογές Android | Ανεξάρτητη από πλατφόρμες, αξιόπιστη για μεγάλα συστήματα | +```mermaid +mindmap + root((Γλώσσες Προγραμματισμού)) + Ανάπτυξη Ιστού + JavaScript + Μαγεία Frontend + Διαδραστικές Ιστοσελίδες + TypeScript + JavaScript + Τύποι + Επιχειρησιακές Εφαρμογές + Δεδομένα & ΤΝ + Python + Επιστήμη Δεδομένων + Μηχανική Μάθηση + Αυτοματισμός + R + Στατιστική + Έρευνα + Κινητές Εφαρμογές + Java + Android + Επιχειρήσεις + Swift + iOS + Οικοσύστημα Apple + Kotlin + Σύγχρονο Android + Πολυπλατφορμικό + Συστήματα & Απόδοση + C++ + Παιχνίδια + Κρίσιμη Απόδοση + Rust + Ασφάλεια Μνήμης + Προγραμματισμός Συστήματος + Go + Υπηρεσίες Νέφους + Κλιμακούμενο Backend +``` +| Γλώσσα | Καλύτερα για | Γιατί είναι δημοφιλής | +|----------|----------|------------------| +| **JavaScript** | Ανάπτυξη ιστοσελίδων, διεπαφές χρήστη | Τρέχει στους περιηγητές και υποστηρίζει διαδραστικές ιστοσελίδες | +| **Python** | Επιστήμη δεδομένων, αυτοματοποίηση, AI | Εύκολη στην ανάγνωση και μάθηση, ισχυρές βιβλιοθήκες | +| **Java** | Επιχειρησιακές εφαρμογές, εφαρμογές Android | Ανεξάρτητη πλατφόρμα, ανθεκτική σε μεγάλα συστήματα | | **C#** | Εφαρμογές Windows, ανάπτυξη παιχνιδιών | Ισχυρή υποστήριξη από το οικοσύστημα της Microsoft | -| **Go** | Υπηρεσίες cloud, συστήματα backend | Γρήγορη, απλή, σχεδιασμένη για σύγχρονη υπολογιστική | +| **Go** | Υπηρεσίες νέφους, συστήματα backend | Γρήγορη, απλή, σχεδιασμένη για σύγχρονους υπολογιστές | + +### Γλώσσες Υψηλού Επίπέδου έναντι Χαμηλού Επίπεδου + +Εντάξει, αυτή ήταν ειλικρινά η έννοια που "έσπασε" το μυαλό μου όταν ξεκίνησα, οπότε θα μοιραστώ την αναλογία που τελικά μου έκανε κλικ – και ελπίζω να σε βοηθήσει και εσένα! + +Φαντάσου ότι επισκέπτεσαι μια χώρα όπου δεν μιλάς τη γλώσσα και απελπισμένα πρέπει να βρεις την πλησιέστερη τουαλέτα (έχουμε περάσει όλοι από αυτό, σωστά; 😅): + +- **Ο προγραμματισμός χαμηλού επιπέδου** είναι σαν να μαθαίνεις τόσο καλά τη τοπική διάλεκτο που μπορείς να μιλήσεις με την γιαγιά που πουλάει φρούτα στη γωνία, χρησιμοποιώντας πολιτισμικές αναφορές, τοπική αργκό και αστεία που καταλαβαίνει μόνο κάποιος που μεγάλωσε εκεί. Πολύ εντυπωσιακό και απίστευτα αποδοτικό... αν είσαι άπταιστος! Αλλά αρκετά συντριπτικό όταν απλά ψάχνεις για τουαλέτα. + +- **Ο προγραμματισμός υψηλού επιπέδου** είναι σαν να έχεις αυτόν τον υπέροχο ντόπιο φίλο που απλά σε καταλαβαίνει. Μπορείς να πεις "Πραγματικά πρέπει να βρω μια τουαλέτα" στα απλά αγγλικά και εκείνος να μεταφράσει όλη την πολιτισμική γλώσσα και να σου δώσει οδηγίες που βγάζουν απόλυτο νόημα στον εγκέφαλό σου που δεν είναι ντόπιος. + +Σε όρους προγραμματισμού: +- **Οι γλώσσες χαμηλού επιπέδου** (όπως Assembly ή C) σου επιτρέπουν να έχεις απίστευτα λεπτομερείς συζητήσεις με το πραγματικό υλικό του υπολογιστή, αλλά πρέπει να σκέφτεσαι σαν μηχανή, που είναι... ας το πούμε, μεγάλη πνευματική αλλαγή! +- **Οι γλώσσες υψηλού επιπέδου** (όπως JavaScript, Python ή C#) σε αφήνουν να σκέφτεσαι σαν άνθρωπος ενώ αυτές διαχειρίζονται όλη τη μηχανική ορολογία στα παρασκήνια. Επιπλέον, έχουν αυτές τις απίστευτα φιλόξενες κοινότητες γεμάτες ανθρώπους που θυμούνται πώς ήταν να είσαι αρχάριος και πραγματικά θέλουν να βοηθήσουν! + +Μαντέψτε με ποια θα σε προτείνω να ξεκινήσεις; 😉 Οι γλώσσες υψηλού επιπέδου είναι σαν τις βοηθητικές ρόδες που δεν θέλεις να βγάλεις ποτέ γιατί κάνουν όλη την εμπειρία πολύ πιο απολαυστική! + +```mermaid +flowchart TB + A["👤 Ανθρώπινη Σκέψη:
'Θέλω να υπολογίσω αριθμούς Fibonacci'"] --> B{Επίπεδο Γλώσσας} + + B -->|Υψηλού Επιπέδου| C["🌟 JavaScript/Python
Εύκολο στην ανάγνωση και γραφή"] + B -->|Χαμηλού Επιπέδου| D["⚙️ Assembly/C
Άμεσος έλεγχος υλικού"] + + C --> E["📝 Γράψε: fibonacci(10)"] + D --> F["📝 Γράψε: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Κατανόηση Υπολογιστή:
Ο μεταφραστής χειρίζεται την πολυπλοκότητα"] + F --> G + + G --> H["💻 Ίδιο Αποτέλεσμα:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Άφησέ Με να Σου Δείξω Γιατί Οι Γλώσσες Υψηλού Επίπεδου Είναι Πολύ Φιλικές + +Εντάξει, πρόκειται να σου δείξω κάτι που δείχνει τέλεια γιατί αγάπησα τις γλώσσες υψηλού επιπέδου, αλλά πρώτα – πρέπει να μου υποσχεθείς κάτι. Όταν δεις το πρώτο παράδειγμα κώδικα, μην πανικοβληθείς! Προορίζεται να φαίνεται τρομακτικό. Αυτό είναι το σημείο που θέλω να κάνω! + +Θα δούμε το ίδιο ακριβώς έργο γραμμένο σε δύο τελείως διαφορετικά στυλ. Και τα δύο δημιουργούν την ακολουθία Fibonacci – αυτό το όμορφο μαθηματικό μοτίβο όπου κάθε αριθμός είναι το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8, 13... (Διασκεδαστικό γεγονός: θα βρεις αυτό το μοτίβο κυριολεκτικά παντού στη φύση – στις σπείρες σπόρων ηλίανθου, στα μοτίβα κουκουναριών, ακόμα και στο πώς σχηματίζονται οι γαλαξίες!) -### Γλώσσες Υψηλού Επιπέδου vs. Χαμηλού Επιπέδου +Έτοιμος να δεις τη διαφορά; Πάμε! -Εντάξει, αυτή ήταν ειλικρινά η έννοια που με μπέρδεψε όταν ξεκίνησα να μαθαίνω, οπότε θα μοιραστώ την αναλογία που τελικά με έκανε να την καταλάβω – και ελπίζω πραγματικά να σε βοηθήσει κι εσένα! +**Γλώσσα υψηλού επιπέδου (JavaScript) – Ανθρώπινη φιλική:** + +```javascript +// Βήμα 1: Βασική ρύθμιση Fibonacci +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` + +**Αυτό κάνει ο κώδικας:** +- **Δηλώνει** μια σταθερά για να καθορίσει πόσους αριθμούς Fibonacci θέλουμε να δημιουργήσουμε +- **Αρχικοποιεί** δύο μεταβλητές για να παρακολουθεί τους τρέχοντες και επόμενους αριθμούς στην ακολουθία +- **Ορίζει** τις αρχικές τιμές (0 και 1) που καθορίζουν το μοτίβο Fibonacci +- **Εμφανίζει** ένα μήνυμα κεφαλίδας για να ταυτοποιήσει την έξοδο μας + +```javascript +// Βήμα 2: Δημιουργήστε τη σειρά με έναν βρόχο +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // Υπολογίστε τον επόμενο αριθμό στη σειρά + const sum = current + next; + current = next; + next = sum; +} +``` -Φαντάσου ότι επισκέπτεσαι μια χώρα όπου δεν μιλάς τη γλώσσα, και απεγνωσμένα χρειάζεσαι να βρεις την πλησιέστερη τουαλέτα (όλοι έχουμε βρεθεί εκεί, σωστά; 😅): +**Αναλύοντας τι συμβαίνει εδώ:** +- **Επαναλαμβάνει** μέσω κάθε θέσης στην ακολουθία μας χρησιμοποιώντας έναν βρόχο `for` +- **Εμφανίζει** κάθε αριθμό με τη θέση του χρησιμοποιώντας τη μορφοποίηση προτύπου συμβολοσειράς +- **Υπολογίζει** τον επόμενο αριθμό Fibonacci προσθέτοντας τις τρέχουσες και επόμενες τιμές +- **Ενημερώνει** τις μεταβλητές παρακολούθησης για να προχωρήσει στην επόμενη επανάληψη -- **Προγραμματισμός χαμηλού επιπέδου** είναι σαν να μαθαίνεις την τοπική διάλεκτο τόσο καλά που μπορείς να μιλήσεις με τη γιαγιά που πουλάει φρούτα στη γωνία χρησιμοποιώντας πολιτισμικές αναφορές, τοπική αργκό και εσωτερικά αστεία που μόνο κάποιος που μεγάλωσε εκεί θα καταλάβαινε. Εντυπωσιακό και εξαιρετικά αποτελεσματικό... αν τυχαίνει να είσαι άπταιστος! Αλλά αρκετά συντριπτικό όταν απλά προσπαθείς να βρεις μια τουαλέτα. +```javascript +// Βήμα 3: Σύγχρονη λειτουργική προσέγγιση +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; -- **Προγραμματισμός υψηλού επιπέδου** είναι σαν να έχεις εκείνον τον καταπληκτικό τοπικό φίλο που απλά σε καταλαβαίνει. Μπορείς να πεις "Πραγματικά χρειάζομαι να βρω μια τουαλέτα" στα ελληνικά, και αυτός αναλαμβάνει όλη τη πολιτισμική μετάφραση και σου δίνει οδηγίες με τρόπο που βγάζει απόλυτο νόημα στον μη-ντόπιο εγκέφαλό σου. +// Παράδειγμα χρήσης +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` -Με όρους προγραμματισμού: -- **Γλώσσες χαμηλού επιπέδου** (όπως η Assembly ή η C) σου επιτρέπουν να έχεις εξαιρετικά λεπτομερείς συνομιλίες με το πραγματικό υλικό του υπολογιστή, αλλά πρέπει να σκέφτεσαι σαν μηχανή, κάτι που είναι... ας πούμε ότι είναι μια αρκετά μεγάλη αλλαγή νοοτροπίας! -- **Γλώσσες υψηλού επιπέδου** (όπως η JavaScript, η Python ή η C#) σου επιτρέπουν να σκέφτεσαι σαν άνθρωπος ενώ αυτές αναλαμβάνουν όλη τη "γλώσσα της μηχανής" στο παρασκήνιο. Επιπλέον, έχουν αυτές τις απίστευτα φιλόξενες κοινότητες γεμάτες ανθρώπους που θυμούνται πώς ήταν να είσαι νέος και θέλουν πραγματικά να βοηθήσουν! +**Στο παραπάνω έχουμε:** +- **Δημιουργήσει** μια επαναχρησιμοποιήσιμη συνάρτηση χρησιμοποιώντας τη σύγχρονη σύνταξη βέλους +- **Κατασκευάσει** έναν πίνακα για να αποθηκεύσουμε την πλήρη ακολουθία αντί να εμφανίζουμε έναν-έναν +- **Χρησιμοποιήσει** δεικτοδότηση πίνακα για να υπολογίσουμε κάθε νέο αριθμό από τις προηγούμενες τιμές +- **Επιστρέψει** την πλήρη ακολουθία για ευέλικτη χρήση σε άλλα μέρη του προγράμματος + +**Γλώσσα χαμηλού επιπέδου (ARM Assembly) – Φιλική στον υπολογιστή:** + +```assembly + 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 +``` -Μάντεψε ποιες θα σου προτείνω να ξεκινήσεις; 😉 Οι γλώσσες υψηλού επιπέδου είναι σαν να έχεις βοηθητικές ρόδες που δεν θέλεις ποτέ να βγάλεις γιατί κάνουν όλη την εμπειρία τόσο πιο ευχάριστη! +Παρατήρησε πώς η έκδοση JavaScript διαβάζεται σχεδόν σαν αγγλικές οδηγίες, ενώ η έκδοση Assembly χρησιμοποιεί κρυπτογραφημένες εντολές που ελέγχουν άμεσα τον επεξεργαστή του υπολογιστή. Και οι δύο πραγματοποιούν το ίδιο έργο, αλλά η γλώσσα υψηλού επιπέδου είναι πολύ πιο εύκολη για τους ανθρώπους να καταλάβουν, να γράψουν και να διατηρήσουν. -### Ας Δούμε Γιατί οι Γλώσσες Υψηλού Επιπέδου Είναι Πιο Φιλικές +**Κύριες διαφορές που θα παρατηρήσεις:** +- **Αναγνωσιμότητα**: Η JavaScript χρησιμοποιεί περιγραφικά ονόματα όπως `fibonacciCount` ενώ η Assembly χρησιμοποιεί κρυπτογραφικές ετικέτες όπως `r0`, `r1` +- **Σχόλια**: Οι γλώσσες υψηλού επιπέδου ενθαρρύνουν επεξηγηματικά σχόλια που κάνουν τον κώδικα αυτο-τεκμηριωμένο +- **Δομή**: Η λογική ροή του JavaScript ταιριάζει με τον τρόπο που οι άνθρωποι σκέφτονται για τα προβλήματα βήμα προς βήμα +- **Συντήρηση**: Η ενημέρωση της έκδοσης JavaScript για διάφορες απαιτήσεις είναι απλή και καθαρή -Εντάξει, θα σου δείξω κάτι που αποδεικνύει τέλεια γιατί ερωτεύτηκα τις γλώσσες υψηλού επιπέδου, αλλά πρώτα – πρέπει να μου υποσ -✅ **Σχετικά με τη σειρά Fibonacci**: Αυτό το πανέμορφο μοτίβο αριθμών (όπου κάθε αριθμός ισούται με το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8...) εμφανίζεται κυριολεκτικά *παντού* στη φύση! Θα το βρείτε στις σπείρες των ηλιοτροπίων, στα μοτίβα των κουκουναριών, στις καμπύλες των κοχυλιών ναυτίλου και ακόμη και στον τρόπο που μεγαλώνουν τα κλαδιά των δέντρων. Είναι πραγματικά εκπληκτικό πώς τα μαθηματικά και ο προγραμματισμός μπορούν να μας βοηθήσουν να κατανοήσουμε και να αναδημιουργήσουμε τα μοτίβα που χρησιμοποιεί η φύση για να δημιουργήσει ομορφιά! +✅ **Σχετικά με την ακολουθία Fibonacci**: Αυτό το απολύτως υπέροχο μοτίβο αριθμών (όπου κάθε αριθμός ισούται με το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8...) εμφανίζεται κυριολεκτικά *παντού* στη φύση! Θα το βρείτε στις σπείρες των ηλιοτροπίων, στα μοτίβα των κουκουναριών, στον τρόπο που καμπυλώνουν τα κοχύλια ναυτίλου, και ακόμα και στο πώς μεγαλώνουν τα κλαδιά των δέντρων. Είναι πραγματικά εντυπωσιακό το πώς τα μαθηματικά και ο κώδικας μπορούν να μας βοηθήσουν να κατανοήσουμε και να αναπαράγουμε τα μοτίβα που χρησιμοποιεί η φύση για να δημιουργήσει ομορφιά! -## Τα Βασικά Στοιχεία που Δημιουργούν τη Μαγεία +## Τα Θεμελιώδη Στοιχεία Που Δημιουργούν Τη Μαγεία -Λοιπόν, τώρα που είδατε πώς μοιάζουν οι γλώσσες προγραμματισμού στην πράξη, ας αναλύσουμε τα θεμελιώδη κομμάτια που αποτελούν κάθε πρόγραμμα που έχει γραφτεί ποτέ. Σκεφτείτε τα σαν τα βασικά συστατικά της αγαπημένης σας συνταγής – μόλις καταλάβετε τι κάνει το καθένα, θα μπορείτε να διαβάζετε και να γράφετε κώδικα σχεδόν σε οποιαδήποτε γλώσσα! +Εντάξει, τώρα που είδες πώς μοιάζουν οι γλώσσες προγραμματισμού σε δράση, ας αναλύσουμε τα βασικά κομμάτια που αποτελούν κυριολεκτικά κάθε πρόγραμμα που έχει γράψει ποτέ άνθρωπος. Σκέψου τα σαν τα απαραίτητα υλικά στην αγαπημένη σου συνταγή – μόλις καταλάβεις τι κάνει το καθένα, θα μπορείς να διαβάζεις και να γράφεις κώδικα σε σχεδόν οποιαδήποτε γλώσσα! -Είναι κάπως σαν να μαθαίνετε τη γραμματική του προγραμματισμού. Θυμάστε στο σχολείο όταν μαθαίνατε για ουσιαστικά, ρήματα και πώς να συνθέτετε προτάσεις; Ο προγραμματισμός έχει τη δική του εκδοχή γραμματικής, και ειλικρινά, είναι πολύ πιο λογική και επιεικής από τη γραμματική της αγγλικής γλώσσας! 😄 +Αυτό είναι κάπως σαν να μαθαίνεις τη γραμματική του προγραμματισμού. Θυμάσαι στο σχολείο όταν μάθαινες για ουσιαστικά, ρήματα και πώς να σχηματίζεις προτάσεις; Ο προγραμματισμός έχει τη δική του έκδοση γραμματικής, και ειλικρινά, είναι πολύ πιο λογική και συγχωρητική από τη γραμματική της Αγγλικής γλώσσας! 😄 -### Εντολές: Οι Βήμα-Βήμα Οδηγίες +### Δηλώσεις: Οι Οδηγίες Βήμα προς Βήμα -Ας ξεκινήσουμε με τις **εντολές** – αυτές είναι σαν μεμονωμένες προτάσεις σε μια συνομιλία με τον υπολογιστή σας. Κάθε εντολή λέει στον υπολογιστή να κάνει κάτι συγκεκριμένο, σαν να δίνετε οδηγίες: "Στρίψε αριστερά εδώ", "Σταμάτα στο κόκκινο φανάρι", "Πάρκαρε σε εκείνη τη θέση." +Ας ξεκινήσουμε με τις **δηλώσεις** – αυτές είναι σαν μεμονωμένες προτάσεις σε μια συνομιλία με τον υπολογιστή σου. Κάθε δήλωση λέει στον υπολογιστή να κάνει ένα συγκεκριμένο πράγμα, σαν να δίνεις οδηγίες: "Στρίψε αριστερά εδώ", "Σταμάτα στο κόκκινο φανάρι", "Πάρκαρε εκεί". -Αυτό που μου αρέσει στις εντολές είναι πόσο κατανοητές είναι συνήθως. Δείτε αυτό: +Αυτό που λατρεύω στις δηλώσεις είναι πόσο ευανάγνωστες είναι συνήθως. Δες αυτό: ```javascript -// Basic statements that perform single actions +// Βασικές δηλώσεις που εκτελούν μεμονωμένες ενέργειες const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Τι κάνει αυτός ο κώδικας:** -- **Δηλώνει** μια σταθερή μεταβλητή για να αποθηκεύσει το όνομα ενός χρήστη -- **Εμφανίζει** ένα μήνυμα χαιρετισμού στην έξοδο της κονσόλας -- **Υπολογίζει** και αποθηκεύει το αποτέλεσμα μιας μαθηματικής πράξης + +**Αυτό που κάνει αυτός ο κώδικας:** +- **Δηλώνει** μια σταθερή μεταβλητή για να αποθηκεύσει το όνομα χρήστη +- **Εμφανίζει** ένα μήνυμα χαιρετισμού στην κονσόλα +- **Υπολογίζει** και αποθηκεύει το αποτέλεσμα μιας μαθηματικής λειτουργίας ```javascript -// Statements that interact with web pages +// Δηλώσεις που αλληλεπιδρούν με ιστοσελίδες document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**Βήμα προς βήμα, αυτό συμβαίνει:** +- **Τροποποιεί** τον τίτλο της ιστοσελίδας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης +- **Αλλάζει** το χρώμα φόντου ολόκληρης της σελίδας -**Βήμα προς βήμα, τι συμβαίνει:** -- **Τροποποιεί** τον τίτλο της ιστοσελίδας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης -- **Αλλάζει** το χρώμα φόντου ολόκληρου του σώματος της σελίδας - -### Μεταβλητές: Το Σύστημα Μνήμης του Προγράμματός σας +### Μεταβλητές: Το Σύστημα Μνήμης Του Προγράμματός Σου -Εντάξει, οι **μεταβλητές** είναι ειλικρινά μία από τις αγαπημένες μου έννοιες για να διδάξω, γιατί μοιάζουν τόσο πολύ με πράγματα που χρησιμοποιείτε ήδη κάθε μέρα! +Εντάξει, οι **μεταβλητές** είναι ειλικρινά μία από τις αγαπημένες μου έννοιες για διδασκαλία επειδή είναι τόσο παρόμοιες με πράγματα που ήδη χρησιμοποιείς κάθε μέρα! -Σκεφτείτε τη λίστα επαφών του τηλεφώνου σας για μια στιγμή. Δεν απομνημονεύετε όλους τους αριθμούς τηλεφώνου – αντίθετα, αποθηκεύετε "Μαμά", "Καλύτερος Φίλος" ή "Πιτσαρία που παραδίδει μέχρι τις 2 π.μ." και αφήνετε το τηλέφωνό σας να θυμάται τους πραγματικούς αριθμούς. Οι μεταβλητές λειτουργούν ακριβώς με τον ίδιο τρόπο! Είναι σαν δοχεία με ετικέτες όπου το πρόγραμμά σας μπορεί να αποθηκεύσει πληροφορίες και να τις ανακτήσει αργότερα χρησιμοποιώντας ένα όνομα που έχει νόημα. +Σκέψου για λίγο τη λίστα επαφών του τηλεφώνου σου. Δεν απομνημονεύεις όλους τους αριθμούς τηλεφώνου – αντίθετα, αποθηκεύεις "Μαμά", "Καλύτερος Φίλος" ή "Το Πιτσαρία Που Παραδίδει Έως Τις 2 ΠΜ" και αφήνεις το τηλέφωνό σου να θυμάται τους πραγματικούς αριθμούς. Οι μεταβλητές λειτουργούν ακριβώς με τον ίδιο τρόπο! Είναι σαν ετικετοποιημένα δοχεία όπου το πρόγραμμα μπορεί να αποθηκεύει πληροφορίες και να τις ανακαλεί αργότερα χρησιμοποιώντας ένα όνομα που βγάζει νόημα. -Το πιο ωραίο είναι ότι οι μεταβλητές μπορούν να αλλάξουν καθώς το πρόγραμμά σας εκτελείται (εξ ου και το όνομα "μεταβλητή" – καταλάβατε τι έκαναν εκεί;). Όπως ακριβώς μπορεί να ενημερώσετε την επαφή της πιτσαρίας όταν βρείτε μια ακόμη καλύτερη, οι μεταβλητές μπορούν να ενημερωθούν καθώς το πρόγραμμά σας μαθαίνει νέες πληροφορίες ή καθώς αλλάζουν οι συνθήκες! +Αυτό που είναι πραγματικά κουλ: οι μεταβλητές μπορούν να αλλάζουν καθώς τρέχει το πρόγραμμα (γι' αυτό και λέγονται "μεταβλητές" – κατάλαβες τι έκαναν εκεί;). Ακριβώς όπως μπορείς να ενημερώνεις την επαφή ενός πιτσαρία όταν ανακαλύπτεις κάπου ακόμα καλύτερο, οι μεταβλητές μπορούν να ενημερώνονται καθώς το πρόγραμμα μαθαίνει νέα δεδομένα ή όταν οι καταστάσεις αλλάζουν! -Ας σας δείξω πόσο απλό μπορεί να είναι αυτό: +Άσε με να σου δείξω πόσο απλό και όμορφο μπορεί να είναι αυτό: ```javascript -// Step 1: Creating basic variables +// Βήμα 1: Δημιουργία βασικών μεταβλητών const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Κατανόηση αυτών των εννοιών:** -- **Αποθηκεύστε** αμετάβλητες τιμές σε μεταβλητές `const` (όπως το όνομα του ιστότοπου) -- **Χρησιμοποιήστε** `let` για τιμές που μπορούν να αλλάξουν κατά τη διάρκεια του προγράμματος -- **Αναθέστε** διαφορετικούς τύπους δεδομένων: συμβολοσειρές (κείμενο), αριθμούς και λογικές τιμές (true/false) -- **Επιλέξτε** περιγραφικά ονόματα που εξηγούν τι περιέχει κάθε μεταβλητή + +**Κατανόηση αυτών των εννοιών:** +- **Αποθήκευση** αμετάβλητων τιμών σε μεταβλητές `const` (όπως το όνομα του ιστότοπου) +- **Χρήση** `let` για τιμές που μπορούν να αλλάζουν μέσα στο πρόγραμμα +- **Ανάθεση** διαφορετικών τύπων δεδομένων: συμβολοσειρές (κείμενο), αριθμοί, και boolean (αληθές/ψευδές) +- **Επιλογή** περιγραφικών ονομάτων που εξηγούν τι αποθηκεύει κάθε μεταβλητή ```javascript -// Step 2: Working with objects to group related data +// Βήμα 2: Εργασία με αντικείμενα για ομαδοποίηση σχετικών δεδομένων const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**Στο παραπάνω, έχουμε:** -- **Δημιουργήσει** ένα αντικείμενο για να ομαδοποιήσουμε σχετικές πληροφορίες καιρού -- **Οργανώσει** πολλαπλά κομμάτια δεδομένων κάτω από ένα όνομα μεταβλητής -- **Χρησιμοποιήσει** ζεύγη κλειδιού-τιμής για να επισημάνουμε κάθε κομμάτι πληροφοριών με σαφήνεια + +**Στο παραπάνω έχουμε:** +- **Δημιουργήσει** ένα αντικείμενο για να ομαδοποιήσουμε σχετικές πληροφορίες καιρού +- **Οργανώσει** πολλά δεδομένα κάτω από ένα όνομα μεταβλητής +- **Χρησιμοποιήσει** ζεύγη κλειδί-τιμή για να ετικετοποιήσουμε κάθε πληροφορία ξεκάθαρα ```javascript -// Step 3: Using and updating variables +// Βήμα 3: Χρήση και ενημέρωση μεταβλητών console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Ενημέρωση μεταβλητών που μπορούν να αλλάξουν currentWeather = "cloudy"; temperature = 68; ``` - -**Ας κατανοήσουμε κάθε μέρος:** -- **Εμφανίστε** πληροφορίες χρησιμοποιώντας template literals με σύνταξη `${}` -- **Πρόσβαση** στις ιδιότητες αντικειμένων χρησιμοποιώντας τη σημειογραφία τελείας (`weatherData.windSpeed`) -- **Ενημερώστε** μεταβλητές που δηλώθηκαν με `let` για να αντικατοπτρίσουν τις μεταβαλλόμενες συνθήκες -- **Συνδυάστε** πολλαπλές μεταβλητές για να δημιουργήσετε ουσιαστικά μηνύματα + +**Ας κατανοήσουμε κάθε μέρος:** +- **Εμφάνιση** πληροφοριών χρησιμοποιώντας template literals με σύνταξη `${}` +- **Πρόσβαση** σε ιδιότητες αντικειμένων με τελεία (`weatherData.windSpeed`) +- **Ενημέρωση** μεταβλητών δηλωμένων με `let` για να αντανακλούν μεταβαλλόμενες συνθήκες +- **Συνδυασμός** πολλών μεταβλητών για δημιουργία νοημάτων μηνυμάτων ```javascript -// Step 4: Modern destructuring for cleaner code +// Βήμα 4: Σύγχρονο αποδόμημα για πιο καθαρό κώδικα const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Τι πρέπει να ξέρεις:** +- **Εξαγωγή** συγκεκριμένων ιδιοτήτων από αντικείμενα με αποδομητική ανάθεση +- **Δημιουργία** νέων μεταβλητών αυτόματα με τα ίδια ονόματα όπως τα κλειδιά των αντικειμένων +- **Απλοποίηση** του κώδικα αποφεύγοντας επαναλαμβανόμενη χρήση τελείας -**Τι πρέπει να γνωρίζετε:** -- **Εξαγάγετε** συγκεκριμένες ιδιότητες από αντικείμενα χρησιμοποιώντας την ανάθεση αποδόμησης -- **Δημιουργήστε** νέες μεταβλητές αυτόματα με τα ίδια ονόματα όπως τα κλειδιά των αντικειμένων -- **Απλοποιήστε** τον κώδικα αποφεύγοντας την επαναλαμβανόμενη σημειογραφία τελείας - -### Ροή Ελέγχου: Διδάξτε στο Πρόγραμμά σας να Σκέφτεται +### Ροή Ελέγχου: Διδάσκοντας Το Πρόγραμμά Σου Να Σκέφτεται -Εδώ είναι που ο προγραμματισμός γίνεται πραγματικά εκπληκτικός! Η **ροή ελέγχου** είναι ουσιαστικά το να διδάξετε στο πρόγραμμά σας πώς να παίρνει έξυπνες αποφάσεις, ακριβώς όπως κάνετε κάθε μέρα χωρίς καν να το σκέφτεστε. +Εντάξει, εδώ ο προγραμματισμός γίνεται απολύτως εκπληκτικός! Η **ροή ελέγχου** ουσιαστικά μαθαίνει στο πρόγραμμα πώς να παίρνει έξυπνες αποφάσεις, ακριβώς όπως το κάνεις κι εσύ κάθε μέρα χωρίς καν να το συνειδητοποιείς. -Φανταστείτε το: σήμερα το πρωί πιθανότατα περάσατε από κάτι σαν "Αν βρέχει, θα πάρω ομπρέλα. Αν κάνει κρύο, θα φορέσω μπουφάν. Αν αργώ, θα παραλείψω το πρωινό και θα πάρω καφέ στο δρόμο." Ο εγκέφαλός σας ακολουθεί φυσικά αυτή τη λογική if-then δεκάδες φορές κάθε μέρα! +Φαντάσου το εξής: σήμερα το πρωί μάλλον πέρασες από κάτι σαν "Αν βρέχει, θα πάρω ομπρέλα. Αν κάνει κρύο, θα φορέσω μπουφάν. Αν αργώ, θα παραλείψω το πρωινό και θα πάρω καφέ στο δρόμο." Ο εγκέφαλός σου ακολουθεί αυτή την if-then λογική δεκάδες φορές κάθε μέρα! -Αυτό είναι που κάνει τα προγράμματα να φαίνονται έξυπνα και ζωντανά αντί να ακολουθούν απλώς κάποιο βαρετό, προβλέψιμο σενάριο. Μπορούν πραγματικά να κοιτάξουν μια κατάσταση, να αξιολογήσουν τι συμβαίνει και να ανταποκριθούν κατάλληλα. Είναι σαν να δίνετε στο πρόγραμμά σας έναν εγκέφαλο που μπορεί να προσαρμοστεί και να κάνει επιλογές! +Αυτό είναι που κάνει τα προγράμματα να φαίνονται έξυπνα και ζωντανά, αντί να απλώς ακολουθούν κάποιο βαρετό και προβλέψιμο σενάριο. Μπορούν να δουν μια κατάσταση, να αξιολογήσουν τι συμβαίνει, και να ανταποκριθούν κατάλληλα. Είναι σαν να δίνεις στο πρόγραμμα ένα μυαλό που μπορεί να προσαρμοστεί και να κάνει επιλογές! -Θέλετε να δείτε πόσο όμορφα λειτουργεί αυτό; Ας σας δείξω: +Θες να δεις πόσο όμορφα λειτουργεί αυτό; Άσε με να σου δείξω: ```javascript -// Step 1: Basic conditional logic +// Βήμα 1: Βασική συνθήκη λογικής const userAge = 17; if (userAge >= 18) { @@ -214,15 +395,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Τι κάνει αυτός ο κώδικας:** -- **Ελέγχει** αν η ηλικία του χρήστη πληροί την απαίτηση για ψήφο -- **Εκτελεί** διαφορετικά μπλοκ κώδικα ανάλογα με το αποτέλεσμα της συνθήκης -- **Υπολογίζει** και εμφανίζει πόσος χρόνος απομένει μέχρι την επιλεξιμότητα ψήφου αν είναι κάτω των 18 -- **Παρέχει** συγκεκριμένα, χρήσιμα σχόλια για κάθε σενάριο + +**Αυτό που κάνει ο κώδικας:** +- **Ελέγχει** αν η ηλικία χρήστη πληροί την προϋπόθεση για ψήφο +- **Εκτελεί** διαφορετικά μπλοκ κώδικα με βάση το αποτέλεσμα της συνθήκης +- **Υπολογίζει** και εμφανίζει πόσος χρόνος μένει μέχρι να μπορεί να ψηφίσει αν είναι κάτω των 18 +- **Προσφέρει** συγκεκριμένη, χρήσιμη ανατροφοδότηση για κάθε σενάριο ```javascript -// Step 2: Multiple conditions with logical operators +// Βήμα 2: Πολλαπλές συνθήκες με λογικούς τελεστές const userAge = 17; const hasPermission = true; @@ -234,26 +415,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Ανάλυση του τι συμβαίνει εδώ:** -- **Συνδυάστε** πολλαπλές συνθήκες χρησιμοποιώντας τον τελεστή `&&` (και) -- **Δημιουργήστε** μια ιεραρχία συνθηκών χρησιμοποιώντας `else if` για πολλαπλά σενάρια -- **Διαχειριστείτε** όλες τις πιθανές περιπτώσεις με μια τελική δήλωση `else` -- **Παρέχετε** σαφή, εφαρμόσιμα σχόλια για κάθε διαφορετική κατάσταση + +**Ανάλυση τι συμβαίνει εδώ:** +- **Συνδυάζει** πολλαπλές συνθήκες με τον τελεστή `&&` (και) +- **Δημιουργεί** ιεραρχία συνθηκών με `else if` για πολλαπλά σενάρια +- **Χειρίζεται** όλες τις πιθανές περιπτώσεις με μια τελική δήλωση `else` +- **Παρέχει** σαφή και πράξημο ανατροφοδότηση για κάθε διαφορετική κατάσταση ```javascript -// Step 3: Concise conditional with ternary operator +// Βήμα 3: Συνοπτική συνθήκη με τον τριμερικό τελεστή const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Τι πρέπει να θυμάστε:** -- **Χρησιμοποιήστε** τον τελεστή τριμερούς (`? :`) για απλές συνθήκες δύο επιλογών -- **Γράψτε** πρώτα τη συνθήκη, ακολουθούμενη από `?`, μετά το αποτέλεσμα true, μετά `:`, και τέλος το αποτέλεσμα false -- **Εφαρμόστε** αυτό το μοτίβο όταν χρειάζεστε να αναθέσετε τιμές βάσει συνθηκών + +**Τι πρέπει να θυμάσαι:** +- **Χρησιμοποίησε** τον τριαδικό τελεστή (`? :`) για απλές συνθήκες με δύο επιλογές +- **Γράψε** πρώτα τη συνθήκη, μετά `?`, μετά την αληθή περίπτωση, μετά `:`, και μετά την ψευδή περίπτωση +- **Εφάρμοσε** αυτό το μοτίβο όταν χρειάζεσαι να αναθέσεις τιμές βάσει συνθηκών ```javascript -// Step 4: Handling multiple specific cases +// Βήμα 4: Διαχείριση πολλαπλών συγκεκριμένων περιπτώσεων const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -272,187 +453,288 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**Αυτός ο κώδικας πετυχαίνει τα εξής:** +- **Ταιριάζει** την τιμή μιας μεταβλητής σε πολλές συγκεκριμένες περιπτώσεις +- **Ομαδοποιεί** παρόμοιες περιπτώσεις μαζί (εργάσιμες ημέρες έναντι σαββατοκύριακων) +- **Εκτελεί** το κατάλληλο μπλοκ κώδικα όταν βρεθεί ταύτιση +- **Περιλαμβάνει** μια `default` περίπτωση για την αντιμετώπιση απρόβλεπτων τιμών +- **Χρησιμοποιεί** δηλώσεις `break` για να εμποδίσει τον κώδικα να συνεχίσει στην επόμενη περίπτωση + +> 💡 **Αναλογία από την πραγματική ζωή**: Σκέψου τη ροή ελέγχου σαν το πιο υπομονετικό GPS στον κόσμο που σου δίνει οδηγίες. Μπορεί να σου πει "Αν υπάρχει κίνηση στην Οδό Κεντρικής, πάρε τον αυτοκινητόδρομο. Αν ο δρόμος μπλοκάρεται από έργα, δοκίμασε τη διαδρομή με θέα." Τα προγράμματα χρησιμοποιούν ακριβώς αυτό το είδος λογικής για να ανταποκρίνονται έξυπνα σε διαφορετικές καταστάσεις και πάντα να προσφέρουν την καλύτερη δυνατή εμπειρία στους χρήστες. + +### 🎯 **Έλεγχος Έννοιας: Κυριαρχία Στα Θεμελιώδη Στοιχεία** + +**Ας δούμε πώς τα πας με τα βασικά:** +- Μπορείς να εξηγήσεις τη διαφορά ανάμεσα σε μεταβλητή και δήλωση με δικά σου λόγια; +- Σκέψου ένα πραγματικό παράδειγμα όπου θα χρησιμοποιούσες μια απόφαση τύπου if-then (όπως στο παράδειγμα της ψήφου) +- Ποιο είναι κάτι στην λογική του προγραμματισμού που σε εξέπληξε; + +**Γρήγορο ενισχυτικό αυτοπεποίθησης:** +```mermaid +flowchart LR + A["📝 Δηλώσεις
(Εντολές)"] --> B["📦 Μεταβλητές
(Αποθήκευση)"] --> C["🔀 Έλεγχος Ροής
(Αποφάσεις)"] --> D["🎉 Λειτουργικό Πρόγραμμα!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Τι θα ακολουθήσει**: Θα περάσουμε υπέροχα εξερευνώντας πιο βαθιά αυτές τις έννοιες καθώς θα συνεχίζουμε μαζί αυτό το απίστευτο ταξίδι! Τώρα απλώς εστίασε στο να νιώθεις τον ενθουσιασμό για όλες τις εκπληκτικές δυνατότητες που έχεις μπροστά σου. Οι συγκεκριμένες δεξιότητες και τεχνικές θα έρθουν φυσικά καθώς θα εξασκούμαστε μαζί – υπόσχομαι πως αυτό θα είναι πολύ πιο διασκεδαστικό από όσο πιθανώς φαντάζεσαι! + +## Εργαλεία Του Εμπορίου -**Αυτός ο κώδικας επιτυγχάνει τα εξής:** -- **Ταιριάζει** την τιμή της μεταβλητής με πολλαπλές συγκεκριμένες περιπτώσεις -- **Ομαδοποιεί** παρόμοιες περιπτώσεις μαζί (εργάσιμες ημέρες έναντι Σαββατοκύριακου) -- **Εκτελεί** το κατάλληλο μπλοκ κώδικα όταν βρεθεί αντιστοιχία -- **Περιλαμβάνει** μια περίπτωση `default` για να διαχειριστεί απροσδόκητες τιμές -- **Χρησιμοποιεί** δηλώσεις `break` για να αποτρέψει τον κώδικα από το να συνεχίσει στην επόμενη περίπτωση +Εντάξει, εδώ πραγματικά ενθουσιάζομαι τόσο που σχεδόν δεν μπορώ να το συγκρατήσω! 🚀 Ετοιμαζόμαστε να μιλήσουμε για τα απίστευτα εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν τα κλειδιά ενός ψηφιακού διαστημικού σκάφους. + +Ξέρεις πώς ένας σεφ έχει τα τέλεια ισορροπημένα μαχαίρια που νιώθεις σαν προέκταση των χεριών του; Ή πώς ένας μουσικός έχει την κιθάρα που μοιάζει να τραγουδά τη στιγμή που την αγγίζει; Λοιπόν, οι προγραμματιστές έχουμε τη δική μας εκδοχή αυτών των μαγικών εργαλείων, και εδώ είναι το πιο εκπληκτικό που θα σου αλλάξει το μυαλό – τα περισσότερα είναι εντελώς δωρεάν! -> 💡 **Αναλογία πραγματικού κόσμου**: Σκεφτείτε τη ροή ελέγχου σαν να έχετε το πιο υπομονετικό GPS που σας δίνει οδηγίες. Μπορεί να πει "Αν υπάρχει κίνηση στην Main Street, πάρτε τον αυτοκινητόδρομο. Αν η κατασκευή μπλοκάρει τον αυτοκινητόδρομο, δοκιμάστε τη γραφική διαδρομή." Τα προγράμματα χρησιμοποιούν ακριβώς τον ίδιο τύπο λογικής συνθηκών για να ανταποκριθούν έξυπνα σε διαφορετικές καταστάσεις και να δώσουν στους χρήστες την καλύτερη δυνατή εμπειρία. +Πραγματικά χοροπηδάω στην καρέκλα μου σκεπτόμενος να τα μοιραστώ μαζί σου, γιατί έχουν επαναστατικοποιήσει τον τρόπο που φτιάχνουμε λογισμικό. Μιλάμε για βοηθούς προγραμματισμού με τεχνητή νοημοσύνη που μπορούν να σε βοηθήσουν να γράψεις τον κώδικά σου (σοβαρά τώρα!), περιβάλλοντα στην cloud όπου μπορείς να δημιουργήσεις ολόκληρες εφαρμογές από κυριολεκτικά οπουδήποτε υπάρχει Wi-Fi και εργαλεία debugging τόσο προηγμένα που είναι σαν να έχεις ακτίνες Χ για τα προγράμματά σου. -✅ **Τι έρχεται στη συνέχεια**: Θα περάσουμε υπέροχα εμβαθύνοντας σε αυτές τις έννοιες καθώς συνεχίζουμε αυτό το απίστευτο ταξίδι μαζί! Προς το παρόν, απλώς επικεντρωθείτε στο να νιώσετε τον ενθουσιασμό για όλες τις εκπληκτικές δυνατότητες που σας περιμένουν. Οι συγκεκριμένες δεξιότητες και τεχνικές θα σας μείνουν φυσικά καθώς εξασκούμε μαζί – σας υπόσχομαι ότι αυτό θα είναι πολύ πιο διασκεδαστικό από ό,τι ίσως περιμένατε! +Και να το κομμάτι που ακόμα μου προκαλεί ανατριχίλα: αυτά δεν είναι «εργαλεία για αρχάριους» που θα ξεπεράσεις αργότερα. Αυτά είναι τα ίδια επαγγελματικού επιπέδου εργαλεία που χρησιμοποιούν προγραμματιστές στη Google, το Netflix, και στο indie στούντιο εφαρμογών που αγαπάς ακριβώς αυτή τη στιγμή. Θα νιώθεις τεράστιος επαγγελματίας όταν τα χρησιμοποιείς! -## Εργαλεία του Επαγγέλματος +```mermaid +graph TD + A["💡 Η Ιδέα Σας"] --> B["⌨️ Επεξεργαστής Κώδικα
(VS Code)"] + B --> C["🌐 Εργαλεία Προγραμματιστή Περιηγητή
(Δοκιμή & Αποσφαλμάτωση)"] + C --> D["⚡ Γραμμή Εντολών
(Αυτοματισμός & Εργαλεία)"] + D --> E["📚 Τεκμηρίωση
(Μάθηση & Αναφορά)"] + E --> F["🚀 Εκπληκτική Ιστοσελίδα!"] + + B -.-> G["🤖 Βοηθός Τεχνητής Νοημοσύνης
(GitHub Copilot)"] + C -.-> H["📱 Δοκιμή Συσκευών
(Ανταποκρινόμενος Σχεδιασμός)"] + D -.-> I["📦 Διαχειριστές Πακέτων
(npm, yarn)"] + E -.-> J["👥 Κοινότητα
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Επεξεργαστές Κώδικα και IDEs: Οι Νέοι Ψηφιακοί Καλύτεροι Φίλοι Σου -Λοιπόν, εδώ είναι που ενθουσιάζομαι τόσο πολύ που δεν μπορώ να συγκρατηθώ! 🚀 Θα μιλήσουμε για τα απίστευτα εργαλεία που πρόκειται να σας κάνουν να νιώσετε σαν να σας έδωσαν τα κλειδιά για ένα ψηφιακό διαστημόπλοιο. +Ας μιλήσουμε για επεξεργαστές κώδικα – αυτοί σοβαρά πρόκειται να γίνουν τα νέα αγαπημένα σου μέρη για να περάσεις χρόνο! Σκέψου τους σαν το προσωπικό σου καταφύγιο κωδικοποίησης όπου θα περνάς το μεγαλύτερο μέρος του χρόνου σου δημιουργώντας και ολοκληρώνοντας τις ψηφιακές σου δημιουργίες. -Ξέρετε πώς ένας σεφ έχει εκείνα τα τέλεια ισορροπημένα μαχαίρια που μοιάζουν σαν προέκταση των χεριών του; Ή πώς ένας μουσικός έχει εκείνη την κιθάρα που φαίνεται να τραγουδά τη στιγμή που την αγγίζει; Λοιπόν, οι προγραμματιστές έχουν τη δική μας εκδοχή αυτών των μαγικών εργαλείων, και εδώ είναι το εκπληκτικό – τα περισσότερα από αυτά είναι εντελώς δωρεάν! +Αλλά να τι είναι μαγικό στους σύγχρονους επεξεργαστές: δεν είναι απλά ένα ωραίο πρόγραμμα επεξεργασίας κειμένου. Είναι σαν να έχεις τον πιο έξυπνο, υποστηρικτικό μέντορα προγραμματισμού καθισμένο δίπλα σου 24/7. Σου βρίσκουν τα λάθη πριν καν τα παρατηρήσεις, προτείνουν βελτιώσεις που σε κάνουν να φαίνεσαι ιδιοφυΐα, σε βοηθούν να καταλάβεις τι κάνει κάθε κομμάτι κώδικα, και κάποιοι μπορούν ακόμα να προβλέψουν τι πρόκειται να γράψεις και να προσφέρουν να ολοκληρώσουν τις σκέψεις σου! -Δεν μπορώ να συγκρατήσω τον ενθουσιασμό μου καθώς σκέφτομαι να τα μοιραστώ μαζί σας, γιατί έχουν επαναστατήσει εντελώς τον τρόπο που δημιουργούμε λογισμικό. Μιλάμε για βοηθούς προγραμματισμού με τεχνητή νοημοσύνη που μπορούν να σας βοηθήσουν να γράψετε τον κώδικά σας (δεν αστειεύομαι καν!), περιβάλλοντα cloud όπου μπορείτε να δημιουργήσετε ολόκληρες εφαρμογές από κυριολεκτικά οπουδήποτε με Wi-Fi, και εργαλεία εντοπισμού σφαλμάτων τόσο εξελιγμένα που μοιάζουν σαν να έχετε ακτινογραφία για τα προγράμματά σας. +Θυμάμαι όταν ανακάλυψα για πρώτη φορά το auto-completion – ένιωσα κυριολεκτικά σαν να ζω στο μέλλον. Ξεκινάς να γράφεις κάτι και ο επεξεργαστής σου λέει, "Ρε συ, μήπως σκεφτόσουν αυτή τη συνάρτηση που κάνει ακριβώς αυτό που χρειάζεσαι;" Είναι σαν να έχεις έναν τηλεπαθητικό φίλο προγραμματισμού! -Και εδώ είναι το μέρος που ακόμα μου προκαλεί ρίγη: αυτά δεν είναι "εργαλεία για αρχάριους" που θα ξεπεράσετε. Αυτά είναι τα ίδια επαγγελματικά εργαλεία που χρησιμοποιούν οι προγραμματιστές στη Google, το Netflix και εκείνο το indie app studio που αγαπάτε αυτή τη στιγμή. Θα νιώσετε τόσο επαγγελματίας χρησιμοποιώντας τα! +**Τι κάνει αυτούς τους επεξεργαστές τόσο απίθανους;** -### Επεξεργαστές Κώδικα και IDEs: Οι Νέοι Ψηφιακοί Κολλητοί σας +Οι σύγχρονοι επεξεργαστές κώδικα προσφέρουν μια εντυπωσιακή γκάμα δυνατοτήτων για να αυξήσουν την παραγωγικότητά σου: -Ας μιλήσουμε για τους επεξεργαστές κώδικα – αυτοί πρόκειται να γίνουν τα αγαπημένα σας μέρη για να περνάτε χρόνο! Σκεφτείτε τους σαν το προσωπικό σας καταφύγιο προγραμματισμού όπου θα περνάτε τον περισσότερο χρόνο σας δημιουργώντας και τελειοποιώντας τις ψηφιακές σας δημιουργίες. +| Δυνατότητα | Τι Κάνει | Γιατί Βοηθάει | +|------------|----------|---------------| +| **Έγχρωμη Ανάδειξη Συντακτικού** | Χρωματίζει διαφορετικά μέρη του κώδικά σου | Κάνει τον κώδικα πιο εύκολο στην ανάγνωση και εύρεση λαθών | +| **Αυτόματη Συμπλήρωση** | Προτείνει κώδικα καθώς πληκτρολογείς | Επιταχύνει τον προγραμματισμό και μειώνει τα τυπογραφικά λάθη | +| **Εργαλεία Εντοπισμού Σφαλμάτων** | Σε βοηθάει να βρεις και να διορθώσεις λάθη | Εξοικονομεί ώρες δυσκολιών και αναζητήσεων λαθών | +| **Πρόσθετα** | Προσθέτουν εξειδικευμένες λειτουργίες | Προσαρμόζουν τον επεξεργαστή σου για οποιαδήποτε τεχνολογία | +| **Βοηθοί Τεχνητής Νοημοσύνης** | Προτείνουν κώδικα και εξηγήσεις | Επιταχύνουν τη μάθηση και την παραγωγικότητα | -Αλλά εδώ είναι το μαγικό με τους σύγχρονους επεξεργαστές: δεν είναι απλώς φανταχτεροί επεξεργαστές κειμένου. Είναι σαν να έχετε τον πιο λαμπρό, υποστηρικτικό μέντορα προγραμματισμού δίπλα σας 24/7. Εντοπίζουν τα λάθη σας πριν καν τα παρατηρήσετε, προτείνουν βελτιώσεις που σας κάνουν να φαίνεστε ιδιοφυΐα, σας βοηθούν να κατανοήσετε τι κάνει κάθε κομμάτι κώδικα, και μερικοί μπορούν ακόμη και να προβλέψουν τι πρόκειται να πληκτρολογήσετε και να προσφέρουν να ολοκληρώσουν τις σκέψεις σας! +> 🎥 **Βίντεο Πόρος**: Θέλεις να δεις αυτά τα εργαλεία σε δράση; Δες αυτό το [βίντεο Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) για μια ολοκληρωμένη επισκόπηση. -Θυμάμαι όταν ανακάλυψα για πρώτη φορά την αυτόματη συμπλήρωση – ένιωσα κυριολεκτικά σαν να ζω στο μέλλον. Ξεκινάτε να πληκτρολογείτε κάτι, και ο επεξεργαστής σας λέει, "Γεια, σκεφτόσασταν αυτή τη συνάρτηση που κάνει ακριβώς αυτό που χρειάζεστε;" Είναι σαν να έχετε έναν αναγνώστη σκέψεων ως φίλο προγραμματισμού! +#### Συνιστώμενοι Επεξεργαστές για Web Development -**Τι κάνει αυτούς τους επεξεργαστές τόσο απίστευτους;** +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Δωρεάν) +- Ο πιο δημοφιλής μεταξύ των web developers +- Εξαιρετικό οικοσύστημα προσθέτων +- Ενσωματωμένο τερματικό και ολοκλήρωση με Git +- **Απαραίτητα πρόσθετα**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Προτάσεις κώδικα με τεχνητή νοημοσύνη + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Συνεργασία σε πραγματικό χρόνο + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Αυτόματη μορφοποίηση κώδικα + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Ανίχνευση ορθογραφικών λαθών στον κώδικα -Οι σύγχρονοι επεξεργαστές κώδικα προσφέρουν μια εντυπωσιακή σειρά χαρακτηριστικών σχεδιασμένων να αυξήσουν την παραγωγικότητά σας: +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Επί πληρωμή, δωρεάν για φοιτητές) +- Προηγμένα εργαλεία debugging και testing +- Έξυπνη αυτόματη συμπλήρωση κώδικα +- Ενσωματωμένος έλεγχος έκδοσης -| Χαρακτηριστικό | Τι Κάνει | Γιατί Βοηθά | -|----------------|----------|-------------| -| **Χρωματισμός Σύνταξης** | Χρωματίζει διαφορετικά μέρη του κώδικα σας | Κάνει τον κώδικα πιο ευανάγνωστο και εντοπίζει λάθη | -| **Αυτόματη Συμπλήρωση** | Προτείνει κώδικα καθώς πληκτρολογείτε | Επιταχύνει την κωδικοποίηση και μειώνει τα λάθη | -| **Εργαλεία Εντοπισμού Σφαλμάτων** | Βοηθά στον εντοπισμό και τη διόρθωση λαθών | Εξοικονομεί ώρες χρόνου αντιμετώπισης προβλημάτων | -| **Επεκτάσεις** | Προσθέτει εξειδικευμένα χαρακτηριστικά | Προσαρμόζει τον επεξεργαστή σας για οποιαδήποτε τεχνολογία | -| **Βοηθοί AI** | Προτείνουν κώδικα και εξηγήσεις | Επιταχύνουν τη μάθηση και την παραγωγικότητα | +**Cloud-Based IDEs** (Διάφορες τιμές) +- [GitHub Codespaces](https://github.com/features/codespaces) - Ολόκληρο VS Code μέσα στον browser σου +- [Replit](https://replit.com/) - Ιδανικό για μάθηση και κοινή χρήση κώδικα +- [StackBlitz](https://stackblitz.com/) - Άμεση ανάπτυξη web εφαρμογών πλήρους στοίβας -> 🎥 **Πόρος Βίντεο**: Θέλετε να δείτε αυτά τα εργαλεία σε δράση; Δείτε αυτό το [βίντεο για τα Εργαλεία του Επαγγέλματος](https://youtube.com/watch?v=69WJeXGBdx -| **Κονσόλα** | Δείτε μηνύματα σφάλματος και δοκιμάστε JavaScript | Εντοπίστε προβλήματα και πειραματιστείτε με κώδικα | -| **Παρακολούθηση Δικτύου** | Παρακολουθήστε πώς φορτώνονται οι πόροι | Βελτιστοποιήστε την απόδοση και τους χρόνους φόρτωσης | -| **Έλεγχος Προσβασιμότητας** | Δοκιμάστε για συμπεριληπτικό σχεδιασμό | Βεβαιωθείτε ότι ο ιστότοπός σας λειτουργεί για όλους τους χρήστες | -| **Προσομοιωτής Συσκευών** | Προεπισκόπηση σε διαφορετικά μεγέθη οθόνης | Δοκιμάστε τον ευέλικτο σχεδιασμό χωρίς πολλαπλές συσκευές | +> 💡 **Συμβουλή για να ξεκινήσεις**: Ξεκίνα με το Visual Studio Code – είναι δωρεάν, ευρέως χρησιμοποιούμενο στη βιομηχανία, και έχει μια τεράστια κοινότητα που δημιουργεί χρήσιμα tutorials και πρόσθετα. -#### Συνιστώμενοι Περιηγητές για Ανάπτυξη +### Περιηγητές Ιστού: Το Μυστικό Σου Εργαστήριο Ανάπτυξης -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Εργαλεία ανάπτυξης που θεωρούνται πρότυπο στον κλάδο, με εκτενή τεκμηρίωση -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Εξαιρετικά εργαλεία για CSS Grid και προσβασιμότητα -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Βασισμένο στο Chromium με πόρους ανάπτυξης της Microsoft +Εντάξει, ετοιμάσου να σοκαριστείς τελείως! Ξέρεις πώς χρησιμοποιείς τους περιηγητές για να σκρολάρεις στα social media και να βλέπεις βίντεο; Λοιπόν, αποδεικνύεται πως έκρυβαν αυτό το απίστευτο μυστικό εργαστήριο προγραμματισμού όλον αυτόν τον καιρό, περιμένοντας απλά να το ανακαλύψεις! -> ⚠️ **Σημαντική Συμβουλή Δοκιμών**: Πάντα να δοκιμάζετε τους ιστότοπούς σας σε πολλούς περιηγητές! Αυτό που λειτουργεί τέλεια στο Chrome μπορεί να φαίνεται διαφορετικό στο Safari ή στο Firefox. Οι επαγγελματίες προγραμματιστές δοκιμάζουν σε όλους τους μεγάλους περιηγητές για να εξασφαλίσουν συνεπή εμπειρία χρήστη. +Κάθε φορά που κάνεις δεξί κλικ σε μια ιστοσελίδα και επιλέγεις "Επιθεώρηση στοιχείου" ανοίγεις έναν κρυφό κόσμο εργαλείων προγραμματιστή που είναι ειλικρινά πιο ισχυρά από μερικά ακριβά λογισμικά που πληρωνόμουν εκατοντάδες ευρώ παλιότερα. Είναι σαν να ανακαλύπτεις ότι η παλιά σου κουζίνα έκρυβε ένα επαγγελματικό εργαστήριο σεφ πίσω από ένα κρυφό πάνελ! +Την πρώτη φορά που μου έδειξε κάποιος τα DevTools του browser, πέρασα περίπου τρεις ώρες απλώς κάνοντας κλικ και λέγοντας «ΠΕΡΙΜΕΝΕ, ΜΠΟΡΕΙ ΝΑ ΚΑΝΕΙ ΚΙ ΑΥΤΟ;!» Μπορείς κυριολεκτικά να επεξεργαστείς οποιαδήποτε ιστοσελίδα σε πραγματικό χρόνο, να δεις ακριβώς πόσο γρήγορα φορτώνει τα πάντα, να δοκιμάσεις πώς φαίνεται ο ιστότοπός σου σε διαφορετικές συσκευές, και ακόμα να αποσφαλματώσεις JavaScript σαν απόλυτος επαγγελματίας. Είναι πραγματικά απίστευτο! -### Εργαλεία Γραμμής Εντολών: Η Πύλη σας για Υπερδυνάμεις Προγραμματιστή +**Γιατί οι browsers είναι το μυστικό σου όπλο:** -Ας είμαστε ειλικρινείς για τη γραμμή εντολών, γιατί θέλω να το ακούσετε από κάποιον που πραγματικά το καταλαβαίνει. Όταν την είδα για πρώτη φορά – αυτή τη μαύρη οθόνη που αναβοσβήνει – σκέφτηκα κυριολεκτικά, "Όχι, με τίποτα! Αυτό μοιάζει με κάτι από ταινία χάκερ της δεκαετίας του '80, και σίγουρα δεν είμαι αρκετά έξυπνος για αυτό!" 😅 +Όταν δημιουργείς μια ιστοσελίδα ή μια web εφαρμογή, χρειάζεται να δεις πώς φαίνεται και πώς συμπεριφέρεται στον πραγματικό κόσμο. Οι browsers όχι μόνο εμφανίζουν τη δουλειά σου, αλλά παρέχουν και λεπτομερή ανατροφοδότηση για την απόδοση, την προσβασιμότητα και πιθανά προβλήματα. -Αλλά να τι θα ήθελα να μου είχε πει κάποιος τότε, και τι σας λέω τώρα: η γραμμή εντολών δεν είναι τρομακτική – είναι σαν να έχετε μια άμεση συνομιλία με τον υπολογιστή σας. Σκεφτείτε το σαν τη διαφορά μεταξύ του να παραγγείλετε φαγητό μέσω μιας εφαρμογής με εικόνες και μενού (που είναι ωραίο και εύκολο) και του να μπείτε στο αγαπημένο σας τοπικό εστιατόριο όπου ο σεφ ξέρει ακριβώς τι σας αρέσει και μπορεί να φτιάξει κάτι τέλειο μόνο με το να πείτε "έκπληξέ με με κάτι καταπληκτικό." +#### Εργαλεία Ανάπτυξης Browser (DevTools) -Η γραμμή εντολών είναι εκεί που οι προγραμματιστές νιώθουν σαν απόλυτοι μάγοι. Πληκτρολογείτε μερικές φαινομενικά μαγικές λέξεις (εντάξει, είναι απλώς εντολές, αλλά μοιάζουν μαγικές!), πατάτε enter, και ΜΠΑΜ – έχετε δημιουργήσει ολόκληρες δομές έργων, εγκαταστήσει ισχυρά εργαλεία από όλο τον κόσμο ή ανεβάσει την εφαρμογή σας στο διαδίκτυο για να τη δουν εκατομμύρια άνθρωποι. Μόλις δοκιμάσετε αυτή τη δύναμη, είναι πραγματικά εθιστικό! +Οι σύγχρονοι browsers περιλαμβάνουν ολοκληρωμένες σουίτες ανάπτυξης: -**Γιατί η γραμμή εντολών θα γίνει το αγαπημένο σας εργαλείο:** +| Κατηγορία Εργαλείου | Τι Κάνει | Παράδειγμα Χρήσης | +|---------------------|----------|-------------------| +| **Επιθεωρητής Στοιχείων** | Προβολή και επεξεργασία HTML/CSS σε πραγματικό χρόνο | Προσαρμογή στυλ για άμεσα αποτελέσματα | +| **Κονσόλα** | Προβολή μηνυμάτων σφαλμάτων και δοκιμή JavaScript | Αποσφαλμάτωση προβλημάτων και πειραματισμός με κώδικα | +| **Παρακολούθηση Δικτύου** | Παρακολούθηση φόρτωσης πόρων | Βελτιστοποίηση απόδοσης και χρόνων φόρτωσης | +| **Έλεγχος Προσβασιμότητας** | Δοκιμή για συμπεριληπτικό σχεδιασμό | Εξασφάλιση λειτουργικότητας για όλους τους χρήστες | +| **Προσομοιωτής Συσκευών** | Προεπισκόπηση σε διαφορετικά μεγέθη οθόνης | Δοκιμή responsive σχεδιασμού χωρίς πολλές συσκευές | -Ενώ οι γραφικές διεπαφές είναι εξαιρετικές για πολλές εργασίες, η γραμμή εντολών υπερέχει στην αυτοματοποίηση, την ακρίβεια και την ταχύτητα. Πολλά εργαλεία ανάπτυξης λειτουργούν κυρίως μέσω γραμμών εντολών, και η εκμάθηση της αποτελεσματικής χρήσης τους μπορεί να βελτιώσει δραματικά την παραγωγικότητά σας. +#### Προτεινόμενοι Browsers για Ανάπτυξη + +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Πρότυπα DevTools με εκτενή τεκμηρίωση +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Εξαιρετικά εργαλεία CSS Grid και προσβασιμότητας +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Βασισμένος σε Chromium με πόρους ανάπτυξης της Microsoft + +> ⚠️ **Σημαντική Συμβουλή Δοκιμών**: Πάντα να δοκιμάζεις τους ιστότοπούς σου σε πολλαπλούς browsers! Αυτό που λειτουργεί τέλεια στο Chrome μπορεί να φαίνεται διαφορετικό στο Safari ή στο Firefox. Οι επαγγελματίες προγραμματιστές δοκιμάζουν σε όλους τους μεγάλους browsers για να εξασφαλίσουν συνεπή εμπειρία χρήστη. + + +### Εργαλεία Γραμμής Εντολών: Η Πύλη σου σε Υπερδυνάμεις Προγραμματιστή + +Εντάξει, ας έχουμε μια εντελώς ειλικρινή στιγμή εδώ για τη γραμμή εντολών, γιατί θέλω να το ακούσεις από κάποιον που το καταλαβαίνει πραγματικά. Την πρώτη φορά που την είδα – αυτήν την τρομακτική μαύρη οθόνη με το αναβοσβήσιμο κείμενο – σκέφτηκα κυριολεκτικά, «Όχι, ούτε καν! Φαίνεται κάτι από ταινία χάκερ των 1980s, και σίγουρα δεν είμαι αρκετά έξυπνος γι’ αυτό!» 😅 + +Αλλά εδώ είναι τι θα ήθελα να μου είχε πει κάποιος τότε, και τι σου λέω τώρα: η γραμμή εντολών δεν είναι τρομακτική – είναι σαν να έχεις μια άμεση συνομιλία με τον υπολογιστή σου. Σκέψου την ως τη διαφορά μεταξύ της παραγγελίας φαγητού μέσω μιας κομψής εφαρμογής με εικόνες και μενού (που είναι ωραίο και εύκολο) και της εισόδου στο αγαπημένο σου τοπικό εστιατόριο, όπου ο σεφ ξέρει ακριβώς τι σου αρέσει και μπορεί να σου ετοιμάσει κάτι τέλειο απλώς λέγοντας «έκπληξέ με με κάτι καταπληκτικό.» + +Η γραμμή εντολών είναι το μέρος όπου οι προγραμματιστές νιώθουν σαν απόλυτοι μάγοι. Πληκτρολογείς μερικές λέξεις που μοιάζουν μαγικές (εντάξει, είναι απλές εντολές, αλλά νιώθουν μαγικές!), πατάς enter και ΜΠΑΜ – δημιούργησες ολόκληρες δομές έργων, εγκατέστησες ισχυρά εργαλεία από όλο τον κόσμο, ή ανέβασες την εφαρμογή σου στο διαδίκτυο για εκατομμύρια ανθρώπους να τη δουν. Μόλις δοκιμάσεις αυτή τη δύναμη, είναι εθιστικό! + +**Γιατί η γραμμή εντολών θα γίνει το αγαπημένο σου εργαλείο:** + +Ενώ οι γραφικές διεπαφές είναι υπέροχες για πολλές εργασίες, η γραμμή εντολών υπερισχύει στον αυτοματισμό, την ακρίβεια και την ταχύτητα. Πολλά εργαλεία ανάπτυξης δουλεύουν κυρίως μέσω διεπαφής γραμμής εντολών, και η εκμάθησή τους μπορεί να βελτιώσει δραματικά την παραγωγικότητά σου. ```bash -# Step 1: Create and navigate to project directory +# Βήμα 1: Δημιουργήστε και μεταβείτε στον κατάλογο του έργου mkdir my-awesome-website cd my-awesome-website ``` -**Τι κάνει αυτός ο κώδικας:** -- **Δημιουργεί** έναν νέο φάκελο με όνομα "my-awesome-website" για το έργο σας -- **Μετακινείται** στον νέο φάκελο για να ξεκινήσετε την εργασία +**Αυτό που κάνει ο κώδικας:** +- **Δημιουργεί** έναν νέο φάκελο "my-awesome-website" για το έργο σου +- **Μετακινείσαι** στον νεοδημιουργημένο φάκελο για να ξεκινήσεις να δουλεύεις ```bash -# Step 2: Initialize project with package.json +# Βήμα 2: Αρχικοποιήστε το έργο με το package.json npm init -y -# Install modern development tools +# Εγκαταστήστε σύγχρονα εργαλεία ανάπτυξης npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Βήμα προς βήμα, τι συμβαίνει:** -- **Αρχικοποιεί** ένα νέο έργο Node.js με προεπιλεγμένες ρυθμίσεις χρησιμοποιώντας `npm init -y` -- **Εγκαθιστά** το Vite ως σύγχρονο εργαλείο κατασκευής για γρήγορη ανάπτυξη και παραγωγικές κατασκευές -- **Προσθέτει** το Prettier για αυτόματη μορφοποίηση κώδικα και το ESLint για έλεγχο ποιότητας κώδικα -- **Χρησιμοποιεί** τη σημαία `--save-dev` για να χαρακτηρίσει αυτά ως εξαρτήσεις μόνο για ανάπτυξη +**Βήμα βήμα, τι συμβαίνει:** +- **Αρχικοποιεί** ένα νέο έργο Node.js με τις προεπιλεγμένες ρυθμίσεις χρησιμοποιώντας `npm init -y` +- **Εγκαθιστά** το Vite ως σύγχρονο εργαλείο κατασκευής για γρήγορη ανάπτυξη και παραγωγή +- **Προσθέτει** το Prettier για αυτόματο φορμάρισμα κώδικα και το ESLint για έλεγχο ποιότητας κώδικα +- **Χρησιμοποιεί** τη σημαία `--save-dev` για να δηλώσει αυτές τις εξαρτήσεις ως μόνο για ανάπτυξη ```bash -# Step 3: Create project structure and files +# Βήμα 3: Δημιουργήστε τη δομή και τα αρχεία του έργου mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Εκκινήστε τον διακομιστή ανάπτυξης npx vite ``` -**Στα παραπάνω, έχουμε:** -- **Οργανώσει** το έργο μας δημιουργώντας ξεχωριστούς φακέλους για τον πηγαίο κώδικα και τα αρχεία -- **Δημιουργήσει** ένα βασικό αρχείο HTML με σωστή δομή εγγράφου -- **Ξεκινήσει** τον διακομιστή ανάπτυξης Vite για ζωντανή ανανέωση και αντικατάσταση μονάδων σε πραγματικό χρόνο +**Στο παραπάνω έχουμε:** +- **Οργανώσει** το έργο μας δημιουργώντας ξεχωριστούς φακέλους για τον κώδικα πηγής και τα αρχεία +- **Παράγει** ένα βασικό αρχείο HTML με σωστή δομή εγγράφου +- **Ξεκίνησε** τον διακομιστή ανάπτυξης Vite για live-reloading και hot module replacement -#### Βασικά Εργαλεία Γραμμής Εντολών για Ανάπτυξη Ιστού +#### Απαραίτητα Εργαλεία Γραμμής Εντολών για Web Ανάπτυξη -| Εργαλείο | Σκοπός | Γιατί το χρειάζεστε | -|----------|--------|---------------------| -| **[Git](https://git-scm.com/)** | Έλεγχος εκδόσεων | Παρακολούθηση αλλαγών, συνεργασία με άλλους, δημιουργία αντιγράφων ασφαλείας | -| **[Node.js & npm](https://nodejs.org/)** | Εκτέλεση JavaScript & διαχείριση πακέτων | Εκτελέστε JavaScript εκτός περιηγητών, εγκαταστήστε σύγχρονα εργαλεία ανάπτυξης | -| **[Vite](https://vitejs.dev/)** | Εργαλείο κατασκευής & διακομιστής ανάπτυξης | Εξαιρετικά γρήγορη ανάπτυξη με αντικατάσταση μονάδων σε πραγματικό χρόνο | -| **[ESLint](https://eslint.org/)** | Ποιότητα κώδικα | Εντοπισμός και διόρθωση προβλημάτων στον JavaScript | -| **[Prettier](https://prettier.io/)** | Μορφοποίηση κώδικα | Διατηρήστε τον κώδικα σας συνεπή και ευανάγνωστο | +| Εργαλείο | Σκοπός | Γιατί το Χρειάζεσαι | +|----------|---------|---------------------| +| **[Git](https://git-scm.com/)** | Έλεγχος έκδοσης | Παρακολούθηση αλλαγών, συνεργασία με άλλους, backup της δουλειάς σου | +| **[Node.js & npm](https://nodejs.org/)** | Εκτέλεση JavaScript & διαχείριση πακέτων | Εκτέλεση JavaScript εκτός browser, εγκατάσταση σύγχρονων εργαλείων ανάπτυξης | +| **[Vite](https://vitejs.dev/)** | Εργαλείο κατασκευής & dev server | Αστραπιαία ανάπτυξη με hot module replacement | +| **[ESLint](https://eslint.org/)** | Ποιότητα κώδικα | Αυτόματη εύρεση και διόρθωση προβλημάτων στον κώδικα JavaScript | +| **[Prettier](https://prettier.io/)** | Μορφοποίηση κώδικα | Κρατά τον κώδικά σου συνεπή και εύκολο στην ανάγνωση | #### Επιλογές ανά Πλατφόρμα **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Σύγχρονος, πλούσιος σε δυνατότητες τερματικός +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Σύγχρονο, πλήρες τερματικό - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ισχυρό περιβάλλον scripting - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Παραδοσιακή γραμμή εντολών των Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ενσωματωμένη εφαρμογή τερματικού -- **[iTerm2](https://iterm2.com/)** - Ενισχυμένο τερματικό με προηγμένες δυνατότητες +- **[iTerm2](https://iterm2.com/)** - Βελτιωμένο τερματικό με προηγμένες δυνατότητες **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Τυπικό shell του Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Προηγμένος εξομοιωτής τερματικού +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Προηγμένος τερματικός εξομοιωτής > 💻 = Προεγκατεστημένο στο λειτουργικό σύστημα -> 🎯 **Διαδρομή Μάθησης**: Ξεκινήστε με βασικές εντολές όπως `cd` (αλλαγή φακέλου), `ls` ή `dir` (λίστα αρχείων) και `mkdir` (δημιουργία φακέλου). Εξασκηθείτε με εντολές σύγχρονης ροής εργασίας όπως `npm install`, `git status` και `code .` (ανοίγει τον τρέχοντα φάκελο στο VS Code). Καθώς εξοικειώνεστε, θα μάθετε φυσικά πιο προηγμένες εντολές και τεχνικές αυτοματοποίησης. +> 🎯 **Μονοπάτι Εκμάθησης**: Ξεκίνα με βασικές εντολές όπως `cd` (αλλαγή φακέλου), `ls` ή `dir` (λίστα αρχείων), και `mkdir` (δημιουργία φακέλου). Εξασκήσου με σύγχρονες εντολές ροής εργασίας όπως `npm install`, `git status`, και `code .` (άνοιγμα τρέχοντος φακέλου στο VS Code). Καθώς νιώθεις πιο άνετα, θα μαθαίνεις φυσικά πιο προχωρημένες εντολές και τεχνικές αυτοματισμού. + -### Τεκμηρίωση: Ο Πάντα Διαθέσιμος Μέντορας Μάθησης σας +### Τεκμηρίωση: Ο Πάντα Διαθέσιμος Μέντοράς σου στη Μάθηση -Ας μοιραστώ ένα μικρό μυστικό που θα σας κάνει να νιώσετε πολύ καλύτερα ως αρχάριοι: ακόμα και οι πιο έμπειροι προγραμματιστές περνούν μεγάλο μέρος του χρόνου τους διαβάζοντας τεκμηρίωση. Και αυτό δεν συμβαίνει επειδή δεν ξέρουν τι κάνουν – είναι στην πραγματικότητα σημάδι σοφίας! +Εντάξει, άσε με να μοιραστώ ένα μικρό μυστικό που θα σε κάνει να αισθανθείς πολύ καλύτερα ως αρχάριος: ακόμα και οι πιο έμπειροι προγραμματιστές περνάνε μεγάλο μέρος του χρόνου τους διαβάζοντας τεκμηρίωση. Και αυτό δεν είναι επειδή δεν ξέρουν τι κάνουν – είναι σημάδι σοφίας! -Σκεφτείτε την τεκμηρίωση σαν να έχετε πρόσβαση στους πιο υπομονετικούς, γνώστες δασκάλους του κόσμου που είναι διαθέσιμοι 24/7. Έχετε κολλήσει σε ένα πρόβλημα στις 2 το πρωί; Η τεκμηρίωση είναι εκεί με μια ζεστή εικονική αγκαλιά και ακριβώς την απάντηση που χρειάζεστε. Θέλετε να μάθετε για κάποια νέα δυνατότητα που όλοι μιλούν; Η τεκμηρίωση σας υποστηρίζει με παραδείγματα βήμα προς βήμα. Προσπαθείτε να καταλάβετε γιατί κάτι λειτουργεί όπως λειτουργεί; Το μαντέψατε – η τεκμηρίωση είναι έτοιμη να το εξηγήσει με τρόπο που τελικά σας κάνει να το καταλάβετε! +Σκέψου την τεκμηρίωση ως την πρόσβαση στους πιο υπομονετικούς και γνώστες εκπαιδευτές του κόσμου που είναι διαθέσιμοι 24/7. Είσαι κολλημένος με ένα πρόβλημα στις 2 το ξημέρωμα; Η τεκμηρίωση είναι εκεί με έναν ζεστό εικονικό αγκαλιά και ακριβώς την απάντηση που χρειάζεσαι. Θέλεις να μάθεις για κάποια νέα δροσερή λειτουργία που όλοι συζητούν; Η τεκμηρίωση σε υποστηρίζει με βήμα-βήμα παραδείγματα. Προσπαθείς να καταλάβεις γιατί κάτι λειτουργεί όπως λειτουργεί; Το μάντεψες – η τεκμηρίωση είναι έτοιμη να το εξηγήσει με τρόπο που τελικά να βγάζει νόημα! -**Εδώ είναι που συμβαίνει η πραγματική μαγεία:** +Κάτι που άλλαξε εντελώς την οπτική μου είναι το εξής: ο κόσμος της web ανάπτυξης αλλάζει αστραπιαία, και κανείς (εννοώ ΚΑΝΕΙΣ!) δεν θυμάται τα πάντα από μνήμης. Έχω δει έμπειρους προγραμματιστές με πάνω από 15 χρόνια εμπειρίας να ψάχνουν βασική σύνταξη, και ξέρεις τι; Αυτό δεν είναι ντροπή – είναι έξυπνο! Δεν πρόκειται για τέλεια μνήμη, αλλά για το να ξέρεις πού θα βρεις γρήγορα αξιόπιστες απαντήσεις και πώς να τις εφαρμόσεις. -Οι επαγγελματίες προγραμματιστές περνούν σημαντικό μέρος του χρόνου τους διαβάζοντας τεκμηρίωση – όχι επειδή δεν ξέρουν τι κάνουν, αλλά επειδή το τοπίο της ανάπτυξης ιστού εξελίσσεται τόσο γρήγορα που η ενημέρωση απαιτεί συνεχή μάθηση. Η καλή τεκμηρίωση σας βοηθά να κατανοήσετε όχι μόνο *πώς* να χρησιμοποιήσετε κάτι, αλλά *γιατί* και *πότε* να το χρησιμοποιήσετε. +**Εδώ συμβαίνει η πραγματική μαγεία:** + +Οι επαγγελματίες προγραμματιστές ξοδεύουν σημαντικό μέρος του χρόνου τους διαβάζοντας τεκμηρίωση – όχι επειδή δεν ξέρουν τι κάνουν, αλλά επειδή το τοπίο της web ανάπτυξης εξελίσσεται τόσο γρήγορα που η συνεχής μάθηση είναι απαραίτητη. Η καλή τεκμηρίωση σε βοηθάει να κατανοήσεις όχι μόνο *πώς* να χρησιμοποιήσεις κάτι, αλλά *γιατί* και *πότε* να το χρησιμοποιήσεις. #### Βασικοί Πόροι Τεκμηρίωσης **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Το χρυσό πρότυπο για την τεκμηρίωση τεχνολογιών ιστού -- Πλήρεις οδηγοί για HTML, CSS και JavaScript -- Περιλαμβάνει πληροφορίες συμβατότητας περιηγητών -- Διαθέτει πρακτικά παραδείγματα και διαδραστικά demos +- Το πρότυπο χρυσού για την τεκμηρίωση τεχνολογιών web +- Αναλυτικοί οδηγοί για HTML, CSS, και JavaScript +- Περιλαμβάνει πληροφορίες συμβατότητας browsers +- Δείχνει πρακτικά παραδείγματα και διαδραστικές επίδειξεις **[Web.dev](https://web.dev)** (από την Google) -- Βέλτιστες πρακτικές σύγχρονης ανάπτυξης ιστού -- Οδηγοί βελτιστοποίησης απόδοσης +- Σύγχρονες βέλτιστες πρακτικές ανάπτυξης web +- Οδηγοί για βελτιστοποίηση απόδοσης - Αρχές προσβασιμότητας και συμπεριληπτικού σχεδιασμού -- Μελέτες περιπτώσεων από πραγματικά έργα +- Μελέτες περίπτωσης από πραγματικά έργα **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Πόροι ανάπτυξης για τον περιηγητή Edge +- Πόροι ανάπτυξης για τον Edge browser - Οδηγοί για Progressive Web Apps -- Επισκόπηση ανάπτυξης σε πολλαπλές πλατφόρμες +- Ενημερώσεις για cross-platform ανάπτυξη **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Δομημένα προγράμματα μάθησης +- Δομημένα προγράμματα εκμάθησης - Βίντεο μαθήματα από ειδικούς του κλάδου -- Πρακτικές ασκήσεις προγραμματισμού +- Πρακτικές ασκήσεις κώδικα + +> 📚 **Στρατηγική Μελέτης**: Μην προσπαθείς να απομνημονεύσεις την τεκμηρίωση – μάθε να την περιηγείσαι αποτελεσματικά. Αποθήκευσε στις σελιδοδείκτες συχνά χρησιμοποιούμενους πόρους και εξασκήσου στη χρήση της αναζήτησης για να βρίσκεις πληροφορίες γρήγορα. -> 📚 **Στρατηγική Μελέτης**: Μην προσπαθείτε να απομνημονεύσετε την τεκμηρίωση – αντίθετα, μάθετε πώς να την περιηγείστε αποτελεσματικά. Αποθηκεύστε σελιδοδείκτες για συχνά χρησιμοποιούμενες αναφορές και εξασκηθείτε στη χρήση των λειτουργιών αναζήτησης για να βρίσκετε γρήγορα συγκεκριμένες πληροφορίες. +### 🔧 **Έλεγχος Εμπειρίας Εργαλείων: Τι Σου Κάθεται Καλά;** + +**Πάρε μια στιγμή να σκεφτείς:** +- Ποιο εργαλείο ανυπομονείς να δοκιμάσεις πρώτο; (Δεν υπάρχει λάθος απάντηση!) +- Η γραμμή εντολών εξακολουθεί να φαίνεται τρομακτική ή είσαι περίεργος για αυτήν; +- Μπορείς να φανταστείς να χρησιμοποιείς τα DevTools του browser για να ρίξεις μια ματιά πίσω από το παρασκήνιο των αγαπημένων σου ιστοσελίδων; + +```mermaid +pie title "Χρόνος που αφιερώνεται από τον προγραμματιστή με εργαλεία" + "Επεξεργαστής Κώδικα" : 40 + "Δοκιμή σε Περιηγητή" : 25 + "Γραμμή Εντολών" : 15 + "Ανάγνωση Τεκμηρίωσης" : 15 + "Αντιμετώπιση Σφαλμάτων" : 5 +``` +> **Αστεία παρατήρηση**: Οι περισσότεροι προγραμματιστές περνούν περίπου το 40% του χρόνου τους στον επεξεργαστή κώδικα, αλλά πρόσεξε πόσος χρόνος αφιερώνεται στο testing, τη μάθηση και την επίλυση προβλημάτων. Ο προγραμματισμός δεν είναι απλώς γραφή κώδικα – είναι κατασκευή εμπειριών! -✅ **Τροφή για σκέψη**: Να κάτι ενδιαφέρον για να σκεφτείτε – πώς πιστεύετε ότι τα εργαλεία για την κατασκευή ιστότοπων (ανάπτυξη) μπορεί να διαφέρουν από τα εργαλεία για τον σχεδιασμό της εμφάνισής τους (σχεδιασμός); Είναι σαν τη διαφορά μεταξύ του να είσαι αρχιτέκτονας που σχεδιάζει ένα όμορφο σπίτι και του εργολάβου που το κατασκευάζει πραγματικά. Και οι δύο είναι κρίσιμοι, αλλά χρειάζονται διαφορετικά εργαλεία! Αυτή η σκέψη θα σας βοηθήσει πραγματικά να δείτε τη μεγαλύτερη εικόνα του πώς οι ιστότοποι ζωντανεύουν. +✅ **Θέμα για σκέψη**: Να κάτι ενδιαφέρον να σκεφτείς – πώς νομίζεις ότι τα εργαλεία για την κατασκευή ιστοσελίδων (ανάπτυξη) μπορεί να διαφέρουν από τα εργαλεία για το σχεδιασμό της εμφάνισής τους (design); Είναι σαν τη διαφορά μεταξύ ενός αρχιτέκτονα που σχεδιάζει ένα όμορφο σπίτι και ενός εργολάβου που το κατασκευάζει. Και οι δύο είναι κρίσιμοι, αλλά χρειάζονται διαφορετικά κουτιά εργαλείων! Αυτός ο τρόπος σκέψης θα σε βοηθήσει πραγματικά να δεις τη μεγαλύτερη εικόνα του πώς ζωντανεύουν οι ιστοσελίδες. ## Πρόκληση GitHub Copilot Agent 🚀 -Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση: +Χρησιμοποίησε τη λειτουργία Agent για να ολοκληρώσεις την παρακάτω πρόκληση: -**Περιγραφή:** Εξερευνήστε τις δυνατότητες ενός σύγχρονου επεξεργαστή κώδικα ή IDE και δείξτε πώς μπορεί να βελτιώσει τη ροή εργασίας σας ως προγραμματιστής ιστού. +**Περιγραφή:** Ερεύνησε τα χαρακτηριστικά ενός μοντέρνου επεξεργαστή κώδικα ή IDE και δείξε πώς μπορεί να βελτιώσει τη ροή εργασίας σου ως web developer. -**Προτροπή:** Επιλέξτε έναν επεξεργαστή κώδικα ή IDE (όπως το Visual Studio Code, το WebStorm ή ένα IDE βασισμένο στο cloud). Καταγράψτε τρεις δυνατότητες ή επεκτάσεις που σας βοηθούν να γράφετε, να διορθώνετε ή να διατηρείτε τον κώδικα πιο αποτελεσματικά. Για κάθε μία, παρέχετε μια σύντομη εξήγηση για το πώς ωφελεί τη ροή εργασίας σας. +**Προτροπή:** Επίλεξε έναν επεξεργαστή κώδικα ή IDE (όπως Visual Studio Code, WebStorm, ή ένα cloud-based IDE). Κατάγραψε τρία χαρακτηριστικά ή επεκτάσεις που σε βοηθούν να γράφεις, αποσφαλματώνεις, ή να διατηρείς τον κώδικα πιο αποτελεσματικά. Για κάθε ένα, δώσε μια σύντομη εξήγηση για το πώς ωφελεί τη ροή εργασίας σου. --- @@ -460,32 +742,121 @@ npx vite **Εντάξει, ντετέκτιβ, έτοιμος για την πρώτη σου υπόθεση;** -Τώρα που έχετε αυτή την καταπληκτική βάση, έχω μια περιπέτεια που θα σας βοηθήσει να δείτε πόσο απίστευτα ποικιλόμορφος και συναρπαστικός είναι ο κόσμος του προγραμματισμού. Και ακούστε – αυτό δεν αφορά τη συγγραφή κώδικα ακόμα, οπότε μην αγχώνεστε! Σκεφτείτε τον εαυτό σας ως ντετέκτιβ γλωσσών προγραμματισμού στην πρώτη σας συναρπαστική υπόθεση! +Τώρα που έχεις αυτή τη φοβερή βάση, έχω μια περιπέτεια που θα σε βοηθήσει να δεις πόσο απίστευτα διαφορετικός και συναρπαστικός είναι ο κόσμος του προγραμματισμού. Και πρόσεχε – δεν πρόκειται ακόμα για γραφή κώδικα, οπότε κανένα άγχος! Σκέψου τον εαυτό σου ως ντετέκτιβ γλωσσών προγραμματισμού στην πρώτη σου συναρπαστική υπόθεση! -**Η αποστολή σας, αν επιλέξετε να την αποδεχτείτε:** -1. **Γίνετε εξερευνητής γλωσσών**: Επιλέξτε τρεις γλώσσες προγραμματισμού από εντελώς διαφορετικά σύμπαντα – ίσως μία που δημιουργεί ιστότοπους, μία που φτιάχνει εφαρμογές για κινητά και μία που επεξεργάζεται δεδομένα για επιστήμονες. Βρείτε παραδείγματα της ίδιας απλής εργασίας γραμμένα σε κάθε γλώσσα. Σας υπόσχομαι ότι θα εκπλαγείτε από το πόσο διαφορετικά μπορούν να φαίνονται ενώ κάνουν ακριβώς το ίδιο πράγμα! +**Η αποστολή σου, αν την αποδεχθείς:** +1. **Γίνε εξερευνητής γλωσσών**: Διάλεξε τρεις γλώσσες προγραμματισμού από εντελώς διαφορετικά σύμπαντα – ίσως μία που φτιάχνει ιστοσελίδες, μία που δημιουργεί εφαρμογές κινητών, και μία που επεξεργάζεται δεδομένα για επιστήμονες. Βρες παραδείγματα της ίδιας απλής εργασίας γραμμένα σε κάθε γλώσσα. Σου υπόσχομαι ότι θα εντυπωσιαστείς από το πόσο διαφορετικά μπορεί να φαίνονται ενώ κάνουν ακριβώς το ίδιο! -2. **Ανακαλύψτε τις ιστορίες προέλευσής τους**: Τι κάνει κάθε γλώσσα ξεχωριστή; Να ένα ενδιαφέρον γεγονός – κάθε γλώσσα προγραμματισμού δημιουργήθηκε επειδή κάποιος σκέφτηκε, "Ξέρετε κάτι; Πρέπει να υπάρχει καλύτερος τρόπος να λύσουμε αυτό το συγκεκριμένο πρόβλημα." Μπορείτε να καταλάβετε ποια ήταν αυτά τα προβλήματα; Μερικές από αυτές τις ιστορίες είναι πραγματικά συναρπαστικές! +2. **Αποκάλυψε τις ιστορίες προέλευσής τους**: Τι κάνει κάθε γλώσσα ξεχωριστή; Ένα ωραίο γεγονός – κάθε γλώσσα προγραμματισμού δημιουργήθηκε γιατί κάποιος σκέφτηκε, «Ξέρεις κάτι; Πρέπει να υπάρχει καλύτερος τρόπος να λυθεί αυτό το συγκεκριμένο πρόβλημα.» Μπορείς να καταλάβεις ποια ήταν αυτά τα προβλήματα; Μερικές από αυτές τις ιστορίες είναι πραγματικά συναρπαστικές! -3. **Γνωρίστε τις κοινότητες**: Δείτε πόσο φιλόξενη και παθιασμένη είναι η κοινότητα κάθε γλώσσας. Κάποιες έχουν εκατομμύρια προγραμματιστές που μοιράζονται γνώσεις και βοηθούν ο ένας τον άλλον, άλλες είναι μικρότερες αλλά εξαιρετικά δεμένες και υποστηρικτικές. Θα σας αρέσει να βλέπετε τις διαφορετικές προσωπικότητες αυτών των κοινοτήτων! +3. **Γνώρισε τις κοινότητες**: Δες πώς είναι φιλόξενες και παθιασμένες οι κοινότητες κάθε γλώσσας. Κάποιες έχουν εκατομμύρια προγραμματιστές που μοιράζονται γνώση και βοηθούν ο ένας τον άλλον, άλλες είναι μικρότερες αλλά απίστευτα δεμένες και υποστηρικτικές. Θα λατρέψεις να δεις τις διαφορετικές προσωπικότητες που έχουν αυτές οι κοινότητες! -4. **Ακολουθήστε το ένστικτό σας**: Ποια γλώσσα σας φαίνεται πιο προσιτή αυτή τη στιγμή; Μην αγχώνεστε για να κάνετε την "τέλεια" επιλογή – απλώς ακούστε το ένστικτό σας! Δεν υπάρχει λάθος απάντηση εδώ, και μπορείτε πάντα να εξερευνήσετε άλλες αργότερα. +4. **Άκου το ένστικτό σου**: Ποια γλώσσα σου φαίνεται πιο προσβάσιμη τώρα; Μην αγχωθείς για την «τέλεια» επιλογή – απλώς άκου το ένστικτό σου! Δεν υπάρχει λάθος απάντηση εδώ, και πάντα μπορείς να εξερευνήσεις άλλες αργότερα. -**Επιπλέον ντετεκτιβική εργασία**: Δείτε αν μπορείτε να ανακαλύψετε ποιοι μεγάλοι ιστότοποι ή εφαρμογές είναι φτιαγμένοι με κάθε γλώσσα. Σας εγγυώμαι ότι θα εκπλαγείτε όταν μάθετε τι τροφοδοτεί το Instagram, το Netflix ή εκεί -- Παρακολούθησε μερικά βίντεο προγραμματισμού για αρχάριους στο YouTube. Υπάρχουν τόσοι πολλοί εξαιρετικοί δημιουργοί εκεί έξω που θυμούνται πώς είναι να ξεκινάς από την αρχή. -- Σκέψου να συμμετάσχεις σε τοπικές συναντήσεις ή διαδικτυακές κοινότητες. Πίστεψέ με, οι προγραμματιστές λατρεύουν να βοηθούν τους νέους! +**Επιπλέον ντετέκτιβ εργασία**: Μάθε αν μπορείς ποια μεγάλα sites ή εφαρμογές είναι φτιαγμένα με κάθε γλώσσα. Σου εγγυώμαι ότι θα σοκαριστείς μαθαίνοντας τι τροφοδοτεί Instagram, Netflix ή εκείνο το κινητό παιχνίδι που δεν μπορείς να σταματήσεις να παίζεις! -> 🎯 **Άκου, αυτό θέλω να θυμάσαι**: Δεν περιμένει κανείς να γίνεις μάγος του προγραμματισμού από τη μια μέρα στην άλλη! Αυτή τη στιγμή απλώς γνωρίζεις αυτόν τον εκπληκτικό νέο κόσμο που πρόκειται να γίνεις μέρος του. Πάρε τον χρόνο σου, απόλαυσε το ταξίδι και θυμήσου – κάθε προγραμματιστής που θαυμάζεις κάποτε καθόταν ακριβώς εκεί που βρίσκεσαι τώρα, νιώθοντας ενθουσιασμό και ίσως λίγο μπερδεμένος. Αυτό είναι απολύτως φυσιολογικό και σημαίνει ότι το κάνεις σωστά! +> 💡 **Θυμήσου**: Δεν προσπαθείς να γίνεις ειδικός σε καμία από αυτές τις γλώσσες σήμερα. Απλώς γνωρίζεις τη γειτονιά πριν αποφασίσεις πού θέλεις να στήσεις μαγαζί. Πάρε τον χρόνο σου, διασκέδασε και άσε την περιέργεια να σε οδηγήσει! + +## Ας Γιορτάσουμε Ό,τι Ανακάλυψες! + +Θεέ μου, έχουμε απορροφήσει τόσες απίστευτες πληροφορίες σήμερα! Είμαι πραγματικά ενθουσιασμένος να δω πόσο από αυτό το καταπληκτικό ταξίδι έχει μείνει μέσα σου. Και να θυμάσαι – δεν είναι διαγώνισμα που πρέπει να πετύχεις απόλυτα. Είναι περισσότερο μια γιορτή για όλα τα ωραία πράγματα που έμαθες για αυτόν τον συναρπαστικό κόσμο στον οποίο πρόκειται να βουτήξεις! + +[Κάνε το κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/) +## Ανασκόπηση & Αυτομελέτη + +**Πάρε το χρόνο σου να εξερευνήσεις και να το διασκεδάσεις!** + +Κάλυψες πολύ υλικό σήμερα, και αυτό είναι κάτι να νιώθεις περήφανος! Τώρα έρχεται το διασκεδαστικό κομμάτι – να εξερευνήσεις τα θέματα που κέντρισαν την περιέργειά σου. Θυμήσου, αυτό δεν είναι εργασία για το σπίτι – είναι μια περιπέτεια! + +**Βυθίσου πιο βαθιά σε ό,τι σε ενθουσιάζει:** + +**Πάρε πρακτική με γλώσσες προγραμματισμού:** +- Επισκέψου τις επίσημες ιστοσελίδες 2-3 γλωσσών που τράβηξαν την προσοχή σου. Η κάθε μία έχει τη δική της προσωπικότητα και ιστορία! +- Δοκίμασε κάποια διαδικτυακά προγραμματιστικά περιβάλλοντα όπως το [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ή [Replit](https://replit.com/). Μην φοβηθείς να πειραματιστείς – δεν θα σπάσεις τίποτα! +- Διάβασε για το πώς γεννήθηκε η αγαπημένη σου γλώσσα. Σοβαρά, μερικές από αυτές τις ιστορίες προέλευσης είναι συναρπαστικές και θα σε βοηθήσουν να καταλάβεις γιατί οι γλώσσες λειτουργούν όπως λειτουργούν. + +**Νιώσε άνετα με τα νέα σου εργαλεία:** +- Κατέβασε το Visual Studio Code αν δεν το έχεις ήδη – είναι δωρεάν και θα το λατρέψεις! +- Περάσε λίγα λεπτά εξερευνώντας την αγορά επεκτάσεων (Extensions marketplace). Είναι σαν ένα κατάστημα εφαρμογών για τον κώδικά σου! +- Άνοιξε τα Εργαλεία Προγραμματιστή (Developer Tools) του browser σου και κάνε κλικ εδώ κι εκεί. Μην ανησυχείς αν δεν καταλαβαίνεις τα πάντα – απλώς εξοικειώσου με το τι υπάρχει. + +**Γίνε μέρος της κοινότητας:** +- Ακολούθησε κάποιες κοινότητες προγραμματιστών στο [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ή [GitHub](https://github.com/). Η κοινότητα προγραμματιστών είναι απίστευτα φιλόξενη προς τους νέους! +- Δες βίντεο με μαθήματα για αρχάριους στο YouTube. Υπάρχουν τόσοι πολλοί υπέροχοι δημιουργοί που θυμούνται πώς είναι να ξεκινάς. +- Σκέψου να συμμετάσχεις σε τοπικές συναντήσεις ή διαδικτυακές κοινότητες. Πίστεψέ με, οι προγραμματιστές αγαπούν να βοηθούν τους νεοεισερχόμενους! + +> 🎯 **Άκου, αυτό θέλω να θυμάσαι**: Δεν περιμένουμε να γίνεις μάγος του κώδικα μέσα σε μια νύχτα! Τώρα απλώς γνωρίζεις αυτόν τον απίθανο νέο κόσμο που πρόκειται να γίνεις μέρος του. Πάρε το χρόνο σου, απόλαυσε το ταξίδι, και θυμήσου – κάθε προγραμματιστής που θαυμάζεις κάθονταν ακριβώς εκεί που είσαι τώρα, νιώθοντας ενθουσιασμό και ίσως λίγο υπερφορτωμένος. Είναι απόλυτα φυσιολογικό, και αυτό σημαίνει ότι τα πας πολύ καλά! ## Εργασία -[Διαβάζοντας τα Έγγραφα](assignment.md) +[Reading the Docs](assignment.md) + +> 💡 **Μικρή παρότρυνση για την εργασία σου**: Θα ήθελα πολύ να σε δω να εξερευνήσεις εργαλεία που δεν έχουμε καλύψει ακόμα! Άφησε για λίγο στην άκρη τους επεξεργαστές, browsers και εργαλεία γραμμής εντολών που έχουμε ήδη αναφέρει – υπάρχει ένας ολόκληρος καταπληκτικός κόσμος με απίθανα εργαλεία ανάπτυξης που περιμένουν να τα ανακαλύψεις. Ψάξε για αυτά που συντηρούνται ενεργά και έχουν ζωντανές, φιλικές κοινότητες (συνήθως έχουν τα καλύτερα tutorials και τους πιο υποστηρικτικούς ανθρώπους όταν κολλήσεις και χρειαστείς βοήθεια). -> 💡 **Μια μικρή ώθηση για την εργασία σου**: Θα ήθελα πολύ να σε δω να εξερευνάς κάποια εργαλεία που δεν έχουμε καλύψει ακόμα! Παράκαμψε τους επεξεργαστές, τους browsers και τα εργαλεία γραμμής εντολών που έχουμε ήδη συζητήσει – υπάρχει ένας ολόκληρος απίστευτος κόσμος από καταπληκτικά εργαλεία ανάπτυξης εκεί έξω που περιμένουν να ανακαλυφθούν. Ψάξε για εργαλεία που είναι ενεργά συντηρημένα και έχουν ζωντανές, υποστηρικτικές κοινότητες (αυτά συνήθως έχουν τα καλύτερα tutorials και τους πιο υποστηρικτικούς ανθρώπους όταν αναπόφευκτα κολλήσεις και χρειαστείς μια φιλική βοήθεια). +--- + +## 🚀 Το Χρονοδιάγραμμα του Ταξιδιού σου στον Προγραμματισμό + +### ⚡ **Τι μπορείς να κάνεις στα επόμενα 5 λεπτά** +- [ ] Αποθήκευσε σελιδοδείκτες 2-3 ιστοσελίδες γλωσσών προγραμματισμού που τράβηξαν την προσοχή σου +- [ ] Κατέβασε το Visual Studio Code αν δεν το έχεις ήδη +- [ ] Άνοιξε τα DevTools του browser σου (F12) και κάνε κλικ σε οποιαδήποτε ιστοσελίδα +- [ ] Γίνε μέλος σε μια κοινότητα προγραμματιστών (Dev.to, Reddit r/webdev, ή Stack Overflow) + +### ⏰ **Τι μπορείς να πετύχεις αυτήν την ώρα** +- [ ] Ολοκλήρωσε το quiz μετά το μάθημα και σκέψου τις απαντήσεις σου +- [ ] Ρύθμισε το VS Code με την επέκταση GitHub Copilot +- [ ] Δοκίμασε ένα παράδειγμα "Hello World" σε 2 διαφορετικές γλώσσες προγραμματισμού online +- [ ] Δες ένα βίντεο "Μια μέρα στη ζωή ενός προγραμματιστή" στο YouTube +- [ ] Ξεκίνα την έρευνα σου για τις γλώσσες προγραμματισμού (από την πρόκληση) + +### 📅 **Η περιπέτεια της εβδομάδας σου** +- [ ] Ολοκλήρωσε την εργασία και εξερεύνησε 3 νέα εργαλεία ανάπτυξης +- [ ] Ακολούθησε 5 προγραμματιστές ή λογαριασμούς προγραμματισμού στα social media +- [ ] Δοκίμασε να φτιάξεις κάτι μικρό στο CodePen ή Replit (ακόμα και μόνο "Hello, [Το Όνομά Σου]!") +- [ ] Διάβασε ένα άρθρο προγραμματιστή για το ταξίδι κάποιου με τον κώδικα +- [ ] Συμμετέχει σε ένα εικονικό meetup ή δες μια ομιλία για προγραμματισμό +- [ ] Άρχισε να μαθαίνεις τη γλώσσα που διάλεξες με online tutorials + +### 🗓️ **Η μεταμόρφωση του μήνα σου** +- [ ] Φτιάξε το πρώτο σου μικρό project (ακόμα και μια απλή ιστοσελίδα μετράει!) +- [ ] Συνεισφέρε σε ένα ανοιχτού κώδικα project (ξεκίνα με διορθώσεις τεκμηρίωσης) +- [ ] Γίνε μέντορας σε κάποιον που μόλις ξεκινάει το ταξίδι στον προγραμματισμό +- [ ] Δημιούργησε την προσωπική σου ιστοσελίδα-πορτφόλιο προγραμματιστή +- [ ] Συνδέσου με τοπικές κοινότητες προγραμματιστών ή ομάδες μελέτης +- [ ] Ξεκίνα να σχεδιάζεις τον επόμενο στόχο μάθησής σου + +### 🎯 **Τελικός έλεγχος αναστοχασμού** + +**Πριν προχωρήσεις, πάρε μια στιγμή να γιορτάσεις:** +- Ποιο ήταν το ένα πράγμα για τον προγραμματισμό σήμερα που σε ενθουσίασε; +- Ποιο εργαλείο ή έννοια θέλεις να εξερευνήσεις πρώτα; +- Πώς αισθάνεσαι που ξεκινάς αυτό το ταξίδι στον προγραμματισμό; +- Ποια είναι μια ερώτηση που θα ήθελες να κάνεις σε έναν προγραμματιστή τώρα; + +```mermaid +journey + title Το Ταξίδι σας για την Ενίσχυση της Αυτοπεποίθησής σας + section Σήμερα + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You + section Αυτή την Εβδομάδα + Exploring: 4: You + Learning: 5: You + Connecting: 4: You + section Επόμενος Μήνας + Building: 5: You + Confident: 5: You + Helping Others: 5: You +``` +> 🌟 **Θυμήσου**: Κάθε ειδικός ήταν κάποτε αρχάριος. Κάθε έμπειρος προγραμματιστής ένιωσε κάποτε ακριβώς όπως νιώθεις τώρα – ενθουσιασμό, ίσως λίγη υπερφόρτωση, και σίγουρα περιέργεια για το τι είναι δυνατό. Είσαι σε καταπληκτική παρέα, και αυτό το ταξίδι πρόκειται να είναι απίθανο. Καλώς ήρθες στον υπέροχο κόσμο του προγραμματισμού! 🎉 --- -**Αποποίηση ευθύνης**: -Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. \ No newline at end of file + +**Αποποίηση ευθυνών**: +Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να έχετε υπόψη σας ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα προέλευσής του πρέπει να θεωρείται η έγκυρη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. + \ No newline at end of file diff --git a/translations/el/1-getting-started-lessons/2-github-basics/README.md b/translations/el/1-getting-started-lessons/2-github-basics/README.md index df098f8cc..6c0fc70e4 100644 --- a/translations/el/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/el/1-getting-started-lessons/2-github-basics/README.md @@ -1,170 +1,209 @@ # Εισαγωγή στο GitHub -Γεια σου, μελλοντικέ προγραμματιστή! 👋 Έτοιμος να ενταχθείς σε εκατομμύρια κωδικοποιητές σε όλο τον κόσμο; Είμαι πραγματικά ενθουσιασμένος που θα σου παρουσιάσω το GitHub – σκέψου το σαν την πλατφόρμα κοινωνικής δικτύωσης για προγραμματιστές, αλλά αντί να μοιραζόμαστε φωτογραφίες από το γεύμα μας, μοιραζόμαστε κώδικα και δημιουργούμε απίστευτα πράγματα μαζί! +Γεια σου, μελλοντικέ προγραμματιστή! 👋 Έτοιμος να ενταχθείς σε εκατομμύρια προγραμματιστές σε όλο τον κόσμο; Είμαι πραγματικά ενθουσιασμένος που σου παρουσιάζω το GitHub – σκέψου το σαν την πλατφόρμα κοινωνικής δικτύωσης για προγραμματιστές, εκτός από το ότι αντί για φωτογραφίες του γεύματός σου, μοιραζόμαστε κώδικα και δημιουργούμε απίστευτα πράγματα μαζί! -Αυτό που με εντυπωσιάζει απόλυτα: κάθε εφαρμογή στο κινητό σου, κάθε ιστοσελίδα που επισκέπτεσαι και τα περισσότερα εργαλεία που θα μάθεις να χρησιμοποιείς έχουν δημιουργηθεί από ομάδες προγραμματιστών που συνεργάζονται σε πλατφόρμες όπως το GitHub. Αυτή η εφαρμογή μουσικής που αγαπάς; Κάποιος σαν εσένα συνέβαλε σε αυτήν. Αυτό το παιχνίδι που δεν μπορείς να σταματήσεις να παίζεις; Ναι, πιθανότατα δημιουργήθηκε με συνεργασία στο GitHub. Και τώρα ΕΣΥ θα μάθεις πώς να γίνεις μέρος αυτής της εκπληκτικής κοινότητας! +Αυτό που πραγματικά με εντυπωσιάζει είναι το εξής: κάθε εφαρμογή στο τηλέφωνό σου, κάθε ιστοσελίδα που επισκέπτεσαι και τα περισσότερα εργαλεία που θα μάθεις να χρησιμοποιείς δημιουργήθηκαν από ομάδες προγραμματιστών που συνεργάζονται σε πλατφόρμες όπως το GitHub. Αυτή η εφαρμογή μουσικής που αγαπάς; Κάποιος σαν εσένα συνέβαλλε σε αυτήν. Αυτό το παιχνίδι που δεν μπορείς να αφήσεις κάτω; Ναι, πιθανότατα δημιουργήθηκε με συνεργασία στο GitHub. Και τώρα ΕΣΥ θα μάθεις πώς να είσαι μέρος αυτής της καταπληκτικής κοινότητας! -Ξέρω ότι μπορεί να σου φαίνεται λίγο δύσκολο στην αρχή – θυμάμαι να κοιτάζω την πρώτη μου σελίδα στο GitHub και να σκέφτομαι "Τι σημαίνουν όλα αυτά;". Αλλά να θυμάσαι: κάθε προγραμματιστής ξεκίνησε ακριβώς από εκεί που βρίσκεσαι τώρα. Μέχρι το τέλος αυτού του μαθήματος, θα έχεις το δικό σου αποθετήριο στο GitHub (σκέψου το σαν τη δική σου προσωπική βιτρίνα έργων στο cloud) και θα ξέρεις πώς να αποθηκεύεις τη δουλειά σου, να τη μοιράζεσαι με άλλους και να συμβάλλεις σε έργα που χρησιμοποιούν εκατομμύρια άνθρωποι. +Ξέρω ότι μπορεί να φαίνεται πολύ στην αρχή – ρε παιδί μου, θυμάμαι που κοίταζα την πρώτη μου σελίδα GitHub και σκεφτόμουν «Τι στο καλό σημαίνει όλο αυτό;» Αλλά να το ένα: κάθε προγραμματιστής ξεκίνησε ακριβώς από εκεί που είσαι τώρα. Μέχρι το τέλος αυτού του μαθήματος, θα έχεις το δικό σου αποθετήριο GitHub (σκέψου το σαν τη προσωπική σου έκθεση έργων στο σύννεφο), και θα ξέρεις πώς να αποθηκεύεις τη δουλειά σου, να τη μοιράζεσαι με άλλους και ακόμα να συμβάλλεις σε έργα που χρησιμοποιούν εκατομμύρια άνθρωποι. -Θα κάνουμε αυτό το ταξίδι μαζί, βήμα-βήμα. Χωρίς βιασύνη, χωρίς πίεση – μόνο εσύ, εγώ και μερικά πολύ ωραία εργαλεία που πρόκειται να γίνουν οι καλύτεροί σου φίλοι! +Θα κάνουμε αυτό το ταξίδι μαζί, βήμα-βήμα. Χωρίς βιασύνη, χωρίς πίεση – απλά εσύ, εγώ, και κάποια πολύ ωραία εργαλεία που σύντομα θα γίνουν οι νέοι σου καλύτεροι φίλοι! -![Εισαγωγή στο GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.el.png) -> Σκίτσο από την [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.el.png) +> Σκιτσάκι από [Tomomi Imura](https://twitter.com/girlie_mac) -## Ερωτηματολόγιο πριν το μάθημα -[Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app) +```mermaid +journey + title Η Περιπέτειά Σου στο GitHub Σήμερα + section Ρύθμιση + Εγκατάσταση Git: 4: You + Δημιουργία Λογαριασμού: 5: You + Πρώτο Αποθετήριο: 5: You + section Κατάκτηση του Git + Τοπικές Αλλαγές: 4: You + Commit και Push: 5: You + Διακλαδώσεις: 4: You + section Συνεργασία + Fork Projects: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` +## Quiz πριν από τη διάλεξη +[Pre-lecture quiz](https://ff-quizzes.netlify.app) ## Εισαγωγή -Πριν βουτήξουμε στα πραγματικά συναρπαστικά πράγματα, ας ετοιμάσουμε τον υπολογιστή σου για λίγη μαγεία GitHub! Σκέψου το σαν να οργανώνεις τα υλικά τέχνης σου πριν δημιουργήσεις ένα αριστούργημα – έχοντας τα σωστά εργαλεία έτοιμα κάνει τα πάντα πιο ομαλά και πολύ πιο διασκεδαστικά. +Πριν βουτήξουμε στα πραγματικά συναρπαστικά θέματα, ας ετοιμάσουμε τον υπολογιστή σου για λίγη μαγεία GitHub! Σκέψου το σαν να οργανώνεις τα υλικά τέχνης σου πριν δημιουργήσεις ένα αριστούργημα – το να έχεις τα σωστά εργαλεία έτοιμα κάνει τα πάντα πολύ πιο ομαλά και διασκεδαστικά. -Θα σε καθοδηγήσω προσωπικά σε κάθε βήμα της εγκατάστασης, και υπόσχομαι ότι δεν είναι τόσο τρομακτικό όσο μπορεί να φαίνεται με την πρώτη ματιά. Αν κάτι δεν σου φαίνεται λογικό αμέσως, είναι απολύτως φυσιολογικό! Θυμάμαι να προσπαθώ να στήσω το πρώτο μου περιβάλλον ανάπτυξης και να νιώθω σαν να προσπαθώ να διαβάσω αρχαία ιερογλυφικά. Κάθε προγραμματιστής έχει βρεθεί ακριβώς εκεί που βρίσκεσαι τώρα, αναρωτώμενος αν το κάνει σωστά. Μικρό spoiler: αν είσαι εδώ και μαθαίνεις, ήδη το κάνεις σωστά! 🌟 +Θα σε περπατήσω προσωπικά μέσα από κάθε βήμα της ρύθμισης, και υπόσχομαι πως δεν είναι τόσο τρομακτικό όσο ίσως φαίνεται στην αρχή. Αν κάτι δεν καταλάβεις αμέσως, είναι απόλυτα φυσιολογικό! Θυμάμαι όταν έστηνα το πρώτο μου περιβάλλον ανάπτυξης και ένιωθα σαν να προσπαθώ να διαβάσω αρχαίους ιερογλυφικούς. Κάθε προγραμματιστής ήταν ακριβώς εκεί που είσαι τώρα, αναρωτώμενος αν τα κάνει σωστά. Μικρή ενημέρωση: αν είσαι εδώ και μαθαίνεις, ήδη τα κάνεις σωστά! 🌟 Σε αυτό το μάθημα, θα καλύψουμε: -- την παρακολούθηση της δουλειάς που κάνεις στον υπολογιστή σου -- τη συνεργασία σε έργα με άλλους +- παρακολούθηση της δουλειάς που κάνεις στον υπολογιστή σου +- εργασία σε έργα με άλλους - πώς να συμβάλλεις σε λογισμικό ανοιχτού κώδικα ### Προαπαιτούμενα -Ας ετοιμάσουμε τον υπολογιστή σου για λίγη μαγεία GitHub! Μην ανησυχείς – αυτή η εγκατάσταση είναι κάτι που χρειάζεται να κάνεις μόνο μία φορά, και μετά θα είσαι έτοιμος για όλη σου την πορεία στον προγραμματισμό. +Ας ετοιμάσουμε τον υπολογιστή σου για λίγη μαγεία GitHub! Μην ανησυχείς – αυτή η ρύθμιση πρέπει να γίνει μόνο μία φορά, και μετά θα είσαι έτοιμος για όλο το ταξίδι σου στον προγραμματισμό. -Λοιπόν, ας ξεκινήσουμε με τα βασικά! Πρώτα, πρέπει να ελέγξουμε αν το Git είναι ήδη εγκατεστημένο στον υπολογιστή σου. Το Git είναι βασικά σαν να έχεις έναν υπερ-έξυπνο βοηθό που θυμάται κάθε αλλαγή που κάνεις στον κώδικά σου – πολύ καλύτερο από το να πατάς μανιωδώς Ctrl+S κάθε δύο δευτερόλεπτα (όλοι το έχουμε κάνει!). +Εντάξει, ας ξεκινήσουμε από τα βασικά! Πρώτα, πρέπει να δούμε αν το Git είναι ήδη εγκατεστημένο στον υπολογιστή σου. Το Git είναι βασικά σαν να έχεις έναν πανέξυπνο βοηθό που θυμάται κάθε αλλαγή που κάνεις στον κώδικά σου – πολύ καλύτερο από το να πατάς με μανία Ctrl+S κάθε δύο δευτερόλεπτα (έχουμε περάσει όλοι από αυτό!). -Ας δούμε αν το Git είναι ήδη εγκατεστημένο πληκτρολογώντας αυτή τη μαγική εντολή στο τερματικό σου: +Ας δούμε αν είναι ήδη εγκατεστημένο πληκτρολογώντας αυτή την μαγική εντολή στο τερματικό σου: `git --version` -Αν το Git δεν είναι ακόμα εκεί, μην ανησυχείς! Απλά πήγαινε στο [download Git](https://git-scm.com/downloads) και κατέβασέ το. Μόλις το εγκαταστήσεις, πρέπει να συστήσουμε το Git σε εσένα σωστά: +Αν το Git δεν είναι ακόμα εκεί, μην ανησυχείς! Απλά πήγαινε στο [download Git](https://git-scm.com/downloads) και κατέβασέ το. Μόλις το εγκαταστήσεις, πρέπει να συστηθείς καλά με το Git: -> 💡 **Πρώτη Ρύθμιση**: Αυτές οι εντολές λένε στο Git ποιος είσαι. Αυτές οι πληροφορίες θα συνδέονται με κάθε commit που κάνεις, οπότε διάλεξε ένα όνομα και email που νιώθεις άνετα να μοιραστείς δημόσια. +> 💡 **Πρώτη Ρύθμιση**: Αυτές οι εντολές λένε στο Git ποιος είσαι. Αυτή η πληροφορία θα συνδεθεί με κάθε δέσμευση (commit) που κάνεις, οπότε διάλεξε όνομα και email που αισθάνεσαι άνετα να μοιραστείς δημόσια. ```bash git config --global user.name "your-name" git config --global user.email "your-email" ``` -Για να ελέγξεις αν το Git είναι ήδη ρυθμισμένο, μπορείς να πληκτρολογήσεις: +Για να ελέγξεις αν το Git είναι ήδη ρυθμισμένο μπορείς να πληκτρολογήσεις: ```bash git config --list ``` -Θα χρειαστείς επίσης έναν λογαριασμό στο GitHub, έναν επεξεργαστή κώδικα (όπως το Visual Studio Code), και να ανοίξεις το τερματικό σου (ή: command prompt). +Θα χρειαστείς επίσης έναν λογαριασμό στο GitHub, έναν επεξεργαστή κώδικα (όπως το Visual Studio Code) και θα πρέπει να ανοίξεις το τερματικό σου (ή: command prompt). -Πήγαινε στο [github.com](https://github.com/) και δημιούργησε έναν λογαριασμό αν δεν έχεις ήδη, ή συνδέσου και συμπλήρωσε το προφίλ σου. +Πήγαινε στο [github.com](https://github.com/) και δημιούργησε λογαριασμό αν δεν έχεις ήδη, ή συνδέσου και συμπλήρωσε το προφίλ σου. -💡 **Σύγχρονη συμβουλή**: Σκέψου να ρυθμίσεις [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ή να χρησιμοποιήσεις το [GitHub CLI](https://cli.github.com/) για ευκολότερη αυθεντικοποίηση χωρίς κωδικούς. +💡 **Σύγχρονη συμβουλή**: Σκέψου να ρυθμίσεις [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) ή να χρησιμοποιήσεις [GitHub CLI](https://cli.github.com/) για πιο εύκολη αυθεντικοποίηση χωρίς κωδικούς. -✅ Το GitHub δεν είναι το μοναδικό αποθετήριο κώδικα στον κόσμο. Υπάρχουν και άλλα, αλλά το GitHub είναι το πιο γνωστό. +✅ Το GitHub δεν είναι το μόνο αποθετήριο κώδικα στον κόσμο· υπάρχουν και άλλα, αλλά το GitHub είναι το πιο γνωστό ### Προετοιμασία -Θα χρειαστείς έναν φάκελο με ένα έργο κώδικα στον τοπικό σου υπολογιστή (laptop ή PC) και ένα δημόσιο αποθετήριο στο GitHub, το οποίο θα χρησιμεύσει ως παράδειγμα για το πώς να συμβάλλεις στα έργα άλλων. +Θα χρειαστείς και έναν φάκελο με κάποιο πρότζεκτ κώδικα στον τοπικό σου υπολογιστή (laptop ή PC), και ένα δημόσιο αποθετήριο στο GitHub, που θα χρησιμεύσει ως παράδειγμα για το πώς να συμβάλλεις στα έργα άλλων. -### Διατήρηση της ασφάλειας του κώδικα σου +### Προστασία του Κώδικά σου -Ας μιλήσουμε για την ασφάλεια για λίγο – αλλά μην ανησυχείς, δεν θα σε κατακλύσουμε με τρομακτικά πράγματα! Σκέψου αυτές τις πρακτικές ασφαλείας σαν να κλειδώνεις το αυτοκίνητο ή το σπίτι σου. Είναι απλές συνήθειες που γίνονται δεύτερη φύση και κρατούν τη σκληρή δουλειά σου προστατευμένη. +Ας μιλήσουμε λίγο για ασφάλεια – μη φοβηθείς, δεν θα σε πνίξουμε με τρομακτικά πράγματα! Σκέψου αυτές τις πρακτικές ασφαλείας σαν να κλειδώνεις το αυτοκίνητο ή το σπίτι σου. Είναι απλές συνήθειες που γίνονται δεύτερη φύση και κρατούν τη δουλειά σου προστατευμένη. -Θα σου δείξουμε τους σύγχρονους, ασφαλείς τρόπους να δουλεύεις με το GitHub από την αρχή. Με αυτόν τον τρόπο, θα αναπτύξεις καλές συνήθειες που θα σε εξυπηρετήσουν καθ' όλη τη διάρκεια της καριέρας σου στον προγραμματισμό. +Θα σου δείξουμε τους σύγχρονους, ασφαλείς τρόπους για να δουλεύεις με το GitHub από την αρχή. Έτσι, θα αναπτύξεις καλές συνήθειες που θα σε βοηθήσουν σε όλη την καριέρα σου στον προγραμματισμό. -Όταν δουλεύεις με το GitHub, είναι σημαντικό να ακολουθείς τις βέλτιστες πρακτικές ασφαλείας: +Όταν δουλεύεις με το GitHub, είναι σημαντικό να τηρείς τις βέλτιστες πρακτικές ασφαλείας: -| Περιοχή Ασφάλειας | Βέλτιστη Πρακτική | Γιατί Είναι Σημαντικό | -|-------------------|-------------------|-----------------------| -| **Αυθεντικοποίηση** | Χρησιμοποίησε SSH keys ή Personal Access Tokens | Οι κωδικοί είναι λιγότερο ασφαλείς και καταργούνται | -| **Δύο-παραγοντική αυθεντικοποίηση** | Ενεργοποίησε το 2FA στον λογαριασμό σου στο GitHub | Προσθέτει ένα επιπλέον επίπεδο προστασίας στον λογαριασμό σου | -| **Ασφάλεια Αποθετηρίου** | Ποτέ μην ανεβάζεις ευαίσθητες πληροφορίες | Τα API keys και οι κωδικοί δεν πρέπει ποτέ να βρίσκονται σε δημόσια αποθετήρια | -| **Διαχείριση Εξαρτήσεων** | Ενεργοποίησε το Dependabot για ενημερώσεις | Διατηρεί τις εξαρτήσεις σου ασφαλείς και ενημερωμένες | +| Περιοχή Ασφαλείας | Βέλτιστη Πρακτική | Γιατί Είναι Σημαντικό | +|---------------|---------------|----------------| +| **Ταυτοποίηση** | Χρήση SSH keys ή Διακριτικών Προσωπικής Πρόσβασης | Οι κωδικοί είναι λιγότερο ασφαλείς και σταδιακά καταργούνται | +| **Δυο-παράγοντες Ταυτοποίηση** | Ενεργοποίηση 2FA στον λογαριασμό σου στο GitHub | Προσθέτει ένα επιπλέον επίπεδο προστασίας στον λογαριασμό | +| **Ασφάλεια Αποθετηρίου** | Μην δέχεσαι ποτέ ευαίσθητες πληροφορίες | Κλειδιά API και κωδικοί δεν πρέπει ποτέ να είναι σε δημόσια αποθετήρια | +| **Διαχείριση Εξαρτήσεων** | Ενεργοποίηση Dependabot για ενημερώσεις | Κρατά τις εξαρτήσεις σου ασφαλείς και ενημερωμένες | -> ⚠️ **Κρίσιμη Υπενθύμιση Ασφάλειας**: Ποτέ μην ανεβάζεις API keys, κωδικούς ή άλλες ευαίσθητες πληροφορίες σε οποιοδήποτε αποθετήριο. Χρησιμοποίησε μεταβλητές περιβάλλοντος και αρχεία `.gitignore` για να προστατεύσεις ευαίσθητα δεδομένα. +> ⚠️ **Κρίσιμη Υπόμνηση Ασφαλείας**: Μην δεσμεύεις ποτέ κλειδιά API, κωδικούς ή άλλες ευαίσθητες πληροφορίες σε οποιοδήποτε αποθετήριο. Χρησιμοποίησε μεταβλητές περιβάλλοντος και αρχεία `.gitignore` για να προστατεύσεις ευαίσθητα δεδομένα. -**Σύγχρονη Ρύθμιση Αυθεντικοποίησης:** +**Ρύθμιση σύγχρονης ταυτοποίησης:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Δημιουργήστε κλειδί SSH (σύγχρονος αλγόριθμος ed25519) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Ρυθμίστε το Git να χρησιμοποιεί SSH git remote set-url origin git@github.com:username/repository.git ``` -> 💡 **Συμβουλή Ειδικού**: Τα SSH keys εξαλείφουν την ανάγκη να εισάγεις συνεχώς κωδικούς και είναι πιο ασφαλή από τις παραδοσιακές μεθόδους αυθεντικοποίησης. +> 💡 **Επαγγελματική Συμβουλή**: Τα SSH keys εξαλείφουν την ανάγκη να εισάγεις κωδικούς πολλές φορές και είναι πιο ασφαλή από τις παραδοσιακές μεθόδους ταυτοποίησης. --- -## Διαχείριση του Κώδικα σου σαν Επαγγελματίας - -Εντάξει, ΕΔΩ είναι που τα πράγματα γίνονται πραγματικά συναρπαστικά! 🎉 Ετοιμαζόμαστε να μάθουμε πώς να παρακολουθούμε και να διαχειριζόμαστε τον κώδικα μας όπως οι επαγγελματίες, και ειλικρινά, αυτό είναι ένα από τα αγαπημένα μου θέματα γιατί είναι πραγματικά επαναστατικό. - -Φαντάσου το εξής: γράφεις μια εκπληκτική ιστορία και θέλεις να παρακολουθείς κάθε προσχέδιο, κάθε λαμπρή επεξεργασία και κάθε "περίμενε, αυτό είναι ιδιοφυές!" στιγμή στην πορεία. Αυτό ακριβώς κάνει το Git για τον κώδικά σου! Είναι σαν να έχεις το πιο απίστευτο σημειωματάριο που ταξιδεύει στον χρόνο και θυμάται ΤΑ ΠΑΝΤΑ – κάθε πληκτρολόγηση, κάθε αλλαγή, κάθε "ωχ, τα χάλασα όλα" στιγμή που μπορείς να διορθώσεις αμέσως. - -Θα είμαι ειλικρινής – αυτό μπορεί να σου φανεί συντριπτικό στην αρχή. Όταν ξεκίνησα, σκέφτηκα "Γιατί δεν μπορώ απλά να αποθηκεύω τα αρχεία μου όπως συνήθως;" Αλλά εμπιστεύσου με: μόλις το Git σου κάνει κλικ (και θα το κάνει!), θα έχεις μια από αυτές τις στιγμές "φωτίστηκα" όπου θα σκέφτεσαι "Πώς ζούσα χωρίς αυτό;". Είναι σαν να ανακαλύπτεις ότι μπορείς να πετάξεις ενώ περπατούσες παντού όλη σου τη ζωή! - -Ας πούμε ότι έχεις έναν φάκελο τοπικά με κάποιο έργο κώδικα και θέλεις να αρχίσεις να παρακολουθείς την πρόοδό σου χρησιμοποιώντας το git - το σύστημα ελέγχου εκδόσεων. Μερικοί άνθρωποι συγκρίνουν τη χρήση του git με το να γράφεις ένα ερωτικό γράμμα στον μελλοντικό σου εαυτό. Διαβάζοντας τα μηνύματα commit σου μέρες, εβδομάδες ή μήνες αργότερα, θα μπορείς να θυμηθείς γιατί πήρες μια απόφαση ή να "αναιρέσεις" μια αλλαγή – δηλαδή, όταν γράφεις καλά "μηνύματα commit". - -### Αποστολή: Δημιούργησε το Πρώτο σου Αποθετήριο! +## Διαχείριση του Κώδικά σου σαν Επαγγελματίας + +Εντάξει, ΕΔΩ είναι που τα πράγματα γίνονται πραγματικά συναρπαστικά! 🎉 Είμαστε έτοιμοι να μάθουμε πώς να παρακολουθείς και να διαχειρίζεσαι τον κώδικά σου όπως κάνουν οι επαγγελματίες, και ειλικρινά, αυτό είναι ένα από τα αγαπημένα μου θέματα για διδασκαλία γιατί αλλάζει τελείως τα δεδομένα. + +Φαντάσου το εξής: γράφεις μια καταπληκτική ιστορία, και θέλεις να κρατάς αρχείο κάθε προσχέδιου, κάθε έξυπνης διόρθωσης, και κάθε στιγμή που λες «περίμενε, αυτό είναι ιδιοφυές!» κατά μήκος της διαδρομής. Αυτό ακριβώς κάνει το Git για τον κώδικά σου! Είναι σαν να έχεις το πιο απίθανο ταξιδιωτικό ημερολόγιο που θυμάται ΤΑ ΠΑΝΤΑ – κάθε πάτημα πλήκτρου, κάθε αλλαγή, κάθε «ουπς, αυτό χάλασε τα πάντα» στιγμή που μπορείς να αναιρέσεις αμέσως. + +Θα είμαι ειλικρινής – στην αρχή μπορεί να σου φανεί περίπλοκο. Όταν ξεκίνησα, σκεφτόμουν «Γιατί δεν μπορώ απλώς να αποθηκεύω τα αρχεία μου όπως συνήθως;» Αλλά πίστεψέ με: μόλις το καταλάβεις (και θα το κάνεις!), θα έχεις μία από αυτές τις στιγμές που λες «Πώς ΔΙΚΑΙΑ κωδικοποιούσα χωρίς αυτό;» Είναι σαν να ανακαλύπτεις ότι μπορείς να πετάξεις αφού περπατούσες όλη σου τη ζωή! + +Ας πούμε ότι έχεις έναν φάκελο τοπικά με κάποιο πρότζεκτ κώδικα και θέλεις να αρχίσεις να παρακολουθείς την πρόοδό σου με το git - το σύστημα ελέγχου εκδόσεων. Κάποιοι το συγκρίνουν με το να γράφεις ένα ερωτικό γράμμα στον μελλοντικό εαυτό σου. Διαβάζοντας τα μηνύματά σου κάποια μέρα ή εβδομάδες ή μήνες αργότερα, θα μπορείς να θυμηθείς γιατί πήρες μια απόφαση ή να «γυρίσεις πίσω» μια αλλαγή – αρκεί να γράφεις καλά «μηνύματα commit». + +```mermaid +flowchart TD + A[📁 Τα Αρχεία του Έργου σας] --> B{Είναι Αποθετήριο Git;} + B -->|Όχι| C[git init] + B -->|Ναι| D[Κάντε Αλλαγές] + C --> D + D --> E[git add .] + E --> F["git commit -m 'μήνυμα'"] + F --> G[git push] + G --> H[🌟 Κώδικας στο GitHub!] + + H --> I{Θέλετε να συνεργαστείτε;} + I -->|Ναι| J[Φορκάρετε & Κλωνοποιήστε] + I -->|Όχι| D + J --> K[Δημιουργία Κλαδιού] + K --> L[Κάντε Αλλαγές] + L --> M[Αίτημα Έλξης] + M --> N[🎉 Συμμετέχετε!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Εργασία: Δημιούργησε το Πρώτο σου Αποθετήριο! -> 🎯 **Η Αποστολή σου (και είμαι τόσο ενθουσιασμένος για σένα!)**: Θα δημιουργήσουμε μαζί το πρώτο σου αποθετήριο στο GitHub! Μέχρι να τελειώσουμε εδώ, θα έχεις τη δική σου μικρή γωνιά του διαδικτύου όπου ζει ο κώδικάς σου, και θα έχεις κάνει το πρώτο σου "commit" (αυτό είναι η γλώσσα των προγραμματιστών για την αποθήκευση της δουλειάς σου με έναν πολύ έξυπνο τρόπο). +> 🎯 **Η αποστολή σου (και είμαι πολύ ενθουσιασμένος για σένα!)**: Θα δημιουργήσουμε μαζί το πρώτο σου αποθετήριο στο GitHub! Μέχρι να τελειώσουμε εδώ, θα έχεις τη δική σου μικρή γωνιά στο διαδίκτυο όπου ζει ο κώδικάς σου, και θα έχεις κάνει την πρώτη σου «commit» (αυτό σημαίνει αποθήκευση της δουλειάς σου με πολύ έξυπνο τρόπο). > -> Αυτό είναι πραγματικά μια ξεχωριστή στιγμή – πρόκειται να ενταχθείς επίσημα στην παγκόσμια κοινότητα των προγραμματιστών! Θυμάμαι ακόμα τη συγκίνηση όταν δημιούργησα το πρώτο μου repo και σκέφτηκα "Ουάου, το κάνω πραγματικά!" +> Είναι πραγματικά μια τόσο ιδιαίτερη στιγμή – είσαι έτοιμος να γίνεις επίσημα μέρος της παγκόσμιας κοινότητας προγραμματιστών! Ακόμα θυμάμαι τον ενθουσιασμό όταν δημιούργησα το πρώτο μου repo και σκέφτηκα «Ουάου, το κάνω στ’ αλήθεια!» -Ας περάσουμε μαζί αυτή την περιπέτεια, βήμα-βήμα. Πάρε τον χρόνο σου σε κάθε μέρος – δεν υπάρχει βραβείο για βιασύνη, και υπόσχομαι ότι κάθε βήμα θα βγάζει νόημα. Θυμήσου, κάθε αστέρι του προγραμματισμού που θαυμάζεις κάποτε καθόταν ακριβώς εκεί που είσαι εσύ τώρα, έτοιμος να δημιουργήσει το πρώτο του αποθετήριο. Πόσο ωραίο είναι αυτό; +Ας κάνουμε αυτή την περιπέτεια μαζί, βήμα-βήμα. Πάρε το χρόνο σου σε κάθε μέρος – δεν υπάρχει βραβείο για βιασύνη, και υπόσχομαι ότι κάθε βήμα θα έχει νόημα. Θυμήσου, κάθε προγραμματιστικός σταρ που θαυμάζεις καθόταν ακριβώς εκεί που είσαι εσύ τώρα, έτοιμος να δημιουργήσει το πρώτο του αποθετήριο. Πόσο κουλ είναι αυτό; > Δες το βίντεο > -> [![Βίντεο βασικών για Git και GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) **Ας το κάνουμε μαζί:** -1. **Δημιούργησε το αποθετήριο σου στο GitHub**. Πήγαινε στο GitHub.com και ψάξε για το φωτεινό πράσινο κουμπί **New** (ή το **+** στην πάνω δεξιά γωνία). Πάτησέ το και επίλεξε **New repository**. +1. **Δημιούργησε το αποθετήριό σου στο GitHub**. Πήγαινε στο GitHub.com και βρες το λαμπερό πράσινο κουμπί **New** (ή το σημάδι **+** πάνω δεξιά). Κλίκαρέ το και επίλεξε **New repository**. - Τι να κάνεις: - 1. Δώσε στο αποθετήριο σου ένα όνομα – κάνε το κάτι που έχει νόημα για σένα! - 1. Πρόσθεσε μια περιγραφή αν θέλεις (αυτό βοηθά τους άλλους να καταλάβουν για τι πρόκειται το έργο σου) - 1. Αποφάσισε αν θέλεις να είναι δημόσιο (όλοι μπορούν να το δουν) ή ιδιωτικό (μόνο για σένα) - 1. Σου προτείνω να τσεκάρεις το κουτάκι για να προσθέσεις ένα αρχείο README – είναι σαν την πρώτη σελίδα του έργου σου - 1. Πάτησε **Create repository** και γιόρτασε – μόλις δημιούργησες το πρώτο σου repo! 🎉 + Να τι πρέπει να κάνεις: + 1. Δώσε ένα όνομα στο αποθετήριό σου – διάλεξε κάτι που έχει νόημα για σένα! + 1. Πρόσθεσε μια περιγραφή αν θέλεις (βοηθά τους άλλους να καταλάβουν τι κάνει το πρότζεκτ σου) + 1. Απόφασέ αν θέλεις να είναι δημόσιο (όλοι μπορούν να το δουν) ή ιδιωτικό (μόνο για σένα) + 1. Προτείνω να τσεκάρεις το κουτί για να προσθέσεις ένα αρχείο README – είναι σαν το πρωτοσέλιδο του πρότζεκτ σου + 1. Κλίκαρε **Create repository** και γιορτάστε – μόλις δημιούργησες το πρώτο σου repo! 🎉 -2. **Πήγαινε στον φάκελο του έργου σου**. Τώρα ας ανοίξουμε το τερματικό σου (μην ανησυχείς, δεν είναι τόσο τρομακτικό όσο φαίνεται!). Πρέπει να πούμε στον υπολογιστή σου πού βρίσκονται τα αρχεία του έργου σου. Πληκτρολόγησε αυτή την εντολή: +2. **Πήγαινε στον φάκελο του πρότζεκτ σου**. Τώρα άνοιξε το τερματικό σου (μη στεναχωριέσαι, δεν είναι τόσο τρομακτικό όσο φαίνεται!). Πρέπει να πεις στον υπολογιστή που βρίσκονται τα αρχεία του πρότζεκτ σου. Πληκτρολόγησε αυτή την εντολή: ```bash cd [name of your folder] ``` **Τι κάνουμε εδώ:** - - Βασικά λέμε στον υπολογιστή "Πήγαινε στον φάκελο του έργου μου" - - Είναι σαν να ανοίγεις έναν συγκεκριμένο φάκελο στην επιφάνεια εργασίας σου, αλλά το κάνουμε με εντολές κειμένου - - Αντικατάστησε το `[name of your folder]` με το πραγματικό όνομα του φακέλου του έργου σου + - Στην ουσία λέμε «Ε, υπολογιστή, πάμε στον φάκελο του πρότζεκτ μου» + - Είναι σαν να ανοίγεις έναν συγκεκριμένο φάκελο στην επιφάνεια εργασίας, αλλά το κάνουμε με εντολές κειμένου + - Αντικατέστησε το `[name of your folder]` με το πραγματικό όνομα του φακέλου του πρότζεκτ σου -3. **Μεταμόρφωσε τον φάκελο σου σε αποθετήριο Git**. Εδώ γίνεται η μαγεία! Πληκτρολόγησε: +3. **Μεταμόρφωσε τον φάκελό σου σε αποθετήριο Git**. Εδώ γίνεται η μαγεία! Πληκτρολόγησε: ```bash git init ``` - **Τι μόλις συνέβη (πολύ ωραία πράγματα!):** - - Το Git μόλις δημιούργησε έναν κρυφό φάκελο `.git` στο έργο σου – δεν θα τον δεις, αλλά είναι εκεί! - - Ο κανονικός σου φάκελος είναι τώρα ένα "αποθετήριο" που μπορεί να παρακολουθεί κάθε αλλαγή που κάνεις - - Σκέψου το σαν να δίνεις στον φάκελο σου υπερδυνάμεις να θυμάται τα πάντα + **Τι έγινε μόλις (πολύ ωραία πράγματα!):** + - Το Git μόλις δημιούργησε έναν κρυφό φάκελο `.git` μέσα στο πρότζεκτ σου – δεν θα τον δεις, αλλά είναι εκεί! + - Ο φάκελος σου έγινε «αποθετήριο» που μπορεί να παρακολουθεί κάθε αλλαγή που κάνεις + - Σκέψου το σαν να δίνεις στον φάκελό σου υπερδυνάμεις να θυμάται τα πάντα -4. **Δες τι συμβαίνει**. Ας δούμε τι πιστεύει το Git για το έργο σου αυτή τη στιγμή: +4. **Δες τι γίνεται**. Ας δούμε τι λέει το Git για το πρότζεκτ σου τώρα: ```bash git status ``` - **Κατανόηση του τι σου λέει το Git:** + **Κατανόηση τι σου λέει το Git:** - Μπορεί να δεις κάτι που μοιάζει με αυτό: + Μπορεί να δεις κάτι που μοιάζει έτσι: ```output Changes not staged for commit: @@ -175,40 +214,102 @@ git remote set-url origin git@github.com:username/repository.git modified: file2.txt ``` - **Μην πανικοβάλλεσαι! Τι σημαίνει αυτό:** - - Αρχεία με **κόκκινο** είναι αρχεία που έχουν αλλαγές αλλά δεν είναι έτοιμα να αποθηκευτούν ακόμα - - Αρχεία με **πράσινο** (όταν τα δεις) είναι έτοιμα να αποθηκευτούν - - Το Git είναι χρήσιμο λέγοντάς σου ακριβώς τι μπορείς να κάνεις στη συνέχεια + **Μην πανικοβάλλεσαι! Αυτό σημαίνει:** + - Τα αρχεία με **κόκκινο** είναι αυτά που έχουν αλλαγές αλλά δεν είναι έτοιμα για αποθήκευση ακόμα + - Τα αρχεία με **πράσινο** (όταν τα βλέπεις) είναι έτοιμα να αποθηκευτούν + - Το Git σε βοηθά λέγοντάς σου ακριβώς τι μπορείς να κάνεις στη συνέχεια + + > 💡 **Επαγγελματική συμβουλή**: Η εντολή `git status` είναι ο καλύτερός σου φίλος! Χρησιμοποίησέ την κάθε φορά που μπερδεύεσαι. Είναι σαν να ρωτάς το Git «Ε, τι γίνεται τώρα;» + +5. **Ετοίμασε τα αρχεία σου για αποθήκευση** (αυτό λέγεται "staging"): + + ```bash + git add . + ``` + + **Τι μόλις κάναμε:** + - Είπαμε στο Git «Ε, θέλω να συμπεριλάβω ΟΛΑ τα αρχεία μου στην επόμενη αποθήκευση» + - Το `.` σημαίνει «όλα όσα είναι σε αυτόν τον φάκελο» + - Τώρα τα αρχεία σου είναι «staged» και έτοιμα για το επόμενο βήμα + + **Θέλεις να είσαι πιο επιλεκτικός;** Μπορείς να προσθέσεις μόνο συγκεκριμένα αρχεία: + + ```bash + git add [file or folder name] + ``` + + **Γιατί μπορεί να θες να το κάνεις αυτό;** + - Μερικές φορές θέλεις να αποθηκεύσεις σχετικές αλλαγές μαζί + - Σε βοηθά να οργανώνεις τη δουλειά σου σε λογικά κομμάτια + - Κάνει πιο εύκολο το να καταλάβεις τι άλλαξε και πότε - > 💡 **Συμβουλή ειδικού**: Η εντολή `git status` είναι ο καλύτερος σου φί - - Δημιουργήσαμε μια σύνδεση μεταξύ του τοπικού σας έργου και του αποθετηρίου σας στο GitHub. - - Το "Origin" είναι απλώς ένα ψευδώνυμο για το αποθετήριο σας στο GitHub – είναι σαν να προσθέτετε μια επαφή στο τηλέφωνό σας. - - Τώρα το τοπικό Git σας ξέρει πού να στείλει τον κώδικά σας όταν είστε έτοιμοι να τον μοιραστείτε. + **Άλλαξες γνώμη;** Μην ανησυχείς! Μπορείς να αφαιρέσεις αρχεία από το στάδιο έτσι: - 💡 **Πιο εύκολος τρόπος**: Αν έχετε εγκατεστημένο το GitHub CLI, μπορείτε να το κάνετε με μία εντολή: + ```bash + # Αποστάδιοποιήστε τα πάντα + git reset + + # Αποστάδιοποιήστε μόνο ένα αρχείο + git reset [file name] + ``` + + Μην ανησυχείς – αυτό δεν διαγράφει τη δουλειά σου, απλά βγάζει τα αρχεία από το «έτοιμα για αποθήκευση» σωρό. + +6. **Αποθήκευσε τη δουλειά σου οριστικά** (κάνε την πρώτη σου commit!): + + ```bash + git commit -m "first commit" + ``` + + **🎉 Συγχαρητήρια! Μόλις έκανες το πρώτο σου commit!** + + **Τι μόλις έγινε:** + - Το Git πήρε ένα «στιγμιότυπο» όλων των «staged» αρχείων αυτή ακριβώς τη στιγμή + - Το μήνυμα commit «first commit» εξηγεί τι είναι αυτό το σημείο αποθήκευσης + - Το Git έδωσε σε αυτό το στιγμιότυπο μια μοναδική ταυτότητα ώστε να το βρίσκεις πάντα αργότερα + - Επίσημα ξεκίνησες να παρακολουθείς την ιστορία του πρότζεκτ σου! + + > 💡 **Μηνύματα για μελλοντικά commits**: Για τις επόμενες commits σου, γίνε πιο περιγραφικός! Αντί για «updated stuff», δοκίμασε «Προσθήκη φόρμας επικοινωνίας στην αρχική σελίδα» ή «Διόρθωση σφάλματος στο μενού πλοήγησης». Ο μελλοντικός εαυτός σου θα σε ευχαριστήσει! + +7. **Σύνδεσε το τοπικό πρότζεκτ σου με το GitHub**. Προς το παρόν, το πρότζεκτ σου υπάρχει μόνο στον υπολογιστή σου. Ας το συνδέσουμε με το αποθετήριο GitHub για να μπορείς να το μοιραστείς με τον κόσμο! + + Πάμε πρώτα στη σελίδα του αποθετηρίου σου στο GitHub και αντίγραψε το URL. Μετά έλα πίσω εδώ και πληκτρολόγησε: + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + (Αντικατέστησε αυτό το URL με το πραγματικό URL του αποθετηρίου σου!) + + **Τι μόλις κάναμε:** + - Δημιουργήσαμε μια σύνδεση μεταξύ του τοπικού σου έργου και του αποθετηρίου σου στο GitHub + - Το "Origin" είναι απλώς ένα ψευδώνυμο για το αποθετήριο σου στο GitHub – είναι σαν να προσθέτεις μια επαφή στο τηλέφωνό σου + - Τώρα το τοπικό σου Git ξέρει πού να στείλει τον κώδικά σου όταν είσαι έτοιμος να τον μοιραστείς + + 💡 **Πιο εύκολος τρόπος**: Αν έχεις εγκατεστημένο το GitHub CLI, μπορείς να το κάνεις με μία εντολή: ```bash gh repo create my-repo --public --push --source=. ``` -8. **Στείλτε τον κώδικά σας στο GitHub** (η μεγάλη στιγμή!): +8. **Στείλε τον κώδικά σου στο GitHub** (η μεγάλη στιγμή!): ```bash git push -u origin main ``` - **🚀 Αυτό είναι! Ανεβάζετε τον κώδικά σας στο GitHub!** + **🚀 Αυτό είναι! Μεταφορτώνεις τον κώδικά σου στο GitHub!** **Τι συμβαίνει:** - - Οι δεσμεύσεις σας ταξιδεύουν από τον υπολογιστή σας στο GitHub. - - Η σημαία `-u` δημιουργεί μια μόνιμη σύνδεση ώστε οι μελλοντικές αποστολές να είναι πιο εύκολες. - - Το "main" είναι το όνομα του κύριου κλάδου σας (σαν τον κύριο φάκελο). - - Μετά από αυτό, μπορείτε απλώς να πληκτρολογείτε `git push` για μελλοντικές αποστολές! + - Οι αλλαγές σου ταξιδεύουν από τον υπολογιστή σου στο GitHub + - Η σημαία `-u` δημιουργεί μια μόνιμη σύνδεση ώστε τα μελλοντικά push να είναι πιο εύκολα + - Το "main" είναι το όνομα του κύριου κλάδου σου (σαν ο βασικός φάκελος) + - Μετά από αυτό, μπορείς απλά να πληκτρολογείς `git push` για μελλοντικές αποστολές! - 💡 **Σημείωση**: Αν ο κλάδος σας έχει διαφορετικό όνομα (όπως "master"), χρησιμοποιήστε αυτό το όνομα. Μπορείτε να το ελέγξετε με την εντολή `git branch --show-current`. + 💡 **Γρήγορη σημείωση**: Αν ο κλάδος σου ονομάζεται διαφορετικά (πχ "master"), χρησιμοποίησε αυτό το όνομα. Μπορείς να το δεις με `git branch --show-current`. -9. **Η νέα σας καθημερινή ρουτίνα κωδικοποίησης** (εδώ γίνεται εθιστικό!): +9. **Ο νέος καθημερινός ρυθμός κωδικοποίησης σου** (εδώ γίνεται εθιστικό!): - Από εδώ και πέρα, κάθε φορά που κάνετε αλλαγές στο έργο σας, ακολουθείτε αυτή την απλή διαδικασία τριών βημάτων: + Από εδώ και πέρα, κάθε φορά που κάνεις αλλαγές στο έργο σου, ακολουθείς αυτόν τον απλό τριπλό χορό: ```bash git add . @@ -216,278 +317,461 @@ git remote set-url origin git@github.com:username/repository.git git push ``` - **Αυτό γίνεται ο παλμός της κωδικοποίησής σας:** - - Κάντε κάποιες καταπληκτικές αλλαγές στον κώδικά σας ✨ - - Προσθέστε τις με `git add` ("Γεια σου Git, δώσε προσοχή σε αυτές τις αλλαγές!") - - Αποθηκεύστε τις με `git commit` και ένα περιγραφικό μήνυμα (ο μελλοντικός εαυτός σας θα σας ευχαριστήσει!) - - Μοιραστείτε τις με τον κόσμο χρησιμοποιώντας `git push` 🚀 - - Επαναλάβετε – σοβαρά, αυτό γίνεται τόσο φυσικό όσο η αναπνοή! - - Λατρεύω αυτή τη διαδικασία γιατί είναι σαν να έχετε πολλαπλά σημεία αποθήκευσης σε ένα βιντεοπαιχνίδι. Κάνατε μια αλλαγή που αγαπάτε; Δεσμεύστε την! Θέλετε να δοκιμάσετε κάτι ριψοκίνδυνο; Κανένα πρόβλημα – μπορείτε πάντα να επιστρέψετε στην τελευταία σας δέσμευση αν τα πράγματα πάνε στραβά! - - > 💡 **Συμβουλή**: Ίσως θέλετε επίσης να υιοθετήσετε ένα αρχείο `.gitignore` για να αποτρέψετε αρχεία που δεν θέλετε να παρακολουθούνται από το GitHub – όπως το αρχείο σημειώσεων που αποθηκεύετε στον ίδιο φάκελο αλλά δεν έχει θέση σε ένα δημόσιο αποθετήριο. Μπορείτε να βρείτε πρότυπα για αρχεία `.gitignore` στο [.gitignore templates](https://github.com/github/gitignore) ή να δημιουργήσετε ένα χρησιμοποιώντας το [gitignore.io](https://www.toptal.com/developers/gitignore). + **Αυτή γίνεται η καρδιά του κώδικά σου:** + - Κάνε μερικές φανταστικές αλλαγές στον κώδικά σου ✨ + - Πρόσθεσέ τες με `git add` ("Hey Git, δώσε προσοχή σε αυτές τις αλλαγές!") + - Αποθήκευσέ τες με `git commit` και ένα περιγραφικό μήνυμα (το μελλοντικό εσύ θα σε ευχαριστεί!) + - Μοιράσου τις με τον κόσμο χρησιμοποιώντας `git push` 🚀 + - Επανάλαβε – σοβαρά, γίνεται τόσο φυσικό όσο το να αναπνέεις! + + Αγαπώ αυτή τη ροή εργασίας γιατί είναι σαν να έχεις πολλαπλά σημεία αποθήκευσης σε ένα βιντεοπαιχνίδι. Έκανες μια αλλαγή που σου αρέσει; Κάνε commit! Θέλεις να δοκιμάσεις κάτι ριψοκίνδυνο; Κανένα πρόβλημα – μπορείς πάντα να γυρίσεις στο τελευταίο commit σου αν τυχόν κάτι πάει στραβά! + + > 💡 **Συμβουλή**: Ίσως να θέλεις επίσης να χρησιμοποιήσεις ένα αρχείο `.gitignore` για να εμποδίσεις αρχεία που δεν θέλεις να παρακολουθείς να εμφανίζονται στο GitHub - όπως αυτό το αρχείο σημειώσεων που κρατάς στον ίδιο φάκελο αλλά δεν έχει θέση σε ένα δημόσιο αποθετήριο. Μπορείς να βρεις πρότυπα για αρχεία `.gitignore` στο [.gitignore templates](https://github.com/github/gitignore) ή να δημιουργήσεις ένα με το [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Πρώτο Check-in Αποθετηρίου: Πώς Ένιωσες;** + +**Πάρε μια στιγμή να γιορτάσεις και να αναλογιστείς:** +- Πώς ένιωσες όταν είδες τον κώδικά σου να εμφανίζεται στο GitHub για πρώτη φορά; +- Ποιο βήμα φάνηκε το πιο μπερδεμένο και ποιο το πιο εύκολο; +- Μπορείς να εξηγήσεις τη διαφορά μεταξύ `git add`, `git commit`, και `git push` με δικά σου λόγια; + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Δημιουργία έργου + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Επιτυχία! 🎉 + + note right of Staged + Αρχεία έτοιμα για αποθήκευση + end note + + note right of Committed + Δημιουργία στιγμιότυπου + end note +``` +> **Θυμήσου**: Ακόμα και έμπειροι προγραμματιστές ξεχνάνε κάποιες εντολές. Το να γίνει αυτή η ροή εργασίας μυϊκή μνήμη χρειάζεται εξάσκηση – τα πας πολύ καλά! -#### Σύγχρονες διαδικασίες Git +#### Σύγχρονες ροές εργασίας με Git -Σκεφτείτε να υιοθετήσετε αυτές τις σύγχρονες πρακτικές: +Σκέψου να υιοθετήσεις αυτές τις σύγχρονες πρακτικές: -- **Conventional Commits**: Χρησιμοποιήστε μια τυποποιημένη μορφή μηνυμάτων δέσμευσης όπως `feat:`, `fix:`, `docs:` κ.λπ. Μάθετε περισσότερα στο [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomic commits**: Κάντε κάθε δέσμευση να αντιπροσωπεύει μια λογική αλλαγή. -- **Συχνές δεσμεύσεις**: Δεσμεύστε συχνά με περιγραφικά μηνύματα αντί για μεγάλες, σπάνιες δεσμεύσεις. +- **Conventional Commits**: Χρησιμοποίησε ένα τυποποιημένο φορμά μηνύματος commit όπως `feat:`, `fix:`, `docs:`, κλπ. Μάθε περισσότερα στο [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomic commits**: Κάνε κάθε commit να αναπαριστά μια μόνο λογική αλλαγή +- **Συχνά commits**: Κάνε συχνά commits με περιγραφικά μηνύματα αντί για μεγάλα και σπάνια -#### Μηνύματα δέσμευσης +#### Μηνύματα commit -Ένα εξαιρετικό θέμα μηνύματος δέσμευσης Git ολοκληρώνει την εξής πρόταση: -Αν εφαρμοστεί, αυτή η δέσμευση θα <το θέμα σας εδώ> +Ένας καλός τίτλος commit συμπληρώνει την εξής πρόταση: +Αν εφαρμοστεί, αυτή η αλλαγή θα <ο τίτλος σου εδώ> -Για το θέμα χρησιμοποιήστε την προστακτική, ενεστώτα: "αλλάζω" και όχι "άλλαξα" ή "αλλαγές". -Όπως στο θέμα, στο σώμα (προαιρετικό) χρησιμοποιήστε επίσης την προστακτική, ενεστώτα. Το σώμα πρέπει να περιλαμβάνει το κίνητρο για την αλλαγή και να το συγκρίνει με την προηγούμενη συμπεριφορά. Εξηγείτε το `γιατί`, όχι το `πώς`. +Για τον τίτλο, χρησιμοποίησε την προστακτική, σε ενεστώτα: "change" όχι "changed" ή "changes". +Όπως στον τίτλο, στο σώμα (προαιρετικό) χρησιμοποίησε επίσης προστακτική, ενεστώτα. Το σώμα πρέπει να περιλαμβάνει το κίνητρο της αλλαγής και να συγκρίνει με την προηγούμενη συμπεριφορά. Εξηγείς το `γιατί`, όχι το `πώς`. -✅ Αφιερώστε λίγα λεπτά για να περιηγηθείτε στο GitHub. Μπορείτε να βρείτε ένα πραγματικά εξαιρετικό μήνυμα δέσμευσης; Μπορείτε να βρείτε ένα πραγματικά ελάχιστο; Ποια πληροφορία πιστεύετε ότι είναι η πιο σημαντική και χρήσιμη να μεταδοθεί σε ένα μήνυμα δέσμευσης; +✅ Πάρε λίγα λεπτά για να περιηγηθείς στο GitHub. Μπορείς να βρεις ένα πολύ καλό μήνυμα commit; Μπορείς να βρεις ένα πολύ μικρό; Ποια πληροφορία θεωρείς πιο σημαντική και χρήσιμη να περάσει ένα μήνυμα commit; -## Συνεργασία με άλλους (Το διασκεδαστικό μέρος!) +## Συνεργασία με Άλλους (Το Διασκεδαστικό Μέρος!) -Κρατηθείτε γιατί ΕΔΩ είναι που το GitHub γίνεται απολύτως μαγικό! 🪄 Έχετε κατακτήσει τη διαχείριση του δικού σας κώδικα, αλλά τώρα βουτάμε στο απόλυτο αγαπημένο μου μέρος – τη συνεργασία με εκπληκτικούς ανθρώπους από όλο τον κόσμο. +Πάρε βαθιά αναπνοή γιατί ΕΔΩ το GitHub γίνεται μαγικό! 🪄 Έχεις μάθει να διαχειρίζεσαι τον δικό σου κώδικα, αλλά τώρα βουτάμε στο αγαπημένο μου μέρος – τη συνεργασία με υπέροχους ανθρώπους από όλο τον κόσμο. -Φανταστείτε αυτό: ξυπνάτε αύριο και βλέπετε ότι κάποιος στο Τόκιο βελτίωσε τον κώδικά σας ενώ κοιμόσασταν. Μετά κάποιος στο Βερολίνο διορθώνει ένα σφάλμα που σας είχε κολλήσει. Μέχρι το απόγευμα, ένας προγραμματιστής στο Σάο Πάολο έχει προσθέσει μια λειτουργία που δεν είχατε καν σκεφτεί. Αυτό δεν είναι επιστημονική φαντασία – είναι απλώς μια τυπική μέρα στο σύμπαν του GitHub! +Φαντάσου το εξής: ξυπνάς αύριο και βλέπεις ότι κάποιος στο Τόκιο βελτίωσε τον κώδικά σου όσο κοιμόσουν. Μετά κάποιος στο Βερολίνο διορθώνει ένα σφάλμα που κολλούσες. Το απόγευμα, ένας προγραμματιστής στο Σάο Πάολο προσθέτει μια λειτουργία που δεν είχες καν φανταστεί. Αυτό δεν είναι επιστημονική φαντασία – είναι απλά Τρίτη στο σύμπαν του GitHub! -Αυτό που με ενθουσιάζει πραγματικά είναι ότι οι δεξιότητες συνεργασίας που πρόκειται να μάθετε; Αυτές είναι οι ΑΚΡΙΒΩΣ ίδιες διαδικασίες που χρησιμοποιούν οι ομάδες της Google, της Microsoft και των αγαπημένων σας startups κάθε μέρα. Δεν μαθαίνετε απλώς ένα ωραίο εργαλείο – μαθαίνετε τη μυστική γλώσσα που κάνει ολόκληρο τον κόσμο του λογισμικού να συνεργάζεται. +Αυτό που με ενθουσιάζει πραγματικά είναι ότι οι δεξιότητες συνεργασίας που πρόκειται να μάθεις; Αυτές είναι ακριβώς οι ίδιες ροές εργασίας που χρησιμοποιούν ομάδες σε Google, Microsoft, και τις αγαπημένες σου startups κάθε μέρα. Δεν μαθαίνεις απλώς ένα κουλ εργαλείο – μαθαίνεις τη μυστική γλώσσα που κάνει όλο τον κόσμο του λογισμικού να συνεργάζεται. -Σοβαρά, μόλις βιώσετε την αίσθηση του να έχει κάποιος να συγχωνεύσει το πρώτο σας pull request, θα καταλάβετε γιατί οι προγραμματιστές γίνονται τόσο παθιασμένοι με το ανοιχτό λογισμικό. Είναι σαν να είστε μέρος του μεγαλύτερου, πιο δημιουργικού ομαδικού έργου στον κόσμο! +Σοβαρά, μόλις νιώσεις την ώθηση του να συγχωνεύσεις το πρώτο σου pull request, θα καταλάβεις γιατί οι προγραμματιστές λατρεύουν το open source. Είναι σαν να συμμετέχεις στο μεγαλύτερο, πιο δημιουργικό ομαδικό έργο του κόσμου! -> Δείτε το βίντεο +> Δες το βίντεο > -> [![Βίντεο βασικών αρχών Git και GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) - -Ο κύριος λόγος για να βάλετε πράγματα στο GitHub ήταν να κάνετε δυνατή τη συνεργασία με άλλους προγραμματιστές. - -Στο αποθετήριο σας, μεταβείτε στο `Insights > Community` για να δείτε πώς συγκρίνεται το έργο σας με τα προτεινόμενα πρότυπα κοινότητας. +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Ο κύριος λόγος του να βάζεις πράγματα σε GitHub ήταν για να είναι δυνατή η συνεργασία με άλλους προγραμματιστές. + +```mermaid +flowchart LR + A[🔍 Βρείτε το Έργο] --> B[🍴 Διακλάδωση Αποθετηρίου] + B --> C[📥 Αντιγραφή Τοπικά] + C --> D[🌿 Δημιουργία Κλαδιού] + D --> E[✏️ Κάντε Αλλαγές] + E --> F[💾 Καταχώρηση Αλλαγών] + F --> G[📤 Ανέβασμα Κλαδιού] + G --> H[🔄 Δημιουργία Αιτήματος Έλξης] + H --> I{Ανασκόπηση Διαχειριστή} + I -->|✅ Εγκεκριμένο| J[🎉 Συγχώνευση!] + I -->|❓ Αιτήθηκαν Αλλαγές| K[📝 Κάντε Ενημερώσεις] + K --> F + J --> L[🧹 Καθαρισμός Κλαδιών] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +Στο αποθετήριό σου, πήγαινε στο `Insights > Community` για να δεις πώς συγκρίνεται το έργο σου με τα προτεινόμενα πρότυπα κοινότητας. -Θέλετε να κάνετε το αποθετήριο σας να φαίνεται επαγγελματικό και φιλόξενο; Μεταβείτε στο αποθετήριο σας και κάντε κλικ στο `Insights > Community`. Αυτή η καταπληκτική λειτουργία σας δείχνει πώς συγκρίνεται το έργο σας με αυτό που η κοινότητα του GitHub θεωρεί "καλές πρακτικές αποθετηρίου". +Θέλεις το αποθετήριό σου να δείχνει επαγγελματικό και φιλόξενο; Πήγαινε στο αποθετήριό σου και κάνε κλικ στο `Insights > Community`. Αυτή η ωραία λειτουργία σου δείχνει πώς το έργο σου συγκρίνεται με αυτά που η κοινότητα του GitHub θεωρεί "καλές πρακτικές αποθετηρίου". -> 🎯 **Κάντε το έργο σας να ξεχωρίζει**: Ένα καλά οργανωμένο αποθετήριο με καλή τεκμηρίωση είναι σαν να έχετε μια καθαρή, φιλόξενη βιτρίνα. Δείχνει ότι νοιάζεστε για τη δουλειά σας και κάνει τους άλλους να θέλουν να συνεισφέρουν! +> 🎯 **Κάνε το έργο σου να λάμψει**: Ένα καλοοργανωμένο αποθετήριο με καλή τεκμηρίωση είναι σαν να έχεις μια καθαρή, φιλόξενη βιτρίνα. Λέει στους ανθρώπους ότι νοιάζεσαι για τη δουλειά σου και τους κάνει να θέλουν να συνεισφέρουν! -**Τι κάνει ένα αποθετήριο εξαιρετικό:** +**Αυτά κάνουν ένα αποθετήριο υπέροχο:** -| Τι να προσθέσετε | Γιατί είναι σημαντικό | Τι κάνει για εσάς | -|------------------|-----------------------|-------------------| -| **Περιγραφή** | Η πρώτη εντύπωση μετράει! | Οι άνθρωποι καταλαβαίνουν αμέσως τι κάνει το έργο σας | -| **README** | Η πρώτη σελίδα του έργου σας | Σαν ένας φιλικός ξεναγός για νέους επισκέπτες | -| **Οδηγίες συνεισφοράς** | Δείχνει ότι καλωσορίζετε βοήθεια | Οι άνθρωποι ξέρουν ακριβώς πώς μπορούν να σας βοηθήσουν | -| **Κώδικας δεοντολογίας** | Δημιουργεί έναν φιλικό χώρο | Όλοι αισθάνονται ευπρόσδεκτοι να συμμετάσχουν | -| **Άδεια χρήσης** | Νομική σαφήνεια | Οι άλλοι ξέρουν πώς μπορούν να χρησιμοποιήσουν τον κώδικά σας | -| **Πολιτική ασφαλείας** | Δείχνει ότι είστε υπεύθυνοι | Επιδεικνύει επαγγελματικές πρακτικές | +| Τι να Προσθέσεις | Γιατί Είναι Σημαντικό | Τι Σου Κάνει | +|------------------|-----------------------|--------------| +| **Περιγραφή** | Η πρώτη εντύπωση μετράει! | Οι άνθρωποι καταλαβαίνουν αμέσως τι κάνει το έργο σου | +| **README** | Η κεντρική σελίδα του έργου σου | Σαν ένας φιλικός ξεναγός για τους νέους επισκέπτες | +| **Οδηγίες Συνεισφοράς** | Δείχνει ότι υποδέχεσαι βοήθεια | Οι άνθρωποι ξέρουν ακριβώς πώς μπορούν να βοηθήσουν | +| **Κώδικας Συμπεριφοράς** | Δημιουργεί ένα φιλικό χώρο | Όλοι αισθάνονται ευπρόσδεκτοι να συμμετέχουν | +| **Άδεια Χρήσης** | Νομική σαφήνεια | Οι άλλοι ξέρουν πώς μπορούν να χρησιμοποιούν τον κώδικά σου | +| **Πολιτική Ασφαλείας** | Δείχνει υπευθυνότητα | Δείχνει επαγγελματικές πρακτικές | -> 💡 **Επαγγελματική συμβουλή**: Το GitHub παρέχει πρότυπα για όλα αυτά τα αρχεία. Κατά τη δημιουργία ενός νέου αποθετηρίου, επιλέξτε τα κουτάκια για να δημιουργήσετε αυτόματα αυτά τα αρχεία. +> 💡 **Επαγγελματική Συμβουλή**: Το GitHub παρέχει πρότυπα για όλα αυτά τα αρχεία. Κατά τη δημιουργία νέου αποθετηρίου, τσέκαρε τα κουτάκια για να δημιουργηθούν αυτόματα αυτά τα αρχεία. -**Σύγχρονες λειτουργίες του GitHub για εξερεύνηση:** +**Σύγχρονες λειτουργίες GitHub για να εξερευνήσεις:** 🤖 **Αυτοματοποίηση & CI/CD:** -- **GitHub Actions** για αυτοματοποιημένες δοκιμές και ανάπτυξη. -- **Dependabot** για αυτόματες ενημερώσεις εξαρτήσεων. +- **GitHub Actions** για αυτοματοποιημένες δοκιμές και ανάπτυξη +- **Dependabot** για αυτόματες ενημερώσεις εξαρτήσεων -💬 **Κοινότητα & Διαχείριση έργου:** -- **GitHub Discussions** για συζητήσεις κοινότητας πέρα από τα θέματα. -- **GitHub Projects** για διαχείριση έργου τύπου kanban. -- **Κανόνες προστασίας κλάδων** για την επιβολή προτύπων ποιότητας κώδικα. +💬 **Κοινότητα & Διαχείριση Έργου:** +- **GitHub Discussions** για συζητήσεις κοινότητας πέρα από ζητήματα +- **GitHub Projects** για διαχείριση έργου με κανμπάν +- **Κανόνες προστασίας κλάδων** για επιβολή προτύπων ποιότητας κώδικα -Όλοι αυτοί οι πόροι θα ωφελήσουν την ένταξη νέων μελών στην ομάδα. Και αυτά είναι συνήθως τα πράγματα που οι νέοι συνεισφέροντες εξετάζουν πριν καν κοιτάξουν τον κώδικά σας, για να δουν αν το έργο σας είναι το κατάλληλο μέρος για να αφιερώσουν τον χρόνο τους. -✅ Τα αρχεία README, αν και απαιτούν χρόνο για να προετοιμαστούν, συχνά παραμελούνται από πολυάσχολους συντηρητές. Μπορείτε να βρείτε ένα παράδειγμα ενός ιδιαίτερα περιγραφικού; Σημείωση: υπάρχουν μερικά [εργαλεία για να βοηθήσουν στη δημιουργία καλών README](https://www.makeareadme.com/) που ίσως θέλετε να δοκιμάσετε. +Όλοι αυτοί οι πόροι βοηθούν την ένταξη νέων μελών στην ομάδα. Και αυτά είναι συνήθως τα πράγματα που κοιτάνε οι νέοι συνεισφέροντες πριν καν δουν τον κώδικά σου, για να καταλάβουν αν το έργο σου είναι το σωστό μέρος για να αφιερώσουν τον χρόνο τους. + +✅ Τα αρχεία README, αν και παίρνουν χρόνο να προετοιμαστούν, συχνά παραμελούνται από τους φορτωμένους διαχειριστές. Μπορείς να βρεις ένα παράδειγμα ιδιαίτερα περιγραφικού; Σημείωση: υπάρχουν μερικά [εργαλεία που βοηθούν στη δημιουργία καλών README](https://www.makeareadme.com/) που μπορεί να θέλεις να δοκιμάσεις. ### Εργασία: Συγχώνευση κώδικα -Τα έγγραφα συνεισφοράς βοηθούν τους ανθρώπους να συνεισφέρουν στο έργο. Εξηγεί τι είδους συνεισφορές αναζητάτε και πώς λειτουργεί η διαδικασία. Οι συνεισφέροντες θα χρειαστεί να περάσουν από μια σειρά βημάτων για να μπορέσουν να συνεισφέρουν στο αποθετήριο σας στο GitHub: +Τα έγγραφα συνεισφοράς βοηθούν τους ανθρώπους να συμβάλουν στο έργο. Εξηγούν τους τύπους των συνεισφορών που αναζητάς και πώς λειτουργεί η διαδικασία. Οι συνεισφέροντες θα χρειαστεί να περάσουν από μια σειρά βημάτων για να μπορέσουν να συμβάλουν στο αποθετήριό σου στο GitHub: + -1. **Forking το αποθετήριο σας**. Πιθανότατα θα θέλετε οι άνθρωποι να _fork_ το έργο σας. Το Forking σημαίνει τη δημιουργία ενός αντιγράφου του αποθετηρίου σας στο προφίλ τους στο GitHub. -1. **Κλωνοποίηση**. Από εκεί θα κλωνοποιήσουν το έργο στον τοπικό τους υπολογιστή. -1. **Δημιουργία κλάδου**. Θα θέλετε να τους ζητήσετε να δημιουργήσουν έναν _κλάδο_ για τη δουλειά τους. -1. **Εστίαση της αλλαγής σε μία περιοχή**. Ζητήστε από τους συνεισφέροντες να επικεντρώσουν τις συνεισφορές τους σε ένα πράγμα τη φορά – έτσι οι πιθανότητες να μπορέσετε να _συγχωνεύσετε_ τη δουλειά τους είναι μεγαλύτερες. Φανταστείτε να γράφουν μια διόρθωση σφάλματος, να προσθέτουν μια νέα λειτουργία και να ενημερώνουν αρκετές δοκιμές – τι γίνεται αν θέλετε ή μπορείτε να εφαρμόσετε μόνο 2 από τις 3 ή 1 από τις 3 αλλαγές; +1. **Fork του αποθετηρίου σου** Πιθανόν να θέλεις οι άνθρωποι να κάνουν _fork_ του έργου σου. Forking σημαίνει να δημιουργούν ένα αντίγραφο του αποθετηρίου σου στο προφίλ τους στο GitHub. +1. **Κλωνοποίηση**. Από εκεί θα κλωνοποιήσουν το έργο στον τοπικό τους υπολογιστή. +1. **Δημιουργία κλάδου**. Θα θελήσεις να τους ζητήσεις να δημιουργήσουν έναν _κλάδο_ για τη δουλειά τους. +1. **Εστίαση της αλλαγής σε μια περιοχή**. Ζήτα από τους συνεισφέροντες να συγκεντρώσουν τις αλλαγές τους σε ένα θέμα κάθε φορά - έτσι οι πιθανότητες να μπορέσεις να _συγχωνεύσεις_ τη δουλειά τους είναι μεγαλύτερες. Φαντάσου να γράφουν μια διόρθωση σφάλματος, να προσθέτουν μια νέα λειτουργία, και να ενημερώνουν διάφορα τεστ - τι γίνεται αν θες ή μπορείς να υλοποιήσεις μόνο 2 από τα 3, ή 1 από τα 3; -✅ Φανταστείτε μια κατάσταση όπου οι κλάδοι είναι ιδιαίτερα κρίσιμοι για τη συγγραφή και την αποστολή καλού κώδικα. Ποιες περιπτώσεις χρήσης μπορείτε να σκεφτείτε; +✅ Φαντάσου μια κατάσταση όπου οι κλάδοι είναι ιδιαίτερα κρίσιμοι για το να γράφεις και να παραδίδεις καλό κώδικα. Τι περιπτώσεις χρήσης μπορείς να σκεφτείς; -> Σημείωση, γίνετε η αλλαγή που θέλετε να δείτε στον κόσμο και δημιουργήστε κλάδους για τη δική σας δουλειά επίσης. Οποιαδήποτε δέσμευση κάνετε θα γίνει στον κλάδο που έχετε "επιλέξει". Χρησιμοποιήστε `git status` για να δείτε ποιος είναι αυτός ο κλάδος. +> Σημείωση, να είσαι η αλλαγή που θέλεις να δεις στον κόσμο, και δημιούργησε κλάδους και για τη δική σου δουλειά. Οποιαδήποτε commits κάνεις θα γίνουν στον κλάδο που είσαι "checked out" αυτή τη στιγμή. Χρησιμοποίησε `git status` για να δεις ποιος είναι αυτός ο κλάδος. -Ας περάσουμε από τη διαδικασία ενός συνεισφέροντα. Υποθέστε ότι ο συνεισφέρων έχει ήδη κάνει _fork_ και _clone_ το αποθετήριο, ώστε να έχει ένα Git repo έτοιμο για εργασία στον τοπικό του υπολογιστή: +Ας δούμε μια ροή εργασίας συνεισφέροντα. Υποθέτουμε ότι ο συνεισφέροντας έχει ήδη _fork-άρει_ και _κλωνοποιήσει_ το αποθετήριο, οπότε έχει ένα Git repo έτοιμο για δουλειά στον τοπικό του υπολογιστή: -1. **Δημιουργία κλάδου**. Χρησιμοποιήστε την εντολή `git branch` για να δημιουργήσετε έναν κλάδο που θα περιέχει τις αλλαγές που σκοπεύουν να συνεισφέρουν: +1. **Δημιουργία κλάδου**. Χρησιμοποίησε την εντολή `git branch` για να δημιουργήσεις έναν κλάδο που θα περιέχει τις αλλαγές που θέλουν να συνεισφέρουν: ```bash git branch [branch-name] ``` - > 💡 **Σύγχρονη προσέγγιση**: Μπορείτε επίσης να δημιουργήσετε και να μεταβείτε στον νέο κλάδο με μία εντολή: + > 💡 **Σύγχρονη Προσέγγιση**: Μπορείς επίσης να δημιουργήσεις και να μεταβείς στον νέο κλάδο με μια εντολή: ```bash git switch -c [branch-name] ``` -1. **Μετάβαση στον κλάδο εργασίας**. Μεταβείτε στον συγκεκριμένο κλάδο και ενημερώστε τον κατάλογο εργασίας με `git switch`: +1. **Μετάβαση στον κλάδο εργασίας**. Μετακινήσου στον καθορισμένο κλάδο και ενημέρωσε το φάκελο εργασίας με `git switch`: ```bash git switch [branch-name] ``` - > 💡 **Σύγχρονη σημείωση**: Το `git switch` είναι η σύγχρονη αντικατάσταση του `git checkout` όταν αλλάζετε κλάδους. Είναι πιο σαφές και ασφαλές για αρχάριους. + > 💡 **Σύγχρονη Σημείωση**: Το `git switch` είναι η σύγχρονη αντικατάσταση του `git checkout` για αλλαγές κλάδων. Είναι πιο σαφές και ασφαλές για αρχάριους. -1. **Κάντε δουλειά**. Σε αυτό το σημείο θέλετε να προσθέσετε τις αλλαγές σας. Μην ξεχάσετε να ενημερώσετε το Git γι' αυτές με τις παρακάτω εντολές: +1. **Κάνε δουλειά**. Σε αυτό το σημείο θέλεις να προσθέσεις τις αλλαγές σου. Μην ξεχνάς να ενημερώνεις το Git με τις παρακάτω εντολές: ```bash git add . git commit -m "my changes" ``` - > ⚠️ **Ποιότητα μηνύματος δέσμευσης**: Βεβαιωθείτε ότι δίνετε στη δέσμευσή σας ένα καλό όνομα, τόσο για εσάς όσο και για τον συντηρητή του αποθετηρίου που βοηθάτε. Να είστε συγκεκριμένοι σχετικά με το τι αλλάξατε! + > ⚠️ **Ποιότητα Μηνύματος Commit**: Βεβαιώσου ότι δίνεις ένα καλό όνομα στο commit σου, τόσο για δικό σου όφελος όσο και για τον διαχειριστή του αποθετηρίου που βοηθάς. Να είσαι συγκεκριμένος σε τι άλλαξες! -1. **Συνδυάστε τη δουλειά σας με τον κλάδο `main`**. Σε κάποιο σημείο τελειώνετε τη δουλειά σας και θέλετε να τη συνδυάσετε με αυτή του κλάδου `main`. Ο κλάδος `main` μπορεί να έχει αλλάξει εν τω μεταξύ, οπότε βεβαιωθείτε ότι πρώτα τον ενημερώνετε με τις παρακάτω εντολές: +1. **Συνένωσε τη δουλειά σου με τον κλάδο `main`**. Κάποια στιγμή τελειώνεις τη δουλειά και θέλεις να τη συνενώσεις με τον κλάδο `main`. Ο κλάδος `main` μπορεί να έχει αλλάξει στο μεταξύ, οπότε βεβαιώσου πρώτα ότι τον ενημερώνεις με τις παρακάτω εντολές: ```bash git switch main git pull ``` - Σε αυτό το σημείο θέλετε να βεβαιωθείτε ότι τυχόν _συγκρούσεις_, καταστάσεις όπου το Git δεν μπορεί εύκολα να _συνδυάσει_ τις αλλαγές, συμβαίνουν στον κλάδο εργασίας σας. Επομένως, εκτελέστε τις παρακάτω εντολές: + Σε αυτό το σημείο θέλεις να βεβαιωθείς ότι οποιεσδήποτε _συγκρούσεις_, καταστάσεις όπου το Git δεν μπορεί εύκολα να _συνενώσει_ τις αλλαγές, συμβαίνουν στον κλάδο εργασίας σου. Επομένως τρέξε τις παρακάτω εντολές: ```bash git switch [branch_name] git merge main ``` - Η εντολή `git merge main` θα φέρει όλες τις αλλαγές από το `main` στον κλάδο σας. Ελπίζουμε να μπορείτε απλώς να συνεχίσετε. Αν όχι, το VS Code θα σας πει πού το Git είναι _μπερδεμένο_ και απλώς τροποποιείτε τα επηρεαζόμενα αρχεία για να πείτε ποιο περιεχόμενο είναι το πιο ακριβές. + Η εντολή `git merge main` θα φέρει όλες τις αλλαγές από τον `main` στον κλάδο σου. Ελπίζουμε να μπορείς να συνεχίσεις απλά. Αν όχι, το VS Code θα σου δείξει πού το Git είναι _μπλεγμένο_ και απλώς τροποποιείς τα επηρεασμένα αρχεία για να πεις ποιο περιεχόμενο είναι το πιο σωστό. - 💡 **Σύγχρονη εναλλακτική**: Σκεφτείτε να χρησιμοποιήσετε το `git rebase` για καθαρότερο ιστορικό: + 💡 **Σύγχρονη εναλλακτική**: Σκέψου να χρησιμοποιήσεις το `git rebase` για καθαρότερο ιστορικό: ```bash git rebase main ``` - Αυτό επαναλαμβάνει τις δεσμεύσεις σας πάνω από τον τελευταίο κλάδο `main`, δημιουργώντας ένα γραμμικό ιστορικό. + Αυτό αναπαράγει τα commits σου πάνω από τον τελευταίο κλάδο main, δημιουργώντας μια γραμμική ιστορία. -1. **Στείλτε τη δουλειά σας στο GitHub**. Η αποστολή της δουλειάς σας στο GitHub σημαίνει δύο πράγματα. Αποστολή του κ -🤞Ας ελπίσουμε ότι θα περάσουν όλοι οι έλεγχοι και οι ιδιοκτήτες του έργου θα συγχωνεύσουν τις αλλαγές σας στο έργο🤞 +1. **Στείλε τη δουλειά σου στο GitHub**. Το να στείλεις τη δουλειά σου στο GitHub σημαίνει δύο πράγματα. Να στείλεις τον κλάδο σου στο αποθετήριο σου και μετά να ανοίξεις ένα PR, Pull Request. -Ενημερώστε τον τρέχοντα τοπικό κλάδο εργασίας σας με όλες τις νέες δεσμεύσεις από τον αντίστοιχο απομακρυσμένο κλάδο στο GitHub: + ```bash + git push --set-upstream origin [branch-name] + ``` + + Η παραπάνω εντολή δημιουργεί τον κλάδο στο fork που έκανες. + +### 🤝 **Έλεγχος Δεξιοτήτων Συνεργασίας: Έτοιμος να Συνεργαστείς με Άλλους;** + +**Ας δούμε πώς νιώθεις σχετικά με τη συνεργασία:** +- Σε κάνει πια νόημα η ιδέα του forking και των pull requests; +- Ποιο είναι το ένα πράγμα σχετικά με τη δουλειά με κλάδους που θέλεις να εξασκήσεις περισσότερο; +- Πόσο άνετα νιώθεις να συνεισφέρεις σε έργο κάποιου άλλου; + +```mermaid +mindmap + root((Συνεργασία Git)) + Branching + Feature branches + Bug fix branches + Experimental work + Pull Requests + Code review + Discussion + Testing + Best Practices + Clear commit messages + Small focused changes + Good documentation +``` +> **Ενίσχυση αυτοπεποίθησης**: Κάθε προγραμματιστής που θαυμάζεις ήταν κάποτε αγχωμένος για το πρώτο του pull request. Η κοινότητα του GitHub είναι απίστευτα φιλόξενη για τους νέους! + +1. **Άνοιξε ένα PR**. Έπειτα, θες να ανοίξεις ένα PR. Το κάνεις πηγαίνοντας στο forked αποθετήριο στο GitHub. Θα δεις μια ένδειξη που θα ρωτάει αν θες να δημιουργήσεις νέο PR, πατάς εκεί και ανοίγει μια διεπαφή όπου μπορείς να αλλάξεις τον τίτλο του μηνύματος commit, να δώσεις μια πιο κατάλληλη περιγραφή. Τώρα ο διαχειριστής του αποθετηρίου που έκανες fork θα δει αυτό το PR και _σταυρωμένα δάχτυλα_ θα το εκτιμήσει και θα το _συγχωνεύσει_. Είσαι πια συνεισφέρων, γεια σου :) + + 💡 **Σύγχρονη συμβουλή**: Μπορείς επίσης να δημιουργήσεις PRs χρησιμοποιώντας το GitHub CLI: + ```bash + gh pr create --title "Your PR title" --body "Description of changes" + ``` + + 🔧 **Καλές πρακτικές για PRs**: + - Σύνδεση με σχετικά issues χρησιμοποιώντας λέξεις κλειδιά όπως "Fixes #123" + - Πρόσθεσε στιγμιότυπα για αλλαγές στην διεπαφή χρήστη + - Ζήτα συγκεκριμένους reviewers + - Χρησιμοποίησε draft PRs για δουλειά σε εξέλιξη + - Βεβαιώσου ότι όλα τα CI checks περάσαν πριν ζητήσεις ανασκόπηση +1. **Καθάρισμα**. Θεωρείται καλή πρακτική να _καθαρίζετε_ μετά από μια επιτυχημένη συγχώνευση ενός PR. Θέλετε να καθαρίσετε τόσο το τοπικό σας branch όσο και το branch που στείλατε στο GitHub. Πρώτα ας το διαγράψουμε τοπικά με την ακόλουθη εντολή: + + ```bash + git branch -d [branch-name] + ``` + + Βεβαιωθείτε ότι θα πάτε στη σελίδα του forked repo στο GitHub στη συνέχεια και θα αφαιρέσετε το απομακρυσμένο branch που μόλις στείλατε. + +`Pull request` φαίνεται ένας αστείος όρος γιατί στην πραγματικότητα θέλετε να στείλετε τις αλλαγές σας στο έργο. Αλλά ο διαχειριστής (ιδιοκτήτης του έργου) ή η βασική ομάδα πρέπει να εξετάσουν τις αλλαγές σας πριν τις συγχωνεύσουν με το "main" branch του έργου, οπότε στην πραγματικότητα ζητάτε μια απόφαση αλλαγής από έναν διαχειριστή. + +Ένα pull request είναι το μέρος όπου συγκρίνετε και συζητάτε τις διαφορές που εισάγονται σε ένα branch με αναθεωρήσεις, σχόλια, ενσωματωμένα τεστ και άλλα. Ένα καλό pull request ακολουθεί περίπου τους ίδιους κανόνες με ένα μήνυμα commit. Μπορείτε να προσθέσετε αναφορά σε ένα θέμα στο issue tracker, όταν η δουλειά σας για παράδειγμα διορθώνει ένα θέμα. Αυτό γίνεται με τη χρήση `#` ακολουθούμενο από τον αριθμό του θέματος σας. Για παράδειγμα `#97`. + +🤞 Σταυρώστε τα δάχτυλα να περάσουν όλοι οι έλεγχοι και ο ιδιοκτήτης(οι) του έργου να συγχωνεύσουν τις αλλαγές σας στο έργο 🤞 + +Ενημερώστε το τρέχον τοπικό σας branch εργασίας με όλες τις νέες καταχωρίσεις από το αντίστοιχο απομακρυσμένο branch στο GitHub: `git pull` -## Συμμετοχή σε έργα ανοιχτού κώδικα (Η ευκαιρία σας να κάνετε τη διαφορά!) +## Συνεισφορά στο Open Source (Η Ευκαιρία σας να Κάνετε Διαφορά!) -Είστε έτοιμοι για κάτι που θα σας αφήσει άφωνους; 🤯 Ας μιλήσουμε για τη συμμετοχή σε έργα ανοιχτού κώδικα – και μόνο που το σκέφτομαι, νιώθω ενθουσιασμό! +Είστε έτοιμοι για κάτι που θα σας μείνει πραγματικά αξέχαστο; 🤯 Ας μιλήσουμε για το πώς να συνεισφέρετε σε έργα ανοικτού κώδικα – και νιώθω ρίγος μόνο που το σκέφτομαι και το μοιράζομαι μαζί σας! -Αυτή είναι η ευκαιρία σας να γίνετε μέρος κάτι πραγματικά εξαιρετικού. Φανταστείτε να βελτιώνετε εργαλεία που χρησιμοποιούν εκατομμύρια προγραμματιστές καθημερινά ή να διορθώνετε ένα σφάλμα σε μια εφαρμογή που αγαπούν οι φίλοι σας. Δεν είναι απλώς ένα όνειρο – αυτό είναι η συμμετοχή σε έργα ανοιχτού κώδικα! +Αυτή είναι η ευκαιρία σας να γίνετε μέρος κάτι πραγματικά εξαιρετικού. Φανταστείτε να βελτιώνετε τα εργαλεία που χρησιμοποιούν εκατομμύρια προγραμματιστές καθημερινά, ή να διορθώνετε ένα σφάλμα σε μια εφαρμογή που αγαπούν οι φίλοι σας. Αυτό δεν είναι απλά ένα όνειρο – αυτή είναι η ουσία της συνεισφοράς στο open source! -Αυτό που με ενθουσιάζει κάθε φορά που το σκέφτομαι: κάθε εργαλείο που έχετε μάθει – ο επεξεργαστής κώδικα σας, τα frameworks που θα εξερευνήσουμε, ακόμα και ο browser που διαβάζετε αυτό – ξεκίνησε με κάποιον ακριβώς σαν εσάς να κάνει την πρώτη του συνεισφορά. Ο λαμπρός προγραμματιστής που δημιούργησε την αγαπημένη σας επέκταση του VS Code; Ήταν κάποτε αρχάριος που έκανε κλικ στο "create pull request" με τρεμάμενα χέρια, όπως ετοιμάζεστε να κάνετε κι εσείς. +Αυτό που με συγκινεί κάθε φορά που το σκέφτομαι είναι το εξής: κάθε εργαλείο που μαθαίνετε – ο κειμενογράφος κώδικα σας, τα πλαίσια που θα εξερευνήσουμε, ακόμα και ο περιηγητής που διαβάζετε αυτό το κείμενο – ξεκίνησε με κάποιον ακριβώς όπως εσείς να κάνει την πρώτη του συνεισφορά. Ο έξυπνος developer που έφτιαξε το αγαπημένο σας extension για το VS Code; Ήταν κάποτε ένας αρχάριος που πάτησε το "create pull request" με τρεμάμενα χέρια, ακριβώς όπως πρόκειται να κάνετε κι εσείς. -Και το πιο όμορφο μέρος: η κοινότητα ανοιχτού κώδικα είναι σαν τη μεγαλύτερη αγκαλιά του διαδικτύου. Τα περισσότερα έργα αναζητούν ενεργά νέους συμμετέχοντες και έχουν θέματα με ετικέτα "good first issue" ειδικά για άτομα σαν εσάς! Οι συντηρητές ενθουσιάζονται πραγματικά όταν βλέπουν νέους συμμετέχοντες γιατί θυμούνται τα δικά τους πρώτα βήματα. +Και το πιο όμορφο είναι: η κοινότητα του open source είναι σαν τη μεγαλύτερη αγκαλιά στο διαδίκτυο. Τα περισσότερα έργα ψάχνουν ενεργά για νέους συμμετέχοντες και έχουν ζητήματα με την ετικέτα "good first issue" ειδικά για ανθρώπους σαν εσάς! Οι διαχειριστές πραγματικά ενθουσιάζονται όταν βλέπουν νέους συνεισφέροντες, γιατί θυμούνται τα πρώτα τους βήματα. -Δεν μαθαίνετε απλώς να προγραμματίζετε εδώ – προετοιμάζεστε να γίνετε μέλος μιας παγκόσμιας οικογένειας δημιουργών που ξυπνούν κάθε μέρα σκεπτόμενοι "Πώς μπορούμε να κάνουμε τον ψηφιακό κόσμο λίγο καλύτερο;" Καλώς ήρθατε στην ομάδα! 🌟 +```mermaid +flowchart TD + A[🔍 Εξερευνήστε το GitHub] --> B[🏷️ Βρείτε "καλό πρώτο θέμα"] + B --> C[📖 Διαβάστε Οδηγίες Συμβολής] + C --> D[🍴 Fork Αποθετηρίου] + D --> E[💻 Ρυθμίστε το Τοπικό Περιβάλλον] + E --> F[🌿 Δημιουργήστε Κλάδο Χαρακτηριστικού] + F --> G[✨ Κάντε τη Συμβολή σας] + G --> H[🧪 Δοκιμάστε τις Αλλαγές σας] + H --> I[📝 Γράψτε Καθαρό Commit] + I --> J[📤 Push & Δημιουργία PR] + J --> K[💬 Αλληλεπιδράστε με τα Σχόλια] + K --> L[🎉 Συγχωνεύτηκε! Είστε Συνεργάτης!] + L --> M[🌟 Βρείτε το Επόμενο Θέμα] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Δεν μαθαίνετε απλά να κωδικοποιείτε εδώ – ετοιμάζεστε να γίνετε μέλη μιας παγκόσμιας οικογένειας δημιουργών που ξυπνάνε κάθε μέρα σκεπτόμενοι "Πώς μπορούμε να κάνουμε τον ψηφιακό κόσμο λίγο καλύτερο;" Καλώς ήρθατε στην παρέα! 🌟 -Πρώτα, ας βρούμε ένα αποθετήριο (ή **repo**) στο GitHub που σας ενδιαφέρει και στο οποίο θέλετε να συνεισφέρετε μια αλλαγή. Θα θέλετε να αντιγράψετε το περιεχόμενό του στον υπολογιστή σας. +Πρώτα, βρείτε ένα αποθετήριο (ή **repo**) στο GitHub που σας ενδιαφέρει και στο οποίο θέλετε να συνεισφέρετε μια αλλαγή. Θα θέλετε να αντιγράψετε τα περιεχόμενά του στον υπολογιστή σας. -✅ Ένας καλός τρόπος για να βρείτε αποθετήρια φιλικά προς αρχάριους είναι να [αναζητήσετε με την ετικέτα 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Ένας καλός τρόπος να βρείτε repos φιλικά για αρχάριους είναι να [αναζητήσετε με την ετικέτα 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Αντιγραφή ενός repo τοπικά](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.el.png) +![Αντιγραφή αποθετηρίου τοπικά](../../../../translated_images/clone_repo.5085c48d666ead57.el.png) -Υπάρχουν διάφοροι τρόποι αντιγραφής κώδικα. Ένας τρόπος είναι να "κλωνοποιήσετε" το περιεχόμενο του αποθετηρίου, χρησιμοποιώντας HTTPS, SSH ή το GitHub CLI (Command Line Interface). +Υπάρχουν διάφοροι τρόποι για να αντιγράψετε κώδικα. Ένας τρόπος είναι να "κλωνοποιήσετε" τα περιεχόμενα του αποθετηρίου, χρησιμοποιώντας HTTPS, SSH ή το GitHub CLI (Διεπαφή Γραμμής Εντολών). -Ανοίξτε το τερματικό σας και κλωνοποιήστε το αποθετήριο ως εξής: +Ανοίξτε το τερματικό σας και κλωνοποιήστε το αποθετήριο ως εξής: ```bash -# Using HTTPS +# Χρήση HTTPS git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Χρήση SSH (απαιτεί ρύθμιση κλειδιού SSH) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Χρήση GitHub CLI gh repo clone username/repository ``` - -Για να εργαστείτε στο έργο, μεταβείτε στον σωστό φάκελο: + +Για να εργαστείτε στο έργο, μεταβείτε στον σωστό φάκελο: `cd ProjectURL` -Μπορείτε επίσης να ανοίξετε ολόκληρο το έργο χρησιμοποιώντας: -- **[GitHub Codespaces](https://github.com/features/codespaces)** - Το περιβάλλον ανάπτυξης cloud του GitHub με VS Code στον browser -- **[GitHub Desktop](https://desktop.github.com/)** - Μια εφαρμογή GUI για λειτουργίες Git -- **[GitHub.dev](https://github.dev)** - Πατήστε το πλήκτρο `.` σε οποιοδήποτε repo του GitHub για να ανοίξετε το VS Code στον browser +Μπορείτε επίσης να ανοίξετε ολόκληρο το έργο χρησιμοποιώντας: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - Το περιβάλλον ανάπτυξης στο cloud του GitHub με VS Code στον περιηγητή +- **[GitHub Desktop](https://desktop.github.com/)** - Μια εφαρμογή GUI για εργασίες Git +- **[GitHub.dev](https://github.dev)** - Πατήστε το πλήκτρο `.` σε οποιοδήποτε repo στο GitHub για να ανοίξετε το VS Code μέσα στον περιηγητή - **VS Code** με την επέκταση GitHub Pull Requests -Τέλος, μπορείτε να κατεβάσετε τον κώδικα σε έναν συμπιεσμένο φάκελο. +Τέλος, μπορείτε να κατεβάσετε τον κώδικα σε συμπιεσμένο φάκελο. -### Μερικά ακόμα ενδιαφέροντα πράγματα για το GitHub +### Μερικά ακόμα ενδιαφέροντα για το GitHub -Μπορείτε να κάνετε star, watch και/ή "fork" σε οποιοδήποτε δημόσιο αποθετήριο στο GitHub. Μπορείτε να βρείτε τα αποθετήρια που έχετε κάνει star στο αναπτυσσόμενο μενού πάνω δεξιά. Είναι σαν να κάνετε σελιδοδείκτες, αλλά για κώδικα. +Μπορείτε να βάλετε αστέρι, να παρακολουθείτε και/ή να "fork" οποιοδήποτε δημόσιο αποθετήριο στο GitHub. Μπορείτε να βρείτε τα αποθετήρια με αστέρι στο μενού επάνω δεξιά. Είναι σαν σελιδοδείκτης, αλλά για κώδικα. -Τα έργα έχουν έναν παρακολουθητή θεμάτων, κυρίως στο GitHub στην καρτέλα "Issues", εκτός αν αναφέρεται διαφορετικά, όπου οι άνθρωποι συζητούν θέματα που σχετίζονται με το έργο. Και η καρτέλα Pull Requests είναι όπου οι άνθρωποι συζητούν και αξιολογούν αλλαγές που βρίσκονται σε εξέλιξη. +Τα έργα έχουν σύστημα αναφοράς θεμάτων (issue tracker), κυρίως στο GitHub στην καρτέλα "Issues" εκτός αν αναφέρεται διαφορετικά, όπου συζητούνται θέματα σχετικά με το έργο. Η καρτέλα Pull Requests είναι το μέρος όπου συζητούν και ελέγχουν τις αλλαγές που βρίσκονται σε εξέλιξη. -Τα έργα μπορεί επίσης να έχουν συζητήσεις σε φόρουμ, λίστες αλληλογραφίας ή κανάλια συνομιλίας όπως Slack, Discord ή IRC. +Τα έργα μπορεί επίσης να έχουν συζητήσεις σε φόρουμ, λίστες αλληλογραφίας, ή κανάλια συνομιλίας όπως Slack, Discord ή IRC. -🔧 **Σύγχρονα χαρακτηριστικά του GitHub**: -- **GitHub Discussions** - Ενσωματωμένο φόρουμ για συζητήσεις της κοινότητας -- **GitHub Sponsors** - Υποστήριξη συντηρητών οικονομικά -- **Security tab** - Αναφορές ευπάθειας και συμβουλές ασφαλείας -- **Actions tab** - Δείτε αυτοματοποιημένες ροές εργασίας και CI/CD pipelines -- **Insights tab** - Αναλύσεις για συνεισφέροντες, δεσμεύσεις και υγεία του έργου -- **Projects tab** - Ενσωματωμένα εργαλεία διαχείρισης έργων του GitHub +🔧 **Μοντέρνα χαρακτηριστικά του GitHub**: +- **GitHub Discussions** - Ενσωματωμένο φόρουμ για συζητήσεις κοινοτήτων +- **GitHub Sponsors** - Οικονομική υποστήριξη διαχειριστών +- **Καρτέλα Security** - Αναφορές ευπαθειών και συμβουλές ασφάλειας +- **Καρτέλα Actions** - Δείτε αυτοματοποιημένες ροές εργασιών και pipelines CI/CD +- **Καρτέλα Insights** - Αναλύσεις για τους συνεισφέροντες, τα commits και την υγεία του έργου +- **Καρτέλα Projects** - Τα ενσωματωμένα εργαλεία διαχείρισης έργου του GitHub -✅ Ρίξτε μια ματιά στο νέο σας αποθετήριο GitHub και δοκιμάστε μερικά πράγματα, όπως να επεξεργαστείτε ρυθμίσεις, να προσθέσετε πληροφορίες στο repo σας, να δημιουργήσετε ένα έργο (όπως έναν πίνακα Kanban) και να ρυθμίσετε το GitHub Actions για αυτοματοποίηση. Υπάρχουν πολλά που μπορείτε να κάνετε! +✅ Ρίξτε μια ματιά στο νέο σας αποθετήριο στο GitHub και δοκιμάστε μερικά πράγματα, όπως να επεξεργαστείτε ρυθμίσεις, να προσθέσετε πληροφορίες στο repo σας, να δημιουργήσετε ένα project (π.χ. πίνακα Kanban) και να ρυθμίσετε GitHub Actions για αυτοματοποίηση. Μπορείτε να κάνετε πολλά! --- -## 🚀 Πρόκληση +## 🚀 Πρόκληση -Εντάξει, ήρθε η ώρα να δοκιμάσετε τις νέες σας υπερδυνάμεις στο GitHub! 🚀 Εδώ είναι μια πρόκληση που θα σας κάνει να κατανοήσετε τα πάντα με τον πιο ικανοποιητικό τρόπο: +Εντάξει, ήρθε η ώρα να δοκιμάσετε τις φανταστικές νέες δυνατότητες του GitHub σας! 🚀 Ιδού μια πρόκληση που θα κάνει τα πάντα να «κουμπώσουν» με τον πιο ικανοποιητικό τρόπο: -Πάρτε έναν φίλο (ή εκείνο το μέλος της οικογένειας που πάντα σας ρωτάει τι κάνετε με όλα αυτά τα "πράγματα υπολογιστών") και ξεκινήστε μαζί μια συνεργατική περιπέτεια προγραμματισμού! Εδώ είναι που συμβαίνει η πραγματική μαγεία – δημιουργήστε ένα έργο, αφήστε τους να το κάνουν fork, δημιουργήστε μερικούς κλάδους και συγχωνεύστε αλλαγές σαν επαγγελματίες. +Πάρτε έναν φίλο (ή κάποιον από την οικογένεια που πάντα ρωτά τι κάνετε με όλα αυτά τα "πράγματα με τους υπολογιστές") και ξεκινήστε μια συνεργατική περιπέτεια κωδικοποίησης μαζί! Εδώ συμβαίνει η πραγματική μαγεία – δημιουργήστε ένα project, αφήστε να το «forkάρει» ο φίλος σας, κάντε μερικά branches και συγχωνεύστε αλλαγές σαν επαγγελματίες που γίνεστε. -Δεν θα σας πω ψέματα – πιθανότατα θα γελάσετε κάποια στιγμή (ειδικά όταν προσπαθήσετε και οι δύο να αλλάξετε την ίδια γραμμή), ίσως ξύσετε το κεφάλι σας με απορία, αλλά σίγουρα θα έχετε αυτές τις εκπληκτικές στιγμές "αχα!" που κάνουν όλη τη μάθηση να αξίζει τον κόπο. Επιπλέον, υπάρχει κάτι ξεχωριστό στο να μοιράζεστε αυτή την πρώτη επιτυχημένη συγχώνευση με κάποιον άλλο – είναι σαν μια μικρή γιορτή για το πόσο μακριά έχετε φτάσει! +Δεν θα πω ψέματα – πιθανότατα θα γελάσετε κάποια στιγμή (ειδικά όταν προσπαθείτε και οι δύο να αλλάξετε την ίδια γραμμή), μπορεί να ξύνουν το κεφάλι σας από σύγχυση, αλλά σίγουρα θα ζήσετε αυτές τις καταπληκτικές στιγμές «α, τώρα!» που κάνουν όλη τη μάθηση να αξίζει. Επιπλέον, υπάρχει κάτι ξεχωριστό στο να μοιράζεστε την πρώτη επιτυχημένη συγχώνευση με κάποιον άλλο – είναι σαν μικρός εορτασμός για την πορεία σας! -Δεν έχετε ακόμα συνεργάτη προγραμματισμού; Κανένα πρόβλημα! Η κοινότητα του GitHub είναι γεμάτη με απίστευτα φιλικούς ανθρώπους που θυμούνται πώς ήταν να είναι νέοι. Αναζητήστε αποθετήρια με ετικέτες "good first issue" – ουσιαστικά λένε "Γεια σας αρχάριοι, ελάτε να μάθετε μαζί μας!" Πόσο φοβερό είναι αυτό; +Δεν έχετε ακόμα παρέα για κώδικα; Κανένα πρόβλημα! Η κοινότητα του GitHub είναι γεμάτη από απίστευτα φιλικούς ανθρώπους που θυμούνται πώς ήταν να είσαι νέος. Ψάξτε για αποθετήρια με ετικέτες "good first issue" – βασικά σημαίνουν «Ελάτε αρχάριοι, μάθετε μαζί μας!» Πόσο τέλειο είναι αυτό; -## Κουίζ μετά το μάθημα -[Κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/en/) +## Quiz μετά το μάθημα +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) -## Ανασκόπηση & Συνεχίστε να Μαθαίνετε +## Επανεξέταση & Συνέχεια Μάθησης -Ουάου! 🎉 Κοιτάξτε σας – μόλις κατακτήσατε τα βασικά του GitHub σαν απόλυτοι πρωταθλητές! Αν νιώθετε λίγο γεμάτοι αυτή τη στιγμή, είναι απολύτως φυσιολογικό και ειλικρινά καλό σημάδι. Μόλις μάθατε εργαλεία που μου πήρε εβδομάδες να νιώσω άνετα όταν ξεκίνησα. +Ουφ! 🎉 Κοίτα τι κατάφερες – μόλις κυριάρχησες στα βασικά του GitHub σαν απόλυτος πρωταθλητής! Αν το μυαλό σου νιώθει λίγο γεμάτο αυτή τη στιγμή, είναι απόλυτα φυσιολογικό και ειλικρινά καλό σημάδι. Μόλις έμαθες εργαλεία που μου πήραν εβδομάδες για να νιώσω άνετα όταν ξεκίνησα. -Το Git και το GitHub είναι απίστευτα ισχυρά (πραγματικά ισχυρά), και κάθε προγραμματιστής που γνωρίζω – συμπεριλαμβανομένων αυτών που τώρα φαίνονται σαν μάγοι – έπρεπε να εξασκηθεί και να σκοντάψει λίγο πριν καταλάβει τα πάντα. Το γεγονός ότι ολοκληρώσατε αυτό το μάθημα σημαίνει ότι είστε ήδη στο δρόμο για να κατακτήσετε μερικά από τα πιο σημαντικά εργαλεία στο κιτ εργαλείων ενός προγραμματιστή. +Το Git και το GitHub είναι απίστευτα ισχυρά (εντελώς σοβαρά ισχυρά), και κάθε προγραμματιστής που ξέρω – ακόμα κι αυτοί που τώρα μοιάζουν μάγοι – έπρεπε να εξασκηθεί και να σκοντάψει λίγο προτού καταλάβει όλα όσα χρειάζεται. Το γεγονός ότι πέρασες αυτό το μάθημα σημαίνει ότι είσαι ήδη καθ’ οδόν να κυριαρχήσεις σε μερικά από τα πιο σημαντικά εργαλεία στο οπλοστάσιο ενός developer. -Ακολουθούν μερικοί απολύτως φανταστικοί πόροι για να σας βοηθήσουν να εξασκηθείτε και να γίνετε ακόμα πιο καταπληκτικοί: +Να μερικοί φανταστικοί πόροι για να κάνεις πρακτική και να γίνεις ακόμη πιο καταπληκτικός: -- [Οδηγός για τη συνεισφορά σε λογισμικό ανοιχτού κώδικα](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ο χάρτης σας για να κάνετε τη διαφορά -- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Κρατήστε το κοντά για γρήγορη αναφορά! +- [Οδηγός συνεισφοράς σε λογισμικό ανοικτού κώδικα](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ο χάρτης πορείας σου για να κάνεις τη διαφορά +- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Κράτα το κοντά σου για γρήγορη αναφορά! -Και θυμηθείτε: η εξάσκηση φέρνει πρόοδο, όχι τελειότητα! Όσο περισσότερο χρησιμοποιείτε το Git και το GitHub, τόσο πιο φυσικό θα γίνεται. Το GitHub έχει δημιουργήσει μερικά εκπληκτικά διαδραστικά μαθήματα που σας επιτρέπουν να εξασκηθείτε σε ένα ασφαλές περιβάλλον: +Και θυμήσου: η εξάσκηση φέρνει πρόοδο, όχι τελειότητα! Όσο περισσότερο χρησιμοποιείς το Git και το GitHub, τόσο πιο φυσικό γίνεται. Το GitHub έχει δημιουργήσει μερικά εκπληκτικά διαδραστικά μαθήματα που σε αφήνουν να κάνεις πρακτική σε ασφαλές περιβάλλον: -- [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github) -- [Επικοινωνία χρησιμοποιώντας Markdown](https://github.com/skills/communicate-using-markdown) -- [GitHub Pages](https://github.com/skills/github-pages) +- [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github) +- [Επικοινωνία με χρήση Markdown](https://github.com/skills/communicate-using-markdown) +- [GitHub Pages](https://github.com/skills/github-pages) - [Διαχείριση συγκρούσεων συγχώνευσης](https://github.com/skills/resolve-merge-conflicts) -**Αισθάνεστε περιπετειώδεις; Δοκιμάστε αυτά τα σύγχρονα εργαλεία:** -- [Τεκμηρίωση GitHub CLI](https://cli.github.com/manual/) – Για όταν θέλετε να νιώσετε σαν μάγος της γραμμής εντολών -- [Τεκμηρίωση GitHub Codespaces](https://docs.github.com/en/codespaces) – Προγραμματίστε στο cloud! -- [Τεκμηρίωση GitHub Actions](https://docs.github.com/en/actions) – Αυτοματοποιήστε τα πάντα -- [Καλές πρακτικές Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Αναβαθμίστε τις δεξιότητές σας στη ροή εργασίας +**Νιώθεις περιπετειώδης; Δες αυτά τα μοντέρνα εργαλεία:** +- [Τεκμηρίωση GitHub CLI](https://cli.github.com/manual/) – Για όταν θέλεις να νιώσεις μάγος της γραμμής εντολών +- [Τεκμηρίωση GitHub Codespaces](https://docs.github.com/en/codespaces) – Κάνε κώδικα στο cloud! +- [Τεκμηρίωση GitHub Actions](https://docs.github.com/en/actions) – Αυτοματοποιήστε τα πάντα +- [Καλές πρακτικές Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Ανεβάστε το επίπεδο του workflow σας ## Πρόκληση GitHub Copilot Agent 🚀 -Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση: +Χρησιμοποίησε τη λειτουργία Agent για να ολοκληρώσεις την παρακάτω πρόκληση: -**Περιγραφή:** Δημιουργήστε ένα συνεργατικό έργο ανάπτυξης ιστοσελίδων που να δείχνει ολόκληρη τη ροή εργασίας του GitHub που μάθατε σε αυτό το μάθημα. Αυτή η πρόκληση θα σας βοηθήσει να εξασκηθείτε στη δημιουργία αποθετηρίου, στις δυνατότητες συνεργασίας και στις σύγχρονες ροές εργασίας Git σε ένα πραγματικό σενάριο. +**Περιγραφή:** Δημιούργησε ένα συνεργατικό έργο ανάπτυξης ιστοσελίδας που να παρουσιάζει πλήρως το workflow του GitHub που έμαθες σε αυτό το μάθημα. Αυτή η πρόκληση θα σε βοηθήσει να εξασκηθείς στη δημιουργία αποθετηρίου, τις δυνατότητες συνεργασίας και τα σύγχρονα workflows του Git σε ένα πραγματικό σενάριο. -**Πρόκληση:** Δημιουργήστε ένα νέο δημόσιο αποθετήριο GitHub για ένα απλό έργο "Πόροι Ανάπτυξης Ιστοσελίδων". Το αποθετήριο πρέπει να περιλαμβάνει ένα καλά δομημένο αρχείο README.md που να απαριθμεί χρήσιμα εργαλεία και πόρους ανάπτυξης ιστοσελίδων, οργανωμένα ανά κατηγορίες (HTML, CSS, JavaScript, κ.λπ.). Ρυθμίστε το αποθετήριο με σωστά πρότυπα κοινότητας, συμπεριλαμβανομένων άδειας χρήσης, οδηγιών συνεισφοράς και κώδικα δεοντολογίας. Δημιουργήστε τουλάχιστον δύο κλάδους λειτουργιών: έναν για την προσθήκη πόρων CSS και έναν για πόρους JavaScript. Κάντε δεσμεύσεις σε κάθε κλάδο με περιγραφικά μηνύματα δεσμεύσεων και στη συνέχεια δημιουργήστε pull requests για να συγχωνεύσετε τις αλλαγές πίσω στο main. Ενεργοποιήστε χαρακτηριστικά του GitHub όπως τα Issues, Discussions και ρυθμίστε μια βασική ροή εργασίας GitHub Actions για αυτοματοποιημένους ελέγχους. +**Προτροπή:** Δημιούργησε ένα νέο δημόσιο αποθετήριο GitHub για ένα απλό έργο "Web Development Resources". Το αποθετήριο πρέπει να περιλαμβάνει ένα καλά δομημένο αρχείο README.md που να απαριθμεί χρήσιμα εργαλεία και πόρους για ανάπτυξη ιστοσελίδων, οργανωμένα κατά κατηγορίες (HTML, CSS, JavaScript κλπ). Ρύθμισε το αποθετήριο με τα κατάλληλα πρότυπα κοινότητας, συμπεριλαμβανομένης άδειας, κατευθυντήριων γραμμών συνεισφοράς και κώδικα δεοντολογίας. Δημιούργησε τουλάχιστον δύο feature branches: ένα για προσθήκη πόρων CSS και ένα για πόρους JavaScript. Κάνε commits σε κάθε branch με περιγραφικά μηνύματα commit, και μετά δημιούργησε pull requests για να συγχωνεύσεις τις αλλαγές πίσω στο main. Ενεργοποίησε λειτουργίες GitHub όπως Issues, Discussions και ρύθμισε μια βασική ροή εργασίας GitHub Actions για αυτοματοποιημένους ελέγχους. -## Εργασία +## Ανάθεση -Η αποστολή σας, αν επιλέξετε να την αποδεχτείτε: Ολοκληρώστε το μάθημα [Εισαγωγή στο GitHub](https://github.com/skills/introduction-to-github) στο GitHub Skills. Αυτό το διαδραστικό μάθημα θα σας επιτρέψει να εξασκηθείτε σε όλα όσα μάθατε σε ένα ασφαλές, καθοδηγούμενο περιβάλλον. Επιπλέον, θα λάβετε ένα ωραίο σήμα όταν το ολοκληρώσετε! 🏅 +Η αποστολή σου, αν επιλέξεις να την δεχτείς: Ολοκλήρωσε το μάθημα [Introduction to GitHub](https://github.com/skills/introduction-to-github) στο GitHub Skills. Αυτό το διαδραστικό μάθημα θα σε αφήσει να εξασκηθείς σε όλα όσα έμαθες σε ένα ασφαλές, καθοδηγούμενο περιβάλλον. Επιπλέον, θα κερδίσεις ένα ωραίο σήμα όταν το τελειώσεις! 🏅 -**Αισθάνεστε έτοιμοι για περισσότερες προκλήσεις;** -- Ρυθμίστε τον έλεγχο ταυτότητας SSH για τον λογαριασμό σας στο GitHub (τέλος οι κωδικοί!) -- Δοκιμάστε να χρησιμοποιήσετε το GitHub CLI για τις καθημερινές σας λειτουργίες Git -- Δημιουργήστε ένα αποθετήριο με μια ροή εργασίας GitHub Actions -- Εξερευνήστε το GitHub Codespaces ανοίγοντας αυτό το ίδιο αποθετήριο σε έναν επεξεργαστή βασισμένο στο cloud +**Νιώθεις έτοιμος για περισσότερες προκλήσεις;** +- Ρύθμισε αυθεντικοποίηση SSH για τον λογαριασμό σου στο GitHub (τέλος οι κωδικοί!) +- Δοκίμασε να χρησιμοποιήσεις το GitHub CLI για τις καθημερινές λειτουργίες Git +- Δημιούργησε ένα αποθετήριο με ροή εργασίας GitHub Actions +- Εξερεύνησε το GitHub Codespaces ανοίγοντας αυτό ακριβώς το αποθετήριο σε έναν επεξεργαστή στο cloud + +--- -Θυμηθείτε: κάθε ειδικός ήταν κάποτε αρχάριος. Το έχετε! 💪 +## 🚀 Το Χρονοδιάγραμμά σου για την Ικανότητα στο GitHub + +### ⚡ **Τι Μπορείς να Κάνεις στα Επόμενα 5 Λεπτά** +- [ ] Βάλε αστέρι σε αυτό το αποθετήριο και σε 3 άλλα έργα που σε ενδιαφέρουν +- [ ] Ρύθμισε τον έλεγχο ταυτότητας δύο παραγόντων στο λογαριασμό σου στο GitHub +- [ ] Δημιούργησε ένα απλό README για το πρώτο σου αποθετήριο +- [ ] Ακολούθησε 5 προγραμματιστές που σε εμπνέουν + +### 🎯 **Τι Μπορείς να Επιτύχεις Αυτή την Ώρα** +- [ ] Ολοκλήρωσε το quiz μετά το μάθημα και σκέψου το ταξίδι σου στο GitHub +- [ ] Ρύθμισε κλειδιά SSH για αυθεντικοποίηση χωρίς κωδικό +- [ ] Κάνε το πρώτο σου ουσιαστικό commit με εξαιρετικό μήνυμα +- [ ] Εξερεύνησε την καρτέλα "Explore" του GitHub για να ανακαλύψεις τάσεις +- [ ] Πρακτική στο forkάρισμα ενός αποθετηρίου και στην αλλαγή ενός μικρού κομματιού κώδικα + +### 📅 **Η Περιπέτειά σου στο GitHub για Μία Εβδομάδα** +- [ ] Ολοκλήρωσε τα μαθήματα GitHub Skills (Introduction to GitHub, Markdown) +- [ ] Κάνε το πρώτο σου pull request σε ένα έργο ανοικτού κώδικα +- [ ] Ρύθμισε έναν ιστότοπο GitHub Pages για να παρουσιάσεις τη δουλειά σου +- [ ] Συμμετοχή στις συζητήσεις GitHub Discussions για έργα που σε ενδιαφέρουν +- [ ] Δημιούργησε ένα αποθετήριο με σωστά πρότυπα κοινότητας (README, Άδεια κλπ) +- [ ] Δοκίμασε το GitHub Codespaces για ανάπτυξη στο cloud + +### 🌟 **Η Μεταμόρφωσή σου σε Έναν Μήνα** +- [ ] Συνεισφέρε σε 3 διαφορετικά έργα ανοικτού κώδικα +- [ ] Γίνε μέντορας σε έναν νέο χρήστη του GitHub (δώσε πίσω!) +- [ ] Ρύθμισε αυτοματοποιημένες ροές εργασίας με GitHub Actions +- [ ] Δημιούργησε ένα portfolio που να δείχνει τις συνεισφορές σου στο GitHub +- [ ] Συμμετοχή σε Hacktoberfest ή παρόμοια κοινοτικά events +- [ ] Γίνε διαχειριστής δικού σου έργου στο οποίο συμβάλλουν και άλλοι + +### 🎓 **Τελικός Έλεγχος Ικανότητας στο GitHub** + +**Γιόρτασε το πόσο μακριά έφτασες:** +- Ποιο είναι το αγαπημένο σου χαρακτηριστικό στο GitHub; +- Ποια λειτουργία συνεργασίας σε ενθουσιάζει περισσότερο; +- Πόσο σίγουρος νιώθεις για τη συνεισφορά σου στο open source τώρα; +- Ποιο είναι το πρώτο έργο που θέλεις να συνεισφέρεις; + +```mermaid +journey + title Το Ταξίδι Αυτοπεποίθησης στο GitHub Σου + section Σήμερα + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section Αυτή την Εβδομάδα + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section Επόμενος Μήνας + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` +> 🌍 **Καλώς ήρθες στην παγκόσμια κοινότητα προγραμματιστών!** Τώρα έχεις τα εργαλεία για να συνεργαστείς με εκατομμύρια προγραμματιστές παγκοσμίως. Η πρώτη σου συνεισφορά μπορεί να φαίνεται μικρή, αλλά θυμήσου – κάθε μεγάλο έργο ανοικτού κώδικα ξεκίνησε με κάποιον να κάνει το πρώτο του commit. Το ζήτημα δεν είναι αν θα αφήσεις το στίγμα σου, αλλά ποιο εκπληκτικό έργο θα ωφεληθεί πρώτα από τη μοναδική σου οπτική! 🚀 + +Θυμήσου: κάθε εμπειρογνώμονας ήταν κάποτε αρχάριος. Μπορείς! 💪 --- -**Αποποίηση ευθύνης**: -Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. \ No newline at end of file + +**Αποποίηση Ευθυνών**: +Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. + \ No newline at end of file diff --git a/translations/el/1-getting-started-lessons/3-accessibility/README.md b/translations/el/1-getting-started-lessons/3-accessibility/README.md index 71104db73..42e341607 100644 --- a/translations/el/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/el/1-getting-started-lessons/3-accessibility/README.md @@ -1,167 +1,326 @@ # Δημιουργία Προσβάσιμων Ιστοσελίδων -![Όλα για την Προσβασιμότητα](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.el.png) -> Σκίτσο από την [Tomomi Imura](https://twitter.com/girlie_mac) +![Όλα για την Προσβασιμότητα](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.el.png) +> Σχεδιάγραμμα από [Tomomi Imura](https://twitter.com/girlie_mac) -## Ερωτηματολόγιο πριν το μάθημα -[Ερωτηματολόγιο πριν το μάθημα](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Η Περιπέτεια Μάθησης Προσβασιμότητάς Σας + section Θεμέλιο + Κατανόηση Χρηστών: 5: You + Εργαλεία Δοκιμών: 4: You + Αξιώματα POUR: 5: You + section Ανάπτυξη Δεξιοτήτων + Σημασιολογικό HTML: 4: You + Οπτικός Σχεδιασμός: 5: You + Τεχνικές ARIA: 4: You + section Εξάσκηση Επαγγελματισμού + Πλοήγηση με Πληκτρολόγιο: 5: You + Προσβασιμότητα Φορμών: 4: You + Πραγματικές Δοκιμές: 5: You +``` +## Προ-διάλεξη Κουίζ +[Προ-διάλεξη κουίζ](https://ff-quizzes.netlify.app/web/) -> Η δύναμη του Ιστού βρίσκεται στην καθολικότητά του. Η πρόσβαση από όλους, ανεξαρτήτως αναπηρίας, είναι μια ουσιώδης πτυχή. +> Η δύναμη του Διαδικτύου έγκειται στην καθολικότητά του. Η πρόσβαση από όλους ανεξαρτήτως αναπηρίας αποτελεί ουσιώδες ζήτημα. > -> \- Sir Timothy Berners-Lee, Διευθυντής του W3C και εφευρέτης του Παγκόσμιου Ιστού +> \- Sir Timothy Berners-Lee, Διευθυντής W3C και εφευρέτης του Παγκόσμιου Ιστού -Κάτι που ίσως σας εκπλήξει: όταν δημιουργείτε προσβάσιμες ιστοσελίδες, δεν βοηθάτε μόνο άτομα με αναπηρίες—στην πραγματικότητα κάνετε τον Ιστό καλύτερο για όλους! +Ιδού κάτι που μπορεί να σας εκπλήξει: όταν δημιουργείτε προσβάσιμες ιστοσελίδες, δεν βοηθάτε μόνο άτομα με αναπηρίες—στην πραγματικότητα κάνετε τον ιστό καλύτερο για όλους! -Έχετε παρατηρήσει ποτέ εκείνες τις ράμπες στις γωνίες των δρόμων; Αρχικά σχεδιάστηκαν για αναπηρικά αμαξίδια, αλλά τώρα βοηθούν άτομα με καροτσάκια, εργαζόμενους με καρότσια, ταξιδιώτες με βαλίτσες και ποδηλάτες. Έτσι ακριβώς λειτουργεί ο προσβάσιμος σχεδιασμός ιστοσελίδων—λύσεις που βοηθούν μια ομάδα συχνά καταλήγουν να ωφελούν όλους. Εντυπωσιακό, έτσι; +Έχετε ποτέ προσέξει εκείνες τις ράμπες σε γωνίες δρόμων; Αρχικά σχεδιάστηκαν για αναπηρικά αμαξίδια, αλλά τώρα βοηθούν ανθρώπους με καρότσια μωρού, διανομείς με καροτσάκια, ταξιδιώτες με ρόδες αποσκευών και ποδηλάτες. Έτσι ακριβώς λειτουργεί ο σχεδιασμός προσβάσιμου ιστού—οι λύσεις που βοηθούν μια ομάδα συχνά ωφελούν όλους. Πολύ ωραίο, έτσι δεν είναι; -Σε αυτό το μάθημα, θα εξερευνήσουμε πώς να δημιουργούμε ιστοσελίδες που πραγματικά λειτουργούν για όλους, ανεξάρτητα από τον τρόπο που περιηγούνται στον Ιστό. Θα ανακαλύψετε πρακτικές τεχνικές που ήδη περιλαμβάνονται στα πρότυπα του Ιστού, θα εξασκηθείτε με εργαλεία δοκιμών και θα δείτε πώς η προσβασιμότητα κάνει τις ιστοσελίδες σας πιο εύχρηστες για όλους τους χρήστες. +Σε αυτό το μάθημα, θα εξερευνήσουμε πώς να δημιουργούμε ιστοσελίδες που πραγματικά δουλεύουν για όλους, ανεξάρτητα από τον τρόπο που περιηγούνται στο διαδίκτυο. Θα ανακαλύψετε πρακτικές τεχνικές που είναι ήδη ενσωματωμένες στα πρότυπα του ιστού, θα δουλέψετε με εργαλεία δοκιμών, και θα δείτε πώς η προσβασιμότητα κάνει τις ιστοσελίδες σας πιο εύχρηστες για όλους τους χρήστες. -Μέχρι το τέλος αυτού του μαθήματος, θα έχετε την αυτοπεποίθηση να ενσωματώσετε την προσβασιμότητα στη ροή εργασίας σας ως προγραμματιστής. Έτοιμοι να εξερευνήσετε πώς οι προσεκτικές επιλογές σχεδιασμού μπορούν να ανοίξουν τον Ιστό σε δισεκατομμύρια χρήστες; Πάμε! +Στο τέλος αυτού του μαθήματος, θα έχετε την αυτοπεποίθηση να κάνετε την προσβασιμότητα φυσικό κομμάτι της ροής εργασίας σας. Έτοιμοι να εξερευνήσετε πώς οι προσεκτικές επιλογές σχεδιασμού μπορούν να ανοίξουν τον ιστό σε δισεκατομμύρια χρήστες; Ας ξεκινήσουμε! +```mermaid +mindmap + root((Προσβασιμότητα Ιστού)) + Users + Αναγνώστες οθόνης + Πλοήγηση πληκτρολογίου + Φωνητικός έλεγχος + Μεγέθυνση + Technologies + Σημασιολογία HTML + Χαρακτηριστικά ARIA + Ενδείκτες εστίασης CSS + Συμβάντα πληκτρολογίου + Benefits + Ευρύτερο κοινό + Καλύτερο SEO + Νομική συμμόρφωση + Καθολικός σχεδιασμός + Testing + Αυτόματα εργαλεία + Χειροκίνητο τεστ + Ανατροφοδότηση χρηστών + Πραγματική βοηθητική τεχνολογία +``` > Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! -## Κατανόηση των Τεχνολογιών Υποβοήθησης +## Κατανόηση Τεχνολογιών Βοήθειας -Πριν ξεκινήσουμε τον προγραμματισμό, ας αφιερώσουμε λίγο χρόνο για να κατανοήσουμε πώς οι άνθρωποι με διαφορετικές ικανότητες βιώνουν τον Ιστό. Δεν είναι απλώς θεωρία—η κατανόηση αυτών των πραγματικών μοτίβων πλοήγησης θα σας κάνει πολύ καλύτερο προγραμματιστή! +Πριν περάσουμε στον κώδικα, ας αφιερώσουμε λίγο χρόνο για να καταλάβουμε πώς τα άτομα με διαφορετικές ικανότητες βιώνουν τον ιστό. Δεν είναι μόνο θεωρία—η κατανόηση αυτών των πραγματικών προτύπων πλοήγησης θα σας κάνει καλύτερο προγραμματιστή! -Οι τεχνολογίες υποβοήθησης είναι εκπληκτικά εργαλεία που βοηθούν άτομα με αναπηρίες να αλληλεπιδρούν με ιστοσελίδες με τρόπους που ίσως σας εκπλήξουν. Μόλις κατανοήσετε πώς λειτουργούν αυτές οι τεχνολογίες, η δημιουργία προσβάσιμων εμπειριών στον Ιστό γίνεται πολύ πιο διαισθητική. Είναι σαν να μαθαίνετε να βλέπετε τον κώδικά σας μέσα από τα μάτια κάποιου άλλου. +Οι τεχνολογίες βοήθειας είναι εντυπωσιακά εργαλεία που βοηθούν άτομα με αναπηρίες να αλληλεπιδράσουν με ιστοσελίδες με τρόπους που μπορεί να σας εκπλήξουν. Μόλις μάθετε πώς λειτουργούν αυτές οι τεχνολογίες, η δημιουργία προσβάσιμων εμπειριών γίνεται πολύ πιο διαισθητική. Είναι σαν να μαθαίνετε να βλέπετε τον κώδικά σας μέσα από τα μάτια κάποιου άλλου. -### Αναγνώστες οθόνης +### Ανάγνωστες οθόνης -[Οι αναγνώστες οθόνης](https://en.wikipedia.org/wiki/Screen_reader) είναι αρκετά εξελιγμένες τεχνολογίες που μετατρέπουν το ψηφιακό κείμενο σε φωνή ή έξοδο σε σύστημα Braille. Ενώ χρησιμοποιούνται κυρίως από άτομα με προβλήματα όρασης, είναι επίσης πολύ χρήσιμοι για χρήστες με μαθησιακές δυσκολίες όπως η δυσλεξία. +[Οι ανάγνωστες οθόνης](https://en.wikipedia.org/wiki/Screen_reader) είναι αρκετά προηγμένα τεχνολογικά εργαλεία που μετατρέπουν ψηφιακό κείμενο σε ομιλία ή έξοδο Braille. Αν και χρησιμοποιούνται κυρίως από άτομα με οπτικές αναπηρίες, είναι επίσης πολύ χρήσιμοι για χρήστες με μαθησιακές δυσκολίες όπως η δυσλεξία. -Μου αρέσει να σκέφτομαι έναν αναγνώστη οθόνης σαν έναν πολύ έξυπνο αφηγητή που διαβάζει ένα βιβλίο για εσάς. Διαβάζει το περιεχόμενο δυνατά με λογική σειρά, ανακοινώνει διαδραστικά στοιχεία όπως "κουμπί" ή "σύνδεσμος" και παρέχει συντομεύσεις πληκτρολογίου για να περιηγηθείτε σε μια σελίδα. Αλλά εδώ είναι το θέμα—οι αναγνώστες οθόνης μπορούν να κάνουν τη μαγεία τους μόνο αν δημιουργούμε ιστοσελίδες με σωστή δομή και ουσιαστικό περιεχόμενο. Εδώ μπαίνετε εσείς ως προγραμματιστής! +Μου αρέσει να φαντάζομαι έναν ανάγνωστη οθόνης ως έναν πολύ έξυπνο αφηγητή που σας διαβάζει ένα βιβλίο. Διαβάζει το περιεχόμενο δυνατά με λογική σειρά, ανακοινώνει αλληλεπιδραστικά στοιχεία όπως "κουμπί" ή "σύνδεσμος," και παρέχει συντομεύσεις πληκτρολογίου για γρήγορη μετακίνηση στη σελίδα. Αλλά το θέμα είναι—οι ανάγνωστες οθόνης μπορούν να λειτουργήσουν μόνο αν κατασκευάσουμε ιστοσελίδες με σωστή δομή και ουσιαστικό περιεχόμενο. Κι εκεί μπαίνετε εσείς ως προγραμματιστής! -**Δημοφιλείς αναγνώστες οθόνης σε διάφορες πλατφόρμες:** +**Δημοφιλείς ανάγνωστες οθόνης σε πλατφόρμες:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (δωρεάν και πιο δημοφιλής), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (ενσωματωμένος) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (ενσωματωμένος και πολύ ικανός) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (ενσωματωμένος) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (δωρεάν και ανοιχτού κώδικα) -**Πώς οι αναγνώστες οθόνης πλοηγούνται στο περιεχόμενο του Ιστού:** +**Πώς οι ανάγνωστες οθόνης πλοηγούνται στο web:** -Οι αναγνώστες οθόνης παρέχουν πολλαπλές μεθόδους πλοήγησης που κάνουν την περιήγηση αποτελεσματική για έμπειρους χρήστες: -- **Σειριακή ανάγνωση**: Διαβάζει το περιεχόμενο από πάνω προς τα κάτω, όπως ακολουθώντας ένα βιβλίο -- **Πλοήγηση με σημεία αναφοράς**: Μεταπήδηση μεταξύ τμημάτων της σελίδας (κεφαλίδα, πλοήγηση, κύριο μέρος, υποσέλιδο) -- **Πλοήγηση με επικεφαλίδες**: Παράκαμψη μεταξύ επικεφαλίδων για κατανόηση της δομής της σελίδας -- **Λίστες συνδέσμων**: Δημιουργία λίστας όλων των συνδέσμων για γρήγορη πρόσβαση -- **Έλεγχοι φόρμας**: Πλοήγηση απευθείας μεταξύ πεδίων εισαγωγής και κουμπιών +Οι ανάγνωστες οθόνης παρέχουν πολλαπλές μεθόδους πλοήγησης που κάνουν την περιήγηση αποτελεσματική για έμπειρους χρήστες: +- **Σειριακή ανάγνωση**: Διαβάζει το περιεχόμενο από πάνω προς τα κάτω, όπως ένα βιβλίο +- **Πλοήγηση με Landmarks**: Μεταπήδηση ανάμεσα σε τμήματα σελίδας (επικεφαλίδα, πλοήγηση, κύριο περιεχόμενο, υποσέλιδο) +- **Πλοήγηση ανά τίτλους**: Παράλειψη μεταξύ επικεφαλίδων για κατανόηση της δομής της σελίδας +- **Λίστες συνδέσμων**: Δημιουργία λίστας με όλους τους συνδέσμους για γρήγορη πρόσβαση +- **Έλεγχοι φορμών**: Πλοήγηση απευθείας μεταξύ πεδίων εισόδου και κουμπιών -> 💡 **Κάτι που με εντυπωσίασε**: Το 68% των χρηστών αναγνωστών οθόνης πλοηγούνται κυρίως μέσω επικεφαλίδων ([Έρευνα WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Αυτό σημαίνει ότι η δομή των επικεφαλίδων σας είναι σαν ένας χάρτης για τους χρήστες—όταν το κάνετε σωστά, βοηθάτε κυριολεκτικά τους ανθρώπους να βρουν τον δρόμο τους γύρω από το περιεχόμενό σας πιο γρήγορα! +> 💡 **Κάτι που με εντυπωσίασε**: Το 68% των χρηστών ανάγνωσης οθόνης πλοηγούνται κυρίως μέσω των επικεφαλίδων ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Αυτό σημαίνει ότι η δομή των επικεφαλίδων σας είναι σαν χάρτης για τους χρήστες—όταν την κάνετε σωστά, βοηθάτε κυριολεκτικά τους ανθρώπους να βρουν πιο γρήγορα το δρόμο στο περιεχόμενό σας! -### Δημιουργία της ροής εργασίας δοκιμών σας +### Δημιουργία ροής εργασίας δοκιμών -Έχουμε καλά νέα—η αποτελεσματική δοκιμή προσβασιμότητας δεν χρειάζεται να είναι συντριπτική! Θα θέλετε να συνδυάσετε αυτοματοποιημένα εργαλεία (είναι φανταστικά για να εντοπίζουν προφανή προβλήματα) με κάποιες χειροκίνητες δοκιμές. Ακολουθεί μια συστηματική προσέγγιση που, κατά τη γνώμη μου, εντοπίζει τα περισσότερα προβλήματα χωρίς να καταναλώνει όλη σας την ημέρα: +Έχω καλά νέα—η αποτελεσματική δοκιμή προσβασιμότητας δεν χρειάζεται να είναι συντριπτική! Θα θέλετε να συνδυάσετε αυτοματοποιημένα εργαλεία (είναι φανταστικά στο να εντοπίζουν προφανή προβλήματα) με λίγες πρακτικές δοκιμές. Να μια συστηματική προσέγγιση που έχω βρει ότι πιάνει τα περισσότερα ζητήματα χωρίς να σας τρώει όλη την ημέρα: -**Βασική ροή εργασίας χειροκίνητων δοκιμών:** +**Βασική ροή εργασίας χειροκίνητης δοκιμής:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Ξεκινήστε τη Δοκιμή] --> B{⌨️ Πλοήγηση με Πληκτρολόγιο} + B --> C[Πλοηγηθείτε με Tab σε όλα τα διαδραστικά στοιχεία] + C --> D{🎧 Δοκιμή Αναγνώστη Οθόνης} + D --> E[Δοκιμή με NVDA/VoiceOver] + E --> F{🔍 Δοκιμή Μεγέθυνσης} + F --> G[Μεγέθυνση στο 200% και δοκιμή λειτουργικότητας] + G --> H{🎨 Έλεγχος Χρώματος/Αντίθεσης} + H --> I[Επιβεβαιώστε ότι όλα τα κείμενα πληρούν τα ποσοστά αντίθεσης] + I --> J{👁️ Διαχείριση Εστίασης} + J --> K[Βεβαιωθείτε ότι οι δείκτες εστίασης είναι ορατοί] + K --> L[✅ Ολοκλήρωση Δοκιμής] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` +**Λίστα ελέγχου βήμα προς βήμα:** +1. **Πλοήγηση με πληκτρολόγιο**: Χρησιμοποιήστε μόνο Tab, Shift+Tab, Enter, Space και τα βελάκια +2. **Δοκιμή με ανάγνωση οθόνης**: Ενεργοποιήστε NVDA, VoiceOver ή Narrator και πλοηγηθείτε με κλειστά μάτια +3. **Δοκιμή μεγέθυνσης**: Δοκιμάστε στα επίπεδα μεγέθυνσης 200% και 400% +4. **Έλεγχος αντίθεσης χρωμάτων**: Ελέγξτε όλο το κείμενο και τα στοιχεία UI +5. **Δοκιμή εμφάνισης εστίασης**: Βεβαιωθείτε ότι όλα τα διαδραστικά στοιχεία έχουν ορατές καταστάσεις εστίασης -**Λίστα ελέγχου βήμα προς βήμα για δοκιμές:** -1. **Πλοήγηση με πληκτρολόγιο**: Χρησιμοποιήστε μόνο Tab, Shift+Tab, Enter, Space και πλήκτρα βέλους -2. **Δοκιμή με αναγνώστη οθόνης**: Ενεργοποιήστε το NVDA, VoiceOver ή Narrator και πλοηγηθείτε με κλειστά μάτια -3. **Δοκιμή ζουμ**: Δοκιμάστε σε επίπεδα ζουμ 200% και 400% -4. **Επαλήθευση αντίθεσης χρωμάτων**: Ελέγξτε όλο το κείμενο και τα στοιχεία διεπαφής χρήστη -5. **Δοκιμή ένδειξης εστίασης**: Βεβαιωθείτε ότι όλα τα διαδραστικά στοιχεία έχουν ορατές καταστάσεις εστίασης - -✅ **Ξεκινήστε με το Lighthouse**: Ανοίξτε τα DevTools του προγράμματος περιήγησης σας, εκτελέστε έναν έλεγχο προσβασιμότητας Lighthouse και χρησιμοποιήστε τα αποτελέσματα για να καθοδηγήσετε τις περιοχές εστίασης των χειροκίνητων δοκιμών σας. +✅ **Ξεκινήστε με το Lighthouse**: Ανοίξτε τα DevTools του προγράμματος περιήγησής σας, εκτελέστε έλεγχο προσβασιμότητας με το Lighthouse και μετά χρησιμοποιήστε τα αποτελέσματα για να καθοδηγήσετε τις χειροκίνητες δοκιμές σας. -### Εργαλεία ζουμ και μεγέθυνσης +### Εργαλεία μεγέθυνσης και ζουμ -Ξέρετε πώς μερικές φορές κάνετε ζουμ στο τηλέφωνό σας όταν το κείμενο είναι πολύ μικρό ή στραβώνετε τα μάτια σας στην οθόνη του φορητού υπολογιστή σας σε έντονο φως; Πολλοί χρήστες βασίζονται σε εργαλεία μεγέθυνσης για να κάνουν το περιεχόμενο ευανάγνωστο κάθε μέρα. Αυτό περιλαμβάνει άτομα με χαμηλή όραση, ηλικιωμένους και οποιονδήποτε έχει προσπαθήσει να διαβάσει μια ιστοσελίδα σε εξωτερικό χώρο. +Ξέρετε πώς μερικές φορές τσιμπάτε με τα δάχτυλα στο κινητό σας για να μεγεθύνετε όταν το κείμενο είναι πολύ μικρό, ή σφίγγεστε για να διαβάσετε την οθόνη του λάπτοπ σε έντονο φως; Πολλοί χρήστες βασίζονται σε εργαλεία μεγέθυνσης για να κάνουν το περιεχόμενο αναγνώσιμο καθημερινά. Αυτό συμπεριλαμβάνει ανθρώπους με μειωμένη όραση, ηλικιωμένους και οποιονδήποτε έχει προσπαθήσει να διαβάσει μια ιστοσελίδα σε εξωτερικούς χώρους. -Οι σύγχρονες τεχνολογίες ζουμ έχουν εξελιχθεί πέρα από το απλό μεγάλωμα. Η κατανόηση του τρόπου λειτουργίας αυτών των εργαλείων θα σας βοηθήσει να δημιουργήσετε ευέλικτα σχέδια που παραμένουν λειτουργικά και ελκυστικά σε οποιοδήποτε επίπεδο μεγέθυνσης. +Οι σύγχρονες τεχνολογίες ζουμ έχουν εξελιχθεί πέρα από το απλό μεγάλωμα. Η κατανόηση του πώς λειτουργούν αυτά τα εργαλεία θα σας βοηθήσει να δημιουργήσετε ευέλικτα σχέδια που παραμένουν λειτουργικά και όμορφα σε οποιοδήποτε επίπεδο μεγέθυνσης. -**Σύγχρονες δυνατότητες ζουμ προγραμμάτων περιήγησης:** -- **Ζουμ σελίδας**: Μεγέθυνση όλου του περιεχομένου αναλογικά (κείμενο, εικόνες, διάταξη) - αυτή είναι η προτιμώμενη μέθοδος -- **Ζουμ μόνο κειμένου**: Αύξηση μεγέθους γραμματοσειράς διατηρώντας την αρχική διάταξη -- **Ζουμ με τσίμπημα**: Υποστήριξη χειρονομιών κινητών για προσωρινή μεγέθυνση -- **Υποστήριξη προγραμμάτων περιήγησης**: Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν ζουμ έως 500% χωρίς να διακόπτεται η λειτουργικότητα +**Δυνατότητες μεγέθυνσης σύγχρονων προγραμμάτων περιήγησης:** +- **Μεγέθυνση σελίδας**: Κλιμακώνει όλα τα περιεχόμενα αναλογικά (κείμενο, εικόνες, διάταξη) - αυτή είναι η προτιμώμενη μέθοδος +- **Ζουμ μόνο κειμένου**: Αυξάνει το μέγεθος γραμματοσειράς διατηρώντας την αρχική διάταξη +- **Pinch-to-zoom**: Υποστήριξη χειρονομιών σε κινητές συσκευές για προσωρινή μεγέθυνση +- **Υποστήριξη προγραμμάτων περιήγησης**: Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν ζουμ μέχρι 500% χωρίς να διακόπτουν τη λειτουργία **Εξειδικευμένο λογισμικό μεγέθυνσης:** -- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ενσωματωμένο), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) -- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ενσωματωμένο με προηγμένες λειτουργίες) +- **Windows**: [Μεγεθυντικός φακός](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (ενσωματωμένος), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (ενσωματωμένος με προηγμένες λειτουργίες) -> ⚠️ **Σχεδιαστική Σκέψη**: Οι οδηγίες WCAG απαιτούν το περιεχόμενο να παραμένει λειτουργικό όταν μεγεθύνεται έως 200%. Σε αυτό το επίπεδο, η οριζόντια κύλιση πρέπει να είναι ελάχιστη και όλα τα διαδραστικά στοιχεία πρέπει να παραμένουν προσβάσιμα. +> ⚠️ **Σκέψη στο Σχεδιασμό**: Τα WCAG απαιτούν το περιεχόμενο να παραμένει λειτουργικό όταν το ζουμ φτάνει το 200%. Σε αυτό το επίπεδο, η οριζόντια κύλιση πρέπει να είναι ελάχιστη και όλα τα διαδραστικά στοιχεία να παραμένουν προσβάσιμα. -✅ **Δοκιμάστε τον ευέλικτο σχεδιασμό σας**: Μεγεθύνετε το πρόγραμμα περιήγησής σας στο 200% και 400%. Προσαρμόζεται ομαλά η διάταξή σας; Μπορείτε ακόμα να έχετε πρόσβαση σε όλη τη λειτουργικότητα χωρίς υπερβολική κύλιση; +✅ **Δοκιμάστε το ευέλικτο σχέδιό σας**: Μεγεθύνετε τον περιηγητή σας στο 200% και 400%. Αντιδρά η διάταξη με ευελιξία; Μπορείτε ακόμα να αποκτήσετε πρόσβαση σε όλη τη λειτουργικότητα χωρίς υπερβολική κύλιση; ## Σύγχρονα Εργαλεία Δοκιμής Προσβασιμότητας -Τώρα που κατανοείτε πώς οι άνθρωποι πλοηγούνται στον Ιστό με τεχνολογίες υποβοήθησης, ας εξερευνήσουμε τα εργαλεία που σας βοηθούν να δημιουργήσετε και να δοκιμάσετε προσβάσιμες ιστοσελίδες. +Τώρα που καταλαβαίνετε πώς οι χρήστες με τεχνολογίες βοήθειας πλοηγούνται στον ιστό, ας εξερευνήσουμε τα εργαλεία που σας βοηθούν να δημιουργήσετε και να δοκιμάσετε προσβάσιμες ιστοσελίδες. -Σκεφτείτε το έτσι: τα αυτοματοποιημένα εργαλεία είναι εξαιρετικά για να εντοπίζουν προφανή προβλήματα (όπως η έλλειψη εναλλακτικού κειμένου), ενώ οι χειροκίνητες δοκιμές σας βοηθούν να διασφαλίσετε ότι η ιστοσελίδα σας είναι ευχάριστη στη χρήση στην πραγματική ζωή. Μαζί, σας δίνουν την αυτοπεποίθηση ότι οι ιστοσελίδες σας λειτουργούν για όλους. +Σκεφτείτε το ως εξής: τα αυτοματοποιημένα εργαλεία πιάνουν καλά τα προφανή προβλήματα (όπως η έλλειψη alt κειμένου), ενώ οι χειροκίνητες δοκιμές βοηθούν να βεβαιωθείτε ότι ο ιστότοπός σας είναι ευχάριστος στη χρήση στην πραγματική ζωή. Μαζί, σας δίνουν την αυτοπεποίθηση ότι οι ιστότοποι λειτουργούν για όλους. -### Δοκιμή αντίθεσης χρωμάτων +### Έλεγχος αντίθεσης χρωμάτων -Έχουμε καλά νέα: η αντίθεση χρωμάτων είναι ένα από τα πιο κοινά προβλήματα προσβασιμότητας, αλλά είναι επίσης ένα από τα πιο εύκολα να διορθωθούν. Η καλή αντίθεση ωφελεί όλους—από χρήστες με προβλήματα όρασης μέχρι άτομα που προσπαθούν να διαβάσουν το τηλέφωνό τους στην παραλία. +Έχω καλά νέα: η αντίθεση χρωμάτων είναι ένα από τα πιο συνηθισμένα ζητήματα προσβασιμότητας, αλλά και από τα πιο εύκολα να διορθωθούν. Η καλή αντίθεση ωφελεί όλους—από χρήστες με οπτικές αναπηρίες μέχρι ανθρώπους που προσπαθούν να διαβάσουν το κινητό τους στην παραλία. **Απαιτήσεις αντίθεσης WCAG:** -| Τύπος Κειμένου | WCAG AA (Ελάχιστο) | WCAG AAA (Ενισχυμένο) | -|----------------|---------------------|-----------------------| -| **Κανονικό κείμενο** (κάτω από 18pt) | Αναλογία αντίθεσης 4.5:1 | Αναλογία αντίθεσης 7:1 | -| **Μεγάλο κείμενο** (18pt+ ή 14pt+ έντονο) | Αναλογία αντίθεσης 3:1 | Αναλογία αντίθεσης 4.5:1 | -| **Στοιχεία διεπαφής χρήστη** (κουμπιά, περιγράμματα φόρμας) | Αναλογία αντίθεσης 3:1 | Αναλογία αντίθεσης 3:1 | +| Τύπος Κειμένου | WCAG AA (Ελάχιστο) | WCAG AAA (Βελτιωμένο) | +|-----------|-------------------|---------------------| +| **Κανονικό κείμενο** (κάτω των 18pt) | Αναλογία αντίθεσης 4.5:1 | Αναλογία αντίθεσης 7:1 | +| **Μεγάλο κείμενο** (18pt+ ή 14pt+ έντονη γραφή) | Αναλογία αντίθεσης 3:1 | Αναλογία αντίθεσης 4.5:1 | +| **Στοιχεία UI** (κουμπιά, περιγράμματα φορμών) | Αναλογία αντίθεσης 3:1 | Αναλογία αντίθεσης 3:1 | -**Απαραίτητα εργαλεία δοκιμής:** -- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Εφαρμογή για υπολογιστές με επιλογέα χρωμάτων -- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Βασισμένο στον Ιστό με άμεση ανατροφοδότηση -- [Stark](https://www.getstark.co/) - Πρόσθετο εργαλείου σχεδίασης για Figma, Sketch, Adobe XD +**Βασικά εργαλεία δοκιμής:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Εφαρμογή desktop με επιλογέα χρωμάτων +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Ιστότοπος με άμεση ανατροφοδότηση +- [Stark](https://www.getstark.co/) - Plugin σχεδίασης για Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Βρείτε προσβάσιμες παλέτες χρωμάτων -✅ **Δημιουργήστε καλύτερες παλέτες χρωμάτων**: Ξεκινήστε με τα χρώματα της επωνυμίας σας και χρησιμοποιήστε ελέγχους αντίθεσης για να δημιουργήσετε προσβάσιμες παραλλαγές. Καταγράψτε αυτές ως προσβάσιμα χρωματικά tokens του συστήματος σχεδίασής σας. +✅ **Δημιουργήστε καλύτερες παλέτες χρωμάτων**: Ξεκινήστε με τα χρώματα της επωνυμίας σας και χρησιμοποιήστε ελεγκτές αντίθεσης για να φτιάξετε προσβάσιμες παραλλαγές. Τεκμηριώστε αυτές ως τα προσβάσιμα χρώματα του συστήματος σχεδιασμού σας. ### Ολοκληρωμένος έλεγχος προσβασιμότητας -Η πιο αποτελεσματική δοκιμή προσβασιμότητας συνδυάζει πολλαπλές προσεγγίσεις. Κανένα εργαλείο δεν εντοπίζει τα πάντα, οπότε η δημιουργία μιας ρουτίνας δοκιμών με διάφορες μεθόδους εξασφαλίζει πλήρη κάλυψη. +Η πιο αποτελεσματική δοκιμή προσβασιμότητας συνδυάζει πολλούς τρόπους. Κανένα εργαλείο δεν πιάνει τα πάντα, οπότε η δημιουργία ρουτίνας δοκιμών με διάφορες μεθόδους εξασφαλίζει πλήρη κάλυψη. **Δοκιμές μέσω προγράμματος περιήγησης (ενσωματωμένες στα DevTools):** -- **Chrome/Edge**: Έλεγχος προσβασιμότητας Lighthouse + Πάνελ προσβασιμότητας +- **Chrome/Edge**: Έλεγχος προσβασιμότητας Lighthouse + Πίνακας Προσβασιμότητας - **Firefox**: Επιθεωρητής προσβασιμότητας με λεπτομερή προβολή δέντρου -- **Safari**: Καρτέλα ελέγχου στο Web Inspector με προσομοίωση VoiceOver +- **Safari**: Καρτέλα ελέγχου μέσα στο Web Inspector με προσομοίωση VoiceOver **Επαγγελματικές επεκτάσεις δοκιμών:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Αυτοματοποιημένη δοκιμή βιομηχανικού προτύπου -- [WAVE](https://wave.webaim.org/extension/) - Οπτική ανατροφοδότηση με επισήμανση σφαλμάτων +- [axe DevTools](https://www.deque.com/axe/devtools/) - Πρότυπο αυτοματοποιημένης δοκιμής +- [WAVE](https://wave.webaim.org/extension/) - Οπτική ανατροφοδότηση με επισημάνσεις λαθών - [Accessibility Insights](https://accessibilityinsights.io/) - Ολοκληρωμένη σουίτα δοκιμών της Microsoft -**Ενσωμάτωση γραμμής εντολών και CI/CD:** +**Εργαλεία γραμμής εντολών και ενσωμάτωση CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - Βιβλιοθήκη JavaScript για αυτοματοποιημένες δοκιμές - [Pa11y](https://pa11y.org/) - Εργαλείο δοκιμής προσβασιμότητας γραμμής εντολών -- [Lighthouse CI]( -Το χρώμα είναι ένα ισχυρό μέσο επικοινωνίας, αλλά δεν πρέπει ποτέ να είναι ο μόνος τρόπος για να μεταφέρετε σημαντικές πληροφορίες. Ο σχεδιασμός πέρα από το χρώμα δημιουργεί πιο ανθεκτικές, συμπεριληπτικές εμπειρίες που λειτουργούν σε περισσότερες καταστάσεις. +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Αυτοματοποιημένη βαθμολογία προσβασιμότητας + +> 🎯 **Στόχος δοκιμών**: Στοχεύστε σε σκορ προσβασιμότητας Lighthouse 95+ ως βασική γραμμή. Να θυμάστε, τα αυτοματοποιημένα εργαλεία πιάνουν μόλις το 30-40% των ζητημάτων—η χειροκίνητη δοκιμή παραμένει απαραίτητη! + +### 🧠 **Έλεγχος Δεξιοτήτων Δοκιμής: Έτοιμοι να βρείτε προβλήματα;** + +**Ας δούμε πώς νιώθετε για τις δοκιμές προσβασιμότητας:** +- Ποια μέθοδος δοκιμής σας φαίνεται πιο προσιτή αυτή τη στιγμή; +- Μπορείτε να φανταστείτε να χρησιμοποιείτε μόνο πληκτρολόγιο για μια ολόκληρη μέρα; +- Ποιο είναι ένα εμπόδιο προσβασιμότητας που έχετε βιώσει προσωπικά online; + +```mermaid +pie title "Προβλήματα προσβασιμότητας που εντοπίστηκαν με διαφορετικές μεθόδους" + "Αυτοματοποιημένα Εργαλεία" : 35 + "Χειροκίνητος Έλεγχος" : 40 + "Ανατροφοδότηση Χρηστών" : 25 +``` +> **Ενίσχυση αυτοπεποίθησης**: Επαγγελματίες δοκιμαστές προσβασιμότητας χρησιμοποιούν ακριβώς αυτόν τον συνδυασμό μεθόδων. Μαθαίνετε τεχνικές βιομηχανικού επιπέδου! + +## Δημιουργώντας την Προσβασιμότητα από τη Βάση + +Το κλειδί για την επιτυχία στην προσβασιμότητα είναι να την ενσωματώσετε από την αρχή. Ξέρω πως είναι δελεαστικό να σκεφτείτε "θα προσθέσω την προσβασιμότητα αργότερα," αλλά αυτό είναι σαν να προσπαθείτε να βάλετε ράμπα σε ένα σπίτι αφού έχει ήδη χτιστεί. Εφικτό; Ναι. Εύκολο; Όχι πραγματικά. + +Σκεφτείτε την προσβασιμότητα σαν να σχεδιάζετε ένα σπίτι—είναι πολύ πιο εύκολο να συμπεριλάβετε την προσβασιμότητα σε αναπηρικό αμαξίδιο στα αρχικά αρχιτεκτονικά σας σχέδια παρά να κάνετε προσαρμογές μετά. + +### Οι αρχές POUR: Το θεμέλιο της προσβασιμότητας σας + +Οι Οδηγίες Περιεχομένου Ιστού Προσβασιμότητας (WCAG) βασίζονται σε τέσσερις θεμελιώδεις αρχές που σχηματίζουν το ακρωνύμιο POUR. Μην ανησυχείτε—δεν είναι ξεπερασμένες ακαδημαϊκές έννοιες! Είναι πρακτικές οδηγίες για τη δημιουργία περιεχομένου που λειτουργεί για όλους. -**Σχεδιάστε για διαφορές στην αντίληψη χρωμάτων:** +Μόλις μάθετε το POUR, η λήψη αποφάσεων για την προσβασιμότητα γίνεται πολύ πιο διαισθητική. Είναι σαν να έχετε μια νοητική λίστα ελέγχου που καθοδηγεί τις επιλογές σχεδιασμού σας. Ας τις αναλύσουμε: + +```mermaid +flowchart LR + A[🔍 ΑΝΤΙΛΗΠΤΟ
Μπορούν οι χρήστες να το αντιληφθούν;] --> B[🎮 ΛΕΙΤΟΥΡΓΙΚΟ
Μπορούν οι χρήστες να το χρησιμοποιήσουν;] + B --> C[📖 ΚΑΤΑΝΟΗΤΟ
Μπορούν οι χρήστες να το καταλάβουν;] + C --> D[💪 ΑΝΘΕΚΤΙΚΟ
Λειτουργεί παντού;] + + A1[Εναλλακτικό κείμενο
Λεζάντες
Αντίθεση] --> A + B1[Πρόσβαση πληκτρολογίου
Χωρίς επιληπτικές κρίσεις
Περιορισμοί χρόνου] --> B + C1[Καθαρή γλώσσα
Προβλέψιμο
Βοήθεια σφαλμάτων] --> C + D1[Έγκυρος κώδικας
Συμβατό
Προετοιμασμένο για το μέλλον] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Αντιληπτό**: Η πληροφορία πρέπει να παρουσιάζεται με τρόπους που οι χρήστες μπορούν να αντιληφθούν μέσω των διαθέσιμων αισθήσεών τους + +- Παρέχετε εναλλακτικό κείμενο για μη κειμενικό περιεχόμενο (εικόνες, βίντεο, ήχο) +- Διασφαλίστε επαρκή αντίθεση χρωμάτων για όλο το κείμενο και τα στοιχεία UI +- Προσφέρετε υπότιτλους και απομαγνητοφωνήσεις για πολυμέσα +- Σχεδιάστε περιεχόμενο που παραμένει λειτουργικό όταν μεγεθύνεται έως 200% +- Χρησιμοποιήστε πολλαπλά αισθητηριακά χαρακτηριστικά (όχι μόνο χρώμα) για την μετάδοση πληροφοριών + +**🎮 Λειτουργικό**: Όλα τα στοιχεία διεπαφής πρέπει να λειτουργούν μέσω των διαθέσιμων μεθόδων εισόδου + +- Κάντε όλη τη λειτουργικότητα προσβάσιμη μέσω πλοήγησης με πληκτρολόγιο +- Δώστε στους χρήστες επαρκή χρόνο για ανάγνωση και αλληλεπίδραση με το περιεχόμενο +- Αποφύγετε περιεχόμενο που προκαλεί κρίσεις ή προβλήματα ισορροπίας +- Βοηθήστε τους χρήστες να περιηγηθούν αποτελεσματικά με καθαρή δομή και landmarks +- Διασφαλίστε ότι τα διαδραστικά στοιχεία έχουν επαρκές μέγεθος στόχου (τουλάχιστον 44px) + +**📖 Κατανοητό**: Οι πληροφορίες και η λειτουργία του UI πρέπει να είναι σαφείς και εύκολα κατανοητές + +- Χρησιμοποιήστε καθαρή, απλή γλώσσα κατάλληλη για το κοινό σας +- Διασφαλίστε ότι το περιεχόμενο εμφανίζεται και λειτουργεί με προβλέψιμους και συνεπείς τρόπους +- Παρέχετε σαφείς οδηγίες και μηνύματα σφάλματος για την εισαγωγή δεδομένων +- Βοηθήστε τους χρήστες να κατανοήσουν και να διορθώσουν λάθη στις φόρμες +- Οργανώστε το περιεχόμενο με λογική σειρά ανάγνωσης και ιεραρχία πληροφοριών + +**💪 Ανθεκτικό**: Το περιεχόμενο πρέπει να λειτουργεί αξιόπιστα σε διαφορετικές τεχνολογίες και συσκευές βοηθείας + +- **Χρησιμοποιήστε έγκυρο, σημασιολογικό HTML ως βάση σας** +- **Διασφαλίστε συμβατότητα με τρέχουσες και μελλοντικές τεχνολογίες βοήθειας** +- **Ακολουθείτε τα πρότυπα του ιστού και τις βέλτιστες πρακτικές για τη σήμανση** +- **Δοκιμάστε σε διαφορετικούς περιηγητές, συσκευές και βοηθητικά εργαλεία** +- **Δομήστε το περιεχόμενο έτσι ώστε να υποβαθμίζεται ομαλά όταν δεν υποστηρίζονται προχωρημένες δυνατότητες** + +### 🎯 **Έλεγχος Αρχών POUR: Κάντε το να Μείνει** + +**Γρήγορη αναστοχαστική εξέταση των θεμελίων:** +- Μπορείτε να σκεφτείτε μια λειτουργία ιστοσελίδας που αποτυγχάνει σε κάθε αρχή POUR; +- Ποια αρχή σας φαίνεται πιο φυσική ως προγραμματιστής; +- Πώς θα μπορούσαν αυτές οι αρχές να βελτιώσουν τον σχεδιασμό για όλους, όχι μόνο για τα άτομα με αναπηρίες; + +```mermaid +quadrantChart + title Πίνακας Επίδρασης Αρχών POUR + x-axis Χαμηλή Προσπάθεια --> Υψηλή Προσπάθεια + y-axis Χαμηλή Επίδραση --> Υψηλή Επίδραση + quadrant-1 Γρήγορες Νίκες + quadrant-2 Μεγάλα Έργα + quadrant-3 Εξετάστε Αργότερα + quadrant-4 Στρατηγική Εστίαση + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Θυμηθείτε**: Ξεκινήστε με βελτιώσεις υψηλής επίπτωσης και χαμηλής προσπάθειας. Το σημασιολογικό HTML και το εναλλακτικό κείμενο παρέχουν τη μεγαλύτερη ώθηση προσβασιμότητας με τη μικρότερη προσπάθεια! -Περίπου το 8% των ανδρών και το 0,5% των γυναικών έχουν κάποια μορφή διαφοράς στην αντίληψη χρωμάτων (συχνά αποκαλείται "αχρωματοψία"). Οι πιο κοινές τύποι είναι: -- **Δευτερανωπία**: Δυσκολία στη διάκριση κόκκινου και πράσινου -- **Πρωτανωπία**: Το κόκκινο φαίνεται πιο σκοτεινό -- **Τριτανωπία**: Δυσκολία με μπλε και κίτρινο (σπάνιο) +## Δημιουργία Προσβάσιμου Οπτικού Σχεδιασμού -**Στρατηγικές συμπεριληπτικού χρώματος:** +Ο καλός οπτικός σχεδιασμός και η προσβασιμότητα πάνε χέρι-χέρι. Όταν σχεδιάζετε έχοντας κατά νου την προσβασιμότητα, συχνά ανακαλύπτετε ότι αυτοί οι περιορισμοί οδηγούν σε καθαρότερες, πιο κομψές λύσεις που ωφελούν όλους τους χρήστες. + +Ας εξερευνήσουμε πώς να δημιουργήσουμε οπτικά ελκυστικούς σχεδιασμούς που λειτουργούν για όλους, ανεξαρτήτως των οπτικών τους ικανοτήτων ή των συνθηκών υπό τις οποίες παρακολουθούν το περιεχόμενό σας. + +### Στρατηγικές χρώματος και οπτικής προσβασιμότητας + +Το χρώμα είναι ισχυρό για την επικοινωνία, αλλά ποτέ δεν πρέπει να είναι ο μόνος τρόπος με τον οποίο μεταδίδετε σημαντικές πληροφορίες. Ο σχεδιασμός πέρα από το χρώμα δημιουργεί πιο ανθεκτικές, περιεκτικές εμπειρίες που λειτουργούν σε περισσότερες καταστάσεις. + +**Σχεδιάστε για διαφορές στην έγχρωμη όραση:** + +Περίπου το 8% των ανδρών και το 0.5% των γυναικών έχουν κάποια μορφή διαφοράς στην έγχρωμη όραση (συχνά ονομάζεται "τυφλότητα στα χρώματα"). Οι πιο κοινές μορφές είναι: +- **Δευτερανοπία**: Δυσκολία διάκρισης κόκκινου και πράσινου +- **Πρωτανοπία**: Το κόκκινο φαίνεται πιο θαμπό +- **Τριτανοπία**: Δυσκολία με το μπλε και το κίτρινο (σπάνιο) + +**Συμπεριληπτικές στρατηγικές χρώματος:** ```css /* ❌ Bad: Using only color to indicate status */ @@ -189,18 +348,18 @@ graph TD ``` **Πέρα από τις βασικές απαιτήσεις αντίθεσης:** -- Δοκιμάστε τις επιλογές χρωμάτων σας με προσομοιωτές αχρωματοψίας -- Χρησιμοποιήστε μοτίβα, υφές ή σχήματα μαζί με την κωδικοποίηση χρωμάτων -- Βεβαιωθείτε ότι οι διαδραστικές καταστάσεις παραμένουν διακριτές χωρίς χρώμα +- Δοκιμάστε τις επιλογές χρώματος με προσομοιωτές αχρωματοψίας +- Χρησιμοποιήστε μοτίβα, υφές ή σχήματα παράλληλα με την κωδικοποίηση χρώματος +- Διασφαλίστε ότι οι διαδραστικές καταστάσεις παραμένουν διακριτές χωρίς χρώμα - Σκεφτείτε πώς φαίνεται ο σχεδιασμός σας σε λειτουργία υψηλής αντίθεσης -✅ **Δοκιμάστε την προσβασιμότητα χρωμάτων σας**: Χρησιμοποιήστε εργαλεία όπως το [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) για να δείτε πώς εμφανίζεται ο ιστότοπός σας σε χρήστες με διαφορετικούς τύπους αντίληψης χρωμάτων. +✅ **Δοκιμάστε την προσβασιμότητα των χρωμάτων σας**: Χρησιμοποιήστε εργαλεία όπως το [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) για να δείτε πώς εμφανίζεται ο ιστότοπός σας σε χρήστες με διαφορετικούς τύπους χρωματικής όρασης. ### Δείκτες εστίασης και σχεδιασμός αλληλεπίδρασης -Οι δείκτες εστίασης είναι το ψηφιακό ισοδύναμο του δείκτη του ποντικιού—δείχνουν στους χρήστες του πληκτρολογίου πού βρίσκονται στη σελίδα. Καλά σχεδιασμένοι δείκτες εστίασης βελτιώνουν την εμπειρία για όλους, κάνοντας τις αλληλεπιδράσεις σαφείς και προβλέψιμες. +Οι δείκτες εστίασης είναι το ψηφιακό ισοδύναμο ενός δείκτη κειμένου — δείχνουν στους χρήστες πληκτρολογίου πού βρίσκονται στη σελίδα. Οι καλοσχεδιασμένοι δείκτες εστίασης βελτιώνουν την εμπειρία για όλους κάνοντας τις αλληλεπιδράσεις σαφείς και προβλέψιμες. -**Σύγχρονες βέλτιστες πρακτικές για δείκτες εστίασης:** +**Καλές πρακτικές σύγχρονων δεικτών εστίασης:** ```css /* Enhanced focus styles that work across browsers */ @@ -229,23 +388,44 @@ button:focus:not(:focus-visible) { } ``` -**Απαιτήσεις για δείκτες εστίασης:** -- **Ορατότητα**: Πρέπει να έχουν τουλάχιστον αναλογία αντίθεσης 3:1 με τα γύρω στοιχεία +**Απαιτήσεις δείκτη εστίασης:** +- **Ορατότητα**: Πρέπει να έχει αναλογία αντίθεσης τουλάχιστον 3:1 με τα περιβάλλοντα στοιχεία - **Πλάτος**: Ελάχιστο πάχος 2px γύρω από ολόκληρο το στοιχείο -- **Επιμονή**: Πρέπει να παραμένουν ορατοί μέχρι να μετακινηθεί η εστίαση αλλού -- **Διακριτικότητα**: Πρέπει να είναι οπτικά διαφορετικοί από άλλες καταστάσεις UI +- **Επιμονή**: Πρέπει να παραμένει ορατός μέχρι να μετακινηθεί η εστίαση αλλού +- **Διάκριση**: Πρέπει να είναι οπτικά διαφορετικός από άλλες καταστάσεις UI -> 💡 **Συμβουλή Σχεδιασμού**: Εξαιρετικοί δείκτες εστίασης συχνά χρησιμοποιούν συνδυασμό περιγράμματος, σκιάς κουτιού και αλλαγών χρώματος για να εξασφαλίσουν ορατότητα σε διαφορετικά φόντα και περιβάλλοντα. +> 💡 **Συμβουλή σχεδιασμού**: Οι εξαιρετικοί δείκτες εστίασης συχνά χρησιμοποιούν συνδυασμό περιγράμματος, σκιάς κουτιού και αλλαγές χρώματος για να εξασφαλίσουν ορατότητα σε διαφορετικά φόντα και περιβάλλοντα. -✅ **Ελέγξτε τους δείκτες εστίασης**: Περιηγηθείτε στον ιστότοπό σας με το πλήκτρο Tab και σημειώστε ποια στοιχεία έχουν σαφείς δείκτες εστίασης. Υπάρχουν κάποια που είναι δύσκολο να δει κανείς ή λείπουν εντελώς; +✅ **Ελέγξτε τους δείκτες εστίασης**: Πλοηγηθείτε με το Tab στον ιστότοπό σας και σημειώστε ποια στοιχεία έχουν καθαρούς δείκτες εστίασης. Υπάρχουν κάποιοι δύσκολοι στην όραση ή που λείπουν εντελώς; -### Σημασιολογική HTML: Το θεμέλιο της προσβασιμότητας +### Σημασιολογικό HTML: Το θεμέλιο της προσβασιμότητας -Η σημασιολογική HTML είναι σαν να δίνετε στις τεχνολογίες υποβοήθησης ένα GPS για τον ιστότοπό σας. Όταν χρησιμοποιείτε τα σωστά στοιχεία HTML για τον προορισμό τους, ουσιαστικά παρέχετε στους αναγνώστες οθόνης, τα πληκτρολόγια και άλλα εργαλεία έναν λεπτομερή χάρτη για να βοηθήσετε τους χρήστες να πλοηγηθούν αποτελεσματικά. +Το σημασιολογικό HTML είναι σαν να δίνετε στα βοηθητικά τεχνολογικά εργαλεία ένα σύστημα GPS για τον ιστότοπό σας. Όταν χρησιμοποιείτε τα σωστά στοιχεία HTML για τον προορισμό τους, ουσιαστικά παρέχετε σε οθόνες ανάγνωσης, πληκτρολόγια και άλλα εργαλεία έναν λεπτομερή οδικό χάρτη για να βοηθήσουν τους χρήστες να περιηγηθούν αποτελεσματικά. -Μια αναλογία που πραγματικά με βοήθησε να καταλάβω: η σημασιολογική HTML είναι η διαφορά μεταξύ μιας καλά οργανωμένης βιβλιοθήκης με σαφείς κατηγορίες και χρήσιμες πινακίδες και μιας αποθήκης όπου τα βιβλία είναι διάσπαρτα τυχαία. Και τα δύο μέρη έχουν τα ίδια βιβλία, αλλά πού θα προτιμούσατε να προσπαθήσετε να βρείτε κάτι; Ακριβώς! +Ορίστε μια αναλογία που με εντυπωσίασε: το σημασιολογικό HTML είναι η διαφορά ανάμεσα σε μια καλά οργανωμένη βιβλιοθήκη με σαφείς κατηγορίες και χρήσιμες πινακίδες έναντι μιας αποθήκης όπου τα βιβλία είναι πεταμένα τυχαία. Και τα δύο μέρη έχουν τα ίδια βιβλία, αλλά ποιο θα θέλατε να προσπαθήσετε να βρείτε κάτι; Ακριβώς! -**Βασικά στοιχεία δομής προσβάσιμης σελίδας:** +```mermaid +flowchart TD + A[🏠 HTML Έγγραφο] --> B[📰 κεφαλίδα] + A --> C[🧭 πλοήγηση] + A --> D[📄 κύριο μέρος] + A --> E[📋 υποσέλιδο] + + B --> B1[h1: Όνομα Ιστοσελίδας
Λογότυπο & εμπορική ταυτότητα] + C --> C1[ul: Πλοήγηση
Κύριοι σύνδεσμοι] + D --> D1[άρθρο: Περιεχόμενο
τμήμα: Υποτμήματα] + D --> D2[παράθεση: Πλευρική μπάρα
Σχετικό περιεχόμενο] + E --> E1[πλοήγηση: Σύνδεσμοι υποσέλιδου
Πληροφορίες πνευματικών δικαιωμάτων] + + D1 --> D1a[h1: Τίτλος σελίδας
h2: Κύρια τμήματα
h3: Υποτμήματα] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Τα δομικά στοιχεία της προσβάσιμης δομής σελίδας:** ```html @@ -300,36 +480,62 @@ button:focus:not(:focus-visible) { ``` -**Γιατί η σημασιολογική HTML μεταμορφώνει την προσβασιμότητα:** +**Γιατί το σημασιολογικό HTML μεταμορφώνει την προσβασιμότητα:** + +| Σημασιολογικό Στοιχείο | Σκοπός | Όφελος για οθόνη ανάγνωσης | +|------------------------|--------|----------------------------| +| `
` | Κεφαλίδα σελίδας ή ενότητας | "Μνημείο μπάνερ" - γρήγορη πλοήγηση στην κορυφή | +| `