{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Кирилл Беляев: заметки с тегом веб", "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/web\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fweb%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "555", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/em-dash-is-a-bad-separator-for-a-page-title\/", "title": "Тире — плохой разделитель для заголовка страницы", "content_html": "

Это мало кого волнует. ХТМЛ-тег «title» хранит заголовок страницы, тот который видно на вкладке настольного браузера. Заголовки стремятся составлять так, чтобы они ёмко описывали содержание страницы: Прогноз погоды в Риге. Или набивают его СЕОшным текстом для поисковых роботов: Где купить теле­фон Samsung в Москве — на IM.ru 60 моде­лей теле­фо­нов Сам­сунг. На главной странице часто пишут название компании или продукта: Яндекс.<\/p>\n

На внутренних страницах к описанию этой конкретной страницы добавляют название «всего сайта». А чтобы не придумывать, как по-человечески сказать, вводят разделитель. Когда разделителем заголовка на русском служит тире, появляются паразитные смыслы:<\/p>\n

\n\"\"\n<\/div>\n

Вторая причина не использовать тире — экономия места. Тире требует два пробела и длиннее других знаков препинания в 2-3 раза. Лучший разделитель, по-моему, — точка, ей нужен один пробел и минимум места и никаких лишних интерпретаций. Ещё подойдёт средняя точка, запятая, и в экстренных случаях — стрелка:<\/p>\n

\n

Диаметр. Википедия
\nДиаметр · Википедия
\nДиаметр, Википедия
\nДиаметр → Википедия<\/p>\n<\/blockquote>\n", "date_published": "2017-10-05T09:43:21+03:00", "date_modified": "2017-10-05T18:45:56+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/web-tag@2x.png", "_date_published_rfc2822": "Thu, 05 Oct 2017 09:43:21 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/em-dash-is-a-bad-separator-for-a-page-title\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/web-tag@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/diameter-wikipedia@2x.png" ] } }, { "id": "324", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/webfonts-logos\/", "title": "Шрифтовые логотипы в вебе", "content_html": "

На Ретине хорошо выглядит вектор, фотографии и графика, увеличенная в три раза. Готовя графику для сайта, рассчитанного под Ретину, чаще все элементы просто сохраняют в растре с высоким разрешением.<\/p>\n

Считаю, что векторные логотипы, с посильными для ЦСС заливками, лучше оставлять в векторе, например в шрифте. Можно весь лого одним элементом или побуквенно, если он как у Гугла текстовый.<\/p>\n

Яндекс может просто впечатывать названия продуктов фирменным шрифтом<\/a>.<\/p>\n

Смельчаки, подчёркивающие логотипы<\/a> на внутренних страницах сайта, могут не грузит вторую картинку, обёрнутый ссылкой лого подчеркнётся и перекрасится сам.<\/p>\n

В целом всё по стандартам триза «сделать статическое динамическим» (или постоянное — переменным) и «сделать неуправляемое управляемым» (другой пример применения стандарта<\/a>). Кернить, менять цвет, подчёркивание, кегль и интерлиньяж — одно удовольствие.<\/p>\n

Для примера наш логотип:<\/p>\n

KIPO<\/span><\/a><\/span><\/p>\n<\/div>

Процедура в три шага:<\/p>\n

    \n
  1. Оупен-тайп<\/a> собрал в приложении Glyphs<\/a> (кстати, поделитесь простыми шрифтовыми редакторами в комментариях). Скопировал и вставил объекты из Иллюстратора плюс минимально настроил.<\/li>\n
  2. Из полученного Оупен‑тайпа сгенерировал набор шрифтов для веба на Font Squirrel<\/a>.<\/li>\n
  3. Добавил набор на сайт.<\/li>\n<\/ol>\n

    Что скажете? :-)<\/p>\n", "date_published": "2014-01-29T15:37:55+03:00", "date_modified": "2015-01-03T14:41:03+03:00", "_date_published_rfc2822": "Wed, 29 Jan 2014 15:37:55 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/webfonts-logos\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "305", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/travel\/", "title": "Путешествия", "content_html": "

    Сделали страничку<\/p>\n

    kipo.name\/travel<\/a><\/span><\/p>\n

    Здесь показаны, города, о которых нам есть что рассказать и показать.<\/p>\n

    Если о городе написано больше одной заметки, ссылка ведёт на одноимённый тег.<\/p>\n", "date_published": "2013-08-10T22:04:24+03:00", "date_modified": "2016-08-30T12:23:50+03:00", "_date_published_rfc2822": "Sat, 10 Aug 2013 22:04:24 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/travel\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "301", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/adieu-delovsite\/", "title": "«Дело в сайте» прощай", "content_html": "

    В феврале этого года мы завершили сотрудничество с интернет-агентством «Дело в сайте».<\/p>\n

    За полтора года сделано 4 проекта и много сопутствующих задач. Это были интересные проекты, главным их плюсом было погружение в вопрос интернет-магазинов.<\/p>\n

    Примечательно, что причиной прекращения сотрудничества стали не стоимость, сроки, способ построения рабочего процесса или качество, а принципы. Мы публикуем работы в портфолио и на дизайнерских порталах. Ребята из «Дела в сайте» считают, что типовые решения магазинов, которые производит агентство не должны публиковаться в портфолио наёмных дизайнеров.<\/p>\n

    Предварительных договорённостей у нас не было, поэтому мы публикуем работы в полном объёме.<\/p>\n

    На нашем сайте проектов, заказанных «Делом в сайте» не будет, но они есть в портфолио на Ревижене: Тачес<\/a>, Биг-бонус<\/a>, Клобер<\/a> и Балтик супер тревл<\/a>.<\/p>\n", "date_published": "2013-08-04T10:40:53+03:00", "date_modified": "2018-02-06T17:39:59+03:00", "_date_published_rfc2822": "Sun, 04 Aug 2013 10:40:53 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/adieu-delovsite\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "292", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/domen-trendom\/", "title": "Домен для проекта", "content_html": "

    Мы продаём домен, чтобы сообщить об этом мы сделали яркую страничку —<\/p>\n

    trendom.ru<\/a><\/span><\/p>\n

    Перепосты и ссылки приветствуются, должна же информация добраться до ищущих.<\/p>\n", "date_published": "2013-06-25T22:30:17+03:00", "date_modified": "2013-06-25T23:41:02+03:00", "_date_published_rfc2822": "Tue, 25 Jun 2013 22:30:17 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/domen-trendom\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "282", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/website-and-vacancy\/", "title": "Открыли сайт и ищем разработчиков", "content_html": "

    Друзья, мы сделали сайт с нашим портфолио — kipo.name<\/a>. У него нет системы администрирования, он на голом ХТМЛ. Это не круто, но на большее ни времени, ни умений не хватило. В ближайший месяц на сайте будут появляться работы этого года.<\/p>\n

    Будем благодарны за любые комментарии и замечания, особенно если у вас хороший английский.<\/p>\n

    Мы ищем разработчика, с которым можно сотрудничать на проектной основе и по ФФФ. Задачи есть наши (сайт, блог) и клиентские проекты. Мы не берём комиссионных, но курируем проекты полностью (наш дизайн — наша ответственность). Это удобно, если нет желания общаться с разными людьми не всегда близкими к теме. Пишите на hi@kipo.name<\/a> и расскажите друзьям.<\/p>\n", "date_published": "2013-05-15T20:43:25+03:00", "date_modified": "2013-05-15T20:59:03+03:00", "_date_published_rfc2822": "Wed, 15 May 2013 20:43:25 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/website-and-vacancy\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "276", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/chinese-tea-chasha-tepla-news\/", "title": "Китайский чай и новости «Чаши тепла»", "content_html": "

    В 2011 мы начали работать над проектом «Чаша тепла». До этого мы предпочитали чай кофе и не жаловали пакетики. Основатель компании Дима Шацких увлёк нас темой китайских чаёв и наше предпочтение переросло в страсть. Теперь мы знаем, как сильно бодрит, тонизирует и вставляет хороший и правильно заваренный китайский чай (вот почему они так работают :) Теперь чай в приличном ресторане похож на пакетированный (даже, если листовой), а европейская культура чаепития на фастфуд.<\/p>\n

    Рекомендуем. Чаи «Чаши тепла» дороже, чем непакетированные из магазина, но дешевле, чем развесные из чайных лавок.<\/p>\n

    Сейчас идёт работа над третьей версией упаковки: первая прошла без нашего участия, на текущей выявляем ошибки. Изображение наносится на коробку печатями, так экономятся ресурсы и добавляется шарм.<\/p>\n

    \n\"\"\n<\/div>\n

    Пока разрабатывается удобный интернет-магазин, на волне моего изучения ХТМЛ появилась страничка-визитка — chasha-tepla.ru<\/a><\/p>\n

    \n\"\"\n<\/div>\n", "date_published": "2013-03-22T19:13:04+03:00", "date_modified": "2014-01-03T20:24:04+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/chasha_IMG_7105.jpg", "_date_published_rfc2822": "Fri, 22 Mar 2013 19:13:04 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/chinese-tea-chasha-tepla-news\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/chasha_IMG_7105.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/chasha_screen+safari.jpg" ] } }, { "id": "263", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/otlichnaya-domennaya-para\/", "title": "Отличная доменная пара", "content_html": "
    Сделал страничку о доменах Мулоко:
    mooloko.ru + mooloko.com<\/a><\/span>

    При возможности, помогите донести информацию до тех, кому она может быть полезна.<\/div>", "date_published": "2013-01-28T14:42:01+03:00", "date_modified": "2013-06-25T19:04:46+03:00", "_date_published_rfc2822": "Mon, 28 Jan 2013 14:42:01 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/otlichnaya-domennaya-para\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "262", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=2013\/01\/24\/1\/", "title": "История про дипломный проект", "content_html": "
    В октябре 2011 я написал письмо Артёму Горбунову о моём дипломном проекте:
    Здравствуйте, Артём!

    Возможно, вас заинтересует мой     проект<\/a>. Если мои надежды оправдаются и вам будет интересно, прошу написать какие идеи вам показались значимыми, а какие не очень?

    Мне показалось, что для «Советов» объём картинок слишком большой.<\/blockquote>Артём ответил следующее:
    Вы могли бы прислать в Советы пару самых важных картинок в увеличенном виде (желательно сразу на 700 в ширину) и дать ссылку на полный набор.

    Да и на ревиженовской странице ничего нельзя прочитать.<\/blockquote>Тогда я застеснялся публичного разбора полётов и неумения выложить картинку в сети и дать на неё ссылку. Я ничего не ответил. Но заноза о разметке и размещении страниц в вебе осталась. За что большое спасибо, Артёму!

    Прошло всего 15 месяцев и появилась моя первая ХТМЛ-страничка. Потратил я на это около 10-14 дней, но, увы, не за раз.

    Встречайте:
    kipo.name\/citydogs<\/a><\/span>

    Если среди наших читателей есть верстальщики, технологи или фронтендщики, которым не лень указать на лажу, будем признательны.<\/div>", "date_published": "2013-01-25T00:04:06+03:00", "date_modified": "2013-01-28T15:08:02+03:00", "_date_published_rfc2822": "Fri, 25 Jan 2013 00:04:06 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=2013\/01\/24\/1\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "261", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=2013\/01\/04\/1\/", "title": "Предновогодние работы", "content_html": "
    В предверии Нового года мы нарисовали пару работ для агенства «Дело в сайте».
    Электронная открытка к Новому году:

    \"\"


    Новая версия сайта «Тачес.ру» (    предыдущий дизайн<\/a>, процесс его создания<\/a>):
    \"\"<\/div>", "date_published": "2013-01-04T13:47:42+03:00", "date_modified": "2013-01-04T12:59:34+03:00", "_date_published_rfc2822": "Fri, 04 Jan 2013 13:47:42 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=2013\/01\/04\/1\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "250", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/lookroom\/", "title": "Лукрум", "content_html": "
    В декабре 2011 мы начали работу над мебельным интернет-магазином для дизайнеров интерьера. Основными фишками магазина должны были стать некрупные предметы (стулья, столы, свет и аксессуары), стиль, актуальность, именитость авторов мебели и конкурентные цены. Проект так и не запустился, и у нас остались интересные картинки, которые смотрятся хорошо и в 2012-м.

    Всё началось с названия. Мы предложили четыре варианта (по два на английском и русском языках):

    \"\"

    Победил «Lookroom». Затем сделали два варианта логотипа:

    \"\"

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

    \"\"

    Комментарии: нужно упростить шапку графически, уменьшить количество разнородных элементов и выравниваний.

    \"\"
    Главная (1024 и 1920 пикселей по ширине)<\/i>

    \"\"
    Выпадающее меню и детали при наведении на объект<\/i>

    \"\"
    «Всплывашка» с контактной информацией<\/i>

    Теперь хорошо.

    Отдельно хочу показать переключалку сортировки — она получилась супер-отмороженной. У меня ушло секунд 30, что бы вспомнить что к чему. Но на неё точно бы все нажимали, точно бы поняли и точно бы запомнили — сайт-то для дизайнеров :)

    \"\"

    Проект остановился после утверждения главной.<\/div>", "date_published": "2012-11-24T15:29:52+03:00", "date_modified": "2013-05-15T20:50:11+03:00", "_date_published_rfc2822": "Sat, 24 Nov 2012 15:29:52 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/lookroom\/", "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "226", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=2012\/07\/24\/1\/", "title": "Тени в Фотошопе с помощью смарт-объектов", "content_html": "
    Предполагаю, многие уже знают об описанном ниже методе. Надеюсь, что инструкцию увидят и те, кому она может пригодиться.

    В Фотошопе есть смарт-объекты. Их можно получить из любых слоёв (так же ими становятся все объекты, которые «перетаскиваются» из вне). К ним можно применять все фильтры и почти все сохраняются в виде эффектов, не изменяя исходного смарта.

    Но это не все плюсы. У фильтров, применённых к смартам, есть маски, которые позволяют делать воздействие фильтров частичным. Я использую эти свойства, например, когда рисую тени. Особенно это помогает, когда нет времени на многослойные «правильные» тени.

    Например, вот такая тень от листа:

    \"Тени

    Я выделяю слой с листом, заливаю его градиентом от чёрно к прозрачному и трансформирую его с учётом желаемых направления и силы света. После перевожу этот слой в смарт-объект и применяю к нему размытие по Гаузу. Выделяю маску фильтра и заливаю её градиентом в том же направлении, что и сам слой. Теперь можно настраивать интенсивность размытия и карту маски.

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

    Сначала я хотел сделать скриншоты, но оказалось, видео с экрана делать быстрее.