نحو الوصول الى قالب عالمى

الكثير منا يحب استخدام دقة شاشة (resolution ) مقياس 1024 * 768 أليس كذلك



بينما البعض من ضعاف النظر او كبار السن أو الذين اعتادو على دقة شاقة منخفضة أو أصحاب الشاشات الصغيرة أو بعض الشاشات القديمة مازال يستخدام دقة 800 * 600 وبالتالى حجم أكبر للشاشة , لكن ما لا يلاحظه الكثيرون جدا أن رؤية الزائر لأى موقع أو مدونة تختلف باختلاف دقة شاشته , الاختلاف الجوهرى هو أن المتصفح ينشأ مسطره افقية او عمودية فى حالة ما اذا كانت دقة شاشتك منخفضة حتى يستطيع ان يظهر لك حجم أكبر وفى نفس الوقت يحافظ على أبعاد الجرافيك والتصميمات الموجودة بالمدونة أو الموقع والتى حددها صاحب الموقع نفسه .

هذه المشكلة من ضمن المشاكل التى تعترض مصمم المواقع وتجعل من حياته جحيما بعض الوقت , ولان الاحصائيات عالميا غير اكيده حول اكثر دقة يستعملها مستخدم النت وقد تتعرض للاختلاف فى بعض الاحيان , ابسطها عندما تنهك عينيك من الجلوس امام الجهاز لفترة طويلة وتشعر بان الشاشة على بعد 2 كيلو من عينيك , أو عندما تفقد تعريف كارت الشاشة لديك حينها سيجب عليك ان ترى العالم بدقة 800 * 600 حتى تستطيع العثور على التعريف من تحت طقاطيق الانترنت لو صح التعبير, لذلك وجب على صاحب الموقع ان يصمم موقعه او مدونته بطريقة تريح كل المستخدمين بمختلف الدقات . أو على الاقل فى الكثير جدا من المواقع أن يكون الاختلاف أقل ما يكون ولا يتعدى ظهور مسطرق أفقية عند تصغير النافذة minimize .

حسب احصائيات ويكيبيديا حوالى 70% يستخدمون دقة 1024×768 بينما 30% يستخدمون دقة اعلى من ذلك , و 4% فقط يستخدمون دقة 800 * 600 , و 1% غير ذلك .
لهذا , فالشريحة الاكبر من المستخدمين لن يقابلوا أى مشكلة فى عرض موقعك أو مدونتك , لان معظم القوالب افتراضيا مصممة لتخدم الـ 70% , بينما الـ 30 % سيشاهدوا الموقع بكل سهولة غير أنه سيبدوا أصغر فى حقل الرؤية zoom out , لكن المشكلة الحقيقية هم الـ 4% مستخدمى دقة الـ 800 * 600 فعلا سيتغير نظام العرض بشكل كبير اذا لم تتجنب حدوث ذلك .

لماذا اذن تحدث تلك المشكلة ؟؟؟
اثناء تصميم الموقع او قالب المدونة او اى صفحة , فانت تختار مقاسات معينة لكل قطعه فى المدونة اليس كذلك , مثلا الاطار الجانبى عرض كذا , وصورة الراس مثلا طول كذا , الكثير جدا يستخدم وحدة البيكسل , فمثلا لو كان بالمدونة اطارين كلا منهما 200 بيكسل بالاضافة الى جزء التدوينات 550 بيكسل , فان الحاص ان عرض الجزء الفعال من المدونة سيصبح 950 بيكسل , هذا معناه ان المدونة ستتمدد كى تملأ 95% من الشاشة , ولو حاولت ان تصغر minimize سيحافظ المتصفح على الـ 950 بيكسل وبالتالى سينشأ مسطرة افقيه تسمح لك بالتنقل افقيا , ويسمى هذا القالب بالقالب الثابت fixed layout . حسنا
هل توجد وحدات اخرى غير البيكسل ؟
نعم توجد وحدة النسبة المئوية , بمعنى انت تريد ان يحتل الاطارين نسبة 40% من الشاشة , وجزء التدوينات 55% من الشاشة , عنها ستتمدد المدونة كى تحتل 95% ايضا لكن عند التصغير ستنكمش كل قطعه على حدة لكى تحافظ على نسبتها المئوية فى نفس الوقت , وبالتالى لا تظهر اى مسطرة افقية ويسمى هذا القالب بالقالب السائل fluid layout والتسمية واضحة.

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

توجد أيضا وحدة ثالثة وهى وحدة em وتتلخص فى ان مقياس كل قطعه سيتمدد وينكمش حسب حجم الخط ويسمى هذا القالب بالقالب الايلاستيكىElastic layout لكن تلك الطريقة تثير الكثير من المشاكل وقليلا ما تستخدم على حد علمى .



مثال البيكسل :
width : 160px;
مثال النسبة المئوية
width: 20%
حاول ان تصغر minimize مدونتى هنا , او ان تغير دقة الشاشة وستعرف المقصود تماما . ستلاحظ عدم وجود مسطرة فى الانترنت اكسبلورر نهائيا .

اذن ما مهى مميزات البيكسل وعيوبه ؟
الميزة الاهم فى رايى هى السهولة , والمناسبة المتناهية بين تصميم القالب وبين الجرافيك, بمعنى انك تستطيع وضع الكثير من الصور ( لاحظ ان الصور ثابتة الطول والعرض لاتتمدد ولا تنكمش ) لذلك لن يتعرض الموقع لاى سوء عند التصغير او تغيير دقة الشاشة .
اما العيوب فكما ذكرنا هى عدم المناسبة لكل دقات الشاشات المختلفة .
وماهى مميزات النسبة المئوية وعيوبها ؟
العكس تماما , فبينما تناسب تلك الطريقة اى دقة , فهى تحتاج الى قلبل جدا من الجرافيك ( انظر مثلا بريدك الاليكترونى فى الياهو او الهوتميل ستجد اقل كميه من الجرافيك ) ووجود اى صورة بمقاس غير مناسب سيشوه منظر المدونة اذا لم تتعامل معها بشكل جيد .

كيف تحول قالبك من البيكسل للنسبة المئوية ؟

اليكم صور للتوضيح اولا لقوالب مختلفة فى عدد الاطارات










المسالة تعتمد على تحويل البيكسل الى نسبة مئوية , اذهب الى صندوق الاكواد ستجد غالبا ان القالب لديك بالبيكسل , اقرا هنا للمزيد من المعلومات

القطع الاساسية التى ستعمل عليها :
1-header-wrapper
2- outer-wrapper
3- content-wrapper
4-main-wrapper
5-sidebar-wrapper
6-footer-wrapper

تلك هى القطع الاساسية باسمائها المعتدمة فى القوالب الرسمية للبلوجر , ولا يمنع من وجود غيرها او ان توجد باسماء مختلفه فى الكثير من القوالب الغير معتمدة لكن بنفس المعنى .

-قطعة الهيدر header اجعلها 100% بدلا من العرض المكتوب بالبيكسل

- قطعة ال: outer-wrapper من المعروف انها ستضم كل المحتويات الموجود تحتها لذلك سوف نحول عرضها من العرض المكتوب لديك مثلا 760px الى 100%

قطعة الـ content-wrapper هى الى تشمل تحت منها قطعتى الاطار الجانبى وجزء التدوينات , اجعلها ايضا 100% لو تحب


وهكذا مع بقية القطع الاخرى ذات العرض المحدد بالبيكسل حول ان تحدد لها نسبة مئوية مناسبة , مثلا لو مدونتك يوجد بها اطار جانبى واحد فقط بالاضافة الى جزء التدوينات , اجعل الاطار الجانبى 25% وجزء التدوينات 75% وبالتالى لاحظ ان الاطار الجانبى وجزء التدوينات سيتمدد ليكون 100% من الـ content-wrapper وليس من اى شئ اخر , بمعنى لو ان الـ content-wrapper عرضه 80% من الـ outer-wrapper فسيحتل الاطار الجانبى وجزء التدوينات 100% منه = 80% من الـ outer-wrapper , تذكر اننا نعمل بنظام العشة nesting حيث كل اب يحتوى ابنه داخل منه .

ملاحظة مهمة جدا : لو افترضنا انك حولت القالب من قالب ثابت الى قالب سائل , بينما حجم الخط لديك font-size محدد بقيمة ثابتة اى بقيمة بيكسلية مثلا 10 بيكسل , عندها سيتحول المنظر الى شكل قبيح عندما تصغر النافذه , حيث سيظل حجم الخط ثابتا بينما النافذه اصلا صغيرة , لذلك يجب ايضا تحويل حجم الخط من البيكسل الى النسبة المئوية بنفس الطريقة

غالبا ستجد حجم الخط ونوعه فى جزء الـ body فى صندوق الأكواد , اقرا هنا للمزيد

مصادر للامثلة بالاضافة الى الاكواد فى نفس الموقع :

قالب ذو اطار واحد :
ثابت
ايلاستيك الجزء الاكبر فقط هو الذى ينكمش


قالب ذو اطارين :
ثابت
ايلاستيك لاحظ الجزء بالمنتصف هو فقط الذى ينكمش
سائل كل الاجزاء تنكمش


يوجد الكثير جدا من الامثلة مدعمة بالاكواد يمكنك الاستفادة منها فى نفس الموقع
www.dynamicdrive.com

متنساش تشترك فى المواضيع عشان يوصلك احدث الدروس من هنا

اكتب ايميلك هنا