Grakštus Skilimo

Išversta su https://webtips.dan.info/graceful.html

PATARIMAS: nieko blogo, naudojant visus naujausius varpai ir švilpukai, kad paramos malonus funkcijų naujesnių naršyklių, bet pabandykite tai daryti taip, kad vis dar leidžia vartotojams ne remti (arba sąmoningai išjungti) šias funkcijas prie savo pagrindinio turinio. Laimei, tai yra lengva padaryti, Internete, jei jums sekti dvasia kalbos ir protokolus, užuot kovojus.

“Grakštus Skilimo” yra svarbus principas, Web dizainas. Tai reiškia, kad, kai jūs įtraukėte funkcijų, skirtų pasinaudoti naujausių ir didžiausių funkcijų naujesnių naršyklių, jūs turite tai padaryti taip, kad senesnės naršyklės, ir naršyklių nuomos vartotojams išjungti tam tikros savybės, gali “žingsnis į apačią” metodas, kuris vis dar leidžia patekti į pagrindinį svetainės turinį, nors gal ne toks malonus išvaizda.

Beveik kiekviena nauja funkcija pridėti prie Interneto buvo padaryta taip, kad būtų galima grakštus skilimo, pradedant nuo to, kad <IMG> žymoje pridėti grafika anksčiau visi-tekstas, Interneto, kurio sudėtyje yra ALT atributas leidžia jums sukurti tekstą alternatyva nongraphical naršyklių.

PASTABA: Tai būtų buvę dar daugiau, grakštus, jeigu IMG tag buvo apibrėžta kaip konteineris elementas, su alternatyvaus turinio tarp <IMG> ir </IMG>. Tai sukėlė alternatyvių turinį, kuris bus naudojamas automatiškai senesnių naršyklių, kad nesupratau, IMG, taip pat leidimų išdavimo šį turinį, kurį norite įtraukti žymėjimo žymomis, kažką, kad nėra įmanoma, ALT atributas. Tačiau dabar vanduo po tiltu.

Naujesnių konstruoja kaip <APPLET> ir <OBJECT> leiskite jums pateikti grakštus skilimo taikant alternatyvius turinį tarp atidarymo ir uždarymo gaires elementas. Nieko tarp <APPLET> ir </APPLET> (išskyrus parametrus, programa pati) bus ignoruojami Java-remti naršyklėje Java yra įjungta, bet bus naudojamas vietoje programėlę, kurią naršyklę, kuri nesupranta, Java arba yra neįgalūs. Tai leidžia svetainės kūrėjas pateikti alternatyvius statinio nuotraukų, tekstas arba nuorodos pakeisti informaciją, pateiktą interaktyvią formą, kad vartotojai remti jį.

Štai pavyzdys programėlę koduojami už grakštus skilimo:

<APPLET CODE="WaveEffect" align=center border=0 codebase="http://www.example.net/applets/" width=200 height=200">
<PARAM NAME=image VALUE="enternow.gif">
<PARAM NAME=HREF VALUE="home.html">
<A HREF="home.html"><IMG SRC="enternow.gif" width=200 height=200 alt="Enter my site now."></A>
</APPLET>

Java-remti naudotojas matys dėl programėlę “WaveEffect”, kurį turbūt būtų rodomos grafinės animacinis bangų poveikio, ir pateikti būdą, kaip patekti į susijęs URL pateikta “HREF” parametras. Bet ne- “Java” vartotojas turės ne būdas pamatyti tai, kas turėjo būti ten, ar vis tolyn į svetainę, jei tai buvo tik navigacijos technika, išskyrus alternatyvių turinį. Šis kiekis sudaro normalus statinio IMG tag pristatyti patį grafikos ne animacinis būdu, nuorodos į tą patį puslapį programėlės norėčiau vartotojas, eikite į. Ir, jei tekstas naršyklių, dar kitą lygį, grakštus skilimo teikia ALT tekstą su nuotrauka.

Kai kuriais atvejais, kai yra keletas skirtingų būdų, kaip daryti tą patį poveikį, ir naršyklių remti vienas ar kitas iš jų yra šiek tiek skiriasi, jūs galite pasiekti maksimalų suderinamumą, turintys kelių lygių lizdinė contstructs, kad gali būti grakščiai nualintos, kaip APPLET per EMBED per OBJECT.

Taip pat yra keletas specialių žymų, kurios leidžia įtraukti turinį, kuris naudojamas tik tada, kai specialios funkcijos neveikia, ar išjungtas. Pavyzdžiui, NOSCRIPT elementai rodyti tik tada, kai JavaScript nepagrįstas arba išjungta. Tai gali būti naudinga numatyti alternatyvius navigacijos tose vietose, kur pagrindinės kontrolės priemonės yra įgyvendintos JavaScript. Be to, NOEMBED elementai yra naudojami tik tada, kai EMBED nepalaikomas.

Tai trunka tik šiek tiek daugiau darbo padaryti, tai teisingai, ir priduria, labai prieinamumą, lankstumą ir paieškos variklio indexability puslapius.

Grakščiai Žeminantį JavaScript Langų

Bendras poveikis naudojama daug puslapių yra susijęs dokumentas, kuris pasirodo kaip mažas JavaScript sukurta iššokantį langą. Jei naudojate šiuo klausimu, tai turėtų būti blogai, jei ne visi, nes jis gali būti erzina, kad daug vartotojų. Tačiau yra atvejų, kai tai naudinga, pavyzdžiui, popping, pamatinė medžiaga padėti kuo nors užpildyti internetinę formą, be to, palikti tinklalapį su forma (ir galbūt negalės grįžti, jei jis baigiasi iš podėlio, prarasti duomenys, jie jau iš dalies įvestas).

Dažnai, kūrėjai bus padaryti su javascript: URL. Tai palieka daug geresnės sąlygos grakštus skilimo, nes ne JavaScript įjungtas naršyklės nežinote, ką daryti su tokia nuoroda, visais, ir bus arba nieko nedaryti, arba gaminti klaida. Taip pat, javascript: URL: argi tikrai standartus atitinkančių; aš nežinau, bet formalios specifikacijos šis statyti, ir jie dažnai yra ženklų, neturi teisės įtraukti (unescaped) URL, pagal specifikacijas (pvz., tarpų).

Laimei, ten geriau. Vietoj <A HREF=”javascript:YourPopupFunction(‘somefile.html’)”> naudokite <A HREF=”somefile.html” onClick=”YourPopupFunction(‘somefile.html’); return false”>. (Aš manau, jūs nustatėte JavaScript funkcija YourPopupFunction kažkur į dokumentą.) Į onClick požymis yra kodas, kad būtų įvykdytas (dėl paramos naršyklių), kai esančią nuorodą paspausti, ir pabaiga, return false naršyklėje sustabdyti po tai (o ne vyksta, atlikite normalus hipersaitą). Taigi, ji turi tą patį poveikį, kaip “javascript”: nuorodą. (Atkreipkite dėmesį, kad kodas onClick nepavyksta paleisti “javascript:”, nes tai ne forma URL.) Bet ne-JavaScript leido naršyklėmis, onClick yra ignoruojami ir įprastos nuorodos yra laikomasi. Taigi, visi vartotojai gauna žr. dokumentą, esate susieti su.

PASTABA: Nuo rašyti pirmiau, aš sužinojau, kad tam tikrų senų naršyklių anksti taikymų JavaScript nepalaiko return false teisingai ir galų gale padaryti tiek pasirodantis ir “paprasto” nuorodą. Jūs galite išvengti naudodami <A HREF=”somefile.html” target=”somename” onClick=”newwin = window.open(”, ‘somename’, ‘width=150,height=150,resizable=1’);”>, kuris atidaro tuščią langą pavadintas “somename” ir tada leidžia nuolatinė nuoroda į tikslą. Ne- JavaScript naršyklių bus tiesiog atidaryti naują reguliariai langas, pavadintas “somename”, ar dar ignoruoti tikslą ir atidaryti naują puslapį į pradinį langą. Tačiau, net daugiau, neseniai, radau, kad Mozilla naršyklės, kai sukonfigūruotas taip, kad ignoruoti bando atidaryti naujus langus, bus tokiu atveju atidarykite iššokantį langą, bet tada atidaryti nuorodą paskirties pradinio lango, paliekant iššokantis langas veltui atidaryti. Taigi, visų dalykų laikomi, ankstesniame pavyzdyje kodas yra, tikriausiai, geriausias.

