Главная/ Учимся Javascript, CSS, HTML/ Бонус книги/ Programming The Mobile Web/ Mobile Jungle/ Мобильные знания. Разработка для мобильного Веб. Maximiliano Firtman

Мобильные знания

Подготовили: Анна Лысак и Татьяна Головко

Дата публикации: 04.05.2011

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

Дисплей

Я знаю, о чем ты думаешь: «Он собирается рассказывать мне об экранах небольших размеров». Да, я собираюсь начать именно с этого. У мобильного устройства дисплей намного меньше, чем у обычного компьютера. Разрабатывая продукты для настольных компьютеров мы говорим о экранах в 17, 19 и 21 дюйм по диагонали, а в случае с мобильными устройствами речь идет уже о 1.5, 2.3, или 3-х дюймах. Это огромная разница. Аналогично, если в случае с настольными компьютерами мы говорим о 1024×768 пикселях, то в случае с мобильными устройствами — о половине или четверти этих размеров.

Разрешение

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

Не существует стандартного размера экрана мобильного устройства. У одного устройства может быть разрешение 128×128 пикселей, а у другого 800×600. Но если мы говорим об устройствах продающихся начиная с 2007 года, то все их можно разделить на четыре основные группы:

  • простые (low-end) устройства с размерами 128×160 или 128×128 пикселей;
  • устройства среднего класса (mid-end) (1 группа): экран 176×220 или 176×208 пикселей;
  • устройства среднего и высокого класса (2 группа): 240×320 пикселей;
  • устройства высокого класса с поддержкой touch и смартфоны: 240×480, 320×480, 360×480, 480×800, 480×854 и 640×960;

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

Наиболее распространенное разрешение дисплея сегодня — 240×320 пикселей, такое разрешение известно также под именем QVGA (Quarter VGA — четверть VGA), так как в 90-х годах VGA стандарт был 640×480.

У iPhone 3GS например, разрешение 320×480 и такой размер известен как HVGA (Half VGA — половина VGA).

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

Физические размеры

Разрешение не единственный момент, который нас интересует в экранах мобильного устройства. Так же, как и разрешение, важен физический размер экрана (в дюймах или сантиметрах по диагонали или ширина/высота экрана) или соотношение между размерами и разрешением, которое известно как PPI (pixels per inch — пикселей на дюйм) или DPI (dots per inch — точек на дюйм). Этот параметр очень важен, потому как твоей первой мыслью будет, что экран с разрешением 128×160 пикселей меньше экрана с разрешением 240×320, но такое мнение может быть ошибочным.

Благодаря подарку Nokia в 2006 году у меня был телефон N90, он хоть и смахивал на кирпич, все равно в нем было очень хорошее (или не очень, как оказалась потом) разрешение 352×416. Проблема была в том, что размер экрана был практически такой же как и у других устройств на рынке, но с разрешением 176×208. Поэтому я практически не мог пользоваться играми, приложениями или выходить в Интернет — мне нужна была лупа, чтобы прочесть обыкновенный шрифт. Каждый программист считает, что чем больше пикселей доступно, значит тем больше размер экрана. Так зачем же тогда увеличивать шрифт? «Давайте лучше используем дополнительное пространство и разместим больше элементов». Это неправильно.

В июне 2010 года Apple представила iPhone 4, первое устройство с «дисплеем-сетчаткой», то есть дисплеем, где размещается 326 пикселей на дюйм. У сетчатки человеческого глаза есть предел в 300 пикселей на дюйм на определенном расстоянии. Таким образом, у этого устройства с размерами 960×640 в альбомном режиме на экране размещено больше пикселей, чем мы можем увидеть. Это идеально для просмотра изображений или масштабирования. Но помни, что нам нужен или зум или большие шрифты, чтобы текст хорошо читался.

У Nokia N90 дисплей размером 1.36 ″ × 1.6 ″ (3.45 см × 4.07 см) = 259 PPI (или размер одной точки составляет 0.0979 мм), в то время как у других устройств с похожим размером экрана значения колеблются между 130 и 180 PPI.

Соотношение сторон ( Aspect ratio)

Aspect ratio отображает соотношение высоты и ширины экрана девайса. Есть вертикальные (портретные) устройства, где высота превышает ширину, а есть горизонтальные (альбомные) устройства, где ширина больше высоты. Есть еще и квадратные экраны (на рисунке 1.4). Но чтобы совсем усложнить жизнь программистам, дисплеи также умеют поворачиваться и, соответственно, менять формат. То есть размер экрана одного и того же девайса может быть и 320×240 и 240×320. Наши веб-сайты должны быть подготовлены к такому «повороту событий» и быть удобными в любой позиции.

пример горизонтального, вертикального и квадратного экранов
Рис. 1.4. Пример горизонтального, вертикального и квадратного экранов

Способы ввода информации

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

  • числовая (цифровая) клавиатура;
  • алфавитно-цифровая клавиатура (ABC или QWERTY);
  • виртуальная клавиатура на экране;
  • touch;
  • multitouch;
  • внешняя клавиатура (беспроводная или нет);
  • распознавание почерка;
  • распознавания голоса.

И конечно любая возможная комбинация этих вариантов: например, touch устройство с экранной виртуальной клавиатурой или даже полным физическим QWERTY вариантом (смотри рисунок 1.5).

Nokia N97 mini в развернутом варианте имеет полную QWERTY клавиатуру, а в закрытом варианте touch клавиатуру
Рис. 1.5. Nokia N97 mini в развернутом варианте имеет полную QWERTY клавиатуру, а в закрытом варианте touch клавиатуру

Если ты думаешь, что название QWERTY это что-то вроде Клингконга из Стар Трека, то просто опусти глаза и посмотри на первый ряд букв под числами на своей клавиатуре — вот причина названия, потому как это раскладка клавиатуры, созданная для удобного набирания на английском языке еще в 1874 году. Такое же расположение сохранено на многих виртуальных клавиатурах (см. рисунок 1.6).

iPhone и iPod Touch используют виртуальную клавиатуру на экране, когда пользователю нужно набрать текст
Рис. 1.6. iPhone и iPod Touch используют виртуальную клавиатуру на экране, когда пользователю нужно набрать текст

Другие функции

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

Geolocation

Многие устройства способны отслеживать географическое положение пользователей, используя одну или сразу несколько технологий вроде GPS, A-GPS, WPS (система позиционирования WiFi) или по расположению в «ячейке» сотового оператора.

Телефонные звонки

Да, мобильными устройствами можно пользоваться еще и как телефоном!

SMS (Short Message Service)

Большинство девайсов позволяет создавать и передавать на сервер или другие устройства короткие текстовые сообщения длиной до 160 7-битных (7-bit) ASCII символов (еще варианты: 140 8-битных ASCII символов или 70 символов Unicode) или объединять несколько сообщений в одно для увеличения размера текста.

MMS (Multimedia Message Service)

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

Установка приложений

Многие устройства дают возможность своему владельцу загружать и устанавливать дополнительные приложения, используя OTA (Over-The-Air), то есть ты можешь установить приложение на тот же смартфон прямо с сайта.

Куда дальше

Показать комментарии