Валидиране на уеб страница

В предишните няколко урока говорих за валидирането на нашата уеб страница и ползите от това. Също така в урока “Моята първа уеб страница” видяхме минималното количество код, който е нужен, за да се счита за валидна една xHTML уеб страница.

В този урок ще си изясним няколко понятия като “Какво е валидация?”, “Какво е валидатор?” и “Какви са ползите от валидирането?”. Ще преминем през процеса на валидиране като използваме уеб страницата, която създадохме в предишния урок.

Структура на урока

Въведение

Преди да започна да изброявам предимствана на валидирането искам да обясня нещо много важно.

Валидацията е един от критериите за качествена уеб страница, но има още много други. С други думи, валидна страница не означава задължително успешна уеб страница. Но от друга страна, валидна уеб страница означава, че създателя ѝ следва и прилага успешно установените стандарти.

Понякога страниците, които създаваш няма да бъдат сто процента валидни, но това не трябва да понижава по никакъв начин ентусиазма ти да твориш. Голяма част от световно популярните уеб сайтове имат грешки в своя код, но това не е пречка на милиони потребители да ги използват ежедневно.

Предимства на валидирането

Лесен за поддръжка код

Създаване на уеб страница следвайки приетите xHTML стандарти значително намалява времето прекарано в търсене и отстраняване на малки (или големи) грешки в по-късен етап от развитието на сайта.

Представи си, че започваш работа като уеб разработчик и задачата ти е да добавиш няколко параграфа текст на фирмения сайт. Ако човека отговорен за това преди теб, не си е свършил добре работата и е оставил код, който е зле написан, неподреден и пълен с грешки, те очаква една привидно лесна задача да се окаже пълен кошмар.

Затова следването и прилагането на стандартите за добре написан код, придружено с честа валидация, е от съществено значение още от самото начало на работа.

Добра съвместимост с бъдещи технологии (нови стандарти/браузъри/програми)

Никога не знаем какво ни очаква в бъдеще, но вероятността страницата, която сме създали, да работи и изглежда по планирания начин е значително по-голяма.

В днешно време наблюдаваме как технологиите се развиват ежедневно. Браузърите влязаха в процес на постоянно обновяване, а почти всеки ден ново устройство излиза на пазара.

С такова темпо на развитие трябва да бъдем максимално концентрирани при създаването на нашите уеб страници, за да сме сигурни, че изглеждат еднакво навсякъде.

Валидирането на нашата страница е един от начините да намалим риска от неочаквани резултати.

По-бързо и лесно усвояване на добри практики

Професионалистите в сферата на уеб разработването използват xHTML от години и без много усилия могат да рапознаят всеки един елемент в дадена уеб страница. За начинаещите обаче това не е така.

Хората, които тепърва навлизат в тази област по-често допускат грешки и прекарват повече време в учене на елементите и тяхното място в страницата. Валидирането е прекрасен начин за откриване на тези грешки и бързото им и коректно отстраняване.

Признак на професионализъм

В днешно време много малко уеб разработчици придобиват знанията си в университет или колеж. Повечето разчитат на собствените си умения и онлайн уроци в сайтове като YouDevelop (и много други), за да придобият нужното знание и квалификация.

Създаването на уеб сайт, който е креативен и в същото време следва установените стандарти, е признак на качествена и отговорна работа.

Това е причината много от уеб разработчиците да слагат в резюметата си неща като “Писане на валиден xHTML код” или “Валидни xHTML страници”, за да изтъкнат качеството на своята работа.

Служи като инструмент за откриване на грешки

Понякога отнема само няколко минути докато забележим грешката в нашия код. Друг път обаче може да отнеме часове. В такива критически моменти една бърза проверка на кода чрез онлайн валидатора може да бъде наистина безценна.

Достъпност от голям кръг от потребители

Валидния уеб сайт е по-вероятно да бъде по-достъпен от голям кръг от потребители, които използват различните браузъри, мобили устройства или екранни четци (за хора със зрителни увреждания).

Страницата зарежда по-бързо

Ако кода на страницата е валиден, браузъра използва по-малко ресурси за правилното му интерпретиране, което води до по-бързо зареждане на страницата.

Когато кода, който сме написали съдържа грешки (например липсващ затварящ таг или неправилно вместени елементи) оставяме всичко в ръцете на браузъра и неговите умения за правилна интерпретация. Всеки браузър от своя страна зарежда кода на страницата по различен начин. Ако забравим да затворим някой елемент, Firefox може ни “прости”, но Safari няма и вероятността страницата да изглежда различно е по-голяма.

Чувство на удовлетвореност

Наистина е приятно, когато знаеш, че страницата ти е валидна.

Както казах по-рано, валидирането е един от многото признаци за качествена уеб страница. Но това не значи само качество на кода, но и качество на работата, която си свършил/a. Освен това, когато валидацията е успешна, получаваш като награда една иконка, която гордо можеш да сложиш на сайта си, за да може всички посетители да я видят.

А кой не обича наградите?

Надявам се, че всичко казано до тук е ясно и, че точките изброени по-горе ти дават сила и увереност да се стремиш към писането на чист и валиден xHTML код. Ако имаш въпроси и съмнения или искаш да допълниш нещо, можеш да го направиш като споделиш своя коментар след урока.

Основни понятия

В следващите няколко подточки ще се опитам да обясня накратко основните понятия свързани с валидирането.

W3C

Може би се питаш коя е организацията, която е отговорна за създаването на тези стандарти, за които толкова много говоря. Това е наистина добър въпрос.

Организацията се нарича World Wide Web Consortium (съкратено W3C). W3C е основната организация по стандартизация, установяваща международни стандарти за технологии като HTML, xHTML, CSS и много други.

Официално, спецификацията на xHTML се поддържа от W3C.

Какво е валидатор?

Валидатора е онлайн инструмент (програма), който ни служи за да проверим дали кода на нашата страница е написан според установените стандарти.

Валидатора, който ще използваме е инструмент създаден от W3C в помощ на всички уеб разработчици. Той е напълно безплатен и може да бъде използван по всяко време.

Адреса на валидатора.

Какво е валидация?

Това е процес, през който преминаваме, за да проверим дали страницата е написана според установените стандарти за езика, който използваме (точно както в час по български ни проверяваха дали изреченията са ни вярни).

Когато кода на нашата страница “премине” успешно валидацията казваме, че той е валиден. И обратно, когато кода не премине валидацията успешно казваме, че той не е написан според стандартите.

Всичко това ще го приложим на практика само след малко.

Нужно ли е това?

Мненията по този въпрос са разделени. Някои твърдят, че няма огромно значение дали страицата е валидна или не стига да работи по очаквания начин. Други пък поставят валидаринето на много престижно място и отделят част от времето отстранявайки всички грешки, докато накрая видят зеления правоъгълник (повече за него само след малко), който им доставя удовлетворението на добре свършената работа.

За мен истината е някъде по средата. Стриктно спазвам стандартите и правилата за писане на подреден и съдържателен код. Валидирам страниците и се стремя да изчистя максимало количество грешки, но понякога всичко зависи от вида грешка и времето нужно на нейното отстраняване.

Съвета, който бих ти дал на този етап е: “Спазвай правилата за писане на валиден код и това наистина ще ти се отблагодари”.

Все пак ти сега започваш със създаването на уеб страници и като всеки добър ученик искаш всичко да върви гладко и без проблеми. Точно затова ти препоръчвам да използваш валидатора винаги, когато мислиш, че има нещо нередно. А дори всичко да е наред, пак го използвай, за да потвърди знанията, които си придобил/а.

Как да валидираме нашата страница?

Има три начина, които ще използваме, за да валидираме нашата страница. Те са:

  • Валидиране чрез URI;
  • Валидиране чрез качване на файл;
  • Валидиране чрез директно въвеждане;

Валидиране чрез URI

За пример тук ще използвам адреса на YouDevelop.

Стъпка 1

Отвори страницата на онлайн валидатора. Когато зареди в горния ляв ъгъл ще забележиш, че опцията Validate by URI е автоматично избрана. Тази опция ни позволява да проверим всяка страница, която е достъпна онлайн.

Опцията Validate by URI е избрана по подразбиране.

Стъпка 2

В полето Address (1) въведи адреса на страницата, която искаш да провериш. След това натисни бутона Check (2).

Въвеждане и проверка на онлайн страница

Стъпка 3

В зависимост от това адреса на коя страница въведе в предишната стъпка поще получиш различно съобщение. Резултата, който виждаме тук и червения правоъгълник най-отгоре ни подсказват, че страницата www.youdevelop.net има няколко грешки.

Резултат от проверката чрез URI

Информацията, която можем да извлечем от тук е:

  • В полето Result (1) виждаме броя на грешките. В случая те са 11;
  • В полето Doctype (2) виждаме Doctype декларацията на тази страница. Това вече трябва да ти е познато. В случая Doctype е xHTML 1.0 Transitional;
  • В полето Root Namespace: (3) виждаме стойността на атрибута xmlns, който е част от отварящия html таг. Това също трябва да ти е познато.
Стъпка 4

