Drupal + Ajax + Свои шрифты + Flash + PNG = кроссбраузерный сайт

Недавно, передо мной была поставлена задача разработать сайт на Drupal с использованием весомого Flash, фирменных шрифтов и PNG-графики так, чтобы всё это одинаково отображалось в офисных IE6 и других более популярных браузерах. Со всеми технологиями, я работал давно, но и предположить не мог, что всё вместе окажется одной большой головной болью. Но миллион разных частных решений таки привёл меня к общему решению этого длинного уравнения. О чем и собираюсь рассказать в сей статье.

Задача

Каталог продукции на Drupal с flash-журналом в качестве «изюминки» и заменой стандартных шрифтов в меню и заголовках.

Поехали!

Обычно, при разработке дизайн-макета будущего сайта на Drupal для сокращения времени разработки, я использовал перелопаченную под себя тему Framework. И в этот раз, поступил аналогично предыдущим. Общая структура была разработана, нужно было прикрутить к ней flash.

Первый тупик. Flash в теме Drupal

Так как будущий сайт заказчика был расположен на моём хостинге без прав доступа к исходному коду, но с предоставлением прав Администратора Drupal, нужно было запретить изменение вставляемого flash-элемента. От привычного swftools пришлось отказаться.
После долгих поисков решения (так как привычная вставка flash в HTML, в теме Drupal не дала результатов), flash-объект был вставлен с помощью следующего кода:

 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="880" height="440" align="middle" class="header2">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="/FLASH.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFF" />
<param name="SCALE" value="noborder" />
<param name="wmode" value="transparent" />
<embed src="/FLASH.swf"  width="880" height="440" align="middle" quality="high" bgcolor="#FFF" wmode="transparent" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noborder" /> 
</object>


— Код, конечно, стар как Мир и, возможно, не правильно построен, но всё заработало! А это главное. Но, так как вставленный элемент занимал достаточно много места относительно основного содержимого страницы и не планировал меняться, я предположил, что пользователю, после однократного ознакомления с данным flash-роликом, не захочется видеть его в дальнейшем. Чтобы не отвлекать посетителя, нужно было дать возможность «спрятать» элемент, но при этом, дать возможность вновь его посмотреть. В идеале, без перезагрузки страницы.
Решение пришло быстро. Применение простого JQueery и не сложного дополнительного JS-файла в теме:
  1. Устанавливаем в Drupal модули jQuery Update и jQuery UI
  2. В теме Drupal дописываем необходимые CSS (для блоков, которые мы хотим спрятать или показать)
  3. Добавляем в тему JS-файл, прячущий/показывающий эти элементы
  4. Создаём кнопочку, при нажатии на которую, будет выполняться то самое действие

На моё удивление, всё заработало и конфликтов не возникло. Но эффект не был, собственно говоря, достигнут. После перехода на другую страницу, всё повторялось с начала.

Второй тупик. Ajax и Drupal

После мучительных раздумий, взвешивания все «за» и «против», я всё же принял решение о применении ajax-подгрузки содержимого, чтобы прячущиеся блоки с flash не обновлялись вместе с остальным содержимым.
После некоторых поисков, в сети мной было обнаружено несколько решений. Выбрал первое и начал крутить его к создаваемому сайту. Так называемое «решение» — модули Page renderer + Asynchronous и соответствующая тема от того же производителя. Почему-то, сейчас они недоступны на drupal.org. Видимо, потому, что я был далеко не единственным, кто столкнулся с проблемами этого «решения». На первый взгляд, всё было здорово! Тему я прикрутил, модули установил, настроил. Всё заработало! И более того, заработало очень симпатично: при клике на ту или иную внутреннюю ссылку, появлялся легко настраиваемый по средствам CSS div, оповещающий о производимой загрузке. Я дорабатывал некоторые детали темы и уже когда всё было готово, принялся за наполнение сайта самой информацией (текст, фото и т.д.), но тут случилось самое печальное: отказались работать любые Wysiwyg-редакторы и некоторые, тоже важные для меня, модули. Их как-будто не было. Я, проведя за лэптопом несколько бессонных ночей, выкурив больше блока сигарет и выпив не один десяток литров кофе в поисках и устранении конфликта, был вынужден отказаться от всей этой «красоты» и приступить к поиску иного решения. И оно было найдено:
  1. Устанавливаем (в добавок к уже установленным jQuery Update и jQuery UI) модуль AjaxIT, не забывая обновить/установить необходимые библиотеки
  2. Настраиваем его соответственно темы сайта (там всё очень просто)

И «О, Боже!» — работает! Правда, красивый загрузочный элемент не появляется. Но это, думаю, тем кому важно, не сложно докрутить самостоятельно. Когда всё заработало, мне, казалось, остаётся только плясать от радости, но не тут-то было. Я забыл о замене стандартных шрифтов своими.

