Я эксперт в области того, как в технологиях используются слабые места нашей психики. Вот почему я проработал последние три года как специалист Google по этике в дизайне. Моя работа состояла в проектировании ПО таким образом, чтобы защитить умы миллиарда людей от «уловок».

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

Как технология эксплуатирует слабые места нашего разума?

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


Это я, творящий «волшебство» при помощи ловкости рук, на дне рождения моей матери

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

И я хочу показать вам, как они это делают.

Большинство создают внешние ссылки через target="_blank" и не знают одного интересного нюанса — страница, на которую мы попадем таким образом, получит частичный контроль над ссылающейся на нее страницей через js свойство window.opener.

Через window.opener.location мы сможем сделать редирект на, к примеру, фишинговую страницу. Это своего рода tabnabbing, только более продвинутый. Так как жертва меньше всего ожидает подмены страницы, в открытой ранее, доверенной вкладке браузера.

Набрёл на статью со сравнением трёх JS библиотек для рисования в WEB Paper.js, Processing.js и Raphael.js. Думаю она будет интересна не только мне.

Прежде чем начать рисовать что-либо в браузере, спросите себя о следующих трёх вещах:

• Вам нужна поддержка старых браузеров?
  Если ответ да, тогда единственный выбор, это Raphaël. Он поддерживает браузеры вплоть до IE 7 и Firefox 3. У Raphaël есть даже ограниченная поддержка IE 6, несмотря на то, что некоторые базовые для библиотеки технологии не могут быть реализованы в этом браузере.
  
• Вам нужна поддержка Android?
  Android не поддерживает SVG, так что вам придется использовать Paper.js или Processing.js. Существуют слухи, что Android 4 будет поддерживать SVG, но большинство современных Android устройств уже не будет его поддерживать.
  
• Ваш рисунок интерактивный?
  Raphaël и Paper.js сосредоточены на взаимодействии с рисуемыми элементами посредством клика мышкой, перетаскивания и касания. Processing.js не поддерживает никаких события уровня объекта, потому обработать движения пользователя в нём довольно сложно. Processing.js может рисовать классную анимацию на Вашей домашней страничке, а Raphaël и Paper.js более подходят для интерактивных приложений.
  

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

В статье описано, как с использованием jQuery создать 3D эффекты CSS при наведении курсора.



Тут можно Посмотреть, а тут — Скачать

В примерах ниже используются миниатюры, которые при наведении курсора будут отображать определенную информацию CSS. Благодаря jQuery при наведении на изображения, они появляться в свернутом или согнутом виде. Для этих эффектов будет использоваться CSS 3D transforms.

Первая часть обзора

В этот раз расскажу о рабочих панелях. Если в общем, то все примерно такое же как в Иллюстраторе. Есть пара непонятных моментов, есть пара очень удобных штук, которых нет у больших конкурентов. Включить все или по отдельности можно в меню «View->Studio->...»

Введение

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

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

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.

О чём речь?

Всё чаще возникает задача научить frontend-приложение работать в автономном режиме. Это значит придать web-приложению свойство mobile- или desktop-программы — функционировать в отсутствии связи с Интернет, а также в случае отказа сервера.

Цель — оградить пользователя от проблем соединения на его устройстве. Как было бы обидно не сохранить созданные в google docs таблицы из-за потери wi-fi в ближайшем фастфуде!

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

Решение задачи заключается в следующем:

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

В принципе, в лекции про шейдеры мы уже использовали карту нормалей, но только заданную в глобальной системе координат. Сейчас же разговор пойдёт про касательное пространство. Итак, вот две текстуры, левая задана в глобальном пространстве (RGB напрямую превращается в вектор XYZ), а правая — в касательном.

Примечание переводчика: визит под кат этого поста означает большие объёмы потреблённого трафика. И это иронично, если учесть поднятую тему. Но всё сразу встаёт на свои места, если помнить, что в оригинале это было выступление в прошлом ноябре в Сиднее длиной почти в час. Чтение поста занимает куда меньше времени. В форме видеозаписи (1280×720) речь занимает два гигабайта. Пост же занимает всего лишь 12 МиБ. Рекомендуется просмотр на широких мониторах.



