SEO блог и уеб програмиране » JavaScript http://ganbox.com/blog SEO практика: трикове при оптимизация и решаване на проблеми при уеб програмиране. Thu, 26 Jan 2012 19:15:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Бутончета за споделяне на линкове v.4 http://ganbox.com/blog/sb4/ http://ganbox.com/blog/sb4/#comments Mon, 24 Oct 2011 07:59:31 +0000 Георги Стефанов http://ganbox.com/blog/?p=1453 Ето и новата 4-та версия на JavaScript-а за социални бутони. Скриптът се предлага за безплатно ползване от ganbox.com.
За тези които не знаят, това са малки бутончета, които се показват на твоя сайт и всеки, който посещава страницата може да я сподели в социални сайтове за споделяне на линкове. По този начин получаваш линкове към твоя сайт, което действа добре на SEO оптимизирането на твоя сайт.

В новата четвърта версия са добавени бутони за новата социална мрежа Google+ и българските сайтове novoto.net и bghot.net. Променен е бутона на dаo.bg, да сочи към сайта bgrstar.com. Това се наложи поради продаване на домейна dаo от неговия собственик. Всички линкове от сайта dаo бяха прехвърлени в сайта bgrstar.com. Премахнати са няколко български социални мрежи, които са бавни и неудобни за ползване.

Работещ пример на този код има в дъното на сайта Директория за статии. След публикуване и одобрението на статия е добра идея тя да се изпрати към сайтовете за споделяне на линкове.

JavaScript плъгин за споделяне на линкове

Избери HTML код според енкодинга на твоя сайт.

Енкодинг UTF-8

Постави в твоя сайт HTML кода:

<!-- Start ganbox.com Social Bookmark code v.4 --><script type="text/javascript" src="http://ganbox.com/inc/sb4.js"></script><!-- End ganbox.com code -->

Енкодинг CP1251

Ако твоя сайт е с кодиране на текста cp1251, тогава използвай следната версия на скрипта:

 <!-- Start ganbox.com Social Bookmark code v.4 --><script type="text/javascript" src="http://ganbox.com/inc/sb4cp1251.js"></script><!-- End ganbox.com code -->

Кодът се поставя някъде между HTML таговете <body> и </body> на мястото, където искаш да се покажат бутончетата. Най-доброто място е в края на публикация, за да може човекът, който я е прочел да я сподели.

Ако вече ползваш по-стара версия на този скрипт, за да направиш обновяване е нужно само да промениш цифрата на версията. Например от sb3.js да стане sb4.js.

Брой разглеждания на тази статия: 1094

Подобни статии:

  1. Бутончета за споделяне на линкове v.3 Тази статия е продължение на статиите Безплатен скрипт за бутони...
  2. Бутони за социални мрежи v.2 Нова версия на скрипт за бутони за споделяне на ликове...

]]> http://ganbox.com/blog/sb4/feed/ 0 Лоши връзки и добри връзки към сайт http://ganbox.com/blog/%d0%bb%d0%be%d1%88%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8-%d0%b8-%d0%b4%d0%be%d0%b1%d1%80%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8/ http://ganbox.com/blog/%d0%bb%d0%be%d1%88%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8-%d0%b8-%d0%b4%d0%be%d0%b1%d1%80%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8/#comments Sun, 22 Nov 2009 16:32:33 +0000 gan http://ganbox.com/blog/?p=631 Много хора погрешно смятат, че колкото повече връзки сочат към техния сайт, толкова по-добре. За съжаление тук важи единствено максимата на Мечо Пух: „Колкото повече, толкова повече“. С други думи качеството на връзките е от много по-съществено значение. Ето няколко примера за добри и лоши линкове.

Лоши линкове

1. Недостъпни линкове

Това са връзки към твоя сайт, който са публикувани в чужд сайт и по някакъв начин са недостъпни за търсачките.  Най-често срещаните видове са:

1.1. Създаване на линковете с JavaScript. Целия линк или URL адреса се генерира динамично с JavaScript. Ако забраниш JavaScript-а в браузъра тези линкове изчезват. Във Firefox това става от Edit/Preferences отива се на третия таб Content и там се изключва третата опция Enable Java Script. Ще видиш как вижда страницата търсачката.

1.2. Линкове в страници, в които се влиза след логване с парола. Няма как търсачката да достигне до тези линкове освен, ако собственика на сайта не въведе име и парола за достъп до страницата в GWT (Google Webmaster Tools), но това понякога може да е опасно, защото може да разкрие конфиденциална информация.

