суббота, 28 февраля 2009 г.

Год молодежи раз два

А вы в курсе, что 2009 год объявлен в России Годом молодежи? Смотрим ролик, ловим 25-й кадр, а дальше мои размышления отнюдь не претендующие на истину в последней... в последней.



И вроде все правильно, красиво и ёмко... Так что же не так? Вроде впору кричать «эта прарыфф!» и обливаясь горючими слезами в приступе самобичевания «восклицать каг я мог так раньше жыть?!!» Идея, бля, гениальна. И все чаще в интернете зришь вопросы типа

Как появилась идея объявить 2009 год Годом молодежи?


А потому что самое время! Кризис, нах! Что значит Год молодежи? Что тебе дадут квартиру? льготную ипотеку? подберут работу по твоему складу характера или ума? обеспечат лечение/обследование в больнице, чтобы у тебя были здоровые дети? ах, есть дети... твоих детей устроят в садик? Авотхуй! Это просто твой год! Тебе решать, как выгребаться из этой жопы, «ты ж молодой!» Это следовало бы назвать год сперматозоида – выживает сильнейший. Забудь свои стремления и мечты у тебя есть выбор – либо ты выжил, либо нет.


А вот и ролик-ответ от sostav.ru (если не отображается – ходи по ссылке):


P.S. Повторяю, что все буквы в тексте отражают лишь мое сугубо личное мнение. Любители помахать флагом оптимизма и повыкрикивать лозунги будут попрошены высказаться конкретными примерами или попрошены нахуй.


Читать дальше »

Коварный rel external

Что значит атрибут ссылки rel="external".


Довольно часто просматривая чужие блоги натыкаюсь на ссылки вида:

<a rel="external nofollow" href="http://dotrb.blogspot.com">Солодоварни Рубина</a>


Что значит атрибут nofollow я знаю, но вот что такое external? Дело в том, что в спецификации XHTML атрибут ссылки target не поддерживается. Следовательно, конструкция вида: target="_blank" не является валидной. Открывание нового окна браузера – это задача скрипта, а не гипертекстовой разметки. Открывать ссылки в новом окне теперь предлагается с помощью, например языка javascript. Для этого отдельными разработчиками и был искусственно введен атрибут external.


Читать дальше »

четверг, 26 февраля 2009 г.

Интернет вас забанил

Для смеха. Прочитал сегодня на Хабрахабре: Я безумный / Интернет вас забанил

Firefox: Интернет вас забанил


Сели мы тут с другом по разные стороны монитора и собрали вот штуковину

Работает для самых популярных браузеров. Для остальных принимаются предложения и всякая помощь

Зачем? Ну придумайте сами, можно просто как домашнюю страницу поставить девочке какой, пусть пугается

Под катом скриншоты страницы в популярных браузерах. Хотя лучше сначала сходите по ссылке :).


Mozilla Firefox - Видимо произошла какая-то ошибка


Firefox - Интернет Вас забанил

Internet Explorer - Неизвестная ошибка


Internet Explorer - Неизвестная ошибка

Safari - Safari заблудился


Safari не может найти Интернет

Opera - Интернет вас забанил


Opera - Интернет вас забанил

Google Chrome - Интернет вас забанил


Вы были забанены интернетом
Читать дальше »

CSS стили для «хитрых» тегов

В предыдущем посте я давал обзор редко используемых тегов HTML. К сожалению, не все браузеры отображают тот или иной тег так, как нам хотелось бы. Поэтому будем их тюнинговать с помощью CSS.


Теги abbr и acronym


Сразу замечу, что браузер Internet Explorer вплоть до восьмой своей инкарнации не понимает тег <abbr>. Однако, тем не менее рекомендую задать правило CSS для обоих этих тегов. Добавьте в ваш список стилей следующее правило:

acronym, abbr {
cursor: help;
border-bottom: 1px dotted #000;
}


Теперь текст, заключенный в контейнерах <abbr> и <acronym> будет подчеркиваться пунктирной линией. А при наведении мыши будет отображаться курсор «вопрос».


Тег q – цитата


Замечание: IE не расставляет кавычки вокруг цитаты <q> и не понимает свойство quotes. Но тем не менее мы создадим нижеследующее правило для всех нормальных браузеров.


По умолчанию, браузер Mozilla Firefox отображает текст цитаты <q> в английских «лапках». Что неприемлемо, если мы цитируем текст на родном языке.


Цитата в английских лапках

Создадим правило CSS для цитаты:

q {
font-style: italic; /* курсивное начертание */
quotes: "\00ab" "\00bb"; /* открывающие и закрывающие кавычки в формате Юникод */
}


Теперь цитата отображается в таких близких нашему сердцу русских «ёлочках»


Цитата в русских елочках

За сим данный мини-обзор считаю завершенным. Успехов на тропах интернета!


Читать дальше »

среда, 25 февраля 2009 г.

16 хитрых тегов HTML

Как и обещал, дам описание «хитрых» тегов HTML. Тем более, что сам довольно часто их использую.


«Хитрыми» я их обозвал сам. На самом деле это просто редко используемые, но весьма полезные теги HTML. Упреждая вопрос: «а какая разница, если все равно и тот и другой отображаются курсивом?», отвечу сразу: это справедливо только относительно отображения в браузере. Для поискового робота, они имеют совершенно разную значимость. То же самое справедливо для текстовых и голосовых браузеров.


ABBR


Тег <ABBR> указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.


По умолчанию, текст заключенный в контейнере <ABBR> подчеркивается пунктирной линией.


HTML

<abbr title="Hypertext Markup Language">HTML</abbr>


ACRONYM


Элемент <ACRONYM> указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.


По умолчанию, текст заключенный в контейнере <ACRONYM> подчеркивается пунктирной линией.


Лазер

<acronym title="Light Amplification by Stimulated Emission of Radiation">Лазер</acronym>


ADDRESS


Тег <ADDRESS> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов.


По умолчанию текст внутри контейнера <ADDRESS> отображается курсивным начертанием.


Бейкер-стрит, 221-б

<address>Бейкер-стрит, 221-б</address>


BLOCKQUOTE


Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.


Улучшить водку можно единственным способом -- увеличением объёма бутылки. Все остальные выкрутасы -- опять же замануха для лохов, умеющих читать.
А. Кочергин

<blockquote>Улучшить водку можно единственным способом -- увеличением объёма бутылки. Все остальные выкрутасы -- опять же замануха для лохов, умеющих читать.
А. Кочергин</blockquote>


CITE


Тег <CITE> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <CITE> курсивом.


Как заметил известный афорист :) Виктор Черномырдин Хуже водки лучше нет.

<cite>Хуже водки лучше нет</cite>


CODE


Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д.


Браузеры обычно отображают содержимое контейнера <CODE> как моноширинный текст уменьшенного размера.


Используя конструкцию @store = Store.find(params[:id]), найдем магазин по его id в базе данных.

<code>@store = Store.find(params[:id])</code>


DEL


Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.


Браузеры обычно помечают текст в контейнере <DEL> как перечеркнутый.


Этот текст был удален

<del>Этот текст был удален</del>


DFN


Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег <DFN> применяется для выделения таких терминов при их первом появлении в тексте.


Браузеры отображают содержимое контейнера <DFN> с помощью курсивного начертания.


Аббревиатура -- сокращённое написание слова или группы слов.

<dfn>Аббревиатура</dfn> -- сокращённое написание слова или группы слов.


INS


Тег <INS> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.


Браузеры обычно помечают текст в контейнере <INS> как подчеркнутый.


Добавленный текст

<ins>Добавленный текст</ins>


KBD


Тег <KBD> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере <KBD> моноширинным шрифтом.


Наберите rake db:migrate, чтобы обновить структуру БД

Наберите <kbd>rake db:migrate</kbd>


PRE


Элемент <PRE> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <PLAINTEXT>, использование которого осуждается в HTML 4, внутри контейнера <PRE> допустимо применять любые теги.


def index
@store = Store.find(params[:id])
# найден магазин по его id в базе данных
end

<pre>def index
@store = Store.find(params[:id])
# найден магазин по его id в базе данных
end</pre>


Q


Тег <Q> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках. Браузер Internet Explorer хотя и понимает тег <Q>, но кавычки не ставит. Остальные браузеры кавычки добавляют корректно.


Огня в ней больше, чем в объятом пламенем доме, а смотреть на нее в десять раз интереснее, чем на пожар. - Глен Кук

<q>Огня в ней больше, чем в объятом пламенем доме, а смотреть на нее в десять раз интереснее, чем на пожар.</q> - Глен Кук


SAMP


Элемент <SAMP> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <SAMP> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.


db updated

<samp>db updated</samp>


TT


Контейнер <TT> отображает текст моноширинным шрифтом. Этот тег относится к группе тегов физического форматирования.


Моноширинный текст

<tt>Моноширинный текст</tt>


VAR


Тег <VAR> используется для выделения переменных компьютерных программ.
Браузеры обычно помечают текст в контейнере <VAR> курсивным начертанием.


Переменная @user содержит информацию о пользователе

Переменная <var>@user</var> содержит информацию о пользователе


XMP


Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.


Ссылка на <a href="/">домашнюю</a> страницу блога
<xmp>Ссылка на <a href="/">домашнюю</a> страницу блога</xmp>


  • В статье использованы материалы сайта htmlbook.ru

Читать дальше »

пятница, 20 февраля 2009 г.

Friend Connect. Что? Как?

Что такое Google Friend Connect и на кой он нужен?
Google утверждает, что с Friend Connect, посетители вашего сайта или блога могут:


  • Регистрироваться, используя свой Google, Yahoo, AIM или OpenID аккаунт
  • Взаимодействовать с другими посетителями, заводя друзей, обмениваться медиа, публиковать комментарии, играть в игры... и еще пол-ведра непротивозаконных развлечений
  • Приглашать друзей из других социальных сетей и контакт-листов присоединиться к вашему сайту или блогу

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


Кому и для чего нужен Google Friend Connect?


В первую очередь он будет полезен владельцам собственных сайтов и автономных блогов. Google Friend Connect позволяет добавить на такие сайты и блоги функциональность социальных сетей. Господа, теперь вам не нужно притягивать посетителей за яйца, заставляя регистрироваться на «сцайте», чтобы оставить осмысленный комментарий к материалу. Позвольте им авторизоваться, используя их собственный аккаунт одного из известных сервисов интернета или учетной записи Open ID. Уверен, что объем фидбэка вас порадует.


Как установить Google Friend Connect?


  1. Зайдите на сайт Google Friend Connect
  2. Войдите, используя свою учетную запись Google
  3. Посмотрите скринкаст как устанавливать и использовать Friend Connect (ссылка “Watch a video introduction”)
  4. Действуйте!

Google Friend Connect «по-русски»


Google Friend ConnectА теперь расскажу вам самую страшную тайну русской блогосферы. Уважаемые камрады блоговоды, само окошко Friend Connect нихрена вам не дает. Да и посетителям вашего блога тоже. Это всего лишь форма регистрации и профайлов пользователей! Стали бы вы, скажем, регистрироваться на форуме, у которого из функционала только регистрация и просмотр/редактирование вашего профиля? Да еще и звать туда друзей? «Айда, пацаны профайлами меряться!»




Социальные приложения Friend Connect


Чтобы использовать Google Friend Connect «по-взрослому» стоит вытащить палец из ж... носа и пользоваться социальными приложениями Friend Connect. На данный момент их ровно три*:

* - Официальных социальных приложений от Google.
  • Wall (Стена) -- позволяет посетителям обмениваться комментариями и ссылками на вашем сайте
  • Review/Rate («Обозри/Оцени!») -- предоставляет посетителям вашего сайта оценить тот или иной материал. Это может быть как весь сайт, так и отдельная страница или определенный элемент (по ID)
  • Social Bar -- все в одном и в самом неудобном виде :)


Пример использования Friend Connect



Читать дальше »

четверг, 19 февраля 2009 г.

Красивая рамка для изображений

Ruby BrewedИтак, рамка для изображений в блоге с помощью CSS. Несмотря на попсовое название (у меня творческий запор), рамка получается довольно зачетная и функциональная. Дальше будет немного «воды», т.е. следующий абзац можно смело пропустить.


