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

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

При загрузке пользователем графического файла часто возникает необходимость определить, в каком формате этот файл, чтобы применить соответствующую функцию: imagecreatefrompng, imagecreatefromjpg и т.д. Чаще всего это реализуют, проверяя расширение файла, однако это ненадежный подход (пользователь может поменять расширение файла и тем самым спровоцировать ошибки). Другой вариант — считать файл в строку и сделать createimagefromstring, однако такой подход приводит к существенному увеличению объема требуемой для обработки изображения памяти.

Наиболее правильным решением является использование функции getimagesize, которая принимает в качестве параметра имя файла (а не ресурс с изображением, как многие другие) и возвращает массив из 7 элементов. Во втором элементе этого массива указывается тип изображения (его следует сравнивать с константами IMG_GIF, IMG_JPG, IMG_PNG, IMG_WBMP, IMG_XPM).

Полезной особенностью данной функции является то, что она работает даже при отсутствии расширения gd.

Иногда бывает необходимо загрузить стилевой файл CSS из JavaScript. (Например, если head-часть HTML уже выведена, а нарушать стандарт и подключать CSS и в body нежелательно.)

Делается это следующим образом: создается элемент link и добавляется как дочерний элемент к тегу head с помощью функций работы с DOM-моделью. Код для такого действия имеет примерно такой вид:
var tag_css = document.createElement('link');
tag_css.rel = 'stylesheet';
tag_css.href = 'http://test.ru/styles.css'; // здесь указывается URL стилевого файла
tag_css.type = 'text/css';
var tag_head = document.getElementsByTagName('head');
tag_head[0].appendChild(tag_css);

Если используется библиотека jQuery, то можно добавить тег несколько иначе:

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel:  "stylesheet",
type: "text/css",
href: "http://test.ru/styles.css" //здесь указывается URL стилевого файла
});


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

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

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

Иногда бывает нужно сделать два блока, у которых будут стыковаться между собой рамки. (Типичная ситуация — заголовок, у которого рамка имеет один цвет, а текст под ним обрамлен рамкой другого цвета, и при этом вся конструкция должна восприниматься как едиое целое). Типичный подход в такой ситуации — использование трех тегов div примерно такого вида:

<div>
<h1 style="border: #ccc 1px solid">Заголовок</h1>
<div style="border: #888 1px solid; border-top: 0">Текст</div>
</div>

Однако имеется более элегантное решение, позволяющее уменьшить число DOM-элементов:

<div style="border: #888 1px solid">
<h1 style="border: #ccc 1px solid; margin: -1px">Заголовок</h1>
Текст
</div>

Кроме того, такое решение удобно и тем, что не требует дублировать общие свойства CSS (например, выравнивание) для двух различных селекторов (внутреннего div и h1 в первом примере), их можно задавать только для внешнего divа.

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

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

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

Далее »

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

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

.content img { max-width: 700px }

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

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

Закругленные или фигурные углы блока в настоящее время — один из самых распространенных элементов дизайна. Решений существует множество и на CSS, и на JavaScript, но большая их часть либо требует большого количества лишних пустых тегов и несемантичной верстки, либо позволяет закруглять углы только блоков с фиксированной высотой или с однородным фоном самого блока и страницы под ним.

Однако есть универсальное решение этой проблемы, которое может применяться в решениях любой сложности. Выглядит оно следующим образом: над блоком с контентом, которому нужны углы, добавляем два блока, высота которых равна радиусу скругления, с горизонтальными полями (margin), также равными отступу. Фон этого блока по цвету совпадает с фоном блока контента. Внутри этого блока помещаем еще два блока, у первого из которых отрицательным является левое поле, у второго — правое (величина отступа опять же равна радиусу скругленного угла). Для этих углов задаем фоновые картинки и отменяем фоновый цвет.

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

По умолчанию Apache настроен так, что кеширование запрещено даже для статического контента. Это означает, что при каждом обращении к сайту заново подгружаются все файлы CSS, JavaScript и картинки, что явно не способствует быстродействию.
Чтобы этого избежать, следует настроить выдачу заголовков Expires (время устаревания контента), ETag (строка, которая изменяется в случае изменения файла) и Cache Control (управление кешированием).
В Apache 2.x это делается с помощью следующих директив:
Далее »

Иногда требуется выполнить какую-либо обработку HTML-кода (например, расставить графические смайлики, выполнить типографирование, убрать лишние пробелы). До тех пор, пока в этом коде нет тегов <pre> и <code>, все очень просто решается обычными регулярными выражениями. Однако при наличии этих тегов возникает необходимость сохранить текст внутри них без каких-либо изменений.
В этом случае подойдет следующее решение: запомнить и заменить содержимое этих тегов специальными последовательностями, у которых очень мала вероятность встретиться в тексте, провести обработку оставшейся части, после чего провести обратную замену.
Последовательность, на которую производится замена, должна выбираться так, чтобы при обработке она никаким образом не была изменена.
Пример такого кода:
Далее »