Третий тупик. Drupal + AjaxIT + Cufon = конфликт

Я привык пользоваться модулем Cufon и преобразователем шрифтов в JS для него. Но в сей раз, выполнив все уже привычные действия, не получил никакого результата. Сначала, думал, что проблема в шрифте, но применив другой, уже протестированный, снова ничего не получил. Тогда в моей голове всплыло свойство @font-face.

Четвертый тупик. @font-face и Opera

Не долго копаясь в дебрях всемирной паутины, я нашел font-face генератор, работа с которым показалась мне крайне простой, что и насторожило. Но настороженность простотой, казалось, не нашла оправдание после теста сайта на кроссбраузерность в Adobe BrowserLab — даже всемирно «любимый» ослик работал как часы. Но, позвонив подруге с радостным известием и желанием похвастаться проделанной работой с просьбой протестировать сайт и скинуть мне скрин, был ошарашен, получив от неё письмо — в Опере, которой она пользовалась (10.50), не отображались шрифты, которые я так старательно прикручивал.
После некоторых раздумий и попыток найти подходящее решение, применив код:

@font-face {
font-family: 'Шрифт';
src: url('Шрифт_normal-webfont.eot');
src: local('Шрифт'), local('Шрифт-Normal'), url('Шрифт_normal-webfont.woff') format('woff'), url('Шрифт_normal-webfont.ttf') format('truetype'), url('Шрифт_normal-webfont.svg#Шрифт') format('svg');
}

— пришел к желаемому результату. Все, интересующие меня браузеры (в том числе и Opera, которой более тридцати процентов Российских пользователей моих проектов отдают предпочтение) отображали шрифты и весь другой контент так, как мне того хотелось.
Оставалось только отобразить PNG в IE6, для чего я воспользовался модулем для Drupal — PNG behave. И он выполнил свою работу достойно.

Если есть вопросы, могу детально рассказать о каждом из «тупиков» в которые меня загоняла та или иная технология, при создании сего проекта и предоставить ссылку на результат.
Поделиться публикацией

Похожие публикации

