Oct 8 2012

Първи позиции в Google

Автор:

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

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

Интересното, което се наблюдава в последно време е, че конкуренцията е доста голяма и се измислят все нови и нови подобрения от които можете да се възползвате и така да се развивате много по-бързо и добре. Пример за това са така наречените: директории за статии. Важно е да следите новостите и да ги включвате в подобренията на сайта ви, защото ако веднъж сте стигнали до първите места в дадена търсачка и постоянно правите подобрения, то много трудно ще бъдете изместени от там.

Rate this post


Jul 27 2012

Нова теория за изработка на уеб сайт

Автор:

Има нова теория за изработка на уеб сайтове.

При създаването на все повече анимирани ефекти в сайтовете се получи пренасищане от тях и на уеб потребителите им омръзнаха. Когато човек иска да гледа анимирани ефекти си тегли филм, но когато търси продукт или услуга ги търси в интернет. Точно тук се намира и основната причина да бъде създадена новата теория за изработка на уеб сайтове. Анимираните ефекти само утежняват сайта и така той става по-труден за откриване от търсачките (в България основно Google)
Друга причина са разходите. Направата на уеб дизайн с анимирани ефекти оскъпява продукта и така няма да могат да се инвестират достатъчно средства в интернет рекламата на сайта, кампаниите в социалните мрежи и най-важното – Оптимизацията за търсачки.
Като обобщение на причините за нужда от нова теория за изработка на уеб сайтове са следните:

  • по-лесен за потребителите дизайн,
  • оптимизация за търсачки,
  • финансиране на други пера в интернет маркетинга.

Така се достига до някои изводи. Препоръчва се готова система за изработка на уеб сайтове, която да е популярна и да не обърква потребителите със сложни и завъртяни менюта. Друг извод е, че трябва да направим повече за оптимизация за търсачки.
Така се стига до решението да се потърси уеб дизайн студио, което да предлага тези услуги: евтин и елегантен дизайн и много опит в оптимизацията за търсачки. Тук на http://www.webdesignbg.net/1000firmi има информация за проект на няколко уеб дизайнери, които разкриват възможностите на новата теория за изработка на уеб сайтове в България.

Rate this post


Dec 23 2011

Уеб дизайн с jquery

Автор:

Това е описание на някои полезни ефекти, които могат да се използват при уеб дизайн.

1. Плъзгащ се панел.

Първо трябва да включиме библиотеката jquery, някъде между <head> и </head> например чрез: <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>

Когато кликнете върху елемент с class=”button”, това ще плъзне елемента с <div id=”panel”> и ще превключи CSS class = “active” на елемента  <a>

Класът .active ще смени background-position на стрелката ( ще я обърне нагоре чрез CSS):

http://gmc-bg.com/images/slidepanel.jpg

Ето и скрипта за това:

$(document).ready(function(){ 
        $(".button").click(function(){
          $("#panel").slideToggle("slow");
          $(this).toggleClass("active");
        });        
}); 
Това е и HTML кода: 

<div id=”panel”>

<!–тук стои вашето съдаржание –>

</div>

<p><a href=”#”>Slide Panel</a></p>

2. Изчезващ ефект.

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

Когато се кликне върху <img>, скрипта ще намери неговия родителски елемент <div> и ще анимира неговата opacity=hide със скороста с която желаем (в примера slow):

 

http://gmc-bg.com/images/delitepanel.jpg

$(document).ready(function(){

        $(".pane .delete").click(function(){
          $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
        });        
});

HTML:

<div class=”pane”>

<img class=”delete” alt=”delete” src=””></div>

 

3. Ефект на верижна анимация

В този ефект ще видим как само с няколко реда код можем да накараме обект да се движи, променяики размерите си.

http://gmc-bg.com/images/multi-animation.gif

Line 1: Когато кликнем на <a>

Line 2: анимира се <div id=”box”> с opacity=0.1, свойството left докато достигне 400px (обекта се премества надясно с 400px), а скороста е 1200 (милисекунди)

Line 3: opacity=0.4, top=160px, height=20, width=20, а скоростта е “slow” – Тук освен прозрачността на обекта се променят неговото свойство top (премества се вертикално на екрана),  а също така се променят и неговите размери.

Line 4: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 5: opacity=1, а свойствата left, height и width, приемат стойности съответно: 0, 100px и 100px, като скоростта отново е slow.

Line 6: тук свойството top приема стойност 0 със скорост 0. (top=0).

Line 7: тук имаме slideUp (скорост default speed = “normal”)

Line 8: тук имаме slideDown със скорост “slow”.

Ето и самия код:

$(document).ready(function(){ $(".run").click(function(){
 $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
  });
 });
примерен HTML: <p><a class="run" href="#">Run</a></p>

<div id=”box”> </div>

 

4. Примерен ефект на “акордеон”

http://gmc-bg.com/images/accordeon.jpg

Line 1 от кода добавя CSS клас “active” към първия <H3> елемент намиращ се в <div class=”accordion”>

(Класът .active ще премести свойството background-position на стрелката. )

Line 2:  Скрива всичките <p> елементи които не са първи в  <div class =”accordion”>

 

Когато се кликне върху <H3> елемента, тогава се прилага slideToggle на следващия <p> елемент.

 

$(document).ready(function(){

$(“.accordion h3:first”).addClass(“active”);

$(“.accordion p:not(:first)”).hide();

$(“.accordion h3”).click(function(){

$(this).next(“p”).slideToggle(“slow”)

.siblings(“p:visible”).slideUp(“slow”);

$(this).toggleClass(“active”);

$(this).siblings(“h3”).removeClass(“active”);

});

});

 

ето и примерен HTML:

<div class=”accordion”>

<h3 class=”active”> Heading 1</h3>

<p>Lorem ipsum dolor sit amet……</p>

<h3> Heading 2</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…</p>

<h3> Heading 3</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

<h3>Heading 4 </h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet …..</p>

<h3> Heading 5</h3>

<p style=”display: none;”>Lorem ipsum dolor sit amet…..</p>

</div>

 

 

Rate this post