Bine ati venit! Așa că am ajuns la final. Urmează un an întreg de muncă fructuoasă, multe idei interesante au fost conturate și acum singurul lucru rămas este să le aduceți la viață 🙂 Puteți urmări cursul evenimentelor și puteți vedea cum libertatea de gândire este exprimată în acțiune - doar abonați-vă la blogul, vă asigur - nu va dura mult timp...

Astăzi sarcina mea este să aflu dacă codul sursă corect care a trecut testul afectează ceva și, dacă da, cât de mult. Și, ca întotdeauna, aștept părerile voastre pe această temă în comentarii.

Anul trecut am acordat foarte multă atenție în publicațiile mele unui astfel de termen precum valabilitatea, este timpul să ne dau seama care sunt. avantajele HTML valid... Mai devreme, împreună cu dumneavoastră, ne-am dat seama cum să verificăm validitatea, precum și canalele și alte câteva puncte interesante.

Patru factori principali în favoarea unui site web valid

În primul rând, putem spune cu o sută la sută certitudine că paginile care au trecut testul validatorului se vor afișa corect în absolut toate browserele moderne - și acest lucru nu este mai puțin important decât. De acord, nu este foarte plăcut să vezi în fața ta un aspect cu elemente distorsionate. Și este puțin probabil ca vizitatorul să revină la un astfel de blog, unde autorul său disprețuiește aspectul și.

În al doilea rând, chiar dacă gândiți logic, eliminând etichetele inutile și alte „gunoaie”, reducem greutatea paginii și, prin urmare, reducem timpul de încărcare a paginii, iar browserele petrec mai puțin timp procesând astfel de pagini. Știi, există o astfel de zicală: „Mai puține cuvinte, mai multă acțiune”, dacă o parafrazezi și o aplici la construirea site-ului, obții ceva de genul „Mai puține etichete – mai multe cuvinte”.

Și acestea nu sunt cuvinte goale, toți cei care au întâmpinat vreodată probleme cu Yandex au primit un răspuns de la asistența tehnică: îmbunătățiți site-ul și lucrați la el. De exemplu, în bara de instrumente Yandex Webmaster, puteți găsi ajutor pentru secțiunea, care conține recomandări pentru crearea de site-uri.

Dacă studiați cu atenție acest document, atunci paragraful 3 „Aspect” stabilește următoarele:

Încercați să păstrați aspectul paginii la standard

În al treilea rând, dacă sunteți implicat în crearea de site-uri web pentru a le comanda sau promova, atunci probabil că trebuie să cunoașteți limbile HTML și CSS și, dacă da, atunci de ce să creați în mod deliberat erori? În plus, clienții stabilesc uneori o sarcină pentru antreprenor: să folosească un cod valid și, în consecință, prețurile vor fi mult mai mari pentru munca efectuată.

Și, în sfârșit, în al patrulea rând, factorul psihologic joacă un rol important. E bine de știut că munca depusă îndeplinește anumite criterii și standarde, în cazul nostru, standardele World Wide Web Consortium. Și după cum știți, psihologia este un lucru grozav! Deci nu o ignora.

Eh, e atât de frumos să vezi o astfel de inscripție 😉

Într-unul dintre articolele mele anterioare, am vorbit despre. Cu toate acestea, în afară de asta, nu toată lumea știe validator pentru HTML, există validator și pentru CSS.

Sens Valabilitate CSS la fel ca HTML: aproape irelevant. În mod similar cu HTML daca scrii CSS nevalid, atunci nu vor fi probleme (cu excepția cazului în care, desigur, există erori grosolane), totuși, un cod valid este întotdeauna bun. Un astfel de cod este clar și structurat, este ușor de înțeles, ceea ce este și important, mai ales la corectare, și mai ales de către alte persoane. De asemenea Valabilitate CSS accelerează procesul de procesare și, în consecință, viteza de încărcare a paginilor.

