11 апреля 2006 года вышла в свет новая версия браузера от Microsoft, Internet Explorer (IE-7), содержащая код, который поддерживает корректную работу flash-анимации на страницах сайтов. Если раньше flash часто блокировался, то современная версия браузера обеспечивает flash-анимации нормальную работу. Метод, который применили разработчики Microsoft, позволил решить ряд серьезных проблем. Flash, по мнению многих, снижает видимость страниц сайта поисковыми системами. SEO-специалисты уделяют этому аспекту большое внимание. Достаточное количество популярных WYSIWYG инструментов (от англ. – “What You See Is What You Get” – “что видишь, то и получишь”) вырабатывают непригодный HTML-код для внедрения flash, к тому же большинство дизайнеров, работающих с flash-анимацией, к сожалению, не знают всех возможностей программирования и грамотной организации HTML-кода, едва ли знакомы с поисковой оптимизацией. В результате большинство страниц с flash работают некорректно.
Для дизайнера Flash – это способ представления большого количества информации в весьма ограниченных рамках, не нарушая при этом общую концепцию дизайна страницы сайта. К примеру, если вы продаете какую-либо технологию, то flash-анимация проиллюстрирует ее преимущества с помощью слайд-шоу или небольшого фильма.Работа с HTML и flash позволяет достигнуть следующих результатов: •экономия пространства за счет flash; •успешная поисковая оптимизация; •доступ людей с различными возможностями (настройками, браузерами) к информации; •грамотный код; •корректная работа браузера IE. Заметим, что добиться всех поставленных целей с сайтами, полностью созданными на flash, невозможно: организационной структуры сайта как бы нет – он состоит из одной страницы. Дабы избежать этого, рекомендуется создавать все-таки сайт на HTML с небольшими вставками flash.
В качестве одного из приемов программирования с оптимизацией flash под SEO можно использовать DIV с контентом, воспринимаемым поисковыми системами, а также JavaScript для того, чтобы определять, в каких случаях браузер может отображать flash. Когда браузер поддерживает работу flash-анимации, JavaScript может управлять объектами и изображениями на одной странице, чтобы в конечном итоге перемещать контент, заменяя его в анимационных flash-объектах. Известно, что роботы поисковых систем не индексируют JavaScript, но они индексируют контент, которым управляет JavaScript. В этом контенте можно размещать текст, ссылки, заголовки, картинки, то есть все то, что может быть проиндексировано на обычной HTML-странице. Однако нужно всегда помнить, что альтернативный контент, который предлагается на сайте посредством DIV, должен обязательно быть полезен пользователю. Если используется очевидный спам, к сайту могут быть применены санкции со стороны поисковиков. О представлении мультимедийного контента можно узнать на сайте Консорциума Всемирной Паутины (W3C), программы по организации доступа к Сети для людей с ограниченными возможностями (WAI).
Пример кода, который расположен ниже, показывает, как реализованы шапка сайта и его меню с помощью flash на сайте. Меню сайта функционирует должным образом с помощью компонента ActiveX, обновленного для новой версии IE. Ранее внутренние страницы сайта не были доступны для индексации, так как роботы не могли пройти по ним: они были полностью реализованы во flash. Для того чтобы разрешить сложившуюся проблему, был вставлен следующий HTML-код: <head> <script type="text/javascript" src="/jscript/flashobject.js"></script> </head> <body> <div> <h1>WirelessBuilders</h1> <p>What we do</p> <ul> <li>Site Survey </li> <li>802.11b </li> <li>802.11g </li> <li>systems integration </li> <li>network design </li> <li>project management </li> <li>training </li> <li>professional services (consulting)</li> </ul> <p><a title="Services" href="http://www.seonews.ru//services.shtml">Services</a> | <a title="About Us" href="/about.shtml">About Us</a> | <a title="Contact " href="/contact.shtml">Contact</a> | <a title="Partners" href="/partners.shtml">Partners</a></p> </div> <script type="text/javascript"> var fo = new FlashObject("/flash/newstyle.swf", "mymovie", "800", "105", "6", "#ffffff"); fo.write("flashcontent"); </script> </body> Этот шаг позволил добиться того, что сначала ссылки на внутренние страницы, а затем и сами страницы были проиндексированы роботами поисковых систем. Получить подробную информацию о данном методе и некоторых других решениях, связанных с flash и JavaScript, можно, перейдя по ссылке.
<head> <script type="text/javascript" src="/jscript/flashobject.js"></script> </head> <body> <div> <h1>WirelessBuilders</h1> <p>What we do</p> <ul> <li>Site Survey </li> <li>802.11b </li> <li>802.11g </li> <li>systems integration </li> <li>network design </li> <li>project management </li> <li>training </li> <li>professional services (consulting)</li> </ul> <p><a title="Services" href="http://www.seonews.ru//services.shtml">Services</a> | <a title="About Us" href="/about.shtml">About Us</a> | <a title="Contact " href="/contact.shtml">Contact</a> | <a title="Partners" href="/partners.shtml">Partners</a></p> </div> <script type="text/javascript"> var fo = new FlashObject("/flash/newstyle.swf", "mymovie", "800", "105", "6", "#ffffff"); fo.write("flashcontent"); </script> </body>
Второй пример показывает, как разместить очень большой фрагмент текста в ограниченном пространстве. Здесь, помимо DIV, использовались возможности CSS, позволившие оставить без изменения структуру страницы при смене текста, которую можно наблюдать даже в отключенных браузерах, JavaScript. <div> <div> <h2><a href="http://www.seonews.ru//products/index.html">Simics</a> isused to develop the embeddedsoftware that runs electronic devices such as:</h2> <li>Aerospace hardware</li> <li>Automobile control systems</li> <li>Telecommunications infrastructure</li> <li> High-end servers</li> </ul> <p><em>Hardware:</em> <strong>Satellite ControlSystem</strong></p> <p> <em>Challenge:</em> Unable to test software with satelliteson orbit. Howto verify new software?</p> <p> <em>Resolution:</em> Using Simics, the developerscan run softwarequality tests on the ground, to ensure that the software works correctlybefore it's installed.</p> <h2>Industry: Automotive</h2> <p><em>Hardware:</em> <strong>Electronic ControlUnit</strong></p> <p><em>Challenge:</em> Need to develop software now, butthe ECU won'tbe available for months</p> <p><em>Resolution:</em> Simics enables programmers todevelop and testthe software before the hardware is available, reducing time to market.</p> <h2><em>Industry:</em> Telecommunications</h2> <p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p> <p><em>Challenge: </em> You have twenty programmers. Eachneeds a completesystem for testing. They cost MILLIONS.</p> <p><em>Resolution:</em> Using Simics to create a modelof the target hardware,each programmer can have his or her own virtual device for software testingand debugging, without breaking your budget.</p> <h2>Industry: Internet</h2> <p><em>Hardware:</em> <strong>Network servers</strong></p> <p><em>Challenge:</em> Software bugs keep popping up.Some take weeks toreproduce and fix. You are running out of time.</p> <p><em>Resolution:</em> With Simics, programmers canrun the program forwardsand backwards to quickly identify, recreate and repair bugs.</p> </div> </div> <script type="text/javascript"> var fo = new FlashObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff"); fo.write("movieAlt"); </script>
<div> <div> <h2><a href="http://www.seonews.ru//products/index.html">Simics</a> isused to develop the embeddedsoftware that runs electronic devices such as:</h2> <li>Aerospace hardware</li> <li>Automobile control systems</li> <li>Telecommunications infrastructure</li> <li> High-end servers</li> </ul> <p><em>Hardware:</em> <strong>Satellite ControlSystem</strong></p> <p> <em>Challenge:</em> Unable to test software with satelliteson orbit. Howto verify new software?</p> <p> <em>Resolution:</em> Using Simics, the developerscan run softwarequality tests on the ground, to ensure that the software works correctlybefore it's installed.</p> <h2>Industry: Automotive</h2> <p><em>Hardware:</em> <strong>Electronic ControlUnit</strong></p> <p><em>Challenge:</em> Need to develop software now, butthe ECU won'tbe available for months</p> <p><em>Resolution:</em> Simics enables programmers todevelop and testthe software before the hardware is available, reducing time to market.</p> <h2><em>Industry:</em> Telecommunications</h2> <p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p> <p><em>Challenge: </em> You have twenty programmers. Eachneeds a completesystem for testing. They cost MILLIONS.</p> <p><em>Resolution:</em> Using Simics to create a modelof the target hardware,each programmer can have his or her own virtual device for software testingand debugging, without breaking your budget.</p> <h2>Industry: Internet</h2> <p><em>Hardware:</em> <strong>Network servers</strong></p> <p><em>Challenge:</em> Software bugs keep popping up.Some take weeks toreproduce and fix. You are running out of time.</p> <p><em>Resolution:</em> With Simics, programmers canrun the program forwardsand backwards to quickly identify, recreate and repair bugs.</p> </div> </div> <script type="text/javascript"> var fo = new FlashObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff"); fo.write("movieAlt"); </script>
The CSS Code
#movieAlt { /*Vertical scroll bar on alternative content*/ height: 287px; width: 497px; overflow: auto; } #movieAltInner { /*Use separate div because IE's faulty box model*/ padding: 10px 20px; } После использования этого метода сайты приобретали интересный дизайн и возможность ранжироваться поисковыми системами на самых высоких позициях. Джонатан Хокман Подготовил Сергей Стружков
#movieAlt { /*Vertical scroll bar on alternative content*/ height: 287px; width: 497px; overflow: auto; } #movieAltInner { /*Use separate div because IE's faulty box model*/ padding: 10px 20px; }
Автомобили
Интернет