مشكلة عدم القدرة على حفظ القالب

20‏/08‏/2011










السلام عليكم

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

مشاريعهم و أتهموا العرب أن الثعلب بعميل..ماجاء فقط ليفضح المواقع العربية  

و انتقلوا الى متصفح الاكسبلور IE6 فكم كانت الحادثة مضحكة عندما جائتهم  انباء تقول أن 

" مواقعكم لا تخضع للمعايير القياسية "

الشيء المضحك أن الرد كان و ماهي المعايير القياسية ؟

تكمن فكرة وجودها الى وجود تقنيات ويب جديدة و متطورة هذا يعني أن مبرمج الموقع او مصممه

إذا قام بإنشاء موقع  فهو يعلم أنه سيظهر بالشكل المطلوب في كل المتصفحات وحتى في أنظمة التشغيل

المهم درسنا اليوم له علاقة بملفات Css يعني التأكد أن الملفات تتوافق مع هذه المعايير

ندخل في صلب الموضوع..

تخيل أنك صادفت هذا السيناريو مع منصة التدوين بلوجر :

تقوم بلصق رمز أو كود ، أو كتابة كود HTML أثناء تحرير قالب،

ثم تنقر على معاينة أو حفظ التغييرات التي تريدها ،

لكن واجهتك مشكلة،

وتحصل على رسالة باللغة الانكليزية ترجمتها إلى العربية ،


لا يمكن حفظ القالب لأنه لم يتم تشكيله بشكل جيد

يرجى التأكد من إغلاق كافة عناصر XML بشكل صحيح



يكون حل مثل هذه رسالات الخطأ الى معرفة قواعد معينة ،و القراءة الجيدة لرسالة الخطأ

أولا اتجه الى تحرير القالب سوف تجد الكود التالي



<?xml version="1.0" encoding="UTF-8"?>



و هو الخاص بتعريف نسخة xml .. الترميز المستخدم عالميا

بعد الكود السابق سوف تجد مايلي



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



و هو فقط لتحسين المعايير القياسية بشكل أفضل

كما أن الكود السابق لهو دور كبير في تحويل Html الى Xhtml

لأنه في الغالب نجد أن الموقع على منصة بلوجر قد لا يتوافق مع المتصفحات

وإنشاء مدونة تظهر بشكل صحيح في كل المتصفحات الحديثة اليوم

قد تستهلك الكثير من الوقت ..و عليه


في حالة وجود أخطاء في القالب ..دعونا نرى ماهي المشاكل و التي قد تحدث أثناء حفظك للقالب


القاعدة الاولى :


التأكد من غلق كافة الحقول

على سبيل المثال


الكود الغير الصحيح




<a href=http://www.blogger.com>Blogger</a>



الكود الصحيح



<a href="http://www.blogger.com">Blogger</a>



ادا كان الخطا موجود في القالب فسوف تتلقى رسالة مفادها


XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type href




القاعدة الثانية


التأكد من غلق و فتح كافة الأوسام

على سبيل المثال

الكود الغير الصحيح



<a href="http://blogger.com"><span style="color: red;">Blogger</a></span>



الكود الصحيح



<a href="http://blogger.com"><span style="color: red;">Blogger</span></a>



و الرسالة المنبهة للخطأ


XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "span" must be terminated by the matching end-tag




القاعدة التالثة


يجب اغلاق كافة العلامات

و الخطا له علاقة بالرمز / و لفهم اكثر اتركك مع المثال الموافق


الكود الغير الصحيح



<div id=" blogspacetech ">
here your texte<div>


الكود الصحيح


<div id=" blogspacetech ">
here your texte</div>



الرسالة الموافقة للخطأ


XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag div




كما يوجد العديد من الأخطاء و الموافقة مع الرسالة السابقة

ندكر الوسم الخاص بانشاء الفواصل

الكود الغير الصحيح




<br> <br>


الكود الصحيح




<br> </br>



القاعدة الرابعة


الكود الغير صحيح



<input checked>



الكود الصحيح



<input checked="checked" />




القاعدة الخامسة

التأكد لطريقة كتابتك للعلامات

على سبيل المثال

الكود الغير صحيح



<a HREF="http://www.blogger.com">Blogger</a>



الكود الصحيح



<a href="http://www.blogger.com">Blogger</a>



القاعدة السادسة

استخدام الرمز "&"

هذا الخطا له علاقة كبيرة بتسمية الصفحة او عنوان المدونة

فاكثير يفضل وضع مسافة بين الكلمة و الأخرى

أترككم مع المثال للمزيد من الفهم

الكود الغير الصحيح



<title>Blog & Tech</title>


الكود الصحيح


<title>Boys &a m p; Tech </title>

فادا لم تستعمل الرموز السابقة سوف تتلقى رسالة مفادها

XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "key" must end with the ';' delimiter


او

XML error message
Your template could not be parsed as it is not well-formed. Please make
sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in
the entity reference





