Maketēšanas kurss – lapas validācija. Pārbauda datu derīgumu Pārbauda koda validāciju
Veic vairākas jūsu koda pārbaudes. Galvenie:
Galvenais arguments pret validāciju ir tas, ka tā ir pārāk stingra un neatbilst tam, kā pārlūkprogrammas faktiski darbojas. Jā, HTML var būt nederīgs, taču visas pārlūkprogrammas var apstrādāt nederīgu kodu vienādi. Ja esmu gatavs uzņemties atbildību par nepareizs kods, ko es rakstu, tad man nav jāuztraucas par pārbaudi. Vienīgais, par ko man jāuztraucas, ir tas, ka tas darbojas.
Mana nostāja Šī ir viena no retajām reizēm, kad es publiski runāju par savu nostāju par kaut ko. Es vienmēr esmu bijis viens no validācijas pretiniekiem, pamatojoties uz to, ka validators ir pārāk stingrs, lai tas būtu praktisks reālās pasaules lietojumprogrammās. Ir lietas, ko atbalsta lielākā daļa pārlūkprogrammu (in, after), kas ir nederīgas, bet dažreiz ir ļoti nepieciešamas pareizai darbībai.Kopumā mana lielākā validācijas problēma ir 4. pārbaude (vai nav svešu elementu). Es atbalstu pielāgotu atribūtu izmantošanu HTML tagos, lai saglabātu papildu metadatus, kas saistīti ar konkrētu elementu. Manā izpratnē tā ir, piemēram, atribūta foo pievienošana, ja man ir dati (josla), kas jāsaista ar konkrētu elementu. Dažreiz cilvēki šiem nolūkiem pārslogo esošos atribūtus, lai tikai nokārtotu validāciju, lai gan atribūts tiks izmantots citiem mērķiem. Man tas nav jēgas.
Pārlūkprogrammu noslēpums ir tāds, ka tās nekad nepārbauda, vai HTML kods atbilst norādītajam DTD. Dokumentā norādītais Doctype pārslēdz pārlūkprogrammas parsētāju uz noteiktu režīmu, taču tas neielādē doctype un nepārbauda koda atbilstību tam. Tas nozīmē, ka pārlūkprogrammas parsētājs apstrādā HTML ar dažiem nederīguma pieņēmumiem, piemēram, pašaizverošiem tagiem un bloķēšanas elementiem iekļautajos elementos (esmu pārliecināts, ka ir arī citi).
Pielāgotu atribūtu gadījumā visas pārlūkprogrammas parsē un atpazīst sintaktiski pareizos atribūtus kā derīgus. Tas ļauj piekļūt šādiem atribūtiem, izmantojot DOM, izmantojot Javascript. Tātad, kāpēc man būtu jāuztraucas par derīgumu? Es turpināšu izmantot savus atribūtus un esmu ļoti priecīgs, ka HTML5 tos formalizē.
Labākais piemērs tehnoloģijai, kas rada nederīgu HTML, bet rada milzīgas atšķirības, ir ARIA. ARIA darbojas, pievienojot jaunus atribūtus HTML 4. Šie atribūti nodrošina papildu semantisko nozīmi HTML elementiem, un pārlūkprogramma spēj nodot šo semantiku palīgierīcēm, lai palīdzētu cilvēkiem ar invaliditāti. Visas galvenās pārlūkprogrammas tagad atbalsta ARIA iezīmēšanu. Tomēr, ja izmantojat šos atribūtus, jums būs nederīgs HTML.
Kas attiecas uz pielāgotajiem tagiem, manuprāt, nav nekas nepareizs, ja lapai tiek pievienoti sintaktiski pareizi jauni tagi, taču es neredzu tam lielu praktisku vērtību.
Lai mana nostāja būtu skaidra: es uzskatu, ka pārbaudes Nr. 1 un Nr. 2 ir ļoti svarīgas un vienmēr ir jāveic. Es arī uzskatu, ka 3. pārbaude ir svarīga, bet ne tik svarīga kā pirmās divas. Pārbaude Nr. 4 man ir ļoti apšaubāma, jo tā ietekmē pielāgotos atribūtus. Es uzskatu, ka maksimāli pielāgotie atribūti validācijas rezultātos ir jāatzīmē kā brīdinājumi (nevis kļūdas), lai es varētu pārbaudīt, vai atribūta nosaukums nav ievadīts pareizi. Pielāgotu tagu atzīmēšana kā kļūdas var būt laba ideja, taču tai ir arī dažas problēmas, piemēram, iegulstot saturu citos marķējumos — SVG vai MathML.
Validācija apstiprināšanas labad? Es domāju, ka apstiprināšana validācijas labad ir ārkārtīgi muļķīga. Derīgs HTML nozīmē tikai to, ka visas 4 pārbaudes ir izturētas bez kļūdām. Ir vairākas svarīgas lietas, ko derīgs HTML negarantē:- derīgs HTML negarantē pieejamību;
- Derīgs HTML negarantē labu UX (lietotāja pieredzi);
- Derīgs HTML negarantē tīmekļa vietnes darbību;
- Derīgs HTML negarantē pareizu vietnes attēlojumu.
Es zinu, ka šī tēma daudziem ir pretrunīga, tāpēc, lūdzu, atturieties komentāros būt tīri emocionālam.
UPD: paldies par karmu, es to pārcēlu uz tematisko. Atkārtošu autora vārdus: es saprotu, ka šī ir strīdīga tēma, bet lūdzu atturēties no tīri emocionāliem komentāriem un sniegt argumentus.
Sveiki visiem, šodien ir pēdējā HTML/CSS izkārtojuma kursa nodarbība.
Kā jau solīju, šajā nodarbībā mēs uzzināsim, kā apstiprināt lapu. Noskaidrosim, kas tas ir, kam tas vajadzīgs un kādi rīki un pakalpojumi tam ir pieejami.
Kas ir lapas validācijaSāksim ar to, kas patiesībā ir lapas validācija. Lapas validācija pārbauda tās HTML un CSS kodu atbilstību tīmekļa standartiem, kā arī atlasīto dokumenta tipu. Attiecīgos standartus nosaka W3C, un tas arī viss modernās pārlūkprogrammas mēģiniet tiem sekot.
Ja derīguma pārbaude ir veiksmīga, tas ir, dokuments ir derīgs, tad ar lielu varbūtības pakāpi tas tiks parādīts vienādi visās pārlūkprogrammās).
Derīgs izkārtojums parasti ir “tīrs”, skaists kods, kas, cita starpā, ir “patīk” meklētājprogrammām. Tāpēc koda derīguma pārbaude ir obligāta darbība, veidojot vietnes.
Vietnes derīguma pārbaudeKā pārbaudīt vietnes derīgumu? Vienkāršākais veids Lai pārbaudītu vietnes atbilstību tīmekļa standartiem, ir jāizmanto tiešsaistes pārbaudītājs. Pārbaudīt html derīgumu var šeit: http://validator.w3.org/. Noteikti izmantojiet šo pakalpojumu, lai atrastu kļūdas savā HTML kodā.
CSS validācija tiek veikta, izmantojot CSS validatoru, kas atrodas vietnē http://jigsaw.w3.org/css-validator/.
Sīkāk es parādīju, kā strādāt ar šiem pakalpojumiem zemāk esošajā videoklipā.
Arī koda derīguma pārbaudi var veikt, izmantojot spraudņus koda derīguma pārbaudei. Piemēram, man ir ērtāk tos izmantot, jo tie ļauj pārbaudīt derīgumu, atrodoties ceļā.
Šeit ir video pamācība:
Sveiki visiem! Šodien es jums pastāstīšu, kas ir vietnes koda derīgums, kāpēc tas vispār ir vajadzīgs un kā to pārbaudīt un labot, izmantojot dažādas tiešsaistes pakalpojums ov W3C validatori (html, CSS). Tātad, sāksim ar teorijām. Kas īsti ir šis termins?
Koda derīgums ir pakāpe, kādā jūsu vietnes kods atbilst pieņemtajiem starptautiskajiem standartiem, saīsināti kā W3C. Citiem vārdiem sakot, jau sen vairākas vispārīgie noteikumi par koda rakstīšanu, kas, ja tas neatbilst W3C standartiem, var izraisīt nepareizu jūsu vietnes attēlojumu dažādās datoru un mobilo ierīču pārlūkprogrammās. Tāpat atsevišķos īpaši retos gadījumos tas var izraisīt meklētājprogrammu sankcijas, kā arī dažādu filtru uzlikšanu, kas var palēnināt jūsu projekta attīstību. Bet tas notiek ļoti reti, jo pat pašiem Yandex un Google ir kods, kas nav 100% derīgs, tas ir, tajā ir kļūdas.
Patiesībā jums, iespējams, rodas jautājums: kāpēc man pašam jātērē laiks savas vietnes koda rediģēšanai, lai tas kļūtu derīgs, ja tas tik un tā neko neietekmē? Kā jau rakstīju iepriekš, tas ir nepieciešams, lai nodrošinātu, ka jūsu vietne dažādās pārlūkprogrammās tiek parādīta pareizi (bez kļūdām un kļūdām). Mūsdienās, kā zināms, tie kļūst arvien populārāki Dažādi tālruņu modeļi: iPhone, Android, viedtālrunis un citi, kurus jau izmanto visi zemes iedzīvotāji. Šodien katram trešajam ir savs Mobilais telefons, caur kuru viņš var doties tiešsaistē un apmeklēt jūsu vietni. Tas ir aptuveni 20-30 reizes vairāk nekā tiem, kuriem ir savs dators, klēpjdators vai planšetdators.
Tas ir, jūs saprotat būtību. To cilvēku auditorija, kuri izmanto mobilās ierīces, ir vislielākā, un tas ir tas, uz ko mums ir jāattiecas. Un, ja atceraties, cik daudz ir noticis pēdējo 10 gadu laikā mobilās ierīces un cik jaunu modeļu turpina izlaist ik pēc pusgada, kļūst skaidrs, ka būtu ļoti stulbi palaist garām šādu trafiku (apmeklētājus). Turklāt jaunās tehnoloģijas nestāv uz vietas, un līdz ar atjauninātās html5 valodas parādīšanos jūsu vecā vietne, kas tika izveidota 200. gadā, var izrādīties, tā sakot, viena liela kliņķis uz globālā tīkla fona.
Kā pārbaudīt savas vietnes html un CSS koda derīgumu?Internetā ir daudz šādu pakalpojumu, taču gandrīz visi no tiem ir greizi un pat ir angļu valoda, kur pat ar to nebūs ļoti viegli saprast runāto. Bet tomēr ir viens no tiem, kas ir normālāks, kas ne tikai sniedz skaidrojumu, bet arī parāda, kurā koda rindā atrodas kļūda. Tātad, iepazīstieties - jigsaw.w3.org.
Apmeklējot šo vietni, varat pārbaudīt vietnes koda derīgumu trīs veidos. Cilnē “URI pārbaude” ievadiet savas vietnes adresi, un pakalpojums sniegs jums visu kļūdu sarakstu, kas atrodamas tikai mājas lapa! Ja, tāpat kā es, jūs neesat pārāk zinošs par kodiem un, apskatot savas vietnes kodu, nevarat atrast labojamo rindiņu, varat vienkārši augšupielādēt savu CSS stilu failu (vietnes dizainu) sadaļā “pārbaudīt augšupielādēto failu cilne.
Šajā gadījumā jūs jau zināt, kurā failā jums ir jāievieto kods. Starp citu, jūs to varat izdarīt vēl vienkāršāk. Ja jūsu vietne darbojas, piemēram, ar kādu programmu, jums būs jāatver tikai emuāra administratora panelis sadaļā “ izskats» “redaktors”, atlasiet failu, piemēram, galveni (header.php), nokopējiet kodu un ielīmējiet to pakalpojumā cilnē “ierakstītā teksta pārbaude”. Tādā veidā es personīgi pārbaudīju savu emuāru.
Tātad manā vietnē personīgi bija 44 kļūdas, kas ir ļoti maz, salīdzinot ar citām vietnēm. Starp citu, tēvocim Yandex ir pat 155 kļūdas, ah-ah-ah. Nu, labi, nerunāsim par skumjām lietām.
Lai jums būtu vieglāk labot šīs neprecizitātes kodos, ļaujiet man personīgi parādīt dažus piemērus manā emuārā. Vispirms pievērsiet uzmanību uzrakstam Line 26. Tas norāda uz koda rindiņu. Lai to ātri atrastu, ievietojiet šo kodu, ko ievietojāt pakalpojumā jigsaw.w3.org, jebkurā html redaktorā, tiks parādītas rindu etiķetes.
Ņemiet vērā, ka kāds tags kodā vienmēr ir iezīmēts sarkanā krāsā. Šī ir vieta, kur jums jāmeklē un jārediģē kods. Visbiežāk tas ir jānoņem pavisam, vai arī jāpievieno trūkstošie tagi. Arī virsrakstā un uzraksta apakšā ir padomi angļu valodā, kas jādara, lai kļūdu labotu.
1. piemērs. Šeit jums ir jānoņem pēdiņas, kas iezīmētas sarkanā krāsā. Tiem nevajadzētu atrasties koda iekšpusē, kur tie jau pastāv sākumā un beigās.
2. piemērs. Koda beigās trūkst beigu taga />. Ņemiet vērā, ka, ja koda augšpusē ir vēl viena rinda, arī ar neaizvērtu tagu, tad tā arī ir jāaizver, pretējā gadījumā kļūda nepazudīs.
3. piemērs. Šeit jums vienkārši jānoņem atkārtotā rinda: “ href=""> .
Starp citu, vispirms ir jālabo kļūdas, kas atzīmētas ar krustiņu, nevis ar izsaukuma zīmi, jo šīs kļūdas nav tik svarīgas. Tāpat, pirms kaut ko labojat, dariet to, jo pastāv liela varbūtība, ka jūs to sabojāsit. Kad esat pilnībā notīrījis kodu, iesaku apskatīt, kā jūsu vietne tiek parādīta dažādās pārlūkprogrammās dažādās datoru un tālruņu platformās. Bezmaksas tiešsaistes pakalpojums browsershots.org var jums palīdzēt šajā jautājumā.
Kā citādi jūs varat ātri pārbaudīt savas vietnes html un CSS koda derīgumu?Ja ar vienumu jigsaw.w3.org jums nepietika, šeit ir vēl pāris papildu pakalpojumi lai pārbaudītu derīgumu html kods vietne: www.validome.org, watson.addy.com,
Nobeigumā es gribu teikt, ka, ja atrodat sevī pāris kļūdas, jums par to nav jāuztraucas, jo šodien tas nav tik svarīgi. Kopumā par šo tēmu jau ilgu laiku ir veikti eksperimenti, no kuriem kļuva skaidrs, ka slikti derīgs kods neietekmē vietnes meklēšanas rezultātus. Bet, diemžēl, internets ir vide, kurā viss ātri mainās. Šodien tas var nebūt svarīgi, bet rīt Yandex pievienos sev šo papildu algoritmu, un meklēšanas pozīcijas var nokrist (nokrist). Tāpēc, ja jums ir papildu laiks, lai izdomātu savas vietnes kodu, labāk to darīt tagad.
Vlads Merževičs
Ir daudzi veidi un metodes, lai pārbaudītu, vai tīmekļa lapās nav kļūdu un komentāru. Parasti tos iedala tiešsaistes un vietējās. Tiešsaistes ir paredzētas, lai pārbaudītu lapas, izmantojot interneta pārlūkprogrammu, un lokālās tiek izmantotas, lai pārbaudītu dokumentus pašreizējā datorā. Tālāk mēs apsvērsim populāras dokumentu apstiprināšanas metodes.
validator.w3.org Paplašinājuma instalēšanaPēc faila lejupielādes paplašinājumu var instalēt vairākos veidos.
1. Izmantojot paplašinājumu pārvaldnieku
Palaidiet Firefox un dodieties uz Rīki> Paplašinājumi. Atvērtajā logā velciet lejupielādēto failu (tam ir xpi paplašinājums). Pēc tam paplašinājums tiks instalēts automātiski.
2. Atverot failu
Firefox izvēlnē atlasiet File > Open File... un norādiet ceļu uz failu ar paplašinājumu, pārlūkprogramma pati veiks tālākās darbības.
3. Kopējiet failu paplašinājuma mapē
Atveriet mapi diskā, kurā ir instalēts Firefox (piemēram, c:\Program Files\Mozilla Firefox) un atrodiet tajā paplašinājuma apakšmapi, kurā iekopējiet paplašinājumu. Pēc pārlūkprogrammas palaišanas turpmākā instalēšana notiks neatkarīgi.
Visām iepriekš minētajām instalēšanas metodēm pēc paplašinājuma instalēšanas ir jārestartē pārlūkprogramma. HTML pārbaudītājs sāk darboties uzreiz pēc Firefox restartēšanas.
Ja šīs metodes kaut kādu iemeslu dēļ nepalīdzēja, varat doties uz pārlūkprogrammas Mozilla Firefox atbalsta vietni un lasīt par visu iespējamās metodes paplašinājumu uzstādīšana plkst
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Atverot tīmekļa lapu, HTML Validator nekavējoties sāk darbu, un pārbaudes rezultāts tiek parādīts statusa joslā, tās apakšējā labajā stūrī neliela attēla veidā. Attēls ir atkarīgs no verifikācijas statusa un ir parādīts attēlā. 14.6.
Rīsi. 14.6. Pārbaudot dokumentu, parādīto attēlu veidi
Aplis ar ķeksīti (14.6.a att.) norāda, ka dokuments ir derīgs, dzeltens trīsstūris ar izsaukuma zīmi (14.6.b att.) norāda, ka kodam ir komentāri, kurus var automātiski labot. Un sarkanais aplis ar krustiņu (14.6.c att.) brīdina, ka ir nopietnas kļūdas.
Ir divi veidi, kā apskatīt visas kļūdas. Vispirms apskatiet dokumenta HTML kodu, izmantojot izvēlni Skats > Lapas avota kods vai ar peles labo pogu noklikšķiniet un konteksta izvēlnē atlasiet Skatīt avota kods lapas (14.7. att.).
Rīsi. 14.7. Konteksta izvēlne ar pirmkoda atlases opciju
Tīmekļa lapas avota koda logs ir sadalīts trīs daļās (14.8. attēls), kur augšējā blokā ir faktiskais HTML kods. Apakšējā kreisajā blokā tiek parādīts kļūdu saraksts un komentāri vai informatīvie ziņojumi derīga dokumenta gadījumā. Apakšējais labais bloks ir paredzēts detalizētiem rīka padomiem par pašreizējiem komentāriem.
Rīsi. 14.8. HTML Validator paplašinājuma rezultāts
Iespējams, katrs cilvēks, kurš aktīvi interesējas par interneta resursu izstrādi un meklētājprogrammu popularizēšanu, vismaz reizi ir saskāries ar terminu “vietnes koda derīgums”. Tātad, ko nozīmē šāda noslēpumaina, no pirmā acu uzmetiena, frāze?
Derīgs kods nozīmē hiperteksta iezīmēšanas valodas (HTML) izmantošanu vietnē, kas pilnībā atbilst visiem World Wide Web Consortium (vai saīsināti W3C) noteikumiem un standartiem.
Stingra visu šo noteikumu un standartu ievērošana sniedz vietnei vairākas priekšrocības, proti: vairāku pārlūkprogrammu savietojamība (pareiza vietnes lapu parādīšana visās populārajās pārlūkprogrammās), palielināts tīmekļa lapu ielādes ātrums, meklētājprogrammu pozitīva uztvere par resursu un citi faktori.
Attīstoties elektronikai, kas in pēdējie gadi virzās uz priekšu, prasības derīgumam kā vienam no interneta resursu kvalitātes kritērijiem kļūst arvien stingrākas. Tas galvenokārt ir saistīts ar daudzu mobilo sīkrīku parādīšanos ar dažāda izmēra displejiem. Un pats par sevi saprotams, ka vietne ar derīgu kodu ir jāparāda pēc iespējas pareizāk jebkurā viedtālrunī vai planšetdatorā.
Kā pārbaudīt vietnes koda derīgumu?Lai pārbaudītu koda struktūru un tīrību (derīgumu), jums jāizmanto viens no daudzajiem tiešsaistes pārbaudītājiem (validatoriem). Vietnes koda derīgumu varat pārbaudīt arī World Wide Web Consortium oficiālajā vietnē:
validator.w3.org HTML derīgumam un jigsaw.w3.org/css-validator CSS derīgumam.
Pakalpojums validator.w3.org ļauj pārbaudīt vietnes hiperteksta iezīmēšanas valodas derīgumu vienā no trim piedāvātajiem veidiem:
Lai izvēlētos vēlamo koda derīguma pārbaudes metodi, jums vienkārši jāpārslēdzas uz atbilstošo cilni:
Tālāk, izmantojot skaidru piemēru, es parādīšu izstrādātāju un SEO starpā tik populāra resursa kā Habrahabr derīguma pārbaudes rezultātus. Lai to izdarītu, attiecīgajā validatora laukā ievietojiet vietnes URL un noklikšķiniet uz pogas PĀRBAUDĪT. Voila! Tikai dažas sekundes, un validators mums parādīs rezultātu:
Rezultāts ir ļoti pieklājīgs, jo, pārbaudot vairuma vietņu derīgumu, būs simtiem un dažreiz tūkstošiem kļūdu.
Kā labot koda kļūdas?Ja, pārbaudot jūsu resursa koda derīgumu, tas tika atrasts liels skaits kļūdas, tad nekādā gadījumā nevajag sarūgtināt. Kaut vai tāpēc, ka nav tik daudz vietņu, kas pilnībā atbilstu W3C noteikumiem un standartiem. Un visas kļūdas var labot diezgan ātri. Un bieži vien to var izdarīt pat bez ārējas palīdzības.
Pabeidzot tīmekļa lapas koda pārbaudi, pārbaudītājs izdod visu kļūdu un draudu sarakstu ar detalizētiem paskaidrojumiem un instrukcijām to novēršanai. Tam visam pievienoti piemēri, tāpēc koda kļūdu labošana nebūs grūta pat iesācējam.
Vai koda derīgums ietekmē meklētājprogrammu optimizāciju?Koda derīgums ir viens no vietnes kvalitātes rādītājiem ne tikai tāpēc, ka tas garantē resursa saderību starp pārlūkprogrammām, palielinātu ielādes ātrumu utt. Fakts ir tāds, ka tīrs un strukturēts HTML kods ir viens no svarīgākajiem kompetentās iekšējās vietnes optimizācijas komponentiem. Un iemesli tam ir diezgan acīmredzami:
- meklētājprogrammas ranžēšanas algoritmos, ja visas pārējās lietas ir vienādas, dod priekšroku augstākas kvalitātes vietnēm;
- derīgs kods tiek viegli un ātri apstrādāts, un iespēja, ka meklēšanas roboti to nepareizi nolasīs, ir minimāla.
Neapšaubāmi, jums ir jāpiestrādā pie kļūdām kodā, taču kļūdas var būt dažādas, ne visas var novest pie sliktas vietnes ranga, ja jums nav +100500 vai vairāk kļūdu, tad tas nav iemesls uztraukties! Labojiet tos, kurus jūs (kā savas vietnes īpašnieks) uzskatāt par visbīstamākajiem. Šis ir mans personīgais viedoklis, un, iespējams, nepiekrītu neviena lasītāja viedoklim.
Un lūk, ko Google domā par vietnes koda derīgumu. Meklētājprogrammas oficiālā pozīcija attiecībā uz koda derīguma ietekmi uz meklētājprogrammu optimizāciju ir izklāstīta šajā īsajā video.