Pull to refresh
1
0
Glook @Glook

User

Send message

Веб-шрифты на распутье

Reading time11 min
Views31K
Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.

Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила @font-face для привязки шрифтов. Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.

Для начала, обзор последних событий:
  1. 18-ого марта 2010 года была учреждена группа Web Fonts Working Group в W3C. Её первая задача была утвердить спецификацию WOFF как стандарт доставки sfnt (OTF и TTF) шрифтов в веб в «сжатом» виде.
  2. Была представлена отрисовка шрифтов в IE9 с помощью Windows’s DirectWrite в IE9 Platform Preview.
  3. Появились первые инструменты для подготовки веб шрифтов, такие как Font Squirrel’s @Font-Face Generator и EOTFAST.
  4. Пошла новая волна «шрифтохранилищ» в виде Typekit, Typotheque и бесплатного, опенсорсного Kernest.
  5. Появились первые “трастовые/кредитные” лицензии на веб-шрифты от дизайнеров коммерческих шрифтов.
  6. CSS3 Fonts Module включил в себя некоторые продвинутые свойства OpenType.
  7. Adobe Flash, когда-то надежная, кросс-платформенная среда замены текста (sIFR), сейчас выглядит абсолютно убогой.
  8. Google запустил бесплатный сервис шрифтов с растущей библиотекой. Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам…
Читать дальше →

Кроссбраузерный box-shadow

Reading time2 min
Views66K
Здравствуйте, дорогие читатели. Сегодня хочу с вами поделиться чрезвычайно простым способом кроссбраузерной реализации css-свойства box-shadow. Способ настолько простой и очевидный, что я был чрезвычайно удивлен тем, что не смог найти на просторах интернета аналогичного решения (хотя я более чем уверен, что не являюсь первооткрывателем).

Читать дальше →

Расширенные фрагменты страницы

Reading time2 min
Views2.6K
Оксана Команеску, Команда качества поиска

Не так давно к некоторым сниппетам наших результатов поиска мы стали добавлять расширенное описание. Вот так, например, будет выглядеть сниппет страницы с рецептом борща (на картинке дополнения выделены красным).


Это наглядный пример использования семантической разметки страницы в результатах поиска.

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

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

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

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

Мы очень надеемся на то, что вы разделите наш энтузиазм и поможете нам лучше представить вашу страницу в результатах поиска, воспользовавшись семантической разметкой.

5 способов, которыми игры пытаются вызвать зависимость

Reading time10 min
Views190K
Итак, в новостях снова пишут, что кто-то еще умер из-за игромании. Да, опять Корея.

Какого ...? послушайте, я не пытаюсь доказать что видео игры — это героин. Я полностью понимаю, что в данном случае у жертвы было много проблем в жизни. Но, половина из вас знает что World of Warcraft затягивает и что доктора считают игровую зависимость серьёзной проблемой. А вопрос вот в чем: может быть какие-то игры намеренно разрабатывались, чтобы заставлять вас играть в них, даже если вы не получаете от этого удовольствия?
Давайте посмотрим как это работает

Экономим деньги — покупаем в США

Reading time5 min
Views54K
Это первый наш пост в новоиспечённом корпоративном блоге компании Ebaytoday, так что ежели где что не так – милостиво просим, как говорится «не пинать сильно ногами».

Итак – представляем уважаемым читателям Хабра наше детище – проект EbayToday.ru. Этот сервис уже более 2-х лет помогает жителям России и СНГ с лёгкостью совершать покупки не где-нибудь, а в самих Соединённых Штатах Америки.

image


Чем именно мы занимаемся:
1) помогаем в приобретении товаров на аукционе eBay,
2) помогаем совершать покупки в любых американских интернет-магазинах,
3) предоставляем услуги мейлфорвардинга.

На Хабре мы планируем цикл постов, в которых подробно расскажем обо всех тонкостях работы нашего сервиса, поделимся ценным опытом, дадим полезные советы и рекомендации.

Ну что? Поехали?

Читать дальше →

Линкбилдинг: отделяем зёрна от плевел

Reading time7 min
Views16K
«Что поСЕЕшь – то и пожнёшь».
(Русская народная пословица, плавно переходящая в интернет-мем)


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

Не так давно на популярном англоязычном SEO-ресурсе Search Engine Watch (что перевести можно приблизительно как «Поисковый Дозор»; привет Лукьяненко и Бекмамбетову :)) появилась статья Джона Линча «Анализируем 9 самых популярных стратегий получения ссылок». Нам стало до жути интересно, а произрастут ли зарубежные семена на нашей родной SEO-почве?

image

Мы перевели статью Джона Линча и снабдили её суровыми русскими комментариями закаленных SEO-стахановцев.

Читать дальше →

Обзор свежих материалов, апрель 2010

Reading time5 min
Views1.3K
Этот материал открывает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Уже около года регулярно собираю, публикую и расшариваю эти ссылки в тематической Friendfeed-комнате User Experience, но помимо общей ленты полезным оказался и дайджест. Это первый выпуск — апрель 2010 года.

Обзор свежих материалов, апрель 2010

Читать дальше →

Эмулятор Opera Mobile уже доступен

Reading time1 min
Views20K

Специально для веб-разработчиков выпущен эмулятор Opera Mobile, который предназначен для тестирования сайтов прямо с десктопа.

Скачать:
Opera Mobile for Windows
Opera Mobile for Mac
Opera Mobile for Linux (deb)

Источник

Кроссбраузерный text-overflow \(^_^)/

Reading time5 min
Views27K
В случае, когда текст не влезает в ширину блока, есть несколько вариантов его визуализации:
  1. Разрешить ему вылезать за пределы блока. В большинстве случаев смотрится весьма косячно.
  2. Обрезать текст по границе блока. То же смотрится некузяво.
  3. Обрезать и нарисовать скроллинг. Это вообще жуть какая-то.
  4. Обрезать и сделать плавное затухание к краю так чтобы места обрезания букв не было видно. Сложно применять в случае неоднородного фона. Приходится вручную прятать затухание, когда текст имеет ширину меньше или равную ширине блока.
  5. Укорачивать текст, вставляя вконце многоточие.
О реализации последней стратегии и пойдёт далее речь...

А теперь долгожданное порево

15+ полезных документов по jQuery

Reading time2 min
Views7.1K
Как известно, пару месяцев назад свет увидела jQuery 1.4, в которой мы можем наблюдать множество новых функций и возможностей. А значит, стало еще больше информации для изучения и запоминания. И не важно, насколько хорошо вы владеете искусством jQuery — запомнить всё в любом случае не удастся. И вот здесь нам на помощь приходят всевозможные сборники документаций и шпаргалки, которые очень полезно держать под рукой и периодически в них заглядывать).
Читать дальше →

Проблема «вспышки нестилизованного текста»

Reading time6 min
Views4.5K
Оригинальное название статьи, «Designing for the switch» содержит игру слов и говорит а) о разработке дизайна в эпоху перемен — перехода к нормальной поддержке подгружаемых шрифтов у всех пользователей, и б) о нюансе «моргания», смены шрифта при его подгрузке с помощью @font-face. Вообще говоря, на русском языке достаточно мало информации об опыте и нюансах использования @font-face, поэтому этим переводом я предлагаю начать генерировать более-менее содержательное информационное поле на эту тему. Heath

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

Да, мы были избалованы. Чтобы использовать Вердану, Джорджию или Камбрию, нам не приходилось думать.

Однако дизайнерам долгое время казалось, что им нужно большего. Мы хотим использовать любой шрифт, который нужен нам для нашего дизайна. Мы много нехорошего натворили, пытаясь достигнуть этой цели — например, помещали текст в картинку. Люди поумнее придумали вспомогательные инструменты типа sIFR или Cufón. С совсем недавнего времени большинство браузеров поддерживает @font-face. Плотина открывается. Это рассвет новой эры веб-типографики, и мы обязаны ступать в неё с осторожностью.

И как же это сделать?

Web Open Font Format в Firefox 3.6

Reading time5 min
Views5.7K
Эта статья написана Джоном Даггеттом(John Daggett) — сотрудником компании Mozilla, который много работал с дизайнерами шрифтов и web программистами чтобы улучшить положение шрифтов в web. Статья представляет из себя поверхностный обзор новых возможностей и содержит некоторые примеры применения WOFF(Web Open Font Format). Полный список других работающих в этой области организаций вы можете найти на официальном блоге Mozilla (архив).

В Firefox 3.5 мы включили поддержку (архив) подключения шрифтов формата TrueType и OpenType. В Firefox 3.6 мы включим поддержку нового формата шрифтов Web Open Font Format или WOFF, который имеет два основных преимущества перед сырыми TrueType и OpenType:

 — это сжатый формат, значит вы увидите намного меньший объем загружаемых данных, чем при использовании сырых TrueType или OpenType;

 — он содержит информацию о том, откуда пришел этот шрифт, но без DRM или подписей для конкретного домена, это означает что он поддерживается (архив) множеством дизайнеров и организаций занимающихся шрифтами.
Читать дальше →

35 свежих и полезных jQuery плагинов

Reading time6 min
Views46K
Быстрый и мощный jQuery может помочь дизайнерам и разработчикам в создании прекрасных интерактивных сайтов, которые будут привлекательными и совместимыми с большинством из браузеров. Ваш сайт будет и интересным и развлекательным. Навигация, галереи и слайдшоу являются теми компонентами, которые могут блистать на вашем сайте.

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

1001-ый способ вертикального выравнивания

Reading time2 min
Views128K
О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).
Читать дальше →

Сборник хаков

Reading time4 min
Views6.5K
В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.
Читать дальше →

Фоновый .png и IE 6 — принуждаем к миру.

Reading time2 min
Views2.2K
Известен следующий баг «народного» браузера — картинки в формате .png, содержащие участки с альфа-прозрачностью отображаются неправильно. А именно — область этих участков заливается серым цветом (спасибо dreamhelg за лаконичное описание сути происходящего в данном случае).

Сегодня в в своей RSS-ленте обнаружил ссылку на очередную статью о конфронтации .png и IE. Воспринял ее, пожалуй, как и бóльшая половина удививших заголовок выше — с предубеждением (мол, опять двадцать пять). Тем не менее, выяснилось много интересного. Например, теперь фоновые .png отлично подчиняются свойствам background-position и background-repeat.
Читать дальше →

Резиновая верстка — линейная зависимость горизонтального положения DIV-ов

Reading time2 min
Views12K
Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.
Читать дальше →

русские блоги о javascript

Reading time1 min
Views2.4K
Я давно читаю много английских блогов по теме, но сейчас, в связи с появлением своего standalone блога, хочу влиться в русскоязычную блогосферу. К сожалению, пока что мне не удалось её найти. Обнаруженные блоги либо только мельком затрагивают javascript, либо вообще не ссылаются на коллег, либо производят несерьёзное впечатление.

Поэтому обращаюсь к сообществу с вопросом: подскажите, какие русские блоги о javascript вы знаете или ведёте?

А для затравки — список известных мне английских блогов по теме (нарочно исключаю неспециализированные, чтобы не раздувать список чрезмерно)

Читать дальше →

Будущее CSS: интервью с Эриком Мейером

Reading time8 min
Views4.8K
Эрик Мейер — широко-известный эксперт в области стандартов HTML и CSS, работающий в области веб-технологий с 1993 года. Им были изданы такие книги, как «Каскадные таблицы стилей. Подробное руководство» (O’Reilly), «Справочник разработчика по CSS 2.0» (Osborne/McGraw-Hill) и «Эрик Майер о CSS» (New Riders). Так же он принимал участие в многочисленных конференциях, посвященных веб-стандартам, применению CSS и веб-дизайну.

Интервью у него берет Джозеф Лоуери — автор бестселлеров «Dreamweaver CS3 Bible» и «CSS Hacks and Filters». В данный момент он заведует маркетинговым отделом в компании WebAssist.


Автор: Джозеф Лоуери
Оригинал: http://adobe.com/newsletters/edge/december2007/articles/article5/index.html
Переводчик: Александр Мусаев

Джозеф Лоуэри: Во время подготовки к этому интервью, я познакомился с вашей статьей, написанной в июне 1999 года о поддержке браузерами CSS и будущем этой технологии. Никто не сомневается в вашем опыте, тем не менее, как именно вам удается делать такие прогнозы?

Эрик Мейер: Согласно изначальному плану, технология CSS разделена на модули, каждый из которых формировался на определенном этапе. Сложность здесь состоит в том, что каждый из таких временных интервалов, как правило, сильно заторможен. Даже у самых «простых» модулей формируется многолетней история развития.
Читать дальше →

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Registered
Activity