Pull to refresh
0
0
dukeRD @dukeRD

User

Send message

Проектируем информационную архитектуру для e-commerce. Часть 2

Reading time14 min
Views24K
image
Продолжим наше изучение информационной архитектуры и ее значение для электронной коммерции. В первой главе мы вкратце ознакомились с понятием информационной архитектуры (далее — ИА), значением и подходами к работе над ней в рамках проектирования взаимодействия.
Теперь от вопроса «Зачем проектировать информационную архитектуру» перейдем к вопросу «Какие есть особенности ее проектирования?»

Итак: особенности работы с ИА в e-commerce и три аспекта ее проектирования:

  • Принципы построения качественной ИА. Их применение в e-commerce;
  • Шаблонные схемы ИА. Какие шаблоны лучше использовать;
  • Процесс исследований ИА в e-commerce и их рентабельность.

Как водится, краткие итоги главы в конце поста.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments6

Доведите пользователя до… конца воронки

Reading time3 min
Views14K
Понимание того, что движет пользователем, является одной из ключевых задач при разработке интерфейса приложения или дизайна ресурса. К счастью, Блюма Вульфовна Зейгарник предоставила в наше распоряжение довольно мощный рычаг, который нашел крайне эффективное применение в электронной коммерции.

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

Ниже представлены несколько примеров того, как этот эффект используется в современном веб-дизайне:
Читать дальше →
Total votes 23: ↑19 and ↓4+15
Comments4

Советы, библиотеки и дополнительные материалы по CSS-анимации

Reading time25 min
Views67K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


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

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →
Total votes 24: ↑24 and ↓0+24
Comments12

Лучшие плагины для Sublime Text

Reading time5 min
Views639K

WebInspector


Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.



Читать дальше →
Total votes 116: ↑114 and ↓2+112
Comments101

Я хочу, чтобы сайты открывались мгновенно

Reading time10 min
Views139K
Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик. Я расскажу, как сделать так, чтобы ваш сайт открывался быстро. Очень быстро.


Я хочу, чтобы мой сайт открывался быстро
Total votes 130: ↑122 and ↓8+114
Comments87

bala.js — убийца jQuery в менее чем 400 символах кода *

Reading time6 min
Views43K
* Это шутка.

image
(картинка позаимствована где-то в интернете)

[ Репозиторий ]

Всем привет.

Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS — это длинная колбаса.

Мол, зачем мне писать вот так:
document.querySelector('.selector');

Если я могу написать вот так:
$('.selector');

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

// selects one node matched given selector
function $(selector, ctx) {
	return (ctx || document).querySelector(selector);
}

// selects all nodes matched given selector
function $$(selector, ctx) {
	return [].slice.call((ctx || document).querySelectorAll(selector));
}

Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.
Читать дальше →
Total votes 91: ↑58 and ↓33+25
Comments193

Шорткаты в JavaScript

Reading time4 min
Views25K


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

Приятная сборка frontend проекта

Reading time12 min
Views442K
В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.

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

UPD (13 марта 2015): Заменил несколько плагинов на более актуальные + решил проблему с импортом CSS файлов внутрь SCSS

Читать дальше →
Total votes 61: ↑53 and ↓8+45
Comments119

Почему 98% текстов на ваших сайтах не работают. Вообще. И как это починить

Reading time7 min
Views284K

Вот так люди видят вашу страницу

Привет!
Проблема вот в чём. Если зайти на практически любой сайт интернет-магазина или компании с услугами, вы встретите контент. Точнее — отвратительные тексты, которые писали, кажется, маркетологи, воспитанные сеошниками.

Разумеется, можно не делать, как они. Если работать по-умному, то вы поможете и читателям по жизни, и себе в продажах.

По моим примерным подсчётам (усреднение с ряда позиций), конверсии для нас выглядят так:
  • Только название и картинка — около 1,5%.
  • С описанием от производителя — чуть более 2%.
  • С описанием человека, который держал это в руках и знает правила — около 6%.

Ниже — рассказ про то, как мы доводили время на сайте от 3 минут сначала до 6:40, а потом до 20:48. Да-да, двадцати минут сорока восьми секунд для среднего посетителя. Честного среднего, с учётом отказов и по полной выборке.
Читать дальше →
Total votes 294: ↑282 and ↓12+270
Comments121

50 лучших инструментов для разработки CSS и JavaScript

Reading time3 min
Views73K
Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

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

Лучшие инструменты для CSS и JavaScript


1) Fileicone

Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.

image

2) Marx

Элегантное обнуление CSS безо всякого JavaScript.

image
Читать дальше →
Total votes 54: ↑36 and ↓18+18
Comments17

Чек-лист из 68 пунктов для продвижения сайта в ТОП10 Яндекса

Reading time5 min
Views130K
Чтобы Яндекс показал Ваш сайт в числе первых, нужно чтобы он максимально полно отвечал на запрос пользователя. И это будет уже половина успеха. Оставшаяся половина это удобство, техническая составляющая сайта и его простота. Ниже я привел чек-лист из 68 пунктов, который был разработан специально для системы управления задачами PTYSH, совместно с компанией DFAKTOR. А теперь я делюсь им с Вами. Кропотливое выполнение каждого пункта из данного чек-листа позволит вывести практически любой сайт на самый верх поисковой выдачи. Но придется как следует поработать. Начнем с самого малого.


Читать дальше →
Total votes 26: ↑25 and ↓1+24
Comments32

GNU LilyPond — свободный нотный набор

Reading time5 min
Views11K
Уже с конца 1980-х годов музыкальные издательства постепенно оставляли ручной и переходили на компьютерный нотный набор. На данный момент список нотных редакторов огромен, но профессионалы используют Finale и Sibelius.

Холивары о том, кто из них лучше, не утихают уже лет десять, авторитетное издательство Bärenreiter (музыканты его очень любят, хоть и ругаются на дорогие ноты) тем временем используют написанную на Фортране SCORE, а музыканты — любители свободных программ смотрят на LilyPond и ужасаются, потому что как же обычному человеку жить без WYSIWYG'а?

Если бы не TeX-подобный синтаксис, я уверен, многие бы использовали этот engraver. Именно engraver — переводы «гравировщик» и «наборщик» не подходят здесь, потому что этими словами обозначаются профессии. LilyPond лучше других коммерческих и бесплатных программ располагает нотный текст равномерно по странице.

Сравнение с популярными программами


Это мелодия небезызвестной темы, набранная в трёх разных программах (LilyPond, Finale, Sibelius)


В LilyPond не делалось ничего кроме набора, в Сибелиусе и Finale удалены лишние такты, также в последней ноты принудительно автоматически расставлены по горизонтали.

Читать дальше →
Total votes 64: ↑64 and ↓0+64
Comments30

CSRF-уязвимость VK Open Api, позволяющая получать Access Token’ы сторонних сайтов, использующих авторизацию через VK

Reading time14 min
Views38K
Представляю вашему вниманию обзор уязвимости, связанной с неправильным применением JSONP в VK Open Api. На мой взгляд, уязвимость достаточно серьёзная, т.к. позволяла сайту злоумышленника получать Access Token другого сайта, если на нём используется авторизация через библиотеку VK Open API. На данный момент уязвимый код поправили, репорт на HackerOne закрыли, вознаграждение выплатили (1,500$).

Как это выглядело


В принципе, процесс получения пользовательского Access Token'а страницей злоумышленника происходил по стандартной схеме эксплуатации CSRF-уязвимости:

  1. Пользователь заходит на сайт, использующий библиотеку VK Open API (например, www.another-test-domain.com).
  2. Авторизуется там через VK.
  3. Потом заходит на сайт злоумышленника (например, www.vk-test-auth.com), который, эксплуатируя уязвимость, получает Access Token, принадлежащий сайту www.another-test-domain.com.
  4. Получив Access Token пользователя, злоумышленник может обращаться к VK API с теми правами, который пользователь дал сайту www.another-test-domain.com при авторизации на нем через VK.

Демонстрация


На видео показано, как страница «злоумышленника» на домене www.vk-test-auth.com получает Access Token пользователя VK, который авторизовался на сайте www.another-test-domain.com, несмотря на то, что в настройках приложения VK, доступ разрешён только для домена www.another-test-domain.com.


Читать дальше →
Total votes 64: ↑63 and ↓1+62
Comments17

<input> Я ♥ тебя, но ты меня обламываешь

Reading time5 min
Views54K

Привет, представляю твоему вниманию перевод статьи Моники Динкулеску '<input> I ♡ you, but you're bringing me down'. Художественный перевод с английского не является моей основной специализацией, поэтому в тексте возможны неточности. Правки призываю отправлять личным сообщением, а если есть что сказать, велкам в комментарии. Отдельное спасибо @Kt за редакторские правки. Приятного чтения.


Некоторые люди делают мебель. Некоторые люди вяжут. Некоторые люди имеют хобби, которые никак не пересекаются с HTML спецификациям из 90-х. Но я не из таких. И, вот история о том, как <input> стал той хренью, которой он является, и почему его надо сжечь


Ранние годы



1995 был клевым годом. Друзья, Скорая Помощь, Зена по телеку. TLC занимали верхушки чартов с хитом "Waterfalls". С браузерами было нормуль, потому что HTML было все очень нормуль. У нас были Mosaic, Netscape и IE1, а при утверждении спеков HTML 2, наконец, выкроили время для стандартизации форм. Девяносто пятый был годом рождения <input>, и теперь, когда он достаточно взрослый, чтобы покупать в магазине алкоголь, нам нужно поговорить.
Продолжить чтение статьи
Total votes 73: ↑63 and ↓10+53
Comments55

Upgrade до Middle PHP-разработчика за 3 месяца

Reading time2 min
Views193K

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


Читать дальше →
Total votes 94: ↑55 and ↓39+16
Comments190

Викторина из 15 вопросов: хорошо ли вы знаете CSS

Reading time3 min
Views36K

Простые вопросы


Вопрос 1

Какой из приведённых вариантов не является допустимым значением свойства border-style?

  • dotted
  • inset
  • glazed
  • groove
  • solid


Ответ
glazed

image

Описано в разделе "4.2. Line Patterns: the ‘border-style’ properties" спецификации W3C CSS Backgrounds and Borders Module Level 3.


Читать дальше →
Total votes 29: ↑18 and ↓11+7
Comments17

Drupal 8. Обучающие материалы и не только

Reading time5 min
Views37K
Друзья, вы мне, конечно [1] [2], не поверите, но вышел Drupal 8. В последнее время поступает достаточно много вопросов на тему того, что почитать, посмотреть, послушать для изучения восьмерки. Очень многие чувствуют себя не вполне уверенно и задаются вопросами: переходить на неё или не переходить, жив Drupal или нет, и всем прочим.

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

image

Читать дальше →
Total votes 14: ↑10 and ↓4+6
Comments2

Улучшение сетевой безопасности с помощью Content Security Policy

Reading time7 min
Views138K


Content Security Policy (CSP, политика защиты контента) — это механизм обеспечения безопасности, с помощью которого можно защищаться от атак с внедрением контента, например, межсайтового скриптинга (XSS, cross site scripting). CSP описывает безопасные источники загрузки ресурсов, устанавливает правила использования встроенных стилей, скриптов, а также динамической оценки JavaScript — например, с помощью eval. Загрузка с ресурсов, не входящих в «белый список», блокируется.
Читать дальше →
Total votes 16: ↑15 and ↓1+14
Comments7

Тестирование вёрстки на визуальные регрессии с помощью PhantomCSS

Reading time9 min
Views24K
Работа с чужим кодом — одна из распространенных и сложных проблем, с которыми мне приходилось сталкиваться в своей работе. Почти в каждом случае предыдущий разработчик писал код не так, как бы мне этого хотелось.

И такие ситуации возникают довольно часто. Не каждый клиент имеет потребность, желание или бюджет переписывать весь проект с нуля.

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

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

Раньше я рассматривал такие изменения как большие риски. В конце концов, C в CSS это каскадирование, где порядок абсолютно важен. Реструктуризация нескольких стилей означает изменение порядка, что, естественно, приводит к большому риску что-то сломать.

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

На этот раз было решено построить визуально регрессионный набор тестов.
Читать дальше →
Total votes 24: ↑22 and ↓2+20
Comments1

Теория звука. Что нужно знать о звуке, чтобы с ним работать. Опыт Яндекс.Музыки

Reading time14 min
Views210K
Звук, как и цвет, люди воспринимают по-разному. Например, то, что кажется слишком громким или некачественным одним, может быть нормальным для других.

Для работы над Яндекс.Музыкой нам всегда важно помнить о разных тонкостях, которые таит в себе звук. Что такое громкость, как она меняется и от чего зависит? Как работают звуковые фильтры? Какие бывают шумы? Как меняется звук? Как люди его воспринимают.



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

Поводом для этого поста можете считать то, что мы добавили в приложения Яндекс.Музыки возможность слушать треки в высоком качестве (320kbps). А можете не считать. Итак.
Читать дальше →
Total votes 83: ↑78 and ↓5+73
Comments52

Information

Rating
Does not participate
Location
Россия
Date of birth
Registered
Activity