SEO блог и уеб програмиране » Валиден HTML код

PHP създаване на RSS Feed Generator

Георги Стефанов — Wed, 22 Feb 2012 10:23:13 +0000

Ganbox.com предоставя безплатно един PHP клас за бързо създаване на динамична RSS емисия с новини, които се извличат от базата данни на твой сайт.

Целта при написването на този клас е:

1. Да се използва лесно и удобно с кратък запис. Има включен пример в кода.
2. Да се валидира XML кода на RSS-а от валидатора http://feedvalidator.org
3. Да няма проблем с кирилицата, включително URL адреси на кирилица.
4. Да работи и на по-старата PHP версия 4, за да може да се ползва на по-стари сайтове.

Софтуерът се предлага безплатно под лиценза Creative Commons 3.0 – http://creativecommons.org/licenses/by/3.0/deed.bg

Създаване на RSS емисия с PHP

За този пример ще предположим, че на твоя сайт sait.com имаш новини, които стоят в база данни в таблица с име news. Таблицата има следните полета: id – номер на новина; title – заглавие на новина; body – текст на новината; date – дата на създаване. Предполага се още, че URL адресите на всяка новина имат следния вид: http://sait.com/news.php?id=2 и вече има направена връзка към базата данни във файл db.php.

Изтегли файла Ganbox.com RSS Feed Generator и го разархивирай. Ще получиш файла class.rss_feed.php. Може да го поставиш в главната уеб директория на сайта. Там създай файла feed.php, който ще генерира твоя RSS и ще има следното съдържание:

include("class.rss_feed.php"); // включва класа за RSS
include("db.php"); // връзка с базата данни

$feed = new RSSFeed(); // създава обект
$feed->init(
'RSS на sait.com', // Заглавие на RSS емисия
'http://sait.com/feed.php', // URL адрес на RSS емисия
'RSS с новините на сайт sait.com' // Описание на емисията
,'utf-8' // Енкодинг на емисията (по подразбиране е utf-8 и може да се изтрие този ред)
);

$news=get_last_news(10); // връща последните 10 новини
foreach($news as $one){
//Добавяне на една публикация
$item = new Item();
$item->setItemTitle($one['title']);
$one_url = 'http://sait.com/news.php?id='.$one['id']; // URL адрес на новината
$item->setItemLink($one_url); // URL адрес на публикация
$item->setItemDate($one['date']); // дата на публикация, формат YYYY-MM-DD HH:MM:SS
$item->setItemDesc($one['body']);
$feed->addItem($item);
}
$feed->createFeed(); // създава и отпечатва целия XML на RSS-а

// Примерна функция за извличане на последните count новини
function get_last_news($count=1) {
$ret = array();
$query = "SELECT * FROM news ORDER BY id DESC LIMIT $count";
$result = mysql_query($query);
$num_rows = mysql_num_rows($result);
if($num_rows){
while($row = mysql_fetch_assoc($result)){
$ret[] = $row;
}
}
return $ret;
}

Ако новините в базата данни не са в енкодинг utf-8 и има проблем с кирилицата опитай следното:
1. Промени четвъртия параметър на функция init() от ‘utf-8′ на ‘cp1251′.
2. Увери се, че файла feed.php има енкодинг cp1251.

За добавяне на лого към RSS емисията, след извикването на init() преди реда с get_last_news() постави:

$rss_title = 'RSS на sait.com'; // трябва да съвпада със заглавието на RSS-а
$rss_url = 'http://sait.com/feed.php'; // трябва да съвпада с URL адреса на RSS-а
$img_url = 'http://sait.com/logo.png'; // URL адрес на логото (приема само JPG, GIF и PNG)
$img_width = 100; // ширина на логото в пиксели
$img_height = 100; // височина на логото
$feed->setFeedImage($rss_title, $img_url, $rss_url, $img_width, $img_height);

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

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

След като създадеш своите RSS канали, е добра идея да се прекарат през Google Feedburner и след това да се постави линк в началната страница на сайта към тях. Ако имаш нужда от помощ със създаването на твоите RSS емисии, както и по-нататъшното им ползване за SEO цели, може да се свържеш с нас.

Кодът е изпробван под PHP версии 4 и 5. Също така има работещо копие на класа на силно посещаван сайт.
За всякакви коментари по кода пиши в тази тема.

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

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

PHP парсване на XML новини за твоя сайт Ще ти покажа малко PHP код, с който много лесно...

Карта от Google Maps и валиден XHTML

Георги Стефанов — Thu, 09 Jun 2011 05:31:25 +0000

Google Maps карта за твоя сайт