1.3. Няма път до страниците, в които е връзката. Ако няма директен външен линк или поредица от вътрешни линкове до вътрешната страница, в която е връзката към твоя сайт е възможно тази страница да е недостъпна от бота на търсачката. Трябва след като влезеш в началната страница на сайта с от един до три клика на връзки, да можеш да достигнеш до страницата, в която има връзка към твоя сайт. Ако връзката е на прекалено дълбоко ниво е възможно да не се индексира. Ако дори една от връзките по пътя към вътрешната страница е динамична през Javascript, реално търсачката няма път и няма да индексира връзката. Понякога интерфейса на сайта е толкова объркан, че нормален човек не може да открие пътя, но ако има път търсачката ще го открие. За да си сигурен, че има път може да пуснеш създаване на Google Sitemap (което за големи сайтове отнема много време) и след това в създадения XML да потърсиш URL към страницата, в която е твоята връзка.

В случая с използване на JavaScript такива връзки са изрично направени от собственика на сайта да бъдат недостъпни в другите случаи е възможно да е неволно. Ако ти се случи да наемаш връзки внимавай дали те са достъпни за търсачките!

2. Временни линкове

2.1. Виртуални страници. Има динамично създавани страници, на които по GET се подава домейна. Те може да показват линк към сайта и дори да вземат описанието направо от description тага на твоя сайт, но те съществуват само докато потребителя не отвори друга страница. Такива страници са безполезни, освен ако не се сложи линк към тях в страница, която вече е индексирана от Google.


2.2. Временни страници. Това са връзки в страници, който след време изчезват. Например линк в динамична страница „Най-новите сайтове“ или в сайт за обяви, който изчезва след 6 месеца .

Друг вариант е самата страница съдържаща връзката да изчезва, като например след месеци бъде преместена в архив, до който се стига след логване.

3. Линкове с атрибут nofollow

Връзки с атрибут rel=“nofollow“ нямат достатъчно SEO тежест . Този атрибут е замислен да указва на ботовете на търсачките да не следват тази връзка. Всеки занимаващ се със SEO добре знае, че такива връзки отдавна се следват от търсачките, но не са толкова ценни колкото другите. Самите Гугъл съветват рекламодателите да маркират с този атрибут връзки, които са платени.

4. Връзки от слаби сайтове

Дълго време не вярвах на това, че връзки от слабо авторитетни сайтове могат да навредят на сайта ми, докато не го изпитах лично. Такива сайтове са слабо посещавани сайтове с нисък Google Page Rank или с неподходящо съдържание. Самите Гугъл съветват, ако засечем връзка към нашия сайт поставена на такъв сайт да опитаме да се свържем със собственика на сайта и да го помолим да махне връзката. Това за мен е пълно безумие! От една страна това е много трудно осъществимо, защото има много изоставени сайтове и от друга, защо Гугъл не се грижат за това да не обръщат внимание на подобна връзка, като много добре знаят силата на сайта.

5. Връзки от неподходящи сайтове

5.1. Връзки от сайтове с неподходяща тематика

Връзки от сайтове, в които темата е различна от тази в твоя сайт и особено в страницата, в която е поставена връзката. Стреми се да печелиш връзки от сайтове, които не са ти пряка конкуренция, но са близки по тематика. Например думите „обучения“ и „уроци“ са много близки и е доста удачно да поставиш връзка към твоя сайт за „уроци по английски“ в сайт за „обучения по маркетинг“.

5.2. Връзки от сайтове с неподходящо съдържание

Особено е опасно ако сайта от който получаваш линк има „съдържание за възрастни“, текстове нарушаващи законите, кракерски програми или курсове, призоваващи към насилие, прекалено вулгарно съдържание, сатове за залагания. Опасно е дори връзката да се намира на страница, която няма нищо нередно, но е част от такъв сайт.

5.3. Сайтове ползващи забранени SEO техники

Едва ли твоя сайт ще пострада, но рано или късно ще загубиш тази връзка.

6. Връзки с грешни атрибути

Анкор се нарича текста затворен между таговете <a> и </a>, а описанието се поставя в title атрибут на връзката. В примера

<a href=“http://ipotpalmax.com“ title=“Ипотпал Max – статии за лаптопи“>лаптопи</a>

анкор е думата „ипотпал“, а описанието е „Ипотпал Max – статии за лаптопи“. Особено важно е анкора да съдържа ключова дума, по която искаш да се класираш по-добре при търсене в Гугъл.

Виждал съм злепоставящи връзки към сайт създадени от конкурент, поставени в трети сайт. Връзките съдържаха анкор и описание със съдържание за възрастни. Нямам лични впечатление дали такива връзки могат да навредят на сайта, който сочат. Би трябвало да не се вземат под внимание.

7. Трудно достъпни линкове

7.1. Дълбоко заровени линкове.

Най-силни са линковете, които са най-близо до началната страница. Линкове, които са прекалено „дълбко“ в дървото на директорията на сайта. Ако сайта е каталог с много категории и подкатегории, то пътя от началната страница до страницата, в която се поставя твоя линк е прекалено дълъг – примерно 3 клика или повече. Такива линкове имат по-слаба тежест.

7.2. Бавно достъпни линкове.

Страници, които се зареждат много бавно е възможно да не се индексират или да се индексира само съдържанието в началото. Ако по пътя от началната страница до линка има поне една страница, която се зарежда бавно (например показва прекалено дълъг списък), то всички линкове, които зависят от нея може да не бъдат индексирани или дори да бъдат извадени от индекса. По този начин може да бъде отрязан цял клон от дървото с линкове.

8. Плаващи линкове ©

Плаващ линк е такъв, на който URL адреса на страницата, в която се намира, по някаква причина се променя поне веднъж след първоначлното публикуване и индексиране. Например:

- динамична страница, която показва последните 20 връзки и в момента, в който бъдат добавени още 20 връзки, твоя линк се премества на нова по-задна страница от списъка;

- URL-та които съдържат накрая параметър като &PHPSESSID=3d7a452c89c32b423ba14790d3f24a14

- URL-та които се променят, защото публикациите са били преместени в архив и вече включват в себе си дата например /2009/02/заглавие

- в директория, в която по някаква причина са разместили или са променили id-та на категории;

Трябва пътя от URL адреси от началната страница до страницата с връзката да не се променя.

(плаващи линкове е термин създаден от ganbox.com).

9. Гора от линкове

9.1. Много линкове. Ако в една страница има прекалено много изходящи линкове (връзки към други сайтове), всеки от линковете губи силата си. Не се препоръчва да има повече от 10 изходящи линка в една страница (в това число Google реклами и банери).

9.2. Повтарящи се линкове. Ако в една страница има повече от един линк сочещ към една и съща страница, се индексира само първия линк. По този начин ако първия линк е от картинка, а втория има текстов анкор, трябва да им се разменят местата, като текстовия линк се постави в HTML кода преди другия, защото е много по-ценен. Ако дизайнера не е доволен, нека да ги размести визуално с CSS стил ;)

10. Светкавични линкове

Ако ползваш инструмент за създаване на линкове (автоматичен събмитър на линкове) и сайта е съвсем нов, трябва много да внимаваш да не създадеш прекалено много линкове наведнъж към твоя сайт. Трябва кривата на увеличение на броя на новите линкове да бъде близка до тази на популярен сайт, който печели връзи от само себе си заради полезно съдържание. Примерна схема на линкване: първия ден изпрати само 2 линка, втория 3, третия 4, четвъртия 5, петия 6, шестия 8, седмия 10 и през следващите 3 седмици пращай по различен брой линкове на ден, но не повече от 10 на ден. Добрата новина е, че като събмитваш линкове по уеб директории и директории за статии, те биват одобрявани по различно време – малка част от тях веднага, а други първо се одобряват от редактор и може да мине седмица и дори повече време. Малка част от линковете биват отхвърляни. При всички случаи отхвърляй всякакви оферти, които ти предлагат по няколко хиляди беклинка наведнъж! Това почти сигурно ще ти спечели наказание от Гугъл, като най-лекото е падане назад в индекса, за стар домейн може да е 30 позиции назад, за нов домейн може да е 60 или 100 позиции назад. В най-тежките случаи ще получиш пълно отпадане от индекса (бан) средно от 3 до 6 месеца.

.

.

Добри линкове

1. От авторитетен сайт

Силни връзки са тези от сайт със стар домейн, който има много посещения и има висок Google Page Rank. Дори сайта да не е близък по тематика с твоя, такава връзка ще ти бъде полезна. Обикновено такива сайтове са утвърдени уеб директории или социални мрежи.

2. От тематичен сайт

Най-трудно се спечелват връзки от тематични сайтове, защото обикновено те са ти пряка конкуренция. Много хора не разбират, че размяната на връзки между два тематични сайта е полезна и за двата, дори ако единия е два пъти по-посещаван от другия. Тук може да ти помогне SEO специалист който да води преговори с подходящи сайтове. Такива връзки са от изключителна важност и си струва дори да наемеш връзка в тематичен сайт. Ако все пак не успееш да размениш връзка с конкурент, опитай в сайтове с близка тематика. Гугъл разбира от синоними и знае кои думи в какви словосъчетания се срещат, остава ти да се сетиш за това ;)

3. Връзки към вътрешни страници

Изключително важно е да линкваш не само началната си страница, а и вътрешните страници. Уеб директориите не могат да ти помогнат, но социалните мрежи за споделяне на връзки ще са от голяма полза.

4. Връзки от съдържанието на сайт

Връзки поставени във футъра или в менюто на сайт се показват на всички страници на сайта и по този начин ти получаваш много връзки към сайта си от всяка една страница. За съжаление търсачките все по-умело откриват такива връзки и им дават много по-малка тежест от връзки поставени в уникално съдържание на сайта, например в статия. При PHP сайт  може да се използва една хитрост, с която връзките да са правят с различен title, анкор и други атрибути, но в дългосрочен план това решение не е добро.

5. Правилни атрибути

Както вече казах анкора и title атрибута е добре да съдържат ключови думи. С навлизане на семантичните мрежи все по-голямо значение се отдава на атрибута rel. Не говоря за nofollow, а за стандарта XFN и различните релации между сайтовете. При хитро използване на тези атрибути може да се постигне добър SEO ефект.

Общи насоки

Струва се да се отбележи, че еднопосочните връзки към твоя сайт, са по-силни отколкото, ако има размяна на връзки между двата сайта и особено, ако са линкнати само началните страници. Изключение правят тематичните сайтове, размяната на връзки между такива сайтове е много добре и за двата сайта. Да, точно така! Добре е да размениш връзки с конкуренцията. Най-добрият вариант е ако можеш да намериш сайт с много близка тематика и който не ти е пряка конкуренция. Например сайт за почистване на офиси и сайт за продажба на почистващи препарати. Тънък момент е задаване на подходящ rel атрибут на връзката.

Заключение

Май изграждането на връзки към сайт не е толкова проста работа както си мислеше нали? Също така имай предвид, че това е непрестанен процес, който е част от услугата SEO поддръжка и ти помага да запазваш и подобряваш позициите на сайта в резултатите от търсене.

В статията Популяризиране на сайт с външни връзки давам някои идеи за спечелване на връзки. Използвай ги умно!

Брой разглеждания на тази статия: 6627
(след дата 20 декември 2009)

Подобни статии:

  1. Популяризиране на сайт с външни връзки . След като един сайт е напълно завършен и му...
  2. WordPress плъгин за социални мрежи Това е един плъгин за WordPress, който автоматично добавя след...

]]> http://ganbox.com/blog/%d0%bb%d0%be%d1%88%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8-%d0%b8-%d0%b4%d0%be%d0%b1%d1%80%d0%b8-%d0%b2%d1%80%d1%8a%d0%b7%d0%ba%d0%b8/feed/ 9 jQuery галерия за бързо преглеждане на снимки http://ganbox.com/blog/jquery-%d0%b3%d0%b0%d0%bb%d0%b5%d1%80%d0%b8%d1%8f-%d0%b7%d0%b0-%d0%b1%d1%8a%d1%80%d0%b7%d0%be-%d0%bf%d1%80%d0%b5%d0%b3%d0%bb%d0%b5%d0%b6%d0%b4%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%81%d0%bd%d0%b8%d0%bc/ http://ganbox.com/blog/jquery-%d0%b3%d0%b0%d0%bb%d0%b5%d1%80%d0%b8%d1%8f-%d0%b7%d0%b0-%d0%b1%d1%8a%d1%80%d0%b7%d0%be-%d0%bf%d1%80%d0%b5%d0%b3%d0%bb%d0%b5%d0%b6%d0%b4%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%81%d0%bd%d0%b8%d0%bc/#comments Thu, 20 Aug 2009 11:48:12 +0000 gan http://ganbox.com/blog/?p=294 Представям ти един jQuery плъгин, който създава уеб интерфейс за преглеждане на снимки качени на твоя сайт.

Възможностите на плъгина галерия са наистина впечатляващи.

1. След зареждане на страницата освен първата снимка, която гледаш в момента, започват предварително да се зареждат следващите снимки и при натискане на връзката „Следваща снимка“, снимката която следва се зарежда моментално;

2.  Навигацията между снимките се представя с умалени изображения на снимките (thumbnails) и може лесно да прескачаш от една снимка на друга с натискане на мишката. Малките снимки се разделят на страници, когато са много.

3. Всяка снимка има отделна котва, като това ти дава възможност да направиш отметка (bookmark) на отделна снимка;

4. Автоматично преглеждане на снимките (slideshow). През няколко секунди снимките се сменят.

5. Под всяка снимка може да се слага описателен текст;

6. Гъвкава конфигурация на настройките. Може да задаваш през колко секунди да се сменят снимките, колко снимки да се зареждат предваритело и др.

7. Управление на изгледа с CSS файл;

8. При забранен JavaScript в браузъра снимките се показват като списък – връзките към снимките и описанията им са в обикновен <li>  таг. По този начин търсачките имат достъп до всяка снимка и индексират лесно страницата.

9. За по-напредналите има възможност да се дописват JavaScript функции, които създават интересни ефекти при превключване от една снимка към друга.

10. Възможност за повече от една галерия в една и съща страница.

11. Галерията има валиден XHTML код по стандартите на W3C.

Галерията е много бърза, а точки 5, 8  и 11 правят галерията чудесен избор за един SEO оптимизиран сайт.

Работещ пример има в страница снимки от фирмени обучения от Arthur Adams.

Как се инсталира галерията?

Плъгинът работи с jQuery версия 1.2.6 или по-нова. Ако вече имаш jquery в твоя сайт провери коя версия е и ако е по-стара от 1.2.6 ще трябва да я подмениш. Ако имаш по-нова версия, която ползваш за нещо друго, тогава не е нужно да я променяш. В момента последната версия е 1.3.2, но аз ти препоръчвам да ползваш възможно по-стара версия на jQuery. Причината е бързодействието на сайта. Не ти трябват излишни 20-30K във всяка страница. Също така ползвай съкратената версия, тази която има в името си min. Това е същия файл, но без излишни интервали в него. Получения js файл се чете много трудно, но се зарежда значително по-бързо.

1. Изтегли файловете.

http://arthuradams.bg/jscripts/jquery-1.2.6.min.js или директно от официалния сайт на jQuery http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

и файла с плъгина от тук http://arthuradams.bg/jscripts/jquery.galleriffic.min.js и ги постави в директория /js,  която трябва да е в главната уеб директория (ако нямаш такава директория на сървъра първо я създай).

Изтегли още файловете http://arthuradams.bg/css/galleriffic.css и http://arthuradams.bg/css/loader.gif и ги постави в директория /css в главната ти уеб директория.

За удобство всичките файлове съм ги включил в този архив ganbox.com_gallery.

2. Създай страницата на галерията.

Например gallery.html и между таговете <head> постави обръщение към JavaScript-овете и към CSS файла.

<head>
...
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.min.js"></script>
<link rel="stylesheet" href="/css/galleriffic.css" type="text/css" />
...
</head>

3. Създай div контейнерите на галерията.

<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
    ... списък с тагове <li> които описват снимките даден е по-долу ...
</div>

Всеки от тези div е незадължителен. Може да премахнеш например реда с div caption и така под снимките няма да има описания.

4. Добави списък със снимки.

В контейнера div thumbs постави толкова тага <li> колкото снимки има. Формата е следния:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="път до снимката с голям размер" title="заглавие на снимката">
            <img src="път до умалена картинка" alt="заглавие на снимката" />
        </a>
        <div class="caption">
            (произволен HTML тук например с описание на снимката)
        </div>
    </li>
    ... (тук постави списък с останалите елементи <li> за всяка снимка)
</ul>

Галерията изисква за всяка снимка да има освен оригиналната снимка и умалено копие (thumbnail). Да предположим, че имаш 3 снимки в папка /img в главната уеб директория с имена на файловете 1.jpg, 2.jpg, 3.jpg с големина примерно 800×800 пиксела и техни умалени копия с имена 1s.jpg, 2s.jpg и 3s.jpg и големина 40×40 пиксела. Тогава списъкът със снимки ще изглежда по този начин:

<ul class="thumbs noscript">
    <li>
        <a class="thumb" href="/img/1.jpg" title="заглавие на снимка 1">
            <img src="/img/1s.jpg" alt="заглавие на снимка 1" />
        </a>
        <div class="caption">
            (описание на снимка 1)
        </div>
    </li>


    <li>
        <a class="thumb" href="/img/2.jpg" title="заглавие на снимка 2">
            <img src="/img/2s.jpg" alt="заглавие на снимка 2" />
        </a>
        <div class="caption">
            (описание на снимка 2)
        </div>
    </li>


    <li>
        <a class="thumb" href="/img/3.jpg" title="заглавие на снимка 3">
            <img src="/img/3s.jpg" alt="заглавие на снимка 3" />
        </a>
        <div class="caption">
            (описание на снимка 3)
        </div>
    </li>


  <!-- ... (тук постави списък с останалите елементи <li> за всяка снимка) -->


</ul>

Ако нямаш умалени копия използвай специална програма за създаването им, например уеб инструмента Промяна на снимка или безплатната програма от irfanview.com. В краен случай ако нямаш малки снимки може да зададеш пътя до големите снимки, но това ще бави зареждането на страницата. Разбира се за създаване на списъка може да се ползва цикъл  foreach на php.

5. Стартирай галерията.

Извикай следния JavaScript код:

