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

Этапы разработки:

Часть 1 проектирование
Часть 2 сборка
Часть 3 кинематика
Часть 4 математика траекторий и последовательности
Часть 5 электроника
Часть 6 переход на 3D печать
Часть 7 новый корпус, прикладное ПО и протоколы общения
Часть 8 улучшенная математика передвижения
Часть 9 завершение версии 1.00

Силовая часть

Прошлая плата была собрана из того что было в кейсах с компонентами: LM2596S и no-name дроссели. Нехорошо нужно переделать. На этот раз я решил сделать 6 канальный блок питания по одному каналу на конечность, в качестве DC-DC взял LM2678. Получилась довольно приличная плата:



Нагрузочные тесты показали хорошую эффективность. При нагрузке 4А эффективность преобразования составила 92% при 12В входном и 6.5В выходном напряжении. Один такой канал вытягивает 3 сервопривода без серьезной просадки напряжения (менее 0.2В).

Внутри гексапода плата смотрится просто шикарно никакого колхоза и висящих проводов.

Плата управления

Данная часть получила минимальные изменения. В функционале осталось все так же, были переразведены USARTы для коммуникации с камерой, перемещены транзисторы для управления светодиодами, изменены тип кнопок BOOT и RESET, ну и всё в таким духе.

Была добавлена возможность управления питанием сервоприводов, т.к. текущие приводы при потере импульса продолжают удерживать последнее положение. Тут всё просто вывод микроконтроллера подключен к выводу ENABLE микросхемы LM2678 и в случае ошибки или разряда батареи контроллер сможет выключить питание.

Трансляция видео

О да, теперь гексапод может транслировать видео на телефон, либо другое устройство где есть браузер. Сделано это на базе ESP32-CAM. Я не хотел создавать себе лишних проблем и пришлось прибегнуть к запретной технике Arduino. Да, я просто взял готовый пример с передачей кадров по HTTP, немного его допилил и всё готово.

При получении HTTP GET запроса ESP32 забирает фрейм с камеры, преобразует его в JPEG формат разрешением 640х480 и отсылает чанками по WI-FI на приложение\браузер.

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


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

Теперь немного об архитектуре. Гексапод это ходячая точка доступа WI-FI, ESP32 в данном случае настроен в качестве клиента. При подаче питания гексапод поднимает точку доступа WI-FI в течении 30-40 секунд, ESP32 в это время делает попытки подключится ней и в случае успеха передает по USARTу свой IP адрес в STM. В результате мы имеем беспроводную локальную сеть.

Такая архитектура сделана по нескольким причинам:

• STM32F373 не потянет обработку такого потока данных;
• Не нужно делать свой протокол передачи изображения. На борту есть HTTP, почему бы его не использовать сразу?;
• Прямая передача данных на устройство по воздуху, минуя STM и провода;
• Возможность трансляции видео на любое устройство с браузером, которое подключилось к гексаподу. К примеру, я могу управлять гексподом с телефона и спокойно смотреть его глазами с ноутбука. Мне показалось это очень удобным.

Для просмотра видео из браузера нужно ввести в адресную строку IP адрес камеры, который будет показан в программе управления гексподом:

Долгожданный результат

Планы на будущее

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

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

Поехали!

Предисловие. Почему я выбираю свободное ПО и какое право я имею его критиковать?

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

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

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

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

Ну и дисклеймер: Все, что я пишу в этой статье моё личное мнение, я буду рад конструктивной дискуссии в комментариях. Довольно болтать, перейдем к основной теме этой статьи.

Причем тут Total Commander?

Думаю, все знают примеры продуктов, которые устроены или выглядят настолько странно и отталкивающе, что, кажется, ими невозможно пользоватьсявообще. И каждый может вспомнить своего знакомого/коллегу/преподавателя, который чем-то подобным пользуется и, что самое главное, искренне убеждён: нет ничего удобнее.

Каждый вспомнил что-то свое: кто-то VIM, кто-то 7-Zip, а кто-то, как я, Total Commander.

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

Никто не хотел бы писать свой первый "Hello world" в VIM'е. Никто не хотел бы, чтобы на его первом ПК стоял CLI Arch Linux. Это слишком сложно, непонятно, отталкивающе для новичка. Должна быть простая, приятная глазу, интуитивно понятная и дружелюбная альтернатива. Что-то, с чего можно начать, и только потом, если захочется, переходить к чему-то более сложному.

Так в чем же проблема СПО? А в том, что среди всего многообразия свободных программ красивых, дружелюбных и интуитивно понятных единицы. И это огромная проблема для всего FOSS движения.

Порог входа настолько высок, а UI/UX настолько уступает проприетарному ПО, что новых пользователей привлечь никак, кроме как запугиванием, невозможно.

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

На самом деле, вы и сами можете взять телефон, поставить на него F-Droid и поустанавливать оттуда разные приложения (мы будем рассматривать только мобильные приложения, где удобный интерфейс особенно важен ввиду отсутствия мышки и характера использования устройства "на ходу"). Вы быстро поймёте, что дизайн у абсолютного большинства приложений, скажем так, сугубо утилитарный, лишён всяких украшательств и, зачастую, довольно неудобный, но я сделаю это за вас.

Давайте рассмотрим примеры, и вы сами в этом убедитесь

Сейчас я буду сравнивать интерфейсы популярных проприетарных программ и наиболее достойных свободных альтернатив. Альтернативы буду брать с сайта alternativeto.net. Всеми этими приложениями я пользуюсь уже довольно длительное время.

1. Google Play VS F-Droid

F-Droid это магазин приложений, такой же как Google Play, однако там распространяются исключительно приложения с открытым исходным кодом. Приложения также проходят модерацию и "проверку на открытость". Так, например, клиент для YouTube может получить пометку "Популяризирует несвободные сервисы". Звучит здорово, давайте посмотрим, как это выглядит.

Начнём сравнение со стартовой страницы:

В Google Play, едва зайдя в приложение, мы видим игры. Вверху и внизу мы видим кнопки филтров и категорий, строку поиска. Довольно удобно. Все иконки оформлены в едином стиле (прямоугольник со скруглёнными углами). Под каждым приложением сразу виден его рейтинг. К дизайну у меня вопросов нет.

Посмотрим теперь на домашнюю страницу F-Droid:

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

Google Play, набрать "редактор фотографий" и увидеть в выдаче подходящие варианты).

Сразу возникает множество вопросов. Почему плитки разных размеров? Почему все иконки разной формы? Почему какие-то иконки растянуты и потеряли четкость? Что значит "Последние"? Они недавно обновились? Разработку сворачивают и это их последний релиз? Их последними добавили на площадку? Ничего не понятно. Кстати, никаких анимаций, в отличие от Google Play, тут нет, все выглядит очень дергано и топорно. Кроме того, прежде чем сделать этот скриншот, мне пришлось подождать, пока иконки прогрузятся практически 10 секунд При скорости соединения в 90 мбит/с! Проекту 10 лет, с финансированием ему повезло больше, чем многим другим, ну почему всё так плохо?

Тут кто-то меня перебьёт и скажет: "Какие анимации? Работает и слава богу. Какой дизайн? Ну потерпи ты 10 секунд, пока загрузится. Тебе шашечки или ехать надо?"

В этом и есть проблема. Всем кажется, что дизайн и удовольствие от пользования продуктом излишества, на которые нет времени. Я напомню: F-Droid существует уже 10 лет, а времени все нет. Нет не времени, а понимания. Эту проблему я и пытаюсь поднять. О каком развитии Open Source можно говорить, если ворота в его мир выглядят так?

Продолжим наше сравнение. Посмотрим на страницу приложения в обоих магазинах:

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

Теперь F-Droid:

Четверть экрана занимает шапка. Хочу заметить, что я видел ее заполненной от силы 3 раза, чаще всего там просто ничего нет. Четверть экрана на выброс. Ниже у нас Не угадали! Changelog! Зачем он мне? Я еще никогда не устанавливал это приложение, я зашёл сюда прочитать про него и решить, нужно ли оно мне. Зачем мне знать, какие баги вы недавно исправили? Ниже мы видим скриншоты. Тут у меня много претензий. Не к этому приложению в частности, а к F-Droid в целом. Разработчики магазина добавили поля для описания и скриншотов, шапки, но не сделали их заполнение обязательным. Множество девелоперов оставляет их пустыми. Что еще страннее, я регулярно нахожу в F-Droid приложения, у которых есть скриншоты, но сделаны они были На Android 4.4 KitKat! Помните такой? Интерфейс на фото давным-давно был изменен, уже годы приложение выглядит по другому. При этом обновления выходят стабильно, там пишут изменения, но никто и не думает обновлять скриншоты. У меня это не укладывается в голове. Кстати, скриншоты, по доброй традиции, грузятся 10 секунд. Оценки или счетчик скачиваний отсутствуют в принципе. Я просто не знаю, как я должен судить о приложении до его загрузки.

2. Google Maps VS OsmAnd~

Представим, что вы ищете открытую и свободную альтернативу Google Maps. На ум, естественно, приходит Open Street Map (OSM), однако OSM это только сама карта. Для мобильного телефона нужно еще приложение-просмотрщик. Наиболее популярным является приложение OsmAnd, расширенную версию которого можно скачать в F-Droid. Давайте сравним его с популярнейшим Google Maps.

Попробуем выполнить поиск "Москва" в Google Maps:

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

Посмотрим на OsmAnd.

Цветовая схема более пестрая, чем в GMaps, но пользоваться этим можно. Шрифты легко читаются, карта как карта. Доп. информацией о месте приложение нас не балует, но бог с ним. В чем же проблема? А проблема в том, что приложение не умеет загружать карты в режиме реального времени Совсем! Когда я набрал в поиске "Москва", мне было предложено загрузить карту региона (90 МБ) с не самых быстрых серверов OSM. На это ушло в больше минуты моего времени. А жизнь ведь коротка Помимо этого, приложение работает ну очень так себе. Тормозит, дергается, подвисает, ни о какой плавности прокрутки карты речи не идет. Не подумайте, это работает, но плохо. Да, 5-7 лет назад, не имея возможности с чем-либо сравнить, я бы сказал, что это отличное приложение, но в 2020 году, зная, как могут и должны выглядеть качественные карты для Android, пользоваться OsmAnd совсем не хочется.

Не в пользу приложения играет и сам Open Street Map. К сожалению, проект, похоже, переживает не лучшие времена. Карты обновляются очень редко и выборочно, информация, даже в крупных городах, серьезно устарела: иногда на OSM не найти целых улиц и дорог, построенных за последние 5 лет. Большая часть заведений возле моего дома, отмеченных на карте, также уже давно не работают, а новых на картах нет. Довольно грустно, ведь это практически единственный проект открытых карт такого масштаба, и другого у нас просто нет.

3. Mi-Fit VS Gadget Bridge

Gadget Bridge это аналог проприетарным приложениям для работы с фитнес браслетами и умными часами (в нашем примере Mi-fit от Xiaomi). Без облаков, синхронизаций и отправки данных куда-либо. Идея крутая, посмотрим на реализацию.

Начнём с домашнего экрана:

В Mi-fit нас встречает экран со всеми основными показателями: сон, шаги, последняя тренировка, вес (для тех, кто пользуется умными весами). Отсюда же можно начать запись тренировки. Дизайн приятный глазу, хоть и пёстрый. Мне не к чему придраться.

Посмотрим на Gadget Bridge:

Нас встречает меню со списком подключенных гаджетов. Зачем? Я не знаю. Видимо, я один не пользуюсь пятью фитнес-трекерами одновременно, иначе я не понимаю, зачем это нужно. Из этого экрана мы можем извлечь ровным счётом ничего, кроме заряда батареи браслета. Сравните это с Mi-fit.

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

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

А сейчас будет больно, приготовьтесь. Gadget bridge:

Я не знаю, как это комментировать. Я не знаю, как это читать. Я не знаю, кому пришло в голову вставить это в релизную версию приложения. Какую информацию я могу извлечь из этих экранов, помимо того, что разработчик сно дал понять, что ему наплевать на меня? Ну, я вижу, что, оказывается, глубокого сна у меня выдалось целых 12 минут за всю ночь. Звучит не очень убедительно. А еще у меня было 8 часов и 13 минут чего-то. Не знаю чего, надпись находится за пределами экрана. Наверное, речь о беге трусцой или занятиях кросс-фитом. Экран "Активность" я оставлю без комментариев и просто молча удалю приложение.

Есть и исключения

Но, к сожалению, их доля в общей массе исчезающе мала. Однако, эти продукты по-настоящему хороши, и с точки зрения UI/UX сделаны отлично. И потому популярны.

Приведу несколько примеров таких продуктов, которыми сам пользуюсь и получаю от этого удовольствие:

• Рабочая среда KDE Plasma
• Федеративная соц. сеть Mastodon (веб-клиент)
• Менеджер паролей Bitwarden
• Браузер Firefox от Mozilla
• Офисный пакет LibreOffice

Наверное, есть и еще примеры, но факт остаётся фактом: качественный и продуманный интерфейс в СПО скорее исключение, чем правило, и это печально.

Почему так происходит?

Я вижу три причины:

1. Нет понимания. Многие свободные программы пишутся энтузиастами-одиночками или маленькими группами программистов. Проблема в том, что программист не дизайнер и в дизайн не хочет, не может, не умеет и не должен. Дизайном должен заниматься профессионал, но программисты зачастую не имеют понимания, что этого профессионала нужно к делу привлечь. В итоге делают сами, как умеют.
2. Нет ресурсов. СПО не коммерческий проект и разработчики, чаще всего, работают на голом энтузиазме и редких донатах. В таких условиях, конечно, никто не будет нанимать дизайнера (оплатить бы хостинг за следующий месяц).
3. Нет мотивации. Тяжело работать, не получая никакой отдачи. Запал заканчивается, человек выгорает. Я видел десятки заброшенных проектов и проектов, которые годами ходят по рукам, их забрасывают одни, подбирают другие и так далее. Почему так случается? Я думаю, это наша вина, как пользователей. Разработчикам не донатят, в проекты не коммитят, большинство ленится даже написать хороший отзыв приложению в плей-маркете или на Alternativeto. В коммерческих проектах есть зарплаты, целые команды, менеджеры и HR'ы, занятые тем, чтобы команда была замотивирована, сплочена, и работала эффективно, потому что это приносит деньги. В сфере разработки СПО это большая редкость. Результат предсказуем: разработчики просто забивают на свои проекты, потому что не видят причин ими заниматься дальше.

Что можно с этим сделать?

Я не являюсь профессионалом, но поделюсь своими мыслями на этот счёт. Буду рад услышать ваши варианты в комментариях.

Опираясь на описанные выше проблемы, я могу предложить только одно решение создать НКО, занимающееся дизайном и UI/UX свободного ПО. Эдакий "FOSS Design foundation". В организации должны работать несколько штатных дизайнеров на зарплате, а также волонтеры (например студенты соответствующих направлений). Организация будет финансироваться за счёт пожертвований и будет заниматься просвещением разработчиков, выпуском инструментов и материалов для них, консультациями и курированием проектов.

Если разработчики понимают, что код нужно писать по PEP8, но не понимают, что UX важен, значит им просто никто этого не объяснил. Этим и может заняться новое НКО. Также важно дать разработчикам качественные инструменты: если в распоряжении девелопера только пыльный шаблон из Android Studio, слабое понимание того, как делаются интерфейсы и желания заниматься этим на час, то результат будет соответствующий. Команда профессионалов должна заняться разработкой шаблонов, рекомендаций и готовых материалов (например палитр и шрифтов), которые будут распространяться под свободными лицензиями. Организация также могла бы консультировать, курировать, брать на себя отдельные проекты, которые покажутся ей достойными.

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

Вместо вывода

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

Спасибо за внимание!

Привет, Хабр! Представляю вашему вниманию перевод статьи "READ ME!".

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

Нью-йоркское метро, 2019. Фото: Сьюзен Джейн Голдинг, CC 2.0

Исследования показывают, что на Medium, популярной платформе для длинных постов в блогах, средняя скорость чтения составляет около 40% это означает, что только двое из пяти читателей, начинающих читать статью, на самом деле останавливаются, чтобы закончить ее (хотя некоторые утверждают, что есть еще значительные различия). Изученные данные проекта Readymag Stories вращаются вокруг одинаковых чисел к концу каждой истории мы теряем более половины тех, кто начал интересоваться.

Что еще хуже, люди почти никогда не употребляют digital контент слово в слово: вместо этого они быстро сканируют текст.

Люди сканируют, потому что пытаются получить столько информации, сколько им нужно, отмечает Кейт Моран, старший специалист по пользовательскому опыту в Nielsen Norman Group.

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

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

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

В этом эссе мы предлагаем несколько советов о том, как с этим справиться.

---

Часть 1

Определить и победить

Давайте начнем с определения читабельности. Согласно классической работе Эдгара Дейла и Джинн Чалл, читаемость это общая сумма () всех элементов в данном фрагменте печатного материала, которые влияют на успех, достигнутый группой читателей. Успех это степень, в которой они это понимают, читают с оптимальной скоростью и находят это интересным.

Другими словами, готовность это метрика, которая оценивает легкость и удобство чтения конкретного текста.

Вопрос о том, как создать такую метрику, был задан задолго до появления сети еще в XIX веке. Французский психолог Луи Эмиль Джаваль представил одно из первых известных исследований этого вопроса в 1879 году в своей статье Эссе о физиологии чтения.

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

Два других выдающихся подхода появились позже, в середине XX-го века.

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

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

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

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

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

---

Часть 2

Как создать на экране особую читаемость?

Контраст

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

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

Если вы установите слишком высокую яркость, в сетчатку будут попадать прямые пучки света, что вызовет усталость, объясняет Ник Шерман, консультант по типографике и основатель типографской компании HEX Projects.

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

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

Некоторые отличные инструменты для измерения контрастности текста: Средство проверки контрастности цвета Webaim, Анализатор контрастности Luminosity, Средство проверки контрастности цвета и Визуализатор контрастности цвета.

Разрешение

Вторым фактором помех является разрешение количество точек в данной области, которые могут использоваться для передачи визуальной информации. Разрешение измеряется в точках на дюйм (dpi) или в пикселях на дюйм (ppi), причем эти термины используются взаимозаменяемо. Дисплеи MacBook Retina (высоко оцененные за высокое разрешение) по-прежнему превышают 200 ppi, а офсетная печать 2400 dpi или даже выше.

Большинство шрифтов, которые не были специально разработаны для компьютеров, имеют тенденцию к снижению читабельности при отображении на мониторах. Исторически сложилось так, что два главных гиганта, Apple и Microsoft, предлагали разные решения.

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

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

Однако изменения в способе отображения шрифтов уменьшили различия между этими подходами.

Часть 3

Эволюция слоев и настройки текста в вебе

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

В раннем Интернете не было людей, хорошо разбирающихся в наборе текста. Макеты веб-сайтов были плавными (не имели фиксированной ширины), поэтому текстовые строки имели любую возможную ширину. Это было не здорово: все виды типографских правил, предназначенных для разборчивости текста, были нечеткими, говорит дизайнер продукта Readymag Стас Аки. Ситуация требовала новых подходов к созданию веб-макетов.

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

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

Я думаю, что это выдвинуло идею адаптивного веб-дизайна на первый план. Мобильные сайты часто делались отдельно от настольной версии, и это происходило до появления iPhone. Я думаю, что первый iPhone это символ того, что мобильный интернет стал популярным явлением. Что касается читабельности, в частности, iPhone определенно устанавливает множество стандартов разрешения, как идею иметь Retina дисплей с очень высоким разрешением, вспоминает Ник Шерман.

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

---

Часть 4

Шрифты, которым адресованы особые вопросы

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

В начале 90-х британский шрифтовой дизайнер Мэтью Картер создал ранние шрифты Web 1.0 Georgia (1993) и Verdana (1996). По заказу Microsoft специально для текста на веб-страницах оба шрифта были разработаны в растровых изображениях, чтобы соответствовать пикселям стандартного разрешения экрана в то время, а затем преобразованы в контурные шрифты. Для разборчивости и читабельности на экранах Картер разработал эти шрифты с большей высотой x, открытой апертурой и большим пространством.

Спустя десятилетие появился субпиксельный рендеринг, также известный как сглаживание шрифтов, он добавляет красные, зеленые или синие пиксели к буквенным полосам для более четкого чтения даже на экранах с низким разрешением. Происхождение субпиксельного рендеринга остается спорным: Apple, затем IBM и Microsoft запатентовали различные реализации со своими собственными техническими отличиями, но Microsoft первой применила технологию в своих продуктах. Вскоре после этого Microsoft также выпустила коллекцию шрифтов Clear Type, набор шрифтов, предназначенных для демонстрации преимуществ субпиксельного рендеринга. В коллекцию вошли Calibri, Corbel, Cambria, Candara, Consolas, и Constantia.

Другое важное развитие произошло в 2009 году. Small Batch., Inc выпустила Typekit коллекцию веб-шрифтов из разных литейных цехов, использующую функцию @ font-face в CSS, одновременно защищая их от нарушений. @ font-face был доступен с 1998 года, но Typekit был первой коллекцией, которая решила проблему авторского права на шрифты, позволив расцвести новому рынку для пользовательских веб-шрифтов. Сейчас это сложно представить, но до Typekit вся веб-типографика была либо сделана с помощью одного из дюжины или около того веб-безопасных шрифтов, либо визуализирована в графике.

В 2014 году Apple выпустила семейство шрифтов San Francisco, вдохновленное культовым модернистским шрифтом Helvetica. San Francisco включает в себя несколько шрифтов, каждый из которых предназначен для отдельной среды: SF предназначен для macOS, iOS и tvOS, а SF Compact для Apple Watch. Основное различие между ними заключается в том, что буквы в округлой форме, такие как o, e и s, имеют закругленные стороны в San Francisco, тогда как в SF Compact они плоские. Эти плоские стороны позволяют расположить буквы с большим расстоянием между каждым символом, делая текст более разборчивым при небольших размерах (что особенно важно для часов).

Работая вместе, Adobe, Apple, Google и Microsoft совместно представили переменные шрифты в 2016 году. Сила этой новой технологии изменения шрифта заключается в ее способности объединять несколько шрифтов в один без увеличения размера файла. Переменные шрифты решают проблему загрузки отдельных файлов шрифтов для достижения различного веса, ширины, высоты, стилей и других атрибутов.

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

---

9 советов по созданию читабельного веб текста

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

1. Всегда начинайте с качественного текста.

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

2. Думайте о макете.

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

3. Применяйте сетки.

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

4. Помните об контрастности.

Помните об инструменте коэффициента контрастности, разработанном Инициативой веб-доступности, и проверьте свои дизайны на уровень контрастности.

5. Выбирайте подходящие шрифты.

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

6. Добавьте тексту навигацию по нему.

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

7. Поиграйте с внешним видом вашего текста.

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

8. Дайте возможность распечатать текст.

Если ваша статья длиннее пяти абзацев, добавьте опцию для ее распечатки приличным шрифтом для печатного текста, скажем, с некоторым вариантом Garamond.

9. Проанализируйте все.

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

---

Перевод статьи: Виктор Шишко

Источник

Началось все с того что я решил обновить свой ноутбук и купил себе DELL G3, для работы и естественно поиграть. Конечно, монитор у него не ретина, но в принципе пойдет.

Затем как то, работая с нашим заказчиком, я обнаружил, что с удаленного рабочего стола цвета их логотипа выглядят совсем по-другому. После чего я решил открыть их сайт на разных браузерах и понял, что 2 из 4 браузеров показывают не правильно и это те что на хром движке к слову показывали правильно цвета Mozila FireFox и Internet Explorer (внезапно! Но сайт их криво отрисовал но это уже другая история), а Google Chrome и Microsoft EDGE (на базе хром движка) не верно выводили цвета.

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


Если узнали чей логотип треугольника напиши в комментариях)

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



Кстати проверить цвета можно на сайте http://monteon.ru/ вот так выглядело до и после применения цветового профиля. Разница очевидна.

Кстати напишите в комментариях кто столкнулся с такой же проблемой. И помогла ли эта статья?

stol-p1 проект Оригами подставки для работы на ноутбуке и таблетах, который я разрабатываю с ребятами последние 7 месяцев. Он имеет 5 разных позиции для удобной работы за ноутом.

В нём имеется:

• Держатель для стакана

• Беспроводная зарядка

• Холдер для таблета и книжек

• LED лампа

• Анти соскальзывающая поверхность

• Складная подставка

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

Проблема:
Я практически всё своё время провожу за ноутбуком или айпадом, и большинство времени сижу в одном положении что само по себе плохо для осанки и шеи. Когда сидишь за ноутом 10-12 часов в день, 6 дней в неделю, начинаешь ощущать реальный дискомфорт. И я начал искать решение этой проблемы, а решение является разнообразить ваше положение за ноутбуком и айпадом, вы можете стоять или сидеть под другим углом, наклониться или лежать на кресле. Но блин это ноутбук, как бы я не старался поставить ноутбук в другое положение это либо неудобно либо ноутбук соскальзывает с твоих ног. И так я начал искать подставку с разными углами чтобы ты сидел и чилил за работой, вообще не парясь о том как тебе удобнее. В поисках аналогов на amazon, ebay, taobao, alibaba и kickstarter, всё что я нашел было громадное и предлагало всего 2 положения подставки, к тому же оно было наполовину из металла. Еще я нашёл регулируемый стол, который поднимается и опускается при нажатии кнопки и вся это лепота стояла больше $250 долларов, и я про себя сказал: чуваки вы гоните. Самое интересное что кроме космических цен они ничего из себя не представляли кроме просто стола который поднимается и опускается.



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



Proof of concept:
Как мы знаем что спрашивать друзей о том что они думают про твой продукт дело гиблое, потому что мало кто ответит, ты крутой и это самое лучшее что они видели либо ты свихнулся и что это такое ))) Поэтому я решил спросить у Reddit, закинул рендеры и сказал что: ребята это то что над чем я работаю, к удивлению меня поразила обратная связь:



Это был мой самый счастливый день, то чувство когда ты над чем то работал понравилось какому то рандомнуму чуваку, Reddit топ! И кстати после этого мне написал редактор IMore.сом и сделал про нас статью.



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

Изначально планировалось производить прототип с использованием тонких металлов и армированием длинной гибкой пластиной. Для того, чтобы ускорить процесс прототипирования и тестирования решили использовать лист тонкого ПЭТ пластика. Да, его хватает ненадолго, но вполне сгодится для анализа конструктива изделия. В качестве способа фиксации изначально решили использовать неодимовые магниты, но как показал наш первый прототип, нет не столько мощного магнита необходимого под наши размеры, а из-за использования металла изделие получилось очень тяжёлым и не таким удобным как изначально хотелось бы.


stol-p1 имеет 5 разных позиции для работы на ноутбуке и таблете:



Для того чтобы посмотреть больше информации и поддержать мой проект переходите сюда

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

Stol-P1 это проект который является для меня вызовом, чтобы сделать что то крутое и доказать себе что я чего то стою. Мы собираемся запускаться на платформе Kickstarter, сейчас работа идёт полным ходом. Если вам понравился проект thumbs up!)