Și, în sfârșit, având în vedere respectarea în general rară a valabilității, un cod valid impune întotdeauna respect, ceea ce este important dacă faci acest lucru profesional.

La verificați valabilitatea CSS-ului, trebuie să folosești asta Serviciu W3: http://jigsaw.w3.org/css-validator/.

Îți spun imediat că spre deosebire HTML, face CSS valid mult mai simplu, deoarece există în mare parte doar gafe, cu excepția celor care sunt cel mai bine evitate cu totul.

Lasă-mă să rezum. Nu este deloc necesar să faceți codul valid, dar vă recomand cu căldură să faceți acest lucru, deoarece un astfel de site va fi mai ușor de indexat de motoarele de căutare ( Valabilitate HTML), mai rapid la lucru, mai ușor de editat și respect din partea profesioniștilor.

Bun venit pe blogul webmasterului gratuit! Ultima dată am vorbit despre cum se verifică, iar astăzi îmi propun să continuăm subiectul validării paginilor web. Să verificăm foile de stil în cascadă (CSS) și documentele HTML cu foi de stil în raport cu standardele de internet general acceptate.

Limbajul de stil CSS a fost dezvoltat de World Wide Web Consortium (W3C), o organizație care dezvoltă și implementează standarde tehnologice pe Internet.

CSS (din engleză. Cascading Style Sheets - cascading style sheets) este un limbaj formal conceput pentru a descrie aspectul unui document folosind un limbaj de marcare.

Există un serviciu foarte util pentru verificarea stilurilor pe care le oferă W3C. Să mergem la pagina principală a Serviciului de validare CSS și să verificăm validitatea CSS.

În mod tradițional, îmi voi verifica blogul pentru un exemplu bun. Urmăm linkul, se deschide o nouă fereastră, care arată astfel:

Aici ne așteaptă o surpriză plăcută, totul este în rusă! În plus, există posibilitatea de a alege orice altă limbă dintre cele peste 20 disponibile. Pagina conține file care oferă selectarea unei opțiuni de verificare:

1. Verificați după URI - trebuie doar să specificați adresa paginii;
2. Verificați fișierul încărcat - trebuie să selectați un fișier CSS local;
3. Verificați textul tastat - trebuie să introduceți codul CSS pentru a verifica corectitudinea.

Caracteristicile suplimentare vă permit să specificați parametrii de scanare avansați. Iată un scurt rezumat al fiecăruia dintre ele:

• Profil - listează toate caracteristicile și posibilitățile de implementare pe o anumită platformă. Selecția implicită urmează standardul CSS3 de nivel 3 cel mai frecvent utilizat.
• Alerte - setarea detaliilor rapoartelor: toate sau cele mai importante alerte, un raport regulat, fara afisarea avertismentelor. Serviciul poate emite două tipuri de mesaje: erori și avertismente. Dacă CSS-ul verificat nu se potrivește cu recomandarea, este o eroare. Avertismentele diferă de erori prin faptul că nu sunt specifice problemelor de specificație.
• Mediu - Specificați unde sunt aplicate stilurile, cum ar fi pe un dispozitiv portabil, afișaj, televizor sau pagină de imprimare. Se recomandă să testați toate mediile de stil.
• Extensii furnizor - este de dorit să lăsați implicit, este posibil să afișați numai erori sau doar avertismente. Furnizorii de browsere implementează uneori proprietăți CSS experimentale, folosind prefixe pentru a le susține: -moz- (pentru Firefox), -webkit- (pentru Chrome), -ms- (pentru Internet Explorer), -o- (pentru Opera) și altele.

Specific adresa URL, configurez parametri suplimentari de verificare și dau clic pe butonul „Verifică” pentru a începe. Ura! Rezultatul verificării CSS: nu au fost găsite erori!

Din păcate, nu am putut evita avertismentele legate de o extensie de furnizor necunoscută. Este în regulă, validatorul CSS este un utilitar gratuit, fiabil și util, dar, ca orice software, poate fi defect.

