Альманах дизайнера

1. Баннерная система на вашем сайте ..................................................................

2. Динамическое определение разрешения монитора ............................................
3. Создание диаграмм с помощью HTML .................................................................

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

<-- Локальная баннерная система на вашем сайте--> Обычно, если сайт хороший, то он посещаем. А на посещаемых сайтах выгодно размещать рекламу (не обязательно коммерческую). Для этого на крупных серверах часто действуют собственные полноценные баннерные системы, основанные на CGI. Их еще называют "локальными крутилками". Администрация сервера полностью контролирует, какие баннеры демонстрируются на сайте и при желании осуществляет продажу показов.

Нечто подобное вы можете сделать на своем сайте без использования интерфейса CGI, с помощью собственной фантазии и небольшого Java-скрипта. Конечно, речь идет о случае, когда необходимо показывать на сайте небольшое количество - десяток-другой - заранее заготовленных баннеров. Средствами JavaScript можно контролировать количественное соотношение и временные (правда, относительно клиента) рамки показов отдельных баннеров.

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

<SCRIPT language="JavaScript"> //  </SCRIPT> <SCRIPT language="JavaScript"> //  </SCRIPT>

Вам нужно лишь скопировать код скрипта и заменить/добавить ссылки. Естественно, кроме картинок можно выводить сопутствующий текст.

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

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

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

Конечно, сказанное в последнем абзаце звучит довольно дико, но все-таки, SSI - это вполне самостоятельная технология, которую можно использовать не только в сочетании с CGI-скриптами.

Недавно гражданин И. спросил нас о том, как заставить браузер пользователя загружать ту или иную версию страницы в зависимости от того, какое установлено экранное разрешение у этого пользователя. Пробуем ответить...

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

<html>
<body>

<script language="JavaScript">
<!--
// Сначала определяем разрешение
if (self.screen) { // для браузеров 4-тых версий
width = screen.width
height = screen.height
}
else if (self.java) { // для NN3 (enabled Java)
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize(); 
width = scrsize.width; 
height = scrsize.height; 
}else{
width = height = 'x' // для прочих браузеров
}
// Теперь выполняем нужное действие
if (width == 640) {
location.href='480x640/index.html' }
else if (width == 800) {
location.href='600x800/index.html' }
else if (width == 1024) {
location.href='768x1024/index.html' }
else if (width == 1280) {
location.href='hi-resolution/index.html' }
else {
location.href='default_resolution/index.html' }
//-->
</script>

</body>
</html>

Если вам не лень делать более одной версии страниц, можно использовать подобный HTML-код в качестве дефолтовой страницы вашего сайта. Во избежание проблем с браузерами, не поддерживающими JavaScript, в контейнер <HEAD> можно добавить мета-инструкцию переадресации:

<META HTTP-EQUIV=REFRESH CONTENT="2; 
URL=default_resolution/index.html">
<!-- Если в течении 2 секунд браузер не выполнит наш скрипт, то 
произойдет принудительный переход на указанную страницу -->

Вот и все.

Если Вам приходилось размещать на страничках какие-либо диаграммы, то Вы меня поймете...

Для тех, кто пока не испытал такого кайфа, объясню.

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

Предположим, ваш сайт посвящен компьютерам, и вы хотите положить туда свежую статейку о новом супер-модеме, которую вам вчера принесли (или вы ее сами написали) в формате Word (только не говорите, что вы всегда используете Notepad). В этой вашей статейке есть серьезное описание, пара таблиц и диаграмма. Деваться некуда, в HTML конвертируем Word'ом, получаем текст HTML, который после чистки весит 20K, и диаграммку в виде GIF'а, который весит 60K. Итого 80K. Одну четверть клиент платит за содержательную статью, три четверти - за удовольствие созерцать одну диаграмму.

Проблему можно решить тремя способами:

1. Плюнуть на клиента (как обычно).
2. Выкинуть диаграмму (тогда зачем было ее строить?)
3. Построить диаграмму в виде таблицы HTML.

Новый

120

Другой

100

Совсем голимый

Хотите - верьте, хотите - нет, но вся эта красота занимает ровно 903 байта!
Фрагмент текста этой диаграммы:


<TABLE BORDER=0 BGCOLOR=#AAFFFF WIDTH=100%><TR><TD WIDTH=15%>
<TABLE BORDER=0 WIDTH=100%><TR><TD>
<FONT COLOR=#000000>
Новый</TD></TR></TABLE></TD><TD>
<TABLE BORDER=0 WIDTH=100% HEIGHT=25><TR>
<TD BGCOLOR=#AA5555 WIDTH=100% ALIGN=RIGHT>
<FONT COLOR=#FFFFFF>
120
<br></TD><TD>
</TD></TR></TABLE></TD></TR><TR><TD WIDTH=15%>

......................

<FONT COLOR=#000000>
10
</TD></TR></TABLE></TD></TR></TABLE>

Что вы говорите? Как написать такой бред? Прекрасный вопрос! Можно открыть наш любимый Notepad (калькулятор, взять бумагу и карандаш), и через час диаграмма готова!

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