الجمعة، 7 نوفمبر 2014

أهم قواعد جعل قوالب بلوجر متجاوبة مع جميع الأجهزة

بقلم: BR MED يوم الجمعة، 7 نوفمبر 2014 القسم : | 2 التعليقات
السلام عليكم و رحمة الله وبركاته 
في زماننا هذا قد نلاحظ كيف إقتحمت الأجهزة الذكية عالمنا ، سواء الهواتف الذكية ، الألوح أو حتى الحواسيب المحمولة، و قد بسطت للكثيرين كل ما كان يقتصر على الحواسيب ، فالولوج للإنترنيت و تصفح المواقع أصبح في متناول الجميع في كل وقت وكل مكان فيمكن لأي شخص ركوب الحافلة للذهاب للجامعة أو للعمل مثلا ، و يستغل الوقت لتصفح موقعك إن كان من المهتمين بما تقدمه ، غالبا المواقع الإخبارية التي إحتلت مكان الجرائد ، و مع إزدياد عدد مستخدمين هذه الأجهزة أصبح مدراء المواقع يسعون وراء جعل قوالب مواقعهم و مدوناتهم متجاوبة  مع كل الألواح و الهواتف بمختلف مقاسات الشاشة و اليوم سوف نرى طريقة جعل القالب متجاوب ، أو ما يعرف ب "Responsive design" و ذلك بتقنية css3 ، والآن على بركة الله، ننتقل إلى الدرس
أولا نقوم بالبحث عن الوسم <head>
ثم نضع هذا الكود بعده مباشرة
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>

الآن نبحث عن هذا الوسم ]]></b:skin>
ثم نضع فوقه مباشرة هذا الكود:
Responsive styles
******************************************/
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
نمودج الألواح الصغيرة
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
نمودج الهواتف الصغيرة
}
/***************************************************
 إن دققت النظر في هذا الكود سوف تلاحظ أنه يحتوي على عناصرمختلفة مقاسات مختلفة منها سطح المكتب ثم الألواح ثم الألوح الصغيرة ثم الأيفون ثم الهواتف ثم الهواتف الصغيرة في الأخير و هي بمقياس 320px كأقصى عرض.

*شاهد بعض أحجام الشاشات 
iPhone 5 portrait · width: 320px
iPhone 5 landscape · width: 568px 
  iPhone 6 portrait · width: 375px
iPhone 6 landscape · width: 667px 
iPhone 6 Plump portrait · width: 414px 
iPhone 6 Plump landscape · width: 736px 
Crappy Android portrait · width: 240px 
 Crappy Android landscape · width: 320px
Android (Nexus 4) portrait · width: 384px 
 Android (Nexus 4) landscape · width: 600px
 iPad portrait · width: 768px
iPad landscape · width: 1024px
========== 
portrait = عمودي
landscape =  أفقي
=================
الأن سنقوم بالتجربة على شاشة الهواتف الصغيرة، ماسنفعل هو التعديل على أهم المقاسات لعناصر البلوجر وهي كالأتي:
 body : وهو جسم القالب الرئيسي.
outer wrapper : وهو الغلاف الخارجي وداخله توجد كل العناصر.
header : وهو الجزء العلوي من القالب.
main wrapper : وهو الجزء المجمع للتدوينات في  الرئيسية .
post : وهو  التدوينات المصغرة.
sidebar : وهو الشريط الجانبي الذي يحتوي على العديد من الإضافات.
footer : وهو الجزء السفلي من القالب ويسمى أيضا بذيل الموقع نجد به بعض الأضافات أو حقوق القالب.
قد تختلف تسمية المعرفات من قالب إلى أخر لدى أطلب منكم مراجعة عناصركم بشكل دقيق فمثلا لا نجد sidebar ولكن نجد sidebar1 أو sidebar-warpper
الآن سوف نقوم بتحديد أي قياس للشاشة للعمل عليه مثلا أريده أن يكون مناسب للألواح الإلكترونية الصغيرة
شاهد المثال:
#outer-wrapper{width:768px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:768px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:768px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:768px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:768px;margin:0 auto; float:none;}
.post{  width:320px ;margin:0 auto;}
إنتبه لمقاسات العرض لم تتجاوز 768px كحد أقصى
كما قلت سابقا المعرفات التي إعتمدتها في هذا النموذج يمكن أن تجدها مغايرة لنمودجك ، فيمكنك التعديل على المعرفات بهذا المثال
 كما يمكنك أن تعدل على القوائم و الشعار و أجزاء ثانوية تختلف من قالب إلى أخر، كما يمكنك أيضا إخفاء أي جزء من القالب في الحقيقة قد يكون الدرس صعب لدى أنصحك بأن تكون لديك دراية ولو قليلة  بلغة html و css3 .

هذا نمودج الهواتف الصغيرة
#outer-wrapper{width:320px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:320px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:320px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:320px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:320px;margin:0 auto; float:none;}
.post{  width:320px ;margin:0 auto;}
 عند إختيار النمودج الخاص بنا نقوم بوضع  أكواده في المكان المناسب مثلا هذا الأخير نضعه مكان عبارة نمودج الهواتف الصغيرة بالكود السابق بعد مسح العبارة طبعا و أي تعديل أو إضافة ستقوم بوضعها مع الأكواد في نفس القسم.
يمكنك الإعتماد على هذا الموقع لمعاينة الشكل موقعك في مختلف الأجهزة
mobile responsive
أو يمكنك تصغير نافدة المتصفح بشكل يدوي للمعاينة
كان هذا هو درس اليوم  أي إستفسار أنا في الخدمة ما عليك سوى ترك تعليق
أتمنى التوفيق للجميع في أمان الله

هناك تعليقان (2):

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)