Сегодня писал функционал для пользователей, устанавливающих на сервисе собственные торговые площадки. В-частности, помимо установки/изменения шаблонов, владельцы могут загружать собственное логотипы магазинов. Понятное дело, какое будет у них лого я знать заранее не могу. Если у изображения будет белый фон, то на белом фоне страницы будет смотреться... отнюдь... отнюдь! Добавлять бордюр -- тоже прямо скажем «не айс» -- а ну как логотип тоже будет с бордюром? Решил несколько минут потратить, собственно на оформление изображений.


Та же техника, применительно к блогам на Blogspot. Как и обещал, тут мы используем инструмент Stripe Generator.


  1. С помощью Stripe Generator генерируем полосатый узор и загружаем, например, в свой альбом Picasa. Копируем прямую ссылку на изображение из альбома
  2. Добавляем в стили CSS своего блога следующее:

  3. img {
    padding: 5px; /* отступ 5 пикселей с каждого края */
    border: 1px solid #E3635C; /* толщина, стиль и цвет бордюра */
    background: #F1F0E5 url('http://lh3.ggpht.com/_3_wwcvitlLc/SZ2yzL4RbtI/AAAAAAAAAzU/LvbyCQ-ft9k/stripes10.png');
    /* базовый цвет фона и адрес картинки ВАШЕГО фонового изображения */
    }

  4. Сохраняем шаблон.

Ниже приведу, что получилось.


Bamboo
Читать дальше »

Инструмент Stripe Generator

Онлайн генератор полосатого узора


Очередной полезный инструмент для веб-мастеров. На самом деле, это брат-близнец генератора узора «шотландки». С одним лишь отличием... Да, вы угадали -- вместо клетчатых узоров он делает «полосатости».


Stripe Generator 2.0

Необходимое и достаточное количество функций, приятный интерфейс, реализовано с использованием технологии AJAX. Поэтому -- удобно, шустренько, приятно. Рекомендую. Ссылка под катом -- лучше один раз попробовать, чем десять раз прочитать ;).


Этот генератор планирую использовать в одном из следующих примеров.



Читать дальше »

среда, 18 февраля 2009 г.

Оригинальный взлом от Хо Ши

Взлом Lenovo

Пипец, дамы и господа! Я ржу и валяюсь хлопая ладошкой по столу и смешно суча ножками )))


Вьетнамские хацкеры исследователи (researchers) взломали технологию распознавания владельца по лицу, которая используется для аутентификации в ноутбуках Lenovo, Asus и Toshiba как полноценная альтернатива стандартному вводу логина и пароля.
Хакеры легко обошли систему аутентификации, продемонстрировав ей фотографию владельца ноутбука…

Дальше можно не читать, но для желающих даю прямую ссылку: Информационная безопасность / Перевод Хакеры…

P.S. Первым делом заслал ссылку знакомому админу, у которого Lenovo.

Читать дальше »

Flash облако тегов. Русский язык

Flash облако тегов

Blobumus-rus

Исправленное Flash облако тегов с поддержкой русского языка.


В режиме редактирования шаблона включите крыжик «Расширить шаблоны виджета» и замените старый виджет. Находится между XML тегами:

<b:widget id='Label2' locked='false' title='Flash Облако тегов' type='Label'>
<!-- ... здесь тело виджета ... -->
</b:widget>


На новый:

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://forum.wafl.ru/files/freeman/swfobject.js' type='text/javascript' />
<script type='text/javascript'>
var flashvars = {};
flashvars.mode = "tags";
flashvars.minFontSize = "8"; // Минимальный размер шрифта
flashvars.maxFontSize = "22"; // Максимальный размер шрифта
flashvars.tcolor = "0x333333"; // Цвет текста
flashvars.tcolor2 = "0x000000"; // "Максимальный" цвет текста
flashvars.hicolor = "0xdC61B1B"; // Цвет подсвеченного текста
flashvars.distr = "true"; // [true|false] теги выходят за пределы сферы
flashvars.tspeed = "100"; // Скорость вращения сферы
flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>";
var params = {};
params.wmode = "transparent";
params.bgcolor = "#FFFFFF";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "b-cumulus";
attributes.name = "tagcloud";
swfobject.embedSWF("http://forum.wafl.ru/files/freeman/tagcloud.swf", "b-cumulus", "200", "200", "9.0.0", false, flashvars, params, attributes);
</script>
<div id='b-cumulus'>
<a href='http://www.adobe.com/go/getflashplayer'>
<img alt='Get Adobe Flash player' src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif'/>
</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>


