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

Данный блог закрыт. Вместо него запускаю новый по адресу ВебБлог.РФ. И он уже будет не на WordPress (тормознутость и спам в комментариях меня достали), а на b2evolution, чего и вам советую!

Как правило, для проигрывания видеороликов и музыкальных MP3 на сайте размещается специальный Flash-плеер. Зачастую готовые флеш-плееры не подходят к дизайну сайта, а их доработка их требует хорошего знания Flash.

Однако есть и другое решение: сайт UPPOD.RU. Это сайт-конструктор, на котором можно за несколько минут сделать плеер для видео, MP3 или фотографий с размерами и цветовой гаммой, подходящей под дизайн сайта. Кроме того, для плеера можно настроить список воспроизводимых файлов (причем он хранится в обычном текстовом формате, так что можно генерировать его автоматически “на лету” скриптами), задать наличие тех или иных кнопок управления и некоторых других возможностей плеера.

Приятной особенностью является и то, что плеер не требует обязательного показа своего логотипа или ссылки.

Иногда возникает задача хранить какие-то свойства большого количества разнородных объектов, которые никогда не будут участвовать в условиях выборки или сортировке, но которые могут добавляться/исчезать по мере развития сайта. Например, к таким свойствам относятся задаваемые поля профиля пользователя на форуме, настройки сайта в целом, какие-то опции отдельных страниц этого сайта.

В такой ситуации можно использовать универсальную таблиц для всех настроек, которая будет иметь следющую структуру:

type : enum(’user’,'page’,’site’) (признак, кому принадлежит данная настройка: сайту, пользователю или странице, вместо типа enum можно использовать tinyint, чтобы не изменять структуру таблицы, если появятся новые типы объектов),
id : int (идентификатор пользователя или страницы)
name: varchar(24) (название опции)
value: varchar(255) (значение опции).

Далее…

Если предполагается, что сайт будут заполнять контентом неподготовленные пользователи (в смысле, не знающие HTML, CSS, да и вообще плохо разбирающиеся в компьютере), то возможны ситуации, когда они загрузят слишком большую по размеру фотографию, которая приведет к тому, что сайт “разъедется”. Конечно, правильным решением является обработка картинки на стороне сервера, но не всегда есть такая возможность.

В этом случае при верстке имеет смысл принудительно ограничить ширину картинки с помощью CSS:

.content img { max-width: 700px }

где .content — это класс слоя, в котором отображается основное содержимое страницы.

Конечно, качество картинки при этом пострадает, но все же неудобств пользователю будет меньше, чем при растянутом сайте.

На многих сайтах можно увидеть кнопки для добавки ссылки в социальные сети закладок типа 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.