• Игрофикация – игра как мотивация в бизнесе



      Сначала главная новость – Coursera скоро будет доступна с субтитрами на русском, и первый курс как раз геймификация Кевина Вербаха.

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

      Вообще, игрофикация или геймификация — это когда игровые механики накладываются на что-то в реальной жизни. В СССР, например, были соревнования смен, доска с лучшими работниками и так далее — всё это хорошие добрые игры, когда работа идёт не ради плана, а ради того, чтобы доказать свою крутость или просто поучаствовать в процессе. Ещё примеры:
      • Хабр. Карма, рейтинг плюс наши бейджи и инвайты: они создают дополнительную мотивацию писать посты.
      • Террористы. На самой лекции также говорилось, что боевики в Аль-Каиде проходят несколько уровней своего рода игры, каждый из которых разблокирует новые возможности в организации.
      • Обучение. Там же приводился пример про школу, в которой все в начальных классах стали играть роли в экипаже космического корабля. Учиться стало интересно уже не потому что так надо, а потому, что это помогало проходить сюжет.
      Читать дальше →
    • Быстрое разверытвание среды разработки для Ruby on Rails

      Привет хабражители. Если вам надоело постоянно устанавливать на новых машинах с разными ОС одно и тоже rails окружение с десятками зависимостей и кучей пакетов, то предлагаю вам ознакомится с интересным решением от rails-core разработчиков. На вашей хост-машине нужно иметь лишь Vagrant и Virtual Box.
      Читать дальше →
    • Вышел Emmet v1.0

        Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

        Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:

        section>h2+ul.nav>li.nav-item$*5>a

        простым нажатием клавиши превращается в:

        <section>
            <h2></h2>
            <ul class="nav">
                <li class="nav-item1"><a href=""></a></li>
                <li class="nav-item2"><a href=""></a></li>
                <li class="nav-item3"><a href=""></a></li>
                <li class="nav-item4"><a href=""></a></li>
                <li class="nav-item5"><a href=""></a></li>
            </ul>
        </section>
        

        Подробности
      • Touch-web: Swipe

          Этим постом мы продолжаем серию статей на тему разработки веб-интерфейсов для touch-устройств.

          Смартфоны с сенсорными экранами достаточно сильно распространены и стали незаменимыми помощниками многим из нас. Потому нельзя не учитывать их особенности при разработке мобильных веб-интерфейсов.
          Сенсорное управление существенно отличается от привычного управления мышкой.
          Пользователь взаимодействует пальцами с самим экраном. И в зависимости от того, какие движения и сколькими пальцами производит пользователь, интерфейс реагирует по-разному: если быстро коснулся экрана и отпустил палец, то срабатывает клик; если коснулся и провел пальцем по экрану – скролл; если провел двумя пальцами – zoom; и великое множество других вариантов реакции.

          Сегодня речь пойдет о swipe, в простонародье – листалке. Swipe позволяет перелистывать «страницы» привычным движением пальца. О том, как грамотно реализовать swipe, я расскажу на примере блока новостей на главной странице портала Mail.Ru.



          Много подробностей под катом
        • Загрузка файлов на сервер в 2012 году

            В один прекрасный момент передо мной встала задача создать API для работы с файлами на клиенте и их загрузки на сервер.

            Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

            Читать дальше →
          • Numeral.js — библиотека для форматирования чисел

              На создание библиотеки для удобного форматирования чисел программиста и веб-дизайнера Адама Дрэйпера вдохновила аналогичная библиотека для даты и времени — moment.js. Numeral.js позволяет задавать число знаков после запятой, символы-разделители для дробной части и групп разрядов, формат представления валют, процентов, времени, аббревиатуры для миллионов, миллиардов, мегабайтов и т.п. Кроме того, можно восстанавливать числовые значения из существующего строкового представления. Библиотека распространяется под лицензией MIT.
              Читать дальше →
            • Мобильные браузеры и position:fixed

              CSS-свойство position:fixed в Mobile Safari сносно работает начиная c iOS 5. В Android родной браузер частично понимает это свойство начиная с версии системы 2.1, адекватно — с 2.2, полная поддержка — с 3.0. Подробнее: таблица поддержки position:fixed.

              HTML:
              <div id="topbar">Fixed Title</div>
              <div id="content">
              	<h2>Start</h2>
              	<p>Main content text </p>
              	...
              	<p>Main content text </p>
              	<h2>End</h2>
              </div>
              <div id="bottombar">Fixed footer</div>
              

              CSS:
              #content{
              	padding: 50px 0; /* отбиваем высоту баров, чтобы не перекрывать контент вверху и внизу страницы */
              }
              #topbar,
              #bottombar {
              	position: fixed;
              	left: 0;
              	width:100%;
              	height: 50px; /* фиксируем высоту для простоты */
              	line-height:50px;
              	background:#eee;
              	text-align: center;
              }
              #topbar {top: 0;}
              #bottombar {bottom: 0;}
              
              

              Теперь в современных смартах у нас topbar и bottombar «прибиты» соответственно к верху и к низу окна. Проблема позицонирования при первом скролле в iOS решается мини-Javacript'ом (исправлено):
              window.scrollBy(0, 1);
              

              А как быть со старичками?
            • Сколько стоит создать приложение или вся правда о деньгах

                Узнав, что я занимаюсь разработкой мобильных приложений, мои знакомые время от времени, спрашивают: «сколько стоит разработать приложение?». И я честно отвечаю: «от 200 долларов». Приложение будет писать на экране HELLO WORLD, его не пропустят в магазин из-за «bad user experience», но работать-то приложение будет!

                Самое удивительное, что огромное количество разработчиков и вправду создает что-то за 3000 долларов и даже выкладывает это в App Store.

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

                Так и хочется, заглянуть им в глаза и проникновенно спросить:

                — Ребят, а вы из какой сказки?

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

                Основные статьи расходов при создании проекта:

                Статья Расход
                Дизайн приложения $ 13 000
                Создание уникальности $ 10 000
                Производство графики $ 35 000
                Программирование $ 45 000
                Текстовый контент $ 5 000
                Локализация $ 3 000
                Музыка и звук $ 1 000
                Полировка $ 17 000
                Маркетинг $ 30 000
                Управление $ 30 000
                Итого: $ 189 000


                Вся раскладка будет сделана на примере нашего приложения "МоиЭмоции". Приложение бесплатное, весь функционал можно посмотреть.

                Почему так дорого?
              • 2013: Обратный отсчет до Rails 4

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

                  Самое время пробовать новинку на вкус. Ребята из Remarkable Labs пообещали выпускать для Вас по статье в день до самого нового года, освещая различные аспекты желанной четвертой рельсы.
                  Читать дальше →
                • Значение DOM «window.devicePixelRatio» и свойство CSS «device-pixel-ratio» станут переменными величинами

                    Более двух лет прошло после начала продаж iPhone 4 летом 2010 года, и за эти два года сайтостроители привыкли проверять джаваскриптом значение window.devicePixelRatio (или же использовать в CSS медиазапрос device-pixel-ratio) как простое и бесхитростное средство, позволяющее тотчас же выяснить, запущен ли сайт на сетчаточном дисплее (retina display) или нет. Если величина devicePixelRatio равна двойке, то перед нами сетчаточный дисплей (четвёртый iPhone, четвёртый iPod Touch, третий iPad, или более новые устройства, или портативный компьютер «MacBook Pro with Retina Display»); если же величина devicePixelRatio равна единице (или не определена), то перед нами дисплей обычной чёткости.

                    Чуть сложнее, по сравнению с эппловскими, бывает учёт устройств, работающих под Android: там приходится воспринимать дробные величины, не равные единице или двойке. Peter-Paul Koch сообщил во блогозаписи «More about devicePixelRatio» о том, что (по его наблюдениям) в Nexus One величина devicePixelRatio равна 1,5, тогда как в Galaxy Nexus и в Galaxy Note она равна двум в WebKit и 2,25 в Opera Mobile.

                    Но эти мелкие отличия не меняют картины в целом: все привыкли думать о значении величины devicePixelRatio как о таком свойстве устройства, которое на одном и том же мобильнике (или планшете, или ноутбуке) остаётся беспрерывно постоянным. В частности, именно на этом были основаны все, все рецепты из хабрахабровских блогозаписей «Адаптируем графику под Retina экран», «Распознаём retina-дисплеи джаваскриптом», «Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet», «Как отличить версию iPad в Safari», «Оптимизация графики для Retina-экранов», «Комплексная подготовка сайта к Retina» и им подобных.

                    Но пришёл ноябрь 2012 года, и настаёт пора отказаться от этой привычки, настаёт пора критически пересмотреть прежние рецепты. Сейчас скажу почему.

                    Читать дальше →
                  • Методы монетизации интернет проектов

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

                      Подробности
                    • Как стать миллионером в AppStore или немного формул про продвижение и продажи. Часть 2

                        Great Appeal или девушка на миллион



                        Девушка на миллион

                        Итак, в прошлой статье мы закончили на том, что разобрались с тем, как получить «показы» нашего приложения в AppStore.

                        Иногда ошибочно считается, что запуск – это самое сложное. Это, мягко скажем, не так. Настоящая работа начинается после запуска.

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

                        Кто виноват и что делать?
                      • JavaScript SIP библиотека от авторов стандарта

                          Я уже писал заметку на эту тему, с того времени стала доступна еще одна JavaScript SIP библиотека. В первой статье я упоминал её, но на тот момент вся информация о библиотеке включала: описание авторов и видео демонстрирующее работу. Сейчас исходный код открыт под MIT лицензией, имеются документация и форум.

                          Примечательно, что данную библиотеку разрабатывают авторы того самого стандарта, который и описывает особенности SIP протокола при работе поверх WebSocket. Помимо этого разработчики указывают следующие достоинства:
                          • легковесна, ~140КB
                          • простой и мощный API
                          • совместима с популярными SIP серверами
                          • аудио-видео вызовы; мгновенные сообщения
                          • статус пользователей (эта функция уникальна, пока отсутствует в других библиотеках)

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

                          Под катом длинное подробное видео с пошаговой инструкцией в первой половине для тех кто захочет попробовать самостоятельно, и демонстрацией работы во второй половине (c 3:10). Кстати, в свежих версиях Chrome, WebRTC — протокол для обмена аудио-видео данными, доступен и включен по умолчанию.
                          Читать дальше →
                          • +51
                          • 18.2k
                          • 4
                        • Хоткеи в приложенях Ruby on Rails

                            Fingers on the railsMousetrap — javascript-библиотека, позволяющая легко и непринужденно добавлять хоткеи на сайты, появилась не так давно. Но уже успела полюбиться мне настолько, что я решил сделать ее добавление к проекту на Ruby on Rails простым и приятным. А именно, завернуть в ruby-библиотеку для рельсов. Так появился gem mousetrap-rails.

                            Читать дальше →
                          • Модель CMMI

                              Всем здравствуйте! Наконец-то я на Хабре. Постараюсь незамедлительно начать приносить пользу если не всему сообществу, то хотя бы некоторой его части:)

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

                              Что такое CMMI?


                              Википедия даёт следующее определение:
                              Capability Maturity Model Integration (CMMI) – Комплексная модель производительности и зрелости – набор моделей (методологий) совершенствования процессов в организациях разных размеров и видов деятельности. CMMI содержит набор рекомендаций в виде практик, реализация которых, по мнению разработчиков модели, позволяет реализовать цели, необходимые для полной реализации определенных областей деятельности.

                              Читать дальше →
                            • Обзор свежих материалов, июль-сентябрь 2012

                                Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июнь 2012.



                                Читать дальше →
                                • +36
                                • 19.6k
                                • 5
                              • Руководство по работе с Apple Push Notification Service

                                Статья представляет собой вольный перевод руководства по работе с Apple Push Notification Service сайта raywenderlich.com и некоторые мои дополнения.

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

                                Но что если происходит что-то интересное и вы хотите сообщить об этом пользователям, даже если ваше приложение у них не запущено?
                                Читать дальше →
                              • Комплексная подготовка сайта к Retina

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

                                Пожалуй лучшим способом адаптации на сегодняшний день является способ c background-image в CSS. Но он сложно применим к обычным изображениям в теге . Поэтому я решил определить для себя список необходимых мер по достижению результата в комплексе и продолжить поиски решения. Ниже описано два способа, каждый из которых применим к своим задачам. Показанные решения не претендуют на открытие, скорее это агрегация существующих способов, описанных ранее моими коллегами по цеху веб-разработок и небольшие собственные дополнения.
                                Читать дальше →
                              • Внутренние тени в CSS

                                • Translation
                                • Tutorial
                                Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

                                Читать дальше →