Разделы  

  Исследования
Персоны
Пресс-релизы
Разное
Словарь
Ссылки
Статьи
Файлы
Форумы
Фоторепортажи

3D Графика
Adobe Photoshop
Brand marketing в интернете
CSS
Customers Relations Management
DHTML
Direct Marketing
E-commerce
Email-маркетинг
Flash
HTML
IT и авторское право
JavaScript
PHP
PR в интернете
Rapid development tools
Usability в интернет
XML
Агентирование продаж
Администрирование
Баннерные сети
Баннеры
Безопасность
Безопасность PHP
Брендинг
Верстка
Выбираем исполнителя
Графические пакеты
Графические форматы
Дизайн
Документооборот
Должностные инструкции
Заметки маркетолога
Звук в интернете
Интернет и классические медиа
Интернет как инструмент маркетинга
Интранет
Исследования
Исследования и интернет
Исследования регионального интернета
Компьютерные игры
Креатив
Листы рассылки
Маркетологу
Медиабайнг в интернете
Медиапланирование
Менеджеру
Менеджмент студии
Мультимедия технологии
Наружная реклама
Обзоры IT рынка
Оборудуем рабочее место
Оптимизация программирования для web
Основы интернета
Персонал
Платежные системы
Поисковые машины и каталоги
Правила русского языка
Прикладное ПО
Программирование
Программирование, основы
Проектирование сервера
Психология в маркетинге
Работаем над текстом на сервере
Разное
Разработчику
Региональный интернет
Реклама
Реклама в интернете
Сетевые протоколы
Создаем контент-проект
Сопровождение и поддержка
Статистика
Структурное программирование на PHP
Технические вопросы
Управление проектами
Участие в организациях
Хостинг
Шрифты

Все авторы


Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее обсуждаемые статьи
1Концепция создания контент-проекта.17
2Тонкая голубая линия10
3Предложения10
4Как разрабатывался слоган8
5Заголовок страницы7
6Animatek World Builder 2.0 (или AWB 2.0)6
7Немного о хостах6
8Зачем необходим сайт?6
9Правильные таблицы стилей5
10Снежинки на вашей странице4

 
 
Поиск по сайту:

Подписка на анонсы
Новости выходят раз в неделю по понедельникам.
Введите Ваш email

Режим



А в это время в других разделах: Last 10 person
Ящук Вера
Шанаев Григорий
Шуленин Михаил
Шиденко Кирилл
Шабшин Илья
Сорокина Елена
Семеновская Светлана
Сидорова Ирина
Серов Владимир
Слепнев Сергей

Last 10 topic
Явный отказ
Эффективность услуги
Эксперт по аттестации лаборатории
Цепочка поставки
Устранение несоответствия
Услуга
Усиленный контроль
Усеченный контроль
Уровень качества
Управление качеством

Полезная мудрость:










Создание сервера:



 

Оптимизация древнего Египта  

 


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

1. Постановка задачи


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

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

В какой-то степени, Салон на Красноармейской 12 к ним приближается. Скажем, они первыми в Москве приобрели вертикальный солярий.

Тем не менее, данный сайт не ставит основной целью привлечение клиентов. Его задача - престижная реклама. Это не кричащая ярмарочная вывеска, а величественная мемориальная доска. Кроме того, в создании предприятия участвуют зарубежные инвесторы, и сайт, прежде всего, призван продемонстрировать им, что Салон действует, и действует с должным размахом.

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

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

2. Материал


В качестве исходного материала заказчиком были предоставлены проспекты Wella, Sebastian и других, выполненные, несомненно, большими мастерами своего дела. Посмотреть эти фотографии вы можете по адресу http://v48.al.ru/barberphoto/

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

3. Образное и техническое решение


В качестве контрастного фона было решено использовать древнеегипетские барельефы (рельеф гробницы Херуфа в Фиввах 15 в. до н.э. и др.).

Такое решение опирается на образ древнего Египта, как источника тайных секретов женской привлекательности (Нефертити, Клеопатра), а также на возрождение моды на древний Египет ("Звездные Врата", "Мумия", "Пятый элемент").

Камни фараонов выступают обрамлением тех решений, которые Салон Красоты предлагает клиентам.

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

После загрузки плита медленно уходит вверх, открывая одну из фотографий с открыток Sebastian - лицо девушки, частично заключенное в полупрозрачный цилиндр (ассоциации - Аэлита, Нефертити, "Звездные Врата", "Пятый элемент").

Технически это решено через движущиеся слои, средствами, которые предлагает Dreamweaver 4.

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

У заказчика решение заглавной страницы вызвало 100% одобрение. Проблема, однако, заключалась в том, что даже после предварительной оптимизации файлы первой страницы занимали в общей сложности 94 К. По любым представлениям это размер недопустимый для того, чтобы вывешивать страницу в Сети. Предстояло уменьшить объем файлов примерно вдвое.

4. Оптимизация


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

Изображения обрабатывались в программе Adobe Photoshop 5.5, основным инструментом оптимизации служил Ulead Smart Saver pro.

4.1. Фон

В качестве фона использовалось изображение поверхности каменного блока.

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

Объем файла фона уменьшился с 12,5 К до 0,7 К.

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

4.2. Боковые панели

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

4.3. Плита

Плита, закрывающая вход, была выполнена в виде единого изображения 530х430 пиксел, так что даже при сильном сжатии картинки ее размер составлял 16,5 К. Однако, этот элемент находится на экране весьма непродолжительное время, после этого сразу приходит в движение и исчезает. Рассмотреть его практически невозможно.

Поэтому при окончательной оптимизации единое изображение было заменено "паркетом" на основе плитки размером 157х168. Ее размер составил 3,2 К.

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

4.4. Девушка в цилиндре

Это изображение сделано настолько мастерски, настолько прекрасно и выразительно само по себе, что всякое прикосновение к нему оптимизатором казалось кощунством.

Однако, преодолев психологический барьер, мы обнаружили сразу два источника резервных объемов:

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

б) После ряда экспериментов с USS Pro оказалось, что изображение можно сильно зажать в формате JPG без ущерба для общего впечатления. Это, видимо, обусловлено тем, что оно состоит из плавных и несколько размытых форм. То есть, для сжатия в формате JPG вариант почти идеальный, ведь JPG, фактически, преобразует картинку в набор растяжек.


5. Результат


В результате перечисленных действий суммарный размер файлов первой страницы удалось уменьшить с 93,66 К до 52,64 К.

Исходный вариант вы можете посмотреть по адресу v48.al.ru/barber, окончательный результат - по адресу barber.ru.

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

Если что-то в этом изложении неясно - с удовольствием отвечу на вопросы.

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

Можете воспользоваться формой внизу.




2001-11-24 18:06:26


А может обсудим статью в форуме? Там собралась отличная компания
 




© 2001 авторский проект Алексея Волкова :: О проекте :: Перепечатка материалов приветствуется при ссылке на www.marketer.ru