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

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

Но куда уходить людям?

Что бы был доступ к информации, свобода слова и соблюдались хотя бы те правила, которые есть в конституции?

Mesh сети не подходят, Tor — тоже не может обеспечить требуемого, остается I2P.

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

Постоянно создавая сложные веб-проекты с нуля, начинаешь замечать, что примерно треть — а в некоторых случаях половина и больше — кода в действительности автономна, и привязана только к определенному DOM-элементу.

В рабочих проектах это может сводиться к чему-то вроде

function pageChange(){
    if ($(‘.element-carousel').length>0) {$('.element-carousel').initCarousel()}
    if ($('.element-scrollbox').length>0) {$('.element-scrollbox').initScrollbox()}
…

А может и не сводиться, и в каждом условном контроллере (колбэке на смену определенной страницы) мы вызываем код, связанный с определенными элементами.

Знакомо? Думаю, да. Считаете ли вы этот подход неправильным? Если первый ответ – да, то уверен, что и второй тоже да.

Хотите узнать, как можно сделать правильно, аккуратно и красиво?

О библиотеке knockout.js на хабре написано не так много, но кое что есть (и конечно же есть официальный туториал и другие материалы на оф. сайте и хороший ресурс на англ. языке knockmeout.net, статьи которого смогу перевести, если будет спрос). Данная статья возможно перерастёт в цикл статей по javascript и нокауту, если нло не похитит меня.

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

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

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

Flat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

• Быстрее создается страница, чем когда бегаешь между браузером и PSD.
• Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
• Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.

Только что прочитал про биллинги в больших проектах и хочу поделиться опытом биллинга для крохотных проектов.

Основа — PayPal. Он довольно широко распространён + если нет у клиента учетной записи в PayPal, то можно обычной кредиткой оплатить. Поиск по хабру выявил уже один мануал, но он реально страшен. Мы пойдем простым путем!

Автор изображения MVBen

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

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

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

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

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

Вышла в свет обновленная версия русскоязычной базы данных стран и городов.

База распространяется в двух модификациях: «Страны и города» (13Mb, после установки ~74Mb)  и «Только страны» (2Mb, после установки ~9Mb). Также в архивах находится небольшой пример использования базы данных на php.

Square, PayPal, iZettle — известные во всем мире компании, которые предлагают решения по приему банковских карт. Ни один из брендов не представлен в России. Зато у нас есть десять собственных. Мною проведено независимое исследование сервисов мобильного эквайринга в России, позволяющих принимать платежи по банковским картам Visa и MasterCard: iPay, Sum Up, Pay Me, 2Can, SimplePay, LifePay, Термит, ibox, Paybyway и RBK Card.

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

Привет, Хабр! Эта статья — первая в нашем буручном блоге.

Мы делаем метапоиск авиабилетов buruki.ru с человеческим лицом. Здесь мы будем делиться техническими и психологическими открытиями, которые мы совершаем каждый день в работе над проектом.

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

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

Задача: как получить деньги от другого человека здесь и сейчас?

Вы оказываете услуги, но при этом не предприниматель. Вы решили что-то продать. Вы расплачиваетесь за всех. Вам нужно погасить задолженность по кредитной карте. Вот лишь небольшой список тех ситуаций, когда нужно передать деньги от одного человека другому.
Вообще вариантов передачи денег несколько: отдать наличными, перевести электронными деньгами, оформить платеж через интернет-банк, сделать перевод с банковской кары на банковскую карту Visa или Mastercard. Каждый способ по-своему хорош, но карты все же рулят!
Мне было интересно сделать review российских сервисов P2P-переводов по банковским картам.

На Июль 2013 г. найдено 6 сервисов по переводу средств с карты на карту по технологиям Visa Money Transfer® и MasterCard MoneySend®:

• MasterCard Mobile
• Qiwi
• Альфа- Банк
• RuRu
• PayOnline
• Русский Стандарт

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

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

Ускорение набора текста с помощью добавления спецсимволов

Можно менять дополнительные символы виртуальной клавиатуры на необходимые в каждом конкретном случае. Например при наборе обычного текста видим знаки препинания:

Уже три года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2013.

Интро

Это краткий перевод основных тезисов из брошюры «Web API Design. Crafting Interfaces that Developers Love» Брайана Маллоя из компании Apigee Labs. Apigee занимается разработкой различных API-сервисов и консталтингом. Кстати, среди клиентов этой компании засветились такие гиганты, как Best Buy, Cisco, Dell и Ebay.

В тексте попадаются комментарии переводчика, они выделены курсивом.

Собираем API-интерфейсы, которые понравятся другим разработчикам

Понятные URL для вызовов API

Первый принцип хорошего REST-дизайна — делать вещи понятно и просто. Начинать стоит с основных URL адресов для ваших вызовов API.

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

/dogs для работы со списком собак
/dogs/12345 для работы с отдельной собакой

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

Одной строкой: тут рекламируется Папирия, онлайновый сервис для подготовки документов в LaTeX. Ходить на papeeria.com.

Введение

Если вы студент, то наверняка либо уже пишете курсовую или диплом, либо всерьез над этим задумываетесь. Если вы к тому же учитесь в техническом вузе и в вашей работе много формул и прочего нетекста, то возможно, вы задумываетесь над тем, в чём его писать — в LibreOffice/Word или в LaTeX. И возможно, от использования LaTeX вас останавливает только то, что Word вот он, под рукой, бери и пиши, а латех надо еще устанавливать, возиться с почти неизбежными подводными камнями и потом еще тупо глядеть на белый лист и думать с чего начать. Вот вам-то мы и хотим помочь. А также тем, кто хочет вести свою научную работу из любого места, где есть интернет.

Для всех остальных: если вы вообще не знаете, что такое латех, то рекомендуем погуглить (можно начать, например, отсюда). Если же что-то знаете и просто хотите потроллить на тему latex vs word, то поищите себе, пожалуйста, другую поляну. Будем премного благодарны.