الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية

قناص جوبا · 12-23-2009

السلام عليكم
اسف على التاخير فى الموضوع بسبب الجهاز كل شويه نسخه ويندوز
المهم
الدرس ده هيكون الاخير من الدوره ان شاء الله
واى درس انتو تتطلبوه فقط فى قسم الشكاوى وسوف يتم الرد عليه وشرح الدرس ان شاء الله
كثير مننا يسمع المعاير القياسية وهناك ما يعلم ما هى وهناك ايضا لا يعلمها
اولا نبدأ بالموقع اللى بنعمل عليه بحث
فيه موقعيهم لازم يكونو فى المفضله للمصمم وديما يطابق تصميم بالمعاير بتاعتها
الموقع الاول
http://validator.w3.org/
وهو للبحث والمطابقه للمعاير من حيث ال xhtml
والموقع الثانى
http://jigsaw.w3.org/css-validator/
وهو المطابقه لل css
دلوقتى هنعمل اى بحث عن اى استايل من استايلاتى

وليكن الاستايل
http://vbegy.info/vb/?styleid=16

وبعدين هنعمل مطباقه للمعاير
الاول xhtml الثانى css
مش هنلاقى ولا خطأ الحمدلله

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

كود PHP:


			
.f_g_2{
background:url('sweet_style/images/style_f_06.gif') repeat-y left;
height:100%;
}
.f_g_3{
background:url('sweet_style/images/style_f_09.gif') repeat-y right;
height:100%;
padding-left:36px;padding-right:37px;
}

ده الشكل اللى احنا كنا بنشرح بيه
الاختلاف هيكون بشكل بسيط جدا ان شاء الله

كود PHP:


			
.f_g_2{
background-image: url("sweet_style/images/style_f_06.gif");
background-repeat: repeat-y;
background-position: left;
padding-left:36px;
}
.f_g_3{
background-image: url("sweet_style/images/style_f_09.gif");
background-repeat: repeat-y;
background-position: right;
padding-right:37px;
}

طبعا ركز فى المكتوب ومش هتلاقى اى صعوبه فى التعديل على تصميمك السابق

دلوقتى بعد لما تعمل مطابقه للمعاير القياسية هنلاقى عندنا اخطاء
عدده اسباب
ممكن تكون عامل حاجه غلط مش مظبوطه فى الشرح
ممكن يكون من هاك
علشان ننتاكد اذا كانت من الهاكات ولا لا نعطل الهاكات ونشوف لو فيه مشكله لسه يبقى مش من الهاكات
لو مفيش مشكله يبقى المشلكه من الهاكات نعطل هاك هاك ونعمل بحث حتى نصل الى الهاك ونستبدله بهاك نظيف من الشركه الام (طبعا مش شرط كل هاكات الشركه الام مطابقه للمعاير القياسية )
ممكن يكون السبب من بعض الجماليات اللى احنا بنعملها فى المنتدى
مثل تلوين وصف القسم
مثل وضع الملاحظات وكله بيعملها بالفرونت بيج
وقيس على كده الكثير من الحاجات اللى احنا بنعملها فى المنتدى
طيب الحل ايه كده احنا مش هنعمل الجماليات دى
لا طبعا فيه حل وكمان هنعملها بال css
طيب الاول نيجى للوصف
هنعدل مع بعض على وصف قسم اخبار فى بى ايجى
الوصف فى المنتدى هنا عادى جدا
هنا اخر الاخبار من منتديات فى بى ايجى التطويرية
بدول اى الوان او غيره
احنا مثلا عاوزين نعمله احمر
هنخش فى الوصف ونكتب الوصف على الشكل

كود PHP:


			
<p class="Ahmed">هنا اخر الاخبار من منتديات فى بى ايجى التطويرية</p>

وبعدين نروح فى اعدادات ال css الرئيسية وننزل تحط خالص فى تعاريف CSS الإضافية/Additional CSS Definitions
ونحط

كود PHP:


			
.Ahmed {
    color: #F00;
}

وهكذا اى حاجه عاوزين نضيفيها يعنى عاوزين نعمل النص سميك

كود PHP:


			
.Ahmed {
    color: #F00;
    font-weight: bold;
}

وهكذا
طيب دلوقتى عاوزين نحط نص وعليه رابط فى الملاحظات برضه بال css

كود PHP:


			
<p class="yhoooo
"><strong><a href="http://vbegy.info/vb/f45.html"> تابعو 
معنا دوره تصميم الاستايلات بتقنيه (css) </a></strong></p>

وفى ال css الرئيسية

كود PHP:


			
.yhoooo
 {
    text-align: center;
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
}

وكله بنفس النظام كده
طيب عاوزين نحط صوره فى الملاحظات ونوسطها

كود PHP:


			
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif);
background-repeat:no-repeat;
height:60px;
width:468px;
margin:0px auto;"></div>

طيب احنا هنا اختصرنا بدل ما نحط اعدادت الديف فى اعدادات ال css
عملنها مع الديف نفسه

طيب عاوزين نحط على الصور رابط

كود PHP:


			
<div style="background-image:url(http://vbegy.info/vb/Ahmed_vbegy/Banner3.gif); background-repeat:no-repeat; height:60px; width:468px; margin:0px auto; position:relative;"><a class="Ahmed" href="http://vbegy.info/vb" title="فى بى ايجى"></a></div>

بس هنا هنحط فى ال css الرئيسيى

كود PHP:


			
a.Ahmed{
    height:60px;
    width:468px;
    position:absolute;
    border:none;
}

ودلوقتى نهايه الدرس والدوره
اتمنى تكون دوره كانت خفيفه على الجميع والكل استفاد بيها ان شاء الله

-------------------------------------------
(تعديل)
كنت طرحت فى الدرس السادس من الدوره كفيه تركيب فلاش بتقنيه ال css
والطريقه كانت تمام على كل المتصفحات ماعدا الاكسبلور للاسف
هنا تعديل لجعها تتوافق مع الكل
كنا وصلنا ان شكل الكلاس النهائى

كود PHP:


			
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
</object>
</div>

وشكل الاكواد النهائى

كود PHP:


			
.h1{
    background-image:url('3eed_Alkber/images/3eed1_02.gif');
    height:225px;
    background-repeat:repeat-x;
}
.h2 {
    background-image: url('3eed_Alkber/images/3eed1_03.gif');
    height: 225px;
    width: 263px;
    background-repeat: no-repeat;
    float: right;
}
.h3 {
    background-image: url('3eed_Alkber/images/3eed1_01.gif');
    height: 225px;
    width: 313px;
    background-repeat: no-repeat;
    float:left;
}

التعديل هنا هيكون على جزء الكلاس
هنزود الجزء ده

كود PHP:


			
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />

بحيث يصبح الشكل دلوقتى للكلاس

كود PHP:


			
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>

وبعدين هنضيف الجزء ده علشان يسرع الجوده للفلاش وسرعه التحميل

كود PHP:


			
 type="application/x-shockwave-flash"

بحيث كده انتهينا ويصبح الشكل النهائى

كود PHP:


			
<div class="h1">
<object class="h2" data="3eed_Alkber/images/Movie1.swf" style="width: 263px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie1.swf" />
<param name="quality" value="High" />
</object>
<object class="h3" data="3eed_Alkber/images/Movie14.swf" style="width: 313px; height: 198px;" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="movie" value="3eed_Alkber/images/Movie14.swf" />
<param name="quality" value="High" />
</object>
</div>

ودلوقتى المثال للتاكد من الشرح على الاستايل العيد من هنا
http://vbegy.info/vb/?styleid=14

منتديات فى بى ايجى
http://vbegy.info/vb
الموضوع الاصلى

هبهوبة · 12-23-2009

بصراحة شرح رااااائع ونصائح من اروع ما يكون

بارك الله فيك و 1000 شكر على المجهود

قناص جوبا · 12-24-2009

المشاركة الأصلية كتبت بواسطة هبهوبة

بصراحة شرح رااااائع ونصائح من اروع ما يكون

بارك الله فيك و 1000 شكر على المجهود

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

p.t.2 · 12-24-2009

بصراحة ابداع منقطع النظير

قناص جوبا · 12-25-2009

المشاركة الأصلية كتبت بواسطة p.t.2

بصراحة ابداع منقطع النظير

الله يخليك يا غالى
منور الموضوع والمنتدى كله

قناص جوبا · 12-25-2009

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

ساره روز · 12-25-2009

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

قناص جوبا · 12-26-2009

المشاركة الأصلية كتبت بواسطة ساره روز

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

العفو منوره المنتدى ديما ،،

Albasher · 01-03-2010

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

القالب الأول

وبعدين نخش على قالب
forumhome_forumbit_level1_nopost
وبعدين فى اول القالب هنلاقى

كود PHP:

<br />

نضع تحتها الايطار العلوى
وبعدين فى اخر القالب هنلاقى

كود PHP:

نضع فوقها الايطار السفلى

وجدت اختلاف كامل في هذا الكود ولم اجد هذه الأكواد <br /> ولا

وكذالك لم أجد هذه الاكواد في نسخه المنتدي التي قمت بتثبيتها علي السيرفر المحلي

القالب
الثانى
postbit_legacy

نبحث عن

كود PHP:

$template_hook[postbit_start]

هنلاقى منها اتنين فى القالب واحده فى الاول وواحده فى المنتصف تقريبا الاتنين يطبق عليهم نفس النظام
ونضع تحتهم الايطار العلوى

وبعدين نبحث عن

كود PHP:

$template_hook[postbit_end]

برضه هنلاقى منهم اتنين واحده فى النص وواحده قبل الاخير تقريبا يطبق عليهم التالى
نضع فوقهم الايطار السفلى

لم أجد هذا الكود في القالب الثاني إلا مرة واحده في القالب ولم يكن مكررا مرتين كما ذكرت

في قوالب المنتدي ومرفق مع المداخله صورة من كود هذا القالب عندي في المنتدي حيث انني قومت بتثبيت نسخه المنتدي علي سيرفر محلي علي الجهاز وهذا هو إسم النسخه التي قمت بتثبيتها علي الجهاز vBulletin.v3.8.4.Patch.Level.2
مع العلم بأنني حاولت تطبيق الدرس علي أكثر من نسخه ولكنها لم تنجح معي كنت بسبب اختلاف الاكواد في القوالب ولكن الهيدر والفوتر للمنتدي كان في كل مرة يتم تركيبه وظهوره بدون اي مشاكل المشكلة فقد كانت في تأطير القوالب
بسبب أختلاف أكواد البعض منها مثل كود القالب forumhome_forumbit_level1_nopost
وقتها كنت مثبت السيرفر المحلي WampServer2.0a إلا أنني بعد هذا كله قومت الان بتثبيت برنامج السيرفر المحلي appserv-win32-2.5.10_2 والحمد لله يعمل المنتدي علي السيرفر المحلي بدون أي مشاكل
المهم قمت بمحاولات كثيره إلا أن توصلت إلي عمل متواضع بناء علي ما استوعبته وفهمته من الدروس في إتمام الاستايل من ناحيه التصميم وتركيب اكواد لغة ال css وكذالك تثبيت نسخه المنتدي علي سيرفر محلي إلخ...
رجائي وطلبي المتواضع ان تراجع علي التصميم وتراه وأن تعطيني تقديرك في هذا التصميم من كل النواحي
خصوصا ما لم اتقنه جيدا وهو تركيب الفريمات علي أجزاء المنتدي من الداخل أو بعض أجزاءه
ولكم جزيل الشكر
تحميل الاستايل من هنا

قناص جوبا · 01-03-2010

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

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

LinkBacks (?) LinkBack to this Thread: http://vbegy.info/vb/t823.html
أرسلت بواسطة	For	Type	التاريخ
ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ…ظ† ظ†طµط§ط¦ط ظ„ط¬ط¹ظ„ ظ…ظˆظ‚ط¹ظƒ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط§ظ„ظ…ط¹ط§ظٹط± ط§ظ„ظ‚ظٹط§ط³ظٹط© - طھظ‚ظ†ظٹظˆظ†	This thread	Refback	06-28-2010 03:43 AM
الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية - مرسى الفي بي	This thread	Refback	05-22-2010 06:15 PM
الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية	This thread	Trackback	12-25-2009 03:50 PM
الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية	This thread	Trackback	12-23-2009 06:13 PM
ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ…ظ† ظ†طµط§ط¦ط ظ„ط¬ط¹ظ„ ظ…ظˆظ‚ط¹ظƒ ظ…طھظˆط§ظپظ‚ ظ…ط¹ ط§ظ„ظ…ط¹ط§ظٹط± ط§ظ„ظ‚ظٹط§ط³ظٹط©	This thread	Trackback	12-23-2009 05:58 PM
الدرس الثامن نصائح لجعل موقعك متوافق مع المعاير القياسية	This thread	Trackback	12-23-2009 05:52 PM

فى بى ايجى التطويرية
موقع تكويد	مركز رفع صور وملفات	مدونه فى بى ايجى	منتدى المشاكل	منتدى مجانى
معرض استايلات	دليل مواقع \| اضف موقعك	استضافه مجانيه	اعمال فى بى ايجى	دوره اداره الموقع
دوره تصميم الاستايلات	منتديات القمة إنفو	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى

رسالة مدير الموقع

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