Archive for the ‘تطوير المواقع’ Category

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

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/05/04
يتيح ووردبرس لمستخدميه إمكانية كتابة تعليمات CSS في محتوى التدوينات و الصفحات و الصناديق الجانبية، و هذه ميزة رائعة فهي تمكن المستخدم من القيام بالكثير من التعديلات في مدونته.
لا أريد أن أطيل، سأتحدث عن كيفية إنشاء صندوق عائم في المدونة كالذي أضفته اليوم على اليسار و هو يحوي روابط كصور تقود إلى حساباتي في فلكر و تويتر و خلاصات المدونة بالإضافة إلى الابتسامة التي تؤدي إلي هذه التدوينة.
لإنشاء محتوى عائم في الصفحة نستخدم تعليمة position في CSS بالإضافة لـ left, right, top, bottom تأخذ الخاصية position القيم relative, absolute, fixed ، لجعل المحتوى في موضع مطلق بالنسبة للصفحة ثم نتحكم بهذا الموضع نستخدم absolute و لجعل المحتوى مثبت نستخدم fixed ثم نحدد المكان بالضبط من خلال left, right, top, bottom

مثال:

<div style="position:absolute;top:10px;right:10px;">
Hello
</div>

مثال 2:
<div style="position:fixed;top:300px;left:0;color:white;
width:100px;height:100px;background-color:red;">
Hello 2
</div>

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

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

$fx

2009/10/28
نحتاج عند تطبيق مؤثرات باستخدام جافا سكريبت إلى تغيير خصائص عناصر في الصفحة (خصائص CSS للعقد في بنية XML) و يتم ذلك عن طريق DOM و الأحداث.
فمثلا لو فكرنا كيف نصنع حركة تقوم بتكبير صورة بشكل حركي مع تغيير موضعها لتصبح في منتصف الصفحة فوق كل العناصر الأخرى، نجد أن ذلك كفكرة يتم بتغيير كل من width,height,left,top مثلا و هذا التغيير عند جعله تابعا للزمن سيصبح أفضل من تغيير القيم من القيمة البدائية إلى النهائية فقط.
مثال آخر عند استعراض صور متلاحقة مع مؤثر مثل تغيير الشفافية فيمكن النظر لذلك بأننا نقول بتغيير الخاصية opacity للصورة (filter من أجل Internet Explorer) بين قيمتين.
المهم، هناك كثير من المكتبات التي توفر توابع جاهزة للقيام بمؤثرات متنوعة مثل jQuery مثلا و لكن إن كان المطلوب من المكتبة فقط تحقيق مؤثرات و لن نستخدم إمكانياتها الأخرى مثل Ajax أو التحقق من الحقول أو … فالأفضل هو بناء المكتبة فقط لهذا الغرض أو استخدام مكتبة صغيرة.
هنا سأتحدث قليلا عن مكتبة صغيرة هي $fx تحوي بعض التوابع التي تفيد في إعداد مؤثرات حيوية.
لاحظ الصفحة الرئيسية للموقع و حركة الغيوم مثلا، تؤمن هذه المكتبة عدة توابع هي مشروحة هنا.
سأكتب مثالا صغيرا عن كيفية تحريك div إلى موقع آخر في الصفحة مع تغيير الموضع و الأبعاد و الشفافية، إضافة لذلك كيفية تنفيذ تابع آخر عند انتهاء التحريك.

CSS Code:

#p{
position:absolute;
width:100px;
height:100px;
background-color:#F9F1D2;
border:1px solid #F1DF98;
text-align:center;
right:70px;
top:10px;
z-index:10;
}

Javascript Code:

//<![CDATA[
(function(){
window.onload = function(){
var p = document.getElementById("p");
zoomin(p);
function zoomin(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:70,to:410,step:20,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:10,to:66,step:4,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:520,step:30,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:380,step:20,delay:1,onfinish:function(){
zoomout(id);
id.innerHTML = 'Hello !';
}}).fxRun(null,1);
};
}
function zoomout(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:410,to:70,step:-20,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:66,to:10,step:-4,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:100,step:-30,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:100,step:-20,delay:10,onfinish:zoomin(id)}).fxRun(null,1);
};
}
};
})();
//]]

XHTML Code:

<div id="p"></div>

لتحميل مكتبة $fx النسخة المضغوطة من هنا و لتحميل المصدر من هنا، الملفات تخضع لرخصة MIT و GPL.
و لتحميل هذا المثال البسيط من هنا.

تجريبيا 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 لغة أخرى؟

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

محرر nicEdit

2008/08/30

محرر نصوص أو ما يسمى بـ WYSIWYG التي تعني What You See Is What You Get جديد كما أعتقد هو nicEdit ، يتميز بأنه بسيط و صغير جدا ، المحررات الأخرى المعروفة ذات حجم كبير يزيد عن الـ 2 ميغا بعد فك الضغط و يصل للـ 5 ميغا بايت أما هذا فحجمه بعد فك الضغط 34 كيلو بايت و يتألف من ملف جافا سكريبت و صورة gif فقط.
قابل للتخصيص بشكل جيد و مناسب للكثير من المناطق ، فكثيرا ما تكون الحاجة لمحرر بسيط و بإمكانات محدودة و لا داعي عندها لتركيب محرر مثل TinyMCE أو غيره …

هذه صورة للمحرر

يمكن تجربته و تحميله من موقع المنتج.

للمهمات الأكبر أنصح باستخدام openWYSIWYG.

مختصر سريع في أمن المواقع

2008/08/08

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

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

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

  • عندما تحتاج لطلب محتوى ما اعتمادا على رقمه فلا يجب أن يقبل تطبيقك إلا رقما. مثلا طلب مقالة اعتمادا على رقمها الفريد في قاعدة بيانات.
  • عندما يكون المحتوى نص لا يجب أن يقبل تطبيقك إلا النصوص ، لا يجب أن يقبل بوجود HTML أو JavaScript أو أي شيء آخر. مثلا عند نشر مقالة ، تعليق ، … يجب فلترة المحتوى.
  • الـ URI يجب أن يكون URI ، الصورة يجب أن تكون صورة ، الـ HTTP_REFERER يجب أن يكون HTTP_REFERER ، الـ IP يجب أن يكون IP … يجب اختبار كل شيء ، استخدام التعابير النظامية Regular Expressions مفيد.
  • عند تضمين ملف يجب أن يكون هو الملف الذي يجب تضمينه، عند السماح برفع ملف للموقع يجب أن يكون نوعه من الملفات المسموحة ، عند حذف شيء يجب أن يتم حذفه هو فقط، عند السماح بـ HTML بشكل محدود يجب الحفاظ على هذه المحدودية
  • … إلخ

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

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

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

2008/06/22

هنا أكتب بعض الوسوم التي قلما أجد أحد يستخدمها و هي :
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 : نص مشابه للمكتوب بالآلة الكاتبة.

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

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 .

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

2008/03/27

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

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

2008/03/04

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

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

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

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

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 تستخدمه.