SEO блог и уеб програмиране » анимация http://ganbox.com/blog SEO практика: трикове при оптимизация и решаване на проблеми при уеб програмиране. Thu, 26 Jan 2012 19:15:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Премахване на грешки в сайт и преминаване към 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 информация за сайта.

Брой разглеждания на тази статия: 3544
(след дата 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 Флаш анимация без таг embed за валиден XHTML http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/ http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/#comments Mon, 01 Jun 2009 23:40:17 +0000 gan http://ganbox.com/blog/?p=110 В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към валиден XHTML код.

В примера се приема, че флаша се намира в директория /flash/2009.swf и има размери 294 ширина и 260 височина на полето за анимацията.

Ако кода е писан отдавна, вероятно ще изглежда подобно на този:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 
  width="294" height="260">
  <param name="movie" value="http://arthuradams.bg/flash/2009.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <embed src="http://arthuradams.bg/flash/2009.swf" wmode="opaque" quality="high" 
  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
  width="294" height="260"></embed>
</object>

Този код не е валиден XHTML заради тага embed и при опит да мине през валидатора дава грешки, първата от които прилича на тази:

Line 181, Column 17:
Attribute "src" exists, but can not be used for this element.
<embed src="http://arthuradams.bg/flash/2009.swf" wmode="opaque" quality="h...

При търсене в Гугъл по думи като „XHTML embed“ излизат десетки статии, в които грешно се посочва, че горния код може да бъде заменен с нещо като:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="http://arthuradams.bg/flash/2009.swf"
  width="294" height="260">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="294" height="260">
  <param name="movie" value="http://arthuradams.bg/flash/2009.swf" />
<!--><!--dgx-->
  <param name="loop" value="true" />
  <param name="menu" value="false" />

  <p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->

Горния код е грешен и НЕ РАБОТИ!

Според мен единственото XHTML решение работещо на всички браузъри е с използване на JavaScript.

Пример с използване на swfobject.

Изтегли си файла http://ganbox.com/inc/swfobject.js и го качи на твоя сайт. В следващия пример се приема, че е в директория /jscripts
Между таговете head постави реда

<script type="text/javascript" src="/jscripts/swfobject.js"></script>

Там където искаш да се появи флаш филма постави следния div:

<div id="flashcontent" style="float:left; margin:10px">
<strong>You need to upgrade your Flash Player</strong>
</div>

Слад това в страницата изпълни скрипта

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://arthuradams.bg/flash/2009.swf",
  "title", "294", "260", "7", "#FF6600");
so.write("flashcontent");
// ]]>
</script>

Естествено вместо arthuradams.bg напиши името на домейна на твоя сайт.  Би трябвало да стане и само с „/flash/2009.swf“.

Работещ пример има в старница обучения от ArthurAdams.bg, която е валиден XHTML.

В статията се ползва кода на проекта swfobject.

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

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

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

]]> http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/feed/ 4 XHTML и заместване на тага embed http://ganbox.com/blog/xhtml-%d0%b8-%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-embed/ http://ganbox.com/blog/xhtml-%d0%b8-%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-embed/#comments Fri, 15 May 2009 15:42:27 +0000 gan http://ganbox.com/blog/?p=81 Тага embed служи за вмъкване на видео или аудио файл в уеб страница, така че при зареждане на страницата мултимедийния файл може да  започне да се изпълнява директно. За съжаление този таг не е по XHTML стандарта и се използват различни техники за заместването му.

Ако имаш обикновен swf файл с флаш анимация, която искаш да стане валиден XHTML, прочети Флаш анимация без таг embed за валиден xhtml

В разгледания пример има HTML код за смяна на картинки – слайдшоу. Картинките са описани в XML файл, който се подава на SWF файл. Файла player.swf е флаш плеър, който сменя картинките, като плавно прелива от едната в другата през 5 секунди. Освен това в долния десън ъгъл показва толкова бутончета, колкото са картинките и може бързо да се превключва между тях. Работеща версия може да видиш в страницата на вила Ливадето.

Стария HTML код е несъвместим с XHTML стандарта и дава грешки при проверка с валидатора.
Ето грешния код:

<div id=“slideshow“><object width=880 height=330
classid=“clsid:D27CDB6E-AE6D-11CF-96B8-444553540000″
codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab“>
<param name=“movie“ value=“player.swf“>
<param name=“quality“ value=“high“>
<param name=“loop“ value=“true“>
<param name=“wmode“ value=“opaque“>
<param name=“autoplay“ value=“true“>
<param name=“FlashVars“ value=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″>
<embed src=“player.swf“ width=880 height=330 quality=“high“
type=“application/x-shockwave-flash“ wmode=“opaque“
FlashVars=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″ loop=“true“ autoplay=“true“
pluginspage=“http://www.macromedia.com/go/getflashplayer“></embed>
</object>
</div>

Този код се замества със следния валиден код:

<div id=“slideshow“>
<script src=“ac_activex.js“ type=“text/javascript“></script>
<script type=“text/javascript“>
AC_RunFlashContent(‘width’,’880′,’height’,’330′,’quality’,'high’,
‘autoplay’,'true’,'loop’,'true’,'wmode’,'opaque’,
‘FlashVars’,'bcastr_xml_url=slideshow.xml&amp;AutoPlayTime=5′,’codebase’,
‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab’,'pluginspage’,
‘http://www.macromedia.com/go/getflashplayer’,'src’,'player.swf’);
</script>
</div>

За да работи този скрипт е нужен файла ac_activex.js да бъде качен в главната уеб директория. Той осигурява и това страницата да работи на всички браузъри. В примера се предполага, че файловете player.swf и slideshow.xml също са в главната уеб директория.

Крайният резултат е валиден HTML документ и работещ код на всички браузъри.

Ако JavaScript-а на браузъра е спрян, този код няма да сработи. За съжаление в момента нямам решение с тага object, което да работи на всички браузъри и да е валиден XHTML. Ако някой има идеи да пише, ще се радвам да ги науча. Най-малкото което може да се направи е да се сложи <noscript> блок, който да съдържа зареждане на първата картинка. Така поне първата картинка от поредицата картинки ще се покаже.

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

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

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

]]> http://ganbox.com/blog/xhtml-%d0%b8-%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-embed/feed/ 8