Малко по-надолу в същата страница можеш да видиш списъка с грешки.

Това, което прави валидатора наистина безценен е, че ни казва точното място на грешката (1), какъв тип е тя (2) и кратко описание (3), което ни помага да разберем по-добре защо според тях това е грешка.

Валидатора ни дава информация за типа, вида и описание на откритата грешка

Стъпка 5

Надявам се виждаш колко лесно и приятно е, но същевременно колко полезно. Повтори процеса до сега още няколко пъти за да се упражниш. Пробвай различни адреси. Виж дали страницата, която посещаваш често е валидна или не. След като свикнеш с този метод можем да преминем към следващия.

Валидиране чрез качване на файл

Тази опция ни позволява да качим собствен html файл от компютъра. В този пример ще използвам страницата, която създадохме в предишния урок.

Стъпка 1

Влез отново в началната страница на валидатора, обаче този път избери Validate by File Upload (1).

Избор на метода Validate by File Upload

Стъпка 2

В полето File натисни бутона Browse (1).

Натисни бутона Browse, за да избереш файл от твоя компютър

Стъпка 3

В новия прозорец, който ще се отвори трябва да намериш файла, който искаш да валидираш. Избери го (1) като кликнеш върху него веднъж, след което натисни бутона Open (2).

Намери и избери файла, който искаш да валидираш

Стъпка 4

След като го избереш, прозореца ще се затвори и ще се върнеш към основната страница. В полето File ще видиш пътя до файла (1), който току що избра. Сега просто натисни бутона Check (2).

След като избереш файла, който ще валидираш, натисни бутона Check

Стъпка 5

Резултата, който получаваме е наистина впечатляващ. Валидна xHTML страница!

Резултат от валидацията

Има няколко неща, на които трябва да обърнем внимание:

  • Въпреки, че страницата ни е валидна, в полето Result (1), валидатора ни дава едно предупреждение, на което трябва да обърнем внимание;
  • Doctype декларацията (2) е точно тази, която избрахме;
  • Стойността на xmlns елемента (3) в отварящия html таг също е тази, която въведохме.
Стъпка 6

Нека видим какво е предупреждението, за което валидатора ни известява.

Предупреждение, което валидатора ни показва след проверката

Byte-Order Mark (BOM) представлява три определени символа, който по-новите програми игнорират, но по-старите не. BOM може да се използва в UTF-8 кодирани (енкодинг (encoding)) документи, за да указва, че документа е с такава кодировка. В HTML обаче има друг начин за определяне на кодировката (енкодинга (encoding)), затова BOM не е необходим.

За да избегнем този проблем трябва да сме сигурни, че запазваме всички файлове с UTF-8 кодировка без BOM. Също така трябва да добавим още един много важен ред в <head> елемента на нашата страница.

Стъпка 7

За да сме сигурни, че запазваме всички документи без BOM трябва да направим съответните настройки. За пример ще използвам Notepad++, но принципа трябва да е същия и в другите програми.

Отвори страницата от предишния урок в Notepad++ и от менюто Encoding (1) избери Encode in UTF-8 without BOM (2).

От менюто Encoding избираме Encode in UTF-8 without BOM

Стъпка 8

Промени html кода в head, за да изглежда така:

ИзчистенПрозорец
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; 
  3.     charset=utf-8" />
  4.     <title>Моята първа страница</title>
  5. </head>

<meta> елементите предоставят допълнителна информация за HTML документа. Има различни видове <meta> елементи и те се поставят винаги в <head> елемента. Както виждаш meta елемента е “празен” елемент и няма затварящ таг. Края се обозначава с дясно наклонена черта преди символа >.

В случая този мета елемент изпраща информация на браузъра казвайки му, че документа е text/html и използва utf-8 кодиране (encoding).

Забележка Използването на <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> е силно препоръчително за всяка страница. Невключването на този елемент може да доведе до странни резултати. Запомни, че е добра практика винаги да се включва този meta елемент.

Стъпка 9

След като направи тези промени, запази файла и го валидирай отново (следвай стъпки от 1 до 4). Резултата, който трябва да видиш е напълно валиден xHTML файл.

Резултата е напълно валидна xHTML страница

Информацията, която виждаме тук е:

  • Зелен правоъгълник, който ни съобщава, че страницата е валидна;
  • В полето Result (1) вече няма съобщението от по-рано;
  • Виждаме, че кодировката (encoding) на документа (2) е utf-8;
  • Doctype декларацията (3) е същата, която въведохме;
  • Основния елемент на страницата (4) е html;
  • Стойността на xmlns атрибута (5) е точно тази, която въведохме в отварящия <html> таг.

