Mustafa Suleiman

الطريقة الأولى هي عن طريق الدخول على جهازك عن طريق برامج مثل Anydesk أو TeamViewer وتجربة الموقع على جهازك. والطريقة الثانية هي بإرسالة فيديو تعرض من خلال الموقع ومميزاته للعميل. والطريقة الثالثة هي برفع الموقع على استضافة لكن قم بعمل build للمشروع ورفعه، أي أنك لن تقوم برفع الكود المصدري. والطريقة الرابعة هي بإنشاء استضافة محلية للموقع على جهازك، وإرسال الرابط للعميل، كما لو أنك قمت برفعه على استضافة، وأمثلة لتلك الخدمات هي: Ngrok Localtunnel Serveo Teleconsole Pagekite

برمجة الروبوتات تتطلب برمجة على الحاسوب الشخصي وليس بالضرورة استخدام بيئات سحابية مثل Google Colab، وبإمكانك استخدام الحاسوب الشخصي لتطوير وتجربة برامج الروبوتات وتحميلها مباشرة إلى الروبوت. ولكن بعض الأشخاص يفضلون استخدام بيئات سحابية مثل Google Colab لبرمجة الروبوتات بسبب بعض المزايا التي توفرها هذه البيئات. مثلاً، يمكن تشغيل البرامج على خوادم السحابة بدلاً من تشغيلها على الحاسوب الشخصي، وذلك قد يكون مفيدًا في حالة الروبوتات التي تحتاج إلى موارد كبيرة أو للتجربة والتطوير السريع دون الحاجة إلى تثبيت البرامج محليًا. أي ببساطة، إذا كان حاسوبك بمواصفات جيدة فلن تحتاج إلى Google Colab. وإليك مزيد من التفاصيل عن مجال برمجة الروبوتات Robotics :

إذا كنت تريد أخذ لقطة شاشة Screenshot للموقع من أجل وضعه في معرض الأعمال، فهناك إضافات خاصة للمتصفح تسمح لك بذلك وهم: Screely وتلك الإضافة تسمح لك بأخذ لقطة للشاشة ووضعها في إطار لتبدوا إحترافية مثل الصورة التالية: ولكن اللقطة ليست لكامل الموقع، وإذا أردت إلتقاط كامل الموقع فأنصحك بالإضافة التالية: FireShot تلك الإضافة تسمح لك بأخذ لقطات للموقع كيفما تريد ومنها إلتقاط صورة لكامل الموقع وبأعلى جودة:

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

مسؤولية إنشاء الـ API هي خاصة بمطور الواجهة الخلفية، لكنك تستطيع تعلم ذلك، وذلك ما قصدته بكونك تستطيع، أو بإمكانك استخدام تقنيات توفر لك إنشاء API بدون الحاجة إلى إنشاء سيرفر وتعرف باسم Serverless مثل Netlify Functions وAWS Lambda. وNetlify Functions هي خدمة من Netlify تسمح لك بتشغيل شفراتك كـ API endpoints بشكل بسيط، وهي جزء من خدمات الـ serverless functions، وطريقة لنشر الكود الخادم كـ API endpoints، حيث يتم تشغيلها تلقائيًا عند حدوث حدث محدد، وتقوم بمعالجة الشفرات التي تعمل على الجانب الخادم وتتوقف بعد الإنتهاء من المهمة. وأغلب مطوري تطبيقات يستخدمون Firebase كواجهة خلفية للتطبيق وتتيح لهم إرسال واستقبال الطلبات أي إنشاء API وأيضًا قاعدة بيانات، بكل سهولة، وفقط عليك بتعلم كيفية الإتصال وإنشاء حساب وقاعدة بيانات واستخدام الدوال الخاصة بها في الكود لديك. وأيضًا هناك منصات مشابهة وهم Appwrite وSupabase، وإليك نبذة مختصرة: Firebase مجموعة شاملة من الأدوات التي توفر بنية تحتية قوية لتطوير تطبيقات الهاتف المحمول والويب، وتتضمن Firebase خدمات مختلفة مثل قاعدة بيانات الوثائق (Firestore) وتخزين الملفات والمصادقة وإرسال الإشعارات والتحليلات وغيرها الكثير، وتستطيع استخدام API Firebase لإجراء عمليات القراءة والكتابة والمزيد بدون الحاجة إلى كتابة الكود الخاص بالخلفية. Appwrite منصة خلفية مفتوحة المصدر تساعدك في بناء خدمات الويب السحابية (Backend-as-a-Service) بسهولة، وتوفر Appwrite مجموعة من الخدمات المختلفة مثل قاعدة بيانات الوثائق والتخزين والمصادقة والتحليلات، وبإمكانك استخدام API Appwrite لإنشاء وتعديل واستعلام البيانات دون الحاجة لمعرفة متقدمة بالواجهة الخلفية. Supabase منصة لإنشاء واجهة برمجة تطبيقات قاعدة البيانات (API) مبنية على PostgreSQL، وتوفر Supabase تجربة مشابهة لقاعدة بيانات PostgreSQL التقليدية مع إضافة طبقة من الواجهة البرمجية التي تجعل من السهل إنشاء وتعديل البيانات. وبالطبع تستطيع استخدام API Supabase لإجراء العديد من العمليات القياسية مثل الاستعلامات والإدخال والتحديث والحذف دون الحاجة لمعرفة متقدمة بالواجهة الخلفية. في المجمل، كل هذه المنصات تسعى إلى تبسيط تطوير التطبيقات وتقديم واجهات سهلة الاستخدام للمطورين الذين ليسوا متخصصين في الواجهة الخلفية، ولكن ستحتاج إلى بعض المعرفة الأساسية بمفاهيم الواجهة الخلفية والاستعلامات والتحكم في البيانات لتتمكن من استخدام هذه الأدوات بكفاءة. ولعلك تتسائل ما الفرق بين Serverless ومنصات مثل Firebase؟ ببساطة منصة مثل Firebase توفر تطوير تطبيقات شاملة تقدمها Google، وتتضمن Firebase مجموعة واسعة من الخدمات المستندة إلى السحابة مثل قاعدة بيانات الوثائق (Firestore)، وخدمة التخزين، والمصادقة، وإرسال الإشعارات، والتحليلات، والاستضافة، وغيرها الكثير. ويتم تطوير Firebase بشكل خاص لتسهيل تطوير التطبيقات النقالة وتوفير البنية التحتية اللازمة للتطبيقات الحديثة. من ناحية أخرى، يعتبر Serverless نمطًا لتطوير التطبيقات، ولا يرتبط بمنصة محددة، وتستخدم خدمات Serverless مثل AWS Lambda أو Azure Functions أو Google Cloud Functions لتنفيذ شفرة التطبيق فقط عندما يتم استدعاؤها، دون الحاجة لتكوين وإدارة خادم خاص، أي يتيح لك استخدام Serverless توفير الوقت والجهد في إدارة البنية التحتية وتكوين الخوادم. وFirebase تستخدم تحت الغطاء خدمات Serverless لتنفيذ بعض وظائفها، وكمثال فهي تستخدم Firebase Cloud Functions (وهي خدمة Serverless) لتشغيل الكود المستضاف في Firebase. أي يمكن اعتبار الخدمات السابقة (Supabase وAppwrite وFirebase) جزءًا من النمط Serverless في بعض الجوانب.

بالطبع تستطيع إنشاء API، وقد تم الحديث بشكل مفصل في النقاش التالي: ما هو الـ API

السؤال غير واضح، أرجو توضيح السؤال مع مثال بالصورة لو أمكن

