Началось все с того, что мне потребовалось приложение, где были бы учитаны все мои расходы и доходы. Поскольку web-программирование мне более чем близко, то я написал небольшой сайт с простым интерфейсом, используя php. Но, поскольку учет расходов нужен был в реальном режиме времени, и в любом месте (где есть GPRS), то я решил адаптировать его под iPhone, чтобы при запуске оно выглядело оптимально.
Параметры, конечно, подбирались эмпирически, но я остановился на размере шрифта в 32px. При входе полям авторизации я выставил ширину 99% (чтобы гарантированно не было горизонтального скроллинга). Кнопка входа, размером 200x50px. На iPhone это все смотрелось достаточно крупно, и при этом не было никакого скроллинга, при повороте устройства на длинную сторону, поля авторизации автоматически растягивались.
Чтобы пользователь не смог поменять масштаб, а изначальный масштаб был бы задан 1 к 1, и ширина экрана задана как ширина устройства, необходимо в секцию <head> добавить мета-тег:
Поскольку работа приложения полностью зависит от сети интернет, то, чтобы лишний раз не ждать, все основные формы загружаются сразу и прячутся. А при клике, посредством JavaScript занимают место в основном контейнере, так например после авторизации открывается страница с информацией о последних доходах / расходах.
И если нажать на ссылку добавить, то на месте таблицы появится форма для добавления новых значений.
Основная идея, как можно меньше переходов по страницам. Т.е. сразу загрузили все блоки, потом, в зависимости от действия пользователя, отображаем их. Значения формы попадают в базу данных посредством ajax (а пользователю в этот момент выдается что-нибудь крутящееся с надписью loading).
Приложение готово, но есть одно но, чтобы его запустить, нужно зайти в браузер Safari, далее либо напрямую вбить адрес сайта, либо зайти в закладки, и выбрать оттуда. Хотелось бы запускать его, как все остальные из рабочего стола iPhone. И это можно сделать.
Нам понадобится иконка (здесь можно посмотреть рекомендации на размеры иконок от Apple). В итоге я сделал 3 иконки, размерами 57x57, 72x72 и 114x114 px. Иконка делается просто квадратной, сохраняется в формат .png. Обрезание углов и налажение блеска iPhone сделает сам.
Чтобы iPhone знал, откуда надо брать иконки, добавим в секцию <head> еще один мета-тег и 3 адреса иконок:
Далее остается первый раз открыть наш сайт через браузер Safari, там нажать «отправить» и выбрать «на экран домой», где уже будет отображена наша иконка (а не просто скриншот страницы).
Вот так, относительно простыми методами, получилось сделать iPhone приложение, работающее через интернет. Простота главным образом заключается в том, что не потребуется ни iTunes, ни appstore, ни mac. А создать на основе web-интерфейсов можно сколь угодно много разнообразных приложений.
Параметры, конечно, подбирались эмпирически, но я остановился на размере шрифта в 32px. При входе полям авторизации я выставил ширину 99% (чтобы гарантированно не было горизонтального скроллинга). Кнопка входа, размером 200x50px. На iPhone это все смотрелось достаточно крупно, и при этом не было никакого скроллинга, при повороте устройства на длинную сторону, поля авторизации автоматически растягивались.
Чтобы пользователь не смог поменять масштаб, а изначальный масштаб был бы задан 1 к 1, и ширина экрана задана как ширина устройства, необходимо в секцию <head> добавить мета-тег:
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, initial-scale=1.0, minimum-scale=1.0" />
Поскольку работа приложения полностью зависит от сети интернет, то, чтобы лишний раз не ждать, все основные формы загружаются сразу и прячутся. А при клике, посредством JavaScript занимают место в основном контейнере, так например после авторизации открывается страница с информацией о последних доходах / расходах.
И если нажать на ссылку добавить, то на месте таблицы появится форма для добавления новых значений.
Основная идея, как можно меньше переходов по страницам. Т.е. сразу загрузили все блоки, потом, в зависимости от действия пользователя, отображаем их. Значения формы попадают в базу данных посредством ajax (а пользователю в этот момент выдается что-нибудь крутящееся с надписью loading).
Приложение готово, но есть одно но, чтобы его запустить, нужно зайти в браузер Safari, далее либо напрямую вбить адрес сайта, либо зайти в закладки, и выбрать оттуда. Хотелось бы запускать его, как все остальные из рабочего стола iPhone. И это можно сделать.
Нам понадобится иконка (здесь можно посмотреть рекомендации на размеры иконок от Apple). В итоге я сделал 3 иконки, размерами 57x57, 72x72 и 114x114 px. Иконка делается просто квадратной, сохраняется в формат .png. Обрезание углов и налажение блеска iPhone сделает сам.
Чтобы iPhone знал, откуда надо брать иконки, добавим в секцию <head> еще один мета-тег и 3 адреса иконок:
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="http://адрес/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://адрес/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://адрес/apple-touch-icon-114x114.png" />
Далее остается первый раз открыть наш сайт через браузер Safari, там нажать «отправить» и выбрать «на экран домой», где уже будет отображена наша иконка (а не просто скриншот страницы).
Вот так, относительно простыми методами, получилось сделать iPhone приложение, работающее через интернет. Простота главным образом заключается в том, что не потребуется ни iTunes, ни appstore, ни mac. А создать на основе web-интерфейсов можно сколь угодно много разнообразных приложений.