Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A fokozatos fejlesztés egy olyan technika, amely segít biztosítani a szoftver robusztusságát és hozzáférhetőségét. Ha követi, biztosíthatja, hogy a lehető legtöbb ember tudja használni webhelyét vagy alkalmazását.

Kezdje a webdizájn minimálisan életképes verziójával, és gondoskodjon arról, hogy szükség szerint működjön. Ezután adjon extra funkciókat és stílust, hogy a több képességű böngésző is profitálhasson.

Hogyan működik a progresszív javítás?

Rendkívül elosztott természete miatt a webnek mindig is sokféle eszközt kellett támogatnia. Az 1970-es évek alapvető számítógépeitől a modern asztali számítógépekig, táblagépekig és televíziókig a webhelyek hosszú utat tettek meg.

Mindennek a középpontjában a HTML áll. Mivel ez egy „megbocsátó” nyelv, a böngészők úgy jelenítik meg a HTML-t, ahogyan megértik. Általában figyelmen kívül hagynak mindent, amit nem támogatnak.

instagram viewer

Ez hasznos lehet a fejlesztő szemszögéből, de problémákat okozhat az olvasóknak. Ha webhelye üres oldalt jelenít meg, amikor a JavaScript nem fut, a felhasználóknak nincs más választásuk, mint elhagyni. A fokozatos fejlesztés arra ösztönzi az alapvető tartalmat, hogy mindenki számára elérhetővé tegye az alapvető tartalmat, majd javítsa a tartalmat megfelelő technológiák, például CSS és JavaScript segítségével.

Progresszív megközelítés a stílushoz

A CSS a web stíluslapnyelve amelyek segítségével testreszabhatja a színeket, betűtípusokat, elrendezésekés az oldalai sok más vizuális aspektusa. Használhatja tartalmai alapértelmezett megjelenésének javítására, de ez nem jelenti azt, hogy először is ne kellene megfelelően felépítenie a tartalmat.

Vegyünk például egy menüsort; így strukturálhatod:

<nav>
<a href="/register">Regisztráció</a>
<a href="/login">Belépés</a>
<a href="/about">rólunk</a>
<a href="/contact">kapcsolatba lépni</a>
</nav>

Egy vízszintes menü megjelenítéséhez, ahol minden hivatkozás kissé gombnak tűnik, a következő CSS segítségével stílusozhatja:

nav a {
szöveg-dekoráció: nincs;
kijelző: inline-block;
párnázás: 0.5em 1em;
keret: 1 képpont tömör;
határsugár: 8 képpont;
margó-jobb: 1em;
}

Amikor a böngésző ezt teljesen megjeleníti, a következőképpen kell kinéznie:

Ha azonban a CSS nem érhető el, a menü a következőképpen fog megjelenni:

Figyelje meg, hogy ez nem úgy néz ki, mint egy menü, és nem túl könnyű használni, mivel a hivatkozások egybeolvadnak.

Használhat egy alternatív szerkezetet a tervezés robusztusabbá tételéhez:

<nav>
<ul>
<li><a href="/register">Regisztráció</a></li>
<li><a href="/login">Belépés</a></li>
<li><a href="/about">rólunk</a></li>
<li><a href="/contact">kapcsolatba lépni</a></li>
</ul>
</nav>

Mivel ez a jelölés rendezetlen listaelemet használ, sokkal jobban használható CSS ​​hiányában:

Vegye figyelembe, hogy mennyivel egyszerűbb gyorsan átvizsgálni és megérteni ezeket a hivatkozásokat, még a böngésző alapértelmezett stílusával is. Ehhez a megközelítéshez egy kicsit több CSS-t kell hozzáadnia az alapértelmezett listastílusok felülbírálásához:

navli { kijelző: Sorban; }

Annak ellenére, hogy a végső szerkezet és stílus bonyolultabb, és a legtöbb felhasználónak engedélyezve van a CSS, ez a megközelítés robusztusabb. Barátságosabb lesz a képernyőolvasók felhasználóinak és terminál alapú böngészők.

A funkcionalitás fokozatos bevezetése

