Это перевод заметки Math Experts Split the Check, в которой на простом примере разделения счета в ресторане наглядно демонстрируется, насколько разными могут быть взгляды и суждения физика, математика, инженера, экономиста и программиста.



Инженер: не забудьте дать на чай 18%.

Математик: это до налогов или после?

Физик: давайте предположим, что в нашей системе нет налогов.

Программист: но налог есть!

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

Книга «Основы стиля в типографике» (The Elements of Typographic Style), которую стоит рекомендовать всем начинающим дизайнерам, начинается со слов:

Типографика существует, чтобы отдавать должное содержанию.

Если и можно уместить все знания о типографике в одну фразу, то это именно она. Контент может кричать или шептать. Так же и шрифты, могут быть «громкими» и «тихими». Буквы, и в частности глифы, их различия, позволяют придать тексту много оттенков.

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

Пожалуй, самый популярный логотип, который демонстрирует «владение буквами» — это логотип FedEx, разработанный Линдоном Лидером (Lindon Leader). На первый взгляд, это обычное применение Futura Bold. Однако если присмотреться, видно, как были изменены буквы «E» и «x», чтобы образовалась стрелка:

Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого HTML-email'а на телефоне? Приходится много масштабировать и скроллить, в целом читать становится очень неудобно. Поэтому и письма электронной почты следует делать адаптивными.

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них just for fun, но некоторые могут быть уже сегодня использоваться на живых сайтах. В этом топике собраны наиболее интересные примеры использования WebGL, спасибо двум постам Дэвида Уолша (David Walsh) и сайту WebGL Experiments.

Google Maps Cube

Необычная игра, где нужно гонять шарик по лабиринту из улиц Google Maps, доставляя метку в определенные места на карте. И все это расположено на кубе. Осторожно, можно залипнуть надолго!

Это перевод интересной статьи о дизайнерах и их принципах работы How to Work with Designers.

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

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

Еще примеры таких «переводов»:

• Можем ли мы увеличить кликабельность этой кнопки? → Как нам убедиться, что пользователь знает о новой возможности, которой легко воспользоваться?
• Нужно, чтобы эти изменения не ухудшили показатели → Необходимо убедиться, что эти изменения не доставят пользователям неудобств.

Вчера в 03.51 по московскому времени все службы Google, в том числе и поиск, ушли в оффлайн на 1-5 минут. Это хорошо видно в сервисе мониторинга Apps Status Dashboard. Казалось бы, ничего страшного — всего около двух минут. Однако такое событие не могло не отразиться на других сайтах Интернета.

Сервис сбора данных со счетчиков GoSquared зафиксировал общее падение посещаемости сайтов в интернете на 40%. На графике наглядно видно резкое падение и затем скачок трафика:

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

Последний месяц, в связи с недавними событиями — закрытием почтового сервиса с шифрованием LavaBit, заявлениями Гугла, что Gmail не гарантирует безопасность данных, переходом крупнейших email-сервисов Германии на шифрование писем, в Интернете все чаще стали говорить об обеспечении конфиденциальности частной переписки. Начнем с простых решений.

SecureGmail

Большинство из нас пользуется почтой от GMail, поэтому хорошо бы научить его шифрованию писем. К счастью, уже есть расширение для Google Chrome — SecureGmail.

Использование энергии радиоволн было затруднительно из-за слишком быстрого их рассеивания. Однако инженеры из Университета Вашингтона создали технологию, благодаря которой устройства связи могут питаться от уже существующих в эфире сигналов, в частности, телевизионных. Система называется Ambient Backscatter («Обратное рассеивание»). Разработанные маломощные устройства также могут поддерживать связь друг с другом, используя чужие радиоволны.

В 1982 году Apple было всего шесть лет, а 28-летний Стив Джобс был сооснователем и президентом. Уже тогда компания стремилась к качественному дизайну своих продуктов и нанимала лучшие дизайнерские бюро для разработки концептов устройств. Одним из таких партнеров стала фирма Frogdesign. Ее основатель, немецкий дизайнер Хартмут Эсслингер (Harmut Esslinger), в прошлом году представил в своей книге "Design Forward" прототипы устройств Apple, которым не суждено было появиться на свет.

В то время компания Apple переживала не лучшие времена, активно боролась за рынок со своими конкурентами — IBM, Xerox, Sony, поэтому делать революционный продукт было просто необходимо. Хартмут Эсслингер в 70-ые годы работал с Sony, а с начала 80-ых — с Apple. За время сотрудничества компания изменила статус с локального бренда Кремниевой Долины на корпорацию мирового масштаба. Не малую роль в этом сыграл Хартмут Эсслингер, предложивший Стиву Джобсу концепт простого, светлого, «Snow White» дизайна. Таким был создан первый Макинтош, который царствовал на рынке с 1984 по 1990 годы, вплоть до ухода Стива Джобса из Apple. Вслед за ним ушел Хартмут Эсслингер, разорвав свой контракт и начав сотрудничать с NeXT.

Apple Snow White 3 «Macphone», 1984

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

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

Использование контейнера для каждого изображения

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

<div class="img_wrapper">
    <img src="comicbookguy.jpg" alt=""/>
</div>

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

Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.

Поддержка браузерами

На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com.

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

На днях проект The Pirate Bay отметил свой 10-летний юбилей. Основанный в 2003 году группой хакеров и активистов, небольшой шведский торрент-трекер рос, став иконой интернет-пиратства. Давайте взглянем, как проект прошел путь от маленького сайта, расположенного на сервере с процессором 1.3 ГГц и 256Мб оперативной памяти, до глобального пиратского ресурса с мировым именем.

На днях появился наверное самый удобный инструмент для front-end разработчиков — Emmet LiveStyle. Это плагин для двухстороннего (редактор браузер) редактирования CSS файлов, который может заметно облегчить и ускорить разработку. Восторженные отзывы по всему интернету это подтверждают (комментарии к статье Smashing Magazine и на Хабре).

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

На днях, 9 августа, файлообменнику The Pirate Bay исполнилось 10 лет. Их сайт, как и многие другие, даже более легальные, заблокированы государственной цензурой во многих странах. TPB часто оказывается в списках запрещенных сайтов, поэтому на свой юбилей они представили новый браузер — Pirate Browser, который позволяет обходить цензуру, например в таких странах как Иран, Северная Корея, Великобритания, Голландия, Бельгия, Дания, Италия и т.д. При этом серфинг не становится анонимным: PirateBrowser направлен в первую очередь на предоставление доступа ко всей информации и сайтам Интернета как можно большему количеству людей во всем мире.

В 1964 году в NASA начали задумываться об отправки астронавтов на Луну, а также о том, какой аппарат для изучения поверхности послать вместе с ними. Первые варианты были нелепые и странные, но в 1969 году ученые всерьез взялись за разработку лунохода для миссии «Аполлон». И менее, чем через два года, он был на Луне.

Первые роверы

Ученые NASA из Центра космических полётов имени Джорджа Маршалла (George Marshall Space Flight Center) были первыми, кто задумался об отправке астронавтов на Луну. Было очевидно, что потребуется специальный аппарат, которые будет помогать при исследовании спутника. Главным претендентом был проект транспорта весом в три тонны, с закрытой кабиной для двух человек и максимальной скоростью до 100 (!) километров в час, что позволяло изучить большую площадь. Назывался проект MOLAB.

Американский специалист по компьютерной безопасности Брендан О’Коннор (Brendan O'Connor) продемонстрировал на прошедшей недавно конференции по компьютерной безопасности BlackHat USA 2013 в Лас-Вегасе разработку CreepyDOL (Creepy Distributed Object Locator) — специальное ПО и устройства F-BOMB (Falling/Ballistically-launched Object that Makes Backdoors) на основе Raspberry Pi, с помощью которой можно создать сеть, перехватывающую Wi-Fi трафик. Стоимость комплектующих для одного такого девайса — около $57.

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

• Нет возможности оптимизировать автоматически много файлов
• Сложно и неудобно использовать в рабочем процессе

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

Оптимизация изображений с помощью командой строки

Для каждого png файла используются optipng и pngcrush, а для jpg — jpegtran. Для начала опробуем optipng: