| Jun. 11th, 2008 @ 10:42 pm любые шрифты в html-верстке |
|---|
Прежде чем приступить к анализу sIFR, давайте убедимся, что все знакомы с этой технологией и принципами ее работы. sIFR расшифровывается как scalable Inman Flash Replacement и является техникой презентации полностью настраиваемой типографики для web. Происходит это за счет замены текста в целевом элементе флеш-текстом, который рендерится в процессе загрузки страницы. Важно понимать, что флешем замещается не сам элемент, а текст внутри него, что позволяет оформлять и позиционировать элемент вполне обычным образом.
Некоторые факты о sIFR: аксиомы
* sIFR не требует изменения (X)HTML кода, все действия осуществляются через Javascript, Flash и CSS.
* Если у пользователя не установлен Flash или отключен Javascript, текст элемента будет оформлен посредством CSS.
* sIFR масштабируем, и в процессе рендеринга страницы будет изменен согласно установленному у пользователя размеру шрифта (при увеличении шрифта посредством Ctrl-Wheel изменений не происходит до перезагрузки страницы – прим. переводчика).
* sIFR совместим с программами, читающими информацию с экрана. Ни о каких ошибках или проблемах с ними информации не поступало.
* sIFR можно выделить при помощи мыши, хотя при выделении всего текста на странице выделение sIFR-элемента может быть визуально незаметным (однако текст все равно выделяется и успешно копируется – прим. переводчика).
* sIFR не оказывает никакого негативного влияния на SEO, так как не скрывает изменяемый текст от поисковых роботов и пользователей (ваш красивый заголовок первого уровня так и останется заголовком первого уровня для поисковика – прим. переводчика).
Можно сделать следующий вывод: sIFR – это доступная, сложившаяся технология и возможность ее использования должна быть серьезно рассмотрена дизайнерами и разработчиками.
Когда стоит использовать sIFR
Как и в случае с любой web-технологией, важно найти наилучшее применение sIFR’у и выделить ситуации, в которых он может быть уместен. Это сродни выбору правильного инструмента для работы, и в конкретном случае sIFR выскакивает из коробки с оными и умоляет нас пустить его в ход.
Сценарий: Крупный спортивный новостной сайт решает оформить все заголовки уникальным корпоративным шрифтом. Новости (вместе с их заголовками) публикуются различными людьми, расположенными в разных частях света, с помощью некой системы управления контентом. Они не могут нанять человека, который будет сидеть перед Photoshop’ом и рисовать картинку с заголовком каждый раз, когда редактор хочет добавить новую новость.
В такой ситуации sIFR является непревзойденным в своей простоте, удобстве и расширяемости инструментом. Некоторые новостные сайты внедрили решение, позволяющее генерировать изображения на лету посредством PHP или других манипуляций на стороне сервера. Это позволяет сэкономить время, но имеет множество недостатков по сравнению с sIFR’ом:
* Изображения не масштабируются согласно размеру шрифта пользователя.
* Хотя изображения, как правило, кэшируются сервером, все еще возникает вопрос производительности при генерации изображений.
* Каждое изображение загружается отдельно, создавая проблемы с нагрузкой на сервер и пропускную способность канала.
Что касается sIFR’а, то все, что понадобится для отображения заголовков корпоративным шрифтом – один Flash (.swf) файл и один Javascript (.js).
Пример взят не с потолка. Это один-в-один ситуация, которая привела к разработке Майком Девидсоном (Mike Davidson) первоначальной техники Flash replacement еще в 2001 году при редизайне ESPN.com. С тех пор, при участии Шона Инмана (Shaun Inman) и других разработчиков, sIFR превратился в сформировавшуюся гибкую технологию, какой мы видим ее сейчас, и которая внесла решающий вклад в web-типографику в 2005 году.
Использование sIFR для ссылок
Последняя версия sIFR’а позволяет замещать текст ссылки. Хотя это и интересный прием, фактически никогда не стоит использовать sIFR для данной задачи. Связано это с вопросами accessibility:
* Невозможность вызова контекстного меню по правому клику
* Невозможность вызова контекстного меню по кнопке “option” (для Mac’ов)
* Отсутствие информации в строке состояния.
Хотя это и достаточно тривиальные проблемы, множество людей считают, что отсутствие данных возможностей довольно неудобно. Без отображения адреса ссылки в status bar’е невозможно заранее узнать, куда вы попадете, нажав на нее. Да и с увеличением популярности таких браузеров как Firefox и Opera, контекстное right-click меню становится все более используемым инструментом. Хоть sIFR и предоставляет простое контекстное меню для ссылок (флешевое, грубо говоря – прим. переводчика), контекстные опции браузера недоступны.
Разумеется, данные ограничения связаны с Flash’ем, а не с самим sIFR’ом. Вероятно, данные проблемы будут решены в будущем (вернее, частично они уже решены – прим. переводчика). Информация в строке состояния, в частности, может контролироваться посредством Javascript. Однако, до тех пор, пока Flash не позволит отображать полное контекстное меню браузера для ссылок, я уверен, что sIFR не вполне подходит для работы со ссылками.
Сглаживание шрифта
Поскольку основной интерес к sIFR’у связан с возможностью использовать уникальные шрифты, также важным моментом является возможность сглаживания Flash-текста. Web-разработчики часто забывает об этом, частично потому, что многие работают на Mac OS X с впечатляющей технологией сглаживания Quartz. Однако пользователи Windows (пусть и при наличии спрятанной в настройках отображения функции ClearType) по умолчанию видят несглаженные шрифты. В связи с этим возможность оформлять заголовки сглаженным шрифтом для всех пользователей является важным преимуществом, достойным самого пристального внимания.
Тонкая настройка
Еще одна проблема заключается в том, что sIFR не дает возможности тонкого контроля над качеством отдаваемого Flash-текста. Это действительно так. В случае, когда вы создаете изображение в Photoshop или Fireworks, вы можете четко контролировать кернинг, растяжение, сглаживание и любые другие опции (такие как отбрасываемые тени). Графический редактор дает именно тот результат, который вы планируете. В случае с sIFR’ом это не так.
В случае необходимости настроек на таком уровне – изображение по-прежнему является лучшим способом презентации текста, и sIFR не является подходящим инструментом для таких ситуаций. Хотя если требуется просто получить на выходе нужный шрифт – sIFR дает картинкам огромную фору.
Скорость загрузки
Скорость загрузки замещаемого текста является важным вопросом при использовании sIFR’а. И хотя скорость значительно увеличилась по сравнению с ранними версиями, все еще возможна определенная существенная задержка при наличии большого количества замещаемых элементов на одной странице. Пожалуй, это лучший пример того, что умеренное использование (например, один заголок на страницу или запись) на данный момент является идеальным вариантом применения данной технологии.
Это одна из наиболее существенных преград к использованию Flash replacement. Слишком велико первоначальное искушение заменить как можно больше элементов на странице. Для таких задач скорости загрузки должны быть существенно увеличены. И хотя шустрый сервер может помочь вам в этом, главной проблемой остается время, которое требуется для работы довольно громоздкого Javascript’а.
Вывод
sIFR не является конкурентом замены текста изображениями, это отдельный инструмент, выполняющий другие функции. Лучше всего он используется для текста, который в остальных случаях будет отображаться одним из предустановленных в браузере шрифтов и для того, чтобы не менять разработанную для презентации шрифта графику в случае изменения текста.
Идеальная ситуация для внедрения sIFR’а – когда вы используете изображения только для отображения оригинального шрифта или сглаженного заголовка. Это встречается в сети очень часто и sIFR для таких случаев подходит куда лучше. Он масштабируется в зависимости от пользовательского размера шрифта, его можно выделить и скопировать, а также использовать на тысячах страниц всего с двумя файлами, необходимыми для его работы.
Резюме
* Используйте sIFR для заголовков
* Сводите использование sIFR’а к минимуму для оптимизации времени загрузки
* Не используйте sIFR для ссылок
взято с http://flack.ru/2006/02/17/how-and-when-to-use-sifr/ |
|  |
![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small}
pegon's journal
или 
