Progresīvā uzlabošana ir paņēmiens, kas palīdz nodrošināt jūsu programmatūras stabilitāti un pieejamību. Sekojot tai, jūs varat nodrošināt, ka pēc iespējas vairāk cilvēku varēs izmantot jūsu vietni vai lietotni.
Sāciet ar minimāli dzīvotspējīgu tīmekļa dizaina versiju un nodrošiniet, lai tā darbotos pēc vajadzības. Pēc tam izmantojiet papildu funkcionalitāti un stilu, lai spējīgākas pārlūkprogrammas varētu gūt labumu.
Kā darbojas progresīvā uzlabošana?
Tā ārkārtīgi izplatītā rakstura dēļ tīmeklim vienmēr ir bijis jāatbalsta milzīgs ierīču klāsts. No 70. gadu pamata datoriem līdz moderniem galddatoriem, planšetdatoriem un televizoriem tīmekļa vietnes ir gājušas garu ceļu.
Visa pamatā ir HTML. Tā kā tā ir “piedodoša” valoda, pārlūkprogrammas parādīs HTML tik labi, kā tās to saprot. Parasti viņi ignorēs visu, ko viņi neatbalsta.
Tas var būt noderīgi no izstrādātāja viedokļa, taču tas var radīt problēmas lasītājiem. Ja jūsu vietnē tiek rādīta tukša lapa, kad JavaScript nevar palaist, lietotājiem nav citas izvēles, kā vien to pamest. Progresīvā uzlabošana mudina nodrošināt pamatsaturu ikvienam, kurš tam var piekļūt, un pēc tam uzlabot šo saturu, izmantojot atbilstošas tehnoloģijas, piemēram, CSS un JavaScript.
Progresīva pieeja stila veidošanai
CSS ir tīmekļa stila lapas valoda ko varat izmantot, lai pielāgotu krāsas, fontus, izkārtojumi, un daudzi citi jūsu lapu vizuālie aspekti. Varat to izmantot, lai uzlabotu sava satura noklusējuma izskatu, taču tas nenozīmē, ka vispirms nevajadzētu pareizi strukturēt saturu.
Piemēram, izvēlņu joslu; jūs varētu to strukturēt šādi:
<nav>
<a href="/register">reģistrēties</a>
<a href="/login">Pieslēgties</a>
<a href="/about">par mums</a>
<a href="/contact">kontaktu</a>
</nav>Lai parādītu horizontālu izvēlni, kurā katra saite izskatās kā poga, varat to veidot, izmantojot šo CSS:
nav a {
teksta noformējums: nav;
displejs: inline-block;
polsterējums: 00,5 em 1em;
apmale: 1px cieta;
apmales rādiuss: 8 pikseļi;
mala-labā: 1em;
}Kad pārlūkprogramma to pilnībā atveido, tam vajadzētu izskatīties šādi:
Tomēr, ja CSS nav pieejams, izvēlne tiks parādīta šādi:
Ievērojiet, kā tas neizskatās pēc izvēlnes, un to nav ļoti viegli izmantot, jo saites saplūst vienā.
Varat izmantot alternatīvu struktūru, lai padarītu dizainu izturīgāku:
<nav>
<ul>
<li><a href="/register">reģistrēties</a></li>
<li><a href="/login">Pieslēgties</a></li>
<li><a href="/about">par mums</a></li>
<li><a href="/contact">kontaktu</a></li>
</ul>
</nav>Tā kā šajā marķējumā tiek izmantots nesakārtots saraksta elements, tas ir daudz ērtāk lietojams, ja nav CSS:
Ņemiet vērā, cik daudz vienkāršāk ir ātri skenēt un saprast šīs saites pat ar pārlūkprogrammas noklusējuma stilu. Šai pieejai būs jāpievieno nedaudz vairāk CSS, lai ignorētu noklusējuma sarakstu stilus:
navli { displejs: rindā; }Lai gan galīgā struktūra un stils ir sarežģītāki un lielākajai daļai lietotāju būs iespējots CSS, šī pieeja ir izturīgāka. Tas būs draudzīgāks ekrāna lasītāju lietotājiem un uz termināļiem balstītas pārlūkprogrammas.
Pakāpeniski ieviešam funkcionalitāti
Pakāpeniska uzlabošana ir vissvarīgākā, ja runa ir par vietnes vai lietotnes darbību. Princips nosaka, ka neatkarīgi no tā, kas notiek, jūsu vietnei ir jādarbojas pēc iespējas labāk.
Praksē tas parasti attiecas uz JavaScript. Ja ieviešat klienta puses uzvedību, tai ir jānovieto funkcionalitāte virs vietnes vai lietojumprogrammas, kas jau darbojas bez tās.
Ļoti izplatīts gadījums ir notikumu apstrāde. Iedomājieties lapu, kurā pēc pieprasījuma tiek ielādēts papildu saturs. Tas var būt manuāls bezgalīgs ritinājums, komentāru iegulšana vai tamlīdzīgi.
<ķermeni>
<!--... -->
<poga onclick="Ielādēt vairāk();">
Ielādēt Vairāk
</button>
<!--... -->
</body>Pogas onclick atribūts satur JavaScript kodu, kas darbosies, kad kāds noklikšķinās uz pogas. Tomēr, ja JavaScript nav pieejams, šī poga neko nedarīs. Lietotājs noklikšķinās uz šīs pogas bez atsauksmēm un ne jausmas par to, kas notiek nepareizi. Daudz labāka pieeja izmanto pakāpenisku uzlabošanu:
<ķermeni>
<!--... -->
<id ="p2" href="/page/2">2. lapa</a><skripts>
funkcijuIelādēt vairāk() { konsole.log("!"); }
/* Aizstāt saiti ar pogu */
var saite = dokumentu.getElementById("p2");
var poga = dokumentu.createElement("poga");
poga.innerText = "Ielādēt vairāk";
button.addEventListener("klikšķis", Ielādēt vairāk);
dokumentu.body.insertBefore(pogu, saite);
saite.parentNode.removeChild(saite);
</script>
</body>
Šis kods pārveido pamata saiti par pogu ar notikumu apstrādātāju. Ieviešot atkarību no JavaScript, izmantojot pašu JavaScript, varat būt pārliecināti, ka tas darbosies. Un ir funkcionāla noklusējuma darbība, kas darbojas standarta saites veidā uz /page/2.
Vai progresīva uzlabošana patiešām ir nepieciešama?
Ikviens izmanto pārlūkprogrammas ar CSS un JavaScript, tad kāpēc gan rūpēties par situāciju, kas nerodas? Ir vairāki iemesli, kāpēc jums vajadzētu pieņemt progresīvās uzlabošanas labo praksi.
- Pirmkārt, ne visi, kas apmeklē jūsu vietni, izmanto pārlūkprogrammu. Daži apmeklētāji būs robotprogrammatūras, piemēram, meklētājprogrammu indeksētājs, un viņi, iespējams, vispār nesaprot CSS vai JavaScript.
- Otrkārt, ne katrs lietotājs, kas apmeklē jūsu vietni, izmantos pārlūkprogrammu ar CSS un JavaScript. Daži apmeklētāji var izmantot uz termināli balstītu pārlūkprogrammu, kas parāda vienkāršu tekstu ar minimālu formatējumu. Citi var izmantot ekrāna lasītāju.
- Treškārt, pat ja pārlūkprogramma atbalsta CSS un JavaScript, lietas noiet greizi. Bojātas saites vai slikta tīkla savienojuma dēļ var pazust .css vai .js fails. JavaScript kļūdas dēļ cits kods var nedarboties vispār.
- Visbeidzot, daži apmeklētāji var aktīvi izlemt atspējot CSS vai JavaScript. Viņi to var darīt privātuma apsvērumu dēļ vai tāpēc, ka viņi izmanto lēnu vai maksas savienojumu.
Progresīvs domāšanas veids dara brīnumus
Pats galvenais, pakāpeniska uzlabošana mudina jūs pieņemt pieeju saturam. Saturs ir galvenais, tāpēc jūsu tekstam un attēliem vienmēr jābūt pieejamiem ikvienam neatkarīgi no tā, vai viņi piekļūst jūsu vietnei.
Sniedzot visiem lasītājiem vislabāko iespējamo pieredzi un pēc tam padarot to vēl labāku tiem, kas var gūt labumu, jūs varat iegūt labāko no visām pasaulēm. Progresīvā uzlabošana ir tikai viena no galvenajām labas pieejamības un lietojamības prakses sastāvdaļām.