Posts Tagged ‘برمجة’

إجراء عملية تراجعيا

2010/05/14
نحتاج أحيانا إلى القيام بعمل ما على شيء ما يقتضي تنفيذه القيام به نفسه على شيء آخر … حتى نصل لحد يتوقف فيه العمل، عند وجود حالات مشابهة يمكن تحديد كيف يتم العمل على شيء واحد ثم إعادة طلب هذا العمل على الشيء الجديد أثناء تنفيذ العمل الحالي.
لو أخذنا مثال تنظيف درج، العمل هنا هو تنظيف درجة من الدرج، فإذا كان العمل معرف بالشكل التالي (طبعا تنظيف الدرج يتم من الأعلى إلى الأدنى):

إذا كان هناك درجة أعلى من الدرجة الحالية نظفها ثم نظّف الدرجة الحالية.

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

هناك قائمة في موقع انترنت تحوي عناوين أساسية و تحت كل عنوان أساسي تظهر العناوين الفرعية منه و كذلك بالنسبة للعناوين الفرعية من أجل كل منهم تظهر العناوين الفرعية تحته و هكذا، طبعا تظهر تحته و هي منزاحة للخارج قليلا بما يوحي بأن هذا الشيء فرع من الشيء أعلاه.
يمكن تحقيق ذلك برمجيا كما في المثال التالي:

(لدينا قاعدة بيانات تحوي جدولا اسمه cats فيه الحقول: رقم الفئة catid، اسم الفئة cname، و رقم الفئة الأب cparent. نعرف تابعا له الشكل:

function getCats($id){
    $q = mysql_query(“select * from cats where cparent=’$id‘”);
    if(mysql_num_rows($q)>0){
        print “<ul>\n”;
        for($i=0;$i<mysql_num_rows($q);$i++){
            print “<li>”.mysql_result($q,$i,“cname”).“</li>\n”;
            getCats(mysql_result($q,$i,“cid”));
        }
        print “</ul>\n”;
    }
}
getCats(0);

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

احذف (س)
بدء
احذف جميع المحتويات في القسم س
أحضر أرقام الأقسام الفرعية من القسم س و من أجل كل منها: احذف (رقم القسم الفرعي).
انتهاء

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

Advertisements

ما الحل برأيك؟

2010/01/04
من العادات الجيدة عند برمجة تطبيق أو موقع انترنت الأخذ بعين الاعتبار أن المستخدم لا يعرف، من الممكن أن يرتكب أخطاء لا تخطر بالبال، فمثلا وارد جدا أن يكتب البريد الاكتروني بالشكل http://name@sheshgleh.com و من الممكن أن يستخدم اختصارا لملف على أنه الملف …
و لهذا يتم الاعتماد على تنبيه المستخدم أنه ارتكب خطأ ما، رسالة تحوي نص قصير يصف الخطأ أو المشكلة التي حدثت و تضع أمامه خيارات نحو نعم و لا و طبعا يعتمد اختيار المستخدم نعم أو لا على ما قرأه في الرسالة و اتخاذ القرار المناسب، فمثلا ممكن أن تكون الرسالة: “لقد قمت بإدخال ارتباط خاطئ، هل تريد المتابعة على أية حال؟”.

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

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

تجريبيا PickedLinks.net بدأ العمل

2009/09/18

انتهيت مبدئيا أمس الخميس 17 أيلول 2009 من برمجة موقع يحمل عنوان “روابط مفضلة” و قمت بنشره (الفترة هذه ستكون تجريبية) فقد تظهر أخطاء أو ضرورات لتحسينات معينة.
الموقع هو مفضلة اجتماعية بالمعنى الشائع أي يمكن للمشترك أن يضيف روابطا مفضلة لديه إلى حسابه بحيث يمكنه الوصول إليها أينما تولّى، كما يستطيع المشترك و غير المشترك الاطلاع على الروابط العامة التي يضيفها المشتروكون الآخرون.
برمجياً، اعتمدت على نفسي فقط في برمجة و تصميم الموقع (التصميم جدّا بسيط)، على الرغم من وجود تطبيقات مفتوحة المصدر كثيرة في هذا المجال أو إمكانية تخصيص العديد من تطبيقات إدارة المحتوى لغرض كهذا إلا أنني فضّلت أن أبرمج الموقع بأكمله لغايات في نفسي.
كنت أنوي أن أجعل الموقع بالكامل يستخدم Ajax لكن أجّلت الفكرة إلى وقت لاحق و اكتفيت بأن يكون ذلك فقط أثناء إضافة أو تعديل أو حذف الروابط، حاولت تخفيف التصميم قدر الإمكان و جعله قياسيا XHTML & CSS إضافة لجعل الروابط نظيفة Clean URLs، بالنسبة للبرمجة سيخضع باستمرار لتحديثات.
أما من حيث الأداء، يمكن استعراض الروابط الموجودة بشكل عام، يمكن عرض الروابط الخاصة بمشترك محدد كما يمكن عرض الروابط الموصوفة بكلمات محددة Tag و كذلك الاثنين معا (لمستخدم محدد + تصنيفات محددة)، هناك روابط للخلاصات Feeds لكل من الروابط الأخيرة أو خلاصات المشترك أو الموصوفة بكلمات محددة.
صفحة المشترك تحوي بياناته التي يضيفها و هي معلومات بسيطة كلّها اختيارية عدا اسم المستخدم (البريد الالكتروني لا يظهر للعموم)، الصورة الرمزية يجب ألا تتجاوز 10 كيلو بايت كما لا يتجاوز قياسها 100×100 (الوحدة بكسل) و تحتمل الصيغ png,gif,jpg.
يمكن للمشترك دوما حفظ نسخة احتياطية من الروابط التي أضافها و ذلك من ملفه الشخصي.
أعلم أن هناك مواقعا تحوي نفس الفكرة و هي تعمل بشكل ممتاز، لكن رغبت بإعداد موقع بسيط خاص بهذه الغاية و عربي.
أرحب بشدّة بالتعليقات حول الموقع و أشكر كثيرا من يرسل لي بأنه اصطدم برسالة خطأ غير متوقعة أو أية مشكلة فكما قلت الموقع في بدايته و مهما كنت قد اختبرته قد لا يزال يحوي أخطاء.
يمكن متابعة ما يتعلق بالموقع على تويتر من هنا.

استطلاع

2009/05/28

أقوم ببرمجة موقع و أودّ الحصول على أراء من يودّ حول بعض المواضيع:

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

– اسم المستخدم و كلمة المرور، غالبية المواقع تجبرنا على حروف و محارف معينة لاسم المستخدم و كلمة المرور فهل يزعجك ذلك؟

– ما أكثر ما يهمك بالموقع؟ شكل، سرعة تصفح، بساطة، وضوح في المعالم و سهولة وصول للمطلوب، …

– في صفحة المستخدم ماذا تقترح أن تكون المعلومات المعروضة؟

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

– فتح المحتويات في نفس الصفحة دون إعادة تحميل؟ أم قطعة منبثقة دون إعادة تحميل أيضا؟ أم إعادة تحميل للصفحة بشكل عادي؟ أم إتاحة اختيار هذا من إعدادات الحساب؟

– عند كتابة محتوى ما، طريقة التنسيق، هل تفضل BB مثل [b] من أجل خط سميك … ؟ أم محرر wysiwyg يُظهر التنسيق كما سيكون؟ و ما حدود التنسيق؟ يعني أيكفي تغيير لون الخط و نوعه و حجمه و محاذاة النص و سميك مائل مسطر و إضافة روابط؟

– على افتراض الموقع متوفر بأكثر من لغة، هل تفضل اختيار اللغة من إعدادات حسابك أم أن يكون كل لغة على نطاق فرعي مثلا؟ عربي مثلا /ar و انكليزي /en أو أن يكون النظاق .net لغة و النطاق .com لغة أخرى؟

أكتفي هنا و شكرا مقدّما لمن يبدي رأيه بما يرغب من هذه النقاط.

مقتطفات 4

2008/09/21

أيقونات مميزة مجانية 123456789 – و الموقع المفضل 10

هذا البرنامج يمكن من عرض قائمة في منطقة ما من الشاشة و إضافة أيقونات إليها لفتح مسار أو ملف ما و فيها مؤثرات جميلة ، تشبه بعض القوائم في لينكس

How to Think Like Computer Scientist كتاب حول لغة Python جميل جدا أنصح بقراءته لمن يرغب بتعلم هذه اللغة ، كتاب مجاني تحت رخصة GNU و متوفر بعدة صيغ منها PDF.

كتب Python مجانية أخرى :
The Standard Python Library
Dive Into Python
An Introduction to Tkinter

أغاني مسلسلات أطفال فيديو قديمة ( ألا ليت ريعان الشباب يعود ):

ليدي ليدي
توم سوير
ريمي
سنان – البداية
سنان – النهاية
حكايات عالمية – البداية
حكايات عالمية – النهاية
بل و سباستيان
جزيرة الكنز
هايدي

إطار مظلل بلا صور

2008/02/21

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

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

الثانية : هي وجود صورة كخلفية بشكل كامل و بهذا فهي معدّة سلفا لطول و عرض محددين.

لا أعلم إن كنت حتى الآن عرفت عن أي شيء أتكلم ، انظر هذه الصورة و ستعرف عما أتكلم.

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

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

CSS

.pict{
width: 100px;
height: 100px;
padding: 0;
background-color: #FFFFFF;
}
.pict div{
border: 3px solid #FEFEFE;
padding: 0;
}
.pict div div{
border: 3px solid #FCFCFC;
padding: 0;
}
.pict div div div{
border: 3px solid #F9F9F9;
padding: 0;
}
.pict div div div div{
border: 3px solid #F5F5F5;
padding: 0px;
}
.pict div div div div div{
border: 3px solid #F0F0F0;
padding: 5px;
}
.pict div div div div div *{
border:0;
padding: 1px;
}

مثال :

مرحبا ، هذه تجربة لصندوق بطول 125 و عرض 125 !

اضغط هنا لتحصل على ملف مضغوط يحوي كود css مع صفحة html تستخدمه.