«Шарим» и «шаримся»

aki-igor

Здесь и сейчас

Следы в WWW

«Ш»и«Ш»

«Шарим» и «шаримся» фотками...

...Так как же всё-таки размещать фотографии
на вэб-страницах?

Опубликовано в журнале
«UPgrade» #14(259) (апр 2006)
версия для печати

Все мы наблюдаем в последнее время очередной бум интереса к фотографии. Почему очередной? А как же: это уже было и в 70-е годы, когда одним из самых популярных подарков на день рождения 10-12-летнего сына или дочки был фотоаппарат «Смена».

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

Тогда, если помните, в «деле» остались только самые стойкие, которые всё это купили и попутно всё же научились кое-как снимать (раз уж понесли расходы…). А потом ещё они сидели вечерами да заполночь в ванной комнате в полнейшем одиночестве и темноте и печатали-печатали-печатали многие сотни фоток на раздачу друзьям. А потом ещё целый день надо было их глянцевать, накатывая этим скрипучим валиком… О-о-ох…

Такой же бум был и в 90-е годы, когда повсеместно расплодились пресловутые «минилабы». И только полный лентяй не купил или не подарил кому-то уже цветную (!) «мыльницу».

«Минилабы» – это был ПРОГРЕСС! «Вы только нажимаете на кнопку – всё остальное мы делаем за вас!» – гласил рекламный слоган одной из фирм. Кстати, он же теперь реинкарнирован кем-то в рекламе цифровой фотоаппаратуры!

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

Теперь стало уж совсем хорошо, точнее, совсем просто. Цифровой фотик действительно всё делает за нас. Можно вообще не иметь представления о том, что такое выдержка и диафрагма. Мы даже раздражаемся на то, что он «тормозит», наводя на резкость (а ведь раньше мы это делали вручную, не замечая затраченного на это времени). И если первоначально печать стоила дороже, чем с плёнки, то и это уже в прошлом. А ведь можно вообще не печатать – а хранить всё в компьютере или на дисках…

Ну да ладно – не о том разговор!

Человеку явно не хватает (как бы это назвать?) «исторического документирования», что ли, прожитых жизненных моментов. А фотография как раз и предоставляет ему великолепную возможность всё зафиксировать. Остановить Время, понимаешь…

* * *

Хорошо. Засняли. Затем посредством «минилаба» отпечатали и даже не поленились (а это делают, к сожалению, далеко не всё) разложить фотографии в альбомчики. Слава Богу, они тоже в огромном количестве и многообразии продаются!

А что дальше? Конечно, когда любимое чадо подрастет, можно ему это всё и показать.… Как-то оно ему понравится? А если на фотографиях отображены многие люди? Ну, например, с модного нынче мероприятия под названием «корпоративная вечеринка» или из какой-нибудь коллективной загородной поездки по достопримечательностям? А чаще – из поездки на заграничный курорт. Это вообще пытка – смотреть (и главное – заинтересованно и молча!) тонны откровенно плохих или неинтересных фотографий какой-нибудь хорошей подруги после того, как она съездила в Париж. «Вот я на фоне Нотр-Дам, вот я на фоне ещё чего-то»… Ну, вы меня понимаете...

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

Всё же в некоторых компаниях/коллективах находятся такие героические личности, которые идут после «party» (ещё одно модное словечко, раньше говорили – пьянка) в этот самый «минилаб» и по-старинке печатают многие сотни фотографий, чтобы раздать/подарить (ну, не продавать же!) их родственникам и друзьям. Но этих героев становится всё меньше. И вот почему:

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

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

Интернет! Как же!

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

Но не торопитесь огорчаться те, кто до сих пор ещё на Dial-Up-е! Как с распространением цифровой фотографии появились новые проблемы, например, где хранить эти тысячи фоток (то ли докупать новый винчестер, то ли посильнее сжимать фотки и т.д.), так и с появлением высокоскоростных подключений появилась проблема, имя которой – «трафик». Знаете ли вы, что почти половина пользователей ADSL просто отключают отображение графики на вэб-страницах, чтобы уменьшить трафик? Вот, например, недавно я собирал и настраивал дешёвый компьютер из б/у комплектующих по просьбе молодого паренька, приехавшего в наш город в длительную командировку из Норильска. Он и не знал, что интернет бывает через модем! Там у них все запросто пользуются быстрым интернетом. Но (не поверите!) он чрезвычайно обрадовался, когда выяснилось, что по карточке Dial-Up за 100 рублей можно пусть не быстро, но ПОЛНОЦЕННО смотреть ЛЮБЫЕ вэб-страницы, не отключая графику (и не заботясь о трафике).

* * *

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

По поводу медленной загрузки даже шутили, что «WWW – это World Wide Wait» – всемирное ожидание. А страницы, которые слишком долго грузились из-за ошибки вэб-мастера, разместившего на них слишком тяжелую графику, называли «JPIG», в вольном переводе на русский – «Джи-Свин». Думаю, именно тогда разработчики браузеров включили в них возможность отключения отображения графики на вэб-страницах. (А так же, вероятно, и кнопку остановки загрузки -:)) ).

Затем была придумана схема размещения, при которой посетитель сначала попадает на некую стартовую тематическую страницу (типа, «Мой фотоальбом»), на которой видит сразу весь этот альбом в виде маленьких картинок (американцы их прозвали “thumbnails” = «ноготки»). А они уже, эти «ноготки», работают как ссылки для открытия больших картинок в том же или новом окне.

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

Такая схема до сих пор используется довольно широко. В чём же её недостатки?

Во-первых, эта схема накладывает ограничение на размер, количество и «вес» этих «ноготков». Ведь главная цель этой схемы – «заманить» посетителя, заинтересовать его. А там – пусть сам выбирает, что ему смотреть и/или сохранять/скачивать.

Практика Dial-Up-а показывает, что страница, общий «вес» которой превышает 50-70 KB, уже угрожающе «тяжела» для посетителя, который может запросто уйти, не дождавшись её полной загрузки. Как следствие получается, что «ноготок» должен иметь «вес» 2-3 КБ при размере, скажем, в 100*75 точек (если сделать мельче, то изображение будет вообще почти неразличимо), а значит, их количество на странице не должно превышать 15-20 штук. Лично я размещаю обычно 10, крайне редко до 15.

Во-вторых, эти большие картинки, на которые направляется посетитель по ссылке с «ноготка», всё равно не могут быть действительно большими. Их обычно режут до размера порядка 600*400, да и сжимают с использованием JPG-компрессии до 40-30%, что фактически делает их неприменимыми нигде, кроме, разве что, просмотра на мониторе. Такие плохие, пережатые фотки уже не напечатаешь. А вызвано это тем, что на «ноготке» практически ничего не видно – и надо сразу грузить большую. Но не слишком – долго будет грузиться. В общем, какой-то порочный круг!

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

Новое окно совсем перекрывает первоначальное окно навигации, что и неудобно, да и не красиво – фотография в нём размещена в левом верхнем углу, а правее и ниже – большие несуразные белые поля

* * *

Однажды я увидел на сайте российских бардов www.bards.ru в разделе ФОТОАРХИВ другую схему. Там на стартовой тематической странице, например, «Грушинский фестиваль 2005 года» , по клику на «ноготке» открывается промежуточное окно с картинкой средних размеров (480*360) и с дополнительным полем для описания фотографии и с небольшой дополнительной навигацией, типа «СЛЕДУЮЩЕЕ ФОТО» и «ПРЕДЫДУЩЕЕ ФОТО». А уже на этой промежуточной странице есть ссылка для открытия «ПОЛНОГО ФОТО» – как это там называется.

По клику на «ноготке» открывается промежуточное окно с картинкой средних размеров (480*360) и с дополнительным полем для описания фотографии и с небольшой дополнительной навигацией, типа «СЛЕДУЮЩЕЕ ФОТО» и «ПРЕДЫДУЩЕЕ ФОТО»

Здесь для полноты картины следует заметить, что на www.bards.ru это с позволения сказать «полное фото» тоже сильно пережато (см. скриншот на предыдущей странице), но это вызвано другой причиной. Там организована автоматизированная система добавления фотографий в ФОТОАРХИВ многими зарегистрированными пользователями – автоматика работает усреднённо, не зная заранее характер источника, и несколько перестраховывается.

Я сначала подумал, что эта схема является идеальным решением, и даже уже собирался её перенять. Но, пообщавшись с одним моим товарищем и рассказав ему об этом, услышал интересное мнение, что, оказывается и это плохо! Почему?

Он сказал, что не любит ждать загрузки каждой фотки по отдельности (а кто же любит?), а просто кликает по одной из них правой кнопкой и выбирает команду «ЗАКАЧАТЬ ВСЁ ПРИ ПОМОЩИ FLASH GET» . (Команда появляется в контекстном меню после установки этого менеджера закачек – см. ниже). Затем можно в появившемся окне свойств закачки выбрать фильтр, который будет скачивать, например, только файлы типа *.jpg и нажать «ОК» . Программа начинает грузить ВСЕ картинки, на которые вели ссылки со страницы.

По правому клику команда ЗАКАЧАТЬ ВСЁ ПРИ ПОМОЩИ FLASH GET

Затем можно в появившемся окне свойств закачки выбрать фильтр, который будет скачивать, например, только файлы типа *.jpg и нажать ОК

А пока идёт загрузка, можно гулять, как он говорит, по другим страницам (это как раз проблематично, т.к. FlashGet полностью забивает канал связи, и даже страницы, не содержащие графики, открываются крайне медленно, пока не закончится загрузка) или заняться другими делами на локальной машине (погонять шарики или, к примеру, написать письмо). А когда загрузка закончится, можно комфортно посмотреть фотки в той же ACDSee .

Должен, кстати, признаться, что я сам уже давно пользуюсь этим методом для «пакетного» сохранения картинок. А вот и ссылка на страницу, откуда можно загрузить FlashGet . http://www.flashget.com/index_en.htm

Программа разбивает файл на несколько частей и загружает их параллельно, в несколько «потоков» (jet1, jet2,….), позволяя максимально использовать возможности канала связи. А так же позволяет в случае обрыва соединения не начинать всё сначала, а продолжить загрузку с текущего места. Есть официальный русификатор и справка на русском языке. Бесплатный вариант вполне функционален (при показе баннера)!

В описанном случае (на bards.ru) этот прием по пакетной закачке фотографий не проходит, т.к. ссылки с «ноготков» ведут НЕ НА КАРТИНКИ, а на страницы с их описанием/размещением (*.html). И менеджер закачки будет предлагать скачать эти файлы *.html, которые, как вы понимаете, вообще не содержат графики.

* * *

Подумав над этой проблемой, я решил её так:

И «ноготки» и фотки средних размеров (у меня они называются <img id="monitor"...> = «мониторчики») располагаются на одной и той же странице, а большие «оригиналы» (в кавычках, т.к. они ведь тоже ужаты немного) лежат на новых страницах, открывающихся по клику на «ноготке».

Эта возможность осуществляется с помощью JavaScript ( function changeImage() ) – смена картинки в блоке с id="monitor" по наведению мыши на «ноготок».

Сначала в секции <head>. . .</head> страницы надо создать идентификатор #monitor для обозначения места на странице, где будут происходить эти превращения:

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
   Размещение фотографий
</title>
<style type="text/css" media="screen">
<!--
#monitor {
   position: absolute;
   left: 5px;
   top: 5px;
   width: 320px;
   height: 240px;
   margin: 5px;
   background: #ffd08a;
   border: groove 5px #ad4531;}

Туда же надо добавить классы для размещения «ноготков» в «кадрах» ( .frame ) на «фотоплёнке» ( .fotoplenka ). Я ещё добавил класс .frnum для размещения поверх каждого кадра его номера в квадратике на жёлтом фоне ( z-index: 100; ).

.fotoplenka {
   position: absolute;
   top: 5px;
   left: 400px;
   width: 130px;
   padding: 0px;
   background: url(fotoplenka.gif) repeat-y left top; }

.frame {
   position: relative;
   width: 130px;
   z-index: 0;}

