С того момента, как Эллиот Джей Стокс резко призвал уничтожать личину Веб 2.0, можно было заметить «раскарамелизацию» сети: меньше «стеклянных» кнопок, скошенных краев, отражений, меток специальных предложений, вульгарных градиентов с яркими цветами и диагональными паттернами. Трансформацию с радостью приняли все, кроме, разве что, самых заядлых фанатов глянца. Однако, дизайн и эстетика идут лишь им ведомым путем, и только в веб-дизайне заглохла одна тенденция, как появилась другая.

Симптомы

Так что же это за новая эпидемия? Пожалуй, начнем с рассмотрения самых распространенных симптомов, многие из которых вы уже наверняка замечали. Их легко выделить, и, как и в других расстройствах, они часто появляются в сочетании. (Поэтому-то заражение и распространяется так эффективно — в сочетании внешне независимые симптомы становятся куда заразительней.)

В конце апреля я делал доклад на РИФ 2012 про этапы проектирования пользовательского интерфейса. Так как видео нет, попробую представить доклад в виде слайдов с моими комментариями.



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

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере #1 и #2.

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

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

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

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

КАК-Я-ДЕЛАЛ-РАНЬШЕ (или КАК-НЕ-НУЖНО-ДЕЛАТЬ)
Первые мысли: «Сделаю, чтоб работало под iPhone, а потом переделаю для iPad».
Сделал, работает. Теперь нужно переделать под iPad. Придумываем процент соотношений сторон девайса. Ширина 960 к 1024 – соотношение 1,067. Высота – 640 к 768 – соотношение 1,2. И все, что осталось – умножить координаты всех GUI на эти цифры. Вот и всё!

Но есть одно НО! Элементов GUI в приложении не один десяток. И теперь к каждому в коде нужно добавить переменную соотношения. А размеры!!! Нужно перерисовать все размеры кнопок и окон! Потому что иначе они волшебным образом залазят друг на друга или образуют ненужные дыры. Текст, тот и вовсе отображается совсем не там, где нужно. Вобщем…

Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.

Ближе к двум часам ночи в голову в месте с мыслями о вечном приходят не менее вечные вопросы — «в чём смысл жизни ?», «зачем вообще человеку спать ?» или «Какого чёрта эта #%^$ не работает ?» и чем ближе утро, тем сильнее начинает волновать именно этот самый последний вопрос.

Чуть ниже я расскажу о том какого чёрта сss селекторы иногда не ведут себя так, как нам кажется правильным, и о том как они на самом деле должны себя вести.

Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

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

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Администрация Pirate Bay представила в своем блоге (советую почитать и комментарии) новый раздел сайта, полностью посвященный чертежам для трехмерных принтеров и станков. Создатели файлообменника рассматривают 3d-печать, то есть переход информации из цифровой формы в физическую, как следующий шаг эволюции копирования.

Итак, Vox.io — это сервис, который позволяет звонить на мобильные номера и аккаунты самого Vox.io прямо из браузера (как с видео, так и без). А ещё делать групповые звонки (читай, телеконференции), звонки на e-mail (ниже) и отправлять sms. Возможно, пока я писал, появилось что-то ещё — проект очень живой.



В среднем, цена на звонки по России составляет 2 рубля при абонементе и 4 рубля при «просто звонках». При регистрации вам сразу же выдают 10 рублей (25 евроцентов), а за каждого приглашённого начисляют ещё по 6 рублей (15 евроцентов).

Ниже я подробнее расскажу о 3-х главных полезностях Vox.io, которые меня «зацепили».

Представляю вашему вниманию перевод статьи под названием "A Study of Trends in Mobile Design" от Alexander Dawson. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Цель этой статьи — рассказать вам о методах, которые используются на самых популярных сайтах для того, чтобы предоставить пользователям мобильных устройств удобное и (надеемся) полезное взаимодействие. Среди проанализированных сайтов много известных компаний, например Facebook и Amazon. Мы приготовили для вас настоящий экскурс в мир мобильного веб-дизайна, со статистикой и по-настоящему интересными открытиями.

В то время как Ajax стал мейнстримом, пользовательские интерфейсы по-прежнему не могут похвастаться мгновенной отзывчивостью к действиям пользователя. Причина в том, что многие разработчики привыкли мыслить в терминологии «запрос/ответ» и думают, что UI должен работать параллельно с фронтэндом, дожидаясь ответа от сервера на каждый запрос. Но почему бы не обновлять интерфейс раньше, чем пришёл ответ?

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.

Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

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

Вступление окончено, переходим к советам!

Не так давно на Хабре проскакивал пост о появлении нового PHP-фреймворка под названием Yii.
После ознакомления, этот фреймворк показался мне интересным, перспективным и достойным внимания.
Недавно Daniel Carrera выложил в своем блоге интересную статью «Comparison of PHP frameworks» о сравнении CakePHP, CodeIgniter и Yii.
С целью популяризации Yii среди русскоговорящего (и плохо-по-английски-читающего) населения я решил сделать перевод.

Вместо эпиграфа.

Поймал дед золотую рыбку. Она ему говорит:
— Чего тебе, дед?
— Хочу чтоб мой аппарат был длиной до колен.
Взяла рыбка и укоротила деду ноги.
Мораль: ставьте корректно техническое задание.

Добрый день великий и могучий Хабр.
Некоторое время назад было несколько постов о технических заданиях (Как поставить задачу для простого (шаблонного) сайта, Почему мы никогда не составляем ТЗ. А что взамен?, Правила технического задания), которые хотелось бы продолжить и рассказать про мой подход к написанию ТЗ на шаблонные сайты.

Здравствуйте.

Хотел поделиться с широким читателем информацией о реализации Friendly URL на своих проектах.

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