Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».
Александр Мадьянкин @OutPunk
Пользователь
Принцип цикады и почему он важен для веб-дизайнеров
6 min
233KTranslation
![](https://habrastorage.org/storage/adeb882f/01301054/db4ec1ee/0392cb65.jpg)
Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.
Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
+668
Обзор плагинов ++
2 min
3.4KОчередной топик с обзором нескольких интересных плагинов jQuery.
![](https://habrastorage.org/storage/b40cb4c5/0c775cc1/b08f67fe/83846fc0.jpg)
Позволяет сделать интерфейс, подобный google-картам, на основе собственных изображений (возможность перетаскивать, ставить маркеры на изображении, реагировать на нажатие по ним и др.).
Узнать больше (англ.) | Посмотреть в действии
Mobily Map
![](https://habrastorage.org/storage/b40cb4c5/0c775cc1/b08f67fe/83846fc0.jpg)
Позволяет сделать интерфейс, подобный google-картам, на основе собственных изображений (возможность перетаскивать, ставить маркеры на изображении, реагировать на нажатие по ним и др.).
Узнать больше (англ.) | Посмотреть в действии
+134
PhantomJS: Webkit в консоли
2 min
124K![image](https://habrastorage.org/getpro/habr/post_images/476/31c/af2/47631caf23f32e1d760c8495d4328e4f.png)
PhantomJS это все плюшки WebKit из консоли с управлением на JS и поддержкой различных стандартов и технологий: DOM, CSS, JSON, Canvas и SVG.
Внутри несколько примеров использования
+85
Расширенный сборник CSS-хаков
4 min
37KСтатья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)
+104
Стремимся к минимализму (подборка сайтов, где можно черпать вдохновение)
1 min
33K![image](https://habrastorage.org/storage/habraeffect/74/25/74258b32fbb8010e1133abb6a774e132.jpg)
Ни для кого не секрет, что в настоящее время многие стремятся к минимализму в дизайне чего бы то ни было. Действительно, когда нет ничего лишнего, то повышается и восприимчивость информации. Но это все лирика. Сказано было это еще до меня и много. Предлагаю вашему вниманию подборку сайтов, посещение которых может направить ваши мысли по поводу разрабатываемого дизайна в нужное русло.
+100
Вышла третья бета PIE 1.0
3 min
7.7KTranslation
Предисловие переводчика.«Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смыслебез «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз —13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выходPIE 1.0 beta 3 состоялся6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься,во-первых, об апгрейде PIE (во имя ускорения работы сайтов),а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.
![на сайт PIE [CSS3 PIE]](https://habrastorage.org/getpro/habr/post_images/6aa/465/1b3/6aa4651b39756b528bdf045b98c7cdec.png)
- Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода 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 самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
- Множество других исправлений и улучшений —
см. логи правок кода.
+67
Пост-продакшн для iOS приложения: как сделать качественную видео-презентацию
3 min
2.9KЯ так подозреваю, что очень многие разработчики софта для iPhone/iPad будут просто счастливы прочитать этот пост.
Я уже давненько пользуюсь гаджетами фирмы Apple и регулярно просматриваю тематические ресурсы на предмет обзоров разных приложений. И если честно, меня очень раздражают видео-обзоры, которые сделаны не очень качественной камерой и явно видно, что деланы непрофессионально.
Конечно, когда бюджет разработки невелик, то вписать в статью затрат качественный видео ролик – это роскошь. Сегодня я расскажу, как сделать качественный видеоролик-презентацию приложения для айДевайсов.
Я уже давненько пользуюсь гаджетами фирмы Apple и регулярно просматриваю тематические ресурсы на предмет обзоров разных приложений. И если честно, меня очень раздражают видео-обзоры, которые сделаны не очень качественной камерой и явно видно, что деланы непрофессионально.
Конечно, когда бюджет разработки невелик, то вписать в статью затрат качественный видео ролик – это роскошь. Сегодня я расскажу, как сделать качественный видеоролик-презентацию приложения для айДевайсов.
+26
База GeoIP – страны и города, январь 2011
2 min
12KВышла в свет новая версия русскоязычной базы данных стран и городов. Основные изменения:
— для перевода названий городов использован API Карт Google (идея chernikov)
— для поиска по странам СНГ подключена база geobaza.ru (идея derketzer)
Результат этой работы доступен для свободного скачивания.
— для перевода названий городов использован API Карт Google (идея chernikov)
— для поиска по странам СНГ подключена база geobaza.ru (идея derketzer)
Результат этой работы доступен для свободного скачивания.
+85
Вводное слово
1 min
1.4KРазрабатываемые в первую очередь для людей, и лишь во вторую — для машин, микроформаты представляют собой набор простых и открытых форматов описания данных, основанных на широко применяемых и хорошо освоенных технологиях (например, XHTML и CSS).
Основные принципы:
1. Решение специфичных проблем.
2. Чем проще тем лучше.
3. Разработка в первую очередь для людей, и лишь во вторую — для машин.
4. Переосмысленное применение составных частей широко применяемых технологий.
5. Модульность и внедряемость.
6. Поощрение децентрализованной разработки, контента и сервисов.
Существуют микроформаты для разметки резюме, календаря, тегов и т.п.
В настоящее время внедрение того или иного микроформата в код реальной вебстраницы не вызывает трудностей т.к. информация, размеченная сообразно правилам выбранного микроформата, по сути и является обычным XHTML кодом. Работа с микроформатами подсилу практически любому человеку.
Официальный сайт: microformats.org
Полный перечень существующих микроформатов: microformats.org/wiki/Main_Page
Основные принципы:
1. Решение специфичных проблем.
2. Чем проще тем лучше.
3. Разработка в первую очередь для людей, и лишь во вторую — для машин.
4. Переосмысленное применение составных частей широко применяемых технологий.
5. Модульность и внедряемость.
6. Поощрение децентрализованной разработки, контента и сервисов.
Существуют микроформаты для разметки резюме, календаря, тегов и т.п.
В настоящее время внедрение того или иного микроформата в код реальной вебстраницы не вызывает трудностей т.к. информация, размеченная сообразно правилам выбранного микроформата, по сути и является обычным XHTML кодом. Работа с микроформатами подсилу практически любому человеку.
Официальный сайт: microformats.org
Полный перечень существующих микроформатов: microformats.org/wiki/Main_Page
+4
CANVAS шаг за шагом: Основы
6 min
531KTutorial
CANVAS шаг за шагом:
Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
+80
Нативные интерфейсы в Qt
11 min
66K![Qt Logo](https://habrastorage.org/storage/habraeffect/fb/6c/fb6c833776e876559e7cc196e4c9fc6a.png)
Эта статья посвящена программированию GUI на базе фреймворка Qt от Nokia. Мы рассмотрим способы разработки интерфейсов для нативного отображения на платформах Windows, Linux и Mac OS X.
Презентацию[1] вёл Йенс
От переводчика: далее, поскольку это
Итак, приступим. Каждое графическое окружение имеет свой свод правил (User Interface Guidelines, UIG) по созданию интерфейсов, предназначенных для этих окружений. Из основных можно отметить такие руководства как Windows User Experience Interaction Guideline, Apple Human Interface Guideline, KDE User Interface Guideline и GNOME HID. Каждое из этих руководств «определяет положение кнопочек и рюшечек» конкретного окружения. Фреймворк Qt, в свою очередь, осуществляет поддержку всех этих руководств, предоставляя разработчику возможность создавать программы с использованием виджетов, «подстраивающихся» под окружение.
+108
Выбор VPS в Германии и установка на него Archlinux
3 min
38KЗадача и выбор площадки
Задача: выбрать виртуальный сервер на стабильной немецкой площадке, с недорогим трафиком и ценой до 20 евро в месяц и установить archlinux.
![VPS](https://habrastorage.org/getpro/habr/post_images/69c/055/b5d/69c055b5df10b4626b5684b8661e765b.png)
Поиск по хабру дал несколько полезных статей и еще один ресурс от которых можно оттолкнуться.
В итоге выбор пал на трех претендентов: server4you.net, hetzner.de, hosteurope.de.
+34
Построение систем доставки видео на основе HTTP Dynamic Streaming от Adobe и OpenSource
8 min
21KВ рамках проекта для одного из наших заказчиков в очередной раз встала задача построить систему конвертации/ хранения/ доставки видео в интернет. Типичная такая задача создания своего маленького (или не очень маленького) “Тьюба” только с профессиональным, а не UGC-контентом.
С момента создания первых “Тьюбов” технологии видео в интернете прошли некоторый путь развития, позволяют сейчас делать намного больше, да и требования к современному видео-сайту стали несколько иными.
Наиболее интересными трендами последнего времени, на наш взгляд, являются:
С момента создания первых “Тьюбов” технологии видео в интернете прошли некоторый путь развития, позволяют сейчас делать намного больше, да и требования к современному видео-сайту стали несколько иными.
Наиболее интересными трендами последнего времени, на наш взгляд, являются:
- возможность смотреть один видео-сайт с разных устройств,
- технология адаптивного HTTP стриминга
+51
Microsoft добавила поддержку H.264 в Firefox
2 min
9KНи для кого не секрет что 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
Итак встречайте — HTML5 Extension for Windows Media Player Firefox Plug-in
+39
Adobe Creative Suite for Linux — помогаем воплотить мечты в реальность!
1 min
3.9K![image](https://habrastorage.org/storage/habraeffect/1b/b9/1bb989b06cfc94365551c44559d1f516.jpg)
Я призываю всех кто действительно хочет портирования продуктов Adobe на Linux, отправить запрос с необходимыми функциями непосредственно нашей команде инженеров.
+44
Впечатления от TechCrunch Moscow
6 min
2K13 декабря мне довелось побывать на первой российской конференции ТехКранча — TechCrunch Moscow 2010.
Главной темой конференции стало обсуждение привлекательности отечественных IT-продуктов для инвесторов и специфики российского Интернет-рынка в целом.
Формат мероприятия был очень оригинален — интервью. Все гости на сцене отвечали на вопросы ведущих, Майка Бутчера и Эммы Барнетт, тем самым заменив привычные доклады живой дискуссией в режиме «вопрос-ответ».
![image](https://habrastorage.org/getpro/habr/post_images/49e/bfb/551/49ebfb55122c553567d00cd3be4efb92.png)
Кроме того, стоит отметить, что официальный язык мероприятия был английский, чем хотели пренебречь некоторые выступающие. Об этом и многом другом я расскажу под катом.
Главной темой конференции стало обсуждение привлекательности отечественных IT-продуктов для инвесторов и специфики российского Интернет-рынка в целом.
Формат мероприятия был очень оригинален — интервью. Все гости на сцене отвечали на вопросы ведущих, Майка Бутчера и Эммы Барнетт, тем самым заменив привычные доклады живой дискуссией в режиме «вопрос-ответ».
![image](https://habrastorage.org/getpro/habr/post_images/49e/bfb/551/49ebfb55122c553567d00cd3be4efb92.png)
Кроме того, стоит отметить, что официальный язык мероприятия был английский, чем хотели пренебречь некоторые выступающие. Об этом и многом другом я расскажу под катом.
+43
Обзор свежих материалов, ноябрь 2010
5 min
676Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель, май-июнь, июль, август, сентябрь, октябрь.
![Обзор свежих материалов, ноябрь 2010](https://habrastorage.org/getpro/habr/post_images/74a/323/6fc/74a3236fca4a190d6b2b55f99c1e3053.jpg)
![Обзор свежих материалов, ноябрь 2010](https://habrastorage.org/getpro/habr/post_images/74a/323/6fc/74a3236fca4a190d6b2b55f99c1e3053.jpg)
+52
Как WEBO Рунет посчитало
3 min
662![WEBO Pulsar WEBO Pulsar](https://habrastorage.org/getpro/habr/post_images/f44/cda/66c/f44cda66c1f584646a24a021b6bf89e6.png)
Забегая немного вперед, скажу, что ежедневно сайты теряют порядка миллиона посетителей. И примерно в половине случаев эти потери практически незаметны, потому что происходят либо из-за «плавающих» сбоев, либо из-за большого наплыва посетителей (и превышении времени ожидания ответа). Происходит это, к счастью, не так часто, но в финансовом плане эффект получается весьма ощутимым. Например, только avito.ru потерял за прошедшую неделю почти 140 тысяч посетителей.
+31
Экспорт QML файлов из Photoshop и GIMP
1 min
4KTranslation
Создание QML файлов — невероятно веселая задача, но довольно часто проблематично разбить замечательные Photoshop шаблоны, которые прислал вам дизайнер, в полностью готовый интерфейс Qt Quick. Было бы замечательно, если бы мы смогли автоматизировать этот процесс? Я тоже так подумал, и написал пару полезных скриптов. Первый — скрипт для Photoshop. Просто положите его совместно с другими скриптам, и у Вас появится новый пункт в меню «Export QML», с помощью которого можно перебросить сцену в один QML-файл с элементами Text или Image из каждого слоя. Скрипт также можно использовать и для векторной графики, поскольку в Adobe Illustrator есть удобная опция экспорта в Photoshop.
Я сделал небольшое демонстрационное видео, чтобы лучшее продемонстрировать, как это работает на практике:
Я сделал небольшое демонстрационное видео, чтобы лучшее продемонстрировать, как это работает на практике:
+30
Information
- Rating
- Does not participate
- Registered
- Activity