Как отправить письмо через PHP, используя формы, и как при этом устранить возникающие проблемы с кодировкой? Рассмотрим на простом примере, как отправить вопрос через формы на сайте.
У нас будет 3 поля для ввода:
Ваше имя:
* E-mail:
* Вопрос:
Причем "Ваше имя" не является обязательным параметром.
Для простоты и удобства разместим форму и код прогараммы в одном файле. Важно указать кодировку страницы (windows-1251), чтобы далее не возникало проблем с перекодированием из win в koi (ниже)
Итак, приступим. Начало документа стандартное:
Код:
Далее идет 2 логические части:
1 - вывод формы
2 - обработка формы и отправка письма
Вначале идет вывод формы.
Для удобства в начале определяем e-mail через переменную $mailto, на который будет отсылаться письмо из формы.
Далее мы определяем, была ли нажата кнопка "отправить".
В конце формы имеется кнопка "отправить", она имеет аттрибуты name="ok" и value="отправить". После нажатия на нее переменная $ok будет иметь значение "отправить". Если кнопка не нажата, то переменная не определена.
Таким образом, выражение if (empty($ok)) означает буквально "если кнопка отправить не была нажата". Функция empty() возвращает true, если переменная не определена, содержит 0 или пустоту.
Код:
Далее идет вывод формы, если выполнено предыдущее условие if (empty($ok)).
Переменная $PHP_SELF означает, что обработку формы производит текущий файл, т.е. тот же, на кот. расположена форма.
Код:
В противном случае, т.е. если была нажата кнопка, идет обработка формы и отправка письма
Код:
Далее идет проверка на корректность заполнения поля "E-mail". Любители ругулярных выражений эту проверку поймут. Для остальных немного поясню:
Подразумевается, что e-mail должен быть такого вида:
слово@слово.слово
При этом слово может состоять из всех букв латинского алфавита и цифр и точка может быть не одна. (например слово@слово.слово.слово)
[a-z,0-9] - означает "любая буква латинского алфавита или цифра"
+ - означает, что [a-z,0-9] может встречаться 1 или более раз.
Если введен неправильный e-mail, то в переменную $error записывается ругательное сообщение.
Код:
Если поле "Вопрос" не заполнили, то к переменно $error добавляем еше одно ругательство:
Код:
Если переменная $error не пустая, то мы ее выводим на экран и немедленно прекращаем дальнейшую обработку с помощью exit
Код:
Ну а если таки $error осталась пустой и exit не сработал, то можно приступать к отправке письма, т.е. главной цели всего этого мероприятия...
Сформируем тему и тело сообщения:
А теперь самое главное, чтоб потом можно было прочитать письмо "по-русски" :) Функция convert_cyr_string перекодирует строку из win в koi (w-win, k-koi) Это необходимо, т.к. все почтовые клиенты по дефалту принимают письма в koi. А у нас вверху страницы стоит charset=windows-1251, поэтому функция грамотно переводит из win в koi Затем с помощью функции mail отправляется письмо на $mailto, указанный в начале файла.
Код:
Ну и самое приятное... Если письмо успешно отправлено, то выводим благодарственную надпись и предлагаем вернуться..
Код:
Стандартный конец..
Код:
P.S. Как наверно понял читатель, нужно выделить и скопировать все зеленые блоки в один файл по порядку и запустить его на сервере
Весь код является полностью проверенным и рабочим.
Часто возникает необходимость передать переменные в самой строке URL. Для этого нужно воспользоваться кодированием строки с переменными. А все спецсимволы типа пробела тоже должны учитываться.
Без применения кодирования:
Если испытать в работе первый код, то наш SQL запрос будет с некоторыми отсутствующими символами. А нам это не подходит, ведь теряется весь смысл многословного запроса.
Именно для решения этой проблемы программистамы было придумано кодировать строку перед подачей ее скрипту. Сама функция кодирования называется URLEncode и вся строка запроса кодируется в безопасном режиме (safe mode).
Событие - это какое-либо действие, осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке - осуществляется событие, его перехватывает специальный обработчик и перенаправляет нас на нужную страницу; при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее...
а). onmouseout и onmouseover
Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание на строку состояния. Вы должны увидеть там надпись с объяснением значения кнопки. Теперь отведите курсор и строка состояния очистится.
Содержимое строки состояния хранится в переменной window.status. Переменная это некоторый объект (можно представить себе ящик), значение которого (содержимое которого) можно изменять. Изменение значения осуществляется операцией присваивания (=), а выглядит она следующим образом:
имя_переменной = "значение"; (какие использовать кавычки: одинарные или двойные значения не имеет)
Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить переменной window.status нужное нам значение (подсказку к кнопке), а когда курсор будет убран - присвоить пустую строку("").
Вся задача сводится к тому, чтобы определить когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" - onmouseover, а "отведение курсора" - onmouseout.
Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover - onmouseover. И в итоге мы получаем следующее определение кнопок:
Как Вы видите, атрибут onmouseover имеет в качестве значения JavaScript-код: window.status='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover - onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие(присвоение значения переменной window.status). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события - onmouseout выполняет код, содержащийся в атрибуте onmouseout.
То же самое и со второй кнопкой.
б). <a href="Java Scriptfunction()">Function</a>
Теперь щелкните на ссылке и откроется окошко с подсказкой. Но заметьте, что окно небольших размеров и у него нет панели инструментов - такого силами html не сделаешь! В данном примере мы имеем окно размером 300x200, без панелей инструментов, содержащее документ help.html.
Для того чтобы создать такое окошко существует следующий JavaScript-код:
где:
1. helpWindow - это имя переменной (как window.status, только в данном случае имя выбирается произвольно). Эта переменная нужна для последующей работы с окном (например, закрыть его нестандартным способом - с помощью JavaScript-сценария).
- Зачем? Не проще ли указывать просто имя открывающейся страницы, например help.html?
- А если у нас две копии одной и той же страницы? Или две страницы с одинаковым именем(например, в разных папках)? Вот для того, чтобы не перепутать страницы и свободно работать именно с тем окном с которым предполагаешь и сделанно, так чтобы "окно" присваивалось переменной, так как имя переменной можно выбрать любое.
2. window.open(что-то) - это функция. Функции выполняют определенную задачу, в данном случае window.open() открывает новое окно.
3. help.html - это страница, которую нужно открыть.
4. "" - В кавычках должно быть имя окна, но оно нам не пригодится, поэтому там нулевая строка. В следующих кавычках указываются "параметры открываемого окна": оно не должно содержать панели инструментов (toolbar=0) и должно быть шириной 300 пикселей, а высотой - 200 (width=300,height=200, соответственно).
Теперь все, что нужно это по событию "щелчка" выполнить этот код, однако есть два "но". Во-первых строка очень длинная, чтобы присвоить ее какому-либо атрибуту - будет некрасиво смотреться, да и вызывать неудобства при чтении кода страницы. Во-вторых, первоначальное предназначение ссылки - это переход на другую страницу, но нам переходить никуда не нужно, нам нужно выполнить вместо этого JavaScript-код.
Первое решается написанием функции. Как я уже говорил функция выполняет некоторую задача, причем для использования функции достаточно указать ее имя. Можно не только использовать предопределенные(функции, которые имеется в языке и без нас), но и писать их самому. Обычно функции определяются(пишутся) в разделе HEAD документа, в котором используются:
"function" значит, что дальше будет написана наша функция; help() - это имя функции (оно будет указываться вместо тела функции (между { и })).
Вторая проблема решается тоже довольно просто. Адрес страницы указывается в атрибуте href, а нам надо выполнить JavaScript код вместо перехода по ссылке:
"Java Script" означает, что дальше должен идти JavaScript-код, и что он должен выполняться вместо стандартного перехода по ссылке. В данном случае наш JavaScript-код - это созданная нами функция help().
в). onclick
Нам не остается ничего более, как закрыть окно со справкой. Для этого воспользуемся кнопкой "Закрыть". Но нас интересует то, как работает эта кнопка, а имеет она следующий вид:
Дабы закрыть окно мы сделали щелчок(Click) на кнопке "Закрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Помните мы открывали окно? Мы писали window.open(), а здесь тоже самое только window.close(). window - это текущее окно, а close() - закрыть.
Это одно из наиболее частоупотребляемых событий.
г). onfocus и onblur
Ну что ж будем ближе подбираться к вводу требуемой от нас информации.
Как я уже говорил: элемент получает фокус когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите Ваше имя") автоматически выделялся и посетитель мог его удалить одним нажатием на del, а не удалять по одному символу, или выделять текст вручную. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. Для выделения текста используется метод select(). То есть атрибутом к полю надо прописать: onfocus="this.select();", this обозначает, что выделение должно происходить именно в этом текстовом поле (а можно прописать путь и к другому, но это не целесообразно).
А теперь попробуйте ничего не изменяя (или все удалив) убрать фокус (например, щелкнув в любом месте окна, или нажав Tab). Это событие blur, я прописал в нем выполнение функции: onblur="check();". Сама же функция имеет следующий вид (в разделе head страницы с формой между <script> и </script>):
document.forms[0].name.value - это то, что введено в текстовое поле. document - это текущий документ, forms[0] - первая форма на нашей страницы (отсчет с нуля), name = имя поля (задается атрибутом name (<input name="name">)), а value это и есть нужное нам значение (то, что введенно в текстовое поле, к которому м ы и написали путь). Введенное в поле мы присваиваем переменной val (var значит, что дальше идет имя переменной), чтобы в дальнейшем каждый раз не писать весь путь целиком.
Следующее это оператор if(если). Он выглядит следующим образом:
Мы сравниваем содержание переменной val с пустой строкой ('') и с начальной строкой ('Введите Ваше имя'). Обратите внимание, что сравнение не как в математике(с одним =), а сравниваются двума ==. || - или. Функция alert выводит окно с ошибкой (то, что в скобках - это текст ошибки). То есть:
И на всякий случай приведу целиком строку с кодом поля input:
д). onreset и onsubmit
Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой reset. Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно, и еще он будет долго материться. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.
Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто напросто надо вернуть обработчику события значение false, то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.
Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали ничего не изменится (разве что Вы JavaScript отключите).
Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют, заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь. Один из примеров базовой верификации я привел, когда объяснял событие blur - подобную функцию можно использовать и здесь. Тогда <form> будет содержать атрибут: onsubmit="return function();".
Но не забывайте, что нельзя ограничиваться одной лишь проверкой языком JavaScript, ибо его поддержка может быть отключена у посетителя, и тогда все Ваши труды по защите...
е). onmousedown и onmouseup
Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая - pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при при щелчке на ней(this) значение атрибута src (путь к картинке) тега <img> менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание - onmouseup, то есть здесь все просто:
ж). onload, onunload и onabort
Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. Если честно я не вижу сколько бы реального применения этому событию, зато я нашел, что можно сделать с onunload. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.). Откройте еще раз окошко справки. Допустим, что пользователь прочитал справку, и хочет отправить форму, или уйдет с нашего сайта, но при этом он забыл закрыть это маленькое окошко с подсказкой, мы на выходе закроем его сами. А для этого тег <body> (у начального документа) у нас будет выглядеть следующим образом:
Вы должны бы помнить, что helpWindow это имя нашего окна (ведь именно этой переменной мы присваивали его открытие: helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200")), а метод close() закрывает это окно. Некоторые нехорошие люди используют это событие, чтобы когда посетители уходили с его страницы, появлялись какие-либо окна, так называемые pop-up.
onabort - атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши плане. И в качестве предупреждения у нас может быть написано нечто похожее на
ЗАКЛЮЧЕНИЕ
Есть некоторые события о которых я здесь нарочно не упомянул, потому что не нашел им достойного применения, но Вам они возможно пригодятся, поэтому я уделю им немного внимания.
onchange - обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>) (например, когда Вы вводите или удаляете очередную букву какого-либо текстового поля).
onselect - обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области.
onerror - обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки), либо ошибкой времени выполнения (например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо - это и есть одна из ошибок времени выполнения).
Так же не забывайте, что я привел лишь по одному примеру из десятков возможных на каждое событие. Здесь главное Ваша фантазия и навыки. Например, события mouseout, mouseover, mouseup, mousedown часто используются для создания выпадающих меню и других визуальных эффектов, но это весьма трудный материал, который требует более глубоких знаний, причем не одного JavaScript.
Эта статья является продолжением статьи о создании счетчика просмотров для каждой страницы сайта на php и MySQL (если Вы ее не читали, то обязательно прочтите, иначе ничего не поймете из ниже сказанного). В этой статья я решил продолжить тему и расширить возможности счетчика просмотров страниц.
Для увеличения возможностей и получения статистики просмотров страниц сайта к базовому php скрипту необходимо добавить несколько строк и своих функций. В частности нужно будет создать еще одну таблицу, которая имеет следующую структуру:
Как видно из структуры MySQL таблицы, она состоит всего из двух полей (page_id – хэш сумма md5() от urla страницы и page_url – url страницы) и индекса, установленного на поле page_id – для значительного ускорения поиска значения в таблице. И еще, я не стал изменять изначальную таблицу my_log, которая использовалась для подсчета количества просмотров страниц, а создал другую по одной простой, но очень весомой причине: чем больше данных в таблице – тем медленнее осуществляется поиск по таблице. А скорость работы php скриптов такого уровня не должна ощутимо влиять на работу сайта в целом. Ведь если у вас коммерческий и при этом очень посещаемый сайт, то тратить строго ограниченное процессорное время на второстепенные задачи просто невыгодно, ведь зачастую прибыль зависит от того, сколько человек сможет увидеть ваш сайт.
Теперь перейдем непосредственно к коду php скрипта. Я внес в него незначительные изменения, в основном это новые функции для работы с MySQL таблицей my_log_urls.
В counter.php внес следующие изменения:
добавляем функцию Default_Write_URL
В результате, получаем значительную экономию времени т.к. делаем всего одну запись в таблицу my_log_urls и одну в my_log, и при следующих запросах этой же страницы запрос к таблице my_log_urls выполняться не будет, т.к. запись уже существует в таблице my_log, следовательно и в таблице my_log_urls она то же есть.
Для подсчета рейтинга страниц сайта, предлагаю написать другой php скрипт, который будет по значениям просмотров страницы в таблице my_log брать значения в таблице my_log_urls. А результат представлять в виде таблицы с данными о просмотрах страниц, отсортированными по убыванию (от большего значения к меньшему).
Ниже приведен код php скрипта, который необходимо скопировать в созданный вами файл top.php:
Данный php скрипт выводит 10 самых популярных страниц вашего сайта за последние сутки и за все время. В принципе, можно осуществлять вывод и большего числа страниц, изменив в php функциях MySQLReadAll и MySQLReadToday лимит считываемых из таблицы записей. А так же можно вместо самых популярных страниц увидеть самые непопулярные, изменив способ сортировки в этих же функциях с DESC на ASC.
Скачать данный php скрипт, вместе с модифицированным php скриптом подсчета просмотров страниц, можно по этой ссылке.
В этой статье будет рассмотрен скрипт, который создает анимацию в виде падающего снега. Анимация воспроизводится в заданной области web-страницы. Анимационный эффект, создаваемый данным скриптом выглядит весьма привлекательно, поэтому скрипт вполне может быть использован для создания анимированных логотипов, или блоков новогодних объявлений и поздравлений на сайте.
Область web-страницы, в которой производится анимация, задается элементом DIV с идентификатором ID_ANIMATE. Принцип работы скрипта заключается в вертикальном перемещении (с небольшими стохастическими перемещениями по горизонтали) элементов IMG, представляющих изображение снежинки в пределах этого элемента (элемент DIV с идентификатором ID_ANIMATE является элементом-контейнером для элементов IMG).
Элемент-контейнер DIV с идентификатором ID_ANIMATE определяется при помощи HTML-разметки в документе, в котором содержится скрипт. В этот элемент может быть помещено произвольное гипертекстовое содержимое, которое будет располагаться "на фоне" падающих снежинок, либо на фоне которого будут падать снежинки (это зависит от значения позиционного уровня этого содержимого). Код фрагмента HTML-разметки, определяющей элемент-контейнер DIV и его содержимое в демо-примере, приложенном к статье (см. демо-пример), приведен далее:
Параметры элемента-контейнера DIV (его размеры, схема позиционирования, значение свойства переполнения, цвет фона, параметры границы), а также перемещаемых в нем элементов IMG (схема позиционирования, размер, значение позиционного уровня), определяются правилами внедренной в документ таблицы слилей CSS:
Как можно видеть из листинга, элементам IMG, являющимся потомками элемента DIV с идентификатором ID_ANIMATE, назначается значение позиционного уровня 1. Поэтому, если вы хотите, чтобы "снежинки" двигались "под" остальным содержимым этого элемента, содержимому следует задать значение позиционного уровня больше 1 (как это сделано в демо-примере). Обратите также внимание на то, что элементам IMG назначена схема абсолютного позиционирования.
Теперь рассмотрим непосредственно работу скрипта. Полный листинг кода скрипта приведен далее.
Как можно видеть из листинга, в начале скрипта производится инициализация нескольких переменных. В переменную oAnimate заносится ссылка на DOM-объект элемента DIV с идентификатором ID_ANIMATE. Переменные nWidth и nHeight инициализируются значениями значения ширины и высоты этого элемента. Переменная nFSize должна содержать значение высоты (в пикселях) элементов изображений-снежинок (оно должно быть таким же, как задано в таблице стилей). Переменная strFlakeURL содержит URI ресурса изображения снежинки. Значение переменной nCount определяет общее количество движущихся изображений. Массив aoFlakes предназначен для хранения ссылок на DOM-объекты элементов изображений-снежинок.
Создание элементов изображений, добавление их в дерево документа, ссылок на DOM-объекты этих элементов в массив aoFlakes производится в процессе инициализации скрипта (см. окончание листинга кода скрипта). Значению свойства src DOM-объектов элементов изображений при этом присваивается значение переменной strFlakeURL. Для установки параметров движения каждого созданного элемента, вызывается функция ResetFlake. Для позиционирования соответствующего элемента IMG относительно элемента-контейнера DIV - UpdateFlakePos.
Функция ResetFlake устанавливает значения свойствам m_nX, m_nY и m_nSpeed DOM-объекта элемента, ссылка на который содержится в элементе массива aoFlakes с индексом, равным значению первого параметра ResetFlake. Свойство m_nX объекта хранит текущую координату по оси X, а свойство m_nY - по оси Y соответствующего элемента относительно контейнера. Свойство m_nSpeed определяет "скорость" движения элемента (величину его вертикального смещения на каждом шаге анимации). Функция ResetFlake устанавливает случайные значения свойствам m_nX и m_nSpeed. Свойству m_nY случайное значение устанавливается только в том случае, если параметр bRandY функции вычисляется в true (в этом случае элемент изображения снежинки будет иметь случайную позицию по вертикали). Иначе свойству m_nY устанавливаетя значение -nFSize (при этом изображение будет позиционироваться так, что оно будет полностью скрыто за верхней границей элемента-контейнера). При создании элементов изображений в процессе инициализации скрипта, ResetFlake вызывается со значением параметра bRandY, равным true.
Функция UpdateFlakePos принимает в качестве единственного параметра значение индекса в массиве aoFlakes и производит позиционирование элемента, ссылка на DOM-объект которого содержится в элементе массива aoFlakes с данным индексом в соответствии со значениями его свойств m_nX и m_nY.
Перемещение всех изображений-снежинок осуществляется функцией OnTimer, которая является обработчиком событий таймера, запускаемого в процессе инициализации скрипта.
Как можно видеть из приведенного ранее листинга кода скрипта, в функции OnTimer производится перебор всех DOM-объектов элементов изображений снежинок. Значение свойства m_nY каждого из этих объектов наращивается на величину его свойства m_nSpeed. Значение свойства m_nX изменяется на случайную величину, которая находится в диапазоне [-1..1] (так достигается случайное горизонтальное движение "снежинок"). В случае, если элемент изображения вышел за нижнюю границу элемента-контейнера, вызывается функция ResetFlake, которая устанавливает случайные значения свойств m_nX и m_nSpeed соответствующего объекта, а значение его свойства m_nY устанавливаетт в -nFSize. Затем вызывается функция UpdateFlakePos для перемещения конкретного элемента IMG в нужную позицию.
Поисковая оптимизация – одна из важнейших составляющих в продвижении сайта. И если вы вебмастер или блоггер, то вам в первую очередь нужно понимать основы SEO. Ниже приведены 10 простых правил по оптимизации, которые помогут вам подготовить ваш сайт к продвижению.
Правило 1: Не пытайтесь обмануть системы.
Если вы войдете в комнату, где будут одни ученые с докторскими степенями, думаете, вы сможете обмануть их? Нет. Так и Google имеет тысячи таких комнат с учеными, поэтому будьте уверены, что их обмануть вам не удастся. Избегайте любых советов, которые рассказывают, что вы сможете попасть в top5 за пару дней, при этом иметь великолепный сайт и уникальный контент.
Правило 2: Используйте ключевые слова.
Выберите несколько ключевых слов или фраз для вашего сайта. Используйте их, и слова связанные с ними в своих текстах, статьях. Повторять их постоянно – плохая идея (см. Правило 1).
Правило 3: Его величество «Контент».
Пользователей интересует содержание сайта, а не дизайнерские фишки. Если содержание сайта не уникально и не привлекает пользователей – не ждите их вообще.
Каждая страница вашего сайта должна строиться по схеме перевернутой пирамиды: начинаться с релевантного[1] заголовка H1, который обязательно содержит одно из ключевых слов; и первый абзац текста как краткое описание всей страницы.
Правило 4: Чистый код – правильный код.
Код вашего сайта должен быть читабелен для поисковых систем также как и для пользователей. Выделите основные блоки сайта: навигационное меню, заголовок, текст и т.д. Старайтесь использовать описательные названия классов и идентификаторов для тегов. Для списков используйте тег UL, для текста тег P, H1-H6 для заголовков, и STRONG для жирного текста (для ключевых слов и фраз). И конечно же, используйте верстку на DIV.
Правило 5: Самая важная страница – главная страница.
Как правило, в первую очередь нам необходимо, чтобы поисковые системы увидели главную страницу сайта. Поэтому ее содержание должно быть как можно более содержательным. Заголовки, текст и ссылки должны содержать самые важные ключевые слова, по которым пользователь обязательно будет ее искать.
Правило 6: Ссылки имеют значение.
Поисковые системы обращают особое внимание на ссылки и анкоры[2] ссылок. Старайтесь избегать таких ссылок как «Смотри здесь» или «Далее…». Лучше делать их неиндексируемыми. Анкор ссылки должен быть содержательным, т.е. краткий заголовок страницы на которую она ведет. Например: “Примеры и уроки для вебмастеров” или “Как сделать многоуровневое горизонтальное меню”. Не забывайте и об околоссылочном тексте.
Чем более релевантна ссылка, тем быстрее поисковая система найдет страницу с этой ссылкой. Не злоупотребляйте внешними ссылками[3], которые уведут пользователя на другой сайт. Если ваша страница ориентирована на дизайнерский минимализм, то ссылка на «Минимализм в дизайне» будет иметь место, а вот ссылка с картинки с кошкой будет бесполезной.
Правило 7: Заголовок заголовку рознь.
Каждая страница вашего сайта должна иметь свой уникальный заголовок – Title и краткое описание - Description. Достаточно всего 60 символов, но их значение будет огромным. Помните, что заголовок страницы – это то, что пользователь увидит в ответ на его поисковый запрос, поэтому по заголовку он должен понять найдет он ответ на вашей странице или нет.
Также не забывайте приписывать атрибут title у ссылок:
И атрибут Alt у изображений. Он также должен максимально кратко описывать то, что изображено на картинке:
Казалось бы мелочи, но для SEO это еще один важный способ оптимизации.
Правило 8: Лишним тегам – нет.
Давным-давно теги meta были секретом для SEO, но те дни прошли. Наиболее важным для поисковых систем и пользователей является тег description. Поисковые системы могут использовать его как подпись к ссылкам в результатах поиска. Поэтому убедитесь что вы дали грамотное описание каждой странице.
Правило 9: Карта сайта – лучший путеводитель.
Обязательно сделайте на вашем сайте карту сайта, которая будет содержать ссылки на все страницы сайта. Вы можете создать sitemap для Google с помощью генереаторов, например www.xml-sitemaps.com.
Правило 10: Дизайн – для людей.
Поисковые системы организованы так, чтобы пользователю было сразу понятно, что данный сайт - поисковик. Это значит, что и ваш сайт должен иметь дизайн, который будет говорить сам за себя, сразу давая понять какова тематика сайта. Поэтому чтобы сайт было легко найти, и он привлекал пользователей – сделайте его дизайн по максимуму приближенным к тематике сайта. Задача дизайнера – скорее решить проблему юзабилити, нежели нарисовать еще один шаблон для портфолио.
Существует несколько разных способов форматирования элементов веб-страниц. Вообще под форматирование подразумевается придание им каких-либо нужных веб-дизайнеру атрибутов - например размер шрифта и его цвет. Но в этой статье мы не будем рассматривать именно такую работу со стилями - как показала практика их лучше менять средствами каскадных таблиц стилей - 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 и смотреть графическую статистику переходов на ваш сайт.
На полноту изложения темы я не претендую, это ведь статья, а не справочное пособие, но для начинающих будет вводной информацией в эту технику.
Собственно, о самом термине:
Автоматическое перенаправление пользователя со страницы, на которую он попал на другую страницу или сайт. Технически реализовать редирект можно целым рядом способов.
Данным механизмом следует пользоваться только в исключительных случаях, по той причине, что поисковые системы считают, что редирект может быть использован недобросовестными раскрутчиками, привлекающими таким способом аудиторию на собственый сайт со страниц специально созданных для поисковых машин на страницы действительно содержащие полезный контент, что выглядит как обман поисковиков.
Перед началом повествования сделаю небольшие замечания:
* Вам не обязательно быть 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).
Все, что мы записываем в переменную $s (массив), будет доступно для чтения при следующем заходе посетителя на сервер. Про сессии, на самом деле, можно сказать очень много, чтобы описать возможности и особенноти.. Но если вы поюзаете пример и попробуете использовать в своих задачах, сами поймете.
Часто возникает необходимость передать переменные в самой строке URL. Для этого нужно воспользоваться кодированием строки с переменными. А все спецсимволы типа пробела тоже должны учитываться.
Без применения кодирования:
Если испытать в работе первый код, то наш SQL запрос будет с некоторыми отсутствующими символами. А нам это не подходит, ведь теряется весь смысл многословного запроса.
Именно для решения этой проблемы программистамы было придумано кодировать строку перед подачей ее скрипту. Сама функция кодирования называется URLEncode и вся строка запроса кодируется в безопасном режиме (safe mode).
Поиск
