x

Einloggen

Hast du noch keinen Account? Jetzt registrieren!

Вытанчаныя дэградацыі

Original on http://webtips.dan.info/
Пераклад на беларускую мову Patricia Clausnitzer

РАДА: Там нічога дрэннага ў выкарыстанні ўсіх апошніх званы і свісткі для падтрымкі шыкоўны магчымасцяў сучасных браўзараў, але паспрабаваць зрабіць гэта такім чынам, што дазваляе карыстачам па-ранейшаму не падтрымлівае (ці наўмысна адключыць), гэтыя функцыі для доступу да асноўных утрыманнем. Да шчасця, гэта лёгка зрабіць на вэб-сайце, калі вынікаць духу Мовы і пратаколы, а не змагацца з ёй.

"Вытанчаная дэградацыя" з'яўляецца важным прынцыпам у вэб-дызайну. Гэта азначае, што, калі вы кладзяце ў магчымасці, распрацаваныя, каб скарыстацца найновая і самая лепшая магчымасцяў сучасных браўзараў, вы павінны рабіць гэта такім чынам, каб старыя браўзары і браўзары дазваляючы карыстачам адключыць асаблівасці, можа "сысці" да метаду якія па-ранейшаму забяспечвае доступ да асноўных утрыманнем сайта, хоць, магчыма, не гэтак кідкі вонкавы выгляд.

Амаль усе новыя функцыі дадаюцца ў Інтэрнэце было зроблена такім чынам, што дазваляе вытанчаныя асяроддзі, пачынальна з даданнем <IMG> тэг для дадання графікі раней усіх тэкстаў сайт, які ўтрымоўвае ALT атрыбут дазваляе забяспечыць альтэрнатыўны тэкст nongraphical браўзараў.

НАТАТКА: Гэта было б яшчэ больш вытанчаным, калі IMG тэгі былі вызначаны ў якасці кантэйнера элементаў, з альтэрнатыўным кантэнтам паміж <IMG> і </IMG> . Гэта выклікала б альтэрнатыўны кантэнт будзе аўтаматычна выкарыстоўваецца ў старых браўзарах, што не разумее, IMG , а таксама дазваляе гэта ўтрыманне ўключаць тэгі разметкі, тое, што не ўяўляецца магчымым у ALT атрыбуту. Але зараз гэта вада пад мостам.

Новыя канструкцыі, як <APPLET> і <OBJECT> дазваляюць забяспечыць вытанчаныя дэградацыі з дапамогай альтэрнатыўнага кантэнту паміж адкрывалым і які зачыняе тэгамі элемента. Усё, што паміж <APPLET> і </APPLET> (акрамя параметраў аплета сабе), будуць ігнаравацца Java-браўзар з падтрымкай Java уключаны, але будзе выкарыстоўвацца замест аплета браўзар, які не разумее, Java ці яна адключана. Гэта дазваляе забяспечыць сайта распрацоўніка альтэрнатыўнага статычнага малюнка, тэкст, або замяніць спасылкі на інфармацыю, прадстаўленую ў форме аплета карыстачам падтрымліваць.

Вось прыклад аплета закадаваны вытанчаныя дэградацыі:

<APPLET CODE="WaveEffect" align=center border=0
codebase="http://www.mysite.com/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-падтрымку карыстач убачыць вынік аплета "WaveEffect", якія, меркавана, будзе паказваць графічныя анімацыйныя эфекты з хваляй, і забяспечыць спосаб дабрацца да злучаныя URL, прыведзеным у "HREF" параметру. Але, не-Java карыстач не маюць магчымасці бачыць тое, што павінен быў быць там, ці атрымаць наперад на сайт, калі гэта быў адзіны спосаб навігацыйныя, за выключэннем альтэрнатыўны кантэнт. Гэта інфармацыя ўяўляе сабою звычайнае статычнае IMG тэгі аднымі і тымі ж графіку ў не анімаваны выявай, гіперспасылкай на той жа старонцы аплет дазволіць карыстачу перайсці. І, у выпадку тэкставых браўзараў, яшчэ адзін узровень дэградацыі вытанчаныя ажыццяўляецца ALT тэкст з малюнкам.

У некаторых выпадках, калі Ёсць некалькі розных спосабаў зрабіць такі ж эфект, а таксама мноства браўзарамі, якія падтрымліваюць адзін ці іншы з іх трохі адрозніваецца, вы можаце дамагчыся максімальнай сумяшчальнасці шляхам мець некалькі ўзроўняў укладзеных contstructs, якія могуць быць вытанчана дэградавалі, як APPLET у EMBED у OBJECT .

Ёсць таксама некалькі адмысловых тэгаў, якія дазваляюць уключаць утрыманне, якое выкарыстоўваецца толькі пры выкарыстанні вызначаных функцый адсутнічаюць ці адключаны. Напрыклад, NOSCRIPT элементы адлюстравання толькі тады, калі JavaScript не падтрымліваецца ці адключаны. Гэта можа быць карысна для забеспячэння альтэрнатыўных навігацыю ў месцах, дзе асноўны кантроль ажыццяўляецца ў JavaScript. Акрамя таго, NOEMBED элементы выкарыстоўваюцца толькі тады, калі EMBED не падтрымліваецца.

Гэта зойме ўсяго трохі больш працы, каб зрабіць гэта правільна, і значна павялічвае даступнасць, гнуткасць і пошукавай індэксацыі старонак сайта.


Вытанчана зневажальных добрая якасць выглядаў Усплывальныя вокны JavaScript



Агульны эфект выкарыстоўваецца на шматлікіх старонках связываемого дакумента, які з'яўляецца ў выглядзе невялікага JavaScript-стварыў усплывальным акне. Калі вы выкарыстоўваеце гэты эфект, варта эканомна, калі на ўсіх, бо гэта можа быць раздражняльным для шматлікіх карыстачоў. Тым не менш, Ёсць выпадкі, калі гэта карысна, напрыклад, у выскокваць даведкавых матэрыялаў для аказання дапамогі хтосьці пры запаўненні вэб-формы, без таго, каб пакінуць старонку з формай (і, магчыма, не зможа вярнуцца да яе, калі ён мінае з кэша, губляючы дадзеныя, якія яны ўжо часткова ўведзены).

Часта распрацоўнікі будуць рабіць гэта з дапамогай javascript: URL. Гэта пакідае жадаць лепшага з пункту гледжання вытанчанай дэградацыі, паколькі без JavaScript-браўзар з падтрымкай не будзе ведаць, што рабіць з такой сувязі наогул, і або нічога не рабіць ці да памылкі. Акрамя таго, javascript: URL, насамрэч не адпаведных стандартам, я не ведаю якіх-небудзь афіцыйных спецыфікацый для гэтай канструкцыі, і яны часта ўтрымоўваюць знакі, не прававы, уключаюць (неэкранаваны) у URL, у залежнасці ад спецыфікацыі (напрыклад, прабелы).

Да шчасця, ёсць лепшы шлях. Замест <A HREF="javascript:YourPopupFunction('somefile.html')">,
вык. <A HREF="somefile.html" onClick="YourPopupFunction('somefile.html'); return false">.
(Я мяркую, вы вызначылі функцыі JavaScript YourPopupFunction дзесьці ў вашым дакуменце.) onClick атрыбуту ўтрымоўвае код, які выконваецца (на аказанне падтрымкі браўзараў) пры націску спасылкі, і ў канцы return false чыннікам браўзар для прыпынку пасля гэтай аперацыі ( замест таго, каб на наступных звычайных гіперспасылка). Такім чынам, ён мае сапраўды такі ж эфект, што і javascript: спасылка. (Звернеце ўвагу, што код onClick не пачынаецца з "JavaScript:", паколькі гэта не ў выглядзе URL.) Але без JavaScript-браўзар з падтрымкай, onClick ігнаруецца і звычайную сувязь прытрымлівання. Такім чынам, усе карыстачы атрымліваюць, каб убачыць дакумент, які вы са спасылкамі на.

Нататка: З моманту стварэння вышэй, я высвятліў, што некаторыя старыя браўзары з ранніх рэалізацыях JavaScript не падтрымлівае return false правільна і ў канчатковым выніку і тое і іншае ўсплывальнае і "проста" спасылку. Гэтага можна пазбегнуць з дапамогай <A HREF="somefile.html" target="somename" onClick="newwin = window.open('', 'somename', 'width=150,height=150,resizable=1');"> , які адкрывае пустое акно "SomeName", а затым дазваляе чарговы спасылка на мэту яго. Нумары для JavaScript браўзараў проста адкрыць новыя рэгулярныя акно "SomeName", або ігнараваць мэты і адкрыць новую старонку ў зыходнае акно. Зрэшты, нават у апошні час, я выявіў, што браўзар Mozilla, калі наладжаны ігнараваць спрабуе адкрыць новыя вокны, у гэтым выпадку будзе адкрыць усплывальнае акно, а затым адкрыць спасылку прызначэння у зыходным акне, пакінуўшы ўсплывальнае акно адкрытым бескарысна. Такім чынам, улічваючы ўсе акалічнасці, папярэдні прыклад кода, верагодна, лепш.

Гэтыя метады могуць быць скарыстаны і ў іншых выпадках, калі вы жадаеце спасылка на выкананне JavaScript кода, напрыклад, спасылку mimicing браўзара "Назад" кнопку з history.back() . Але падумаць пра тое, што Вам трэба выкарыстоўваць такія функцыі, а карыстачы, хутчэй за ўсё, варта блытаць з дапамогай спасылак, што рабіць рэчы, як вярнуцца ў гісторыю, а не рухацца наперад на іншую старонку ў якасці спасылкі звычайна.

Рада: Заўсёды выкарыстоўвайце значнай HREF атрыбуту ў спасылках, а не "фіктыўныя" 1, нават калі асноўная мэта спасылка для запуску скрыпту.

Усімі сродкамі, не выкарыстоўвайце шкадаванню нястрымнай тэхніцы стварэння гіперспасылак перайсці да "мадэльная" HREF значэнне "#", я не ведаю, хто прыдумаў, але гэта, здаецца, былі ажыццёўлены такім чынам у некаторых сродкаў распрацоўкі якія генеруюць спасылкі з мудрагелістым JavaScript, і пераймалі адтуль усякія сайты, нават тыя, якія ўручную кадоўку. Гэта дрэнная ідэя - як я вам паказаў вышэй, тыя вы павінны зрабіць штосьці значнага гіперспасылкі, якая будзе працаваць, нават калі JavaScript адключаны - і, акрамя таго, бо "#" не вызначана ў якасці даведкавага URL, гэта інтэрпрэтуецца рознымі версіі браўзара ў непаслядоўна і, магчыма, чыннікам пераходу да верхняй ці ніжняй часткі бягучай старонкі ці дадаць дадатковыя бескарысныя спасылкі на старонкі гісторыі сесіі браўзара. Прынамсі, калі вы павінны выкарыстоўваць такую фіктыўны HREF , пераканаецеся, што да канца вашага JavaScript камандны радок з " return false "у мэтах прадухілення браўзара ад спроб вынікаць фіктыўныя спасылкі.


Вытанчана зневажальных добрая якасць выглядаў Пераходзячыя меню


Яшчэ адзін папулярны эфект каб атрымаць графічнае меню навігацыі рабіць "эфекту перакотвання", калі карыстач перасоўвае свае мышы над элементамі, такімі як "асвятленне" ці "націскае" кнопку, якая знаходзіцца ў наш час асноўная ўвага, ці паказваць дадатковую інфармацыю пра ў дадзены момант абраны элемент, каб дапамагчы карыстачу вырашыць, пяройдучы па спасылцы.

Ёсць "вытанчаны" і "не-вытанчанай" спосабаў зрабіць гэта. "Не вытанчаны" шляхоў можа прывесці да навігацыі будзе поўны правал для карыстачоў, якія не падтрымліваюць (ці адключаны) такія рэчы, як Java, JavaScript, ці Shockwave (у залежнасці ад перакульвання ажыццяўляецца). З іншага боку, "вытанчаны" ажыццяўленне пакідае сайт цалкам суднаходным нават для "найменшага агульнага назоўніка" браўзарамі, а даданне дадатковых аксэсуараў для тых, хто іх падтрымлівае.

Прыклад кода для грацыёзна-зневажальныя перакульванне эфект ніжэй. Разам з тым, больш, чым вывучэнне пэўных кода, вы павінны пазнаць агульнае стаўленне гэтага і іншых зневажальных грацыёзна-метадаў распрацоўкі вэб-прыкладанняў. Гэта значыць выкарыстанне гуку, лагічная структура з простымі, шырока падтрымоўваных HTML канструкцый, а затым дадаць "званы і свісткі-" у якасці факультатыўнага дадаткаў, якія могуць быць праігнараваны без падтрымкі браўзараў. Насупраць адносіны, што стварае не-даступных участкаў, пропуск "гук, лагічна, просты" этап і рэалізацыі жаданых вынікаў непасрэдна ў некаторых развітых моў (Java, Shockwave і г.д.), сканчаючы код, які не нават ёсць "просты" HTML спасылка тым, што браўзары могуць вынікаць без запуску "аплет", "сцэнар", ці "падлучальны модуль". Тады, калі такія аўтары вырашылі, падумаўшы, што яны павінны падтрымліваць "прасцей" браўзары, яны ў канчатковым выніку прыліпання выродлівыя мноства "альтэрнатыўных" тэкст спасылкі ніжэй "фантазія" навігацыя, якія не былі б неабходны, калі яны прызначаны сайце ў вытанчаным выявай, у першую чаргу.