Principalul lucru este că stilurile nu conțin erori, iar extensiile furnizorului, cel mai probabil, pur și simplu nu sunt incluse în specificație și provoacă avertismente, dar browserul procesează datele corect.

Rețineți că lista de avertismente conține numărul rândului în care a fost găsită proprietatea necunoscută. Dacă se găsesc erori, veți vedea un tabel cu o proprietate și o descriere a problemei. De exemplu, pagina de pornire Yandex are următorul rezultat al verificării:

Mai jos sunt informații despre CSS-ul corect verificat. Nu te grăbi să-l copiezi și să-l folosești pe site-ul tău! Da, în versiunea dată a CSS-ului corect nu există erori și proprietăți, a căror utilizare provoacă avertismente, codul va trece 100% verificarea completă. Dar efectul este obținut prin eliminarea acestor proprietăți, astfel încât site-ul poate întâmpina probleme de afișare sau așteptările pot să nu se potrivească cu realitatea.

Acest serviciu este găzduit și menținut pe serverul W3C, dar în același timp nu este un instrument oficial de validare CSS.

Opțional, utilizați validatorul combinat - validează întregul document, combinând validatorii HTML și CSS și alte instrumente utile pe o singură pagină.

Când dezvoltați site-uri web, consultați cele mai recente specificații și referințe pentru foile de stil în cascadă. Recomand să folosiți validatorul CSS și să vă verificați site-ul, împărtășiți rezultatele în comentarii!

2016-12-29

Animăm butoanele și verificăm site-ul pentru validitatea codului HTML și CSS

Buna draga vizitatoare!

Astăzi vom analiza, folosind exemplul unei pagini web create, modul în care puteți verifica validitatea site-ului, și anume, pentru conformitatea cu specificațiile stabilite ale limbajelor HTML și CSS.

În plus, înainte de a verifica, vom face o oarecare revizuire a foii de stil CSS în partea legată de „animarea” butoanelor din bara laterală, unde vom face butoanele statice interactive, modificându-le aspectul în funcție de starea lor – pasiv, activ și apăsat.

• Realizarea butoanelor tridimensionale
• Efectuarea butoanelor interactive
• Ai nevoie de validare
• Cum se validează codul HTML
• Cum se validează codul CSS
• Fișierele sursă ale site-ului

Realizarea butoanelor tridimensionale

În articolul anterior, am stilat zona principală de conținut pentru a se potrivi cu aspectul paginii de pornire. În același timp, în momentul de față există butoane în bara laterală care sunt statice și arată ca un dreptunghi maro plat obișnuit cu colțuri rotunjite.

Mai jos este un fragment dintr-o bară laterală cu aceste butoane.

Pentru a „anima” butoanele, să le dăm mai întâi puțin volum cu ajutorul stilurilor CSS. Și vom face acest lucru folosind proprietatea gradient liniar, care a fost folosită anterior în proiectarea blocurilor de rotație, căutare și abonament.

Valorile gradientului liniar sunt definite după cum urmează:

1. Vom seta nuanțele de culori de jos în sus, începând cu o culoare mai închisă decât culoarea principală a butonului. Pentru a determina ce culoare să folosim la începutul gradientului, folosim instrumentul unui editor grafic, în acest caz Photoshop.

Pentru a face acest lucru, cu un document de aspect de design deschis, selectați „Color Picker”, mutați cursorul peste zona dorită a butonului, definiți culoarea de bază și apoi utilizați instrumentele „Color Picker” pentru a selecta o culoare mai închisă a aceeași nuanță de maro. În cazul nostru, să luăm o culoare cu valoarea „653939”. Cum se poate face acest lucru este arătat clar în captura de ecran de mai jos.

2. Apoi, definiți poziția de oprire a gradientului unde culoarea inițială, mai închisă, va trece la cea principală. Așezați poziția de oprire aproximativ la mijloc. În același timp, pentru a face o culoare mai saturată, vom muta puțin poziția de oprire în sus și vom defini valoarea acesteia, să zicem, 70% din înălțime.

