خطأ في المدقق: مفقودبطاقة شعار

تفسير: يجب إغلاق العناصر بترتيب فتح عكسي

حق:
< li >...

حساسية حالة DOCTYPE

مثال:

خطأ في المدقق: DOCTYPE مفقود

تفسير: DOCTYPE حساس لحالة الأحرف

حق:

لم يتم تسجيل إغلاق "/"

مثال:
… Style.css "type =" text / css "media =" screen " >

تفسير: "العناصر الفارغة" مثل IMGأو ر، يجب أن ينتهي بـ "/" بمسافة قبله

حق:
… Style.css "type =" text / css "media =" screen "/>

العلامات مكتوبة بأحرف كبيرة

مثال:

خطأ في المدقق:لا يوجد مثل هذا العنصر ...

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

حق:

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

مثال:

خطأ في المدقق:مفقود ""

تفسير: تتم كتابة قيم السمات مع علامات الاقتباس

حق:

Img يفتقر إلى سمة النص البديل

مثال:

خطأ في المدقق:السمة المطلوبة "alt" غير محددة

تفسير: بطاقة شعار IMGينسب بديليجب أن تكون دائمًا ، يمكن ترك القيمة فارغة إذا تم استخدام الصورة للزينة

حق:

نتيجة لذلك ، ستتمكن من إصلاح أخطاء الموقع وجعل الموقع صالحًا.

أعتقد أن كل من يهتم بتطوير المواقع والترويج لها ، بطريقة أو بأخرى ، التقى بمفهوم مثل صلاحية الكود. تشير هذه العبارة إلى كتابة كود HTML للموقع وفقًا لمعايير معينة تم تطويرها بواسطة World Wide Web Consortium (W3C). يعد الامتثال للقواعد المنصوص عليها في هذا المعيار ضمانًا للتوافق عبر المستعرضات ، أي العرض الصحيح للصفحة التي تم إنشاؤها في جميع المتصفحات ، فضلاً عن عدم وجود أخطاء تؤثر على سرعة التحميل والمعلمات الأخرى.

في الإنترنت الحديث ، بدأت معايير جودة تخطيط الموقع تلعب دورًا مهمًا ، حيث يحتاج مشرف الموقع الآن إلى تحقيق العرض الصحيح للمورد ليس فقط على أجهزة الكمبيوتر الثابتة وأجهزة الكمبيوتر المحمولة ، ولكن أيضًا على العديد من أجهزة محمولةمع مجموعة متنوعة من القرارات.

يمكن اكتشاف مدى نظافة وهيكلة الكود من قبل المطورين من خلال التحقق من الموقع للتأكد من صحته ، والذي يتم تنفيذه من خلال مدقق خاص على المورد الرسمي من W3C. يوجد مدقق HTML على الإنترنت متاح مجانًا على validator.w3.org

يمكن استخدامه للتحقق من صلاحية كود HTML بثلاث طرق:

• التحقق من صحة عن طريق URI - التحقق من صحة عن طريق العنوان
• التحقق من صحة عن طريق رفع الملف - تحليل الملف الذي تم تحميله
• تحقق من خلال الإدخال المباشر - التحقق من صحة جزء معين من التعليمات البرمجية.

يتم اختيار الطريقة المطلوبة عن طريق التبديل إلى علامة التبويب المناسبة:

دعونا نرى ما سيحدث إذا تحققنا من صحة بعض المواقع المعروفة على Runet ، على سبيل المثال ، Habrahabr. الصقها في الحقل لتحليلها واضغط على زر "فحص". بعد بضع ثوانٍ ، سيعطينا مدقق W3C النتيجة التالية:

نتيجة جيدة تمامًا ، لأن فحص معظم الموارد سيعطي عشرات بل مئات الأخطاء.

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

على أي حال ، إذا تم العثور على أخطاء على موقعك ، فلا تنزعج ، لأنه ، أولاً ، هناك عدد قليل جدًا من مواقع الويب التي تتوافق تمامًا مع معيار W3C ، وثانيًا ، يمكن تصحيح جميع الأخطاء التي وجدها مدقق HTML - الرمز .

