Введение
Abode Flash — технология, которая позволяет внедрять вставку в HTML-страницу.
По своей сути это чужеродный элемент на странице и появился он вовсе не от хорошей жизни, а как альтернатива базовым возможностям HTML и JavaScript, которых на момент появления флеша не хватало, чтобы раскрыть весь творческий замысел создателей сайта.
С появлением последних браузеров ситуация изменилась и практически все возможности флеша могут быть реализованы в родной связке HTML-JavaScript.
Такой подход будет имеет множество плюсов:
Полная совместимость со всеми современными графическими браузерами
Использование связки HTML и JavaScript не влечет проблем с совместимостью с различными современными устройствами.
Использование технологии Flash требует установки дополнительного программного обеспечения, которое может не поддерживаться некоторыми устройствами (iPad, например). Следовательно, сайт, содержащий флеш-вставки не откроется на iPad, а если флеш отключен, то вместо сайта мы можем не увидеть вообще ничего. Вот, к примеру, сайт крупной дизайн-студии в ситуации, когда флеш-плеер недоступен:
Он просто ничего не отображает. В неприятную ситуацию попадают также те, кто делает вставки в виде флеша (например, флеш-логотип или флеш-меню):
Полная совместимость с поисковыми машинами
Использование текста и изображений во флеш-роликах никак не скажется на поисковой оптимизации и продвижении сайта, поскольку такой текст не попадет в поисковые системы.
Поисковая машина просто проиндексирует вместо нормального текста только заголовок страницы и возможно мета-теги с описанием и ключевыми словами, а основное содержание сайта с точки зрения поисковой системы может составлять всего пару строк со ссылкой на флеш-объект.
Использование HTML в связке с JavaScript лишено этой проблемы, поскольку текст успешно индексируется поисковыми системами целиком и сайт продвигается нормально.
Удобство в плане дальнейшей поддержки
Технически флеш-ролик представляет собой нечитаемый код, в котором практически невозможно ничего поменять:
HTML в связке с JavaScript может меняться и дорабатываться несколькими разработчиками и тут же запущен в работу.
Также среди плюсов отмечается лучшая производительность и идеологически верная инженерная конструкция, которая подразумевает отказ от использования чужеродных элементов или плагинов.
Перевод флеш-элементов сайта ЗАО «ПО „Одинцово“» на jQuery
Две недели назад за поддержкой в студию обратись компания-производитель дверей ЗАО «ПО „Одинцово“».
На одном из сайтов компании имелась флеш-ставка, которая требовала доработки и замены. По требуемому сценарию несколько изображений дверей, должны были появляться в случайном порядке, а замет выстраиваться в ряд. При наведении курсора мышки изображение двери увеличивалось:
На сайте уже существует флеш-вставка, которая делает тоже самое. Ее размер 8,3 килобайт. Убираем ее и пишем все на jQuery.
Для начала выводим картинки в том формате, с которым нам будет удобно работать. В итоге получаем удобный список:
<div class="door_image_item"> <a title=РОМА 01" href="http://dveri-casaporte.ru/catalog.php?id=1"> <img height="140px" src="ROMA/1-1-1.jpg"> </a> <p> 01 </p> </div> <div class="door_image_item"> <a title=РОМА 02" href="http://dveri-casaporte.ru/catalog.php?id=2"> <img height="140px" src="ROMA/2-1-1.jpg"> </a> <p> 02 </p> </div>
Накладываем на него соответствующий стиль, подключаем jQuery и пишем всего несколько строк кода:
/** * Функция, чтобы удобней было работать со случайными числами * */ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } $(document).ready (function () { // Минимальная ширина элемента-картинки min_width = 58; // Минимальная высота элемента-картинки min_height = 140 // Максимальная ширина элемента-картинки (при наведении курсора на элемент) max_width = 75; // Максимальная высота элемента-картинки (при наведении курсора на элемент) max_height = 180; // Продолжительность анимации наведения на дверь (одна-четвертая секунды) duration = 250; // Скрываем картинки $('#flash1 > div > div.door_image_item').hide (); $('#flash1 > div > div.door_image_item').each (function (e) { after_label = $(this).find ('a').attr ('title').split (' '); after_label = after_label[1]; $(this).find ('a').after('<p>' + after_label + '</p>'); // Показываем с эффектом выцветания, задаем разную продложительности $(this).fadeTo (getRandomInt(250, 700), 1); // Присваиваем разный лефт, а потом ставим на свои места $(this).css ({left: getRandomInt(-500, 500) + 'px'}); $(this).animate({ left: 0 + 'px' }, 700); }); // При наведении мышки на элемент анимировано увеличиваем $('#flash1 img').mouseover (function () { $(this).addClass ('active_door_item'); $(this).parent ('a').eq (0).parent ('div').eq (0).find ('p').animate ({fontSize: 12, width: max_width}, duration); $(this).parent ('a').eq (0).parent ('div').eq (0).animate ({top: (min_height - max_height)/2, left: (min_width - max_width)/2}, duration); $(this).animate({ width: max_width, height: max_height }, duration); }); // Возвращаем на место $('#flash1 img').mouseout (function () { $(this).removeClass ('active_door_item'); $(this).animate({ width: min_width, height: min_height, top: 0 }, duration, function() { // Animation complete. }); $(this).parent ('a').eq (0).parent ('div').eq (0).find ('p').animate ({fontSize: 9, width: min_width}, duration); $(this).parent ('a').eq (0).parent ('div').eq (0).animate ({top: 0, left: 0}, duration); }); });
Вот как это работает: http://dveri-casaporte.ru/catalog.php
Чего мы добились:
- Список дверей теперь успешно индексируется поисковыми системами.
- Заметно возросла производительность и скорость загрузки.
- Список может редактироваться через систему управления сайтом.
- Эффект легко может быть доработан и скорректирован.
- Отображается на любых современных устройствах и в любых современных графических браузерах.
© Буков Сергей, 26 января 2012
