Обезфлэшивание шаблона для Blogger
Недавно переделал довольно симпатичный шаблон для Blogspot-блогов – sIFR 2.0.
Читать дальше »
Недавно переделал довольно симпатичный шаблон для Blogspot-блогов – sIFR 2.0.

Сменил баннер заголовка блога. По «телебатору» все чаще докладывают, что скоро Новый год, поэтому и тема для заголовка была выбрана новогодняя.
Посвящать целый пост смене какого-либо элемента дизайна, даже такого важного как заголовок блога, – это несколько скучно и, я бы даже сказал, – убого. Хотя кое кто, бывает, делает на этом рейтинг.
«Йоу, босота! Я сменил дизайн страницы ошибки 404! Давайте станцуем по этому поводу джигу!»
Поэтому будет бонус. А то и два.

Виджет Заголовок (Header) включен в шаблон блога по-умолчанию. С виду этот виджет «висит себе и жрать не просит», но он далеко не так прост, как может показаться. В этой статье я разобрал «по деталям» код виджета заголовка. Попутно рассмотрев такие конструкции шаблона как b:section, b:widget и b:includable. И сделав, пожалуй, самый подробный разбор виджета «Заголовок». Во всяком случае, этой информации пока нет даже в официальной справке.
В результате получилось очень много букв. Но все рассмотрено на конкретном примере, разобрано как целиком, так и по фрагментам, поэтому думаю будет не сложно.

Многие программисты уже используют Google Wave как средство командной разработки. В этом отношении, кстати, весьма полезный инструмент. Можно поделиться фрагментом сырого кода, прокомментировать или исправить проблемный код, предложить свой вариант. Рано или поздно каждый разработчик задает вопрос: «Как подключить подсветку синтаксиса в Google Wave»? Не так давно я нашел простое и удобное решение.

Случается, что число чертей или других сущностей (и не обязательно – зловредных) переваливает далеко за 1000+. В моем случае это было количество товаров в тестовом приложении. Ровно 40305. Отобразить такое большое число на странице, не поломав при этом верстку, бывает довольно проблематично. Поэтому я сегодня добавил пару методов для сокращения размера оного.

Хорошая новость для всех «орнитологов» блогосферы! Эту новость я уже упоминал в своем твиттере. Итак, Twitter и Friend Connect преодолели фазу «предварительных ласк» и теперь эти два социальных сервиса стали по-настоящему близки. Кратко: можно подключаться к сети Friend Connect используя свой аккаунт Twitter.
И снова пятница. В качестве объекта для традиционной пятничной медитации сегодня выступает мое рабочее место.
Вот, новый поворот, и мотор ревёт,
Что он нам несёт, пропасть или взлёт,
Омут или брод?
И не разберёшь, пока не повернёшь
За поворот.

Невероятно, но факт – существуют шаблоны Blogger и вовсе без боковой панели – «сайдбара» (sidebar). Лично я подозреваю, что основным инструментом создания таких шаблонов является клавиша Del, нажатая в нужном месте. Тем не менее нельзя полностью исключить исчезновение сайдбара как результат некоего Высшего Замысла.
В данном случае речь о ситуации когда нужды пользователя идут вразрез с замыслом Его Рукоблудия – дизайнера.
За редкими исключениями, основной блок (main) и боковая панель (sidebar) располагаются внутри блока «содержимое» (content). Причем, main – с «прилипанием» к левому краю содержимого, sidebar – к правому. Или наоборот (зависит от ВЗ).
Перед внесением любых изменений в шаблон, рекомендую сделать резервную копию.
<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 -->
float: right;#main-wrapper {
width: 500px;/* ширина основного блока */
float: left;/* выравнивание по левому краю */
}
#sidebar-wrapper {
width: 300px;/* ширина боковой панели */
float: right;/* выравнивание по правому краю */
}Теперь всё на своих местах; порядок и благолепие.
--
Организовать твою поклажу, – лэптоп, коммуникатор, бутерброд и два пакетика кофе, – помогут специальные средства. Например – сумки для ноутбуков или другого багажа.

Что же все-таки Почтовая рассылка, а что – Уведомления об обновлениях (на e-mail). В общих чертах.
я тут (помимо всего прочего) рассылочку создал – подписывайтесь
Дополнительно об RSS можно почитать в Википедии: RSS.
P.S. к теме «Вирусы приходят большими порциями» форума «Russian Blogger Help Group»

Даже если у тебя сломалась клавиша Caps Lock, а печатать буквы, удерживая клавишу Shift мешает зажатый подмышкой чихуахуа, ты все равно можешь сделать текст в своем дневничке ярким и сексуальным.
В общем, таким как ты любишь!!!
Поможет тебе в этом простое правило стилей CSS. Не бойся слова «правило» – я все понятно объясню.
Нужное нам свойство стилей называется text-transform. Для включения «режима блондинки» задай этому свойству значение uppercase. Получившаяся строчка и будет нашим правилом text-transform:uppercase
печатаешь:
<p style="text-transform:uppercase">Девочки, сверкаем!!!</p>
Девочки, сверкаем!!!
Есть и другие значения свойства text-transform ...
capitalize – все слова с Большой буквыlowercase – весь текст скучными маленькими буквамиnone – текст без изменений. как печатаешь, такой и получитсяМожешь так же использовать правило font-variant: small-caps. Оно делает строчные буквы (маленькие) заглавными (большими) только уменьшенного размера.
печатаешь:
<p style="font-variant: small-caps">Мужчина открывает рот, чтобы сказать; женщина - чтобы подумать</p>
Мужчина открывает рот, чтобы сказать; женщина - чтобы подумать
Но font-variant – это как-то чересчур мудрено. Ты ведь не хочешь показаться заумной ботанкой?
За сим на сегодня все. Цёмки!
© Твой Я (dotRB.blogspot.com) – большой ценитель блондинок :)

Продолжаю тему изменения изображений в Blogger. Наконец я добрался до нарезки квадратных или «равносторонних» изображений. Или «аватарок» – кому как будет угодно.
В отличие от горизонтальных и вертикальных размеров, заданных ориентацией самой картинки, равностороннее изображение создается следующим образом. Исходная картинка уменьшается до заданных размеров и из нее «вырубается» центральная часть.
Это была теория, которую на самом деле можно было и не читать. Напомню для чего мы все это затеяли. Для того, чтобы изменять размеры загруженных изображений Blogger. В действительности, эти изображения уже созданы движком Picasa в процессе загрузки. А вот выбрать нужное можно изменив параметр URL изображения в атрибуте src:<img src="http://2.bp.blogspot.com/.../s200/ati-ruby-racing-wallpaper-1600x1200.jpg" />
s150-cs144-c
s64-c
s32-c
Комфортного имидж-постинга!
Бонус для RSS-подписчиков – полноразмерные (1600x1200) обои для Рабочего стола из примера. И подсказка, как получить ссылку на картинку в полный размер для иллюстрации в Blogger.
Если в посте на Blogspot блоггер не сохранил ссылку на полноразмерное изображение, то получить исходную картинку поможет параметр s1600. Разумеется, если изображение из альбома Picasa

Проект TurnKey Linux представил подборку из 40 готовых минималистичных сборок Ubuntu 8.04.3 LTS для быстрого развертывания в Cloud-окружениях Amazon EC2 или для использования в качестве гостевых ОС в системах виртуализации VMware, Xen HVM, KVM или VirtualBox.
И в частности, – полностью работоспособную сборку с Ruby on Rails. Которая помимо стандартного ядра TurnKey, включает в себя следующее:
Сборка представлена в виде VM (221MB) и ISO-образа (195MB).
Узнал на OpenNews.

Речь здесь пойдет не столько об иконках для закладок, а скорее об иконках для букмарклетов – javascript-закладок. А еще точнее – о тех представителях этого кнопочно-ссылочного семейства, которые помогают нести свет Истинного Знания в земли дикие, темные; ну или как минимум – продвигать твой блог в интернете.
Многие социальные сети, сервисы социальных закладок, рейтинги и «голосовалки» (мне определенно нравится это слово!) предоставляют свои собственные букмарклеты для облегчения добавления новых ссылок, статей и прочего бреда контента, который тебе вздумалось бы в них добавить. За что им, безусловно респект и уважуха, и глубочайшая наша признательность. Беда в том, что перетянутые на панель закладок эти букмарклеты ничем кроме текста не отличаются от своих товарищей и товарок. А текст съедает место, а закладок бывает много, а панель закладок не резиновая... и вообще я люблю картинки!
И было бы неплохо эти букмарклеты уплотнить, не потеряв возможность их идентифицировать. Как? – убрать весь текст и заменить его иконками сервисов-источников. Если сервис предоставляет несколько яваскриптовых закладок для разных целей – возле иконки оставлять крохотную текстовую пометку.
Для добавления иконок к закладкам я использовал дополнение для Firefox Favicon Picker 3. После установки дополнения:
Я брал браузерные иконки (favicon) прямиком с их сайтов-источников. В качестве примера приведу twitter (кстати, мой twitter – jcden).
адрес сайта/favicon.icoРекомендую сохранять иконки в какой-то определенной директории (папке). Так будет проще их находить и добавлять.
Упехов!
Бонус для RSS подписчиков – иконки сервисов из примера.
Из статистики поиска Google – ключевые слова, по которым посетители (не смотря ни на что) все же попадают на страницы данного блога. Орфография авторов сохранена во избежание проблем с Чаком Норрисом.
Спасибо авторам за креативность!

В прошлом сообщении, посвященном годовщине (этого) блога, я рассматривал главные показатели и источники трафика. В этом посте, пожалуй, рассмотрю содержание... – популярное содержание. Что посетители ищут и находят, что больше читают, а что комментируют. И откуда они в конце концов «ползут на свет»?!!
Это была аллюзия к известному анекдоту про роддом.
Итак, «Аччод»
Надеюсь, хоть кому-то кроме меня это было интересно ;)
Есть хорошая рекомендация, а точнее – правило: Таблицы в HTML документе использовать только по прямому назначению. А именно – для отображения табличной информации. «Трудо-часы – трудо-доллары», «дебет-кредит-итого» и подобных структурированных данных. Все остальное, как говорится, – «от лукаваго».
Недавно наш новый командный tech writer начал доводить до ума проектный FAQ и попросил помочь ему избавиться от таблиц в разметке документа. Раз уж мы пытаемся уйти от «табличной верстки» в сторону «верстки дивной», то хорошо бы чтоб новые таблицы не появлялись там, где их не ждут. За несколько минут набросал ему HTML+CSS код для двухколоночного параграфа.
Код 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.11, три единицы, дающие четвертую – блогу исполнился 1 год. Первый пост в этом блоге «xsl-copy без родительского тега» был опубликован 1 ноября 2008 года и посвящен теме XSLT. За прошедший год было опубликовано 198 сообщений.
Подписчиков, по данным Feedburner 140, из них 56 участников Friend Connect. В Рейтинге Блогов Яндекс 77073.
| Показатель | Значение |
|---|---|
| Яндекс ТИЦ | 10 |
| Google PR | 3 |
| Alexa Traffic Rank | 1,308,454 |
Есть куда расти:).
Это, кстати, был один из немногих случаев когда использование таблиц в сообщениях блога оправдано.
Главными источниками трафика (тут без каких-либо сюрпризов) являются поисковые системы – 56,86 %. А вот из поисковых систем со знаковым перевесом лидирует Google (82,10 %). Как говорится – что и требовалось доказать. К примеру, доля переходов с Яндекс составляет 17,06 %. Остальные поисковики имеют показатели на уровне статистической погрешности.
Upd: Показатели счетчика Liveinternet (с учетом воскресенья): 151/67/32.
Не секрет, что многие владельцы блогов на платформе Blogger предпочитают скрывать навигационную панель (navbar). Дабы не портила дизайн шаблона. Действительно, navbar далеко не всегда удачно вписывается в существующий макет. Понимая это, команда разработчиков Blogger добавила два новых стиля навигационной панели – «Прозрачная светлая» (Transparent Light) и «Прозрачная темная» (Transparent Dark).
Как выглядит, покажу на примере блога Vault-Tec, который зачастую выступает у меня тестовой лабораторией :).
Настроить навигационную панель по своему выбору можно в разделе Дизайн – Элементы страницы
Опрятного Приятного тюнинга!
Для информирования о событиях важных и не очень, интересных и не особо, общественных и частных, онлайновых и реальных, локальных и мировых существует гаджет Event (Событие) для Blogger. Подробности установки и настройки – далее по тексту.
Для установки гаджета «Событие» нужно перейти на вкладку Дизайн и щелкнуть ссылку «Добавить гаджет». Скрывается он в группе Избранные (featured), либо можно добавить гаджет по его URL используя пункт Добавьте свой собственный (add your own).
http://www.google.com/ig/modules/calendar/socialevent/bloggerevent.xml
Какую бы последовательность ты не избрал, это должно привести тебя к окну настройки гаджета Event:
Здесь тебе предстоит ввести Заголовок (Title) и Описание (Description) события, указать дату и время начала и окончания, Местоположение (Location) и Адрес явочной квартиры. Время указывается как во всех нормальных странах – в 24-часовом формате, дата задается в виде: гггг-мм-дд. И не делай заголовок и описание слишком длинными, а то получишь ошибку 414: Request-URI Too Large.
Гаджет позволяет твоим читателям присоединиться к событию, а также видеть кто из их друзей, использующих FriendConnect тоже заявил об участии. В дополнение, любой имеющий аккаунт в Google Calendar может поместить данное событие в свое расписание в календаре Google.
Так же ты можешь разместить несколько событий в блоге и, задав им разные заголовки или ID, отслеживать присоединившихся к каждому «ивенту» в отдельности.
Переврать новость по-своему можно используя официальный источник (на английском).
--
Стартовал конкурс для SEO оптимизаторов сладкий сеопультенок, где можно побороться за главный приз, а можно просто поучаствовать.
Сегодня, открыв RSS агрегатор, не обнаружил своих подписок. Никак новые секретные разработки от Google? Оказалось все просто – в Google Reader добавился новый элемент Explore. Точнее все тот же старый добрый блок «Обзор» переместился с главной страницы ридера на боковую панель (сайдбар). Смотри скриншот.
Как и в случае с ранее упоминавшейся функцией Send To, обновленный макет ридера доступен только в англоязычной версии. Как включить? В настройках Google Reader выбери Язык: Английский – English.
Такие вот новые функции старых вещей. Думаю, многие найдут это полезным ;)
--
Тех кто занимается строительством заинтересует предложение поставок труб бу, труб восстановленных и стальных лежалых труб от поставщика металлопроката.
Изначально так сложилось, что для контроля версий я использовал Tortoise SVN. Но после аврального переезда на новую систему пришлось подыскивать новый SVN клиент, поскольку работа с консоли меня никак не прельщала. Выбор пал на RapidSVN. Привыкший к удобству «Тортойза», я не ожидал подвоха... и первый же коммит (svn commit) подарил много радостей всей команде. В итоге я задался вопросом как заставить SVN игнорировать выбранные файлы?
Команда svn propsetsvn propset свойство маска_файлов директория
Например, находясь в директории конфигурации проекта trunk/config:
svn propset svn:ignore development.* environments
Рекомендуется по возможности использовать другую команду svn propedit
svn propedit svn:ignore environments
В открывшемся редакторе свойств, можно задать несколько масок (каждая с новой строки):
development.*
test.rb
Для удаления свойств со всей директории используют команду svn propdel
svn propdel svn:ignore environments
Проделав необходимые манипуляции и жмакнув кнопку “Commit” с отвисшей челюстью проводил отправленный в базу «проигнорированный» development.rb
Йопт! В чем дело? Почему она игнорирует мое игнорирование?!! :)

Минут пять покурив SVN Book, я нашел причину. Оказывается, поддержка масок пропуска файлов действует только на unversioned файлы.
На данный момент остановился на варианте коммита отдельных директорий:
svn commit app public -m "fixes ticket #1234"
На тему другой системы контроля версий – Git
Бонус для RSS подписчиков – SVN wallpaper
В блоге охотно делюсь примерами как из собственного опыта веб-разработки, коей посвятил уже более 5 лет своей жизни, так и просто интересными находками.
Будь то программирование или верстка, дизайн или настройка шаблонов Blogger – мне интересно все. И так или иначе все это найдет отражение на страницах моего блога.