<script type="text/javascript">
	// Тези стилове се активират само ако браузъра има включен JavaScript
	// Ширината 300px е за полето с малките снимки
	$('div.navigation').css({'width' : '300px', 'float' : 'left'});
	$('div.content').css('display', 'block');

	// Първоначално задава opacity на малките картинки и
	// допълнителни стилове за hover ефект
	var onMouseOutOpacity = 0.67;
	$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
		.hover(
			function () {
				$(this).not('.selected').fadeTo('fast', 1.0);
			},
			function () {
				$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
			}
		);

	$(document).ready(function() {
		// Инициализиране на галерията
		var galleryAdv = $('#gallery').galleriffic('#thumbs', {
			delay:                  3000, /* това са 3 секунди */
			numThumbs:              12,
			preloadAhead:           10, /* задай -1, за да зареди всички */
			enableTopPager:         true,
			enableBottomPager:      true,
			imageContainerSel:      '#slideshow',
			controlsContainerSel:   '#controls',
			captionContainerSel:    '#caption',
			loadingContainerSel:    '#loading',
			renderSSControls:       true,
			renderNavControls:      true,
			playLinkText:           '&raquo; Автоматично разглеждане',
			pauseLinkText:          '# Пауза',
			prevLinkText:           '&laquo; Предишна ',
			nextLinkText:           'Следваща &raquo;',
			nextPageLinkText:       'Следваща &raquo;',
			prevPageLinkText:       '&laquo; Предишна',
			enableHistory:          true,
			autoStart:              false,
			onChange:               function(prevIndex, nextIndex) {
				$('#thumbs ul.thumbs').children()
				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onTransitionOut:        function(callback) {
				$('#caption').fadeTo('fast', 0.0);
				$('#slideshow').fadeTo('fast', 0.0, callback);
			},
			onTransitionIn:         function() {
				$('#slideshow').fadeTo('fast', 1.0);
				$('#caption').fadeTo('fast', 1.0);
			},
			onPageTransitionOut:    function(callback) {
				$('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:     function() {
				$('#thumbs ul.thumbs').fadeTo('fast', 1.0);
			}
		});
	});
</script>

Ако има въпроси или нещо не тръгва пишѝ коментар, като сложиш връзка към кода.

Много добра галерия, бърза, удобна и SEO приятелски ориентирана. Ако някой иска да му инсталирам тази галерия в сайта може да се свърже с мен за оферта.


В статията са ползвани материали от сайта на автора на плъгина http://www.twospy.com
 
Брой разглеждания на тази статия: 5300
(след дата 20 декември 2009)

Подобни статии:

  1. Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....
  2. Промяна на изображение Нов безплатен уеб инструмент от ganbox.com за обработване на изображения....
  3. Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

]]> http://ganbox.com/blog/jquery-%d0%b3%d0%b0%d0%bb%d0%b5%d1%80%d0%b8%d1%8f-%d0%b7%d0%b0-%d0%b1%d1%8a%d1%80%d0%b7%d0%be-%d0%bf%d1%80%d0%b5%d0%b3%d0%bb%d0%b5%d0%b6%d0%b4%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%81%d0%bd%d0%b8%d0%bc/feed/ 2 Премахване на грешки в сайт и преминаване към XHTML http://ganbox.com/blog/%d0%bf%d1%80%d0%b5%d0%bc%d0%b0%d1%85%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-html-%d0%b3%d1%80%d0%b5%d1%88%d0%ba%d0%b8/ http://ganbox.com/blog/%d0%bf%d1%80%d0%b5%d0%bc%d0%b0%d1%85%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-html-%d0%b3%d1%80%d0%b5%d1%88%d0%ba%d0%b8/#comments Tue, 11 Aug 2009 12:17:52 +0000 gan http://ganbox.com/blog/?p=76 Тази статия е за често срещани HTML грешки в сайтовете и оправянето им с помощта на HTML валидатора http://validator.w3.org  Валидаторът дава доста подробни обяснения, но понякога решението не е очевидно. Тук разглеждам именно такива трудни за отстраняване грешки.

Нямам намерение да убеждавам някой, че трябва да изчисти грешките в своя сайт – приемам, че отдавна е убеден, че това е полезно не само от SEO гледна точка, но и поради улесняване на достъпа на незрящи посетители до сайта.

Изчистването на HTML код от грешки може да бъде непосилна задача за доста хора. Какво ще стане ако напишеш името на твоя домейн във валидатора и видиш резултат „Result: 525 Errors, 226 warning(s)“. Най-важното „Без паника!“, големия брой грешки не трябва да те впечатлява, защото грешките са взаимно свързани – изчистването на една грешка може да премахне много след нея.

Ето често срещани примери за грешки и тяхното отстраняване.

1. Премахване на атрибути на тага body.

Грешка:
Line 14, Column 36: Attribute „leftmargin“ is not a valid attribute
<body bgcolor=“#D9D5D2″ leftmargin=„0″ topmargin=“0″ marginwidth=“0″ marginheight=“0″>
Решение:

Премахват се атрибутите на тага body и се поставя техен аналог в главния CSS файл.

Ако твоя сайт няма  CSS файл. Създай в главната уеб директория празен текстов файл style.css и добави в HTML файла между head таговете реда:

<link rel=“stylesheet“ href=“/style.css“ type=“text/css“ media=“screen,print“ />

след това промени боди тага в HTML файла така:
<body>
Във файла style.css се поставят правилата:
body {
text-align: center;
    margin: 0;
    padding: 0;
    background-color: #D9D5D2;
}

2. Заместване на тага embed с object.

Тага embed е остарял таг за включване на Flash анимация в страницата.

Грешка:

Line 136, Column 12: Attribute „SRC“ is not a valid attribute. Did you mean „src“?

<embed src=„images/bcastr31.swf“ width=880 height=330 quality=“high“ TYPE=“appli

Решение:

Премахване на таг embed разглеждам в отделна статия Флаш анимация без таг embed за валиден XHTML

3. Премахване на атрибута onload на тага img.

Уеб страници създадени с програмата „Web Page Maker“, които съдържат картинки в навигацията, имат атрибут onLoad на img таговете. Той вика JavaScript функцията MM_preloadImages(). Този код е невалиден и дава следната грешка:

Грешка:

Line 96, Column 228: Attribute „ONLOAD“ is not a valid attribute. Did you mean „onload“?
…eria.html“><img name=“nav20″ onLoad=„MM_preloadImages(‘images/nav1.gif…
HTML кода, който поражда грешката, изглежда като този:
<div id=„nav1″><a onMouseOut=„MM_swapImgRestore()“
onMouseOver=„MM_swapImage(‘nav1′,“,’images/nav1.gif’,1)“ href=„index.html“>
<img name=„nav1″ onLoad=„MM_preloadImages(‘images/nav1.gif’)“
alt=„“ border=0 src=„images/nav1.gif“ width=„180″ height=„26″></a>
</div>
Решение:

За да направя кода валиден и да запазя функциалността, просто премествам атрибута в тага body за всички бутони от навигацията.
<body onload=„MM_preloadImages(‘images/nav1.gif’);MM_preloadImages(‘images/nav2.gif’);“>
а горния код се съкращава до:
<div id=„nav1″><a onmouseout=„MM_swapImgRestore()“
onmouseover=„MM_swapImage(‘nav1′,“,’images/nav1.gif’,1)“ href=„index.html“>
<img name=„nav1″ alt=„“ border=0 src=„images/nav1.gif“ width=„180″ height=„26″></a>
</div>
Променени са също onmouseout и onmouseover с малки букви. Всичко това води до валиден XHTML код.

4. Заместване на тага marquee с jQuery скролер на текст.

Тага marquee е много остарял таг и не е по XHTML стандарта. При поставяне на текст между тагове marquee текста започва да се движи хоризонтално или вертикално. С използването на този таг браузерът натоварва процесора и движението е насечено, изглежда много грозно и трудно се чете от посетители на сайта. При валидиране на страницата валидатора дава следната грешка:

Грешка:

Line 41, Column 52: Attribute “DIRECTION” is not a valid attribute
<marquee direction=„up“ scrollamount=“2″ loop=“true“><ul>…

Решение:

Най-доброто решение за заместване на този таг безспорно е с използване на JavaScript.

Подробно решение на проблема съм дал в статията Заместване на тага marquee за валиден XHTML

Това са едни от най-често срещаните грешки. Ако някой среща затруднение с грешка, която не може да разбере, нека пише коментар като пусне връзка към сайта.

5. Ползвай &amp; вместо & при параметри на скрипт.

Грешка:

Line 53, Column 49: cannot generate system identifier for general entity „dropdown_id“
…s=“lang“><a href=“/page.php?lang=bg&dropdown_id=30″ class=“bul“>BG</a> <a hre…
Решение:

Замени всички & с &amp; в параметри на връзките.

Пример:
/page.php?lang=bg&dropdown_id=30
става
/page.php?lang=bg&amp;dropdown_id=30

6. Не ползвай блокови тагове включени в inline тагове.

Грешка:

Line 172, Column 85: document type does not allow element „h1″ here; missing one of „object“, „ins“, „del“, „map“, „button“ start-tag
…“ title=“Начало форум“ id=“logo“><h1>ganbox.com SEO форум</h1></a></div>

Решение:

Таг h1 не може да се включва в тага a. Просто размени местата им от:
<a href=„./index.php“ title=„Начало форум“ id=„logo“><h1>ganbox.com SEO форум</h1></a>
на:
<h1><a href=“./index.php“ title=“Начало форум“ id=“logo“>ganbox.com SEO форум</a></h1>

Тук съм дал само някои от най-често срещаните грешки. Периодично ще допълвам статията, ако измисля още.

Веднъж като схванеш принципа на действие и ще ти става все по лесно да изчистваш грешките от своя сайт.

С безплатния инструмент SEO състояние на сайт можеш да проверяваш началната страница на сайт за HTML грешки, както и много друга полезна SEO информация за сайта.

Брой разглеждания на тази статия: 3543
(след дата 20 декември 2009)

Подобни статии:

  1. Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....
  2. Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...
  3. XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

]]> http://ganbox.com/blog/%d0%bf%d1%80%d0%b5%d0%bc%d0%b0%d1%85%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-html-%d0%b3%d1%80%d0%b5%d1%88%d0%ba%d0%b8/feed/ 1 Заместване на тага marquee за валиден XHTML http://ganbox.com/blog/%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-marquee-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/ http://ganbox.com/blog/%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-marquee-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/#comments Tue, 02 Jun 2009 08:28:30 +0000 gan http://ganbox.com/blog/?p=121 HTML тага marquee се използва за автоматично скролиране на текст. Текста поставен между тагове marquee се показва от браузъра като движещ се текст, хоризонтално или вертикално. Не използвай тага marquee основно по следните причини: кода на страницата, която съдържа marquee не е валиден XHTML; браузъра натоварва процесора на компютъра;  движението не е плавно, а накъсано и като резултат от това изглежда грозно и се чете трудно. Грозни примери има тук.

Да приемем, че имаш страница която съдържа код за превъртане на новини. Подобен на този:
<div class=“news“>
<marquee direction=“up“ scrollamount=“2″ loop=“true“>
<ul>
<li><h4><span class=“orange“>Заглавие 1</span></h4><p>Текст новина 1</p></li>
<li><h4><span class=“orange“>Заглавие 2</span></h4><p>Текст новина 2</p></li>
<li><h4><span class=“orange“>Заглавие 3</span></h4><p>Текст новина 3</p></li>
  </ul>
</marquee>
</div>
При опит страницата да мине през валидатора се получава грешка подобна на следната:

Line 41, Column 52: Attribute „DIRECTION“ is not a valid attribute
<marquee direction=„up“ scrollamount=“2″ loop=“true“><ul>…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.

Заместване на тага marquee с jQuery

Най-доброто решение на проблема е като тази част от кода за показване на новини се преработи на JavaScript.

Следния пример се базира на кода на Easy Slider 1.5 за скролиране на текстово съдържание и на картинки. Този код от своя страна разчита на библиотеката jQuery.

Копирай файловете:

http://arthuradams.bg/jscripts/jquery.js

http://arthuradams.bg/jscripts/easySlider1.5.js

http://arthuradams.bg/jscripts/slider.js

и ги качи в директория jscripts, която се намира в главната уеб директория.

Файла http://arthuradams.bg/css/slider.css постави в /css

Файловете за бутончета за превъртане (правени от мен)

http://arthuradams.bg/images/btn_prev.gif

http://arthuradams.bg/images/btn_next.gif

постави в директория /images

В страницата която ще показва новините между таговете head включи файловете
<script type=„text/javascript“ src=„jscripts/jquery.js“></script>
<script type=„text/javascript“ src=„jscripts/easySlider1.5.js“></script>
<script type=„text/javascript“ src=„jscripts/slider.js“></script>
<link href=„css/slider.css“ rel=„stylesheet“ type=„text/css“ media=„screen“ />
Замествам целия блок div id=news с:
<div id=„slider“>
<ul>
<li><h4><span class=“orange“>Заглавие 1</span></h4><p>Текст новина 1</p></li>
<li><h4><span class=“orange“>Заглавие 2</span></h4><p>Текст новина 2</p></li>
<li><h4><span class=“orange“>Заглавие 3</span></h4><p>Текст новина 3</p></li>
</ul>
</div>
Това е. Получения код е валиден XHTML и движението е много по-плавно.  Освен това можеш да използваш бутончето стрелка нагоре, за да се върнеш на предната новина при което движението спира, за да може да я прочетеш спокойно. Настройки за движението, като скорост, секунди за които спират новините и др.  се задават от файла jscripts/slider.js

Работещ код има във всяка страница на сайта за обучения по мениджмънт и маркетинг arthuradams.bg

Слайдерът може да скролира не само текст, но и картинки.

Брой разглеждания на тази статия: 3658
(след дата 20 декември 2009)

Подобни статии:

  1. Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...
  2. XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...
  3. Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете...

]]> http://ganbox.com/blog/%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-marquee-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/feed/ 6