Заметки об HTML, CSS, AJAX, DOM, PHP, MySQL и многом другом

На многих сайтах можно увидеть кнопки для добавки ссылки в социальные сети закладок типа Memory.Ru, BobrDobr.Ru и тому подобные. Идея весьма удачная, так как значительно увеличивается вероятность, что пользователь добавит ссылку в эти системы, что во-первых, повысит вероятность того, что он вернется на сайт сам, во-вторых, может привлечь новых пользователей из социальной сети.

Обычно такие кнопки представляют собой маленькие (16×16 px) логотипы этих социальных сетей. Но при этом каждая такая кнопка — это отдельный запрос, поэтому когда их становится много, время загрузки страницы начинает расти, что нежелательно. Но можно сделать иначе: поместить все картинки в один большой файл, и воспользоваться тегом map для простановки ссылок. Вот пример такого набора кнопок для 18 социальных сетей (максимальное количество, которое удалось собрать на сегодняшний день).

Код для HTML:

<img src="links.png" style="width: 306px;  height:16px; border: none" usemap="#addurl" alt="Добавить в закладки">

<map name="addurl">
<area shape="rect" coords="0,0,15,15" alt="Добавить на Del.icio.us" href="http://del.icio.us/post?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="16,0,31,15" alt="Добавить на News2.Ru" href="http://news2.ru/add_story.php?url=URL_страницы">
<area shape="rect" coords="32,0,47,15" alt="Добавить на Digg.com" href="http://digg.com/submit?phase=2&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="48,0,63,15" alt="Добавить на Mister-Wong.Ru" href="http://mister-wong.ru/add_url/?bm_url=URL_страницы&bm_description=Описание_закладки">
<area shape="rect" coords="64,0,79,15" alt="Добавить на Linkstore.Ru" href="http://linkstore.ru/servlet/LinkStore?a=add&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="80,0,95,15" alt="Добавить на Netscape.com" href="http://netscape.com/submit/?U=URL_страницы&T=Описание_закладки">
<area shape="rect" coords="96,0,111,15" alt="Добавить на MyScoop.Ru" href="http://myscoop.ru/add/?title=Описание_закладки&URL=URL_страницы">
<area shape="rect" coords="112,0,127,15" alt="Добавить в Yahoo" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=URL_страницы&t=Описание_закладки">
<area shape="rect" coords="128,0,143,15" alt="Добавить в Vaau.Ru" href="http://vaau.ru/submit/?action=step2&url=URL_страницы">
<area shape="rect" coords="144,0,159,15" alt="Добавить в Technorati" href="http://technorati.com/faves?add=URL_страницы">
<area shape="rect" coords="160,0,175,15" alt="Забобрить" href="http://bobrdobr.ru/add.html?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="176,0,191,15" alt="Добавить в Закладки Google" href="http://google.com/bookmarks/mark?op=edit&bkmk=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="192,0,207,15" alt="Добавить на Newsland.Ru" href="http://newsland.ru/News/Add/type/news/">
<area shape="rect" coords="208,0,223,15" alt="Redd it!" href="http://reddit.com/submit?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="224,0,239,15" alt="Добавить в Rumarkz.ru" href="http://rumarkz.ru/bookmarks/?action=add&popup=1&address=URL_страницы&title=Описание_закладки&description=%7Bt%7D">
<area shape="rect" coords="240,0,255,15" alt="Добавить в Blogmarks.net" href="http://blogmarks.net/my/new.php?mini=1&url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="256,0,271,15" alt="Добавить на Memori.Ru" href="http://memori.ru/link/?sm=1&u_data%5Burl%5D=URL_страницы&u_data%5Bname%5D=Описание_закладки">
<area shape="rect" coords="272,0,287,15" alt="Добавить на MoeMesto.Ru" href="http://moemesto.ru/post.php?url=URL_страницы&title=Описание_закладки">
<area shape="rect" coords="288,0,301,15" alt="Добавить в RuCity.Ru" href="http://rucity.com/bookmarks.php?action=add&address=URL_страницы&title=Описание_закладки&description=">
</map>

Код для XHTML:

<img src="links.png" style="width: 306px;  height:16px; border: none" usemap="#addurl" alt="Добавить в закладки" />

<map id="addurl">
<area shape="rect" coords="0,0,15,15" alt="Добавить на Del.icio.us" href="http://del.icio.us/post?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="16,0,31,15" alt="Добавить на News2.Ru" href="http://news2.ru/add_story.php?url=URL_страницы" />
<area shape="rect" coords="32,0,47,15" alt="Добавить на Digg.com" href="http://digg.com/submit?phase=2&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="48,0,63,15" alt="Добавить на Mister-Wong.Ru" href="http://mister-wong.ru/add_url/?bm_url=URL_страницы&bm_description=Описание_закладки" />
<area shape="rect" coords="64,0,79,15" alt="Добавить на Linkstore.Ru" href="http://linkstore.ru/servlet/LinkStore?a=add&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="80,0,95,15" alt="Добавить на Netscape.com" href="http://netscape.com/submit/?U=URL_страницы&T=Описание_закладки" />
<area shape="rect" coords="96,0,111,15" alt="Добавить на MyScoop.Ru" href="http://myscoop.ru/add/?title=Описание_закладки&URL=URL_страницы" />
<area shape="rect" coords="112,0,127,15" alt="Добавить в Yahoo" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=URL_страницы&t=Описание_закладки" />
<area shape="rect" coords="128,0,143,15" alt="Добавить в Vaau.Ru" href="http://vaau.ru/submit/?action=step2&url=URL_страницы" />
<area shape="rect" coords="144,0,159,15" alt="Добавить в Technorati" href="http://technorati.com/faves?add=URL_страницы" />
<area shape="rect" coords="160,0,175,15" alt="Забобрить" href="http://bobrdobr.ru/add.html?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="176,0,191,15" alt="Добавить в Закладки Google" href="http://google.com/bookmarks/mark?op=edit&bkmk=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="192,0,207,15" alt="Добавить на Newsland.Ru" href="http://newsland.ru/News/Add/type/news/" />
<area shape="rect" coords="208,0,223,15" alt="Redd it!" href="http://reddit.com/submit?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="224,0,239,15" alt="Добавить в Rumarkz.ru" href="http://rumarkz.ru/bookmarks/?action=add&popup=1&address=URL_страницы&title=Описание_закладки&description=%7Bt%7D" />
<area shape="rect" coords="240,0,255,15" alt="Добавить в Blogmarks.net" href="http://blogmarks.net/my/new.php?mini=1&url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="256,0,271,15" alt="Добавить на Memori.Ru" href="http://memori.ru/link/?sm=1&u_data%5Burl%5D=URL_страницы&u_data%5Bname%5D=Описание_закладки" />
<area shape="rect" coords="272,0,287,15" alt="Добавить на MoeMesto.Ru" href="http://moemesto.ru/post.php?url=URL_страницы&title=Описание_закладки" />
<area shape="rect" coords="288,0,301,15" alt="Добавить в RuCity.Ru" href="http://rucity.com/bookmarks.php?action=add&address=URL_страницы&title=Описание_закладки&description=" />
</map>

P.S. Для того, чтобы избежать потери веса страницы в поисковой системе, целесообразно добавлять этот код не напрямую, а с помощью JavaScript. Кроме того, не следует забывать, что URL_страницы и описание_закладки должны быть закодированы в формате urlencoded, причем в кодировке UTF-8.

Файл links.png с логотипами для социальных сетей (с прозрачным фоном):

Пример работающей ссылки можно увидеть по адресу http://reinin.ru.

Для любого сайта, на котором имеется какой-либо длинный текст, желательно создавать версию для печати. Часто версия для печати представляет собой отдельную страницу, но во многих случаях есть более простое решение: воспользоваться средствами CSS.

Стили, которые должны применяться только к версии для печати, описываются внутри директивы @media print. В этой директиве можно задать черный цвет текста и белый цвет фона для элемента body, а также скрыть меню, подвал и прочие вспомогательные блоки с помощью display: none.

Эта директива должна размещаться в конце стилевого файла и иметь примерно такой вид:

