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

مخطط المنتجات

October 30, 2008 - الخميس 02 ذو القعدة 1429

بسم الله الرحمن الرحيم،

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

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

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

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

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

في كل خطوة تستطيع اختيار الاسم وصورة لهذه الخطوة، بعد أن تنتهي من الخطوات سيصبح لديك مخطط جاهز للاستخدام والتضمين، والآن شاهد النتيجة How to use product planner أيضاً تستطيع تضمين النتيجة داخل موقعك!

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

وسوم: أفكار, تصميم, تطوير, تكتيك
منشورة في أفكار | 4 من التعليقات »

تحديد الشرائح المستهدفة

August 10, 2008 - الأحد 08 شعبان 1429

بسم الله الرحمن الرحيم،

سأقوم بإكمال السلسلة ولكن أعدكم أنها ستكون بتواتر أعلى … أي إن شاء الله ستكون التدوينات شبه يومية.

أهم الإضافات لمدراء الوورد بريس

August 1, 2008 - الجمعة 29 رجب 1429

أهم الإضافات التي أستعملها والتي تهم كل مدراء الوورد بريس.

هذه الإضافات فقط للمدراء وليست للزوار.

404 Notifier: تنبيهك بالبريد الإلكتروني إذا تم استعراض صفحة غير موجودة أو محذوفة، من قبل أحد الزوار.
All in One SEO Pack: تعطيك خيارات لتحرير الـ meta keyords & title في كل تدوينة تكتبها.
Google XML Sitemaps: لبناء خريطة الموقع أتوماتيكياً وتتحدث عند كل تدوينة كي تساعدك بأرشفة موقعك جيداً عند محركات البحث وبالتالي زيادة الرانك.
WordPress.com Stats: إحصائيات كثيرة ومتعددة تفيدك بمعرفة عدد الزوار وأكثر التدوينات زيارة والمدونات التي تشير إليك برابط والكثير الكثير.
WP Security Scan: تعمل مسح شامل لمدونتك بحثاً عن الثغرات المشهورة وتنبهك إليهم.
Akismet: يأتي مع الوورد بريس وهو لمنع التعليقات المزعجة.
TinyMCE Advanced: خيارات أكثر لمحرر النصوص في كتابة التدوينات.
WordPress Automatic Upgrade: الإضافة الرائعة التي تقوم بالترقية التلقائية للورد البريس بدون وجع الرأس وضياع للتدوينات.

هذه قائمة الإضافات الموجودة عندي للمدراء هل لديكم إضافات تودون مشاركتها؟

وسوم: تكتيك, نصائح, وورد بريس
منشورة في مدونات عربية | 6 من التعليقات »

تنظيم الوقت البرمجي

July 30, 2008 - الأربعاء 28 رجب 1429

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

عودة قريبة ولكن مفيدة … لي ولكم بإذن الله

الموضوع باختصار هو كيف ينظم المطور أو المبرمج وقته؟

بعد وقت طويل من عدم التنظيم في الوقت وهدر بعض الساعات في تصفح فارغ قررت أن أضع حداً لهذا كالتالي:

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

سأطبق هذه القيود على نفسي وأتمنى أن يتحسن من خلاله نظامي اليومي وتقل ساعات الهدر.

أما الأن فالفكرة الجميلة التي طرأت على ذهني هي استغلال هذا الموضوع بتعلم بعض أساسيات الكيك CakePHP عن طريق تطوير الخطوة الخامسة (قائمة المهمات to do list) بالكيك. ستكون عبارة عن سلسلة من التدوينات نمشي بها خطوة خطوة، حتى نكمل التطبيق “قائمة المهمات”. فرصة لتحسين مستواي عن طريق ملاحظاتكم وتجاربكم.

ما رأيكم؟؟ وهل ببال أحدكم اسم جميل للتطبيق؟؟

وسوم: الكيك, برمجة, تصميم, تكتيك
منشورة في أفكار | 28 من التعليقات »

معدل التدوين

July 30, 2008 - الأربعاء 28 رجب 1429

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

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

تدويناتي لن تكون مجرد نسخ ولصق من مدونة ما، بقدر ماهي تجارب شخصية والاستعانة بعدة مصادر لكتابة التدوينة.

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

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

وسوم: تكتيك, نصائح
منشورة في أخبار المدونة | 2 من التعليقات »

كيف يكون موقعي من مواقع الويب 2.0

July 23, 2008 - الأربعاء 21 رجب 1429

بسم الله الرحمن الرحيم،

آخر تدوينة من سلسلة تحدي البداية القوية

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

كيف يكون موقعي من مواقع الويب 2.0

ماهو الويب 2.0؟

يعتبر الجيل الثاني من المواقع الإلكترونية التي ظهرت في منتصف التسعينات، وهو مصطلح يطلق على المواقع الإلكترونية التي تحتوي على الميزات التالية:

1- التفاعل مع الزوار وأشهر أمثلتها تعليقات الزوار في المنتديات ومشاركات المستخدمين في المنتديات.

2- تتمتع مواقع الويب 2.0 بحجم خفيف ومظهر جميل يعتمد في تصميمه بشكل كامل على الـ CSS.

3- التقيد بالمعايير العالمية في تصميم الموقع (W3C)1 لضمان توافقية عالية مع كل المتصفحات.

4- من الناحية التقنية يعتمد على تقنيات حديثة أهمها الأجاكس (AJAX) و (RSS).

بدأ ظهور مفهوم الويب 2.0 في بدايات الـ 2004 وسرعان ما انتشر هذا المفهوم انتشار النار في الهشيم وبدأت مواقع الويب 2.0 بالظهور بشكل ملفت للنظر، وهنا يجب التنويه إلى أن عالمنا العربي نادراً ماتجد فيه هذا النوع من المواقع (نستثني من هذا الأنظمة الجاهزة كالمدونات والمنتديات وأنظمة إدارة المحتوى).

إذن ما هي الخطوات الواجب اتباعها لكي أجعل موقعي من مواقع الويب 2.0؟

يوجد محوريين رئيسيين للتغيير بهما وهما التصميم والبرمجة:

· من ناحية التصميم:

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

ستحتاج لقراءة كتاب أو أكثر عن CSS حتى تتعلم أساسياتها. ومن ثم تعمل على تحويل الجداول وخلاياها لحاويات تسمى div. طبعاً على المدى القريب ستعاني كثيراً وربما ستفكر بالتخلي عن الويب 2.0 لكن عندما تنظر لحسناته ستعيد التفكير في هذا الأمر وبعد مدة سيصبح مستواك جيداً في الـ CSS وستعتاد عليه ولن تفكر بالرجوع أبداً للجداول.

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

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

دعونا نأخذ بعض الأمثلة التصميمية:

1- الزوايا الدائرية2

الزوايا الدائرية

2- مستطيل الطلب المنسق3

المستطيل المنسق

3- الجداول المتناوبة الألوان4

الجداول المتناوبة الألوان

· من ناحية البرمجة:

البرمجة لا تقل أهمية عن التصميم … لكن بما أنها الجانب الغير مرئي من الموقع لذلك لايتم الانتباه إليها كثيراً.

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

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

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

http://w3c.org	1.
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/	2.
http://www.noupe.com/css/47-excellent-ajax-css-forms.html	3.
http://validweb.nl/artikelen/javascript/better-zebra-tables/	4.
http://cssbit.com , http://noupe.com	5.

وسوم: برمجة, تصميم, تكتيك, نصائح
منشورة في تصميم | 7 من التعليقات »

أخطاء يرتكبها مطوروا المواقع

July 22, 2008 - الثلاثاء 20 رجب 1429

1- العناوين الفظيعة

كان ومازال بعض المطورين يضعون عناوين فظيعة للصفحات مثل:

-&&-##موقع الصفحات الفظيعة##-&&-

هذه الرموز لاتفيد بشيء ضع بدلاً عنها عنوان مفيد يساعدك بترقية الرانك.

2- قوائم التصفح بالجافا سكربت

لماذا تستخدمهم إذا وجدت البديل السهل؟؟ وهو قوائم css (سأتحدث عن قوائم css بوقت لاحق)

أيضاً أغلب محركات البحث لاتستطيع التعامل مع قوائم الجافا سكربت

3- المسارات المولدة عشوائياً

مازال هناك الكثير من المواقع التي تستخدم عناوين مولدة عشوائياً … فترى عشرات الأرقام والأحرف ولاتفهم منهم شيئاً … مثل:

www.example.com/2121,4334,3213dsadsa,weq

4- عدم استعمال وسوم العناوين (h1 … h6)

كثيراً ما ترى مواقع تضع عناوينها داخل وسوم عادية وتكبر الخط كثيراً حتى يبدو كعنوان !!! لماذا استخدم وسوم العناوين (h1 … h6) فوظيفتها هي كتابة العناوين … وبإمكانك تعديلها بال css وأيضاً هي من أساسيات SEO أي ترفع لك الرانك.

5- عناوين الصفحات المتشابهة

لا تستخدم نفس العنوان (title) لكل الصفحات بموقعك … استخدم لكل صفحة عنواناً مختلفاً

6- لا تكرر الكلمات في وسم (meta keywords)

لن يفيدك شيء تكرار الكلمات فمحركات البحث ليست بهذا الغباء الذي كانت عليه قبل عشرة سنوات، حتى تحتسبها أكثر من مرة

7- ضغط المحتويات قبل إرسالها

من الأخ Qniq:

8- عدم استعمال Reobots file

9- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Ajax

أي الاعتماد على الأجاكس بكامل الموقع وهذا خطأ كبير … فبعض المستخدمين يعطلوا الجافاسكربت لديهم وبذلك سيظهر موقعك بشكل عبيط

10- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Flash

فبعض الناس مثلي يلغوا الفلاش كله من متصفحهم

11- عدم استخدام Caching بشكل احترافي

إذا لم تعرف كيفية استخدامه فلا تستخدمه

وسوم: برمجة, تصميم, تكتيك, نصائح
منشورة في تصميم | 9 من التعليقات »

اختصارات ال CSS

July 21, 2008 - الاثنين 19 رجب 1429

مجموعة اختصارات عند كتابتك لملف css

1- اختصار ال margin وال padding
بدلاً من كتابة:

 div {

margin-top: 5px;

margin-right: 8px;

margin-bottom: 3px;

margin-left: 4px;

}

div {

padding-top: 5px;

padding-right: 8px;

padding-bottom: 3px;

padding-left: 4px;

}

نكتب التالي:

 div {

margin: 5px 8px 3px 4px;

}

div {

padding: 5px 8px 3px 4px;

}

حيث الاختصار يكون دائماً بالترتيب التالي: Top – Right – Bottom – Left

2- الإطار:
بدلاً من:



div {

border-width: 3px;

border-style: solid;

border-color: #c00;

}

نكتب:

div { border: 3px solid #c00; }

3- الخلفية:
بدلاً من:

 div {

background-color: #fff;

background-image: url(../images/bg.gif);

background-repeat: repeat-y;

background-attachment: fixed;

background-position: top center;

}

نكتب:

div { background: #fff url(../img/bg.gif) repeat-y fixed top center; }

4- الخط:
بدلاً من:



p {

font-style: italic;

font-variant: small-caps;

font-weight: bold;

font-size: small;

line-height: 1.2em;

font-family: Helvetica, Arial, sans-serif;

}

نكتب:

 p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

وسوم: css, تصميم, تكتيك, نصائح
منشورة في تصميم | 6 من التعليقات »

معايير الشيفرة المصدرية

July 19, 2008 - السبت 17 رجب 1429

هذه المعايير متفق عليها عالمياً واعتمدت من قبل PEAR, Joomla, Drupal. فهذه المعايير تريحك كثيراً بالعمل ومن يعمل بعدك على نفس الشيفرة المصدرية.

الهامش:

استخدم هامش بمقدار فراغين أو أربعة فراغات.

الجمل الشرطية:

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

if (condition1 || condition2) {
	action1;
}
elseif (condition3 &amp;&amp; condition4) {
	action2;
}
else {
	defaultaction;
}

switch (condition) {
	case 1:
		action1;
		break;

	case 2:
		action2;
		break;

	default:
		defaultaction;
}

استدعاءات التوابع:

لاتترك فراغ عند الاستدعاء بين اسم التابع والقوس الدائري وأول وسيط (parameter)، ضع فراغاً بعد الفاصلة والموسط التالي ولاتضع فراغاً بين آخر وسيط والقوس الدائري والفاصلة المنقوطة:

$var = foo($bar, $baz, $quux);

اترك فراغاً قبل وبعد المساواة دائماً.

تعريف التوابع:

function foo($bar) {
	$foo = $bar;
	return $foo;
}

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

المصفوفات:

كما العادة بين عناصر المصفوفة يوجد فواصل وبعد الفاصلة فراغ بينها وبين العنصر التالي:

$some_array = array('hello', 'world', 'foo' => 'bar');

عندما تكون المصفوفة طويلة يفضل فصلها على عدة أسطر بحيث طل سطر يحتوي على عنصر:

$form['title'] = array(
	'#type' => 'textfield',
	'#title' => t('Title'),
	'#size' => 60,
	'#maxlength' => 128,
	'#description' => t('The title of your field.'),
);

المسميات:

- أسماء التوابع:

يجب أن تكون بأحرف صغيرة وإذا كانت مؤلفة من أكثر من كلمة تفصل بـ (_):

- الثوابت:

يكتب كل الاسم بأحرف كبيرة

- الصنف (class):

$type = new stdClass();

يبدأ بحرف صغير ومابعده من كلمات بأحرف كبيرة لايفصل بينها شيء

وسوم: برمجة, تكتيك, نصائح
منشورة في برمجة | 11 من التعليقات »

أوراق المساعدة

July 17, 2008 - الخميس 15 رجب 1429

السلام عليكم،

درج في الأونة الأخيرة موضة جديدة وهي “أوراق المساعدة” (Cheat Sheets) أعرف أن الترجمة خاطئة ولكني لن استخدم مفهوم “أوراق الغش” فهو ينافي ديننا وقيمنا.

تحتوي أوراق المساعدة على أهم خصائص هذه اللغة أو التقنية … حيث تستطيع بسرعة معرفة ماتريد.

ملاحظة: بإمكانك تعليقها على حائط غرفتك أو وضعها كخلفية للشاشة.

1- Regular Expressions Cheat Sheet V2