الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيف تصممون؟

بدأه موظف في 6 أغسطس 2008 · 8 رد · 1,102 مشاهدة · في منتدى تطوير المواقع بـ PHP
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم و رحمة الله و بركاته،،،،

مع أنه سؤال من كلمتين، لكنه أحد أصعب المشاكل التي واجهتها منذ أن بدأت أحضر نفسي لمهنة تطوير مواقع الإنترنت منذ حوالي السنة، حقيقة يا إخوان....كيف تصممون؟!

دائماً أواجه مشكلة كيف أضمن أن موقعي سيظهر بنفس الشكل و التصميم الذي أريده في حال إختلف نوع المتصفح الذي يعرض به الزائر الموقع أو اختلف حجم و دقة وضوح الشاشة التي سيعرض بها، يتعبني هذا الأمر و يأخذ مني جهد و وقت، وقليلاً ما أصل للنتيجة التي أريدها تماماً.

أعرف أن جزء كبير من حل هذا الأمر هو في إتقان ال CSS، تنبهت لهذا الأمر من شهور فحرصت على دراسة ال CSS و أصبح عندي مهارات لا بأس بها فيها، لكني مع هذا ما زلت أحس أن عندي ثغرة ما لا أعلم ما هي !، و الأمر يجري معي ببطىء و زاد سوءاً أني أعمل لوحدي و ليس في شركة تصميم قد يكون هناك لي زميل أو مدير ما يدلني على بعض المسائل و يساعدني في إختصار الوقت و الجهد.

كيف تصممون يا إخوان؟!...كيف تضمنون أن موقعكم سيظهر بالشكل و التصميم المطلوب حتى و إن اختلف نوع المتصفح أو حجم الشاشة؟؟؟

هل من إرشادات ما...نصائح ما...أدوات ما...حتى و إن كتاب ما...يساعدني في حل هذا المشكلة بأسرع ما يمكن...أو أي شيء يجب أن أعلمه تستطيعون مساعدتي فيه.

أرجو ألا يبخل أي من الإخوة بأي شيء عنده، حتى و إن بدا له مسألة صغيرة أو جانبية أو معلومة مفترض أنها أساسية ولا تذكر...فقد لا يكون الأمر عندي كذلك و قد أكون غافل عنه.

شكراً للجميع،،،،

#2

السلام عليكم ..

رغم ان الموضوع ليس في القسم المناسب لانه يختص بالتصميم , وليس بالـ PHP , ولكن لابأس .

حقيقةً , سؤال ممتاز وجميل ومهم .

معضله عدم التوافقيه , فعلاً تعد من المشاكل المهمه التي تعيق عمل مطوريين الويب , والذي يفترض ان لايهتموا بها طالما انه تم وضع معايير عالميه في يخص هذا الموضوع . ولكن اصبح لامفر من ان يقوم مطوري الويب وخصوصاً مسئؤلي التصميم ان يتعاملوا مع هذه المشكله لضمان عمل الموقع بشكل مثالي لدى اغلب العملاء .

لذلك اعتقد انه لابد من ان يتم من البدايه واثناء عمليه البناء الاخذ في الاعتبار هذه المشكله .

طبعاً لاندخل في جدل من هو الذي سبب في هذه المشكله من المتصفحات ولكن كلاََ له نصيبه من العبء .

من ضمن الخطوات التي سوف تساعدنا في تلافي مشكله عدم التوافقيه , هي اولاً التأكد والتحقق من صلاحية شفره الـ HTML او الـ XHTML مثل التاكد من اغلاق الوسوم . طبعاً هذه العمليه تصبح صعبه في حال ضخامه الكود , لذا يمكن استخدام خدمه التحقق من الـ W3C نفسها وهي http://validator.w3.org .

ايضاً نفس الامر بالنسبه للـ CSS , فهناك بعض الهاكات للـ CSS التي قد تعمل على متصفح ولاتعمل على الاخر . يمكن ان نستخدم ايضاً خدمة CSS validator من الـ W3C للتحقق .

وهناك موقع جيد وجدته, سيفيد في هذه الناحيه وهو http://www.positioniseverything.net.

ايضاً , انصح في كل مرحله مفصليه من مراحل تصميم الموقع ان يتم اختباره على اغلب المتصفحاتIE 6.0, IE 7.0, Firefox, Safari, Netscape and Opera ويكن استخدام موقع http://browsershots.org لتسهيل هذه العمليه ..

وايضاً في الغالب فانه يتم إستخدام الجافا سكربت للمساعده في توافقيه الـ CSS مع المتصفح من خلال فحص المتصفح واختيار نمط الـ CSS المناسب .

ايضاً موضوع استخدام الاجاكس , يجب عليك اثناء استخدامك لها ان تأخذ في الاعتبار موضوع توافقيه المتصفحات وذلك من خلال فحص نوع المتصفح من خلال الجافا سكربت , وبالتاي استخدام الطريق الصحيحه والمناسبه لتفعيل الاجاكس .

بالنسبه لموضوع إختلاف دقه الشاشه وماينتج عنها من اختلاف طريقه عرض الموقع , فإنك عند تصميمك للموقع , في الغالب هناك طريقتين من طرق تصميم الـ Layout للموقع , fixed-width او liquid layout .

Fixed Width واضح من اسمه , ففيه , يتم جعل ابعاد الموقع ثابته بنسب ما .

من الناحيه الاخرى , Liquid layouts , فيه يكون كامل تصميم الصفحه قابل للتمدد والانكماش بحسب عرض المتصفح .

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

لا إله الإ الله وحده لا شريك له الملك وله الحمد يحي ويميت وهو على كل شئ قدير

------------------------------------------------------------------------------------------------

gazabigBanner.jpg

------------------------------------------------------------------------------------------------

#3

اجعل قيم الخاصيات التالية :width , margin , height قيماً نسبية ولا تعطيها قيماً ثابتة وبهذا تتغير بتغير عرض وطول المتصفح لتبقى محافظة على النسبة ذاتها بالنسبة للمتصفح .

مثال :

a
{
width:10%;
margin : 5% 5% 5% 5%;
}

وطبعاً أي خاصية أخرى غير التي ذكرتها تحتاح إلى قيم عددية اجعلها قيمأً نسبية ..

#4

شكراً لك أخي الكريم "محمد معاشر" على مشاركتك.

أعتذر بداية عن وضعي لهذا السؤال في هذا القسم، حقيقة وضعته أيضاً في قسم التصميم أملاً في الحصول على جواب هناك لأهمية الأمر عندي. لكني بسبب ملاحظتي أن الأمر متداخل عندنا في بلادنا العربية، فمهنة مصمم المواقع اختلطت و ذابت في مهنة مطور المواقع و العكس صحيح في أحيان كثيرة. بعكس ما أظنه حاصل في أوروبا و أمريكا من فصل للأمور ، هناك أظن أن إنتاج موقع إنترنت يدخل فيه ثلاث مهن منفصلة: مصمم جرافيكس، مصمم مواقع، و مطور مواقع، لذا رأيت طرح السؤال هنا لعلمي أن حتى المطورين هنا واجهوا نفس الأمر مثلي و حتماً لهم رأياً فيه.

شكراً على تذكيري بمسائل التحقق من الوسوم و المواقع الخاصة بهذا التحقق، فعلاً هذا الأمر قد يكون مصدر مشاكل خصوصاً في حال تضخم شفرة الصفحة و كبرها. و شكراً على الموقع الممتاز http://www.positioniseverything.net/ ، فما زلت أعتقد أن معظم مشاكلي هي خاصة بأمور ال Positioning ، سأحرص على قراءة كل مقالات هذا الموقع و ظني أنه سيفيدني كثيراً.

من أكثر ما لفت انتباهي في كلامك أخي "محمد" قولك أن ليس هناك منهجية معينة للتعامل مع الأمر، كل يستخدم طريقته الخاصة حتى يصل لما يريد !. شعرت أن هذا القول يلخص كثيراً الثغرة التي أشعر بوجودها عندي، أني لا أستخدم منهجية معينة ، في كل مرة أبحث عن حل في اتجاه و أسلوب مختلف، صحيح في الغالب أصل إلى حل مقبول، لكن عدم وجود منهجية واضحة عندي هو مصدر الشك دائماً فيما أفعل!، عموماً العلم بأن نفس الأمر هو موجود عند معظم الباقين يهون منه.

شكراً لك أخي الكريم "Ssnyo" على مشاركتك....

ملاحظتك الجميلة عن مسألة القيم النسبية رائعة، حقيقة أستخدمها لكن ليس دائماً، سأصير أحرص على استخدامها، و أظن أني سأبدأ بها لتكون أحد عناصر "المنهجية" التي تحدثت عنها مع الأخ "محمد معاشر" أعلاه و التي أحتاج أن أعثر عليها و أعمل بها.

مع أطيب التحيات

#5

ولاتنسى وضع وحدات الخطوط بدل px أن تضعها em لأن البكسل غير قابل للتمدد

يمكنك البحث في الغوغل عن: fluid layout

تم تعديل هذه المشاركة بواسطة خالد_الحوراني في 7 أغسطس 2008 في 16:30

#6

اخي خالد_الحوراني

انا مبتدى في التصاميم و البرمجة و لكن اعتمد على تصميم صفحاتي HTML و اضع كود php في اطار مضمن في وسط الصفحة

و لكن الصفحة لا تتمدد كيف استخد الخاصية em في هذه الحالة

تم تعديل هذه المشاركة بواسطة القناص280 في 7 أغسطس 2008 في 17:00

#7

السلام عليكم و رحمة الله وبركاته

جزاك الله خيرا

فعلا موضوع مهم

nosra2.gif

#8

@القناص280: يجب أن تستخدم CSS وداخل CSS تضع هذه الخواص

فقط ابحث في غوغل عن: fluid layout

#9

شكراً لك أخي خالد الحوراني على ملاحظتك، أيضاً هذه سأضيفها إلى المنهجية التي سأحرص على العمل بها.

مع أطيب التحيات،،،

مواضيع مشابهة