Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2001   →
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Автор

Людмила Лунькова

Статистика

5.073 подписчиков
0 за неделю

• Выпуски
• Статистика

←   Все выпуски   →

ИМ(с)Б Интернет для малого (и среднего) бизнеса Оптимизация древнего Египта

Служба Рассылок Subscribe.Ru проекта Citycat.Ru

---

---

рассылка для веб-мастеров и их клиентов от студии 'dr.Vo'

ИМ(с)Б Интернет для малого (и среднего) бизнеса   Оптимизация древнего Египта О борьбе с внезапно возросшим объемом графических файлов при создании сайта Салона Красоты BARBER.RU         Уже по заголовку можно заключить, что этот рассказ будет интересен, в основном, создателям сайтов. Тем не менее, будет что почерпнуть и нашим дорогим заказчикам - нынешним и потенциальным. Чтобы сберечь их бесценное время, мы начнем именно с этих моментов, а лишь затем перейдем к техническим деталям.      Стрижка, бришка и завишка... Из анекдота         Адрес [barber.ru]. Вариант до оптимизации [v48.al.ru/barber]   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.         Неожиданным побочным результатом оптимизации оказалось то, что движение плиты стало более плавным. Особенно это заметно на маломощных компьютерах.           Если что-то в этом изложении неясно - с удовольствием отвечу на вопросы.           Если Вы владеете более совершенными решениями и технологиями - не откажите в любезности поделиться, мы и наши читатели будут весьма признательны.           Можете воспользоваться формой внизу. Ваш В.Ефимов Р а с с ы л к у   в е д е т   и н т е р н е т - с т у д и я   'dr.Vo'  Обратиться в студию dr.Vo   Предложить материал в рассылку  Заказать продвижение сайта  Заказать сайт    Проконсультироваться Ваши комментарии: Ваш e-mail: Тел., пейджер:   dr.Vo  контакты  работы  цены  статьи  люди  стартовая  drvo@drvo.ru  наш хостер- majordomo.ru Подписаться на рассылки студии dr.Vo Консультарий     Бесплатные консультации психологов,     медиков, ветеринаров и др. Консультарий - Салон Красоты     Консультации по косметологии и БАД ИМ(с)Б     Интернет для малого (и среднего) бизнеса Застройщик     Для строителей - профи и любителей Введите Ваш e-mail:

рассылка для веб-мастеров и их клиентов от студии 'dr.Vo'

---

---

http://subscribe.ru/ E-mail: ask@subscribe.ru

Отписаться Убрать рекламу

Рейтингуется SpyLog

---

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти"> <!--</a>--> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div> <!-- <div class="gray_bg register_shadow"></div> --> </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br />  <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}