diff options
Diffstat (limited to 'files/ar/web/tutorials/index.html')
| -rw-r--r-- | files/ar/web/tutorials/index.html | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/files/ar/web/tutorials/index.html b/files/ar/web/tutorials/index.html new file mode 100644 index 0000000000..a552f18f6b --- /dev/null +++ b/files/ar/web/tutorials/index.html @@ -0,0 +1,217 @@ +--- +title: دروس +slug: Web/Tutorials +tags: + - CSS + - HTML + - MDN + - أساسيات الويب + - تدريب + - تصميم الويب + - تعليمات برمجية + - جافاسكربت JavaScript + - دليل + - مبتدئين +translation_of: Web/Tutorials +--- +<p dir="rtl">تقودك الروابط في هذه الصفحة إلى دروس ومواد تدريبيّة متنوعة. <strong>سواءً كنت في بداياتك، أو تتعلم الأساسيات، أو كنت مطوراً مُخضرماً، فستجد في هذه الصفحة مصادر مفيدة لأفضل الممارسات البرمجيّة</strong>. هذه المصادر مُنشئَة من قبل شركات رائدة ومطورين ويب مِمَن تبنوا معايير المصادر المفتوحة والممارسات التطويريّة الفُضلى، كما توفِر أو تسمح بإنشاء ترجمات من خلال رخص مفتوحة مثل المشاع الإبداعي (Creative Commons).</p> + +<h2 dir="rtl" id="للجدد_على_الويب">للجدد على الويب</h2> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a></dt> + <dd dir="rtl"> + <p>البدء مع الويب هي سلسلة موجزة تُعرِّفُك على عملية تطوير الويب. سوف نبدأ معك من إعداد الأدوات التي ستحتاجها لبناء صفحة ويب بسيطة وصولاً لعمليّة نشرها.</p> + </dd> +</dl> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن لغة ترميز النص الفائق (HTML)</h2> + +<h3 dir="rtl" id="مستوى_مُبتدئ">مستوى مُبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى لغة ترميز النص الفائق (HTML)</a></dt> + <dd dir="rtl">تُعَد هذه الوحدة تمهيداً للطريق حيث تُهيِئُك لتعلم الصيغة الكتابيّة والمفاهيم الأساسيّة في اللغة، مغطيةً مواضيع مثل التعامل مع النصوص، إنشاء روابط تشعيبيّة (hyperlinks)، وكيفيّة استخدام اللغة لهيكلة صفحة ويب.</dd> + <dt dir="rtl"><a href="/ar/docs/HTML/Element">مرجع MDN لعناصر لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">مرجع شامل لعناصر لغة ترميز النص الفائق، ودعم المتصفحات المختلفة لكلٍ منها.</dd> + <dt dir="rtl"><a href="https://www.theblogstarter.com/html-for-beginners">إنشاء صفحة بسيطة باستخدام لغة ترميز النص الفائق HTML</a> (موقع <strong>The Blog Starter</strong>)</dt> + <dd dir="rtl">دليل لغة ترميز النص الفائق للمبتدئين يتضمن شروحات للوسوم الشائعة، ولوسوم الإصدار الخامس من اللغة. يتضمن هذا المرجع أيضاً دليل تدريجي لبناء صفحة ويب بسيطة.</dd> + <dt dir="rtl"><a href="https://www.theblogstarter.com/html-for-beginners">تحديات في لغة ترميز النص الفائق HTML </a>(موقع <strong>Wikiversity</strong>)</dt> + <dd dir="rtl">استخدم هذه التحديات لتشحذ مهاراتك (على سبيل المثال، "هل يجب أن استخدم العنصر <code><h2></code> أم العنصر <code><strong></code>؟")، ولتُركِز على مهارة التنسيق الدقيق (استخدام العنصر الصحيح في الوقت الصحيح وبالشكل الصحيح).</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط">مستوى متوسط</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Multimedia_and_embedding">الوسائط المتعددة (Multimedia) و التضمين (Embedding)</a></dt> + <dd dir="rtl">نستكشف في هذه الوحدة كيفيّة استخدام لغة ترميز النص الفائق لتضمين الوسائط المتعددة (multimedia) المختلفة في مواقع الويب، كما ونغطي الطرق المُختلفة التي يمكن استخدامها لتضمين الصور، وإضافة ملفات الفيديو والصوت، أو حتى تضمين موقع آخر بأكمله.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Tables">الجداول في لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">يُشكِل تقديم البيانات المجدولة في الموقع بشكل مفهوم، ومُتاح (accessible) تحدياً. تغطي هذه الوحدة مبادئ هيكلة الجداول، كما تغطي مزايا أكثر تعقيداً مثل التعليقات (captions) والخلاصات (summaries) الجدوليّة.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Forms">الاستمارات (Forms) في لغة ترميز النص الفائق HTML</a></dt> + <dd dir="rtl">الاستمارات (Forms) هي جزء مهم جداً من الويب، فهي توفر آليّة للتفاعل مع المواقع (على سبيل المثال، التسجيل وتسجيل الدخول، وإرسال التعليقات، وشراء المنتجات، وغيرها من الأمور). تُهيئك هذه الوحدة على إنشاء أجزاء الاستمارات المتعلقة بجهة العميل (client-side).</dd> + <dt dir="rtl"><strong><a href="/ar/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">نصائح لكتابة صفحات HTML سريعة التحميل</a></strong></dt> + <dd dir="rtl">تعطي المقالة نصائح لكتابة صفحات ويب توفِر استجابة أكبر للزوار وتُقلل من الحمل على خادم والويب وإتصال الإنترنت.</dd> +</dl> +</div> +</div> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن تقنيّة صفحات الأنماط الانسيابية (CSS)</h2> + +<h3 dir="rtl" id="مستوى_مبتدئ">مستوى مبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web/CSS_basics">أساسيات صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تُستخدم هذه التقنيّة (CSS) لتصميم مظهر صفحتك. تبدأ معك هذه المقالة من ما ستحتاجه لتبدأ العمل. سنجيب عن أسئلة مثل: كيف يمكنني جعل لون نصي أسود أو أحمر؟ كيف يمكنني جعل محتواي يظهر في المكان الفلاني على الشاشة؟ كيف أُزخرِف صفحتي بصورة أو بلون في الخلفيّة؟</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) والخواص (properties)، وكتابة التعليمات، وتطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، وكيفيّة تحديد الطول واللون وأمور أخرى، والتتالي (cascade)، والوراثة (inheritance)، وأساسيات نموذج الصندوق (box model)، والتنقيح (debugging).</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/Styling_boxes" rel="nofollow">صناديق التصميم</a></dt> + <dd dir="rtl">سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، والحواف (border)، والهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.</dd> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/Styling_text" rel="nofollow">تنسيق النصوص</a></dt> + <dd dir="rtl">تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً معلومات عن كيفيّة إعداد الخطوط الغامقة والمائلة، والمسافات بين الحروف والسطور، والظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.</dd> + <dt dir="rtl"><a href="/ar/docs/Common_CSS_Questions">الأسئلة الشائعة حول تقنيّة CSS</a></dt> + <dd dir="rtl">الأسئلة الشائعة المطروحة من المبتدئين حول اللغة وأجوبتها.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط_2">مستوى متوسط</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/CSS/CSS_layout" rel="nofollow">نظام الترتيب للـ CSS</a></dt> + <dd dir="rtl">في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، والتعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).</dd> + <dt dir="rtl"><strong><a href="/ar/docs/CSS/CSS_Reference">مرجع صفحات الأنماط الانسيابية CSS</a></strong></dt> + <dd dir="rtl">مرجع شامل للتقنيّة، مع تفاصيل دعم خواصها من مُتصفح فايرفوكس وغيره من المتصفحات.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">شبكات التخطيط السلسة (Fluid Grids)</a> (موقع A List Apart)</strong></dt> + <dd dir="rtl">تصميم نماذج تتحجم بسلاسة مع نافذة المتصفح باستخدام الشبكة الطباعيّة (typographic grid).</dd> + <dt dir="rtl"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges">تحديات في صفحات الأنماط الانسيابية CSS</a> (موقع <strong>Wikiversity</strong>)</dt> + <dd dir="rtl">اشحذ مهاراتك، واكتشف نقاط الضعف لديك لتتمرن أكثر مع هذه التمرينات العمليّة.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم_2">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">استخدام التحويلات الهندسيّة في صفحات الأنماط الانسيابية CSS</a></dt> + <dd dir="rtl">تطبيق التدوير (rotation)، والميلان (skewing)، والتحجيم (scaling)، والإزاحة (translation) باستخدام صفحات الأنماط الانسيابية.</dd> + <dt dir="rtl"><strong><a href="/ar/docs/CSS/CSS_transitions">تقنيّة الانتقالات (المقطع الانتقالي) في CSS</a></strong></dt> + <dd dir="rtl">توفر تقنيّة الانتقالات (أو المقطع الانتقالي - transitions)، التي تعد جزءً من مسودة الإصدار الثالث من صفحات الأنماط الانسيابية، وسيلة لإحياء (animate) التغييرات في خصائص اللغة، بدلاً من تنفيذها فورياً.</dd> + <dt dir="rtl"><a href="http://www.html5rocks.com/tutorials/webfonts/quick/">الدليل السريع لاستخدام الخطوط (Fonts) باستخدام الخاصية font-face@</a> (موقع <strong>HTML5 Rocks</strong>)</dt> + <dd dir="rtl">تتيح لك الخاصيّة <code>font-face@</code> في الإصدار الثالث من صفحات الأنماط الانسيابية استخدام الخطوط المُخصصة في مواقع الويب بطريقة سهلة الوصول إليها، سهلة الاستخدام، وقابلة للتوسع.</dd> +</dl> +</div> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/API/Canvas_API/Tutorial">دورة كانفاس (Canvas)</a></dt> + <dd dir="rtl">تعلم طريقة رسم الرسومات برمجياً باستخدام عنصر الكانفاس (canvas).</dd> +</dl> +</div> + +<h2 class="Documentation" dir="rtl" id="Documentation" name="Documentation">دروس عن لغة الجافاسكربت JavaScript</h2> + +<h3 dir="rtl" id="مستوى_مبتدئ_2">مستوى مبتدئ</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a class="new" href="/ar/docs/Learn/JavaScript/First_steps" rel="nofollow">الخطوات الأولى مع الجافاسكربت</a></dt> + <dd dir="rtl">تجيب هذه المقالة عن بعض الأسئلة الأساسيّة، مثل "ما هي الجافاسكربت؟"، "كيف تبدو هذه اللغة؟"، "ماذا بإمكانها أن تفعل؟"، بالإضافة إلى مناقشة بعض الميزات الأساسيّة للغة مثل المتغيّرات، والسلاسل النصية، والأرقام، والمصفوفات.</dd> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Building_blocks">العناصر الأساسية للغة الجافاسكربت</a></dt> + <dd dir="rtl">نكمل رحلتنا في تغطيّة المفاهيم الأساسية في لغة الجافاسكربت، ففي هذه المقالة قمنا بالتركيز على البنى الكتليّة الشائعة في اللغة مثل الجمل الشرطيّة، والحلقات، والدوال، والأحداث.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/Getting_started_with_the_web/JavaScript_basics">البدء مع لغة الجافاسكربت</a></dt> + <dd dir="rtl">ما هي لغة الجافاسكربت وكيف يمكن أن تساعدك؟</dd> + <dt dir="rtl"><strong><a href="http://www.codecademy.com/">موقع Codecademy</a></strong></dt> + <dd dir="rtl">موقع سهل لتعليم كيفيّة البرمجة باستخدام لغة الجافاسكربت. يوفِر لك الموقع منصة تفاعليّة، كما يمكنك استخدامه أيضاً للتعلم مع أصدقاءك.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متوسط_3">مستوى متوسط</h3> + +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Objects">مقدمة إلى الكائنات في الجافاسكربت</a></dt> + <dd dir="rtl">من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.</dd> +</dl> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Learn/JavaScript/Client-side_web_APIs">واجهات التصميم البرمجيّة (APIs) لجهة المستخدم (Client-side) </a></dt> + <dd dir="rtl">لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt dir="rtl"><strong><a href="/ar/docs/A_re-introduction_to_JavaScript">إعادة تقديم لغة الجافاسكربت</a></strong></dt> + <dd dir="rtl">ملخص للغة الجافاسكربت يستهدف المطورين متوسطي الخبرة.</dd> + <dt dir="rtl"><strong><a href="http://eloquentjavascript.net/" rel="external">الجافاسكربت الفصيح (Eloquent JavaScript) </a></strong></dt> + <dd dir="rtl">دليل شامل للمنهجيات (methodologies) المتقدمة والمتوسطة للغة الجافاسكربت .</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="مستوى_متقدم_3">مستوى متقدم</h3> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Web/JavaScript/Guide">دليل لغة الجافاسكربت</a></dt> + <dd dir="rtl">دليل شامل ومُحدَث باستمرار للغة الجافاسكربت لجميع المستويات من المبتدئ إلى المحترف.</dd> + <dt dir="rtl"><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">أنت لا تعرف لغة الجافاسكربت</a> (Kyle Simpson)</strong></dt> + <dd dir="rtl">سلسلة من الكِتُب تتعمق في آليات لغة الجافاسكربت الجوهريّة.</dd> + <dt dir="rtl"><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">كيف تعمل المتصفحات</a></strong></dt> + <dd dir="rtl"> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="rtl" id="gt-res-dir-ctr"><span id="result_box" lang="ar"><span>مقالة بحثيّة تفصيليّة تشرح المتصفحات الحديثة المختلفة ومحركاتها وآلية عرضها للصفحات ...إلخ.</span></span></div> + </div> + </dd> + <dt dir="rtl"><a href="https://github.com/bolshchikov/js-must-watch">فيديوهات عن لغة الجافاسكربت</a> (جيتهاب)</dt> + <dd dir="rtl">مجموعة من الفيديوهات عن لغة الجافاسكربت.</dd> +</dl> +</div> +</div> + +<h3 dir="rtl" id="تطوير_إضافات_المتصفح">تطوير إضافات المتصفح</h3> + +<div class="row topicpage-table" style="width: 100%;"> +<div class="section"> +<dl> + <dt dir="rtl"><a href="/ar/docs/Mozilla/Add-ons/WebExtensions">تقنيّة WebExtensions</a></dt> + <dd dir="rtl">نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع <a class="external external-icon" href="https://developer.chrome.com/extensions" rel="noopener">واجهة الإضافات البرمجيّة</a> المدعومة بواسطة متصفخ جوجل وكروم وأوبرا، كما يتوافق مع <a class="external external-icon" href="https://browserext.github.io/browserext/" rel="noopener">مسودة W3C المجتمعيّة</a>. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس و<a class="external external-icon" href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/" rel="noopener">مايكروسوفت أيدج</a> في معظم الحالات <a href="https://developer.mozilla.org/ar/Add-ons/WebExtensions/Porting_from_Google_Chrome">بتغييرات طفيفة</a>. الواجهة البرمجيّة متوافقة أيضاً مع <a href="https://developer.mozilla.org/ar/Firefox/Multiprocess_Firefox">فايرفوكس متعدد العمليات</a> (multiprocess firefox).</dd> +</dl> +</div> +</div> |