Проблем с русским языком быть не должно.



Читать дальше »

Flash облако фотографий

Всем поклонникам flash-облаков и в-частности Flash Облака тегов придется по душе новый виджет от Roy Tanck -- Flash Облако Фотографий. Выглядит примерно так:


Для работы Фото-Облака требуется Flash Player 9 или выше.


По моим наблюдениям облако немного тупит. Возможно понадобится перезагрузить страницу.


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


Установка Flash облака фотографий


  • Вам понадобится: учетная запись на flickr.com и адрес RSS подписки на ваши фото. Для этого (зарегистрируйтесь на flickr) скопируйте адрес RSS подписки на странице photostream.
  • Добавьте новый виджет HTML/Javascript и добавьте в него следующий код:

  • <div>
    <object type="application/x-shockwave-flash" data="http://media.roytanck.com/flickrwidget.swf" width="400" height="350">
    <param name="movie" value="http://media.roytanck.com/flickrwidget.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="wmode" value="transparent" />
    <param name="flashvars" value="feed=http://api.flickr.com/services/feeds/photos_public.gne?id=86558657@N00&lang=en-us&format=rss_200" />
    <param name="AllowScriptAccess" value="always"/>
    <p>Для работы <a href="http://beliber-da.blogspot.com/">Фото-Облака</a> требуется Flash Player 9 или выше.</p>
    </object>
    <span style="font-size:9px;">Получить виджет от <a href="http://dotrb.blogspot.com/">Ruby Brewed</a></span>
    </div>

  • Замените строку http%3A//api.flickr.com/services/feeds/photos_public.gne%3Fid%3D35047280@N07%26lang%3Den-us%26format%3Drss_200 на адрес вашей RSS ленты flickr
  • Параметры width="400" и height="350" -- ширина и высота облака соответственно;
  • value="#ffffff" -- цвет фона облака;
  • value="transparent" -- задает прозрачность (можно удалить).

Отмазка:

Читать дальше »

вторник, 17 февраля 2009 г.

Russian Blogger Help Group (по-русски)

Google Groups

На Google Groups организована группа Russian Blogger Help Group (по-русски). Зарегистрироваться может каждый желающий, имеющий аккаунт на Google. Думаю, группа будет полезна всем кого интересуют вопросы использования и настройки платформы Blogger.


Читать дальше »

воскресенье, 15 февраля 2009 г.

Форма поиск в блоге

Допустим вы убрали navbar из шаблона Blogger, скрыв его при помощи CSS, или же полностью удалив с помощью JavaScript. Возможно, вы хотели бы оставить форму поиска по блогу для ваших пользователей.


Форма поиска сообщений в блоге


  1. Перейдите на вкладку Макет - Элементы страницы
  2. Создайте новый HTML/Javascript элемент на вашей боковой панели
  3. Добавьте следующий код в ваш виджет:

  4. <form id="searchthis" action="/search" style="display:inline;" method="get">
    <input id="search-box" name="q" size="25" type="text" />
    <input id="search-btn" value="Искать" type="submit" />
    </form>

  5. Назовите ваш виджет, например «Искать в этом блоге» и сохраните.

Теперь у вас появился полнофункциональный поиск в блоге.

Читать дальше »

четверг, 12 февраля 2009 г.

Удалить Blogger navbar при помощи javascript

Как удалить navbar из шаблона Blogger используя JavaScript.

Добавьте в конец шаблона перед тегом </body> следующий скрипт (или добавьте гаджет HTML/Javascript):
<script type="text/javascript">
function removeBloggerNavbar(){
var parent = document.getElementById("Navbar1");
var child = document.getElementById("navbar-iframe");
parent.removeChild(child);
}
removeBloggerNavbar();
</script>

