Спецвыпуск хакер, Содержание номера # 002

ЖУРНАЛ ХАКЕР
Cover 002 |
Статья | Стр.
Краткий словарик Веба | 006
Веб-дизайн для начинающих | 008
Оживи свою страничку | 014
Пага - это не мечта. Это - суровая реальность | 020
Размести файло в Инете! | 028
Сделай свой сайт привлекательнее | 034
Сайт по кирпичикам | 042
VRML редактор - это не роскошь, а средство вылечивания гемороя | 048
Flash 4 за 15 минут! | 052
Ява-скрипт | 056
Игра на ява-скрипт | 060
CGI - Common Gateway Interface | 068
Заблудившийся в тагах, или Страшная Сказка про Macromedia DreamWeaver 3.0 | 076
Взлом хакерской странички | 079
Час потехи | 080
Мультипликация для всех | 084
Corel XARA и Corel XaraWebstyle | 090
Ресурсы веб-дизайнера | 094
Как зарегистрировать свой домен | 102
Интервью с Московским провайдером | 104
Раскрутка паги | 108
Светись всегда, светись везде | 112
Редиректы | 116
Бойся себе подобных! | 118
Как делают X - паги? | 122
WEB-FAQ | 124


Спецвыпуск хакер, номер #002, стр. 002-006-1, Чиста словарик, чиста по понятиям и фене на вебе

Чиста словарик, чиста по понятиям и фене на вебе

Спецвыпуск хакер, номер #002, стр. 002-006-1

Андрей Каролик (andrusha@sl.ru)

Homepage: http://www.ruschannel.xxi.ru

(*) хтмл - html (Hypertext Markup Language), язык написания страничек в вебе

(*) веб - WWW (World Wide Web), мировая паутина типа :)

(*) веб-мастер - чувак, который конопатит в хтмл-е :)

(*) браузер - инструмент просмотра веба, к примеру, Internet Explorer, Netscape Navigator, Mosaic и другие

(*) урл - URL (Uniform Resource Locator), имеет вид http://хост/путь (хост - хост машины, с которой необходимо установить соединение, а путь - полное имя документа, затребованное с данного сервера), более общий вид схема://хост/путь/доп_путь?инфо, а по простому адрес хомпага :)

(*) тег - феня между < и >, бывают открывающие теги <...> и закрывающие теги </...>, содержит указания о способе отображения содержимого сайта (управляющие маркеры документа)

(*) заголовок - содержимое между тегами <head></head>

(*) тело - содержимое между тегами <body></body>

(*) гиперссылка - ссылка на другой документ <a href=...>

(*) фонт - шрифт, метится тегами <font...></font>

(*) пропорциональный фонт - шрифт, под каждый символ которого в строке отводится интервал, пропорциональный его ширине

(*) моноширинный фонт - все символы моноширинного (fixed) шрифта занимают в строке одинаковые интервалы

(*) гарнитура - (typeface) начертание шрифта

(*) форма - не пионерская, :) а та, что между тегами <form...></form>

(*) радиокнопка - взаимоисключающая, то есть если есть 2 радиокнопки, то либо одна активизирована, а вторая нет, либо наоборот

(*) фрейм - кадр, или по другому область, задается в наборе кадров <frame...></frame>, в отдельный кадр можно грузить отдельную страницу

(*) набор кадров - совокупность кадров, занимающих окно браузера <frameset...></frameset>

(*) целевые кадры - поименованные кадры, чтобы потом можно было загрузить в определенный кадр

(*) скроллинг - полоса прокрутки (scrolling), есть горизонтальная и вертикальная :)

(*) карта - не пивных ларьков в Москве, а разметка чувствительных областей на любой картинке <map...></map>

(*) мета - полезная феня, ибо имеет множество атрибутов, общий формат <meta...>, то есть не имеет закрывающегося тега и стоит в заголовке документа

(*) таблица - основные теги <table...></table>, строки форматируют <tr...></tr>, а столбцы <td...></td>

(*) список - данные, отформатированные в виде списка тегами <ul...></ul>

(*) RGB - шестиразрядное шестнадцатиричное число, с помощью которого задается соотношение красной, зеленой и синей составляющей цвета, первые две цифры соответствуют красной составляющей, следующие две - зеленой, последние две - синей. Значение 00 означает, что составляющая полностью исключена, а значение FF(255) - что полностью присутствует. В теге цвет обозначается RGB-триадой, перед которой ставится знак #, пример ярко-красного - #FF0000

(*) символьный примитив - код символа, начинается с (&) и кончается, (;) к примеру, - неразрывный пробел

(*) cgi - Common Gateway Interface, общий шлюзовый интерфейс, обеспечивает возможность писать сценарии, которые позволяют разрабатывать управляемые пользователем интерактивные приложения в вебе


Спецвыпуск хакер, номер #002, стр. 002-006-2, Чиста словарик, чиста по понятиям и фене на вебе

Чиста словарик, чиста по понятиям и фене на вебе

Спецвыпуск хакер, номер #002, стр. 002-006-2

(*) perl - наиболее популярный язык в Unix-системах для написания cgi-программ, изначально делался как язык для обработки текста в Unix-системах

(*) cookies - "ключики", создаются, когда клиент посещает страницу в первый раз и позволяет серверу хранить информацию о клиенте на машине этого клиента

(*) SSI - Server Side Includes, директивы включения на стороне сервера, директивы, которые можно вставлять в хтмл-документе с целью выполнения других программ или получения данных, например, статистической информации о файлах или содержимого переменных среды

(*) скрипт - в переводе на нашинский - сценарий, то есть некий сценарий, по которому чего там делается :)

(*) пиксель - элементарная ячейка в картинке, из которых она и состоит

(*) апплет - встраиваемый в хтмл программный код приложения

(*) VRML - специальный язык, предназначенный для описания трехмерных объектов в вебе

(*) домен - то самое www.fuck.ru или www.fuck.com, ну ты понял :)

(*) пров - он же провайдер, поставщик услуг Инета

(*) якорь - море тут не причем, :) гиперссылка в пределах одного документа <a name=""></a>

(*) уникод - unicode, для кодировки одного символа отводится не 1 байт (8 бит), как в остальных кодовых

таблицах, а 2 байта, что дает возможность размещения 65536 символов

(*) винсок - Windows Sockets (сокращенно WinSock), стандартный программный интерфейс при обращении к ресурсам сети


Спецвыпуск хакер, номер #002, стр. 002-008-1, Вебдизайн для начинающих

Вебдизайн для начинающих

Спецвыпуск хакер, номер #002, стр. 002-008-1

Андрей Каролик (andrusha@sl.ru)

http://www.ruschannel.xxi.ru

Создание страничек в Интернет становится все актуальнее. Пытаются их ваять уже кому не лень. :)

Но кроме желания ваять треба еще и каких-то основ и опыта. Кто-то ставит супер-пупер крутую прогу FrontPage, но потом сам не знает, чё она там генерит ему. :) Кто-то сдирает чужие ваяния, иной раз не сумев толком переделать под себя. Кто-то генерит что-то смежное между первыми и вторыми, одним словом, прикол да и только. Вот и решил я помочь тебе разобраться в этой фене - html.

Поехали! (с) Гагарин

Что касается программ типа FrontPage - оставь их ламерам! Их делали для тех, кто не может все сделать сам. :) Если же ты будешь знать html, подобные программы несомненно тебе помогут облегчить жизнь при, например, конвертации прайс-листов в хтмл или быстром подборе нужных цветов и т.п.

Для начала тебе понадобится выучить базовые теги html и принцип построения любой html-страницы.

Любой html документ сроится по принципу Начало-Заголовок-Тело-Конец. Начало показывает тег <html>, а конец тег </html>. Кстати, феня тег это то, что заключено между < и >. Заголовок ограничивают теги <head> и </head>, а тело <body> и <body>. Заголовок обычно несет информацию для поисковых систем, некоторую официальную информацию, заголовок самой страницы и скрипты, которые выполняются до загрузки тела страницы. Тело - это все то, что отображается потом в браузере. А теги начала и конца позволяют однозначно определить страницу как html-страницу. Плюс ко всему файл должен иметь расширение htm или html. Первое пошло от систем, не поддерживающих длинных расширений, а второе от поддерживающих; в результате сейчас можно и с таким, и с таким. Используются еще расширения, к примеру, shtml и asp, но тебе это вряд ли понадобится вообще. Язык html это язык разметки, а не какой-нибудь язык программирования, поэтому он в принципе элементарен и не требует особых навыков, скорее требуется опыт создания страниц и дизайна, нежели опыт в написании кода. Код можно писать в чем угодно, лично я всегда пишу в NotePad. :) Итак, какие теги используются в html (я перечислю наиболее часто используемые и поддерживаемые всеми браузерами), некоторые даже сделал с картинками - когда не очень ломало, :) а для всех остальных в самом конце будет пример:

<title></title> - заголовок хтмл-документа

<center></center> - центровка

<a атрибуты></a> - гиперссылка (атрибут href) или якорь (атрибут name)

<br> - перенос каретки, по-нашенски переход на новую строку :)

<nobr></nobr> - по возможности разрывы не допускаются

<b></b> - заключенный текст между тегами будет жирным

<form атрибуты></form> - форма

<frame атрибуты></frame> - задается кадр

<frameset атрибуты></frameset> - задается набор кадров

<noframes></noframes> - то, что будет отображаться в браузерах, не поддерживающих кадры

<pre атрибуты></pre> - текст между тегами будет отображаться как есть (с соблюдением строк, переносов и интервалов)

<img атрибуты> - изображение детской неожиданности :)


Спецвыпуск хакер, номер #002, стр. 002-008-2, Вебдизайн для начинающих

Вебдизайн для начинающих

Спецвыпуск хакер, номер #002, стр. 002-008-2

<map атрибуты></map> - определяет чувствительную область изображения к перемещению крысы

<sub></sub> - нижний индекс (текст будет смещен вниз)

<sup></sup> - верхний индекс (текст будет смещен вверх)

<basefont атрибуты> - указывает размер шрифта для последующего текста

<font атрибуты></font> - установка размера, цвета или гарнитуры заключенного в теги текста

Пример:

<hr атрибуты> - горизонтальная линейка

Пример:

<hn атрибуты></hn> - заголовок (n от 1 до 6)

Пример:

<li атрибуты></li> - элемент списка

<ul атрибуты></ul> - неупорядоченный список элементов <li>

Пример:

<ol атрибуты></ol> - упорядоченный список элементов <li>

Пример:

<p атрибуты></p> - абзац

Пример:

<tr атрибуты></tr> - строка в таблице

<td атрибуты></td> - столбец в таблице

<table атрибуты></table> - таблица

Пример:

В принципе, как ни странно, этого набора тебе вполне хватит, чтобы наваять что-то стоящее. Хотя это далеко и не полный список тегов, я перечислил все самые основные и часто используемые. А многие фичи делаются графикой и потом просто тегами собираются и форматируются. Для примера можно что-нибудь наваять. :) Так как я не приверженец фреймов, то все сделаю с помощью таблицы, да и тебе советую делать таблицами, а не в фреймах.

Осталось придумать, что бы наваять. :) Вот что вышло:

Замечания:

- картинки мне было лениво ваять, и я просто сослался абсолютными ссылками на картинки с сайта www.xakep.ru

- чтобы твоя картинка грузилась быстрее, всегда пиши width и height в <img...>

Ну и вот, в принципе, сам код:

<html>

<head>

<title>Пример для журнала "Хакер"</title>

</head>

<body>

<center>

<font face="Arial, Helvetica" size="2">Простенький пример хакерской странички, поучающей ламеров хтмл-ю (:</font>

<br><br>

<table border="0" cellspacing="2" cellpadding=0 width="620">

<tr><td><a href="http://www.xakep.ru" target="_top"><img align="left" src="http://www.xakep.ru/x-joke/images/00003.jpg" width="400" height="287" border="0" alt="Типа мое фото :0)"></a>

<p align="justify"><h4>Если</h4> очень поднатужиться, то... не-а :) то можно сделать текст, обтекающий картинку - для этого просто в теге <img...> добавь феню align="left", тоды текст будет обтекать, :) хых, круто сказано, текст будет обтекать, :))) ну так вот, текст будет обтекать картинку справа... А чтобы он особо не был кривым, отформатируем его абзацем с недокументированным параметром align="justify". Кстати, неплохо вроде вышло. :)

Про трудную жизнь свиней, я думаю, сам сочинишь. А я щас буду плодить таблицу дальше и показывать всякие фени.</p></td></tr>

<tr><td bgcolor="#CC99CC">тексь <b>эту ячеечку</b> <u>мы</u> <i>покрасим</i> в #CC99CC цвет</td></tr>

<tr><td bgcolor="#CCCCCC">А <sub>тут</sub> <sup>мы</sup> <sub>щас</sub> <sup>бум</sup> испытывать остальные теги типа :)</td></tr>

</table>


Спецвыпуск хакер, номер #002, стр. 002-008-3, Вебдизайн для начинающих

Вебдизайн для начинающих

Спецвыпуск хакер, номер #002, стр. 002-008-3

<br><br>

<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a><br><br>

<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>

</center>

</body>

</html>

Писать этот код, как ни странно, минуты 2 от силы. На этом примере я всего лишь показал тебе элементарный хтмл. Со временем это для тебя будет так же элементарно, как выключить компьютер. Другое дело, что потом ты можешь юзать всякие другие фичи, применительные к вебу: скрипты, апплеты, динамический хтмл (DHTML) и т.п. Хотя все по мере надобности. С виду простыми тегами можно будь здоров что наваять, если еще хорошо владеть графикой. Одним словом, ваяй, фигарь и угорай! :0)

Отдельно еще рассмотрю формы и фреймы (кадры). Начнем с фреймов. Если уж прибило использовать тебя фреймы, то эта фича юзается следующим макаром. Сначала грузится файл с фреймовой структурой, в котором ты определяешь параметры каждого фрейма и то, что изначально в каждый фрейм загружается. А то, что грузится в каждый отдельный фрейм, ни что иное, как обычный хтмл-документ. Для примера создадим 3 фрейма: один вверху и два внизу. В верхний загрузим какую-нить картинку с Хакера, :) а в двух нижних подпишемся. :)

Главный хтмл-файл будет выглядеть вот так:

<html>

<head>

<title>Пример для журнала "Хакер"</title>

</head>

<frameset rows="60%, 40%">

<frame src="frame1.html" name="frame1">

<frameset cols="65%, 20%">

<frame src="frame2.html" name="frame2">

<frame src="frame3.html" name="frame3">

</frameset>

<noframes>

<font color="#FF0000"><h1>Лопух, уже весь мир перешел на браузеры новых версий! Бросай свою дремучую и качай поновее.</h1></font>

</noframes>

</frameset>

</html>

Ну и плюс коды для хтмл-ек для всех 3-х фреймов:

<html>

<head>

<title>Пример для журнала "Хакер"</title>

</head>

<body>

<center>

<table border="0" cellspacing="2" cellpadding=0 width="620">

<tr><td><a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/x-joke/images/00007.jpg" width="398" height="325" border="0" alt="Типа мое фото :0)"></a></td></tr>

</table>

<br><br>

<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a>

<br><br>

<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>

</center>

</body>

</html>

<html>

<head>

<title>Пример для журнала "Хакер"</title>

</head>

<body>

<center>

<table bgcolor="#CC99CC" border="0" cellspacing="2" cellpadding=0 width="620">

<tr><td align="center"><p align="center">Чувак, ты крут как никогда, ты постиг фреймы :)</p></td></tr>

</table>

<font face="Arial, Helvetica" size="1">© Copyright Lamer Production 2000 :)</font>

</center>

</body>

</html>

<html>

<head>

<title>Пример для журнала "Хакер"</title>


Спецвыпуск хакер, номер #002, стр. 002-008-4, Вебдизайн для начинающих

Вебдизайн для начинающих

Спецвыпуск хакер, номер #002, стр. 002-008-4

</head>

<body>

<center>

<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88" height="31" alt="Xakep"></a>

</center>

</body>

</html>

Ну и теперь децел о формах. Удобные такие хрени, которые позволяют создавать формочки со списками чего-либо, текстовыми полями, радиокнопками и т.п. Причем потом все введенные данные можно при нажатии кнопки Submit обработать скриптом или же переслать на мыло. Остановимся на втором варианте и наваяем для примера простенькую форму, но содержащую разные элементы:

Код формы:

<html>

<head>

<title>Пример для журнала "Хакер"</title>

</head>

<body>

<p align="left">

<form name="xakep_forma" method="post" action="mailto:твое_мыло" enctype="text/plain">

<hr size="1" color="#000080" width="100%">

<font face="Arial Cyr, Arial" size="2" color="#FF0000">Чудная форма :</font>

<br>

<hr size="1" color="#000080" width="100%">

Кто там :<br>

<input type="text" name="who" size="30" value="">

<br><br>

Кликуха :<br>

<input type="text" name="nickname" size="30" value=""><br><br>

Чё нада :

<input type="radio" name="what" value="shokolad" checked>Шоколаду

<input type="radio" name="what" value="money">Денег

<input type="radio" name="what" value="girl">Девочку

<br><br>

И как?

<select name="how">

<option selected>красную

<option>зеленую

<option>в обертке

</select>

Быстро?

<input type="checkbox" name="quickly" value="yes">Угу

<br><br>

Пожелания :<br><textarea type="text" name="contact_order" cols=40 rows=5 value="">Мля</textarea>

<br><br>

<input type="submit" name="submit" value=" Послать на"><input type="reset" name="reset" value=" Очистить на"></form>

</p>

</body>

</html>

Ну что, вник? :) А это тока самые основы, дальше как в анекдоте - чем дальше в лес, тем жирнее партизанки. :) Короче, распечатай, повесь на стенку и проверяй зрение. :) Еще можно другу загнать за четвертной. :) То есть статья очень ценная, вырежи и не выбрасывай. ;)


Спецвыпуск хакер, номер #002, стр. 002-014-1, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-1

MOOF (MOOF@xakep.ru ; http://anynews.agava.ru)

Intro

Внимание! Леди и джентльмены! Поприветствуем DynamicHTML (буря аплодисментов)!!!. С ее помощью мы "оживим" твою страничку, заставим ее реагировать на действия юзера. Но для начала немного истории. Однажды Биллу Г. надоело смотреть на странички в Интернете, на которых ничего не менялось: ни текст, ни картинки, не было реакции на перемещение крысы. И тогда он, в очередной раз, решил забить на все стандарты, и в частности на стандарт HTML (в то время это была версия 3.2), и выпустил Internet Explorer 4. IE - был революционным браузером, в том плане, что в нем появилась поддержка этого самого, DHTML. С появлением DHTML и IE 4 вебмастер смог:

- прятать текст и изображение в документе, а потом показывать их, в зависимости от действий пользователя;

- перемещать текст и изображение по страничке;

- красиво форматировать текст;

- создать формы, которые незамедлительно реагируют на любые пользовательские действия;

- сделать страничку объемной (создать несколько слоев текста, картинок и т.д.)

и многое другое, на что хватит фантазии. А главное, ни один из этих пунктов не требует перезагрузки страницы. Все происходит у тебя в браузере! Но вместе с IE 4 увидел свет другой не менее замечательный (в то время) браузер: Netscape Navigator. Как ни странно, он был тоже версии 4. NN обладал несколько меньшими возможностями по сравнению с IE, и самое обидное, что их версии DHTML были не совместимы на 100% между собой, что вызвало множество трудностей. Но есть и "приятные" моменты: так, например, тебе не нужно будет изучать ни Java, ни ActiveX, чтобы создать "живую" страничку. Весь DHTML основан на JavaScript и VBSript (кому что больше нравится). Многие, заслышав знакомое JS и VBS, тут же начинают спрашивать: "А какая разница между HTML страничкой со скриптом и DHTML страничкой с тем же скриптом?". На это я ответственно заявляю: страничку можно считать написанной на DHTML, когда она использует каскадные таблицы стилей (что это - смотри дальше) вместе со сценариями.

Ладно, поговорили, вспомнили, теперь займемся делом.

Каскадные таблицы стилей

Страшно? Мне тоже не по себе от такого названия. Когда я его впервые услышал, то подумал о множестве мелких монстров, которые живут по ту сторону браузера и съедают полезную информацию, а на ее место вешают огромные баннеры. :)

Но все оказалось ни так страшно. Каскадные таблицы стилей (CSS1 - Cascading Style Sheets Level One) дали возможность вебмастеру круто украшать свою страницу, переопределяя теги. Например, ты пишешь:

<h1>Тут был Вася</h1>, и текст выводится большими черными буквами с краю экрана (тег <H1> говорит браузеру о создании заголовка). Если ты хочешь, чтобы текст был зеленым, ты пишешь так:

<h1><font color="#00FF00"> Тут был Вася</font></h1>.

А если ты захочешь, чтобы все заголовки были зелеными, что будешь делать? Правильно: писать каждый раз одно и то же (<h1><font color="#00FF00"> и т.д.), из-за этого твоя страничка неимоверно "растолстеет". А теперь скажем спасибо DHTML и CSS: с их помощью мы с тобой переопределим тег <h1>. Задав зеленый цвет по умолчанию:


Спецвыпуск хакер, номер #002, стр. 002-014-2, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-2

<style type="text/css">

<!--

h1 { color: 00FF00}

-->

</style>

вставив вышестоящий текст в заголовке HTML файла (между тегами <head> и </head>), мы переопределим цвет тега <h1>. И теперь написав:

<h1>Тут был Вася</h1>

мы увидим зеленый текст. Если ты думаешь, что на этом приколы кончаются, то ты круто обламываешься! Но сначала разберемся с синтаксисом. Тег

<style type="text/css">

означает то, что дальше идет описание стилей, браузеры четвертого (и выше) поколения понимают этот тег, а вот старые браузеры его не понимают, и специально для них идет следующая строчка:

<!--

Увидев ее, старые браузеры пропускают весь следующий текст до "-->". Между этими двумя тегами располагаются описания различных характеристик тегов. Для переопределения тега (в нашем случае <h1>) мы пишем имя тега, затем открываем фигурную скобку "{" и в ней описываем сами характеристики, разделяя их ";". Описание тега заканчивается также фигурной скобкой "}". Мы можем переопределить свойства сразу нескольких тегов, для этого пишем:

h1,h2,h3 {color: 00FF00}

и все заголовки первого, второго и третьего уровней станут зелеными. Описание стилей заканчивается тегами:

--> </style>

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

.vasia { color: 00FF00}

Так мы создаем класс vasia. Или имя идентификатора, которое начинается со знака "#";

#vasia {color: 00FF00}

Теперь для использования класса необходимо в тексте документа вставить следующее:

<div class=vasia>Тут был Вася<div>

а для идентификатора

<div id=vasia>Тут был Вася<div>

Давай сделаем что-нибудь посложнее, ОК?

<html><head><title> Домашняя страничка Васи</title>

<style type="text/css">

<!--

.vasia {

color: 00FF00;

margin-top: 10px;

font-size: 250px;

font-family: Courier;

font-weight: 900 ;

}

.layer1{

color: black;

margin-top: -185px;

font-size: 120px;

font-family: Courier;

}

-->

</style>

</head>

<body><center>

<div class=vasia>ВАСЯ</div>

<div class=layer1>был здесь</div>

</center></body>

</html>

Как ты видишь, получилось неплохо. С помощью тега <div> мы создали несколько слоев и, установив свойство "margin-top", наложили их друг на друга. Давай разберемся с остальными свойствами. Приведу описание нескольких свойств тегов,

относящихся к шрифту, в следующей таблице:

Характеристика Величина Комментарии

Color шестнадцатиричное число устанавливает цвет текста

font-family название шрифта устанавливает шрифт, которым будет выведен текст

font-size размер шрифта в пикселях (px), сантиметрах (cm), миллиметрах (mm) и т.д.


Спецвыпуск хакер, номер #002, стр. 002-014-3, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-3

font-style стиль шрифта нормальный (normal) или наклонный (italic)

font-weight число от 100 до 900 жирность шрифта

Описание всех свойств можно найти в Инете.

Описание стилей можно вынести в отдельный файл с расширением "CSS". Это полезно, если ты захочешь использовать одинаковое оформление на всем своем сайте или на нескольких страничках. Для этого запиши все стили в отдельный файл. Он будет выглядеть примерно так:

.vasia {

color: 00FF00;

margin-top: 10px;

font-size: 250px;

font-family: Courier;

font-weight: 900 ;

}

А в HTML документ вставляется следующий текст:

<style type="text/css">

@import url (http://путь.к/файлу.css);

</style>

или

<LINK href=" http://путь.к/файлу.css " rel=stylesheet type=text/css>

Все это очень хорошо, скажешь ты, но мне в лом учить и запоминать все характеристики, параметры и еще какие-то теги! И будешь прав. Специально для тебя такие софтверные монстры, как Microsoft, Adobe и я, ;) выпустили продукты, облегчающие создание DynamicHTML документов с CSS. У мелкомягких есть целых два продукта FrontPage98 и 2000 - это огромные программы монстры, пихающие кучу лишних тегов в текст твоей странички, но обладающие простым (особенно во FP2000) интерфейсом и большим набором готовых тем. У Adobe есть чуть более замечательный продукт:

Adobe GoLive. Он сложнее в освоении, чем FrontPage, однако более пригоден для создания каскадных таблиц стилей. И, как я уже сказал, есть еще один продукт: Visual CSS, автором которого являюсь я. ;) Этот продукт бесплатен и полностью на русском языке, в отличие от прочих. Весит это чудо 40Кб (в архиве), и найти его можно по адресу http://www.anynews.agava.ru в разделе "софт".

Есть контакт

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

В следующей таблице представлены некоторые основные события:

Событие Комментарии

Onmousedown происходит при нажатии левой кнопкой мыши

Onmousemove происходит при перемещении мыши

Onclick при клике

Onload при загрузке страницы

Теперь заставим слово "Вася" из предыдущего примера реагировать при наведении на него курсора крысы, для этого после тега <body> вставим небольшой скрипт:

<script language=JavaScript>

function changeColor1(){vasia.style.color="FF0000";}

function changeColor2(){vasia.style.color="00FF00";}

</script>

Поскольку из скриптов нельзя обращаться к классам, мы переделаем все классы в идентификаторы. После чего сделаем так, чтобы Вася краснел при наведении на него мыши:

<div id=vasia onMouseOver="changeColor1()" onmouseout="changeColor2()">ВАСЯ</div>

Сохраняемся и грузим в Експлорере. Ну как? Нравится?

Я знаю, что еще не хватает твоей страничке! Давай теперь сделаем ей меню с интерактивными пунктами:

<HTML><STYLE TYPE="text/css">


Спецвыпуск хакер, номер #002, стр. 002-014-4, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-4

.newID {font-size: 30px;

color: green}

</STYLE><BODY>

Тут тебе должно быть все понятно.

<table><tr><td width="250">

Создаем таблицу, чтобы сохранить форматирование страницы.

<DIV onMouseOver="this.className='newID'; Description.innerText='Журнал Хакер'"

onMouseOut="this.className=''; Description.innerText=' '" >

<a href="http://www.xakep.ru">Xakep</a></DIV>

В теге <div> создаем текстовый объект, который будет реагировать на наведение мыши и менять текст описания в идентификаторе "Description", который находится дальше по тексту страницы.

</td><td rowspan="2">

<h2><DIV ALIGN=RIGHT ID="Description"></DIV></h2>

А вот и он. Описание и содержание этого тега меняется в зависимости от того, на какую из ссылок навел курсор юзверь.

</td></tr><tr><td>

<DIV onMouseOver="this.className='newID'; Description.innerText='Новости от AnyNews'"

onMouseOut="this.className=''; Description.innerText=' '">

<a href="http://www.anynews.agava.ru">AnyNews</a></DIV>

</td></tr></table>

А это второй пункт меню. Как видишь, чтобы создать такое меню, не требуется каких-либо особых знаний программирования и секретных технологий НАСА и ФСБ. Чтобы добавить еще один пункт меню, достаточно создать еще один объект (между тегами <div>).

Теперь мы сделаем картинку, которая будет реагировать на наведение мыши и меняться на другую. Если несколько таких картинок объединить вместе, то может получиться отличное меню:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

image1 = new Image();

image1.src = "ms_sux1.gif";

image2 = new Image();

image2.src = "ms_sux2.gif";

Вначале загружаем необходимые картинки.

function change(x,y)

{

if (document.images)

document.images[x].src = eval(y+".src");

}

</script>

А эта функция будет менять местами картинки, имена которых мы передали в параметрах.

</HEAD>

<BODY>

<IMG SRC="ms_sux1.gif" NAME="kartinka" OnMouseOver="change('kartinka','image2')"

OnMouseOut="change('kartinka','image1')">

</BODY>

А вот этой картинке мы дали имя "kartinka" и добавили два действия. И ВСЕ! Очень просто.

Я ХАЦКЕР!

Пусть все узнают, что ты хацкер! Что для этого надо? Да ничего особенного - заставь текст ("Я ХАЦКЕР!") летать за курсором мыши по твоей страничке! Давай посмотрим, как это делается:

<html><body onLoad="setHandlers()">

При загрузке страницы выполнится JavaScript функция с именем "setHandlers()".

<script>

ex=100;

ey=100;

Устанавливаем начальное положение надписи на экране в координатах (100,100).

function myhandler(e)

{ ex=e.pageX; ey=e.pageY;

return routeEvent(e);

}

function moveit()

{ dy=ey-y0-20; dx1=ex-x0-20; dx2=ex-x0-60; r=Math.sqrt(dx1*dx1+dy*dy);

if(r<20) r=20

dx1=dx1*10/r+x0+10; dy1=dy*10/r+y0+10; r=Math.sqrt(dx2*dx2+dy*dy);

if(r<20) r=20

dx2=dx2*10/r+x0+50; ae.left=x0; ae.top=y0;

}

function setHandlers()

{ y0=document.all.cur.style.pixelTop; x0=document.all.cur.style.pixelLeft; ae=document.all.cur.style;

realx=x0+0.1;realy=y0+0.1;moveall();

}

function moveall()

{ realx+=(ex-realx)*0.1; realy+=(ey-realy)*0.1;


Спецвыпуск хакер, номер #002, стр. 002-014-5, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-5

x0=Math.round(realx); y0=Math.round(realy);

moveit(); tid=setTimeout('moveall()',100);

}

</script>

Этот текст необходим для вычисления положения курсора на экране и перемещения надписи вслед за курсором. Тут нет ничего сложного - только математические формулы. Ты, как кул хацкер, в них обязательно разберешься. ;) Если нет, то сходи к своему другу "ботанику" (привет, Шурик!), и он тебе объяснит, что к чему. Построите пару-тройку трехмерных графиков зависимости температуры на кулере и положения курсора на экране. Так, чего-то я отвлекся.

<script for="document" Event="onmousemove()">

ex=document.body.scrollLeft+event.x;

ey=document.body.scrollTop+event.y;

</script>

Этот скрипт реагирует на движение мыши и вызывает "нужные" функции.

<DIV ID="cur" STYLE="position:absolute; top: 100; left:100;" ><h1> Я ХАКЕР! </h1></DIV>

Тут мы создаем объект, который будет двигаться по страничке вслед за курсором. Вместо слов "Я ХАЦКЕР!" ты можешь вставить какую-нибудь картинку (<img scr="http://www.microsoft.com/ms_suxx_logo.jpg">).

</body></html>

Заканчиваем документ. Ну, как? Сложно? Мне почему-то кажется, что НЕТ. ;)

Печатная машинка

Еще один потрясающий по своей простоте эффект: строка текста печатается, а потом стирается.

<html>

<script language="javascript">

var delay=20;var nextm=0;

var link=0;var numb=0;

Начинаем файл, устанавливаем задержку между появлением букв текста.

var msg=new Array

('Вася','самый крутой','хакер');

Создаем массив из нескольких фраз, которые будут печататься на страничке. Также ты можешь добавить или поменять (слово "хакер" на "ламер") тут что-нибудь.

function doit(text, pos, dir)

{ var out='[ '+text.substring(0, pos)+' ]';

stroka.innerHTML=out;

pos+=dir;

if(pos>text.length)

setTimeout('doit("'+text+'",'+pos+','+(-dir)+')', delay*100);

else {

if(pos<0){

if(++nextm>=msg.length)nextm=0;

link=link+1

if (link>=numb+1)link=1;

text=msg[nextm];dir=-dir;

}

setTimeout('doit("'+text+'",'+pos+','+dir+')', delay);

}

}

Эта функция вызывается при загрузке страницы (ее вызов находится дальше). Она печатает текст на экране или наоборот стирает его. Длина строки и количество надписей определяется операторами "text.length" и "msg.length" соответственно.

</script>

<body bgcolor="#000000" text="#00FF00" onload="doit(msg[0], 0, 1)">

<div id="stroka"></div>

</body>

</html>

Здесь нет ничего нового. Все это было описано выше на аналогичных примерах.

Всплывающее меню

Вот еще один пример украшательства страничек с помощью DHTML.

<html>

<BODY onload="init()">

<style>

.menu

{ position: absolute;

top:-200;

width: 200;

padding:5;

border-width: 1;

border-style: solid;

background: white;

color: red;

}

</style>

Все понятно? Думаю, да.

<script>

var mpos=new Array();

var mdir=new Array();

var maxmenus=3;

var delay=1;

function do_menu(e, menu)

{ mdir[menu]=-mdir[menu];

if(mpos[menu]<=-130)

{ if(document.layers)

{ document.layers["menu"+menu].top=e.pageY-130;

document.layers["menu"+menu].left=e.pageX;

} else {


Спецвыпуск хакер, номер #002, стр. 002-014-6, Оживи свою страничку

Оживи свою страничку

Спецвыпуск хакер, номер #002, стр. 002-014-6

document.all["menu"+menu].style.top=event.y-130;

document.all["menu"+menu].style.left=event.x;

}move_menu(menu);

}if(mpos[menu]>=0)move_menu(menu);

}

Сначала инициализируем переменные, потом пишем функцию, которая будет отвечать за размещение меню на экране.

function move_menu(menu)

{ mpos[menu]+=mdir[menu];

if(document.layers)

{ document.layers["menu"+menu].top+=mdir[menu];

document.layers["menu"+menu].clip.top=-mpos[menu];

}else{

document.all["menu"+menu].style.top=parseInt(document.all["menu"+menu].style.top)+mdir[menu];

document.all["menu"+menu].style.clip="rect("+(-mpos[menu])+",auto,auto,auto)";

}if(mpos[menu]>-130 && mpos[menu]<0) setTimeout("move_menu("+menu+")", delay);

}

А эта функция, как следует из ее названия, будет выдвигать меню.

function init()

{ for(i=0; i<maxmenus; i++){

mpos[i]=-130;

mdir[i]=-5; }

}

Параметр "mdir[i]" устанавливает скорость появления меню.

</script>

<div id="menu0" class="menu">

<p>Журнал Хакер</p></div>

<div id="menu1" class="menu">

<p>Новости от AnyNews</p></div>

Подсказки, которые будут всплывать для пунктов меню.

<p>

<a href="www.xakep.ru" onmouseover="do_menu(event, 0)" onmouseout="do_menu(event, 0)">Хакер</a>

<a href="www.anynews.agava.ru" onmouseover="do_menu(event, 1)" onmouseout="do_menu(event, 1)">AnyNews</a>

</p>

</body>

</html>

Тут тоже вопросов быть никаких не должно.

Outtro

Ну вот, мы и проникли с тобой в основы DHTML. Надеюсь, ты уже начал делать свой хакерский сайт? Если еще нет, то поспеши, а то тебя опередят.

И вот еще что: все примеры были протестированы на IE4 и 5. Для других браузеров работа не гарантирована. ;) Со всеми претензиями по этому поводу обращайся по адресу askbill@microsoft.com. Думаю, тебе там помогут. ;)


Спецвыпуск хакер, номер #002, стр. 002-020-1, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-1

Терехов Михаил ( stranger@xakep.ru )

Zелененко Maxx ( maxx@xakep.ru )

Привет, братишка! Ежели в твоей голове реально созрел коварный план на тему креатива своей паги, то тебе точно не обойтись без ХТМЛ и его редакторов, полезных таких прог, без которых не обойтись ни одному начинающему дизигнеру. Лишь став крутым профи и в полной мере овладев премудростями языка, ты сможешь любую страничку сделать в обыкновенном Notepad, положив при этом на всякие там редакторы и попивая пивко. Ну, пока до этого еще далеко, а мы начнем с азов.

Все ХТМЛ-редакторы можно поделить на два типа: для новичков и для профессионалов (для нас тобой). :) К первым можно отнести WYSIWYG-редакторы. Такие редакторы обычно не показывают html-код, и для работы в них вовсе не обязательно знать HTML. Не в пример этим эдиторам, работа в профессиональных редакторах идет только непосредственно с кодом, который необходимо достаточно хорошо знать. Нельзя также не упомянуть о благородных помесях, редакторах, позволяющих комбинировать работу в режиме WYSIWYG с текстовым редактированием HTML.

Так как прог этого жанра сегодня по Инету по самое не балуй, я тебе расскажу о наиболее мне понравившихся и наиболее, на мой взгляд, удобных. А теперь о них...

FrontPage

Html-редактор, который наверняка попался тебе на глаза первым. При установке Винглюка 98 предоставляется возможность поставить себе и ФронтПейж. Как и все программы от Microsoft, не отличается надежностью. Интерфейс... О, ты его не спутаешь ни с чем другим, если хотя бы раз использовал Office. Все те же кнопки и все те же иконки. А что ты хочешь? Люди-то там очень занятые работают. Им некогда всякий там интерфейс менять. При помощи FrontPage можно в код страницы вставлять элементы ActiveX, сценарии JavaScript и Java-апплеты. Предварительный просмотр страницы производится в окне, знакомом многим по окну предварительного просмотра в офисе.

Перед началом работы загляни в "файл\свойства страницы" и настрой кириллический шрифт. Может быть, когда ты начнешь делать страницу, со шрифтом у тебя будет все нормально, но если ты в свойствах не установишь кириллицу, то в браузере страница будет представлена в виде вопросов. Если тебе что-то не нравится в html-коде, то можешь изменить его сам, если, конечно, ты в нем немного шаришь. Для этого тебе нужно будет перейти из режима WYSIWYG к непосредственному редактированию самого хтмл-кода. А чтобы это сделать, нажми на меню "Вид" и там выбери HTML. И приступай к редактированию.

Для начального ознакомления с html-редакторами ФронтПейж подойдет многим, так как в нем есть несколько шаблонов и мастеров, которые помогут получить первоначальные сведения о языке гипертекстовой разметки. Но, как и в любом продукте от мягкотелого, в этой проге имеется масса недостатков. Во-первых, недостаток, свойственный многим WYSIWYG-редакторам - это генерация избыточного html-кода, который представляется в виде лишних тегов и ненужных атрибутов. Это, конечно, не очень-то и плохо, но когда вместо 10 Кб странички мы получаем 100 Кб, это уже не есть гуд. Во-вторых, так как прога от самого Микрософта, то не мудрено, что страницы, сделанные в этом редакторе, не будут нормально отображаться в Нафигаторе. Поэтому нужной совместимости придется добиваться ручками и только ручками... редактируя сам код вручную. В-третьих, программа не отличается устойчивостью, об этом я упомянул вначале. Если объем редактируемой странички огромен, то ФронтПейж может с легкостью зависнуть.


Спецвыпуск хакер, номер #002, стр. 002-020-2, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-2

Скачай, не пожалеешь. Надеюсь сам найдешь без моих подсказок. Нет? Ну ладно, так уж и быть, подскажу. Ищи у себя в компе или иди на www.microsoft.com.

Adobe PageMill

Еще один редактор из разряда WYSIWYG-редакторов. Но только эта прога, в отличие от ФронтПейжа, не дает тебе возможности править html-код. Если ты хочешь что-то изменить в самом коде, то тебе придется воспользоваться самым профессиональным пакетом на сегодняшний день для работы с ХТМЛ, который называется NotePad. В простонародье его именуют Блокнотом. Здесь шрифт поменять на кириллический намного проще, чем в предыдущей проге. Достаточно, как и во всех текстовых редакторах, на панели инструментов изменить шрифт. Вуаля, и все готово.

Но при открытии документов, сделанных в других программах, эта будет выводить на экран только знаки вопроса и много других непонятных тебе и мне знаков. Дальнейшее все очень просто. Только надо будет вывести на экран окошко с настройками для каждой страницы (у них это окно называется ИНСПЕКТОР), которая у тебя открыта в текущий момент. В этом окне ты сможешь настроить цвета для заднего фона страницы, шрифта, ссылки, поставить картинку на задний план, установить размер шрифта и т.д. Всего в этом окне четыре закладки. Остальные три представляют собой настройку фреймов, форм и объектов. В страницу можно только встроить Java-апплеты и элементы ActiveX. Чтобы посмотреть в браузере, что у тебя получилось, тебе надо нажать на очень большую кнопку справа на панели инструментов. И ты сразу же увидишь результат своей работы. Для просмотра ПейжМилл использует Ослика ИА, а для редактирования картинок он использует ФотоЖоп. А для того, чтобы вернуться обратно к редактированию, необходимо - таким же путем, нажав на ту же большую кнопку в том же месте экрана.

Среди минусов этой программы стоит отметить ее неспособность исправить html-код, т.к. после создания странички у тебя будет предостаточно лишних тегов. А также то, что, как и ФронтПейж, этот редактор при редактировании паг с большим объемом тоже иногда зависает, а выйти из этого зависания можно только растягиванием пальцев по клавиатуре в попытке нажать на клавиши Ctrl+Alt+Del.

Весит: около 13 Мб.

Залей, кайфуй: http://www.adobe.com/prodindex/pagemill/

1st Page 2000

Прекрасный подход при создании программы для удобного использования ее конечным юзверем. Прога может запускаться из четырех режимов. Будь ты новичок или эксперт в этом деле - для себя ты найдешь кнопку для запуска. В каждом из режимов будет и разный интерфейс. При запуске программы из режима новичка будет красивый интерфейс с большими кнопками на панели инструментов. В противоположность ему при запуске из режима эксперта панель инструментов будет более насыщенной всякими кнопочками. Переключение между режимами может производиться и в самой программе. Для перехода зайдите в меню Options и выберите себе необходимый режим. Для начала, как и во всех редакторах, настроим русский язык. Для этого заходим в меню Options. Там выбираем Editing Preferences. В меню charset ищем russian. И строкой выше устанавливаем шрифт, который поддерживает кириллическое начертание. И смело идем дальше.


Спецвыпуск хакер, номер #002, стр. 002-020-3, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-3

У редактора имеются все необходимые функции. Если ты запутался, то запускай хелп. В нем ты найдешь все что тебе надо. Там даже есть объяснения всех тегов, как и где их использовать. Имеется поддержка скриптов на всех известных мне языках и даже неизвестных, также есть и огромное количество самих скриптов. Не обольщайся этими перловскими скриптами. Если ты ничего не смыслишь в перле, то ты и без этого редактора сможешь их себе достать. Их и без того валяется в сети огромное количество.

Как говорилось ранее, интерфейс у проги отличный, но во многом содранный с HomeSite. Зато, в отличие от ХоумСайта, прога абсолютно бесплатна. Для своей работы требует Ослика версии не меньше третьей. А если серьезно, то очень приятный в работе редактор, все что нужно всегда под рукой. И, в отличие от уже представленных программ в обзоре, она с легкостью открыла страницу, у которой нет в заголовке кода определения кириллицы.

Весит: 5075Кб.

Скачай, припрешься: http://www.evrsoft.com/1stpage2.zip

Coffee Cup Editor

Очень хороший редактор, в чем-то похожий на предыдущий. Только, в отличие от предыдущего, за этот продукт надо немного раскошелиться. Ну, приблизительно на 49$. В проге куча кнопочек, подсказок и настроек. Сидя за чашечкой кофе, ты медленно приступаешь к работе над своей новой страничкой, используя этот редактор. Сначала мы настраиваем кириллический шрифт. Для этого мы находим меню Tools. В этом меню ищем Preferences.

И в первой же закладке нажимаем такую длинную кнопочку set editor highlighting colors and options. Тьфу... еле выговорил. При нажатии на нее перед тобой появляется до боли знакомое окно настроек, ибо похожее можно встретить в проге 1st Page. Проделываем те же махинации, что и описаны выше, и получаем требуемый результат: программа заговорила по-русски. У редактора имеется большая коллекция скриптов, написанных на JavaScript, VBScript, CGI, картинок и звуков. Если ты понимаешь хоть немного по фене, то советую тебе почитать хелп.

Хелп просто отличного качества, и из него ты почерпнешь много интересного. Также в программу встроен ФТП-клиент, который поможет закачать всю твою новую информацию на сервер, где расположена твоя страничка. Некоторые функции в проге будут недоступны до тех пор, пока ты не заплатишь за нее. Но я не советую тебя платить за что попало, ведь на самом деле это такой отстой. Сравниться с этой программой может только FrontPage. Но кучу скриптов и картинок советую тебе оставить себе. В основном это редактор для редактирования стилей. Одна особенность отличает этот редактор от других: он может просматривать изготавливаемые стили сразу в двух браузерах.


Спецвыпуск хакер, номер #002, стр. 002-020-4, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-4

Весит: 6868 Кб.

Стащи и не пожалеешь: ftp://ftp.blackdomino.com/pub/Coffeehtml70.zip. А вообще-то, может и пожалеешь.

Arachnophilia

Мощный и хорошо сделанный HTML редактор. И очень быстро скачиваемый с сайта производителя, ведь его вес всего 1,5 Мб. Интерфейс, правда, оставляет желать лучшего. Программа поддерживает создание JavaScript, CGI, фреймов и форм. Позволяет напрямую работать с Ява. Если открыть все возможные панели, на которых можно выбрать различные теги, то останется свободной для работы только половина экрана.

Это единственная прога, в которой не надо было настраивать шрифты, ибо конструкцией они не предусмотрены. :)) С самого начала там уже все было настроено. Прога прекрасно понимает русский, но если вставлять текст из буфера, то могут быть и небольшие проблемы. У меня, например, при вставке оттуда он несколько раз появлялся в изуродованном нечитабельном виде. В программу встроен неплохой FTP-клиент для загрузки на сайт страниц, которые ты изменил или сделал. Редактор не поддерживает проектов, так что сайт приходится собирать вручную. Для просмотра получившейся страницы можно использовать до шести браузеров. Хотя программой используется только системный.

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

Весит: 1549 Кб.

Скачай, не пожалеешь: http://www.arachnoid.com/lutusp/ftp/arach_full.exe

AceExpert

Не стоит обольщаться названием. Хоть в названии и стоит эксперт, но программа совершенно не тянет на роль серьезной проги. Наоборот, она очень проста и симпатична. Очень красиво оформлены все кнопки на панели инструментов. Этот редактор, хоть он и прост, можно легко отнести к разряду лучших html-редакторов. Прога позволяет легко работать с Ява-апплетами и скриптами, написанными на JavaScript.

Много встроенных шаблонов, написанных на DHTML и Perl'е. Может страницу представлять как в собственном окне браузера, так и используя внешний браузер. Позволяет работать с проектами. Но чтобы начать делать свой проект, настрой сначала кириллицу. Для этого надо найти в меню Options строчку с надписью Editor preferences. В появившемся окне выбираем закладку Highlightning, а там уже дело техники. Сначала в строке charset выбираем Russian, а потом строкой выше выбираем шрифт. Далее ты можешь продолжать работу над своим проектом. В редактор встроен файловый менеджер, нужен, наверное, для того, чтобы легко и быстро находить необходимые картинки. Если ты захочешь, то у тебя может быть и встроенный ftp-клиент. Но для этого придется скачать себе AceFTP.

Это очень приятный ФТП-клиент для загрузки твоей страницы на нужный тебе сервак (об этой проге мельком было написано в 6 номере Х). Отличие от многих редакторов, описанных в этом обзоре, это то, что теги здесь выделены определенным цветом. Весит: 3012 Кб.


Спецвыпуск хакер, номер #002, стр. 002-020-5, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-5

Скачай обязательно: http://tucows.mirror.ac.uk/files4/ae302h.exe

HomeSite

Одна из самых кульных прог для создания WWW страниц. Обалденный интерфейс с красивыми кнопочками (но видали и красивее), удобный ввод наиболее распространенных тэгов, поддержка проектов. Однако, кроме удобной панели для вставки тегов он имеет и меню для их редактирования. Кроме возможности просмотра в окне внутреннего браузера, т.е. в окне быстрого просмотра, возможно подключение и внешнего браузера. Редактор поддерживает работу с таблицами, формами, шаблонами и скриптами JavaScript, VBScript.

Хоть это и самая заюзанная прога на сегодняшний день, я не смог настроить в ней нормального русского языка. Много чего я делал, но все без толку. Ничего у меня не получилось. Вроде бы и выбирал для него кириллический шрифт, но он мне выдавал еще в окне дизайна слишком длинную комбинацию букв, так что мне эта программа совершенно разонравилась, хотя и имеет ряд преимуществ перед многими редакторами из этого обзора.

Среди них я могу отметить и цветовую разметку тегов, и проверку правописания - правда, извини друг, проверяет она лишь английский язык; осуществляет проверку корректности ссылок; имеется неплохой редактор каскадных стилей и приятный в использовании сайтовый менеджер.

Весит: 7747 Кб.

Залей, попробуй: www.allaire.com

HotDog Professional

Ну что, проголодался, видать? Не надейся, что я буду тебе предлагать Хот Дог с сосиской или сарделькой. Я такую дрянь не перевариваю и тебе не советую, лучше пойду пиццу съем. Речь сейчас пойдет не о еде, а о самом профессиональном html-редакторе на сегодняшний день. При первой загрузке есть возможность загрузиться как новичок или как уже опытный дизигнер. Также запросит, для какого разрешения ты будешь творить паги. После того, как ты ответишь на все вопросы нажатием на кнопку. Далее, даже не задумываясь над смыслом этих слов, перед тобой предстанет окно, разделенное на пять частей. Два больших и три маленьких окна.

В одном из двух больших будет представлен весь код твоей странички, а во втором - как она выглядит на самом деле. Эти два больших окна находятся прямо посередине рабочего стола. Справа от этих окон находится маленькое, но не менее важное окошко. В нем представлены все имеющиеся теги. Нажатие на один из тегов сразу же вставляет его в документ. Если ты знаешь, для чего используется тот или иной тег, то тебе не придется много времени тратить на то, чтобы вспомнить: "А как же он пишется"? А слева от больших окон ты можешь наблюдать еще два окошка. В верхнем можно настроить все свойства тегов. Чем хорошо вот это окно - это тем, что свойства каждого тега всегда под рукой, и не следует полдня рыться в талмудах по языку гипертекстовой ссылки, чтобы найти нужное. А нижнее окошко как раз и объясняет, что собой представляет этот тег.

Программа поддерживает работу с Java-апплетами, CGI, CSS, JavaScript и VBScript. Но все же для языков сценария эта прога не очень подходит. Как и во всех ранее рассмотренных редакторах, перед началом работы с ним поставим сносный шрифт. Для этого зайдем в меню Edit, а там выберем Preferences. Здесь, в левом фрейме, нам необходимо выбрать Appearance. А там уже все ясно. Там есть одна ячейка, в которой необходимо выбрать кириллический шрифт, и дело в шляпе. Дальше можешь работать с этой программой сколько твоей душе угодно. В редактор входит программа проверки синтаксиса. Эта функция предназначена для проверки соответствия html-кода стандарту ХТМЛ 3.2. Но есть у проги и минусы. Очень большой объем по сравнению с другими программами. Немного запутанный интерфейс, а так все в полном порядке.


Спецвыпуск хакер, номер #002, стр. 002-020-6, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-6

Весит: 8915 Кб.

Скачай отсюда: ftp://ftp.sausage.com/pub/hotdog/hotdog5/hotdog55install.exe

CoolCat

Поговорили о собачках, теперь можно и о кошечках. Видать, ребятам не давала покоя слава ХотДога, и они решили написать эту прогу. Этот редактор очень простенький. Но нельзя сказать, что функций у него совсем мало. Всего хватает. Есть и работа со скриптами, но только с одним, с ЯваСкрипт.

Позволяет вставлять в документы Java-апплеты и элементы управления ActiveX. Позволяет работать и с CSS, и с DHTML. Программа проверяет правильность ссылок и правильность написания тегов, если ты их сам писал, а не вставлял из левого окна. Вместе с установкой программы на свой компьютер ты получишь и встроенный FTP-клиент.

Проблемы с русским языком были и до сих пор есть. В редакторе все нормально. А вот при выводе странички в окне встроенного браузера кириллица изуродована до неузнаваемости. Но если страничку, сделанную в КулКэте, открыть в любом внешнем браузере, тогда русский язык отображается нормально. Это проблемы с русским не у редактора, а у встроенного браузера.

Весит: 7928 Кб.

Скачай, не пожалеешь: http://www.intermk.com/coolcat.html

Visual HTML Workshop

И напоследок я хотел бы рассказать о нашем, российском HTML-редакторе. Как известно, наш софт обычно самый лучший, и этот случай - не исключение. В проге прекрасный интерфейс. Это, конечно, не главное, но важно в нашем дизигнерском деле, братишка. Редактор позволяет работать с проектами.

Отличительной особенностью проекта в Visual HTML Workshop является объектная модель работы с оным. Т.е. все части проекта рассматриваются как единое целое, а не как набор файлов. Для нашего русского брата программеры сделали поддержку автоматического перекодирования документов. Для просмотра полученного результата можно использовать до четырех различных браузеров. Для создания таблиц, форм, объектов и апплетов имеются встроенные мастера. Что существенно облегчает работу. Твою и мою. Для создания таблиц стилей рекомендую использовать CSS Builder. А для работы с JavaScript - JavaScript Builder. Еще хочу отметить, что редактор поможет подсчитать время загрузки страницы. А также прога создает сайт, который хранится у тебя на диске в любой из выбранных тобой кодировок кириллицы. Как ты, наверное, уже понял, никаких проблем здесь у тебя с кириллицей и быть не может.


Спецвыпуск хакер, номер #002, стр. 002-020-7, Пага - это не мечта. Это - суровая реальность.

Пага - это не мечта. Это - суровая реальность.

Спецвыпуск хакер, номер #002, стр. 002-020-7

Так что ставь и юзай. А еще от других программ этого класса ее отличает маленькие вес и стоимость. Вес всего 933 Кб, а цена 8 гринов. И эту прогу я бы посоветовал начинающим дизигнерам. Потому что если ты наведешь курсор на тег и нажмешь Ctrl+F1, то сразу же получишь справку по этому тегу (что он собой представляет и с чем его едят) и, что самое главное, на русском языке.

Весит: 1007 Кб.

Скачай. Просто скачай отсюда: http://www.snkey.net/download/vh25ru32.exe

Вместо послесловия

Если ты дочитал до этого места, то я могу сказать тебе лишь одно: "Ты просто крутой перец!". Даже я не могу в таких количествах читать. Ну, раз ты дочитал досюда, то, мне кажется, тебя интересует мое мнение по всему этому безобразию, которое написано выше. Так вот. Поюзав все эти проги, и не один день, я понял, что есть несколько прог, заслуживающих нашего с тобой внимания. Барахла тоже навалом. Выбрал же я для использования у себя дома три проги. Это моя любимая (теперь) Visual HTML Workshop, за то, что она единственная, которая просто отлично говорит по-русски. Вторая - HotDog, люблю собачатинкой побаловаться, а если серьезно, то это пока что на сегодняшний день один из лучших и мощных продуктов этого направления. А третья прога - это 1st Page 2000. Хоть это и клон HomeSite, но зато работать в нем удобнее, нежели в самом Хомяке.

Желаем тебе удачи в счастливом ЮЗАНИИ. Удачи, короче, и счастья. Начни прямо сейчас, и твоя пага будет лучшей в Рунете, это точняк. Вперед! Рейтинги Рамблера ждут тебя.


Спецвыпуск хакер, номер #002, стр. 002-028-1, Размести файло в Инете!

Размести файло в Инете!

Спецвыпуск хакер, номер #002, стр. 002-028-1

Чук (maxx@xakep.ru) и Гек (stranger@xakep.ru)

Здоров, перец! Ну, как твои делишки сегодня? Ничего, говоришь, а статью эту почитаешь и вообще супер будет! Короче, пагу мы с тобой сбацали, баннеры и кнопочки анимированные по ней раскидали, теперь пора итоги в Инет бросать. Про ФТП качалки ты, наверное, слышал и сам с десяток поюзал, а про закачивалки? Не думаю... Сия мазевая софтина занимается таким общественно полезным делом, как выкладывание результатов работы твоего дизигнерского гения в Инет. Ну, местечко для паги тебе самому придется забить (блин, ему еще и место регистри), :) а вот все нужное файло на сервак выложить поможет именно она.

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

AceFTP

Как-то об этой проге я немного уже писал, но тогда я затронул ее поверхностно, т.к. писал об ФТП-клиентах для скачивания. А вот теперь эту программу мы рассмотрим поподробнее. Сие произведение искусства способно качественно и надежно закачать твою пагу со всеми ее файлами на сервак. При загрузке этого ftp-клиента вылетает окно session properties. Здесь тебе необходимо указать сервер, на который ты будешь все свое хозяйство закачивать. Что, уже обрадовался? Рановато. Еще тебе надо будет указать имя пользователя и пароль. Пароль лучше сразу не вводи, меньше народу знать будет. При соединении она и сама потом запросит у тебя этот пароль. А пока укажи еще, на какой порт коннектиться будешь. По умолчанию там стоит 21 порт, можешь его так и оставить, если не хочешь найти работы для своих пальчиков. Ну и больше особо и не стоит перетруждаться - ведь соединение ты составил. Вот таких соединений может быть сколько твоей душе будет угодно. Ну а для того, чтобы сконнектиться с сервером, тебе предстоит немного потрудиться. Схватившись обеими руками за свою крысу, ты тщетно пытаешься ее передвинуть немного вправо, чтобы навести курсор мышки на кнопку с надписью CONNECT.

Тебе это удалось? Ты просто крут, парнишка. Затем последует незамедлительное появление окна с надписью типа: "Привет, крутой перец!!! А не хотел бы ты указать мне пароль для соединения с серваком?". Ты, конечно же, сразу стучишь костяшками по клавишам клавки, и вот он, заветный пароль, введен. А дальше следует само соединение с сервером. Теперь перед глазами ты можешь наблюдать такую картину: весь рабочий стол поделен на три части - в верхнем окне описываются все события, а внизу ты будешь кидаться файлами из одного окна в другое, ну прям как в любимом проводнике. С помощью AceFTP ты сможешь подключиться сразу к нескольким серверам, что все равно не даст тебе возможности кидать файлы с одного сервера на другой. Сначала к себе на диск, а потом уже и дальше. Классная функция есть у проги - это дублирование нужного тебе окна. Ходишь ты, ходишь - бац, сдублировал себе нужное окно, чтобы его потом не искать, а сам пошел дальше рыться. Вернуться к дублированному окну можно простым нажатием на закладке, которая находится под окном. А также у программы имеется собственный просмотрщик файлов. Причем файлы могут быть разные, например, графика, Java-апплеты, HTML и т.д. В общем, могу сказать, что софтина эта кульная, и советую тебе ее поюзать. Получишь настоящее моральное и физическое наслаждение.


Спецвыпуск хакер, номер #002, стр. 002-028-2, Размести файло в Инете!

Размести файло в Инете!

Спецвыпуск хакер, номер #002, стр. 002-028-2

Вес проги: 805 кило.

Можно скачать: ftp://ftp.xpert.net/pub/visicom/pub/aftp123b.exe

Advanced Internet Tool 2

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

Среди плюсов могу еще отметить, что прога софтина перехватывает УРЛ из буфера, а также понимает командную строку. А среди минусов не очень приятный интерфейс. Хотя какое мне до этого дело. Главное, чтобы хорошо работала. А че хочешь, прога-то бесплатная. И еще очень маленькая панель инструментов. Всего несколько кнопочек (штук пять-десять).

Вес проги: 1240 кило.

Можно скачать: http://andysoft.2000.ru/ftp/aitmdi_aur.exe

CoffeeCup DirectFTP

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

При запуске перед тобой вылезает удобное окошко, включающее в себя кнопки со всеми функциями, которые могут понадобиться для работы с ФТП сервером. Здесь же размещены: информация о содержимом сервера, содержимом дисков и каталогов твоего компьютера, а также информация, пришедшая с сервера. Так как программа позволяет просматривать и редактировать html (txt) файлы как на диске, так и прямо на сервере, то специально для этого отведено место под редактирование с соответствующими кнопками по краю рабочей области.

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

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


Спецвыпуск хакер, номер #002, стр. 002-028-3, Размести файло в Инете!

Размести файло в Инете!

Спецвыпуск хакер, номер #002, стр. 002-028-3

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

Заключение - очень классная и надежная прога с такой полнофункциональностью, что ее может скачать и поставить себе каждый. Новичкам в сетевых делах я могу посоветовать использовать именно ее, так как все очень интуитивно плюс офигенные хелпы. Единственная беда - это ее шароварность, но полнофункциональная, впрочем.

Вес проги: 1696 кило.

Можно скачать: http://www.coffeecup.com/

LeechFTP

Еще одна небольшая, но надежная программка, неоспоримое преимущество которой - абсолютная бесплатность. Она предназначена лишь для закачивания и скачивания файлов, поэтому никаких других функций в ней не предусмотрено. Поддерживает докачку файлов с возможностью отключения этой функции в случае ненадобности или в случае необходимости. Для более удобного обновления файлов есть специальный таймер, а также специальный список, куда вносятся все файлы, предназначенные для этого.

В стандартные функции включена возможность быстрого подключения к нужному серваку при помощи подключения в анонимном режиме, при этом URL может перехватываться прямо из буфера. Для разных типов данных прога сама умеет выбирать способ передачи их на сервер. Очень понравилась компоновка рабочего окна, все очень удобно.

Из минусов можно отметить некоторую запутанность в контекстных меню, а также отсутствие нормального списка серверов, а замена его на закладки - это не очень удобно и не продумано. Это неплохая программка для людей с недостатком места и для тех, кому нужна только закачивалка, скачивалка (нужное подчеркнуть). :)

Вес проги: 620 кило

Можно скачать: http://stud.fh-heilbronn.de/~jdebis/leechftp/files/lftp13.zip

LeapFTP

Неплохая прога, находящаяся где-то между "Чашечкой кофе" и ЛичФТП. В ней гораздо больше функций, чем в Личе (там их почти нет, :) но далеко не столько же, сколько в чашечке. Чего умеет? Естественно, закачивать и скачивать файлы с возможностью докачки. Из файлов, предназначенных для этих операций, возможно выстраивание очереди с выбором варианта поведения по окончании процедур, вплоть до выхода из форточек. Прога сама умеет редактировать файлы, но не делает это на сервере, а скачивает их тебе на диск и по окончании редакции отсылает назад (предварительно задавая вопрос: надо ли?). Для просмотра готового файла или файлов на сервере предусмотрена функция вызова дефолтового броузера.


Спецвыпуск хакер, номер #002, стр. 002-028-4, Размести файло в Инете!

Размести файло в Инете!

Спецвыпуск хакер, номер #002, стр. 002-028-4

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

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

Вес проги: 1000 кило.

Можно скачать: http://www.leapware.com/

CuteFTP

Без комментариев - все создатели ФТП программ умолкают и скрипят зубами. Одна из лучших и юзаемых прог этого жанра, умеет очень много разных вещей и за это очень любима народом.

Дизайн проги просто супер, под рукой даже те вещи, которые не очень часто нужны, но ни одна из нужных не отсутствует. Умеет перекачивать файлы с одного ФТП сервака на другой без промежуточных остановок. Обладает встроенным таймером и может выполнять заданные операции в установленное пользователем время, а после отключаться или вообще выключать компьютер. Естественно, умеет скачивать и закачивать файлы с возможностью докачки.

В случае обрыва связи прога может сама перезвонить провайдеру и, подключившись к сети, закончить загрузку нужного контента. Обладает хорошим сайт менеджером, с удобным Визардом, позволяющим легко и быстро настроить подключение к новым серверам. Для удобства посылки инфы на основные рабочие сайты прога может встраивать в меню "Отправить" Форточек. Поддерживает многие виды фаерволов, и постоянно добавляются новые.

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

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

Если написать обо всех функциях и возможностях этой проги, то получится отдельная статья, а если вписать все восхищения по ее поводу, то две или три. Но, хочу уверить всех, что скачать и попробовать эту софтину обязательно нужно - она того стоит!!! Подойдет всем... кому понравится. :))

Вес проги: 1745 кило.

Можно скачать: ftp://ftp1.cuteftp.com/pub/cuteftp/cute3532b.exe

А еще я бы хотел отметить в этом обзоре ДИНОЗАВРОВ этого дела. К ним можно отнести всякие разные клоны старого и доброго Norton Commander'а, которого не обошел стороной ни один из здесь присутствующих.

FAR и Windows Commander

Что про программы сказать-то можно? Все наверняка их видели и юзали или хотя бы представляют, как они выглядят. Тут нас интересует лишь: ну и как же работает этот ФТП клиент? А никак. Работает себе потихонечку. Вот, например, в ФАРе работать с этим клиентом так же просто, как и с дисками. Для начала нажимаешь Alt+F1(F2). И выбираешь ФТП-клиент, как ты обычно выбираешь другой диск. Затем нажимаешь Shift+F4 и создаешь нужное тебе соединение. Система записи параметров соединения очень запутанна, и без бутылки пива не разберешься, хотя и этого, наверное, мало будет. Лучше возьми ящик пива, может и мне чуток достанется. Если ты сможешь записать все эти параметру в одну строчку, то все остальное будет еще легче. В каждом окне ты можешь создать разные соединения. И с легкостью кидай файл с одного сервера на другой. А вот в Виндовс Коммандере все несколько иначе. Соединений там может быть создано еще больше, и все переключение между ними будет проходить по плану смены диска. В нашем с тобой деле по закачке файлов хватило бы этих двух программ. Но есть маленькое НО. А точнее не "но", а минус. Наихудшее качество связи из всех программ, рассмотренных в обзоре. И только из-за того, что время отклика превышает timeout.


Спецвыпуск хакер, номер #002, стр. 002-028-5, Размести файло в Инете!

Размести файло в Инете!

Спецвыпуск хакер, номер #002, стр. 002-028-5

Вес проги: 580 кило.

Можно скачать: ftp://rarsoft.ti.sk/pub/far/Far163.exe

и

Вес проги: 1334 кило.

Можно скачать: ftp://ftp.demon.co.uk/pub/simtelnet/win95/diskutl/wc32v401.zip

А чего тут лимонить? Кешик правильно базарит

Ну, вот, типа, и все, пагу сбацали, качалку вроде подобрали. Теперь быстренько к компу, кидаем файло до Инета и по ласковым девочкам с друзьями и пивом, а ежели меня с собой возьмете, то я тоже с вами пойду. :)) Кстати, в качестве ликбеза - я себе поставил СuteFTP и еще к ней на подмогу поставил AceFTP. А еще у меня всегда под рукой есть ФАР, это, конечно, бывает иногда и выход из ситуации, когда ничего не стоит и нет времени скачивать. Удачи тебе и до новых встреч!


Спецвыпуск хакер, номер #002, стр. 002-034-1, Сделай свой сайт привлекательнее

Сделай свой сайт привлекательнее

Спецвыпуск хакер, номер #002, стр. 002-034-1

Андрей Каролик (andrusha@sl.ru)

Homepage: http://www.ruschannel.xxi.ru

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

Мазафака, он же на километры вниз... Это еще полбеды - часть источников отпугивает сразу же внешним видом или своей нечитабельностью. Бывает навигация для дебилов :) или куча ненужной рекламы, а потом с гулькин глаз, а не то, что ты подумал, :) информации. А для кого тогда делают такие кривые и неприступные для нормальных людей сайты? Да скорее не для кого, а кто и как. :) Это ламеры, которые не читают Х и не знают, как сделать свой сайт более привлекательным, да и руки у них растут ниже коленок. Я тут опишу децел соображений на тему привлекательности твоего сайта, а ты сам поднатужься, подумай (хоть раз в жизни), как это все хозяйство приспособить.

Начнем-с

Первое, с чего начинается сайт - доменное имя. Если ты делаешь его только для себя любимого, ну и еще котенка Пинка, то тебе название www.пустыня_сахара.com/~первый_бархан/поворот_налево/чуть_вниз/твоя_пага вполне подойдет. Если же сайт предназначен для более широкой аудитории, хотя бы возьми себе домен www.твоя_пага.da.ru, благо это бесплатно. Если твой проект перспективен и будет иметь большую аудиторию, то можешь вполне получить домен третьего уровня у провайдера. Например, компания Синхролайн (www.sl.ru) под перспективные проекты готова дать домены www.твоя_пага.sl.ru и www.твоя_пага.xxi.ru, а компания Зенон (www.aha.ru) под перспективные проекты готова дать домены www.твоя_пага.hobby.ru. Я думаю, таких примеров еще полно, и если ты реально имеешь перспективный проект - свяжись с провайдерами и поговори, просвети что к чему. :) Есть еще такая распространенная фича, как регистрация по чужим аккаунтам доменов www.твоя_пага.com и www.твоя_пага.net, но это уже надо уметь сотворить, а потом сейчас, по-моему, это стало сложнее, и они регистрят по предоплате, но в любом случае сайт будет грузиться быстрее, если он лежит в России, чем в Штатах. :) Да и места тогда будет ограничено, а по договоренности под хороший проект ты сможешь выпросить у наших провов золотые горы, они как бы тоже не дураки, и клевые сайты им нужны, а там, глядишь, и на работу возьмут. :) Ну, типа, ты понял, :) едем дальше. А дальше ты, собстно, делаешь свой сайт. Начну заходить издалека...

Фреймы

Первым делом ты выбираешь, как делать страницу: с фреймами, без фреймов, со скриптами, без скриптов, с генерацией на лету и т.п. Что касается фреймов, отношение к ним однозначно отрицательное. Почему? А потому что они только съедают место, усложняют структуру страницы, точнее упрощают в смысле изготовления, но нагружают в смысле восприятия. Ты сразу скажешь, мол, ни фига подобного, что, мол, иначе так не сделать, а с фреймами все удобно и пучком. Ничего подобного, а всего того же и даже круче можно добиться с помощью обычной таблицы, просто сложнее делать страницу, так как структуру приходится планировать изначально, а если присутствует меню, то таскать его по всем файлам, поэтому сайт лучше продумать заранее, чтобы потом было удобнее добавлять новые разделы и инфу. Открой наугад самый навороченный сайт и найди там хоть один фрейм...


Спецвыпуск хакер, номер #002, стр. 002-034-2, Сделай свой сайт привлекательнее

Сделай свой сайт привлекательнее

Спецвыпуск хакер, номер #002, стр. 002-034-2

Скрипты

Со скриптами дела обстоят другим макаром. Если ты прекрасно знаешь яву или яву-скрипт - пиши на здоровье, но если ты в этом новичок и латаешь потом часами дыры в скриптах, то стоит задуматься. Зачастую криво написанные скрипты глючат или грузят ресурсы машины, что потом в результате просто отпугивает посетителя похлеще тухлой колбасы. И вообще я, к примеру, приверженец плоского хтмл, но бывают вещи, которых без скриптов ты просто не сделаешь, особенно это касается коммерческих проектов. Но и это не критично, руби в своей области, а чувака программиста в принципе всегда найдешь, что друзей что ли мало. :)

Генерация на лету

Ну, это крутая фишка. Под ней я понимаю генерацию кода при вызове страницы, это используется, к примеру, на тех же поисковых системах: при поиске чего-либо страница с результатами генерится по ходу дела, это все сделано обычно на Perl, но щас появился еще стандарт php. Сюда же можно отнести базы данных типа mySQL, в которых хранится информация, на основе которой потом и можно генерить содержимое страниц. Но эти все дела уже требуют основательных знаний в Perl и mySQL, а также Unix, так как потребуется выставление атрибутов для файлов, чтобы все работало. Если ты, чувак, в этом круто рубишь - беги искать работу. :) Таких перцев сейчас ищут все конторы (дизайнерские).

Дименсии, версии и т.п.

Далее еще встает вопрос, под какими разрешениями будет хорошо смотреться твоя страница и какими браузерами ее смогут разглядеть. Тут фразы типа "мой любимый браузер ИЕ, и я буду фигарить тока под него" - не катят. Нужно делать, чтобы видели все и под всеми браузерами. Под ИЕ2 косить, конечно, не стоит, :) но, уж хотя бы начиная с ИЕ3 и НетШкафа3, твоя пага должна быть видна неизменно. Чтобы этого добиться, нужно использовать теги, которые поддерживают все браузеры, а то, что различается, либо вставлять вместе с проверкой на браузер или заменять графическими изысками. Применение стилей и форматирование - это все здорово, но этого не поймут старые браузеры, поэтому глянь хоть раз, как это смотрится в них, чтобы не потерять часть аудитории. Если ты ставишь каждый вечер новую бету-версию браузера, то не факт, что в каком-то институте уже сменили ИЕ3 на новый. Можно, конечно, наплевать на контингент отсталых, но, поверь мне, что сталеросовых ой как много, и ты потеряешь столько же много посетителей. :)

Далее о разрешении... Спорный вопрос - делать для разрешений от 640х480 или от 800х600, ведь в принципе сейчас почти у всех минимум 800х600, но именно почти, а не у всех, так что выбирай сам. Сайт делают по двум направляющим: либо фиксированный по ширине и помещающийся на минимальном разрешении (какое выбрал), а на всех больших просто остается таким же и, к примеру, центруется, либо делается на 100% по ширине и просто расползается в зависимости от расширения. Я сам люблю делать фиксированный, и мне нравятся отцентрированные сайты. Но на вкус и цвет колбаса разная. :)


Спецвыпуск хакер, номер #002, стр. 002-034-3, Сделай свой сайт привлекательнее

Сделай свой сайт привлекательнее

Спецвыпуск хакер, номер #002, стр. 002-034-3

Тонкости

Итак, ты выбрал, допустим, что твой сайт будет без фреймов для браузеров от ИЕ3 (НетШкаф3) и выше и виден будет под всеми расширениями от 640х480. Осталось придумать структуру сайта и подобрать цвета для оформления. Вроде фигня фигней - ан нет! Это чуть ли ни самое важное при ваянии сайта. Что касается структуры и навигации, то старайся придерживаться правила, что всего ты должен достигать не более чем за два клика, тогда любой зашедший будет находить все, что надо, да и индексация поисковых систем пройдет продуктивнее (поисковые машины имеют определенную глубину индексации по ссылкам). Если структура более сложная, и избежать ветвлений невозможно, то обязательно сделай карту сайта (раздел, в котором будет показано ветвление сайта со ссылками во все узлы). Навигацию делай ненавязчивой и занимающей как можно меньше полезного места, но при этом наиболее эффективной и позволяющей свободно передвигаться взад, вперед и налево. :)

Цветастости

Тэкс, это ты вроде просек. С цветами тоже децел заморочка. Ты можешь, конечно, вывести гигабайтную полиграфию с миллиардами цветов, бить себя в грудь, смотря это на супер-пупер мониторе профессиональной серии. Но нужно помнить несколько моментов: графика должна как можно меньше весить, чтобы сайт грузился как можно быстрее, не у всех крутые мониторы, и все твои старания сведутся к близким цветам, что может конкретно исказить картину или вовсе все испортить, да и к тому же есть ограничения по отображению сразу нескольких цветов. По-хорошему надо выбрать определенную палитру и тащить ее через весь сайт, оживляя анимацией и графикой. Надо попытаться сделать сайт как можно выразительнее, но при этом не перегрузить его графикой и палитрой и оставить легко читабельным. Что касается фона, это дело вкуса и дизайна. Самым читабельным считается естественно белый (в книжке ты вроде читаешь черное по белому), но и зацикливаться на этом не стоит: можно сделать вполне читабельным и на цветном фоне и совсем нечитабельным на белом. :) Но кроме фона и графики, нужно еще как-то сочетать эту самую палитру. Есть мнение (кстати, его поддерживает Лебедев), что хорошо сочетаются цвета, кратные 3-м, то есть состоящие из 0, 3, 6, 9, F, С. Например, цвет #9F9CCF красиво смотрится на фоне #FCFCFC и т.д. Но это опять же совсем не обязательно, так как может еще зависеть от графики, расположенной на сайте. Одним словом, пробуй так, пробуй сяк и старайся смотреть на разных мониторах. Относительно графических форматов. В вебе используют в основном всего 2 формата: gif и jpg. Первый используется там, где нужно не более 256 цветов или нужна прозрачность, либо анимация. А там, где нужно гораздо больше 256 цветов (фото, иллюстрации и прочее), используется второй, то бишь jpg. К тому же есть немереное количество оптимизирующих программ (да хоть тот же ФотоЖоп), которые позволяют сбрасывать у jpg размер без особой потери качества.


Спецвыпуск хакер, номер #002, стр. 002-034-4, Сделай свой сайт привлекательнее

Сделай свой сайт привлекательнее

Спецвыпуск хакер, номер #002, стр. 002-034-4

Шрифты, компоновка

Тэкс, что я еще не рассказал? Ах, ну да, я еще не упомянул о шрифтах. Я, конечно, понимаю, что ты недавно поставил себе диск 2000+ шрифтов и все такое. Но только не надо выливать все 2000 на один сайт. :) Юзер просто одуреет от этого разнообразия и больше не придет. Принято вообще придерживаться только одного шрифта на всем сайте, но можно добавить еще парочку для смысловой нагрузки заголовков и навигации, но не перебарщивай. Ты пробовал читать роман «Мастер и Маргарита», написанный десятью шрифтами? :) Я думаю, стошнило бы после первых 20 страниц. :))

Что касается размещения всех дел на сайте, то старайся всёе делать компактнее и занимать как можно больше полезной площади. Как именно, совет дать невозможно. Нужно смотреть для каждого отдельного случая и править, визуально наблюдая. Проще всего набраться опыта компоновки и уловок, ползая по другим хорошо сделанным сайтам и временами посматривая код (View Source). Хотя со временем тебе код будет уже не так важен, как сама идея, которых полно в Интернете. Это, конечно, не значит, что, мол, замкнись, чувак, и ни в коем случае не думай сам, а все смотри в Интернет. :) Нет, конечно же, ваяй сам, но когда музу кто-то подстрелил, можно и на чужих посмотреть. :)

Еще хотелось бы сказать по поводу графических изысков. Не бойся рисовать. Первая буковка в абзаце, замененная на графический аналог, значительно преобразит этот самый абзац. А указатели, как в теге <ul>, можно и вовсе сделать самому намного красивее. Да и та же таблица. Ставь по жизни border=0, а нужное обрамление рисуй сам, просто добавляя еще ячейки по краям и вставляя это обрамление как графику. Одним словом, побольше своего. А анимация? Ну на фига тебе анимированный гиф, нарисованный вон тем лопоухим? :) Скачай себе любую прогу для создания анимации (о таких прогах ты сможешь прочесть в этом же номере) и твори. Анимацию делать совсем не сложно, просто рисуешь отдельные кадры, а потом собираешь их в проге, расставляя нужные задержки по времени между ними. И аля оп - твой собственный гиф. :) А вот уже подсмотреть, как сделаны чужие анимашки, или содрать оттуда некоторые кадры, это милое дело. :)

Промо

Ну и напоследок о рекламе и всяких рейтингах, а также поисковых системах. С чего бы начать...

Поисковые системы - это такие сервисы, которые предоставляют поиск по многотысячным ресурсам Интернет по разным критериям: ключевым словам, категориям и т.п. Для пополнения своих баз они предоставляют всем желающим зарегистрировать у них свои сайты, типа тебе тоже можно. :) Таких поисковых систем не так много, но и не так мало. Но достаточно знать хотя бы несколько основных, а остальные можно найти в них же по тому же слову поиск или search. Среди наших - www.rambler.ru, www.au.ru, www.aport.ru и т.д. Среди англоязычных - www.yahoo.com, www.altavista.com и т.д. Регистрация в поисковых системах ой как необходима, так как почти все прибегают к их помощи при поиске нужной информации. Некоторые поисковые системы предлагают кроме регистрации еще и принять участие в рейтинге, который можно просматривать отдельно и который обычно еще делится на подкатегории, то есть твой сайт будет участвовать в рейтинге по какой-то одной тематике и не мешаться с другими тематиками. В качестве примера поисковиков с рейтингом смотри www.rambler.ru, www.list.ru и т.д. Тут уже смотри сам, если на твой сайт не ходит даже 100 человек, то тогда затея с рейтингом сомнительна, так как все равно ты будешь где-то далеко в... внизу. :). Но если твой сайт раскручен, то рейтинг порой не помешает, другое дело, что выставляй счетчики не всех подряд (иначе твой сайт будет напоминать «Мурзилку»), а только самых раскрученных рейтингов и с хорошей репутацией.


Спецвыпуск хакер, номер #002, стр. 002-034-5, Сделай свой сайт привлекательнее

Сделай свой сайт привлекательнее

Спецвыпуск хакер, номер #002, стр. 002-034-5

Есть еще одна феня - обмен баннерами. Это некая система, в которой при регистрации ты получаешь код, который произвольным образом показывает чужие баннеры на твоем сайте, а взамен, с определенной пропорцией (1:2, например), показывает любой твой, который должен быть определенного размера и весить не более чем... (все узнаешь на сайте определенной баннерной системы). Затея опять же хороша, когда твой сайт хорошо посещаем и к тому же когда он обширен, что по нему лазить - не перелазить. Плюс хорошо поставленные баннеры на сайте придают некую интерактивность, так как постоянно меняются при новых загрузках. Для примера глянь www.linkexchange.ru, остальные ищи в поиске, меня ломает писать. :)

Ну вот, в принципе, и все. А дальше все еще зависит от информационной нагрузки сайта. Так, если он про разновидности бабочки махаона, то посетителей у тебя особо много не будет. :) Дерзай, ваяй, не будь лопушком. :)

Читай Х и все такое. :)


Спецвыпуск хакер, номер #002, стр. 002-042-1, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-1

Андрей Князев (kniazev@xakep.ru)

Длинное вступление

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

И тут на помощь может придти довольно простой, но в то же время чрезвычайно мощный инструмент. Имя ему - Server Side Includes, сокращенно - SSI. Наиболее естественно и полно поддержка SSI традиционно реализована в web-сервере Apache, впрочем и во всех остальных Web-серверах (Netscape, MS IIS и проч.) она тоже наличествует.

Для чего может быть полезен SSI? Самый простой пример. Предположим, решил ты, знатный наш перец, удивить мир своим сайтом. Все бы хорошо, да вот только FrontPage издох, хомяк (HomeSite) умер с перепоя и остался ты один в этом мире, одинешенек. Одна надежда, что ручки шаловливые выведут. И они таки выведут. Но только в том случае, если сайт не большой или обновления на сайте - раз в пятилетку. Правда, это уже не сайт, а похоронная контора, но об этом позже. Сайт должен быть большим, интересным, живым и обновляемым.

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

А теперь представь себе кошмар, когда один раздел добавился, а другой умер, баннерную сеть надо срочно менять, а с другом ты разругался в дребадан и его поганую кнопку (чтоб он всю жизнь во FrontPage Express сайты ваял) ты хочешь выкинуть с сайта раз и навсегда. При этом на сайте, ну, хотя бы с 50 страниц есть. Вопрос - сколько файлов в каждом случае придется изменять?

Неправильный ответ - 50. Правильный ответ - 1. Но только в том случае, если используются SSI.

Наверное, пора перестать темнить и рассказать, что к чему. :)

Да будет свет!

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

Файлы, сделанные с применением SSI, обычно имеют расширение .shtml. "Лишняя" "S" в начале расширения говорит серверу, что в документе могут быть SSI инструкции. И сервер тогда их в состоянии грамотно обработать.

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

Что ж, я нарисовал замечательную перспективу, но настырные голоса вопиют - "Show me the money", т.е. объясни, как же это все делается. Рассказываю...


Спецвыпуск хакер, номер #002, стр. 002-042-2, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-2

Синтаксис 1

Главный оператор, которым придется пользоваться чаще всего - это "include". В общем случае SSI директива имеет вид: <!--#include virtual="myfile.txt"-->.

<!-- --> - это стандартный комментарий (если вдруг сервер не сможет распознать команду или не поддерживает ее, то она просто будет пропущена);

#include - собственно сама команда;

virtual - указывает на "вид" пути к файлу;

myfile.txt - имя вставляемого файла.

Естественно, что имя у включаемого файла может быть любым - с любым расширением (или без оного). Главное, - это "начинка" файла. Совершенно понятно, :) что это должен быть HTML.

Касательно "вида" пути (команда virtual). Если сервер проектируется для Web'a (скорее всего), то эта команда именно так и выглядит. Это, конечно, накладывает некоторые ограничения на то, чтобы удобно разместить вкладываемый файл. В этой команда нельзя применять гиперссылки (хотя это в любом случае дурной тон).

Однако иногда бывает полезно показать работу сайта непосредственно на "рабочем" компьютере, и тогда можно (нужно) использовать вместо virtual команду file. При этом адрес можно задавать в виде абсолютного адреса (C:\VasyaPupkin\Site\XXX\myfile.txt). Но это все-таки экзотика.

В общем случае на команде virtual и заканчивается общепринятое использование Server Side Includes - Включений на стороне сервера. И, наверное, это справедливо - что еще нужно знать, чтобы собирать сайт из кусочков?

Но для тех, кто понимает толк в сайтостроительстве, самое интересное начинается там, где останавливаются все остальные.

Так давайте на всю катушку использовать те возможности, которые дает SSI (а их, поверьте мне, не мало).

Синтаксис 2

Условно говоря, у SSI есть две большие области применения: первая - это вставлять внешние файлы, а вторая - вставлять так называемые "переменные окружения".

Делается это командой вида: <!--#echo var="echo_command"-->, где echo_command - переменная величина и может принимать порядка 30 значений. Все я толковать не буду (справочник по SSI можно найти на Web'е без труда), но самые важные - обязательно:

<!--#echo var="DOCUMENT_NAME"--> - выдаст на экран локальное имя текущего документа, к примеру: "ya_garni_peretz.htm" (очень полезен для тех, у кого частый склероз);

<!--#echo var="DOCUMENT_URL"--> - покажет локальный путь к документу, считая от корневой директории Web-сервера, т.е. адрес типа: /win/mydocs/ssi-tutor/baklan.htm.

<!--#echo var="DATE_LOCAL"--> - выведет текущие, локальные дату и время;

<!--#echo var="LAST_MODIFIED"--> - покажет дату последней правки текущего файла;

<!--#echo var="REMOTE_ADDR"--> - выведет ip вошедшего на страницу;

<!--#echo var="REMOTE_HOST"--> - выведет имя компьютера гостя. Очень простой трюк для определения - работает ли компьютер с использованием в настройках proxy: зайти на свою собственную страницу и прочитать адрес, полученный в ответ на команду REMOTE_HOST.

<!--#echo var="SERVER_SOFTWARE"--> - имя используемого провайдером HTTP сервера; иногда это бывает очень полезно знать; :)


Спецвыпуск хакер, номер #002, стр. 002-042-3, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-3

<!--#echo var="SERVER_NAME "--> - имя компьютера, на котором работает web-сервер; тоже небезынтересно знать; :)

<!--#echo var="HTTP_USER_AGENT"--> - одна из самых любимых команд - позволяет определить тип браузера посетителя;

<!--#echo var="HTTP_REFERER"--> - показывает URL, откуда "клиент" пришел (иногда может быть полезна для того, чтобы определить "скрытый" адрес);

<!--#echo var="GATEWAY_INTERFACE"--> - фактически дает версию CGI ПО провайдера.

С помощью SSI, не прибегая к скриптам на Яве и прочим Общим Шлюзовым (cgi) прибамбасам, можно легко и непринужденно делать на странице сообщения типа:

Всем большой хай!

Сегодня у нас Sunday, 27-Feb-2000 20:30:07 Московское время (зима).

Последний раз этот документ был изменен Monday, 21-Feb-2000 23:00:00 MSK.

Твой IP адрес, незнакомец: 193.233.5.100

На моем сервере используется такое ПО, как: Apache/1.3.9 (Unix) PHP/3.0.6 mod_perl/1.16_02

Для просмотра ты, странник, используешь Mozilla/4.0 (compatible; MSIE 4.02; Windows NT). Must DIE! / Rulezzz forever!

А пришел ты сюда со странички: www.super-world-porno.com/uti-puti.htm.

Стоит показать такую страницу всем своим друзьям, как они тут же тебя убоятся. Шутка ли, столько о них узнать. :)

Для особо пытливых приведу полный список echo-команд (в алфавитном порядке): "ACCEPT_LANGUGE", "AUTH_TYPE", "DATE_GMT", "DATE_LOCAL", "DOCUMENT_NAME", "DOCUMENT_URI", "CONTENT_LENGTH", "CONTENT_TYPE", "GATEWAY_INTERFACE", "HTTP_ACCEPT", "HTTP_COOKIE", "HTTP_FORWARDED", "HTTP_FROM", "HTTP_REFERER", "HTTP_USER_AGENT", "LAST_MODIFIED", "PATH_INFO", "PATH_TRANSLATED", "QUERY_STRING", "QUERY_STRING_UNESCAPED", "REMOTE_ADDR", "REMOTE_HOST", "REMOTE_IDENT", "REMOTE_USER", "REQUEST_METHOD", "SCRIPT_NAME", "SERVER_NAME", "SERVER_PORT", "SERVER_PROTOCOL", "SERVER_SOFTWARE".

Кто-то скажет, - "и это все?". Нет! На этом чудеса SSI еще не заканчиваются.

Приведу еще несколько любопытных и полезных команд.

Email. В простейшем варианте позволяет отправить заранее составленное сообщение на заранее определенный адрес.

Пример: <!--#email tohost="xakep.ru" message="You made the coolest magazine, that people ever made!" toaddress="test@xakep.ru" subject="SSI is coolest tool in the world, ya-ba-da-ba-doo!"-->.

Параметров у этой команды, конечно, больше, чем приведенные здесь. Здесь указаны только 4 необходимых (обязательных) команды: tohost - на какой хост (почтовый сервер) отправить письмо, message - текст самого послания, toaddress - почтовый адрес, на какой слать письмо, и последнее - subject, легко догадаться - тема письма.

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

Точно таким же образом можно использовать эту команду в ответе на заполнение формы (форму можно отправлять на анонимный адрес, а письмо с уведомлением на более реальный. :)

Fsize. Команда выводит в текущий документ размера указанного файла.

Пример: <!--#fsize virtual="../log-file.txt"-->.


Спецвыпуск хакер, номер #002, стр. 002-042-4, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-4

Может быть полезна для удаленного контроля размера лога или еще для каких целей.

Flastmod. Эта команда позволяет включить в документ дату последней модификации любого доступного файла.

Пример: <!--#flastmod virtual="mysuperfile.htm"-->.

В отличие от echo-команды, команда Flastmod скажет "всю правду" о любом интересующем файле!

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

Break. Как легко понять из имени команды, она занимается прерыванием. :) Эта команда, как только она встречается, немедленно и безусловно останавливает дальнейший вывод документа.

Пример: <!--#break -->.

Чрезвычайно проста в использовании и не менее чрезвычайно полезна при отладке важных страниц. Я думаю, ни у кого не возникает сомнений, что страницу на гипертексте тоже можно (и нужно!) отлаживать.

Безусловно, это не все тэги, доступные в синтаксисе SSI. К примеру, за скобками остались такие команды, как exec (позволяет выполнять внешние программы и cgi-скрипты), или сonfig (изменяет вывод таких, к примеру, команд, как fsize, flastmod, позволяя настроить нужный формат выдачи сообщений.

Немного программирования

Конечно, в SSI кое-что есть от программирования. Но все же большинство команд - статичны. Тем не менее, для тех, кто хочет делать по-настоящему динамически изменяемые страницы, придутся по душе несколько "чисто программистских" операторов, содержащихся в SSI.

Из всех операторов программирования самым важным для нас, безусловно, является оператор IF. В SSI тег IF позволяет осуществлять вывод определенного текста в зависимости от условий.

В общем виде синтаксис команды выглядит так:

if' "<operand1>" <operator> "<operand2>" <operation>.

На месте последней команды "operation" может быть один из операторов: 'goto', 'print', 'error', 'break', 'errorbreak' или 'printbreak'.

Очень простой пример - допустим, нужно показывать что-то использующим определенный браузер и не показывать это остальным - не хрена им не в свое дело лезть.

Пишем:

<!--#if "&&HTTP_USER_AGENT&&" hasstring "Mozilla" goto Mozilllalabel-->

<P>Ты, пацан попал, у тебя неправильный браузер, и здесь ты ничего не увидишь

<!--#goto ="defaultlabel" -->

<!--#label ="Mozilllabel" -->

<P>А ты пацан клевый, и мне очень нравится твой браузер :).

<!--#label ="defaultlabel" -->

(Здесь уже можно ничего не писать). :)

Все просто, просто до безобразия.

Можно использовать IF для того, чтобы сравнивать текст в формах. Т.е. можно проверить идентичность заполнения форм (а вдруг человек ошибся) или напоминать гостю, что какую-то позицию формы он не заполнил. Вежливо и элементарно. :)

В примере выше я использовал два стандартных оператора - goto и label. Надо "осветить" их чуть более подробно.

Goto. Используется в связке с меткой label (см. ниже).

Синтаксис команды: <!--#goto ="<label>"-->

Пример. <!--#goto ="secretlabel" -->


Спецвыпуск хакер, номер #002, стр. 002-042-5, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-5

<P>Это увидят только те, кому положено видеть

<!--#label ="secretlabel" -->

<P>А этот текст увидят все, без разбора.

Важное замечание: между символами <!--#goto и знаком "=" обязательно должен стоять пробел.

Label. Соответственно устанавливает метку, которую так щедро используют операторы goto или if..goto.

Синтаксис команды: <!--#label ="<label>"-->

Причем <label> строка из не более чем 51 символ без пробелов.

Наличие метки никак не влияет на форматирование документа.

Важное замечание: так же, как и у оператора goto, между символами <!--#goto и знаком "=" обязательно должен стоять пробел.

Дополнительные замечания

Для отладки сайта самое милое дело - это установить собственный web-сервер. Наиболее естественно это реализовано под юниксами, но и под Вынью есть жизнь. Понятное дело, не стоит устанавливать IIS, какие бы златые горы ни сулила за это Micro$soft. Наиболее рулезным сервером всех времен и народов был и остается Apache. Скачать дистрибутив для Win32 можно зайдя на www.apache.org и выбрав там ближайшее зеркало. Дистрибутив снабжен инсталляшкой, и справиться с его установкой легче легкого.

Все файлы сайта необходимо положить в каталог \htdocs внутри директории с Апачем (по умолчанию в этой директории лежат файлы справки к Web-серверу). После этого остается самый "трудный" этап - необходимо сконфигурировать и запустить сервер. Поскольку Апач для win32 кровный брат Апача для юниксов, то вся конфигурация заключается в изменении нескольких текстовых файлов. Всего таких файлов 6, но менять придется 1-2. В любом случае, чтобы подогнать сервер под свои конкретные нужды, лучше почитать разные help'ы, faq'и и manual'ы. Это никогда не повредит.

Для того чтобы включить поддержку SSI в Apache, необходимо проделать следующие манипуляции (все файлы конфигурации лежат внутри директории \conf и имеют одноименное расширение):

В файл httpd.conf необходимо будет добавить следующие строки (скорее всего их там нет): :)

AddType text/html .shtml

AddHandler server-parsed .shtml

Это наиболее стандартный ход. Впрочем, вместо .shtml можно написать .html или .phtml - главное, чтобы расширение было идентично расширению, которые использует для обозначения использующих SSI файлов провайдер.

И, естественно, нужно будет включить сам "механизм" вложения, а для этого добавить во все тот же httpd.conf к команде Options слово Includes.

Тогда строка с командой Options может принять вид:

Options Indexes FollowSymLinks Includes.

После всего этого шаманства остается лишь запустить сервер (запустить .bat'ничек под 95-98), либо (NT & Win2000 - читайте инструкцию) сделать Apache службой и запускать его, по мере надобности, как сервис.

Адрес локального сервера имеет вид: http://localhost/, что эквивалентно ip-адресу 127.0.0.1.

Ну и хватит

Так что дело за малым - скачать web-сервер, настроить его, запустить и... - начать ваять свой сайт. Не забывая при этом вовремя его отлаживать и пользоваться при этом всеми современными фичами, которые только есть. Я полагаю, что SSI далеко не устаревшая вещь, так что она нам еще послужит.


Спецвыпуск хакер, номер #002, стр. 002-042-6, Сайт по кирпичикам

Сайт по кирпичикам

Спецвыпуск хакер, номер #002, стр. 002-042-6

Удачи!


Спецвыпуск хакер, номер #002, стр. 002-048-1, VRML редактор - это не роскошь, а средство вылечивания геморроя

VRML редактор - это не роскошь, а средство вылечивания геморроя

Спецвыпуск хакер, номер #002, стр. 002-048-1

Horrific (smirnandr@mail.ru)

Что такое VRML, ты уже, наверное, знаешь. Нет еще? Ну, представь себе: заходишь ты на сайт и попадаешь вместо стандартной странички с текстом в крутой затекстуренный трехмерный объект, по уровню графики не хуже старичка DOOM'a. Круто? Ну так Х плохого не подкинет! Правда, весит это добро немало, но того стоит.

Как ты уже допетрил, для создания VRML используются соответствующие редакторы.

Я долго думал, какой редактор VRML-миров является самым лучшим. И так сильно напрягался, что начал спорить сам с собой, что лучше - "Нотепад" или крутая графическая прога. Я спорил сам с собой около часа, пока к нам ни присоединился третий "Я", который сказал: "Лучший редактор VRML - это специализированная прога". Тут я понял, что двоих самих себя не переспоришь, и добровольно направился на исправительные работы в ближайшую психиатрическую лечебницу. Куда еще может отправиться человек, пытающийся переспорить двоих самих себя.

Вот сижу я теперь в белой рубашке с длинными рукавами, завязанными на спине, и скучаю. Как сказали врачи, рубашка нужна, чтобы я не надавал по морде моим собеседникам, то есть самому себе. И тут мою дурную голову посетила мысля, а не рассказать ли тебе о всех преимуществах и недостатках разных VRML редакторов. А вдруг ты тоже после этого захочешь присоединиться ко мне. Вот уж мы с тобой повеселимся. Итак, устраивайся поудобнее, щас и ты начнешь спорить сам с собой.

Самый лучший номер 1

Первым редактором, с которым ты сегодня познакомишься, будет "Нотепад", или еще его называют "Блокнот". То, что я рассказываю о нем первым, еще не значит, что он лучший. Почему это не "значит", он лучший! Ан нет, не лучший. Нет, я сказал, что лучший. МОЛЧААААТЬ. А чё он... Я сказал молчать, говорить буду я. Извини, это тут остальные мои "я" влезают в мой рассказ. Продолжим.

У так называемого нотепада полно преимуществ и недостатков. И только попробуй слово сказать. Извини, это я сам себе, психушка, понимаешь ли.

Основным преимуществом является его гибкость. Это не значит, что "нотепад" можно гнуть. Это значит, что ты сможешь создавать миры любой сложности. Ты не ограничен возможностями даже крутого визуального редактора. Единственное ограничение - это полет твоей мысли. Если у тебя мысли не летучие, то попробуй выпить 100 граммов, только не надо нажираться в блевантинную, а то все мысли разлетятся.

Недостатком я назову то, что не каждый может мыслить абстрактно, субстрактно и рестрактно (о, какие я словечки придумал!) на бумаге. Чтобы создать свой виртуальный мир с помощью блокнота, нужно уметь думать программерски. В основном программеры умеют думать "процедурно" или "объектно", а простому смертному это не всегда по мозгам. Если ты не можешь в блокноте написать HTML-код своей странички, то VRML можешь даже и не пробовать, тебе прямая дорога в визуализацию.

Заметь, что я не назвал недостатком необходимость знания языка VRML. Этот язык тебе не помешает знать в любом случае, чтобы оптимизировать работу визуального редактора. А там всегда есть, что оптимизировать.


Спецвыпуск хакер, номер #002, стр. 002-048-2, VRML редактор - это не роскошь, а средство вылечивания геморроя

VRML редактор - это не роскошь, а средство вылечивания геморроя

Спецвыпуск хакер, номер #002, стр. 002-048-2

Самый лучший редактор номер 2

Теперь посмотрим на специализированный редактор. Для примера возьмем тот, что завалялся у меня на диске. Эту прогу написала фирмочка RenderSoft (у меня такое ощущеньице, что эта фирма состоит максимум из двух крутых челов). А названьице у проги не более оригинальное - "RenderSoft VRML Editor". Это воистину специализированный редактор, который заточен, зализан, замазан и заделан специально для создания wrl файлов. Эту прогу ты можешь забрать здесь: http://home.pacific.net.sg/~jupboo/rs2.zip. И весит она достаточно божески, всего-то 882 кило.

Как и у других таких редакторов, у этого тоже есть один недостаток - не очень удобный интерфейс. Фейс действительно неудобный, зато позволяет создать миры практически любой сложности и избавляет от главного геморроя блокнота - напрягать свои мозги. Хотя мозги напрягать все равно придется, без мозгов ты ничего не сделаешь, но их уже надо не так уж много.

Вообще-то, эта прога действительно замечательная. Она позволяет создавать даже анимированные миры. Поддерживается экспорт в VRML 2.0, compressed VRML2.0, JPEG и, как ни странно, даже в AVI. Сохраняемые файлы получаются достаточно компактными, хотя о компактности этих файлов мы поговорим позже.

В проге реализованы основные VRML объекты: конус, куб, цилиндр, сфера и круг, а также лампочка Ильича. Хотя лампочка это не совсем объект, точнее объект, но не такой, как все остальные, потому что ты ее не сможешь увидеть, она умеет только светить.

Правда, что хреново, в RenderSoft VRML Editor очень неудобно реализован выбор объектов. По умолчанию, мышкой ты двигаешь объект. Для того, чтобы выбрать другую фигурку, ты должен щелкнуть по пимпе в панели инструментов и только потом по нужной фигурке.

Я бы назвал еще один недостаток, но он касается не всех прог такого класса, а только этой - это небольшая глючность. Может быть, это я глючил после очередной бутылки "Балтики", но иногда у меня возникали проблемы с пимпами на панельке. Когда я их нажимал, они не всегда срабатывали с первого раза, приходилось выключать и включать кнопку заново. Этот глюк проявляется очень редко, поэтому я решил закрыть на него глаза, ширинку и, вообще, я решил эту прогу закрыть - поехали дальше.

Самый лучший редактор номер 3

Это действительно самый лучший редактор. Он позволяет практически все. Единственный его недостаток - это его тяжеловесность. Он достаточно много места занимает на диске и очень прожорлив к ресурсам, хотя на моем сотом пне с 32 мегами мозгов он достаточно сносно работал. Достаточно сносно - это не значит, что достаточно хорошо. Это значит, что можно потерпеть, хотя иногда хочется запустить пустую бутылку в монитор (полную кидать жалко). Я думаю, не имеет смысла засерать мозги своего компа такой громадиной тем, кто строит миры раз в год и то по пьянке.

Ты еще не догадался, о чем я? Я о 3DS MAX. Да, да, эта громадина поддерживает VRML файлы. Она спокойно открывает wrl файлы и потом без проблем запихивает свои сцены обратно. Для этого необходимо только выбрать импорт или экспорт в менюшке "Файл".


Спецвыпуск хакер, номер #002, стр. 002-048-3, VRML редактор - это не роскошь, а средство вылечивания геморроя

VRML редактор - это не роскошь, а средство вылечивания геморроя

Спецвыпуск хакер, номер #002, стр. 002-048-3

Эта прога не имеет недостатков предыдущих редакторов. Это очень удобная и гибкая прога. Я ее полюбил еще начиная с 3DS Studio. Если ты не помнишь, то эта та же прога, только под DOS. Dos - это такой Виндз, только без графического фейса. Графический интерфейс - это глюк от МелкоМягких. Глюк - это то, что происходит сейчас со мной. Бум.

У меня и сейчас на диске глючатся и 3DS MAX, и 3D Studio, правда, я их очень редко запускаю.

Все возможности этой проги на двух полосках журнала перечислить просто невозможно. Если ты еще не знаешь такой проги, то быстрей направляйся на ближайший рынок, там обязательно будет валяться диск с "3DS MAX + русский учебник". А я пожалею место журнала, а то мне редактор кое-что укоротит, если я начну хвалить все возможности этой проги.

Конец - телу венец

Отдельно хочу отметить недостаток визуальных VRML редакторов, они создают достаточно большой VRML код, очень часто вставляя туда лишнее. Этот недостаток касается и такого гиганта, как 3DS MAX. Это общий недостаток визуальности. Этим страдают и средства программирования, и HTML редакторы, и, и, и, ну, короче, все кроме блокнота. Чем визуальнее программа, тем больше файлы она выдает. Так, например, одна и та же сцена в 3DS MAX займет больше места, чем в RenderSoft VRML Editor. Напоследок хочу посылать тебя на ... Ну, в смысле на еще одну ссылку в Инете:

http://www.tvi-sarl.fr/SetupVPLOT.exe.

Это еще один маленький редактор VRML. Достаточно маленький и шустренький. Хотя не совсем маленький, он занимает чуть больше 2 мегов. Он более удобный, чем прога от RenderSoft, и имеет чуть больше возможностей, но и весит в три раза больше.

Новое поколение выбирает... SEX, SEX и еще раз SEX

Да, новое поколение действительно выбирает то самое, только некоторые его предпочитают с девушками, а некоторые с Мастдаем.

Итак, что же выбрать из всего этого? Если у тебя полно места на диске и комп с легкостью тянет 3DS Max, то устанавливай его. Слава чуваку, который там наверху, что мы живем в России, где легко можно достать эту прогу. Хотя ты потратишь достаточно много времени на ее изучение, но миры у тебя будут убойными, и любого посетителя твоей странички разорвет в клочья.

Если ты хочешь быстро создать компактный код, то тебе прямая дорога к RenderSoft. Эта прога достаточно проста и позволит тебе создать хороший мирок. Конечно, чтоб создать такой мир, как в 3DS MAX, тебе понадобится немного больше времени и нервов, но вполне реально.

Ну а блокнот предназначен для самых извращенных.

Все, я закругляюсь. А то к спору с двумя моими "я" скоро присоединится еще и редактор Х. Он нам на троих выделил только две полосы, а мы тут уже наклепали хрен знает сколько. Ну, в смысле, от этого больно бывает.

Все. Удачи тебе. Best regards. Бай. Пока. До новых встреч.


Спецвыпуск хакер, номер #002, стр. 002-052-1, Flash4 за 15 минут!

Flash4 за 15 минут!

Спецвыпуск хакер, номер #002, стр. 002-052-1

MOOF (MOOF@xakep.ru ; http://anynews.agava.ru).

Ты только представь: заходишь ты на страницу - и она оживает. Бред? А вот и нет. Ты когда-нибудь слышал такое словосочетание Macromedia Flash 4? Ты думаешь, что flash - это марка макарон? Тогда, скажу откровенно, тебе не очень понадобится этот материал - лучше макаронами займись. ;) Если ты все еще читаешь это, то тебе стоит включить комп и проделать все действия, которые я буду описывать. Для этого у тебя должен быть установлен сам пакет Macromedia Flash 4 (или 3). Весит это "счастье" всего 9Мб с хвостиком. Если его у тебя нет, то пойди и купи CD с ним или скачай из Инета 30-дневную версию (http://www.macromedia.com).

Зачем мне это нужно?

А за тем, что с помощью флэша ты можешь создавать крутые фичи в WYSIWYG (чё видишь, то и получишь) редакторе. Тебе теперь не надо учить заумные языки программирования - с флэшем ты можешь сделать практически все что захочешь, зная лишь 10-15 команд. Но, даже не зная их, ты сможешь делать классную анимацию, стильные эффекты и прочее благолепие. ;) А анимацию делать во флэше не просто, а очень просто! Все, что от тебя требуется - это сделать первый и последний кадры. Все остальное на себя берет флэш.

Let's rock!

Ну, давай, наконец, чего-нибудь сделаем. Начинаем, как всегда, с File->New. Перед тобой окно редактора!

Если у тебя все в порядке со зрением, то ты заметишь, что большую часть экрана занимает белый лист (как в Ворде). Слева находятся инструменты, с помощью которых можно создавать различные объекты. Сверху находится полоса, разделенная на ячейки - это кадры. Кадры - это основной инструмент при создании анимации.

На панели инструментов жмем на кнопочку с буквой "А". И кликаем на листе. В появившемся поле ввода пишем большими буквами (размера 72) и шрифтом Times слово "ХАКЕР". Делаем его ярко-зеленым (я думаю, ты сам справишься с этой задачей?). Надпись готова! Не забудь сохраниться. ;) Теперь на линейке с кадрами выбери сороковой кадр и жми F6. Это ты создал сорок кадров с твоей надписью. Выбери первый кадр и подвинь надпись к левому верхнему краю, а потом выбери последний кадр и подвинь надпись к правому верхнему краю. Как, справляешься? Теперь выбери слой (Layer), на котором у тебя находятся картинки, и выбери Insert -> Create Motion Tween. Все! Анимация готова. Ты создал первый в своей жизни флэш ролик. Поздравляю! Чтобы посмотреть его, достаточно просто нажать на ентер, а если захочется взглянуть в браузере - просто нажать F12. Теперь давай малость улучшим ентот ролик. Жмем Modify -> Movie, где Background меняем цвет на черный, а fps на 10. Высоту (height) тоже поменяем, на 100. Чтобы движение прошло раз и остановилось, кликаем правой кнопкой мыши на последнем кадре, в появившемся меню выбираем Properties, т.е. свойства. В появившемся окне выбираем вкладку Action и кликаем на плюсик, и выбираем Stop. Вкладка Action служит для программирования свойств, которые невозможно сотворить визуально (типа посылка письма или вызов cgi скрипта). Теперь сделаем, чтобы текст постепенно появлялся из темноты. Жмем правой кнопкой мыши на надписи, предварительно установив фокус на первый кадр, выбираем Properties. Затем переходим на последнюю вкладку Color Effect. Там выбираем Brightness, т.е. меняем яркость текста до -100%. Сохраняемся, жмем F12 и наслаждаемся зрелищем. Можно еще извратиться и сделать, чтобы надпись вращалась при перемещении. Жмем на первом кадре правым батоном мыши и в свойствах выбираем вкладку Tweening. Там в меню Rotate выбираем способ вращения: по часовой стрелки или против и устанавливаем количество поворотов (times), например, три. Ентер. ;) Как ты заметил, надпись стала вылезать за размеры листа, имхо, так круче смотрится, но если тебе не нравится, то можешь увеличить лист. Как, смотри выше.


Спецвыпуск хакер, номер #002, стр. 002-052-2, Flash4 за 15 минут!

Flash4 за 15 минут!

Спецвыпуск хакер, номер #002, стр. 002-052-2

Навороты

Смотри, за пару минут мы с тобой научились делать анимацию, ну что может быть проще, чем флэш? Теперь подумаем, куда можно его впихнуть? Я думаю, идеальным вариантом было бы впихивание этого добра в стартовую страницу (в какой- нибудь index.html). Как? При сохранении флэш создает несколько файлов с расширениями: fla, swf и html. Файл с расширением fla используется редактором для хранения всей необходимой информации. Файл с расширением swf предназначен для плеера флэш файлов. А html файл предназначен, как ты понимаешь, для эксплорера, чтобы он смог загружать swf файлы и проигрывать их. И для того, чтобы вставить флэш анимацию (или еще чего), надо взять кусок кода из html файла и вставить его туда, куда тебе надо. Вот пример кода:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"

ID=Movie1 WIDTH=550 HEIGHT=100>

<PARAM NAME=movie VALUE="Movie1.swf">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#000000>

<EMBED src="Movie1.swf" quality=high bgcolor=#000000 WIDTH=550 HEIGHT=100 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED></OBJECT>

Теперь вернемся к нашим баранам. Сделаем, чтобы после завершения анимации в окне браузера открывался сайт нашего журнала. Для этого открываем окно свойств на последнем кадре, выбираем вкладку Action и поле команды stop, которую мы добавили чуть раньше, добавляем команду GetURL. В строке URL указываем адрес сайта: http://www.xakep.ru , в поле window выбираем "_top", что означает, что новая страница будет открываться в этом же окне. Теперь по завершении анимации будет автоматически загружаться сайт Хакера.

Теперь добавим туда парочку картинок. Для картинки создадим новый слой insert -> Layer. Делаем его активным и добавляем картинку File -> Import. Двигаешь картинку в правую сторону и запускаешь ролик. Видишь, картинка осталась на месте. Теперь заставим ее увеличиваться. Как и в случае с текстом, выделяем сороковой кадр, жмем F6. Потом выделяем весь слой и создаем анимацию (Insert -> Create Motion Tween). В первом кадре уменьшаем размеры картинки. Это делается клавишей Scale, которая находится слева. А в последнем кадре, наоборот, увеличиваешь размер картинки. Запускаем. Видишь, все работает.


Спецвыпуск хакер, номер #002, стр. 002-052-3, Flash4 за 15 минут!

Flash4 за 15 минут!

Спецвыпуск хакер, номер #002, стр. 002-052-3

Для полного кайфа добавим звук. Для этого создадим еще один слой, который будет отвечать за звук. Вообще, слои - отличная штука, когда тебе надо много объектов заставить двигаться. Выбираем файл из меню File -> Import. Затем открываем свойства первого кадра нового слоя и в его свойствах, во вкладке Sound выбираем только что импортированный звук. В меню Sync выбираем Stream и количество повторений. При желании можно запустить звук не с самого начала, а в середине ролика (к примеру).

INDEX

Побаловались и хватит, займемся делом. Давай сделаем нормальную стартовую страничку с меню и анимацией. File -> New. Устанавливаем размеры 640х480 и черный цвет фона.

Начнем с заголовка. Напишем сверху белым: "ЛУЧШИЙ ВАРЕЗ В МИРЕ". Установим его размер равным 48 и шрифтом Courier. Если захочешь, то можешь добавить анимацию. Теперь создадим кнопки для выбора страницы, которую будем загружать. Выбираешь Library -> Forms-Windows Controls, появляется окно, в котором мы можем выбрать различные элементы управления: различные кнопки и переключатели. Выбираем Push Button и перетаскиваем ее на лист. Простым перетаскиванием сделаем три кнопки. Теперь можешь закрыть маленькое окошечко с компонентами, оно пока нам не нужно. Сейчас это обычные серенькие кнопки, и на них везде написано ОК, это надо исправить. Кликаем правой кнопкой крысы на только что созданной кнопочке и во всплывающем меню выбираем «редактировать» (Edit). Опа! Сверху вместо кадров появилось четыре положения кнопки: отжата (up), нажата (down), наведена мышь (over) и кликнута (hit). Переделаем кнопку по своему вкусу. Для начала удалим все кадры к Биллу Г. Для этого кликаешь по слою Button (выделяются все кадры) и жмешь shift+F5. Готово, этой ужасной кнопки больше нет. Выбираешь первый кадр, жмешь F5. Создается новый кадр. Там рисуем овальную кнопку (например, зеленым цветом с темно-зеленым контуром). Для этого на панели с инструментами выбираешь инструмент с кружком и устанавливаешь необходимые параметры. На кнопочке напишем крупно "WAREZ". Теперь выбери кадр Over и нажми F6. У тебя появится та же кнопочка. Ты можешь изменить ее цвет, используя заливку (такое ведро, из которого что-то подозрительно льется). Зальем желтым цветом. И точно так же создадим кнопочку для события Down, но сделаем ее синего цвета. Переключаемся в режим редактирования. Открываем свойства первой кнопки. Переходим на вкладку Definition, в списке объектов есть и наша кнопка: Push Button. Кликни на ней правой кнопкой и выбери Duplicate Symbol, создается копия объекта «кнопка». Создай две копии кнопки. Теперь в свойствах каждой кнопки установим различные объекты. Для этого достаточно сделать дабл-клик на нужном объекте.

Отредактируем вторую и третью кнопки. Изменим их цвет и надписи. Добавим звук при наведении на кнопку. Для этого импортируем звуковой файл (Control+R) и откроем редактирование кнопки. Жмем правой кнопкой на [Over] кадр и открываем его свойства. Там на вкладке Sound устанавливаем звук, который будет проигрываться при наведение курсора на кнопку. При желании можно установить свой звук для каждой кнопки.


Спецвыпуск хакер, номер #002, стр. 002-052-4, Flash4 за 15 минут!

Flash4 за 15 минут!

Спецвыпуск хакер, номер #002, стр. 002-052-4

Теперь сделаем, чтобы при клике на кнопку открывалась нужная нам страница. Для этого открываем свойства кнопки и во вкладке Action устанавливаем уже знакомую тебе команду GetURL. Однако теперь надо отредактировать и команду On(), которая отвечает за действия, после которых будет выполняться команда GetURL. Для этого выбираем команду On() и справа в свойствах события выставляем вместо Release действие Press. Теперь при клике на кнопку будет открываться нужная нам страничка. Проделаем то же и с остальными кнопками.

Теперь заставим объект двигаться по заранее созданной траектории. Добавь еще один слой. На нем нарисуй красный круг, именно он и будет двигаться. Если тебе не нравятся круги, можешь нарисовать квадрат или добавить картинку. В меню Insert выберем Motion Guide. Появится новый слой, на котором карандашом нарисуем траекторию "полета" круга. Выделим первый кадр на слое с кругом и создадим анимацию (Insert -> Create Motion Tween). Теперь надо включить инструмент магнит (Snap) и перетащить круг, держа его за центр, в начало линии анимации. А в последнем кадре перетащим круг в конец линии. F12.

Настройки

Кроме роликов для Интернета, с помощью флэша можно создавать красивые интерактивные презентации. Ты, наверное, видел такие на халявных дисках, которые заказываешь в сети. Все это можно настроить, нажав Control+Shift+F12. В открывшемся окне есть три вкладки: Formats, Flash и HTML. В первой вкладке ты можешь задать форматы, в которых будет создаваться результирующий ролик. На следующей вкладке Flash устанавливаются параметры флэша. В каком формате (флэш 1,2,3 или 4) сохранять файлы, качество jpg сжатия и т.д. А на вкладке HTML настраиваешь параметры, которые будут передаваться флэш плееру из html файла.

The end

Это, конечно, далеко не все, что можно сделать с флэшем, но лучше, чем ничего. ;) Сейчас все большую популярность набирают флэш баннеры размером 468х60. Если ты дочитал эту статью до конца, то можешь уже смело садиться и делать баннер на флэше. CRT будет убойным, поверь мне. Обязательно побывай на сайтах, указанных ниже, там ты найдешь много полезной информации и, возможно, в скором времени ты создашь свой супер революционный проект во флэше.

Полезные ссылки

http://www.macromedia.com - сайт компании разработчика флэша.

http://www.flasher.ru - русскоязычный сайт о флэше.

http://www.flasher.net ; http://www.flashzone.com ; http://www.shockrave.com - посмотри сам.


Спецвыпуск хакер, номер #002, стр. 002-056-1, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-1

Дядь, дай десять копеек!

Ну, чего смотришь? Думаешь, так сразу и расскажу про Яваскрипт и про то, как им можно винты доверчивым усерам хакать? А фиг тебе, послушай сначала сказку про белого бычка. Чего мычишь - недоволен? А что, ты и без меня знаешь, откуда произошел JavaScript, почему он именно так называется, кто его предки... Ы? Ну так и сиди тихо - ручки на коленках - и слушай знающих людей (вроде меня).

Как, наверное, любая большая и в достаточной степени сложная вещь, язык Си был сделан не сразу и не вдруг. Что значит, обещал про Яваскрипт? Об чем хочу, об том и рассказываю. Твое дело слушать! Итак, испокон веку в неспокойных сердцах, мозгах и прочих внутренностях несчастных программистов на великом и могучем языке... конечно же, ассемблера! бродила дикая мысль о создании языка, на котором можно будет писать то же самое, что и на асме (который они почему-то называли языком программирования низкого уровня), но с тем же удобством, что и на, скажем, Паскале или даже старом добром Алголе (сиречь языке программирования высокого уровня). Ничего себе идейка, а? Но, как и всякая хорошая идейка по дороге в жизнь умудряется вляпаться во все мыслимые и немыслимые глупости, так и наш любимый и уважаемый язык Си был изрядно загажен уже одним только своим претворением в жизнь. Но разговор о Си, его недостатках (ну и о достоинствах тоже немного) - это отдельная песня, я очень надеюсь осветить ее в ближайших номерах этого лучшего на свете журнала.

Пока что посмотрим, что же случилось с этой концепцией дальше.

Никто не знает, что заставило коллектив компании Сунь Микросистемз, которому было поручено создание нового языка, обратить свой извращенный взгляд на Си. Может, они считали, что идея насчет языка программирования среднего уровня осуществилась? Я лично не знаю. Если хочешь, можешь спросить об этом прямо у них, но предупреждаю: они очень странные люди и ни слова не понимают по-русски!!

Но, так или иначе, была директива от начальства: создать новый сиподобный объектно-ориентированный простой в разработке и обращении машинонезависимый язык. Тоже нехило, да? Но директива от начальства - это серьезно, на это нельзя просто так наплевать и усесться дальше играть в Диаблу. Точнее, можно, но только так, чтобы это не было заметно. На этот раз дело двигалось гораздо более шустро и без заметных напрягов. Ну, "новый сиподобный" - это понятно, берем Си и вешаем всех необходимых нам собак на него. "Объектно-ориентированный" - смотрим на сишную (точнее будет сказать сиплюсплюсную (или сиплюсплюснутую?) реализацию всяких там инкапсуляций-интерполяций, полиморфизмов-антропоморфизмов и наследования. Простого такого наследования. Так, значит, смотрим на них и добавляем то, чего там по нашему мнению не хватает и чему там по нашему мнению самое место. Так, что там дальше... Ага, "простой". Элементарно, Ватком! Там же не сказано, что язык должен быть чем-то большим, чем просто объектно-ориентированное фуфло. Так что берем и смело обрезаем (а правильнее сказать, коцаем) все, не связанное с объектной ориентацией. Если что связано, но не очень крепко - дергаем, отрываем и только потом коцаем.


Спецвыпуск хакер, номер #002, стр. 002-056-2, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-2

"Машинонезависимый"... Кхм... Это несколько сложней. Хотя все равно решаемо. Пока комп тормозит, помогая Диабле перейти на новый уровень, придумываем некую виртуальную машину (Николас Вирт тут не при чем, равно как и автомагазин в Интернете). Виртуальная машина - это такая фигня, которая дико тормозит и лечит свою болезненную манию величия мыслью, что она чем-то похожа на микропроцессор. То есть действительно есть некий набор команд, с помощью которого умелые люди научились не допускать остальных до настоящего микропроцессора (не правда ли, это все очень сильно напоминает концепцию, использованную при создании языка Си?). Так вот, придумываем виртуальную машину и пишем интерфейсы для нее под все известные платформы. Не бесплатно, ясен пень!

Прекрасно! Можем себя поздравить - монстер готов. Прямо хоть из печки да и сразу в Бестиарий. Ан нет - надо еще раскрутить хорошенько, попродавать немного, а там хоть трава на лысине не расти!

Умереть труднее, чем кажется

В 1995 году несколько умных людей поняли, что что-то надо с этим делать. Как раз в это время несколько других умных людей собрались и решили разработать новый язык, причем действительно простенький, маленький и по нормальному машинонезависимый, к тому же удобный для использования его при работе в Интернет (совместно с HTML). Как это ни странно, плясать они начали именно от такого сокровища, как Ява. От глобальной объектизации, конечно, отказались сразу, хотя ее ростки приходится выкорчевывать до сих пор.

Итак, всем стало ясно, что фирма Нетшкаф на базе сановой Явы сделала новый лангваг. Кому не ясно - читай сначала или спать ложись, поздно уже, в конце-то концов! А остальным не мешай.

JavaScript и Java - близнецы-братья?

Прежде всего перестань тормозить и пойми, наконец, что JavaScript и Java - это совершенно разные вещи. Java представляет собой объектно-ориентированный язык программирования от компании Sun Microsystems и требующий для нормального безглючного функционирования компиляторов и кучи отдельных вспомогательных файлов. Этот язык хорош только для тех, кого не тошнит от Си++ и кто безумно помешан на объектно-ориентированном принципе программирования.

Особая приблуда под названием Java Development Kit позволяет (вынуждает) :) создавать программы, которые могут работать как отдельные вполне законченные проекты или же как апплеты, подключенные к HTML-страничке. Именно подключенные, так как каждый апплет должен храниться на сервере в своем отдельном файле в своем хитровыдуманном формате.

JavaScript был разработан в Netscape. Он близок к Яве по трем причинам:

1) По названию

2) По некоторому общему простому набору команд, сходных в реализации (ну родственники, ёлы-палы!)

3) По зарезервированным словам.

По структуре, синтаксису и прочим прибамбасам, которые, собственно, и отличают один язык программирования от другого, ЯваСкрипт очень близок к Яве, но первый реализует свою функциональность только в составе страницы HTML. Никто тебе не даст разрабатывать отдельные программулины или те же апплеты - скрипты должны располагаться только внутри HTML (XML, VRML, SGML...) страницы. И начинают работать, только если эту страничку загрузить в подходящий бравзер типа Нетшкафы 2.0 ... 5.0 или маздайного мелкомягкого Интернет Ыгплорера 3.0 ... 5.0.


Спецвыпуск хакер, номер #002, стр. 002-056-3, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-3

Несмотря на отсутствие прямой связи с Явными фенечками, ЯваСкрипт вполне может обращаться к внешним свойствам и методам Ява-апплетов, встроенных в страницу HTML. Итого, разница сводится, на первый взгляд, только к тому, что Java-скрипты лежат внутри использующего их файла HTML, тогда как Java-программы существуют вовне. Теперь же рассмотрим более детально особенности JavaScript'а.

Понятие бестиповости

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

char f='f';

int b=0xB;

unsigned long double pee=3.14;

а в Яваскрипте - так:

var f='f';

var b=134341;

var pee=3.14;

Усек? И при этом тебе теоретически должно быть ярко фиолетово, как именно пишутся твои числа - в кавычечках или без оных. Но это ведь только теория... Постарайся сконцентрировать свою силу воли до такой безумной степени, которая позволит тебе не заснуть окончательно до конца страницы, и тогда бескрайнее море информации обогатит твою бессмертную душу неувядающей мудростью и осознанием этой разницы. Учись, пока я жив.

Объекты и их иерархия

Основное понятие JavaScript - объект, но понимается это не так, как в Яве. Вообще, что такое 'Объект', знаешь? Это что-то типа сумки, в которую можно сложить сразу и дискету, и книжку, и даже собственную ногу (но только одну!) :) И при этом помнить, что в сумке есть все необходимые инструменты для вынимания/вкладывания вещей и для реализации некоторых других простейших действий с ними. В языке JavaScript существуют три праобъекта, от которых происходят все остальные.

Global - содержит только то, что в нормальных (не объектно-ориентированных) языках называется глобальными переменными.

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

Эти два класса объединяет одно: объект (экземпляр класса) может быть только один на всех. Почему - я думаю ясно. Не может же быть несколько разных синусов? Синус - он и в Африке синус...

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


Спецвыпуск хакер, номер #002, стр. 002-056-4, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-4

Но, понятное дело, это еще не все. Теперь мы с тобой рассмотрим еще шесть потомков Object, которыми так или иначе пользуются JavaScript-программисты.

Array - массив. Инициализируется так:

var mycoolArray=new Array(2);

var yourcoolArray=new Array(2,3,4);

var ourcoolArray=new Array(new Array(2), new Array(4,5));

В вышеприведенных примерах в первом случае создается одномерный массив размера 2 (размер массива всегда доступен по arrayName.length), во втором случае - тоже одномерный, но длины 3 и заполненный не нулями, а вполне определенными циферками. Третий пример комбинирует два предыдущих, создавая двумерный массив.

В виде завершения могу привести процедуру увеличения размерности массива на один. Хорошая вещь, использованная мною не в одном скрипте.

function incDim(l)

{

if (l=='nil')

{

var g=new Array(1);

g[0]=new Array(2);

return g;

};

var g=new Array(l.length+1),i;

for(i=0;i<l.length;i++)

{

// в этом примере массив двумерный, но может быть

// и по-другому. Фантазируйте!

g[i]=new Array(2);

g[i][0]=l[i][0];

g[i][1]=l[i][1];

}

g[l.length]=new Array(2);

return g;

}

Boolean - очень малозначный (как и положено) булев тип. Тrue означает правду, false - ложь. Вообще-то, JavaScript - язык бестиповый, как будет отмечено ниже, но полезно знать, что при умышленном конвертировании true переходит в 'true' строковое или 1 числовое, false - в 'false' или 0 соответственно. При конвертировании в Boolean любое не нулевое значение перейдет в true.

Date - немного напоминающий и Global, и Object. Как константа только для чтения существует объект Date. И такой же (только маленький и неизменный) объект может быть создан в любом месте твоего скрипта. Как типовую задачку можно рассмотреть создание часов в статусной строке (это внизу бравзера есть такая фигня).

<HTML>

<HEAD>

<SCRIPT>

// Функцию надо вызывать только один раз.

function display_time_in_status_line()

{

var d = new Date(); // который час?

var h = d.getHours(); // час от 0 до 23

var m = d.getMinutes(); // минуты от 0 до 59

var ampm = (h >= 12)?"PM":"AM"; // AM или PM?

if (h > 12) h -= 12; // нам нужно только первые 12

if (h == 0) h = 12; // полночь

if (m < 10) m = "0" + m; // добавить нулей

var t = h + ':' + m + ' ' + ampm; // пусть лежат вместе

defaultStatus = t; // оно!!!

setTimeout("display_time_in_status_line()", 60000);

// делать ту же гадость каждую минуту

}

</SCRIPT>

</HEAD>

<BODY onLoad="display_time_in_status_line();">

<!-- Здесь лежит очень большой и страшный HTML документ -->

</BODY>

</HTML>

Function - немного извращенный метод использования функции. Обычная функция выглядит так:

function mycoolfunction(f)

{

alert(f++);

return --f;

}

а извращенная форма будет так:

var mycoolvar=new Function("f","alert(f++);return --f;");


Спецвыпуск хакер, номер #002, стр. 002-056-5, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-5

и вызываться она будет как

var g=4;

myvoolvar(g);

Класс, а? На первый взгляд немного дико, но архиудобно для работы с динамически создаваемыми функциями.

Number - используется в основном для преобразований. Ну кто в здравом уме будет писать var g=new Number(3); если можно довольствоваться var g=3;? Но при этом очень удобно использовать это для приведения к другому типу, например, так:

var g="3";

var h=Number(g);

var j=g+h;

var l=h+g;

Думаете, после выполнения этого всего j будет равно l? А вот и фиг. В j будет лежать "33", тогда как в l - 6. Вот такие вот пирожки. С котятами.

String - строчка. Записывается в одинарных или двойных кавычках, но не сразу. Например, тебе кровь из носу надо, чтобы строковая переменная содержала такую строчку: '*"&'%"#. Думаешь, это невозможно? Как бы не так! На JavaScript возможно все...

var mycoolstring="'"+'*"&'+"'%"+'"#';

Все ясно? Можешь отхлебнуть еще пивка и читай дальше...

В общем, String - класс с абсолютно аналогичным Number и полностью идентичным использованием. Только вот работает он совсем в другую сторону. Но - работает. За что ему и спасибо.

Маленькие объекты - большие достоинства

Кроме девяти вышеперечисленных классов, в JavaScript есть еще несколько маленьких, но чрезвычайно важных, полезных и интересных объектов, которые невозможно причислить ни к одному из уже известных тебе классов. Понимание этого дела сильно осложняется еще тем фактом, что во многих умных книжках классы называются объектами (собственно, как и сами объекты.) Это вносит путаницу в и без того странный и пугающий для новичка мир объектно-ориентированного программирования. Я рассмотрю только несколько из них, так как почти все в браузерах представляется с помощью них.

document. Именно так, с маленькой буквы. Привыкай, в JavaScript все имена, кроме Самых Главных Объектов, традиционно пишутся с маленькой буквы. Причем, интересный момент: если название состоит из нескольких слов, то второе слово и дальше пишутся с большой, то есть var book, author; но var myCoolBook, authorOfThisVeryGoodDocument;

Этот объект - самый толстый из всех, он содержит во-первых, массив all, в котором, как ты уже, наверное, догадался, лежит все, что есть в документе, и во-вторых, то же самое, но отсортированное по разным критериям. К таким массивам относятся anchors, applets, embeds, filters, images, links, plugins, scripts, selection, styleSheets. Подробную инфу по ним можно найти в умных книжках или доках. Тут уж, как говорится, 'читайте доки - они рулез'. Или, как говорит один мой хороший знакомый, 'век живи, век RTFM, все равно LMD'. Не обращай внимания, это я так смешно шучу. Гы-гы-гы.

Там же можно при желании найти свойства activeElement, readyState, referrer и методы open, write, writeln, close, clear, createElement, elementFromPoint, execCommand, queryCommandEnabled, queryCommandIndeterm, queryCommandState, queryCommandSupported и queryCommandText. Имена у всех методов и свойств говорящие, так что должно быть все понятно. Я сказал должно! Позволю себе только отметить, что document.referrer содержит адрес документа, с которого был совершен переход на текущую страничку. Сечешь, хакер?


Спецвыпуск хакер, номер #002, стр. 002-056-6, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-6

window. Содержит свойства parent, self, top, name,opener, closed, status, defaultStatus, returnValue, clientInformation, document, event, history, location, navigator, screen, event. Как начнешь работать с HTML/JS ближе (если уже ни начал), разузнаешь все, что следует, про каждый из них.

Еще объект window содержит такие полезные методы, как open, showHelp, execScript, setTimeOut, clearTimeOut, setInterval, clearInteral, close, showModalDialog, alert, prompt, confirm, navigate, blur, focus, scroll и другие...

navigator. Содержит кучу переменных, среди которых следует упомянуть appCodeName (кодовое супер-пупер секретное имя браузера), appName (мирское имя его же), appVersion (версия проги), userAgent (appCodeName+'/'+appVersion (чтобы по три раза одно и то же не спрашивать), javaEnabled (а можно ли?), cookieEnabled (или все-таки нельзя?), plugins (архив плюгинов), mimeTypes (он же, но типов мимекодирования). Некоторые, особенно пальценутые браузеры, имеют только свои свойства этого объекта: taintEnabled в Netscape, browserLanguage, connectionSpeed, cpuClass, onLine, platform, systemLanguage, userLanguage в MSIE. Размер пальцев легко сравнивается количеством этих никому не нужных свойств.

Так, не засыпай! Я еще не сказал, что, во-первых, если юзер, который любуется твоей страничкой, делает это в МСИЕ, то ты можешь получить очень много информации из объекта navigator или даже запустить программу на VBScript. Во-вторых, вот маленький полезный примерчик:

function isNormalBrowser

{

if (navigator.appName.indexOf('Microsoft')==-1) return true;

}

function whatOS

{

if (navigator.appVersion.indexOf('Win')>=0) return 'MustDie';

if (navigator.appVersion.indexOf('UNIX')>=0) return '*NIX';

if (navigator.appVersion.indexOf('BSD')>=0) return 'FreeBSD';

if (navigator.appVersion.indexOf('Linux')>=0) return 'Linux';

if (navigator.appVersion.indexOf('Sun')==0) return 'SunOS';

//добавляй еще, какие знаешь...

return 'Unknown';

}

Даже не знаю, надо ли тебе говорить, насколько важно знание операционки в разных благоприятных случаях... Не, не скажу! :)

Reserved Words

Зарезервированные слова в JavaScript делятся на два типа: нормальные и зарезервированные на будущее. В первую категорию входят те слова, которые реально используются как зарезервированные в цивилизованных языках. Во вторую - те, что, может быть, когда-нибудь и будут использованы, а пока что они являются зарезервированными в Яве и скорее всего никогда не войдут в JavaScript. Во всяком случае, я на это надеюсь.

Вот следующие слова из первой группы:

break false in this void

continue for new true while

delete function null typeof with

else if return var

А вот - из второй:

case debugger export super


Спецвыпуск хакер, номер #002, стр. 002-056-7, Ява Золотая: история с географией

Ява Золотая: история с географией

Radagast Kary

Спецвыпуск хакер, номер #002, стр. 002-056-7

catch default extends switch

class do finally throw

const enum import try

Как видно, слова из второй группы не заслуживают и толики внимания, потому что даже искусственно придумать для них использование в JavaScript весьма и весьма проблематично!

Мы славно встретились и славно разойдемся

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

<html>

<head>

<title>

JavaScript XAKEP

</title>

<script language="JavvaScript">

var pos=1;

var text='XAKEP is a very cool magazine...';

function scrollin1()

{

document.running.text.value=text.substring(0,pos);

if (pos>=text.length)

{

pos=1;

window.setTimeOut('scrollin2()',300);

}

else

{

pos++;

window.setTimeOut('scrollin1()',50);

}

}

function scrollin2()

{

document.running.text.value=text.substring(pos,text.length);

if (pos>=text.length)

{

pos=1;

window.setTimeOut('scrollin1()',100);

}

else

{

pos++;

window.setTimeOut('scrollin2()',50);

}

}

</script>

</head>

<body onLoad="scrollin1()">

<form name="running">

<center>

<input type="text" name="text" size=40>

</center>

</form>

</body>

</html>

Это мой тебе маленький презент. Ну, вот и все! Удачи тебе на ниве Ява-кодинга!


Спецвыпуск хакер, номер #002, стр. 002-060-1, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-1

Алекс Масанов (alex.masanov@mtu-net.ru)

Дарова, перец! :) Ну как, черпаешь инфу из нашего Х? То-то же. Ну, предположим, изваял ты себе крутую пагу с клевым дизигном, сидишь, и думаешь: чего б такого туда еще запихнуть-то? Чтоб оно и процесс загрузки паги не тормозило, и прикольно было. Я вот решил тебе мазу подкинуть: а почему бы тебе не написать гаму на Яве? Простую, конечно, но настоящую? Что, интересно? Тогда мотай на ус.

Давай изваяем следующую фишку: в игровом поле будет летать и отражаться от стенок импровизированный "мячик", а от нижней границы его надо отбить, перемещая ракетку с помощью мыши или клавиатуры. И чтобы жизнь малиной не казалась, после каждых пяти "возвратов" скорость мяча будет возрастать. По-русски это, по-моему, называлось "Арканоид" и было на писюках лет десять назад. Но поверь мне, пельмень, это было супер-круто и не растеряло своей крутизны даже сейчас. Посмотрим теперь, как это работает на JavaScript.

Ява наносит ответный удар

Вначале определимся со средством вывода на экран. Ясно, что с помощью кучи разных переменных можно описать процесс любой, на фиг, сложности. Но как увидеть результат всего этого: ведь JavaScript-то, козлина эдакая, не располагает средствами графического вывода на экран? Обойти этот подводный камень можно посредством использования формы и текстового поля для ввода (под этим громоздким названием я имею в виду тэг <TEXTAREA>). Самое важное при этом то, что текстовое поле (получая значение как показано ниже) само форматит полученную строку. Зырь, короче, на следующий пример:

Пример 1: Использование <TEXTAREA> для вывода:

<HTML>

<HEAD>

<TITLE>Пример 1</TITLE>

</HEAD>

<BODY>

<FORM name =TestForm1>

<TEXTAREA cols = 15 name = TestArea1 rows = 10>

</TEXTAREA>

</FORM>

</BODY>

<SCRIPT LANGUAGE=JavaScript>

<!--

var string ="Это длинная строка. При выводе она будет автоматически перенесена";

// Объявляем тестовую переменную

TestForm1.TestArea1.value=string; // Выводим в поле TestArea1 переменную string

//-->

</SCRIPT>

</HTML>

Объявляя в этом примере форму и текстовое поле, мы с тобой, доктор Перец, задаем параметр name (для FORM это TestForm1, для TEXTAREA - TestArea1). Посредством этого имени мы затем обращаемся к самому элементу: TestForm1.TestArea1.value=string. Заметь, что поле для ввода само выполняет перенос. То есть, если мы в поле размером 30х20 запишем строку размером в 600 символов, то поле само разобьет ее на 20 строк по 30 символов в каждой.

Таким образом, вывод нашей программы сводится к формированию одной длинной строки игрового поля, которая будет затем записана в TEXTAREA.

Теперь нам осталось только создать тот механизм, который позволит изменять данную строку так, чтобы все выглядело как настоящая игра. Что ж, приступим. Вначале создай 13 переменных (конечно, уже внутри тэга <SCRIPT language = JavaScript>), которые и будут отвечать за все внутренности игры:

Шаг 1: Инициализация переменных:

var fieldx=1; // X-координата игрового поля

var fieldy=1; // Y-координата игрового поля


Спецвыпуск хакер, номер #002, стр. 002-060-2, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-2

var objectx=2; // X-координата мячика

var objectdx=1; // Смещение мячика по оси X

var objecty=2; // Y-координата мячика

var objectdy=1; // Смещение мячика по оси Y

var racketpos=7; // Положение ракетки

var errorflag=0; // Если 0, то мяч отбит. Если единица, то мяч вовремя не отбит.

var score=0; // Набранные очки

var deltascore=1; // Количество отскоков

var waitdelay=200; // Задержка в миллисекундах между движениями мячика (скорость игры)

var onflag=0; // Если 0, то игра не начата. Единица, если уже идет.

var printscreen; // Главная переменная вывода

Теперь давай напишем вспомогательную функцию newgame, которая будет вызываться при нажатии кнопки "Start Game". Ее основная работа - проверка, не начата ли новая игра (т.е. удостовериться в том, что onflag равен 0), и в инициализации переменных для новой игры:

Шаг 2: Функция newgame:

function newgame(){ // Объявляем функцию newgame без аргументов

if(onflag==0){ // Т.е. если игра не начата, то...

errorflag=0; // Сбрасываем в значение по умолчанию

score=0; // Очевидно, что очков пока нет

objectx=objecty=2; // Задаем начальные координаты для мяча

fieldx=fieldy=1; // Задаем начальные координаты для поля

waitdelay=200; // Присваиваем значение по умолчанию

deltascore=0; // Нет игры - нет и отскоков

scoreboard.value="Score: "+score; //Записываем ноль в табло

main(); // Вызываем основную функцию

} //Конец блока if

} // Конец тела функции newgame

Теперь самое время определить функцию main. Это основная функция всей программы. Она проверяет, был ли правильно отбит мячик (т.е. значение errorflag), и если все в порядке, вызывает функции definefield (она наполняет главную переменную printscreen и выводит ее в текстовое поле) и definemovement (результатом работы которой является обсчет движения объектов - мячика и ракетки). Однако главное в main - рекурсивный вызов самой функции main через некоторый таймаут. Таким образом, весь процесс замыкается, и вся игра продолжается до момента ошибки игрока. Вот, короче, сама функция main:

Шаг 3: Функция main:

function main(){ // Объявляем функцию main без аргументов

if (errorflag!=1){ //Если ошибки нет, т.е. если мяч успешно отбит...

definefield(); // Вызываем функцию, отвечающую за прорисовку поля

definemovement(); // Вызываем функцию, отвечающую за движение объектов

onflag=1; // Обозначаем, что игра уже идет

setTimeout("main()",waitdelay); // Вызываем main через waitdelay миллисекунд

} //Конец блока if

else { //Фак! Мяч не был отбит!

printscreen="Косая козлина! Руки из задницы растут!!!!!!"; // Формируем строку сообщения

battleForm.battleTA.value=printscreen; // Выводим сообщение

onflag=0; //Устанавливаем в состояние "игры нет"

} // Конец блока else

} // Конец тела функции main

Перед описанием функций, выполняющих основную работу (definemovement и definefield), давай напишем еще пару вспомогательных для определения браузера и обработки клавиатуры:

Шаг 4: Вспомогательные функции:


Спецвыпуск хакер, номер #002, стр. 002-060-3, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-3

function testbrowser(){ // Объявляем функцию testbrowser без аргументов

if (window.navigator.userAgent.indexOf("MSIE")== -1) // Если в объекте информации о

// браузере userAgent нет строки MSIE, то это - не Internet Explorer!

alert ("Please use IE for this page!"); // Используем метод alert для предупреждения

} // Конец тела функции testbrowser

Реально эта функция запрашивает строку userAgent, возвращаемую браузером, и, если значение "MSIE" не найдено, выдается предупреждающее сообщение. Вызывается при загрузке страницы в теге <BODY onload = testbrowser()>.

Теперь разберемся с клавиатурой - ведь нужно, чтобы можно было управлять ракеткой с помощью стрелок влево-вправо (в следующем номере Х расскажу, как подключить к игре джойстик с Форс-Фидбэком). :)

function keyboard(){// Объявляем функцию keyboard без аргументов

if (window.event.keyCode==37 && racketpos>1) racketpos--;

// Если нажата кнопка влево, и ракетка не у левого края, двигаем ее влево

if (window.event.keyCode==39 && racketpos<15) racketpos++;

// Аналогично: нажата кнопка вправо, и ракетка не у самого края, двигаем ее вправо

} // Конец тела функции keyboard

Здесь мы запрашиваем код события (т.е. нажатой кнопки) в формате Unicode. В этом формате 37 соответствует "стрелке влево", а 39 - "стрелке вправо". Логическое И (&&) позволяет сдвигать ракетку (т.е. увеличивать или уменьшать на единицу ее координату), только если она не находится на краю поля. Так как ракетка занимает две позиции на поле (==), всего возможно только 15 ее положений (ширина поля равна 30).

Функция keyboard будет вызываться при каждом нажатии клавиши (<BODY onkeydown=keyboard()>).

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

Результатом ее работы будет строка длинною в 600 символов (TEXAREA я предлагаю задать 30х20), которая затем будет записана в наше основное текстовое поле. Поскольку последняя строка, содержащая "ракетку", не вполне обычна, логичным решением будет разбить функцию на два блока: первый отвечает за наполнение первых 570 значений (19 строк), а второй - только за последнюю строку. Таким образом, для первых 19 строк: если значения переменных "мячика" и поля по X и Y совпадают, то пишем "o" (это наш мячик), иначе - "." (точку, т.е. ничего нет). Для последней строки: если совпали координата X строки и переменная положения ракетки racketpos, то пишем "==" (ракетку), иначе - ".." (две точки - наш стандартный наполнитель поля). В конце функции необходимо осуществить вывод нашей переменной printscreen.

Вот как все это реализуется на практике:

Шаг 5: Функция definefield:

function definefield(){ // Объявляем саму функцию и в который раз без аргументов

printscreen=""; // Обнуляем переменную, отвечающую за прорисовку поля

fieldx=fieldy=1; // Начинаем поиск мячика с левого верхнего угла поля

// Блок 1:

while (fieldy<20){ // Для каждой строки по 19-ю включительно:

for (fieldx=1; fieldx<31; fieldx++){ // Для каждого элемента строки сравниваем:


Спецвыпуск хакер, номер #002, стр. 002-060-4, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-4

if (objectx==fieldx && objecty==fieldy) printscreen+="o";

// Если совпали координаты, то на этом месте - мячик

else printscreen+="."; // Иначе - пусто

} // Конец цикла for - вся строка просмотрена в поисках мячика

fieldy++; // Берем следующую строку и все сначала, пока не исчерпаем все 19 строк

} // Конец цикла while - все 19 строк пройдены

// Блок 2 для последней 20-ой строки:

for (fieldx=1; fieldx<16; fieldx++){ // Для каждого второго элемента (Всего 15 позиций!)

if (racketpos==fieldx) printscreen+="=="; // Если совпали, значит рисуем ракетку

else printscreen+=".."; // Иначе - пусто

} // Конец цикла for - где-то нарисовали ракетку

battleForm.battleTA.value=printscreen; // Рисуем наше поле в TEXTAREA

} // Конец функции definefield

Теперь осталось рассмотреть последнюю функцию definemovement, которая отвечает за изменение состояния всех объектов, т.е. их движение. Каждый раз, когда мы обращаемся к этой функции, мячик, ясный пень, должен двигаться. Иными словами, координата мячика изменяется по X и Y. Если, например, он движется вниз и вправо, то обе координаты возрастают. Если вверх и влево - убывают. Ясно, что возможны и два комбинированных случая (вправо вверх и влево вниз).

Таким образом, чтобы задать передвижение мяча, необходимо изменить на противоположное направление его приращения в четырех пиковых границах - вблизи стен нашей коробки. С тремя стенками все просто - только и дела что проверить координату мяча и изменить знак у objectdx или objectdy. Четвертый случай (когда необходимо отслеживать и позицию ракетки) более сложен:

Ракетка занимает два элемента поля и, следовательно, имеет 15 возможных положений на нем. Будем считать, что ракетка может отражать мяч своими "углами". Допустим, что положение ракетки сейчас равно 7. Тогда занимаемые ею поля, как ты шаришь, 13 и 14. Теперь займемся отражением "углами". Если мяч падает на ракетку слева, то он должен отражаться и в колонке 12 (это и будет похоже на то, что ракетка отразила мяч своим левым углом). Соответственно, если он падает справа, то правый угол будет в колонке 15. Следовательно, условие отражения мяча может быть задано нами в виде: если мяч движется вправо и X-координата мяча равна позиции ракетки, умноженной на два, или позиции ракетки, умноженной на два - 1, или позиции ракетки, умноженной на два - 2, то мяч надо отразить. Используя логическое ИЛИ ( оператор || ) получаем: if (objectdx > 0 && ( racketpos*2-2 == objectx || racketpos*2 - 1 == objectx || racketpos*2 == objectx )) objectdy = -objectdy. Теперь направление изменено и мяч отразился. Вариант для движения мяча влево и остальной необходимый код приведен уже в самой функции:

Шаг 6: Функция definemovement:

function definemovement(){ // Объявляем функцию без аргументов

// Сразу самый сложный случай: мяч на предпоследней горизонтали

if (objecty>18){ // Внимание!

if (objectdx>0 && (racketpos*2-2==objectx || racketpos*2==objectx || racketpos*2-1==objectx))

// Если мяч движется вправо и находится в зоне ракетки


Спецвыпуск хакер, номер #002, стр. 002-060-5, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-5

{

objectdy=-objectdy; // Мяч отражается

score++; // Очки возрастают

}

if (objectdx<0 && (racketpos*2-1==objectx || racketpos*2==objectx ||racketpos*2+1==objectx))

// Аналогично: если мяч движется влево и находится в зоне ракетки

{

objectdy=-objectdy; // Мяч отражается

score++; // Очки возрастают

}

deltascore++; // Количество отскоков увеличилось на единицу

if (deltascore==5){ // Если мяч отскочил уже 5 раз, ускорим игру!

deltascore=0; // Сбросили счетчик отскоков на ноль

waitdelay=waitdelay*0.75; // Уменьшили задержку, т.е. ускорили на 25%

}

if (errorflag!=1)scoreboard.value="Score: "+score; // Вывели очки в табло, если все ОК

} // Конец блока if, проверявшего, находится ли мяч на последней горизонтали

// Теперь три легких случая - мяч у трех стенок:

if (objecty<2) objectdy=-objectdy; // Мяч у верхней стенки, меняем направление

if (objectx>29)objectdx=-objectdx; // Мяч у правой стенки, меняем направление

if (objectx<2) objectdx=-objectdx; // Мяч у левой стенки, меняем направление

// Осуществляем движение:

objectx+=objectdx; // Двигаем объект по X

objecty+=objectdy; // Двигаем объект по Y

if (objecty>19) errorflag=1; // Ошибка! Мяч не был вовремя отражен!

} // Конец тела функции

Вот, собственно, и все! Теперь тебе остается со спокойным сердцем закрыть тэг <SCRIPT> и создать внутри <BODY> с помощью стандартных тэгов кнопочку Start Game (onclick=newgame()), форму (name=battleForm) и внутри ее TEXTAREA размером 30 на 20 (name=battleTA cols=30 rows=20). Не забудь про табло <INPUT name=scoreboard>, и твоя первая игра полностью готова!

Напоследок хочу привести код полного HTML-файла со всем необходимым и пожелать тебе новых игр на JavaScript!

Листинг финального файла squash.htm:

<!- Между этих строк расположены комментарии для HTML

Cтандартный заголовок

-->

<HTML>

<HEAD>

<TITLE>Squash!</TITLE>

</HEAD>

<!-

Собственно, главный JS-сценарий

//-->

<SCRIPT LANGUAGE=javascript>

<!--

var fieldx=1; // X-координата игрового поля

var fieldy=1; // Y-координата игрового поля

var objectx=2; // X-координата мячика

var objectdx=1; // Смещение мячика по оси X

var objecty=2; // Y-координата мячика

var objectdy=1; // Смещение мячика по оси Y

var racketpos=7; // Положение ракетки

var errorflag=0; // Если 0, то все ОК. Единица, если мяч вовремя не отбит

var score=0; // Набранные очки

var deltascore=1; // Количество отскоков

var waitdelay=200; // Задержка в миллисекундах между движениями мячика (скорость игры)

var onflag=0; // Если 0, то игра не начата. Единица, если уже идет

var printscreen; // Главная переменная вывода

function newgame(){ // Объявляем функцию newgame без аргументов

if(onflag==0){ // Т.е. если игра не начата, то...

errorflag=0; // Сбрасываем в значение по умолчанию

score=0; // Очевидно, что очков пока нет

objectx=objecty=2; // Задаем начальные координаты для мяча

fieldx=fieldy=1; // Задаем начальные координаты для поля


Спецвыпуск хакер, номер #002, стр. 002-060-6, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-6

waitdelay=200; // Присваиваем значение по умолчанию

deltascore=0; // Нет игры - нет и отскоков

scoreboard.value="Score: "+score; //Записываем ноль в табло

main(); // Вызываем основную функцию

} //Конец блока if

} // Конец тела функции newgame

function main(){ // Объявляем функцию main без аргументов

if (errorflag!=1){ //Если ошибки нет, т.е. если мяч успешно отбит...

definefield(); // Вызываем функцию, отвечающую за прорисовку поля

definemovement(); // Вызываем функцию, отвечающую за движение объектов

onflag=1; // Обозначаем, что игра уже идет

setTimeout("main()",waitdelay); // Вызываем main через waitdelay миллисекунд

} //Конец блока if

else { //Ошибка! Мяч не был отбит!

printscreen="Вы жестоко ошиблись!!!!!"; // Формируем строку сообщения

battleForm.battleTA.value=printscreen; // Выводим сообщение

onflag=0; //Устанавливаем в состояние "игры нет"

} // Конец блока else

} // Конец тела функции main

function testbrowser(){ // Объявляем функцию testbrowser без аргументов

if (window.navigator.userAgent.indexOf("MSIE")== -1) // Если в объекте информации о

// браузере userAgent нет строки MSIE, то это - не Internet Explorer!

alert ("Please use IE for this page!"); // Используем метод alert для предупреждения

} // Конец тела функции testbrowser

function keyboard(){ // Объявляем функцию keyboard без аргументов

if (window.event.keyCode==37 && racketpos>1) racketpos--;

// Если нажата кнопка влево и ракетка не у левого края, двигаем ее влево

if (window.event.keyCode==39 && racketpos<15) racketpos++;

// Аналогично: нажата кнопка вправо и ракетка не у самого края, двигаем ее вправо

} // Конец тела функции keyboard

function definefield(){ // Объявляем саму функцию и в который раз без аргументов

printscreen=""; // Обнуляем переменную, отвечающую за прорисовку поля

fieldx=fieldy=1; // Начинаем поиск мячика с левого верхнего угла поля

// Блок 1:

while (fieldy<20){ // Для каждой строки по 19-ю включительно:

for (fieldx=1; fieldx<31; fieldx++){ // Для каждого элемента сравниваем:

if (objectx==fieldx && objecty==fieldy) printscreen+="o";

// Если совпали координаты, то на этом месте - мячик

else printscreen+="."; // Иначе - пусто

} // Конец цикла for - вся строка просмотрена в поисках мячика

fieldy++; // Берем следующую строку, и все сначала, пока не исчерпаем все 19 строк

} // Конец цикла while - все 19 строк пройдены

// Блок 2 для последней 20-ой строки:

for (fieldx=1; fieldx<16; fieldx++){ // Для каждого второго элемента (всего 15 позиций!)

if (racketpos==fieldx) printscreen+="=="; // Если совпали, значит рисуем ракетку

else printscreen+=".."; // Иначе - пусто

} // Конец цикла for - где-то нарисовали ракетку

battleForm.battleTA.value=printscreen; // Рисуем наше поле в TEXTAREA "battleTA"

} // Конец функции definefield

function definemovement(){ // Объявляем функцию без аргументов

// Сразу самый сложный случай: мяч на последней горизонтали

if (objecty>18){ // Внимание! Мяч на предпоследней строке!

if (objectdx>0 && (racketpos*2-2==objectx || racketpos*2==objectx || racketpos*2-1==objectx))


Спецвыпуск хакер, номер #002, стр. 002-060-7, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-7

// Если мяч движется вправо и находится в зоне ракетки

{

objectdy=-objectdy; // Мяч отражается

score++; // Очки возрастают

}

if (objectdx<0 && (racketpos*2-1==objectx || racketpos*2==objectx ||racketpos*2+1==objectx))

// Аналогично: если мяч движется влево и находится в зоне ракетки

{

objectdy=-objectdy; // Мяч отражается

score++; // Очки возрастают

}

deltascore++; // Количество отскоков увеличилось на единицу

if (deltascore==5){ // Если мяч отскочил уже 5 раз, ускорим игру!

deltascore=0; // Сбросили счетчик отскоков на ноль

waitdelay=waitdelay*0.75; // Уменьшили задержку, т.е. ускорили на 25%

} // Конец блока подсчета отскоков

if (errorflag!=1)scoreboard.value="Score: "+score; // Вывели очки в табло, если все ОК

} // Конец блока if, проверявшего, находится ли мяч на последней горизонтали

// Теперь три легких случая - мяч у трех стенок:

if (objecty<2) objectdy=-objectdy; // Мяч у верхней стенки, меняем направление

if (objectx>29)objectdx=-objectdx; // Мяч у правой стенки, меняем направление

if (objectx<2) objectdx=-objectdx; // Мяч у левой стенки, меняем направление

// Осуществляем движение:

objectx+=objectdx; // Двигаем объект по X

objecty+=objectdy; // Двигаем объект по Y

if (objecty>19) errorflag=1; // Мяч не был вовремя отражен!

} // Конец тела функции

//-->

</SCRIPT>

<!-

Задаем стиль для подчеркивания линков

//-->

<STYLE>

<--

A:hover{text-decoration: underline; color: #FF0000}

A:link{text-decoration: none; color: #0000FF)

-->

</STYLE>

<!-

Начинается документ

//-->

<BODY onload=testbrowser() onkeydown=keyboard()>

<!-

Создаем форму и поле текстового ввода 30 на 20. Имена важны!

//-->

<FORM name=battleForm>

<TEXTAREA cols=30 name=battleTA rows=20>

Добро пожаловать в самую крутую на свете игру!

Перемещая курсор мыши по

линкам внизу (==) или с помощью

стрелок отражай

мячик.

Возвращенный мяч приносит очко.

Каждые 5 очков скорость мяча

возрастает.

Enjoy!

</TEXTAREA>

</FORM>

<P>

<!-

Линки под игровым полем. При наведении мыши изменяется переменная racketpos и переводится ракетка. Фонт специально подобран в ширину TEXTAREA

//-->

<FONT face=areal size=-1>

<A href="\" onmouseover="racketpos=1">==</A>

<A href="\" onmouseover="racketpos=2">==</A>

<A href="\" onmouseover="racketpos=3">==</A>

<A href="\" onmouseover="racketpos=4">==</A>

<A href="\" onmouseover="racketpos=5">==</A>

<A href="\" onmouseover="racketpos=6">==</A>

<A href="\" onmouseover="racketpos=7">==</A>

<A href="\" onmouseover="racketpos=8">==</A>

<A href="\" onmouseover="racketpos=9">==</A>

<A href="\" onmouseover="racketpos=10">==</A>

<A href="\" onmouseover="racketpos=11">==</A>

<A href="\" onmouseover="racketpos=12">==</A>

<A href="\" onmouseover="racketpos=13">==</A>

<A href="\" onmouseover="racketpos=14">==</A>

<A href="\" onmouseover="racketpos=15">==</A>

<!-

Две пустые строки, чтобы отделить табло от игрового поля


Спецвыпуск хакер, номер #002, стр. 002-060-8, Гама на JavaScript прямо в онлайне

Гама на JavaScript прямо в онлайне

Спецвыпуск хакер, номер #002, стр. 002-060-8

//-->

<BR>

<BR>

<!-

Создаем табло. Имя важно!

//-->

<INPUT name=scoreboard style="HEIGHT: 25px; WIDTH: 81px" value=Score: >

</INPUT>

</FONT>

<!-

Три пустые строки, чтобы отделить кнопку от табло

//-->

<BR>

<BR>

<BR>

<!-

Кнопка Start

//-->

<INPUT type=button value="Start Game" onclick=newgame()></INPUT>

<!-

Конец документа

//-->

</BODY>

</HTML>


Спецвыпуск хакер, номер #002, стр. 002-068-1, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-1

Ramhak O`hady (konung@ic.ru)

У кого сейчас нет своей домашней странички? Да и не просто странички, а обычно целого сайта с подразделениями и хитрой навигацией. Каждый при этом норовит извратиться похитрее и забацать что-нибудь этакое - так, практически на всех страницах уже можно увидеть гостевые книги и даже свои домашние чаты. Я уж не говорю о таких, как оказалось, банальностях, как WWW борды. Как это сделать? Примерно таким вопросом задается каждый новичок Сети. Да очень просто! Примерно таким ответом отмазываются те, кто уже имеет опыт работы с CGI, а именно на этом ките о трех черепашьих ногах :-) стоит вся эта лабуда.

Что такое CGI?

CGI - это аббревиатура Common Gateway Interface. Означают эти магические слова примерно следующее - это общий стандарт шлюзов приема-передачи документов. Единый шлюзовой интерфейс, короче. Главной задачей этого стандарта является создание одинаковых условий работы с серваком юзеров и другими серваками вне зависимости от того, под какой операционкой стоит сервак, что это вообще за сраный сервак и какой там фиговый админ. Короче, по-русски - задача СиДжиАй - сделать так, чтоб все у всех работало. :) Работа стандарта CGI обеспечивается с помощью шлюзов и скриптов.

CGI-скрипт - это прога, написанная на любом из доступных сегодня языков, начиная с васика, перемежаясь трубопоскакалем и заканчивая bat-файлами DOS или командами текстового редактора в Юниксах.

CGI-шлюз - это CGI-прога, что называется, "в действии". То есть шлюзом называют CGI-скрипт, который сервак использует для выдачи информации клиенту-юзеру, и сам процесс обмена данными типа "а вот у вас тут HTML`ка лежала", "да-да, лежала где-то здесь... а! вот она! держите!".

Магические пассы руками - как это работает?

Вкратце весь процесс происходит так - как только юзер скажет своему браузеру урл какого-нибудь сервера, тот отошлет на этот сервер специальный запрос. Сервер, получив запрос и решив, что нужен запуск CGI, соответственно запускает CGI-программу, заранее заготовленную продуманным владельцем сайта, либо сам отдает страничку по запросу на растерзание всяким Нафигаторам и Е-мое Эксплорерам.

Урла, как известно, состоит из указания протокола, по которому будет производиться запрос (http:// или ftp://, или может быть gopher://) :-) собственно адреса сервера (какой-нибудь www.xxx2000.ru) плюс, возможно, конкретного файла на этом сервере в конкретном каталоге (http://zdes.piva.net/pivo/sorta.htm). Чтобы использовать шлюз, надо к нему обратиться, то есть, на самом деле, попросить у сервера одну из его CGI-программ. Обычно все программы (скрипты - их еще иногда называют сценариями) такого рода хранятся в специально отведенной для этого директории, которую по умолчанию называют cgi-bin. И все скрипты обычно имеют расширение .CGI. Учитывая все сказанное, вызов может быть таким:

http://vasya.pupkin.org/cgi-bin/guestbook.cgi

Все это, конечно, хорошо. Но тут явно чего-то не хватает. Именно так и решили создатели CGI. И включили в стандарт правила передачи параметров скриптам. То есть не нужно писать много-много скриптов для того, чтобы просто перелистывать страницы в гостевой книге - достаточно указать соответствующие параметры, и все будет "на ура". Передача параметров осуществляется через тот же урл, которым вызывается скрипт. Для этого сам урл отделяется от параметров знаком вопроса "?", параметры пишутся в виде "имя=значение", а между ними ставится знак амперсанд "&":


Спецвыпуск хакер, номер #002, стр. 002-068-2, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-2

http://vasya.pupkin.org/cgi-bin/guestbook.cgi?mycoolparameter=thiscoolvalue&pagetoshow=1

Есть еще некоторые ограничения, с которыми нужно бороться - нельзя указывать никакие символы, кроме аглицких букв, цифр да знака подчеркивания. Плюсы, минусы, русские буквы и т.д. представляются в виде %xx, где xx - это шестнадцатиричное значение, соответствующее символу в стандартной таблице оных. Плюсы заменяются на пробелы. Таким образом, вместо "Я тут!" получится "%FF+%F2%F3%F2!". Некоторые браузеры автоматически преобразовывают введенные строки с пробелами в такой формат. Но в любом скрипте это нужно будет преобразовывать самостоятельно. :-( Ну да это не проблема, не парься. Ничего страшного.

Чтобы скрипту было не скучно, пока он работает, сервачок устанавливает "переменные окружения". С их помощью можно, например, попробовать узнать, откуда пришел факин юзверь (его IP - если он, конечно, не пользуется анонимными прокси), метод, которым был послан запрос (их всего два - см. ниже), собственно передаваемые данные и их длину (в случае, когда используется метод передачи "POST").

Методов, которыми можно запросить данные через шлюз, всего два. Их называют "GET" и "POST". Первый метод более компактный, так как все необходимые данные и параметры посылаются прямо в строке с адресом шлюза. Естественно, что уже для гостевой книги и форума такая форма не годится - слишком большое сообщение, запхнутое в строку браузера, убьет и браузер, и желание юзера заходить на этот сайт еще когда-нибудь, так что это не прикольный метод, и к любви не располагает. Второй метод ("POST") позволяет передавать большие объемы данных, ведь для этого не используется буфер браузера. Передача осуществляется через файловые дескрипторы стандартных устройств. Звучит как заупокойная, но на самом деле все просто как мертвая лошадь. Чтобы получить данные, нужно узнать их размер (из одной из переменных окружения) и просто считать с консоли (INPUT в бейсике, blockread в Pascal, fread в C) нужное их количество. Это прикольно, удобно и, несмотря на сложность изложения, легко осваивается - как два байта перекачать.

Доктор, я буду жить? - А зачем?

К чему все эти описания стандартов и способов передачи параметров без, собственно, практики?! Но для начала скажу немного о хлебе насущном. Большинство фришных хостов, где юзерам без разбора выдают халявные странички и позволяют работать со своими собственными CGI-скриптами, поддерживают только скрипты, написанные на Perl`е, реже - на Python`е. Да и писать на этих языках, специально предназначенных для работы с текстом, гораздо удобнее, чем на Pascal или C. Кроме того, не существует Perl и Python компиляторов, поэтому все скрипты будут храниться в своем исходном виде, что иногда бывает удобно (не нужно разделять исходники и бинарники). :-) Из этих двух лэнгвичей пока что, видимо, стоит выбрать Perl. Почему? Просто большинство хостов обеспечивает доступ к Perl`у по умолчанию и только некоторые (правда, их число растет) дополнительно позволяют использовать скрипты, написанные на Python`е.


Спецвыпуск хакер, номер #002, стр. 002-068-3, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-3

Итак, готовься! Держись крепче, не расплескай пиво. Собственно скрипты (бурные аплодисменты в зале, чей-то нервный кашель, характерная отрыжка и сигаретная вонь)! CGI-программа в виде *.cgi должна начинаться со строки, указывающей, на каком именно языке она написана. Для этого пишут примерно такую строчку:

#!/usr/local/bin/perl

Здесь /usr/local/bin - это каталог, в котором находится интерпретатор Perl`а. Обычно, что в каком каталоге находится, можно узнать из FAQ, который предоставляет место под твою хоумпагу. Дальше, чтобы что-то вывести - отдать браузеру, нужно сначала вывести специальный заголовок, по которому браузер или еще какой юзерский клиент определит, что именно ему отдают:

print "Content-type: text/html\n\n";

Это означает, что скрипт будет отдавать HTML-страничку. Например, вот так:

#!/usr/local/bin/perl

print "Content-type: text/html\n\n";

print "<html><body>\n";

print "<h1>Это скрипт!</h1>\n";

print "</body></html>";

Результат налицо - то есть на лице браузера. Можно отдавать просто текстовые файлы - для этого в "Content-type" нужно указать не "text/html", а "text/plain":

print "Content-type: text/plain\n\n";

Здесь же можно указать кодировку документа:

print "Content-type: text/plain; charset=ISO-8859-4\n\n";

Иногда очень удобно, в зависимости от какого-то события, либо выдавать страничку, либо перенаправлять пользователя на другой сайт (или другую страничку). Для этого можно воспользоваться заголовком Location:

print "Location: http://www.another site.com\n\n";

И сервер просто перекинет браузер на другой сервер. Можно указать также какой-то документ "поблизости". Тогда просто будет обработан он - без переброски:

print "Location: /../pages/index.htm\n\n";

Можно отдавать не только странички и текстовые файлы, но и бинарники - архивы, Mp3-шки и так далее. Для этого тоже нужно указать свой заголовок:

print "Accept-Ranges: bytes\n";

print "Content-Length: $size\n";

print "Content-Disposition: filename=$filename\n";

print "Content-type: bin/bin\n\n";

В этом примере в переменной $size находится размер файла, а в $filename - точное расположение файла, который нужно скормить браузеру. Что, тяжко идет? Ничего, пельмень, немного практики, и все будет круто.

Параметры

Приведу небольшой пример, как правильно обработать параметры в Perl`е. Если что непонятно - милости прошу читать Learning Perl, писать мне письма (расскажу ЕЩЕ подробней, что к чему) или посещать www.citforum.ru - там же, кстати, есть и подробное описание "спецификации клиент-сервер шлюзов CGI":

if ($ENV{"REQUEST_METHOD"} eq "GET") {

$data = $ENV{"QUERY_STRING"}

}

else {


Спецвыпуск хакер, номер #002, стр. 002-068-4, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-4

read(STDIN, $data, $ENV{"CONTENT_LENGTH"});

}

@_ = split /&/, $data;

foreach (@_) {

tr/+/ /;

s/%(..)/pack("c",hex($1))/ge;

($key, $value) = split /=/, $_;

$params{lc $key} = $value;

}

}

После отработки этого фрагмента в $params {имя параметра} будет стоять соответственное значение. Если в урле просто указать имя параметра, не указывая значения, то наличие такого параметра можно проверить так:

if (exists $params{имя параметра}) {

такой параметр есть.

}

else {

не задан

}

Исходник одинаково хорошо скушает и GET-метод (применяемый для кодировки введенных урлов), и POST-метод (которым обычно пользуются, когда отправляют данные, полученные из форм - см. HTML тэг <form>). Здесь, в методе POST, используется уже описанное мной чтение параметров с помощью read:

read(STDIN, $data, $ENV{"CONTENT_LENGTH"});

Доступ ко всем переменным окружения в Perl`е можно получать из $ENV{имя переменной окружения}. Чтобы узнать, какие вообще переменные установлены - имеют значения, достаточно запустить скрипт:

#!/usr/local/bin/perl

print "Content-type: text/plain\n\n";

for (keys %ENV) {

print "$_ = ${ENV{$_}}\n";

}

Как я уже говорил, с помощью переменных окружения можно узнать многое - только на пароли на Инет не рассчитывай. ;-) Например, если кто-то зашел на страничку, можно узнать его IP-шник - достаточно посмотреть на содержимое ENV{"REMOTE_ADDR"}. А если он, редиска, заюзал прокси, то можно попытаться определить, какой - смотри $ENV{"HTTP_VIA"} (некоторые прокси еще добавляют строчку ",via [proxyaddr]" к $ENV{"HTTP_USER_AGENT"}. А если прокси не анонимный, то можно и IP похакать - $ENV{"HTTP_X_FORWARDED_FOR"}.

Тестирование скриптов

После того как скрипт написан, его бы надо опробовать - но лезть каждый раз в Инет, качать его на сервер, запускать оттуда... Мягко говоря, неудобно. Но есть способ лучше! (с) Твикс - две палочки хрустящих тампонов Тампакс! :-) Можно поставить себе свой маленький веб-сервер, который не будет иметь доступа в Инет, а будет лишь сподручным средством, позволяющим быстренько (не отходя от кассы) :-) проверить скрипт. Я советую поставить Apache 1.3.6 - он наиболее устойчивый (у меня за почти полгода не упал ни разу) и ставится буквально за 20 минут. Доку про то, что и где крутить и откуда качать, можно взять на www.apache.ru.

Кроме установки веб-сервера есть также и специальные программы, которые это дело эмулируют, подготавливая переменные окружения и запросы. Но это уже изврат. :-)

Примеры

Замечательные скрипты можно взять со множества сайтов совершенно бесплатно - примером может служить www.scripts.com. Там можно найти и гостевые книги, и чаты, и много чего еще практически на всех популярных ныне в народе языках программирования. Там есть даже примеры на командном языке юнихового шелла. :-o

Вот парочка примеров, взятых оттуда:

ГОСТЕВАЯ КНИГА:

XXXXXXXXXXXXXXXXXXXXXXXXX

#!/usr//bin/perl

use Fcntl;

use CGI;

use AnyDBM_File;

use FreezeThaw qw(freeze thaw);

my $page = CGI->new;

my %comments;

umask 0;

my $file = $page->param('file') || 'guest';

tie %comments, "AnyDBM_File", $file, O_RDWR | O_CREAT, 0777;


Спецвыпуск хакер, номер #002, стр. 002-068-5, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-5

if ($page->param('new_user'))

{

my $rec = {};

my $now = time;

$rec->{'user'} = $page->param('new_user');

$rec->{'email'} = $page->param('new_email');

$rec->{'text'} = $page->param('new_text');

$comments{$now} = freeze $rec;

$page->param('new_user', "");

$page->param('new_email', "");

$page->param('new_text', "");

}

print $page->header, "\n";

if ($page->param('template'))

{

my $err = 0;

my $template = "$ENV{'DOCUMENT_ROOT'}/".$page->param('template');

open(TEMPLATE, $template) || do {$err = $!};

if ($err)

{

&display_default($template, $err);

}

else

{

while (<TEMPLATE>)

{

if (/!!FORM!!/)

{

&display_form;

}

elsif (/!!COMMENTS!!/)

{

&display_comments;

}

else

{

print;

}

}

}

}

else

{

&display_default;

}

sub display_form

{

print $page->start_form(-action=>'ms-guest.pl'), "\n";

print $page->hidden(-name=>'template', -value=>$page->param('template'))

if defined($page->param('template'));

print $page->hidden(-name=>'file', -value=>$file);

print $page->p('Your Name: ',

$page->textfield(-name=>new_user, -size=>30)), "\n";

print $page->p('Your Email: ',

$page->textfield(-name=>new_email,

-size=>30,

-default=>"$ENV{'USER'}\@$ENV{'REMOTE_HOST'}")), "\n";

print $page->p('Your Comments:',

$page->br,

$page->textarea(-name=>new_text,

-rows=>5, -cols=>50)), "\n";

print $page->submit(-value=>'Submit Entry'), "\n";

print $page->reset, "\n";

print $page->end_form, "\n";

}

sub display_comments

{

my ($k, $v);

my $comments = "";

my $then;

my $thing;

foreach $k (reverse sort keys %comments)

{

$v = $comments{$k};

$then = localtime $k;

($thing) = thaw($v);

$thing->{text} =~ s/</</;

$thing->{text} =~ s/\n/<BR>/;

$comments .= $page->p($page->strong($thing->{user}),

$page->em($then),

$page->br,

$page->a({-href=>"mailto:$thing->{email}"},

$thing->{email}),

$page->br,

$thing->{text})

. $page->hr . "\n";

}

print $comments;

}

sub display_default

{

print $page->start_html(-title=>'Guest Book'), "\n";

print $page->h1('Guest Book');

if (@_)

{

print $page->p("Can\'t open template: $_[0]. Error: $_[1]."), "\n";

}

&display_form;

print $page->hr, "\n";

&display_comments;

print $page->address('ms-guest v1.2',

$page->br,

'© 1998,',

$page->a({href=>'http://www.mag-sol.com'},


Спецвыпуск хакер, номер #002, стр. 002-068-6, CGI - Common Gateway Interface

CGI - Common Gateway Interface

Спецвыпуск хакер, номер #002, стр. 002-068-6

'Magnum Solutions Ltd.')), "\n";

}

XXXXXXXXXXXXXXXXXXXXXXXXX

СЧЕТЧИК:

XXXXXXXXXXXXXXXXXXXXXXXXX

#!/bin/ksh

# This script creates a file showing the number

# of times it has been executed. Useful for

# background counts of html accesses and the like.

# Written by Jay Hennigan (jay@west.net)

# Released to the public domain 1996.

echo

typeset -i counter=1

outfile=../public_html/$1

if test -s $outfile

then

read counter < $outfile

counter=$counter+1

fi

echo $counter > $outfile

XXXXXXXXXXXXXXXXXXXXXXXXX

Так что все просто. Не боги, как говорится, горшки обжигают.

Красная армия всех сильней!

Ну что, перец, проникся? Давай, хватай клаву и вперед - писать скрипты Единого Шлюзового. Поверь, это вовсе не так сложно, как кажется на первый взгляд. Так что вперед и в бой - а я, Кутузову подобно, посмотрю-ка лучше на битву с вершины холма. Пиши, если что.


Спецвыпуск хакер, номер #002, стр. 002-076-1, Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Спецвыпуск хакер, номер #002, стр. 002-076-1

Геннадий Крэк-о-делов (Dr.Cod@xakep.ru)

Благодарности: Во время написания этой статьи один придурок вырубил свет во всем доме. Отдельное спасибо тебе, придурок, после этого накрылся даже мой телефон. Еще спасибо фирме Macromedia, которая продукт сделала, и ребятам, которые его сперли. И еще большое спасибо антизависатору, который дружно повисал вместе с этим продуктом.

Дедка с кошкой жили-были и такого народили...

Ты чуть-чуть понимаешь HTML? Не понимаешь вовсе? Ну и не надо. Дримувер будет писать код за тебя. По уровню его интерфейс походит на издательскую систему, но простому пользователю разобраться вполне реально. Если ты решил профессионально заняться WEB-дизайном, то Dreamweaver 3.0 не для тебя, профессионалы пишут вручную. И не надо на меня орать, что Дримувер сильно время экономит. Неправда! Я руками напишу быстрее и лучше.

Про базовую настройку паги

В день летнего солнцестояния возлюбил дедка репку, да так, что никто ее жрать потом не стал... Ах да, традиционные настройки страницы. Там ты можешь настроить кодировку, в которой будет выводиться твоя пага. Советую использовать для начала KOI-8. Цвета топтаных и нетоптаных ссылок, цвет фона, фоновый рисунок, поля и, конечно, заголовок всей страницы - все это настройки твоей странички.

Чтобы можно было точно просчитать расположение объектов на экране, есть линеечки и сеточка. Можно настроить будущую страничку на нужное разрешение экрана. А рядышком отражается скорость вывода изображения в секах. Это очень полезно, ведь если перегрузишь пагу графикой, она будет медленно грузиться, и никто на нее ходить не будет.

Про таблички

И пришел дед к золотой рыбке, и повяли уши его от рыбьего мата... Объекты на любой хорошо сделанной странице привязаны к таблице. Разные браузеры могут показать один и тот же документ десятью способами. Чтобы форматирование документа не сильно изменялось при смене браузера, используют таблицы.

Если HTML-редактор хорошо работает с таблицами, то, вероятно, его можно терпеть. Давай проверим Dreamweaver моим любимым тестом на спиральки. Нет, не на противозачаточные. На обычные. Чтобы построить табличку в виде спирали, мне понадобилось 10 минут, вручную я бы писал такую минут 20. Кстати, если ты считаешь себя крутым HTML-программистом, попробуй запрограммировать такую таблицу вручную. :)

Все очень просто и понятно. В правом меню Дримувера стандартные объекты, такие как таблицы, рисунки и пр. А в нижнем меню множество настроек выбранного объекта. Особенно мне нравится палитра. Ты можешь выбрать цвет из палитры, можешь взять цвет пипеткой с любого места рабочего стола. А если ни один не подходит, то можешь намешать любой цвет в RGB.

Состояние нижнего меню зависит от того, куда ты поместил курсор, т.е. какой объект (таг) ты сейчас редактируешь. Можно редактировать таблицу целиком, а можно поставить курсор на конкретную клетку и редактировать ее. В меню появляются настройки всех стандартных атрибутов выделенного тага. Для таблицы это: ширина, высота, расстояния между ячейками, фоновый цвет и рисунок, цвет бордюров таблицы и их толщина. Тут же можно поставить ссылку (якорь).


Спецвыпуск хакер, номер #002, стр. 002-076-2, Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Спецвыпуск хакер, номер #002, стр. 002-076-2

Ты можешь, ясный пень, редактировать выделенный таг и вручную тоже. На картинке имя редактируемого тага высвечивается в левом нижнем углу. Есть возможность использовать встроенный текстовый редактор HTML, причем Дримувер сам поставит курсор в нужное место. Т.е. он сам отыщет таг, соответствующий выделенному объекту. Есть возможность импортировать в HTML готовую таблицу из EXEL.

Про применение таблиц и про совместимость

После того, как дедка применил бабку, от него ушла даже Жучка... Старайся задавать все размеры в пикселях, а не в процентах, поскольку браузеры понимают проценты по-разному. Лучше задавать ширину таблицы жестко, а высоту не задавать вообще. Таблица, габариты которой не заданы, будет резиновой. Т.е. объекты будут растягивать ее границы. Если ты помещаешь рисунок в жесткую таблицу, то его габариты должны соответствовать габаритам ячейки. Иначе некоторые браузеры такой рисунок просто не будут выводить.

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

После того как страничка готова, нужно протестировать ее на совместимость. Дримувер может автоматически проверить эту страничку в разных браузерах. Нужно добиться того, чтобы пага выглядела более-менее одинаково.

Про стандартные объекты чуть подробнее

По ГОСТу (Государственному Стандарту) расстояние между яичками не должно превышать две внучкины косички... С помощью вкладки "обычные" правого меню ты можешь быстро вставить стандартные объекты (хе-хе, Бивис, он сказал "вставить" - прим. Холода). После того как вставил картинку, можно использовать карту. Т.е. на разные области одной картинки, которые ты выделишь, можно сделать разные ссылки. Это еще один способ сделать графическую навигацию. И не надо мучиться с составными рисунками. Только имей в виду: карты не поддерживаются ранними версиями браузеров. Здесь же есть ссылка на почтовый ящик. Кроме картинок есть возможность внедрения в документ Java аплеттов, музыки и видео из внешних файлов.

Ну и, конечно, не обошлось без всевозможных анкет, кнопок и форм. Чтобы работали эти таги, нужно снабдить их джава скриптами. А вот с этим сложности. У Дримувера есть несколько стандартных, но чтобы они нормально заработали, придется все равно их править вручную. Ну и пусть! В моем браузере поддержка Java Script вообще отключена в целях безопасности.

В этом же меню на соседней вкладке обитают фреймы. Есть уже несколько самых типичных заготовок. Фреймами я тебе пользоваться не советую. Они, конечно, сильно облегчают тебе программирование сайта, но в сети от них одни глюки. Фреймы не дружат с поисковыми машинами. Может получиться так, что выведется только часть твоей странички. Словом, большинство сайтов сейчас делают без фреймов.


Спецвыпуск хакер, номер #002, стр. 002-076-3, Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Спецвыпуск хакер, номер #002, стр. 002-076-3

Про примочки

Погубила дедку любовь к братьям нашим меньшим... Познать тонкости веб-дизайна тебе помогут чужие сайты. Сохрани понравившуюся страницу и посмотри, как она сделана с помощью Dreamweaver. Не бойся экскрементировать (в смысле, экспериментировать) - все изменения заносятся в специальный журнал: "Hystory". Ты сможешь вернуться на любое число шагов назад.

После того как твой сайт создан, его нужно загрузить на сервер. Для этого подойдет примочка "Site" - удобный менеджер файлов, совмещенный с клиентом FTP. Например, ты можешь обновлять содержимое сайта на сервере. Это значит, что Дримувер заменит только обновленные файлы вместо того, чтобы заливать весь сервак заново. А главное, эта примочка умеет проверять правильность ссылок, которыми увязаны твои документы.

Не было забот - купила баба порося!

Dreamweaver разработан специально для тех, кто любит удобные программы с массой настроек. Для тех, у кого есть башка, но нет времени на познание тонкостей HTML программирования. А если совмещать его с другими программами типа HomeSite, то некоторые его функции помогут и профессионалу. Вот тебе, перец, краткий словарик английских терминов, чтобы помочь тебе быстро сориентироваться.

Align - выравнивание текста или объекта по краю или по центру. Используется как для всего документа, так и для каждой ячейки в таблице.

Backcolor - фоновый цвет могут иметь документы, ячейки таблицы. Многие поисковые машины пропускают текст, цвет которого совпадает с фоном.

Background - фоновый рисунок размножается на весь экран. Собственный фоновый рисунок может иметь каждая ячейка таблицы.

Border - бордюр.

Browser - программа для просмотра HTML документа. Дизайнер должен иметь в виду, что одни и те же таги разные браузеры интерпретируют различно.

Cell - клетка таблицы.

Column - колонка.

Frame - фрэйм, рамка.

Horizontal rule - горизонтальная линия заданной толщины, которой отделяют смысловые части страницы.

Image - рисунок в формате GIF или JPG, который может выводить браузер. Есть возможность изменять его размеры, но лучше выводить в натуральную величину.

Line Break - принудительный переход строки.

Link - ссылка на другой сайт или документ.

Map - карта, с помощью которой к разным областям одной картинки можно привязать разные ссылки.

Merge - разделить, отделитель, граница.

Table - таблица.

Tag - команда, которая характеризует объект HTML и его свойства.

Transparent - прозрачность; чтобы лучше совместить графические элементы, некоторые из них делают на прозрачной основе. Причем прозрачную основу поддерживает только GIF.

Size - размер - наиболее типичный атрибут почти всех HTML тагов, начиная с размера шрифта и кончая размером бордюра.

Space - пространство, например, между ячейками.

Split - слить, соединить. Обычно применяется к ячейкам.

Weight - ширина; если этот параметр не задан, то таблица ведет себя как резиновая. Задавать этот параметр лучше в пикселях, а не в процентах.


Спецвыпуск хакер, номер #002, стр. 002-076-4, Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Заблудившийся в тагах, или Страшная Сказка про Macromedia Dreamweaver 3.0.

Спецвыпуск хакер, номер #002, стр. 002-076-4

И возлюбил дед внучку на худой конец!

Ну, вот, пельмень, тебе и Юрьев день. Такая программулина от Макромедиа очень сильно должна облегчить тебе жизнь. Поставь, попробуй - тебе наверняка понравится! Мы все тебя любим, особенно я - гражданин Крэк-О-Делов. Привет телкам и пиши, если что. Чао, короче.


Спецвыпуск хакер, номер #002, стр. 002-079-1, Взлом хацкерской страницы

Взлом хацкерской страницы

MAL (mal@xakep.ru)

Спецвыпуск хакер, номер #002, стр. 002-079-1

Привет тебе снова. Я тут слышал, тебе интересно втыкнуть во все

прелести взлома страничек? Ноу проблем. Ща все будет.

Я долго думал, с чего начать и, вообще, как писать такую статью.

Остановился я на таком варианте. Буду поверхностно рассказывать о всяких

способах и сразу приводить примеры.

Начнем с начала

У тебя есть адрес сайта, который тебе нужно взломать. Первое, что бы я на твоем месте сделал, - определил бы, на какой операционке стоит сервак. Для этого существует множество программ, сканеров етс. Самый простой способ - использовать сайт www.netcraft.com, там скриптами по ввв серваку определяют, что за операционка и какой веб-сервер стоит у них. -) Но самый простой - не значит самый правильный. Посмотрим, к примеру, что у нас стоит на www.fly.ru.

www.netcraft.com выдает нам:

www.fly.ru is running Microsoft-IIS/4.0 on Linux

:)))))))))

Ладно, это так, чтоб ты не думал, что все так просто.

В общем, если там НТ стоит или последние версии unix, в которых ты не рубишь,

то тебе остается одно: скриииипты.

А если рубишь, то не только скрипты. С НТ, вообще, можно долго достаточно

промучиться и добиться результата, то же самое и с юниксами.

На данный момент для простого народа самый распространенный вид взлома

страниц - это через cgi и перл. Почему? Да потому, что тебе не нужно получать

права рута на машине, не нужно заходить в телнет, выполнять какие-то

команды... Просто достаточно найти дырявый cgi-скрипт. Как это сделать?

Это достаточно легко. Существует огромное количество сканеров дырявых

cgi. Самые прикольные - это, естественно, написанные на Си под юникс. Такой сканер можно запустить как бэкграунд процесс на шелле и идти гулять, пока он сканит.

Есть сканеры и под маздай (русский даже где-то тут видел, на www.void.ru). В общем, на самом деле не имеет никакого значения, под какую он ось, главное, чтоб работал быстро и правильно. -) Да, кстати, найти стандартные дырявые cgi-скрипты последнее время стало трудновато, админы не дураки, всю мазу просекли. Поэтому часто нужно самому разобраться с cgi, которые написаны вебмастером... 50 процентов, что они дырявые. А что делать с дырявым CGI, ты и сам знаешь не хуже меня.

Потому что водки у нас много!

Так. Со скриптами разобрались, смотрим дальше.

Я тут вспомнил способ, связанный с использованием perl и cgi. Смотрим, где хостится сайт, и регистрируем там свою страницу. Теперь можно написать программку на перле, которая откроет на любом порту шелл на машине (правда, с правами nobody). Теперь ты можешь читать файлы в папках других пользователей. Я тебе щас даже конкретный пример приведу, где, используя такой способ, имеют хостинг до сих пор. Это www.virtualave.net - там, кстати, и моя пага. -) Самый прикол в том, что ее захакали. -) Я теперь хостингам не доверяю. Убедился во всем сам!

Если тебе главное не доступ получить к сайту, а сделать так, чтобы сайт не работал, то приступаем к плану "С".

Почему "С"? Потому что "Стучаловка"! -) Не самый эффективный, но самый легкий способ убить хацкерскую страничку! -) Все что нам потребуется - это почтовая программа - раз.


Спецвыпуск хакер, номер #002, стр. 002-079-2, Взлом хацкерской страницы

Взлом хацкерской страницы

MAL (mal@xakep.ru)

Спецвыпуск хакер, номер #002, стр. 002-079-2

Почта администрации хостинговой компании, услугами которой пользуется данная страничка, - два.

Все!

Если сайт типа www.hack-fuck.com, то узнать, где он хостится, можно, используя разные программки, типа whois етс. Но так как половина таких прог - трояны, легче использовать www.internic.net.

Допустим, я хочу узнать, где хостится www.hacktop.com. Открываю

http://www.internic.net/cgi-bin/whois?whois_nic=hacktop.com

и там вижу...

Domain Name: HACKTOP.COM.

Registrar: NETWORK SOLUTIONS, INC.

Whois Server: whois.networksolutions.com

Referral URL: www.networksolutions.com

Name Server: NS1.HOSTSAVE.COM

Name Server: NS3.PBI.NET

Updated Date: 03-oct-1999

Замечательно, значит www.hacktop.com у нас хостится на www.networksolutions.com.

Быстренько лезем туда и находим мыло администраторов, тех. поддержки и т.д. и т.п. Составляем письмо, вроде "Эй, в натуре, у вас хостится сайт с троянами всякими и порнухой, а это мне не в кайф сидеть - смотреть, поэтому, в натуре, снесите все там на фиг". И отсылаем его по всем служебным ящикам. Еще хорошо, если ты в конце письма припишешь, что ты крутой чел из конкретной конторы и отправишь это с нормального ящика, а не с хотмэйлного. Попроси своих друзей отослать такой же текст с их ящиков.

Так, кстати, убили hack-crack.com. У них на фтп лежали трояны, нюки и прочая чепуха - ну, вот один чел настучал в контору, которая предоставляет им хостинг и выделенку, и на следующий день сайт закрыли.

Если сайт хостится на какой-нибудь халяве, то тут можно извращаться еще с одной штукой. Щас я тебе расскажу, как можно сломать что-то, не используя никаких

хакерских навыков. Один мой знакомый хотел взломать страницу друга. Не помню, где она хостилась, но точно на каком-то левом и бесплатном хостинге. Ну, естественно, он сразу обратился ко мне за помощью. На что я сказал ему: «Да-да-да, я щас посмотрю». Сам, естественно, отмазываясь, ни фига не посмотрел и сказал: да хз, не знаю, не ломается. -) Потом, как время было свободное, решил посмотреть, что там. И начал регистрировать на том же месте свою страницу. Во время регистрации меня попросили ввести вопрос и ответ, на случай, если

забыл пароль. -) Я тут фичу просек. И посмотрел, что за вопрос был у кента, сайт которого нужно было поломать. Смотрю: "Девичья фамилия матери". Я тут сразу кричу другану: «Слых, ты спроси хозяина паги, как его матери фамилия?» Через 10 минут мне назвали эту фамилию, и я получил пароль. -) А тот парнишка, получается, сам не зная того или забыв просто, что он указывал такой вопрос, сказал мне его пароль.

Если хостинг предоставляет такую возможность, как изменение информации или настроек с www, то можно попробовать получить к такой паге доступ, используя программы, которые будут перебирать все символы и все комбинации из этих символов, пока не подберут пароль. Такой способ называется brute force.

Вот исходник простого брутфорса на Си к www-серверу с запароленной директорией.

http://security.promo.ru/exploits/netapps/web-cgi/brute_web.c.


Спецвыпуск хакер, номер #002, стр. 002-079-3, Взлом хацкерской страницы

Взлом хацкерской страницы

MAL (mal@xakep.ru)

Спецвыпуск хакер, номер #002, стр. 002-079-3

Я, кстати, брутфорс использовал сам как-то. Но не для взлома страниц. Был такой

провайдер (не скажу, где и какой, но пароли там были 4-6 символьные и состояли

из цифр). На фтп валялся (в /etc/passwd, хоть и зашадовенный), -) список логинов. А перебрать 999999 вариантов паролей не так уж и сложно, если брутфорс запустить на шелле...

Напоследок

Ну, и еще есть способ взломать хацкерскую страницу, путем взламывания домашнего компьютера ее хозяина. Если у тебя есть его ICQ, то можно узнать айпишник (при условии, что он не использует вингейты) и тогда попробовать отыскать у него расшаренные ресурсы или что-нибудь в этом роде. Но про это в Х уже не раз писали. :)

Все! Удачного ХАКА.


Спецвыпуск хакер, номер #002, стр. 002-080-1, Час потехи

Час потехи

Спецвыпуск хакер, номер #002, стр. 002-080-1

Автор: Topuk (torick@xakep.ru)

Посидел я, подумал и решил, что сейчас я тебе про всякие развлекаловки интернетовские расскажу! Нет-нет, вовсе не про очередной бесплатный порносервер. Я развлекуху аудио-визуальную имел в виду. Развлекуху, которая поможет сделать твою пагу самой яркой и неповторимой! Ты же слыхал там про MIDI, MP3, RealAudio? Вот про них, родимых, и поведаю тебе.

MIDI и иже с ними

Начну со старого, но все еще популярного формата MIDI (Musical Instrument Digital Interface). Можно много и долго распространяться об этом формате хранения аудиоинформации, но в первую очередь следует сказать о главном плюсе MIDI - практически любая композиция имеет небольшой объем, что в Интернете архиважно. Потому в языке HTML под это дело выделили специальный тэг <embed>, дабы каждый юзер, мечтающий предоставить всем посетителям невыносимую радость от прослушивания миди-произведений, мог удовлетворить свою нездоровую страсть. Под этот же тэг вставляются WAVы и AVI. А вообще, обычно мидишки на пагах - это простенькая мелодия из какого-нибудь сериала или культовой игрушки. И помещается, соответственно, только на фанатских пагах того же контента. Учти, что файлы формата MIDI - это только музыка, в которой можно услышать 128 инструментов плюс 64 ударных, но только 16 из них - одновременно (точнее, пятнадцать инструментов и один ударник). Ограничения накладываются только на звуковую карточку - на SB 16 ты услышишь намного меньше инструментов, чем, скажем, на SB 64 Gold.

Где взять мидишку? Ну, это зависит от преследуемых тобою целей. Хочешь выставить свое произведение - ставь свое. А вот если ты фанат, предположим, Shining Force, то придется тебе лезть на http://www.vgmusic.com, нагло одалживать оттуда необходимую мелодию и уже потом заливать ее себе на пагу. Насчет сериалов и культовых мультиков: лезь на поисковый сайт, вводи название. В ответ получишь кучу ссылок на, по большей части, фанатские сайты. Вот уж где наверняка целое раздолье этих мидишек. Есть еще вот такой линк: http://www.midi.org. Предположим, ты попал на пагу и вот - вот оно! Вот она звучит, услаждая твои пунцовые от радости уши! Но... как ее взять? Открой сорцы (Page source) странички, найди тэг <embed src=нужная_тебе_мелодия.mid> (возможно, в IE это будет <bgsound> - Нетскап этого тэга не видит) и закачивай через фтп-клиент эту мидишку. Если в тэге указан не полный адрес, то необходимо выцепить линк страницы (это еще может быть и фрейм - будь внимателен!) и прибавить через слэш название мелодии. Все, теперь она у тебя на винте. Дальнейшее просто: вставляешь у себя <embed src=нужная_тебе_мелодия.mid> и все. Кстати, мидишка будет прослушиваться миди-плейером по умолчанию. Если ты ставил Quick Time - скорее всего, это он и будет. Иначе - Windows Media Player. Отсюда и разрешение вопроса: на чем прослушать файлы *.mid. Это может быть все тот же Windows Media Player, Quick Time Player или даже Winamp. Правда, у последнего возникают иногда проблемы с проигрыванием MIDI. Quick Time лежит на www.quicktime.com и, помимо Виндов, полностью совместим с Маками и MacOs, соответственно.


Спецвыпуск хакер, номер #002, стр. 002-080-2, Час потехи

Час потехи

Спецвыпуск хакер, номер #002, стр. 002-080-2

MP3 и все в таком (д)ухе

Теперь немножко о MP3. В 1999 году этот формат все же стал общепризнанным форматом хранения аудиоинформации. Причем самым популярным. Настолько популярным, что под МР3 стали делать Hardware МР3-плейеры (стоимостью по 100-300 баксов/штука). Кодировать в формате МР3 можно на потоке в 128 килобит в секунду при частоте 44 КГц стерео. Но при этом занимаемое на винте место значительно сокращается: если одна минута в *.WAV весит порядка десяти метров, то МР3, обычно, не более одного мега.

Создать свою мр3-шку легко. Нужно лишь обладать прогами типа MP3 Producer, Xing Encoder или Blade Encoder. Впрочем, даже создав, написав хорошую красивую мелодию, записав собственную песню или танцевальный хит-плагиат, придется с ней, мр3-шкой, что-то делать. В HTML ее не впишешь. На бесплатный сервер просто так не выложишь (места не хватит - средняя песня в МР3 занимает по три-шесть метров). Здесь вариантов несколько: действительно поднапрячься, найти бесплатный сервак, админство которого не представляет собой перепуганного властями кролика и не сотрет твою музычку в ту же ночь, как ты ее выложил. Тогда тебе останется лишь дать линк на МР3 со своей паги - и все ОК.

Другой вариант таков - нужно найти сервер, где с гарантией дают скачать себе МР3, но только под U/D. Объясняю: ты вот уже полгода ищешь архивную запись Led Zeppelin, которую Роберт Плант по пьяной лавочке записал на старенький магнитофон у себя на кухне, отмечая 4 июля в компании лучших друзей. И вдруг - счастье есть - она нашлась на одном глухом серваке! Но ой! Что это за цифры? Почему мне отказывают в скачивании столь редкой мелодии? А дело в том, что сервак - U/D. То есть, прежде чем скачать что-либо, необходимо залить что-нибудь. Помнишь это знаменитое изречение Дяди Федора: "Прежде чем купить что-нибудь ненужное, надо продать что-нибудь ненужное"? Вот и здесь так же. Ты заливаешь свою мелодию, которой стопроцентно не окажется на серваке, получаешь "кредиты", скачиваешь искомое. Практическое применение музыки в МР3 для твоей паги - хотя бы простое упоминание в <meta name> буквосочетания МР3 и упоминания в описании поисковиков что-нибудь вроде "уникальный хаус-ремикс Мадонны! Тока у меня!", что несомненно принесет тебе некоторый вклад в промоушен страницы. Кстати, о промоушене - ты еще не смотрел статью СайдЫкса?..

На чем можно прослушать МР3? Во-первых, на Винампе, самом распространенном МР3-плейере. Пожалуйте на http://www.winamp.com. Во-вторых, Sonique: http://www.sonique.com. Для гурманов, я сам не видел, но у него есть фанаты. А что? У Маков тоже есть фанаты... В-третьих, JetAudio. Это именно та самая программа, которая просто обязана называться Универсальным Проигрывателем. Помимо МР3, прога показывает видео (.dat, .mpg), CD-музыку (.cda), MIDI, RealAudio/Video и тому подобное. Берется с http://www.music.ag.ru. Стандартный Media Player и его старший брат MP-2 с удовольствием проиграют музыку в МР3 специально для тебя. Ну и, конечно, не забывай о "железных" МР3-плейерах. Берутся в магазинах с продукцией Diamond Multimedia, Creative Labs.


Спецвыпуск хакер, номер #002, стр. 002-080-3, Час потехи

Час потехи

Спецвыпуск хакер, номер #002, стр. 002-080-3

Напоследок об МР3. Не забудь внести себя в поисковик Апорт, Ликос и Палависту. Это обеспечит тебе некоторый приток посетителей. Соответственно, http://www.aport.ru, http://mp3.lycos.com, http://www.palavista.com.

RealMedia. Просто RealMedia

Real Media... Это не просто формат хранения аудио- или видеоинформации. Это туева хуча всяких запатентованных протоколов и технологий. Это ставший известным и достаточно популярным формат. Для начала я поговорю о главном достижении - Real Audio. То, что совершили творцы Реал Медиа, не поддается простому описанию. Они умудрились найти достаточно оптимальное соотношение размер/качество. Ты когда-нибудь слушал музыку в RA? Она далеко не лучшего качества, напоминает нечто между аудиокассетным качеством и качеством записи "Иисус Христос - суперзвезда" на бобинах твоего дедушки, зато весит - одна минута ~ сто двадцать - двести килобайт. Доступна она не только избранным вебмастерам - с помощью программки Real Audio/Video Producer ты без проблем перекатаешь трэки любимого сидюка в маленькие неприметные по размеру *.ra, не минуя, впрочем, стадию закатки *.cda в *.wav. Опять-таки напоминаю, что качество музыки оставляет желать лучшего по сравнению с теми же МР3, но если твой далеко не резиновый двухгиговый винт не имеет желания и возможности хранить сотни МР3`шек, остается только вариант с РА. Прослушать *.ra, *.ram можно с помощью Real Player (последние версии - G2 и 7.0), который, как и Real Video Producer, берется с http://www.real.com.

Немножко о функциях RealMedia в твоем разлюбимом Интернете. Дело в том, что если проинсталлирован RealPlayer и его функции включены в твой браузер (в IE 5.0 это будет сделано автоматически), то при клике на ссылку на файлы типа *.ra, *.ram у тебя автоматически загрузится Real Player и попытается этот файл проиграть. Да-да, учитывая мелкий размер мелодии, музыка польется в твои уши, не напрягая тебя нудным ожиданием закачки файла. Музон будет докачиваться в процессе прослушивания и, если коннект нормальный, то усе будет ОК. Филе докачается и по окончании прослушки сгинет в недрах Temp-директорий. Чтобы заиметь файл у себя на винте, достаточно вместо простого кликанья на линк скачать файл (это, скорее всего, будет *.ram) себе на винт, затем переименовать *.ram в *.txt, открыть его Нотепадом, вытащить настоящий линк, по которому по идее должен идти Real Player при скачивании *.ram, заменить pnm:// на привычное http:// и скормить этот линк своему фтпшнику. Соответственно, чтобы поиметь у себя на сайте кусочек гордости и красы отечественной попсы Алены Апиной в виде записанного *.ra, нужно прописать в теле паги ХТМЛем: <a href=путь_к_рашке.ram>, причем в *.ram должен быть прописан полный-преполный путь к настоящей мелодии типа "pnm://www.music.ru/baklan/a_apina.ra". Обязательно с указанием pnm:// и без всяких комментариев. Не забудь закрыть тэг </a>. Кстати, отдельные лица умудряются целые альбомы перегонять в RealAudio - и ничего, неплохо получается. Вот, к примеру, как у когда-то любимой мною группы "Центр" (http://www.centromania.com).


Спецвыпуск хакер, номер #002, стр. 002-080-4, Час потехи

Час потехи

Спецвыпуск хакер, номер #002, стр. 002-080-4

Отдельный разговор об Real Video. В принципе, целые кинофильмы и видеоленты в него перегонять никто не собирается и не собирался. При всех возможностях Real Media создать альтернативу AVIшкам практически невозможно. Обычно файлы формата *.rm содержат кусочек фильма, клипа или какого-нибудь промоушен-материала. Опять-таки есть, есть еще кодеры в женских селеньях, готовые извратиться по максимуму, а получить не слишком-то и реальную отдачу. Вот, скажем, не менее любимая мною группа "Ария" записала видеоклип на песню "Грязь". А его ни один канал ТВ не берет в ротацию! Почему? А там слишком много эпизодов с Моникой Левински, Скорпионскому "To be #1" и не снилось. Вот и придумал вебмастер закатать в пять метров заветное видео и на сайт (http://www.aria.ru) закинуть. Качество клипа в *.rm ужасное. С одной стороны - лучше бы и не смотреть, а с другой - любопытно, блин! Примерно та же фигня произошла с певицей Леной Барбаш (http://www.lena.ru). У нее клипак - в лучших традициях "Пластилиновой вороны". А не взяли. Зато в Real Video посмотреть можно. И рассмотреть все детали клипа. ;) Как писать и перегонять свое - я уже говорил, через Real Video Producer, что валяется в дебрях http://www.real.com.

Apple QuickTime

Тебе никогда не встречались файлы в формате *.MOV? MOV - это формат редкий, кто его хоть раз видел - тот знает. Знает, что качеством, алгоритмом сжатия и качеством кодеков этот формат обставляет MPEG-3 (хотя и не догоняет MPEG-4). Выкладывать его в Интернете можно только с одной целью: чтобы его скачали (места МОВики не особенно много занимают). Из программ тебе понадобятся, собственно, сам QuickTime и редактор видео Media Cleaner Pro. Все это таскается с http://www.quicktime.apple.com. Кстати, MOVики используют и некоторые популярные игрушки. Carmageddon 2 даже позволяет записать демку из игры в формат MOV. Кстати, насколько я знаю, MOV в последнее время можно запихнуть в рамки тэга <embed>.

Microsoft Windows Media и его форматы

Здесь есть много о чем поговорить. Начну, пожалуй, с AVI (Audio Video Interchange) - самого первого видеоформата для Выньдоса, разработанного, к тому же, самой МокроСофт! Впервые формат AVI был реализован под Windows 3.11. Можно сказать, что именно AVI начал развитие мультимедии на персоналках. Удобен он тем, что в нем напихана куча разных кодеков вроде M$ RLE (Run Length Encoding), Intel Indeo 3.2 и даже Cinepak. Таким образом можно записать в AVI любой мультик, кино. Если ты выложишь его в Интернете прямой ссылкой (все тот же <embed>), то AVIшка начнет проигрываться покадрово - т.е. ты нажал, появляется картинка, как только загружается очередной кадр - он проигрывается. Достаточно лишь вписать <embed src=путь_к_авишке.avi>. Подождешь пару часиков - глядишь, все и загрузится. ;)

ASF (Advanced Streaming Format). Новый формат, хотя уже потихоньку отвоевывает себе местечко под солнцем. При битрейте 80 kbps обгоняет MP3 и, практически, добирается до качества CD. Правда, весьма нехило нагружая процессор работой. Формат поддерживает аудио и видео кодинг. Между прочим, основным кодеком для видео является сам Microsoft MPEG-4. Проги для кодировки есть на http://www.microsoft.com.


Спецвыпуск хакер, номер #002, стр. 002-080-5, Час потехи

Час потехи

Спецвыпуск хакер, номер #002, стр. 002-080-5

Ну вот и все на сегодня. Записывай, слушай, смотри. Удачи тебе, кулхацкер.


Спецвыпуск хакер, номер #002, стр. 002-084-1, Мультипликация для всех!

Мультипликация для всех!

Спецвыпуск хакер, номер #002, стр. 002-084-1

Маxx Zелененко (maxx@xakep.ru)

Михаил Терехов (stranger@xakep.ru)

Привет, братишка! Сегодня мы с тобой собрались не просто так, а по поводу. Доставай, наливай. Шутка. На самом деле - по поводу Инета и создания собственной паги на его бескрайних просторах. Ну, пагу, я думаю, ты уже создал по предыдущим статьям номера, а вот баннеров и рулезных кнопочек на ней еще не хватает. Обыкновенные неподвижные кнопки и баннеры - это не для нас с тобой. Мы ж крутые перцы - нам баннеры подавай с бегущей строкой, переливающимся текстом и трехмерной тенью, отбрасываемой на задний план. А может быть, и с отрывком видеофильма на заднем плане баннера (жанр фильма определи сам). :)) Про кнопки я вааще молчу - такой супер-мега-рулезный хит может родиться только в наших с тобой творческих мозгах.

Для создания всего этого добра нам с тобой понадобится соответствующая софтина - джиф аниматоры. О них сейчас и поговорим...

Gif Construction Set(tm) Professional

Это первая прога подобного жанра, которую я встретил в сети, и за свою простоту она мне нравится до сих пор. Несмотря на столь пугающее название, все очень удобно. Для того чтобы постоянно не мучаться с созданием проекта и его подгонкой под баннер, кнопку или что-то еще - в меню редактирования эти проекты выделены в отдельные пункты. В каждом пункте предлагается целый ряд вариантов конечного продукта с применением различных эффектов, возможно их слияние, а также перенесение отдельных фреймов из одного в другой. Кроме основных проектов отдельно выделены варианты создания надписи в виде электронной бегущей строки (вроде: "До взрыва Вашего компа 5 минут, просьба немедленно покинуть здание!!!"), :)) создания вращающихся объектов, а также рассеивающихся вместе с монитором изображений. ;-)))

Для создания твоих эксклюзивных анимированных джифов предусмотрен целый ряд отдельных эффектов, количество которых не очень велико, но все они очень интересны. Отдельного внимания заслуживает такая полезная функция, как Animation Wizard - она поможет легко и быстро создать любой анимированный элемент веб-странички даже непрофессионалу при помощи последовательного выбора пунктов в появляющихся окнах. Хотя ничего особенно оригинального с ее помощью не создашь, такая забота о простых смертных очень приятна. Кроме нее мне понравилась возможность сжатия анимированных картинок, эта функция очень неплохо уменьшает размер готового джифа, что полезно для ускорения загрузки твоей странички. Единственный камень в огород проги - отсутствие нормальной панели инструментов, все операции приходится осуществлять либо через главное меню, либо через контекстное меню правой кнопки крысы. К слову, в меню есть все, что может понадобиться для работы, плюс многим операциям соответствуют горячие клавиши, ожоги на пальцах не прошли до сих пор. :))

Прогу можно снять по адресу: http://www.mindworkshop.com/alchemy/alchemy.html

Вес проги: 3736 кило.

Animagic GIF

Неплохая такая программка навроде предыдущей, но без удобств, типа выделенных отдельно проектов баннеров, кнопочек и так далее. Простое окошко и никаких панелей инструментов, все опять же приходится делать через главное меню программы. Одно я не понял: где горячие клавиши, а то я уже по ожогам соскучился. :))) Все делается в рамках одного и того же проекта, куда последовательно вставляются фреймы, необходимые для проигрывания анимированного изображения. К фреймам могут применяться различные эффекты, встроенные в программу. Так же, как и в предыдущем аниматоре, набор эффектов невелик, в их число входят такие примочки, как поворот изображения, прокручивание, размытие перед следующим изображением етс. Работа с программой не очень интуитивна, но если поднапрячься и разобраться в ней, то можно стать ее поклонником. Что понравилось в проге? Нетребовательность к ресурсам. Она очень достойно вела себя, почти не занимая память и не затормаживая систему.


Спецвыпуск хакер, номер #002, стр. 002-084-2, Мультипликация для всех!

Мультипликация для всех!

Спецвыпуск хакер, номер #002, стр. 002-084-2

Удобное и очень понятное построение форточек, в которых совершаются операции над изображением - это избавляет от долгих мучений и вопросов, зачем же та или иная цифирь нужна да чего она изменит на картинке. Восхитил размер проги - всего 550 кило, и при этом все функции предыдущей, размеры которой существенно побольше. Она 100% подойдет народу, у которого не хватает места на винте, и тем, кто занимается подобными вещами лишь время от времени. Начинающих огорчит отсутствие такой полезной функции, как Animation Wizard.

Прогу можно слить отсель: http://www.rtlsoft.com/animagic

Вес проги: 534 кило.

Ulead GIF Animator

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

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

Для помощи тебе в создании чего-либо действительно экстраординарного в проге встроен целый ряд эффектов, число которых очень велико, но может еще увеличиваться, так как все они исполнены в виде плагинов. Для редактирования одного изображения предусмотрена возможность применения фильтров, подобных Photoshop; так как все они совместимы, то ты можешь импортировать оттуда большинство своих любимых эффектов. Чтобы оптимизировать изображения для работы в сети, предусмотрены функция предпросмотра анимированного изображения в браузерах и функция сжатия изображения.

Для определения времени загрузки того или иного файла из Инета в прогу встроен специальный каунтер, высчитывающий скорость загрузки в зависимости от скорости соединения. Из интересных и полезных функций программы можно выделить Animation Wizard, а также экспорт текста ХТМЛ относительно джифа. Обе функции предназначены для начинающих, но, честно говоря, без желания научиться пользоваться этой прогой ничего необычного с ними не сделаешь. Естественно, в ней есть целый ряд других функций, которые тоже заслуживают пристального внимания, но если описывать все, то нужно писать целый гроссбух, посвященный этой софтине.


Спецвыпуск хакер, номер #002, стр. 002-084-3, Мультипликация для всех!

Мультипликация для всех!

Спецвыпуск хакер, номер #002, стр. 002-084-3

Что тут скажешь? Очень классная фича, советую поюзать ее каждому. Ни одна другая прога не предоставит тебе такого количества функций и удобства в работе. Единственным камнем в ее огород будет некоторая сложность - что ж, в свете всех ее достоинств - это просто пустяк.

Прогу можно снять: http://www.ulead.com

Вес проги: 7563 кило.

Microangelo GIFted

Совсем небольшая программка, тем не менее очень удобная и функциональная. При первом запуске будит воспоминания о старом добром Paintbrush'е. Та же компоновка окна проги и все та же панель инструментов. Позволяет создавать хорошие анимированные изображения, но так как эффектов в ней встроено очень мало, то большую часть эфиксов тебе придется создавать собственными руками. Занятие, скажу тебе, не из легких, но очень часто наиболее интересные вещи именно так и создаются. Кроме создания анимированных изображений, прога позволяет создавать и редактировать отдельные джифы.

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

Прогу можно снять: http://www.impactsoft.com/

Вес проги: 340 кило.

WWW Gif Animator

Еще один неплохой аниматор, на Tucows ему поставили пять коров и, в принципе, вполне заслуженно. Все очень просто, и делается в пределах одного единственного окошка. Никаких панелей инструментов, только контекстные меню и кнопки наиболее часто используемых функций, большинству из которых соответствуют горячие клавиши. В основном служит для удобной и быстрой компоновки в анимированное изображение уже готовых джифов. Позволяет анимировать одно или несколько изображений при помощи встроенных в прогу эффектов, а их в ней действительно немало.

Только самих эффектов 24 штуки, а если посчитать количество их вариаций, то запросто можно насчитать около 50. Интенсивность и варианты действия эффекта выбираются в пределах одного окошка, причем, в отличие от многих прог, есть возможность предварительного прогляда, чего ж там получится. Конечный продукт может неплохо оптимизироваться, но до грандов в этом деле проге еще далеко.


Спецвыпуск хакер, номер #002, стр. 002-084-4, Мультипликация для всех!

Мультипликация для всех!

Спецвыпуск хакер, номер #002, стр. 002-084-4

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

Прогу можно снять: http://hotfiles.zdnet.com/cgi-bin/texis/swlib/hotfiles/info.html?fcode=000FL4

Вес проги: 2586 кило.

Xara Webster

Очень своеобразная программа - по заявлению владельцев, сие есть графический редактор для сетевой графики. Умеет создавать, а также редактировать огромную кучу разных вещей, и в числе прочих анимированные джифы. Работает с любыми графическими файлами, причем может импортировать их прямо из web-страничек в сети.

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

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

В общем, программка странная - добавлено все то, чего нет в других, зато потеряно все то, что у них есть (прикольно доработали идею ребята). :)) Так что работать с ней авторам и работать, а любители могут скачать ее себе и попробовать, а вдруг понравится?

З.Ы. Интересно, а почему она такая здоровая?

Прогу можно заиметь тут: http://www.xara.com/

Вес проги: 7776 кило.

GIF Movie Gear

Стильная маленькая прога, в которой абсолютно все видно и понятно сразу. Подозреваю, что при ее освоении мозги не нужны вообще, они могут понадобиться только в процессе работы с изображениями. Она не умеет редактировать одиночные изображения и направлена только на работу с анимацией, в частности - компоновку анимированных изображений из готовых одиночных.

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


Спецвыпуск хакер, номер #002, стр. 002-084-5, Мультипликация для всех!

Мультипликация для всех!

Спецвыпуск хакер, номер #002, стр. 002-084-5

Очень понравилось, что все данные о размере конечного файла и скорости его загрузки через Инет вынесены на информационную панель внизу экрана - это позволяет избавиться от утомительного выискивания этой важной информации в дебрях меню. Заслуживает также внимания функция экспорта ХТМЛ текста, относящегося к выбранному тобой джифу - это избавляет от лишней работы при вставке его в страничку.

Вердикт... Небольшая и очень приятная в использовании софтинка. Из маленьких программ она мне понравилась больше других, но это дело вкуса. Советую попробовать ее каждому, только это... на вкус не надо. :))

Прогу можно. У нас всех можно, только сначала потанцуем: http://www.gamani.com/

Вес проги: 810 кило.

Ну, вот в принципе и все, что хотелось сказать о такой полезной штуке, как джиф аниматоры. Я думаю, что ты уже выбрал себе подходящую софтину и с мечтательным выражением лица закачиваешь ее себе на комп, попутно придумывая суперджиф, который сбацаешь, как только установишь прогу. Если нет, то советую не огорчаться и немного пошарить по Инету, проги подобного жанра хоть и не водятся там в массовых количествах, но и в Красную книгу не занесены, так что обязательно себе что-нибудь хорошее подберешь.

Теперь о творческом процессе. При создании своего баннера кнопки етс не старайся навернуть его и наставить побольше эффектов, сделав их посложнее. Помни первое правило демщика: "Главное не сложность эффектов, а впечатление, которое они производят на зрителей!!!". Пусть все будет не так сложно, зато и файл будет меньше, а, следовательно, страничка твоя будет грузиться существенно быстрее. Не старайся сделать хороший продукт быстро, создание шедевра должно занимать время (а то времени не остается для творческих мучений) :)) и стоить кучи нервов (стертые по ошибке элементы, советчики из-за плеча, шумно топающий кот и т.д.). :) Помучался некоторое время, зато какое удовольствие от результата. Пользуй, короче, софт, мучайся, твори в муках и так и далее. Наливай, раздевай... От винта!


Спецвыпуск хакер, номер #002, стр. 002-090-1, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-1

Ramhak O`Hady (konung@ic.ru)

Любой художник, который большинство своего времени проводит не за холстом с масляными красками, а за компьютером с клавиатурой и мышкой в руках, в ответ на слово "Xara" одобрительно кивнет и скажет: "Да, есть такая - у меня дома стоит. Крутейшая вещь!". И он будет прав - практически все программные продукты от Corel`а пользуются огромной популярностью. А Xara стоит практически у всех, кто занят компьютерной графикой профессионально. И это неспроста. Corel Xara и Corel Xara Webstyle - две мощные программы для людей с разным уровнем опыта и умения обращаться с компом и компьютерной графикой. Я расскажу о каждой из них подробно, чтобы у тебя была возможность выбрать, какая из них подходит тебе лучше. Начну с той, что проще и доступней - Corel XaraWebstyle.

Corel XaraWebStyle

Здесь все очень просто - программа имеет приятный графический интерфейс и кучу разных фишек для настройки. Corel XaraWebstyle предназначена для создания разных графических компонент для веб-страничек на основе уже созданных профессиональными дизайнерами и художниками (например, кнопок перехода а-ля мелкософт или крутейших трехмерный надписей). Запустив прогу, сразу попадаем в меню - нам предлагают выбрать поле деятельности:

Как известно, все познается в сравнении или в наглядных примерах. Сравнивать XaraWebStyle не с чем - это лучшее, что я когда-либо видел. А пара примеров не помешает. Например, было бы неплохо, если бы на страничке было красивое заглавие - скажем, фраза "Добро пожаловать".

Кликаем на "3D Headings" - трехмерных заголовках. Поле вверху - это рабочая область, в которой будет отображаться все, что происходит с текстом заголовка. Там же будет отображено то, что потом реально поместится в gif-файле (или jpg - кому как нравится ;-). Слева находятся кнопки опций (они одинаковы для всех режимов - создаешь ли ты заголовки или кнопки, или, может быть, разделители):

- Text. Позволяет ввести текст и выбрать шрифт, которым он будет отображен.

- Color. Цвет текста, фона или каких-либо дополнительных источников (для трехцветного текста, например).

- Texture. Самая вкусная вкусность. Можно навесить свою картинку на фон и, собственно, на текст. Таким вот макаром и возникают "каменные" надписи на "деревянных" заборах. :-)

- Shadow. Видел когда-нибудь расплывчатые тени под надписями? Создается впечатление, что они как бы парят над страницей, отбрасывая такие темные пятна на фон позади. С этой опцией нет ничего проще создать такую же тень для надписи или кнопки, или... фантазия безгранична. :)

- Themes. Специальная папка для удобства работы - можно организовывать все создаваемые картинки в соответствии с определенным стилем-темой (theme). Это для того, чтобы случайно на синем фоне не появлялись красные надписи ;-)

- Size и чуть ниже Save. XaraWebstyle - просто зверь. Она сама может оптимизировать палитру и урезать цвета, которые используются в изображении. При этом всем можно задать практически любой размер для картинки, и все изменения будут отображаться в рабочем поле немедленно! Уфф...


Спецвыпуск хакер, номер #002, стр. 002-090-2, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-2

Все прекрасно, но давай создадим-таки надпись "Добро пожаловать". Кликаем на кнопке Style - куча разных стилей и глазки разбегаются. А ведь есть еще стили, которые лежат отдельно, а не на панельке под рабочей областью. Их, кстати, как и почти всю графическую часть, можно докачивать с сайта www.xara.com или брать с любых клипартов - все равно. Возьмем для начала стиль Highlight. Затем кликаем Text. Вводим "Добро пожаловать" и указываем шрифт. Поле "Aspect" позволяет регулировать размер текста в процентах. С этим стоит поэкспериментировать самостоятельно. Затем опция Color - здесь как раз тот случай, когда источников света три штуки - каждому можно задать свой цвет, и тогда картинка может измениться до неузнаваемости. Тут же есть Shadow Color - цвет тени, и Background Color - цвет фона (это нужно указать, если на фон не будет помещена картинка). Texture - тут все понятно, просто выбрать соответственные картинки для текста и фона. Чтобы добавить свои, нужно их просто туда перетащить мышкой. Любые вопросы, кстати, легко решаются кликом на кнопочке "Tell me more" ("Расскажи мне больше...") в верхнем правом углу окна. Осталось "навести марафет" - применим Shadow. Там есть параметры, изменив которые, тень сдвинем немножко вправо и "размажем" (blur) по фону. Кстати, здесь есть три варианта - тень на стене (то есть как она выглядит, если приподнять картинку над поверхностью), тень на полу (если поставить картинку "на попа") и без тени. Size - установим размер (впрочем, это уже предпоследнее действие - когда все-таки решишь, что картинка хороша и ее нужно сохранить). И, наконец, опция Save - сохранять все это буйство красок и фантазии можно в GIF`ах и JPG`ах. Первым можно указать максимальное количество цветов, которые может содержать изображение, а вторым - степень сжатия (то есть степень фуфловости качества картинки). Вот что получилось у меня:

Все вышеперечисленное относится и к остальным элементам - кнопкам, разделителям, 2D-надписям. Правда, в опции Size у кнопок можно зафиксировать размер - "lock button size", чтобы получать кнопки одного размера. Иногда прикольно выглядят кнопки с вылезающими за их границы текстом. Очень даже ничего смотрится. Дополнительные дизайнерские фишки находятся с помощью кнопки-папки "More designs".

Для создания собственной странички всего этого вполне хватает. Причем, велика вероятность, если, конечно, руки не слишком кривые, что все будет выглядеть весьма оригинально, и никто даже не подумает, что вся страница была создана за пять минут с помощью программы "на любителя". Но на такое тоже должен быть своего рода талант. "И достигается это путем долгих и упорных тренировок" (c) Radagast Kary.

Если твоей задачей является создать собственную хоумпагу с навороченной графикой и все хочется сделать быстро и без особых изысканий, то XaraWebstyle - то, что нужно. Нужно будет только скачать понравившиеся клипарты с какого-нибудь бесплатного архива и вперед.

Corel Xara 2

Если ты работал когда-нибудь с Adobe Photoshop (по-моему все, кто вообще хоть раз прикасался к компьютеру, слышали о нем), то наверняка спотыкался на его не очень понятном и неприветливом междумордии. Конечно, какому-нибудь псилоцибиновому маньяку-дизайнеру он и удобен, но начинающему... да и профессионалу все равно приходится привыкать к его фокусам. В этом смысле (да и во всех остальных) Corel Xara 2 - просто сказка. Даже всплывающие подсказки (popup tips - не hints :-) действительно содержат полезные подсказки, а не мусор типа "чтобы нажать F1, найдите кнопку F2. F1 находится сразу слева от нее." Здесь все просто и со вкусом - и из-за этого все удобно и практично. И это при том, что Xara 2 занимает меньше места и позволяет работать с плагинами для Photoshop`ы... Ладно, хватит нахваливать коня, пора ему и зубы смотреть. :-)


Спецвыпуск хакер, номер #002, стр. 002-090-3, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-3

Все рабочие панели Xara`ы настраиваются и могут содержать в себе кнопки практически на все случаи жизни. Естественно, что, не зная назначения всех этих кнопок, трудно собрать для себя удобную панельку, где все нужное было бы "под рукой". Поэтому для начала небольшое вступление о том, что где лежит. Но сначала скажу о том, что окно Xara можно развернуть не просто на весь экран, а сделать его Full Screen - тогда не будет видно границ окна, шапки и меню. Дополнительное пространство никогда не помешает. Сделать это можно кликнув на поверхности окна Xara (там, где документ покоится пока что в полном уединении) и указав в выскочившем подменю опцию "Full Screen".

Слева находится панель инструментов - там практически все, что вообще может понадобиться. Самый первый инструмент, как и положено, - для выделения объектов. С выделенным объектом (будь то изображение, геометрическая фигура, текст или еще какой прибамбас) можно работать всеми остальными инструментами. Вот они:

- Freehand Tool. Позволяет просто рисовать, что называется, от руки. Можно регулировать степень сглаживания нарисованных линий, чтобы, когда рисуешь круг, получился действительно круг, а не страшное подобие Змея Горыныча.

- Shape Editor Tool. После того как линии нанесены на "бумагу", их можно запросто подкорректировать этим инструментом - иногда очень удобно рисовать сложные фигуры сначала просто набросав несколько линий, а потом уже подгонять их так, как надо, этой тулсой.

- Pen Tool. Очень удобная вещь для тех, у кого слишком кривые руки и мыши, чтобы использовать Freehand Tool.

- Rectangle Tool. Рисуем прямоугольники - можно закруглять концы (для кнопок в самый раз такая тулса).

- Ellipse Tool. Думаю, понятно. :-)

- Quick Shape Tool. Это объединение двух предыдущих с уклоном в сторону абстракционизма. Можно рисовать 99-конечные звезды. Можешь себе это представить? Сатанисты будут в восторге. :-)

- Blend Tool. Представь, что у тебя есть две фигуры - квадрат и какая-нибудь надпись. С помощью Blend Tool можно запросто создать "промежуточные картинки" - словно квадрат постепенно превращается в надпись или наоборот. Неплохо смотрится при умелом обращении. Можно задать количество промежуточных картинок и получить, например, композицию а-ля "Две тысячи Иванов Грозных убивают Билла Гейтса".


Спецвыпуск хакер, номер #002, стр. 002-090-4, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-4

- Fill Tool. После того как поверхности нарисована, ее можно закрасить. Хочешь - однородным цветом, а хочешь - изображением.

- Transparence Tool. Уже созданное изображение можно сделать полупрозрачным в два счета. Кроме того, есть уйма дополнительно режимов - включая экзотические Fractal Plasma и Fractal Clouds. Работу первых можно себе приблизительно представить, если посмотреть "Итоги" на НТВ, а вторых - просто посмотрев на пасмурное небо за окном. :-)

- Mould Tool. Пригодится, если нужно "закругляться". Поможет придать любой фигуре какую-либо примитивную форму. Если просто круги и квадраты не впечатляют, можно тут же включить Shape Editor Tool и создать такую форму, какая необходима. Можно поиграться с перспективой - "положить" изображение на бок или растянут вдоль.

- Text Tool. Удобная тулса для ввода текста. Можно вводить сразу текст под углом или даже перевернутый вверх тормашками.

- Push Tool. Если отключены полосы прокрутки, можно пользоваться этим, чтобы работать со всей страницей, а не только его видимой частью.

- Zoom Tool. Лупа - как лупа. Ничего особенного.

Опять же лучше рассказывать на примерах, поэтому давай создадим какую-нибудь надпись... Или, например, кнопку для веб-странички. Чтобы получить квадрат со сглаженными углами, воспользуемся Rectangle Tool. Кликаем... Наверху на одной из панелей появились опции для выбранного нами инструмента. Их можно (и нужно!) изменять, чтобы получить должный эффект. ;-) Щелкнем на Curved corners - сглаженные углы. И нарисуем прямоугольник. У каждого угла нарисованы три квадратика - перемещая их мышкой, можно изменять вид углов. Если хочется изменить вид только одного, нужно воспользоваться Shape Editor Tool.

В верхнем правом углу лежит по дефолту панелька с кнопками всяких Galleries (наборов):

- Color gallery. Нужно подобрать цвет? Без проблем. Несколько встроенных стандартных палитр плюс возможность быстро сделать все самому.

- Layer gallery. Документ в Xara создается приблизительно так же, как и в Photoshop`е - с использованием слоев. Layer gallery позволяет изменять настройки каждого слоя, переставлять их местами, удалять, добавлять новые и т.д.

- Frame gallery. Анимацию Xara поддерживает в полной мере (в отличие от Photoshop`ы). Frames (кадры) - это и есть кадры анимационных файлов. Каждому кадру можно задать свое время отображения и тип вывода на экран. Комбинируя их, можно существенно уменьшить размеры gif-файла, что немаловажно при работе с WWW.

- Bitmap gallery. Все растровые (битовые) изображения отображаются здесь. С ними можно вытворять все, что душе угодно... :-)

- Line gallery. Все линии, которые рисует художник в Xara, могут иметь собственную толщину, могут отображаться пунктиром нескольких типов и даже выглядеть как стрелы. :-)

- Fonts gallery позволяет быстро подобрать нужный шрифт. Весь список Installed Fonts отображается визуально, то есть, найдя Courier New, ты увидишь, как он выглядит.

- Clipart gallery. Все изображения, хранящиеся на диске, можно организовать в структуры клипарта, чтобы не мучаться потом с поиском нужного изображения. Тут же можно запросто скачать доступные на сервере www.xara.com бесплатные наборы клипарта.


Спецвыпуск хакер, номер #002, стр. 002-090-5, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-5

- Fill gallery. Практически то же самое, что и Bitmap gallery, но связанное с изображениями, предназначенными исключительно для "заливки" фигур и фона.

Теперь набросим на эту кнопку нормальное заполнение (fill) - чтобы выглядела как подобает всем благородным кнопкам. Давим ctrl+shift+I - выбираем какой-нибудь gif/jpg файл (вообще-то форматов Xara поддерживает туеву хучу). Кликаем на Bitmap gallery - по умолчанию эта кнопка находится среди других Galleries на панели в правом верхнем углу окна - открывается окошко, в котором представлены все изображения, добавленные извне. Чтобы назначить нашей кнопке заполнение, выберем кнопку, вернемся в окошко Bitmaps Gallery и выберем изображение. Вверху этого маленького окошка есть кнопки Insert (сделать копию изображения в документ), Fill (то, что нам нужно - заполнить фигуру изображением), Transp (задать прозрачность изображением - например, можно вырезать куски из фигуры), Background (задать фон этим изображением), Trace (Bitmap Trace - позволяет перегнать изображение с заданной четкостью из растрового - побитового - в векторное, над которым можно извращаться каким угодно способом со всеми инструментами Xara), Plug-ins (то, что можно делать над самим изображением. Сюда же можно подключать плагины от Adobe Photoshop`ы).

Заодно можно назначить фон странице - впоследствии можно будет генерировать прозрачные gif`ы, которые лягут на выбранный фон так, словно они там и были.

Теперь немного прозрачности - кликаем на Transparence Tool. Протягиваем прямую вдоль всего прямоугольника слева направо. Вуаля! Осталось только убрать белую линию границы - это можно сделать кликнув правой кнопкой мыши на диагональную сеточку внизу слева. Там же находится вся используемая палитра. Клик левой кнопкой приведет к заполнению фигуры указанным цветом. А сеточка - цвет просто не отображается. Сделаем копию уже созданного фона для кнопки. Развернем ее по горизонтали с помощью кнопки "Flip horizontally" на верхней панели (выглядит как два прямоугольных треугольника). Наложим друг на друга немного отступив с края... Уже неплохо. Нужно добавить надпись. Для этого, естественно, воспользуемся Text Tool. Укажем шрифт и размер. Введем банальное "OK". Накладываем текст поверх кнопки. Теперь было бы неплохо сделать так, чтобы вся эта хрупкая композиция не развалилась при переносах, поворотах и т.д. Это можно легко сделать, создав группу (group). Для этого нужно выделить все изображения/фигуры и нажать ctrl+G. Все, теперь кнопка полностью готова. Можно запросто таскать ее за "воротник" по всей странице и растягивать - все элементы кнопки будут повторять те же действия.

Немножко повеселимся - создаем 99-конечную звезду побольше. Накладываем на нее (заливаем) изображение красной розы. Убираем границу. Ууу... Всего пара-тройка действий, а эффект уже неплохой. Щелкаем на Shape Editor Tool. Изменяем немножко луч, оттащив его на несколько пикселей в сторону - все лучи изменятся, представив очень даже неплохую вариацию для логотипа какой-нибудь фирмы, торгующей цветами, или сервера виртуальных цветов.


Спецвыпуск хакер, номер #002, стр. 002-090-6, Corel XARA и Corel XaraWebstyle

Corel XARA и Corel XaraWebstyle

Спецвыпуск хакер, номер #002, стр. 002-090-6

Вот что получилось у меня в результате всех этих манипуляций:

В принципе не стоит рассматривать Xara и XaraWebstyle как отдельные программные продукты. Смесь результатов от них может оказаться гораздо эффектней, чем изображение, созданное в одной только Xara или в одной XaraWebstyle. В общем, экспериментировать, экспериментировать и еще раз экспериментировать, как завещал нам Кевин Митник. Желаю удачи в экспериментах с Xara и XaraWebstyle.


Спецвыпуск хакер, номер #002, стр. 002-094-1, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-1

Автор: M.j.Ash (m.j.ash@xakep.ru)

Если ты решил создать свою пагу, то я, в свою очередь, решил рассказать тебе о всяких полезных Сетевых местечках, которые помогают начинающим веб-мастерам делать свои сайты максимально качественно! Сейчас я постараюсь, что бы твоя веб-страничка получилась гораздо круче, чем у твоих друзей-приятелей. Тебе такого обещания достаточно? Тогда подключайся к Сети и в путь!

БЕСПЛАТНЫЕ ГРАФИКА И ШРИФТЫ

Начнем с того, что графическое оформление твоей веб-странички должно радовать глаз. Кстати, о самом слове "веб-страничка"... Ты не находишь, что оно звучит как-то несолидно? Так не пойдет! С этого момента твое лихое начинание я буду называть Интернет-проектом. Итак, твой первый Интернет-проект не должен выглядеть так же отвратно, как плохо застиранные памперсы. Какой оптимальный рецепт? Этого, увы, никто не знает. Сейчас я просто подскажу тебе пару реальных сайтов, которые с радостью вывалят на тебя тонны высококачественных фотографий. И, заметь, этими фотографиями ты сможешь пользоваться совершенно честно и открыто. А тем, кто гордо украшает свои личные хоум пэйджи фотографиями из фирменной библиотеки изображений и, по наивности душевной, думает, что об этом никто и не догадывается, я советую тебе писать в гостевые книги всякие гадости...

Впрочем, не будем отвлекаться! Давай лови первый URL:

FreeFoto.Com

http://www.freefoto.com

FreeFoto.Com - это один из самых больших архивов в Интернете, битком набитый классными фотками. На этом сайте собрано более 6000 фотографий. Они разбиты на 30 разделов и 299 подразделов. Основная их тема: человек и все, что его окружает. Но это не значит, что если тебе вдруг понадобится фотография одиноко бредущего по пустыне верблюда, то тебе придется идти на другой сайт. Просто загляни в раздел Animals или же воспользуйся поиском по сайту. Хотя за изображением кита или белого медведя все же лучше сразу иди на:

NOAA Central Library

http://www.photolib.noaa.gov

NOAA - это сокращение от National Oceanic and Atmospheric Administration. Сам понимаешь, что сайт с таким названием больше интересуется брачными заплывами дельфинов и бодрым полетом тайфуна через пустыню Нью-Мексико, чем трудовыми буднями французской швеи-мотористки. Но если тебе нужны кадры из жизни первопроходцев-полярников, эксклюзивные изображения обитателей морских глубин или фотографии необычных природных явлений, то теперь ты знаешь, куда обратиться. Приблизительный размер архива - 10000 оцифрованных фото. Все они разложены по разделам-альбомам. Кроме того, система поиска позволяет быстро находить интересующие тебя сюжеты.

Philip's House of Stock Photography

http://db.photo.net/stock

Сайт всего одного профессионального фотографа, но поскольку 6000 собранных в одном месте высококачественных фотографий говорят сами за себя, я и его решил включить в этот обзор. Все фотки этого сайта, как, впрочем, и те, что ты можешь взять на предыдущих двух - бесплатны для некоммерческого использования. То есть ты можешь смело лепить их на свою веб-страничку... Пардон - Интернет-проект. Большой минус Philip's House of Stock Photography в том, что фотки здесь раскиданы по СD с ничего не говорящими именами, так что тебе придется обходиться одним только поисковым механизмом.


Спецвыпуск хакер, номер #002, стр. 002-094-2, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-2

ArtToday

http://www.arttoday.com

Эй, я вижу, ты заскучал! Тебе нужны не заготовки, которые придется долго править в Фотошопе. Тебе готовые элементы графического оформления веб-сайтов сразу подавай?!! Если так, то наша следующая остановка - сайт ArtToday. Здесь после бесплатной регистрации тебе откроется библиотека из 43 тысяч графических изображений, включая 20 тысяч анимированных гифов, 8 тысяч иконок, полторы тысячи маркеров (bullets), 3 тысячи бэкграундов, столько же кнопок... и еще много-много всего. Имеется поиск, предпросмотр. Это по-настоящему ценное для начинающего веб-мастера место. Хотя что-то подсказывает мне, что тебя, как начинающего, больше всего интересуют файлы GIF c анимацией? Понимаю! Даю дополнительный линк:

Animation Factory

http://www.animfactory.com

12 тысяч анимированных гифов ждут тебя по этому адресу. Культовое место. И хотя поиск отсутствует, разбивка по категориям просто великолепна. Многие анимации - трехмерные. Для каждого изображения приводятся его размеры и вес. Как и на ArtToday, все изображения выполнены единой группой художников. Поэтому они все довольно качественные, профессиональные. Оно и понятно! Ведь цель этих двух сайтов: показав часть своих богатых коллекций, заставить веб-мастера захотеть большего и оплатить полный доступ. Совсем другое дело - полностью бесплатные сайты.

Absolute Web Graphics Archive

http://www.grsites.com/webgraphics

Возьмем, к примеру, один из лучших сайтов в этой категории - Absolute Web Graphics Archive. Его коллекция также довольно внушительна: более 10000 графических элементов. Но трудность в том, что все они понадерганы из различных источников, так что, прежде чем ты наберешь для своего сайта полный комплект похожих друг на друга и соответствующих выбранному тобой стилю элементов, тебе придется слегка попотеть.

1-Click-Clipart

http://www.1-click-clipart.com

А вот на этом сайте, а также на Сlipart.Com (www.clipart.com) можно найти рейтинги набитой халявной графикой мест. С их помощью легко узнать, какой сайт действительно крут, а какой - всего лишь наглые потуги Васи Пупырышкина. Только не стоит западать исключительно на голые цифры! Сам подумай, что лучше: маленький вкусный пирожок с мясом или доверху набитое объедками помойное ведро? Короче, мой тебе совет: ищи небольшие авторские коллекции веб-графики - не ошибешься! А это тебе образец:

ProDraw Graphics

http://www.prodraw.net

На этом сайте тебя ждет отличная библиотека иконок, выполненных в едином стиле, которую ты можешь забрать целиком, скачав один двухмегабайтный архивчик. Кроме того, тут хранится неплохой набор профессионально заделанных батонов (Buttons:) и 3D image-й. Этот сайт из тех, что ты должен посетить в первую очередь.

STUFF - Banner Warehouse

http://www.stuff.uk.com/banners

А теперь я представлю тебе подборку узкоспециализированных сайтов. Итак, первым у нас идет Banner Warehouse с его семью сотнями баннерозаготовок.


Спецвыпуск хакер, номер #002, стр. 002-094-3, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-3

Logotypes library

http://www.logotypes.ru

Вторым - большое (около трех тысяч) собрание логотипов и товарных знаков в векторном формате Adobe Illustrator с возможностью поиска и предпросмотра.

Аbsolute Background Textures Archive

http://www.grsites.com/textures

Третьей в моем списке будет хорошо структурированная коллекция текстурок от Аbsolute Background Textures Archive. На данный момент в ней 3141 экспонат. И последним следует:

FreeButtons.Com

http://www.freebuttons.com

С его огромной библиотекой кнопок, точного размера которой не знает даже ее хозяин. Уф! С графикой все! На первое время этого должно тебе хватить. А сейчас давай-ка мы с тобой озаботимся другой животрепещущей темой - шрифтами.

Шрифтовой проект 'ВЕДИ'

http://vedi.d-s.ru

Я полагаю, приятель, что ты не так глуп, чтобы пользоваться в своем веб-творчестве содержимым компакта с лихим названием "Лучшая только что стыренная у фирмы ParaType тысяча русских шрифтов". Тем более что в русской части Интернета давно уже окопался симпатичный проект "Веди", где пылится вагон и маленькая тележка совершенно бесплатных шрифтов. Причем - самых разных. Начиная от оригинальных разработок и заканчивая русифицированными версиями наиболее интересных шрифтов зарубежных авторов.

БЕСПЛАТНОЕ МЕСТО ДЛЯ ИНТЕРНЕТ-ПРОЕКТА

У тебя была Идея. Ты любовно собрал необходимые материалы. По моим наводкам подобрал для своего первого проекта приятное графическое оформление. На ходу осваивая премудрости HTML, ты реализовал все свои задумки в виде набора связанных между собой веб-страниц. И что же у тебя получилось? Тешу себя надеждой, что не еще одна страничка юного "кулхацкера". Ну, ты их, наверное, и сам не раз встречал в Сети: черный фон, до боли знакомые анимированные гифы (вращающийся череп, пылающий факел и линия, истекающая кровью), десяток древних полуразложившихся программ... Один раз я пытался вразумить одного владельца такой вот странички. Я написал ему в гостевой книге: "Приятель, мне наплевать, что веб-мастер из тебя никакой и что все твои супер-проги давно устарели (кстати, а почему под словами "навороченный троян" у тебя скрывается эмулятор ZX-Spectrum-а?), но о том, что все архивы на твоей страничке заражены WinCIH-ом, хотя бы это ты должен знать?!!" И ты знаешь, что я обнаружил в "Новостях" этого сайта на следующий день? "Ура! Ура! В моей коллекции появился вирус ВинЧих! Брать здесь..." И все зараженные файлы так и остались на своих местах. Тьфу! Только ты не подумай - я ничего не имею против "хакерских" страниц! Просто ты сработай нормальный дизайн, протестируй свой софт, выкинь большую часть старья, а для оставшихся прог сделай нормальные комментарии и скриншоты. И ты увидишь, я первый скажу, что ты крут и пожму тебе лапу. Эээ... А чего это я на тебя набросился? Ты-то наверняка сделал все как надо! И мне уже давно пора рассказывать о том, где можно бесплатно пристроить твой HTML-домик! Начнем с

Chat.ru

http://www.chat.ru


Спецвыпуск хакер, номер #002, стр. 002-094-4, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-4

Это классика. После регистрации ты получаешь на этом сервере 10Мб для хранения файлов (7Мб для страниц на сервере и 3Мб для почты), независящий от провайдера почтовый ящик, а также Гостевую книгу, которую можно использовать как веб-конференцию. Если ты зарегистрируешься под именем vasya, то твои страницы будут доступны по адресам: www.chat.ru/~vasya, vasya.chat.ru, vasya.euro.ru или vasya.pochta.org. Есть он-лайн-редактор, с помощью которого ты можешь быстро слепить свою первую веб-страницу. Но знай - такой фишкой не воспользуется ни один уважающей себе веб-мастер... Файлы на Chat.ru можно заливать как при помощи браузера, так и по FTP.

Новая почта

http://www.newmail.ru

7 метров под страничку - маловато будет? Тогда иди и получи на сервере "Новая почта" 16 Мбайт дискового пространства с возможностью ftp-доступа. Твои странички в этом случае будут откликаться на vasya.hotmail.ru и vasya.newmail.ru. Кроме того, тут ты получишь в придачу 3 почтовых ящика, грабить содержимое которых можно любым почтовым клиентом по протоколу POP3. Эээ... Правда, это пока все, что Новая почта предлагает в плане дополнительного сервиса.

i-Connect

http://home.i-connect.com

А вот это уже интересно. На этом серваке пользователю, зарегистрировавшемуся под именем vasya, выдадут 10 Mб под веб-страницы (vasay.i-connect.com, vasay.i-connect.ru), почтовый ящик на 10Мб vasay@i-connect.com (прием почты - по POP3), а также неограниченное количество e-mail-адресов вида: webmaster@vasay.i-connect.com, postmaster@vasya.i-connect.com или даже root@vasya.i-connect.com. Управление веб-страничками ведется по FTP-протоколу. Кстати, на i-Connect можно попробовать задействовать в своем проекте CGI-скрипты. Для этого их, правда, придется сначала выслать на имя администратора сервера для проверки. И, если проверка эта покажет, что они безопасны, и у админа будет хорошее настроение, то, возможно, их даже разместят на сервере.

Agawa

http://hosting.agava.ru

Хе-хе. А теперь я покажу тебе, к чему ты действительно должен стремиться. Записывай: неограниченное место для Web-сайта, домен третьего уровня, запуск твоих CGI-скриптов, доступ к базе данных (MySQL), форвардинг всей почты домена на твой e-mail, FTP-доступ и доступ к лог-файлам сервера. Записал? А теперь прикинь - все это действительно может обломиться тебе совершенно бесплатно. Почти. В качестве оплаты от тебя попросят лишь разместить рекламный баннер внизу или вверху твоих страниц. Это как раз то, о чем говорится на ProNet в статье "Тепленькое местечко" (pro.net.ru/fiction/place.shtml - обязательно почитай!). Но... Для этого требуется, чтобы у тебя на руках был полностью готовый веб-проект, интересный не только черно-белыми фотками твоего любимого пса Набалдашника, насилующего соседский матричный принтер.

FreeWebspace.net

http://www.freewebspace.net

Эй! Это кто это там со свирепым прищуром приготовился метнуть в меня тяжелый предмет? Да, я действительно не включил в эту статью многие известные серверы, которые с удовольствием приютят твой первый веб-сайт. Это не значит, что я не знаю о существовании XOOM (www.xoom.com) или Angelfire (angelfire.com). Просто я стараюсь помочь начинающему юзеру как можно скорее превратиться в продвинутого веб-мастера. А инструкция по эксплуатации на русском языке на первых порах изрядно облегчает этот процесс. Но, с другой стороны, выбор бесплатного хостинга - дело серьезное. Так что ты не ограничивайся только одним источником информации (мной), :) а полазай в Сети, сбегай на www.citycat.ru - подпишись на специализированную рассылку "Бесплатное качественное место для вашего сайта" и, как минимум, зайди на сайт FreeWebspace.net и узнай, какие предложения приготовили для тебя иностранные компании.


Спецвыпуск хакер, номер #002, стр. 002-094-5, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-5

БЕСПЛАТНЫЕ СЧЕТЧИКИ

Стало быть, нашлись добрые люди, которые согласились совершенно без-воз-мез-дно пристроить у себя на сервере твой Интернет-проект? Это хорошо. Значит, теперь о том, что ты "чиста веб-мастер", будут знать не только твои приятели по курсам кройки и шитья. Что ж, раз ты теперь почетный сайтовладелец, то, значит, следующим твоим действием должно стать навешивание на веб-страницы своего любимого детища огромного числа самых разнообразных счетчиков. Ведь именно вдумчивое и каждодневное снятие показаний с этих счетчиков - и есть то, чем все начинающие сайтовладельцы любят заниматься чаше всего. А ты думал, что они все работают не покладая рук, раз за разом обновляя информацию на своих веб-страничках? Хе-хе, наивняк. Итак, счетчики... Ты, конечно, можешь выбрать какого-нибудь примитивного уродца от владельца твоего бесплатного хостинга, но это не есть круто. Вряд ли его показаниям поверят твои будущие рекламодатели (ты же, разумеется, планируешь жить безбедно, за счет вывешенного на твоем сайте баннера, не так ли? :) Да и ты, наверное, хочешь знать не только то, сколько раз просматривали твои веб-страницы, но и то, откуда приходили к тебе посетители, сколько из них мазохистов, припершихся уже второй раз за день, и т.д. и т.п. Короче говоря, счетчик должен еще уметь выдавать статистику посещений. А значит, он должен быть не простой, а продвинутый. От какой-нибудь известной фирмы, которой все доверяют. Например:

Rambler Top100

http://counter.rambler.ru/top100

Счетчик Rambler-а является самым авторитетным в Рунете. Каждый новый сайт спешит украсить им свои веб-страницы. Оно и понятно: счетчик Rambler-а довольно неплохой - быстрый и надежный. Если ты выберешь этот счетчик, то и глазом не успеешь моргнуть, как окажешься в популярнейшем рейтинге Rambler Top 100. И хотя я что-то сомневаюсь в том, что твой сайт сразу прыгнет на первые строчки "хит-парада", тем не менее, на некоторый приток посетителей ты можешь смело рассчитывать даже болтаясь в замыкающей двадцатке. А теперь о грустном: так уж получается, что именно этот счетчик выдает самые низкие цифры посещаемости, сопровождая их не самой полной статистикой.

TopList

http://top.list.ru

Зато вот у этого счетчика со статистикой все в порядке. С ним ты будешь в курсе того, из каких мест приходят к тебе посетители, откуда они родом, какая у них версия браузера, а также узнаешь массу другой полезной инфы. Засадив на свою веб-страницу этот счетчик, ты, опять же, примешь участие в многоуровневом рейтинге. Правда, в другом, по кличке TopList, но тоже довольно нехилом. Кстати, цифры этот счетчик выдает немного повыше Rambler-овских, так что сам понимаешь... Ну, и чтобы окончательно тебя запутать:


Спецвыпуск хакер, номер #002, стр. 002-094-6, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-6

RankeR

http://stat.ranker.ru

Как и другие счетчики, RankeR, основываясь на статистике, любезно сообщает тебе, какое место ты занимаешь в его собственном рейтинге ресурсов Интернет. А еще RankeR известен своим покровительственным отношением к ресурсам, которые только недавно зарегистрировались. И надо признаться, что в категорию "Новички" я сам довольно часто заглядываю, особенно когда готовлю для Х очередной выпуск рубрики "World Wild Web". ;)

SpyLOG

http://www.spylog.ru

Значок этой системы статистики был обнаружен мной на морде ixbt.com, а поскольку я твердо уверен, что этот сайт не будет увешивать себя всякими "левыми" мульками, то я подумал: "Почему бы и нет?" - и добавил SpyLOG в общую кучу. Обрати внимание, что SpyLOG позиционируется не как счетчик, а именно как целая "система статистики". А это, типа, намного круче! Так что ты на всякий случай зайди на домашнюю страницу этой "системы" и проверь - нужны тебе эти "600 статистических отчетов, сгруппированных в 53 динамические формы", или нет.

В любом случае, как я уже говорил, никто не мешает тебе забабахать на свои бедные веб-страницы несколько счетчиков за раз, а потом оставить только те из них, которые тебе понравятся. Дополнительную инфу по всему этому бухгалтерско-учетному делу ты найдешь в статье "Кто к нам ходит?" (www.emedia.ru/n7/counters.asp) Интернет-журнала eMedia, а более углубленное исследование на эту тему ты обнаружишь на сервере Promo.Ru в разделе "Сравнительные характеристики популярных счетчиков" (www.promo.ru/counters.html). Но это - потом. А сейчас у нас на очереди:

БЕСПЛАТНЫЕ ГОСТЕВЫЕ КНИГИ И ФОРУМЫ

Если ты хочешь знать все, что твои посетители думают о твоем веб-сайте, а также то, как они оценивают твои способности веб-дизайнера - заведи себе гостевую книгу. Это же дело пяти минут! Зато с помощью гостевухи ты сможешь быстро и приятно общаться с поклонниками твоего ресурса и также быстро и не менее приятно объяснять его недругам всю глубину их интеллектуально-физической ущербности.

Guestbook.ru

http://www.guestbook.ru

Бесплатные гостевые книги выдают сейчас все кому не лень, но гостевухи "от PeterLink-а" (www.guestbook.ru поддерживает питерский провайдер Peterlink) нравятся мне больше всего. Какие-то они правильные, солидные. Потратил несколько минут на регистрацию, и вот уже тебе на руки выдают несколько строк, которые ты должен вставить в html-код своей страницы. И все! Хотя, конечно, при желании никто не мешает тебе подогнать дизайн гостевой книги под дизайн своего сайта... Гостевуха "от PeterLink-а" может сама по себе "разбиваться" на страницы, что сокращает время ее загрузки. Если захочешь, она даже будет "стучать" тебе на e-mail, если какой-нибудь перец придет и измарает ее новой записью.


Спецвыпуск хакер, номер #002, стр. 002-094-7, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-7

Guestbook.jettech.ru

http://guestbook.jettech.ru

На Guestbook.jettech.ru ты тоже сможешь обзавестись неплохой гостевухой, свободной от рекламной нагрузки. Среди приятных наворотов гостевых книг от Guestbook.jettech.ru можно отметить не только возможность легкой настройки их внешнего вида, но и мощные механизмы борьбы с неприятными тебе посланиями, начиная с ведения словаря запрещенных слов (сообщения, содержащие такие слова, не будут записываться в книгу) и заканчивая посылкой на далекий Хутор перцев с неугодными IP адресами. Вместе с их посланиями, разумеется!

BOARDhost

http://www.boardhost.com

Хотя, если задуматься, то все эти гостевые книги - это ерунда и баловство. Ты же, как настоящий кул хацкер, привинтишь к своему веб-сайту навороченную борду и заделаешься там злобным админом. Посетители будут устраивать на твоей борде приятные междусобойчики, а ты будешь их только подначивать, подкидывать темы для обсуждений и время от времени отвешивать пендели неугодным. Насколько я знаю, лучшие доски из бесплатных делают на BOARDhost, но если русский хелп является для тебя обязательным условием, то попробуй посмотреть на:

Netale

http://www.netale.net/ru

Там сейчас бесплатно выдают нечто жутко навороченное со странной надписью "web-книга" на этикетке. Насколько я понял, при должном уходе из этой "web-книги" тоже получается вполне приличная борда с легко настраиваемым дизайном и вполне приличными возможностями администрирования. Что приятно: если ты вдруг поймешь, что конференция на твоем сайте нужна, как толстой попе - бантик с кружевами, то, немного покопавшись в настройках, можно легко превратить web-книгу в обычную гостевуху или вообще - в ленту новостей.

ДРУГИЕ БЕСПЛАТНЫЕ ПРИМОЧКИ

Все, что тебе потребуется для создания нормального сайта, мы уже рассмотрели. А теперь давай еще глянем на что-нибудь такое, без чего твой сайт вполне может обойтись. Я, к примеру, совершенно уверен, что твоему сайту совершенно не нужны

Бесплатные Чаты

http://chat.land.ru

Но если ты чувствуешь, что без чата твой сайт не будет полноценным, а ты - счастливым, то не мучайся - иди на этот сервер и возьми себе один или два. Кстати, тогда ты сможешь честно заявлять о том, что один из разделов твоего сайта обновляется постоянно... Ну, как минимум один раз в 30 секунд! :)

Voter.Land.Ru

http://voter.land.ru

А опрос общественного мнения у себя на сайте устроить слабо? Интересно же выяснить, какие лично у тебя шансы стать президентом России? И если результаты голосования тебя не устроят, то (все как в жизни!) :) ведь у этих опросов очень удобная система администрирования и настройки... :)

Web Master's Club

http://www.fido7.com/wmclub

Впрочем, возможность устраивать собственные опросы - это действительно полезная вещь! А если тебе внезапно захочется повалять дурака? Тогда с помощью Web Master's Club ты всегда сможешь бесплатно "защитить" какой-нибудь раздел своего сайта паролем, выложить туда десятка два веселых картинок, а потом выдавать пароли избранным. За особые заслуги перед Отечеством... в твоем лице. :)


Спецвыпуск хакер, номер #002, стр. 002-094-8, Ресурсы веб-мастера

Ресурсы веб-мастера

Спецвыпуск хакер, номер #002, стр. 002-094-8

БЕСПЛАТНЫЕ НАГРАДЫ

Что ж, дельце сделано! Немного потрудившись, ты стал счастливым обладателем своего собственного веб-сайта. И теперь на этом сайте постоянно тусуются разные перцы, которые чуть что шлют тебе письма, в которых уважительно называют тебя приятным словом Webmaster. А это значит, что тебе осталось сделать только одно дело - наградить себя, любимого, за все эти мучения. Только не говори мне про все эти сетевые конкурсы. Если хочешь, можешь почитать на Promo.Ru статью "Награды в Интернете". Я же лично терпеть их не могу, поскольку теперь каждый второй владелец домашней странички взял моду требовать, чтобы я проголосовал за него на конкурсе Золотой URL. Тьфу!

The Corporation: Icon Gallery

http://www.thecorporation.com/icon/icon.html

Хотя украсить свой сайт забавной наградой-иконкой все же стоит. Давай-ка сходи на страничку фирмы The Corporation и выбери себе подходящую. Да, да! Просто пошел и взял! Не думаю, что ты вернешься оттуда с пустыми руками. Обязательно повесишь себе на сайт что-нибудь вроде "Porn site award... President's choice" или же "the truth is out there... on another site".

Free Award Icons Library

http://mir.glasnet.ru/~awicon

Сайт Free Award Icons Library развивает идеи The Corporation на нашей российской почве. Его подзаголовок гордо гласит: "Награди себя сам". И такой подход мне по душе. Это хороший сайт с продвинутым дизайном и большим количеством оригинальных наград. Так что ты теперь знаешь, куда обращаться за наградой типа: "Выживший на базе Windows NT" или "Привет от провайдера".

Free & Funny Web Awards

http://forecast.ru/~brujo/awards/awards.htm

И в заключение - еще одна коллекция забавных наград от нашего соотечественника, на которую тебе стоит взглянуть... Ну а я, пожалуй, удалюсь. Не люблю долгие прощания. А ты это... Чеши пузо - делай сайты!


Спецвыпуск хакер, номер #002, стр. 002-102-1, Как зарегистрировать свой домен

Как зарегистрировать свой домен

Спецвыпуск хакер, номер #002, стр. 002-102-1

Андрей Князев (knyazev@xakep.ru)

Что нужно человеку для полного счастья? Каждый отвечает на этот вопрос по-разному. Но вряд ли найдется такой человек, который откажется от того, чтобы заполучить собственный домен. Заполучить - именно то слово, описывающее все мытарства обыкновенного кульного хацкера, решившего обзавестись собственным доменом в зоне .ru.

Немного теории

Это, конечно, прописные истины, но напомнить их не мешает. На сегодняшний день существует два основных типа доменов. Есть домены типа Geographical (us, ru, nu, cc и проч.) и несколько экстерриториальных доменов, основные из которых - com, net и org.

То, что домен стоит денег, объяснять никому не нужно. Домен довольно давно стал предметом купли-продажи. Самые удачливые, купив несколько лет назад "красивые" имена за сотню-другую баксов, продали их сегодня за миллионы. Но это все исключения из правил. Причем "котируются" только домены в .com и .net. Тем не менее, все сегодня говорят о подъеме е-коммерции, об инвестиционной привлекательности и прочих высоких материях. Так может быть и в России настала пора покупать "красивые" имена. Благо, что к этому есть все возможности.

Насколько просто купить домен

Экстерриториальный домен купить простому смертному в России самому практически невозможно. Буржуйские домены делегируют (т.е. выдают в пользование) нероссийские регистраторы. Т.е. необходимо переводить деньги за границу. Сделать это естественнее всего по кредитной карте, но очень немногие наши кредитные карты принимаются к оплате. Так что если кому-то страсть как приспичило купить домен в .com'e, то проще всего попросить об этом своего провайдера, благо что все благовоспитанные провайдеры оказывают услуги по делегированию бесплатно.

Совсем другое дело домен второго уровня в зоне .ru. (Домены третьего уровня являются собственностью тех, кто зарегистрировал домен второго уровня, так что в общем случае какого-то единого способа регистрации в доменах третьего уровня не существует).

Делегированием доменов второго уровня в географической зоне .ru занимается одна-единственная организация - РосНИИРОС - Российский Научно-Исследовательский Институт развития общественных сетей, по-английски RIPN - Russian Institute for Public Networks (www.ripn.net).

Именно в этой некоммерческой! организации располагается первичная база DNS в России. Именно она вносит изменения в эту базу. Любые изменения в данных касательно доменов (в дальнейшем речь будет идти только о доменах второго уровня) в зоне .ru невозможны в обход RIPN'а.

Стоимость домена в .ru до недавнего времени была довольно высока - 100 долларов в первый год и по 60 каждый последующий (цены без НДС - с налогом выходило по $120 - $72 соответственно). Но ветер перемен захватил и эту чрезвычайно консервативную организацию, с 1 февраля цена радикально снижена - 30 долларов за любой год. С налогом цена получается $36 в год. Более чем в 3 раза меньше за первый год и в два раза меньше за любой последующий.

Приплюсуйте к этому снижение цен на хостинг - 10Мб сервер можно купить не дороже $10 в месяц, домены 3 уровня еще дешевле. Так что получается, что весна - самое время покупать домены. :)


Спецвыпуск хакер, номер #002, стр. 002-102-2, Как зарегистрировать свой домен

Как зарегистрировать свой домен

Спецвыпуск хакер, номер #002, стр. 002-102-2

Как купить домен Я.ru

Ну а теперь о главном - как именно можно купить домен. И что для этого нужно.

Домен невозможно купить, если невозможно обеспечить для него техническую поддержку, т.е. до того как покупать домен, необходимо решить, где он будет размещаться - у коммерческого провайдера - тогда нет проблем. На собственной машине (с собственным каналом) :) - тогда необходимо, чтобы на этой машине стоял DNS сервер (который и будет отвечать за поддержку домена).

После того, как все готово, можно начинать процедуру регистрации - делегирования.

В принципе нет каких-то смертельных и принципиальных различий между организацией и частным лицом. Но все же регистрировать домен на организацию немного "престижнее" и проще.

Для организации потребуется знать все ее банковские и налоговые реквизиты (счет, ОКПО и прочие ИННы). Для того, чтобы зарегистрировать домен на себя любимого, достаточно только иметь голову на плечах, нужную сумму в кармане и работающий name-сервер.

После того, как все компоненты собраны воедино, :) можно идти на сервер RIPN'а (http://www.ripn.net/nic/dns/reg.html) и начинать пошаговое заполнение регистрационной формы.

На входной странице для регистрации (http://www.ripn.net/nic/dns/reg.html) - есть 4 возможности заполнения формы - для организации (из 5 шагов) или для простого смертного - частного лица (из 9 шагов). Каждую форму можно заполнять как по обыкновенному http, так и по "шифрованному" https - http - secured. Толку от этого secured в принципе не много, но для душевного спокойствия вполне полезно. :)

После того, как все сделали мучительный выбор, в дело вступает регистрационный скрипт - http://www.ripn.net/nic/dns/form/reg.cgi.

Сперва необходимо будет выбрать имя домена

До того, как выбирать имя, лучше сходить на http://www.ripn.net/nic/whois/ - сервис Whois по базе данных RIPN'а и убедиться, что нужный домен еще свободен (т.е. не найден в базе).

На следующем шаге надо выбрать администратора домена. Это может быть как организация, так и частное лицо.

После этого надо выбрать "лицо, на которое будет зарегистрирован домен". Это очень важное поле. Тот, кто будет указан "лицом" домена, :) фактически будет его хозяином, даже в случае регистрации домена на организацию.

Кстати, весь процесс регистрации снабжен подробными faq'ами и tutoram'и. Ошибиться или заблудиться невозможно. :)

В любом случае после выбора "лица" это "лицо" должно зарегистрироваться (или уже быть зарегистрированным) в базе данных РосНИИРОСа.

После завершения процедуры регистрации (персоны) будет выдан уникальный, т.е. для каждого разный, nic-handle. Nic-handle имеет вид ФИОN-RIPN. ФИО - соответственно ФИО по-английски, N - число, которое появится, если инициалы ФИО уже повторялись в базе RIPN'а.

Далее нужно выбрать плательщика за домен. Тут, как и несколько шагов назад, можно указать как себя, любимого, так и организацию. Именно плательщик должен будет заключить официальный договор (купли-продажи услуг) с РосНИИРОСом. В большинстве случаев компания плательщик - это компания провайдера, которая регистрировала домен.


Спецвыпуск хакер, номер #002, стр. 002-102-3, Как зарегистрировать свой домен

Как зарегистрировать свой домен

Спецвыпуск хакер, номер #002, стр. 002-102-3

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

После прохождения этого каверзного этапа можно смело выписывать себе платежные документы и бежать пить пиво. Через несколько дней (обычно 1-2, но всяко бывает) домен будет делегирован, и усе, шеф, - можно смело кричать на весь мир, писать на визитках, давать рекламу и т.д. Пиплы - зайдите на www.ВасяПупкин.РУ. Тут такое есть!!!


Спецвыпуск хакер, номер #002, стр. 002-104-1, Интервью для Х с одним московским провайдером

Интервью для Х с одним московским провайдером

Спецвыпуск хакер, номер #002, стр. 002-104-1

Андрей Каролик (andrusha@sl.ru; http://www.ruschannel.xxi.ru)

Надоело сидеть дома, есть бананы и пассивно писать в журнал статьи. :) К тому же темой статьи является РОСНИИРОС, хостинг и все, что с этим связано. Разжевывать, что надо зайти на http://www.ripn.ru (рис. 1) и проштудировать содержимое этого сайта, показалось занятием скучным и малокалорийным. В результате хорошее настроение и бутылочка пива :) занесли меня к одному из московских провайдеров - Синхролайн. К моему предложению дать интервью по нужной мне тематике в журнал Х отношение было крайне положительным, и работа

Закипела). :)

Сначала я познакомился с Сафроновым Евгением, ком. директором ТКК Синхролайн, но постоянные звонки и прочие тех. проблемы ну никак не позволяли нормально поговорить об интервью. Ну, я, правда, особо не огорчился и не отказался от чашечки кофе, которую притащила нач. отдела маркетинга ТКК Синхролайн Бакланова (Воу! Слышь, Бивис, он сказал - Бакланова! Круто, хехе... - прим. Холода) Мария, я в принципе был не против, тем более, что Маша была ну очень симпатичной женщиной. :) Первые попытки сделать интервью закончились полным провалом: сначала чересчур официальная беседа, явно не подходящая по стилистике журналу, а потом смех, еще кофе и расспросы про жизнь. :) Кое-как все-таки интервью сделать удалось (и потом не говори, что расспросить человека о работе проще пареной репы). Вот, читай, что вышло:

AK: Для начала немного о себе в качестве вступления, страна должна знать своих героев. :)

BM: Бакланова Мария, 22 года. Закончила д/с, школу и заведение по обучению банковским примочкам. В настоящее время - начальник отдела маркетинга ТКК Синхролайн (www.sl.ru). Компания молодая, но серьезная, создана в кризисное время 1998, на пепелище Мегабит-7 (Note: для тех, кто не знает, ТКК - телекоммуникационная компания).

AK: Ну так вот, Маш, хотелось бы узнать, что за феня РОСНИИРОС? Почему регистрацией доменов занимаются именно они, как занимаются и что имеют с этого сами?

BM: Они "клеят" ярлыки, выбранные заказчиком, на продукцию заказчика за деньги заказчика. Обеспечивает информацию о не купленных ярлыках и цены на их регистрацию. Проще говоря, :) дяди монополисты в деле регистрации доменов собрались в одну команду для того, чтобы не было в этом деле бардака. А то будут все, кому не лень, лезть домены регистрировать и придумывать для этого разные способы или тыркаться, как слепые котята, не зная, куда приткнуть свой домен. Тут-то и могут подсуетиться не чистые на руку люди и облапошить не слишком понимающих в этом людей.

AK: Если меня прибило зарегистрить домен, то куда мне податься и как это сделать?

BM: Самая простая процедура регистрации:

- обращаешься к своему провайдеру (у которого поддерживается сайт);

- он заполняет и/или просит тебя заполнить анкету;

- оплачиваешь эти услуги;

- проходит несколько дней, и тебе сообщают, что домен зарегистрирован.

AK: Нет, ну а если я хочу все сделать сам и просто крут до нельзя, что так и тянет зарегистрировать самому? :)

BM: Самодеятельность хороша только в сфере танцев и плясок, а также хорового народного пения в колхозе "Светлый путь". :) Но есть вариант! Если ты создашь проект, который будет интересен не только тебе, а это будет действительно стоящее зрелище, то можно обратиться к провайдерам или фирмам, которые предлагают хостинговые услуги, со своей идеей и, скорее всего, тебе


Спецвыпуск хакер, номер #002, стр. 002-104-2, Интервью для Х с одним московским провайдером

Интервью для Х с одним московским провайдером

Спецвыпуск хакер, номер #002, стр. 002-104-2

повезет и тебе дадут халяву.

AK: Халява? :) Хорошее слово... :)) Маш, а есть свои советы и напутствия?

BM: Принял решение - действуй, а не жди, когда твой ярлык будет висеть на чужом сайте. Есть такая маза, что русскому хорошо, то немцу - смерть. Можно давать кучу более-менее полезных советов и откидывать, как на дуршлаг, тонны лапши на уши страждущих знаний. А на самом деле, все мнения в итоге могут оказаться весьма субъективными. Просто нужно провентилировать этот вопрос

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

AK: Зарегистрировать - это здорово, но если регистрировать за деньги, то сколько стоит домен и сколько стоит услуга провайдера зарегить домен?

BM: Регистрация домена второго уровня в РОСНИИРОС, начиная с 01.02.2000, в зоне .RU стоит 36 у.е. Можно и задаром, если ты найдешь интересный проект и докажешь, что это стоит того, чтобы с тебя за это не брали ни копейки. Заинтересуй провайдера или хостинговую компанию. Докажи, что ты не лаптем щи хлебаешь, а самый крутой Супермозг или, как минимум, не Иван-дурак,

всю жизнь лежащий на печи, ведь, как известно, под лежачий камень вода не течет. Дерзай. А о стоимости можно осведомиться в прайс-листах (такие листочка с расценками) или по телефону, где приятный голос тети тебе расскажет, что и как (101 вопрос Об Этом, то, что вы хотели узнать, но боялись спросить) :). Не бойся, тети в телефоне не кусаются... просто не достанут. :) Не бойся брать и спрашивать прайс-листы, они раздаются бесплатно, и в них содержится куча полезной и интересной тебе информации. Прайс-листы бывают не только на бумажках, но и в Интернете. Зайди на поисковые ресурсы и найди провайдерские или хостинговые фирмы, предоставляющие нужные тебе услуги.

AK: Маш, а что ты знаешь о добыче халявных доменов и твое отношение к этой проблеме?

BM: Не стоит забывать, что совсем бесплатный сыр бывает только в мышеловке. Халявные домены имеют, как правило, кривые имена (это не относится к провайдерским и хостинговым компаниям), как, например, бесплатные места на штатовских или других сайтах. Такое имя в жизни не запомнишь, а методом искусственного тыка или случайно вряд ли найдешь. Достойная вещь должна иметь

достойный адрес. Это как шмотки. Одно дело, когда ты купил это на вьетнамском рынке, и все это видят, и это не скроешь, другое дело, когда на твоей куртке, джинсах, модной кофте красуется фирменный лейбл, и качества она соответственно гораздо выше, и ты ловишь на себе завистливо-восхищенные взгляды, мол, ууууу, крутааа. ;))) Главный товар в Интернете - информация или ее отсутствие. :) Есть информация - размещай ее так, что бы она была доступна потребителю. Доменное имя (или твою доменную зону) можно сравнить с витриной: по ней покупатель/потребитель делает свою первую оценку, судит о твоей надежности.


Спецвыпуск хакер, номер #002, стр. 002-104-3, Интервью для Х с одним московским провайдером

Интервью для Х с одним московским провайдером

Спецвыпуск хакер, номер #002, стр. 002-104-3

AK: Я, вообще-то, имел в виду домены, которые ломают по поддельным или ворованным кредиткам. Что знаешь об этом и как к этому относишься?

BM: Этим пугают маленьких детей в продвинутых детских садах. Брать чужое в принципе не хорошо, это всем еще мамы должны были объяснить. :) Так же, как и тырить пятаки по карманам. А если это чужое еще и не стоит того, чтобы его брать, так, вообще, подобное занятие теряет всякий смысл. Есть варианты лучше, как говорится в одной известной рекламе. А потом, насколько я знаю,

за это могут привлечь к ответственности, а кому нужны лишние проблемы?

AK: Ну, а что ты, Маш, можешь сказать по поводу хостинговых компаний?

BM: Все они риэлторы: продавцы недвижимости под офисы, склады, магазины, квартиры, бомжатники, блат-хаты, малины, притоны и т.д. У каждого своя специализация или несколько. :)

AK: А занимаетесь ли вы, кстати, хостингом и регистрацией доменов?

BM: Да, мы активно занимаемся и хостингом, и регистрацией доменов, предлагая широкий спектр услуг по созданию, размещению и регистрации доменов. Наши расценки и услуги можно узнать, позвонив к нам в офис по тел.795-24-54, 230-79-27, а также на сайте www.sl.ru.

AK: Маш, ты вот сказала, что зарегить домен можно не потратив ни копейки, если проект стоящий. А как ваша компания относится к подобным проектам? Может ли кто-то придти просто-напросто к вам, вывалить на стол идею и надеяться на красивый доменчик? :)

BM: Да, можно. Есть реальный шанс для тех, кто действительно хочет чего-то добиться. Дельные идеи должны поощряться.

AK: Что ты можешь сказать читателю Х напоследок?

BM: Лучше пусть новое поколение будет проводить время в Интернете, чем в грязном расписанном подъезде, раскуривая бычок и лузгая семечки...

На этом месте кассета в моем диктофоне издала странный звук, и я понял, что зажевало-таки стерву. Попрощался с Машей, сказал "Спа-Си-Бо" и отправился в редакцию Х - материал сдавать, попутно сладко рыгая от неимоверного количества выпитого кофе.

Так вот сдал я его, а теперь подведу итог. Если тебе нужен домен для того, чтобы всем показать свою рожу или первые знания в ХТМЛ, то тебе вполне подойдет бесплатный домен аля da.ru.

Вот тебе небольшой списочек подобных адресов, где можно взять домены на халяву:

http://www.xoom.com - 11 Mb, скорость средняя, бывает в отключке

http://www.tripod.com - 10 или 11 Mb, быстрый, гостевая книга, ftp

http://www.hypermart.net - 10 Mb, быстрый, ftp

http://www.angelfire.com - 5 Mb, средняя скорость, длинный адрес ;(

http://free.prohosting.com - 50 Mb, тормозит

http://www.spree.com - unlimited Mb, длинный адрес, много ограничений

http://www.fortunecity.com - 20 Mb, гостевая книга, счетчик, часы, e-mail форма

http://www.crosswinds.net - unlimited Mb, тормозит, ftp


Спецвыпуск хакер, номер #002, стр. 002-104-4, Интервью для Х с одним московским провайдером

Интервью для Х с одним московским провайдером

Спецвыпуск хакер, номер #002, стр. 002-104-4

http://www.geocities.com - 11 Mb, быстрый, ftp, гостевая книга, счетчик

http://www.fsn.net - 20 Mb, средняя скорость, короткий адрес

http://www.easyspace.com - 25 Mb, быстрый, ftp

http://www.cynetcity.com - 12 Mb, быстрый, гостевая книга, счетчик, ftp

http://www.student.toplinks.com - 10 Mb, ftp

http://rampage.ml.org/freeinfo.html - 5 Mb, ftp, тормозит

http://www.chat.ru - 5 Mb, e-mail, средняя скорость

http://www.lgg.ru - 3 Mb, средняя скорость, ftp

http://www.newmail.ru - 16Mb, средняя скорость, ftp

Списочек, правда, сделан бегло, но в него вошли самые основные и популярные серваки с халявными доменами. Полазай, посмотри. :) Но на них, как известно, лепят рекламу, что порой просто бесит, особенно тут отличились www.tripod.com и www.geocities.com, которые в обязательном порядке добавляют к твоему сайту всплывающие окна с рекламой. Поэтому если твой сайт не просто рожа и море, нарисованные от руки, а интересная идея и заинтересует достаточно широкую аудиторию (а именно что-то этакое обычно хочется сотворить в Инете), то

у тебя есть шанс не платить ни копейки, о чем довольно доступно :) сказано в интервью. Но проскочившее в вышестоящем тексте слово "халява" взяло меня за живое, :) и я не удержался, чтобы не придумать что-нибудь для тебя этакое.

В результате я договорился, что любой, кто при регистрации в Синхролайне скажет кодовое слово, andrusha :) получит 3 часа бесплатно. Сразу убьешь кучу зайцев: свой проект двинешь и Инету получишь. :) А живой адрес конторы ищи на их сайте. Так что быстрых тебе доменов. Короче, удачи тебе, перец!


Спецвыпуск хакер, номер #002, стр. 002-108-1, Раскрутка паги

Раскрутка паги

Спецвыпуск хакер, номер #002, стр. 002-108-1

Автор: SideX (sidex@xakep.ru)

После бессонных ночей, прогулянных пар и часов над поиском глюков ты создал свою страницу. С качественным дизайном, удобной навигацией и главное - интересным содержанием. Наконец-то лег спать, ожидая, что после сладостного пробуждения твой сайт станет первым в рейтинге "Top 100". Не тут-то было! Кроме тебя самого и пары корефанов, никто не изъявил желания познакомиться с твоим творением. Обыдно. :( И даже как-то несправедливо: всякие гнусные паги, что сто лет не обновляли, посещают по 100, а то и 500 человек ежедневно. Пора кончать с этим - сделай себе высокий рейтинг с помощью Х. Нам с тобой в этом помогут баннеры!

Баннеры

Классика сетевой рекламы. И, пожалуй, самое эффективное средство продвижения проекта навстречу аудитории. Что же собой представляет это чудо? Обычно это - картинка в GIF`e, JPG`e. Бывают навороченные в ShockWave и JAVA`e. Баннер размещается на сайте вэбмастера и хранит в себе ссылку на сайт рекламодателя. Чаще всего можно встретить рекламу размером 468Х60 пикселей. Также существуют кнопки - 88Х31 пиксель. Но фантазия изобретения новых форматов рекламы ограничивается только выделяемым местом на сайте и здравым разумом дизайнера. Чтобы ты не уснул, ожидая загрузки паги, в баннерных сетях обычно ограничивают вес до 12-15К стандартной рекламы(468Х60).

Баннер нарисован, удовлетворяет всем требованиям? Пора пустить его крутиться, наращивая трафик твоего сайта. А куда? Можно в баннерную сеть. Тут твою рекламу прокатят по разным пагам, взамен впарив тебе рекламу других сайтов. Если подключился к серьезной рекламной сетке, тебе могут предложить дополнительные фичи, что поспособствует повышению эффективности рекламы.

Обменный пункт

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

Тебе необходимо заняться вопросом так называемого "таргетинга", т.е. отбором сайтов, сходных с твоим по содержанию. При таком раскладе реклама будет максимально эффективна. Если ты обмениваешься баннерами без подсчета кликов, старайся прослеживать посещаемость сайта подельщика. Если у него более низкие показатели - отказывайся работать с ним или договаривайся об уменьшении размера рекламы на твоей паге. Если же он опережает тебя по количеству хостов... сам догадайся. ;) Не догадался? Увеличивай показатели своих счетчиков искусственно. На независимых счетчиках предусмотрена такая функция. При подсчете хитов счетчиком, загружаемым скриптом с твоего сайта, задача еще более упрощается. ;)

Все на продажу

Ну, и не забудь про возможность прямой покупки показов в баннерных системах. Под свои нужды я никогда не покупал такой рекламы. Только если под заказ какой-либо фирмы. Тебе это будет актуально, если у твоего босса появилась полоумная идея сделать представительство в Инете. Сайт ему сделали, но его никто не посещает. И тогда босс выделяет N-ную сумму денег на покупку рекламы. Вот тут ты и посуетишься, приняв лавэ от него. И вместо работы с купленными показами пустишь крутиться рекламу за счет показов, ранее накопленных тобой. ;) Покупать напрямую в рекламной сети - надежно, но накладно, т.к. за меньшие деньги можно купить показы что называется "с рук". Экономия доходит до 1000%! Но обычно такие предложения подразумевают продажу пользовательского аккаунта. Т.е. твою рекламу будут крутить на этом же сайте (Вася Пупкин - крутой накрутчик, ;) либо на сайте "СельХозрыбпродукт". Короче, такая реклама практически выйдет дороже, чем покупка напрямую в сети. Т.к. на баннер "Море боевого софта, взломан mail.ru, мы сделаем тебя хакером" вряд ли нажмет оптовый покупатель рыбных консервов. ;) А нажав, сразу уйдет после загрузки индекса.


Спецвыпуск хакер, номер #002, стр. 002-108-2, Раскрутка паги

Раскрутка паги

Спецвыпуск хакер, номер #002, стр. 002-108-2

Нарисуем - будем жить

Нарисовать баннер - плевое дело. Нарисовать эффективный баннер - не просто. Т.е. нарисовать рекламу так, чтобы кликнуло максимальное число юзеров. Вот некоторые соображение по этому поводу.

"Клик хер"

Как показывает практика, реклама, содержащая волшебную фразу "Нажми тут", приводит к достаточно серьезному повышению количества хитов. Вплоть до повышения на 40%! Вот только осторожнее с браконьерскими приемами: не рисуй баннеры, содержащие системные сообщения "Нажмите сюда, или произойдёт форматирование вашего винчестера". Кроме твоего друга Пети, никто не возьмет в ротацию эту бяку. Как я знаю, во всех крупных российских сетях запрещены такие финты. А вот наличие легко дрожащего курсора или кнопок "ОК", "Нажать здесь" только поощряется повышением количества кликов.

Теперь о размере

По этому поводу смею процитировать вопрос читателя к отмороженному журналу "для подростков":

Правда, что если он у меня маленького размера, со мною не захотят заняться "этим"?

Ответ от гинекологическо-андрологического совета Х, перехватившего вопрос:

Ты прав. Если он у тебя маленький, мало кто захочет сделать "это".

Да-да, я про баннер! А ты что подумал? ;) Действительно, на баннеры небольших размеров кликают куда реже, чем на крупные.

Поэтому при свободном обмене постарайся подготовить рекламу размером побольше. На крупные баннеры кликают значительно чаще.

Сбрасывай вес

Увы, многие юзеры имеют галимый коннект с Инетом и порой не дожидаются загрузки всей страницы, нажав любимую пимпу "Стоп". Не заставляй их делать этого. Это особенно актуально для прямого обмена между держателями страниц. Мне как-то один перец пытался впарить рекламу весом в 50К. :) Не повторяй его ошибок - делай рекламу легкой, не тяжелее 15К. В большинстве сетей обмена у тебя не возьмут более тяжелый баннер.

Прибавь яркости

Старый финт при сдаче рефов: на 10 страниц гонишь всякий бред, а остальные 2-3 страницы удобряешь кислотным маркером, дабы привлечь внимание препода именно к строкам, содержащим что-то действительно умное. :) То же и при рисовании рекламы. Забудь про все эти хакерские понты, типа белых надписей на черном фоне, со словами -=Tr@nZ ><A|<3P 31337=-. На такой кал никто не кликнет. Разве что контингент больницы для слепых с умственным отставанием. Баннер должен быть запоминающимся, обжигать глаза инетчику, призывая кликнуть. Но без извращений: ярко и в тоже время не пошло.


Спецвыпуск хакер, номер #002, стр. 002-108-3, Раскрутка паги

Раскрутка паги

Спецвыпуск хакер, номер #002, стр. 002-108-3

АниМаньяк

Больше анимации. Помнишь, как, проходя игруху на "Денди", ты ждал в конце увидеть красочный мультик? Так и инетчик ищет чего-то особенного. Анимированные баннеры особенно действуют на инетчиков, появившихся недавно в сети. Именно они наивно надеются посмотреть фильм "Матрица" в полноэкранном режиме, загрузив его за полминуты с обычного dial-up`a. :))) Только анимированная реклама реально грузится значительно быстрее. И новичок, как по команде, нажимает на баннер... Вот только надо ухитриться красиво оживить картинки, вместившись в 15К. Как в сказке: не легкая работа - из болота тащить бегемота. :)

Информация

На Новый год был обвал кликов на баннеры, где была помещена инфа об отставке Ёлкина. Нужен шок. Если к политике твоя пага имеет условно-косвенное отношение, все равно не забывай о таких нехитрых приемах. Кто мешает написать: "Страшные последствия проблемы 2000, возможны жертвы"? У мужика из штата Огайо потек холодильник в новогоднюю ночь - чем не проблема Y2K? ;) Ты кого-то обманул? Все честно и законно. На хотмэйле отключили работу по RPOP? Пишешь, что "Хакеры вновь атакуют, возможен взлом Hotmail". :) А когда будет реальный взлом... вообще хитов не оберешься!

Задорно, но не порно

На рекламу с различными интересными частями тела кликает значительно больше народа, чем на рекламу с надписью "Масляная краска универсальная". Куда лучше картинка с полуобнаженной дамой, лукаво глядящей и умоляющей: "Давай сделаем ЭТО здесь". Всего-навсего "нимфоманка" предлагала приобрести масляную краску для проведения ЭТОГО в помещении со свежевыкрашенными стенами. Т.е. надо заинтриговать юзера, возможно сыграв на "низменных" инстинктах. :) Помнится, гулял такой баннер от провайдера "Арстел": изображение красавицы дополняла надпись "12 долларов и целая ночь удовольствия". Ночной анлим за 12 грин? Вполне неплохо. Эффективное решение.

Куда вставлять?

Ты договорился с держателем сайта родственной тематики об обмене рекламой. Теперь пора обсудить: где будут расположены рекламные картинки? Это особенно актуально, если ты обмениваешься показами с точным подсчетом или размещаешь рекламу спонсора, т.е. сам заинтересован в увеличении числа кликов со своей паги.

То, что лучше выбрать верхнюю часть страницы вместо низа - очевидно. Но с выбором расположения в верхней части тоже есть свои "подводные камни". Как показывает практика, значительно эффективнее ставить баннеры не в самом верху страницы, а отступив порядка 1/3-1/4 от верха.

Дважды вывешивая один и тот же баннер, ты не особенно повысишь количество кликов. Только зря нагрузишь трафик посетителя.

Можно нарисовать нестандартный баннер размером 100Х100 пикселей и разместить в правом нижнем углу первого скрина загрузившейся паги. Это эффективнее стандартного баннера, размещенного в самом верху страницы, почти вдвое.


Спецвыпуск хакер, номер #002, стр. 002-108-4, Раскрутка паги

Раскрутка паги

Спецвыпуск хакер, номер #002, стр. 002-108-4

Подскажи, что делать юзеру с баннером. Я знаю, что всякие "Помоги сайту - кликни по баннеру" выглядят отвратительно, как будто ты выпрашиваешь клик. Но, как показывает практика, это достаточно эффективно. Если тебе надо, чтобы кликнули по сайту спонсора, напиши что-нибудь колоритное:

"Нажми на баннеры - помоги затравить буржуйских барыг". Будь уверен: подогреваемый чувством солидарности и патриотизма посетитель кликнет спонсору. ;) Или надо убедить юзера в необходимости посетить сайт: "Наконец-то спонсор, который реально платит", если ты вешаешь рефераловый баннер или посетитель не знает английского, т.е. не в курсе, что написано на баннере. ;) В общем, больше фантазии.

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

Вот, пожалуй, и все о баннерной системе. Стой! Как может быть "все"? Тема не закрыта - сетевой промоушин развивается с каждым днем. Принимает новые формы, предлагая новые решения, нагружая юзера надоедливой рекламой, а тебя тысячами сладостных кликов. ;)

Автор выражает благодарность сайту www.promo.ru за материалы, использованные при написании данной статьи.


Спецвыпуск хакер, номер #002, стр. 002-112-1, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-1

Gonobobel (gonobobel@mail.ru)

Каждый человек, оставшийся на обочине мировой информационной супермагистрали, как известно, должен посадить чахлое деревце, сколотить сарай и сделать какой-нибудь деревенской дурочке ребенка. Но у человека онлайнового в этом мире совсем другие задачи. Помимо обязанности все-таки заделать кому-нибудь дитятю, он должен хотя бы раз в жизни стащить логин, отослать службе техподдержки Майкрософт "неработающий" своп и построить сайт. Ну, с дитятей тебе ничем помочь не могу, если только ты не 18-летняя зеленоглазая блондинка, с логинами и свопами у тебя, думаю, и так все в порядке, а вот сайтом мы займемся вплотную. Вернее, его продвижением.

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

Прежде всего, ты должен понимать, что здесь, в отличие от политики, раскрутить можно далеко не все. Посетителям необходимо предложить ценности, причем такие, которые не будут дублировать содержимое уже существующих и известных ресурсов. Такие ценности можно разделить на три типа (в значении "как бы"):

- периодически обновляемый контент (содержание, наполнение);

- абсолютно уникальный контент, не устаревающий и практически не нуждающийся в обновлении;

- средства поддержки комьюнити (сообщества) вокруг какой-то идеи или темы.

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

Это я все к тому, что возиться с трехстраничным сайтом, посвященным тебе, твоему другану Толику и лесопильному техникуму номер 1185, не имеет смысла. Надеюсь, с этим мы разобрались, теперь перейдем к собственно технологиям раскрутки.

Баннерная реклама

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


Спецвыпуск хакер, номер #002, стр. 002-112-2, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-2

Баннерные сети отличаются охватом аудитории, требованиями к участникам, доступными функциями, форматом баннеров, взимаемой с показов комиссией. Рунетовские сети-монстры, в которые принимаются ресурсы, независимо от трафика - ИнтерРеклама (www.ir.ru) и Russian Link Exchange (www.rle.ru). Лично я считаю, что для сайта, регистрирующего меньше 500 посещений в день, лучше всего подходит ИнтерРеклама. Просто потому, что в ней рядовому участнику доступны возможности, которые в большинстве других систем предоставляются только коммерческим пользователям или владельцам крупных проектов.

Например, таргетинг - настройки, помогающие сфокусировать баннерную кампанию на целевой аудитории, тех людях, которые потенциально способны заинтересоваться твоим сайтом. ИнтерРеклама поддерживает таргетинг по странам, городам, провайдерам, дням недели, времени суток и даже конкретным сайтам. При этом она предлагает немало сопутствующих и очень полезных фич, которые опять-таки в других сетях недоступны простым смертным. Например, антитаргетинг, запрещающий показывать на своих сайтах баннеры конкурирующих ресурсов - не хрена посетителей переманивать - или перевод показов с одного аккаунта на другой, что позволяет просто-напросто торговать накопленными показами - на этом многие зарабатывают неплохие деньги! Вообще, на www.ir.ru стоит заглянуть в любом случае, потому что это, помимо баннерной сети, крупная обменная служба, посвященная созданию и продвижению сайта, содержащая отлично подобранную и отсортированную коллекцию ссылок на лучшие ресурсы, связанные с эволюцией веб-проекта.

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

Можно поступить еще интереснее - заставить крутиться "лишние" баннеры в невидимом фрейме, шириною в один пиксел. При его помощи можно даже сделать так, что каждое посещение сайта будет равнозначно клику на баннер. Это удобно в том случае, если у тебя есть спонсор с постоянным адресом, баннер которого ты в рамках партнерской программы расположил на своем сайте. Такие программы предлагают многие буржуйские проекты. Невидимый "кликающий" фрейм организуется простым добавлением в документ, описывающий фреймовую структуру, следующей строки:


Спецвыпуск хакер, номер #002, стр. 002-112-3, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-3

<frame name="NAME" src="URL" scrolling="no"

marginwidth="0" marginheight="0" noresize>,

где NAME - просто удобное тебе имя фрейма, а URL - адрес, на который ведет баннер спонсора. Также при этом необходимо изменить строку <frameset cols="ДАННЫЕ">, приписав к ДАННЫМ, описывающим существующие фреймы, еще один фрейм, имеющий ширину в один пиксел - ",1". Вообще, есть немало способов подобной "работы" с баннерами - вырезание картинки баннера из кода, вывешивание баннера на сплэш-странице, которая через короткий промежуток времени редиректит пользователя собственно на сайт - рассказать обо всем в этой статье просто невозможно - придется писать специальную.

Если нужно в короткое время накрутить весомое количество показов, не стоит заморачиваться на придумывании Java-скрипта, перегружающего страничку через небольшие промежутки времени. Все современные баннерные системы отслеживают IP-адрес пользователя, которому демонстрируется баннер, и более сотни показов в день, пришедшихся на один IP, однозначно квалифицируются системой как подозрительные. Поэтому существуют специальные программы, которые накручивают показы и клики, используя прокси-серваки - тогда единичность пользователя доказать невозможно. Наиболее известные - Clicking Agent (CACA), Slider, Single Money Maker, Xpymep. Но на самом деле и здесь жадничать не стоит, а лучше поддерживать стабильный, ежедневный псевдотрафик, не способный привлечь внимание модераторов или системы внезапным всплеском кликов или огромной концентрацией юзеров, ходящих под проксей.

Поисковые системы и тематические каталоги

Отличный способ создать постоянный поток посетителей, который, к тому же, может быть весьма ощутимым. Что может быть логичнее, чем разместить инфу там, где ее будут искать? Перед регистрацией нужно составить взвешенное двуязычное описание сайта и набор тщательно продуманных ключевых слов, на русском и аглицком. В каталогах информацию изменить не всегда легко, а ведь неизвестно, во что вырастет твой проект, поэтому при регистрации в них я рекомендую использовать реальные ключевые слова и правдивые описания.

А вот на сайте, в ожидании прихода поискового робота, можно развернуться. Не забывай, что ты крутишь баннеры, и любой посетитель тебе так или иначе выгоден - даже случайный, поскольку он зарабатывает тебе показы, которые ты сможешь потратить на адресную рекламу. Посему метатеги "description" и "keywords" следует забивать наиболее привлекательной инфой и самыми популярными словами и словосочетаниями. Понимаешь, что я имею ввиду. Ну, типа "Вольтер, эпоха Возрождения, шахматы, памятники русской архитектуры, моральные ценности" и т.д. Кстати, на слово "мОРАЛь" ты действительно получишь заходы.

Поисковый робот изучает не только метатеги, но и заголовок, и тело документа, при этом текст в начале расценивается как более весомый, чем текст в конце страницы. Поэтому имеет смысл первые строки всех документов забить теми же немудреными словами цвета бэкграунда и тем самым обеспечить нахождение сайта в огромном количестве случаев. Словосочетание имеет приоритет перед словом ("курс доллара" более весом, чем "доллар"), а чем больше слов, соответствующих запросу, находится на странице, тем более подходящей она считается ("бабы!, бабы!!, бабы!!!" для поисковика гораздо более привлекательны, чем одинокая "баба"). Поэтому наиболее смачные слова и словосочетания лучше повторять насколько хватит совести. На разных страницах нужно варьировать набор ключевых слов, добиваясь максимальной ре... ле... вантности - во! - сайта.


Спецвыпуск хакер, номер #002, стр. 002-112-4, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-4

Тактика задуривания поисковиков при помощи скрытого содержимого страниц удобна тем, что при необходимости от нее можно быстро отказаться. Достаточно убрать весь этот мусор со страниц, и через месяц-полтора, после очередного визита спайдеров, во всех поисковых машинах ты будешь блистать безупречным имиджем. Обходить же каталоги, меняя описания, мягко говоря, замучаешься, поэтому еще раз напоминаю - описывайся правильно.

Регистриться нужно решительно во всех каталогах и поисковых машинах, которые существуют в Рунете, а не только в пятерке общеизвестных лидеров: Яндекс (www.yandex.ru), Апорт (www.aport.ru), Рамблер (www.rambler.ru), Лист (www.list.ru), @Rus (www.atrus.ru). При этом можно завести несколько псевдонимов и регистрить их как отдельные сайты. Так же используется практика индексации отдельных страниц ресурса.

Забугорные каталоги могут принести еще больший трафик, хоть и бесполезный в смысле аудитории - если у тебя сайт русскоязычный, - зато методично поднимающий тебя в рейтингах и снабжающий показами. Посему описывай его в буржуйских системах самым игривым и интригующим образом. Ежели лень лазить по бесконечному множеству каталогов, воспользуйся регистрационными системами: @Submit! (www.uswebsites.com/submit/), AddMe! (www.addme.com), Adder (www.sharat.co.il/adder/), Add It! (www.123add-it.com). Качество регистрации упадет, возможно, ты засветишь свое е-мыло в спам-листах, зато охват каталогов получится очень и очень солидный.

Счетчики, участвующие в рейтингах

Многие поисковые системы и каталоги предлагают разместить счетчики посещений, которые позволяют сайту участвовать в специальных рейтингах. Наиболее известные счетчики: Rambler Top100 (counter.rambler.ru/top100/), Aport RankeR (stat.ranker.ru), TopList (top.list.ru). Если ты болтаешься в хвосте рейтинга, то это тебя согреть никак не может, трафика с системы ты не получишь. Если же ты правдами и неправдами сумеешь подняться в первые две-три десятки, народ начнет уверенно и резво перетекать с каталога к тебе на сайт. Подняться можно, совершенствуя концепцию, дорабатывая уникальный дизайн, вымучивая ежедневный контент, анализируя деятельность конкурентов и читая труды сетевых рекламистов, а можно - при помощи замечательной проги HitProm, о которой EvilOne писал в 7 номере "Х" за 1999 год. Там он накручивал счетчик Рамблера, та же технология применима к большинству рунетовских каунтеров.

Опять-таки по всякому выходит, что следует нахватать как можно больше счетчиков, чтобы засветить сайт в возможно большем количестве рейтингов. Первую неделю после регистрации счетчику можно дать повисеть у всех на виду, поскольку многие системы проверяют корректность кода и размещения каунтера, а потом его обычно сворачивают в формат 1x1 пиксел: width="1" и height="1" и заменяют им какую-нибудь текстовую точку. Чтобы глаза не мозолил.


Спецвыпуск хакер, номер #002, стр. 002-112-5, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-5

Веб-кольца, клубы и сообщества

Один в поле и воет - кто такой? Вебмастер, пытающийся взрастить свой сайт на окраине Сети, куда забираются только ополоумевшие спайдеры. Хотя бы на первых порах надо постараться протолкаться в какое-нибудь людное место, скорефаниться с ресурсами, уже прикормившими аудиторию, и сманить у них часть посетителей. Это делается вступлением в клубы, сетевые сообщества, веб-кольца. Вокруг таких объединений всегда трется народ, который с удовольствием исследует новый ресурс по интересующей теме. Таких объединений огромное количество, выбрать несколько наиболее подходящих из них не составит труда. Самый элементарный пример - HomePage Club (club.rt.ru), клуб-каталог тематических домашних страничек.

Гораздо более солидным шагом будет присоединение к ЕЖЕдвижению - сообществу периодических изданий (www.ezhe.ru). Это уже серьезное объединение, предоставляющее своим членам реально полезные фишки: от бесплатных хостинга и изготовления кнопки - до анонсирования новостей в рассылке ЕЖЕдвижения, публикации физиономии в специальном каталоге и защиты авторских прав при помощи Доски Позора. Ресурс, вступающий в сообщество, должен периодически публиковать на своих страницах свежие материалы и, соответственно, в зависимости от заявленной периодичности, после испытательного срока заноситься в ЕЖЕдневки, ЕЖЕнедельки или ЕЖЕмесячники. В ЕЖЕдвижении принимают участие известнейшие ресурсы, при помощи ЕЖЕкрутилок по сайтам движения перемещаются значительные потоки посетителей, поэтому пробиться в ЕЖЕсообщество - прекрасная возможность для ресурса увеличить свой трафик и поднять статус в глазах сетевой общественности.

ЕЖЕдвижение во многом повторяет схему веб-кольца - группы сходных по тематике ресурсов, объединенных системой линков, которые стараются передавать посетителя друг другу. Веб-круги раздаются на www.webring.org, каталог российских веб-кругов лежит, например, на www.opankey.com/webring/catalog.html. Вообще, с "Опанек" удобно начать знакомство с самой областью веб-кругов, там легко найти подходящий веб-круг и присоединиться к нему, либо узнать, как организовать свой.

Обмен кнопками и ссылками

Веб-круги воздействуют на достаточно узкую и медленно пополняемую аудиторию, значительно большую гибкость предоставляет обмен ссылками. Ты можешь наметить сайты с подходящей аудиторией, разместить их баннерики (кнопки форматом 88x31) у себя и предложить то же самое сделать им. Если среднее количество посещений в день у вас различается не на порядки, скорее всего обмен состоится. Таким образом в подборе посетителей можно освободиться от ограничений в тематике и сайтах, диктуемых веб-кругами.


Спецвыпуск хакер, номер #002, стр. 002-112-6, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-6

Помимо кнопок-баннериков, можно меняться текстовыми ссылками, логотипами и полноформатными баннерами, захламляя главную страницу, если не жалко, либо размещая все это хозяйство в разделах "Ссылки", "Партнеры", "Друзья", "Links" и тыды. Площадок обмена немало, с ходу в голову приходит премодерируемая гостевая книга у Бокарева (www.promo.ru/guestbook.html), в которой публикуются предложения по обмену текстовыми ссылками и баннерами, и системы специализированных досок объявлений по обмену тем же самым добром - tell.virtualave.net и www.adt.ru/~akm.

Рассылки, конференции, скрытая реклама и наглый спам

Листы рассылки - прекрасный способ информировать народ о своем сайте, анонсировать новость или материал. Рассылки могут платными, могут быть свободными, в последнем случае можно связаться с ее ведущим и предложить ему текст объявления. Ресурсом, поддерживающим наибольшее число рунетовских рассылок, является служба Городской Кот (www.citycat.ru). Из специализированных свободных рассылок, заточенных на продвижение сайтов, можно вспомнить "Raskrutka/Раскрутка", живущую по адресу www.dir.ru/internet/promotion/russian/.

Существуют и конференции в юзнете, и фидо, посвященные сетевым событиям. Постарайся забить новость о своем сайте в релкомовскую конфу RELCOM.WWW.USERS и фидошные эхи RU.INTERNET.WWW.NEWS, RU.INTERNET, RU.INTERNET.WWW (для Инета они называются FIDO7.*). Также можно "ошибиться" и написать в чайницкие эхи, где модераторы за рекламу особенно грызть не будут. Как писать из Инета в фиду, можно узнать из моей статьи "Фидо на халяву", напечатаной в пятом "Х" за 1999 год. Или же сходи на www.fido7.ru, они обновили контент, там теперь значительно проще понять, как попасть в царство плюсометов.

Альтернативным вариантом является размещение инфы на специальных досках объявлений, которых в Сети видимо-невидимо. Здесь можно вспомнить и о спаме, и посвятить несколько дней серверенью по Рунету и забиванию всех попавшихся под руку гостевых книг приглашениями на свой сайт. Однако можно того же эффекта добиться более тонким путем - активно включаясь в дискуссии в форумах и конференциях, упоминая свой ресурс невзначай, в качестве примера или просто ставя его адрес и название после подписи. Люди - существа крайне любопытные, даже если ты упомянешь адрес явно не к месту, они все равно туда сбегают. Ну, к примеру, неужто ты не сходишь на какой-нибудь www.basov.ru, упомянутый в том же "Х", даже если он заведомо не имеет к хакерству никакого отношения? ;) Понял механизм? Переписку читает множество людей, она сохраняется в архивах месяцами, цитируется, индексируется в поисковиках - это эффективная и долгоиграющая реклама, которую игнорировать просто преступно.

Не нужно забывать и о классическом спаме, если ты, конечно, не позиционируешь свой сайт как ресурс для руководителей высшего звена газово-нефтяной промышленности. Извинись, что занял время, скажи, что просто открылся такой-то сайт, посвященный тому-то, предложи заглянуть, если интересно, пообещай, что больше подобных писем человек не получит - и ежели ты уложишься в два абзаца, то такое письмо и раздражения не вызовет. Вообще об этой увлекательной области SideX нам поведал в 8-й "Х" за 1999-й, в статье "Все о СПАМе".


Спецвыпуск хакер, номер #002, стр. 002-112-7, Светись всегда, светись везде

Светись всегда, светись везде

Спецвыпуск хакер, номер #002, стр. 002-112-7

Подводим итоги

Разумеется, это далеко не все способы продвижения сайта. Их можно назвать основными, но существует немало факторов, которые хоть и не являются прямыми средствами рекламы, но без них сайт популярным стать, скорее всего, не сможет. Например, средства удержания аудитории, генерации второго посещения. Рассылка, форум, чат - способы поддержки сайта, но и продвижения, поскольку без них он не сможет набирать обороты, увеличивать аудиторию. Или нормальное имя сайта - не реклама, но необходимое условие развития. Или же установка партнерских отношений с другими ресурсами, взаимное анонсирование - вроде необязательный ход, но и без него до серьезного уровня никогда не дорасти.

Также следует заметить, что проповедуемый в заглавии принцип "Светись всегда, светись везде" верен для начинающих сайтов, имеющих где-нибудь до 250 посещений в день. После этого порога рекламироваться нужно начинать очень продуманно, выборочно и аккуратно, поскольку при таком посетительском трафике уже нельзя не думать об имидже ресурса. Но чтобы до таких проблем дорасти начинающему сайту, смею тебя уверить, следует скрупулезно работать в предложенных мною направлениях.

Важно, чтобы ты понимал: можно вообще забить на рекламу, потому что главное - классная концепция, уникальный дизайн и бесценный контент, а остальное - само приложится. Можно. Если тебя устроит 150 посещений в год, из которых сотня будет сделана поисковыми роботами.


Спецвыпуск хакер, номер #002, стр. 002-116-1, РЕДИРЕКТЫ

РЕДИРЕКТЫ

Спецвыпуск хакер, номер #002, стр. 002-116-1

Ramhak O`Hady konung@ic.ru

- Реди... редикер... Что? Что такое реидхректы? - спросит иной ламер, когда услышит о редиректах.

- А и вправду, что такое редирект? - молча задумается хакер и начнет искать (читай, тормозить) доки о загадочных редиректах по всем хакерским сервакам, попутно взламывая все что под руку подвернется.

Что такое редирект

Редирект - redirect (перенаправление по-английски). Так называют сервер, который, при обращении к нему, просто перебрасывает юзера на другую страничку, либо так называют сам процесс переброски. Для чего это нужно? Очень просто - например, GeoCities выдает бесплатные странички с офигенными адресами:

http://www.geocities.com/Hollywood/Location/4803

Офигеешь, пока запомнишь... А знакомым как раздавать? "Запишите, пожалуйста... нет, это не номер телефона... и не счет в банке... это... это урл моей странички!". Представляю себе огромные, размером с метрошную хакнутую карту, глаза этого знакомого после того, как он допишет весь урл...

Редирект-сервер же обычно имеет какое-то очень легко запоминающийся урл... Например, http://i.am. Понятное дело, что можно просто купить домен - и нет проблем, но платить по $70 баксов за два года только из-за того, чтобы иметь возможность выкладывать фотографии из женской бани... это, мягко говоря, много. Поэтому можно воспользоваться таким сервисом, как редирект. Все редиректы, что я знаю, бесплатны. И, естественно, кроме тебя одного на такую халяву найдутся еще тысячи. Чтобы решить, какого юзера на какую хоумпагу направлять, на редирект-сервере заводят специальные аккаунты с паролями и кучами разных фишек. Тогда урл странички будет выглядеть уже не как краказябра, а, например, как http://i.am/vasya_pupkin. Уж такой-то урл запомнить можно без проблем.

Где водятся волшебники

Раньше, вообще говоря, редиректы были редкостью. Сейчас вроде бы ситуация меняется к лучшему, и появляется большое количество всяких кульных редиректов. Но, обычно, они еще добавляют рекламу или фрейм со своим логотипом, что не есть хорошо... и не пить. :-( Пожалуй, самым первым, который стал известен на нашей многострадальной Родине, был уже названный мной http://i.am (он же более известный как http://easy.to/REMEMBER). Он довольно долго оставался единственным известным среди русских хоумпага-делателей. Однако сегодня популярны такие редиректы, как http://www.da.ru и http://go.to, http://also.as и так далее. Вот, например, какие я нарыл в Сети урлы всего за 10 минут в он-лайне:

go.to come.to travel.to welcome.to

move.to fly.to surf.to listen.to

been.at zap.to get.to bounce.to

jump.to beam.at zip.to start.at

snap.to talk.to drive.to browse.to

switch.to change.to window.to redirect.to

bowl.to transfer.to quickly.to forward.to

connect.to drink.to crash.to board.to

walk.to turn.to skip.to page.to

kiss.to fade.to drop.to bite.to

back.to dive.to run.to how.to

hop.to on.to scroll.to

Неплохой списочек, а? А ведь это всего лишь с одного сервера-редиректа!

- Девушка, а как пройти в библиотеку? [сейчас моден также вариант: - Девушка, а вы у какого провайдера?]


Спецвыпуск хакер, номер #002, стр. 002-116-2, РЕДИРЕКТЫ

РЕДИРЕКТЫ

Спецвыпуск хакер, номер #002, стр. 002-116-2

Объясню на примере, чтобы у тебя потом не возникало лишних сложностей - все-таки грабли одни и те же, а люди разные. :-) Я зарегистрировался на http://i.am - сделать это оказалось проще пареной репы. Заходим на указанный выше адрес. Перебрасывают (!) на http://easy.to/REMEMBER - как говорит одна моя одесская знакомая, "таки и редирект". Предлагают проверить, не занят ли уже необходимый "краткий адрес". Например, можно выбрать таковым http://vasya.i.am. Тогда надо будет ввести "vasya" в поле ввода и указать сервер http://i.am. Если такого урла еще никто не зарегистрировал, можно приступить к выполнению боевого задания. :-) Нужно будет придумать пароль и указать собственный почтовый адрес (настоящий!). Вуаля! Теперь осталось только подождать, пока на указанный тобой е-мейл придет сообщение и специальный код:

URL: http://i.am/vasya or http://vasya.i.am/

Password: vasyapswd (case sensitive).

ID / active code: ZwX3DwKWDvTg

Date joined: Friday 14th of January 2000 23:21

Email: vasya@eto.kru.to

Чтобы использовать все возможности редиректа, нужно знать не только придуманный тобой пароль, но и этот сгенерированный код. У данного сервера (http://i.am) есть весьма приятные опции - например, можно заставить браузер не показывать тот адрес, куда перебрасывается пользователь, а показывать http://vasya.i.am. Сразу расскажу о маленькой хитрости - если хочешь, чтобы показывался только этот адрес при переходах на другие странички с твоего сайта, то просто сделай один большой (на всю область) фрейм:

<frameset scrolling="no" border="0" frameborder="0" framespacing="0" rows="100%,*">

<frame src="main.htm" name="main" scrolling="auto" border="0" frameborder="0">

</frameset>

и тогда, что бы юзер ни кликал на твоей паге, все равно будет отображаться адрес с редиректа. Вот, собственно, и все, что можно и нужно знать о редиректах... А! Чуть не забыл. На русском редиректе www.da.ru после переброски в страничку вставляется рекламный фрейм - черна полоска с ссылкой на www.da.ru. Ее можно запросто отключить, зайдя на собственно сервер и отключив соответствующую опцию в настройках.


Спецвыпуск хакер, номер #002, стр. 002-118-1, Бойся себе подобных!

Бойся себе подобных!

Спецвыпуск хакер, номер #002, стр. 002-118-1

MAL (mal@xakep.ru)

Hell_man (hellman@nirvana.ru)

О пользе пива для здоровья

Привет, приятель. Любишь, небось, пиво-то? Вот и мы тоже. Сидели мы тут как-то, его, милое любимое, попивали, и разговаривали. Одна из тем нашего разговора коснулась недавних взломов. Помнится, раньше - год-два назад, было престижно взломать и заменить индекс на серверах с доменным именем *.mil, *.gov. А почему же теперь ситуация изменилась? Не помню я такого, чтоб за последнее время была заменена хоть одна страница на военных или правительственных компах. И на сайтах, которые содержат статьи и архивы взломов, перестали красоваться говы и милы. Странно, блин! А о каких же на фиг взломах тогда пишут и говорят на таких сайтах? Слава Богу, во время нашего с Хеллом разговора рядом было около 40 компов с выделенкой. :) Недолго думая, мы полезли в нет узнавать, что же было взломано за последнюю неделю. Первое, что нас несколько удивило - это то, что, по ходу, не было взломано ни одного хостингого провайдера. Странно? Да нет, вообще-то, на самом деле нет ничего загадочного в этом. Сему есть свои объяснения.

Тут Хеллман (специалист по хостингам) :) начал втирать мне, что таких провайдеров ломают постоянно, но паги там не меняют по следующим причинам.

Раньше, поимев хостинг, мало что можно было из него вытянуть. И единственное, что оставалось сделать - так это заменить индексы на тупых информационных страничках. Именно информационных. То есть раньше сайты несли информацию, открытую! А на хрена нам эта информация? :) Сейчас, как ты, ясен пень, шаришь, в сети очень сильно развита коммерция, с онлайн-транзакциями етс. И ситуация такова, что если ты взломал реальный хостинг - ты взломал, как минимум, пять Интернет магазинов, а это, друг мой, 5 месяцев безбедной жизни. :) Значит, все-таки хостинги ломают, но информировать весь свет об этом не торопятся! =) Кстати, та же ситуация с правительственными и военными компами. Естественно, народ копается над ними, но менять там индексы в наше время нет смысла.

А что же тогда щазз ломают именно для развлечения? На каких сайтах мы можем увидеть надписи, состоящие из мата в адрес создателей и администраторов этой машины? Ты знаешь? Хм... хах, а я знаю! :) Вот что мы с Хеллом заметили. Оказывается, большинство страниц, на которых меняют индексы - это, так сказать, хацкерские странички и сайты хацкерских груп! :)

И как раз во время нашего с Хеллом разговора подваливает к нам мой друган и говорит:

- Здарова, МЭЛ, слых, у меня тут дело к тебе, я решил страницу замутить, а в сети у меня полно врагов, которые, если узнают, что у меня сайт, порутят его

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

- Да не вопрос, ты пока сгоняй за пивком, и ща все будет.

Ща все будет!

Ну да. Все будет. А пока он гоняет за пивком, я тебе, приятель, кое-какие подробности расскажу. Слушай сюда. Решил ты, допустим, страницу создать в сети. Если тебя жаба не душит, то купи себе сервак и поставь на выделенку. Тогда защитить ее от хацкеров будет намного легче. А вот если у тебя денег хватает только на туалетную бумагу, то тут уже проблемки есть. :) Не, ну, конечно, можно купить сервак, оплатив его кредитной картой. У буржуев есть такие хостинги, которые выделяют весь сервак для тебя, но стоять он будет у них. Тут пропадают проблемы с таможней, но все равно есть одно "но". Долго ли продержится такой сервак, проплаченный чужой кредой? Может и долго, :) смотря какого человека ты проставил на бабки. А если ты оплатил хост с креды бомжа с Санлайт-стрит города Дубино штата Гавнано, то в конце месяца, когда ему придет счет, он разорется так, как не орут наши бабушки в родных автобусах, и через пять минут прикроют твою пагу, да еще и по мозгам дадут. :) И вообще, кардинг - дело неприличное, а мы люди честные и умные, будем искать другой способ. Заделаем себе страницу с адресом www.****.com/users/home/gay/satan/~homepage и дисковым местом полмегабайта. Чего смеешься? Главное - бесплатно и совесть чиста. Значит, выбираем себе бесплатный хостинг. Но первая же проблема, с который ты сталкиваешься, открывая сайт на халявном хостинге, - это и есть безопасность твоей страницы! Причем, проблема очень большая. Помимо того, что на таких хостингах полно багов, там еще и админы продажные. Хотя не будем об этом. Лучше о багах. Вот несколько советов, которые помогут тебе помочь выбрать хостинг и сделать пагу так, что ее не хакнут:


Спецвыпуск хакер, номер #002, стр. 002-118-2, Бойся себе подобных!

Бойся себе подобных!

Спецвыпуск хакер, номер #002, стр. 002-118-2

Советы профессора:

Совет первый: сначала посмотри, разрешает ли провайдер использовать cgi? И не надо прыгать от счастья, если этот сервис доступен. От'имеют твою страницу в два счета на таком провайдере, поэтому забей на cgi.

Совет второй: забей на все хостинги с web based e-mail и на те, где можно закидывать html на свою пагу прям с www.

Совет третий: при регистрации указывай е-майл, в котором ты уверен. Например, если ты указал hotmail-ное мыло, там, как обычно, найдут новый баг, и какой-нибудь хаксор получит доступ к твоему ящику, на который можно прислать пароль от паги. :)

Еще: посмотри, на какой оси стоит сервак хостинговой компании. Для этого можешь использовать сайт www.netcraft.com. Желательно, чтоб там стояла freeBSD. С линуксом дело иметь не всегда безопасно. А с НТ вообще лучше не связываться. Далее: посмотри, какой ftp и smtp-демоны висят на серваке. Если там ftp server by vasia pupkin version 0.0.1, то можешь послать по мылу их администратору "satan was here". Есть еще один аспект - не ведись никогда на раздел хостинговых провайдеров - "our clients". Если у них хостится крутая фирма, производящая мертвых роботов-ежиков, это не значит, что у них твой сайт будет в безопасности.

Тут мне друган поднес наконец-то пиво и задал еще вопрос:

- Слых, МЭЛ, а вот у меня пага будет не простая, а хацкерская, у меня там прог всяких и инфы запретной много будет. Не закроет ли такой сайт сам хостинг?

Тут дела обстоят так - есть хостинговые компании, которые прикроют сайт от первого же наезда со стороны любого человека. Знали мы таких. :) Причем,


Спецвыпуск хакер, номер #002, стр. 002-118-3, Бойся себе подобных!

Бойся себе подобных!

Спецвыпуск хакер, номер #002, стр. 002-118-3

даже не будут разбираться и сами не посмотрят, что там. Достаточно послать им письмо якобы от администратора какой-нибудь фирмы, в котором написать, что

такой-то сайт содержит ненормативную лексику, на нем присутствует порнография, программы для взлома Интернета, и вообще они занимаются спамом и онанизмом. На следующий день сайт прикроют. А есть фирмы, которым на все положить, и плевали они с высокой колокольни на письма таких администраторов. Обычно такие фирмы просят за свой хостинг немного бабла. :)

And the bit goes on, или еще советы

Ладно, с халявными сатйами проехали. Допустим, у тебя все-таки завалялась в левом кармане пара монеток, которые ты готов выложить за пагу и за сервак.

Если твой друг работает где-нибудь админом, то можно легко зарегать домен не задорого и прописать name server твоего друга, который, в свою очередь, его у себя пропишет и даст тебе место у себя на диске. Тогда эту страничку будет очень тяжело захакать (если твой друг прилично разбирается в серваках). Да дело даже и не в друге, который, типа, крутой чел, а в том, что у тебя будет доступ к серваку почти полный. :)

Если же ты делаешь крутую хацкерскую страничку с кучей разных крякеров, эксплоитов и всего подобного, то тебе необходим домен такого вида: www.chto-to.org(net,com,ru,su), хотя бы для элитности! В зонах .ru, .su это стоит много бабок, если очень надо, то покупай, а вот в .com .org .net это тоже стоит не мало, но там имеется безналичный расчет по кредам (сечешь мазу). :)) Купив такой домен, к примеру, на www.namesecure.com, ты можешь сделать с него форвардинг на какой-нибудь chat.ru, и это не будет заметно!

Тем временем нам с Хеллом приносят еще по пиву (откуда - я понять не могу...), и парнишка начинает расспрашивать заплетающимся голосом, как замутить борду, если CGI будет закрыто на этом хостинге. Мы глотаем пивко и быстро отвечаем:

Во-первых... насчет cgi и перла. :) Если все-таки ты выбрал хостинг, который разрешает их использовать, то, когда ты хочешь поставить к себе на страничку какой-либо скрипт, всегда узнавай, есть ли в нем проверка и удаление специальных символов и тегов. Это особенно относится к таким приложениям, как гостевые книги и доски объявлений. Если такой проверки нету, то твой сайт может быть с легкостью взломан.

Поэтому умные люди делают так

Типа, регистрируешь борду на каком-нибудь другом серваке, где не будет висеть твой index.html, чтоб его нельзя было заменить, и делаешь на своей странице ссылку туда. :)) И все работает на УРА!

Еще важно выбрать вебхостинг, который не дает возможность подборки паролей (brute force). Об этом надо спрашивать у хостера, можно написать ему письмо и все такое, а то тебя быстро заломают, подобрав пароль!

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

на свои серваки с разных клубов, например, с "Полигона"! Где злые админы ставят снифферы на шлюз и весь ftp, telnet, pop3 траффик ловят... а


Спецвыпуск хакер, номер #002, стр. 002-118-4, Бойся себе подобных!

Бойся себе подобных!

Спецвыпуск хакер, номер #002, стр. 002-118-4

потом, поймав твой пароль, его юзают, скачивают все креды и всякую такую полезную инфу с твоего сервака! Вывод: никогда не заходи на свои серваки и не проверяй почту из всяких клубов (Орки, Арена, Полигон, Гамесити, Лавина, nice.ru, Асталависта и всякие другие), исключая "Нирвану" (www.nirvana.ru), так как уважаемый Хелл_мэн работает там FreeBSD админом и знает, что никаких снифферов там не стоит. :))

So long!

Итак, вот и все, пожалуй, что мы с Хеллом хотели рассказать тебе о том, как правильно разместить твою пагу. Есть, конечно, еще кое-какие тонкости, но о них мы тебе расскажем как-нибудь в другой раз. А пока что пиво наше вышло, и призывает к себе нас Белый Брат, требующий жертвоприношений. Чего и тебе желаем. Пока! Удачи и береги свою пагу.


Спецвыпуск хакер, номер #002, стр. 002-122-1, Название: Как делают Х-паги?

Название: Как делают Х-паги?

Спецвыпуск хакер, номер #002, стр. 002-122-1

Автор: SideX (sidex@xakep.ru)

Паги в стиле Х

Я более чем уверен, что ты уже пытался делать себе крутой сайт или, по крайней мере, собираешься. Но я обладаю не меньшей уверенностью в том, что ты заимел при создании не слабый гимор. Ты не одинок. Учиться на чужих ошибках, увы, не принято. Ты с этим согласен? Я не согласен и при создании очередного шедевра решил воспользоваться опытом, полученным создателями типичной паги в стиле Х. Добротной паги, дизайн и содержание которой подвергались неоднократному изменению. Попробуем провести анализ и выявить рецепты, на основе которых можно создать искомую оптимальную Х-страницу. Наиболее ярким примером некоммерческого Х-сайта, на мой взгляд, является проект "Hard Soft", размещенный по адресу hardsoft.da.ru, о процессе создания и поддержки которого мы сейчас и поговорим.

Идея

В основе любого проекта лежит идея. Или, как выразились бы восточные братья, - "вечное зачем". Перед созданием стоит подумать: для чего тебе нужна страница? Если это - визитная карточка, твоя отметина в сети, то, соответственно, это небольшой сайт, со спокойным дизайном, десятком фоток, боевыми наградами в виде написанных кряков и музыки, сделанных хаков и папки Download, в случае если ты кодишь. Тут-то и особой идеи не надо. Такие паги - интересны. Интересны для тебя, твоих корефанов, девочек, а для незнакомого хацкера... В общем, это и есть визитная карточка.

Другое дело, настоящий Х-проект. Тут тебе стоит пошевелить мозгами: чем ты наиболее отличился в Х-деле? Естественно, отсюда и получается выбор тематики будущей паги. В нашем конкретном случае ребята решили делать сайт, посвященный Х-софту. Т.е. выбирать, тестить, описывать достойные хацкерские проги. Казалось бы, ничего оригинального, но фишка в том, что все проги залиты на их же хостинге, и, соответственно, отсутствуют мертвые ссылки. Как обычно, имеется архив по самым заметным русским докам в области хакинга. Встречаются и достаточно редкие. Разделы постоянно обновляются. Для поднятия количества посетителей перцы завели раздел новостей, обновляемый ежедневно.

Хостинг

Большинство проектов начинается на халявном хостинге. В данном случае это был Geocities.com и xoom, но после завала всякими сраными окошками сайт переехал на сервак chat.ru, где хранился облик сайта и часть даунлоада. Потом ЧАТ.СРУ перегрелся, стал жутко тормозить (что заметно и сейчас). Встал вопрос: шляться по разным хостингам в поисках оптимально-халявного или тратиться на качественный платный? Ребята выбрали третье: уломали знакомого из Америки на выделение места под сайт. Под какой, естественно, не сказали. ;) Пообещали, правда, что порнухи не будет. Изначально было выделено около 100 мегов, теперь стало еще больше. Вот это удачный шаг: хостить проект на серваке корефана. Того корефана, что хорошо разбирается в сетевой безопасности. Чтобы вовремя патчил дырки, не давая злым дядькам-хацкерам похакать твою пагу. Также не стоит забывать и о качестве канала сервака, т.е. о скорости работы. Отсюда можно сделать вывод: голимые серваки, установленные в институтах, не подходят. Нужен стабильный коннект и стабильная работа, чтобы сервак не уходил в даун.


Спецвыпуск хакер, номер #002, стр. 002-122-2, Название: Как делают Х-паги?

Название: Как делают Х-паги?

Спецвыпуск хакер, номер #002, стр. 002-122-2

Структура

Идея есть, наполнение есть, свободное время есть? Этого недостаточно. Нужно грамотно разработать структуру сайта, сделав, таким образом, удобной навигацию по паге. Да и обновлять удобно структурированный сайт куда проще и удобней, чем лазать по полчаса в поисках нужного. 100% рабочего рецепта создания удобной навигации не существует. Либо полностью стягивается с западного сайта, что есть плагиат, либо рисуется многократно, в розысках оптимального варианта. Так и в этом проекте структуру меняли трижды, лишь в третий раз придя к оптимальной. Была выброшена куча ненужных кнопок и дизайнерских наворотов, руководствуясь истиной: люди на сайты не картинки смотреть ходят. Для удобства работы теперь все новости, тексты и проги заливаются скриптами. Что, имхо, все равно лишнее. ;)

Рожденный в HTML!

А ты в чем делаешь свой сайт? Я знаю, что ты гордо, но лукаво ответишь: Notepad(c)M$. Так я и поверил. ;) Этот же проект, изначально, строился фронтпагом. То было детство, теперь перешли на дримвафер, с использованием того же блокнота ака Notepad для обрезания лишнего. Отсюда вывод, что не стоит особенно избегать мелкомягкого дядьки фронтпага, особенно поначалу. Но и увлекаться не советую: надо что-то и ручками уметь делать. ;)

Дизигн

Дизайн лаконичен, но отсутствием стильности не страдает. Чем же это все сделали? Не, ну понятно, что ручками, головой и прочими частями тела, я про другое: какие инструменты использовались при рисовании дизайна? Пользовались, естественно, фотожопом. Несмотря на то, что его считают страшной попсой, в нем содержится масса различных причуд, не подвластных уму новичка. Тут ребятам на помощь пришли различные тулзы от Ulead`a, использованные для упрощения работы. Особенно кстати пришелся набор Ulead Cool 3D, при помощи которого было нарисовано немало элементов паги. Для конечной корректировки и подгонки юзали, опять же, фотошоп и Macromedia Fireworks.

Раскрутка

Раскручивать проект начали лишь после того, как посчитали его конченным (Хехе, Синтез, приколись - он сказал "конченным" :) - прим. Холода), пардон, законченным. ;) Перво-наперво зарегили в поисковиках, таких как классический Rambler, Aport, Yandex. Также не обошли вниманием всякие каталоги ресурсов, как тот же ТОП100 на Рэмблере. Зарегились где только можно! А вот где нельзя - не отмечались: не вешали рекламу на хакнутые сайты. Не секрет, что многие хацкеры рыскают в поисках легко ломаемых серваков с целью дефейсить index своими линками и баннерами.

Когда было мало хостов, т.е. народ еще не догнал о существовании столь чудной паги, обменивались кнопками с другими проектами. Впрочем, как и обмениваются сейчас. Только теперь сотрудничают с проектами, имеющими высокие показатели по посещаемости. Чтобы обмен боком не вышел. ;) Спамом не занимались, как ни странно. О накрутке счетчиков да баннеров умалчивают, прикрываясь всеобъемлющим "да что только ни делали". Выбор баннерной системы пал на RLE(РЛЕ), как наиболее доступной и сотрудничающей с непрофессиональными проектами. Зарегистрировались в разделе RLE Common, т.к. в разделе Gold был выборочный прием участников. Пока накопленные показы не использовались. Продавать ребята их не собираются, очевидно, копят на большой рывок. ;) РЛЕ, пожалуй, наиболее популярна среди владельцев Х-страниц по понятным причинам. Да, и среди других некоммерческих проектов, имхо, остается наиболее подходящей.


Спецвыпуск хакер, номер #002, стр. 002-122-3, Название: Как делают Х-паги?

Название: Как делают Х-паги?

Спецвыпуск хакер, номер #002, стр. 002-122-3

Редирект

Редирект - перегонка юзера с красивого superhacker.com на гнусный http://www.chat.ru/~samij_dermovij_hosting/xakpebl/my_31337_page/index.htm . Существует масса служб редиректов, типа классического ДА.РУ, где был первоначально зареген проект и остается по сей день. Был выбран именно бесплатный редирект против купленного по левой креде. Поверь мне, на галимую пагу с отстойным содержанием никто не придет, даже если у нее будет домен второго уровня с красивым названием. А вот набрать лишние da.ru, cjb.net, желая выйти на качественный ресурс, потенциальный посетитель не поленится. Но выбирай осторожнее: чтобы сервис не глючил и был минимум рекламы. А то ребята признаются, что если бы выбирали сейчас, послали бы этот да.ру на три веселых буквы, т.е. OUT, :) кабы не юзерские закладки и регистрация в каталогах. Опять же, если ты пока не раскрутил свой проект, не имеет смысла покупать домен, т.к. этот шаг потерял бывалый шик: все научились генерить номера CC (креды). ;)

Баксы

Пожалуй, любой владелец паги задумывался о том, что пора бы подрубить зелени со своего детища? Но с пагами в стиле Х некоторый напряг: не любят дядьки буржуйские спонсоры хацкеров и хацкерские паги! Именно поэтому рассматриваемый проект не удалось представить как потенциальное место удачной рекламы. Соглашались работать только спонсоры, ориентированные на adult, на порнуху, короче. По понятным причинам, это не подошло. Продавать накапливаемые показы в РЛЕ - не выгодно, т.к. за юзерские аккаунты многого не дадут, да и чего скрывать: не так много накоплено. ;) Сейчас заняты активным поиском источников дохода. Наверно, все впереди: с увеличением количества хостов появится и быстро увеличится приток лавэ.

Итого... Странно! Итого! У него почему-то больше всех...

Вот такими вот тернистыми путями и был создан сей знатный проект "ХардСофт". Сложно? Да, непросто, не все сразу. Но зато - погляди на результат: имеется реально достойная страница с нормальным дизигном, отличным содержанием и пристойным уровнем безопасности. Чего еще надо-то? Так что не откладывай, берись за дело прямо сейчас, и всякие там Артемии Лебедевы и прочие ДиЗиГнеРы будут лететь, пердеть и радоваться, а твоя пага будет в Рамблер-топ-сто. Удачи!


Спецвыпуск хакер, номер #002, стр. 002-124-1, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-1

FAQ-ультативный Андрей Каролик (andrusha@sl.ru)

http://www.ruschannel.xxi.ru

Как лучше всего указывать ширину в ячейках таблицы? В пикселах или в процентах?

В долларах, причем американских, :) зеленые любят все. А вообще, без разницы, можно и в процентах, можно и в пикселах. В процентах удобно делать ячейки, в которых текст, а с фиксированной шириной те ячейки, где меню, картинки и т.п. Но запомни одну феню - не указывай ширину в пикселах и в процентах для разных ячеек одной таблицы одновременно. Ты, конечно, не дятел и смог изобразить такую таблицу, но браузер это вводит в глубокую думку и он в результате выводит все криво. Особенно это проблема НетШкафа, он в этом полный профан и в результате может некоторые ячейки потом отобразить с плюс-минус несколько пикселов. Но и тут есть уловка: укажи ширину в пикселах, а потом еще вставь картинку фона шириной в ширину ячейки и толщиной в 1 пиксел, тогда ширина во всех браузерах будет именно той, что поставишь, а картинка будет сливаться с фоном. Просто и со вкусом. :)

Я взял картинку с бесплатного сайта, а она как-то криво смотрится на моем фоне, что делать?

Говорила тебе мама - не лазить по открытым колодцам! Нет чтобы свое сваять, все чужое тащишь. :) Твоя проблема может возникнуть только в случае gif файла (простого или анимированного), так как он поддерживает функцию прозрачности на любой цвет. Это делается для облегчения файла, но в то же время кладется ограничение на фон. То есть, к примеру, в моей картинке полно белого цвета, а она будет лежать на белом фоне, тогда я просто делаю ее прозрачной на цвет 255,255,255 в том же ФотоЖопе (255,255,255 - кто не допер - белый, он же #FFFFFF). Но тогда на любом другом фоне, синем, например, моя картинка будет смотреться децел криво из-за отсутствия белого. Короче, делай этот файл в проге типа ФотоЖопа или ГифАниматора, если это анимашка, вовсе непрозрачным или прозрачным на другой, нужный тебе, цвет фона.

Я сделал несколько анимашек и поставил минимальную задержку, а потом их скучковал на одной паге, а они почему-то стали тормозить, у меня глюки?

Не глюки, а руки :) и не оттуда растут. Ты просто перегрузил страницу анимацией, вот и тормозит. А скорость показа зависит от свободных ресурсов тачки, на которой смотрят твое творение. Но так как у всех мозгов на компе и видеокарте не всегда густо, то советую умерить аппетиты и поубавить анимации. А потом, кто будет смотреть твою мурзилку? Всякая анимация хороша в меру. Для уменьшения торможения попробуй оптимизировать сами анимашки или заменить некоторые статикой.

Я прописал пути к картинкам и т.д. - все пашет, а закачал на сайт - фигу. В чем дело?

Поди угадаю... У тебя винды, а сайт качал на систему под Юникс? Точно? Ну в этом и вся проблема, которая, кстати, возникает у многих новичков. Юникс различает заглавные и прописные буквы, поэтому пути надо прописывать с учетом этой особенности, а файлы сохранять в прогах, которые при сохранении также учитывают регистр названия и расширения файла. Если ты крут и редактируешь код ручками, то подойдет NotePad.


Спецвыпуск хакер, номер #002, стр. 002-124-2, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-2

В моей паге я нашел не закрытый тег, но все пашет. Так их надо закрывать или нет?

Твоя правда, чувак. :) Иногда браузеры реагируют на не закрытые теги, но именно иногда. И представь, что будет, если у тебя несколько таких однотипных - браузер просто не поймет что к чему и будет отображать как ему взбредит. Но и не переборщи с тегами, которые в корне не закрываются. :) Не пытайся закрывать теги [image] или . :)

Лазая по Инету, видел, что как-то делают, чтобы ссылка открывалась в новом окне, поверх этого окна или вообще в соседнем фрейме. Как это сделать?

Ну это просто, как съесть сосиску. :) Ты ссылки прописываешь как сама_ссылка, прально? Ну вот, внеси в тег href еще target="цель", тогда это будет целевая гиперссылка. Усек? Что вместо "цель"? Ну это как съесть вторую сосиску. :) В target можно указать:

_blank - загрузит в новом окне

_self - стоит по умолчанию, грузит в этот же кадр или в исходное окно

_parent - загрузит в родительское окно или набор кадров, содержащий кадр с гиперссылкой

_top - загрузит в это же окно, но поверх всего остального

Пример: http://www.xakep.ru" target="_top">Мой любимый журнал

А что касается загрузки в соседний фрейм, то для этого нужно при загрузке кадровой структуры поименовать все кадры вот таким макаром: и т.д. Тогда, чтобы загрузить что-то в этот фрейм из любого другого, просто напиши в target="frame_number_one".

Как улучшить индексацию в поисковых системах?

А довольно просто, почти не напрягаясь. :) Для начала в заголовок документа внеси ключевые слова, тот что , все равно он весь не виден в заголовке, так что сначала введи истинный заголовок, а дальше кучу ключевых слов. Потом добавь между и строчку , эту строчку просматривают многие пауки поисковиков и индексируют по ней тоже. Ну а далее сделай , а между впиши ключевые слова, никто не увидит, а поисковик проиндексирует. Можешь хоть всю энциклопедию там прописать, :) то-то ламер будет думать над просто так полосой прокрутки. :))) Кстати, поисковики индексируют и по ссылкам тоже, так что впиши там еще ключевые слова и в виде ссылок на твою же, к примеру, страницу.

Как проще подобрать цвета фона, текста, ссылок и использованных ссылок?

Здравствуй, мама. Полно прог же. Причем не обязательно ставить тот же FrontPage, полно маленьких прог специально для подбора цветовой гаммы. Там есть ползуночки, нет, не те, :) а те, что ты мышкой двигаешь, и с помощью них ты меняешь цвета и тут же зрительно на примере заценяешь. Если радует - копируешь через буфер любой цвет в виде #RRGGBB или же копируешь сразу весь тег с этими цветами.

Как добиться нужного отступа?

Отступ отступу рознь - есть вниз, а есть в сторону как бы. :) Тот, что вниз, делается обычно с помощью
или

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


Спецвыпуск хакер, номер #002, стр. 002-124-3, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-3

Для обработки формы обязательно писать скрипт на Перл?

Ну, скрипты пишут не только на Перл. :) А для обработки формы можно схитрить и без скрипта, просто сделай вот так:

собстно_форма
, тогда все формы будут сливаться тебе на мыло через почтовые клиенты юзверей (заодно мыло разведаешь). А письмо будет в виде: поле=значение, поле=значение и т.д.

Только не забудь всем полям дать имя, :) делается как name=имя_поля, к примеру,

E-mail :
.

Как быстрее всего сконвертить таблицы из Word или Excel в ХТМЛ?

Способов несколько штук да и наберется: вручную, с помощью друга, с помощью подруги, с помощью любимой бабушки и т.д. :) Мой любимый способ - через HomeSite 4.0. Тут главная идея, чтобы прога понимала буфер с таблицей, то есть выдели всю таблицу в Ворде или в Экселе и вставь в проге, работающей с хтмл. Но все равно потом что-то придется править ручками, так что съешь что-нибудь покалорийнее и вперед. :) Да, чуть не забыл, если будешь юзать Home Site 4.0 - она ShareWare, так что крек бери на www.astalavista.box.sk

Как сделать, чтобы при наведении на меню оно менялось?

Хорошо - сайт за тебя нарисовать не просишь. :) Я опишу, как сделал бы я. Для начала нарисуй два состояния кнопки, которая по твоему замыслу будет меняться при наведении. Потом с помощью явы-скрипт подгрузи оба состояния. Я, конечно, понимаю, что ты крутой дизайнер и оба состояния весят не более 2-х килобайт, :) но если не сделать предварительную загрузку, то будет слишком заметна первая смена, да и не будет тогда фурычить при отключении от Интернет. А если предварительно подгрузить, то и смена состояний не будет тормозить вовсе, и, отключившись от инета, меню будет все равно работать (пока сайт не закроешь). Для простоты покажу на примере одной кнопки, надеюсь, ява-скрипт ты знаешь. :) Итак, подгружаем два состояния кнопки:

А потом используем это далее в коде:

Как ты понял, а может и не понял, :) images/button_deact.gif - это исходное состояние кнопки, а images/button_act.gif - это состояние при наведении мышки на кнопку. Относительный путь к нарисованной кнопке у тебя, естессно, будет свой. :)

Что значит промепить картинку и как это сделать?

Типа клевый вопрос. :) Картинку можно разрезать и на куски поставить ссылки соответствующие, а можно и не резать, но тоже как-то обозначить разные куски и на них поставить ссылки. Вот это и называют промепить. Почему промепить? :) В принципе, правильно это называется определить чувствительные к перемещению мыши области изображения, во как! :) Но так как это все дело находится между тегами и , то в народе говорят промепить типа. :) Иногда удобнее обозначить области, чем кромсать ножницами. Чувствительные области можно задавать как circ или circle (круг), poly или polygon (многоугольник) и rect или rectangle (прямоугольник). Расскажу на примере прямоугольника, тогда код для всего одного прямоугольника на какой-то картинке будет:


Спецвыпуск хакер, номер #002, стр. 002-124-4, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-4

Примечание:

title="" служит аналогично alt="", но, к сожалению, пашет тока в ИЕ.

х1 и у1 - это координаты верхнего левого угла области относительно верхнего левого угла картинки

х2 и у2 - это координаты нижнего правого угла области относительно верхнего левого угла картинки

Где взять координаты? Поднатужься, авось родишь. :) Но проще использовать проги для разметки областей, но я делаю по-другому и тебе щас насоветую. Берешь прогу, которая видит слои как ФотоЖоп, а то он не вычисляет координаты, нужные тебе, а жаль. Но я беру Microsoft Image Composer, это прога видит файлы *.psd со всеми слоями ФотоЖопа и позволяет по ним скакать, что очень кстати. К тому же она очерчивает эти слои по минимальному прямоугольнику и показывает координаты всех четырех углов, а тебе нужны только двух: левого верхнего и правого нижнего. Ловкость рук, и координаты у тебя. А вот если понадобится определять многоугольную или круглую область, то без спецпроги разметки тебе не обойтись, а на что тебе Инет? :) Там и ищи.

Есть ли ограничения на максимальный размер файлов и рисунков?

Если верить HTTP-протоколу, :) то он не накладывает никаких ограничений на физический размер файлов. Однако надо еще помнить, что при сидении в Инете на модеме фирмы "noname" и любимой скорости 2400 :) передача большого файла может занять очень много времени. В принципе можно и пиво попить, но психологи отметили, что ожидание документа более одной минуты обычно вызывает раздражение и желание пользователя прервать получение документа, не дочитав его до конца. Монитор еще вдруг со злости разобьет. :) Не имея особых математических наклонностей, можно узнать максимальный разумный предел размера файла, надо просто умножить пропускную способность сети, где все лежит, на 60 секунд и получишь разумную оценку максимальной длины файла. Если ж это съемки купания нудистов на пляже и мультик резать не хотелось бы, а он весит более 100 Кбайт, будет разумно предупредить об этом юзверя, указав длину файла в гиперссылке. А не очень нужные файлы можно кинуть в архивированном виде на FTP-сервер.

Как сделать так, чтобы программа просмотра загружала текст прежде рисунков?


Спецвыпуск хакер, номер #002, стр. 002-124-5, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-5

Стереть все рисунки. :) Шутка. Почти все программы просмотра, в том числе НетШкаф и ИЕ, перед началом отображения пытаются "спланировать" размещение текста, рисунков и таблиц на странице и не выводят изображение, пока не узнают размеры рисунков и таблиц. Поэтому просто-напросто укажи физические размеры рисунков и таблиц (в пикселах или процентах). Для этого юзай дополнительные атрибуты WIDTH и HEIGHT в описаниях рисунков и таблиц.

Можно ли включать один HTML-файл в другой?

В легкую. Такая ситуация возникает, например, если ты захотел включить оперативную (часто меняющуюся) информацию в несколько своих файлов, не редактируя каждый раз все эти файлы. Для этого твой сервер должен поддерживать режим server-side includes (SSI) и использовать его в директории с твоими файлами. Обратись к администратору сервера, чтобы уточнить эту возможность и узнать точный синтаксис.

В чем заключается оптимизация и сжатие графики для веба?

С чего ты решил, что оптимизация и сжатие применяются только для веба? :) Обычно сжатие информации основано на частой повторяемости одинаковых последовательностей бит в графических файлах. Например, горизонтальная последовательность из пикселов одного цвета может выглядеть в двоичном представлении так: 0100010001000100... Вместо такой длинной последовательности бит при использовании одного из простых алгоритмов сжатия - так называемого Run-Length Encoding - в файл может быть записана короткая подпоследовательность 0100 и число ее повторений. При записи в формате GIF применяются более сложные и эффективные алгоритмы Лемпеля-Зива-Уэлча (LZW), на которых также основана работа большинства программ архивирования файлов. А алгоритмы сжатия, используемые для записи графики в формате JPEG, основаны не только на устранении избыточности, но и на особенностях человеческого зрения, что позволяет отбрасывать некоторую часть информации без ущерба для ее восприятия глазом.

Почему цвета в хтмл пишутся именно в шестнадцатиричном виде?

Шестнадцатиричная система счисления широко применяется из-за того, что ее основание является степенью двойки, что значительно упрощает преобразования между шестнадцатиричным и двоичным, "родным" для компьютеров современной архитектуры, представлением чисел. Тогда ты спросишь, а чего, мол, тогда не в двоичном коде? Сама двоичная запись неудобна из-за того, что требуется слишком много разрядов для записи даже небольших чисел. Например, число 65 в десятичной системе - это 1000001 в двоичной и 41 в шестнадцатиричной системах. Так как в RGB используется нумерация каждой составляющей от 0 до 255, то вот таблица соответствия записей в десятичной и шестнадцатиричной формах:

0 1 ... 9 10 11 12 13 14 15 16 17 18 ... 254 255

0 1 ... 9 A B C D E F 10 11 12 ... FE FF

Что вообще обозначает протокол?

Ну вот смотри. Ты спер у кого-то пароль к Инету, тебя засекли и вызвали омон. Омон приехал и от%?%#@ил (вставьте по вкусу) тебя. После этого пишут протокол. :) Протоколами называются принятые всеми разработчиками коммуникационных программ правила, которые описывают порядок установления соединения между двумя включенными в сеть компьютерами, способ последующей передачи информации и правила разрыва соединения. Используемые в Инете протоколы, строго говоря, не являются стандартами, а носят характер рекомендаций. Именно поэтому глюки во многих программах зависят от того, насколько точно разработчики программного обеспечения, установленного на компьютерах сервера и клиента, следовали этим документам. :)


Спецвыпуск хакер, номер #002, стр. 002-124-6, WEB-FAQ

WEB-FAQ

Спецвыпуск хакер, номер #002, стр. 002-124-6

Что значит термин proxy-server?

В принципе термин proxy-server используется в двух смыслах. Во-первых, так называется сервер, устанавливаемый на firewall (компьютере, отделяющем локальную сеть с повышенной секретностью от Инета с целью ограничения доступа из того же Инета в закрытую часть сети). Во-вторых, под proxy-server часто имеют в виду такую конфигурацию сервера, которая позволяет сохранять копии последних полученных с его помощью документов на локальном жестком диске достаточной емкости (обычно 50 Мбайт и выше). Такое кэширование позволяет ускорить доступ к документам в случае недостаточно высокой пропускной способности сети. Хотя и не обязательно, это также часто используется всеми провайдерами. Понятное дело, что если твой друг Вася скачал себе половину порнушного сайта из Штатов и proxy-сервер это закэшировал, то тебе проще и быстрее слить все это дело с кэша, нежели фигачить по второму разу из Штатов. :)

Почему админы серверов обычно не дают напрямую ставить скрипты, а порой просто запрещают?

Администраторы многих систем справедливо не любят устанавливать на сервере лишние программы CGI, которые понижают "сопротивляемость" сервера незаконным вторжениям хакеров. Им просто приходится выбирать между твоей страницей с нарисованными травкой, солнышком и твоей рожей и возможностью хакерам незаконно получить доступ на этом сервере через дырки в твоем скрипте. :)