منتدى التربية و التعليم و الأندية التربويةو التنشيط التربوي و ادماج تقنيات الاعلام و الاتصال في الحياة المدرسية.
 
الرئيسيةاليوميةس .و .جبحـثالمجموعاتالتسجيلدخول
مرحبا بكل مهتم بالتربية و التعليم في منتدى السمارة التربوي و مرحبا باسهاماتكم و تقاسمكم لأفكاركم من أجل الرقي بتعليمنا نحو مستقبل واعد.
دخول
اسم العضو:
كلمة السر:
ادخلني بشكل آلي عند زيارتي مرة اخرى: 
:: لقد نسيت كلمة السر
بحـث
 
 

نتائج البحث
 
Rechercher بحث متقدم
ازرار التصفُّح
 البوابة
 الصفحة الرئيسية
 قائمة الاعضاء
 البيانات الشخصية
 س .و .ج
 منتديات السمارة
 ابحـث
المواضيع الأخيرة
» برنامج لصنع شواهد تقديرية
الثلاثاء يونيو 10, 2014 7:33 pm من طرف عبد الله كرم

» قرص تعليمي لدروس الرياضيات
الثلاثاء يونيو 10, 2014 7:04 pm من طرف عبد الله كرم

» درس النشاط العلمي : الفلك للمستوى السادس أساسي
الخميس مايو 23, 2013 6:37 pm من طرف moussaahmed

» تعرف على برنامج Hot Potatoes
الأحد مارس 10, 2013 2:59 pm من طرف oulhssain

» موقع يتضمن مجموعة من الاختبارات والفروض الخاصة بالتعليم الابتدائي لجميع المستويات
الخميس نوفمبر 08, 2012 8:53 pm من طرف chadia

»  ملخص دروس مادة الرياضيات للسنة الأولى ثانوي إعدادي
الخميس أكتوبر 04, 2012 9:00 pm من طرف بسملة

» لائحة بأسماء الأساتذة المرشدون للثانوي الاعدادي و التأهيلي بالاقليم :
الإثنين سبتمبر 24, 2012 11:12 pm من طرف abouanouar

» تعريف سورة الحجرات
الأحد سبتمبر 02, 2012 1:15 pm من طرف HAJAR

» اقوى و أسهل من فوتوشوب
الأحد يوليو 15, 2012 11:03 pm من طرف argane

كم الساعة
منتديات السمارة
منتديات السمارة
أفضل 10 أعضاء في هذا المنتدى
Admin
 
houssame08
 
khalil19
 
sajoura
 
sd fateh
 
yazid
 
kibir
 
mourad_smara
 
safriad
 
بلعيد أحمد
 
زوار المنتدى
التبادل الاعلاني
احداث منتدى مجاني خاص بك
الفيسبوك

شاطر | 
 

 خطوات تصميم موقع ويب

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
yazid

avatar

عدد المساهمات : 23
تاريخ التسجيل : 20/11/2011
الموقع : www.smaratarbia.ibda3.org

مُساهمةموضوع: خطوات تصميم موقع ويب    الإثنين ديسمبر 05, 2011 10:25 am

خطوات تصميم موقع ويب

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

