جوجل أطلقت تحديث mobilegeddon لخوارزميات البحث في الجوال هذة الخوارزميات تؤثر على عمليات البحث على الهاتف و على أجهزة سطح المكتب . لذلك جعل موقعك متجاوب مع الهاتف هو امر مهم جدا نظرا لكثرة استخدام الهواتف وتفضيل من موقعه متجاوب في نتائج البحث.
جعل الموقع متجاوب ليس بالامر السهل فعليك ان تتعلم وتكون على دراية بأساسيات html و css
تم شرح دروس ستجدها هنا تعلم أساسيات css و html
وان كنت لا تعرف اهمية التجاوب مع الشاشات فتابع معي سأشرحها باختصار في الاسطر القادمة
- اهمية التجاوب مع الشاشات
تصفح الانترنت باستخدام الهواتف أصبح ينمو بشكل كبير حسب الاحصائيات ومع هذا النمو يمكننا القول أن في المستقبل القريب أجهزة المحمول (الهواتف) ستسود في تصفح الانترنت عن اي اجهزة اخرى . وبسبب الارقام الكبيرة لعدد الباحثين المستخدمين الهواتف فاهمية تجاوب الموقع مع الهواتف اصبحت واجبة .
- ما هو التجاوب مع الشاشات:-
التجاوب مع الشاشات هو قدرة موقعك للتأقلم مع جميع الشاشات والظهور بشكل افضل للزائر ويمكننا القول بأنه القدرة على جعل موقعك يحافظ على تجربة جيدة للمستخدم من اجهزة سطح المكتب الى اجهزة الهواتف
- واهميتها كما وضحنا في اول المقال بعد تحديثات جوجل سيكون عليك الكشف على موقعك في مشرفي جوجل ومعرفة هل هو متجاوب مع الهاتف ام لا. لان معظم المستخدمين الان يتجهون الى الاجهزة اللوحية الصغير ويجب عليك مواكبتهم حتى لا تخسر عدد كبير من الزوار .
1- الخطوة الأولى
هي وضع كود ميتا في (head) حتى نخبر المتصفحات أن القالب يعلم كيف يهيئ نفسة مع جميع الشاشات ولنفعل ذلك علينا اضافة كود الميتا الصحيح وهو
علينا أن نضعة في الجزء الخاص بال (head) وهذا الكود ببساطة يخبر المتصفحات أن العرض الخاص بالموقع يكون مساوي للعرض الخاص بالجهاز الذي يتصفحة الزائر سواء كان هاتف أو تابلت بأي نوع كان
كيفية اضافة كود الميتا تاج :-
1- ندخل الى لوحة تحكم بلوجر
2- اضغط على القالب الذي تريد العمل عليه ثم من القائمة اختار قالب
3- اضغط على تحرير html وابحث عن <head>
ثم ضع هذا الكود أسفل منه
2- الخطوة الثانية
و هي جعل التصميم كالسائل الذي يتشكل حسب الشكل الموضوع به فهنا سنفعل مثل الشيئ مع التصميم وهو جعله (fluid) وهو ان عرض القالب سيأخذ الحجم المناسب للشاشة الذي يعرض منها . لذا نفهم من هذة الجزئية ان حجم القالب سيكون له القدرة على التأقلم مع احجام الشاشات المختلفة . ولنعطي مثال عن هذا الشيئ وهو اثناء تصفحك من الهاتف مثلا كما بالصورة التي بالأسفل
لنفرض أنك تتصفح موقعنا من الهاتف وتمسك الجهاز بالعرض وكان الموقع يظهر معك بدون مشكلة و بعد مدة غيرت طريقة العرض ومسكت الهاتف بالطول وستجد أن الموقع يتقلص معك ويصبح نفس الشكل ولو فكرت لوهلة عن كيفية حدوث الأمر ستجد أن الاجابة بسيطة وهي أن عرض التصميم أو القالب متجاوب أو كما شبهناه بالسائل يأخذ الحجم المناسب للشاشة التي يتصفح منها الزائر .بعد أن فهمنا هذة الخطوة دعونا نتعرف على كيفية تطبيقها وهي من خلال اعطاء العناصر والقيم في التصميم النسبة المئوية % و em بدلا من البيكسل px . ومثال على هذا
والمقصود هنا بال max-width هو اذا كان هناك شاشة بنفس هذا الحجم أو أقل طبق عليها هذة الأكواد . وسنقوم بوضع هذة الأكواد قبل هذا الوسم ]]></b:skin> وأعتقد أن الجميع يعرفة فهو وسم اغلاق لمكان كتابة ال css نضع قبله ونعدل عليه بما يناسبنا . ولا تنسى عند تكويد قالبا يجب أن نطبق خاصية التجاوب مع العرض وهو اعطاء العناصر عرض بنسبة مئوية وليس بالبيكسل .
الى هنا ينتهي موضوعنا أتمنى أن ينال اعجابكم . فموضوع تجاوب القوالب هو مجال واسع جدا أتمنى ان اكون وفقت في هذة المقالة لجعلك تفهم وتتعلم شيئ عن جعل موقعك متجاوب . وبالطبع هذة الطريقة تنفع لأي موقع لكن هناك بعض الاختلافات البسيطة لكن معظم العناصر التي تحدثنا عنها هي اساسية في جميع المواقع . بالطبع ستواجة مشاكل أثناء تجاوبك لاحد المواقع فيمكنك وبسهولة وضع تعليق بالاسفل وسنرد عليك في أقرب وقت ممكن لا تنسى مشاركة المقالة مع أصدقائك والانضمام لأعضاء المدونة ☺
جعل الموقع متجاوب ليس بالامر السهل فعليك ان تتعلم وتكون على دراية بأساسيات html و css
تم شرح دروس ستجدها هنا تعلم أساسيات css و html
وان كنت لا تعرف اهمية التجاوب مع الشاشات فتابع معي سأشرحها باختصار في الاسطر القادمة
- اهمية التجاوب مع الشاشات
تصفح الانترنت باستخدام الهواتف أصبح ينمو بشكل كبير حسب الاحصائيات ومع هذا النمو يمكننا القول أن في المستقبل القريب أجهزة المحمول (الهواتف) ستسود في تصفح الانترنت عن اي اجهزة اخرى . وبسبب الارقام الكبيرة لعدد الباحثين المستخدمين الهواتف فاهمية تجاوب الموقع مع الهواتف اصبحت واجبة .
- ما هو التجاوب مع الشاشات:-
التجاوب مع الشاشات هو قدرة موقعك للتأقلم مع جميع الشاشات والظهور بشكل افضل للزائر ويمكننا القول بأنه القدرة على جعل موقعك يحافظ على تجربة جيدة للمستخدم من اجهزة سطح المكتب الى اجهزة الهواتف
- واهميتها كما وضحنا في اول المقال بعد تحديثات جوجل سيكون عليك الكشف على موقعك في مشرفي جوجل ومعرفة هل هو متجاوب مع الهاتف ام لا. لان معظم المستخدمين الان يتجهون الى الاجهزة اللوحية الصغير ويجب عليك مواكبتهم حتى لا تخسر عدد كبير من الزوار .
1- الخطوة الأولى
هي وضع كود ميتا في (head) حتى نخبر المتصفحات أن القالب يعلم كيف يهيئ نفسة مع جميع الشاشات ولنفعل ذلك علينا اضافة كود الميتا الصحيح وهو
علينا أن نضعة في الجزء الخاص بال (head) وهذا الكود ببساطة يخبر المتصفحات أن العرض الخاص بالموقع يكون مساوي للعرض الخاص بالجهاز الذي يتصفحة الزائر سواء كان هاتف أو تابلت بأي نوع كان
كيفية اضافة كود الميتا تاج :-
1- ندخل الى لوحة تحكم بلوجر
2- اضغط على القالب الذي تريد العمل عليه ثم من القائمة اختار قالب
3- اضغط على تحرير html وابحث عن <head>
ثم ضع هذا الكود أسفل منه
2- الخطوة الثانية
و هي جعل التصميم كالسائل الذي يتشكل حسب الشكل الموضوع به فهنا سنفعل مثل الشيئ مع التصميم وهو جعله (fluid) وهو ان عرض القالب سيأخذ الحجم المناسب للشاشة الذي يعرض منها . لذا نفهم من هذة الجزئية ان حجم القالب سيكون له القدرة على التأقلم مع احجام الشاشات المختلفة . ولنعطي مثال عن هذا الشيئ وهو اثناء تصفحك من الهاتف مثلا كما بالصورة التي بالأسفل
كما نشاهد في المثال بالأعلى أن container هو الاب ل main والاب (container) حددنا له عرض وهو 960 بيكسل . لذلك الابن (main) سيأخذ عرض من الاب بنسبة 65 % وسيكون العرض في هذة الحالة 625 بيكسل فهذا كان مثال على النسبة كيفية فهم التعامل معها فسيمكنك التعامل مع جميع العناصر من هذة النقطة والتعامل معهم بالنسبة وعلى طريقة هذا المثال فان وجد اب له ابنين ونريد أن نقسم لهم عرض يناسبهم فسنعطي على سبيل المثال الكبير منهم 65% والصغير نعطية باقي النسبة وهي 35% وبهذا حققنا التوازن بينهم وبين الاب لهم .
3- الخطوة الثالثة
وهي استخدام الميديا كويري (media queries) فباختلاف الاجهزة التي يتصفح منها الزائر الانترنت سواء كان هاتف او تابلت بحجم شاشة مختلف وبالطبع كل هاتف يختلف عن الاخر في الحجم والشكل لذا اتى اهمية media query في جعل المصمم او المبرمج يصمم موقعة على مختلف المقاسات والشاشات وله حرية التحكم في كيفية اظهار التصميم على اي شاشة فمثلا يمكننا اظهار زرار ما في شاشة الهاتف وفي نفس الوقت ستجدة مخفيا من شاشة التابلت .
وهذا هو الشكل الذي اوصي به عند التعامل مع media queries
الى هنا ينتهي موضوعنا أتمنى أن ينال اعجابكم . فموضوع تجاوب القوالب هو مجال واسع جدا أتمنى ان اكون وفقت في هذة المقالة لجعلك تفهم وتتعلم شيئ عن جعل موقعك متجاوب . وبالطبع هذة الطريقة تنفع لأي موقع لكن هناك بعض الاختلافات البسيطة لكن معظم العناصر التي تحدثنا عنها هي اساسية في جميع المواقع . بالطبع ستواجة مشاكل أثناء تجاوبك لاحد المواقع فيمكنك وبسهولة وضع تعليق بالاسفل وسنرد عليك في أقرب وقت ممكن لا تنسى مشاركة المقالة مع أصدقائك والانضمام لأعضاء المدونة ☺
مسابقات
تبادل
اعلاني
انضم لنا
الفهرس
اكواد
الالوان
محول
الاكواد
فوتوشوب
اونلاين
صفحتنا على
الفيس بوك
تم
فتح باب التبادل الاعلاني مع مدونة احترافي بشروط جديدة
الحلقة
12:شرح تغير شكل الفيس بوك الى الشكل الجديد
الحلقة
25:تحميل قالب احترافي للمدونات التقنية
الحلقة
25: طريقة تحميل فيديوهات من على اليوتيوب بواسطة الفاير فوكس بدون برنامج
الحلقة
48: تحميل قالب مدونة احترافي المدفوع الحالى مجانا فى مسابقة القالب المدفوع
Click here for comments 2 التعليقات:
شكراااا على الموضوع الرائع
العفو اخي ايوب اسعدنا تعليقك :)