В статията Google maps – бързо включване на карта в сайт показах, как бързо да включиш карта от Google Maps в твоя сайт. Но има един малък проблем – използването на iframe таг прави кода на страницата невалиден HTML код по стандарта XHTML. Да бъдат страниците валиден XHTML е важно за SEO оптимизацията на един сайт. Това помага на ботовете на търсачките да разберат без проблем структурата и елементите на текущата страница, и да индексират страницата без проблем.
Затова ти предлагам друг вариант на включване на Гугъл карта, който изисква Google Maps API ключ и добавяне на една JavaScript библиотека.

Създаване на Google Maps API ключ

Звучи малко страшно, но всъщност е елементарно.

Отвори адрес code.google.com/apis/maps/signup.html.

Избери опцията „I have read and agree with the terms and conditions“ за да се съгласиш с Правилата за ползване.
В полето „My web site URL“ въведи интернет адреса на сайта, в който ще включваш Гугъл карта и натисни бутона [Generate API Key].

Копирай кода на твоя API ключ.

Библиотека за работа с Google карти GMapEZ

Изтегли кода на библиотеката GMapEZ от адрес http://ganbox.com/inc/gmapez-2.5.js или от сайта на разработчика http://n01se.net/gmapez/ и го качи на твоя сайт, например в директория /inc, която е поддиректория на главната уеб директория на твоя сайт.

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

Линк към карта в Google Maps

Преди инсталиране на кода в твоя сайт ти трябва и линка към картата, която ще се показва в твоя сайт. Ако не знаеш как да получиш този линк, трябва да прочетеш статията Google maps – бързо включване на карта в сайт. Изпълни стъпките описани в „Добавяне на карта от Google Maps в сайт“, с тази разлика, че след натискане на връзката „Link“ след като се отвори прозорче с двете полета се копира не от второто поле, а линка от първото поле. Това и бърза връзка към твоята карта в Google Maps.

Инсталиране на Goole Maps карта за валиден XHTML

В head частта на твоя сайт (преди затварящия таг ) добави следните два реда:

В първя ред след key= е Google Maps API ключа

ABQIAAAAdwBYdsADaUm9q8tkYl-wsBT6h6yFeRhnW_cacFSo3_TadhhEhRSV2ZhRK4Y7c5tvGD2bFGE1obPH-w

който трябва да промениш с твоя ключ (не опитвай да ползваш този, защото няма да сработи).
Във втория ред включваш JavaScript библиотеката GMapEZ.
Hint: Може да добавиш тези редове само в страницата, в която ще показваш карта, за да не се включват излишно по другите страници.

В body частта, там където искаш да се покаже картата добави следния код:

Стойността на атрибута href на тага a във втория ред,

http://maps.google.bg/maps/ms?hl=bg&georestrict=input_srcid:23f19765b2705d0&ie=UTF8&view=map&ctz=-180&source=embed&msa=0&msid=216760193494879624978.000483e138e465fe737de&ll=42.635721,23.363569&spn=0.006245,0.015937&z=14

трябва да замениш с твоята бърза връзка към Google карта (не опитвай да ползваш тази, защото няма да сработи).
Ще трябва в линка да заместиш всеки от знаците & с пет знака & – това се налага заради XHTML.
Естествено може да променяш стойностите на style=“width: 700px; height: 480px;“ на първия ред за оразмеряване на картата.
Класовете GMapEZ GLargeMapControl GMapTypeControl GScaleControl са опции необходими за правилната работа на картата. С това картата е готова.

Често ползвани опции

Дотук само поставихме карта с маркер на определен адрес, но няма описание към него. Накратко ще разгледам най-често ползваните възможности на библиотеката GMapEZ.
За да се добави информационен балон към маркера (при натискане на маркера се показва повече информация за адреса и при повторно натискане се скрива). Трябва да се добави още един div елемент веднага след елемента a, който обаче е вътре в първия div. Ето как ще изглежда целия код:

Вътрешният div съдържа допълнителни данни за адреса и се показва в изкачащ информационен балон.
Опции може да се добавят и вътре в тага a. Например ако точно пред затварящия таг се напишат опциите:
YELLOW OPEN
Това ще промени маркера по следния начин:
1. YELLOW ще промени стандартния червен цвят със жълт цвят на маркера.
2. OPEN ще доведе до автоматично отваряне на информационния балон при зареждане на картата.
Както се вижда библиотеката ни дава малко повече контрол.
За повече опции прочети документацията на разработчика на адрес http://n01se.net/gmapez
Като краен резултат ще получиш карта подобна на тази в страница Контакт на ganbox.com и кода на страницата ще бъде валиден XHTML.

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

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

Google maps – бързо включване на карта в сайт Създаване на Карта в Google Maps Влез в http://maps.google.com. Натисни връзката...
Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...
Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....

Премахване на грешки в сайт и преминаване към 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 информация за сайта.

Брой разглеждания на тази статия: 3759
(след дата 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

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

Брой разглеждания на тази статия: 3803
(след дата 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.

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

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

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

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