После появления сетчаточных дисплеев люди ищут такие альтернативы PNG-значкам, которые не зависят от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

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

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

Однако, всем категориям веб-разработчиков, равно как и их клиентам, полезно иметь не обременяющие средства для кроссбраузерного тестирования.

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.

Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.

Победитель «Самая многообещающая CMS 2011 года с открытым кодом» — ImpressPages



Страна производитель: Литва
Требования: PHP 5.3, mysql

Hi, Alexandr,

Thanks for a post. (это он про хабр)
Looks like a lot of discussion is going on. We really appreciate all the
feedback. This helps us to improve.

*Audrius Jankauskas*

О проекте

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

Dropbox тестирует функцию автоматического расшаривания фото и видео с внешних накопителей. Пока идёт бета-тест за каждые 500 МБ выгруженного контента пользователю бесплатно начисляется 500 МБ дополнительного места вплоть до 5 ГБ.

Для проверки функции необходимо:
1. Скачать и установить новую тестовую версию Dropbox 1.3.15 (ссылка для Mac OS).
2. Прописать в Autoplay для желаемого контента выгрузку через Dropbox.

В свете ожидающегося послевыборного закручивания интернет-гаек в наше стране, хотелось бы рассказать о бесплатном VPN от Comodo Group.
Comodo TrustConnect — простой в регистрации, установке и использовании сервис VPN со 128-битным шифрованием, от солидной компании, которой, в отличие от других бесплатных VPN-провайдеров, вполне можно довериться. Для тех кто не в курсе, такой VPN очень полезен при использовании открытого WiFi в публичных местах (например, при посещении сайтов, у которых до сих пор нет https). Также с помощью VPN предотвращается прослушка и фильтрация трафика провайдером, кровавой гэбнёй или админом на работе.

Любителей новых шрифтов с поддержкою кириллицы наверняка порадует известие о том, что даровитый и плодовитый дизайнер-шрифтовик Иван Гладких, более известный как Джованни Лемонад (Jovanny Lemonad), объявил о скором выходе в свет двух новых бесплатных шрифтов с русскими буквами.

Во-первых — шрифт Russo:

(Хотя в своём блоге Лемонад только анонсировал этот шрифт, фактически он ужé есть в Google Web Fonts под именем Russo One.)

Во-вторых — шрифт Stalin, итог переработки (и дополнения) шрифта Metro:


Я уверен: оба они станут приятным дополнением к тем бесплатным шрифтам с кириллицею, которые Лемонад рисует сам и собирает от других шрифтовых дизайнеров. За несколько лет там подобралась обширная коллекция (чуть более трёх десятков шрифтов и семейств): «Prosto», «Upheaval Pro», «Captcha Code», «Zhizn», «Flow» (и «Flow Bold»), «Powerview», «Hardpixel», «Bicubik», «Hattori Hanzo Light», «Fontin Sans Cyr», «Airport», «Furore», «Bender», «Epool», «Dited», «Unimportant», «Metro», «Days», «Otscookie», «Philosopher», «Molot», «London», «20 db», «Neucha», «Cuprum», «Нобр первый», «Нобр второй», «Нобр третий», «Puzzle», «SuwiKisu» и «Жопа».

Эта новость и сама по себе заслуживает пристального внимания, но для меня она послужит также поводом поговорить со всеми вами о том, что Гладких ищет спонсора.

Когда-то давно, когда горы были выше, а деревья зеленее, в браузерах поиск в адресной строке работал так, как это было правильно: он использовал функцию Google I'm Feeling Lucky. Вы могли легко вводить «хабр» вместо «habrahabr.ru», вводя «Сан-Франциско», вы сразу же попадали на сайт этого города в Википедии (ведь туда вы и хотели, правда?), а фраза «php in_array» моментально перекидывала вас на документацию по этой функции, в синтаксисе которой вы в очередной раз забыли, needle или haystack идет первым.

Но потом Гугл понял, что $110 млн в год, которые они теряют из-за того, что вам никто не показал рекламу на эти запросы — это непозволительно много, и больше браузеры по умолчанию не хотят демонстрировать нам всю телепатическую магию поиска I'm Feeling Lucky, а вместо этого демонстрируют промежуточное звено поисковой страницы, на которой вы все равно как всегда сразу же нажимаете на первую ссылку (ведь где еще может быть Википедия?), но зато посмотрели рекламу и добросовестно уменьшили рекламодателю CTR.

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

oEmbed.com — впринципе, на этом можно было бы и закончить читать тем, кто хочет провести самостоятельное мини-исследование.

Я давно занимаюсь написанием систем управления контентом для сайтов и всегда в них использовал визуальные редакторы. В виду того, что я часто не только пишу cms, но и осуществляю дальнейшую их поддержку, мне надоело, что юзеры регулярно норовят намудрить с html-кодом (о копипасте из ворда я вообще молчу). И с этого года я стал вместо визивиг-редакторов вставлять markitUp с поддержкой markdown.

И действительно, проще за 3-4 часа объяснить основы html разметки, чем отучить пользователя копипастить из ворда. Все замечательно в markitup, но не хватает возможности загружать файлы на сервер и вставлять ссылки на них.

Сегодня решил посвятить время симбиозу замечательных jquery плагинов: markitUp, fancybox, elFinder. Результатом своего труда решил поделиться.

Этот пост воодушевлен и является логическим продолжением недавно размещенного здесь материала «Хабр vs TechCrunch». Сам я с его авторами никак не связан, но выражаю им большую благодарность за то, что поделились своим опытом.

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

После рассылки у меня на руках остался небольшой список изданий, которым я не могу не поделиться с Хабросообществом. Добро пожаловать под кат!

Kickstrap это то, что будет если соединить Twitter Bootstrap, HTML5 Boilerplate, значки от IcoMoon и Font Awesome, добавить проверенные jQuery плагины Chosen и jGrowl, включить поддержку разных цветовых схем и тем оформления Bootswatch, дополнительную CSS сетку и вменяемую поддержку ранних версий IE.

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире. В ней можно не только постить веселые статусы и лайкать фотографии, но и
использовать, как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и масса других
полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. В этой статье постараюсь
подробно разобрать техническую сторону этого вопроса со стороны фронт-енд разработки.
Речь в посте пойдет не о создании самой страницы, потому что это довольно тривиальная процедура, а о пользовательских вкладках, которые можно добавить самостоятельно и наполнить нужным контентом.
Любой, даже начинающий веб-разработчик, может сделать с десяток таких табов за один вечер, зная некоторые принципы и нюансы их создания.
Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц-анонсов и страниц со всяким информационным текстово-графическим контентом. На страницы посложнее с динамическими элементами, формами и прочим функционалом времени уйдет, конечно, побольше.

Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»

Почему это глупо

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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

Начнём с описания ifttt.com

ifttt.com — это очень перспективный стартап, который в двух словах: Lets You Hack Together Web Apps, Without Coding Skills. Если детальнее, то это сервис позволяющий пользователям, без погружения в API огромного количества сервисов и каких либо знаний о разработке\языках программирования смешивать и автоматизировать различную активность друг с другом. В начале 2012 года получили посевные инвестиции в размере $1.5M.

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


Экран задач выглядит так

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

Доброго времени суток!

Наряду со статьей "iPhone: MiTM атака из кармана", родилась почти аналогичная статья про Android.

Мы уже знаем, на что способен iPhone. Уступает ли ему Android?

Было рассмотрено около 25 боевых приложений. Хочу предоставить вам результат маленького исследования. Многие приложения даже не запустились, некоторые подвесили телефон намертво, но некоторые даже работали!

Весь софт тестировался на телефоне LG Optimus, с версией Android 2.3.

Итак, краткий обзор боевого софта на Android:

Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

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

if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.

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

Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.

Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support