Время от времени мы хочем добавить на наш сайт интерактивности. Часто это бывают флеш-баннеры или просто gif-анимация. Некоторые же предпочитают добавлять на сайты музыкальные элементы. Но при этом не следует забывать о такой вещи, как дополнительные расходы на трафик, которые, несомненно, тоже необходимо учитывать.
Чаще всего используются звуковые файлы в форматах mp3 или wav. Как правило, они сильно сжаты для экономии времени их загрузки, не все ведь имеют выделенные каналы на несколько мб за секунду.
Даже само консорциум W3C довольно негативно относится к использованию тега <embed> на вебстраницах. Ведь в больщинстве сайтов звук не используется, поэтому его наличие чаще всего вызывает неприятные эмоции при посещении сайта с фоновой музыкой.
Но иногда встроить фоновый звук бывает необходимо. Рассмотрим, как это делается.
В реализации на HTML использование фоновой музыки не является сложной задачей. Вам просто необходимо выбрать звуковой файл. Это может быть музыкальная композиция в формате mp3, wav или ином, но при этом она должна быть как можно меньшей по размеру.
Теперь осталось лишь интегрировать звук в веб-страницу. Для этого был создан специальный тег <embed>.
Рассмотрим пример интеграции музыки в html-код. Вот пример кода, который будет воспроизводить музыку:
.
.
.
.
.
Этот простой фрагмент кода просто проигрывает данный ему mp3 файл. Естественно, всякий звуковой файл имеет свою длительность. Но нам бы хотелось, чтобы при завершении его звучания, он снова стал проигрываться:
Также можно контролировать размеры плагина:
Также было бы здорово, если бы у посетителя была возможность контролировать фоновую музыку, но иногда это трудно интегрировать в дизайн. Поэтому можно установить у тега <embed> вот такой скрытый параметр:
Осталось лишь посоветовать быть очень осторожным при использовании фоновой музыки на вебсайте. Ведь мы ставим цель привлечь пользвателя и сделать его пребываение на ресурсе приятным.
Существует несколько разных способов форматирования элементов веб-страниц. Вообще под форматирование подразумевается придание им каких-либо нужных веб-дизайнеру атрибутов - например размер шрифта и его цвет. Но в этой статье мы не будем рассматривать именно такую работу со стилями - как показала практика их лучше менять средствами каскадных таблиц стилей - CSS. А это уже тема других статей.
Вы уже знаете, что для разделения страницы горизонтальной полоской необходимо воспользоваться тегом <hr>. Теперь давайте рассмотрим еще несколько методов изменения внешнего вида элементов нашей веб-страницы
Форматирование текста
В нашей страничке у есть строка ссылок "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>".
Попробуем сделать текст ссылок более крупным. Это можно сделать с помощью тега <b>, который отвечает за жирный шрифт (bold.
Поэтому наша строка "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>" преобразуется в "<p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>".
Вот как это будет выглядеть в коде:
Добавление изображений в веб-страницу
С помощью добавления изображений на страниц можно значительно увеличить ее привлекательность и добавить информативности. Пусть у вас есть изображение test.jpg, которое лежит в папке images. Тогда для его отображения на странице необходимо воспользоваться вот таким кодом:
У тега, который отвечает за вывод изображения, есть несколько параметров:
* Расположение изображения (директория).
* Ширина (width) и высота (height).
* Заголовок (title).
* Альтернативный текст (alt).
Параметры ширина и высота должны соответствовать реальным размерам изображения. В противном случае они уменьшат или увеличат его (естественно, что исходное изображение при этом останется прежних размеров).
Параметр заголовок используется для краткого описания картинки. Эта надпись появляется при наведении курсором мышки поверх картинки.
Последним, но не менее важным идет тег alt. Он очень важен для соответствия кода веб-страницы стандартам консорциума W3C. Этот тег отображается на месте изображения в том случае, если посетитель использует текстовый браузер или у него отключена функция отображения графики.
Такие поисковые машины, как Google и Яндекс (да и все остальные) могут использовать заголовки изображений для их индексации. В дальнейшем эта информация используется для поиска картинок по определенным ключевым словам.
Реферал - это url, с которого посетитель приходит на ваш сайт. К примеру, на странице http://www.site.com/links.html есть ссылка на ваш сайт. Если человек нажмет на нее, то он попадет на ваш сайт. Тогда url http://www.site.com/links.html будет вашим рефералом. Каждому владельцу ресурса не будет лишним знать, откуда именно заходят посетители на его сайт. Для тех, кому интересно решение данной проблемы (задачи) с помощью PHP, и посвящена данная статья.
Не спорю, что у любой уважающей себя CMS (content management system, система управления содержанием) есть модули (боты), которые отвечают за сбор статистики. Для тех же, у кого на сайте не стоит CMS, есть возможность попрактиковаться в написании и конфигурировании собственного мини-модуля статистики.
Его можно реализовать в небольшом скрипте, который будет отслеживать нажатия на ссылки, записывать их URL'ы в базу данных (в нашем примере это MySQL) и генерировать статистику в виде графика. Да и поможет разобраться, как это все работает на самом деле, не копаясь в модулях сторонних разработчиков.
Нам потребуется три файла:
* referer.sql (запрос к БД на создание таблицы, где будет храниться статистика);
* referer.php (сам скрипт);
* viewreferer.php (скрипт для просмотра статистики).
Для создания таблицы referer необходимо выполнить запрос referer.sql. Вот его содержание:
Теперь займемся файлом referer.php. Зададим значения переменным:
.
.
.
.
.
.
.
.
.
.
.
.
В переменную $ref заносим информацию о ссылке-реферере:
.
.
С помощью функции strtolower переводим значение переменной $ref в нижний регистр. Это делается для того, чтобы ссылки типа www.site.com, www.Site.com или WWW.SITE.COM были одинакового регистра.
Если переменная $ref не пустая,
.
.
то подключаемся к БД:
Производим выборку из столбца url, значение которого совпадает с $ref
Переменная $rows содержит количество совпадений
.
.
.
Если же не найдено ни одной записи (т.е c такого url'a еще не было рефералов)
устанавливаем значение переменной $hits в "1"
.
.
А далее просто выполняем вставку url'а и переменной $hits в нашу таблицу (referer):
Выполняем запрос:
.
.
.
Если же были найдены записи по данному url (т.е c этого url'a уже заходили рефералы),
Инкрементируем значение переменной $hits (увеличиваем на "1")
.
.
.
.
.
.
В ту страницу сайта, для которой необходима статистика по рефералам (как правило - это главная страница, index.php), необходимо вставить ссылку на скрипт referer.php. Предполагается, что файлы referer.php и index.php находятся в одной папке.
.
.
.
На этом и заканчивается содержимое скрипта referer.php. Но, как я написал выше, есть также и графическая статистика. Это будет наш третий файл - viewreferer.php.
Задаем переменные для подключения к БД:
.
.
.
.
.
.
Так как этот скрипт генерирует таблицу с графиком, то есть смысл для определенных диапазонов значений хитов назначить определенные цвета.
Опять соединяемся с БД:
Делаем выборку из БД и упорядочиваем ее по убыванию (desc) количества хитов (столбец hits).
Подсчитываем количество строк с уникальными рефералами (это попросту число строк в нашей таблице referer).
.
.
.
Если же не найдено ни одной записи (таблица пуста), то выводим сообщение:
Выбираем цвет для текущего значения hits:
Табличка с графиком строится как результат MySQL-запроса. В первой колонке содержится название url'а, а во второй - количество хитов, а в третей - цветная полоса.
.
.
.
.
.
.
.
.
.
.
.
Итак, все готово! Теперь можно периодически вызывать скрипт viewreferer.php и смотреть графическую статистику переходов на ваш сайт.
Так уж сложилось у веб-мастеров, что на их сайты заходят как пользователи, так и спамерские роботы. Если первые заходят на сайт для поиска нужной информации, то вторым непременно подавай адреса e-mail'ов. Так называемые флудеры, которым попросту от нечего делать или от небольшого интеллекта так и хочется завалить ваши новости, статьи бестолковой лексикой. Ну а форум сообщениями, явно не относящимися к тематике рассматриваемой темы. Это неизбежно, как и то что за ночью приходит день и наоборот. Но с этим нужно бороться - иначе ваши порядочные пользователи вовсе потеряют интерес к вашему сайту - можете не сомневаться.
Самым простой метод противодействия данным явлениям - это банить таких посетителей по ip. Проще говоря, закрывать им доступ на ваш сайт. Данный метод пусть и не идеальная защита, но порядка 90% защиту он вам обеспечит. а это уже лучше, чем ничего.
Далее рассмотрим, как данная техника защиты работает на практике и как ее можно реализовать на php.
За дело
Для начала нам нужно получить список ip-адресов, которым будет закрыт доступ на наш сайт. Еще потребуется использовать массивы и циклы - вот где нам и пригодится php.
Дальше - больше :)
Для получения ip-адреса посетителя можно использовать суперглобальную переменную $_SERVER['REMOTE_ADDR'].
На php это реализуется следующим образом:
.
.
А теперь разберемся с остальными переменными нашего мини-скрипта. Создаем массив ($ban), куда помещаем все забаненые ip:
.
.
Как видите, ip нужно помещать в одинарные кавычки и отделять их друг от друга запятой (все просто и ясно - за что я и люблю php)
В следующая переменная ($count) будет занесено количество этих самых ip:
.
.
Для чего это все нужно - читайте дальше.
Что мы имеем:
1) IP адрес определенного посетителя - переменная $ip;
2) массив запрещенных IP-адресов - $ban;
3) число элементов этого массива - $count.
Все элементарно просто - берем и сверяем адрес $ip со списком запрещенных - а так как у нас их может быть несколько, то для этого понадобится обход всего массива забаненых адресов.
Эту работу за нас легко проделает цикл for:
.
.
.
Вот и получается, что если проверяемый адрес совпадет с одним из наших "нехороших", то мы и дадим знать его обладателю - I'm sorry, you've been banned. 68.225.34.86.
А вот и весь скрипт целиком - это для тех, кому лень его собирать по частям из статьи:
Добрый день уважаемые господа! В данной статье я хотел бы затронуть очень важную тему, а именно шаблоны в PHP. В этой статье я приведу простой, но работающий пример “шаблонов”, также мы рассмотрим все за и против использования шаблонов.
Использование шаблонов
Прежде чем использовать шаблоны, подумайте, действительно ли они вам так нужны? В данный момент существует огромное количество коммерческих вариантов шаблонов. Все они работают по одному принципу (значение, замена), но имеют огромное количество наворотов, таких как автоматическое изменения регистра переменных, поиск по регулярным выражениям и т.д., все это конечно хорошо и легко реализуемо. Когда я решил посмотреть “коммерческий” шаблон, я ужаснулся, один его класс весил 398 КБ. Это нормально? Также в сети можно найти множество бесплатных вариантов шаблонов (классы шаблонов в PHPBB, IPB…), но все они много весят и работают не слишком быстро. Я предлагаю вам простой каркас “шаблонов” на PHP, с его помощью можно сделать свой классный шаблонизатор, со всеми необходимыми вам функциями.
За и против
Приведу вам жизненный пример, не так давно я занимался разработкой программы для одного человека, заранее было обговорено, что я пишу программу, а дизайн это его дело. Через некоторое время, мой заказчик пишет мне, что дизайн для моей программы сделать невозможно. Конечно, человек ничего не знающий в web-программировании будет испытывать огромные затруднения, при построении дизайна в PHP-программе. Главная задача ‘шаблонов’ – это облегчить жизнь дизайнеру. Безусловно, главным плюсом использования шаблонов можно считать то, что дизайнер без помощи программиста сможет изменять свой web-проект. Также мне нравится само разделение – программа и дизайн.
Я не использую шаблоны в своих личных проектах, т.к. они дают дополнительную “нагрузку”. Шаблоны это хорошо, но использовать их надо только если пишешь какой, то публичный проект или выполняешь работу на заказ.
Реализация шаблонов на PHP
И так приступим. Всего у нас будет 2 ключевых файла.
1) file2compile.tpl – файл который мы будем парсить
2) template.php – главный файл содержащий класс шаблонов
Листинг файла file2compile.tpl:
Листинг файла template.php:
Теперь я подробно опишу содержание этих двух файлов.
Файл: file2compile.tpl
Тут приведен обычный HTML код. В данном файле можно найти переменные вида {TITLE}. Это как раз именно те переменные которые мы будем заменять на нужное нам значение.
Файл: template.php
Мы имеем PHP класс, разделенный на 3 функции. В самом начале файла мы объявляем классовые переменные.
$vars – массив со значениями (переменная, замена).
$template – файл который мы будем парсить.
Теперь перейдем к описанию функций.
Функция: get_tpl
В качестве аргумента функция принимает имя файла. В теле функции мы проверяем задан ли аргумент и существует ли файл. Если аргумент не задан и файл не существует мы возвращаем значение FALSE. В противном случае мы заполняем классовую переменную(template) содержанием файла.
Функция set_tpl
Функция принимает 2 значения, это переменная (напр. {TITLE)} и значение на которое мы будем ее заменять.
Функция tpl_parse
Функция не принимает никаких значений. В теле функции мы считывает массив $vars и производим замену установленных переменных на заданные значения.
Использование класса.
Для вывода на экран используйте следующие команды:
Заключение.
Надеюсь, моя статья поможет вам лучше понять, что такое шаблоны.
На полноту изложения темы я не претендую, это ведь статья, а не справочное пособие, но для начинающих будет вводной информацией в эту технику.
Собственно, о самом термине:
Автоматическое перенаправление пользователя со страницы, на которую он попал на другую страницу или сайт. Технически реализовать редирект можно целым рядом способов.
Данным механизмом следует пользоваться только в исключительных случаях, по той причине, что поисковые системы считают, что редирект может быть использован недобросовестными раскрутчиками, привлекающими таким способом аудиторию на собственый сайт со страниц специально созданных для поисковых машин на страницы действительно содержащие полезный контент, что выглядит как обман поисковиков.
Перед началом повествования сделаю небольшие замечания:
* Вам не обязательно быть PHP-программистом, чтобы разобраться в технике редиректа;
* Подразумевается, что сервер (будь-то локальный - localhost, или же ваш хостинг в интернете) поддерживает выполнение PHP-скриптов.
А вообще, если что будет непонятно, то милости прошу на php.net :)
Суть технологии или техники редиректа - это автоматическое перенаправление кого-то куда-то :) А куда именно - вы сами задаете в скрипте, таким образом, при выполнении скрипта он вас автоматически перенаправит на определенный web-адрес.
Получается, что переход идет не по прямой ссылке с сайта вида <a href="http://www.google.com">google.com</a>, а через скрипт.
1. Открываем любой html-редактор (хотя подойдет и блокнот) и набираем/вставляем в него следующий код:
2. Далее сохраняем наш файл с вышеприведенным кодом, например code.php и загружаем его на веб-сервер. К примеру, если вы загрузили code.php в корневую папку сайта codeguru.com.ua, то вызвать скрипт можно по URL http://www.coders-library.ru/code.php. После исполнения скрипта на сервере вы будете автоматически перенаправлены (средиректены :)) на полезный сайт для программистов realcoding.net - что и было указано в нашем скрипте.
Еще можно просто на сайте в теле страницы (внутри тегов <body>...</body>) поставить ссылку вида:
.
.
Вот такая нехитрая техника редиректа (redirect).
Эта задача возникает для PHP-скриптов вызываемых без параметров или являющимися индексами директорий, однако формирующих данные персонально под пользователя (например на основе cookies или user agent) или работающих на основе быстро изменяющихся данных.
По спецификации HTTP/1.1 мы можем управлять следующими полями:
Expires
Задает дату истечения срока годности документа. Задание ее в прошлом определяет запрет кэш для данной страницы.
Cache-control: no-cache
Управление кэш. Значение no-cache определяет запрет кэш данной страницы. Для версии протокола HTTP/1.0 действует "Pragma: no-cache".
Last-Modified
Дата послднего изменения содержимого. Поле актуально только для статических страниц. Apache заменяет это поле значением поля Date для динамически генерируемых страниц, в том числе для страниц содержащих SSI.
На сайте www.php.net дается следующий код для запрета кеширования.
Однако, я считаю, что данный заголовок избыточен. В большинстве случаев достаточно:
Чтобы пометить документ как "уже устаревший" следует установить Expires равным полю Date.
Ну и не следует забывать, что формы, запрошенные по POST также не подлежат кэшированию.
Для оптимизации работы с сетью используется механизм сохранения однажды полученных по HTTP документов в кеше с целью их повторного использования без обращения к серверу-источнику. Документ, сохраненный в кеше будет доступен при следующем обращении к нему, без выгрузки с сервера-источника, что призвано повысить скорость доступа клиента к нему и уменьшить расход трафика сети.
Сами кэши бываю двух видов - локальные и общие
Локальный это кеш, хранимый непосредственно на диске у клиента, создаваемый и управляемый его браузером. Общий - кэш прокси-сервера организации или провайдера и может состоять из одного или нескольких прокси-серверов. Локальный кеш присутствует, наверное в каждом браузере, общими пользуется значительная часть людей использующих Internet. И если малую часть сайтов сейчас оценивают по расходу трафика, то скорость загрузки - важный критерий, который должен учитываться при разработке Вашего web-проекта.
Для динамических страниц, создаваемых в результате работы PHP-программы, казалось бы, кэширование вредно. Содержание страницы формируются по запросу пользователя на основе какого-либо источника данных. Однако, кэширование может быть полезным. Управляя им Вы можете сделать работу с Вашим сервером комфортнее для пользователя, разрешая загрузку из кэш определенных страниц, предотвращая тем самым их повторную выгрузку с Вашего сервера и экономя пользователю время и трафик.
Кэшировать или нет?
Возможность сохранения в кэш страницы определяется динамичностью информации в источнике данных. Таким образом необходимость использования кэша определяется Вами, исходя из планируемого времени жизни страницы.
Если речь идет о формировании выборки по базе (например, поиск введенного пользователем слова), то такую страница обязательно следует запрашивать с сервера при каждом вызове без использования кэш, так как количество вариантов запрашиваемых слов огромно, а если мы к тому же имеем дело с меняющимся массивом данных, то кэширование бессмысленно. Или речь идет о формировании допустим графика приходящих посетителей (который изменяется с каждым визитом, то есть практически с каждым вызовом), то кеширование уже просто вредно.
Однако, если мы говорим о том же графике но за вчерашний день, то кэширование рекомендуется, так как данные изменяться уже не будут и мы можем экономить себе и пользователю ресурсы и время на загрузку таких страниц помещением их в локальный или общий кэш. Как продолжение этой ситуации формирование графика не в реальном масштабе времени, а ежечасно. Тут Вы можете заранее предсказать дату окончания "срока годности" сформированных данных.
PHP-программа может управлять кэшированием результатов ее работы формируя дополнительные поля в заголовке HTTP ответа вызовом функции Header().
Несколько общих утверждений характерных не только для PHP-программ:
* Страницы передаваемые по POST никогда не сохраняются в кэш.
* Страницы запрашиваемые по GET и содержащие параметры (в URL присутствует '?') не сохраняются в кэш, если не указано обратное
Таким образом в большинстве ситуаций дополнительных инструкций в программу добавлять не надо. Основные моменты на которые следует обратить внимание можно свести к двум:
* запрет кэширования документов, кэшируемых по умолчанию
* кэширование документов, не подлежащих кэшированию по умолчанию.
Рассмотрим пример - прайс лист обновляемый по понедельникам. Вы заранее знаете, что содержание страницы можно хранить в кэш до наступления новой недели, что и следует указать в заголовке ответа обеспечивая нужное поведение страницы в кэш. Основная задача - получить дату следующего понедельника в формате RFC-1123.
.
.
.
.
.
Этим методом можно эффективно управлять поведением страницы в кэш и пременим но для большого числа страниц - так или иначе можно выделить временные интервалы в течении которых содержание страницы остается постоянным. Реальное положение вещей таково, что страницы большинства динамических сайтов имеют определенное время жизни исходя из которго разработчик может сераер более приятным для работы.
Другой подход, применяемый при более оперативном обновлении информации и одновременной высокой посещаемости сервера (иначе кэширование не будет эффективным) состоит в использовании заголовка Cache-control: max-age=секунды, определяющий время по истечении которого документ считается устаревшим и имеющий больший приоритет при вычислении "свежести" документа. Если Вы публикуете новости с интервалом в 30 минут:
Еще более интеллектуальный вид управления предоставляет HTTP/1.1 на основе содержимого с помощью директив Vary. Я очень рекомендую применять его при формировании изображений или текстов большого объема, которые как показывает практика изменяются крайне редко.
При этом у пользователя в случае возврата не будет происходить их повторной выгрузки, если содержание осталось прежним, и страница будет взята с Вашего сервера, если ее содержание изменилось. Рассмотрим пример выдачи изображения из базы данных индентифицируемых по ID. Вызов страницы выглядит следующим образом:
а значит по правилам страница не будет сохраняться в кэш (присутствуют параметры), но через заголовок можно управлять этим.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Для управления используется MD5 сумма содержимого изображения. Пока содержание не изменилось, сумма будет постояной. В случае изменения содержания в базе на сервере клиент выполнит запрос для повторного формирования содержания. Пока изображение постоянно содержимое будет отображаться из кэш.
Все, что мы записываем в переменную $s (массив), будет доступно для чтения при следующем заходе посетителя на сервер. Про сессии, на самом деле, можно сказать очень много, чтобы описать возможности и особенноти.. Но если вы поюзаете пример и попробуете использовать в своих задачах, сами поймете.
Часто возникает необходимость передать переменные в самой строке URL. Для этого нужно воспользоваться кодированием строки с переменными. А все спецсимволы типа пробела тоже должны учитываться.
Без применения кодирования:
Если испытать в работе первый код, то наш SQL запрос будет с некоторыми отсутствующими символами. А нам это не подходит, ведь теряется весь смысл многословного запроса.
Именно для решения этой проблемы программистамы было придумано кодировать строку перед подачей ее скрипту. Сама функция кодирования называется URLEncode и вся строка запроса кодируется в безопасном режиме (safe mode).
Процесс создания cookies на ASP очень прост. После создания этих файлов, они будут храниться на компьютерах у посетителей вашего сайта.
Одним из основных параметров у cookies является дата истечения срока их действия, т.е. expire date. Получается, что у вас, как у программиста, в руках жизнь этих файлов.
Еще отмечу, что если не указать дату expire для cookies, то они существуют до тех пор, пока пользователь не закрыл свой браузер.
Для примера:
Сейчас возьмите и откройте свой любимый бразуер (мой выбор в пользу огненного лиса Firefox :) ) и вызовите страницу с cookie.
Теперь просто удалите в коде строку (1), закройте браузер и еще раз вызовите код. Как вы можете видеть, уже имя сайта не отображается.
Все дело в том, что мы не модифицировали дату истечения срока действия cookie и при закрытии браузера они были потеряны.
Теперь рассмотрим код с добавленной датой expiration date:
Теперь после закрытия браузера и повторного вызова кода можно видеть, что cookie по-прежнему продолжает существовать.