diff --git a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 10282125e..135d8e656 100644 --- a/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ar/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: اليوم، سنستكشف الأدوات الرائعة التي تجعل تطوير الويب الحديث ليس فقط ممكنًا، بل ممتعًا للغاية. أنا أتحدث عن نفس المحررات والمتصفحات وطرق العمل التي يستخدمها المطورون في Netflix وSpotify واستوديوهات التطبيقات المستقلة المفضلة لديك كل يوم. وهنا الجزء الذي سيجعلك ترقص فرحًا: معظم هذه الأدوات الاحترافية والمعتمدة في الصناعة مجانية تمامًا! -![مقدمة البرمجة](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ar.png) +![مقدمة البرمجة](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ar/1-getting-started-lessons/2-github-basics/README.md b/translations/ar/1-getting-started-lessons/2-github-basics/README.md index 9d0747e48..fe667742a 100644 --- a/translations/ar/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ar/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: سنخوض هذه الرحلة معًا، خطوة بخطوة. لا استعجال، لا ضغط – فقط أنت وأنا وبعض الأدوات الرائعة التي ستصبح أصدقائك الجدد! -![مقدمة إلى GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ar.png) +![مقدمة إلى GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -603,7 +603,7 @@ flowchart TD ✅ طريقة جيدة للعثور على مستودعات "مناسبة للمبتدئين" هي [البحث باستخدام الوسم 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![نسخ مستودع محليًا](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ar.png) +![نسخ مستودع محليًا](../../../../translated_images/clone_repo.5085c48d666ead57.ar.png) هناك عدة طرق لنسخ الأكواد. إحدى الطرق هي "استنساخ" محتويات المستودع باستخدام HTTPS، SSH، أو باستخدام GitHub CLI (واجهة سطر الأوامر). diff --git a/translations/ar/1-getting-started-lessons/3-accessibility/README.md b/translations/ar/1-getting-started-lessons/3-accessibility/README.md index 391031511..156906e98 100644 --- a/translations/ar/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ar/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # إنشاء صفحات ويب ميسرة -![كل شيء عن إمكانية الوصول](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ar.png) +![كل شيء عن إمكانية الوصول](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ar.png) > رسم توضيحي بواسطة [تومومي إيمورا](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ar/2-js-basics/1-data-types/README.md b/translations/ar/2-js-basics/1-data-types/README.md index 98886548c..6ff58854b 100644 --- a/translations/ar/2-js-basics/1-data-types/README.md +++ b/translations/ar/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # أساسيات JavaScript: أنواع البيانات -![أساسيات JavaScript - أنواع البيانات](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ar.png) +![أساسيات JavaScript - أنواع البيانات](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ar/2-js-basics/2-functions-methods/README.md b/translations/ar/2-js-basics/2-functions-methods/README.md index 94be92d2c..026554a9b 100644 --- a/translations/ar/2-js-basics/2-functions-methods/README.md +++ b/translations/ar/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # أساسيات JavaScript: الطرق والدوال -![أساسيات JavaScript - الدوال](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ar.png) +![أساسيات JavaScript - الدوال](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ar/2-js-basics/3-making-decisions/README.md b/translations/ar/2-js-basics/3-making-decisions/README.md index a03788403..5c314c811 100644 --- a/translations/ar/2-js-basics/3-making-decisions/README.md +++ b/translations/ar/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # أساسيات JavaScript: اتخاذ القرارات -![أساسيات JavaScript - اتخاذ القرارات](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ar.png) +![أساسيات JavaScript - اتخاذ القرارات](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/ar/2-js-basics/4-arrays-loops/README.md b/translations/ar/2-js-basics/4-arrays-loops/README.md index e2d5597a1..dfa9f0607 100644 --- a/translations/ar/2-js-basics/4-arrays-loops/README.md +++ b/translations/ar/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # أساسيات JavaScript: المصفوفات والحلقات -![أساسيات JavaScript - المصفوفات](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ar.png) +![أساسيات JavaScript - المصفوفات](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ar/3-terrarium/1-intro-to-html/README.md b/translations/ar/3-terrarium/1-intro-to-html/README.md index 979333e56..411223781 100644 --- a/translations/ar/3-terrarium/1-intro-to-html/README.md +++ b/translations/ar/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![مقدمة إلى HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ar.png) +![مقدمة إلى HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا. @@ -88,7 +88,7 @@ mindmap 4. في لوحة Explorer، انقر على أيقونة "New File" 5. قم بتسمية ملفك `index.html` -![مستكشف VS Code يظهر إنشاء ملف جديد](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ar.png) +![مستكشف VS Code يظهر إنشاء ملف جديد](../../../../translated_images/vs-code-index.e2986cf919471eb9.ar.png) **الخيار الثاني: باستخدام أوامر الطرفية** ```bash diff --git a/translations/ar/3-terrarium/2-intro-to-css/README.md b/translations/ar/3-terrarium/2-intro-to-css/README.md index 3fac97dc8..9fa1b4eb2 100644 --- a/translations/ar/3-terrarium/2-intro-to-css/README.md +++ b/translations/ar/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![مقدمة في CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ar.png) +![مقدمة في CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) هل تتذكر كيف كان شكل التيراريوم الخاص بك بسيطًا جدًا؟ CSS هو المكان الذي نحول فيه هذا الهيكل البسيط إلى شيء جذاب بصريًا. @@ -205,7 +205,7 @@ body { افتح أدوات المطور في المتصفح (F12)، انتقل إلى علامة التبويب العناصر، وقم بفحص عنصر `

` الخاص بك. سترى أنه يرث نوع الخط من body: -![الخط الموروث](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ar.png) +![الخط الموروث](../../../../translated_images/1.cc07a5cbe114ad1d.ar.png) ✅ **وقت التجربة**: حاول تعيين خصائص أخرى قابلة للوراثة على `` مثل `color`، `line-height`، أو `text-align`. ماذا يحدث لعناوينك والعناصر الأخرى؟ @@ -599,7 +599,7 @@ flowchart LR ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ar.png) +![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ar.png) **تحديك:** - **قم بإنشاء** أشكال بيضاوية بيضاء أو فاتحة اللون للانعكاسات الزجاجية diff --git a/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md index 27a4c298e..357b25efd 100644 --- a/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ar/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM والإغلاق](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ar.png) +![DOM والإغلاق](../../../../translated_images/webdev101-js.10280393044d7eaa.ar.png) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) مرحبًا بكم في أحد أكثر جوانب تطوير الويب إثارة - جعل الأشياء تفاعلية! نموذج كائن المستند (DOM) هو بمثابة جسر بين HTML و JavaScript، واليوم سنستخدمه لإضفاء الحياة على التيراريوم الخاص بك. عندما أنشأ Tim Berners-Lee أول متصفح ويب، كان يتصور شبكة يمكن أن تكون ديناميكية وتفاعلية - و DOM يجعل هذا التصور ممكنًا. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ar.png) +![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.ar.png) > تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **فهم الإغلاق**: الإغلاق موضوع مهم في JavaScript، ويستخدمه العديد من المطورين لسنوات قبل أن يفهموا جميع الجوانب النظرية بالكامل. اليوم، نركز على التطبيق العملي - سترى الإغلاق يظهر بشكل طبيعي أثناء بناء ميزاتنا التفاعلية. الفهم سيتطور عندما ترى كيف يحل مشاكل حقيقية. -![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ar.png) +![تمثيل شجرة DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.ar.png) > تمثيل لـ DOM وعلامات HTML التي تشير إليه. من [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ function stopElementDrag() { - **دعم عبر الأجهزة**: يعمل على أجهزة الكمبيوتر المكتبية والجوال - **وعي بالأداء**: لا يوجد تسرب للذاكرة أو حسابات زائدة -![التيراريوم النهائي](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ar.png) +![التيراريوم النهائي](../../../../translated_images/terrarium-final.0920f16e87c13a84.ar.png) --- diff --git a/translations/ar/3-terrarium/README.md b/translations/ar/3-terrarium/README.md index 1f6cba4fc..662243de7 100644 --- a/translations/ar/3-terrarium/README.md +++ b/translations/ar/3-terrarium/README.md @@ -1,43 +1,30 @@ -# مشروع التيراريوم الخاص بي: تعلم HTML وCSS والتعامل مع DOM باستخدام JavaScript 🌵🌱 +## انشر Terrarium الخاص بك -تجربة صغيرة للسحب والإفلات كتمرين تأملي. باستخدام القليل من HTML وJS وCSS، ستتمكن من بناء واجهة ويب، وتنسيقها، وحتى إضافة تفاعلات متعددة حسب اختيارك. +يمكنك نشر، أو نشر Terrarium الخاص بك على الويب باستخدام **تطبيقات الويب الثابتة من Azure**. -![التيراريوم الخاص بي](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ar.png) +1. أنشئ نسخة من هذا المستودع -# الدروس +2. اضغط على هذا الزر 👇 -1. [مقدمة إلى HTML](./1-intro-to-html/README.md) -2. [مقدمة إلى CSS](./2-intro-to-css/README.md) -3. [مقدمة إلى DOM وإغلاقات JavaScript](./3-intro-to-DOM-and-closures/README.md) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -## الشكر والتقدير +3. اتبع معالج الإعداد لإنشاء تطبيقك. + - عيّن **جذر التطبيق** إما إلى `/solution` أو إلى جذر قاعدة الشفرة الخاصة بك. + - لا يحتوي هذا التطبيق على API، لذا يمكنك تخطي تكوين API. + - سيتم إنشاء مجلد `.github` تلقائيًا لمساعدة تطبيقات الويب الثابتة من Azure في بناء ونشر تطبيقك. -تمت كتابة هذا المشروع بحب ♥️ بواسطة [Jen Looper](https://www.twitter.com/jenlooper) +--- -تم استلهام تصميم التيراريوم باستخدام CSS من تصميم جرة زجاجية لـ Jakub Mandra على [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -الرسومات تم رسمها يدويًا بواسطة [Jen Looper](http://jenlooper.com) بمساعدة تطبيق Procreate. - -## نشر التيراريوم الخاص بك - -يمكنك نشر أو عرض التيراريوم الخاص بك على الويب باستخدام Azure Static Web Apps. - -1. قم بعمل Fork لهذا المستودع - -2. اضغط على هذا الزر - -[![زر النشر على Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) - -3. اتبع خطوات المعالج لإنشاء تطبيقك. تأكد من تعيين جذر التطبيق ليكون إما `/solution` أو جذر قاعدة الكود الخاصة بك. لا يحتوي هذا التطبيق على API، لذا لا تقلق بشأن إضافته. سيتم إنشاء مجلد GitHub في المستودع الذي قمت بعمل Fork له، والذي سيساعد خدمات البناء والنشر في Azure Static Web Apps على بناء ونشر تطبيقك على عنوان URL جديد. - -**إخلاء المسؤولية**: -تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة. \ No newline at end of file + +**تنويه**: +تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). على الرغم من سعينا لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر المعتمد. بالنسبة للمعلومات المهمة، يُنصح بالاستعانة بترجمة بشرية محترفة. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ناتج عن استخدام هذه الترجمة. + \ No newline at end of file diff --git a/translations/ar/3-terrarium/solution/README.md b/translations/ar/3-terrarium/solution/README.md index fcf6d4723..0075eea72 100644 --- a/translations/ar/3-terrarium/solution/README.md +++ b/translations/ar/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: تجربة صغيرة للسحب والإفلات. باستخدام القليل من HTML و JS و CSS، يمكنك إنشاء واجهة ويب، تصميمها، وإضافة تفاعل إليها. -![تراريومي](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ar.png) +![تراريومي](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.ar.png) ## الشكر والتقدير diff --git a/translations/ar/5-browser-extension/1-about-browsers/README.md b/translations/ar/5-browser-extension/1-about-browsers/README.md index c7ae8d655..4fbbc20b8 100644 --- a/translations/ar/5-browser-extension/1-about-browsers/README.md +++ b/translations/ar/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![رسم توضيحي للمتصفح](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ar.jpg) +![رسم توضيحي للمتصفح](../../../../translated_images/browser.60317c9be8b7f84a.ar.jpg) > رسم توضيحي بواسطة [وسيم شغام](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## اختبار ما قبل المحاضرة @@ -79,7 +79,7 @@ mindmap ✅ **قليل من التاريخ**: أول متصفح كان يسمى 'WorldWideWeb' وتم إنشاؤه بواسطة السير تيموثي بيرنرز لي في عام 1990. -![متصفحات قديمة](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ar.jpg) +![متصفحات قديمة](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ar.jpg) > بعض المتصفحات القديمة، عبر [كارين ماكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### كيف تعالج المتصفحات محتوى الويب @@ -198,7 +198,7 @@ quadrantChart فهم عملية تثبيت الإضافات يساعدك على توقع تجربة المستخدم عندما يقوم الأشخاص بتثبيت إضافتك. عملية التثبيت موحدة عبر المتصفحات الحديثة، مع اختلافات طفيفة في تصميم الواجهة. -![لقطة شاشة لمتصفح Edge تعرض صفحة إدارة الإضافات المفتوحة وقائمة الإعدادات](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ar.png) +![لقطة شاشة لمتصفح Edge تعرض صفحة إدارة الإضافات المفتوحة وقائمة الإعدادات](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ar.png) > **هام**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة. @@ -313,10 +313,10 @@ project-root/ ### نظرة عامة على شاشات الإضافة **شاشة الإعداد** - تكوين المستخدم لأول مرة: -![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ar.png) +![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/1.b6da8c1394b07491.ar.png) **شاشة النتائج** - عرض بيانات بصمة الكربون: -![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ar.png) +![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff08042246.ar.png) ### بناء نموذج التكوين diff --git a/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md index 169dea464..15ff1b3e0 100644 --- a/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ar/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![لوحة التخزين المحلي](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ar.png) +![لوحة التخزين المحلي](../../../../translated_images/localstorage.472f8147b6a3f8d1.ar.png) > ⚠️ **اعتبار أمني**: في التطبيقات الإنتاجية، تخزين مفاتيح API في LocalStorage يشكل مخاطر أمنية لأن JavaScript يمكنه الوصول إلى هذه البيانات. لأغراض التعلم، هذا النهج يعمل بشكل جيد، لكن التطبيقات الحقيقية يجب أن تستخدم تخزين آمن على الخادم للمعلومات الحساسة. diff --git a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md index 8c819f9cf..a82f23a55 100644 --- a/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ar/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR دعونا نجرب هذا. افتح موقعًا (Microsoft.com يعمل جيدًا لهذا) وانقر على زر "تسجيل". الآن قم بتحديث الصفحة وشاهد المحلل يلتقط كل ما يحدث. عندما تتوقف عن التسجيل، سترى تفصيلًا دقيقًا لكيفية قيام المتصفح بـ "البرمجة"، "التقديم"، و"الرسم" للموقع. يذكرني هذا بكيفية مراقبة مركز التحكم لكل نظام أثناء إطلاق الصاروخ - تحصل على بيانات في الوقت الفعلي حول ما يحدث ومتى. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ar.png) +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.ar.png) ✅ يحتوي [توثيق Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) على الكثير من التفاصيل إذا كنت تريد التعمق أكثر. @@ -136,11 +136,11 @@ flowchart LR احصل على لقطة لأداء صفحتك عن طريق تحديد جزء من خط الزمن الخاص بالملف الشخصي والنظر إلى لوحة الملخص: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ar.png) +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.ar.png) تحقق من لوحة سجل الأحداث لترى إذا كان أي حدث استغرق أكثر من 15 مللي ثانية: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ar.png) +![Edge event log](../../../../translated_images/log.804026979f3707e0.ar.png) ✅ تعرف على المحلل الخاص بك! افتح أدوات المطور على هذا الموقع وانظر إذا كانت هناك أي اختناقات. ما هو الأصل الذي يتم تحميله ببطء؟ الأسرع؟ diff --git a/translations/ar/5-browser-extension/README.md b/translations/ar/5-browser-extension/README.md index 5c4219ee9..f7c70b3a7 100644 --- a/translations/ar/5-browser-extension/README.md +++ b/translations/ar/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### الشكر والتقدير -![إضافة متصفح خضراء](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![إضافة متصفح خضراء](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## الشكر والتقدير diff --git a/translations/ar/5-browser-extension/solution/README.md b/translations/ar/5-browser-extension/solution/README.md index ef5ef6226..e028bc21c 100644 --- a/translations/ar/5-browser-extension/solution/README.md +++ b/translations/ar/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: باستخدام واجهة برمجة التطبيقات C02 Signal الخاصة بـ tmrow لتتبع استخدام الكهرباء، قم ببناء ملحق متصفح بحيث يكون لديك تذكير مباشرة في متصفحك حول مدى كثافة استخدام الكهرباء في منطقتك. استخدام هذا الملحق بشكل عشوائي سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات. -![لقطة شاشة للملحق](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للملحق](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البدء @@ -31,7 +31,7 @@ npm run build لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير معبأ" لتحميل ملحق جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات الخاصة بـ CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](http://api.electricitymap.org/v3/zones) ([Electricity Map](https://www.electricitymap.org/map)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO"). -![التثبيت](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن تتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استخدام الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة الثقيلة بالطاقة التي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقطة" من ملحق [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.fr.md b/translations/ar/5-browser-extension/solution/translation/README.fr.md index 86562686c..ece257a38 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ar/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: باستخدام واجهة برمجة التطبيقات C02 Signal من tmrow لتتبع استهلاك الكهرباء، قم بإنشاء ملحق متصفح حتى تتمكن من الحصول على تذكير مباشرة في متصفحك حول استهلاك الكهرباء في منطقتك. استخدام هذا الملحق المخصص سيساعدك على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات. -![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البدء @@ -31,7 +31,7 @@ npm run build لتثبيت الملحق على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل ملحق غير مضغوط" لتحميل ملحق جديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([ابحث عن الرمز هنا](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO"). -![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتعطيك مؤشرًا على الأنشطة التي تستهلك الطاقة والتي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقاط" من [ملحق Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.hi.md b/translations/ar/5-browser-extension/solution/translation/README.hi.md index 584bc17bf..367e70832 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ar/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: استخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، وإنشاء ملحق متصفح يذكّرك بمدى كثافة استخدام الكهرباء في منطقتك أثناء تصفحك. يهدف هذا الملحق إلى مساعدتك في اتخاذ قرارات مستنيرة بناءً على هذه المعلومات. -![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البدء @@ -31,7 +31,7 @@ npm run build لتثبيته على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "تحميل غير مضغوط" لتحميل ملحق جديد. عند المطالبة، افتح مجلد "dist" وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة CO2 Signal ([احصل عليه عبر البريد الإلكتروني من هنا](https://www.co2snal.com/) عن طريق إدخال بريدك الإلكتروني في المربع الموجود على الصفحة) بالإضافة إلى [رمز منطقتك](http://api.electricitymap.org/v3/zones) من [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، أستخدم "US-NEISO"). -![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API ورمز المنطقة في واجهة الملحق، يجب أن يتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك، مما يمنحك مؤشرًا على الأنشطة التي تتطلب طاقة كثيفة وما إذا كانت مناسبة للقيام بها. فكرة نظام "النقطة" هذا مستوحاة من ملحق [Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.it.md b/translations/ar/5-browser-extension/solution/translation/README.it.md index 8d1935f90..4c15e2387 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.it.md +++ b/translations/ar/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: سيتم استخدام واجهة برمجة التطبيقات Signal CO2 الخاصة بـ tmrow لمراقبة استهلاك الكهرباء لإنشاء امتداد للمتصفح، بحيث يمكنك الحصول على تذكير مباشر في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد المخصص سيساعدك على تقييم أنشطتك بناءً على هذه المعلومات. -![لقطة شاشة للامتداد](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للامتداد](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## للبدء @@ -31,7 +31,7 @@ npm run build لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. إذا لم تكن مفعّلة بالفعل، قم بتفعيل وضع المطور (في أسفل اليسار). اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal (يمكنك [الحصول عليه عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز [المنطقة الخاص بك](http://api.electricitymap.org/v3/zones) المطابق لـ [خريطة الكهرباء](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، الرمز هو "US-NEISO"). -![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن يتغير النقطة الملونة في شريط الامتداد الخاص بالمتصفح لتعكس استهلاك الطاقة في المنطقة وتوفر مؤشرًا حول الأنشطة ذات الاستهلاك العالي للطاقة التي يمكن تنفيذها. الفكرة وراء هذا النظام القائم على "النقاط" مستوحاة من [امتداد Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.ja.md b/translations/ar/5-browser-extension/solution/translation/README.ja.md index 6a9d44d2c..5368305c9 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ar/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: قم ببناء ملحق متصفح يعرض تذكيرًا على المتصفح حول مدى كثافة استخدام الطاقة في منطقتك، باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استهلاك الطاقة. يمكنك استخدام هذا الملحق بشكل مخصص لاتخاذ قرارات بناءً على هذه المعلومات. -![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البداية @@ -31,7 +31,7 @@ npm run build لتثبيته على Edge، ابحث عن لوحة "الإضافات" من قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. عند ظهور المطالبة، افتح مجلد "dist"، وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API من CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع على هذه الصفحة)، بالإضافة إلى [رمز لمنطقتك](http://api.electricitymap.org/v3/zones) المتوافق مع [Electricity Map](https://www.electricitymap.org/map) (على سبيل المثال، في بوسطن، يتم استخدام 'US-NEISO'). -![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة التي تظهر في شريط ملحقات المتصفح لتعكس استهلاك الطاقة في منطقتك. ستساعدك هذه النقطة في تحديد الأنشطة التي تتطلب طاقة والتي من المناسب القيام بها. فكرة نظام "النقطة" مستوحاة من [ملحق Energy Lollipop](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.ms.md b/translations/ar/5-browser-extension/solution/translation/README.ms.md index addd1975e..84f106838 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ar/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: باستخدام واجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون من tmrow لتتبع استهلاك الكهرباء، قم ببناء ملحق للمتصفح بحيث يمكنك تلقي تنبيهات في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الملحق سيساعدك بشكل خاص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات. -![لقطة شاشة لملحق المتصفح](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة لملحق المتصفح](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البداية من هنا @@ -31,7 +31,7 @@ npm run build لتثبيته على Edge، استخدم قائمة "النقاط الثلاث" في الزاوية اليمنى العليا من المتصفح للعثور على لوحة الملحقات. من هناك، اختر "Load Unpacked" لتحميل الملحق الجديد. افتح مجلد "dist" عند الطلب وسيتم تحميل الملحق. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات لإشارات ثاني أكسيد الكربون ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على الصفحة) و[رمز لمنطقتك](http://api.electricitymap.org/v3/zones) الذي يتوافق مع [خريطة الكهرباء](https://www.electricitymap.org/map) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO"). -![جاري التحميل](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![جاري التحميل](../../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، ستتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إرشادات حول الأنشطة الثقيلة المناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من [ملحق متصفح Lollipop للطاقة](https://energylollipop.com/) الخاص بانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/start/README.md b/translations/ar/5-browser-extension/start/README.md index 07e627d3e..73207b2cb 100644 --- a/translations/ar/5-browser-extension/start/README.md +++ b/translations/ar/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: باستخدام واجهة برمجة التطبيقات CO2 Signal الخاصة بـ tmrow لتتبع استهلاك الكهرباء، قم ببناء امتداد متصفح بحيث يمكنك الحصول على تذكير مباشرة في متصفحك حول مدى كثافة استهلاك الكهرباء في منطقتك. استخدام هذا الامتداد بشكل عشوائي سيساعدك على اتخاذ قرارات بناءً على هذه المعلومات. -![لقطة شاشة للامتداد](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ar.png) +![لقطة شاشة للامتداد](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ar.png) ## البدء @@ -31,7 +31,7 @@ npm run build لتثبيت الامتداد على متصفح Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عند المطالبة وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل على واحد عبر البريد الإلكتروني هنا](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود على هذه الصفحة) ورمز منطقتك من [Electricity Map](http://api.electricitymap.org/v3/zones) (على سبيل المثال، في بوسطن أستخدم "US-NEISO"). -![التثبيت](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ar.png) +![التثبيت](../../../../translated_images/install-on-edge.78634f02842c4828.ar.png) بمجرد إدخال مفتاح API والمنطقة في واجهة الامتداد، يجب أن تتغير النقطة الملونة في شريط امتداد المتصفح لتعكس استهلاك الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة التي تستهلك الطاقة والتي قد تكون مناسبة للقيام بها. تم استلهام فكرة نظام "النقطة" هذا من امتداد [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا. diff --git a/translations/ar/6-space-game/2-drawing-to-canvas/README.md b/translations/ar/6-space-game/2-drawing-to-canvas/README.md index 01bf3a8d4..ac3043541 100644 --- a/translations/ar/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ar/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![شبكة اللوحة](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ar.png) +![شبكة اللوحة](../../../../translated_images/canvas_grid.5f209da785ded492.ar.png) > الصورة من [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) لترسم على عنصر اللوحة، ستتبع نفس العملية المكونة من ثلاث خطوات التي تشكل أساس جميع رسومات اللوحة. بمجرد القيام بذلك عدة مرات، يصبح الأمر طبيعيًا: @@ -329,11 +329,11 @@ flowchart TD - سفينة البطل - ![سفينة البطل](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ar.png) + ![سفينة البطل](../../../../translated_images/player.dd24c1afa8c71e9b.ar.png) - 5*5 وحش - ![سفينة الوحش](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ar.png) + ![سفينة الوحش](../../../../translated_images/enemyShip.5df2a822c16650c2.ar.png) ### الخطوات الموصى بها لبدء التطوير @@ -460,7 +460,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { يجب أن تبدو النتيجة النهائية كما يلي: -![شاشة سوداء مع بطل و5*5 وحوش](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ar.png) +![شاشة سوداء مع بطل و5*5 وحوش](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ar.png) ## الحل diff --git a/translations/ar/6-space-game/5-keeping-score/README.md b/translations/ar/6-space-game/5-keeping-score/README.md index d475358d8..5a2d837de 100644 --- a/translations/ar/6-space-game/5-keeping-score/README.md +++ b/translations/ar/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **نظام النقاط**: كل سفينة عدو يتم تدميرها تمنح 100 نقطة (الأرقام المستديرة أسهل للاعبين لحسابها ذهنيًا). يتم عرض النقاط في الزاوية السفلية اليسرى. -- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ar.png). +- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن ![life image](../../../../translated_images/life.6fb9f50d53ee0413.ar.png). ## لنبدأ البناء! diff --git a/translations/ar/7-bank-project/1-template-route/README.md b/translations/ar/7-bank-project/1-template-route/README.md index b6e533a48..6530a3b5e 100644 --- a/translations/ar/7-bank-project/1-template-route/README.md +++ b/translations/ar/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram استخدام `history.pushState` ينشئ إدخالات جديدة في سجل التنقل الخاص بالمتصفح. يمكنك التحقق من ذلك عن طريق الضغط على *زر الرجوع* في متصفحك، يجب أن يعرض شيئًا مثل هذا: -![لقطة شاشة لسجل التنقل](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ar.png) +![لقطة شاشة لسجل التنقل](../../../../translated_images/history.7fdabbafa521e064.ar.png) إذا حاولت النقر على زر الرجوع عدة مرات، سترى أن عنوان URL الحالي يتغير ويتم تحديث السجل، لكن نفس القالب يستمر في العرض. diff --git a/translations/ar/7-bank-project/2-forms/README.md b/translations/ar/7-bank-project/2-forms/README.md index f9d5bb24c..8d94df672 100644 --- a/translations/ar/7-bank-project/2-forms/README.md +++ b/translations/ar/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. لاحظ التغييرات في شريط عنوان المتصفح الخاص بك 3. لاحظ كيف يتم إعادة تحميل الصفحة وتظهر البيانات في عنوان URL -![لقطة شاشة لتغيير عنوان URL للمتصفح بعد النقر على زر التسجيل](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ar.png) +![لقطة شاشة لتغيير عنوان URL للمتصفح بعد النقر على زر التسجيل](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ar.png) ### مقارنة طرق HTTP @@ -350,7 +350,7 @@ graph TD 2. **انقر** على زر "إنشاء حساب" 3. **لاحظ** استجابة الخادم في متصفحك -![نافذة متصفح على العنوان localhost:5000/api/accounts، تعرض سلسلة JSON تحتوي على بيانات المستخدم](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ar.png) +![نافذة متصفح على العنوان localhost:5000/api/accounts، تعرض سلسلة JSON تحتوي على بيانات المستخدم](../../../../translated_images/form-post.61de4ca1b964d91a.ar.png) **ما يجب أن تراه:** - **إعادة توجيه المتصفح** إلى عنوان URL لنقطة نهاية API @@ -615,7 +615,7 @@ async function register() { 3. **انقر** على "إنشاء حساب" 4. **لاحظ** رسائل وحدة التحكم وملاحظات المستخدم -![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ar.png) +![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/browser-console.efaf0b51aaaf6778.ar.png) **ما يجب أن تراه:** - **حالة التحميل** تظهر على زر الإرسال @@ -790,7 +790,7 @@ input:focus:invalid { 3. **جرب** أحرف خاصة في حقل اسم المستخدم 4. **أدخل** مبلغ رصيد سلبي -![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ar.png) +![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/validation-error.8bd23e98d416c22f.ar.png) **ما ستلاحظه:** - **المتصفح يعرض** رسائل التحقق الأصلية @@ -940,7 +940,7 @@ timeline إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض أنماط CSS: -![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ar.png) +![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/result.96ef01f607bf856a.ar.png) ## اختبار ما بعد المحاضرة diff --git a/translations/ar/7-bank-project/3-data/README.md b/translations/ar/7-bank-project/3-data/README.md index 30d056992..7b49d1339 100644 --- a/translations/ar/7-bank-project/3-data/README.md +++ b/translations/ar/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![تدفق التحديث في تطبيق متعدد الصفحات](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ar.png) +![تدفق التحديث في تطبيق متعدد الصفحات](../../../../translated_images/mpa.7f7375a1a2d4aa77.ar.png) **لماذا كان هذا النهج يبدو غير سلس:** - كل نقرة تعني إعادة بناء الصفحة بالكامل من البداية @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![تدفق التحديث في تطبيق أحادي الصفحة](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ar.png) +![تدفق التحديث في تطبيق أحادي الصفحة](../../../../translated_images/spa.268ec73b41f992c2.ar.png) **لماذا التطبيقات أحادية الصفحة تبدو أفضل بكثير:** - يتم تحديث الأجزاء التي تغيرت فقط (ذكي، أليس كذلك؟) @@ -523,7 +523,7 @@ if (data.error) { الآن عند الاختبار باستخدام حساب غير صالح، سترى رسالة خطأ مفيدة مباشرةً على الصفحة! -![لقطة شاشة تظهر رسالة الخطأ أثناء تسجيل الدخول](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ar.png) +![لقطة شاشة تظهر رسالة الخطأ أثناء تسجيل الدخول](../../../../translated_images/login-error.416fe019b36a6327.ar.png) #### الخطوة 4: أن تكون شاملًا مع إمكانية الوصول @@ -961,7 +961,7 @@ timeline إليك ما يمكن أن تبدو عليه لوحة التحكم المصقولة: -![لقطة شاشة لنتيجة مثال لوحة التحكم بعد التنسيق](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ar.png) +![لقطة شاشة لنتيجة مثال لوحة التحكم بعد التنسيق](../../../../translated_images/screen2.123c82a831a1d14a.ar.png) لا تشعر بأن عليك مطابقة هذا بالضبط - استخدمه كمصدر إلهام واجعلها خاصة بك! diff --git a/translations/ar/7-bank-project/4-state-management/README.md b/translations/ar/7-bank-project/4-state-management/README.md index a04f4cc60..58b9744ed 100644 --- a/translations/ar/7-bank-project/4-state-management/README.md +++ b/translations/ar/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap بدلاً من مطاردة ذيولنا، سنقوم بإنشاء نظام **إدارة حالة مركزي**. فكر في الأمر كأن لديك شخصًا منظمًا جدًا مسؤولًا عن كل الأمور المهمة: -![مخطط يوضح تدفقات البيانات بين HTML، إجراءات المستخدم والحالة](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ar.png) +![مخطط يوضح تدفقات البيانات بين HTML، إجراءات المستخدم والحالة](../../../../translated_images/data-flow.fa2354e0908fecc8.ar.png) ```mermaid flowchart TD @@ -804,7 +804,7 @@ timeline إليك مثال على النتيجة بعد إكمال المهمة: -![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ar.png) +![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f1.ar.png) --- diff --git a/translations/ar/7-bank-project/4-state-management/assignment.md b/translations/ar/7-bank-project/4-state-management/assignment.md index 3a289e3c3..94d520900 100644 --- a/translations/ar/7-bank-project/4-state-management/assignment.md +++ b/translations/ar/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **النتيجة المتوقعة:** بعد إكمال هذه المهمة، يجب أن يحتوي تطبيقك البنكي على ميزة "إضافة معاملة" كاملة الوظائف تبدو وتعمل بشكل احترافي: -![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ar.png) +![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f1.ar.png) ## اختبار التنفيذ الخاص بك diff --git a/translations/ar/7-bank-project/README.md b/translations/ar/7-bank-project/README.md index 9c9888266..052c9d548 100644 --- a/translations/ar/7-bank-project/README.md +++ b/translations/ar/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: في هذا المشروع، ستتعلم كيفية بناء بنك خيالي. تتضمن هذه الدروس تعليمات حول كيفية تصميم تطبيق ويب وتوفير المسارات، بناء النماذج، إدارة الحالة، وجلب البيانات من واجهة برمجية (API) يمكنك من خلالها الحصول على بيانات البنك. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ar.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ar.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.ar.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ar.png) | |--------------------------------|--------------------------------| ## الدروس diff --git a/translations/ar/8-code-editor/1-using-a-code-editor/README.md b/translations/ar/8-code-editor/1-using-a-code-editor/README.md index 66ed4750d..54a60fddc 100644 --- a/translations/ar/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ar/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev يجلب هذه القدرات إلى متصفحك: بمجرد تحميل كل شيء، سترى مساحة عمل نظيفة مصممة لتبقيك مركزًا على ما يهم - الأكواد الخاصة بك! -![واجهة VSCode.dev الافتراضية](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ar.png) +![واجهة VSCode.dev الافتراضية](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ar.png) **إليك جولة في الحي:** - **شريط النشاط** (الشريط الموجود على اليسار): التنقل الرئيسي الخاص بك مع المستكشف 📁، البحث 🔍، التحكم في المصدر 🌿، الإضافات 🧩، والإعدادات ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. توجه إلى [vscode.dev](https://vscode.dev) إذا لم تكن هناك بالفعل 2. ابحث عن زر "فتح مستودع عن بُعد" على شاشة الترحيب وانقر عليه - ![فتح مستودع عن بُعد](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ar.png) + ![فتح مستودع عن بُعد](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ar.png) 3. قم بلصق أي رابط مستودع GitHub (جرب هذا: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. اضغط على Enter وشاهد السحر يحدث! @@ -242,7 +242,7 @@ flowchart TB هل تريد أن تشعر وكأنك ساحر برمجة؟ جرب هذا الاختصار: Ctrl+Shift+P (أو Cmd+Shift+P على Mac) لفتح لوحة الأوامر: -![لوحة الأوامر](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ar.png) +![لوحة الأوامر](../../../../translated_images/palette-menu.4946174e07f42622.ar.png) **لوحة الأوامر تشبه وجود محرك بحث لكل ما يمكنك القيام به:** - اكتب "فتح عن بُعد" وستجد أداة فتح المستودعات @@ -304,7 +304,7 @@ flowchart TB 3. أدخل اسم الملف بما في ذلك الامتداد المناسب (`style.css`, `script.js`, `index.html`) 4. اضغط على Enter لإنشاء الملف -![إنشاء ملف جديد](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ar.png) +![إنشاء ملف جديد](../../../../translated_images/create-new-file.2814e609c2af9aeb.ar.png) **اتفاقيات التسمية:** - استخدم أسماء وصفية تشير إلى غرض الملف @@ -322,7 +322,7 @@ flowchart TB 2. ابدأ الكتابة وشاهد VSCode.dev يساعدك بالألوان، الاقتراحات، واكتشاف الأخطاء 3. احفظ عملك باستخدام Ctrl+S (Windows/Linux) أو Cmd+S (Mac) - رغم أنه يحفظ تلقائيًا أيضًا! -![تحرير الملفات في VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ar.png) +![تحرير الملفات في VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ar.png) **الأشياء الرائعة التي تحدث أثناء البرمجة:** - يتم تلوين الأكواد بشكل جميل بحيث يسهل قراءتها @@ -343,7 +343,7 @@ flowchart TB 2. تظهر الملفات المعدلة في قسم "التغييرات" 3. يشير الترميز اللوني إلى أنواع التغييرات: الأخضر للإضافات، الأحمر للحذف -![عرض التغييرات في التحكم في المصدر](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ar.png) +![عرض التغييرات في التحكم في المصدر](../../../../translated_images/working-tree.c58eec08e6335c79.ar.png) **حفظ عملك (سير عمل التثبيت):** @@ -438,7 +438,7 @@ mindmap 2. تصفح أو ابحث عن شيء محدد 3. انقر على أي شيء يبدو مثيرًا للاهتمام لمعرفة المزيد عنه -![واجهة سوق الإضافات](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ar.png) +![واجهة سوق الإضافات](../../../../translated_images/extensions.eca0e0c7f59a10b5.ar.png) **ما ستراه هناك:** @@ -491,7 +491,7 @@ mindmap 3. اختر "إعدادات الإضافة" من القائمة المنسدلة 4. قم بتعديل الأمور حتى تشعر أنها مناسبة لسير عملك -![تخصيص إعدادات الإضافات](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ar.png) +![تخصيص إعدادات الإضافات](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ar.png) **الأشياء الشائعة التي قد ترغب في تعديلها:** - كيفية تنسيق الكود الخاص بك (علامات التبويب مقابل المسافات، طول السطر، إلخ) diff --git a/translations/ar/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ar/8-code-editor/1-using-a-code-editor/assignment.md index 933b74ba7..89d7ba340 100644 --- a/translations/ar/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ar/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **اكتب** رسالة الالتزام: "إضافة هيكل HTML الأولي" 5. **انقر** على "Commit new file" لحفظ التغييرات -![إنشاء ملف أولي على GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ar.png) +![إنشاء ملف أولي على GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.ar.png) **ما الذي يحققه هذا الإعداد الأولي:** - **يؤسس** هيكل مستند HTML5 الصحيح باستخدام العناصر الدلالية @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **مؤشر النجاح**: يجب أن ترى ملفات مشروعك في الشريط الجانبي للمستكشف و`index.html` متاحًا للتحرير في منطقة المحرر الرئيسية. -![المشروع محمل في VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ar.png) +![المشروع محمل في VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ar.png) **ما ستراه في الواجهة:** - **الشريط الجانبي للمستكشف**: **يعرض** ملفات المستودع وهيكل المجلدات @@ -448,7 +448,7 @@ li:before { **النتائج الفورية بعد التثبيت:** بمجرد تثبيت CodeSwing، سترى معاينة مباشرة لموقع السيرة الذاتية الخاص بك تظهر في المحرر. يتيح لك ذلك رؤية كيف يبدو موقعك بالضبط أثناء إجراء التغييرات. -![امتداد CodeSwing يعرض معاينة مباشرة](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ar.png) +![امتداد CodeSwing يعرض معاينة مباشرة](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ar.png) **فهم الواجهة المحسنة:** - **عرض مقسم**: **يعرض** الكود على جانب واحد والمعاينة المباشرة على الجانب الآخر diff --git a/translations/ar/9-chat-project/README.md b/translations/ar/9-chat-project/README.md index d876c4d8f..1f06813f8 100644 --- a/translations/ar/9-chat-project/README.md +++ b/translations/ar/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) إليك كيف سيبدو مشروعك النهائي: -![واجهة تطبيق الدردشة تظهر محادثة بين المستخدم ومساعد الذكاء الاصطناعي](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ar.png) +![واجهة تطبيق الدردشة تظهر محادثة بين المستخدم ومساعد الذكاء الاصطناعي](../../../translated_images/screenshot.0a1ee0d123df681b.ar.png) ## 🗺️ رحلتك التعليمية عبر تطوير تطبيقات الذكاء الاصطناعي @@ -194,7 +194,7 @@ mindmap **المبدأ الأساسي**: تطوير تطبيقات الذكاء الاصطناعي يجمع بين مهارات تطوير الويب التقليدية وتكامل خدمات الذكاء الاصطناعي، مما يخلق تطبيقات ذكية تبدو طبيعية وتفاعلية للمستخدمين. -![واجهة GitHub Models AI Playground مع اختيار النموذج ومنطقة الاختبار](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ar.png) +![واجهة GitHub Models AI Playground مع اختيار النموذج ومنطقة الاختبار](../../../translated_images/playground.d2b927122224ff8f.ar.png) **ما الذي يجعل الملعب مفيدًا جدًا:** - **جرب** نماذج ذكاء اصطناعي مختلفة مثل GPT-4o-mini، Claude، وغيرها (كلها مجانية!) @@ -204,7 +204,7 @@ mindmap بمجرد أن تجرب قليلاً، فقط انقر على علامة التبويب "Code" واختر لغتك البرمجية للحصول على كود التنفيذ الذي تحتاجه. -![اختيار الملعب يظهر خيارات توليد الكود للغات البرمجة المختلفة](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ar.png) +![اختيار الملعب يظهر خيارات توليد الكود للغات البرمجة المختلفة](../../../translated_images/playground-choice.1d23ba7d407f4758.ar.png) ## إعداد تكامل الخلفية باستخدام Python @@ -2364,14 +2364,14 @@ mindmap - **انتقل** إلى [مستودع Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **اضغط** على "Use this template" في الزاوية العلوية اليمنى (تأكد من تسجيل الدخول إلى GitHub) -![واجهة الإنشاء من القالب تظهر زر "Use this template" الأخضر](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ar.png) +![واجهة الإنشاء من القالب تظهر زر "Use this template" الأخضر](../../../translated_images/template.67ad477109d29a2b.ar.png) **الخطوة 2: تشغيل Codespaces** - **افتح** المستودع الذي أنشأته حديثًا - **اضغط** على الزر الأخضر "Code" واختر "Codespaces" - **اختر** "Create codespace on main" لبدء بيئة التطوير -![واجهة إنشاء Codespace مع خيارات تشغيل بيئة التطوير السحابية](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ar.png) +![واجهة إنشاء Codespace مع خيارات تشغيل بيئة التطوير السحابية](../../../translated_images/codespace.bcecbdf5d2747d3d.ar.png) **الخطوة 3: تكوين البيئة** بمجرد تحميل Codespace، سيكون لديك وصول إلى: diff --git a/translations/ar/README.md b/translations/ar/README.md index 1c0375e54..86cd9b10e 100644 --- a/translations/ar/README.md +++ b/translations/ar/README.md @@ -1,257 +1,277 @@ -[![رخصة GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![مساهمو GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![مشاكل GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![طلبات السحب على GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![مرحبًا بطلبات السحب](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) -[![مشاهدو 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/) -[![تفرعات 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/) -[![نجوم 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) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# تطوير الويب للمبتدئين - منهج دراسي +# تطوير الويب للمبتدئين - منهج دراسي -تعلم أساسيات تطوير الويب من خلال دورة شاملة لمدة 12 أسبوعًا مقدمة من Microsoft Cloud Advocates. تتناول كل واحدة من الدروس الـ 24 مواضيع JavaScript وCSS وHTML من خلال مشاريع عملية مثل الحدائق الزجاجية، وإضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات، والنقاشات، والواجبات العملية. عزز مهاراتك وحسن استيعابك للمعرفة من خلال منهجنا التعليمي القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم! +تعلم أساسيات تطوير الويب مع دورتنا الشاملة التي تمتد 12 أسبوعًا بقيادة Microsoft Cloud Advocates. كل درس من الدروس الـ 24 يغوص في JavaScript و CSS و HTML من خلال مشاريع عملية مثل التيراريومز، إضافات المتصفح، وألعاب الفضاء. شارك في الاختبارات، المناقشات، والواجبات العملية. عزز مهاراتك وحقق أفضل استفادة من معرفتك من خلال منهجنا الفعال القائم على المشاريع. ابدأ رحلتك في البرمجة اليوم! -انضم إلى مجتمع Azure AI Foundry على Discord +انضم إلى مجتمع Azure AI Foundry على ديسكورد -[![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) -اتبع هذه الخطوات للبدء باستخدام هذه الموارد: -1. **قم بعمل Fork للمستودع**: انقر [![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. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**انضم إلى مجتمع Azure AI Foundry على Discord وتواصل مع الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) +اتبع هذه الخطوات لتبدأ باستخدام هذه الموارد: +1. **إنشاء فرع من المستودع**: انقر [![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. **استنساخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**انضم إلى Azure AI Foundry Discord وقابل الخبراء والمطورين الآخرين**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 دعم متعدد اللغات +### 🌐 دعم متعدد اللغات -#### مدعوم عبر GitHub Action (تلقائي ومحدث دائمًا) +#### مدعوم عبر GitHub Action (آلي & محدث دائمًا) - -[العربية](./README.md) | [البنغالية](../bn/README.md) | [البلغارية](../bg/README.md) | [البورمية (ميانمار)](../my/README.md) | [الصينية (المبسطة)](../zh/README.md) | [الصينية (التقليدية، هونغ كونغ)](../hk/README.md) | [الصينية (التقليدية، ماكاو)](../mo/README.md) | [الصينية (التقليدية، تايوان)](../tw/README.md) | [الكرواتية](../hr/README.md) | [التشيكية](../cs/README.md) | [الدانماركية](../da/README.md) | [الهولندية](../nl/README.md) | [الإستونية](../et/README.md) | [الفنلندية](../fi/README.md) | [الفرنسية](../fr/README.md) | [الألمانية](../de/README.md) | [اليونانية](../el/README.md) | [العبرية](../he/README.md) | [الهندية](../hi/README.md) | [الهنغارية](../hu/README.md) | [الإندونيسية](../id/README.md) | [الإيطالية](../it/README.md) | [اليابانية](../ja/README.md) | [الكورية](../ko/README.md) | [الليتوانية](../lt/README.md) | [الماليزية](../ms/README.md) | [الماراثية](../mr/README.md) | [النيبالية](../ne/README.md) | [النرويجية](../no/README.md) | [الفارسية (الفارسية)](../fa/README.md) | [البولندية](../pl/README.md) | [البرتغالية (البرازيل)](../br/README.md) | [البرتغالية (البرتغال)](../pt/README.md) | [البنجابية (غورموخي)](../pa/README.md) | [الرومانية](../ro/README.md) | [الروسية](../ru/README.md) | [الصربية (السيريلية)](../sr/README.md) | [السلوفاكية](../sk/README.md) | [السلوفينية](../sl/README.md) | [الإسبانية](../es/README.md) | [السواحيلية](../sw/README.md) | [السويدية](../sv/README.md) | [التاغالوغية (الفلبينية)](../tl/README.md) | [التاميلية](../ta/README.md) | [التايلاندية](../th/README.md) | [التركية](../tr/README.md) | [الأوكرانية](../uk/README.md) | [الأردية](../ur/README.md) | [الفيتنامية](../vi/README.md) - + +[العربية](./README.md) | [البنغالية](../bn/README.md) | [البلغارية](../bg/README.md) | [البورمية (ميانمار)](../my/README.md) | [الصينية (المبسطة)](../zh/README.md) | [الصينية (التقليدية، هونغ كونغ)](../hk/README.md) | [الصينية (التقليدية، ماكاو)](../mo/README.md) | [الصينية (التقليدية، تايوان)](../tw/README.md) | [الكرواتية](../hr/README.md) | [التشيكية](../cs/README.md) | [الدنماركية](../da/README.md) | [الهولندية](../nl/README.md) | [الإستونية](../et/README.md) | [الفنلندية](../fi/README.md) | [الفرنسية](../fr/README.md) | [الألمانية](../de/README.md) | [اليونانية](../el/README.md) | [العبرية](../he/README.md) | [الهندية](../hi/README.md) | [الهنغارية](../hu/README.md) | [الإندونيسية](../id/README.md) | [الإيطالية](../it/README.md) | [اليابانية](../ja/README.md) | [الكنادية](../kn/README.md) | [الكورية](../ko/README.md) | [الليتوانية](../lt/README.md) | [الماليزية](../ms/README.md) | [المالايالامية](../ml/README.md) | [الماراثية](../mr/README.md) | [النيبالية](../ne/README.md) | [النيجيرية بيدجين](../pcm/README.md) | [النرويجية](../no/README.md) | [الفارسية (الفارسية)](../fa/README.md) | [البولندية](../pl/README.md) | [البرتغالية (البرازيل)](../br/README.md) | [البرتغالية (البرتغال)](../pt/README.md) | [البنجابية (جيرموخي)](../pa/README.md) | [الرومانية](../ro/README.md) | [الروسية](../ru/README.md) | [الصربية (السيريلية)](../sr/README.md) | [السلوفاكية](../sk/README.md) | [السلوفينية](../sl/README.md) | [الإسبانية](../es/README.md) | [السواحيلية](../sw/README.md) | [السويدية](../sv/README.md) | [التاغالوغ (الفلبينية)](../tl/README.md) | [التاميل](../ta/README.md) | [التيلوجو](../te/README.md) | [التايلندية](../th/README.md) | [التركية](../tr/README.md) | [الأوكرانية](../uk/README.md) | [الأردية](../ur/README.md) | [الفيتنامية](../vi/README.md) -**إذا كنت ترغب في دعم لغات إضافية، يمكنك العثور على قائمة اللغات المدعومة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +> **هل تفضل الاستنساخ محليًا؟** -[![افتح في 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) +> يحتوي هذا المستودع على أكثر من 50 ترجمة لغوية مما يزيد بشكل كبير حجم التنزيل. للاستنساخ بدون الترجمات، استخدم 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' +> ``` +> هذا يمنحك كل ما تحتاجه لإكمال الدورة مع تحميل أسرع بكثير. + -#### 🧑‍🎓 _هل أنت طالب؟_ +**إذا كنت ترغب في دعم المزيد من اللغات، قائمة اللغات المدعومة موجودة [هنا](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، وحزم للطلاب، وحتى طرق للحصول على قسيمة شهادة مجانية. هذه الصفحة التي يجب أن تضيفها إلى مفضلتك وتتحقق منها من وقت لآخر حيث نقوم بتحديث المحتوى شهريًا. +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=فتح%20في%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -### 📣 إعلان - تحديات جديدة لوضع GitHub Copilot Agent لإكمالها! +#### 🧑‍🎓 _هل أنت طالب؟_ -تمت إضافة تحدٍ جديد، ابحث عن "تحدي GitHub Copilot Agent 🚀" في معظم الفصول. هذا تحدٍ جديد يمكنك إكماله باستخدام GitHub Copilot ووضع Agent. إذا لم تستخدم وضع Agent من قبل، فهو قادر على إنشاء النصوص وتحرير الملفات، وتشغيل الأوامر والمزيد. +قم بزيارة [**صفحة مركز الطلاب**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) حيث ستجد موارد للمبتدئين، حزم الطلاب وحتى طرق للحصول على قسيمة شهادة مجانية. هذه هي الصفحة التي يجب عليك وضعها في المفضلة والتحقق منها من وقت لآخر حيث نقوم بتحديث المحتوى شهريًا. -### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_ +### 📣 إعلان - تحديات وضع وكيل GitHub Copilot الجديد لإكمالها! -تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تحقق منه [المشروع](./09-chat-project/README.md) +تمت إضافة تحدي جديد، ابحث عن "تحدي وكيل GitHub Copilot 🚀" في معظم الفصول. هذا تحدي جديد لك لتكملته باستخدام GitHub Copilot ووضع الوكيل. إذا لم تستخدم وضع الوكيل من قبل، فهو قادر ليس فقط على توليد النصوص بل يمكنه أيضًا إنشاء وتحرير الملفات، تنفيذ الأوامر والمزيد. -### 📣 إعلان - _منهج جديد_ حول الذكاء الاصطناعي التوليدي لـ JavaScript تم إصداره للتو +### 📣 إعلان - _مشروع جديد للبناء باستخدام الذكاء الاصطناعي التوليدي_ -لا تفوت منهجنا الجديد للذكاء الاصطناعي التوليدي! +تمت إضافة مشروع مساعد الذكاء الاصطناعي الجديد، تفقده [المشروع](./9-chat-project/README.md) -قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء! +### 📣 إعلان - _منهج جديد_ عن الذكاء الاصطناعي التوليدي للـ JavaScript تم إصداره للتو -![الخلفية](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ar.png) +لا تفوت منهج الذكاء الاصطناعي التوليدي الجديد! -- دروس تغطي كل شيء من الأساسيات إلى RAG. -- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المرافق. -- سرد ممتع وجذاب، ستسافر عبر الزمن! +قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء! -![الشخصية](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ar.png) +![Background](../../translated_images/background.148a8d43afde5730.ar.png) -تتضمن كل درس مهمة لإكمالها، واختبار معرفة، وتحديًا لتوجيهك في تعلم مواضيع مثل: -- التوجيه وهندسة التوجيه -- إنشاء تطبيقات النصوص والصور -- تطبيقات البحث +- دروس تغطي كل شيء من الأساسيات إلى RAG. +- تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المصاحب. +- سرد ممتع وجذاب، ستسافر عبر الزمن! -قم بزيارة [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) للبدء! +![character](../../translated_images/character.5c0dd8e067ffd693.ar.png) -## 🌱 البدء -> **المعلمين**، لقد قمنا [بتضمين بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج. نود سماع ملاحظاتكم [في منتدى النقاش الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +كل درس يتضمن مهمة يجب إتمامها، اختبار معرفة، وتحدي لتوجيهك في تعلم موضوعات مثل: +- التهيئة و هندسة التهيئة +- إنشاء تطبيقات النصوص والصور +- تطبيقات البحث -**[المتعلمين](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار ما قبل المحاضرة وتابع بقراءة المادة التعليمية، وأكمل الأنشطة المختلفة وتحقق من فهمك من خلال اختبار ما بعد المحاضرة. +قم بزيارة [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) للبدء! -لتحسين تجربتك التعليمية، تواصل مع زملائك للعمل على المشاريع معًا! يتم تشجيع النقاشات في [منتدى النقاش الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريقنا من المشرفين متاحًا للإجابة على أسئلتك. -لتعزيز تعليمك، نوصي بشدة باستكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) للحصول على مواد دراسية إضافية. -### 📋 إعداد بيئتك +## 🌱 البدء -هذا المنهج يحتوي على بيئة تطوير جاهزة! عند البدء، يمكنك اختيار تشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة مستندة إلى المتصفح، لا حاجة للتثبيت_)، أو محليًا على جهاز الكمبيوتر الخاص بك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +> **أيها المعلمون**، لقد قمنا بتضمين [بعض الاقتراحات](for-teachers.md) حول كيفية استخدام هذا المنهج الدراسي. نود الحصول على ملاحظاتكم [في منتدى المناقشة الخاص بنا](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -#### إنشاء مستودعك -لحفظ عملك بسهولة، يُوصى بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك القيام بذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيؤدي ذلك إلى إنشاء مستودع جديد في حساب GitHub الخاص بك مع نسخة من المنهج. +**[المتعلمون](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**، لكل درس، ابدأ باختبار قبل المحاضرة، ثم اقرأ المادة، أكمل الأنشطة المختلفة، وتحقق من فهمك باستخدام اختبار بعدها. -اتبع هذه الخطوات: -1. **قم بعمل Fork للمستودع**: انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة. -2. **استنسخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +لتعزيز تجربتك التعليمية، تواصل مع زملائك للعمل معًا على المشاريع! نرحب بالنقاشات في [منتدى المناقشة](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) حيث سيكون فريق المشرفين متاحًا للرد على أسئلتك. -#### تشغيل المنهج في Codespace +لتعزيز تعليمك، نوصي بشدة استكشاف [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) لمواد دراسية إضافية. -في نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** واختر **Open with Codespaces**. سيؤدي ذلك إلى إنشاء Codespace جديد للعمل فيه. +### 📋 إعداد بيئتك -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ar.png) +هذا المنهج يحتوي على بيئة تطوير جاهزة للاستخدام! عند البدء يمكنك الاختيار لتشغيل المنهج في [Codespace](https://github.com/features/codespaces/) (_بيئة قائمة على المتصفح لا تحتاج للتثبيت_), أو محليًا على جهازك باستخدام محرر نصوص مثل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### تشغيل المنهج محليًا على جهاز الكمبيوتر الخاص بك +#### إنشاء مستودعك +لتسهيل حفظ عملك، يُنصح بإنشاء نسخة خاصة بك من هذا المستودع. يمكنك فعل ذلك بالنقر على زر **Use this template** في أعلى الصفحة. سيُنشئ هذا مستودعًا جديدًا في حساب GitHub الخاص بك مع نسخة من المنهج. -لتشغيل هذا المنهج محليًا على جهاز الكمبيوتر الخاص بك، ستحتاج إلى محرر نصوص، ومتصفح، وأداة سطر أوامر. سيرشدك درسنا الأول، [مقدمة إلى لغات البرمجة وأدوات العمل](../../1-getting-started-lessons/1-intro-to-programming-languages)، عبر الخيارات المختلفة لكل من هذه الأدوات لتحديد ما يناسبك. +اتبع هذه الخطوات: +1. **إنشاء فرع من المستودع**: انقر على زر "Fork" في أعلى يمين هذه الصفحة. +2. **استنساخ المستودع**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر، والذي يحتوي أيضًا على [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) مدمج. يمكنك تنزيل Visual Studio Code [هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### تشغيل المنهج في Codespace -1. استنسخ مستودعك إلى جهاز الكمبيوتر الخاص بك. يمكنك القيام بذلك بالنقر على زر **Code** ونسخ الرابط: +في نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** واختر **Open with Codespaces**. سيُنشئ هذا Codespace جديدًا لتعمل فيه. - [CodeSpace](./images/createcodespace.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ar.png) - ثم افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `` بالرابط الذي نسخته للتو: +#### تشغيل المنهج محليًا على جهازك + +لتشغيل هذا المنهج محليًا على جهازك، ستحتاج إلى محرر نصوص، متصفح، وأداة سطر أوامر. درسك الأول، [مقدمة إلى لغات البرمجة وأدوات المهنة](../../1-getting-started-lessons/1-intro-to-programming-languages)، سيرشدك إلى الخيارات المتنوعة لكل من هذه الأدوات لتختار الأنسب لك. + +توصيتنا هي استخدام [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) كمحرر، والذي يحتوي أيضًا على [طرفية مدمجة](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). يمكنك تحميل Visual Studio Code من [هنا](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). + + +1. استنسخ المستودع إلى جهازك. يمكنك ذلك بالنقر على زر **Code** ونسخ الرابط: + + [CodeSpace](./images/createcodespace.png) +ثم، افتح [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) داخل [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) وقم بتشغيل الأمر التالي، مع استبدال `` بالرابط الذي نسخته للتو: ```bash git clone ``` - -2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **File** > **Open Folder** واختيار المجلد الذي قمت باستنساخه للتو. - -> الإضافات الموصى بها لـ Visual Studio Code: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك في كتابة الكود بشكل أسرع - -## 📂 كل درس يتضمن: - -- رسم تخطيطي اختياري -- فيديو إضافي اختياري -- اختبار تمهيدي قبل الدرس -- درس مكتوب -- في الدروس القائمة على المشاريع، إرشادات خطوة بخطوة حول كيفية بناء المشروع -- اختبارات المعرفة -- تحدٍ -- قراءة إضافية -- واجب + +2. افتح المجلد في Visual Studio Code. يمكنك القيام بذلك بالنقر على **ملف** > **فتح مجلد** واختيار المجلد الذي قمت باستنساخه للتو. + +> الإضافات الموصى بها لـ Visual Studio Code: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - لمعاينة صفحات HTML داخل Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - لمساعدتك على كتابة الكود بشكل أسرع + +## 📂 تتضمن كل درس: + +- مذكرة تخطيطية اختيارية +- فيديو داعم اختياري +- اختبار إحماء قبل الدرس +- الدرس المكتوب +- لدروس المشروع، إرشادات خطوة بخطوة حول كيفية بناء المشروع +- اختبارات معرفة +- تحدي +- قراءة داعمة +- مهمة - [اختبار بعد الدرس](https://ff-quizzes.netlify.app/web/) -> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`. +> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، مجموع 48 اختبارًا يحتوي كل منها على ثلاث أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبارات محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`. ## 🗃️ الدروس -| | اسم المشروع | المفاهيم التي يتم تدريسها | أهداف التعلم | الدرس المرتبط | المؤلف | +| | اسم المشروع | المفاهيم التي يتم تعليمها | الأهداف التعليمية | الدرس المرتبط | المؤلف | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | البداية | مقدمة في البرمجة وأدوات العمل | تعلم الأساسيات وراء معظم لغات البرمجة والبرامج التي تساعد المطورين المحترفين في أداء وظائفهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | البداية | أساسيات GitHub، بما في ذلك العمل مع فريق | كيفية استخدام GitHub في مشروعك، وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة في GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | البداية | الوصولية | تعلم أساسيات الوصولية على الويب | [أساسيات الوصولية](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | أساسيات JS | أنواع البيانات في JavaScript | أساسيات أنواع البيانات في JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | أساسيات JS | الدوال والطرق | تعلم الدوال والطرق لإدارة تدفق منطق التطبيق | [الدوال والطرق](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء الشروط في الكود باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في الممارسة | بناء HTML لإنشاء تيراريوم عبر الإنترنت، مع التركيز على بناء التخطيط | [مقدمة في HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في الممارسة | بناء CSS لتنسيق التيراريوم عبر الإنترنت، مع التركيز على أساسيات CSS بما في ذلك جعل الصفحة متجاوبة | [مقدمة في CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق JavaScript، التلاعب بـ DOM | بناء JavaScript لجعل التيراريوم يعمل كواجهة سحب/إفلات، مع التركيز على الإغلاق والتلاعب بـ DOM | [إغلاق JavaScript، التلاعب بـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتحريك منطق تطبيق JavaScript الخاص بك | [البرمجة القائمة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيفية عمل المتصفحات، تاريخها، وكيفية إنشاء العناصر الأولى من إضافة المتصفح | [حول المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات في التخزين المحلي | بناء عناصر JavaScript لإضافة المتصفح لاستدعاء API باستخدام المتغيرات المخزنة في التخزين المحلي | [APIs، النماذج، والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدام العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعلم حول أداء الويب وبعض التحسينات لجعلها أفضل | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | تطوير الألعاب المتقدم باستخدام JavaScript | تعلم حول الوراثة باستخدام كل من الفئات والتكوين ونمط Pub/Sub، كتحضير لبناء لعبة | [مقدمة في تطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | الرسم على اللوحة | تعلم حول واجهة Canvas API، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | تحريك العناصر على الشاشة | اكتشاف كيفية تحريك العناصر باستخدام الإحداثيات الكارتيزية وواجهة Canvas API | [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | اكتشاف التصادم | جعل العناصر تتصادم وتتفاعل مع بعضها البعض باستخدام ضغطات المفاتيح وتوفير وظيفة تبريد لضمان أداء اللعبة | [اكتشاف التصادم](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | تسجيل النقاط | إجراء حسابات رياضية بناءً على حالة اللعبة وأدائها | [تسجيل النقاط](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | تعلم حول إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الأصول وإعادة تعيين قيم المتغيرات | [حالة النهاية](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء هيكل موقع ويب متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | بناء نموذج تسجيل الدخول والتسجيل | تعلم حول بناء النماذج والتعامل مع إجراءات التحقق | [النماذج](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | طرق جلب البيانات واستخدامها | كيفية تدفق البيانات داخل وخارج التطبيق الخاص بك، وكيفية جلبها، تخزينها، والتخلص منها | [البيانات](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلم كيفية احتفاظ التطبيق بالحالة وكيفية إدارتها برمجيًا | [إدارة الحالة](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | العمل مع VScode | تعلم كيفية استخدام محرر الكود | [استخدام محرر الكود VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيفية بناء مساعد ذكاء اصطناعي خاص بك | [مشروع مساعد الذكاء الاصطناعي](./9-chat-project/README.md) | Chris | - -## 🏫 أسلوب التدريس - -تم تصميم منهجنا بمبدأين رئيسيين في التدريس: +| 01 | البدء | مقدمة في البرمجة وأدوات العمل | تعلم الأسس الأساسية التي تقوم عليها معظم لغات البرمجة وعن البرامج التي تساعد المطورين المحترفين في أداء مهامهم | [مقدمة في لغات البرمجة وأدوات العمل](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | البدء | أساسيات GitHub، تتضمن العمل ضمن فريق | كيفية استخدام GitHub في مشروعك وكيفية التعاون مع الآخرين على قاعدة الكود | [مقدمة إلى GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | البدء | الوصولية | تعلم أساسيات الوصولية على الويب | [أساسيات الوصولية](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | أساسيات JS | أنواع بيانات JavaScript | أساسيات أنواع بيانات JavaScript | [أنواع البيانات](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | أساسيات JS | الدوال والطرق | تعلم عن الدوال والطرق لإدارة تدفق منطق التطبيق | [الدوال والطرق](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | أساسيات JS | اتخاذ القرارات باستخدام JS | تعلم كيفية إنشاء شروط في كودك باستخدام طرق اتخاذ القرار | [اتخاذ القرارات](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | أساسيات JS | المصفوفات والحلقات | العمل مع البيانات باستخدام المصفوفات والحلقات في JavaScript | [المصفوفات والحلقات](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML في التطبيق العملي | بناء HTML لإنشاء تيراريوم على الإنترنت مع التركيز على بناء التخطيط | [مقدمة إلى HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS في التطبيق العملي | بناء CSS لتنسيق التيراريوم على الإنترنت مع التركيز على أساسيات CSS تشمل جعل الصفحة متجاوبة | [مقدمة إلى CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | إغلاق جافاسكريبت، والتلاعب بالـ DOM | بناء كود JavaScript لجعل التيراريوم يعمل كواجهة سحب وإفلات، مع التركيز على الإغلاقات والتلاعب بـ DOM | [إغلاقات JavaScript، والتلاعب بالـ DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | بناء لعبة كتابة | تعلم كيفية استخدام أحداث لوحة المفاتيح لتشغيل منطق تطبيق JavaScript الخاص بك | [البرمجة المعتمدة على الأحداث](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمل مع المتصفحات | تعلم كيف تعمل المتصفحات، تاريخها وكيفية وضع الهيكل الأول لعناصر ملحق المتصفح | [عن المتصفحات](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | بناء نموذج، استدعاء API وتخزين المتغيرات محليًا | بناء عناصر JavaScript لملحق متصفحك لاستدعاء API باستخدام متغيرات مخزنة في التخزين المحلي | [APIs، النماذج، والتخزين المحلي](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | العمليات الخلفية في المتصفح، أداء الويب | استخدم العمليات الخلفية للمتصفح لإدارة أيقونة الإضافة؛ تعرف على أداء الويب وبعض التحسينات لتحقيق أفضل أداء | [المهام الخلفية والأداء](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | تطوير ألعاب أكثر تقدمًا مع JavaScript | تعلم عن الوراثة باستخدام كل من الصفوف والتكوين ونمط النشر والاشتراك، استعدادًا لبناء لعبة | [مقدمة لتطوير الألعاب المتقدم](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | الرسم على اللوحة | تعلم عن Canvas API، المستخدمة لرسم العناصر على الشاشة | [الرسم على اللوحة](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | تحريك العناصر حول الشاشة | اكتشف كيف تكسب العناصر حركة باستخدام الإحداثيات الكارتيزية وCanvas API | [تحريك العناصر](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | اكتشاف التصادم | جعل العناصر تصطدم وتتفاعل مع بعضها باستخدام ضغطات المفاتيح وتوفير دالة تبريد لضمان أداء اللعبة | [اكتشاف التصادم](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | الاحتفاظ بالنتيجة | إجراء حسابات رياضية بناءً على حالة اللعبة وأدائها | [الاحتفاظ بالنتيجة](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | إنهاء اللعبة وإعادة تشغيلها | تعلم عن إنهاء اللعبة وإعادة تشغيلها، بما في ذلك تنظيف الموارد وإعادة ضبط قيم المتغيرات | [شرط النهاية](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | قوالب HTML والمسارات في تطبيق ويب | تعلم كيفية إنشاء هيكل موقع متعدد الصفحات باستخدام التوجيه وقوالب HTML | [قوالب HTML والمسارات](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | بناء نموذج تسجيل الدخول والتسجيل | تعلم عن بناء النماذج والتعامل مع روتين التحقق | [النماذج](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | طرق جلب البيانات واستخدامها | كيف تتدفق البيانات داخل وخارج تطبيقك، كيفية جلبها وتخزينها والتخلص منها | [البيانات](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | مفاهيم إدارة الحالة | تعلم كيف يحتفظ تطبيقك بالحالة وكيفية إدارتها برمجياً | [إدارة الحالة](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | العمل مع VScode | تعلم كيفية استخدام محرر الأكواد| [استخدام محرر الأكواد VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | العمل مع الذكاء الاصطناعي | تعلم كيف تبني مساعدك الذكي الخاص | [مشروع مساعد ذكي](./9-chat-project/README.md) | Chris | + +## 🏫 المنهجية التعليمية + +تم تصميم منهجنا الدراسي استنادًا إلى مبدئين تربويين رئيسيين: * التعلم القائم على المشاريع * الاختبارات المتكررة -يعلم البرنامج أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، تيراريوم افتراضي، إضافة متصفح صديقة للبيئة، لعبة بأسلوب Space Invader، وتطبيق مصرفي للشركات. بحلول نهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب. +البرنامج يعلّم أساسيات JavaScript وHTML وCSS، بالإضافة إلى أحدث الأدوات والتقنيات التي يستخدمها مطورو الويب اليوم. سيحصل الطلاب على فرصة لتطوير خبرة عملية من خلال بناء لعبة كتابة، وتيراريوم افتراضي، وامتداد متصفح صديق للبيئة، ولعبة على شكل غزو الفضاء، وتطبيق مصرفي للأعمال. بنهاية السلسلة، سيكون لدى الطلاب فهم قوي لتطوير الويب. -> 🎓 يمكنك أخذ الدروس الأولى في هذا المنهج كـ [مسار تعلم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn! +> 🎓 يمكنك أخذ الدروس القليلة الأولى في هذا المنهج كـ [مسار تعلّم](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) على Microsoft Learn! -من خلال ضمان توافق المحتوى مع المشاريع، يصبح العملية أكثر جاذبية للطلاب ويتم تعزيز الاحتفاظ بالمفاهيم. كما كتبنا عدة دروس تمهيدية في أساسيات JavaScript لتقديم المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة المبتدئين: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" من دروس الفيديو، التي ساهم بعض مؤلفيها في هذا المنهج. +من خلال ضمان توافق المحتوى مع المشاريع، يصبح التعلم أكثر تشويقًا للطلاب ويزيد من الاحتفاظ بالمفاهيم. كتبنا أيضًا عدة دروس تمهيدية في أساسيات JavaScript لتعريف المفاهيم، مقترنة بفيديو من مجموعة "[سلسلة للمبتدئين إلى: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"، بعض مؤلفيها ساهموا في هذا المنهج. -بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الفصل نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار ثانٍ بعد الفصل مزيدًا من الاحتفاظ. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا بحلول نهاية الدورة التي تستمر 12 أسبوعًا. +بالإضافة إلى ذلك، يحدد اختبار منخفض المخاطر قبل الصف نية الطالب نحو تعلم موضوع معين، بينما يضمن اختبار آخر بعد الصف مزيدًا من الاحتفاظ بالمفاهيم. تم تصميم هذا المنهج ليكون مرنًا وممتعًا ويمكن أخذه بالكامل أو جزئيًا. تبدأ المشاريع صغيرة وتصبح أكثر تعقيدًا في نهاية دورة الـ 12 أسبوعًا. -بينما تجنبنا عمدًا إدخال أطر عمل JavaScript للتركيز على المهارات الأساسية المطلوبة كمطور ويب قبل تبني إطار عمل، فإن الخطوة التالية الجيدة لإكمال هذا المنهج ستكون تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[سلسلة المبتدئين: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +بينما تجنبنا عمدًا تقديم أطر عمل JavaScript للتركيز على المهارات الأساسية التي يحتاجها مطور الويب قبل اعتماد إطار عمل، تكون الخطوة التالية الجيدة بعد إتمام هذا المنهج هي تعلم Node.js عبر مجموعة أخرى من الفيديوهات: "[السلسلة للمبتدئين إلى: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> قم بزيارة [مدونة قواعد السلوك](CODE_OF_CONDUCT.md) و[إرشادات المساهمة](CONTRIBUTING.md). نرحب بملاحظاتك البناءة! +> زر إرشاداتنا في [مدونة السلوك](CODE_OF_CONDUCT.md) و[المساهمة](CONTRIBUTING.md). نرحب بتعليقاتك البناءة! ## 🧭 الوصول دون اتصال -يمكنك تشغيل هذا التوثيق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بعمل Fork لهذا المستودع، [قم بتثبيت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على localhost الخاص بك: `localhost:3000`. +يمكنك تشغيل هذه الوثائق دون اتصال باستخدام [Docsify](https://docsify.js.org/#/). قم بنسخ هذا المستودع، [ثبت Docsify](https://docsify.js.org/#/quickstart) على جهازك المحلي، ثم في المجلد الجذر لهذا المستودع، اكتب `docsify serve`. سيتم تقديم الموقع على المنفذ 3000 على مضيفك المحلي: `localhost:3000`. -## 📘 PDF +## 📘 ملف PDF يمكن العثور على ملف PDF لجميع الدروس [هنا](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 دورات أخرى +فريقنا ينتج دورات أخرى! اطلع على: -فريقنا ينتج دورات أخرى! تحقق من: - -### Azure / Edge / MCP / Agents -[![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) -[![الذكاء الاصطناعي الطرفي للمبتدئين](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 للمبتدئين](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) -[![وكلاء الذكاء الاصطناعي للمبتدئين](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 للمبتدئين](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 للمبتدئين](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) --- -### سلسلة الذكاء الاصطناعي التوليدي -[![الذكاء الاصطناعي التوليدي للمبتدئين](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) -[![الذكاء الاصطناعي التوليدي (.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) -[![الذكاء الاصطناعي التوليدي (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) -[![الذكاء الاصطناعي التوليدي (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 / Agents +[![AZD للمبتدئين](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 للمبتدئين](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 للمبتدئين](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) +[![وكلاء الذكاء الاصطناعي للمبتدئين](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) --- - -### التعلم الأساسي -[![تعلم الآلة للمبتدئين](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) -[![علم البيانات للمبتدئين](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) -[![الذكاء الاصطناعي للمبتدئين](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) -[![الأمن السيبراني للمبتدئين](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) -[![تطوير الويب للمبتدئين](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) -[![إنترنت الأشياء للمبتدئين](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 للمبتدئين](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) + +### سلسلة الذكاء الاصطناعي التوليدي +[![الذكاء الاصطناعي التوليدي للمبتدئين](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) +[![الذكاء الاصطناعي التوليدي (.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) +[![الذكاء الاصطناعي التوليدي (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) +[![الذكاء الاصطناعي التوليدي (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) --- + +### التعلم الأساسي +[![تعلم الآلة للمبتدئين](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) +[![علم البيانات للمبتدئين](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) +[![الذكاء الاصطناعي للمبتدئين](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) +[![الأمن السيبراني للمبتدئين](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) +[![تطوير الويب للمبتدئين](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) +[![إنترنت الأشياء للمبتدئين](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 للمبتدئين](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) -### سلسلة Copilot -[![Copilot للبرمجة المزدوجة بالذكاء الاصطناعي](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 لـ 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](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) +--- + +### سلسلة كوبايلوت +[![كوبايلوت للبرمجة الزوجية بالذكاء الاصطناعي](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) +[![كوبايلوت لـ 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) +[![مغامرة كوبايلوت](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) + -## الحصول على المساعدة +## الحصول على المساعدة -إذا واجهت صعوبة أو كانت لديك أسئلة حول بناء تطبيقات الذكاء الاصطناعي، انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث يتم الترحيب بالأسئلة ومشاركة المعرفة بحرية. +إذا واجهت مشاكل أو كان لديك أي أسئلة حول بناء تطبيقات الذكاء الاصطناعي. انضم إلى المتعلمين الآخرين والمطورين ذوي الخبرة في مناقشات حول MCP. إنها مجتمع داعم حيث تُرحب بالأسئلة ويُشارك المعرفة بحرية. -[![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) -إذا كانت لديك ملاحظات حول المنتج أو أخطاء أثناء البناء، قم بزيارة: +إذا كان لديك ملاحظات على المنتج أو أخطاء أثناء البناء، قم بزيارة: -[![منتدى مطوري 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](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) -## الترخيص +## الترخيص -هذا المستودع مرخص بموجب ترخيص MIT. راجع ملف [LICENSE](../../LICENSE) لمزيد من المعلومات. +هذا المستودع مرخص بموجب رخصة MIT. انظر ملف [LICENSE](../../LICENSE) للمزيد من المعلومات. --- -**إخلاء المسؤولية**: -تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة. +**إخلاء مسؤولية**: +تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية [Co-op Translator](https://github.com/Azure/co-op-translator). وبينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق به. للمعلومات الهامة، يُنصح بالاعتماد على الترجمة البشرية المهنية. نحن غير مسؤولين عن أي سوء فهم أو تفسير ناتج عن استخدام هذه الترجمة. \ No newline at end of file diff --git a/translations/ar/for-teachers.md b/translations/ar/for-teachers.md index 91fa6f81c..20d936c4a 100644 --- a/translations/ar/for-teachers.md +++ b/translations/ar/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - لدى Moodle Cloud دعم محدود لـ Common Cartridge. يُفضل استخدام ملف Moodle أعلاه، والذي يمكن أيضًا تحميله في Canvas. - بعد الاستيراد، راجع الوحدات، المواعيد النهائية، وإعدادات الامتحانات لتتناسب مع جدول الفصل الدراسي الخاص بك. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ar.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ar.png) > المنهج الدراسي في فصل Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ar.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ar.png) > المنهج الدراسي في Canvas ### استخدام المستودع مباشرة (بدون Classroom) diff --git a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md index afee0316b..f2d2c9279 100644 --- a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,64 +1,247 @@ -# Einführung in Programmiersprachen und Werkzeuge des Handwerks +# Einführung in Programmiersprachen und moderne Entwickler-Tools -Diese Lektion behandelt die Grundlagen von Programmiersprachen. Die hier behandelten Themen gelten für die meisten modernen Programmiersprachen. Im Abschnitt "Werkzeuge des Handwerks" lernen Sie nützliche Software kennen, die Ihnen als Entwickler hilft. +Hey du, zukünftiger Entwickler! 👋 Darf ich dir etwas erzählen, das mir jeden einzelnen Tag eine Gänsehaut bereitet? Du bist kurz davor zu entdecken, dass Programmieren nicht nur etwas mit Computern zu tun hat – es geht darum, echte Superkräfte zu besitzen, um deine wildesten Ideen zum Leben zu erwecken! -![Intro Programmierung](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.de.png) +Du kennst diesen Moment, wenn du deine Lieblings-App benutzt und alles einfach perfekt zusammenpasst? Wenn du auf einen Knopf tippst und etwas absolut Magisches passiert, das dich denken lässt: „Wow, wie haben die DAS gemacht?“ Nun, jemand wie du – wahrscheinlich gerade in seinem Lieblingscafé um 2 Uhr morgens mit dem dritten Espresso – hat den Code geschrieben, der diese Magie erschaffen hat. Und hier kommt das, was dir den Kopf sprengen wird: Am Ende dieser Lektion wirst du nicht nur verstehen, wie sie es gemacht haben, sondern du wirst es kaum erwarten können, es selbst auszuprobieren! + +Schau mal, ich kann total nachvollziehen, wenn Programmieren gerade einschüchternd wirkt. Als ich angefangen habe, dachte ich ehrlich, man müsse ein Mathegenie sein oder seit fünf Jahren programmieren. Aber weißt du, was meine Sichtweise komplett verändert hat? Programmieren ist genau so, wie eine neue Sprache zu lernen. Man fängt mit „Hallo“ und „Danke“ an, dann bestellt man Kaffee, und ehe man sich versieht, führt man tiefgründige philosophische Gespräche! Nur in diesem Fall sprechen wir mit Computern, und weißt du was? Sie sind die geduldigsten Gesprächspartner, die du je haben wirst – sie richten sich nie nach deinen Fehlern und freuen sich immer darauf, es nochmal zu versuchen! + +Heute werden wir die unglaublichen Werkzeuge erkunden, die moderne Webentwicklung nicht nur möglich, sondern richtig süchtig machend machen. Ich spreche von genau denselben Editoren, Browsern und Workflows, die Entwickler bei Netflix, Spotify und deinem Lieblings-Indie-App-Studio jeden einzelnen Tag verwenden. Und hier kommt der Teil, der dich einen Freudentanz machen lässt: Die meisten dieser professionellen, industrieweiten Werkzeuge sind komplett kostenlos! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.de.png) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) -## Quiz vor der Vorlesung -[Quiz vor der Vorlesung](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +```mermaid +journey + title Deine Programmierreise heute + section Entdecken + Was ist Programmierung: 5: You + Programmiersprachen: 4: You + Werkzeugübersicht: 5: You + section Erkunden + Code-Editoren: 4: You + Browser & Entwicklertools: 5: You + Kommandozeile: 3: You + section Üben + Sprachdetektiv: 4: You + Werkzeugerkundung: 5: You + Community-Verbindung: 5: You +``` +## Lass uns sehen, was du schon weißt! + +Bevor wir in den Spaß eintauchen, bin ich neugierig – was weißt du schon über diese Programmierwelt? Und hör zu, wenn du diese Fragen siehst und denkst: „Ich habe buchstäblich keinen Schimmer von irgendwas“, dann ist das nicht nur okay, das ist perfekt! Das bedeutet, du bist genau am richtigen Ort. Denk an dieses Quiz wie an das Aufwärmen vor einem Workout – wir bereiten nur die Gehirnmuskeln vor! + +[Mach das Pre-Lesson-Quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) + + +## Das Abenteuer, auf das wir uns gemeinsam begeben + +Okay, ich bin wirklich voller Vorfreude, was wir heute erkunden werden! Im Ernst, ich wünschte, ich könnte dein Gesicht sehen, wenn einige dieser Konzepte Klick machen. Hier ist die unglaubliche Reise, auf die wir uns begeben: + +- **Was Programmieren eigentlich ist (und warum es das coolste überhaupt ist!)** – Wir werden entdecken, wie Code buchstäblich die unsichtbare Magie ist, die alles um dich herum antreibt, vom Wecker, der irgendwie weiß, dass Montagmorgen ist, bis hin zum Algorithmus, der deine Netflix-Empfehlungen perfekt kuratiert +- **Programmiersprachen und ihre erstaunlichen Persönlichkeiten** – Stell dir vor, du gehst auf eine Party, bei der jede Person ganz andere Superkräfte und Problemlösungsmethoden hat. So ist die Welt der Programmiersprachen, und du wirst es lieben, sie kennenzulernen! +- **Die grundlegenden Bausteine, die digitale Magie möglich machen** – Stell sie dir als das ultimative kreative LEGO-Set vor. Sobald du verstehst, wie diese Teile zusammenpassen, wirst du erkennen, dass du buchstäblich alles bauen kannst, was deine Fantasie träumt +- **Professionelle Werkzeuge, die dir das Gefühl geben, gerade einen Zauberstab in die Hand gelegt bekommen zu haben** – Ich übertreibe nicht – diese Tools lassen dich wirklich fühlen, als hättest du Superkräfte, und das Beste? Es sind genau dieselben, die die Profis verwenden! + +> 💡 **Hier ist das Wichtigste:** Versuch heute nicht einmal, alles auswendig zu lernen! Im Moment sollst du nur das Feuer der Begeisterung spüren, was alles möglich ist. Die Details bleiben ganz natürlich hängen, während wir zusammen üben – so funktioniert echtes Lernen! + +> Du kannst diese Lektion auch auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) machen! + +## Was genau *ist* eigentlich Programmieren? + +Okay, packen wir die Millionen-Dollar-Frage an: Was ist Programmieren wirklich? + +Ich erzähle dir eine Geschichte, die meine Sicht darauf komplett verändert hat. Letzte Woche habe ich versucht, meiner Mutter zu erklären, wie man unsere neue Smart-TV-Fernbedienung benutzt. Ich ertappte mich dabei zu sagen: „Drück den roten Knopf, aber nicht den großen roten Knopf, den kleinen roten Knopf links... nein, deine andere linke Seite... okay, jetzt halt ihn zwei Sekunden gedrückt, nicht eine, nicht drei...“ Kommt dir das bekannt vor? 😅 + +Das ist Programmieren! Es ist die Kunst, unglaublich detaillierte, Schritt-für-Schritt-Anweisungen zu geben für etwas, das sehr mächtig ist, aber alles perfekt erklärt bekommen muss. Nur dass du hier nicht deiner Mutter erklärst (die fragen könnte: „Welcher rote Knopf?!“), sondern einem Computer (der genau das macht, was du sagst – auch wenn das, was du gesagt hast, nicht ganz das ist, was du meintest). + +Was mich umgehauen hat, als ich das zum ersten Mal gelernt habe: Computer sind im Grunde genommen ziemlich simpel. Sie verstehen buchstäblich nur zwei Dinge – 1 und 0, was im Grunde „ja“ und „nein“ oder „an“ und „aus“ bedeutet. Das war’s! Aber hier wird es magisch – wir müssen nicht in 1en und 0en sprechen, als wären wir in der Matrix. Hier kommen **Programmiersprachen** ins Spiel. Sie sind wie der beste Übersetzer der Welt, der deine vollkommen normalen menschlichen Gedanken in Computersprache übersetzt. + +Und hier ist das, was mir jeden Morgen echte Gänsehaut bereitet: Buchstäblich *alles* Digitale in deinem Leben begann mit jemandem genau wie dir, wahrscheinlich im Schlafanzug mit einer Tasse Kaffee, der Code auf seinem Laptop tippte. Dieser Instagram-Filter, der dich makellos aussehen lässt? Jemand hat den Code dafür geschrieben. Die Empfehlung, die dich zu deinem neuen Lieblingssong geführt hat? Ein Entwickler hat diesen Algorithmus gebaut. Die App, die dir hilft, die Rechnung fürs Abendessen mit Freunden zu teilen? Jep, jemand dachte: „Das ist nervig, das kann ich bestimmt reparieren“ – und dann hat er es getan! + +Wenn du programmieren lernst, lernst du nicht nur eine neue Fähigkeit – du wirst Teil dieser unglaublichen Community von Problemlösern, die ihre Tage damit verbringen zu denken: „Was, wenn ich etwas bauen könnte, das jemanden den Tag nur ein bisschen besser macht?“ Mal ehrlich, gibt es was Cooleres? + +✅ **Spaß-Fakt-Suche**: Hier ist etwas super Cooles zum Nachschlagen, wenn du mal Zeit hast – wer war deiner Meinung nach die weltweit erste Computerprogrammiererin? Ich gebe dir einen Tipp: Es ist vielleicht nicht die Person, die du erwartest! Die Geschichte dahinter ist absolut faszinierend und zeigt, dass Programmieren schon immer um kreatives Problemlösen und Querdenken ging. -## Einführung +### 🧠 **Kurzer Check: Wie fühlst du dich?** -In dieser Lektion behandeln wir: +**Nimm dir einen Moment zum Nachdenken:** +- Macht dir der Gedanke „Anweisungen an Computer geben“ jetzt Sinn? +- Fallen dir tägliche Aufgaben ein, die du gerne mit Programmierung automatisieren würdest? +- Welche Fragen gehen dir gerade zum Thema Programmieren durch den Kopf? -- Was ist Programmierung? -- Arten von Programmiersprachen -- Grundelemente eines Programms -- Nützliche Software und Werkzeuge für professionelle Entwickler +> **Denk daran:** Es ist total normal, wenn dir einige Konzepte gerade noch etwas verwirrend vorkommen. Programmieren zu lernen ist wie eine neue Sprache lernen – das Gehirn braucht Zeit, um neue Verbindungen zu knüpfen. Du machst das super! -> Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) absolvieren! +## Programmiersprachen sind wie verschiedene Zaubergeschmäcker -## Was ist Programmierung? +Okay, das klingt jetzt vielleicht komisch, aber bleib dran – Programmiersprachen sind wie verschiedene Musikrichtungen. Überleg mal: Es gibt Jazz, der weich und improvisierend ist, Rock, der kraftvoll und direkt ist, Klassik, die elegant und strukturiert ist, und Hip-Hop, der kreativ und ausdrucksstark ist. Jede Stilrichtung hat ihre eigene Atmosphäre, ihre eigene Community von leidenschaftlichen Fans, und jede ist perfekt für verschiedene Stimmungen und Anlässe. -Programmierung (auch bekannt als Codierung) ist der Prozess des Schreibens von Anweisungen für ein Gerät wie einen Computer oder ein mobiles Gerät. Wir schreiben diese Anweisungen mit einer Programmiersprache, die dann vom Gerät interpretiert wird. Diese Anweisungen können verschiedene Namen haben, aber *Programm*, *Computerprogramm*, *Anwendung (App)* und *ausführbare Datei* sind einige gängige Begriffe. +Programmiersprachen funktionieren genau so! Du würdest nicht dieselbe Sprache verwenden, um ein lustiges Mobile-Spiel zu bauen, wie du sie nutzen würdest, um riesige Datenmengen zum Klima zu verarbeiten – genauso wenig würdest du Death Metal im Yoga-Kurs hören (naja, die meisten Yoga-Kurse jedenfalls! 😄). -Ein *Programm* kann alles sein, was mit Code geschrieben wurde; Websites, Spiele und Handy-Apps sind Programme. Obwohl es möglich ist, ein Programm ohne Code zu erstellen, wird die zugrunde liegende Logik vom Gerät interpretiert, und diese Logik wurde höchstwahrscheinlich mit Code geschrieben. Ein Programm, das *läuft* oder *Code ausführt*, führt Anweisungen aus. Das Gerät, mit dem Sie diese Lektion lesen, führt ein Programm aus, um sie auf Ihrem Bildschirm anzuzeigen. +Aber hier kommt das, was mich jedes Mal umhaut, wenn ich drüber nachdenke: Diese Sprachen sind wie der geduldigste, brillanteste Dolmetscher der Welt, der direkt neben dir sitzt. Du kannst deine Ideen auf eine Weise ausdrücken, die deinem menschlichen Gehirn natürlich vorkommt, und sie erledigen all die unglaublich komplexe Arbeit, das in die 1en und 0en zu übersetzen, die Computer tatsächlich sprechen. Es ist wie ein Freund, der perfekt zweisprachig ist in „menschlicher Kreativität“ und „Computerlogik“ – und nie müde wird, nie Kaffeepausen braucht und dich auch nicht beurteilt, wenn du dieselbe Frage zweimal stellst! -✅ Machen Sie ein wenig Recherche: Wer gilt als der erste Computerprogrammierer der Welt? +### Beliebte Programmiersprachen und ihre Anwendungsgebiete -## Programmiersprachen +```mermaid +mindmap + root((Programmiersprachen)) + Webentwicklung + JavaScript + Frontend-Magie + Interaktive Webseiten + TypeScript + JavaScript + Typen + Unternehmensanwendungen + Daten & KI + Python + Datenwissenschaft + Maschinelles Lernen + Automatisierung + R + Statistik + Forschung + Mobile Apps + Java + Android + Unternehmen + Swift + iOS + Apple-Ökosystem + Kotlin + Modernes Android + Plattformübergreifend + Systeme & Leistung + C++ + Spiele + Leistungs-kritisch + Rust + Speichersicherheit + Systemprogrammierung + Go + Cloud-Dienste + Skalierbares Backend +``` +| Sprache | Am besten geeignet für | Warum sie beliebt ist | +|----------|--------------------------------------|---------------------------------------------| +| **JavaScript** | Webentwicklung, Benutzeroberflächen | Läuft in Browsern und ermöglicht interaktive Websites | +| **Python** | Datenwissenschaft, Automatisierung, KI | Leicht zu lesen und zu lernen, mächtige Bibliotheken | +| **Java** | Unternehmensanwendungen, Android-Apps | Plattformunabhängig, robust für große Systeme | +| **C#** | Windows-Anwendungen, Spieleentwicklung | Starke Unterstützung im Microsoft-Ökosystem | +| **Go** | Cloud-Services, Backend-Systeme | Schnell, einfach, für moderne IT konzipiert | + +### Hochsprachen vs. Maschinensprachen + +Okay, das war ehrlich gesagt das Konzept, das mein Gehirn ursprünglich zerschmettert hat, als ich angefangen habe. Deshalb teile ich die Analogie, die das endlich für mich erklärt hat – und ich hoffe sehr, dass sie auch dir hilft! + +Stell dir vor, du bist in einem Land, dessen Sprache du nicht sprichst und brauchst dringend eine Toilette (wir waren doch alle schon mal dort, oder? 😅): + +- **Low-Level-Programmierung** ist wie das Erlernen des lokalen Dialekts so gut, dass du mit der Großmutter, die an der Ecke Obst verkauft, plaudern kannst – mit kulturellen Anspielungen, Slang und Insider-Witzen, die nur jemand versteht, der dort aufgewachsen ist. Super beeindruckend und unglaublich effizient... wenn du fließend bist! Aber ziemlich überwältigend, wenn du einfach nur eine Toilette finden willst. + +- **High-Level-Programmierung** ist wie dieser fantastische lokale Freund, der dich einfach versteht. Du kannst auf Englisch sagen „Ich muss dringend zur Toilette“ und er macht die ganze kulturelle Übersetzung und gibt dir eine Wegbeschreibung, die für dein nicht-lokales Gehirn völlig Sinn macht. + +In Programmierbegriffen heißt das: +- **Low-Level-Sprachen** (wie Assembly oder C) erlauben dir unglaublich detaillierte Gespräche mit der tatsächlichen Hardware des Computers, aber du musst wie eine Maschine denken, was... naja, sagen wir mal, ein großer mentaler Sprung ist! +- **High-Level-Sprachen** (wie JavaScript, Python oder C#) erlauben dir, wie ein Mensch zu denken, während sie den ganzen Maschinencode hinter den Kulissen erledigen. Plus: Sie haben unglaublich einladende Communities voller Leute, die sich daran erinnern, wie es war, neu zu sein, und wirklich helfen wollen! + +Rate mal, womit ich dir empfehle zu starten? 😉 Hochsprachen sind wie Stützräder, die du eigentlich nie abnehmen willst, weil sie das ganze Erlebnis viel angenehmer machen! + +```mermaid +flowchart TB + A["👤 Menschlicher Gedanke:
'Ich möchte Fibonacci-Zahlen berechnen'"] --> B{Programmiersprachniveau wählen} + + B -->|Hoch-Level| C["🌟 JavaScript/Python
Einfach zu lesen und zu schreiben"] + B -->|Niedrig-Level| D["⚙️ Assembler/C
Direkte Hardwaresteuerung"] + + C --> E["📝 Schreiben: fibonacci(10)"] + D --> F["📝 Schreiben: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Computer-Verständnis:
Übersetzer übernimmt Komplexität"] + F --> G + + G --> H["💻 Gleiches Ergebnis:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Lass mich dir zeigen, warum Hochsprachen viel freundlicher sind + +Okay, gleich zeige ich dir etwas, das perfekt demonstriert, warum ich mich in Hochsprachen verliebt habe. Aber zuerst – ich brauche dein Versprechen. Wenn du das erste Code-Beispiel siehst, gerate nicht in Panik! Es soll einschüchternd aussehen. Genau das ist der Punkt! + +Wir werden dieselbe Aufgabe in zwei komplett unterschiedlichen Stilen ansehen. Beide erstellen eine sogenannte Fibonacci-Folge – ein wunderschönes mathematisches Muster, bei dem jede Zahl die Summe der beiden vorherigen ist: 0, 1, 1, 2, 3, 5, 8, 13... (Spaßfakt: Dieses Muster findest du buchstäblich überall in der Natur – Sonnenblumensamen-Spiralen, Tannenzapfenmuster, sogar wie Galaxien entstehen!) + +Bereit, den Unterschied zu sehen? Los geht’s! -Programmiersprachen ermöglichen es Entwicklern, Anweisungen für ein Gerät zu schreiben. Geräte können nur Binärdaten (1en und 0en) verstehen, und für *die meisten* Entwickler ist das keine sehr effiziente Art der Kommunikation. Programmiersprachen sind das Mittel der Kommunikation zwischen Menschen und Computern. +**Hochsprache (JavaScript) – menschenfreundlich:** -Programmiersprachen gibt es in verschiedenen Formaten und sie können unterschiedliche Zwecke erfüllen. Zum Beispiel wird JavaScript hauptsächlich für Webanwendungen verwendet, während Bash hauptsächlich für Betriebssysteme eingesetzt wird. +```javascript +// Schritt 1: Grundlegende Fibonacci-Einrichtung +const fibonacciCount = 10; +let current = 0; +let next = 1; -*Low-Level-Sprachen* erfordern in der Regel weniger Schritte als *High-Level-Sprachen*, damit ein Gerät Anweisungen interpretieren kann. Was High-Level-Sprachen jedoch beliebt macht, ist ihre Lesbarkeit und Unterstützung. JavaScript gilt als High-Level-Sprache. +console.log('Fibonacci sequence:'); +``` -Der folgende Code zeigt den Unterschied zwischen einer High-Level-Sprache (JavaScript) und einer Low-Level-Sprache (ARM-Assembler-Code). +**Das macht dieser Code:** +- **Deklariert** eine Konstante, um festzulegen, wie viele Fibonacci-Zahlen wir generieren wollen +- **Initialisiert** zwei Variablen, um die aktuelle und nächste Zahl in der Folge zu verfolgen +- **Setzt** die Anfangswerte (0 und 1), die das Fibonacci-Muster definieren +- **Zeigt** eine Überschrift an, um die Ausgabe zu kennzeichnen ```javascript -let number = 10 -let n1 = 0, n2 = 1, nextTerm; - -for (let i = 1; i <= number; i++) { - console.log(n1); - nextTerm = n1 + n2; - n1 = n2; - n2 = nextTerm; +// Schritt 2: Erzeuge die Sequenz mit einer Schleife +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // Berechne die nächste Zahl in der Sequenz + const sum = current + next; + current = next; + next = sum; } ``` -```c +**So läuft das hier ab:** +- **Schleife** über jede Position in unserer Folge mit einer `for`-Schleife +- **Zeigt** jede Zahl mit ihrer Position unter Verwendung von Template Literal Formatierung an +- **Berechnet** die nächste Fibonacci-Zahl durch Addition der aktuellen und nächsten Werte +- **Aktualisiert** unsere Tracking-Variablen für die nächste Iteration + +```javascript +// Schritt 3: Moderner funktionaler Ansatz +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// Anwendungsbeispiel +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**Oben haben wir:** +- **Eine wiederverwendbare Funktion** mit moderner Pfeilfunktion-Syntax erstellt +- **Ein Array gebaut**, um die gesamte Folge zu speichern statt einzelnen Ausgabezeilen +- **Array-Indizierung verwendet**, um jede neue Zahl aus vorherigen Werten zu berechnen +- **Die komplette Folge zurückgegeben**, um sie flexibel an anderen Stellen zu nutzen + +**Niedrigsprache (ARM Assembly) – computerfreundlich:** + +```assembly area ascen,code,readonly entry code32 @@ -83,137 +266,600 @@ back add r0,r1 end ``` -Glauben Sie es oder nicht, *sie tun beide dasselbe*: Sie drucken eine Fibonacci-Sequenz bis 10. +Beachte, wie die JavaScript-Version fast wie englische Anweisungen liest, während die Assembly-Version kryptische Befehle nutzt, die direkt den Prozessor des Computers steuern. Beide lösen exakt dieselbe Aufgabe, aber die Hochsprache ist für Menschen viel leichter zu verstehen, zu schreiben und zu pflegen. + +**Wichtige Unterschiede, die dir auffallen werden:** +- **Lesbarkeit**: JavaScript verwendet beschreibende Namen wie `fibonacciCount`, während Assembly kryptische Bezeichnungen wie `r0`, `r1` nutzt +- **Kommentare**: Hochrangige Sprachen fördern erklärende Kommentare, die den Code selbstdokumentierend machen +- **Struktur**: Der logische Ablauf von JavaScript entspricht der Art, wie Menschen Schritt für Schritt über Probleme nachdenken +- **Wartung**: Das Aktualisieren der JavaScript-Version für verschiedene Anforderungen ist einfach und klar + +✅ **Über die Fibonacci-Folge**: Dieses absolut wunderschöne Zahlenmuster (bei dem jede Zahl der Summe der beiden vorhergehenden entspricht: 0, 1, 1, 2, 3, 5, 8...) taucht buchstäblich *überall* in der Natur auf! Du findest es in Sonnenblumenwirbeln, Tannenzapfenmustern, der Art, wie Nautilus-Schalen sich wölben, und sogar darin, wie Baumzweige wachsen. Es ist ziemlich verblüffend, wie Mathematik und Programmierung uns helfen können, die Muster zu verstehen und nachzubilden, die die Natur nutzt, um Schönheit zu erschaffen! + + +## Die Bausteine, die die Magie möglich machen + +Also, jetzt wo du gesehen hast, wie Programmiersprachen in Aktion aussehen, lass uns die grundlegenden Bausteine anschauen, aus denen buchstäblich jedes jemals geschriebene Programm besteht. Denk daran wie an die wichtigsten Zutaten in deinem Lieblingsrezept – sobald du verstehst, was jede einzelne tut, wirst du in fast jeder Sprache Code lesen und schreiben können! + +Das ist ein bisschen wie die Grammatik des Programmierens lernen. Erinnerst du dich noch aus der Schule, als du über Substantive, Verben und Satzbau gelernt hast? Programmieren hat seine eigene Grammatikversion, und ehrlich gesagt ist sie viel logischer und nachsichtiger als die englische Grammatik je war! 😄 + +### Anweisungen: Die Schritt-für-Schritt-Anleitungen + +Fangen wir mit **Anweisungen** an – sie sind wie einzelne Sätze in einem Gespräch mit deinem Computer. Jede Anweisung sagt dem Computer, genau eine Sache zu tun, ähnlich wie Wegbeschreibungen: „Hier links abbiegen“, „An der roten Ampel stoppen“, „Auf diesem Parkplatz parken“. + +Was ich an Anweisungen liebe, ist wie lesbar sie meistens sind. Schau dir das an: + +```javascript +// Grundlegende Anweisungen, die einzelne Aktionen ausführen +const userName = "Alex"; +console.log("Hello, world!"); +const sum = 5 + 3; +``` + +**Das macht dieser Code:** +- **Deklariert** eine konstante Variable, um den Namen eines Benutzers zu speichern +- **Zeigt** eine Begrüßungsnachricht in der Konsolenausgabe an +- **Berechnet** und speichert das Ergebnis einer mathematischen Operation + +```javascript +// Anweisungen, die mit Webseiten interagieren +document.title = "My Awesome Website"; +document.body.style.backgroundColor = "lightblue"; +``` + +**Schritt für Schritt passiert hier:** +- **Ändert** den Titel der Webseite, der im Browser-Tab erscheint +- **Verändert** die Hintergrundfarbe des gesamten Seitenkörpers + +### Variablen: Das Speichersystem deines Programms + +Okay, **Variablen** sind ehrlich gesagt eines meiner absoluten Lieblingskonzepte zum Lehren, weil sie so sehr wie Dinge sind, die du jeden Tag benutzt! + +Denk mal an dein Telefonbuch. Du merkst dir nicht die Telefonnummern aller Leute – stattdessen speicherst du „Mama“, „Beste Freundin“ oder „Pizza-Lieferdienst, der bis 2 Uhr nachts liefert“ und lässt dein Telefon die tatsächlichen Nummern merken. Variablen funktionieren genauso! Sie sind wie beschriftete Behälter, in denen dein Programm Informationen speichern und später mit einem aussagekräftigen Namen abrufen kann. + +Das Coole ist: Variablen können sich ändern, während dein Programm läuft (daher der Name „Variable“ – siehst du, was die da gemacht haben?). So wie du den Kontakt für den Pizza-Lieferdienst updatest, wenn du einen noch besseren findest, können Variablen aktualisiert werden, wenn dein Programm neue Informationen lernt oder sich die Situation ändert! + +Ich zeige dir, wie wunderschön einfach das sein kann: + +```javascript +// Schritt 1: Erstellen von Basisvariablen +const siteName = "Weather Dashboard"; +let currentWeather = "sunny"; +let temperature = 75; +let isRaining = false; +``` + +**Was diese Konzepte bedeuten:** +- **Speichere** unveränderliche Werte in `const` Variablen (wie Name der Webseite) +- **Benutze** `let` für Werte, die sich im Programmverlauf ändern können +- **Weise zu** unterschiedliche Datentypen zu: Strings (Text), Zahlen und Booleans (wahr/falsch) +- **Wähle** beschreibende Namen, die erklären, was jede Variable enthält + +```javascript +// Schritt 2: Arbeiten mit Objekten, um verwandte Daten zu gruppieren +const weatherData = { + location: "San Francisco", + humidity: 65, + windSpeed: 12 +}; +``` + +**Oben haben wir:** +- **Ein Objekt erstellt**, um zusammengehörige Wetterinformationen zu gruppieren +- **Mehrere Datenstücke unter einem Variablennamen organisiert** +- **Schlüssel-Wert-Paare verwendet**, um jede Information klar zu beschriften + +```javascript +// Schritt 3: Verwendung und Aktualisierung von Variablen +console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); +console.log(`Wind speed: ${weatherData.windSpeed} mph`); + +// Aktualisierung veränderbarer Variablen +currentWeather = "cloudy"; +temperature = 68; +``` + +**Hier verstehen wir jeden Teil:** +- **Zeige** Informationen mit Template-Literalen und `${}`-Syntax an +- **Greife auf Objekt-Eigenschaften zu** mit Punktnotation (`weatherData.windSpeed`) +- **Aktualisiere** mit `let` deklarierte Variablen, um sich ändernde Bedingungen darzustellen +- **Kombiniere** mehrere Variablen, um sinnvolle Nachrichten zu erzeugen + +```javascript +// Schritt 4: Modernes Destructuring für saubereren Code +const { location, humidity } = weatherData; +console.log(`${location} humidity: ${humidity}%`); +``` + +**Was du wissen musst:** +- **Extrahiere** spezifische Eigenschaften aus Objekten mit Destrukturierungszuweisung +- **Erstelle** automatisch neue Variablen mit den gleichen Namen wie die Objektschlüssel +- **Vereinfache** den Code, indem du sich wiederholende Punktnotation vermeidest + +### Steuerung des Programmflusses: Deinem Programm beibringen, zu denken -✅ Eine Fibonacci-Sequenz wird [definiert](https://en.wikipedia.org/wiki/Fibonacci_number) als eine Reihe von Zahlen, bei der jede Zahl die Summe der beiden vorhergehenden ist, beginnend mit 0 und 1. Die ersten 10 Zahlen der Fibonacci-Sequenz sind 0, 1, 1, 2, 3, 5, 8, 13, 21 und 34. +Okay, hier wird Programmieren wirklich verblüffend! **Kontrollfluss** bedeutet im Grunde, deinem Programm beizubringen, wie es kluge Entscheidungen trifft, genau wie du das jeden Tag ganz selbstverständlich tust. -## Elemente eines Programms +Stell dir vor: Heute Morgen hast du bestimmt gedacht: „Wenn es regnet, nehme ich einen Regenschirm. Wenn es kalt ist, ziehe ich eine Jacke an. Wenn ich spät dran bin, überspringe ich das Frühstück und hole mir unterwegs Kaffee.“ Dein Gehirn folgt dieser Wenn-Dann-Logik dutzende Male jeden Tag ganz automatisch! -Eine einzelne Anweisung in einem Programm wird als *Statement* bezeichnet und hat normalerweise ein Zeichen oder einen Zeilenabstand, der markiert, wo die Anweisung endet oder *terminiert*. Wie ein Programm terminiert, variiert je nach Sprache. +Das ist es, was Programme intelligent und lebendig wirken lässt, statt nur einem langweiligen, vorhersehbaren Drehbuch zu folgen. Sie können eine Situation betrachten, auswerten, was passiert, und angemessen reagieren. Es ist, als hätten sie ein Gehirn, das sich anpasst und Entscheidungen treffen kann! -Anweisungen in einem Programm können von Daten abhängen, die von einem Benutzer oder anderswo bereitgestellt werden, um Anweisungen auszuführen. Daten können beeinflussen, wie ein Programm funktioniert, daher bieten Programmiersprachen eine Möglichkeit, Daten vorübergehend zu speichern, damit sie später verwendet werden können. Diese werden *Variablen* genannt. Variablen sind Anweisungen, die ein Gerät anweisen, Daten in seinem Speicher zu speichern. Variablen in Programmen sind ähnlich wie Variablen in der Algebra, da sie einen eindeutigen Namen haben und sich ihr Wert im Laufe der Zeit ändern kann. +Willst du sehen, wie schön das funktioniert? Ich zeige es dir: -Es besteht die Möglichkeit, dass einige Anweisungen von einem Gerät nicht ausgeführt werden. Dies geschieht normalerweise absichtlich, wenn es vom Entwickler geschrieben wurde, oder versehentlich, wenn ein unerwarteter Fehler auftritt. Diese Art der Kontrolle über eine Anwendung macht sie robuster und wartungsfreundlicher. Typischerweise treten diese Änderungen in der Kontrolle auf, wenn bestimmte Bedingungen erfüllt sind. Eine gängige Anweisung, die in der modernen Programmierung verwendet wird, um zu steuern, wie ein Programm läuft, ist die `if..else`-Anweisung. +```javascript +// Schritt 1: Grundlegende bedingte Logik +const userAge = 17; + +if (userAge >= 18) { + console.log("You can vote!"); +} else { + const yearsToWait = 18 - userAge; + console.log(`You'll be able to vote in ${yearsToWait} year(s).`); +} +``` -✅ Sie werden mehr über diese Art von Anweisung in den folgenden Lektionen lernen. +**Das macht dieser Code:** +- **Überprüft**, ob das Alter des Benutzers für die Wahlberechtigung ausreicht +- **Führt** verschiedene Codeblöcke basierend aufs Ergebnis der Bedingung aus +- **Berechnet** und zeigt an, wie lange es noch bis zur Wahlberechtigung dauert, falls unter 18 +- **Gibt** für jeden Fall spezifisches, hilfreiches Feedback + +```javascript +// Schritt 2: Mehrere Bedingungen mit logischen Operatoren +const userAge = 17; +const hasPermission = true; + +if (userAge >= 18 && hasPermission) { + console.log("Access granted: You can enter the venue."); +} else if (userAge >= 16) { + console.log("You need parent permission to enter."); +} else { + console.log("Sorry, you must be at least 16 years old."); +} +``` + +**Was hier passiert, im Detail:** +- **Kombiniert** mehrere Bedingungen mit dem `&&` (und) Operator +- **Erstellt** eine Hierarchie von Bedingungen mit `else if` für mehrere Szenarien +- **Behandelt** alle möglichen Fälle mit einer abschließenden `else`-Anweisung +- **Gibt** klares, umsetzbares Feedback für jede Situation + +```javascript +// Schritt 3: Kurzform der Bedingung mit ternärem Operator +const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; +console.log(`Status: ${votingStatus}`); +``` + +**Merke dir:** +- **Verwende** den ternären Operator (`? :`) für einfache Zwei-Optionen-Bedingungen +- **Schreibe** zuerst die Bedingung, dann `?`, dann Ergebnis, wenn wahr, dann `:`, dann Ergebnis, wenn falsch +- **Wende** dieses Muster an, wenn du Werte auf Basis von Bedingungen zuweisen willst + +```javascript +// Schritt 4: Umgang mit mehreren speziellen Fällen +const dayOfWeek = "Tuesday"; + +switch (dayOfWeek) { + case "Monday": + case "Tuesday": + case "Wednesday": + case "Thursday": + case "Friday": + console.log("It's a weekday - time to work!"); + break; + case "Saturday": + case "Sunday": + console.log("It's the weekend - time to relax!"); + break; + default: + console.log("Invalid day of the week"); +} +``` + +**Dieser Code macht Folgendes:** +- **Vergleicht** den Variablenwert mit mehreren spezifischen Fällen +- **Gruppiert** ähnliche Fälle zusammen (Wochentage vs. Wochenenden) +- **Führt** den passenden Codeblock aus, wenn ein Treffer vorliegt +- **Beinhaltet** einen `default`-Fall für unerwartete Werte +- **Verwendet** `break`-Anweisungen, um zu verhindern, dass der Code in den nächsten Fall weiterläuft + +> 💡 **Echtes Beispiel**: Stell dir Kontrollfluss wie das geduldigste GPS der Welt vor, das dir Anweisungen gibt. Es könnte sagen: „Wenn auf der Hauptstraße Verkehr ist, nimm die Autobahn. Wenn die Autobahn gesperrt ist, versuche die landschaftlich schöne Route.“ Programme verwenden genau dieselbe Art bedingter Logik, um intelligent auf verschiedene Situationen zu reagieren und immer das beste Nutzererlebnis zu bieten. + +### 🎯 **Konzept-Check: Baustein-Meisterschaft** + +**Mal sehen, wie du mit den Grundlagen zurechtkommst:** +- Kannst du den Unterschied zwischen einer Variable und einer Anweisung mit eigenen Worten erklären? +- Denk an ein Beispiel aus der echten Welt, in dem du eine Wenn-Dann-Entscheidung treffen würdest (wie in unserem Wahl-Beispiel) +- Was hat dich an der Programmierlogik am meisten überrascht? + +**Schneller Selbstvertrauens-Aufbau:** +```mermaid +flowchart LR + A["📝 Anweisungen
(Instruktionen)"] --> B["📦 Variablen
(Speicher)"] --> C["🔀 Programmfluss
(Entscheidungen)"] --> D["🎉 Funktionierendes Programm!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Was als Nächstes kommt**: Wir werden absolut viel Spaß haben, diese Konzepte immer weiter zu vertiefen, während wir diese unglaubliche Reise zusammen fortsetzen! Konzentriere dich jetzt einfach darauf, die Vorfreude auf all die erstaunlichen Möglichkeiten zu spüren, die vor dir liegen. Die speziellen Fähigkeiten und Techniken wirst du ganz natürlich lernen, wenn wir zusammen üben – ich verspreche, das macht viel mehr Spaß, als du vielleicht denkst! ## Werkzeuge des Handwerks -[![Werkzeuge des Handwerks](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Werkzeuge des Handwerks") +Okay, hier werde ich ehrlich so aufgeregt, dass ich mich kaum beherrschen kann! 🚀 Wir werden jetzt über die unglaublichen Werkzeuge sprechen, die dir das Gefühl geben werden, als hättest du gerade die Schlüssel zu einem digitalen Raumschiff bekommen. + +Kennst du das, wenn ein Koch diese perfekt ausbalancierten Messer hat, die sich wie eine Verlängerung seiner Hände anfühlen? Oder wenn ein Musiker eine Gitarre hat, die zu singen scheint, sobald er sie berührt? Entwickler haben ihre eigene Version solcher magischen Werkzeuge, und hier kommt etwas, das dich absolut umhauen wird – die meisten davon sind komplett kostenlos! + +Ich hüpfe praktisch auf meinem Stuhl, weil ich es kaum erwarten kann, diese mit dir zu teilen, denn sie haben die Art revolutioniert, wie wir Software entwickeln. Wir sprechen von KI-gestützten Code-Assistenten, die dir beim Schreiben deines Codes helfen können (kein Scherz!), Cloud-Umgebungen, in denen du ganze Anwendungen von buchstäblich überall mit WLAN bauen kannst, und Debugging-Tools, die so ausgefeilt sind, dass sie wie Röntgenblick für deine Programme sind. + +Und hier kommt der Teil, der mir immer noch eine Gänsehaut macht: Das sind keine „Anfänger-Werkzeuge“, die du irgendwann überholst. Das sind genau die gleichen professionellen Werkzeuge, die Entwickler bei Google, Netflix und dem Indie-App-Studio, das du liebst, gerade jetzt verwenden. Du wirst dich wie ein Profi fühlen, wenn du sie benutzt! + +```mermaid +graph TD + A["💡 Deine Idee"] --> B["⌨️ Code-Editor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Testen & Debuggen)"] + C --> D["⚡ Befehlszeile
(Automatisierung & Werkzeuge)"] + D --> E["📚 Dokumentation
(Lernen & Referenz)"] + E --> F["🚀 Unglaubliche Webanwendung!"] + + B -.-> G["🤖 KI-Assistent
(GitHub Copilot)"] + C -.-> H["📱 Gerätetests
(Responsives Design)"] + D -.-> I["📦 Paketmanager
(npm, yarn)"] + E -.-> J["👥 Gemeinschaft
(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 +``` +### Code-Editoren und IDEs: Deine neuen digitalen besten Freunde -> 🎥 Klicken Sie auf das Bild oben für ein Video über Werkzeuge +Lass uns über Code-Editoren sprechen – die werden wirklich bald zu deinen Lieblingsplätzen zum Abhängen! Stell dir vor, es ist dein persönliches Programmier-Heiligtum, wo du die meiste Zeit verbringen wirst, um deine digitalen Kreationen zu gestalten und zu perfektionieren. -In diesem Abschnitt lernen Sie einige Software kennen, die Sie als nützlich empfinden könnten, wenn Sie Ihre professionelle Entwicklerreise beginnen. +Aber das Wahre Wunder an modernen Editoren ist: Sie sind nicht nur schicke Texteditoren. Sie sind wie der brillanteste, unterstützendste Programmier-Mentor, der 24/7 direkt neben dir sitzt. Sie fangen deine Tippfehler ab, bevor du sie überhaupt bemerkst, schlagen Verbesserungen vor, die dich wie ein Genie aussehen lassen, helfen dir zu verstehen, was jeder Codeabschnitt macht, und manche können sogar vorhersagen, was du als Nächstes tippen willst, und bieten an, deine Gedanken zu vervollständigen! -Eine **Entwicklungsumgebung** ist eine einzigartige Sammlung von Werkzeugen und Funktionen, die ein Entwickler häufig beim Schreiben von Software verwendet. Einige dieser Werkzeuge wurden für die spezifischen Bedürfnisse eines Entwicklers angepasst und können sich im Laufe der Zeit ändern, wenn dieser Entwickler seine Prioritäten in der Arbeit, bei persönlichen Projekten oder beim Wechsel zu einer anderen Programmiersprache ändert. Entwicklungsumgebungen sind so einzigartig wie die Entwickler, die sie nutzen. +Ich erinnere mich daran, wie ich das erste Mal Autovervollständigung entdeckt habe – ich hatte wirklich das Gefühl, in der Zukunft zu leben. Du beginnst etwas zu tippen und dein Editor sagt: „Hey, wolltest du diese Funktion nutzen, die genau das macht, was du brauchst?“ Es ist, als hättest du einen Gedankenleser als Programmierkumpel! -### Editoren +**Was macht diese Editoren so unglaublich?** -Eines der wichtigsten Werkzeuge für die Softwareentwicklung ist der Editor. Editoren sind der Ort, an dem Sie Ihren Code schreiben und manchmal auch ausführen. +Moderne Code-Editoren bieten eine beeindruckende Reihe von Funktionen, die deine Produktivität steigern: -Entwickler verlassen sich aus mehreren Gründen auf Editoren: +| Funktion | Was sie macht | Warum sie hilft | +|---------|--------------|--------------| +| **Syntaxhervorhebung** | Färbt verschiedene Teile deines Codes ein | Macht Code lesbarer und Fehler leichter erkennbar | +| **Autovervollständigung** | Schlägt Code beim Tippen vor | Beschleunigt das Programmieren und reduziert Tippfehler | +| **Debugging-Tools** | Helfen dir Fehler zu finden und zu beheben | Spart Stunden bei der Fehlersuche | +| **Erweiterungen** | Fügen spezielle Features hinzu | Passe deinen Editor an jede Technologie an | +| **KI-Assistenten** | Schlagen Code und Erklärungen vor | Beschleunigen das Lernen und die Produktivität | -- *Debugging* hilft, Fehler und Probleme aufzudecken, indem der Code Zeile für Zeile durchgegangen wird. Einige Editoren verfügen über Debugging-Funktionen; sie können angepasst und für bestimmte Programmiersprachen hinzugefügt werden. -- *Syntax-Hervorhebung* fügt Farben und Textformatierungen zum Code hinzu, wodurch er leichter lesbar wird. Die meisten Editoren erlauben eine benutzerdefinierte Syntax-Hervorhebung. -- *Erweiterungen und Integrationen* sind spezialisierte Werkzeuge für Entwickler, von Entwicklern. Diese Werkzeuge sind nicht im Basis-Editor enthalten. Zum Beispiel dokumentieren viele Entwickler ihren Code, um zu erklären, wie er funktioniert. Sie könnten eine Rechtschreibprüfungserweiterung installieren, um Tippfehler in der Dokumentation zu finden. Die meisten Erweiterungen sind für die Verwendung in einem bestimmten Editor gedacht, und die meisten Editoren bieten eine Möglichkeit, nach verfügbaren Erweiterungen zu suchen. -- *Anpassung* ermöglicht es Entwicklern, eine einzigartige Entwicklungsumgebung zu schaffen, die ihren Bedürfnissen entspricht. Die meisten Editoren sind extrem anpassbar und erlauben es Entwicklern möglicherweise auch, benutzerdefinierte Erweiterungen zu erstellen. +> 🎥 **Video-Ressource**: Möchtest du diese Werkzeuge in Aktion sehen? Schau dir dieses [Tools of the Trade Video](https://youtube.com/watch?v=69WJeXGBdxg) für einen umfassenden Überblick an. -#### Beliebte Editoren und Webentwicklungs-Erweiterungen +#### Empfohlene Editoren für Webentwicklung -- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -- [Atom](https://atom.io/) - - [spell-check](https://atom.io/packages/spell-check) - - [teletype](https://atom.io/packages/teletype) - - [atom-beautify](https://atom.io/packages/atom-beautify) - -- [Sublimetext](https://www.sublimetext.com/) - - [emmet](https://emmet.io/) - - [SublimeLinter](http://www.sublimelinter.com/en/stable/) +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (kostenlos) +- Am beliebtesten bei Webentwicklern +- Ausgezeichnetes Erweiterungs-Ökosystem +- Eingebautes Terminal und Git-Integration +- **Must-Have-Erweiterungen**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – KI-gestützte Codevorschläge + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – Echtzeit-Zusammenarbeit + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – Automatische Codeformatierung + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – Rechtschreibprüfung im Code -### Browser +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (kostenpflichtig, kostenlos für Studenten) +- Fortgeschrittene Debugging- und Testtools +- Intelligente Codevervollständigung +- Integrierte Versionskontrolle -Ein weiteres wichtiges Werkzeug ist der Browser. Webentwickler verlassen sich auf den Browser, um zu sehen, wie ihr Code im Web ausgeführt wird. Er wird auch verwendet, um die visuellen Elemente einer Webseite anzuzeigen, die im Editor geschrieben wurden, wie HTML. +**Cloud-basierte IDEs** (verschiedene Preise) +- [GitHub Codespaces](https://github.com/features/codespaces) – Volles VS Code im Browser +- [Replit](https://replit.com/) – Super zum Lernen und Teilen von Code +- [StackBlitz](https://stackblitz.com/) – Sofortige Full-Stack-Webentwicklung -Viele Browser verfügen über *Entwicklerwerkzeuge* (DevTools), die eine Reihe hilfreicher Funktionen und Informationen enthalten, um Entwicklern zu helfen, wichtige Informationen über ihre Anwendung zu sammeln und zu erfassen. Zum Beispiel: Wenn eine Webseite Fehler hat, ist es manchmal hilfreich zu wissen, wann sie aufgetreten sind. DevTools in einem Browser können so konfiguriert werden, dass diese Informationen erfasst werden. +> 💡 **Einstiegstipp**: Fang mit Visual Studio Code an – es ist kostenlos, in der Branche weit verbreitet und hat eine riesige Community, die hilfreiche Tutorials und Erweiterungen erstellt. -#### Beliebte Browser und DevTools -- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon) -- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) -- [Firefox](https://developer.mozilla.org/docs/Tools) +### Webbrowser: Dein geheimes Entwicklungslabor -### Kommandozeilen-Werkzeuge +Bereite dich darauf vor, völlig begeistert zu sein! Du weißt, wie du Browser benutzt, um durch soziale Medien zu scrollen und Videos anzusehen? Nun, es stellt sich heraus, dass sie die ganze Zeit diesen unglaublichen geheimen Entwickler-Laborraum versteckt hatten, nur darauf wartend, dass du ihn entdeckst! -Einige Entwickler bevorzugen eine weniger grafische Ansicht für ihre täglichen Aufgaben und verlassen sich auf die Kommandozeile, um dies zu erreichen. Das Schreiben von Code erfordert eine erhebliche Menge an Tippen, und einige Entwickler bevorzugen es, ihren Arbeitsfluss auf der Tastatur nicht zu unterbrechen. Sie verwenden Tastenkombinationen, um zwischen Desktop-Fenstern zu wechseln, an verschiedenen Dateien zu arbeiten und Werkzeuge zu nutzen. Die meisten Aufgaben können mit einer Maus erledigt werden, aber ein Vorteil der Kommandozeile ist, dass vieles mit Kommandozeilen-Werkzeugen erledigt werden kann, ohne zwischen Maus und Tastatur wechseln zu müssen. Ein weiterer Vorteil der Kommandozeile ist, dass sie konfigurierbar ist und Sie eine benutzerdefinierte Konfiguration speichern, später ändern und auf andere Entwicklungsmaschinen importieren können. Da Entwicklungsumgebungen so einzigartig für jeden Entwickler sind, vermeiden einige die Kommandozeile, andere verlassen sich vollständig darauf, und wieder andere bevorzugen eine Mischung aus beidem. +Jedes Mal, wenn du mit der rechten Maustaste auf eine Webseite klickst und „Element untersuchen“ wählst, öffnest du eine verborgene Welt von Entwicklerwerkzeugen, die ehrlich gesagt mächtiger sind als manche teure Software, für die ich früher hunderte Euro bezahlt habe. Es ist, als würdest du entdecken, dass deine ganz normale Küche hinter einer geheimen Tür ein Labor für Profiköche versteckt! +Als mir zum ersten Mal jemand die Browser-DevTools gezeigt hat, habe ich etwa drei Stunden damit verbracht, einfach nur herumzuklicken und zu denken: "WARTEN, DAS KANN DAS AUCH?!" Du kannst wirklich jede Website in Echtzeit bearbeiten, genau sehen, wie schnell alles lädt, testen, wie deine Seite auf verschiedenen Geräten aussieht, und sogar JavaScript wie ein echter Profi debuggen. Das ist absolut verblüffend! -### Beliebte Kommandozeilen-Optionen +**Deshalb sind Browser dein geheimer Trumpf:** -Die Optionen für die Kommandozeile unterscheiden sich je nach Betriebssystem. +Wenn du eine Website oder Webanwendung erstellst, musst du sehen, wie sie in der realen Welt aussieht und sich verhält. Browser zeigen nicht nur deine Arbeit an, sondern liefern auch detailliertes Feedback zu Leistung, Zugänglichkeit und möglichen Problemen. -*💻 = ist vorinstalliert auf dem Betriebssystem.* +#### Browser-Entwicklertools (DevTools) -#### Windows +Moderne Browser enthalten umfassende Entwicklungspakete: -- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (auch bekannt als CMD) 💻 -- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon) -- [mintty](https://mintty.github.io/) - -#### MacOS +| Tool-Kategorie | Was es macht | Beispielanwendung | +|---------------|--------------|------------------| +| **Element-Inspektor** | HTML/CSS in Echtzeit ansehen und bearbeiten | Styling anpassen, um sofortige Ergebnisse zu sehen | +| **Konsole** | Fehlermeldungen ansehen und JavaScript testen | Probleme debuggen und mit Code experimentieren | +| **Netzwerk-Monitor** | Nachverfolgen, wie Ressourcen geladen werden | Leistung und Ladezeiten optimieren | +| **Zugänglichkeits-Prüfer** | Inklusives Design testen | Sicherstellen, dass deine Seite für alle Nutzer funktioniert | +| **Geräte-Simulator** | Vorschau auf verschiedenen Bildschirmgrößen | Responsives Design ohne mehrere Geräte testen | + +#### Empfohlene Browser für die Entwicklung + +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Industriestandard DevTools mit umfangreicher Dokumentation +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Hervorragende CSS Grid- und Zugänglichkeits-Tools +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Aufbau auf Chromium mit Microsofts Entwicklerressourcen + +> ⚠️ **Wichtiger Test-Tipp**: Teste deine Websites immer in mehreren Browsern! Was in Chrome perfekt funktioniert, kann in Safari oder Firefox anders aussehen. Professionelle Entwickler testen in allen großen Browsern, um konsistente Nutzererfahrungen zu gewährleisten. + + +### Kommandozeilen-Tools: Dein Tor zu Entwickler-Superkräften + +Okay, jetzt mal ehrlich zum Thema Kommandozeile, denn ich will, dass du das von jemandem hörst, der es wirklich versteht. Als ich sie zum ersten Mal sah – nur dieser furchteinflößende schwarze Bildschirm mit blinkendem Text – dachte ich buchstäblich: „Nee, auf keinen Fall! Das sieht aus wie aus einem Hackerfilm der 1980er, und ich bin auf keinen Fall schlau genug dafür!“ 😅 + +Aber hier ist, was ich mir damals gewünscht hätte, dass mir jemand sagt, und was ich dir jetzt sage: Die Kommandozeile ist nicht gruselig – sie ist tatsächlich wie ein direktes Gespräch mit deinem Computer. Stell sie dir vor wie den Unterschied zwischen Essen über eine schicke App mit Bildern und Menüs zu bestellen (was nett und einfach ist) und deinem Lieblingsrestaurant vor Ort, wo der Koch genau weiß, was du magst, und dir etwas Perfektes zaubert, nur weil du sagst „Überrasche mich mit etwas Großartigem.“ + +Die Kommandozeile ist der Ort, an dem Entwickler sich wie absolute Zauberer fühlen. Du tippst ein paar scheinbar magische Worte ein (okay, es sind nur Befehle, aber sie fühlen sich magisch an!), drückst Enter und BOOM – du hast komplette Projektstrukturen erstellt, leistungsstarke Werkzeuge aus der ganzen Welt installiert oder deine App ins Internet für Millionen von Menschen gestellt. Wenn du diesen ersten Vorgeschmack auf diese Macht hast, ist das ehrlich gesagt ziemlich süchtig machend! + +**Warum die Kommandozeile dein Lieblingswerkzeug wird:** + +Während grafische Oberflächen für viele Aufgaben großartig sind, glänzt die Kommandozeile bei Automatisierung, Präzision und Geschwindigkeit. Viele Entwicklungswerkzeuge funktionieren hauptsächlich über Kommandozeilen-Schnittstellen, und das effiziente Lernen ihrer Nutzung kann deine Produktivität dramatisch steigern. + +```bash +# Schritt 1: Erstellen und navigieren Sie zum Projektverzeichnis +mkdir my-awesome-website +cd my-awesome-website +``` + +**Das macht dieser Code:** +- **Ein neues Verzeichnis namens "my-awesome-website"** für dein Projekt erstellen +- **Ins neu erstellte Verzeichnis wechseln,** um mit der Arbeit zu beginnen + +```bash +# Schritt 2: Projekt mit package.json initialisieren +npm init -y + +# Moderne Entwicklungstools installieren +npm install --save-dev vite prettier eslint +npm install --save-dev @eslint/js +``` + +**Schritt für Schritt passiert Folgendes:** +- **Initialisierung** eines neuen Node.js-Projekts mit Standardeinstellungen via `npm init -y` +- **Installation** von Vite als modernes Build-Tool für schnelle Entwicklung und Produktions-Builds +- **Hinzufügen** von Prettier für automatische Code-Formatierung und ESLint für Code-Qualitätsprüfungen +- **Verwendung** des `--save-dev` Flags, um diese als reine Entwicklungsabhängigkeiten zu markieren + +```bash +# Schritt 3: Projektstruktur und Dateien erstellen +mkdir src assets +echo 'My Site

Hello World

' > index.html + +# Entwicklungsserver starten +npx vite +``` + +**Oben haben wir:** +- **Unser Projekt organisiert,** indem wir separate Ordner für Quellcode und Assets erstellt haben +- **Eine einfache HTML-Datei** mit korrekter Dokumentstruktur generiert +- **Den Vite-Entwicklungsserver gestartet** für Live Reloading und Hot Module Replacement + +#### Unverzichtbare Kommandozeilen-Tools für Webentwicklung -- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 -- [iTerm](https://iterm2.com/) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +| Tool | Zweck | Warum du es brauchst | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Versionskontrolle | Änderungen nachverfolgen, mit anderen zusammenarbeiten, Arbeit sichern | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-Laufzeit & Paketverwaltung | JavaScript außerhalb des Browsers ausführen, moderne Entwicklungswerkzeuge installieren | +| **[Vite](https://vitejs.dev/)** | Build-Tool & Entwicklungsserver | Blitzschnelle Entwicklung mit Hot Module Replacement | +| **[ESLint](https://eslint.org/)** | Code-Qualität | Automatisch Probleme im JavaScript finden und beheben | +| **[Prettier](https://prettier.io/)** | Code-Formatierung | Deinen Code einheitlich formatiert und lesbar halten | -#### Linux +#### Plattform-spezifische Optionen -- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Moderner, funktionsreicher Terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Leistungsstarke Skriptumgebung +- **[Eingabeaufforderung (Command Prompt)](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditionelle Windows-Kommandozeile -#### Beliebte Kommandozeilen-Werkzeuge +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eingebaute Terminal-Anwendung +- **[iTerm2](https://iterm2.com/)** – Erweiterter Terminal mit erweiterten Funktionen -- [Git](https://git-scm.com/) (💻 auf den meisten Betriebssystemen) -- [NPM](https://www.npmjs.com/) -- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard-Linux-Shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Fortgeschrittener Terminal-Emulator -### Dokumentation +> 💻 = Vorinstalliert im Betriebssystem -Wenn ein Entwickler etwas Neues lernen möchte, wird er sich höchstwahrscheinlich an die Dokumentation wenden, um zu erfahren, wie man es benutzt. Entwickler verlassen sich oft auf Dokumentationen, um sich durch die richtige Verwendung von Werkzeugen und Sprachen zu führen und auch, um ein tieferes Verständnis dafür zu gewinnen, wie sie funktionieren. +> 🎯 **Lernpfad**: Beginne mit grundlegenden Befehlen wie `cd` (Verzeichnis wechseln), `ls` oder `dir` (Dateien auflisten) und `mkdir` (Ordner erstellen). Übe mit modernen Workflow-Befehlen wie `npm install`, `git status` und `code .` (öffnet das aktuelle Verzeichnis in VS Code). Mit zunehmendem Komfort wirst du automatisch fortgeschrittenere Befehle und Automatisierungstechniken lernen. -#### Beliebte Dokumentationen zur Webentwicklung -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), von Mozilla, den Herausgebern des [Firefox](https://www.mozilla.org/firefox/) Browsers -- [Frontend Masters](https://frontendmasters.com/learn/) -- [Web.dev](https://web.dev), von Google, den Herausgebern von [Chrome](https://www.google.com/chrome/) -- [Microsofts eigene Entwicklerdokumentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), für [Microsoft Edge](https://www.microsoft.com/edge) -- [W3 Schools](https://www.w3schools.com/where_to_start.asp) +### Dokumentation: Dein immer verfügbarer Lernmentor -✅ Machen Sie etwas Recherche: Jetzt, da Sie die Grundlagen der Umgebung eines Webentwicklers kennen, vergleichen und kontrastieren Sie diese mit der Umgebung eines Webdesigners. +Okay, ich verrate dir ein kleines Geheimnis, das dich als Anfänger wirklich erleichtern wird: Selbst die erfahrensten Entwickler verbringen einen riesigen Teil ihrer Zeit mit dem Lesen von Dokumentation. Und das liegt nicht daran, dass sie nicht wissen, was sie tun – es ist tatsächlich ein Zeichen von Weisheit! + +Denk an Dokumentation wie an den Zugang zu den geduldigsten, wissendsten Lehrern der Welt, die jederzeit verfügbar sind. Bei einem Problem um 2 Uhr nachts? Dokumentation ist da mit einer warmen virtuellen Umarmung und genau der Antwort, die du brauchst. Du willst etwas über ein cooles neues Feature lernen, über das alle sprechen? Dokumentation unterstützt dich mit Schritt-für-Schritt-Beispielen. Du versuchst zu verstehen, warum etwas so funktioniert, wie es tut? Genau, die Dokumentation erklärt es dir auf eine Art, die endlich Sinn macht! + +Etwas, das meine Perspektive komplett verändert hat: Die Welt der Webentwicklung bewegt sich unglaublich schnell, und niemand (wirklich niemand!) behält alles im Kopf. Ich habe Senior-Entwickler mit über 15 Jahren Erfahrung gesehen, die grundlegende Syntax nachschlagen, und weißt du was? Das ist nicht peinlich – das ist schlau! Es geht nicht darum, ein perfektes Gedächtnis zu haben; es geht darum, zu wissen, wo man verlässliche Antworten schnell findet und wie man sie anwendet. + +**Hier passiert die eigentliche Magie:** + +Professionelle Entwickler verbringen einen bedeutenden Teil ihrer Zeit mit dem Lesen von Dokumentation – nicht weil sie nicht wissen, was sie tun, sondern weil der Webentwicklungsbereich sich so schnell entwickelt, dass es kontinuierliches Lernen braucht, um auf dem Laufenden zu bleiben. Gute Dokumentation hilft dir zu verstehen, nicht nur *wie* man etwas benutzt, sondern *warum* und *wann*. + +#### Unverzichtbare Dokumentationsressourcen + +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Der Goldstandard für Webtechnologie-Dokumentation +- Umfassende Leitfäden für HTML, CSS und JavaScript +- Beinhaltet Informationen zur Browser-Kompatibilität +- Enthält praxisnahe Beispiele und interaktive Demos + +**[Web.dev](https://web.dev)** (von Google) +- Moderne Best Practices der Webentwicklung +- Leitfäden zur Performance-Optimierung +- Prinzipien für Zugänglichkeit und inklusives Design +- Fallstudien aus echten Projekten + +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Ressourcen zur Entwicklung für den Edge-Browser +- Progressive Web-App-Anleitungen +- Einblicke in plattformübergreifende Entwicklung + +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Strukturierte Lerncurricula +- Videokurse von Branchenexperten +- Praxisnahe Programmierübungen + +> 📚 **Lernstrategie**: Versuche nicht, Dokumentation auswendig zu lernen – lerne vielmehr, wie du sie effizient navigierst. Lege häufig genutzte Referenzen als Lesezeichen an und übe die Suchfunktionen, um gezielt Informationen schnell zu finden. + +### 🔧 **Tool-Beherrschungs-Check: Was spricht dich an?** + +**Nimm dir einen Moment und überlege:** +- Welches Tool möchtest du als erstes ausprobieren? (Es gibt keine falsche Antwort!) +- Fühlt sich die Kommandozeile noch einschüchternd an oder bist du neugierig? +- Kannst du dir vorstellen, mit den Browser-DevTools hinter die Kulissen deiner Lieblingswebsites zu schauen? + +```mermaid +pie title "Mit Werkzeugen verbrachte Entwicklerzeit" + "Code Editor" : 40 + "Browser Testen" : 25 + "Kommandozeile" : 15 + "Dokumentation Lesen" : 15 + "Debugging" : 5 +``` +> **Interessanter Einblick**: Die meisten Entwickler verbringen etwa 40 % ihrer Zeit im Code-Editor, aber schau mal, wie viel Zeit fürs Testen, Lernen und Problemlösen draufgeht. Programmieren ist nicht nur Code schreiben – es geht darum, Erlebnisse zu gestalten! + +✅ **Zum Nachdenken**: Hier ist etwas Interessantes – wie denkst du, unterscheiden sich die Werkzeuge zum Erstellen von Websites (Entwicklung) von denen, die das Aussehen gestalten (Design)? Es ist wie der Unterschied zwischen einem Architekten, der ein schönes Haus entwirft, und dem Bauunternehmer, der es tatsächlich baut. Beides ist wichtig, aber sie brauchen unterschiedliche Werkzeugkästen! Diese Denkweise wird dir wirklich helfen, das große Ganze zu sehen, wie Websites lebendig werden. + +## GitHub Copilot Agent Challenge 🚀 + +Nutze den Agentenmodus, um die folgende Herausforderung zu meistern: + +**Beschreibung:** Erkunde die Funktionen eines modernen Code-Editors oder einer IDE und zeige, wie sie deinen Arbeitsfluss als Webentwickler verbessern können. + +**Anweisung:** Wähle einen Code-Editor oder eine IDE (wie Visual Studio Code, WebStorm oder eine cloudbasierte IDE). Liste drei Funktionen oder Erweiterungen auf, die dir helfen, Code effizienter zu schreiben, zu debuggen oder zu verwalten. Gib für jede eine kurze Erklärung, wie sie deinen Workflow unterstützt. --- ## 🚀 Herausforderung -Vergleichen Sie einige Programmiersprachen. Was sind einige der einzigartigen Merkmale von JavaScript im Vergleich zu Java? Wie sieht es mit COBOL im Vergleich zu Go aus? +**Bereit für deinen ersten Fall, Detektiv?** + +Jetzt, wo du diese tolle Grundlage hast, wartet ein Abenteuer auf dich, das dir zeigt, wie unglaublich vielfältig und faszinierend die Programmierwelt wirklich ist. Und keine Sorge – es geht noch nicht darum, Code zu schreiben, also kein Stress! Stell dir vor, du bist ein Programmiersprachen-Detektiv bei deinem allerersten spannenden Fall! -## Quiz nach der Vorlesung -[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/) +**Deine Mission, solltest du sie annehmen:** +1. **Werde ein Sprachentdecker:** Wähle drei Programmiersprachen aus völlig unterschiedlichen Welten – vielleicht eine zum Erstellen von Websites, eine für mobile Apps und eine für die Datenverarbeitung in der Wissenschaft. Finde Beispiele für dieselbe einfache Aufgabe, geschrieben in jeder Sprache. Ich verspreche dir, du wirst erstaunt sein, wie unterschiedlich sie aussehen können, obwohl sie das Gleiche tun! +2. **Ergründe ihre Ursprungsgeschichten:** Was macht jede Sprache besonders? Ein cooler Fakt – jede einzelne Programmiersprache wurde erstellt, weil jemand dachte: „Weißt du was? Es muss einen besseren Weg geben, dieses spezielle Problem zu lösen.“ Kannst du herausfinden, welche Probleme das waren? Einige dieser Geschichten sind wirklich faszinierend! + +3. **Lerne die Communities kennen:** Schau dir an, wie einladend und leidenschaftlich die Community jeder Sprache ist. Manche haben Millionen Entwickler, die Wissen teilen und sich gegenseitig helfen, andere sind kleiner, aber unglaublich eng verbunden und unterstützend. Du wirst die verschiedenen Persönlichkeiten dieser Communities lieben! + +4. **Folge deinem Bauchgefühl:** Welche Sprache fühlt sich gerade am zugänglichsten für dich an? Mach dir keinen Stress mit der „perfekten“ Wahl – hör einfach auf dein Bauchgefühl! Es gibt wirklich keine falsche Antwort, und du kannst später immer weitere Sprachen erkunden. + +**Bonus-Detektivarbeit:** Finde heraus, welche großen Websites oder Apps mit jeder Sprache gebaut sind. Ich garantiere dir, du wirst überrascht sein, zu erfahren, was Instagram, Netflix oder dieses mobile Spiel antreibt, das du einfach nicht mehr aus der Hand legen kannst! + +> 💡 **Denke daran:** Du versuchst heute nicht, Experte in einer dieser Sprachen zu werden. Du lernst erstmal nur die Nachbarschaft kennen, bevor du dich entscheidest, wo du dich niederlassen willst. Nimm dir Zeit, hab Spaß dabei und lass dich von deiner Neugier leiten! + +## Lass uns feiern, was du entdeckt hast! + +Wow, du hast heute so viele unglaubliche Informationen aufgenommen! Ich freue mich wirklich darauf zu sehen, wie viel von dieser großartigen Reise bei dir hängen geblieben ist. Und denk daran – das ist kein Test, bei dem du alles perfekt machen musst. Das ist eher eine Feier all der coolen Dinge, die du über diese faszinierende Welt gelernt hast, in die du bald eintauchst! + +[Mach das Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/) ## Überprüfung & Selbststudium -Studieren Sie ein wenig über die verschiedenen Sprachen, die einem Programmierer zur Verfügung stehen. Versuchen Sie, eine Zeile in einer Sprache zu schreiben und sie dann in zwei anderen neu zu schreiben. Was haben Sie gelernt? +**Nimm dir Zeit, um zu erkunden und dabei Spaß zu haben!** + +Du hast heute viel geschafft, und darauf kannst du stolz sein! Jetzt kommt der spaßige Teil – die Themen zu erforschen, die deine Neugier geweckt haben. Denk daran, das ist keine Hausaufgabe – es ist ein Abenteuer! + +**Tauche tiefer ein in das, was dich begeistert:** + +**Arbeite praktisch mit Programmiersprachen:** +- Besuche die offiziellen Webseiten von 2-3 Sprachen, die deine Aufmerksamkeit erregt haben. Jede hat ihre eigene Persönlichkeit und Geschichte! +- Probiere einige Online-Coding-Playgrounds wie [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) oder [Replit](https://replit.com/). Hab keine Angst zu experimentieren – du kannst nichts kaputt machen! +- Lies darüber, wie deine Lieblingssprache entstanden ist. Wirklich, einige dieser Ursprungsgeschichten sind faszinierend und helfen dir zu verstehen, warum Sprachen so funktionieren, wie sie es tun. + +**Mache dich vertraut mit deinen neuen Werkzeugen:** +- Lade Visual Studio Code herunter, falls du es noch nicht getan hast – es ist kostenlos und du wirst es lieben! +- Verbringe ein paar Minuten beim Stöbern im Extensions-Marktplatz. Es ist wie ein App-Store für deinen Code-Editor! +- Öffne die Entwicklerwerkzeuge deines Browsers und klicke einfach mal herum. Mach dir keine Sorgen, alles zu verstehen – lerne einfach, was dort ist. + +**Tritt der Community bei:** +- Folge einigen Entwickler-Communities auf [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) oder [GitHub](https://github.com/). Die Programmier-Community ist für Neulinge unglaublich einladend! +- Schau dir einige anfängerfreundliche Coding-Videos auf YouTube an. Es gibt so viele großartige Creators, die sich daran erinnern, wie es ist, neu anzufangen. +- Ziehe in Erwägung, lokalen Meetups oder Online-Communities beizutreten. Vertrau mir, Entwickler helfen gerne Neulingen! + +> 🎯 **Hör zu, das ist, was du dir merken sollst**: Du musst über Nacht kein Programmiergenie werden! Im Moment lernst du einfach diese erstaunliche neue Welt kennen, der du bald angehören wirst. Nimm dir Zeit, genieße die Reise, und denk daran – jeder Entwickler, den du bewunderst, saß einmal genau dort, wo du jetzt sitzt, voller Vorfreude und vielleicht ein wenig überwältigt. Das ist ganz normal und bedeutet, dass du es richtig machst! + + ## Aufgabe -[Dokumentation lesen](assignment.md) +[Reading the Docs](assignment.md) -> Hinweis: Wählen Sie für Ihre Aufgabe keine Editoren, Browser oder Kommandozeilen-Werkzeuge aus, die bereits oben aufgeführt sind. +> 💡 **Ein kleiner Anstoß für deine Aufgabe**: Ich würde mich sehr freuen, wenn du einige Tools entdeckst, die wir noch nicht behandelt haben! Überspringe die Editoren, Browser und Kommandozeilen-Tools, über die wir schon gesprochen haben – da draußen gibt es ein ganzes unglaubliches Universum an großartigen Entwicklungstools, die nur darauf warten, entdeckt zu werden. Suche nach solchen, die aktiv gepflegt werden und lebendige, hilfsbereite Communities haben (diese haben meist die besten Tutorials und die unterstützendsten Menschen, wenn du mal festhängst und eine freundliche Hand brauchst). + +--- + +## 🚀 Deine Programmierreise-Zeitleiste + +### ⚡ **Was du in den nächsten 5 Minuten tun kannst** +- [ ] Lesezeichen für 2-3 Webseiten von Programmiersprachen setzen, die dich angesprochen haben +- [ ] Visual Studio Code herunterladen, falls noch nicht geschehen +- [ ] Die DevTools deines Browsers (F12) öffnen und auf irgendeiner Webseite herumklicken +- [ ] Einer Programmier-Community beitreten (Dev.to, Reddit r/webdev oder Stack Overflow) + +### ⏰ **Was du in dieser Stunde schaffen kannst** +- [ ] Das Quiz nach der Lektion abschließen und deine Antworten reflektieren +- [ ] VS Code mit der GitHub Copilot-Erweiterung einrichten +- [ ] Ein "Hello World"-Beispiel online in 2 verschiedenen Programmiersprachen ausprobieren +- [ ] Ein "Day in the Life of a Developer"-Video auf YouTube anschauen +- [ ] Mit deiner Programmier-Sprachdetektivarbeit beginnen (aus der Challenge) + +### 📅 **Dein einwöchiges Abenteuer** +- [ ] Die Aufgabe abschließen und 3 neue Entwicklungstools erkunden +- [ ] 5 Entwickler oder Programmier-Accounts in sozialen Medien folgen +- [ ] Versuche, etwas Kleines in CodePen oder Replit zu bauen (auch nur "Hallo, [Dein Name]!") +- [ ] Einen Entwicklerblogpost über jemandes Programmierreise lesen +- [ ] An einem virtuellen Meetup teilnehmen oder einen Programmier-Vortrag anschauen +- [ ] Mit deinem gewählten Sprachlernprogramm online starten + +### 🗓️ **Deine einmonatige Transformation** +- [ ] Dein erstes kleines Projekt bauen (auch eine einfache Webseite zählt!) +- [ ] Zu einem Open-Source-Projekt beitragen (fang mit Dokumentationskorrekturen an) +- [ ] Jemanden mentorieren, der gerade erst mit dem Programmieren beginnt +- [ ] Deine Entwickler-Portfolio-Webseite erstellen +- [ ] Dich mit lokalen Entwickler-Communities oder Lerngruppen verbinden +- [ ] Deinen nächsten Lern-Meilenstein planen + +### 🎯 **Abschließende Reflexion** + +**Bevor du weitermachst, nimm dir einen Moment zum Feiern:** +- Was hat dich heute am Programmieren besonders begeistert? +- Welches Tool oder Konzept möchtest du als Erstes erforschen? +- Wie fühlst du dich beim Start dieser Programmierreise? +- Welche Frage würdest du einem Entwickler gerade gerne stellen? + +```mermaid +journey + title Deine Reise zum Aufbau von Selbstvertrauen + section Heute + Neugierig: 3: Du + Überwältigt: 4: Du + Aufgeregt: 5: Du + section Diese Woche + Erkunden: 4: Du + Lernen: 5: Du + Verbinden: 4: Du + section Nächster Monat + Aufbauen: 5: Du + Selbstbewusst: 5: Du + Anderen Helfen: 5: Du +``` +> 🌟 **Denk daran**: Jeder Experte war einmal Anfänger. Jeder erfahrene Entwickler hat sich genau so gefühlt wie du jetzt – begeistert, vielleicht ein wenig überwältigt und auf jeden Fall neugierig, was möglich ist. Du bist in großartiger Gesellschaft, und diese Reise wird unglaublich sein. Willkommen in der wundervollen Welt des Programmierens! 🎉 --- + **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. \ No newline at end of file +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, kann nicht ausgeschlossen werden, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in der jeweiligen Originalsprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen. + \ No newline at end of file diff --git a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md index 9b711c144..4e343673c 100644 --- a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md +++ b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -1,31 +1,78 @@ +# Aufgabe: Erforschung moderner Webentwicklungswerkzeuge + ## Anweisungen -Es gibt viele Werkzeuge, die ein Webentwickler benötigen könnte, die in der [MDN-Dokumentation für clientseitige Tools](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) aufgeführt sind. Wählen Sie **drei Werkzeuge**, die **in dieser Lektion nicht behandelt werden** (ausgenommen [spezifische Werkzeuge auflisten oder auf den Inhalt der Lektion verweisen]), erklären Sie **warum** ein Webentwickler jedes Werkzeug verwenden würde, und finden Sie ein Werkzeug, das in jede Kategorie passt. Teilen Sie für jedes Werkzeug einen Link zu seiner offiziellen Dokumentation (nicht das Beispiel, das auf MDN verwendet wird). +Das Ökosystem der Webentwicklung umfasst Hunderte spezialisierter Werkzeuge, die Entwicklern helfen, Anwendungen effizient zu erstellen, zu testen und zu warten. Deine Aufgabe ist es, Werkzeuge zu recherchieren und zu verstehen, die die in dieser Lektion behandelten Werkzeuge ergänzen. + +**Deine Mission:** Wähle **drei Werkzeuge** aus, die **in dieser Lektion nicht behandelt werden** (vermeide die Auswahl von bereits gelisteten Code-Editoren, Browsern oder Kommandozeilentools). Konzentriere dich auf Werkzeuge, die spezifische Probleme in modernen Webentwicklungs-Workflows lösen. + +**Für jedes Werkzeug gib an:** + +1. **Name des Werkzeugs und Kategorie** (z. B. „Figma – Designwerkzeug“ oder „Jest – Test-Framework“) +2. **Zweck und Vorteile** – Erkläre in 2-3 Sätzen, warum ein Webentwickler dieses Werkzeug verwenden würde und welche Probleme es löst +3. **Offizieller Dokumentationslink** – Gib einen Link zur offiziellen Dokumentation oder Website des Werkzeugs an (nicht nur Tutorial-Seiten) +4. **Praxisbezug** – Nenne eine Möglichkeit, wie dieses Werkzeug in einen professionellen Entwicklungsworkflow passt + +## Vorgeschlagene Werkzeugkategorien + +Erwäge, Werkzeuge aus diesen Kategorien zu erkunden: + +| Kategorie | Beispiele | Was sie tun | +|----------|----------|--------------| +| **Build-Tools** | Vite, Webpack, Parcel, esbuild | Bündeln und optimieren Code für die Produktion mit schnellen Entwicklungsservern | +| **Test-Frameworks** | Vitest, Jest, Cypress, Playwright | Stellen sicher, dass Code korrekt funktioniert und fangen Fehler vor der Bereitstellung ab | +| **Design-Tools** | Figma, Adobe XD, Penpot | Erstellen Mockups, Prototypen und Design-Systeme kollaborativ | +| **Deployment-Plattformen** | Netlify, Vercel, Cloudflare Pages | Hosten und verteilen Websites mit automatischem CI/CD | +| **Versionskontrolle** | GitHub, GitLab, Bitbucket | Verwalten Code-Änderungen, Zusammenarbeit und Projekt-Workflows | +| **CSS-Frameworks** | Tailwind CSS, Bootstrap, Bulma | Beschleunigen das Styling mit vorgefertigten Komponentenbibliotheken | +| **Paketmanager** | npm, pnpm, Yarn | Installieren und verwalten Code-Bibliotheken und Abhängigkeiten | +| **Barrierefreiheitswerkzeuge** | axe-core, Lighthouse, Pa11y | Testen auf inklusive Gestaltung und WCAG-Konformität | +| **API-Entwicklung** | Postman, Insomnia, Thunder Client | Testen und dokumentieren APIs während der Entwicklung | + +## Formatvorgaben + +**Für jedes Werkzeug:** +``` +### [Tool Name] - [Category] + +**Purpose:** [2-3 sentences explaining why developers use this tool] + +**Documentation:** [Official website/documentation link] + +**Workflow Integration:** [1 sentence about how it fits into development process] +``` + +## Qualitätsrichtlinien -**Format:** -- Werkzeugname -- Warum ein Webentwickler es verwenden würde (2-3 Sätze) -- Link zur Dokumentation +- **Wähle aktuelle Werkzeuge**: Wähle Werkzeuge, die 2025 aktiv gepflegt und weit verbreitet sind +- **Fokussiere auf Mehrwert**: Erkläre die spezifischen Vorteile, nicht nur, was das Werkzeug tut +- **Professioneller Kontext**: Betrachte Werkzeuge, die von Entwicklungsteams verwendet werden, nicht nur von einzelnen Hobbyisten +- **Vielfältige Auswahl**: Wähle Werkzeuge aus verschiedenen Kategorien, um die Breite des Ökosystems zu zeigen +- **Moderne Relevanz**: Priorisiere Werkzeuge, die mit aktuellen Webentwicklungstrends und Best Practices übereinstimmen -**Länge:** -- Jede Erklärung sollte 2-3 Sätze umfassen. +## Bewertungsraster -## Bewertungskriterien +| Hervorragend | Gut | Verbesserungswürdig | +|-----------|------|-------------------| +| **Klar erklärt, warum Entwickler jedes Werkzeug nutzen und welche Probleme es löst** | **Erklärt, was das Werkzeug tut, aber den Kontext zum Nutzen teilweise vermieden** | **Werkzeuge aufgelistet, aber Zweck oder Vorteile nicht erklärt** | +| **Offizielle Dokumentationslinks für alle Werkzeuge angegeben** | **Meist offizielle Links mit 1-2 Tutorial-Seiten** | **Hauptsächlich Tutorial-Seiten anstatt offizieller Dokumentation verwendet** | +| **Aktuelle, professionell genutzte Werkzeuge aus verschiedenen Kategorien ausgewählt** | **Gute Werkzeuge ausgewählt, aber eingeschränkte Kategorienvielfalt** | **Veraltete Werkzeuge oder nur aus einer Kategorie ausgewählt** | +| **Verständnis demonstriert, wie Werkzeuge in Entwicklungs-Workflows passen** | **Teilweise Verständnis des professionellen Kontexts gezeigt** | **Fokus nur auf Werkzeugfunktionen ohne Kontext im Workflow** | -Vorbildlich | Angemessen | Verbesserungswürdig ---- | --- | -- | -Erklärt, warum ein Webentwickler das Werkzeug verwenden würde | Erklärt, wie, aber nicht warum ein Entwickler das Werkzeug verwenden würde | Hat nicht erwähnt, wie oder warum ein Entwickler das Werkzeug verwenden würde | +> 💡 **Forschungstipp**: Suche nach Werkzeugen, die in Stellenanzeigen für Webentwickler genannt werden, schaue in populären Entwicklerumfragen nach oder erforsche die Abhängigkeiten erfolgreicher Open-Source-Projekte auf GitHub! --- + **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. \ No newline at end of file +Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in seiner Originalsprache gilt als maßgebliche Quelle. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Verwendung dieser Übersetzung entstehen. + \ No newline at end of file diff --git a/translations/de/1-getting-started-lessons/2-github-basics/README.md b/translations/de/1-getting-started-lessons/2-github-basics/README.md index 7669932a2..2df1bc25b 100644 --- a/translations/de/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/de/1-getting-started-lessons/2-github-basics/README.md @@ -1,344 +1,775 @@ # Einführung in GitHub -Diese Lektion behandelt die Grundlagen von GitHub, einer Plattform zum Hosten und Verwalten von Änderungen an deinem Code. +Hallo zukünftige*r Entwickler*in! 👋 Bereit, dich Millionen von Programmierenden weltweit anzuschließen? Ich freue mich wirklich, dir GitHub vorzustellen – denk daran als die Social-Media-Plattform für Programmierer, nur dass wir hier statt Fotos von unserem Mittagessen Code teilen und gemeinsam unglaubliche Dinge bauen! -![Einführung in GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.de.png) +Was mich absolut umhaut: Jede App auf deinem Handy, jede Website, die du besuchst, und die meisten Tools, die du lernen wirst zu nutzen, wurden von Entwickler*innen-Teams erstellt, die auf Plattformen wie GitHub zusammenarbeiten. Die Musik-App, die du liebst? Jemand wie du hat dazu beigetragen. Das Spiel, das du nicht aus der Hand legen kannst? Ja, wahrscheinlich mit GitHub-Kollaboration gebaut. Und jetzt wirst DU lernen, wie du Teil dieser großartigen Community wirst! + +Ich weiß, das fühlt sich am Anfang vielleicht nach viel an – ich erinnere mich noch daran, wie ich meine erste GitHub-Seite angeschaut habe und dachte „Was zum Teufel bedeutet das alles?“ Aber hier ist die Sache: Jede*r Entwickler*in hat genau dort angefangen, wo du jetzt bist. Am Ende dieser Lektion wirst du dein eigenes GitHub-Repository haben (denk daran als deine persönliche Projekt-Vitrine in der Cloud), und du wirst wissen, wie du deine Arbeit speicherst, mit anderen teilst und sogar zu Projekten beiträgst, die Millionen von Menschen verwenden. + +Wir werden diese Reise zusammen gehen, Schritt für Schritt. Kein Stress, kein Druck – nur du, ich und ein paar wirklich coole Tools, die deine neuen besten Freunde werden! + +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.de.png) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) -## Quiz vor der Vorlesung -[Quiz vor der Vorlesung](https://ff-quizzes.netlify.app) +```mermaid +journey + title Dein GitHub Abenteuer Heute + section Einrichtung + Git Installieren: 4: You + Konto Erstellen: 5: You + Erstes Repository: 5: You + section Git Meistern + Lokale Änderungen: 4: You + Commits & Pushes: 5: You + Branching: 4: You + section Zusammenarbeit + Projekte Forken: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` +## Vor-Lektüre-Quiz +[Vor-Lektüre-Quiz](https://ff-quizzes.netlify.app) ## Einführung +Bevor wir in den wirklich spannenden Teil eintauchen, bereiten wir deinen Computer für etwas GitHub-Zauberei vor! Denk daran wie das Organisieren deiner Kunstmaterialien, bevor du ein Meisterwerk erschaffst – mit den richtigen Werkzeugen läuft alles viel reibungsloser und macht viel mehr Spaß. + +Ich führe dich persönlich durch jeden Einrichtungsschritt, und ich verspreche, dass es bei weitem nicht so einschüchternd ist, wie es auf den ersten Blick aussieht. Wenn dir etwas auf Anhieb nicht klar ist, ist das völlig normal! Ich erinnere mich daran, wie ich meine erste Entwicklungsumgebung eingerichtet habe und mich fühlte, als würde ich alte Hieroglyphen lesen versuchen. Jede*r Entwickler*in stand genau dort, wo du jetzt bist, und hat sich gefragt, ob sie oder er es richtig macht. Spoiler: Wenn du hier lernst, machst du es schon richtig! 🌟 + In dieser Lektion behandeln wir: -- das Nachverfolgen der Arbeit, die du auf deinem Rechner machst -- das Arbeiten an Projekten mit anderen -- wie man zu Open-Source-Software beiträgt +- wie du deine Arbeit auf deinem Rechner verfolgst +- wie du an Projekten mit anderen zusammenarbeitest +- wie du zu Open-Source-Software beiträgst ### Voraussetzungen -Bevor du beginnst, überprüfe, ob Git installiert ist. Gib im Terminal ein: +Lass uns deinen Computer für etwas GitHub-Zauberei bereit machen! Keine Sorge – diese Einrichtung musst du nur einmal machen, dann bist du für deine gesamte Programmierreise gerüstet. + +Also, fangen wir mit dem Fundament an! Zuerst müssen wir überprüfen, ob Git bereits auf deinem Rechner installiert ist. Git ist im Grunde wie ein superkluger Assistent, der sich jede einzelne Änderung an deinem Code merkt – viel besser, als hysterisch alle zwei Sekunden Strg+S zu drücken (wir alle kennen das!). + +Schauen wir nach, ob Git schon installiert ist, indem du diesen magischen Befehl im Terminal eingibst: `git --version` -Falls Git nicht installiert ist, [lade Git herunter](https://git-scm.com/downloads). Richte anschließend dein lokales Git-Profil im Terminal ein: -* `git config --global user.name "dein-name"` -* `git config --global user.email "deine-email"` +Wenn Git noch nicht installiert ist, kein Problem! Geh einfach auf [download Git](https://git-scm.com/downloads) und lade es herunter. Sobald es installiert ist, müssen wir Git richtig vorstellen: + +> 💡 **Erste Einrichtung**: Diese Befehle sagen Git, wer du bist. Diese Informationen werden bei jedem Commit, den du machst, angehängt, also wähle einen Namen und eine E-Mail, die du öffentlich teilen möchtest. + +```bash +git config --global user.name "your-name" +git config --global user.email "your-email" +``` -Um zu überprüfen, ob Git bereits konfiguriert ist, kannst du eingeben: -`git config --list` +Um zu überprüfen, ob Git schon konfiguriert ist, kannst du eingeben: +```bash +git config --list +``` -Du benötigst außerdem ein GitHub-Konto, einen Code-Editor (wie Visual Studio Code) und musst dein Terminal (oder: Eingabeaufforderung) öffnen. +Du brauchst außerdem ein GitHub-Konto, einen Code-Editor (wie Visual Studio Code) und du musst dein Terminal (oder die Eingabeaufforderung) öffnen. -Navigiere zu [github.com](https://github.com/) und erstelle ein Konto, falls du noch keines hast, oder melde dich an und fülle dein Profil aus. +Navigiere zu [github.com](https://github.com/) und erstelle einen Account, falls du noch keinen hast, oder melde dich an und vervollständige dein Profil. -✅ GitHub ist nicht das einzige Code-Repository der Welt; es gibt andere, aber GitHub ist das bekannteste. +💡 **Moderner Tipp**: Überlege, [SSH-Schlüssel](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) einzurichten oder die [GitHub CLI](https://cli.github.com/) für eine einfachere Authentifizierung ohne Passwörter zu verwenden. + +✅ GitHub ist nicht das einzige Code-Repository auf der Welt; es gibt andere – aber GitHub ist das bekannteste. ### Vorbereitung -Du benötigst sowohl einen Ordner mit einem Codeprojekt auf deinem lokalen Rechner (Laptop oder PC) als auch ein öffentliches Repository auf GitHub, das als Beispiel dafür dient, wie man zu den Projekten anderer beiträgt. +Du brauchst sowohl einen Ordner mit einem Code-Projekt auf deinem lokalen Rechner (Laptop oder PC) als auch ein öffentliches Repository auf GitHub, das als Beispiel dient, wie man zu den Projekten anderer beiträgt. ---- +### Deinen Code sicher halten -## Codeverwaltung +Lass uns kurz über Sicherheit sprechen – keine Sorge, wir werden dich nicht mit gruseligen Details überfordern! Denk an diese Sicherheitspraktiken wie das Abschließen deines Autos oder Hauses. Es sind einfache Gewohnheiten, die zur zweiten Natur werden und deine harte Arbeit schützen. + +Wir zeigen dir von Anfang an die modernen und sicheren Wege, mit GitHub zu arbeiten. So entwickelst du gute Gewohnheiten, die dich während deiner gesamten Programmierkarriere begleiten. + +Beim Arbeiten mit GitHub ist es wichtig, Sicherheitsbest Practices zu befolgen: + +| Sicherheitsbereich | Best Practice | Warum es wichtig ist | +|--------------------|---------------|---------------------| +| **Authentifizierung** | Verwende SSH-Schlüssel oder Personal Access Tokens | Passwörter sind weniger sicher und werden ersetzt | +| **Zwei-Faktor-Authentifizierung** | Aktiviere 2FA für dein GitHub-Konto | Fügt eine zusätzliche Schutzschicht hinzu | +| **Repository-Sicherheit** | Niemals sensible Informationen commiten | API-Schlüssel und Passwörter gehören nicht in öffentliche Repos | +| **Abhängigkeitsmanagement** | Aktiviere Dependabot für Updates | Hält deine Abhängigkeiten sicher und aktuell | + +> ⚠️ **Wichtige Sicherheits-Erinnerung**: Niemals API-Schlüssel, Passwörter oder andere sensible Daten in einem Repository abspeichern. Nutze Umgebungsvariablen und `.gitignore`-Dateien, um sensible Daten zu schützen. + +**Moderne Authentifizierungs-Einrichtung:** + +```bash +# SSH-Schlüssel generieren (moderner ed25519-Algorithmus) +ssh-keygen -t ed25519 -C "your_email@example.com" + +# Git für die Verwendung von SSH einrichten +git remote set-url origin git@github.com:username/repository.git +``` + +> 💡 **Profi-Tipp**: SSH-Schlüssel ersparen dir das wiederholte Eingeben von Passwörtern und sind sicherer als traditionelle Authentifizierungsmethoden. + +--- -Angenommen, du hast einen Ordner lokal mit einem Codeprojekt und möchtest deinen Fortschritt mit Git, dem Versionskontrollsystem, nachverfolgen. Manche Leute vergleichen die Nutzung von Git mit dem Schreiben eines Liebesbriefs an dein zukünftiges Ich. Wenn du deine Commit-Nachrichten Tage, Wochen oder Monate später liest, kannst du dich daran erinnern, warum du eine Entscheidung getroffen hast, oder eine Änderung "rückgängig machen" – vorausgesetzt, du schreibst gute "Commit-Nachrichten". +## Verwalt deinen Code wie ein Profi + +Okay, HIER wird es wirklich spannend! 🎉 Wir lernen jetzt, wie du deinen Code wie die Profis verfolgst und verwaltest, und ehrlich gesagt ist das einer meiner Lieblingsteile, weil es so einen enormen Unterschied macht. + +Stell dir vor: Du schreibst eine fantastische Geschichte und möchtest jeden Entwurf, jede brillante Änderung und jeden „Moment, in dem ich dachte: Genie!“ festhalten. Genau das macht Git für deinen Code! Es ist wie ein unglaubliches Zeitreiseführungs-Notizbuch, das ALLES speichert – jeden Tastendruck, jede Änderung, jeden „Ups, jetzt ist alles kaputt“-Moment, den du sofort rückgängig machen kannst. + +Ich will ehrlich sein – das kann am Anfang überwältigend wirken. Als ich angefangen habe, dachte ich: „Warum kann ich meine Dateien nicht einfach normal speichern?“ Aber glaub mir: Sobald Git für dich klick macht (und das wird es!), hast du diesen Aha-Moment, in dem du denkst: „Wie habe ich jemals ohne das programmiert?“ Es ist, als würdest du entdecken, dass du fliegen kannst, obwohl du dein Leben lang nur gelaufen bist! + +Angenommen, du hast lokal einen Ordner mit einem Codeprojekt und möchtest deinen Fortschritt mit Git verfolgen – dem Versionskontrollsystem. Manche vergleichen Git mit einem Liebesbrief an dein zukünftiges Ich. Wenn du deine Commit-Nachrichten Tage, Wochen oder Monate später liest, kannst du dich erinnern, warum du eine Entscheidung getroffen hast oder Änderungen zurücknehmen („rollbacken“) – vorausgesetzt, du schreibst gute Commit-Nachrichten. + +```mermaid +flowchart TD + A[📁 Ihre Projektdateien] --> B{Ist es ein Git-Repository?} + B -->|Nein| C[git init] + B -->|Ja| D[Änderungen vornehmen] + C --> D + D --> E[git add .] + E --> F["git commit -m 'Nachricht'"] + F --> G[git push] + G --> H[🌟 Code auf GitHub!] + + H --> I{Möchten Sie zusammenarbeiten?} + I -->|Ja| J[Fork & Klonen] + I -->|Nein| D + J --> K[Branch erstellen] + K --> L[Änderungen vornehmen] + L --> M[Pull-Anfrage] + M --> N[🎉 Beitrag leisten!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Aufgabe: Erstelle dein erstes Repository! + +> 🎯 **Deine Mission (und ich freue mich so für dich!)**: Wir erstellen zusammen dein allererstes GitHub-Repository! Wenn wir fertig sind, hast du deine kleine eigene Ecke im Internet, wo dein Code wohnt, und du hast deinen ersten „Commit“ gemacht (das ist Entwickler*innen-Sprache dafür, deine Arbeit auf eine wirklich clevere Weise zu speichern). +> +> Das ist wirklich ein besonderer Moment – du bist kurz davor, offiziell Teil der globalen Entwickler-Community zu werden! Ich erinnere mich noch an den Nervenkitzel, als ich mein erstes Repo erstellt habe und dachte „Wow, das mache ich wirklich!“ -### Aufgabe: Ein Repository erstellen und Code committen +Lass uns gemeinsam dieses Abenteuer Schritt für Schritt durchgehen. Nimm dir Zeit bei jedem Schritt – es gibt keinen Preis fürs Hetzen, und ich verspreche dir, jeder Schritt wird Sinn machen. Denk dran, jede*r Programmier-Superstar, den du bewunderst, saß genau dort, wo du jetzt bist, und war kurz davor, sein erstes Repository zu erstellen. Wie cool ist das? -> Schau dir das Video an +> Sieh dir das Video an > -> [![Git- und GitHub-Grundlagen Video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Grundlagen zu Git und GitHub Video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) + +**Lass es uns zusammen machen:** -1. **Repository auf GitHub erstellen**. Auf GitHub.com, im Reiter "Repositories" oder in der Navigationsleiste oben rechts, finde den Button **neues Repository**. +1. **Erstelle dein Repository auf GitHub**. Geh zu GitHub.com und suche den hellgrünen **New**-Button (oder das **+**-Zeichen oben rechts). Klick drauf und wähle **New repository**. - 1. Gib deinem Repository (Ordner) einen Namen. - 1. Wähle **Repository erstellen**. + So geht's: + 1. Gib deinem Repository einen Namen – mach ihn aussagekräftig für dich! + 1. Füge eine Beschreibung hinzu, wenn du möchtest (das hilft anderen, dein Projekt zu verstehen) + 1. Entscheide, ob es öffentlich (für alle sichtbar) oder privat (nur für dich) sein soll + 1. Ich empfehle, das Kästchen für eine README-Datei anzuklicken – das ist wie die Titelseite deines Projekts + 1. Klick auf **Create repository** und feier – du hast gerade dein erstes Repo erstellt! 🎉 -1. **Zu deinem Arbeitsordner navigieren**. Wechsle in deinem Terminal zu dem Ordner (auch als Verzeichnis bekannt), den du nachverfolgen möchtest. Gib ein: +2. **Navigiere zu deinem Projektordner**. Öffne jetzt dein Terminal (keine Angst, es ist gar nicht so furchteinflößend!). Wir müssen dem Computer sagen, wo deine Projektdateien sind. Gib diesen Befehl ein: ```bash cd [name of your folder] ``` -1. **Ein Git-Repository initialisieren**. Gib in deinem Projekt ein: + **Was wir hier tun:** + - Wir sagen dem Computer quasi „Hey, geh zu meinem Projektordner“ + - Das ist wie ein Ordner auf deinem Desktop zu öffnen, nur mit Textbefehlen + - Ersetze `[name of your folder]` durch den tatsächlichen Namen deines Projektordners + +3. **Mach deinen Ordner zum Git-Repository**. Hier passiert die Magie! Tippe: ```bash git init ``` -1. **Status überprüfen**. Um den Status deines Repositorys zu überprüfen, gib ein: + **Das ist gerade passiert (cool, oder?):** + - Git hat gerade einen versteckten `.git`-Ordner in deinem Projekt erstellt – du siehst ihn nicht, aber er ist da! + - Dein normaler Ordner ist jetzt ein „Repository“, das jede Änderung, die du machst, verfolgen kann + - Denk daran wie Superkräfte für deinen Ordner, der sich alles merken kann + +4. **Schau dir an, was Git sagt**. Mal sehen, was Git momentan über dein Projekt denkt: ```bash git status ``` - Die Ausgabe könnte etwa so aussehen: + **So verstehst du, was Git dir mitteilt:** + + Du könntest etwas sehen, das so aussieht: ```output Changes not staged for commit: (use "git add ..." to update what will be committed) - (use "git checkout -- ..." to discard changes in working directory) + (use "git restore ..." to discard changes in working directory) modified: file.txt modified: file2.txt ``` - Normalerweise zeigt dir der Befehl `git status` Dinge wie, welche Dateien bereit sind, im Repository _gespeichert_ zu werden, oder welche Änderungen darauf vorgenommen wurden, die du möglicherweise beibehalten möchtest. + **Keine Panik! Das bedeutet das:** + - Dateien in **rot** sind Dateien, die geändert wurden, aber noch nicht zum Speichern bereit sind + - Dateien in **grün** (wenn du sie siehst) sind bereit zum Speichern + - Git hilft dir, indem es genau sagt, was du als Nächstes tun kannst + + > 💡 **Profi-Tipp**: Der Befehl `git status` ist dein bester Freund! Nutze ihn jederzeit, wenn du nicht weiterweißt. Es ist wie zu fragen: „Hey Git, wie sieht's gerade aus?“ -1. **Alle Dateien zum Nachverfolgen hinzufügen** - Dies wird auch als "Staging" von Dateien oder das Hinzufügen von Dateien zum Staging-Bereich bezeichnet. +5. **Mach deine Dateien bereit zum Speichern** (das nennt man „staging“): ```bash git add . ``` - Das Argument `git add` plus `.` zeigt an, dass alle deine Dateien und Änderungen nachverfolgt werden sollen. + **Was wir gerade gemacht haben:** + - Wir haben Git gesagt: „Ich möchte ALLE meine Dateien im nächsten Speichervorgang einschließen“ + - Der `.` bedeutet „alles in diesem Ordner“ + - Jetzt sind deine Dateien „gestaged“ und bereit fürs nächste Speichern -1. **Ausgewählte Dateien zum Nachverfolgen hinzufügen** + **Möchtest du selektiver sein?** Du kannst auch nur bestimmte Dateien hinzufügen: ```bash git add [file or folder name] ``` - Dies hilft uns, nur ausgewählte Dateien zum Staging-Bereich hinzuzufügen, wenn wir nicht alle Dateien auf einmal committen möchten. + **Warum möchtest du das tun?** + - Manchmal willst du zusammenhängende Änderungen gruppiert speichern + - Es hilft dir, deine Arbeit in logische Abschnitte zu unterteilen + - So versteht man leichter, was wann geändert wurde -1. **Alle Dateien aus dem Staging-Bereich entfernen** + **Hast du es dir anders überlegt?** Kein Problem! Du kannst Dateien so aus dem Staging entfernen: ```bash + # Alles aus dem Staging-Bereich entfernen git reset + + # Nur eine Datei aus dem Staging-Bereich entfernen + git reset [file name] ``` - Dieser Befehl hilft uns, alle Dateien auf einmal aus dem Staging-Bereich zu entfernen. - -1. **Eine bestimmte Datei aus dem Staging-Bereich entfernen** - - ```bash - git reset [file or folder name] - ``` - - Dieser Befehl hilft uns, nur eine bestimmte Datei aus dem Staging-Bereich zu entfernen, die wir nicht für den nächsten Commit einbeziehen möchten. + Keine Sorge – das löscht deine Arbeit nicht, es nimmt die Dateien nur aus dem „bereit zum Speichern“-Bereich heraus. -1. **Deine Arbeit speichern**. An diesem Punkt hast du die Dateien in einen sogenannten _Staging-Bereich_ hinzugefügt, einen Ort, an dem Git deine Dateien nachverfolgt. Um die Änderung dauerhaft zu machen, musst du die Dateien _committen_. Dazu erstellst du einen _Commit_ mit dem Befehl `git commit`. Ein _Commit_ stellt einen Speicherpunkt in der Historie deines Repositorys dar. Gib Folgendes ein, um einen _Commit_ zu erstellen: +6. **Speichere deine Arbeit dauerhaft** (das ist dein erster Commit!): ```bash git commit -m "first commit" ``` - Dies commitet alle deine Dateien und fügt die Nachricht "erster Commit" hinzu. Für zukünftige Commit-Nachrichten solltest du eine detailliertere Beschreibung verwenden, um zu vermitteln, welche Art von Änderung du vorgenommen hast. + **🎉 Glückwunsch! Du hast gerade deinen ersten Commit gemacht!** + + **Was gerade passiert ist:** + - Git hat einen „Snapshot“ von allen gestagten Dateien zu genau diesem Zeitpunkt erstellt + - Deine Commit-Nachricht „first commit“ erklärt, worum es bei diesem Speicherpunkt geht + - Git hat diesem Snapshot eine einzigartige ID gegeben, damit du ihn immer wiederfinden kannst + - Du hast offiziell angefangen, den Verlauf deines Projekts zu verfolgen! + + > 💡 **Zukünftige Commit-Nachrichten**: Sei bei den nächsten Commits beschreibender! Statt „updated stuff“ probier „Kontaktformular zur Startseite hinzugefügt“ oder „Fehler im Navigationsmenü behoben“. Dein zukünftiges Ich wird es dir danken! -1. **Dein lokales Git-Repository mit GitHub verbinden**. Ein Git-Repository ist auf deinem Rechner nützlich, aber irgendwann möchtest du ein Backup deiner Dateien irgendwo haben und andere Leute einladen, mit dir an deinem Repository zu arbeiten. Ein großartiger Ort dafür ist GitHub. Wir haben bereits ein Repository auf GitHub erstellt, daher müssen wir nur unser lokales Git-Repository mit GitHub verbinden. Der Befehl `git remote add` erledigt genau das. Gib den folgenden Befehl ein: +7. **Verbinde dein lokales Projekt mit GitHub**. Im Moment existiert dein Projekt nur auf deinem Rechner. Lass es uns mit deinem GitHub-Repository verbinden, damit du es mit der Welt teilen kannst! - > Hinweis: Bevor du den Befehl eingibst, gehe zu deiner GitHub-Repository-Seite, um die Repository-URL zu finden. Du wirst sie im folgenden Befehl verwenden. Ersetze ```https://github.com/username/repository_name.git``` durch deine GitHub-URL. + Geh zuerst auf deine GitHub-Repository-Seite und kopiere die URL. Dann komm hierher zurück und gib ein: ```bash git remote add origin https://github.com/username/repository_name.git ``` + + (Ersetze die URL durch deine tatsächliche Repository-URL!) - Dies erstellt eine _Remote-Verbindung_, genannt "origin", die auf das GitHub-Repository zeigt, das du zuvor erstellt hast. + **Was wir gerade gemacht haben:** + - Wir haben eine Verbindung zwischen deinem lokalen Projekt und deinem GitHub-Repository hergestellt + - „Origin“ ist nur ein Spitzname für dein GitHub-Repository – es ist wie das Hinzufügen eines Kontakts auf deinem Telefon + - Jetzt weiß dein lokales Git, wohin dein Code gesendet wird, wenn du ihn teilen möchtest -1. **Lokale Dateien an GitHub senden**. Bisher hast du eine _Verbindung_ zwischen dem lokalen Repository und dem GitHub-Repository hergestellt. Senden wir diese Dateien an GitHub mit dem folgenden Befehl `git push`, wie folgt: - - > Hinweis: Dein Branch-Name könnte standardmäßig anders als ```main``` sein. + 💡 **Einfachere Methode**: Wenn du GitHub CLI installiert hast, kannst du das mit einem einzigen Befehl machen: + ```bash + gh repo create my-repo --public --push --source=. + ``` + +8. **Sende deinen Code zu GitHub** (der große Moment!): ```bash git push -u origin main ``` - Dies sendet deine Commits in deinem "main"-Branch an GitHub. Das Festlegen des `upstream`-Branches einschließlich `-u` im Befehl stellt eine Verbindung zwischen deinem lokalen Branch und dem Remote-Branch her, sodass du in Zukunft einfach `git push` oder `git pull` verwenden kannst, ohne den Branch-Namen anzugeben. Git wird automatisch den `upstream`-Branch verwenden, und du musst den Branch-Namen in zukünftigen Befehlen nicht explizit angeben. + **🚀 Das ist es! Du lädst deinen Code auf GitHub hoch!** + + **Was gerade passiert:** + - Deine Commits reisen von deinem Computer zu GitHub + - Das `-u` Flag richtet eine dauerhafte Verbindung ein, damit zukünftige Pushes einfacher sind + - „main“ ist der Name deines Hauptbranches (wie der Hauptordner) + - Danach kannst du für zukünftige Uploads einfach `git push` eingeben! + + 💡 **Kurzer Hinweis**: Wenn dein Branch anders heißt (z. B. „master“), benutze stattdessen diesen Namen. Du kannst das mit `git branch --show-current` überprüfen. -2. **Weitere Änderungen hinzufügen**. Wenn du weiterhin Änderungen vornehmen und diese an GitHub senden möchtest, musst du nur die folgenden drei Befehle verwenden: +9. **Dein neuer täglicher Coding-Rhythmus** (jetzt wird es süchtig machend!): + + Ab jetzt hast du einen einfachen dreischrittigen Tanz, wenn du Änderungen an deinem Projekt machst: ```bash git add . - git commit -m "type your commit message here" + git commit -m "describe what you changed" git push ``` - > Tipp: Du möchtest möglicherweise auch eine `.gitignore`-Datei verwenden, um zu verhindern, dass Dateien, die du nicht nachverfolgen möchtest, auf GitHub angezeigt werden – wie die Notizdatei, die du im selben Ordner speicherst, die aber keinen Platz in einem öffentlichen Repository hat. Du kannst Vorlagen für `.gitignore`-Dateien unter [.gitignore templates](https://github.com/github/gitignore) finden. + **Das wird dein Coding-Herzschlag:** + - Mach einige tolle Änderungen an deinem Code ✨ + - Stage sie mit `git add` („Hey Git, achte auf diese Änderungen!“) + - Sichere sie mit `git commit` und einer beschreibenden Nachricht (dein zukünftiges Ich wird es dir danken!) + - Teile sie mit der Welt mittels `git push` 🚀 + - Wiederhole das Ganze – ehrlich, das wird so natürlich wie Atmen! + + Ich liebe diesen Workflow, weil es sich anfühlt, als hättest du mehrere Speicherpunkte in einem Videospiel. Hast du eine Änderung gemacht, die dir gefällt? Commit sie! Willst du etwas Riskantes ausprobieren? Kein Problem – du kannst immer zum letzten Commit zurückgehen, wenn etwas schiefgeht! + + > 💡 **Tipp**: Du möchtest vielleicht auch eine `.gitignore`-Datei verwenden, um zu verhindern, dass Dateien, die du nicht verfolgen willst, auf GitHub landen – zum Beispiel eine Notizdatei, die du im gleichen Ordner speicherst, die aber nichts in einem öffentlichen Repository zu suchen hat. Du findest Vorlagen für `.gitignore`-Dateien bei [.gitignore templates](https://github.com/github/gitignore) oder kannst eine mit [gitignore.io](https://www.toptal.com/developers/gitignore) erstellen. + +### 🧠 **Erster Repository-Check-in: Wie hat sich das angefühlt?** + +**Nimm dir einen Moment zum Feiern und Nachdenken:** +- Wie hat es sich angefühlt, deinen Code zum ersten Mal auf GitHub zu sehen? +- Welcher Schritt war am verwirrendsten und welcher überraschend einfach? +- Kannst du den Unterschied zwischen `git add`, `git commit` und `git push` mit deinen eigenen Worten erklären? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Projekt erstellen + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Erfolg! 🎉 + + note right of Staged + Dateien bereit zum Speichern + end note + + note right of Committed + Schnappschuss erstellt + end note +``` +> **Denke daran**: Selbst erfahrene Entwickler vergessen manchmal die genauen Befehle. Damit dieser Workflow in Muskelgedächtnis übergeht, braucht es Übung – du machst das prima! + +#### Moderne Git-Workflows + +Ziehe in Betracht, diese modernen Praktiken zu übernehmen: + +- **Conventional Commits**: Verwende ein standardisiertes Commit-Nachrichtenformat wie `feat:`, `fix:`, `docs:`, etc. Mehr dazu auf [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomare Commits**: Mache jeden Commit zu einer einzelnen logischen Änderung +- **Häufige Commits**: Committe oft mit beschreibenden Nachrichten, statt selten und groß #### Commit-Nachrichten -Eine großartige Git-Commit-Betreffzeile vervollständigt den folgenden Satz: -Wenn angewendet, wird dieser Commit +Eine großartige Betreffzeile für Git-Commits vervollständigt folgenden Satz: +Wenn angewendet, wird dieser Commit . + +Verwende für den Betreff den Imperativ im Präsens: „change“ nicht „changed“ oder „changes“. +Wie im Betreff, verwende auch im (optionalem) Textkörper den Imperativ im Präsens. Der Textkörper sollte die Motivation für die Änderung erklären und diese im Gegensatz zum vorherigen Verhalten setzen. Du erklärst das „Warum“, nicht das „Wie“. + +✅ Nimm dir ein paar Minuten Zeit, um auf GitHub zu stöbern. Kannst du eine wirklich gute Commit-Nachricht finden? Eine besonders minimalistische? Welche Informationen sind deiner Meinung nach am wichtigsten und nützlichsten in einer Commit-Nachricht? -Für den Betreff verwende die imperative Gegenwartsform: "ändern" statt "geändert" oder "ändert". -Wie im Betreff, verwende auch im optionalen Textkörper die imperative Gegenwartsform. Der Textkörper sollte die Motivation für die Änderung enthalten und diese mit dem vorherigen Verhalten kontrastieren. Du erklärst das `Warum`, nicht das `Wie`. +## Zusammenarbeit mit Anderen (Der spaßige Teil!) -✅ Nimm dir ein paar Minuten Zeit, um auf GitHub zu surfen. Kannst du eine wirklich großartige Commit-Nachricht finden? Kannst du eine sehr minimalistische finden? Welche Informationen denkst du, sind am wichtigsten und nützlich, um in einer Commit-Nachricht vermittelt zu werden? +Halt deinen Hut fest, denn HIER wird GitHub absolut magisch! 🪄 Du hast gelernt, deinen eigenen Code zu verwalten, aber jetzt tauchen wir in meinen absoluten Lieblingsteil ein – die Zusammenarbeit mit großartigen Menschen aus der ganzen Welt. -### Aufgabe: Zusammenarbeit +Stell dir vor: Du wachst morgen auf und siehst, dass jemand in Tokio deinen Code verbessert hat, während du geschlafen hast. Dann behebt jemand in Berlin einen Bug, bei dem du feststeckst. Am Nachmittag fügt ein Entwickler in São Paulo ein Feature hinzu, an das du nie gedacht hast. Das ist keine Science-Fiction – das ist einfach Dienstag im GitHub-Universum! -Der Hauptgrund, Dinge auf GitHub zu stellen, war, die Zusammenarbeit mit anderen Entwicklern zu ermöglichen. +Was mich richtig begeistert, ist, dass die Kollaborationsfähigkeiten, die du gleich lernst, genau DIESE Workflows sind, die Teams bei Google, Microsoft und deinen Lieblings-Startups jeden Tag nutzen. Du lernst nicht nur ein cooles Tool – du lernst die geheime Sprache, mit der die gesamte Softwarewelt zusammenarbeitet. -## Arbeiten an Projekten mit anderen +Ehrlich, wenn du erst einmal den Kick erlebst, wenn jemand deinen ersten Pull Request merged, wirst du verstehen, warum Entwickler so leidenschaftlich für Open Source sind. Es ist, als wäre man Teil des weltweit größten, kreativsten Teamprojekts! -> Schau dir das Video an +> Schau dir das Video an > -> [![Git- und GitHub-Grundlagen Video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Der Hauptgrund, Dinge auf GitHub zu setzen, war, die Zusammenarbeit mit anderen Entwicklern zu ermöglichen. + +```mermaid +flowchart LR + A[🔍 Projekt finden] --> B[🍴 Repository forken] + B --> C[📥 Lokal klonen] + C --> D[🌿 Branch erstellen] + D --> E[✏️ Änderungen vornehmen] + E --> F[💾 Änderungen committen] + F --> G[📤 Branch pushen] + G --> H[🔄 Pull Request erstellen] + H --> I{Wartender Review} + I -->|✅ Genehmigt| J[🎉 Zusammenführen!] + I -->|❓ Änderungen angefordert| K[📝 Updates vornehmen] + K --> F + J --> L[🧹 Branches bereinigen] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +Gehe in deinem Repository zu `Insights > Community`, um zu sehen, wie dein Projekt im Vergleich zu empfohlenen Community-Standards dasteht. + +Möchtest du dein Repository professionell und einladend wirken lassen? Gehe zu deinem Repository und klicke auf `Insights > Community`. Dieses tolle Feature zeigt dir, wie dein Projekt im Vergleich zu dem dasteht, was die GitHub-Community als „gute Repository-Praktiken“ betrachtet. + +> 🎯 **Lass dein Projekt glänzen**: Ein gut organisiertes Repository mit guter Dokumentation ist wie ein sauberer, einladender Ladeneingang. Es zeigt, dass dir deine Arbeit wichtig ist und motiviert andere zum Mitmachen! + +**Das macht ein Repository großartig:** + +| Was hinzufügen | Warum es wichtig ist | Was es für dich bewirkt | +|----------------|---------------------|------------------------| +| **Beschreibung** | Der erste Eindruck zählt! | Leute wissen sofort, was dein Projekt macht | +| **README** | Die Vorderseite deines Projekts | Wie ein freundlicher Reiseleiter für neue Besucher | +| **Richtlinien zum Mitwirken** | Zeigt, dass du Hilfe willkommen heißt | Leute wissen genau, wie sie dir helfen können | +| **Verhaltenskodex** | Schafft einen freundlichen Raum | Jeder fühlt sich willkommen, teilzunehmen | +| **Lizenz** | Rechtliche Klarheit | Andere wissen, wie sie deinen Code nutzen dürfen | +| **Sicherheitsrichtlinie** | Zeigt, dass du verantwortungsbewusst bist | Demonstriert professionelle Praktiken | + +> 💡 **Profi-Tipp**: GitHub stellt Vorlagen für all diese Dateien bereit. Wenn du ein neues Repository erstellst, kannst du die Kästchen ankreuzen, um diese Dateien automatisch zu generieren. + +**Moderne GitHub-Features zum Erkunden:** -In deinem Repository navigiere zu `Insights > Community`, um zu sehen, wie dein Projekt im Vergleich zu den empfohlenen Community-Standards abschneidet. +🤖 **Automatisierung & CI/CD:** +- **GitHub Actions** für automatisiertes Testen und Deployment +- **Dependabot** für automatische Aktualisierung von Abhängigkeiten - Hier sind einige Dinge, die dein GitHub-Repository verbessern können: - - **Beschreibung**. Hast du eine Beschreibung für dein Projekt hinzugefügt? - - **README**. Hast du ein README hinzugefügt? GitHub bietet Anleitungen zum Schreiben eines [README](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon). - - **Richtlinien für Beiträge**. Hat dein Projekt [Richtlinien für Beiträge](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)? - - **Verhaltenskodex**. Einen [Verhaltenskodex](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), - - **Lizenz**. Vielleicht am wichtigsten, eine [Lizenz](https://docs.github.com/articles/adding-a-license-to-a-repository/)? +💬 **Community & Projektmanagement:** +- **GitHub Discussions** für Community-Gespräche jenseits von Issues +- **GitHub Projects** für Kanban-ähnliches Projektmanagement +- **Branch-Schutzregeln** zur Durchsetzung von Code-Qualitätsstandards -All diese Ressourcen werden neuen Teammitgliedern beim Einstieg helfen. Und das sind typischerweise die Dinge, die neue Mitwirkende sich ansehen, bevor sie überhaupt deinen Code betrachten, um herauszufinden, ob dein Projekt der richtige Ort für sie ist, um ihre Zeit zu investieren. +All diese Ressourcen helfen besonders beim Onboarding neuer Teammitglieder. Und genau das sind in der Regel die Dinge, die neue Mitwirkende sich anschauen, bevor sie sich überhaupt deinen Code ansehen, um herauszufinden, ob dein Projekt der richtige Ort für ihre Zeit ist. -✅ README-Dateien, obwohl sie Zeit in Anspruch nehmen, werden oft von beschäftigten Maintainer vernachlässigt. Kannst du ein Beispiel für eine besonders beschreibende README-Datei finden? Hinweis: Es gibt einige [Tools, um gute READMEs zu erstellen](https://www.makeareadme.com/), die du ausprobieren könntest. +✅ README-Dateien dauern oft etwas, werden von vielbeschäftigten Maintainers aber oft vernachlässigt. Kannst du ein besonders ausführliches Beispiel finden? Hinweis: Es gibt einige [Tools, um gute READMEs zu erstellen](https://www.makeareadme.com/), die du ausprobieren kannst. -### Aufgabe: Code zusammenführen +### Aufgabe: Mische etwas Code zusammen -Beitragsdokumente helfen Menschen, zum Projekt beizutragen. Sie erklären, welche Arten von Beiträgen du suchst und wie der Prozess funktioniert. Mitwirkende müssen eine Reihe von Schritten durchlaufen, um zu deinem Repository auf GitHub beitragen zu können: +Contributing-Dokumente helfen Leuten, zum Projekt beizutragen. Sie erklären, welche Arten von Beiträgen du suchst und wie der Prozess funktioniert. Mitwirkende müssen eine Reihe von Schritten durchlaufen, um zu deinem Repo auf GitHub beitragen zu können: -1. **Dein Repository forken**. Du wirst wahrscheinlich möchten, dass Leute dein Projekt _forken_. Forken bedeutet, eine Kopie deines Repositorys auf ihrem GitHub-Profil zu erstellen. -1. **Klonen**. Von dort aus werden sie das Projekt auf ihren lokalen Rechner klonen. -1. **Einen Branch erstellen**. Du wirst sie bitten, einen _Branch_ für ihre Arbeit zu erstellen. -1. **Änderungen auf einen Bereich konzentrieren**. Bitte Mitwirkende, ihre Beiträge auf eine Sache gleichzeitig zu konzentrieren – so ist die Wahrscheinlichkeit höher, dass du ihre Arbeit _zusammenführen_ kannst. Stell dir vor, sie schreiben einen Bugfix, fügen eine neue Funktion hinzu und aktualisieren mehrere Tests – was, wenn du nur 2 von 3 oder 1 von 3 Änderungen implementieren möchtest oder kannst? +1. **Dein Repo forken**: Wahrscheinlich möchtest du, dass Leute dein Projekt _forken_. Forken bedeutet, eine Kopie deines Repositories in ihrem eigenen GitHub Profil zu erstellen. +1. **Clonen**: Von dort klonen sie das Projekt auf ihren lokalen Rechner. +1. **Einen Branch erstellen**: Du solltest sie bitten, für ihre Arbeit einen _Branch_ zu erstellen. +1. **Konzentriere ihre Änderung auf ein Gebiet**: Bitte die Mitwirkenden, ihre Beiträge jeweils auf ein Thema zu konzentrieren – so ist die Chance höher, dass du ihre Arbeit _merge'n_ kannst. Stell dir vor, sie schreiben einen Bugfix, fügen ein neues Feature hinzu und aktualisieren mehrere Tests – was, wenn du nur 2 von 3 oder 1 von 3 Änderungen umsetzen willst oder kannst? -✅ Stell dir eine Situation vor, in der Branches besonders wichtig sind, um guten Code zu schreiben und zu veröffentlichen. Welche Anwendungsfälle fallen dir ein? +✅ Stell dir eine Situation vor, in der Branches besonders kritisch sind, um guten Code zu schreiben und auszuliefern. Welche Anwendungsfälle fallen dir ein? -> Hinweis: Sei die Veränderung, die du in der Welt sehen möchtest, und erstelle auch Branches für deine eigene Arbeit. Alle Commits, die du machst, werden auf dem Branch gemacht, auf dem du gerade "ausgecheckt" bist. Verwende `git status`, um zu sehen, welcher Branch das ist. +> Denk daran, sei die Veränderung, die du in der Welt sehen willst, und erstelle auch für deine eigene Arbeit Branches. Alle Commits machst du auf dem Branch, auf dem du gerade „ausgecheckt“ bist. Benutze `git status`, um zu sehen, welcher das ist. -Gehen wir einen Workflow für Mitwirkende durch. Angenommen, der Mitwirkende hat das Repository bereits _geforkt_ und _geklont_, sodass er ein Git-Repository hat, das auf seinem lokalen Rechner bereit ist, bearbeitet zu werden: +Lass uns einen Contributor-Workflow durchgehen. Angenommen, der Mitwirkende hat das Repo bereits _geforkt_ und _geclont_, sodass er ein Git-Repo auf seinem lokalen Rechner hat, an dem er arbeiten kann: -1. **Einen Branch erstellen**. Verwende den Befehl `git branch`, um einen Branch zu erstellen, der die Änderungen enthält, die sie beitragen möchten: +1. **Einen Branch erstellen**: Benutze den Befehl `git branch`, um einen Branch zu erstellen, der die Änderungen enthalten wird, die sie beitragen wollen: ```bash git branch [branch-name] ``` -1. **Zum Arbeitsbranch wechseln**. Wechsle zum angegebenen Branch und aktualisiere das Arbeitsverzeichnis mit `git switch`: + > 💡 **Moderner Ansatz**: Du kannst auch mit einem Befehl den neuen Branch erstellen und zu ihm wechseln: + ```bash + git switch -c [branch-name] + ``` + +1. **Zum Arbeitsbranch wechseln**: Wechsle zum angegebenen Branch und aktualisiere das Arbeitsverzeichnis mit `git switch`: ```bash git switch [branch-name] ``` -1. **Arbeiten durchführen**. An diesem Punkt möchtest du deine Änderungen hinzufügen. Vergiss nicht, Git darüber zu informieren, mit den folgenden Befehlen: + > 💡 **Moderner Hinweis**: `git switch` ist der moderne Ersatz für `git checkout`, wenn du Branches wechselst. Es ist klarer und sicherer für Anfänger. + +1. **Arbeit ausführen**: Jetzt willst du deine Änderungen hinzufügen. Vergiss nicht, Git mit den folgenden Befehlen davon zu erzählen: ```bash git add . git commit -m "my changes" ``` - Stelle sicher, dass du deinem Commit einen guten Namen gibst, sowohl für dich als auch für den Maintainer des Repositorys, dem du hilfst. + > ⚠️ **Commit-Nachrichtenqualität**: Achte darauf, deinem Commit einen guten Namen zu geben – sowohl für dich als auch für den Maintainer des Repos, bei dem du mithilfst. Sei spezifisch, was du geändert hast! -1. **Deine Arbeit mit dem `main`-Branch kombinieren**. Irgendwann bist du mit deiner Arbeit fertig und möchtest deine Arbeit mit der des `main`-Branches kombinieren. Der `main`-Branch könnte sich inzwischen geändert haben, also stelle sicher, dass du ihn zuerst auf den neuesten Stand bringst, mit den folgenden Befehlen: +1. **Deine Arbeit mit dem `main`-Branch kombinieren**: Irgendwann bist du fertig mit der Arbeit und möchtest deine Änderungen mit denen des `main`-Branches zusammenführen. Der `main`-Branch könnte sich in der Zwischenzeit geändert haben, also stelle zuerst sicher, dass er auf dem neuesten Stand ist, mit den folgenden Befehlen: ```bash git switch main git pull ``` - An diesem Punkt möchtest du sicherstellen, dass alle _Konflikte_, Situationen, in denen Git die Änderungen nicht einfach _kombinieren_ kann, in deinem Arbeitsbranch auftreten. Führe daher die folgenden Befehle aus: + An diesem Punkt willst du sicherstellen, dass jegliche _Konflikte_ – Situationen, in denen Git die Änderungen nicht einfach _kombinieren_ kann – in deinem Arbeitsbranch auftreten. Deshalb führe die folgenden Befehle aus: ```bash git switch [branch_name] git merge main ``` - Der Befehl `git merge main` bringt alle Änderungen von `main` in deinen Branch. Hoffentlich kannst du einfach weitermachen. Falls nicht, wird dir VS Code zeigen, wo Git _verwirrt_ ist, und du änderst die betroffenen Dateien, um anzugeben, welcher Inhalt am genauesten ist. + Der Befehl `git merge main` holt alle Änderungen von `main` in deinen Branch. Hoffentlich kannst du einfach weitermachen. Wenn nicht, zeigt dir VS Code an, wo Git _verwirrt_ ist, und du änderst die betroffenen Dateien so, dass klar ist, welcher Inhalt der genaueste ist. - Um zu einem anderen Branch zu wechseln, verwende den modernen Befehl `git switch`: + 💡 **Moderne Alternative**: Ziehe `git rebase` für eine sauberere Historie in Betracht: ```bash - git switch [branch_name] - + git rebase main + ``` + Dabei werden deine Commits oben auf dem neuesten `main`-Branch abgespielt und eine lineare Historie erstellt. -1. **Deine Arbeit an GitHub senden**. Deine Arbeit an GitHub zu senden bedeutet zwei Dinge: Deinen Branch an dein Repository zu pushen und dann einen PR (Pull Request) zu öffnen. +1. **Deine Arbeit zu GitHub schicken**: Deine Arbeit zu GitHub zu schicken bedeutet zwei Dinge: Deinen Branch zu deinem Repo pushen und dann einen PR, Pull Request, öffnen. ```bash git push --set-upstream origin [branch-name] ``` - Der obige Befehl erstellt den Branch in deinem geforkten Repository. -1. **Einen PR öffnen**. Als Nächstes möchtest du einen PR öffnen. Dazu navigierst du zum geforkten Repository auf GitHub. Dort siehst du eine Anzeige, die dich fragt, ob du einen neuen PR erstellen möchtest. Du klickst darauf und gelangst zu einer Oberfläche, in der du den Titel der Commit-Nachricht ändern und eine passendere Beschreibung hinzufügen kannst. Nun sieht der Maintainer des Repos, das du geforkt hast, diesen PR und _Daumen drücken_, dass er deinen PR schätzt und _merged_. Du bist jetzt ein Contributor, yay :) + Der obige Befehl erstellt den Branch in deinem geforkten Repo. + +### 🤝 **Zusammenarbeits-Check: Bereit, mit anderen zu arbeiten?** + +**Schauen wir mal, wie du zur Zusammenarbeit stehst:** +- Macht der Gedanke an Forks und Pull Requests für dich jetzt Sinn? +- Was möchtest du am Arbeiten mit Branches noch mehr üben? +- Wie wohl fühlst du dich dabei, zu einem fremden Projekt beizutragen? + +```mermaid +mindmap + root((Git Zusammenarbeit)) + Branching + Feature branches + Bugfix-Branches + Experimentelle Arbeit + Pull Requests + Code-Review + Diskussion + Testen + Best Practices + Klare Commit-Nachrichten + Kleine fokussierte Änderungen + Gute Dokumentation +``` +> **Zuversicht schütteln**: Jeder Entwickler, den du bewunderst, war irgendwann aufgeregt bei seinem ersten Pull Request. Die GitHub-Community ist unglaublich freundlich zu Neulingen! + +1. **Einen PR öffnen**: Danach willst du einen PR öffnen. Das machst du, indem du zum geforkten Repo auf GitHub navigierst. Dort siehst du eine Anzeige, die fragt, ob du einen neuen PR erstellen willst. Du klickst das an und wirst zu einer Oberfläche geführt, in der du Commit-Nachricht-Titel ändern und eine passendere Beschreibung hinzufügen kannst. Jetzt sieht der Maintainer des Repos, das du geforkt hast, diesen PR und _Daumen drücken_, er schätzt deinen PR und _merge't_ ihn. Du bist jetzt ein Contributor, hurra :) + + 💡 **Moderner Tipp**: Du kannst PRs auch mit der GitHub CLI erstellen: + ```bash + gh pr create --title "Your PR title" --body "Description of changes" + ``` -1. **Aufräumen**. Es gilt als gute Praxis, nach dem erfolgreichen Mergen eines PRs _aufzuräumen_. Du solltest sowohl deinen lokalen Branch als auch den Branch, den du zu GitHub gepusht hast, bereinigen. Lösche ihn zunächst lokal mit folgendem Befehl: + 🔧 **Best Practices für PRs**: + - Verlinke zu verwandten Issues mit Keywords wie „Fixes #123“ + - Füge Screenshots für UI-Änderungen hinzu + - Bitte um bestimmte Reviewer + - Nutze Draft-PRs für Arbeiten in Bearbeitung + - Sorge dafür, dass alle CI-Prüfungen vor dem Review bestanden sind +1. **Aufräumen**. Es wird als gute Praxis angesehen, nach dem erfolgreichen Mergen eines PR aufzuräumen. Du möchtest sowohl deinen lokalen Branch als auch den Branch, den du auf GitHub gepusht hast, bereinigen. Lösche ihn zuerst lokal mit dem folgenden Befehl: ```bash git branch -d [branch-name] ``` - Gehe anschließend zur GitHub-Seite des geforkten Repos und entferne den Remote-Branch, den du gerade gepusht hast. + Stelle sicher, dass du danach auf die GitHub-Seite des geforkten Repositories gehst und den Remote-Branch entfernst, den du gerade dorthin gepusht hast. -`Pull request` scheint ein seltsamer Begriff zu sein, da du eigentlich deine Änderungen in das Projekt pushen möchtest. Aber der Maintainer (Projektbesitzer) oder das Kernteam muss deine Änderungen prüfen, bevor sie mit dem "main"-Branch des Projekts zusammengeführt werden. Du bittest also tatsächlich um eine Entscheidung über die Änderung von einem Maintainer. +`Pull Request` klingt nach einem seltsamen Begriff, denn eigentlich willst du deine Änderungen ins Projekt pushen. Aber der Maintainer (Projektinhaber) oder das Kernteam muss deine Änderungen erst prüfen, bevor sie mit dem "main"-Branch des Projektes zusammengeführt werden. Du bittest also eigentlich um eine Änderungsentscheidung von einem Maintainer. -Ein Pull Request ist der Ort, an dem die Unterschiede, die auf einem Branch eingeführt wurden, verglichen und diskutiert werden können – mit Reviews, Kommentaren, integrierten Tests und mehr. Ein guter Pull Request folgt ungefähr denselben Regeln wie eine Commit-Nachricht. Du kannst auf ein Issue im Issue-Tracker verweisen, wenn deine Arbeit beispielsweise ein Problem löst. Dies geschieht mit einem `#`, gefolgt von der Nummer des Issues. Zum Beispiel `#97`. +Ein Pull Request ist der Ort, um die Unterschiede eines Branches zu vergleichen und zu diskutieren, mit Reviews, Kommentaren, integrierten Tests und mehr. Ein guter Pull Request folgt ungefähr den gleichen Regeln wie eine Commit-Nachricht. Du kannst einen Bezug auf ein Issue im Issue-Tracker hinzufügen, wenn deine Arbeit beispielsweise ein Problem behebt. Das wird mit einem `#` gefolgt von der Nummer deines Issues gemacht. Zum Beispiel `#97`. -🤞Daumen drücken, dass alle Checks erfolgreich sind und die Projektbesitzer deine Änderungen ins Projekt mergen🤞 +🤞Daumen drücken, dass alle Checks erfolgreich sind und der Projektinhaber/de die Änderungen ins Projekt mergen🤞 Aktualisiere deinen aktuellen lokalen Arbeitsbranch mit allen neuen Commits vom entsprechenden Remote-Branch auf GitHub: `git pull` -## Wie man zu Open Source beiträgt +## Beitrag zu Open Source (Deine Chance, einen Unterschied zu machen!) + +Bist du bereit für etwas, das dir absolut den Verstand rauben wird? 🤯 Lass uns über Beiträge zu Open-Source-Projekten sprechen – und allein beim Gedanken daran bekomme ich Gänsehaut! -Zunächst suchen wir ein Repository (oder **Repo**) auf GitHub, das dich interessiert und zu dem du eine Änderung beitragen möchtest. Du solltest dessen Inhalte auf deinen Rechner kopieren. +Das ist deine Chance, Teil von etwas wirklich Außergewöhnlichem zu werden. Stell dir vor, du verbesserst die Tools, die Millionen von Entwicklern täglich nutzen, oder behebst einen Fehler in einer App, die deine Freunde lieben. Das ist kein Traum – das ist es, worum es bei Open-Source-Beiträgen geht! -✅ Eine gute Möglichkeit, 'anfängerfreundliche' Repos zu finden, ist [die Suche nach dem Tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +Was mir dabei jedes Mal eine Gänsehaut beschert: Jedes einzelne Tool, das du gerade lernst – dein Code-Editor, die Frameworks, die wir erkunden, sogar der Browser, in dem du das liest – hat genau so angefangen, dass jemand wie du seinen allerersten Beitrag geleistet hat. Dieser brillante Entwickler, der deine Lieblings-VS-Code-Erweiterung gebaut hat? Der war einmal ein Anfänger, der mit zitternden Händen auf "Create Pull Request" geklickt hat, genau wie du es gleich tun wirst. -![Ein Repo lokal kopieren](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.de.png) +Und das Schönste daran ist: Die Open-Source-Community ist wie die größte Gruppenumarmung im Internet. Die meisten Projekte suchen aktiv nach Neulingen und haben Issues mit dem Label "good first issue" speziell für Leute wie dich! Maintainer freuen sich wirklich, wenn sie neue Mitwirkende sehen, weil sie sich an ihre eigenen ersten Schritte erinnern. -Es gibt mehrere Möglichkeiten, Code zu kopieren. Eine davon ist, die Inhalte des Repositories zu "klonen", entweder über HTTPS, SSH oder mit der GitHub CLI (Command Line Interface). +```mermaid +flowchart TD + A[🔍 GitHub erkunden] --> B[🏷️ Finde "gutes erstes Issue"] + B --> C[📖 Beitragsrichtlinien lesen] + C --> D[🍴 Repository forken] + D --> E[💻 Lokale Umgebung einrichten] + E --> F[🌿 Feature-Branch erstellen] + F --> G[✨ Beitrag erstellen] + G --> H[🧪 Änderungen testen] + H --> I[📝 Klaren Commit schreiben] + I --> J[📤 Push & PR erstellen] + J --> K[💬 Feedback bearbeiten] + K --> L[🎉 Zusammengeführt! Du bist ein Beitragender!] + L --> M[🌟 Nächstes Issue finden] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Du lernst hier nicht nur Programmieren – du bereitest dich darauf vor, einer globalen Familie von Machern beizutreten, die jeden Tag aufwachen und denken: "Wie können wir die digitale Welt ein bisschen besser machen?" Willkommen im Club! 🌟 -Öffne dein Terminal und klone das Repository wie folgt: -`git clone https://github.com/ProjectURL` +Finde zunächst ein Repository (oder **Repo**) auf GitHub, das dich interessiert und zu dem du gerne eine Änderung beitragen möchtest. Du wirst dessen Inhalte auf deinen Rechner kopieren wollen. + +✅ Eine gute Möglichkeit, 'anfängerfreundliche' Repos zu finden, ist die [Suche nach dem Label 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Kopiere ein Repository lokal](../../../../translated_images/clone_repo.5085c48d666ead57.de.png) + +Es gibt verschiedene Wege, um Code zu kopieren. Eine Möglichkeit ist, die Inhalte des Repositories zu "klonen", per HTTPS, SSH oder mit der GitHub CLI (Command Line Interface). + +Öffne dein Terminal und klone das Repository so: +```bash +# Verwendung von HTTPS +git clone https://github.com/ProjectURL + +# Verwendung von SSH (erfordert SSH-Schlüssel-Einrichtung) +git clone git@github.com:username/repository.git + +# Verwendung der GitHub CLI +gh repo clone username/repository +``` Um am Projekt zu arbeiten, wechsle in den richtigen Ordner: `cd ProjectURL` -Du kannst das gesamte Projekt auch mit [Codespaces](https://github.com/features/codespaces), GitHubs eingebettetem Code-Editor / Cloud-Entwicklungsumgebung, oder [GitHub Desktop](https://desktop.github.com/) öffnen. +Du kannst das gesamte Projekt auch öffnen mit: +- **[GitHub Codespaces](https://github.com/features/codespaces)** – GitHubs Cloud-Entwicklungsumgebung mit VS Code im Browser +- **[GitHub Desktop](https://desktop.github.com/)** – Eine GUI-Anwendung für Git-Operationen +- **[GitHub.dev](https://github.dev)** – Drücke die `.`-Taste bei jedem GitHub-Repo, um VS Code im Browser zu öffnen +- **VS Code** mit der GitHub Pull Requests-Erweiterung -Alternativ kannst du den Code in einem gezippten Ordner herunterladen. +Zuletzt kannst du den Code auch in einem gezippten Ordner herunterladen. ### Ein paar weitere interessante Dinge über GitHub -Du kannst jedes öffentliche Repository auf GitHub mit einem Stern markieren, beobachten und/oder "forken". Deine mit Stern markierten Repositories findest du im Dropdown-Menü oben rechts. Es ist wie ein Lesezeichen, aber für Code. +Du kannst jedes öffentliche Repository auf GitHub mit einem Stern versehen, beobachten und/oder "forken". Deine mit einem Stern markierten Repositories findest du im Dropdown-Menü oben rechts. Es ist wie ein Lesezeichen, aber für Code. + +Projekte haben meist einen Issue-Tracker, meistens auf GitHub unter dem Tab "Issues", sofern nicht anders angegeben, wo Menschen über projektbezogene Probleme diskutieren. Im Tab "Pull Requests" werden Änderungen besprochen und überprüft, die gerade in Arbeit sind. -Projekte haben einen Issue-Tracker, meistens auf GitHub im Tab "Issues", es sei denn, es wird anders angegeben. Dort diskutieren Menschen über Probleme, die mit dem Projekt zusammenhängen. Im Tab "Pull Requests" diskutieren und überprüfen Menschen Änderungen, die gerade in Arbeit sind. +Projekte können auch Diskussionen in Foren, Mailinglisten oder Chat-Kanälen wie Slack, Discord oder IRC führen. -Projekte können auch Diskussionen in Foren, Mailinglisten oder Chat-Kanälen wie Slack, Discord oder IRC haben. +🔧 **Moderne GitHub-Funktionen**: +- **GitHub Discussions** – Eingebautes Forum für Community-Gespräche +- **GitHub Sponsors** – Finanzielle Unterstützung für Maintainer +- **Security-Tab** – Sicherheitsberichte und Warnhinweise +- **Actions-Tab** – Automatisierte Workflows und CI/CD-Pipelines +- **Insights-Tab** – Analysen zu Mitwirkenden, Commits und Projektgesundheit +- **Projects-Tab** – GitHubs integrierte Projektmanagement-Tools -✅ Schau dich in deinem neuen GitHub-Repo um und probiere ein paar Dinge aus, wie das Bearbeiten von Einstellungen, das Hinzufügen von Informationen zu deinem Repo und das Erstellen eines Projekts (z. B. eines Kanban-Boards). Es gibt viel zu entdecken! +✅ Schau dich in deinem neuen GitHub-Repo um und probiere ein paar Sachen aus, wie Einstellungen ändern, Informationen zu deinem Repo hinzufügen, ein Projekt (z. B. einen Kanban-Board) erstellen und GitHub Actions für Automatisierung einrichten. Du kannst viel machen! --- ## 🚀 Herausforderung -Arbeite mit einem Freund zusammen an euren jeweiligen Codes. Erstellt gemeinsam ein Projekt, forkt Code, erstellt Branches und merged Änderungen. +Okay, jetzt ist es Zeit, deine glänzenden neuen GitHub-Superkräfte auf die Probe zu stellen! 🚀 Hier ist eine Herausforderung, die dich alles auf die zufriedenstellendste Weise verstehen lässt: + +Schnapp dir einen Freund (oder das Familienmitglied, das immer fragt, was du mit dem ganzen "Computerzeug" machst) und starte gemeinsam ein kollaboratives Programmierabenteuer! Hier passiert die wahre Magie – erstell ein Projekt, lass sie es forken, Branches erstellen und Änderungen zusammenführen, wie die Profis, die ihr werdet. + +Ich lüge nicht – ihr werdet wahrscheinlich irgendwann lachen (besonders, wenn ihr beide versucht, dieselbe Zeile zu ändern), euch vielleicht verwirrt am Kopf kratzen, aber ihr werdet definitiv diese großartigen "Aha!"-Momente haben, die das ganze Lernen lohnenswert machen. Außerdem gibt es etwas Besonderes daran, den ersten erfolgreichen Merge mit jemand anderem zu teilen – es ist wie eine kleine Feier dafür, wie weit du gekommen bist! + +Hast du noch keinen Programmierbuddy? Kein Problem! Die GitHub-Community ist voll von unglaublich freundlichen Menschen, die sich daran erinnern, wie es war, neu zu sein. Suche nach Repositories mit "good first issue"-Labels – sie sagen im Grunde: "Hey Anfänger, komm und lerne mit uns!" Wie genial ist das? -## Quiz nach der Vorlesung -[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/en/) +## Nach-Vorlesungs-Quiz +[Nach-Vorlesungs-Quiz](https://ff-quizzes.netlify.app/web/en/) -## Überprüfung & Selbststudium +## Rückblick & Weitermachen -Lies mehr über [das Beitragen zu Open-Source-Software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). +Puh! 🎉 Schau dich an – du hast gerade die GitHub-Grundlagen wie ein absoluter Champion gemeistert! Wenn dein Gehirn sich gerade etwas voll anfühlt, ist das völlig normal und ehrlich gesagt ein gutes Zeichen. Du hast gerade Werkzeuge gelernt, mit denen ich Wochen gebraucht habe, um mich wohl zu fühlen, als ich angefangen habe. -[Git-Spickzettel](https://training.github.com/downloads/github-git-cheat-sheet/). +Git und GitHub sind unglaublich mächtig (wirklich mächtig), und jeder Entwickler, den ich kenne – auch die, die jetzt wie Zauberer wirken – musste üben und sich etwas verirren, bevor alles klick gemacht hat. Dass du diese Lektion geschafft hast, zeigt, dass du schon auf dem Weg bist, einige der wichtigsten Werkzeuge im Entwickler-Werkzeugkasten zu meistern. -Üben, üben, üben. GitHub bietet großartige Lernpfade über [skills.github.com](https://skills.github.com): +Hier sind ein paar absolut fantastische Ressourcen, die dir beim Üben helfen und dich noch besser machen: -- [Erste Woche auf GitHub](https://skills.github.com/#first-week-on-github) +- [Beitrag zu Open-Source-Software Anleitung](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Dein Fahrplan, um einen Unterschied zu machen +- [Git Spickzettel](https://training.github.com/downloads/github-git-cheat-sheet/) – Habe dies griffbereit für schnelle Nachschläge! -Dort findest du auch fortgeschrittene Kurse. +Und denk dran: Übung macht Fortschritt, nicht Perfektion! Je mehr du Git und GitHub benutzt, desto natürlicher wird es. GitHub hat einige erstaunliche interaktive Kurse erstellt, die dir erlauben, in einer sicheren Umgebung zu üben: -## Aufgabe +- [Einführung in GitHub](https://github.com/skills/introduction-to-github) +- [Kommunikation mit Markdown](https://github.com/skills/communicate-using-markdown) +- [GitHub Pages](https://github.com/skills/github-pages) +- [Konflikte beim Mergen verwalten](https://github.com/skills/resolve-merge-conflicts) + +**Lust auf mehr Abenteuer? Schau dir diese modernen Tools an:** +- [GitHub CLI Dokumentation](https://cli.github.com/manual/) – Für den Fall, dass du dich wie ein Kommandozeilen-Zauberer fühlen willst +- [GitHub Codespaces Dokumentation](https://docs.github.com/en/codespaces) – Programmieren in der Cloud! +- [GitHub Actions Dokumentation](https://docs.github.com/en/actions) – Automatisiere alles +- [Best Practices für Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Verbessere deinen Workflow + +## GitHub Copilot Agent Herausforderung 🚀 + +Nutze den Agent-Modus, um die folgende Herausforderung zu meistern: + +**Beschreibung:** Erstelle ein kollaboratives Webentwicklungsprojekt, das den kompletten GitHub-Workflow demonstriert, den du in dieser Lektion gelernt hast. Diese Herausforderung hilft dir, die Erstellung von Repositories, Kollaborationsfunktionen und moderne Git-Workflows in einem realen Szenario zu üben. + +**Aufgabe:** Erstelle ein neues öffentliches GitHub-Repository für ein einfaches Projekt "Web Development Resources". Das Repository sollte eine gut strukturierte README.md-Datei beinhalten, die nützliche Webentwicklungstools und Ressourcen nach Kategorien (HTML, CSS, JavaScript usw.) auflistet. Richte das Repository mit angemessenen Community-Standards ein, einschließlich Lizenz, Beitragsrichtlinien und Verhaltenskodex. Erstelle mindestens zwei Feature-Branches: einen zum Hinzufügen von CSS-Ressourcen und einen weiteren für JavaScript-Ressourcen. Führe Commits in jedem Branch mit beschreibenden Commit-Nachrichten durch und erstelle anschließend Pull Requests, um die Änderungen zurück in main zu mergen. Aktiviere GitHub-Funktionen wie Issues, Discussions und richte einen einfachen GitHub Actions-Workflow für automatisierte Prüfungen ein. + +## Aufgabe + +Deine Mission, falls du sie annimmst: Schließe den [Einführung in GitHub](https://github.com/skills/introduction-to-github)-Kurs auf GitHub Skills ab. Dieser interaktive Kurs lässt dich alles, was du gelernt hast, in einer sicheren, geführten Umgebung üben. Außerdem bekommst du ein cooles Abzeichen, wenn du fertig bist! 🏅 + +**Bereit für weitere Herausforderungen?** +- Richte die SSH-Authentifizierung für dein GitHub-Konto ein (keine Passwörter mehr!) +- Probiere GitHub CLI für deine täglichen Git-Operationen aus +- Erstelle ein Repository mit einem GitHub Actions Workflow +- Erkunde GitHub Codespaces, indem du dieses Repository in einem cloudbasierten Editor öffnest + +--- -Absolviere [den Kurs "Erste Woche auf GitHub"](https://skills.github.com/#first-week-on-github) +## 🚀 Dein Zeitplan für GitHub-Meisterschaft + +### ⚡ **Was du in den nächsten 5 Minuten tun kannst** +- [ ] Dieses Repository und 3 weitere interessante Projekte mit einem Stern markieren +- [ ] Zwei-Faktor-Authentifizierung für dein GitHub-Konto einrichten +- [ ] Ein einfaches README für dein erstes Repository erstellen +- [ ] 5 Entwickler folgen, deren Arbeit dich inspiriert + +### 🎯 **Was du in dieser Stunde erreichen kannst** +- [ ] Das Nach-Lektion-Quiz abschließen und deine GitHub-Reise reflektieren +- [ ] SSH-Schlüssel für passwortfreie GitHub-Authentifizierung einrichten +- [ ] Deinen ersten bedeutungsvollen Commit mit einer großartigen Commit-Nachricht erstellen +- [ ] GitHubs "Explore"-Tab erkunden, um angesagte Projekte zu entdecken +- [ ] Übe, ein Repository zu forken und eine kleine Änderung vorzunehmen + +### 📅 **Dein GitHub-Abenteuer über eine Woche** +- [ ] Die GitHub Skills Kurse (Einführung in GitHub, Markdown) abschließen +- [ ] Deinen ersten Pull Request für ein Open-Source-Projekt stellen +- [ ] Eine GitHub Pages Seite einrichten, um deine Arbeit zu präsentieren +- [ ] An GitHub Discussions zu Projekten teilnehmen, die dich interessieren +- [ ] Ein Repository mit angemessenen Community-Standards erstellen (README, Lizenz, etc.) +- [ ] GitHub Codespaces für cloudbasiertes Entwickeln ausprobieren + +### 🌟 **Deine Verwandlung in einem Monat** +- [ ] Beiträge zu 3 verschiedenen Open-Source-Projekten leisten +- [ ] Jemanden neuem auf GitHub als Mentor helfen (gib es weiter!) +- [ ] Automatisierte Workflows mit GitHub Actions einrichten +- [ ] Ein Portfolio aufbauen, das deine GitHub-Beiträge zeigt +- [ ] An Hacktoberfest oder ähnlichen Community-Events teilnehmen +- [ ] Maintainer eines eigenen Projekts werden, zu dem andere beitragen + +### 🎓 **Letzter GitHub-Meisterschafts-Check-in** + +**Feiere, wie weit du gekommen bist:** +- Was gefällt dir am besten an der Nutzung von GitHub? +- Welche Kollaborationsfunktion begeistert dich am meisten? +- Wie sicher fühlst du dich, jetzt zu Open Source beizutragen? +- Bei welchem Projekt willst du als Erstes mitmachen? + +```mermaid +journey + title Deine GitHub-Vertrauensreise + section Heute + Nervös: 3: Du + Neugierig: 4: Du + Aufgeregt: 5: Du + section Diese Woche + Üben: 4: Du + Beitragen: 5: Du + Vernetzen: 5: Du + section Nächster Monat + Zusammenarbeiten: 5: Du + Führen: 5: Du + Andere inspirieren: 5: Du +``` +> 🌍 **Willkommen in der globalen Entwickler-Community!** Du hast jetzt die Werkzeuge, um mit Millionen von Entwicklern weltweit zusammenzuarbeiten. Dein erster Beitrag mag klein erscheinen, aber denk daran – jedes große Open-Source-Projekt begann damit, dass jemand seinen allerersten Commit gemacht hat. Die Frage ist nicht, ob du Einfluss haben wirst, sondern welches großartige Projekt zuerst von deiner einzigartigen Perspektive profitiert! 🚀 + +Denk daran: Jeder Experte war einmal ein Anfänger. Du schaffst das! 💪 --- -**Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. \ No newline at end of file + +**Haftungsausschluss**: +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Verwendung dieser Übersetzung ergeben. + \ No newline at end of file diff --git a/translations/de/1-getting-started-lessons/3-accessibility/README.md b/translations/de/1-getting-started-lessons/3-accessibility/README.md index 723d18b0f..4088178f4 100644 --- a/translations/de/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/de/1-getting-started-lessons/3-accessibility/README.md @@ -1,243 +1,1502 @@ -# Erstellen von barrierefreien Webseiten +# Erstellen barrierefreier Webseiten -![Alles über Barrierefreiheit](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.de.png) +![Alles über Barrierefreiheit](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.de.png) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Dein Lernabenteuer zur Barrierefreiheit + section Grundlage + Nutzer verstehen: 5: Du + Testwerkzeuge: 4: Du + POUR Prinzipien: 5: Du + section Fähigkeiten aufbauen + Semantisches HTML: 4: Du + Visuelles Design: 5: Du + ARIA Techniken: 4: Du + section Praxis meistern + Tastaturnavigation: 5: Du + Formular-Barrierefreiheit: 4: Du + Praxisnahe Tests: 5: Du +``` ## Quiz vor der Vorlesung [Quiz vor der Vorlesung](https://ff-quizzes.netlify.app/web/) -> Die Stärke des Webs liegt in seiner Universalität. Der Zugang für alle, unabhängig von Behinderung, ist ein wesentlicher Aspekt. +> Die Stärke des Webs liegt in seiner Universalität. Zugang für alle, unabhängig von Behinderung, ist ein wesentlicher Aspekt. > > \- Sir Timothy Berners-Lee, W3C-Direktor und Erfinder des World Wide Web -Dieses Zitat unterstreicht perfekt die Bedeutung der Erstellung barrierefreier Webseiten. Eine Anwendung, die nicht von allen genutzt werden kann, ist per Definition ausschließend. Als Webentwickler sollten wir Barrierefreiheit immer im Blick haben. Wenn Sie diesen Fokus von Anfang an haben, sind Sie auf dem besten Weg, sicherzustellen, dass jeder Zugang zu den von Ihnen erstellten Seiten hat. In dieser Lektion lernen Sie die Werkzeuge kennen, die Ihnen helfen, sicherzustellen, dass Ihre Webinhalte barrierefrei sind, und wie Sie mit Barrierefreiheit im Hinterkopf entwickeln können. +Hier ist etwas, das Sie vielleicht überraschen wird: Wenn Sie barrierefreie Websites erstellen, helfen Sie nicht nur Menschen mit Behinderungen – Sie machen das Web tatsächlich für alle besser! + +Ist Ihnen schon mal aufgefallen, wie Bordsteinabsenkungen an Straßenecken ursprünglich für Rollstühle gedacht waren, aber jetzt auch Menschen mit Kinderwagen, Lieferanten mit Sackkarren, Reisenden mit Rollenreisetaschen und Radfahrern helfen? Genau so funktioniert barrierefreies Webdesign – Lösungen, die einer Gruppe helfen, kommen oft allen zugute. Ziemlich cool, oder? + +In dieser Lektion werden wir erkunden, wie man Webseiten erstellt, die wirklich für alle funktionieren, egal wie sie das Web nutzen. Sie entdecken praktische Techniken, die bereits in Webstandards integriert sind, probieren Testwerkzeuge aus und sehen, wie Barrierefreiheit Ihre Seiten für alle Benutzer benutzerfreundlicher macht. + +Am Ende dieser Lektion werden Sie das Vertrauen haben, Barrierefreiheit zu einem natürlichen Teil Ihres Entwicklungs-Workflows zu machen. Bereit zu entdecken, wie durchdachte Designentscheidungen das Web für Milliarden von Nutzern öffnen können? Los geht’s! + +```mermaid +mindmap + root((Barrierefreiheit im Web)) + Users + Screen readers + Tastaturnavigation + Sprachsteuerung + Vergrößerung + Technologies + HTML-Semantik + ARIA-Attribute + CSS-Fokus-Indikatoren + Tastaturereignisse + Benefits + Größere Zielgruppe + Besseres SEO + Rechtliche Konformität + Universelles Design + Testing + Automatisierte Werkzeuge + Manuelles Testen + Nutzerfeedback + Echte unterstützende Technik +``` +> Sie können diese Lektion auch auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) absolvieren! + +## Verstehen von assistiven Technologien + +Bevor wir ins Programmieren einsteigen, nehmen wir uns einen Moment Zeit, um zu verstehen, wie Menschen mit unterschiedlichen Fähigkeiten das Web tatsächlich erleben. Das ist nicht nur Theorie – das Verständnis dieser realen Navigationsmuster macht Sie zu einem viel besseren Entwickler! + +Assistive Technologien sind ziemlich erstaunliche Werkzeuge, die Menschen mit Behinderungen helfen, mit Webseiten auf überraschende Weise zu interagieren. Sobald Sie verstanden haben, wie diese Technologien funktionieren, wird das Erstellen barrierefreier Web-Erlebnisse viel intuitiver. Es ist, als würden Sie lernen, Ihren Code mit den Augen eines anderen zu sehen. + +### Bildschirmleser + +[Screen Reader](https://de.wikipedia.org/wiki/Bildschirmleser) sind ziemlich ausgeklügelte Technologien, die digitalen Text in Sprache oder Braille-Ausgabe umwandeln. Während sie hauptsächlich von Menschen mit Sehbehinderungen verwendet werden, sind sie auch sehr hilfreich für Nutzer mit Lernschwächen wie Legasthenie. + +Ich stelle mir einen Screen Reader gerne als einen sehr klugen Erzähler vor, der Ihnen ein Buch vorliest. Er liest Inhalte in logischer Reihenfolge vor, kündigt interaktive Elemente wie „Schaltfläche“ oder „Link“ an und bietet Tastenkürzel, um schnell auf der Seite zu navigieren. Aber hier ist der Knackpunkt – Screen Reader können ihre Magie nur entfalten, wenn wir Webseiten mit korrekter Struktur und sinnvollem Inhalt bauen. Hier kommen Sie als Entwickler ins Spiel! + +**Beliebte Screen Reader auf verschiedenen Plattformen:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (kostenlos und am weitesten verbreitet), [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) (eingebaut) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (eingebaut und sehr leistungsfähig) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (eingebaut) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (kostenlos und Open Source) + +**Wie Screen Reader durch Webinhalte navigieren:** + +Screen Reader bieten verschiedene Navigationsmethoden, die das Surfen für erfahrene Nutzer effizient machen: +- **Sequenzielles Lesen**: Liest Inhalte von oben nach unten, wie ein Buch +- **Landmarken-Navigation**: Springt zwischen Seitenabschnitten (Kopfzeile, Navigation, Hauptbereich, Fußzeile) +- **Überschriften-Navigation**: Überspringt zwischen Überschriften, um die Seitenstruktur zu verstehen +- **Linklisten**: Erstellt eine Liste aller Links für schnellen Zugriff +- **Formular-Steuerung**: Navigiert direkt zwischen Eingabefeldern und Schaltflächen + +> 💡 **Das hat mich umgehauen**: 68 % der Screen Reader-Nutzer navigieren hauptsächlich über Überschriften ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Das bedeutet, Ihre Überschriftenstruktur ist wie eine Landkarte für Nutzer – wenn Sie sie richtig machen, helfen Sie den Menschen buchstäblich, sich schneller in Ihren Inhalten zurechtzufinden! + +### Aufbau Ihres Test-Workflows + +Hier eine gute Nachricht – effektives Accessibility-Testing muss nicht überwältigend sein! Sie sollten automatisierte Werkzeuge (sie finden hervorragend offensichtliche Probleme) mit praktischem Testen kombinieren. Hier ist ein systematischer Ansatz, mit dem ich die meisten Probleme finde, ohne den ganzen Tag zu verlieren: + +**Unverzichtbarer manueller Test-Workflow:** + +```mermaid +flowchart TD + A[🚀 Testen starten] --> B{⌨️ Tastaturnavigation} + B --> C[Mit Tab durch alle interaktiven Elemente] + C --> D{🎧 Screenreader-Test} + D --> E[Test mit NVDA/VoiceOver] + E --> F{🔍 Zoom-Test} + F --> G[Auf 200 % zoomen und Funktionalität testen] + G --> H{🎨 Farb- / Kontrastprüfung} + H --> I[Überprüfen, ob alle Texte Kontrastverhältnisse erfüllen] + I --> J{👁️ Fokusverwaltung} + J --> K[Sicherstellen, dass Fokusindikatoren sichtbar sind] + K --> L[✅ Test abgeschlossen] + + 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 +``` +**Schritt-für-Schritt-Testcheckliste:** +1. **Tastaturnavigation**: Nur Tab, Shift+Tab, Enter, Leertaste und Pfeiltasten verwenden +2. **Screen Reader-Test**: NVDA, VoiceOver oder Narrator aktivieren und mit geschlossenen Augen navigieren +3. **Zoom-Test**: Test bei 200 % und 400 % Zoom durchführen +4. **Farbkontrastprüfung**: Alle Texte und UI-Komponenten überprüfen +5. **Fokusindikator-Test**: Sicherstellen, dass alle interaktiven Elemente sichtbare Fokuszustände haben + +✅ **Beginnen Sie mit Lighthouse**: Öffnen Sie die DevTools Ihres Browsers, führen Sie ein Lighthouse-Barrierefreiheit-Audit durch und nutzen Sie die Ergebnisse, um Ihre manuellen Testbereiche zu bestimmen. + +### Zoom- und Vergrößerungswerkzeuge + +Sie wissen, wie Sie auf Ihrem Telefon manchmal zum Vergrößern kneifen, wenn der Text zu klein ist, oder im grellen Sonnenlicht auf Ihren Laptopbildschirm squinten? Viele Nutzer verlassen sich täglich auf Vergrößerungswerkzeuge, um Inhalte lesbar zu machen. Dazu gehören Menschen mit Sehschwäche, ältere Erwachsene und jeder, der schon einmal versucht hat, eine Webseite im Freien zu lesen. + +Moderne Zoomtechnologien gehen über das bloße Vergrößern hinaus. Wenn Sie verstehen, wie diese Werkzeuge funktionieren, können Sie responsive Designs erstellen, die bei jeder Vergrößerungsstufe funktional und attraktiv bleiben. + +**Moderne Zoommöglichkeiten im Browser:** +- **Seitenskalierung**: Skaliert alle Inhalte proportional (Text, Bilder, Layout) – dies ist die bevorzugte Methode +- **Nur Text-Zoom**: Erhöht die Schriftgröße bei gleichbleibendem ursprünglichen Layout +- **Pinch-to-Zoom**: Mobile Geste zur temporären Vergrößerung +- **Browserunterstützung**: Alle modernen Browser unterstützen Zoom bis zu 500 % ohne Funktionseinschränkungen + +**Spezialisierte Vergrößerungssoftware:** +- **Windows**: [Bildschirm-Lupe](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (eingebaut), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (eingebaut mit erweiterten Funktionen) + +> ⚠️ **Designüberlegung**: WCAG fordert, dass Inhalte auch bei 200 % Zoom funktional bleiben. Bei diesem Maßstab sollte horizontales Scrollen minimal sein, und alle interaktiven Elemente müssen erreichbar bleiben. + +✅ **Testen Sie Ihr responsives Design**: Zoomen Sie Ihren Browser auf 200 % und 400 %. Passt sich Ihr Layout elegant an? Können Sie weiterhin alle Funktionen ohne übermäßiges Scrollen nutzen? + +## Moderne Werkzeuge zum Barrierefreiheitstest + +Jetzt, wo Sie verstehen, wie Menschen mit assistiven Technologien im Web navigieren, sehen wir uns die Werkzeuge an, die Ihnen helfen, barrierefreie Webseiten zu bauen und zu testen. + +Man kann sagen: Automatisierte Tools sind großartig, um offensichtliche Fehler zu finden (z. B. fehlender Alt-Text), während praktisches Testen sicherstellt, dass Ihre Seite sich in der realen Welt gut anfühlt. Gemeinsam geben sie Ihnen das Vertrauen, dass Ihre Websites für alle funktionieren. + +### Farbkontrastprüfung + +Eine gute Nachricht: Farbkontrast ist eines der häufigsten Barrierefreiheitsprobleme, aber auch eines der leichtesten zu beheben. Guter Kontrast hilft jedem – von Nutzern mit Sehbehinderungen bis zu Menschen, die am Strand versuchen, ihr Handy zu lesen. -> Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) absolvieren! +**WCAG-Kontrastanforderungen:** -## Werkzeuge, die Sie verwenden können +| Texttyp | WCAG AA (Minimum) | WCAG AAA (Erweitert) | +|---------|-------------------|---------------------| +| **Normaler Text** (unter 18pt) | Kontrastverhältnis 4,5:1 | Kontrastverhältnis 7:1 | +| **Großer Text** (18pt+ oder 14pt+ fett) | Kontrastverhältnis 3:1 | Kontrastverhältnis 4,5:1 | +| **UI-Komponenten** (Buttons, Formularrahmen) | Kontrastverhältnis 3:1 | Kontrastverhältnis 3:1 | -### Screenreader +**Unverzichtbare Testwerkzeuge:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) – Desktop-App mit Farbwähler +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) – Web-basiert mit sofortigem Feedback +- [Stark](https://www.getstark.co/) – Design-Plugin für Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) – Barrierefreie Farbpaletten finden -Eines der bekanntesten Barrierefreiheitswerkzeuge sind Screenreader. +✅ **Bessere Farbpaletten erstellen**: Beginnen Sie mit Ihren Markenfarben und verwenden Sie Kontrastprüfer, um barrierefreie Variationen zu erstellen. Dokumentieren Sie diese als barrierefreie Farb-Tokens Ihres Designsystems. -[Screenreader](https://en.wikipedia.org/wiki/Screen_reader) sind häufig genutzte Clients für Menschen mit Sehbehinderungen. Während wir Zeit darauf verwenden, sicherzustellen, dass ein Browser die Informationen, die wir teilen möchten, korrekt darstellt, müssen wir auch sicherstellen, dass ein Screenreader dies ebenfalls tut. +### Umfassende Accessibility-Audits -Ein Screenreader liest eine Seite von oben nach unten hörbar vor. Wenn Ihre Seite nur aus Text besteht, wird der Reader die Informationen ähnlich wie ein Browser wiedergeben. Natürlich sind Webseiten selten rein textbasiert; sie enthalten Links, Grafiken, Farben und andere visuelle Komponenten. Es muss darauf geachtet werden, dass diese Informationen korrekt von einem Screenreader gelesen werden. +Die effektivsten Accessibility-Tests kombinieren mehrere Methoden. Kein Werkzeug findet alles, daher sorgt eine Test-Routine mit verschiedenen Ansätzen für umfassende Abdeckung. -Jeder Webentwickler sollte sich mit einem Screenreader vertraut machen. Wie oben hervorgehoben, ist es der Client, den Ihre Nutzer verwenden werden. Genauso wie Sie wissen, wie ein Browser funktioniert, sollten Sie lernen, wie ein Screenreader funktioniert. Glücklicherweise sind Screenreader in den meisten Betriebssystemen integriert. +**Browserbasierte Tests (eingebaut in DevTools):** +- **Chrome/Edge**: Lighthouse Accessibility-Audit + Accessibility-Panel +- **Firefox**: Accessibility Inspector mit detaillierter Baumansicht +- **Safari**: Audit-Tab im Web Inspector mit VoiceOver-Simulation -Einige Browser haben auch integrierte Tools und Erweiterungen, die Text laut vorlesen oder sogar grundlegende Navigationsfunktionen bieten, wie [diese barrierefreiheitsorientierten Edge-Browser-Tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Diese sind ebenfalls wichtige Barrierefreiheitswerkzeuge, funktionieren jedoch ganz anders als Screenreader und sollten nicht mit Screenreader-Testtools verwechselt werden. +**Professionelle Test-Erweiterungen:** +- [axe DevTools](https://www.deque.com/axe/devtools/) – Industriestandard automatisierte Tests +- [WAVE](https://wave.webaim.org/extension/) – Visuelles Feedback mit Fehlerhighlighting +- [Accessibility Insights](https://accessibilityinsights.io/) – Microsofts umfassende Testsuite -✅ Probieren Sie einen Screenreader und einen Browser-Textleser aus. Unter Windows ist [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) standardmäßig enthalten, und [JAWS](https://webaim.org/articles/jaws/) und [NVDA](https://www.nvaccess.org/about-nvda/) können ebenfalls installiert werden. Auf macOS und iOS ist [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standardmäßig installiert. +**Kommandozeilen- und CI/CD-Integration:** +- [axe-core](https://github.com/dequelabs/axe-core) – JavaScript-Bibliothek für automatisierte Tests +- [Pa11y](https://pa11y.org/) – Kommandozeilen-Tool für Accessibility-Tests +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) – Automatisiertes Accessibility-Scoring + +> 🎯 **Testziel**: Streben Sie als Basiswert eine Lighthouse Accessibility Bewertung von 95+ an. Denken Sie daran, dass automatisierte Tools nur etwa 30-40 % der Barrierefreiheitsprobleme erkennen – manuelles Testen bleibt unerlässlich! + +### 🧠 **Testfähigkeiten-Check: Bereit, Probleme zu finden?** + +**Mal sehen, wie Sie zum Barrierefreiheitstest stehen:** +- Welche Testmethode erscheint Ihnen gerade am zugänglichsten? +- Können Sie sich vorstellen, einen ganzen Tag nur mit Tastaturnavigation zu verbringen? +- Was ist eine Barriere, die Sie persönlich online erlebt haben? + +```mermaid +pie title "Barrierefreiheitsprobleme, die durch verschiedene Methoden erkannt wurden" + "Automatisierte Werkzeuge" : 35 + "Manuelles Testen" : 40 + "Benutzerfeedback" : 25 +``` +> **Selbstvertrauen stärken**: Professionelle Barrierefreiheitstester verwenden genau diese Kombination von Methoden. Sie lernen branchenübliche Praktiken! + +## Barrierefreiheit von Anfang an bauen + +Der Schlüssel zum Erfolg bei Barrierefreiheit ist, sie von Tag eins an in das Fundament einzubauen. Ich weiß, es ist verlockend zu denken „Barrierefreiheit füge ich später hinzu“, aber das ist, als würde man versuchen, eine Rampe an ein Haus anzubauen, das schon fertig ist. Möglich? Ja. Einfach? Nicht wirklich. + +Denken Sie an Barrierefreiheit wie an die Planung eines Hauses – es ist viel leichter, Rollstuhlgängigkeit in die ursprünglichen Architekturpläne einzubeziehen, als später alles umzubauen. + +### Die POUR-Prinzipien: Ihr Barrierefreiheits-Fundament + +Die Web Content Accessibility Guidelines (WCAG) basieren auf vier grundlegenden Prinzipien, die das Akronym POUR bilden. Keine Sorge – das sind keine trockenen akademischen Konzepte! Es sind praktische Richtlinien, um Inhalte zu gestalten, die für alle funktionieren. + +Wenn Sie POUR erstmal verinnerlicht haben, werden Entscheidungen zur Barrierefreiheit viel intuitiver. Es ist wie eine mentale Checkliste, die Ihre Designentscheidungen steuert. Lassen Sie uns das aufschlüsseln: + +```mermaid +flowchart LR + A[🔍 WAHRNEHMBAR
Können Nutzer es erfassen?] --> B[🎮 BEDIENBAR
Können Nutzer es nutzen?] + B --> C[📖 VERSTÄNDLICH
Können Nutzer es verstehen?] + C --> D[💪 ROBUST
Funktioniert es überall?] + + A1[Alternativtext
Untertitel
Kontrast] --> A + B1[Tastaturzugriff
Keine Anfälle
Zeitlimits] --> B + C1[Klares Sprachbild
Vorhersehbar
Fehlerhilfe] --> C + D1[Gültiger Code
Kompatibel
Zukunftssicher] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Wahrnehmbar**: Informationen müssen so dargestellt werden, dass Nutzer sie mit ihren verfügbaren Sinnen wahrnehmen können + +- Bieten Sie Textalternativen für Nicht-Text-Inhalte (Bilder, Videos, Audio) +- Sorgen Sie für ausreichend Farbkontrast bei allen Texten und UI-Komponenten +- Stellen Sie Untertitel und Transkripte für Multimedia bereit +- Gestalten Sie Inhalte so, dass sie auch bei einer Vergrößerung auf 200 % funktional bleiben +- Verwenden Sie mehrere sinnliche Merkmale (nicht nur Farbe), um Informationen zu vermitteln + +**🎮 Bedienbar**: Alle Bedienelemente müssen über verfügbare Eingabemethoden bedienbar sein + +- Machen Sie alle Funktionen über Tastaturnavigation zugänglich +- Geben Sie Nutzern ausreichend Zeit zum Lesen und Interagieren +- Vermeiden Sie Inhalte, die Anfälle oder vestibuläre Störungen auslösen können +- Helfen Sie Nutzern, sich mit klarer Struktur und Landmarken effizient zurechtzufinden +- Stellen Sie sicher, dass interaktive Elemente ausreichend große Zielbereiche haben (mindestens 44px) + +**📖 Verständlich**: Informationen und Bedienung der Benutzeroberfläche müssen klar und nachvollziehbar sein + +- Verwenden Sie klare, einfache Sprache, die zu Ihrer Zielgruppe passt +- Sorgen Sie dafür, dass Inhalte vorhersehbar und konsistent erscheinen und funktionieren +- Geben Sie klare Anweisungen und Fehlermeldungen bei Benutzereingaben +- Helfen Sie Nutzern, Fehler in Formularen zu erkennen und zu korrigieren +- Organisieren Sie Inhalte mit logischer Lesereihenfolge und Informationshierarchie + +**💪 Robust**: Inhalte müssen zuverlässig mit verschiedenen Technologien und assistiven Geräten funktionieren + +- **Verwenden Sie gültiges, semantisches HTML als Grundlage** +- **Sichern Sie Kompatibilität mit aktuellen und zukünftigen assistiven Technologien** +- **Befolgen Sie Webstandards und Best Practices für Markup** +- **Testen Sie verschiedene Browser, Geräte und Hilfsmittel** +- **Strukturieren Sie Inhalte so, dass sie elegant abgebaut werden, wenn erweiterte Funktionen nicht unterstützt werden** + +### 🎯 **POUR-Prinzipien-Check: Nachhaltig verankern** + +**Kurze Reflexion über die Grundlagen:** +- Fallen Ihnen Website-Funktionen ein, die gegen jedes der POUR-Prinzipien verstoßen? +- Welches Prinzip erscheint Ihnen als Entwickler am natürlichsten? +- Wie könnten diese Prinzipien das Design für alle verbessern, nicht nur für Nutzer mit Behinderungen? + +```mermaid +quadrantChart + title POUR Prinzipien Wirkungsmatrix + x-axis Niedriger Aufwand --> Hoher Aufwand + y-axis Geringe Auswirkung --> Hohe Auswirkung + quadrant-1 Schnelle Erfolge + quadrant-2 Großprojekte + quadrant-3 Später berücksichtigen + quadrant-4 Strategischer Fokus + + 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] +``` +> **Merken**: Beginnen Sie mit Verbesserungen mit hoher Wirkung und geringem Aufwand. Semantisches HTML und Alt-Texte bieten den größten Barrierefreiheitsschub bei minimalem Aufwand! + +## Erstellung eines zugänglichen visuellen Designs + +Gutes visuelles Design und Barrierefreiheit gehen Hand in Hand. Wenn Sie mit Blick auf Barrierefreiheit entwerfen, stellen Sie oft fest, dass diese Einschränkungen zu saubereren, eleganteren Lösungen führen, die allen Nutzern zugutekommen. + +Lassen Sie uns erkunden, wie man visuell ansprechende Designs erstellt, die für alle funktionieren, unabhängig von deren Sehfähigkeit oder den Bedingungen, unter denen sie Ihre Inhalte betrachten. + +### Farb- und visuelle Barrierefreiheitsstrategien + +Farbe ist ein mächtiges Kommunikationsmittel, sollte aber niemals die einzige Möglichkeit sein, wichtige Informationen zu vermitteln. Design jenseits von Farbe erzeugt robustere, inklusivere Erfahrungen, die in mehr Situationen funktionieren. + +**Design für Unterschiede im Farbsehen:** + +Ungefähr 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehstörung (oft "Farbenblindheit" genannt). Die häufigsten Typen sind: +- **Deuteranopie**: Schwierigkeit, Rot und Grün zu unterscheiden +- **Protanopie**: Rot erscheint gedimmt +- **Tritanopie**: Schwierigkeit mit Blau und Gelb (selten) + +**Inklusive Farbstrategien:** + +```css +/* ❌ Bad: Using only color to indicate status */ +.error { color: red; } +.success { color: green; } + +/* ✅ Good: Color plus icons and context */ +.error { + color: #d32f2f; + border-left: 4px solid #d32f2f; +} +.error::before { + content: "⚠️"; + margin-right: 8px; +} + +.success { + color: #2e7d32; + border-left: 4px solid #2e7d32; +} +.success::before { + content: "✅"; + margin-right: 8px; +} +``` -### Zoom +**Über grundlegende Kontrastanforderungen hinaus:** +- Testen Sie Ihre Farbauswahl mit Simulatoren für Farbenblindheit +- Verwenden Sie Muster, Texturen oder Formen zusätzlich zur Farbkennzeichnung +- Sorgen Sie dafür, dass interaktive Zustände auch ohne Farbe unterscheidbar bleiben +- Berücksichtigen Sie, wie Ihr Design im Hochkontrastmodus aussieht -Ein weiteres Werkzeug, das häufig von Menschen mit Sehbehinderungen verwendet wird, ist das Zoomen. Die einfachste Art des Zoomens ist das statische Zoomen, gesteuert durch `Control + Pluszeichen (+)` oder durch das Verringern der Bildschirmauflösung. Diese Art des Zoomens bewirkt, dass die gesamte Seite vergrößert wird. Daher ist es wichtig, [responsives Design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) zu verwenden, um eine gute Benutzererfahrung bei erhöhten Zoomstufen zu gewährleisten. +✅ **Testen Sie Ihre Farbzugänglichkeit**: Verwenden Sie Tools wie [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), um zu sehen, wie Ihre Seite für Nutzer mit verschiedenen Farbsehtypen erscheint. -Eine andere Art des Zoomens basiert auf spezieller Software, die einen Bereich des Bildschirms vergrößert und verschiebt, ähnlich wie bei der Verwendung einer echten Lupe. Unter Windows ist [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) integriert, und [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ist eine Drittanbieter-Vergrößerungssoftware mit mehr Funktionen und einer größeren Benutzerbasis. Sowohl macOS als auch iOS verfügen über eine integrierte Vergrößerungssoftware namens [Zoom](https://www.apple.com/accessibility/mac/vision/). +### Fokusindikatoren und Interaktionsdesign -### Kontrastprüfer +Fokusindikatoren sind das digitale Äquivalent eines Cursors — sie zeigen Tastaturnutzern, wo sie sich auf der Seite befinden. Gut gestaltete Fokusindikatoren verbessern die Erfahrung für alle, indem sie Interaktionen klar und vorhersehbar machen. -Farben auf Webseiten müssen sorgfältig ausgewählt werden, um den Bedürfnissen von farbenblinden Nutzern oder Menschen, die Schwierigkeiten haben, Farben mit geringem Kontrast zu sehen, gerecht zu werden. +**Moderne Best Practices für Fokusindikatoren:** -✅ Testen Sie eine Webseite, die Sie gerne nutzen, auf die Verwendung von Farben mit einer Browser-Erweiterung wie [WCAGs Farbprüfer](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Was lernen Sie? +```css +/* Enhanced focus styles that work across browsers */ +button:focus-visible { + outline: 2px solid #0066cc; + outline-offset: 2px; + box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); +} -### Lighthouse +/* Remove focus outline for mouse users, preserve for keyboard users */ +button:focus:not(:focus-visible) { + outline: none; +} -Im Entwicklerbereich Ihres Browsers finden Sie das Lighthouse-Tool. Dieses Tool ist wichtig, um einen ersten Überblick über die Barrierefreiheit (sowie andere Analysen) einer Webseite zu erhalten. Während es wichtig ist, sich nicht ausschließlich auf Lighthouse zu verlassen, ist eine 100%-Bewertung als Ausgangspunkt sehr hilfreich. +/* Focus-within for complex components */ +.card:focus-within { + box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); + border-color: #4A90A4; +} -✅ Finden Sie Lighthouse im Entwicklerbereich Ihres Browsers und führen Sie eine Analyse auf einer beliebigen Seite durch. Was entdecken Sie? +/* Ensure focus indicators meet contrast requirements */ +.custom-focus:focus-visible { + outline: 3px solid #ffffff; + outline-offset: 2px; + box-shadow: 0 0 0 6px #000000; +} +``` -## Gestaltung für Barrierefreiheit +**Anforderungen an Fokusindikatoren:** +- **Sichtbarkeit**: Muss mindestens ein Kontrastverhältnis von 3:1 zu umliegenden Elementen haben +- **Breite**: Mindestens 2 px Dicke um das gesamte Element +- **Beständigkeit**: Soll sichtbar bleiben, bis der Fokus woanders hingeht +- **Unterscheidbarkeit**: Muss sich visuell von anderen UI-Zuständen unterscheiden + +> 💡 **Design-Tipp**: Hervorragende Fokusindikatoren verwenden oft eine Kombination aus Kontur, Box-Schatten und Farbwechseln, um die Sichtbarkeit über verschiedene Hintergründe und Kontexte hinweg zu gewährleisten. + +✅ **Auditieren Sie Fokusindikatoren**: Navigieren Sie per Tab durch Ihre Webseite und notieren Sie, welche Elemente klare Fokusindikatoren aufweisen. Gibt es welche, die schwer zu erkennen oder ganz fehlend sind? + +### Semantisches HTML: Die Grundlage der Barrierefreiheit + +Semantisches HTML ist wie ein GPS-System für Hilfstechnologien auf Ihrer Website. Wenn Sie die richtigen HTML-Elemente für ihren vorgesehenen Zweck verwenden, liefern Sie Screenreadern, Tastaturen und anderen Tools eine detaillierte Karte, die Nutzern hilft, sich effektiv zu orientieren. + +Hier eine Analogie, die bei mir voll eingeschlagen hat: Semantisches HTML ist der Unterschied zwischen einer gut organisierten Bibliothek mit klaren Kategorien und hilfreichen Schildern und einem Lagerhaus, in dem Bücher zufällig verteilt sind. Beide Orte enthalten dieselben Bücher, aber in welchem würden Sie lieber etwas suchen? Genau! + +```mermaid +flowchart TD + A[🏠 HTML-Dokument] --> B[📰 Kopfzeile] + A --> C[🧭 Navigation] + A --> D[📄 Hauptinhalt] + A --> E[📋 Fußzeile] + + B --> B1[h1: Seitenname
Logo & Branding] + C --> C1[ul: Navigation
Primäre Links] + D --> D1[article: Inhalt
section: Unterabschnitte] + D --> D2[aside: Seitenleiste
Verwandte Inhalte] + E --> E1[nav: Fußzeilen-Links
Urheberrechtsinfo] + + D1 --> D1a[h1: Seitentitel
h2: Hauptabschnitte
h3: Unterabschnitte] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Bausteine einer barrierefreien Seitenstruktur:** -Barrierefreiheit ist ein relativ großes Thema. Um Ihnen zu helfen, stehen zahlreiche Ressourcen zur Verfügung. +```html + +
+

Your Site Name

+ +
+ +
+
+
+

Article Title

+

Published on

+
+ +
+

First Section

+

Content that relates to this section...

+
+ +
+

Second Section

+

More related content...

+
+
+ + +
+ + +``` -- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) +**Warum semantisches HTML die Barrierefreiheit transformiert:** + +| Semantisches Element | Zweck | Vorteil für Screenreader | +|---------------------|--------|-------------------------| +| `
` | Seiten- oder Abschnittskopf | "Banner-Landmarke" – schnelle Navigation zum Seitenanfang | +| `
+ + + +
+
+

Welcome to Turtle Ipsum

+

+ Learn more about our turtle community and discover fascinating facts about these amazing creatures.

- Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum -

- - -
-
- Sign up for turtle news -
-

- Internal Pages + Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Index

-

Semantic Example

-
-
-

© 2016 Instrument

-
+
+
+ +
+ + + + +

© 2024 Instrument. All rights reserved.

+
``` -## Quiz nach der Vorlesung -[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/en/) +**Wesentliche Verbesserungen:** +- Korrekte semantische HTML-Struktur hinzugefügt +- Überschriften-Hierarchie korrigiert (einzelnes h1, logische Reihenfolge) +- Bedeutungsvolle Linktexte anstelle von "hier klicken" eingefügt +- Korrekte ARIA-Labels für Navigation ergänzt +- Lang-Attribut und passende Meta-Tags hinzugefügt +- Button-Element für interaktive Elemente verwendet +- Footer-Inhalte mit passenden Landmarks strukturiert -## Überprüfung & Selbststudium -Viele Regierungen haben Gesetze zu Barrierefreiheitsanforderungen. Informiere dich über die Barrierefreiheitsgesetze in deinem Heimatland. Was wird abgedeckt und was nicht? Ein Beispiel ist [diese Regierungswebseite](https://accessibility.blog.gov.uk/). +## Nachvorlesungs-Quiz +[Nachvorlesungs-Quiz](https://ff-quizzes.netlify.app/web/en/) -## Aufgabe +## Wiederholung & Selbststudium + +Viele Regierungen haben Gesetze zu Barrierefreiheitsanforderungen. Informieren Sie sich über die Barrierefreiheitsgesetze in Ihrem Heimatland. Was ist abgedeckt, was nicht? Ein Beispiel ist [diese Regierungs-Webseite](https://accessibility.blog.gov.uk/). +## Aufgabe + [Analysiere eine nicht barrierefreie Webseite](assignment.md) Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) von Instrument --- +## 🚀 Ihr Zeitplan zur Barrierefreiheit-Beherrschung + +### ⚡ **Was Sie in den nächsten 5 Minuten tun können** +- [ ] Installation der axe DevTools-Erweiterung in Ihrem Browser +- [ ] Führen Sie ein Lighthouse-Barrierefreiheit-Audit auf Ihrer Lieblingswebseite durch +- [ ] Navigieren Sie eine beliebige Webseite nur mit der Tab-Taste +- [ ] Testen Sie den integrierten Screenreader Ihres Browsers (Narrator/VoiceOver) + +### 🎯 **Was Sie in dieser Stunde schaffen können** +- [ ] Nehmen Sie am Nach-Lektion-Quiz teil und reflektieren Sie Ihre Barrierefreiheits-Erkenntnisse +- [ ] Üben Sie, für 10 verschiedene Bilder aussagekräftige Alt-Texte zu schreiben +- [ ] Prüfen Sie die Überschriftenstruktur einer Webseite mit der HeadingsMap-Erweiterung +- [ ] Beheben Sie im Challenge-HTML gefundene Barrierefreiheitsprobleme +- [ ] Testen Sie den Farbkontrast Ihres aktuellen Projekts mit dem Tool von WebAIM + +### 📅 **Ihr barrierefreier Wochenplan** +- [ ] Bearbeiten Sie die Aufgabe zur Analyse einer nicht barrierefreien Webseite +- [ ] Richten Sie Ihre Entwicklungsumgebung mit Barrierefreiheitstest-Tools ein + +- [ ] Übe die Tastaturnavigation auf 5 verschiedenen komplexen Websites +- [ ] Baue ein einfaches Formular mit korrekten Labels, Fehlerbehandlung und ARIA +- [ ] Tritt einer Barrierefreiheits-Community bei (A11y Slack, WebAIM-Forum) +- [ ] Beobachte echte Nutzer mit Behinderungen, wie sie Websites navigieren (YouTube hat großartige Beispiele) + +### 🌟 **Deine einmonatige Transformation** +- [ ] Integriere Barrierefreiheits-Tests in deinen Entwicklungs-Workflow +- [ ] Trage zu einem Open-Source-Projekt bei, indem du Barrierefreiheitsprobleme behebst +- [ ] Führe Usability-Tests mit jemandem durch, der assistive Technologien verwendet +- [ ] Erstelle eine barrierefreie Komponentenbibliothek für dein Team +- [ ] Setze dich in deinem Arbeitsplatz oder deiner Community für Barrierefreiheit ein +- [ ] Betreue jemanden, der neu in Barrierefreiheitskonzepte einsteigt + +### 🏆 **Abschließender Check-in des Barrierefreiheits-Champions** + +**Feiere deine Reise zur Barrierefreiheit:** +- Was ist das Überraschendste, das du darüber gelernt hast, wie Menschen das Web nutzen? +- Welches Barrierefreiheitsprinzip spricht dich am meisten in deinem Entwicklungsstil an? +- Wie hat das Lernen über Barrierefreiheit deine Sicht auf Design verändert? +- Welche erste Barrierefreiheitsverbesserung möchtest du an einem echten Projekt vornehmen? + +```mermaid +journey + title Deine Entwicklung des Barrierefreiheitsvertrauens + section Heute + Überwältigt: 3: You + Neugierig: 4: You + Motiviert: 5: You + section Diese Woche + Üben: 4: You + Testen: 5: You + Verstehen: 5: You + section Nächster Monat + Eintreten: 5: You + Führen: 5: You + Standardmäßig inklusive: 5: You +``` +> 🌍 **Du bist jetzt ein Barrierefreiheits-Champion!** Du verstehst, dass großartige Web-Erlebnisse für alle funktionieren, unabhängig davon, wie sie auf das Web zugreifen. Jede barrierefreie Funktion, die du erstellst, macht das Internet inklusiver. Das Web braucht Entwickler wie dich, die Barrierefreiheit nicht als Einschränkung, sondern als Chance sehen, bessere Erlebnisse für alle Nutzer zu schaffen. Willkommen in der Bewegung! 🎉 + +--- + + **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen. \ No newline at end of file +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir bemüht sind, eine genaue Übersetzung zu gewährleisten, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Verwendung dieser Übersetzung entstehen. + \ No newline at end of file diff --git a/translations/de/1-getting-started-lessons/3-accessibility/assignment.md b/translations/de/1-getting-started-lessons/3-accessibility/assignment.md index 660f9116d..e5145ef5b 100644 --- a/translations/de/1-getting-started-lessons/3-accessibility/assignment.md +++ b/translations/de/1-getting-started-lessons/3-accessibility/assignment.md @@ -1,26 +1,261 @@ -# Analysiere eine nicht barrierefreie Website +# Umfassendes Website-Barrierefreiheitsaudit ## Anweisungen -Identifizieren Sie eine Website, von der Sie glauben, dass sie NICHT barrierefrei ist, und erstellen Sie einen Aktionsplan, um ihre Barrierefreiheit zu verbessern. Ihre erste Aufgabe besteht darin, diese Website zu identifizieren, die Gründe für ihre mangelnde Barrierefreiheit ohne analytische Tools zu beschreiben und sie anschließend einer Lighthouse-Analyse zu unterziehen. Erfassen Sie ein PDF der Ergebnisse dieser Analyse und erstellen Sie einen detaillierten Plan mit mindestens zehn Punkten, wie die Website verbessert werden könnte. +In dieser Aufgabe führst du ein professionelles Barrierefreiheitsaudit einer echten Website durch und wendest dabei die Prinzipien und Techniken an, die du gelernt hast. Diese praktische Erfahrung vertieft dein Verständnis für Barrieren und Lösungen im Bereich Barrierefreiheit. -## Tabelle zur Überprüfung der Barrierefreiheit der Website +Wähle eine Website aus, die offenbar Barrierefreiheitsprobleme aufweist – dies bietet dir mehr Lernmöglichkeiten als die Analyse einer bereits perfekten Seite. Gute Kandidaten sind ältere Websites, komplexe Webanwendungen oder Seiten mit reichhaltigen Multimedia-Inhalten. -| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf | -|-----------|-------------|------------|---------------------| -| | weniger als 10 % der Anforderungen fehlen | 20 % der Anforderungen fehlen | 50 % der Anforderungen fehlen | +### Phase 1: Strategische manuelle Bewertung ----- -Studentenbericht: enthält Absätze darüber, wie unzugänglich die Website ist, den Lighthouse-Bericht als PDF, eine Liste mit zehn Punkten zur Verbesserung sowie Details, wie diese Verbesserungen umgesetzt werden können +Bevor du automatisierte Tools einsetzt, führe eine umfassende manuelle Bewertung durch. Dieser menschenzentrierte Ansatz enthüllt oft Probleme, die Werkzeuge übersehen, und hilft dir, die echte Benutzererfahrung zu verstehen. +**🔍 Wesentliche Bewertungskriterien:** + +**Navigation und Struktur:** +- Kannst du die gesamte Seite nur mit der Tastatur (Tab, Shift+Tab, Enter, Leertaste, Pfeiltasten) bedienen? +- Sind Fokusindikatoren an allen interaktiven Elementen klar sichtbar? +- Schafft die Überschriftenstruktur (H1-H6) eine logische Inhaltsübersicht? +- Gibt es Sprunglinks, um direkt zum Hauptinhalt zu gelangen? + +**Visuelle Zugänglichkeit:** +- Gibt es ausreichenden Farbkontrast auf der gesamten Website (mindestens 4,5:1 für normalen Text)? +- Verwendet die Seite ausschließlich Farben, um wichtige Informationen zu vermitteln? +- Haben alle Bilder geeigneten alternativen Text? +- Bleibt das Layout bei einer Zoomstufe von 200 % funktional? + +**Inhalt und Kommunikation:** +- Gibt es „Hier klicken“- oder unklare Linktexte? +- Verstehst du Inhalt und Funktionalität auch ohne visuelle Hinweise? +- Sind Formularfelder korrekt beschriftet und gruppiert? +- Sind Fehlermeldungen klar und hilfreich? + +**Interaktive Elemente:** +- Funktionieren alle Schaltflächen und Formularelemente allein mit der Tastatur? +- Werden dynamische Inhaltsänderungen Bildschirmlesern angekündigt? +- Befolgen modale Dialoge und komplexe Widgets korrekte Barrierefreiheitsmuster? + +📝 **Dokumentiere deine Erkenntnisse** mit konkreten Beispielen, Screenshots und Seiten-URLs. Notiere sowohl Probleme als auch gut umgesetzte Aspekte. + +### Phase 2: Umfassende automatisierte Tests + +Validiere und erweitere nun deine manuellen Ergebnisse mit branchenüblichen Barrierefreiheitstest-Tools. Jedes Tool hat unterschiedliche Stärken, sodass die Nutzung mehrerer Werkzeuge eine vollständige Abdeckung bietet. + +**🛠️ Benötigte Test-Tools:** + +1. **Lighthouse Accessibility Audit** (integriert in Chrome/Edge DevTools) + - Audit auf mehreren Seiten durchführen + - Fokus auf bestimmte Metriken und Empfehlungen + - Notiere deinen Barrierefreiheits-Score und spezifische Verstöße + +2. **axe DevTools** (Browser-Erweiterung – Branchenstandard) + - Detailliertere Fehlererkennung als Lighthouse + - Bietet konkrete Codebeispiele zur Behebung + - Testet anhand der WCAG 2.1 Kriterien + +3. **WAVE Web Accessibility Evaluator** (Browser-Erweiterung) + - Visuelle Darstellung von Barrierefreiheitsmerkmalen + - Hebt sowohl Fehler als auch positive Merkmale hervor + - Hervorragend zum Verständnis der Seitenstruktur + +4. **Color Contrast Analyzers** + - WebAIM Contrast Checker für spezifische Farbkombinationen + - Browser-Erweiterungen für Seiten-weite Analyse + - Tests gemäß WCAG AA und AAA Standards + +**🎧 Real-Assistive-Technologie-Tests:** +- **Screenreader-Tests**: Verwende NVDA (Windows), VoiceOver (Mac) oder TalkBack (Android) +- **Nur Tastaturbedienung**: Ziehe die Maus ab und navigiere die gesamte Website +- **Zoomtests**: Prüfe die Funktionsfähigkeit bei 200 % und 400 % Zoom +- **Sprachsteuerungstests**: Falls verfügbar, nutze Sprach-Navigationstools + +**📊 Organisiere deine Ergebnisse** in einer Übersichts-Tabelle mit: +- Beschreibung des Problems und Standort +- Schweregrad (Kritisch/Hoch/Mittel/Niedrig) +- Verstoßene WCAG-Erfolgskriterien +- Erkennendes Tool +- Screenshots und Belege + +### Phase 3: Umfassende Dokumentation der Ergebnisse + +Erstelle einen professionellen Barrierefreiheitsauditbericht, der dein Verständnis sowohl technischer Probleme als auch deren menschlicher Auswirkungen zeigt. + +**📋 Erforderliche Berichtabschnitte:** + +1. **Executive Summary** (1 Seite) + - Website-URL und kurze Beschreibung + - Gesamtbewertung des Reifegrads der Barrierefreiheit + - Top 3 kritischste Probleme + - Geschätzte Auswirkungen auf Nutzer mit Behinderungen + +2. **Methodik** (½ Seite) + - Testansatz und verwendete Tools + - Bewertete Seiten und Kombinationen aus Gerät/Browser + - Bewertete Standards (WCAG 2.1 AA) + +3. **Detaillierte Ergebnisse** (2-3 Seiten) + - Probleme nach WCAG-Prinzipien kategorisiert (Wahrnehmbar, Bedienbar, Verständlich, Robust) + - Einschließlich Screenshots und konkreter Beispiele + - Notiere positive Barrierefreiheitsmerkmale + - Querverweis zu automatischen Testergebnissen + +4. **Auswirkungsbewertung auf Nutzer** (1 Seite) + - Wie die identifizierten Probleme Nutzer mit unterschiedlichen Behinderungen betreffen + - Szenarien, die reale Nutzererfahrungen beschreiben + - Geschäftliche Auswirkungen (rechtliches Risiko, SEO, Nutzerbasis-Erweiterung) + +**📸 Evidenzsammlung:** +- Screenshots von Barrierefreiheitsverletzungen +- Bildschirmaufnahmen problematischer Nutzerabläufe +- Toolberichte (als PDF speichern) +- Codebeispiele mit Fehlern + +### Phase 4: Professioneller Maßnahmenplan + +Entwickle einen strategischen, priorisierten Plan zur Behebung der Barrierefreiheitsprobleme. Dies zeigt deine Fähigkeit, wie ein professioneller Webentwickler unter realen Geschäftsbedingungen zu denken. + +**🎯 Erstelle detaillierte Verbesserungsempfehlungen (mindestens 10 Probleme):** + +**Für jedes identifizierte Problem gib an:** + +- **Problembeschreibung**: Klare Erklärung für das Problem und warum es kritisch ist +- **WCAG-Referenz**: Spezifische verletzte Erfolgskriterium (z. B. „2.4.4 Zweck des Links (im Kontext) – Ebene A“) +- **Auswirkungen für Nutzer**: Wie es Menschen mit unterschiedlichen Behinderungen betrifft +- **Lösung**: Konkrete Codeänderungen, Designmodifikationen oder Prozessverbesserungen +- **Prioritätsstufe**: Kritisch (blockiert Grundfunktionen) / Hoch (signifikante Barriere) / Mittel (Usability-Problem) / Niedrig (Verbesserung) +- **Implementierungsaufwand**: Zeit-/Komplexitätsschätzung (Schneller Gewinn / Moderater Aufwand / Größerer Umbau) +- **Testverifikation**: Wie überprüft wird, dass die Lösung funktioniert + +**Beispiel für eine Verbesserung:** + +``` +Issue: Generic "Read more" link text appears 8 times on homepage +WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A +User Impact: Screen reader users cannot distinguish between links when viewed in link list +Solution: Replace with descriptive text like "Read more about sustainability initiatives" +Priority: High (major navigation barrier) +Effort: Low (30 minutes to update content) +Testing: Generate link list with screen reader - each link should be meaningful standalone +``` + +**📈 Strategische Umsetzungsphasen:** + +- **Phase 1 (0-2 Wochen)**: Kritische Probleme, die Grundfunktionalität blockieren +- **Phase 2 (1-2 Monate)**: Verbesserungen mit hoher Priorität für bessere Nutzererfahrung +- **Phase 3 (3-6 Monate)**: Mittel-priorisierte Verbesserungen und Prozessoptimierungen +- **Phase 4 (Laufend)**: Kontinuierliche Überwachung und Weiterentwicklung + +## Bewertungsmatrix + +Dein Barrierefreiheitsaudit wird sowohl auf technische Genauigkeit als auch professionelle Präsentation bewertet: + +| Kriterium | Exzellent (90-100%) | Gut (80-89%) | Befriedigend (70-79%) | Verbesserungswürdig (<70%) | +|-----------|---------------------|--------------|-----------------------|---------------------------| +| **Manuelle Testtiefe** | Umfassende Bewertung aller POUR-Prinzipien mit detaillierten Beobachtungen und Nutzerszenarien | Gute Abdeckung der meisten Bereiche mit klaren Ergebnissen und Nutzeranalyse | Grundlegende Bewertung der wichtigsten Bereiche mit ausreichenden Beobachtungen | Eingeschränkte Tests mit oberflächlichen Beobachtungen und minimaler Nutzeranalyse | +| **Werkzeugnutzung & Analyse** | Effektiver Einsatz aller Tools, Querverweise, klare Belege, Analyse der Tool-Limits | Nutzung der meisten Tools mit guter Dokumentation, Querverweisen und Belegen | Nutzung der erforderlichen Tools mit einfacher Dokumentation und einigen Belegen | Minimale Verwendung, schlechte Dokumentation oder fehlende Belege | +| **Identifikation & Kategorisierung** | Findet 15+ Probleme über alle WCAG-Prinzipien, korrekte Schweregradeinteilung, tiefes Verständnis | Findet 10-14 Probleme, gute Kategorisierung, solides Verständnis | Findet 7-9 Probleme, angemessene WCAG-Abdeckung, einfache Kategorisierung | Findet <7 Probleme mit eingeschränktem Umfang und schlechter Kategorisierung | +| **Lösungsqualität & Umsetzbarkeit** | 10+ detaillierte und umsetzbare Lösungen mit korrekten WCAG-Referenzen, realistischen Zeitplänen und Verifikationsmethoden | 8-9 gut ausgearbeitete Lösungen mit größtenteils korrekten Referenzen und guten Details | 6-7 einfache Lösungen mit einigen Details und meist realistischen Ansätzen | <6 Lösungen oder mangelnde Details, unrealistische Umsetzung | +| **Professionelle Kommunikation** | Hervorragend organisiert, klar geschrieben, mit Executive Summary, angemessener Fachsprache und Geschäftsdokument-Standards | Gut strukturiert, gute Schreibqualität, enthält die meisten Abschnitte, angemessener Ton | Akzeptable Struktur, annehmbares Schreibniveau, grundlegende Abschnitte | Schlechte Organisation, unklare Schreibweise oder fehlende zentrale Abschnitte | +| **Praxisbezug** | Versteht Geschäftsfolgen, rechtliche Aspekte, Nutzerdiversität und Umsetzung Herausforderungen | Gutes Verständnis praktischer Anwendungen mit etwas Geschäftskontext | Grundverständnis praktischer Anwendungen | Eingeschränkter Bezug zur Praxis | + +## Erweiterte Herausforderungsmöglichkeiten + +**🚀 Für Studierende, die sich weiter fordern wollen:** + +- **Vergleichende Analyse**: Audit 2-3 konkurrierende Websites und vergleiche deren Barrierefreiheitsreife +- **Fokus Mobile Barrierefreiheit**: Detaillierte Untersuchung mobilspezifischer Barrierefreiheitsprobleme mit Android TalkBack oder iOS VoiceOver +- **Internationale Perspektive**: Recherche und Anwendung von Zugänglichkeitsstandards verschiedener Länder (EN 301 549, Section 508, ADA) +- **Überprüfung der Barrierefreiheitserklärung**: Bewertung der vorhandenen Barrierefreiheitserklärung der Website anhand deiner Ergebnisse + +## Abgabe + +Reiche einen umfassenden Barrierefreiheitsauditbericht ein, der professionelle Analyse und praktische Umsetzungsplanung zeigt: + +**📄 Anforderungen an den Abschlussbericht:** + +1. **Executive Summary** (1 Seite) + - Website-Überblick und Bewertung des Reifegrads + - Zusammenfassung der wichtigsten Erkenntnisse mit Geschäftsauswirkungen + - Empfohlene Prioritätsmaßnahmen + +2. **Methodik und Umfang** (1 Seite) + - Testansatz, eingesetzte Tools, Bewertungskriterien + - Bewertete Seiten/Bereiche und mögliche Einschränkungen + - Einhaltung der Standards (WCAG 2.1 AA) + +3. **Detaillierter Ergebnisbericht** (3-4 Seiten) + - Beobachtungen aus manuellen Tests mit Nutzerszenarien + - Ergebnisse automatisierter Tools mit Querverweisen + - Probleme nach WCAG-Prinzipien gegliedert mit Belegen + - Identifizierte positive Barrierefreiheitsmerkmale + +4. **Strategischer Maßnahmenplan** (3-4 Seiten) + - Priorisierte Verbesserungsvorschläge (mindestens 10) + - Zeitplan mit Aufwandsschätzungen + - Erfolgsmetriken und Verifikationsmethoden + - Strategie für langfristige Barrierefreiheitswartung + +5. **Unterstützende Belege** (Anhänge) + - Screenshots von Barrierefreiheitsverletzungen und Tool-Ergebnissen + - Codebeispiele zur Veranschaulichung von Problemen und Lösungen + - Tool-Berichte und Audit-Zusammenfassungen + - Notizen oder Aufnahmen von Screenreader-Tests + +**📊 Formatvorgaben:** +- **Dokumentformat**: PDF (professionelle Präsentation) +- **Wortanzahl**: 2.500-3.500 Wörter (ohne Anhänge und Screenshots) +- **Visuelle Elemente**: Integriere Screenshots, Diagramme und Beispiele durchgängig +- **Zitationen**: Verweise angemessen auf WCAG-Richtlinien und Barrierefreiheitsressourcen + +**💡 Expertentipps für Exzellenz:** +- Nutze professionelle Berichtgestaltung mit konsistenten Überschriften und Stil +- Füge ein Inhaltsverzeichnis für einfache Navigation hinzu +- Balance zwischen technischer Genauigkeit und klarer, geschäftsgerechter Sprache +- Zeige Verständnis für technische Umsetzung und Nutzerwirkungen + +## Lernziele + +Nach Abschluss dieses umfassenden Barrierefreiheitsaudits hast du folgende wichtige berufliche Kompetenzen entwickelt: + +**🎯 Technische Kompetenzen:** +- **Meisterschaft im Barrierefreiheitstesten**: Praxis mit standardisierten manuellen und automatisierten Methoden +- **WCAG-Anwendung**: Praktische Erfahrung bei der Umsetzung von Web Content Accessibility Guidelines in realen Szenarien +- **Verständnis für assistive Technologien**: Praxis mit Screenreadern und Tastaturnavigation +- **Problem-Lösungs-Zuordnung**: Fähigkeit, Barrieren zu identifizieren und konkrete, umsetzbare Maßnahmen zu entwickeln + +**💼 Berufliche Fähigkeiten:** +- **Technische Kommunikation**: Erfahrung im Verfassen professioneller Barrierefreiheitsberichte für diverse Stakeholder +- **Strategische Planung**: Fähigkeit, Barrierefreiheitsverbesserungen nach Nutzerrelevanz und Machbarkeit zu priorisieren +- **Qualitätssicherung**: Verständnis von Barrierefreiheitsaudits als Teil des Entwicklungszyklus +- **Risikoeinschätzung**: Bewusstsein für rechtliche, geschäftliche und ethische Aspekte der Barrierefreiheit + +**🌍 Inklusive Design-Denkweise:** +- **Nutzerempathie**: Tiefes Verständnis unterschiedlicher Nutzerbedürfnisse und assistiver Technologie-Interaktionen +- **Prinzipien des universellen Designs**: Erkenntnis, dass barrierefreies Design allen Nutzern zugutekommt, nicht nur Menschen mit Behinderungen +- **Kontinuierliche Verbesserung**: Rahmenwerk für fortlaufende Bewertung und Optimierung der Zugänglichkeit +- **Advocacy-Kompetenzen**: Selbstbewusstsein, um Barrierefreiheitsbest Practices in künftigen Projekten und Teams zu fördern + +**🚀 Karrierevorbereitung:** +Diese Aufgabe spiegelt reale Beratungsprojekte im Bereich Barrierefreiheit wider und bietet dir portfoliofähige Erfahrungen, die zeigen: +- Systematische Problemlösekompetenz +- Aufmerksamkeit für technische Details und Geschäftsauswirkungen +- Klare Vermittlung komplexer technischer Konzepte +- Verständnis für rechtliche und ethische Verantwortlichkeiten in der Webentwicklung + +Nach Abschluss bist du bestens gerüstet, um bedeutend zu Zugänglichkeitsinitiativen in jedem Webentwicklungsjob beizutragen und inklusive Designpraktiken in deiner Karriere zu vertreten. + +--- + + **Haftungsausschluss**: -Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. \ No newline at end of file +Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, beachten Sie bitte, dass automatische Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen. + \ No newline at end of file