Šie metodai taip pat gali būti naudojami ir kitais atvejais, jeigu pageidaujate nuorodą įvykdyti JavaScript kodą, pavyzdžiui, nuorodą mimicing naršyklės “Back” mygtuką, su history.back(). Tačiau gerai pagalvokite, ar jums tikrai reikia naudoti tokia funkcija, vartotojai gali būti supainioti nuorodos, kad padaryti dalykų, pavyzdžiui, grįžti į savo istoriją, o ne pereiti prie kito puslapio nuorodos, paprastai padaryti.

PATARIMAS: Visada naudokite prasmingą HREF atributas jūsų nuorodos, o ne “dummy”, net jei pagrindinis ryšys yra sukelti scenarijų.

Visomis priemonėmis, nereikia naudoti deja siaučiantis technika priėmimo hipersaitus eiti į “manekenas” HREF reikšmė”#”, “aš nesu įsitikinęs, kas išrado, kad, bet, atrodo, buvo įgyvendinami tokiu būdu, kai kurie kūrimo įrankius, kurie sukuria ryšius su išgalvotas JavaScript, ir imitavo iš ten visokiais svetainių, net kai kurie vertus-koduojami. Tai bloga idėja, kaip aš parodžiau aukščiau, jums turėtų padaryti nuorodą nuoroda kažką prasmingo, kuris veiks net ir tada, kai išjungtas JavaScript, ir, be to, nuo “#” yra neapibrėžta kaip URL nuoroda, tai aiškina įvairios naršyklių versijos, nesuderinamas būdais, ir gali sukelti pereiti į viršų arba į apačią, dabartinės puslapyje arba pridėti nenaudingas papildomas puslapis, nuoroda į naršyklės sesijos istorijos. Bent jau, jei jums reikia naudoti tokio manekeno HREF, įsitikinkite, kad baigti jūsų JavaScript komandų eilutę su “return false”, skatinančią naršyklę bando sekti manekeno nuorodą.

Grakščiai Žeminantį Meniu Perkėlimų

Kitas populiarus poveikis yra turėti grafinę navigacijos meniu ar “perkėlimo poveikis”, kai vartotojas pereina jo/jos pele elementus, pvz., “apšvietimo” arba “stumia žemyn” mygtukas, kuris yra dabartinės dėmesio, arba nurodant daugiau informacijos apie šiuo metu-pasirinktos prekės padėti vartotojui spręsti, ar sekite nuorodą.

Yra “subtili” ir “ne-grakštus” būdų, kaip tai padaryti. “Ne grakštus” būdai gali sukelti navigacijos, nepavyks visiškai vartotojams, kurie nepalaiko (arba išjungėte) tokių dalykų, kaip Java, JavaScript, arba Shockwave (priklausomai nuo to, kaip virtimo yra įgyvendinamas). Kita vertus, “grakštus” įgyvendinimo palieka svetainę visiškai laivybai net ir “žemiausio bendro vardiklio” naršykles, o pridedant papildomus priedus tiems, kurie juos remti.

Mėginio kodas grakščiai-žeminantį rollover efektas yra mažesnis. Tačiau, daugiau nei mokymosi specifinį kodą, jums reikia sužinoti, bendrasis požiūris už šio ir kitų grakščiai-žeminantį metodai, Interneto svetainių kūrimas. Tai yra naudoti tinkamą, logišką struktūrą, su paprasta, plačiai remiama HTML konstruoja, ir tada pridėti “varpai ir švilpukai”, kaip pasirenkami priedai, kurie gali būti ignoruojami ne remti naršyklių. Priešingai požiūrį, kurį sukuria ne prieinamose vietose, yra praleisti “garsu, logiška, paprasta” etape ir įgyvendinti norimą poveikį tiesiogiai į kai kurių pažangių kalbos (Java, Shockwave ir kt.), baigiant kodą, kad nėra net yra “paprastas” HTML nuorodą, kad naršyklės gali sekti be veikia “programėlę”, “script”, arba “plug-in”. Tada, jei tokie autoriai nuspręsti, kaip pavėluotai atėjusi mintis, kad jiems reikia paramos “aiškiau pasakyti, net” naršyklės, jie galų gale klijuoti bjaurus nustatyti “alternatyva” teksto nuorodas žemiau, kad “fancy” navigacija, kuri nebūtų reikalingi, jei jie sukūrė svetainę, grakščių būdu į pirmąją vietą.

