النتائج 1 إلى 6 من 6

العرض المتطور

  1. #1
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator










    اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
    واستايل منتداك متوافق للمواصفات القياسية حسب w3c validitor وهى الأداة التى تقيم أخطاء موقعك
    فى أكواد تصميمه

    الموضوع سهل للغاية , وتقدر بنفسك كصاحب موقع منتدى ان تحل هذه المشكلة بدون الأستعانة باحد

    لتتقن هذا الموضوع لابد ان تكون ملم بشيئين:

    1-اللغة الانجليزية وقدرتك على قراءة الخطأ وتعرف المطلوب منه حتى تصححه برمجيا
    2-خلفية ولو بسيطة عن ال html والcss

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

    تخيل انك ممكن ان تجد كود مثلا لوسم مكرر أكثر من 50 مرة بسبب هذه البرامج, والسبب ان المصمم لا يلتفت لكود التصميم وهذا عيب, فالمصمم لابد ان يكون لدية خلفية برمجية ولو بسيطة, حتى يخرج شغله مظبوط ودقيق ومنظم , يستطيع اى شخص اخر يقدر يعدل عليه فيما بعد

    نبدأ على بركة الله أساس الموضوع:

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

    1-عدم اغلاق الأوسمة : وهذه أكبر مشكلة شائعة والتى تسبب ظهور الاخطاء فى تقييم الw3c لكود تصميم موقعك

    نضرب أمثلة عملية :

    1- عدم اغلاق وسم html كالاتى:



    كود:
    <html>الكود  </html>
    كثير جدا فى كود الهيدر للاستايل مثلا ينسوا فى نهاية الكود اغلاق الوسم </html> وهذه مشكلة

    2- عدم اغلاق وسم الصورة img

    كود:
     	      < img src="رابط الصورة" />
    برامج جاهزة كثيرة تنسى وضع علامة الأغلاق للوسم /


    3- عدم اغلاق الاوسمة الاخرى كtd, tr .....الخ

    كود:
     	<table></table>
    <td> </td>
    <tr> </tr>
    4-استخدام أمر داخل الوسم لا يستخدم أصلا داخل هذا الوسم لانه لا يطابق xhmtl ولكن يطابق html فقط :

    مثال:
    كود:
     	
    
     	<td background="رابط الخلفية"> </td>
    لو تلاحظ الأمر background , سوف تجد ان هذه العبارة خطأ استخدامها فى xhtml ويصح استخدامها فى html, وكلنا نعلم ان الw3c معتمدة الxhtml


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



    ويوجد الكثير من الأخطاء لو جلست للصبح مش هخلصها, وكل السبب فى ذلك , التصميم فقط بدون فكر برمجى سليم



    الحين لانكم تحبون الأمثلة العملية , سوف اضرب لكم مثال عملى من أحد المنتديات وسوف
    نأخذ نشوف الأخطاء اللى فيه ونحاول نصلح بعضها واحدة واحدة


    1- هذا منتدى متواضع لى كنت فاتحة من سنين : الحين افتح الرابط لتشوف الاخطاء اللى فيه

    اضغــــــط هــــنـــــــا


    راح تجد 362 خطأ





    الحين نبدأ نشوف الأخطاء ونصحهها واحدة واحدة وأخلوكم تشوفوا كيف راح تخف الأخطاء بالصور

    1- شوف صورة هذا الخطأ:


    هذه الصورة تم تصغيرها تلقائيا . إضغط هنا لمشاهدة الصورة بحجمها الطبيعى 820x136.

    الخطأ بيقولك انك ياشاطر ما اغلقت وسم img

    أنا قمت بأغلاقة ...........

    نشوف عدد الأخطاء صار كام الحين:




    --------------------------------------------------------------


    2- شوف الخطأ بهذه الصورة:






    الخطأ يقول انك ما اغلقت وسم html

    نشوف بعد ما اغلقنا وسم الhtml





    تابع الردود فانها هامة جدا
    -------------------------------------
    خدمات شركة رايز للهندسة و التكنولوجيا :

    استضافة مواقع و ايميلات - اى تى كمبيوتر و شبكات - ويندوز سيرفر

    كاميرات مراقبة - سنترالات - تقوية اشارة موبايل - بصمة حضور و انصراف

    تسويق الكترونى على الفيس بوك و جوجل - تصوير فوتوغرافى

    * جميع خدماتنا للشركات فقط. *



    شركة رايز للهندسة و التكنولوجيا | Rise Company for Engineering & Technology

    03-3798022 | Phone [9am ~ 5pm] : 0100 000 1637

    Site : www.rise.company



  2. #2
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي رد: شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator

    على الرقم من توفير موقع W3 للمستخدمين ثلاثة وسائل للإختبار المواقع وفق المعايير القياسية للأسف ماذالت الموقع العربية مليئة بالاخطاء ، والمحذن إن هنالك إستايلات مدفوعة مليئة بالاخطاء ومأطرة بالجداول وليس بلغة الـ CSS ، أن المشكلة الكبرى هى عدم تقبلنا للتطور أو ربما وفأنا لبرنامج الفروم بيج والتخلى عن كل ماهو جديدمثل الدريم ويفر واكسبريشن 3 ، وتكاد تخلو المواقع العربية عن دروس الدريم ويفر واكسبريشن 3
    خدمات شركة رايز للهندسة و التكنولوجيا :

    استضافة مواقع و ايميلات - اى تى كمبيوتر و شبكات - ويندوز سيرفر

    كاميرات مراقبة - سنترالات - تقوية اشارة موبايل - بصمة حضور و انصراف

    تسويق الكترونى على الفيس بوك و جوجل - تصوير فوتوغرافى

    * جميع خدماتنا للشركات فقط. *



    شركة رايز للهندسة و التكنولوجيا | Rise Company for Engineering & Technology

    03-3798022 | Phone [9am ~ 5pm] : 0100 000 1637

    Site : www.rise.company



  3. #3
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي رد: شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator


    افضل برنامج فعلا الان
    Microsoft Expression Web 2 انتهى عصر الفرنت بيج Front Page ابداع يامايكروسوفت
    لانه افضل بكثيييييييييييير جدا من الفرونت بيج بالتعامل مع css و php بشكل كامل
    خدمات شركة رايز للهندسة و التكنولوجيا :

    استضافة مواقع و ايميلات - اى تى كمبيوتر و شبكات - ويندوز سيرفر

    كاميرات مراقبة - سنترالات - تقوية اشارة موبايل - بصمة حضور و انصراف

    تسويق الكترونى على الفيس بوك و جوجل - تصوير فوتوغرافى

    * جميع خدماتنا للشركات فقط. *



    شركة رايز للهندسة و التكنولوجيا | Rise Company for Engineering & Technology

    03-3798022 | Phone [9am ~ 5pm] : 0100 000 1637

    Site : www.rise.company



  4. #4
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي رد: شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator

    مقدمة
    السلام عليكم ورحمة الله وبركاته.. تحية طيبة وبعد
    فقد مررت منذ فترة على المنتديات ورأيت بعض الملاحظات المهمة والتي يسأل عنها الكثيرين أو يسعى لها الكثيرين، فأردت التحدث عنها في بعض المقالات
    التي سأدرجها تحت سلسلة [نصيحة لأصحاب المنتديات] .. وأسأل الله أن تكون ذات فائدة وتغيير للناس وتطوير لمنتدياتهم

    مشكلة االسرعة ولأخطاء في الـHTML والمعايير
    رأيت بعض الأخوة يشكون أن منتدياتهم تحوي الكثير من الأخطاء عند عرضها في مدقق الـHTML وأنه بعيد كل البعد عن المعايير القياسية والثبات..
    فحصت منتديات الفي بي الرئيسية.. فرأيتها تتناسب مع المعايير وأن كل شي فيها جيد..
    ورأيت أيضاً أن لغة القوالب في الفي بي هي الـXHTML (لم أرى البرامج الأخرى لأحكم عليها)، إذاً فما سبب هذه الأخطاء؟
    عرفت الجواب مباشرة عند فحص أحد المنتديات العربية .. نه الاختلاف بين XHTML و HTML..
    كيف؟؟

    كل مافي الأمر، أن الفي بي يعتمد لغة الـXHTML في القوالب، فيضع DocType الـXHTML .. وهذا وظيفته أن الزائر عند دخوله للمنتدى سيتم تعريف المتصفح مباشرة
    أن اللغة هي XHTML..
    لكن مصممي الاستايلات لدينا، يستخدمون الفرونت بيج وأمثاله في صنع الاستايلات، فالأكواد الناتجة تكون في العادة HTML ..
    ما معنى هذا؟

    عندما يدخل المتصفح للمنتدى يرى دوك تايب الـXHTML فيعتمد الصفحة على انها XHTML ويسهّل عليه فتح الصفحة، لكنه يفاجأ عند رؤيته لأكواد الـHTML
    (الناتجة من فرونت بيج) بدلاً من XHTML.. وعندها يقوم بالبحث عن أوسمة الإغلاق والأشياء التي يجب وجودها في XHTML ..
    وهذا يؤخر فتح الصفحة قليلاً لدى كل عضو ويؤثر بشكل عام على الجميع
    وعند فحص المنتدى بالمدقق ستجد الأخطاء كثيرة وربما بالمائت.. وستقول أن الموقع لايوافق المعايير القياسية، والصحيح عكس ذلك،
    كل مافي الأمر أن المدقق يرى المنتدى من الدوكتايب أن لغته هي XHTML ثم يرى الأكواد هي أشياء أخرى فيعتبرها كلها أخطاء..
    فالحل إذاً فقط بأن نغير الدوك تايب إلى دوكتايب الـHTML لأن الأكواد التي صنعناها بالفرونت بيج والتصميم هي HTML

    لم تفهم شيئاً؟
    لا بأس.. قم بتطبيق الخطوة التالية ولاتهتم بما سبق


    اجعل أخطاء منتداك قليلة بأسهل الطرق
    الآن.. كيف يمكنك تغيير الدوك تايب لتتجنب كل هذه الأخطاء وتسرّع منتداك قليلاً؟


    (التطبيق للفي بي فقط)
    ابدأ باسم الله:
    1- بعد الدخول للوحة تحكم الإدارة
    (Admincp) اضغط على "التحكم بالاستايلات":

    2- بعد دخول القسم، افتح الاستايل المراد التعديل عليه بالضغط على زر "اذهب" دون تغيير أي شيء:

    3- ستظهر لك الكثير من الخيارات.. انزل قليلاً فقط لترى النموذج التالي:


    سترى الكود التالي في النموذج :


    كود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    قم بحذفه كاملاً.. وضع هذا:
    كود:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    اضغط زر الحفظ
    عد للصفحة من جديد، إن تغير لون الكلام للبرتقالي كما في الصورة التالية فقد تمت العملية بنجاح:





    4- انتهينا.. العملية سهلة جداً ^_^
    تأكد من المدقق، ولاحظ الفرق
    ادخل هنا:
    http://validator.w3.org/
    ضع رابط موقعك في أول خانة واضغط
    "check"
    انظر لعدد الأخطاء..
    قم الآن بتطبيق الشرح الوارد في موضوعنا.. وقم بالتدقيق مرة أخرى ولاحظ الفرق الآن في عدد الأخطاء..

  5. #5
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي رد: شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator



    برنامج الفرونت بيج 2003 يصمم الصفحة بال Html ومنتديات ال vb صفحاتها xhtml ولذلك كل الاخطاء بالمنتديات تظهر بسبب توزيع الستايل بالفرونت بيج

    مختصر كلامي اي وسم فردي مثل <br> لا بد ان يغلق فى ال xhtml فيكتب بهذه الطريقة

    كود:
    <br />

    وتكتب الاكواد بالحروف الصغيرة
    وأى وسم اخر لا بد ان يغلق
    وكتسهيل على نفسك يمكنك اعادة توزيع الستايل باستخدام Microsoft Expression web

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    لأنه افتراضيا يقوم بكتابة الصفحة

    وسوف اقوم بوضع كافة الوسوم الصحيحة وما عليكم الا استبدال الوسوم الخاطئة بالوسوم الجديدة

  6. #6
    Status
    Offline
    الصورة الرمزية Eng Amr Adel
    Director
    تاريخ التسجيل
    Nov 2009
    الدولة
    Egypt
    المشاركات
    2,272
    معدل تقييم المستوى
    10

    افتراضي رد: شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator

    نزل تحت شوية هنلاقي الكلمة دي
    اقتباس:





    Validation Output: 142 Errors


    اللى بعدها هيا الاخطاء بتعتنا
    نشتغل على اول واحد مثلا


    طيب ادي اول واحد مثلا
    شايفين ايه
    كود معين


    الخطأ بتاعنا طبعا هو دا



    الخطأ في العلامة
    <


    طيب نظلل الكود كلو زي المثال اللى في الصورة دي كدا


    وبعد كدا نروح لملف ال Xml بتاع الاستايل اللى احنا نزلناه في الاول ونفتحو
    ببرنامج Notepad

    هنضغط Ctrl +F يظهرلنا مربع
    نلصق فيه الكود اللى احنا نسخنا
    ونضغط
    Find Next


    هيجبلنا الكود باين باللون الازرق

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





    <script language="**********">


    والخطأ في هذه العلامة
    اقتباس:





    >


    نقوم بحذفها
    خدمات شركة رايز للهندسة و التكنولوجيا :

    استضافة مواقع و ايميلات - اى تى كمبيوتر و شبكات - ويندوز سيرفر

    كاميرات مراقبة - سنترالات - تقوية اشارة موبايل - بصمة حضور و انصراف

    تسويق الكترونى على الفيس بوك و جوجل - تصوير فوتوغرافى

    * جميع خدماتنا للشركات فقط. *



    شركة رايز للهندسة و التكنولوجيا | Rise Company for Engineering & Technology

    03-3798022 | Phone [9am ~ 5pm] : 0100 000 1637

    Site : www.rise.company



المواضيع المتشابهه

  1. مشاركات: 3
    آخر مشاركة: 20-03-2011, 14:51
  2. أخطاء شائعة بين الناس
    بواسطة big master في المنتدى رايز للمواضيع العام Rise General
    مشاركات: 0
    آخر مشاركة: 21-02-2010, 17:32
  3. تجنبي أخطاء المكياج في حفلات رأس السنة
    بواسطة Alaa Adel في المنتدى قسم أدم و حواء
    مشاركات: 0
    آخر مشاركة: 22-12-2009, 01:00
  4. أخطاء الماكياج الصغيرة قد تفسد مظهرك
    بواسطة Aya Adel في المنتدى قسم أدم و حواء
    مشاركات: 0
    آخر مشاركة: 08-12-2009, 20:11

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •