Одним из приоритетов для команды Яндекс.Почты всегда была и есть безопасность данных пользователя. Причем это касается не только хранения писем, но и безопасного доступа к ним. Еще в 2011 году мы стали пропускать все изображения в письмах через наши прокси-сервера, перекрыв один из каналов распространения вредоносного кода, а также кешировать их для экономии трафика и обеспечения большей приватности. В ноябре этого года мы внедрили шифрование при приеме и отправке почты, а также и перевели почту в режим HTTPS-only — теперь веб-интерфейс доступен только по безопасному протоколу.

А с недавних пор мы стали поддерживать новый механизм защиты данных пользователя – стандарт Content Security Policy. С его помощью можно запретить скриптам на странице подгружать какие-либо ресурсы с хостов, не указанных в белом списке.

Это пока довольно редкая штука (ни одна крупная известная нам почта этого ещё не применяет), и в этом посте мы поделимся опытом внедрения стандарта.

Как часто вы сталкиваетесь с тем, что не можете ввести предлагаемую капчу с первого раза? Теперь подумайте, какие трудности могут возникнуть у современного человека, который разговаривает с компьютером «на Вы»? Для него преграда в виде reCAPTCHA становится сильнее, чем для робота.

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

И я хочу рассказать о средстве, которое решает эти проблемы.

Более пристальный взгляд на пользовательский опыт с мобильными устройствами

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

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

Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

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

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

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.

Мишко Хевери, главный разработчик Ангуляра, как-то упомянул, что приложение гарантированно работает без тормозов, если в нем не более 100 активных областей видимости. Такой подход, в общем, применим к любым приложениям. В играх давно не рендерят то, чего игрок не видит и только в вебе пока еще считается нормой отобразить целиком список из нескольких тысяч элементов. С приходом js-фреймворков ситуация должна измениться и лучшим решением станет удаление из DOM того чего нет на экране, нежели отказ от промежуточных тегов, биндингов и других вещей, облегчающих разработку. Поэтому провел небольшой анализ решений для отображения больших списков. Наткнулся на пару статей:

1. The Infinite Path of Scrolling

В ней парень рассказывает, что проходил стажировку в Гугле в команде Ангуляра и ему поручили исследовать этот вопрос. (Радует, что разработчики заинтересованы этим. Надеюсь, скоро увидим родную поддержку бесконечного скролла).

Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

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



Автор принимает решение сверстать эту полоску с помощью тега

---

, вот так:

<body class="whitesquare">
  <hr/>
  <!-- вся остальная страница -->
</body>

.whitesquare hr {
  /* стили для полоски  */
}

Это просто супер пример несоблюдения моего правила.

Доброго времени суток, уважаемые хабравчане. Не так уж давно, для того чтобы сделать что-то «округленное» с нефиксированной высотой приходилось создавать таблицу и крайним ячейкам в бэкграунд задавать нарезанные углы. Вообще любое «непрямоугольное» могло быть только графическим изображением. Сейчас же современные стандарты CSS позволяют создавать весьма интересные вещи. Но все нетипичные фигуры в большинстве своем дозволено сделать благодаря псевдо-селекторам :before и :after. Даже существуют некоторые «паттерны» для этого. А в недалеком будущем появится возможность задавать любые формы для элементов. С приходом CSS Masking я бы сказал наступит веб-дизайнерская сингулярность — веб-дизайн сможет быть любым. Единственное ограничение — это предел фантазии дизайнера. Но не будем о будущем. Все же я предлагаю вдохновиться прекрасным настоящим. В этом посте я собрал несколько крутых CSS реализаций. В некоторых из них спрятаны полезные техники, а в других любовь к CSS творчеству авторов этих подделок.

Не для таких же как и я каскадных зануд хочу добавить, что CSS изобретения могут быть и коммерчески выгодными. Только присутствие в CSSAWARDS, СSSWINNER, CSSREEL или CSSDESIGNAWARDS будет неплохой рекламой.

Таймер на чистом CSS

Через неделю на всей территории России вступит в действие национальный стандарт по юзабитили ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем».

Хочу вкратце рассказать, почему этот документ — не пустой звук. Пойдём по порядку.

1. Задачи документа

Кому он нужен?

• Руководителям — показать место человеческого фактора и эргономики в процессе проектирования.
• UX-специалистам — рассказать, как происходит проектирование, и каково их участие в этом процессе.