A fokozatos fejlesztés a legfontosabb, ha egy webhely vagy alkalmazás működéséről van szó. Az alapelv kimondja, hogy akármi is legyen, webhelyének a lehető legjobban kell működnie.

A gyakorlatban ez jellemzően a JavaScriptre vonatkozik. Ha bevezeti az ügyféloldali viselkedést, akkor a funkciókat egy olyan webhely vagy alkalmazás tetejére kell rétegeznie, amely már anélkül is működik.

Nagyon gyakori eset az eseménykezelés. Képzeljen el egy oldalt, amely igény szerint további tartalmat tölt be. Ez lehet manuális végtelen görgetés, megjegyzésbeágyazás vagy hasonló.

<test>
<!--... -->
<gomb onclick="load_more();">
Betöltés Több
</button>
<!--... -->
</body>

A gomb kattintásra attribútum JavaScript kódot tartalmaz, amely akkor fut le, amikor valaki rákattint a gombra. Ha azonban a JavaScript nem érhető el, ez a gomb nem tesz semmit. A felhasználó rákattint erre a gombra, és nincs visszajelzése, és fogalma sincs arról, hogy mi történik. Egy sokkal jobb megközelítés progresszív fejlesztést használ:

<test>
<!--... -->
<egy id="p2" href="/page/2">2. oldal</a>

<forgatókönyv>
funkcióload_more() { konzol.log("!"); }

/* Link cseréje gombra */
var link = dokumentum.getElementById("p2");
var gomb = dokumentum.createElement("button");
button.innerText = "Load More";
button.addEventListener("kattintson", load_more);
dokumentum.test.insertBefore(gomb, link);
link.parentNode.removeChild(link);
</script>
</body>

Ez a kód az alaphivatkozást eseménykezelő gombbal alakítja át. Ha bevezeti a JavaScript-függőséget magát a JavaScriptet használva, biztos lehet benne, hogy működni fog. És van egy funkcionális alapértelmezett viselkedés, amely működik, a szabványos hivatkozás formájában /page/2.

Valóban szükséges a fokozatos fejlesztés?

Mindenki CSS-sel és JavaScripttel használ böngészőt, akkor miért foglalkozzunk olyan helyzetekkel, amelyek fel nem merülnek? Nos, több oka is van annak, hogy át kell vennie a fokozatos fejlesztés bevált gyakorlatát.

  1. Először is, nem mindenki használ böngészőt, aki felkeresi webhelyét. Egyes látogatók robotok, például keresőmotor-indexelők, és előfordulhat, hogy egyáltalán nem értik a CSS-t vagy a JavaScriptet.
  2. Másodszor, nem minden ember, aki felkeresi webhelyét, használ CSS-t és JavaScriptet tartalmazó böngészőt. Egyes látogatók terminálalapú böngészőt használhatnak, amely egyszerű szöveget jelenít meg minimális formázással. Mások képernyőolvasót használhatnak.
  3. Harmadszor, még ha egy böngésző támogatja is a CSS-t és a JavaScriptet, a dolgok rosszul mennek. Megszakadt link vagy rossz hálózati kapcsolat hiányzó .css vagy .js fájlt okozhat. A JavaScript hibája azt okozhatja, hogy más kód egyáltalán nem fut.
  4. Végül egyes látogatók aktívan dönthetnek úgy, hogy letiltják a CSS-t vagy a JavaScriptet. Ezt megtehetik adatvédelmi aggályaiból, vagy azért, mert lassú vagy fizetős kapcsolaton vannak.

A progresszív gondolkodásmód csodákat tesz

A fokozatos fejlesztés mindenekelőtt a tartalom-első megközelítés elfogadására ösztönzi. A tartalom a király, ezért a szövegének és képeinek mindig elérhetőnek kell lennie mindenki számára, függetlenül attól, hogy az Ön webhelyét felkeresi.

Ha minden olvasónak a lehető legjobb élményt nyújtja, majd még jobbá teszi azok számára, akik hasznot húzhatnak, akkor a világ legjobbja lehet. A fokozatos fejlesztés csak az egyik kulcsfontosságú eleme a megfelelő hozzáférhetőségi és használhatósági gyakorlatnak.