• 7 советов, как улучшить интерфейс вашего приложения

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

      Когда-то я собрала набор простых правил, которые помогают избежать 80% самых распространенных ошибок, касающихся построения интерфейсов. Решила расшарить их для хабрасообщества.
      Кому интересно — добро пожаловать под кат.

      Читать дальше →
    • Как стать ведущим разработчиком. Часть 2

      • Translation
      Продолжение перевода статьи Джона Оллспоу о личных качествах ведущих разработчиков.

      Зрелые разработчики не жалуются просто так


      Вместо этого они рассуждают, основываясь на наблюдениях, и предлагают варианты решения найденной ими проблемы. Один опытный менеджер сказал мне: «Никогда не приходи к своему начальнику с жалобами, если у тебя нет готового решения проблемы. И лучше, если решений будет несколько». Но даже если у вас не получилось найти ни одного решения — это уже лучше, чем жаловаться просто так.
      Читать дальше →
    • От JQuery до Backbone

      imageВ данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.
      Читать дальше →
    • Кроссбраузерная кастомизация системного скроллбара



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

        Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
        Подробности
      • Почему мы стали использовать препроцессор Stylus в Яндекс.Почте, а также о библиотеке, помогающей жить с IE

          imageСегодня я хочу рассказать о том, почему и как мы пришли к использованию препроцессора Stylus в разработке Яндекс.Почты, а также описать используемый нами метод работы со стилями для IE. Он очень легко реализуется именно с помощью препроцессоров и делает поддержку IE простой и удобной. Мы разработали для этого специальную библиотеку, которой тоже поделимся — if-ie.styl.

          Это только первая статья из серии статей об использовании препроцессора Stylus в Яндекс.Почте, которые мы готовим к публикации.

          Читать дальше →
        • Суждения, умозаключения, силлогизмы… или достижения античной логики в одном посте

            Когда я учился в школе, мы изучали логику, но сейчас даже в моём любимом лицее её почему-то не преподают. Более того, я узнал, что большинство моих знакомых (даже успешно закончивших вузы) не знают, ни о логическом квадрате, ни о различных модусах. В этом небольшом топике, я постараюсь вкратце рассказать обо всём. Сразу скажу, что гуру дискретной математики вряд ли узнают что-то новое, но остальным должно быть как минимум интересно, а как максимум полезно.
            Читать дальше →
          • Видео лекций всего курса первой Школы разработки интерфейсов Яндекса

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

            За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.

            Выпускники первой Школы разработки интерфейсов Яндекса

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

            Читать дальше →
          • Думайте при разработке

              Недавно наткнулся на ошибку в Android приложении Яндекс.Метро. Если бы был чемпионкой мира по синхронному плаванию, то обязательно спросил бы: «Кто создавал программу „для галочки“? Кто работал „на отшибись“? Кто слабое звено?». Недоумение вызывала не сама ошибка, а то, что она попала в приложение и всё ещё не исправлена.

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

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

              В статье же мы будем рассматривать распространённые приложения, которые протестировать может любой участник команды. Давайте проведём небольшой эксперимент. Если у вас нет Android устройства, то попросите минут на десять у коллег или друзей. Скачайте приложение Яндекс.Метро и попробуйте его протестировать. Интересует актуальная на текущий момент версия 1.63 от 02.11.2012 сборка 159 (на Google Play стоит дата 21.01.2013). Для корректности проверки предлагаю снять галочку «Автообновление» в настройках Google Play.

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

              Эта же ошибка может проявить себя не так явно:
              небольшая подсказка
              Программа отображает маршруты между двумя станциям, но наиболее очевидный (и короткий) не находит.


              Продолжение
            • Иконкомания или боязнь неиспользования иконок

                «И эти дурацкие иконки! Пиктограмма — это знак, который ни на одном человеческом языке невозможно объяснить. Не зря же появилась речь!»
                Джеф Раскин.

                Сегодня, какой бы продукт не проектировался, почти всегда уместно или нет — используются иконки. Заказчики требующие использования иконок в интерфейсе настолько свыклись с ментальностью повсеместного использования иконок, что это обстоятельство можно принимать за культурный феномен. Того же принципа придерживаются почти все разработчики.
                Почему так получилось? Что в иконках не так? Можно ли без них обойтись?
                Давайте попробуем разобраться.

                Читать дальше →
              • То, что вам никто не говорил о z-index

                • Translation

                Проблема z-index в том, что многие просто не понимают, как он работает.
                Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

                Описание проблемы:


                Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
                Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index
                , равный 1, у остальных двух z-index не задан.
                Читать дальше →
              • JavaScript: от начала до конца

                  TL;DR
                  Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.
                  

                  У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
                  Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
                  Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.
                  Читать дальше →
                • Создание интерактивного прототипа с Fireworks и TAP (touch application prototyping)

                  • Tutorial
                  Кажется Хабр незаслуженно обошло стороной повальное увлечение проектирования интерфейсов с помощью Fireworks, (по крайней мере Smashingmagazine и Cooper усиленно пропагандируют его как стандарт де-факто в отрасли).

                  Статья не является переводом iOS Prototyping With TAP And Adobe Fireworks товарища Shlomo Goltz, однако идея разобраться в этом вопросе, наконец-то, появилась именно после этой статьи, да и картинку я «стырил» оттуда.

                  В нашей лаборатории мы часто размышляли над тем какие инструменты лучше всего подходят для прототипирования приложений. На тот момент был популярен Expression Blend + SketchFlow, но его привязанность к Silverlight, не давала нам ни малейшего шанса на то, что он будет популярен в мобильной разработке.
                  Читать дальше →
                  • +15
                  • 13k
                  • 1
                • Адаптивный веб-дизайн на практике

                    Мы уже писали о методах (Mobile First и Response Web Design), которые используем при разработке нашего сервиса. В этой статье я хочу поделиться с вами нашим опытом. То, что в теории кажется простым, на практике порой оборачивается кошмаром. Речь пойдет о том, как нам удается создавать универсальный веб-сервис, способный работать на большом количестве устройств.
                    Читать дальше →
                  • 013.jpg или Принцессы не какают

                      Вот уже совсем скоро конец света, дорогие мои айтишнички. Чтобы вы не боялись закрывать сегодня глазки, я расскажу вам добрую сказочку. О том, что даже после самого тёмного кончика светика, после самого дремучего апокалипсика, когда даже электрончики откажутся строем ходить по проводкам, для вас, дорогие айтишнички найдётся работёнка… Принцессы? Принцессы будут. И драконы тоже. Какая ж сказка без принцесс и драконов? Так что не боимся, закрываем глазоньки и слушаем волшебную сказочку...
                      image
                      — Именем Князя Питерского, давайте сюда декларацию. Что везем? Откуда?
                      — Из Новосибирска. 256 мегабайт сертифицированных данных для Интернета Его Высокопревосходительства. Научные, метеорологические, новости, деловая и частная корреспонденция, — доложила я, зная, что таможня шутить не любит.
                      — Открывайте, посмотрим.
                      — Что, все 256 мегабайт смотреть будете?
                      Открывайте, разберемся...
                    • [Перевод] Современный веб-разработчик, или 6 вещей, которые вы должны знать, чтобы выжить

                      Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.
                      Читать дальше →
                    • Анимация листа со спрайтами посредством steps()

                      • Translation
                      • Tutorial
                      [иллюстрация принципа]

                      Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:

                      у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:

                      div {
                          animation: play 1s steps(10) infinite;
                      }
                      @keyframes play { 
                            0% { background-position:    0px 0; } 
                          100% { background-position: -500px 0; }
                      }
                      

                      Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).

                      Вот небольшое демо.

                      Читать дальше →
                    • Реверс-инжиниринг арканоида DX-ball, или Новая жизнь старой игры

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

                        Возможно многим знакома игра DX-Ball, Я играл в нее еще в дошкольном возрасте, а уже в школе коротал за ней уроки информатики. Поэтому мне было интересно делать ее на HTML5.


                        Читать дальше →
                      • Примеры использования тригонометрических функций для анимации



                          Джастин Уиндл, программист и дизайнер из Google Creative Lab, опубликовал на Codepen.io интересное демо, показывающее примеры использования тригонометрических функций для задания динамики анимации (easing), которая выглядит естественно и правдоподобно. Демо написано с использованием легковесного анимационного фреймворка Sketch.js, написанного Уиндлом.

                          На сайте Джастина Уиндла можно найти ещё несколько интересных и полезных примеров креативной визуализации, например анимированное меню на CSS3 Makisu, демонстрацию работы его библиотеки Coffee Physics и многое другое.