CC BY
87
УДК 004.9
ИССЛЕДОВАНИЕ ПРИНЦИПОВ АДАПТИВНОГО ВЕБ-ДИЗАЙНА
И.Н. Егорова
Кандидат технических наук, доцент Кафедра мультимедийных систем и технологий* Контактный тел.: (057) 702-13-78 E-mail: [email protected] Е.А. Толстая Кафедра медиасистем и технологий* Контактный тел.: 097-850-75-82 Е-mail: [email protected] *Харьковский национальный университет радиоэлектроники пр. Ленина, 14, г. Харьков, Украина, 61166
-□ □-
У датй роботi розглядаються осо-бливостi мобшьних пристрогв як засо-бу доступу в 1нтернет, проводиться дослидження принцитв створення адаптивного веб-сайту, орieнтовано-го на користувачiв сучасних мобшьних пристрогв
Ключовi слова: мобшьний при-стрш, адаптивний дизайн, сенсорний
екран, тач-ттерфейс
□-□
В данной работе рассматриваются особенности мобильных устройств как средства доступа в Интернет, проводится исследование принципов создания адаптивного веб-сайта, ориентированного на пользователей современных мобильных устройств
Ключевые слова: мобильное устройство, адаптивный дизайн, сенсорный экран, тач-интерфейс -□ □-
1. Введение
В настоящее время в мире насчитывается более четырех миллиардов мобильных устройств. Немалую долю в этом числе занимают современные смартфоны и планшеты. Благодаря развитию мобильных технологий все больше пользователей используют свои телефоны для доступа в интернет. Распространению мобильного интернета способствует и то, что доступ в Сеть становится доступнее с каждым годом - его стоимость уменьшается, зона покрытия сетей расширяется, а качество связи и скорость передачи данных растет. Доля мобильного интернета уже сейчас составляет порядка 40% от общего числа и продолжает увеличиваться.
По версии исследовательской компании Morgan Stanley Research, число мобильных интернет-пользователей превысит число стационарных пользователей во всем мире уже в 2014 году [1].
При создании веб-ресурса необходимо считаться с гораздо большим количеством устройств и разрешений. Сеть расширила свои границы за пределы области стационарных компьютеров.
Таким образом, исследование новых принципов разработки сайтов с учетом потребностей не только стационарных компьютеров, но и мобильных устройств, представляется актуальным.
2. Анализ проблемы
К мобильным устройствам принято относить мобильные телефоны, смартфоны и коммуникаторы. Современные мобильные устройства обладают широким функционалом и по многим параметрам уже не уступают настольным компьютерам. Однако у них есть своя специфика. Следует учитывать основные особенности мобильных устройств, такие как:
©
- маленький экран. Этот параметр может трактоваться двояко. Во-первых, мобильные устройства имеют меньший размер экрана. У смартфонов этот размер составляет 3-4 дюйма, у планшетов -7-10, тогда как средний ноутбук имеет размер экрана 15 дюймов, а настольный монитор — 19. Во-вторых, разрешение экрана смартфонов также не превышает разрешения современных мониторов;
- низкое быстродействие. Несмотря на стремительное развитие, смартфоны пока отстают по этому параметру от настольных компьютеров и ноутбуков;
- меньшая пропускная способность мобильных сетей. Даже при поддержке 3G она, как правило, не превышает 1 Мбит/сек, а более ранние протоколы имеют еще меньшую скорость передачи данных;
- способ ввода. Большинство современных смартфонов и планшетов оснащены сенсорными экранами, которые характеризуются ограниченной точностью позиционирования;
- неудобство клавиатуры. Известно, что любая, даже qwerty-клавиатура мобильного устройства, уступает в удобстве самой простой настольной из-за маленького размера клавиш и сложности набора некоторых символов;
- ограниченная многозадачность. Работа в сети Интернет с помощью мобильных устройств сопровождается большим количеством ограничений. Например, возможность полноценного перемещения между открытыми вкладками крайне проблематична.
Перечисленные аспекты, и в особенности маленький размер дисплея, делают просмотр обычного вебсайта на мобильном устройстве весьма затруднительным.
Широко распространенным подходом решения этой проблемы является создание самостоятельной версии сайта для каждого из устройств. Однако, разнообразие портативных устройств настолько велико, что возникает необходимость создания сразу несколь-
ких версий для мобильных устройств, что экономически нецелесообразно.
Гораздо более перспективным является создание адаптивного веб-сайта, способного приспосабливаться к требуемым параметрам различных устройств.
3. Цель и задачи исследования
Целью работы является исследование принципов создания адаптивных веб-сайтов, ориентированных на пользователей современных мобильных устройств.
4. Результаты исследования
Адаптивный веб-дизайн - это технология создания сайтов, которая обеспечивает удобство их просмотра на различных устройствах (стационарных компьютерах, ноутбуках, планшетах, смартфонах, а также телевизорах, имеющих подключение к Интернет). Целью адаптивного веб-дизайна является универсальность HTML-разметки веб-сайта для различных устройств. Таким образом, нет необходимости в создании отдельных версий сайтов для устройств, имеющих различные разрешения и использующих разные форматы.
В работе исследованы три основных принципа адаптивного веб-дизайна, используемых при разработке макетов страниц, а именно «гибкий» макет, «гибкое» изображение и медиазапросы.
В основу «гибкого» макета положен принцип пропорций (fluid grids). Идея «гибкого» или «текучего» макета состоит в том, что при верстке вместо абсолютных величин используются относительные, т.е. значения задаются в процентах и «em». Используя этот метод, ширина блока в процентах находится по следующей формуле
ширина блока (%) = ширина блока (рх)/ширина макета (px).
Основная идея «гибких» изображений (flexible images) заключается в том, что для изображений следует применять свойство {max-width: 100%}. В этом случае изображения не будут выходить за пределы родительского блока, даже если они превышают размеры блока. Изображение при этом будет пропорционально уменьшаться. Этот же подход применим к видео, флеш-вставкам и другим объектам.
Медиазапросы (media queries) являются частью стандарта CSS, которая позволяет применять стили на основе информации о разрешении экрана, высоте и ширине браузера, ориентации в пространстве и возможностях устройства. Идея медиазапросов заключается в том, чтобы определить, как размещать информацию, какую информацию показывать, а какую нет, в зависимости от значения всех этих параметров.
Если экран маленький, необходимо перегруппировать все элементы так, чтобы они разумно умещались на экране, если большой, значит нужно оптимально занять доступное место.
При создании адаптивного сайта следует учитывать, что мобильные устройства, с которых будет просматриваться сайт, в большинстве случаев имеют сенсорный экран. Человеческие пальцы — не самый точный инструмент. Им не хватает аккуратности компьютерной мыши. При разработке тач-интерфейса сайта необходимо это учитывать. Так, ссылки, элементы навигации и пункты меню не следует делать слишком мелкими. Таким образом, следует придерживаться правила: чем важнее выполняемая задача, тем крупнее должна быть зона касания. В руководстве iOS Human Interface Guidelines Apple рекомендует, чтобы размер зоны для нажатия составлял 44x44 пункта. В качестве единицы измерения компания Apple использует пункты, а не пикселы, поскольку экраны разных устройств имеют разное разрешение. Компания Microsoft также применяет этот подход в руководстве для Windows Phone 7. В частности, предусмотрено, что оптимальный размер тач-зоны должен составлять 9 мм, минимальный - 7 мм, а минимальное расстояние между различными зонами - 2 мм. Существуют и другие руководства для разработчиков, которые рекомендуют примерно такие же размеры, как и Microsoft. За основу принят средний размер человеческого пальца [2].
Методология адаптивного дизайна не ограничивается лишь дизайном макета - сам процесс разработки также претерпевает изменения. Если ранее разработчики при создании сайта ориентировались прежде всего на стационарные ПК, а уже потом дорабатывали и упрощали его для корректной работы в мобильных браузерах, то сейчас считается целесообразным начинать разработку «от простого к сложному». Таким образом, первостепенной задачей считается воплощение базового функционала для мобильных устройств с последующим развитием дополнительных возможностей для пользователей стационарных компьютеров. Такой подход вынуждает сконцентрироваться на наиболее приоритетных задачах и функциях, приняв ограничения, присущие мобильным устройствам.
5. Выводы
В ходе исследования из множества принципов адаптивного веб-дизайна были выделены и сформулированы основополагающие. Эти принципы ориентированы на мобильную аудиторию в той же мере, как и на пользователей стационарных компьютеров. Названные принципы, такие как создание гибкого макета, гибкого изображения, а также медиазапросы наибольшим образом влияют на эффективность конечного продукта.
Литература
1. Morgan Stanley Research. The Mobile Internet Report [Текст] / Morgan Stanley & Co. Incorporated. - 2009. - 424 с.
2. Вроблевски Люк. Сначала мобильные [Текст] / Л. Вроблевски - М: Изд-во «Манн, Иванов и Фербер», 2012. - 176с.
3. Маркотт Итан. Отзывчивый веб-дизайн [Текст] / И. Маркотт - М: Изд-во «Манн, Иванов и Фербер», 2012. - 170с.
Abstract
Due to the development of mobile technology in recent years more and more people use their phones to access the Internet. However, such peculiarities of mobile devices, as small size of the display and touch interface make it inconvenient to view general websites on the screen. The authors suggested a solution to this problem - the creation of adaptive Website.
The adaptive web design is a technology of site creation that provides easy viewing on a variety of devices: desktops, laptops, tablets, smartphones.
The article concerns the development of an adaptive web site, oriented towards the users of mobile devices. The basic principles that have the greatest influence on the efficiency of the final product are: flexible grid, flexible images and media queries.
The results obtained were used to develop a training website
Keywords: mobile device, adaptive design, touch screen, touch interface
□
У статтi представлен варiанти вико-ристання фери- та феромагттних первин-них та вимiрювальних перетворювачiв у складi пристрогв систем навкацп та авюшки лтальних апаратiв
Ключовi слова: авюшка, фери- та феро-магттт перетворювачi, параметричт вимiрювальт перетворювачi, навиацшш системи
□-□
В статье представлены варианты использования ферри- и ферромагнитных первичных и измерительных преобразователей в составе устройств систем навигации и авионики летательных аппаратов
Ключевые слова: авионика, ферри- и ферромагнитные преобразователи, параметрические измерительные преобразователи, навигационные системы -□ □-
УДК 629.735.05:629.735.33-519
ЗАСТОСУВАННЯ ФЕРИ - ТА ФЕРОМАГН1ТНИХ ПЕРЕТВОРЮВАЧ1В В СИСТЕМАХ НАВ1ГАЦМ ТА
АВ1ОН1КИ
В.Ю. Л а р i н
Доктор техычних наук, професор Кафедра аеронав^ацтних систем Нацюнальний авiацiйний уыверситет пр. Комарова, 1, м. Кшв, УкраТна, 03058 Контактний тел.: 050-830-53-63 E-mail: [email protected]
1. Актуальшсть дослщження
Шдвищення обсягу авiаперевезень та зростання загально! юлькоси лиальних апараив ускладнюе основне завдання авiацiйного транспорту - забезпе-чення безпеки польопв. Передбачаеться комплексне ршення вказано! проблеми, яке потребуе наполегливо! пращ велико! юлькосп спещалкпв з рiзних галузей науки i виробництва - вчених, iнженерiв-розробникiв, спещалкпв авiацiйних шдприемств та аеропорпв. Вказане завдання набувае гостро! необхщносп також внаслщок бурхливого розвитку безшлотного сектору повиряних суден.
Необхщний рiвень безпеки польопв може бути забезпечений не ильки створенням нових заходiв щодо оргашзацп повиряного руху, а i створенням нових пристро!в та систем нав^ацп i авюшки. Можна навиь сказати б^ьше - без створення якюно нових
технiчних засобiв забезпечення безпеки польоив не можливо реалiзувати значну юлькють оргашзацш-них та процедурних заходiв. Враховуючи вказане, пошук ново! концепцп для створення навiгацiйних систем забезпечення безпеки польоив е дуже акту-альним.
2. Мета дослщження
Метою запропонованого дослщження е визначення перспектив розвитку та застосування самих надшних елеменпв магштно! вимiрювальноi технiки, а саме, фери- та феромагштних перетворювачiв в iснуючих навiгацiйних пристроях та пристроях авюшки, а також показати певш шляхи шдвищення ефективносп нових, створюваних та перспективних пристро!в вка-заних систем.
