Технология обработки данных, основанная на мейнфреймах и господствовавшая до создания Apple I, в настоящее время возрождается в виде облачных сервисов. Современные облачные сервисы основаны на модели распределенных вычислений – SPI, или всем знакомые SaaS, PaaS, IaaS. Интеграция облачных технологий, при всех своих недостатках, имеет ряд весомых преимуществ для создания клиент-серверных веб-приложений.
Основной целью
разработки и интеграции веб-приложений для малого бизнеса является перенос программного обеспечения и вычислительных ресурсов с локальных узлов на распределенные сервера, что позволяет уменьшить общий TCO на обслуживание и поддержку аппаратной части и ПО. Становится совершенно не важно, сколько у вас филиалов, узлов и в каких странах. Все сотрудники работают с единым программным обеспечением для CRM, телефонии, систем учета и продаж. В качестве клиента в таком случае выступает веб-браузер или скомпилированное Electron приложение, а сервера – арендуемое облако.
Одной из главных задач UX в разработке веб-приложения или корпоративного сайта является создание native-look интерфейса под операционную систему пользователя. Основным элементом интерфейса операционных систем являются системные шрифты.
Атрибуты шрифта
Для работы с шрифтами используется html тег <p> и согласно документации W3C имеются следующие основные атрибуты: style; variant; weight, size; height; family. Обычная запись в класса CSS выглядит так:
1
2
3
4
5
| .oursite__menu_header {
font-family: Roboto;
font-size: 2em;
font-weight: 300;
} |
Дополнительные атрибуты тега <p>
Специально для создания native look веб-приложений существуют дополнительные атрибуты:
- caption – для элементов взаимодействующих с манипулятором (кнопки, элементы меню);
- small-caption – тоже самое, только для элементов небольшого размера;
- icon – иконки;
- menu – выпадающее меню;
- message-box – для диалоговых окон;
- status-bar – для статус-баров.
Размеры системных шрифтов для создания сайтов и веб-приложений
Прежде всего, нужно знать, что font-family различны для каждой операционной системы:
- OS X > 10.10 — San Francisco и San Francisco Compact Rounded;
- Windows XP — Arial;
- Windows > 7 — Segoe UI;
- Ubuntu — Ubuntu;
- CentOS 7, Fedora, RHEL 7– Cantarell.
Но такие атрибуты, как font-style, font-variant, font-weight унифицированы для всех операционных систем и приведены к следующим значениям:
1
2
3
4
5
| {
font-style: normal;
font-variant: normal;
font-weight: regular;
} |
Основные различия заключаются в размерах элементов интерфейса для атрибута font-size:
| Значение атрибута font-size для системных шрифтов |
font-size для Windows |
font-size для Mac |
| caption |
16 px |
13 px |
| icon |
16 px |
13 px |
| menu |
12 px |
13 px |
| small-caption |
12 px |
11 px |
| status-bar |
12 px |
11px |
Пример использования системных шрифтов в верстке сайта или веб-приложения созданного для Windows:
1
2
3
4
| .oursite__menu_header {
font: menu;
font-size: 24px;
} |
Давайте посмотрим, как бы выглядело описание класса меню в CSS при использовании стандартных атрибутов html тега <p>.
1
2
3
4
5
6
7
8
9
| .oursite__menu_header {
font-family: Segoe UI; /*Системный шрифт Windows > 7 */
font-style: normal;
font-weight: regular;
font-variant: normal;
font-size: 12px; /* Размер системного шрифта в Windows для меню*/
font-size: 24px;
} |
Как видите, первая запись в три раза меньше и при необходимости значение размера шрифта также легко изменить на необходимый нам размер. Используя дополнительные атрибуты вы сможете разработать native look сайта и веб-приложения для операционной системы вашего пользователя.
В заключении хочется отметить, что Outlooker.ru занимается не только созданием сайтов в Санкт-Петербурге и поддержкой сайтов, но и разработкой веб-приложений и дополнительной функциональности для автоматизированной системы вашего бизнеса. Если у Вас появились вопросы, свяжитесь с нами, и мы постараемся найти для них решение.
