Laipsniškas tobulinimas yra metodas, padedantis užtikrinti, kad jūsų programinė įranga būtų patikima ir prieinama. Ja vadovaudamiesi galite užtikrinti, kad kuo daugiau žmonių galės naudotis jūsų svetaine ar programa.
Pradėkite nuo minimaliai perspektyvios savo žiniatinklio dizaino versijos ir užtikrinkite, kad ji tinkamai veiktų. Tada suteikite papildomų funkcijų ir stiliaus, kad pažangesnės naršyklės būtų naudingos.
Kaip veikia progresyvus tobulinimas?
Dėl itin paskirstyto pobūdžio žiniatinklis visada turėjo palaikyti daugybę įrenginių. Nuo pagrindinių aštuntojo dešimtmečio kompiuterių iki modernių stalinių, planšetinių kompiuterių ir televizorių – svetainės nuėjo ilgą kelią.
Visko esmė yra HTML. Kadangi tai yra „atleidžianti“ kalba, naršyklės rodys HTML taip gerai, kaip jį supranta. Paprastai jie ignoruoja viską, ko nepalaiko.
Tai gali būti naudinga kūrėjo požiūriu, tačiau tai gali sukelti problemų skaitytojams. Jei jūsų svetainėje rodomas tuščias puslapis, kai „JavaScript“ negali paleisti, naudotojai neturi nieko kito, kaip tik jo atsisakyti. Laipsniškas tobulinimas skatina teikti pagrindinį turinį visiems, kurie gali jį pasiekti, tada patobulinti turinį naudojant atitinkamas technologijas, pvz., CSS ir JavaScript.
Progresyvus požiūris į stilių
CSS yra žiniatinklio stiliaus lapo kalba kuriuos galite naudoti norėdami tinkinti spalvas, šriftus, maketaiir daug kitų vaizdinių jūsų puslapių aspektų. Galite naudoti jį norėdami pagerinti numatytąją turinio išvaizdą, tačiau tai nereiškia, kad pirmiausia neturėtumėte tinkamai struktūrizuoti turinio.
Paimkite, pavyzdžiui, meniu juostą; galite ją struktūrizuoti taip:
<nav>
<a href="/register">Registruotis</a>
<a href="/login">Prisijungti</a>
<a href="/about">apie mus</a>
<a href="/contact">kontaktas</a>
</nav>Jei norite, kad būtų rodomas horizontalus meniu, kuriame kiekviena nuoroda atrodo kaip mygtukas, galite ją stilizuoti naudodami šį CSS:
nav a {
tekstas-dekoravimas: nėra;
ekranas: eilutinis blokas;
kamšalas: 0.5 em 1em;
kraštinė: 1px vientisas;
kraštinės spindulys: 8 pikseliai;
paraštė-dešinė: 1em;
}Kai naršyklė tai visiškai atvaizduoja, ji turėtų atrodyti taip:
Tačiau jei CSS nepasiekiamas, meniu bus rodomas taip:
Atkreipkite dėmesį, kad tai nepanašu į meniu ir nėra labai paprasta naudoti, nes nuorodos susilieja į vieną.
Galite naudoti alternatyvią struktūrą, kad dizainas būtų tvirtesnis:
<nav>
<ul>
<li><a href="/register">Registruotis</a></li>
<li><a href="/login">Prisijungti</a></li>
<li><a href="/about">apie mus</a></li>
<li><a href="/contact">kontaktas</a></li>
</ul>
</nav>Kadangi šis žymėjimas naudoja nesutvarkytą sąrašo elementą, jį daug lengviau naudoti, jei nėra CSS:
Atkreipkite dėmesį, kaip daug lengviau greitai nuskaityti ir suprasti šias nuorodas net naudojant numatytąjį naršyklės stilių. Taikant šį metodą reikės pridėti šiek tiek daugiau CSS, kad nepaisytumėte numatytųjų sąrašo stilių:
navli { ekranas: įdėtas; }Nors galutinė struktūra ir stilius yra sudėtingesni, o dauguma vartotojų bus įjungę CSS, šis metodas yra patikimesnis. Jis bus draugiškesnis ekrano skaitytuvų naudotojams ir terminalais pagrįstos naršyklės.
Palaipsniui pristatome funkcionalumą
Laipsniškas tobulinimas yra svarbiausias, kai kalbama apie svetainės ar programos veikimą. Principas teigia, kad jūsų svetainė turi veikti kuo geriau.
Praktiškai tai paprastai taikoma „JavaScript“. Jei įdiegiate kliento elgseną, ji turėtų sudėti funkcionalumą į svetainę ar programą, kuri jau veikia be jos.
Labai dažnas atvejis yra įvykių tvarkymas. Įsivaizduokite puslapį, kuriame pagal poreikį įkeliamas papildomas turinys. Tai gali būti rankinis begalinis slinkimas, komentaro įterpimas ar panašiai.
<kūnas>
<!--... -->
<mygtukas onclick="load_more();">
Įkelti Daugiau
</button>
<!--... -->
</body>Mygtukas paspaudus atribute yra „JavaScript“ kodas, kuris bus paleistas kam nors spustelėjus mygtuką. Tačiau jei JavaScript nepasiekiamas, šis mygtukas nieko nedarys. Vartotojas liks spustelėjęs šį mygtuką, neturėdamas jokio atsiliepimo ir nesuvokdamas, kas vyksta ne taip. Daug geresniam metodui naudojamas laipsniškas tobulinimas:
<kūnas>
<!--... -->
<id ="p2" href="/page/2">2 puslapis</a><scenarijus>
funkcijaįkelti_daugiau() { konsolė.log("!"); }
/* Pakeiskite nuorodą mygtuku */
var nuoroda = dokumentas.getElementById("p2");
var mygtukas = dokumentas.createElement("mygtukas");
mygtukas.innerText = "Įkelti daugiau";
button.addEventListener("spustelėkite", įkelti_daugiau);
dokumentas.kūnas.insertBefore(mygtuką, nuoroda);
nuoroda.parentNode.pašalintiVaiką(nuoroda);
</script>
</body>
Šis kodas pagrindinę nuorodą paverčia mygtuku su įvykių tvarkykle. Įvesdami priklausomybę nuo „JavaScript“ naudodami patį „JavaScript“, galite būti tikri, kad jis veiks. Ir veikia numatytasis funkcinis elgesys standartinės nuorodos į formą forma /page/2.
Ar tikrai būtinas progresyvus tobulinimas?
Visi naudoja naršykles su CSS ir JavaScript, tad kam nerimauti dėl situacijos, kuri nekyla? Na, yra keletas priežasčių, dėl kurių turėtumėte laikytis gerosios laipsniško tobulinimo praktikos.
- Pirma, ne visi, kurie apsilanko jūsų svetainėje, naudoja naršyklę. Kai kurie lankytojai bus robotai, pavyzdžiui, paieškos variklio indeksuotojai, ir jie gali visiškai nesuprasti CSS ar JavaScript.
- Antra, ne kiekvienas jūsų svetainėje apsilankęs asmuo naudos naršyklę su CSS ir JavaScript. Kai kurie lankytojai gali naudoti terminalo naršyklę, kuri rodo paprastą tekstą su minimaliu formatavimu. Kiti gali naudoti ekrano skaitytuvą.
- Trečia, net jei naršyklė palaiko CSS ir JavaScript, viskas vyksta ne taip. Dėl neveikiančios nuorodos arba blogo tinklo ryšio gali trūkti .css arba .js failo. Dėl „JavaScript“ klaidos kitas kodas gali visai neveikti.
- Galiausiai, kai kurie lankytojai gali aktyviai nuspręsti išjungti CSS arba JavaScript. Jie gali tai padaryti dėl privatumo problemų arba todėl, kad jie naudoja lėtą arba mokamą ryšį.
Progresyvus mąstymas daro stebuklus
Visų pirma, laipsniškas tobulinimas skatina jus taikyti požiūrį į turinį. Turinys yra karalius, todėl jūsų tekstas ir vaizdai visada turėtų būti pasiekiami visiems, nesvarbu, ar jie pasiekia jūsų svetainę.
Suteikdami visiems skaitytojams geriausią įmanomą patirtį, o tada darydami ją dar geresnę tiems, kurie gali gauti naudos, galite turėti geriausią iš visų pasaulių. Laipsniškas tobulinimas yra tik vienas iš pagrindinių geros prieinamumo ir naudojimo praktikos komponentų.
