Блог Антона Соткова » дизайн http://archive.amaxskv.com Fri, 09 Dec 2011 08:33:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 AJAX-комментарии в вашем блоге http://archive.amaxskv.com/56/ http://archive.amaxskv.com/56/#comments Sun, 20 Apr 2008 05:48:11 +0000 Антон Сотков http://amaxskv.com/?p=56 Где-то неделю назад взбрело мне в голову сделать себе AJAX-комментарии. А видел их в одной из тем, что перепробовал в поисках дизайна, который бы мне понравился. Уверен, что вы тоже найдете несколько различных решений. У всех из них одна проблема — их сложно «прикручивать» к шаблону (хотя возможно, свою роль сыграла моя лень разбираться в этом).

Правда через некоторое время нашелся отличный плагин, работающий буквально «с пол-пинка»: вы всего лишь копируете его в папку Plugins, а затем активируете в панели управления WordPress. Но, как оказалось, проблемы все же были: он не работал с WP 2.5. Точнее говоря, он работал, но после того, как вы запостите комментарий, у вас появлялось две формы. Я написал письмо автору: «Будет ли обновление?». Ответ пришел буквально через час: «Да, будет. Я постараюсь закончить его на этой неделе.»

Итак, вот неделя подошла к концу, и сегодня с утра я обнаружил в почте письмо от Майка Смулина (разработчика), с прикрепленной обновленной версией. Плагин действительно отлично работает, в чем вы можете убедиться, прокомментировав эту или любую другую запись у меня в блоге.

]]> http://archive.amaxskv.com/56/feed/ 38 Значки для WebClip http://archive.amaxskv.com/44/ http://archive.amaxskv.com/44/#comments Sun, 13 Apr 2008 12:19:43 +0000 Антон Сотков http://amaxskv.com/?p=44 WebСlipsВ предыдущем посте я омолвился о значках веб-приложений для iPhone и iPod Touch. Женя Киров тоже захотел заполучить иконку для своего (скорее общего) «Лунапарка». Решение оказалось простым и красивым — не нужно рисовать закругленные углы или красивый отблеск — все гораздо удобнее (еще бы, это же Apple :).

Все, что вам потребуется — иконка размером 57×57 пикселей, однако если в этом размере иконка кажется вам несколько размытой, попробуйте увеличить ее до 158×158 пикселей. Затем остается лишь положить её в корневую папку вашего сайта, предварительно назвав именем apple-touch-icon.png. Плюс к тому, есть и другой путь на тот случай, если вам захочется, например, чтобы значок находился другой папке. В этом случае пропишите в <head> вашего сайта следующую строку:

<link rel="apple-touch-icon" href="(адрес картинки)" />

Все готово! Можете заходить на сайт с iPhone и добавлять закладку на рабочий стол.

]]> http://archive.amaxskv.com/44/feed/ 1 Встречают по… http://archive.amaxskv.com/42/ http://archive.amaxskv.com/42/#comments Sun, 13 Apr 2008 11:11:09 +0000 Антон Сотков http://amaxskv.com/?p=42 Прочитал тут заметку Руслана Валиулина в Haywired, и подумал, что я бы мог несколько дополнить и расширить её, например, в сторону iPhone. Я не буду углубляться, описывая мучения разработчкиков, вынужденных писать приложения без SDK (это, правда, скоро изменится), я останусь на поверхности. Речь пойдет о значках, «иконках» программ.

Действительно, для меня очень многое значит то, как отображается то или иное приложения на SpringBoard. Звучит, может, и глупо, но как уж есть. Mac OS X для меня всегда была красивой платформой и значки программ тут тоже очень хороши, а с приходом Leopard’а с его огромными 512×512 так и вообще стало раздолье. А поскольку на iPhone стоит та же OS X, он должен был унаследовать основные черты «материнской системы», что и произошло. Поэтому когда я вижу приложения со страшными значками, мне, почему-то, хочется их побыстрее удалить. То же происходит и с веб-приложениями (вы же знаете, что разработчики могут давать им иконки для «WebClip’ов»?), и Google Reader — хорошее исключение из этого.

]]> http://archive.amaxskv.com/42/feed/ 1 Последние новости http://archive.amaxskv.com/21/ http://archive.amaxskv.com/21/#comments Sat, 29 Mar 2008 12:51:36 +0000 Антон Сотков http://amaxskv.com/?p=21 Начну, пожалуй, с «рингкаста» — идея, похоже, понравилась и была принята (не без небольшой рекламы, конечно :) Уже имется 21 подписчик — почти в два раза больше, чам на сам блог (это не так радостно, но тоже неплохо, тем более, что начал я совсем недавно).

В эти дни я поработал над темой: кое-что подправил, выровнял и … сегодня перешел на WP 2.5 для основного блога (предварительно, конечно поставив его на тестовый). Если и вы решите это сделать, обязательно проверьте, все ли ваши плагины совместимы с новой версией движка. Обязательно отключайте SimpleTags — он не даст вам даже установить WP 2.5. В ЖЖ я кросспостингом пока не занимаюсь, так что без LJ Crossposter вполне обойдусь.

Пару слов самом WP 2.5: радует, что можно писать посты из Safari без потери форматирования, как это было раньше. Запускать монста-огнелиса мне очень не хотелось ради редактирования постов — теперь же эта проблема решена. Админка стала посимпатичней, «повебдванольней» с её пастельными цветами. Впрочем, это тоже пошло на пользу. Остается лишь потестировать остальные нововведения, такие как загрузка картинок. Да, и обновление плагинов без работы с FTP — обалденная вещь. Серьезно упрощает сам процесс.

А еще я так пока и не понял, что такое трекбеки и пингбеки.

]]> http://archive.amaxskv.com/21/feed/ 0 Создаем свою тему 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