مدونة سلام

شكرا للمتصفحات الجيدة

salam — Mon, 25 Aug 2008 02:48:06 +0000

من يعمل في مجال تطوير المواقع يدرك كم أن Internet Explorer هو متصفح مزعج.
مثلا :
بعض خواص CSS القياسية لا تعمل بشكل صحيح ، نحتاج في كثير من الأحيان لأخذه كحالة خاصة و معالجتها ( أحيانا أقوم بكتابة صفحة XHTML مع CSS دون أن أقوم بعرضها حتى النهاية و تكون النتيجة كما هو متوقع تماما في FireFox لكن عند عرضها في Internet Explorer غالبا ما تكون فايتة ببعضا) .

لا يدعم JavaScript ¹ ففي كثير من الأحيان نختبر نوع المتصفح فإن كان انترنت اكسبلورر سنضطر لكتابة كود إضافي ليعمل بشكل صحيح عليه.

الصور من نوع PNG لا تظهر بشكل طبيعي فيه أيضا حيث يقوم بوضع خلفية في الفراغات بدلا من الشفافية كما في غيره.

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

JavaScript

CSS

#war{
position: fixed;
bottom:0;
width:100%;
background-color:#000;
color: #FEFEFE;
padding: 3px;
visibility: visible;
text-align: center;
z-index: 3;
}

أشكرك كثيرا لأنك لا تستخدم متصفح ~~Internet Explorer~~

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

-----------
¹ قامت مايكروسوفت بإصدار JS مناسبة لمتصفحهم، تختلف قليلا عن JavaScript و ECMA القياسية.

z-index في CSS

salam — Fri, 22 Aug 2008 08:51:23 +0000

تستخدم z-index في CSS لتحديد البعد الثالث ، أو لنقل أنها تحدد "أفضلية الظهور !".

z-index هي إحدى خواص CSS ، عند التعامل مع DOM تصبح zIndex و تستخدم لتحديد البعد وفق المحور Z فإذا اعتبرنا أن المستوى الأساسي الذي هو مستوى الصفحة فيمكن اعتبار العناصر التي تكون فوق بعضها عدة طبقات و عادة تظهر الطبقة التي تأتي لاحقا فوق السابقة لكن بواسطة z-index يمكن تعيين قيمة لطبقة بحيث تكون أعلى من غيرها رغم ورود غيرها بعدها.

مثال ، اضغط هنا ، إنها 5 عناصر HTML من نوع div ملونة بألون مختلفة ، اضغط على أي مربع لتغيير قيمة z-index له لتصبح 3 و اضغط مرة أخرى ليعود 1 هذا لا ينطبق على المربع الأحمر في المنتصف ولا على المربع الذي في الزاوية اليسرى السفلية.

الحدث onclick المضاف و استخدام DOM هو فقط لتقديم مثال فعال.

CSS

#tl{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: #A4B928;
}
#tr{
    position: absolute;
    left: 100px;
    top: 0px;
    width: 100px;
    height: 100px;
    background-color: #C2611F;
}
#c{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: #DF270D;
    z-index:2;
}
#br{
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: #9D4F80;
}
#bl{
    position: absolute;
    left: 0px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: #004040;
}

مثال نموذجي للأجاكس مع رسائل النتائج

salam — Sat, 31 May 2008 11:32:51 +0000

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

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

العملية لا تستغرق وقتا طويلا للإنجاز لكن قمت بإيقاف الصفحة ثانيتين عن العمل لكي تظهر الرسالة الصفراء بوضوح !

تخبيصات javascript

salam — Fri, 30 May 2008 00:26:51 +0000

جرب ثم اقرأ :

رسالة نتيجة صحيحة

رسالة فشل

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

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

هذا كود javascript الذي كتبته :

t = 400;
function msg(message,type,period){
    t = period;
    id = type == 'ok' ? 'ok' : 'error';
    document.getElementById(id).style.display = 'block';
    document.getElementById(id).innerHTML = message;
    window.setTimeout("stay(id)",1);
}
function stay(id){
    t = t-1;
    if(t>0){
        window.setTimeout("stay(id)",1);
    }else{
        document.getElementById(id).style.display = 'none';
    }
}

و هنا CSS

#ok{
border: 1px solid #95E89F;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #DAF2D9;
}
#error{
border: 1px solid #FF0000;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #FFDFDF;
}

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

[نظام إدارة مواقع ...] قادم

salam — Fri, 16 May 2008 15:20:54 +0000

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

ما هو هذا النظام ( كلمة نظام كبيرة شوي ) ؟

هو عبارة عن موقع فارغ ، يمكن اعتباره نواة Core موقع ، لا يحتوي في حالته الافتراضية شيئا إلا ( لوحة تحكم أساسية ، نظام قولبة ! Theme ، برنامج نموذجي ).
لوحة التحكم الأساسية تتضمن : معلومات المدير و إمكان تعديلها ، إمكانية تثبيت و إزالة برامج mods ، تعديل إعدادات الموقع الأساسية ، توزيع الكتل أو الصناديق ).

مم يتألف البرنامج mod ( اختصار لـ module ) ؟
يتألف أساسيا من ملف xml يحوي كافة معلومات البرنامج ، إضافة للصفحات المكونة له و هي من نوع php و js و ... حسب الرغبة

هذا هو كل الموضوع !

حقيقة ، قمت بالتعامل مع الكثير من أنظمة إدارة المحتوى CMSs و كانت فكرتي أن أقوم بشيء مشابه لكن بأقل كمية ممكنة من الكود و بأكبر قدر ممكن من الديناميكية، و هذا النموذج هو ما استقريت عليه.
قد يبدو صغيرا لكن كما قلت هو نواة فقط ، يمكن بالتالي تخصيص هذا الموقع لأي غرض.
مثال ، أريد أن أجعل الموقع عبارة عن موقع إخباري [أخبار ، أقسام ، تعليقات ، مدراء ، RSS ، ...]
أقوم ببرمجة برنامج خاص بذلك mod و ليكن اسمه news ، يتضمن هذا البرنامج ملف إعدادات xml و ملفات php و ليكن أحدها خاص بعرض الأقسام ، آخر خاص بعرض الأخبار (عموما ، حسب القسم ، عرض خبر كامل ... ) ملف خاص بالخلاصات RSS ... أيضا هناك ملفات لإدارة كل مقطع تظهر للمدير في لوحة التحكم بعد أن يقوم بتثبيت هذا البرنامج.

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

هناك حرية كبيرة في برمجة أي برنامج ، المهم شرح هذا البرنامج في ملف الـXML الخاص به.

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

مشروع المترجمات

salam — Thu, 15 May 2008 02:27:05 +0000

اليوم انتهيت من مشروع المترجمات (Compiler) ، قضيت 10 ساعات متواصلة في كتابة الكود ، حوالي 500 سطر جافا.
أعتقد أنه إنجاز جيد بالنسبة لي لعدة اعتبارات :

- تغلبت قليلا على الكسل.
- هذه أول مرة أكتب برنامج بلغة Java ، معرفتي بها ضعيفة ، سأتوسع بها فيما بعد.
- استخدام طريقة جديدة في الترجمة تتمثل في استخدام الـXML كمرحلة ، و استخدام المكدس Stack في التحليل و هذا ما أعجب الأستاذ .

مراحل عمل المترجم :

1 - قراءة الكود الذي يقوم المستدم بكتابته في ملف.
2 - تقسيم الكود إلى مقاطع و وضعها في ملف XML .
3 - جلب البيانات من ملف الـ XML و تحليل كل مقطع و حفظ قائمة بالأخطاء.
4 - في حال عدم وجود أخطاء ، بناء برنامج java مكافئ.
5 - توليد ملف .class من ملف الجافا الناتج.

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

اللغة التي يقبلها المترجم هي لغة بسيطة تتكون من الآتي :

- يبدأ البرنامج بكلمة start و ينتهي بكلمة end .
- يعرف المتحول على أنه إما String أو int بواسطة الكلمة def مثل :

def test int;

- عبارة if لها الشكل :

if (exp){}

- عبارة for لها الشكل :

for x = y to z { }

- عبارة الإدخال هي :

input(x)

- عبارة الإخراج لها الشكل :

output(x)

- تقبل اللغة حلقات for و حلقات if متداخلة.

هذه صورة توضح الطريقة المتبعة في معالجة حلقة For ، يتم بناء مكدس أو مصفوفة تحوي في عناصرها تعابير نظامية Regular Expression كل منها يعبر عن محتوى يجب أن يكون ، تتم معالجة الجملة بحيث نقوم بتجميع الحروف حتى نصل للفراغ ثم مقارنة النص الناتج مع قمة المكدس ، إذا حصل تطابق matches ننفذ الطريقة pop التي تحذف قمة المكدس ، و في نفس الوقت نكون قد حذفنا الأحرف المشكلة للكلمة التي تم تحليلها.
هناك حالتان لوقوع الخطأ :
- في حال انتهاء العبارة و عدم انتهاء المكدس.
- في حال وجود حالة عدم تطابق في إحدى المراحل.
صورة توضيحية ( بعض الشيء ) : اضغط على الصورة للتكبير -

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

البرمجة الكائنية عند أفلاطون

salam — Wed, 23 Apr 2008 00:00:00 +0000

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

نحن نعلم الشيء المطلق بمثاله ، فمثلا عمل الخير هو مثال للخير ، شيء جميل هو مثال للجمال و ليس الجمال ...

البرمجة الكائنية OOP أي Object Oriented Programming أسلوب في البرمجة يعتمد على تحويل أي شيء إلى كائن ، مثلا إذا كان البرنامج يتناول صورة عندها يمكننا إنشاء نوع هو صورة يحوي مواصفات مثل نوع الصورة jpg, gif , png ... حجم الصورة ، أبعاد الصورة ( طول ، عرض ) ... هذا كلّه وصف لصورة ، ليس صورة بالتحديد و إنما نوع.

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

فمثلا في Java نكتب :

public class Img{
...
}

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

Img anyName = new Img();

إن anyName هو مثال للصورة أو لنوع الصورة ، كما هو السرير الخشبي مثال للسرير المطلق !

كيف سندرك المطلق؟ اللانهاية ؟

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

تفعيل DOM في PHP

salam — Tue, 22 Apr 2008 00:00:00 +0000

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

المهم ما أود الحديث عنه هو كيفية التعامل مع الـ DOM في PHP :

الحصول على ملف php_domxml.dll و وضعه في المسار extensions

تعديل ملف php.ini بالشكل :

إزالة الـ ; من العبارة

;extension=php_domxml.dll

و إن لم تكن موجودة إضافتها

extension=php_domxml.dll

في المكان المخصص لذلك ، يمكنك البحث عن extension و ستجد الأسطر :

extension=php_pdo.dll
...
extension=php_sqlite.dll

أعد إقلاع السيرفر و المتصفح و الآن يمكنك إنشاء كائن Object DOM

$doc = xmldoc();

حركة Javascript ! لا حدا يضحك

salam — Sun, 02 Mar 2008 00:00:00 +0000

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

- هذا ما توصلت إليه اضغط هنا

صحيح أن ذلك بسيط و ربما يحوي أخطاء و لكن لا بأس في التعلم.

ملاحظة : قم بعرض المصدر لهذه الصفحة ستجد أنه بإمكاني إضافة Javascript في الـ head عندما أقوم بإضافة موضوع ، كم هذا ممتع