أخطاء أخرى


الرسالة الأولى


XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "bsection" must be terminated by the matching end-tag bsection




هذه الرسالة تفيدنا أنه علينا أن نرفق أو نضيف النقطتان " :  " الى الوسم


bsection



ليصبح بعد التعديل


b:section



الرسالة الثانية


XML error message
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The end-tag for element type "b:section" must end with a '>' delimiter



تفيد الرسالة الى أن الوسم


b:section



عليه أن يكون محدود بالرمز



>



كانت هذه أهم الأخطاء الشائعة لمنصة التدوين بلوجر عند عدم القدرة على حفظ القالب

كما و اعدكم أني سأقوم باضافة أخطاء و قواعد أخرى في حالة

ما ادا صادفت مشاكل أخرى أثناء حفظ القالب.









قوالب المتاجرة الالكترونية لمدونات بلوجر

15‏/08‏/2011












السلام عليكم


ادا كنتم مهتمين بالتجارة الالكترونية..أو ادا كنتم تريدون نقل عملية البيع والشراء التقليدية

من عالم الواقع إلى العالم الافتراضي فهذه القوالب توفر لكم منبرا مميزا في المتاجرة الالكترونية

عيوب القوالب :

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

أسلوب الوساطة The brokerage model :

أي دور التاجر هنا بالجمع ما بين الراغبين بالبيع

والراغبين بالشراء مقابل الحصول على عمولة عن كل عملية بيع وشراء.

أسلوب بيع الاشتراكات The subscription model :

في هذا الأسلوب يقوم التاجر ببيع الاشتراكات أي أنك لا تستطيع تصفح المحتوى

إلا لقاء اشتراك معين.

ميزة القوالب :

الأسلوب الإعلاني The advertising model :

وهو أسلوب شبيه جدا بما تفعله الشركات لتحقيق الأرباح

الاسلوب الاغرائي :

يمكنك اغراء اي متصفح للمدونة لاعطاءه التفاصيل الكاملة لنوع المنتج

أترككم مع المشاهدة و التحميل



























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



قالب moving boxe بتقنية ال jquery

03‏/07‏/2011










السلام عليكم

اليوم لدينا قالب جد مميز moving boxes Content

تكمن الفكرة في انشاء و برمجة القالب الى اضافة مربعات صغيرة مثناثرة في الجزء العلوي

للقالب مع امكانية تغيير الخلفية و خلق تأثيرات جد مميزة..

تم استخدام مكتبات jQuery عديدة وندكر اهمها :





 يمكنكم زيارة الموقع لشرح أكثر..tympanus


المهم تم تحويل هذا القالب بلغة HTML الى قالب بلوجر بلغة XML

و بالتأكيد..تم تحويله بنجاح و يمكنكم مشاهدة المثال و تحميله..



لقد تم ادخال تعديلات عديدة حتى يتناسب مع مدونات بلوجر

و لا توجد اي اخطاء برمجية

و زيادة على دالك تم اضافة خاصية الاستماع الى الموسيقى بتقنية ال HTML5

و التي تم التكلم عليها من قبل..

العثور على قالب مميز و تحويله الى قالب XML متوافق مع مدونات بلوجر ليس بالأمر السهل..

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

تحياتي للجميع .


تغيير الصورة الأصلية و اخفائها عند نقلها

01‏/07‏/2011



السلام عليكم

لدينا اليوم دالة javascript تمنع استغلال الصور واعادة نشرها..

بحيث يكمن مبدأها بتغيير الصورة الأصلية و اخفائها عند نقلها بوضع صورة شفافة

او يمكن حتى التفنن في الصورة الشفافة ووضع : أن هذه الصورة تم نقلها من مدونة أخرى.

لكن هذا لا يعنا ان الصورة في مدونتك محمية تماما من السرقة لأن هناك عدة طريق لاستيرادها.

لماذا الصور في حاجة إلى الحماية ؟

الحفاظ على صحة المصدر ، من هو مالك و مبدع الصورة

حفظ الصور من معالجة الصور الرقمية في أيدي الجاهلين ،خاصة

إذا كانت الصورة خاصة بك أو صورة عائلية


أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم

ثم تحرير HTML

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

ثالثا : ضع علامة في خانة توسيع القوالب .


نبحث عن الوسم التالي



</head>


و نضع فوقه تماما هذا الكود




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery.fn.protectImage = function(settings) {

settings = jQuery.extend({

image: 'https://lh5.googleusercontent.com/-Z5poq9_C1uc/Tg0I1qJlrKI/AAAAAAAAAb4/yo_fwtdbg_8/blank.gif',

zIndex: 10

}, settings);

return this.each(function() {

var position = $(this).position();

var height = $(this).height();

var width = $(this).width();

$('<img />').attr({

width: width,

height: height,

src: settings.image

}).css({

top: position.top,

left: position.left,

position: 'absolute',

zIndex: settings.zIndex

}).appendTo('body')

});

};

$(window).bind('load', function() {

  $('img.protect').protectImage();

});



</script>





الان في حالة ما ادا كانت الصورة عائلية و تريد نشرها في الرسالة


ماعليك فقط الانتقال الى تحرير ال HTML


ووضعها بهذه الطريقة




<img src="1.jpg" class="protect" height="xx" width="xx">


الان في حالة نسخ أو محاولة احتفاظ بالصورة في جهاز الكمبيوتر ..

لن تنسخ و تحفظ الصورة الأصلية و انما الصورة الشفافة الموجودة في الدالة السابقة


ملاحظة

في حالة ادا كنت قد أضفت مكتبة الجيوكري من قبل.. فلا حاجة لإعادة إضافتها عند إضافة دالة الجافاسكريبت






بعض المراجع المهمة

davidwalsh

wikipedia Hot-linking

wikipedia Inline_linking

كيفية إضافة نمودج إتصال بتقنية PHP

24‏/03‏/2011





* السلام عليكم

كل مدون منا يعرف اهمية التواصل مع قراء موقعه

خاصة عندما لا تريد أن تكشف عن البريد الإلكتروني للأشخاص للاتصال بك.

لدينا اليوم موقعين يوفران لك هذا النمودج و بكل سهولة.

*اولا وقبل كل شيئ لمادا تقنية ال PHP ؟

-هذه التقنية تحول المدونة او الموقع الى موقع تفاعي و ليس ساكن

فالمواقع الساكنة لا تتفاعل مع الزوار و قد تفقدهم احيانا..

نعلم العديد من المواقع لتقديم خدمة الاتصال لكن لها سلبيات

كتحويل الزائر الى موقعها او وضع اعلانات خارجية و غيرها..

المهم موقعين مخاترين و مميزان لاضافة نمودج الاتصال الى BLOGGER


الموقع الاول


زيارة الموقع foxyform


foxyform

هو موقع جد مميز لانشاء form خاص بك

من مميزاته :

اضافته بدون التسجيل في الموقع

يمكنك التحكم في ستايل ال form ليناسب موقعك أو مدونتك

لن تخسر زائرك..لان ارسال الرسالة يتم في نفس الصفحة و بدون تحديثها

سيتم ارسال لك رسالة المرسل مع كل بياناته

حقا فهو موقع يستحق التجربة




الموقع الثاني





زيارة الموقع jotform


jotform

*مزايا استخدام JotForm!

-مجاني تماما ؛

-و المعلومة الموثوقة بها ، مع ما يزيد على 350،000 من المستخدمين ؛

-خيارات عديدة للتخصيص ، بما في ذلك الخلفية ؛

-إمكانية تعديل نموذج تم إنشاؤه في وقت لاحق ؛

-القدرة على تحميل الملفات مثل الصور والنصوص وعروض الشرائح

-سريع وبسيط ؛

-لا توجد إعلانات أو الشعارات ؛

-الحفظ التلقائي ؛


وJotForm هو شكل من أشكال الاتصال المميزة ،

*من بين خيارات :

-الخلفية ؛

-إمكانية ارفاق الملفات بالبريد ؛

-التقييم مع نجوم ؛

-امكانية اضافة مواقع لطرق الدفع

-شكر وتقدير ، وتستخدم لمنع البريد المزعج.


لإنشاء نموذج الاتصال في الموقع ، لا حاجة لإنشاء حساب ،

لكنني أوصي بإنشاء حساب ، كي يكون لك إمكانية 

إجراء تغييرات على النموذج الخاص بك من خلال لوحة التحكم

* إنشاء حساب

إذا كنت لا ترغب في إنشاء حساب تخطي خطوة التسجيل في الموقع ،

ولكن تذكر به أنه لا يمكنك تغيير شكل في وقت لاحق!

والخطوة الأولى هي الآن للوصول إلى موقع http://www.jotform.com.

الآن على الصفحة التالية يجب عليك إدخال المعلومات المطلوبة وانقر فوق إنشاء الحساب.

استعداد حسابك تم إنشاؤه بالفعل ، وأكثر يجب عليك القيام به شيئا آخر قبل أن تبدأ في

كي تشأ نمودجك : تأكيد حسابك! اعتقد أنه شيئ بسيط .. ، وأنا أراهن أنك فعلت هذا ربما ما

لا يقل عن مرة واحدة. الذهاب إلى البريد الوارد البريد الإلكتروني الخاص بك وانقر على الرابط

التي بعث بها موقع لتأكيد حسابك :)

تم تنشأ نمودجك و هدا ليس بالصعب.



ملاحضة :

لا تنسى عند اضافة نمودجك ارسال رسالتك عبر صفحات التحرير

او ارسال رسالتك مع غلق التعليقات





هذا كل شيء


و  الى لقاء قريب.





قوالب Blogger بتقنية css‎+jquery

22‏/03‏/2011
Older Posts Home