.frnum {
   position: absolute;
   bottom: 0px;
   right: 12px;
   width: 25px;
   font: bold 20px Times, serif;
   color: #004080;
   text-align: center;
   vertical-align: bottom;
   z-index: 100;
   background-color: #ffd571;}

--> </style>

Так же в секцию <head>. . .</head> поместите описание функции JavaScript, которая будет по наведению мыши (событие onmouseover ) менять картинку в «мониторчике» на другую, а при уходе мыши ( onmouseout ) опять менять картинку ( function changeBack ). Это очень полезно для того, чтобы те посетители, которые не поняли механизма (поленились прочесть инструкцию или очень медленно всё грузилось), не смогли сохранить картинку среднего размера непосредственно из «мониторчика». А то потом ещё будут высказывать претензии по её «недостаточному» качеству…

Затем в теле документа надо разместить какой-то первоначальный рисунок в «мониторчике», а, к примеру, правее его или ниже – нашу «фотоплёнку». В качестве фона у неё используется анимированный *.gif , создающий иллюзию прокрутки плёнки.

Лирическое отступление

Кстати, ровно на этом месте обнаружился интересный исторический факт.

Как вы думаете, какого цвета фотоплёнка? Я почему-то думал, что сине-фиолетового. Так и нарисовал сначала. Тут заходит ко мне моя 17-летняя дочка и говорит:

— Всё хорошо, только плёнка неправильного цвета!

— Как неправильного?

Достали плёнки. Они у меня хранятся в большом количестве с незапамятных времён в специальных таких коробочках. Действительно, неправильного. Это я по памяти синий цвет воспроизвёл (по какой-то памяти спинного мозга!) – такого цвета была проявленная черно-белая плёнка! Ведь сколько тысяч (!) раз я её в руках держал, проявляя и печатая…

Но это было так давно, что уже взрослые дети такую НИКОГДА НЕ ВИДЕЛИ! Они прекрасно знают, что плёнка коричневая. Та самая, которую получают после проявки из «минилаба». Причём, цвет у неё какой-то трудный – никак не удавалось подобрать сравнением. Пришлось её сфотографировать и, открыв в редакторе, буквально в виде числа перенести номер цвета на страницу.

Вот она какая:

А ведь через несколько лет, вероятно, появится (или уже родилось) поколение, которое вообще не будет знать НИКАКОЙ плёнки….

* * *

Но вернёмся к нашей конструкции.

В результате описанный приём позволяет, во-первых, разместить в качестве «полных фото» – фотографии более крупного размера (если уж фотка настолько понравилась посетителю, то он подождёт и долгой загрузки ради её качества) и, с другой стороны, позволяет использовать менеджер загрузки, типа FlashGet. (Рекомендую!)

Естественно, надо сначала подготовить картинки соответствующих размеров. Выбрав фотографии для размещения, я сначала привожу их к некоему «общему знаменателю». Размер зависит от аудитории, для которой это всё размещается. Но чаще всего, полная аудитория неизвестна – ведь любой вэб-мастер хотел бы, чтобы его страницу постоянно посещали новые люди! Даже после тех, кому она была непосредственно адресована. Поэтому, приходится несколько жертвовать качеством. Я с некоторых пор стал в качестве «больших» использовать размер 1000, а иногда и 1200 точек по длинной стороне фотографии – раньше не решался размещать такие большие.

Это, конечно, сегодня очень мало, если сравнить с возможностями современных цифровых фотиков. Но, к сожалению, это является следствием некоего компромисса. Что важнее – качество одной-единственной фотографии при её сохранении или Его Величество Посетитель со своим чаще всего небольшим монитором и низкой скоростью соединения? А для особо заинтересованных – некоторые фотки с их многомегабайтным оригинальным «весом» могу и отдельно высылать.

* * *

Далее. Я готовлю из этих фоток промежуточные, которые будут отображаться в «мониторчике». К имени файла добавлена буковка “m”.

В популярной программе ACDSee есть средство пакетной резки, смотрите:

В браузере ACDSee выделяете группу файлов, а затем по правому клику даёте команду «BATCH TOLLS - RESIZE»,
указываете количество точек в графах «WIDTH» и «HEIGHT» (ширина-высота)
переставляете переключатель в положение «REDUCE ONLY» (только уменьшать)
нажав кнопку «OPTIONS», выбираете пункт «PLACE THE MODIFIED IMAGES IN THE FOLOWING FOLDER» (поместить изменённые картинки в следующую папку) и выбираете другую (новую) папку,
нажав ещё кнопочку «JPEG COMPRESSION SETTINGS» (установки JPEG-сжатия), перемещаете такой движочек вверху на 40-30%
и нажимаете ОК три раза.

Таким же образом можно затем их все пакетно переименовать (например, добавить к имени файла приписку “m” для средних по размеру или “small” для «ноготков») – правой «крысой» по выделенной группе и команда «RENAME». Затем пишете «маску» (общую часть имени – строчными латинскими буквами!), добавив несколько «диезов» – вместо них будут пробегать порядковые номера. Там же можно указать, чтобы программа автоматически сменила регистр расширения имён файлов на строчный («Change extension to lower case»). Ох, как много ошибок на вэб-страницах рождается из-за повальной любви производителей цифровых фотиков «покричать» – именовать файлы прописными буквами! А также из-за того, что компания Microsoft однажды решила, что отображение расширения файлов в ПРОВОДНИКЕ – это никому (?) не нужная блажь! Откуда же новым пользователям (которых, между прочим, абсолютное большинство!) вообще узнать, что такое РАСШИРЕНИЕ ФАЙЛА?!

Но вернёмся к делу. Должен сказать, правда, что для «средненьких» картинок с размером 320*240 я этим пакетным средством не пользуюсь. И вот по какой причине. Фотки ведь бывают, как говорят, «альбомные» (“landscape”, или горизонтальные) и «портретные» (“portrait”, или вертикальные). А «мониторчик» у меня, как вы успели заметить, имеет

style=”position:absolute; width:320; height:240;”

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

Все эти «средние» для показа в «мониторчике» должны быть СТРОГО одинаковых размеров и пропорций, чтобы страница не «ломалась» при смене картинки. Это строгое соответствие тоже легко реализуется с помощью средства встроенного редактора ACDSee. Запустив инструмент «CROP», поставьте галочку в позиции «Constrain cropping proportion» и выберите из выпадающего списка нужную пропорцию (в нашем случае 4х3). Либо можно ввести в поля «WIDTH» и «HEIGHT» необходимые значения и уже потом поставить эту галочку. Затем в строке «PRESETS» нажать на синюю дискетку и ввести название этой нашей предустановки. Например, такое: «320*240-Альбомная».

Запустив инструмент «crop», поставьте галочку в позиции «Constrain cropping proportion» и выберите из выпадающего списка нужную пропорцию (в нашем случае 4х3)

В дальнейшем можно будет просто выбирать из выпадающего списка предустановок то, что надо для данного конкретного дела. При растягивании обрезающей рамки автоматически будут соблюдаться указанные вами пропорции резки. У меня заготовлены всякие варианты – например, для печати на бумаге размером 10*15 – портретный и альбомный. Чтобы не хранить несколько разных копий одного и того же кадра, я, выбрав одну из этих предустановок, режу НЕПОСРЕДСТВЕННО перед печатью, затем печатаю из редактора и НЕ СОХРАНЯЮ результат обрезки, а храню ТОЛЬКО оригинальный кадр. Таким образом, экономится место на диске!

А вот «ноготки», размером 100*75 или 75*100 я делаю пакетным методом, как описано выше. Причём в ACDSee чрезвычайно удобно сделано – выбираешь другую папку для уменьшенных картинок, а оригиналы остаются, целёхоньки и на своих местах.

* * *

Для хорошего и быстрого отображения и восприятия нашей конструкции желательно всё же эти «маленькие» и «средненькие» оптимизировать по «весу». Лучшего средства, чем Adobe ImageReady (из комплекта Photoshop), пока что не придумано! Так что я, посмотрев на их размеры, большинство ещё прогоняю через ImageReady. Загружаю в программу. Можно, кстати, сразу все. И опять же - ПРЯМО из ACDSee – правее кнопки «Edit image» на панели инструментов программы нажмите кнопочку с маленькой стрелочкой вниз. Затем дайте команду «Configure Editors» и в появившемся окне после нажатия кнопки «Add» (Добавить) выберите исполняемый файл того же Photoshop-а и/или ImageReady. Ссылки на эти редакторы добавятся в список «Edit image». Затем можно будет мгновенно загружать просматриваемую картинку в нужный редактор.

Загрузка файлов во внешний редактор из ACDSee - правее кнопки «Edit image» на панели инструментов нажмите кнопочку с маленькой стрелочкой вниз. Затем дайте команду «Configure Editors» и в появившемся окне после нажатия кнопки «Add» (Добавить) выберите исполняемый файл того же Photoshop-а и/или ImageReady.

А, загрузив её в ImageReady, я нажимаю кнопочку «4-up» и из представленных вариантов выбираю ту копию, которая при минимальном размере файла всё же сохранила максимум качества. Там даже указано, сколько секунд будет грузиться файл определенного размера! А далее «File – Save Optimized» или клавиатурная комбинация CTRL+ALT+S.

Оптимизация файлов в ImageReady - нажмите кнопочку «4-up» (4 варианта) и из представленных выберите ту копию, которая при минимальном размере файла всё же сохранила максимум качества. Под каждой копией указано, сколько секунд будет грузиться файл определенного размера.

Таким образом удаётся добиться для «ноготков» размера в 2-3 КВ, а для «мониторчиков» – 8-13 КВ, что уже приемлемо и для Dial-Up.

Есть, конечно, ещё одно средство (так и хочется сказать «обмана покупателя»!) – с помощью JavaScript можно загружать все эти служебные картинки предварительно в буфер браузера, при первой загрузке страницы. Тогда они будут при наведении мыши просто выскакивать! Но зато первая загрузка страницы будет довольно долгой. Этим приёмом часто пользуются для предварительной загрузки сменяющихся изображений для кнопок навигации. Но этим же приёмом в последнее время часто злоупотребляют всякие профессиональные (в смысле – работающие за деньги) вэб-дизайнеры для того, чтобы просто заставить посетителя смотреть их довольно продвинутую в техническом смысле (часто в формате Flash), но одновременно с тем довольно банальную и всё же рекламу! Просто спаммеры какие-то от вэб-дизайна!

* * *

Вот как это работает:

При наведении мыши на «ноготок», средняя по размеру картинка почти мгновенно грузится в «мониторчик»

* * *

Ещё осталось добавить несколько замечаний о том, как открывать новое окно для показа «полной» фотографии. Как я уже упоминал, при стандартном размещении ссылки на фотографию в виде «ноготка» (файл foto-small_01.jpg )...

...большая картинка (файл foto_01.jpg ) загрузится в ту же страницу, чем вынудит посетителя после просмотра нажимать на кнопку НАЗАД в панели браузера. Если переписать тег ссылки с добавлением атрибута target ( <a target=”_blank” href=”..”> ), то большая картинка откроется в новом окне, что само по себе лучше, но тоже неказисто как-то. Это новое окно полностью перекроет первоначальное окно навигации, а картинка в нём разместится в левом верхнем углу. А справа и ниже будут некрасивые и неодинаковые белые поля. (См. скриншот на стр.1)

А вот и выход. Надо добавить в тег ссылки ещё одну функцию JavaScript, которая откроет окно заданного размера и разместит его чуть в стороне от основного окна. Да ещё и без строки меню, без панели кнопок и без строки состояния, которые в данном случае не нужны!

onclick="window.open(this.href,this.target,'width=620,height=470,'+ 'location=no,toolbar=no,menubar=no,status=no');return false;"

Обратите внимание на эти размеры нового окна! Они ГОРАЗДО МЕНЬШЕ самой фотографии. Откуда взялись эти цифры? Как всегда, они определены «методом научного тыка» с использованием некоторых грустных воспоминаний из прошлого. Ведь с одной стороны хочется, чтобы они были побольше! С другой стороны, опять же хочется (и всеми опытными дизайнерами настоятельно рекомендуется) позаботиться о тех посетителях, у кого ещё монитор с размером экрана 15” и, следовательно, разрешением 800*600. То есть, картинка шириной более 600 точек полностью убьёт все наши изыскания, изложенные выше! А к 600 в ширину и к 450 в высоту добавлено по 20 для того, чтобы у картинки в новом окне были более-менее ровные поля. Всё-таки популярный браузер IE ставит картинку не в самый левый верхний угол!

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

При клике на «ноготке» открывется новое окно небольшого размера смещённое влево-вверх. И в нём начинает грузится большая картинка.

Ведь что происходит – после клика по «ноготку» открывается новое окно с размерами 620*470, и пользователь видит, как начинает грузиться большая фотография внутри этого окна. Вот она заполнила всё окно. А как её посмотреть – ведь в данном случае полосы прокрутки нет! Первый испуг прошёл, когда после ПОЛНОЙ загрузки картинка автоматически уменьшилась до размеров этого нового окна и появилась вся. Это сработало встроенное средство автоматической подгонки картинки под размер окна. Его надо включить (если выключено) в «СВОЙСТВАХ ОБОЗРЕВАТЕЛЯ» на вкладке «ДОПОЛНИТЕЛЬНО».

После ПОЛНОЙ загрузки картинка автоматически уменьшилась до размеров этого нового окна и появилась вся. Это сработало встроенное средство автоматической подгонки картинки под размер окна.

Но тут, щёлкнув по ней «правой крысой» и выбрав команду СВОЙСТВА, я опять испугался. В свойствах был указан размер где-то 600*450, т.е. гораздо меньше оригинала. Зачем же париться, скачивать картинку 1200*900 со всеми её килобайтами, чтобы в результате сохранить вчетверо меньшую?

Подумав так, я машинально щёлкнул опять «правой крысой» по этой уменьшенной фотке и дал команду «СОХРАНИТЬ РИСУНОК КАК». Какова же была моя радость (и довольно редкая благодарность фирме Microsoft за её немного недоделанный IE), когда выяснилось, что сохранённая картинка имеет всё же оригинальный размер 1200*900! А отображается в окне, следовательно, некая временная уменьшенная копия. Значит, они всё-таки продумали эту проблему.

А вот и код страницы, точнее, секция <body>...</body> . Блоки кода с описанием кадров со 2 по 9 пропущены, т.к. они аналогичны 1-ому и 10-ому.

Ещё обратите внимание на то, что в тегах <img> для размещения рисунков присутствуют в общем-то необязательные атрибуты width и height . При правильном указании их значений загрузка страницы значительно ускоряется! Это происходит потому, что браузеру в самом начале загрузки страницы сообщается, какое место на странице займёт картинка. Он делает необходимые отступы и сразу начинает грузить другие элементы, например, текст.

А вот и ссылка на описанный выше живой работающий пример: http://bard-aki.narod.ru/foto/060127-traditsya/060127-traditsya.html

* * *

Внимательный читатель заметил, что в моём рабочем примере «фотоплёнка» отображается внутри контейнера <iframe>...</iframe> , т.е. фактически находится на другой странице. Это, конечно, несколько усложняет саму конструкцию, и, вероятно, не очень-то благоприятно сказывается на времени загрузки страницы. Но придумано это было исключительно для того, чтобы обеспечить возможность просмотра для посетителей с маленькими мониторами. В предыдущих рассуждениях мы говорили об ограничениях, связанных с шириной экрана, а у него ведь есть ещё и высота!

Представьте себе, как бедный посетитель страницы пытается навести курсор на 10-ый «ноготок» и при этом увидеть его увеличенную копию в «мониторчике», который уже выехал за верхнюю границу экрана! Использование контейнера <iframe>...</iframe> , имеющего СВОЮ полосу прокрутки, позволяет довольно изящно решить эту проблему. Полный кайф для ленивых – просто крутишь колесико, а курсор автоматически попадает на другой «ноготок»!

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

Перепишем определения стилей:

#monitor {
  position: absolute;
  left: 5px;
  top: 150px;
  width: 320px;
  height: 240px;
  margin: 5px;
  background: #ffd08a;
  border: groove 5px #ad4531;}

.fotoplenkatop {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 550px;
  height: 130px;
  padding: 0px;
  background: url(fotoplenka-horiz.gif) repeat-x left top; }

.fotoplenkabott {
  position: absolute;
  top: 400px;
  left: 5px;
  width: 550px;
  height: 130px;
  padding: 0px;
  background: url(fotoplenka-horiz.gif) repeat-x left top; }

Как видите, простой корректировкой правил позиционирования в CSS, мы мгновенно меняем расположение блоков на странице. Вот как будет выглядеть структура новой страницы:

Желаю успеха героическим ваятелям вэб-страниц!

Игорь Акимов

г. Санкт-Петербург, март 2006 года

(Опубликовано в журнале «UPgrade» #14(259) за апрель 2006 г.)

версия для печати