عروض مركز بلوجر

التجاوب ومبادئ التعامل معه

Responsive Website
سبق وقد تكلمنا عن نموذج الجوال الآن سنتحدث عن التجاوب أولأ نبدأ بـ
تعريف التجاوب : التجاوب هو جعل قالب الموقع متغير الحجم بحيث يتناسب مع الشاشات والأجهزة المختلفة مثل التابلت والهواتف الذكية
ما الفرق بين التجاوب ونموذج الهاتف : هناك امرين يفرقان بين نموذج الهاتف والتجاوب
الاول السرعة : وهذا سيكون في صالح نموذج الهاتف حيث أنه اسرع كثيراً لانه يقوم بإلغاء أغلب الادوات وملفات الجافا وتخفيض جودة الصورة فيجعل التحميل سريع

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

كيف يتم انشاء التجاوب ؟

أولا كود الميتا تاج التالي يجب ان يضاف في بداية القالب بعد الوسم <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
ثم بعد ذلك يرجع العمل على الكود التالي
@media screen and (max-width : 400px) {
اكواد الـ CSS
}

الكود ببساطة يعني أنه عندما تكون الشاشة بحجم 400 بيكسل يتم تفعيل هذا الستايل
يعني كل ما ستضعه من اكواد الـ CSS في وسط الكود السابق سيتم تنشيطها عند وصول الشاشة لهذا الحجم
يمكنك تكرار الكود مع تغيير الحجم ان اردت عمل اكثر من ستايل وكلما اصبحت الشاشة في حجم محدد تتغير للستايل الذي بها
أغلب ما يتم التعامل معه هو الأحجام , لنقل مثلا ان الهيدر في نموذج الحاسب حجمها 900 بيكسل ان اعطيتها حجم 300 مثلا في كود التجاوب فعندما تصبح أبعاد الشاشة 400 بيكسل ستصبح الهيدر بمقاس 300 بيكسل فتظهر بشكل مناسب
أشهر الأحجام المستخدمة في التجاوب هي 980 , 790 , 400
فعندما تبني ستايل يتناسب مع ابعاد الشاشة من 980 الى 790 انت ضمنت عرضه بشكل جيد على أغلب الاجهزة اللوحية
وعندما تضبطه من 790 الى الـ 400 ستضمن أغلب الهواتف ذات الكبيرة والمتوسطة
اما من 400 فأقل فستضمن باقي الهواتف ذات الشاشات الصغيرة
طبعا من المهم أن يكون القالب بنيته جيده لان لو بنيته سيئة أو معتمد على الصورة
سيكون لكي تجعله متجاوب ستضطر لإستخدام كثير من اكواد الـ CSS اما لو بنيته جيده ستستخدم غالباً اكواد العرض Width
هناك كود أخير ستحتاج استخدامه وهو التالي
<b:if cond='data:blog.isMobileRequest == "false"'>
هنا الاكواد
</b:if>
هذا الكود يخص أكواد الـ HTML , JavaScript
معناه ان اى اكواد ستضيفها بين هذا الكود لن تعرض على الهاتف
أو ان غيرت false الى true
معناه انها ستعرض على الهاتف فقط
المبدتئين أو من ليس لديهم خبرة في الت CSS ماذا يفعلون
ببساطة سيفيدك أن تعرف عندما ترى اى من تلك الاكواد في قالبك ان كان متجاوب الا تعبث بها فهي معناها انها خاصة بالهاتف فتتجنب التلاعب بها
هناك فائدة أخرى وهي إن اضفت آداة ولا تريدها ان تعمل على الهاتف ان تستخدم معها الكود الأخير حتى لا يفسد مظهر القالب على الهاتف لان أغلب الادوات المشروحة في المواقع لا يراعى فيها التجاوب

كيف يتم تفعيل التجاوب في القالب

من لوحة التحكم >قالب>ثم تضغط على رمز الترس تحت نموذج الجوال
وتختار لا. إظهار نموذج سطح المكتب على أجهزة الجوال

15تعليقات

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. المعلم معللم واحنا منه نتعلم وعمرو مصطفى اكبر المعلمين

    ردحذف
    الردود
    1. ربي يرفع قدرك اخي أحمد وانا أقل مما تذكر انا فقط اتبادل معكم المعلومات
      نورت الموضوع يا طيب

      حذف
  2. شكرا اخي على الموضوع الرائغ

    ردحذف
    الردود
    1. شكراً لمرورك العطر أستاذ نبيل

      حذف
  3. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف
    2. انا اتفهمك اخى عمرو اعرف ما تقوله لذلك فأان قمت بحذف قالبك من الجهاز لى وشكرا لك اخى
      وان شاء الله اجمع المال انا من مصر مثلك اخى
      ان سعر قالب مدونة كن مدون 15$ فيمكننى ان ادفع لك بالمصرى اى 15 فى 8 تساوى 120 جنيه مصرى اى انى يمكننى ان احول لك هذا المبلغ رصيد لهاتفك مثلاً

      حذف
    3. نعم أخي الكريم ممكن تواصل معي عبر البريد
      http://cnmu.blogspot.com/p/c.html
      انا كل خدماتي التي اقدمها عموما على خمسات
      اقدمها للمقيمين في مصر عبر كروت الشحن

      حذف
  4. اخى عمرو هل يوجد طرق لتسريع قالب وما هى

    ردحذف
    الردود
    1. لا يوجد أى طرق للتسريع وجميع الأكواد التي تتكلم عن تلك الامور لا تسرع شئ
      لتسريع القالب عليك التخلص من بعض الإضافات التي قد تكون كمالية وليست مهمة كثيراً
      او الإضافات الثقيلة حاول أيضاً استخدام صور بأحجام صغيرة قدر الإمكان أقصد الحجم وليس المساحة
      فقد تكون صورة بمساحة 125X125 ويكون حجمها أكبر من صورة بمساحة 700x600

      حذف
  5. اخي عمرو هل يمكن الانضمام الى المدونة كمؤلف ^_^

    ردحذف
    الردود
    1. طبعاً انا اشكرك كثيراً على هذا العرض
      لكن غير متاح حالياً إضافة كتاب للمدونة
      لكن مرة ثانية شاكر جداً على العرض

      حذف
    2. ولا يهمك يا غالي
      ربي يوفقك ^_^

      حذف
  6. ربنا يزيدك اخى تبهرنا كل يوم بما هو جديد اسف على الغيبة الطويلة

    ردحذف
  7. التجاوب على الهاتف هو موضوع يؤرقني دائما ، حيث ان الاعلانات لا تظهر على نموذج الهاتف لهذا اوقف هذا النموذج ، و لكن تحدث لي بعض المشاكل بسبب تجاوب بعض الاضافات .
    سأحاول تطبيق ما ورد في هذا الدرس

    بارك الله فيك دمت مبدعا

    ردحذف