مدونة سلام

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 — Fri, 08 Aug 2008 11:22:01 +0000

في كل مرة أحاول أن أكتب كتيّب صغير (PDF صغير كما أقصد) أو مجموعة مقالات تتناول موضوع أمن المواقع أتراجع لعدة أسباب ، و لعل أهمها هو أني عندما أكتب موضوعا يتعلق بالبرمجة أختصر أو أكتب بطريقة غير مفهومة لذلك ألغي الفكرة.
في هذه المرة لن أكتب مقالات ولا كتيّبا ، سأكتفي بسطر يلخص من وجهة نظري أمن المواقع.

لكي تبني موقعا آمنا يجب ألّا تسمح بحصول أمر غير متوقع ، يجب دائما الحصول على القيم الصحيحة أو الممكنة ، لا تسمح بشيء غير مسموح به.

سأذكر بعض الأمثلة للتوضيح:

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

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

الـ URI يجب أن يكون URI ، الصورة يجب أن تكون صورة ، الـ HTTP_REFERER يجب أن يكون HTTP_REFERER ، الـ IP يجب أن يكون IP ... يجب اختبار كل شيء ، استخدام التعابير النظامية Regular Expressions مفيد.

عند تضمين ملف يجب أن يكون هو الملف الذي يجب تضمينه، عند السماح برفع ملف للموقع يجب أن يكون نوعه من الملفات المسموحة ، عند حذف شيء يجب أن يتم حذفه هو فقط، عند السماح بـ HTML بشكل محدود يجب الحفاظ على هذه المحدودية

... إلخ

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

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

بعض وسوم XHTML قليلة الاستخدام

salam — Sun, 22 Jun 2008 16:12:22 +0000

هنا أكتب بعض الوسوم التي قلما أجد أحد يستخدمها و هي :
address , ins , dbo , dfn , samp , q , cite , abbr , var , code , tt ...

البعض واضح عمله من اسمه مثل address و var و code
ins : نص مضمّن ، ممكن أن يأخذ خاصية cite قيمتها الـ uri الأصل للنص المضمّن.
bdo : مفيد عندما نرغب بتغيير اتجاه النص فهو يأخذ dir كخاصية تأخذ إما rtl أو ltr .
dfn : تعريف.
samp : عينة أو مثال.
q : اقتباس في نفس السطر.
cite : استشهاد بمقولة.
abbr : اختصار.
var : متحول.
code : مقطع برمجي.
tt : نص مشابه للمكتوب بالآلة الكاتبة.

انظر الأمثلة :

<address>Information on Author</address>
<ins>Inserted Text</ins>
<ins cite="http://www.someuri.uri">Some Text</ins>
<bdo dir="ltr">LTR text - </bdo><bdo dir="rtl">RTL Text</bdo>
<dfn>Definition</dfn>
<samp>Sample</samp>
<q>Inline Quote</q>
<q cite="http://www.uriofquote.uri">Inline Quote</q>
<cite>Citation</cite>
<abbr>Abbreviation</abbr>
<var>Variable</var>
<code>Code Block</code>
<tt>Fixed Pitch Font</tt>

و النتيجة هي :

Information on Author

Inserted Text
Some Text
LTR text - RTL Text
Definition
Sample
Inline Quote
Inline Quote
Citation
Abbreviation
Variable
Code Block
Fixed Pitch Font

من المفيد الاطلاع على ملف xhtml-strict.dtd مثلا ، لفهمه تحتاج لبعض المعرفة في بنية ملفات DTD .

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

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 — Sat, 19 Apr 2008 00:00:00 +0000

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

أزلت الفئات المعروضة بشكل Cloud من القائمة على اليمين و وضعت الفئات بشكل عادي مع الـRSS لكل منها ، الـ Cloud Tags تعرض في أسفل الصفحة الرئيسية و تعرض أيضا في صفحة Cloud Tags مع بعض التعديلات الشكلية ( ألوان) .

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

قمت بتعديل صفحة من أنا منذ عدة أيام.

أيضا ( ولو أن ذلك أقدم ) وضعت آخر ثلاث صور في حسابي في فلكر قمت بتعديلات لا تذكر على الشكل الافتراضي.

لا أعلم إن كانت ما تزال المدونة لا تفتح عند مستخدمين "الأولى" في سوريا و هذا يزعجني كثيرا.

ملاحظة صغيرة : إذا صادفتك أخطاء أثناء وجودك في مدونتي أتمنى إخباري بذلك.

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

الخطوات المرحلية لتطوير المواقع

salam — Fri, 28 Mar 2008 00:00:00 +0000

من خلال تجربتي أود أن أكتبي عن الخطوات المرحلية أو المتصاعدة في التعلم الذاتي من أجل تطوير المواقع.

1 - تعلم كيف تنشئ صفحة HTML بواسطة برنامج مثل فرونت بيج أو Nvu أو دريم ويفر أو أي برنامج مشابه (كبداية) ، لا تستمر بذلك ، تعلم فقط كيف تصمم صفحة بواسطة هذه البرامج أو صمم موقع بسيط بواسطة HTML فقط ، حاول أن تطلع على الكود أحيانا مثلا و أن تعدل فيه.

2 - ابدأ بتعلم HTML و هناك الكثير من المواقع التي تحوي دورات تعليمية للـ HTML و بوقت متزامن تعلم مبادئ CSS.

3 - انتقل إلى XHTML و CSS حاول تقليل الكود ، قلل قدر الإمكان استخدام الجداول، تحقق من صحة صفحتك بواسطة XHTML Validator و هو متوفر في موقع w3.org أيضا تحقق من صحة ملف الـ CSS .

4 - ابدأ بتعلم لغة برمجة خاصة بتطوير المواقع مثل PHP أو ASP أو Python ، لعل PHP حاليا الأكثر شهرة و هي مجانية و مفتوحة المصدر و بالتالي فهناك كم هائل من البرمجيات مفتوحة المصدر المكتوبة بلغة PHP ، أنصحك أيضا بتعلم Python فهي لغة لها مستقبل كما أتوقع ، أو Ruby.

5 - تعلم بشكل بسيط JavaScript القياسية ، حاول أن تتعلمها من مراجع تراعي جميع المتصفحات فلا تتعلم مرجع يتحدث فقط عن JS، تعتبر ECMA الأكثر قياسية.

6 - طور نفسك في PHP (فيما لو كنت بدأت بها) ادرس مواضيع متقدمة مثل OOP و API و Security ، حاول أن تفهم برمجيات مفتوحة المصدر و أن تقوم بتطويرها.

7 - تعلم المزيد عن جافا سكريبت ، ادرس مواضيع متقدمة ، و ابدأ بتعلم XML ، حاول أن تنشئ مستندات XML و أن تعرضها بواسطة CSS و في مرحلة مستقبلية بواسطة XSLT ، أنشئ لغة خاصة بك بواسطة XML حاول أن تبني لها ملف إعراب parser بواسطة DTD أو XSD ، أيضا تعلم الرسم ولو بشكل بسيط بواسطة SVG .

8 - اهتم بشكل كبير بالأمان Security ( أمن الموقع أهم شيء فيه ) ، تعلم كيف تتعامل مع ملفات XML بواسطة الـPHP مثالا على ذلك حوّل قاعدة بيانات SQL إلى XML و العكس ، صمم قارئ RSS أو ATOM مثلا.

9 - ابدأ بالـ Ajax و مواضيع أخرى مثل أساليب مصادقة محركات البحث مثل الروابط النظيفة Clean URLs و تعلم عن ملف robots.txt و خريطة الموقع sitemap.xml و ابحث عن قدرات .htaccess

10 - أنشئ تطبيقات ديناميكية و استخدم فيها خبراتك في جافا سكريبت و XML بمعنى استخدام Ajax.

11 - تعرف على مكتبات للجافا سكريبت مثل prototype.js و rico.js و غيرها.

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

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

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

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

ملاحظة : لم أضع روابط لمواقع تخص كل موضوع من المواضسيع السابقة لأنه يمكن البحث بسهولة و ربما ما أراه مناسبا قد تراه غير مناسب ، لكن الأفضل التعلم من المصدر ( الأصل !!!).

مجموعة تطبيقات Ajax

salam — Wed, 05 Mar 2008 00:00:00 +0000

مجموعة من تطبيقات الأجاكس الأنيقة :

- FrogJS معرض صور بسيط و أنيق.
- Swazz أداة لاختيار التاريخ.
- Unobtrusive للتقييم.
- ajaxim مشابه لبرامج المحادثة.
- Suckerfish HoverLightbox يمكنك مشاهدة مثال عنه من هنا.
- Ajax Domain Search للبحث عن أسماء النطاقات.
- Transparent message يعرض رسائل حول نجاح أو فشل بعض العمليات بطريقة جميلة.
- Relay لإدارة المسارات و الملفات بإمكانات كبيرة.

أتمنى أن تنال الإعجاب