Cele mai frecvente 5 greșeli pe care le fac dezvoltatorii HTML5: un ghid pentru începători

Au trecut peste 20 de ani de când Tim Berners-Lee și Robert Cailliau au specificat HTML, care a devenit limbajul de marcare standard folosit pentru a construi internetul. De atunci, comunitatea de dezvoltare HTML a implorat îmbunătățiri ale acestui limbaj, dar acest strigăt a fost auzit mai ales de dezvoltatorii de browsere web care au încercat să uşureze problemele HTML ale colegilor lor. Din păcate, acest lucru a dus la și mai multe probleme, provocând multe probleme de compatibilitate între browsere și duplicarea activității de dezvoltare. De-a lungul acestor 20 de ani, HTML a fost actualizat de 4 ori, în timp ce majoritatea browserelor au primit un număr de două cifre de actualizări majore plus numeroase patch-uri mici.

HTML5 trebuia să ne rezolve în sfârșit problemele și să devină un standard care să le guverneze pe toate (browsere) . Aceasta a fost probabil una dintre cele mai așteptate tehnologii de la crearea World Wide Web. Sa întâmplat? Am primit în sfârșit un limbaj de marcare care va fi pe deplin compatibil între browsere și va funcționa pe toate platformele desktop și mobile, oferindu-ne toate acele funcții pe care le solicitam? Nu știu! Cu doar câteva zile în urmă (16 septembrie 2014) am primit încă un apel pentru revizuire de către W3C, așa că specificația HTML5 este încă incompletă.

Sperăm că, atunci când specificația va fi finalizată într-o zi, browserele nu vor avea deja cod învechit semnificativ și vor implementa cu ușurință și corect funcții excelente, cum ar fi Web Workers , Mai multe elemente audio și video sincronizate și alte componente HTML5 de care avem nevoie pentru un perioadă lungă de timp.

Cu toate acestea, avem mii de companii care și-au bazat afacerile pe HTML5 și se descurcă grozav. Există, de asemenea, multe aplicații și jocuri grozave bazate pe HTML5 utilizate de milioane de oameni, așa că succesul este evident posibil și HTML5 este și va continua să fie folosit indiferent de stadiul specificațiilor sale.

Cu toate acestea, rețeta pe care am menționat-o ne poate exploda cu ușurință în față și, astfel, am subliniat unele dintre cele mai elementare greșeli HTML5 care pot fi evitate. Cele mai multe dintre greșelile enumerate mai jos sunt consecința implementării incomplete sau lipsă a anumitor elemente HTML5 în diferite browsere și ar trebui să sperăm că în viitorul apropiat vor deveni învechite. Până când se întâmplă acest lucru, vă sugerez să citiți lista și să o aveți în vedere atunci când vă construiți următoarea aplicație HTML5, indiferent dacă sunteți un începător HTML5 sau un veterinar cu experiență.

Greșeala obișnuită #1: Încrederea în stocarea locală

Lasă-i să mănânce tort! Această abordare a fost o povară pentru dezvoltatori de secole. Din cauza fricii rezonabile de încălcare a securității și de protecție a computerelor, în „epocile întunecate” când mulți se temeau de internet, aplicațiilor web li se permitea să lase cantități nerezonabil de mici de date pe computere. Adevărat, au existat lucruri precum datele utilizatorilor pe care ni le-au oferit „maeștrii de browser de la Microsoft(r)” sau lucruri precum Local Shared Objects în Flash, dar acest lucru era departe de a fi perfect.

Prin urmare, este rezonabil că una dintre primele caracteristici HTML5 de bază adoptate de dezvoltatori a fost stocarea web. Cu toate acestea, fiți atenți că stocarea web nu este sigură. Este mai bine decât folosirea cookie-urilor deoarece nu va fi transmisă prin fir, dar nu este criptată. Cu siguranță nu ar trebui să stocați niciodată jetoane de securitate acolo. Politica dvs. de securitate nu ar trebui să se bazeze niciodată pe datele stocate în Web Storage, deoarece un utilizator rău intenționat își poate modifica cu ușurință valorile localStorage și sessionStorage în orice moment.

Pentru a obține mai multe informații despre stocarea web și despre cum să o utilizați, vă sugerez să citiți această postare.

Greșeala comună nr. 2: așteptarea compatibilității între browsere

HTML5 este mult mai mult decât un simplu limbaj de marcare. S-a maturizat suficient pentru a combina comportamentul cu aspectul și ar trebui să considerați HTML5 ca HTML extins cu JavaScript avansat pe deasupra. Dacă te uiți la toate problemele pe care le-am avut înainte doar pentru a face ca o combinație statică de HTML+CSS să arate identică pe toate browserele, este corect să presupunem că o complexitate mai mare va însemna doar mai mult efort pentru a asigura compatibilitatea între browsere.

Interpretarea HTML5 pe diferite browsere este departe de a fi identică, la fel cum a fost cazul cu JavaScript. Toți jucătorii importanți din războaiele browserelor au dat o mână de ajutor în specificațiile HTML5, așa că este corect să presupunem că abaterile dintre browsere ar trebui să se reducă în timp. Dar chiar și acum unele browsere au decis să ignore complet anumite elemente HTML5, ceea ce face foarte dificilă urmărirea unei linii de bază și a unui set comun de caracteristici. Dacă adăugăm mai multe dispozitive și platforme conectate la internet în ecuație, situația devine și mai complicată, provocând probleme cu HTML5.

De exemplu, animațiile web sunt o caracteristică excelentă, care este acceptată numai de Chrome și Opera, în timp ce funcția de notificare web care permite alertarea utilizatorului în afara contextului unei pagini web despre o apariție, cum ar fi livrarea unui e-mail, este complet ignorată de Internet Explorer.

Pentru a afla mai multe despre funcțiile HTML5 și suportul oferit de diferite browsere, consultați ghidul HTML5 de la www.caniuse.com.

Așadar, adevărul rămâne că, deși HTML5 este nou și bine specificat, ar trebui să ne așteptăm la o mulțime de probleme de compatibilitate între browsere și să le planificăm în avans. Există prea multe lacune pe care browserele trebuie să le completeze și este corect să ne așteptăm că nu pot depăși bine toate diferențele dintre platforme.

Greșeala obișnuită #3: Asumarea unei performanțe ridicate

Indiferent de faptul că HTML5 este încă în evoluție, este o tehnologie foarte puternică care are multe avantaje față de platformele alternative folosite înainte de existența sa. Dar, cu o mare putere vine o mare responsabilitate , mai ales pentru începătorii HTML5. HTML5 a fost adoptat de toate browserele majore pe platformele desktop și mobile. Având în vedere acest lucru, multe echipe de dezvoltare aleg HTML5 ca platformă preferată, sperând că aplicațiile lor vor rula în mod egal pe toate browserele. Cu toate acestea, asumarea unei performanțe sensibile atât pe platformele desktop, cât și pe cele mobile doar pentru că specificația HTML5 spune acest lucru, nu este sensată. O mulțime de companii (khm! Facebook khm!) și-au pariat pe HTML5 pentru platforma lor mobilă și au suferit de faptul că HTML5 nu funcționează așa cum au planificat.

Din nou, totuși, există câteva companii grozave care se bazează foarte mult pe HTML5. Uită-te la numeroasele studiouri de dezvoltare de jocuri online care fac lucruri uimitoare în timp ce împing HTML5 și browserele la limitele lor. Evident, atâta timp cât sunteți conștient de problemele de performanță și lucrați în jurul acestora, puteți fi într-un loc minunat pentru a crea aplicații uimitoare.

Greșeala comună #4: accesibilitate limitată

Web-ul a devenit o parte foarte importantă a vieții noastre. Facerea aplicațiilor accesibile persoanelor care se bazează pe tehnologia de asistență este un subiect important, care este adesea lăsat deoparte în dezvoltarea de software. HTML5 încearcă să depășească acest lucru prin implementarea unora dintre funcțiile avansate de accesibilitate. Mai mult de câțiva dezvoltatori au acceptat că acest lucru este suficient și nu au petrecut cu adevărat timp implementând opțiuni suplimentare de accesibilitate în aplicațiile lor. Din păcate, în această etapă HTML5 are probleme care îl împiedică să facă aplicațiile tale disponibile pentru toată lumea și ar trebui să te aștepți să investești timp suplimentar dacă vrei să incluzi o gamă mai largă de utilizatori.

Puteți verifica acest loc pentru mai multe informații despre accesibilitatea în HTML5 și starea actuală a celor mai comune funcții de accesibilitate.

Greșeala comună #5: Nu folosiți îmbunătățiri HTML5

HTML5 a extins semnificativ setul standard de etichete HTML/XHTML. Pe lângă etichetele noi, am primit destul de multe reguli și comportamente noi. Prea mulți dezvoltatori au luat doar câteva îmbunătățiri și au omis unele dintre noile funcții foarte interesante ale HTML5.

Unul dintre cele mai tari lucruri din HTML5 este validarea clientului. Această caracteristică a fost probabil unul dintre cele mai vechi elemente ale HTML5 pe care le-au preluat browserele web. Dar, din păcate, puteți găsi mai mult decât câțiva dezvoltatori care adaugă în mod implicit atributul novalidate la formularele lor. Motivele pentru a face acest lucru sunt rezonabile și sunt destul de sigur că vom avea o dezbatere despre aceasta. Datorită compatibilității cu versiunea anterioară, multe aplicații au implementat validatoare JavaScript personalizate și, pe lângă aceasta, este incomod să fie validat imediat de către browsere. Cu toate acestea, nu este prea dificil de asigurat că două metode de validare nu se vor ciocni, iar standardizarea validării utilizatorilor va asigura o experiență comună, contribuind în același timp la rezolvarea problemelor de accesibilitate pe care le-am menționat mai devreme.

O altă caracteristică excelentă este legată de modul în care este gestionată intrarea utilizatorului în HTML5. Înainte de a veni HTML5, a trebuit să păstrăm toate câmpurile formularului în interiorul etichetei <form></form> . Noile atribute de formular fac ca este perfect valid să faci ceva de genul acesta:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Chiar dacă lname nu se află în formular, acesta va fi postat împreună cu fname .

Pentru mai multe informații despre noile atribute și îmbunătățiri ale formularului, puteți verifica Mozilla Developer Network.

Învelire

Înțeleg că dezvoltatorii web sunt daune colaterale în războaiele browserelor, deoarece multe dintre greșelile de mai sus sunt o consecință directă a implementării problematice a HTML5 în diferite browsere. Cu toate acestea, este încă esențial să evităm problemele obișnuite cu HTML5 și să petrecem ceva timp înțelegând noile funcții ale HTML5. Odată ce avem totul sub control, aplicațiile noastre vor folosi îmbunătățiri noi grozave și vor duce web-ul la nivelul următor.