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

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



    Читать дальше →
  • UICloud: Самая большая база пользовательских интерфейсов



      UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

      На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.
      • +159
      • 33.1k
      • 40
    • Оптимизация графики для Retina-экранов

      • Translation
      После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

      Для начала разберемся в терминологии.

      Физические пиксели


      Читать дальше →
    • «Див» блоки одинаковой высоты

      На днях столкнулся с задачей:


      Сделать две одинаковые по высоте -колонки, не зависимо от количества текста в какой либо из них.

      Условия:


      1. Никаких таблиц;
      2. Поддержка IE6+ и т.д;
      3. Резиновая верстка;
      4. Никакого JavaScript, чистый HTML и CSS.

      Дизайн:


      В дизайне изображены две колонки с отступом друг от друга. Каждый из них имеет свой фон и border с округленными уголками. На вид все просто.

      Поиск решений:


      Искал и естественно нашел очень полезный пост, где описаны все самые действенные способы решения данной задачи: http://habrahabr.ru/post/64173/.
      Собственно 4-е решение из этого поста было наиболее приемлемым, но с помощью него мне так и не удалось вывести два разных фона для своих колонок.

      Решение

      Читать дальше →
    • Вышел Twitter Bootstrap 2.1.0

        image

        Думаю расписывать о том, что из себя представляет данный фреймворк не надо, все и так знают.
        Исправлено куча багов, добавлены новые компоненты и плагины.
        Почитать документацию по нововедениям и увидеть их в действии можно тут.
        По этой ссылке можно забрать релиз 2.1.0 в zip-архиве(только js и css с иконками).
        Еще можно посетить официальный блог проекта и почитать о нововведениях.
        Читать дальше →
      • FileSystem API&File API: разбираемся и используем

          HTML5 Powered with Performance & Integration, and Offline & Storage
          В данной статье я хочу рассмотреть FileSystem API и File API, разобраться с его методами и показать пару полезных штук. Эта статья является компиляцией материалов с html5rocks (1, 2, 3). Все представленные ниже демки можно посмотреть по первым двум ссылкам. Третья ссылка так же предлагает ряд интересных демо. Ну а теперь займемся изучением материала.
          Читать дальше →
        • Ключевое слово this в javascript — учимся определять контекст на практике

          • Tutorial
          По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

          var f = function() {
              this.x = 5;
              (function() {
                  this.x = 3;
              })();
              console.log(this.x);
          };
          
          var obj = {x: 4, m: function() {
              console.log(this.x);
          }};
          
          
          f();
          new f();
          obj.m();
          new obj.m();
          f.call(f);
          obj.m.call(f);
          

          Читать дальше →
        • The Bricks — фреймворк для создания пользовательского интерфейса

          • Translation


          Bricks это бесплатный набор компонентов пользовательского интерфейса. Он предназначен для упрощения создания дизайна и прототипирования будущего сайта. Этот набор позволит вам сэкономить время при разработке веб элементов и станет замечательной основой для создания сайта от дизайна до верстки. Больше не надо тратить время на рисование многочисленных форм, так как они уже включены в этот набор. Просто переместите компонент в свой проект, измените его стиль и пользуйтесь. Это просто, быстро и элегантно.
          Читать дальше →
        • Оптимизация длинных списков логических значений на JavaScript

          Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.
          Читать дальше →
        • JsRender: Новое поколение jQuery Templates

            Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

            Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).
            Читать дальше →
          • HTML5: Web Workers и AJAX

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

              Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию.
              Читать дальше →
            • 2 млн точек на карте? легко!

                Не так давно для создания сервиса (да и «в загашник» положить модуль) потребовалось придумать способ как быстро из sql базы делать выборки точек расположенных на карте.
                Кода будет мало, что бы не отвлекать от понимания системы в целом.



                Читать дальше →
              • JavaScript F.A.Q: Часть 2

                  image

                  Около 2-х месяцев назад я и TheShock собирали вопросы по JavaScript в теме FAQ по JavaScript: задавайте вопросы. Первая часть, те вопросы, которые достались мне, появилась буквально через несколько дней JavaScript F.A.Q: Часть 1, а вот вторая часть все не выходит и не выходит. TheShock сейчас переезжает в другую страну и поэтому ему не до ответов. Он попросил меня ответить на его часть. Итак вторая часть ответов — те вопросы, которые достались тоже мне.
                  Читать дальше →
                • Загрузка и инициализация JavaScript


                    С появлением мобильного веба наш интернет стал снова плохим, а устройства медленными. 3G, 4G, Wi-Fi… — они, конечно, где-то есть, но когда очень надо, то как правило скорость падает до околомодемной и получается, что наши мобильный устройства «каменного века» попадают в условия современного объема информации. Даже в центре города (правда на 15-м этаже) значок мобильного интернета может показывать волшебную букву Е, намекающую о том, что уж лучше не тратить нервы и потерпеть. Лучше уж использовать нативную версию какого-то веб-сервиса, чем каждый раз ждать, загружать по мегабайту, чтобы отправить короткое сообщение. Нативную версию веб-сервиса... Понятное дело маркетинг, гонка приложений. Однако, же пользователи выбирают нативные веб-приложения, которые работают быстрее, не качают кучу ресурсов, хотя им приходится периодически его обновлять.

                    Эта статья о том какими путями можно оптимизировать загрузку и инициализацию JavaScript.
                    Читать дальше →
                  • 20 заповедей дизайна пользовательского интерфейса

                      Это перевод оригинальной статьи Principles of User Interface Design

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

                      — Пол Рэнд (Paul Rand)

                      1. Обязанность интерфейса — обеспечение взаимодействия


                      Интерфейсы служат для обеспечения взаимодействия между людьми и окружающим миром. Они помогают нам прояснять, освещать, реализовывать и наблюдать взаимосвязи; они могут объединять и разъединять нас, влиять на наши ожидания; а кроме того, они дают нам доступ к различным услугам. Не стоит принимать процесс разработки интерфейса за искусство в чистом виде, а сам интерфейс — за некий арт-объект. Интерфейсы призваны выполнять определенные функции, и эффективность их работы можно измерить. Но и к одним только утилитарным вопросам роль интерфейсов не сводится. Действительно хорошие интерфейсы способны вдохновлять, пробуждать, окутывать тайной и укреплять наши отношения с окружающим миром.
                      Читать дальше →
                    • Я не могу написать бинарный поиск

                        Недавно (буквально два года назад) тут пробегала статья Только 10% программистов способны написать двоичный поиск. Двоичный поиск — это классический алгоритм поиска. Мало того, это еще чрезвычайно простой алгоритм, который можно очень легко описать: берем отсортированный массив, смотрим в середину, если не нашли там число, в зависимости от того, что в середине — ищем это число этим же методом либо в левой части, либо в правой, откидывая средний элемент. Для функций также, просто берем не массив, а функцию. Все очень и очень просто, алгоритм описан почти везде, все баги словлены и описаны.

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

                        А в чем, собственно, проблема?
                      • Удобная работа с LocalStorage. Ну и с SessionStorage заодно

                          Хочу представить вашему вниманию библиотеку для удобной работы с Local и Session Storage. Она появилась, как побочный продукт работы над проектом и содержит несколько довольно удобных функций. Библиотека поддерживает все современные браузеры, а именно:

                          • Internet Explorer 8+
                          • Mozilla Firefox 3.5+
                          • Google Chrome 4+
                          • Safari 4+
                          • Opera 10.5+

                          Помимо традиционных — set/get/inc/dec, есть набор удобных «вкусностей»:

                          • inc работает со строками
                          • extend для объектов
                          • много методов для работы с массивами
                            • обычные append/prepend/takeLast/takeFirst/getLast/getFirst
                            • с проверкой уникальности — .appendUnique/.prependUnique
                            • во все append/prepend методы можно передавать лимит — удобно для организации MRU списков
                          • calls chaining — я от него в восторге :)

                          Если заинтересовал — прошу под кат за примерами. Мне кажется они достаточно хорошо показывают возможности библиотеки.

                          Читать дальше →
                        • Отзывчивая типографика: Основы

                          • Translation


                          Когда мы создаем веб-сайты обычно мы начинаем с определения текста документа. Определение основного текста задает ширину главной колонки на странице, все остальное должно произойти само по себе. Должно. До недавнего времени разрешение экрана было более менее одинаковым. Сегодня мы имеем дело с огромным количеством экранов разного разрешения и размеров. Это делает вещи намного сложнее.
                          Читать дальше →
                        • OpenLayers или делаем сервис мониторинга транспорта

                            Сейчас на рынке много предложений по продаже мобильных устройств, предназначенных для контроля движущихся объектов или трекеров. В большинстве из них есть функция передачи информации по GPRS на любой заданный веб-адрес через определенный интервал времени. Чаще всего формат передачи данных разный. Поэтому мы не будем рассматривать вопрос загрузки данных с трекера в базу. Предположим данные есть и мы хотим приступить к созданию сервиса мониторинга транспорта. Основу такой системы образуют возможности:
                            -выбор карты и ее отображение
                            -отображение точки или картинки и подписи к ней
                            -отображение полигона и его редактирование
                            -отображение линии и ее редактирование
                            -отображение информации связной с полигонами, линиями, точками (всплывающие подсказки)
                            -немного математики (подсчет пройденного пути, площадь полигона, принадлежность точки полигону)
                            Все эти функции легко реализовать с помощью OpenLayers, библиотеки на JavaScript.

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