Praturtintas GUI yra vienas iš šiuolaikiško žiniatinklio reikalavimų. Svetainių išvaizda ir valdymas artėja prie diegiamų taikomųjų programų išvaizdos ir valdymo. Valdikliai (angl. widgets) tampa vis intuityvesni. Bet interneto kūrėjai bei internetinių projektų užsakovai niekuomet neturėtų pamiršti pasiekiamumo ir semantikos. Žiniatinklis pirmiausia yra informacija, o tik tada įspūdis.
Technologijos turėtų pasitarnauti realiam Pasauliui, o ne atvirkščiai. Todėl tau, kaip turinio savininkui, turėtų būti įdomu platinti informaciją visais įmanomais būdais. Turinys turi būti pasiekiamas tiek standartinėse moderniose naršyklėse, tiek naršyklėse su atjungtu Javaskriptu, skaitytuvuose balsu ar mažaekraniuose prietaisuose, kaip kad PDA ar mobiliuosiuose telefonuose. Atvaizdavimas (CSS) ir specialieji efektai (Javascript) turėtų papildyti bazinį turinį (XHTML). Šios dalys turėtų būti atskirtos skirtinguose failuose ir nemaišomos. Geros praktikos taisyklė sako, kad atjungus stilių, paveikslėlius, Javaskriptą ar viską kartu, lankytojui turėtų būti įmanoma vis vien skaityti turinį ir naršyti svetainėje. Įsivaizduok situaciją, kad atvažiuoji į koncertą svetimam mieste ir tau reikia susižinoti, kokie autobusai važiuoja koncertų salės link. Kągi. Per mobilų atsidarai vietinę viešojo transporto svetainę ir susižinai kelionės maršrutą. Tačiau, jei svetainė tavo mobiliaku nepasiekiama vien dėl privalomų specifinių Javaskriptinių valdiklių, tuomet tu greičiausiai pavėluosi į koncertą ir visa tavo diena bus sugadinta.
Semantinio žiniatinklio koncepcija apibrėžia taisykles informaciniams duomenims, kurios leidžia atvaizduoti, filtruoti ir redaguoti duomenis naudojant skirtingas technologijas. Vietoj nepatikimo teksto karpymo kad gautum specifinę puslapio informaciją, turėtų būti įmanoma išanalizuoti turinį, naudojant DOM, ir gauti viso puslapio struktūrą. Tai naudinga ne tik paieškos varikliams, ber ir trečių šalių žiniatinklio ir diegiamoms taikomosioms programoms, kurios išnaudotų tavo turinį skirtinguose taikomųjų programų hibriduose (angl. mashup). Pavyzdžiui, jei turi paprastą informacinę svetainę apie savo restoraną su jo adresu ir tikriausiai gražiu dinaminiu žemėlapiuku, tuomet kita kompanija gali turėti paieškos serverį, kuris renka informaciją apie įvairius restoranus, viešbučius ir parkus bei parodo juos visus viename žemėlapyje su kiekvienos vietos reitingais, komentarais ir rekomendacijomis. Jei tavo svetainės turinys nėra semantinis, tu vargiai gausi papildomo dėmesio iš trečių šalių projektų.
Koks bebūtų svetainės verslo modelis, jei kompanija yra orientuota į ateitį, struktūrinis svetainės turinys privalo būti atskirtas nuo atvaizdavimo ir logikos. Be to, turinys turi būti pasiekiamas ir naršytinas be Javaskripto ir CSS. Visi praturtinantys GUI efektai turėtų būti pridedami papildomai Javaskriptu, kai jis aktyvuotas. Pamiršk visas pamokėles ir pavyzdžius, kuriančius dinaminį turinį su document.write ar pridedančius įvykių apdorojimą HTML elementams tiesiai žymėse. Javaskriptas privalo būti pakrautas iš atskirų failų ir jis turėtų įtakot turinį, naudojant DOM, pasikrovus puslapiui. Ši koncepcija vadinama neįkyriuoju Javascript. Skirtingų sluoksnių atskyrimas taip pat reiškia greitesnį krovimąsi, kadangi Javascript ir CSS failai dažniausiai būna parsiunčiami vienąkart, o paskui tik pakraunami iš naršyklės sparčiosios atmintinės.
NEA:
XHTML:
<a href="http://aaiddennium.com/blog/"
onclick="window.open(this.href,'','width=800,height=600');return false">
Mano blogas
<script type="text/javascript">
/* <![CDATA[ */
document.write("(atsidaro naujam lange)");
/* ]]> */
</script>
</a>
VA TAIP:
XHTML:
<a href="http://aaiddennium.com/blog/" class="new_window">
Mano blogas
</a>
Javascript (įtrauktas iš atskiro failo):
window.onload = function() {
var aElems = document.getElementsByTagName("a");
for (i=0, iLen=aElems.length; i<iLen; i++) {
var oEl = aElems[i];
if (oEl.className.match(/\bnew_window\b/)) {
var oT = document.createTextNode("(atsidaro naujam lange)");
oEl.appendChild(oT);
oEl.onclick = function(e) {
if (!e) var e = window.event;
var oLink = e.target || e.srcElement;
window.open(oLink.href, "", "width=800,height=600");
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
};
}
}
}
Žvelgiant toliau, galima sukurti pilnai funkcionuojančią svetainę be specialiųjų efektų, o paskui pridėti Javascript, kuris pakeistų visas standartines nuorodas į Ajax’inius turinio kroviklius. Šią koncepciją Jeremy Keithin savo knygoje Bulletproof Ajax pavadino Hijax. Kaip bebūtų, Hijax būdas turi ir savo trūkumų. Pavyzdžiui, kraunant duomenis per Ajax, standartinis naršyklės Atgal/Pirmyn funkcionalumas nebetenka prasmės. O be to gana brangu dublikuot visus funkcionalumus, kuriant vieną serverio pusei ir kitą kliento pusei.
Aš sakyčiau, kad daugumoj atvejų svetainėje turėtų būti naudojama įprasta navigacija, O Javascript turėtų būti pridėtas tik specifiniams valdikliams ar specifiniams puslapiams. Javascript gali perrašyt standartines funkcijas. Pavyzdžiui, išorinės nuorodos gali būti atidarinėjamos Javaskriptu iššokančiuose languose, arba kai kurie maži formuliarai gali būti atidaromi naujuose Ajax’iniuose dialogo languose. Originali nuoroda, paversta Ajax’inio funkcionalumo jungikliu, kai kuriais atvejais gali būti nukreipta į naują puslapį, aiškinantį, kaip aktyvuoti Javascript ar kur gauti modernią naršyklę. Arba tai gali būti lokali nuoroda į to paties puslapio vietą (#) su tam tikra informacija.
Kiekvienas puslapis turėtų pateikti informaciją, kad svetaine patogiausia naudotis ją lankant moderniom naršyklėm su aktyvuotu Javascript. Ši žinutė gali būti paslėpta dinamiškai Javaskriptu, pasikrovus puslapiui, arba dar geriau – ji galėtų būti įrašyta į <noscript> bloką kuris rodomas, kai Javaskriptas neveikia. Jei pasirinkai paslėpti žinutę Javaskriptu vos tik puslapiui pasikrovus, tau gali nepatikti vaizdo mirgtelėjimas: žinutė pasirodys ir po to dings. Kad išvengtum to mirgtelėjimo, display:none stilių priskirk ne elementui, kuriame yra žinutė, pagal id po puslapio pasikrovimo, o papildomai dinamiškai pridėtai CSS taisyklei su to id selektoriumi dar puslapiui kraunantis. HTML dokumento HEAD dalis įvykdoma visuomet prieš parodant BODY.
NEA:
window.onload = function() {
document.getElementById("warning_js").style.display = "none";
}
VA TAIP:
function dyn_css_rule(sSelector, sCssText) {
var oCss = document.styleSheets[0];
if (oCss.insertRule) {
oCss.insertRule(
sSelector + " {" + sCssText + "}",
oCss.cssRules.length
);
} else if (oCss.addRule) {
oCss.addRule(sSelector, sCssText);
}
return sSelector + "{" + sCssText + "}";
};
dyn_css_rule("#warning_js", "display:none");
Be viso to, niekada nereikėtų dinamiškai modifikuot HTML elementų stiliaus tiesiogiai. CSS yra atvaizdavimo sluoksnio atsakomybė, o ne logikos sluoksnio. Javascript turėtų manipuliuot semantiškais klasių vardais. Tuomet atvaizdavimo sluoksnis nuspręs, ką daryt tarkim su nesvarbiais elementais: tiesiog paslėpti, pridėt jiems permatomumą, sumažinti šriftus, ar perkelti į kitą poziciją.
NEA:
function toggle_visibility(sId, bVisible) {
document.getElementById(sId).style.display = bVisible? "block": "none";
}
VA TAIP:
function toggle_visibility(sId, bVisible) {
var oEl = document.getElementById(sId);
var sClasses = oEl.className.replace(/\s*hidden\s*/g, " ");
if (bVisible) {
sClasses = sClasses + " hidden";
}
oEl.className = sClasses;
}
Net jei tu profesionalus Javaskripto koderis, vietoj gryno Javascript naudinga naudoti Javascript karkasines sistemas. Tavo rašomas kodas bus švaresnis, kadangi patys nuobodžiausi baziniai darbai jau įgyvendinti karkasinėje sistemoje. Kai tik įprasi prie sistemos, projektų vystymas pagreitės. O produktas bus patikimesnis, kadangi karkasinės sistemos kodą jau pratestavo skirtingose naršyklėse didelės bendruomenės. Tavo pasirinkta karkasinė sistema turėtų palaikyti neįkyriojo Javascript metodą ir griežtąjį XHTML. Aš asmeniškai mėgstu jQuery, bet tu gali pasirinkti bet kurią kitą karkasinę sistemą, kuri tau atrodo lengvai išmokstama.
NEA:
var aElems = document.getElementsByTagName("div");
for (i=0, iLen=aElems.length; i<iLen; i++) {
var oEl = aElems[i];
if (oEl.className.match(/\bspecial\b/)) {
oEl.onclick = special_function;
}
}
VA TAIP:
$("div.special").click(special_function);
Dirbdamas su Ajax turėtum suprasti, kad interneto greitis nėra vienodas visiems lankytojams. Taigi net jei kokių JSONu formatuotų duomenų pakrovimas tau tetrunka sekundę, kitam naudotojui su lėėėėėtu internetu ta pati užklausa gali trukti net 15 sekundžių. Todėl svetainė turėtų rodyti skirtingus identifikatorius skirtingoms būsenoms: „pradinė būsena“, „kraunama“, „rezultatas“ ir „klaida“. Priešingu atveju lankytojas gali kelis kartus spaudinėt tą patį valdiklį, stengdamasis jį paveikti. O tai gali sąlygoti atsitiktinius duomenų dublikatus bei pasimetimą. Kartais taip pat gali būti naudinga rodyti mygtuką dabartinės užklausos atšaukimui.
Gali atrodyti keista, kad neparodžiau kaip pasidaryti nei vieno pilnaverčio valdiklio, kaip kad reitingai, automatinis atsakymų parinkimas ar koks kalendorius. Bet šito rašinio tikslas buvo supažindinimas su kokybiškesniu kliento pusės programavimu. Visa kita priklauso nuo tavo kūrybingumo ir verslo reikalavimų. Patirtis ateina besipraktikuojant.
Papildomi skaitinukai:
Tai nebesislapstom, puolam prie darbo ir keliam interneto kokybę.
Loading ...