يتيح لك فحص الموقع للتحقق من صحة كود HTML فهم ما إذا كان يحتاج إلى تصحيحات وتحسين التخطيط ، لأن النظافة والهيكل الكفء للشفرة يعد عنصرًا مهمًا في التحسين الداخلي. يسمح التخطيط الدلالي جيد الصنع لفنان آخر بفهم رمز شخص آخر بسرعة ، بالإضافة إلى زيادة ملاءمة النص وتسريع تحميل الصفحة.

تمت كتابة العديد من المقالات حول جدوى وضرورة البحث عن أخطاء التحقق من الصحة ، وقد قمنا بالفعل بكتابة المزايا الرئيسية التي يمكن الحصول عليها من خلال تكييف كود موقعك وفقًا لمعايير W3C. علاوة على ذلك ، ستكون هذه التدابير مفيدة بنفس القدر في حالة البوابة أو الخدمة الكبيرة ، وفيما يتعلق بمدونة صغيرة أو موقع بطاقة أعمال.

تصديق- هذا فحص لشيء للامتثال للمعايير (المتطلبات). في سياق مشرفي المواقع ، يعني التحقق من صحة موقع الويب التحقق من الكود الخاص به لـ صحةو اخطاء... بمعنى آخر: يجب ألا تكون هناك علامات أو إنشاءات غير مفهومة ، وبالطبع يجب ألا تكون هناك أخطاء في html.

ما يؤثر التحقق من الصحة

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

2. يمكن أن يؤثر التحقق أيضًا على ثقة الموقع بالنسبة لمحركات البحث ، وبالتالي على مكانة الموقع أيضًا. ومع ذلك ، من المستحيل القول أن كود html الصحيح هو عامل ترتيب جاد. يعد التصميم الصحيح أحد العوامل العديدة التي لا يتم أخذها في الاعتبار إلا في اللحظات المثيرة للجدل.

ولكن بالنسبة لمحركات البحث ، فإن كود html هو كل ما يراه روبوت البحث. إذا كانت هناك أخطاء ، فهو ببساطة يسيء تفسير بعض العناصر التي يمكن أن تكون حرجة في بعض الأحيان. على سبيل المثال ، إذا كان الموقع يحتوي على علامات غير صحيحة

..

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

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

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

... بعد التحقق من صحة المراجعة في المتصفحات الشائعة ، قمت بإجراء تغييرات على الموقع.

بعد مرور بعض الوقت ، عندما كنت أقوم بتحليل حركة المرور عبر Yandex Metrica ، لاحظت أن متوسط ​​وقت الزيارة في المتصفح متصفح الانترنتاقل بكثير. بعد أن فتحت الموقع من خلال هذا المتصفح ، فهمت ما هو الأمر. كان الموقع بأكمله منحرفًا ، وكان من المستحيل قراءة المحتوى. وهذا يخلق مشكلتين في وقت واحد. المشكلة الأولى - كنت أفقد كل حركة المرور من IE ، والثانية - كنت أفسد العوامل السلوكية.

كيفية التحقق من صحة كود html في موقع على شبكة الإنترنت

1. مدقق أتش تي أم أل على الإنترنت

على الإنترنت هناك خدمة مجانية http://validator.w3.org/. من خلاله يتم التحقق من صلاحية كود html. دعونا نفكر في عمل هذه الخدمة بمزيد من التفصيل.

لقد غيرت الاتجاهات الحديثة وتطبيقات الويب بشكل كبير قدرات المطورين. ليس هناك شك في أنهم بحاجة إلى نوع من IDE لتشفير الملفات الجديدة وحفظها لوضعها لاحقًا. ماذا لو قمت بفحص مقتطفات التعليمات البرمجية؟ لحسن الحظ ، هناك العديد من الأدوات المختلفة لهذا في عصرنا!

