Websovet | Полезные советы по созданию веб сайтов

Добавление twitter-ленты на блог

Дата: 11.01.2010 | Рубрики: Twitter | Комментарии (6)

Тэги: javascript, Twitter, twitter-лента

Как и обещал, начинаю новую рубрику о популярном сервисе микро-блогов Twitter. Полезняшки будут нацелены в первую очередь не на тусовочные моменты, а на всевозможные фишки практического характера: от добавления ленты твитов к себе на блог и до различных сторонних программных и пр. фенечек.

Enjoy!

Twitter победоносно шагает по ~~стране~~ миру. Если вы еще не там, то поспешайте, пока бесплатно. Те, кто уже в теме, возможно, захотят добавить на свой сайт (блог) небольшой список последних твитов со своего аккаунта. Сделать это можно различными способами. Есть масса готовых плагинов. Есть даже симпатичные варианты на современном jQuery.

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

Рассмотрим подробнее.

В подвале сайта (файл footer.php, если ваш сайт на Wordpress), прямо перед закрывающим тэгом </body> поместим следующее:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ваше-имя-в-твиттере.json?callback=twitterCallback2&count=5"></script>

Эта пара ссылок подключает файлы javascript, лежащие непосредственно на сайте twitter.com. Во второй из них есть собственная настройка на количество выводимых твитов — count=5. Вы можете менять это число по своему усмотрению. И не забудьте вместо слов “ваше-имя-в-твиттере” вставить собственный логин.

Но где и как будут выводиться эти твиты? Чаще всего в блогах их размещают в сайдбаре. Поступим так же. Для этого в файле sidebar.php находим удобное место и добавляем следующий код:

<h3>Twitter</h3> <ul id="twitter_update_list"> </ul>

Список с идентификатором twitter_update_list и есть тот якорь, что указывает javascript-у где прицепить твиты. Все просто и доступно. Единственный минус данного подхода — невалидный код. Валидатор W3C будет ругаться на недопустимость использования пустого списка. По сути он прав, так как список ul нельзя использовать без вложенных тэгов li. На самом деле список в итоге будет верным, так как скрипт сам добавит пункты списка вместе со ссылками. В общем, если вас это не пугает, то можете пользовать фишку в таком виде. Лично я себе ее так и прикрутил.

Простой ролловер

Дата: 06.01.2010 | Рубрики: Верстка | Комментарии (14)

Тэги: css, hover, html, Верстка, Простой ролловер

Возвращаясь к теме ролловеров, хочу показать простейший из его примеров. Напомню, что ролловером в верстке называется картинка, которая меняется при наведении на нее указателя мыши. Для работы данного эффекта необходимо использовать известное свойство ссылки под названием hover. А как быть, если нам, к примеру, нужно сделать лишь саму картинку в виде ссылки, но без всякого текста. Например, лого. Есть красивый рисунок, и нам вовсе ни к чему на нем сверху накладывать текст ссылки. А делать “пустую” ссылку валидатор не позволяет.

Для решения этой задачи можно применить свойство текста, называемое text-indent, которое обычно применяется для “красной строки”. Но только задать ему отрицательное значение, причем достаточно большое. Тогда текст будет прятаться далеко за границей страницы сайта. Таким способом поступают довольно часто, особенно при использовании рисованных логотипов.

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

Читать полностью →

С чего начать изучение верстки?

Дата: 04.01.2010 | Рубрики: Практика | Комментарии (19)

Тэги: css, html, Верстка, изучение верстки

Приветствую вас, друзья мои! Начиная с этого поста, я открываю новую рубрику на блоге Вебсовет под названием Webmaster alive или иначе — Жизненное. Суть данной рубрики — отнюдь не банальный лытдыбр, коего в миллионах жж-шечках и лирушечках и так хватает с избытком. Суть ее в жизнеописании моего собственного опыта становления в качестве действующего вебмастера, как все это начиналось, в каком русле продолжается и какие цели преследуются.

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

Enjoy! :)

Читать полностью →