SEO блог и уеб програмиране » XHTML

Бъг в IE8 и Google Chrome

Георги Стефанов — Sun, 10 Jan 2010 15:59:19 +0000

Вече двама души ми съобщиха, че под браузъри Google Chrome и Internet Explorer 8 блога ми не се изобразява правилно и двете колони вдясно се разместват.

Направих проверка и наистина с тези браузъри текста от средната колона навлизаше в дясната колона и изместваше цялото и съдържание извън колоната (виж картинката).

Като цяло кода на страницата си беше валиден XHTML и затова помислих, че става въпрос за промени по интерпретиране на CSS в тези нови браузъри. Прекледах какви са елементите на страницата. Двете колони вдясно са включени в две от колоните на HTML таблица. След доста време прекарано в преглеждане на CSS файла се сетих да проверя, кой е най-дългия от низовете в средната колона, който не съдържа интервали и се оказа че е „sites.google.com/site/zabolekarvsofia“ (посочен от червената стрелка на картинката). Тук ми хрумна, че е ако браузъра възприема този низ като една единствена дума е нормално да не го пренася на нов ред. Веднага направих проверка, като сложих един интервал след знака „/“ и така открих този елементарен, но труден за откриване:

Проблем:

Internet explorer 8 и Google Chrome неправилно интерпретират знака / като буква, в резултат на което дълги низове с URL адреси не се пренасят на нов ред и разместват текста по страницата.

Решение:

В моя случай трябваше да се погрижа или по някакъв начин да пренеса низа или да го скъся до 25 символа, за да се събере в колоната, като едновременно с това връзката към страницата, която е платила за SMS реклама да си остане непроменена. Намерих кода на плъгина за SMS реклама в директория /wp-content/plugins и промених тази част, която показва връзките.

Заместих реда:

echo "

\"{$http_link}\">{$row->link}

със следния код:

$link_text = $row->link;
$link_text = preg_replace('|/|','/ ',$link_text);
if(mb_strlen($link_text)>25) $link_text = mb_substr($link_text,0,25).'...';
echo "

\"{$http_link}\">{$link_text}

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

Пробвах дали има проблем с други знаци:
не се пренасят на нов ред _ , . @ & ? + = ; пренася се на нов ред - това важи за всички браузъри.
Знаците / \ се обработват различно в различните браузъри – IE8 и Chrome не ги пренасят, Firefox – да.
Интересно е че със знака ! е обратно – при IE8 низа се пренася, а при Firefox и Chrome не.

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

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

PHP strlen() и текстове на кирилица

Георги Стефанов — Wed, 23 Dec 2009 18:27:14 +0000

Проблем

Вече в няколко сайта уеб директории, забелязвам следния проблем: в уеб формата за качване на сайт полетата имат ограничение в броя на символите, което е нормално, но е проблем, когато пише, че може да въведеш 100 символа, а реално можеш да въведеш само 50. Още по-досадно и времеотнемащо е, ако софтуера създаващ уеб формата не се грижи да запомни всички въведени полета и при грешка в едно от полетата изтрива всички полета – за форми с много полета това е направо кошмар, защото трябва да въвеждаш всичко отначало.

Най-фрапиращ случай за това е сайта bestbgsites.com. Не е лесно да добавиш линк в този сайт. Гърми грешката: „Името на сайта е прекалено дълго! Може да бъде 85 символа“ проблема е, че ако заглавието е на кирилица дължината е до 42 символа Описанието пише, че може да бъде до 255 символа, но реално са 127. Има и кратко описание до 30 символа (реално 15), което е трудно за измисляне. Ако сбъркаш някое от полетата всичките въведени данни се изтриват и трябва да се попълват повторно

Същия проблем има и сайта bglogs.com, като тук формата запомня полетата, но пък има ограничение в броя на грешните опити, след което пак трябва да започнеш на чисто. Полетата Описание и META Description пише, че имат лимит 500 символа и дори има Javascript, който намалява брояча на символите при всяко натискане на клавиш, когато въвеждаш в полето. Проблемът идва, когато изпратиш данните към сървъра, той ги проверява и ти показва, че си превишил доста лимита. В полето Заглавие е още по-трудно, защото лимита е замислен да бъде 100 символа, но на кирилица са само 50.

Обяснение

Тези проблеми се получават, защото представянето на всеки символ на кирилица при UTF8 е в 2 байта. Сайтовете ползват готов безплатен софтуер писан от англо-говорящи, които са свикнали при проверка държина на низ да използват PHP функцията strlen(), която работи на ниво байтове и затова тази функция преброява низ на кирилица с дължина 50 символа, като низ с дължина 100 символа.

Решение

Решението е много лесно, но трябва да бъде извършено от собственика на сайта. Трябва функцията strlen() да се замени с функцията mb_strlen(), която се съобразява с енкодинга и правилно преброява низ независимо на какъв език е написан. Тази функция се осигурява от библиотеката mbstring (Multibyte String), която за щастие отдавна се поддържа от всички български хостинг доставчици.

Отрязване на низ на кирилица

Подобен проблем се получава, ако отрязваш низ на кирилица в енкодинг UTF8 например показване на извадка от новина. Ако искаш да покажеш първите 200 символа от новина и направиш

$text = substr($text, 0, 200);

като резултат ще имаш първите 100 символа, като е възможно последния символ да бъде „срязан по средата“, в смисъл, че от двата байта, с които е представен ще остане само първия и в резултат на това в страницата ще бъде показан странен символ, който е невалиден UTF8 символ и чупи страницата. В резултат на това страницата няма да може да бъде валидирана, като XHTML документ. Нямам лични наблюдения как се отразява това на SEO, но предполагам, че е проблем за ботовете на много от търсачките.

За да решиш този проблем трябва просто да замениш функцията substr() с функцията mb_substr(), като разбира се библиотеката mbstring трябва да е предварително инсталирана.

Заключение

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

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

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

Оптимизиране на бързодействието на сайт Пиша тази статия като продължение на статията PHP парсване на...

Премахване на грешки в сайт и преминаване към XHTML

gan — Tue, 11 Aug 2009 12:17:52 +0000

Тази статия е за често срещани 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
„0″ topmargin=“0″ marginwidth=“0″ marginheight=“0″>
Решение:

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

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

след това промени боди тага в HTML файла така:

Във файла 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“?

„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“>„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
„up“ scrollamount=“2″ loop=“true“>
…

Решение:

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

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

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

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

Грешка:

Line 53, Column 49: cannot generate system identifier for general entity „dropdown_id“
…s=“lang“>dropdown_id=30″ class=“bul“>BG Решение:

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

Пример:
/page.php?lang=bg&dropdown_id=30
става
/page.php?lang=bg&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“>>ganbox.com SEO форум

Решение:

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

ganbox.com SEO форум

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

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

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

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

Подобни статии:
Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....

Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

Заместване на тага marquee за валиден XHTML

gan — Tue, 02 Jun 2009 08:28:30 +0000

HTML тага marquee се използва за автоматично скролиране на текст. Текста поставен между тагове marquee се показва от браузъра като движещ се текст, хоризонтално или вертикално. Не използвай тага marquee основно по следните причини: кода на страницата, която съдържа marquee не е валиден XHTML; браузъра натоварва процесора на компютъра; движението не е плавно, а накъсано и като резултат от това изглежда грозно и се чете трудно. Грозни примери има тук.

Да приемем, че имаш страница която съдържа код за превъртане на новини. Подобен на този:

Заглавие 1
Текст новина 1

Заглавие 2
Текст новина 2

Заглавие 3
Текст новина 3

При опит страницата да мине през валидатора се получава грешка подобна на следната:

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

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“>

Заглавие 1
Текст новина 1

Заглавие 2
Текст новина 2

Заглавие 3
Текст новина 3

div>
Това е. Получения код е валиден XHTML и движението е много по-плавно. Освен това можеш да използваш бутончето стрелка нагоре, за да се върнеш на предната новина при което движението спира, за да може да я прочетеш спокойно. Настройки за движението, като скорост, секунди за които спират новините и др. се задават от файла jscripts/slider.js

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

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

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

Подобни статии:
Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...

XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете...

Флаш анимация без таг embed за валиден XHTML

gan — Mon, 01 Jun 2009 23:40:17 +0000

В този урок за 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. "http://arthuradams.bg/flash/2009.swf" wmode="opaque" quality="h...

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

type="application/x-shockwave-flash" data="http://arthuradams.bg/flash/2009.swf" width="294" height="260"> name="loop" value="true" /> name="menu" value="false" />
This is alternative content.
Горния код е грешен и НЕ РАБОТИ!

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

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

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

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

You need to upgrade your Flash Player

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

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

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

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

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

Подобни статии:
XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...

Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....

Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете...