Обезфлэшивание шаблона для 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-c
s144-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 – мне интересно все. И так или иначе все это найдет отражение на страницах моего блога.