<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bulgarian Experience &#187; JavaScript</title>
	<atom:link href="http://www.mchell.net/xp/category/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.mchell.net/xp</link>
	<description>Уеблог за интерактивност, интерфейси, дизайн, хипертекст, изкуство и други.</description>
	<lastBuildDate>Tue, 20 Jul 2010 14:09:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Три извода от events tracking в Google Analytics (първа част)</title>
		<link>http://www.mchell.net/xp/401</link>
		<comments>http://www.mchell.net/xp/401#comments</comments>
		<pubDate>Wed, 30 Jun 2010 11:52:44 +0000</pubDate>
		<dc:creator>georgivar</dc:creator>
				<category><![CDATA[Interaction design]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Интерфейси]]></category>
		<category><![CDATA[Процес]]></category>

		<guid isPermaLink="false">http://www.mchell.net/xp/?p=401</guid>
		<description><![CDATA[От доста време вече в Google Analytics има възможност да се отчитат не само показвания на цели страници, но и отдлени интеракции в самата страница. Например, ако в дадена страница има видео плеър, човек може да следи колко от хората кликат на бутоните за плей, пауза и стоп. Едва наскоро обаче реших да използвам тая [...]]]></description>
			<content:encoded><![CDATA[<p>От доста време вече в Google Analytics има възможност да се отчитат не само показвания на цели страници, но и отдлени интеракции в самата страница. Например, ако в дадена страница има видео плеър, човек може да следи колко от хората кликат на бутоните за плей, пауза и стоп.</p>
<p>Едва наскоро обаче реших да използвам тая функционалност в реален и сравнително посещаван  сайт (btv.bg), за да проверя с реални данни предположенията си за дизайна.</p>
<h2>Как се ползва event tracking</h2>
<p>Google Analytics има метод _trackEvent, който може да се вика и му се предават няколко параметъра по този начин:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">_trackEvent<span style="color: #009900;">&#40;</span>category<span style="color: #339933;">,</span> action<span style="color: #339933;">,</span> opt_label<span style="color: #339933;">,</span> opt_value<span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>Какво означават отделните параметри си пише в документацията на Analytics &#8211; <a href="http://code.google.com/intl/bg/apis/analytics/docs/tracking/eventTrackerGuide.html" target="_blank">супер кратко, ясно и пълно описание на event tracking</a>.</p>
<p>Иначе с jQuery тракера се вика така:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#Logo a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    pageTracker._trackEvent<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Navigation&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Click Logo&quot;</span><span style="color: #339933;">,</span>  document.<span style="color: #660066;">title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Накратко това означава, че когато документът се зареди, javascript почва да следи за всеки клик върху линка и когато иам такъв ивент, записва в Google Analytics.</p>
<h2>Резултати за някои интерфейсни елементи</h2>
<h3>Никой не споделя линкове по имейл</h3>
<p>В тествания сайт под всяка новина, видео, анкета и т.н. има по няколко линка за споделяне в социални мрежи от сорта на Facebook, Twitter и т.н. Един от линковете беше „Препрати по имейл”, което означава да изпратиш на някой по имейл линк към съответната новина.</p>
<p><img class="alignnone size-full wp-image-406" title="event-tracking-1" src="http://www.mchell.net/xp/wp-content/uploads/2010/06/event-tracking-1.gif" alt="" width="261" height="43" /></p>
<p>Предположението ми беше, че никой не ползва тази функционалност. И наистина &#8211; статистиката показа, че нищожен процент (разбирай хилядни от процента) от хората, които са заредили страница с новината, кликат върху този линк.</p>
<p>В интерес на истината едва два пъти повече хора кликат на линка за споделяне в туитър. Споделянето във Facebook e най-популярната опция, но не си представяйте нещо феноменално като цифри.</p>
<p>Факт е обаче, че ефектът от един линк споделен във Facebook или Twitter е доста по-голям, тъй като всичките познати на човека, споделил линка биха го видели и евентуално кликнали обратно към вашия сайт. Докато при случая със споделянето по имейл единствено получателят на имейла би кликнал и посетил вашия сайт. С други думи – макар и кликовете по линковете за споделяне в социалните мрежи да не привличат кой знае колко повече внимание, ефектът от тях е доста по-голям.</p>
<p>Нещо, което би могло да влияе върху този резултат е начинът, по който е кръстен линка. „Препрати по имейл” е един вариант. По големите български новинарски сайтове най-често се използва или иконка с писмо без допълнитлен текст, или иконка с писмо и текст „Изпрати”, или „Изпрати по e-mail”. В  англоезичните сайтове изглежда има възприет стандарт  &#8211; иконка на писмо и текст „E-mail”. На английски обаче “e-mail” може и да е глагол, за който няма превод с една дума на български  &#8211; „имейлнѝ”/”имейлване”. Честно казано обаче се съмнявам да има достатъчно добър вариант, който драстично да повиши кликанията върху този тип линкове (остава си добър повод за <a href="http://www.google.com/websiteoptimizer" target="_blank">мултивариантно тестване</a>).</p>
<p><em>Продължението следва</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mchell.net/xp/401/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>eGov.bg</title>
		<link>http://www.mchell.net/xp/206</link>
		<comments>http://www.mchell.net/xp/206#comments</comments>
		<pubDate>Tue, 02 Oct 2007 20:25:03 +0000</pubDate>
		<dc:creator>georgivar</dc:creator>
				<category><![CDATA[CSS & XHTML]]></category>
		<category><![CDATA[Interaction design]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Общи приказки]]></category>
		<category><![CDATA[Ползваемост]]></category>

		<guid isPermaLink="false">http://www.mchell.net/xp/?p=206</guid>
		<description><![CDATA[По неофициална информация порталът наречен &#8220;Електронно правителство&#8221; струва 5 000 000 (пет милиона) лева. Намирам това за удивително и то в негативния смисъл. Съотношението цена &#8211; качество е ужасно. Огромна по моите разбирания сума е била заплатена за некачествен продукт. Ниското качество се забелязва във всички аспекти на реализацията на тоя проект. Техническата страна  Самият сайт [...]]]></description>
			<content:encoded><![CDATA[<p>По неофициална информация порталът наречен &#8220;Електронно правителство&#8221; струва 5 000 000 (пет милиона) лева.</p>
<p>Намирам това за удивително и то в негативния смисъл.</p>
<p>Съотношението цена &#8211; качество е ужасно. Огромна по моите разбирания сума е била заплатена за некачествен продукт. Ниското качество се забелязва във всички аспекти на реализацията на тоя проект.</p>
<p><strong>Техническата страна </strong></p>
<p>Самият сайт е техническо недоразумение, което аз самият (без да съм програмист) бих могъл да сглобя за по-малко от седмица с помощта на свободен софтуер. Представлява няколкостотин страници текст и няколко документа навързани в проста организационна структура. Леко донагласена инсталация на WordPress или MovableType би се справила с подобна задача.</p>
<p>Фронт-енд кодът на портала е под всякаква критика. Хората (всъщност не вярвам хора да са го писали, защото най-вероятно е автоматично генериран) не подозират за съществуването на уеб стандартите. За сметка на това смело използват JavaScriptпри положение, че в така реализирания сайт лично аз не бих се сетил да го използвам за нищо. Дори обикновените линкове не са обикновени линкове, а минават през JavaScript. Вероятно това доста ще затрудни различните злонамерени скриптове, но прави невъзможно за човек или добронамерен скрипт да използва информацията в сайта по един най-естествен начин &#8211; като направи връзка към някоя вътрешна страница. (За хората, които се вълнуват от доктайпове и валидация извадих два примери от css.a, класове с изчерпателните имена .stdtxt2upper:hover и ..subsubsubheader &#8230;)</p>
<p>Тука може да се направи едно леко изключение за частта с т.нар. &#8220;гео пространствени услуги&#8221;, която представлява интегрирана в сайта географска информационна система на някаква частна фирма, защото играта с тия системи не е много забавна в българския вариант &#8211; на запад си имат maps.yahoo.com. Но пък съм убеден, че системата не е разработена специално за този портал и най-вероятно е заплатен някакъв лиценз за ползването й. Всяка нормална такава система сравнително, лесно може да се интегрира с който и да е сайт и определено цената от 5 милиона лева ми се струва прекалена за един лиценз. Да не говорим, че върху всяка карта стои съобщението, че правата авторските права принадлежат на съответната частна фирма е безобразие &#8211; правителството си плаща на фирмата, за да и ползва услугата несимволична сума, а фирмата на всичкото отгоре си прави реклама на правителствения сайт.</p>
<p>От същия източник, който ни информира за цената на това бижу, научавам, че порталът седи върху 16 (шестнадесет) сървъра и 15 ТБ (петнадесет терабайта). Според изключително скромното ми мнение точно в тази област, ако системата е проектирана като хората това оборудване би трябвало да издържи на натоварването от това целата интернет аудитория в България да реши да го отвори в рамките на няколко часа. Натоварване, което по-също толкова грубите ми сметки едва ли би могло да с очаква в обозримо бъдеще. В интерес на истината дори и да се срине целият портал, загубата не би била кой знае каква.</p>
<p><strong>Графично оформление </strong></p>
<p>Не мога да се изкажа ласкаво и по отношение на дизайна.</p>
<p>Слава богу е изчистен и няма големи мигащи надписи в червено (засега).</p>
<p>Размерът на шрифта обаче е прекалено дребен. Самият шрифт е Tahoma, който както съм се интересувал е проектиран не за големи текстови блокове, а за използване в интерфейса &#8211; Microsoft препоръчва да се използва за имена на полета, за бутони, за менюта, за заглавия на прозорци и т.н., т.е. все места, които са малки по-размер и не се предвижда да се изписват кой знае колко дълги неща.</p>
<p>Сайтът очевидно е предвиден за резолюции от 1024 х 768 нагоре, защото при по-малки се появяват вертикални скролбарове. !?</p>
<p>Което ме насочва към следващия важен (най-важен) аспект за качеството на един уеб портал, а именно</p>
<p><strong>Ползваемост и достъпност на интерфейса и информацията</strong></p>
<p>Интерфесът очевидно е дело на хора, които нямат нужната подготовка за изработването на толкова важен и сложен проект.</p>
<p>Присъствието на връзки от сорта на &#8220;Текст&#8221;, &#8220;Статус&#8221;, &#8220;Гео пространствени услуги&#8221;, &#8221;Начален екран&#8221; на доста ключови места в интерфейса без да има допълнителен контекст.</p>
<p>Сайтът (без да съм правил специални текстове) е абсолютно недостъпен за специалните браузъри, които използват хората с физически недостатъци главно заради необяснимото използване на JavaScript връзки. Това го прави недостъпен и за търсещите машини и мобилните устройства. Нито едно изображение в сайта няма смислен алтернативен текст, а на някои места картинките се оказват от решаващо значение (напр., загадъчното червено &#8220;е&#8221; пред имената на някои от услугите, което като се замисля не носи особен смисъл и за тези, които го виждат, тъй като не беше свъразно с някаква по-специална функсионалност или съдържание).</p>
<p>Напълно безмислена функционалност е и скриването на информация от страница с JavaScript. Показването на тази скрита информация става без презареждане на страницата и при това без да става ясно защо е била скрита преди това.</p>
<p>Грозно, трудно за четене и невъзпитано е да се изписват цели изречения с главни букви. Страниците на рубрики в сайта представляват списъци с линкове към  подстраниците на съответната рубрика. Но понеже най-вероятно заглавията на тия подстраници са въведени с главни букви всички рубрики съдържат огромни блокове текст, изписани с главни букви. (може би това е била причината да бъдат скрити по подразбиране при зареждането на страницата (!) и да се налага, човек да ги отваря с помощта на JavaScript линк.)</p>
<p>Веднъж попаднал на някоя вътрешна страница, човек трудно може да се ориентира къде се намира в сайта и какво може да направи след като си свърши работата тук. Това е донякъде оправдано като се има предвид, че не можеш да се окажеш директно на някоя вътрешна страница, защото вътешните страници нямат свои уникални адреси, чрез които да ги намериш и достъпиш.</p>
<p><strong>И така нататък, и така нататък&#8230;</strong></p>
<p>Доста време отделих да изпиша горния текст. Доста други хора са отделили време, за да пишат по повод този проект:</p>
<p><a href="http://yurukov.net/blog/2007/10/01/bylgarskoto_elektronno_pravitelstvo/">Българското електронно правителство</a> @ yurukov.net/blog</p>
<p><a href="http://blog.veni.com/?p=315">Електронно правителство</a> @ blog.veni.com</p>
<p><a href="http://metaend.info/?p=793">metaend » Blog Archive » Електронно правителство</a></p>
<p><a href="http://blog.peio.org/?p=1045">eGov.bg &#8211; Пейо Попов</a></p>
<p><a href="http://bg.mykinda.com/tech/01/10/2007/elektronno-pravitelstvo-v-blgariya/">MyKinda Технологии » Blog Archive » Електронно правителство в България?</a></p>
<p>В заключение мога да кажа само:</p>
<p>&#8220;Пет милиона лева!!??!&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mchell.net/xp/206/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Връзка: Jack Slocum&#8217;s Blog</title>
		<link>http://www.mchell.net/xp/142</link>
		<comments>http://www.mchell.net/xp/142#comments</comments>
		<pubDate>Wed, 11 Oct 2006 07:42:00 +0000</pubDate>
		<dc:creator>georgivar</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[RIA технологии]]></category>
		<category><![CDATA[На кратко]]></category>

		<guid isPermaLink="false">http://www.mchell.net/xp/?p=142</guid>
		<description><![CDATA[Просто, за да не го забравя след време &#8211; Jack Slocum&#8217;s Blog. Прави допълнителна библитека към Yahoo! UI хавите. Безплатен грид, система за коментари в WordPress подобна на тази в drive.ru (коментари към всеки параграф, картинка, код от един пост) и други уникално полезни JavaScipt и AJAX трикове. Нещо като youngpup.net навремето, но много по-як.]]></description>
			<content:encoded><![CDATA[<p>Просто, за да не го забравя след време &#8211; <a href="http://www.jackslocum.com/yui/">Jack Slocum&#8217;s Blog</a>. Прави допълнителна библитека към Yahoo! UI хавите. Безплатен грид, система за коментари в WordPress подобна на тази в drive.ru (коментари към всеки параграф, картинка, код от един пост) и други уникално полезни JavaScipt и AJAX трикове. Нещо като <a href="http://www.youngpup.net">youngpup.net</a> навремето, но много по-як.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mchell.net/xp/142/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
