مدونة سلام

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

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;
}

تخبيصات 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 لذلك قد تجد الكود ضعيف أو أنه يمكن فعل ذلك بطرق أفضل ، إن أحببت أن تطرح رأيك سأرحب بذلك.

Tag Cloud

salam — Thu, 20 Mar 2008 00:00:00 +0000

لا أعرف كيف أترجم هذه الجملة لكن ما هي؟
ربما دخلت إلى هذه الصفحة أو هذه.
يتم عرض التصنيفات بطريقة بحيث يكون حجم كلمة التصنيف أكبر كلما كانت المحتويات التي تنتمي إليها أكبر.
طبقت هذا في المدونة هنا انظر على اليمين قائمة الفئات، كيف يتم ذلك؟
بصراحة لا أعلم تماما الطريقة المتبعة في فلكر أو del.icio.us أو المواقع الأخرى لكن أعلم الطريقة التي اتبعتها أنا.

قبل أن تكمل خمن كيف يمكن أن يتم ذلك ؟

الطريقة التي اتبعتها تقوم على الآتي :
كل تصنيف (فئة) يحوي عدد من المواضيع ، نحتاج لآلية تعطينا قيمة كبيرة [ضمن مجال مقبول كحجم خط] للفئة التي لديها مواضيع كبيرة و تعطينا قيمة صغيرة للفئة التي تحوي عدد مواضيع قليل.
نحتاج لحد وسط أي قياسا إليه نزيد أو ننقص.

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

يمكن أن نضع شرط كحد أدنى للحجم و آخر كحد أقى للحجم، مثلا قدي ينتج لدينا أن حجم الخط الخاص بفئة ما هو 0.1em و هو جدا صغير فيمكن أن نضع شرط في حال الحجم أقل من 0.5em مثلا أن نعتبره 0.5em

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

روابط مفيدة :

Wikipedia Tag cloud
TagCrowd
Tag Clouds Gallery: Examples And Good Practices
Tag Cloud Builder
Marking Up a Tag Cloud
Tag Cloud Generator

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

salam — Fri, 22 Feb 2008 00:00:00 +0000

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

الأولى : تقوم على وجود جدول مقسم إلى خلايا بحيث يوجد في الخلايا المحيطية صور صغيرة هي عبارة عن تقطيعات لصورة أو مقاطع بعرض أو ارتفاع 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 تستخدمه.