Особенности разработки мобильного приложения

11 Січ
11.01.2013

Art Depo Programming Tips

Данная статья — своего рода резюме к книге “Разработка iPhone-приложений с помощью HTML, CSS и JavaScript” Джонатана Старка. В ней описана простая и понятная пошаговая инструкция разработки приложения для iPhone. Там же описаны различия между веб и нативным приложением.

Веб-приложение:

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

Нативное приложение:

  • устанавливается на телефон;
  • пишется на Objective-C и ему подобных;
  • имеет доступ к оборудованию.

Каждый тип приложения имеет свои достоинства и недостатки. Разработка того или иного выбирается в индивидуальном порядке в зависимости от требований к приложению.


Этапы, особенности, рекомендации для разработки мобильных приложения на примере iPhone-приложений.

Составляющие приложения:

  • index.html — разметка
  • iphone.css — отдельная таблица стилей для телефона
  • iphone.js — отдельный файл скрипта для телефона
  • loading.gif — индикатор загрузки — отклик на действие пользователя.
  • touch_icon.png — Web clip icon (57×57 iPhone) — иконка приложения для добавления ярлыка на главный экран.
  • start_img.png — Startup image (320×460, если строка состояния включена, иначе — 320×480 – iPhone) — стартовый рисунок. Отображается, пока загружается приложение, вызванное с главного экрана. По умолчанию — скриншот последнего посещения приложения. Работает при включенном полноэкранном режиме.
  • back_bnt.png — возврат на предыдущую страницу.
  • jQTouch — анимация.

Особенности:

  • <meta name="viewport" content="user-scalable=no, width=device-width">correct meta viewport syntax
  • <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)"> — стили для мобильного устройства
  • font-family:Helvetica — шрифт по умолчанию в iPhone, используется в большинстве приложений
  • <meta name="apple-mobile-web-app-capable" content="yes"> — полноэкранный режим. Работает, когда приложения запускается с главного экрана.
  • <meta name="apple-mobile-web-app-status-bar-style" content="black"> — изменение строки состояния. Высота строки 20px. Установка в значение black-translucent сделает панель частично прозрачной. По умолчанию панель серого цвета default. Работает при включенном полноэкранном режиме.
  • -webkit-tap-highlight-color: rgba(0, 0, 0, 0) — цвет полупрозрачной серой рамки, которую Safari отображает над “кликабельными” объектами, которые были “нажаты”.
  • :active => .clicked — поскольку в Safari псевдокласс :active не работает, чтоб показать пользователю, что он нажал кнопку, необходимо использовать jQuery и добавлять к кнопке соответствующий класс .clicked пока страница перезагружается или загружается контент посредством Ajax.

Функционал:

  • Ajax — асинхронная загрузка контента, перехват внутридоменных ссылок.
  • Loader — индикатор загрузки запрошенного содержимого.
  • scrollTo(0, 0) — прокручивать наверх при переходе от страницы к странице.
  • Back — возврат на предыдущую страницу. Реализуется путем запоминания посещаемых страниц в массив. Используя Ajax, браузерная кнопка Назад работать не будет, а в полноэкранном режиме, этой панели не будет вовсе.
  • Image preload — предзагрузка базовых картинок (например, лоадер).
  • jQTouch — позволяет легко организовать анимацию перелистывания страниц как в нативных приложениях.
  • localStorage, sessionStorage и client DB — для хранения настроек, текущего состояния и данных приложения.
  • Offline Application Cache — создание файла manifest для кэширования файлов приложения.


Интересно:

Используя для тестирования Safari на ПК рекомендуется установить Мобильный агент в Веб-инспекторе и изменить размер окна, например, путем ввода в адресную строку

javascript:window.scrollTo(0,0);resizeTo(320,480);

Теги: , , ,

  • Guest

    kçjhkjhkhjk