مثل على ذلك: لو أراد العميل إنشاء موقع لمنتج معين ما الذي سيتبادر في ذهنك عن عناصر التصميم التي ستضعها في الموقع؟ ويمكن أن يطلبها منك العميل مثلاً بهذه الطريقة:
شعار الشركة أو المنتج.
قائمة روابط للتصفح. (Navigation)
مقدمة عن المنتج. (ممكن تكون نبذه بسيطة ليست طويلة بالضرورة)
الأماكن التي تتوفر فيها هذا المنتج.
أخبار الشركة أو المنتج.
مميزات المنتج.
ذيل الصفحة ، غالباً توضع فيها الحقوق مع روابط فرعية أخرى خاصة بالشركة.
..
هذه القائمة يمكن وضعها حسب أهمية كل واحدة منها ولا توجد طريقة معينة أو ترتيب معين لها في التصميم ، لكن العناصر المهمة يجب أن تكون واضحة وفي مقدمة الصفحة في مكان بارز ، كما أن طريقة عرض أحد العناصر يمكن أن تخدم الزائر عندما يريد معرفة تفاصيل عمل الموقع مثل مميزات المنتج كما إخترناها في القائمة السابقة ، وقائمة الروابط الرئيسية لتصفح باقي صفحات الموقع يجب أن تكون واضحة يستطيع الزائر الوصول لأي صفحة يريدها بسرعة وسهولة ، ليس شرطاً أن تكون بطريقة معينة يمكنك عملها مع الشكل المناسب للموقع بطرق مختلفة مثل نراها في مواقع أخرى أجنبية وخاصة مواقع الويب 2.0.
طبعاً هذه المرحلة لا أعتقد أن تنتهي بسهولة إن ناقشتها مع عميلك! أغلب العملاء لا يعرفون الكثير عن إنشاء المواقع والجوانب التي يتم التركيز فيها ، تسأله بعض الأسئلة عن موقعه سيركز على التصميم مباشرةً وسترى أنه يتمنى أن يرى التصميم مزدحم بالصور والجداول ولا يعرف الكثير عن قابلية الإستخدام وهذه ليست المشكلة بل المشكلة في إقناعه بأهميتها وأغلب ما سيطبه منك الألوان والأشكال التي يريد إستخدامها وأشياء أخرى وتجد أنه يركز على هذه الأشياء أكثر من محتويات الموقع.
تصميم وكتابة المحتوى بإستخدام XHTML و CSS
بعد تحديد شكل التصميم وطريقة عرض المحتوى في الموقع تبدأ بالجانب العملي لتصميم الموقع ، في هذه المرحلة ستحدد عدد أوسمة div التي ستكتبها وأوسمة أخرى وهذه ستأتي تلقائيا أثناء كتابتك وتخطيطك لطريقة التصميم ، يفضل دائماً ترتيب الشفرة جيداً وذلك لتسهيل عملية الوصول لتفاصيل الصفحة والتعديل عليه مثل وضع الفرغات أو الألسنة Tab أثناء كتابتك لشفرة XHTML وإعطاء المساحات داخل العناصر أيضاً وكتابة التعليقات وغيره.
عملية تصميم الصفحة تكون بواسطة CSS وهنا ستكون عملية تنسيق عناصر الصفحة وتصميم الموقع بالكامل ، إبدأ بالأوسمة ثم الأصناف أو الكلاسات كما يحلو لك ، حاول أن تختصر بقدر ما تستطيع ويمكنك تخفيف حجم ملف CSS بطرق مختلفة ويجب مراعاة عرض المحتوى بوضوح وحسن إختيار حجم ونوع الخط وتذكر أن التصميم عندما يكون جميل يمكن أن يلفت إنتباه الزائر وينال إعجابه ولكن الأهم من ذلك وهو وضوح المحتوى أكثر من التصميم نفسه لأن الزائر لم يأتي إلا لتصفح محتوى موقعك الذي سيلعب الدور الأكبر في بقاء الزائر وإستمراره في متابعة الموقع وإلا ذهب في ثواني معدودة إن لم يجد الشيء الذي يريده!
تفاصيل التصميم
هناك تفاصيل يجب أن تعرفها في التصميم وهذا آخر شيء تفكر فيه عند إنشاء موقع تريده ، بعض هذه التفاصيل والتي تعتبر تفاصيل عامة وليست تفاصيل دقيقة جداً لأنها تحتاج إلى تدوينة خاصة وربما أكثر! وهي:
الألوان والصور

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

قياس الصفحة

نتحدث هنا عن قياس عناصر الصفحة ونخصص في ذلك أيضاً طول وعرض الصفحة بشكل عام أو القسم الخارجي الذي يغطي كافة العناصر الفرعية (رأس الصفحة، قائمة الأقسام، القائمة الجانبية، .. إلخ) ، فالنسبة للقياسات التي نستخدمها في تصميم صفحاتنا ومن خلال CSS فهي تتكون من:
قياس Fixed: وهو قياس ثابت ويستخدم صيغة البكسل px ..
قياس Fluid: ما يمسى بالقياس السائل أي يتجاوب مع عرض نافذة المتصفح عند تغيير حجمه ويستخدم النسبة % في تحديد الحجم ..
قياس Elastic: ويستخدم صيغة em و ex ويتميز تغيير حجم الخط عندما يريد المستخدم ذلك ، ولكن هذه الميزة تمت إضافتهما إلى القياسين Fixed و Fluid.
بالنسبة لي، غالباً ما أستخدم مقياس Fixed لتحديد عرض القسم الخارجي من الشكل أما بقية الأقسام مثل القسم الجانبي والقسم الذي أعرض فيه المحتوى يكون بمقياس Fluid.

الخطوط

عندك إختيارك الخطوط التي ستستخدمها في كتابة محتويات موقعك إحرص على أن يؤدي الخط إلى توضيح كافة النصوص الموجودة في محتويات موقعك ، غالباً ما يتم إستخدام خط Tahoma لسهولة وجمال قراءته عن بقية الخطوط بينما يفضل الآخرين خطوط أخرى وقد تتغير رغباتهم بين فترة وفترة حسب تغير وتعزيز ثقافتهم في التصميم :p ، عن نفسي أفضل خط SimpleSref كثيراً وأستخدمه بكثرة في تصاميمي لوضوحه وجماله إلا أنني إكتشفت أني علي إضافة خطوط أخرى بجانبه وسبب ذلك أنه بعض الأحيان لا يكون واضح تماماً بين متصفح وآخر ولكن واضح في متصفح الفايرفوكس والإكسبلورر 100%.
طبعاً لا توجد خطوط عربية يمكن إستخدامها تنافس الخطوط الغربية الأخرى ، نعم توجد إستخداماتها بشكل رائع في الصور ولكن في المواقع لم يصل أي شيء جديد حتى الآن! فالنتيجة تكون سيئه عند إستخدامك لها أثناء تصميمك لصفحة ويب.
إختبار الموقع ومعالجة الأخطاء
بعد الإنتهاء من التصميم قم بإختباره من عدة نواحي مثل توافق التصميم خلال متصفح الفايرفوكس والإكسبلورر وعرضه
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
خطوات تصميم موقع ويب
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى السمارة التربوي :: دورات تكوينية (جــــديــــــــــــد) :: انشاء المواقع-
انتقل الى: