Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

Довольно часто, при разработке сайтов, его заказчики выдвигают завышенные требования к его дизайну (красивое анимированное меню на базе флэш технологий, графические заголовки и все-такое), что в последствии приводит к затруднениям при его раскрутке. Дело в том, что не все дизайнеры и верстальщики обладают необходимыми базовыми знаниями в области SEO. Они слепо стремятся удовлетворить требования клиента и совершенно не задумываются над тем, что после этого сайт нужно будет раскручивать. А что раскручивать, если весь сайт - является набором картинок или мультипликации?

Не так давно мне для раскрутки достался один из таких сайтов. Хозяйка сайта - дизайнер интерьеров по профессии и поэтому внешний вид своего сайта поставила во главу угла. В результате всё меню сайта - было красивым, но графическим, выполненным с помощью корпоративного шрифта - Bauhaus. Благо язык PHP богат на всякого рода библиотеки, поэтому ребята разработчики и решили, не мудрствуя лукаво, формировать меню сайта с помощью таких вещей.

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

Оказывается, что с помощью CSS можно интегрировать в сайт любые TTF-шрифты, но они достаточно громоздки и влияют на скорость загрузки, а вот EOT-шрифты в 3-5 раз легче! Где же взять EOT шрифты? На сегодня я знаю 2 утилиты, которые умеют конвертировать TrueType-шрифты в формат EOT (Embedded OpenType). Первая, от всем известного производителя - Microsoft WEFT (Web Embedding Fonts Tool), другая от другого монстра - Google - ttf2eot (кроссплатформенная утилита). WEFT - имеет графический интерфейс, а ttf2eot запускается из командной строки.

Пример команды: ttf2eot < input.ttf > output.eot

После того как EOT-шрифт сгенерирован (в моем случае это был файл BAUHAUS1.eot, размер 10 Кб), можно приступать к его использованию. Для этого нужно подключить данный файл и связать его с CSS-ким font-family, которое затем можно использовать в привычном, для верстальщика, виде.

Важное замечание. Значение параметра font-family задается не произвольным образом, а является точным названием шрифта, которое можно увидеть с помощью любого TTF-вьюера.

В результате получим следующий CSS-код:

<STYLE TYPE="text/css">

@font-face {
font-family: BauhausLightCTT;
font-style: normal;
font-weight: normal;
src: url(BAUHAUS1.eot);
}

.eotexample {
font-family: BauhausLightCTT, sans-serif;
font-size: 18px;
color: #000099;
}

</STYLE>

... и HTML-код :

<p class="eotexample">Данный шрифт используется на сайте Дизайн бюро "Gratage Visual" </p>

Конечный результат :

Данный шрифт используется на сайте Дизайн бюро "Gratage Visual"

Объективности ради, должен сказать, что данный метод не является панацеей, т.к. не все EOT-шрифты адекватно отображаются на веб-страничках, причем чем меньше размер шрифта, тем корявее он выглядит, по крайней мере некоторые из них (всем завитушкам и засечкам просто негде развернуться).

К тому же, не все браузеры понимают eot-шрифты. Поэтому, для кросс-браузерного решения нужен еще один шрифт - OTF (open type font), который понимают все нормальные браузеры, кроме осла. Создать такой можно различными утилитами, но лично я это делаю с помощью TransType Pro от Fontlab.

P.S. Честно говоря, я до сих пор удивлен почему данный прием не получил такого широкого распространения как графическое меню сайтов :)

 

Дорабатывая очередной свой сайт столкнулся с такой проблемкой. В шапке сайта есть две флэш вставки - банер, который вставлен через конструкцию object embed и меню за размещение которого отвечает скрипт SWFObject. Ниже всего этого находится картинка (это была схема проезда), которая увеличивается при клике мышки с помощью библиотеки lightbox. Так вот, проблема заключалась в следующем - при более детальном просмотре картинки серая вуаль, которая должна "зашторить" весь экран, не покрывала флэш - меню и банер, а сама картинка отображалась под ними. Выглядело это так:





В результате, у меня получилось следующее рабочее решение.
Для банера (object embed):
1. Сам тег object был взят в дополнительный div со следующими CSS-свойствами - style="position:absolute;z-index:0;"
2. Тегу embed добавлен параметр wmode="transparent" и <param name="wmode" value="opaque" />

Все вместе, на данный момент, выглядит так:
<div style="position:absolute;z-index:0;">
<div id="ack_banner" style="float:left;">
<object width="550" height="400">
<embed src="banner.swf" width="480" height="70" wmode="transparent"></embed>
<param name="wmode" value="opaque" />
</object>
</div>
</div>

Для меню (SWFObject):
1. Дописана лишь одна строка - so.addParam("wmode", "opaque")

Таким образом, получилась такая конструкция:

<script type="text/javascript">
var so = new SWFObject("menu.swf", "ack", "1024", "295", "7", "#ffffff");
so.addParam("allowFullScreen", "true");
so.addParam("wmode", "opaque");
so.write("menuflashcontent");
</script>

Как это выглядит в жизни можно посмотреть на сайте http://www.ack.biz.ua/contacts.html или на данном скриншоте:






Работоспособность проверял во всех браузерах - IE7, FF3, Opera9.27, Chrome и Safari, чего думаю вполне достаточно ;).

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

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

Надеюсь, что со временем блог станет интересным и содержательным, а также найдутся люди которые найдут для себя что-то полезное.