في هذه المقالة ، سنشارك 15 تطبيقًا على الويب لاختبار الكود عبر الإنترنت. يعملون جميعًا بشرط وجود اتصال بالإنترنت ؛ يقدم بعضها خططًا احترافية لحزمة إضافية من العقارات. سيكون معظمها مفيدًا عند محاولة البحث عن جزء من جافا سكريبت أو PHP وتصحيحه.

1. برنامج التشفير

تم إنشاؤه بواسطة Stephen Hazel ، وهو تطبيق ويب فريد يمكنك من خلاله ترميز بناء الجملة عبر الويب بالكامل. إلى جانب تصحيح الأخطاء ، يسمح Codepad لمستخدميه بنسخ / لصق أجزاء مهمة من التعليمات البرمجية ومشاركتها عبر الإنترنت.

تعرض شاشة الإخراج رسائل حول أي أخطاء متعلقة بالرمز الخاص بك. باستخدام الأزرار الموجودة في القائمة اليسرى ، يمكنك تغيير اللغة (C / C ++ ، Perl ، PHP ، Python ، Ruby ، ​​إلخ). Codepad هو أكثر للمطورين البرمجياتالذين يحتاجون إلى العمل معًا وتصحيح أكثر البرامج إشكالية.

2- اكتب الرمز عبر الإنترنت

سيقوم الموقع الرئيسي بإعادة توجيهك إلى محرر Java Script الخاص به. يمكنك الاختيار بين ترميز JS و PHP وعنوان URL الأساسي. التطبيق ليس آمنًا وموثوقًا به فحسب ، بل إنه سهل الاستخدام أيضًا.

ومن المثير للاهتمام ، سترى نتائج عملك أسفل حقل النص مباشرةً. لذلك إذا قمت بالنقر فوق "تشغيل التعليمات البرمجية" ، فسيتم عرض النتيجة على الشاشة. تصحيح الأخطاء كبيرة نصوص PHPيمكن أن يكون أكثر صعوبة لأنه يتطلب تضمين ملفات أخرى.

ومع ذلك ، سيوفر لك التطبيق مساعدة لا غنى عنها في اختبار فكرة جديدة من أجل القوة.

3-تينكربين

يمكنني أن أسميها موردي المفضل على الإنترنت لتحرير الرموز. وهو يدعم HTML5 / CSS3 / JS ويخرج النتيجة مباشرة على الشاشة. لا يزال التطبيق قيد التطوير ، ولكن معظم الأدوات تعمل بشكل جيد وتجد بسرعة أخطاء في البرامج.

يدعم محرك العرض لغات مثل Coffeescript و Sass داخل CSS. يتباهون بنظام إدارة متقدم ودعم للعديد من العلامات التجارية لتصميم الويب التي تفضل استخدامها في عملك المستقبلي.

لا يمكن للمرء أن يتجاهل حقيقة وجود مفاتيح اختصار للخيارات الأكثر شيوعًا. وهذه الوظيفة غير موجودة في جميع تطبيقات الويب ، ناهيك عن محررات الأكواد المضمنة في المتصفح. عند إدخال علامات جديدة ، يضيف IDE سطورًا جديدة تلقائيًا. Tinkerbin هي أداة الواجهة التي يجب أن تكون بالتأكيد من بين أدوات تطوير الويب الخاصة بك.

4.JS بن

بالنسبة للمبتدئين ، يمكن أن يسبب العمل مع الواجهة بعض الصعوبات. لتجنب هذا ، يمكنهم الاستفادة من. يقدم JS Bin مجموعة متنوعة من المكتبات للاختيار من بينها - jQuery و jQuery UI و jQM Prototype و MooTools والمزيد.

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

5.JsFiddle

يجب على أي شخص قام بزيارة موقع Stack Overflow أن يعرفه. تختلف واجهتهم عن JSBin من حيث أنها توفر المزيد من الخيارات.

