Category: Uncategorized


انواع الحب

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

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


النوع الثالث

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

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

النوع الخامس
هو من يغادر حياتك فيترك ورائه فراغاً باتساع السماء.. فتحاول جاهدا ملئ الفراغ فتتعرف على من يستحق ومن لا يستحق وتقع في المشاكل


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

النوع السابع
هو من يطيل الإنتظار أمام بوابة أحلامك؛ وإذا سمحت له بالدخول خرب في مدينة أحلامك وشوه أجمل الأشياء بقلبك وتركك نادماً على معرفته

النوع الثامن

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

أعلم أنك حائر فى أمرى 

وتبحر بعقلك الى عالم الخيال

تفكر في بين أربعة جدران 

تريد أن ترسمنى 

بأحلى وأجمل صورة 

ولكن أنا أجمل بكثير مما تتوقع 

أكتب ويدى ترتجف

لاننى لست بشاعر

ولكن صاحب مشاعر

أنا صاحب الرومانسية وأهديها لك هدية 

أنا أمير أحلامك 

أنا من أحببتك 

أنا من أعطيتك قلبه ملك لك 

أنا من أهب لك حياتى متحدي كل العالم 

من بعد حبك ترك قلبى الخوف ونوى

أن يكون حبك بلا نهاية كالحلقة المستديرة


لا تسالني هل احبك.؟حبيبي اريد ان اشكوو لك خوفي
فهل تسمعني؟احببتك أنت وقلتها لك انت
لكني اخاف فراقك بعد ماتعلق قلبي بحبك

اخاف ان اصحو على زلزال رحيلك عني

اخاف أن يكون حبك لغيري ذات يوم

حبيبي عانقني وابعد الخوف عني

عالمي اصبح لك وحدك

اصبحت ابكي لأجلك

ابتسم لأجلك

اسهر لأجلك

وقلمي أصبح لا يكتب غير اسمك

ما هي المدونة ؟!!

معلومات عن المدونة

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

فائدة الإعلان في المدونة

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

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

درس مخصص لعمل تقويس لحدود أي صندوق في التصميم يتم عمله ببرنامج الفوتوشوب ، يمكنك إستخدامها في أي عمل سواء كان في تصميم موقع ويب أو تصميم جرافك [المثال موجود في أسفل الدرس]

إفتح ملف جديد بأي قياس تريده عن طريق File -> new أو عن طريق لوحة المفاتيح Ctrl+N ، أضف طبقة جديدة لقائمة الطبقات أو عن طريق لوحة المفاتيح Shift+Ctrl+n ، إستخدم أداة التحديد Rectangular Marquee Tool أو المسماه باللغة الإنجليزية Rectangular Marquee Tool عن طريق لوحة المفاتيح بالضغط على حرف M وحدد الصندوق الذي تريد إنشاءه:

الآن إنتقل إلى (القنوات Channels) وأضف طبقة جديدة:

الآن إستخدم أداة الصبغ Paint Bucket Tool Paint Bucket Tool وأختر اللون الأبيض وأملأ مساحة الصندوق وقم بإلغاء التحديد عن طريق Ctrl+D :

الآن سنستخدم الفلتر Gaussian Blur .. عن طريق Filter->Blur->Gaussian Blur ويمكنك إختيار الدرجة التي تريدها حسب درجة التقوس التي تريدها . فليكن مثلاً قيمة Radius : 5.0 :

الآن إستخدم خاصية Levels من قائمة image Adjustment أو عن طريق لوحة المفاتيح Ctrl+L إستخدم نفس القيم الموضحة في الصورة:

بعد وضع القيم إضغط على ok .. حدد الصندوق عن طريق أداة العصا السحرية Magic Wand Tool  .. وأرجع إلى قائمة الطبقات Layers وحدد الطبقة الجديدة التي قمت بإنشائها سابقاً وأصبغ التحديد باللون الذي تريده مثل اللون الأبيض:

Final Curve Box

ويمكنك عملها بأي شكل تريده ..

منقول

التركيز على شيء واحد

 

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

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

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

التخلص من عدة أشياء

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

أيضاً روابط المفضلة المؤقتة، الملفات القديمة التي لم تستخدمها من فترة (ما لم تكن مهمة بالطبع) تخلص منها! كذلك التطبيقات المعقدة التي تأخذ من وقتك الكثير يفضل أن تجد بدائل بسيطة لها .

إهتم بالتنفيذ أكثر من التخطيط لأن التخطيط سهل جداً والذي يفترض ألا يأخذ الكثير من وقتك، وتجنب التأجيل أيضاً لكي لا تتراكم عليك المهمات دائماً.

إستخدام قائمة المهمات – To Do List

الطريقة الأسهل والأسرع في التخطيط هي كتابة قائمة بالمهمات التي تريد أن تنفذها أو ما يسمى To-do list، أبسط تنفيذ لها أن تكتب مهامك اليومية على ورقة وخاصة المهام الجديدة عليك أو التي نادراً ما تفعلها والتي تريد تجنب نسيانها. وإلتزم بتفيذ هذه المهام وأشطب المهمة التي أنجزتها وهكذا.

أنصحك بتجنب كتابة المهام الروتينية لأن كتابتها مضيعة للوقت، ما الفائدة من كتابة مهمة تفعلها يومياً دون الحاجة إلى أن تذكر نفسك بها!

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

تخصيص مدة معينة لإنجاز المهمات

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

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

لتفادي المماطلة في تنفيذ المهام وإهمالها هناك عدة نقاط أقترحها عليك:

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

تغيير طريقة العمل

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

في إدارة الوقت هناك أنظمة أو تقنيات منهجية متوفرة وإستخداماتها مفيدة مثل:

  • نظام GTD، إختصار لـ Getting Things Done.
  • تقنية Pomodoro، وتعتمد على وقت محدد لكل إنجاز ( مثل 25 دقيقة لكل مهمة و5 دقائق راحة و15 إلى 20 دقيقة راحة لكل 4 مهمات) يمكن تعديل المسار حسب إحتياجاتك.

إستخدام أسلوب التعويض

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

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

تلميحات حول الإستفادة من الوقت

هناك عدة تلميحات حول الإستفادة من الوقت بشكل أفضل عند تنفيذ المهام التي تريدها، هذه قائمة ببعض الملاحظات حول ما ذكرت في الموضوع لتوضيح عملية كل واحدة منها:

إستعن بالله في أداء مهامك

التوفيق أولاً وأخيراً بيد الله، فأستعن بالله في كافة أعمالك وتنفيذ مهامك.

إستفد من الأخطاء

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

تعامل مع المفاجآت!

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

إيجاد الفرص

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

تجاهل المحبطين

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

أفكار تشجعك على ممارسة القراءة

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

قراءة ملخص الموضوع

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

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

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


صورة لأحد مواضيع مدونة Smashing Magazine.

إقرأ في مجال تحبه

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

على سبيل المثال يمكن قراءة كتاب لا تحب موضوعه بالرغم من أنك تحتاجه لمعرفة حل لمشكلة معينة أو ترى أنه مهم أو ما شابه وإنهاء لا يقل عن 5 أو 10 صفحات منه فقط والعودة إليه في وقت لاحق،  بينما قراءة كتاب آخر متشوق لمعرفة المزيد حول فكرته أو موضوعه (وتجد ذلك في القصص والروايات) قد تصل قراءته إلى ما لا يقل عن 70 إلى 100 صفحة ولازلت تريد قراءة المزيد!

الفكرة هنا أن القراءة في المجالات التي تحبها تزيد في رغبتك من القراءة سواء كان قراءة كتاب أو مقال.

القراءة في المواضيع تجد فيها إثارة

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

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

إجعلها عادة يومية

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

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

تحدث عما تقرأ عنه

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

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

تلميحات حول القراءة

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

ركز على فهم ما تقرأه

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

إستخدم أدوات تساعدك على القراءة

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

ركز على قراءة المواضيع النظرية وأجل العملية

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

الدروس والشروح العملية قد لا تكون مفيدة في وقت ظهورها إلا إردت تطبيقها في وقت فراغك أو ستحتاج لها فيما بعد، يفضل أن تحفظها في مفضلتك أو تبحث عنها في محرك جوجل فهناك ستجد الدروس التي تحتاجها أكثر من مواقع الدروس نفسها!

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

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

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

  • تقديم برمجيات معلبة ومن ثم الانتظار سنة أو أكثر لتقديم التحديثات هو نموذج تقليدي لم يعد موجودا ً- بخلاف برمجيات سطح المكتب –البرمجيات التي تحتاج إلى تثبيت- فإن تطبيقات الويب يتم تطويرها بشكل يومي.
  • لست بحاجة إلى فريق كبير أو مبالغ ضخمة أو دورة تطوير برمجيات طويلة لبناء برنامج رائع .
  • دع المستخدم يخبرك عن البرمجية , فإذا كان هناك خطأ قم بإصلاحه في نفس اليوم ثم أشحن البرمجية من جديد إلى الويب !
  • الأقوال أسهل بكثير من الأفعال ..
  • هذه الأيام لا تحتاج الكثير لتبدأ العمل. فالأجهزة رخيصة وهناك وفرة في برامج البنى التحتية المفتوحة المصدر والمجانية .جذب العملاء لم يعد يعتمد على السعر.
  • النظر إلى ما يعمله المنافسون هو أسرع طريقة تؤدي بك إلى المشاكل.
  • إذا كنت تعمل من أجل تحقيق ربح سريع فسترى ذلك. وبالمثل إذا كنت محبا ً ومتعاطفا ً مع تطبيقك فسيبدو هذا جليا ً في المنتج النهائي.
  • قبل أن تبدأ في التصميم او كتابة الشفرات البرمجية, تحتاج الى معرفة الغرض من برنامجك – وهو ما يُعبر عنه بـ الرؤية . فكّر بعمق. لماذا يجب أن يُوجد هذا البرنامج؟ مالذي يجعله مختلفاً عن البرامج الأخرى المشابهة؟

في البداية يستحسن ترتيب ملفاتك بحيث يكون ملف خاص بالصور ، وملف خاص للتصميم (الذي ستضع فيه ملف css) وهذا إن كنت ستضع أكثر من تصميم للصفحة وإلا ضعه بجانب الصفحة ومكونات الصفحة هي:

  • index.html
  • style.css
  • /images

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

إبدأ بكتابة شفرة HTML مباشرةً وتحديد رأس الصفحة وقائمة التصفح وبقية المحتويات كما خططت لها ويفضل ترتيبها بحيث أنك تستخدم فراغات ما بين العناصر الرئيسية والفرعية في HTML وإستخدام التعليقات للتنقل بين العناصر بسهولة ، في البداية نحدد Doctype في بداية الصفحة وبالطبع سنسخدم XHTML من نوع Transitional ، هذه الشفرة الرئيسية التي سنكتبها في البداية:

01 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <!-- نكتب إسم ملف تنسيق css -->
06 <link href="style.css" type="text/css" rel="stylesheet" />
07
08 <!-- إسم الصفحة سيظهر في المتصفح -->
09 <title>موقع ويب</title>
10 </head>
11
12 <body>
13
14 <!-- محتوى الصفحة سيكون ضمن العنصر body -->
15 ...
16
17 </body>
18 </html>

الأشياء التي قمنا بتحديدها وكتابتها هي قائمة التصفح ( الصفحات الرئيسية التي يمكن في أي وقت التنقل فيما بينها / Navigation ) ورأس الصفحة كتبنا إسم الموقع ووصف بسيط له ثم المحتوى الرئيسي للصفحة ثم القائمة الجانبية وتحتوي على روابط أو أشياء أخرى تحددها ثم ذيل الصفحة في النهاية ، إطلع على شفرة XHTML التالية ضمن العنصر <body>:

ستلاحظ تعيين خاصية id لكل وسم div نكتب به الإسم الذي ينختاره في ملف CSS لكتابة الخواص المتعلقة بمحتوى أوسمة div التي حددناها في شفرة HTML.

تحديد وتنسيق ملامح المحتويات عن طريق CSS

هنا سيتم تحديد شكل المحتويات التي كتبناها بالتفصيل ، تستطيع كتابة شفرة CSS إما عن طريق نفس الصفحة ( عن طريق العنصر style وما بين العنصر head ) ونقوم يتضمين شفرة CSS عن طريق ملف خارجي عن طريق هذا الكون ويكون ضمن العنصر head:

نكتب المحددات (Selectors) كأوسمة p ، h1 ، html ، .. والكلاسات وغيره ، تكتب هذه الشفرة بالمثال الذي ذكرته سابقاً سأدقق على بعض النطاق التي سأذكرها ، هنا سأذكر أهم المحددات لتصميم صفحتنا:

01 body {
02     margin0;
03     directionrtl;
04     text-aligncenter;
05 }
06
07 #centrical {
08     margin0 auto;
09     text-alignright;
10     width768px;
11 }
12
13 #navigation {
14     width:100%;
15     height31px;
16 }
17
18 #navigation ul {
19     margin0padding0;
20     list-stylenone;
21 }
22
23 #navigation ul li {
24     margin0padding0;
25     displayinline;
26 }
27
28 #navigation ul li a {
29     padding6px 25px 8px 25px;
30     text-decorationnone;
31     floatright;
32 }
33
34 #header {
35     margin10px auto;
36     width768px;
37     height122px;
38     text-alignright;
39 }
40
41 #content {
42     margin10px auto;
43     padding0 10px;
44     width56 %;
45     text-alignright;
46     floatright;
47 }
48
49 #content p {
50     line-height20px;
51     font-familytahomafont-size14px;
52 }
53
54 #sidebar {
55     margin10px auto;
56     width38 %;
57     float:left;
58 }
59
60 #footer {
61     padding5px 0;
62     border-top1px dotted #999999;
63     clearboth;
64 }

أشياء مهمة حسب الكلاسات المذكورة بالأعلى:

  • body : خاصية direction تحمل القيمة rtl لإستخدامها في تحويل إتجاه الصفحة إلى العربية.
  • body : خاصية text-align تحمل القيمة center لتوسيط النص و الكلاسات في وسط الصفحة إن أردت. (نستخدمها في دعم متصفح الإكسبلورر)
  • centrical# : إذا أردنا توسيط صندوق أو أي وسم div أو غيره في متصفحات تدعم المعايير القياسية يجب أن تحمل الخاصة margin قيمة auto كإضافة تلقائية في يمين ويسار الصندوق.
  • navigation ul li# : أعطينا الخاصية display قيمة inline لكي تكون القوائم متساوية في خط واحد ضمن قائمة التصفح.
  • content p# : إستخدمنا خاصية line-height لعمل مسافة ما بين سطور الفقرة في النص.
  • sidebar , #content# : إستخدمنا خاصية float لتحديد توجه الكلاس إما على اليمين أو على اليسار لكي يكونوا معاً في جانب واحد.
  • footer# : إستخدمنا خاصية clear في ذيل الصفحة لتكون أسفل الكلاسات التي تحمل خاصية float وتجنباً عدم تناسقها في حال إستخدام خاصية float.

إضافات أخرى

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

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

معرفة أهداف الموقع، محتوى الموقع، التفاصيل التي يقدمها الموقع

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

تقسيم المحتوى على عناصر

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

مثل على ذلك: لو أراد العميل إنشاء موقع لمنتج معين ما الذي سيتبادر في ذهنك عن عناصر التصميم التي ستضعها في الموقع؟ ويمكن أن يطلبها منك العميل مثلاً بهذه الطريقة:

  • شعار الشركة أو المنتج.
  • قائمة روابط للتصفح. (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%.

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

إختبار الموقع ومعالجة الأخطاء

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

منقول .