Комментарии 52

    0
    Интересно посмотреть на результат
      0
      Ладно, уговорили. Обновлено.
        0
        Не долго сопротивлялся :)
      0
      После неоднократной просьбы предоставить результат

      это тот единственный комментарий?

      Плохо, что не сохраняется состояние флеша — свернуто/развернуто
        0
        Нет, еще в личку писали.
        Касательно флеша, согласен, но пока, это не в фокусе моего внимания. Кстати, он еще в FF (странно, что только в нем) мигает при нажатии «свернуть/развернуть». Как решить — увы, не знаю.
        0
        А может ну его, flash-то ;)
        html5 ;)?
          0
          а может ты еще и осла заставишь работать с HTML5? ;) я бы рад, но увы :) сам терпеть не могу flash
            +1
            8-й прекрасно поддерживает (ну с хаками так точно), а вы еще поддерживаете IE6 (7)?
            Я понимаю, что еще пользуются, но по статистике это в основном китайцы и индийцы.
            У нас тоже пользуются, но поверьте те кто пользуюются IE6 — или самоубийцы или… да и flash у них скорее всего тоже не установлен.
            Вот посмотрел по самому моему посещаемому клиенту, за год, статистику IE6 — 0.046% :)

            И из-за этого вы волнуетесь ;)?
              0
              Я лишь выполняю пожелания заказчика. Смотрите поставленную передо мной задачу — "… чтобы всё это одинаково отображалось в офисных IE6..." — это ответ на ваш вопрос.
                0
                Да уж :) Тяжело вам с заказчиком, я уже привык, что сам давно рассказываю как делать надо.
                  0
                  :)))) А вы ему скажите, что на iOS (iPad iPhone) его сайт виден не будет в полной мере :)))

                  Так кто более потенциальный клиент iOS или IE6, как заказчик дверей

                    0
                    Под iOS и другие мобильные платформы предусмотрена отдельная версия сайта :)
                      0
                      А если серьёзно, завязывайте с flash на сайте, как игры еще можно.
                      Кстати а вы видели как на FF смотриться ваш сайт с дополнением Adblock ;)?
                        0
                        нет, но предполагаю, что без flash. Ничего страшного, эта ситуация, была мной предположена и озвучена заказчику, когда я настаивал на отказе от flash. А может Вы можете подсказать мне такого типа «листалку» на HTML5? (кроме «3D»-ajax реализации, которую не поддерживает FF)
          +6
          @font-face {
          font-family: 'Шрифт';
          src: url('Шрифт_normal-webfont.eot');
          src: local('Шрифт'), local('Шрифт-Normal'),
               url('Шрифт_normal-webfont.woff') format('woff'),
               url('Шрифт_normal-webfont.ttf') format('truetype'),
               url('Шрифт_normal-webfont.svg#Шрифт') format('svg');
          }

          Этот код вызывает желание ознакомить Вас с известным багом в браузерах Android 2.2 и Android 2.3: эти браузеры вообще не воспринимают указание «local('имя шрифта')» и игнорируют декларацию @font-face, его содержащую.

          Рекомендую вместо этого использовать «Новый пуленепробиваемый синтаксис @font-face», и тем невозбранно достигнуть желаемого.
            0
            Благодарю за ссылку. Обязательно приму к сведению в будущем. На, откровенно говоря, в аудитории моих проектов не было замечено ни одного пользователя андройда. Но, в любом случае, благодарен за замечание.
              +1
              Вот всё прекрасно работает и на Android тоже:

              @font-face {
              font-family: 'FuturaCondencedNormalRegular';
              src: url('futura_c-webfont.eot');
              font-weight: normal;
              font-style: normal;
              }

              @font-face {
              font-family: 'FuturaCondencedNormalRegular';
              src: url(//:) format('no404'), url('futura_c-webfont.woff') format('woff'), url('futura_c-webfont.ttf') format('truetype'), url('futura_c-webfont.svg#webfontu7AEUZlo') format('svg');
              font-weight: normal;
              font-style: normal;
              }

              +5
              Что касается Оперы, то вышла ужé версия 10.6, затем 11.0, затем 11.1, затем 11.5. Кажется, про поддержку 10.50 можно и забыть.
                0
                Какой там забыть? если 30% пользователей до сих пор не забыли о шестом ослике…
                  0
                  откуда у вас такая статистика???
                  www.liveinternet.ru/stat/ru/browsers.html?period=month;page=2
                    0
                    я говорю не об общей статистике, а о статистике моих проектов. Так как их аудитория, в основном, — офисные крысы, у которых нет прав на обновление ПО, либо недостаточно знаний для того, чтобы нажать кнопку «обновить». А если говорить об общей — всемирной статистике, так на оперу вообще не нужно обращать внимание. Это только россияне ей иногда отдают предпочтение.
                +2
                Прямые руки верстальщика = кроссбарузеный сайт :)
                  0
                  Это то конечно так, но не плохо было бы помимо моих рук, выпрямить руки разработчиков самого друпала, оперы, осла и сторонних модулей.
                    0
                    привет html5boilerplate.com
                  +2
                  Блин, какой же этот ваш Друпал убогий. Простейшие действия там не возможны без кучи лишних телодвижений.
                  Говорю это не голословно: по работе мне приходится его использовать, вникать в то, как он устроен внутри. Дурацкие соглашения по именованию, уродские «хуки» и куча прочих неприятностей.
                  Уж про то, как он жрет ресурсы вообще лучше не говорить.
                  Никому не советую связываться с этой ЦМСкой.
                    +3
                    Гм. А что посоветуете? На мой взгляд проблемы с Друпалом начинаются как раз тогда, когда простейший действий, идущих по мейнстримовым рельсам уже недостаточно, а хочется чего-то большего. Тут-то и начинается жесткий хакинг core, cck, views и т.п., ковырять внутри которые — это адское занятие. Но альтернативой я вижу только полный отказ от CMS в пользу фреймворков. Но ведь получается, что порог вхождения для более-менее серьезной работы — и так, и там высокий. Но на том же Друпале можно за день-два сделать нечто базовое, но (sic!) работающее, что показать заказчику (и от чего заказчик будет в восторге — остальные-то подрядчики называют сроки в -дцать раз большие), а потом уже вдумчиво, неторопливо и в удовольствие хачить core, views, cck, попутно коммитя патчи… Собственно, я лично только из-за этого на Друпале остановился. Если тезисно, то — низкий уровень «базового» вхождения сочетается с гибкостью и сопутствующим геморроем в более «серьезных» задачах. Но ежели грамотно разработку построить, то можно сделать как я сказал выше — базовый функционал по быстрому, а потом — неторопливое допиливание. И все счастливы.
                      –2
                      А теперь представьте, как после вас кто-то буде расковыривать что вы там «понадопиливали». Фреймворки практически лишены этой проблемы. Хотя, да — порог вхождения куда как выше.
                        +3
                        Гм. А чего там ковыряться-то? Свои модули — отдельно. Если есть не принятые в mainstream патчи в сторонних модулях — аккуратно лежат в отдельном каталоге. Их и бывает-то обычно буквально 2-3… Не вижу особой проблемы.

                        ps: Да и вообще, ИМХО, свои проекты разработчик должен обслуживать сам. Чтобы денежный поток был фиксированный + поступления с новых проектов. Иначе неинтересно и разработчик становится суть фрилансером. :-) Но это тема для отдельного обсуждения.
                        +1
                        У автора статьи проблемы возникли не с Друпалом, а с совместимостью скриптов и оформлением.
                        Но убог конечно Друпал, да.
                          –1
                          Посчитайте сколько модулей и тем автору статьи надо было поставить на Друпал, чтобы добиться результата.
                            0
                            Всё это — оформление и совместимость скриптов.

                            То что у скриптов бывают проблемы совместимости между собой — это не проблема Друпала.
                            То что возникла проблема совместимости посторонних скриптов со скриптами из поставки Друпала — это не проблема Друпала, это проблема разработчика выбравшего скользкий путь.
                              0
                              А к чему такое количество модулей? Всё можно прикрутить ручками, в тему оформления.
                          0
                          Когда-то сам искал бесплатную CMS похожую по функционалу на DLE, пары взглядов на него мне хватило что бы снести его с денвера нафиг и остановить свой выбор на джумле
                            0
                            Академический вопрос. Просто ли в джумле вывести блок с произвольным и редактируемым через админку текстом в подвал? Просто ли его оттуда убрать?
                              0
                              Как 2 пальца. В стандартной поставке есть модуль «пользовательский хтмл», который можно хоть в подвал хоть на чердак.
                            0
                            А ещё на работе думать заставляют и работать даже.
                            О ужас!
                              –2
                              Не надо ерничать. Думать это одно, а использовать дурацкий инструмент в своей работе (и думать «под него») это совсем другое.
                                +1
                                Плотно работаю с друпалом более двух лет и не считаю его дурацким инструментам. В умелых руках всё работает
                                  0
                                  Обычный инструмент не без недостатков, с массой достоинств. Масса вещей из коробки, про некоторые даже удивительно, что есть CMS которые не умеют этого, настолько это естественно и правильно, например, объединение файлов скриптов и стилей непосредственно движком.

                                  Думать надо под любой инструмент, без исключения.
                                    +2
                                    Скорее всего, вы не умеете правильно готовить ;) Или порог для вас не тот.
                                    Сложно заставить себя думать логично в рамках системы, гораздо проще изобретать новый велик каждый раз.
                                    Хотя, если бюджет и время не ограничено — можно заниматься этим каждый раз с 0.

                                    Автору:
                                    Со шрифтами посмотрите: fontyourface, google_webfont_loader_api, typeface, dfont, signwriter и кучу Related projects.
                                    Не понятно зачем флеш нужено было раскорячивать на сайте… «Книжных» скриптов полно (например www.netzgesta.de/booklet/sunrise.html). Остальное всё в jq…

                                +2
                                хммм… интересно, загрузится сайт вообще когда-нибудь…
                                  0
                                  дуратский хостинг Джино не выдержал вашего скромного наплыва.
                                    0
                                    it-patrol.ru вам в помощь, заточен под Drupal.
                                      0
                                      и да если это 6ка, советовал бы вам сразу boost настроить
                                        0
                                        большое спасибо, именно этим сейчас и займусь. Очень благодарен.
                                          0
                                          так, подожди, а что ты по boost подразумеваешь? модуль boost?
                                            0
                                            Да, именно он
                                    0
                                    background: url("/assets/PIC.png") no-repeat scroll 0 0 transparent;
                                    _background: transparent;
                                    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/PIC.png');
                                      0
                                      «Первый тупик» -> «Первый тупняк»

                                      какое отношение имеет то, что вы здесь написали, например то что перечислили в тегах, друг к другу?

                                      Несвежая Opera на разных машинах под одной и той же XP может работать или не работать с подгружаемыми шрифтами, если имя пользователя и соответственно каталог в системе содержит не латинские символы.
                                        –1
                                        Автор, а вы не пробовали, вместо того, чтобы наугад перебирать какие-то левые модули и плагины, попробовать разобраться, почему там что-то не работает, фаербагом/Web Inspector посмотреть, спецификации и особенности браузеров изучить, статьи в интернете почитать? Какая польза от вашей статьи, если все, что в ней описано — набор сторонних плагинов, которые, будучи костылями и соплями примотаны к Друпалу (убожество то еще, как-то с ним работал, до сих пор плеваться хочется, проще оказалось морду сайта самому написать с нуля, чем успешно воспользоваться возможностями Друпала), кое-как работают вместе?

                                        Ссылки на сайт не вижу, но судя, по количеству использованных плагинов — тормозить должно адски. А ИЕ6 — обычно от такого количества плагинов и бихейверов просто начинает тупить, хотя это довольно-таки быстрый браузер.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.