طريقة تخطي فحص CSS مع الخواص الغير قياسية !

مطابق للمعايير القياسية
الهدف من اتباع المعايير القياسية في تصميم صفحات الويب هو أن تظهر هذه الصفحات بشكل سليم على كافة المستعرضات ( الداعمة للمعايير القياسية ) .. و لكن في كثير من الأحيان نلجأ إلى إستخدام بعض خواص CSS الخاصة بأحد المستعرضات لحل مشكلة في ظهور التصميم عليه مثل طرق حل مشاكل IE6 أو إستخدام بعض خواص CSS 3 كـ opacity و بالطبع فإن هذه الخواص غير قياسية في CSS 2.1 وعند فحص الصفحات بإستخدام فاحص W3C فسيظهر لك بأن الصفحة غير مطابقة للمعايير القياسية وأن هذه الخواص غير موجودة ..

بالطبع يمكنك تجاهل هذا الأمر فليس الهدف هو تجاوز إختبار CSS ولكن الهدف هو ظهور الموقع على كل المستعرضات بشكل سليم ولكن إن كنت أحد المهوسين برؤية الشريط الأخضر في صفحة فحص CSS و رؤية كلمة Congratulations! No Error Found :D و في نفس الوقت تريد استخدام هذه الخواص فإليك الطريقة : أكمل قراءة التدوينة »

من هنا و هناك – 4

طريقة تمييز تعليق الكاتب و الأعضاء في ووردبريس2.7

ووردبريس wordoress

طريقة تمييز تعليق كاتب المقال  و أصحاب العضويات عن تعليقات الزوار في ووردبريس 2.7 أكثر سهولة عن الاصدارات السابقة و التي كنت تضر الى التعديل على قالب التعليقات لاضافة بعض الأسطر للقيام بذلك ولكن في ووردبريس 2.7 كل ما عليك هو وضع الخواص التي تريدها داخل كلاسين CSS وهما byuser وهو لتعليقات الأعضاء  و bypostauthor وهو لتعليقات كاتب المقال .. بالشكل التالي :

li.byuser {
/* خواص CSS  */
}
 
li.bypostauthor {
/* خواص CSS  */
}

لاحظ بأن تعليق كاتب المقال يطبق عليه الكلاسين bypostauthor و byuser ولذلك يجب كتابة الكلاس bypostauthor بعد الكلاس byuser حتى يكون له الأولوية في التطبيق على رد كاتب المقال كما في الأعلى .

من هنا و هناك – 3

  • غيوم : موقع عبارة عن مجمع للمدونات والمواقع المختصة بتطوير الويب ..
  • عربيزي : أول موقع عربي متخصص بترجمة العربيزي الى العربية وبترجمة العربية الى العربيزي و العربيزي هي لغة عربية لكنها بحروف انجليزية وتسخدم الارقام من 1-9 للتعبير عن بعض الاحرف باللغة العربية الغير موجودة باللغة الانجليزية كـ حرف الخاء مثلا فبعربيزي نضع الرقم 5 للتعبير عن حرف الخاء ورقم 6 للتعبير عن حرف الطاء .
  • ِAre My Sites Up : موقع جديد بفكرة مفيدة حيث ينبهك الموقع برساله بريدية او رسالة على هاتفك الجوال SMS عند توقف موقعك عن العمل و عند عودة الموقع للعمل من جديد يعلمك بذلك أيضاً … يمكنك بعد التسجيل في الموقع من اضافة 50 موقع في حسابك . ملاحظة : يقوم الموقع بفحص المواقع المضافة في حسابك كل 15 دقيقة .. و مرات الفحص ستحتسب من عدد مرات زيارات موقعك فلا تتقاجأ اذا وجدت أن معدل زيارات موقعك قد أرتفع .. ذكر على الموقع انه سيوفر طريقة للفلترة بحيث لا تحتسب مرات الفحص من الزيارات .
  • Where We Do What We Do : معرض لأماكن إنجاز الأعمال بوجه عام .. ولكن منصات عمل الحاسوب مهيمنه بشكل كبير !
  • PXtoEM :أداة للتحويل بين وحدات حجم الخطوط PX و EM .
  • Quick Ribbon : أداة لصنع اللافتات الجانبية .. و لكنه لايدعم العربية !
  • Test Everything : أداة تمكنك من اختبار موقعك باستخدام 100 أداة مختلفة …
  • Convert PDF to Word : أداة لتحويل ملفات PDF إلى ملفات Word.

[ أفكار ] لوحة مفاتيح باستخدام CSS

css-keyboard

لوحة مفاتيح تم بنائها بالكامل باستخدام CSS فقط دون استخدام اي صور او جداول .. الفكرة  و طريقة التطبيق أعجبتاني كثيراً ..  اطلع على الكود المصدري للصفحة لتفهم الفكرة ..

مجموعة من أيقونات تويتر

twitter_logoتويترtwitter هو مجتمع الكتروني لما يعرف بالتدوين المصغر Micro-blogging و الذي يمكنك من خلاله مشاركة أخبارك وحالتك مع الاصدقاء .. لمزيد من المعلومات عن تويتر .

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

اضغط على الصور لمزيد من المعلومات و للتحميل

twitter_icon
أكمل قراءة التدوينة »

الكود القياسي لاضافة مقاطع YouTube

youtubeكثيرا ما نحتاج لاضافة مقاطع فيديو في مواضيعنا .. ولكن الكود العادي لاضافة مقاطع الفيديو غير مطابق لمعايير xhtml … كالكود الذي يوفره موقع YouTube لاضافة مقطع الفيديو و الذي يكون على الشكل التالي :

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/vedio-url"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/vedio-url" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

الكود السابق غير مطابق لمعايير xhtml و يمكن استخدام الكود التالي بدلا منه حيث انه مطابق لمعايير xhtml :

<object type="application/x-shockwave-flash" style="width:425px; height:344px;" data="http://www.youtube.com/vedio-url"><param name="movie" value="http://www.youtube.com/vedio-url" /></object>

او يمكنك استخدام هذه الأداة و التي تقوم بتحويل الكود الغير قياسي الى الكود القياسي .

أكمل قراءة التدوينة »

اضافات فايرفوكس التي استخدمها

Firebug : اضافة هامة جداُ لأي مصمم مواقع حيث تمكنك الاضافة من الاطلاع على كافة اكواد الصفحة HTML – CSS مع امكانية التعديل عليها و معاينة ناتج التعديل مباشرة . مع الكثير من المميزات للجافاسكريبت .
الموقع الرسمي للاضافة | الاضافة على Firefox Add-ons


Html Validator : اضافة تقوم باختبار هل الصفحة المعروضة مطابقة لمعايير (X)Html ؟ مع عرض كافة الأخطاء الموجوده في الصفحة و تحديد مكانها مع توفير وصف للخطأ بالاضافة الى اقتراحات لتصحيح هذا الخطا .
الموقع الرسمي للاضافة | الاضافة على Firefox Add-ons
أكمل قراءة التدوينة »