Поиск 

Технология sIFR на вашем веб сайте

Пятница, Апрель 09, 2010 г.

Иногда, при разработке веб сайта перед верстальщиками постает задача сохранить шрифты которые были применены дизайнером. Конечно, их можно сделать картинками, но как быть в ситуации, когда это, к примеру, заголовки новостей на онлайн версии журнала, у которого есть своя типографика и она должна быть сохранена и на веб-странице?
В этой ситуации на помощь приходит технология sIFR – scalable Inman Flash Replacement.
В этом туториале будет расказано о том, как использовать технологию sIFR на веб-сайте или блоге, а также как установить и где скачать sIFR3.

Что такое sIFR?
sIFR являет собой комбинацию JavaScript и Flash, которая позволяет динамически заменять текст применяя Flash. Позже вы увидете, что используя эту технологию вы сможете добиться очень интересных эффектов при работе с текстом. Эта технология позволит вам использовать практически любой шрифт на странице, будь-то рукописный вид шрифта или какой-нибудь из шрифтов в стиле техно.

Однако, эта технология имеет несколько моментов на которые следует обратить внимание:

  • У посетителей вашего сайта должен быть установлен Flash, в противном случае текст будет отображаться обычным шрифтом, прописаным в файле таблиц стилей – CSS.
  • sIFR рекомендуется использовать для небольших частей текста, например для заголовков – h1, h2, h3, h4, h5, и не использовать для всего текста на странице, так как это очень замедлит работу сайта.
  • Эта технология не поддерживается некоторыми мобильными устройствами и некторыми КПК.
  • Ваш сайт будет загружатся чуть-чуть медленней чем обычно

Шаг 1 – Скачиваем sIFR3
Технология sIFR была разработана Марком Вуббеном (Mark Wubben). Вы можете найти последнюю версию на его персональном сайте – novemberborn.com из директории nightlies.

Архив будет включать в себя Flash, JavaScript и CSS файлы, нам будут важны следующие:

  • css/sIFR-print.css
  • css/sIFR-screen.css
  • js/sifr.js
  • js/sifr-config.js
  • flash/sifr.fla

Шаг 2 – Редактируем sifr.fla
Перед тем как закачать все на сайт, нам нужно сделать кое какие настройки в flash-файле. Для этого мы используем редактор Adobe Flash, пробную версию которго вы можете скачать отсюда.

После того, как вы уставновили Flash - открываем sifr.fla

 

У вас загрузиться просто белое поле. Так как файл складывается из слоев для того что бы начать выбирать шрифт вам нужно сделать двойной клик по белому полю, если оно все еще не изменилось, повторите двойной клик. Когда появится текст “Bold Italic Normal,” мы можем начинать применять наши настройки.

Теперь кликните по тексту – вы должны войти в режым редактирования текста. Шрифтом по-умолчанию является Verdana, вы можете выбрать любой из шрифтов, который установлен у вас в системе. Я, для примера, выбрал Tahoma.

Также помните, вы не должны менять никаких других настроек – все они – цвет, размер, растояние и др., будут настраиваться с помощью скрипта JavaScript, включенного в sIFR3.

Как только вы это сделали, остается еще один шаг – скомпилировать все в .swf файл, что бы использовать на веб сайте.

Что бы это сделать выбирете: File -> Export -> Export Movie, после чего в окне укажите имя файла и выбирете папку куда вы хотите сохранить ваш файл. Убедитесь в том, что выбраный формат – Flash Movie. Я дал имя файлу sifr.swf. Выберете сохранить.

После чего появится еще одно окно с настройками, которые нам подходят и вам ничего не нужно в нем менять. Кликните OK.

Шаг 3 – Закачиваем sIFR на наш сайт
В нашем примере используется блог-движок – WordPress, поэтому мы закачиваем файлы из первого шага и наш новый sifr.swf в папку wp-content/themes/default. У вас может быть другая директория.

Что бы все было на своем месте и организовано, вам следует закачать файлы в их директории: файл таблиц стилей с директорию wp-content/themes/default/css. Тоже вы можете проделать и с остальными файлами, структура будет похожей на эту:

  • wp-content/themes/default/css/sIFR-print.css
  • wp-content/themes/default/css/sIFR-screen.css
  • wp-content/themes/default/js/sifr.js
  • wp-content/themes/default/js/sifr-config.js
  • wp-content/themes/default/flash/sifr.swf

Только не забудьте, вы должны закачать sifr.swf, а не sifr.fla.

Шаг 4 – Устанавливаем sIFR3
Теперь, когда мы закачали все необходимые файлы, мы можем приступить к установке sIFR на нашу тему WordPress.

Во первых, нам нужно подключить файлы скриптов JavaScript и таблиц стилей. Это мы сделаем между тегами . Открываем wp-content/themes/default/header.php и дописываем перед этими двумя строками наш код:

  1. <?php wp_head(); ?>
  2. </head>

Сперва мы подключим файлы таблиц стилей используя тэг <link>:

  1. <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/css/sIFR-print.css” type=”text/css” media=”print” />
  2. <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/css/sIFR-screen.css” type=”text/css” media=”screen” />

Здесь мы используем предопределенные тэги движка WordPress, которые возвращают нам путь к директории установленой темы.

Таким же способом мы подключаем и файлы скриптов:

  1. <script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/sifr.js” type=”text/javascript”></script>
  2. <script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/sifr-config.js” type=”text/javascript”></script>

