شاشة الإنتظار

لغة القالب

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

كن مدون
الاثنين, سبتمبر 14, 2015
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 ماذا يفعلون
ببساطة سيفيدك أن تعرف عندما ترى اى من تلك الاكواد في قالبك ان كان متجاوب الا تعبث بها فهي معناها انها خاصة بالهاتف فتتجنب التلاعب بها
هناك فائدة أخرى وهي إن اضفت آداة ولا تريدها ان تعمل على الهاتف ان تستخدم معها الكود الأخير حتى لا يفسد مظهر القالب على الهاتف لان أغلب الادوات المشروحة في المواقع لا يراعى فيها التجاوب

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

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

نظام التعليقات المتاح حالياً هو الخارجي وذلك بسبب تجارب أقوم بها حالياً على نظام التعليقات وسيعود النظام السابق في أقرب وقت ممكن

‏قال iiii
المعلم معللم واحنا منه نتعلم وعمرو مصطفى اكبر المعلمين
‏قال كن مدون
ربي يرفع قدرك اخي أحمد وانا أقل مما تذكر انا فقط اتبادل معكم المعلومات
نورت الموضوع يا طيب
‏قال مدونة نبيل
شكرا اخي على الموضوع الرائغ
‏قال كن مدون
شكراً لمرورك العطر أستاذ نبيل
‏قال Unknown
أزال أحد مشرفي المدونة هذا التعليق.
‏قال iiii
اخى عمرو هل يوجد طرق لتسريع قالب وما هى
‏قال كن مدون
حياك الله اخي الكريم
أولا أنا أشكر لك امانتك وسيجازيك الله عليها في الدنيا والآخر بإذن الله
اما هذا السارق الذي نشر القالب السابق هو انسان حقير وسآخذ حقي منه عاجلاً او أجلا
بالنسبة للإستخدام القالب لا أستطيع السماح بذلك لان القالب كان معروض للبيع وهناك من اشتروه ومن الظلم للمشترين ان اسمح لاحد أن يستخدمه مجاناً فلا أستطيع ذلك معذرة
ومعذرة على حذف محتوى التعليق حتى لا يكون هناك نشر للرابط الموجود بها
وشاكر لك مرة ثانية
‏قال كن مدون
لا يوجد أى طرق للتسريع وجميع الأكواد التي تتكلم عن تلك الامور لا تسرع شئ
لتسريع القالب عليك التخلص من بعض الإضافات التي قد تكون كمالية وليست مهمة كثيراً
او الإضافات الثقيلة حاول أيضاً استخدام صور بأحجام صغيرة قدر الإمكان أقصد الحجم وليس المساحة
فقد تكون صورة بمساحة 125X125 ويكون حجمها أكبر من صورة بمساحة 700x600
‏قال Unknown
انا اتفهمك اخى عمرو اعرف ما تقوله لذلك فأان قمت بحذف قالبك من الجهاز لى وشكرا لك اخى
وان شاء الله اجمع المال انا من مصر مثلك اخى
ان سعر قالب مدونة كن مدون 15$ فيمكننى ان ادفع لك بالمصرى اى 15 فى 8 تساوى 120 جنيه مصرى اى انى يمكننى ان احول لك هذا المبلغ رصيد لهاتفك مثلاً
‏قال كن مدون
نعم أخي الكريم ممكن تواصل معي عبر البريد
http://cnmu.blogspot.com/p/c.html
انا كل خدماتي التي اقدمها عموما على خمسات
اقدمها للمقيمين في مصر عبر كروت الشحن
‏قال Mis Pro Fav
اخي عمرو هل يمكن الانضمام الى المدونة كمؤلف ^_^
‏قال كن مدون
طبعاً انا اشكرك كثيراً على هذا العرض
لكن غير متاح حالياً إضافة كتاب للمدونة
لكن مرة ثانية شاكر جداً على العرض
‏قال Mis Pro Fav
ولا يهمك يا غالي
ربي يوفقك ^_^
‏قال ahmed hegazy
ربنا يزيدك اخى تبهرنا كل يوم بما هو جديد اسف على الغيبة الطويلة
‏قال Mohammed
التجاوب على الهاتف هو موضوع يؤرقني دائما ، حيث ان الاعلانات لا تظهر على نموذج الهاتف لهذا اوقف هذا النموذج ، و لكن تحدث لي بعض المشاكل بسبب تجاوب بعض الاضافات .
سأحاول تطبيق ما ورد في هذا الدرس

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

عدد المواضيع