www.romver.ru / Полный список статей / Юзабилити комментариев, ч.2

O razli4nix apgreydax i mutaciax, i voob6e eksperimentax, kotorie provodat zlie bloggeri nad podopitnimi kommentariami.

Kak bilo skazano, kommentarii - osnova fidbeka avtoru bloga ot ego 4itateley. Estestvenno, oni doljni bit' udobnimi do kraynosti, no ne do bezumia. 4to sobludaem zdes'? Bolee ili menee legkost' “interfeysa” elementov s maksimal'noy pol'zoy. Luboe somnenie ozna4aet, 4to etot element zdes' poprostu li6niy.

Ojidaemoe soderjanie:

• “Zebra” i pro4ie uslojnateli 4tenia
• Videlenie avtorskix kommentariev
• Navigacia po kommentariam
• Vzaimodeystvie mejdu kommentatorami
  • Replai
  • Otvet s ankorom
  • Citirovanie kommentariev
• Reytingovanie
• Spasibo4ki
• Opredelenie podpiski na kommentarii
• Podpiska bez kommentirovania
• Zavazka na frendfid

“Zebra” i pro4ie uslojnateli 4tenia

“Zebra” - eto sposob raskraski povtorau6ixsa elementov, idu6ix podrad (obi4no strok v tablice), pri kotoroy cveta 4ereduutsa. Povtor obi4no idet 4erez stro4ku (belaa, seraa, belaa i t.d.), ili 4erez neskol'ko. V kommentariax mnogix tem takaa 6tuka primenaetsa dostato4no 4asto, vne zavisimosti ot ob&emov kommentirovania.

