Время от времени мы хочем добавить на наш сайт интерактивности. Часто это бывают флеш-баннеры или просто 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 и смотреть графическую статистику переходов на ваш сайт.
Данная проблема решается как минимум двумя путями, о чем и будет рассказано ниже.
Решение 1
Действительно, любой компонент можно создать и без (вне) формы или любого другого дочернего компонента. Для этого я использую параметр nil:
Решение 2
Я привожу некоторый код, касающийся описываемой проблемы: он работал, когда я использовал его в большом приложении. Я не знаю специфического метода создания компонента TTable вне родителей, поэтому я пошел путем создания своего класса от TTable во время инициализации модуля. Удобство такого подхода объясняется наличием под рукой всегда готового к работе экземпляра класса, стоит всего-лишь добавить модуль к вашему приложению.
Конечно, новый класс не должен иметь одиноко выглядящую процедуру со странной технологией фильтрации данных :=))), да и не помешала бы публикация нескольких событий, но этот пример призван все-го лишь продемонстрировать иной подход к решаемой задаче.
Я несколько раз видел в конференциях вопросы типа "как мне добавить элементы управления в TTabbedNotebook или TNotebook во время выполнения программы?". Теперь, когда у меня выдалось несколько свободных минут, я попытаюсь осветить этот вопрос как можно подробнее.
TTabbedNotebook
Добавление элементов управления в TTabbedNotebook во время проектирования - красивая и простая задача. Все, что Вам нужно - это установить свойство PageIndex или ActivePage на необходимую страницу и начать заполнять ее элементами управления.
Добавление элементов управление во время выполнения приложения также очень просто. Тем не менее, в прилагаемой документации по Delphi вы не найдете рецептов типа Что-и-Как. Видимо для того, чтобы окончательно запутать начинающих программистов, фирма-изготовитель даже не удосужилась включить исходный код TTabbedNotebook в VCL-библиотеку. Таким образом, TTabbedNotebook остается для некоторых тайной за семью печатями. К счастью, я имею некоторый опыт, коим и хочу поделиться.
Первым шагом к раскрытию тайны послужит просмотр файла DELPHIDOCTABNOTBK.INT, интерфейсной секции модуля TABNOTBK.PAS, в котором определен класс TTabbedNotebook. Беглый просмотр позволяет обнаружить класс TTabPage, описанный как хранилище элементов управления отдельной страницы TTabbedNotebook.
Вторым шагом в исследовании TTabbedNotebook может стать факт наличия свойством Pages типа TStrings. В связи с этим отметим, что Delphi-классы TStrings и TStringList соорганизуются с двумя свойствами: Strings и Objects. Другими словами, для каждой строки в TStrings есть указатель на соответствующий Objects. Во многих случаях этот дополнительный указатель игнорируется, нам же он очень пригодится.
После небольшого эксперимента выясняем, что свойство Objects указывает на нашу копию TTabPage и ссылается на имя страницы в свойстве Strings. Блестяще! Всегда полезно знать что ищешь. Теперь посмотрим что мы можем сделать:
TNotebook
Операция по заполнению элементами управления компонента TNotebook почти такая же, как и в TTabbedNotebook - разница лишь в типе класса - TPage вместо TTabPage. Тем не менее, если вы заглянете в DELPHIDOCEXTCTRLS.INT, декларацию класса TPage вы там не найдете. По неизвестной причине Borland не включил определение TPage и в DOC-файлы, поставляемые с Delphi. Декларация TPage в EXTCTRLS.PAS (можно найти в библиотеке VCL-исходников), правда, расположена в интерфейсной части модуля. Мы восполним пропущенную информацию о классе TPage:
Теперь, по аналогии с вышеприведенной процедурой, попробуем добавить кнопку на TNotebook. Все, что мы должны сделать - заменить "TTabbedNotebook" на "TNotebook" и "TTabPage" на "TPage". Вот что должно получиться:
Одной и наиболее сильных сторон среды программирования Delphi является ее открытая архитектура, благодаря которой Delphi допускает своего рода метапрограммирование, позволяя “программировать среду программирования”.
Такой подход переводит Delphi на качественно новый уровень систем разработки приложений и позволяет встраивать в этот продукт дополнительные инструментальные средства, поддерживающие практически все этапы создания прикладных систем.
Столь широкий спектр возможностей открывается благодаря реализованной в Delphi концепции так называемых открытых интерфейсов, являющихся связующим звеном между IDE (Integrated Development Environment) и внешними инструментами. Данная статья посвящена открытым интерфейсам Delphi и представляет собой обзор представляемых ими возможностей.
В Delphi определены шесть открытых интерфейсов: Tool Interface, Design Interface, Expert Interface, File Interface, Edit Interface и Version Control Interface. Вряд ли в рамках данной статьи нам удалось бы детально осветить и проиллюстрировать возможности каждого из них.
Более основательно разобраться в рассматриваемых вопросах вам помогут исходные тексты Delphi, благо разработчики снабдили их развернутыми комментариями. Объявления классов, представляющих открытые интерфейсы, содержатся в соответствующих модулях в каталоге ...DelphiSourceToolsAPI.
Design Interface (модуль DsgnIntf.pas) предоставляет средства для создания редакторов свойств и редакторов компонентов. Редакторы свойств и компонентов – это тема, достойная отдельного разговора, поэтому напомним лишь, что редактор свойства контролирует поведение Инспектора Объектов при попытке изменить значение соответствующего свойства, а редактор компонента активизируется при двойном нажатии левой кнопки мыши на изображении помещенного на форму компонента.
Version Control Interface (модуль VCSIntf.pas) предназначен для создания систем контроля версий. Начиная с версии 2.0, Delphi поддерживает интегрированную систему контроля версий Intersolv PVCS, поэтому в большинстве случаев в разработке собственной системы нет необходимости. По этой причине рассмотрение Version Control Interface мы также опустим.
File Interface (модуль FileIntf.pas) позволяет переопределить рабочую файловую систему IDE, что дает возможность выбора собственного способа хранения файлов (в Memo-полях на сервере БД, например).
Edit Interface (модуль EditIntf.pas) предоставляет доступ к буферу исходных текстов, что позволяет проводить анализ кода и выполнять его генерацию, определять и изменять позицию курсора в окне редактора кода, а также управлять синтаксическим выделением исходного текста.
Специальные классы предоставляют интерфейсы к помещенным на форму компонентам (определение типа компонента, получение ссылок на родительский и дочерние компоненты, доступ к свойствам, передача фокуса, удаление и т.д.), к самой форме и к ресурсному файлу проекта.
Также Edit Interface позволяет идентифицировать так называемые модульные нотификаторы, определяющие реакцию на такие события, как изменение исходного текста модуля, модификация формы, переименование компонента, сохранение, переименование или удаление модуля, изменение ресурсного файла проекта и т. д.
Tool Interface (модуль ToolIntf.pas) предоставляет разработчикам средства для получения общей информации о состоянии IDE и выполнения таких действий, как открытие, сохранение и закрытие проектов и отдельных файлов, создание модуля, получение информации о текущем проекте (число модулей и форм, их имена и т. д.), регистрация файловой системы, организация интерфейсов к отдельным модулям и т.д.
В дополнение к модульным нотификаторам Tool Interface определяет add-in нотификаторы, уведомляющие о таких событиях, как открытие/закрытие файлов и проектов, загрузка и сохранение desktop-файла проекта, добавление/исключение модулей проекта, инсталляция/деинсталляция пакетов, компиляция проекта, причем в отличие от модульных нотификаторов add-in нотификаторы позволяют отменить выполнение некоторых событий.
Кроме того, Tool Interface предоставляет средства доступа к главному меню IDE Delphi, позволяя встраивать в него дополнительные пункты.
Expert Interface (модуль ExptIntf.pas) представляет собой основу для создания экспертов — программных модулей, встраиваемых в IDE c целью расширения ее функциональности. В качестве примера эксперта можно привести входящий в Delphi Database Form Wizard, выполняющий генерацию формы для просмотра и изменения содержимого таблицы БД.
Я провел небольшое исследование, и вот что я выяснил: При закрытии приложения (используя системное меню или вызывая метод закрытия формы), возникают следующие события:
FormCloseQuery - действие по умолчанию, устанавливает переменную CanClose в значание TRUE и продолжает закрытие формы.
1. FormClose
2. FormDestroy
Если приложение активно и вы пытаетесь завершить работу Windows (Shut Down), происходят следующие события (с соблюдением последовательности):
1. FormCloseQuery
2. FormDestroy
Мы видим, что метод FormClose в этом случае не вызывается.
Теперь воспроизведем всю последовательность событий, происходящую при попытке завершить работу Windows:
1. Windows посылает сообщение WM_QUERYENDSESSION всем приложениям и ожидает ответ.
2. Каждое приложение получает сообщение и возвращает одну из величин: не равную нулю - приложение готово завершить свою работу, 0 - приложение не может завершить свою работу.
3. Если одно из приложений возвращает 0, Windows не завершает свою работу, а снова рассылает всем окнам сообщение, на этот раз WM_ENDSESSION.
4. Каждое приложение должно снова подтвердить свою готовность завершить работу, поэтому операционная система ожидает ответа TRUE, резонно предполагая, что оставшиеся приложения с момента предыдущего сообщения закрыли свои сессии и готовы завершить работу. Теперь посмотрим, как на это реагирует Delphi-приложение: приложение возвращает значение TRUE и немедленно вызывает метод FormDestroy, игнорируя при этом метод FormClose. Налицо проблема.
5. Завершение работы Windows.
Первое решение проблемы: приложение Delphi на сообщение WM_QUERYENDSESSION должно возвратить 0, не дав при этом Windows завершить свою работу. При этом бессмысленно пытаться воспользоваться методом FormCloseQuery, поскольку нет возможности определить виновника завершения работы приложения (это может являться как результатом сообщения WM_QUERYENDSESSION, так и просто действием пользователя при попытке закрыть приложение).
Другое решение состоит в том, чтобы при получении сообщения WM_QUERYENDSESSION самим выполнить необходимые действия, вызвав метод FormClose.
Прежде чем работать с графикой, необходимо понять, как именно в Windows реализован принцип перерисовки изображений. Не инструменты рисования являются предметом этого материала, а общий механизм перерисовки окон.
Данный материал посвящен системному сообщению WM_PAINT.
Основной принцип перерисовки: Save and Paint - сохраняй и прорисовывай.
Windows не хранит в памяти нарисованное изображение в виде растрового рисунка. Система перерисовывает ту часть окна , которая в какждый конкретный момент в этом нуждается.
Когда Windows ( или другое приложение) посылает запрос на перерисовку окна или его части, этому окну посылается сообщение WM_PAINT.
Посылка сообщения WM_PAINT окну может быть вызвана как явным обращением к методам Window или RedrawWindow, так и полученим запроса на перерисовку от системы, которое поступает при перемещении окна, изменении его размеров и так далее. Windows посылает это сообщение, когда не имеется никаких других сообщений в очереди сообщений приложения.
Сообщение WM_PAINT относится к сообщениям с низким приоритетом, поэтому оно будет обработано в самую последнюю очередь.
Если будут посланы подряд несколько сообщений WM_PAINT, то обработано будет только одно, так как система не регистрирует следующие сообщения WM_PAINT. Таким образом достигается минимизация затрат на исполнение очень длительной операции - перерисовки окна.
В соответствии с общим подходом, принятым в Windows, перерисовываться будет не все окно, а только та часть, которая в этом нуждается. Так называемая область модификации - Region. К области модификации добавляется только некорректно отображаемая часть - Invalid Area , именна та часть окна, которая нуждается в перерисовке.
Область окна установливается как некорректная (Invalid area) методами Invalidate, InvalidateRect, или InvalidateRgn, а так же после того, как окно передвигают, изменяют его размеры или выполняют любою другою операцию, которая воздействует на клиентскую область окна.
Метод Invalidate объявляет некорректной всю клиентскую область окна.
Метод InvalidateRect ( и InvalidateRgn ) объявляет некорректной клиентскую область внутри данного прямоугольника, добавляя этот прямоугольник к текущей области модификации ( Region).
Удалить некоторую область из Region можно методами ValidateRect или ValidateRgn.
Таким образом, некорректные области накапливаются в Region, пока эта область не будет обработана при следующем сообщении WM_PAINT , или пока она не будет объявлена корректной принудительно, методом ValidateRect или ValidateRgn.
Как уже отмечалось выше, установка непустой области модификации Region не заставляет приложение немедленно перерисоваться. Вместо этого, приложение продолжает получать сообщения из очереди, пока все сообщения не будут обработаны. Затем Windows проверяет область модификации, и если область не пустая, посылает сообщение WM_PAINT окну. При проверке области модификации могут быть посланы так же сообщения WM_NCPAINT и WM_ERASEBKGND, если требуется перерисовать рамку ( неклиентскую часть) окна или необходимо очистить окно.
Например, при увеличении размера окна будут посланы все три сообщения : WM_NCPAINT , WM_ERASEBKGND и WM_PAINT. При уменьшении размеров, окну придет только два сообщения из этой группы, сообщение WM_NCPAINT и WM_ERASEBKGND. По смыслу ситуации это резонно - при уменьшении окна клиентская часть его только урезается, следовательно стереть ее надо, а рисовать, вообще говоря, нечего...
[pagebreak]
Метод Window требует немедленной перерисовки клиентской области в обход общей очереди. Предварительно проверяется состояние области модификации: если область модификации не пустая, окну будет послано сообщение WM_PAINT. Если область модификации пуста сообщение WM_PAINT, наоборот, не будет послано.
Если эта область была помечена для стирания, то окну предварительно будет послано сообщение WM_ERASEBKGND.
Для получения более подробной информации смотрите Help WinAPI по темам:
Все вышеперечисленные методы являются методами класса CWnd, доступного через WinAPI.
Для перерисовки окон в Delphi применяются два метода :
Метод RePaint заключается в объявлении всей области окна как некорректной и немедленного запроса на перерисовавание окна. Достаточно привести реализацию этого метода из модуля Controls.pas, чтобы это увидеть:
Метод Refresh является модификацией метода RePaint. Для класса TWinControl метод Refresh повторяет вызов RePaint.
Таким образом, если Вам необходимо немедленно обновить окно, воспользуйтесь методом RePaint, если в этом нет необходимости и перерисовку нужно запросить, но в порядке общей очереди, лучше использовать метод Invalidate;
Для получения более подробной информации смотрите реализацию методов:
* TWinControl.Invalidate
* TWinControl.
* метод Refresh для разных компонент, наследников от TWinControl.