вторник, 17 июня 2008 г.

Епаный PNG с градиентом (transporant) в Internet Explorer

Блина, оказывается сделать вывод корректный PNG с transparnt-слоем, достаточно проблематичная штука (что бы в Inter Explorer от 6.0 пахала, Fire Fox ну и Opera).

Что это за хитрый слой? ну допустим вам на основную картинку нужно вывести картинку, которая содержит прозрачные точки... Получается красиво, но ...тень полная.

Проблема номер 1.
Как вывести тупо IMG с градиентом/транспорантом - проблем нет.

Для примера пишем:
<img style="BEHAVIOR: url(png.htc)" height="12" src="http://www.blogger.com/png-test-files.png" width="12" />

где png.htc типа хака (можно взять тут) - http://textlibrary.ru/files/png.htc

---------------
Проблема номер 2.
Как вывести допустим для боковой рамки налаживаемую тень на имеющийся под ней слой. То есть картинка вставляеться как фон, допустим таблицы (при этом высота не заданна - то есть любая, до 1000 пикселей):

В HTML для ячекий таблицы пишем что-то такое:
.........
<td class="png" width=""><img height="1" alt="" src="http://www.blogger.com/spacer.gif" width="12" />

..........

В CSS пишем такое для класса png:
.png {
background: url('png-test-files.png');
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png-test-files.png,sizingMethod=crop);
}
........
где png-test-files.png - наш фоновый рисунок размером допустим 12 на 1000 пикселей.

---------------
Проблема номер 3.

Как вывести графическую кнопку PNG с ховерсом.

В HTML для кнопки пишем следующий код:
.........
<div class="testclass"><a href="http://www.blogger.com/index.php"><img height="14" alt="" src="http://www.blogger.com/spacer.gif" width="38" /></a></div>

.........

В CSS пишем такое для класса testclass:
.testclass a{
background: url('home.png');
background-repeat: no-repeat;
display: block;
width: 38px;
line-height: 14px;
height: 14px;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home.png,sizingMethod=crop);
cursor:pointer
}

.testclass a:hover{
background: url('home_h.png');
background-repeat: no-repeat;
-background-image: none;
-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=home_h.png,sizingMethod=crop);
}

Где home.png - оригнальный вид графической кнопки, home_h.png - графическая кнопка при наведении на не курсора мыши.

Вообщем в итоге, поразмыслев решил что можно от варианта №1 вообще отказаться.

Главная проблема которая возникла при работе с PNG, совсместимость с Internet Explorer 6.0 :)

четверг, 5 июня 2008 г.

Пару плагинов для Fire Fox которые я постоянно использую

Использую их для анализов сайтов, структуры скорости загрузки и т.д.
Допустим выявили то что наличия авторизации в htaccess не дает кэшировать файлы сайта и таким образом увеличивает время его полной загрузки в 2.5-3 раза :)

Собственно вот и они:

Web Developer 1.1.6
https://addons.mozilla.org/ru/firefox/addon/60
Adds a menu and a toolbar with various web developer tools.


Firebug 1.05
https://addons.mozilla.org/ru/firefox/addon/1843
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

воскресенье, 1 июня 2008 г.

Про то чем сейчас занимаюсь в свободное время

Общая упрощенная схема того, что было задумано:
Описание блока Граббер.

1.1. По заданным признакам копирует содержимое WEB-сайта (его страниц).
Я пока выделяются несколько видов ссылок.

А) Информационные ссылки (содержащие информацию, там текст новости);
Пример для Лента.ру: http://lenta.ru/news/([0-9]{4})/([0-9]{2})/([0-9]{2})/([a-z])(.*)/$

Б) Навигационные ссылки (страницы которые могут содержать ссылки на страницы с информацией);
Пример для Лента.ру: http://lenta.ru/([a-z]){2,15}/$

В) Информационные ссылки II (страницы имеющие на одном URL информацию, которую можно представить в виде нескольких информационных страниц, то есть новости идут общим текстом на главной страницы (без кнопочек Подробнее), но есть возможность через регулярное выражение или шаблон автоматически их разбивать).

Г) RSS-каналы (могут быть использованы как для получения б), так как и а));

Для каждого вида информационной ссылки а), в) и г), может быть задан отдельный шаблон для получения текста исходной статьи (а так же отдельно, заголовка, времени, автора, ссылки на источник и т.д., то что может быть выделено заданным шаблоном).

Возможна встройка алгоритмов автоматического определение информационного содержимого страницы (видел такие в Инете). Они позволяют получать информацию со страницы без задания шаблона.

Пример шаблона для граббинга для Лента.ру новости:

[/tr][/tbody][/table][h2]{title}[/h2]{skip}[/iframe][/td][/tr][/table]{text}[p][/p]


{title} - заголовок;
{text} – содержимое;
{skip} – пропустить.

Теги {data}, {category}, и еще пару, пока не задействованы.Выполнено по аналогии с News Grabbers.

1.2. Помещает их в общую БД.
1.2.1. Проверка статьи на уникальность.
1.2.2. Добавление статьи в общую БД.
1.2.3. Исключение текущего URL из дальнейшего рассмотрения.
1.2.4. Поиск новых URL по пунктам а)-в) и добавление их на индексацию (ограничение если необходимо опционально, то есть установка фильтров на а)-в), брать только новые материалы, или определенное количество или ….)

1.3. Классифицирует.
Классификаторы могут быть автоматические и статические.
Статические – задание список категорий и ключевых слов. Статья причисляется к какой-то категории или ее подкатегории по наличию в теле ключевых слов.
Автоматические – задается слово или список ключевых слов, а категории строятся автоматически по базе имеющихся статей. Возможен вариант автоматического расширения списка ключевых слов.

На данный момент реализовано: 1.1. (а,б,г), 1.2 (кроме 1.2.4 и 1.2.1 - пока тупо сравнивает заголовки и сам текст, без вычисления % совпадения текстов), 1.3 – в процессе.