пятница, 27 ноября 2009 г.

Поворот!

Dell laptop 90°
под неожиданным углом
Пятничная медитация

И снова пятница. В качестве объекта для традиционной пятничной медитации сегодня выступает мое рабочее место.


Вот, новый поворот, и мотор ревёт,
Что он нам несёт, пропасть или взлёт,
Омут или брод?
И не разберёшь, пока не повернёшь
За поворот.
 

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

Сайдбар в шаблоне Blogger

Blogger logo Sidebar

Невероятно, но факт – существуют шаблоны Blogger и вовсе без боковой панели – «сайдбара» (sidebar). Лично я подозреваю, что основным инструментом создания таких шаблонов является клавиша Del, нажатая в нужном месте. Тем не менее нельзя полностью исключить исчезновение сайдбара как результат некоего Высшего Замысла.


В данном случае речь о ситуации когда нужды пользователя идут вразрез с замыслом Его Рукоблудия – дизайнера.


Как вернуть сайдбар в Blogger


За редкими исключениями, основной блок (main) и боковая панель (sidebar) располагаются внутри блока «содержимое» (content). Причем, main – с «прилипанием» к левому краю содержимого, sidebar – к правому. Или наоборот (зависит от ВЗ).


Блоки Main и Sidebar в шаблоне BloggerБлоки Main и Sidebar в шаблоне Blogger

Перед внесением любых изменений в шаблон, рекомендую сделать резервную копию.


  1. Перво-наперво, следует добавить HTML код сайдбара в шаблон. Внутри блока content (или content-wrapper), сразу за блоком main (main-wrapper):
    <div id='content-wrapper'>

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
    </div>

    <!-- Код для сайдбара -->
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Здесь будут виджеты сайдбара -->
    </b:section>
    </div>
    <!-- Конец кода сайдбара -->

    <!-- Следующий код убирает обтекание текста -->
    <div class='clear'> </div>

    </div> <!-- end content-wrapper -->

  2. С помощью CSS стилей шаблона Blogger задать боковой панели выравнивание справа: float: right;

  3. Важный момент (смотри картинку): Поскольку блоки main и sidebar расположены на одном уровне внутри контейнера content-wrapper, нужно доступную ширину разделить между ними. Можно попросту задать «от бадлы», а потом «доработать напильником». В общем случае будет выглядеть так:
    #main-wrapper {
    width: 500px;/* ширина основного блока */
    float: left;/* выравнивание по левому краю */
    }
    #sidebar-wrapper {
    width: 300px;/* ширина боковой панели */
    float: right;/* выравнивание по правому краю */
    }

  4. Сохранить шаблон.

Теперь всё на своих местах; порядок и благолепие.


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


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

воскресенье, 22 ноября 2009 г.

Рассылка или Уведомления?

Блондинка Мэнди
Ликбез

Чем отличается Рассылка от Почтовых уведомлений


Что же все-таки Почтовая рассылка, а что – Уведомления об обновлениях (на e-mail). В общих чертах.


  • Что я понимаю под словом «Рассылка».
    Это средство коммуникации или услуга, которую автор (в данном случае называется «Ведущий») предоставляет с помощью специального сервиса рассылок. Самые известные – subscribe.ru, content.mail.ru, maillist.ru. Как это выглядит в общем:

    1. Ведущий регистрируется на Сервисе и создает свою рассылку

    2. На своем сайте он уведомляет своих посетителей о том, что дескать, я тут (помимо всего прочего) рассылочку создал – подписывайтесь

    3. Каждое письмо в рамках Рассылки Ведущий составляет вручную и публикует на Сервисе

    4. После чего Сервис рассылает составленное письмо Подписчикам данной рассылки.

    5. + Если сервис «бесплатный», то он наверняка, – даже и не сомневайся, – прилепит к письму проплаченную рекламу. Реклама эта может быть как в виде текстовых ссылок, графических баннеров, так и в виде убогого «баннеро-ротатора» внутри iframe.

  • «Почтовые уведомления». В данном случае – о новых сообщениях в блоге.
    Тут все в разы проще. Как правило, это является дополнением к RSS-подписке. Как выглядит:

    1. Зарегистрировав свой RSS-feed на одном из сервисов, автор блога может подключить услугу рассылки обновлений RSS-фида блога по email. Сервисы, которые приходят на ум - это Feedburner и rss2email

    2. Как только автор добавляет новое сообщение в блог, обновляется и RSS-feed блога

    3. Сервис рассылок через определенные промежутки времени сканирует RSS-канал, или RSS-ленту, или RSS-feed блога (что одно и то же) на предмет обновлений

    4. Как только Сервис видит, что RSS-feed обновился, он по-быстрому облекает обновление в форму сообщения электронной почты и отправляет Подписчикам.

Дополнительно об RSS можно почитать в Википедии: RSS.


P.S. к теме «Вирусы приходят большими порциями» форума «Russian Blogger Help Group»


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

пятница, 20 ноября 2009 г.

Сексуальный CSS для блондинок

Блондинка Mandy в розовом белье - Dean Yeagle

Даже если у тебя сломалась клавиша Caps Lock, а печатать буквы, удерживая клавишу Shift мешает зажатый подмышкой чихуахуа, ты все равно можешь сделать текст в своем дневничке ярким и сексуальным.


В общем, таким как ты любишь!!!


Поможет тебе в этом простое правило стилей CSS. Не бойся слова «правило» – я все понятно объясню.


Главное правило CSS для блондинки


Нужное нам свойство стилей называется text-transform. Для включения «режима блондинки» задай этому свойству значение uppercase. Получившаяся строчка и будет нашим правилом text-transform:uppercase


Примерчик

печатаешь:

<p style="text-transform:uppercase">Девочки, сверкаем!!!</p>

получится:

Девочки, сверкаем!!!


Есть и другие значения свойства text-transform ...

  • capitalize – все слова с Большой буквы
    Блондинки в моде до тех пор, пока у мужчин все нормально с потенцией!!

  • lowercase – весь текст скучными маленькими буквами
    Умные мужчины спят с блондинками, а дураки сочиняют про них анекдоты

  • none – текст без изменений. как печатаешь, такой и получится
    Йа БлОндИнКо, йА тАк ПечаТаю паТаМуштА мнЕ таК нРаВицЦа!!!!!!!

..но они все для лузеров.


Второе правило CSS для блондинки


Можешь так же использовать правило font-variant: small-caps. Оно делает строчные буквы (маленькие) заглавными (большими) только уменьшенного размера.


Примерчик (еще один)

печатаешь:

<p style="font-variant: small-caps">Мужчина открывает рот, чтобы сказать; женщина - чтобы подумать</p>

получится:

Мужчина открывает рот, чтобы сказать; женщина - чтобы подумать


Но font-variant – это как-то чересчур мудрено. Ты ведь не хочешь показаться заумной ботанкой?


За сим на сегодня все. Цёмки!


© Твой Я (dotRB.blogspot.com) – большой ценитель блондинок :)


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

среда, 18 ноября 2009 г.

Квадратные изображения Picasa в Blogger

ATI Ruby Racing Avatar 150x150

Продолжаю тему изменения изображений в Blogger. Наконец я добрался до нарезки квадратных или «равносторонних» изображений. Или «аватарок» – кому как будет угодно.


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


ATI Ruby Racing вырубка квадратавырубка квадрата изображения

Это была теория, которую на самом деле можно было и не читать. Напомню для чего мы все это затеяли. Для того, чтобы изменять размеры загруженных изображений Blogger. В действительности, эти изображения уже созданы движком Picasa в процессе загрузки. А вот выбрать нужное можно изменив параметр URL изображения в атрибуте src:
<img src="http://2.bp.blogspot.com/.../s200/ati-ruby-racing-wallpaper-1600x1200.jpg" />


Размеры квадратных изображений


  • 150 пикселей – параметр s150-c

  • 144 пикселя – параметр s144-c
    ATI Ruby Racing Avatar 144x144

  • 64 пикселя – параметр s64-c
    ATI Ruby Racing Avatar 64x64

  • 32 пикселя – параметр s32-c
    ATI Ruby Racing Avatar 32x32

Комфортного имидж-постинга!


Бонус для RSS-подписчиков – полноразмерные (1600x1200) обои для Рабочего стола из примера. И подсказка, как получить ссылку на картинку в полный размер для иллюстрации в Blogger.


ATI Ruby Racing WallpaperATI Ruby Racing – обои для Рабочего стола 1600x1200

Если в посте на Blogspot блоггер не сохранил ссылку на полноразмерное изображение, то получить исходную картинку поможет параметр s1600. Разумеется, если изображение из альбома Picasa


Статьи по теме изображений Blogger и Picasa



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

среда, 11 ноября 2009 г.

Мини-сборка Ubuntu для Ruby on Rails

Rails TurnKey Linux

Проект TurnKey Linux представил подборку из 40 готовых минималистичных сборок Ubuntu 8.04.3 LTS для быстрого развертывания в Cloud-окружениях Amazon EC2 или для использования в качестве гостевых ОС в системах виртуализации VMware, Xen HVM, KVM или VirtualBox.


И в частности, – полностью работоспособную сборку с Ruby on Rails. Которая помимо стандартного ядра TurnKey, включает в себя следующее:


  • Поддержку SSL
  • Модули Webmin для конфигурирования Apache2 и MySQL
  • Конфигурацию Ruby on Rails
    • Развертывание посредством Phusion Passenger для Apache (mod_rails)
    • Предустановленный пример Rails приложения, расположенный в /var/www/railsapp
    • Установка баз данных MySQL для production, development и testing
  • RubyGems менеджер пакетов
    • APT и RubyGems обе являются системами управления пакетами и могут конфликтовать
    • Мы рекомендуем использовать RubyGems для управления Rails компонентами (называются gems), и APT для всего остального
    • Необходимые build-essentials пакеты включены для помощи в создании gems.

Сборка представлена в виде VM (221MB) и ISO-образа (195MB).


Узнал на OpenNews.


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

Иконки для закладок

Иконка – Закладка

Речь здесь пойдет не столько об иконках для закладок, а скорее об иконках для букмарклетовjavascript-закладок. А еще точнее – о тех представителях этого кнопочно-ссылочного семейства, которые помогают нести свет Истинного Знания в земли дикие, темные; ну или как минимум – продвигать твой блог в интернете.


Многие социальные сети, сервисы социальных закладок, рейтинги и «голосовалки» (мне определенно нравится это слово!) предоставляют свои собственные букмарклеты для облегчения добавления новых ссылок, статей и прочего бреда контента, который тебе вздумалось бы в них добавить. За что им, безусловно респект и уважуха, и глубочайшая наша признательность. Беда в том, что перетянутые на панель закладок эти букмарклеты ничем кроме текста не отличаются от своих товарищей и товарок. А текст съедает место, а закладок бывает много, а панель закладок не резиновая... и вообще я люблю картинки!


Панель закладок – букмарклетыБукмарклеты на панели закладок

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


Панель закладок – иконки букмарклетовИконки для букмарклетов на панели закладок

§ Как добавлять иконки к закладкам


Для добавления иконок к закладкам я использовал дополнение для Firefox Favicon Picker 3. После установки дополнения:

  1. ПКМ на букмарклете → «Свойства»
  2. В окне свойств закладки → “Browse...”
  3. Выбрать иконку для закладки из имеющихся на диске.


§ Где брать иконки


Я брал браузерные иконки (favicon) прямиком с их сайтов-источников. В качестве примера приведу twitter (кстати, мой twitter – jcden).

  1. На любой странице сайта ПКМ → «Исходный код страницы»
  2. Найди строку подключения фавикона – иконки сайта (favicon):
    <link href="http://a1.twimg.com/a/1257878623/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    Внутри атрибута href и будет путь к иконке.
    Замечание: если адрес фавикона задан как /favicon.ico – это означает, что полный путь к ней: адрес сайта/favicon.ico
  3. Открой иконку по заданному адресу и сохрани на диск.


Рекомендую сохранять иконки в какой-то определенной директории (папке). Так будет проще их находить и добавлять.


Упехов!


Бонус для RSS подписчиков – иконки сервисов из примера.



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

воскресенье, 8 ноября 2009 г.

Неисповедимы пути твои

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


Чак Норрис, Моисеев и ОбамаЧак Норрис, храни барак от бардака

Из статистики поиска Googleключевые слова, по которым посетители (не смотря ни на что) все же попадают на страницы данного блога. Орфография авторов сохранена во избежание проблем с Чаком Норрисом.


  1. c61b1b
    #C61B1B – цвет посещенной ссылки в данном блоге и по-совместительству рубиновый цвет.

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

  3. необычное применение обычным вещам
    История моего трудоустройства на первую официальную работу.

  4. воловиц-гот
    Спешу заверить: Воловиц по-прежнему сексуально-озабоченный ботан и ничто человеческое ему не чуждо. Поэтому, как говорится – не дождетесь!

  5. вёрстка футера с скруглённым концом
    Не знаю, не пробовал.

  6. облоко фотогравий
    Дутая газетная утка! Оптощебень по-прежнему рулит.

  7. что значит коварный
    Это про меня. Можно просто ссылку на профиль ставить. Кому нужны остальные 121 000 результатов в поиске?

  8. генератор веб 2.0
    Это тоже я отчасти.

  9. редко используемые слова
    Да, я часто их использую.

  10. чак норрис в профиле
    Это миф. Там еще один удар ногой с разворота.

  11. черно белое фото он и она больших размеров
    Ого!
    «Кинг-Конг и Годзилла
    Они к сожаленью –
    не пара, не пара, не пара»

  12. стим-готы
    На самом деле, это историческая нелепость. «Стим» – это где пар и электричество, а «готика» – где свечи и вши.

  13. футер в подвале
    Ибо наказан.

  14. куда вставить favicon
    В гуску! В гуску, дорогие мои страдальцы. На пятьдесят рублёв!

  15. шаблон коллективной жалобы
    на братской могиле жертв Чака Норриса

  16. пушкин аватарка 5
    Умница! Неси дневник.

  17. интернет вас забанил
    Нет, это Чак Норрис забанил интернет.

  18. детские приступления и их наказания
    педо-бандаж-садо-мазо?

  19. internet explorer 6 не понимает
    Предлагаю сделать официальным слоганом!

  20. преступление и наказание в картинках с комментариями
    УК в комиксах

  21. черно белое исследование
    И никак иначе!

  22. крошки для blogger
    Крошки – это для twitter

  23. как мы делаем бронеавтомобили
    Не знаю как вы, а мы просто натягиваем на них поношенную танковую броню.

  24. тюнинг на фоновый рисунок
    сразу после натягивания брони

  25. зеленая обувь
    да вы, батенька, – эстет!

  26. зелёные веб кнопки
    Кончились. Спрашивайте на следующей неделе – обещали подвезти.

  27. лепреконы картинки
    Да! – вот они и обещали.
    Вместе с лепреконами.

  28. фреймы в ruby
    Как всё сложно... Спроси лучше про анкеры в ассемблере.

  29. не открываются файлы rhtml
    Куево, – что я могу сказать? – Возможно, проблема во фреймах ruby.

  30. Здесь может быть твой ;)

Спасибо авторам за креативность!


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

пятница, 6 ноября 2009 г.

Популярное за год

чашка кофе

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


Итак, «Аччод»


Самое популярное содержание


  1. Webstream. Настройка ADSL роутера для нескольких компьютеров
    Несколько месяцев гостил у родителей своей бывшей спутницы жизни (как мне тогда казалось). Нужно было подключить компьютер и лэптоп к интернет через ADSL роутер. Разобрался, написал инструкцию. Пользователи webstream находят на моем блоге, поскольку жадный провайдер такой информации не предоставляет.

  2. Flash облако тегов
    Красивая штуковина от Роя Танка – самому в свое время понравилось. Но не везде удачно вписывается. Нашел пример вставки в блоге Аманды (той самой), перевел и поделился. Копирайты, ссылки и прочие низкие реверансы авторам соблюдены.

  3. Radio group value с помощью Javascript
    Как получить значение группы радио переключателей. Сам пое... полысел над этим вопросом пока не нашел решение на Prototype и на чистом Javascript. Перевел, выложил, копирайты сохранил.

  4. Ошибка Internet Explorer: Операция прервана
    В период бета-тестирования проекта так близка и знакома стала мне эта ошибка! Спасибо Интернет Эксплореру за неисчерпаемые темы для обсуждений!

  5. Flash облако тегов. Русский язык
    Красивости народу пришлись по душе. Но, как это часто бывает, возникли проблемы с локализацией.

Самое комментируемое блоге


  1. CSS колонки одинаковой высоты – 22
    Абсолютный лидер рейтинга! Благодаря Андрею из Италии.

  2. Статические страницы в Blogger – 16
    Переведенный, переосмысленный и адаптированный рецепт от the Idiot Girl.

  3. Футер Blogger в три колонки – 13
    Собственноручно разработанное дзюцу. Постигнутое посредством долгой практики дзен и одного мгновения сатори. Взлелеянное, выстраданное и пропущенное через мясорубку собственного опыта и воззрений.

  4. Friend Connect. Что? Как? – 12
    Статья про технологию, которая сначала возбудила интерес, затем пробудила сомнения, а после – вселила панику в ряды пользователей Blogger. Ура, товарищи!

  5. Настройка ADSL роутера для нескольких компьютеров – 11
    А это уже знакомый нам абсолютный лидер другого рейтинга.

