Фоновая картинка на весь экран

Бывает, что нужно расположить какую-нибудь красивую фотку на фон всей страницы, чтобы было красиво. Или наоборот, у кого на что хватает :-)

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

Итак, поговорим о размерах экрана и о том, что он, оказывается, тоже имеет значение. Для начала, представьте себе, что сайты смотрят люди с разным разрешением экрана: 1024х768, 1280х1024, 800х600, 1280х600 и так далее, смотря у кого какие мониторы. Представили? Отлично. Теперь сюда же плюсуем и разные браузеры, размер рабочей области которых порой может довольно ощутимо отличаться. Скажем, в Интернет-эксплорере обзор окна довольно средний, в Опере поменьше, в Файерфоксе, опять же, почти, но не совсем, такой же, как в эксплорере. А в Хроме совсем другой, больше. Плюс Сафари. Во всех этих браузерах размер видимой области разный. А если еще взять пользователей, которые смотрят сайты в полноэкранном режиме? 

Я все это подвожу к одной мысли: создать пакет разных графических файлов под все случаи жизни не получится. Мы еще не все операционные системы с вами учли ;-)

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

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

Ширина клиентской области вычисляется так:

function getClientWidth() {
   return document.compatMode=='CSS1Compat' && !window.opera?
   document.documentElement.clientWidth:document.body.clientWidth;
}

Соответсвенно, нам остается только вычислить высоту, используя простое пропорциональное соотношение сторон и нарисовать картинку, используя JavaScript:

<script language="JavaScript">
    document.write( '<img src="img.gif" width="' + w + '" height="' + h + '" />' );
</script>

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

Ну и, конечно, по традиции все статьи по JavaScript должны заканчиваться фразой: "К сожалению, у этого метода есть один недостаток — он не будет работать в браузере с отключенным JavaScript". А достоинства, я думаю, и так видно.

Кодировка в письмах

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

Content-Type: text/plain; charset=utf-8

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

Content-Transfer-Encoding: binary,

которая не даст никакому клиенту изменять содержимое письма ни при каких обстоятельствах.

Эффективное использования drag.js в админе

Наши клиенты получили недавно админку с такой вот примерно фишкой: http://shootnix.net/ajax/sample.html Т.е. пользователь может наглядно управлять содержимым какого-нибудь раздела, скажем, "избранные фото" или "новинки проката". Здесь это не имеет значения. Имеет значение лишь то, что подобная наглядная система управления информацией очень симпатична и вполне себе удобна.

Как это работает?

http://shootnix.net/ajax/drag.js
Основной скрипт, осуществляющий перетаскивание объектов и обнаружения их в нужном месте.
http://shootnix.net/ajax/ajaxy.js   
Здесь всего одна функция — getXMLHttpRequest(), которая немного сокращает код в страничке. 

И, наконец, сам функционал находится в страничке sample.html. Функция fu() обнаруживает объекты, попавшие в рамку и отправляет данные о них скрипту в таком виде: id-left-top:id-left-top:id-... Т.е. мы получаем параметры для каждого объета, просто распарсив строку GET-запроса. Enjoy! ;-)

Правильное применение Radio и Checkbox

Чтобы в формах, содержащих Radio- и Checkbox-инпуты, текст, относящийся к этим контролам тоже нажимал кнопки (как в стандартных оконных приложениях), используем тэг "label" с атрибутом "for".

Атрибут "for" получает id контрола, которому будет служить метка. Все просто :-)

Функции. Передача параметров с дополнительными атрибутами

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

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

Начнем с простого - один ключ, один параметр.

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

sub Simple {
  # Хэш придется сделать глобальным внутри внешней функции, чтобы 
  # внутренние его видели и могли с ним работать
  our %hash = ( @_ );

  # $sub - это ключ хэша. То есть, имя запрошенной функции
  my ( $sub ) = keys( %hash );

  # Испольнить запрошенную функцию
  eval $sub or print @!;

  # Простые внутренние функции, для наглядности
  sub hello {
    my ( $name ) = values( %hash );
    printf " Hello, %s!", $name;
  }

  sub good_beye {
    my ( $name ) = values( %hash );
    printf " Good Beye, %s!", $name;
  }
}

&Simple( hello => 'Alex' );

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

sub Hello {
  # Все, что передали функции хэшем
  my %hash = ( @_ );

  # Теперь ключи хэша в массиве имен
  my @names = keys( %hash );

  # А значения - в массиве количеств повторений
  my @repeat = values( %hash );

  # Дело техники
  for( my $i=0; $i<@names; $i++ ) {       $repeat[$i] ||= 1;    
    for( my $j=0; $j<$repeat[$i]; $j++ ) {      
        printf " Hello, %s!\n", $names[$i];
    }
  }
}

&Hello( sasha => 3, sveta => 10, Vasya );

Лол — новое слово?

Лол — новое слово? (ver. 1.0)

Идея такова: сделать автоматизированным процесс придумывания всяческой новомодной ахинеи в стиле новойаза. Но мы пошли дальше: мы вообще слова придумывать собрались. Лихо...

Все же, как ни крути, а слова должны как-то быть на родной язык похожи, чтобы произносились удобно, читались без помех и на слух ложились без особых усилий. Ну, например, просто «пвпвыпрлчъ» не пойдет.

В русском языке есть свои особенности фонетического строя слов: после глухой согласной следует либо сонорная согласная, либо гласная. После гласной — согласная и т.д. Ну, надеюсь все поняли? Узёзд ухум ряпл! :-)))

Рабочая программа на перле: lol.zip (1010 байт)

Что такое ivy?

Одним из важнейших проектов в моей жизни является ivy (http://ivy.artline.kz). Это квинтессенция всех (или почти всех) моих идей и исканий в стороне програмирования на Perl. 

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

Пока этого не видно, но скоро новый релиз, который, как обычно, уберет лишнее, устранит старые баги, добавит новые :-)