Доброго времени суток уважаемые хабравчане. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисов хотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.



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

В итоге ролик мы сняли сами, без опыта и с минимальным бюджетом. Получилось лучше, чем думали: в первые сутки 1500+ просмотров и рекордно много лайков на нашей fb странице. Позитива в комментариях добавило то, что делали всё сами. Для молодого банковского сервиса с особым походом к обслуживанию этот позитив получился как нельзя кстати.



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

Бенчмарк Valley

Это вторая и заключительная часть статьи, посвященной процедурным методам производства контента для 3D приложений. Первую часть Вы можете найти здесь.

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

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

В этот раз речь пойдёт о том, какими средствами и приёмами мы пользовались при создании бенчмарка Valley, чтобы в максимально сжатые сроки произвести большое количество фотореалистичного контента.

Вторая часть: Оптимизируем Boid'ов на Unity

Задумывались ли вы когда-нибудь о то, почему птицы летая большими стаями никогда не сталкиваются и не коллапсируют в огромный галдящий перьевой ком? Хм, если подумать, это было бы круто. В любом случае, однажды в 1986 нашёлся человек по имени Крейг Рейнольдс, который решил создать простую модель поведения птиц в стаях и назвал её Boids. В модели у каждого боида есть три базовых правила: Separation, Alignment и Cohesion. Первое заключается в избегании столкновения с соседями, второе заставляет лететь примерно в ту же сторону что и соседи, а третье говорит не летать в одиночку и держаться группы. Эти простые правила позволяют создать правдоподобные стаи птиц, рыб и другой живности, чем и пользуются в кино и игровой индустрии.

В статье я расскажу как можно реализовать эту модель на практике. Для разработки я использую Unity и C#, но большинство вещей верны для других движков и языков. В этом туториале я не разжёвываю основы работы с Unity, подразумевается, что вы знаете эффект комбинации Ctrl+Shift+N на сцене, умеете работать с инспектором, дублировать и двигать объекты. Если нет, то советую начать с этой статьи. Или можете просто посмотреть на картинки.

В этой статье я собираюсь описать разработку приложения для iphone, которое будет в реальном времени обрабатывать видео с камеры устройства. Для этого мы будем использовать GPUImage фреймворк, напишем собственный шейдер на OpenGL ES и попробуем разобраться в том, что представляют из себя фильтры для обработки изображений.

Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования

С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

• письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
• они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
• нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
• редактирование компонентов, которые применяются еще в 50 шаблонах писем;
• необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

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

Надо сразу сказать, что первое руководство действительно для новичков — профессионалы вряд ли обнаружат там нечто секретное и таинственное. Любопытно только то, что в Google не поленились и подготовили соответствующий одностраничный PDF-документ сразу в 13 языковых редакциях, включая и русский (английская версия). При этом документ (А4) выглядит визуально привлекательно и информативно, так что его можно распечатать и повесить в офисе, если вдруг возникнет необходимость в напоминании банальностей.

Второй документ более серьезного уровня и уже только на английском языке. Он довольно подробно и с примерами описывает различные «best practices» вроде создания уникальных заголовков веб-страниц, заполнения мета-тегов или улучшения структуры URL. Забрать документ можно отсюда.

Я хотел бы Вам рассказать про вывод текста на экран в iOS. Вначале это задумывалось как туториал, затем как сбор неочевидных фактов, а получилось что получилось.

Способы вывода текста условно можно разделить на несколько категорий:

• UIKit — привычные UI контролы. Дают только базовые возможности по отображению, совсем мало возможностей по форматированию
• UIKit + NSAttributedString — привычные UI контролы с возможностью установки строки с атрибутами отображения. Куча возможностей по форматированию
• CoreText — фреймворк для работы с текстом и текстовыми представлениями. В связке с NSAttributedString дает массу возможностей по форматированию текста и, благодаря нескольким уровням абстракций над элементами текста, расширенные методы по их отображению
• CoreGraphics — с помощью него тоже можно отрисовывать текст

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations

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

Для нетерпеливых: То, что получится в итоге

Вступление

В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь

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

Сделай сам!

• Создаем мир и камеру
• Добавляем объекты в мир
• Добавляем спрайты к облакам
• Магия
• Пролог

Поооеехааали!

Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

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

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

Прежде чем отправить в AppStore ваше приложение, вы долго тестируете его, чтобы убедиться, что ваше приложение работает безупречно. Оно отлично работает на вашем устройстве, но после того, как приложение попало в App Store, некоторые пользователи сообщают, что оно «вылетает»!

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

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

В этом уроке вы узнаете, как выглядят аварийные журналы, а также как получить аварийный журнал из iOS-устройства и iTunes Connect. Вы узнаете о символизации и о том, как вернуться от аварийного журнала назад, в код. Мы также займёмся отладкой приложения с ошибками, которые могут привести к сбою в определенных ситуациях.

Сейчас всё больше мобильных приложений становятся геозависимыми. Одни просто не имеют смысла без знаний о местоположении пользователя, другие становятся с ним удобнее. Это так называемые Location Based Services (LBS): навигаторы, форскверы, инстаграмы с геотегами фотографий и даже приложения-напоминалки, которые срабатывают около конкретного места, например, рядом с офисом или магазином.

Для сервисов и приложений Яндекса мы создали собственную реализацию метода определения местоположения без GPS — Яндекс.Локатор. Он экономит время пользователя и делает наши приложения чуточку умнее. В Навигаторе и Картах она избавляет от ввода начальной точки маршрута, даже если вы на крытой парковке. А при выборе фильма в Киноафише или товара в мобильном Маркете помогает сразу показать, где их найти именно в вашем районе города. Ну и, разумеется, при поиске кафе и банкоматов — позволяет показывать вам сразу ближайшие, даже когда вы в метро.


Технологию мы давно открыли в виде бесплатного API. Сегодня хотим рассказать, как она устроена.

Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты

Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

В последнее время обратил внимание на ролики программ, в которых реализован так называемый псевдо 3D эффект: когда картинка приложения изменяется в зависимости от положения пользователя относительно телефона. Или телефона относительно пользователя: смотря с какой стороны вы находитесь :). Для достижения этого эффекта можно использовать либо сенсоры либо отслеживать положение глаз пользователя (т.н. head tracking). Второй способ несколько сложнее, хотя даёт более правдоподобный результат.

В качестве эксперимента мы решили попробовать сделать такой 3Д фон в программе Deluxe Moon Pro (В версии на маркете пока этот эффект не реализован!).

Вот пример того, что у нас получилось:


Итак начнем.

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

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

Создание фотогалереи для адаптивного дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.



Демонстрация | Исходники

Прочитав посты Полезные штуки для iOS разработчиков #1 от Coder89 и Полезные штуки для iOS разработчика #2 от SeriiZ, решил собрать «полезные штуки» для дизайнеров пользовательского интерфейса iOS приложений.

Онлайн-сервисы становятся все популярнее, постепенно усложняя функционал и улучшая интерфейсы. В этой подборке представлены онлайн-инструменты для кодеров.

Cloud9

«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.

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