المدونة · ٥ سبتمبر ٢٠٢٦

شرح تطبيقات الويب تانية بكالوريا: الفرونت إند وتجربة المستخدم

الوحدتين ٣ و٤ في منهج البرمجة: تطبيق الويب متركّب إزاي، إيه اللي بيحصل لما تفتح موقع، HTML وCSS وJavaScript، وإزاي تقيّم تجربة المستخدم.

الوحدتين دول عن إيه؟

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

تطبيق الويب متركّب من إيه؟

أي موقع بتستخدمه، زي جوبكالوريا نفسه، ٣ أجزاء:

  • الواجهة الأمامية (Frontend): اللي بتشوفه في المتصفح.
  • الخادم (Server) أو الباك إند: اللي بيفكّر: مين انت، وتشوف إيه.
  • قاعدة البيانات: اللي بتحفظ: حسابك، دروسك، درجاتك.

الواجهة الأمامية: ٣ لغات، ٣ وظايف

  • HTML: الهيكل. ده عنوان، ده زرار، دي صورة.
  • CSS: الشكل. الألوان والخطوط والمسافات.
  • JavaScript: الحركة. لما تدوس على زرار يحصل حاجة.

تشبيه يسهّلها: البيت. HTML الحيطان، CSS الدهان والعفش، وJavaScript الكهربا.

إيه اللي بيحصل لما تكتب عنوان موقع؟

  1. المتصفح بيسأل: الاسم ده عنوانه فين؟ (DNS)
  2. بيبعت طلب (Request) للخادم.
  3. الخادم بيجهّز الصفحة، وممكن يسأل قاعدة البيانات.
  4. بيرجّع رد (Response) معاه رقم حالة: 200 تمام، 404 مش موجود، 500 مشكلة عند الخادم.
  5. المتصفح بيرسم الصفحة قدامك.

ولما يكون العنوان HTTPS، الكلام ده كله متشفّر. اقرا عن التشفير في شرح الأمن السيبراني.

تصميم الويب والوسائط

  • الوسائط: نص، صور، صوت، فيديو. كل نوع ليه صيغ، وكل ما الجودة تعلى الملف بيكبر والصفحة بتتقل. الشطارة إنك توازن.
  • تصميم المعلومات: الأهم الأول، والعناوين واضحة، ومتحطش كل حاجة في شاشة واحدة.
  • تجربة المستخدم (UX): المستخدم يعرف يعمل اللي جاي عشانه بسهولة؟ الزراير واضحة؟ لما يدوس، يعرف إن حاجة حصلت؟
  • تقييم المواقع: السرعة، سهولة الاستخدام، إن أي حد يقدر يستخدمه، وصحة المحتوى.
  • التحسين المستمر: اعمل، جرّب مع ناس حقيقيين، صلّح، وكرّر.

سؤال تدريب (من عندنا)

فتحت موقع وطلعلك «404». المشكلة فين؟ الإجابة: الصفحة اللي طلبتها مش موجودة على الخادم، يعني العنوان غلط أو الصفحة اتشالت. الخادم نفسه شغال.

اتعلّمها من حد بيعملها

م. أحمد طارق بيبني منصات ويب ويديرها من سنين، وبيشرح الوحدتين دول على صفحة المادة. أول ٥ فيديوهات ببلاش.

المصادر

كل المقالات

ابدأ بالفيديوهات الببلاش.

اعمل حساب، اختار سنتك، واتفرج على أول خمس فيديوهات من كل مدرّس قبل ما تدفع أي حاجة. أكواد، مش فيزا.