3. Ultimul lucru de făcut pentru a atribui proprietăți gradientului este să definiți o culoare mai deschisă decât culoarea de bază care va colora butoanele din partea de sus. Acest lucru se face în același mod ca atunci când definiți culoarea inițială a gradientului. În acest caz, vom lua valoarea acestei culori drept „b88686”.

3. Pe baza datelor primite, adăugați un gradient liniar la proprietățile CSS generate anterior ale butoanelor.

intrare: {

înălţime : 30px;

margine-fond : 10px;

hotar-raza : 5px;

fundal : # a76d6d;

aliniere text : centru;

grosimea fontului : îndrăzneț;

culoare : #fff;

pluti : dreapta;

imagine de fundal

Se poate observa că la determinarea culorilor extreme, pozițiile de oprire nu sunt indicate aici, deoarece la valori de 0% și 100% acest lucru nu este necesar.

Acum, să reîmprospătăm browserul și să vedem rezultatul.

După cum puteți vedea, butoanele au căpătat o ușoară umflătură. Acum puteți începe să le „revitalizați”.

Efectuarea butoanelor interactive

Pentru a lucra pe deplin cu butoanele, le vom face interactive, care vor reflecta vizual cele trei stări principale ale acestora, pasiv (butonul este în starea inițială), activ (cursorul trece peste buton) și apăsat (când cursorul se deplasează, butonul mouse-ului este apăsat și menținut).

Și vom face acest lucru folosind o combinație de proprietăți de umbră și chenar. Esența acestei tehnici este că prin schimbarea culorii umbrei și a marginilor din diferite părți, puteți realiza o imitație a schimbării stării butoanelor.

Mai întâi, să facem acest lucru pentru starea pasivă și să încercăm să o portretizăm astfel încât butoanele să se ridice deasupra suprafeței.

Vom alege culorile chenarelor și umbrelor în același mod ca în cazurile anterioare.

Codul CSS după completările corespunzătoare va lua forma.

intrare: {

înălţime : 30px;

margine-fond : 10px;

hotar-raza : 5px;

fundal : # a76d6d;

aliniere text : centru;

grosimea fontului : îndrăzneț;

culoare : #fff;

pluti : dreapta;

imagine de fundal : gradient liniar (în sus, # 653939, # a76d6d 50%, # b88686);

cutie-umbră : 2px 2px 4px 0px # 422a2a;

lățimea graniței : 2px;

stil de chenar : solid;

chenar-culoare : #ddbebe # 241616 # 241616 #ddbebe;

Se poate observa aici că marginile sunt reprezentate de o combinație de proprietăți care determină grosimea (border-width cu valoarea 2px), un stil (border-style) cu o valoare care specifică un chenar solid și culori (border-color) pe fiecare dintre cele patru laturi.

Să actualizăm browserul și să vedem cum vor arăta acum butoanele.

După cum puteți vedea, butoanele par să fie ridicate în această stare.

Acum să încercăm să facem ca butoanele să arate ca o stare apăsată. Pentru a face acest lucru, vom elimina umbra și vom schimba culoarea marginilor. În acest caz, vom folosi un selector special al: pseudoclasei hover corespunzătoare stării active.

CSS-ul pentru starea activă a butoanelor va arăta astfel.

intrare: planare {

cutie-umbră : nici unul;

chenar-culoare : # a76d6d # a76d6d # a76d6d # a76d6d;

În acest caz, vom schimba din nou culoarea chenarelor și vom adăuga o umbră, doar că în acest caz va fi internă și fără offset. Selectorul de pseudo-clasă se va schimba și în: activ, corespunzător stării apăsate.

Codul CSS pentru starea apăsată va fi după cum urmează.

intrare: activ {

cutie-umbră : 0px 0px 7px 2px # 422a2a insert;

chenar-culoare : # 777 #fff #fff # 777;

Butonul „Căutare” este afișat mai jos pentru comparație, unde puteți vedea clar cum își schimbă aspectul în funcție de stare.

Fig. 8 Stare pasivă

Aici am terminat aspectul paginii principale și am adus-o la o formă care se potrivește cu aspectul de design. Și acum trebuie, ca înainte, în fiecare etapă, să verificăm compatibilitatea încrucișată în diferite browsere. Dar înainte de asta, să verificăm pagina pentru validare, deoarece starea codului poate afecta într-o oarecare măsură coerența încrucișată. Prin urmare, acum vom efectua această operație foarte necesară.

Ai nevoie de validare

Validarea este verificarea codului în raport cu standardele stabilite. Distingeți între validarea pentru corectitudinea codului HTML și CSS. În același timp, este clar că într-un caz se verifică codul HTML, în celălalt codul CSS.

Probabil, mulți vor găsi ciudată întrebarea dacă este necesară validarea. Dar dacă te uiți pe Internet, poți vedea că sunt mulți care cred că codul valid este opțional, că aceasta este o pierdere de timp, deoarece browserele funcționează bine chiar și în prezența a tot felul de erori.

Desigur, în multe cazuri, site-urile pot funcționa bine pe cod invalid, dar coerența încrucișată în astfel de cazuri nu poate fi garantată. La urma urmei, există standarde pentru limbajele de programare în sine, dar pentru faptul că browserele corectează erorile în același mod, un astfel de standard, desigur, nu există și nu poate fi. Și, prin urmare, diferite browsere pot gestiona erorile în moduri diferite, ceea ce poate duce la afișarea diferită a paginilor.

Și, în general, nu este clar de ce unii oameni dezvoltă o astfel de atitudine figurativă față de munca lor, conform principiului „va face exact asta”. Prin urmare, dacă cineva crede că nu trebuie să verifice codul pentru valabilitate, atunci acesta este dreptul său și cu greu poate fi convins de contrariul și nu este nevoie.

Acum să trecem la verificarea directă a validității codurilor, mai întâi HTML, apoi CSS.

Cum se validează codul HTML

În esență, verificarea de validare a codului în sine este destul de simplă, așa cum se poate vedea acum. Dar, eliminarea erorilor durează de obicei o anumită perioadă de timp. Desigur, dacă codul constă din mai multe linii, atunci nu pot apărea dificultăți aici. Dar, dacă există sute și mii, atunci s-ar putea să trebuiască să muncești din greu, totul depinde de cât de bine a fost compilat codul. Prin urmare, este mai bine să faceți acest lucru mai des cu o verificare comună a coerenței încrucișate.

Aici vom lua în considerare cea mai simplă și cea mai comună variantă de verificare a validității - aceasta este utilizarea site-ului „W3C Consortium”, care, cu sprijinul dezvoltatorilor de browser, dezvoltă specificații pentru codurile paginilor web.

Pentru a verifica codul HTML, trebuie doar să urmați linkul https://validator.w3.org/, unde se va deschide o pagină cu un câmp pentru introducerea adresei paginii verificate.

captura de ecran 51

După apăsarea butonului „Verifică”, vom primi rezultatul verificării.

În acest caz, codul HTML este valid, dar există o recomandare de a folosi atributul lang cu valoarea "ru", deoarece pagina folosește limba rusă.

Atributul lang este destinat browserelor să afișeze corect anumite caractere, cum ar fi ghilimele, în funcție de limba utilizată. Prin urmare, nu va fi de prisos să-l includem în codul HTML. Și vom face acest lucru în eticheta html, astfel încât acest atribut să poată afecta întregul document.

Modul de realizare a acestui supliment este prezentat în tabelul următor.

"ru" >

. . .

Și acum, dacă facem o a doua verificare, putem vedea că codul a devenit complet valabil fără niciun comentariu.

În acest fel, am verificat un fișier postat pe Internet. Dar atunci când pagina nu a fost încă postată pe web, puteți verifica validitatea acesteia în alte moduri, fie încărcați fișierul folosind butonul de răsfoire, fie folosiți formularul pentru a copia direct codul HTML.

Captura de ecran arată ultima opțiune, când codul paginii web este copiat direct în formular pentru validare.

După efectuarea verificării, obținem un rezultat similar, iar codul verificat va fi afișat și aici. In cazul in care se gasesc erori, acestea vor fi evidentiate pentru a simplifica cautarea, ceea ce simplifica foarte mult munca de eliminare a acestora.

Cum se validează codul CSS

Am acoperit verificarea validării HTML. Validarea codului CSS merge exact în aceeași ordine. Numai în acest caz, trebuie să utilizați o altă pagină de validare, care pentru un astfel de caz se află la http://jigsaw.w3.org/css-validator/.

Să o deschidem și, la fel ca și data anterioară, să introducem adresa paginii care se verifică, după care apăsăm butonul „Verifică”.

Rezultatul acestei verificări este afișat în captură de ecran.

După cum puteți vedea, codul nostru CSS este pe deplin compatibil cu specificația, fără erori, ceea ce este un rezultat bun.

Ordinea celorlalte metode de verificare pentru acest caz coincide complet cu verificări similare pentru codul HTML. Prin urmare, nu ne vom repeta aici și aici vom încheia luarea în considerare a verificărilor de validare.

După aceea, vom verifica pagina noastră pentru potriviri încrucișate și ne vom asigura că este afișată la fel pe toate browserele, la aceasta vom finaliza aspectul paginii principale a site-ului.

Și, ne vom ocupa de asta imediat după sărbătorile de Anul Nou.

Și, în concluzie, poți să urezi tuturor un An Nou Fericit! Și vă doresc sănătate, dragoste, bucurie, prosperitate și, bineînțeles, mult succes în crearea propriului site web pentru posibilitatea de a lucra cu succes pe Internet în Noul An!

Fișierele sursă ale site-ului

Fișierele sursă ale site-ului cu actualizările care s-au făcut în acest articol pot fi descărcate din atașat materiale suplimentare.

După ce ați creat un site și l-ați completat cu tot ce aveți nevoie, site-ul trebuie verificat pentru erori. Pentru a găsi greșeli de ortografie în html și css, validatorul W3 - World Wide Web Consortium, care este tradus ca: World Wide Web Consortium, vă va ajuta. El găsește toate erorile și indică unde sunt, precum și oferă opțiuni pentru eliminarea lor.

De ce să remediați codul cu Validatorul W3C

De fapt, nu sunt multe avantaje din asta și toate sunt condiționate, dar din păcate fiecare site ar trebui să aibă un număr minim de erori, în mod ideal niciuna. Indiferent ce ai decide dacă ai nevoie, iată avantajele sale:

• Viteza de încărcare a paginii va crește, dar ușor, nici nu va fi vizibilă.
• Site-ul va afișa la fel în fiecare browser.
• Când adăugați un site în director, acordați atenție cunoștințelor de scriere html și css.

Nu sunt mulți profesioniști, dar remediați erori html și css folosirea validatorului W3C merită!

Cum să remediați erorile cu Validator

Principiul de corectare a erorilor al validatorului nu este dificil și toată lumea se poate descurca! Urmăm link-urile către, dacă este greu de înțeles limba engleză, vă sfătuiesc să utilizați un traducător sau să utilizați de aceasta, care va arăta tipul de erori în limba rusă. Luați în considerare un exemplu de remediere a validatorului:

1. Introduceți în câmp numele site-ului dvs. complet.


2. În listă, începem să vedem unde și care este eroarea și ce este necesar pentru a o elimina.


După cum puteți vedea din imagini, greșeala mea este în link, am găsit această problemă în plugin-ul butoanelor de partajare. Adesea, trebuie să căutați prin toate fișierele pentru a găsi o eroare.

3.Adăugați elementul la linia în care a fost găsită eroarea și verificați-l din nou cu validatorul.
Dacă eroarea este remediată, atunci este bine. Dacă nu, atunci trebuie să cauți mai departe.