Štai “grakštus” virtimo kodas: (Pastaba: šiame pavyzdyje “normaliai” versijas navigacijos mygtukai turi būti pateikti item1_reg.gif, item2_reg.gif, nors “pelės” versijos yra item1_over.gif ir kt. Visi vaizdai turi būti dedamas į pakatalogį, pavadintas gfx/ po katalogas puslapyje, ir nuotraukos visos dydžio 250 x 50 pikselių. Žinoma, galite pakeisti, bet tai, kaip reikia savo svetainėje.


<html>
<head>
<title>Sample Rollover Page</title>
<script language="JavaScript" type="text/javascript">
<!-- hide this script from non-javascript-enabled browsers
if (document.images) {
item1_reg = new Image(250, 50); item1_reg.src = 'gfx/item1_reg.gif';
item1_over = new Image(250, 50); item1_over.src = 'gfx/item1_over.gif';
item2_reg = new Image(250, 50); item2_reg.src = 'gfx/item2_reg.gif';
item2_over = new Image(250, 50); item2_over.src = 'gfx/item2_over.gif';
item3_reg = new Image(250, 50); item3_reg.src = 'gfx/item3_reg.gif';
item3_over = new Image(250, 50); item3_over.src = 'gfx/item3_over.gif';
item4_reg = new Image(250, 50); item4_reg.src = 'gfx/item4_reg.gif';
item4_over = new Image(250, 50); item4_over.src = 'gfx/item4_over.gif';
}
function rollover(id,name){
if (document.images) {document.images[id].src=eval(name+".src"); }
}
// stop hiding -->
</script>
<META http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>

<P ALIGN=CENTER>
<a href=”item1/” onmouseout=”rollover(‘item1′,’item1_reg’);return false;” onmouseover=”rollover(‘item1′,’item1_over’);return false;”><img name=”item1″ src=”gfx/item1_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 1]”></a>
<a href=”item2/” onmouseout=”rollover(‘item2′,’item2_reg’);return false;” onmouseover=”rollover(‘item2′,’item2_over’);return false;”><img name=”item2″ src=”gfx/item2_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 2]”></a>
<a href=”item3/” onmouseout=”rollover(‘item3′,’item3_reg’);return false;” onmouseover=”rollover(‘item3′,’item3_over’);return false;”><img name=”item3″ src=”gfx/item3_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 3]”></a>
<a href=”item4/” onmouseout=”rollover(‘item4′,’item4_reg’);return false;” onmouseover=”rollover(‘item4′,’item4_over’);return false;”><img name=”item4″ src=”gfx/item4_reg.gif” width=”250″ height=”50″ border=”0″ alt=”[Item 4]”></a>
</P>

</body>
</html>

Pastaba: “jei (dokumentas.vaizdai)”, kuris užtikrina, kad tik naudodami naršyklės versijas, JavaScript, kad galite tvarkyti atvaizdus (anksčiausiai taikymus, negalėjau) jį išbandyti, išvengti klaidų. Ir atminkite, kad navigacijos vaizdai ALT atributų, kurių sudėtyje yra meniu punktas tekstas (keisti “Punktas 1”, “Punktas 2” ir kt. daugiau prasmingų vardų, atsižvelgiant į svetainės skiltis), taip, kad net tekstas-tik naršyklių vartotojo vis tiek gali naršyti. Ir taip, aš žinau, jūs galite padaryti, virtimo poveikį, net daugiau grakščiai, naudojant cascading style sheets, bet tai gana senas puslapis; kol aš didžiulį perrašyti visą šią svetainę, ji turės tam pakankamai pasenusių daiktų.