Для защиты от несанкционированного доступа к своему Nexus 4 я использую стандартную блокировку экрана с паролем. Но пароль приходится постоянно вводить вручную, а это немного напрягает. Блокировка с помощью графического ключа меня не впечатлила, так же как и PIN-код (слишком мало возможных комбинаций). Хотелось сильную защиту, с сохранением скорости разблокировки. Именно по этой причине я решил присмотреться к технологии NFC.

История развития проекта «PlayPad Детский Лаунчер» началась год назад. В то время мы работали над заказом «Лаунчер с функциями родительского контроля для детского планшета PlayPad2». Именно тогда пришла мысль о создании детского лаунчера, который можно будет установить на любое Android-устройство.
В Google Play есть множество приложений, решающих проблемы родительского контроля, но мы всё же решили создать лаунчер и сделать его удобнее, проще, красивее и функциональнее аналогов. Вот, что из этого вышло.

Некоммерческая исследовательская компания Common Sense Media, которая занимается исследованием эффектов, которые оказывают средства массовой информации и технологии на молодых пользователей, представила свой второй доклад о том, как дети до 8 лет взаимодействуют с масс-медиа.

Под катом — перевод инфографики этого доклада.

Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

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

Интерес к безопасности подобных систем понятен, и банки, казалось бы, работают в этом направлении, используют всевозможные средства защиты (шифрование, электронную цифровую подпись и т. п.). Но как на самом деле обстоит дело с безопасностью систем ДБО? Эксперты Positive Technologies провели собственное исследование. Результаты под катом.

Гарри Бринул (Harry Brignull) — независимый дизайнер пользовательских интерфейсов из Лондона с кандидатской по когнитивной науке. Он также известен как создатель сайта Тёмных паттернов, предназначенного, по его словам, «перечислению и осмеянию веб-сайтов, использующих обманчивые интерфейсы пользователя». Данная статья основана на презентации, которую он показывал в Мюнхене в апреле на Search Marketing Expo.

Статья переведена и опубликована с согласия автора.

Когда Apple выпустила iOS 6, одной из новых фич была не слишком анонсируемая компанией система рекламного отслеживания Identifier for Advertisers (IDFA). Она присваивает каждому устройству уникальный идентификатор, использующийся для слежения за активностью браузера и создания таргетированной рекламы. IDFA анонимен, но неприемлем для людей, заботящихся о приватности.

К счастью, Apple реализовала возможность отключения фичи.

В этой относительно небольшой статье мы постараемся дать обзор изменений в интерфейсе Windows 8.1, на которые важно обратить особое внимание дизайнерам и проектировщикам приложений для Windows Store. В конце вы также найдете подборку докладов с конференции Build, полезных для дизайнерской аудитории (для разработчиков они, кстати, тоже полезны).

На прошлой неделе компания 3CX представила 3CX Mobile Device Manager: недорогое и простое решение для управления смартфонами на Android и iOS.

Функционал у ПО получился довольно продвинутый:
— Удаленная блокировка или удаление данных

Если смартфон потеряли или вообще украли, через 3CX Mobile Device Manager можно удаленно заблокировать его и/или стереть все содержимое, включая данные на SD-карте. Защита от несанкционированного доступа возможна и без подключения к интернету. Плюс,

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

Компания Web of Trust (WOT) объявила о подключении к Безопасному Поиску с помощью Safe Browsing API Яндекса.

Безопасный Поиск Яндекса в автоматическом режиме осуществляет проверку сайтов на наличие в них вредоносного программного обеспечения и иных угроз безопасности.

Использование Safe Browsing API Яндекса позволяет оперативно получать информацию о найденных угрозах и предупреждать владельцев web сайтов а так-же пользователей браузерного дополнения (add-on) WOT.

Сочетание оценки сообщества и автоматической антивирусной проверки позволяет более точно оценить потенциальную опасность web ресурса.

В этой статье я хочу рассказать об элементах продающего дизайна для сайта. AIDA — (Attention, Interest, Desire, Action — внимание, интерес, желание, действие) — принятая в практике американского маркетинга модель потребительского поведения, описывающая последовательность событий, ведущих к принятию решения о покупке: внимание → интерес → потребность → действие.

Принципы AIDA главным образом относятся к дизайну целевых страниц (landing pages), где, как правило, маркетинг и веб дизайн объединяются в единое целое. Эти страницы нацелены на продажу продукта, услуги или подписки.

Представляем бесплатное приложение «Блог» (лицензия LGPL) для ведения блогов, написанное на PHP-фреймворке Webasyst:




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

Поддерживается весь основной функционал, который есть в популярных движках: много блогов, комментарии, RSS, sitemaps, кат, фронтенд, бекенд, дизайн-редактор и пр. Есть и такие приятные фичи, как, например, календарь публикаций: