• Перемещения и трансформации в CSS3

    • Перевод

    Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
    Читать дальше →
  • Как сделать собственный видео-плеер на HTML5 Video

    • Tutorial
    Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


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

    <video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

    Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
    Читать дальше →
  • Сбербанк делится опытом создания приложения в Material Design: стили и темы

      Привет, Хабрахабр! Не так давно мы подводили итоги конкурса по Material Design, и в комментариях нас просили показать реально популярные и красивые Material-приложения. Что же, встречайте: «Сбербанк Онлайн» в новом, современном интерфейсе. Про процесс создания приложения интереснее узнать от самих создателей.

      Мы передаём слово команде разработчиков Android-приложения Сбербанка, чтобы вы услышали об опыте создания такой сложной штуки, как UI мобильного банк-клиента, из первых уст. Большую часть поста написал freeuser, так что спасибо говорите ему. ;)
      Читать дальше →
    • Большой обзор красивых многоуровневых меню с codepen



        Хабр, привет!

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

        Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

        Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
        Читать дальше →
      • Работаем с массивами в JavaScript без велосипедов

          Эту статью я хочу посвятить тонкостям работы с массивами в JavaScript.

          Наверное, у каждого JavaScript-разработчика есть фунции (самописные или библиотечные) $ (выбор элемента по id) и $$ (выбор элементов по CSS-классу). Если мы выбираем несколько элементов по CSS-классу, то мы хотим произвести с ними определенные действия. Напрашивается цикл. А если нужна выборка среди них? Преобразования? Действия над нужными элементами? Непростой получается код.

          JavaScript не стоит на месте, Mozilla неустанно улучшает JavaSript в своем движке Gecko и грех не пользоваться этими нововведениями. В JavaScript 1.6 добавлены новые полезные методы для упрощения кода, необходимого в вышеописанных ситуациях.
          Читать дальше →
        • Шорткаты в JavaScript



            Изучая любой язык программирования, полезно знать о его особенностях и уметь эффективно использовать языковые конструкции. Хочу поделиться с вами шорткатами для JS. Эти сокращения в некоторых случаях могут облегчить чтение кода, а также существенно уменьшить его количество. Однако следует помнить, что они могут сыграть с вами злую шутку и, если использовать их повсеместно, ваш код перестанет быть читаемым и поддерживаемым.
            Читать дальше →
          • Учебник Swift — разработка приложения для iOS8 [Часть 1, Hello World!]

            • Перевод
            • Tutorial

            Предисловие


            Недавно Apple представила общественности достаточно важное изменение в разработке iOS приложений, анонсировав новый язык программирования Swift. Я принял решение: изучая этот язык пошагово, я буду в своих статьях рассказывать обо всём, что мне удалось найти. Это лишь первый пост из многих на эту тему, но я надеюсь, что вы решите изучать язык вместе со мной!

            Весьма вероятно, что многие примеры кода, представленные в постах, будут позже изменены. Это отчасти потому, что мой стиль программирования – написать сейчас, чтобы проверить идею, а потом заняться рефакторингом, а также отчасти это потому, что для меня (как и для многих других) Swift – абсолютно новый язык программирования. Так что, скорее всего, как только я узнаю что-нибудь новое, ход этих уроков будет меняться.

            Итак, я собираюсь начать с довольно простого приложения. Также я буду объяснять, как работает код. Готовы? Поехали…
            Погружаемся в Swift
          • CANVAS шаг за шагом: Основы

            CANVAS шаг за шагом:
            1. Основы
            2. Изображения
            3. Понг
            4. Пятнашки

            Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
            Читать дальше →
          • Работа c JSON в Swift


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

            Собственно с задачей прямого и обратного преобразования JSON из текстового представления в объектную модель отлично справляется стандартный Foundation API – NSJSONSerialization. В Apple проделали серьезную работу для обеспечения прямого и обратного взаимодействия Swift и Objective-C кода (Using Swift with Cocoa and Objective-C), поэтому использование привычных Cocoa API не только возможно на практике, но и удобно и не выглядит неестественно:

            let jsonString = "{\"name\":\"John\",\"age\":32,\"phoneNumbers\":[{\"type\":\"home\",\"number\":\"212 555-1234\"}]}"
            let jsonData = jsonString.dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: true)
            let jsonObject: AnyObject! = NSJSONSerialization.JSONObjectWithData(jsonData, options: NSJSONReadingOptions(0), error: nil)
            

            Но работать с полученным результатом в статически типизированном Swift неудобно – требуется цепочка проверок и приведений типов для получения любого значения. Далее я рассмотрю варианты решения этой проблемы, а заодно мы познакомимся с некоторыми особенностями Swift.
            Читать дальше →
            • +18
            • 28,5k
            • 2
          • Спать мало, но правильно?

              Навеяно этим постом от юзера case. Пост не новый, и на главную он не попал.
              Но я вот наткнулся на него сегодня и решил написать кое-что о сне. Уверен, что это будет полезно многим хабравчанам, да и случайным читателям тоже.
              Читать дальше →
            • Большой список научно-фантастических сериалов

                image
                Кадр из заставки сериала «Грань»

                Предисловие

                На Geektimes и Habrahabr уже были статьи со списком Sci-Fi сериалов (Фантастические сериалы — обзор от фаната, Фантастические сериалы и др.). Но все они либо содержали достаточно мало сериалов и/или поверхностную информацию о них самих, либо были предвзяты в отношении тех или иных сериалов.

                В данной публикации я постараюсь предоставить большой список научно-фантастических сериалов. А благодаря голосованию — узнать какие сериалы на самом деле нравятся пользователям Geektimes.
                Читать дальше →
              • Подробный обзор Affinity Designer (Mac OS). Часть 1. Инструменты

                  Уже некоторое время дизайнеры пользуются новой программой для векторной графики и иллюстраций — Affinity Designer. Это подробный обзор для любителей попробовать новое в работе.

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

                  intro

                  Читать дальше →
                • 7 основных принципов юзабилити для интернет-магазинов (перевод)



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

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

                    Вот где пригодятся методы юзабилити.
                    Читать дальше →
                  • 5 составляющих продвинутого интернет-магазина

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

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


                      “Сайт — главный инструмент интернет-магазина” — это прописная истина для каждого интернет-предпринимателя. При этом у подавляющего большинства интернет-магазинов бек-офис совсем не автоматизирован. Для начинающего бизнесмена эта задача не кажется приоритетной. Главное — выйти на определенный оборот и получить прибыль. Никто не задумывается о цене, которая будет платиться за отсутствие автоматизации отдельных направлений интернет-магазина впоследствии.
                      Опишем главные, на наш взгляд, задачи по автоматизации бизнес-процессов, которые необходимо решить на самой ранней стадии развития интернет-магазина.
                      Читать дальше →
                      • –2
                      • 36,5k
                      • 5
                    • 10 роковых ошибок юзабилити интернет-магазинов и кое-что ещё

                        «Не бойся первой ошибки, избегай второй», – учит нас народная мудрость. А другая прямолинейно указывает на то, кто учится на своих ошибках, а кто – на чужих. Тем не менее разрабатывая интернет-магазин ошибиться довольно просто. Особенности аудитории, нюансы в организации сайта и форм страниц порой только и можно постичь единственно верным методом проб и ошибок.


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

                        Сразу предупреждаем — это статья не о том, что на карточке товара нужно использовать красную кнопку ”добавить в корзину”, которая поднимет конверсию на 20% и не о том, что размер фотографии товара должен быть 500 на 500 пикселей и это поднимет конверсию ещё на 10%, а размер заголовка должен быть набран 10 кеглем, именно тогда ваши товары будут продаваться. В ней нет простых рецептов и секретов. В ней есть правда. А правда в том, что недостаточно прочитать статью про кнопки и цвета, чтобы создать продающую страницу с товаром. Чтобы создать действительно продающую страницу нужно приложить немало усилий и в меньшей степени эти усилия связаны с выбором цветов, шрифтов и кнопок.

                        image

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

                        Читать дальше →
                      • Продающий дизайн интернет-магазина. Часть 3. Дизайн элементов

                        • Tutorial
                        Третья часть статьи из цикла «Продающий дизайн интернет-магазина». Для тех, кто пропустил первую и вторую, их можно прочитать тут: «Продающий дизайн интернет-магазина. Часть 1. Аналитика» и «Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса».

                        Страница товара


                        Попав на страницу товара, человек должен получить максимум информации о нем. Здесь не работает правило «краткость – сестра таланта». Так как мы имеем дело с онлайн магазином, то наш покупатель лишён возможности увидеть товар вживую, поэтому мы и должны предоставить ему максимум имеющейся у нас информации: детальное описание, технические характеристики, качественные фотографии, отзывы, видео или 3D-обзор. Отзывы для товаров, кстати, изобрел Амазон, внес социальность на сайт, сильно увеличив тем самым конверсию и продажи.

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

                        image
                        Читать дальше →
                      • Серьезное проектирование серьезного магазина. Часть 2. Модули интернет-магазина

                        • Tutorial
                        В прошлый раз мы написали довольно популярную статью: «Серьезное проектирование серьезного магазина. Часть 1. Исследования», эта статья её логическое продолжение. В этой статье и в последующих мы опишем почти 60 функциональных модулей топовых интернет-магазинов мира, а также подробно разберем интерфейс многих страниц.

                        Главная страница интрнет-магазина в axure
                        Читать дальше →
                      • Адаптивные сайты, или Как добиться благосклонности Google



                        В конце июня в Москве прошла конференция Bitrix Summer Fest, на которой было представлено много интересных и полезных докладов. Чтобы этот кладезь мудрости не пропадал, мы будем публиковать в нашем блоге материалы по выступлениям с конференции. И начать мы решили с доклада Антона Герасимюка, посвящённого оптимизации скорости загрузки страниц.

                        21 апреля Google поменял алгоритм ранжирования поисковой выдачи для мобильных устройств. Многие владельцы сайтов и администраторы получили письма, в которых сообщалось, что «ваш сайт не оптимизирован под мобильные устройства». И после 21 апреля на всех сайтах, которые перестали удовлетворять новым критериями, стал падать поисковый трафик с Google.
                        Читать дальше →