|
С определенной регулярностью специалисты веб-студии "Жанр" сталкиваются задачами модернизации сайтов, в которых главной целью является не существенное преображение Интернет-ресурса, а значительно больший репутационный эффект просмотра определенных разделов сайта. Имиджевые ожидания Заказчика в большинстве случаев относятся к стартовой странице сайта, а также элементам визуализации оргструктуры или реестра TOP-менеджеров. В качестве показательного примера можно привести проект модернизации сайта ГК "Энергосервис".
Модернизация сайта и компоненты визуализации лицевой страницы
Основной визуальный акцент, определяющий уровень солидности компании, щадает именно стартовая страница сайта. Поэтому в ее художественном оформлении наиболее смело и ярко применяются графические текстуры и яркие информационные блоки. В качестве основного информационного блока, как правило, выступает приветственный текст или раздел отраслевых новостей, новостей и событий компании. В качестве элемента лицевого визуала на стартовой странице сайта ЗАО "Энергосервис" было предложено использовать скриптовой компонент, в состав которого входят информационные блоки, каждый из которых анонсирует деятельность определенной компании.
Деятельность каждой компании, входящей в состав группы компаний "Энергосервис" имеет свою специфику, которая презентуется сразу на стартовой странице сайта. В случае явной заинтересованности посетитель сайта может перейти на страницу подробного описания компании, на которой информация раскрыта в детализированном виде. Переход на материал осуществляется путем активации ссылки "Подробнее", размещенной в левом нижнем углу анонсирующего блока.
Область правой колонки представляет собой группу интерактивных элементов, соответствующих наименованиям компаний. Модернизация стартовой страницы сайта "Энергосервис" определило необходимость использования скрытых информационных блоков, содержимое которых появляется в случае наведения курсора мыши на наименование интересующего юридического лица. Информационные блоки состоят из фрагментов: "репутационная графика", "исторический блок", "сведения о руководстве компании", "блок продукции или услуг". Синхронный показ фрагментов выполняется средствами сценария JavaScript и создает ощущение медийного анонса.
Скриптовая реализация эффектов стартовой страницы
До технической реализации задуманного решения макет оформления был предварительно согласован с Заказчиком. Однако, содержимое скриптового блока стартовой страницы представляет собой набор выключенных по умолчанию (невидимых) элементов. Поэтому корректировка таких фрагментов в обычном режиме средствами CMS (системы управления контентом) является достаточно нетривиальной задачей, так как требует аккуратной модернизации HTML кода, содержащего технические конструкции языка верстки:
<div class="wrp">
<div class="substr">
<div class="angle"><!-- --></div>
</div>
<div class="cont">
<div class="angle">
<a href="" id="liLink">Подробнее</a>
</div>
<div class="butt"><!-- --></div>
<div class="dta">
<div class="litxt" id="curtxt">
тут будет текст<br /><?=uniqid('css')?>
</div>
</div>
</div>
<div class="tabs">
<ul id="tabs">
<li id="ln1">
<a href="/about/gkenergyservice/">ГК «ЭНЕРГОСЕРВИС»</a>
</li>
<li id="ln2">
<a href="/about/17/">НПФ «Современные технологии»</a>
</li>
....
<li id="ln6">
<a href="/about/21/">ТестСервис</a>
</li>
</ul>
</div>
</div>
<div class="li_info_div">
<div id="txt_ln1">
<div class="ihdr"><img src="/img/upload/copmany_1_energyservice.jpg" alt="ЗАО ЭНЕРГОСЕРВИС" /></div>
<div>
Предприятие ЗАО «ЭНЕРГОСЕРВИС» организовано 16 ноября 1998 года с целью оказания технических (сервисных) услуг по обслуживанию, капитальному ремонту и проектированию:
энергетического оборудования; теплотехнического оборудования; оборудования АСУ ТП и КИП и А.
</div>
<div class="iperson">
<table cellpadding="0" cellspacing="0" border="0" >
<tr valign="top">
<td>
<div class="photo" style="width:102;height:135;">
<div class="bottom"><!-- --></div>
<div class="left"><!-- --></div>
<div class="top"><!-- --></div>
<div class="right"><!-- --></div>
<div class="img"><img src="/img/upload/foto_strelcov_ek.jpeg" style="width:92;height:125;" /></div>
</div>
</td>
<td>
<div class="info">
<div><h1>Стрельцов Эдуард Константинович</h1></div>
<div><h1 class="add">Генеральный директор</h1></div><br />
<p>«Наша компания стремится быть лидером предоставления
услуг в энергетической отрасли и успешно удерживать
свои позиции!»</p>
<br><br><br>
</div>
</td>
</tr>
</table>
</div>
<div>
Структура предприятия на сегодняшний день состоит из пяти филиалов в г.ОСЕ, г.ЧЕРНУШКЕ, г.КУНГУРЕ, г.БЕРЕЗНИКАХ, г.ЧАЙКОВСКОМ. В Перми находится центральный аппарат управления и производственные подразделения.
</div>
</div>
<div id="txt_ln2 ... 6 ">
... по аналогии с первым предприятием...
</div>
</div>
Осталось лишь организовать выбор соответствующего элемента средствами функции на языке JavaScript:
<script language="javascript">
var currentLiTextId=false;
var firstLi=document.getElementById('tabs');
if (firstLi) {
var arrLi = firstLi.getElementsByTagName("li");
for(i=0;i<arrLi.length;i++)
firstLi.getElementsByTagName("li").item(i).onmouseover=function() {liover(this);}
liover(firstLi.getElementsByTagName("li").item(0));
}
</script>
Репутационная визуализация информационных страниц сайта
Внутренние страницы корпоративного сайта могут содержать не столько статический текст, графику, таблицы, а также рекламные и информационные области. Для отдельных страниц модернизированной версии сайта может быть реализован режим скриптовой визуализации, когда выбор (активация) определенного элемента страницы приводит к показу поясняющего блока в режиме слоевого наложения (popup).
Появление связанных информационных блоков предполагает возможность их визуального редактирования вне кода основной страницы, а также принудительное сопоставление элементов системе уникальной идентификации.
Скриптовая реализация связанности блоков
С учетом специфики решаемой задачи в проекте модернизации сайта компании "Энергосервис" в систему управления сайтом (CMS) были внесены изменения, определившие возможность визуальной автономной работы с реестром всплывающих информационных блоков:
Тем не менее, каждый блок является индивидуальным, характеризуется уникальным идентификатором и предполагает скриптовое обращение из основной страницы, содержащей блок статического описания персоны:
<DIV class=link id=htmlelN onmouseover=infoOver(this)>...Описание...</DIV>
В результате корректной реализации и отладки функционала достигается требуемый визуальный эффект просмотра опубликованных сведений.
Заказчик модернизации сайта: ЗАО "ЭНЕРГОСЕРВИС"
Адрес: 614025, Россия, г.Пермь, ул. .Героев Хасана, 50
телефон: (342) 240-99-58, 240-99-59
сайт: www.energyservice.ru
|