يدعم أيضًا مكتبات مثل Prototype و jQuery. علاوة على ذلك ، يمكنك تضمين مصادر خارجية إضافية لملفات JS / CSS في أي مستند قيد الاختبار. بشكل لا يصدق ، يدعم التطبيق XHP Ajax ، حيث يمكنك تمرير المعلومات من الخادم إلى نافذة متصفح العميل والعكس صحيح.

6.CSSDesk

الانتقال من البرامج النصية إلى لغة النمط و. كل شيء يبدو مشابهًا للأدوات السابقة: النص المصدر على اليسار ، صفحة الويب الأخيرة على اليمين. يعد تطبيق الويب هذا مثاليًا لإنشاء قوالب صفحات الويب واختبار خصائص CSS3.

7.Jsdo

بعض التطبيقات باللغة اليابانية ، مما يجعلني أعتقد أنها تم إنشاؤها في مكان ما في آسيا. أكثر ما يعجبني في واجهتهم هو تحميل الملفات التي تم إنشاؤها حديثًا وتخزينها في المشروع. يمكنك بسهولة تخزين التخطيطات الكاملة لصفحات الويب عبر الإنترنت والوصول إليها وتحريرها من أي جهاز كمبيوتر.

8.Google Code Playground

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

ما أعنيه بواسطة API هو أنه يمكنك الحصول على البيانات من أكبر منتجات Google: منشورات من Blogger ، ومعالم من خرائط Google ، وحتى مقاطع فيديو مباشرة من YouTube. عند النقر فوق خيارات مختلفة ، البيانات الموجودة في النافذة معاينةيتم أيضًا تحديثها.

أنصحك بالاحتفاظ بهذه الأداة كمورد فقط ، لأنها بعيدة عن أن تكون مناسبة لكل ما تكتبه. ومع ذلك ، تعد Google شركة كبيرة بها العديد من واجهات برمجة التطبيقات لبيانات التعليمات البرمجية المصدر. إذا احتجت يومًا إلى مواد من YouTube أو محرك بحث جوجل، ستكون هذه الأداة مفيدة لك بالتأكيد.

9.IDEOne

- أداة أخرى للبرمجة "العميقة" وتطوير البرمجيات. يدعم محررهم عبر الإنترنت تمييز بناء الجملة لعدد من اللغات المهمة ، بما في ذلك Objective-C و Java و C # و VB.NET و SQL والمزيد. دكتور.

10.Viper7 Codepad

يوجد تطبيق الويب هذا ، المعروف أيضًا باسم ، على موقع تمت إعادة توجيهه إلى نفس المحرر عبر الإنترنت. تم تعيين أدواتهم لتصحيح الإخراج متغير PHPوالتي يمكن أن تختلف حسب اختيارك بين PHP5 و PHP4.

من خلال إنشاء حساب ، يمكن استخدام Codepad كنظام تخزين شخصي. هنا ، كما هو الحال في المحررين الآخرين عبر الإنترنت ، يمكنك الاتصال بكل منهم مشروع PHPوتخزينه على الإنترنت مجانًا. يختلف محرر الكود هذا من حيث أن المستخدمين لا يحتاجون إلى تثبيت أي برنامج على أجهزة الكمبيوتر الخاصة بهم. أثناء تفسير كل نص برمجي ، سيقدم المحرر تفاصيل وصفية إضافية مثل استدعاء المتصفح أو رؤوس الاستجابة.

11.JSLint

إنه أمر غريب بعض الشيء في حد ذاته ، بينما يعمل محرر الكود وفقًا لمخطط قياسي تمامًا.

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

12.SQL كمان

في وقت سابق نظرنا في تطبيق ويب يسمى jsFiddle. حان الوقت الآن للحديث عنه ، والذي يعمل في نفس السياق ، ما عدا قواعد بيانات SQLبيانات بناء الجملة. تمكنت من العثور على بديل لائق لاختبار كود قاعدة البيانات.

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

إذا لم تكن معتادًا على قواعد البيانات أو لغة SQLفمن غير المحتمل أن يكون هذا التطبيق مفيدًا لك. ولكن بالنسبة للمطورين المهتمين بالتعرف على SQL ، فإن هذه الأداة مثالية!

13.Cloud9 IDE

في رأيي ، إنه أفضل محرر مصدر متاح على الشبكة. إنه ليس مجرد محرر ، ولكنه نظام كامل من الأدوات والموارد ؛ على خوادمهم يمكنك تخزين جميع مستودعات كود المصدر الخاصة بك.

التسجيل مجاني لجميع المشاريع المجتمعية. إذا كنت بحاجة إلى مساحة شخصية قبل التطوير ، فستتكلف 15 دولارًا شهريًا أو 180 دولارًا سنويًا. يمكنك مشاركة مستودعات الأكواد الخاصة مع أي مستخدم من اختيارك. يسمح هذا الخيار للمطورين بالتنفيذ عمل مشتركعلى مشاريع مختلفة.

يتم تخزين كل مشروع جديد في مجلد فرعي حيث يمكنك إنشاء ملفات فعلية حقيقية. HTMl و CSS و JS و PHP وكل ما تحتاجه للترميز سيكون في حسابك. بمرور الوقت ، ستتمكن من إرسال هذه الملفات كمشروع كامل أو تنزيلها على جهاز الكمبيوتر الخاص بك.

نطاق الاحتمالات التي توفرها Cloud9 واسع جدًا. أوصي بـ 10-15 دقيقة للبحث في حساب مجاني ، وستقع على الفور في حب عمل واجهة المستخدم. تواصل الشركة اكتساب قوة جذب ، لذلك أتطلع إلى إضافة خيارات جديدة مفيدة خلال السنوات القليلة المقبلة.

14.CodeRun

هو محرر على الإنترنت لأي تطبيق ويب ديناميكي. محرر النصتشبه إلى حد بعيد Microsoft Visual Studio ؛ يمكنك حتى كتابة التعليمات البرمجية في C # لـ ASP.NET. تتضمن مكتباتهم موارد تابعة لجهات خارجية مثل Facebook Connect و Silverlight.

إلى جانب تطبيقات الويب القائمة على Microsoft ، يمكنك كتابة التعليمات البرمجية مباشرة في جافا سكريبت أو PHP. لا تختلف طريقة عمل CodeRun كثيرًا عن Visual Studio: إنشاء مشروع موقع ويب جديد والعمل على ملفات فردية. في الجزء السفلي من الشاشة توجد أدوات التصحيح والنتائج من نافذة وحدة التحكم.

لا غنى عنه إذا كان لديك خبرة مع Visual Studio. الواجهة متشابهة إلى حد كبير ويمكنك حتى تنزيل / تحميل ملفات المشروع على جهاز الكمبيوتر الخاص بك. هذه أداة أخرى يمكن لمطوري الويب المخضرمين تدوينها.

15. Compilr

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

نظرًا لأن تخطيط الصفحة يشبه تطبيق سطح المكتب العادي ، فمن السهل التعامل معه حتى للمبتدئين. تدعم الأدوات تقنيات البرمجة مثل C ++ و C # و Visual Basic. بشكل عام ، يجب أن يكون Compilr تطبيقًا احتياطيًا لاختبار التعليمات البرمجية المصدر وتصحيحها.

أخيرا

يتزايد عدد أجهزة الكمبيوتر المتصلة ببعضها البعض ، لذلك يصبح من السهل على المطورين العمل معًا في المتصفح. تظهر التقنيات الجديدة كجزء من التطبيقات المحلية ، ومن يدري إلى أي مدى سيصل ذلك.

آمل أن تكون هذه المجموعة من أدوات اختبار الكود قد جعلتك تفكر في مساحة التطوير الحديثة. في الوقت الحاضر ، لا يكلف شيء في غضون دقائق لتجميع مشروع ويب HTML / CSS والحصول على فيديو تجريبي قصير. يرجى ملاحظة أن هذه الأدوات تعمل فقط على مساعدتك في عملية إنشاء المنتج النهائية.