We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

تقودك الروابط في هذه الصفحة إلى دروس ومواد تدريبيّة متنوعة. سواءً كنت في بداياتك، تتعلم الأساسيات، أو كنت مطوراً مُخضرماً، فستجد في هذه الصفحة مصادر مفيدة لأفضل الممارسات البرمجيّة. هذه المصادر مُنشئَة من قبل شركات رائدة ومطورين ويب مِمَن تبنوا معايير المصادر المفتوحة والممارسات التطويريّة الفُضلى، كما توفِر أو تسمح بإنشاء ترجمات من خلال رخص مفتوحة مثل المشاع الإبداعي (Creative Commons).

للجدد على الويب

البدء مع الويب
البدء مع الويب سلسلة موجزة تعرفك على عملية تطوير الويب. سوف تقوم بإعداد الأدوات التي تحتاجها لبناء صفحة ويب بسيطة ونشر موقعك.

دروس عن لغة ترميز النص الفائق

مستوى مُبتدئ

مقدمة إلى لغة ترميز النص الفائق
تُعَد هذه الوحدة تمهيداً للطريق حيث تُهيِئُك لتعلم الصيغة الكتابيّة والمفاهيم الأساسيّة في اللغة، مغطيةً مواضيع مثل التعامل مع النصوص، إنشاء روابط تشعيبيّة (hyperlinks)، وكيفيّة استخدام اللغة لهيكلة صفحة ويب.
مرجع عناصر لغة ترميز النص الفائق
مرجع شامل لعناصر لغة ترميز النص الفائق، ودعم المتصفحات المختلفة لكلٍ منها.
إنشاء صفحة بسيطة باستخدام لغة ترميز النص الفائق (موقع The Blog Starter)
دليل لغة ترميز النص الفائق للمبتدئين يتضمن شروحات للوسوم الشائعة، ولوسوم الإصدار الخامس من اللغة. يتضمن هذا المرجع أيضاً دليل تدريجي لبناء صفحة ويب بسيطة.
تحديات في لغة ترميز النص الفائق (موقع Wikiversity)
استخدم هذه التحديات لتشحذ مهاراتك (على سبيل المثال، "هل يجب أن استخدم العنصر <h2> أم العنصر <strong>؟")، ولتُركِز على مهارة التنسيق الدقيق (استخدام العنصر الصحيح في الوقت الصحيح وبالشكل الصحيح).

مستوى متوسط

الوسائط المتعددة
تستكشف هذه الوحدة كيفيّة استخدام لغة ترميز النص الفائق لتضمين الوسائط المتعددة (multimedia) المختلفة في موقعك، وتغطي الطرق المُختلفة التي يمكن استخدامها لتضمين الصور، وكيف يتم إضافة ملفات الفيديو والصوت، أو حتى تضمين موقع آخر بأكمله.
الجداول في لغة ترميز النص الفائق
يُشكِل تقديم البيانات المجدولة في الموقع بشكل مفهوم، ومُتاح (accessible) تحدياً. تغطي هذه الوحدة مبادئ هيكلة الجداول، كما تغطي مزايا أكثر تعقيداً مثل التعليقات (captions) والخلاصات (summaries) الجدوليّة.

مستوى متقدم

الاستمارات في لغة ترميز النص الفائق
الاستمارات (Forms) هي جزء مهم جداً من الويب، فهي توفر آليّة للتفاعل مع المواقع (على سبيل المثال، التسجيل وتسجيل الدخول، إرسال التعليقات، شراء المنتجات، وغيرها من الأمور). تُهيئك هذه الوحدة على إنشاء أجزاء الاستمارات المتعلقة بجهة العميل (client-side).
نصائح لكتابة صفحات سريعة التحميل
تعطي المقالة نصائح لكتابة صفحات ويب توفِر استجابة أكبر للزوار وتُقلل من الحمل على خادم والويب وإتصال الإنترنت.

دروس عن تقنيّة صفحات الأنماط الانسيابية

مستوى مبتدئ

أساسيات صفحات الأنماط الانسيابية
تُستخدم هذه التقنيّة (CSS) لتصميم مظهر صفحتك. تبدأ معك هذه المقالة من ما ستحتاجه لتبدأ العمل. سنجيب عن أسئلة مثل: كيف يمكنني جعل لون نصي أسود أو أحمر؟ كيف يمكنني جعل محتواي يظهر في المكان الفلاني على الشاشة؟ كيف أُزخرِف صفحتي بصورة أو بلون في الخلفيّة؟
مقدمة في صفحات الأنماط الانسيابية
تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) الخواص (properties)، كتابة التعليمات، تطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، كيفيّة تحديد الطول واللون وأمور أخرى، التتالي (cascade)، الوراثة (inheritance)، أساسيات نموذج الصندوق (box model)، والتنقيح (debugging).
صناديق التصميم
سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، الحواف (border) الهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.
تنسيق النصوص
تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً إعداد الخطوط الغامقة والمائلة، المسافات بين الحروف والسطور، الظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.
الأسئلة الشائعة حول التقنيّة
الأسئلة الشائعة المطروحة من المبتدئين حول اللغة وأجوبتها.

مستوى متوسط

النماذج
في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، التعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).
مرجع صفحات الأنماط الانسيابية
مرجع شامل للتقنيّة، مع تفاصيل دعم خواصها من مُتصفح فايرفوكس وغيره من المتصفحات.
شبكات التخطيط السلسة (موقع A List Apart)
تصميم نماذج تتحجم بسلاسة مع نافذة المتصفح، في حين استخدام الشبكة الطباعيّة (typographic grid).
تحديات في صفحات الأنماط الانسيابية (موقع Wikiversity)
اشحذ مهاراتك، واكتشف نقاط الضعف لديك لتتمرن أكثر.

مستوى متقدم

استخدام التحويلات الهندسية في صفحات الأنماط الانسيابية
تطبيق التدوير (rotation)، الميلان (skewing)، التحجيم (scaling)، والإزاحة (translation) باستخدام صفحات الأنماط الانسيابية.
تقنيّة المقطع الانتقالي
توفر تقنيّة الانتقالات (أو المقطع الانتقالي)، التي تعد جزءً من مسودة الإصدار الثالث من صفحات الأنماط الانسيابية، وسيلة لإحياء (animate) التغييرات في خصائص اللغة، بدلاً من تنفيذها فورياً.
الدليل السريع لاستخدام الخطوط باستخدام الخاصية font-face@ (موقع HTML5 Rocks)
تتيح لك الخاصيّة font-face@ في الإصدار الثالث من صفحات الأنماط الانسيابية استخدام الخطوط المُخصصة في مواقع الويب بطريقة سهلة الوصول إليها، سهلة الاستخدام، وقابلة للتوسع.
دورة كانفاس
تعلم طريقة رسم الرسومات برمجياً باستخدام عنصر الكانفاس (canvas).

دروس عن لغة الجافاسكربت

مستوى مبتدئ

الخطوات الأولى مع الجافاسكربت
تجيب هذه المقالة عن بعض الأسئلة الأساسيّة، مثل "ما هي الجافاسكربت؟"، "كيف تبدو هذه اللغة؟"، "ماذا بإمكانها أن تفعل؟"، بالإضافة إلى مناقشة بعض الميزات الأساسيّة للغة مثل المتغيّرات، السلاسل النصية، الأرقام، والمصفوفات.
البنى الكتليّة في اللغة
نكمل رحلتنا في تغطيّة المفاهيم الأساسية في لغة الجافاسكربت، ففي هذه المقالة قمنا بالتركيز على البنى الكتليّة الشائعة في اللغة مثل الجمل الشرطيّة، الحلقات، الدوال، والأحداث.
البدء مع لغة الجافاسكربت
ما هي لغة الجافاسكربت وكيف يمكن أن تساعدك؟
موقع Codecademy
موقع سهل لتعليم كيفيّة البرمجة باستخدام لغة الجافاسكربت. يوفِر لك الموقع منصة تفاعليّة، كما يمكنك استخدامه أيضاً للتعلم مع أصدقاءك.

مستوى متوسط

 

مقدمة إلى الكائنات
من المهم فهم البرمجة الشيئيّة في اللغة إذا أردت زيادة معرفتك والتمكن من كتابة شيفرة برمجيّة أكثر فعاليّة، من أجل ذلك قمنا بتوفير هذه الوحدة لك.

 

واجهات التصميم (جهة العميل) البرمجيّة
لن تستطيع العمل جيداً عند تطوير جهة المستخدم (client-side) باستخدام الجافاسكربت من دون تعلمك للواجهات البرمجيّة المتخصصة، فهي واجهات للتلاعب بأجزاء مختلفة من المُتصفِح ونظام التشغيل الذي يعمل عليه الموقع، أو حتى التلاعب بحقول بيانات مواقع أو خدمات أخرى. في هذه الوحدة سنستكشف ماهيّة هذه الواجهات، وكيف تستخدم بعض من أكثر تلك الواجهات شيوعاً والتي ستحتاجها غالباً في عملك.
إعادة تقديم لغة الجافاسكربت
ملخص للغة الجافاسكربت يستهدف المطورين متوسطي الخبرة.
الجافاسكربت الفصيح (Eloquent JavaScript)
دليل شامل لمنهجيات (methodologies) لغة الجافاسكربت المتقدمة والمتوسطة.

مستوى متقدم

دليل لغة الجافاسكربت
دليل شامل ومُحدَث باستمرار للغة الجافاسكربت لجميع المستويات من المبتدئ إلى المحترف.
أنت لا تعرف لغة الجافاسكربت (Kyle Simpson)
سلسلة من الكِتُب تتعمق في آليات لغة الجافاسكربت الجوهريّة.
كيف تعمل المتصفحات
مقالة بحثيّة تفصيليّة تشرح المتصفحات الحديثة المختلفة ومحركاتها وآلية عرضها للصفحات ...إلخ.
فيديوهات عن لغة الجافاسكربت (جيتهاب)
مجموعة من الفيديوهات عن لغة الجافاسكربت.

تطوير إضافات المتصفح

تقنيّة WebExtensions
نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع واجهة الإضافات البرمجيّة المدعومة بواسطة متصفخ جوجل كروم وأوبرا، كما يتوافق مع مسودة W3C المجتمعيّة. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس ومايكروسوفت أيدج في معظم الحالات بتغييرات طفيفة. الواجهة البرمجيّة متوافقة أيضاً مع فايرفوكس متعدد العمليات (multiprocess firefox).

Document Tags and Contributors

المساهمون في هذه الصفحة: ahmadnourallah, jwhitlock, hamza-mostafa, antaraz
آخر مَن حدّثها: ahmadnourallah,