Jei esate nuomą kai kurie redaktorius ar utility programa kurti “virtimo poveikis” už jus, įsitikinkite, kad ji naudojant grakščiai-žeminantį technika, tokių kaip šis, ir įsitikinkite, kad jūs įdėti tinkamas ALT atributų vaizdus (ranka, jei būtina, jei programa nesugeba duoti jums, kaip tai padaryti).

Kliento ir Serverio Formos

Jei turite forma, kuri nėra naudinga, ką reiškia JavaScript funkcijas, tai dar galima ji galėtų grakščiai degraduoja, vartotojai, kurie neturi JavaScript, jei jūs įsitikinkite, kad jis pateiktų serverio forma, kuri atlieka tas pačias funkcijas, nors ir ne taip efektyviai, kaip tai gali būti padaryta kliento pusėje. Pvz., Interneto puslapį, kuriame vartotojas gali įvesti savo santaupų suma per metus ir tikėtasi, palūkanų ar dividendų normą, derlius ir sužinoti, kiek santaupų jie turi išeinant į pensiją, gali būti padaryta su JavaScript — tai sukelia greitą skaičiavimo, nereikalaujant nieko, teikiamos serverio, bet neveikia ne visiems vartotojams su išjungtas JavaScript. Kad gali būti lengvai išspręsta, turintys pateikti veiksmų (nesant JavaScript) eiti prie serverio scenarijų, kuris atlieka tą patį skaičiavimus. JavaScript “pateikti” funkcija gali baigtis “grįžti klaidingas”, siekiant užkirsti kelią serverio scenarijų iš aktyvavimas, kai ji nėra reikalinga.

Jei jūsų forma siekiama pateikti į serverį, bet vis dar norite naudoti JavaScript funkcijas, pvz., patvirtinti arba ištaisyti įvesties prieš pateikiant, tada jūs turėtumėte kartoti tą patį tvirtinimo ir koregavimo veiksmus serverio scenarijų taip, kad jos nėra praleidžiami, jeigu nėra įgalinti JavaScript arba prieinama. Tai yra svarbu, saugumo tikslais, bet kokiu atveju, kaip kenksminga įsilaužėlis gali sukurti versiją savo forma, kuri praleidžia JavaScript patvirtinimo, kad bandymas įvesti netikrą duomenis į savo programą, todėl ji turi būti pasirengę ekrane iš tokių dalykų. Kai kurie žmonės dėl naujienų paklausti klaidingą klausimą, ir sako: “Kaip aš jėga mano forma nėra rodomi, ar pateikti vartotojams su JavaScript” neįgalūs, nes mano JavaScript patvirtinimo svarbu, kad jų tinkamą veikimą?” Galite pabandyti tai padaryti mygtuką pateikti, ar visą formą, būti produkcija JavaScript, o ne reguliariai HTML, todėl ji nėra rodomi ne visi be kliento-side scripting. Tai gali būti lengvai nugalėjo kenkėjiškų įsilaužėlių, kurie gali peržiūrėti jūsų šaltinis ir rekonstruoti formos su ne-JavaScript pateikimo mygtukas, bet būtų kelti prieinamumo problema daugiau įprastų vartotojų. Geriau dizaino jūsų serverio scenarijų taip, kad jie dirba gerai, su arba be pagalbos JavaScript.

Klaidingas

Jei jūs gaunate į HTML diskusijos dėl naujienų, tikriausiai pamatysite kas nors teigia, kad “grakštus skilimo” tikrai reiškia svetainėse, paprastas, nuobodus, ir “žemiausio bendro vardiklio.” Tai toli nuo tiesos. Žmonės, kurie sako, kad jis arba nėra tikrai suprasti, grakštus skilimo, arba yra tiesiog bando padaryti pigūs kadrų prieš vadinamąjį “puristams”, o ne aptarti Web kūrimo, racionaliai. Iš tikrųjų, grakštus skilimo nereikalauja, kad jums nereikia naudoti nieko išgalvotas, ar gražus ieškote, arba, kad jūs “autorius dėl pasenusios naršyklės.” Ji tiesiog reikia suprasti, struktūrą, visą informaciją, jūs naudojate, ir reikia žinoti ir tinkamai naudoti built-in funkcijos, kurios leidžia dangos alternatyvių turinį, kuris yra prieinamas vartotojams, kurie negali arba negali naudoti išgalvotas stuff.

Grakštus Skilimo vs Progressive Enhancement

Ten buvo kai kurie diskusijų pastaruoju metu dėl Interneto svetainių kūrimas svetainių apie skirtumą mąstyseną tarp “grakštus skilimo” ir “progressive enhancement”, kuris iš tikrųjų yra gana panašios sąvokos, tačiau pažvelgti iš įvairių pusių. Vikipedijoje yra straipsnis apie progressive enhancement, ir ten buvo esė tema. Pagrindinis skirtumas yra tas, kad “progressive enhancement” galite pradėti su paprasta, logiška, suderinama rinkinys pažymėtas-iki turinį, tada sluoksnis patobulintas funkcijas, už šiuolaikinių naršyklių ant jo, o “grakštus skilimo” prasideda su pilnai, pažangių svetainėje, pilnas varpai ir švilpukai, ir daro, kad ji taip pat turi turinį, kuris gali būti pasiekiamas, jei išgalvotas funkcijos neveikia konkrečiam vartotojui. Pagal šį standartą, mąstyseną aš pasisakė už telpa daugiau PE nei GD, nors aš GD terminologija, nes kitai kadencijai nebuvo išrastas metu. Bet kuriuo atveju, jei padaryta meistriškai, apgalvotai, ir cluefully, ir metodai turėtų būti labai panašios svetainės.

Salė Gėda

Padaryti jūsų svetainę geriau žiūri į kitas svetaines, kurie rodo, pavyzdį, ką reikia daryti!

PASTABA: įtraukti svetainę mano “Salėje Gėda” nuorodos neturėtų būti suprantamas, kaip bet kokios rūšies asmens išpuolio svetainės kūrėjas, kuris gali būti tikrai puikus žmogus, ar netgi ataka, susijusią su svetaine, kaip visuma, kurių šaltinis gali būti tikrai daug informacijos ir/ar pramogų. O, tai tiesiog pažymėkite ypatumai (tyčia ar netyčia) iš svetainių, kurios sukelia problemas, kurios buvo galima išvengti, geriau dizainas. Jei pastebėsite vieną iš savo svetainių yra susijęs čia, nereikia gauti įžeidė; pagerinti savo svetainę, kad aš turiu imtis žemyn nuorodą!

  • Į Leicestershire & Rutland Šachmatų Asociacija įgyvendino savo svetainę taip, kad pagrindinis puslapis yra palaidotas giliau, nei numatytoji indeksas, kuris peradresuoja į realią vietą pagrindiniame puslapyje. Jie naudojami siekiant padaryti su meta-nukreipti ir atsarginė paprasto HTML nuoroda, bet po perdaryti (kodėl redesigns beveik visada degraduoja prieinamumas palyginti su tuo, kas buvo prieš?) jie naudoja numatytąjį indeksas, kurį sudaro vien JavaScript nukreipti, kad ne- “Javascript” vartotojams gauti tik tuščią puslapį.
  • Hira naudojama teikti “Flash” ir “Ne Flash” versiją, jo tituliniame puslapyje, bet “Ne Flash” versiją, vis dar turėjo “Flash”! Jis tiesiog praleisti papildomą “intro” puslapį, kuris turi dar daugiau Flash. Dabar jis nėra padaryti, kad idiotizmas, bet ji vis dar turi Flash intro, kai pasirinkimo praleisti jį yra integruotas Flash pati, reiškia, kad ne-Flash-remti naršyklių bus gauti tik tuščią puslapį su ne būdas pereiti į svetainę. Intro groja erzina tema muzikos, nuolat, jokiu būdu, ją sustabdyti.
Nuorodos

 

Grįžti į pagrindinį

Leave a Reply

Your email address will not be published. Required fields are marked *