Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Очередной топик с обзором нескольких интересных плагинов jQuery.

Mobily Map

Позволяет сделать интерфейс, подобный google-картам, на основе собственных изображений (возможность перетаскивать, ставить маркеры на изображении, реагировать на нажатие по ним и др.).
Узнать больше (англ.) | Посмотреть в действии

PhantomJS это все плюшки WebKit из консоли с управлением на JS и поддержкой различных стандартов и технологий: DOM, CSS, JSON, Canvas и SVG.

Внутри несколько примеров использования

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

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

_{Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.}

Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:

• Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
   
• Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
   
• PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
   
• Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
   
• Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
   
• -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
   
• Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
   
• position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
   
• Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
   
• Множество других исправлений и улучшений — см. логи правок кода.

Скачайте PIE 1.0 beta 3 прямо сейчас!

Я так подозреваю, что очень многие разработчики софта для iPhone/iPad будут просто счастливы прочитать этот пост.
Я уже давненько пользуюсь гаджетами фирмы Apple и регулярно просматриваю тематические ресурсы на предмет обзоров разных приложений. И если честно, меня очень раздражают видео-обзоры, которые сделаны не очень качественной камерой и явно видно, что деланы непрофессионально.
Конечно, когда бюджет разработки невелик, то вписать в статью затрат качественный видео ролик – это роскошь. Сегодня я расскажу, как сделать качественный видеоролик-презентацию приложения для айДевайсов.

Вышла в свет новая версия русскоязычной базы данных стран и городов. Основные изменения:
— для перевода названий городов использован API Карт Google (идея chernikov)
— для поиска по странам СНГ подключена база geobaza.ru (идея derketzer)
Результат этой работы доступен для свободного скачивания.

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

Основные принципы:

1. Решение специфичных проблем.
2. Чем проще тем лучше.
3. Разработка в первую очередь для людей, и лишь во вторую — для машин.
4. Переосмысленное применение составных частей широко применяемых технологий.
5. Модульность и внедряемость.
6. Поощрение децентрализованной разработки, контента и сервисов.

Существуют микроформаты для разметки резюме, календаря, тегов и т.п.

В настоящее время внедрение того или иного микроформата в код реальной вебстраницы не вызывает трудностей т.к. информация, размеченная сообразно правилам выбранного микроформата, по сути и является обычным XHTML кодом. Работа с микроформатами подсилу практически любому человеку.

Официальный сайт: microformats.org

Полный перечень существующих микроформатов: microformats.org/wiki/Main_Page

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Эта статья посвящена программированию GUI на базе фреймворка Qt от Nokia. Мы рассмотрим способы разработки интерфейсов для нативного отображения на платформах Windows, Linux и Mac OS X.

Презентацию^[1] вёл Йенс Бач-Вииг (Jens Bache-Wiig) — разработчик Qt (с 2005 года), занимающийся интерфейсами (look and feel).

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

Итак, приступим. Каждое графическое окружение имеет свой свод правил (User Interface Guidelines, UIG) по созданию интерфейсов, предназначенных для этих окружений. Из основных можно отметить такие руководства как Windows User Experience Interaction Guideline, Apple Human Interface Guideline, KDE User Interface Guideline и GNOME HID. Каждое из этих руководств «определяет положение кнопочек и рюшечек» конкретного окружения. Фреймворк Qt, в свою очередь, осуществляет поддержку всех этих руководств, предоставляя разработчику возможность создавать программы с использованием виджетов, «подстраивающихся» под окружение.

Задача и выбор площадки

Задача: выбрать виртуальный сервер на стабильной немецкой площадке, с недорогим трафиком и ценой до 20 евро в месяц и установить archlinux.



Поиск по хабру дал несколько полезных статей и еще один ресурс от которых можно оттолкнуться.
В итоге выбор пал на трех претендентов: server4you.net, hetzner.de, hosteurope.de.

В рамках проекта для одного из наших заказчиков в очередной раз встала задача построить систему конвертации/ хранения/ доставки видео в интернет. Типичная такая задача создания своего маленького (или не очень маленького) “Тьюба” только с профессиональным, а не UGC-контентом.

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

Наиболее интересными трендами последнего времени, на наш взгляд, являются:

• возможность смотреть один видео-сайт с разных устройств,
• технология адаптивного HTTP стриминга

Ни для кого не секрет что Firefox не умеет воспроизводить видео закодированное H.264 кодером и в будущем такой функционал не планируется. Причина довольно проста — Mozilla в войне кодеков для HTML5 video сделала ставку на свободный VP8(в контейнерах WebM) от Google. Но в сети много видео закодированного в H.264(формат flv5, mp4) и для его перекодировки под новый стандарт нужны не малые вычислительные мощности. Для таких гигантов как google это конечно не такая большая проблема, а вот для небольших компаний переход на новый стандарт может влететь в копеечку. Вот для таких товарищей и постарался Microsoft(конечно не без профита для себя) — был выпущен аддон для плагина WindowsMediaPlayer, который позволит пользователям Windows 7 смотреть H.264-видео в Firefox.

Итак встречайте — HTML5 Extension for Windows Media Player Firefox Plug-in

Jeremy Bank(разработчик Adobe) примерно месяц назад разместил на сайте getsatisfaction.com голосование по вопросу портирования Adobe Creative Suite на Linux. На данный момент набрался 5301 голос тех кому нравиться эта идея. Два дня назад Carey Burgess(тоже разработчик Adobe) написал комментарий примерно следующего содержания:

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

13 декабря мне довелось побывать на первой российской конференции ТехКранча — TechCrunch Moscow 2010.

Главной темой конференции стало обсуждение привлекательности отечественных IT-продуктов для инвесторов и специфики российского Интернет-рынка в целом.

Формат мероприятия был очень оригинален — интервью. Все гости на сцене отвечали на вопросы ведущих, Майка Бутчера и Эммы Барнетт, тем самым заменив привычные доклады живой дискуссией в режиме «вопрос-ответ».



Кроме того, стоит отметить, что официальный язык мероприятия был английский, чем хотели пренебречь некоторые выступающие. Об этом и многом другом я расскажу под катом.

Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель, май-июнь, июль, август, сентябрь, октябрь.

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

Забегая немного вперед, скажу, что ежедневно сайты теряют порядка миллиона посетителей. И примерно в половине случаев эти потери практически незаметны, потому что происходят либо из-за «плавающих» сбоев, либо из-за большого наплыва посетителей (и превышении времени ожидания ответа). Происходит это, к счастью, не так часто, но в финансовом плане эффект получается весьма ощутимым. Например, только avito.ru потерял за прошедшую неделю почти 140 тысяч посетителей.

Создание QML файлов — невероятно веселая задача, но довольно часто проблематично разбить замечательные Photoshop шаблоны, которые прислал вам дизайнер, в полностью готовый интерфейс Qt Quick. Было бы замечательно, если бы мы смогли автоматизировать этот процесс? Я тоже так подумал, и написал пару полезных скриптов. Первый — скрипт для Photoshop. Просто положите его совместно с другими скриптам, и у Вас появится новый пункт в меню «Export QML», с помощью которого можно перебросить сцену в один QML-файл с элементами Text или Image из каждого слоя. Скрипт также можно использовать и для векторной графики, поскольку в Adobe Illustrator есть удобная опция экспорта в Photoshop.

Я сделал небольшое демонстрационное видео, чтобы лучшее продемонстрировать, как это работает на практике: