~ XakNet Forum ~ - Web программирование http://forum.xaknet.ru PHP, PERL, MySQL, JavaScript, etc ru Thu, 09 Sep 2010 06:58:36 GMT vBulletin 60 http://forum.xaknet.ru/acid/images/misc/rss.jpg ~ XakNet Forum ~ - Web программирование http://forum.xaknet.ru google parser http://forum.xaknet.ru/showthread.php?t=18476&goto=newpost Thu, 26 Aug 2010 00:52:14 GMT Решил подучить перл и закрепить пройденное мини-релизом: Код: --------- use Socket; if (@ARGV != 2) { explain(); exit 1; Решил подучить перл и закрепить пройденное мини-релизом:
Код:
use Socket;

if (@ARGV != 2)
{
        explain();
        exit 1;
}

$dork_file = $ARGV[0];
if (!(-e $dork_file))
{
        print "\r\nCan't locate $dork_file\r\n\r\n";
        exit 1;
}
else
{
        open (DFILE, $dork_file);
}

$out_file = $ARGV[1];
open(OUTFILE, ">>$out_file");

while(<DFILE>)
{
$dork = $_;
chomp $dork;
$html = get("http://www.google.com/search?filter=0&num=100&start=100&q=".$dork);
@content = split(/<a/, $html);
foreach $str (@content)
{
if ($str =~ /href="(.*)" class=/)
{
$site = $1;
if ($site =~ m/http:\/\//)
{
if (!($site =~ m/google/))
{
print OUTFILE $site."\r\n";
}
}
}
}
sleep(5);
}


sub get()
{
$site = $_[0];
$site =~ s/http:\/\///;
($host, $tmp) = split(/\//, $site);
$tmp = $site;
$tmp =~ s/$host//;
if (length($tmp) == 0) { $tmp = "/"; }
socket (sock, PF_INET, SOCK_STREAM, getprotobyname("tcp"));
$iaddr = inet_aton($host);
$paddr = sockaddr_in("80", $iaddr);

connect(sock, $paddr) or return "Failedto connect to $host";
send(sock, "GET $tmp HTTP/1.1\r\nHost: $host\r\nUser-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.3) Gecko/20100423 Ubuntu/10.04 (lucid) Firefox/3.6.3\r\nConnection: close\r\n\r\n", 0);
@resp = <sock>;
$line = "";
foreach $t (@resp)
{
$line .= $t;
}
return $line;
}

close(DFILE);
close(OUTFILE);

sub explain()
{
        print qq(
        Google parser by [ac1D] | icq:941182
        Usage: google.pl <file_with_dorks> <outfile>
        Example: google.pl dork.txt out.txt

)
}
Автор - [ac1D] (C) 2010. ]]> Web программирование aciiiD http://forum.xaknet.ru/showthread.php?t=18476 <![CDATA[[jQuery] aeroWindow]]> http://forum.xaknet.ru/showthread.php?t=18434&goto=newpost Mon, 23 Aug 2010 21:44:48 GMT Изображение: http://kronus.photosquare.kiev.ua/wp-content/uploads/2010/08/AeroWindow-Teaser.png Aero Window - это плагин для jQuery, который создает...
Aero Window - это плагин для jQuery, который создает popup-окна в стиле Aero.
Особенности:
  • Анимированный header в окнах.
  • Стандартные кнопки windows: свернуть, развернуть, закрыть окно.
  • Поддержка двойного клика (развернуть окно).
  • Перетягивание окон.
  • Поддержка z-индекса при расположении окон на странице.
  • Анимация изменения размеров окна.
Настройки:
  • Заголовок окна.
  • Задание начальной позиции окна.
  • Стандартный размер окна.
  • Размер свернутого окна.
  • Задание состояния нового окна (свернутое, развернутое, обычное).
  • Анимация окна (около 30 вариантов).
  • Генерация новых окон через события мыши или javascript-функции.
Плагин совместим с:
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla Firefox 3
  • Google Chrome 4
  • Apple Safari 4
  • Opera 10
Официальная страница проекта - [Для просмотра данной ссылки нужно зарегистрироваться]
Демо доступно по [Для просмотра данной ссылки нужно зарегистрироваться].
Плагин базируется на jQuery версии 1.4.2.

От себя:
в плагине есть одна вещь, которая немного портит работу. Это сворачивание окон. Окна сворачиваются в левый нижний угол друг на друга. Я написал небольшую "надстройку" над плагином, которая этот "эффект" устраняет.
Скачать плагин с надстройкой можно по [Для просмотра данной ссылки нужно зарегистрироваться].
Внесенные мной изменения находятся между комментариями //Taskbar, //Taskbar end. ]]> Web программирование KronuS http://forum.xaknet.ru/showthread.php?t=18434 Качаем с YouTube http://forum.xaknet.ru/showthread.php?t=18374&goto=newpost Fri, 20 Aug 2010 15:45:05 GMT Как же не хватает на страницах YouTube ссылки "Скачать"... Так давайте сделаем ее сами.
Снова нам на помощь приходят скрипты. И снова не хочется делать на "чистом" JavaScript. Хочется упростить себе жизнь и подключить jQuery.
Код:
/**
 * Author: KronuS (icq 579-573)
 * Version: 1.0
 * Date: 20.08.2010
 */
$(document).ready(function(){
        var cn = $('body').html();
        start = cn.indexOf('"fmt_url_map": "');
        if (start >  0) {
                end = cn.indexOf(',', start);
                link = cn.substring(start + '"fmt_url_map": "'.length, end);
                link = link.replace(/"/g,'');
                link = link.replace(/\\/g,'');
                link = link.substring(link.indexOf('|')+1, link.length);
                var c = $('div#watch-headline-user-info').html();
                $('div#watch-headline-user-info').html(c + '<a href="' + link + '">Скачать</a>');
        }
});
После подключения наших скриптов, на странице с видео рядом с кнопкой "Подписаться" появится ссылка "Скачать" (см. рис. ниже)



YouTube предлагает скачать видео без разширения. Разширение надо ставить "flv".
[Для просмотра данной ссылки нужно зарегистрироваться] ]]> Web программирование KronuS http://forum.xaknet.ru/showthread.php?t=18374 Получаем преимущество в HTML5 и CSS3 с Modernizr http://forum.xaknet.ru/showthread.php?t=18316&goto=newpost Tue, 17 Aug 2010 11:04:31 GMT Десять лет назад только самые продвинутые веб-дизайнеры использовали CSS для разметки и стиля. Поддержка браузерами разметки CSS была слабой и... Десять лет назад только самые продвинутые веб-дизайнеры использовали CSS для разметки и стиля. Поддержка браузерами разметки CSS была слабой и лагающей, но эти люди хранили верность стандартам веб, изобретая хитрые финты, которые сделали бы разметку CSS рабочей во всех браузерах. Один такой финт, ставший широко используемым был сниффинг: Обнаружение каждого браузера и версии пользователя, просматривая navigator.userAgent, в JavaScript. Сниффинг браузера позволял быстро и просто подгрузить код, позволяя разработчикам охватить разные браузеры с разными инструкциями.

Теперь разметки на CSS вполне обыденны, и у каждого браузера есть надежная поддержка для них. Но, теперь у нас есть CSS3 и HTML5, а ситуация повторяется – различные браузеры разные уровни поддержки этих новых технологий. Мы приготовились, тем не менее, и больше не изобретаем CSS хаки и не используем сниффинг браузеров – это ненадежные и плохие методы. Также, мы убеждаем все больше и больше клиентов, что «[Для просмотра данной ссылки нужно зарегистрироваться]». Итак, как нам разобраться с этой новой, но знакомой проблемой? Очень просто: Мы используем распознавание функций, это означает, что мы не спрашиваем браузер «кто ты?» и делать ненадежные действия. Вместо этого мы спрашиваем браузер: «Можешь ли ты сделать это и то?» Это простой способ проверить браузер на совместимость, но, делать эти проверки вручную утомительно. Для решения этой проблемы (и других), вы можете использовать [Для просмотра данной ссылки нужно зарегистрироваться].

Modernizr: библиотека для определения функций для HTML5 и CSS3.

Modernizr – это библиотека JavaScript с открытым кодом, которая делает проще для веб-дизайнеров поддержку различных уровней, основанную на совместимостях браузера посетителя. Это позволяет дизайнерам заиметь значительное преимущество во всем HTML5 и CSS3, которые реализованы в некоторых браузерах, без принесения в жертву контроль за использованием других браузеров пользователем.

Когда вы вставляете скрипт Modernizr в вашу страницу, он определяет, какой из текущих браузеров поддерживает CSS3, вроде font-face, border-radius, border-image, box-shadow, rgba() и далее, также функции HTML5, такие как аудио, видео, локальное хранилище, типы и атрибуты нового элемента <input /> . С этим знанием вы можете получить преимущество над этими выполнениями в браузера, которые поддерживают эти функции, и решить, создавать ли код на JavaScript, или же, просто, портить страницу в браузерах, которые не поддерживают их. Также, можно добавить, что Modernizr делает новые элементы HTML5 доступными для изменения в Internet Explorer’e. Итак, вы можете начать использовать их продвинутую семантику прямо сейчас.

Modernizr был создан на принципе прогрессивного развития, и он поддерживает (поощряет) даже создание веб-сайта от слоя к слою, начиная с основы на JavaScript, и добавляя модернизированные слои один к одному. Это просто с Modernizr, с того момента, как вы будете знать, какой из браузеров совместим. Давайте посмотрим на практическом примере , как использовать Modernizr, чтобы создать современный веб-сайт.

Начинаем работать с Modernizr

Начнем со скачивания последнего стабильного релиза с [Для просмотра данной ссылки нужно зарегистрироваться], где вы можете, также, посмотреть полный список функций, который он обнаружит. Итак, у вас есть последняя версия, 1.5 (на время написания), включите ее в вашу страницу в .
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My Beautiful Sample Page</title>
<script src=”modernizr-1.5.min.js”></script>
</head>
Далее, добавьте класс “no-js” в ваш <html> элемент:
Код HTML:
<html class=”no-js”>
Когда Modernizr запущен, он заменит этот класс с классом “js”, который позволяет вам узнать, в CSS, доступен или нет код JavaScript. Но Modernizr на этом не останавливается: он добавляет классы для каждой функции, которую находит, добавляя префикс “no-”, если браузер ее не поддерживает. Итак, ваш элемент <html>; будет выглядеть похожим на загрузку страницы (обеспечивая доступность JavaScript):
<html class=”js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>

Modernizr также создает объект JavaScript, просто названный Modernizr, который имеет список свойств, содержащих булевские значения для каждой функции. Modernizr.canvas будет иметь значение «верно»(true), если браузер поддерживает новый элемент canvas, и «ложно»(false), если браузер не поддерживает его. Объект JavaScript также содержит более детальную информацию о верных функциях, например: Modernizr.video.h264 скажет вам, если браузер поддерживает данный кодек. Modernizr.inputtypes.search предупредит вас, если новый тип поиск поддерживается, и т.д.

Наша [Для просмотра данной ссылки нужно зарегистрироваться] выглядит немного пусто, но это очень схематично и доступно. Давайте добавим несколько базовых стилей; немного форматирования, цвета, чтобы сделать его немного более привлекательной. До сих пор в этом процессе не было ничего нового: мы добавляем простой CSS в схематичную структуру HTML страницы, и, [Для просмотра данной ссылки нужно зарегистрироваться] очень правдиво это демонстрирует.

Идем дальше. Давайте улучшим страницу и сделаем ее более интересной. Для этого я хочу изменить шрифт h1 для хедера на другой, разбиваем список функций на две колонки и двигаем часть о Modernizr с фото вправо. Я, также, собираюсь изменить границу вокруг страницы и сделать ее привлекательнее. Теперь, CSS выглядит намного лучше, потому что теперь вы можете добавлять новые свойства в правило, и, если браузер не распознает (читайте: support) их, можно просто проигнорировать это. Соедините это с каскадностью CSS, и вы сможете использовать штуки вроде border-radius без помощи Modernizr. Тем не менее, использование Modernizr предлагает вещи, которые вы не сможете без него использовать: Возможность изменять свойства, поддерживаемые браузером, только в состоянии, когда он поддерживает некоторые иные свойства. Я продемонстрирую это, добавляя два новых правила CSS на нашу страницу.
Код:
.borderradius #content {
border: 1px solid #141414;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.boxshadow #content {
border: none;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}
Первое правило добавляет 12-ти пиксельную рамку в наш элемент #content. Тем не менее, правило, которое мы добавили для #content задано рамкой “2px outset #666”, которая выглядит неплохо, когда бокс имеет прямые углы, но с закругленными углами это выглядит уже хуже. Спасибо Modernizr, что я могу «научить» браузер выполнять то, что нужно, однопиксельная граница, если браузер поддерживает border-radius.

Второе правило придает немного красоты путем добавления падающей тени для элемента #content и, вместе с этим, убирает границу, если браузер поддерживает box-shadow. Почему? Потому что большинство браузеров не выполняет комбинацию border-«и»-border-radius, а box-shadow очень хорошо. Я бы лучше использовал падающую тень вокруг элемента, чем этого бы не сделал и поставил бы только границу. Следуя этому пути, у меня может быть лучший из всех миров, или же, лучший из всех CSS: браузеры, которые поддерживают свойство box-shadow, покажут нам неплохую падающую тень, браузеры, которые поддерживают только border-radius покажут закругленные углы с тонкой границей, и наконец, те браузеры, которые не поддерживают ничего, получают нашу оригинальную двухпиксельную внешнюю границу.

В нашем примере мы добавляем специальный шрифт для нашего хедера. Вот объявление нашего оригинального h1, который мы не меняем, но я покажу это в примере:
Код:
h1 {
color: #e33a89;
font: 27px/27px Baskerville, Palatino, “Palatino Linotype”,
“Book Antiqua”, Georgia, serif;
margin: 0;
text-shadow: #aaa 5px 5px 5px;
}
Это объявление сработало прекрасно для нашей базовой страницы, и, размер шрифта 27 пикселей прекрасно подходит для всех этих шрифтов, но это маловато для нашего самодельного шрифта, который называется Beautiful. Давайте добавим правило CSS, чтобы использовать его:
Код:
@font-face {
src: url(Beautiful-ES.ttf);
font-family: “Beautiful”;
}
.fontface h1 {
font: 42px/50px Beautiful;
text-shadow: none;
}
Во-первых, мы добавляем @font-face, в котором мы наметили путь, имя файла и название семейства для нашего самодельного шрифта. Далее, мы добавляем шрифт в правило CSS в наш элемент h1, но, как вы можете видеть, я задаю ему намного больший размер. Это потому, что шрифт Beautiful выполняется как намного меньший, чем все другие шрифты, которые я описал для элемента h1, и нам придется «научить» браузер отображать наш хедер большие размеры, но только тогда, когда он показывает наш самодельный шрифт.
Добавлю, что наш прекрасный код шрифта имеет некоторые недостатки с изображением текстовой тени. Я удаляю тень, когда браузер решит отобразить самодельный шрифт. Также, список функций все еще требует разделения. Чтобы сделать это, я хочу использовать великолепную функцию колонок CSS, которая позволяет браузерам аккуратно разделать список в колонки без путаницы – и наш список, не смотря на видимую нумерацию, выстроен в алфавитном порядке. Конечно, пока не каждый браузер поддерживает колонки CSS, для них мы будем использовать плавающие, чтобы сделать два списка колонок; они больше не будут сортированы в алфавитном порядке (визуально), но это лучше, чем ничего:
Код:
.csscolumns ol.features {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.features {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.features li {
float: left;
width: 180px;
}
И снова я использую Modernizr, чтобы выполнить очень простые настройки, только с обязательными условиями – что-то я бы не смог сделать с помощью свойств перегруженных или каскадом. Если браузер поддерживает колонки CSS, наша работа здесь выполнена: список выглядит хорошо и все еще в алфавитном порядке. Если браузер не поддерживает колонки CSS, и отображает это как класс “no-csscolumns” и добавленный в <html> элемент в сценарии, мы делаем список плавающим (float) и задаем поля, ширину, чтобы получить похожий результат. Это не так хорошо, но это лучше чем один длинный список.
Как вы могли заметить, я объявляю колонки по-разному, от свойств border-radius и box-shadow в вышеизложенных примерах. Это потому, что, во-первых, Opera сейчас поддерживает только колонки CSS через префикс поставщика, и, во-вторых, Mozilla пока не распознает свойство записи “колонки”, поэтому нужно использовать -moz-column-count для этого браузера.
С этими и парочкой других похожих изменений – наша новая страница [Для просмотра данной ссылки нужно зарегистрироваться].

Давайте закончим этот обучающий урок, добавив на нашу страницу немного больше передовых вещей. Браузеры основанные на WebKit, поддерживают некоторые значительные чертовски клеевые вещи – CSS переходы, анимацию, трех-пространственное преобразование – и, я хочу показать некоторые из них в финальном шаге. Снова, некоторые из этих свойств могут быть просто добавлены в наши правила CSS и, они игнорируемы браузерами, которые их не поддерживают, но другие свойства пересекались бы с разметкой во всех браузерах, если я добавлю их таким образом. Итак, я использую Modernizr, чтобы задавать строго, когда эти введения используются, и когда нет.

Первым делом мы устанавливаем эту ступень так:
Код:
@-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
.csstransforms3d.cssanimations section {
-webkit-perspective: 1000;
}
Правило @keyframes – это часть новой анимационной спецификации CSS, которая, теперь поддерживается только с WebKit. Она позволяет вам объявить целую часть анимации, с какими угодно свойствами и изменять их в любые желаемые вами шаги. Запомните, что вы не задаете длительность в этом объявлении, когда вы используете анимацию в правиле CSS, только непосредственно ключевые фреймы – вы задаете вещи такие как: длительность, циклический счет и простые кривые. Это позволяет вам многократно использовать детальную анимацию на разных скоростях в различных элементах, и это дает вам некоторую «гибкость». Для получения большей информации об использовании анимаций, посмотрите ссылку [Для просмотра данной ссылки нужно зарегистрироваться].

Следующим шагом мы выполняем анимацию – она заставляет элемент вращаться вокруг 3D пространства – в наш вторичный хедер добавляем:
Код:
.csstransforms3d.cssanimations section h2 {
background-image: url(modernizr-logo.png);
overflow: hidden;
-webkit-animation: spin 2s linear infinite;
}
Т.к. теперь мы вращаемся в 3D пространстве, я бы хотел, чтобы фоновая картинка – лого Modernizr выглядела хорошо и с анти-алиасом, поэтому я заменю ее на версию в *.PNG формате. Я также добавляю свойство overflow:hidden, чтобы скрыть оригинальный текст в хедере, который мы задали – 9999 пикселей. Вращение элемента в 3D, демонстрировавшее его во время вращения, было забавным, но выглядело не очень хорошо. Наконец, мы задаем правило для анимации, устанавливаем его на 2 секунды, закручивая его в форму линии и делаем процесс бесконечным.
[Для просмотра данной ссылки нужно зарегистрироваться], и также, присутствует немного движущейся забавной анимации для браузеров с WebKit. Я надеюсь, теперь у вас есть четкое представление о том, насколько больше возможностей вы получаете для ваших веб-сайтов с Modernizr, и, насколько проще это делает поистине передовые расширения. Это не все, где может быть полезен Modernizr; он также хорош для создания замедлений, управляемых JavaScript и для использования классных новых функций из HTML5 – но это можно обсудить в другой раз.

Оригинал взят с [Для просмотра данной ссылки нужно зарегистрироваться]
Перевод – [Для просмотра данной ссылки нужно зарегистрироваться] ]]> Web программирование KronuS http://forum.xaknet.ru/showthread.php?t=18316