Как стать автором
Обновить
0
Карма
0
Рейтинг
Александр @gdX

Пользователь

  • Публикации
  • Комментарии

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

CSS
Перевод

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
Читать дальше →
Всего голосов 76: ↑72 и ↓4 +68
Просмотры247.3K
Комментарии 14

Новости

Показать еще

Как сделать собственный видео-плеер на HTML5 Video

MicrosoftРазработка веб-сайтовHTML
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 — просто откройте его в двух-трех различных браузерах).
Читать дальше →
Всего голосов 99: ↑84 и ↓15 +69
Просмотры149.7K
Комментарии 17

Сбербанк делится опытом создания приложения в Material Design: стили и темы

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

Мы передаём слово команде разработчиков Android-приложения Сбербанка, чтобы вы услышали об опыте создания такой сложной штуки, как UI мобильного банк-клиента, из первых уст. Большую часть поста написал freeuser, так что спасибо говорите ему. ;)
Читать дальше →
Всего голосов 39: ↑31 и ↓8 +23
Просмотры51.4K
Комментарии 57

Большой обзор красивых многоуровневых меню с codepen

mr. GefestРазработка веб-сайтовCSSHTML


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

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

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

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Просмотры158.9K
Комментарии 33

Работаем с массивами в JavaScript без велосипедов

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

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

JavaScript не стоит на месте, Mozilla неустанно улучшает JavaSript в своем движке Gecko и грех не пользоваться этими нововведениями. В JavaScript 1.6 добавлены новые полезные методы для упрощения кода, необходимого в вышеописанных ситуациях.
Читать дальше →
Всего голосов 49: ↑44 и ↓5 +39
Просмотры41.3K
Комментарии 57

Шорткаты в JavaScript

Mail.ru GroupНенормальное программированиеРазработка веб-сайтовJavaScriptIT-стандарты


Изучая любой язык программирования, полезно знать о его особенностях и уметь эффективно использовать языковые конструкции. Хочу поделиться с вами шорткатами для JS. Эти сокращения в некоторых случаях могут облегчить чтение кода, а также существенно уменьшить его количество. Однако следует помнить, что они могут сыграть с вами злую шутку и, если использовать их повсеместно, ваш код перестанет быть читаемым и поддерживаемым.
Читать дальше →
Всего голосов 57: ↑31 и ↓26 +5
Просмотры24.1K
Комментарии 48

Учебник Swift — разработка приложения для iOS8 [Часть 1, Hello World!]

Разработка под iOSXcodeSwift
Перевод
Tutorial

Предисловие


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

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

Итак, я собираюсь начать с довольно простого приложения. Также я буду объяснять, как работает код. Готовы? Поехали…
Погружаемся в Swift
Всего голосов 43: ↑33 и ↓10 +23
Просмотры102.4K
Комментарии 31

CANVAS шаг за шагом: Основы

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

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
Читать дальше →
Всего голосов 84: ↑82 и ↓2 +80
Просмотры445.9K
Комментарии 48

Работа c JSON в Swift

Разработка под iOSSwift
Из песочницы

Покажите мне разработчика, которому еще ни разу не приходилось работать с 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.
Читать дальше →
Всего голосов 20: ↑19 и ↓1 +18
Просмотры28.7K
Комментарии 2

Спать мало, но правильно?

Лайфхаки для гиковЗдоровье
Навеяно этим постом от юзера case. Пост не новый, и на главную он не попал.
Но я вот наткнулся на него сегодня и решил написать кое-что о сне. Уверен, что это будет полезно многим хабравчанам, да и случайным читателям тоже.
Читать дальше →
Всего голосов 713: ↑670 и ↓43 +627
Просмотры463.6K
Комментарии 420

Большой список научно-фантастических сериалов

Научная фантастика
image
Кадр из заставки сериала «Грань»

Предисловие

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

В данной публикации я постараюсь предоставить большой список научно-фантастических сериалов. А благодаря голосованию — узнать какие сериалы на самом деле нравятся пользователям Geektimes.
Читать дальше →
Всего голосов 58: ↑47 и ↓11 +36
Просмотры280.5K
Комментарии 189

Подробный обзор Affinity Designer (Mac OS). Часть 1. Инструменты

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

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

intro

Читать дальше →
Всего голосов 16: ↑14 и ↓2 +12
Просмотры49.3K
Комментарии 21

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

Веб-дизайн


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

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

Вот где пригодятся методы юзабилити.
Читать дальше →
Всего голосов 26: ↑22 и ↓4 +18
Просмотры42K
Комментарии 10

5 составляющих продвинутого интернет-магазина

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

Итак, далее приведены пять функций, отличающих лучший интернет-магазин от просто хорошего.
Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры31K
Комментарии 19

Эффективный интернет-магазин. Что автоматизировать в первую очередь?

CentrobitCMS

“Сайт — главный инструмент интернет-магазина” — это прописная истина для каждого интернет-предпринимателя. При этом у подавляющего большинства интернет-магазинов бек-офис совсем не автоматизирован. Для начинающего бизнесмена эта задача не кажется приоритетной. Главное — выйти на определенный оборот и получить прибыль. Никто не задумывается о цене, которая будет платиться за отсутствие автоматизации отдельных направлений интернет-магазина впоследствии.
Опишем главные, на наш взгляд, задачи по автоматизации бизнес-процессов, которые необходимо решить на самой ранней стадии развития интернет-магазина.
Читать дальше →
Всего голосов 14: ↑6 и ↓8 -2
Просмотры36.9K
Комментарии 5

10 роковых ошибок юзабилити интернет-магазинов и кое-что ещё

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


Читать дальше →
Всего голосов 28: ↑23 и ↓5 +18
Просмотры49K
Комментарии 13

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

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

image

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

Читать дальше →
Всего голосов 34: ↑18 и ↓16 +2
Просмотры68.8K
Комментарии 15

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

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

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


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

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

image
Читать дальше →
Всего голосов 56: ↑44 и ↓12 +32
Просмотры64.9K
Комментарии 35

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

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

Главная страница интрнет-магазина в axure
Читать дальше →
Всего голосов 69: ↑47 и ↓22 +25
Просмотры78K
Комментарии 23

Адаптивные сайты, или Как добиться благосклонности Google

1С-БитриксРазработка мобильных приложений1С-Битрикс
Recovery mode


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

21 апреля Google поменял алгоритм ранжирования поисковой выдачи для мобильных устройств. Многие владельцы сайтов и администраторы получили письма, в которых сообщалось, что «ваш сайт не оптимизирован под мобильные устройства». И после 21 апреля на всех сайтах, которые перестали удовлетворять новым критериями, стал падать поисковый трафик с Google.
Читать дальше →
Всего голосов 25: ↑22 и ↓3 +19
Просмотры39.7K
Комментарии 28

Информация

В рейтинге
5,885-й
Откуда
Обнинск, Калужская обл., Россия
Дата рождения
Зарегистрирован
Активность