Cкрипт полностью удалит navbar со страницы. Работает в FF и IE.
upd: Работает в Opera, Safari, Google Chrome. Читать дальше »

Борьба со спамом в Blogger

Не то, чтобы меня сильно беспокоила эта проблема, но... любое состояние неявно подразумевает союз «пока». «Катился колобок по тропинке, (пока) никто его не съел.»

Такой вот совет от блога Анти-СЕО:
Если вам в комментарии на Блоггере приходит спам, и вы заходите в блог, откуда пришёл коммент, но не видите навбара, и, соответственно, флажка "пометить блог" - надо идти сюда.
И там ввести адрес спам-блога.
Так мы постараемся сделать блогосферу чуть-чуть чище.


Лично я использую Firebug, так что скрытый navbar для меня не проблема.

Anti-SEO navar

Этот способ прекрасно работает если navbar скрыт с помощью CSS. Однако скрыть navbar можно с помощью нехитрого кода javascript. И тогда единственным самым простым выходом останется приведенный выше способ.
Читать дальше »

среда, 11 февраля 2009 г.

Пирамида Лебедева

...или как заработать на кризисе

Вот такой вот потрясающий визуал нашел: Пирамида Лебедева. Это нечто медитативное! Всего лишь ежедневное созерцание этого визуального объекта подскажет вам как заработать на кризисе стратегию и базовые принципы развития любого успешного предприятия.

Пирамида Лебедева

Заметка написана по прочтении статьи Зарабатать на кризисе? Ага, конечно! (часть 2).
Количество запросов на тему "Как заработать на кризисе" продолжает расти. А это значит, что поток дурачков, которые хотят заработать на празднике общей беды, неуклонно растет. Понятно, что на них уже начинает выстраиваться целый бизнес.
На мой взгляд, удачная статья по теме, с довольно трезвой оценкой сложившейся ситуации.

Для «энтузиастов» же рекомендую:

Читать дальше »

Pastie подсветка синтаксиса

Самый первый пост, опубликованный мной с тегом JavaScript освещал такую интересную для любого «кодоблоггера» тему, как Динамическая подсветка синтаксиса с помощью javascript.

Если же по каким-то причинам вам лень добавлять javascript к вашему шаблону, вы можете воспользоваться сервисом Pastie.

Pastie код
Pastie «умеет» подсвечивать код ActionScript, C/C++, CSS, Diff, HTML (ERB / Rails), HTML / XML, Java, Javascript, Objective C/C++, Pascal, Perl, PHP, Plain text, Python, Ruby, Ruby (on Rails), Shell Script (Bash), SQL, YAML. Вставьте полученный код javascript в ваш блог и подсветка кода готова.

Код Pastie в блоге
Второй, неявный способ применения Pastie -- обмен фрагментами кода. Удобно при удаленной разработке в команде.

P.S. Pastie написан на Ruby on Rails.


Читать дальше »

вторник, 10 февраля 2009 г.

Заставить IE создать элемент style

Сегодня с помощью JavaScript динамически создавал HTML элемент <style> внутри <iframe>. Да, мы, бля, не ищем легких путей ;). В Firefox срабатывает на «отлично», но как всегда не обошлось без сюрпризов от IE. И никакие «умные» (даже затрудняюсь в выборе кавычек) способы не помогали.

Зато вот какой шикарный трюк нагуглил:
var CSS = 'body { margin: 0px; }';
var htmDiv = document.createElement('div');
htmDiv.innerHTML = '<p>x</p><style>'+CSS+'</style>';
document.body.appendChild(htmDiv.childNodes[1]);

Работает в IE6 and IE7 и в нормальных браузерах.

Читать дальше »

понедельник, 9 февраля 2009 г.

Feedburner 0 readers

feedburnerЕсли вы видите такую картинку в вашем блоге, значит пришла пора перенести ваш RSS канал с Feedburner на Google. Дело в том, что гугль недавно сделал «подарок» всем пользователям Feedburner. Теперь можете забыть, что «когда-то» «где-то там» вы регистрировали RSS канал вашего сайта. С легкой руки Google все ссылки на ваш фид стали неактуальными.

