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>

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

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

ملحوظة صغيرة

2010/01/16
يبدو أن مبرمج ملف الـjavascript في موقع نقابة المهندسين كان متعبا أثناء برمجته و يتضح ذلك من خلال الرسالة المستخدمة للتأكد من وصول التنفيذ إلى سطر أو كتلة ما، لاحظ معي الـ واااااااع 😀 :

if (ss.readyState==4){
//alert("waaaaaaa3");

طبعا من الجيد في مختلف لغات البرمجة استخدام فكرة طباعة عبارة (أو إظهار رسالة) معينة في كتلة أو مقطع للتأكد من دخول التنفيذ إليها.
بالنسبة لي أقوم عادة بطباعة 0 ثم 1 ثم … في المنطقة التي أشك بسير التنفيذ فيها فمثلا ليكن كود الجافا التالي:
try{
ResultSet rs =...
System.out.println("0");
if(rs.next()){
System.out.println("1");
if(rs.getString(1) != null){
System.out.println("2");
...
}else{
System.out.println("3");
...
}
}else{
System.out.println("4");
...
}
}catch(SQLException e){
...
}

و ذلك طبعا أثناء العمل و ليس تبقى في التطبيق النهائي.

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

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.
يمكن للمشترك دوما حفظ نسخة احتياطية من الروابط التي أضافها و ذلك من ملفه الشخصي.
أعلم أن هناك مواقعا تحوي نفس الفكرة و هي تعمل بشكل ممتاز، لكن رغبت بإعداد موقع بسيط خاص بهذه الغاية و عربي.
أرحب بشدّة بالتعليقات حول الموقع و أشكر كثيرا من يرسل لي بأنه اصطدم برسالة خطأ غير متوقعة أو أية مشكلة فكما قلت الموقع في بدايته و مهما كنت قد اختبرته قد لا يزال يحوي أخطاء.
يمكن متابعة ما يتعلق بالموقع على تويتر من هنا.

State Pattern

2009/05/05

أي، مرحبا
اليوم كان عندي تقديم جزء* من محاضرة في هندسة البرمجيات، كنت سأتحدث عن النموذج State و هذا ما حصل.

هنا PDF (صفحتين) و هنا مثال Java

مختصر جدا، لكن هذا رأيي (مختصر مفيد).


* استغرقت 7 دقائق تقريبا

فكر تعاودي

2008/12/22

غالبا ما يتم التنقل من موضوع لآخر عند وجود أشخاص يتحادثون(شخص واحد على الأقل) يحدث هذا التحول في موضوع الحديث بسبب ورود فكرة تحوي من الأهمية، في رأي أحد المتحادثين على الأقل، ما يفوق أهمية الموضوع الحالي فما إن ترد تلك الفكرة حتى ينتقل إليها، أحيانا يكون الموضوع الجديد محدودا فينتهي الحديث حوله خلال مدة قصيرة ثم يعود الموضوع السابق، و أحيانا يولّد هذا الموضوع بدوره موضوعا آخرا … و هذا ما يسبب في الأوقات القادمة قول أحدهم : وين كنّا ؟؟ متسائلا.
أما كيف تأتي هذه المواضيع رغم “عدم علاقتها” (كما يبدو) ،في بادئ الأمر، بالموضوع الحالي فسأتحدث عن فكرتين، أو بالأصح عن شخصين، الأول هو من قام بتغيير الموضوع و الثاني لاحظَ نقطة تغير الموضوع و يفضل أن يملك تفكيرا تعاوديا جيدا:
بالنسبة لمن قام بتغيير الموضوع فهو عرضت له كلمة أو عبارة أو ربما مشهد أو صوت أو رائحة أو … ضمن موضوعي هذا قد لا علاقة هناك للروائح أو المناظر باحتمال كبير، المهم أن شيئا ما حدث و قد ذكّره هذا الشيء بموضوع أو شخص أو لنقل شيئا آخر بعيدا كل البعد عن الموضوع من وجهة نظر شخص لا يعني له الموضوعان ما يعنياه بالنسبة لمن غيّر الموضوع، هنا أوقف هذا الشخص سير الحديث بالموضوع الحالي و انتقل للموضوع الجديد عندما أتيحت له الفرصة لهذا الفعل (بعض الناس يقطعون حديثك بشكل غبي و البعض ينتظرك لتنهي الحديث و هناك من يهمّ بمقاطعتك فيدرك أنه ارتكب حمقا فيتراجع و هنا تدرك بأن لا أهمية للاستمرار [طويلا] بالموضوع الحالي و أن من المستحسن ترك المجال لهذا المقاطع ليبدأ بموضوعه).
إذن، ما يهمنا حاليا هو أن شيئا ما استدعى شيئا آخر، الشيئان من النظر بشكل عام لا علاقة لهما، إلا أن هناك علاقة لولاها لما استدعى أحدهما الآخر، مما يقودنا إلى فكرة هامة ألا و هي أن هناك ترابط بين الأفكار في ذاكرتنا و أن لهذا الترابط كبير الأهمية لبقاء هذه الأفكار فالفكرة التي لا يبقى أفكار ترتبط بها تفنى أغلب الظن (كما أظن)، لاحظ أنه في لغات البرمجة، و لتكن لغة جافا، أننا غير مضطرين لتدمير الكائنات عندما ننتهي من استخدامها، هناك من يقوم بذلك ولا أريد أن أدخل بالتفاصيل فقط ما أريد أن أذكره هو أن في اللغة شيئا ما مهمته تدمير الكائنات عندما ننتهي من استخدامها، أما كيف يعرف بأننا انتهينا من استخدامها فهذا شبيه بالفكرة التي في ذاكرتنا و التي لم تعد أية فكرة أخرى ترتبط بها (هناك الكثير من الأحداث التي تتلاشى من ذاكرتنا لعدم ارتباطها بأحداث أخرى، مثلا عندما تشتري كيلو موز من دكان …).
هناك متانة في تلك الأفكار التي تحاكي في تحقيقها تصميم الإنسان أو بشكل أعم، ما خلقه الله.

أنتقل للشخص الآخر، ذلك الذي لاحظ أن الآخر غيّر مسار تفكيره بشكل مثير للدهشة! ، كأن تكون تتحدث مع زميل لك حول إحدى المواد في الجامعة و أنتما أمام مكتبة فيقول لك في منتصف حديثك بأن السرطان منتشر بشكل مخيف هذه الأيام ! (سأذكر هذا المثال بعد قليل).
هذا الشخص عندما لاحظ تبدل الحديث حاول أن يعرف ما الذي دعا الآخر ليغير حديثه، عمليا هو يحاول أن يجد ذلك الرابط بين الموضوعين، و هنا قد يفلح و قد لا يفلح و ذلك يعود لعدة عوامل منها أو أهمها هو وجود مواضيع في ذاكرة الآخر ،تشكل مرحلة من مراحل الارتباط بين الموضوعين، لا يعرفها و لم ينجح في تخمينها.
فكيف يحاول معرفة الارتباط ؟ مبدئيا يبحث عن شيء مرتبط بالموضوعين فإن وجد ذلك الشيء فهذا يدل على ارتباط مباشر بين الموضوعين أما إن لم يجده فيحاول (و دون أن يقصد ربما) أن يجد موضوعا ثالثا يربط الموضوعين بمعنى أن هناك ارتباط بين الموضوع الثالث و كل من الموضوعين الآخرين، علما أن لا علاقة لهما ببعضهما دونه، أيضا قد يفلح و … إلى أن يتعب أو يعرف و هذا حسب قوة دماغه.
العودية أو الاستدعاء الذاتي هو مفهوم رياضي يطبّق برمجيا يقول: إن بإمكان تابع أن يستدعي ذاته ضمن ذاته، مثلا لنأخذ مثالا بسيطا رياضيا قبل أن آخذ مثالا حياتيا:
قوة العدد x من الدرجة n تساوي قوة العدد x من الدرجة n-1 مضروبا بـ x، لاحظ بأن عبارة “قوة العدد” وردت في تعريف عبارة “قوة العدد”، و هكذا فإن :

xn = xn-1*x
xn-1 = xn-2*x
xn-2 = xn-3*x

أي

xn = ((((...xn-(n-1))*x)*x)*x)*...x

و هذا ما نعبر عنه بأسلوب آخر عن تعريف xn بقولنا هي x*x*x… عدد n من المرات.

مثال حياتي: كم سعر 5 كيلو من البطاطا ؟ هو سعر 4 كيلو + سعر 1 كيلو، طيب و ما سعر الـ 4 كيلو ؟ هو سعر 3 كيلو + سعر 1 كيلو ، و ما سعر الـ 3 كيلو ؟ هو سعر 2 كيلو + سعر كيلو، و ما سعر 2 كيلو ؟ هو سعر 1 كيلو + سعر 1 كيلو. بعد هذا لن نسأل كم سعر الكيلو إذ أن هناك قيمة أولى يتم التراجع عوديا عند الوصول إليها.
نقوم بتنفيذ الأسلوب التعادي دون أن نفكر بذلك، مثلا قد يحدث أنه كم عمر يوسف؟ فيجيب الآخر بأن يوسف أكبر من زينة بـ 3 سنوات، فيُسأل: كم عمر زينة ؟ 22 سنة فيستنتج السائل بأن يوسف عمره 25 سنة، و قد لا يرغب بمعرفة عمر يوسف بعد أن تصل سلسلة الارتباطات بين أعمار آخرين حدا مملاً.

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

الموضوع بكليته هو رأيي أو لأقل هو ما أظنه أنه. الأفكار كثيرة… أكتفي هنا

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

2008/04/23

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

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

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

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

فمثلا في Java نكتب :
public class Img{
...
}

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

Img anyName = new Img();

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

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

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

تفعيل DOM في PHP

2008/04/22

بدأت العمل بمشروعي لهذا العام في الجامعة و هو 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();

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

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