Cum să înveți designul web din greșelile tale

Web-ul nu este realizat dintr-un singur cadru monolitic. Este cu atât mai greu să înveți toate piesele care alcătuiesc tot ceea ce vedem pe internet din cauza modularității sale.

Oricine este obligat să facă greșeli care încetinesc timpul de dezvoltare, programul tău sau introduc erori în programul tău. Nu numai atât, dar unele feluri de greșeli te pun într-un dezavantaj atunci când ești în căutarea unui loc de muncă.

Există bune practici pentru a se asigura că apar cât mai puține probleme posibil atunci când vă proiectați site-ul web sau îl lansați în producție. Iată cele mai frecvente cinci greșeli pe care le fac dezvoltatorii web juniori și cum să le evite.

Te bazezi prea mult pe jQuery

jQuery este de departe cel mai popular cadru JavaScript din lume. Adoptarea acestuia în proiectul tău imediat ce ai creat poate părea tentant, dar nu te grăbi atât de mult.

Deși jQuery oferă o mulțime de metode convenabile pentru a vă accelera dezvoltarea web, este important să nu îl folosiți prea mult. Noii dezvoltatori web fac aproape întotdeauna greșeala de a înțelege metodele API ale jQuery, mai degrabă decât modul în care acestea funcționează dedesubt.

Mulți angajatori consideră jQuery o răspundere mai degrabă decât un lucru plăcut, deoarece unii dezvoltatori nu reușesc să înțeleagă cum funcționează JavaScript .

Nu este nimic în neregulă cu utilizarea jQuery. Dacă poți, obișnuiește-te să folosești metodele JavaScript pe cont propriu. Bazați-vă pe jQuery doar pentru metode comode, care altfel ar dura ceva timp pentru a fi implementate.

Te bazezi prea mult pe cadrele CSS

Cadrele CSS precum Semantic UI și Bootstrap pot economisi mult timp. Ele elimină nevoia de stilare manuală și încorporează un design receptiv în aplicația dvs.

La fel ca jQuery, totuși, este ușor să fii absorbit de ciclul de a nu scrie niciodată propriul cod CSS. La sfârșitul zilei, site-ul tău va arăta generic și pe jumătate realizat. La capătul extrem al lucrurilor, ar putea chiar să arate ca alte duzini de site-uri web care au avut aceeași idee ca și tine.

Dacă nu sunteți un expert în scrierea unui cod CSS, veți avea capacitatea de a citi manuale, de a găsi un mentor, care vă va oferi informațiile de care aveți nevoie, cum ar fi un ghid de cercetare, va scrie o lucrare de cercetare pentru mine și va oferi tu cu ajutor bun si calitativ. Există diferite cadre care ar putea fi mai intuitive pentru scrierea codului.

Framework-uri precum Bootstrap există pentru a vă face viața mai ușoară . Pentru a evita dependența excesivă, învață singur stilul CSS, învață cum să folosești preprocesoare pentru a accelera dezvoltarea și studiază teoria culorilor pentru a ști ce culori merg împreună și care nu. Odată ce înțelegeți corect conceptele, vă puteți da seama că nici măcar nu mai aveți nevoie de cadre.

Nu aveți un instrument de recuperare

Lipsa unui instrument de recuperare atunci când aveți cea mai mare nevoie de el poate duce la prăbușirea site-ului dvs. și la posibila dispariție a acestuia. Ori de câte ori faci o schimbare site-ului tău web, riști ca acesta să nu fie bun. Pentru a vă asigura că aveți o plasă de siguranță în care puteți cădea, gândiți-vă la utilizarea unui instrument de recuperare, cum ar fi WP Reset.

WP Reset este cea mai bună soluție atunci când apar probleme pe site-ul dvs. web. Poate că problema este că nu puteți accesa administratorul WP sau întâlnirea cu ecranul alb al morții. Oricare ar fi, WP Reset vă ajută. Este echipat cu instrumente utile de curățare care vă vor permite să vă recuperați rapid și ușor site-ul web.

În plus, îl puteți folosi pentru a instala rapid orice plugin și teme sau pentru a le dezactiva dacă sunt defecte. În plus, caracteristica WP Reset Snapshots face automat un instantaneu al site-ului dvs. înainte de a-i face vreo modificare, permițându-vă să recuperați acel instantaneu dacă lucrurile nu decurg așa cum ați planificat.

Cea mai puternică opțiune pe care o oferă acest plugin este opțiunea Nuclear Reset, care vă permite să ștergeți complet instalația, să eliminați toate pluginurile, temele și intrările în baza de date. Cu toate acestea, utilizați-l numai atunci când aveți nevoie de el.

Ați uitat să vă optimizați site-ul pentru viteză

Un efect al dependenței excesive de jQuery este tendința de a cădea într-un obicei de anti-pattern. Când browserul se încarcă pentru prima dată, codul JavaScript și CSS trebuie să fie executat înainte ca pagina să fie încărcată, în funcție de locul în care plasați scripturile.

După cum vă puteți imagina, a avea prea multe scripturi va încetini site-ul dvs. Dacă aveți clase CSS neutilizate, va crește dimensiunea pachetului site-ului dvs. și, în mod similar, o va încetini.

Multe se duc în optimizarea vitezei. Pentru a numi câțiva factori: fonturile, imaginile, fișierele JavaScript și CSS suplimentare și compresia fișierelor joacă toate rolul lor. Odată ce le-ați stăpânit, uitați-vă la pachetele de pachete precum Webpack și Rollup care pot elimina clasele CSS neutilizate și metodele JavaScript din fișierele dvs.

Validare incompletă a intrărilor

Unele dintre cele mai importante părți ale oricărui site web pe care l-ați construit vreodată sunt formularele. Deoarece este singurul mod în care o persoană poate transmite informații către serverul dvs., este întotdeauna necesar să faceți niște verificări de sănătate.

Unii dintre cei mai obișnuiți vectori de atac de pe internet sunt încă atacurile XSS și injecția SQL. Greșeala pe care o fac dezvoltatorii juniori este să aibă validarea intrărilor doar pe front-end.

Toate validarea intrărilor se face prin JavaScript, care este banal de dezactivat. Acestea fiind spuse, Kenneth Sytian de la Sytian Web Developer Philippines recomandă să efectueze întotdeauna validarea intrărilor atât pe backend, cât și pe front-end. În plus, toate caracterele non-alfanumerice ar trebui să fie eliminate pentru a face imposibile atacurile prin injecție.

Ignorând importanța SEO

Nu este suficient să construiești site-uri web frumoase și să le expediezi. Este la fel de important ca oamenii să vadă și să aprecieze conținutul pe care îl oferiți. Cel mai bun mod de a face acest lucru este să vă îmbunătățiți cunoștințele SEO și implementarea acesteia.

SEO este un proces lung și complicat care necesită cercetare constantă pentru a rămâne în bucla regulilor jocului în continuă schimbare. Cu acoperirea sa arcuită, nu ar trebui respins pentru a fi făcut la sfârșitul procesului de dezvoltare.

Unele practici, cum ar fi să aveți întotdeauna etichete descriptive „alt” pe imagini, trebuie procesate în mod activ. Imaginați-vă că vă scanați toate fișierele pentru a căuta etichete alt și meta când ați terminat deja proiectul.

Neavând un favicon

Este ușor să respingi favicon-ul ca fiind inutil din cauza cât de banal este configurarea, dar existența sa este destul de importantă. Pe web-ul modern, este obișnuit ca utilizatorii să aibă mai multe file deschise, astfel încât să le poată vizita din nou mai târziu. Favicon-urile acționează ca un fel de marcaj, astfel încât site-ul dvs. să fie vizibil dintr-o singură privire. Lipsa unuia poate însemna că utilizatorii își pierd interesul pe parcurs.

În loc să generezi unul singur în Photoshop, designerul UX premiat, Michelle Dipp, recomandă să folosești instrumente gratuite de design grafic pe care le poți găsi online. Puteți găsi chiar unul care oferă șabloane de favicon, astfel încât să vă puteți crea propriile fără bătăi de cap.

Ignorarea designului receptiv

Designul responsive se numără printre cele mai importante lucruri pe care ar trebui să le aibă un site web. Majoritatea traficului de pe internet provine de la dispozitive mobile. A nu avea un site care să afișeze conținut diferit în funcție de dimensiunea ecranului te pune într-un dezavantaj semnificativ. Asta mai ales dacă concurenții tăi oferă același lucru.

O modalitate prin care puteți îmbunătăți experiența utilizatorului este prin implementarea elementelor lipicioase pe site-ul dvs. Elementele lipicioase sunt cele care rămân fixate pe pagină în timp ce utilizatorul navighează. Când elementele sunt fixe, este mai ușor să le accesezi și știi că sunt mereu într-un singur loc, ceea ce este esențial atunci când ai un telefon mobil.

Acestea fiind spuse, WP Sticky este pluginul perfect pe care îl puteți folosi pentru a vă crea elementele lipicioase. WP Sticky vă permite să faceți câte elemente doriți, fără a scrie o singură linie de cod; trebuie doar să-ți alegi elementul chiar de pe ecran.

Cu WP Sticky, vă puteți face meniul, antetul, subsolul și multe altele, lipicios. În plus, puteți ajusta poziția elementului, opacitatea și îl puteți adăuga sau elimina dintr-o anumită postare.

În plus, este unul dintre factorii pe care Google îi ia în considerare atunci când clasifică paginile. Dacă pagina dvs. nu răspunde pe mobil, probabil că veți primi câteva e-mailuri de la consola webmasterului care vă avertizează să vă actualizați site-ul.

Concluzie

Designul web adecvat necesită timp. Timp pentru cercetare, timp pentru muncă și chiar mai mult timp pentru a te obișnui cu practicile recomandate. A greși în timpul dezvoltării nu este sfârșitul lumii. În schimb, luați orice eșec pe care le întâlniți ca pe o experiență de învățare. Îmbunătățiți-vă cunoștințele și aplicarea unui design web adecvat folosindu-le.

–

DESPRE AUTOR

Becky Holton este jurnalist și blogger la Bestdissertation.com, cel mai bun serviciu de scriere de eseuri. Este interesată de tehnologiile educaționale, de scriere expertă și este întotdeauna gata să sprijine vorbirea informativă la AustralianWritings. Urmărește-o pe Twitter.