
Web-мастеру и не только
Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал
Web-мастеру и не только - Карта сайта

Internet Explorer 8 и мета-тег X-UA-Compatible
23.05.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
С выходом финальной версии Microsoft Internet Explorer 8 web-мастерам добавилось головной боли из-за совместимости верстки под новый браузер. К счастью, в IE8 введены официально документированные режимы совместимости со старыми версиями Internet Explorer, по официальной версии "предназначенные для упрощения перехода с устаревших стандартов на новые". Говоря простым языком, пока web-мастера перекраивают свои сайты под IE8, для пользователей с новым браузером они могут временно поставить на страницы следующий мета-тег:Code (HTML) : Убрать нумерацию
- <meta http-equiv="X-UA-Compatible" content="IE=7" />
Обратите внимание, что мета-тег X-UA-Compatible должен быть помещен в HEAD страницы самым первым по счету, если его поставить после любого другого мета-тега, например, после иконки или заголовка страницы, то он будет просто проигнорирован. Не забывайте про эту особенность, когда будете верстать свой сайт. Как вариант, мета-тег X-UA-Compatible можно использовать для проверки отображения сайта под разными версиями Internet Explorer, не устанавливая сами браузеры, а имея только один установленный IE8.
Просмотров: 9079 | Комментариев: 4

Антиникотиновый информер
02.05.2009 | Категория: Web-мастеру и не только | Автор: ManHunter

Антиникотиновый информер
Когда я бросил курить, то в качестве стимула сделал себе такой антиникотиновый информер и использую его в подписи на некоторых форумах. Это PHP-скрипт, который считает в реальном времени сколько всего сэкономлено и выводит результат в виде графического файла.
Code (PHP) : Убрать нумерацию
- <?
- //-------------------------------------------------------------
- // Скрипт антиникотинового информера с интервалами дат
- // Copyright (C) ManHunter / PCL
- // http://www.manhunter.ru
- //-------------------------------------------------------------
- // Настройки информера
- $cig_per_day=20; // Сигарет в сутки, шт.
- $rub_per_day=65; // Денег на сигареты в сутки, руб.
- $nikotin=1.2; // Количество никотина в 1 сигарете, мг.
- $d=28; // Месяц, когда бросил курить
- $y=2008; // Год, когда бросил курить
- $m=7; // День, когда бросил курить
- $h=11; // Время, когда бросил курить, часы
- $i=30; // Время, когда бросил курить, минуты
- $size=10; // Размер шрифта информера
- $font="my_font.ttf"; // Файл с TTF-шрифтом
- $border=10; // Отступ текста от границ
- //-------------------------------------------------------------
- // Дальше лучше ничего без надобности не менять
- function num2word($num,$words) {
- $num=$num%100;
- if ($num>19) { $num=$num%10; }
- switch ($num) {
- case 1: { return($words[0]); }
- case 2:
- case 3:
- case 4: { return($words[1]); }
- default: { return($words[2]); }
- }
- }
- $start_date=mktime($h,$i,0,$m,$d,$y);
- $end_date=time();
- $day=intval(($end_date-$start_date)/(24*60*60));
- $hour=intval(($end_date-$start_date-$day*24*60*60)/(60*60));
- $days_array=Array("день", "дня", "дней");
- $hour_array=Array("час", "часа", "часов");
- // Сгенерировать текст информера
- $str="Не курю: ".$day." ".num2word($day,$days_array)." ".
- ($hour==0?"ровно":$hour." ".num2word($hour,$hour_array))."\n".
- "Не выкурено сигарет: ".
- intval(($day+($hour/24))*$cig_per_day)." шт.\n".
- "Не потрачено денег: ".
- intval(($day+($hour/24))*$rub_per_day)." руб.\n".
- "Не убито лошадок: ".
- intval(($day+($hour/24))*$cig_per_day*$nikotin/50)." шт.";
- // Перевести в юникод, чтобы корректно отображались русские буквы
- $str=iconv('windows-1251','utf-8',$str);
- // Получить размер графического блока для вывода текста
- list($ldx,$ldy,$rdx,$rdy,$rux,$ruy,$lux,$luy)=imageTTFBBox($size,0,$font,$str);
- // Получить размер информера
- $xx=$rdx+$border*2+$size;
- $yy=$rdy+$border*2+$size;
- // Создать изображение
- $im=imageCreatetruecolor($xx,$yy);
- // Определить цвета
- $black=imageColorAllocate($im,0,0,0);
- $red=imageColorAllocate($im,255,0,0);
- $white=imageColorAllocate($im,255,255,255);
- // Белый прямоугольник с красной рамкой
- ImageFilledRectangle($im,0,0,$xx,$yy,$red);
- ImageFilledRectangle($im,1,1,($xx-2),($yy-2),$white);
- // Наложить текст на фон
- imagettftext($im,$size,0,$border+5,$border+$size,$black,$font,$str);
- // Вывести картинку в формате PNG
- Header("Content-type: image/png");
- imagePNG($im);
- ?>
Читать статью целиком »
Просмотров: 6561 | Комментариев: 10

Использование OpenSearch для поиска по сайту
10.04.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
В большинстве современных браузеров есть специальное окно поиска, где вы можете производить поиск по различным сайтам. В список поисковых систем можно добавлять собственные ресурсы. Это делается по технологии OpenSearch, которая и описывает поисковый механизм вашего сайта. Чтобы пользователь мог добавить ваш сайт в список своих поисковых систем, вам требуется сделать всего лишь два простых действия.Сперва надо создать файл-описание поисковой системы вашего сайта. Вот примерный шаблон такого файла:
Code: Убрать нумерацию
- <?xml version="1.0" encoding="windows-1251" ?>
- <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
- <ShortName>Site Name</ShortName>
- <Description>Site Name - Search</Description>
- <InputEncoding>windows-1251</InputEncoding>
- <Contact>your_mail@domain</Contact>
- <Image width="16" height="16">data:image/x-icon;base64,AAABAAEAE...AAAA</Image>
- <Developer>Admin</Developer>
- <Url type="text/html" method="GET"
- template="http://site/search?q={searchTerms}&do=action"/>
- </OpenSearchDescription>
Code: Убрать нумерацию
- <Image height="16" width="16" type="image/x-icon">ссылка_на_иконку</Image>
Code: Убрать нумерацию
- <Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEAA...DAAA=</Image>
Читать статью целиком »
Просмотров: 8281 | Комментариев: 5