Самые востребованные ключевые слова


  1. mp-bios bug: 8254 timer not connected to io-apic
    Стопроцентное совпадение! Пока Ubuntu будет выдавать вот это:
    MP-BIOS bug 8254 timer not connected to IO-APIC
    пользователи будут искать решение проблемы и находить правильное.

  2. eclipse php
    Это как раз именно тот прием рукопашного поиска, который вводит меня в интеллектуальный ступор. Профессионально PHP не занимаюсь уже года три. Так, бывает от случая к случаю. Да что уж там! – Буквально несколько секунд назад я считал, что у меня одна статья на эту тему. Оказывается, их две! Зато теперь я точно знаю, что меня в свое время очаровало: «режим эмуляции браузеров различных типов».

  3. css полупрозрачность
    Вот это было! И кроссбраузерная полупрозрачность, и проблема с альфа-каналами PNG в Internet Explorer, и даже иконка RSS подписки в блоге у меня раньше была полупрозрачная.

  4. rails избавиться от node
    Понятия не имею. Это второе неблокируемое «комбо». Хотя, возможно, это связано с темами когда я работал с XSLT на Rails.

  5. облако изображений flash
    «О, боже!..»

Страны и регионы


  1. Russia – 60,82 %
    Родина

  2. Ukraine – 23,83 %
    Тоже Родина

  3. Belarus – 2,90 %
    Ни разу в «сознательном» возрасте не был, но очень интересно побывать

  4. United States – 1,46 %
    Ни разу не был, но все равно бы съездил %)

  5. Israel – 1,43 %
    Это была Прокофьевна :)

Надеюсь, хоть кому-то кроме меня это было интересно ;)


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

среда, 4 ноября 2009 г.

CSS: замена таблицам

CSS document icon

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


Недавно наш новый командный tech writer начал доводить до ума проектный FAQ и попросил помочь ему избавиться от таблиц в разметке документа. Раз уж мы пытаемся уйти от «табличной верстки» в сторону «верстки дивной», то хорошо бы чтоб новые таблицы не появлялись там, где их не ждут. За несколько минут набросал ему HTML+CSS код для двухколоночного параграфа.


Изображение и текст в 2 колонкиДвухколоночный параграф

Код HTML: табличная верстка (было)

<table width="100%" border="0"><tbody>
<tr>
<td valign="top" width="50%">
<strong>Method 1 - By logging into your ***** account</strong>:
<ol><li>Go to My Account > My Account Page. This displays the Profile page.</li>
<li>In the Profile page, locate the My Account section.</li>
<li>Click on the Edit button. Enter the new Password as requested in the correct places.</li>
<li>Click on the Save button.</li></ol>
</td>
<td width="50%">
<img src="/images/change-password.gif" alt="change your password" height="202" width="212" hspace="12" align="right" border="0">
</td>
</tr></tbody></table>


Код HTML+CSS: дивная верстка (стало)

<div style="width:50%; float:left;">
<strong>Method 1 - By logging into your ***** account</strong>:
<ol><li>Go to My Account > My Account Page. This displays the Profile page.</li>
<li>In the Profile page, locate the My Account section.</li>
<li>Click on the Edit button. Enter the new Password as requested in the correct places.</li>
<li>Click on the Save button.</li></ol>
</div>
<img style="float:right; margin:0 0 0 12px; border-width:0;" src="/images/change-password.gif" alt="change your password" height="202" width="212" />
<div style="clear:both;"></div>


Разумеется, впоследствии я выделил стили для элементов в классы CSS и отправил писателю шаблонный HTML для использования.


Надеюсь, это окажется полезным. Успехов!


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

воскресенье, 1 ноября 2009 г.

1.11 Блогу – 1 год

1 year open

Круглая дата 1.11, три единицы, дающие четвертую – блогу исполнился 1 год. Первый пост в этом блоге «xsl-copy без родительского тега» был опубликован 1 ноября 2008 года и посвящен теме XSLT. За прошедший год было опубликовано 198 сообщений.


Подписчиков, по данным Feedburner 140, из них 56 участников Friend Connect. В Рейтинге Блогов Яндекс 77073.


Главные показатели
ПоказательЗначение
Яндекс ТИЦ10
Google PR3
Alexa Traffic Rank1,308,454

Как принято говорить в таких случаях – Есть куда расти :).


Это, кстати, был один из немногих случаев когда использование таблиц в сообщениях блога оправдано.


Главными источниками трафика (тут без каких-либо сюрпризов) являются поисковые системы – 56,86 %. А вот из поисковых систем со знаковым перевесом лидирует Google (82,10 %). Как говорится – что и требовалось доказать. К примеру, доля переходов с Яндекс составляет 17,06 %. Остальные поисковики имеют показатели на уровне статистической погрешности.


Upd: Показатели счетчика Liveinternet (с учетом воскресенья): 151/67/32.


Продолжение следует →


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