Создание градиента с помощью SVG

Четверг, 16 июля 2009 23:23

градиент Хочу поделиться одним из методов создания масштабируемых градиентов. Сразу скажу что у него есть свои недостатки, которые ограничивают его применение. В основе данного метода лежит использование формата SVG, который является очень перспективным стандартом представления векторной графики.
Читать запись полностью »

Обновление дизайна

Вторник, 7 июля 2009 17:07

Обновил тему на своем блоге. Давно хотел это сделать, но все никак руки не доходили, а тут на глаза как раз попалась простенькая светлая тема в сине-зеленых тонах. Немного доработал ее под собственные вкусы и вот готово. Не верх дизайнерского мастерства, но мне нравится :) Вообще больше люблю светлые темы, но, надо сказать, иногда попадаются очень красивые темы с темным дизайном.

Попутно прикладываю несколько ссылок с симпатишными темами для Wordpress:
Читать запись полностью »

Расширенное использование тега more

Воскресенье, 28 июня 2009 14:40

Все мы на своих блогах используем тег <!-- more --> для того чтобы скрыть часть поста. Однако, существуют некоторые дополнительные возможности при работе с этим тегом. Например, для того чтобы заменить текст ссылки Читать полностью на любой другой, нужно просто прописать этот текст в самом теге:

<!--more Читать далее об использовании тега more-->

Это может быть полезным, например, для оптимизации блога, т.к. текст такой ссылки позволяет рассказать поисковым системам о странице, на которую она ссылается.
Читать дальше

Вставка Flash-контента

Вторник, 16 июня 2009 21:27

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

Плагин для Wordpress

При вставке flash в блог на Wordpress cамый простой способ использовать плагин. Советую использовать WP-SWFObject. Данный плагин очень прост в применении, использует библиотеку SWFObject(описана ниже). Вставка flash в пост блога осуществляется следующим способом:

[SWF]movie.swf, width, height[/SWF]

movie.swf - путь к файлу вашей флешки, width, height - ширина и высота флешки.  Можно также передать флешке дополнительные переменные:

[SWF]movie.swf, width, height, var1=val1&var2=val2[/SWF]

Если нужно вставить флешку не в пост, а в код Wordpress (например, вставить flash-баннер в сайдбар), можно вопользоваться специальной фукцией:

<?php wp_swfobject_echo("movie.swf", "width", "height"); ?>

В общем все просто.

Вставка с помощью библиотеки SWFObject

SWFObject это специальная Javascript библиотека, предназначенная для вставки flash-роликов на веб-страницы. Использование SWFObject дает ряд преимуществ по сравнению с обычной вставкой flash ручками с помощью разметки.

Во первых, это кроссбраузерность. Также SWFObject позволяет проверить версию flash-плеера, установленную у пользователя и, при необходимости, предложить обновиться. С помощью SWFObject можно задать альтернативный контент, который будет показываться в случае если у пользователя не установлен flash-плеер. Не буду расписывать все преимущества данной библиотеки, тем более, что это уже сделано до меня и очень хорошее описание библиотеки есть здесь.

SWFObject позволяет внедрить flash на страницу двумя методами: статическим и динамическим.

Статический метод

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

Пример использования статического метода представлен ниже. В заголовке документа подключаем скрипт swfobject.js и регистрируем нашу флешку с помощью функции swfobject.registerObject.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
  <head>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      swfobject.registerObject("myFlashContent", "9.0.0");
    </script>
  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
        <param name="movie" value="flash.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
        <!--<![endif]-->
          <p>Альтернативный контент</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Здесь я сделаю важное замечание. Если вы не хотите использовать Javascript и хотите использовать только стандартную разметку, то при вставке флешки используйте данный код, только без подключения скриптов.

Динамический метод

При использовании динамического метода на странице создается элемент с уникальным ID, внутрь которого вставляется только альтернативный контент. При наличии поддержки Javascript, альтернативный контент в данном элементе будет заменен на флеш-контент. Пример представлен ниже. В заголовке HTML-документа подключаем скрипт swfobject.js и скрипт активации флеш-контента.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
  <head>
    <script type=text/javascript” src=”swfobject.js”></script>
    <script type=text/javascript”>
      swfobject.embedSWF(“flash.swf”, “myAlternativeContent”, “800″, “600″, “9.0.0″, false, flashvars, params, attributes);
    </script>
  </head>
 
  <body>
    <div id=”myAlternativeContent”>
      <p>Альтернативный контент</p>
    </div>
  </body>
</html>

Вставка flash с помощью разметки

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

1
2
3
4
5
6
7
8
9
10
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="flash.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
    <!--<![endif]-->
      <p>Альтернативный контент</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

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

Метрика - новый сервис статистики от Яндекса

Пятница, 29 мая 2009 22:49

metrikaМногие уже слышали, что 24 апреля этого года Яндекс открыл для всех желающих сервис статистики Метрику. Собственно говоря, система представляет собой аналог Google Analytics и призвана собирать статистику посещаемости вашего сайта. Правда, можно выделить и несколько нововведений. Например то, что статистика метрики обновляется каждые пять минут(!!), в то время как статистика Google Analytics лишь раз в стуки. К тому же счетчик метрики имеет вот такой кусочек кода:

<noscript><div style=”display: inline;”><img src=”http://bs.yandex.ru/watch/ХХХХХХ” width=”1″ height=”1″ alt=”" /></div></noscript>

* This source code was highlighted with Source Code Highlighter.

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

Еще можно отметить наличие функции мониторинга, которая позволяет постоянно следить за посещаемостью вашего сайта. В случае резких колебаний посещаемости (например, ваш сайт упал или перегружен) система проверяет главную страницу на доступность и, если возникли проблемы, Метрика может уведомить вас об этом по SMS. В общем, Метрика вполне достойный ответ Google Analytics.

Разумеется, узнав о данном сервисе, мне захотелось испытать его в деле. Счетчик метрики я вставил в плагин Google Analytics for Wordpress, так как мне было нужно чтобы не учитывались посещения администратором, а этот плагин позволяет сделать это без проблем.

Чтобы вставить счетчик находим и открываем файл googleanalytics.php в папке плагина. Как правило, счетчик Google выделен в коде комментариями. Находим его и сразу же за ним втыкаем наш счетчик Метрики:

  . . .
<!– Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ –>
  . . .
<!– End of Google Analytics code –>

  <!– Сюда втыкаем счетчик Яндекса –>

  . . .

* This source code was highlighted with Source Code Highlighter.

Дальше смотрим и анализируем данные статистики от Яндекс.Метрики. Вот и все, всем удачи и высокой посещаемости.