تلميحات تطوير الويب 1
أنتهينا وبدأنا
أنهينا بنجاح والحمد لله سلسلة كيف تبني موقعك بنجاح , السلسلة ألقت جمهور كبير ولا زالت تتلقى بعض الإستفسارات وكثير من الزيارات
وسنبدأ بإذن الله بطرح ( Tips ) في عالم التقنية, أي نصائح تطويريه من سابق خبرتي في مجال تطوير الويب وفي كل جديد يتوفر في عالم الإنترنت
فبعد الإنتهاء من الأساسيات تأتينا التفاصيل والإضافات المتنوعة التي تساعد وتزيد بخبرتك في تطوير الويب في حال أردت ان تسلك هذا المنحنى الخطير من حياتك فتطوير الويب عالم شيق سريع التطور ممتع وفيه الكثير من التحديات البرمجية والفكرية,
نباشر بأول Tips وهي عبارة عن خمسة أدوات وطرق فنية …
1/ إضافة الـ FireFox الرهيبة لمطوري الويب FireBug
تتيح لك هذه الإضافة بمشاهدة وتحرير صفحات ومواقع الإنترنت بكل سهولة تؤشر بالماوس ويأتي بك بوسوم الـ XHTML وأكواد الـ CSS
ويمكّنك الإضافة بالمحرر الخاص بها الذي يكون أسفل الموقع مباشره من تحرير القيم لمشاهدة النتيجة مباشرة, وذالك لكي ترى النتيجة بسهوله وسرعه وثم تقوم بتطبيقها :)
أحياناً أرجع للعمليه خمس مرات واحياناً عشر مرات لكي أرى افضل لون او افضل مكان لعنصر معين , لكن بعد هذه الإضافة لا أرجع إلى لمره واحده فقط
ففي هذا المثال أخترنا الجزء الأيمن وقد تم التأشير عليه بالمربع الأزرق
ثم اقوم بالتأشير على الجزء الآخر ليؤشر لي على مكانه ويعطيني مكان الـ XHTML والـ CSS الخاص فيه كذالك
2/ حل مشكلة ترميز العربي عند تركيب مدونة Wordpress
الكثيرين راح يلاحظون أن عند تركيب النسخة الاصلية العربية من Wordpress من هنا http://ar.wordpress.org حتى في آخر نسخة 2.6.3
راح تواجههم مشكلة في الترميز بشكل أساسي , البعض قد ما يلاحظها اول مره لأن المشكله ليست في الصفحة الرئيسية من المدونة بل في صفحات الأرشيف والتصنيفات
وهنا الصورة توضح ذالك
هذه المشكله سببها ترميز القالب أي انها من القالب نفسه فلو تم تغيير القالب قد تنحل المشكله لكن في بعض الحالات تأتيك في قوالب أخرى كذالك فلحل هذه المشكلة اتبع الخطوات التالية :
افتح الملف اللي فيه المشكله وفي حالتنا هذه هو الملف archive.php افتحه بإستخدام اي محرر عن طريق نظام التشغيل وفي حالتنا هذه محرر note الخاص بالويندوز واحفظ الملف باختيار حفظ باسم واختر الترميز UTF-8 وذالك الترميز المعتمد للصفحة وللوردبريس وتطبيقات الويب بشكل عام.
وهذه صورة توضيحية للطريقة :
طبعاً بعد حفظ الملف بالترميز هذا نرجع مرة أخرى ننقل الملف إلى قالب المدونة, لنجد أن العربي أصبح يعمل بالشكل الصحيح كالصورة التالية
3/ المسافة العلوية الغريبة
في كثير من تطبيقات الويب وأنظمة إدارة المحتوى تظهر لك مسافة عجيبه فوق كالتالي :
فعندما تحاول إزالتها في الكود لا تجدها نهائياً لا في داخل ملف الـ XHTML ولا عن طريق الـ CSS
هذه المسافة تنتج أحياناً عند إستخدامك للتعديل على القالب بمحررات مختلفة مثل Microsoft Expression Web او Sharepoint Designer وغيرها
وهو ينتج كود بسيط تعتبر (شفرة أعداد) في داخل الملف ولكنك لا تستطيع رؤيتها
ولرؤية هذه الشفرة يجب عليك إستخدام محررات تعرض لك شفرة الأعداد وتسمى Hex Editors ومن ضمنها محرر XVI32 المجاني
قم بتحميله من هنا ثم افتح البرنامج مباشرة , لا يتطلب منك تحميل بمجرد فك الضغط افتح XVI32.exe
وافتح جميع ملفات القوالب وأحذف منها هذا الكود
وستختفي هذه المسافة المزعجة :)
4/ أغير في خصائص الـ CSS لكن ما يتغير في الموقع؟
هذي المشكله واجهتني سابقاً خاصة في جهاز العمل , وهي بسبب الكاش لديك فالـ CSS يتم تحميله من دون التغييرات الجديدة بل يتم تحميل النسخة القديمة
فالحل لكي يظهر لك آخر تحديث من الـ CSS في كل مرة تعدل على الـ CSS لكي ترى النتيجة هي عند استدعاء ملف الستايل CSS في وسم الـ <head>
إفتراضياً يجب ان تكتب كالتالي ( في مدونة Wordpress )
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
أو في اي مكان آخر
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
لإستدعاء آخر نسخة من الـ CSS في كل مرة تدخل فيها الموقع او المدونة أضف التالي
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>?version=1" type="text/css" media="screen" />
وطبعاً أو
<link rel="stylesheet" href="style.css?version=1" type="text/css" media="screen" />
5/ هل وجدت ستايل بالإنجليزي وتود الحصول عليه ؟
يمكنك تعريب الستايلات الأنجليزية بكل سهولة ويسر بإستخدام الاداة التي تطورها المبدع ( أحمد الهاشمي )
وبكل سهوله أختر الستايل الذي يعجبك ويمكنك إيجاد جميع الستايلات من موقع wordpress.org من هنا
والذي يحتوي حتى الأن على 696 ستايل ومتطابق لآخر نسخه من ووردبريس 2.6
والذي أخترته انا هذا الستايل http://wordpress.org/extend/themes/clockworkmint
قبل التعريب
بعد التعريب ( فقط بإستخدام أداة أحمد الهاشمي ) CSS Mirror
والسلام عليكم ورحمة الله وبركاته :)
