• Коллекция практических советов и заметок по вёрстке

      CSS Refresher


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

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


      Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

      Содержание


      1. Позиционирование (position)
      2. Отображение элемента в документе (display)
      3. Плавающие элементы (float)
      4. CSS селекторы
      5. Эффективные селекторы
      6. Переотрисовка и перерасчет
      7. CSS3 свойства
      8. CSS3 медиа-запросы
      9. Адаптивный web-дизайн
      10. CSS3 переходы
      11. CSS3 анимации
      12. Масштабируемая векторная графика (SVG)
      13. CSS спрайты
      14. Вертикальное выравнивание
      15. Известные проблемы

      Читать дальше →
    • Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 1: письмо, идея, прототип

        image

        Началось так: мне написали из Envato, что они запускают раздел с шаблонами Скетча в Themeforest, а раз уж я такой идейный пользователь, то было бы неплохо, если бы я на открытие нарисовал шаблон какой-нибудь. Я, естественно, отказываться не стал.

        Шаблон получился вот такой.

        Дальше я опишу, что и как делал в процессе. Статья традиционно будет в нескольких частях.
        Читать дальше →
      • Разработка дизайна для приложений МойОфис


          К офисным приложениям правило Парето применимо в следующем виде: 80% пользователей используют для решения своих задач только 20% представленных функций. В проекте МойОфис мы сосредоточились на реализации самых необходимых из них, чтобы повысить продуктивность работы большинства офисных сотрудников. На это влияет не только оптимальное количество функций, но и то, как они представлены в интерфейсе.

          Сегодня мы расскажем, как работаем над дизайном приложений МойОфис: как выстраиваем процесс, какие инструменты используем и как проверяем результаты своей работы.
          Читать дальше →
        • Неправильно использованные шаблоны мобильного интерфейса

          • Translation


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

          Некоторые могут возразить, что следование гайдам может убить творчество, и в итоге все приложения будут выглядеть одинаково. С точки зрения UX, я тут вижу другую проблему. Может казаться, что применение лучших шаблонов, которые используют Google / Facebook / Instagram / [вставить любимое приложение], всегда является отличным решением. Что они ставят себе такие же задачи, что и вы. Вот несколько шаблонов, которые считаются (или считались) лучшими, но в то же время не такие уж они и хорошие, какими кажутся на первый взгляд.
          Читать дальше →
        • Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

            Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

            Революция в адаптивном дизайне не за горами (если уже не случилась!), и даже не смотря на то, что интернет-магазины не взялись на адаптивный дизайн столь же агрессивно, как другие индустрии, все же это становится популярным.

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

            1. Только 18% из 50 ведущих американских интернет-магазинов, которые мы тестировали ранее, в этом году адаптировали свой дизайн под большие экраны (в то время как у 94% этих сайтов дизайн адаптирован под мобильные устройства).
            2. Почти три четверти электронных продаж все ещё совершаются на ПК, а не на мобильных устройствах (смотрите здесь, здесь и здесь).
            3. Около трети этих пользователей приходят с экранов шире 1350 пикселей (смотрите здесь, здесь и здесь). (Примечание: Разумеется, есть разница между шириной экрана и шириной браузерного окна — реальное число пользователей с браузером указанной ширины будет ниже. Мы рекомендуем вам отслеживать размеры браузерного окна в вашей веб-статистике для более полной картины того, насколько значителен этот сегмент для вашего сайта.
            Читать дальше →
            • +7
            • 18.7k
            • 2
          • Руководство для дизайнера по DPI



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

            Автор — Sebastien Gabriel.

            Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
            Читать дальше →
          • Как в Pixar решали проблемы со съёмками «Головоломки» (The Inside Out)

            • Translation
            image

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

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

            «Головоломка» — история маленькой девочки по имени Райли, которая переезжает в Сан-Франциско со Среднего запада вместе со своими родителями. В какой-то степени, это рассказ о том, как она приспосабливается, и как её отношения в семье изменяются вместе с изменением места проживания.

            Но кроме этого, есть ещё и внутренняя история, рассказывающая об её эмоциях: Радость, Грусть, Страх, Злость и Отвращение. Эмоции, которые влияют на чувства Райли, на её действия и реакции на события в жизни — и это всё отражается при помощи очень хитрой конструкции, которую я не буду разоблачать, чтобы не спойлерить. Двойная история привела к разным интересным проблемам, которые возникают при попытке представить и разделить их так, чтобы это помогло рассказывать историю.

            Я провел много времени на студии Pixar, посмотрел почти час отснятого материала, и поговорил с разными творческими людьми. Я услышал десятки разных историй, но две из них для меня оказались характерными примерами того, как Pixar может решать технические и творческие задачи при создании своих инструментов.

            Более человечная камера


            Одной из главных преград, которые нужно было преодолеть, был вопрос о том как снимать фильм, который передаст бурный, экспрессивной мир внутренних эмоций и при этом передать оттенки и нюансы внешнего мира людей.
            Читать дальше →
          • Идем на рекорд: как мы оптимизировали прикрепление изображений в Почте Mail.Ru для iOS



              По внутренней статистике Почты Mail.Ru, 80% файлов, отправляемых по email — изображения. Мы и сами каждый день шлём десятки макетов, прототипов и скриншотов. Конечно, мы захотели сделать такой распространенный сценарий удобнее, и нам это удалось. В результате отправлять фото и видео из нашего iOS-приложения стало гораздо удобнее и быстрее, чем у конкурентов. Например, чтобы прикрепить к письму три фотографии, в Почте Mail.Ru нужно всего пять нажатий. Это на 10 меньше, чем в Gmail, и на целых 13 — чем в Apple Mail. Под катом рассказ о работе над этой задачей, от возникновения идеи до её воплощения, а также несколько тяжелых гифок.
              Читать дальше →
            • Valentine Gift Finder: поисковик подарков на Валентинов День

                День Святого Валентина уже не за горами. Наша команда VerySoftware выпустила новый поисковик подарков для iPhone на 14 февраля.

                image
                Valentine Gift Finder позволяет найти оригинальные подарки для вашей Валентинки, и получить скидку до 33%. www.iphone-gift-finder.com. См. скриншоты под катом. Ждём отзывов!

                Читать дальше →
                • –10
                • 218
                • 7
              • iPhone Christmas Gift Finder: ищем новогодние подарки

                  Вот мы с другом и выпустили наш первый апп для iPhone:

                  image
                  Christmas Gift Finder позволяет найти оригинальные подарки для семьи, друзей и коллег, и предоставляет скидку до 33%.

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

                  Более подробную информацию можно найти на www.verysoftware.co.uk. Скриншоты под катом. Комментарии очень приветствуются. Заранее спасибо!

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

                    Это перевод статьи из блога 37signals.

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

                    Я устал слышать ответ «нет времени» в качестве причины, по которой вы не можете быть великолепным. На самом деле начать что-либо делать не требует много времени, требуется лишь сильное желание. Большинство людей просто не хотят делать что-либо и защищают своё эго, ссылаясь на отсутствие времени.
                    Читать дальше →
                  • Делаем красивую флеш галерею в программе Picasa

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

                      Первая мысль была скачать какую-нибудь галерею, куда можно привязать фликр или пикасу. Но вдруг я наткнулся на один хороший сайт. Там были выложены шаблоны галерей и их демонстрации. Скачав понравившийся шаблон я, к своему удивлению, не нашел никакого readme… Пришлось поискать на сайте. Оказалось что эти шаблоны нужно вставлять в программу пикаса… А потом в интерфейсе программы создавать готовую галерею.
                      Читать дальше →
                    • Pano Zero Client — компьютер, в котором ничего нет

                        Pano Zero Client — cloud computing PC
                        Как вам нравится идея компьютера, в котором нет: процессора, ОЗУ, винчестера, видеокарты, программного обеспечения… да вообще ничего нет, кроме портов для наушников/микрофона, одного сетевого кабеля, одного порта USB и места для подключения монитора. «Так как же эта маленькая коробочка вообще работает?» — спросите вы. Cloud computing, или т.н. вычислительное облако — технология, позволяющая производить на свет вот такие, очень интересные, экземпляры персональных компьютеров.

                        Основная идея Pano Zero Client, производимого компанией Pano Logic, — удаленные вычисления с помощью специального софта под названием Console Direct Technology. Все операции, которые проводит пользователь этой маленькой коробочки, проходят и обрабатываются на мощном сервере, который стоит где-то в холодном подвале. Важно понимать, что речь идет не о сетевых cloud-applications, а именно об удаленных вычислениях на своем сервере — по этой причине Pano Zero Client рассчитан на крупные корпорации, которые сейчас стремятся максимально сократить расходы. И этот маленький ПК позволит им это сделать, ведь необходимость в покупке отдельного системного блока на служащего отпадает — нужен лишь производительный центральный кластер.

                        Цена устройства неизвестна — оно и понятно, компания рассчитывает на заключение крупных договоров на поставку сотен, а то и тысяч таких коробочек в офисы по всему миру. Плюсов, кроме низкой (а иначе и быть не может или теряется весь смысл) цены устройства можно перечислить не так много, но среди них, несомненно — полная безопасность. Ведь в Pano не установлено вообще никакого софта, а значит и заражать нечего. К тому же энергопотребление малютки заставляет открыть рот от восхищения: 5 ватт — это всего лишь 3% от того, сколько электричества «кушает» стандартный персональный компьютер.

                        Воистину минимализм во всем.
                        Читать дальше →
                      • « Пожалуйста, не натопчите мне на сайте »

                          Почти уже два года назад, когда я еще не учил людей зарабатывать на стартапах, делать быстрые фотомодели, гугл не был еще такой фигней, а веб-толпы не выиграливали у меня 2:0, я создавал сайты. И вот один из клиентов попросил меня сделать что-то такое, от чего все офигели бы для его магазина элитной мебели. Сначала у меня получился вполне заурядный дизайн, который они и не приняли, но вот вторая идея снесла всем голову. За эти два года, я увидел только один сайт, который сделан по такой технологии, хотя она лежит на поверхности, и это была компания уровня Sony (кто именно — забыл.)


                          Помните, когда в статье про быструю фотомодель вчера, я сказал, что скоро мы будем работать в объемном мире? Думаете, я шутил? Ну что ж ты встал путник — входи, разувайся, я тебе поведаю историю как Сеть перестала быть плоской два года назад…
                          Читать дальше →
                        • Как отлаживают графику Windows в Microsoft

                            Я в MS уже больше двух лет, и все равно в отладчике провожу большую часть полезного времени (больше только в Outlook).
                            Раньше я делал Windows Imaging Component, новую библиотеку для работы с изображениями, а теперь DXGI — инфраструктуру hardware acceleration. Первое целиком в user mode, второе и в kernel, и в user, но общий экспириенс дебага в общем-то тот же.

                            Читать дальше →
                          • AppTracker – апп для слежения за вашими Windows Phone 7 приложениями на Marketplace

                              Совсем недавно наша команда VerySoftware разработала апп, который позволяет разработчикам Windows Phone 7 следить за успехом своих приложений на Marketplace при помощи сводки последних комментариев и рейтингов со всего мира.

                              image

                              AppTracker уже доступен на Marketplace и мы решили сделать его на некоторое время бесплатным: http://bit.ly/hRlfik. Очень интересно узнать ваше мнение!

                              Мы постарались показать весь функционал AppTracker’а в коротком видео-ролике:



                              Мы только что сдали наш AppTracker на конкурс проводимый RedGate и Microsoft. Если вам понравилась наша работа, поддержите нас на странице конкурса (используя кнопку “Like” и поле комментариев в подвале страницы).

                              Читать дальше →
                            • Самый Страшный Баг в Аndroid Phone G1

                                Оказывается, что после загрузки телефона (G1), фоном стартует command shell с правами root, и каждый символ набранный на клавиатуре, попадает ещё и туда, вне зависимости от того, в каком активном приложении он был набран.
                                Issue 1207, jdhorvat пишет:
                                … Во время чата со своей подругой, она спросила, почему долго не отвечаю. Я только что перезагрузил мой телефон и первым, что набрал в ответ лишь одно слово: «Reboot», после чего телефон перегрузился ещё раз.
                              • История создания логотипа Google

                                • Translation
                                Ruth Kedar создала логотип Google в том варианте, который стал знаменитым и известен каждому в мире (первоначально попытки создать логотип были предприняты одним из основателей компании Сергеем Брином, по слухам, с использованием Gimp’а). Я спросил Рут, как же изначально появился логотип и вот что она ответилаЯ преподавала дизайн в Стенфордском Университете (Stanford University) в 1999 когда наш общий друг из Стенфорда представил меня Ларри Пэйджу (Larry Page) и Сергею Брину (Sergei Brin). Они искали дизайнера, который создаст им дизайн логотипа и сайта, и меня попросили представить некоторые предварительные идеи. Им понравился мой подход и дизайн, в итоге я была принята на работу.Google хотел создать уникальный логотип, который отличал бы его от других поисковиков на то время (Yahoo, Excite, HotBot, LookSmart and Lycos), а также воплощать их уникальное видение поиска.Эти другие поисковики были прежде всего коммерческими порталами и только потом поисковыми системами. Google хотел указать на то, что в первую очередь это поисковая система. Он предлагал быстрые, всеобъемлющие и, прежде всего, надежные поисковые результаты. Это был новаторский, алгоритмически сложный, но простой в использовании поисковик. Кроме того, Google как бренд должен был отвергать все корпоративное, обычное.
                                Читать дальше →