Tut takaa 6tuka - nikto ne znaet, kto pridumal podobniy “element” “uzabiliti” i voob6e “prakti4eski net dokazatel'stv togo, 4to on deystvitel'no pomogaet 4itatelam” (4itayte interesnoe issledovanie o “zebre”). Po povodu tablic u mena net odnozna4nogo mnenia, xota vse ravno gramotno postroennaa, ona budet legkoy k vospriatiu (4ego ne skaje6' o moem bloge) i bez vsakix “jivotnix”. No vot v kommentariax, odnozna4no, eto sover6enno nenujnaa ve6'.

E6e odin sposob videlenia kommentariev - videlenie cvetom kommentaria pod kursorom. Mojno oboytis' daje bez javascript, esli propisat' v CSS psevdo-atribut :hover i menaa v nem background.

Ves'ma spornoe re6enie, kotoroe zastavlaet sayt migat' ot dvijeniy pol'zovatela (mnogie ne lubat), ne rabotat' s viklu4ennimi skriptami, da i voob6e, sporno vliau6iy na 4itaemost'. V konce koncov, mi je ne vo vtorom klasse i ne 4itaem knijki s pomo6'u lineek…

Videlenie avtorskix kommentariev

Zato vot videlit' avtorskie kommentarii v obsujdenii ne tol'ko mojno, a daje nujno.

4to est' u vaateley plaginov na etu temu?

Est' uniliy Comment Highlighter s obra6eniami k baze i ku4e koda. Vpro4em, on zato umeet podsve4ivat' kommentarii ne tol'ko avtora.

Est' AuthorHighlight. On dostato4no prosten'kiy, tak 4to mojno ispol'zovat' i ego - sveraa odnovremenno e-mail i ima avtora kommentaria s avtorskimi, on pri pravil'nom isxode prisivaivaet emu klass highlighted. V obratnom - ni4ego (vpro4em, eto popravimo).

Est' variant ispol'zovania etogo plagina ot nekoego Epi4eskogo Aleksa, kotoriy, vidimo i pronik na territoriu na6ey glubinki. Ego, vidimo, kto-to perevel, sdelal prosten'kiy gayd s proverkoy tol'ko po e-mail’u i v etom vide ego obnarujil Blogomob (pravda, smisla v ispol'zovanii klassa oddcomment a ne viju, t.k. on daje ne opredelen v CSS).

Esli je mi xotim sdelat' eto vru4nuu, to nam nujno k 4emu-to privazat'sa. Zabavno, no v tablice kommentariev soxranaetsa ne tol'ko va6 IP-adres, no i user-agent brauzera za4em-to. No, kone4no je, samaa priatnaa privazka - po user_id. V ob6em, vse prosto - po usloviu podstavlaem tekst v klass, a v CSS ego opredelaem.

V slu4ae, esli na bloge zakrita registracia novix pol'zovateley i vi - edinstvenniy avtor (u anonimov id=0), to dostato4no prosto konstrukcii:

<?php if($comment->user_id!=0) echo " authortext";?>

Esli je registracia otkrita, ili avtorov neskol'ko, to nujno znat' id avtora (dla admina eto obi4no 1, esli tol'ko ne sozdan dopolnitel'niy akkaunt). V takom slu4ae mojno sdelat' otdel'noe oformlenie raznix avtorov (raznie cveta, kartinki v fone i t.p.)

<?php if(1==$comment->user_id) echo " author_vasya";
elseif(2==$comment->user_id) echo " author_petya"; ?>

Zdes' est' nebol'6aa trudnost' - esli vi lubite pisat' kommentarii, ne loginas' (Vordpress postoanno sbrasivaet avtorizaciu, ili s raznix komp'uterov), to pro6e budet identificirovat' avtora kak raz po e-mail, ili imeni:

<php if( $comment->comment_author_email==get_the_author_email())
	echo " authortext"; ?>

ili

<php if (strstr(get_comment_author(),'admin'))
	echo " authortext"; ?>

K tomu je, esli vi kogda-to menali ima avtora na bloge, mojno vvesti dopolnitel'nie uslovia, 4tobi i starie kommenti otobrajalis' kak avtorskie (t.k. v nenormalizovannoy baze xranitsa polnoe ima).

< if ( $comment->comment_author_email == get_the_author_email() ||
	strstr(get_comment_author(),'admin')) echo " authortext";?>

Problemi, kone4no, ostautsa - esli kto-to poprobuet pisat' ot va6ego imeni. No eto ispravlaetsa legkim najatiem na “udalit'”.

Samu etu konstrukciu ve6aem na blok div ili ul (4to u vas tam v kommentax) tak, 4tobi stro4ka vivodilas' v class. Ne nado pugat'sa, esli na bloke uje stoit drugoy klass, kotoriy opisivaet oformlenie kommentaria - vsegda mojno postavit' vtoroy:

<div class="comment<?php if($comment->user_id!=0)
	echo " authortext"; ?>"

Nu, sobstvenno, ostalos' v CSS dobavit' opredelenie stila s izmeneniem oformlenia - samim logi4nim avlaetsa izmenenie cveta fona s vklu4ennim perekrivaniem (4tobi, esli v klasse uje ustanovlen bekgraund, on smenilsa).

.authortext {
background: #CCC !important;
}

Analogi4no mojno sdelat' tak, 4tobi vmesto vsex va6ix avtorskix imen vivodilsa korotkoe i emkoe “avtor”. I bez vsakix plaginov, t.k. oni vse-taki prednazna4eni dla dopolnitel'noy funkcional'nosti.

Navigacia po kommentariam

Prodoljaem na6e vesel'e samim monstruoznim navorotom na kommentarii, 4to mojno pridumat' - eto Comment Toolbar Plugin (obzor ot AlexNote). Esli drugoy naydenniy plagin dla videokommentirovania (su6estvuet analog Riffly Webcam Video Comments) e6e potencial'no interesen, to eto - nastoa6iy ko6mar zdravomisla6ego 4eloveka.

Net, skripti na citirovanie i otvet vpolne neploxi (rassmotrim 4ut' nije), no strelo4ki pereme6enia absolutno bespolezni. Vo-pervix, ix nujno klikat' mi6koy (skroll ili PageDown/End kuda udobney i bistree). A vo-vtorix, oni (daje esli ix dla prili4ia sdelat' strelo4kami) zagromojdaut mnogo mesta.

Smisla v nix nemnogo - kommentarii obi4no sli6kom mali po razmeram, 4tobi bila xot' kakaa-to neobxodimost' v navigacii po nim.

Kak variant, kone4no, mojno ispol'zovat' blok, podve6enniy na absolute otnositel'no okna brauzera so strelo4kami (odin element vmesto mnogix) i ispol'zovat' pereme6enie s pomo6'u knopok na nem. Mojno daje ne xranit' vse ankori tam, a ispol'zovat' razbor v real'nom vremeni. No, opat' je, smisla takoy funkcii na blogax ne viju.

Vzaimodeystvie mejdu kommentatorami

Bistro podstavlat' ima avtora, kotoromu xo4e6' otvetit', v svoy kommentariy - delo poleznoe. na podobnie dela js rabotaet prekrasno.

<azi djavaskriptinga>

Voob6e, mojno vstavit' skript pramo v telo HTML, vstaviv do </head> (v header.php) ob&avlenie:

<script type="text/javascript">
<!--//
	... js-kod ...
//-->

Esli je vi ispol'zuete mnogo funkcional'nosti na javascript’e, lu46e esli ona budet v otdel'nom priatta4ennom fayle (v poste ob optimizacii a obazatel'no upomanu, 4to on doljen bit' odin, da). On otli4no zake6iruetsa i ne budet gruzit'sa kajdiy raz. V xede je mi propi6em vsego odnu stroku:

<script type="text/javascript" src="put'_do_skripta">
</script>

</azi djavaskriptinga>

Dla skriptov nam ponadobitsa id tega textarea, kotoriy slujit nam blokom dla kommentariev. Esli vi posledovali (prakti4eski) moemu sovetu po za6ite bloga ot avtomati4eskogo spama (mesac bez spama), to nazivat'sa va6 tekstarea budet po-drugomu. Vot i prisvaivaem peremennoy eto zna4enie.

var name_textarea = "text";

Replai

Voz'mem dobavlenie replaev ot uje upomanutogo Comments Toolbar - s nebol'6imi izmeneniami (ne zabivaa izbavit'sa i ot etix klevix <b>, i ot zabivau6ego mesta zakommentarennogo kopirayta). I vstroim kod sobstvennoru4no, 4tobi ne zabivat' bazu li6nimi i nenujnimi nastroykami.

Funkciey js, kotoraa budet delat' nujnoe nam deystvo, budet vot eto 4udo:

function comReply(oauthor) {
var txtarea = document.getElementById(name_textarea);
txtarea.value += '@' + oauthor + ": ";
txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
txtarea.focus();
}

Otli4ie ot original'noy versii v tom, 4to dobavlena prinuditel'naa ustanovka kursora, t.k. Opera s etoy 4ast'u mojet glu4it'.

Nesmotra na to, 4to ispol'zovan tvi-stil' replaev, xota nikto vam ne me6aet podstavit' i standartnoe

txtarea.value += "<strong>" + oauthor + "</strong>, ";

i 4to ugodno. Xota lu46e strong ostavit' na dolu posta, a dla etogo sozdat' span s uveli4ennim font-weight.

Posle etogo nam nujen vizov funkcii na ssilke, raspolojennoy v samom kommentarii. Dumau, asno, 4to eto budet v comments.php vnutri <div class="comment":

<a onclick="comReply('<?php comment_author() ?>');
	return false" href="#text">Otvetit'</a>

Sootvetstvenno, kak vi mojete videt', skript budet podstavlat' v argument ima avtora (eto lu46e, 4em uslojnat' skript). Voob6e, obi4no v href stavat pustoy ankor, no lu46e ego tak je privazat' k oblasti kommentariev.

Oformlaete etot element v div ili prosto razme6aete ego CSS, i vse.

Otvet s ankorom

U mena glupoe, no neproxoda6ee o6u6enie, Daniil Gridin v svoem bloge o prodakt-pleysmente vstavlaet otveti kommentatoram v vide ima-ssilka vru4nuu. Sdelat' takuu funkciu dostupnoy kajdomu mojno s pomo6'u vse togo je skripta, slegka modificirovannogo.

function comReply(oauthor,olink) {
var txtarea = document.getElementById(name_textarea);
txtarea.value += '<a href="#comment-' + olink + '">'
			+ oauthor + "</a>:n";
txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
txtarea.focus();
}

i dobavit' v 6ablon kommentariev

<a onclick="comReply(
	'<?php comment_author() ?>','<?php comment_ID(); ?>');
return false" href="#text">Otvetit'</a>

Vot teper' na imeni budut stavit'sa e6e i ssilki (ankori) na sam kommentariy.

Citirovanie kommentariev

Citirovanie predidu6ix kommentariev v melkix blogax i daje krupnix temati4eskix soob6estvax 4asto ne imeet osobogo smisla - t.k. svaz' mejdu voprosom i otvetom legko proslejivaetsa. I vse je, mnogie lubat citirovat' predidu6ix oratorov.

No delaut eto nepravil'no. Naprimer, “dinami4no razvivau6iysa” blog 4eloveka na predele delaet avnuu o6ibku, potomu 4to citirovanie v ego bloge sdelano takje na predele. Tekst vstavlaemogo kommentaria zapisan pramo v javascript’e i dubliruet osnovnoy tekst kommentaria (uveli4ivaa mesto kommentariev v HTML v dva raza).

Quoter takje kakoy-to mutniy, s gromozdkim kodom, mnojestvom nastroek i pr. Vpro4em, mnogim imenno eto i po du6e (ne vziraa na jestkie nagruzki).

Esli je brat' za osnovu vse tot je plagin, naydenniy AlexNote, to normal'niy kratkiy variant pricepit' k uje vi6e opisannomu skriptu daje pro6e. Xota lu46e vse-taki vibrat' vse-taki mejdu prosto vstavkoy imeni avtora ili citirovaniem, 4tobi vse-taki ne zagromojdat' li6nimi elementami kommentarii. To est' ili replai, ili citati.

Na4nem s 6ablona kommentariev. Pervona4al'no nam nado zaklu4it' osnovnoy tekst kommentaria v span, 4tobi isklu4it' meta-informaciu. T.e. 4to-to vrode:

<span id="com-<?php comment_ID(); ?>">
	<?php comment_text(); ?>
</span>

Ssilka na citirovanie budet:

<a onclick="comQuote(
	'com-<?php comment_ID(); ?>',
	'<?php comment_author() ?>');return false"
href="#text">Citirovat'</a>

V js-fayle (ili kuske skripta v HTML) ne zabivaem o tom, 4to pervaa stro4ka - opredelenie peremennoy s id tekstarea u nas to je samoe. A vot funkcia pomo6nee viydet (zato odin raz dla vsex kommentariev, a s ke6irovaniem - daje men'6e):

function comQuote(oquotation, oauthor) {
  var otext = document.getElementById(oquotation);
  var txtarea =
	document.getElementById(name_textarea);
  if (window.getSelection)
	 var sel = window.getSelection();
  else if (document.getSelection)
	 var sel = document.getSelection();
  else if (document.selection) {
	 var sel = document.selection.createRange().text; }
  if (otext.innerText){
	  if (sel != "") txtarea.value +=
		oauthor + " napisal:n<blockquote>"
		+ sel + "</blockquote>nn";
	  else txtarea.value +=
		oauthor + " napisal:n<blockquote>"
		+ otext.innerText + "</blockquote>nn";
  }
  else {
	  if (sel != "") txtarea.value +=
		oauthor + " napisal:n<blockquote>"
		+ sel + "</blockquote>n";
	  else txtarea.value +=
		oauthor + " napisal:n<blockquote>"
		+ otext.textContent + "</blockquote>nn";
  }
  txtarea.setSelectionRange(txtarea.value.length,
	txtarea.value.length);
  txtarea.focus();
}

Posle etogo stanovitsa dostupno i bistroe citirovanie lubogo kommentaria. Xota, opat' je, ssilku neobxodimo budet oformit', 4tobi ona ne me6ala vzgladu i legko naxodilas' pri neobxodimosti.

Polnocennie avtorskie otveti i drevovidnie kommentarii rassmotrim pozje, ladnen'ko?

Reytingovanie

Plagini dla vnedrenia reytinga v post i kommentarii su6estvuut (naprimer, Comment Karma), odnako, v slu4ae blogov mne ne kajetsa perspektivnoy eta idea, prednazna4ennaa bolee dla social'nix servisov i bol'6ix (neupravlaemix) soob6estv.

Spasibo4ki

A vot plagin, kotoriy realizoval sleduu6uu ve6', mog bi imet' uspex. Ne tak davno Altayskiy blogger v svoem “podkaste” zatronul temu “spasibo”-goknokommentatorov, s kotorimi slivautsa i obi4nie posetiteli, kotorim ne4ego skazat', krome spasibo.

Re6enie problemi mojet v prostom plagine napodobie sol'noy podpiski, opisannoy nije - avtor ostavlaet tol'ko ssilku na seba (zakrituu v javascript’ax ili net, nevajno), kak bi govora “spasibo”. Kak sistema reytingovania prednazna4ena, 4tobi izbavit'sa ot vsevozmojnix “LOL” i “baan”, tak i podobniy plagin bi re6il problemu otdelenia spamerov ot kak bi normal'nix kommentatorov.

Opredelenie podpiski na kommentarii

Blagodaru Blogomoba, kotoriy vse-taki tknul mena nosom v funkciu dla opredelenia podpiski na kommentarii konkretnogo kommentatora (i naydenoe dimox’om). Takaa fi4a pozvolaet srazu videt', nado li otve4at' 4eloveku, ili on ne podpisalsa na kommentarii (xota nekotorie i ispol'zuut RSS dla etogo).

Deystvitel'no, v plagine Subscribe to Comments est' takaa funkcia (proverka na ee su6estvovanie stoit, 4tobi ne voznikalo o6ibki pri viklu4ennom plagine). Popravlu tol'ko dve ve6i. Esli verstka ispol'zuetsa ne HTML4, a XHTML, to nujno zakrit' odinarniy teg img. Plus dopolnitel'no k alt nado ispol'zovat' title, 4tobi bil ne tol'ko al'ternativniy tekst, no i podskazka pri navedenii kursora. T.e. konstrukcia prevra6aetsa v:

<?php
  if (function_exists('comment_subscription_status')) {
    if (comment_subscription_status()) {
      echo '<img src="http://.../subscribe.jpg"
		alt="(podpisan)" title="(podpisan)" />';
    }
  }
?>

V proverku e6e stoit dobavit' uslovie iz glavki pro avtorskoe videlenie

&& $comment->comment_author_email ==get_the_author_email()

Ved' i tak ponatno, 4to avtor podpisan na kommentarii v svoem bloge?

Podpiska bez kommentirovania

Takje etot zame4atel'niy plagin pozvolaet podpisivat'sa na po4tu, daje ne kommentirua. Voob6e, dla etogo tam slujit funkcia show_manual_subscription_form(), no lu46e vstavit' formu sobstvennoru4no, izbaviv6is' ot nenujnogo xlama i sobstvennoru4no poigrav6is' s CSS:

<?php
global $id, $sg_subscribe, $user_email;
if ( !$sg_subscribe->current_viewer_subscription_status() ) :
	get_currentuserinfo(); ?>
<form action="" method="post">
	<input type="hidden" name="solo-comment-subscribe"
		value="solo-comment-subscribe" />
	<input type="hidden" name="postid"
		value="<?php echo $id; ?>" />
	<input type="hidden" name="ref"
		value="<?php the_permalink() ?>" />
	<div>Podpisat'sa, ne kommentirua</div>
	<input type="text" name="email" id="solo-subscribe-email"
		value="<?php echo $user_email; ?>" />
	<input type="submit" name="submit" value="Podpisat'sa!" />
</form>
<?php endif ?>

Esli razme6aetsa forma do formi kommentariev, to, navernoe, stoit e6e vstavit' vizov sg_subscribe_start() pramo posle ob&avlenia global'nix peremennix.

Neobxodimost' v funkcii spornaa, no v kakoy-to mere ona est'. Ee nedostatok v tom, 4to perenapravlaet ona na menedjer podpisok. V simbioze s moim plaginom avtorskogo otveta a re6u i etu problemu, glavnoe ne zabit'.

Zavazka na frendfid

Sey4as dostato4no mnogo pol'zuutsa lentami-agregatorami (nu ili prosto imeut tam akkaunt dla krossposta vsakoy 4u6i iz ostal'nix isto4nikov). Nekotorie soob6enia v tom je frendfide, naprimer, vsplivaut v TOP Andeksa po raznim poiskovim zaprosam. Nu da ne sut'.

Est' vozmojnost' prikrutit' k kommentariam plagin Friendfeed Comments, kotoriy ne prosto otobrazit koli4estvo replik v obsujdenii na frendfide, no i pozvolit posmotret' ix tut je v bloge.

Problema zdes' tol'ko odna - vas voob6e kommentiruut na frendfide?

Na etoy ves'ma optimisti4noy note i zakon4im razbor nekotorix iz mnogix vozmojnostey, kotorie obleg4aut kommentatoram jizn'.

Nu, sobstvenno, s davno izvestnimi melo4ami po kommentariam mi razobralis', a mne nado nemnogo porabotat'/pospat'. Prodoljenie v opredelennom budu6em.