diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.es.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.es.png deleted file mode 100644 index 9a3a42207..000000000 Binary files a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.es.png and /dev/null differ diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fa.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fa.png deleted file mode 100644 index ccf84a8be..000000000 Binary files a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fa.png and /dev/null differ diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fr.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fr.png deleted file mode 100644 index 781791795..000000000 Binary files a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.fr.png and /dev/null differ diff --git a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ru.png b/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ru.png deleted file mode 100644 index 25f39310c..000000000 Binary files a/translated_images/working-tree-pb.6cd43e5076f23ba3d017f7662394bd87f975e194a068556905e4cc99da9cbfdc.ru.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.ar.png b/translated_images/working-tree.c58eec08e6335c79.ar.png deleted file mode 100644 index 01a2951d7..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.ar.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.de.png b/translated_images/working-tree.c58eec08e6335c79.de.png deleted file mode 100644 index 65c8acedb..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.de.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.es.png b/translated_images/working-tree.c58eec08e6335c79.es.png deleted file mode 100644 index 9b44d0dfa..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.es.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.fa.png b/translated_images/working-tree.c58eec08e6335c79.fa.png deleted file mode 100644 index d1571cc3e..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.fa.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.fr.png b/translated_images/working-tree.c58eec08e6335c79.fr.png deleted file mode 100644 index 16ca33d8a..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.fr.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79.ru.png b/translated_images/working-tree.c58eec08e6335c79.ru.png deleted file mode 100644 index 1f8b12e54..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79.ru.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ar.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ar.png deleted file mode 100644 index 01a2951d7..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ar.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.de.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.de.png deleted file mode 100644 index 65c8acedb..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.de.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.es.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.es.png deleted file mode 100644 index 9b44d0dfa..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.es.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fa.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fa.png deleted file mode 100644 index d1571cc3e..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fa.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fr.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fr.png deleted file mode 100644 index 16ca33d8a..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.fr.png and /dev/null differ diff --git a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ru.png b/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ru.png deleted file mode 100644 index 1f8b12e54..000000000 Binary files a/translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ru.png and /dev/null differ 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 135d8e656..eea715857 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.d6e3f98e61ac4bff.ar.png) +![مقدمة البرمجة](../../../../translated_images/ar/webdev101-programming.d6e3f98e61ac4bff.webp) > رسم توضيحي بواسطة [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 fe667742a..ec585ee54 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.8846d7971abef6f9.ar.png) +![مقدمة إلى GitHub](../../../../translated_images/ar/webdev101-github.8846d7971abef6f9.webp) > رسم توضيحي بواسطة [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.5085c48d666ead57.ar.png) +![نسخ مستودع محليًا](../../../../translated_images/ar/clone_repo.5085c48d666ead57.webp) هناك عدة طرق لنسخ الأكواد. إحدى الطرق هي "استنساخ" محتويات المستودع باستخدام 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 156906e98..9cefedf9a 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.8ef3025c858d897a.ar.png) +![كل شيء عن إمكانية الوصول](../../../../translated_images/ar/webdev101-a11y.8ef3025c858d897a.webp) > رسم توضيحي بواسطة [تومومي إيمورا](https://twitter.com/girlie_mac) ```mermaid @@ -1060,12 +1060,12 @@ pie title "Common ARIA Usage Patterns" **الصور المعلوماتية** - تنقل معلومات مهمة: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **الصور الزخرفية** - بصرية بحتة بدون قيمة معلوماتية: ```html - + ``` **الصور الوظيفية** - تعمل كأزرار أو عناصر تحكم: @@ -1077,7 +1077,7 @@ pie title "Common ARIA Usage Patterns" **الصور المعقدة** - الرسوم البيانية، المخططات، الإنفوجرافيك: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1117,7 +1117,7 @@ pie title "Common ARIA Usage Patterns" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` 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 6ff58854b..e8c217aac 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.4cc470179730702c.ar.png) +![أساسيات JavaScript - أنواع البيانات](../../../../translated_images/ar/webdev101-js-datatypes.4cc470179730702c.webp) > رسم توضيحي بواسطة [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 026554a9b..bc5bab964 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.be049c4726e94f8b.ar.png) +![أساسيات JavaScript - الدوال](../../../../translated_images/ar/webdev101-js-functions.be049c4726e94f8b.webp) > رسم توضيحي بواسطة [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 5c314c811..833bdd6e3 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.69e1b20f272dd1f0.ar.png) +![أساسيات JavaScript - اتخاذ القرارات](../../../../translated_images/ar/webdev101-js-decisions.69e1b20f272dd1f0.webp) > رسم توضيحي بواسطة [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 dfa9f0607..81cd70ed2 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.439d7528b8a29455.ar.png) +![أساسيات JavaScript - المصفوفات](../../../../translated_images/ar/webdev101-js-arrays.439d7528b8a29455.webp) > رسم توضيحي بواسطة [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 411223781..1ecffac5f 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.4389c2067af68e98.ar.png) +![مقدمة إلى HTML](../../../../translated_images/ar/webdev101-html.4389c2067af68e98.webp) > رسم توضيحي بواسطة [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.e2986cf919471eb9.ar.png) +![مستكشف VS Code يظهر إنشاء ملف جديد](../../../../translated_images/ar/vs-code-index.e2986cf919471eb9.webp) **الخيار الثاني: باستخدام أوامر الطرفية** ```bash @@ -239,48 +239,48 @@ flowchart TD
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
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 9fa1b4eb2..2fe702845 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.3f7af5991bf53a20.ar.png) +![مقدمة في CSS](../../../../translated_images/ar/webdev101-css.3f7af5991bf53a20.webp) > رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac) هل تتذكر كيف كان شكل التيراريوم الخاص بك بسيطًا جدًا؟ CSS هو المكان الذي نحول فيه هذا الهيكل البسيط إلى شيء جذاب بصريًا. @@ -205,7 +205,7 @@ body { افتح أدوات المطور في المتصفح (F12)، انتقل إلى علامة التبويب العناصر، وقم بفحص عنصر `

` الخاص بك. سترى أنه يرث نوع الخط من body: -![الخط الموروث](../../../../translated_images/1.cc07a5cbe114ad1d.ar.png) +![الخط الموروث](../../../../translated_images/ar/1.cc07a5cbe114ad1d.webp) ✅ **وقت التجربة**: حاول تعيين خصائص أخرى قابلة للوراثة على `` مثل `color`، `line-height`، أو `text-align`. ماذا يحدث لعناوينك والعناصر الأخرى؟ @@ -335,7 +335,7 @@ h1 { **إليك هيكل HTML لكل نبتة:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -599,7 +599,7 @@ flowchart LR ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ar.png) +![finished terrarium](../../../../translated_images/ar/terrarium-final.2f07047ffc597d0a.webp) **تحديك:** - **قم بإنشاء** أشكال بيضاوية بيضاء أو فاتحة اللون للانعكاسات الزجاجية 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 357b25efd..1bbfb1bc3 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.10280393044d7eaa.ar.png) +![DOM والإغلاق](../../../../translated_images/ar/webdev101-js.10280393044d7eaa.webp) > رسم توضيحي بواسطة [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.7daf0e763cbbba92.ar.png) +![تمثيل شجرة DOM](../../../../translated_images/ar/dom-tree.7daf0e763cbbba92.webp) > تمثيل لـ 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.7daf0e763cbbba92.ar.png) +![تمثيل شجرة DOM](../../../../translated_images/ar/dom-tree.7daf0e763cbbba92.webp) > تمثيل لـ 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.0920f16e87c13a84.ar.png) +![التيراريوم النهائي](../../../../translated_images/ar/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/ar/3-terrarium/solution/README.md b/translations/ar/3-terrarium/solution/README.md index 0075eea72..623dad10f 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.0c796099a1f9f25e.ar.png) +![تراريومي](../../../../translated_images/ar/screenshot_gray.0c796099a1f9f25e.webp) ## الشكر والتقدير 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 4fbbc20b8..05eb5f70f 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.60317c9be8b7f84a.ar.jpg) +![رسم توضيحي للمتصفح](../../../../translated_images/ar/browser.60317c9be8b7f84a.webp) > رسم توضيحي بواسطة [وسيم شغام](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.d984b711cdf3a42d.ar.jpg) +![متصفحات قديمة](../../../../translated_images/ar/earlybrowsers.d984b711cdf3a42d.webp) > بعض المتصفحات القديمة، عبر [كارين ماكجرين](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### كيف تعالج المتصفحات محتوى الويب @@ -198,7 +198,7 @@ quadrantChart فهم عملية تثبيت الإضافات يساعدك على توقع تجربة المستخدم عندما يقوم الأشخاص بتثبيت إضافتك. عملية التثبيت موحدة عبر المتصفحات الحديثة، مع اختلافات طفيفة في تصميم الواجهة. -![لقطة شاشة لمتصفح Edge تعرض صفحة إدارة الإضافات المفتوحة وقائمة الإعدادات](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ar.png) +![لقطة شاشة لمتصفح Edge تعرض صفحة إدارة الإضافات المفتوحة وقائمة الإعدادات](../../../../translated_images/ar/install-on-edge.d68781acaf0b3d3d.webp) > **هام**: تأكد من تفعيل وضع المطور والسماح بالإضافات من المتاجر الأخرى عند اختبار إضافاتك الخاصة. @@ -313,10 +313,10 @@ project-root/ ### نظرة عامة على شاشات الإضافة **شاشة الإعداد** - تكوين المستخدم لأول مرة: -![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/1.b6da8c1394b07491.ar.png) +![لقطة شاشة للإضافة المكتملة مفتوحة في المتصفح، تعرض نموذجًا يحتوي على مدخلات لاسم المنطقة ومفتاح API.](../../../../translated_images/ar/1.b6da8c1394b07491.webp) **شاشة النتائج** - عرض بيانات بصمة الكربون: -![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/2.1dae52ff08042246.ar.png) +![لقطة شاشة للإضافة المكتملة تعرض قيمًا لاستخدام الكربون ونسبة الوقود الأحفوري لمنطقة US-NEISO.](../../../../translated_images/ar/2.1dae52ff08042246.webp) ### بناء نموذج التكوين 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 15ff1b3e0..045efca11 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.472f8147b6a3f8d1.ar.png) +![لوحة التخزين المحلي](../../../../translated_images/ar/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **اعتبار أمني**: في التطبيقات الإنتاجية، تخزين مفاتيح 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 a82f23a55..d6f24f944 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.5a4a62479c5df01c.ar.png) +![Edge profiler](../../../../translated_images/ar/profiler.5a4a62479c5df01c.webp) ✅ يحتوي [توثيق 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.97750180ebcad737.ar.png) +![Edge profiler snapshot](../../../../translated_images/ar/snapshot.97750180ebcad737.webp) تحقق من لوحة سجل الأحداث لترى إذا كان أي حدث استغرق أكثر من 15 مللي ثانية: -![Edge event log](../../../../translated_images/log.804026979f3707e0.ar.png) +![Edge event log](../../../../translated_images/ar/log.804026979f3707e0.webp) ✅ تعرف على المحلل الخاص بك! افتح أدوات المطور على هذا الموقع وانظر إذا كانت هناك أي اختناقات. ما هو الأصل الذي يتم تحميله ببطء؟ الأسرع؟ diff --git a/translations/ar/5-browser-extension/README.md b/translations/ar/5-browser-extension/README.md index f7c70b3a7..c40f34d60 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.0e7f5bfa110e92e3.ar.png) +![إضافة متصفح خضراء](../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## الشكر والتقدير diff --git a/translations/ar/5-browser-extension/solution/README.md b/translations/ar/5-browser-extension/solution/README.md index e028bc21c..6d3135fe7 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للملحق](../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البدء @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح API والمنطقة في واجهة الملحق، يجب أن تتغير النقطة الملونة في شريط ملحق المتصفح لتعكس استخدام الطاقة في منطقتك وتقدم لك إشارة حول الأنشطة الثقيلة بالطاقة التي سيكون من المناسب القيام بها. تم استلهام فكرة هذا النظام "النقطة" من ملحق [Energy Lollipop](https://energylollipop.com/) لانبعاثات كاليفورنيا. diff --git a/translations/ar/5-browser-extension/solution/translation/README.es.md b/translations/ar/5-browser-extension/solution/translation/README.es.md index e44e2fa7b..1a1393ddb 100644 --- a/translations/ar/5-browser-extension/solution/translation/README.es.md +++ b/translations/ar/5-browser-extension/solution/translation/README.es.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: باستخدام واجهة برمجة التطبيقات CO2 Signal من tmrow لتتبع استخدام الكهرباء، قم بإنشاء امتداد للمتصفح حتى تتمكن من الحصول على تذكير مباشر في متصفحك حول استهلاك الكهرباء في منطقتك. سيساعدك استخدام هذا الامتداد المخصص على اتخاذ قرارات بشأن أنشطتك بناءً على هذه المعلومات. -![لقطة شاشة للامتداد](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.ar.png) +![لقطة شاشة للامتداد](../../../../../translated_images/ar/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png) ## البدء @@ -31,7 +31,7 @@ npm run build لتثبيت الامتداد في Edge، استخدم قائمة "النقاط الثلاث" في الزاوية العلوية اليمنى من المتصفح للعثور على لوحة الامتدادات. من هناك، اختر "تحميل غير مضغوط" لتحميل امتداد جديد. افتح مجلد "dist" عندما يُطلب منك ذلك وسيتم تحميل الامتداد. لاستخدامه، ستحتاج إلى مفتاح API لواجهة برمجة التطبيقات CO2 Signal ([احصل عليه هنا عبر البريد الإلكتروني](https://www.co2signal.com/) - أدخل بريدك الإلكتروني في المربع الموجود في هذه الصفحة) ورمز منطقتك المقابل لـ [خريطة الكهرباء](https://www.electricitymap.org/map) ([API](http://api.electricitymap.org/v3/zones)) (في بوسطن، على سبيل المثال، أستخدم "US-NEISO"). -![التثبيت](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.ar.png) +![التثبيت](../../../../../translated_images/ar/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.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 ece257a38..54329e896 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البدء @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 367e70832..57529ce59 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البدء @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 4c15e2387..4d2a9979f 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للامتداد](../../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## للبدء @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 5368305c9..dbf29cb54 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للملحق](../../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البداية @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 84f106838..8aa342866 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة لملحق المتصفح](../../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البداية من هنا @@ -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.78634f02842c4828.ar.png) +![جاري التحميل](../../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 73207b2cb..bcebbc2c8 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.0e7f5bfa110e92e3.ar.png) +![لقطة شاشة للامتداد](../../../../translated_images/ar/extension-screenshot.0e7f5bfa110e92e3.webp) ## البدء @@ -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.78634f02842c4828.ar.png) +![التثبيت](../../../../translated_images/ar/install-on-edge.78634f02842c4828.webp) بمجرد إدخال مفتاح 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 ac3043541..e39852196 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.5f209da785ded492.ar.png) +![شبكة اللوحة](../../../../translated_images/ar/canvas_grid.5f209da785ded492.webp) > الصورة من [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) لترسم على عنصر اللوحة، ستتبع نفس العملية المكونة من ثلاث خطوات التي تشكل أساس جميع رسومات اللوحة. بمجرد القيام بذلك عدة مرات، يصبح الأمر طبيعيًا: @@ -329,11 +329,11 @@ flowchart TD - سفينة البطل - ![سفينة البطل](../../../../translated_images/player.dd24c1afa8c71e9b.ar.png) + ![سفينة البطل](../../../../translated_images/ar/player.dd24c1afa8c71e9b.webp) - 5*5 وحش - ![سفينة الوحش](../../../../translated_images/enemyShip.5df2a822c16650c2.ar.png) + ![سفينة الوحش](../../../../translated_images/ar/enemyShip.5df2a822c16650c2.webp) ### الخطوات الموصى بها لبدء التطوير @@ -460,7 +460,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { يجب أن تبدو النتيجة النهائية كما يلي: -![شاشة سوداء مع بطل و5*5 وحوش](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ar.png) +![شاشة سوداء مع بطل و5*5 وحوش](../../../../translated_images/ar/partI-solution.36c53b48c9ffae2a.webp) ## الحل 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 5a2d837de..51392034e 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.6fb9f50d53ee0413.ar.png). +- **عداد الأرواح**: يبدأ بطلك بثلاث أرواح - معيار تم تحديده بواسطة ألعاب الأركيد المبكرة لتحقيق التوازن بين التحدي وقابلية اللعب. كل تصادم مع عدو يكلفك حياة واحدة. سنعرض الأرواح المتبقية في الزاوية السفلية اليمنى باستخدام أيقونات السفن ![life image](../../../../translated_images/ar/life.6fb9f50d53ee0413.webp). ## لنبدأ البناء! 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 6530a3b5e..e8d4ed80e 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.7fdabbafa521e064.ar.png) +![لقطة شاشة لسجل التنقل](../../../../translated_images/ar/history.7fdabbafa521e064.webp) إذا حاولت النقر على زر الرجوع عدة مرات، سترى أن عنوان URL الحالي يتغير ويتم تحديث السجل، لكن نفس القالب يستمر في العرض. diff --git a/translations/ar/7-bank-project/2-forms/README.md b/translations/ar/7-bank-project/2-forms/README.md index 8d94df672..3b3b34ce8 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.e89a30bf0d4bc9ca.ar.png) +![لقطة شاشة لتغيير عنوان URL للمتصفح بعد النقر على زر التسجيل](../../../../translated_images/ar/click-register.e89a30bf0d4bc9ca.webp) ### مقارنة طرق HTTP @@ -350,7 +350,7 @@ graph TD 2. **انقر** على زر "إنشاء حساب" 3. **لاحظ** استجابة الخادم في متصفحك -![نافذة متصفح على العنوان localhost:5000/api/accounts، تعرض سلسلة JSON تحتوي على بيانات المستخدم](../../../../translated_images/form-post.61de4ca1b964d91a.ar.png) +![نافذة متصفح على العنوان localhost:5000/api/accounts، تعرض سلسلة JSON تحتوي على بيانات المستخدم](../../../../translated_images/ar/form-post.61de4ca1b964d91a.webp) **ما يجب أن تراه:** - **إعادة توجيه المتصفح** إلى عنوان URL لنقطة نهاية API @@ -615,7 +615,7 @@ async function register() { 3. **انقر** على "إنشاء حساب" 4. **لاحظ** رسائل وحدة التحكم وملاحظات المستخدم -![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/browser-console.efaf0b51aaaf6778.ar.png) +![لقطة شاشة تظهر رسالة السجل في وحدة التحكم بالمتصفح](../../../../translated_images/ar/browser-console.efaf0b51aaaf6778.webp) **ما يجب أن تراه:** - **حالة التحميل** تظهر على زر الإرسال @@ -790,7 +790,7 @@ input:focus:invalid { 3. **جرب** أحرف خاصة في حقل اسم المستخدم 4. **أدخل** مبلغ رصيد سلبي -![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/validation-error.8bd23e98d416c22f.ar.png) +![لقطة شاشة تظهر خطأ التحقق عند محاولة إرسال النموذج](../../../../translated_images/ar/validation-error.8bd23e98d416c22f.webp) **ما ستلاحظه:** - **المتصفح يعرض** رسائل التحقق الأصلية @@ -940,7 +940,7 @@ timeline إليك مثال لما يمكن أن يبدو عليه صفحة تسجيل الدخول النهائية بعد إضافة بعض أنماط CSS: -![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/result.96ef01f607bf856a.ar.png) +![لقطة شاشة لصفحة تسجيل الدخول بعد إضافة أنماط CSS](../../../../translated_images/ar/result.96ef01f607bf856a.webp) ## اختبار ما بعد المحاضرة diff --git a/translations/ar/7-bank-project/3-data/README.md b/translations/ar/7-bank-project/3-data/README.md index 7b49d1339..bc21bd657 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.7f7375a1a2d4aa77.ar.png) +![تدفق التحديث في تطبيق متعدد الصفحات](../../../../translated_images/ar/mpa.7f7375a1a2d4aa77.webp) **لماذا كان هذا النهج يبدو غير سلس:** - كل نقرة تعني إعادة بناء الصفحة بالكامل من البداية @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![تدفق التحديث في تطبيق أحادي الصفحة](../../../../translated_images/spa.268ec73b41f992c2.ar.png) +![تدفق التحديث في تطبيق أحادي الصفحة](../../../../translated_images/ar/spa.268ec73b41f992c2.webp) **لماذا التطبيقات أحادية الصفحة تبدو أفضل بكثير:** - يتم تحديث الأجزاء التي تغيرت فقط (ذكي، أليس كذلك؟) @@ -523,7 +523,7 @@ if (data.error) { الآن عند الاختبار باستخدام حساب غير صالح، سترى رسالة خطأ مفيدة مباشرةً على الصفحة! -![لقطة شاشة تظهر رسالة الخطأ أثناء تسجيل الدخول](../../../../translated_images/login-error.416fe019b36a6327.ar.png) +![لقطة شاشة تظهر رسالة الخطأ أثناء تسجيل الدخول](../../../../translated_images/ar/login-error.416fe019b36a6327.webp) #### الخطوة 4: أن تكون شاملًا مع إمكانية الوصول @@ -961,7 +961,7 @@ timeline إليك ما يمكن أن تبدو عليه لوحة التحكم المصقولة: -![لقطة شاشة لنتيجة مثال لوحة التحكم بعد التنسيق](../../../../translated_images/screen2.123c82a831a1d14a.ar.png) +![لقطة شاشة لنتيجة مثال لوحة التحكم بعد التنسيق](../../../../translated_images/ar/screen2.123c82a831a1d14a.webp) لا تشعر بأن عليك مطابقة هذا بالضبط - استخدمه كمصدر إلهام واجعلها خاصة بك! 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 58b9744ed..6f4d5ec35 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.fa2354e0908fecc8.ar.png) +![مخطط يوضح تدفقات البيانات بين HTML، إجراءات المستخدم والحالة](../../../../translated_images/ar/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -804,7 +804,7 @@ timeline إليك مثال على النتيجة بعد إكمال المهمة: -![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/dialog.93bba104afeb79f1.ar.png) +![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/ar/dialog.93bba104afeb79f1.webp) --- 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 94d520900..3f4c74343 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.93bba104afeb79f1.ar.png) +![لقطة شاشة تعرض مثالًا لمربع حوار "إضافة معاملة"](../../../../translated_images/ar/dialog.93bba104afeb79f1.webp) ## اختبار التنفيذ الخاص بك diff --git a/translations/ar/7-bank-project/README.md b/translations/ar/7-bank-project/README.md index 052c9d548..54099fd47 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.baccbba0f1f93364.ar.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ar.png) | +| ![Screen1](../../../translated_images/ar/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ar/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## الدروس 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 54a60fddc..7ad2b7375 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.5d06881d65c1b323.ar.png) +![واجهة VSCode.dev الافتراضية](../../../../translated_images/ar/default-vscode-dev.5d06881d65c1b323.webp) **إليك جولة في الحي:** - **شريط النشاط** (الشريط الموجود على اليسار): التنقل الرئيسي الخاص بك مع المستكشف 📁، البحث 🔍، التحكم في المصدر 🌿، الإضافات 🧩، والإعدادات ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. توجه إلى [vscode.dev](https://vscode.dev) إذا لم تكن هناك بالفعل 2. ابحث عن زر "فتح مستودع عن بُعد" على شاشة الترحيب وانقر عليه - ![فتح مستودع عن بُعد](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ar.png) + ![فتح مستودع عن بُعد](../../../../translated_images/ar/open-remote-repository.bd9c2598b8949e7f.webp) 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.4946174e07f42622.ar.png) +![لوحة الأوامر](../../../../translated_images/ar/palette-menu.4946174e07f42622.webp) **لوحة الأوامر تشبه وجود محرك بحث لكل ما يمكنك القيام به:** - اكتب "فتح عن بُعد" وستجد أداة فتح المستودعات @@ -304,7 +304,7 @@ flowchart TB 3. أدخل اسم الملف بما في ذلك الامتداد المناسب (`style.css`, `script.js`, `index.html`) 4. اضغط على Enter لإنشاء الملف -![إنشاء ملف جديد](../../../../translated_images/create-new-file.2814e609c2af9aeb.ar.png) +![إنشاء ملف جديد](../../../../translated_images/ar/create-new-file.2814e609c2af9aeb.webp) **اتفاقيات التسمية:** - استخدم أسماء وصفية تشير إلى غرض الملف @@ -322,7 +322,7 @@ flowchart TB 2. ابدأ الكتابة وشاهد VSCode.dev يساعدك بالألوان، الاقتراحات، واكتشاف الأخطاء 3. احفظ عملك باستخدام Ctrl+S (Windows/Linux) أو Cmd+S (Mac) - رغم أنه يحفظ تلقائيًا أيضًا! -![تحرير الملفات في VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ar.png) +![تحرير الملفات في VSCode.dev](../../../../translated_images/ar/edit-a-file.52c0ee665ef19f08.webp) **الأشياء الرائعة التي تحدث أثناء البرمجة:** - يتم تلوين الأكواد بشكل جميل بحيث يسهل قراءتها @@ -343,7 +343,7 @@ flowchart TB 2. تظهر الملفات المعدلة في قسم "التغييرات" 3. يشير الترميز اللوني إلى أنواع التغييرات: الأخضر للإضافات، الأحمر للحذف -![عرض التغييرات في التحكم في المصدر](../../../../translated_images/working-tree.c58eec08e6335c79.ar.png) +![عرض التغييرات في التحكم في المصدر](../../../../translated_images/ar/working-tree.c58eec08e6335c79.webp) **حفظ عملك (سير عمل التثبيت):** @@ -438,7 +438,7 @@ mindmap 2. تصفح أو ابحث عن شيء محدد 3. انقر على أي شيء يبدو مثيرًا للاهتمام لمعرفة المزيد عنه -![واجهة سوق الإضافات](../../../../translated_images/extensions.eca0e0c7f59a10b5.ar.png) +![واجهة سوق الإضافات](../../../../translated_images/ar/extensions.eca0e0c7f59a10b5.webp) **ما ستراه هناك:** @@ -491,7 +491,7 @@ mindmap 3. اختر "إعدادات الإضافة" من القائمة المنسدلة 4. قم بتعديل الأمور حتى تشعر أنها مناسبة لسير عملك -![تخصيص إعدادات الإضافات](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ar.png) +![تخصيص إعدادات الإضافات](../../../../translated_images/ar/extension-settings.21c752ae4f4cdb78.webp) **الأشياء الشائعة التي قد ترغب في تعديلها:** - كيفية تنسيق الكود الخاص بك (علامات التبويب مقابل المسافات، طول السطر، إلخ) 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 89d7ba340..d1fec133b 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.c886796d800e8056.ar.png) +![إنشاء ملف أولي على GitHub](../../../../translated_images/ar/new-file-github.com.c886796d800e8056.webp) **ما الذي يحققه هذا الإعداد الأولي:** - **يؤسس** هيكل مستند HTML5 الصحيح باستخدام العناصر الدلالية @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **مؤشر النجاح**: يجب أن ترى ملفات مشروعك في الشريط الجانبي للمستكشف و`index.html` متاحًا للتحرير في منطقة المحرر الرئيسية. -![المشروع محمل في VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ar.png) +![المشروع محمل في VSCode.dev](../../../../translated_images/ar/project-on-vscode.dev.e79815a9a95ee7fe.webp) **ما ستراه في الواجهة:** - **الشريط الجانبي للمستكشف**: **يعرض** ملفات المستودع وهيكل المجلدات @@ -448,7 +448,7 @@ li:before { **النتائج الفورية بعد التثبيت:** بمجرد تثبيت CodeSwing، سترى معاينة مباشرة لموقع السيرة الذاتية الخاص بك تظهر في المحرر. يتيح لك ذلك رؤية كيف يبدو موقعك بالضبط أثناء إجراء التغييرات. -![امتداد CodeSwing يعرض معاينة مباشرة](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ar.png) +![امتداد CodeSwing يعرض معاينة مباشرة](../../../../translated_images/ar/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **فهم الواجهة المحسنة:** - **عرض مقسم**: **يعرض** الكود على جانب واحد والمعاينة المباشرة على الجانب الآخر diff --git a/translations/ar/9-chat-project/README.md b/translations/ar/9-chat-project/README.md index 1f06813f8..35b18ec1f 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.0a1ee0d123df681b.ar.png) +![واجهة تطبيق الدردشة تظهر محادثة بين المستخدم ومساعد الذكاء الاصطناعي](../../../translated_images/ar/screenshot.0a1ee0d123df681b.webp) ## 🗺️ رحلتك التعليمية عبر تطوير تطبيقات الذكاء الاصطناعي @@ -194,7 +194,7 @@ mindmap **المبدأ الأساسي**: تطوير تطبيقات الذكاء الاصطناعي يجمع بين مهارات تطوير الويب التقليدية وتكامل خدمات الذكاء الاصطناعي، مما يخلق تطبيقات ذكية تبدو طبيعية وتفاعلية للمستخدمين. -![واجهة GitHub Models AI Playground مع اختيار النموذج ومنطقة الاختبار](../../../translated_images/playground.d2b927122224ff8f.ar.png) +![واجهة GitHub Models AI Playground مع اختيار النموذج ومنطقة الاختبار](../../../translated_images/ar/playground.d2b927122224ff8f.webp) **ما الذي يجعل الملعب مفيدًا جدًا:** - **جرب** نماذج ذكاء اصطناعي مختلفة مثل GPT-4o-mini، Claude، وغيرها (كلها مجانية!) @@ -204,7 +204,7 @@ mindmap بمجرد أن تجرب قليلاً، فقط انقر على علامة التبويب "Code" واختر لغتك البرمجية للحصول على كود التنفيذ الذي تحتاجه. -![اختيار الملعب يظهر خيارات توليد الكود للغات البرمجة المختلفة](../../../translated_images/playground-choice.1d23ba7d407f4758.ar.png) +![اختيار الملعب يظهر خيارات توليد الكود للغات البرمجة المختلفة](../../../translated_images/ar/playground-choice.1d23ba7d407f4758.webp) ## إعداد تكامل الخلفية باستخدام 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.67ad477109d29a2b.ar.png) +![واجهة الإنشاء من القالب تظهر زر "Use this template" الأخضر](../../../translated_images/ar/template.67ad477109d29a2b.webp) **الخطوة 2: تشغيل Codespaces** - **افتح** المستودع الذي أنشأته حديثًا - **اضغط** على الزر الأخضر "Code" واختر "Codespaces" - **اختر** "Create codespace on main" لبدء بيئة التطوير -![واجهة إنشاء Codespace مع خيارات تشغيل بيئة التطوير السحابية](../../../translated_images/codespace.bcecbdf5d2747d3d.ar.png) +![واجهة إنشاء Codespace مع خيارات تشغيل بيئة التطوير السحابية](../../../translated_images/ar/codespace.bcecbdf5d2747d3d.webp) **الخطوة 3: تكوين البيئة** بمجرد تحميل Codespace، سيكون لديك وصول إلى: diff --git a/translations/ar/README.md b/translations/ar/README.md index 86cd9b10e..590ba6fab 100644 --- a/translations/ar/README.md +++ b/translations/ar/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: قم بزيارة [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) للبدء! -![Background](../../translated_images/background.148a8d43afde5730.ar.png) +![Background](../../translated_images/ar/background.148a8d43afde5730.webp) - دروس تغطي كل شيء من الأساسيات إلى RAG. - تفاعل مع شخصيات تاريخية باستخدام GenAI وتطبيقنا المصاحب. - سرد ممتع وجذاب، ستسافر عبر الزمن! -![character](../../translated_images/character.5c0dd8e067ffd693.ar.png) +![character](../../translated_images/ar/character.5c0dd8e067ffd693.webp) كل درس يتضمن مهمة يجب إتمامها، اختبار معرفة، وتحدي لتوجيهك في تعلم موضوعات مثل: @@ -115,7 +115,7 @@ CO_OP_TRANSLATOR_METADATA: في نسختك من هذا المستودع التي أنشأتها، انقر على زر **Code** واختر **Open with Codespaces**. سيُنشئ هذا Codespace جديدًا لتعمل فيه. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ar.png) +![Codespace](../../translated_images/ar/createcodespace.0238bbf4d7a8d955.webp) #### تشغيل المنهج محليًا على جهازك diff --git a/translations/ar/for-teachers.md b/translations/ar/for-teachers.md index 20d936c4a..268085210 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.94eb93d714a50cb2.ar.png) +![Moodle](../../translated_images/ar/moodle.94eb93d714a50cb2.webp) > المنهج الدراسي في فصل Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ar.png) +![Canvas](../../translated_images/ar/canvas.fbd605ff8e5b8aff.webp) > المنهج الدراسي في Canvas ### استخدام المستودع مباشرة (بدون Classroom) diff --git a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 101200ec8..226134aa5 100644 --- a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Днес ще разгледаме невероятните инструменти, които правят съвременното уеб разработване не само възможно, но и наистина пристрастяващо. Говоря за същите редактори, браузъри и работни процеси, които разработчиците в Netflix, Spotify и любимото ти инди студио използват всеки ден. И ето и частта, която ще те накара да се зарадваш: повечето от тези професионални, индустриални инструменти са напълно безплатни! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.bg.png) +![Intro Programming](../../../../translated_images/bg/webdev101-programming.d6e3f98e61ac4bff.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bg/1-getting-started-lessons/2-github-basics/README.md b/translations/bg/1-getting-started-lessons/2-github-basics/README.md index 020c556e7..3b580d99a 100644 --- a/translations/bg/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/bg/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Ще изминаем това пътешествие заедно, стъпка по стъпка. Без бързане, без натиск – само ти, аз и някои много яки инструменти, които ще станат твоите най-добри приятели! -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.bg.png) +![Intro to GitHub](../../../../translated_images/bg/webdev101-github.8846d7971abef6f9.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,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.5085c48d666ead57.bg.png) +![Копиране на репо локално](../../../../translated_images/bg/clone_repo.5085c48d666ead57.png) Има няколко начина да копирате кода. Един от тях е да "клонирате" съдържанието на репозитория, използвайки HTTPS, SSH или с помощта на GitHub CLI (Интерфейс на командния ред). diff --git a/translations/bg/1-getting-started-lessons/3-accessibility/README.md b/translations/bg/1-getting-started-lessons/3-accessibility/README.md index 3b9884f56..705957ffd 100644 --- a/translations/bg/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/bg/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Създаване на достъпни уебстраници -![Всичко за достъпността](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.bg.png) +![Всичко за достъпността](../../../../translated_images/bg/webdev101-a11y.8ef3025c858d897a.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ pie title "Чести модели за използване на ARIA" **Информиращи изображения** — предават важна информация: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **Декоративни изображения** — чисто визуални, без информационна стойност: ```html - + ``` **Функционални изображения** — служат като бутони или контролни елементи: @@ -1066,7 +1066,7 @@ pie title "Чести модели за използване на ARIA" **Сложни изображения** — графики, диаграми, инфографики: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ pie title "Чести модели за използване на ARIA" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/bg/2-js-basics/1-data-types/README.md b/translations/bg/2-js-basics/1-data-types/README.md index 15f700f52..fe4335536 100644 --- a/translations/bg/2-js-basics/1-data-types/README.md +++ b/translations/bg/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи на JavaScript: Типове данни -![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.bg.png) +![JavaScript Basics - Data types](../../../../translated_images/bg/webdev101-js-datatypes.4cc470179730702c.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bg/2-js-basics/2-functions-methods/README.md b/translations/bg/2-js-basics/2-functions-methods/README.md index 8451b8533..e186c64ca 100644 --- a/translations/bg/2-js-basics/2-functions-methods/README.md +++ b/translations/bg/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи на JavaScript: Методи и функции -![Основи на JavaScript - Функции](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.bg.png) +![Основи на JavaScript - Функции](../../../../translated_images/bg/webdev101-js-functions.be049c4726e94f8b.png) > Скетчнот от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bg/2-js-basics/3-making-decisions/README.md b/translations/bg/2-js-basics/3-making-decisions/README.md index 46462052f..e9f0654d1 100644 --- a/translations/bg/2-js-basics/3-making-decisions/README.md +++ b/translations/bg/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи на JavaScript: Вземане на решения -![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.bg.png) +![JavaScript Basics - Making decisions](../../../../translated_images/bg/webdev101-js-decisions.69e1b20f272dd1f0.png) > Скетчнот от [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/bg/2-js-basics/4-arrays-loops/README.md b/translations/bg/2-js-basics/4-arrays-loops/README.md index de34ef7e1..68c8e5fc5 100644 --- a/translations/bg/2-js-basics/4-arrays-loops/README.md +++ b/translations/bg/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи на JavaScript: Масиви и цикли -![Основи на JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.bg.png) +![Основи на JavaScript - Масиви](../../../../translated_images/bg/webdev101-js-arrays.439d7528b8a29455.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bg/3-terrarium/1-intro-to-html/README.md b/translations/bg/3-terrarium/1-intro-to-html/README.md index fcfeb0d3d..c1225dd5d 100644 --- a/translations/bg/3-terrarium/1-intro-to-html/README.md +++ b/translations/bg/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Подобряване на достъпността: 5: Student Създаване на терариум: 5: Student ``` -![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.bg.png) +![Introduction to HTML](../../../../translated_images/bg/webdev101-html.4389c2067af68e98.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) HTML или HyperText Markup Language е основата на всеки уебсайт, който някога сте посещавали. Помислете за HTML като за скелета, който дава структура на уеб страниците – той определя къде да отиде съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно „облича“ вашия HTML с цветове и оформления, а JavaScript го оживява с интерактивност, HTML осигурява съществената структура, която прави всичко останало възможно. @@ -86,7 +86,7 @@ mindmap 4. В панела Explorer кликнете иконата за "New File" 5. Наименувайте файла си `index.html` -![VS Code Explorer showing new file creation](../../../../translated_images/vs-code-index.e2986cf919471eb9.bg.png) +![VS Code Explorer showing new file creation](../../../../translated_images/bg/vs-code-index.e2986cf919471eb9.png) **Опция 2: Използване на команди в терминала** ```bash @@ -236,48 +236,48 @@ HTML използва тагове в двойки, за да дефинира
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/bg/3-terrarium/2-intro-to-css/README.md b/translations/bg/3-terrarium/2-intro-to-css/README.md index f5030e929..9673675a1 100644 --- a/translations/bg/3-terrarium/2-intro-to-css/README.md +++ b/translations/bg/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Адаптивен дизайн: 5: Student Стъклени отражения: 5: Student ``` -![Въведение в CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.bg.png) +![Въведение в CSS](../../../../translated_images/bg/webdev101-css.3f7af5991bf53a20.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) Спомняте ли си как вашият HTML терариум изглеждаше доста основен? CSS е мястото, където преобразяваме тази обикновена структура във визуално привлекателна. @@ -202,7 +202,7 @@ body { Отворете инструменти за разработчици на вашия браузър (F12), отидете на раздел Elements и инспектирайте вашия `

