Drupal Ajax Свої шрифти Flash PNG кросбраузерний сайт
Нещодавно, переді мною було поставлено завдання розробити сайт на Drupal з використанням вагомого Flash, фірмових шрифтів та PNG-графіки так, щоб все це однаково відображалося в офісних IE6 та інших популярніших браузерах. З усіма технологіями, я працював давно, але й припустити не міг, що все разом виявиться одним великим головним болем. Але мільйон різних приватних рішень таки привів мене до спільного рішення цього довгого рівняння. Про що й збираюся розповісти у цій статті.
Каталог продукції на Drupal з flash-журналом як «родзинка» та заміна стандартних шрифтів у меню та заголовках.
Зазвичай, при розробці дизайн-макета майбутнього сайту на Drupal для скорочення часу розробки, я використав тему Framework, що перелопачувала під себе. І цього разу, вчинив аналогічно попереднім. Загальну структуру було розроблено, потрібно було прикрутити до неї flash.
Перший глухий кут. Flash у темі Drupal
Так як майбутній сайт замовника був розташований на моєму хостингу без прав доступу до вихідного коду, але з наданням прав Адміністратора Drupal, потрібно було заборонити зміну flash-елемента, що вставляється. Від звичного swftools довелося відмовитись. Після довгих пошуків рішення (оскільки звична вставка flash в HTML, у темі Drupal не дала результатів), flash-об'єкт був вставлений за допомогою наступного коду:
- Код, звичайно, старий як Світ і, можливо, не правильно побудований, але все запрацювало! А це найголовніше. Але оскільки вставлений елемент займав досить багато місця щодо основного вмісту сторінки і не планував змінюватися, я припустив, що користувачу, після одноразового ознайомлення з цим flash-роликом, не захочеться бачити його надалі.Щоб не відволікати відвідувача, потрібно було дати можливість «заховати» елемент, але при цьому дати можливість його знову подивитися. В ідеалі без перезавантаження сторінки. Рішення прийшло швидко. Застосування простого JQueery та нескладного додаткового JS-файлу у темі:
- Встановлюємо в Drupal модулі jQuery Update та jQuery UI
- У темі Drupal дописуємо необхідні CSS (для блоків, які хочемо сховати чи показати)
- Додаємо в тему JS-файл, що ховає/показує ці елементи
- Створюємо кнопочку, при натисканні на яку буде виконуватися та сама дія
Другий глухий кут. Ajax та Drupal
Третій глухий кут. 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. І він виконав свою роботу гідно.
Якщо є питання, можу детально розповісти про кожного з «глухих кутів» у які мене заганяла та чи інша технологія, при створенні цього проекту і надати посилання на результат.
А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»