Блог Антона Соткова » перевод http://archive.amaxskv.com Fri, 09 Dec 2011 08:33:49 +0000 en hourly 1 http://wordpress.org/?v=3.3 Paparazzi! http://archive.amaxskv.com/32/ http://archive.amaxskv.com/32/#comments Sun, 06 Apr 2008 19:30:49 +0000 Антон Сотков http://amaxskv.com/?p=32 Paprazzi!А вам когда-нибудь нужно было сделать полный скриншот веб-страницы? Гуляя по сети, я наткнулся на замечательное приложение под названием Paparazzi!, как раз выполняющее это несложное задание, причем делающее это быстро, просто, красиво и удобно. Дело было вечером и делать было нечего (ну почти), поэтому я заодно взял, да и перевел его.

Скачивайте (русифицированная версия) и пользуйтесь. Пример скриншота.

]]> http://archive.amaxskv.com/32/feed/ 5 Создаем свою тему iGoogle http://archive.amaxskv.com/20/ http://archive.amaxskv.com/20/#comments Thu, 27 Mar 2008 07:37:36 +0000 Антон Сотков http://amaxskv.com/20/ 15 января на официальном блоге Google был анонсирован Google Themes API. Тогда же была опубликована документация, благодаря которой каждый пользователь iGoogle может создать свою собственную тему. Давайте пройдемся по документации и узнаем побольше об этом событии.

Что такое тема?

Тема — ваш собственный дизайн для страницы iGoogle. Тема описывается через XML, содержащий такие параметры для страницы, как, наприме, фон и цвет текста. Тема может быть всего лишь простой цветовой настройкой для «шапки» и логотипа iGoogle, или содержать множество картинок и способность меняться, например в зависимости от времени суток или года. Каждая из этих страниц, например для вечера или дня, назвается оболочкой.

Каждая оболочка отображается в спецификации темы через <ConfigMap> (карту настроек). По существу, тема — это собрание карт настроек.

Вот пример простой темы, имеющей всего одну оболочку, описанную в теге <ConfigMap>: <?xml version="1.0" encoding="UTF-8" ?> <ConfigMaps> <ConfigMap type="Skin"> <Meta name="title">Simple Theme</Meta> <Meta name="description">Simple theme example.</Meta> <Meta name="author">Katie M.</Meta> <Attribute name="header.background_color">teal</Attribute> <Attribute name="header.logo">white</Attribute> <Attribute name="header.link_color">#ffffff</Attribute> <Attribute name="header.text_color">#ffffff</Attribute> <Attribute name="gadget_area.gadget.body.link_color">#8B4513</Attribute> <Attribute name="gadget_area.tab.unselected.text_color">gray</Attribute> </ConfigMap> </ConfigMaps>

Вы можете посмотреть подробной список всех аттрибутов на странице справки.

Создание и тестирование тем

XML файл может быть создан в любом текстовом редакторе, например, в Блокноте.

Чтобы протестировать тему, вы должны разместить XML файл и изображения на публичном сервере, например, на Google Gadgets Editor или Google Code. После того, как ресурсы размещены, вы можете начать тестирование, добавив ?skin=[URL темы] в конце ссылки iGoogle, например так: http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xml

Основные шаги

Тема для iGoogle состоит из изображений для «шапки» и «подвала» и стилей, которые вы описываете в шаблоне XML для разных частей страницы. Весь процесс создания темы можно разделить на три шага:

  • Создание визуального дизайна
  • Заполнение шаблона темы
  • Загрузка темы на iGoogle

Эти три шага будут подробнее описаны далее.

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

  • Отсутствие трейдмарков, копирайтов, логотипов вне предназначенной для этого площади
  • Все логотипы iGoogle, ссылки и текст на странице должны оставаться полностью видимыми и используемыми
  • Вы не должны изменять, удалять, или пренебрежительно относится к логотипу iGoogle
  • Google оставляет за собой право выбирать темы, которые будут приняты и добавлены в набор

Создание визуального дизайна

Страница iGoogle состоит из трех секций: «шапки», области для контента и «подвала».

Помните, что тема может меняться в течении дня, поэтому не останавливайтесь после того, как сделаете один дизайн — создайте динамическую тему.

Создание «шапки»

«Шапка» — это графическая область вверху iGoogle. Она содержит в себе логотип iGoogle, панель поиска, вкладки, текст, ссылки и тому подобное. Например, вот «шапка» для темы «чайный домик»:

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

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

  • Фоновый цвет. Это самый нижний слой.
  • Изображение из плиток. «Шапка» кажется пользователю одной картинкой, однако на самом деле она составлена из плиток. Сначала ложится фоновое изображение, остальные выравниваются по краям окна браузера. Помните, что набор плиток должен быть идентичен и выровнен для создания эффекта одного изображения.
  • Изображение темы. Помещается в центр «шапки», может быть как прозрачным, так и непрозрачным. Если оно непрозрачно, то должно совпадать с лежащими ниже плитками.
  • Логотип и панель поиска, ссылки и текст.

Изображение в «шапке» должно быть 175 пикселей в высоту и, по крайне мере, 640 пикселей в ширину. Вы можете сделать его настолько широким, насколько захотите, главное правило — размер меньше 40 КБ (примечание: меньшие изображения, естественно, загружаются быстрее и такие темы обычно более популярны). Это изображение зафиксировано по центру за логотипом iGoogle, панелью поиска, ссылками и вкладками.

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

  • Заполнение фона таким же цветом, в который переходит изображение по краям
  • Использование большей плитки для фона и добавление изображения поверх
  • Одно фоновое изображение и плитка с каждой стороны

Чуть подробнее опишем эти техники:

Заполнение фона таким же цветом

По мере того, как страница становится шире, фоновый цвет покажется по сторонам от вашей картинки. Чтобы сделать переход незаметным, изображение должно переходить в фоновый цвет по краям, например:

Использование плитки для фона и добавление полупрозрачного центрального изображения

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

Одно фоновое изображение и плитка с каждой стороны

Этот вариант похож на второй, разница в том, что в центре одно изображение. Для получения невидимого перехода правый край «шапки» и левый плитки (а также левый край «шапки» и правый плитки) должны подогнаны друг к другу. Чтобы сделать переход незаметным, вы должны убедиться, что плитка полностью умещается за «шапкой»: если «шапка» 900 пикс шириной, то плитка должна быть также 900 пикс шириной (умещается один раз), 300 пикс (умещается 3 раза) и так далее: Фон чайного домика: Плитка, которая будет добавляться с каждой стороны по мере увеличения размера окна:

Выбираем цвета

API позволяет вам выбирать цвет текста и ссылок в «шапке» (header), «подвале» (footer), вкладках (tabs) и области для контента (gadget area). Этот пример устанавливает белый цвет для ссылок и текста в «шапке» и красный для ссылок в области для контента: <Attribute name="header.link_color">white</Attribute> <Attribute name="header.text_color">white</Attribute> <Attribute name="gadget_area.gadget.body.link_color">red</Attribute>

Ссылки

Все ссылки должны быть видимы на странице и иметь один цвет. Они включают в себя:

  • Расширенный поиск
  • Настройки поиска
  • Языковые инструменты
  • Выберите тему
  • Добавить материал »
  • Добавить вкладку

Простой текст

Выберите цвет для текста на странице, включая:

  • Выберите тему (после того, как выбор был сделан)

Выбираем логотип iGoogle

Каждая тема должна содержать логотип iGoogle, и он должен быть хорошо различим на странице. Для выбора логотипа используйте аттрибут header.logo. Он может принимать следующие значения:

  • original — оригинальный многоцветный логотип iGoogle, но с прозрачным фоном. Если вы не укажете логотип, то будет использован оригинальный логотип с белым фоном, что не подойдет в большинстве случаев.
  • beveled_original — оригинальный многоцветный логотип iGoogle, объемный.
  • color — один из поддерживаемых логотипом цветов.
  • beveled_color — один из поддерживаемых цветов с объемной границей.

Вот лишь несколько примеров:

Белый плоский логотип: <Attribute name="header.logo">white</Attribute> Желтый объемный логотип: <Attribute name="header.logo">beveled_yellow</Attribute> Желтый плоский логотип: <Attribute name="header.logo">yellow</Attribute> Оригинальный объемный логотип: <Attribute name="header.logo">beveled_original</Attribute>

Создание вкладок

API позволяет вам изменять следующие характеристики вкладок:

  • Цвет текста выбранной вкладки
  • Цвет фона выбранной вкладки
  • Цвет текста не выбранной вкладки. Все не выбранные вкладки имеют один цвет текста.
  • Цвет фона не выбранной вкладки. Все не выбранные вкладки имеют один цвет фона.
  • Цвет контура для выбранных и не выбранных вкладок. Все вкладки имеют один цвет контура.

Например, этот код: <Attribute name="gadget_area.tab.selected.background_color">white</Attribute> <Attribute name="gadget_area.tab.selected.text_color">blue</Attribute> <Attribute name="gadget_area.tab.unselected.background_color">gray</Attribute> <Attribute name="gadget_area.tab.unselected.text_color">black</Attribute> <Attribute name="gadget_area.tab.border_color">navy</Attribute> создаст такие вкладки:

Конструирование области для контента

API позволяет вам изменять следующие характеристики области для контента (одинаковы для всех гаджетов):

  • Цвет заголовков гаджета
  • Цвет фона для заголовка
  • Цвет контура гаджета
  • Цвет ссылок внутри гаджета

Например, этот код: <Attribute name="gadget_area.gadget.body.link_color">#00B366</Attribute> <Attribute name="gadget_area.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.border_color">#007D48</Attribute> <Attribute name="gadget_area.gadget.header.background_color">#BFFFE4</Attribute> <Attribute name="gadget_area.gadget.header.text_color">#00B366</Attribute> создаст гаджеты с таким внешним видом:

Использование своих значков для кнопок

Вы можете использовать изображения размером 12х12 пикселей, чтобы заменить стандартные кнопки гаджетов на сделанные вами или какие-то из набора Google.

API позволяет вам предоставить следующие значки:

  • Значок меню (также используется для активной вкладки).
  • Значок меню при наведении (также используется для активной вкладки).
  • Значок сворачивания
  • Значок сворачивания при наведении
  • Значок разворачивания
  • Значок разворачивания при наведении
  • Значок закрытия
  • Значок закрытия при наведении

Например: <Attribute name="gadget_area.menu_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_menu.gif</Attribute> <Attribute name="gadget_area.menu_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_menu_hover.gif</Attribute> <Attribute name="gadget_area.delete_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_delete.gif</Attribute> <Attribute name="gadget_area.delete_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_delete_hover.gif</Attribute> <Attribute name="gadget_area.collapse_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_collapse.gif</Attribute> <Attribute name="gadget_area.collapse_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_collapse_hover.gif</Attribute> <Attribute name="gadget_area.expand_icon.image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_expand.gif</Attribute> <Attribute name="gadget_area.expand_icon.hover_image.url">http://igoogle-themes.googlecode.com/svn/trunk/ffaa00_expand_hover.gif</Attribute>

Создание «подвала»

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

У вас есть три варианта конструирования «подвала»:

  • Использование белого, или другого фонового цвета Это обеспечит быструю загрузку страницы и простой дизайн. Например, этот код установит серый цвет фона: <Attribute name="footer.background_color">gray</Attribute>
  • Использование только фонового изображения Одна плитка, заполняющая весь «подвал» — достаточно просто, и тоже быстро загружается. Как и для изображения в «шапке», удостоверьтесь в том, что совпадают края. Изображение должно быть 140 пикселей в высоту.
  • Фоновое изображение и плитки по сторонам от него Изображение в «подвале» должно быть 140 пикселей в высоту и, по крайне мере, 640 пикселей в ширину. Вы можете сделать его настолько широким, насколько захотите, главное правило — размер меньше 20 КБ (примечание: меньшие изображения, естественно, загружаются быстрее и такие темы обычно более популярны). Это изображение зафиксировано позади ссылок и текста. Правила насчет переходов те же.

Цвет текста и ссылок может быть изменен, например: <Attribute name="footer.text_color">black</Attribute></code> <Attribute name="footer.link_color">white</Attribute>

Создание динамической темы

Любые элементы темы могут меняться в зависимости от времени дня, погоды, и тому подобного. Создавайте столько оболочек, сколько захотите.

Каждая из сменяющих друг-друга оболочек должна иметь описание всех аттрибутов. Тег <Trait> используется для задания временных промежутков каждой конкретной оболочки: <ConfigMap type="Skin"> <Trait name="TimeOfDay">12am-1am</Trait> ...аттрибуты... </ConfigMap> <ConfigMap type="Skin"> <Trait name="TimeOfDay">1am-2am</Trait> ...аттрибуты... </ConfigMap> ...

Загрузка темы

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

Обновление темы

Если вы сделали некоторые изменения в тему, которая уже загружена, и хотите обновить её, всего лишь загрузите её еще раз, используя тот же URL, что и раньше. Она будет обновлена через 1-2 недели.

]]> http://archive.amaxskv.com/20/feed/ 1 История Tux’а, талисмана Linux http://archive.amaxskv.com/19/ http://archive.amaxskv.com/19/#comments Thu, 27 Mar 2008 07:31:00 +0000 Антон Сотков http://amaxskv.com/19/ Листая в очередной раз Digg, я наткнулся на очень интересную статью о пингвине Tux. Русская википедия весьма скудна сведениями насчет истории создания этого талисмана и логотипа, зарубежная может предложить чуть больше информации, но вот со статьёй на SJBaker.org не сравнится ни одна из них. Поэтому я решил рассказать вам интереснейшую историю пингвина.

Как все начиналось

Все началось в 1996 году, когда в списке рассылки разработчиков ядра Linux появились первые разговоры о талисмане. Среди множества предложений можно было выделить либо пародии на логотипы других ОС, либо стандартных зверей типа орлов или акул. Дискуссии несколько утихли после того, как Линус Торвальдс случайно омолвился о том, что ему нравятся пингвины. Было несколько попыток нарисовать пингвинов в разных позах, после чего поступило предложения логотипа в виде пингвина, держащего Землю. Вот ответ Линуса на попытки Дэйла Шитза нарисовать такой логотип: Re: Прототип логотипа Linux. Линус Торвальдс (torvalds@cs.helsinki.fi) Четверг, 9 мая 1996 17:48:56 +0300 (EET DST)

Кто-то объявил конкурс на логотип, наверное люди могут уже присылать свои предложения…

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

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

Все еще со мной? Отлично…

Возвращаясь к пингвинам (таким симпатичным) — «довольный» может значить только две вещи: только что потрахался или наелся селедки. Поверьте мне, я эксперт в пингвинах, иных значений быть не может.

Мы конечно не хотим, чтобы наш пингвин был пошлым (может быть и хотим, но это не в наших правилах, поэтому не будем), значит выберем вариант с «наполненным до краев селедкой».

Итак, вы должны представлять пухлого (*), сидящего и объевшегося пингвина, только что рыгнувшего. Он сидит с блаженной улыбкой— ведь жизнь хороша, когда ты только что съел десяток килограммов сырой рыбы и чувствуешь новую отрыжку на подходе.

(*) Не толстого, но должно быть сразу понятно, что он слишком пухлый, чтобы стоять.

Если вы не можете представить себя кем-то, приходящим в восторг от сырой рыбы, замените её шоколадом или чем-нибудь еще, но общая идея должна быть понятна.

Отлично, мы представляем себе милого, симпатичного, прятного, пухлого пингвина, только что объевшегося селедкой. Все еще со мной?

Тут начинается самая сложная часть. С этой картиной, четко выгравированной в вашем сознании, нужно набросать её стилизованную версию. Не много деталей — всего лишь черный контур кистью (вы точно знаете этот эффект, когда ширина линии меняется). Для этого нужен талант. Покажи людям такую картинку, и они должны сказать [сверх-сладкий голос]: «Ммм, какой милый пингвинчик, держу пари он только что объелся селедки…», а маленькие дети будут подпрыгивать и визжать «Мамочка, мамочка, можно и мне такого же?».

Затем можно будет сделать еще одну версию, побольше, более детализированную (и, может быть, склонившегося на земной шар, но я не думаю, что стоит делать «мачо-пингвина», ассоциируемого с атлантом или чем-то подобным). Эта версия может играть в хоккей с дьяволенком FreeBSD, или делать что-нибудь еще. Однако сам пингвин, в одиночку, будет логотипом, а все остальные будут использовать его наподобие актера в сценках.

Линус

И все-таки, почему пингвин?

Линус ответил нам и на этот вопрос:

Re: Лиготип Linux Линус Торвальдс (torvalds@cs.helsinki.fi) Воскресенье, 12 Мая 1996 09:39:19 +0300 (EET DST)

Хм… Мне просто больше нечего сказать…

«Линусу нравятся пингвины». Так оно и есть. В Linux Journal однажды даже был такой заголовок (в Австралии меня укусил пингвин — без шуток). Они забавные.

Причины, почему использовать пингвина в качестве логотипа? В общем то, причин нет. Но логотип не должен что-то значить — важны ассоциации. И пингвин — не худшая ассоциация для Linux.

Пингвин в качестве логотипа также дает большую свободу тем, кто желает использовать относящийся к Linux материал: использование пингвина вместо чего-то четко выбранного (треугольника, или просто надписи «Linux 2.0», или какой-то еще абстрактной вещи) позволяет изменять логотип, при этом сохраняя его узнаваемость.

Таким образом можно иметь на обложке CD фотографию настоящего пингвина, и люди все равно поймут вас. Или вы можете взять пингвина делающего что-то более конкретное (печатающего текст — на обложке WP Linux CD).

Сравните это с более абстрактым логотипом (возьмем, например, значок Windows — неплохое лого само по себе). Сложно сделать что-нибудь с подобным логотипом. Он просто существует сам по себе.

В любом случае, загляните на http://www.isc.tamu.edu/~lewing/linux/ для нескольких отличных примеров.

Линус

Который из них?

Я тоже советую заглянуть по ссылке из письма Линуса — там вы найдете общепринятый вариант Tux’а, нарисованный Лэрри Эвингом:

Также он создал и несколько других версий, которые находятся на отдельной странице.

Однако, не Tux был выбран Linux-сообществом в качестве логитипа Linux. Он проиграл вот этому сопернику, творению Мэтта Эриксона:

Пингвин получил 541 голос — против 785 у победителя. Но демократия в этом случае оказалась бессильна, и Линус отстоял свое детище. Конечно, во имя справедливости, можно назвать Tux’а официальным талисманом, а изображение Мэтта Эриксона — логотипом Linux. Хотя пингвин, несомненно, гораздо более известен (я, например, увидел лого «Linux 2.0» в первый раз в своей жизни при написании этой статьи).

 

Почему «Tux»?

Большинство предполагает, что Tux — сокращение от «Tuxedo», ну или просто смокинга, если перевести на русский. Все знают, что пингвины «носят смокинги», и это отлично объясняет имя нашего героя. Однако, Якоб Пун провел небольшое расследование, и выяснил, что на самом деле все обстоит несколько иначе.

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

Давайте дадим имя пингвину! (was: Re: Linux 2.0 выпущен…) Henning Schmiedehausen (barnard@forge.franken.de) 10 Июня 1996 16:18:56 +0200

torvalds@cs.helsinki.fi (Линус Торвальдс) написал: > Итак, я сделал решительный шаг, и Linux-2.0 выпущен. > Я даже потрудился, чтобы написать бессмысленное объявление об этом > на коле (*), поэтому идти на попятный уже поздно.

Что ж, назовем релиз «Электризованным пингвином на коле»? ;-)

В общем, поздравляю с этим достижением.

Пожалуй, стоит начать конкурс «Дадим имя пингвину, пока не вернулся Линус».

Я, конечно, голосую за «Гомера» :-)

Ciao Henning

(*) Примечание: COLA — сокращенное название новостной группы comp.os.linux.announce.

Ответ на это письмо, похоже, содержит первое упоминание имени «Tux»: Re: Давайте дадим имя пингвину! (was: Re: Linux 2.0 выпущен…) James Hughes (jamesh@interpath.com) Понедельник, 10 Июня 1996 20:25:52 -0400

(T)orvolds (U)ni(X) –> TUX! Отчасти это объясняет происхождение имени, однако смокинг, скорее всего, тоже причастен к этой неправильной аббревиатуре. Было еще несколько шуточных предложений, однако тема исчерпала себя и имя Tux привязалось к пингвину навсегда.

Linnie?

Возможно, кто-то из нас слышал (или видел) это имя где-нибудь. Очень немногие называют пингвина «Линни», но они — вымирающий вид.

Настоящий живой Tux?

Да, где-то на свете жил (а может еще и живет) пингвин по имени Tux — это был подарок Линусу на день рождения от группы энтузиастов из Британии: они стали спонсорами одному из пингвинов в зоопарке Бристоля.

Tux и QuickTime

У QuickTime одно время был логотип, удивительно похожий на Tux’а. Его модифицированные версии (без лого QuickTime) до сих пор используются в Linux сообществе.

Я буду благодарен, если подскажете, где можно найти чуть больше информации о пингвине от Apple, не помешало бы добавить ее в статью.

Творчество фанатов

Самый молодой фанат Linux? :-) Эрик Харшбаргер собрал этого 60-сантиметрового Tux’а из лего. На его сайте можно найти еще несколько картинок пингвина, а также другие его скульптуры, например чертенка BSD. Сотрудники IBM нарисовали эти рекламные картинки на тротуарах Нью-Йорка и Сан-Франциско. «Мир, любовь, Linux». Все закончилось тем, что им пришлось заплатить штрафы и заниматься общественной работой в виде смывания этих «графитти».

ASCII

Существует множество «рисунков» Tux’а из букв. Отдельно могу выделить гигантское 250-цветное изображение, просто поражающее воображение.

Tux и Microsoft

Одно время в Германии шла такая реклама:

Подпись под пингвинами: «У открытой ОС есть не только преимущества».

Не совсем понятно, что хотели показать реламисты Микрософта этой картинкой. Похоже, получилось, что Linux очень легко настраивать согласно своим потребностям :-)

]]> http://archive.amaxskv.com/19/feed/ 11