Dan Web Tippek: Kecses Bomlás

TIPP: Semmi rossz Nincs abban, ha az ember felhasználja a legújabb színes-szagos, hogy támogassa menő jellemzői újabb böngészők, de próbáld meg úgy, hogy még lehetővé teszi a felhasználók számára nem támogató (vagy szándékosan letiltása) ezek a funkciók eléréséhez az alapvető tartalmát. Szerencsére ezt könnyen megteheti az Interneten, ha követi a szellem a nyelvek protokollok harc helyett.

“Kecses Lebomlás” fontos elv a Web design. Ez azt jelenti, hogy, ha a funkciókat úgy tervezték, hogy kihasználják a legújabb, legnagyobb jellemzői újabb böngésző, meg kell tennie, hogy a régebbi böngészők, böngészők, hogy a felhasználók letiltása sajátos jellemzői, “mondjon le”, hogy egy módszer, ami még lehetővé teszi a hozzáférést az alapvető tartalom az oldalon, bár talán nem olyan elegáns megjelenés.

Szinte minden új funkció ki, hogy a Weben történt oly módon, hogy lehetővé teszi, kecses lebomlás, kezdve azzal a kiegészítéssel, hogy az <IMG> tag hozzáadása grafika, hogy egy korábban csak szöveges Web, amely tartalmaz egy ALT attribútum lehetővé teszi, hogy biztosítanak egy szöveges alternatíva nongraphical böngészők.

MEGJEGYZÉS: Ez lett volna még örömtelibb, ha az IMG tag határoztak meg, mint egy konténer elem, az alternatív tartalom között <IMG> és </IMG>. Ez okozott volna az alternatív tartalom alkalmazható automatikusan a régebbi böngészők nem értem, IMG, valamint lehetővé teszi ezt a tartalmat, hogy tartalmazza a jelölő címkék, valamit, ami nem lehetséges, az ALT attribútum. De ez már a múlté.

Az újabb konstrukciók, mint a <APPLET>, illetve az <OBJECT> hadd nyújt kecses lebontás segítségével az alternatív tartalom között a nyitó-záró kategória elem. Semmit között <APPLET> és </APPLET> (más, mint a paramétereket az applet is) lesz figyelmen kívül hagyni a Java-t támogató böngésző Java engedélyezve van, de használható, a hely, az applet egy böngésző, hogy nem érti, Java vagy letiltotta. Ez lehetővé teszi, hogy a webhely fejlesztő nyújt alternatív statikus kép, szöveg, vagy linkeket, hogy cserélje ki a bemutatott információkat applet formában, hogy a felhasználók támogatása.

Itt egy példa egy applet kódolt a kecses lebomlás:

Egy Java-t támogató felhasználói fogja látni az eredménye, hogy egy kisalkalmazás, “WaveEffect”, amely feltehetően igazolta volna, hogy a grafikus animált hullám hatások, amelyek a módját, hogy a hivatkozott URL-t, feltéve, hogy a “HREF” paraméter. De nem a Java felhasználó nem látja, amit ott kellett volna lennie, vagy hogy előre be az oldal, ha ez volt az egyetlen navigációs technika, kivéve az alternatív tartalmat. Ez a tartalom áll egy normális statikus IMG tag-bemutató ugyanaz a grafikus a nem-animációs módon elhelyezett linkkel hivatkozott, hogy az oldalon az applet a felhasználó. Valamint abban az esetben, ha a szöveges böngészők, még egy szint kecses lebomlás által az ALT szöveg a kép.

Egyes esetekben, amikor több különböző módon ugyanazt a hatást, a készlet böngésző támogatja egyik vagy másik őket kicsit más, lehet elérni a maximális kompatibilitási azáltal, hogy több szinten beágyazott contstructs, hogy lehet elegánsan leromlott, mint egy APPLET belül egy EMBED belül egy OBJECT.

Van még néhány speciális kategória, hogy hagyom, hogy tartalmazza a tartalom csak akkor kell használni, ha bizonyos funkciók nem érhetők el vagy tiltva. Például a NOSCRIPT elem a kijelző csak akkor, ha a JavaScript nem támogatott vagy le van tiltva. Ez hasznos lehet nyújtó alternatív navigációs a területek, ahol a fő ellenőrzések végrehajtása a JavaScript használatát. Hasonlóképpen, NOEMBED elemeket használnak, csak akkor, amikor EMBED nem támogatott.

Vesz, csak egy kicsit több munkát kell ezt helyesen, nagyban növeli, hogy az elérhetőség, rugalmasság, kereső-motor indexability az oldalak.

Kecsesen Megalázó JavaScript Popups

Egy közös effektust sok oldalt egy kapcsolódó dokumentum, hogy jön fel, mint egy kis JavaScript-létrehozott felugró ablakban. Ha használja ezt a hatást kell takarékosan, ha egyáltalán, mivel lehet bosszantó, hogy sok felhasználó. Azonban vannak esetek, ahol ez hasznos lehet, például a felbukkanó referencia anyag, hogy segítsen valaki töltse ki az űrlapot, anélkül, hogy hagyja el az oldalt a formában (esetleg nem lesz képes-hoz kap vissza, ha lejár a cache, elveszíti az adatok már részben beírni).

Gyakran előfordul, hogy a fejlesztők ezt egy javascript: URL. Ez a levél sok kívánnivalót szempontjából kecses lebomlás, mivel nem JavaScript-alapú böngészők nem tudom, mi köze van egy ilyen link, vagy nem tesz semmit, vagy készítsen egy hiba. Emellett javascript: Url-ek nem igazán szabványoknak megfelelő; nem tudom, a hivatalos specifikációk ez a konstrukció, de gyakran tartalmaznak olyan karakter, ami nem jogi, hogy tartalmazza (unescaped) az URL a specifikáció szerint (mint parkolóhely).

Szerencsére van jobb megoldás. Ahelyett, hogy <A HREF=”javascript:YourPopupFunction(‘somefile.html’)”>, használja <A HREF=”somefile.html” onClick=”YourPopupFunction(‘somefile.html’); return false”>. (Feltételezem, hogy már meghatározott, a JavaScript funkció YourPopupFunction valahol a dokumentumban.) Az onClick attribútum tartalmaz végrehajtott kód (a támogató böngészők) amikor a linkre kattintott, majd a befejezés return false okozza, hogy a böngésző ne miután ezt (ahelyett, hogy kövesse a normál hivatkozás). Így, ez pont ugyanaz a hatása, mint a javascript: link. (Megjegyzendő, hogy a kód onClick nem indul be a “javascript:” mivel ez nem a formája egy URL.) De a nem-JavaScript-alapú böngészők, az onClick figyelmen kívül hagyják, de a normális link követte. Így minden felhasználó kap, hogy a dokumentum vagy összekapcsolása.

MEGJEGYZÉS: Mivel az írás a fenti, rájöttem, hogy bizonyos régi böngészők korai implementáció a JavaScript használatát nem támogatja return false helyesen, majd a végén csinál mind a felugró a “sima” linkre. Így kerülheted el a <A HREF=”somefile.html” target=”somename” onClick=”newwin = ablak.open(“, ‘somename’, ‘width=150,height=150,resizable=1’);”>, ami megnyit egy üres ablak neve “somename” , akkor lehetővé teszi a rendszeres kapcsolat a cél. Nem JavaScript-alapú böngészők egyszerűen nyitott egy új rendszeres ablak neve “somename”, vagy más, figyelmen kívül hagyja a cél, majd nyissa meg az új oldal, az eredeti ablak. Azonban még az utóbbi időben, azt találtuk, hogy a Mozilla böngésző, amikor beállítva, hogy figyelmen kívül megkísérli megnyitni az új windows, ebben az esetben nyissa meg a felugró ablakban, de majd nyissa meg a link cél az eredeti ablak, így a felugró ablakon feleslegesen nyitva. Szóval, mindent egybevetve, az előző példa kód talán a legjobb.

Ezek a technikák is használható, egyéb esetekben, amikor szeretne egy linket végrehajtani JavaScript-kód, mint egy linket mimicing a böngésző “Vissza” gomb a történelem.vissza(). De gondold át alaposan, hogy tényleg kell használni egy ilyen funkció; a felhasználók valószínű, hogy szabad összekeverni a linkeket, hogy a dolgok, mint a történelem, ahelyett, hogy előre, hogy a másik oldal olyan linkek általában.

TIPP: Mindig használj értelmes HREF attribútum a linket, nem egy “bábu”, még akkor is, ha a fő célja, hogy a link, hogy a kiváltó forgatókönyvet.

Minden eszközzel, ne használja a sajnálatos módon elterjedt technika, hogy a hivatkozások a “bábu” HREF érték a “#”; én nem tudom, ki találta ezt ki, de úgy hajtották végre, így az egyes szerzői eszköz, amely létrehoz linkek díszes JavaScript, utánozni, onnan mindenféle oldalakon, még néhány kéz-kódolt. Ez egy rossz ötlet — én úgy láttam, hogy fent kellene, hogy a hivatkozás referencia valami értelmes, amely akkor is működik, ha le van tiltva a JavaScript, továbbá — mivel a “#” van definiálva, mint egy URL-hivatkozást, értelmezése a különböző böngésző verziók következetlen módon, talán mert egy ugrás, hogy a felső vagy az alsó részén az aktuális oldalon, vagy adjunk hozzá egy haszontalan extra oldal hivatkozást a böngésző munkamenetének történelem. Legalább, ha kell használnia ilyen buta HREF, biztos, hogy vége a JavaScript parancsot string “vissza hamis”, hogy kedvét a böngésző megpróbálja követni a hamis hivatkozásra.

Kecsesen Megalázó Menü Hosszabbítás

Egy másik népszerű hatása az, hogy egy grafikus navigációs menüben a “borulás hatása”, ha a felhasználó mozgatja a/az egeret a elemek, mint például a “világítás” vagy “lenyomja” a gombot, hogy az aktuális fókusz, vagy mutatja, hogy több információt a jelenleg kiválasztott elem, hogy segítsen a felhasználó dönt arról, hogy kövesse a linket.

Vannak “kecses”, illetve “nem elegáns” módon lehet megtenni. A “nem elegáns” módon, mert a navigációs, hogy teljesen sikertelen felhasználók számára, akik nem támogatják (vagy le van tiltva) olyan dolgok, mint a Java, JavaScript, vagy Shockwave (attól függően, hogy a rollover valósul meg). Másrészt, a “kecses” végrehajtási elhagyja az oldalt teljes mértékben hajózható még a “legkisebb közös nevező” böngészők, míg a hozzá extra tartozékok azok számára, akik támogatják őket.

Minta kód egy elegánsan-megalázó borulás hatása alatt van. Azonban több, mint a tanulás konkrét kód, meg kell tanulni az általános hozzáállás mögött, illetve más, kecsesen-megalázó technikák a webfejlesztés. Az, hogy egy hang, logikus felépítés, egyszerű, széles körben támogatott HTML elemet, majd adja hozzá a “harangok-síp”, mint opcionális kiegészítők, amelyek lehet figyelmen kívül hagyni a nem támogató böngészők. Az ezzel ellentétes magatartás, amely létrehoz, nem elérhető oldalak, hogy kihagyja a “hang, logikus, egyszerű” szakaszban szükséges a kívánt hatás közvetlenül egy speciális nyelv (Java, Shockwave, stb.), kiöntött a kód, amely nem is tartalmaz egy “sima” HTML link, hogy a böngészők lehet követni, anélkül, hogy fut a “applet”, “forgatókönyvet”, vagy a “plug-in”. Akkor, ha ezek a szerzők dönt, mint utólag, hogy támogatni kell a “egyszerűbb” böngészők, ők végül a ragasztás egy ronda sor “alternatív” szöveg linkekre, a “képzelet” navigációs, ami nem lenne szükség, ha ők tervezték a helyszínen egy kecses módon az első helyen.

Itt a “kecses” rollover kód: (Megjegyzés: ebben A példában a “normál” verzió a navigációs gombok kell helyezni, item1_reg.gif, item2_reg.gif stb. míg a “interakciót” változat item1_over.gif stb. Összes kép kell helyezni egy alkönyvtár neve gfx/ alatt a könyvtár az oldal, a képek mind méretű 250 x 50 pixel. Természetesen, bármikor módosíthatja, hogy ez szükséges a saját honlapján.
<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>

</body>
</html>

Megjegyzés: a “if (document.images)”, amely biztosítja, hogy csak a böngészők használata változata a JavaScript használatát, hogy tudja kezelni a képek (a legkorábbi megvalósítások nem) majd próbálja megelőzése hibák. Pedig, vegye figyelembe, hogy a navigációs képek ALT attribútumot tartalmazó menüpont szöveg (változás az “Item 1”, “Item 2”, stb. több értelmes neveket adott a szakaszok a helyszínen), úgy, hogy még csak szöveges böngészők a felhasználó még navigálni. Igen, tudom, hogy képes borulás hatása még inkább elegánsan segítségével cascading style sheets, de ez egy elég régi oldal; amíg én egy hatalmas újraírni az egész oldalon, akkor van néhány meglehetősen elavult cucc.

Ha hagyod, hogy egy szerkesztő vagy utility program generálja a “borulás hatása”, győződjön meg róla, hogy használja egy elegánsan-megalázó technika, mint ez, ellenőrizze, hogy megfelelő ALT attribútumot a képek (kézzel, ha szükséges, ha a program nem tudja, hogy adni a módját).

Kliens és Szerver Oldalon Formák

Ha egy formája ez hasznos dolog útján JavaScript funkciók, még mindig lehetséges, hogy lehetővé teszik, hogy kecsesen rontja a felhasználók számára, hogy nem kell a JavaScript, ha biztos benne, hogy azt állítja, hogy egy szerver oldali űrlapon, amely elvégzi ugyanazokat a funkciókat, bár nem olyan hatékonyan, mint az, hogy meg lehet csinálni a kliens oldalon. Például egy Web-oldalt, ahol a felhasználó típusa az összeg a megtakarítás évente, illetve a várható kamat vagy osztalék mértéke hozam, majd derítsd ki, hogy mennyi megtakarítást fognak után nyugdíjba lehet tenni a JavaScript — igy egy gyors számítás, anélkül, hogy bármit is be kell nyújtani egy szerver, de egyáltalán nem működik a felhasználók számára a JavaScript le van tiltva. Ez könnyen orvosolható azzal, hogy a kereset benyújtása (hiányában a JavaScript) egy szerver script végzi ugyanazt a számítások. A JavaScript “onsubmit” funkció a végén a “vissza hamis”, hogy megakadályozzák a szerver script aktiválása, ha nincs rá szükség.

Ha az űrlap célja, hogy nyújtson be egy szerverre, de továbbra is szeretné használni a JavaScript funkciók is, mint például, hogy érvényesítse, vagy megfelelő a bemeneti benyújtása előtt, akkor meg kell ismételni az azonos ellenőrzés, korrekció lépéseket a szerver forgatókönyvet úgy, hogy azok nem kihagyható, ha a JavaScript nincs engedélyezve, vagy nem állnak rendelkezésre. Ez fontos biztonsági okokból amúgy is, mint egy rosszindulatú hacker lehet, hogy hozzon létre egy változata a formában, hogy kihagyja a JavaScript érvényesítési annak érdekében, hogy megpróbálja bemenet hamis adatokat a program, ezért úgy kell elkészíteni, hogy a képernyő ki ilyen dolgokat. Néhány ember a hírcsoport kérni a rossz kérdés, “Hogyan erő a formában nem jelennek meg, vagy nem nyújt be, a felhasználók számára a JavaScript le van tiltva, mert a JavaScript érvényesítése elengedhetetlen, hogy a megfelelő műveletet?” Akkor próbálja ki azáltal, hogy a küldés gombra, vagy az egész formája, a kimeneten a JavaScript, ahelyett, hogy a rendszeres HTML, ezért nem mutatja fel, anélkül, hogy a kliens-oldali script. Ezt könnyedén legyőzte a rosszindulatú hackerek, akik megtekinthetik a forrás, illetve rekonstruálni a formában, nem JavaScript-alapú benyújtás gombra, de jelenthetnek egy akadálymentesítési problémával több a normál felhasználók. Jobb, hogy tervezze meg a szerver szkriptek, így ők jól működik, vagy segítsége nélkül a JavaScript használatát.

Tévhitek

Ha HTML viták hírcsoport, akkor valószínűleg valaki azt állítják, hogy a “kecses lebomlás” valójában azt jelenti, hogy oldalak, egyszerű, unalmas, majd a “legkisebb közös nevező.” Ez távol áll az igazságtól. Az emberek, akik azt mondják, vagy nem igazán értem, kecses lebomlás, vagy csak akarja, hogy az olcsó lövések ellen az úgynevezett “nyelvművelő” ahelyett, hogy megvitassák Web szerzői ésszerű. Valójában, kecses lebomlás nem követeli meg, hogy nem használ semmit, túl elegáns, vagy szép, vagy, hogy “a szerző az elavult böngészők.” Egyszerűen megköveteli, hogy megértsd a szerkezet minden elemét használjuk, s tudatában lenni, megfelelően használja a beépített funkciók, amelyek lehetővé teszik a feltöltés alternatív tartalom elérhető a felhasználók számára, akik nem tudnak, vagy nem használja a díszes.

Kecses Lebomlás és Progresszív Tartozékok

Volt egy kis vita mostanában a Webes fejlesztési területek a különbség a gondolkodásmód között “kecses lebomlás” , “progressive enhancement”, amelyek valójában nagyon hasonló fogalom, de úgy nézett ki, a különböző irányból. A wikipédia cikke a fokozatos javítása, pedig ott volt az írás, a téma. Az alapvető különbség az, hogy a “progressive enhancement” kezdjük egy egyszerű, logikus, kompatibilis készlet megjelölt tartalom, majd réteg, a megerősített funkciók modern böngésző tetején, míg a “kecses lebomlás” azzal kezdődik, hogy egy teljes funkcionalitású, fejlett honlap, tele van színes-szagos, bizonyosodj meg róla, hogy ez is tartalom érhető el, ha a képzelet funkciók nem működnek, egy adott felhasználót. Ez a standard, a gondolkodásmód már támogatta jobban illeszkedik a PE, mint GD, bár régen a GD terminológia, mert a másik kifejezés, még nem találták fel. Mindenesetre, ha ügyesen, elgondolkodva, cluefully, mindkét technikát kell eredménye nagyon hasonló oldalak.

Terem a Szégyen

A honlap jobb nézi más helyszíneken azt mutatják, például, hogy mit nem!

MEGJEGYZÉS: A felvétel egy oldalon a “Terem a Szégyen” linkek nem lehet úgy értelmezni, mint bármilyen személyes támadás az oldalon van a teremtő, ki lehet nagyszerű ember, vagy akár egy támadás a kapcsolódó weboldal egészét, amely lehet, hogy egy forrás igazán nagy információ és/vagy szórakoztató. Inkább csak kiemelni, speciális funkciók (szándékos vagy véletlen), hogy a hivatkozott oldalak, ami problémát okozhat, hogy elkerülhető lett volna a jobb design. Ha találsz egyet a telek kapcsolódik ide, ne sértődj meg; javítja a helyszínen, így azt kell, hogy vegye le a kapcsolat!

Leicestershire & Rutland Sakk Egyesület végre a helyszínen, így a főoldalon van eltemetve mélyebb, mint az alapértelmezett index, amely átirányítja az igazi helyét a hazai oldalon. Ezt csinálták a meta-átirányítás, valamint egy tartalék egyszerű HTML link, de miután átalakítása (miért átalakítja szinte mindig rontja elérhetőség képest, hogy mi volt azelőtt?) ezek segítségével egy alapértelmezett index, amely kizárólag a JavaScript-átirányítást, hogy nem Javascript-alapú felhasználók csak egy üres oldal.
Hira használt ajánlani egy “Flash”, illetve “Nem-Flash” változat a címoldalán, de a “Nem-Flash” változat még nem volt a Flash! Csak kihagyott egy extra “intro” oldalt, hogy még több Flash. Most azt nem tudja, hogy hülyeség, de még mindig van a Flash intro, ahol a lehetőséget, hogy ugorjunk be van ágyazva a Flash is, ami azt jelenti, hogy a nem-Flash-támogató böngészők csak egy üres oldal nem lehet továbblépni a helyszínen. Az intro játszik idegesítő téma a zene folyamatosan, nem lehet megállítani.

Hivatkozások

Fokozódó Szerzői — egy másik nézd kecses bomlás
Érzékeny Web Tervezés — még több új, kevésbé “tartani-a-egyszerű-hülye”, hogy helyek alkalmazkodni (remélhetőleg elegánsan), hogy a különböző közlekedési módok megtekintése
Példa egy elegánsan-megalázó szerver illetve kliens oldali űrlap: használja a JavaScript ha engedélyezve van, de ha nem a formában azt állítja, hogy egy szerver oldali script, hogy nem ugyanazt a keresetet, mint a JavaScript, így a formában működik, mindenki számára.
Tsutsumi – Művészet Giftwrapping a Web
Flash Csirkenyársat — vita egy webmester megpróbálja létrehozni szabványoknak megfelelő, kecsesen-megalázó kódot be a Flash film
Tíz gyors vizsgálatot, hogy ellenőrizze a honlap elérhetőség