الكود سليم، لكن كمحاولة استخدم الكود التالي: function onEdit(e) { const url = "http://localhost:8000/edit"; // استبدله بعنوان URL الصحيح لخادمك الشخصي const options = { method: "POST", headers: { "Content-Type": "application/json", }, payload: JSON.stringify(e), // إرسال بيانات التعديل كجزء من الجسم (payload) للطلب muteHttpExceptions: true, }; try { UrlFetchApp.fetch(url, options); } catch (error) { console.error("حدث خطأ أثناء إرسال الطلب:", error); } } قمت بإضافة خاصية "headers" لتعيين نوع المحتوى إلى "application/json"، كما قمت بتحويل بيانات التعديل (e) إلى سلسلة JSON باستخدام JSON.stringify() وإرسالها كجزء من الجسم (payload) للطلب. تم أيضًا إضافة كتلة try-catch للتعامل مع الأخطاء المحتملة أثناء إرسال الطلب، وستتم طباعة أي خطأ إلى سجل الخطأ ويمكنك مراجعته لمعرفة تفاصيل الخطأ المحدث. وعليك باستبدال عنوان URL الصحيح لخادمك في السطر const url = "http://localhost:8000/edit"; بالعنوان الصحيح الذي يستخدمه السيرفر لديك. وتأكد من أن السيرفر يستجيب للطلبات POST وأن لديك الإعدادات الصحيحة للوصول المشترك (CORS) للسماح للطلبات الواردة من نطاق Google Apps Script.

الكلاس في HTML هو وسيلة لتحديد اسم للعنصر من أجل تطبيق تنسيق عليه بشكل دقيق عن طريق CSS أو تنفيذ سكريبت من خلال جافاسكريبت، وذلك عن طريق البحث عن العنصر باسم الكلاس ثم تنفيذ ما تريده. فتخيل لو لديك أكثر من عنصر div مثلاً ولكن تريد تنفيذ تنسيق لـ div محدد، فمن الأسهل وضع اسم له عن طريق الكلاس بدلاً من إختياره بصعوبة بناءًا على مكانه في الكود وإن تغير مكانه سيحدث مشكلة، لذلك إختياره بناءًا على اسمه سواء عن طريق الكلاس أو الـ id هو الصحيح. وبخصوص الأيقونة، فالكود في الصورة يستخدم أسماء الكلاسات الخاصة بمكتبة font-awesome والتي تقوم بتوفير أيقونات من خلال كتابة الكلاس الخاص بالأيقونة، وقد تم شرح ذلك بشكل وافي هنا:

أولاً سأشرح لك ما معنى كل من الـ pseudo-classes الآتية: وقبل ذلك لنفهم ما معنى pseudo-class في CSS، وهي تعبير يستخدم لتحديد حالة محددة أو حالة خاصة لعنصر HTML، وتسمح pseudo-classes بتطبيق أنماط وتنسيقات مختلفة للعناصر بناءً على حالتها أو عنصر معين. {}a:link هذا يحدد النمط الذي ستظهر به الروابط التي لم يتم النقر عليها بعد (روابط لم يتم زيارتها). {}a:visited يحدد النمط الذي ستظهر به الروابط التي تم النقر عليها مسبقًا (روابط تم زيارتها أي النقر عليها). {}a:focus تحدد النمط الذي ستظهر به الروابط عندما تكون محددة بواسطة المستخدم (جرب الضغط على Tab في الكيبورد وستجد أنه يتم التنقل بين عناصر الصفحة إلى أن تصل للروابط). {}a:hover يحدد النمط الذي ستظهر به الروابط عندما يتم تحريك المؤشر فوقها. {}a:active يحدد النمط الذي ستظهر به الروابط عندما يتم النقر عليها (الضغط بالفأرة دون الإفلات أي بشكل مستمر أي اللحظة التي تضغط فيها بالفأرة). والترتيب الذي يشترط في هذه القواعد هو أمر مهم لأنه يُحدد ترتيب تطبيق الأنماط وتعديلات الشكل على الروابط وفقًا لحالة الروابط وتفاعل المستخدم معها. ولكن ذلك ليس ضروري حيث أن التنسيق هنا يتم بناءًا على حالة العنصر وليس موقعه في الكود المكتوب، وفي حال قمت بكتابة مثلاً focus أو hover في البداية فلن يتغير شيء، حيث يطبق التنسيق بناءًا على حالة العنصر فقط. ولتوضيح أفضل، إليك مثالًا على كيفية استخدام هذه القواعد: a:link { color: blue; } a:visited { color: purple; } a:focus { color: DarkTurquoise; } a:hover { color: red; } a:active { color: green; } وستكون الروابط غير المزارة باللون الأزرق (a:link)، وعندما يتم النقر على الرابط ويتم تحويله إلى حالة مزارة، سيتغير لونه إلى اللون البنفسجي (a:visited). وعند التنقل بين عناصر الصفحة عند الضغط على Tab سيكون اللون هو DarkTurquoise. وعند تحريك المؤشر فوق الرابط، سيتغير لونه إلى اللون الأحمر (a:hover)، وعند النقر عليه، سيتغير لونه إلى اللون الأخضر (a:active) وجرب عدم الإفلات أي اضغط بشكل مستمر وستجد أن لونه أخضر. وإليك مثال: <!DOCTYPE html> <html> <head> <title>تنسيق الروابط</title> <style> a { color: blue; } a:visited { color: p; } a:focus { color: DarkTurquoise; } a:hover { color: red; } a:active { color: green; } </style> </head> <body> <h1>تنسيق الروابط</h1> <p> <a href="#">روابط الصفحة</a> <br> <a href="#">رابط آخر</a> <br> <a href="#">رابط إضافي</a> </p> </body> </html>

خاصية margin: 0 تستخدم لتحديد هوامش (margins) لعناصر HTML، وتعمل على تحديد المسافة بين العناصر والعناصر الأخرى في الصفحة. ولكن في حالة جداول HTML، خاصية margin: 0 لا تعمل بنفس الطريقة التي تعمل بها في عناصر HTML الأخرى. بل نستخدم خاصية border-collapse في جدول HTML، والتي تعمل على دمج حدود (borders) الخلايا المجاورة معًا، مما يؤدي إلى إزالة التباعد (spacing) الافتراضي بين الخلايا، ويعمل ذلك على تجنب ظهور التباعد الزائد ويمنح الجدول مظهرًا مرتب ومتجانس. في حين، خاصية margin: 0 لا تعمل على تجاهل التباعد بين الخلايا في جدول HTML، وحين وضعها على حقول الجدول td فلن تجد لها تأثير، وعند وضعها على الجدول نفسه table ستجد أنه يبتعد عند العناصر الأخرى بمقدار الـ margin الذي قمت بوضعه وإليك مثال: <style> table { border-collapse: collapse; margin: 10px } table td { border: 1px solid black; } </style> <table> <tr> <td>خلية 1</td> <td>خلية 2</td> <td>خلية 3</td> </tr> <tr> <td>خلية 4</td> <td>خلية 5</td> <td>خلية 6</td> </tr> </table>

في لغة جافا، تستطيع استخدام الأنواع البدائية (مثل char) مباشرة دون الحاجة إلى إنشاء كائنات من الكلاس المرتبط بهذه الأنواع، وأيضًا بإمكانك استخدام الكلاس Character للتعامل مع الأحرف ككائنات. ويوفر الكلاس Character في جافا العديد من الدوال والميثودز المفيدة للتعامل مع الأحرف، مثل دالة isLetter() التي تحقق ما إذا كانت الحرف متكونة من حرف فقط أو لا، أي استخدام الدالة isLetter() على كائن من الكلاس Character لفحص الحرف الموجود فيه واسترجاع نتيجة الفحص. وكمثال، عندما نقوم بتعريف متغير من النوع البدائي char ونمنحه قيمة، فتستطيع استخدام الدالة isLetter() من الكلاس Character لفحص إذا كان الحرف الذي تم تخزينه يمثل حرفًا أو لا، وفي حالتنا، فإن الكود يعمل بشكل صحيح لأننا نقوم بتمرير قيمة الحرف إلى الدالة isLetter() ونطبع النتيجة التي تم استرجاعها من الدالة. لذلك، بالرغم من أنه يمكننا استخدام الأنواع البدائية مباشرة، إلا أن الكلاسات المرتبطة بهذه الأنواع (مثل Character) توفر وظائف إضافية ودوال مفيدة للتلاعب والتعامل مع هذه الأنواع. وإليك مثال يوضح كيفية استخدام الكلاس Character لفحص إذا كان الحرف متكونًا من حرف أو لا: public class Main { public static void main(String[] args) { char c1 = 'g'; // استخدام الدالة isLetter() من الكلاس Character boolean isLetter = Character.isLetter(c1); if (isLetter) { System.out.println("الحرف " + c1 + " هو حرف"); } else { System.out.println("الحرف " + c1 + " ليس حرف"); } } } أولاً نقوم بتعريف المتغير c1 كحرف 'g'، ثم نستخدم الدالة isLetter() من الكلاس Character لفحص إذا كان الحرف c1 يمثل حرفًا أو لا، ونتمكن من استرجاع النتيجة وتخزينها في متغير من النوع boolean بواسطة الكود boolean isLetter = Character.isLetter(c1);. ثم نقوم بفحص القيمة المخزنة في المتغير isLetter، وإذا كانت true، فإن الحرف c1 هو حرف ونقوم بطباعة رسالة توضح ذلك، وإذا كانت false، فإن الحرف c1 ليس حرف ونقوم بطباعة رسالة توضح ذلك. وبناءًا على القيمة المخزنة في المتغير c1 (الحرف 'g')، سيتم طباعة النتيجة "الحرف g هو حرف"، لأن الحرف 'g' هو حرف صالح. وإليك مصادر أخرى للشرح:

الخطأ يخبرك أن الدالة FlatButton غير معرفة، هل قمت بكتابتها بشكل صحيح، أي تأكد من كتابة الأحرف الصغيرة والكبيرة في اسم الدالة بشكل صحيح، وأيضًا هل هناك مكتبة تستوردها لتعريف تلك الدالة؟

أشرت لك من قبل أن الصيغة غير مدعومة في HTML5 وسيتوجب عليك تحويل الصيغة إلى أحد الصيغ التالية MP4, WebM, OGV عن طريق مكتبة مخصصة لذلك أو باستخدام أحد برامج تحويل الفيديوهات مثل: Any Video Converter Freemake Video Converter Free Video Converter وغيرها من البرامج الأخرى، وكما ذكرت لك هناك مكتبات تسمح بتحويل الفيديو مثل: https://www.npmjs.com/package/video-converter https://www.npmjs.com/package/video-format-converter https://www.npmjs.com/package/html5-media-converter

بخصوص شرح عن <video> فستجد شرح كامل له في موسوعة حسوب، وأيضًا هناك دروس في قسم المقالات يشرح كيفية إضافة مقاطع الفيديو في HTML: وبخصوص العنصر <source> فقد تم شرحه في موسوعة حسوب أيضًا: https://wiki.hsoub.com/HTML/source وسبب أن الفيديو لا يعمل أن الصيغة .mov غير مدعومة في html5 وتستطيع رؤية الصيغ المدعومة من هنا: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats والأمر يتطلب تحويل صيغة الفيديو إلى صيغة أخرى قبل عرضه في المتصفح وهناك مكتبات لذلك مثل html5-media-converter، ولكن لتجنب تعقيد الأمور الآن، استخدم فيديو بصيغة mp4.

أرجو منك توضيح السؤال وما هو المشروع الذي تعمل عليه وأيضًا ستجد سبب الخطأ في محرر الأكواد VScode في تبويب PROBLEMS وتستطيع الوصول إليه عن طريق الضغط على CTRL + SHIFT + M معًا.

هل قصدت وضع تلك الخواص التي أسفلها خط متعرج باللون الأحمر داخل قوسين {} لأن سبب المشكلة هو ذلك، حيث أنك قمت بغلق دالة onPressed بالقوس { قبل child

أولاً عليك بإختيار محرك الألعاب الذي تريد تصميم ألعابك عليه، وسأذكر لك المحركات الشائعة: Unity3d Unreal Engine Godot GameMaker Studio Construct 3 Panda3D Buildbox CryEngine وستجد الجميع ينصحك بـ Unity حيث يتيح لك إنشاء أي لعبة مجانًا وهناك دعم قوي له. حييث قامت شركة Unity Tech بإنشاء Unity وهو محرك تطوير ألعاب متعدد المنصات، ويسمح لك بإنشاء ألعاب ثلاثية الأبعاد وثنائية الأبعاد، وأيضًا إنشاء ألعاب الواقع الافتراضي والواقع المعزز. وبعد تعلم أساسيات Unity، ستحتاج إلى إتقان لغة برمجة C#، وهي تُستخدم لإنشاء السكربتات داخل Unity. وأيضًا بإمكانك استخدام لغة برمجة C# التابعة لشركة Microsoft لإنشاء تطبيقات الويب وتطبيقات الجوال والألعاب. وهي أسهل بكثير للتعلم من لغات البرمجة الأخرى مثل C++ أو C، وتُستخدم في Unity لتطوير الألعاب، ومن الضروري أن تأخذ في الاعتبار اكتساب الأساسيات الأساسية للغة، ولكن ذلك لا يعني أنك ستتقنها في 15 إلى 20 يومًا أو حتى شهر. وبخصوص التطوير ستحتاج إلى بيئة تطوير متكاملة (IDE) لتعلم وكتابة C#، وهناك بيئة تطوير متكاملة رسمية من Microsoft تُسمى Visual Studio Community، وهي مجانية للأبد وتتيح لك كتابة أكواد C# بشكل إفتراضي دون تثبيت أية إضافات. وضع في إعتبارك أن محرك مثل Unreal Engine يستخدم لغة C++، لذلك إذا كان لديك الوقت الكافي فأنصحك بتعلم C++ ثم C#.

حاولي استخدام الأمر التالي: flutter config --android-sdk "path-to-your-android-sdk-path" واستبدلي "path-to-your-android-sdk-path" بالمسار إلى Android SDK في حاسوبك، أي مثلاً المسار قد يكون كالتالي لديك: flutter config --android-sdk "C:\Program Files (x86)\Android\android-sdk" ولتسهيل مهمة العثور على المسار: توجهي إلى Android Studio. توجهي إلى Tools في الإعدادات. اذهبي إلى SDK Manager. ستجدي مسار Android SDK. وإذا استمرت المشكلة تأكدي من تثبيت إًصدار Android SDK Build-Tools المطلوب وهو في الصورة مطلوب 33.2.0 وستجديه في الرابط التالي: https://androidsdkmanager.azurewebsites.net/Buildtools

هناك جدول يسمى STUDENTS يحتوي على عدة أعمدة ومنها "Name" و "Marks" و "ID"، والمطلوب منك هو كتابة استعلام SQL لاسترجاع اسم أي طالب في الجدول الذي حصل على درجة أعلى من قيمة معينة (Marks). وترتيب النتائج يجب أن يكون وفقًا للثلاثة أحرف الأخيرة من كل اسم، فإذا كان هناك طلاب ينتهي اسمهم بنفس الثلاثة أحرف الأخيرة (مثل Bobby و Robby)، يتم ترتيبهم ثانويًا بناءً على قيمة ID بترتيب تصاعدي. وستحتاج إلى قراءة الجدول واستخدام استعلام SQL للقيام بالمطلوب، ومثال للجدول هو: ومثال للنتيجة: Ashley Julia Belvet وستجد جزء يوضح السبب والمنطق وراء النتائج التي تم استرجاعها من الاستعلام، لنفس الأسباب التي تم ذكرها في الشرح السابق، حيث تم تحديد أن هناك ثلاثة طلاب فقط (Ashley و Julia و Belvet) الذين حصلوا على درجات أعلى من 75، ثم تمت مقارنة الأحرف الثلاثة الأخيرة من أسمائهم و ترتيبهم وفقًا لذلك. Ashley تنتهي بـ 'ley' Julia تنتهي بـ 'lia' Belvet تنتهي بـ 'vet' وعند مقارنة هذه الثلاثة مقاطع أحرف، ستجد أنه لا يوجد تكرار للأحرف وأن 'ley' أصغر من 'lia' و'lia' أصغر من 'vet'. وبالتالي، تم ترتيب الأسماء وفقًا لذلك الترتيب.

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

عنصر <code> في HTML يُستخدم لتحديد قسم من النص كشيفرة برمجية أو شيفرة مرجعية. وفيما يلي بعض النقاط المهمة حول عنصر <code>: يعتبر عنصرًا فارغًا، ويجب استخدامه مع بداية ونهاية تاجات الافتتاح والإغلاق <code></code>. يجب استخدام عنصر <code> فقط لعرض النصوص البرمجية أو الشيفرات المرجعية، وأيضًا لعرض تعليمات المستخدم أو الأكواد القابلة للنسخ. لا يقوم عنصر <code> بتنفيذ أي تنسيق خاص على النص. يتم عادة استخدام CSS لتخصيص تنسيق الشيفرة البرمجية داخل عنصر <code>،مثلاً، تعيين أنواع الخط والألوان والتظليل لتحسين قراءة الشيفرة. وهو يستخدم على نطاق واسع في صفحات الويب لعرض الشيفرة المصدرية أو البرمجية بشكل منسق وواضح، وبإمكانك استخدامه أيضًا في الوثائق التقنية والمدونات التي تتضمن شروحات برمجية لتوضيح الأكواد والأمثلة. مثال: <html> <head> </head> <body> <pre> <code> // يبدأ الكود من هنا #include< iostream> #include< stack> using namespace std; int main() { stack<int> stack1; stack1.push(0); stack1.push(2); stack1.push(5); stack1.push(3); stack1.push(1); } // ينتهي الكود هنا </code> </pre> </body> </html> ولاحظ أنني قمت باستخدام عنصر pre للإحتفاظ بتنسيق النص كما قمت بكتابته وبدون الحاجة إلى كتابة أكواد CSS، وإليك النتيجة: وقد يبدوا الأمر محير بعض الشيء لك فما الفائدة إذا كان عنصر فقط ولا يقوم بأي تسنيق؟ ولكن يُعتبر عنصر <code> جزءًا من HTML الدلالي (Semantic HTML)، وهو مفهوم يهدف إلى استخدام العناصر والوسوم في HTML بطريقة توفر معنى وهيكلية أكثر دقة للمستند. وتستطيع تنسيق الكود من خلال استهداف العنصر.

الوسم (label) في HTML، الوسم (label) يستخدم لإنشاء تسمية لعنصر إدخال (input) معين على الصفحة، ويعمل الوسم (label) على تحسين تجربة المستخدم ويساعد في جعل النماذج (forms) أكثر وضوحًا واستخدامًا. واستخدامه الشائع هو مع عناصر إدخال مثل الخيارات (checkboxes) وأزرار الاختيار (radio buttons) وحقول النص (text fields) وما إلى ذلك. ويعمل الوسم (label) على توفير وصف مقروء بواضح للعنصر المقابل، مما يجعله أكثر فهمًا للمستخدمين. لربط الوسم (label) بعنصر الإدخال (input)، تستخدم الخاصية "for" في الوسم (label) وتحديد قيمتها بنفس قيمة خاصية "id" لعنصر الإدخال المطابق. أي إذا كان لديك عنصر إدخال نصي (text field) مع خاصية "id" تحمل قيمة معينة، فيمكنك ربط الوسم (label) بهذا العنصر عن طريق تحديد قيمة "for" بنفس هذه القيمة ، مما يعني أنه عند النقر فوق الوسم (label)، سيتم تحديد عنصر الإدخال المرتبط به. مثال: <label for="username">اسم المستخدم:</label> <input type="text" id="username" name="username"> قمت بربط الوسم (label) بعنصر الإدخال (input) المطابق باستخدام قيمة "for" التي تكون مطابقة لقيمة خاصية "id" لعنصر الإدخال، وتظهر التسمية "اسم المستخدم:" بجانب عنصر الإدخال، وعند النقر فوقها، يتم تحديد عنصر الإدخال لإدخال اسم المستخدم. الخاصيتين name و id بالنسبة للخاصيتين "name" و "id"، فغالبًا ما يكون لهما قيم متشابهة لأنهما يعملان في سياقات مختلفة: فالخاصية "id" تستخدم لتعريف هوية فريدة لعنصر HTML، وتستطيع استخدام هذا الهوية في الأنماط (CSS) والسكريبتات (JavaScript) للاستهداف العنصر وتنفيذ الإجراءات المطلوبة عليه. أما الخاصية "name" تستخدم بشكل شائع في إرسال البيانات من نموذج HTML إلى الخادم عند تقديم النموذج، حيث يعتبر "name" جزءًا من زوج "اسم/قيمة" (name/value) الذي يتم إرساله إلى الخادم. مثال: لنفترض أن لدينا نموذج HTML بسيط يحتوي على حقل إدخال نصي وزر إرسال، ونريد جمع البيانات المدخلة من المستخدم وإرسالها إلى الخادم، وهنا يمكننا استخدام الخاصية "name" والخاصية "id" بالشكل التالي: <label for="name">الاسم:</label> <input type="text" id="name" name="name"> <button type="submit" name="submit" id="submit">إرسال</button> يوجد حقل إدخال نصي يحمل الخاصية "id" والخاصية "name" بقيمة "name"، بمعنى أنه عندما يتم إرسال النموذج، ستتم إرسال القيمة المدخلة في هذا الحقل تحت اسم "name". بالإضافة إلى ذلك، يوجد زر إرسال يحمل الخاصية "id" والخاصية "name" بقيمة "submit"، وفي حالة النقر على هذا الزر، يمكن استهدافه باستخدام الخاصية "id" في الأنماط (CSS) أو السكريبتات (JavaScript) لتنفيذ إجراءات معينة. وتستطيع قراءة المزيد في موسوعة حسوب، حيث يوجد شرح لجميع عناصر وخواص HTML و CSS: https://wiki.hsoub.com/HTML https://wiki.hsoub.com/CSS وأيضًا يوجد قسم خاص بدروس HTML و CSS في قسم المقالات في أكاديمية حسوب: https://academy.hsoub.com/programming/html/ https://academy.hsoub.com/programming/css/

سأشرح لك بواسطة الكود ليتضح لك الأمر: فالـ Sidebar هو قائمة عمودية توضع على جانب الصفحة، وتستخدم لعرض الروابط أو الأيقونات التي توفر وصولًا سريعًا إلى أجزاء محددة من الموقع، ويتم تصميمها بشكل بسيط وتكون ثابتة أو ثابتة مع خيار لتوسيعها أو طيها عند الحاجة. مثال بسيط باستخدام HTML و CSS لإنشاء Sidebar: <!DOCTYPE html> <html> <head> <style> /* ستايل للسايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; } /* ستايل لروابط السايدبار */ .sidebar a { display: block; margin-bottom: 10px; text-decoration: none; color: #333; } </style> </head> <body> <div class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> </body> </html> في الكود لدينا عنصر <div> يحمل الصنف (class) "sidebar" يمثل الـ Sidebar. نستخدم CSS لتعيين العرض ولون الخلفية والتباعد الداخلي (padding) للسايدبار، وكذلك لتنسيق روابطه. أما الـ Navbar هو القائمة العلوية للموقع، وفي العادة ما يتم وضعها في أعلى الصفحة وتحتوي على روابط وأزرار للانتقال بين الصفحات الرئيسية للموقع أو الأقسام المختلفة، وقد يتم تصميم الـ Navbar ليكون ثابتًا في الأعلى عند التمرير (sticky) أو ليظهر/يختفي عند الحاجة. مثال: <!DOCTYPE html> <html> <head> <style> /* ستايل للنافبار */ .navbar { background-color: #f1f1f1; overflow: hidden; } /* ستايل لروابط النافبار */ .navbar a { float: left; display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } </style> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> </body> </html> عنصر <div> يحمل الصنف (class) "navbar" يمثل الـ Navbar، ونستخدم CSS لتعيين لون الخلفية وخاصية الـ overflow للنافبار. كما نستخدم CSS أيضًا لتنسيق روابط النافبار وتحديد توضعها بواسطة خاصية الـ float وتحديد التباعد الداخلي (padding) وغيرها من الخصائص. وسأقوم بدمج الكود وإضافة وظيفة لجعل الـ Sidebar قابلة للغلق والفتح، حيث استخدمت لغة الـ JavaScript لتحقيق هذه الوظيفة، وتستطيع يمكنك نسخ كود HTML التالي واختباره في متصفحك: <!DOCTYPE html> <html> <head> <style> /* ستايل النافبار */ .navbar { background-color: #333; overflow: hidden; } /* ستايل روابط النافبار */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: background-color 0.3s ease; } /* ستايل روابط النافبار عند التحويم عليها */ .navbar a:hover { background-color: #ddd; color: #333; } /* ستايل السايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; transition: width 0.3s ease; position: fixed; height: 100%; overflow-y: auto; z-index: 1; } /* ستايل روابط السايدبار */ .sidebar a { display: block; padding: 12px; text-decoration: none; color: #333; transition: background-color 0.3s ease; } /* ستايل روابط السايدبار عند التحويم عليها */ .sidebar a:hover { background-color: #ddd; color: #333; } /* ستايل زر الفتح/الغلق */ .toggle-btn { display: inline-block; text-align: center; cursor: pointer; margin-bottom: 10px; color: #333; background-color: #eee; padding: 5px; } /* ستايل الصفحة */ .content { margin-left: 250px; padding: 16px; transition: margin-left 0.3s ease; } /* إخفاء القائمة الجانبية */ .sidebar-closed{ display: none } </style> <script> // تعريف وظيفة toggleSidebar() باستخدام ES6 const toggleSidebar = () => { const sidebar = document.getElementById("sidebar"); sidebar.classList.toggle("sidebar-closed"); } </script> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> <div id="sidebar" class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> <div id="content" class="content"> <h2>محتوى الصفحة</h2> <p>هذا محتوى الصفحة الرئيسية.</p> <div class="toggle-btn" onclick="toggleSidebar()">زر فتح وإغلاق القائمة الجانبية</div> </div> </body> </html> والنتيجة هي:

1- أولاً عليك بإضافة متغير للتتبع وعرض تقدم التحميل في النافذة الحالية، ولنفترض أن المتغير يسمى progressBar. 2- بعد ذلك في الدالة uploadvideo(), بعد السطر: iStream = getContentResolver().openInputStream(pdffile);، قم بإضافة الكود التالي: int fileLength = iStream.available(); وهذا سيحسب حجم الملف المراد تحميله. 3- في داخل الحلقة while في دالة getBytes(), بعد السطر byteBuffer.write(buffer, 0, len);، قم بإضافة الكود التالي: uploadedBytes += len; int progress = (int) ((uploadedBytes * 100) / fileLength); updateProgressBar(progress); وهو يحسب حجم البيانات المحملة حتى الآن ويحسب التقدم بنسبة مئوية، وتستدعى الدالة updateProgressBar() لتحديث قيمة progress bar بناءً على التقدم. 4- إضافة الدالة updateProgressBar() في النشاط الحالي (activity) لتحديث قيمة progress bar: private void updateProgressBar(int progress) { progressBar.setProgress(progress); } 5- تعديل المكان المناسب في الكود لإنشاء وعرض progress bar، وتستطيع إضافته في أي مكان ترغب فيه. مثلاً ، إضافة الكود التالي في بداية uploadvideo(): progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 20); progressBar.setLayoutParams(params); progressBar.setProgress(0); progressBar.setMax(100); layout.addView(progressBar); حيث layout هو عنصر من واجهة المستخدم يحتوي على العناصر التي تظهر فيها progress bar، وبإمكانك استبدال layout بعنصر آخر في واجهة المستخدم الخاصة بك. وعليك استيراد المكتبات اللازمة وتعديل الأسماء المطلوبة وفقًا لما تريده في الكود.