Blog. Just Blog

Web-мастеру и не только

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

PCL's Floating Window 1.0.0

06.08.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Для очередного проекта мне понадобился скрипт для создания плавающего окна, которое можно перетаскивать по экрану мышкой. Готовые скрипты или не имели нужного мне функционала, или же были слишком громоздкие, а таскать за собой чужеродные фреймворки ради одной функции - слишком дорогое удовольствие. В результате нескольких часов работы появился скрипт PCL's Floating Window.

Описание и возможности PCL's Floating Window:
  • Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 6.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.5-9.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.

  • Простое добавление скрипта на страницу, настройка и подключение к нужным плавающим элементам. Функции центрирования плавающих элементов в пределах видимой области экрана, их скрытия и отображения.

  • Поддержка неограниченного количества перетаскиваемых элементов, как блочных, так и строковых. Строковые элементы при перетаскивании преобразуются в блочные.

  • Корректное позиционирование нескольких плавающих элементов относительно друг друга, активный элемент всегда располагается поверх остальных. Корректное отображение взаимного перекрытия нескольких элементов.

  • Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Floating Window за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов!
Если в каком-нибудь из заявленных браузеров скрипт будет работать некорректно, то просьба сообщить в комментариях точную версию браузера и настройки подключения скрипта.

Читать статью целиком »
Просмотров: 1974 | Комментариев: 7

Нанесение графических водяных знаков на изображение

13.07.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Наносить текстовые надписи на картинки средствами PHP мы уже умеем. Теперь рассмотрим как делать то же самое, только на этот раз вместо текста будет графический маркер. Сам маркер представляет собой картинку в формате PNG-8 (глубина цвета - 8 бит), допускается прозрачность и произвольная форма. Если маркер будет с другой глубиной цвета, то при наложении прозрачный цвет будет заменен на черный. Другой формат маркеров не поддерживается! Файл PNG определяется по расширению, можно анализировать внутреннюю структуру, но это, наверное, в данном случае лишнее и остается на совести вебмастера.
Code (PHP) : Убрать нумерацию
  1. //-------------------------------------------------------------------
  2. // Функция нанесения графического водяного знака на изображение
  3. // Copyright (C) ManHunter / PCL
  4. // http://www.manhunter.ru
  5. //-------------------------------------------------------------------
  6. // Параметры вызова:
  7. // $picture - путь к файлу картинки на сервере
  8. // $marker - путь к файлу водяного знака на сервере
  9. // $opacity - процент прозрачности
  10. // $watermark_position - положение водяного знака на картинке
  11. //-------------------------------------------------------------------
  12.  
  13. // Константы положения водяного знака на картинке
  14. define ("WATERMARK_LEFT_BOTTOM",0);
  15. define ("WATERMARK_LEFT_TOP",1);
  16. define ("WATERMARK_RIGHT_BOTTOM",2);
  17. define ("WATERMARK_RIGHT_TOP",3);
  18. define ("WATERMARK_CENTER",4);
  19.  
  20. function Watermark_PNG_Image($picture, $marker, $opacity=100,
  21.                            $watermark_position=WATERMARK_RIGHT_BOTTOM) {
  22.   // Проверки на наличие файлов и допустимые параметры
  23.   if (!file_exists($picture)) { return false; }
  24.   if (!file_exists($marker)) { return false; }
  25.  
  26.   // Получить размеры исходного изображения
  27.   list ($sx,$sy)=GetImageSize($picture);
  28.   if ($sx==0 || $sy==0) { return false; }
  29.  
  30.   // Получить размеры маркера
  31.   list ($mx,$my)=GetImageSize($marker);
  32.   if ($mx==0 || $my==0 || $sx<($mx+20) || $sy<($my+20)) { return false; }
  33.  
  34.   // Если расширение маркера не .PNG, то выход с ошибкой
  35.   if (strtolower(substr($marker,-4))!=".png") { return false; }
  36.  
  37.   // Если расширения нет, то выход с ошибкой
  38.   $pocket=Array();
  39.   eregi("\.([a-z]*)$",$picture,$pocket);
  40.   if ($pocket[1]=="") { return false; }
  41.  
  42.   // На основании расширения создать картинку
  43.   switch (strtolower($pocket[1])) {
  44.     case "jpeg":
  45.     case "jpg": {
  46.       if (!$im=@ImageCreateFromJpeg($picture)) { return false; }
  47.       break;
  48.     }
  49.     case "gif": {
  50.       if (!$im=@ImageCreateFromGif($picture)) { return false; }
  51.       break;
  52.     }
  53.     case "png": {
  54.       if (!$im=@ImageCreateFromPng($picture)) { return false; }
  55.       break;
  56.     }
  57.     default: { return false; }
  58.   }
  59.  
  60.   // Получить координаты блока на картинке для нанесения надписи
  61.   switch ($watermark_position) {
  62.     case WATERMARK_LEFT_BOTTOM: {
  63.       $pos_x=10;
  64.       $pos_y=$sy-$my-10;
  65.       break;
  66.     }
  67.     case WATERMARK_RIGHT_BOTTOM: {
  68.       $pos_x=$sx-$mx-10;
  69.       $pos_y=$sy-$my-10;
  70.       break;
  71.     }
  72.     case WATERMARK_LEFT_TOP: {
  73.       $pos_x=10;
  74.       $pos_y=10;
  75.       break;
  76.     }
  77.     case WATERMARK_RIGHT_TOP: {
  78.       $pos_x=$sx-$mx-10;
  79.       $pos_y=10;
  80.       break;
  81.     }
  82.     case WATERMARK_CENTER: {
  83.       $pos_x=intval($sx/2-$mx/2);
  84.       $pos_y=intval($sy/2-$my/2);
  85.       break;
  86.     }
  87.     default: {
  88.       imageDestroy($im);
  89.       return false;
  90.     }
  91.   }
  92.  
  93.   // Нанести водяной знак с нужной прозрачностью
  94.   $watermark=@ImageCreateFromPng($marker);
  95.   ImageCopyMerge($im, $watermark, $pos_x, $pos_y, 0, 0, $mx, $my, $opacity);     
  96.   ImageDestroy($watermark);
  97.  
  98.   // Записать измененный файл на место
  99.   switch (strtolower($pocket[1])) {
  100.     case "jpeg":
  101.     case "jpg": {
  102.       ImageJPEG($im,$picture,90);
  103.       break;
  104.     }
  105.     case "gif": {
  106.       ImageGIF($im,$picture);
  107.       break;
  108.     }
  109.     case "png": {
  110.       ImagePNG($im,$picture);
  111.       break;
  112.     }
  113.   }
  114.   ImageDestroy($im);
  115.   return true; 
  116. }