Перед началом тирады я хотел бы обратить внимание на то, что прекрасные сайты бывают любых форм и размеров. И я здесь не собираюсь кого-то пристыживать за количество использованных бит, объём использованных ресурсов и так далее. Я люблю большие сочные галереи изображений, мне нравятся огромные эксперименты на JavaScript, я смотрю онлайн-видео в высоком разрешении, как и все вы. Я считаю, что подобное замечательно.

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

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

Я предлагаю вам поиграть в игру: я даю только картинку, на которой видна проблема, попробуйте понять, в каком месте кода нужно искать баг, что именно сломано. Я в эту игру играю ежедневно, досконально смотреть сотни версий рендера у меня нет никакой возможности, поэтому я, как заправский экстрасенс, лечу по фотографии. Зачастую успешно.

Абсолютно все картинки сгенерированы не мной, я лишь собрал самые типичные баги. Настоящая людская боль перед вашими глазами, ко мне, понятно, обращаются (особенно по почте) только после того, как не могут сами найти баг за разумное время.

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

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

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

Часть 2

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

Вселенную нельзя прочесть, пока мы не выучим язык, которым она написана. Она написана языком математики, а буквы его – треугольники, круги и другие геометрические фигуры, без которых человек не способен понять ни единого слова.
— Галилео Галилей

Геометрические инструменты

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



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

Немного геометрии

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

Для меня ни один детский опыт не принёс такой уверенности в собственных исследовательских возможностях, как геометрия.
— Ричард Бакминстер Фуллер

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

Всем известно, что напечать ядрекс-карту API 2.х с метками и кластерами просто так не получится. До сих пор карта строится не на канвасе, а на дивах с подложкой (background-image). Да и канвас любимому браузеру не поможет.
Была поставлена задача — быстро сделать версию для печати карты. Количество меток — более 600 + кластеры «из коробки».
Работающий вариант под катом

Я веду блог на сайте ConversionXL. Блог посвящён оптимизации конверсии, и это один из самых крупных блогов на рынке.

Я начал вести его чуть более 2 лет назад, в октябре 2011. В первый месяц я получил 50000 визитов благодаря некоторым вирусным постам, в остальное время рост был линейным, медленным и постоянным.

15,000 визитов на третий месяц
22,000 на 6-й месяц
90,000 на 10-й месяц

Через несколько месяцев у меня было 100 000 постоянных визитов в месяц. И это не простые визиты – мой блог генерирует доходных клиентов для моей компании из 10 человек.

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

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

Недавно я протестировал 4 разных варианта использования политики конфиденциальности на форме регистрации на главной странице сайта сообщества любителей пари и ставок. Результаты меня весьма удивили, так как каждый из вариантов по-разному повлиял на количество регистраций – от уменьшения регистраций на 18,7% до увеличения на 19,47%.

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

Люди крайне редко совершают в интернете покупки с первого раза, едва оказавшись на том или ином сайте. Даже если пользователь попал на сайт, кликнув по объявлению контекстной рекламы — то есть по «ответу» на свой поисковый запрос, вовсе не факт, что он сразу же станет клиентом.

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

Среди общественности распространено несколько мифов касательно callback-сервисов, которые, должны признаться, зачастую создают негативный образ. Связано это с тем, что один из крупнейших игроков на рынке в свое время сделал акцент на маркетинг и леопардов, купание в котле и речах про «успешный успех». Как это часто бывает, один или несколько игроков могут дискредитировать всю нишу, в результате чего и появляются мифы. Сегодня мы, Rocket Callback, собрали несколько таких мифов, с которыми лично сталкиваемся каждый день, и в лучших традициях MythBusters постараемся их разрушить.

Оригинал: React To The Future With Isomorphic Apps

Изоморфные приложения. Взгляд в будущее с React

В разработке программного обеспечения все часто возвращается на круги своя. Так, например, на заре развития Интернета серверы подгружали контент сразу же на сторону клиента. В последнее же время, с разработкой современных веб-фреймворков, таких как AngularJS и Ember, мы видим тенденцию к обработке запросов на стороне клиента и использованию сервера только для API. Однако, это далеко не единственная тенденция. Сейчас происходит медленное возвращение или, скорее, слияние этих двух архитектур.