@media print {
body { color: #000; background: #FFF }
#menu { display: none }
a:link, a:visited { color: #400; text-decoration: underline }
/* переопределение других CSS-стилей */
}

Кроме того, можно вынести стили для печати в отдельный файл и подключать его обычным способом, но указывая тип устройства отображения в параметре media:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Еще одной проблемой является вывод адресов ссылок. Решить его можно с помощью следующей конструкции:

a:link:after, a:visited:after { content: " (" attr(href) ") " }

Но следует иметь в виду, что работает она не во всех броузерах (в частности, не работает в MSIE 6).

Известно, что практически у всех броузеров есть два режима: режим обратной совместимости (так называемый quirks mode) и режим соответствия стандарту. Переключение между ними осуществляется по объявлению DOCTYPE, но следует знать, что не все варианты написания DOCTYPE работают во всех броузерах. Наиболее универсальными являются следующие варианты (для Transitional HTML 4.01, Strict HTML 4.01 и XHTML 1.1 cоответственно):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Кроме того, наличие объявления XML<?xml version=”1.0″ encoding=”….”?> переключает MSIE в режим обратной совместимости, поэтому при использовании XHTML + Content-type: text/html не следует указывать это объявление. (Это не считается нарушением стандарта XHTML.)

Посмотреть полную таблицу соответствия вариантов написания DOCTYPE и режимов рендеринга можно тут: http://hsivonen.iki.fi/doctype/

Если задать для элемента body свойство font-size: 62.5%, то относительная величина 0.1em при нормальном размере шрифта начинает соответствовать 1 пикселю (т.е. font-size: 1.2em приведет к выводу текста 12-пиксельным шрифтом), но при этом текст остается масштабируемым при увеличении/уменьшении размера шрифта во всех броузерах, включая MSIE. Кроме того, становится удобно задавать с помощью em ширину колонок/блоков, которые должны масштабироваться вместе с находящимся в них текстом (например, вертикальное меню).

(Идея заимствована отсюда: http://snook.ca/archives/html_and_css/top_css_tips/ )

Однако для вложенных блоков, если во внешнем блоке задан font-size в масштабируемых единицах (em, %, и т.п.), размер шрифта перестанет соответствовать пикселям. Поэтому рекомендуется задавать его не в em, а с помощью относительных показателей (значения larger, smaller, x-smaller, x-larger свойства font-size).

Кроме того, имеет смысл ставить для тега html cвойство font-size: 100.01%, т.к. это решает проблему с некорректным размером шрифта в Opera.

Бывают ситуации, когда желательно восстановить базу форума или CMS из резервной копии, но при этом не терять ту часть материала, которая была добавлена после снятия этой копии. Сделать это достаточно просто. При снятии дампа с помощью phpMyAdmin следует включить опции “create table if not exists” и “insert ignore”. При включении этих опций попытка создать таблицу будет выполняться только в том случае, если таблицы не существует, а вставка записей — только при отсутствии записей с таким же PRIMARY KEY (тогда как без этих опций при наличии таблиц/записей возникли бы ошибки SQL).

Также вместо insert ignore можно выбрать режим создания дапма REPLACE, это позволит не только восстановить уничтоженные записи, но и вернуть в состояние на момент снятия дампа все записи.

Если же дамп изначально был снят в режиме обычного INSERT, можно извлечь его в отдельную базу данных, после чего снять дамп в нужном режиме, и приступить к восстановлению основной базы.

При разработке CMS, использующих HURL, часто возникает проблема с относительными ссылками (например, в меню сайта): при переходе на следующий уровень вложенности они перестают работать (т.е. если ссылка имела вид register.php, а CMS установлена в каталог /cms/, то когда заходим на страницу с адресом /cms/section1/page.htm, то ссылка превращается в /cms/section1/register.php и перестает работать).

Решений этой проблемы может быть несколько:

1) прописывать корневой URL в теге BASE: <base href=”http://sitename.ru/cms/”>. Наиболее простой способ, но его неудобство становится очевидным, как только требуется добавить в CMS статью, скопированную с другого сайта: если в ней содержатся относительные ссылки (например, оглавление в начале статьи), они перестают работать и требуется ручная правка, причем если у статьи меняется URL, правки приходится вносить еще раз.

2) динамически корректировать все ссылки, которые должны быть относительно корня CMS в соответствии с текущим уровнем вложенности (т.е. в приведенном примере потребовалось бы приписать в начало ссылки register.php конструкцию ../). Способ весьма неудобный с точки зрения реализации.

3) указывать ссылки относительно корня сайта (т.е. /cms/register.php). У этого способа нет проблем, характерных для двух предыдущих, однако для него требуется знание пути, по которому установлена CMS.

Узнать каталог, куда установлен скрипт, можно с помощью такого выражения:

$script_url=str_replace(basename(__FILE__),'',$_SERVER['SCRIPT_NAME']);

Примечание: если скрипт, выполняющий эту операцию, лежит не в корне, а в подкталоге (например /cms/libs), то выражение несколько усложняется:

$script_url=str_replace('libs/'.basename(__FILE__),'',$_SERVER['SCRIPT_NAME']);

Представленные выражения будут работать даже при использовании mod_rewrite или HURLs вида index.php/section1/page.htm.