Теперь когда мы все прописали, у вас должно быть что-то похожее на этот код:

  1. <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/css/sIFR-print.css” type=”text/css” media=”print” />
  2. <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/css/sIFR-screen.css” type=”text/css” media=”screen” />
  3. <script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/sifr.js” type=”text/javascript”></script>
  4. <script src=”<?php bloginfo(’stylesheet_directory’); ?>/js/sifr-config.js” type=”text/javascript”></script>
  5. <?php wp_head(); ?>
  6. </head>

Шаг 5 – Настраиваем sIFR
До того как sIFR начнет работать, нам нужно его настроить. Все настройки будут происходить в файле sifr-config.js, так что давайте откроем этот файл (он будет пуст). Первым делом мы определим название нашего шрифта и ссылку на flash-файл.

var tahoma = {
src: ‘wp-content/themes/default/flash/sifr.swf’
}

Как выдно, мы определили переменную, которая содержит путь к нашему flash-файлу.Теперь нам нужно активировать эту переменную:

sIFR.activate(tahoma);

Когда sIFR установлен и шрифт активирован, нам нужно назначить какой же текст на странице мы будем заменять. Что бы сделать это – используем комманду замены в sIFR:

sIFR.replace(tahoma, {
selector: ‘h2′
});

Этой командой мы заменяем весь текст, который находиться на веб странице между тэгами h2. Вы также можете заменять любой другой текст на странице – p, b, I, pre… но не рекомендуется заменять большие объемы текста – так как это очень и очень замедлит загрузку сайта.

Сохраните ваш sifr-config.js файл и обновите страницу – вы увидите, что заголовки были заменены другим шрифтом, в нашем случае это Tahoma.

Как вы видите шрифт стал сглаженный и более привлекательный, а также он будет смотреться одинаково во всех браузерах, тоесть появляется некая кроссбраузерность. Используя эту технологию вы можете сделать очень стильные вещи на вашем сайте, потому что вы можете использовать какой угодно шрифт.

Шаг 6 – Стилизируем sIFR
Теперь у нас все работает, но нам все еще осталось кое-что настроить. Настройка происходит помимо sifr-config.js и в файле sIFR-screen.css.

Итак, откроем файл sIFR-screen.css для настройки размера шрифта. Будем придерживаться хорошего тона и держать все вещи на своих местах – быть организованными – начнем со строки:

  1. /*—- Header styling —*/

Что бы применить стили только для заголовков, которые заменяються на flash мы добавим sIFR-активный (sIFR-active) класс перед селектором заголовка h2. Сделаем текст немного поменьше используя свойство font-size, установивм его значение равное 14 пикселям:

  1. .sIFR-active h2{
  2.  visibility: hidden;
  3. font-size: 14px;
  4. }

После того как вы сохраните .css файл и обновите страницу – вы увидите, что текст уменьшился. Также, вы могли заметить, что мы добавили свойство visibility: hidden, что бы спрятать обычный текст.

Вы также можете менять значения свойств line-height, font-family и др. Смена цвета текста и фона не работает через файл таблиц стилей. Эти настройки можно изменить в нашем sifr-config.js.

Определим несколько новых свойств для нашых заголовков, sifr-config.js:

  1. sIFR.replace(tahoma, {
  2. selector: ‘h2′
  3. ,css: [ ]
  4. });

Не забудьте поставить запятую, иначе код не будет работать!

Итак, изменим цвет. Так как наши заголовки h2 являются ссылками, поэтому добавим стили для состояний hover и link:

  1. sIFR.replace(tahoma, {
  2. selector: ‘h2′
  3. ,css: [
  4. ‘a { color: #333333; }’
  5. ,’a:link { color: #333333; }’
  6. ,’a:hover { color: #0066CC; }’
  7. ]
  8. });

Очень важно – писать код полностью, не использовать сокращения, которые могут работать в файлах таблиц стилей:

  1. ‘a { color: #FFF; }’ <- не правильно!
  2. ‘a { color: #FFFFFF; }’ <- правильно

Ссылка, нормальное состояние:

Навели курсор:

И напоследок, вот как выглядит наш файл sifr-config.js:

  1. 1. var tahoma = {
  2. src: ‘wp-content/themes/default/flash/sifr.swf’
  3. };
  4. sIFR.activate(tahoma);
  5. sIFR.replace(tahoma, {
  6. selector: ‘h2′
  7. ,css: [
  8. ‘a { color: #333333; }’
  9. ,’a:link { color: #333333; }’
  10. ,’a:hover { color: #0066CC; }’
  11. ]
  12. });

Помните, у каждого шрифта есть свой автор!

Взято с www.net.tutsplus.com
Теги: CSS | HTML | XHTML Автор: Paradiz | Просмотров: 3768 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.83   
  9     Xenta   29     2.86   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1539 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 989 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 860 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1415 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1420 |
Популярные статьи

Сухово-Кобылин А.В.

Среда, Январь 19, 2011 г.
|
Луна | 724 |

Неврозы

Вторник, Июль 27, 2010 г.
|
Луна | 963 |
|
Луна | 4207 |

Александр Македонский

Пятница, Август 27, 2010 г.
|
Луна | 11361 |

Подростковый возраст

Вторник, Июль 20, 2010 г.
|
Луна | 99652 |

Облако тегов