Как перенести аккаунт FeedBurner на Google?
  1. Зайдите на FeedBurner используя свою учетную запись;
  2. FeedBurner предложит перенести ваш аккаунт на Google. Просто следуйте инструкции;
  3. Проверьте URL вашего канала! Не исключено, что он неким «мистическим образом» изменился;
  4. Для Blogger: зайдите в Настройки - Канал сайта и в строке URL переадресации канала сообщений пропишите ваш «новый» RSS канал;
  5. Измените все виджеты, использующие ваш RSS.

Приятных развлечений!
Читать дальше »

CSS спрайты

Futurama
Да, вы уже наверняка слышали о них... но действительно ли вы понимаете, что они из себя представляют? Название немного сбивает с толку. CSS спрайты -- это не множество маленьких изображений, как вы могли бы подумать. На самом деле это одно большое изображение. Сама соль этой техники заключается в объединении множества маленьких изображений в одно большое.


«А нахрена это нам?» или «А что это нам даст?» -- возможно спросите вы. А вот ответьте мне на такой вопрос: что быстрее скачается с флешки: «полтыщи» картинок, старательно надерганых из интернет, суммарным объемом 1 гигабайт или те же «полтыщи» картинок, но одним архивом объемом в гиг? Поэкспериментируйте ;).

Ну да таки перейдем качественных рассуждений к количественным.

Список-меню без использования CSS спрайтов


Пример 1. Стили CSS


.list-item {top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none;}
#nav li a {background:none no-repeat left center; display: block; height:85px; width:200px; padding-left:85px;}

#nav li a.fry {background-image:url('images/fry_bw.jpg')}
#nav li a.leela {background-image:url('images/leela_bw.jpg')}
#nav li a.bender {background-image:url('images/bender_bw.jpg')}
#nav li a.zoldberg {background-image:url('images/zoldberg_bw.jpg')}
#nav li a.amy {background-image:url('images/amy_bw.jpg')}

#nav li a:hover.fry {background-image:url('images/fry.jpg')}
#nav li a:hover.leela {background-image:url('images/leela.jpg')}
#nav li a:hover.bender {background-image:url('images/bender.jpg')}
#nav li a:hover.zoldberg {background-image:url('images/zoldberg.jpg')}
#nav li a:hover.amy {background-image:url('images/amy.jpg')}

Пример 1. Код HTML


<ul id="nav">
<li><a class="fry" href="#fry"><div class="list-item">Фрай</div></a></li>
<li><a class="leela" href="#leela"><div class="list-item">Лила</div></a></li>
<li><a class="bender" href="#bender"><div class="list-item">Бендер</div></a></li>
<li><a class="zoldberg" href="#zoldberg"><div class="list-item">Зольдберг</div></a></li>
<li><a class="amy" href="#amy"><div class="list-item">Эми</div></a></li>
</ul>

Результат:
  • Объём страницы: 1.45 Kb
  • Запросов: 6
  • Время загрузки: 0.181 s

Список-меню с использованием CSS спрайтов


Пример 2. Стили CSS


.list-item {left:10px; top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none; clear:both; height:85px; width:200px;}
#nav li a {background:url('images/futurama.jpg') no-repeat; display: block; height:75px; width:75px; float:left;}

#nav li a.fry {background-position:0 0;}
#nav li a.leela {background-position:0 -75px;}
#nav li a.bender {background-position:0 -150px;}
#nav li a.zoldberg {background-position:0 -225px;}
#nav li a.amy {background-position:0 -300px;}

#nav li a:hover.fry {background-position:-75px 0;}
#nav li a:hover.leela {background-position:-75px -75px;}
#nav li a:hover.bender {background-position:-75px -150px;}
#nav li a:hover.zoldberg {background-position:-75px -225px;}
#nav li a:hover.amy {background-position:-75px -300px;}

Пример 2. Код HTML


<ul id="nav">
<li><a class="fry" href="#fry"></a><span class="list-item">Фрай</span></li>
<li><a class="leela" href="#leela"></a><span class="list-item">Лила</span></li>
<li><a class="bender" href="#bender"></a><span class="list-item">Бендер</span></li>
<li><a class="zoldberg" href="#zoldberg"></a><span class="list-item">Зольдберг</span></li>
<li><a class="amy" href="#amy"></a><span class="list-item">Эми</span></li>
</ul>

Результат:
  • Объём страницы: 1.40 Kb
  • Запросов: 2
  • Время загрузки: 0.137 s

Даже при тестировании на локальном сервере видно, что скорость загрузки страницы увеличивается при использовании CSS спрайтов.
Читать дальше »

пятница, 6 февраля 2009 г.

Черно-белое фото на PHP 2

Еще один способ сделать черно-белое фото с помощью PHP. В данном случае используется специальный фильтр IMG_FILTER_GRAYSCALE.
function png2grayscale($filename){
$img = imagecreatefrompng($filename);
if ($img && imagefilter($img, IMG_FILTER_GRAYSCALE)) {
echo 'Image converted to grayscale.';
imagepng($img, $filename);
} else {
echo 'Conversion to grayscale failed.';
}
imagedestroy($img);
}

Читать дальше »

четверг, 5 февраля 2009 г.

Javascript. Пляски с ифреймом

Как получить содержимое iframe с помощью Javascript:

function getContentFromIframe(iFrameName){
var iFrame = document.getElementById(iFrameName);
var content = iFrame.contentWindow.document.body.innerHTML;
//Любые операции с содержимым iframe
}

И наоборот.
Из iframe выполнить функцию в «родительском» окне.

parentReloadImages = function(){
parent.xajax_reloadImages();
}

parent -- как раз и есть ссылка на родительское окно.
Читать дальше »

Черно-белое фото с помощью PHP

Marilyn MonroeМногим людям нравится черно-белое фото. Такое фото создает некий эффект «классики», «старомодности», зрелости. Vintage -- одним словом. Вы не знали? -- «раньше небо было голубее, солнце желтее...»*, а PHP и в помине не было.

*Это прекрасно видно на черно-белых снимках ;)
И тем не менее пример из недавней практики -- как сделать цветное изображение черно-белым на PHP с помощью библиотеки GD.
function grayscale($filename){
//Получаем размеры изображения
$img_size = GetImageSize($filename);
$width = $img_size[0];
$height = $img_size[1];
//Создаем новое изображение с такмими же размерами
$img = imageCreate($width,$height);
//Задаем новому изображению палитру "оттенки серого" (grayscale)
for ($c = 0; $c < 256; $c++) {
ImageColorAllocate($img, $c,$c,$c);
}
//Содаем изображение из файла Jpeg
$img2 = ImageCreateFromJpeg($filename);
//Объединяем два изображения
ImageCopyMerge($img,$img2,0,0,0,0, $width, $height, 100);
//Сохраняем полученное изображение
imagejpeg($img, $filename);
//Освобождаем память, занятую изображением
imagedestroy($img);
}

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

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

function show_grayscale($filename){
$img_size = GetImageSize($filename);
$width = $img_size[0];
$height = $img_size[1];
$img = imageCreate($width,$height);
for ($c = 0; $c < 256; $c++) {
ImageColorAllocate($img, $c,$c,$c);
}
$img2 = ImageCreateFromJpeg($filename);
ImageCopyMerge($img,$img2,0,0,0,0, $width, $height, 100);
//Отдаем полученное изображение браузеру
header("Content-type: image/jpeg");
imagejpeg($img);

imagedestroy($img);
}

Pro et Contra

..или «За и Против» обоих методов.
В первом примере:
  • (+) ваше приложение нагружается всего один раз -- когда вы сохраняете изображение;
  • (-) на сервере у вас хранятся черно-белые изображения. Цветных вы из них уже не сделаете.

Во втором примере:
  • (+) на сервере у вас хранятся цветные изображения. И вы всегда можете выбрать как их отобразить;
  • (-) ваше приложение нагружается каждый раз -- когда вы отдаете черно-белое изображение браузеру.

Читать дальше »