"Я знаю AJAX, ЧПУ, CMS и много других страшных слов"
28.03.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Немного перефразированную шутку из названия я часто вспоминаю, когда посещаю многие сайты, популярные и не очень. Web-мастера, начитавшись умных слов и получив в свое распоряжение готовые CMS сайтов и фреймворки, облегчающие разработку, начинают их активно использовать. И в результате очень часто в жертву приносится такая важная составляющая сайтов, как юзабилити. Если единственное, для чего вам нужен сайт - это завешать его порнушными баннерами и поп-апами в три слоя, разместить стыренный контент исключительно на платных файлообменниках, чтобы любыми средствами срубить бабла, то валите отсюда подальше, мне с такими мразями говорить не о чем. Эта статья для немногочисленных web-мастеров, которые стремятся к тому, чтобы на их сайт посетителям хотелось вернуться, чтобы от результатов их труда все получали только удовольствие. Я никого не хочу ни в чем убеждать, но если кто-нибудь после прочтения задумается, значит моя цель достигнута. Мало знать современные технологии, надо уметь их грамотно применять. Вполне возможно, что какие-то вещи будут для вас очевидными, просто наболело :)В современном web-строительстве очень популярно использование так называемых ЧПУ - "человекопонятных УРЛ". Это красивые, интуитивно понятные ссылки, формируемые из названия раздела и статьи. Например:
http://www.site.ru/category/subcategory/article_name
При обращении к такой ссылке она разбирается средствами сервера на отдельные параметры и дальше обрабатывается как обычная ссылка. Один из основных принципов формирования ЧПУ заключается в том, что при обрезании ссылки до последнего слеша, посетитель должен попадать на вышестоящий раздел сайта. Это хорошо и правильно, но до тех пор, пока в ссылке не начинает присутствовать дата:
http://www.site.ru/2009/01/25/article_name
По логике вроде бы все правильно: дата добавления статьи, название статьи. При обрезании ссылки до дня получаем все статьи за день, до месяца - за месяц и т.д. Проблема в том, что такая система формирования ссылок хорошо подходит для новостных сайтов, но категорически не годится для основного контента порталов. Информация на новостных сайтах привязана ко дню, когда случилось это событие и после публикации на сайте вряд ли когда изменится. А в популярных портальных движках (названий не указываю, кому надо и так поймет) дата публикации обычно равна дате последнего редактирования статьи, и вот тут начинаются косяки. Реальный случай из жизни: на каком-нибудь сайте выложили какую-то нужную мне информацию. Я зашел на сайт, добавил ссылку в закладки браузера или послал ссылку товарищу в аську. На следующий день пользователь, разместивший статью, отредактировал ее. В результате дата изменилась, ссылка, соответственно, тоже, а сохраненная ранее ссылка становится недействительной. Приходится заново тратить время, искать нужную статью, что никак не добавляет положительного отношения к сайту. Аналогичная ситуация складывается, если идентификация в ЧПУ жестко завязана на полном названии статьи. Удобно? Нет.
Читать статью целиком »
Просмотров: 5419 | Комментариев: 9

Нанесение текстовых водяных знаков на изображение
16.02.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Для предотвращения воровства контента часто используются водяные знаки на изображениях. Это может быть логотип сайта, надпись об авторских правах или, например, ссылка на ваш сайт. Для нанесения водяных знаков создано множество различных программ, но при наполнении сайта гораздо удобнее использовать скрипт, который будет маркировать картинки сразу при загрузке на сервер. Я написал такую функцию, наносящую нужный текст в указанное место изображения. Ее особенностью является то, что перед нанесением надписи анализируется цвет картинки в месте, где будет расположен текст. Для темных картинок будет выбран белый цвет надписи с черной рамкой, а для светлых наоборот, будет выбран черный цвет надписи с белой рамкой.Code (PHP) : Убрать нумерацию
- //-------------------------------------------------------------------
- // Функция нанесения текстового водяного знака на изображение
- // Copyright (C) ManHunter / PCL
- // http://www.manhunter.ru
- //-------------------------------------------------------------------
- // Параметры вызова:
- // $picture - путь к файлу картинки на сервере
- // $font - путь к файлу с TrueType-шрифтом на сервере
- // $font_size - размер шрифта
- // $marker - текст водяного знака
- // $watermark_position - положение водяного знака на картинке
- //-------------------------------------------------------------------
- // Константы положения водяного знака на картинке
- define ("WATERMARK_LEFT_BOTTOM",0);
- define ("WATERMARK_LEFT_TOP",1);
- define ("WATERMARK_RIGHT_BOTTOM",2);
- define ("WATERMARK_RIGHT_TOP",3);
- define ("WATERMARK_CENTER",4);
- function Watermark_Image($picture, $font, $font_size, $marker,
- $watermark_position=WATERMARK_LEFT_BOTTOM) {
- // Проверки на наличие файлов и допустимые параметры
- if (!file_exists($picture)) { return false; }
- if (!file_exists($font)) { return false; }
- if ($font_size<10) { return false; }
- if (($marker=trim($marker))=="") { return false; }
- // Получить размеры исходного изображения
- list ($sx,$sy)=GetImageSize($picture);
- if ($sx==0 || $sy==0) { return false; }
- $dst_im=imageCreatetruecolor($sx,$sy);
- // Определить цвета для нанесения водяных знаков
- $black=ImageColorAllocate($dst_im,0,0,0);
- $white=ImageColorAllocate($dst_im,255,255,255);
- // Если расширения нет, то выход с ошибкой
- $pocket=Array();
- eregi("\.([a-z]*)$",$picture,$pocket);
- if ($pocket[1]=="") { return false; }
- // На основании расширения создать картинку
- switch (strtolower($pocket[1])) {
- case "jpeg":
- case "jpg": {
- if (!$im=@ImageCreateFromJpeg($picture)) { return false; }
- break;
- }
- case "gif": {
- if (!$im=@ImageCreateFromGif($picture)) { return false; }
- break;
- }
- case "png": {
- if (!$im=@ImageCreateFromPng($picture)) { return false; }
- break;
- }
- default: { return false; }
- }
- ImageCopyResampled($dst_im, $im, 0, 0, 0, 0, $sx, $sy, $sx, $sy);
- imageDestroy($im);
- // Получить координаты блока под текст
- list($lnx,$lny,$rnx,$rny,$rvx,$rvy,$lvx,$lvy) =
- ImageTTFBBox($font_size,0,$font,$marker);
- // Вычислить размеры блока
- $text_width=$rnx-$lnx;
- $text_height=$rny-$rvy;
- // Получить координаты блока на картинке для нанесения надписи
- switch ($watermark_position) {
- case WATERMARK_LEFT_BOTTOM: {
- $pos_x=10;
- $pos_y=$sy-10;
- break;
- }
- case WATERMARK_RIGHT_BOTTOM: {
- $pos_x=$sx-$text_width-10;
- $pos_y=$sy-10;
- break;
- }
- case WATERMARK_LEFT_TOP: {
- $pos_x=10;
- $pos_y=$text_height+10;
- break;
- }
- case WATERMARK_RIGHT_TOP: {
- $pos_x=$sx-$text_width-10;
- $pos_y=$text_height+10;
- break;
- }
- case WATERMARK_CENTER: {
- $pos_x=intval($sx/2-$text_width/2);
- $pos_y=intval($sy/2+$text_height/2);
- break;
- }
- default: { return false; }
- }
- // Подсчитать количество светлых и темных пикселов в блоке
- $dark=0;
- $light=0;
- for ($x=0; $x<$text_width; $x++) {
- for ($y=0; $y<$text_height; $y++) {
- $color=imageColorAt($dst_im,($pos_x+$x),($pos_y+$y-$text_height));
- list($r,$g,$b)=array_values(imageColorsForIndex($dst_im,$color));
- if (($r+$g+$b)<(128*3)) { $dark++; } else { $light++; }
- }
- }
- // В зависимости от количества светлых и темных точек нанести
- // светлую или темную надпись
- if ($light>$dark) {
- // Темный текст со светлой рамкой
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y-1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y-1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y-1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y+1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y+1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y+1,$white,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y,$black,$font,$marker);
- }
- else {
- // Светлый текст с темной рамкой
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y-1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y-1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y-1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x-1,$pos_y+1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y+1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x+1,$pos_y+1,$black,$font,$marker);
- ImageTTFText($dst_im,$font_size,0,$pos_x,$pos_y,$white,$font,$marker);
- }
- // Записать измененный файл на место
- switch (strtolower($pocket[1])) {
- case "jpeg":
- case "jpg": {
- ImageJPEG($dst_im,$picture,90);
- break;
- }
- case "gif": {
- ImageGIF($dst_im,$picture);
- break;
- }
- case "png": {
- ImagePNG($dst_im,$picture);
- break;
- }
- }
- imageDestroy($dst_im);
- return true;
- }
Читать статью целиком »
Просмотров: 11911 | Комментариев: 10
