مدونة سلام

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

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 القياسية.

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

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

مقتطفات 3

salam — Mon, 21 Apr 2008 00:00:00 +0000

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

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

انظر ماذا يمكنك أن تفعل بـ SVG و JavaScript و DOM يجب أن يكون لديك مشغل SVG أما بالنسبة للفايرفوكس لا مشكلة فهو يشغل SVG دون إضافات لكن انترنت اكسبلورر يحتاج SVG Player.

هل تعتقد بوجود سوء فهم للحب في المجتمع ؟ ربما موضوع يحتاج للتخصيص بشكل مفرد ... ذلك أفضل.

بحثت عن كلمة "فلسفة" في غوغل ، فتحت أول نتيجة ، موقع يدعى "فلسفة" أعجبني الموقع في بعض مناطقه لكني تفاجأت بالمكتبة لا أعرف ، هناك كتب (استهجنت وجودها)، إذا كنت مهتما بالفلسفة ولديك اطلاعات ربما تستغرب أو لا تستغرب !؟ .

هذه الصورة تصوّر سقراط في السجن قبل تنفيذ حكم الإعدام به (بالسم) و رفاقه عنده يحاولون إقناعه بالهرب أو دفع فدية.

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

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

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

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

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

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

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

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

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

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

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

نظام التدوين salamBlog

salam — Sat, 02 Feb 2008 00:00:00 +0000

نظام التدون المستخدم هنا في مدونتي هو من برمجتي و سميته salamBlog.
هذه أول مدونة لي على الانترنت و كنت قد تعاملت مسبقا مع أنظمة تدوين كثيرة و لكن في النهاية قررت برمجة مدونتي بنفسي ، لماذا ؟
أريدها خفيفة ، سريعة التصفح ، آمنة ، لها خصوصية ، صديقة لمحركات البحث ، أفهمها جدا بحيث أتمكن دائما من تطويرها حسب رغبتي و و لأن أغلب أنظمة التدوين التي تعاملت معها كنت أرى فيها أشياء تنقصني و أشياء إضافية.
ما هي ميزات نظام التدوين المستخدم هنا :
1 - خفيف جدا.
2 - آمن.
3 - تصنيفات Tags.
4 - صديقة لمحركات البحث.
5 - إدارة عالية الديناميكية.
6 - سهولة تغيير التصميم و التطوير.
7 - مراعية للمعايير القياسية بنسبة كبيرة جدا.
8 - إمكانية إضافة CSS و javascript في رأس الصفحة عند إضافة موضوع بالإضافة إلى الـ keys و الـ description ...

نواقص سأكملها :

1 - ~~RSS~~ Atom
2 - ~~التعليقات ( حاليا لا يمكن التعليق و ربما لن أضيف هذه الميزة).~~
4 - ~~صور ، معرض صور خفيف ملائم.~~ استخدمت فلكر.
5 - ما بعرف شو بيطلع معي أفكار...

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