التجاوب ومبادئ التعامل معه
سبق وقد تكلمنا عن نموذج الجوال الآن سنتحدث عن التجاوب أولأ نبدأ بـ
تعريف التجاوب : التجاوب هو جعل قالب الموقع متغير الحجم بحيث يتناسب مع الشاشات والأجهزة المختلفة مثل التابلت والهواتف الذكيةما الفرق بين التجاوب ونموذج الهاتف : هناك امرين يفرقان بين نموذج الهاتف والتجاوب
الاول السرعة : وهذا سيكون في صالح نموذج الهاتف حيث أنه اسرع كثيراً لانه يقوم بإلغاء أغلب الادوات وملفات الجافا وتخفيض جودة الصورة فيجعل التحميل سريع
الثاني الإحترافية : وهذا سيكون في صالح التجاوب حيث انه يتم الإحتفاظ بشكل القالب وأدواته كاملة طبعاً يؤثر على السرعة لكنه يكون أكفأ في العمل لمن يحتاج الادوات تظهر لمن يتصفح بالاجهزة الذكية
كيف يتم انشاء التجاوب ؟
أولا كود الميتا تاج التالي يجب ان يضاف في بداية القالب بعد الوسم<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>ثم بعد ذلك يرجع العمل على الكود التالي
اكواد الـ CSS
}
الكود ببساطة يعني أنه عندما تكون الشاشة بحجم 400 بيكسل يتم تفعيل هذا الستايل
يعني كل ما ستضعه من اكواد الـ CSS في وسط الكود السابق سيتم تنشيطها عند وصول الشاشة لهذا الحجم
يمكنك تكرار الكود مع تغيير الحجم ان اردت عمل اكثر من ستايل وكلما اصبحت الشاشة في حجم محدد تتغير للستايل الذي بها
أغلب ما يتم التعامل معه هو الأحجام , لنقل مثلا ان الهيدر في نموذج الحاسب حجمها 900 بيكسل ان اعطيتها حجم 300 مثلا في كود التجاوب فعندما تصبح أبعاد الشاشة 400 بيكسل ستصبح الهيدر بمقاس 300 بيكسل فتظهر بشكل مناسب
أشهر الأحجام المستخدمة في التجاوب هي 980 , 790 , 400
فعندما تبني ستايل يتناسب مع ابعاد الشاشة من 980 الى 790 انت ضمنت عرضه بشكل جيد على أغلب الاجهزة اللوحية
وعندما تضبطه من 790 الى الـ 400 ستضمن أغلب الهواتف ذات الكبيرة والمتوسطة
اما من 400 فأقل فستضمن باقي الهواتف ذات الشاشات الصغيرة
طبعا من المهم أن يكون القالب بنيته جيده لان لو بنيته سيئة أو معتمد على الصورة
سيكون لكي تجعله متجاوب ستضطر لإستخدام كثير من اكواد الـ CSS اما لو بنيته جيده ستستخدم غالباً اكواد العرض Width
هناك كود أخير ستحتاج استخدامه وهو التالي
<b:if cond='data:blog.isMobileRequest == "false"'>هذا الكود يخص أكواد الـ HTML , JavaScript
هنا الاكواد
</b:if>
معناه ان اى اكواد ستضيفها بين هذا الكود لن تعرض على الهاتف
أو ان غيرت false الى true
معناه انها ستعرض على الهاتف فقط
المبدتئين أو من ليس لديهم خبرة في الت CSS ماذا يفعلون
ببساطة سيفيدك أن تعرف عندما ترى اى من تلك الاكواد في قالبك ان كان متجاوب الا تعبث بها فهي معناها انها خاصة بالهاتف فتتجنب التلاعب بها
هناك فائدة أخرى وهي إن اضفت آداة ولا تريدها ان تعمل على الهاتف ان تستخدم معها الكود الأخير حتى لا يفسد مظهر القالب على الهاتف لان أغلب الادوات المشروحة في المواقع لا يراعى فيها التجاوب
كيف يتم تفعيل التجاوب في القالب
من لوحة التحكم >قالب>ثم تضغط على رمز الترس تحت نموذج الجوالوتختار لا. إظهار نموذج سطح المكتب على أجهزة الجوال
المعلم معللم واحنا منه نتعلم وعمرو مصطفى اكبر المعلمين
ردحذفربي يرفع قدرك اخي أحمد وانا أقل مما تذكر انا فقط اتبادل معكم المعلومات
حذفنورت الموضوع يا طيب
شكرا اخي على الموضوع الرائغ
ردحذفشكراً لمرورك العطر أستاذ نبيل
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفحياك الله اخي الكريم
حذفأولا أنا أشكر لك امانتك وسيجازيك الله عليها في الدنيا والآخر بإذن الله
اما هذا السارق الذي نشر القالب السابق هو انسان حقير وسآخذ حقي منه عاجلاً او أجلا
بالنسبة للإستخدام القالب لا أستطيع السماح بذلك لان القالب كان معروض للبيع وهناك من اشتروه ومن الظلم للمشترين ان اسمح لاحد أن يستخدمه مجاناً فلا أستطيع ذلك معذرة
ومعذرة على حذف محتوى التعليق حتى لا يكون هناك نشر للرابط الموجود بها
وشاكر لك مرة ثانية
انا اتفهمك اخى عمرو اعرف ما تقوله لذلك فأان قمت بحذف قالبك من الجهاز لى وشكرا لك اخى
حذفوان شاء الله اجمع المال انا من مصر مثلك اخى
ان سعر قالب مدونة كن مدون 15$ فيمكننى ان ادفع لك بالمصرى اى 15 فى 8 تساوى 120 جنيه مصرى اى انى يمكننى ان احول لك هذا المبلغ رصيد لهاتفك مثلاً
نعم أخي الكريم ممكن تواصل معي عبر البريد
حذفhttp://cnmu.blogspot.com/p/c.html
انا كل خدماتي التي اقدمها عموما على خمسات
اقدمها للمقيمين في مصر عبر كروت الشحن
اخى عمرو هل يوجد طرق لتسريع قالب وما هى
ردحذفلا يوجد أى طرق للتسريع وجميع الأكواد التي تتكلم عن تلك الامور لا تسرع شئ
حذفلتسريع القالب عليك التخلص من بعض الإضافات التي قد تكون كمالية وليست مهمة كثيراً
او الإضافات الثقيلة حاول أيضاً استخدام صور بأحجام صغيرة قدر الإمكان أقصد الحجم وليس المساحة
فقد تكون صورة بمساحة 125X125 ويكون حجمها أكبر من صورة بمساحة 700x600
اخي عمرو هل يمكن الانضمام الى المدونة كمؤلف ^_^
ردحذفطبعاً انا اشكرك كثيراً على هذا العرض
حذفلكن غير متاح حالياً إضافة كتاب للمدونة
لكن مرة ثانية شاكر جداً على العرض
ولا يهمك يا غالي
حذفربي يوفقك ^_^
ربنا يزيدك اخى تبهرنا كل يوم بما هو جديد اسف على الغيبة الطويلة
ردحذفالتجاوب على الهاتف هو موضوع يؤرقني دائما ، حيث ان الاعلانات لا تظهر على نموذج الهاتف لهذا اوقف هذا النموذج ، و لكن تحدث لي بعض المشاكل بسبب تجاوب بعض الاضافات .
ردحذفسأحاول تطبيق ما ورد في هذا الدرس
بارك الله فيك دمت مبدعا