` елемент. Ще видите, че той наследява шрифтa от body: -![наследен шрифт](../../../../translated_images/1.cc07a5cbe114ad1d.bg.png) +![наследен шрифт](../../../../translated_images/bg/1.cc07a5cbe114ad1d.png) ✅ **Време за експеримент**: Опитайте да зададете други наследяеми свойства на ``, като `color`, `line-height` или `text-align`. Какво се случва с вашия заглавен елемент и други елементи? @@ -332,7 +332,7 @@ h1 { **Ето HTML структурата за всяко растение:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ flowchart LR Ще създадете нежни отблясъци, които симулират как светлината се отразява от стъклени повърхности. Този подход е подобен на техниката на ренесансови художници като Ян ван Ейк, които използвали светлина и отражения, за да направят изрисуваното стъкло триизмерно. Ето какво трябва да постигнете: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.bg.png) +![finished terrarium](../../../../translated_images/bg/terrarium-final.2f07047ffc597d0a.png) **Вашата задача:** - **Създайте** нежни бели или светли овални форми за отражения върху стъклото diff --git a/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md index eb7273982..e9e31b6df 100644 --- a/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/bg/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Тествайте функционалността: 5: Student Завършете терариума: 5: Student ``` -![DOM и замикване](../../../../translated_images/webdev101-js.10280393044d7eaa.bg.png) +![DOM и замикване](../../../../translated_images/bg/webdev101-js.10280393044d7eaa.png) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) Добре дошли в един от най-ангажиращите аспекти на уеб разработката - правенето на нещата интерактивни! Document Object Model (DOM) е като мост между вашия HTML и JavaScript, и днес ще го използваме, за да вдъхнем живот на вашия терариум. Когато Тим Бернърс-Лий създава първия уеб браузър, той си представя уеб, където документите могат да бъдат динамични и интерактивни - DOM прави тази визия възможна. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Представяне на DOM дърво](../../../../translated_images/dom-tree.7daf0e763cbbba92.bg.png) +![Представяне на DOM дърво](../../../../translated_images/bg/dom-tree.7daf0e763cbbba92.png) > Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Разбиране на замикванията**: Замикванията са важна тема в JavaScript, и много разработчици ги използват години преди да разберат напълно всички теоретични аспекти. Днес се фокусираме върху практическото приложение - ще видите как замикванията естествено изникват докато изграждаме нашите интерактивни функции. Разбирането ще се развива докато виждате как те решават реални проблеми. -![Представяне на DOM дърво](../../../../translated_images/dom-tree.7daf0e763cbbba92.bg.png) +![Представяне на DOM дърво](../../../../translated_images/bg/dom-tree.7daf0e763cbbba92.png) > Представяне на DOM и HTML маркировката, която го реферира. От [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **Поддръжка на различни устройства**: Работи и на десктоп, и на мобилни устройства - **Осъзнатост за производителност**: Без изтичания на памет или излишни изчисления -![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.bg.png) +![finished terrarium](../../../../translated_images/bg/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/bg/3-terrarium/solution/README.md b/translations/bg/3-terrarium/solution/README.md index 59af77dac..39188996b 100644 --- a/translations/bg/3-terrarium/solution/README.md +++ b/translations/bg/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Малка медитация с влачене и пускане на код. С малко HTML, JS и CSS можете да създадете уеб интерфейс, да го стилизирате и да добавите интеракция. -![моето терариумче](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.bg.png) +![моето терариумче](../../../../translated_images/bg/screenshot_gray.0c796099a1f9f25e.png) ## Кредити diff --git a/translations/bg/5-browser-extension/1-about-browsers/README.md b/translations/bg/5-browser-extension/1-about-browsers/README.md index 9b188dbde..539d5d095 100644 --- a/translations/bg/5-browser-extension/1-about-browsers/README.md +++ b/translations/bg/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Отстраняване на проблеми: 4: Student Удържане на потребителското изживяване: 5: Student ``` -![Бележка за браузър](../../../../translated_images/browser.60317c9be8b7f84a.bg.jpg) +![Бележка за браузър](../../../../translated_images/bg/browser.60317c9be8b7f84a.jpg) > Бележка от [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Пред-лекционен тест @@ -77,7 +77,7 @@ mindmap ✅ **Малко история**: Първият браузър се казваше 'WorldWideWeb' и беше създаден от сър Тимъти Бърнърс-Лий през 1990 г. -![ранни браузъри](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.bg.jpg) +![ранни браузъри](../../../../translated_images/bg/earlybrowsers.d984b711cdf3a42d.jpg) > Някои ранни браузъри, чрез [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Как браузърите обработват уеб съдържание @@ -194,7 +194,7 @@ quadrantChart Разбирането на процеса по инсталация на разширения помага да предвидите потребителското изживяване при инсталиране на вашето разширение. Този процес е стандартизиран във всички съвременни браузъри, с малки различия в дизайна на интерфейса. -![екранна снимка на браузъра Edge, показваща отворената страница edge://extensions и отворено меню с настройки](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.bg.png) +![екранна снимка на браузъра Edge, показваща отворената страница edge://extensions и отворено меню с настройки](../../../../translated_images/bg/install-on-edge.d68781acaf0b3d3d.png) > **Важно**: Уверете се, че сте активирали режим за разработчици и разрешили разширения от други магазини, когато тествате собствените си разширения. @@ -308,10 +308,10 @@ project-root/ ### Преглед на изгледите на разширението **Екран за настройка** - Конфигурация при първото използване: -![екранна снимка на завършеното разширение, отворено в браузър, показваща форма с полета за име на регион и API ключ.](../../../../translated_images/1.b6da8c1394b07491.bg.png) +![екранна снимка на завършеното разширение, отворено в браузър, показваща форма с полета за име на регион и API ключ.](../../../../translated_images/bg/1.b6da8c1394b07491.png) **Екран с резултати** - Показване на данните за въглеродния отпечатък: -![екранна снимка на завършеното разширение, показваща стойности за въглеродно потребление и процент изкопаеми горива за региона US-NEISO.](../../../../translated_images/2.1dae52ff08042246.bg.png) +![екранна снимка на завършеното разширение, показваща стойности за въглеродно потребление и процент изкопаеми горива за региона US-NEISO.](../../../../translated_images/bg/2.1dae52ff08042246.png) ### Изграждане на формата за конфигурация diff --git a/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md index 4a83fec2b..178cc78ca 100644 --- a/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/bg/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Премахване на запазените данни ClearStorage --> FirstTime: Връщане към настройките ``` -![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.bg.png) +![Local storage pane](../../../../translated_images/bg/localstorage.472f8147b6a3f8d1.png) > ⚠️ **Съображения за сигурността**: В продукционни приложения съхраняването на API ключове в LocalStorage представлява риск за сигурността, защото JavaScript може да има достъп до тези данни. За учебни цели този подход е приемлив, но реалните приложения трябва да използват защитено сървърно съхранение за чувствителни данни. diff --git a/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md index d981f03ce..7b52873da 100644 --- a/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/bg/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR Нека опитаме. Отворете уебсайт (Microsoft.com е добър пример) и кликнете бутона 'Record'. Сега обновете страницата и гледайте профайлъра как улавя всичко, което се случва. Когато спрете записа, ще видите детайлно разграфяване на това как браузърът „изпълнява скриптове“, „рендерира“ и „рисува“ сайта. Това ми напомня за начина, по който мисия контрол следи всяка система по време на изстрелване на ракета - получавате данни в реално време за точно какво и кога се случва. -![Edge профайлър](../../../../translated_images/profiler.5a4a62479c5df01c.bg.png) +![Edge профайлър](../../../../translated_images/bg/profiler.5a4a62479c5df01c.png) ✅ Документацията на [Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) има много повече подробности, ако искате да навлезете по-дълбоко @@ -133,11 +133,11 @@ flowchart LR Вземете моментна снимка на производителността на страницата, като изберете част от хронологията на профила и погледнете обобщения прозорец: -![Edge snapshot](../../../../translated_images/snapshot.97750180ebcad737.bg.png) +![Edge snapshot](../../../../translated_images/bg/snapshot.97750180ebcad737.png) Проверете прозореца с журнал на събития, за да видите дали някое събитие е продължило повече от 15 ms: -![Edge журнал на събития](../../../../translated_images/log.804026979f3707e0.bg.png) +![Edge журнал на събития](../../../../translated_images/bg/log.804026979f3707e0.png) ✅ Запознайте се с профайлъра! Отворете developer tools на този сайт и вижте дали има тесни места. Кой е най-бавно зареждащият се ресурс? Най-бързият? diff --git a/translations/bg/5-browser-extension/README.md b/translations/bg/5-browser-extension/README.md index dc2f69139..3b060c331 100644 --- a/translations/bg/5-browser-extension/README.md +++ b/translations/bg/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### Кредити -![зелено браузър разширение](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![зелено браузър разширение](../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.png) ## Кредити diff --git a/translations/bg/5-browser-extension/solution/README.md b/translations/bg/5-browser-extension/solution/README.md index 7fb5c2097..fab23a95f 100644 --- a/translations/bg/5-browser-extension/solution/README.md +++ b/translations/bg/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използвайки API на tmrow за CO2 Signal, създайте разширение за браузър, което да ви напомня директно в браузъра за натовареността на електрическата мрежа във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация. -![екранна снимка на разширението](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението](../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![инсталиране](../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната натовареност на вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.es.md b/translations/bg/5-browser-extension/solution/translation/README.es.md index c79b398ee..d1416c952 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.es.md +++ b/translations/bg/5-browser-extension/solution/translation/README.es.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използвайки API за CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация. -![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.bg.png) +![екранна снимка на разширението](../../../../../translated_images/bg/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.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.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.bg.png) +![инсталиране](../../../../../translated_images/bg/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион и да ви даде индикатор за подходящите дейности с високо енергийно потребление. Концепцията зад тази система с „точки“ ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.fr.md b/translations/bg/5-browser-extension/solution/translation/README.fr.md index 4590dd26b..03f36b0eb 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.fr.md +++ b/translations/bg/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използвайки API-то на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създайте разширение за браузър, което да ви напомня директно в браузъра за потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация. -![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението](../../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![инсталация](../../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширенията на браузъра трябва да се промени, за да отрази потреблението на енергия във вашия регион. Това ще ви даде индикатор за енергоемките дейности, които е подходящо да извършвате. Концепцията зад тази система с 'точки' ми беше вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.hi.md b/translations/bg/5-browser-extension/solution/translation/README.hi.md index 6234552fa..25fbba14a 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.hi.md +++ b/translations/bg/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използване на API на CO2 Signal от tmrow за проследяване на потреблението на електроенергия, създаване на браузър разширение, което да ви напомня колко натоварено е потреблението на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате решения за вашите дейности въз основа на тази информация. -![Скрийншот на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![Скрийншот на разширението](../../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![Инсталиране](../../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на браузър разширението трябва да се промени, за да отразява потреблението на енергия във вашия регион и да ви даде индикатор за това кои енергоемки дейности са подходящи за изпълнение. Концепцията за тази система с „точка“ ми беше вдъхновена от [Energy Lollipop Extension](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.it.md b/translations/bg/5-browser-extension/solution/translation/README.it.md index 45207a911..f8439df6a 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.it.md +++ b/translations/bg/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ще използваме API-то Signal CO2 на tmrow, за да следим потреблението на електричество и да създадем разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електричество във вашия регион. Използването на това специално разширение ще ви помогне да оцените дейностите си въз основа на тази информация. -![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението](../../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.png) ## Начало @@ -31,7 +31,7 @@ npm run build За да го инсталирате в Edge, използвайте менюто с "три точки" в горния десен ъгъл на браузъра, за да намерите панела за разширения. Ако не е активиран, включете Режим за разработчици (в долния ляв ъгъл). Изберете "Зареди разархивирано", за да добавите ново разширение. Отворете папката "dist" в подканата и разширението ще бъде заредено. За да го използвате, ще ви е необходим API ключ за CO2 Signal API (можете да го [получите тук чрез имейл](https://www.co2signal.com/) - въведете своя имейл в полето на тази страница) и [код за вашия регион](http://api.electricitymap.org/v3/zones), съответстващ на [електрическата карта](https://www.electricitymap.org/map) (например за Бостън, "US-NEISO"). -![инсталация](../../../../../translated_images/install-on-edge.78634f02842c4828.bg.png) +![инсталация](../../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийното потребление на региона и да предостави насоки за това кои дейности с висока енергийна консумация са подходящи за изпълнение. Концепцията зад тази система с "точки" е вдъхновена от [разширението Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.ja.md b/translations/bg/5-browser-extension/solution/translation/README.ja.md index f999a5937..bd546ef37 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.ja.md +++ b/translations/bg/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Създайте разширение за браузър, което използва API на CO2 Signal от tmrow, за да следи потреблението на енергия във вашия регион и да го показва като напомняне директно в браузъра. Това разширение може да се използва, за да вземате информирани решения относно вашите дейности въз основа на тази информация. -![екранна снимка на разширението](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението](../../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![инсталиране](../../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветна точка, която се показва в лентата на разширенията на браузъра, ще се променя, за да отразява енергийното потребление във вашия регион. Това ще ви помогне да определите кои дейности, изискващи енергия, са подходящи в момента. Концепцията за тази „точкова“ система е вдъхновена от [Energy Lollipop extension](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/solution/translation/README.ms.md b/translations/bg/5-browser-extension/solution/translation/README.ms.md index cf4355274..59ffb680a 100644 --- a/translations/bg/5-browser-extension/solution/translation/README.ms.md +++ b/translations/bg/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използвайки API на CO2 Signal от tmrow за проследяване на електрическата консумация, създайте разширение за браузър, което да ви предупреждава за нивото на електрическа консумация във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения относно вашите дейности въз основа на тази информация. -![екранна снимка на разширението за браузър](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението за браузър](../../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![изтегляне](../../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра ще се променя, за да отразява енергийната консумация във вашия регион и ще ви дава насоки за подходящи дейности. Концепцията зад системата с „точки“ беше вдъхновена от [разширението за браузър Energy Lollipop](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/5-browser-extension/start/README.md b/translations/bg/5-browser-extension/start/README.md index 85a2c9bbc..3f1c57953 100644 --- a/translations/bg/5-browser-extension/start/README.md +++ b/translations/bg/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Използвайки API на tmrow за CO2 Signal, можете да следите електрическата консумация и да създадете разширение за браузър, което да ви напомня директно в браузъра колко интензивно е използването на електроенергия във вашия регион. Използването на това разширение ще ви помогне да вземате информирани решения за вашите дейности въз основа на тази информация. -![екранна снимка на разширението](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.bg.png) +![екранна снимка на разширението](../../../../translated_images/bg/extension-screenshot.0e7f5bfa110e92e3.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.78634f02842c4828.bg.png) +![инсталиране](../../../../translated_images/bg/install-on-edge.78634f02842c4828.png) След като въведете API ключа и региона в интерфейса на разширението, цветната точка в лентата на разширението на браузъра трябва да се промени, за да отрази енергийната консумация във вашия регион. Тя ще ви даде насоки за това кои дейности, изискващи повече енергия, са подходящи за изпълнение. Концепцията зад тази система с „точка“ ми беше вдъхновена от [Energy Lollipop разширението](https://energylollipop.com/) за емисиите в Калифорния. diff --git a/translations/bg/6-space-game/2-drawing-to-canvas/README.md b/translations/bg/6-space-game/2-drawing-to-canvas/README.md index 06b205b7c..16f70fef4 100644 --- a/translations/bg/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/bg/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![мрежата на canvas](../../../../translated_images/canvas_grid.5f209da785ded492.bg.png) +![мрежата на canvas](../../../../translated_images/bg/canvas_grid.5f209da785ded492.png) > Изображение от [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) За да рисувате върху canvas елемента, ще следвате същия тристепенен процес, който образува основата на цялата canvas графика. След като го направите няколко пъти, това ще стане втора природа: @@ -323,11 +323,11 @@ flowchart TD - Геройски кораб - ![Геройски кораб](../../../../translated_images/player.dd24c1afa8c71e9b.bg.png) + ![Геройски кораб](../../../../translated_images/bg/player.dd24c1afa8c71e9b.png) - 5*5 чудовища - ![Чудовище](../../../../translated_images/enemyShip.5df2a822c16650c2.bg.png) + ![Чудовище](../../../../translated_images/bg/enemyShip.5df2a822c16650c2.png) ### Препоръчителни стъпки за започване на разработка @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Крайният резултат трябва да изглежда така: -![Черноекран с герой и 5*5 чудовища](../../../../translated_images/partI-solution.36c53b48c9ffae2a.bg.png) +![Черноекран с герой и 5*5 чудовища](../../../../translated_images/bg/partI-solution.36c53b48c9ffae2a.png) ## Решение diff --git a/translations/bg/6-space-game/5-keeping-score/README.md b/translations/bg/6-space-game/5-keeping-score/README.md index 9186cd78f..3075219d1 100644 --- a/translations/bg/6-space-game/5-keeping-score/README.md +++ b/translations/bg/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Система за точкуване**: Всеки унищожен вражески кораб дава 100 точки (кръглите числа са по-лесни за умствена аритметика от играчите). Резултатът се показва в долния ляв ъгъл. -- **Брояч животи**: Вашият герой започва с три живота - стандарт, установен от ранните аркадни игри за балансиране на предизвикателството с играбилността. Всяко сблъскване с враг отнема един живот. Ще показваме оставащите животи в долния десен ъгъл с икони на кораби ![life image](../../../../translated_images/life.6fb9f50d53ee0413.bg.png). +- **Брояч животи**: Вашият герой започва с три живота - стандарт, установен от ранните аркадни игри за балансиране на предизвикателството с играбилността. Всяко сблъскване с враг отнема един живот. Ще показваме оставащите животи в долния десен ъгъл с икони на кораби ![life image](../../../../translated_images/bg/life.6fb9f50d53ee0413.png). ## Да започваме да градим! diff --git a/translations/bg/7-bank-project/1-template-route/README.md b/translations/bg/7-bank-project/1-template-route/README.md index 4026aa478..0bdbc56ea 100644 --- a/translations/bg/7-bank-project/1-template-route/README.md +++ b/translations/bg/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Използването на `history.pushState` създава нови записи в историята на браузъра. Можете да проверите това, като задържите *бутона за назад* на браузъра, той трябва да покаже нещо такова: -![Скрийншот на историята на навигация](../../../../translated_images/history.7fdabbafa521e064.bg.png) +![Скрийншот на историята на навигация](../../../../translated_images/bg/history.7fdabbafa521e064.png) Ако опитате да кликнете няколко пъти върху бутона назад, ще видите, че текущият URL се променя и историята се обновява, но се показва все същият шаблон. diff --git a/translations/bg/7-bank-project/2-forms/README.md b/translations/bg/7-bank-project/2-forms/README.md index 36a9feb98..73b3ae3dc 100644 --- a/translations/bg/7-bank-project/2-forms/README.md +++ b/translations/bg/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. Наблюдавайте промените в адресната лента на браузъра 3. Забележете как страницата се презарежда и данните се появяват в URL адреса -![Екранна снимка на промяната в URL на браузъра след кликване на бутона Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca.bg.png) +![Екранна снимка на промяната в URL на браузъра след кликване на бутона Register](../../../../translated_images/bg/click-register.e89a30bf0d4bc9ca.png) ### Сравнение на HTTP методите @@ -346,7 +346,7 @@ graph TD 2. **Натиснете** бутона „Create Account“ 3. **Наблюдавайте** отговора от сървъра в браузъра си -![Прозорец на браузър на адрес localhost:5000/api/accounts, показващ JSON низ с потребителски данни](../../../../translated_images/form-post.61de4ca1b964d91a.bg.png) +![Прозорец на браузър на адрес localhost:5000/api/accounts, показващ JSON низ с потребителски данни](../../../../translated_images/bg/form-post.61de4ca1b964d91a.png) **Какво трябва да виждате:** - **Браузърът пренасочва** към URL адреса на API endpoint-а @@ -609,7 +609,7 @@ async function register() { 3. **Натиснете** "Create Account" 4. **Проследете** съобщенията в конзолата и обратната връзка към потребителя -![Screenshot showing log message in the browser console](../../../../translated_images/browser-console.efaf0b51aaaf6778.bg.png) +![Screenshot showing log message in the browser console](../../../../translated_images/bg/browser-console.efaf0b51aaaf6778.png) **Какво трябва да видите:** - **Появява се състояние на зареждане** на бутонът за изпращане @@ -783,7 +783,7 @@ input:focus:invalid { 3. **Опитайте** специални символи в полето за потребителско име 4. **Въведете** отрицателна стойност в баланса -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/validation-error.8bd23e98d416c22f.bg.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/bg/validation-error.8bd23e98d416c22f.png) **Какво ще забележите:** - **Браузърът показва** вградени съобщения за валидация @@ -943,7 +943,7 @@ timeline Ето един пример как може да изглежда финалната страница за вход след малко стилизиране: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.bg.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/bg/result.96ef01f607bf856a.png) ## Квиз след лекцията diff --git a/translations/bg/7-bank-project/3-data/README.md b/translations/bg/7-bank-project/3-data/README.md index 19ac273f2..548f67366 100644 --- a/translations/bg/7-bank-project/3-data/README.md +++ b/translations/bg/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Връща пълната HTML страница Browser->>User: Показва новата страница (мигане/презареждане) ``` -![Работен процес на обновяване в многостранично приложение](../../../../translated_images/mpa.7f7375a1a2d4aa77.bg.png) +![Работен процес на обновяване в многостранично приложение](../../../../translated_images/bg/mpa.7f7375a1a2d4aa77.png) **Защо този подход беше тромав:** - Всяко кликване означаваше изграждане на цялата страница отново @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Актуализира специфични елементи на страницата Browser->>User: Показва актуализирано съдържание (без презареждане) ``` -![Работен процес на обновяване в едностранично приложение](../../../../translated_images/spa.268ec73b41f992c2.bg.png) +![Работен процес на обновяване в едностранично приложение](../../../../translated_images/bg/spa.268ec73b41f992c2.png) **Защо SPA приложенията се усещат толкова добре:** - Обновяват се само частите, които наистина са се променили (умно, нали?) @@ -516,7 +516,7 @@ if (data.error) { Сега, когато тествате с невалидна сметка, ще видите полезно съобщение за грешка директно на страницата! -![Екранна снимка, показваща съобщението за грешка по време на влизане](../../../../translated_images/login-error.416fe019b36a6327.bg.png) +![Екранна снимка, показваща съобщението за грешка по време на влизане](../../../../translated_images/bg/login-error.416fe019b36a6327.png) #### Стъпка 4: Включване на достъпността @@ -950,7 +950,7 @@ timeline Ето как може да изглежда добре оформено табло: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.bg.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/bg/screen2.123c82a831a1d14a.png) Не се чувствайте длъжни да го копирате точно – използвайте го за вдъхновение и го направете свое! diff --git a/translations/bg/7-bank-project/4-state-management/README.md b/translations/bg/7-bank-project/4-state-management/README.md index 59e89e90f..77c36435c 100644 --- a/translations/bg/7-bank-project/4-state-management/README.md +++ b/translations/bg/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap Вместо да се лутаме безцелно, ще създадем **централизирана система за управление на състоянието**. Представете си я като един наистина организиран човек, който отговаря за цялата важна информация: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.bg.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/bg/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline Ето примерен резултат след завършване на задачата: -![Екранна снимка на примерен диалог „Добавяне на транзакция“](../../../../translated_images/dialog.93bba104afeb79f1.bg.png) +![Екранна снимка на примерен диалог „Добавяне на транзакция“](../../../../translated_images/bg/dialog.93bba104afeb79f1.png) --- diff --git a/translations/bg/7-bank-project/4-state-management/assignment.md b/translations/bg/7-bank-project/4-state-management/assignment.md index b3ec8abb8..1f0e0933a 100644 --- a/translations/bg/7-bank-project/4-state-management/assignment.md +++ b/translations/bg/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **Очакван резултат:** След завършване на това задание, вашето банково приложение трябва да има напълно функционална функция "Добавяне на транзакция", която изглежда и работи професионално: -![Снимка на примерен диалог "Добавяне на транзакция"](../../../../translated_images/dialog.93bba104afeb79f1.bg.png) +![Снимка на примерен диалог "Добавяне на транзакция"](../../../../translated_images/bg/dialog.93bba104afeb79f1.png) ## Тестване на вашата имплементация diff --git a/translations/bg/7-bank-project/README.md b/translations/bg/7-bank-project/README.md index 73b9d2756..0f1cd8b52 100644 --- a/translations/bg/7-bank-project/README.md +++ b/translations/bg/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: В този проект ще научите как да създадете измислена банка. Тези уроци включват инструкции за това как да изградите уеб приложение, да създадете маршрути, да изградите форми, да управлявате състоянието и да извличате данни от API, от който можете да получите данните на банката. -| ![Екран1](../../../translated_images/screen1.baccbba0f1f93364.bg.png) | ![Екран2](../../../translated_images/screen2.123c82a831a1d14a.bg.png) | +| ![Екран1](../../../translated_images/bg/screen1.baccbba0f1f93364.png) | ![Екран2](../../../translated_images/bg/screen2.123c82a831a1d14a.png) | |--------------------------------|--------------------------------| ## Уроци diff --git a/translations/bg/8-code-editor/1-using-a-code-editor/README.md b/translations/bg/8-code-editor/1-using-a-code-editor/README.md index dc82cc9b7..662ca577d 100644 --- a/translations/bg/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/bg/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev предоставя тези възможности в браузъ След зареждането ще видите чисто и приветливо работно пространство, предназначено да ви държи фокусирани върху най-важното – вашия код! -![Дефолтен интерфейс на VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.bg.png) +![Дефолтен интерфейс на VSCode.dev](../../../../translated_images/bg/default-vscode-dev.5d06881d65c1b323.png) **Ето обиколката на околността:** - **Лента с активности** (ляво): Основната навигация с Explorer 📁, Търсене 🔍, Source Control 🌿, Разширения 🧩 и Настройки ⚙️ @@ -229,7 +229,7 @@ flowchart TB 1. Отидете на [vscode.dev](https://vscode.dev), ако още не сте там 2. Потърсете бутона "Open Remote Repository" на началния екран и натиснете - ![Отваряне на отдалечено хранилище](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.bg.png) + ![Отваряне на отдалечено хранилище](../../../../translated_images/bg/open-remote-repository.bd9c2598b8949e7f.png) 3. Поставете произволен URL на GitHub хранилище (опитайте този: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Натиснете Enter и гледайте магията да се случи! @@ -238,7 +238,7 @@ flowchart TB Искате да се почувствате като вълшебник в кодирането? Опитайте клавишната комбинация: Ctrl+Shift+P (или Cmd+Shift+P на Mac) да отворите Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.bg.png) +![Command Palette](../../../../translated_images/bg/palette-menu.4946174e07f42622.png) **Command Palette е като търсачка за всичко, което може да се направи:** - Напишете "open remote" и ще ви намери функцията за отваряне на хранилища @@ -300,7 +300,7 @@ flowchart TB 3. Въведете името на файла, включително подходящото разширение (`style.css`, `script.js`, `index.html`) 4. Натиснете Enter, за да създадете файла -![Създаване на нов файл](../../../../translated_images/create-new-file.2814e609c2af9aeb.bg.png) +![Създаване на нов файл](../../../../translated_images/bg/create-new-file.2814e609c2af9aeb.png) **Правила за именуване:** - Използвайте описателни имена, които показват предназначението на файла @@ -318,7 +318,7 @@ flowchart TB 2. Започнете да пишете и гледайте как VSCode.dev ви помага с цветове, предложения и откриване на грешки 3. Запазвайте работата си с Ctrl+S (Windows/Linux) или Cmd+S (Mac) – въпреки че имате и автоматично записване! -![Редактиране на файлове във VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.bg.png) +![Редактиране на файлове във VSCode.dev](../../../../translated_images/bg/edit-a-file.52c0ee665ef19f08.png) **Готините неща, които се случват докато кодирате:** - Вашият код се оцветява красиво, така че да е лесен за четене @@ -339,7 +339,7 @@ flowchart TB 2. Променените файлове се появяват в секцията „Changes“ 3. Цветовото кодиране показва видовете промени: зелен за добавки, червен за изтривания -![Преглед на промени в Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.bg.png) +![Преглед на промени в Source Control](../../../../translated_images/bg/working-tree.c58eec08e6335c79.png) **Записване на работата (процес на комит):** @@ -431,7 +431,7 @@ mindmap 2. Разгледайте или търсете нещо конкретно 3. Кликнете върху всичко, което ви се струва интересно, за да научите повече -![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.bg.png) +![Extension marketplace interface](../../../../translated_images/bg/extensions.eca0e0c7f59a10b5.png) **Какво ще видите там:** @@ -484,7 +484,7 @@ mindmap 3. Изберете "Extension Settings" от менюто 4. Настройте нещата, докато се почувствате комфортно с вашия работен процес -![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.bg.png) +![Customizing extension settings](../../../../translated_images/bg/extension-settings.21c752ae4f4cdb78.png) **Често срещани неща, които може да коригирате:** - Как се форматира вашият код (таби срещу интервали, дължина на реда и т.н.) diff --git a/translations/bg/8-code-editor/1-using-a-code-editor/assignment.md b/translations/bg/8-code-editor/1-using-a-code-editor/assignment.md index 6a7f9c4a3..b82ca994e 100644 --- a/translations/bg/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/bg/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.c886796d800e8056.bg.png) +![Създаване на начален файл в GitHub](../../../../translated_images/bg/new-file-github.com.c886796d800e8056.png) **Ето какво постигате с тази начална настройка:** - **Създавате** правилна HTML5 структура на документа със семантични елементи @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **Индикатор за успех**: Трябва да видите файловете на проекта си в страничната лента Explorer и `index.html`, достъпен за редактиране в основната област на редактора. -![Проектът е зареден в VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.bg.png) +![Проектът е зареден в VSCode.dev](../../../../translated_images/bg/project-on-vscode.dev.e79815a9a95ee7fe.png) **Какво ще видите в интерфейса:** - **Странична лента Explorer**: **Показва** файловете и структурата на папките на вашето хранилище @@ -448,7 +448,7 @@ li:before { **Незабавни резултати след инсталацията:** След като CodeSwing е инсталиран, ще видите предварителен преглед на живо на вашия уебсайт за автобиография, който се появява в редактора. Това ви позволява да видите точно как изглежда вашият сайт, докато правите промени. -![Разширението CodeSwing показва предварителен преглед на живо](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.bg.png) +![Разширението CodeSwing показва предварителен преглед на живо](../../../../translated_images/bg/after-codeswing-extension-pb.0ebddddcf73b5509.png) **Разбиране на подобрения интерфейс:** - **Разделен изглед**: **Показва** вашия код от едната страна и предварителния преглед от другата diff --git a/translations/bg/9-chat-project/README.md b/translations/bg/9-chat-project/README.md index d02f611eb..ed29af36f 100644 --- a/translations/bg/9-chat-project/README.md +++ b/translations/bg/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Ето как ще изглежда завършеният ви проект: -![Интерфейс на чат приложение, показващ разговор между потребител и AI асистент](../../../translated_images/screenshot.0a1ee0d123df681b.bg.png) +![Интерфейс на чат приложение, показващ разговор между потребител и AI асистент](../../../translated_images/bg/screenshot.0a1ee0d123df681b.png) ## 🗺️ Вашето пътешествие в развитието на AI приложения @@ -189,7 +189,7 @@ mindmap ``` **Основен принцип**: Разработката на AI приложения комбинира традиционни умения за уеб разработка с интеграция на AI услуги, създавайки интелигентни приложения, които се усещат естествени и отзивчиви за потребителите. -![Интерфейс на GitHub Models AI Playground с избор на модел и зона за тестване](../../../translated_images/playground.d2b927122224ff8f.bg.png) +![Интерфейс на GitHub Models AI Playground с избор на модел и зона за тестване](../../../translated_images/bg/playground.d2b927122224ff8f.png) **Ето какво прави playground толкова полезен:** - **Пробвайте** различни AI модели като GPT-4o-mini, Claude и други (всички безплатни!) @@ -199,7 +199,7 @@ mindmap След като се поиграете малко, просто кликнете на таб „Code“ и изберете езика си за програмиране, за да получите кода, който ще ви трябва. -![Избор в Playground, показващ опции за генериране на код за различни програмни езици](../../../translated_images/playground-choice.1d23ba7d407f4758.bg.png) +![Избор в Playground, показващ опции за генериране на код за различни програмни езици](../../../translated_images/bg/playground-choice.1d23ba7d407f4758.png) ## Настройване на Python бекенд интеграция @@ -2353,14 +2353,14 @@ mindmap - **Отидете** до [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Кликнете** "Use this template" в горния десен ъгъл (уверете се, че сте влезли в GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/template.67ad477109d29a2b.bg.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/bg/template.67ad477109d29a2b.png) **Стъпка 2: Стартиране на Codespaces** - **Отворете** новосъздадения си репозиториум - **Кликнете** зеления бутон "Code" и изберете "Codespaces" - **Изберете** "Create codespace on main" за стартиране на развойната си среда -![Create codespace interface with options for launching cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.bg.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/bg/codespace.bcecbdf5d2747d3d.png) **Стъпка 3: Конфигуриране на средата** След като вашият Codespace се зареди, ще имате достъп до: diff --git a/translations/bg/README.md b/translations/bg/README.md index ba9761721..5f7aa4438 100644 --- a/translations/bg/README.md +++ b/translations/bg/README.md @@ -52,13 +52,13 @@ CO_OP_TRANSLATOR_METADATA: Посетете [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), за да започнете! -![Background](../../translated_images/background.148a8d43afde5730.bg.png) +![Background](../../translated_images/bg/background.148a8d43afde5730.png) - Уроци, обхващащи всичко от основите до RAG. - Взаимодействайте с исторически личности чрез GenAI и нашето придружаващо приложение. - Забавен и завладяващ разказ, ще пътешествате във времето! -![character](../../translated_images/character.5c0dd8e067ffd693.bg.png) +![character](../../translated_images/bg/character.5c0dd8e067ffd693.png) Всеки урок включва задача за изпълнение, проверка на знанията и предизвикателство, които ще ви упътят в изучаването на теми като: - Подканяне и инженерство на подкани @@ -94,7 +94,7 @@ CO_OP_TRANSLATOR_METADATA: В своето копие на хранилището кликнете бутона **Code** и изберете **Open with Codespaces**. Това ще създаде нов Codespace, в който да работите. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.bg.png) +![Codespace](../../translated_images/bg/createcodespace.0238bbf4d7a8d955.png) #### Стартиране на учебната програма локално на компютъра diff --git a/translations/bg/for-teachers.md b/translations/bg/for-teachers.md index eacda7a78..eccc71977 100644 --- a/translations/bg/for-teachers.md +++ b/translations/bg/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud има ограничена поддръжка за Common Cartridge. Предпочитайте файла за Moodle по-горе, който може да бъде качен и в Canvas. - След импортиране прегледайте модулите, крайните срокове и настройките на тестовете, за да съответстват на графика на вашия семестър. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.bg.png) +![Moodle](../../translated_images/bg/moodle.94eb93d714a50cb2.png) > Учебната програма в класна стая на Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.bg.png) +![Canvas](../../translated_images/bg/canvas.fbd605ff8e5b8aff.png) > Учебната програма в Canvas ### Използване на хранилището директно (без Classroom) diff --git a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 201dc5220..b5185fda0 100644 --- a/translations/bn/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/bn/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.d6e3f98e61ac4bff.bn.png) +![প্রোগ্রামিং পরিচিতি](../../../../translated_images/bn/webdev101-programming.d6e3f98e61ac4bff.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/1-getting-started-lessons/2-github-basics/README.md b/translations/bn/1-getting-started-lessons/2-github-basics/README.md index 1ed239438..0b1c91032 100644 --- a/translations/bn/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/bn/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: আমরা একসাথে এই যাত্রা শুরু করব, এক ধাপে এক ধাপে। কোনো তাড়াহুড়ো নেই, কোনো চাপ নেই – শুধু তুমি, আমি, এবং কিছু দারুণ টুল যা তোমার নতুন সেরা বন্ধু হতে চলেছে! -![গিটহাব পরিচিতি](../../../../translated_images/webdev101-github.8846d7971abef6f9.bn.png) +![গিটহাব পরিচিতি](../../../../translated_images/bn/webdev101-github.8846d7971abef6f9.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -588,7 +588,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.5085c48d666ead57.bn.png) +![রিপো লোকালি কপি করুন](../../../../translated_images/bn/clone_repo.5085c48d666ead57.png) কোড কপি করার বিভিন্ন উপায় রয়েছে। একটি উপায় হলো রিপোজিটরির বিষয়বস্তু "ক্লোন" করা, HTTPS, SSH, অথবা GitHub CLI (কমান্ড লাইন ইন্টারফেস) ব্যবহার করে। diff --git a/translations/bn/1-getting-started-lessons/3-accessibility/README.md b/translations/bn/1-getting-started-lessons/3-accessibility/README.md index afd171283..1679c712f 100644 --- a/translations/bn/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/bn/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করা -![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.bn.png) +![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/bn/webdev101-a11y.8ef3025c858d897a.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -756,12 +756,12 @@ pie title "Common ARIA Usage Patterns" **তথ্যপূর্ণ ছবি** - গুরুত্বপূর্ণ তথ্য প্রদান করে: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **ডেকোরেটিভ ছবি** - শুধুমাত্র ভিজ্যুয়াল, কোনো তথ্যমূলক মূল্য নেই: ```html - + ``` **ফাংশনাল ছবি** - বোতাম বা নিয়ন্ত্রণ হিসাবে কাজ করে: @@ -773,7 +773,7 @@ pie title "Common ARIA Usage Patterns" **জটিল ছবি** - চার্ট, ডায়াগ্রাম, ইনফোগ্রাফিক: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -813,7 +813,7 @@ pie title "Common ARIA Usage Patterns" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/bn/2-js-basics/1-data-types/README.md b/translations/bn/2-js-basics/1-data-types/README.md index c402647ac..adcc181a8 100644 --- a/translations/bn/2-js-basics/1-data-types/README.md +++ b/translations/bn/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বুনিয়াদি: ডেটা টাইপ -![জাভাস্ক্রিপ্টের বুনিয়াদি - ডেটা টাইপ](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.bn.png) +![জাভাস্ক্রিপ্টের বুনিয়াদি - ডেটা টাইপ](../../../../translated_images/bn/webdev101-js-datatypes.4cc470179730702c.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/2-js-basics/2-functions-methods/README.md b/translations/bn/2-js-basics/2-functions-methods/README.md index 53e4c8a80..aa0212b7c 100644 --- a/translations/bn/2-js-basics/2-functions-methods/README.md +++ b/translations/bn/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বেসিক: মেথড এবং ফাংশন -![জাভাস্ক্রিপ্ট বেসিক - ফাংশন](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.bn.png) +![জাভাস্ক্রিপ্ট বেসিক - ফাংশন](../../../../translated_images/bn/webdev101-js-functions.be049c4726e94f8b.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/2-js-basics/3-making-decisions/README.md b/translations/bn/2-js-basics/3-making-decisions/README.md index cb838bcc1..c866e1b89 100644 --- a/translations/bn/2-js-basics/3-making-decisions/README.md +++ b/translations/bn/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের মৌলিক বিষয়: সিদ্ধান্ত গ্রহণ -![জাভাস্ক্রিপ্টের মৌলিক বিষয় - সিদ্ধান্ত গ্রহণ](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.bn.png) +![জাভাস্ক্রিপ্টের মৌলিক বিষয় - সিদ্ধান্ত গ্রহণ](../../../../translated_images/bn/webdev101-js-decisions.69e1b20f272dd1f0.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/bn/2-js-basics/4-arrays-loops/README.md b/translations/bn/2-js-basics/4-arrays-loops/README.md index f8254d1cf..1eb89e2e6 100644 --- a/translations/bn/2-js-basics/4-arrays-loops/README.md +++ b/translations/bn/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # জাভাস্ক্রিপ্টের বেসিক: অ্যারে এবং লুপ -![জাভাস্ক্রিপ্ট বেসিক - অ্যারে](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.bn.png) +![জাভাস্ক্রিপ্ট বেসিক - অ্যারে](../../../../translated_images/bn/webdev101-js-arrays.439d7528b8a29455.png) > স্কেচনোট করেছেন [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/bn/3-terrarium/1-intro-to-html/README.md b/translations/bn/3-terrarium/1-intro-to-html/README.md index d422e7dbd..78a7e6465 100644 --- a/translations/bn/3-terrarium/1-intro-to-html/README.md +++ b/translations/bn/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML পরিচিতি](../../../../translated_images/webdev101-html.4389c2067af68e98.bn.png) +![HTML পরিচিতি](../../../../translated_images/bn/webdev101-html.4389c2067af68e98.png) > স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে। @@ -88,7 +88,7 @@ HTML কোডে ডুব দেওয়ার আগে, আপনার ট 4. Explorer প্যানেলে, "New File" আইকনে ক্লিক করুন 5. আপনার ফাইলের নাম দিন `index.html` -![VS Code Explorer নতুন ফাইল তৈরি দেখাচ্ছে](../../../../translated_images/vs-code-index.e2986cf919471eb9.bn.png) +![VS Code Explorer নতুন ফাইল তৈরি দেখাচ্ছে](../../../../translated_images/bn/vs-code-index.e2986cf919471eb9.png) **অপশন ২: টার্মিনাল কমান্ড ব্যবহার করে** ```bash @@ -239,48 +239,48 @@ HTML-এ ছবি বিশেষ কারণ তারা "স্ব-বন
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/bn/3-terrarium/2-intro-to-css/README.md b/translations/bn/3-terrarium/2-intro-to-css/README.md index 96f44a509..e051616d2 100644 --- a/translations/bn/3-terrarium/2-intro-to-css/README.md +++ b/translations/bn/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS পরিচিতি](../../../../translated_images/webdev101-css.3f7af5991bf53a20.bn.png) +![CSS পরিচিতি](../../../../translated_images/bn/webdev101-css.3f7af5991bf53a20.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) আপনার HTML টেরারিয়ামটি কতটা সাধারণ দেখাচ্ছিল তা মনে আছে? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তর করি। @@ -205,7 +205,7 @@ body { আপনার ব্রাউজারের ডেভেলপার টুলস (F12) খুলুন, Elements ট্যাবে যান এবং আপনার `

` উপাদানটি পরীক্ষা করুন। আপনি দেখতে পাবেন এটি বডি থেকে ফন্ট ফ্যামিলি উত্তরাধিকার সূত্রে পেয়েছে: -![উত্তরাধিকার সূত্রে পাওয়া ফন্ট](../../../../translated_images/1.cc07a5cbe114ad1d.bn.png) +![উত্তরাধিকার সূত্রে পাওয়া ফন্ট](../../../../translated_images/bn/1.cc07a5cbe114ad1d.png) ✅ **পরীক্ষার সময়**: ``-তে `color`, `line-height`, বা `text-align` এর মতো অন্যান্য উত্তরাধিকারযোগ্য বৈশিষ্ট্য সেট করার চেষ্টা করুন। আপনার হেডিং এবং অন্যান্য উপাদানগুলোর কী হয়? @@ -409,7 +409,7 @@ Agent মোড ব্যবহার করে নিম্নলিখিত আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন যা কাচের পৃষ্ঠে আলো প্রতিফলিত করার অনুকরণ করে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে থ্রিডি দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো: -![শেষ টেরারিয়াম](../../../../translated_images/terrarium-final.2f07047ffc597d0a.bn.png) +![শেষ টেরারিয়াম](../../../../translated_images/bn/terrarium-final.2f07047ffc597d0a.png) **আপনার চ্যালেঞ্জ:** - **তৈরি করুন** সূক্ষ্ম সাদা বা হালকা রঙের ডিম্বাকৃতি আকৃতি কাচের প্রতিফলনের জন্য diff --git a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md index 626173b68..fd989c890 100644 --- a/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/bn/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM এবং একটি ক্লোজার](../../../../translated_images/webdev101-js.10280393044d7eaa.bn.png) +![DOM এবং একটি ক্লোজার](../../../../translated_images/bn/webdev101-js.10280393044d7eaa.png) > স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা ওয়েব ডেভেলপমেন্টের সবচেয়ে আকর্ষণীয় দিকগুলোর মধ্যে একটিতে আপনাকে স্বাগতম - জিনিসগুলোকে ইন্টারঅ্যাকটিভ করা! ডকুমেন্ট অবজেক্ট মডেল (DOM) আপনার HTML এবং জাভাস্ক্রিপ্টের মধ্যে একটি সেতুর মতো, এবং আজ আমরা এটি ব্যবহার করে আপনার টেরারিয়ামকে জীবন্ত করে তুলব। যখন টিম বার্নার্স-লি প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন, তিনি এমন একটি ওয়েবের কল্পনা করেছিলেন যেখানে ডকুমেন্টগুলো গতিশীল এবং ইন্টারঅ্যাকটিভ হতে পারে - DOM সেই স্বপ্নকে বাস্তবায়িত করে। @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba92.bn.png) +![DOM গাছের উপস্থাপনা](../../../../translated_images/bn/dom-tree.7daf0e763cbbba92.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 > 💡 **ক্লোজার বোঝা**: ক্লোজার জাভাস্ক্রিপ্টে একটি গুরুত্বপূর্ণ বিষয়, এবং অনেক ডেভেলপার এটি ব্যবহার করেন বছরের পর বছর ধরে তাত্ত্বিক দিকগুলো সম্পূর্ণরূপে বোঝার আগে। আজ, আমরা ব্যবহারিক প্রয়োগের উপর ফোকাস করছি - আপনি দেখবেন ক্লোজার কীভাবে আমাদের ইন্টারঅ্যাকটিভ বৈশিষ্ট্য তৈরি করার সময় স্বাভাবিকভাবে উদ্ভূত হয়। বাস্তব সমস্যাগুলো কীভাবে সমাধান করে তা দেখার সাথে সাথে আপনার বোঝাপড়া বিকশিত হবে। -![DOM গাছের উপস্থাপনা](../../../../translated_images/dom-tree.7daf0e763cbbba92.bn.png) +![DOM গাছের উপস্থাপনা](../../../../translated_images/bn/dom-tree.7daf0e763cbbba92.png) > DOM এবং HTML মার্কআপের একটি উপস্থাপনা যা এটি রেফারেন্স করে। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) থেকে @@ -447,7 +447,7 @@ function stopElementDrag() { - **ক্রস-ডিভাইস সাপোর্ট**: ডেস্কটপ এবং মোবাইলে কাজ করে - **পারফরম্যান্স সচেতন**: কোনো মেমোরি লিক বা অপ্রয়োজনীয় গণনা নেই -![সমাপ্ত টেরারিয়াম](../../../../translated_images/terrarium-final.0920f16e87c13a84.bn.png) +![সমাপ্ত টেরারিয়াম](../../../../translated_images/bn/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/bn/3-terrarium/solution/README.md b/translations/bn/3-terrarium/solution/README.md index b8b22b5f9..fb1b92eff 100644 --- a/translations/bn/3-terrarium/solution/README.md +++ b/translations/bn/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: একটি ছোট ড্র্যাগ এবং ড্রপ কোড-মেডিটেশন। সামান্য HTML, JS এবং CSS ব্যবহার করে আপনি একটি ওয়েব ইন্টারফেস তৈরি করতে পারেন, সেটিকে স্টাইল করতে পারেন এবং ইন্টারঅ্যাকশন যোগ করতে পারেন। -![আমার টেরারিয়াম](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.bn.png) +![আমার টেরারিয়াম](../../../../translated_images/bn/screenshot_gray.0c796099a1f9f25e.png) ## কৃতজ্ঞতা diff --git a/translations/bn/5-browser-extension/1-about-browsers/README.md b/translations/bn/5-browser-extension/1-about-browsers/README.md index 791702ef8..e6c47ab92 100644 --- a/translations/bn/5-browser-extension/1-about-browsers/README.md +++ b/translations/bn/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![ব্রাউজার স্কেচনোট](../../../../translated_images/browser.60317c9be8b7f84a.bn.jpg) +![ব্রাউজার স্কেচনোট](../../../../translated_images/bn/browser.60317c9be8b7f84a.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 ✅ **একটু ইতিহাস**: প্রথম ব্রাউজারের নাম ছিল 'ওয়ার্ল্ডওয়াইডওয়েব' এবং এটি ১৯৯০ সালে স্যার টিমোথি বার্নার্স-লির দ্বারা তৈরি করা হয়েছিল। -![প্রথম দিকের ব্রাউজার](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.bn.jpg) +![প্রথম দিকের ব্রাউজার](../../../../translated_images/bn/earlybrowsers.d984b711cdf3a42d.jpg) > কিছু প্রথম দিকের ব্রাউজার, [ক্যারেন ম্যাকগ্রেন](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) এর মাধ্যমে ### ব্রাউজার কীভাবে ওয়েব কন্টেন্ট প্রক্রিয়াকরণ করে @@ -198,7 +198,7 @@ quadrantChart এক্সটেনশন ইনস্টলেশন প্রক্রিয়া বোঝা আপনাকে ব্যবহারকারীদের অভিজ্ঞতা সম্পর্কে পূর্বাভাস দিতে সাহায্য করবে যখন তারা আপনার এক্সটেনশন ইনস্টল করবে। ইনস্টলেশন প্রক্রিয়া আধুনিক ব্রাউজারগুলোতে মানসম্মত, যদিও ইন্টারফেস ডিজাইনে কিছু পার্থক্য রয়েছে। -![Edge ব্রাউজারের স্ক্রিনশট যেখানে edge://extensions পেজ এবং সেটিংস মেনু খোলা রয়েছে](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.bn.png) +![Edge ব্রাউজারের স্ক্রিনশট যেখানে edge://extensions পেজ এবং সেটিংস মেনু খোলা রয়েছে](../../../../translated_images/bn/install-on-edge.d68781acaf0b3d3d.png) > **গুরুত্বপূর্ণ**: আপনার নিজের এক্সটেনশন পরীক্ষা করার সময় ডেভেলপার মোড চালু করুন এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমোদন করুন।