Параметры вызова функции: $picture - полный путь к файлу на сервере, поддерживаются форматы JPG, GIF, PNG. Файл должен быть доступен для записи, так как после нанесения водяного знака он будет перезаписан с тем же именем. $marker - полный путь к файлу водяного знака в формате PNG. $opacity - прозрачность водяного знака в процентах, необязательный параметр, по умолчанию 100%. $watermark_position - положение маркера на картинке, необязательный параметр, по умолчанию правый нижний угол изображения. Доступные значения определены константами, прочие значения игнорируются: 0 - левый нижний угол, 1 - левый верхний угол, 2 - правый нижний угол (значение по умолчанию), 3 - правый верхний угол, 4 - центр изображения.

Читать статью целиком »
Просмотров: 4426 | Комментариев: 12

Защита контента сайта при помощи CSS

27.06.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Так уж получается, что старая пословица "Один с сошкой - семеро с ложкой" актуальна и в наше время. Только звучит немного иначе: "Один пишет - семеро копипастят", да и коэффициент 7 явно занижен. Я ничего не имею против, когда копируют статью и указывают прямую ссылку на сайт-первоисточник, это уважение к труду автора статьи и обычная практика в цивилизованном интернете. Но находятся безмозглые ублюдки, для которых размещение ссылки на сайт автора, у которого они скопипастили статью, является чем-то из области фантастики. В результате кто-то стрижет купоны за счет вашего труда, а вам от этого не перепадает ничего, даже новых посетителей. Активная защита, как правило, является пустой тратой времени (ну кроме, пожалуй, физического устранения, только УК РФ еще не отменили), письма админам и хостерам находят отклик и понимание лишь в единичных случаях. Полное запрещение копирования средствами скриптов и другие подобные меры во-первых бесполезны, а во-вторых будут только мешать нормальным посетителям пользоваться плодами вашего труда. Значит надо придумать какой-нибудь способ, который будет абсолютно прозрачным для обычных посетителей, но при этом статьи будут содержать информацию о том, откуда они были скопированы. Как ни странно, в этом могут помочь каскадные таблицы стилей CSS. А именно стиль display со значением none. При его применении к любому html-элементу, элемент визуально полностью исчезает со страницы, но при этом фактически продолжает на ней находиться. И, что самое важное для нас, содержимое скрытых элементов будет попадать в буфер при копировании. Простой пример, возьмем какой-нибудь оригинальный текст и добавим в него наш собственный, заключив его в теги span со стилем display:none.

Читать статью целиком »
Просмотров: 3372 | Комментариев: 25

Грабберы контента с других сайтов

16.06.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
Грабберы контента - это специальные скрипты или программы, которые получают некоторую информацию напрямую из текста html-страниц других сайтов, чаще всего без их ведома или разрешения. Название произошло от транскрипции английского глагола "to grab" - "захватывать", "использовать", хотя и русский вариант корня "грабить" тоже иногда подходит. Вообще, тырить чужой контент и использовать его на своих сайтах нехорошо. Но в некоторых случаях считаю это допустимым, например, когда для мобильных устройств требуется получить облегченные версии страниц сайтов, которые не имеют такой штатной функции. Или же надо удалить со страницы всякую рекламу, а то некоторые ублюдочные сайты умудряются заталкивать баннеры даже в RSS-ленты. Или, например, если требуется получать информацию с сайтов, у которых нет собственных API для выгрузки контента.

Самый простой способ получить текст нужной html-страницы сайта - при помощи функции PHP file_get_contents. Текст загруженной страницы разбирается регулярными выражениями. Вот пример граббера для Цитатника Рунета. После извлечения цитат с главной страницы можно вывести их все списком, как сделано в этом примере, или показать случайным образом одну из них.
Code (PHP) : Убрать нумерацию
  1. <?
  2. //-----------------------------------------------------------
  3. // Граббер цитат с Цитатника Рунета bash.org.ru
  4. // Загружает и парсит главную страницу, цитаты помещает в массив
  5. //-----------------------------------------------------------
  6. // Получить html-страницу
  7. $grab=@file_get_contents("http://bash.org.ru");
  8. if ($grab) {
  9.   // Заменить теги переноса строки на простые переносы строки
  10.   $grab=str_replace("<br>","\n",$grab);
  11.   // Получить регулярным выражением тексты цитат
  12.   preg_match_all("/<div class=\"vote\">([^>]*>){12}([^<]*)/",$grab,$matches);
  13.   // В массиве содержатся все найденные строки
  14.   for ($i=0; $i<count($matches[2]); $i++) {
  15.     echo nl2br($matches[2][$i]);
  16.     echo '<hr>';
  17.   }
  18. }
  19. else {
  20.   echo "Connection Error";
  21. }
  22. ?>
Регулярные выражения для извлечения данных придется писать самостоятельно, для каждого сайта свои. Отлаживать регулярные выражения можно как в онлайне здесь или здесь, так и с использованием стационарных программ. Для браузера Firefox есть хорошее расширение Regular Expressions Tester.

Читать статью целиком »
Просмотров: 22292 | Комментариев: 13

Internet Explorer 8 и мета-тег X-UA-Compatible

23.05.2009 | Категория: Web-мастеру и не только | Автор: ManHunter
С выходом финальной версии Microsoft Internet Explorer 8 web-мастерам добавилось головной боли из-за совместимости верстки под новый браузер. К счастью, в IE8 введены официально документированные режимы совместимости со старыми версиями Internet Explorer, по официальной версии "предназначенные для упрощения перехода с устаревших стандартов на новые". Говоря простым языком, пока web-мастера перекраивают свои сайты под IE8, для пользователей с новым браузером они могут временно поставить на страницы следующий мета-тег:
Code (HTML) : Убрать нумерацию
  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />
Этот тег указывает браузеру Internet Explorer 8, что страницу надо отображать так же, как в Internet Explorer 7, соответственно, значение мета-тега IE=6 (значение в документации не описано, но при этом срабатывает правильно) и IE=5 даст команду отображать страницу в режиме совместимости с Internet Explorer 6 и 5. Ключевое слово IE=EmulateIE7 указывает браузеру, что при отображении страницы надо использовать настройки из директивы <!DOCTYPE>. Причем рендеринг страницы выполняется действительно с особенностями указанных версий браузеров, в этом можно убедиться на различных хаках CSS, свойственных конкретной версии IE. Если указать значение IE=8, то страница будет отображаться, как пишут сами авторы, "с наивысшим уровнем поддержки отраслевых стандартов, включая Спецификацию каскадных таблиц стилей (CSS) W3C уровня 2.1 и W3C Selectors API, а также ограниченную поддержку Спецификации каскадных таблиц стилей (CSS) W3C уровня 3 (рабочий проект)", подробнее о всех доступных значениях мета-тега X-UA-Compatible можно прочитать в официальной документации.

Обратите внимание, что мета-тег X-UA-Compatible должен быть помещен в HEAD страницы самым первым по счету, если его поставить после любого другого мета-тега, например, после иконки или заголовка страницы, то он будет просто проигнорирован. Не забывайте про эту особенность, когда будете верстать свой сайт. Как вариант, мета-тег X-UA-Compatible можно использовать для проверки отображения сайта под разными версиями Internet Explorer, не устанавливая сами браузеры, а имея только один установленный IE8.

Просмотров: 4148 | Комментариев: 4

prev 01 ... 05 06 07 08 09 10 11 12 13 next
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Вам помог этот сайт?
Сказать спасибо! Поблагодарили 7,581 раз
<< 2012 - МАЙ >>
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Пробел

Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Google PageRank: 3 Google PR: 3 Яндекс тИЦ: 70 Яндекс тИЦ: 70
Google Page Speed score: 94/100 Google Page Speed score: 94/100
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2012
При использовании материалов ссылка на сайт обязательна
Время генерации: 0,22 сек. / MySQL: 2 (0,0037 сек.) / Память: 3,5 Mb
Наверх