В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна — popup'ы — для регистрации, авторизации, информационные окна, — всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов — тот же Shadowbox, например.

Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

На днях попробовал новый ZF2. Перечитал кучу материала, собрал по их туториалу простенький сайтик. И когда дошел до создания Action'а и View'хи то пределу моей радости не было границ. Передача переменных во view теперь осуществляется через return, и они стали локальными (никакого $this->param). Только ради этого усовершенствования я готов уже сейчас переходить на ZF2, несмотря на то что он в бете.

Под катом вас ожидает: коротенько о новшествах, о производительности и об изменениях касательно контроллера и шаблонов вьюхи.

Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Все началось с того, что я решил изменить рейтинг для заметок на своем блоге.

Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.

Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.

Основные требования к плагину:

• Рейтинг должен был выводиться корректно, т. е. если у меня рейтинг был равен 4.78, то и количество закрашенных звезд должно быть соответствующим.
• Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять. т. е. при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши
• Возможность задания своих звезд
• Возможность указать URL на который будет отправлен результат голосования
• Возможность указать количество звезд выводимых в рейтинге
• Автоматическое склонение результатов голосования. (Например: 1 голос, 2 голоса, 5 голосов)
• Возможность задать свои существительные для результатов голосования
• Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
• Возможность выполнить пользовательскую функцию, при клике на звезду

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

Недавно инкапсулировал свой проект в namespace и столкнулся с проблемой отсутствия нормальной документации. Все, что удалось найти датируется примерно 2009 годом, а на дворе почти 2012… В найденном материале куча нерабочих мест, использующих то, что в нынешней версии php нет. В связи с этим хочу немного осветить этот вопрос.

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



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

Много воды утекло с тех пор когда я сел за написания своего файлового менеджера. В то время поддержка ИЕ6 считалась обычным делом, а про фичи HTML5 можно было только мечтать. В общем вот ссылка на версию 0.1.0 альфа. В конце первого топика, я написал, что планирую сделать в будущем, можно сказать я сдержал свое обещание и хочу представить Вам версию 1.0b. Из того, что планировалось, была отброшена идея внедрения авторизации в менеджер, потому что, как говорили здесь, это пятое колесо. Рассмотрим, что изменилось и что улучшилось, но для начала скрин

Сессии в Codeigniter хороши всем. Правда, очень удобно сделаны, особенно когда вы храните сессии в БД (что я считаю единственно верным). Куки шифрованные, в куках ничего, кроме идентификатора нету. Они привязываются к user_agent и, опционально, к IP. Красиво, безопасно.

Но есть у них очень существенный недостаток: жизнь сессии считается от поля last_activity. Это значит, что если у вас стоит expire сессии в двое суток, то при обращении к сессии, у которой last_activity < time()-172800, она ликвидируется и начинется новая. Следственно, для того что бы пользователям не приходилось каждый раз логиниться на сайт, last_activity нужно поддерживать в акутальном состоянии.
Поле last_activity обновляется в двух случаях: когда вы записываете что-то новое в сессию, либо когда сессия обновляется (по-умолчанию каждые 5 минут, опять же, относительно last_activity; указывается в конфиге). И вот главная проблема в том, что при обновлении сессии меняется session_id и текущая сессия у пользователя сессия прерывается, стартует новая.

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

Проблема «животрепещущая», о ней часто вспоминают на форумах Codeigniter, но толкового решения там нигде я так и не увидел.

Но голь, как известно, на выдумки хитра, поэтому простое решение таки нашлось.

Наверняка, многие веб-программисты изучали и, может быть, даже использовали такой замечательный фреймворк как CodeIgniter. Мой выбор пал на него ввиду того, что у него самый низкий порог вхождения, он наиболее прост в изучении, хорошая документация, быстрый и т.д. и т.п. Для простых проектов самое «оно», чтоб попробовать свои силы именно как разработчик. Само собой, для более серьезных проектов лучше использовать более функциональные и навороченные фреймворки.

Далее буду описывать, как я «апгрейдил» CodeIgniter, чтобы использовать этот каркас для разных проектов, т.к. базовый его функционал и примеры из документации, мягко говоря, очень простые, а в жизни всё гораздо сложнее. Итак, начнем-с.

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

В мае 2011 года Google запустил поиск авиарейсов в виде текстовой подсказки при поисковом запросе (работает в том числе на русском языке для местных авиамаршрутов). Уже тогда стало ясно, что компания серьёзно работает в данном направлении и скоро турагентам придётся искать новую работу¹.

И продолжение не заставило долго ждать. Вчера открылся полноценный поиск авиабилетов с нормальным интерфейсом Google Flights. Он пока ограничен территорией США.

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

У каждого дизайнера наступает момент, когда ему надоедает заново рисовать одинаковые элементы на сайтах. Например, иконки социальных сетей или стрелочки для галерей. Также, технологам надоедает каждый раз нарезать «гиф» или «пнг» одного и того же элемента.

Чтобы упростить себе эту работу мы сделали шрифт, в котором каждая буква — символ (как правило, часто используемый).

Ну и собственно почему-бы им не поделиться со всеми?

Web Symbols

Несколько недель назад американский телеканал CNBC продемонстрировал фильм из своего документального цикла «Титаны», посвященный главе компании Apple Стиву Джобсу. Эти фильмы рассказывают о жизни выдающихся людей, изменивших мир. И конечно же, этот список был бы неполным, если бы в нем не было создателя Mac, iPod, iPhone, iPad и множества других полезных вещей. Русская озвучка подготовлена сайтом — AppleInsider.ru



Еще 2 части под катом.

При попытке отредактировать этот старый пост слетело всё форматирование. Может быть я его когда-нибудь исправлю.

Я потратил несколько месяцев на борьбу с глюками Git-svn и обдумывание разных вариантов, прежде чем пришёл к этому методу организации рабочего процесса с сайтом — простому, гибкому и удобному в работе.

Основные преимущества:

• Делая push из удалённой копии мы автоматически обновляем live-копию сайта
• Правки файлов на сервере не будут разрушать историю коммитов
• Простота, не нужны особые правила выполнения коммитов
• Можно применить к уже запущенному сайту, без повторного деплоя или перемещения файлов

К нам обратилась компания с обычной просьбой содействия в поиске IT специалистов.
Прислали вакансию, да непростую…

Картинка кликабельна

Конечно, нас не мог не удивить подход к оформлению вакансии. Результаты мини-расследования внутри.

0. Intro.

В процессе разработки достаточно часто нужно использовать различные кастомные селекты, инпуты, загрузщики файлов и прочее. В этом случае приходится писать дополнительные обработчики на стороне клиента, так как ZF из коробки не знает ничего, кроме стандартных элементов форм (капча есть исключение). В этой статье будет рассмотрено создание элемента на базе facebook-like TextboxList плагина для jQuery, который выглядит вот так: