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

*Предоставленый здесь материал — мой перевод статьи Web Fonts at the Crossing из сайта A List Apart. Автор статьи Richard Fink.

Перевод не претендует на 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 запустил бесплатный сервис шрифтов с растущей библиотекой.  Все шрифты в библиотеке доступны и для частного хранения/использования.

Теперь пройдемся по пунктам… Continue reading

WebHiTech 2010

WebHiTech 2010

Стартовал единственный в своем роде технологический конкурс вебсайтов Рунета WebHiTech 2010. Заявки на участие принимаются до конца октября. Заявить на конкурс можно не только свой сайт, но и любой понравившийся вам сайт в соответствии с правилами и номинациями.

Уже второй год я состою в жюри конкурса, что не дает мне права участия. Ну а вы, дерзайте.

Валидация HTML5

HTML5 стал очень модным среди разработчиков сайтов. Да что там разработчики сайтов, я уже слышу связку слов “HTML5 / CSS3” от менеджеров среднего звена, как минимум раз в неделю.

Люди хотят чего-то нового, языки разметки развиваются не так быстро как хотелось бы, поэтому когда появилась возможность попробовать себя в деле, многие ею воспользовались. Некоторые переверстали свои сайты полностью на HTML5, некоторые ограничились декларацией DOCTYPE для ленивых. По большому счету это хорошая тенденция, я обеими руками за прогресс и даже сам сделал предыдущую версию этого сайта на HTML5.

Проблема в том, что стандарт еще не доработан, большинство “вкусностей” еще впереди, хочется верить. Ну и как обычно, Internet Explorer не поддерживает фактически ничего из этого стандарта. Да что там фактически, ничего. Даже отрисовку элементов из HTML5 приходится задавать через Javascript.

До недавнего времени было довольно сложно валидировать документы на HTML5, так как валидаторы плевались на DOCTYPE без ссылки на DTD.

DOCTYPE HTML5:

<!DOCTYPE html>

Существовал только один HTML5 валидатор, да и тот в разработке.

На данный момент этот валидатор все еще находится в разработке, но работает уже довольно корректно. Помимо этого, валидатор всех валидаторов от отцов из W3C уже поддерживает валидацию HTML5, не без помощи Mozilla Foundation. Появилось расширение для Firefox.

Так что можете смело пробовать себя, учиться, смотреть примеры и создавать что-то свое.

Мысли о разрешении экрана. Год спустя

В последнее время при разработке сайтов все меньше и меньше учитывается разрешение 800х600, что само по себе не удивительно, если взглянуть на статистику. Соответственно, либо сайты оптимизированы под 1024х768 и выше, либо они “резиновые”, что встречается реже.

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

Количество посетителей сайтов с разрешением 800х600 не только не уменьшится, а увеличится. Связано это напрямую с развитием субноутбуков, кпк, мобильников и прочих переносимых девайсов. Добрая половина субноутбуков уже сейчас имеет разрешение 1024х600, но сайт, оптимизированый под 1024х768, открытый на таком экране, в большинстве случаев будет неудобоваримым так как займет всё окно браузера. А в дизайне, как известно, важны пустоты.

Поэтому я предлагаю перестать игнорировать 800х600 и начать смотреть на этот вопрос под другим углом. Мне кажется разумным:

  • Создавать отдельный файл стилей, оптимизированый под маленькие разрешения экрана, для всех мобильных устройств .
  • С помощью PHP/JS создать функциональную возможность переключения файла стилей для владельцев настольных компьютеров с малым разрешением экрана.

Таким образом, мы убиваем одним выстрелом двух зайцев. У сайта появляется полноценная мобильная версия, и мы заботимся о посетителях с маленьким… разрешением.

Добавление файла стилей для мобильных устройств делается так:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Про корректное оформление мобильной версии сайта можно почитать на старом добром ресурсе A List Apart.

Переключать стили можно с помощью JQuery вот так или так.

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

@Media 2008 Лондон. Отчет. Часть вторая

@Media 2008 лого

Часть первая.

Второй день конференции начался с жестокого похмелья доклада Nate Koechley под названием “Professional Front-End Engeneering”. Как Нэйт и обещал, он толкнул зажигательную речь о Front-End’е и его значении в веб-разработке. Особый упор был сделан на том, что Front-End веб-разработка по сути своей ни чем не отличается от архитектуры и поэтому отношение к ней, со стороны разработчика и его начальства не должно быть другим. Архитектор, проектируя здание, не позволяет себе махнуть рукой на то, что будет с домом через 5—10 лет, проект наполняется чертежами, схемами, документацией и тд. Так почему разработка сайтов должна отличаться?

Он призвал веб-разработчиков не пренебрегать своей работой даже если они убеждены, что проект, который они делают, не важен и не будет развиваться. Веб, как известно, среда динамическая и постоянно расширяющаяся, по сему любой, даже самый маломальский проект может “выстрелить” и его надо будет срочно расширять, дорабатывать и развивать. Соответственно не стоит экономить на документации, комментировании собственного кода, стоит помнить возможности повторного использования элементов интерфейса и возможности для расширения. Continue reading

@Media 2008 Лондон. Отчет. Часть первая

@media 2008 лого

29-30 Мая в Лондоне прошла четвертая конференция для веб-разработчиков @Media. Мне посчастливилось на ней побывать и я, как и обещал, публикую отчет о поездке. Для начала немного общих сведений о конференции:

@Media проводится уже в четвертый раз и обычно это происходит в Сан Франциско, Лондоне и Гонг Конге с промежутком в неделю, в течении месяца. В этом году конференция проводилась только в Лондоне, не смотря на то, что изначально была заявлена и в Сан Франциско. Причина отмены американской части конференции мне не известна.

Ежегодно в конференции принимают участие многие мастистые и известные разработчики и дизайнеры из разных стран. Фактически каждый год конференцию почитают своим присутствием представители Google, Yahoo, W3C, Clear Left, 37 Signals и других известных компаний и веб-студий.

Доклады на конференции идут в виде своеобразного марафона – один за другим, с небольшими перерывами на обед и кофе, в течении двух дней, с 9.00 до 17.00. Лекции идут параллельно в двух разных аудиториях, что с одной стороны создает свободу выбора, а с другой – ставит иногда перед участниками диллему выбора.

В общем конференция эта во многом знаковая и задающая тон сообществу веб-разработчиков. По крайней мере так было, и я надеюсь что будет. А теперь перейдем собственно к отчету и тому что было в этом году. Continue reading

Размышления о веб-разработке

websites Для начала небольшое вступление. Сам я Front-end Web Developer и считаю, что каждый должен заниматься своим делом. Во всевозможных спорах привожу такой аргумент:

Если у вас болит зуб, вы обращаетесь к стоматологу или бежите к соседу с просьбой “Вась, а Вась, вон зуб, третий слева, выбей долотом пожалуйста, а то болит очень”?

Правильно, ответ очевиден. Так почему же по отношению к веб-разработке у людей складывается такое неочевидное отношение? Continue reading

Разрешение экрана. Мысли вслух

screenВзглянул я недавно на глобальную статистику разрешений экранов и удивился. Еще в Январе 2007 количество пользователей с разрешением экрана 800х600 колебалось на отметке 15-17 процентов, а на данный момент всего 69 процентов.

“- А ведь это о чем то да говорит” – подумал я и начал прикидывать подсчеты в уме. Если меньше чем за полгода количество людей с маленьким ..ээ.. экраном уменьшилось на 10 процентов, то к концу года они вобще почти пропадут! (Экраны, не люди :) )
Да и сама по себе цифра 6-7 процентов уже является незначительной. Приблизительно столько же пользователей не используют Javascript. Continue reading

Каркасная решетка разметки

Layout gridНаткнулся недавно на интересную и простую идею, которая может быть интересна многим. А идея вот в чем:

Есть картинка, размером 1200х800 пикселей, на которой расчерчена каркасная решетка разметки квадратами со стороной 50 пикселей. Картинка вставляется как фоновое изображение в body и упрощает визуальное размещение блоков во время верстки.

Как говорится, “дешево и сердито”, но может оказаться полезным многим.

Забираем картинку здесь.