التدوينات الموسومة بـ ‘تصميم’

أسرار نجاح المدونات العربية

July 12, 2008 - السبت 10 رجب 1429

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

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

أسرار نجاح المدونات العربية

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

إذاً ماهي أهم أسرار نجاح المدونة:

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

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

1- مجال المدونة يجب أن يكون مجالاً تبرع فيه أو تحب متابعته أو تعمل به.

2- تأكد من هذا المجال له شعبية لا بأس بها فمالفائدة من مدونة لايزورها أحد !!

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

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

2- التصميم الجيد: كم عدد المرات التي زرت فيها موقعاً ووجدته سيء التصميم وبشع المظهر وتمنيت لو أنك لم تدخل إليه، للأسف هذا منتشر جداً في عالمنا العربي، حاول أن يكون أن تصنع تصميماً جميلاً إذا كان ذوقك الفني عالياً أو استخدم تصميماً جاهزاً فهنالك المئات من التصاميم الجاهزة والمجانية للمدونات2 واختر ألواناً تعكس طبيعة المدونة3

3- المحتوى: حسناً مدونتك أصبحت جاهزة للعمل ولكن ينقصها شيء مهم ألا وهو المحتوى. قم بتجميع بعض المقالات السابقة التي كتبتها أو اكتب بعض المقالات وقم بنشرها تباعاً ولاتنشرها دفعة واحدة لسببين:

1- في جلسة واحدة سيمل القارىء من متابعة المواضيع الأخيرة بعد أن قرأ مواضيعك الأولى.

2- عليك أن تخبىء بعض المقالات للأيام القادمة فإن نشرتهم دفعة واحدة ستفقد مخزونك كله.

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

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

5- المقال الجميل: هل يوجد مقال جميل وآخر قبيح؟ نعم يوجد وإليك بعض النصائح لكي يبقى مقالك جميلاً:

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

2- ابقي روابطك دوماً فعالة وحدث أو احذف المتعطل منها إما بالتحقق منهم يدوياً كل فترة أو باستخدام بعض الأدوات للتحقق منهم بطريقة آلية ومريحة4

3- حاول دوماً استخدام الهوامش أو تذييل الصفحة في وضع مصادرك التي استقيت منها معلوماتك الموجودة في هذا المقال. وخاصة المصطلحات فالكثير من زوارك قد لايعرفون معناها.

4- حاول ترقيم الأشياء التي تحتاج إلى تعداد ولاتقم بسردها في نسق واحد فالترقيم يسهل الفهم والتذكر.

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

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


http://Blogger.com , http://wordpress.com

1.

http://www.ar-wp.com , http://themes.wordpress.net

2.

http://www.abacusdesign.com.au/articles/how-to-choose-your-website-colours.htm

3.

http://www.google.com/webmasters/tools

4.

مقدمة في CSS

July 11, 2008 - الجمعة 09 رجب 1429

ملاحظة: يجب أن يكون مستواك بالـ HTML جيداً قبل البدء.
1- ما هي الـ CSS؟
هي اختصار لـ Cascading Style Sheets وليس لها تعريب على حد علمي :D

2- ما هي وظيفتها؟
مسؤولة عن شكل صفحات الويب أي الإظهار فكل ما تراه في هذه المدونة من ألوان وأحجام خطوط هي من أفعال الـ CSS.

3- ما هي مكوناته؟
لقاعدة الـ CSS ثلاثة مكونات وهي على الشكل:

selector {property: value}

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

وبالمثال يتوضح الأمر:

div {color: blue;}

في البداية اخترنا العنصر الذي ستطبق علي خصائصه القيم الجديدة وهو حاوية الـ div، ثم اخترنا خاصية color لهذا العنصر أي لون النص داخله وأعطيناها لون ازرق.

4- كيف نربط ملف css مع الصفحة؟

نضعه في وسم head وتأكد من مسار href أنه صحيح، هنا وضعته داخل مجلد اسمه css واسم الملف هو style.css

5- ما أنواع الـ selector؟
له ثلاثة أنواع:
- وسم HTML: أي نضع وسماً من وسوم الـ HTML المعروفة (مثلاً div, p, span, a).
مثال:

div {color: blue;}

هنا سيطبق هذا التأثير (لون الخط الأزرق) على كل div اكتبها في صفحة HTML بعد ربطه بالتأكيد كما في الخطوة 4.

- المعرف (id): هنا نضع selector ليس من وسوم الـ HTML نعطيه اسماً من عندنا ونضع قبله # بحيث يصبح:
مثال:

#id-selector {color: red;}

هنا سيطبق على كل وسم له معرف id-selector مثال:

سيظهر النص هنا باللون الأحمر

- الصنف (class): أيضاً نضع selector اسمه من اختيارنا ولكن نضع قبله نقطة . أي:

.class-selector {color: black;}

كيف نحصل على تأثيره داخل صفحة الـ HTML … نقوم بإعطاء وسم الـ HTML قيمة لصنفه:

سيظهر هذا النص باللون الأسود

6- ما الفرق بين “المعرف” و “الصنف” أي متى استخدم هذا ومتى استخدم ذاك؟
استخدم المعرف عندما تريد تأثيراً لعنصر واحد … أي المعرف لا يجب أن يوضع لأكثر من وسم، لماذا؟ لأنه من خصائص وسوم HTML أن كل واحداً منها له معرفه الخاص لذلك لايجب تكرير المعرف لوسمين أو أكثر.
أما الصنف فاستخدمه لعدة وسوم أياً كان عددهم وهذا هو الفرق بينهم بكل اختصار وبدون تعقيدات.

7- إذا هل لك أن تشرح باختصار كل ماذكرت؟
طبعاً، الـ CSS تستخدم لإعطاء صفحة HTML التأثيرات المرئية أي الإظهارات، يتم ربط الملف كما في الخطوة 4 بالمناسبة ملف الـ CSS هو ملف عادي ولكن حولت لاحقته لـ css بدلاً من txt. ولدينا ثلاثة أنواع من selector (راجع الخطوة 5) واحد لوسم HTML موجود والأخر هو المعرف لإعطائه لوسم HTML واحد والأخير هو الصنف حيث يعطى لأكثر من وسم.

أسئلة للمستوى المتقدم:

8- كيف أعطي وسم يحتوي على خاصية محددة تأثيراً ما، مثلاً لدي الوسمان:


نص


نص آخر

أريد أن أعطي الوسم الذي يحتوي على خاصية الـ title تأثيراً أي الوسم الأول فكيف أحصل على ذلك؟

لا مشكلة، تستطيع ذلك بكتابة التالي في ملف css:

h1[title] {color: blue;}

هكذا سيحصل وسم h1 الذي يحتوي على خاصية title تأثيراً خاصاً به.

9- شيء جميل لكن هل يوجد تطبيق آخر له؟
نعم، أستطيع إعطاء وسم a الخاص بالإيميل تأثيراً معيناً، لاحظ معي:

a[href^="mailto"] { color: blue; }

هنا أخبرته أنه سيجد في بداية خاصية href كلمة mailto الخاصة بالبريد والـ (^) تعني بالبداية.

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