خمس كتب تعلمك كيف تنشئ موقعك لوحدك من البداية حتى الاحتراف

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

 الكتاب الاول: دورة تصميم المواقع بأسلوب المحترفين Web 0.2  

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

- [الدرس الأول] تعريف بمفهوم الاسلوب المتطور فى تصميم المواقع web 2.0
- [الدرس الثانى]مقدمة فى xhtml+css الجزء الأول ‏
- [الدرس الثالث]مقدمة فى xhtml+css الجزء الثانى
- [الدرس الرابع]أساسيات مهمة فى استخدام xhtml+css
- [الدرس الخامس] دروس فيديو مكثفة متعددة المستويات للتعامل مع css
- [الدرس السادس] كيفية عمل تخطيط لصفحةlayout تمهيدا لتصميمها ب css
- [الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus
- [الدرس الثامن]شرح التعامل مع الصورimages والتأثيرات المختلفة عليها
- [الدرس التاسع]شرح التعامل مع الأزرار والمؤشرات والتأثيرات المختلفة عليها
- [الدرس العاشر]تعريف بمكتبة jquery قبل البدء فى التعامل معهــــا
- [الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك
- [الدرس الثانى عشر] تنبيهات + التخطيط الشامل + نصائح قبل تطبيق الدرس
- [الدرس الثانى عشر2] تطبيق كامل لتصميم موقع احترافى الجزء الاول التصميم
- [الدرس الثانى عشر3] تطبيق كامل لتصميم موقع احترافى الجزء الثانى الhtml
- [الدرس الثانى عشر4] تطبيق كامل لتصميم موقع احترافى الجزء الثالث والاخير التقطيع+css

 الكتاب الثاني : Cascading Style Sheets

الكتاب الاول لتعلم البرمجة بcss بالنسبة للمبتدئين فببساطته تجعل من قارئه يحترف بسرعة برمجة وتصميم مواقع الانترنيت بهذه اللغة الجميلة Cascading Style Sheets

الكتاب الثالث :الدليل المبسط لمطور مواقع الويب

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

  الكتاب الرابع: star css كيفية العمل بتقنية تنسيق عناصر صفحات المواقع css

هذا الكتاب لا يختلف عن الكتب الاخرى في مجال تطوير المواقع بتقنية css الا أنه يعطي أهمية كبيرة لهذه اللغة البرمجية حيث يصل بك الى فهم كل صغيرة وكبيرة منها حتى تصبح قادرا على انشاء موقعك

الكتاب الخامس :كيف تصمم موقع مجاني من البداية حتى النهاية

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

معلومات اضافية لانشاء موقع ويب

 

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

عندما تفكر بتصميم موقع ويب بإستخدام تقنية 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%. 

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

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

Partager

Tweet

هل أعجبك الموضوع ؟

ارسال تعليق