Процеса на валидиране чрез качване на файл беше малко по-дълъг, но това е така само първия път. Отдели няколко минути, за да пробваш този вариант. Изтрий част от кода и виж какви грешки ще ти покаже валидатора. След като направиш няколко опита, ще разгледаме валидирането чрез директно писане.

Не забравяй да споделиш своя коментар след урока. Ако имаш нещо неясно до момента или нещата при теб не се получават така както са описани в урока, не се колебай да попиташ.

Валидиране чрез директно въвеждане

За да изпробваме този вариант единственото, от което ще се нуждаем е достъп до онлайн валидатора. Разликата от предишните два типа валидиране е, че тук имаме възможност директно да напишем кода, който искаме да проверим. Нека видим как става това.

Стъпка 1

Отвори отново началната страница на валидатора, обаче този път избери Validate by Direct Input (1).

Избор на опцията Validate by Direct Input

Стъпка 2

В полето Enter the Markup to validate: (1) можеш директно да напишеш кода за валидация.

Въведи кода, който искаш да валидираш и натисни бутона Check

Както виждаш аз използвам кода, който написахме в предишния урок. Също така добавих <meta> елемента, за който научи в предишния метод на валидация. Отново, за да упражниш писането на код, въведи кода на ръка, а не го копирай.

След го направиш натисни бутона Check (2).

Стъпка 3

Както можеш да предположиш, документа е валиден. Въпреки това виждаме, че в полето Result (1) валидатора ни показва едно предупреждение. Малко по-надолу на същата страница можем да видим какво всъщност е това предупреждение.

Резултат от проверката чрез директно въвеждане на кода

Стъпка 4

Предупреждението, което валидатора ни показва, е стандартно за този метод на валидиране.

Предупреждението, което валидатора ни показва е свързано с кодировката на документа

Съобщението ни казва, че валидатора приема по подразбиране utf-8 за кодировка на документа. Дори и да има кодировка, която ние сме задали чрез <meta> елемента, валидатора я игнорира и приема utf-8. Това означава, че спокойно можем да пренебрегнем това предупреждение.

Този метод на валидиране е значително по-кратък от предишния, но вероятността за допускане на грешки при въвеждането на кода е по-голяма. Също така отнема повече време, особено ако въвеждаш кода на ръка. Препоръчвам ти този метод, ако имаш малко код и искаш набързо да го провериш.

Отново, ако имаш въпроси или искаш да допълниш нещо, можеш да го направиш след урока.

Знак за валидност

В една от подточките на Предимства на валидирането (по-точно в “Чувство на удовлетвореност”) споменах, че когато страницата премине успешно валидация получаваме като награда една специална иконка, която можем да добавим в страницата като знак за добре свършена работа. Нека видим как точно става това.

Стъпка 1

Валидирай отново страницата, която създадохме в предишния урок (не забравяй да добавиш и мета елемента, за който научи по-рано). Ти избери, който от методите на валидиране ще използваш.

Стъпка 2

След като се валидира успешно, малко по-надолу в същата страница ще видиш секция с поздравление (1). Там се намира иконката, с която валидатора ни награждава, за това че страницата ни е валидна. От дясно на иконата (2) е кода, който можем да копираме в нашата страница.

Валидатора ни награждава с иконка за валидност

Маркирай кода (2) и го копирай. Постави го в твоята страница между отварящия и затварящия body таг. 

ИзчистенПрозорец
  1. <body>
  2. <p>
  3. <a href="http://validator.w3.org/check?uri=referer">
  4.    <img src="http://www.w3.org/Icons/valid-xhtml10" 
  5.    alt="Valid XHTML 1.0 Strict" height="31" width="88" />
  6. </a>
  7. </p>
  8. </body>
Стъпка 3

Запази промените и отвори страницата с браузъра. Иконката за валидност е вече част от твоята страница.

Заключение

В този урок подробно обхванахме наистина много неща. Разгледахме ползите от валидация и защо си струва да проверяваме нашите страници. Стъпка по стъпка преминахме през всеки метод на валидация и обогатихме знанията си с един нов meta елемент. Добавихме иконка, която ще бъде видима за всички посетители на нашия сайт.

Надявам се, че виждаш ползите от всичко това. Проверката на кода трябва да върви ръка за ръка с развитието на сайта. Когато създадем нещо ново е добра идея да го проверим, за да сме сигурни, че се развиваме в правилната посока.

Винаги трябва да се стараем да създаваме страници с колкото се може по-малко грешки. Това ще бъде от полза не само на нас (за по-лесна поддръжка), но и на посетителите на нашия сайт.