• [Перевод] CSS Filters

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

      Привет!

      Ребята с ресурса Data Visualization собрали несколько очень интересных решений для представления данных:



      Datavisualization.ch Selected Tools

      Решения представляют собой диаграммы, карты и графики. Идеи реализованы как на стандартных, так и на неизвестных библиотеках. Иногда используются простые технологии, а результат получается очень впечатляющим.

      Datavisualization.ch является одним из ведущих ресурсов в интернете, рассказывающих о визуализации данных и инфографике. На сайте обсуждаются и исследуются интересные и инновационные идеи в этих областях.
      • +73
      • 12.7k
      • 6
    • Подробное руководство по установке Android-x86

        Эмулятор который идет в комплекте с Android SDK, не очень шустрый.
        Основная идея использовать VirtualBox + Android X86, для преодоления проблем с производительностью.

        Что нам необходимо:
        Среда разработки Eclipse + Android SDK тут,
        а также VirtualBox.

        Под катом много картинок, и процесс установки, а также некоторые полезные советы.
        Читать дальше →
      • Интерфейс «как в маркете» и кое-что еще

          Про слайдинг экранов в Android тут уже писали. Но в таком случае приложение будет выглядеть так:

          image

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

          image

          image

          Тогда добро пожаловать под кат!
          Читать дальше →
        • 50 советов для разработки безупречного дизайна iOS приложения

          Привожу перевод статьи Ника Карсона. В статье собраны вместе, как мне кажется, основные правила построения интерфейса для iOS приложений.

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

          2. Ориентируйтесь на устройство при создании приложений: учтите не только размер экрана, но и где и когда устройство используется. Больше всего iPad используется для развлечений между 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус или в кофейне. Учтите различные сценарии использования при разработке приложений – включая и то, как далеко устройство расположено от лица пользователя.

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

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

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

          За остальными 45-ю — добро пожаловать подкат.
          Читать дальше →
        • Разработка мобильных приложений на PhoneGap и jQuery Mobile



            PhoneGap — это OpenSource платформа, позволяющая разрабатывать мобильные приложения на HTML, JavaScript и CSS под различные платформы (практически без изменения кода приложения) в их число входят: iOS, Android, Blackberry, WebOS, Symbian и Windows Mobile на подходе. Прелесть его в том, что он не требует навыков разработки под конкретную платформу. Вы пишете свое приложение на JavaScript, используете HTML и CSS для разметки. Вы пишете мобильное приложение как обычный сайт или веб-сервис.
            Движок PhoneGap расширяет API браузера и добавляет следующие возможности: доступ к акселометру, доступ к камере (пока только фото), доступ к компасу, доступ к списку контактов, запись и прослушивание аудио файлов, предоставляет доступ к файловой системе, позволяет работать с разными HTML5 хранилищами localStorage, Web SQL и т.п а также позволяет безболезненно обращаться к любому кросс-доменному адресу.
            Кроме платформы PhoneGap имеет, пока бесплатный, билдер приложений под все устройства в один клик.

            jQuery Mobile


            Думаю все знают, но напомню ещё раз. jQuery Mobile — это надстройка над jQuery, позволяющая безо всяких проблем разрабатывать мобильные веб сайты и мобильные веб приложения.

            Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими, но желаете попробовать свои силы в мобильной разработке, то эта статья для вас.
            Читать дальше →
          • 16 инструментов для создания прототипов

            • Translation


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

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

            16 инструментов со ссылками и их краткое описание
          • Mockup.io — сервис для демонстрации макетов iOS интерфейсов

              image

              Коллеги, за последние 2.5 года я со своей командой работали над более чем 40 iOS приложениями и более 100-и их версий. За это время мы увидели тясячи заготовок, макетов и финальных дизайнов. С каждым проектом мы все больше усваиваем важность части дизайна в процессе разработки. В связи с чем мы рискнули создать свой продукт, о котором я хочу рассказать сегодня.
              Читать дальше →
            • Руководство по оформлению HTML/CSS кода от Google

              • Translation

              От переводчика


              С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

              Введение


              Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

              Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

              Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
              Читать дальше →
            • Как правильно сортировать контент на основе оценок пользователей

              • Translation


              В оригинале название звучит как «How Not To Sort By Average Rating». Я подумал, что дословный перевод «Как не сортировать по усреднённому рейтингу» будет малопонятен и хуже отражает содержание статьи.

              Постановка проблемы


              Вы занимаетесь веб программированием. У вас есть пользователи, которые оценивают контент на вашем сайте. Вы хотите разместить высоко оцененный контент наверху, а низко оцененный — внизу. Для этого на основе пользовательских оценок вам нужно вычислить некий «рейтинг».

              Неправильное решение №1

              Рейтинг= (Число положительных оценок) - (Число отрицательных оценок)
              

              Читать дальше →
            • Введение в CSS3 Multicolumn. Работаем с колонками

              • Tutorial
              apples

              Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

              Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
              Читать дальше →
            • Бинарные часы своими руками (Mega32, DS1307)

              Пожелав собрать бинарные часы, я так и не нашел приемлемой готовой конструкции в сети. Большинство часов обладали серьезным недостатком – при отключении питания, настройки времени сбивались. По счастливой случайности, незадолго до этого, я начал осваивать язык Си и микроконтроллеры AVR. Итак, было решено подкрепить полученные знания практическим опытом, а заодно изобрести велосипед. А еще я очень люблю зеленые мигающие светодиоды.

              Читать дальше →
            • Добавляем поддержку Windows Live Writer (Meta Weblog API) в блог на Django


                Пару лет назад посчастливилось мне иметь блог на WordPress. До наших дней блог, как и вся база постов к моему сожалению не дожила, но рассказать я хочу не о самом блоге, а о том с помощью чего вся информация публиковалась. В то время Microsoft не так давно запустила Windows 7, а вместе с ней и пакет приложений Windows Live. Вот и я решил взглянуть – чего в этом пакете вкусного? Больше всего мне приглянулось приложение Windows Live Writer – программа позволяющая набирать и форматировать тексты, и публиковать их в блог. Удобный интерфейс, множество инструментов для форматирования, возможность хранить черновики локально, и многое другое – я влюбился. Спустя некоторое время свой блог без Windows Live Writer я уже не представлял.
                И чего же было дальше?
                • +18
                • 1.9k
                • 1
              • Представлен стандарт CSS Grid Alignment Level 3

                  image

                  Два дня назад я представил на Хабре задачу по компоновке силами CSS. Задача привлекла небольшое внимание разработчиков и было представлено несколько разных решений, в том числе такие, которые практически точно решают задачу.

                  Пообещав представить оригинальное решение я немного слукавил, потому что это решение представляет собой использование нового стандарта W3C CSS Grid Alignment Level 3, который был представлен в начале ноября на мероприятии TPAC 2010.

                  Публикуя задачу на Хабре я хотел посмотреть на варианты решений от разработчиков и попытаться понять, чем новый стандарт может облегчить нам всем жизнь.
                  Читать дальше →
                • Как сделать хороший промо-ролик для стартапа. Часть 1. Проблема-решение

                    image

                    Вы прошли долгий и трудный путь от идеи до реализации вашего проекта. Стадия закрытого тестирования завершена, и вы готовы презентовать ваше детище миру. Главным и какое-то время единственным рекламоносителем вашего проекта может стать промо-ролик. Его можно выложить на YouTube и в социальных сетях, разослать партнёрам и инвесторам, разместить на главной странице сайта, сопроводить им пресс-релиз для СМИ или оживить выступление на конференции.

                    Цель промо-ролика: кратко и понятно рассказать про суть и ценность проекта, заинтересовывать целевую аудиторию и побудить стать пользователем.

                    Как сделать хороший ролик, который досмотрят до конца? Как сделать так, чтобы ролик вызвал улыбку, интерес, желание ознакомиться с проектом поближе? Универсальных рецептов нет, но есть отработанные сюжетные схемы, а также грабли, на которые до вас уже наступали много раз.
                    Читать дальше →
                  • GeoIP и Django

                      Вебразработчики частенько сталкиваются с классической задачей определения местоположения пользователя по его IP-адресу. Существует множество различных решений, например на основе мировой базы Maxmind Geolite или российской IpgeoBase. Все они обладают достаточно низкуровневыми API, ну оно и понятно: на входе айпишник, на выходе страна, либо город и, если повезёт, ещё какая-нибудь полезная информация.

                      У всех сайтов с GeoIP, которые мы запускали, есть общая черта: они не только нуждаются в простой геолокации, необходимо также выводить различный контент на сайте в зависимости от месторасположения пользователя. Чтобы упростить для себя эту задачу мы написали небольшую батарейку django-geoip, вдохновившись приложением django-ipgeobase.
                      Читать дальше →
                    • Знакомство с Parallax Scrolling

                      • Translation
                      Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

                      Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

                      Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.


                      Читать дальше →
                    • 1997 год. Стив Джобс: Первые размышления об «облачных сервисах» (русский перевод)

                        image image

                        Предлагаем посмотреть редкое видео с презентации Apple от 1997 года. Именно тогда Стив Джобс впервые рассказал разработчикам о потенциале облачных сервисов, которые стали входить в нашу жизнь только сейчас. Перевод на русский язык — канал GTV.
                        Читать дальше →
                      • jQuery File Upload

                          Ура! Еще один, свеженький… чем он лучше других?



                          а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
                          б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
                          в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
                          г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
                          д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

                          blueimp.github.com/jQuery-File-Upload

                          Поддержка браузеров:

                          github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

                          Читать дальше →
                        • Обзор свежих материалов, декабрь 2011

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


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