Вось "вытанчаны" перакульванне код: (Нататка: У гэтым прыкладзе, "звычайнай" версіі навігацыйнай кнопкі павінны быць змешчаны ў item1_reg.gif , item2_reg.gif і г.д., а "навядзенні курсора мышы" версіі item1_over.gif , і г.д. Усе малюнкі павінны быць змешчаны ў падкаталог gfx/ пад каталог старонкі знаходзіцца, і ўсе малюнкі памерам 250 х 50 пікселяў. Вядома, Вы можаце змяніць любое пра гэта, як неабходна для вашага ўласнага сайта.


<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>

Звернеце ўвагу на " if (document.images) ", які гарантуе, што толькі браўзараў, якія выкарыстоўваюць версіі JavaScript, які можа апрацоўваць малюнкі (раннія рэалізацыі не можа) паспрабуе яго, прадухіляючы памылкі. І заўважце, што навігацыя малюнка маюць ALT атрыбуты ўтрымоўвалы пункт меню тэксту (змены "Пункт 1", "Пункт 2" і г.д., больш значныя імёны, дадзеныя часткі сайта), так што нават у тэкставых браўзараў Карыстач можа па-ранейшаму арыентавацца. І ды, я ведаю, вы можаце зрабіць перакульванне эфект яшчэ больш грацыёзна выкарыстаннем каскадных табліц стыляў , але гэта даволі старыя старонкі; пакуль я масавыя перапісаць увесь гэты сайт, ён будзе мець некаторыя даволі састарэлыя рэчы ў ім.

Калі вы пакідаеце якога-небудзь рэдактара ці карысную праграму стварэння "наступствы перакульвання" для вас, пераканаецеся, што ён выкарыстоўвае грацыёзна-зневажальныя тэхнікі, падобных гэтай, і пераканаецеся, што вы паклалі адпаведных ALT атрыбуты малюнка (ад рукі, пры неабходнасці, калі праграма не ў стане даць вам магчымасць зрабіць гэта).


Кліент і сервер формаў-Side


Калі ў вас ёсць форма, якая робіць карысныя рэчы з дапамогай функцый JavaScript, усё яшчэ магчыма, каб ён карэктна пагоршыць для карыстачоў, якія не маюць JavaScript, калі вы пераканаецеся, што ён уяўляе серверныя форме, якая выконвае тыя ж функцыі , хоць і не так эфектыўна, як гэта можна зрабіць на боку кліента. Напрыклад, вэб-старонкі, дзе карыстач можа ўвесці ў іх сума эканоміі ў год, і чакаецца адсоткі ці дывідэнды стаўка прыбытковасці і высвятліць, колькі эканоміі ім прыйдзецца пасля выйсця на пенсію можа быць зроблена з JavaScript - гэта выклікае хуткае вылічэнне , не патрабуючы нічога павінен быць прадстаўлены да сервера, але не працуе на ўсіх для карыстачоў з JavaScript адключаны. Гэта можна лёгка выправіць, маючы ўяўленні дзеянняў (у выпадку адсутнасці JavaScript) пайсці на сервер скрыпт, які выконвае тыя ж вылічэнні. JavaScript "onsubmit" функцыя можа скончыцца "вяртанне лжывым", каб прадухіліць серверны скрыпт ад актывізацыі, калі яна не патрабуецца.

Калі ваша анкета прызначана прадставіць сервер, але вы ўсё яшчэ жадаеце выкарыстоўваць JavaScript функцыі таксама, такім чынам, каб пацвердзіць ці выправіць інфармацыю да ўяўлення, тыя вы павінны дубляваць жа праверку і выпраўленне крокі ў серверны скрыпт, каб яны Арэн 'т прапушчаны, калі JavaScript не ўключаны ці даступныя. Гэта важна ў мэтах бяспекі ўсё адно, як шкоднасныя хакер можа стварыць версію формы, што прапускае JavaScript праверкі, каб паспрабаваць увесці некарэктныя дадзеныя ў вашу праграму, так што ён павінен быць гатовы, каб адсяваць такія рэчы. Некаторыя людзі на тэлеканферэнцыі прасіць няправільнае пытанне, і сказаць: "Як мне сілу мая форма не з'яўляецца ці не ўяўляць, для карыстачоў з JavaScript адключаны, таму што мой JavaScript праверка неабходна для іх карэктнай працы?" Можна паспрабаваць зрабіць гэта шляхам кнопку "Адправіць", ці ўсёй форме, будзе выводзіцца на JavaScript, а не звычайная HTML, таму ён не з'яўляўся на ўсіх без сцэнараў на боку кліента. Гэта можа быць лёгка перамог хакераў, якія могуць праглядаць зыходны і аднавіць форму без JavaScript уяўленні кнопкі, але створыць праблемы даступнасці для больш звычайных карыстачоў. Лепш для распрацоўкі сцэнараў сервера, так што яны добра працуюць з ці без дапамогі JavaScript.


Няправільныя


Калі ў Вас паўстануць HTML абмеркаванні навін, вы, верагодна, убачыць хтосьці сцвярджае, што "вытанчаныя дэградацыі" насамрэч значыць зрабіць сайты раўніны, сумнай, і "найменшага агульнага назоўніка". Гэта далёка ад праўды. Людзі, якія кажуць, што або насамрэч не разумею вытанчаныя дэградацыі, ці проста спрабуюць зрабіць танных выбрыкаў супраць так званых "пурысты", а не абмяркоўваць вэб-аўторынга рацыянальнай выявай. Насамрэч, вытанчаныя дэградацыі не патрабую, каб вы не выкарыстоўваеце што-небудзь фантазія ці прыгожая, ці што вы "аўтарам для састарэлых браўзараў". Ён проста патрабуе, каб вы зразумелі структуру ўсіх элементаў вы выкарыстоўваеце, і быць у курсе і правільна выкарыстоўваць убудаваныя функцыі, якія дазваляюць уключыць альтэрнатыўны кантэнт, даступны для карыстачоў, якія не могуць ці не будзе выкарыстоўваць уяўленне матэрыял.


Вытанчаная дэградацыі супраць паступовае падвышэнне


Там у некаторыя абмеркаванні ў апошні час на вэб-сайтам распрацоўнікаў пра адрозненне ў мысленні паміж "вытанчанай дэградацыі" і "паступовае падвышэнне", якія насамрэч вельмі падобныя паняцці, але паглядзеў на розных кірунках. Вікіпедыі ёсць артыкулы пра паступовае пашырэнне і ў нас ёсць было эсэ на гэту тэму. Асноўным адрозненнем з'яўляецца тое, што "паступовае падвышэнне" вы пачняце з простай, лагічнай, сумяшчальны набор размечанага змесціва, а затым пласт пашыраныя магчымасці для сучасных браўзараў на ім, тады як "вытанчаны дэградацыі" пачынаецца з поўнафункцыянальным , прасунуты сайт, поўны свісткі і званкі, і гарантуе, яно таксама мае ўтрыманне, якое можна атрымаць, калі фантазіі функцыі не працуюць для пэўнага карыстача. Па гэтых стандартах, менталітэту я выступаў падыходзіць больш, чым PE GD, хоць я выкарыстоўваў GD тэрміналогіі, таму што іншага тэрміна не былі вынайдзены ў той час. Ва ўсякім разе, калі зроблена па-майстэрску, задуменна і cluefully, як метады павінны прывесці да вельмі падобныя сайты.


Ганебны слуп


Зрабіце ваш сайт лепш, гледзячы на іншыя сайты, якія паказваюць сваім прыкладам, што не трэба рабіць!

НАТАТКА: уключэнне сайта ў маёй "зала ганьбы" спасылкі не павінны разглядацца як якой-небудзь асабістай напад на сайце стваральніка, які можа быць сапраўды вялікім чалавекам, і нават напады на злучаных вэб-сайта ў цэлым , якія могуць быць крыніцай вельмі карыснай інфармацыі і / ці забавак. Хутчэй, гэта проста вылучыць асаблівасці (наўмыснае ці выпадковае) ад сайтаў, якія выклікаюць праблемы, якія можна было б пазбегнуць з дапамогай лепшага дызайну. Калі вы знайшлі адзін з вашых сайтаў злучана тут, не крыўдзіцеся, паляпшаць свой сайт, каб мне прыйдзецца зняць спасылку!

  • Хіра скарыстана для падавання "Flash" і "Non-Flash" версіі на першай старонцы, але "Non-Flash" версія Flash яшчэ ў ім! Ён проста прапусціў экстра "інтра" старонку, якая яшчэ больш Flash. Зараз ён гэтага не зробіць, ідыятызм, але яна дагэтуль Інтра, дзе адсутнічае магчымасць прапусціць гэта ўкладваецца ў сябе Flash, а гэта азначае, што без падтрымкі Flash-браўзары проста атрымаць пустую старонку няма магчымасці перайсці ў сайт. Інтра гуляе музыка раздражняе тэма ўвесь час, прычым ён не змог спыніць яго.

Спасылкі